1. Refresher Lectures WEBPG2/CWP 112 by CSN

2. Refresher Lectures The Internet and WWW HTTP HTML URL

3. The Internet and WWW WEBPG2 Welcome Lecture

4. The Internet and WWW Aims To learn some network, Internet and WWW terminologies

5. LAN Local Area Networks (LAN) connected computers that are relatively close to each other, typically within the same room or building

6. WAN Wide Area Networks (WAN) connected devices or other networks over a greater distance

7. internet A network of networks is an internet

8. The Internet The Internet is a global internet that uses a particular set of communications protocols (the TCP/IP stack of protocols)

9. Protocols If different networks are to inter-operate, we need to specify and agree the rules by which two computers on different networks will exchange messages In computer networking, such a set of rules is called a communications protocol

10. The WWW WWW = hypermedia + the Internet Hypermedia text, picture, audio, video, animation, object The Internet is not the World Wide Web The World Wide Web is an application of the Internet Email is another application of the Internet

11. Web requests and responses web client hardware, running web client software, e.g. web browser web server hardware running web server software HTTP GET Request HTTP Response

12. Hypertext Transfer Protocol (HTTP) WEBPG2 Welcome Lecture

13. HTTP Aims: to know a little about simple HTTP requests that request (static) web pages to see where DNS fits in

14. The Web is a client-server application Web client computers run web client software (e.g. browsers) the software make requests for web resources (e.g. (X)HTML files, CSS files, image files,...) Web server computers host web resources (text files, graphics files, programs,...) run web server software that responds to requests

15. Ports One server might be offering ('hosting') more than one service E.g. a server computer may be running web server software and email server software How does a client indicate which server program is to handle its requests? Each server program is assigned an identification number, called a port number

16. Listening on ports Web Client SoftwareServer request80 Port Number Address of Server Program 80Web 143Email 21FTP

