Grade 11 Communication Technology

Learning Unit - Introduction to HTML

Software Requirements:

Notepad & Netscape Navigator or Internet Explorer

Outcomes:

Create a personal web-site using HTML.

Complete a written test on HTML

(Note - all work must be saved on your"G" drive and backed up on your"A" drive.)

To Do:

Day 1 - Overview & Your first Web-Page.

HTML Overview

  • "HTML" stands for Hypertext Markup Language.
  • Hypertext mean text stored in electronic form with cross-referenced linked between pages.
  • "HTML" or Hypertext Markup Language is a languge for describing how pages of text, graphics and other information are organized, formatted and linked together.
  • HTML pages are the standard interface to the Internet.
  • Approximately 100,000 new web pages are posted each day.
  • The Images on the net are generally .gif or .jpg
  • Images which appear to move are actually a series of gif.s which appear in sequence to give the effect of moving.
  • The web is on the verge of becoming a mass-market medium through high-speed Internet connections like TV cables, modern phone lines and direct satellite feeds. The cost of these devices is expected to fall sharply o ver the next few years.
  • HTML can be stored on a Intranet (private Internet) CD ROM or DVD (digital versatile disk) for high-speed presentations.
  • Once you save a file and use the "HTM or "HTML" extension, it is identified as a HTML document and you web browser will automatically attempt to read it.
  • There are two main types of HTML (HTML4 & XHTML - eXtensibleHTML). Because many people still use old browsers, we will learn code that is compatible with both current and future browsers.
  • These days, many people use a "WYSIWYG" (what you see is what you get) software to create web-sites. These software include Microsoft Frontpage and Dream Weaver as well as the local software at Angelfire, Geocities etc...
  • Everything on the web is based on HTML.

Your First Page

  • Tags are words that tell the browser how to display something. Tags are displayed between these type of brackets <>. <your tag goes here>
  • Most tags start with and opening tag <> and must end with a closing tag </>
  • 4 Tags which every HTML document must have are:

<html> This says that this is a HTML document </html>

<head> </head>

<title> This is the title that will appear in the bookmarks </title>

<body> This is what information will appear on the page </body>

Creating a simple web-page

<html>

<head>

<title> Your Name Here Day 1A</title>

</head>

<body>

When dreaming I'm guided through another world

Time and time again

At sunrise I fight to stay asleep

'cause I don't want to leave the comfort of this place

'Cause there's a hunger, a longing to escape

From the life I live when I'm awake

</body>

</html>

Notice the lack of line breaks

Inserting paragraphs and line breaks

Paragraphs use the paragraph tag <p> and end with the </p>

Line break tags <br />are inserted at the point where you want the text to wrap

<html>

<head>

<title> Your Name Here Day 1B</title>

</head>

<body>

<p>

When dreaming I'm guided through another world <br />

Time and time again <br />

At sunrise I fight to stay asleep <br />

'cause I don't want to leave the comfort of this place <br />

</p>

<p>

'Cause there's a hunger, a longing to escape <br />

From the life I live when I'm awake <br />

</p>

</body>

</html>

Day 2 -Horizontal Rulers, Headings and Links

Document 1: The "Your Name Goes Here" Web Page janedoe.html
Document 2: My History myhistory.html
Document 3: My Interests myinterests.html
Document 4: My Plans myplans.html
Document 5: lists lists.html
Document 6: My Favourite Links myfavouritelinks.html
Document 7: My Home myhome.html

Here is what the code first page should look like:

<html><head>

<title> The Peter Nelson Web Page</title>

</head>

<body> The Peter Nelson Web Page

</body> </html>

Headings

Headings can make the selected text appear much larger or smaller than the default size

The tags for the 6 sizes of headings are: <h1><h2><h3><h4><h5><h6>

They end with: </h1></h2></h3></h4></h5></h6>

I would make "The Peter Nelson Home Page" large, by writing it as such in the HTML document: <h1>The Peter Nelson Home Page</h1>

Horizontal Rulers

You can create a straight line across your page by inserting a horizontal rule as such: <hr />

Links

An absolute link is a link to any page anywhere on the Internet

Links are the text or graphic you click in order to jump to another web page. They are created by using an anchor <a> as such:

If I want to jump to the Manitoulin .com page. I would do it like this:

Click<a href="http://www.manitoulin.com/"> here </a>to go to Manitoulin.com

<a> Means this is an anchor

href= Gives the address to jump to

</a> Ends the anchor

Notice the Quotation marks - They are necessary

A relative link is a link to any page on your own site

They are also created by using an anchor <a> as such:

If you want to jump to your "My Interests. page". You would do it like this:

<a href="my interests.html/"> Click here to see my interests</a>

<a> Means this is an anchor

