[TUT] Your first HTML webpage

adm · 22-10-2006, 09:21 PM

Introduction
I'm guessing that this is your first time that you've come across HTML. Well then, sit back and read and you'll have your own webpage up within minutes!

HTML
HTML stands for Hyper Text Mark-Up Language. It is a coding language that is made to make even the basic of websites. Basically, the on the server of the website you are viewing sends this code to the browser you're using and it comes up on your screen as a webpage.

Tags
HTML coding is made up of tags like this one:-

Code:

<title>My Site</title>

If you don't have tags - then you can't create a HTML web page. The important thing to know and understand about tags is that they have to start, and they have to end. To start a tag, you have to use one of these: '<' and then enter the tag you want. Like this:-

Code:

<title>

That is a basic code - but it cannot be read by the browser because it hasn't got an end. To make the tag complete - you have to end the tag, after you've put what you want inside the tags, like so:-

Code:

<title>My Site</title>

With the tag complete, the browser can read the coding and display what the tag is telling it to.

Ok, let's start!
First of all, you should open up notepad which can be found in the accesories part of your programs section on your start menu.
Ok, so now you know about HTML and tags, I think you're ready to start on your journey, to create your very own first webpage.
Every basic webpage has to start with the html tag, this tells the browser that it's to read HTML and no other coding language unless specified.
So type in the following in your blank notepad document:-

Code:

<html>

Now, you don't have to end this tag until you've finished the webpage because then it tells the browser to stop reading the html coding.
Next, I think we should add a head tag to the coding. The head tag is used for putting other tags inside that don't necersarly appear on-page. So, you should have the following in your document:-

Code:

<html>
<head>

Ok, so now we need something to put in the head tags. I know - let's put a title tag in to tell everyone what your site is called! The title tag basically tells the browser the name of the webpage and displays it up the top. You see where it says Habbox UK Forum up at the top? That's the title of the webpage. So now you should have this:-

Code:

<html>
<head>
<title>My First WebPage

Now, what have I done wrong? I havn't ended the title tags yet. So now you should have this:-

Code:

<html>
<head>
<title>My First WebPage</title>

Now we need to end the head tag as there's nothing else that needs to be put in there. So your document should look like this:-

Code:

<html>
<head>
<title>My First WebPage</title>
</head>

Now we need to put content into the webpage. To do this we need to enter body tags which basically tells the browser that this is the start of the content. So your document should look like this:-

Code:

<html>
 <head>
 <title>My First WebPage</title>
</head>
<body>

Now, there are some things that we can do to extend the body tag. We can add a background colour to the webpage by adding a hex code to the body tag. Something like this:-

Code:

<html>
  <head>
  <title>My First WebPage</title>
 </head>
<body bgcolor="#ffffff">

This tells the browser that the colour of the background is the one in the hex codes and it displays it.
Now we need to add the content. So add your content like this:-

Code:

<html>
   <head>
   <title>My First WebPage</title>
  </head>
 <body bgcolor="#ffffff">
My content
</body>

You can customise your content by adding a number of format tags. Like the font tag which you can tell what font face it is, the color and size. Like the following:-

Code:

<html>
    <head>
    <title>My First WebPage</title>
   </head>
  <body bgcolor="#ffffff">
<font face="verdana" size="1" color="#000000">My content</font>
</body>

To customise your text/content even more, you can make it bold, underlined or italic, or a mixture of the three, like so:-

Code:

<html>
     <head>
     <title>My First WebPage</title>
    </head>
   <body bgcolor="#ffffff">
<font face="verdana" size="1" color="#000000"><b><i><u>My content</b></i></u></font>
 </body>

The U tag is for underlined, the I tag is for italic and the b tag is for bold tags.
Now you need to end the html tag to tell the browser to stop reading the code.

Code:

<html>
      <head>
      <title>My First WebPage</title>
     </head>
    <body bgcolor="#ffffff">
<font face="verdana" size="1" color="#000000"><b><i><u>My content</b></i></u></font>
  </body>
</html>

Now, save your file as index.htm and upload it to your server. If you have no server or web hosting then visit www.hostultra.com for free hosting.

That's It
And that's it, you've created your first, basic webpage in a matter of minutes - and you've been learning aswell.

If you find errors with this tutorial then contact me.

Lycan · 22-10-2006, 09:26 PM

Looks good +rep

adm · 22-10-2006, 09:27 PM

There's probably like a million errors but hey.

-::Mr.Dave::- · 22-10-2006, 09:36 PM

Looks good doent look like theres any errors, +Rep Nice job

~~DuHast~~ · 22-10-2006, 09:43 PM

So many errors where is your DTD? You don't have your xmlns tag which are both mandatory now.

HTML Code:

<html xmlns="http://www.w3.org/1999/xhtml">

You can use CSS for some of the bad styling you did by using background-color: and font-family: etc.

HTML Code:

body {
        background-color: black;
        font-family: verdana, ariel, sans-serif;
}

The minimum of a HTML page or XHTML page is:

HTML Code:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Title goes here</title>
  </head>
<body>

</body>
</html>

You also incorrectly nest your tags which isn't valid say you have bold and then italic is has to be:

HTML Code:

<p><b><i>Hello World</i></b></p>

This is correct nesting (I think) I typed it in rapidly.

dark-as-death · 22-10-2006, 09:44 PM

looks good, + rep dude

adm · 22-10-2006, 09:44 PM

Ahh, yes.

And, the css is un-needed as it's HTML only.

I told you there was errors.

~~DuHast~~ · 22-10-2006, 09:46 PM

Originally Posted by Adzat

Ahh, yes.

And, the css is un-needed as it's HTML only.

I told you there was errors.

I'm not sure the Bgcolor and font tag still validate therfore my statement is correct if they don't although I use a strict DTD therfore it has to be used with CSS and not HTML 4.01.

adm · 22-10-2006, 09:47 PM

I'm sure they still validate.

~~Jackboy~~ · 22-10-2006, 09:51 PM

haha brilliant +rep

Thread: [TUT] Your first HTML webpage

Thread Tools

[TUT] Your first HTML webpage

Posting Permissions