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 - A tag to go arround the whole HTML documentHTML Code:<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
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
http://img180.imageshack.us/img180/938/saveye2.png
__________________________________________________ _____
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:
Save it and refresh it in your internet browser.HTML Code:<html>
<head>
<title>My 1st Webpage!</title>
</head>
<body>
<H1>Big Text</h1>
Welcome to my 1st webpage!
</body>
</html>
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:
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.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>
The code should look something like this:
And in the web browser it should look something liek 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>
http://img219.imageshack.us/img219/1314/p1yx1.png
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:
: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 :sHTML 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>
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
And something like this in your web browser: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>
http://img227.imageshack.us/img227/4456/p2th7.png
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!
