1 / 42

Internet & Web Pages

Internet & Web Pages. Aims & Objectives. Brief Intro and History of the Internet Creating A Web Site Introduction to HTML Introduction to Information Architecture. History of the Internet.

sbriseno
Télécharger la présentation

Internet & Web Pages

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. Internet & Web Pages

  2. Aims & Objectives • Brief Intro and History of the Internet • Creating A Web Site • Introduction to HTML • Introduction to Information Architecture

  3. History of the Internet • ARPANET - the US department of defence wanted to develop a computer network that could withstand nuclear attack • Unintended consequences: huge use of Email • Soon became the tissue of a huge network and networks

  4. Early Arpanet • TCP/IP (unifying protocol) • Transmission Control Protocol (how data is broken up into packets and reassembled at the end) • Internet Protocol (how packets reach their destination) • FTP • Email • Telnet

  5. The 7 Layers of the OSI Model • OSI (Open System Interconnection) Model consists of 7 layers • Layer 1 (Physical): hardware • Layer 2 (Data Link): handling errors of layer 1, flow control, synchronisation • Layer 3 (Network): switching and routing, logical paths, virtual circuits • Layer 4 (Transport): end-to-end system services, ensures complete data transfer • Layer 5 (Session): connections between applications • Layer 6 (Presentation): independence from difference in representation (syntax layer) • Layer 7 (Application): end user processes (telnet, ftp)

  6. Hypertext • Vannevar Bush “As We May Think” 1945 • Director of the Office of Scientific Research and Development • The Memex • http://www.theatlantic.com/unbound/flashbks/computer/bushf.htm • Ted Nelson Literary Machines 1965 • Xanadu • Led to Software such as Hypercard

  7. The World Wide Web • Created by Tim Berners Lee, a researcher for CERN, in 1989 • Originally to aid researchers find information through a linked texts • Used HTTP for protocol and HTML for content of pages • Still no images at this point

  8. Early Browsers • 1993 only 100 web servers • First Browser well known called “Mosaic” • Could view images as well as text • Marc Andreesen one of the early developers of Mosaic left to form Netscape

  9. Early HTML • Early HTML - only text, links and images • Netscape 2.0 - could use tables and embed 3rd party applications (through plug-ins) • shockwave, video (mpeg), real audio • In 1996 Netscape 3.0 could see JAVA and developed the scripting language javascript

  10. Internet Explorer Catches Up • Up till version 4.0 Internet Explorer inferior to Netscape • Then makes quantum leap through use of • DHTML (Dynamic HTML) • Style Sheets • Java performance • Netscape remains the only true cross platform Browser

  11. The Current Browsers • Once upon a time, big separation of browser/email/ftp • Emacs: unified development environment • Now browsers also can do it all (monolithic) Internet Explorer Browser Email (Outlook Express) HTML Editor (Front Page Express) News Reader Net Meeting Netscape Communicator Browser (Navigator) Email (Messenger) HTML Editor (Composer) News Reader Conference

  12. Latest Developments • File Sharing • Napster, Gnutella, Morpheus • Dot Net • XML based Web Services • “Semantic Net” • Broadband • Media Delivery over the Web

  13. Create a Web Page • Open MS Word • Create new document or open existing one • Save as HTML

  14. Page Edited

  15. The Page in HTML • <HTML> • <HEAD> • <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252"> • <META NAME="Generator" CONTENT="Microsoft Word 97"> • <TITLE>Steve's HTML Page</TITLE> • </HEAD> • <BODY> • <P><FONT SIZE=6><P>Steve's HTML Page • </FONT> </P> • </BODY> • </HTML>

  16. Tags • HTML is a markup language • Tags are items surrounded by angle brackets containing codes indicating how text should be displayed • E.G. <B>Hello</B> appears Hello • <B> is the start-tag and </B> is the end tag

  17. Editor vs Handwritten HTML • Using Editor is imprecise but easier • Writing HTML code by hand is laborious but more powerful

  18. More HTML • Classic HTML works on a principle of semantic coding - markup is based on meaning (e.g this is emphasised, this is a heading, this is a subheading) rather than look (this is font size 16) • However pure HTML doesn’t really exist any more

  19. Headings • H1 to H6 used to indicate importance of topic • In practice we rarely use less than H3 • Using <font> tag to emphasize severely frowned on • users cannot control the display of the text • speech browsers cannot register the importance of the section

  20. Emphasis • The tags <em> and <I> are identical in as much as they produce italics, but the <em> is more classical and better style (semantics!) • The tags <strong> and <b> are identical in as much as they produce bold text but again the <strong> is more classical

  21. Lists • Two types: • <OL> ordered list, which numbers the items of the list • <UL> unordered list, which separates items with bullet points • List items are enclosed with the tags • <li> and </li>

  22. Paragraphs • Used with the <P></P> tags • Also the <BR> tag is used to create simple line breaks within the same paragraph

  23. Hyperlinks • What makes the web the web - a document can link to another document • Links can be either absolute or relative • Absolute specifies a full URL e.g. • http://www.microsoft.com • Relative specifies a file relative to the current file e.g • index2.htm

  24. Structure of a Hyperlink • Hyperlink uses the following syntax • <A HREF=”index2.htm”>My second page</A> • Where HREF = hypertext reference i.e. • The file to link to • “My second page” is the text being clicked

  25. Tags with Attributes • The <A> (anchor) tag is interesting in that it has an attribute (HREF) which has to be specified • The <FONT> tag is similar as is • The <IMG> tag • The <BODY> tag

  26. Font Tag • <FONT SIZE=16 FACE=“Times New Roman” COLOR=“00FFFF”> • Remember that the use of the FONT tag is frowned upon and so should be used sparingly

  27. IMG Tag • <IMG SRC=“next.gif” WIDTH=200 HEIGHT=360 BORDER=0 ALT=“Go to Next Page”> • width and height specify the size the image will take up within the page (not constrained by the original size of the image) • border is not normally used except when the image is to be a hyperlink itself • ALT a very important tag meaning alternative text I.E when the browser cannot display the image

  28. Images for Hyperlinking • Used all the time in navigation bars • You must specify the border to be 0 otherwise an unpleasant blue border will appear around the image

  29. The Body Tag • Very important tag which determines the background of the page • <BODY BGCOLOR=“#ff00ff” BACKGROUND=“waves.gif”> • If a colour is specified, that becomes the background colour, but if a background image is also specified this will override the colour

  30. The META Tag • Technically relevant tag controlling the behaviour of browsers and robots • Two possible attributes • <META HTTP-EQUIV="name" CONTENT="content"> controls browser display (equivalent to http header) • <META NAME="name" CONTENT="content"> controls other aspects; not clearly separated

  31. Distribution • Each HTML file exists only as a node within a vast network • Each image that appears on it comes from a separate file which is not part of it

  32. Back To Word • Adding a picture using Insert>Object>Microsoft Word Picture

  33. Look at the HTML now • <FONT SIZE=6><P>Steve's HTML Page</P> • <P><IMG SRC="Image16.gif" WIDTH=288 HEIGHT=192> </P></FONT></BODY> • Image now automatically generated by Word

  34. Adding a second HTML file • Create a new file in word • Save that has HTML in the same directory as the first file • Make a link to it from the first file • (write some text, select it, click on the globe+link icon, then select the file you’ve just created as being the linked file)

  35. What is a web site? • A lot of linked documents, a heterogeneous information space • A machine of meaning for a variety of users • It therefore requires thought regarding • Intended Audience • Design Motifs • Information Architecture

  36. How To Structure a Web Site • Hierarchical • tree structure, categories, sub categories • Data Driven • database with pages dynamically created • Hypertextual • pages with random, content driven links to other pages

  37. Hierarchical

  38. Hierarchical • The most common form of web site because mental model can be easily created by human beings • Problematical because of items which cross categories (tomato in fruit/vegetable schemas) • Design challenges (narrow and deep or broad and shallow) • Maintenance might not be easy

  39. Data Driven (see FEIS site) • Usually for subsections of web sites • e.g staff directories, telephone numbers, knowledge bases • Advantage is separation of content and form • visual appearance of site can be redesigned at will • Often rigid and bland

  40. Hypertextual • Links pages in web sites • Or whole sites (academic) • Good for serendipitous searching (we want to find something but we’re not sure what it is) • Can be disorienting (we don’t know where we or or how to get back to where we came from)

  41. Hybrid Sites

  42. What Next • Read Parker • Module Networks (Chapter 8 and 9) pp 295-388 • Read Unit 6 on the Web Site

More Related