Learning Intentions:
To be able to: connect pages of a website together & link colours, add graphics (S)
To understand: the links between the HTML code for the webpage and graphics. (C)
To know: how to use HTML code to insert hyperlinks and graphics (K)
Success criteria:
Must: use notepad to create a simple splash page that includes a hyperlink to a homepage
Should: will independently change the HTML code to link colours
Could: will add graphic elements to the homepage
To be able to: connect pages of a website together & link colours, add graphics (S)
To understand: the links between the HTML code for the webpage and graphics. (C)
To know: how to use HTML code to insert hyperlinks and graphics (K)
Success criteria:
Must: use notepad to create a simple splash page that includes a hyperlink to a homepage
Should: will independently change the HTML code to link colours
Could: will add graphic elements to the homepage
Starter - create a folder called HTML - right click on the image and chose the "save image as" option, download and save these images into your HTML folder
Task 1: Copy & paste in this HTML code into a notepad file
<HTML>
<HEAD>
<TITLE> My Website: Homepage
</TITLE>
</HEAD>
<BODY>
<TABLE WIDTH=750 ALIGN=CENTER BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD WIDTH=250 VALIGN=TOP BGCOLOR=#AAAAFF>
<TABLE WIDTH=150 BORDER=0 BGCOLOR=#3366CC CELLSPACING=0 CELLMARGIN=1 ALIGN=CENTER>
<TR>
<TD ALIGN=RIGHT HEIGHT=22>
<FONT COLOR=WHITE FACE="arial" SIZE=4> Welcome to </FONT>
</TD>
</TR>
</TABLE
<P ALIGN=CENTER>
<FONT FACE="comic sans ms,arial" SIZE=5> <B> My Website </b> </FONT>
<BR>
</P>
<!—link menu shown in the left hand cell-->
<P ALIGN=LEFT>
<FONT FACE="arial">
<A HREF="homepage.html"> Homepage </A> <BR>
<A HREF="musicpage.html"> Music </A> <BR>
<A HREF="TVpage.html"> TV </A> <BR>
<A HREF="foodpage.html"> Food </A> <BR>
</FONT>
</P>
</TD>
<! - This is the right hand cell try to add the home icon in here -->
<TD VALIGN=TOP BGCOLOR=#3366CC>
<TABLE BGCOLOR=#3366CC CELLSPACING=1 BORDER=0 WIDTH=500>
</TD>
<TD ALIGN=RIGHT>
<FONT COLOR=WHITE FACE="ariel" SIZE=4>HOMEPAGE</FONT>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Save the file as: “Homepage.html and also save it as Homepage.txt” into your HTML folder
Open the webpage in internet explorer to see if it has worked. If you have been successful it will like the image above.
<HTML>
<HEAD>
<TITLE> My Website: Homepage
</TITLE>
</HEAD>
<BODY>
<TABLE WIDTH=750 ALIGN=CENTER BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD WIDTH=250 VALIGN=TOP BGCOLOR=#AAAAFF>
<TABLE WIDTH=150 BORDER=0 BGCOLOR=#3366CC CELLSPACING=0 CELLMARGIN=1 ALIGN=CENTER>
<TR>
<TD ALIGN=RIGHT HEIGHT=22>
<FONT COLOR=WHITE FACE="arial" SIZE=4> Welcome to </FONT>
</TD>
</TR>
</TABLE
<P ALIGN=CENTER>
<FONT FACE="comic sans ms,arial" SIZE=5> <B> My Website </b> </FONT>
<BR>
</P>
<!—link menu shown in the left hand cell-->
<P ALIGN=LEFT>
<FONT FACE="arial">
<A HREF="homepage.html"> Homepage </A> <BR>
<A HREF="musicpage.html"> Music </A> <BR>
<A HREF="TVpage.html"> TV </A> <BR>
<A HREF="foodpage.html"> Food </A> <BR>
</FONT>
</P>
</TD>
<! - This is the right hand cell try to add the home icon in here -->
<TD VALIGN=TOP BGCOLOR=#3366CC>
<TABLE BGCOLOR=#3366CC CELLSPACING=1 BORDER=0 WIDTH=500>
</TD>
<TD ALIGN=RIGHT>
<FONT COLOR=WHITE FACE="ariel" SIZE=4>HOMEPAGE</FONT>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Save the file as: “Homepage.html and also save it as Homepage.txt” into your HTML folder
Open the webpage in internet explorer to see if it has worked. If you have been successful it will like the image above.
Task 2: Copy & paste in this HTML code into a new notepad file
<HTML>
<HEAD>
<TITLE> My Website: Welcome </TITLE>
</HEAD>
<BODY>
<body bgcolor=#BBBBBB text=#FF0077>
<P ALIGN=CENTER>
<FONT SIZE=5 FACE="comic sans ms, ariel">Welcome to my Website</FONT>
<P ALIGN=CENTER>
<A HREF="homepage.html">
<IMG SRC="*****.jpg" WIDTH=120 HEIGHT=152> <BR >
<FONT FACE="arial">
Click here to go inside
</FONT>
</A>
</P>
<P ALIGN=CENTER> <FONT SIZE=3 FACE="ariel">
This is ****** Website<BR>
and is all about <BR>
</FONT>
<FONT SIZE=4 FACE="ariel">
My Favourite Music <BR>
My Hobbies <BR>
And my Family and Friends
</FONT>
</P>
</BODY>
</HTML>
Save the file as: “splashpage.html and splashpage.txt” 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?
Press the Back button to return to the splash page.
Task 3: Linking colours – You will add the HTML code coloured RED
Modify the <BODY> tag so it changes this line of code:
<body bgcolor=#BBBBBB text=#FF0077
For this
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!
………………………………………
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> (original code)
To WHITE
<TD WIDTH=250 VALIGN=TOP BGCOLOR=WHITE> (you need to make these changes)
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 changes this line of code:
<body bgcolor=#BBBBBB text=#FF0077
For this
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!
………………………………………
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> (original code)
To WHITE
<TD WIDTH=250 VALIGN=TOP BGCOLOR=WHITE> (you need to make these changes)
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