Expand your knowledge, Skills and Ability: HTML/XHTML

INTRODUCTION TO HTML (HYPER TEXT MARKUP LANGUAGE)

1. Introduction to HTML

HTML stands for "HyperText Markup Language" which is used in most of the pages of the World Wide Web. These "web pages", or "HTML documents", are text files that can be edited by any text editor such as Windows Notepad. However, unlike completely plain text, they contain additional formatting markup, mainly in the form of angle brackets called "tags". The markup language tells web browsers what parts of text should be in separate paragraphs, which words should be in bold, and other formattings.

Let's start with a simple HTML document.

<html>

<head>

</head>

</td>

</tr>

</table>

</body>

</html>

2. HEAD and BODY Elements

From a start tag to its end tag is defined as an "element" in an HTML document. For instance, the HTML element starts from <html> to </html>. Since an HTML document (without document type declaration) starts from <html> and ends at </html>, the HTML element actually constitutes the entire document.

An element may contain other elements. The HTML element is composed of HEAD and BODY elements. The HEAD element contains information about the document, but not the document's actual content, which is given in the BODY element.

The HEAD Element

The most essential element within the HEAD element is the TITLE element. This element specifies the document's title, which is commonly displayed in the title bar of the window. The HEAD element may contain only one TITLE element, but it may include any number of the following elements:

· STYLE provides style information about the document.

· LINK links the current document to external files, including a Cascading Style Sheet (CSS).

· SCRIPT adds scripts (such as Javascript) to the document to make it dynamic.

· META provides additional information about the document, such as character encoding.

Further details about STYLE and LINK will be given in Chapter 10.

The BODY Element

There are many elements that can be included within the BODY element. The most common one is the P element, which is rendered as a paragraph. As you have seen in Chapter 1, the tags in the P element, <p> and </p>, can split text into paragraphs. Other elements are described in the next few chapters.

3. Headings

There are six heading elements, defined by <h1> to <h6> tags. When displayed by a browser, the plain text in heading elements is in bold, with size different from the P element. However, you should not use heading tags to simply make text bold or change text size. As the name implies, use these tags for headings only. Different heading elements let you specify the hierarchical structure of your document. The H1 element is the highest level, followed by H2. H6 is the lowest level.

<html>

<head>

</head>

</td>

</tr>

</table>

</body>

</html>

4. Text Formatting

In chapter 1, you have seen that the <b> tag can make text bold. The effects of other tags are demonstrated in the following example.

<html>

<head>

</head>

</td>

</tr>

</table>

</body>

</html>

5. Attributes

An HTML element can have one or more attributes which provide additional information about the element. The following is a list of "global attributes" that can be used in most elements.

· id uniquely identifies an element within a document.

· class specifies the class of an element. In contrast to the id attribute, the same class can be shared by any number of elements.

· style provides style information for a single element. By comparison, the STYLE element applies to the entire document, and the Cascading Style Sheet (a separate file with .css extension) can be used for multiple pages.

· title is the text to be displayed as a "tooltip" (it appears when a mouse moves over the element).

Attributes are placed in the start tag. They have the syntax: name="value". Try the following example for style and title attributes.

<html>

<head>

</head>

</td>

</tr>

</table>

</body>

</html>

6. Hyperlinks

Hyperlinks (or links for short) are the basis of navigation within the same page or from one web page to another file (not limited to HTML document). To link to another file, use the <a> tag with the href attribute which specifies the location of the destination file. To link to a bookmark in a page, add "#bookmarkName" to the href attribute. The bookmark is also set by the <a> tag, but with the name attribute. Examples:

<html>

<head>

</head>

</td>

</tr>

</table>

</body>

</html>

7. Images

To place an image into an HTML document, use the IMG tag with the src attribute specifying the location of the image file. Two other attributes are commonly used: alt and title. The alt attribute is used to provide an "alternate text" in the case that the browser cannot load the image. The IMG tag does not have an end tag. A slash should be added before ">" to close the IMG element. The image can be linked to any file. Examples:

<html>

<head>

</head>

</td>

</tr>

</table>

</body>

</html>

8. Lists

In HTML, there are three kinds of lists:

