Learning HTML-
This text was copied from NiteSecurity
Written by Silentstalker
February 2003
[Nite Security Resources]
http://www.nitesecurity.com
Well, if you've ever wanted to have you're own webpage on the internet, you know
that it can be
pretty frustrating trying to find out how. What you need to know is that
building a page requires
knowledge of HTML, which stands for Hyper Text Markup Language. Behind every
page is a
large amount of code. But what is this code if you don't know what it means?
Nothing. It's absolutely nothing, and if you want to make something at the
undisputed
easiest language on the internet, you should keep reading.
I will provide four scripts. Each time I add a new tag to the script, I will
explain the
new tag just like I did the rest. I used tabs for easier reading.
First of all, lets start up with something simple. I'll explain the tags after
I'm finished
with the code.
<html>
<body bgcolor="#C0C0C0">
<title>New HTML Page</title>
<font face="Verdana" size="15" color="red">
<!- The text here is important ->
<body>
Welcome to my new HTML page. You need no knowledge of HTML
to view this page.
<p>
It was made by me,<br>
(Your Name)
</body>
</font>
</html>
Now, lets take it step by step.
<html> and </html>
These tags mark the beginning and the end of an HTML document. These documents
end with
.html or .htm extensions.
<body bgcolor="#hex or color">
This specifies the page's background color. You can either enter a hexidecimal
string
for the color, or thanks to new upgrades in browsers, just specify a color, such
as "red".
<title> and </title>
Mark the beginning and the end of the text located at the top of the browser.
Any text
is allowed here.
<font face="font" size="size" color="color or #hex"> and </font>
This is to specify the type of font used for the text following it. Note that
also you can
write each "sub-tag" such as "face", "size", and "color" as its own tag, like
this.
<font face="font> </font>
<font size="size"> </font size>
<font color="color or #hex"> </font color>
But you have to close them individually, so it's quicker to just incorporate
them into one
tag.
<!-- Comment -->
This is a commentary tag. The text within this tag will not show up on the page,
and does
not affect this page as long as you close the comment with --> or --!> (the
number of
underscores does not matter). These tags are used to give the reader of the HTML
source
accompanying the page he or she is reading some information about the site, such
as the
author or date of publication.
<body> and </body>
Mark the beginning of the body of a document. Not necessary, but are often used
to organize
the document a little better.
<p>
A paragraph tag. Each tag inserted creates a new paragraph.
<br>
A line break. Each tag inserted automatically puts the next text or image at the
next line.
Now that you know some basic tags, lets get on to a script that's a "step"
higher.
<html>
<body bgcolor="#800000">
<title>HTML PAGE 2</title>
<font face="verdana" size="14" color="#cccccc">
<p align="center">
<body>
<br>
<img src="pic.gif">
<p>
Welcome to my HTML page. If you need to learn more about HTML, click
<a href="page.html">here</a>.
</p>
</font>
</body>
</html>
<p align="center"> and </p>
"align" is a "sub-tag" for <p>. It is used to specify the alignment of the text
within
the new paragraph.
<img src="pic.gif">
This inserts an image where it is placed.
<a href="link.html"> and </a>
This tag inserts a hyperlink. The link is specified in the "href" section of the
link,
and the text directly after the first tag is closed. After you have already
typed the text
that you wish to hyperlink and you are ready to end the link, you end the tag,
using
</a>.
Lets go on to another script.
<html>
<body bgcolor="#800000">
<title>HTML PAGE 3</title>
<font face="verdana" size="14" color="#cccccc">
<p align="center">
<body>
<table>
<tr><td bgcolor="green">
<marquee>Welcome to my page. It is a page about HTML, but you do not need
knowledge of
HTML
to view it.</marquee></tr></td></table>
<br>
<a href="page.html">
<img src="pic.gif">
</a>
<p>
Welcome to my HTML page. If you need to learn more about HTML, click
<a href="page.html" style="text-decoration: none">here</a>. Although you may
wish to learn
more about HTML, I can only provide so much information, since my website is on
limited
space, and my cheap host only gave me eighty kilobytes.
</p>
</font>
</body>
</html>
<table> and </table>
Starts a table. The cells and rows are made with the following.
<TR> and </TR>
Specifies a new row.
<TD> and </TD>
Specifies a new cell.
<marquee> and </marquee>
Starts a marquee. A marquee is a line of text that scrolls across the screen.
Some viewers find
it annoying, so I put it in its own little table cell to make it look more
organized.
<a href="page.html" style="text-decoration: none"> and </a>
style="text-decoration: none"
This specifies that you want the link which you are inserting to have no
underline,
or text-decoration. Without this, by default, most browsers underline
hyperlinks.
<html>
<style>
body {
scrollbar-arrow-color: black; scrollbar-base-color: gray
}
</style>
<body bgcolor="#800000" text="#000000" alink="#000080" link="#000080" vlink="#000080">
<title>HTML PAGE 4</title>
<font face="verdana" size="14">
<p align="center">
<body>
<table bordercolor="gray" bgcolor="red">
<tr><td>
<marquee>Welcome to my page. It is a page about HTML, but you do not need
knowledge of
HTML
to view it.</marquee></tr></td></table>
<br>
<a href="page.html">
<img src="pic.gif">
</a>
<p>
Welcome to my HTML page. If you need to learn more about HTML, click
<a href="page.html" style="text-decoration: none">here</a>. Although you may
wish to learn
more about HTML, I can only provide so much information, since my website is on
limited
space, and my cheap host only gave me eighty kilobytes.
</p>
</font>
</body>
</html>
<body> and </body>
text="color or #hex" =Specifies the color of plain text for the whole page.
alink="color or #hex ="Specifies the color of the active links for the whole
page.
link="color or #hex" =Specifies the color for the regular links for the whole
page.
vlink="color or #hex" =Specifies the color for the visited links for the whole
page.
<table> and </table>
bordercolor="color or #hex" =Specifies the border color for the table.
bgcolor="color or #hex" =Specifies the background color for the table.
<td> and </td>
bgcolor="color or #hex" =Specifies the background color for that specific cell.
<html>
<!-- This page was written by Bob Smith -->
<style>
body {
scrollbar-arrow-color: black; SCROLLBAR-BASE-COLOR: gray
}
</style>
<body bgcolor="#800000" text="#000000" alink="#000080" link="#000080" vlink="#000080">
<title>HTML PAGE 4</title>
<font face="verdana" size="14">
<p align="center">
<body>
<table bordercolor="gray" bgcolor="red">
<tr><td>
<marquee>Welcome to my page. It is a page about HTML, but you do not need
knowledge of
HTML
to view it.</marquee></tr></td></table>
<br>
<a href="page.html">
<img src="pic.gif">
</a>
<p>
Welcome to my HTML page. If you need to learn more about HTML, click
<a href="page.html" style="text-decoration: none">here</a>. Although you may
wish to learn
more about HTML, I can only provide so much information, since my website is on
limited
space, and my cheap host only gave me three kilobytes.
</p>
</font>
</body>
</html>
<!-- Comment -->
The last, and certainly least thing we are going to talk about are comments.
These
tags are a waste of bytes really; all they do is give the reader of the source
information
about it. They do not show up on the finished product.
= HTML Generators =
HTML Generators are programs that allow you to design a page, and
while you design it, the HTML for whatever you add to the page is generated.
Such programs include Microsoft Frontpage and Dreamweaver.
I use Frontpage a lot simply because it saves time. Opening up notepad and
writing an entire site can be timely, while Frontpage is efficient and quick.
I hope this guide helped you learn a little about HTML. For all you HTML
masters, we all
forget things sometimes and need a reference guide. Please give me credit if you
quote
or use this guide anywhere. Thank you.
Silentstalker
++ Nite Security Resources Administrator
++++ http://www.nitesecurity.com/