Help Files and Tutorials for Computer Users
Creating a Web Page with HTML      

Before starting, you should create a new folder for this project.

(See: Designing a Web Site)


HTML language uses "Tags" to communicate with a browser (Internet Explorer, Safari, etc.)  Tags usually occur in pairs, an opening tag, (in the form of <html>, and a closing tag, (in the form of </html>.  Notice that the closing tag has a "/".  Tags usually 'encapsulate' the information that they are referring to.  The <html> and </html> tags indicate to the browser that it is a web page.

Use a text editor to create the following simple web pages. 

 Windows: Use NotePad

 Mac: Use TextEdit   (Click here to see how to set up TextEdit for 'plain text' editing.

You will modify and add to it as you go along.  You may have to save the file as a ???.txt file, then rename it to a ???.htm or html file for it to open as a web page.  DO NOT use Appleworks to SAVE AS a .html file for this project.  You are "programming' using html code.  You are not using Appleworks or TextEdit to create the web page.  This might seem confusing.  Ask me for clarification if you need it.

<html>
<head>
<title>My Web Page</title>
</head>

 
<body>


This is (Put your name here)'s web page!


</body>
</html>

Save this file as  your_initial_last_name.html

Click here to see the example.

Use the "Open with" command to open it with Safari or the "Open File" command with Firefox. If you need to fine-tune your HTML code you can use right-click and Open with.. with either Notepad or TextEdit.


Now try using paragraph tags:

<html>
<head>
<title>My Web Page</title>
</head>

 
<body>

<p>This is (Put your name here)'s web page! </p>

<p>I just made two paragraphs.</p>


</body>


</html>

Click here to see the example.

Save the file again.  This time use the Save As command and save the file as  your_initial_last_name_2.html


Try the "underline" tags:

<html>
<head>
<title>My Web Page</title>
</head>

 
<body>

<p><u>This is (Put your name here)'s web page!</u></p>

<p>I just made two paragraphs.</p>


</body>


</html>

Click here to see the example.

Save the file again.  This time use the Save As command and save the file as  your_initial_last_name_3.html


Now try some more tags:

<html>
<head>
<title>My Web Page</title>
</head>

 <body>

<p><u>This is your web page!</u></p>

<p>I just made two paragraphs.</p>

<p><i>Try the italics tag.</i></p>

<p><b>Now BOLD!</b></p>

<center>This is how you center the text.</center>

</body>

</html>

Click here to see the example.

Save the file again.  This time use the Save As command and save the file as  your_initial_last_name_4.html


A "line break" <br> puts the next text on a new line.  It does not need a closing tag.

<html>
<head>
<title>My Web Page</title>
</head>

 <body>

<h1>Try a Big Heading</h1>

<p><u>This is your web page!</u></p>

<p>I just made two paragraphs.</p>

<p><i>Try the italics tag.</i></p>

<p><b>Now BOLD!</b></p>

<center>This is how you <br>center the text.</center>

</body>

</html>

Click here to see the example.

Save the file again.  This time use the Save As command and save the file as  your_initial_last_name_5.html


Now experiment with fonts and colours.  You can start a new web page, or keep modifying your existing one.

<html>
<head>
<title>My Web Page</title>

</head>

<body>

<font size="+4">Try this</font>

<font size="+1">Try this</font>

<font color="red">This is red!</font>

<font color="#ff0000">This is also red!</font>

<font size="+3" color="#00ff00">This is big and green!</font>

<p>This will leave a big &nbsp;&nbsp;&nbsp;&nbsp; space</p>

</body>

</html>

Click here to see the example.

Save the file again.  This time use the Save As command and save the file as  your_initial_last_name_6.html


Now for something trickier.  You can start new, or just add the new stuff to your existing page.

<html>
<head>
<title>My Web Page</title>

</head>

<body>

<font size="+2">I am creating a link!</font>

<a href="http://mycoolschool.ca">This links to my web site</a>

</body>

</html>

Click here to see the example.

Save the file again.  This time use the Save As command and save the file as  your_initial_last_name_7.html


Now try changing the background colors:

<html>
<head>
<title>My Web Page</title>

</head>

<body bgcolor="#FFD700" text="#000000">

<font size="+2">I am creating a link!</font>

<p>This is using picture as a link.  You will need an image file to do this</p>

<a href="http://mycoolschool.ca>
<img src="picture.jpg">
</a>

</body>

</html>

Click here to see the example.

Save the file again.  This time use the Save As command and save the file as  your_initial_last_name_8.html


This page has a "Table" added.

<html>
<head>
<title>My Web Page</title>

</head>

<body bgcolor="#FFD700" text="#000000">

<div align="center">
<center>
<table border="3" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="50%">
<tr>
<td width="100%">Table</td>
</tr>
</table>
</center>
</div>

</body>

</html>

Click here to see the example.

Save the file again.  This time use the Save As command and save the file as  your_initial_last_name_9.html

Now that you have mastered the basics, go on to the other help files.  Experiment with frames, tables, etc.

Hand in your folder, with all nine files, to the Drop Box. Make sure your name is on the folder.


Return to Home Page (more help files)

Go back...

T. Carson 2005

More Tips...