1. 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 2005 -

2. Summer 2005 2 ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University Announcements Send the TA an email about your information Send the TA an email 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

3. Summer 2005 3 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)

4. Summer 2005 4 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, 1989 www.w3.org/History/1989/proposal.html “Information Management: A Proposal”

5. Summer 2005 5 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 www.w3.org/Talks/General/Concepts.html 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

6. Summer 2005 6 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

7. Summer 2005 7 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

8. Summer 2005 8 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

9. Summer 2005 9 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, … http://www.people.virginia.edu/~lah8v/DCE/Buckingham/resources/Internet.ppt

10. Summer 2005 10 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) www.opte.org/maps A Map of the Internet A Map of the Internet January 2004 233,101,481 Nodes www.isc.org/index.pl?/ops/ds/

11. Summer 2005 11 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., www.w3.org, www.icu.ac.kr e.g., www.w3.org, www.icu.ac.krwww.w3.orgwww.icu.ac.krwww.w3.orgwww.icu.ac.kr IP (Internet Protocol) Addresses IP (Internet Protocol) Addresses e.g., 210.107.128.25, 18.7.14.127 e.g., 210.107.128.25, 18.7.14.127 http://www.iana.org/ Internet Corporation For Assigned Names and Numbers http://www.icann.org/

12. Summer 2005 12 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 – 127 126 classes 126 classes 16,777,214 hosts / class 16,777,214 hosts / class Class B Class B Initial byte: 128 – 191 Initial byte: 128 – 191 16,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 31 23 15 7 0 1 10 Network AddressHost Addr. e.g., 210.107.128.25 (ICU) 31 23 15 7 0 0 Net. Addr.Host Address e.g., 18.7.14.127 (W3C) 31 23 15 7 0 1 0 Net. Addr.Host Address e.g., 129.42.16.99 (IBM)

13. Summer 2005 13 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 http://www.ipv6.org/ http://www.ipv6.org/ http://www.ipv6.org/

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

15. Summer 2005 15 ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University Internet Packet Routing Pictures are from http://grc.com/dos/PacketRouting.htm

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

17. Summer 2005 17 ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University Tracing the Route Domain Name: www.shrek2.com IP Address: 69.28.176.21

18. Summer 2005 18 ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University Tracing the Route C:\>tracert www.shrek2.com Tracing route to drmwrks.vo.llnwd.net[69.28.176.21] 1 2 ms 4 ms 3 ms 210.107.250.1 2 15 ms 14 ms 14 ms 61.74.147.1 3 14 ms 15 ms 24 ms 211.196.201.45 4 16 ms 15 ms 16 ms 220.73.170.189 5 16 ms 16 ms 14 ms 220.73.151.54 6 15 ms 15 ms 16 ms 211.216.216.90 7 162 ms 162 ms 179 ms 211.48.63.206 8 164 ms 165 ms 163 ms 198.32.176.164 9 164 ms 183 ms 163 ms 63.223.1.5 10 197 ms 164 ms 165 ms 63.223.3.90 11 165 ms 164 ms 164 ms 69.28.176.21 Trace complete. Daejon Bundang EP.NET CA, USA CAIS Internet VA, USA AZ, USA

19. Summer 2005 19 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: http://www.rfc-editor.org/ The RFC Editor: http://www.rfc-editor.org/http://www.rfc-editor.org/ e.g., e.g., HTTP 1.1: RFC 2616 HTTP 1.1: RFC 2616 URL: RFC 2718 URL: RFC 2718

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

21. Summer 2005 21 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

22. Summer 2005 22 ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University URI Format Format: : Format: : For the HTTP scheme: 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, … Other schemes: ftp, mailto, news, telnet, file, … Full list of URI schemes: http://www.iana.org/assignments/uri-schemes Full list of URI schemes: http://www.iana.org/assignments/uri-schemes http://www.iana.org/assignments/uri-schemes

23. Summer 2005 23 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

24. Summer 2005 24 ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University Internet Ports IANA Port Assignments IANA Port Assignments http://www.iana.org/assignments/port-numbers http://www.iana.org/assignments/port-numbers http://www.iana.org/assignments/port-numbers 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)

25. Summer 2005 25 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

26. Summer 2005 26 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/1.1 200 OK e.g., HTTP/1.1 200 OK … … HTTP Method Status Code

27. Summer 2005 27 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

28. Summer 2005 28 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: http://www.w3.org/Protocols/HTTP/HTRESP.html Full status code list: http://www.w3.org/Protocols/HTTP/HTRESP.html http://www.w3.org/Protocols/HTTP/HTRESP.html

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

30. Summer 2005 30 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

31. Summer 2005 31 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

32. Summer 2005 32 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

33. Summer 2005 33 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:

34. Summer 2005 34 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>

35. Summer 2005 35 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: …

36. Summer 2005 36 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>

37. Summer 2005 37 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>

38. Summer 2005 38 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>

39. Summer 2005 39 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

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

41. Summer 2005 41 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>

42. Summer 2005 42 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 4.0 http://www.w3.org/Style/CSS/ http://www.w3.org/Style/CSS/ http://www.w3.org/Style/CSS/

43. Summer 2005 43 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>

44. Summer 2005 44 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

45. Summer 2005 45 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., …

46. Summer 2005 46 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 --> -->

47. Summer 2005 47 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 } --> -->

48. Summer 2005 48 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 = "http://www.wherever.org/termpaper.css"> href = "http://www.wherever.org/termpaper.css"></link> External style sheets can be validated at External style sheets can be validated at http://jigsaw.w3.org/css-validator/validator-upload.html

49. Summer 2005 49 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.,......

50. Summer 2005 50 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., …...... … …

51. Summer 2005 51 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)

52. Summer 2005 52 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

53. Summer 2005 53 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

54. Summer 2005 54 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)

55. Summer 2005 55 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.,

56. Summer 2005 56 ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University Other Properties http://www.w3.org/TR/CSS21/propidx.html http://www.w3.org/TR/CSS21/propidx.html http://www.w3.org/TR/CSS21/propidx.html

57. Summer 2005 57 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

58. Summer 2005 58 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, 2004. [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. [Red96] Raj Reddy, To Dream The Possible Dream, Turing Award Lecture, Communications of the ACM, 39(5):105-112, 1996. 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, 2005 6: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, 2005 6:00PM & Submit the hard copy of the questions at the class on June 8th

59. Summer 2005 59 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: http://www.w3.org/MarkUp/Guide/ HTML Tutorial: http://www.w3.org/MarkUp/Guide/ http://www.w3.org/MarkUp/Guide/ Jakob Nielsen's guidelines for good Home Page design: http://www.useit.com/alertbox/20020512.html Jakob Nielsen's guidelines for good Home Page design: http://www.useit.com/alertbox/20020512.html http://www.useit.com/alertbox/20020512.html