1 / 50

Refresher Lectures

Refresher Lectures. WEBPG2/CWP 112 by CSN. Refresher Lectures. The Internet and WWW HTTP HTML URL. The Internet and WWW. WEBPG2 Welcome Lecture. The Internet and WWW. Aims To learn some network, Internet and WWW terminologies. LAN.

weldon
Download Presentation

Refresher Lectures

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 HTTP GET Request HTTP Response web client hardware, running web client software, e.g. web browser web server hardware running web server software

  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. request 80 Listening on ports Web Client Software Server

  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 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 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 • &lt; < • &gt; > • &nbsp; (space) • &amp; &

  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.: • <img src="logo.jpg" alt="Logo" /> • <input type=submit name="Go" value="Go" />

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

  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) • <a href="url">text</a> • <a href="http://www.ue.edu.ph">UE Home</a>

  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

  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: • <a href="http://www.ue.edu.ph/manila/index.html">UE</a> • 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 • <a href="/dirA/dirC/dirD/c.html">Click me</a> • 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 • <a href="dirD/c.html">Click me</a> • 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. <a href="/my%20page.html">My page</a> • 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/PHP

More Related