href= Gives the address to jump to

</a> Ends the anchor

Notice the Quotation marks - They are necessary

For a link to work to a page on your site, both html documents must be in the same directory or on the same disk

My History

My Interests

My Plans

My Lists

My Favourite Links

My Home

Eg:

<html>

<head>

<title> The Peter Nelson Web Page</title>

</head>

<body>

<h1>The Peter Nelson Web Page</h1>

<p> Click <a href="myhistory.html">here </a>to see my history </p>

</body>

</html>

the URL is:"http://www.manitoulin.com/"

Days 3 -Text Alignment and Lists

Paragraphs can be aligned by using an attribute inside the <p> tag

<p align="left"> </p> aligns left

<p align="right"> </p> aligns right

<p align="center"> </p> aligns center

Again use complete sentences

There are three types of lists in HTML and each line or item in a list starts with <li> and ends with a </li>. Here are the three types of lists:
The bulleted list is called an "Unordered List"

It opens with a <ul> and closes with a </ul>

Bullets are created at each <li>

The "Numbered List" opens with a <ol> and closes with a </ol>

Numbers are created at each <li>

The "Definition List" is for a list of term and their meanings

The "Definition Term" <dt> goes in front of each term to be defined </dt>

The "Definition Definition" <dd> goes in front of each definition.</dd>

Line breaks and indentations appear automatically.

You are to create an html document which uses unordered, ordered and definition lists. Here is an example of the three types of lists:

.

The code I used for this document looks like this:

<html><head><title> My Friends</title> </head>

<body>

All teens on The Island (Especially Silverwater) follow this basic code of conduct:

<ul>

<li>Wait for her acknowledging bow before tipping your hat.</li>

<li>Use the hand farthest from her to raise the hat.</li>

<li>Walk with her if she expresses a wish to converse; Never make a lady stand talking in the street.</li>

<li>When walking, the lady must always have the wall.</li>

</ul>

Recourse for a Lady Toward Unpleasant Men Who Persist in Bowing

<ol>

<li>A simple stare of iciness should suffice in most instances.</li>

<li>A cold bow discourages familiarity without offering insult.</li>

<li>As a last resort: "Sir, I have not the honour of your aquaintance."</li>

</ol>

Proper Address of Royalty

<dl>

<dt>Your Majesty</dt>

<dd>To the king or queen.</dd>

<dt>Your Royal Highness</dt>

<dd>To the monarch's spouse, children, and siblings.</dd>

<dt>Your Highness</dt>

<dd>To nephews, nieces, and cousins of the sovereign.</dd>

</dl>

</body></html>

Day 4 -Formatting

HTML Tags that add special formatting to text

<small> Small Text

<big> Big Small Text

<sup> Superscript Small

<sub> Subscript Small

<strike> Strikethrough Small (draws a line through text)

<u> Underline Small

<em> or <i> Emphasized (italic) text

<strong> or <b> Strong (bold face) text

<tt> Monospaced Small typewriter text

<pre> Monospaced small font (* this preserves your spaces and breaks from note-pad)

1) Open "myhistory.html". Document

This paragraph and list must use an example of each formatting style from the list above.

Try to create an advertizement or some interesting slogan that suits the formatting. The more creative - the better!!!

Here is my example.

When viewed with a browser, the section looks like this:

When viewed as code, my example looks like this:

<html><head><title> My History</title></head>

<body>

<p><h1>My History<p></h1>

<u>New</u> <sup>high</sup><strong>octane</strong>

tea<sub>ch</sub>er <em>plus</em> will <strike>teach</strike>

any student, <big>big</big> or <small>small</small>.<br />

Look for new <sup>Super</sup><b>Strength</b> tea<sub>ch</sub>er

<i>plus</i> in a classroom near you.

<p><h6>Offer Valid until Jun2001</h6> </p>

<pre>

Patience Grams Mental

/Student of Fat Focus

Good Day 3 100 150%

Fair 2 100 75%

Bad Day 1 100 02%

Sick Day 0 100 0%

</pre>

</body></html>

Day 5 Font Face, Colour & Size

<font> </font> is the tag to change the colour, size and face of the text font

The attributes are:

Size=" " A value from "1" to "7" can be entered. "3" is the default value.

Colour=" " Changes the colour of the text. The available colours are "black""white""red""green'"teal""blue""yellow""magenta"cyan""purple""grey""lime"

"navy" "olive" "silver " "maroon".

face=" " changes the font. You must type in the name of a font which is available on your computer. (The font name must be spelled exactly right)
To change the word "you" to would approach it as such:

<font size="7" color="red" face="Times New Roman> you </font>

You can find the fonts available on your computer by opening a word processor and previewing the fonts.

Humble Beginnings -

