© www.dtp-aus.com
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>
|
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 |
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">
You will find a full page lesson on |
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"> |
|
| 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> |
||
| 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! | ||
 SRC="mypic.jpg" |
the •image is in the same directory/folder as the html •document calling for it. | |
 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. | |
 SRC="../mypic.jpg" |
the •image is in one directory/folder level up from the html •document calling for it. | |
 SRC="../../mypic.jpg" |
the •image is two directory/folder levels up from the html •document calling for it. | |
 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 | ||
| < > & " ­ |
( non-breaking space) (< less-than symbol) (> greater-than symbol) (& ampersand) (" quotation mark) ( soft hyphen) |
|
| résumé = résumé (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 " " non-breaking space |
"Ð" Ð Eth, Icelandic "Ñ" Ñ tilde "Ò" Ò grave accent "Ó" Ó acute accent "Ô" Ô circumflex accent "Õ" Õ tilde "Ö" Ö dieresis or umlaut mark "×" × multiply sign "Ø" Ø slash "Ù" Ù grave accent "Ú" Ú acute accent "Û" Û circumflex accent "Ü" Ü dieresis or umlaut mark "Ý" Ý acute accent "Þ" Þ Thorn, Icelandic "ß" ß German (sz ligature) "à" à grave accent "á" á acute accent "â" â circumflex accent "ã" ã tilde "ä" ä dieresis or umlaut mark "å" å ring "æ" æ diphthong (ligature) "ç" ç cedilla "è" è grave accent "é" é acute accent "ê" ê circumflex accent "ë" ë dieresis or umlaut mark "ì" ì grave accent "í" í acute accent "î" î circumflex accent "ï" ï dieresis or umlaut mark "ð" ð eth, Icelandic "ñ" ñ tilde "ò" ò grave accent "ó" ó acute accent "ô" ô circumflex accent "õ" õ tilde "ö" ö dieresis or umlaut mark "÷" ÷ divide sign "ø" ø slash "ù" ù grave accent "ú" ú acute accent "û" û circumflex accent "ü" ü dieresis or umlaut mark "ý" ý acute accent "þ" þ thorn, Icelandic "ÿ" ÿ dieresis or umlaut mark Ref: W3C |
| Others 127 - 159 ""
not used |
"" not used "‘" ‘ "’" ’ "“" “ "”" ” "•" • "–" – "—" — "˜" ˜ "™" ™ "š" š "›" › "œ" œ "" not used "ž" ž not used "Ÿ" Ÿ view Extended Character Set page |
| 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 |
| ©1997 '98. Last Revised: Friday, 31 October 2003 22:04 |