|
There are
other simple tags for modifying text. Lets say you want to change the
text color or size or type of font. As an example, lets change your
basic page:
My First HTML Document !
to the following:
My First HTML Document !
To do
this you would modify the text "My First HTML Document !"
with the font tag:
<h1>My First HTML Document !</h1>
The complete HTML document would look like this:
<html>
<head>
<title> My First Web page </title>
</head>
</html>
<body bgcolor="#ffffff">
<h1>My
First HTML Document !</h1>
</body>
|
The <h1></h1> tag set which is modifying the text, My First
HTML Document, is called a heading tag. You can use headline tags as
a simple way to create headings and sub-headings in your web pages.
Heading tags come in
six sizes. Notice how these are relative sizes and not absolute sizes
like in a word processor. The example below demonstrates how all six
sizes look on your browser:
This is heading size h1
This is heading size h2
This is heading size h3
This is heading size h4
This is heading size h5
This is heading size h6
The HTML for this would look like the following:
<html>
<head>
<title> My First Web page </title>
</head>
<body bgcolor="#ffffff">
<h1
>This is heading size h1</h1>
<h2 >This is heading size h2</h2>
<h3 >This is heading size h3</h3>
<h4 >This is heading size h4</h4>
<h5 >This is heading size h5</h5>
<h6 >This is heading size h6</h6>
</body>
</html>
|
Try to cut and paste the above HTML into your text editor, save it as
heading.html, and view it in your browser by double clicking on it.
Aligning Text and the <p> Tag
Next, lets look at how to align text. For this we will use the <div>
tag. Lets look at the following example:
My First Web Page
Mangos: Mangos are a tropical fruit that grows in Florida.
Cashews: Cashews are actually the seed kernel of a tropical fruit
that is a related to the mango.
Lets
look at the HTML for this:
<html>
<head>
<title> My First Web page </title>
</head>
<body bgcolor="ffffff">
<div align="center"><h2>My First Web Page</h2></div>
<p>
<b>Mangos:</b> Mangos are a tropical fruit that grows
in Florida.
<b>Cashews:</b> Cashews are actually the seed kernel
of a tropical fruit that is a related to the mango.
</body>
</html>
|
Try
to cut and paste the above HTML into your text editor, save it as align.html,
and view it in your browser by double clicking on it.
You can see in the above example that the <div align="center">
</div> centers the text, My First Web Page. The div tag different
than the other tags we have encountered. It
takes on an attribute, align="center". The div tag can also
take on the attribute align="left" and align="right".
Left Aligned Text
Center Aligned Text
Right Aligned Text
In the above example, the HTML would look like this:
<html>
<head>
<title> My First Web page </title>
</head>
<body bgcolor="ffffff">
<div align="left">Left Aligned Text</div>
<p>
div
align="center">Center Aligned Text</div>
<p>
div
align="right">Right Aligned Text</div>
<p>
</body>
</html>
|
Notice in both examples, the <p> tag. This is the paragraph
tag. This indicates that there is a new paragraph. Notice how the <p>
tag stands alone (there is no </p> tag required). Note that while
the paragraph tag does create a new line, it is not a new line tag.
For simple carriage returns (and not new paragraphs) there is the <br>
tag which will be discussed in the next section.
Next, we will look at changing your text
color, sizes, and fonts.
 Previous:
Introduction Next:
Adding Color and Size to Your Text
|
