Yet an other HTML Tutor

The Minimum ---------------

<HTML>
Stuff Stuff

</HTML>
The Most usual basic stuff ------------

<HTML>

<HEAD>

<CENTER>

<TITLE>

Your Title (in top of browser)

</TITLE>

</CENTER>



<CENTER>

<H1>

This is the header, H1 is the largest, than H2, H3 .. to H6 (smallest)

</H1>

CENTER>



</HEAD>

<BODY>



All the pictures, Links, text and special stuff goes here.



(NOTE Frames is a special case replacing BODY)



</BODY>



</HTML>






BASICS OF HTML  


The tags HTML, HEAD, TITLE, BODY are most of it





GENERAL (all HTML documents should have these)
Document Type... <HTML></HTML> (beginning and end of file Tells the browser it is a HTML document) 
Title........... <TITLE></TITLE> (must be in header. Shows in the top bar of the browser. Not actually requires, but a good idea.) 
Header.......... <HEAD></HEAD> (descriptive info, such as title) 
Body............ <BODY></BODY> (bulk of the page) 


First a sample of a complete (but small) HTML document




<HTML> 
<HEAD> 

<TITLE>My First Web Page </TITLE> 

<H1>My First Web Page </H1> 
</HEAD> 

<BODY> 
<BR> 
<BR>Damm,         My first real home page

<BR> 
<BR>Wonder how it works? 
<BR> 
<BR>This must be saved in a file as a file with the extention or 
<BR> .HTM or HTML 
<BR>Such as MyPage.htm or MyPage.html. 
<BR> 
<BR> 
</BODY> 
</HTML> 




Well, How does it look?


My First Web Page 










My First Web Page 


Damm, My first real home page





Wonder how it works?





This must be saved in a file as a file with the extention or


.HTM or HTML


Such as MyPage.htm or MyPage.html. 














 You will notice also that everything starts on the left side.

You notice is all those things surrounded with angle brackets such as < and > (Called TAGS) do not show. 

You will also notice that only one of the spaces shows.

 Not shown, but long areas of text will not show in seperate lines as they are typed, but WRAP, so it will not show line breaks and new lines. 

 Than you notice that lines only BREAK with the BREAK Tag <BR>. HINT That is to prevent Wraping.

You notices the <H1> tags. This is used in the HEAD for sizes of letters. See below.

Needless to say, there are ways to get anything you want, any way you want it.







 <H1>These are called "HEADINGS" and are designed to use ONLY between </H1> <HEAD> and </HEAD>

 <H1>This is a H1  HEADING </H1>

 <H2>This is a H2  HEADING </H2>

 <H3>This is a H3  HEADING </H3>

 <H4>This is a H4  HEADING </H4>

 <H5>This is a H5  HEADING </H5>

 <H6>This is a H6  HEADING </H6>



There are only six


 


 Many browsers allow them between <BODY> </BODY> but they do not work in some cases.




SOME NARATIVE ABOUT HEAD



The head element identifies the first part of your 

HTML-coded document that contains the title. The title is 

shown as part of your browser's window. 



If you use in the <HEAD> section <BASEFONT SIZE=X> 



For that, the # 3 is normal size text. Any plus or minus are 

up and down from that.

Headings


HTML has six levels of headings, numbered 1 through 6, with 

1 being the largest. Headings are typically displayed in 

larger and/or bolder fonts than normal body text. The first 

heading in each document should be tagged <H1>. 

The syntax of the heading element is: 

<Hy>Text of heading </Hy> 

where y is a number between 1 and 6 specifying the level of 
the heading. 

Do not skip levels of headings in your document. For 

example, don't start with a level-one heading (<H1>) and 

then next use a level-three (<H3>) heading. 



HEAD contains information about the document. <H1> TO <H6> 

are technically designed to fit here. Many browsers read 

them in the body.








 


 <FONT ... > </FONT> are prefered since it allows more options (But that is an other story.)





Basic FONTS Rendering (Click Here) .

