Web BasicsWeb Basics

CS 110CS 110

Fall 2005Fall 2005

What Is the Internet?What Is the Internet?

The Internet is:The Internet is:• A publicly available worldwide system of A publicly available worldwide system of

interconnected computer networksinterconnected computer networks thousands of smaller commercial, academic, thousands of smaller commercial, academic,

and government networksand government networks

The Internet is not the World Wide The Internet is not the World Wide Web (more later)Web (more later)

How did the Internet How did the Internet start?start?

1957: Advanced Research Projects 1957: Advanced Research Projects Association (ARPA, now DARPA)Association (ARPA, now DARPA)• Established in response to Soviet launch of Established in response to Soviet launch of

Sputnik etc. and for coordination in face of Sputnik etc. and for coordination in face of nuclear attacknuclear attack

1969: ARPANET born (just 4 hosts)1969: ARPANET born (just 4 hosts) 1972: First email program1972: First email program 1983: Foundation of today’s Internet is 1983: Foundation of today’s Internet is

establishedestablished

A Truly Public NetworkA Truly Public Network 1980s and early 1990s: Mainly universities, 1980s and early 1990s: Mainly universities,

government, and some companiesgovernment, and some companies• They installed the high-speed network They installed the high-speed network

connections called backbonesconnections called backbones• Connection to the net was costly Connection to the net was costly

Mid and Late 1990s:Mid and Late 1990s:• Commercial on-line services like CompuServe and Commercial on-line services like CompuServe and

AOL offered Internet services (email, the web)AOL offered Internet services (email, the web)• Commercial companies installed more backbones Commercial companies installed more backbones

(often fiber optics)(often fiber optics)• Connections for everyone became easier and Connections for everyone became easier and

cheapercheaper

Internet vs. WebInternet vs. Web

InternetInternet• Fabric of machines, cables, and wireless Fabric of machines, cables, and wireless

antennaantenna• A basic agreement about A basic agreement about

communication protocolscommunication protocols World Wide Web World Wide Web

• A subset of devices on the Internet that A subset of devices on the Internet that utilizes a specific communication utilizes a specific communication protocolprotocol

ProtocolsProtocols

The “syntax” and “semantics” of The “syntax” and “semantics” of communicationcommunication• People can communicate through soundPeople can communicate through sound

This represents an agreement between people, a This represents an agreement between people, a protocolprotocol

• Some people speak EnglishSome people speak English This represents a refinement of the “use sound” This represents a refinement of the “use sound”

protocolprotocol English uses syntax and semantics to convey English uses syntax and semantics to convey

meaningmeaning

What if we could only communicate with What if we could only communicate with post cards?post cards?

Using the WebUsing the Web

The Web is a client/server system:The Web is a client/server system:• client: browser app like Inernet Explorer, client: browser app like Inernet Explorer,

Firefox, or your cell phoneFirefox, or your cell phone• server: software running on a webserver hostserver: software running on a webserver host

Three things make the Web work:Three things make the Web work:• URLs:URLs: To whom will I communicate To whom will I communicate • HTTP:HTTP: How will I communicate (through How will I communicate (through

speech, body language, writing) speech, body language, writing) • HTML: HTML: What language will I speak (English, What language will I speak (English,

American Sign Language, cuneiform)American Sign Language, cuneiform)

Using the WebUsing the Web

• Uniform Resource Locators:Uniform Resource Locators: how to how to name pages and hostsname pages and hosts

• Hypertext Transfer Protocol:Hypertext Transfer Protocol: protocol protocol that lets clients request pages and that lets clients request pages and servers send them backservers send them back

• Hypertext Markup Language:Hypertext Markup Language: language language for defining pagesfor defining pages

Anatomy of a URLAnatomy of a URL

URL – Uniform Resource LocatorURL – Uniform Resource Locator• The address of your web page.The address of your web page.• Example: Example: http://www.cs.virginia.edu/index.htmlhttp://www.cs.virginia.edu/index.html

Anatomy of a URLAnatomy of a URL

http://www.cs.virginia.edu/index.htmlhttp://www.cs.virginia.edu/index.html

• http://http:// is the is the protocolprotocol used for the used for the transactiontransaction

Hypertext Transfer ProtocolHypertext Transfer Protocol

• www.cs.virginia.eduwww.cs.virginia.edu is the server is the server domain namedomain name

• index.htmlindex.html is the name of the fileis the name of the file MUST end in .htm or .html to be recognized MUST end in .htm or .html to be recognized

as a web pageas a web page

Domain NamesDomain Names

The Internet identifies machines The Internet identifies machines using IP addressesusing IP addresses• www.virginia.edu has IP address www.virginia.edu has IP address

128.143.22.36128.143.22.36 ICANN: Internet Corporation for Assigned Names and ICANN: Internet Corporation for Assigned Names and

NumbersNumbers

