Valid HTML 4.01! How To Make A Simple Valid HTML Document

Patty Jablonski


HTML - Hypertext Markup Language

HTML is a presentation language, a standard set of codes determining how web documents, their text, graphics, and other mutlimedia elements should be displayed or presented on the screen.


Hypertext

Hypertext is a network of documents connected by links with a hilighted keyword on one end and the document(s) corresponding to the keyword on the other. WWW can be viewed as a global network of multimedia documents that include text, graphics, sounds, videos, and animations. According to HTML, a keyword hilighted on the user's screen (link) contains the Internet address (URL) of the associated document.


Markup

An HTML document is a text document that, along with the text content it is intended to display, includes markup, or instructions determining how the browser should display it.

  • Tags

    1. Opening Tag: <name>

    2. Closing Tag: </name>

  • Elements

    1. Element: <name> text content </name>

    2. Empty Element: <name />

      An empty element is an element that does not have any text content; it is opened and closed in the same tag.

  • Attributes And Values

    1. Attributes And Values: <name attrib1="value1" attrib2="value2"> text content </name>

      Attributes control certain parameters of content presentation by being assigned a certain value.


Standards And The W3C - World Wide Web Consortium

The World Wide Web Consortium (W3C) develops interoperable technologies (specifications, guidelines, software, and tools) to lead the Web to its full potential. W3C is a forum for information, commerce, communication, and collective understanding.

Related Links:
http://www.w3.org/
http://www.w3schools.com/
http://www.fulbright.org/


Choosing A DOCTYPE

According to HTML standards, each HTML document requires a document type declaration. The "DOCTYPE" begins the HTML document and tells a validator which version of HTML to use in checking the document's syntax.

I recommend using HTML 4.01 Transitional for our HTML pages, but choose the one that fits the type of document that you wish to create. The first line of the document should be:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Related Link: http://htmlhelp.com/tools/validator/doctype.html

Basic HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>My Title</title>
</head>
<body>

<!-- This is an HTML comment -->

</body>
</html>

Related Link: example html file (example.html)

Colors

Colors in HTML are represented in hexidecimal. Hexidecimal numbers are numbers that are base 16, i.e. ranging from 0 through 15. In this case, however, because we need to use single digits, the numbers actually range from 0 through 9, followed by A, B, C, D, E and F. In HTML, colors are written in the form #rrggbb, where the first two digits represent how much red is in the color, the middle two digits represent the amount of green in the color, and the last two digits represent the level of blue in the color. These amounts of red, green, and blue mix to give a resulting color for the element.

White: #FFFFFF (all colors)

Red: #FF0000 (just red)

Yellow: #FFFF00 (red and green mixed)

Green: #00FF00 (just green)

Blue: #0000FF (just blue)

Black: #000000 (no colors)

These are among the most basic colors, but remember that each digit can range from 0 through F, giving a large number of possible colors. Change each digit and see what color you get until you get the one you want.

There are 18 pre-defined colors, which include silver, gray, maroon, green, navy, purple, olive , teal, white, black, red, lime, blue, magenta, yellow, cyan, fucshia, aqua, but I recommend using the hexidecimal notation at all times. Hexidecimal notation will give you the ability to get all of the ranges of a color.

Related Links:
http://www.cookwood.com/html4_4e/examples/appendices/colorcharthex.html
http://www.cookwood.com/html4_4e/examples/appendices/backcover.html
http://adsabs.harvard.edu/abs_doc/color_table.html
http://www.cookwood.com/html4_4e/examples/appendices/hexchart.html
http://www.dtp-aus.com/hexadeci.htm


Basic Formatting And Styles

As you may have noticed, by default an HTML page has a white background, black text and Times font. Of course you probably want to change the formatting and styles of your page.

  • Font

    1. Type Of Font: <font face="Arial, sans-serif">text content</font>

      It is important to be careful which font you choose because only fonts that are available on the system will show correctly. Because of this, it is common to list fonts so that if the first preference is not on the user's system, then the next font will show.

    2. Font Size: <font size="1">text content</font>

      The size attribute can be a number from 1 to 7. If a basefont is specified you can specify a number from -6 to 6. This attribute does not specify how many points a font is (i.e. 12pt), it is simply a relative sizing.

  • Formatting

    1. Headings: <h1> text content </h1>, <h2> text content </h2>, <h3> text content </h3>, <h4> text content </h4>

      Heading 1

      Heading 2

      Heading 3

      Heading 4

    2. Bold, Underline, Italics: <b> text content </b>, <u> text content </u>, <i> text content </i>

      bold

      underline

      italics

Links

  • Link Format

    1. Link To A Website Address: <a href="http://www.example.com/">keyword</a>

    2. Link To An Email Address: <a href="mailto:someone@example.com">keyword</a>

  • Types Of Links

    1. Absolute Links:

      Links to websites and pages other than yours should be absolutely linked. This means, it is necessary to specify the entire address, as in http://www.example.com/.

      The file 'test.html' at www.example.com: <a href="http://www.example.com/test.html">keyword</a>

    2. Relative Links:

      Once you start building multiple webpages, you are then creating your own website and would then like to link to your own pages. However, because your pages are on the same site (i.e. www.example.com), you don't need to type in that part of the address, but only need to type in the address of the page you are linking to relative to the page you are linking from.

      The file 'test.jpg' in an images directory: <a href="images/test.jpg">keyword</a>

      The file 'test.html' up a directory: <a href="../test.html">keyword</a>

Images

