ICE0534 – Web-based Software Development ICE1338 – Programming for WWW Lecture #2 Lecture #2 In-Young Ko iko.AT. icu.ac.kr iko.AT. icu.ac.kr Information and Communications University (ICU) - Summer

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University Announcements Send the TA an about your information Send the TA an about your information Select the topic for the individual presentation Select the topic for the individual presentation Homework #2: Read the articles about Dr. Raj Reddy and generate questions to ask him Homework #2: Read the articles about Dr. Raj Reddy and generate questions to ask him

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University This Lecture WWW Concepts WWW Concepts Internet & HTTP Internet & HTTP Client-side Information Presentation Client-side Information Presentation HTML HTML Cascade Style Sheets (CSS) Cascade Style Sheets (CSS)

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University The Origin of the Web A proposal to build a global hypertext system for CERN CERN Tim Berners-Lee, “Information Management: A Proposal”

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University WWW Concepts Different terminals to access different machines Different terminals to access different machines Different document formats for different machines Different document formats for different machines Different programs to access data Different programs to access data 1. Universal Readership One terminal (client) to access different machines One terminal (client) to access different machines One document format: HTML One document format: HTML One type of program to access data: Web browsers One type of program to access data: Web browsers

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University WWW Concepts Text with links – e.g., footnotes, bibliographies Text with links – e.g., footnotes, bibliographies Each document has its own address called URI (Uniform Resource Identifier) Each document has its own address called URI (Uniform Resource Identifier) c.f., URL (Uniform Resource Locator) c.f., URL (Uniform Resource Locator) All documents are written in HTML (Hypertext Markup Language) All documents are written in HTML (Hypertext Markup Language) Documents are connected via Anchors and Links Documents are connected via Anchors and Links 2. Hypertext

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University WWW Concepts Web documents are indexed by search engines Web documents are indexed by search engines Text-based search by sending keywords to a search engine Text-based search by sending keywords to a search engine 3. Searching

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University WWW Concepts No central control No central control Anybody can publish information on a server Anybody can publish information on a server Anyone can read information by using a client Anyone can read information by using a client All clients and servers are connected via Internet All clients and servers are connected via Internet Use of a common protocol, HTTP (Hypertext Transfer Protocol) Use of a common protocol, HTTP (Hypertext Transfer Protocol) 4. Client-Server Model

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University Web vs. Internet Internet: A collection of computers connected in a communications network Protocols: TCP/IP (Transmission Control Protocol / Internet Protocol) Protocols: TCP/IP (Transmission Control Protocol / Internet Protocol) Addressing: Domain names, IP addrs Addressing: Domain names, IP addrs Naming server: DNS Naming server: DNS Applications: SMTP, FTP, Telnet,… Applications: SMTP, FTP, Telnet,… Web: A collection of software and protocols for exchanging multimedia data on the Internet Protocols: HTTP, HTTPS, … Protocols: HTTP, HTTPS, … Addressing: URI (URL) Addressing: URI (URL) Programs: Web browsers, Web servers Programs: Web browsers, Web servers Data Types: HTML, Images, Music, … Data Types: HTML, Images, Music, …

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University The Growth of the Internet 1969 – ARPA Net 4 Nodes (UCLA, SRI, UCSB, U of Utah) A Map of the Internet A Map of the Internet January ,101,481 Nodes

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University Internet Addresses Domain Names Domain Names Domain: a collection of machines (hosts) Domain: a collection of machines (hosts) Name structures Name structures US; Host name. Domain. Organization US; Host name. Domain. Organization Others; Host name. Domain. Organization. Country Others; Host name. Domain. Organization. Country e.g., e.g., IP (Internet Protocol) Addresses IP (Internet Protocol) Addresses e.g., , e.g., , Internet Corporation For Assigned Names and Numbers

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University IP Address Classes Class A Class A Initial byte: 0 – 127 Initial byte: 0 – classes 126 classes 16,777,214 hosts / class 16,777,214 hosts / class Class B Class B Initial byte: 128 – 191 Initial byte: 128 – ,384 classes 16,384 classes 65,532 hosts / class 65,532 hosts / class Class C Class C Initial byte: 192 – 223 Initial byte: 192 – 223 2,097,152 classes 2,097,152 classes 254 hosts / class 254 hosts / class Network AddressHost Addr. e.g., (ICU) Net. Addr.Host Address e.g., (W3C) Net. Addr.Host Address e.g., (IBM)

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University IPv6 Internet Protocol Version 6 Internet Protocol Version 6 The next generation protocol designed by the IETF (Internet Engineering Task Force) The next generation protocol designed by the IETF (Internet Engineering Task Force)IETF New features (compared to IPv4) New features (compared to IPv4) 128-bit address space 128-bit address space Built-in security Built-in security Support for QoS (Quality of Service) Support for QoS (Quality of Service) Support for multicasting Support for multicasting

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University IP Datagram Header Format

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University Internet Packet Routing Pictures are from

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University ‘Whois’ Server

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University Tracing the Route Domain Name: IP Address:

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University Tracing the Route C:\>tracert Tracing route to drmwrks.vo.llnwd.net[ ] 1 2 ms 4 ms 3 ms ms 14 ms 14 ms ms 15 ms 24 ms ms 15 ms 16 ms ms 16 ms 14 ms ms 15 ms 16 ms ms 162 ms 179 ms ms 165 ms 163 ms ms 183 ms 163 ms ms 164 ms 165 ms ms 164 ms 164 ms Trace complete. Daejon Bundang EP.NET CA, USA CAIS Internet VA, USA AZ, USA

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University RFCs (Request for Comments) “A set of technical and organizational notes about the Internet” “A set of technical and organizational notes about the Internet” About Internet protocols, procedures, programs, concepts, etc. About Internet protocols, procedures, programs, concepts, etc. Started in 1969 by Dr. Jon Postel Started in 1969 by Dr. Jon Postel The RFC Editor: The RFC Editor: e.g., e.g., HTTP 1.1: RFC 2616 HTTP 1.1: RFC 2616 URL: RFC 2718 URL: RFC 2718

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University RFC Search

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University URI & URL “A Uniform Resource Identifier (URI) is a compact string of characters for identifying an abstract or physical resource.” – RFC2396 “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 “A Uniform Resource Locator (URL) is a compact string representation of the location for a resource that is available via the Internet.” – RFC2718

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University URI Format Format: : Format: : For the HTTP scheme: For the HTTP scheme: e.g., e.g., Other schemes: ftp, mailto, news, telnet, file, … Other schemes: ftp, mailto, news, telnet, file, … Full list of URI schemes: Full list of URI schemes:

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University Hosts and Ports Host AHost B Ports …… Internet A client program A server program

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University Internet Ports IANA Port Assignments IANA Port Assignments Well Known Ports (0 – 1023) Well Known Ports (0 – 1023) Assigned by IANA for system programs Assigned by IANA for system programs e.g., HTTP: 80, HTTPs: 443, FTP: 21, Telnet: 23, SMPT: 25, Finger: 79 e.g., HTTP: 80, HTTPs: 443, FTP: 21, Telnet: 23, SMPT: 25, Finger: 79 Registered Ports (1024 – 49151) Registered Ports (1024 – 49151) Listed by IANA for user programs Listed by IANA for user programs e.g., MSNP (MSN Messenger): 1863 e.g., MSNP (MSN Messenger): 1863 Private Ports (49152 – 65535) Private Ports (49152 – 65535)

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University MIME Types Multipurpose Internet Mail Extensions (RFC 2045) Multipurpose Internet Mail Extensions (RFC 2045) Adopted as part of HTTP to specify document types Adopted as part of HTTP to specify document types Representation form: type/subtype Representation form: type/subtype e.g., text/html, text/plain, audio/mpeg, video/jpeg, text/* e.g., text/html, text/plain, audio/mpeg, video/jpeg, text/* Servers usually determine the types of a document based on the file name’s extension Servers usually determine the types of a document based on the file name’s extension e.g.,.html,.htm for text/html e.g.,.html,.htm for text/html A client (browser) sends MIME types that they can handle to a server A client (browser) sends MIME types that they can handle to a server

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University HTTP (Hypertext Transfer Protocol) “An application-level protocol for distributed, collaborative, hypermedia information systems.” – RFC 2616 “An application-level protocol for distributed, collaborative, hypermedia information systems.” – RFC 2616 Request: Request: HTTP-Method Resource HTTP/version Header fields Message e.g., GET /storefront.html HTTP/1.1 e.g., GET /storefront.html HTTP/1.1 Accept: text/* Accept: text/* Response: Response: Status line Response header fields Response body e.g., HTTP/ OK e.g., HTTP/ OK … … HTTP Method Status Code

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University HTTP Request Methods GET -- Return the contents of the specified resource GET -- Return the contents of the specified resource HEAD -- Return just the header information for a resource HEAD -- Return just the header information for a resource POST -- Submit data to a resource or program POST -- Submit data to a resource or program PUT -- Create a new resource or replace an existing one PUT -- Create a new resource or replace an existing one DELETE -- Delete a resource DELETE -- Delete a resource

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University HTTP Status Codes 1xx – Information 1xx – Information 2xx – Success 2xx – Success e.g., 202 – OK: The request was fulfilled 204 – No Response 204 – No Response 3xx – Redirection 3xx – Redirection 4xx – Client error 4xx – Client error e.g., 401 – Unauthorized 404 – Not found 404 – Not found 5xx – Server error 5xx – Server error Full status code list: Full status code list:

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University HTTP Connection Test C:\>telnet 80 GET /index.html <HTML> ::Welcome to ICU:: ::Welcome to ICU:: …</html>

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University HTML (Hypertext Markup Language) “HTML is the lingua franca for publishing hypertext on the World Wide Web.” – W3C “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 Derived from SGML (Generalized Markup Language), which is the ISO standard for describing text-formatting (markup) languages c.f., PostScript, LaTex, etc. c.f., PostScript, LaTex, etc. Current HTML versions: HTML 4.01, XHTML 1.0 Current HTML versions: HTML 4.01, XHTML 1.0

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University Basic HTML Syntax Tags: ‘ ’ Tags: ‘ ’ Specify how the browser should display the part of the document that is associated with them Specify how the browser should display the part of the document that is associated with them Most tags appear in pairs Most tags appear in pairs e.g., This is important. A tag may have some attributes A tag may have some attributes e.g., This is a picture. e.g., This is a picture. Comments: ‘ ’ Comments: ‘ ’ Opening Tag Closing Tag Tag Value

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University HTML Document Structure <html><head> … … </head><body>…</body></html> Head Part: Information about the document Body Part: Content of the document

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University HTML – Basic Text Formatting Paragraphs: … Paragraphs: … Line breaks: Line breaks: Headings – 6 levels Headings – 6 levels Largest: … Largest: … Smallest: … Smallest: … Blockquotes: … Blockquotes: … Font styles and sizes Font styles and sizes Bold: …, Italic:.., underlined: … Bold: …, Italic:.., underlined: … Relative sizes: …,.. Relative sizes: …,.. Subscript & superscript: …,.. Subscript & superscript: …,.. Monospace font (e.g., Courier): … Monospace font (e.g., Courier): … Horizontal rules: Horizontal rules:

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University HTML – Text Formatting Example <html> ICE1338 ICE1338 <br/> Programming for WWW Programming for WWW Course Objective: Course Objective: In this course, students will learn the core concepts and technologies behind the World Wide Web (Web), and practice the languages and tools to build Web-based contents and services. In this course, students will learn the core concepts and technologies behind the World Wide Web (Web), and practice the languages and tools to build Web-based contents and services. Related Information Related Information W3C W3C The World Wide Web Consortium (W3C) develops interoperable technologies (specifications, guidelines, software, and tools) to lead the Web to its full potential. The World Wide Web Consortium (W3C) develops interoperable technologies (specifications, guidelines, software, and tools) to lead the Web to its full potential. Information and Communications University Information and Communications University </html>

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University HTML – Images and Links Image tag: Image tag: Anchor tag: … Anchor tag: … Targets within documents Targets within documents Set a target: or Set a target: or Reference a target in the same document: … Reference a target in the same document: … Reference a target in a different document: … Reference a target in a different document: …

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University HTML – Images and Links Example <html> ICE1338 ICE1338 Programming for WWW Programming for WWW Objective | Objective | Related Info. | Related Info. | Students Students Course Objective: Course Objective: In this course, students will learn the core concepts and technologies behind the World Wide Web (Web), and practice the languages and tools to build Web-based contents and services. In this course, students will learn the core concepts and technologies behind the World Wide Web (Web), and practice the languages and tools to build Web-based contents and services. Related Information Related Information W3C W3C The World Wide Web Consortium (W3C) develops interoperable technologies (specifications, guidelines, software, and tools) to lead the Web to its full potential. The World Wide Web Consortium (W3C) develops interoperable technologies (specifications, guidelines, software, and tools) to lead the Web to its full potential. Students Students Here are the pictures of the students: Here are the pictures of the students: Information and Communications University Information and Communications University </html>

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University HTML – Lists Unordered Lists Unordered Lists First Item First Item Second Item Second Item Third Item Third Item </ul> Ordered Lists Ordered Lists First Item First Item Second Item Second Item Third Item Third Item </ol> Definition Lists: Lists of terms Definition Lists: Lists of terms 1st Item 100 1st Item 100 2nd Item 200 2nd Item 200 3rd Item 300 3rd Item 300 </dl>

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University HTML – Tables Table name Table name Header1 Header1 Header2 Header2 Header3 Header3 </tr> Cell 1x1 Cell 1x1 Cell 1x2 Cell 1x2 Cell 1x3 Cell 1x3 </tr> Cell 2x1 Cell 2x1 Cell 2x2 Cell 2x2 </tr></table>

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University HTML – Frames (1) For displaying more than one documents at a time For displaying more than one documents at a time Defining frame areas Defining frame areas Setting the contents of the frames Setting the contents of the frames … … Frame 1 Frame 2 Frame 3 Frame 4 Frame 5 Frame 6

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University HTML – Frames (2) Index Frames

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University HTML – Frames (3) <HTML> Java 2 Platform SE v1.4.2 Java 2 Platform SE v1.4.2 </HEAD> Frame Alert Frame Alert 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. 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. Link to Non-frame version. Link to Non-frame version. </FRAMESET></HTML>

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University Cascading Style Sheets (CSS) Provide a method of imposing consistency on the style of Web pages Provide a method of imposing consistency on the style of Web pages c.f., Styles in MS Word or PowerPoint documents c.f., Styles in MS Word or PowerPoint documents Not part of HTML, but can be embedded in HTML 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 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 Most of the style attributes (e.g, color, align, size,...) in HTML are deprecated from HTML

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University CSS Example <html> ICE1338 ICE1338 <!-- <!-- p { font-size: 16; color: blue; background-color: yellow } p { font-size: 16; color: blue; background-color: yellow } h2, h3 { font-size: 16; color: red } h2, h3 { font-size: 16; color: red } --> --> <br/> Programming for WWW Programming for WWW … In this course, students will learn the core concepts and technologies behind the World Wide Web (Web), and practice the languages and tools to build Web-based contents and services. In this course, students will learn the core concepts and technologies behind the World Wide Web (Web), and practice the languages and tools to build Web-based contents and services. Related Information Related Information <h4>W3C</h4> The World Wide Web Consortium (W3C) develops interoperable technologies (specifications, guidelines, software, and tools) to lead the Web to its full potential. The World Wide Web Consortium (W3C) develops interoperable technologies (specifications, guidelines, software, and tools) to lead the Web to its full potential. Students Students Here are the pictures of the students: Here are the pictures of the students: … Information and Communications University Information and Communications University </html>

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University CSS Levels CSS1 (1996, W3C) CSS1 (1996, W3C) Inline styles – specified for a specific occurrence of a tag and apply only to that tag Inline styles – specified for a specific occurrence of a tag and apply only to that tag CSS2 (1996) CSS2 (1996) Document-level styles – applied to the whole document in which they appear (in the HTML head) Document-level styles – applied to the whole document in which they appear (in the HTML head) CSS3 (1998) CSS3 (1998) External styles – can be applied to any number of documents 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 When more than one style sheet applies to a specific tag in a document, the lowest level style sheet has precedence

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University CSS1 (Inline) Style sheet appears as the value of the style attribute Style sheet appears as the value of the style attribute General form: General form: style = "property_1: value_1; style = "property_1: value_1; property_2: value_2; property_2: value_2; … property_n: value_n” property_n: value_n” Scope of an inline style sheet is the content of the tag Scope of an inline style sheet is the content of the tag e.g., … e.g., …

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University CSS2 (Document Level) Style sheet appears as a list of rules that are the content of a tag Style sheet appears as a list of rules that are the content of a tag The tag must include the type attribute, set to "text/css“ The 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 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 (/*…*/) Comments in the rule list must have a different form – use C comments (/*…*/) General form: General form: <!-- <!-- rule list rule list --> -->

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University CSS2 (Document Level) cont. Form of the rules: 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) 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 Each property/value pair has the form: property: value, and pairs are separated by semicolons e.g., e.g., <!-- <!-- p { font-size: 12pt; background-color: white } p { font-size: 12pt; background-color: white } h2, h3 { font-size: 16pt; color: blue } h2, h3 { font-size: 16pt; color: blue } --> -->

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University CSS3 (External) Form is a list of style rules, as in the content of a tag for document-level style sheets Form is a list of style rules, as in the content of a tag for document-level style sheets Written as text files with the MIME type text/css Written as text files with the MIME type text/css A tag is used to specify that the browser is to fetch and use an external style sheet file A 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 = " href = " External style sheets can be validated at External style sheets can be validated at

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University Style Classes Used to allow different occurrences of the same tag to use different style specifications 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 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 } 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 The class you want on a particular occurrence of a tag is specified with the class attribute of the tag e.g., e.g.,......

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University 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 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 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 Use it as if it were a normal style class e.g., … e.g., … … …

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University CSS Properties There are 56 different properties in 6 categories: There are 56 different properties in 6 categories: Fonts, Colors and backgrounds, Text, Boxes and layouts, Lists, Tags Fonts, Colors and backgrounds, Text, Boxes and layouts, Lists, Tags Property Value Forms Property Value Forms Keywords – left, small, … (Not case sensitive) Keywords – left, small, … (Not case sensitive) Length – numbers, maybe with decimal points Length – numbers, maybe with decimal points 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’) 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!) No space is allowed between the number and the unit specification (e.g., 1.5 in is illegal!) Percentage – a number followed immediately by “%” Percentage – a number followed immediately by “%” URL values – url(protocol://server/pathname) URL values – url(protocol://server/pathname)

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University CSS Properties – cont. Property Value Forms (cont.) Property Value Forms (cont.) Colors Colors Color name – e.g., white, blue Color name – e.g., white, blue rgb(n1, n2, n3) – e.g., rgb(255, 255, 255) rgb(n1, n2, n3) – e.g., rgb(255, 255, 255) Numbers can be decimal or percentages Numbers can be decimal or percentages Hex form – e.g., #FFFFFF Hex form – e.g., #FFFFFF Property values are inherited by all nested tags, unless overridden Property values are inherited by all nested tags, unless overridden

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University Font Properties font-family font-family e.g., font-family: Arial, 굴림, Helvetica, Courier e.g., font-family: Arial, 굴림, Helvetica, Courier font-size font-size Values: medium, smaller, 120%, 12pt, … Values: medium, smaller, 120%, 12pt, … font-style font-style Values: italic, oblique, normal Values: italic, oblique, normal font-weight font-weight Values: bolder, lighter, bold, normal, 100, 200, …, 900 Values: bolder, lighter, bold, normal, 100, 200, …, 900 font – For specifying a list of font properties font – For specifying a list of font properties e.g., font: bolder 14pt Arial Helvetica e.g., font: bolder 14pt Arial Helvetica Order must be: style, weight, size, name(s) Order must be: style, weight, size, name(s) text-decoration text-decoration Values: line-through, overline, underline, none Values: line-through, overline, underline, none

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University List Properties list-style-type list-style-type Unordered lists – Bullet can be a disc (default), a square, or a circle; set it on either the or tag Unordered lists – Bullet can be a disc (default), a square, or a circle; set it on either the or tag e.g., … e.g., … Could use an image for the bullets in an unordered list Could use an image for the bullets in an unordered list e.g., e.g., Ordered lists – list-style-type can be used to change the sequence values (decimal, upper-alpha, lower-alpha, upper-roman, lower-roman) Ordered lists – list-style-type can be used to change the sequence values (decimal, upper-alpha, lower-alpha, upper-roman, lower-roman)

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University Text Alignments text-indent – allows indentation of text text-indent – allows indentation of text Values: a length or a % value Values: a length or a % value text-align – allows alignment of text text-align – allows alignment of text Values: left (the default), center, right, or justify Values: left (the default), center, right, or justify float – makes text to flow around another element float – makes text to flow around another element Values: left, right, and none (the default) Values: left, right, and none (the default) e.g., e.g.,

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University Other Properties

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University CSS Profiles CSS Mobile Profile 1.0 is for devices such as mobile phones and PDAs 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 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 CSS TV Profile 1.0 is for browsers that run on television sets

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University Homework #2 Due Date: June 28, 2005 Due Date: June 28, 2005 Readings: Readings: [Kor04] Network Robot Project Gets Boost - Carnegie Mellon’s Raj Reddy Manifests Much-Touted 80/20 Rule, The Korea Times, December 19, [Kor04] Network Robot Project Gets Boost - Carnegie Mellon’s Raj Reddy Manifests Much-Touted 80/20 Rule, The Korea Times, December 19, [Red96] Raj Reddy, To Dream The Possible Dream, Turing Award Lecture, Communications of the ACM, 39(5): , [Red96] Raj Reddy, To Dream The Possible Dream, Turing Award Lecture, Communications of the ACM, 39(5): , Formulate at least one question that you’d like to ask Dr. Raj Reddy Formulate at least one question that you’d like to ask Dr. Raj Reddy State the motivation of the questions State the motivation of the questions Summarize the background information of the questions Summarize the background information of the questions Explain why you’d like to ask the questions especially to Dr. Raj Reddy 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 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, :00PM & Submit the hard copy of the questions at the class on June 8th Send your questions to the professor (iko.AT. icu.ac.kr) by June 27, :00PM & Submit the hard copy of the questions at the class on June 8th

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University Homework #3 (Programming) Due date: July 5th Due date: July 5th Create your home page by hand (do not use any WYSIWYG editors) 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 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 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) 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 Please use CSS (in any level) for formatting Reference Reference HTML Tutorial: HTML Tutorial: Jakob Nielsen's guidelines for good Home Page design: Jakob Nielsen's guidelines for good Home Page design: