Basic HTML: Code: Chapter 6

Web Site
Graphics
Code

Animations
Sounds
Videos
Java
Programs
Help

Chapter 6

Page 43: Building your Home Page

homepage.html



              <HTML>

                <HEAD>

                  <TITLE>Fee's Website: Homepage</TITLE>

                </HEAD>

              

                <BODY>

                  <TABLE WIDTH=750 ALIGN=CENTER BORDER=0 CELLPADDING=0 CELLSPACING=0>

                    <TR>

                      <TD WIDTH=250 VALIGN=TOP BGCOLOR=#AAAAFF>

                        menu

                      </TD>

                      <TD VALIGN=TOP BGCOLOR=#DDDDFF>

                        main section

                      </TD>

                    </TR>

                  </TABLE>

                </BODY>

              </HTML>

Page 44: Comments

homepage.html



              <HTML>

                <HEAD>

                  <TITLE>Fee's Website: Homepage</TITLE>

                </HEAD>

              

                <BODY>

                  <TABLE WIDTH=750 ALIGN=CENTER BORDER=0 CELLPADDING=0 CELLSPACING=0>

                    <TR>

                      <TD WIDTH=250 VALIGN=TOP BGCOLOR=#AAAAFF>

              <!-- menu section -->

                        menu

                      </TD>

                      <TD VALIGN=TOP BGCOLOR=#DDDDFF>

              <!-- main section -->

                        main section

                      </TD>

                    </TR>

                  </TABLE>

                </BODY>

              </HTML>

Page 46:
(The first page of) A title for the Menu cell

homepage.html



              <HTML>

                <HEAD>

                  <TITLE>Fee's Website: Homepage</TITLE>

                </HEAD>

              

                <BODY>

                  <TABLE WIDTH=750 ALIGN=CENTER BORDER=0 CELLPADDING=0 CELLSPACING=0>

                    <TR>

                      <TD WIDTH=250 VALIGN=TOP BGCOLOR=#AAAAFF>

              <!-- menu section -->

                        <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>

                      </TD>

                      <TD VALIGN=TOP BGCOLOR=#DDDDFF>

              <!-- main section -->

                        main section

                      </TD>

                    </TR>

                  </TABLE>

                </BODY>

              </HTML>

Page 47:
(The second page of) A title for the Menu cell

homepage.html



              <HTML>

                <HEAD>

                  <TITLE>Fee's Website: Homepage</TITLE>

                </HEAD>

              

                <BODY>

                  <TABLE WIDTH=750 ALIGN=CENTER BORDER=0 CELLPADDING=0 CELLSPACING=0>

                    <TR>

                      <TD WIDTH=250 VALIGN=TOP BGCOLOR=WHITE>

              <!-- menu section -->

                        <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>Fee's Website!</B></FONT>

                          <BR>

                          <IMG SRC="images/blue-divide.jpg">

                        </P>

                      </TD>

                      <TD VALIGN=TOP BGCOLOR=#DDDDFF>

              <!-- main section -->

                        main section

                      </TD>

                    </TR>

                  </TABLE>

                </BODY>

              </HTML>

Page 48: Making a menu

homepage.html



              <HTML>

                <HEAD>

                  <TITLE>Fee's Website: Homepage</TITLE>

                </HEAD>

              

                <BODY>

                  <TABLE WIDTH=750 ALIGN=CENTER BORDER=0 CELLPADDING=0 CELLSPACING=0>

                    <TR>

                      <TD WIDTH=250 VALIGN=TOP BGCOLOR=WHITE>

              <!-- menu section -->

                        <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>Fee's Website!</B></FONT>

                          <BR>

                          <IMG SRC="images/blue-divide.jpg">

                        </P>

              <!-- menu -->

                        <P ALIGN=LEFT>

                          <FONT FACE="arial">

                            <A HREF="homepage.html">Homepage</A><BR>

                            <A HREF="musicpage.html">Music</A><BR>

                            <A HREF="skatepage.html">Skate Boarding</A><BR>

                            <A HREF="gamespage.html">JAVA Games</A><BR>

                            <A HREF="mailto:">E-Mail</A><BR>

                          </FONT>

                        </P>

              

                        <P ALIGN=CENTER>

                          <IMG SRC="images/blue-divide.jpg">

                        </P>

                      </TD>

                      <TD VALIGN=TOP BGCOLOR=#DDDDFF>

              <!-- main section -->

                        main section

                      </TD>

                    </TR>

                  </TABLE>

                </BODY>

              </HTML>

