Introduction
Overview
History
Advice
IDE
Books
Tutorials
Beginners
Introduction
Text Formatting
Images
Tables
Forms
Entities/Colors
Advanced
Frames
Image Maps
Stylesheets
Reference
Community
Web Sites
Mailing Lists
USENET
Vendors
News
|
Introduction HTML files are text files that anyone can edit with a text editor, such as the very simple NotePad text editor that comes with Windows. What makes them special is that they contain commands which a web browser (such as Microsoft Internet Explorer) interprets as instructions on how to display the information contained in the HTML files. For example, the instructions might tell the browser to display text as bold or they might tell the browser to center text on the page. The use of display instructions (special codes embedded in the file) is exactly how most applications work - such as Microsoft Word. A major difference is that Word, like most other commercial applications, uses a proprietary, non-text file format that can only be read/edited with their application. The use of text files as the standard for HTML was specifically to make sure that everyone would be able to create/edit web pages.
HTML File BasicsAs noted above, an HTML file (web page) is a standard text file. The instructions on how to display the content of the file are embedded within the file by means of special text codes called tags. Generally, these tags come in pairs and any text found between the tags is displayed by the browser according to the type of tag that is used. For example, the tag pair <b> and </b> are used to define bold text. To display a word or phrase in bold, just include it between the two tags and the browser will do the rest, as in the following example:This HTML code:
<This is bold>
Will give this result
There are approximately 100 HTML tags. Fortunately, the tag names are usually self-explanatory. For example, <i> for italics and <u> for underline. The end tag of a tag pair is the same as the starting tag, but with inclusion of the backslash (i.e., the italics tag pair of <i> and </i>, or the underline tag pair of <u> and </u>).
HTML (Web Page) Sections All web pages start and end with the <html></html> tag pair. This simply lets the browser know that the file is an HTML page. An HTML page is divided into two main sections, the head and the body. These use the <head></head> and <body></body> tag pairs, respectively. You can see that the tag names are fairly indicative of their use. Finally, the <title></title> tag pair is used to provide the title of the page, the one that is displayed across the top of the browser. It's also the title you see when you create a shortcut to the page. It is placed within <head></head> the tag pair. Every web page contains those four tag pairs <html>, <head>, <body>, and <title>, with additional content added by the page designer. Here's an example of how a simple HTML file would look that includes these tags, along with the simple phrase "Hello world!" in the body of the page.
<html> <head> <title></title> </head> <body> Hello World! </body> </html> This example creates a web page that displays only the words "Hello world!". It's worth noting that of the approximately 100 HTML tag pairs, any one page might use 30-40 different tags over and over again. About half of the tags are useful in special circumstances and don't get that much use by web page designers.
Tools for Creating Web Pages However, there are also some very nice software tools which can help insert the tags into a text file, with little effort and no memory required on the part of the web page designer. The tools offer a wide range of features. For example, the text editor NoteTAB, which places a tag pair around text that you highlight. You see the text and tag pairs within the file. The leading professional tools, Microsoft Frontpage and Macromedia Dreamweaver, go much further than this. They operate in WYSIWYG (what you see is what you get) mode. You never see the tag pairs at all, just their results. This is just the way most major applications works, such as Microsoft Word, where the end result is displayed. The special codes that are used to define how the content is displayed are not visible. These tools also do much more, such as transferring your files to the server, performing batch changes to several files at once, verifying that all links are active, and much more. These applications are discussed in more detail elsewhere at this site. TagsAside from the four tags that were mentioned above, the ones that identify a web page and its sections to a browser, there are a handful of tags that will be used over and over.
The details of these tags are provided elsewhere in this site but you can pretty much tell by the name of the tag what display feature it supports. The list above is provided simply to gave some examples of common tags used in HTML files (web pages). There are a few exceptions to the requirement that tags come in pairs. For example, the <br> tag is a line break, telling the browser to drop to the next display line. This tag has no corresponding </br> tag. There are only about a dozen of these tags. AttributesSome of the tags allow the page designer to fine-tune the display effects of the tag. This is done by using attributes within a tag. An attribute is simply a variable to which the web page designer can assign a value. Attributes are placed within the start tag of each tag pair. For example, to display an image you would use the <img> tag. To clarify which image is to be displayed, the "src" attribute is included within the brackets as follows:<img src="ford.jpg"> Here, the URL - the image filename "ford.jpg" - is displayed. Attributes names may be entered in upper or lower case because HTML is not case sensitive. However, many servers are case-sensitive so when entering a URL you must use the correct case. Note that the img tag is another tag which does not require the used of an end tag (i.e., &lg/img> is not used). About half of the HTML tags use no attributes at all. The other half have anywhere from one to twenty possible attributes that may be used to help fine-tune the way the browser displays the content of the HTML file. The reference page of this site shows the allowed attributes for all HTML tags. Some attributes require a numerical assignment - simply a number. Other attributes only recognize a specific set of string or numberical values. For example, the <img> tag also supports the align attribute. A browser will only recognize the following values: LEFT | RIGHT | TOP | TEXTTOP | MIDDLE | ABSMIDDLE | BOTTOM | ABSBOTTOM | BASELINE. Any other value would be ignored. Finally, tags may be nested within one another to combine effects. For example, to apply bold and italics to a word, the following tag is used:
<b><i>Hello</i><b> This HTML code yields the following:
The technique of nesting one tag within another is used frequently in web page design. Core AttributesHTML defines some attributes which are common to almost all HTML tags. The core attributes include:
Tag List (Summary)The following tables break down all of the HTML tags into groups with similar functions. Click on the tag to jump to the reference section of this site, which provides a listing of all tags and their attributes.Several of the listed tags are displayed with the strikethough format, indicating that while most modern browsers still support them, the tags are no longer part of the strict HTML 4.01 specification. When this is true we say the tag is 'deprecated'. You can freely use the tags but should understand that support for these tags in the future is not guaranteed. Generally, when a tag is deprecated a browser will continue to support it for years because the browser vendors don't want to irritate web page authors by forcing them to update old web page code.
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
