Internal USGS Access Only

Learning HTML

The Intent

Originally HTML was designed as a distributed hypertext system to allow scientific researchers to collaborate. The goal was to mark the structure of a document without specifying the appearance: Headings, lists, emphasized text, etc... This would allow documents to be viewable on any kind of system, with formatting under control of the user.

Major commercialization of the Web caused a shift in this focus -- advertising requires an emphasis on style over substance -- which stretched HTML beyond its original intentions. HTML 4 is an effort to provide the best of two worlds by separating style/formatting from content, and by giving authors a greater control over the appearance of content.

The Hypertext Markup Language

HTML is text containing mark up tags; for example, the following html fragment will cause a bit of text to be displayed in a bold font:
The word <b>bold</b> is bold.

All HTML tags have the following format,
<element attribute="value"> . . . </element>

where "attribute" is an option, there may be several options. The closing tag (</element>) is sometimes optional and for some elements it is forbidden. HTML is not case sensitive, but some browsers have problems if the start and end tags do not have the same case. The following is an example of an image (IMG has no closing tag):
<img src="images/scenery.gif">

HTML 4 has 81 active elements, this web page uses 24 different elements, while all the documentation in this course uses 60.

A Very Simple Document


	  <html>

	    <head>

	       <title>This is the Title</title>

	    </head>

	    <body>

	      <h1>A Level 1 Heading</h1>

	      <!--a comment-->

	      <p>This is a paragraph of text.</p>

	      <p>More text in a second
          paragraph</p>

              <address>This web page by Sarah@mystuff.com</address>

	    </body>

	  </html>

Every HTML document is surrounded by <html> tags, and is composed of two parts: The HEAD section contains information about a document, and the BODY section contains the content of the document.

The TITLE tag for example determines the text is displayed in at the very top of the browser window, along with the buttons to minimize, maximize or close the window.

Indenting and using blank lines in your html will not matter to Web browsers, but will make it much easier for you to edit and understand your own html.

Xhtml is case sensitive, and the tags are all lowercase.

slide 7

"Mastering a Web Site" online course
Created and maintained by Lorna Schmid and David Boldt.
http://water.usgs.gov/usgs/training/webmaster/learning_html.html
Last modified: Tue Oct 14 16:32:52 EDT 2003