Basic HTML

HTML is the language that web browsers and web servers use to display web pages. HTML “tags,” when added to a plain text document, instruct web browsers how to display that content on a web page. If a web page is a house, its HTML code is its blueprint.

HTML History

HTML stands for hypertext markup language. British scientist Tim Berners-Lee invented HTML and the World Wide Web in 1990. Learn more about Berners-Lee and his invention here.

True, you don’t absolutely need to learn HTML to create your own web site. Programs like Dreamweaver let novice web builders edit HTML pages as easily as word processing documents. (Dreamweaver is covered in the Web Pages chapter) But these programs often generate unnecessary code that can make pages load more slowly and eat up precious bandwidth. When something just doesn’t look right on a web page, it helps to have enough knowledge of HTML to go into the code and fix it yourself. Knowing HTML gives you additional control over creating clean, effective pages.

In this chapter, you’ll learn the newest variation of HTML, known as XHTML. There’s a long, complicated explanation for it — how it combines ordinary HTML with aspects of XML, a newer technology that’s designed to be read by computers the way Web pages are read by human beings. (For a full explanation of how to update basic HTML code to today’s standards, try Webmonkey.com’s page on XHTML doctypes. What you need to know is that using XHTML will make sure that your pages work well on Web browsers for years to come while still looking great for users who have older programs.

Every web browser has its own quirks and bugs. Some pages that look fine in Internet Explorer are a jumbled mess in Firefox, Safari or Chrome. By sticking closely to the rules of XHTML – writing standards-compliant code, as it’s called – you can ensure that your pages will look their best on a variety of browsers.

Starting from Scratch

Ready for your first look at XHTML code? While looking at any web page, go to your web browser’s View menu and select the option labeled “Source” or “Page Source.” A window will pop up showing you the source code that created that page. It may look complicated at first, but, once you learn the basics, it’ll make a lot more sense.

Tags: Every bit of code inside < > brackets is a tag, an instruction to the web browser. Under XHTML rules, tags should always be in lower case.

There are two kinds of tags. Paired tags surround text or other tags, and modify whatever they surround. For instance, they make text bold or italicized or create a link to another page. Paired tags look something like this:

This text will be bold.

In a web browser, such a tag will create text that displays like this:

This text will be bold.

In the example above, the tag indicates the beginning, or opening, of boldface in the text. The tag is the ending, or closing, tag. It lets the web browser know where the boldface ends. Notice that extra forward slash “/” before the “b”? Ending tags always include that forward slash. For instance:

This text is underlined, but text outside the tags is not.

The Basic Tags

Most web writers should know a few basic tags. The basic paired tags are:

Boldface

HTML code: B stands for bold.
Displays as: B stands for bold.

Italics

HTML code: I stands for italics.
Displays as: I stands for italics.

Paragraph

Every paragraph should begin and end with one of these tags. It creates an empty line between the end of one paragraph and the beginning of another – the equivalent of hitting the “enter” or “return” key twice in a word processing program.

The basic stand-alone tags are:

Single line break

The tag creates a single line break – the equivalent of hitting the “enter” or “return” key once.

<hr /> Horizontal rule

The <hr /> tag creates a horizontal line running the width of the page to separate one section of content from another.

In a web browser, that code displays like this:

This text is underlined, but text outside the tags is not.

Paired tags must have both an opening and a closing tag to work correctly.

Stand-alone tags don’t modify any other text or tags. They are most frequently used to do such things as create line breaks, place a horizontal line across the page or insert an image.

  creates a single line break.

<hr /> creates a horizontal line or rule.

Stand-alone tags always end with a space, then a forward slash “/” before the final bracket “>”, as seen above.

Nesting Tags

What if you want to create text that’s both bold and italicized? Simply “nest” one pair of tags inside the other:

This text is both bold and italicized.

Make sure that you close the innermost set of tags before you close the pair that surrounds it. For example:

Wrong:  The end tags are in the wrong order.

Right:  The end tags are in the right order.

Always remember to include both beginning and ending tags:

Wrong:  This is missing an ending bold tag, and everything that follows it will mistakenly be bold.

Wrong:  This paragraph is missing a beginning bold tag, and will not display as boldface.

Images

To add an image to your page, use the <img /> stand-alone tag. But wait — which image are you using? How wide or tall is it? What is its description?

To answer these questions, you need to add attributes to the image tag. Attributes provide more specific information about a tag – in this case, information about the image you want to add. Suppose you have a JPEG photo of a fire truck, named firetruck.jpg, that is 200 pixels wide and 100 pixels high. To put it on your website, you’d enter this code at the place within the page where you want the image to appear:

<img src="/images/firetruck.jpg" height="200" width="100" alt="A large red fire truck" align="left" />

To break those attributes down one by one:

src: Specifies the source of the image. What is the name of the image file, and where is it located? Every <img /> tag must include this attribute; the others are optional but useful.

The src attribute must be given a path it can follow, from the top directory of your site all the way to the place on your server where you’ve stored the image. Each new step on that path is marked with a forward slash “/”.

Suppose that you’ve placed firetruck.jpg in a folder or directory named “images” at the initial level of your website – the same directory where you store the very first page of the site. In that case, its path would be:

/images/firetruck.jpg

The first forward slash tells the web browser to start looking for the image at the very top level of your site. The next part, “images/” then instructs the browser to look inside a directory named “images”. Finally, it’s told to find the image inside that directory named “firetruck.jpg.”

Remember this system. It’s also used when you create a link between pages on your own site.

height and width: The dimensions of the image, in pixels.

alt: A text description of your image for people who have images turned off, or for blind visitors using special screen-reading web browsers.

align: If you want the image to appear flush left or flush right on the page, with the rest of your text wrapping around it, give align a value of “left” or “right.” If you just want the image to appear as part of the regular flow of text, leave out the align attribute.

Links

To insert a link to a page within your site or on another site, use the <a> and </a> pair of tags. A link looks like this:

<a href="http://www.j-lab.org">J-Lab</a>

In paired tags, attributes always go inside the beginning tag. The href attribute stands for hypertext reference, which is a fancy name for “link.” It answers the question, “If I click on this link, where will it take me?”

In the example above, the presence of the <a> and </a> tags tell the browser, “Make the word ‘J-Lab’ a link.” The href attribute then tells the browser, “This link should take users to http://www.j-lab.org/.”

When linking to an outside site, always begin the link with “http://”. This tells the web browser to look for an outside site, rather than searching the pages within your own site.

When linking to another page on your own site, use the same sort of paths discussed for finding images. For example, if you want to link the words “Local News” from your home page to a page on your site called local.html, stored in a directory named “news,” the link might look like this:

<a href="/news/local.html">Local News</a>

A Basic Document

In XHTML, all documents are divided into two parts: the head and the body. The body is that part you see on screen. The head contains information about the document, like the document’s title, its author, any necessary styles or scripts, and other information telling the browser about how to display the page. The bare-bones format of an HTML document looks like this:

<html>: <head>; <title>The name of the page goes here. It will appear at the top of the web browser window when the page is viewed.</title>; </head>
<body>: The content of your page goes here.
</body>
</html>

XHTML takes this basic setup and adds a few extra elements to it.

Adding XHTML to a Basic Document

The following text may not make sense, but it’s an important part of proper XHTML formatting. It tells the browser what kind of file it’s reading, and how to interpret the code in that file. Make sure you put it at the very beginning of every XHTML file you create.

<?xml version="1.0" encoding="UTF-8"?> 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
The title and other head information goes here.
</head>
<body>
	The content of your page goes here.
</body>

</html>

For more detail see:
http://www.w3.org/TR/xhtml1/#xhtml
http://www.codeproject.com/html/htmltoxhtml.asp