ICE0534 – Web-based Software Development ICE1338 – Programming for WWW - Summer 2005 - Lecture #2 In-Young Ko iko .AT.
Download ReportTranscript ICE0534 – Web-based Software Development ICE1338 – Programming for WWW - Summer 2005 - Lecture #2 In-Young Ko iko .AT.
ICE0534 – Web-based Software Development
ICE1338 – Programming for WWW
- Summer 2005 -
Lecture #2
In-Young Ko
iko .AT. icu.ac.kr
Information and Communications University (ICU)
Announcements
Send the TA an email about your
information
Select the topic for the individual
presentation
Homework #2: Read the articles about Dr.
Raj Reddy and generate questions to ask
him
Summer 2005
ICE 0534/ICE1338 – WWW
© In-Young Ko, Information and Communications University
2
This Lecture
WWW Concepts
Internet & HTTP
Client-side Information Presentation
HTML
Cascade Style Sheets (CSS)
Summer 2005
ICE 0534/ICE1338 – WWW
© In-Young Ko, Information and Communications University
3
The Origin of the Web
“Information Management: A Proposal”
Tim Berners-Lee,
1989
A proposal to build
a global hypertext
system for CERN
www.w3.org/History/1989/proposal.html
Summer 2005
ICE 0534/ICE1338 – WWW
© In-Young Ko, Information and Communications University
4
WWW Concepts
www.w3.org/Talks/General/Concepts.html
1. Universal Readership
Different terminals to access
different machines
Different document formats
for different machines
Different programs to access
data
Summer 2005
ICE 0534/ICE1338 – WWW
One terminal (client) to access
different machines
One document format: HTML
One type of program to
access data: Web browsers
© In-Young Ko, Information and Communications University
5
WWW Concepts
2. Hypertext
Text with links – e.g., footnotes,
bibliographies
Each document has its own
address called URI (Uniform
Resource Identifier)
Summer 2005
ICE 0534/ICE1338 – WWW
c.f., URL (Uniform Resource Locator)
All documents are written in
HTML (Hypertext Markup
Language)
Documents are connected via
Anchors and Links
© In-Young Ko, Information and Communications University
6
WWW Concepts
3. Searching
Summer 2005
ICE 0534/ICE1338 – WWW
Web documents are
indexed by search
engines
Text-based search by
sending keywords to a
search engine
© In-Young Ko, Information and Communications University
7
WWW Concepts
4. Client-Server Model
Summer 2005
ICE 0534/ICE1338 – WWW
No central control
Anybody can publish
information on a server
Anyone can read
information by using a
client
All clients and servers are
connected via Internet
Use of a common protocol,
HTTP (Hypertext Transfer
Protocol)
© In-Young Ko, Information and Communications University
8
Web vs. Internet
Web: A collection of software and
protocols for exchanging multimedia
data on the Internet
Protocols: HTTP, HTTPS, …
Addressing: URI (URL)
Programs: Web browsers, Web servers
Data Types: HTML, Images, Music, …
Internet: A collection of computers
connected in a communications
network
http://www.people.virginia.edu/~lah8v/DCE/Buckingham/resources/Internet.ppt
Summer 2005
ICE 0534/ICE1338 – WWW
Protocols: TCP/IP (Transmission Control
Protocol / Internet Protocol)
Addressing: Domain names, IP addrs
Naming server: DNS
Applications: SMTP, FTP, Telnet,…
© In-Young Ko, Information and Communications University
9
The Growth of the Internet
1969 – ARPA Net
4 Nodes
A Map of the Internet
(UCLA, SRI, UCSB, U of Utah)
January 2004
233,101,481 Nodes
www.isc.org/index.pl?/ops/ds/
Summer 2005
ICE 0534/ICE1338 – WWW
www.opte.org/maps
© In-Young Ko, Information and Communications University
10
Internet Addresses
Domain Names
Domain: a collection of machines (hosts)
Name structures
US; Host name . Domain . Organization
Others; Host name . Domain . Organization . Country
e.g., www.w3.org, www.icu.ac.kr
IP (Internet Protocol) Addresses
e.g., 210.107.128.25, 18.7.14.127
Internet Corporation
For Assigned Names
and Numbers
http://www.iana.org/
Summer 2005
ICE 0534/ICE1338 – WWW
http://www.icann.org/
© In-Young Ko, Information and Communications University
11
IP Address Classes
Class A
Initial byte: 128 – 191
16,384 classes
65,532 hosts / class
Class C
Summer 2005
23
31
10
23
15
7
0
Initial byte: 0 – 127
Net. Addr.
Host Address
126 classes
e.g., 18.7.14.127 (W3C)
16,777,214 hosts / class
Class B
31
0
Initial byte: 192 – 223
2,097,152 classes
254 hosts / class
ICE 0534/ICE1338 – WWW
15
Net. Addr.
7
0
Host Address
e.g., 129.42.16.99 (IBM)
31
1 10
23
15
Network Address
7
0
Host Addr.
e.g., 210.107.128.25 (ICU)
© In-Young Ko, Information and Communications University
12
IPv6
Internet Protocol Version 6
The next generation protocol designed by
the IETF (Internet Engineering Task Force)
New features (compared to IPv4)
128-bit address space
Built-in security
Support for QoS (Quality of Service)
Support for multicasting
http://www.ipv6.org/
Summer 2005
ICE 0534/ICE1338 – WWW
© In-Young Ko, Information and Communications University
13
IP Datagram Header Format
Summer 2005
ICE 0534/ICE1338 – WWW
© In-Young Ko, Information and Communications University
14
Internet Packet Routing
Pictures are from http://grc.com/dos/PacketRouting.htm
Summer 2005
ICE 0534/ICE1338 – WWW
© In-Young Ko, Information and Communications University
15
‘Whois’ Server
Summer 2005
ICE 0534/ICE1338 – WWW
© In-Young Ko, Information and Communications University
16
Tracing the Route
Domain Name:
www.shrek2.com
IP Address:
69.28.176.21
Summer 2005
ICE 0534/ICE1338 – WWW
© In-Young Ko, Information and Communications University
17
Tracing the Route
C:\>tracert www.shrek2.com
Daejon
Tracing route to
drmwrks.vo.llnwd.net[69.28.176.21]
1
2
3
4
5
6
7
8
9
10
11
2
15
14
16
16
15
162
164
164
197
165
ms
ms
ms
ms
ms
ms
ms
ms
ms
ms
ms
4
14
15
15
16
15
162
165
183
164
164
ms
ms
ms
ms
ms
ms
ms
ms
ms
ms
ms
3
14
24
16
14
16
179
163
163
165
164
ms
ms
ms
ms
ms
ms
ms
ms
ms
ms
ms
210.107.250.1
61.74.147.1
211.196.201.45
220.73.170.189
220.73.151.54
211.216.216.90
211.48.63.206
198.32.176.164
63.223.1.5
63.223.3.90
69.28.176.21
Bundang
EP.NET
CA, USA
CAIS Internet
VA, USA
Trace complete.
AZ, USA
Summer 2005
ICE 0534/ICE1338 – WWW
© In-Young Ko, Information and Communications University
18
RFCs (Request for Comments)
“A set of technical and organizational
notes about the Internet”
About Internet protocols, procedures,
programs, concepts, etc.
Started in 1969 by Dr. Jon Postel
The RFC Editor: http://www.rfc-editor.org/
e.g.,
HTTP 1.1: RFC 2616
URL: RFC 2718
Summer 2005
ICE 0534/ICE1338 – WWW
© In-Young Ko, Information and Communications University
19
RFC Search
Summer 2005
ICE 0534/ICE1338 – WWW
© In-Young Ko, Information and Communications University
20
URI & URL
“A Uniform Resource Identifier (URI) is a
compact string of characters for
identifying an abstract or physical
resource.” – RFC2396
“A Uniform Resource Locator (URL) is a
compact string representation of the
location for a resource that is available via
the Internet.” – RFC2718
Summer 2005
ICE 0534/ICE1338 – WWW
© In-Young Ko, Information and Communications University
21
URI Format
Format: <scheme>:<scheme-specific-part>
For the HTTP scheme:
http://<net_loc>/<path>;<params>?<query>#<fragment>
e.g., http://www.google.com/search?hl=en&ie=UTF-8&q=uri
e.g., http://www.w3.org/Protocols/#Specs
Other schemes: ftp, mailto, news, telnet, file, …
Full list of URI schemes:
http://www.iana.org/assignments/uri-schemes
Summer 2005
ICE 0534/ICE1338 – WWW
© In-Young Ko, Information and Communications University
22
Hosts and Ports
Host A
Host B
A server
program
Ports
A client
program
…
Ports
…
A server
program
Internet
Summer 2005
ICE 0534/ICE1338 – WWW
© In-Young Ko, Information and Communications University
23
Internet Ports
IANA Port Assignments
Well Known Ports (0 – 1023)
Assigned by IANA for system programs
e.g., HTTP: 80, HTTPs: 443, FTP: 21, Telnet: 23,
SMPT: 25, Finger: 79
Registered Ports (1024 – 49151)
http://www.iana.org/assignments/port-numbers
Listed by IANA for user programs
e.g., MSNP (MSN Messenger): 1863
Private Ports (49152 – 65535)
Summer 2005
ICE 0534/ICE1338 – WWW
© In-Young Ko, Information and Communications University
24
MIME Types
Multipurpose Internet Mail Extensions (RFC 2045)
Adopted as part of HTTP to specify document
types
Representation form: type/subtype
Servers usually determine the types of a
document based on the file name’s extension
e.g., text/html, text/plain, audio/mpeg, video/jpeg, text/*
e.g., .html, .htm for text/html
A client (browser) sends MIME types that they
can handle to a server
Summer 2005
ICE 0534/ICE1338 – WWW
© In-Young Ko, Information and Communications University
25
HTTP (Hypertext Transfer Protocol)
“An application-level protocol for distributed, collaborative,
hypermedia information systems.” – RFC 2616
Request:
HTTP-Method Resource HTTP/version
Header fields
<Blank line>
Message
e.g., GET /storefront.html HTTP/1.1
Accept: text/*
HTTP Method
Response:
Status line
Response header fields
<Blank line>
Response body
e.g., HTTP/1.1 200 OK
<html> … </html>
Summer 2005
ICE 0534/ICE1338 – WWW
Status Code
© In-Young Ko, Information and Communications University
26
HTTP Request Methods
GET -- Return the contents of the
specified resource
HEAD -- Return just the header
information for a resource
POST -- Submit data to a resource or
program
PUT -- Create a new resource or replace
an existing one
DELETE -- Delete a resource
Summer 2005
ICE 0534/ICE1338 – WWW
© In-Young Ko, Information and Communications University
27
HTTP Status Codes
1xx – Information
2xx – Success
e.g., 202 – OK: The request was fulfilled
204 – No Response
3xx – Redirection
4xx – Client error
e.g., 401 – Unauthorized
404 – Not found
5xx – Server error
Full status code list:
http://www.w3.org/Protocols/HTTP/HTRESP.html
Summer 2005
ICE 0534/ICE1338 – WWW
© In-Young Ko, Information and Communications University
28
HTTP Connection Test
C:\>telnet www.icu.ac.kr 80
GET /index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<title>::Welcome to ICU::</title>
…
</html>
Summer 2005
ICE 0534/ICE1338 – WWW
© In-Young Ko, Information and Communications University
29
HTML (Hypertext Markup Language)
“HTML is the lingua franca for publishing
hypertext on the World Wide Web.” – W3C
Derived from SGML (Generalized Markup
Language), which is the ISO standard for
describing text-formatting (markup)
languages
c.f., PostScript, LaTex, etc.
Current HTML versions: HTML 4.01,
XHTML 1.0
Summer 2005
ICE 0534/ICE1338 – WWW
© In-Young Ko, Information and Communications University
30
Basic HTML Syntax
Tags: ‘<’ tag_name ‘>’
Specify how the browser should display the
part of the document that is associated with
them
Most tags appear in pairs
e.g., This is <b>important</b>.
Opening Tag
Closing Tag
A tag may have some attributes
Tag Value
e.g., This is a picture <img src=“pic1.jpg”/>.
Comments: ‘<!--’ comment_text ‘-->’
Summer 2005
ICE 0534/ICE1338 – WWW
© In-Young Ko, Information and Communications University
31
HTML Document Structure
<html>
<head>
<title> … </title>
</head>
<body>
…
</body>
</html>
Summer 2005
ICE 0534/ICE1338 – WWW
Head Part: Information
about the document
Body Part: Content of the
document
© In-Young Ko, Information and Communications University
32
HTML – Basic Text Formatting
Paragraphs: <p> … </p>
Line breaks: <br/>
Headings – 6 levels
Largest: <h1> … </h1>
Smallest: <h6> … </h6>
Blockquotes: <blockquote> … </blockquote>
Font styles and sizes
Summer 2005
Bold: <b> … </b>, Italic: <i> .. </i>, underlined: <u> … </u>
Relative sizes: <big> … </big>, <small> .. </small>
Subscript & superscript: <sub> … </sub>, <sup> .. </sup>
Monospace font (e.g., Courier): <tt> … </tt>
Horizontal rules: <hr/>
ICE 0534/ICE1338 – WWW
© In-Young Ko, Information and Communications University
33
HTML – Text Formatting Example
<html>
<head><title>ICE1338</title></head>
<body>
<br/>
<h2>Programming for WWW</h2>
<h3>Course Objective:</h3>
<p>In this course, students will learn the core <i>concepts</i>
and <i>technologies</i> behind the <b>World Wide Web
(Web)</b>, and <i>practice</i> the languages and tools to build
<u>Web-based contents and services</u>. </p>
<h3>Related Information</h3>
<h4>W3C</h4>
<blockquote>The World Wide Web Consortium (W3C) develops
interoperable technologies (specifications, guidelines, software,
and tools) to lead the Web to its full potential.</blockquote>
<hr/>
<tt>Information and Communications University</tt>
</body>
</html>
Summer 2005
ICE 0534/ICE1338 – WWW
© In-Young Ko, Information and Communications University
34
HTML – Images and Links
Image tag: <img src = “…”/>
Anchor tag: <a href = “…”> … </a>
Targets within documents
Summer 2005
Set a target: <a name = “label”> or <p id = “label”>
Reference a target in the same document:
<a href = “#label”> … </a>
Reference a target in a different document:
<a href = “doc.html#label”> … </a>
ICE 0534/ICE1338 – WWW
© In-Young Ko, Information and Communications University
35
HTML – Images and Links Example
<html>
<head><title>ICE1338</title></head>
<body><br/>
<h2>Programming for WWW</h2>
<a href="#objective">Objective</a> |
<a href="#info">Related Info.</a> |
<a href="#students">Students</a>
<h3 id="objective">Course Objective:</h3>
<p>In this course, students will learn the core <i>concepts</i>
and <i>technologies</i> behind the <b>World Wide Web
(Web)</b>, and <i>practice</i> the languages and tools to
build <u>Web-based contents and services</u>. </p>
<h3 id="info">Related Information</h3>
<h4>W3C</h4>
<blockquote>The <a href=“http://www.w3.org>World Wide
Web Consortium (W3C) </a> develops interoperable
technologies (specifications, guidelines, software, and tools) to
lead the Web to its full potential.</blockquote>
<h3 id=“students">Students</h3>
Here are the pictures of the students:<br/>
<img src = "ice1338_students1.JPG" width="250"/>
<img src = "ice1338_students2.JPG" width="250"/>
<hr/>
<tt>Information and Communications University</tt>
</body>
</html>
Summer 2005
ICE 0534/ICE1338 – WWW
© In-Young Ko, Information and Communications University
36
HTML – Lists
Unordered Lists
<ul> <li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ul>
Ordered Lists
<ol> <li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
Definition Lists: Lists of terms
<dl> <dt>1st Item</dt> <dd>100</dd>
<dt>2nd Item</dt> <dd>200</dd>
<dt>3rd Item</dt> <dd>300</dd>
</dl>
Summer 2005
ICE 0534/ICE1338 – WWW
© In-Young Ko, Information and Communications University
37
HTML – Tables
<table border = “1”>
<caption>Table name</caption>
<tr><th>Header1</th>
<th>Header2</th>
<th>Header3</th>
</tr>
<tr><td>Cell 1x1</td>
<td>Cell 1x2</td>
<td>Cell 1x3</td>
</tr>
<tr><td>Cell 2x1</td>
<td colspan=2 align=“center”>Cell 2x2</td>
</tr>
</table>
Summer 2005
ICE 0534/ICE1338 – WWW
© In-Young Ko, Information and Communications University
38
HTML – Frames (1)
For displaying more than one documents at a
time
Defining frame areas
<frameset rows = “33% 33% 33%” cols = “25%, *”>
Frame 1
Frame 2
Frame 3
Frame 4
Frame 5
Frame 6
Setting the contents of the frames
<frame src = “content1.html”>
<frame src = “content2.html”> …
Summer 2005
ICE 0534/ICE1338 – WWW
© In-Young Ko, Information and Communications University
39
HTML – Frames (2)
Index
Frames
Summer 2005
ICE 0534/ICE1338 – WWW
© In-Young Ko, Information and Communications University
40
HTML – Frames (3)
<HTML>
<HEAD><TITLE>Java 2 Platform SE v1.4.2</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
<FRAMESET rows="30%, 70%">
<FRAME src="overview-frame.html" name="packageListFrame" title="All
Packages">
<FRAME src="allclasses-frame.html" name="packageFrame" title="All classes and
interfaces">
</FRAMESET>
<FRAME src="overview-summary.html" name="classFrame" title="Package, class
and interface descriptions" scrolling="yes">
<NOFRAMES>
<H2>Frame Alert</H2>
<P>This document is designed to be viewed using the frames feature. If you see
this message, you are using a non-frame-capable web client.</P>
<BR/>Link to<A HREF="overview-summary.html">Non-frame version.</A>
</NOFRAMES>
</FRAMESET>
</HTML>
Summer 2005
ICE 0534/ICE1338 – WWW
© In-Young Ko, Information and Communications University
41
Cascading Style Sheets (CSS)
Provide a method of imposing consistency on the
style of Web pages
c.f., Styles in MS Word or PowerPoint documents
Not part of HTML, but can be embedded in HTML
documents
Can impose a standard style on a whole document,
or even a whole collection of documents
Most of the style attributes (e.g, color, align, size, ...)
in HTML are deprecated from HTML 4.0
http://www.w3.org/Style/CSS/
Summer 2005
ICE 0534/ICE1338 – WWW
© In-Young Ko, Information and Communications University
42
CSS Example
<html>
<head><title>ICE1338</title>
<style type = "text/css">
<!-p { font-size: 16; color: blue; background-color: yellow }
h2, h3 { font-size: 16; color: red }
-->
</style>
</head>
<body>
<br/>
<h2>Programming for WWW</h2>
…
<p>In this course, students will learn the core <i>concepts</i> and
<i>technologies</i> behind the <b>World Wide Web (Web)</b>, and
<i>practice</i> the languages and tools to build <u>Web-based contents
and services</u>. </p>
<h3 id="info">Related Information</h3>
<h4>W3C</h4>
<blockquote>The <a href="http://www.w3.org">World Wide Web
Consortium (W3C)</a> develops interoperable technologies
(specifications, guidelines, software, and tools) to lead the Web to its full
potential.</blockquote>
<h3 id="students">Students</h3>
Here are the pictures of the students:<br/>
…
<hr/>
<tt>Information and Communications University</tt>
</body>
</html>
Summer 2005
ICE 0534/ICE1338 – WWW
© In-Young Ko, Information and Communications University
43
CSS Levels
CSS1 (1996, W3C)
CSS2 (1996)
Inline styles – specified for a specific occurrence of
a tag and apply only to that tag
Document-level styles – applied to the whole
document in which they appear (in the HTML head)
CSS3 (1998)
External styles – can be applied to any number of
documents
When more than one style sheet applies to a specific
tag in a document, the lowest level style sheet has
precedence
Summer 2005
ICE 0534/ICE1338 – WWW
© In-Young Ko, Information and Communications University
44
CSS1 (Inline)
Style sheet appears as the value of the style
attribute
General form:
style = "property_1: value_1;
property_2: value_2;
…
property_n: value_n”
Scope of an inline style sheet is the content of
the tag
e.g., <p style = “font-size: 12pt; color: blue;
background-color: white”> … </p>
Summer 2005
ICE 0534/ICE1338 – WWW
© In-Young Ko, Information and Communications University
45
CSS2 (Document Level)
Style sheet appears as a list of rules that are
the content of a <style> tag
The <style> tag must include the type attribute, set to
"text/css“
The list of rules must be placed in an HTML
comment, because it is not HTML
Comments in the rule list must have a different form
– use C comments (/*…*/)
General form:
<style type = "text/css">
<!-rule list
-->
</style>
Summer 2005
ICE 0534/ICE1338 – WWW
© In-Young Ko, Information and Communications University
46
CSS2 (Document Level) cont.
Form of the rules:
selector { list of property/values }
The selector is a tag name or a list of tag names,
separated by commas (e.g., h1, h3, p)
Each property/value pair has the form: property:
value, and pairs are separated by semicolons
e.g., <style type = "text/css">
<!-p { font-size: 12pt; background-color: white }
h2, h3 { font-size: 16pt; color: blue }
-->
</style>
Summer 2005
ICE 0534/ICE1338 – WWW
© In-Young Ko, Information and Communications University
47
CSS3 (External)
Form is a list of style rules, as in the content of a
<style> tag for document-level style sheets
Written as text files with the MIME type text/css
A <link> tag is used to specify that the browser is
to fetch and use an external style sheet file
<link rel = stylesheet type = "text/css"
href = "http://www.wherever.org/termpaper.css">
</link>
External style sheets can be validated at
http://jigsaw.w3.org/css-validator/validator-upload.html
Summer 2005
ICE 0534/ICE1338 – WWW
© In-Young Ko, Information and Communications University
48
Style Classes
Used to allow different occurrences of the same
tag to use different style specifications
A style class has a name, which is attached to a
tag name
e.g., p.narrow { property/value list }
p.wide { property/value list }
The class you want on a particular occurrence
of a tag is specified with the class attribute of
the tag
e.g., <p class = "narrow">
...
</p>
Summer 2005
ICE 0534/ICE1338 – WWW
© In-Young Ko, Information and Communications University
49
Generic Style Classes
A generic class can be defined if you want
a style to apply to more than one kind of
tag
A generic class must be named, and the
name must begin with a period
e.g., .really-big { font-size: 36pt; font-style: italic }
Use it as if it were a normal style class
e.g., <h1 class = "really-big"> … </h1>
...
<p class = "really-big"> … </p>
Summer 2005
ICE 0534/ICE1338 – WWW
© In-Young Ko, Information and Communications University
50
CSS Properties
There are 56 different properties in 6 categories:
Fonts, Colors and backgrounds, Text, Boxes and
layouts, Lists, Tags
Property Value Forms
Keywords – left, small, … (Not case sensitive)
Length – numbers, maybe with decimal points
Summer 2005
Units: px (pixels), in (inches), cm (centimeters), mm
(millimeters), pt (points), pc (picas = 12 points), em (height of
the letter ‘m’), x-height (height of the letter ‘x’)
No space is allowed between the number and the unit
specification (e.g., 1.5 in is illegal!)
Percentage – a number followed immediately by “%”
URL values – url(protocol://server/pathname)
ICE 0534/ICE1338 – WWW
© In-Young Ko, Information and Communications University
51
CSS Properties – cont.
Property Value Forms (cont.)
Colors
Color name – e.g., white, blue
rgb(n1, n2, n3) – e.g., rgb(255, 255, 255)
Numbers can be decimal or percentages
Hex form – e.g., #FFFFFF
Property values are inherited by all
nested tags, unless overridden
Summer 2005
ICE 0534/ICE1338 – WWW
© In-Young Ko, Information and Communications University
52
Font Properties
font-family
font-size
Values: bolder, lighter, bold, normal, 100, 200, …, 900
font – For specifying a list of font properties
Values: italic, oblique, normal
font-weight
Values: medium, smaller, 120%, 12pt, …
font-style
e.g., font-family: Arial, 굴림, Helvetica, Courier
e.g., font: bolder 14pt Arial Helvetica
Order must be: style, weight, size, name(s)
text-decoration
Summer 2005
Values: line-through, overline, underline, none
ICE 0534/ICE1338 – WWW
© In-Young Ko, Information and Communications University
53
List Properties
list-style-type
Unordered lists – Bullet can be a disc
(default), a square, or a circle; set it on
either the <ul> or <li> tag
e.g., <li style = "list-style-type: square"> … </li>
Could use an image for the bullets in an
unordered list
Summer 2005
e.g., <li style = "list-style-image: url(bird.jpg)">
Ordered lists – list-style-type can be used to
change the sequence values (decimal,
upper-alpha, lower-alpha, upper-roman,
lower-roman)
ICE 0534/ICE1338 – WWW
© In-Young Ko, Information and Communications University
54
Text Alignments
text-indent – allows indentation of text
text-align – allows alignment of text
Values: a length or a % value
Values: left (the default), center, right, or justify
float – makes text to flow around another element
Summer 2005
Values: left, right, and none (the default)
e.g., <img src = "c210.jpg" style = "float: right" />
ICE 0534/ICE1338 – WWW
© In-Young Ko, Information and Communications University
55
Other Properties
http://www.w3.org/TR/CSS21/propidx.html
Summer 2005
ICE 0534/ICE1338 – WWW
© In-Young Ko, Information and Communications University
56
CSS Profiles
CSS Mobile Profile 1.0 is for devices
such as mobile phones and PDAs
CSS Print Profile is still a draft. It is
aimed at low-cost printers
CSS TV Profile 1.0 is for browsers that
run on television sets
Summer 2005
ICE 0534/ICE1338 – WWW
© In-Young Ko, Information and Communications University
57
Homework #2
Due Date: June 28, 2005
Readings:
Formulate at least one question that you’d like to ask Dr.
Raj Reddy
[Kor04] Network Robot Project Gets Boost - Carnegie Mellon’s Raj Reddy
Manifests Much-Touted 80/20 Rule, The Korea Times, December 19, 2004.
[Red96] Raj Reddy, To Dream The Possible Dream, Turing Award Lecture,
Communications of the ACM, 39(5):105-112, 1996.
State the motivation of the questions
Summarize the background information of the questions
Explain why you’d like to ask the questions especially to Dr. Raj
Reddy
Write the actual questions that you’d like to ask him
Send your questions to the professor (iko .AT. icu.ac.kr)
by June 27, 2005 6:00PM & Submit the hard copy of the
questions at the class on June 8th
Summer 2005
ICE 0534/ICE1338 – WWW
© In-Young Ko, Information and Communications University
58
Homework #3 (Programming)
Due date: July 5th
Create your home page by hand (do not use
any WYSIWYG editors)
Make the cover page, and at least two sub-pages
that are linked from the cover page
Include at least one image, one table, and one list
One of the pages must have a frame definition with
at list two frames inside (you also need to create
small pages for the frames)
Please use CSS (in any level) for formatting
Reference
Summer 2005
HTML Tutorial: http://www.w3.org/MarkUp/Guide/
Jakob Nielsen's guidelines for good Home Page
design: http://www.useit.com/alertbox/20020512.html
ICE 0534/ICE1338 – WWW
© In-Young Ko, Information and Communications University
59