A Guide To Basic HTML...Newbie friendly!

Clank · May 4, 2008

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:
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">&nbsp;</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>&nbsp;</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 &copy; 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> &amp; <a href="http://www.stylishblog.com/" target="_blank" class="links">Stylish Blog</a>.</td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td height="10">&nbsp;</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>
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 -
Code:
<body(Or head.) leftmargin=0 marginwidth=0 topmargin=0 marginheight=0
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-
Code:
<body bgcolor="______">
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:
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!

The Dark · May 4, 2008

Very basic, could be good for the newbies. I don't think that its upto the UE section though.

Faskist · May 4, 2008

Skimps on detail, but covers a lot. Maybe compare WYSIWYG editors like MS Word, OpenOffice.org Writer etc. against markup languages like HTML and TeX.

Clank · May 5, 2008

I agree it is a bit skimpy on detail, I'll try fix that when I have time.
For the rest - Translate it for me? I'm not really a HTML whiz, very new to it.

Jokerz · May 5, 2008

You say your using HTML when the example code is using XHTML 1.0?

Dont use an XHTML example it confuses the reader.

Clank · May 5, 2008

^ See how much I know? ^

Easter Bunny2 · May 5, 2008

I think its great for newbies. Easy to understand, step-by-step. But as said before, just go into a little more detail but otherwise very good for the beginner.

Eric · May 5, 2008

Exactly what Light said. If you get a chance to expand, it'd be great

Faskist · May 5, 2008

Clank said: ↑

I agree it is a bit skimpy on detail, I'll try fix that when I have time.
For the rest - Translate it for me? I'm not really a HTML whiz, very new to it.
Click to expand...

Compare the effects of using WYSIWYG (What You See Is What You Get) editors such as the ones listed with the effects of using a markup language, written in plaintext and interpreted (Or run as a program in the case of TeX), and the benefits and disadvantages to each.

Jokerz said: ↑

You say your using HTML when the example code is using XHTML 1.0?

Dont use an XHTML example it confuses the reader.
Click to expand...

This is a very good point. An XHTML document is very different to a HTML document -- an XHTML document is an application.

Clank · May 5, 2008

Thanks for placing this in the guide section. I WILL try to expand it a bit more, when I have time. (Got to study sometimes.)
Thanks.

danx69 · Jul 20, 2008

This guide was great even thought im still learning you gotts start somewhere

SuF · Jul 20, 2008

Faskist said: ↑

This is a very good point. An XHTML document is very different to a HTML document -- an XHTML document is an application.
Click to expand...

WTF? You have no idea what your talking about! XHTML is the current standard of HTML. It is HTML, except they gave it a new name since it changes a shit load of stuff. An XHTML is no diffrent from a HTML document except it uses slightly diffrent tags and such.

And if you don't teach people XHTML, I will kill you... Teach them XHTML from the start! I BEG YOU! Its not that hard...

Your long code example is from here: http://www.freelayouts.com/templates/Orange-Tinge?preview=true

Unless that is your site, give them credit, or its plagerism. :/, I see that it has a copyright at the bottom, but who reads through the code. :/

save it as- .htm,
Click to expand...

explain.

the tags will become invisible
Click to expand...

not really, they are left out from the website and are used to change shit, you can still see them, but looking at the source...

you must put this one - <html> at the start, and this one - </html> at the finish.
Click to expand...

wrong. you do not need any of them... to meet W3C's standards you do. and since you never meentionsed W3C, you are wrong

<h1> and </h1>
The <h-> tags are used to create headings. The smaller the number, the bigger the text, here's the different sizes -
Click to expand...

diffrent broswers display them diffrently, so depending on which broswer you use, then the sizes are diffrent so having a pic of sizes can help, but its not exact for ever broswer.
<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>.
Click to expand...

use them for each paragraph... thats what they are there for!

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 -
Click to expand...

USE CSS. If you don't, you deserve to die. (Never tell jansen where u live. he will stab you for this guide. :/)

Other than not teaching XHTMl, and all the wrong things... it is decent. :/

scottgreen · Jul 20, 2008

SuF said: ↑

