HTML stands for hypertext markup language: it uses special tags to “mark up” text and images. These tags tell browsers how to organize and display the text and images as a web page, though the tags themselves aren’t displayed to the viewer. HTML is also used to encode web pages with hypertext links that connect web pages both within a site and between different sites.
HTML Tags
All HTML tags share the following components:
• A less-than sign (<)
• A name written as a word or letter(s)
• A greater-than sign (>)
An example of an HTML tag is <b>, which bolds text.
Open Tags, Close Tags, and Self-Closing Tags
Nearly all HTML tags work as enclosures: each tag is actually made up of an open tag and a close tag that surround, or enclose, text. The open tag identifies where in the text a particular formatting instruction begins, whereas the close tag marks where that instruction ends.
• Open tags: An open tag, such as <b> , follows the basic HTML format.
• Close tags: A close tag adds a forward slash (/) to an open tag. For instance, </b> is the close tag for <b>. Unless it’s otherwise specified, assume that every open tag has a corresponding close tag.
• Self-closing tags: Some HTML tags, such as <br> (for line breaks) and <img> (for images), include a forward slash at the end of the open tag to indicate that the tag should be opened and closed at once. You don’t need to use a close tag with these tags.
To bold a selection of text and create a line break, you would write:
<b>This text will be bold.</b> <br />
Nesting Tags
HTML tags are often nested, meaning that tags that appear first are closed last, and they can contain other open and close tags within their own tags. For instance, you can nest the bold (<b>) and italic (<i>) tags so that:
<b>This text will be just bold. <i>This text will be italic and bold.</i> This text will be just bold.</b>
HTML Tag Attributes
Some HTML tags can also contain attributes, which modify a tag or provide it with extra information. Attributes appear in the tag a space apart from the tag name and are followed by an equal sign (=) and a value that’s written in quotes. For example, take the following tag:
<img src = “logo.jpg”>
The name of this tag is img, the attribute is src, and the value of the attribute is logo.jpg. The value logo.jpg tells the browser to insert an image. (For more on inserting images, see How to Add Images to Your Web Pages.)
HTML Tagging Syntax
When writing HTML tags, it’s important to follow four fundamental rules of HTML syntax:
• Write all tags in lowercase.
• Surround all attribute values with quotes.
• Close all open tags.
• Open and close nested tags in the proper sequence.
How to Structure HTML Documents
Every web page uses four required HTML tags. These tags organize the page and define its separate parts.
• The <html> </html> tag: These tags surround all the text and all the other tags in the document and tell the browser that the document is written in HTML.
• The <head> </head> tag: Defines the page’s heading. The heading includes information about the page, such as the required <title> </title> tag and meta data, which search engines read to determine what type of content your site contains.
• The <title> </title> tag: Indicates the page’s title (“A simple HTML document”). The web page title appears on the browser, often near the middle or the top left.
• The <body> </body> tag: Defines the body of the web page, which contains the text and/or images that make up the meat of the page and appears in the main browser window.
The Simplest Possible Web Page
The simplest web page that browsers can read uses just the four required tags, as in the following example:
<html>
<head>
<title>
A simple HTML document
</title>
</head>
<body>
This text will appear in the main browser window.
</body>
</html>
How to Create HTML Documents
You can create HTML documents in any text editor, including standard word processing software. It’s best, though, to use software designed especially for HTML authoring. The two main types of authoring software are WYSIWYG editors and text editors.
• WYSIWYG editors: WYSIWYG stands for “what you see is what you get.” These programs, such as Microsoft FrontPage and Adobe Dreamweaver, don’t so much help you write HTML as write it for you. They let you arrange the elements of your web pages visually, then they generate the HTML code for you.
• Text editors: These programs make creating your own HTML code by hand easier with features such as autocorrect and different colors for each type of tag. Text editors also make it easy to preview your results in a browser. The most popular text editors are CuteHTML (for PCs) or BBEdit (for Macs).
While WYSIWYG software can make web construction easy, it isn’t very precise and won’t help you understand HTML or improve. The best way to learn—and the only way to get precise control over your web design—is to learn to code HTML by hand using text editors.
The Five Main Types of HTML Tags
There are five basic types of tags you need to know in order to create simple text-based web pages (to add photos and illustrations to web pages, see How to Add Images to Web Pages). The five main types of tags are those used to:
• Style text
• Organize page elements
• Separate page elements
• Create links
• Insert images
Tags Used to Style Text
These tags are used to alter the appearance of text. The effects of these tags, including fonts, sizes, colors, and spacing, can be modified with more precision and variation using CSS (see Cascading Style Sheets.)
Tags Used to Style Text
Tags Used to Organize Page Elements
HTML uses tables to organize text and images. A table is a framework that places content into horizontal rows that contain cells. There are a few rules to remember about tables:
• Each table must contain at least one row.
• Each row must contain at least one cell.
• Tables can have visible borders, which show the boundaries of rows and cells, or invisible borders.
A typical table with visible borders might look like this:
Tags Used to Organize Page Elements
The HTML code to create tables includes these tags:
Tags Used to Organize Page Elements - 2
The most common attributes used to control the size, orientation, and appearance of tables, rows, and cells are:
Tags Used to Organize Page Elements - 3
Tags Used to Separate Page Elements
These tags are used to group or divide text. Each creates a new line on your web page.
Tags Used to Separate Page Elements
Tags Used to Create Links
To add links to your web pages:
• Know the URL of the page to which you’d like to link.
• Create an anchor tag that contains that URL.
Anchor Tags
An anchor tag uses the <a> tag along with the attribute href (which stands for hypertext reference). For instance:
<a href = “http://www.quamut.com”>Quamut</a>
The value of href (in quotes after the equal sign) tells the browser which URL it should link to (in this case, http://www.quamut.com). The text between the opening and closing of the anchor tag (in this case, the word Quamut) will appear as an underlined link in your browser.
The HTML Image Tag
To include images on your web pages, use HTML’s image tag, which looks like this:
<img src = “../img/flowers.jpg” alt=”flowers” />
The image you reference in your image tag will appear in your browser wherever you place it within your HTML code. For instance, images can appear within text paragraphs, between paragraphs, in table cells, and so on. The parts of the image tag, as in the example tag above, are:
• img: This is the name of the tag itself.
• src: This attribute stands for “source,” or the location on the server of the actual image file.
• /img/flowers.jpg: This line instructs the browser to look in the img directory to find an image called flowers.jpg. The two dots mean that the directory “img” is located up one level from the default directory, or the directory in which the HTML file that calls for this image resides.
• alt: This represents a text description of the image that will appear if the image itself fails to load.
A Sample Web Page Created with HTML
The sample web page below uses the HTML tags defined in this section. To make this web page yourself, open your HTML text editor and type in the following example exactly as it appears:
<html>
<head>
<title>A New Web Page</title>
</head>
<body>
<font face=”verdana” size=”5″ color=”#FF0000″>
A <u>New</u> Web Page</font>
<p>
A sample <b>HTML</b> document created by <i>me</i>.
<br>
(And some help from <a href=”http://www.quamut.
com”>Quamut</a>.)
</p>
<p>
<table width=”300″ border=”1″ cellpadding=”5″
cellspacing=”5″>
<tr>
<td>
Cell 1.
</td>
<td>
Cell 2.
</td>
<td>
<img src=”../img/flowers.jpg” alt=”flowers” />
</td>
</tr>
</table>
<hr width=”300″ align=”left”>
</p>
</body>
</html>
Save the file as sample.html. Then launch your web browser and open sample.html from the File menu. The web page you just created should look like this:
Adding a DTD to Your HTML Documents
All web pages must include at the very beginning of the HTML code a few lines called a document type definition, or DTD. A DTD ensures that a browser knows what version of HTML your document contains, and therefore how to interpret and display your web pages. A standard DTD that you can use for all your web pages looks like this:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
Place this DTD at the very top of all of your HTML documents, just before the first <html> tag. The contents of the DTD will not display in the browser.
* The above information was provided by Barnes and Noble – Quamut – how to do it ™ series which can be purchased by clicking the Barnes and Noble advertisement.