<HTML>
<html>
<HTML> </HTML>
<HTML> <BODY> </BODY> </HTML>
That's it. Everything else is supplemtary. A full basic document which can be adjusted:
<html> <head> <META NAME="keywords" CONTENT="enter keywords here"> <META NAME="description" CONTENT="enter a description here"> <META NAME="author" CONTENT="enter your name here"> <title> Title Name </title> </head> <body> <!-- Comments are inserted like so --> Text, pictures, links, etc.. go here. </body> </html>
Points to Consider
For the <body> you can specify a background color or a background image.
Note about background images. An image will be immediatly tiled unless you can use some DHTML (Dynamic HTML) code. DHTML is not universal and only elaborates on traditional HTML. It's really useful for highly complex pages because it gives more control on visual fonts and colors and can be referenced by more than one page. But, not all browers support it which makes it more limited to intranet or specific users, and means you have to write a lot of backup code for non-DHTML browers, which is inconvient for a hobby.
<body bgcolor="#FFFFFF"> or <body background="URL of Image">
In the body, there are tags that organize the text. I will list more properties which can modify the <body> tag later.
<p>
<pre>
It would just look like this.
Just make sure you close them
<hr size="3" width=50% noshade>
A full <body> tag can have the following attributes:
That's link for a link.
vlink for a link that has been visited.
text for the color of the text.
There are more ways to manipulate these, but it requires some DHTML.
I'll get to that later.
<df>
<dt>DEFINITON TITLE</dt>
<dd>This is the place to tell everyone what is going on.</dd>
</df>
This makes the cute deffintion format, where you have a title and then an indention for the "deffintion".
<ol type=1 start=425>
<li> list item </li>
<li> list item </li>
</ol>
This is a list. A list automatically numbers everything or puts a bullet by it. I nested a list in the deffinition heading and that's why my list is indented at the very top. The ol stands for ordered list. You can also make an uordered list by using <ul> With an ordered list you specify the type, which is a number or a letter, and probably a few other things too. Obviously from looking at the code you can see that you can also specify where the numbering begins. Unorderd lists can use images for bullets, special DHTML for fancy bullets, and so on. I haven't bothered with them yet because the practicality of exotic bullets is for comsumer based pages in my opinion, which normally increases downloading time and is not THAT much more interesting.
That's quite near the full spectrum of attributes. You don't need them all, just:
The attributes are: border the border around the image: important when you want image links to be blended into the background vspace the vertical space around the image in pixels hspace the horizontial space around the image in pixels name the name of the image: important for refrences later. align this is the alignment in the total window and independent of the text. it can be left or center or right valign is the alignment of the LINE of TEXT. IF top then the text will start at the top of the image, this is the default choice and why it is sometimes prefered to use the <br clear=all> tag. bottom will give one TEXT line at the bottom and then everything else goes under the image. height in pixels or percent if you want width in pixels or percent if you wish
<a href="URL" target="_self"> image or text </a> This tag is called the Anchor Tag and is a really rich and complex tag. So complex, I ignore it at my level. href is the address the browser will open the next page to. You are already used to that I am sure. Remember to always close your tags. One REALLY IMPORTANT NOTE. Make sure the closing anchor tag, </a> is right next to the end of the link. Otherwise, a small space is admitted after the link and you can see it on your browser. This happens with text and images. examples:<a href="#">This is a tight link</a> This is a tight link <a href="#">This is a gapped link </a> This is a gapped link These are "false" links and images. Don't be alarmed. They only go here, to this page. Notice what happens when I add border=0.<a href="#"><img src="" width=50 height=50 border=0></a> I hope you also realize that when I use italics it's only for emphasis and not used in actual HTML code, in fact olny the text is reconginized. The "#" symbol is used when refrencing a link which is in the page you are currently looking at. The target property (i.e. target="_self") can be ignored, unless you are using FRAMES. Then it is critical you use it correctly, otherwise your links will either not go anywhere or they will be stuffed in one frame window and continually cascade like your image inbetween two bathroom mirriors.<a name="internal_link_name"> In your text file you put this for a internal link.<a href="#internal_link_name">Watch me jump</a>. Somewhere else in your HTML file, this is what you put. Usually at the top of those really long text pages in an index which has you jump down to the part you want to read. Look down at the bottom of the browser where it probably says "Document:Done". This is the Status Bar. When you move the mouse over the link, see what comes up. That way, you can check my work.Watch me jump. The target attributes are: target="_self" this opens the new HTML file in the current browser window, including if the link is in a frame window, it doesn't over-ride the frame-HTML page target="_top" this opens the new HTML file over the frame-HTML page, that is if you using frames, then the new link replaces the frame page, and normally will "escape" a link out of frames, but not always, it's best then to open a new window. target="_parent" this goes to the top of the frame-HTML heirachy and loads the HTML link into the proper location of the first frame page. This is useful when you open frames inside of frames and want to "break out" but not "destroy" the main frame format. target="_new" or target="_blank" these open new windows. Supposedly only _blank works on all browsers, but I never have had a problem. This is probably the one you want to use right away until you feel like throwing FRAMES into your programming-kit. target="name_of_frame_window" or "name_of_other_open_window" When you create a <frameset>, each frame needs a name. These names are then used for refrence when sending links all over the place. They are also neccessary, and useful later for JavaScript manipulations. Additionally you might want someone to email you. To do that you use the mailto.<a href="mailto:your_email@bla.bla.bla">bla bla bla</a> There are fancy things which you can do with the Anchor Tags. As I said, there is a rich collection of variables for them. Later, I will show you how to use a little JavaScript to make buttons and other annoying things. These use the Anchor Tag.
Tables are by far, the most versitle tool of HTML. Even with DHTML, usually called cascading style sheets (CSS), tables allow much more maniuplation of the screen space for carpentilization of information, or formating. The main point to remember is, it is dependent on your imagination. Just remember, most really fancy and complex pages are table driven because they offer greater percision control in the felxible world or HTML. An important note to remember. One of the difficult things about this site is that you might have to scroll to see all of the text horizontially. This is because I used the <pre> tag to demonstrate most of the HTML. If I didn't, when you resize the browser window, all the information would reload according to the tag properties adjusted to its new size, including text wrapping in the browser window.. That's why <center> always centers everything and HTML has its special place in the world as the all fitting shoe. A lot of the flexiblity is fought by more complex programming, which creates more overhead and reduces your potiental auidence. Enough preaching, on with programming. A table has rows and columns What is unique in HTML is, you only have to specify the rows. The browser is "smart" enough to figure out how many columns there are. A rightous table is: <table border=2 cellspacing=0 cellpadding=0 bgcolor="white" align=center> <caption align=bottom> Meine Gute! </caption> <tr> <td> Cell 1 </td> <td> Cell 2 </td> </tr> <tr> <td> Cell 3 </td> <td> Cell 4 </td> </tr> </table> This is a table with two rows and two columns each. This is what it looks like.
Cell 1 | Cell 2 |
Cell 3 | Cell 4 |
Each cell can be adjusted: <td width=100 height=50 bgcolor="blue" valign=bottom align=right> Cell 1 </td>
Cell 1 | Cell 2 |
Cell 3 | Cell 4 |
Or the entire table can be manuiplated Note: each cells contents will display if present however, so content overrides <table> formatting, and this makes it critical to specify each item when creating very intricate tables. <table border=2 cellspacing=10 cellpadding=20 bgcolor="red" align=center height=200 width=400>
Cell 1 | Cell 2 |
Cell 3 | Cell 4 |
Finally, you may want one row or column to be a header/footer of some sort. This is accomplished by using rowspan or colspan. Be careful, these can get tricky like mixing up 5'to 3' as you flip back and forth when thinking about how DNA is synthesized. Adding of colspan. Make sure you are exact on the number of columns/rows. Although you can just specify rowspan=99 sometimes it makes your table do funny things. It's better to be exact.<td colspan=2> Cell 3 </td> Our final table: <table border=2 cellspacing=10 cellpadding=20 bgcolor="red" align=center> <caption align=bottom> Meine Gute! </caption> <tr> <td width=100 height=50 bgcolor="blue" valign=bottom align=right> Cell 1 </td> <td> Cell 2 </td> </tr> <tr> <td colspan=2> Cell 3 </td> </tr> </table>
Cell 1 | Cell 2 |
Cell 3 |
Please notice that "Cell 4" had to be elimited, otherwise "Cell 3" could not span the extra column, there would be something in the way.
Frames are not any more tricky than tables. What can get complicated is that everthing, frames, tables, deffinitions, fonts, can all be nested within eachother. So, if you don't plan a little, you could spend some valuable time unwraveling the mess. It's always best in that case to erase everything and start over. It's faster and better the second time around. The code. <html> <frameset cols="200, *"> <frame src="URL" name="the_frame_name" marginwidth=1 marginheight=1> </frame> <frameset rows="50%,50%"> <frame src="URL" name="the_frame_name" marginwidth=1 marginheight=1> <frame src="URL" name="the_frame_name" marginwidth=1 border=0 marginheight=1> </frameset> </frameset> <no frames> Way ol' school. Please click here. </no frames> </html> Let's go through it.
- Notice: there are no <body> tags. This type of HTML document is a "refrence" HTML. It merely redirects the incoming HTML files into a predefined format.
- This format can be a pixel length, height, or precentage.
- To make columns, you use cols="". To make rows, you use rows="". You then make a list of column/row dimensions for however many colmuns/rows you want inbetween the quotation marks. For each column/row, you can then ascribe a frame or another frameset.
- You MUST HAVE a src="" and a NAME="" for each frame. Otherwise the browser is lost.
- Close all tags, excpet <frame> tags unless you are addressing frame attributes in between the frame tags, then you must close them. Otherwise the browsers do it automatically for you.
- Border is how to get seamless frame pages. You know the kind kind that look normal but you can scroll with 3/4 of it and not the 1/4 on the left side.
- For anyone out there in Internet-Land that still doesn't have a browser that supports frames, then give the person somewhere to go with the <noframe> tags. A HTML file organized with tables will look the same if you really love the format. You just won't be able to load any links into a table cell without rewriting the entire page (which can be done - but it's a lot of un-neccessary work) when coding everything by hand. AS I said before, the large intricate pages you find on occassion when surfing, or the multi-linked help pages, HTML resources, etc. more than likely have a database of HTML, links, refrences, text and so forth and use Pearl or C++ to create the remaining output HTML as the URL is downloading. I actually do this with some of my JavaScript pages, as does some other sites I have visited.