17. What your browser does when you enter a URL or click on a link... If it needs to request a new web page, your browser works out: the protocol (which usually defaults to http) the server name (e.g. www.ue.edu.ph) the port number (which defaults to 80) the pathname of the file you want (e.g. /manila/index.html) Your browser must now send a request to the web server, asking for this file The request (and the server's response) must be formulated according to a communications protocol (in this case, HTTP)

18. HTTP requests Request line (required): command (method), URL and HTTP version number Request header lines (largely optional): info about date, browser,... Request message body (optional): empty for most commands (methods)

19. HTTP requests GET /manila/index.html HTTP/1.1 Date: Fri, 01 June 2012 21:00:00 GMT Connection: close Host: www.ue.edu.ph From: chito@ue.edu.ph Accept: text/html, text/plain User-Agent: Mozilla/4.0 Request Line Request header Lines Message Body

20. HTTP Responses Status line (optional): HTTP version number, status code, short explanation of code Response header lines (optional): info about date, server,... Response message body (required): the requested resource (web page, image,...)

21. HTTP Responses HTTP/1.1 200 OK Date: Fri, 01 June 2012 21:00:00 GMT Connection: close Server: Apache 2.0 Accept-Ranges: bytes Content-Type: text/html Content-Length: 200 Last-Modified: Fri, 31 May 2012 10:14:00 GMT User-Agent: Mozilla/4.0 UE Welcome to UE Status Line Response header Lines Response Message Body

22. HTTP response status codes 1XX: Informational (used in 1.1): e.g. 100 Continue, 101 Switching Protocols 2XX: Success: e.g. 200 OK, 206 Partial Content 3XX: Redirection: e.g. 301 Moved Permanently, 304 Not Modified 4XX: Client error: e.g. 400 Bad Request, 403 Forbidden, 404 Not Found 5XX: Server error: e.g. 500 Internal Server Error, 503 Service Unavailable

23. DNS Domain Name System Prior to sending the HTTP request, your browser needs to convert from server name to server IP address www.ue.edu.ph  116.50.153.37

24. Embedded Content Suppose the web page contains embedded content (e.g. stylesheets, images) The server does not send all the content in one go The client receives the web page and then sends separate requests for the embedded content

25. HTML WEBPG2 Welcome Lecture

26. HTML Aims: to understand structural and presentational markup to know the components of HTML to understand the hierarchical structure of (X)HTML documents

27. Markup languages Annotations on a document are called markup In Computer Science, the markup is included as extra text in the document It is included for the benefit of programs, such as web browsers

28. Elements, attributes and values An HTML document comprises elements An element comprises content (the text), plus markup (the tags: start tag and end tag) element = start tag + content + end tag Tags may take attributes and their values to make them more specific

29. Elements html (lang), head, meta, title, link (rel, href), body h1—h6, p, em, strong, i, b ul, ol, li section, nav a (href) img (src, title, alt) table, caption, tr th, td (colspan, rowspan) pre

30. Character references To include special characters in the content, use character references << >> (space) &&

31. Void elements For some elements (e.g. img and link), there is never any content—void element For these, never write the end tag The way we write them (the XHTML syntax), e.g.:

32. Nested elements One element can be nested within another, to several layers, provided the nesting is done properly: Correct: This is correct Incorrect: This is incorrect

33. Uniform Resource Locator WEBPG2 Welcome Lecture

34. URL Aims: to know the parts of a simple URL to know the difference between absolute and relative URLs to know what kind of URL to use for external and internal links

35. Without hyperlinks, it wouldn't be a web! A link is a connection from one Web resource to another One way to link to a resource is to say where it is located (its 'address') On the Web, these 'addresses' are called Uniform Resource Locators (URLs) text UE Home

36. URLs A URL comprises a protocol and the 'rest' separated by a colon or a colon and two forward slashes The scheme tells the client (e.g. your browser) what to do with the rest of the URL Protocols: http, e.g. http://www.ue.edu.ph/manila/index.html https, e.g. https://www.google.com/ file:///F:/My%20Pictures/20120518%20- %20Photoshoots/csn_800.jpg mailto, e.g. mailto:d.bridge@cs.ucc.ie Question: If you omit the protocol, what does your browser assume?

37. HTTP URLs In general, the format is: http://user:password@hostname-or-IP- address:port/pathname?query#fragment We will focus on the main parts: http://hostname-or-IP-address/pathname E.g. http://www.ue.edu.ph/manila/index.html

38. IP addresses Every device on a network has a hardware address (e.g. MAC address), unique to that network (at least) But we need an address that is unique across the whole Internet Hence, every device that is connected to the Internet is assigned a unique IP address (Simplification!) To send a message to a device you use its IP address

39. The Domain Name System (DNS) Numeric IP addresses are cumbersome for humans Hence, most computers (hosts) that are connected to the Internet also have one (or more) names (hostnames) E.g. www.ue.edu.ph, www.google.com DNS acts like a directory enquiries system: it automatically takes names and translates them into IP addresses

40. Pathname Directories/folder are organised hierarchically A pathname is typically a sequence of directories/folders, ending with the file name E.g. /dirA/dirC/a.html

41. Pathname

42. Links Absolute URLRelative URL External Link hostname + absolute pathname n/a Internal Linkabsolute pathnamerelative pathname

43. Absolute URLs and relative URLs Absolute URLs use absolute pathnames: ones that give complete directions to the file starting from the top of the file hierarchy (/) Relative URLs use relative pathnames: ones that give directions to the file starting from the current document

44. Using an absolute URL for an external link Example: UE Since you are linking to a page on another computer, you must include: the hostname (or IP address), e.g. www.rte.ie an absolute pathname, e.g. /manila/index.html These are also the URLs that you can see in (or type into) the Location box in your browser

45. Using an absolute URL for an internal link Since you are linking to a page on the same computer, you can omit the hostname/IP address But you include the absolute pathname of the file you're linking to (starting with /) E.g. suppose I am putting an anchor element into a.html that links to c.html Click me Forward slash at the start Question: You can include the hostname (or IP address). But why is it better to omit it (as in these examples)?

46. Using a relative URL for an internal link In this case, you omit the hostname/IP address But you include the relative pathname of the file you're linking to, i.e. starting from the current document E.g. suppose I am putting an anchor element into a.html that links to c.html Click me No forward slash at the start

47. Index files Omitting the file name (so the URL ends with a slash) gives the URL of a directory E.g. http://www.ue.edu.ph/manila/ In this case, most servers look for a default file to display Most often, they look for a file called index.html http://www.ue.edu.ph/manila/index.html If there is no such file, they'll probably just list the contents of the directory or display an error message if directory listing is not allowed

48. File and folder names Unix/Linux/Mac OS X are case-sensitive; Windows isn't It's best to use only lowercase, to avoid all problems Avoid space and punctuation characters in these names Suppose your file is called my page.html (which has a space) URLs cannot contain spaces: they must be encoded as %20 E.g. My page The same applies to about 20 other characters too, e.g., @

49. Fragments We also know how to link to a particular point within a document E.g. at the bottom of the page, we can include a link back to the top How?

50. References Gosselin, D., Kokoska, D., & Easterbrooks, R. (2011). PHP programming with MySQL. Boston, MA: Course Technology Cengage Learning. php.net (nd), PHP, Retrieved November 13, 2011 from http://www.php.net Wikipedia (n.d.), Wikipedia, The Free Encyclopedia, Retrieved November 13, 2011 from http://en.wikipedia.org/wiki/PHPhttp://en.wikipedia.org/wiki/PHP