|
Text Is Fun
Click
to Print This Page
Now that you
have started your web page lets put something in it! This
lesson gets you going with text. As we discussed in Lesson 1
everything the viewer see's goes inside the body tags. Lets
start with headings.
There
are six different styles of headings. The largest is <H1>type
heading here </H1>
and the smallest is <H6>
heading here </H6>.
Notice how we open and close the tags on either side of the
heading.
Open
the file HTML file you created in Lesson 1 with your notepad.
In between the <BODY>
and </BODY>
tags we're going to add the 6 different heading tags. Your
code should look like the following:
<HTML>
<HEAD>
<TITLE>MY PAGE</TITLE>
</HEAD>
<BODY>
<H1>Heading
1</H1>
<H2>Heading 2</H2>
<H3>Heading 3</H3>
<H4>Heading 4</H4>
<H5>Heading 5</H5>
<H6>Heading 6</H6>
</BODY>
</HTML>
Save the page
and lets open it again in your browser as we discussed in
Lesson 1. If you did everything correctly you should have a
plain white web page with black text. The text displayed
should be Heading 1, Heading 2 etc. written in a column on the
left side of your page. Only one heading is displayed per
line. Headings are usually used as descriptive titles to
separate portions of your page.
Our
next tags are the <P>
and </P>
tags. These tags tell your web browser that you are beginning
and ending a paragraph of text. If your previous page isn't
already open in notepad, open it now.
Insert
a carriage return (press enter) after the last heading tag you
created. Add <P> on
the new line and write a short paragraph of text. At the end
of the text you've just typed in add the </P>
tag and save your page. Your resulting code should look
similar to the following:
<HTML>
<HEAD>
<TITLE>MY PAGE</TITLE>
</HEAD>
<BODY>
<H1>Heading
1</H1>
<H2>Heading 2</H2>
<H3>Heading 3</H3>
<H4>Heading 4</H4>
<H5>Heading 5</H5>
<H6>Heading 6</H6>
<P>This
is a short paragraph about nothing in particular.
</P>
</BODY>
</HTML>
If your
page isn't already open in your browser, open it now as
before. If it is open, click the "Refresh"
button on your browser tool bar now. You should see the the
headings you created previously as well as the new text you
just added in the paragraph tags. Notice that the paragraph
tags close immediately after the paragraph of text. This is to
prevent all the paragraphs from running together with no
visible format. It's important to remember to close your tags
to prevent errors when your page is displayed.
Well
that's nice you say but what if I don't want all of my text to
be lined up on the left side of my page? We solve that problem
now with alignment attributes.
These are further details that can be added to your heading
and paragraph tags (or virtually any other tag) to give the
browser instruction about where to align the text on your
page. The basic alignments are center,
left and
right.
The browser always displays alignment to the left by default
so it isn't always necessary to add a left alignment
attribute. To create a paragraph (or heading) that aligns in
the center of the page write your tag like this <P
ALIGN="CENTER">.
Since we are using alignment as an attribute of an existing
tag there is no need to include alignment in the closing </P>
tag. Go ahead and experiment with alignment in the page you've
already created, remembering to save the file each time you
alter it and refresh your browser to see the changes you've
just made.
Line-Breaks
If you
find that you need an extra blank line between paragraphs the
next tag will come in handy. <BR>
creates a blank line between other page elements or it can be
placed inside the text of another tag to create a line-break
in the text. The <BR>
tag does not have a closing tag, it works alone. In your
existing file try using the <BR>
tag right now. In the paragraph you created earlier in this
lesson place your cursor (mouse pointer) somewhere in the
middle of the text, then insert the <BR>
tag. Just for fun lets throw another line-break in there after
the closing tag </H1>
and save the file. Your resulting code should resemble the
following:
<HTML>
<HEAD>
<TITLE>MY PAGE</TITLE>
</HEAD>
<BODY>
<H1>Heading
1</H1><BR>
<H2>Heading 2</H2>
<H3>Heading 3</H3>
<H4>Heading 4</H4>
<H5>Heading 5</H5>
<H6>Heading 6</H6>
<P
ALIGN="CENTER">This
is a short paragraph <BR>about
nothing in particular.
</P>
</BODY>
</HTML>
Refresh
your browser window and look at the results. The <BR>
tag forces everything after it to move down one line, so it
effectively separates your paragraph into two parts, and adds
a blank line after the <H1>
tag.
What if I
want red text?
That's
easily enough accomplished with the <FONT>
and </FONT>
tags. By using these tags you can tell the browser what color
to use when displaying the text on your page. But that isn't
all this tag is good for. You can also establish the size and
style of your text by using the <FONT>
tag.
By default
all web pages that don't have a specific font set in the page
display text in Times New Roman, or Courier. Neither of these
are very attractive and leave a lot to be desired by way of
design. But they are both safe to use because almost all
machines support them. If you choose a custom font keep in
mind that only people who have that font installed on their
machines will see the font you've selected. It's always a good
idea to provide an alternative font to the custom font when
embedding a font in a page.
Go back
to the file we've been working on and lets insert a few <FONT>
tags in the page. To start with we'll change the default color
of your text in heading one. Place your cursor in front of the
<H1>
tag and insert a <FONT>
tag. Inside the <FONT>
tag add color="BLUE"
so that it now looks like this <FONT
color="BLUE">
This tells the browser to change the text "Heading
1" so that it is displayed as blue. Now move your cursor
to the end of the line after </H1>
and close the font tag </FONT>.
If you don't add the closing </FONT>
tag your browser will display all of the text after the
opening tag in blue. Your resulting code should look like
this:
<HTML>
<HEAD>
<TITLE>MY PAGE</TITLE>
</HEAD>
<BODY>
<FONT
color="BLUE"><H1>Heading
1</H1></FONT><BR>
<H2>Heading 2</H2>
<H3>Heading 3</H3>
<H4>Heading 4</H4>
<H5>Heading 5</H5>
<H6>Heading 6</H6>
<P
ALIGN="CENTER">This
is a short paragraph <BR>about
nothing in particular.
</P>
</BODY>
</HTML>
To
change the size of the font displayed on the page add a size
attribute to the <FONT>
tag. Font sizes can be displayed from 1 through 7, with 1
being the smallest and 7 being the largest. A <FONT>
tag with a size attribute looks like this <FONT
SIZE="3">
To
customize the font style that the page displays you have to
tell the browser the name of the font. To do this we add the
attribute FACE
to a <FONT>
tag. <FONT
FACE="Arial"> to
provide an alternative font style to the custom font you would
write your tag and attributes like this
<FONT
FACE="Arial, Helvectiva">
The browser will first try to display the text in Arial, but
if that style isn't available on the viewers machine it will
then attempt to use Helvectiva. If neither of these styles are
available the font style defaults back to Times or Courier.
It is
possible to use multiple instances of the <FONT>
tag to display text in different manners through out the page.
To set the font attributes of the entire page at once add the <FONT>
tag to the line immediately following your opening <BODY>
tag. By waiting to close the first <FONT>
tag until the very end of the document (the line immediately
above the closing </BODY>
tag) your entire page will be displayed with the text
attributes you set in the beginning of the page. Your code
should look like this:
<HTML>
<HEAD>
<TITLE>MY PAGE</TITLE>
</HEAD>
<BODY>
<FONT
FACE="Arial, Helvectiva" COLOR="red"
SIZE="3">
<FONT
color="BLUE"><H1>Heading
1</H1></FONT><BR>
<H2>Heading 2</H2>
<H3>Heading 3</H3>
<H4>Heading 4</H4>
<H5>Heading 5</H5>
<H6>Heading 6</H6>
<P
ALIGN="CENTER">This
is a short paragraph <BR>about
nothing in particular.
</P>
</FONT>
</BODY>
</HTML>
After
saving your file and refreshing the browser window you should
notice that the text "Heading 1" is displayed in
blue while the rest of the page is displayed in red. Go ahead
and experiment around with the <FONT>
tag and its attributes SIZE,
COLOR,
and FACE.
Now
that you have an idea about the ways you can display text
let's move on to some very simple tags that also effect the
way text is displayed. The <B>
and </B>
tags create bold text. <I>
and </I>
create italicized text while
<U> and </U>
creates underlined text. <STRIKE>
and </STRIKE>
create a strike through in text. Practice using these tags by
inserting them in the text of your page. You can use them for
single words or whole sentences. Additionally these tags can
be nested together for use on the same portion of text. Just
remember to close the tags in the same order you opened them
to avoid confusion and errors. <B><I>Bold,
Italicized Text</I></B>
Important
Note: Heading tags such as <H1>
create bold text with out being told to do it, so there is no
need to use a <B>
tag in a heading.
We've
covered a lot in this lesson so go ahead and practice what you
learned and we'll see you again in Lesson
3- Backgrounds and Images
n
|
