HTML Part I [For the beginners]

[Stuff2Do]

Taken From My Site, This Page

http://xtreme-forums.com/forum/viewtopic.php?t=101

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 - Text here
Italic text - Text here
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:
TEXT
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]URL[/img]

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]URL[/img]

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]URL[/img]

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]URL[/img]

Put your dimmensions in the # parts.

LISTS

Bulleted Lists-

The Code:

<ul>[*]TEXT[*]TEXT[*]TEXT[/list]
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:

1. TEXT
2. TEXT
3. TEXT

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>
<>
<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>
<>
</table>

But that won't get you anywhere. Put the <td> tags between the <tr> tags, like this:

<table>
<tr>
<td><>
<>
</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 width="50%" bgcolor="#CCCCCC">CONTENT<>
<>
<tr>
<td width="50%" bgcolor="#CCCCCC">CONTENT<>
<td width="50%" bgcolor="#CCCCCC">CONTENT<>
<>
</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<>. 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]yawgmothsorders@sbcglobal.net[/url]. My AIM is Unknown49234 if you think you can catch me online. I hope this helps lots of people out, enjoy!

[geekerati]

Thanks stuff2do, I finally received my three CD set for learning HTML , but this will give me a jump start, cause I still haven't opened the box yet. One of the Google adds at the bottom of this page looks very interesting talking about an HTML cheat sheet, check it out!

[Stuff2Do]

haha, so your learnin html, i find it easier to look at html an play with it, thats how i got to know it

[Eric]

Haha, I guess Assembly and low-level programming scares people, since no one has replied yet to my ASM tutorial neither on XF nor the one I posted ages ago on this forum.

[Stuff2Do]

haha *ignores what i dont understand*