www.dtp-aus.com

< back

Quick Start Tags - some common basic tags!

 
To assist learning or viewing web page source code on the WWW, use the information on this page of common basic tags. The About Tags page is also a good overview of various special tags and general html information. It can be accessed when you return to the HTML Code Lab.
See also separate tutorials for a detailed list of HTML 3.2 Tags, Forms, Tables, Image Maps, Frames.
 
<HTML> </HTML>
<HEAD> </HEAD>
<TITLE> </TITLE>
<BODY> </BODY>
<FONT> </FONT>
<! invisible comment >
see the 'About Tags' page
<HR> Insert a horizontal rule - standard 3D (has attributes)
A few common text-formatting tags:
<H1> </H1> Force Heading sizes. H1 equals the largest heading text size.
There are six heading levels - H1 to H6
<P></P> Set text as a paragraph. Will wrap close-spaced lines, if necessary. (closing tag not required)
<BR> Text-break (place at end of line)
Breaks the line at a pre-determined point and close-wrap the remainder.
<NOBR> </NOBR> Prevents line breaks (no wrap) in text.
<STRONG> </STRONG> Force boldface
<EM> </EM> Force italics
<B> </B> Also Boldface.
<I> </I> Also Italics
<CENTRE> </CENTRE> Can centre align objects without an alignment attribute.
<PRE> </PRE>
          \|/
         (@ @)
----oOOo--(_)--oOOo----
Displays the text exactly as it is typed and positioned.
(monospaced font)
List formatting:top of page
<OL> </OL> An ordered (numbered) list.
<UL> </UL> An unordered (bulleted) list.
<LI> Precedes a new list item. (no closing tag required)
<DL> </DL> Definition list. Netscape and Explorer display this useful option differently!
Indented items are formatted using the following:
<DT> Precedes the defined term. (no closing tag required)
<DD> Precedes the definition. (no closing tag required)
Tables and Cells:top of page
<TABLE> </TABLE>
this page is formatted in a table

You will find a full page reference on
Table Tags when you return to
the HTML Code Lab.

Each table can start with an optional CAPTION, followed by one or more TR elements defining Table Rows. Each row has one or more cells defined by TH or TD elements. Attributes for TABLE elements are width, border, cellspacing and cellpadding. Tables can be nested in recent Browsers.
Client-Side Image Maps:top of page
<MAP> </MAP>

<img src="****.***" border=0 usemap="#map1">
Tag referencing an image map

 

You will find a full page lesson on
Image Maps when you return to
the HTML Code Lab.

The MAP element provides a mechanism for client-side (not server based) image maps. It contains one or more AREA elements that specify hotzones on the associated image and hyperlink those hotzones to URLs. The coordinates represent various areas on an image that can be clicked on and the values represent pixels.

<map name="map1">
<area href=one.htm alt="Click1" shape=rect coords="0,0,118,28">
<area href=two.htm alt="Click2" shape=rect coords="184,0,276,28">
<area href=three.htm alt="Click3" shape=rect coords="118,0,184,28">
<area href=four.htm alt="Click4" shape=rect coords="276,0,373,28">
</map>

