1. Programming for WWW (ICE 1338) Lecture #2 Lecture #2 June 25, 2004 In-Young Ko iko.AT. icu.ac.kr Information and Communications University (ICU) iko.AT. icu.ac.kr

2. June 25, 2004 2 Programming for WWW (Lecture#2) In-Young Ko, Information Communications University Announcements Reschedule the class hours Reschedule the class hours Wednesday 7:00PM – 10:00PM Wednesday 7:00PM – 10:00PM Please send the instructor an email (Internet email, not IntraMail) with your name (both in English and Korean), and student ID Please send the instructor an email (Internet email, not IntraMail) with your name (both in English and Korean), and student ID

3. June 25, 2004 3 Programming for WWW (Lecture#2) In-Young Ko, Information Communications University Review of the Previous Lecture WWW Concepts WWW Concepts Internet Addresses Internet Addresses Internet Packet Routing Internet Packet Routing The Future of the Web The Future of the Web HP Cooltown HP Cooltown Semantic Web Semantic Web

4. June 25, 2004 4 Programming for WWW (Lecture#2) In-Young Ko, Information Communications University Contents of Today’s Lecture HTTP (URLs, MIME types) HTTP (URLs, MIME types) HTML HTML

5. June 25, 2004 5 Programming for WWW (Lecture#2) In-Young Ko, Information 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

6. June 25, 2004 6 Programming for WWW (Lecture#2) In-Young Ko, Information Communications University RFC Search

7. June 25, 2004 7 Programming for WWW (Lecture#2) In-Young Ko, Information 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

8. June 25, 2004 8 Programming for WWW (Lecture#2) In-Young Ko, Information 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

9. June 25, 2004 9 Programming for WWW (Lecture#2) In-Young Ko, Information Communications University Hosts and Ports Host AHost B Ports …… Internet A client program A server program

10. June 25, 2004 10 Programming for WWW (Lecture#2) In-Young Ko, Information 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)

11. June 25, 2004 11 Programming for WWW (Lecture#2) In-Young Ko, Information 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

12. June 25, 2004 12 Programming for WWW (Lecture#2) In-Young Ko, Information 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

13. June 25, 2004 13 Programming for WWW (Lecture#2) In-Young Ko, Information 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

14. June 25, 2004 14 Programming for WWW (Lecture#2) In-Young Ko, Information 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

15. June 25, 2004 15 Programming for WWW (Lecture#2) In-Young Ko, Information Communications University HTTP Connection Test C:\>telnet www.icu.ac.kr 80 GET /index.html <HTML> ::Welcome to ICU:: ::Welcome to ICU:: …</html>

16. June 25, 2004 16 Programming for WWW (Lecture#2) In-Young Ko, Information 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

17. June 25, 2004 17 Programming for WWW (Lecture#2) In-Young Ko, Information 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

18. June 25, 2004 18 Programming for WWW (Lecture#2) In-Young Ko, Information Communications University HTML Document Structure <html><head> … … </head><body>…</body></html> Head Part: Information about the document Body Part: Content of the document

19. June 25, 2004 19 Programming for WWW (Lecture#2) In-Young Ko, Information 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:

20. June 25, 2004 20 Programming for WWW (Lecture#2) In-Young Ko, Information 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>

21. June 25, 2004 21 Programming for WWW (Lecture#2) In-Young Ko, Information 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: …

22. June 25, 2004 22 Programming for WWW (Lecture#2) In-Young Ko, Information 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>

23. June 25, 2004 23 Programming for WWW (Lecture#2) In-Young Ko, Information 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>

24. June 25, 2004 24 Programming for WWW (Lecture#2) In-Young Ko, Information 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>

25. June 25, 2004 25 Programming for WWW (Lecture#2) In-Young Ko, Information 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

26. June 25, 2004 26 Programming for WWW (Lecture#2) In-Young Ko, Information Communications University HTML – Frames (2) Index Frames

27. June 25, 2004 27 Programming for WWW (Lecture#2) In-Young Ko, Information 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>

28. June 25, 2004 28 Programming for WWW (Lecture#2) In-Young Ko, Information Communications University Homework #1 Due date: July 2nd Due date: July 2nd Create your home page by hand (do not use any WYSIWYG editors) Create your home page by hand (do not use any WYSIWYG editors) Create a Web page that provides reference information about one of the following topics: Create a Web page that provides reference information about one of the following topics: HTML authoring HTML authoring Scripting languages Scripting languages Web search engines Web search engines 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