© www.dtp-aus.com
back to the many other free HTML tutorials
Learning to look inside HTML tags Most of the major tags in the HTML 3.2 specification are here, as well as a few Netscape extensions included in Netscape Navigator up to versions 3.0+. Maverick tags (extensions) exclusive to Netscape or I.Explorer are maked in red. HTML 4 (not yet ratified) and Browser versions 4 are not covered, as only a portion of the worlds web surfers can take advantage of them; something all designers should keep in mind.
Comments or suggestions are welcome; and you can contact me via e-mail at webmaster@dtp-aus.com. *** All you need is a basic Text Editor, the tags, and save your file with the .htm or .html extension - plus save each file as a Text only file. Simple realy!!! ( cough ) |
READ this before studying the tags below. It's all well and good to study these tags, one by one. But how do they fit together as structured HTML source code.
Nesting, the way tag pairs enclose other tags (ie <tag1> ... <tag2> ... </tag2> ... </tag1>), is one of the most troublesome concepts for learners of the HTML Language to grasp. |
As for what you just read, here it is, from the first
horizontal line to the second: <hr width="60%"> |
www.dtp-aus.com
HTML 3.2 <TAGS> | ||
GENERAL | DISPLAY | BITMAP IMAGES |
BACKGROUND & DEFAULT COLOURS |
SEPARATORS | LINKS |
LAYOUT | LISTS | SPECIAL CHARACTERS |
A ADDRESS AREA B BASE BIG BGSOUND BLINK BLOCKQUOTE |
BODY BR CENTER CITE CODE COMMENT DD DFN DIR |
DIV DL DT EM FONT H? HEAD HR HTML |
I IMG ISO-Latin-1 KBD LI LISTING MAP MARQUEE MENU |
NOBR OL P PRE S SAMP SMALL SOUND SPACER |
STRIKE STRONG SUB SUP TITLE TT U UL XMP |
Bookmarks | Hyperlinks
| Lines | Headings | Image Maps Tables, Forms, Frames and Image Maps have separate free tutorials To learn more, go to the HTML Code Room via the Back Button at the top of the page. |
GENERAL (all HTML documents should include the first four tags listed) | |
| <HTML> </HTML> (yes, this page is displayable code) |
Document Type. Do not load the page as an image file or plain text only file but load
and parse all the text looking for tag information to layout the page objects. <html><head><title>...</title></head><body>...</body></html> |
|
| <HEAD> </HEAD> (layout preparation and server info) |
Very important tag that directs the browser to look for and respond to other special tags contained within this tag pair. Most common information tags placed within this tag pair are the TITLE, and multiple META tags (to be covered separately, or About Tags) | |
| <TITLE> </TITLE> (very important tag) |
|
|
| <BODY> ... </BODY> (all of the viewable-page code goes here) |
Every thing that is to be displayed in the browser window is contained within this tag
pair. The tag attributes also set the defaults for the page. (detailed next section) <body bgcolor="#FFFFFF" background="animage.???" text="#000000" link="#3333CC" vlink="#9933CC" alink="#CC0000"> ... </body> |
|
The basic page code. Start each new page with this template.
If you haven't tried it before, copy this text (<html> to </html>), paste it into a text editor window and save as a Text Only file with the .html extension using any name. Then open your new file in a Browser. |
|
| <BASE HREF="url"> Place within the <head> </head> element. |
Base identifies the correct (base) location of your document. This can be useful if you allow people to copy your page from its original location, enabling browsers to determine any partial URL's that might be specified (for example, in <a href> elements, or paths pointing to <img src=> objects (a server will normally look for file paths on its self unless otherwise redirected. Web servers do not use drive names). | |
| <!--****--> (COMMENT) |
The Comment Tag (Note the exclamation mark).
Text and other objects enclosed by this tag will not be visible on the page. This is not a
tag pair, but one complete tag. Just the contents between <!-- and -->
are hidden, and the start <!-- and closing --> do
not have to be on one line. If keeping the code for a page object, but hiding it, make
sure all relevant object tags etc are enclosed within the comment. <!-- This is the start of the first table -->. This is a simple comment. <!-- <a href="wallyworld.html">Wally World</a> -->. This is a page object hidden from view without destroying the code. Simply removing the comment tag will reactivate it. <!-- hide this stuff for a while <img src="images/widget.jpg" width="80" height="23" alt="A Widget"> -->. This comment also hides an
object although the left and right tag arrows are on different lines. |
BACKGROUNDS / DEFAULT COLOURS (spelt color) | |
| <BODY BGCOLOR="#rrggbb"> </BODY> |
Sets the default page background colour usually described in Hexadecimal. | |
| <BODY BACKGROUND="url" (path to an image)> </BODY> |
If a page background image is to be used this attribute includes the path and file name of the image file. The image is tiled automaticly to fill the browser windows background even when it is resized. | |
| <BODY TEXT="#rrggbb"> </BODY> (default body text colour) |
Sets the default body text colour for all visible text (can be over ridden by the font color= tag and attributes). | |
| <BODY LINK="#rrggbb"> </BODY> (hyperlink text colour) |
Sets the default colour highlighting any hyperlinked text appearing on the page. This will over ride any other text colour attributes. | |
| <BODY VLINK="#rrggbb"> </BODY> (been there, done that!) |
Sets the default colour highlighting any visited hyperlinks displayed on the page. Only shows if the browsers history list has a matching URL. History lists have a limited life. | |
| <BODY ALINK="#rrggbb"> </BODY> (just clicked on it!) |
Sets the colour of hyperlinked text as it is clicked on. Only shows very briefly. | |
I.E. | <BODY BGSOUND="****"> *Note the alternatives |
Background Sounds. This is an Internet Explorer extension. It works very
well with .mdi files, is easy to implement and does not require plugins etc in the viewers
Browser, but unfortunately Netscape will not recognise this tag attribute. With the many plugins and extensions around, people are often complaining about the difficulty in implementing interoperability for their background sounds. Some sites have simply placed the three basic pieces of code hoping that one or the other will load correctly. They are as follows. <sound src="lotofnoise.mid"> early mosaic method <body bgsound="lotofnoise.mid"> Internet Explorer <embed src="lotofnoise.mid" hidden="true"> Netscape |
DISPLAY | |
| <H?> </H?> (defines 6 preset font sizes, H1 to H6. Auto forced to bold) |
Text included between this tag pair is forced to display as bold text in
one of the following text sizes. Only other tags having a direct affect on Header text is
the FONT color= tag and attribute, the <BR> line break tag plus <em>
<u> etc.
|
|
| <H? ALIGN=left|center|right> </H?> |
Sets the alignment of the header object within the page or container
(i.e. a table cell). The default without an align attribute is left aligned.Size H2Size H2Size H2 |
|
| <BLOCKQUOTE> </BLOCKQUOTE> |
Indents all objects within this tag pair and can be applied more than
once as long as it is nested properly.
|
|
?? | <DIV> </DIV> *works differently between browsers. |
The DIV element, according to the HTML 3.2 specs, should be used with
Style Sheet attributes to name a section of text as being of a certain style (per Internet
Explorer). Netscape has implemented the element to work like the <p align= >
methods. Will create a line space between objects in Explorer 3+, whereas Netscape does not. |
|
| <DIV ALIGN=left|right|center|justify> </DIV> |
*Aligns the enclosed objects similarly to the <p align=??> attribute. | |
| <DFN> </DFN> |
This text is marked with the DFN tag and probably appears in italics. | |
| <EM> </EM> |
This is emphasized text and displays italisized in most browsers. | |
<I> </I> | |
This text has been marked with the I (i) tag which is equivalant to EM. | |
| <STRONG> </STRONG> |
Text displayed with the STRONG tag appears as bold text in most browsers. | |
| <B> </B> |
This text has been marked with the B tag which is equivalant to STRONG. | |
| <BIG> </BIG> |
Every BIG tag placed around any text will enlarge the text by one value for each BIG tag used. In other words you can use multiple tags to raise the size one step for each. | |
| <SMALL> </SMALL> |
Every SMALL tag placed around any text will reduce the text by one value for each SMALL tag used. In other words you can use multiple tags to reduce the size one step for each. | |
| <U> </U> |
This text has been marked with the U tag and should appear underlined. | |
| <STRIKE> </STRIKE> |
| <S> </S> |
| <SUB> </SUB> |
This text has been marked with the SUB tag and should appear as subscript | |
| <SUP> </SUP> |
This text has been marked with the SUP tag and should appear as superscript | |
The Internet has been around for many years as a text-only communication system, used mostly by boffins and professors etc.. Some of the early tag names simply defined text that was used for an address, a citation or code and so on, thus allowing users to define the significance of various blocks of text. Most of these special definitions are listed and yet appear to do very simple things like <em> italicise text etc.. Their special significance has just about been lost on todays colourfull commercial web pages. Avoid using them as some will be phased out. |
|
| <ADDRESS> </ADDRESS> |
The Author's Address was often marked with the ADDRESS tag
and probably appears as italicised text, with space between it and other text. |
|
| <CITE> </CITE> |
This is text marked with the CITE (citation) tag and probably appears italicised. | |
| <CODE> </CODE> |
This is text marked with the CODE tag and probably appears
in a monospaced font i.e. courier. |
|
| <KBD> </KBD> |
This is text marked with the KBD (keyboard prompt) tag and probably appears in a monospaced font. | |
| <LISTING> </LISTING> |
| <SAMP> </SAMP> |
This is text marked with the SAMP (sample) tag and probably appears in a monospaced font. | |
| <TT> </TT> |
This text has been marked with the TT (typewriter) tag and should appear as monospaced text | |
| <XMP> </XMP> |
LAYOUT | ||
| <PRE> </PRE> | |
The pre tag will display all text between the tags exactly as typed and
will include spaces. Browsers normaly ignore multiple spaces and display them as one, but
this tag negates that inbuilt system. (The one space only system allows us to write
our code in multiple lines. ie a paragraph of 100 words does not have to be written on one
line, and long tags can be broken into multiple lines at any space between attributes) This 'foo' is used often to display the monospaced spacing with the PRE tag.
Buttons : $1.50 Towels : $13.56 Baggy Shorts : $24.95 The text will appear in a monospaced font style i.e. courier |
||
| <CENTER> </CENTER> | |
This line of text has been nested within the CENTER tag pair, and if the line is long enough it will close-wrap and show the results. Use for any page object. |
||
N1.0 | <BLINK> </BLINK> (use cautiously*) | |
is one of the most unpopular tags, as many people are distracted by animations etc. *A Netscape extension and only works in a few browsers | ||
| <FONT SIZE="?"> </FONT> (ranges from 1-7) | |
Force the Font to a specific size | ||
| <FONT SIZE="+|-?"> </FONT> | |
Force a change in Font size | ||
| <FONT COLOR="#rrggbb"> </FONT> | |
Force the Font to a specific colour.
Overrides the <body text=???> tag attribute. Alternative font attributes can be
nested within other 'Font' tags: ie:: |
||
| <FONT FACE="***"> </FONT> | |
Select a different Font face.
Overrides the Browser default. Use with care because few computers will have exactly the
same fonts as yours. Multiple names allowed with commas between. ie face="arial,helvetica,geneva" |
||
I.E. | <MARQUEE> </MARQUEE> (use cautiously*) | |
*only
works in a few browsers. A few most recent Browsers can handle: border="?", align="?", behavior="?", scrollamount="?", scrolldelay="?" attributes. |
||
| <MARQUEE WIDTH=??%|??(pixels)> | |
*width of Marquee in Page/Table cell. | ||
| <MARQUEE BGCOLOR=#rrggbb> | |
*colours the marquee background. | ||
N3.0 | <SPACER> (*Netscape only, use cautiously) | |
*If you cannot see an area of white space indenting the first few lines of the text above, then your Browser does not recognise this extension. |
SEPARATORS | |
| <P> </P> (Paragraph. Closing tag often unnecessary) |
Forces a line space above and below text/objects nested within the tag pair. The default alignment is 'Left". Paragraph text will be auto wrapped (close lines) if the text cannot fit in the Browser window. | |
| <P ALIGN=left|center|right> </P> |
Horizontal justification alignment of above. | |
| <BR> (a single carriage return) |
Forces a Line Break at a predermined position and close wraps. Use with most objects. |
|
| <BR CLEAR=left|right|all> |
Clear Textwrap. example: An image aligned left or right can have text wrapped around (next to) it. Using this BR attribute at the end of a paragraph forces other text/objects away from the image, even if widening the Browser window would normaly also bring other text/objects up and next to that image. | |
| <HR> |
Horizontal Rule. A simple 3D line across the page or table cell. |
|
| <HR ALIGN=left|right|center> |
An HR ruled line that is shorter than its container can be forced to a horizontal position according to the attribute. | |
| <HR SIZE=?> (in pixels) |
Thickness. By default, an HR line is 2 pixels high. Use this attribute for an
alternative. ie: |
|
| <HR WIDTH=?> (in pixels) |
Force the width of an HR line to a specific size in its container. ie 50 pixels. |
|
| <HR WIDTH="%"> (as a percentage of page width) |
Force the width of an HR line to a specific size in its container. ie 50%. |
|
| <HR NOSHADE> (without the 3D cutout look) |
Remove the 3D appearence of an HR line. ie: |
|
| <NOBR> </NOBR> (prevents line breaks) |
No Break. Can be a dangerous tag; if a page is designed on a high resolution monitor
and the NOBR tag is applied to a paragraph of text, then viewers that use low resolution
monitors will need to scroll right and left to see all the page. This tag is identical to
the NOWRAP attribute used in Tables. (The special ISO character definition - - can be used as a Non-Breaking clear space. This code entered between words or objects in a paragraph will not allow wrapping at that point, while still allowing the browser to wrap the rest of the line. |
LISTS (lists can be nested) | ||
| <UL> <LI> </UL> (<LI> before each list item) | |
Unordered List
|
<ul> <li>item 1</li> <li>item 3</li> <li>item 2</li> </ul> |
|
Also known as a Bulleted List. List Items are close wrapped. Different Browsers will vary the line space between the list and other objects. | ||
N.1 | <UL TYPE=disc|circles|square> Bullets *Netscape Extention | |
List items can have one of three different Bullet types. Only works with some Browsers. Netscape will apply one of three different bullets to each list item, depending on the items indent level. MS Explorer retains the one conventional bullet (enlarged ascii char 149). | ||
| <LI> | |
List Item. This tag goes before each item to be included in a list. See examples above and below. The closing tag of the pair can be omitted for most Browsers. | ||
N.1 | <LI TYPE=disc|circle|square> *Netscape Extention | |
*Bullets, as UL Type above, but can be applied to individual List Items. | ||
| <OL> <LI> </OL> (<LI> before each list item) | |
Ordered List
|
<ol> <li>item 1</li> <li>item 3</li> <li>item 2</li> </ol> |
|
Also known as a Numbered List. List Items are close wrapped. Different Browsers will vary the line space between the list and other objects. | ||
| <OL TYPE=A|a|I|i|1> (for the whole list) | |
The Numbering method used to mark each List Item. as below | ||
| <LI TYPE=A|a|I|i|1> (this &/or subsequent items) | |
Type can be applied to each item
|
<ol> <li type="A">item 1</li> <li type="a">item 3</li> <li type="I">item 2</li> <li type="i">item 4</li> <li type="1">item 5</li> </ol> |
|
The Type attribute can be added to force a different bullet system-
non default type. (the fifth value above matches the default) |
||
| <OL START=?> (for the whole list) | |
Start Number.
|
<ol start="10"> <li>item 1</li> <li>item 3</li> <li>item 2</li> </ol> |
|
Force the List Items to start numbering at a specific number. | ||
| <LI VALUE=??> | |
List Item Value
|
<ol> <li value=25>item 1</li> <li value=9>item 3</li> <li value=67>item 2</li> </ol> |
|
Forces each List Item to a specific individual number. | ||
| <DL> <DT> <DD> </DL> (<DT> = defined term, <DD> = definition) | |
Definition List.
|
<dl> <dt>The Defined Term. ...</dt> <dd>definition 1</dd> <dd>definition 2</dd> <dd>definition 3</dd> <dt>Another Defined Term ...</dt> <dd>definition 1</dd> <dd>definition 2</dd> </dl> |
|
All items are close wrapped and definitions are indented below the defined term. Different Browsers will vary the line space between the list and other objects. | ||
| <MENU> <LI> </MENU> (<LI> before each list item) Rarely used. | |
Menu List | <menu> <li>item 1</li> <li>item 3</li> <li>item 2</li> </menu> |
|
| <DIR> <LI> </DIR> (<LI> before each list item) Rarely used. | |
Directory List |
<dir> <li>item 1</li> <li>item 3</li> <li>item 2</li> </dir> |
BITMAP IMAGES | |
| <IMG SRC="url"> |
Display Image. Find the image in the same/local/another server. | |
| <IMG SRC="url" ALIGN=top|bottom|middle|left|right> |
Alignment. Text alignment; relating to the image on the current text line. | |
N1.0 | <IMG SRC="url" ALIGN=texttop|absmiddle|baseline|absbottom> |
Alignment. As above, only these are Netscape-specific extentions. | |
| <IMG SRC="url" ALT="***"> (if image not displayed) |
Alternate Text view. A most important attribute. Some Browsers cannot display images at all. Many viewers just want information and switch off image viewing in their Browsers, thus making pages load faster. In bothe cases, the "alt=***" attribute allows people to read what the image would show them. | |
| <IMG SRC="url" WIDTH=? HEIGHT=?> (in pixels) |
The image size in pixels. A most important attribute. Have you ever watched a page jump and shake as each bitmap image appears. Well, if the designer had bothered to include the width and hieght attributes that would not happen. People will back track away from pages that annoy them too much - Lost sales?? | |
| <IMG SRC="url" BORDER=?> (in pixels) |
Border. An image that is used for a hyperlink will have a border around it if this attribute is included. The colour will be the page default hyperlink colour. | |
| <IMG SRC="url" HSPACE=? VSPACE=?> (in pixels) |
Keep away!! These attributes, together or only one, will put space between the image and any other images or text. ( can be used effectively between images horizontally) | |
N1.0 | <IMG SRC="url" LOWSRC="url"> |
Path to a low resolution copy of an image. Supposedely having a much smaller file size, this image would be loaded first, while the slower proper image is downloaded. 'Interlaced' GIFs have superceded need for this attribute. | |
| <IMG SRC="url" ISMAP> (requires a server-side script) |
Imagemap. See the "About Image Maps" tutorial. | |
| <IMG SRC="url" USEMAP="url"> |
Imagemap See the "About Image Maps" tutorial. | |
| <MAP NAME="***"> </MAP> (map name reference for coordanants data) |
Map. See the "About Image Maps" tutorial. | |
| <AREA SHAPE="rect" COORDS=",,," HREF="url"|nohref> |
Section. See the "About Image Maps" tutorial. |
LINKS | |
| <A NAME="***"> </A> - (a BookMark) |
Define an object on the current document as a Bookmark. An
object can be given a name that can then be called from a hyperlink. The "Menus | Symbols"
bookmarks on this page are an example. Bookmarks can also be called across pages by
including a URL (see "A HREF" below). |
|
| <A HREF="url"> ... </A> (another page local, in another folder or on another server) |
Link to another page/object. The A tag hyperlink can be
called from an image or text. ie <a href="wallyworld.html>Go to Wally World</a> ie <a href="wallyworld.html><img src="widget.gif"></a> ie <a href="wallyworld.html><img src="../images/widget.gif"></a> Example
1 uses a text link to another page in the same directory. Read the 'Some Common Basic Tags' tutorial for URL and directory references. |
|
| <A HREF="url#***"> </A> (if in same folder, another, or on another server) |
Link to a Bookmark on an another page. <a href="wally.html#jimbo"> (assuming wally.html contains a bookmark named object - 'jimbo'. see 'Bookmark' above. The <a href... tag must contain the hash (#) symbol. The object with the name must not. <a href="http://www.aserver.net/wally.html#jimbo"> (assuming another site contains a page called wally.html, and that page contains a bookmark named object - 'jimbo'. |
|
| <A HREF="#***"> </A> (if in the current document as a named Bookmark) |
Link to a Bookmark on the same page. <a href="#jimbo"> assuming the page being viewed contains a named object - 'jimbo'. see 'Bookmark' above. The <a href... tag must contain the hash (#) symbol. The object with the name must not. |
|
| <A HREF="url" TARGET="***"> </A> |
Link to another page and open it in the Target window.
These values are really only usefull when using Frames. However, the "_blank" value may be of some interest because it will open up another Browser window leaving the calling window open. Many webmasters that offer links to other sites use this value so the viewer will still have a Browser window of the original site open, although they have surfed elsewhere. |
SPECIAL CHARACTERS (ISO-Latin-1) |
See a complete
listing in the "Some Common Basic Tags" tutorial.
It is very important to include the (&) ampersand plus the (;) semicolon. These are Browser imbedded codes, so the & representing the ampersand or 'and' sign is not a contradiction. Why use them? Just typing on your computer and using the standard keyboard characters will not guarantee that fonts on other computers will include them. Using these will tell the Browser to default if the requested char. set cannot. If these characters are used in sentences then their meaning is special, so this method tries to ensure their inclusion. |
REPRESENTATIVE SYMBOLS USED ON THIS PAGE | ||
URL Represents the path to a file on - another server, same server-different folder, same folder | ||
? Arbitrary number. | **** Text (i.e. "middle"). | |
rrggbb RGB Hex value (i.e. "#00CC66") | | Separates alternatives. | ,,, Comma separated (i.e. "0,0,35,35", etc.). |
N?.? -
Extension introduced with Netscape Navigator version ?.?. I.E. - Extension introduced with Internet Explorer |
colour [U.K.] must be
spelt as color [U.S.] in all HTML
code. centre [U.K.] must be spelt as center [U.S.] in all HTML code. |
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 |