Html in a box
- 1. Html guts This presentation, will teach basic Html code B Dubuque
- 2. The main parts of an Html page All Html commands are in brackets eg <COMMAND> When a command ends a slash appears in the brackets eg </COMMAND> All Html pages usually contain the following commands in the following sequence. <HTML> begins the page. <HEAD> defines parameters by which the page is set. <TITLE> the TITLE of your page that is displayed in your browser header. The TITLE command goes within the HEAD command. </TITLE> ends (or closes) your title command. </HEAD> ends (or closes) your HEAD command <BODY> begins the content area </BODY> ends (or closes) the content area </HTML> ends (or closes) the page B Dubuque
- 3. Index.html Index.html according to Internet standards is the first page of any website, and is the page ALL search engines search for when listing and ranking websites. For this reason there are additional COMMANDs on this page besides those previously listed. <META NAME="Description" content=“ (list description) “> <META NAME="keywords" content=“ (content keywords) “> The Meta description is what will appear as the description when found by a search engine. The Meta keywords is what the search engine searches for, and how It ranks your website for content. B Dubuque
- 4. Body, body who’s got the BODY ? As I said, the Index page is the first page of your standard Internet website. Yet it does not always have body (or content) on it. Many times for various, or perhaps even devious reasons there is no content on the Index page. One such reason may be to hide the content code from prying eyes, but perhaps a better reason is the code itself. The Index page is often used to setup, and layout the design and function of the rest of the pages of the website. If a page has what is called FRAMES, the index page is used to set the FRAME pages up, and the BODY (content) is then displayed by pages that load after it. In such a case the FRAME pages are usually divided so that a navigation Menu can be displayed in the same browser window, as the content. Eg. <FRAMESET rows="150,*"> <FRAME SRC="header.html" NAME=header> <FRAME SRC=“main.html" NAME=main> </FRAMESET> B Dubuque
- 5. BODY of evidence Within the BODY of an HTML page, the content of the page is formatted with a number of different commands. In addition to the commands within the BODY The BODY command usually has a string of commands within it’s statement. Eg.. <BODY BGCOLOR="000000" TEXT="FFFFFF" LINK="FFFFF0" VLINK="800080" ALINK="FF0000"> The code above sets the default background color, text color, link color, Visited link color, and active link color. The colors in HTML code are always a group of six alphanumeric characters. In other codes such as JAVA You may see something different. If you have a wallpaper background, this also is listed in the BODY command statement. B Dubuque
- 6. More on the BODY The following is a list of commands commonly found within the BODY or content of a page. <P ALIGN="left"> aligns the paragraph left <P ALIGN="justify"> justifies the paragraph <P ALIGN="center"> centers the paragraph <P ALIGN="right"> aligns the paragraph right In all the above commands </P> ends (or closes) the paragraph. <BR> creates a linebreak in the format. Often used for spacing objects or text on the page. <HR> creates a line on your page. There are additional commands for this statement that set the width, thickness, bold, or shadow. B Dubuque
- 7. Changing fonts Fonts can be changed within the BODY using the FONT command as follows. <FONT SIZE=“+2" COLOR=“FF0000" FACE="Arial, Helvetica"><STRONG><EM> - Your text goes here - </EM></STRONG></FONT> The above example changes the size, color, type face, and adds bold along With italics to the font. Any text is within the setting and ending statements. The text would look something like this.. -Your text goes here - When a type face is used, in many instances more than one type face is listed in order for the effect to be compatible in all browsers. B Dubuque
- 8. Adding graphics Graphics are added by using the IMG SRC command as follows.. <IMG SRC=“graphic.jpg"> You can manipulate the size, placement, add a border, or no border of the graphic on the page by adding additional commands to the statement. Eg.. <IMG WIDTH="150" HEIGHT="120" SRC=“graphic.jpg" BORDER="1" ALIGN="left" HSPACE="150" VSPACE="120"> B Dubuque
- 9. RAW code.. <HTML><head><title>Our Earth</title></head> <body bgcolor="FFFFFF" text="000000" link="FFFFF0" vlink="800080" alink="FF0000""> <IMG SRC="world.gif" WIDTH="120" HEIGHT="137" BORDER="0" ALIGN="left" HSPACE="10" VSPACE="10"> <BR><BR><HR WIDTH=400><CENTER> <FONT SIZE="+2" COLOR="0000FF" FACE="Arial, Helvetica"><STRONG><EM>- OUR EARTH -</EM></STRONG></FONT></CENTER><HR WIDTH=400> <BR><P>Our Earth is a mighty fine place to live. We have our problems like any other planet. Yet I can't imagine any place more hospitable than this. Out of all the planets in our galaxy, there is none as fine as the one we call home.</P><P ALIGN="center">B Dubuque</P></BODY></HTML> B Dubuque
- 10. - OUR EARTH - Our Earth is a mighty fine place to live. We have our problems like any other planet. Yet I can't imagine any place more hospitable than this. Out of all the planets in our galaxy, there is none as fine as the one we call home. B Dubuque B Dubuque
Editor's Notes
- #3: It is not necessary to capitalize HTML commands, it is however considered NETiquette, and makes troubleshooting easier.
- #4: Tweaking the Meta description, and the Meta keywords is often the difference between a successful website, and an unsuccessful one.
- #5: The above FRAMESET command opens a browser window and divides the window top and bottom. Two html pages header.html and main.html will have the BODY (content) portion of the page on it. Remember, this being the index page the META commands will also be on it.
- #11: An example of what the previous code might look like. Thanx for watching..