Web Design (HTML Basics)

Procedure to open / view / modify / save HTML code

Lesson 1

Purpose: students will be able to create folders, create the title, heading, and a body for a web page using HTML coding, and save a web page.

  1. create folder>name: web>open web folder
  2. create folder>name: images
  3. open notepad
  4. type in code
  5. <HTML>

<HEAD>
<TITLE>
My Page
</TITLE>
</HEAD>

<BODY>
<H3>WELCOME to My Web Page</H3>
</BODY>

</HTML>
  6. file>save as>file name: index.htm>save as type: all files*.*>s: drive>it10>it10(your class)(d or f)>your folder>web folder>open>save

Lesson 2

Purpose: students will be able to create a table using HTML coding.

  1. Internet Explorer>open>file>open>browse>s: drive>it10>it10(your class)(d or f)>your folder>web folder>open>index.htm>open
  2. View source
  3. <HTML> 
<HEAD> 
<TITLE>
My Page
</TITLE> 
</HEAD> 

<BODY>      
<H3>WELCOME to My Web Page</H3> 

<TABLE WIDTH="75%" BORDER="1">

<TR>
<TD>NAME</TD>
<TD>KENNETH KIM</TD>
</TR>

<TR>
<TD>Grade</TD>
<TD>12 plus</TD>
</TR>

<TR>
<TD>MY ASTROLOGICAL SIGN</TD>
<TD>Gemini</TD>
</TR>

</TABLE>

</BODY>
</HTML>
  4. file>save as>file name: index.htm>save as type: all files*.*>s: drive>it10>it10(your class)(d or f)>your folder>web folder>open>save

Lesson 3

Purpose: students will be able to create two additional rows using HTML coding.

  1. Internet Explorer>open>file>open>browse>s: drive>it10>it10(your class)(d or f)>your folder>web folder>open>index.htm>open
  2. View source
  3. <HTML> 
<HEAD> 
<TITLE>
My Page
</TITLE> 
</HEAD> 

<BODY>      
<H3>Welcome to My Web Page</H3> 

<TABLE WIDTH="75%" BORDER="1">

<TR>
<TD>NAME</TD>
<TD>KENNETH KIM</TD>
</TR>

<TR>
<TD>GRADE</TD>
<TD>12 PLUS</TD>
</TR>

<TR>
<TD>MY ASTROLOGICAL SIGN</TD>
<TD>GEMINI</TD>
</TR>

<TR>
<TD>ANIMAL I RESEMBLE MOST</TD>
<TD>MONKEY</TD>
</TR>

<TR>
<TD>REASONS WHY I RESEMBLE A MONKEY</TD>
<TD>I AM EASILY DISTRACTED AND CAN'T SIT STILL.</TD>
</TR>

</TABLE>

</BODY>
</HTML>
  4. file>save as>file name: index.htm>save as type: all files*.*>s: drive>it10>it10(your class)(d or f)>your folder>web folder>open>save

Lesson 4

Purpose: students will be able to insert an image using HTML coding.

  1. Internet Explorer>open>file>open>browse>s: drive>it10>it10(your class)(d or f)>your folder>web folder>open>index.htm>open
  2. View source
  3. <HTML> 
<HEAD> 
<TITLE>
My Page
</TITLE> 
</HEAD> 

<BODY>      
<H3>Welcome to my Web Page</H3>

<DIV ALIGN="CENTER">
<IMG SRC="IMAGES/ANIMAL.JPG" WIDTH="256" HEIGHT="172">

<TABLE WIDTH="75%" BORDER="1">

<TR>
<TD>NAME</TD>
<TD>KENNETH KIM</TD>
</TR>

<TR>
<TD>GRADE</TD>
<TD>12 PLUS</TD>
</TR>

<TR>
<TD>MY ASTROLOGICAL SIGN</TD>
<TD>GEMINI</TD>
</TR>

<TR>
<TD>ANIMAL I RESEMBLE MOST</TD>
<TD>MONKEY</TD>
</TR>

<TR>
<TD>REASONS WHY I RESEMBLE A MONKEY</TD>
<TD>I AM EASILY DISTRACTED AND CAN'T SIT STILL.</TD>
</TR>

</TABLE>

</DIV>

</BODY>
</HTML>
  4. file>save>refresh

Lesson 5

Purpose: students will be able to create text hyperlinks, table cell spacing and cell padding using HTML.

  1. Internet Explorer>open>file>open>browse>s: drive>it10>it10(your class)(d or f)>your folder>web folder>open>index.htm>open
  2. View source
  3. <HTML> 
<HEAD> 
<TITLE>
My Page
</TITLE> 
</HEAD> 

<BODY>      
<H3>I Am An Animal!</H3>

<DIV ALIGN="CENTER">
<IMG SRC="IMAGES/ANIMAL.JPG" WIDTH="256" HEIGHT="172">

<TABLE WIDTH="75%" BORDER="1">

<TR>
<TD>NAME</TD>
<TD>KENNETH KIM</TD>
</TR>

<TR>
<TD>GRADE</TD>
<TD>12 PLUS</TD>
</TR>

<TR>
<TD>MY ASTROLOGICAL SIGN</TD>
<TD>GEMINI</TD>
</TR>

<TR>
<TD>ANIMAL I RESEMBLE MOST</TD>
<TD>MONKEY</TD>
</TR>

<TR>
<TD>REASONS WHY I RESEMBLE A MONKEY</TD>
<TD>I AM EASILY DISTRACTED AND CAN'T SIT STILL.</TD>
</TR>

</TABLE>

<TABLE WIDTH="75%" BORDER="1" CELLPADDING="1" CELLSPACING="1">

<TR>

<TD><A HREF="IT10DST01.HTM">01</A></TD>
<TD><A HREF="IT10DST02.HTM">02</A></TD>
<TD><A HREF="IT10DST03.HTM">03</A></TD>
<TD><A HREF="IT10DST04.HTM">04</A></TD>
<TD><A HREF="IT10DST05.HTM">05</A></TD>
<TD><A HREF="IT10DST06.HTM">06</A></TD>
<TD><A HREF="IT10DST07.HTM">07</A></TD>
<TD><A HREF="IT10DST08.HTM">08</A></TD>
<TD><A HREF="IT10DST09.HTM">09</A></TD>
<TD><A HREF="IT10DST10.HTM">10</A></TD>

</TR>

<TR>

