CHS Web Design Track

Tutorial 1 Getting Started with HTML5

<< Previous Lesson | Next Lesson >>

Session 1.2 Visual Overview:

Writing the Page Body

HTML marks the major topical areas of a page using sectioning elements also referred to as semantic elements. Comparing Sections in HTML4 and HTML5

Element Description
address Marks contact information for an individual or group
article Marks a self-contained composition in the document such as a newspaper story [HTML5]
aside Marks content that is related to a main article [HTML5]
body Contains the entire content of the document
footer Contains closing content that concludes an article or section [HTML5]
h1, h2, h3, h4, h5, h6 Marks major headings with h1 representing the heading with the highest rank, h2 representing next highest-ranked heading, and so forth
header Contains opening content that introduces an article or section [HTML5]
nav Marks a list of hypertext or navigation links [HTML5]
section Marks content that shares a common theme or purpose on the page [HTML5]
To define the sections in the page body:
  1. If you took a break after the previous session, return to the ct_about.html file in your HTML editor.
  2. Directly after the opening tag, insert the following HTML code, indented to make the code easier to read:
    <header>
    <h1>Curbside Thai</h1>
    </header>
    <article>
    <h1>About Us</h1>
    </article>
    <footer>
    Curbside Thai 411 Belde Drive, Charlotte NC 28201 704-555-
    1151
    </footer>
  3. Save your changes to the file.
Figure 1-12 highlights the sectioning elements used in the page body.

Comparing Sections in HTML4 and HTML5

Using Grouping Elements

Element Description
blockquote Contains content that is quoted from another source, often with a citation and often indented on the page
div Contains a generic grouping of elements within the document
dl Marks a description list containing one or more dt elements with each followed by one or more dd elements
dt Contains a single term from a description list
dd Contains the description or definition associated with a term from a description list
figure Contains an illustration, photo, diagram, or similar object that is cross-referenced elsewhere in the document [HTML5]
figcaption Contains the caption associated with a figure [HTML5]
hr Marks a thematic break such as a scene change or a transition to a new topic (often displayed as a horizontal rule)
main Marks the main content of the document or application; only one main element should be used in the document [HTML5]
ol Contains an ordered list of items
ul Contains an unordered list of items
li Contains a single item from an ordered or unordered list
p Contains the text of a paragraph
pre Contains a block of preformatted text in which line breaks and extra spaces in the code are retained (often displayed in a monospace font)
To group the page text into paragraphs:
  1. Use a text editor to open the ct_pages.txt file from the html01 < tutorial folder.
  2. Select and copy the three paragraphs of text directly after the About Us title.
  3. Close the file, but do not save any changes you may have inadvertently made to the document.
  4. Return to the ct_about.html file in your HTML editor.
  5. Directly after the <h1>About Us</h1> line within the page article, insert a new blank line and paste the text you copied.
  6. Enclose each of the three paragraphs of pasted content between an opening <p>tag and a closing </p> tag. Indent the code within the article element to make the code easier to read.
  7. Save your changes to the file.
Figure 1-15 highlights the newly added code for the three paragraphs of article text

Using Text-Level Elements

Element Description
a Marks content that acts as a hypertext link
abbr Marks an abbreviation or acronym
b Indicates a span of text to which attention should be drawn (text usually appears in bold)
br Represents a line break within the grouping element
cite Marks a citation to a title or author of a creative work (text usually appears in italics)
code Marks content that represents computer code (text usually appears in a monospace font)
data Associates a data value with the marked text with the value attribute providing the value [HTML5]
dfn Marks a defined term for which a definition is given elsewhere in the document
em Indicates content that is emphasized or stressed (text usually appears in italics)
i Indicates a span of text that expresses an alternate voice or mood (text usually appears in italics)
kbd Marks text that represents user input, typically from a computer keyboard or a voice command
marks Contains a row of text that is marked or highlighted for reference purposes [HTML5]
q Marks content that is quoted from another source
s Marks content that is no longer accurate or relevant (text is usually struck through)
samp Marks text that represents the sample output from a computer program or application
small Marks side comments (text usually in small print)
span Contains a generic run of text within the document
strong Indicates content of strong importance or seriousness (text usually appears in bold)
sub Marks text that should be treated as a text subscript
sup Marks text that should be treated as a text superscript
time Marks a time value or text string [HTML5]
u Indicates text that appears stylistically different from normal text (text usually appears underlined)
var Marks text that is treated as a variable in a mathematical expression or computer program
wbr Represents where a line break should occur, if needed, for a long text string [HTML5]
To apply text-level elements to a page:
  1. Go to the first paragraph within the page article and enclose the opening words Curbside Thai within a set of opening and closing <strong> tags. You use the <strong> tags when you want to strongly reinforce the importance of the text, such as the restaurant name, for the reader.
  2. In the second paragraph, enclose the phrase, Curbside Thai will deliver within a set of opening and closing <em> tags to emphasize this text.
  3. Go the third paragraph and mark Carolina Traveler using the cite element nd then mark the extended quote, the finest Asian food on or off the streets of Charlotte, using the q element.
  4. Save your changes to the file.
  5. Open the ct_about.html file in your browser to view how your browser renders the page content.
