A Beginner's Guide to HTML Part I: (a brief reference)
You can't get too far in ASP without an intimate knowledge of HTML, so this tutorial will take a newbie through the ABC's of HTML...one step at a time. It's also a great reference for pros who forget how to use little known tags! By pubs@ncsa.uiuc.edu
AI
ملخص الذكاء الاصطناعي: This codebase represents a historical implementation of the logic described in the metadata. Our preservation engine analyzes the structure to provide context for modern developers.
كود المصدر
<p><font face="Verdana" size="4">A Beginner's Guide to HTML</font></p> <p><font face="Verdana">This is a primer for producing documents in HTML, the hypertext markup<br> language used on the World Wide Web. This guide is intended to be an<br> introduction to using HTML and creating files for the Web. Links are<br> provided to additional information. You should also check your local<br> bookstore; there are many volumes about the Web and HTML that could be<br> useful.</font></p> <p><font face="Verdana"> * Getting Started<br> o Terms to Know<br> o What Isn't Covered<br> o HTML Version<br> * HTML Documents<br> o What an HTML Document Is<br> o Tags Explained<br> o The Minimal HTML Document<br> o A Teaching Tool<br> * Markup Tags<br> o HTML<br> o HEAD<br> o TITLE<br> o BODY<br> o Headings<br> o Paragraphs<br> o Lists<br> o Preformatted Text<br> o Extended Quotations<br> o Addresses<br> o Forced Line Breaks/Postal Addresses<br> o Horizontal Rules<br> * Character Formatting<br> o Logical Versus Physical Styles<br> o Escape Sequences<br> * Linking<br> o Relative Pathnames Versus Absolute Pathnames<br> o URLs<br> o Links to Specific Sections<br> o Mailto<br> * Inline Images<br> o Image Size Attributes<br> o Aligning Images<br> o Alternate Text for Images<br> o Background Graphics<br> o Background Color<br> o External Images, Sounds, and Animations<br> * Tables<br> o Table Tags<br> o General Table Format<br> o Tables for Nontabular Information<br> * Fill-out Forms<br> * Troubleshooting<br> o Avoid Overlapping Tags<br> o Embed Only Anchors and Character Tags<br> o Do the Final Steps<br> o Commenting Your Files<br> * For More Information<br> o Style Guides<br> o Other Introductory Documents<br> o Additional Online References<br> <br> </font><font face="Verdana">----------------------------------------------------------------------------</font></p> <p><font face="Verdana"> <b> Getting Started</b></font></p> <p><font face="Verdana">Terms to Know</font></p> <p><font face="Verdana"><b>WWW</b> World Wide Web<br> <b>Web</b> World Wide Web<br> <b>SGML</b><br> Standard Generalized Markup Language--a standard for describing markup<br> languages<br> <b>DTD</b> Document Type Definition--this is the formal specification of a markup<br> language, written using SGML<br> <b>HTML</b><br> HyperText Markup Language--HTML is an SGML DTD<br> In practical terms, HTML is a collection of platform-independent styles<br> (indicated by markup tags) that define the various components of a<br> World Wide Web document. HTML was invented by Tim Berners-Lee while at<br> CERN, the European Laboratory for Particle Physics in Geneva.</font></p> <p><font face="Verdana">What Isn't Covered</font></p> <p><font face="Verdana">This primer assumes that you:</font></p> <p><font face="Verdana"> * know how to use NCSA Mosaic or some other Web browser<br> * have a general understanding of how Web servers and client browsers<br> work<br> * have access to a Web server (or that you want to produce HTML documents<br> for personal use in local-viewing mode)</font></p> <p><font face="Verdana">HTML Version</font></p> <p><font face="Verdana">This guide reflects the most current specification--HTML Version 2.0-- plus<br> some additional features that have been widely and consistently implemented<br> in browsers. Future versions and new features for HTML are under<br> development.</font></p> <p><font face="Verdana"> <b>HTML Documents</b></font></p> <p><font face="Verdana"><b>What an HTML Document Is</b></font></p> <p><font face="Verdana">HTML documents are plain-text (also known as ASCII) files that can be<br> created using any text editor (e.g., Emacs or vi on UNIX machines; BBEdit on<br> a Macintosh; Notepad on a Windows machine). You can also use word-processing<br> software if you remember to save your document as "text only with line<br> breaks."</font></p> <p><font face="Verdana"><b>Tags Explained</b></font></p> <p><font face="Verdana">An element is a fundamental component of the structure of a text document.<br> Some examples of elements are heads, tables, paragraphs, and lists. Think of<br> it this way: you use HTML tags to mark the elements of a file for your<br> browser. Elements can contain plain text, other elements, or both.</font></p> <p><font face="Verdana">To denote the various elements in an HTML document, you use tags. HTML tags<br> consist of a left angle bracket (<), a tag name, and a right angle bracket<br> (>). Tags are usually paired (e.g., <H1> and </H1>) to start and end the tag<br> instruction. The end tag looks just like the start tag except a slash (/)<br> precedes the text within the brackets. HTML tags are listed below.</font></p> <p><font face="Verdana">Some elements may include an attribute, which is additional information that<br> is included inside the start tag. For example, you can specify the alignment<br> of images (top, middle, or bottom) by including the appropriate attribute<br> with the image source HTML code. Tags that have optional attributes are<br> noted below.</font></p> <p><font face="Verdana">NOTE: HTML is not case sensitive. <title> is equivalent to <TITLE> or<br> <TiTlE>. There are a few exceptions noted in Escape Sequences below.</font></p> <p><font face="Verdana">Not all tags are supported by all World Wide Web browsers. If a browser does<br> not support a tag, it (usually) just ignores it.</font></p> <p><font face="Verdana"><b>The Minimal HTML Document</b></font></p> <p><font face="Verdana">Every HTML document should contain certain standard HTML tags. Each document<br> consists of head and body text. The head contains the title, and the body<br> contains the actual text that is made up of paragraphs, lists, and other<br> elements. Browsers expect specific information because they are programmed<br> according to HTML and SGML specifications.</font></p> <p><font face="Verdana">Required elements are shown in this sample bare-bones document:</font></p> <p><font face="Verdana"> <html><br> <head><br> <TITLE>A Simple HTML Example</TITLE><br> </head><br> <body><br> <H1>HTML is Easy To Learn</H1><br> <P>Welcome to the world of HTML.<br> This is the first paragraph. While short it is<br> still a paragraph!</P><br> <P>And this is the second paragraph.</P><br> </body><br> </html></font></p> <p><font face="Verdana">The required elements are the <html>, <head>, <title>, and <body> tags (and<br> their corresponding end tags). Because you should include these tags in each<br> file, you might want to create a template file with them. (Some browsers<br> will format your HTML file correctly even if these tags are not included.<br> But some browsers won't! So make sure to include them.)</font></p> <p><font face="Verdana">Click to see the formatted version of the example. A longer example is also<br> available but you should read through the rest of the guide before you take<br> a look. This longer-example file contains tags explained in the next<br> section.</font></p> <p><font face="Verdana"><b>A Teaching Tool</b></font></p> <p><font face="Verdana">To see a copy of the file that your browser reads to generate the<br> information in your current window, select View Source (or the equivalent)<br> from the browser menu. The file contents, with all the HTML tags, are<br> displayed in a new window.</font></p> <p><font face="Verdana">This is an excellent way to see how HTML is used and to learn tips and<br> constructs. Of course, the HTML might not be technically correct. Once you<br> become familiar with HTML and check the many online and hard-copy references<br> on the subject, you will learn to distinguish between "good" and "bad" HTML.</font></p> <p><font face="Verdana">Remember that you can save a source file with the HTML codes and use it as a<br> template for one of your Web pages or modify the format to suit your<br> purposes.</font></p> <p><font face="Verdana"> <b> Markup Tags</b></font></p> <p><font face="Verdana"><b>HTML</b></font></p> <p><font face="Verdana">This element tells your browser that the file contains HTML-coded<br> information. The file extension .html also indicates this an HTML document<br> and must be used. (If you are restricted to 8.3 filenames (e.g.,<br> LeeHome.htm, use only .htm for your extension.)</font></p> <p><font face="Verdana"><b>HEAD</b></font></p> <p><font face="Verdana">The head element identifies the first part of your HTML-coded document that<br> contains the title. The title is shown as part of your browser's window (see<br> below).</font></p> <p><font face="Verdana"><b>TITLE</b></font></p> <p><font face="Verdana">The title element contains your document title and identifies its content in<br> a global context. The title is displayed somewhere on the browser window<br> (usually at the top), but not within the text area. The title is also what<br> is displayed on someone's hotlist or bookmark list, so choose something<br> descriptive, unique, and relatively short. A title is also used during a<br> WAIS search of a server.</font></p> <p><font face="Verdana">For example, you might include a shortened title of a book along with the<br> chapter contents: NCSA Mosaic Guide (Windows): Installation. This tells the<br> software name, the platform, and the chapter contents, which is more useful<br> than simply calling the document Installation. Generally you should keep<br> your titles to 64 characters or fewer.</font></p> <p><font face="Verdana"><b>BODY</b></font></p> <p><font face="Verdana">The second--and largest--part of your HTML document is the body, which<br> contains the content of your document (displayed within the text area of<br> your browser window). The tags explained below are used within the body of<br> your HTML document.</font></p> <p><font face="Verdana"><b>Headings</b></font></p> <p><font face="Verdana">HTML has six levels of headings, numbered 1 through 6, with 1 being the most<br> prominent. Headings are displayed in larger and/or bolder fonts than normal<br> body text. The first heading in each document should be tagged <H1>.</font></p> <p><font face="Verdana">The syntax of the heading element is:<br> <Hy>Text of heading </Hy><br> where y is a number between 1 and 6 specifying the level of the heading.</font></p> <p><font face="Verdana">Do not skip levels of headings in your document. For example, don't start<br> with a level-one heading (<H1>) and then next use a level-three (<H3>)<br> heading.</font></p> <p><font face="Verdana"><b>Paragraphs</b></font></p> <p><font face="Verdana">Unlike documents in most word processors, carriage returns in HTML files<br> aren't significant. So you don't have to worry about how long your lines of<br> text are (better to have them fewer than 72 characters long though). Word<br> wrapping can occur at any point in your source file, and multiple spaces are<br> collapsed into a single space by your browser.</font></p> <p><font face="Verdana">In the bare-bones example shown in the Minimal HTML Document section, the<br> first paragraph is coded as</font></p> <p><font face="Verdana"> <P>Welcome to the world of HTML.<br> This is the first paragraph.<br> While short it is<br> still a paragraph!</P></font></p> <p><font face="Verdana">In the source file there is a line break between the sentences. A Web<br> browser ignores this line break and starts a new paragraph only when it<br> encounters another <P> tag.</font></p> <p><font face="Verdana">Important: You must indicate paragraphs with <P> elements. A browser ignores<br> any indentations or blank lines in the source text. Without <P> elements,<br> the document becomes one large paragraph. (One exception is text tagged as<br> "preformatted," which is explained below.) For example, the following would<br> produce identical output as the first bare-bones HTML example:</font></p> <p><font face="Verdana"> <H1>Level-one heading</H1> <P>Welcome to the world of HTML. This is the<br> first paragraph. While short it is still a<br> paragraph! </P> <P>And this is the second paragraph.</P></font></p> <p><font face="Verdana">To preserve readability in HTML files, put headings on separate lines, use a<br> blank line or two where it helps identify the start of a new section, and<br> separate paragraphs with blank lines (in addition to the <P> tags). These<br> extra spaces will help you when you edit your files (but your browser will<br> ignore the extra spaces because it has its own set of rules on spacing that<br> do not depend on the spaces you put in your source file).</font></p> <p><font face="Verdana">NOTE: The </P> closing tag can be omitted. This is because browsers<br> understand that when they encounter a <P> tag, it implies that there is an<br> end to the previous paragraph.</font></p> <p><font face="Verdana">Using the <P> and </P> as a paragraph container means that you can center a<br> paragraph by including the ALIGN=alignment attribute in your source file.</font></p> <p><font face="Verdana"> <P ALIGN=CENTER><br> This is a centered paragraph. [See the formatted version below.]<br> </P></font></p> <p><font face="Verdana"> This is a centered paragraph.</font></p> <p><font face="Verdana"><b>Lists</b></font></p> <p><font face="Verdana">HTML supports unnumbered, numbered, and definition lists. You can nest lists<br> too, but use this feature sparingly because too many nested items can get<br> difficult to follow.</font></p> <p><font face="Verdana"><b>Unnumbered Lists</b></font></p> <p><font face="Verdana">To make an unnumbered, bulleted list,</font></p> <p><font face="Verdana"> 1. start with an opening list <UL> (for unnumbered list) tag<br> 2. enter the <LI> (list item) tag followed by the individual item; no<br> closing </LI> tag is needed<br> 3. end the entire list with a closing list </UL> tag</font></p> <p><font face="Verdana">Below is a sample three-item list:</font></p> <p><font face="Verdana"> <UL><br> <LI> apples<br> <LI> bananas<br> <LI> grapefruit<br> </UL></font></p> <p><font face="Verdana">The output is:</font></p> <p><font face="Verdana"> * apples<br> * bananas<br> * grapefruit</font></p> <p><font face="Verdana">The <LI> items can contain multiple paragraphs. Indicate the paragraphs with<br> the <P> paragraph tags.</font></p> <p><font face="Verdana"><b>Numbered Lists</b></font></p> <p><font face="Verdana">A numbered list (also called an ordered list, from which the tag name<br> derives) is identical to an unnumbered list, except it uses <OL> instead of<br> <UL>. The items are tagged using the same <LI> tag. The following HTML code:</font></p> <p><font face="Verdana"> <OL><br> <LI> oranges<br> <LI> peaches<br> <LI> grapes<br> </OL></font></p> <p><font face="Verdana">produces this formatted output:</font></p> <p><font face="Verdana"> 1. oranges<br> 2. peaches<br> 3. grapes</font></p> <p><font face="Verdana"><b>Definition Lists</b></font></p> <p><font face="Verdana">A definition list (coded as <DL>) usually consists of alternating a<br> definition term (coded as <DT>) and a definition definition (coded as <DD>).<br> Web browsers generally format the definition on a new line.</font></p> <p><font face="Verdana">The following is an example of a definition list:</font></p> <p><font face="Verdana"> <DL><br> <DT> NCSA<br> <DD> NCSA, the National Center for Supercomputing Applications,<br> is located on the campus of the University of Illinois<br> at Urbana-Champaign.<br> <DT> Cornell Theory Center<br> <DD> CTC is located on the campus of Cornell University in Ithaca,<br> New York.<br> </DL></font></p> <p><font face="Verdana">The output looks like:</font></p> <p><font face="Verdana">NCSA<br> NCSA, the National Center for Supercomputing Applications, is located<br> on the campus of the University of Illinois at Urbana-Champaign.<br> Cornell Theory Center<br> CTC is located on the campus of Cornell University in Ithaca, New York.</font></p> <p><font face="Verdana">The <DT> and <DD> entries can contain multiple paragraphs (indicated by <P><br> paragraph tags), lists, or other definition information.</font></p> <p><font face="Verdana">The COMPACT attribute can be used routinely in case your definition terms<br> are very short. If, for example, you are showing some computer options, the<br> options may fit on the same line as the start of the definition.</font></p> <p><font face="Verdana"><DL COMPACT><br> <DT> -i<br> <DD>invokes NCSA Mosaic for Microsoft Windows using the<br> initialization file defined in the path<br> <DT> -k<br> <DD>invokes NCSA Mosaic for Microsoft Windows in kiosk mode<br> </DL></font></p> <p><font face="Verdana">The output looks like:</font></p> <p><font face="Verdana">-i invokes NCSA Mosaic for Microsoft Windows using the initialization file<br> defined in the path.<br> -k invokes NCSA Mosaic for Microsoft Windows in kiosk mode.</font></p> <p><font face="Verdana"><b>Nested Lists</b></font></p> <p><font face="Verdana">Lists can be nested. You can also have a number of paragraphs, each<br> containing a nested list, in a single list item.</font></p> <p><font face="Verdana">Here is a sample nested list:</font></p> <p><font face="Verdana"> <UL><br> <LI> A few New England states:<br> <UL><br> <LI> Vermont<br> <LI> New Hampshire<br> <LI> Maine<br> </UL><br> <LI> Two Midwestern states:<br> <UL><br> <LI> Michigan<br> <LI> Indiana<br> </UL><br> </UL></font></p> <p><font face="Verdana">The nested list is displayed as</font></p> <p><font face="Verdana"> * A few New England states:<br> o Vermont<br> o New Hampshire<br> o Maine<br> * Two Midwestern states:<br> o Michigan<br> o Indiana</font></p> <p><font face="Verdana"><b>Preformatted Text</b></font></p> <p><font face="Verdana">Use the <PRE> tag (which stands for "preformatted") to generate text in a<br> fixed-width font. This tag also makes spaces, new lines, and tabs<br> significant (multiple spaces are displayed as multiple spaces, and lines<br> break in the same locations as in the source HTML file). This is useful for<br> program listings, among other things. For example, the following lines:</font></p> <p><font face="Verdana"> <PRE><br> #!/bin/csh<br> cd $SCR<br> cfs get mysrc.f:mycfsdir/mysrc.f<br> cfs get myinfile:mycfsdir/myinfile<br> fc -02 -o mya.out mysrc.f<br> mya.out<br> cfs save myoutfile:mycfsdir/myoutfile<br> rm *<br> </PRE></font></p> <p><font face="Verdana">display as:</font></p> <p><font face="Verdana"> #!/bin/csh<br> cd $SCR<br> cfs get mysrc.f:mycfsdir/mysrc.f<br> cfs get myinfile:mycfsdir/myinfile<br> fc -02 -o mya.out mysrc.f<br> mya.out<br> cfs save myoutfile:mycfsdir/myoutfile<br> rm *</font></p> <p><font face="Verdana">The <PRE> tag can be used with an optional WIDTH attribute that specifies<br> the maximum number of characters for a line. WIDTH also signals your browser<br> to choose an appropriate font and indentation for the text.</font></p> <p><font face="Verdana">Hyperlinks can be used within <PRE> sections. You should avoid using other<br> HTML tags within <PRE> sections, however.</font></p> <p><font face="Verdana">Note that because <, >, and & have special meanings in HTML, you must use<br> their escape sequences (&lt;, &gt;, and &amp;, respectively) to enter these<br> characters. See the section Escape Sequences for more information.</font></p> <p><font face="Verdana"><b>Extended Quotations</b></font></p> <p><font face="Verdana">Use the <BLOCKQUOTE> tag to include lengthy quotations in a separate block<br> on the screen. Most browsers generally change the margins for the quotation<br> to separate it from surrounding text.</font></p> <p><font face="Verdana">In the example:</font></p> <p><font face="Verdana"> <BLOCKQUOTE><br> <P>Omit needless words.</P><br> <P>Vigorous writing is concise. A sentence should contain no<br> unnecessary words, a paragraph no unnecessary sentences, for the<br> same reason that a drawing should have no unnecessary lines and a<br> machine no unnecessary parts.</P><br> --William Strunk, Jr., 1918<br> </BLOCKQUOTE></font></p> <p><font face="Verdana">the result is:</font></p> <p><font face="Verdana"> Omit needless words.</font></p> <p><font face="Verdana"> Vigorous writing is concise. A sentence should contain no<br> unnecessary words, a paragraph no unnecessary sentences, for the<br> same reason that a drawing should have no unnecessary lines and a<br> machine no unnecessary parts.</font></p> <p><font face="Verdana"> --William Strunk, Jr., 1918</font></p> <p><font face="Verdana"><b>Addresses</b></font></p> <p><font face="Verdana">The <ADDRESS> tag is generally used to specify the author of a document, a<br> way to contact the author (e.g., an email address), and a revision date. It<br> is usually the last item in a file.</font></p> <p><font face="Verdana">For example, the last line of the online version of this guide is:</font></p> <p><font face="Verdana"> <ADDRESS><br> A Beginner's Guide to HTML / NCSA / <a href="mailto:pubs@ncsa.uiuc.edu">pubs@ncsa.uiuc.edu</a> / revised April 96<br> </ADDRESS></font></p> <p><font face="Verdana">The result is:<br> A Beginner's Guide to HTML / NCSA / <a href="mailto:pubs@ncsa.uiuc.edu">pubs@ncsa.uiuc.edu</a> / revised April 96</font></p> <p><font face="Verdana">NOTE: <ADDRESS> is not used for postal addresses. See "Forced Line Breaks"<br> below to see how to format postal addresses.</font></p> <p><font face="Verdana"><b>Forced Line Breaks/Postal Addresses</b></font></p> <p><font face="Verdana">The <BR> tag forces a line break with no extra (white) space between lines.<br> Using <P> elements for short lines of text such as postal addresses results<br> in unwanted additional white space. For example, with <BR>:</font></p> <p><font face="Verdana"> National Center for Supercomputing Applications<BR><br> 605 East Springfield Avenue<BR><br> Champaign, Illinois 61820-5518<BR></font></p> <p><font face="Verdana">The output is:</font></p> <p><font face="Verdana">National Center for Supercomputing Applications<br> 605 East Springfield Avenue<br> Champaign, Illinois 61820-5518</font></p> <p><font face="Verdana"><b>Horizontal Rules</b></font></p> <p><font face="Verdana">The <HR> tag produces a horizontal line the width of the browser window. A<br> horizontal rule is useful to separate sections of your document. For<br> example, many people add a rule at the end of their text and before the<br> <address> information.</font></p> <p><font face="Verdana">You can vary a rule's size (thickness) and width (the percentage of the<br> window covered by the rule). Experiment with the settings until you are<br> satisfied with the presentation. For example:</font></p> <p><font face="Verdana"><HR SIZE=4 WIDTH="50%"></font></p> <p><font face="Verdana">displays as:<br> --------------------------------------</font></p> <p><font face="Verdana"> <b> Character Formatting</b></font></p> <p><font face="Verdana">HTML has two types of styles for individual words or sentences: logical and<br> physical. Logical styles tag text according to its meaning, while physical<br> styles indicate the specific appearance of a section. For example, in the<br> preceding sentence, the words "logical styles" was tagged as a "definition."<br> The same effect (formatting those words in italics) could have been achieved<br> via a different tag that tells your browser to "put these words in italics."</font></p> <p><font face="Verdana">NOTE: Some browsers don't attach any style to the <DFN> tag, so you might<br> not see the indicated phrases in the previous paragraph in italics.</font></p> <p><font face="Verdana"><b>Logical Versus Physical Styles</b></font></p> <p><font face="Verdana">If physical and logical styles produce the same result on the screen, why<br> are there both?</font></p> <p><font face="Verdana">In the ideal SGML universe, content is divorced from presentation. Thus SGML<br> tags a level-one heading as a level-one heading, but does not specify that<br> the level-one heading should be, for instance, 24-point bold Times centered.<br> The advantage of this approach (it's similar in concept to style sheets in<br> many word processors) is that if you decide to change level-one headings to<br> be 20-point left-justified Helvetica, all you have to do is change the<br> definition of the level-one heading in your Web browser. Indeed many<br> browsers today let you define how you want the various HTML tags rendered<br> on-screen.</font></p> <p><font face="Verdana">Another advantage of logical tags is that they help enforce consistency in<br> your documents. It's easier to tag something as <H1> than to remember that<br> level-one headings are 24-point bold Times centered or whatever. For<br> example, consider the <STRONG> tag. Most browsers render it in bold text.<br> However, it is possible that a reader would prefer that these sections be<br> displayed in red instead. Logical styles offer this flexibility.</font></p> <p><font face="Verdana">Of course, if you want something to be displayed in italics (for example)<br> and do not want a browser's setting to display it differently, use physical<br> styles. Physical styles, therefore, offer consistency in that something you<br> tag a certain way will always be displayed that way for readers of your<br> document.</font></p> <p><font face="Verdana">Try to be consistent about which type of style you use. If you tag with<br> physical styles, do so throughout a document. If you use logical styles,<br> stick with them within a document. Keep in mind that future releases of HTML<br> might not support physical styles, which could mean that browsers will not<br> display physical style coding.</font></p> <p><font face="Verdana"><b>Logical Styles</b></font></p> <p><font face="Verdana"><DFN><br> for a word being defined. Typically displayed in italics. (NCSA Mosaic<br> is a World Wide Web browser.)<br> <EM><br> for emphasis. Typically displayed in italics. (Consultants cannot reset<br> your password unless you call the help line.)<br> <CITE><br> for titles of books, films, etc. Typically displayed in italics. (A<br> Beginner's Guide to HTML)<br> <CODE><br> for computer code. Displayed in a fixed-width font. (The <stdio.h><br> header file)<br> <KBD><br> for user keyboard entry. Typically displayed in plain fixed-width font.<br> (Enter passwd to change your password.)<br> <SAMP><br> for a sequence of literal characters. Displayed in a fixed-width font.<br> (Segmentation fault: Core dumped.)<br> <STRONG><br> for strong emphasis. Typically displayed in bold. (NOTE: Always check<br> your links.)<br> <VAR><br> for a variable, where you will replace the variable with specific<br> information. Typically displayed in italics. (rm filename deletes the<br> file.)</font></p> <p><font face="Verdana"><b>Physical Styles</b></font></p> <p><font face="Verdana"><B> bold text<br> <I> italic text<br> <TT><br> typewriter text, e.g. fixed-width font.</font></p> <p><font face="Verdana"><b>Escape Sequences (a.k.a. Character Entities)</b></font></p> <p><font face="Verdana">Character entities have two functions:</font></p> <p><font face="Verdana"> * escaping special characters<br> * displaying other characters not available in the plain ASCII character<br> set (primarily characters with diacritical marks)</font></p> <p><font face="Verdana">Three ASCII characters--the left angle bracket (<), the right angle bracket<br> (>), and the ampersand (&)--have special meanings in HTML and therefore<br> cannot be used "as is" in text. (The angle brackets are used to indicate the<br> beginning and end of HTML tags, and the ampersand is used to indicate the<br> beginning of an escape sequence.) Double quote marks may be used as-is but a<br> character entity may also be used (&quot;).</font></p> <p><font face="Verdana">To use one of the three characters in an HTML document, you must enter its<br> escape sequence instead:</font></p> <p><font face="Verdana">&lt;<br> the escape sequence for <<br> &gt;<br> the escape sequence for ><br> &amp;<br> the escape sequence for &</font></p> <p><font face="Verdana">Additional escape sequences support accented characters, such as:</font></p> <p><font face="Verdana">&ouml;<br> the escape sequence for a lowercase o with an umlaut: ö<br> &ntilde;<br> the escape sequence for a lowercase n with an tilde: ñ<br> &Egrave;<br> the escape sequence for an uppercase E with a grave accent: È</font></p> <p><font face="Verdana">You can substitute other letters for the o, n, and E shown above. Check this<br> online reference for a longer list of special characters.</font></p> <p><font face="Verdana">NOTE: Unlike the rest of HTML, the escape sequences are case sensitive. You<br> cannot, for instance, use &LT; instead of &lt;.</font></p> <p><font face="Verdana"> <b> Linking</b></font></p> <p><font face="Verdana">The chief power of HTML comes from its ability to link text and/or an image<br> to another document or section of a document. A browser highlights the<br> identified text or image with color and/or underlines to indicate that it is<br> a hypertext link (often shortened to hyperlink or link).</font></p> <p><font face="Verdana">HTML's single hypertext-related tag is <A>, which stands for anchor. To<br> include an anchor in your document:</font></p> <p><font face="Verdana"> 1. start the anchor with <A (include a space after the A)<br> 2. specify the document you're linking to by entering the parameter<br> HREF="filename" followed by a closing right angle bracket (>)<br> 3. enter the text that will serve as the hypertext link in the current<br> document<br> 4. enter the ending anchor tag: </A> (no space is needed before the end<br> anchor tag)</font></p> <p><font face="Verdana">Here is a sample hypertext reference in a file called US.html:</font></p> <p><font face="Verdana"> <A HREF="MaineStats.html">Maine</A></font></p> <p><font face="Verdana">This entry makes the word Maine the hyperlink to the document<br> MaineStats.html, which is in the same directory as the first document.</font></p> <p><font face="Verdana"><b>Relative Pathnames Versus Absolute Pathnames</b></font></p> <p><font face="Verdana">You can link to documents in other directories by specifying the relative<br> path from the current document to the linked document. For example, a link<br> to a file NYStats.html located in the subdirectory AtlanticStates would be:</font></p> <p><font face="Verdana"> <A HREF="AtlanticStates/NYStats.html">New York</A></font></p> <p><font face="Verdana">These are called relative links because you are specifying the path to the<br> linked file relative to the location of the current file. You can also use<br> the absolute pathname (the complete URL) of the file, but relative links are<br> more efficient in accessing a server.</font></p> <p><font face="Verdana">Pathnames use the standard UNIX syntax. The UNIX syntax for the parent<br> directory (the directory that contains the current directory) is "..". (For<br> more information consult a beginning UNIX reference text such as Learning<br> the UNIX Operating System from O'Reilly and Associates, Inc.)</font></p> <p><font face="Verdana">If you were in the NYStats.html file and were referring to the original<br> document US.html, your link would look like this:</font></p> <p><font face="Verdana"> <A HREF="../US.html">United States</A></font></p> <p><font face="Verdana">In general, you should use relative links because:</font></p> <p><font face="Verdana"> 1. it's easier to move a group of documents to another location (because<br> the relative path names will still be valid)<br> 2. it's more efficient connecting to the server<br> 3. there is less to type</font></p> <p><font face="Verdana">However use absolute pathnames when linking to documents that are not<br> directly related. For example, consider a group of documents that comprise a<br> user manual. Links within this group should be relative links. Links to<br> other documents (perhaps a reference to related software) should use full<br> path names. This way if you move the user manual to a different directory,<br> none of the links would have to be updated.</font></p>
التعليقات الأصلية (3)
مسترجع من Wayback Machine