DOCSLIB.ORG

01-Www-Intro.Pdf

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
01-Www-Intro.Pdf The WWW and HTML CMPT 281 Outline • Hypertext • The Internet • The World-Wide-Web • How the WWW works • Web pages • Markup • HTML Hypertext • Hypertext is text displayed on a computer that contains links (‘hyperlinks’) to other locations in that document or other documents History of Hypertext • Vannevar Bush and the Memex • Ted Nelson and Xanadu • Douglas Englebart and NLS Vannevar Bush The Memex • 1945! • An information-storage machine with many mechanisms for retrieving information • Trails of links connecting sequences of information • Storage based on microfilm • Never built The Memex Ted Nelson Ted Nelson Xanadu • 1967 • Invented the term ‘hypertext’ • Documents made of other pieces • Two-way links • Document version control Ted Nelson’s vision of hypertext • Ted Nelson, a professional visionary, wrote in 1965 of "Literary Machines," computers that would enable people to write and publish in a new, nonlinear format, which he called hypertext. Hypertext was "nonsequential" text, in which a reader was not constrained to read in any particular order, but could follow links and delve into the original document from a short quotation. Ted described a futuristic project, Xanadu, in which all the world's information could be published in hypertext. For example, if you were reading this book in hypertext, you would be able to follow a link from my reference to Xanadu to further details of that project. In Ted's vision, every quotation would have been a link back to its source, allowing original authors to be compensated by a very small amount each time the quotation was read. He had the dream of a utopian society in which all information could be shared among people who communicated as equals. He struggled for years to find funding for his project, but success eluded him. – Tim Berners-Lee with Mark Fischetti, Weaving the Web, 1999, p.5. Douglas Engelbart NLS • Hypertext links in documents • Community editing (like wikis) • Videoconferencing • Multi-user software (groupware) • The mouse Hypertext in NLS – clips 7 & 8 The Internet Just before the WWW… The World-Wide Web • The inventor: Tim Berners-Lee • The first browser: lynx • The first graphical browser: Mosaic • Growth of the web Tim Berners-Lee The invention of the WWW • 1989 • Originally developed as a way for physicists at CERN to share information • Built on top of the Internet and TCP/IP • HTTP: HyperText Transfer Protocol • First browser: lynx (text only) Mosaic (1993) Growth of the WWW Date Websites 200000000 12/01/1990 1 180000000 12/01/1991 10 12/01/1992 50 160000000 06/01/1993 130 09/01/1993 204 140000000 10/01/1993 228 120000000 12/01/1993 623 06/01/1994 2738 100000000 12/01/1994 10022 80000000 06/01/1995 23500 01/01/1996 100000 60000000 03/01/1996 135396 40000000 04/01/1996 150295 05/01/1996 193150 20000000 06/01/1996 252000 0 07/01/1996 299403 08/01/1996 342081 09/01/1996 397281 10/01/1996 462047 11/01/1996 525906 12/01/1996 603367 01/01/1997 646162 02/01/1997 739688 03/01/1997 883149 04/01/1997 1002612 How the Web works How the Web works • A ‘client-server’ system – Client: the computer running the browser – Server: the computer (i.e., the web server) that stores the page • Clients and servers must communicate to deliver pages to the browser – They use TCP/IP over the Internet – They add a layer called HTTP HTTP in a TCP/IP packet How the Web works • How does the client get the page? – Pages have ‘Uniform Resource Locators’ (URLs) • e.g., “www.cs.usask.ca” – These translate to a particular server address – The browser program makes a request using HTTP • e.g., “GET /faculty/gutwin/281/index.html” – The server program returns the content – The browser interprets and displays the page How the Web works • How does the client get the page? – Pages have ‘Uniform Resource Locators’ (URLs) • e.g., “www.cs.usask.ca” – These translate to a particular server address – The browser program makes a request using HTTP • e.g., “GET /faculty/gutwin/281/index.html” – The server program returns the content – The browser interprets and displays the page What’s in a web page? What’s in a web page? What’s in a web page? What’s in a web page? What’s in a web page? • Content – Text, images, videos, etc. • Structure – Headings, lists, addresses, etc. • Appearance – Instructions about how content should appear – e.g., what colour text • Meta-data that is not displayed – e.g., keywords, comments What’s in a web page? • Content and structure are defined using HTML • HTML is the HyperText Markup Language Aside: separation of concerns Aside: separation of concerns What’s in a web page? • Content and structure are defined using HTML • HTML is the HyperText Markup Language Markup Languages • Markup provides instructions about the content in a web page – e.g., information about structure • These instructions must be distinguishable from the content itself • HTML uses the idea of tags to encode instructions – Commands inside angle brackets – e.g. <h1>CMPT 281</h1> Markup Languages • The tags are interpreted, not displayed – They tell the browser about the structure • <h1> means “start of a first-level heading” • </h1> means “end of a first-level heading” Markup Languages HTML basics • A web page is an HTML document • A very basic template for a page: <html> <head> <title> This is the Title of the Page </title> </head> <body> The main stuff of the page goes here. </body> </html> Types of HTML tags • Tags are instructions about structure Category Tags Page title <title> Headers <h1>, <h2>, etc. Paragraphs <p>, <br> Strong and emphasis * <strong>, <em> Lists <ul>, <ol>, <li> Center <center> Horizontal rule (line) <hr /> Address <address> Links in HTML • URL = Uniform Resource Locator – URLs are the mechanism for hyperlinks • To another web location (absolute linking): <a href="http://www.cs.usask.ca/">CS Home</a> • To a local document (relative linking): – <a href=“examples.html">281 Examples</a> • To another part of the same document: <a name="important">Some text here</a> <a href="#important">link to important stuff</a> Get started • Go through the HTML tutorials at: – http://www.w3schools.com/html/ • Reading: – Textbook Chapters 1 & 2 • Assignment 1 .
Load more

