The Web Wizards Guide to HTML Chapter Two

The Web Wizard’s Guide to HTML Chapter Two Basic Text Formatting

Chapter Objectives Show to create heading and paragraphs for Web pages l Explain how to control a variety of features associated with text l Learn how to add three types of lists to a Web page l Explore the layout and white-space controls for blocks of text l

Heading Elements l l l Headings come in six sizes <h 1> </h 1> is the largest heading <h 6> </h 6> is the smallest heading Headings break up text with titles and subtitles Heading tags also insert a significant amount of white space above and/or below the text being highlighted Heading tags are especially important for determining placement of your website in search engines

Tag Attributes Most HTML tags support their own set of tag attributes l Each attribute contains an attribute name and an attribute value l E. g. you can center a heading with an alignment attribute: <h 1 align=“center”> l IMPORTANT: All attributes of your HTML tags should be enclosed in double-quotes l

Breaking Up Text l The paragraph element <p> begins a block of text after an empty line (it is generally recommended that the <div> tag be used in place of the <p> tag) l The break element begins a block of text on a new line l The horizontal rule element <hr> inserts a horizontal line to emphasize a break in the text

Standard Type Face Options <font face=“Arial”> </font> l It is best to specify type faces in groups since different computers use different type fonts: face=“Arial, Geneva, Helvetica” face=“Times New Roman, Times” face=“Courier New, Courier” l Other useful font attributes include color and size l The <font> tag has been deprecated. CSS styles should be used for changing font formats instead. l

Three Types of Lists Ordered list Unordered list <ol> Definition list <li> </li> <ul> <li> </li> <dl> </ol> <dt> </ul> <dd> </dl> Although the closing List Item tag, </LI> is optional (as with the </P> tag), it is recommended that you use them forward compatibility with XML.

White Space Management l Browsers are programmed to ignore extraneous blank spaces and empty lines – Consequently, to make your HTML source easier to read, you should generously utilize white space to indent and separate blocks of code l Controlling white space on a Web page requires special HTML elements:   <pre></pre> <blockquote></blockquote>