The World Wide Web PDF

The World Wide Web Innovation is serendipity, so you don’t know what people will make. Tim Berners-Lee The advent of WWW The World Wide Web, invented at CERN, near Geneva, Switzerland in 1989 by British computer scientist Tim Berners-Lee,...

The World Wide Web Innovation is serendipity, so you don’t know what people will make. Tim Berners-Lee The advent of WWW The World Wide Web, invented at CERN, near Geneva, Switzerland in 1989 by British computer scientist Tim Berners-Lee, has grown to revolutionize communications worldwide EECS1520: WWW 2  What is the World Wide Web (WWW) A way of accessing information on the Internet Information is encapsulated in a web page and viewed in web browser Web pages are linked to one another via hypertext links Clicking on a link accesses the associated web page or resource www ≠ internet Internet: infrastructure www: one of the services on internet EECS1520: WWW 3 Client-Server Model Describes the interaction of networked computers Clients request information from servers Servers respond with the information (if applicable) Web server HTTP File server FTP …. Any computer can act as a client or server Computer typically described as “client” or “server” based on its HTTP role the majority of the time EECS1520: Computer Networking 4 HyperText Transfer Protocol (HTTP) Method of requesting and transmitting web pages Communication between client computers and web servers is done by sending HTTP Requests and receiving HTTP Responses When a user clicks on a link or enters a URL in a browser, a request is sent to the HTTP port (80 or 8080) of the associated web server The server then responds to the client’s request o If the request is valid and the resource is available, the server transmits the resource o Otherwise, the server responds with an error message or not at all This exchange happens not just for the web page, but for all resources required to display the web page (e.g., images, video, style and script files) EECS1520: WWW 5 EECS1520: WWW 6 Web browsers Tim Berners-Lee ▪ 1980: ENQUIRE (a centralized data-base using HTML) ▪ 1990: WorldWideWeb (1st web browser and web editor) Also developed HTTP and URL 1993: Mosaic (1st GUI browser by students at U. Illinois) 1994: Netscape Navigator (1st commercial browser) 1995: Internet Explorer (by Microsoft) 2002 : Firefox (by Mozilla) 2003: Safari (by Apple) 2008: Google Chrome (overtook Firefox, Safari, and IE) 2016: Edge (Microsoft Windows 10) EECS1520: WWW 7 Search Engines System that searches the web and catalogues (indexes) the content of web pages Users provide search criteria and the search engine presents a collection of web content that satisfies some or all of the criteria Search criteria can be in the form of text, and can be combined with Boolean operators to improve specificity Search results can sometimes be filtered, based on geographic origin, timeframe, and content type Examples: Google, Bing, Yahoo, … EECS1520: WWW 8  Web Authoring “O, what a tangled web we weave…” EECS1520: WWW 9 HyperText Markup Language (HTML) Defines content of web page as text file with.html extension Tags specify content characteristics ▪ Appear as text in < > (e.g., indicating document body) ▪ Some may appear as a pair of open-close tags ▪ Closing tag (e.g., … ) ▪ A tag may specify additional attributes A web page’s text is within its HTML file, but other content (e.g., images) are linked to using the appropriate tag One web page can contain links to other pages, creating a web of interconnected content EECS1520: WWW 10 "What You See Is What You Get" Software Abbreviated as WYSIWYG ("wiz-ee-wig"), refers to any kind of editing software where the content in the editor resembles its final form. Examples of WYSIWYG: Most text editors Microsoft Word Microsoft PowerPoint Microsoft Excel Gimp Audacity etc... HTML, when edited in a standard text editor, is NOT WYSIWYG (though WYSIWYG editors for HTML exist). EECS1520: WWW 11 Example of a simple web page Not WYSIWYG WYS A text file with.html extension. WYG Note the URL: file:///C:/... EXAMPLE.html EECS1520: WWW 12 Basic Structure of a Web Page ▪ outline the HTML document ▪ contain information about the document (e.g., author, keywords)... ▪ contain the main content of the web page ▪ Spacing within the HTML file typically does not affect its correctness or appearance, but is done... to aid in human readability ▪ Significant tags are usually on a line by themselves ▪ Lines between significant tags are usually indented for human readability EECS1520: WWW 13 Some HTML Tags … text that should be treated as a separate paragraph forced line break horizontal rule across page … unordered list (usually bullets) … ordered list (e.g. numbered) … list item … level 1 heading (also h2, h3,…h6) … division (area) with special characteristics displays an image file … hypertext link anchor “…” replaced by any comment (i.e., any description, note, or memo for human use) EECS1520: WWW 14 Tag Attributes Provide additional characteristics for a tag Syntax: attrName="value" Examples: … Content between these tags will be centered aligned Displays the image indicated by src (path or URL) and restricts the image to 300 pixels wide, by 200 pixels high York University Displays “York University” as a hyperlink to the path or URL indicated by href (in this case, www.yorku.ca) A full reference of HTML tags and attributes are available at w3schools.com EECS1520: WWW 15 EECS1520: WWW 16 Cascading Style Sheets (CSS) CSS describes how HTML elements are to be displayed on screen, paper, or in other media. Defines the styles of text and other classes of content (e.g., background, images, etc.) CSS saves a lot of work. It can control the layout of multiple web pages all at once. CSS can be added to HTML elements in 3 ways: Inline - by using the style attribute in HTML elements Internal - by using a element in the section External - by using an external CSS file The most common way to add CSS is to keep the styles in separate CSS files. EECS1520: WWW 17 Inline CSS Inline CSS is used to apply a unique style to a single HTML element. Inline CSS uses the style attribute of an HTML element. This example sets the text color of the element to blue: Internal CSS Internal CSS is used to define a style for a single HTML page. Internal CSS is defined in the section of an HTML page, within a element: External CSS EECS1520: WWW 18  Simple CSS Example More on www3schools: https://www.w3schools.com/css/css_intro.asp EECS1520: WWW 19  Tim Berners-Lee The web is more a social creation than a technical one. I designed it for a social effect –to help people work together – and not as a technical toy. The ultimate goal of the Web is to support and improve our weblike existence in the world. We clump into families, associations, and companies. We develop trust across the miles and distrust around the corner. A ‘Magna Carta for the web’ will protect people’s rights online from threats such as fake news, prejudice and hate, says founder of the world wide web Edward Snowden I spoke with Tim Berners-Lee, the guy who invented the World Wide Web. We agree on the necessity for this generation to create what he calls the Magna Carta for the Internet. We want to say what "digital rights" should be. What values should we be protecting, and how do we assert them. EECS1520: WWW 20