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
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.
|
