HTML 5 notes, W3

Use your browser (ex: firefox, ie, opera )to View Source

This is the simplest set of notes on authoring HTML you'll ever find.

Not everthing written here is exactly true or complete.
If you want the real deal try www.w3.org/TR/html401/

See http://www.htmlhelp.com/reference/html40/structure.html for the real deal.

<-- begins a comment, but -- cannot occur within a comment -->

Elements www.w3.org , Attributes (height, onmousexxx, title,align...)
javaScript: within a function
daCount=document.getElementById(countBox);daCount.value='1';
daCount=document.getElementsByName(countBox);daCount[0].value='1';

Tables CSS , w3 ; HTML W3 tables
w3

scripts

user interface Cursor , AccessKeys , special characters , fonts, text w3
CSS W3,CSS3 Values&Units , default style sheet for HTML 4.0

CSS FontSelection, css-index, properties ex: border-style, font-variant, select,

ColorNames, forms
AccessKeys, Netscape's definition for Embed http://www.webreference.com/js/column20/embed.html

media-types

Document Object Model xref (DOM)

META tags


<STYLE>
A.menu:link,A.menu:visited,A.menu:hover,A.menu:active      
	         {	TEXT-DECORATION: none}	
A.active:visited {	TEXT-DECORATION: none; color:crimson; cursor:crosshair}	
TD.menu          {	FONT-SIZE:80%; border-color:blue; TEXT-ALIGN:center; cursor:help  }
TD.active        {	FONT-SIZE:60%; border-color:blue; TEXT-ALIGN:center; cursor:crosshair; border-width:20 }	
TD.sep	        {                      background-color:lightCyan }
</STYLE>
solid class=active
not default
double class=active colspan=9

style=border-style: ridge;border-width:10;
coming out default !
groove
carved into
inset
look as though it were embedded
outset
look as though it were coming out
 <td   style=border-width:10;border-style:outset;
border-top-color:red;border-right-color:paleGreen;border-bottom-color:pink;border-left-color:green; >

border-color in ie is buggy with respect to breaking the source line across multiple lines !!
or embedded spaces.
ex:

border-color:blue;border-style:dashed; - ok
border-color:blue; border-style:dashed; -NG dashed ignored!  
border-style:dashed; border-color:blue; -NG blue ignored

<p onclick="sitemap();" style=color:brown;background-color:snow; >
Click anywhere
in this paragraph (!) to see

helpWindow = window.open('null-location','nameishelp',
'width=1024,height=768,scrollbars=1,screenX=40,screenY=100,left=400,top=600');


Be patient. some it takes a second or 2
Interestingly, even if you click more than once you only get one window
You must click where there is text !! i.e. not on the right edge
</p>

Table clicking :
Putting text or images in a table the full width of the page makes the entire table clickable, onMouseover able...
Neat !
format WITHOUT java script onMouse*** :

 <table... 
<a href=...
<tr style=cursor:hand... 
<td... 
<td... 
</a>
...
</table> 

<table border=10 width=100% cellspacing=20 onclick="alert('You clicked in the TABLE ')" >
<tr onclick="alert('You clicked in the TR ')" width=70% >
width=20% <td onclick="alert('You clicked in the second TD ')" width=50% >

Next Data cell (20%) has only a space beteen the td and /td tags (it doesn't even show a border!) In fact you CAN click in it if you imagine where it is!!!

HTML browers will ignore breaks in the lines of text and "word wrap" based on the current size of the window.
HTML tags surrounded by < and > are usually found in pairs.
Paragraphs are terminated by <p> and the browser will add a blank line
line brakes can be forced by adding <br>. This tag is not paired

If you have a block of text that is PREformated you can use <pre> to start. After the preformated text use </pre> to end, but be careful since this causes the alternate font to be used and if the user has a narrower window then you expect the right side of you prefromated text will be cut off!

<center> Centering </center>
this font is increased 2 sizes by using <font size=+2>

The font has been deprecated in favor of the style.
For example <span style=color:red>RED</span>

<h2>this is a Heading level 2 </h2>


Headings add space above an below so you might want to use font sizes instead.

Heading Ruler like below is entered using <hr>

++++++++++++++ 
+++++++++++
Colors should be used sparingly for emphisis and avoid eye straining combinations.
use < font color=??? > before the colored text and < /font > after.
red aqua black blue fuschia gray green lime maroon olive purple red silver teal white yellow black

NJ County MapThis image is pulled in by having a GIF and using
<img src=fffff.gif alt="NJ County Map"
Width= 288 height=515 align=right>.

This downloads fast because there are no slight color variations.
(that's what gifs are good for)
It also fades in (interlaced)


  • <li> causes a list (note: no closing </li> is required (in HTML)
  • next list line
  • another list line

    providing a LINK to an HTML reference which the user can click on to change to another HTML file is provided by using
    <a href=fffff.html> link text </a>


    <BlockQuote > nested:
    x
    y
    z
    m
    l

    table

    • CellPadding number of pixels between cell edge and data ex 30
    • CellSpaceing width of cell divider i.e. width of border ex 10
  • th table header auto bold...
  • tr table row
  • td table data
    note: following table is cut off on the right at the equal sign, ------------------------------|
    Opera cuts off here, for pre-formated text although the table is still
          cut off at the equal sign -----------------------------------here ----|
    
    Of course that depends on FONT SIZE , which the user can vary in the browser settings
    Notice also the small border on the LEFT edge.
    (assuming there is a right handed scroll bar. For Internet Explorer, left margins can be set to zero using leftmargin=0 in the <body> tag. Netscape Navigator doesn't recognize this instruction and if you want to remove the margin in this browser you need to also include marginwidth=0 in the <body> tag.
    1200 x 600 window

    width= 1500
    width= 1400
    width= 1300
    width= 1280
    width= 1200
    width= 1100
    width= 1000
    width= 900
    width= 800
    width= 750
    width= 700
    width= 680
    width= 640
    width= 600

    width= 600 border=3 colspan=99 align=right
    100200300

    width= 500
    width= 400
    width= 300
    width= 200
    width= 100
    width=50

    width=99%
    width=98%
    width=97%
    width=96%

    This is the <caption>(tag before tr ).
    width=95%

    javascript.internet.com/user-details/style-sheets-by-resolution.html to recognize the viewer's screen size and create an appropriate page at a specific size.
    This does NOT return current WINDOW size

    1 2 3

    You can even start up AolInstantMessenger Hi Marilyn
    and there are FORMs that can be filled in:

    get: form data appended to URI specified by the action attribute; ? separator and sent
    displayed in address box, max post:form data included in the body of the form and sent
    input type=submit value="press this"> (note no /input> tag )


    <textarea  name=endComments  rows=5        cols=70>   < /textarea>
      disabled readonly >  inside box to start	

    TEXTAREA
       attrs;   coreattrs,   
       events,   %i18n
      name        
      rows        cols        
      disabled    (disabled)     unavailable in this context 
      readonly    (readonly)     
      tabindex    NUMBER         position in tabbing order 
      accesskey   Character    accessibility key character 
      onfocus     Script       element got the focus 
      onblur      Script       element lost the focus 
      onselect    Script       text was selected 
      onchange    Script       element value was changed 
    
    Disabled
    controls do not receive focus. are skipped in tabbing navigation. cannot be successful. Read-only elements receive focus but cannot be modified by the user. are included in tabbing navigation. may be successful.