<TD><A HREF="IT10DST11.HTM">11</A></TD>
<TD><A HREF="IT10DST12.HTM">12</A></TD>
<TD><A HREF="IT10DST13.HTM">13</A></TD>
<TD><A HREF="IT10DST14.HTM">14</A></TD>
<TD><A HREF="IT10DST15.HTM">15</A></TD>
<TD><A HREF="IT10DST16.HTM">16</A></TD>
<TD><A HREF="IT10DST17.HTM">17</A></TD>
<TD><A HREF="IT10DST18.HTM">18</A></TD>
<TD><A HREF="IT10DST19.HTM">19</A></TD>
<TD><A HREF="IT10DST20.HTM">20</A></TD>

</TR>

<TR>

<TD><A HREF="IT10DST21.HTM">21</A></TD>
<TD><A HREF="IT10DST22.HTM">22</A></TD>
<TD><A HREF="IT10DST23.HTM">23</A></TD>
<TD><A HREF="IT10DST24.HTM">24</A></TD>
<TD><A HREF="IT10DST25.HTM">25</A></TD>
<TD><A HREF="IT10DST26.HTM">26</A></TD>
<TD><A HREF="IT10DST27.HTM">27</A></TD>
<TD><A HREF="IT10DST28.HTM">28</A></TD>
<TD><A HREF="IT10DST29.HTM">29</A></TD>
<TD><A HREF="IT10DST30.HTM">30</A></TD>

</TR>

</TABLE>

</DIV>
</BODY>
</HTML>
  4. file>save>refresh

Lesson 6

Purpose: students will be able to add body background color, text color, link color, activated link color (alink), and followed link color (vlink).

  1. Internet Explorer>open>file>open>browse>s: drive>it10>it10(your class)(d or f)>your folder>web folder>open>index.htm>open
  2. View source
  3. Netscape Communicator>open>http://www.december.com/html/spec/color.html or http://www.dreamartists.com/hexcode.html >color codes>write the code down for your favorite colors
  4. <HTML> 
<HEAD> 
<TITLE>
My Page
</TITLE> 
</HEAD> 

<BODY BGCOLOR="#FFFF00" TEXT="#000000" LINK="#000099" VLINK="#FF3300" ALINK="#FF0033">    
<H3>I Am An Animal!</H3>

<DIV ALIGN="CENTER">
<IMG SRC="IMAGES/ANIMAL.JPG" WIDTH="256" HEIGHT="172">

<TABLE WIDTH="75%" BORDER="1">

<TR>
<TD>NAME</TD>
<TD>KENNETH KIM</TD>
</TR>

<TR>
<TD>GRADE</TD>
<TD>12 PLUS</TD>
</TR>

<TR>
<TD>MY ASTROLOGICAL SIGN</TD>
<TD>GEMINI</TD>
</TR>

<TR>
<TD>ANIMAL I RESEMBLE MOST</TD>
<TD>MONKEY</TD>
</TR>

<TR>
<TD>REASONS WHY I RESEMBLE A MONKEY</TD>
<TD>I AM EASILY DISTRACTED AND CAN'T SIT STILL.</TD>
</TR>

</TABLE>

<TABLE WIDTH="75%" BORDER="1" CELLPADDING="1" CELLSPACING="1">

<TR>

<TD><A HREF="IT10DST01.HTM">01</A></TD>
<TD><A HREF="IT10DST02.HTM">02</A></TD>
<TD><A HREF="IT10DST03.HTM">03</A></TD>
<TD><A HREF="IT10DST04.HTM">04</A></TD>
<TD><A HREF="IT10DST05.HTM">05</A></TD>
<TD><A HREF="IT10DST06.HTM">06</A></TD>
<TD><A HREF="IT10DST07.HTM">07</A></TD>
<TD><A HREF="IT10DST08.HTM">08</A></TD>
<TD><A HREF="IT10DST09.HTM">09</A></TD>
<TD><A HREF="IT10DST10.HTM">10</A></TD>

</TR>

<TR>

<TD><A HREF="IT10DST11.HTM">11</A></TD>
<TD><A HREF="IT10DST12.HTM">12</A></TD>
<TD><A HREF="IT10DST13.HTM">13</A></TD>
<TD><A HREF="IT10DST14.HTM">14</A></TD>
<TD><A HREF="IT10DST15.HTM">15</A></TD>
<TD><A HREF="IT10DDST16.HTM">16</A></TD>
<TD><A HREF="IT10DST17.HTM">17</A></TD>
<TD><A HREF="IT10DST18.HTM">18</A></TD>
<TD><A HREF="IT10DST19.HTM">19</A></TD>
<TD><A HREF="IT10DST20.HTM">20</A></TD>

</TR>

<TR>

<TD><A HREF="IT10DST21.HTM">21</A></TD>
<TD><A HREF="IT10DST22.HTM">22</A></TD>
<TD><A HREF="IT10DST23.HTM">23</A></TD>
<TD><A HREF="IT10DST24.HTM">24</A></TD>
<TD><A HREF="IT10DST25.HTM">25</A></TD>
<TD><A HREF="IT10DST26.HTM">26</A></TD>
<TD><A HREF="IT10DST27.HTM">27</A></TD>
<TD><A HREF="IT10DST28.HTM">28</A></TD>
<TD><A HREF="IT10DST29.HTM">29</A></TD>
<TD><A HREF="IT10DST30.HTM">30</A></TD>

</TR>

</TABLE>

</DIV>
</BODY>
</HTML>
  5. file>save>refresh

Lesson 7

Purpose: students will be able to add table background color, table border color, and cell color.

  1. Internet Explorer>open>file>open>browse>s: drive>it10>it10(your class)(d or f)>your folder>web folder>open>index.htm>open
  2. View source
  3. Netscape Communicator>open>http://www.december.com/html/spec/color.html or http://www.dreamartists.com/hexcode.html>color codes>write the code down for your favorite colors
  4. <HTML> 
<HEAD> 
<TITLE>
My Page
</TITLE> 
</HEAD> 

<BODY BGCOLOR="#FFFF00" TEXT="#000000" LINK="#000099" VLINK="#FF3300" ALINK="#FF0033">    
<H3>I Am An Animal!</H3>

<DIV ALIGN="CENTER">
<IMG SRC="IMAGES/ANIMAL.JPG" WIDTH="256" HEIGHT="172">

<TABLE WIDTH="75%" BORDER="1">

<TR>
<TD>NAME</TD>
<TD>KENNETH KIM</TD>
</TR>

<TR>
<TD>GRADE</TD>
<TD>12 PLUS</TD>
</TR>

