NHS Designs
Web Design
HTML

HTML 02: Content and structure

What You Write (the HTML)

Let's have a look at a little more HTML. Imagine you are going to create a Web page to advertise the Head First Lounge, a local hangout with some good tunes, refreshing elixirs, and wireless access.

Here's what you'd write in HTML:

<html>
<head>
<title>Head First Lounge</title>
</head>
<body>
   <h1>Welcome to the Head First Lounge</h1>
   <img src="drinks.gif">
   <p>
      Join us any evening for refreshing elixirs,
      conversation and maybe a game of <em>Dance
      Dance Revolution</em>. Wireless access is
      always provided; BYOWS (Bring your own web
      server).
   </p>
   <h2>Directions</h2>
   <p>
      You'll find us right in the center of downtown
      Webville. Come join us!
   </p>
</body>
</html>

 

What the Browser Creates

When the browser reads your HTML, it interprets all the tags that surround your text. The tags tell the browser about the structure and meaning of your text. So rather than just giving the browser a bunch of text, with HTML you can use tags to tell the browser what text is in a heading, what text is in a paragraph, what text needs to be emphasized, or even what images need to be placed.

Let's check out how the browser interprets the tags in the Head First Lounge page:

Right-click here and select "Open In New Window"

Now answer these questions in class:

  • What do the title tags do with the text between them?
  • What do the h1 tags tell the browser about the content between them?
  • What do the h1 tags do to the text between them?
  • What does the img tag tell the browser to do?
  • What do the p tags tell the browser about the content between them?
  • What does the text inside the p tags look like?
  • What do the em tags tell the browser about the content between them?
  • What do the em tags do to the text between them?
  • What do the h2 tags tell the browser about the content between them?
  • What do the h2 tags do to the text between them?
  • If you indent your text or hit enter to start a new line inside the HTML, do these spaces end up in the browser window?
  • Why do we need closing tags?

Source: "Head First HTML with CSS & XHTML" by Elisabeth Freeman and Eric Freeman

 

Assignment

Make a chart like this and fill in the empty boxes:

tag name

what the HTML looks like

what it tells the browser about the content

what the result is in the browser

title

 

gives the page a title

 

paragraph

 

begins a paragraph

a new paragraph begins

 

<h1>

 

the text is large and on its own line

image

 

an image goes here

 

 

<strong>

the text is important

 

heading 2

 

the text is a subheading

 

 

<em>

emphasize the text

 

 


ABOUT MRS. PEDERSEN ·
resources · copyright information · Natomas High School Design Department