Clank
Guru
- Joined
- Mar 21, 2008
- Sythe Gold
- 0
- Messages
- 1,608
Hi, I'm Clank, I'm new to HTML, but, I thought I'd write a guide on the basic aspects of HTML...
What is HTML?
Well, HTML stands for HyperText Markup Language. This means that HTML can be used to create and edit web pages, for other people to view over the internet, the good thing about HTML, is that it can be written in plain text, even though 'Note Pad'!
Introduction to HTML...
Now you know what it actually is, lets take a look at the language itself...Here's a sample of a basic website layout:
Ah! Looks complicated? Well, HTML does look complicated at first, but once you've cracked the surface, you will realise it is actually very simple.
Starting a HTML site...
You will use Note pad top edit your HTML page, to do so, right click on the desktop, go to - New > Text Document.
When saving your HTML page, save it as- .htm, to view it in the browser, just click on it. To edit it in notepad, right click on it and go to - Open with > Notepad.
Tags...The secret workers behind HTML...
Tags are what HTML is based around, they are little commands, which enclose blocks of text, called 'elements'. Tags are what you might call the 'building blocks' of HTML, they are used to add text, graphics, videos, and much more, and make them readable for any type of computer, whether it be a PC, Mac or Linux.
In this section I will show you what tags are for, and how to use them...
You will notice tags are kind of like the BB code, to open the tag you write: <tag here> and to close it you write: </tag here>, so the slash indicates that it is the end of the command. (Note - once you publish your webpage, the tags will become invisible.)
Making our site -
<html> and </html>
These two tags are used at the start and finish of ANY HTML site, you must put this one - <html> at the start, and this one - </html> at the finish.
So this is what your notepad should contain -
<head> and </head>
These tags indicate the what is at the head of the page, you must insert them, even if you are not putting a head in, place them inbetween the <html> tags.
So this is what your notepad should contain -
<title> and </title>
These tags are for when your page visitors bookmark the page, and the title at the top of our browser, on the task bar, write what you want your visitors to see.
So this is what your notepad should contain -
<body> and </body>
These tags will contain the main text of your page, write what ever you want inbetween them.
So this is what your notepad should contain -
<p> and </p>
These tags are for making a paragraph, put them at the start of your text, and the finish, they go inside the <body>.
So this is what your notepad should contain -
<h1> and </h1>
The <h-> tags are used to create headings. The smaller the number, the bigger the text, here's the different sizes -
These tags can be used to encase any text.
So this is what your notepad should contain -
<br> and ?
This tag has NO closing tag, it creates a line break, insert after text.
So this is what your notepad should contain -
<meta...>
Ever been to a site where it says - Please wait, you will be redirected in 5 seconds? Thats a META tag. These tags redirect the user to another page, or the URL specified. A META tag is made up of 2 attributes...
The HTTP-EQUIV, and CONTENT. Here's how to place them-
To leave a message informing the user what is happening, put it it the <body> tags. The META tag goes in the <head> tags.
Margins
The margins define where the content of your site will be placed.
If you are using Internet Explorer/Firefox, you will use LEFTMARGIN and TOPMARGIN, while Netscape (Very old now.) uses MARGINWIDTH and MARGINHEIGHT. I recommend the IE/Firefox tags, as very little people use Netscape. You place these tags in the <body>. Basically, the TOPMARGIN and MARGINHEIGHT define how far away from the top our body is (Don't worry, it won't crush your heading.). The LEFTMARGIN and MARGINWIDTH are used to specifiy how far the text on the left side is away from the side of the browser. Here's how to use them -
This would push the text up against the browser at the top and the left side.
You do not need to fiddle with these, there is a default, which does not require this tag to even exist.
Background Color
This is very handy, it is used to define the BG color of your page...
Here's how to use it-
Fill in the _____ with a color code, heres a list of some basic colors - http://www.w3schools.com/Html/html_colors.asp
(Sorry for the spelling, HTML is american, so color is spelt that way.)
Lists
You will want to use these quite alot, they are very very handy. Here's how to set one out-
They use these tags to open and close <ul> and </ul>, and the <li> tag to list each item:
What is HTML?
Well, HTML stands for HyperText Markup Language. This means that HTML can be used to create and edit web pages, for other people to view over the internet, the good thing about HTML, is that it can be written in plain text, even though 'Note Pad'!
Introduction to HTML...
Now you know what it actually is, lets take a look at the language itself...Here's a sample of a basic website layout:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Orange Tinge by CMG Technologies</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table width="779" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><table width="30%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="redbox"> </td>
</tr>
<tr>
<td height="45"><a href="index.html" class="logo">Website Title</a></td>
</tr>
<tr>
<td><a href="index.html" class="tag">Company Tagline</a></td>
</tr>
</table></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td bgcolor="#E2E2D2" class="border" height="40"><table width="70%" border="0" cellspacing="0" cellpadding="0">
<tr align="center">
<td><a href="index.html" class="toplinks">About Us</a></td>
<td class="toplinks">|</td>
<td><a href="index.html" class="toplinks">Products</a></td>
<td class="toplinks">|</td>
<td><a href="index.html" class="toplinks">Services</a></td>
<td class="toplinks">|</td>
<td><a href="index.html" class="toplinks">Contact Us</a></td>
<td class="toplinks">|</td>
<td><a href="index.html" class="toplinks">Sitemap</a></td>
</tr>
</table></td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr>
<td bgcolor="#F3F3F3" class="border"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="10"></td>
</tr>
<tr>
<td><table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="heading">||</td>
<td class="heading">Welcome</td>
<td class="heading2">Heading</td>
</tr>
</table></td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr>
<td class="content">
<p>Hi Everybody! Here is a Free Template, named Orange Tinge with CSS and XHTML 1.0 Transitional Validation from CMG Technologies, Web Design India. Feel free to use this template, just keep the Designed by link at the bottom. Thanks! </p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum sapien enim, cursus in, aliquam sit amet, convallis eget, metus. Duis dui mi, varius at, lacinia eget, ullamcorper et, tortor. Pellentesque ac pede. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean orci mi, varius eget, mollis vel, rhoncus a, leo. Ut eros enim, vehicula quis, gravida ac, sodales sit amet, orci. Nulla eleifend tristique erat.</p>
<p>Nunc commodo metus et lorem. Phasellus vel libero. Vestibulum eu enim. Mauris pharetra. Vestibulum ligula libero, vestibulum quis, commodo non, sagittis eget, elit. Ut nec tellus. Nunc ligula quam, vulputate ut, imperdiet nec, luctus at, magna. Nunc posuere nulla ac tortor. Donec facilisis, turpis eu hendrerit ultricies, lectus sapien nonummy justo, eget rutrum lorem nulla sed nunc. Nam vestibulum neque vitae lacus aliquam tristique. Ut odio quam, mollis in, ultrices vel, ullamcorper id, diam. Curabitur eget odio a lacus pulvinar condimentum. Suspendisse elementum.</p>
<p>Quisque vulputate. Aliquam condimentum, odio vel ultrices sodales, augue lorem vehicula mi, vel nonummy nisl eros et tortor. Duis laoreet pellentesque lorem. Nam sagittis condimentum libero. Nullam a ante vel massa accumsan elementum. Sed mauris metus, tincidunt quis, blandit at, viverra a, ligula. Pellentesque neque metus, mattis non, tincidunt vitae, euismod scelerisque, nulla. Fusce justo. Donec nec nibh. Sed suscipit bibendum leo. Nulla erat ligula, egestas consequat, sagittis ut, fermentum a, diam. Sed turpis est, aliquam nec, lacinia sed, aliquam non, libero. Ut turpis. Pellentesque viverra pharetra quam.</p>
<p>Aenean dapibus, leo vitae eleifend porta, sem ipsum nonummy est, eu fermentum arcu lectus in lacus. Vestibulum tristique metus eu lorem. Pellentesque sed erat. Morbi pharetra condimentum massa. Vestibulum vel nulla at eros porta tempus. Fusce at lorem. Nulla facilisis. Phasellus nisl. Integer id massa nec tellus rutrum pellentesque. Mauris orci mauris, dictum vitae, varius eget, vestibulum quis, risus. Pellentesque dictum, magna vitae pulvinar interdum, orci lacus posuere neque, et lacinia dui eros ut erat. Ut purus. Nullam ac tellus et eros condimentum interdum.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum sapien enim, cursus in, aliquam sit amet, convallis eget, metus. Duis dui mi, varius at, lacinia eget, ullamcorper et, tortor. Pellentesque ac pede. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean orci mi, varius eget, mollis vel, rhoncus a, leo. Ut eros enim, vehicula quis, gravida ac, sodales sit amet, orci. Nulla eleifend tristique erat.</p>
<p>Nunc commodo metus et lorem. Phasellus vel libero. Vestibulum eu enim. Mauris pharetra. Vestibulum ligula libero, vestibulum quis, commodo non, sagittis eget, elit. Ut nec tellus. Nunc ligula quam, vulputate ut, imperdiet nec, luctus at, magna. Nunc posuere nulla ac tortor. Donec facilisis, turpis eu hendrerit ultricies, lectus sapien nonummy justo, eget rutrum lorem nulla sed nunc. Nam vestibulum neque vitae lacus aliquam tristique. Ut odio quam, mollis in, ultrices vel, ullamcorper id, diam. Curabitur eget odio a lacus pulvinar condimentum. Suspendisse elementum.</p></td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="92%" border="0" align="right" cellpadding="0" cellspacing="0">
<tr>
<td class="copybox">All Right Reserved © 2007, Designed by <a href="http://www.cmgtechnologies.com/" title="Designed by CMG Technologies" class="links">CMG Technologies</a>, <a href="http://www.text-link-ads.com/starter_kit.php?ref=2503" target="_blank" class="links">$100 in FREE Links</a>, <a href="http://www.powertheweb.com/" target="_blank" class="links">Power the Web</a> & <a href="http://www.stylishblog.com/" target="_blank" class="links">Stylish Blog</a>.</td>
</tr>
</table></td>
</tr>
<tr>
<td height="10"> </td>
</tr>
</table>
<div style="font-size: 0.8em; text-align: center; margin-top: 1.0em; margin-bottom: 1.0em;">
Design downloaded from <a href="http://www.freewebtemplates.com/">Free Templates</a> - your source for free web templates
</div>
</body>
</html>Ah! Looks complicated? Well, HTML does look complicated at first, but once you've cracked the surface, you will realise it is actually very simple.
Starting a HTML site...
You will use Note pad top edit your HTML page, to do so, right click on the desktop, go to - New > Text Document.
When saving your HTML page, save it as- .htm, to view it in the browser, just click on it. To edit it in notepad, right click on it and go to - Open with > Notepad.
Tags...The secret workers behind HTML...
Tags are what HTML is based around, they are little commands, which enclose blocks of text, called 'elements'. Tags are what you might call the 'building blocks' of HTML, they are used to add text, graphics, videos, and much more, and make them readable for any type of computer, whether it be a PC, Mac or Linux.
In this section I will show you what tags are for, and how to use them...
You will notice tags are kind of like the BB code, to open the tag you write: <tag here> and to close it you write: </tag here>, so the slash indicates that it is the end of the command. (Note - once you publish your webpage, the tags will become invisible.)
Making our site -
<html> and </html>
These two tags are used at the start and finish of ANY HTML site, you must put this one - <html> at the start, and this one - </html> at the finish.
So this is what your notepad should contain -
Code:
<html>
</html><head> and </head>
These tags indicate the what is at the head of the page, you must insert them, even if you are not putting a head in, place them inbetween the <html> tags.
So this is what your notepad should contain -
Code:
<html>
<head></head>
</html><title> and </title>
These tags are for when your page visitors bookmark the page, and the title at the top of our browser, on the task bar, write what you want your visitors to see.
So this is what your notepad should contain -
Code:
<html>
<head><title>This comes at the top</title></head>
</html><body> and </body>
These tags will contain the main text of your page, write what ever you want inbetween them.
So this is what your notepad should contain -
Code:
<html>
<head><title>This comes at the top</title></head>
<body>This is our main text...</body>
</html><p> and </p>
These tags are for making a paragraph, put them at the start of your text, and the finish, they go inside the <body>.
So this is what your notepad should contain -
Code:
<html>
<head><title>This comes at the top</title></head>
<body>This is our main text... <p>Here is a paragraph.....gskfdhldfksalha</p></body>
</html><h1> and </h1>
The <h-> tags are used to create headings. The smaller the number, the bigger the text, here's the different sizes -
These tags can be used to encase any text.
So this is what your notepad should contain -
Code:
<html>
<head><title>This comes at the top</title></head>
<body>This is our main text... <p>Here is a paragraph.....gskfdhldfksalha</p> <h1> Big Heading...</h1></body>
</html><br> and ?
This tag has NO closing tag, it creates a line break, insert after text.
So this is what your notepad should contain -
Code:
<html>
<head><title>This comes at the top</title></head>
<body>This is our main text... <p>Here is a paragraph.....gskfdhldfksalha</p> <h1> Big Heading...</h1> testing br tag...<br>
did it work?</body>
</html><meta...>
Ever been to a site where it says - Please wait, you will be redirected in 5 seconds? Thats a META tag. These tags redirect the user to another page, or the URL specified. A META tag is made up of 2 attributes...
The HTTP-EQUIV, and CONTENT. Here's how to place them-
Code:
<meta http-equiv="Refresh" content="Insert amount of seconds till refresh here;http://www.site to be re-directed to.com>Margins
The margins define where the content of your site will be placed.
If you are using Internet Explorer/Firefox, you will use LEFTMARGIN and TOPMARGIN, while Netscape (Very old now.) uses MARGINWIDTH and MARGINHEIGHT. I recommend the IE/Firefox tags, as very little people use Netscape. You place these tags in the <body>. Basically, the TOPMARGIN and MARGINHEIGHT define how far away from the top our body is (Don't worry, it won't crush your heading.). The LEFTMARGIN and MARGINWIDTH are used to specifiy how far the text on the left side is away from the side of the browser. Here's how to use them -
Code:
<body(Or head.) leftmargin=0 marginwidth=0 topmargin=0 marginheight=0You do not need to fiddle with these, there is a default, which does not require this tag to even exist.
Background Color
This is very handy, it is used to define the BG color of your page...
Here's how to use it-
Code:
<body bgcolor="______">(Sorry for the spelling, HTML is american, so color is spelt that way.)
Lists
You will want to use these quite alot, they are very very handy. Here's how to set one out-
They use these tags to open and close <ul> and </ul>, and the <li> tag to list each item:
Code:
<ul> <li> List <li> List <li> List </ul>[CODE]
[U]Font Face/Font Color[/U]
To set font color - <font color="insert colour code here"> Text here. <font>
To set the different font - <font face="Arial,Impact"> (Seperate different fonts with commas.)
More will be added later!
, other than that it is a decent guide. -.-
