Basic HTML Tuturial

Decode · 19-02-2007, 10:53 AM

Welcome to my webpage tutorial. this tutorial teaches you how to use basic HTML (hypertext markup language.) Html is used to make webpages.

Starting
When making a webpage you should ALLWAYS use notepad or wordpad. start of by coppying the code below into notepad/wordpad:

HTML Code:

<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

HTML - A tag to go arround the whole HTML document
HEAD - Where the title and some scripts go
TITLE - The title tag is where you write the stuff that you want to appear on the bar at the top of your screen
BODY - Where the things you want to appear on your webpage go!

Next fill in the <title> and <body> tag, my example is below.

HTML Code:

<html>
<head>
<title>My 1st Webpage!</title>
</head>
<body>
Welcome to my 1st webpage!
</body>
</html>

__________________________________________________ ____
Saving Your Webpage:
This is a verry impotant bit, when you save your webpage
you should allways have .html on the end of your file name

__________________________________________________ _____
Now open your webpage in a web browser (To do this click file then open and locate the file from where you saved it.)
Your webpage looks real boring! You need to add a heading, different font sizes and bold, italic and underline.

Font sizes/styling
In html there are tags to make the font bigger or smaller, the thing you need to know is how to do headings. In the body section of your webpage add <h1>WRITE SOME TEXT HERE</h1>. Your code should now look something like this:

HTML Code:

<html>
<head>
<title>My 1st Webpage!</title>
</head>
<body>
<H1>Big Text</h1>
Welcome to my 1st webpage!
</body>
</html>

Save it and refresh it in your internet browser.
You can allso do:
<h2>TEXT GOES HERE</h2>
<h3>TEXT GOES HERE</h3>
<h4>TEXT GOES HERE</h4>
<h5>TEXT GOES HERE</h5>
<h6>TEXT GOES HERE</h6>

H1 is the biggest and H6 is the smallest.

Bold, Italic and Underline Are nearly the same as they are on the forum.
BOLD - <B>TEXT HERE</B>
ITALIC - <I>TEXT HERE</I>
UNDERINE - <U>TEXT HERE</U>

After adding that to your webpage it should look somthing like this:

HTML Code:

<html>
<head>
<title>My 1st Webpage!</title>
</head>
<body>
<H1>Big Text</h1>
Welcome to my 1st webpage!
<b>This Text Is Bold</b>
<U><i>This Text Is Underlined AND Italic!</i></u>
</body>
</html>

Save the page and refresh it in your web browser, as you can see all the text is on the same line :S. To fix this problem add a <br /> whenever you want ot go down a line BR is like pressing enter on your keybord.

The code should look something like this:

HTML Code:

<html>
<head>
<title>My 1st Webpage!</title>
</head>
<body>
<H1>Big Text</h1>
Welcome to my 1st webpage!
<br />
<b>This Text Is Bold</b>
<br /><br />
<U><i>This Text Is Underlined AND Italic!</i></u>
<br />
</body>
</html>

And in the web browser it should look something liek this:

Background/Aligning

Changing the background colour is realy simple, replace the <body> tag with <body bgcolor="#Hex Here"> To fined a hex color that you like go to this url
http://www.pagetutor.com/pagetutor/m...s/net216-2.gif, i like 330099 so i would put:

HTML Code:

<html>
<head>
<title>My 1st Webpage!</title>
</head>
<body bgcolor"330099">
<H1>Big Text</h1>
Welcome to my 1st webpage!
<br />
<b>This Text Is Bold</b>
<br /><br />
<U><i>This Text Is Underlined AND Italic!</i></u>
<br />
</body>
</html>

:s If you background colour won't change it may be becouse your spelling it colour, you have to spell it color because thats how the americans spell it :s

aligning text
aligning text is easy, fined the bit of text you want to align and at the start of it put <div align="right"> and at the end put </div>. You can allso do this with center and left.
CENTER TEXT - <div align="center">TEXT!</div> Or <center>TEXT!</center>
ALIGN TO THE RIGHT - <div align="right">TEXT!</div>
ALIGN TO THE LEFT - <div align="left">TEXT!</div>
You can allso add <hr /> HR makes a line acccross your page.

IMAGES/LINKING

Images can be quite complicated at 1st. the code to add an image to your webpage is <img src="IMAGE URL HERE" alt="TEXT HERE" />. The alt is the text that will be displayed if the image can't be found or has been removed.

As your webpage isnt on the web you can just use the image name EG: myimage.png or myimage.bmp but for this to work the image needs to be in the same folder as your
webpage.

Your code should now look somehting like this

HTML Code:

<html>
<head>
<title>My 1st Webpage!</title>
</head>
<body bgcolor="#330099">
<H1>Big Text</h1>
Welcome to my 1st webpage!
<br />
<b>This Text Is Bold</b>
<br /><br />
<U><i>This Text Is Underlined AND Italic!</i></u>
<br />
<center>Centered</center>
<div align="right">To the right!</div>
<img src="myimage.png" alt="My Image">
</body>
</html>

And something like this in your web browser:

Linking

Linking is similar to images
To link to another html document wich is in the same folder use the code:
<a href="webpage2.html">TEXT TO DISPLAY ON THE LINK GOES HERE</A>
This code is what will link to another part of your website, to link to a website like google instead of writing the file name on your computer write <A href="http://google.com">google</A>

Uploading

Once you have made a few pages you are ready to upload. go to www.freewebs.com and sign up for a free account, when it askes you if you want to use the webpage builder of HTML you select html. Once your accont has been made you can start uploading files, to to this click on the file upload button, upload all of you website to the web INCLUDING YOUR IMAGES.

Rename the file that you want the visiters to see 1st to index.html then your done.

If you don't understant things in this guide PM me

Plz dont steal my guide and use it on other forums.

Thread Moved by Nick. (Forum Super Moderator) from Coding. Nice Job!

~~Blob~~ · 19-02-2007, 11:13 AM

Originally Posted by Tom///

<a href="<A href="http://google.com">google</A">http://google.com">google</A>

[/SIZE]

Sorry but its
<a href="http://google.co.uk">GOogle</a>

Drompo · 19-02-2007, 12:36 PM

Also should be web design tuts.

Decode · 19-02-2007, 01:43 PM

Originally Posted by Drompo

Also should be web design tuts.

it wouldnt let me post there

~~Blob~~ · 19-02-2007, 03:00 PM

Originally Posted by Drompo

Also should be web design tuts.

It has to be moved there

Drompo · 19-02-2007, 03:47 PM

oops Forgot, Sorry

:Edzy · 20-02-2007, 04:06 PM

not a bad tutorial!

Joshll · 04-04-2007, 12:28 PM

Nice one. thanks for the tutorial.

=]

+Rep.

Mashi · 20-04-2007, 09:36 PM

Tacky But Tuting

koolkid2168 · 24-04-2007, 12:12 PM

Is there anyway you can upload these html files on piczo?

Thread: Basic HTML Tuturial

Thread Tools

Basic HTML Tuturial

piczo>

Posting Permissions