LESSON
01 – REVIEW OF HTML
WORK
The teacher will lead the
class to test out basic HTML tags and concepts. Here is what is to be covered: LESSON 01 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
<b>, <u> and <i> 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 <font> 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:
<font color= "blue"
face="arial" size="3">blah blah blah</font>
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 <br> 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
<body
bgcolor="pink">
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
<img
src="sensLogo.jpg" height=200 border=1>
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
<img src="sens.jpg"
alt="Go Sens Go">
|
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
<body
background="bgimage.jpg">
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
<a
href="http://www.lockerby.net/">Text Link</a>
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
<a
href="page.html"><img src="image.jpg"></a>
TOPIC 16 – Bulleted Lists
- Create an unordered list structure using the
<ul> and </ul> tags.
- Inside, place as many list items as you
want. Each one should start with
an <li> tag.
- Suggested organization:
<ul>
<li>Red
<li>Green
<li>Blue
</ul>
TOPIC 17 – Ordered Lists
- Switch the <ul> for <ol>. Do this in both tags. What happens?
TOPIC 18 – Opening Link
In New Window
- You can make a link open in a new window. To do this, you simply add the target
attribute in the <a> tag.
It’s value has to be set to “_blank”.
Example:
<a
href="http://www.google.ca/"
target="_blank">Google</a>
TOPIC 19 – Marquee
<marquee>I
love Lockerby. I love Mr.
Campeau.</marquee>
Got extra time?
- Try
playing with the behavior attribute. Set it to either scroll, slide or alternate.
- Try
playing with the direction attribute. Set it to left, right, up or down.
- Try
playing with the scrollamount attribute. Set it to an number such as 5.
|
TOPIC 20 – Tables
- A table structure starts and ends with
<table> tags.
- Be sure to set the table’s border attribute to 1
so that you can see the border.
- Inside the table, you have rows which start and
end with <tr> tags.
- Inside the rows, you have divisions which start
and end with <td> tags.
- Here is the code for a simple 4 x 4 table:
<table
border=1>
<tr>
<td>Cell
1</td>
<td>Cell
2</td>
</tr>
<tr>
<td>Cell
3</td>
<td>Cell
4</td>
</tr>
</table>
- Can you make the table be 3 by 3?
- Do you know how to bold the text in a cell?
- A cell that is empty looks weird. To give it its normal look, add the
code for a hard space:
Got extra time?
- You
can add the bgcolor attribute to a td tag to set the background colour
of that specific cell.
- You
can use the width attribute in the td tag to specify the cell’s width.
|
TOPIC 21 – USING A MEDIA
FOLDER
- Inside the lesson2 folder, create a folder
called images.
- Place an image in it.
- Make the image appear on your webpage. This requires that you specify the
images folder in the tag.
<img
src="images/image.jpg">
- Can you figure out how to display an image that
is in the lesson1 folder? To show
that you go up a folder level, you need to put a .. there.
<img
src="../lesson1/image.jpg">