HTML lesson

DecA · January 07, 2004, 06:23 AM

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.

Code Select


<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.

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.

Code Select


<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.

Code Select


<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.

Code Select


<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.

Code Select


<html>
<!-- This page was written by Deca[xL]-->
<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>

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.

I hope this guide helped you learn a little about

Grok · January 07, 2004, 06:28 AM

Good post. Has some errors, but they're not worth pointing out right now. Do some more lessons, and use the forum's [ code ] [ / code ] tags to surround your HTML.

j0k3r · January 07, 2004, 06:36 AM

Wow fist post a helpful one, that's a first. Great job, pretty thourough, if you do it again use the code tags as grok suggested because most people learning HTML don't have alot/any previous programming experience, and it could be difficult for them to dicifer what is HTML code and what is you speaking. +1

Meh · January 07, 2004, 11:13 AM

Its a good post but man u must have been bored to sit down and type it all out.

Banana fanna fo fanna · January 07, 2004, 02:07 PM

Added code tags.

WinSocks · January 07, 2004, 08:50 PM

i always though that the font tags could only be within the <body> tags.

it is always better to even out the table tag and it's table rows and table data tags.

well thats only when you go nuts with tables within tables, it helps me keep track of which table i'm in.

btw, good use of comments

you odn't really see many people using comment tags in html projects.

quasi-modo · January 07, 2004, 08:54 PM

font tags should not be used at all, they are... wait grok gets angry when I say the word. But (I do say crap like this a lot don't I) accourding to the w3 css should be used for font. <span style="font: italic small-caps 900 12px arial">text</span> or
<style type="text/css">
p
{
font: italic small-caps 900 12px arial
}
</style>
or use a class or id, so on and so fourth.

Grok · January 07, 2004, 11:14 PM

Quote from: peofeoknight on January 07, 2004, 08:54 PM
font tags should not be used at all, they are... wait grok gets angry when I say the word.

Chill out. I was attempting to realize you were unconsciously saying depreciated in place of deprecated.

http://www.w3.org/TR/REC-html40/conform.html#deprecated

quasi-modo · January 08, 2004, 04:11 PM

oh... Thanks for telling me lol, I feel like a fool now.

, But better the me continueing to say it.

Mitosis · January 08, 2004, 04:51 PM

Great lesson, but like Grok said , you should fix things. Example your forgetting the line <head>.

Meh · January 09, 2004, 11:11 AM

I havce never real knowen or cared about the

Code Select

<head> and </head> tags. What are they for?

Grok · January 09, 2004, 11:14 AM

Quote from: The-Rabid-Lord on January 09, 2004, 11:11 AM
I havce never real knowen or cared about the
Code Select Expand
<head> and </head> tags. What are they for?

The HEAD section loads information about the document, in general, and is processed entirely before any scripting.

See http://www.w3.org/TR/html4/struct/global.html#h-7.4.1 for details.

quasi-modo · January 09, 2004, 05:08 PM

The head section is for your meta tags title styles and scripts, it is important.

dodge · April 28, 2004, 03:03 PM

everyone also forgot (or didnt bother saying, but i will) that the <title> </title> goes in the <head> </head> tags.... and please no one say its not important or they dont worry about it because it remines me when people use .tk and dont know how to set the title bar so you see the URL of the site.. really annoying to me atleast.

MyndFyre · April 28, 2004, 05:13 PM

Since this was bumped anyway, I feel obliged to point out that, with a few modifications, we can make pretty XHTML:

1.) Use all lowercase.
2.) Ensure that all tags have a terminator. For HTML tags that don't have a terminator that would make sense (such as the img tag), you can use the following syntax:
<img src="http://some-url/some-img.ext" />
<br />
3.) Ensure that all values have assigned values that are in quotes. For example, the iframe tag allows you to define the contant "allowTransparency", making the frame transparent. Proper setting would be:
<iframe allowTransparency="true" />
where it could be without XHTML:
<iframe allowTransparency />
4.) Ensure that your document is well-formed -- that is, all tags terminate in the proper order:
Invalid:
<b><i>Bold and italics</b></i>
Valid:
<b><i>Bold and italics</i></b>

Cheers.

HTML lesson

DecA

WinSocks

dodge