| |
Stuff2Do
Elite Googler
Joined: 10 Nov 2004
Location: England, UK
790.60 GC$
Items
|
 Posted: Thu Mar 17, 2005 1:57 pm Post subject: HTML Part I [For the beginners] |
 |
|
|
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 - <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 yawgmothsorders@sbcglobal.net. My AIM is Unknown49234 if you think you can catch me online. I hope this helps lots of people out, enjoy! |
|
| Back to top |
|
|
geekerati
Google elgooG
Joined: 17 Jan 2005
Location: Deep in the heart.
21217.12 GC$
Items
|
| Posted: Thu Mar 17, 2005 8:02 pm Post subject: |
|
|
|
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! |
|
| Back to top |
|
|
Stuff2Do
Elite Googler
Joined: 10 Nov 2004
Location: England, UK
790.60 GC$
Items
|
| Posted: Thu Mar 17, 2005 8:59 pm Post subject: |
|
|
|
| haha, so your learnin html, i find it easier to look at html an play with it, thats how i got to know it |
|
| Back to top |
|
|
Eric
Better than you
Joined: 12 Aug 2004
Location: Toronto, Ontario, Canada.
2491.35 GC$
Items
|
| Posted: Thu Mar 17, 2005 11:30 pm Post subject: |
|
|
|
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.
_________________
"A lie gets halfway around the world before the truth has a chance to get it's pants on." - Winston Churchill |
|
| Back to top |
|
|
Stuff2Do
Elite Googler
Joined: 10 Nov 2004
Location: England, UK
790.60 GC$
Items
|
| Posted: Fri Mar 18, 2005 5:24 am Post subject: |
|
|
|
| haha *ignores what i dont understand* |
|
| Back to top |
|
|
Sponsored Links
|
| Posted: 5 Dec 2008 10:09 am Post subject: Advertisements |
|
|
|
|
|
|
| Back to top |
|
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
Host your free forums with Invision Plus.net forum web hosting with your own subdomain.
alexisBlue v1.2 // Theme Created By: Andrew Charron // Icons in Part By: Travis Carden |
|
|
|
|
