1. Lecture 1 by David Gevorkyan

2. Outline Introduction to Internet Introduction to WWW Web Servers Web Browsers URL HTTP HTML elements and attributes

3. History of Internet Origin of the Internet is the ARPANET (Advanced Research Projects Agency Network) that was initiated in 1969 to support researchers on DOD (Department of Defense) projects. In 1989, this changed with the introduction of World Wide Web (WWW), commonly referred to as the Web.

4. Internet Simply stated, Internet is a network of networks Technically, however, Internet is a collection of networks based on the IP (Internet Protocol) stack (initially referred to as the DOD “Department of Defense” or ARPANET Protocol Suite)

5. WWW Background 1989-1990 – Tim Berners-Lee invents the World Wide Web at CERN Means for transferring text and graphics simultaneously Client/Server data transfer protocol Communication via application level protocol System ran on top of standard networking infrastructure Text mark up language Not invented by Berners-Lee Simple and easy to use Requires a client application to render text/graphics

6. The client server paradigm A widely used form of communication Server application waits passively for contact from clients A server provides a specific service Client application actively initiates contact with the server Information can flow in both directions Typical situation is many clients interacting with each server

7. WWW Components Structural Components Clients / browsers Servers Caches Internet - the global infrastructure which facilitates data transfer Semantic Components Hyper Text Transfer Protocol (HTTP) Hyper Text Markup Language (HTML) eXtensible Markup Language (XML) Uniform Resource Locator (URL) and Uniform Resource Identifier (URI)

8. WWW Structure Clients use browser application to send URIs via HTTP to servers requesting a Web page Web pages constructed using HTML (or other markup language) and consist of text, graphics, sounds + embedded files Servers (or caches) respond with requested Web page Or with error message Client’s browser renders Web page returned by server Page is written using Hyper Text Markup Language (HTML) Displaying text, graphics and sound in browser Writing data as well The entire system runs over standard networking protocols (TCP/IP, DNS,…)

9. WWW Structure (cont.) Web Browser (Firefox) Web Browser (Internet Explorer) Web site: http://www.aua.amhttp://www.aua.am Web server (program) HTML documents (index.html, history.html) HTTPHTML Database (MySQL, Oracle) SQL data HTTP

10. Web Browsers Browsers are clients always initiate, servers react Allow user to browse resources available on server either existing or dynamically built documents Mosaic - NCSA (Univ. of Illinois), in early 1993 First to use a GUI, led to explosion of Web use Initially for X-Windows, under UNIX, but was ported to other platforms by late 1993 Current common browsers Mozilla Firefox, Internet Explorer, Opera, Safari, Google Chrome

11. Web Servers Provide responses to browser requests All communications between browsers and servers use Hypertext Transfer Protocol (HTTP) Web servers run as background processes in the operating system Monitor a communications port on the host, accepting HTTP messages when they appear Common servers Apache, JBoss, Internet Information Server (IS)

12. Job of the web server

13. Uniform Resource Locator The basis for locating resources in WWW protocol://host:port/path (protocols: http, ftp, telnet) Example: http://validator.w3.org/index.htmlhttp://validator.w3.org/index.html http - tells the server that an HTTP request is being initiated The "validator.w3.org" is the name of the machine running the Web server. (This is actually the domain name used by the Internet to locate machines on the Internet, where org is domain w3 is first sub-domain then validator is second sub- domain)validator.w3.org The “/index.html" is the name of a file on the machine validator.w3.org/index.html validator.w3.org

14. The HTTP Protocol Invented by Tim Berners-Lee in 1990 RFC 1945 (1996) - HTTP/1.0 RFC 2068 (1997) - HTTP/1.1 RFC 2616 (1999) - HTTP/1.1 (update to 2068)

15. Features of HTTP Protocol for client/server communication The heart of the Web Very simple request/response protocol Client sends request message, server replies with response message Stateless Each request is an independent transaction - unrelated to any previous requests Advantage: simplifies server design - information about previous transactions does not need to be stored Disadvantage: more information must be included in each request Relies on URI naming mechanism

16. HTTP Operation On the Internet HTTP usually uses TCP/IP connections TCP Port 80 is the default (though others can be specified) HTTP uses a Request / Response paradigm Client establishes a connection to the server, and sends it a request Server responds to the request by generating a response (which may or may not contain content)

17. HTTP Request Delivered from a client to a server containing instructions for the server Contains the method to be applied to the data resource the identifier of the resource the protocol version in use Most commonly used methods: GET - Fetch a document HEAD - Fetch just the header of the document POST - Execute the document, using the data in body PUT - Store a new document on the server DELETE - Remove a document from the server

