ComTech WebCourse - by Patrick Campeau

LESSON 02 WORK – HTML BASICS

GROUP ACTIVITY GUIDE

The teacher will lead the class to test out basic HTML tags and concepts. Here is what is to be covered:

TOPIC 1 – Intro to HTML

Stands for HyperText Mark-up Language
Understood by all computer types
Language that specifies where/how to place objects on the screen
File extension is HTML or HTM
An HTML file is simply a Text file

TOPIC 2 – Getting Started

· Instructions:

o Create a folder called Lesson 01

o Inside the folder, create a new text file

o Open it in Notepad

o Type in the HTML Template

§ Header section (explain title tag)

§ Body section – only one body tag!

o Save file

o Close Notepad

o Rename the file to index.html

o Now double click on the file. You should have a blank webpage up. The title in the blue bar at the top should match your tile.

TOPIC 3 – Making Changes

· Instructions:

o Open your html file in Notepad by right click on the file’s icon and choosing Open With > Notepad.

o Open the file with your browser by double clicking the icon.

o Now you have the file open in both. You can make changes in Notepad, save the file and then in your browser, hit refresh to see the changes.

o Test this by adding a sentence (anything) between the <body> tag and the </body> tag.

NOTE: You must always add content between the body tags. That is key!

TOPIC 4 – Changing Text

· Make use of the , and tags to bold, underline and italicize one word.

· Make use of the <center> tag to center a title for your page

TOPIC 5 – The font tag (Intro to attributes)

The requires that you use its attributes. It has 3 attributes: color, face, size
Note that the word color has no “u” in American spelling.
Use the color attribute to change the colour of one word.
Use the face attribute to make use of the arial font.
Use the size attribute to set the font size.

Example tag:

blah blah blah

TOPIC 6 – SPACING

In HTML, spacing is ignored. Therefore, if you have ten spaces between words, only one will show. Similarly, if you have many empty lines between two sentences, they will likely appear on the same line.
The tag forces a line break. It moves the cursor down one line. It has no closing tag.
To force spaces, you must use the hard space code:  
You can use the hard space code to force many spaces between words.

TOPIC 7 – Horizontal line

The <hr> tag has no closing tag. It is on its own.
Try the tag to see what it does.

Got extra time?

Two of this tag’s attributes are size and width. Can you figure out what they do?
Another attribute is align. Possible values are left, right and center. Try it.

TOPIC 8 – Background Colour

Repeat after me: There is only one <body> tag.
Inside that <body> tag, add the attribute bgcolor.
Set its value to a common colour such as blue, red, pink, green or black.

Example

Got extra time?

List of colors: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, pink and yellow.
In fact, there are way more colors including some funky names: Aquamarine, Cornflowerblue, BurlyWood, DarkKhaki, FireBrick, PaleVioletRed, Peru, PaleGoldenRod, MintCream, Tomato, ...
Want even more color options? Sure! Instead of putting a color name, put the following for the color value: rgb(#,#,#) where each # is a number between 0 and 255. More on this later.

TOPIC 9 – ADDING AN IMAGE

You must use either JPG or GIF. BMPs do not work all the time!
Save your images in the same folder as your html page.
Make use of the <img> tag.
You must specify the filename for the src attribute.
You can also specify the image’s height, width and border sizes.

Example

Got extra time?

Another attribute is alt. It’s value should be any words inside double quotes. Can you figure out what it does?

Example

TOPIC 10 – BACKGROUND IMAGE (TEXTURE)

A texture image is an image that can be tiled repeatedly on your screen to form a background. The best textures are usually the ones that appear to be seamless when they are tiled.
To add a background image, you could remove the bgcolor attribute from the body tag.
Inside the body tag, you will use the background attribute. Its value is the filename of the image.

Example

TOPIC 11 – CREATING A SECOND HTML FILE

One option is to restart and type the whole html template again.
Another option is to copy your current html file and then, in your new file, simply delete the content between the body tags.
Name the second file page2.html

TOPIC 12 – MAKING A LINK TO A WEBSITE

For some reason, the tag is called an <a> tag. It does have a closing </a> tag.
Between the tags, the text that will be the link appears.
You need to use href attribute. Its value is the complete url to the site. You should put it between double quotes.

Example

TOPIC 13 – MAKING A LINK TO ANOTHER PAGE

Again, you will use the <a> tag and the href attribute.
The attribute’s value is simply the file name of the html document. This assumes that both html documents are in the same folder.

TOPIC 14 – LINKING TO OTHER FILES

You can also make links to other files such as images, zip files, audio files and so on...

TOPIC 15 – IMAGES AS LINKS

An image can be a link. This is what a button is.
Simply place the image tag between the <a> of a link.

Example