Introduction - Personal Web Server

Transcript Introduction - Personal Web Server

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
 
Bold
 
Italics
<TT> </TT>
Monospace(fixed width)
 
Underline
 
Subscript
 
Superscript
The World Wide Web
13
Example of Physical style tags
…
<BODY>
This is bold 
This is underlined 
This is
Subscript 
</BODY>
</HTML>
see example
The World Wide Web
14
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
The World Wide Web
15
Example of Logical Style tags
…
<BODY>
This is strongly
emphasized text 
</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 :


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

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

Introduction - Personal Web Server

Transcript Introduction - Personal Web Server

Directory