Site Banner

Caroline's Corner

Home

html/xhtml

User Analysis

Design

Accessibility

CSS

Documentation

JavaScript

Testing

Links to Tips, Tutorials & Tools

PHP

HTML: The Language of the Web

  • A Web page is a text file written in a language called Hypertext Markup Language.
  • A markup language is a language that describes a document’s structure and content.
  • HTML is not a programming language or a formatting language.
  • Styles are format descriptions written in a separate language from HTML that tell browsers how to render each element. Styles are used to format your document.

The History of HTML

  • The first version of HTML was created using the Standard Generalized Markup Language (SGML).
  • In the early years of HTML, Web developers were free to define and modify HTML in whatever ways they thought best.
  • Competing browsers introduced some differences in the language. The changes were called extensions.
  • A group of Web developers, programmers, and authors called the World Wide Web Consortium, or the WC3, created a set of standards or specifications that all browser manufacturers were to follow.
  • The WC3 has no enforcement power.
  • The recommendations of the WC3 are usually followed since a uniform approach to Web page creation is beneficial to everyone.
  • Older features of HTML are often deprecated, or phased out, by the W3C. That does not mean you can’t continue to use them—you may need to use them if you are supporting older browsers.
  • Future Web development is focusing increasingly on two other languages: XML and XHTML.
  • XML (Extensible Markup Language) is a metalanguage like SGML, but without SGML’s complexity and overhead
  • XHTML (Extensible Hypertext Markup Language) is a stricter version of HTML and is designed to confront some of the problems associated with the different and competing versions of HTML.
  • XHTML is also designed to better integrate HTML with XML.
  • HTML will not become obsolete anytime soon.

Guidelines

  • Become well-versed in the history of HTML.

  • Know your market.
  • Test.

Tools for Creating HTML Documents

  • Basic text editor like Notepad.
  • HTML Converter - converts formatted text into HTML code
  • Can create the source document in a word processor and then convert it.
  • HTML code created using a converter is often longer and more complicated than it needs to be, resulting in larger-than-necessary files.
  • HTML Editor – helps you create an HTML file by inserting HTML codes for you as you work
  • They can save you a lot of time and help you work more efficiently.
  • Advantages and limitations similar to those of HTML converters.
  • Allow you to set up a Web page quickly.
  • Will usually still have to work with HTML code to create a finished document

SlideShow

Reference: Chapter 9 of New Perspectives HTML and XHTML by Patrick Carey (Comprehensive), Thompson Course Technology, ISBN: 0-619-26747-X.

Great html reference to have open in the background while you work

Metadata

Meta Tag Overview

Meta tags are information inserted into the "head" area of web pages. Other than the title tag information in the head area of your web pages is not seen by those viewing your pages in browsers. Instead, meta information in this area is used to communicate information that a human visitor may not be concerned with. Meta tags, for example, can tell a browser what "character set" to use or whether a web page has self-rated itself in terms of adult content.

The Meta Description Tag

The meta description tag allows you to influence the description of your page in the crawlers that support the tag (these are listed on the Search Engine Features page).

<meta name="description" content="Write a description of the page here" />

The Meta Keywords Tag

The meta keywords tag allows you to provide additional text for crawler-based search engines to index along with your body copy. How does this help you? Well, for most major crawlers, it doesn't. That's because most crawlers now ignore the tag. The few supporting it can be found on the Search Engine Features page.

<meta name="keywords" content="keyword, keyphrase, etc" />

Meta Robots Tag

One other meta tag worth mentioning is the robots tag. This lets you specify that a particular page should NOT be indexed by a search engine. To keep spiders out, simply add this text between your head tags on each page you don't want indexed. The format is shown below:

<meta name="robots" content="noindex" />

For comprehensive information on metsdata and search engines go to SearchEngineWatch.

Image Map Example Code

Example usuing <img> tag.

<img src="welcome.gif" alt="Image map of areas in the library" usemap="#map1">
<map name="map1">
<area shape="rect" coords="0,0,30,30" href="reference.html" alt="Reference">
<area shape="rect" coords="34,34,100,100" href="media.html" alt="Audio visual lab">
</map>

End example.

Example using <object> tag.

<object data="welcome.gif" type="image/gif" usemap="#map1"> There are several areas in the library including the <a href="reference.html">Reference</a> section and the <a href="media.html">Audio Visual Lab</a>. </object>
<map name="map1">
<area shape="rect" coords="0,0,30,30" href="reference.html" alt="Reference">
<area shape="rect" coords="34,34,100,100" href="media.html" alt="Audio visual lab">
</map>

End example.

Redundant text links for client-side image maps

In addition to providing a text equivalent, provide redundant textual links. If the <a> element is used instead of <area>, the content developer may describe the active regions and provide redundant links at the same time.

Example.

<object data="navbar1.gif" type="image/gif" usemap="#map1">
<map name="map1">
<p>Navigate the site.
[<a href="guide.html" shape="rect" coords="0,0,118,28">Access Guide</a>]
[<a href="shortcut.html" shape="rect" coords="118,0,184,28">Go</a>]
[<a href="search.html" shape="circle" coords="184.200,60">Search</a>]
[<a href="top10.html" shape="poly" coords="276,0,276,28,100,200,50,50,276,0"> Top Ten</a>]
</map>
</object>

End example.

 

 

 

[Top]