<TR>
<TD>MY ASTROLOGICAL SIGN</TD>
<TD>GEMINI</TD>
</TR>

<TR>
<TD>ANIMAL I RESEMBLE MOST</TD>
<TD>MONKEY</TD>
</TR>

<TR>
<TD>REASONS WHY I RESEMBLE A MONKEY</TD>
<TD>I AM EASILY DISTRACTED AND CAN'T SIT STILL.</TD>
</TR>

</TABLE>


<!--use the table bgcolor or td bgcolor, do not use both codes in the same table.-->

<TABLE WIDTH="75%" TABLE BGCOLOR="#7070CC" TABLE BORDER COLOR="#007030" BORDER="1" CELLPADDING="1" CELLSPACING="1">

<TR>

<TD BGCOLOR="#00B2EE"><A HREF="IT10DST01.HTM">01</A></TD>
<TD BGCOLOR="#00B2EE"><A HREF="IT10DST02.HTM">02</A></TD>
<TD BGCOLOR="#00B2EE"><A HREF="IT10DST03.HTM">03</A></TD>
<TD BGCOLOR="#00B2EE"><A HREF="IT10DST04.HTM">04</A></TD>
<TD BGCOLOR="#00B2EE"><A HREF="IT10DST05.HTM">05</A></TD>
<TD BGCOLOR="#00B2EE"><A HREF="IT10DST06.HTM">06</A></TD>
<TD BGCOLOR="#00B2EE"><A HREF="IT10DST07.HTM">07</A></TD>
<TD BGCOLOR="#00B2EE"><A HREF="IT10DST08.HTM">08</A></TD>
<TD BGCOLOR="#00B2EE"><A HREF="IT10DST09.HTM">09</A></TD>
<TD BGCOLOR="#00B2EE"><A HREF="IT10DST10.HTM">10</A></TD>

</TR>

<TR>

<TD BGCOLOR="#6E7B8B"><A HREF="IT10DST11.HTM">11</A></TD>
<TD BGCOLOR="#6E7B8B"><A HREF="IT10DST12.HTM">12</A></TD>
<TD BGCOLOR="#6E7B8B"><A HREF="IT10DST13.HTM">13</A></TD>
<TD BGCOLOR="#6E7B8B"><A HREF="IT10DST14.HTM">14</A></TD>
<TD BGCOLOR="#6E7B8B"><A HREF="IT10DST15.HTM">15</A></TD>
<TD BGCOLOR="#6E7B8B"><A HREF="IT10DST16.HTM">16</A></TD>
<TD BGCOLOR="#6E7B8B"><A HREF="IT10DST17.HTM">17</A></TD>
<TD BGCOLOR="#6E7B8B"><A HREF="IT10DST18.HTM">18</A></TD>
<TD BGCOLOR="#6E7B8B"><A HREF="IT10DST19.HTM">19</A></TD>
<TD BGCOLOR="#6E7B8B"><A HREF="IT10DST20.HTM">20</A></TD>

</TR>

<TR>

<TD BGCOLOR="#8A2BE2"><A HREF="IT10DST21.HTM">21</A></TD>
<TD BGCOLOR="#8A2BE2"><A HREF="IT10DST22.HTM">22</A></TD>
<TD BGCOLOR="#8A2BE2"><A HREF="IT10DST23.HTM">23</A></TD>
<TD BGCOLOR="#8A2BE2"><A HREF="IT10DST24.HTM">24</A></TD>
<TD BGCOLOR="#8A2BE2"><A HREF="IT10DST25.HTM">25</A></TD>
<TD BGCOLOR="#8A2BE2"><A HREF="IT10DST26.HTM">26</A></TD>
<TD BGCOLOR="#8A2BE2"><A HREF="IT10DST27.HTM">27</A></TD>
<TD BGCOLOR="#8A2BE2"><A HREF="IT10DST28.HTM">28</A></TD>
<TD BGCOLOR="#8A2BE2"><A HREF="IT10DST29.HTM">29</A></TD>
<TD BGCOLOR="#8A2BE2"><A HREF="IT10DST30.HTM">30</A></TD>

</TR>

</TABLE>

</DIV>
</BODY>
</HTML>
  5. file>save>refresh

Lesson 8

Purpose: students will be able to add a horizontal break, breaks, space, bold font, font color, font size, font type, copyright logo, and rowspan.

  1. Internet Explorer>open>file>open>browse>s: drive>it10>it10(your class)(d or f)>your folder>web folder>open>index.htm>open
  2. View source
  3. Netscape Communicator>open>http://www.december.com/html/spec/codes.html >color codes>write the code down for your favorite colors
  4. <HTML> 
<HEAD> 
<TITLE>
My Page
</TITLE> 
</HEAD> 

<BODY BGCOLOR="#FFFF00" TEXT="#000000" LINK="#000099" VLINK="#FF3300" ALINK="#FF0033">    

<DIV ALIGN="CENTER">
<IMG SRC="IMAGES/ANIMAL.JPG" WIDTH="256" HEIGHT="172">

<H3>I Am An Animal!</H3>

<HR>
<BR>
<BR>

<TABLE WIDTH="75%" BORDER="1">

<TR>
<TD>NAME</TD>
<TD>KENNETH KIM</TD>
</TR>

<TR>
<TD>GRADE</TD>
<TD>12 PLUS</TD>
</TR>

<TR>
<TD>MY ASTROLOGICAL SIGN</TD>
<TD>GEMINI</TD>
</TR>

<TR>
<TD>ANIMAL I RESEMBLE MOST</TD>
<TD>MONKEY</TD>
</TR>

<TR>
<TD>REASONS WHY I RESEMBLE A MONKEY</TD>
<TD>I AM EASILY DISTRACTED AND CAN'T SIT STILL.</TD>
</TR>

</TABLE

<BR>

<TABLE WIDTH="75%" TABLE BORDER COLOR="#007030" BORDER="1" CELLPADDING="1" CELLSPACING="1">

<TR>
<TD ROWSPAN=5>&NBSP;</TD>
</TR>

<TR>

