HTML/XHTML
Basic Formatting

Discussion

• Formatting
  • The W3C (World Wide Web Consortium) sets the standards for writing HTML. However, not all browsers comply with the W3C standards.
  • The writers of the browsers invent new tags that have not been previously defined.
  • The differences among browsers sometimes renders tags differently on different browsers.
  • Sometimes the web designers and web developers are able to change the tag properties so that pages on the web will look the same cross browsers. This is done using CSS, Cascading Style Sheets.
  • Using only the HTML tags, your pages may not render exactly the same from browser to browser.
• Whitespace
  • In HTML when you enter multiple spaces of press the enter key, you still view one space on the screen. For example:
    

                      Hello        
                      
                      World

    
    appears as
    Hello World
  • To create multiple spaces, you may code the special entity   which stands for non-breaking space. Special entities begin with an ampersand and end with a semi-colon.
  • To create a line break inside of a block element, use the <br /> tag.
  • When using a paragraph tag, the paragraph will have a blank line before and after the the paragraph.
• Divisions
  • Parts of a page can be separated into sections. The div tag does not add any spaces or blanks. It is used to organize content. You can nest divisions inside other divisions.
• Align
  • The align attribute is used in HTML to align content. However, in XHTML strict, CSS is used for alignment. Unfortunately, the method to center differs from element to element and browser to browser.
    • margin-left: auto; margin-right: auto; centers a block level element.
    • text-align: center; centers the inline content of a block level element.
    • <h1 style="text-align: center;">Centers h tags</h1>
    • <h1 style="margin-left: auto; margin-right: auto;">Required centering for IE block level tags.</h1>
    • <h1 style="margin-left: auto; margin-right: auto; text-align: center;">Combine both methods to center in multiple browsers.</h1>
    • <div style="text-align:center;margin:0 auto 0 auto">Will center the content of the div</div>
• Bold and italic text
  • Both the b (bold) tag and the strong (strong) tag are used to bold text. Visually they look the same. However, when a screen reader stresses the strong text.
  • Both the i (italic) and the em (emphasis) tag are used to display text in italics. The em tag is stressed by screen readers.
• Preformatted text
  • The pre tag will render text exactly as written in the source code. Use pre tags sparingly because they override the defaults of that allow HTML pages to adjust to multiple screens and browsers.

Practice

• Basic Formatting
  • Open your myFirstPage.htm page and save it as formattedPage.htm
  • Add basic formatting to your formattedPage.htm page.
• Make any corrections for any page that does not validate or display correctly.