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>WelcomeYou might also need one or more sub-headings, followed by additional paragraphs. For example, you might
to the Clements family Website!</h1>
want to provide general information under your top-level heading, and then create another heading with associated contentβ€”something like this...
|
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 |
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 |
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:
Do you think it's important
to distinguish between emphasized text and bold text? Explain.
Why do you think it's important
to use whichever tag best describes the content it contains?