Yes it is hard to believe that Your Name Here, the worlds greatest _____________ ever, had her/his humble beginnings in __________, Ontario. Her/ his genius began to show at the early age of two years when he/she ______________________. At the age of ten he/she went on to _______________________ and claim the title as the undisputed champion of ___________. In her/his early teens he/she took up the following activities ______________, _____________ and __________________. To mr/ms Your Last Name surprise he/she was amazing at those things too. There he/she was, a young person in her/his teens - so young but so good. It was at this point that Your Name decided that a career in ______________ was the best option. Now here she/he sits the world's very best _________________.

When interviewed ms/mr Your Name said "quote me on this" "I am not only not only immensely talented but I am very very humble too!!"

Interviewed by an Admiring Fan

Day 6 - E-mail Links

An E-mail link uses and anchor <a> with the following attribute href= "mailto: "

For example, if you want to have a person click the words "click here" to send an E-mail, to peternel@amtelecom.net, you would do the following:

If you want to send me mail < A href="mailo:peter@amtelecom.net" > click here < / a>

Notice the quotation marks - they are essential.

Here's roughly what it should look like:

Here's the code I used:

<html>

<head>

<title>My Interests</title>

</head>

<body>

<div align="center"><h2> Here are the E-mail addresses of a few people I know

</h2> </div>

<ul>

<li><a href="mailto:townend@kpmg.ca"> Bob Townend </a></li>

<li><a href="mailto:ason5@hotmail.com"> John Smithn </a></li>

<li><a href="mailto:rob.hender@londonlife.com"> Bob Henderson </a></li>

<li><a href="mailto:hasji@hotmail.com"> Billy King </a></li>

<li><a href="mailto:zzgordon@onlink.net"> Gord Gordon </a></li>

<li><a href="mailto:adidias75@rocketmail.com"> Frank Franklin </a></li>

<li><a href="mailto:zdark58@yahoo.com"> Paul Pondersome </a></li>

<li><a href="mailto:hhmacneil@excite.com"> Harry MacNeil </a></li>

</ul>

<p> This person is very talented lyricist. Her name is

<a href="mailto:sherrie@sheriedavis.net"> Sherrie Davis </a>. She lives in Garland Texas

and is the editor of the Dallas Songwriter's Association. Not only is she a great lyricist,

but she is a very considerate and understanding person. One of her many strengths is her

tennacity. When the "chips are down", she is in for the entire game and never quits till

it's done. These are just a few reasons why I am her friend and I am glad she is a friend

of mine.

</body>

</html>

Day 7 - Graphics

<IMG> Displays a graphics image on the page.

SRC="..." The address or file name of the image.

ALT="..." A text message that may be displayed in place of the image.

ALIGN="..." Determines the alignment of the given image. If LEFT or RIGHT, the image is aligned to the left or right column, and all following text flows beside that image. All other values, such as TOP, MIDDLE, BOTTOM, ABSMIDDLE, or ABSBOTTOM, determine the vertical alignment of this image with other items in the same line.

If you want an image called "me.jpg" to sit on the right side of the page, you would do it as such: <img src="me.jpg" align="right" alt="picture of me" />

Here is a sample from the 24 hour HTML Café:

Here is the code :

<HTML><HEAD><TITLE>The Olivers and Their House</TITLE></HEAD>

<BODY>

<DIV ALIGN="center">

Deep in the wilds of Elmore, Vermont lies the lair

of the rare and secretive <I>Familia Oliveria</I>.<P>

<IMG SRC="house.jpg" ALT="Our Humble Abode"></DIV>

<IMG SRC="dicko.gif" ALIGN="left" ALT="Dick">

Each winter, the male of the species disappears into

his octagonal office <I>(left)</I>, and comes out only

for skiing, sliding, and trips to the mailbox.

<IMG SRC="jano.gif" ALIGN="right" ALT="Jan">

The female and young dwell in the main house <I>(right)</I>,

though she occasionally switches places with the male to

ship orders in the office while he cooks exotic food and

attends to the offspring. Once each week, local residents

have the rare opportunity to spot the elusive Olivers as

they gather food in their aging Toyota.

</BODY></HTML>

Day 8 Images that are Hyper-Links

Images that are Hyperlinks:

Are the same as regular hyperlinks except that an image replaces the word.

  • If it is a word hyperlink it would be: <a href="www.kanservu.ca">click here </a>
  • If it were an image hyperlink, it would be <a href="www.kanservu.ca"><img src="kanservu.gif" /> </a>

The Code for this page looks like this:

Day 9 - Backgrounds and Colours

Tags to Alter a Body of Text

<BODY>...</BODY> Encloses the body (text and tags) of the HTML document.

BACKGROUND="..." The name or address of the image to tile on the page background.