<TD BGCOLOR="#00B2EE"><A HREF="IT10DST01.HTM">01</A></TD>
<TD BGCOLOR="#00B2EE"><A HREF="IT10DST02.HTM">02</A></TD>
<TD BGCOLOR="#00B2EE"><A HREF="IT10DST03.HTM">03</A></TD>
<TD BGCOLOR="#00B2EE"><A HREF="IT10DST04.HTM">04</A></TD>
<TD BGCOLOR="#00B2EE"><A HREF="IT10DST05.HTM">05</A></TD>
<TD BGCOLOR="#00B2EE"><A HREF="IT10DST06.HTM">06</A></TD>
<TD BGCOLOR="#00B2EE"><A HREF="IT10DST07.HTM">07</A></TD>
<TD BGCOLOR="#00B2EE"><A HREF="IT10DST08.HTM">08</A></TD>
<TD BGCOLOR="#00B2EE"><A HREF="IT10DST09.HTM">09</A></TD>
<TD BGCOLOR="#00B2EE"><A HREF="IT10DST10.HTM">10</A></TD>

</TR>

<TR>

<TD BGCOLOR="#6E7B8B"><A HREF="IT10DST11.HTM">11</A></TD>
<TD BGCOLOR="#6E7B8B"><A HREF="IT10DST12.HTM">12</A></TD>
<TD BGCOLOR="#6E7B8B"><A HREF="IT10DST13.HTM">13</A></TD>
<TD BGCOLOR="#6E7B8B"><A HREF="IT10DST14.HTM">14</A></TD>
<TD BGCOLOR="#6E7B8B"><A HREF="IT10DST15.HTM">15</A></TD>
<TD BGCOLOR="#6E7B8B"><A HREF="IT10DST16.HTM">16</A></TD>
<TD BGCOLOR="#6E7B8B"><A HREF="IT10DST17.HTM">17</A></TD>
<TD BGCOLOR="#6E7B8B"><A HREF="IT10DST18.HTM">18</A></TD>
<TD BGCOLOR="#6E7B8B"><A HREF="IT10DST19.HTM">19</A></TD>
<TD BGCOLOR="#6E7B8B"><A HREF="IT10DST20.HTM">20</A></TD>

</TR>

<TR>

<TD BGCOLOR="#8A2BE2"><A HREF="IT10DST21.HTM">21</A></TD>
<TD BGCOLOR="#8A2BE2"><A HREF="IT10DST22.HTM">22</A></TD>
<TD BGCOLOR="#8A2BE2"><A HREF="IT10DST23.HTM">23</A></TD>
<TD BGCOLOR="#8A2BE2"><A HREF="IT10DST24.HTM">24</A></TD>
<TD BGCOLOR="#8A2BE2"><A HREF="IT10DST25.HTM">25</A></TD>
<TD BGCOLOR="#8A2BE2"><A HREF="IT10DST26.HTM">26</A></TD>
<TD BGCOLOR="#8A2BE2"><A HREF="IT10DST27.HTM">27</A></TD>
<TD BGCOLOR="#8A2BE2"><A HREF="IT10DST28.HTM">28</A></TD>
<TD BGCOLOR="#8A2BE2"><A HREF="IT10DST29.HTM">29</A></TD>
<TD BGCOLOR="#8A2BE2"><A HREF="IT10DST30.HTM">30</A></TD>

</TR>

</TABLE>


<P>
<B>
<FONT COLOR="FF0000" SIZE="2" FACE="ARIAL">
Copyright&copy;2001(Kenneth Kim)All Rights Reserved.
</B>
</FONT>
</P>

</DIV>
</BODY>
</HTML>
  5. file>save>refresh

Lesson 9

Purpose: students will be able to create image hyperlinks, center image hyperlinks, change border size, and add alternate text.

  1. Internet Explorer>open>file>open>browse>s: drive>it10>it10(your class)(d or f)>your folder>web folder>open>index.htm>open
  2. View source
  3. <HTML> 
<HEAD> 
<TITLE>
My Page
</TITLE> 
</HEAD> 

<BODY BGCOLOR="#FFFF00" TEXT="#000000" LINK="#000099" VLINK="#FF3300" ALINK="#FF0033">    

<DIV ALIGN="CENTER">
<IMG SRC="IMAGES/ANIMAL.JPG" WIDTH="256" HEIGHT="172">

<H3>I Am An Animal!</H3>

<HR>
<BR>
<BR>

<TABLE WIDTH="75%" BORDER="0">

<TR>
<TD>NAME</TD>
<TD>KENNETH KIM</TD>
</TR>

<TR>
<TD>GRADE</TD>
<TD>12 PLUS</TD>
</TR>

<TR>
<TD>MY ASTROLOGICAL SIGN</TD>
<TD>GEMINI</TD>
</TR>

<TR>
<TD>ANIMAL I RESEMBLE MOST</TD>
<TD>MONKEY</TD>
</TR>

<TR>
<TD>REASONS WHY I RESEMBLE A MONKEY</TD>
<TD>I AM EASILY DISTRACTED AND CAN'T SIT STILL.</TD>
</TR>

</TABLE>

<BR>

<TABLE WIDTH="75%" BORDER="0" CELLPADDING="1" CELLSPACING="1">

<TR>
<TD ROWSPAN=5><CENTER><A HREF="INDEX.HTM"><IMG SRC="IMAGES/SPARTANS.GIF" WIDTH="75" HEIGHT="75" BORDER="0" ALT="MAIN INDEX">
</A></CENTER></TD>
</TR>

<TR>

<TD BGCOLOR="#6E7B8B"><A HREF="IT10DST01.HTM">
<center><img src="images/blackboy.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#6E7B8B"><A HREF="IT10DST02.HTM">
<center><img src="images/blackgirl.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#6E7B8B"><A HREF="IT10DST03.HTM">
<center><img src="images/redboy.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#6E7B8B"><A HREF="IT10DST04.HTM">
<center><img src="images/redgirl.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#6E7B8B"><A HREF="IT10DST05.HTM">
<center><img src="images/brownboy.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#6E7B8B"><A HREF="IT10DST06.HTM">
<center><img src="images/browngirl.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#6E7B8B"><A HREF="IT10DST07.HTM">
<center><img src="images/whiteboy.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#6E7B8B"><A HREF="IT10DST08.HTM">
<center><img src="images/whitegirl.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#6E7B8B"><A HREF="IT10DST09.HTM">
<center><img src="images/blackboy.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#6E7B8B"><A HREF="IT10DST10.HTM">
<center><img src="images/whiteboy.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>

</TR>

<TR>

