Basic HTML: Code: Chapter 5

Web Site
Graphics
Code

Animations
Sounds
Videos
Java
Programs
Help

Chapter 5

Page 37: Creating Tables

splash.html



              <HTML>

                <HEAD>

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

                </HEAD>

              

                <BODY BGCOLOR=#FFFFFF TEXT=#3366CC>

              

                  <TABLE BORDER=1 ALIGN=CENTER WIDTH=500>

                    <TR>

                      <TD>

              

                  <P ALIGN=CENTER>

                    <FONT SIZE=5 FACE="comic sans ms, arial">Welcome to My Website!</FONT>

                  </P>

                  <P ALIGN=CENTER>

                    <A HREF="homepage.html">

                      <IMG SRC="images/my-picture-1.jpg" WIDTH=128 HEIGHT=152 BORDER=0><BR>

                      <FONT FACE="arial">

                        Click Here to Go Inside...

                      </FONT>

                    </A>

                  </P>

                  <P ALIGN=CENTER>

                    <FONT SIZE=3 FACE="arial">

                      This is Fee's Website<BR>

                      and is all about:<BR>

                    </FONT>

                    <FONT SIZE=4 FACE="arial" COLOR=RED>

                      My Favourite Bands,<BR>

                      Skate Boarding<BR>

                      and Internet Games

                    </FONT>

                  </P>

              

                      </TD>

                    </TR>

                  </TABLE>

              

                </BODY>

              </HTML>

Page 40: Table backgrounds

splash.html



              <HTML>

                <HEAD>

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

                </HEAD>

              

                <BODY BGCOLOR=#FFFFFF TEXT=#3366CC>

              

                  <TABLE BORDER=0 BACKGROUND="images/blue-bg.jpg" WIDTH=500>

                    <TR>

                      <TD>

              

                  <P ALIGN=CENTER>

                    <FONT SIZE=5 FACE="comic sans ms, arial">Welcome to My Website!</FONT>

                  </P>

                  <P ALIGN=CENTER>

                    <A HREF="homepage.html">

                      <IMG SRC="images/my-picture-1.jpg" WIDTH=128 HEIGHT=152 BORDER=0><BR>

                      <FONT FACE="arial">

                        Click Here to Go Inside...

                      </FONT>

                    </A>

                  </P>

                  <P ALIGN=CENTER>

                    <FONT SIZE=3 FACE="arial">

                      This is Fee's Website<BR>

                      and is all about:<BR>

                    </FONT>

                    <FONT SIZE=4 FACE="arial" COLOR=RED>

                      My Favourite Bands,<BR>

                      Skate Boarding<BR>

                      and Internet Games

                    </FONT>

                  </P>

              

                      </TD>

                    </TR>

                  </TABLE>

              

                </BODY>

              </HTML>

Page 40: Tables within tables

splash.html



              <HTML>

                <HEAD>

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

                </HEAD>

              

                <BODY BGCOLOR=#FFFFFF TEXT=#3366CC>

              

                  <TABLE BORDER=0 CELLPADDING=20 CELLSPACING=0 BGCOLOR=#3366CC ALIGN=CENTER>

                    <TR>

                      <TD>

              

                  <TABLE BORDER=0 BACKGROUND="images/blue-bg.jpg" WIDTH=500>

                    <TR>

                      <TD>

              

                  <P ALIGN=CENTER>

                    <FONT SIZE=5 FACE="comic sans ms, arial">Welcome to My Website!</FONT>

                  </P>

                  <P ALIGN=CENTER>

                    <A HREF="homepage.html">

                      <IMG SRC="images/my-picture-1.jpg" WIDTH=128 HEIGHT=152 BORDER=0><BR>

                      <FONT FACE="arial">

                        Click Here to Go Inside...

                      </FONT>

                    </A>

                  </P>

                  <P ALIGN=CENTER>

                    <FONT SIZE=3 FACE="arial">

                      This is Fee's Website<BR>

                      and is all about:<BR>

                    </FONT>

                    <FONT SIZE=4 FACE="arial" COLOR=RED>

                      My Favourite Bands,<BR>

                      Skate Boarding<BR>

                      and Internet Games

                    </FONT>

                  </P>

              

                      </TD>

                    </TR>

                  </TABLE>

              

                      </TD>

                    </TR>

                  </TABLE>

              

                </BODY>

              </HTML>

Page 41: Completing splash.html
As well as changing CELLPADDING=20 to CELLPADDING=1, it is best to indent the tags properly:

splash.html



              <HTML>

                <HEAD>

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

                </HEAD>

              

                <BODY BGCOLOR=#FFFFFF TEXT=#3366CC>

              

                  <TABLE BORDER=0 CELLPADDING=1 CELLSPACING=0 BGCOLOR=#3366CC ALIGN=CENTER>

                    <TR>

                      <TD>

              

                        <TABLE BORDER=0 BACKGROUND="images/blue-bg.jpg" WIDTH=500>

                          <TR>

                            <TD>

              

                              <P ALIGN=CENTER>

                                <FONT SIZE=5 FACE="comic sans ms, arial">Welcome to My Website!</FONT>

                              </P>

                              <P ALIGN=CENTER>

                                <A HREF="homepage.html">

                                  <IMG SRC="images/my-picture-1.jpg" WIDTH=128 HEIGHT=152 BORDER=0><BR>

                                  <FONT FACE="arial">

                                    Click Here to Go Inside...

                                  </FONT>

                                </A>

                              </P>

                              <P ALIGN=CENTER>

                                <FONT SIZE=3 FACE="arial">

                                  This is Fee's Website<BR>

                                  and is all about:<BR>

                                </FONT>

                                <FONT SIZE=4 FACE="arial" COLOR=RED>

                                  My Favourite Bands,<BR>

                                  Skate Boarding<BR>

                                  and Internet Games

                                </FONT>

                              </P>

                          

                            </TD>

                          </TR>

                        </TABLE>

              

                      </TD>

                    </TR>

                  </TABLE>

              

                </BODY>

              </HTML>