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

Programming for WWWProgramming for WWW(ICE 1338)(ICE 1338)

Lecture #2Lecture #2 June 25, 2004

In-Young Koiko .AT. icu.ac.kr

Information and Communications University (ICU)

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

AnnouncementsAnnouncements

Reschedule the class hoursReschedule the class hours Wednesday 7:00PM – 10:00PMWednesday 7:00PM – 10:00PM

Please Please send the instructor an emailsend the instructor an email ((Internet emailInternet email, not IntraMail) with your , not IntraMail) with your namename (both in English and Korean), and (both in English and Korean), and student IDstudent ID


Review of the Previous LectureReview of the Previous Lecture

WWW ConceptsWWW Concepts Internet AddressesInternet Addresses Internet Packet RoutingInternet Packet Routing The Future of the WebThe Future of the Web

HP CooltownHP Cooltown Semantic WebSemantic Web


Contents of Today’s LectureContents of Today’s Lecture

HTTP (URLs, MIME types)HTTP (URLs, MIME types) HTMLHTML


RFCs (Request for Comments)RFCs (Request for Comments)

““AA set of technical and organizational set of technical and organizational notes about the Internetnotes about the Internet”” About Internet protocols, procedures, About Internet protocols, procedures,

programs, concepts, etc.programs, concepts, etc. Started in 1969 by Dr. Started in 1969 by Dr. Jon PostelJon Postel The RFC Editor: The RFC Editor: http://www.rfc-editor.org/http://www.rfc-editor.org/ ee.g.,.g.,

HTTP 1.1: RFC 2616HTTP 1.1: RFC 2616 URL: RFC 2718URL: RFC 2718


RFC SearchRFC Search


URI & URLURI & URL

““A A Uniform Resource Identifier (URI)Uniform Resource Identifier (URI) is a is a compact string of characters for compact string of characters for identifying an abstract or physical identifying an abstract or physical resourceresource.”.” – RFC2396 – RFC2396

““A A Uniform Resource Locator (URL)Uniform Resource Locator (URL) is a is a compact string representation of the compact string representation of the location for a resourcelocation for a resource that is available via that is available via the Internet.the Internet.”” – RFC2718– RFC2718


URI FormatURI Format

Format: Format: <scheme>:<scheme-specific-part><scheme>:<scheme-specific-part>

For the HTTP scheme:For the HTTP scheme:http://<net_loc>/<path>;<params>?<query>#<fragment>http://<net_loc>/<path>;<params>?<query>#<fragment>

e.g., e.g., http://www.google.com/search?hl=en&ie=UTF-8&q=urihttp://www.google.com/search?hl=en&ie=UTF-8&q=uri

e.g., e.g., http://www.w3.org/Protocols/#Specshttp://www.w3.org/Protocols/#Specs

Other schemes: Other schemes: ftpftp, , mailtomailto, , newsnews, , telnettelnet, , filefile, …, …

Full list of URI schemes: Full list of URI schemes: http://http://www.iana.org/assignments/uriwww.iana.org/assignments/uri-schemes-schemes


Hosts and PortsHosts and Ports

Host A Host B

Ports

Ports… …

Internet

A client program

A server program

A server program


Internet PortsInternet Ports

IANA Port AssignmentsIANA Port Assignments http://www.iana.org/assignments/port-numbershttp://www.iana.org/assignments/port-numbers

Well Known Ports (0 – 1023)Well Known Ports (0 – 1023) Assigned by IANA Assigned by IANA for system programsfor system programs e.g., HTTP: 80, HTTPs: 443, FTP: 21, Telnet: 23, e.g., HTTP: 80, HTTPs: 443, FTP: 21, Telnet: 23,

SMPT: 25, Finger: 79SMPT: 25, Finger: 79 Registered Ports (1024 – 49151)Registered Ports (1024 – 49151)

Listed by IANA Listed by IANA for user programsfor user programs e.g., MSNP (MSN Messenger): 1863e.g., MSNP (MSN Messenger): 1863

Private Ports (49152 – 65535)Private Ports (49152 – 65535)


MIME TypesMIME Types

Multipurpose Internet Mail Extensions Multipurpose Internet Mail Extensions (RFC 2045)(RFC 2045)

Adopted as part of HTTP to specify Adopted as part of HTTP to specify document document typestypes

