HTML, the underlying format for web pages

Date: Sat Jun 28 2008
HTML and is a standard which is the formatting system used in web pages. Perhaps it is unfortunate, but there are many website tasks requiring that you know how to read and edit HTML files. Fortunately HTML is relatively simple if a bit arcane.

The first thing to do is to use the menu choice "VIEW / VIEW PAGE SOURCE" (the exact wording may be different based on your web browser). There, wasn't that confusing? You're probably not going to need to know much about this, but it is the underlying encoding of a web page.

There are many ways to edit web sites without digging into the HTML encoding of the web pages. For example specialized WYSIWYG web site editors exist that give you a "word processor" experience. Even with these WYSIWYG editors it's necessary to occasionally dip into HTML.

Basic format

HTML (Hyper-Text Markup Language) is a plain text file but with "tags" that add formatting and content information to the text.

Okay, what does that mean? First, HTML is stored as a plain text file. Unlike the typical wordprocessor, you can edit an HTML file with any text file editor.

But, how do you make the parts of a web page show up differently? How do you make an image or a video appear? How do you control the font, or the placement, or the color, or any other content of the page? That's done by the tags you put into the HTML file.

A tag looks like this:


   <tag>
</tag>

A tag is some word surrounded by the angle brackets, '<' and '>'. Each tag has an effect on the text it is placed next to.

A tag can enclose some text, placing some effect on a block of text. For example you format a series of paragraphs using the 'p' tag like so:


   <p>Paragraph 1 ...</p>
   <p>Paragraph 2 ...</p>
   <p>Paragraph 3 ...</p>

The enclosing is done by an opening tag and a closing tag. The opening tag is '<p>' and the closing tag is the same but with a '/' in it, as shown above.

Tags can take attributes which give further information for interpreting the effect of a tag. For example the way to include an image is with the IMG tag, but how do you specify where the image is? That's done with an attribute giving the URL of the image like so:


   <img src="http://www.example.com/pix/logos/big.jpg">

Now, if you go back to the VIEW/PAGE SOURCE menu choice the HTML encoding of this page should begin to make more sense. Maybe.

References to help understand HTML

Wikipedia

  • HTML Elements
  • XHTML is a newer and technically "better" formulation of HTML which might eventually supplant HTML
  • [amazon-item:0764589172|HTML 4 For Dummies]
  • [amazon-item:076453484X|Creating Cool HTML 4 Web Pages]
  • [amazon-item:0764547194|Hip Pocket Guide to HTML 4.01: An A-Z Quick Reference to HTML Tags]
  • [amazon-item:0764507214|HTML 4 for Dummies Quick Reference]
  • [amazon-item:0672317214|Sams Teach Yourself HTML 4 in 10 Minutes]
  • [amazon-item:1565924940|Dynamic HTML: The Definitive Reference]
  • [amazon-item:0957921896|DHTML Utopia Modern Web Design Using JavaScript & DOM]