Saturday, August 15, 2009

AG17: So You Wanna Do Some HTML?

Download Episode 17

This week Chris and Russ look at the basics of HTML: What is is? How do you write it? And just what does your browser do with it?

HTML was invented by Tim Berners-Lee along with Robert Cailliau.

HTML is a language for describing the layout of text and graphics, the kind of thing that a person will read; In fact you are reading a rendered HTML document right now. The main problem that HTML tries to solve is: How do you describe a complicated page of text and graphics using only what you can type into a simple text editor and some image files. The solution is tags: A tag is just a word that is wrapped in less-than and greater-than signs, like this:

<body>

The idea is that any ordinary text in an HTML document just ends up as ordinary text on the screen, but things that look like tags tell the browser how to display the other stuff. In short, tags are like the stage directions that a director might whisper to actors on the stage.

Every HTML document should start with a magic incantation that announces to the world that it is, indeed, an HTML document. There are some variations on this, but they all look more or less like this one from Google:

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

Once you get past this special but, you get to the actual HTML. Every HTML document should be wrapped in start and end HTML tags:

<html>

... GUTS OF THE HTML DOCUMENT ...

</html>


The example above shows an important aspect of HTML: The start of the html document is marked with <html> while the end of the document is marked with </html> . Note the / in the end tag. In HTML <something> is the start of something while </something> is the end of something.

Inside of the html tags, you have the two things: The head part of the document and the body:



<html>

<head>

... INFO ABOUT THE DOCUMENT ...

</head>

<body>

... THE DOCUMENT ITSELF ...

</body>

</html>

The most common thing that you find in the head part is the title:

<head>
<title> This is an example HTML document </title>
</head>

The title part of the HTML tells your browser what to put in the window title (way up there at the very top of your window) when it displays the page.

The body tag holds the actual document contents:

<body>
<p>This is my document.</p>
<p>This is <b>my</b> document.</p>
</body>

You can control how your text display by putting in tags like <p> for paragraph and <b> for bold.

Finally Russ was mistaken about the image tags: your specify the source of the image like this:

<img src="picture.gif"/>

You can learn a lot more about HTML from W3 Schools. If you want to know all the really gory details, have a look at the specification.

No comments:

Post a Comment