18. Request message METHOD /path-to-resource HTTP/version-number Header-Name-1: value Header-Name-2: value [optional request body] General request message structure GET /index.html HTTP/1.1 Host: www.aua.am Accept: text/* User-Agent: Mozilla/2.02Gold (WinNT; I) Example

19. HTTP Response Message generated by a server after receiving and interpreting a request Responses contain: Status line with the protocol version, a status code, and a “reason phrase” Response-Header (containing information about the server) Entity Header (meta-information) Entity Body (data)

20. Response message HTTP/version-number status-code message Response-Header-Name-1: value Response-Header-Name-2: value Entity-Header-Name-1: value Entity-Header-Name-2: value [optional entity body] General response message structure HTTP/1.1 200 OK Server: Apache (Red-Hat/Linux) Content-Type: text/html Content-Length: 9934 School of Computer Science … Example

21. Some HTTP Status Codes 200 : OK 201 : Created 202 : Accepted 204 : No Content 301 : Moved Permanently 302 : Moved Temporarily 400 : Bad Request 401 : Unauthorized 403 : Forbidden 404 : Not Found 500 : Internal Server Error 503 : Service Unavailable

22. Introduction to HTML HTML stands for Hyper Text Markup Language The language that browsers understand and servers speak An HTML file is a text file containing small markup tags The markup tags tell the Web browser how to display the page An HTML file must have an htm or html file extension An HTML file can be created using a simple text editor

23. HTML page example

24. Simple example Example page! Hi.

25. HTML Tags HTML tags are used to mark-up HTML elements HTML tags are surrounded by the two characters The surrounding characters are called angle brackets HTML tags normally come in pairs like and The first tag in a pair is the start tag, the second tag is the end tag The text between the start and end tags is the element content HTML tags are not case sensitive, means the same as

26. The tag Example page! Hi. The tag is the container for the entire web page

27. The tag Example page! Hi. The tag contains all the visual aspects of the page: additional tags and content

28. The tag Example page! Hi. The tag contains metadata, information about the web page: the title, the author, the language that the document is in

29. The tag Example page! Hi. The tag is used to give the page a clear, descriptive, identifying title which is also used as the Bookmark / Favorites description in the browser

30. HTML element and attributes Examples: This text is bold... Element nameAttribute name Attribute value starting tagclosing tag

31. The basic types of attributes Color #RRGGBBcolorNamergb(r,g,b) #FF0000redrgb(255,0,0) #0000FFbluergb(0,0,255) width, height, size width=100px width=100% width=10cm

32. Header’s tags title Page title Meta - You can control how a page is indexed by search engines using meta tags Author Description Keywords Redirect http://www.aua.am …

33. HTML Tags: Headings This is a heading H1 This is a heading H2 This is a heading H3 This is a heading H4 This is a heading H5 This is a heading H6

34. HTML Tags: Paragraphs Paragraph - the paragraph tag gives the browser instructions to display the text in a paragraph with a blank line separating it from other text or graphics This is a paragraph This is another paragraph

35. HTML Tags: Line Breaks Line Breaks - goes to the next line This is a para graph with line breaks

36. HTML Tags: Horizontal Rule Following this line is a horizontal rule. Preceding this line is a horizontal rule.

37. HTML Tags: Preformatted Tag and displays text as formatted Displays text spacing “as-is” Use only when absolutely necessary or there is no other way to display text in the correct format; ascii graphics is an example

38. HTML Tags: Style tags This is Bold... This is Italic... This is Typewriter... This is Bold AND Italic And So is This Code This is Small This is Big

39. HTML Tags: Lists Ordered lists - numbered Unordered lists - bulleted Other lists (not covered here) directory menu definition

40. Ordered Lists and tags used and - list item tags Example: Item One Item Two List items listed with numbers in front

41. Ordered Lists - Example Item One Item Two Item Three Item Four Item Five

42. Unordered Lists and tags used and - list item tags Example: Item One Item Two List items listed with bullets

43. Unordered Lists - Example Original Trek Spock Sulu Next Generation Riker Troi

44. HTML Tags: Images Image source tag - link to a graphic/image alignment can be top, bottom, middle

45. Image Example College of Engineering Logo http://coe.aua.am/images/top-small.jpg

46. HTML Tags: Image Map...

47. HTML Tags: Anchor / Link 1. Text to be displayed Yahoo 2. Example 2 3.Function... 4.Send mail Click me to send an email

48. Link Example AUA Website contains information about the American University of Armenia http://www.aua.am/

49. Image as Link Example http://en.wikipedia.org/wiki/Barac k_Obama http://www.podcastingnews.com/conte nt/wp-content/uploads/2008/06/barack- obama1.jpg

50. Mailto Example Would you like to send some e-mail to mailto:davidgev@gmail.com David Gevorkyan ? Do so now!

51. HTML Tags: Escape Characters &lt less than &gt greater than &amp ampersand &copy copyright

52. Input <input type=text value="Text" onchange="alert(this.value.length)" size=20 maxlength=55>

53. Table 1. a b c d e f

54. Table (cont.) 2. rowspan item 1 item 2 item 3 item 4 item 5 3. colspan item 1 item 2 item 3 item 4 item 5

55. Events onload (body, frame) onunload (body, frame) onclick ondblclick onmousedown onmouseup onmouseover onmousemove onmouseout onfocus (input, textarea) onblur (input, textarea) onkeypress onkeydown onkeyup onsubmit (form) onreset (form) onselect(input, textarea) onchange(input, textarea, select) <input type=“button" value=“Click Me“ onclick="alert(‘Button Clicked’)">

56. Web site design tips Carry a theme through your pages consistent themes help provide context Don’t add a link every time a common phrase appears Your pages will look like Christmas trees and will be impossible to read Consider a “Return to Home Page” link on every page Try to keep logos < 500 or so pixels wide Good examples: Yahoo, Oracle, Ebay

57. WT Homework 1 Design your personal web site using material learned. Make sure to use images, styles, tables, links. Due: April 12

58. References HTML Tutorial: http://w3schools.com/html/default.asphttp://w3schools.com/html/default.asp HTTP: http://www.w3.org/Protocols/http://www.w3.org/Protocols/ Web Server: http://en.wikipedia.org/wiki/Web_serverhttp://en.wikipedia.org/wiki/Web_server Web Browser:http://en.wikipedia.org/wiki/Web_browserhttp://en.wikipedia.org/wiki/Web_browser