HTML tags

Online guides:

Index

Text formatting
Graphics
Anchors
Tables
Frames
JavaScript
Forms
Useful links

General tag format: <tag_name> text </tag_name>

Basic structure:

<html>
<head>: <title> Title </title> - page title (optional); <meta http-equv="refresh" content="N; url=NEW_URL" > - automatic transfer to NEW_URL after N seconds (optional); <meta name="description" content="content" > - page description (optional) (content limited to 988 char.); <meta name="keywords" content="keywords" > - page keywords (optional)
</head>
<body>: :; page body.; :
</body>
</html>

Text formatting

Breaking

<br [attr.]> - break
optional attributes
- clear=center/left/right - (re)sets the alignment
<p> - paragraph break (basic)
<p [attr.]> TEXT ETC. </p> - text alignment
optional attributes
- align=center/left/right
<div [attr.]> TEXT ETC. </div> - text alignment
optional attributes
- align=center/left/right (alternative for centering: <center> TEXT ETC. </center>)
<hN [attr.]> (N=1..6) - heading ( attr. as in 'p')
<hr [attr.]> - horizontal rule
optional attributes
- size=X - set thickness
- width=X[%] - set width (in pixels/% of page width)
- noshade - no 3D shading
- align=center/left/right
<pre> TEXT </pre> - preformated text - monospaced, keeps spaces, tabs, return...
<blockquote> TEXT </blockquote> - indented block of text

Style

<b> TEXT </b> - bold
<i> TEXT </i> - italic
<tt> TEXT </tt> - typewriter
<u> TEXT </u> - underline
<strike> TEXT </strike> - ~~strike~~
<font [attr.]> TEXT </font>
optional attributes
- color=#XXXXXX - set text colour
- size=N - set text size (N=1..7 - absolute, N=-X..+Y - relative)
- face=FONT1,FONT2 - set text font
<basefont [attr.]> - default font, attr. as in 'font'
<sup> TEXT </sup> - ^superscript
<sub> TEXT </sub> - _subscript
<blink> TEXT </blink> - blinking text (Netcsape)
<marquee> TEXT </marquee> - running text (Explorer)
combinations of hN, b, i, ... are possible

Lists

<ul [attr.]> - unordered list
   <li [attr.]> TEXT1
   <li [attr.]> TEXT2
</ul>
     optional attributes
- type=disc/circle/square - set bullet type
<ol [attr.]> - ordered list (numbered)
   <li [attr.]> TEXT1
   <li [attr.]> TEXT2
</ol>
     optional attributes
- type=1/A/a/I/i - set bullet type (1,2,3/A,B,C/a,b,c/I,II,III/i,ii,iii)
- start=N - set initial value of the counter (N in arabic no.)
<dl> - definition list

<dt> TTTLE1

<dd> DEFINITION1

<dt> TTTLE2

<dd> DEFINITION2

</dl>
combinations of ul, ol and dl are possible

Address footer

<address> - offsets and italic
TEXT1
TEXT2
</address>

Special characters

&xxxx; - xxxx = ISO code/name of a char.

       <space> - &nbsp; 
          <    - &lt; 
          >    - &gt; 
          &    - &amp; 
          °    - &deg;
          ±    - &plusmn;
          µ    - &micro;
                 etc.

Graphics

Formats

GIF - can have transparency, can be interlaced
JPEG - no transparency

Guidelines

Size under 50-100k
Resolution up to 480x300

Inline images

<img src="FIGURE.gif [attr.]"> - inlaying file.gif
optional attributes
- align=top/middle/bottom - align with text (def. = bottom)
- alt="TEXT" - replacement text for text-only browsers
- width=X[%] - width in pixels/relative to the browser window
- height=Y[%] - height in pixels/relative to the browser window
- vspace=X[%] - empty space (in pixels) above and below the picture
- hspace=X[%] - empty space (in pixels) left and right from the picture
- border=N[%] - add border (in pixels) around the picture (colour = text colour from the body tag)

Colours