Linking to other documents:top of page
<A HREF="URL"> ... </A>
My Server
Open the default document at this URL. (Uniform Resource Locator)  i.e.
<A HREF="http://www.aserver.edu/">My Server</A>.
<A HREF="****.***"> </A>
go to another page
Open another page on the same site. (http:// is not used for a local document)  i.e.
<p>go to <A HREF="otherpge.html">another page</a></p>
Linking on the same page:top of page
<A HREF="#Paragraphs"> </A> Link to a Bookmark name. (text or Image, note the hash symbol). "#top" - goto to top of the current page.
<A NAME="Paragraphs"> </A> The Name given to a Bookmark. (text or Image)
Email Reference:top of page
<A HREF="mailto:w@me.com">Send E-Mail</A>
  i.e.   Send E-Mail

<A HREF="mailto:w@me.com?subject=whoopsydo">Send E-Mail</A>
  i.e.   Send E-Mail and include Subject.

Adding images:top of page
<IMG SRC="pic??" ALIGN="top" ALT="This is an image"> ALIGN= can be ALIGN="top", ALIGN="bottom", ALIGN="middle"
  (HTML extensions add other attributes, including left, right, center, [position]absolute).

'Alt=' is a very important <img src=.....> tag attribute. It allows the inclusion of a short description that appears when a browser cannot display bitmaps (often).

Always include the 'Width' and 'Height' plus 'Alt' attribute with <img src=.....
<img src="???.???" WIDTH=95 HEIGHT=26>

Creating an image at half size and forcing it to appear at twice size, may reduce download times. check quality first! Also, not all browsers handle resized bitmaps.

The WIDTH and HEIGHT attribute included in an <IMG SRC=.....> tag play an important role. As the HTML code is parsed the browser plans the page layout, but without the image size references, images will be shown as a default icon until they are downloaded. The page then jumps and moves, remapping the text objects to suit as each image downloads.

Allowing the page and text to be viewed while the images slowly appear helps to keep the viewers attention rather than giving up in disgust.

Folders and Paths:top of page
Do not use full URLs when entering the path to files that are on your site. Everything should be referenced only from the directory/folder in which the calling document (page) resides. Viewing source code on the web should reveal options similar to the following: Note the dots!
same directory SRC="mypic.jpg" the image is in the same directory/folder as the html document calling for it.
one level down SRC="images/mypic.jpg" the image is one directory/folder level down from the html document calling for it. Other lower folders can be added if necessary.
one level up SRC="../mypic.jpg" the image is in one directory/folder level up from the html document calling for it.
two levels up SRC="../../mypic.jpg" the image is two directory/folder levels up from the html document calling for it.
one up, then one below SRC="../images/mypic.jpg" the image is one directory/folder level up and then another below, in the images directory/folder.
Extended Characters: (ISO-Latin-1) • top of page
&nbsp;
&lt;
&gt;
&amp;
&quot;
&shy;
( non-breaking space)
(< less-than symbol)
(> greater-than symbol)
(& ampersand)
(" quotation mark)
( soft hyphen)
r&#233;sum&#233;
  = rsum

(if you cannot see the accented [e] then your browser cannnot handle them)

Accented letters
Accented letters (Extended Character Set) are not recognised by all browsers and not all System Fonts include them - use sparingly. Find the ISO-Latin-1 numeric entity for the character you want, precede it with an ampersand and hash sign, and follow with a semicolon.
Download Reference Bitmap - Win .BMP zip / Mac PCT.
ISO-Latin-1 numerics 160 - 255

"&#160;"   non-breaking space
"&#161;" inverted exclamation mark
"&#162;" cent sign
"&#163;" pound sterling sign
"&#164;" general currency sign
"&#165;" yen sign
"&#166;" broken (vertical) bar
"&#167;" section sign
"&#168;" umlaut (dieresis)
"&#169;" copyright sign
"&#170;" ordinal indicator, feminine
"&#171;" angle quotation mark, left
"&#172;" not sign
"&#173;" soft hyphen
"&#174;" registered sign
"&#175;" macron
"&#176;" degree sign
"&#177;" plus-or-minus sign
"&#178;" superscript two
"&#179;" superscript three
"&#180;" acute accent
"&#181;" micro sign
"&#182;" pilcrow (paragraph sign)
"&#183;" middle dot
"&#184;" cedilla
"&#185;" superscript one
"&#186;" ordinal indicator, masculine
"&#187;" angle quotation mark, right
"&#188;" fraction one-quarter
"&#189;" fraction one-half
"&#190;" fraction three-quarters
"&#191;" inverted question mark
"&#192;" grave accent
"&#193;" acute accent
"&#194;" circumflex accent
"&#195;" tilde
"&#196;" dieresis or umlaut mark
"&#197;" ring
"&#198;" diphthong (ligature)
"&#199;" cedilla
"&#200;" grave accent
"&#201;" acute accent
"&#202;" circumflex accent
"&#203;" dieresis or umlaut mark
"&#204;" grave accent
"&#205;" acute accent
"&#206;" circumflex accent
"&#207;" dieresis or umlaut mark

"&#208;" Eth, Icelandic
"&#209;" tilde
"&#210;" grave accent
"&#211;" acute accent
"&#212;" circumflex accent
"&#213;" tilde
"&#214;" dieresis or umlaut mark
"&#215;" multiply sign
"&#216;" slash
"&#217;" grave accent
"&#218;" acute accent
"&#219;" circumflex accent
"&#220;" dieresis or umlaut mark
"&#221;" acute accent
"&#222;" Thorn, Icelandic
"&#223;" German (sz ligature)
"&#224;" grave accent
"&#225;" acute accent
"&#226;" circumflex accent
"&#227;" tilde
"&#228;" dieresis or umlaut mark
"&#229;" ring
"&#230;" diphthong (ligature)
"&#231;" cedilla
"&#232;" grave accent
"&#233;" acute accent
"&#234;" circumflex accent
"&#235;" dieresis or umlaut mark
"&#236;" grave accent
"&#237;" acute accent
"&#238;" circumflex accent
"&#239;" dieresis or umlaut mark
"&#240;" eth, Icelandic
"&#241;" tilde
"&#242;" grave accent
"&#243;" acute accent
"&#244;" circumflex accent
"&#245;" tilde
"&#246;" dieresis or umlaut mark
"&#247;" divide sign
"&#248;" slash
"&#249;" grave accent
"&#250;" acute accent
"&#251;" circumflex accent
"&#252;" dieresis or umlaut mark
"&#253;" acute accent
"&#254;" thorn, Icelandic
"&#255;" dieresis or umlaut mark

Ref: W3C

Others 127 - 159

"&#127;" not used
"&#128;" € not used
"&#129;"  not used
"&#130;" ‚
"&#131;" ƒ
"&#132;" „
"&#133;" …
"&#134;" †
"&#135;" ‡
"&#136;" ˆ
"&#137;" ‰
"&#138;" Š
"&#139;" ‹
"&#140;" Œ
"&#141;"  not used
"&#142;" Ž not used
"&#143;"  not used

"&#144;"  not used
"&#145;" ‘
"&#146;" ’
"&#147;" “
"&#148;" ”
"&#149;" •
"&#150;" –
"&#151;" —
"&#152;" ˜
"&#153;" ™
"&#154;" š
"&#155;" ›
"&#156;" œ
"&#157;"  not used
"&#158;" ž not used
"&#159;" Ÿ

view Extended Character Set page

top of page

< back


Over 120 pages: All major topics divided into Classrooms
Free Backgrounds & Buttons! DTP and HTML "My First Page" HTML lessons
Tutorial Text Search Perl CGI Scripts Typography & Layout
4 pages of Links Visitors Book Perl Scripts Forum n/a
Free Links page Feedback Form Q/A contact Forum

pages Designed & Published - Ron F Woolley
e-mail 1997 '98. Last Revised:  Friday, 31 October 2003 22:04