Recommended publications
  • The Origins of the Underline As Visual Representation of the Hyperlink on the Web: a Case Study in Skeuomorphism
    The Origins of the Underline as Visual Representation of the Hyperlink on the Web: A Case Study in Skeuomorphism The Harvard community has made this article openly available. Please share how this access benefits you. Your story matters Citation Romano, John J. 2016. The Origins of the Underline as Visual Representation of the Hyperlink on the Web: A Case Study in Skeuomorphism. Master's thesis, Harvard Extension School. Citable link http://nrs.harvard.edu/urn-3:HUL.InstRepos:33797379 Terms of Use This article was downloaded from Harvard University’s DASH repository, and is made available under the terms and conditions applicable to Other Posted Material, as set forth at http:// nrs.harvard.edu/urn-3:HUL.InstRepos:dash.current.terms-of- use#LAA The Origins of the Underline as Visual Representation of the Hyperlink on the Web: A Case Study in Skeuomorphism John J Romano A Thesis in the Field of Visual Arts for the Degree of Master of Liberal Arts in Extension Studies Harvard University November 2016 Abstract This thesis investigates the process by which the underline came to be used as the default signifier of hyperlinks on the World Wide Web. Created in 1990 by Tim Berners- Lee, the web quickly became the most used hypertext system in the world, and most browsers default to indicating hyperlinks with an underline. To answer the question of why the underline was chosen over competing demarcation techniques, the thesis applies the methods of history of technology and sociology of technology. Before the invention of the web, the underline–also known as the vinculum–was used in many contexts in writing systems; collecting entities together to form a whole and ascribing additional meaning to the content.
    [Show full text]
  • Hypertext Semiotics in the Commercialized Internet
    Hypertext Semiotics in the Commercialized Internet Moritz Neumüller Wien, Oktober 2001 DOKTORAT DER SOZIAL- UND WIRTSCHAFTSWISSENSCHAFTEN 1. Beurteiler: Univ. Prof. Dipl.-Ing. Dr. Wolfgang Panny, Institut für Informationsver- arbeitung und Informationswirtschaft der Wirtschaftsuniversität Wien, Abteilung für Angewandte Informatik. 2. Beurteiler: Univ. Prof. Dr. Herbert Hrachovec, Institut für Philosophie der Universität Wien. Betreuer: Gastprofessor Univ. Doz. Dipl.-Ing. Dr. Veith Risak Eingereicht am: Hypertext Semiotics in the Commercialized Internet Dissertation zur Erlangung des akademischen Grades eines Doktors der Sozial- und Wirtschaftswissenschaften an der Wirtschaftsuniversität Wien eingereicht bei 1. Beurteiler: Univ. Prof. Dr. Wolfgang Panny, Institut für Informationsverarbeitung und Informationswirtschaft der Wirtschaftsuniversität Wien, Abteilung für Angewandte Informatik 2. Beurteiler: Univ. Prof. Dr. Herbert Hrachovec, Institut für Philosophie der Universität Wien Betreuer: Gastprofessor Univ. Doz. Dipl.-Ing. Dr. Veith Risak Fachgebiet: Informationswirtschaft von MMag. Moritz Neumüller Wien, im Oktober 2001 Ich versichere: 1. daß ich die Dissertation selbständig verfaßt, andere als die angegebenen Quellen und Hilfsmittel nicht benutzt und mich auch sonst keiner unerlaubten Hilfe bedient habe. 2. daß ich diese Dissertation bisher weder im In- noch im Ausland (einer Beurteilerin / einem Beurteiler zur Begutachtung) in irgendeiner Form als Prüfungsarbeit vorgelegt habe. 3. daß dieses Exemplar mit der beurteilten Arbeit überein
    [Show full text]
  • T1, U-2 and L1 Transmitters™ Software V3.06 April 22, 2014
    ™ Air Integrated Dive Computer User Manual ™ Air Integrated Dive Computer Software v1.18 Ultrasonic software v1.11 And T1, U-2 and L1 Transmitters™ Software v3.06 April 22, 2014 Liquivision Products, Inc -1- Manual 1.6; Lynx 1.18; US 1.11; U-2 3.06 ™ Air Integrated Dive Computer User Manual CONTENTS IMPORTANT NOTICES ............................................................................................................................... 8 Definitions ..................................................................................................................................................... 9 User Agreement and Warranty ....................................................................................................................... 9 User Manual .................................................................................................................................................. 9 Liquivision Limitation of Liability ............................................................................................................... 10 Trademark Notice ........................................................................................................................................ 10 Patent Notice ............................................................................................................................................... 10 CE ............................................................................................................................................................... 10 LYNX
    [Show full text]
  • Ted Nelson History of Computing
    History of Computing Douglas R. Dechow Daniele C. Struppa Editors Intertwingled The Work and Influence of Ted Nelson History of Computing Founding Editor Martin Campbell-Kelly, University of Warwick, Coventry, UK Series Editor Gerard Alberts, University of Amsterdam, Amsterdam, The Netherlands Advisory Board Jack Copeland, University of Canterbury, Christchurch, New Zealand Ulf Hashagen, Deutsches Museum, Munich, Germany John V. Tucker, Swansea University, Swansea, UK Jeffrey R. Yost, University of Minnesota, Minneapolis, USA The History of Computing series publishes high-quality books which address the history of computing, with an emphasis on the ‘externalist’ view of this history, more accessible to a wider audience. The series examines content and history from four main quadrants: the history of relevant technologies, the history of the core science, the history of relevant business and economic developments, and the history of computing as it pertains to social history and societal developments. Titles can span a variety of product types, including but not exclusively, themed volumes, biographies, ‘profi le’ books (with brief biographies of a number of key people), expansions of workshop proceedings, general readers, scholarly expositions, titles used as ancillary textbooks, revivals and new editions of previous worthy titles. These books will appeal, varyingly, to academics and students in computer science, history, mathematics, business and technology studies. Some titles will also directly appeal to professionals and practitioners
    [Show full text]
  • A Web Based System Design for Creating Content in Adaptive
    Malaysian Online Journal of Educational Technology 2020 (Volume 8 - Issue 3 ) A Web Based System Design for Creating [1] [email protected], Gazi University, Faculty of Gazi Content in Adaptive Educational Education, Ankara Hypermedia and Its Usability [2] [email protected], Gazi University, Faculty of Gazi Education, Ankara Yıldız Özaydın Aydoğdu [1], Nursel Yalçın [2] http://dx.doi.org/10.17220/mojet.2020.03.001 ABSTRACT Adaptive educational hypermedia is an environment that offers an individualized learning environment according to the characteristics, knowledge and purpose of the students. In general, adaptive educational hypermedia, a user model is created based on user characteristics and adaptations are made in terms of text, content or presentation according to the created user model. Different contents according to the user model are shown as much as user model creation in adaptive educational hypermedia. The development of applications that allow the creation of adaptive content according to the features specified in the user model has great importance in ensuring the use of adaptive educational hypermedia in different contexts. The purpose of this research is to develop a web- based application for creating content in adaptive educational hypermedia and to examine the usability of the developed application. In order to examine the usability of the application developed in the scope of the study, a field expert opinion form was developed and opinions were asked about the usability of the application from 7 different field experts. As the result of the opinions, it has been seen that the application developed has a high usability level. In addition, based on domain expert recommendations, system revisions were made and the system was published at www.adaptivecontentdevelopment.com.
    [Show full text]
  • Dynamic Adaptive Hypermedia Systems for E-Learning Elvira Popescu
    Dynamic adaptive hypermedia systems for e-learning Elvira Popescu To cite this version: Elvira Popescu. Dynamic adaptive hypermedia systems for e-learning. Education. Université de Technologie de Compiègne, 2008. English. tel-00343460 HAL Id: tel-00343460 https://tel.archives-ouvertes.fr/tel-00343460 Submitted on 10 Dec 2008 HAL is a multi-disciplinary open access L’archive ouverte pluridisciplinaire HAL, est archive for the deposit and dissemination of sci- destinée au dépôt et à la diffusion de documents entific research documents, whether they are pub- scientifiques de niveau recherche, publiés ou non, lished or not. The documents may come from émanant des établissements d’enseignement et de teaching and research institutions in France or recherche français ou étrangers, des laboratoires abroad, or from public or private research centers. publics ou privés. DOCTORAT TIS Cotutelle de thèse – Nom de l’établissement : Université de Craiova Label européen (nom du pays) : Roumanie Thèse financée par : l’Université de Craiova, Roumanie Dynamic adaptive hypermedia systems for e-learning Directeurs de Thèse (NOM - Prénom) : TRIGANO Philippe (NOM - Prénom) : RASVAN Vladimir. Date, heure et lieu de soutenance : 15 novembre 2008, 12h00, Université de Craiova, Roumanie NOM :Popescu ....................................................... Prénom : Elvira ................................................................ Courriel : [email protected] MEMBRES DU JURY - TRIGANO Philippe, Professeur des Universités (directeur de thèse) Spécialité:
    [Show full text]
  • Internet Explorer Users Are Required to Add the Portal URL to Trusted Sites
    CLA Client Portal Browser and Silverlight FAQs 1. Question: I am receiving an “Error 500” when clicking the link to access the CLA Document Portal. Resolution: Verify with your IT department that the portal is not blocked by any internal monitoring or protection applications. 2. Question: How do I know if my computer has Microsoft Silverlight Installed? Resolution: The first time you try and login to the portal you will be prompted to install Silverlight from Microsoft’s website if you don’t have it already installed. The installation typically takes less than one minute and is completely safe. http://www.microsoft.com/getsilverlight/Get-Started/Install/Default.aspx If you cannot, or prefer not to, install Silverlight on your machine, a simplified version of the document portal that does not require Silverlight is available. Click on the Take me to the non- Silverlight login on the CLA Document Portal page (www.claconnect.com/docportal). 3. Question: I cannot access the CLA Document Portal. (Server error/Page not found) Resolution: Check that you are using a Microsoft Silverlight 4 compatible browser on all PC’s or MAC. A complete list of browsers and operating systems that support Silverlight 4 can be found at http://www.microsoft.com/getsilverlight/locale/en-us/html/installation-win-SL4.html Please note: Internet Explorer users are required to add the portal URL to Trusted Sites. Adding to Trusted Sites Internet Explorer settings 1. Open Internet Explorer and browse to https://portal.cchaxcess.com/Portal/. 2. In Internet Explorer, select Tools / Internet Options; then select the Security tab and click Trusted Sites and then Sites.
    [Show full text]
  • World-Wide Web Proxies
    World-Wide Web Proxies Ari Luotonen, CERN Kevin Altis, Intel April 1994 Abstract 1.0 Introduction A WWW proxy server, proxy for short, provides access to The primary use of proxies is to allow access to the Web the Web for people on closed subnets who can only access from within a firewall (Fig. 1). A proxy is a special HTTP the Internet through a firewall machine. The hypertext [HTTP] server that typically runs on a firewall machine. server developed at CERN, cern_httpd, is capable of run- The proxy waits for a request from inside the firewall, for- ning as a proxy, providing seamless external access to wards the request to the remote server outside the firewall, HTTP, Gopher, WAIS and FTP. reads the response and then sends it back to the client. cern_httpd has had gateway features for a long time, but In the usual case, the same proxy is used by all the clients only this spring they were extended to support all the within a given subnet. This makes it possible for the proxy methods in the HTTP protocol used by WWW clients. Cli- to do efficient caching of documents that are requested by ents don’t lose any functionality by going through a proxy, a number of clients. except special processing they may have done for non- native Web protocols such as Gopher and FTP. The ability to cache documents also makes proxies attrac- tive to those not inside a firewall. Setting up a proxy server A brand new feature is caching performed by the proxy, is easy, and the most popular Web client programs already resulting in shorter response times after the first document have proxy support built in.
    [Show full text]
  • Hypervideo and Annotations on the Web
    Hypervideo and Annotations on the Web Madjid Sadallah Olivier Aubert Yannick Prie´ DTISI - CERIST LIRIS - Universite´ Lyon 1 LIRIS - Universite´ Lyon 1 Alger, Algerie´ UMR 5205 CNRS UMR 5205 CNRS Email: [email protected] Email: [email protected] Email: [email protected] Abstract—Effective video-based Web information system de- the hypermedia system. Hypervideo addresses this issue by ployment is still challenging, while the recent widespread of a specialization of hypermedia centered on interactive video. multimedia further raises the demand for new online audiovisual We define hypervideo as being an interactive video-centric document edition and presentation alternatives. Hypervideo, a specialization of hypermedia focusing on video, can be used on the hypermedia document built upon an audiovisual content - a set Web to provide a basis for video-centric documents and to allow of video objects -. Several kinds of related data are presented more elaborated practices of online video. In this paper, we pro- within the document in a time synchronized way to augment pose an annotation-driven model to conceptualize hypervideos, the audiovisual part around which the presentation is organized promoting a clear separation between video content/metadata in space and time. and their various potential presentations. Using the proposed model, features of hypervideo are grafted to wider video- The articulation of video content with navigation facilities based Web documents in a Web standards-compliant manner. introduces new ways for developing interfaces, rendering the The annotation-driven hypervideo model and its implementation content and interacting with the document. By supplying offer a general framework to experiment with new interaction spatio-temporal behaviors to links, hypervideos allow address- modalities for video-based knowledge communication on the Web.
    [Show full text]
  • Web Browsing and Communication Notes
    digital literacy movement e - learning building modern society ITdesk.info – project of computer e-education with open access human rights to e - inclusion education and information open access Web Browsing and Communication Notes Main title: ITdesk.info – project of computer e-education with open access Subtitle: Web Browsing and Communication, notes Expert reviwer: Supreet Kaur Translator: Gorana Celebic Proofreading: Ana Dzaja Cover: Silvija Bunic Publisher: Open Society for Idea Exchange (ODRAZI), Zagreb ISBN: 978-953-7908-18-8 Place and year of publication: Zagreb, 2011. Copyright: Feel free to copy, print, and further distribute this publication entirely or partly, including to the purpose of organized education, whether in public or private educational organizations, but exclusively for noncommercial purposes (i.e. free of charge to end users using this publication) and with attribution of the source (source: www.ITdesk.info - project of computer e-education with open access). Derivative works without prior approval of the copyright holder (NGO Open Society for Idea Exchange) are not permitted. Permission may be granted through the following email address: [email protected] ITdesk.info – project of computer e-education with open access Preface Today’s society is shaped by sudden growth and development of the information technology (IT) resulting with its great dependency on the knowledge and competence of individuals from the IT area. Although this dependency is growing day by day, the human right to education and information is not extended to the IT area. Problems that are affecting society as a whole are emerging, creating gaps and distancing people from the main reason and motivation for advancement-opportunity.
    [Show full text]
  • The Media Assemblage: the Twentieth-Century Novel in Dialogue with Film, Television, and New Media
    THE MEDIA ASSEMBLAGE: THE TWENTIETH-CENTURY NOVEL IN DIALOGUE WITH FILM, TELEVISION, AND NEW MEDIA BY PAUL STEWART HACKMAN DISSERTATION Submitted in partial fulfillment of the requirements for the degree of Doctor of Philosophy in English in the Graduate College of the University of Illinois at Urbana-Champaign, 2010 Urbana, Illinois Doctoral Committee: Professor Michael Rothberg, Chair Professor Robert Markley Associate Professor Jim Hansen Associate Professor Ramona Curry ABSTRACT At several moments during the twentieth-century, novelists have been made acutely aware of the novel as a medium due to declarations of the death of the novel. Novelists, at these moments, have found it necessary to define what differentiates the novel from other media and what makes the novel a viable form of art and communication in the age of images. At the same time, writers have expanded the novel form by borrowing conventions from these newer media. I describe this process of differentiation and interaction between the novel and other media as a “media assemblage” and argue that our understanding of the development of the novel in the twentieth century is incomplete if we isolate literature from the other media forms that compete with and influence it. The concept of an assemblage describes a historical situation in which two or more autonomous fields interact and influence one another. On the one hand, an assemblage is composed of physical objects such as TV sets, film cameras, personal computers, and publishing companies, while, on the other hand, it contains enunciations about those objects such as claims about the artistic merit of television, beliefs about the typical audience of a Hollywood blockbuster, or academic discussions about canonicity.
    [Show full text]
  • GSC3000, VRC2500 Manual
    GSC3000 VRC2500 Broadcast Facility Control Systems INSTALLATION & OPERATION MANUAL 5 SERIES Includes Instructions for Lynx Software GSC3000 & VRC2500 Installation & Operation Manual System Series 5 Lynx Software version 5.1 Revision B (November 2006) Copyright © 2006 Burk Technology, Inc. All rights reserved. No part of this manual may be reproduced in any form or by any means without written permission from Burk Technology. Information in this manual is subject to change without notice. Contents CHAPTER 1: INTRODUCTION .................................................................................................................1 Contacting Burk Technology.......................................................................................................................................................1 Unpacking........................................................................................................................................................................................2 VRC2500 ..............................................................................................................................................................2 GSC3000 I/O 8 & I/O 16 unit............................................................................................................................3 Voice Interface Unit................................................................................................................................................3 Command Relay Unit..............................................................................................................................................4
    [Show full text]