<===This image is tiled to cover the whole background.


 In this other example the colors are defines in HexiDecmal (or just pick 

one from the chart)


 <BODY  BGCOLOR="#FF6666" TEXT="#884444" LINK="#44FF44"   VLINK="#7777FF"   ALINK="#000000">




 BACKGROUNDS AND COLORS  (order is red/green/blue)



Check Out Colors (Click Here)

BGCOLOR #FF6666 TEXT #884444 LINK #44FF44" LINK #7777FF ALINK #000000 








 ---------------------------------------------------

 Tiled Bkground.. <BODY BACKGROUND="URL">  Generaly a .GIF or .JPG. Works the same way as tiled WINDOWS wall paper.

 Bkground Color.. <BODY BGCOLOR="#rrggbb"> The whole background is this color. Not used at the same time as the BACKGROUND, above.

 Text Color...... <BODY TEXT="#rrggbb"> Default TEXT color

 Link Color...... <BODY LINK="#rrggbb"> Hyperlink color

 Visited Link.... <BODY VLINK="#rrggbb"> If a link is visited it turns this color.

 Active Link..... <BODY ALINK="#rrggbb"> Default color for something.







PREFORMATED TEXT TAGS

There are several but they all work the same as PRE with noted exceptions.


 

   <BLOCKQUOTE>  Characters     </BLOCKQUOTE> 

Everything within the tags wraps and needs paragraph breaks but it 

puts quotatin marks in front and back. Generally a left over from 

early SGML.


 <XMP> characters... </XMP> Has been replaced by the <PRE> 


 <CODE> This looks like PRE but it has fixed lenght fonts. Good for 

computer code.

</CODE>



 <ADDRESS> This looks like PRE but it has italized  fonts. Good for 

your return address

</ADDRESS>




 <PLAINTEXT> 

defines a separated multi-line set 

of text to be rendered as it exists in the source document with the 

same line breaks. Designed to ignore all subsequent HTML tags. 

Therefore, it was always last in a document, allowing the remainder of 

the document to be presented as text. 



 Character Rendering  tags (above) can be put outside the PRE tags 

to get anything you want. Puting tags within PRE is not always

predictable.




This is how the <PRE> code looks 




 <PRE > NORMAL TEXT





1 STUFF  This line         contains spaces       and browsers normally eat


2 STUFF up extra spaces.   This makes it hard to have collumns


3 STUFF    Keep Their Shape 


4 STUFF   1  2    3     4      5      6          7


  </PRE >
This is how it actually shows


 NORMAL TEXT



1 STUFF  This line         contains spaces       and browsers normally eat

2 STUFF up extra spaces.   This makes it hard to have collumns

3 STUFF    Keep Their Shape 

4 STUFF   1  2    3     4      5      6          7










DIVIDERS and BREAKS



This is a summery of the main ones. Certain other ones will break a line after they do their thing.




       Paragraph        <P></P>     (closing tag often unnecessary)

         Align Text       <P ALIGN=LEFT|CENTER|RIGHT></P>

       Line Break       <BR>               (a single carriage return)

         Clear Textwrap   <BR CLEAR=LEFT|RIGHT|ALL>   

       Horizontal Rule  <HR>

         Alignment        <HR ALIGN=LEFT|RIGHT|CENTER>

         Thickness        <HR SIZE=?>      (in pixels)

         Width            <HR WIDTH=?>     (in pixels)

         Width Percent    <HR WIDTH="%">     (as a percentage of page width)

        Solid Line       <HR NOSHADE>     (without the 3D cutout look)    

N1.0   No Break         <NOBR></NOBR>       (prevents line breaks)

N1.0   Word Break       <WBR>              (where to break a line if needed)  















SELDOM USED TAGS WITHIN PRE TYPE TAGS




< NOSHADE> NOSHADE It is not in 3D, no border. Of course ends with   </NOSHADE>


NOWRAP - <NOWRAP> Turns word wrap off. Till it sees </NOWRAP></NOWRAP>


<WRAP=on|off>  (Automatic word wrap.)





LINE AND PARAGRAPH BREAKS


<BR> breaks for a new line. Possible Attributes <BR CLEAR=left|right|all|"..."> 