Page 49: Smart Graphics

homepage.html



              <HTML>

                <HEAD>

                  <TITLE>Fee's Website: Homepage</TITLE>

                </HEAD>

              

                <BODY>

                  <TABLE WIDTH=750 ALIGN=CENTER BORDER=0 CELLPADDING=0 CELLSPACING=0>

                    <TR>

                      <TD WIDTH=250 VALIGN=TOP BGCOLOR=WHITE>

              <!-- menu section -->

                        <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>Fee's Website!</B></FONT>

                          <BR>

                          <IMG SRC="images/blue-divide.jpg">

                        </P>

              <!-- menu -->

                        <P ALIGN=LEFT>

                          <FONT FACE="arial">

                            <A HREF="homepage.html">

              <IMG SRC="images/blue-button-1.jpg" ALIGN=MIDDLE BORDER=0>Homepage</A><BR>

                            <A HREF="musicpage.html">

              <IMG SRC="images/blue-button-2.jpg" ALIGN=MIDDLE BORDER=0>Music</A><BR>

                            <A HREF="skatepage.html">

              <IMG SRC="images/blue-button-3.jpg" ALIGN=MIDDLE BORDER=0>Skate Boarding</A><BR>

                            <A HREF="gamespage.html">

              <IMG SRC="images/blue-button-4.jpg" ALIGN=MIDDLE BORDER=0>JAVA Games</A><BR>

                            <A HREF="mailto:">

              <IMG SRC="images/blue-button-5.jpg" ALIGN=MIDDLE BORDER=0>E-Mail</A><BR>

                          </FONT>

                        </P>

              

                        <P ALIGN=CENTER>

                          <IMG SRC="images/blue-divide.jpg">

                        </P>

                      </TD>

                      <TD VALIGN=TOP BGCOLOR=#DDDDFF>

              <!-- main section -->

                        main section         </TD>

                    </TR>

                  </TABLE>

                </BODY>

              </HTML>

Page 50: More tables (!!!)

homepage.html



              <HTML>

                <HEAD>

                  <TITLE>Fee's Website: Homepage</TITLE>

                </HEAD>

              

                <BODY>

                  <TABLE WIDTH=750 ALIGN=CENTER BORDER=0 CELLPADDING=0 CELLSPACING=0>

                    <TR>

                      <TD WIDTH=250 VALIGN=TOP BGCOLOR=WHITE>

              <!-- menu section -->

                        <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>Fee's Website!</B></FONT>

                          <BR>

                          <IMG SRC="images/blue-divide.jpg">

                        </P>

              <!-- menu -->

                        <P ALIGN=LEFT>

                          <FONT FACE="arial">

                            <A HREF="homepage.html">

              <IMG SRC="images/blue-button-1.jpg" ALIGN=MIDDLE BORDER=0>Homepage</A><BR>

                            <A HREF="musicpage.html">

              <IMG SRC="images/blue-button-2.jpg" ALIGN=MIDDLE BORDER=0>Music</A><BR>

                            <A HREF="skatepage.html">

              <IMG SRC="images/blue-button-3.jpg" ALIGN=MIDDLE BORDER=0>Skate Boarding</A><BR>

                            <A HREF="gamespage.html">

              <IMG SRC="images/blue-button-4.jpg" ALIGN=MIDDLE BORDER=0>JAVA Games</A><BR>

                            <A HREF="mailto:">

              <IMG SRC="images/blue-button-5.jpg" ALIGN=MIDDLE BORDER=0>E-Mail</A><BR>

                          </FONT>

                        </P>

              

                        <P ALIGN=CENTER>

                          <IMG SRC="images/blue-divide.jpg">

                        </P>

                      </TD>

                      <TD VALIGN=TOP BGCOLOR=#3366CC>

              <!-- main section -->

                        <TABLE BGCOLOR=#3366CC CELLSPACING=1 BORDER=0 WIDTH=500>

                          <TR HEIGHT=28>

                            <TD ALIGN=LEFT>

                              <IMG SRC="images/icon-home.gif">

                            </TD>

                            <TD ALIGN=RIGHT>

                              <FONT COLOR=WHITE FACE="arial" SIZE=4>Homepage</FONT>

                            </TD>

                          </TR>

              

                          <TR>

                            <TD BACKGROUND="images/blue-bg.jpg" COLSPAN=2 HEIGHT=400 VALIGN=TOP>

              <!-- content -->

                              <P ALIGN=CENTER>

                                <FONT SIZE=5 FACE="comic sans ms,arial">

                                  Welcome to Fee's Website!

                                </FONT>

                              </P>

                              <P ALIGN=CENTER>

                                <IMG SRC="images/my-picture-1.jpg"><BR>

                                <IMG SRC="images/blue-thin-divide.jpg" WIDTH=500 HEIGHT=1>

                              </P>

                              <P ALIGN=CENTER>

                                <FONT FACE="arial">

                                  put your own text here!

                                </FONT>

                              </P>

                            </TD>

                          </TR>

                        </TABLE>

                      </TD>

                    </TR>

                  </TABLE>

                </BODY>

              </HTML>

