Creating a Web Page with HTML      

There are several options availabe for creating a web page, but a basic knowledge of HTML can be really beneficial in both understanding what is going on behind the scenes, and to allow you to make any changes to your site. These tutorials don't promise to make you an expert, but they will give you a basic understanding.

(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 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://www.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://www.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.
Return to Home Page(more help files)
© T. Carson 2021