<TD BGCOLOR="#00B2EE"><A HREF="IT10DST11.HTM">
<center><img src="images/blackboy.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#00B2EE"><A HREF="IT10DST12.HTM">
<center><img src="images/blackgirl.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#00B2EE"><A HREF="IT10DST13.HTM">
<center><img src="images/redboy.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#00B2EE"><A HREF="IT10DST14.HTM">
<center><img src="images/redgirl.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#00B2EE"><A HREF="IT10DST15.HTM">
<center><img src="images/brownboy.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#00B2EE"><A HREF="IT10DST16.HTM">
<center><img src="images/browngirl.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#00B2EE"><A HREF="IT10DST17.HTM">
<center><img src="images/whiteboy.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#00B2EE"><A HREF="IT10DST18.HTM">
<center><img src="images/whitegirl.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#00B2EE"><A HREF="IT10DST19.HTM">
<center><img src="images/blackboy.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#00B2EE"><A HREF="IT10DST20.HTM">
<center><img src="images/whiteboy.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>


</TR>

<TR>

<TD BGCOLOR="#8A2BE2"><A HREF="IT10DST21.HTM">
<center><img src="images/blackboy.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#8A2BE2"><A HREF="IT10DST22.HTM">
<center><img src="images/blackgirl.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#8A2BE2"><A HREF="IT10DST23.HTM">
<center><img src="images/redboy.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#8A2BE2"><A HREF="IT10DST24.HTM">
<center><img src="images/redgirl.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#8A2BE2"><A HREF="IT10DST25.HTM">
<center><img src="images/brownboy.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#8A2BE2"><A HREF="IT10DST26.HTM">
<center><img src="images/browngirl.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#8A2BE2"><A HREF="IT10DST27.HTM">
<center><img src="images/whiteboy.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#8A2BE2"><A HREF="IT10DST28.HTM">
<center><img src="images/whitegirl.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#8A2BE2"><A HREF="IT10DST29.HTM">
<center><img src="images/blackboy.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#8A2BE2"><A HREF="IT10DST30.HTM">
<center><img src="images/whiteboy.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>

</TR>

</TABLE>


<P>
<B>
<FONT COLOR="FF0000" SIZE="2" FACE="ARIAL">
Copyright&copy;2001(Kenneth Kim)All Rights Reserved.
</B>
</FONT>
</P>

</DIV>
</BODY>
</HTML>
  4. file>save>refresh>minimize
  5. windows explorer>open>s: drive>it10>it10(your class)(d or f)>teacher folder>open>images folder>open>web folder>open>ctrl+A>ctrl+C
  6. go back to your own folder and paste the images in your images folder
  7. restore .htm>refresh (check if all images appear)

*For those seats that are unoccupied, put down this HTML code.*

<TD><A HREF="sorry.htm"> <center><img src="images/blackboy.gif" width="25" height="25" border="0" alt="nobody sits here"></center></A></TD>

Lesson 10

Purpose: students will be able to create a table, change font color, font size, font type, add text, and align text.

  1. Internet Explorer>open>file>open>browse>s: drive>it10>it10(your class)(d or f)>your folder>web folder>open>index.htm>open
  2. View source
  3. <HTML> 
<HEAD> 
<TITLE>
My Page
</TITLE> 
</HEAD> 

<BODY BGCOLOR="#FFFF00" TEXT="#000000" LINK="#000099" VLINK="#FF3300" ALINK="#FF0033">    

<DIV ALIGN="CENTER">
<IMG SRC="IMAGES/ANIMAL.JPG" WIDTH="256" HEIGHT="172">

<H3>I Am An Animal!</H3>

<HR>
<BR>
<BR>

<TABLE WIDTH="75%" BORDER="0">

<TR>
<TD>NAME</TD>
<TD>KENNETH KIM</TD>
</TR>

<TR>
<TD>GRADE</TD>
<TD>12 PLUS</TD>
</TR>

<TR>
<TD>MY ASTROLOGICAL SIGN</TD>
<TD>GEMINI</TD>
</TR>

<TR>
<TD>ANIMAL I RESEMBLE MOST</TD>
<TD>MONKEY</TD>
</TR>

<TR>
<TD>REASONS WHY I RESEMBLE A MONKEY</TD>
<TD>I AM EASILY DISTRACTED AND CAN'T SIT STILL.</TD>
</TR>

</TABLE>

<BR>

<TABLE WIDTH="75%" BORDER="0" CELLPADDING="1" CELLSPACING="1">

<TR>
<TD ROWSPAN=5><A HREF="INDEX.HTM"><IMG SRC="IMAGES/SPARTANS.GIF" WIDTH="75" HEIGHT="75" BORDER="0" ALT="MAIN INDEX">
</A><B><CENTER>MAIN INDEX</CENTER></B></TD>
</TR>

<TR>

<TD BGCOLOR="#6E7B8B"><A HREF="IT10DST01.HTM">
<center><img src="images/blackboy.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#6E7B8B"><A HREF="IT10DST02.HTM">
<center><img src="images/blackgirl.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#6E7B8B"><A HREF="IT10DST03.HTM">
<center><img src="images/redboy.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#6E7B8B"><A HREF="IT10DST04.HTM">
<center><img src="images/redgirl.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#6E7B8B"><A HREF="IT10DST05.HTM">
<center><img src="images/brownboy.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#6E7B8B"><A HREF="IT10DST06.HTM">
<center><img src="images/browngirl.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#6E7B8B"><A HREF="IT10DST07.HTM">
<center><img src="images/whiteboy.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#6E7B8B"><A HREF="IT10DST08.HTM">
<center><img src="images/whitegirl.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#6E7B8B"><A HREF="IT10DST09.HTM">
<center><img src="images/blackboy.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#6E7B8B"><A HREF="IT10DST10.HTM">
<center><img src="images/whiteboy.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>

</TR>

<TR>

<TD BGCOLOR="#00B2EE"><A HREF="IT10DST11.HTM">
<center><img src="images/blackboy.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#00B2EE"><A HREF="IT10DST12.HTM">
<center><img src="images/blackgirl.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#00B2EE"><A HREF="IT10DST13.HTM">
<center><img src="images/redboy.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#00B2EE"><A HREF="IT10DST14.HTM">
<center><img src="images/redgirl.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#00B2EE"><A HREF="IT10DST15.HTM">
<center><img src="images/brownboy.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#00B2EE"><A HREF="IT10DST16.HTM">
<center><img src="images/browngirl.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#00B2EE"><A HREF="IT10DST17.HTM">
<center><img src="images/whiteboy.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#00B2EE"><A HREF="IT10DST18.HTM">
<center><img src="images/whitegirl.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#00B2EE"><A HREF="IT10DST19.HTM">
<center><img src="images/blackboy.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#00B2EE"><A HREF="IT10DST20.HTM">
<center><img src="images/whiteboy.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>