The CLEAR is Netscape force the line break to clear possible floating graphic images. 


Don't know what that means either.



<P> Breaks the paragraph and adds a blank line. It is like <BR> <BR> 




<P>characters... </P> The last P "</P>" is assumed when we go to 

something else.





All Attributes: <P ALIGN=center|left|right|justify|indent >


*****************


* ALIGN=center|left|right|justify Netscape 2.0 implements


*


* ALIGN=center|left|right and MS Internet Explorer 2.0 implements 


*

* indent as an option for ALIGN. 


******************


CLEAR=left|right|all|"..." CLEAR is to deal with text able to float around an image defined with the IMG element.


 Not all browsers use it.




The HR is called HORIZONTAL RULE (A line)

 <HR> Produces a divider between sections of text. 


Horizontal Rules




The <HR>: tag produces a horizontal line the width of the browser window. 

A horizontal rule is useful to separate major sections of your document. 




You can vary a rule's size (thickness) and width (the percentage of the 

window covered by the rule). Experiment with the settings until you are 

satisfied with the presentation. For example: 



 <HR ALIGN="..." CLEAR="..." SIZE="..." WIDTH="..." >


 


 ALIGN=center|left|right ( All browsers support this)


 ALIGN=left|right|center|justify (Some browsers support this)


 


 CLEAR=left|right|all|"..." 


 ******************************


 *CLEAR=left|right|all|"..." CLEAR is to deal with text able to float 


 *around an image defined with the IMG element. Not all browsers use it.


 *(Some browsers support this)


 ******************************



 SIZE=number 


 Thickness = number in pixils



 WIDTH=number|percent 



 <HR WIDTH="50%", the lines goes half way across the page (See ALIGN)


 <HR WIDTH="250"  This is in pixcels across.


 ******************************


 * CGA generly 460 


 * VGA SMALL= 640  MEDIUM=740 LARGE=1024 HUGE= 1240 and up  


 ******************************




 EXAMPLES


 


 <HR SIZE=4 WIDTH="50%">



 <HR SIZE=4 WIDTH="50%" ALIGN="CENTER">



 displays as:  4 pixils thick and 50% across the screen.


 

ANCHORS - See Inside Scroll Box.






The Basic Anchor

The anchor starts with <A> and ends with </A>. 

The <A> tag needs an  attribute.

There ane only two of them. The <A must use one of them.

HREF  (Hypertext REFerence) The location of the file I want 

to load. And is discribed in the URL. (Universal Resource 

Locator) the file which you want the link to point to. (In 

quotes)

or 

NAME Just a marked place in a file that HREF can use to go 

to a particular part of a file. Called NAME because they had 

to call it something. This is not used much and is an 

advanced subject addressed below. 

The general form is like this <A HREF="URL">

Example:



The URL in this case is http://www.cwru.edu/

                        \___/\_____________/

HTTP is the protocol    |    | Once actually on the Web. This is

for all World Wide      |    | the file name and location.

Web files   ===========> |    |



GEEK STUFF: There are other protocols. Most work here, but they 

are few in number and add unnecessary complexity.


          | This whole thing is called the URL, and double quotes 

          | are required by some (not all) browsers.

        /--------------------\

<A HREF="http://www.cwru.edu/">CWRU Web server</A>

 | \___/\___/\_______________/|\_____________/\__/

 |        |   | The address of|  |            |<=End of the anchor

 |        |   | the file to   |  |<== What shows on the screen

 |        |   | link to       | 

 |        |                   |<=== Finishing the first part of the link

 |        |<== http (This is the most common protocol)

 |<== The first part of the anchor


A URL (and therefore, by implication, an anchor) can point to any file 

on the Web. Another HTML page, a graphic, a sound file, a movie, or 

any other kind of file.



HINT HINT: If you can read it, you can copy it. Use "save source" or 

"save Target", what ever your browser calls it, to save to your disk.



<A HREF="http://www.site.edu/emeyer/welcome.au">Hear my welcome 

message!</A>



The first four letters of a Web URL mean something. http stands for "HyperText Transfer Protocol," which 

is the technical way of saying "how the computers move Web data back 

