|
This is a Table sitting in a Table
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"><--This tells the Browser what type of Document it is.
<!--last modified on Thursday, May 13, 2004 09:55 AM --><---This is the Date it was last Modified.
<HTML><---This tells the Browser that the HTML Coding begins here.
<HEAD><--- This is called the Head or Heading of the page, the ones with the META are for Search Engine Spiders ( Google, Yahoo, etc all have Spiders, they crawl across the web indexing pages, like this one ), it tells the Spider what the page is about.
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=iso-8859-1">
<META NAME="description" CONTENT="A Basic Lesson in HTML">
<META NAME="keywords" CONTENT="basic,html">
<META NAME="VPSiteProject" CONTENT="file:///C|/Visual%20Page/www/Project.vpp">
<META NAME="Author" Content="Mike Hanson"><---The Author of the web page.
<TITLE>Mikes Computer Info - A Basic Lesson in HTML</TITLE><---This shows up in IE up in the blue bar and is the Title of the page you are viewing.
</HEAD><---This tells the Browser that this is the end of the Head Information.
<BODY BGCOLOR="white"><---This tells the Browser that this is the Start of the web page, what you actually see on a page and also tells the browser that the page background color, is to be white.
<FORM ACTION="https://www.paypal.com/cgi-bin/webscr" METHOD="POST" ENCTYPE="application/x-www-form-urlencoded"
target="_blank"><---code for where the Paypal Buttom sends you when you click on it.
<P><--This tells the Browser that a new paragraph is starting.
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="100%"><--This is the start of a Table, a table allows you to enter info into different places with different colors, this code, is sitting in a Table and so you can visually see it, it is unhidden, there are other tables on the page, but they are hidden ( The "0" make it hidden ). This Table is the Green Bar on top of my Logo, MikesComputerInfo.com Movie.
<TR><--- This is the start of a small table inside the main table, you can section a table into as many sections as you require, Examples at the bottom of this page..
<TD WIDTH="100%" BGCOLOR="#003333"> </TD><--This tell the browser, that this section of the table has a Width of 100% of the web page, so whatever you have your Desktop set at 640 x 480, 1024 x 768, etc, the table will go the full width of the page. The BGCOLOR tells the browser to make that section of the table forest green. the /TD tells the browser that is the end of that part of the table.
</TR><--Another end to a section of the Table.
</TABLE><---This tells the Browser that this is the End of this Table.
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="100%" BGCOLOR="#272727"><-- The start of a new Table, this table is where my Logo MikesComputerInfo.com and the Ad are located.
<TR><--Start
<TD WIDTH="536"><--Start
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"<-- This is the code for the Swish Movie that is my Logo, starts here.
codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=4,0,0,0"
ID=aaabaner WIDTH=510 HEIGHT=87>
<P><PARAM NAME=movie VALUE="aaabaner.swf"> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#000000> <EMBED
SRC="aaabaner.swf" WIDTH="510" HEIGHT="87" ALIGN="BOTTOM" quality="high" bgcolor="#000000" TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"> </EMBED> </OBJECT><<-- Logo Ends here.
</TD><--End
<TD><--Start.
<CENTER><--Start \/---This is the code that shows the Ad to the right of my Logo, it is Aligned in the center of that section of the Table
<P><B><FONT SIZE="3" COLOR="yellow">Support this site using Paypal</FONT></B> <INPUT TYPE="HIDDEN" NAME="cmd" SIZE="-1"
VALUE="_xclick"> <INPUT TYPE="HIDDEN" NAME="business" SIZE="-1" VALUE="mike@mikescomputerinfo.com"> <INPUT TYPE="HIDDEN"
NAME="item_name" SIZE="-1" VALUE="Donation to Mike"> <INPUT TYPE="HIDDEN" NAME="item_number" SIZE="-1" VALUE="EG4X2LDQ">
<INPUT TYPE="IMAGE" NAME="submit" SRC="https://www.paypal.com/images/x-click-butcc-donate.gif" ALIGN="BOTTOM" BORDER="0">
</CENTER><--End
</TD><--End
</TR><--End
</TABLE><-- Tells the browser this is the End of this Table.
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="100%" BGCOLOR="#003333"><--Start of new Table, where drop down boxes are.
<TR><--Start
<TD WIDTH="28%"><--Start
<P ALIGN="CENTER"><B><FONT SIZE="4" COLOR="white"> Computer Help</FONT></B><--This Table has the Names of the Sections of the web site, these are right above the drop down boxes. This one is the Computer Help section
</TD><--End
<TD WIDTH="27%"><--Start
<P ALIGN="CENTER"><B><FONT SIZE="4" COLOR="white">Fun Stuff</FONT></B><--Fun Stuff, the font size is 4 and the color is white.
</TD><--End
<TD WIDTH="30%">
<P ALIGN="CENTER"><B><FONT SIZE="4" COLOR="white">Misc Stuff</FONT></B><--Misc Stuff. They are Aligned in the center of the Table section.
</TD><--End
</TR><--End
<TR><--Start
<TD WIDTH="28%"><--Start of the section, that has the Computer Help drop down box.
<CENTER><--This tells the Browser to Center this drop down box in the Table section.
<P><APPLET ARCHIVE="DropDownMenu.jar" CODE="DropDownMenu.class" WIDTH="170" HEIGHT="30" ALIGN="BOTTOM"> <--This tells the Brwser that this is a Drop Down Box of Links, this one is the Computer Help box. It is the Start of a Java Applet, a different code from HTML.
<PARAM NAME="appletbgcolor" VALUE="003333"><-Color of the small table around the box, Green.
<PARAM NAME="menubgcolor" VALUE="FFFFFF"><--This is the color of the background of the drop box white. The FFFFFF is a code for the color white.
<PARAM NAME="textcolor" VALUE="000000"><--The color of the Text, Black.
<PARAM NAME="audio" VALUE="drip.au"><--The name of the sound file.
<PARAM NAME="textfile" VALUE="text.txt"><--The name of the Text file, where all the Links are stored.
<PARAM NAME="fontface" VALUE="Arial"><--Font info
<PARAM NAME="fontstyle" VALUE="plain"><--Font info
<PARAM NAME="fontbold" VALUE="on"><--Font info
<PARAM NAME="fontsize" VALUE="12"><--Font Size 12
<PARAM NAME="reset" VALUE="on"><--This tells the Browser, that when you click on a link, to go to that page.
</APPLET><--This tells the Browser that this is the End of the Java Applet. Java is a speacial code that runs the drop down boxes.
</CENTER><--End Center
</TD><--End
<TD WIDTH="27%"><--Start of Fun Stuff drop down box code.
<CENTER>
<P><APPLET ARCHIVE="DropDownMenu.jar" CODE="DropDownMenu.class" WIDTH="170" HEIGHT="30" ALIGN="BOTTOM">
<PARAM NAME="appletbgcolor" VALUE="003333">
<PARAM NAME="menubgcolor" VALUE="FFFFFF">
<PARAM NAME="textcolor" VALUE="000000">
<PARAM NAME="audio" VALUE="drip.au">
<PARAM NAME="textfile" VALUE="text1.txt">
<PARAM NAME="fontface" VALUE="Arial">
<PARAM NAME="fontstyle" VALUE="plain">
<PARAM NAME="fontbold" VALUE="on">
<PARAM NAME="fontsize" VALUE="12">
<PARAM NAME="reset" VALUE="on">
</APPLET>
</CENTER>
</TD>
<TD WIDTH="30%"><--Start of Misc Stuff box code.
<CENTER>
<P><APPLET ARCHIVE="DropDownMenu.jar" CODE="DropDownMenu.class" WIDTH="170" HEIGHT="30" ALIGN="BOTTOM">
<PARAM NAME="appletbgcolor" VALUE="003333">
<PARAM NAME="menubgcolor" VALUE="FFFFFF">
<PARAM NAME="textcolor" VALUE="000000">
<PARAM NAME="audio" VALUE="drip.au">
<PARAM NAME="textfile" VALUE="text2.txt">
<PARAM NAME="fontface" VALUE="Arial">
<PARAM NAME="fontstyle" VALUE="plain">
<PARAM NAME="fontbold" VALUE="on">
<PARAM NAME="fontsize" VALUE="12">
<PARAM NAME="reset" VALUE="on">
</APPLET>
</CENTER>
</TD>
</TR>
<TR><--The start of the Table, that is the Green Bar under the Drop Boxes.
<TD WIDTH="28%"> </TD><--These are Table sections that have nothing displayed in them, just the color green.
<TD WIDTH="27%"> </TD>
<TD WIDTH="30%"> </TD>
</TR><--End of that section
</TABLE><--The end of the whole Table.
</P><--The end of the paragraph.
<CENTER><--This tells the Browser to center the next Table on the web page.
<P><BR><--This puts a space between the two Tables.
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="525"><--The start of the Table where the picture of the Device Manager is.
<TR><--Start
<TD WIDTH="45%" VALIGN="MIDDLE" BGCOLOR="white"><--Start
<P ALIGN="CENTER"><B>This is the Device Manager Screen</B></P><--Tells the Browser to show these words and to center them in that Table section, the <B> </B> tells the browser to show the words in Bold print.
<P ALIGN="CENTER">I have clicked on the CD-ROM drive, then went to- Properties-Settings Tab,Check the Auto insert
notification box, for it to Auto Run CD's<--Again tells the browser to show these words, but they are not Bold this time.
</TD><--End
<TD WIDTH="400"><IMG SRC="http://mikescomputerinfo.com/images/autorun.gif" WIDTH="400" HEIGHT="301" ALIGN="BOTTOM" ALT="Autorun.gif"
BORDER="0"></TD><-- This line from <TD> to< /TD> is where the Browser is told to find the Picture of the Device Manager and to display it on the page.
</TR><--End
</TABLE><--The end of this Table
</BODY><--This tells the browser that this is the end of what to show on the web page.
</HTML><--This tells the Browser that this is the end of the HTML code and the end of the page.
The < > tell the Browser not to display this on the Web Page, but only works on the source code page. Anything inside the brackets, is not displayed by the Browser. |
|
This section would be the <TR> </TR>
Well that is a Basic Lesson in what makes a Web Page tick, I hope it gave you alittle insight on basic HTML and how a web page is made and how it works. : )
|
|
TD section
|
<TD></TD> section
|
TD section
|
|
|