[=||=]

What's up front?

The text above consists of the following:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<LINK REV="made" HREF="mailto:af380@chebucto.ns.ca">
<TITLE>Norman De Forest's HTML Sampler</TITLE>
</HEAD>
<BODY>
<img src="flasher8.gif" HSPACE=20 VSPACE=20 alt="[=||=]>
<H1><A NAME="part1">What's up front?</A></H1>

Topics:

What's up front?
Headings.
Paragraphs.
Character Styles.
-- Logical Styles.
-- Physical Styles.
Graphics.
Preformatted text.
Forced line breaks and horizontal lines.
Lists.
-- Unordered Lists.
-- Ordered Lists.
-- Definition Lists.
-- Nested Lists.
Special Characters.
-- Errors caused by '&' in URLs.
 Image-Maps and Adding Images to Make a Website Text-Friendly
   (on separate page).
Other HTML Resources.
-- Some starting points.
-- Tutorials.
-- References.
-- Validating Your HTML.
-- Resources and Tools.
-- The "Any Browser" Campaign.
Accessibility.
-- Designing an Accessible Web Site.
-- Validation and Accessibility Checking.
Miscellaneous Rants and Raves on Web Design.
Legal Information.
Miscellaneous Links on Web design and Resources That I Have Not Yet Sorted.
Exit.

Headings:

Source:

<H1>Heading, Type One.</H1>
<H2>Heading, Type Two.</H2>
<H3>Heading, Type Three.</H3>
<H4>Heading, Type Four.</H4>
<H5>Heading, Type Five.</H5>
<H6>Heading, Type Six.</H6>

Result:

Heading, Type One.

Heading, Type Two.

Heading, Type Three.

Heading, Type Four.

Heading, Type Five.
Heading, Type Six.

To Topics.

Paragraphs:

Source Text:

<P>This is a paragraph of text typed in with the words squeezed 
close together as much as possible.  The browser will format the text as 
it sees fit with no regard for multiple spaces or line breaks.</P>

<P>
This       is       a        paragraph      of      text     typed   in
with      the      words      spaced     far     apart     as   much   as
is
practical
for
this
demo.   The    browser   will    format    the     text    as    it
sees    fit    with     no     regard     for    multiple    spaces
or     line    breaks.
</P>

<P>
Notice how the paragraphs are separated BUT any physical separation that
you put in your text is ignored.

Especially note that this sentence and the one above are in the same
paragraph even though they appear to be separate paragraphs in the
source text.
</P>

Results:

This is a paragraph of text typed in with the words squeezed close together as much as possible. The browser will format the text as it sees fit with no regard for multiple spaces or line breaks.

This is a paragraph of text typed in with the words spaced far apart as much as is practical for this demo. The browser will format the text as it sees fit with no regard for multiple spaces or line breaks.

Notice how the paragraphs are separated BUT any physical separation that you put in your text is ignored. Especially note that this sentence and the one above are in the same paragraph even though they appear to be separate paragraphs in the source text.

To Topics.

Character Styles:

Logical Styles:

Source Text:

<P>The use of the text, not the look, is important for Logical Styles.
<EM> This is Emphasized. </EM>
<STRONG> This is Stronger Emphasis! </STRONG>
<CODE> This is used for examples of computer code. </CODE>
<SAMP> Sample text is similar to code and MAY be shown the same way.</SAMP>
<KBD> Text showing keyboard input may also look like code. </KBD>
<VAR> Variable text to be replaced with actual values may look like 
    code with some browsers and be shown in italics with others. </VAR>
<DFN> Words that have just been defined or are about to are often shown
    in bold with some browsers. </DFN>
<CITE> Citations are sometimes shown in italics. </CITE>
</P>

Results:

The use of the text, not the look, is important for Logical Styles. This is Emphasized. This is Stronger Emphasis! This is used for examples of computer code. Sample text is similar to code and MAY be shown the same way. Text showing keyboard input may also look like code. Variable text to be replaced with actual values may look like code with some browsers and be shown in italics with others. Words that have just been defined or are about to are often shown in bold with some browsers. Citations are sometimes shown in italics.




Physical Styles:

Source Text:

