WWW homepage production experiment
1. The purpose of the experiment
1 Understand and master the composition of WWW server;
2 Learn the format and use of HTML language;
3 Understand the new technologies used by WWW network services.
Second, preliminary knowledge
1. Introduction to WWW The background of WWW is Inetrnet. In a nutshell, WWW is an interactive graphical hypertext information system based on Inetnet, globally connected, distributed, dynamic, and multi-platform. It uses a variety of protocols to transmit and display multimedia information sources residing on computers around the world, together with the WWW server to provide Inernet with a "distributed client / server" operating environment.
WWW network is composed of three parts, namely server, browser and communication protocol. The browser is a window to the WWW network used by each end user. The browser is used to process the user's request for the document. It connects the remote information source in a certain way and retrieves the required information from it, which is displayed on the user's screen. The WWW web server is responsible for providing the required services to the browser. When it establishes a connection with a browser, it listens to the request from the browser and transmits the required information to the browser. The ones taken out may also be put together temporarily (such as a series of query results).
WWW network can use different data transmission protocols to obtain information. When browsers interact with WWW network servers, they use the WWW network's own protocol—HyperText Transfer Protocol (HTTP). In addition to HTTP, the browser can also exchange data with other servers that use other protocols, including:
FTP is the file transfer protocol, which is the oldest and most widely used file transfer method on the Internet.
Gopher: This is a campus network information transmission protocol initiated by the University of Minnesota.
NNTP: This is the message reading and sending protocol used by the Usenet message group.
WAIS: This is a document query and acquisition protocol created by ThinkingMachines.
Telnet: This is a traditional communication protocol based on character devices.
SMTP: This is an electronic information protocol used by e-mail.
The WWW web page is the basic unit of WWW web information organization. To function on WWW pages, there must be a language that can support these functions. This language is the Hypertext Markup Language (WWW) HTML (HyperText Markup Language). Authors of WWW pages must write their own pages in this language.
2. Introduction of HTML language HTML (HyperText Markup Language) is a special language on WWW (World Wide Web). All Web documents accessed by readers, as well as every piece of information seen on a Web browser, are based on HTML language. It is the basis for using the Internet and is a part of HTTP (HyperText Transfer Protocal Hypertext Transfer Protocol).
HTML files are simple plain text files (full ASCII files), and use the .html (or .htm) extension in the MIME (MulTIpurpose Internet Mail Extensions). Its main feature is the HTML tag in the text. The advantage of HTML language is that the annotation is simple and clear, and the function is powerful. You can define the display format, title, font, table, window, etc. of the file; super-connect with any information on WWW; use auxiliary applications to connect to multimedia materials such as images, videos, and audio. The HTML language also has certain limitations, as shown in the following: the author can only choose the font of the web resource, the typesetting function is not very strong; ignore the spaces and natural format, the paragraph must be specified; the display is different in different hardware environments.
HTML language is the operating language on WWW. All operations of readers on the Web (including organizing files, establishing connections, publishing messages, etc.) rely on HTML language to complete. For the introduction of the labeling commands in HTML language, please refer to the relevant parts in the appendix of the experimental lecture notes or read the relevant documents directly on the campus network.
3. HTML page production When writing HTML documents using a general editor, users only need to write the text and tags into the document at the same time. However, this original editing method is not straightforward and is prone to errors. Recently, many HTML editors have appeared, providing a "what you see is what you get" (WYSIWYG) editing style, and using the mouse to select tags, which reduces the workload of tag input, and some also provide HTML format check functions. For example, "FrontPage Express" is provided in this laboratory.
In addition, there are many document format conversion tools that can convert a non-HTML document into an HTML document. The types of documents that can currently be processed are: Microsoft Word / RTF, WordPerfect, FrameMak-er, LaTex, BibTex, TexInfo, Troff, QuarkXPress, Page-Maker, etc.
Students should familiarize themselves with the format of the HTML document before preparing their WWW homepage, and prepare materials for their homepage. At the same time understand the latest WWW technologies, such as CGI, Java, Java Script, Tcl / Tk Script, network database technology, AcTIveX, ASP and so on. Prepare to use your own technology on your homepage.
3. Experimental requirements
1. Create your own personal homepage;
2. Embed various media files (sound, pictures, animation, etc.) in the homepage;
3. Use hyperlinks in the homepage.
4. Summarize Experiment 1, Experiment 2, and Experiment 3 in the homepage file.
Four, thinking questions
1. Briefly describe the structure and working principle of the WWW server.
2. Introduce the characteristics and uniqueness of your personal homepage.
3. Introduce the new technology you are using.
Appendix HTML Tutorial 1. The structure of HTML language html file is a standard ASCII file, it looks like a universal text file with many special character strings called link tags. Structurally, an html file is composed of elements. There are many kinds of elements that make up an html file, which are used to organize the content of the file and guide the output format of the file. The vast majority of elements are "containers", that is, they have a start tag and an end tag. The start tag of an element is called a start tag, and the end tag of an element is called an end tag. The part in the start tag and the end tag is the element body. Each element has a name and optional attributes. The name and attribute of the element are indicated in the initial link tab.
In fact, the html file consists of only one html element, that is, the file Start with At the end, part of the file is the html element body. The element body of the html element consists of two parts, namely the head element
.. Body element … And some notes. The element body of the head element and body element is composed of other elements and text and comments. In other words, an html file should have the following structure:html file start
File header startFile header
End of file header
File body start
File body
End of file
end of html file
Second, the basic elements of web pages
1. Title (TITLE)
The TItle element is the only element that must appear in the file header, and it can only appear in the file header. The format of the title element is:
The title indicates the title of the html file and is a summary of the content of the file. A good topic should enable the reader to judge the approximate content of the document. The title of the file is generally not displayed in the text window, but displayed in the name of the window. In addition to the logo window, when a homepage is stored in a bookmark or file, the title is also used as the book signature or the default file name. Here is a simple html file
This is my first html file.
2. Title (hn)
There are 6 kinds of title elements, namely h1, h2, ... h6, which are used to represent various topics in the article. The smaller the title number, the larger the font. In general, the browser interprets the title as follows:
h1 bold, large font, centered, with two blank lines above and below.
h2 bold, large font, one or two blank lines above and below
hn may have an alignment attribute, align = #, # means: left heading is left; center heading is centered; right heading is right. example:
Chapter 2
3. Segmentation
HTML browsers are based on windows, and users can change the size of the display area at any time, so HTML treats multiple spaces and carriage returns as one space, which is different from most word processors. HTML segmentation is completely dependent on the segmented element
.
There can also be multiple attributes, the more commonly used attributes are:
aligh = #, # can be left, center, right, the meaning is the same as above.
example
This is a centered paragraph </ p> When there is a graphic in the html file, the graphic may occupy one end of the window, and there may be a large blank area around the graphic. At this time, without the clear attribute
The content of the article may be displayed in the blank area. To ensure that the next paragraph of content is displayed below the graph, use the clear attribute. The meaning of the clear attribute is:
clear = left The next paragraph shows the blank area at the left border
clear = right The next paragraph shows a blank area at the right border
clear = all The left and right sides of the next paragraph must not have anything else
4. List
Lists are used to list facts. Commonly used lists have three formats, namely unordered list, ordered list, and definition list.
Unordered lists start with (ul), each list entry uses
- To start, list items are used
- Guide, its description is used
- guide.
3. Hypertext link pointer Hypertext link pointer is one of the most attractive advantages of html. The use of hypertext link pointers can make the files stored in sequence have the ability of random access to a certain extent, which is more in line with human thinking. Human thinking is jumping and crossing, and each link pointer just represents the jumping of thinking of the author or reader. Therefore, a well-organized link pointer can not only make the reader skip chapters that he is not interested in (such as some boring data), but also help to better understand the author's intentions.
A hypertext link pointer consists of two parts. One is the target that is pointed to. It can be another part of the same file, a file at the other end of the world, or animation or music; the other part is the link pointer to the target.
1. Uniform Resource Locator Uniform Resource Locator (uuiform Resource Locator) is an extension of the file name. In a stand-alone system, locating a file requires a path and a file name. For the Internet network spreading all over the world, it is obviously necessary to know which host of which network the file is stored on. Unlike the stand-alone system, in the stand-alone system, all files are managed by a unified operating system, so there is no need to give a method to access the file; and on the Internet, each network, the operating system of each host is different , So you must specify how to access the file. One contains all the above information. Its composition is: protocol: // machine.name [: port] ï¼ directory ï¼
filename where protocol is the protocol used to access the resource, that is, the method of accessing the resource, which can be:
http Hypertext Transfer Protocol, the resource is an html file
file File transfer protocol, use ftp to access the resource
ftp file transfer protocol, use ftp to access the resource
gopher gopher protocol, the resource is a gopher file
news indicates that the resource is online news
Similar to the concept of absolute path and relative path in stand-alone systems, the uniform resource locator also has absolute and relative points. The above is absolute. Relative is relative to your most recent visit. For example, if you are viewing a file that is http: //, if you want to view another file china.html in the same directory, you can directly use china.html, then china.html is a relative, and its absolute is http : //.
2. Point to a target <br> Use a link pointer to point to a target in the html file. The basic format is: the uniform resource locator () in the href attribute of the string is the target, and the subsequent "string" acts as a pointer in the html file, which is generally displayed in blue. When the reader clicks the string with the mouse, the browser will display the resource on the screen. E.g:
IHEP CHINA homepage users can click the IHEP china homepage with their mouse to see the introduction about China prepared by High Energy. In this example, it is the IHEP china homepage that acts as a pointer. Below we will see examples of using images as pointers.
When writing html files, you need to know the target. How can we get the goal? For a file in its own host, it can be determined according to the actual situation of the file. For the resource on Interner, when we use the browser to view it, it will be displayed in the location column of the browser, copy it down and write it into your html file.
When writing html files, you should use relative to a group of resources that can determine the relationship (such as in the same directory), which not only simplifies your html file, but also facilitates maintenance. For example, when you need to move a certain directory to another place or move a host's resources to another host, use the relative written html file to update the content without looking (only
To their relative relationship has not changed). But if you write HTML in absolute terms, you will have to modify each link pointer verbatim, which is a tedious and error-prone task. There is no fixed relationship between various resources. For example, your html file introduces the situation of various universities. The targets it points to are distributed in the global hosts. At this time, you can only use absolute.
At the end of this chapter, the author gives a complete html file, which uses all the elements introduced in the previous three chapters to make it easier for the reader to understand.
3. Mark a target The link pointer mentioned in the previous section allows readers to easily link across the entire Interner network. But if you write a very long html file, it is a waste of time to read it from beginning to end. Can you also establish a link between different parts of the same file, so that users can easily jump between the top and bottom? The answer is yes. As mentioned earlier, a hypertext link pointer consists of two parts, a link pointer to the target and the other to the target. For a complete file, we can use it to uniquely identify it, but for different parts of the same file, how do we identify it? The following content will introduce another use of link pointer elements to identify targets.
The method for identifying a target is:
The name attribute marks the place where the mark is placed as "name". Name is a unique mark string for the full text, and the text part is optional. In this way, we made a mark called "name" where the mark was placed.
After making a mark, you can use the following methods to point to it,
The name of the HTML file where the tag is placed is the tag name. For the same file, it can be written as
At this time, you can click on the text to jump to the part named name.
4. Target window If you want the target to be displayed in a new window, you can use the target attribute to modify the link pointer element. Text displays the resource represented in a new window, the window name is window-name.
5. Image link pointer The image can also be used as a link pointer. The format is:
. It can be seen that the above example uses
Replaced the position of text in the link pointer.
It is an image element, which indicates that the image file to be represented is displayed, see chapter Image.
The following is a simple image link pointer.
Four, layout style control
1. Font font size HTML has seven font sizes, with the smallest number 1 and the largest number 7. The default font size is 3, you can useToday is fine! Today is fine!
Today is fine! Today is fine!
Font style The font style is divided into physical style and logical style. The physical style directly specifies the font. The physical style fonts include bold, italic, underline, and typewriter body. The logical style specifies the role of the text.
Emphasize
Special emphasis æºä»£ç 例å键盘输入å˜é‡å®šä¹‰å¼•ç”¨ 较å°è¾ƒå¤§ä¸Šæ ‡ä¸‹æ ‡ç‰©ç†é£Žæ ¼Today is fine! Today is fine!
Today is fine! Today is fine!
Today is fine! Today is fine!
Today is fine! Today is fine!
Font color The color of the font can be specified with ##, which can be 6-bit hexadecimal, specifying the values ​​of red, green, and blue respectively, or black, olive, teal, red, blue, maroon, navy, gray, lime, fudrsia, white , Green, purple, sliver, yellow, aqua.
Make the text flash, the flashing frequency is once per second.
2. The line-to-line image between the image lines makes your page more beautiful, but the line-to-line image will cause a sharp increase in network traffic. Make the access time longer. Therefore, it is not appropriate to use a large image on the homepage. If you do need some large images, it is best to use a reduced image on the homepage to point to the original image and indicate the size of the image. In this way, readers can quickly access your homepage and choose to see or not see those images. The basic format of the image is:
or
image-is an image file. Currently, most browsers support .gif and .xbm files, and Netscape also supports jpeg files. The alt attribute tells browsers that do not support images to replace the image with text.
The alignment of the image and the text The image will occupy a space in the window, and there may be blanks on the left and right of the image. Without explanation, the browser will display the subsequent text in these blanks, and the displayed position is determined by the align attribute Specify. When using align = left, righr, the image is a floating image. For example, align = left, the image must be next to the left border, it "squeezes away" the text that originally occupied the blank, or to the right, or above and below it. The space between the text and the image is specified by vspace = #, hspace = #, # is an integer, and the unit is a pixel. The former specifies the vertical space, and the latter specifies the horizontal space.
3. The back and text color window background can be specified in the following ways
The former specifies an image that fills the background. If the size of the image is smaller than the window size, the background image is repeated until the window area is filled. The latter specifies the red, green, and blue components in hexadecimal.
bgcolor background color
Text text color
Link pointer color
Link pointer color for alinik activities
Link pointer color that vlinik has visited
Example Red background color.
Note that the body element must be written completely at this time
V. Table
1. The basic form of a tableStart,
End, the contents of the table by, with definition. Explain one row of the table, as many as there are rows in the table ; Explain the number of rows in the table and the name of the corresponding column, as many columns as there are ; Then fill by with Composed table. Whether to use table lines to separate for partial content The border attribute indicates that the following is a table with a table line and a meta-table line and its output.
2. The size of the table, the width of the border, and the spacing between the tables. 1. The size of the table is described by the attributes width = # and height = #. The former is the table width, the latter is the table height, # is an integer in pixels.
2. The border width is specified by border = #, # is the width value, and the unit is pixel.
3. The table spacing is the thickness of the line dividing the table, expressed by cellspacing = #. The unit of # is pixel. The following example defines the table spacing as 10 pixels, which looks like a table divided by a very thick line.
3. The output of the text in the table
1. The distance between the text and the table frame is explained by cellpadding = #. The following example separates the contents of the table from the table frame by 10 pixels.2. When the back degree of the table is greater than the back degree of the text in it, the output position of the text in it is explained with align = #.
# Is one of left, center and right, which means left alignment, center and right alignment, align attribute can be modified
, with Link check. 3. When the height of the table is greater than the height of the text, you can use valign = # to indicate the position of the text. # Is one of the top, middle, bottom, and baseline. Respectively indicate top alignment, text center line is aligned with table center line, bottom alignment, text baseline is aligned with table center line, special attention is to baseine alignment, which makes text appear above the grid rather than the lower half of the like. Similarly, valign can be modified
, , Any of them. Sixth, frame
1. The basic format of frame division The frame division divides the window of the browser into multiple areas. Each area can display an html file separately, and each area can also display a certain content in a related manner. For example, you can put the index in one area , The file content is displayed in another area.The basic structure of boxing is as follows
... ... The content in is displayed in a browser window that does not support framed frames, so here points to a normal version of the html file for users who do not support framed browsers to read. Framed by