Lab 04 - Getting to know HTML5

In previous labs, you have copied and pasted code to create simple web pages. Now we'll move on to creating pages from scratch, and experiment with some of the concepts in the book. By now you should have the current Firefox browser installed, and a text editor like Notepad++, TextWrangler, or one of the others listed in Lab 00.

To consider:

Hands-on with markup: making web pages

In this fourth lab, we'll build a single-page website that will help you introduce other people to a subject you feel passionately about, including styling the page with CSS. As you explore, review your answers from the To consider: section above. Have you changed your mind about any of them?

Learning more

  1. We'll begin by creating the starterPage.html file from the book if you haven't already. Open your text editor, then copy and paste the code below: <!DOCTYPE HTML> <head> <meta charset="UTF-8"/> <title>Starter Page</title> </head> <body> <p>Hello World!</p> </body> </html>

    • Save the edited text file as starterPage.html.
    • Use the W3C validator service and paste in your markup to make sure you didn't miss anything. Are you seeing any warnings? If so, does the information given by the validator help you fix the issue?
    • Before you start editing your page, it's a good idea to think about the content of the page, or things like words and images, as well as the presentation of the page, or things like font colors and layout. You can use a free visualizing tool like Pencil (a free, open source Firefox plugin), a paid application version like Visio or Omnigraffle, or you can use a pencil and paper. The image below was made using Pencil. Unicorn Page Layout
    • In addition to the tutorials on the w3Schools site, you can also check the book for examples of HTML5 you can use to build your own page. You can also use the "view source" feature in your browser, accessed by right-click or ctrl+click. Most modern websites might not be much help to you, as their pages are very complex. For example, view the source of Google's search home page. Is it what you expected?
    • Now look at the source of this lab. Does it give you any information you can use? Look for the CSS declaration at the top of the source (it begins with "<link href"). Based on what you know about directory structures, where is the CSS file compared to the HTML file for the lab?

  2. Now that you have the minimum amount of tags in starterPage.html to get valid HTML5, it's time to create your own page. Start by creating this directory structure:

    • Create a folder on your desktop and name it "Lab 04".
    • Inside that folder, create two new folders. Name one "css" and the other one "img".
    • Find starterPage.html and copy it into the Lab 04 folder. Your directory structure should now look like this: directory Structure
    • Open starterPage.html with your text editor, and also open it with Firefox.
    • Begin by editing the markup in your text editor by adding only content. Content elements or tags include <p>, <h6> (and all the other heading tags), <a>, <img>, and others.
    • As you edit, a good technique is the "Compose and Check" method. Make a small change in the text editor, then refresh the page in your browser to see the change immediately. If anything looks out of place, You know the issue is in what you have just added. This iterative method of changing and checking will also be useful when you begin to write programs later in this lab series.
    • Adding images to your page? Save any images you want to use in the img folder. Remember to use the correct path to the individual images when you build your <img> tags.
    • Now open your text editor and create a file called "default.css" and save it in the css folder. Be sure to add the matching CSS declaration to starterPage.html. Here's a basic CSS file you can copy and paste to get started, then edit it as you go: body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: small; line-height: 1.1em; margin: 0; padding: 0; text-align: center; background-color: #ffffff; } p { margin: 10px 0 0 0; padding: 0 10px 10px 5px; font-size: 83%; } img { border: none; margin:0 0 10px 0; } h4 { margin: 3px; font-size: 105%; color: #666666; }

  3. You have probably been looking at your web page in Firefox, but not in other browsers. Go back to Lab 00 and look for the section with links to download web browsers. Pick at least two others besides Firefox and download them if you don't already have two other browsers. One of the browsers should be Internet Explorer, if it works with your operating system.

    • The CSS box model is notorious for being rendered differently depending on which browser you use. Add the following code to the <body> element of your page (note the use of the inline style declaration - this will override any styles your existing page is using): <div style="background-color:grey; width:150px; padding:20px; border:5px solid black; margin: 10px;"> This div element is styled to show the differences in displaying the <a href="http://www.w3schools.com/css/css_boxmodel.asp">CSS box model</a>. </div>
    • Now comment out the DOCTYPE declaration in your page, like this: <!-- <!DOCTYPE HTML> -->
    • Save the edited page and open it in the different browsers. Are there any differences in how the pages display? If so, what are they? Why do you think each browser "reads" the same file, but displays it differently? What do you think are the advantages and disadvantages to these rendering differences?
    • Now comment out the <meta> tag declaration at the top of your page. Copy and paste this code somewhere into the body of your page: <p>&#9812; &#9813; &#9814; &#9816; &#9798; &#10016; &#9794; &#9792; &spades; &clubs; &hearts; &diams; &#9763; &#9774; &#9731; &#9730; &#9775; &#9760; &amp; &quot; &lt; &gt; & " < ></p>
    • Now highlight the image entities below and paste them (as images) inside a <p> tag in the <body> of your page:
      ♔ ♕ ♖ ♘ ♆ ✠ กแ กโ ♠ ♣ ♥ ♦ ☣ ☮ ☃ ☂ ☯ ☠
    • What was different? Now look at the source of this lab page for the two different sections above. Is it what you expected to see? Why or why not? What do you think the tag <code> does?

    Try IT: a new look for your page
    We've been building a single-page site by separating the content elements from the style elements using HTML5 and simple CSS. The biggest benefit we get from separating those elements is that ability to rapidly change the "look and feel" of a site by only needing to edit the CSS file.

    Once you become familiar with the basic building blocks of CSS, you can expand your horizons to CSS3. CSS3 brings more flexibility and animation to webpages. You can see some of the possibilities CSS3 can offer at

Moving on

You have made and styled a web page that exists only on your computer, but there are many ways to get that same content out onto the Web, inclduing some free options like Google Sites, Blogger, WordPress, and Tumblr. Each one of these products has positives and negatives, especially if you want to have a great deal of control over how your site is structured and how it looks. The default settings for these products "hide" the nuts and bolts, making it easier for novices to get a good-looking site up quickly. Now that you have some experience with HTML and CSS, would you use the default settings? What would you gain, and what might you lose by accepting the default settings from these products (or any others)?