LESSON
03 – HTML BASICS II
GROUP ACTIVITY GUIDE
TOPIC 1 –
Lesson 3 Folder
- Instructions
- Create a Lesson 3 folder.
- Copy your index.html file to it.
- Remove everything between the
body tags.
- Remove any attributes inside the
body tag.
TOPIC 2 –
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 3 –
Ordered Lists
- Switch the <ul> for <ol>. Do this in both tags. What happens?
TOPIC 4 –
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 5 –
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 6 –
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 7 –
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">
TOPIC 8 –
GETTING READY FOR FRAMES
- Instructions
- Create a new html document named
menu.html.
- After you have entered the html
template, add a background color.
- Add 4 links to your favourite
sites.
- The links should be one below
the other. You might need to use
the <br> take to specify line breaks.
TOPIC 9 –
FRAME SETUP
- Frames allow you to split your
screen up into different sections.
- Each section can then display a
different html page.
- To do this, you need to create a
special html document that is dedicated just to specifying the way in
which the screen is to be split up.
- The important tags in this
document will be the <frameset> tag and the <frame> tags.
- Strangely, this document has no
body tags at all.
- Here is a template you should
use:
<html>
<head><title>Whatever you want.</title>
</head>
<frameset
cols=”150,550”>
<frame src=”menu.html”>
<frame src=”index.html”>
</frameset>
</html>
- Note that in the template, we are
displaying the menu.html and the index.html files. You can display any file you want of
course.
TOPIC 10 – FRAME SETUP CUSTOMIZATION
- The cols attribute in the
frameset tag specifies that you will split the screen up into columns. The number of columns depends on the
amount of numbers in the list.
Example: Create 3 columns:
<frameset
cols="100,200,200">
The
above tag creates 3 columns. The first
will be 100 pixels wide. The other two
will be 200 pixels wide. If there are
more pixels to give, then they will be given to the last column.
- Instead of columns, you can
create rows. Simply use the rows
attribute instead.
Example: Create 4 rows:
<frameset rows="100,100, 200,
200">
- You can also specify sizes based
on percentages of the window.
<frameset
cols="25%, 75%">
TOPIC 11 –
FRAME NAMES
- Inside the <frame> tag, you
can give a name to your frame. This
is useful because you can then make links open in specific frames.
- The attribute is name. Give it any name you’d like.
Example
<frame src="index.html"
name="right">
- You can then later make a link
open into that frame by specifying the frame name in the target attribute
for that link.
Example: Here is a link that is in
menu.html. Note that added target
attribute.
<a href="http://google.ca"
target="right">GOOGLE</a>
TOPIC 12 –
FRAMES IN BOTH DIRECTIONS
- You can have a frameset file as a
frame in another frameset. This
allows you to specify the frames in two different locations. This allows you to create both vertical
and horizontal frames in one screen.
- You must be sure that none of the
frames have the same name – even if they are in different html files.