In the previous section, we linked to an image, but you may want to have the image loaded into the webpage. To do that, you would use the img tag.

<img src="test.jpg" alt="" width="250" height="200" />

HTML 4.01 Transitional requires that every image tag has an alt attribute, even if you don't specify a value to the attribute (i.e. have empty quotes, like above). The alt attribute is seen when the picture doesn't load (alternative text, used for accessibility) and it is usually shown when the mouse is held over the image. It is also important to note that the width and height attributes here should be the actual width and height of the image, not of the size that you want the image to appear - you should use a photo editor to resize your image to the right size first. You can also get images and icons from other websites, but it is important to make sure that the image is not copyright and that you have permission to use that image on your site.

Related Links:
http://www.iconbazaar.com/
http://office.microsoft.com/clipart/
http://www.clipart.com/
http://www.coolarchive.com/
http://gallery.yahoo.com/
http://images.google.com/


Tables

Tables are important in basic HTML because they are an easy way to quickly position items on the page without using style sheets or layers (div tags).

<table>
<tr>
<td>
text content
</td>
</tr>
</table>

First, you have the initial table tag, followed by a tr tag that initializes a 'table row'. Once you define the row, you then specify the 'table data' by using the td tag with the content within it. You can nest tables and have varying numbers of tr's and td's so that you can properly format your data (and in this case, your page's contents).


More To Learn - Tutorials And References

There are a lot more tags and formatting available in HTML than the ones discussed here. I recommend looking up more information on the web according to your needs. Here are some references to start with.

Related Links:
http://www.cookwood.com/html4_4e/examples/appendices/tags.html
http://www.cookwood.com/html4_4e/examples/appendices/symbols1.html
http://www.cookwood.com/html4_4e/examples/appendices/symbols2.html
http://www.htmlgoodies.com/
http://www.w3schools.com/
http://www.w3.org/

File Naming

If you want a page to show default in the browser within a given directory, name it 'index.html'. Although there are other ways the file's extension could be written (i.e. .htm - common in the Microsoft Windows environment), I recommend using .html as the extension for standard HTML files.


XHTML - Extensible Hypertext Markup Language

XHTML is simply syntactically stricter or well-formed HTML. Below are some of the guidelines of an XHTML document (not to be confused with XML, which is a different language than XHTML).

  • Every tag has to have a corresponding closing tag.

  • Elements must be correctly (hierarchically) nested.

  • HTML is case sensitive: lowercase must be used with all tags and attributes.

  • All attribute values must be quoted.

  • All values must be explicit.

  • XHTML prefers "id" attribute to HTML's "name" (i.e. with textbox's input tag).


ADA Specifications

The Americans with Disabilities Act/US Access Board are committed to providing accessible design. It is important to design your website with these things in mind.

  • Alt tag with images.

  • Captions with movie or animation.

  • Color objects readable in black & white screens and for color blindness.

  • Documents readable without a style sheet.

  • Text links for any image map (server-side).

  • Client-side image maps instead of server-side.

  • Row and column headers for all tables.

  • Mark-up for data and header cells when 2 or more levels.

  • Frames titled with text.

  • No screen flickering greater than 2 Hz. or lower than 55Hz. (client-controlled).

  • Text-only page provided if fully compliant page not possible.

  • Pages usable when scripting language is turned off.

    • Event handlers input-device independent.

    • Directly accessible with assistive technology.

    • Specify logical event handlers, not device dependent.


  • If applet is required, must provide plug-in link.

  • Forms accessible through assistive technology with labels and input device independent.

  • Method provided to allow users to skip repetitive navigation links.

    • Provide navigation bars to highlight and give access to navigation mechanism.

    • Group related links, identify group, provide way to bypass group.


  • When timed response is required, user shall be alerted and given sufficient time to indicate more time is required.

  • Relative rather than absolute units in mark-up language.

  • Mark up quotations (not with quotation markup for formality indentation, etc.).

  • No auto-refresh or auto-redirect without ability to control.

  • No pop-ups unless allowed to turn off spawned windows.

  • Specify abbreviation or acronym in document in first occurrence.

  • Logical tab order.

  • Keyboard shortcuts.

  • Info so users may receive documents according to preference (.doc, .pdf, etc.).

  • Different search levels for different skills.

Related Link: http://www.access-board.gov/

HTML Validation

Be aware that many webpages on the Internet are not correctly written in standard HTML. So, although you can "view source" for most pages, it is generally best not to, since their code may be incorrect. To test your website to see whether it is valid HTML, please use the following link. If there are errors, the validator will tell you the line in the file that needs to be fixed and sometimes gives possible reasons why it is incorrect and how to fix it. Simply fix your mistakes, if any, and then retest the page until you get the confirmation saying that it is a valid page.

Related Link: http://validator.w3.org/

Web Hosting

So, now that your webpages are all made and validated, where do you put them so that they can be viewed on the WWW? If you have access to a web server, then you can put your files there - i.e. you have your own web server or have one at college. There are also some companies that charge for web hosting after you buy your own domain name. However, if you simply want a site without the hassle, I recommend Yahoo!'s GeoCities, which is free. If you already have an existing Yahoo! account, then you can log in with that name. If not, signing up for an account is simple enough. GeoCities, and other sites, offer 'site builders' which make designing a website even easier! Certain popular HTML editors also provide a graphical view that does not require HTML to edit the document.

Related Link: http://geocities.yahoo.com/

Lesson Learned

It is important to make your webpages valid when you make them because it is much more difficult to redesign an entire site than to just do it right the first time!