Lecture 5 Back to html

Transcription

Lecture 5
html: lists, images, tables
network basics
UNIVERSITY OF MASSACHUSETTS AMHERST • CMPSCI 120 Fall 2010
Back to html
See notes 09/16/10
Go to the validator
http://validator.w3.org/
1
Images
<img src=http://ripples.cs.umass.edu/~adrion/pix_files/image001.jpg />
names location of the image file
<img src=http:// … .jpg
image
h
width="200" height="150"/>
height, width
•not required
•maintain aspect ratio
w
alt
width="200" height="150” alt="Stonehenge" />
•short description
•use title for mouseover effect
Images
For complex images, you may need
to also give a longer description:
width="200" height="150" alt="Stonehenge”
longdesc=http://en.wikipedia.org/wiki/Stonehenge />
Again this is not visible if the image
loads
2
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
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
Stonehenge3.jpg
Stonehenge.jpg
Images
Stonehenge2.jpg
More links
<a> tag
<a
href="http://en.wikipedia.org/wiki/Stonehenge">Stonehenge
</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
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 second list item</li>
</ol>
Lists
Go to W3C
 definition list
 nested lists
<dl>
<dt>the first term</dt>
<dd>its definition</dd>
<dt>the second term</dt>
<dt>the third term</dt>
</dl>
<ol>
<li>
the second list item
<ul>
<li>first nested item</li>
<li>second nested item</li>
</ul>
</li>
</ol>
 use paragraphs and headings etc. for longer list items
5
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
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
Tables
Tables
8
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
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
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
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
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
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
Internet 1983 to 1991
15
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

Lecture 5 Back to html

Transcription

Similar documents

30 days

Amherst Middle School Boys Win Division Soccer

May 17th 4 -7pm ...escape from the ordinary

Amherst Village Visual Preference Survey

We Remember Them - Town of Amherst

Amherst CentrAl School District Presents

ConEdison Solutions, Gexa, Pepco Energy 7:30am

Granite State Cabinetry in partnership with Baron`s

Amherst Partners

Orders of Magnitude