html: lists, images, tables network basics UNIVERSITY OF MASSACHUSETTS AMHERST CMPSCI 120 Fall 2010 See notes 09/16/10 Go to the validator

Transcription

1 Lecture 5 html: lists, images, tables network basics Back to html See notes 09/16/10 Go to the validator 1

2 Images <img src= /> names location of the image file <img src= width="200" height="150"/> image w h height, width not required maintain aspect ratio <img src= width="200" height="150 alt="stonehenge" /> alt short description use title for mouseover effect Images For complex images, you may need to also give a longer description: <img src= width="200" height="150" alt="stonehenge longdesc= /> Again this is not visible if the image loads 2

3 Images can create images in a number of ways: a digital camera scanning an image creating one with a painting or drawing program most browsers understand GIF and JPEG image formats, newer browsers also understand the PNG image format avoid using large image files which to use? JPEG -- photos and other smoothly varying images GIF and PNG -- graphics art involving flat areas of color, lines and text All support progressive rendering -- a crude version of the image is sent first and progressively refined. Image usage on the web Facts GIF images are the most common, making up 54.7% of all images on the Web. PNG make up only 14.4% of all images. JPG images contribute the most to page size, but make up less than one third of the images. There are 42.8 images per Web page and 240 KB of images on each web page on average. Images contribute to 61.3% of the download size of a Web page on average. Average image size per format: JPEG: 11.8 KB PNG: 4.4 KB GIF: 2.4 KB 3

4 Relative Links can link to a URL, but also link to a local image, e.g., we could link to an image in the same directory by just giving its filename: <img src=stonehenge.jpg width="200" height="150"/> Or could link by pathname: <img src=images/stonehenge2.jpg width="200" height="150"/> Or using relative addressing: <img src=../stonehenge3.jpg width="200" height="150"/> ~username pwd public_html Stonehenge.jpg Stonehenge3.jpg Images Stonehenge2.jpg More links <a> tag <a href=" </a> <a href="moreexamples/example2.html">stonehenge</a> <a href="../tmp.html">example</a> Make an image a hypertext link: <a href="moreexamples/example2.html"> <img src=images/stonehenge2.jpg width="200" height="150"> </a> 4

5 Lists HTML supports three kinds of lists bulletted list or unordered list. <ul> <li>the first list item</li> <li>the second list item</li> <li>the third list item</li> </ul> numbered list or ordered list. <ol> <li>the first list item</li> <li>the second list item</li> <li>the third list item</li> </ol> Lists definition list nested lists Go to W3C <dl> <dt>the first term</dt> <dd>its definition</dd> <dt>the second term</dt> <dd>its definition</dd> <dt>the third term</dt> <dd>its definition</dd> </dl> <ol> <li>the first list item</li> <li> the second list item <ul> <li>first nested item</li> <li>second nested item</li> </ul> </li> <li>the third list item</li> </ol> use paragraphs and headings etc. for longer list items 5

6 Other tags & special characters Emphasis You can emphasize one or more words with the <em> tag, for instance: This is a really <em>interesting</em> topic! Forcing line breaks <p><em>the Willows</em><br> 21 Runnymede Avenue<br> Morton-in-the-marsh<br> Oxfordshire OX27 3BQ</p> write this as <br /> To prevent the browser from wrapping text use Sweetened carbonated beverages, such as Coca Cola, have attained world-wide popularity. bad practice to use to indent text.. use style rules. Special characters For copyright notices, or trademarks it is customary to include the appropriate signs: Note HTML 4.0 defines for the trademark sign but this is not yet as widely supported as Others you may find useful (more in notes): 6

7 Tables Tables are used for information as well as for layout. You can stretch tables to fill the margins, specify a fixed width or leave it to the browser to automatically size the table to match the contents. Tables <table border ="1"> <tr><th>fruit</th><th>cost per bag</th><th>individual cost</th></tr> <tr><td>apples</td><td> $5.00</td><td>$0.75</td></tr> <tr><td>oranges</td><td> $7.00</td><td>$1</td></tr> <tr><td>grapes</td><td> $2.00</td><td>$0.30</td></tr> </table> 7

8 Tables Tables 8

9 Tables Go to W3C More tables Cells that span more than one row or column <table border="1" cellpadding="10" width="80%"> <tr align="center"><th rowspan="2">year</th><th colspan="3">sales</th></tr> <tr align="center"><th>north</th><th>south</th><th>total</th></tr> <tr align="center"><td>2000</td><td>$10m</td><td>$8m</td><td>$18m</td></tr> <tr align="center"><td>2001</td><td>$14m</td><td>$11m</td><td>$25m</td></tr> </table> 9

10 Networks LAN - Local Area Network connects network devices over a relatively short distance use certain connectivity technologies, primarily Ethernet and Token Ring In TCP/IP networking, a LAN is often but not always implemented as a single IP subnet. WAN - Wide Area Network spans a large physical distance. The Internet is the largest WAN, spanning the Earth. a geographically-dispersed collection of LANs WANs tend to use technology like ATM, Frame Relay and X.25 for connectivity over the longer distances. Router A network device called a router connects LANs to a WAN. In IP networking, the router maintains both a LAN address and a WAN address. LANs token ring ethernet hybrid peer-peer star Server 10

11 Other networks Wireless Local Area Network a LAN based on WiFi wireless network technology Metropolitan Area Network a network spanning a physical area larger than a LAN but smaller than a WAN, such as a city. A MAN is typically owned an operated by a single entity such as a government body or large corporation. Campus Area Network a network spanning multiple LANs but smaller than a MAN, such as on a university or local business campus. Other networks Storage Area Network connects servers to data storage devices through a technology like Fibre Channel. System Area Network links high-performance computers with high-speed connections in a cluster configuration, e.g., Cluster Area Network. 11

12 The Internet internet a "network of networks" that consists of millions of private and public, academic, business, and government networks of local to global scope that are linked by copper wires, fiber-optic cables, wireless connections, and other technologies. Internet a global system of interconnected computer networks that interchange data by packet switching using the standardized Internet Protocol Suite (TCP/IP) carries various information resources and services, such as electronic mail, online chat, file transfer and file sharing, online gaming, and the inter-linked hypertext documents and other resources of the World Wide Web (WWW). Internet Map 12

13 Hierarchy vs. heterarchy The Internet A characteristic of a heterarchical network is that it is a robust network. If some nodes are removed, data can still be sent between nodes Hierarchical networks do not lend themselves to robustness The Internet also has dynamic routing, where the route of the data is determined at the time of transmission based on current network conditions. Copyright 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 13

14 Packet Switching The Growth Of The Internet In 1983, the Internet connected 562 computers. In 1993, it connected over 1,200,000 computers. By 1999, on the average, a computer was added to the Internet every second. By 2006, the average exceeded ten computers per second. The Internet has experienced sustained growth, approximately doubling in size approximately every 10 months. Such growth is called exponential. At any time from 1983 through 2005, approximately half the Internet growth occurred in the previous 12 to 14 months. Douglas E. Comer, The Internet Book 2006 Pearson/Prentice Hall 14

15 Internet 1983 to 1991 Douglas E. Comer, The Internet Book 2006 Pearson/Prentice Hall Internet 1991 to 1999 Douglas E. Comer, The Internet Book 2006 Pearson/Prentice Hall 15

16 Internet 1998 to 2005 Douglas E. Comer, The Internet Book 2006 Pearson/Prentice Hall What is slowing growth? Do you have DSL or cable internet access? Why is there no DSL or cable in Leverett? What about the developing world? The digital divide World Penetration 23.5% Growth 336.1% 16