HTML tips BTM 395: Internet Programming

Components of website development Content Structure Format and design Dynamics and interactivity –Forms –Client-side programming –Server-side programming –Databases Frameworks and content management systems

Structure and semantic markup HTML vs. XHTML vs. HTML5 –HTML: Lets you get away with murder –XHTML: Strict conformation to standards, or else the page breaks –HTML5: Strikes a balance: Flexible in what it allows, But strict in enforcing semantic markup HTML5 strictly for marking up page structure, not for formatting page appearance –CSS handles appearance –HTML5 has dropped many HTML features used to format appearance – and redefined—they just refuse to die!

Block-level vs. inline elements Block-level elements are surrounded by a box (usually invisible) and cannot sit side-by-side in the same sentence. –E.g. audio, blockquote, canvas, div, footer, form, h1, header, hr, ol, p, pre, table, ul, video Inline elements can sit side-by-side in a sentence. –E.g. a, b, br, button, code, em, i, input, q, script, select, span, sub, sup, strong, textarea

Web image formats Key concept: lossy vs. lossless compression –Lossless: reduces file size without any loss in image quality –Lossy: better reduction in file size, but some loss in image quality JPG –Lossy compression with customizable quality –Best for photos GIF –Small files with relatively few colours –Best for animated GIFs SVG –Vector graphics with programmability support –Good for complex illustrations (not photos) PNG –Very flexible; designed to be best of all worlds (e.g. supports transparency) –Best choice in almost all circumstances

Other tips HTML comments are often used by code interpreters to add special functionality Always use the alt tag for img: this greatly helps accessibility