introduction to html. getting started.. getting started.. what is html? what is html? how to create...

Introduction to HTMLIntroduction to HTML

Getting Started..Getting Started..

What is HTML?What is HTML?

How to create and View an HTML document?How to create and View an HTML document?

Basic HTML Document FormatBasic HTML Document Format

The HTML Basic tagsThe HTML Basic tags

HTML Protocol HeadersHTML Protocol Headers

Publishing PagesPublishing Pages

Contents

What the following term meanWhat the following term mean:: Web server: a system on the internet containg one Web server: a system on the internet containg one

or more web siteor more web site Web site: a collection of one or more web pagesWeb site: a collection of one or more web pages Web pages: single disk file with a single file nameWeb pages: single disk file with a single file name Home pages: first page in websiteHome pages: first page in website

Think about the followings before working Think about the followings before working your Web pages.your Web pages. Think about the sort of information(content) you Think about the sort of information(content) you

want to put on the Web.want to put on the Web. Set the goals for the Web site. Set the goals for the Web site. Organize your content into main topics. Organize your content into main topics.

Come up with a general structure for pages and Come up with a general structure for pages and

topics.topics.

What is HTML?What is HTML? Telling the browser what to do, and what props Telling the browser what to do, and what props

to use.to use. A serises of tags that are integrated into a text A serises of tags that are integrated into a text

document.document.

Tags areTags are ; ; surrounded with angle brackets like thissurrounded with angle brackets like this

<B> or <I>. <B> or <I>.

Most tags come in pairsMost tags come in pairs exceptions: <P>, <br>, <li> tags …exceptions: <P>, <br>, <li> tags …

The first tag turns the action on, and the second The first tag turns the action on, and the second turns it off.turns it off.

The second tag(off switch) starts with a forward slash. The second tag(off switch) starts with a forward slash.

For example ,<B> text </B> For example ,<B> text </B>

can embedded, for instance, to do this:can embedded, for instance, to do this: <HEAD><TITLE> Your text </HEAD></TITLE> it won't work.<HEAD><TITLE> Your text </HEAD></TITLE> it won't work. The correct order is <HEAD><TITLE> Your text The correct order is <HEAD><TITLE> Your text

</TITLE></HEAD> </TITLE></HEAD>

not case sensitivity. not case sensitivity. Many tags have attributes.Many tags have attributes.

For example, <P ALIGN=CENTER> centers the paragraph following it. For example, <P ALIGN=CENTER> centers the paragraph following it.

Some browsers don't support the some tags and some Some browsers don't support the some tags and some attributes. attributes.

Basic HTML Document FormatBasic HTML Document Format

<HTML><HEAD> <TITLE>WENT'99</TITLE></HEAD><BODY> Went'99 </BODY> </HTML>

<HTML><HEAD> <TITLE>WENT'99</TITLE></HEAD><BODY> Went'99 </BODY> </HTML>

See what it looks like:

How to Create and View an HTML How to Create and View an HTML document?document?1.Use an text editor such as Notepad to write 1.Use an text editor such as Notepad to write

the document. the document.

2.Save the file as filename.html on a PC. This is 2.Save the file as filename.html on a PC. This is called the Document Source. called the Document Source.

3.Open Internet Explorer (or any browser) Off-3.Open Internet Explorer (or any browser) Off-Line Line

4.Click on File, Open File and select the 4.Click on File, Open File and select the filename.html document that you just created. filename.html document that you just created.

5.Your HTML page should now appear just like 5.Your HTML page should now appear just like any other Web page in Netscape. any other Web page in Netscape.

6.You may now switch back and forth between the 6.You may now switch back and forth between the Source and the HTML Document Source and the HTML Document

switch to Notepad with the Document Source switch to Notepad with the Document Source make changes make changes save the document again save the document again switch back to Internet Explorer switch back to Internet Explorer click on RELOAD and view the new HTML click on RELOAD and view the new HTML

Document Document switch to Notepad with the Document switch to Notepad with the Document

Source......Source......

Tags in headTags in head <HEAD>...</HEAD>--<HEAD>...</HEAD>-- contains information contains information

about the documentabout the document <TITLE>...</TITLE>--<TITLE>...</TITLE>-- puts text on the puts text on the

browser's title bar. browser's title bar.

HTML CharacteristicsHTML Characteristics

Just a Text File!+ Portable+ Human Readable/Writable

Defines the Structure (not Appearance) of the Document Client (Browser) defines the appearance

Font preferences, window width, … Pours into Browser (PDAs,

Bigger/Smaller)

Document StructureDocument Structure

<html><head><title>My First Web

Page</title></head><body bgcolor="white"><p>A Paragraph of Text.</p></body></html>

Nested TagsNested Tags

