The World Wide Web 1 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

Course StructureUnit 1. The World Wide Web

1.1 Using the Web 1.2 What's in the Web 1.3 Writing Web Pages


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


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


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


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.


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


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


Commerce on the Web Internet Services Providers (ISPs) Advertising Commercial Transactions


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


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


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 Main Components<HTML>

<HEAD> <TITLE>

My First Web Page </TITLE>

</HEAD > <BODY> </BODY>

</HTML>


Physical style tagsIt tells browsers to use certain font styles

 Bold

 Italics

<TT> </TT> Monospace(fixed width)

 Underline

 Subscript

 Superscript


Example of Physical style tags…

<BODY> This is bold This is underlined This is Subscript 

</BODY>

</HTML>

see example


Logical Style tags It allows browsers to decide how to display

the text

 Emphasized text

 /STRONG> Strongly emphasized text

<CITE> </CITE> Text in citation

<SAMP> /SAMP> Text in a computer screen output sample


Example of Logical Style tags

…<BODY>

This is strongly emphasized text

 </BODY> </HTML>

see example


Size and Color tagsTo set the background color :

<BODY BGCOLOR = RED> or<BODY BGCOLOR = “#FF0000”>

To set the font color : or

To set the font size, range from 1 (smallest) to 7 (largest) :

see example

the RGB (Red, Green, Blue) value : RRGGBB


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


Background ImageTo set the background images :

<BODY BACKGROUND = “factilea.jpg”>

see example

file name of the image


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


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


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


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


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


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


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


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


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


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


Tables in HTMLSome other attributes to be used in table :

<ALIGN>

<CAPTION>

<BACKGROUND>

<BORDER>

<BORDERCOLOR>

<BGCOLOR>

etc.see example


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


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/


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

Documents

The World Wide Web 1 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