Representation form: Representation form: type/subtypetype/subtype e.g., e.g., text/html, text/plain, audio/mpeg, video/jpeg, text/*text/html, text/plain, audio/mpeg, video/jpeg, text/*

Servers usually determine the types of a Servers usually determine the types of a document based on the file name’s extensiondocument based on the file name’s extension e.g., e.g., .html.html, , .htm.htm for for text/htmltext/html

A client (browser) sends MIME types that they A client (browser) sends MIME types that they can handle to a servercan handle to a server


HTTP (Hypertext Transfer Protocol)HTTP (Hypertext Transfer Protocol)

““An An application-level protocolapplication-level protocol for distributed, collaborative, for distributed, collaborative, hypermedia information systems.”hypermedia information systems.” –– RFC 2616 RFC 2616

Request:Request:HTTP-Method HTTP-Method Resource Resource HTTP/version HTTP/version Header fieldsHeader fields<Blank line><Blank line>MessageMessage e.g., e.g., GETGET /storefront.html /storefront.html HTTP/1.1HTTP/1.1

AcceptAccept: text/*: text/*

ReResponsesponse::Status lineStatus line Response hResponse header fieldseader fields<Blank line><Blank line>Response bodyResponse body e.g., e.g., HTTP/1.1HTTP/1.1 200 OK 200 OK

<html> … </html><html> … </html>

HTTP MethodHTTP Method

Status CodeStatus Code


HTTP Request MethodsHTTP Request Methods

GETGET -- -- RReturn the contents of eturn the contents of the the specifiedspecified resourceresource

HEADHEAD -- -- RReturn just the header eturn just the header information for a information for a resourceresource

POSTPOST -- Submit data to a resource or -- Submit data to a resource or programprogram

PUTPUT -- -- CCreate a new resource or replace reate a new resource or replace an existing onean existing one

DELETEDELETE -- -- DDelete a resourceelete a resource


HTTP Status CodesHTTP Status Codes 1xx 1xx –– InformationInformation 2xx 2xx –– SuccessSuccess

ee.g., 202 .g., 202 –– OK: The request was fulfilled OK: The request was fulfilled 204 204 –– No Response No Response

3xx 3xx –– RedirectionRedirection 4xx 4xx –– Client errorClient error

ee.g., 401 .g., 401 –– Unauthorized Unauthorized 404 404 –– Not found Not found

5xx 5xx –– Server errorServer error

Full status code list: Full status code list: http://www.w3.org/Protocols/HTTP/HTRESP.htmlhttp://www.w3.org/Protocols/HTTP/HTRESP.html


HTTP Connection TestHTTP Connection Test

C:\>C:\>telnet www.icu.ac.kr 80telnet www.icu.ac.kr 80

GET /index.htmlGET /index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML><HTML>

<HEAD><HEAD>

<title>::Welcome to ICU::</title><title>::Welcome to ICU::</title>

……

</html></html>


HTML (Hypertext Markup Language)HTML (Hypertext Markup Language)

““HTML HTML is tis the lingua franca for publishing he lingua franca for publishing hypertext on the World Wide Web.”hypertext on the World Wide Web.” –– W3C W3C

Derived from Derived from SGMLSGML (Generalized Markup (Generalized Markup Language), which is the ISO standard for Language), which is the ISO standard for describing describing text-formatting (markup) text-formatting (markup) languageslanguages c.f., PostScript, LaTex, etc.c.f., PostScript, LaTex, etc.

Current HTML versions: Current HTML versions: HTML 4.01HTML 4.01, , XHTML 1.0XHTML 1.0

Basic HTML SyntaxBasic HTML Syntax

Tags: Tags: ‘<’ ‘<’ tag_nametag_name ‘>’ ‘>’ Specify how the browser should display the Specify how the browser should display the

part of the document that is associated with part of the document that is associated with themthem

Most tags appear in pairsMost tags appear in pairse.g., This is e.g., This is <b><b>importantimportant</b></b>..

A tag may have some A tag may have some attributesattributes ee.g., This is a picture .g., This is a picture <img <img src=“pic1.jpg”/src=“pic1.jpg”/>>..

Comments: Comments: ‘’ ‘-->’

Opening TagOpening Tag Closing TagClosing TagTag ValueTag Value


HTML Document StructureHTML Document Structure

<html><html>

<head><head>

<title> <title> … … </title></title>

</head></head>

<body><body>

……

</body></body>

</html></html>

Head PartHead Part: Information : Information about the documentabout the document

Body PartBody Part: Content of the : Content of the documentdocument


HTML HTML –– Basic Text Formatting Basic Text Formatting

Paragraphs: Paragraphs: <p> <p> … </p>… </p>

Line breaks: Line breaks: <br/><br/>

Headings Headings –– 6 levels 6 levels Largest: Largest: <h1> <h1> … </h1>… </h1> Smallest:Smallest: <h6> … </h6> <h6> … </h6>

Blockquotes: Blockquotes: <blockquote> <blockquote> … </blockquote>… </blockquote>

Font styles and sizesFont styles and sizes Bold: Bold: <b> <b> … </b>… </b>, Italic: , Italic: <i> .. </i><i> .. </i>, underlined: , underlined: <u> … </u><u> … </u> Relative sizes: Relative sizes: <big> <big> … </big>… </big>, , <small> .. </small><small> .. </small> Subscript & superscript: Subscript & superscript: <sub> <sub> … </sub>… </sub>, , <sup> .. </sup><sup> .. </sup> Monospace font (e.g., Courier): Monospace font (e.g., Courier): <tt> <tt> … </tt>… </tt> Horizontal rules: Horizontal rules: <hr/<hr/>>


HTML HTML –– Text Formatting Example Text Formatting Example

<html><html> <head><title><head><title>ICE1338ICE1338</title></head></title></head> <body><body>

<br/><br/><h2><h2>Programming for WWWProgramming for WWW</h2></h2><h3><h3>Course Objective:Course Objective:</h3></h3><p><p>In this course, students will learn the coreIn this course, students will learn the core <i> <i>conceptsconcepts</i></i> and and <i><i>technologiestechnologies</i></i> behind the behind the <b><b>World Wide Web World Wide Web (Web)(Web)</b></b>, and , and <i><i>practicepractice</i></i> the languages and tools to build the languages and tools to build <u><u>Web-based contents and servicesWeb-based contents and services</u></u>. . </p></p><h3><h3>Related InformationRelated Information</h3></h3><h4><h4>W3CW3C</h4></h4><blockquote><blockquote>The World Wide Web Consortium (W3C) develops The World Wide Web Consortium (W3C) develops interoperable technologies (specifications, guidelines, software, interoperable technologies (specifications, guidelines, software, and tools) to lead the Web to its full potential.and tools) to lead the Web to its full potential.</blockquote></blockquote>

<hr/><hr/> <tt>I<tt>Information and Communications Universitynformation and Communications University</tt></tt> </body></body></html></html>


HTML HTML –– Images and Links Images and Links

Image tag: Image tag: <img src = “<img src = “……”/>”/> Anchor tag: Anchor tag: <a href = “<a href = “…”> … </a>…”> … </a>

Targets within documentsTargets within documents Set a target: Set a target: <a name = “<a name = “labellabel”> or <p id = “”> or <p id = “labellabel”>”> Reference a target in the same document: Reference a target in the same document:

<a href = “#<a href = “#labellabel”> ”> … </a>… </a> Reference a target in a different document: Reference a target in a different document:

<a href = “<a href = “doc.html#labeldoc.html#label”> … </a>”> … </a>


HTML HTML –– Images and Links Example Images and Links Example

<html><html> <head><title><head><title>ICE1338ICE1338</title></head></title></head> <body><br/><body><br/>

<h2><h2>Programming for WWWProgramming for WWW</h2></h2><a href="#objective">Objective</a> | <a href="#objective">Objective</a> | <a href="#info">Related Info.</a> |<a href="#info">Related Info.</a> |<a href="#students">Students</a><a href="#students">Students</a><h3 <h3 id="objective"id="objective">>Course Objective:Course Objective:</h3></h3><p><p>In this course, students will learn the coreIn this course, students will learn the core <i> <i>conceptsconcepts</i></i> and and <i><i>technologiestechnologies</i></i> behind the behind the <b><b>World Wide Web World Wide Web (Web)(Web)</b></b>, and , and <i><i>practicepractice</i></i> the languages and tools to the languages and tools to build build <u><u>Web-based contents and servicesWeb-based contents and services</u></u>. . </p></p><h3 <h3 id="info"id="info">>Related InformationRelated Information</h3></h3><h4><h4>W3CW3C</h4></h4><blockquote><blockquote>The The <a href=“http://www.w3.org><a href=“http://www.w3.org>World Wide World Wide Web Consortium (W3C) Web Consortium (W3C) </a></a> develops interoperable develops interoperable technologies (specifications, guidelines, software, and tools) technologies (specifications, guidelines, software, and tools) to lead the Web to its full potential.to lead the Web to its full potential.</blockquote></blockquote><h3 <h3 id=“students"id=“students">>StudentsStudents</h3></h3>Here are the pictures of the students:<br/>Here are the pictures of the students:<br/><img src = "ice1338_students1.JPG" width="250"/><img src = "ice1338_students1.JPG" width="250"/><img src = "ice1338_students2.JPG" width="250"/><img src = "ice1338_students2.JPG" width="250"/>

<hr/><hr/> <tt>I<tt>Information and Communications Universitynformation and Communications University</tt></tt> </body></body></html></html>


HTML HTML –– Lists Lists Unordered ListsUnordered Lists

<ul> <li><ul> <li>First ItemFirst Item</li></li> <li><li>Second ItemSecond Item</li></li> <li><li>Third ItemThird Item</li></li></ul></ul>

Ordered ListsOrdered Lists<ol> <li><ol> <li>First ItemFirst Item</li></li> <li><li>Second ItemSecond Item</li></li> <li><li>Third ItemThird Item</li></li></ol></ol>

Definition ListsDefinition Lists: Lists of terms: Lists of terms<dl> <dt><dl> <dt>1st Item1st Item</dt> <dd></dt> <dd>100100</dd></dd> <dt><dt>2nd Item2nd Item</dt> <dd></dt> <dd>200200</dd></dd> <dt><dt>3rd Item3rd Item</dt> </dt>

<dd><dd>300300</dd></dd></dl></dl>


HTML HTML –– Tables Tables <table border = “1”><table border = “1”><caption><caption>Table nameTable name</caption></caption><tr><th><tr><th>Header1Header1</th></th> <th><th>Header2Header2</th></th>

<th><th>Header3Header3</th></th></tr></tr><tr><td><tr><td>Cell 1x1Cell 1x1</td></td>

<td><td>Cell 1x2Cell 1x2</td></td> <td><td>Cell 1x3Cell 1x3</td></td>

</tr></tr><tr><td><tr><td>Cell 2x1Cell 2x1</td></td>

<td colspan=2 align=“center”><td colspan=2 align=“center”>Cell 2x2Cell 2x2</td></td></tr></tr></table></table>


HTML HTML –– Frames (1) Frames (1)

For displaying more than one documents at a For displaying more than one documents at a timetime

Defining frame areasDefining frame areas<frameset rows = “33% 33% 33%” cols = “25%, *”><frameset rows = “33% 33% 33%” cols = “25%, *”>

Setting the contents of the framesSetting the contents of the frames<frame src = “content1.html”><frame src = “content1.html”>

<frame src = “content2.html”> <frame src = “content2.html”> ……

FFrame 1rame 1 FFrame 2rame 2




HTML HTML –– Frames (2) Frames (2)

Index Index FramesFrames


HTML HTML –– Frames (3) Frames (3) <HTML><HTML><HEAD><TITLE>Java 2 Platform SE v1.4.2</TITLE><HEAD><TITLE>Java 2 Platform SE v1.4.2</TITLE></HEAD></HEAD><<FRAMESETFRAMESET cols="20%, 80%"> cols="20%, 80%"> <<FRAMESETFRAMESET rows="30%, 70%"> rows="30%, 70%"> <<FRAMEFRAME srcsrc="overview-frame.html" ="overview-frame.html" namename="packageListFrame" ="packageListFrame" titletitle="All ="All

Packages">Packages"> <<FRAME srcFRAME src="allclasses-frame.html" ="allclasses-frame.html" namename="packageFrame" ="packageFrame" titletitle="All classes and ="All classes and

interfaces">interfaces"> </FRAMESET></FRAMESET> <<FRAME srcFRAME src="overview-summary.html" ="overview-summary.html" namename="classFrame" ="classFrame" titletitle="Package, class ="Package, class

and interface descriptions" scrolling="yes">and interface descriptions" scrolling="yes"> <<NOFRAMESNOFRAMES>> <H2>Frame Alert</H2><H2>Frame Alert</H2> <P>This document is designed to be viewed using the frames feature. If you see <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>this message, you are using a non-frame-capable web client.</P> <BR/>Link to<A HREF="overview-summary.html">Non-frame version.</A><BR/>Link to<A HREF="overview-summary.html">Non-frame version.</A> </NOFRAMES></NOFRAMES></FRAMESET></FRAMESET></HTML></HTML>


Homework #1Homework #1 Due date: Due date: July 2ndJuly 2nd Create Create your home pageyour home page by handby hand (do not use (do not use

any WYSIWYG editors)any WYSIWYG editors) Create a Web page that provides Create a Web page that provides reference reference

informationinformation about one of the following topics: about one of the following topics: HTML authoringHTML authoring Scripting languagesScripting languages Web search enginesWeb search engines

ReferenceReference HTML Tutorial: HTML Tutorial: http://www.w3.org/MarkUp/Guide/http://www.w3.org/MarkUp/Guide/ Jakob Nielsen's Jakob Nielsen's guidelines for good Home Page guidelines for good Home Page

designdesign: : http://www.useit.com/alertbox/20020512.htmlhttp://www.useit.com/alertbox/20020512.html

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

Documents

Transcript of Programming for WWW (ICE 1338) Lecture #2 Lecture #2 June 25, 2004 In-Young Ko iko.AT. icu.ac.kr...