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


Obsolete tags
Use CSS Lint to check your style sheet!

These HTML tags and attributes that have been superseded by other more functional or flexible alternatives (as a TAG or as acronym `CSS ) are declared as deprecated in HTML4.

Deprecated HTML tags
DeprecatedDescriptionReplacement
basefont styles
center centers elements div style="text-align:center" (W3C help)
font font styles style sheets
<code style=font-family:monospace;…>
isindex search field form
nobr style=white-space:nowrap;
strike
s
strike through text Text-decoration:line-through
u underline style
big font-size:large (vs medium
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.
Deprecated HTML attributes
AttributeDeprecated if used in
caption , img , table , hr , div ,
h1..6 H1 { text-align: center}, p
alink body
background tdbody

The CSS alternative involves relative or absolute positioning or margin control. - the navigation links are separated from the content using the CSS class "header".
.header { position:absolute; top:10px; left:270px;
padding-right:10px;}

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 attributes which are deprecated.

Deprecated HTML attributes
Attributeif used in:
align caption, img, table, hr, div, h1..6, p
alink body
backgroundbody
bgcolor body, table tr td th
clearbr
compact ol, ul
colorbasefont, font
border img, object
hspace img,object
linkbody
noshade hr
nowraptd, th
sizebasefont, font, hr
start ol
textbody
type li
valueli
vlinkbody
widthhr, pre, td, th
vspaceimg,object


<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.active        {	FONT-SIZE:60%; border-color:blue; TEXT-ALIGN:center; cursor:crosshair; border-width:20 }	
TD.menu          {	FONT-SIZE:120%; border-color:brown; TEXT-ALIGN:center; cursor:help  }
TD.sep	         {                 background-color:lightCyan }
</STYLE>
border-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>
<pre style=font-size:12pt>

       10       20       30       40       50       60       70       80       90      100      110       120       130      140        150        160
123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890
1234567890
this font is not changed
this font is decreased 1 size by using <font size=-1> OR NOT!
this font is not changed
this font is increased 1 size by using <font size=+1>
this font is increased 2 sizes by using <font size=+2>

<font> has been deprecated in favor of <style=font-….
this font is increased 2 sizes by using <span style=font-size:+2> OR NOT!

this font is decreased by using <span style=font-size:90%> OR NOT!
this font is Not changed
this font is increased by using <span style=font-size:110%>
this font is increased by using <span style=font-size:125%>
this font is increased by using <span style=font-size:150%>
this font is increased by using <span style=font-size:175%>

ABsolute i.i NOT relativebr> this font is smallest by using <span style=font-size:xx-small>
this font is smaller by using <span style=font-size:x-small>
this font is small by using <span style=font-size:small>
this font is ? by using <span style=font-size:>
this font is large by using <span style=font-size:large>
this font is larget by using <span style=font-size:x-large>
this font is largest by using <span style=font-size:xx-large>

<span style=color:red>RED</span>

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


Headings add margin above and 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
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 . The end tag can be omitted if the list item is immediately followed by another <li> element, or if there is no more content in its parent element.
  • 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 style=background-color:xxxx> nested:
    x
    y
    z
    m
    l

    table

  • 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= 150
    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.