It’s easier to remember names than It’s easier to remember names than numbersnumbers• Domain Name System (DNS) servers store Domain Name System (DNS) servers store

table of hostnames and IP addressestable of hostnames and IP addresses

HTTPHTTP What is Packet Switching?What is Packet Switching?

• Data sent across network broken into small Data sent across network broken into small packetspackets

• Packet includes source, destination and some Packet includes source, destination and some datadata

• Sent from computer to computer (Sent from computer to computer (routersrouters))

• Packet re-sent if it doesn’t arrivePacket re-sent if it doesn’t arrive

• Assembled at the destination into complete Assembled at the destination into complete transmissiontransmission

HTTP vs. TCP/IPHTTP vs. TCP/IP

Transmission Control Protocol / Transmission Control Protocol / Internet ProtocolInternet Protocol

Default File NamesDefault File Names

If no file is specified, the server will If no file is specified, the server will look for one of the following file look for one of the following file names – in this order:names – in this order:1.1. home.htmlhome.html

2.2. index.htmlindex.html

3.3. home.htmhome.htm

4.4. index.htmindex.htm

Referencing Other FilesReferencing Other Files

Files in the same directory as your HTML Files in the same directory as your HTML file can be referenced using the filenamefile can be referenced using the filename• resume.htmlresume.html

Files on your website, but in a different Files on your website, but in a different directory can be referenced using a directory can be referenced using a relative pathrelative path• work/resume.htmlwork/resume.html

Files on another website can be Files on another website can be referenced using an absolute URLreferenced using an absolute URL• http://www.cs.virginia.edu/resume.htmlhttp://www.cs.virginia.edu/resume.html

HTMLHTML

Hypertext Markup LanguageHypertext Markup Language• Hypertext – Text that links to other textHypertext – Text that links to other text• Uses “tags” to “markup” the text so that Uses “tags” to “markup” the text so that

browsers know how to present a Web browsers know how to present a Web Page to the userPage to the user

Example:Example:<html><html><head><head><TITLE><TITLE>A Simple HTML ExampleA Simple HTML Example</TITLE></TITLE></head></head><body><body><H1><H1>HTML is Easy To LearnHTML is Easy To Learn</H1></H1><P><P>Welcome to the world of HTML. This is Welcome to the world of HTML. This is

the first paragraphthe first paragraph!</P>!</P><P><P>And this is the second paragraph.And this is the second paragraph.</P></P></body></body></html> </html>

How HTML Files are CreatedHow HTML Files are Created

1.1. Type in HTML tags directly into a Type in HTML tags directly into a filefile

2.2. Use a SW application that works like Use a SW application that works like word-processor to create pagesword-processor to create pages

• WYSIWYGWYSIWYG• Examples: MS Frontpage, Netscape Examples: MS Frontpage, Netscape

Composer, DreamweaverComposer, Dreamweaver3.3. Convert docs from (say) WordConvert docs from (say) Word

• Problems! So you will Problems! So you will notnot do this in CS110 do this in CS110

Why Learn Tags At All?Why Learn Tags At All?

In life you’ll use an app most of the In life you’ll use an app most of the timetime• Easier, more powerfulEasier, more powerful

Why learn tags?Why learn tags?• HTML defines what’s possibleHTML defines what’s possible• Many apps don’t always do what you Many apps don’t always do what you

want – you need to tweak the tagswant – you need to tweak the tags• You can study others’ pagesYou can study others’ pages• <grin><grin> It’s on the final! It’s on the final! <\grin><\grin>

Online AssistanceOnline Assistance Check out these tutorials for helpCheck out these tutorials for help

1.1. (Very brief) (Very brief) http://www.w3.org/MarkUp/Guide/http://www.w3.org/MarkUp/Guide/

2.2. http://webmonkey.wired.com/webmonkey/tehttp://webmonkey.wired.com/webmonkey/teachingtool/html.htmlachingtool/html.html

3.3. (Longer, but good stuff on Webservers etc.) (Longer, but good stuff on Webservers etc.) http://computer.howstuffworks.com/web-pahttp://computer.howstuffworks.com/web-page.htmge.htm

TagsTags

Tags are enclosed in < and >Tags are enclosed in < and >• For example: For example: <html><html> is the “html tag” is the “html tag”

Tags usually come in pairs, one Tags usually come in pairs, one before the text to be formatted, one before the text to be formatted, one afterafter• For example: For example: <b>text</b><b>text</b>

<b><b> is the opening tag is the opening tag </b></b> is the closing tag is the closing tag

Closing tags have the format: Closing tags have the format: </</tagtag>>

TagsTags

Attributes specify details about a tagAttributes specify details about a tag• Generally formatted as:Generally formatted as:

attribute=“value”attribute=“value”

• Used in a tag:Used in a tag: <tag attribute=“value”><tag attribute=“value”>