Page 51: Adding animations

homepage.html



              <HTML>

                <HEAD>

                  <TITLE>Fee's Website: Homepage</TITLE>

                </HEAD>

              

                <BODY BGCOLOR=WHITE TEXT=#3366CC>

                  <TABLE ALIGN=CENTER BORDER=0>

                    <TR>

                      <TD WIDTH=250><IMG SRC="images/anim-horse.gif"></TD>

                      <TD WIDTH=750><IMG SRC="images/anim-cat.gif"></TD>

                    </TR>

                  </TABLE>

                  <TABLE WIDTH=750 ALIGN=CENTER BORDER=0 CELLPADDING=0 CELLSPACING=0>

                    <TR>

                      <TD WIDTH=250 VALIGN=TOP BGCOLOR=WHITE>

              <!-- menu section -->

                        <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>Fee's Website!</B></FONT>

                          <BR>

                          <IMG SRC="images/blue-divide.jpg">

                        </P>

              <!-- menu -->

                        <P ALIGN=LEFT>

                          <FONT FACE="arial">

                            <A HREF="homepage.html">

              <IMG SRC="images/blue-button-1.jpg" ALIGN=MIDDLE BORDER=0>Homepage</A><BR>

                            <A HREF="musicpage.html">

              <IMG SRC="images/blue-button-2.jpg" ALIGN=MIDDLE BORDER=0>Music</A><BR>

                            <A HREF="skatepage.html">

              <IMG SRC="images/blue-button-3.jpg" ALIGN=MIDDLE BORDER=0>Skate Boarding</A><BR>

                            <A HREF="gamespage.html">

              <IMG SRC="images/blue-button-4.jpg" ALIGN=MIDDLE BORDER=0>JAVA Games</A><BR>

                            <A HREF="mailto:">

              <IMG SRC="images/blue-button-5.jpg" ALIGN=MIDDLE BORDER=0>E-Mail</A><BR>

                          </FONT>

                        </P>

              

                        <P ALIGN=CENTER>

                          <IMG SRC="images/blue-divide.jpg">

                        </P>

                      </TD>

                      <TD VALIGN=TOP BGCOLOR=#3366CC>

              <!-- main section -->

                        <TABLE BGCOLOR=#3366CC CELLSPACING=1 BORDER=0 WIDTH=500>

                          <TR HEIGHT=28>

                            <TD ALIGN=LEFT>

                              <IMG SRC="images/icon-home.gif">

                            </TD>

                            <TD ALIGN=RIGHT>

                              <FONT COLOR=WHITE FACE="arial" SIZE=4>Homepage</FONT>

                            </TD>

                          </TR>

              

                          <TR>

                            <TD BACKGROUND="images/blue-bg.jpg" COLSPAN=2 HEIGHT=400 VALIGN=TOP>

              <!-- content -->

                              <P ALIGN=CENTER>

                                <FONT SIZE=5 FACE="comic sans ms,arial">

                                  Welcome to Fee's Website!

                                </FONT>

                              </P>

                              <P ALIGN=CENTER>

                                <IMG SRC="images/my-picture-1.jpg"><BR>

                                <IMG SRC="images/blue-thin-divide.jpg" WIDTH=500 HEIGHT=1>

                              </P>

                              <P ALIGN=CENTER>

                                <FONT FACE="arial">

                                  put your own text here!

                                </FONT>

                              </P>

                            </TD>

                          </TR>

                        </TABLE>

                      </TD>

                    </TR>

                  </TABLE>

                </BODY>

              </HTML>

The Finished "homepage.html" file to download

Right-click on the icon and select Save link as... or Save target as... to download the file to your computer. Then you can open it like an other HTML file (using Notepad) and compare it to your own file. Don't save it to your My Website folder because it might replace the "homepage.html" file you have alreay written using the Basic HTML book.