</TR>

<TR>

<TD BGCOLOR="#8A2BE2"><A HREF="IT10DST21.HTM">
<center><img src="images/blackboy.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#8A2BE2"><A HREF="IT10DST22.HTM">
<center><img src="images/blackgirl.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#8A2BE2"><A HREF="IT10DST23.HTM">
<center><img src="images/redboy.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#8A2BE2"><A HREF="IT10DST24.HTM">
<center><img src="images/redgirl.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#8A2BE2"><A HREF="IT10DST25.HTM">
<center><img src="images/brownboy.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#8A2BE2"><A HREF="IT10DST26.HTM">
<center><img src="images/browngirl.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#8A2BE2"><A HREF="IT10DST27.HTM">
<center><img src="images/whiteboy.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#8A2BE2"><A HREF="IT10DST28.HTM">
<center><img src="images/whitegirl.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#8A2BE2"><A HREF="IT10DST29.HTM">
<center><img src="images/blackboy.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#8A2BE2"><A HREF="IT10DST30.HTM">
<center><img src="images/whiteboy.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>


</TR>

</TABLE>


<TABLE WIDTH="75%" BORDER="0" CELLPADDING="1" CELLSPACING="1">

<TR>

<TD><FONT COLOR="#FF0000" SIZE="2" FACE="ARIAL"><LEFT>CLICK IMAGE FOR THE MAIN INDEX</LEFT></FONT></TD>
<TD><FONT COLOR="#FF0000" SIZE="2" FACE="ARIAL"><LEFT>CLICK IMAGES FOR THE STUDENT WEB PAGES</LEFT></FONT></TD>

</TR>

</TABLE>

<P>
<B>
<FONT COLOR="FF0000" SIZE="2" FACE="ARIAL">
Copyright&copy;2001(Kenneth Kim)All Rights Reserved.
</B>
</FONT>
</P>

</DIV>
</BODY>
</HTML>
  4. file>save>refresh

Lesson 11

Purpose: students will be able to rename files, add tile backgrounds, borders and insert into a web page using HTML.

  1. Internet Explorer>open>file>open>browse>s: drive>it10>it10(your class)(d or f)>your folder>web folder>open>index.htm>rename>it10dst01.htm...it10dst02.htm...it10dst03.htm (check which number you are on the overhead)>open
  2. web folder>open>images folder>open>rename animal.jpg to it10dst01.jpg...it10dst02.jpg...it10dst03.jpg (check which number you are on the overhead)
  3. View source
  4. <HTML> 
<HEAD> 
<TITLE>
My Page
</TITLE> 
</HEAD> 

<BODY BACKGROUND="images/scallop.gif" TEXT="#000000" LINK="#000099" VLINK="#FF3300" ALINK="#FF0033">    

<DIV ALIGN="CENTER">
<IMG SRC="IMAGES/CLASS.JPG" WIDTH="256" HEIGHT="172">

<H3>OUR INFORMATION TECHNOLOGY CLASS!</H3>

<HR>
<BR>
<BR>

<TABLE WIDTH="75%" BORDER="0">

<TR>
<TD>NAME</TD>
<TD>KENNETH KIM</TD>
</TR>

<TR>
<TD>GRADE</TD>
<TD>12 PLUS</TD>
</TR>

<TR>
<TD>MY ASTROLOGICAL SIGN</TD>
<TD>GEMINI</TD>
</TR>

<TR>
<TD>ANIMAL I RESEMBLE MOST</TD>
<TD>MONKEY</TD>
</TR>

<TR>
<TD>REASONS WHY I RESEMBLE A MONKEY</TD>
<TD>I AM EASILY DISTRACTED AND CAN'T SIT STILL.</TD>
</TR>

</TABLE>

<BR>

<TABLE WIDTH="75%" BORDER="0" CELLPADDING="1" CELLSPACING="1">

<TR>
<TD ROWSPAN=5><A HREF="INDEX.HTM"><IMG SRC="IMAGES/SPARTANS.GIF" WIDTH="75" HEIGHT="75" BORDER="0" ALT="MAIN INDEX">
</A><B><CENTER>MAIN INDEX</CENTER></B></TD>
</TR>

<TR>

<TD BGCOLOR="#6E7B8B"><A HREF="IT10DST01.HTM">
<center><img src="images/blackboy.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#6E7B8B"><A HREF="IT10DST02.HTM">
<center><img src="images/blackgirl.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#6E7B8B"><A HREF="IT10DST03.HTM">
<center><img src="images/redboy.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#6E7B8B"><A HREF="IT10DST04.HTM">
<center><img src="images/redgirl.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#6E7B8B"><A HREF="IT10DST05.HTM">
<center><img src="images/brownboy.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#6E7B8B"><A HREF="IT10DST06.HTM">
<center><img src="images/browngirl.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#6E7B8B"><A HREF="IT10DST07.HTM">
<center><img src="images/whiteboy.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#6E7B8B"><A HREF="IT10DST08.HTM">
<center><img src="images/whitegirl.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#6E7B8B"><A HREF="IT10DST09.HTM">
<center><img src="images/blackboy.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#6E7B8B"><A HREF="IT10DST10.HTM">
<center><img src="images/whiteboy.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>

</TR>

<TR>

<TD BGCOLOR="#00B2EE"><A HREF="IT10DST11.HTM">
<center><img src="images/blackboy.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#00B2EE"><A HREF="IT10DST12.HTM">
<center><img src="images/blackgirl.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#00B2EE"><A HREF="IT10DST13.HTM">
<center><img src="images/redboy.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#00B2EE"><A HREF="IT10DST14.HTM">
<center><img src="images/redgirl.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#00B2EE"><A HREF="IT10DST15.HTM">
<center><img src="images/brownboy.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#00B2EE"><A HREF="IT10DST16.HTM">
<center><img src="images/browngirl.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#00B2EE"><A HREF="IT10DST17.HTM">
<center><img src="images/whiteboy.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#00B2EE"><A HREF="IT10DST18.HTM">
<center><img src="images/whitegirl.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#00B2EE"><A HREF="IT10DST19.HTM">
<center><img src="images/blackboy.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#00B2EE"><A HREF="IT10DST20.HTM">
<center><img src="images/whiteboy.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>


</TR>

<TR>