I. Ordered list: It is created by using the <ol> tag. The listed items are given in LI elements.

II. Unordered list: It is created by using the <ul> tag. The listed items are also given in LI elements.

III. Definition list: It is created by using the <dl> tag. The term to be defined is given in the DT element and its definition is given in the DD element.

Examples:

<html>

<head>

</head>

</td>

</tr>

</table>

</body>

</html>

9. Tables

A TABLE element starts with the <table> tag and ends with </table>. It is divided into rows and each row is divided into data cells. The table rows are defined by the TR element, and the table data are defined by the TD element. In addition to global attributes, the TABLE element can have border, cellpadding and cellspacing attributes. The cellpadding specifies the distance between the cell data and the cell wall. The cellspacing is the space between cells. In the following example, feel free to change the values of table attributes and click "View" to see the results.:

<html>

<head>

</head>

</td>

</tr>

</table>

</body>

</html>

10. Styles

We have mentioned in Chapter 5 that styles can be specified in three different ways:

I. Use a style attribute:. It applies only to a single element.

II. Use a STYLE element. It applies to the entire document.

III. Use a Cascading Style Sheet (CSS). It applies to all web pages linked to the CSS file.

This chapter will focus on the STYLE element and Cascading Style Sheet. Their specifications use the same syntax:

selector { property:value }

The selector specifies the tag and/or attribute (either class or id) that you wish to define its style. For instance, to define the style of all P elements, the selector is p (the tag without angle brackets). To define the style of the P element with class="classValue", the selector is p.classValue. For the id attribute, the "." (dot) after p should be replaced by "#", such as p#idValue. If the tag is omitted (such as .classValue), the style will apply to all elements with the same class value.

Style properties refer to fonts, colors, background, margin, etc. (see CSS Properties). If you need to define more than one property, separate them with a semicolon such as { property 1:value1; property 2:value2 }.

Now, you should have a better understanding of the following example which has been given in Chapter 5.

<html>

<head>

p.anyValue { font-size: 18pt }

p#anotherValue { color: red }

</style>

</head>

</td>

</tr>

</table>

</body>

</html>

11. XHTML

XHTML is a strict version of HTML. The stricter syntax enables browsers to render documents more easily. The following highlights the differences between XHTML 1.1 and HTML 4.01.

All tags and attributes must be in lower case.

Wrong: <P>HTML is easy.</P>

Correct: <p>HTML is easy.</p>

Wrong: <p CLASS="value">HTML is easy.</p>

Correct: <p class="value">HTML is easy.</p>

All elements must be closed.

Wrong: <p>HTML is easy.

Correct: <p>HTML is easy.</p>

Wrong: <br>

Correct: <br />

Wrong: <img src="Logo.gif" alt="Logo">

Correct: <img src="Logo.gif" alt="Logo" />

All attribute values must be quoted.

Wrong: <p class=value>HTML is easy.</p>

Correct: <p class="value">HTML is easy.</p>

Correct: <p class='value'>HTML is easy.</p>

The name attribute is replaced by the id attribute.

Wrong: <a name="value">bookmark</a>

Correct: <a id="value">bookmark</a>

Wrong: <img src="Logo.gif" alt="Logo" name="value" />

Correct: <img src="Logo.gif" alt="Logo" id="value" />

All deprecated tags and attributes are invalid.

Deprecated tags: <center>, <font>, <u>.

Deprecated attributes: align, color, bgcolor, target.

These tags and attributes were commonly used in the earlier HTML documents. However, they have been deprecated (not supported) in HTML 4.01. Although most browsers still support them, they cannot be used in an XHTML document. You should use styles to achieve the same styling.

Wrong: <p align="center">HTML is easy.</p>

Correct: <p style="text-align: center">HTML is easy.</p>

Wrong: <p>HTML is <font color="red">easy</font>.</p>

Correct: <p>HTML is <span style="color:red">easy</span>.</p>

Wrong: <p> <a href="/" target="_blank" >Open in a new window</a>.</p>

Correct: None (unless Javascript is used) because opening a linked page in a new window was considered a bad web design.

keep on reading>

Expand your knowledge, Skills and Ability

.................

HTML/XHTML

No comments:

Post a Comment

Translate

Total Pageviews