Like a tree, each element is contained inside a parent element

Each element may have any number of attributes

<body>...</body> bgcolor="white"

<html>...</html>

<head>...</head>

<title>...</title> other stuff <p>...</p> <br> <table>...</table>

This is some text!

Basic TagsBasic Tags

<html><head><title>My First Web

Page</title></head><body bgcolor="white"><p>A Paragraph of Text.</p></body></html>


<!doctype html public “-//w3c//dtd <!doctype html public “-//w3c//dtd html 4.0 transitional//en”>html 4.0 transitional//en”> Preamble which identifies content as Preamble which identifies content as

HTMLHTML <h1>…</h1><h1>…</h1>

H1-6 where larger number means H1-6 where larger number means smaller headingsmaller heading

<p><p> Includes vertical whitespace unlike <br>Includes vertical whitespace unlike <br>


<hr> horizontal rule <br> new line <b>...</b> bold <i>...</i> italicize text in between

ListsLists Unordered Lists

<ul><li> Apples<li> Oranges</ul>

Ordered Lists<ol><li> One<li> Two</ol>

Can be nested

o Apples1.1. FujiFuji2.2. Granny SmithGranny Smith

o Oranges

Image FilesImage Files <img src="URL of image file"> JPEG

Best for photos Public standard

GIF Best for simple images Older standard

PNG – Portable Network Graphics Public standard replacement for GIF

SVG – Scalable Vector Graphics Series of drawing commands Uses XML

TablesTables

<table>...</table> <tr>...</tr> for each row <td>...</td> for each element in a

row <th>…</th> for header row

Table ExampleTable Example

<table border="1"><table border="1">

<tr><tr>

<td>row 1, cell 1</td><td>row 1, cell 1</td>


</tr></tr>

<tr><tr>



</tr></tr>

</table></table>

CommentsComments

 -->

Special HTMLSpecial HTML

< → < > → > & → & → space

Anchor Tag (Links)

Absolute HREFs specify fully qualified URLs.

<a href="http://www.yahoo.com/">Yahoo!</a>

<a href="reldoc.html">In this directory!</a> <a href="a/doc.html">In sub-directory

a!</a>

Relative HREFs are relative to the directory containing the current HTML file.

Review: Client and Review: Client and ServerServer

User uses HTTP client (Web User uses HTTP client (Web Browser)Browser)

