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?

Broswer (i.e. Netscape, Internet Explorer, etc..)
Text-Editor (I prefer this over all "do it yourself kits")
internet access (If you want to publish your web page)
email account or money or both
ws-Ftp (optional)
lots of time or "passion"

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?

If you have access at home and use an ISP (Internet Service Provider), they should offer some web publishing space and support.
You have an email account period. Then you can sign up for any free web publishing space. I can't endorse anything from this site, you can email me instead. The provider for this space is Tripod and you can also viist my home page for another superior provider.
you don't want to publish but wish to use HTML/Browser formats to see/run certian things. HTML is then for you too. With it you can make you own interactive enviroment without a fuss about expensive software. I admit that this idea is not all too common, but it is a good idea nevertheless.

What's here?

Code for text formating; for images, links, tables, and frames.
Minor commentary for the The Intelligent User.
An "instant" Text-Editor version of a "complete" HTML document. Click the HTML link above.

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

Remember that <HTML> , <html> and <HtMl> are all the same.

You can always see what code is used to generate a web page by finding the "View Source" option on your Browser. In Netscape it's under the heading "View".

The reason I used the simple Text Editor is because complex word processors put "hidden" characters inbetween your text in order to denote paragraphs, returns, spaces, hyperlinks (now), tabs, and fancy stuff. About the only thing you have to worry about with a text editor is the returns, and that is only with certian severs. But more than that; it's cheap, quick, you hve absolute control (including mistakes), which means you have to learn the code well. Fortunatly, because HTML is a higher-level language, you only have to memorize about 50 tags. in C++ or Turbo Pascal say, there are many many more, plus you need as complier. I actually do not own a computer yet, so being able to design web pages is neigh free.

HTML Code is conventinaly written in UPPERCASE LETTERS so that, I assume, it's easy to read. Well. I have two probelms. One, it's a pain in the ass to go back and forth from capitalized to uncapitalized and two, it's unneccessary because all the tags are bracketed, and that makes them easy to see.

The META tags are used by search engines for quick access to content without searching the entire page. There are other ways to flag search engines, but I am not that advanced yet. These are some of the very few tags which don't have to be closed all of the time.

Normaly one creates a web site before publishing. This means they make the site on their computer along with file names and internal link cordination and then upload the entire site using WS-ftp for PCs (IBM compatiable) or FETCH for MACs. Otherwise, it's a file by file upload, but only if the server you use has their own publishing software like Geocities or Tripod, through an HTML interface (Web Page).
To do this, you make your file with the TextEditor and then save it on your computer. You "open file" with the option in the Free-Web-Page Provider's upload options menu. It's that simple.

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

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:

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

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

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.


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.

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