<P>The physical styles dictate the appearance BUT may not be supported by 
 all browsers or substitutions in style may be made:
<B>This is nominally Boldface but may be underlined with some browsers.</B>
<I>This is nominally Italics but may be underlined with some browsers.</I>
<TT>This is nominally a typewriter (TeleType) font but may not show up 
  with all browsers</TT>
</P>

Results:

The physical styles dictate the appearance BUT may not be supported by all browsers or substitutions in style may be made: This is nominally Boldface but may be underlined with some browsers. This is nominally Italics but may be underlined with some browsers. This is nominally a typewriter (TeleType) font but may not show up with all browsers

To Topics.

Graphics:

Source Text:

<IMG SRC="flasher1.gif" ALT=" || ">
<P>Aligned... <IMG SRC="flasher1.gif" ALIGN=TOP ALT=" || "> Top.</P >
<P>Aligned... <IMG SRC="flasher2.gif" ALIGN=MIDDLE ALT=" [=||=] "> Middle</P>
<P>Aligned... <IMG SRC="flasher7.gif" ALIGN=BOTTOM ALT=" || "> Bottom</P>

Results:

||

Aligned... || Top.

Aligned... [=||=] Middle

Aligned... || Bottom

Source Text:

<p>Although rarely seen and not supported by all browsers (Firefox and
Opera on my computer do support it, Internet Explorer version 6 doesn't),
images and other data (see <a
href="http://www.faqs.org/rfcs/rfc2397.html">RFC 2397</a>) can be included
directly on a web page without any additional image file:</p>

<p>
<img 
src="data:image/gif;base64,R0lGODlhYABGAIAAAAAAAP%2F%2F%2FywAAAAAYABGAEAC%2FoSP
qcvtD6OcNBirMKa8V7CBHhJa4YhGJ7OKUJvGC5wE9mHTpMzH%2Bf3T9YbEovGITEo2TJzTdXlCm1BlM
vizaqOvy63aEG4fYjCXPEaVTc51eoSNM78gefA9bFFr%2BElWunNWV%2FInyEZFh7e3KMV4ttcXKTlJ
OaZX2WOXI%2FikmYiZkXiZMUPyCYojWkrK6lU26dbq8AqrsoqGymLbFJsrqxsFCezbwQtIXMQWjMwMO
kpa0ghI%2BHiM9Bw4JW0YSCfcDJ7yPPe5uT1IG66%2Bzt4eie3OkcVrHu9XzZWO7GbcFX4yzhoYfYqq
2JkhZwfBNMpcYUEYR%2BE%2FPr84cVr4ple2hFnqNAqsSMyjxVvN%2BM2zNbFLP1zgxNy5w7Lki3mFw
nT0J%2BIbSHsrMfJs89HeLqBC%2FbxsA7MoxIcOkyp9OrMejRX1tLk6N8gSyXMBp2kIem1r01uQotXB
emWpo6tcvXn1CTVX1UVVs5oidIpSV6tm%2BOqUtLdhK0Zwr5VTZeiw2b5xGystAAA7"
alt="Flashing [=||=] Cursor">
</p>

Results:

Although rarely seen and not supported by all browsers (Firefox and Opera on my computer do support it, Internet Explorer version 6 doesn't), images and other data (see RFC 2397) can be included directly on a web page without any additional image file:

Flashing [=||=] Cursor

To Topics.

Preformatted text:

Source:

This     is      some      text
that     was     typed     in 
four     columns  of       text.
<PRE>
This     is      some      text
that     was     typed     in 
four     columns  of       text.
</PRE>
This     is      some      text
that     was     typed     in 
four     columns  of       text.

Result:



This is some text that was typed in four columns of text. 
This     is      some      text
that     was     typed     in 
four     columns  of       text.
This is some text that was typed in four columns of text.

To Topics.

Forced line breaks and horizontal lines:

Source:

This is one line of text.  
This is another line of text.  
This is a third line of text.  
<HR>
This is one line of text.<BR> 
This is another line of text.<BR>
This is a third line of text.

Result:



Result:



This is one line of text. This is another line of text. This is a third line of text.
This is one line of text.
This is another line of text.
This is a third line of text.

To Topics.

Unordered Lists.

Source:

<UL>
<LI>First Item.
<LI>Second Item.
<LI>Third Item.
<LI>You guessed it, Fourth Item.
<LI>and Fifth and Last Item.
</UL>

Result:


To Topics.

Ordered Lists.

Source:

<OL>
<LI>First Item.
<LI>Second Item.
<LI>Third Item.
<LI>You guessed it, Fourth Item.
<LI>and Fifth and Last Item.
</OL>

Result:

  1. First Item.
  2. Second Item.
  3. Third Item.
  4. You guessed it, Fourth Item.
  5. and Fifth and Last Item.

Source:

<OL start="7">
<LI>First Item.
<LI>Second Item.
<LI>Third Item.
<LI>You guessed it, Fourth Item.
<LI>and Fifth and Last Item.
</OL>

Result:

  1. First Item.
  2. Second Item.
  3. Third Item.
  4. You guessed it, Fourth Item.
  5. and Fifth and Last Item.

Source:

<OL type="1">
<LI>First Item.
<LI>Second Item.
<LI>Third Item.
<LI>You guessed it, Fourth Item.
<LI>and Fifth and Last Item.
</OL>

Result:

  1. First Item.
  2. Second Item.
  3. Third Item.
  4. You guessed it, Fourth Item.
  5. and Fifth and Last Item.

Source:

<OL type="A">
<LI>First Item.
<LI>Second Item.
<LI>Third Item.
<LI>You guessed it, Fourth Item.
<LI>and Fifth and Last Item.
</OL>

Result:

  1. First Item.
  2. Second Item.
  3. Third Item.
  4. You guessed it, Fourth Item.
  5. and Fifth and Last Item.

Source:

<OL type="a">
<LI>First Item.
<LI>Second Item.
<LI>Third Item.
<LI>You guessed it, Fourth Item.
<LI>and Fifth and Last Item.
</OL>

Result:

  1. First Item.
  2. Second Item.
  3. Third Item.
  4. You guessed it, Fourth Item.
  5. and Fifth and Last Item.

Source:

<OL type="I">
<LI>First Item.
<LI>Second Item.
<LI>Third Item.
<LI>You guessed it, Fourth Item.
<LI>and Fifth and Last Item.
</OL>

Result:

  1. First Item.
  2. Second Item.
  3. Third Item.
  4. You guessed it, Fourth Item.
  5. and Fifth and Last Item.

Source:

<OL type="i">
<LI>First Item.
<LI>Second Item.
<LI>Third Item.
<LI>You guessed it, Fourth Item.
<LI>and Fifth and Last Item.
</OL>

Result:

  1. First Item.
  2. Second Item.
  3. Third Item.
  4. You guessed it, Fourth Item.
  5. and Fifth and Last Item.

To Topics.

Definition Lists.

Source:

<DL>
<DT>Coffee.
<DD>One of the four major food groups.
<DT>Toilet paper.
<DD>Remember, the job's not over until the paper-work is finished.
<DT>Light bulbs.
<DD>The subject of dozens of &quot;How many ... ?&quot; jokes on the Internet.
</DL>

Result:

Coffee.
One of the four major food groups.
Toilet paper.
Remember, the job's not over until the paper-work is finished.
Light bulbs.
The subject of dozens of "How many ... ?" jokes on the Internet.

Source:

<DL compact>
<DT>Coffee.
<DD>One of the four major food groups.
<DT>Toilet paper.
<DD>Remember, the job's not over until the paper-work is finished.
<DT>Light bulbs.
<DD>The subject of dozens of &quot;How many ... ?&quot; jokes on the Internet.
</DL>

Result:

Coffee.
One of the four major food groups.
Toilet paper.
Remember, the job's not over until the paper-work is finished.
Light bulbs.
The subject of dozens of "How many ... ?" jokes on the Internet.

To Topics.

Nested Lists.

Source:

<UL>
<LI>First item
<LI>Second item
<UL>
<LI>First subsection of item two
<LI>Second subsection of item two
</UL>
<LI>Item three
</UL>

Result:



Source:

<OL>
<LI>First item
<LI>Second item
<OL>
<LI>First subsection of item two
<LI>Second subsection of item two
</OL>
<LI>Item three
</OL>

Result:



  1. First item
  2. Second item
    1. First subsection of item two
    2. Second subsection of item two
  3. Item three

Source:

<UL>
<LI>First item
<LI>Second item
<OL>
<LI>First subsection of item two
<OL>
<LI>Part one
<LI>Part two
</OL>
<LI>Second subsection of item two
</OL>
<LI>Item three
</UL>

Result:



Source:

<DL>
<DT>Animal:
<DD>Mammals:
<OL>
<LI>Giraffes.
<LI>Bears.
<LI>Skunks.
</OL>
<DD>Birds:
</OL>
<LI>Storks.
<LI>Robins.
</OL>
<DD>Fish:
<OL>
<LI>Trout.
<LI>Cod.
<LI>Salmon.
</OL>
<DT>Vegetable:
<DD>Trees.
<DD>Moss.
<DT>Mineral:
<DD>Quartz.
<DD>Feldspar.
</DL>

Result:



Animal:
Mammals:
  1. Giraffes.
  2. Bears.
  3. Skunks.
Birds:
  1. Storks.
  2. Robins.
Fish:
  1. Trout.
  2. Cod.
  3. Salmon.
Vegetable:
Trees.
Moss.
Mineral:
Quartz.
Feldspar.

To Topics.

Special Characters:

Source:

<P>Normal, <B>Bold</B>, <CODE>Code</CODE></P>
<P>Normal, &lt;B&gt;Bold&lt;/B&gt;, &lt;CODE&gt;Code&lt;/CODE&gt;</P> 
<P>Quote: &quot;, Less-Than: &lt;, Greater-Than: &gt;, Ampersand: &amp;</P>

Result:

Normal, Bold, Code

Normal, <B>Bold</B>, <CODE>Code</CODE>

Quote: ", Less-Than: <, Greater-Than: >, Ampersand: &

Other special characters may not be displayable with all browsers or all terminals or terminal emulators so I have another page for the extended characters outside of the printable ASCII range, a new and improved version with entity names as well as numbers, and a chart of new entity names for some Unicode characters and a table of suggested Unicode replacements for Windows characters that are not as operating system specific as the Windows characters.

You may be surprised to know how many character entity names are supported by the lynx text-only browser. There are two sets of entity names that can be compiled into lynx. One includes the standard entity names and the other includes all of the standard names plus entity names from other sources as well as those in the HTML standard.

A consolidated list of character entity names used by a variety of SGML-type applications (including standard and non-standard HTML) can be found on the Unicode web site at:
http://www.unicode.org/Public/MAPPINGS/VENDORS/MISC/SGML.TXT

Errors due to unescaped ampersands:

Any script that generates URLs with parameters in the form:

    http://domain/path/script-name?var1=param1&var2=param2&...

should always use "&amp;" instead of "&" because the variable name could be an entity currently recognised by lynx or one that will be recognised in the future and lynx would recognise "&var=" as an entity followed by "=" and misinterpret the parameter as the wrong character. (Remember that the trailing ';' in an HTML character entity is optional if the following character is not a letter or digit.) While Netscape and Internet Explorer are behind lynx in this regard, they could recognise more entity names in the future as well.

I have already seen this problem with:
"&image=" (to select an image)
   being interpreted as "ℑ"
   (imaginary 'i') + "=",
"&lang=" (language)
   being interpreted as "⟨"
   (left angle bracket) + "=",
"&prod=" (product -- as in commercial product such as toilet paper)    being interpreted as "∏"
   (mathematical product sign -- result of a series of multiplications) + "=",
"&bull=" (bulletin)
   being interpreted as "•"
   (bullet) + "=".
(I am tempted to say that the page was just a lot of bull -- but I won't)
and
"&part=" (part -- of a multi-part thread or set of web pages)
   being interpreted as "∂"
   (mathematical partial differential) + "=".
Google (at the time of this writing, Oct 21, 2003) uses "&num=" to specify the number of entries to display and lynx recognises "&num;" as the non-standard entity for '#' so the "&num=" is interpreted as "#=", preventing lynx users from following the links that use this unless they edit the URL.

Microsoft's Links and contacts "a-d" page in the "typography" section of their site has a problem with "&part=" with the links to the "e-i", "j-n", "o-s", and "t-z" sections of the site with the lynx browser interpreting the links as:

See RFC 1866 - Hypertext Markup Language - 2.0, section 8.2.1 at one of these locations for more on this:

The latest offender I have encountered is Elections Canada. A multitude of hyperlinks on their site use "...&lang=..." instead of "...&amp;lang=..." and lynx (correctly) interprets the "&lang" as a left angle bracket. A snapshot of their page taken on June 9, 2004 before editing it. Note: When lynx here is used to "print" the page source, it adds the following two lines at the top of the file:

<!-- X-URL: http://www.elections.ca/home.asp?textonly=false -->
<BASE HREF="http://www.elections.ca/home.asp?textonly=false">

and the "references" at the bottom:

References

   0. http://www.elections.ca/home.asp?textonly=false

Another snapshot of their page after editing it to correct that error.

To Topics.

To Be Continued ...

To Topics.

Other HTML Resources:

The Science Fiction Writers of America have a page on their Web Site with information on writing HTML. You might find THAT helpful.

To Topics.

Tutorials:

To Topics.

References:

To Topics.

Validating Your HTML:

To Topics.

Resources and Tools:

To Topics.

The "Any Browser" Campaign:

To Topics.

Accessibility.

You may wish to consider how your page can be accessed by the visually impaired. (Note that anything you do to make your site more accessable for the blind will probably make your site rank higher in search-engines. Search-engines such as AltaVista don't index on images but on text. A web page full of nothing but pictures and links using images as labels with no ALT text is not only a problem for the blind but will also have no text content for search-engines to index.) Design considerations for accessible Web pages are provided by these sites:

There is now a newsgroup dedicated to the topic of accessable web design, alt.html.web-accessibility that may be worth checking out as a good place to ask (or answer) questions about designing accessable web sites. Other newsgroups that may be of interest are:

To Topics.

Validation and Accessibility Checking:

To Topics.

Miscellaneous Rants and Raves on Web Design.

To Topics.

Legal Information:

Another thing to consider is the legality of what you put on your web site or download from others' web sites. The Oppedahl & Larson Patent Law Web Server is host to the Web Law FAQ, which covers such subjects as "May I freely link to the Web sites of others?" and the propriety of using others' images on your site.

Miscellaneous Links:

  1. HTML By Example
  2. ASCII - ISO 8859-1 Table with HTML Entity Names
  3. Index Dot HTML: THE Advanced HTML Reference
  4. HTML - Quick Reference Guide (Tag list)
  5. CBX- CHristian Banner Exchange- HTML help
  6. Creating a Personal Web Page
  7. HTML Help [gURLpages]
  8. a gURL guide to HTML
  9. HTML Guide
  10. HTML Help by The Web Design Group
  11. Web Authoring FAQ (WDG)
  12. On the use of some MS Windows characters in HTML
  13. The HTML Writers Guild
  14. HWG-News Tips - The HTML Writers Guild
  15. Composing Good HTML (Version 2.0.19)
  16. NCSA--A Beginner's Guide to HTML Home Page
  17. Top Ten Mistakes in Web Design (Alertbox May 1996)
  18. "Top Ten Mistakes" Revisited (Alertbox May 1999)
  19. Who Commits the Top-10 Mistakes of Web Design? (Alertbox May 1999)
  20. Top-10 New Mistakes of Web Design (Alertbox May 1999)
  21. New Top-10 Web Design Mistakes: Reader Comments (Alertbox Sidebar)
  22. Disabled Users and the Web (Alertbox October 1996)
  23. Disabled Accessibility (Alertbox June 1999)
  24. Web Design and Usability Hotlist
  25. Introduction to HTML - Table of Contents
  26. Techniques for Web Content Accessibility Guidelines
  27. WebTechs HTML Validation Service
  28. The XRS Network - Features - The Basics of HTML: Learn Them!
  29. The XRS Network - Features - Notepad or WYSIWYG?
  30. The XRS Network - HTML - Resources

To Topics.

Back to Norman's Home Page.

Webmaster: Norman De Forest, <af380@chebucto.ns.ca>