• Many attributes may be used in a single tag:Many attributes may be used in a single tag: <tag attribute1=“value1” attribute2=“value2”><tag attribute1=“value1” attribute2=“value2”>

• Closing tags don’t have attributesClosing tags don’t have attributes

Basic Web PageBasic Web Page

Most web pages have two parts:Most web pages have two parts:• <head> … </head><head> … </head>• <body> … </body><body> … </body>

The <The <head>head> contains the document contains the document <title><title>

The The <body><body> contains the content of contains the content of the document.the document.

There should only ever be one There should only ever be one <body><body> and and <head> <head> tag per documenttag per document

Skeleton HTML DocumentSkeleton HTML Document

<html> <html> <!-- Begin HTML Document --><!-- Begin HTML Document -->

<head> <head> <!-- Begin Document Heading <!-- Begin Document Heading -->-->

<title>…</title> <title>…</title> <!-- Document Title --><!-- Document Title --></head> </head> <!-- End Document Heading --><!-- End Document Heading -->

<body> <body> <!-- Begin Document Body --><!-- Begin Document Body -->… … <!-- Document Body --><!-- Document Body --></body> </body> <!-- End Document Body --><!-- End Document Body -->

</html> </html> <!-- End HTML Document --><!-- End HTML Document -->

HTMLHTML

The <The <title>title> tag is what will appear in tag is what will appear in• The browser window title barThe browser window title bar• A Bookmark or Favorites ListA Bookmark or Favorites List

The The <title><title> tag DOES NOT appear in tag DOES NOT appear in the text of the Web pagethe text of the Web page

No formatting can be applied to titlesNo formatting can be applied to titles

Body TagBody Tag

Body tags are placed around the Body tags are placed around the document body (i.e. the content)document body (i.e. the content)

Attributes placed in the Attributes placed in the <body><body> tag tag affect the entire documentaffect the entire document

Body AttributesBody Attributes texttext – Text Color – Text Color

• Color of the document textColor of the document text link – link – Non-Visited Link ColorNon-Visited Link Color

• Color of non-visited linksColor of non-visited links vlinkvlink – Visited Link Color – Visited Link Color

• Color of visited linksColor of visited links bgcolorbgcolor – Background Color – Background Color

• Background color of the documentBackground color of the document backgroundbackground – Background Image – Background Image

• Image tiled in the background of the documentImage tiled in the background of the document

Body Tag SamplesBody Tag Samples

<body><body> (no attributes applied) (no attributes applied) <body text=“red”><body text=“red”> <body background=“back.gif”><body background=“back.gif”> <body bgcolor=“white”><body bgcolor=“white”> Or some combination of these, for Or some combination of these, for

example:example:• <body text=“white”<body text=“white”background=“back.gif”>background=“back.gif”>

Simple Text FormattingSimple Text Formatting

CENTER = <center>, </center>CENTER = <center>, </center> BOLD = <b>, </b>BOLD = <b>, </b> ITALIC = <i>, </i>ITALIC = <i>, </i> HeadingsHeadings

• <h1>, </h1><h1>, </h1> <h4>, </h4><h4>, </h4>• <h2>, </h2><h2>, </h2> <h5>, </h5><h5>, </h5>• <h3>, </h3><h3>, </h3> <h6>, </h6><h6>, </h6>

http://www.cs.virginia.edu/~cs110/slides/html/?c=http://www.cs.virginia.edu/~cs110/slides/html/?c=stfstf

Changing Size of Text Changing Size of Text

Heading tags (pre-formatted Heading tags (pre-formatted percentages of “Normal” text sizepercentages of “Normal” text size• <<h1h1> is the largest size> is the largest size• <<h6h6> is the smallest size> is the smallest size

<<fontfont> tag> tag• More precise controlMore precise control• Can change size on the same line Can change size on the same line

(Header tags require a line to (Header tags require a line to themselves)themselves)

Font SizeFont Size

<font size=“7”>This is a <font size=“7”>This is a test.</font>test.</font>

The The sizesize attribute can range from 1 to 7 attribute can range from 1 to 7 <<fontfont> tag attributes can be combined to > tag attributes can be combined to

change a font face or color – most efficient change a font face or color – most efficient if doing multiple formats e.g.:if doing multiple formats e.g.:

<font face=“arial” color=“#336600” <font face=“arial” color=“#336600” size=“5”> This is a test.</font>size=“5”> This is a test.</font>

http://www.cs.virginia.edu/~cs110/slides/html/?c=http://www.cs.virginia.edu/~cs110/slides/html/?c=fontsizefontsize

ReadRead

Read Chapters 1 and 2 of textbookRead Chapters 1 and 2 of textbook Bring a notecard with three questions Bring a notecard with three questions

to next classto next class Homework 1 will be assigned on Homework 1 will be assigned on

Thursday and due next weekThursday and due next week