| Most documents have common elements, such as, titles, paragraphs, and lists. These elements are identified in HTML through the use of tags. Everything that is not an HTML tag is part of the document content. With a few exceptions, HTML does not allow you to describe the exact appearance or layout of a document. The designers of HTML did this on purpose. Why? Because you don't know the capabilities of the computer that is going to display the document, i.e. the size of the screen, the fonts that are installed, etc. By separating the structure of a document and its appearance, a browser program that reads and interprets HTML can make formatting decisions based on the capabilities of the end user's computer. Most HTML tags are used in pairs, that is, HTML tags generally have a beginning tag and an ending tag surrounding the text that they affect, e.g. <TagName>the affected text</TagName>The tag name itself (here, TagName) is enclosed in brackets (< >). The beginning tag "turns on" a feature (such as headings, bold, etc.), and the ending tag turns it off. Closing tags have the same name as the beginning tag except that the closing tag name is preceded by a slash (/). For example, the following <STRONG> tag will make the word basic in the following sentence bold when displayed by a browser. This is a <STRONG>basic</STRONG> tag tutorial.will be displayed as: This is a basic tag tutorial.Not all HTML tags have a beginning and an end. Some tags are only one-sided, such as the <LI> tag for an element in a list. All HTML tags are case-insensitive; that is, you can specify them in upper or lower case, or in a mixture. <STRONG> is the same as <strong> or <STrong>. It is common practice, however, to specify all tags in uppercase because they are easier to spot when editing an HTML document. The following sections describe the use of commonly used HTML tags. If HTML is new to you, I suggest that you read each section in sequence. If you are interested in learning about a particular feature then you can use one of the following links. MAILTO:You can make it easy for a reader to send electronic mail to a specific person or mail alias by including the mailto attribute in a hyperlink. The format is: <A HREF="mailto:emailaddress">LinkName</A>For example, enter: <A HREF="mailto:acsweb@ilstu.edu">ACS WebMaster</A>to create a link that will open a mail window for the ACS WebMaster alias. The ADDRESS and MAILTO: tags are often combined to provide an email link. For example: <ADDRESS> Send comments to the <A HREF="mailto:acsweb@ilstu.edu">ACS WebMaster</A> </ADDRESS>will be displayed as: Send comments to the ACS WebMaster LinkingThe chief power of HTML comes from its ability to link text and/or an image to another document or to a section of a document. A browser highlights the identified text or image with color and/or an underline to indicate that it is a hypertext link (often shortened to hyperlink or link).HTML's single hypertext-related tag is <A>, which stands for anchor. To include an anchor in your document:
Here is a sample hypertext reference to a file named MaineStats.htm: <A HREF="MaineStats.htm">Maine</A> This entry makes the word Maine the hyperlink to the document MaineStats.htm, which, in this example, must be in the same directory as the document containing the hyperlink.
Relative PathnamesYou can link to documents in other directories on the same computer by specifying the relative path from the current document to the linked document. For example, a relative link to a file named NYStats.htm located in the subdirectory AtlanticStates would be:
<A HREF="AtlanticStates/NYStats.htm">New York</A>
Where AtlanticStates is a subdirectory in the directory containing the document with the link. These are called relative links because you are specifying the path to the linked file starting at the location of the current file. You can also use the absolute pathname (the complete URL) of the file, but relative links are more efficient in accessing another file on the same server. Pathnames use the standard DOS and UNIX syntax. The syntax for the parent directory (the directory that contains the current directory) is "..". (For more information consult a beginning UNIX reference text such as Learning the UNIX Operating System from O'Reilly and Associates, Inc.) For example, a link in the NYStats.htm file back to the original document in the above example would look like this: <A HREF="../US.htm">United States</A> In general, you should use relative links because:
However, absolute pathnames (see next section) may be used when linking to documents that are not closely related even though they are on the same server. For example, consider a group of documents that comprise a user manual. Links within this group should be relative links. Links to other documents (perhaps a reference to the author's home page) should use full path names. This way if you move the user manual to a different directory, none of the links would have to be updated. (Of course, if the author's home page is moved the link must be changed in any case.) Absolute PathnamesThe World Wide Web uses Uniform Resource Locators (URLs) to specify the location of files on servers. A URL includes the type of resource being accessed (e.g., Web, gopher, WAIS), the address of the server, and the location of the file. The syntax is: scheme://host.domain [:port]/path/filename.ext where scheme is one of: file a file on your local system ftp a file on an anonymous FTP server http a file on a World Wide Web server gopher a file on a Gopher server WAIS a file on a WAIS server news a Usenet newsgroup telnet a connection to a Telnet-based service The port number can generally be omitted. (That means unless someone tells you otherwise, leave it out.) For example, to include a link to this tutorial in your document, enter: <A HREF="http://www.itk.ilstu.edu/HTMLtutr/tutorhom.htm">ACS HTML Tutorial</A> This entry makes the text ACS HTML Tutorial a hyperlink to this document. For more information on URLs, refer to: Links to Specific Sections in a DocumentAnchors can also be used to move a reader to a particular section within a document (either in the same document or in a different document). This type of an anchor is commonly called a named anchor because to create the links, you must first insert HTML names within the document. The power of HTML and the WWW is closely linked (pun intended) to the ability to jump from one document to another anywhere in the world. A link to another document normally begins displaying that text at the beginning of the document. But, the use of anchors allows us to begin at any point in a document where there is a named anchor. This guide is a good example of using named anchors in a document. The guide is constructed as one document to make printing easier. But as one (long) document, it can be time-consuming to move through when all you really want to know about is one particular HTML tag. Internal hyperlinks can be used to create a "table of contents". These hyperlinks move you from one location in this document to another location in this document.
Links to Specific Sections in Another DocumentSuppose you want to set a link from document A (documentA.htm) to a specific section about Acadia National Park in another document (MaineStats.htm). Create the named anchor (in this example "ANP") in MaineStats.htm at the point in the document you want to link to. For example: <H2><A NAME="ANP">Acadia National Park</A></H2> Next, enter the HTML coding in document A for a link to the named anchor in MaineStats.htm. Put the link at the point in document A where a reader might want to jump to the link. For example: In addition to the many state parks, Maine is also home to
<A HREF="MaineStats.html#ANP">Acadia National Park</A>.
With both of these elements in place, a reader can jump directly to the Acadia reference in MaineStats.htm.
NOTE: You cannot make links to specific sections within a different document unless you have permission to place anchors in the coded source of that document or that document already contains appropriate named anchors. For example, you could include named anchors to this tutorial in a document you are writing because there are named anchors in this guide (use View Source in your browser to see the coding). But if this document did not have named anchors, you could not make a link to a specific section because you cannot edit this file on ISU's ACS server. You can practice linking to another document by linking to the anchor, "TestAnchor", at this point in this document. Enter the following link in your HTML document, display the document, and click on the link. Presto, you will at this point in this document. <A HREF="http://www.itk.ilstu.edu/htmltutr/tags.htm#TestAnchor">Test Anchor</A>
Links to Specific Sections within the Same DocumentThis technique differs from linking to another document only in that the filename is omitted in the link. For example, to link to the ANP anchor from another point within MaineStats, enter: ...More information about <A HREF="#ANP">Acadia National Park</A>
is available elsewhere in this document.
Of course, the <A NAME= " "> tag must be at the place in the document
where you want the link to jump to (i.e. <A NAME="ANP">Acadia National Park</A>).
Named anchors are particularly useful when you think readers will want to print a document in its entirety so that you do not want to spread the text over a sequence of small files. They are also useful when you have a lot of short information segments you want to place online combined together in one file. |