The Internet & The World Wide Web

Transcription

1 The Internet & The World Wide Web

2 "Most of the fundamental ideas of science are essentially simple and may as a rule be expressed in a language comprehensible by everyone." Albert Einstein

3 Overview This chapter covers: Needed software The Internet/Web basics Use HTML tags and attributes to structure a document Use HTML to link to other pages Understand absolute and relative pathnames Use HTML to show images Use HTML to encode lists and tables

4 Software Requirements There are a few requirements for our software: Easy to use Cross-platform Free of charge, i.e., Open Source These requirements drive the choices for software as well as the programming language used

5 Software Requirements In general, we need 3 pieces of software: (1) a Web browser, (2) an editor and (3) an FTP client You already have (1) and (2) installed, but... You are not required to install software (except for (3) ), but... You may already have some of this software installed... good! Advise: take the time to download and install the software

6 Web Browser Used to view content on the Web Default: Wintel is Internet Explorer, Mac is Safari, Linux is Firefox To meet the software requirements, we recommend Firefox as the course Web browser Free, X-platform, easy to use Course documentation & examples assume FF in use Using FF will pay off later when debugging...

7 Program Editor Used to type in programs and save them in textual format (i.e., not a.doc or.docx) Default: Wintel is notepad, Mac is textedit, Linux is distro-dependent To meet the software requirements, we recommend gedit as the course editor Free, X-platform, easy to use Course documentation & examples assume gedit in use Text highlighting, language sensitive

8 FTP Clients FTP = File Transfer Protocol Used to transfer files from one computer to another FTP Client = a program that implements FTP You probably do not have an FTP client installed on your machine Download & install Filezilla Free, X-platform, easy to use Course documentation & examples assume Filezilla in use

9 Software Demo Edit an example Web page (gedit) View it locally (Firefox) Modify it locally View the changes

10 Evolution of the Internet Internet Largest and most well-known computer network Links millions of computers all over the world Has become a household word only during the past two decades Has actually operated in one form or another for much longer than that

11 Evolution of the Internet From ARPANET to Internet 2 ARPANET: The predecessor of the Internet Created in 1969 Named after the Advanced Research Projects Agency (ARPA), which sponsored its development Initially connected four supercomputers Eventually evolved into today s Internet

12 Evolution of the Internet The World Wide Web The collection of Web pages available through the Internet Proposed by Tim Berners-Lee in 1989 Originally only text-based content; release of the Mosaic browser in 1993 led to graphical content Web 2.0 Wide variety of content available via Web pages today such as social networking, RSS, podcasts, blogs and wikis The World Wide Web and the Internet are not owned by any person, business, or organization

13 Evolution of the Internet The Internet Community Today Users: people who use the Internet Internet Service Providers (ISPs) Provide access to the Internet, typically for a fee Include most communication and media companies

14 Internet Myths The Internet is Free Most people and businesses pay for Internet access Businesses, schools, and libraries lease communications lines from phone companies Mobile phone users pay hotspot providers or mobile phone providers for access Fee-based content is growing at a rapid pace Music/movie downloads Donation based sites

15 Internet Myths Someone Controls the Internet No single group or organization controls the Internet Governments can regulate Internet use within its country, but difficult to enforce The Internet and World Wide Web are Identical Internet is the physical network WWW is the collection of Web pages available over the Internet Other resources are available via the Internet, i.e., FTP

16 Internet Basics The communication protocol used on the Internet is called TCP/IP TCP: Transmission Control Protocol IP: Internet protocol Every computer on the Internet has a unique identifier, IP address Ex

17 Web Basics The language used to communicate Web pages is called Hypertext Transfer Protocol (HTTP) Text-based language Used a request/response model Uses a client/server architecture Web browsers (clients) request web pages and display the resources Web Servers store web pages and respond whjen the pages are requested

18 The URL Requesting a Web Page You request a Web page by specifying a URL URL = Universal Resource Locator protocol Server computer's name Page's path name

19 The Page Source Describing a Web Page Web pages are not WYSIWYG Web pages are stored as a combination of contents and description called the page source When the browser receives a Web page, it interprets the page source and displays the image that we see The page source is written in a special "language" called HTML HTML = Hypertext Markup Language

20 Writing HTML To view a page on the web, we need to: Use a program called an editor to type in and modify a page source gedit, Notepad, Textedit, etc... Display the page source with a Web browser Firefox, Internet Explorer, Safari, etc... Transfer the page source from local computer to Web server Filezilla, sshftp, etc...

21 Marking Up With HTML Formatting with Tags HTML is a "language" used to "markup" a document The markup is accomplished via "tags" Tags are words or abbreviations enclosed in angle brackets: < > Examples: <title> <p>

22 Marking Up With HTML Formatting with Tags Tags usually come in pairs: begin tag and end tag, with contents between them. The end tag looks like the begin tag with a slash in front of the name Example: <title>my Home Page</title>

23 Structuring Documents All Web pages are structured the exact same way 3 "container tags" must be present: <html> <head> <body>

