Mystic
Account Closed
- Impact
- 8
DarkProgrammer's First HTML Tutorial
Beginner - Part I
TABLE OF CONTENTS:
1. The Basics
-Text
-Links
-Images
2. Lists
-Bulleted Lists
-Numbered Lists
3. Tables
-Everything
First off, let me just point out that this tutorial is intended for those who either have very little knowledge of HTML, or none. This tutorial covers the very basics of HTML. Therefore, if you become amazed on how incredibly basic these concepts are, you know why.
SECTION ONE- THE BASICS
Text
Bold text - <b>Text here</b>
Italic text - <i>Text here</i>
Underline text - <u>Text here</u>
Type-writer text - <tt>Text here</tt>
The text goes in between the tags. Notice that each ending tag has a slash. All ending tags have a slash.
LINKS
The basic link:
<a href="URL">TEXT</a>
You place the web-address in the URL part, and the text you want to appear in the TEXT part. Anything that's in the TEXT will be the part that you will be able to click on.
IMAGES
To insert and image, insert this:
<img src="URL">
In order to obtain the URL of the image, right click it, and view it's properties. Get the URL from there and put it into the URL part.
Borders-
NOTE: Netscape browsers will only display a border if the image is a link.
The code:
<img src="URL" border="#">
Simply put the thickness of the border in the # part.
Alternative Text-
The alternative text will apear in a yellow box when your cursor hovers over the image.
The code:
<img src="URL" alt="TEXT">
Whatever you put in the TEXT part will be displayed in the yellow box.
Vspace attribute-
You can also add space around your images.
The code:
<img src="URL" Hspace="#" Vspace="#">
Put your dimmensions in the # parts.
LISTS
Bulleted Lists-
The Code:
<ul>
<li>TEXT</li>
<li>TEXT</li>
<li>TEXT</li>
</ul>
Put the text you want to appear to the right of the bullet in the TEXT part. You can add as many as you want.
Numbered Lists-
The Code:
<ol>
<li>TEXT</li>
<li>TEXT</li>
<li>TEXT</li>
</ol>
It works the same way as a bulleted list, only there aren't bullets, they're numbered.
TABLES
Tags-
The tags are:
<table>
</table>
<tr>
</tr>
<td>
</td>
The <table> tag is the first tag you put. <tr> Comes next. If you set it up so far, it'd look like this:
<table>
<tr>
</tr>
</table>
But that won't get you anywhere. Put the <td> tags between the <tr> tags, like this:
<table>
<tr>
<td></td>
</tr>
</table>
Congratulations, you've set up your first table. You can put your content in between the <td> tags and it'll be displayed in a table.
Now, let's move on to something a little harder to understand. I'll write the code, and explain what each line does:
<table width="100%" bordercolor="#000000" border=1 cellspacing=0 cellpadding=0>
<tr>
<td width="50%" bgcolor="#CCCCCC">CONTENT</td>
<td width="50%" bgcolor="#CCCCCC">CONTENT</td>
</tr>
<tr>
<td width="50%" bgcolor="#CCCCCC">CONTENT</td>
<td width="50%" bgcolor="#CCCCCC">CONTENT</td>
</tr>
</table>
Analysis:
width="100%" - This sets the width of the table to cover the whole screen.
bordercolor="#000000" - This sets the color of the border to black. You can make it any color you want, as long as it's either in Hexadecimal code or just a really common color.
border=1 - This sets the thickness of the border to 1. You can make it as thick as you wish.
cellspacing=0 - First of all, a cell is a table, i.e., the stuff between the <td>and</td>. This sets it so that there is no seperation between the cells.
cellpadding=0 - This is basically the stuff around the border. I always keep it on 0.
bgcolor="#CCCCCC" - Sets the background color of the cell to a light shade of gray. You can change the color to any color you wish.
And that's about all there is to describe. One more thing that might help you out: Think of <tr> as a break between two rows. Any cell without <tr> being on top of it is going to be right beside the last cell.
That's about all for this tutorial. If you find yourself confused, please feel free to e-mail me at [email protected]. My AIM is Unknown49234 if you think you can catch me online. I hope this helps lots of people out, enjoy!
Beginner - Part I
TABLE OF CONTENTS:
1. The Basics
-Text
-Links
-Images
2. Lists
-Bulleted Lists
-Numbered Lists
3. Tables
-Everything
First off, let me just point out that this tutorial is intended for those who either have very little knowledge of HTML, or none. This tutorial covers the very basics of HTML. Therefore, if you become amazed on how incredibly basic these concepts are, you know why.
SECTION ONE- THE BASICS
Text
Bold text - <b>Text here</b>
Italic text - <i>Text here</i>
Underline text - <u>Text here</u>
Type-writer text - <tt>Text here</tt>
The text goes in between the tags. Notice that each ending tag has a slash. All ending tags have a slash.
LINKS
The basic link:
<a href="URL">TEXT</a>
You place the web-address in the URL part, and the text you want to appear in the TEXT part. Anything that's in the TEXT will be the part that you will be able to click on.
IMAGES
To insert and image, insert this:
<img src="URL">
In order to obtain the URL of the image, right click it, and view it's properties. Get the URL from there and put it into the URL part.
Borders-
NOTE: Netscape browsers will only display a border if the image is a link.
The code:
<img src="URL" border="#">
Simply put the thickness of the border in the # part.
Alternative Text-
The alternative text will apear in a yellow box when your cursor hovers over the image.
The code:
<img src="URL" alt="TEXT">
Whatever you put in the TEXT part will be displayed in the yellow box.
Vspace attribute-
You can also add space around your images.
The code:
<img src="URL" Hspace="#" Vspace="#">
Put your dimmensions in the # parts.
LISTS
Bulleted Lists-
The Code:
<ul>
<li>TEXT</li>
<li>TEXT</li>
<li>TEXT</li>
</ul>
Put the text you want to appear to the right of the bullet in the TEXT part. You can add as many as you want.
Numbered Lists-
The Code:
<ol>
<li>TEXT</li>
<li>TEXT</li>
<li>TEXT</li>
</ol>
It works the same way as a bulleted list, only there aren't bullets, they're numbered.
TABLES
Tags-
The tags are:
<table>
</table>
<tr>
</tr>
<td>
</td>
The <table> tag is the first tag you put. <tr> Comes next. If you set it up so far, it'd look like this:
<table>
<tr>
</tr>
</table>
But that won't get you anywhere. Put the <td> tags between the <tr> tags, like this:
<table>
<tr>
<td></td>
</tr>
</table>
Congratulations, you've set up your first table. You can put your content in between the <td> tags and it'll be displayed in a table.
Now, let's move on to something a little harder to understand. I'll write the code, and explain what each line does:
<table width="100%" bordercolor="#000000" border=1 cellspacing=0 cellpadding=0>
<tr>
<td width="50%" bgcolor="#CCCCCC">CONTENT</td>
<td width="50%" bgcolor="#CCCCCC">CONTENT</td>
</tr>
<tr>
<td width="50%" bgcolor="#CCCCCC">CONTENT</td>
<td width="50%" bgcolor="#CCCCCC">CONTENT</td>
</tr>
</table>
Analysis:
width="100%" - This sets the width of the table to cover the whole screen.
bordercolor="#000000" - This sets the color of the border to black. You can make it any color you want, as long as it's either in Hexadecimal code or just a really common color.
border=1 - This sets the thickness of the border to 1. You can make it as thick as you wish.
cellspacing=0 - First of all, a cell is a table, i.e., the stuff between the <td>and</td>. This sets it so that there is no seperation between the cells.
cellpadding=0 - This is basically the stuff around the border. I always keep it on 0.
bgcolor="#CCCCCC" - Sets the background color of the cell to a light shade of gray. You can change the color to any color you wish.
And that's about all there is to describe. One more thing that might help you out: Think of <tr> as a break between two rows. Any cell without <tr> being on top of it is going to be right beside the last cell.
That's about all for this tutorial. If you find yourself confused, please feel free to e-mail me at [email protected]. My AIM is Unknown49234 if you think you can catch me online. I hope this helps lots of people out, enjoy!