and forth." 



Well, all this is fine for linking between files, but what about 

jumping around within a document? Glad you asked. 



NAME



Using the NAME attribute, you can invisibly mark certain points of a 

document as places that can be jumped to directly, instead of loading 

the document and then scrolling around to find what you're after. This 

is accomplished by using a named anchor, which is slightly different 

than the anchor used to create a hyperlink. 



Setting a named anchor is done using the form <A NAME="label"> ... 

</A>, where label is any text you care to use. It could be anything 

from chapter1 to 2.4.1 to oscar-the-grouch. So putting a name of pt.3 

to the text "Part 3: Bagels and You" would be accomplished like 

this... 



<A NAME="pt.3">Part 3: Bagels and You</A>



...and would look like this: 



Part 3: Bagels and You 



Note that there is no obvious, visible way to tell that the text has 

been named. This is as it should be. The only way named anchors are 

important is if they're referred to somewhere else. Also note that the 

HREF attribute does not appear in this anchor. It can do so, but it is 

not required; the only requirement is that an anchor have either an 

HREF or a NAME attribute. It need not have both. 



How does this happen? Using a standard hyperlink, of course, but with 

a small addition. Found in the HREF attribute, the name is tacked onto 

the end of the URL of the document in which it appears. To do this, 

just enter document's URL, and then add a pound-sign and the name to 

the end of the URL. For example, assuming that the document's URL is 

"http://www.site.edu/food.html," the pointer to the named anchor pt.3 

would be: 



http://www.site.edu/food.html#pt.3



A hyperlink which has the above URL in its HREF attribute will take 

the reader straight to the text contained within the anchor <A 