<body [bgcolor=#XXXXXX] [text=#XXXXXX] [link=#XXXXXX] [vlink=#XXXXXX] > - setting BG/text/link/vlink colour (RRGGBB 00-FF)
<body background="BGFILE.gif" [text/link/vlink=#XXXXXX] > - setting textured background
Reference colour codes

Anchors

Links to local files

<a href="FILE"> TEXT </a> - hypertext reference to a file

Links to the Internet

<a href="URL"> TEXT </a> - pointer to URL
URL type can be
- http:// - web server
- ftp:// - anonymous File Transfer Protocol (FTP) site
- telnet:// - initiates a Telnet session
- file:// - file on local computer

Links to sections of a page

<a name="NAME"> TEXT </a> - create a named anchor (transparent)
<a href="#NAME"> TEXT </a> - link to a named anchor in the same file
<a href="FILE.html#NAME"> TEXT </a> - link to a named anchor in another html file

HyperGraphics

<a href="FILE[#NAME]"> <img src="FIGURE.gif" [border=N]> TEXT alt="TEXT2"</a> - create a hyperlink button (border=0 - no box, colour = link colour from the body)
<img src="IMAGE.gif" usemap="#MAP_NAME" [border=0]> - clickable image map
<map name="MAP_NAME"> - clickable image map anchor (placed anywhere in the HTML document)
<area shape="rect" coords="X1,Y1,X2,Y2" hrEF=URL1 > X1,Y1 -upper left, X2,Y2 - bottom right
<area shape="rect" coords="X3,Y3,X4,Y4" hrEF=URL2 >
</map>

E-Mail links

<a href="mailto:ADDRESS"> TEXT </a > - basic
<a href="mailto:ADDRESS[,ADDRESS2...][?subject=SUBJECT][&cc=ADDRESS3,..][&body=MESSAGE]"> TEXT </a > - advanced

Opening a link in a new window

<a href="URL" target="window_name" > TEXT </a> - opens link in a (new?) browser window named window_name
<area target="window_name" shape="rect" coords="X1,Y1,X2,Y2" hrEF=URL1 >
<base target="window_name" > - HTML tag, defining all future links will be opened in the window_name window
Special names can be
- _blank - forces a NEW window
- _self - uses the current window (<base target="_self"> will reset default opening to the current window)
- _top - replaces framed content
- _parent -

Modified link colour

<a href="REF"> <font color=#XXXXXX> TEXT <font></a > - works only for unvisited links. For all, need to set link, alink and vlink in body
<a href="REF" style="text-decoration: none"> TEXT </a > - to remove "underline"

Tables

Basic table structure

<table [attr.]>

<tr>

<td> ROW 1 COL 1 </td>

<td> ROW 1 COL 2 </td>

</tr>

<tr>

<td> ROW 2 COL 1 </td>

<td> ROW 2 COL 2 </td>

</tr>

</table>

Table attributes

<table [attr.]> ... </table> - table attributes
- border=0 - "phantom" table
- border=N - border width (in pixels)
- width=N[%] - table width in pixels/relative(%) to screen
- height=N[%] - table height in pixels/relative(%) to screen
- cellpadding=N - empty space between items and wall of the cells (in pixels)
- cellspacing=N - space between cells (in pixels)
- bgcolor="#XXXXXX" - background colour
- background="IMAGE.gif" - background filled with IMAGE.gif
- bordercolor="#XXXXXX" - colour of a visible border (from border=N, N>0)
<tr [attr.]> ... </tr> - row attributes
- bgcolor="#XXXXXX" - background colour
- background="IMAGE.gif" - background filled with IMAGE.gif (does not work in Explorer)
<td [attr.]> TEXT ETC. </td> - table elements
- colspan=N - cell spans over N columns
- rowspan=N - cell spans over N rows
- align=left/right/center - alignment of the cell elements
- valign=top/bottom/middle - vertical alignment of the cell elements
- width=N[%] - cell width in pixels/relative(%) to table
- bgcolor="#XXXXXX" - background colour
- background="IMAGE.gif" - background filled with IMAGE.gif
<th [attr.]> TEXT </th> - header tag - special form of <td>
<caption> TEXT </caption> - table caption (must be within <table> ... </table> tags)

Frames

Frames - basic form

<html>
<head>
:
head
:
</head>
<frameset rows/cols="X,Y,...Z"> - defines rows or columns (X,Y,..Z define area in pixels/percents/*)
<frame src="FRAME_SOURCE_1.html"> - defines source for row/column 1
<frame src="FRAME_SOURCE_2.html"> - defines source for row/column 2
:
<frame src="FRAME_SOURCE_N.html"> - defines source for row/column N
</frameset>
<noframes>
:
Frame set for no-frames browsers
:
</noframes>
</html>

Complex form

<frameset rows/cols="X,Y,...Z"> - first level
<frame src="FRAME_SOURCE_1.html"> - 1. no inner structure
<frameset rows/cols="X2,Y2,...Z2"> - 2. has inner structure
     <frame src="FRAME_SOURCE_2a.html">
               :
     <frame src="FRAME_SOURCE_2N.html">
</frameset>
         :
</frameset>
<frameset [attr.] rows/cols="X,Y,...Z"> - frameset attributes
- border=1 - turns on border features modifying
- frameborder="N" - width of frame dividers (pixels)
- bordercolor="#XXXXXX" - add scroll bars
- border=0 frameborder="0" - no borders
<frame [attr.] src="FRAME_SOURCE.html"> - frame attributes
- name="FRAME_NAME" - defines frame name
- scrolling="auto/yes/no" - add scroll bars
FRAME_SOURCE.html - structure follows usual rules

</html>

<head>

optional head

</head>

<body>

body

</body>

</html>

JavaScript

JavaScript - basic format

<script language="JavaScript">
STATEMENT_1;

STATEMENT_2;

:
STATEMENT_N;

</script>
<noscript>
:
Contenet for browsers with no JavaScript
:
</noscript>

Statements

alert('TEXT'); - displays TEXT in a dialog box
window.status='MESSAGE'; - displays TEXT in the status bar
return true/false
window.open('URL', 'WINDOW_NAME', 'WINDOW_OPTIONS'); - opens a new window
WINDOW_OPTIONS (default: listed = yes, not listed = no):
- toolbar=no/yes - display toolbar
- location=no/yes - display the field that shows the URL for the window
- directories=no/yes - display other directory buttons
- status=no/yes - display the status bar at the bottom
- menubar=no/yes - display the menu bar
- resizable=no/yes - allows user to change the size of the window
- scrollbars=no/yes - provides scroll bars if the content is larger than the window size
- width=XX - width of the window (pixels)
- height=XX - heigth of the window (pixels)
- format: 'OPT1=XX, OPT2=XX, ... OPTN=XX' or 'OPT1, OPT2, ... OPTN=XX'
  example: window.open('img.jpg', 'pict', 'status, width=300, height=200'); - opens img.jpg in a new bare window pict of fixed size
document.write('HTML CODE'); - writes HTML content from HTML CODE
document.write('HTML CODE' + OBJECT + 'HTML CODE' );
if (CONDITION) {JAWASCRIPT CODE;} - if statement

Events

<a href="URL" onClick="STATEMENT; [return true/false]"> TEXT </a> - a click to link triggers JavaScript execution
- return true/false defines wether transfer to URL should be blocked (if browser supports JavaScript)
- ex.: <a href="URL" onClick="alert('MESSAGE'); return false"> TEXT </a> - displays MESSAGE instead of opening the link
- ex.: <a href="URL" onClick="window.open('URL', 'WINDOW_NAME', 'WINDOW_OPTIONS'); return false"> TEXT </a> - opens the link in a new window with selected options (return false; ensures opening of the link in the existing window for non-JavaScript browsers)
<a href="URL" onMouseOver="STATEMENT; [return true/false]" - activated when mouse is over the link
- ex.: <a href="URL" onMouseOver="window.status='MESSAGE'; return true"> TEXT </a> - replaces URL path in the status bar with the MESSAGE

Objects

document.title - page title (as set by <title>)
.lastModidied - last modification date of the document
.location.href - URL of the current document
window.status - text in the status bar
today.toLocaleString() - present local time. Requires def.: var today = new Date();
.getDay - present day of the week (0-6)
navigator.appName - browser name
.appVersion - browser version

Functions

defined withing the head
syntax:

function FNAME(VAR_LIST) {
STATEMENT_1
STATEMENT_2
:
STATEMENT_N
}
Intrinsic functions:
- isNaN(OBJECT) - checks whether OBJECT is Not a Number

Swapping images

sample code for swaping an image when mouse is drawn over it
the two images for swapping must be of exactly the same size!!

Other

\' - to write out a ' in JavaScript

Forms

Basic format

< method="get/post" form action="ACTION" >
:
form elements
:
< /form >

Input elements

< input type="text" [attr.] > - text input element
attributes:
- name="NAME" - element name
- size="XXX" - element lenght (chars.)
- maxlenght="XXX" - max. lenght for the input (chars.) (optional)
- value="TEXT" - default value (optional)
< input type="password" [attr.] > - password input element
attributes:
- name="NAME" - element name
- size="XXX" - element lenght (chars.)
- maxlenght="XXX" - max. lenght for the input (chars.) (optional)
- value="TEXT" - default value (optional)
< textarea [attr.] > - text input area (> 1 line)

default text (optional)
< /textarea >
attributes:
- name="NAME" - element name
- rows="XXX" - no. of lines
- cols="XXX" - line lenght (chars.)
- wrap="virtual" - automatic line wrap (optional)
< input type="radio" [attr.] > TEXT (BUTTON TAG) - radio button (set of buttons, only one can be selected)
attributes:
- name="NAME" - element name (should be the same for all buttond belonging to the same set)
- value="TEXT" - button value (return value if selected)
- checked - default checked button (optional) - only one in a set
< input type="checkbox" [attr.] > TEXT (BUTTON TAG) - check boxes (set of boxes, many can be selected)
attributes:
- name="NAME" - element name (each element has a unique name)
- value="TEXT" - button value (return value if selected)
- checked - default checked button (optional)
< select name="NAME" > - drop-down menu

< option value="VALUE_1" > TEXT_1 < /option > - menu option
< option value="VALUE_2 selected" > TEXT_2 < /option > - default selected option (def. = first)
:
< option value="VALUE_N" > TEXT_N < /option >
< /select >

< input type="submit/reset" value="TEXT" > - submit and reset buttons (submits/resets the form)

< input type="hidden" name="NAME" value="VALUE" - to send data from a HTML form without it appearing on the web page

Form actions

< form method="post" action="mailto:E-MAIL" > - mails form results to E_MAIL
optional attribute:
- enctype="text/plain" - messaage encoding (formating) type
< form method="post" action="URL.pl" > - use GCI, located at URL.pl
- using GCI
- Perl
< form method="post" action="URL.pl" name="NAME" onSubmit="return FUNC(PAR)"> - use JavaScript function FUN
- onSubmit="CODE" - performs JavaScript CODE when the submit button for the form is clicked, BEFORE making call to the GCI script in the action attribute. If onSubmit="CODE" returnns false, GCI script is not called.

Useful links

.htaccess (directory protection etc.) (more details)

Dejan Zontar