Figure 1-17 highlights the application of the four text-level elements to the paragraph text.
Figure 1-18 shows the current appearance of the page.
Trouble? Depending on your browser and/or device, you might see some minor differences in the appearance of the About Curbside Thai web page from that shown in Figure 1-18.

Linking an HTML Document to a Style Sheet

>
To link an HTML document to a style sheet:
  1. Return to the ct_about.html file in your HTML editor.
  2. Directly before the closing tag, insert the following link elements:
    <link href=”ct_base.css” rel=”stylesheet” />
    <link href=”ct_layout2.css” rel=”stylesheet” />
                        
  3. Save your changes to the file and then reload the ct_about.html file in your browser.
Figure 1-19 highlights the two style sheet links added to the document.
Figure 1-20 shows the new appearance of the page using the style sheets provided by Sajja.

Working with Character Sets and Special Characters

HTML NameSymbolDescription
&excl; ! Exclamation mark
&amp;quot; " Double quotes (or speech marks)
&num; # Number sign
&dollar; $ Dollar
&percnt; % Per cent sign
&amp; & Ampersand
&apos; ' Single quote
&lpar; ( Open parenthesis (or open bracket)
&rpar; ) Close parenthesis (or close bracket)
&ast; * Asterisk
&plus; + Plus
&comma; , Comma
&sol; / Slash or divide
&colon; : Colon
&semi; ; Semicolon
&lt; < Less than (or open angled bracket)
&equals; = Equals
&gt; > Greater than (or close angled bracket)
&quest; ? Question mark
&commat; @ At sign
&lsqb; [ Opening bracket
&bsol; \ Backslash
&rsqb; ] Closing bracket
&Hat; ^ Caret - circumflex
&lowbar; _ Underscore
&grave; ` Grave accent
&lcub; { Opening brace
&verbar; | Vertical bar
&rcub; } Closing brace
&tilde; ˜ Equivalency sign - tilde
&euro; Euro sign
&sbquo; Single low-9 quotation mark
&bdquo; Double low-9 quotation mark
&hellip; Horizontal ellipsis
&dagger; Dagger
&Dagger; Double dagger
&circ; ˆ Modifier letter circumflex accent
&permil; Per mille sign
&lsaquo; Single left-pointing angle quotation
&lsquo; Left single quotation mark
&rsquo; Right single quotation mark
HTML NameSymbolDescription
&ldquo; Left double quotation mark
&rdquo; Right double quotation mark
&bull; Bullet
&ndash; En dash
&mdash; Em dash
&tilde; ˜ Small tilde
&trade; Trade mark sign
&rsaquo; Single right-pointing angle quotation mark
&nbsp;   Non-breaking space
&iexcl; ¡ Inverted exclamation mark
&cent; ¢ Cent sign
&pound; £
&curren; ¤ Currency sign
&yen; ¥ Yen sign
&brvbar; ¦ Pipe, broken vertical bar
&sect; § Section sign
&uml; ¨ Spacing diaeresis - umlaut
&copy; © Copyright sign
&ordf; ª Feminine ordinal indicator
&laquo; « Left double angle quotes
&not; ¬ Negation
&shy; ­ Soft hyphen
&reg; ® Registered trade mark sign
&macr; ¯ Spacing macron - overline
&deg; ° Degree sign
&plusmn; ± Plus-or-minus sign
&sup2; ² Superscript two - squared
&sup3; ³ Superscript three - cubed
&acute; ´ Acute accent - spacing acute
&micro; µ Micro sign
&para; Pilcrow sign - paragraph sign
&middot; · Middle dot - Georgian comma
&cedil; ¸ Spacing cedilla
&sup1; ¹ Superscript one
&ordm; º Masculine ordinal indicator
&raquo; » Right double angle quotes
&frac14; ¼ Fraction one quarter
&frac12; ½ Fraction one half
&frac34; ¾ Fraction three quarters
&iquest; ¿ Inverted question mark
&divide; ÷ Division sign
To insert a character encoding reference number and an entity reference:
  1. Return to the ct_about.html file in your HTML editor.
  2. Go to the footer element and insert the character encoding number &#8226; directly after the word Thai and after the postal code 28201. Insert the character reference &nbsp; directly before the postal code.
  3. Save your changes to the file and then reload the ct_about.html file in your browser. Confirm that the footer now shows the characters displayed in Figure 1-22.
Figure 1-21 highlights the character codes and references added to the footer.
Figure 1-22

Working with Inline Images

Element Description
audioRepresents a sound clip or audio stream [HTML5]
canvasContains programming scripts used to construct bitmap images and graphics [HTML5]
embedContains general embedded content including application or interactive content
iframeContains the contents of an external web page or Internet resource
imgContains a graphic image retrieved from an image file
objectContains general embedded content including application or interactive content
videoRepresents a video clip or video stream with captions [HTML5]
To insert inline images into a document:
  1. Return to the ct_about.html file in your HTML editor.
  2. Go to the header element and replace the h1 element with the tag
    <img src=“ct_logo2.png” alt=“Curbside Thai” />
  3. Go to the article element and, directly after the h1 element, insert the tag
    <img src=“ct_photo1.png” alt=“” />
  4. Save your changes to the file and then reload the ct_about.html file in your browser.
Figure 1-24 highlights the newly added img elements in the document.
Figure 1-25 displays the newly added graphic images in the web page. Trouble? The exact appearance of the text as it flows around the image will vary depending on the width of your browser window.

Working with Block Quotes and Other Elements

To create the reviews page:
  1. Open the ct_reviews_txt.html file from the html01 > tutorial folder in your HTML editor. Enter your name and the date in the comment section and save the file as ct_reviews.html.
  2. Go to the ct_pages.txt file in your text editor.
  3. Locate the section containing the restaurant reviews and copy the text of the four reviews and awards.
  4. Return to the ct_reviews.html file in your HTML editor and paste the text of the four reviews directly after the <h1>Reviews</h1> line.
  5. Enclose each review within a set of <blockquote> tags. Enclose each paragraph within each review with a set of <p> tags. Align and indent your code to make it easier to read.
  6. Save your changes to the file and then open the ct_reviews.html file in your browser.
Figure 1-26 highlights the newly added code in the document.
Figure 1-27 shows the appearance of the restaurant review quotes using Sajja's style sheet.
To create the Catering page:
  1. Open the ct_catering_txt.html file from the html01 > tutorial folder in your HTML editor. Enter your name and the date in the comment section and save the file as ct_catering.html.
  2. Return to the ct_pages.txt file in your text editor.
  3. Locate the section containing information about Curbside Thai's catering service and copy the four paragraphs of information.
  4. Return to the ct_catering.html file in your HTML editor and paste the copied text directly after the <h1>Catering</h1> line.
  5. Mark each paragraph in the article using the p element. Align and indent your code to make it easier to read.
  6. Directly after the <h1>Catering</h1> tag, insert an inline image using ct_photo2.png as the source and an empty text string for the alt attribute.
  7. Save your changes to the file and then open the ct_catering.html file in your browser.
Figure 1-28 highlights the newly added paragraphs in the document.
Figure 1-29 shows the appearance of the page.
To create the Contact Us page:
  1. Open the ct_contact_txt.html file from the html01 > tutorial folder in your HTML editor. Enter your name and the date in the comment section and save the file as ct_contact.html. Note that this page is linked to two style sheets that Sajja created.
  2. Go to the ct_pages.txt file in your text editor.
  3. Copy the Contact Us section in the text file (excluding the title).
  4. Return to the ct_contact.html file in your HTML editor and paste the copied text directly after the <h1>Contact Us</h1> tag.
  5. Enclose the introductory paragraph within a set of opening and closing <p> tags to mark it as a paragraph.
  6. Enclose the three lines containing the street address within a set of opening and closing <address> tags to mark that content as an address. Insert the <br /> tag at the end of the first two lines to create a line break between the name of the restaurant and the street address.
  7. Mark the last two lines as paragraphs using the p element.
  8. Save your changes to the file and then open the ct_contact.html file in your browser as shown in Figure 1-31.
Figure 1-30 highlights the marked up code for Curbside Thai's contact information.
Figure 1-31.

Session 1.2 Quick Check

  1. Provide code to mark the text Gourmet Thai Cooking as a heading with the second level of importance.
  2. What element should you use to mark page content as a sidebar?
  3. What is the div element and why will you often encounter it in pre-HTML5 code?
  4. What element would you use to indicate a change of topic within a section?
  5. Provide the code to mark the text Daily Special as emphasized text.
  6. Provide the code to mark the text H2SO4 with subscripts.
  7. Provide the code to link the web page to the CSS file mystyles.css.
  8. Provide the expression to insert an em dash into a web page using the character code 8212.
  9. Provide the code to insert an inline image using the source file awlogo.png and the alternate text Art World.
<< Previous Lesson | Next Lesson >>