What happens when you Click ?
Client
computer
Browser
Server
Part I. The Client-Server Model
su
Client / Server
Client
computer
"Output"
"Input"
Browser
Server
Disk Files
Folders:
How does it get from here to there?� (See Part II.)
REQUEST a "Resource"
<A HREF=http://foo.com/dirname/sub/filename.gif>
Request
Response
"User""
"What Happens when you Click?"
Part I. Client-Server Model
How does a "request" get to the Server?
And how does the "response" get back to the Client?
(See Part II.)
Disk Files
Request:
Response
Client
Browser
http://foo.com/dirname/filename.gif
copy of the�"resource"
DNS
Domain Name Server�translates Domain Name
into an "IP address"
Every internet "node"
has a unique "IP address"
Server
filename.gif
dirname
123.45.67.89
"Path"
path
http://123.45.67.89/dirname/filename.gif
Domain name
Internet Service Provider (ISP)
IP address
"What Happens when you Click?" Part I.
U R L: Uniform Resource Locator
How to locate a resource on the World Wide Web
Server
Disk Files
Folders:
Request
Response
*NOTE: The "URL" was developed by Tim Berners-Lee, at CERN, in 1992, to create the World Wide Web.
http://foo.com/folder/filename.gif
*
Protocol | http: | Scheme move data to server. |
Server | //foo.com | IP address or Domain Name |
Path | /dirname/ | Folders/subfolders -- where to find the file. |
File | filename | Name of file containing the "resource" |
Type | .gif | What kind of file: html,gif,mp3,txt,etc. |
Path
URL Encoding: Because it is a web address sent over the internet, a URL cannot contain certain characters,
(such as space, control characters, those that are non-ASCII, unprintable, unsafe, or reserved for punctuation within a URL).��URL Encoding is a scheme for representing these characters using hexadecimal numbers or special codes.
Type of Character | URL Encoding |
Alphanumeric [A-Za-z0-9_-.] | (unchanged) |
Space | + (plus sign) |
Reserved characters: $ & + , / : ; = ? @ | % _ _ followed by two hexadecimal digits, e.g.: replace $ with %24, & with %26, etc. |
Unsafe characters: " < > # % { } | \ ^ ~ [ ] ` | % _ _ followed by two hexadecimal digits, e.g.: replace " with %22, < with %3c, etc. |
Control characters (such as TAB, BACKSPACE, etc.), non-ASCI (such as €, þ, ÿ, ÷, ©, etc.) | % _ _ followed by two hexadecimal digits, e.g.: replace TAB with %09, € with %80, etc. |
Unicode, such as ⠀⠋⠌⠍⠎⠏⠐⠑⠒⠓⠔⠕⠖⠗⠘⠙⠚⠛⠜⠝⠞⠟ (Braille) ⠵ ښ א আ 中 文 あ ᚡ 😂 👠 ⏱ ☔ etc. | Pairs of hex digits, preceded by %, e.g.: replace £ with %C2%A3, 円 with %E5%86%86, etc. |
For details, see (for instance): Uniform Resource Locators, URL Encoding (tutorialspoint), Percent-encoding, Full_Map.png
NOTE: This topic is optional.
Hyper-Text Markup Language "HTML"
The word "markup" is reminiscent of an Editor �(wearing a green eyeshade) �wielding ablue pencil �to write on paper "copy"
A "text markup language" inserts "tags" within a text file, to indicate formatting such as boldface or italics or underlining, and annotations� for new paragraphs, headings, centering, etc.
or a teacher or proofreader using a red pen �to correct a submitted paper
The markup tags are surrounded by "angle brackets" < and >�(and tags do not appear in the text). For example:
Dr. Tim Berners-Lee (who invented the URL to make possible the �World Wide Web) added "HyperLinks" -- which refer to other resources,�which the web browser may request from another server. For example:
<CENTER>Phrases</CENTER>�Now is the <U>time</U> for�all <I>good men</I> to come�to the aid of their <B>party</B>.
<P ALIGN=RIGHT> C. Weller
Phrases
Now is the time for all good men to come to the aid of their party.
C. Weller
Look at my dog:
<IMG SRC=http://professorbam.com/img/doggie.gif /> <P>
<A HREF=http://suffolk.li> Click here </A> ...
HTML, CSS, Javascript, PHP, Perl, etc.
A Simplified TCP State Diagram.
Nodes in the cloud perform these steps, to pass a datagram
to the next node . . . .
. . .
BUT you need not worry about the details !