http:^^www.cs.wisc.edu^docs^homepage.html
来自「This data set contains WWW-pages collect」· HTML 代码 · 共 259 行
HTML
259 行
Date: Tue, 05 Nov 1996 21:47:58 GMTServer: NCSA/1.5Content-type: text/htmlLast-modified: Mon, 19 Sep 1994 21:56:41 GMTContent-length: 12327<HTML><HEAD><TITLE>8 Easy steps to having your own WWW Page</TITLE></HEAD><BODY><P> <H2>8 Easy steps to having your own WWW Page on the CS UNIX Machines</H2><P> In this document we will go through a step-by-step procedure for creatinga simple WWW Home page on the departmental workstations. It should take you about 30minutes to complete the steps described here. The page you create will probably not be exactly what you want, but going through these instructionswill give you a general idea of what is involved in creating Web pages,and after you understand more of how the system works you can go back andedit or replace it. Some of what is said in this document isn't strictlytrue, as you will see when you continue learning about the Web.<P> <BLOCKQUOTE> <B>Note:</B> The term <EM>Home Page</EM> has come to mean two different things. Some people refer to a page that describes a person or institution as its "Home Page." Others think a "Home Page" is a page you create for your own use that contains a list of links to the sites you visit frequently. The page you are creating is of the first type. </BLOCKQUOTE><P> <H2>Step 0: What you should have in front of you.</H2><P> Chances are you have probably completed most of this step already.This document assumes you are logged into the console of a UNIX workstationin the CS department, and that you are running Mosaic for X to view this page. If you are using some other browser or you aren't logged intoa CS machine, some of the instructions below won't work and might notmake sense, and you will have to move or be prepared to improvise. <P> You will probably want to read both this document and the page youare editing at the same time, so to make that easier you can create a second Mosaic window. Keeping in mind that you will have to put the firstwindow back on top to continue reading, press the "New Window" button on the bottom of Mosaic. We'll use this other window later.<P> In addition to Mosaic, you should have a window with a shell availablebecause you will be typing a few commands. Finally, you should have your favorite text editor in a fourth window. This document doesn't assume any HTML-specific editor modes; you will be editing the file directly. Make sure you can switch between the windows easily. <P> <H2>Step 1: Create your public WWW directory.</H2><P> If you have never put a document on the Web, you will need to create yourpublicly accessible WWW directory. In your shell, execute the followingcommand: <P><BLOCKQUOTE><PRE>mkdir ~/public/html</PRE></BLOCKQUOTE><P> This directory is where you will keep all of your Web documents. It hasa special place in the namespace of our Web server. If this command didnot work because you do not have a <TT>~/public</TT> directory, you have todo a little more work. Please see this <!WA0><!WA0><!WA0><!WA0><!WA0><!WA0><!WA0><!WA0><!WA0><!WA0><A HREF="http://www.cs.wisc.edu/docs/public_afs.html">note</A>.<P> <H2>Step 2: Copy the sample home page.</H2><P> In your shell, run the following command:<P><BLOCKQUOTE><PRE>cp /common/www/home-sample.html ~/public/html/<EM>username</EM>.html</PRE></BLOCKQUOTE><P> where <I>username</I> is your own UNIX login name. This file containsa WWW home page for you to personalize.<P> <H2>Step 3: Edit the home page file.</H2><P> What you do to accomplish this will depend on what editor you use. Thefirst few lines of the file should look like this:<P><BLOCKQUOTE><PRE><HTML><HEAD><TITLE>Felix's Home Page<TITLE><HEAD><BODY></BLOCKQUOTE></PRE><P> Don't change anything yet. <P> <H2>Step 4: View the document in Mosaic.</H2>In the other Mosaic window you created,click on the <EM>Open...</EM> button at the bottom. A dialog box with a text field and some buttons will appear. If there is anything in the text field, press the <EM>Clear</EM> button. Now type<P><BLOCKQUOTE><PRE>http://www.cs.wisc.edu/~<EM>username</EM>/</BLOCKQUOTE></PRE><P> in the text field. If you make a mistake, the <B>Backspace</B> keyshould delete the character before the cursor, and the <B>Delete</B> key should delete the character after it. <P> In the other Mosaic window there should be a short list of directoriesand files, one of which is <TT><EM>username</EM>.html</TT>. Just as the string <TT>~<EM>username</EM>/public/html/</TT> is a complete path in thefilesystem pointing to the directory you created, the string<TT>http://www.cs.wisc.edu/~<EM>username</EM>/</TT> is a complete path (orfull <!WA1><!WA1><!WA1><!WA1><!WA1><!WA1><!WA1><!WA1><!WA1><!WA1><A HREF="http://www.cs.wisc.edu/docs/url.html">URL</A>) tothat same directory in the Web namespace. If you had wanted to load thedocument directly, you could have entered<P><BLOCKQUOTE><PRE>http://www.cs.wisc.edu/~<EM>username</EM>/<EM>username</EM>.html</BLOCKQUOTE></PRE><P> However, the server was nice enough to make a directory listing for you,so you can just click on the name of the file to view it. <P> <H2>Step 5: Examine the file.</H2><P> The file you are editing is written in HTML, the Hypertext Markup Language. We are not going to go into detail about HTML here, but there isa reasonably complete description in <!WA2><!WA2><!WA2><!WA2><!WA2><!WA2><!WA2><!WA2><!WA2><!WA2><A HREF="http://www.cs.wisc.edu/docs/htmltutorial.html">another document</A>. Here is an over-simplified summary of HTML markup. As you read it, look for examples in the file:<P><UL> <LI> Markup in HTML is done with <EM>Elements</EM> and <EM>Entities</EM>.<LI> Elements consist of <EM>tags</EM>, which are names insideangle brackets, as in <TT><TITLE></TT>.<LI> Tag names are not case-sensitive.<LI> Some elements are <EM>containers</EM>, which consist of twotags: a <EM>start tag</EM> and an <EM>end tag</EM>. Start tags and end tagsare generally the same, except that end tags start with a "/". Forexample, if <TT><FOO></TT> is a start tag, <TT></FOO></TT> isits end tag. Whatever is between the start and end tags is inside the container.<LI> <EM>Entities</EM> are names that start with <TT>&</TT> and end with <TT>;</TT> that represent characters which cannot normally be written in ASCII, and characters used for markup. <LI> The only entities you need to know right now are <TT>&lt;</TT> for <TT><</TT>, <TT>&gt;</TT> for <TT>></TT>, and <TT>&amp;</TT>for <TT>&</TT>. </UL><P> Also notice that tabs, spaces, and newlines separate words, but are otherwise interchangeable. You can format yourHTML document however you want to, and any combination of "whitespace" characters will not have an effect on the finished product. While thereis a blank line between paragraphs in the sample file, it is the <TT><P></TT> tags that cause space to be included in theMosaic window.<P> To make an HTML document, you simply need to know the elements and entities and how to use them. The use of entities is very simple. Wheneveryou need to enter a character special or markup character into your document,instead of typing the character itself you type the entity. The use of elements is more complicated, so for now we will just tell you what youneed to know to alter the sample home page.<P> There are a number of tags that get included in every document that wewill not discuss. Here we will only discuss the <B>Title</B>, and the <B>Body</B>.<P> <H2>Step 6: Edit the title.</H2><P> The third line of the sample home page looks like this:<P><BLOCKQUOTE><PRE><TITLE>Felix's Home Page</TITLE></BLOCKQUOTE></PRE><P> If you look at the top of your Mosaic window where it says "<EM>Document Title:</EM>" you will see that the string in the <TT>TITLE</TT> container isdisplayed there. Different browsers use the title in different ways. Thetitle should be short and summarize the contents of the document. In this case you can replace "<TT>Felix</TT>" with your own name. <P> After you have made the change, save the file without exiting your editorand press the <EM>Reload</EM> button on the bottom of the other Mosaic window. The new title should appear. From now on, whenever you make changes to the file you can save it in your editor and reload it into your browser to see the result.<P> <H2>Step 7: Edit the body.</H2><P> The <B>body</B> is everything between the <TT><BODY></TT> and<TT></BODY></TT> tags (if you look at the end of the document, youwill see the <TT></BODY></TT> tag). The body is where you put yourtext, entities, and most of the elements. The sample file has a number of elements you might want to use in your own home page. Don't delete asample element until you have left at least one example of its use in the file or decided you don't want to use it.<P> As you look at the sample page in your editor and in Mosaic it shouldbecome clear what the different elements do <EM>in Mosaic for X</EM>. Different browsers have different interpretations of the tags. Here is a list of the elements in the document and what they do in Mosaic:<UL><LI> <TT><B></TT> is a container that emboldens its contents.<LI> <TT><EM></TT> is a container that italicizes its contents (<TT>EM</TT> stands for <EM>emphasis</EM>).<LI> <TT><H1></TT> is a container that creates a heading. <LI> <TT><P></TT> separates paragraphs.<LI> <TT><UL></TT> creates a "bullet-ed list" (<TT>UL</TT> stands for <EM>unordered list</EM>).<LI> <TT><LI></TT> is used to specify <EM>list items</EM> inside a list container.<LI> <TT><A></TT> is used to make a link to another document.<LI> <TT><IMG></TT> is used to include a picture.</UL><P> There are also a number of elements not included in the sample document. Here is a list of some of them:<UL><LI> <TT><H2></TT> through <TT><H6></TT> are like <TT><H1></TT> and create headings with progressively smaller fonts.<LI> <TT><OL></TT> is like <TT><UL></TT>, but creates a numberedlist (<TT>OL</TT> stands for <EM>ordered list</EM>).<LI> <TT><HR></TT> makes a <EM>horizontal rule</EM>.<LI> <TT><BR></TT> inserts a line <EM>break</EM>.</UL><P> Two of the included tags, <TT><A></TT> and <TT><IMG></TT>, had <EM>attributes</EM>. The <TT>A</TT> container was used to create a link to another document, which was specified in the <TT>HREF="/cgi-bin/finger?keeper@spacely"</TT> attribute. In this case,that document is a script that fingers a user (<TT>keeper@spacely</TT>) and creates a document with the result. Note that path (<EM>URL</EM>) to thedocument starts with a "/". When you link from one document to another in the Web, you can refer to the new location relative to the current one.In this case, we could omit the <TT>http://www.cs.wisc.edu</TT> becauseboth documents are on the same server. <P> The <TT><IMG></TT> tag, as we said before, is used to include apicture. The picture must be either an X bitmap, or a GIF file. The <TT>SRC</TT> attribute is used to specify the location of the picture. The filenames of X bitmaps must end with the extension <TT>.xbm</TT> and GIF filenames must end in <TT>.gif</TT>. If you had a GIF file called <TT>me.gif</TT>, and you wanted to include it in your document, you couldput it in the same directory where the document is located, and use thetag <TT><IMG SRC="me.gif"></TT>. The <TT>ALT</TT> attribute specifiesa string to be printed if a browser cannot display pictures. <P> Now that you know what the elements do, you should figure out what you want to say (the hard part), and then use the tags and text to create the "look" you want. Remember that you can preview what you create in Mosaicas you go along by saving the document and clicking the <EM>Reload</EM>button.<P> Every night, every page that matches the pattern <TT>~<EM>username</EM>/public/html/<EM>username</EM>.html</TT> is mappedinto the master list of <!WA3><!WA3><!WA3><!WA3><!WA3><!WA3><!WA3><!WA3><!WA3><!WA3><A HREF="http://www.cs.wisc.edu/directories">home pages</A>.<P> <H2>Step 8: Read the other <!WA4><!WA4><!WA4><!WA4><!WA4><!WA4><!WA4><!WA4><!WA4><!WA4><A HREF="http://www.cs.wisc.edu/docs/">documents</A>.</H2><P> You don't have to read them now, but before you do more work with HTML or the server you should get the complete description of how they work. In particular, read the <!WA5><!WA5><!WA5><!WA5><!WA5><!WA5><!WA5><!WA5><!WA5><!WA5><A HREF="http://www.cs.wisc.edu/docs/htmltutorial.html">HTML document</A>. Using Mosaic to test your HTML forcorrectness can leave your documents looking pretty in Mosaic, and non-sensical in other browsers.</BODY></HTML>⌨️ 快捷键说明
复制代码Ctrl + C
搜索代码Ctrl + F
全屏模式F11
增大字号Ctrl + =
减小字号Ctrl + -
显示快捷键?