introduction to html. getting started.. getting started.. what is html? what is html? how to create...
Post on 26-Dec-2015
234 Views
Preview:
TRANSCRIPT
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>
Basic TagsBasic Tags
<!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>
Basic TagsBasic Tags
<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>
<td>row 1, cell 2</td><td>row 1, cell 2</td>
</tr></tr>
<tr><tr>
<td>row 2, cell 1</td><td>row 2, cell 1</td>
<td>row 2, cell 2</td><td>row 2, cell 2</td>
</tr></tr>
</table></table>
CommentsComments
<!-- This is a comment --> <!--
This paragraph,is also acomment...
-->-->
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:password@www.ftpserver.comftp://username:password@www.ftpserver.com ftp://username@www.ftpserver.comftp://username@www.ftpserver.com
Other FTP clientsOther FTP clients WS_FTPWS_FTP CuteFTPCuteFTP
Publishing pagesPublishing pages
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
Publishing pagesPublishing pages
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)
Publishing pagesPublishing pages
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
top related