BGCOLOR="..." The color of the page background.

TEXT="..." The color of the page's text.

LINK="..." The color of unfollowed links.

ALINK="..." The color of activated links.

VLINK="..." The color of followed links.

I could make a page where (the background uses a tiled image called logo.gif, the text is green, the unfollowed links are yellow and the active links are white and the followed links are lime) like this

<body background="logo.gif" text="green" link="yellow" vlink="lime">

text goes here

</body>

Complementary Colours

http://hort.ifas.ufl.edu/TEACH/floral/color.htm

- You can use a background image rather than a colour if you like.(be sure to "washout"(lighten) your images in Paint Shop Pro)

Day 10- Tables

Tables Basics

<TABLE>...</TABLE>

Creates a table that can contain any number of rows (<TR> tags).

<TH>...</TH>

Defines a table heading cell. (Takes all the same attributes as <TD>.)

<TR>...</TR>

Defines a table row, containing one or more cells (<TD> tags).

<TD>...</TD>

Defines a table data cell.

BORDER="..."

Indicates the width in pixels of the table borders. (BORDER=0, or omitting the

BORDER attribute, makes borders invisible.)

If you wanted this table:

The Code would be:

<html>

<head><title>Tables</head></title>

<body>

<table border="2">

<tr>

<th>Writing</th>

<th>Recording</th>

<th>Guitar</th>

</tr>

<tr>

<td>Lyricline</td>

<td>Pro Recording</td>

<td>Guitar College</td>

</tr>

<tr>

<td> Jason Blume</td>

<td>Steinberg.ca</td>

<td>Line 6</td>

</tr>

</table></div>

</p>

</body>

</html>

Getting Fancy With Tables

CELLSPACING="..."

The amount of space between the cells in the table.

CELLPADDING="..." The amount of space between the edges of the cell and its contents.

WIDTH="..."

The width of the table on the page, in either exact pixel values or as a percentage of

page width.

BGCOLOR="..."

Background color of all cells in the table that do not contain their own

BACKGROUND or BGCOLOR attribute.

BACKGROUND="..."

Background image to tile within all cells in the table that do not contain their own

BACKGROUND or BGCOLOR attribute (Microsoft Internet Explorer only).

ALIGN="..."

The horizontal alignment of the contents of the cells within this row. Possible values

are LEFT, RIGHT, and CENTER.

VALIGN="..."

The vertical alignment of the contents of the cells within this row. Possible values are

TOP, MIDDLE, and BOTTOM.

BGCOLOR="..."

Background color of all cells in the row that do not contain their own

BACKGROUND or BGCOLOR attributes.

BACKGROUND="..."

Background image to tile within all cells in the row that do not contain their own

BACKGROUND or BGCOLOR attributes. (Microsoft Internet Explorer only)

ALIGN="..."

The horizontal alignment of the contents of the cell. Possible values are LEFT,

RIGHT, and CENTER.

VALIGN="..."

The vertical alignment of the contents of the cell. Possible values are TOP, MIDDLE,

and BOTTOM.

WIDTH="..."

The width of this column of cells, in exact pixel values or as a percentage of the table width. BGCOLOR="..."

Background color of the cell.

ROWSPAN="..."

The number of rows this cell will span.

COLSPAN="..."

The number of columns this cell will span.

Here's another example where links are inserted into the cells and the table is centered

Here is the code I used to do this:

<html>

<head><title>Links</head></title>

<body>

<h1><div align="center">Links</h1>

<p><h2>Here are some links that have been very useful to me: </h2></p>

<table border="4" cellpading="2" cellspacing="2">

<tr>

<th><h1>Writing</h1></th>

<th><h1>Recording</h1></th>

<th><h1>Guitar</h1></th>

</tr>

<tr>

<td><b><a href="http://www.lyricalline.com/">Lyricline</a></b></td>

<td><b><a href="http://www.prorec.com/prorec/prorec.nsf">Pro Recording</a></b></td>

<td><b><a href="http://www.guitarcollege.com/">Guitar College</a></b></td>

</tr>

<tr>

<td><b><a href="http://www.jasonblume.com/"> Jason Blume</a></b></td>

<td><b><a href="http://www.ca.steinberg.net/">Steinberg.ca</a></b></td>

<td><b><a href="http://www.line6.com/main/main.cfm">Line 6</a></b></td>

</tr>

</table></div>

</body>

</html>

a) there are 3 headings and 4 rows

b) the categories you chose are the 3 <th> table headings

c) your links make up the table data

Day 11 + 12 Homework - Completing your Webpage

Day 12 - Unit Test

Take your unit test in the last 30 minutes of class time

Day 13 - Marking

If you enjoyed this unit and want to become better, here are some Resources