<TD BGCOLOR="#8A2BE2"><A HREF="IT10DST21.HTM">
<center><img src="images/blackboy.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#8A2BE2"><A HREF="IT10DST22.HTM">
<center><img src="images/blackgirl.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#8A2BE2"><A HREF="IT10DST23.HTM">
<center><img src="images/redboy.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#8A2BE2"><A HREF="IT10DST24.HTM">
<center><img src="images/redgirl.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#8A2BE2"><A HREF="IT10DST25.HTM">
<center><img src="images/brownboy.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#8A2BE2"><A HREF="IT10DST26.HTM">
<center><img src="images/browngirl.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#8A2BE2"><A HREF="IT10DST27.HTM">
<center><img src="images/whiteboy.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#8A2BE2"><A HREF="IT10DST28.HTM">
<center><img src="images/whitegirl.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#8A2BE2"><A HREF="IT10DST29.HTM">
<center><img src="images/blackboy.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>
<TD BGCOLOR="#8A2BE2"><A HREF="IT10DST30.HTM">
<center><img src="images/whiteboy.gif" width="25" height="25" border="0" alt="name of student"></center></A></TD>


</TR>


</TABLE>


<TABLE WIDTH="75%" BORDER="0" CELLPADDING="1" CELLSPACING="1">

<TR>

<TD><FONT COLOR="#FF0000" SIZE="2" FACE="ARIAL"><LEFT>CLICK IMAGE FOR THE MAIN INDEX</LEFT></FONT></TD>
<TD><FONT COLOR="#FF0000" SIZE="2" FACE="ARIAL"><LEFT>CLICK IMAGES FOR THE STUDENT WEB PAGES</LEFT></FONT></TD>

</TR>

</TABLE>

<P>
<B>
<FONT COLOR="FF0000" SIZE="2" FACE="ARIAL">
Copyright&copy;2001(Kenneth Kim)All Rights Reserved.
</B>
</FONT>
</P>

</DIV>
</BODY>
</HTML>
  5. file>save>refresh
  6. this is how it should look...click HERE

Lesson 12

Purpose: students will be able to copy and paste a .htm document, add a marquee, an image, and an automatic refresh using HTML code..

  1. Internet Explorer>open>file>open>browse>s: drive>it10>it10(your class)(d or f)>your folder>web folder>open>it10dst01.htm>copy>paste
  2. it10dst01.htm>rename>sorry.htm
  3. View source>delete all unnecessary HTML code
  4. <HTML>
    <HEAD>
    <TITLE>
    Refresh
    </TITLE>
    <META HTTP-EQUIV="refresh" CONTENT="6; URL=index.htm">
    </HEAD>

    <BODY BGCOLOR="#000000" TEXT="FFF000">

    <P>&nbsp;</P>
    <DIV ALIGN="CENTER">

    <H2>SORRY, NOBODY SITS HERE!</H2>

    <P><B><FONT SIZE="5" COLOR="#FFFFFF"><MARQUEE WIDTH="300" ALIGN="MIDDLE" HEIGHT="24">You will be returned to the main page.</MARQUEE></FONT></B></P>

    <HR color="#FFF000" width="90%">
    <BR>
    <BR>

    <H2 style="#FFF000">You will be turned back in</H2>

    <P><img src="images/sorry.gif" border="0" alt="NOBODY SITS HERE!"></P>

    <H2 style="#FFF000">seconds.</H2>


    </DIV>
    </BODY>
    </HTML>

  5. file>save>refresh
  6. this is how it should look...click HERE

Lesson 13

Purpose: students will be able to write in all meta information and create an index page using a template.

  1. Internet Explorer>open>file>open>browse>s: drive>it10>it10(your class)(d or f)>your folder>web folder>open>it10dst01.htm>copy>paste>rename>index.htm>open
  2. View source>delete all unnecessary HTML code
  3. <html>
    <head>
    <title>IT 10 D or F Main Page</title>
    <meta name="description" content="The animals in Mr. Kim's Information Technology class.">
<meta name="keywords" content="animals, astrological signs, school, students, info tech, information technology">
    </head>

    <body bgcolor="#FFFFFF">
    <h1 align="center">Title</h1>
    <hr>
    <p>&nbsp;</p>

    <div align="center">
    <table width="65%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td><img src="images/students image" width="100" height="100" border="0" alt="name of student"></td>
    <td><img src="images/students image" width="100" height="100" border="0" alt="name of student"></td>
    <td><img src="images/students image" width="100" height="100" border="0" alt="name of student"></td>
    <td><img src="images/students image" width="100" height="100" border="0" alt="name of student"></td>
    <td><img src="images/students image" width="100" height="100" border="0" alt="name of student"></td>
    <td><img src="images/students image" width="100" height="100" border="0" alt="name of student"></td>
    <td><img src="images/students image" width="100" height="100" border="0" alt="name of student"></td>
    <td><img src="images/students image" width="100" height="100" border="0" alt="name of student"></td>
    <td><img src="images/students image" width="100" height="100" border="0" alt="name of student"></td>
    <td><img src="images/students image" width="100" height="100" border="0" alt="name of student"></td>
    </tr>
    <tr>
    <td><img src="images/students image" width="100" height="100" border="0" alt="name of student"></td>
    <td colspan="8" rowspan="2"><center><img src="images/class.jpg" width="300" height="200"></center></td>
    <td><img src="images/students image" width="100" height="100" border="0" alt="name of student"></td>
    </tr>
    <tr>
    <td><img src="images/students image" width="100" height="100" border="0" alt="name of student"></td>
    <td><img src="images/students image" width="100" height="100" border="0" alt="name of student"></td>
    </tr>
    <tr>
    <td><img src="images/students image" width="100" height="100" border="0" alt="name of student"></td>
    <td><img src="images/students image" width="100" height="100" border="0" alt="name of student"></td>
    <td><img src="images/students image" width="100" height="100" border="0" alt="name of student"></td>
    <td><img src="images/students image" width="100" height="100" border="0" alt="name of student"></td>
    <td><img src="images/students image" width="100" height="100" border="0" alt="name of student"></td>
    <td><img src="images/students image" width="100" height="100" border="0" alt="name of student"></td>
    <td><img src="images/students image" width="100" height="100" border="0" alt="name of student"></td>
    <td><img src="images/students image" width="100" height="100" border="0" alt="name of student"></td>
    <td><img src="images/students image" width="100" height="100" border="0" alt="name of student"></td>
    <td><img src="images/students image" width="100" height="100" border="0" alt="name of student"></td>
    </tr>
    </table>
    </div>
    <p>&nbsp;</p>
    <p align="right">Copyright&copy;2001(your name)All Rights Reserved.</p>
    </body>
    </html>

  4. file>save>refresh