It has a URL (e.g. It has a URL (e.g. http://www.yahoo.com/)http://www.yahoo.com/)

Makes a Makes a requestrequest to the server to the server Server sends back data (the Server sends back data (the

responseresponse)) User clicks on the client side...User clicks on the client side...

request (URL)

response (HTML, …)Client Server

Client/Server Timeline

Server

(S1) create new socket (socket)(S2) bind socket to port 80 (bind)(S3) permit socket connections (listen)(S4) wait for connection (accept)

.

.

.

.

.

.(S5) application notified of connection(S6) start reading request (read)

.

.

.

.(S7) process HTTP request message

.

.(S8) send back HTTP response (write)(S9) close connection (close)

Client

(C1) get IP address & port(C2) create new socket (socket)(C3) connect to server IP:port (connect)

.

.

.

.

.

.(C4) connection successful(C5) send HTTP request (write)(C6) wait for HTTP response (read)

.

.

.

.(C7) process HTTP response(C8) close connection (close)

HTTP Request StructureHTTP Request Structure

URL, URN, or URI?URL, URN, or URI?

URN is location-independent resource identifier urn:ietf:rfc:3187 urn:isbn:0451450523

URL is the location URI is the superset of URL & URN

URL StructureURL Structure

<scheme>://<user>:<password>@<host>:<port>/<path>;<params>?<query>#<frag>

Unsafe CharactersUnsafe Characters

Some Characters need to be encoded ~ [ASCII: 126 (0x7E)] SPACE [ASCII: 32 (0x20)] % [ASCII: 37 (0x25)]

Examples http://www.bob.com/%7Ekelly/ http://www.bob.com/my%20home

%20page.html http://www.bob.com/

100%25Crankiness.html

Empty-String PathEmpty-String Path

http://www.yahoo.com Assume the path is "/" Client should send

GET / HTTP/1.0\r\n\r\n

Relative HeadersRelative Headers

Client SideGiven a URL in a file, if it is relative, will add base address to the relative URL

Last requested path is http://foo.com/b/index. in index.html see <a href="a.html">link</ base address is http://foo.com/b/

Client requests http://foo.com/b/a.html

Request HeaderRequest Header

GET / HTTP / 1.1GET / HTTP / 1.1

<HEADERS><HEADERS>

Request Header ExampleRequest Header Example

GET / HTTP/1.1Host: localhost:8181Connection: keep-aliveReferer: http://localhost/~ronyeh/User-Agent: Mozilla/5.0 (Macintosh; U; PPC Mac

OSX; en-us) AppleWebKit/124 (KHTML, like Gecko)

Safari/125Accept: */*Accept-Encoding: gzip, deflate;q=1.0, identity;

q=0.5, *;q=0Accept-Language: en-us, ja;q=0.62, de-de;q=0.93

General HeadersGeneral Headers

Used by clients & serversSeen in both requests and responses

Date: Tue, 3 Oct 2002004 02:16:00 GMT Connection: keep-alive

Request HeadersRequest Headers

Client-IP: 192.168.1.192.168.1.12 Host: hostmachine.com Referer: http://wherefrom.com/ User-Agent: Mozilla/5.0 UA-OS If-Modified-Since

Request HeadersRequest Headers

Accept: */* Accept: text/html Accept-Language: en-us, ja Accept-Encoding: gzip

HTTP Response HTTP Response StructureStructure

Example Response Example Response

HTTP Server Response HTTP Server Response CodesCodes

200 OK 3XX -- Minor Client Error

301 -- File Moved Permanently 302 -- Moved Temporarily 304 -- Not Modified

4XX -- Major Client Error 400 -- Syntax Error 401 -- Unauthorized 403 -- Forbidden, Permission Denied 404 -- Not Found!

HTTP Server Response HTTP Server Response CodesCodes

5XX -- Server Errors 500 -- Internal Server Error 503 -- Service Unavailable

General HeadersGeneral Headers

Used by clients & serversSeen in both requests and responses

Date: Tue, 3 Oct 1974 02:16:00 GMT Connection: close

Server Response HeadersServer Response Headers

Server: GWS/2.1 Content-Length: 2136 Content-Type: text/html Location Expires Last-Modified

MIMEMIME

Multipurpose Internet Mail Extensions

type, subtype, & optional parameters

type/subtype; param1=value1

MIME typesMIME types application/* audio/* image/*

image/jpeg image/tiff

text/* text/xml text/rtf text/html text/plain

video/*video/* video/quicktime video/mpeg video/x-msvideo

Pages with Multiple Pages with Multiple TypesTypes

Each entity (ex. image) is Each entity (ex. image) is standalone HTTP requeststandalone HTTP request Page with many pictures creates many Page with many pictures creates many

connectionsconnections Each response therefore has Each response therefore has

appropriate MIME settingsappropriate MIME settings

Mapping URL PathMapping URL Path Server can map URLs to any place on the

file system. Doesn't have to be under the Document Root. It's the server's choice!!!

User names ~kashawMay map to /users/kashaw/WWW

/a/b/ => maps to a default file index.html, default.html, index.htm,

index.shtml /a/b/ => if default file doesn't exist, may

list the directory's files

Trailing SlashTrailing Slash

What if Client asks for /a/b Say file b doesn't exist Utilize the 301 Redirect to /a/b/ Client re-does request

What happens if server does NOT issue 301,but gives the client the right file anyways?

Advanced TopicsAdvanced Topics

Redirection Caching Performance HTTP 1.1

When NOT to RedirectWhen NOT to Redirect

Client requests /a/b/ Server maps to /a/b/index.html and

sends back html file <a href=”c.html”>A Link</a>

Client takes base address /a/b/ concatenates with c.html

Client requests /a/b/c.html which is correct!

When to RedirectWhen to Redirect

URL missing trailing slash No file named /class/cs193i But, directory named /class/cs193i/

If Redirect did NOT happen Client thinks base address is /class/ a relative href=”schedule.html” in

cs193i will be mapped by client to /class/schedule.html

Server will return 404 Not Found

Why Redirect?Why Redirect?

Reliability (Find Live Hosts)

Minimize Delay(Find Shortest Path)

Conserve Network Bandwidth(Spread out Requests Geographically)

Load Balancing(Distribute Requests Temporally)

Load Balancing ExampleLoad Balancing Example

www.goldenretrievers.com

a.goldenretrievers.com

b.goldenretrievers.com

c.goldenretrievers.com

Client1

Client2

Client3

GET / HTTP/1.1Host: www.goldenretrievers.com

HTTP/1.1 302 FoundDate: Wed, 10 July 2004 16:46:17 GMTLocation: http://c.goldenretrievers.com

Load Balancing ExampleLoad Balancing Example

www.goldenretrievers.com

a.goldenretrievers.com

b.goldenretrievers.com

c.goldenretrievers.com

Client1

Client2

Client3

Redirection TradeoffsRedirection Tradeoffs

HTTP Redirection Every request initially goes through the

www.goldenretrievers.com machine Must Customize www Web Server

Alternative: DNS Redirection DNS server decides which IP address to

return (from a list of OK IP Addrs) Alternative: Hardware Redirection

NAT Box! Packet rewriting!

Caching MotivationCaching Motivation

Redundant Data Transfer Network Bandwidth Bottlenecks Server Demand Distance Delays (Latency)

Adding CachingAdding Caching

Web Cache

Server

< Traffic

Hit, Miss, RevalidateHit, Miss, Revalidate

Revalidate OptionsRevalidate Options

Check via If-Modified-Since...Not Modified Suffers from 2X latency between cache & server

Just assume, and have a timeout, refresh cache automatically

Cache

Server

HTTP/1.0 304 Not ModifiedDate: Wed, 03 Jul 2002, 19:18:23 GMTContent-type: text/plainContent-length: 67Expires: Fri, 05 Jul 2002, 05:00:00 GMT

GET /announce.html HTTP/1.0If-Modified-Since: Sat, 29 Jun 2002, 14:30:00 GMT

(browser cache orproxy cache)

Revalidate request with If-Modified-State

“Still fresh” response

Request / Response Request / Response TimelineTimeline

SYN

SYN+ACK

ACK+GET /food.html

HTTP/1.0HTTP/1.0 200 OK

Time

Web Pages w/ Multiple Web Pages w/ Multiple RequestsRequests

Time

Persistent ConnectionsPersistent Connections

PipeliningPipelining

Connection: Keep-Alive

Persistent ConnectionsPersistent Connections

HTTP 1.0 -- Connections close by Default No need for Content-length, end

signaled by EOF (in-band signal) HTTP 1.1 -- Persistent by Default

Must use Content-length

Chunked-Transfer Chunked-Transfer EncodingEncoding

Problem: Content-length costly for server

Solution Server omits Content-Length Transfer-encoding: chunked Send Data in Chunks, Prefixed by length

in Hex End is marked with Chunk Length 0

(in band signal like in POP)

Publishing pagesPublishing pages Viewing your pages via Viewing your pages via

the internetthe internet Send pages to a web Send pages to a web

serverserver How a page is distributedHow a page is distributed Server space maintenanceServer space maintenance Common ways (protocols) Common ways (protocols)

of sending pages to a web of sending pages to a web serverserver

FTPFTP SSHSSH Through a mapped driveThrough a mapped drive

Publishing pagesPublishing pages

Sending pages via FTP to a web Sending pages via FTP to a web serverserver File Transfer ProtocolFile Transfer Protocol Plain-text data transferPlain-text data transfer Microsoft’s FTP clientMicrosoft’s FTP client

ftp://username:[email protected]://username:[email protected] ftp://[email protected]://[email protected]

Other FTP clientsOther FTP clients WS_FTPWS_FTP CuteFTPCuteFTP


Exercise: Publish pages to Exercise: Publish pages to usiweb.usi.edu through an FTP usiweb.usi.edu through an FTP clientclient Go to your desktopGo to your desktop Open “My Computer” or “Internet Open “My Computer” or “Internet

Explorer”Explorer” Type in the following URL into the Type in the following URL into the

address field: Oakland’s ftp addressaddress field: Oakland’s ftp address


Sending pages via SSHSending pages via SSH Secure ShellSecure Shell Encrypted data transferEncrypted data transfer More secure than FTPMore secure than FTP SSH used with SSH used with www.oakland.eduwww.oakland.edu for for

off-campus accessoff-campus access SSH clientsSSH clients

SSH Secure ShellSSH Secure Shell PuTTY (Free Win32 SSH client)PuTTY (Free Win32 SSH client)


Sending pages through a mapped Sending pages through a mapped drivedrive Method used to publish on campus to Method used to publish on campus to

www.oakland.eduwww.oakland.edu. Normally labeled . Normally labeled “H:” or “the H drive”.“H:” or “the H drive”.

Publishing pagesPublishing pages Creating a mapped drive for Creating a mapped drive for www.usi.eduwww.usi.edu

Make sure you have access to on the web serverMake sure you have access to on the web server If not: Have your fiscal agent send an e-mail to If not: Have your fiscal agent send an e-mail to

Web Services approving accessWeb Services approving access Go to your computer’s desktopGo to your computer’s desktop Right click on the “My Computer” iconRight click on the “My Computer” icon Select “Map Network Drive…”Select “Map Network Drive…” Enter Q: as the drive letterEnter Q: as the drive letter Enter Enter \\www\www_usi\\www\www_usi as the folder as the folder Click on Finish or OKClick on Finish or OK Traverse to your folder you have access to using Traverse to your folder you have access to using

FrontPage or another web publishing applicationFrontPage or another web publishing application

introduction to html. getting started.. getting started.. what is html? what is html? how to create...

Documents