Xtr3M.
elite user
 Din: fata monitorului
Inregistrat: acum 17 ani
Postari: 1015
|
|
A guide to HTML
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.
@credits goes to the same site:
_______________________________________
e-mail: xtr3m[at]pscomp[DOT]com
|
|
