Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Course Structure Unit 1. The World Wide Web 1.1 Using the Web 1.2 What's in the Web 1.3 Writing Web Pages The World Wide Web 1 What is Internet? Internet is a computer network that connects millions of computers across a number of countries World Wide Web refers to that portion of the computers on the Internet that can communicate with each other using a computer-network protocol called HTTP ISP (Internet Services Provider) is a company that provides access to the Internet The World Wide Web 2 Client and Server In a client-server setup, a client application ( e.g. use browser to view Web pages ) requests information from a server application (e.g. a Web page you wish to view) A Web site exists on a computer (a server) that has a Web address The World Wide Web 3 URL A Web address is also known as a URL (Uniform Resource Locator) A URL specifies the location of a Web site (or of a page within the site), and a URL usually begins with an element that identifies the communication protocol to be used to access the file the URL identifies In URLs, a protocol identifier is followed by a colon (":"), a pair of slashes ("//"), and then the name of the server, such as www.cityu.edu.hk The World Wide Web 4 Communication Protocol A communication protocol is a generally agreed upon set of standards and rules that machines follow when they communicate with each other. The most common protocol identifier found in URLs is http (HyperText Transfer Protocol) Other protocol identifiers are file and ftp, etc. The World Wide Web 5 Search Engine A search engine is a program that allows one to search for keywords in files at one or more Internet sites. Users can search the Web efficiently for documents and pages containing specific words or phrases, & the results of such a search is a list of Web pages the engine has found (referred to as "hits"), arranged in order of decreasing relevance How to Search? => section 1.1.4 The World Wide Web 6 Types of Search Sites Sites that feature a search engine : it maintains indexes or databases of the addresses (updated regularly and automatically) of virtually all of the pages and documents on the Web Sites that feature a Web directory : is a Web directory similar to a telephone directory, in that it organizes information available on the Web into different categories & subcategories Popular search engines include Yahoo, Lycos, Excite, and Altavista The World Wide Web 7 Commerce on the Web Internet Services Providers (ISPs) Advertising Commercial Transactions The World Wide Web 8 Hypertext Hypertext is a non-sequential information, consisting of linked pieces of text or other media joined together by a network. The hypertext reader navigates through the network of information through a nonlinear path, choosing when to follow a link The World Wide Web 9 HTML It stands for HyperText Markup Language Web browsers allow us to view Web pages, “written” in HTML (a formatting language) HTML consists of special formatting notation, called tags, that tell the browser how to display a Web page’s content Files contain .html or .htm extension The World Wide Web 10 Tags in HTML Each tag is enclosed inside a pair of angle brackets (“<“ and “>”) Some (but not all) tags come in beginning and ending pairs that follow the syntax <TAGNAME> and </TAGNAME> The World Wide Web 11 The Main Components <HTML> <HEAD> <TITLE> My First Web Page </TITLE> </HEAD > <BODY> </BODY> </HTML> The World Wide Web 12 Physical style tags It tells browsers to use certain font styles <B> </B> Bold <I> </I> Italics <TT> </TT> Monospace(fixed width) <U> </U> Underline <SUB> </SUB> Subscript <SUP> </SUP> Superscript The World Wide Web 13 Example of Physical style tags … <BODY> This is <B>bold</B> <BR> This is <U>underlined</U> <BR> This is <SUB>Subscript</SUB><BR> </BODY> </HTML> see example The World Wide Web 14 Logical Style tags It allows browsers to decide how to display the text <EM> </EM> Emphasized text <STRONG> /STRONG> Strongly emphasized text <CITE> </CITE> Text in citation <SAMP> /SAMP> Text in a computer screen output sample The World Wide Web 15 Example of Logical Style tags … <BODY> This is <STRONG> strongly emphasized text </STRONG> </BODY> </HTML> see example The World Wide Web 16 Size and Color tags the RGB (Red, Green, Blue) value : RRGGBB To set the background color : <BODY BGCOLOR = RED> or <BODY BGCOLOR = “#FF0000”> To set the font color : <FONT COLOR = RED> <FONT COLOR = “#FF0000”> or To set the font size, range from 1 (smallest) to 7 (largest) : <FONT SIZE = 7> see example The World Wide Web 17 Named Color Color name aqua black blue fuschia gray green lime maroon RGB value #00FFFF #000000 #0000FF #FF00FF #808080 #008000 #00FF00 #800000 Color name navy olive purple red silver teal white yellow The World Wide Web RGB value #000080 #808000 #800080 #FF0000 #C0C0C0 #008080 #FFFFFF #FFFF00 18 Background Image To set the background images : <BODY BACKGROUND = “factilea.jpg”> file name of the image see example The World Wide Web 19 Headings & Preformatted Text Seven levels of heading tags, range from 1 (largest) to 7 (smallest) <H1> This is Heading 1 text </H1> You can make browsers use the formatting you designate by using the PRE (preformatted) tag : <PRE> …… </PRE> see example The World Wide Web 20 Horizontal Lines Create horizontal lines using the <HR> tag The appearance can be adjusted by SIZE, WIDTH and ALIGN <HR SIZE=5 WIDTH=75 ALIGN=CENTER> WIDTH can be a number (in pixels) or a percentage (the width relative to the page) An extra attribute – NOSHADE – indicate a plain line with no shade see example The World Wide Web 21 Lists Two kinds of Lists : ordered lists (or numbered) and unordered lists Ordered Lists : <OL> <LI> Item 1 <LI> Item 2 <LI> Item 3 </OL> Unordered Lists : <UL> <LI> Item 1 <LI> Item 2 <LI> Item 3 </UL> see example The World Wide Web 22 Paths Paths are the addresses of the locations of a computer or the address of a document or file we want to include in our Web page A Uniform Resource Locator (URL) gives the location of a file on the WWW and also identifies the Internet services, such as FTP or the WWW, that will handle the file Protocol Network Location Path File Name http://personal.cityu.edu.hk/dco10101/index.html The World Wide Web 23 Example of Paths http://www.microsoft.com/products/product1.html www.microsoft.com products product1.html name of Web Server with the last segment adhere to the DNS (Domain Name System), e.g. .com, .edu, .gov, .net, .org the directory hierarchy from the server level to the directory in which the file is located the actual file or document to be retrieved The World Wide Web 24 Absolute & Relative Paths Absolute path : is one where the complete path is specified use whenever the file you want to access is not in a local subdirectory Relative path : specifies a location that is relative to the current location of the file containing the link Use whenever the file you want to access is in the same directory as the file containing the link The World Wide Web 25 Links in HTML Use the anchor tags (<A HREF> </A>) to create link in HTML Example of Relative Path : <A HREF="FA.html"> Freshman Advisor</A> Example of Absolute Path : <A HREF="http://www.carnegietech.org"> Carnegie Technology Education</A> see example The World Wide Web 26 Internal Links To create links to other places in the same page : <A NAME="office"> Section of Jim's Office </A> …… …… <A HREF="Jim.html#office"> Click to Jim’s Office </A>. see example The World Wide Web 27 Embedding image Use the IMG (Image) tag to embed image to the HTML page <IMG SRC="jim.jpg" ALIGN="left"> Extra attributes : HEIGHT, WIDTH and ALT (is used to provide alternative text for browsers that don’t support images, or for people who have image loading turned off) * You can provide a relative or an absolute path for the image to be embedded see example The World Wide Web 28 Tables in HTML Tables can be used to display tabular data <TABLE> <TR><TH> column 1 name </TH> <TH>column 2 name </TH> </TR> <TR><TD> row1, col1 data </TD> <TD>row1, col2 data </TD> </TR> <TR><TD> row2, col1 data </TD> <TD>row2, col2 data </TD> </TR> <TR><TD> row3, col1 data </TD> <TD>row3, col2 data </TD> </TR> </TABLE> <TR> : table row, <TH> : table header, <TD> : table data The World Wide Web see example 29 Tables in HTML Some other attributes to be used in table : <ALIGN> <CAPTION> <BACKGROUND> <BORDER> <BORDERCOLOR> <BGCOLOR> etc. see example The World Wide Web 30 Images in Internet GIF JPEG PNG 8-bits 24-bits 8-bits, 24-bits or 32-bits Compression Lossless Lossy Lossless Support Y transparency N Y Support animation N N Color Depth Y The World Wide Web 31 CityU’s personal web server The University Personal Web Server (http://personal.cityu.edu.hk/) is intended to let all staffs and students of CityU to put up their own personal Web pages In order to use this service, you should have a valid UNIX account in the Computing Services Centre Detailed User Guide : http://personal.cityu.edu.hk/UserGuide/ The World Wide Web 32 Web page creation process Define the Web page content Plan the look of the page and the links needed Implement the Web page by writing it incrementally in small steps Evaluate the Web page (correctness and appearance) The World Wide Web 33