WTF? You have no idea what your talking about! XHTML is the current standard of HTML. It is HTML, except they gave it a new name since it changes a shit load of stuff. An XHTML is no diffrent from a HTML document except it uses slightly diffrent tags and such.

And if you don't teach people XHTML, I will kill you... Teach them XHTML from the start! I BEG YOU! Its not that hard...

Your long code example is from here: http://www.freelayouts.com/templates/Orange-Tinge?preview=true

Unless that is your site, give them credit, or its plagerism. :/, I see that it has a copyright at the bottom, but who reads through the code. :/

explain.

not really, they are left out from the website and are used to change shit, you can still see them, but looking at the source...

wrong. you do not need any of them... to meet W3C's standards you do. and since you never meentionsed W3C, you are wrong

diffrent broswers display them diffrently, so depending on which broswer you use, then the sizes are diffrent so having a pic of sizes can help, but its not exact for ever broswer.
<p> and </p>

use them for each paragraph... thats what they are there for!

USE CSS. If you don't, you deserve to die. (Never tell jansen where u live. he will stab you for this guide. :/)

Other than not teaching XHTMl, and all the wrong things... it is decent. :/
Click to expand...

Why are you going around the UE forums flaming people by telling them they`re doing everything wrong, and you know everything because you`re god?

SuF · Jul 21, 2008

scottgreen said: ↑

Why are you going around the UE forums flaming people by telling them they`re doing everything wrong, and you know everything because you`re god?
Click to expand...

Wtf are you talking about? I am not flaming anyone. I am simply pointing out their misconceptions and incorrect things in their HTML guides, mostly since I know it better than you by a long shot. If I told you to GTFO you mother fucking moron, we don't want idoits like you on our forums, then that would be flaming. Now your the one spamming, thus forcing me to spam to reply to you. So now, please drop this, and you little report for flaming on me? I never flammed you at all, I explained why I used large red text in a post on the thread of your HTML guide.

you know everything because you`re god?
Click to expand...

Find a quote of me saying I know everything. Find a quote of me saying I am god.

telling them they`re doing everything wrong
Click to expand...

Find a quote of me telling them everything in their guide is wrong.

Other than not teaching XHTMl, and all the wrong things... it is decent. :/
Click to expand...

I said that after all the edits. This guide is decent. There are inccorect things, and since he is not teaching XHTML, I might kill him, but Jansen will get to him first since he has friends in high places. , other than that it is a decent guide. -.-

Clank · Jul 27, 2008

Stop trying be intelligent. You are not. You are a pointless person, provide constructive criticism and maybe people will listen.

We Are All Legit · Jul 27, 2008

Thank you!

SuF · Jul 27, 2008

Clank said: ↑

Stop trying be intelligent. You are not. You are a pointless person, provide constructive criticism and maybe people will listen.
Click to expand...

If your talking to me. I posted my post telling you what I thought already. I was just defending myself from the other guy.

joking · Aug 30, 2008

looks good and straight forward. i enjoyed reading this thx

Noob! · Nov 3, 2008

great tut!

Clank · Mar 19, 2009

I was reffering to the other guy, sorry :/

Log in or Sign up

A Guide To Basic HTML...Newbie friendly!

Clank Guru

The Dark Guru

Faskist Tuxhead

Clank Guru

Jokerz Forum Addict

Clank Guru

Easter Bunny2 Bunny Pie

Eric Grand Master

Faskist Tuxhead

Clank Guru

danx69 Member

SuF Legend

scottgreen Forum Addict

SuF Legend

Clank Guru

We Are All Legit Active Member

SuF Legend

joking Apprentice

Noob! Forum Addict

Clank Guru

Log in or Sign up

A Guide To Basic HTML...Newbie friendly!

Thread Tools

Clank Guru

The Dark Guru

Faskist Tuxhead

Clank Guru

Jokerz Forum Addict

Clank Guru

Easter Bunny2 Bunny Pie

Eric Grand Master

Faskist Tuxhead

Clank Guru

danx69 Member

SuF Legend

scottgreen Forum Addict

SuF Legend

Clank Guru

We Are All Legit Active Member

SuF Legend

joking Apprentice

Noob! Forum Addict

Clank Guru

Useful Searches