HTML Table

ogeretla's

~ Simple ~

H T M L

Home Page Building

For Webtvers

Basic HTML Table

Introduction to Codes

You will see these refered to as tags, codes or commands. They are three different names for the same thing. They are all contained within lesser than and greater than signs

< >

. They can be written in capital or lower case or a mixture of both. Everything between the signs are read the same by the viewing browser. Most all, except for a few, require an

and <<>/closing> command. All HTML Documents must begin with an

and end with an

command with everything else going between them. This is a table of the most common you will see and use to begin with. It is just meant as a start to basic html to help you uderstand the more inclusive tables.

This is a line break command. It requires no closing tag. It is used at the end of every paragraph directly after the last period and tells the browser to put nothing else on this line from this point on. Used by it's self it creates one entire empty line space.

NOTE: In addition to using the line break at the end of every paragraph you should also get use to using it after ANYTHING that you don't want any thing else to appear on the rest of that line. For instance if you wanted an image centered and nothing else to appear to the right of it, it certainly couldn't hurt to give a browser specific instructions not to even try it. I will show you the example then won't use it any more in the tutorial but just get in the habit of using it freely when you want nothing else to appear any farther on the line you're putting something on.

<<>center><<>img src="URL"><<>/center><<>br>

</plaintext></center> This is a paragraph tag and causes one empty line space between paragraphs. It requires no closing tag. If you want more than one empty line space you must use multiple line break commands, like this: <plaintext> </plaintext> <plaintext> </plaintext> The line break and paragraph commands are used in tandem throughout your text pages. End of paragraph.<<>br> <<>p> Begining of next paragraph repeating Line Break at end. <center>Bold</center> <center><plaintext></plaintext>makes text bold<plaintext></plaintext></center> <center>Strong <<>strong>Different Bold<<>/strong></center> <center>Italics</center> <center><plaintext></plaintext>makes text italicized<plaintext></plaintext></center> When using more than one code the closing codes should be closed in reverse, like this: <center><plaintext></plaintext>close tags in reverse<plaintext></plaintext></center> <center>Underline</center> <center><plaintext></plaintext>uderlines text<plaintext></plaintext></center> <center>Strike</center> <center><plaintext><s></plaintext><s>puts line through text</s><plaintext></s></plaintext></center> <center>Typewriter</center> <center><plaintext><tt></plaintext><tt>makes typewriter text</tt><plaintext></tt></plaintext></center> <center>Super Script regular<<>sup>Makes Text Super Script<<>/sup>regular</center> <center>Sub Script regular <<>sub>Makes Text Sub Script<<>/sub>regular</center> <center>Center</center> <center><<>center>this is how you center<<>/center></center> NOTE: Since the last webtv upgrade the center tags don't work in the webtv sig box anymore. Now you should use <plaintext><div align="center"></plaintext> then your text and/or images <plaintext></div></plaintext> to center in the webtv sig box. Center tags still work for web pages. <div align="center"><plaintext><div align="center"></plaintext>This centers too.<plaintext></div></plaintext></div> <center>Font Size and Color Tags</center> There are seven sizes of text 1-7. 3 is normal size. In tags the number should always be embedded between quotation marks. Webtv is very forgiving in bad html grammer and you will see many tutorials instructing you to make the next larger font size as <plaintext></plaintext>text here<plaintext></plaintext> that's ok for webtv but if you want all computer browsers to see it, it must be written correctly which is font size="4". It freaks some computer browsers out and they won't render it. This is how the font size tags look and what size they render. Notice there must be a space between font and size. <plaintext></plaintext>very small text<plaintext></plaintext> <plaintext></plaintext>a little larger text<plaintext></plaintext> <plaintext></plaintext>this is normal size text<plaintext></plaintext> <plaintext></plaintext>a little larger than normal<plaintext></plaintext> <plaintext></plaintext>large title size text<plaintext></plaintext> <plaintext></plaintext>this is really big<plaintext></plaintext> <plaintext></plaintext>as big as it gets<plaintext></plaintext> You can change the color of text as well as the size with html. Using regular size text you would not have to use a size. Examples for changing colors. You should use Hex code numbers for the color. Those can be found under "Color Charts" on our <a href="linkpage.html">ogeretla's F-Key Saver Link Page</a> that accompanies this notebook. To keep it simple browsers do recognize basic colors written in text. Don't go overboard and try to use "Kathy's Easter dress pink." Also notice there must be a space between font size="4" and color="green". <plaintext></plaintext>no size needed on regular size text<plaintext></plaintext> <plaintext></plaintext>yuk, what a color clash :-(<plaintext></plaintext> You can also add effects to the font tags. These are webtv only. <<>font size="4" color="gold" effect="relief">Text Goes Here<<>/font> <<>font size="4" color="gold" effect="shadow">Text Goes Here<<>/font> <<>font size="4" color="gold" effect="emboss">Text Goes Here<<>/font> And you can mix and match text and font tags to: <<>font size="4" color="gold" effect="emboss"><<>b><<>i><<>u>Text Goes Here<<>/u><<>/i><<>/b><<>/font> <a name="heading"> <h4 align="center">Heading Tags</h4> Heading tags are designed to go in the body portion and are quicker and easier to write than font tags. They are quite similar to font tags and range in size 1-6 with 1 being the largest and 6 being the smallest. They align left, right or center and automaticly create an empty line space above and below each one. Also this is an exception where we don't use a line break command after the code because the heading tag automaticly creates an empty line space above and below it and if we add the <<>br> it would give two empty line spaces below it. <h1><<>h1>Size 1<<>/h1></h1> <h2><<>h2>Size 2<<>/h2></h2> <h3><<>h3>Size 3<<>/h3></h3> <h4><<>h4>Size 4<<>/h4></h4> <h5><<>h5>Size 5<<>/h5></h5> <h6><<>h6>Size 6<<>/h6></h6> You can also, like fonts, add other effects with tags. <<>font color="blue"><<>b><<>i><<>u><<>h4 align="center">Heading Tag<<>/h4><<>/u><<>/i><<>/b><<>/font> Would give you this: <h4 align="center">Heading Tag</h4> <center>Anchor Tag (Clickable Link)</center> This makes the highlighted text that you click on that takes you to another page. The a stands for anchor and the (h)ref stands for reference. There must be a space between the a and href and leaving a single quote out will make it not work. To demonstrate how it works click on the text and it will take you to the first page of the notebook, hit your "Back" key to return to this page. URL means Uniform Resource Locater and is merely another way of saying "Address" (Addy) and works like the address of your house telling the browser what page address to take you to. <<>a href="URL"><a href="notebook.html">First Page of Notebook</a><<>/a> <center>Image</center> img src stand for image source. For just basic putting an image on a page or in a sig box the first code will do. When you have learned to use web tools you really should size your images to make your sig and web page load faster. The second code shows how to write that. You can also place the image with the align command (watch for spaces). If you don't put an align command the image defaults to the left margin. There's detailed instructions on page five as to resize an image to any size you want by using html code. Images are either gif or jpg (sometime written as jpeg) format. This image gives permission to link to or transload to your own files. The address of this image (gif) is: http://homepages.infoseek.com/homepages/s/w/e/swe3/exclame.gif <<>img src="imageURL"><img src="img/exclamation.gif" height="24" width="24"> <<>img src="URL" height="24" width="24"> <img src="img/exclamation.gif" height="24" width="24"><<>img src="URL"> <<>img src="URL" align="center"><img src="img/exclamation.gif" height="24" width="24" align="center"> <<>img src="URL" align="right"><img src="img/exclamation.gif" height="24" width="24" align="right"> <center>Sound</center> This is the code for putting sound on your page or in your sig box. A full tutorial on many options dealing with your sound can be found on page four of the Notebook. <<>bgsound src="URLofsound"> No closing tag needed. <center>Embed</center> With embed tags you can embed sound, image or an entire web page. Embed tags require an opening and closing tag back to back with no space between them. <<>embed><<>/embed> When you embed sound it shows a small speaker. Computers can not see them as this is a webtv only thing. Here's an example for embedding sound: Embed Sound <<>embed src="URL-of-sound"><<>/embed> The above example gives you this: