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:
- Before you get started here, take a look at some of the pages at
W3Schools, a site that
offers free tutorials in a variety of web subjects. A good place to get started is
the home page for the their HTML5 tutorial. Look for
the "Try it yourself" buttons - these will get you to pages where
you can edit HTML and see the changes you make right in the same browser window.
- Now that you have taken a look at the tutorials, why do you think W3Schools
offers these tutorials at no charge? Who owns W3Schools? How did you find out?
- HTML5 is the latest version of HyperText Markup Language, the primary building block
of webpages everywhere. What are the other versions? Why would you choose one of them over HTML5?
The site Can I use... has a
browser compatibility table for HTML5 that might help you answer.
- Now that you've seen more about HTML5 and other HTML versions, why do you
think browsers need to know what version of a markup language a page is written in?
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
- 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.

- 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?
- 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:

- 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;
}
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>♔ ♕ ♖ ♘ ♆ ✠ ♂
♀ ♠ ♣ ♥ ♦ ☣ ☮ ☃
☂ ☯ ☠ & " < > & " < ></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)?