El Nopalito's HTML Starter Kit

  <HTML> 
What is it?
HTML Hyper-Text Markup Language i.e. it is a higher-level programming language. This means the code used is translated by the browser into "operating system code" which then in translated into another language, and maybe then binary-code, which the computer understands and spits it out in a format we understand.

What do I need?
Target Auidence
The Intelligent User. I am sick and tired of "help pages" that only expalin everything a elementary school child could figure out. I have had some programming experience in high school and elementary school, but basic principles are all the same, you begin something and end something; the method of programming. So with this annoying introduction, I will present the syntax with little commentary so you can begin programming right away.

How do I get published?
What's here?

Final Notes
If you have been here before and only want the code, click the HTML tag at the top of the page
Please read my DISCLAIMER.


The Basics


This is a tag:
  <html> 

Tags tell the broswer something is going to happen inbetween the opening and the closing tag, relating to the tag name.

   <HTML>    </HTML>  


So in this case, the HTML document will fall inbetween these two, and this is where the browser searches for it.
For a HTML document here are all the basics to get it open, the absolute minimum.
<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>

Click here to see what this would look like.

Points to Consider


Elaborations

Most of the tags can be modified.

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

Note about background colors: background colors can either be a name like red or a hexadecimal value like #FFFFFF. I am not going to get into the details, because I quickly run out of intelectual steam. But, there are limited words for colors and not all browers support "word" values. For the hexadecimal system, it is based on a base 16, 0-9,A,B,C,D,E,F. The web safe colors are in groups of threes.   00,33,66,99,CC,FF. To get the grey of a Macintosh background, use bgcolor="#CCCCCC". To see a complete chart: the web safe colors.

In the body, there are tags that organize the text. I will list more properties which can modify the <body> tag later.


<p> 
a new paragraph = a space (this tag does not have to be closed all of the time.)
<center> center what follows </center> <i>italics</i> <b>bold</b> <u>underline</u> <s>stikethrough</s>
All of these could be combined if you wanted. Just open each tag on the left side, and close them on the right.
It would be a real ugly mess. <br>
To return a line (these tags also do not need to be closed.) Which can be enhanced with
<br clear=all> <br clear=left> <br clear=right>
This is particularly useful with images. If you use more than one, what follows returns a line, so you have a clear space. They work like a <p> tag, but seem better in certian instances. For headings, you have seven levels to choose from, I will show only three.

<h1>Heading Level One</h1>

<h2>Heading Level Two</h2>

<h3>Heading Level Three</h3>

There are seven "built-in" font sizes which can be adjusted by using this tag:
<font size="3">
and substitute 1 - 7. Additionally a more flexible approach can be done by implenting:
<font size="+2"> or <font size="-2"> Just don't forget to close the </font> tag. The default font size is "3".
While we're here, it's nice to know how to change the color without doing it in the body tag.
<font color="red"> It does this
Don't forget the hexadecimal system.
<font color="#FF0000"> It does this too. Those are ZEROs not big Os

<pre>

It would just look like this.

To see exactly what you type, minus the tag brackets you use this tag.

Just make sure you close them

<hr size="3" width=50% noshade>

That's how you you make the cute little lines that break up the monotany of this page up.
noshade is an option that I didn't use.
The horizontial rule is three dimesional. You'll see that if you make the size really big. Same thing with image borders,table borders, etc...


To return to the <body> tag.

A full <body> tag can have the following attributes:

<body bgcolor="blue" link="red" vlink="yellow" text="#CCCCCC">

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.


Images

<img src="URL" border=0 vspace=0 hspace=0 name="bob" align=right valign=top height=100 width=100>

That's quite near the full spectrum of attributes. You don't need them all, just:

<img src="URL">
And that will throw an image right in there. By the way, if you don't know what a URL is, it's the address in the location box of your browser. It goes: http://www.somewhere.com In a web site, you normally can refer to an image by using the filename/imagename.JPG if the file is in a "lower" folder. Using refrences to names in other folders or folders higher in a heirachy get messy and the whole URL is easier to use than mess with folder translations.

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



Links

<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



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.
Meine Gute!
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>
Meine Gute!
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>
Meine Gute!
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>
Meine Gute!
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


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.

  1. 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.
  2. This format can be a pixel length, height, or precentage.
  3. 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.
  4. You MUST HAVE a src="" and a NAME="" for each frame. Otherwise the browser is lost.
  5. 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.
  6. 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.
  7. 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.

That's it to get you started HTML programming.
I will add a DHTML page and the basic JavaScript I know later.
For now, that's enough.


If you would like to, contact me.
otherwise
Return Home