Online Test Banks
Score higher
See Online Test Banks
eLearning
Learning anything is easy
Browse Online Courses
Mobile Apps
Learning on the go
Explore Mobile Apps
Dummies Store
Shop for books and more
Start Shopping

Dissect a Simple Markup Example

Take a look at this code listing. Careful examination of this short listing shows quite a bit of HTML, but only indirect references to CSS. It’s the listing for the HTML5 Café Home Page.

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title>HTML5 Cafe: Home</title>
        <meta name="description" content="sample site for 9781118657201">
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
        <div id="container">
          <nav id="topnav">
            <a href="index.html">HOME</a> | 
            <a href="about.html">ABOUT US</a> | 
            <a href="menu.html">MENU</a> | 
            <a href="contact.html">CONTACT US</a>
          </nav>
        <div id="content">
          <h1>Welcome to HTML5 Cafe!</h1>
          <p>Here you will find all sorts of delicious HTML5 and CSS3 treats.
             This is the sample site for <a href=
             "http://www.amazon.com/Beginning-HTML5-CSS3-Dummies-
              Computer/dp/1118657209">Beginning HTML5 and CSS3 for Dummies</a>, 
              by <a href="http://www.edtittel.com">Ed Tittel</a> and 
              <a href="http://www.chrisminnick.com">Chris Minnick</a>. To view 
              all of the code samples from the book, visit the 
              <a href="menu.html">Menu</a>.
             </p>
          <figure id="home-image">
            <img src="img/pitr_Coffee_cup_icon.png" 
             width="400" height="400" alt="delicious coffee">
            <figcaption class="warning">powered by coffee.</figcaption>
           </figure>
         </div>
         <footer>
          copyright &copy; dummieshtml.com
         </footer>
       </div>
    </body>
</html>

The HTML elements you see in this listing are as follows, in their order of appearance:

  • The <html> tag starts the web page, and </html> ends it.

  • The markup between <head> and </head> defines general information for the entire web page.

  • The text inside the <title></title> element provides the page title.

  • The <meta> element provides information about page content and display layout.

  • A <link> element establishes a link to an external resource; in this case, to two different CSS style sheets.

  • The markup between <body> and </body> supplies actual page content.

  • The <div></div> element defines two different content divisions on the page, one for navigation, the other for page content.

  • The navigation <nav></nav> element defines a navigation bar.

  • The anchor <a></a> element defines hypertext links.

  • The heading1 <h1></h1> element defines a level-1 heading.

  • The paragraph <p></p> element defines a paragraph of text.

  • A figure <figure></figure> element defines a graphic with a caption.

  • The image <img> element links to a graphic for display, with horizontal and vertical dimensions and alternative text in case the image doesn’t appear.

  • A figure caption <figcaption></figcaption> element labels the figure caption.

  • A document footer <footer></footer> element defines text for the bottom of the page.

Put all these elements together, add attribute values and text, and you have the web page shown here.

image0.jpg
  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win $500. Easy.