NAME="pt.3">... </A> within the file "food.html." (Incidentally, if 

the browser loads a file but can't find the named anchor which has 

been specified, it simply goes to the top of the file, just as it 

would have if there hadn't been a name in the URL at all.) 



Now, you may be confused about why a pound-sign (#) is in the URL. 

That pound-sign is how the browser knows that it's looking for a name, 

and how it keeps the named anchor separate from the document's 

filename. Therefore, if you are writing a hyperlink which points to a 

named anchor found within the same document, you only need to have the 

pound-sign followed by the name of the anchor. For example, a 

hyperlink to Part 3 which is found within the file "food.html" would 

have this markup: 



<A HREF="#pt.3">Part 3</A>


A common use for named anchors is to create a "table of contents" at 

the top of a long document. Each section within a document is given a 

named anchor, and hyperlinks to each of these anchors are put at the 

top of the file. 



Unlike HREF, the double-quotes in the NAME attribute are never 

optional (because of the # character). This has another benefit, in 

that you may use spaces in your name. Why does this make a difference? 

Here's an example, assuming for the moment that the quotes aren't 

used: the anchor <A NAME=section 1.2> would create an anchor name 

section. This is because the space between section and 1.2 would be 

interpreted as the separator between attributes. The Web browser would 

take section as the name, toss out 1.2 as an unrecognized attribute, 

and proceed merrily along. 



Similarly, the reference <A HREF=#section 1.2> would look for an 

anchor named section and completely ignore the 1.2.With the use of 

double-quotes, which are pretty much required anyway, this problem 

does not occur. 



I'm Still Confused...



Okay. As an example, let's say you're compiling a glossary. You decide 

to write a definition for "Web client" which reads, "see browser". 

Instead of leaving it as plain text, thereby forcing the user to 

scroll most of the way through the glossary to find "browser," you 

could set a named anchor around the term "browser" and then turn the 

word "browser" in the definition for "Web client" into a hyperlink to 

the label gl.browser-- and therefore to the term "browser." Got all 

that? In other words, the markup used to create the entry for "Web 

client" would be: 



     <DT>Web client

     <DD>see <A HREF="#gl.browser">browser</A>



Meanwhile, the markup for the "browser" entry would be: 



     <DT><A NAME="gl.browser">browser</A>

     <DD>A program which is used to access the Web.



The user, reading through the glossary, sees the definition for "Web 

client." He clicks on the hyperlink in the definition (the word 

"browser"). This causes the browser to jump to the entry for "browser" 

-- no scrolling required! For a real-world approximation of this 

example, take a look at this tutorial's glossary. Go to the end of the 

file, where the term "Web browser" is found, and select the word 

"Browser." Presto! 



****************



<A HREF attribute can use the URL suffixed with #name.



<A HREF="WALT.HTM#chap01"Go to Chapter one"</A>

    For an other document. 



The browser knows the # (pound sign) is not part of the file name



<A HREF="#chap01"Go to Chapter one"</A>

  For this document



You can jump to a #name (In this case #chap01) id the place is marked 

like this:



<A NAME="#chap01">Start Chapter One">



Minimum Attributes 



<A HREF="..." >characters...</A>



 or



<A NAME="..." >characters...</A>



Common Attributes 



<A HREF="..." 



<A NAME="..." 



TARGET="..." TARGET is used to bring those you send to URL back to 

you.  I do not use it.



Any element that permits members of group text 















BASICS OF FONT RENDING

Basics of  FONTS Rendering  .









BODY Atributes and Discription .





 Examples


 <BODY BACKGROUND="pinkmarb.gif" "TEXT="#884444" LINK="#44FF44"   VLINK="#7777FF"   ALINK="#000000">


 In this one the image file (pinkmarb.gif in this case) is "Tiled" as background . 







 **Geek stuff ** If you use in the <HEAD>: section <BASEFONT SIZE=X> For That, the # 3 is normal size text. 


Any plus or minus are up and down from that.FONT : SIZE, COLOR and FACE





 






 ** SIZE ** 






The basis SIZE atribute is: <FONT SIZE=[+|-]1|2|3|4|5|6|7>


 Only the minus 1 and 2 seem to be shown AND Only the plus  1 , 2, 3 and 4 seem to be shown


This has been tested by wlm.












Font minus 1 
Font minus 2 
Font minus 3 
Font minus 4 
Font minus 5 
Font minus 6 
Font minus 7 
Font plus 1 
Font plus 2 
Font plus 3 

Font plus 4 
Font plus 5 
Font plus 6 
Font plus 7 







 ** COLOR ** 




Well for COLOR The 16 colors usaually shown (The Windows 3.1 Pallet) are in alphabetic order:







<FONT COLOR="Aqua"< Sample of Color look like this. </FONT>  AQUA



<FONT COLOR="Black"< Sample of Color look like this. </FONT>  BLACK



<FONT COLOR="Blue"< Sample of Color look like this. </FONT>  BLUE



<FONT COLOR="Fuchsia"< Sample of Color look like this. </FONT>  FUCHSIA



<FONT COLOR="Gray"< Sample of Color look like this. </FONT>  GRAY



<FONT COLOR="Green"< Sample of Color look like this. </FONT>  GREEN



<FONT COLOR="Lime"< Sample of Color look like this. </FONT>  LIME



<FONT COLOR="Maroon"< Sample of Color look like this. </FONT>   MAROON



<FONT COLOR="Navy"< Sample of Color look like this. </FONT>  NAVY



<FONT COLOR="Olive"< Sample of Color look like this. </FONT>  OLIVE



<FONT COLOR="Purple"< Sample of Color look like this. </FONT>  PURPLE



<FONT COLOR="Red"< Sample of Color look like this. </FONT>  RED



<FONT COLOR="Silver"< Sample of Color look like this. </FONT>  SILVER



<FONT COLOR="Teal"< Sample of Color look like this. </FONT>  TEAL



<FONT COLOR="White"< Sample of Color look like this. </FONT>  WHITE



<FONT COLOR="Yellow"< Sample of Color look like this. </FONT>  YELLOW









Netscape 4.0 seems to have it also. Don't know about other browsers. Also there are additional colors now. I tried "gold" and it works. Some browsers requires an "#rrggbb" number and you can always 

use them for any thing calling for color.














 ** FACE ** 


 Font face is... the font face! I mean, the font itself. Normally, a 

font is restrained to Times New Roman, or whatever font the user has 


 chosen as a default font. 





The general form is this :<font face="font1">Characters</font>


 or for multilal shots on hitting a resident font.


The general form is this :<font face="font1,font2,font3">Characters</font>





The FACE attribute is Internet Explorer 2.0 Netscape 4.0 seems to have 

it also. Don't know about other browsers.



 

 Courier New Font plus 1





 New Roman Times Font plus 1





 Courier Font plus 1



 Arial Font plus 7

Impact Font plus 7








 


  face="Impact,Arial,Courier" 

 face="Impact,Arial,Courier" 


 Font face is a very optional tag. the damn thing is, often you just 


 won't HAVE a particular font your computer. The first font (font1) 


 listed is the default font. If the user don't have that one, font2 is 


 chosen, and if not, font3. No more than 3, tho .If none of those fonts 


 are found, then there is not font face effect at all. 









CHARACTER RENDING




 Character formatting tags also are generally not additive. For example, you might expect that: 


 Bold and Italizised 


 some text


 


 Would produce bold-italic text. On some browsers it does; other browsers interpret only the innermost tag. 



Here is some effects as compared with:


 NORMAL TEXT





 <B> NORMAL TEXT </B > Bold text

 <U> NORMAL TEXT </U > Underlined text

 <STRONG> NORMAL TEXT </STRONG > Bold text (logical)

 <BIG> NORMAL TEXT </BIG > 
BLINK: physical rendering of blinking font. 

 <BLINK> NORMAL TEXT </BLINK >  BLINKING TEXT

 <CODE> NORMAL TEXT </CODE> Computer code short phrases. PRE is recommended for multiple-line listings.


 Usually rendered in a fixed-width font. 

 <I> NORMAL TEXT </I > I... is for italics (don't forget to close it off>

 <SAMP> NORMAL TEXT </SAMP > SAMP seems to be smaller text.

 <EM> NORMAL TEXT </EM > Same as I is for italics.

 <TT> NORMAL TEXT </TT> Physical rendering of text to a fixed width teletype font.

 <U> NORMAL TEXT </U < Rendering the contents an underlined font. 

<VAR> NORMAL TEXT </VAR>  VAR renders as a variable name usually in italics. 

<KBD> NORMAL TEXT </KBD>  KBD  seems to show small equal width letters.

<CITE> NORMAL TEXT </CITE>  CITE  is for citation, usualy italics.







<BR>.. is for a line break. To end a line early, 




<P>.. is for a line break. To end a line early, and add another blank line







<CENTER> Will Center text (Also images and tables) and is useful when viewing on different size monotors.


 Most tags that display something can use center. It also causes a line break and looks like this with this one long line.</CENTER>













 Color Chart







 SUMMERY OF MAIN FORM COMMANDS 








FORMS  (generally require a script on your server)

---------------------------------------------------------------------------

       Define Form      <FORM ACTION="URL" METHOD=GET|POST></FORM>      

N2.0     File Upload      <FORM ENCTYPE="multipart/form-data></FORM>

       Input Field      <INPUT TYPE="TEXT|PASSWORD|CHECKBOX|RADIO|

                          IMAGE|HIDDEN|SUBMIT|RESET">

         Field Name       <INPUT NAME="***">

         Field Value      <INPUT VALUE="***">

         Checked?         <INPUT CHECKED>  (checkboxes and radio boxes)     

         Field Size       <INPUT SIZE=?>       (in characters)

         Max Length       <INPUT MAXLENGTH=?>  (in characters)

       Selection List   <SELECT></SELECT>

         Name of List     <SELECT NAME="***"></SELECT>

         # of Options     <SELECT SIZE=?></SELECT>

         Multiple Choice  <SELECT MULTIPLE>    (can select more than one)  

       Option           <OPTION>           (items that can be selected)

         Default Option   <OPTION SELECTED>

       Input Box Size   <TEXTAREA ROWS=? COLS=?></TEXTAREA>

         Name of Box      <TEXTAREA NAME="***"></TEXTAREA>

N2.0     Wrap Text        <TEXTAREA WRAP=OFF|VIRTUAL|PHYSICAL></TEXTAREA>







Form: TEXTAREA Only no Action, Just shows text 





<textarea wrap="SOFT" rows="4" cols="47">



WRAP="off|soft|hard

COLS= is for card collums (width).

ROWS= is for lines showing (debth).



WRAP="off" is the default no wrapping

WRAP="soft" it wraps but the text is sent as typed.

WRAP="hard" it wraps and text is sent with line breaks at all wrap points. 

virtual was soft; physical was hard; (not used used by most browsers).

















SAMPLE OF CODE USED IN THE ABOVE TEXT BOX


<CENTER><FORM>

<textarea wrap="soft" rows="4" cols="47">



WRAP="off|soft|hard

COLS= is for card collums (width).

ROWS= is for lines showing (debth).



WRAP="off" is the default no wrapping

WRAP="soft" it wraps but the text is sent as typed.

WRAP="hard" it wraps and text is sent with line breaks at all wrap points. 

virtual was soft; physical was hard; not with recent browsers.



</textarea> </form> </center>























  

  Please enter your name: 



 








and your email address: 





  

  


  what do you think of my guestbook?

  

  It's Great! 

  It Stinks! 

  You Stink!

  


  I Stink!

  We All Stink!

  


  

  Make any comments you'd like below:

  

  

  

  Thanks for your input

  




  

  

  

   

 The Code for the Above Form






<FORM METHOD="POST"  ACTION="mailto:wmccabe@home.com">

  <B>Please enter your name: </B>

<INPUT  NAME="username" size="30"> 

<BR>

<B>and your email address: </B>

<INPUT Name="usermail"  size="30">

  <P>

  <CENTER>

  <B>what do you think of my guestbook?</B>

  <P>

  <INPUT TYPE="radio" NAME=I_think_that  VALUE="It's_Great">It's Great! 

  <INPUT TYPE="radio" NAME=I_think_that  VALUE="It_stinks">It Stinks! 

  <INPUT TYPE="radio" NAME=I_think_that  VALUE="You_stink">You Stink!

  <BR>

  <INPUT TYPE="radio" NAME=I_think_that  VALUE="I_stink">I Stink!

  <INPUT TYPE="radio" NAME=I_think_that  VALUE="We_all_stink">We All Stink!

  <P>

  </CENTER>

  <H3>Make any comments you'd like below:</H3>

  <CENTER>

  <TEXTAREA NAME="comment" ROWS=6  COLS=60></TEXTAREA>

  <P>

  <B>Thanks for your input</B>

  <BR>

  <INPUT TYPE=submit VALUE="Send it!">

  <INPUT TYPE=reset VALUE="Start over">

  </CENTER>

  </FORM> 



 A Basic Guestbook: Tested by wlm. A + sign substitutes white space. It is all in one big line.


 Non alpha characters seem to be in escape codes.  On radio buttone only the  NAME=".." of the one chosen is included. All TEXTAREA is included.






Actual code resulting from the test




username=Walter+McCabe&usermail=wmccabe%40home.com&I_think_that=It%27s_Great&comment=An+interesting+first+step


the %40 is  @, the %26 is  ' do not know what cide system it uses. Not ACSII.









To put them in your HTML documents. Add the HTML code :

< body bgcolor="color code" text="color code" link="color code"

vlink="color code" alink="color code" >





For example, the code for this page's color scheme used to be:

< body bgcolor="387272" text="FFFF80" link="F1F1E0" vlink="99cc32"

alink="FF0000" >







bgcolor is the background color


 text is the text color


 link is the unlinked hyperlinks' that you reference


 vlink is the visited hyperlinks' color


 alink is the active hyperlinks' color





If you want to put in an image as your background, just substitute the

bgcolor="color code" with background="image.gif"

You can easily interchange .gif with .jpg (.jpeg)

 other such as .bmp, .tif .wmf may or may not work on a particular

browser 





All colors can be made from the "rrggbb" which stands for RED,RED GREEN,GREEN and BLUE,BLUE.


This is in hexidecimal


Two "HEX" numbers for each color.


Computer being what they are: like to count in 2s. Two hex numbers go up to 265 intensities of each color.


Basicly the decmal counts from 0 to 9 and each character is one of 10


Basicly the Hexidecmal counts from 0 to 16 and each character is one of 16




Decmal would be: 0 1 2 3 4 5 6 7 8 9 


Hex would be: 0 1 2 3 4 5 6 7 8 9 A B C D E F






 ** COLOR WITH NAMES ** 




Well for COLOR The 16 colors usaually shown (The Windows 3.1 Pallet) are in alphabetic order:






Aqua Sample of Color look like this. **** AQUA 
Black Sample of Color look like this. **** BLACK 
Blue Sample of Color look like this. **** BLUE 
Fuchsia Sample of Color look like this. **** FUCHSIA 
Gray Sample of Color look like this. **** GRAY 
Green Sample of Color look like this. **** GREEN 
Lime Sample of Color look like this. **** LIME 
Maroon Sample of Color look like this. **** MAROON 
Navy Sample of Color look like this. **** NAVY 
Olive Sample of Color look like this. **** OLIVE 
Purple Sample of Color look like this. **** PURPLE 
Red Sample of Color look like this. **** RED 
Silver Sample of Color look like this. **** SILVER 
Teal Sample of Color look like this. **** TEAL 
White Sample of Color look like this. **** WHITE 
Yellow Sample of Color look like this. **** YELLOW 





 Netscape 4.0 seems to have it also. Don't know about other browsers. 

Also there 


 are additional colors now. I tried "gold" and it works. Some browsers requires 


 an "#rrggbb" number and you can always use them for any thing calling for color. 


 Here are a few I randomly tried. Thee is always the "bbggbb" way. By the way, 


 these numbers can be Capital or lower case.













****GOLD************* ***VIOLET************** ***YELLOW**************
****PURPLE************* ******PINK*********** ******CYAN***********
******TURQUOSE*********** ****ORANGE************* ****MAGENTA************
****GRAY*************** ****BROWN************** ****JADE**************






 THERE IS ALWAYS THE RRGGBB WAY





****FFFF00*************** ****FF00FF*************** ****00FFFF***************
****880000*************** ****008800*************** ****000088***************
****FF0000*************** ****00FF00*************** ****0000FF***************
****FFAAAA*************** ****FFBBBB*************** ****FFCCCC***************







HERE IS A CHART THAT WILL GIVE YOU THE IDEA

COLOR CHART OF MANY COLORS 













Deeply saturated primary colors (red, green, blue), do not translate 

well between video display systems (e.g. computer monitors). These 

colors have the characteristic of containing a majority of one color 

and very little of the other two. As these colors are moved through 

signal distribution systems they are prone to smearing or bleeding, 

making the image difficult to see. 





De-saturate colors by adding equal amounts of the other two colors, 

e.g., if one desires a bright, deep blue; set blue to 255 and red and 

green to about 70, not 0. 





Combinations of 2 primaries, such as blue and green making cyan, work 

well. One could have 255 of blue, 255 of green and 70 of red. 





Avoid very low luminance colors. That is, colors where the RGB values 

are all below about 70. The more your color palette tends towards the 

pastels, the better, as long as data remains effectively 

differentiated. 





Make the background color to compliment not covers or overwhelms, the 

information and images. 



When creating a file to be used as a transparent .GIF file make the 

background a solid color to facilitate it's elimination. 





















htmltut.htm BASIC 1  

htmltut1.htm BASIC 2  

htmltut2.htm ADVANCED 1  

htmltut3.htm ADVANCED 2  

Email Address 


  





My HomePage




Last Modified on:

  





 Jeff's great page called "HTML and PHP Scripts - Html Tutor"
**GOLD***********	*VIOLET************	*YELLOW************
**PURPLE***********	****PINK*********	****CYAN*********
****TURQUOSE*********	**ORANGE***********	**MAGENTA**********
**GRAY*************	**BROWN************	**JADE************
**FFFF00*************	**FF00FF*************	**00FFFF*************
**880000*************	**008800*************	**000088*************
**FF0000*************	**00FF00*************	**0000FF*************
**FFAAAA*************	**FFBBBB*************	**FFCCCC*************