Lesson 1
Start notepad and type this:
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Put something in the title and body areas, like so.
<HTML>
<HEAD>
<TITLE>Welcome</TITLE>
</HEAD>
<BODY>
To my homepage.
</BODY>
</HTML>
Now save it as a .html file. To do this, click file in the notepad window, then save as. Where is says filename, name it page1.html.
Where it says save as type: make sure it says All Files(*.*). Hit enter and it's saved. To view your page, open the saved html file.
To see any changes you make to it, hit the refresh/reload button at the top of your browser. So keep the tutorial window, your
notepad, and your new webpage open.
To make things easier I'm only going to write what's in the <BODY> tags. I will omit the <HTML>, <HEAD> & <TITLE> tags.
Needless to say, keep these in your document. When you see tags with new stuff, make these changes in your text
document(notepad) and hit refresh/reload. Add any new tags in when I do. Put them in the same place/way I do.
Background color:
<BODY BGCOLOR="#FF0000">
Welcome
</BODY>
For more colors, go here.
<BODY BACKGROUND="imagename">
Welcome
</BODY>
This is to have an image as the background. Just type the image name (something like image.jpg) where it says imagename. Other
kinds of images are .jpeg, .gif and .bmp. Be sure to put the full filename in.
<BODY BGPROPERTIES=FIXED>
</BODY>
This will keep the background fixed. But this only works on explorer browsers.
<B>Bold</B>
Put these tags around any words to make them bold. Put the starter tag in front of the word/s you want bold, and the ending tag at
the last word you want bold.
<I>Italics</I>
Put these tags around words to make them appear in italics.
<U>Underlined</U>
Put these around words you want underlined.
<I><B>Bold Italics</B></I>
You can combine tags if you want, go ahead try it. Always make the tags nested, not overlapping.
<THIS><THAT></THIS></THAT> Overlapping tags.... bad
<THIS><THAT></THAT></THIS> Nested tags.... good
<TT>Typewriter Text</TT>
Typewriter, or monospaced tags.
Each letter uses the same amount of horizontal space...
This is regular type ->
iiiiiiiiii
oooooooooo
mmmmmmmmmm
This is monospaced type ->
iiiiiiiiii
oooooooooo
mmmmmmmmmm
<FONT SIZE=1>cool</FONT>
Font size.
Fonts come in 7 sizes:
teeny tiny
small
regular
extra medium
large
real big &
yelling!
1
2
3
4
5
6
7
Two things I want to discuss now. First, a <TAG> tells the browser to do something. An attribute goes inside the <TAG> and tells
the browser how to do it.
Second point is about defaults. As you probably know, the default value is a value that the browser assumes if you have not told it
otherwise. A good example is the font size. The default font size is 3 (usually). If you say nothing it will be 3. If you make faces at
your computer it will still be 3.
Every browser has a default font setting - font name, size and color. Unless you have messed with it the default is probably Times
New Roman 12pt (which translates into 3 for our purposes) and it's black. Of course we can specify font names other than the
defaults. Like ARIAL and COMIC SANS.
<FONT FACE="ARIAL"></FONT>
</BODY>
The font you specify will only be displayed if the viewer has it installed on their computer. If the font isn't installed, the browser
reverts to the default. So, try not to put rare fonts on your page. Safe fonts:
Andale Mono Arial Arial Black
Comic Sans MS Courier New Georgia Impact
Times Rew Roman Trebuchet MS Verdana
Now I guess is a good time to yap a bit about syntax. You notice here and there I use quotation marks, these are important.
Whenever you have an attribute="value", the value should really be in quotes. It's a good habit to get into. I learned HTML as my
first language just to develop good habits.
Alright, back to the fun stuff...
Changing font color...
<BODY>
Changing the <FONT COLOR="#FF0000">font</FONT>
</BODY>
You can use more than one attribute in a <FONT> tag...
<BODY>
More changing the <FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7">font</FONT>
</BODY>
<BODY BGCOLOR="#FFFFFF">
Pick up <U><I><B><FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7">milk </FONT> </B></I></U>
</BODY>
P>I feel the need to point out once again that multiple tags should be nested.
<TAG3><TAG2><TAG1>Hooha!</TAG1></TAG2></TAG3>
It doesn't matter which tag is first. It's not like if you want to make something red and bold you have to do one or the other first.
You can do them in any order you want. Such as...
<TAG2><TAG1><TAG3>Hooha!</TAG3></TAG1></TAG2>
The fastest way to confuse the browser, not to mention yourself is to overlap the tags...
<TAG3><TAG2><TAG1>Hooha!</TAG3></TAG1></TAG2>
(I couldn't think of a way to explain it so I hope the use of examples makes it clear.)
How about headings.....
<H1>Heading 1</H1>
<H2>Heading 2</H2>
<H3>Heading 3</H3>
<H4>Heading 4</H4>
<H5>Heading 5</H5>
<H6>Heading 6</H6>
Here
is
a
really
small
heading
You may want to align your heading...
<H4 ALIGN="left">Left align yer heading</H4>
<H3 ALIGN="center">Center yer heading</H3>
<H2 ALIGN="right">Right align yer heading</H2>
Left align yer heading
Center align yer heading
Right align yer heading
Now, to start a new line(line break tags)
<BODY> <BR>Start <BR>a <BR>new <BR>line </BODY> If you don't do this, your browser just makes everything go in a
line, like this... Start a new line
To avoid this use the line break tags, OK? OK.
<BODY>
<BR>Can
<BR>I
<BR>
<BR>Skip
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>a line?
</BODY>
Paragraph tags....
<P>Hey dude!<P>
<P>What?<P>
This makes paragraphs. See?
You can align paragraphs too...
<P ALIGN="right">Paragraph1.
<P ALIGN="center">Another paragraph.
<P ALIGN="left">Yet another paragraph.
When using the paragraph tag, you don't need an ending tag.
When it comes to spaces, your text editor compresses all spaces into 1 space. So use this
for heaps of spaces...
Here are more special characters.(Always lowercase)
non-breaking space
< < less-than symbol
> > greater-than symbol
& & ampersand
" " quotation mark
­ soft hyphen
More (mostly useless) special characters.
But you wanna center your work, you say? Ok then here...
<CENTER>I wanna center my stuff</CENTER>
Maybe you wanna make a list....
<BODY>
<UL>
<LI>Milk
<LI>Bread
<LI>Butter
</UL>
</BODY>
Milk
Bread
Butter
Purty cool, huh? You want an ordered list, you say? Ok then, here.
<BODY>
<OL>
<LI>More milk
<LI>More bread
<LI>But no butter
</OL>
</BODY>
1.More milk
2.More bread
3.But no butter
Still want more lists? How about a defenition list.
<BODY>
<DL>
<DT>Aardvark
<DD>A burrowing, ant-eating African mammal. And, as everyone knows, the first word in every
self-respecting dictionary. Did you know there's such a thing as an aardwolf?
</DL>
</BODY>
Aardvark
A burrowing, ant-eating African mammal. And, as everyone knows,the first word in every
self-respecting dictionary. Did you know there's such a thing as an aardwolf?
<BODY>
<BLOCKQUOTE>
Write a whole lot of stuff in here.
</BLOCKQUOTE>
</BODY>
Write a whole lot of stuff in here.
Ever wondered how people do this...
///\\___
(@ @)
+----oOO----(_)-----------+
| Thanks again |
| Joe |
| Barta |
+-----------------oOO-----+
|__|__|
|| ||
ooO Ooo
Normally It would look like this ///\\___ (@ @) +----oOO----(_)-----------+ | Thanks again | |
Joe | | Barta | +-----------------oOO-----+ |__|__| || || ooO Ooo But here is how you stop
that.
<PRE>
Thses are called the preformatted tab.
What ever
you
do in between these
will stay that way.
<PRE>
Although, for some reason, my notepad seems to sometimes preformat stuff, and sometimes not
preformat stuff. Wierd....
Here is a tag I rarely use. <!--The comment tag--> What ever goes in here will not show up in
your browser, only in your text editor.
Here is a tag I use all the time. <HR> You can align it. <HR Align="center">
<HR WIDTH=100%>
<HR SIZE=1>
We can combine too.
Put NOSHADE in to make it solid.
Now for pictures. Here is the tag. <P Align="center"><IMG SRC="vegeta."gif WIDTH=130 HEIGHT=80>
As you can see, in order to align the picture, you must use the paragraph tag as I have. You
also don't have to specify width and height, but it pays to. otherwise, just remove them from
the tag. The alt tag is used when a persons browser has picture loading disabled or they are
using a text only server. It is a substitute for the image. Also, put the picture you want
in the same folder as your page. folder. If the picture is in another folder, or another
server, simply go to the picture. Then copy what is in the address bar into the part after
the SRC=" part of the tag. Also, make all file names lower case, especially when using unix.
Just trust me on this, OK?
This is the last part of the tutorial. Links. Do this: <BODY> Go to <A
HREF="
www.espn.com">ESPN</A> </BODY>
Then add the tag <BODY> Go to ESPN. </BODY> The A is the anchor, the HREF ( I think it means
hyper reference) tells the browser where to go.
Simple, huh? A link for email is handy, too.
<BODY> Write me </BODY> By the way, in case you were wondering(I was till I found out from
Joe)URL stands for Universal
Recource Locator. That's a big fancy phrase that the computer people came up with. They tend to
do that alot. A URL is just an address.
Well that about does it for basics. See ya round in my next tutorial.
Acknowledgement.(email me if I spelt that wrong) Joe Barta. He writes great tutorials
