http:^^www.cs.wisc.edu^docs^htmltutorial.html

来自「This data set contains WWW-pages collect」· HTML 代码 · 共 548 行 · 第 1/2 页

HTML
548
字号
Date: Mon, 04 Nov 1996 23:54:24 GMTServer: NCSA/1.5Content-type: text/htmlLast-modified: Thu, 24 Oct 1996 22:13:43 GMTContent-length: 18716<html> <head><title>An Introduction to HTML</title></head><body><h1>An Introduction to HTML</h1><H3>Written by Kurt Revis, modified by Steven Fought</H3><P> This document is an introduction to HTML, the <I>Hypertext MarkupLanguage.</I> The vast majority of the documents that you have seen onthe Web have been written using HTML. <P> HTML was intended to be a structural markup language.  In a traditionalword processor or desktop publishing program you indicate how you want thedifferent parts of your document look.  In a structural publishing system,you indicate what the different parts of your document <EM>are</EM>, andelsewhere, outside of the document, you indicate how each element shouldbe shown to a user.  In the case of HTML, each browser decides how it willrender the HTML elements.  The original developers of HTML wanted browsersto be developed on a wide variety of systems, so they kept it simple and tried to avoid including elements that made assumptions about a Web user'scomputer (such as the ability to display pictures).  The visually-orientedtags that are now in HTML were simply added into browsers by their developers,and have since become popular.<P> It is important to understand that HTML is designed tospecify the structure of the document, and not itsvisual appearance, because while you might like for your document to show up in 12-point Times, double spaced, with 2 inch margins on all sides, those kinds of decisions will be made not by you, but by the person reading your document.<P><HR><h2>Tags</h2><p> HTML files are just plain text, with <em>tags</em> mixed in for formatting.Tags are used like this:<BLOCKQUOTE><PRE>&lt;h1&gt;Operating Systems&lt;/h1&gt;</PRE></BLOCKQUOTE><p>Tags usually come in pairs called <EM>containers</EM> that surround pieces of text. The tags themselvesare made up of &lt;, the tag name, and &gt;. The first tag(<code>&lt;H1&gt;</code>) is called the <em>start tag</em>, the text inside("Operating Systems") is called the <em>content</em>, and the second tag(<code>&lt;/H1&gt;</code>) is called the <em>end tag</em>.<p> The &lt;h1&gt; tag signifies that the content text should bedisplayed as a header (the 1 means that it is at level 1, thelargest). When viewed in the browser (Netscape, lynx, or whatever), theabove line will look like:<H1>Operating Systems</H1><p>Although most tags work this way, some tags don't have endtags. For example, the <code>&lt;P&gt;</code> tag for specifying thebeginning of a paragraph doesn't need a <code>&lt;/P&gt;</code> at theend of the paragraph.  We will discuss this tag (and others) later inthis document.<P>Tag names are not case-sensitive, so <code>&lt;H1&gt;</code> and<code>&lt;h1&gt;</code> are equivalent.<P>Some tags may also have optional <em>attributes</em>, which modify theinterpretation of the tag. For example, the <code>&lt;IMG&gt;</code> tag, which tells thebrowser to display an image, can have a <code>SRC</code> attribute to specify the image'sname or an <code>ALIGN</code> atttribute to specify the alignment compared to thesurrounding text. With attributes, a tag might be used like this:<blockquote><pre>&lt;IMG SRC="os.gif" ALIGN="top"&gt;</pre></blockquote><P><HR><h2>Structure of an HTML file</h2>All HTML files should follow this general format:<PRE>&lt;HTML&gt;&lt;HEAD&gt;&lt;TITLE&gt;This is the title of the document.&lt;/TITLE&gt;&lt;/HEAD&gt;&lt;BODY&gt;This is the body, or main text, of the document.&lt;/BODY&gt;&lt;/HTML&gt;</PRE><P><P> The first tag, <code>&lt;HTML&gt;</code>, indicates that thecontents of the file are, in fact, in HTML format. It is a good ideato enclose the whole file in <code>&lt;HTML&gt;&lt;/HTML&gt;</code>,although it's not strictly required right now.  Although yourdocuments may be interpreted correctly by browsers currently in use, this may change in the future.<P> Each HTML file is split up into two parts: the <em>header</em>,marked by <code>&lt;HEAD&gt;&lt;/HEAD&gt;</code>, and the<em>body</em>, marked by <code>&lt;BODY&gt;&lt;/BODY&gt;</code>. (Alltext in the file should be enclosed within these tags.)<UL><LI>The header specifies information about the document ingeneral. Usually, it's only used to specify the title with<code>&lt;TITLE&gt;&lt;/TITLE&gt;</code>.  This title is usuallydisplayed at the top of the screen: for example, this document's titleis "An Introduction to HTML". (Note that this does <em>not</em>automatically display the large line at the beginning: use<code>&lt;H1&gt;</code> for that.)<LI>The body is where the actual text of the document goes.</UL><p>Note that in HTML, character and line spacing are unimportant. Inthe example above, I could have written (for example)<PRE>&lt;HTML&gt;&lt;HEAD&gt;&lt;TITLE&gt;This is the title of the document.&lt;/TITLE&gt;&lt;/HEAD&gt;&lt;BODY&gt;This is the body, or main text, of the document.&lt;/BODY&gt;&lt;/HTML&gt;</PRE><P>and gotten the same result.<P>Note that there are a huge number of documents on the Web thatare not written in "strict HTML". Often, the &lt;HEAD&gt; section will be completely missing.  When Mosaic became popular, NCSA'sdocumentation, which does not stress proper construction, waswhat many people used to learn HTML. The emphasis was not on using HTMLcorrectly, but on creating documents that looked good in Mosaic,which is very forgiving of bad HTML.  The result is that many documentslook good in Mosaic and bad in many other browsers.  The same holdstrue for Netscape and MSIE, which support and encourage a wide variety offeatures outside of the HTML spec.<P><HR><H2>Paragraphs and Spaces</H2>One of the problems beginners have with HTML is that spaces, tabs, andnewlines--known collectively as "white space"--are all equivalent. If Itype<PRE>         This    is a     test.</PRE>or<PRE>This isa    test.</PRE>or<PRE>This is a test.</PRE>it will always be shown in the browser as:<P>This is a test.<p> So just adding a blank line to your document will not start anew paragraph.  To make a paragraph, use the <code>&lt;P&gt;</code>tag at the <em>beginning</em> of the paragraph.  For example:<PRE>&lt;P&gt; This is the first paragraph. It babbles on and on, never really goinganywhere. &lt;P&gt;The second paragraph, however, is a little more weird.It has somevery short lines,for instance.There are also other lines that seem to go forever; in fact, they are rather long, extending for more than 80 characters, but decidedly finite in scope.Also, it contains blanklines in the middle of itself.</PRE>This HTML is rendered as:<P> This is the first paragraph. It babbles on and on, never really goinganywhere. <P>The second paragraph, however, is a little more weird.It has somevery short lines,for instance.There are also other lines that seem to go forever; in fact, they are rather long, extending for more than 80 characters, but decidedly finite in scope.Also, it contains blanklines in the middle of itself.<P>Related to <code>&lt;P&gt;</code> are the <code>&lt;BR&gt;</code> and <code>&lt;HR&gt;</code> tags.<code>&lt;BR&gt;</code> produces a line break, without the extra verticalspace that <code>&lt;P&gt;</code> puts in. <code>&lt;HR&gt;</code> insertsa horizontal rule--a line extending across the page.<P><HR><H2>Section Headings</H2><p> The most common HTML tags are the section headings, like the<code>&lt;H1&gt;</code> tag we used earlier. In fact, there is a wholerange of these tags, from <code>&lt;H1&gt;</code> for top-levelheadings to <code>&lt;H6&gt;</code> for the bottom. These tags tell thebrowser to use a different type size, indentation, or color.<H1>Heading level 1 &lt;H1&gt;</H1><H2>Heading level 2 &lt;H2&gt;</H2><H3>Heading level 3 &lt;H3&gt;</H3><H4>Heading level 4 &lt;H4&gt;</H4><H5>Heading level 5 &lt;H5&gt;</H5><H6>Heading level 6 &lt;H6&gt;</H6><P> These tags do not denote section numbers (as in "See Chapter 3,Section 4"), but section <em>levels</em>. You can, of course, use a sectionlevel tag more than once in a document.<P><HR><H2>Type Styles</H2><p>HTML allows the use of a number of different type styles. The most usefulare <code>&lt;EM&gt;</code>, for adding <em>emphasis</em> like <em>this</em>,and <code>&lt;STRONG&gt;</code> for <strong>stronger emphasis</strong>.Browsers may display the text in italics, in bold characters, underlined,in all capital letters, or with asterisks around it.<P> In general, it is best to use <code>&lt;EM&gt;</code> and<code>&lt;STRONG&gt;</code>, since they give good results on all browsers.If you need to, however, you can use <code>&lt;I&gt;</code>, which produces<I>italics</I>, or <code>&lt;B&gt;</code> which produces <B>bold</B> text.<P>There is also typewriter style, <TT>like this</TT>, produced with the<code>&lt;TT&gt;</code> tag.<P><HR><H2>Entities</H2><p><EM>Entities</EM> are names that start with <TT>&amp;</TT> and endwith <TT>;</TT> that represent characters which cannot normallybe written in ASCII, and characters used for markup. For example, because the angle bracket characters are used in tags, to avoid ambiguitiesthe codes <code>&amp;lt;</code> and <code>&amp;gt;</code> are used to produce &lt; and &gt; respectively.Similarly, the ampersand character '&amp;' is produced with <code>&amp;amp;</code>.  The semicolon at the end of the code is necessary.<p>Other codes include <code>&amp;quot;</code> which produces the double-quote character&quot;. (I'm not sure why this code is necessary; I've never seen a browserget confused by the character " itself.) All of the characters in theISO-Latin-1 set can also be expressed--CERN provides a

⌨️ 快捷键说明

复制代码Ctrl + C
搜索代码Ctrl + F
全屏模式F11
增大字号Ctrl + =
减小字号Ctrl + -
显示快捷键?