recall a host’s ip address is associated with a domain name mapping: domainname ipaddr this...
Post on 22-Dec-2015
216 views
TRANSCRIPT
Recall
A Host’s IP Address is associated with a domain name
Mapping: DomainName IPAddr This mapping is stored in multi-tiered set of Domain
Name Servers
My computer
IP Address:204.168.0.207
RR
Domain Name Table…www.breimer.org 204.168.0.207…
GlobalDNS
http requests
Domain Name Table…www.breimer.org RR…
Multi-tiered
Internet Connections: Cost vs. Bandwidth
Connection Bandwidth Cost Kbps/$Dial-up 0.1 Mbps $25 4.00DSL 0.7 Mbps $37 17.50Cable 0.8 Mbps $45 17.78Cable Pro 1.5 Mbps $150 10.00T-1 2.0 Mbps $750 2.67T-3 30.0 Mbps $10,000 3.00OC-3 145.0 Mbps $40,000 3.63
Internet Connections: Cost vs. Bandwidth
Connection Bandwidth Cost Kbps/$Dial-up 0.1 Mbps $25 4.00DSL 0.7 Mbps $37 17.50Cable 0.8 Mbps $45 17.78Cable Pro 1.5 Mbps $150 10.00T-1 2.0 Mbps $750 2.67T-3 30.0 Mbps $10,000 3.00OC-3 145.0 Mbps $40,000 3.63
Home UsersMust be competitively
priced
1990’s only option besides dialup
Long term contractsstill holding
Economy of scale
Siena CS is considering
Professional GradeCable
Agenda
HTML Dream Weaver’s HTML Styles vs Cascading Style Sheets
HTML
Hypertext Markup Language Marks up a document with tags Each tag specifies the format/appearance of
the webpage
HTML
Special tags are used to insert Links to other documents
– Images– Tables– Other Media
Flash MP3 Java Applets Etc.
Tags
An element is a fundamental component of the structure of a text document.
Examples:– Heads– Tables– Paragraphs– lists.
To denote the various components in an HTML document, you use tags.
Tags
HTML tags consist of a left angle bracket (<), a tag name, and a right
angle bracket (>). Tags are usually paired
– <b> start tag– </b> end tag
The end tag looks just like the start tag except a slash (/) precedes the text within the brackets.
Tags
Some tags may include an attribute, – which is additional information that is included inside the
start tag. – Example
<p align=center> NOTE: HTML is not case sensitive. <title> is
equivalent to <TITLE> or <TitLe>. Not all tags are supported by all browsers.
– If a browser does not support a tag, it will simply ignore it. – Any text placed between a pair of unknown tags will still be
displayed, however.
Browsers
Netscape – Once the best, now #2, polluted with AOL
Internet Explorer – Microsoft’s enormous monster Mozilla – the original, still good, no gimmicks Opera – very compact, skins Amaya - W3C's testbed browser, seamlessly
integrated with the editing and remote access Lynx – text browser, why?
Browsers
Neoplanet - offers diverse interface skins and customizable, sharable, content channels.
Apple Safari - KHTML-based web browser from Apple Computer optimized for Mac OS X.
Konqueror - Unix-based Web browser, file manager, and universal viewer from KDE.
iCab - web browser for Macintosh.
<html><head><TITLE> A Simple HTML Example </TITLE></head><body> <H1> HTML is Easy To Learn </H1><P> Welcome to the world of HTML.
This is the first paragraph. While short it is still a paragraph! </P>
<P> And this is the second paragraph. </P></body> </html>
A Teaching Tool
To see the HTML code of any website– select View Source
Another Teaching Tool
Compose what you want
And see the resulting HTML
10 Tags you should memorize
1. <html>
2. <body>
3. <head>
4. <a href>
5. <img src>
6. <p align>
7. <span class>
8. <table>
9. <tr>
10. <td>
<html> </html>
This tells the browser that Everything inside this tag is HTML code Some browsers won’t display a page unless
you include this tag
<body> </body>
Everything inside this tag makes up the body of the actual document
Web pages have elements that don’t appear in the body of a document
Examples– Meta info (key words, description, etc.)– JavaScript code– Title (appears in the title bar of the browser)– Etc…
<head> </head>
Special place for storing info that does not appear in the body a document
More examples– Author’s comments– Code for linking style sheets– Information for different browsers– Etc.
<a href> </a>
Example: <a href=“resume.html”>Link to my resume</a>
– a stands for anchor– href stands for hypertext reference
Everything inside this tag becomes a hyperlink
You can put text inside or other elements – like images.
<img src>
Example: <img src=“picture.jpg”>
– img stands for image– src stands for source
This tag does not use an end tag </img> Inserts an image into the document
– Assuming src points to a valid image
Standard Image Formats(supported by web browsers)
In the early days 2 types of images emerged gif (Graphics Interchange Format)
– CompuServe– outdated, only 256 colors, compact size
jpg (Joint Photographic Experts Group)– 16 million colors– compressed encoding– higher quality and sometime more compact than GIF
These image formats are still the standard
Other Image Formats(not support by Web Browsers)
BMP: The Bitmap file format is used for bitmap graphics on the Windows platform only
JIF: JPEG Related Image format PCT: Macintosh PICT format PPM: Portable Pixel Map (UNIX) TIFF: Aldus Corporation format EPS: The Encapsulated PostScript PNG: The Portable Network Graphics format will
likely be the successor to the GIF file format
<p align> </p>
Used to create paragraph
creates an indentation (depends upon the browser)
Option to align the paragraph
<span class> </span>
Used to apply a cascading style to an element
<table>
Creates a table Has lots of
attributes <tr> defines a row <td> defines a
column in a row
Web Styles vs. CSS
CSS (Cascading Style Sheets) Web Styles are not as good as CSS Why? CSS allow you to separate content from style An example shows it all Why is this so important?
Homework
Take a look at the HTML Guide Memorize the purpose and format of the 10
tags I showed today– They’ll be on the first exam (Oct. 9th)