This text is replaced by the Flash movie.
 

Site Map | Computer Help | XP Help | Message | Articles | Games | Puzzles | Fun | Quizzes | Build Computer | Remodeling | Misc | Web


A Basic Lesson in HTML

When you have your browser open to a page and view the Source Code of a page, that is the written Language that is used to make that page visible to your Browser.

What I am going to do, is break down the Source Code of this page and explain what each line of code produces on this Web page.

We will start off with all the Source code of the above page shown and an explanation of each line of code written in red.
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.

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

<link rel="stylesheet" href="mikes.css" type="text/css"> --Link to Style Sheet.

</HEAD>This tells the Browser that this is the end of the Head Information.

<body>This tells the Browser that this is the Start of the web page, what you actually see on a page.

<div>This tells the Browser that a new paragraph is starting and ending.</div>

<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="#003399"><--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.

</Td><--Another end to a data field of the Table.

</TR> <--Another end to a Row 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 table row

<TD width="536"><--Start table data field

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

</TR><--End table row

</table><-- Tells the browser this is the End of this Table.

<div align="center"><--This tells the Browser to center the next Table on the web page.

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

<TD width="45%" valign="MIDDLE" bgcolor="white"><--Start data field

<div align="center"><B>This is the Device Manager Screen</B></div> <--Tells the Browser to show these words and to center them in that Table section, the <strong> </strong> tells the browser to show the words in Bold print.

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

</div><--End div that centered 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 section
TD section

 


Copyright © 2007, Mikescomputerinfo.com, All Rights Reserved.
Reproduction of information on this site, is prohibited without written permission.
Microsoft is in no way affiliated with, nor offers endorsement of this site.