24 Structuring Documents White Space Spaces, tabs and new lines Web browsers ignore white space Width of browser window determines line length when displayed <p> makes a new paragraph </p> Headings in HTML Use h1 h8 tags for headings: <h1> largest heading </h1> <h8> smallest heading </h8>

25 Structuring Documents Attributes in HTML Tag attributes allow you to specify more information about a tag Ex: Can t say "justify" text. Must say "left justify" or "right justify" Ex: <p align="center">this is centered</p>

26

27

28 Marking Links With Anchor Tags Two Sides of a Link The text in the current location (anchor) The address of the next page (hyperlink) Both parts specified in the anchor tag <a> Mark <a href= >Rothko</a> Normal text Hyperlink reference Anchor Mark Rothko

29 URLs & Pathnames Absolute URL / Pathname Complete URL s that specify an exact hyperlink reference Used to refer to "external" Web pages Ex: Relative Pathnames "Incomplete" URL s that specify a hyperlink reference relative to some root directory Used to refer to "internal" Web pages Pages can be reached from the current page without specifying a full URL address Ex: pictures/myimage.jpg

30 Including Pictures Image Tag Format Text is nice but pictures are worth a thousand words! Use the <img> tag to include a picture Ex: <img src="mypic.jpg"> GIF and JPEG Images 2 different image formats GIF: small, low-color images buttons, simple cartoons, simple drawings JPEG: large, high-color images photographs

31 Including Pictures Positioning the Image in the Document Big Q Where are my images placed? Default Rule: Images appear in the page at the point where the tag is specified in the HTML the text lines up with the bottom of the image Use the align attribute to change the default behavior: top, middle, bottom (default) Ex: <img src="myimg.jpg" align="top">

32 Including Pictures Positioning the Image in the Document (cont.) Text around an image: align="right" or align="left" Can specify image size in pixels Use height or width attributes: height="130" and width="192" height= 25% or width= 25% Example: <img src="myimg.gif" align="right" height="25%">

33 Color in Web Pages Predefined HTML colors (16): black, silver, white, gray, red, fuchsia, maroon, purple, blue, navy, aqua, teal, lime, green, yellow & olive Specify page background color in body tag: <body bgcolor="silver"> Specify page text color in body tag: <body text="red" bgcolor="silver"> Font tag has a color attribute: <font color="yellow">this text is yellow</font>

34 Color in Web Pages Color by Number More than 16 colors exist! Use numbers to describe RGB combinations: specify the amount of red, green and blue present in the overall color For the Web, specify colors using hexadecimal numbers Use 3 pairs of hex numbers #FF0000 Intense red #00FF00 Intense green #0000FF Intense blue

35

36

37 HTML Lists Lists help organize information 3 types of lists in HTML: Unordered Ordered Definition (will not discuss) The browser automatically formats the list

38 HTML Lists Unordered Lists Use <ul> </ul> tags to contain the list Surround each list item with <li> </li> <ul> <li>luxo Jr.</li> <li>toy Story</li> <li>monsters Inc.</li> </ul> Luxo Jr. Toy Story Monsters Inc.

39 HTML Lists Ordered Lists Use <ol> </ol> tags to contain the list Surround each list item with <li> </li> <ol> <li>hydrogen, H</li> <li>helium, He</li> <li>lithium, Li</li> <li>beryllium, Be</li> </ol> 1.Hydrogen, H 2.Helium, He 3.Lithium, Li 4.Beryllium, Be

40 HTML Lists Ordered Lists Use <ol> </ol> tags to contain the list Surround each list item with <li> </li> <ul> <li>pear</li> <li>apple</li> <ol> <li>granny Smith</li> <li>fuji</li> </ol> <li>cherry</li> </ul> Pear Apple 1.Granny Smith 2.Fuji Cherry

41 HTML Tables Tables help organize data into rows and columns: think spreadsheet Use the <table></table> tags Each row goes into <tr></tr> tags The actual data goes into <td></td> tags Optional: <caption></caption>, <th></th> Border option specifies size of the border: <table border=2> </table> <table border=0> </table>

42 HTML Tables <table border> <tr> <td>canada</td> <td>ottowa</td> <td>english/french</td> </tr> <tr> <td>iceland</td> <td>reykjavik</td> <td>icelandic</td> </tr> </table>

43 <table border=1> <caption>country Data</caption> <tr> <th>country</th> <th>capital</th> <th>language(s)</th> </tr> <tr> <td>canada</td> <td>ottowa</td> <td>english/french</td> </tr> <tr> <td>iceland</td> <td>reykjavik</td> <td>icelandic</td> </tr> <tr> <td>norway</td> <td>oslo</td> <td>norwegian</td> </tr> </table> HTML Tables

44 HTML Wrap Up This is not all there is to HTML. We have only scratched the surface! Tags surround all objects appearing on a page Usually, Web designers use software instead of HTML by hand: WYSIWYG Web Authoring software: Adobe Dreamweaver Web authoring tools cannot do it all... you still need to know "what is under the hood"

45 Summary Covered: Needed software to download The Internet/Web basics HTML tags and attributes to structure a document HTML to link to other pages Absolute and relative pathnames HTML to show images HTML to encode lists and tables