|
HTML
works in a very simple, very logical, format.
It reads like you do, top to bottom, left to
right. That's important to remember. HTML is
written with TEXT. What you use to set certain
sections apart as bigger text, smaller text,
bold text, underlined text, is a series of tags.
Think of tags as commands.
Let's say you want a line of text to be bold.
You will put a tag at the exact point you want
the bold lettering to start and another tag
where you want the bold lettering to stop. If
you want just a word to be italic, you will
place a start italic tag at the beginning of
the word and an end italic tag at the end of
the word. Is this making sense so far?
All tag (I sometimes call
them command) formats are the same. They begin
with a less-than sign: < and end with a greater-than
sign: >. Always. No exceptions. What goes
inside the < and > is the tag. Learning
HTML is learning the tag to perform whatever
command you want to do. Here's an example:
The tag for bold lettering is "B".
That makes sense.
Here's what the tags look like to turn the word
"Joe" bold:
<B>Joe</B>
Look At What's Happening:
1. <B> is the beginning
bold tag.
2. "Joe" is the word being affected
by the <B> tag.
3. </B> is the end bold tag. Notice it
is exactly the same as the beginning tag except
there is a slash in front of the tag command.
4. This is what the bold tags above produced:
Joe Nice, huh?
Q. Is the end tag for other
commands simply the begin tag with the added
slash?
A. Yup.
Q. Will the tags show up
on my page?
A. No. As long as your commands are inside the
< and > marks, the tag is used to alter
the text, but the actual code is hidden from
the viewer.
Q. Your bold tag uses a capital
"B". Do all HTML tags use a capital
letter?
A. The browser doesn't care. In terms of tags,
capitals and lowercase letters are equal. But
I think it would be a very good idea for you
to make a habit of writing your tags in capital
letters as it sets them apart from the normal
text. It also makes them easier to pick out
later when you are revisiting the code.
Q. Must everything have a
tag to show up on the page?
A. No. If you just type in text, it'll show
up. But it will not have any special look.
Q. What if I forget to add
the end tag or forget to add the slash to the
end tag command?
A. That's trouble, but easy-to-fix trouble.
It will be obvious if you've not placed an end
tag when you look at the document in your browser.
The entire document will be affected after the
point where you forgot the end tag. Just go
back into the document, add the slash, and reload
the document into the browser.
Q.
Do all HTML tags require both a begin and end
tag, like above?
A. No. There are exceptions to the rule, but
let's stay on the ones that do require both
tags to work for now. Moving along..
The majority
of HTML tags do require both an open and a close
tag (a begin and end tag). Most are very easy
to understand because the tag is obvious. Here
are a few and what they do to text:
|
|
|
|
BOLD |
B |
<B>Bold</B> |
Bold |
Italic |
I |
<I>Italic</I> |
Italic |
Typewriter |
TT |
<TT> |
Typewriter |
Can
I Use Two Tags at Once?
Yes. Just make sure to begin and end both. Like
so:
<B><I>Bold and
Italic</I></B> gives you Bold and
Italic
<B><TT>Typewriter
and Bold</TT></B> gives you Typewriter
and Bold
If you do use multiple tags to alter text, make
a point of not getting the end tags out of order.
Look at this:
<B><I><TT>Text Text</TT></B></I>
In terms of format, the example above is not
correct. The end tags are out of order in relation
to the start tags.
Always set the beginning
and end tags at the same time, always placing
them on the farthest end of the item being affected.
Here, again, is the example above in correct
form:
<B><I><TT>Text Text</TT></I></B>
Notice the Bold tags are on the far ends. Next
in line are the Italics and finally the Typewriter
Text tags are closest to the affected text.
Just keep setting commands at the farthest ends
each time you add them and you'll stay in good
form.
The open and close tag format dominates the
majority of the available HTML tags, but there
are tags that stand alone. Here are three I
use extensively:
<HR> |
This command gives
you a line across the page. (HR stands for
Horizontal Reference.) The line right above
the words "Single tags" was made
using an <HR> tag. |
|
<BR> |
This breaks the text
and starts it again on the next line. Remember
you saved your document as TEXT so where
you hit ENTER to jump to the next line was
not saved. In an HTML document, you need
to denote where you want every carriage
return with a <BR>. |
<P> |
This stands for Paragraph.
It does the exact same thing as the <BR>
above except this tag skips a line. BR just
jumps to the next line, P skips a line before
starting the text again. |
Your
next tags will always be these: <TITLE>
and </TITLE>
See the very top of this page? I mean way up
top. Above the FILE -- EDIT -- VIEW menus. The
colored bar up there. Right now it reads "Basic
HTML: tags" That's the title of the page
and that's what you are denoting here. Whatever
you put between these two tags will show up
in the title bar way at the top.
Finally, you'll end every page you write with
this tag: </HTML>
Get it? You started the page with HTML and you
will end the page with /HTML. That makes sense
again.
I want you to
play around with these commands. Just remember
that HTML reads like you do, top to bottom,
left to right. It will respond where you place
the start tag and stop where you place the end
tag. Just make sure your tags are within the
< and > items.
Here's a sample page to show you what I mean
for you to do tonight:
<HTML>
<TITLE> My first html page </TITLE>
<B>This is my first
HTML page!</B><P>
I can write in <I>Italic</I>
or <B>Bold</B><BR>
<HR>
<B><I>Or I can
write in both</I></B><BR>
<HR>
<TT>...and that's all</TT>
</HTML>
Notice we only used the tags we showed you on
this page. Yes, it's a simple page, but you're
just starting out. Notice the <HTML> and
</HTML>. Notice the <TITLE> and
</TITLE>. See how there's a beginning
and end tag when we alter the text and that
the P and BR commands are used to go to new
lines?
Now, click
here to see the page the code above produced.
Look at the program above and then what it produced.
Look at the source code when you open the page.
See how the HTML tags denoted where text was
affected?
|