View
215
Download
1
Category
Preview:
Citation preview
The World Wide Web 1
Course StructureUnit 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 2
What is Internet?Internet is a computer network that connects millions of computers across a number of countriesWorld Wide Web refers to that portion of the computers on the Internet that can communicate with each other using a computer-network protocol called HTTPISP (Internet Services Provider) is a company that provides access to the Internet
The World Wide Web 3
Client and ServerIn 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 4
URLA 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 identifiesIn 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 5
Communication ProtocolA 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 6
Search EngineA 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 relevanceHow to Search? => section 1.1.4
The World Wide Web 7
Types of Search SitesSites 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 WebSites 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 & subcategoriesPopular search engines include Yahoo, Lycos, Excite, and Altavista
The World Wide Web 8
Commerce on the Web Internet Services Providers (ISPs) Advertising Commercial Transactions
The World Wide Web 9
HypertextHypertext 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 10
HTMLIt 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 11
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 12
The Main Components<HTML>
<HEAD> <TITLE>
My First Web Page </TITLE>
</HEAD > <BODY> </BODY>
</HTML>
The World Wide Web 13
Physical style tagsIt 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 14
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 15
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 16
Example of Logical Style tags
…<BODY>
This is <STRONG> strongly emphasized text
</STRONG> </BODY> </HTML>
see example
The World Wide Web 17
Size and Color tagsTo set the background color :
<BODY BGCOLOR = RED> or<BODY BGCOLOR = “#FF0000”>
To set the font color :<FONT COLOR = RED> or<FONT COLOR = “#FF0000”>
To set the font size, range from 1 (smallest) to 7 (largest) :
<FONT SIZE = 7>see example
the RGB (Red, Green, Blue) value : RRGGBB
The World Wide Web 18
Named ColorColor name RGB value Color name RGB value
aqua #00FFFF navy #000080
black #000000 olive #808000
blue #0000FF purple #800080
fuschia #FF00FF red #FF0000
gray #808080 silver #C0C0C0
green #008000 teal #008080
lime #00FF00 white #FFFFFF
maroon #800000 yellow #FFFF00
The World Wide Web 19
Background ImageTo set the background images :
<BODY BACKGROUND = “factilea.jpg”>
see example
file name of the image
The World Wide Web 20
Headings & Preformatted TextSeven 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 21
Horizontal LinesCreate 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 22
ListsTwo 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 23
PathsPaths 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
http://personal.cityu.edu.hk/dco10101/index.html
Protocol Network Location Path File Name
The World Wide Web 24
Example of Pathshttp://www.microsoft.com/products/product1.html
www.microsoft.com name of Web Server with the last segment adhere to the DNS (Domain Name System), e.g. .com, .edu, .gov, .net, .org
products the directory hierarchy from the server level to the directory in which the file is located
product1.html the actual file or document to be retrieved
The World Wide Web 25
Absolute & Relative PathsAbsolute path :
is one where the complete path is specifieduse 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 linkUse whenever the file you want to access is in the same directory as the file containing the link
The World Wide Web 26
Links in HTMLUse 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 27
Internal LinksTo 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 28
Embedding imageUse 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 embeddedsee example
The World Wide Web 29
Tables in HTMLTables 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 datasee example
The World Wide Web 30
Tables in HTMLSome other attributes to be used in table :
<ALIGN>
<CAPTION>
<BACKGROUND>
<BORDER>
<BORDERCOLOR>
<BGCOLOR>
etc.see example
The World Wide Web 31
Images in InternetGIF JPEG PNG
Color Depth 8-bits 24-bits 8-bits, 24-bits or 32-bits
Compression Lossless Lossy Lossless
Support transparency
Y N Y
Support animation
Y N N
The World Wide Web 32
CityU’s personal web serverThe 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 pagesIn order to use this service, you should have a valid UNIX account in the Computing Services CentreDetailed User Guide : http://personal.cityu.edu.hk/UserGuide/
The World Wide Web 33
Web page creation process
Evaluate the Web page (correctness and appearance)
Implement the Web page by writing it incrementally in small steps
Plan the look of the page and the links needed
Define the Web page content
Recommended