Topic Overview

Page Structure and Extra Markup Identifying with ids Styling with Classes Grouping with Divs Sectioning with Spans Building a Page (Step-by-Step) TODO

The 3-Part iframe Element 1. The <iframe> Tags 2. Source 3. Width and Height Review: The iframe Element Websites in the iframe Element Maps in the iframe Element Media in the iframe Element TODO

The Meta Element Character Set Attribute Description Attribute Author Attribute Keywords Attribute Viewport Element Review: Meta Elements TODO

Solving Conflicts with Escape Characters Escape Character Names Escape Character Codes Common Escape Characters TODO

Media on the Web Sourcing Images Sourcing Video Sourcing Audio Optimizing for the Web Media Hosting and Storage TODO

Review Images in HTML

Adding Video in HTML The 5-Part Video Element 1. The <video> Tags 2. Source 3. Poster 4. Width and Height 5. Other Attributes Review: The Video Element Formats and Browser Support TODO

Adding Audio in HTML The 3-Part Audio Element 1. The <audio> Tags 2. Source 3. Other Attributes Review: The Audio Element Formats and Browser Support TODO

Building a Page (Step-by-Step)

When thinking about page structure and layout, a good plan is to start with divs and begin identifying and grouping elements within:

“How many divisions (or sections) of my page do I want?” Create these <div></div> elements accordingly.
Name important divs using the id="" attribute.
Within the divs, add structural html content, like headings, paragraphs, etc.
Add class="" attributes to divs that need styling.
Use the <span></span> element around structural elements that need inline styling, like specific words of a paragraph.
Within the divs, add illustrative elements like images, audio, or video.
Repeat.

Step-By-Step

Below is a page with two descriptions of popular sports. Here are the steps taken to create this page:

Created 3 empty divs, <div>...</div>
Added ids to those divs, to make them unique:
- id="header"
- id="football-block"
- id="esports-block"
Added structural content to both divs, including headings and paragraphs.
Applied the classes listed in the <head>:
- class="page-block" to all the divs, as they should visually appear the same (color, font-size, etc).
- Added the centered class to all content to be centered on the page.
  Note To apply multiple classes to a div, simply add a “space” between classes. For example <div class="page-block centered">
Added a span to the first sentence of each paragraph, with the class class="first-line". With the applied styling stated in the <head>, each sentence with this span will be italic.
Added the illustrative content - the 2 flag images.
Swelled with pride.