An Introduction to HTML 

Contents

  1. Introduction
  2. HTML Structure
  3. Difference Between HTML and XHTML
  4. Document Control
  5. Character Control
  6. Sectional Control
  7. Lists
  8. Other Formats
  9. Linking to the Web
  10. Images
  11. Cascading Style Sheets
  12. HTML Etiquette

    1. Introduction

    HTML or HyperText Markup Language is a collection of tags or elements that define various components of a web document. HTML can be used in conjunction with Cascading Style Sheets (CSS), as discussed later in this document. XML stands for Extensible Markup Language, which is an extension of HTML and XML is very powerful in comparison to HTML. XML can create other languages. In our future discussion, for both XML and HTML languages, we will use a single notation XHTML.

    What Is the World Wide Web?

    Simply stated, the World Wide Web (WWW) is a large collection of files stored on computers throughout the world. Documents are written in hypertext, which is basically the same as regular text, but is formatted by using embedded codes (tags) that control layout, links to other documents, graphics, sounds, and animation. Hypertext is not a What-You-See-Is-What-You-Get language. It is very similar to many word processors that have embedded codes, which are not displayed in the output document. For example, when you boldface a word in a word-processing program, the word is emphasized, but the word processor does not show the code used to bold the word.

    Client-Server Model

    The Web is based on a client-server model. A user runs a client program, known as a browser, on either the user's own computer or on a large server like UBUnix in the University of Buffalo or Lucy or Eve in Computer Science Department at Fredonia. Browsers send network messages to servers asking for specific documents or services to be provided by the server. Using a language called HyperText Transfer Protocol (HTTP/http), the server processes the request, and sends the item back to the client (UBUnix, your PC, etc.) for display. The server returns the document or service, if it is available, also using the http protocol. Other protocols available are FTP/ftp, telnet, and WAIS.

    Browsers

    A web browser is an access program that requests XHTML documents from a web server and renders these documents on a user's monitor. A browser can view XHTML files that are stored locally, or when connected to the Internet, view documents on computers around the world. The most common browsers are Netscape, Internet Explorer, Mozilla Firefox, and Safari.

    What Is a URL?

    Note: Enter a URL exactly as it is written, since most are case-sensitive. Cutting and pasting a URL is better than retyping it as it reduces the risk of errors.

    A browser makes the entire World Wide Web available for access. However, in order to access any information on the Internet, you need to know the specific address, or URL, of that information. A URL (Uniform Resource Locator) is simply the address on the Web where you will find a specific HTML document. A URL takes the following form:
    protocol://domain_name/directory_path/filename.

    protocol is one of a select group of protocol names, domain_name is the name of the web server where the information resides, and directory_path is the path to the filename on that server. For example, the following URL uses the http protocol to connect to the machine www.cs.fredonia.edu, changing through the directory path singh/CSIT107 to arrive at the file CSIT107_SyllFall_06.htm:
    http://www.cs.fredonia.edu/singh/CSIT107/CSIT107_SyllSFall_06.htm

    The following is a list of URL components and their definitions:

    Component Definition
    Protocol A set of rules and procedures used to access data residing on the other end of a hyperlink (http://, ftp://, news://, telnet://).
    Domain Name This is the name of the web server where the desired document resides (eng.buffalo.edu, www.cs.fredonia.edu, etc.).
    Directory Path The location of the page in the web server's file system (/username, /username/pages, etc.)
    Page Name The name of the HTML file for the requested web page. The initial file in your www or public_html directory must be index.html. On a PC running Windows, HTML files have the extension .htm or html. On UNIX the extension is .html.
    Location in Page (anchor) Sometimes the filename is not enough. You might want to direct the browser to a particular location within a file (#here, #there, etc.).

    Important Note: The index.html file is specifically named to allow your homepage to be viewable via the Internet. Thus, your main page file must be named index.html for the http://www.eng.buffalo.edu/your-UBITName or http://www.cs.fredonia.edu/your-FredoniaITName URL to work correctly. You may create additional files within your www or public_html directory and create web links to them.

    All of the files within your www or public_html directory must have their permissions set properly to be readable by the world.

    2. HTML Structure

    As a markup language, HTML describes the structure, content, and layout of a web document. For example, HTML is used to markup headings, regular paragraphs, lists, etc. All browsers are able to interpret this language. Like all things related to the Web, HTML is continually changing.

    You should be aware that if you are creating your page using one of the newer versions of HTML, your page might not display properly when using an older browser. Also, different browsers will display tags differently, especially in newer versions of HTML. Versions of HTML include: 4.01, 4.0, 3.2, 3.0, and 2.0. Netscape and Internet Explorer tags are built into their respective browsers, and should be considered extensions of HTML. Be aware that these are browser-specific, so they may not display properly on all browsers.

    An HTML file is simply a plain text file that includes two types of components:

    • Content - the information for display.

    • Markup - the information to control the display or point to other items.

    HTML files can be produced in more than one way:

    • In UNIX, using a text editor (such as vi, pico, emacs, etc.).

    • On a PC using WordPad or Notepad.

    • On a Mac using Simple Text.

    • In a word-processor (saved as a text file or converted to HTML using a built-in converter).

    • With an HTML editor (FrontPage, Netscape Suite, Dreamweaver, etc.).

    Basic Syntax

    Syntax is the framework of "correct grammar" for HTML. Generally, all HTML tags or elements (formatting commands) are enclosed in angle brackets < >. Most elements or tags need a corresponding closing tag with a slash proceeding the element or tag, as in </html>. White space (blank characters, tabs, and empty lines) are ignored by the browser. A tab will not indent a line, and a blank line will not separate one paragraph from another (unless you have used the preformatted HTML tags <pre> and </pre>). HTML is not case-sensitive, but it is good idea to type XHTML tags in lower case. However, be careful when embedding links to files on UNIX, as UNIX is case-sensitive. A rule of thumb is to type all links to files in lowercase.

    It is possible to see the source codes for web pages. Check the browser help files for more details. HTML can also call Java applets, run scripts, or contain JavaScript.

    Tags or Elements (Formatting Commands)

    All formatting within the document is done by using appropriate tags. There are tags for two basic elements of the document: (i) the header and (ii) the body.

    The most important item in the header information is the title. Always have a title, and make it descriptive, but short; it is the document's label. The title will appear at the top of the browser window. The body contains all of the file's substantive content, along with numerous formatting commands.

    Basic Standard Tags or Elements:

    Tags Description
    <html> Identifies the contents of the document as XHTML to web browsers.
    <head> Begins the section containing the header information.
    <title>...</title> A brief, descriptive title should be contained within these tags or elements.
    </head> Ends the header section. The header can contain other information in addition to the title.
    <body> Begins the body of content. The part of the document normally displayed as the page in most browsers.
    <h1> ... </h1> Defines the header font size on the web page.
    ...content Whatever text or images you wish to include.
    <p>.....</p> Paragraph separator.
    </body> Ends the content portion of the body.
    </html> The last tag of the file. It properly closes the file.

    A Minimal HTML Document

    Here is an example of a minimal XHTML document:
    <html>
    <head>
    <title>An easy XHTML example</title>
    </head>
    <body>
    <h1>This is a level-one heading</h1>
    <p>Welcome to the world of HTML. </p>
    <p>This is one paragraph.</p>
    <p>This is the second     paragraph.</p>
    <p>This is third paragraph.</p>
    </body>
    </html>

    XHTML uses markup tags to tell the browser how to display the text. Remember that some browsers do not support certain tags. If a browser does not support a tag, it may simply ignore it, or it may prevent portions of the page from being displayed properly. Therefore, it is best to limit the use of extensions.

    3. Difference between HTML and XHTML

    (a) There is no difference between versions HTML 4.0 and XHTML 1.0 languages. Both use exactly the same tags, attributes and values.

    (b) The difference between HTML and XHTM is the syntax. The HTML does not care about use of html, head, body and DOCTYPE, but XHTML needs all these tags.

    (c) In HTML language, the closing tags can be ignored, but not in XHTML. An empty tag <br> in HTML is written as < /br> in XHMTL. 

    (d) One can omit quotes around attribute values in HTML, but not in XHTML.

    (e) One may use upper or lower case alphabets for tags, attributes and values in HTML, but XHTML always use lower case letters  for tags, attributes and their values.

    (f) In HTML, one can ignore values that have the same name as the attribute, but it is not the case in XHTML.

    4. Document Control

    The <body> tag is where the display properties of the document are set. The colors of the background and text are defined within this tag, and all of the XHTML code of a package is placed between the opening and closing <body> tags.

    The <!DOCTYPE .......> is a comment or  a declaration that goes at top of the web code. Following DOCTYPE's are generally used in various kinds of web documents.

        (a) Doctypes for XHTML docs

        1. For XHTML strict or standard:

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

        2. For XHTML transitional or loose:

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

        3. For XHTML frameset:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

        (b) Doctypes for HTML docs

        1. For HTML strict or standard:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
        2. For HTML transitional or loose:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

        3. For HTML frameset:

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

    Meta Tag

    Meta tag <meta........> is always inserted in the <head>.....</head> tags, which tells the browser what type of character set to load before displaying the page and it must appear in every web page!

    Backgrounds

    It is possible to use solid color backgrounds or images as the background for your page. The background of your document is set in the <body> tags. See the section Basic Syntax for more detailed information about the <body> tag.

    If you choose to use an image as the background for your HTML file, it should look like this:
    <body background="http://file.ext">

    file is the name of the file and .ext is the file's extension.

    If you wish to use a solid color for the background of your page, see below the section Colors to determine how to identify colors by hex code. Once you know what color you would like, you can add it by typing:
    <body bgcolor="#HEX VALUE">

    HEX VALUE is the appropriate hex value for that color.

    In order to create a white background for a document, you would use the following:
    <body bgcolor="#FFFFFF"> or     <body bgcolor="#ffffff">

    FFFFFF or ffffff is the hex value for white.

    There are other items whose colors can be set within the <body> tag. These include link (the color of the link before it is clicked), alink (the color of an active link - one that is being clicked), and vlink (the color of a link you have visited). They can be applied the same ways as the bgcolor tag:
    <body bgcolor="#FFFFFF" link="#FF0000" alink="0000FF" vlink="#450555">

    This code would produce a white background, red links, blue active links, and purple visited links. Be careful to choose easily readable combinations when selecting colors for links and backgrounds.

    Colors

    Colors in XHTML are based on hex values. Hexadecimal numbers contain the numbers 0 through 9 and the letters A through F. While 0 is the absence of color (black), F is the presence of all color (white). Hexadecimal values are formed of six characters: two for red, two for green, and two for blue.

    Color Red Green Blue Hex Code
    Black 00 00 00 #000000
    Red FF 00 00 #FF0000
    Green 00 FF 00 #00FF00
    Blue 00 00 FF #0000FF
    White FF FF FF #FFFFFF

    By combining shades of red, green, and blue, it is possible to create a variety of colors. Refer to the hex color chart at the following:
    Sixteen Colors

    5. Character Control

    Logical styles tag text according to its meaning, while physical styles specify the appearance of a section. By using logical and physical styles, it is possible to achieve the same effect by using two different tags. This will become clearer as you progress.

    Physical Styles

    Purpose Tag Result
    Bold <b>...</b> Bold
    Italicized text <i>...</i> Italicized text means Italics
    Underlined text <u>...</u> Underlined text means Underline
    Typewriter font <tt>...</tt> Typewriter - fixed width

    Logical Styles

    Purpose Tag Result
    Emphasis <em>....</em> Italics
    Stronger emphasis <strong>....</strong> Bold
    Display HTML directive <code>....</code> Fixed - width font
    Defining instance <dfn>....</dfn> Italics 
    Preformatted text <pre>....</pre> Fixed - width font like code, the way text was typed
    Include sample output <samp>....</samp> Like preformatted
    Display keyboard key <kbd>....</kbd> Typewriter font
    Define a variable <var>....</var> Italics
    Display a citation <cite>....</cite> Italics
    Bigger text <big>....</big> Bold
    Smaller text <small>....</small> no Bold face but smaller text
    To mark inserted text <ins>....</ins> underlines newly inserted text
    To delete inserted text <del>....</del> Total Price

    Using Character Tags

    To apply a character format, use the following steps:

    1. Start with <tag>, where tag is the desired character formatting tag, to indicate the beginning of the tagged text.
    2. Enter the tagged text.
    3. End the passage with </tag>, which ends the desired character formatting.

    For example, the tag <b>, which indicates bold text, would look like:
    <b>Hello!</b>

    It would produce a result that looks like:
    Hello!

    Escape Sequences

    In XHTML documents, there is no way to directly call on special characters (e.g., accented characters, Greek letters). In order to generate these characters, a specific sequence called an escape sequence is used.

    Note: Unlike other HTML tags, escape sequences are case-sensitive.

    Four characters of the ASCII (American Standard Code for International Exchange) character set have special meanings within XHTML and therefore cannot be used as text. These characters are the left angle bracket (<), the right angle bracket (>), the ampersand (&), and the double quote ("). The anglular brackets are used to indicate the beginning and end of XHTML tags, and the ampersand is used to indicate the beginning of an escape sequence. To use one of these characters in an XHTML document, you must enter its escape sequence instead.

    Escape Sequence Result
    &lt; The escape sequence for <
    &gt; The escape sequence for >
    &amp; The escape sequence for &
    &quot; The escape sequence for "

    As mentioned before, escape sequences support accented characters. For example:

    Escape Sequence Result
    &ouml; The escape sequence for a lowercase o with an umlaut: ö
    &ntilde; The escape sequence for a lowercase n with a tilde: ñ
    &Egrave; The escape sequence for an uppercase E with a grave accent: È

    6. Sectional Control

    In XHTML, it is possible to control the look and feel of your web page's layout. Proper use of sectional headers to denote section or subject changes can contribute to your page's clarity, form, and readability.

    Headings

    XHTML has six heading styles, numbered 1 through 6, with 1 being the largest and most prominent (font size of 24 pixels or 24pt), and 6 being the smallest and least prominent (font size of 8 pixels or 8pt). Headings are displayed in larger and/or bolder fonts than normal body text. The first heading in each document should be tagged <h1>. The syntax of the heading tag is:

                        <hx>Text of heading</hx>

    where, x is a number between 1 and 6 specifying the level of the heading. As the number of the heading increases, its size and prominence decreases.

    For example:
    <h1>Heading</h1>
    <h3>Subheading</h3>

    This would display:

    Heading

        Subheading

    It is a generally accepted style rule to never jump more than one heading size in the body of your document. Note that the example given above does break this rule.

    Paragraphs

    Unlike documents in most word processors, hard returns in XHTML files are insignificant. Word wrapping can occur at any point in your source file/source code, and multiple spaces are collapsed into a single space. There are a few exceptions to this rule. Spaces following a <p> or <hx> tag, for example, are ignored.

    Notice that in the minimum HTML example, the first paragraph is displayed as:

    This is a level-one heading

    Welcome to the world of HTML.

    This is one paragraph.

    This is the second.

    This is third paragraph.

    In the source file, if there is a line break between the sentences, a browser ignores this line break and starts a new paragraph only when it reaches a <p> or <br> tag. The <br> tag, which is an empty tag,  performs the same operation as <p>, except that the browser does not insert a blank line after the paragraph.

    You must separate paragraphs with <p>.....</p> tags. The browser ignores any indentations or blank lines in the source text. HTML relies almost entirely on the tags for formatting instructions, and without the <p> tags the document becomes one large paragraph. The exception to this is text tagged as preformatted (<pre>). This will be explained later. For instance the following would produce identical output as the minimum HTML example:
     

    <html><head><title>The simplest HTML
    example</title></head><body>
    <h1>This is a level one heading</h1>
    <p>Welcome to the world of HTML.</p>
    <p>This is one paragraph. </p>
    <p>This is the second.</p>
    <p>This is third paragraph</p></body>
    </html>

    However, to preserve readability in HTML files, headings should be on separate lines, and paragraphs separated by blank lines (in addition to the <p> tags).

    Forced Line Breaks

    The <br> tag forces a line break with no extra space between lines, Similarly, the tag < /br> is used to create a like break between two successive lines in case of XHTML language. By contrast, most browsers format the <p> tag with an additional blank line to more clearly indicate the beginning of the new paragraph.

    One use of <br> is in formatting a postal address:
        2154 Fenton Hall <br>
        State University of New York at Fredonia<br>
        Fredonia, NY 14073

    Which looks like:
             2154 Fenton Hall
             State University of New York at Fredonia
             Fredonia, NY 14073

    7. Lists

    Lists are simple, yet effective ways to display information on a web page in an outline format. There are three types of lists in HTML: unordered, numbered, and definition. You can combine all of these types into larger, multi-layered lists called nested lists.

    Unordered Lists

    To make an unnumbered list, follow these steps:

    1. Start with an opening list <ul> tag.
    2. Enter the <li> tag followed by the individual item. (Closing </li> tag is also needed.)
    3. End with a closing list </ul> tag.

    Below is an example of a two-item list:
    <ul>
    <li>Apples</li>
    <li>Oranges</li>
    <li>Bananas</li>
    </ul>

    The output will be similar to the following:

    • Apples
    • Oranges
    • Bananas

    The <li> items can contain multiple paragraphs. Just separate the paragraphs with the <p> paragraph tags.

    Numbered Lists

    A numbered or ordered list is identical to an unordered list, except it uses <ol> instead of <ul>. The items are tagged using the same <li> tag. The following HTML demonstrates the use of numbered lists:
    <ol>
    <li>Oranges</li>
    <li>Peaches</li>
    <li>Grapes</li>
    </ol>

    This produces the following formatted output:

    1. Oranges
    2. Peaches
    3. Grapes

    Definition Lists

    A definition list tag (<dl>) usually consists of alternating definition term tag (written as <dt>) and a definition tag (represented as <dd>). Web browsers generally format the definition on a new line.

    The following is an example of a definition list:

    <dl>
    <dt><b>Assets</b></dt>
    <dd>Probable future economic benefits obtained
    or controlled by a particular entity as a result
    of past transactions or events.</dd>

    <dt><b>Liabilities</b></dt>
    <dd>Probable future sacrifices of economic
    benefits arising from present obligations
    to a particular entity to transfer assets,
    or provide services to other entities in
    the future as a result of past transactions
    or events.</dd>
    </dl>

    The output looks like:

    Assets
    Probable future economic benefits obtained or controlled by a particular entity as a result of past transactions or events.
    Liabilities
    Probable future sacrifices of economic benefits arising from present obligations to a particular entity to transfer assets, or provide services to other entities in the future as a result of past transactions or events.

    The <dt> and <dd> entries can contain multiple paragraphs (separated by <p> paragraph tags), lists, or other definition information.

    Nested Lists

    Lists can be arbitrarily nested, although in practice you should limit the nesting to three levels. You can also have a number of paragraphs, each containing a nested list, in a single item list. An example of a two level nested list:

    <ul>
    <li>Examples of assets:
    <ul>
    <li>Cash</li>
    <li>Land</li>
    </ul>
    <li>Examples of liabilities:
    <ul>
    <li>Accounts payable</li>
    <li>Notes payable</li>
    </ul>
    </ul>

    The nested list is displayed as:

    • Examples of assets:
      • Cash
      • Land
    • Examples of liabilities:
      • Accounts payable
      • Notes payable

    8. Other Formats

    In HTML, there are specific tags that can be used to expedite setting up your web page. You can use tags specifically designed for preformatted text, blockquotes, and addresses.

    Preformatted Text

    Use the <pre> tag (meaning preformatted) to generate text in a fixed-width and cause spaces, new lines, and tabs to be significant. Multiple spaces will be displayed as multiple spaces, and line breaks will be in the same locations as in the source HTML file. This is useful for program/code listings. The following lines of program code can be displayed in an HTML document:

    <pre>This text is preformatted.

    These   spaces   will show up &amp;
         so will this tab.
    </pre>

    The following will be displayed in a fixed-width font (such as Courier): 

    This text is preformatted. 
    
These   spaces    will show up &
        so will this tab.

    Note: <, >, and & have special meaning in HTML. You have to use their escape sequences (&lt;, &gt;, and &amp;, respectively) to enter these characters (see Escape Sequences).

    Hyperlinks can be used within <pre> sections. You should avoid using other HTML tags within <pre> sections, however. Note that all text in between <pre> tags will be displayed in Courier font. There is no way to change this.

    Extended Quotations

    Use the <blockquote> tag to include quotations in a separate block on the screen. Most browsers generally indent the text to separate it from surrounding text.

    An example:

    <blockquote>
    I have a dream. It is a dream deeply rooted in the American dream. I have a dream that one day this nation will rise up and live out the true meaning of its creed. <p>
    We hold these truths to be self-evident: that all men are created equal.</p>
    </blockquote>

    The result is:

    I have a dream. It is a dream deeply rooted in the American dream. I have a dream that one day this nation will rise up and live out the true meaning of its creed.

    We hold these truths to be self-evident: that all men are created equal.

    Addresses

    The <address> tag is generally used to specify the author of a document, and is a means of contacting the author (i.e., through a telephone call or by sending an email). It can also be used when including a revision date for a document. The <address> tag is usually the last item in a file. For example:

    <address>
    For additional help, contact <br>
    Dr. Singh, 214 Fenton Hall, (716) 673-4692, or send email to
    <a href="mailto:singh@fredonia.edu">
    singh@freonia.edu</a>.
    </address>

    The result is that entire text is displayed in italics:

    For additional help, contact
    Dr. Singh, 214 Fenton Hall, (716) 673-4692, or send email to singh@fredonia.edu.

    Note:
    <address> is not usually used for postal addresses. Instead, you may use <br> at the end of each line.

    9. Linking to the Web

    The chief power of XHTML comes from its ability to link text and images between documents on a site, or with other sites on the Web. The browser highlights these links (usually with color and underlines) to indicate that they are hypertext links (often referred to as hyperlinks or simply links).

    Linking to Other Documents

    The XHTML hypertext-related tag is <a>, which stands for anchor. To include an anchor in your document:

    1. Start the anchor with <a (there is a space after the a).
    2. Specify the document that is being pointed to by entering the parameter href="filename.ext or URL" followed by a closing right angle bracket, >.
    3. Enter the text that will serve as the hypertext link/label in the current document.
    4. Enter the ending anchor tag, </a>.

    Here are two examples of  hypertext reference (href):
    1. <a href="Cost.html">Cost Analysis</a>
    2. <a href="http://www.yahoo.com">Yahoo.com</a>

    Relative Links Versus Absolute Pathnames

    The entry above hyperlinks the phrase Cost Analysis to the document Cost.html, which is in the same directory as the main document. You can link to documents in other directories by specifying the relative path from the current document to the linked document. For example, a link to a file finance.html located in the subdirectory Business would be:
    <a href="Business/finance.html">Financial Accounting</a>

    These are called relative links. You can also use the absolute pathname of the file if you wish. For example:
    <a href="http://www.fredonia.edu/jdoe/Business/finance.html">Financial Accounting</a>

    This syntax, called absolute linking, is also used to link to pages other than your own. For example, to link to Yahoo!, a popular search engine, the code would be:
    <a href="http://www.yahoo.com">Yahoo!</a>

    Pathnames use the standard UNIX syntax, where directory entries start with / (as opposed to \ used on PC-compatible machines). Filenames are also case-sensitive.

    In general, you should use relative links because you will have less to type, which reduces the chance of typing an incorrect filename or directory. It is also easier to move a group of documents to another location, because the relative pathnames will still be valid. However, it is advisable to use absolute pathnames when linking to documents that are not directly related. For example, consider a group of documents that comprise a user manual. Links within this group should be relative links. Links to outside documents should use full pathnames. This way, if you move the user manual to a different directory, none of the links will have to be updated.

    Links to Specific Sections

    In Other Documents:

    Anchors can also be used to move to a particular section in the same document or the other document. Suppose you wish to set a link from document A to a specific section in document B. First you need to setup an anchor in document B. To set up an anchor named Asset in document B, enter the code:
    <a name="Asset">Here is some text on asset management in document B.</a>

    Now when you create the link in document A, include not only the filename, but also the named anchor, separated by a hash mark (#):
    <a href="documentB.html#Asset">link</a>

    Clicking on the word link in document A will send the reader directly to the words: Here is some text on Asset Management in document B, which is set up as the anchor in that document.

    In the Current Document:

    Linking to a specific section in the current document is exactly the same as linking to a specific section in another document. Simply omit the filename.

    Using the above example, to link to the Asset anchor from within documentB.html, type:
    <a href="#Asset">Asset Management link</a>

    10. Images

    Note: Each image takes time to process and slows down the initial display of the document. Generally, you should not include overly large images.

    Appropriate use of imagery can add aesthetic interest to your web page. Most browsers can display inline images (images next to text) that are in JPEG or GIF format.

    To include an inline image use:
    <img src="image_url.ext">

    image_URL is the name of the JPEG  or GIF image and ext is the file's extension (either .jpg or .gif). Here, JPEG stands for the Joint Photographic Experts Group and GIF for the Graphics Interchange Format. The syntax for image URLs is identical to that used in an anchor href. For example, if the image file is a GIF file, then the filename extension of image_URL must end with .gif. By default the bottom of an image is aligned with the text. Add the align="top" option if you want the browser to align adjacent text with the top of the image. The full inline image tag with top alignment is:
    <img align="top" src="image_URL">

    align="middle" aligns the text with the center of the image.

    The alt attribute is used to give a short description. These are used because in some cases people cannot see the image, and a description is needed. You can add a short description as follows:
    <img src="image_url.ext" alt="description">

    11. Cascading Style Sheets

    Note: Only the most recent web browsers will properly display CSS.

    Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to web documents. There are three ways to implement CSS into your web page. CSS can either be embedded directly into the <head> of your HTML file, written inline, or it can be contained in a separate document with a .css extension.

    An embedded style sheet goes between the <head> tags of your HTML document. When you use this method, you must define the style sheet with the <style> element as follows:
    <style type="text/css">
    <!--

    /*CSS rules go here*/

    -->
    </style>

    type="text/css" tells the browser you are using a CSS style sheet. The HTML comment tags <!-- --> comment-out the CSS rules if an old browser does not understand the <style> element. This prevents the old browser from displaying all of your CSS code onto the canvas. /*...*/ are CSS comments.

    A CSS rule is composed of a selector and a declaration which contains a property and a value. A selector is any valid HTML element (e.g., <p>, <h3>, etc.). The property and the value are surrounded by curly braces {}. They are separated by a colon (:) and always end in a semi-colon (;). For example:
    <style type="text/css">
    <!--
    p {
    text-align: center;
    color: red;
    background-color: white;
    }
    -->
    </STYLE>

    This example would display the text aligned in the center, colored red, with a white background.

    Inline styles are written directly into the tag which you wish to affect:
    <p style="color:#FF0000;text-align: center;">
    Red, center aligned text.

    This example would create red, center aligned text, only on the text between the <p> tags.

    The most widely used form of CSS is linking to an external CSS document using the <link> element. An external style sheet is a separate file to which any web page can link. The styles in that external file are then applied to which ever document calls it. The benefit of this arrangement is that you can have one style sheet for an entire web site. If you make one change to a selector (e.g., <h1>) in your external style sheet, that change is automatically applied to every selector of that type throughout the web site.

    There are three steps to creating an external style sheet:

    1. Open a text editor (e.g., Notepad) and type in the stylistic rules. This is done exactly the same way as for an embedded style sheet, except that you omit the <style> tags and the HTML comment tags <!-- -->.

      /* Heading Styles */
      h1 {
      color: #000099;
      background-color: #ff0000;
      font-family: arial;
      font-size: 2em;
      }

    2. Save your style sheet with a .css file extension.

    3. In the <head> of the HTML document to which you wish to link the style sheet, enter the path to the style sheet using the <link> element. The <link> element does not have a closing tag.

      <link rel="stylesheet" href="style.css" type="text/css">

    Now open the HTML document. You should see the styles applied to the <h1> element.

    12. HTML Etiquette

    Embedding Tags

    It is acceptable to embed anchors within another HTML element:
    <h1><a href="Destination.html">Just a heading</a></h1>

    Character tags modify the appearance of other tags:
    <ul><li><b>A bold list item</b>
    <ul>
    <li><i>An italic list item</i>
    </ul>
    </ul>

    However, avoid embedding other types of HTML element tags. For example, it is tempting to embed a heading within a list, in order to make the font size larger:
    <ul><li><h1>A large heading</h1>
    <ul>
    <li><h2>Something slightly smaller</h2>
    </ul>
    </ul>

    Although some browsers, such as Netscape and Internet Explorer, format this correctly, it is unpredictable in other browsers. For compatibility with all browsers, avoid these kinds of constructs.