Using Attributes to create your web pageOpen your default.html file with your text editor and replace ALL of the code with the code shown below. Look at it closely as we are making a lot of major changes. Commenting your work will become very important as your site becomes more complex. It makes it easy to tell what your code is doing, long after you forgot about it. Comments are invisible to web browsers and start with a <!-- and end with --> I have colored the comments red here so you can see how we set the page up. As this is not a basic HTML tutorial, we will be using many attributes without explaining them. If you get confused feel free to email me. COPY AND PASTE ALL THE CODE BELOW THE LINE TO REPLACE EVERYTHING IN YOUR default.html file <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <TITLE></TITLE> <META NAME="description" CONTENT=""> <META NAME="keywords" CONTENT=""> </HEAD> <!-- SET THE MARGINS AND BACKROUND COLOR OF THE PAGE. --> <BODY BGCOLOR="#006600" LEFTMARGIN="0" MARGINHEIGHT="0" MARGINWIDTH="0" TOPMARGIN="0"> <!-- SET THE BORDER, SPACE BETWEEN CELLS, SPACE TO EDGE INSIDE CELL, COLOR INSIDE THE WHOLE TABLE, WIDTH OF TABLE AND THE TABLE'S HORIZONTAL POSITION. --> <TABLE BORDER="1" CELLSPACING="0" CELLPADDING="5" BGCOLOR="white" WIDTH="750" ALIGN="center"> <!-- THIS STARTS ROW 1 --> <TR> <!-- THIS IS CELL 1 AND 2 IN ROW 1. --> <TD COLSPAN="2" BGCOLOR="#009966"><H1><FONT COLOR="#FFFF00">MYSITE.com</FONT></H1> <!-- END CELL 1 AND 2 IN ROW 1. --> </TD> <!-- THE COLSPAN MERGES BOTH CELL 1 AND 2 SO WE DON'T NEED THE SECOND <TD></TD> --> <!-- THIS ENDS ROW 1--> </TR> <!-- THIS STARTS ROW 2 --> <TR> <!-- THIS STARTS COLUMN 1 IN ROW 2--> <TD WIDTH="150" BGCOLOR="#009966" ALIGN="center" VALIGN="top"><H3><I>MENU</I><BR><BR>My Home Page<BR><BR>About Me<BR><BR>Links Index</H3> <!-- END COLUMN 1 IN ROW 2 --> </TD> <!-- THIS IS COLUMN 2 IN ROW 2. Notice there is no BGCOLOR. We are ust allowing the white table backround color to display --> <TD VALIGN="top" ALIGN="left"> WE WILL BE USING THIS CELL FOR ALL OF OUR CONTENT. EVENTUALLY EVEN PUTTING MORE TABLES INSIDE OF IT TO MAKE IT PRETTY. <BR><BR> I HAVE LEFT THE BORDERS ACTIVE JUST SO IT IS EASY TO SEE WHAT EACH CELL IS DOING AND HOW THE CODE IS HANDLING IT. WHEN WE MOVE ON TO THE NEXT LESSON, WE WILL DE-ACTIVATE THE BORDERS. <BR><BR> <!-- END COLUMN 2 IN ROW 2 --> </TD> <!-- END ROW 2 --> </TR> <!-- START ROW 3 THIS WILL ULTIMATELY BECOME do_html_footer --> <TR> <!-- START COLUM 1 AND SET IT TO MERGE ACROSS COLUMN 2 WITH THE COLSPAN ATTRIBUTE --> <TD BGCOLOR="#006600" COLSPAN="2" ALIGN="center" VALIGN="top"><FONT COLOR="#FFFFCC">© 2005 MYSITE.COM</FONT><BR> <!-- CLOSE THE MERGED COLUMN--> </TD> <!-- WE DON'T NEED THE 2ND <TD> </TD> SINCE WE MERGED 1 AND 2 WITH COLSPAN--> <!-- CLOSE ROW 3 --> </TR> <!-- WE STARTED THE TABLE UP THERE, RIGHT AFTER THE BODY TAG. SINCE WE STARTED IT, WE NOW HAVE TO END THE TABLE --> </TABLE> <!-- AGAIN... A START BODY TAG WAS SET... GOTTA END IT --> </BODY> <!-- SAME THING... STARTED HTML UP THERE ON THE TOP... GOTTA END IT. --> </HTML>  Save your new default.html and open it with your browser. It should look like the picture shown here.
|
