How to write a basic HTML web Page
This tutorial shows you how to start using HTML, the simple language used to create Web pages, to create a basic web page. We recommend printing out this page so that you can work through the instructions step by step as you create your home page. Click here for a pdf version to print.
What you will need to start:
- A text editor such as Notepad, supplied with windows, is the smplest place to start and is free. Or an html editor such as Dreamweaver, Front Page, or Coffee Cup html Editor.
- A World Wide Web browser such as Internet Explorer. Firefox or Chrome
- An FTP program like FileZilla, Cute FTP or Flash FXP
Creating your Web page:
Step 1.
Start your text editor and create a new file
Step 2.
Type the following HTML statements into your file:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 //EN">
<HTML><HEAD><TITLE></TITLE></HEAD>
<BODY>
</BODY>
</HTML>
Q Fine. But what does it all mean?
A Every thing surrounded by < > is called a tag. These tags tell your Web browser how to display your web page.
- The <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 //EN"> should always be the first tag of any Web page
- The <HTML> tag shown at the top tells a Web browser program that this page contains HTML statements
- The <HEAD> tag starts the page's heading area
- The <TITLE> and </TITLE> tags give your page a title
- The </HEAD> tag indicates the end of the heading area
- The <BODY> tag starts the main area of the page. This is where you will type the contents of your Web page
- The </BODY> tag ends the main area of the page
- Finally the </HTML> tag ends the page
This is the basis for every Web page. Everything else is entered within this code.
Step 3.
You need to give your page a title. This is done by typing between the <TITLE></TITLE> tags.
Once you have given your page a title your file should look like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 //EN">
<HTML><HEAD><TITLE>My First Web Page</TITLE></HEAD>
<BODY>
</BODY>
</HTML>
Step 4.
Now your page has a title you need to add some text into the main body of the page. Using the guide below add some text into your Web page (be careful when entering the text to make sure you get all the tags correct and in the right place)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 //EN">
<HTML><HEAD><TITLE>My First Web Page</TITLE></HEAD>
<BODY>
<H1>My First Web Page</H1>
<P>This is the first Web Page I have ever created.
<UL>
<LH><B>My List of Hobbies</B></LH><BR>
<LI>My First Hobby
<LI>My Second Hobby
<LI>My Third Hobby
</UL>
<P>Now you can add some more information about yourself here.
</BODY>
</HTML>
Step 5.
Lets have a look at some of the new tags you have used:
- The <H1> and </H1> tags are used to turn text into a heading. H1 is the biggest and H6 is the smallest
- The <P> tag is used at the beginning of a paragraph. If you want to start a new line you can add the <BR> tag at the beginning of the line
- The <UL> and </UL> tags surround a list of items. The list can contain as many or as few items as you like. Each item in the list has an <LI> tag at the start and is displayed on a separate line with a bullet point (much like the items in this list)
Text on a Web page is automatically rearranged by the Web Browser it is being veiwed in. Paragraphs and New lines are placed correctly no matter how wide the Web Browser's page is.
Step 6.
Now use your editor to save the file as index.htm Your home page must be called index.htm to ensure that your home page is displayed when people use your URL (given to you when you registered). If there is no index.htm file present in your web space directory anyone visiting your pages will just see a list of files in your directory.
Step 7.
On your computer you now have a completed home page. You can check to see how it will appear to people reading it. To do this start Internet Explorer or Netscape and use the Open File option in the File menu. Find your index.htm file you just created, double click on the filename and your new Web page will be displayed in your Web Browser.
Step 8.
You can now try adding a background colour to your Web page. This is added to the <BODY> tag with the statement BGCOLOR="#FF0000". The #FF0000 is the colour Red. Green is #00FF00, Blue is #0000FF with White as #FFFFFF and Black as #000000. Colours inbetween can be made by changing the colours code.
Using the guide below add a background colour (Note that the spelling of colour is the American spelling COLOR)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 //EN">
<HTML><HEAD><TITLE>My First Web Page</TITLE></HEAD>
<BODY BGCOLOR="#FF0000">
<H1>My First Web Page</H1>
<P>This is the first Web Page I have ever created.
<UL>
<LH><B>My List of Hobbies</B></LH><BR>
<LI>My First Hobby
<LI>My Second Hobby
<LI>My Third Hobby
</UL>
<P>Now you can add some more information about yourself here.
</BODY>
</HTML>
The <BODY> tag also lets you specify a Background image instead of a colour if you want.
This is done by adding the statement BACKGROUND="XXXXXX", where XXXXXX is the file name of the image you want to use.
There will be more about adding images later.
We will also add some colour to the Heading text by adding the statement:
<FONT COLOR="#0000FF">
before the <H1> tag, with the tag </FONT> at the end of the line. This line should then look like this:
<FONT COLOR="#0000FF"><H1>My First Web Page</H1></FONT>
You could turn the text of the Header in to Italics by adding the tags <I> and </I> to the beginning and end of the Heading line like below:
<FONT COLOR="#0000FF"><I><H1>My First Web Page</H1></I></FONT>
Step 9.
At the moment all of your text is over to the left hand side of the page. You can tidy this up by placing the Header in to the center of the page. To do this you need to amend the Heading line to read:
<FONT COLOR="#0000FF"><CENTER><I><H1>My First Web Page</H1></I></CENTER></FONT>
Step 10.
The next thing we need to do is brighten the page up with an image.
Images are picture files that are saved in GIF or JPG format and stored on the server along with your Web pages.
To view an image on your web page you must tell the Web Browser where the image is located and what its file name is.
You do this by adding the following statement:
<IMG SRC="*******.gif">
Where *******.gif is the name of your image file.
Add this line into your index.htm file so that it reads as below.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 //EN">
<HTML><HEAD><TITLE>My First Web Page</TITLE></HEAD>
<BODY BGCOLOR="#FF0000">
<FONT COLOR="#0000FF"><CENTER><I><H1>My First Web Page</H1></I></CENTER></FONT>
<IMG SRC="*******.gif">
<P>This is the first Web Page I have ever created.
<UL ALIGN="RIGHT">
<LH><B>My List of Hobbies</B></LH><BR>
<LI>My First Hobby
<LI>My Second Hobby
<LI>My Third Hobby
</UL>
<P>Now you can add some more information about yourself here.
</BODY>
</HTML>
Note:If you get the name of your image file wrong it will be displayed as a broken icon on your Web page because the Web Browser could not find the image.
If you store your images in the same directory as your index.htm file you do not have to worry about putting directory paths into your <IMG SRC="*******.gif"> statement.
If you do place the image into a different directory you must state the full path in the SRC="*******.gif" part of the <IMG SRC="*******.gif"> statement.
We can make our image into a link for another Web page by adding what is called an ANCHOR tag to it.
Add the following to your image statement so that it reads:
<A HREF="nextpage.htm"><IMG SRC="*******.gif"></A>
You will notice that this gives your image a Blue border and when you place your mouse pointer over the image it changes so that you can click on it.
When clicked on, this will take you to the Web page called nextpage.htm as stated in the HREF="nextpage.htm" statement.
If you do not want to see the border around your image you can turn this off by adding a statement that reads BORDER="0" into the <IMG SRC="*******.gif"> tag as below.
<A HREF="nextpage.htm"><IMG SRC="*******.gif" BORDER="0"></A>
This BORDER statement can be used to add borders to any pictures just by changing the number that the statement equals.
For example, 0 would give your image no borders and 6 would give it a thick border.
The <A> and </A> tags can not only be used with images but also with text.
Adding the following line:
<P>Please click <A HREF="nextpage.htm">here</A>
would turn the word "here" in to a link for the file nextpage.htm.
Step 11.
Next you are going to add your email address to the bottom of the page. This, when clicked on, should open the person's email package ready to send you an email!
To do this you add the following statment:
<A HREF="mailto:test@test.co.uk">Email me by clicking here</A>
Where 'test@test.co.uk' is your email address.
By now your file should be looking like the one below:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 //EN">
<HTML><HEAD><TITLE>My First Web Page</TITLE></HEAD>
<BODY BGCOLOR="#FF0000">
<FONT COLOR="#0000FF"><CENTER><I><H1>My First Web Page</H1></I></CENTER></FONT>
<A HREF="nextpage.htm"><IMG SRC="*******.gif" BORDER="0"></A>
<P>This is the first Web Page I have ever created.
<P>Please click <A HREF="nextpage.htm">here</A>
<UL ALIGN="RIGHT">
<LH><B>My List of Hobbies</B></LH><BR>
<LI>My First Hobby
<LI>My Second Hobby
<LI>My Third Hobby
</UL>
<P>Now you can add some more information about yourself here.
<A HREF="mailto:test@test.co.uk">Email me by clicking here</A>
</BODY>
</HTML>
Step 12.
Finally you can add a table to your Web page. Tables are very useful and can be used for all kinds different tasks.
They are most useful for arranging text and pictures so that they all align nicely on the page.
At the moment your image is completely by its self on the page. You are going to create a very simple table so that you can have the image with a short piece of text neatly aligned next to it.
To do this you must first tell the Browser that you are going to use a table.
This is done with the <TABLE> tag. Rewrite your file so that it looks the same as the text below:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 //EN">
<HTML><HEAD><TITLE>My First Web Page</TITLE></HEAD>
<BODY BGCOLOR="#FF0000">
<FONT COLOR="#0000FF"><CENTER><I><H1>My First Web Page</H1></I></CENTER></FONT>
<CENTER><TABLE BORDER="1">
<TR>
<TD>
<A HREF="nextpage.htm"><IMG SRC="*******.gif" BORDER="0"></A>
</TD>
<TD>
<P>Do you like this picture? If you click on it it will take you to the next page.
</TD>
</TR>
</TABLE></CENTER>
<P>This is the first Web Page I have ever created.
<P>Please click <A HREF="nextpage.htm">here</A>
<UL ALIGN="RIGHT">
<LH><B>My List of Hobbies</B></LH><BR>
<LI>My First Hobby
<LI>My Second Hobby
<LI>My Third Hobby
</UL>
<P>Now you can add some more information about yourself here.
<A HREF="mailto:test@test.co.uk">Email me by clicking here</A>
</BODY>
</HTML>
As you can see your picture and some text are now inside a table.
Tables are made up of several tags. Here are what they all do:
- The <TABLE> tag tells the Web browser that the following information is going to be a table. The BORDER="1" part gives your table a border, if this was set to 0 the border would not be displayed
- The <TR> and </TR> tags stand for Table Row. This means that anything within these tags will be placed in one row of the table
- The <TD> and </TD> tags stand for Table Data. This means that anything inside of these tags will be placed in one column of the Table Row
- Finally the table is finished with the </TABLE> tag
Step 13.
Now that you have your page prepared you are ready to publish it on the WorldWide Web. To enable other people to see your page it must be uploaded to web space first.
Congratulations!
You have now created your first home page!
