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/


Obsolete tage
from codehelp.co.uk/html/deprecated.html

These HTML tags and attributes that have been superseded by other more functional or flexible alternatives (as a TAG or as CSS ) are declared as deprecated in HTML4 by the
Deprecated HTML tags
DeprecatedDescriptionReplacement
applet Inserts applet object
basefont font styles font style sheets
center centers elements div style="text-align:center" (W3C help)
dir directory list ul
font font styles font style sheets
isindex search field form
menu menu ul
nobr style=white-space:nowrap;
s strike through text style sheets
strike strike through text Text-decoration:line-throughstyle sheets
u underline text style sheets
big font-size:large (vs medium
bgsound audio

Tables are to be reserved for tabular data Using a single cell table with hidden borders to position text within the page should be avoided.

particularly for like text-only and text-to-speech browsers that each row is intact in the source code - don't use a series of <br> tags to get cell contents to line up. Use <td rowspan=2> if necessary to allow broken lines. As an example, this is a section from the source of the deprecated attributes table on this page.

<table border="1">
<caption><b>Deprecated HTML attributes</b></caption>
<colgroup><col width="20%"><col width="40%"></colgroup>
<tr><th>Attribute</th><th>Deprecated if used in:</th>
<tr><td rowspan="2">align<td>
&lt;caption&gt;,&nbsp;&lt;img&gt;,&nbsp;&lt;table&gt;,&nbsp;&lt;hr&gt;, <tr>
<td>&lt;div&gt;,&nbsp;&lt;h1..6&gt;, &lt;p&gt;
<tr><td>alink <td><body>
<tr><td>background<td><body>

The CSS alternative involves relative or absolute positioning or margin control. Both methods are used on this page - the navigation links are separated from the content using the CSS class "header".
.header {
position:absolute;
top:10px;
left:270px;
padding-right:10px;
}
This places the second column start at a fixed position from the left margin, similar to newspaper columns. Within the content column, two tables are used to display the deprecated tags and attributes.

There are also attributes which are deprecated. Only attributes for tags already listed as deprecated are excluded from this list.

Deprecated HTML attributes
AttributeDeprecated if used in:
align <caption>, <img>, <table>, <hr>,
<div>, <h1..6>, <p>
alink <body>
background<body>
bgcolor <body>, <table> <tr> <td> <th>
clear<br>
compact <ol>, <ul>
color<basefont>, <font>
border <img>, <object>
hspace <img>,<object>
link<body>
noshade <hr>
nowrap<td>, <th>
size<basefont>, <font>, <hr>
start <ol>
text<body>
type <li>
value<li>
vlink<body>
width<hr>, <pre>, <td>, <th>
vspace<img>,<object>

All these deprecated attributes can be replaced by style-sheet controls. The majority can be simply switched directly into the style sheet. e.g. The mailme GIF file added to each main page has certain attributes pre-defined in the common stylesheet used for all main pages.

#mailmegif {vertical-align:middle; padding:25px; width:29; height:31; border-style:none;}

Each time the image is used, only the src and the id need to be specified. (Older browsers still need the border=0 attribute but you will have to use HTML4 Transitional instead of Strict if you want to support such old browsers as this attribute will cause the page validation to fail.). If you use the same graphic more than once, use a class identifier.

Note also that <td width=> is also deprecated. To control the width of table columns, use the <colgroup> and <col> tags.

This page has attempted to eliminate all deprecated tags and attributes using style sheets. (So it can be done!)



<b> means Bring Attention To element (not bold!)

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> 

<input onpaste="return=false" prevents pasting
Cannot paste here: ; OK to paste here: ; type=password:

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