Learning Intentions
TBAT: connect pages of a website together, link colours, and add graphics (S) To know: how to use HTML code to insert hyperlinks and graphics (K) |
Keywords
|
Starter
write the keywords down on the spelling activity sheet given to you by your teacher. Look at the words carefully, you will be asked to re-write them in a few minutes.
Quick recap:
We have been working and creating webpages in HTML for a few lessons let's see what you can remember.
Open and save this document, then complete the first part to show what you have learnt about HTML so far.
We have been working and creating webpages in HTML for a few lessons let's see what you can remember.
Open and save this document, then complete the first part to show what you have learnt about HTML so far.
Elements to download
You will need to download each of the elements below and save them to your HTML folder so that you can use them in your webpage
Power point
Task 1
Group 1
You will need to click on the link to the notepad file and save the file as: “Hompage.html” into your HTML folder |
Group 2
You will need to copy and paste the code from this word document into a notepad file and save the file as: “Hompage.html” into your HTML folder |
Next open the webpage in internet explorer to see if it has worked, screen shot your page and add annotations to explain what you have done.
TASK 2
Group 1
You will need to click on the link to the notepad file and save the file as: “splashpage.html” into your HTML folder |
Group 2
You will need to click on the link to the word document and save the file as: “splashpage.html” into your HTML folder |
Test your hyperlink ;
Open the webpage in internet explorer – Click on the text
“Click here to go inside”
has it worked?
Open the webpage in internet explorer – Click on the text
“Click here to go inside”
has it worked?
Press the Back button to return to the splash page.
Screen shot your page and remember to add your comments
Screen shot your page and remember to add your comments
Task 3: Linking colours – You will add the HTML code coloured RED
Modify the <BODY> tag so it reads like this:
<body bgcolor=#BBBBBB text=#FF0077
LINK=#FF0077 ALINK=#FF0000 VLINK=#FF0055>
……………………………………
Save your work, again then open it in Internet Explorer to view your page.
Click on the link and see what happens. Take some screen shots and add comments to show your progress
………………………………………
Task 4: Adding graphics – open up the Homepage.HTML file in notepad
Change the background colour from #AAAAFF
<TD WIDTH=250 VALIGN=TOP BGCOLOR=#AAAAFF>
To WHITE
<TD WIDTH=250 VALIGN=TOP BGCOLOR=WHITE>
Next add this code to the left cell of the main table to add a divide graphic under the words “My Website”
<P ALIGN=CENTER>
<FONT FACE="comic sans ms,arial" SIZE=5> <B> My Website </b> </FONT>
<BR>
<IMG SRC="divide.jpeg">
Now add another divide graphic under the menu list – you will need to add a paragraph tag too.
<P ALIGN=CENTRE>
<IMG SRC="divide.jpeg">
</P>
</TD>
Next add button graphics to each of the hyperlinks in the menu
<!--menu -->
<P ALIGN=LEFT>
<FONT FACE="arial">
<A HREF="homepage.html">
<IMG SRC="blue button 1.jpeg" ALIGN=MIDDLE BORDER=0>
Homepage </A> <BR>
Save the “Homepage.HTML and refresh your webpage, how does it look?
You will need to add the code to each of the links in the menu
Extension – Try to add a Home icon to the right hand cell of the table of your homepage and then add your name to the splash page
(tip) look for code that has ***** in it
Modify the <BODY> tag so it reads like this:
<body bgcolor=#BBBBBB text=#FF0077
LINK=#FF0077 ALINK=#FF0000 VLINK=#FF0055>
……………………………………
Save your work, again then open it in Internet Explorer to view your page.
Click on the link and see what happens. Take some screen shots and add comments to show your progress
………………………………………
Task 4: Adding graphics – open up the Homepage.HTML file in notepad
Change the background colour from #AAAAFF
<TD WIDTH=250 VALIGN=TOP BGCOLOR=#AAAAFF>
To WHITE
<TD WIDTH=250 VALIGN=TOP BGCOLOR=WHITE>
Next add this code to the left cell of the main table to add a divide graphic under the words “My Website”
<P ALIGN=CENTER>
<FONT FACE="comic sans ms,arial" SIZE=5> <B> My Website </b> </FONT>
<BR>
<IMG SRC="divide.jpeg">
Now add another divide graphic under the menu list – you will need to add a paragraph tag too.
<P ALIGN=CENTRE>
<IMG SRC="divide.jpeg">
</P>
</TD>
Next add button graphics to each of the hyperlinks in the menu
<!--menu -->
<P ALIGN=LEFT>
<FONT FACE="arial">
<A HREF="homepage.html">
<IMG SRC="blue button 1.jpeg" ALIGN=MIDDLE BORDER=0>
Homepage </A> <BR>
Save the “Homepage.HTML and refresh your webpage, how does it look?
You will need to add the code to each of the links in the menu
Extension – Try to add a Home icon to the right hand cell of the table of your homepage and then add your name to the splash page
(tip) look for code that has ***** in it