*Mr. Kim will choose best index page and upload it. You can find images, buttons, borders, and backgrounds at www.yahright.com*

Lesson 14

Purpose: students will be able to beta test the web site.

  1. Internet Explorer>open>file>open>browse>s: drive>it10>it10(your class)(d or f)>your folder>web folder>open>images folder>open
  2. animal.jpg rename to it10dst01.jpg (whichever number you are)>rename
  3. create a 100 pixels width by 100 pixels height of it10dst01.jpg>save as it10dst01a.jpg
  4. rename scallop.jpg to scallop1.jpg, scallop2.jpg, scallop3.jpg...
  5. copy it10dst01.jpg, it10dst01a.jpg, scallop1.jpg>copy
  6. teacher folder>web folder>images folder>open>paste
  7. it10dst01.htm>copy
  8. teacher folder>web folder>open>paste
  9. check all images>modify HTML if there are problems
  10. check table>modify HTML if there are problems
  11. check all hyperlinks>modify HTML if there are problems

Lesson 15

Purpose: students will be able to upload their image and web page to the web site host (Yahoo Geocities) and test it.

  1. Internet Explorer>open>address bar: www.yahoo.com
  2. Geocities>I am a new user>sign me up
  3. sign up for your Yahoo Id>submit form
  4. login>username: sentinelspartans>password: spartans
  5. start building now
  6. about your home page>school / education
  7. build page now
  8. file manager
  9. open file manager
  10. subdirectories>new>images
  11. open images subdirectory
  12. upload>browse>s: drive>it10>it10(your class)(d or f)>your folder>web folder>open>images folder>open>it10dst01.jpg>open>it10dst01a.jpg>scallop1.jpg>open>upload files
  13. open parent directory
  14. browse>s: drive>it10>it10(your class)(d or f)>your folder>web folder>open>it10dst01.htm>open>upload
  15. (FYI: Mr. Kim will do this step.) browse>s: drive>it10>it10(your class)(d or f)>your folder>web folder>open>index.htm>open>upload files

*Mr. Kim will demonstrate how to list this site with the major search engines (www.addme.com), how to check the efficiency of the images and links on the web site (www.gifwizard.com), and how to check who owns a certain domain name (www.register.com)*
*make sure to upload images into the images subdirectory and web pages to the parent directory*

Lesson 16

Purpose: students will be complete a site map of www.geocities.com/sentinelspartans using Inspiration software.

  1. Complete web organization using Inspiration software.

Evaluation Criteria (Total Mark - 100)

Web Page Criteria (100 marks)

Graphic (Animal)- 10 marks
	text
	image looks good proportionally
	image relates to the text



Tile / Border Graphic - 10 marks
	8 KB or less
	fits proportionally in web page


Table - 10 marks
	controls cells / colums / rowspan
	controls cell color
	controls border size
	image links included
  

Hyperlinks - 20 marks
	use backwards and forward hyperlinks
	hyperlinks to correct web page


Index Page - 20 marks
	layout
	informative 
	artistic
	technical
 	

Site Mapping - 10 marks
	all pages included
	all links included
	appropriate graphics
	appropriate text / text color


Others - 10 marks
	central theme
	opening page (index) draws visitor inside
	title
	heading
	horizontal break
	breaks
	copyright logo
	controls font type
	controls font size
	controls font colour
	controls font style
	grammar - no mistakes in spelling or punctuation


Cooperation - 10 marks
	does class work
	not disruptive
	shows respect for teacher and students
	helps others when asked

Lesson 17

Purpose: students will be build a web site for a sports team or a school club at Sentinel High School or for an outside client in the community.

  1. Create timeline for the project
  2. Interview client (player)
  3. Draw lay out of web pages
  4. Create site map using Inspiration software
  5. Gather clip art and photos (image size should be kept small)(Yahoo Geocities gives you only 15 MB)
  6. Design client's individual web page (back up your work everyday on disk)
  7. Discuss with group responsibilities of the index page (who will gather clipart, images, make tiles / borders, make icons / buttons, and make the web pages)
  8. Beta test the site
  9. Create site name at Yahoo Geocities and upload the cliparts, photos, and web pages
  10. Test site
  11. Organize a party to unveil the web site (your clients will provide the food)
  12. Have fun showing the web site off!

*This is a project based assignment. Each person will have a role and will know their responsibility. You will have ten classes (approximately 1 month) to finish this assignment. First you must set a timeline for when things should be done. Please submit one timeline and one proposal for the group to the teacher. You will interview your client on your own time. Starting every Monday, I will call you up and you will show me your journal and the work you did the previous week. This journal can be in point form. This will also be a part of your evaluation. Once the players web page is done, everyone must discuss how the overall web site will look like and what the responsiblity for each individual will be. Someone has to be a LEADER! When the index page is finished, beta test the site. Then create a site name at Yahoo Geocities and upload the cliparts, photos, and web pages. Test the site online and make changes. We will set a time and place to hold the unveiling of the web site and send out invitations. As the fee for our services, our clients will provide the food and drinks.

Evaluation Criteria (Total Mark - 200)

Web Page Criteria 

Individual Mark (Total - 75 marks)

Journal - 25 marks
	complete work on time according to the timeline
	all entries dated and all work completed noted

Individual Web Page-  50 marks
	layout
	informative 
	artistic
	technical(see criteria above)
  	
Group Mark (Total - 125 marks)

Organization - 25 marks
	proposal sheet and timeline submitted to the teacher
	everyone knows their role and their responsibility
	everyone on task and working efficiently and cooperatively
	all deadlines met
  
Index Web Page and other pages - 50 marks
	layout
	informative 
	artistic
	technical(see criteria above)
	
Site Map / Site Testing- 20 marks
	all pages included
	all links included
	appropriate graphics
	appropriate text / text color

Web Site Unveiling Party Organization - 5 marks
	invitations made and sent out
	food and drinks organized
	reception area laid out
	
Presentation - 15 marks 
	Structure (Beginning, Middle, End)
	Voice
	Posture 
	Presenting not Reading
	Flow / Pace
	
Group Individual Assessment - 10 marks
	how much work done for the group
	how co-operative in group
	how much leadership demonstrated

 

 

 

Hosted by www.Geocities.ws

1