Web Pages Made Easy - Notes from Lesson 2

Lecture and Discussion

---

Lesson 2: Structuring Content

Now that you have the blueprints for your Web page and you have set up the foundation, you can start building it.

In your reading, you were introduced to some of the most basic tags you'll need to define the structure of your text. Now we'll discuss them in greater detail and talk about some ways you can implement them on your own Web pages. We'll start with your home page. A home page is the starting page in any Web site. Typically,
home pages contain the most general content; a welcome message, a statement about the purpose of the site (if the purpose is not obvious), links to other pages in the site, and maybe an image to spark interest. But first
things first ... we'll start with the fundamental ingredients and slowly introduce the features that will make your Web site complete.

Defining Headings and Paragraphs

When you create a Web page, it's important to consider the structure of the document. You define the structure of your pages with the HTML tags that you choose. A basic Web page that contains text typically consist of a heading, followed by one or more paragraphs.

For example, if you want to have an opening statement on your home page, such as:

Welcome to the Clements Family Website!

...then it makes sense to define that statement as the top-level heading for that page. To do this, you
would wrap the statement in an <h1> tag, as follows:

<h1>Welcome
to the Clements family Website!</h1>

You might also need one or more sub-headings, followed by additional paragraphs. For example, you might
want to provide general information under your top-level heading, and then create another heading with associated contentβ€”something like this...

Welcome to the Clements Family Website! With family members in 18 different states, it's not always easy to keep in touch. This is our little corner of the Web, where we can share news, information, and pictures. Just visiting? You don't have to be a member of the Clements family to participate. We welcome new friends from all over the world!

Here, the "Just visiting"
heading is defined by an <h2> tag. It logically follows the <h1>
tag above it. The paragraphs under each heading are defined by the <p>
tag.

Tip! You can get a lot of good ideas for your Web site by browsing the Web for sites that have a similar purpose. Make a note of the types of content they provide and the way they present their information.

Browsers display headings as
bold text at different font sizes (the <h1> tag gets the largest font
size and the <h6> tag is displayed with the smallest font size). You
can use these headings much in the same way that newspapers use headings--the
larger the heading, the greater the implied importance of the content.

Even if you don't want your
page to follow this kind of traditional structure, you should try to use
whichever tag best describes or defines a section of content. If it's a
paragraph, use the <p> tag. If it's the first heading on a page, use
the <h1> tag. Before you define any headings or paragraphs, you should:

• 
  Consider the objectives you've
  established for your site.


• 
  Review your mission statement
  to keep your content focused.


• 
  Create a rough sketch of your
  page so you can work toward a specific goal.

Inserting
Line Breaks

If you want a word or phrase
to start on its own line without starting a new paragraph, you can use
the line break tag, <br>. This tag is not a container, so it does not
accept a closing tag. In this paragraph, for example, you can force any
word to the next line,

like so.

Take another look at page
16 in your bookβ€”you'll see that you can use line breaks to create a series
of short lines of text, to format poetry, recipes, and just about anything
else you can think of.

Producing
Bold and Italic Text

You can use the <b> and <i> tags to make text
bold and italic, respectfully, or you can use the <strong> and <em>
tags. What's the difference between these two sets of tags?

To the eye, nothing. But their purpose is slightly different. The <b> and <i> tags tell the
browser to display the text bold or italic. The <strong> and <em>
tags tell the browser to emphasize the text, but it doesn't necessarily
tell it how it should be displayed. That part is up to the browser.

Some browsers are not visual.
There are many software programs for users with visual disabilities that
audibly present the content of Web pages. When one of these devices encounters
text in an <em> tag, it will sound out spoken emphasis. This will not
happen with the <b> tag, because "bold" is a visual description that
has no meaning in speech. The <strong> tag will produce stronger
emphasis than it will for the <em> tag. You might not need to make
this distinction for your first Web site, but it's something you can put
in your toolbox in case you need it.

Creating
Block Quotes

Tip! You can insert multiple paragraphs inside a block quote.

You can wrap text in a <blockquote> tag to define it as a long quotation, or simply to indent it on both sides.

This is block quote
text. Keep in mind that some older browsers make block quote text italic
as well as indented.

Discussion

Now you know the fundamentals
of structuring text, and you can begin to add content to your page. Post
your comments to the following discussion items in the message board:

1. 
   Do you think it's important
   to distinguish between emphasized text and bold text? Explain.


2. 
   Why do you think it's important
   to use whichever tag best describes the content it contains?