Understanding The Web 1.0

DAY ONEMukesh Patel School of Engineering, Mumbai

March 29, 2013

Session 1How Web Works?

1. Introduction To Web

a) URL - Uniform Resource Locatorb) HTTP - Hyper Text Transfer Protocolc) HTML - HyperText Markup Language

URL

Definition:These are the addresses that you enter into your web browser to connect to a web site.

Divided into 4 Partsa. Protocolb. Hostnamec. Port Numberd. Path

Protocol (aka rules)

● It a funny string that you will see before HOSTNAME● Examples., http, https, ftp, telnet etc.

○ followed by :// (a colon and two forward slashes)● Basically it will tell browser what type of service to

use when you connect with the web browser to the hostname

● If you specify another protocol like ftp, then the browser will act as an ftp client that will enable you to connect to a ftp server to download files.

* Default is http://

Hostname

● The hostname is the address you are going to.● For example, if you are going to the address http:

//www.pricebaba.com, then www.pricebaba.com is the hostname.

Port Number

● The port number is a number that you can append to the hostname with a colon ( : ) between them. e.g., http://www.pricebaba.com:80.

● If you leave the port number off, which almost everyone does, then the browser will automatically use port 80 as that is the default port for the http protocol.

Path

● This is the path on the server, culminating with the filename you are trying to reach.

● e.g., the URL http://www.example.com/examples/example1.html.

● The path in this case is /examples/example1.html. This path corresponds to an actual directory structure on the web server.

● So on the web server there is a root directory, an examples directory underneath that root directory, and a file called example1.html underneath that.

URL - summary

http://abc.com/example/example.html:80

PROTOCOL DIRECTORYSTRUCTURE FILE NAMEHOSTNAME PORT

NUMBER

HTTP

Definition:This is a defined process of how to transfer information between a web browser and a web server. All web browsers and web servers follow this process.

HTTP Request

Http Request has 3 Parts,1. HTTP Request Method, URI, and Protocol Version

○ 'GET /servlet/jspName.jsp HTTP/1.1'2. HTTP Request Headers

○ Content-Type, User-Agent, Accept-Encoding, Content-Length, Accept-Language, Host, ...

3. HTTP Request Body - this part contains the actual request being sent to the HTTP Server. The HTTP Request Header and Body are separated by a blank line (CRLF sequence, where CR means Carriage Return and LF means Line Feed). This blank line is a mandatory part of a valid HTTP Request.

HTTP Response

Http Response again has 3 Parts,1. Protocol/Version, Status Code, and its Description

○ Status is 200 - Description 'Ok'○ 404 - 'Page Not Found'○ 500 - Internal Error

2. HTTP Response Headers○ Server, Content-Type, Last-Modified, Content-Length,

3. HTTP Request Body - this the actual response which is rendered in the client window (the browser window). The content of the body will be HTML code. Similar to HTTP Request, in this case also the Body and the Headers components are separated by a mandatory blank line (CRLF sequence).

HTML

● This is the language used in web pages to format text, images, and page layout.

● This language is in pure text and is entered into a file that has an ending of html.

● It is possible to put HTML in documents that do not end in html, but for the purpose of this tutorial, we are only focusing on pure HTML documents.

● The text in these documents contain special codes, called tags, that tell the web browser when it reads the file how to format the text.

* TBC in next session

2. How Web Server Works?7 Steps, to know how web works.

Step 1

● Type desired URL● let say http://pricebaba.com/mobile/nokia-lumia-

710

Step 2

● As discussed earlier● URL will be divided in different parts

a. http:// - protocolb. pricebaba.com - hostnamec. mobile/nokia-lumia-710 - file pathd. 80 (default) - port number

Step 3

● Browser now contacts DNS (Domain Name Server) to translate the entered domain name into its personal IP address.

● DNS Servers are simply databases that work to connect domain names to IP addresses.

● IP Address: It is a 32-bit numeric address usually expressed as four numbers separated by periods.

● 2.53.128.256 this is an IP address which has four number and are called Octates since the range of these four numbers is between 0-255

● Every machine (device) on the Internet will have it’s own unique IP that is used to communicate with others.

Step 4

● It's worth noting that HTTP only defines what the browser and web server say to each other, not how they communicate.

● Once the address of the server is established the browser then determines which protocol should be used for communication.

● In this case it is http

Step 5

● Browser sends special "GET" request to server, to retrieve the address and the page it has been provided.

● Simply, browser request the server to display the information contained at "nokia-lumia-710" - unless there are any special security protocols implemented.

● Finally the server runs the appropriate script and displays the data on browser.

Step 6

● Now will translate the data into HTML format and render the result to the user.

● To show different kinds of files, like images macromedia Browser makes respective additional requests.

Step 7

● The page will take just seconds to appear to the user's screen.

● It will contain images, text and scripts (javascripts)

Remember: Browser only understand HTML and can render javascripts

Session 2aHTML / CSS - Deep Dive

Where are we headed?

1. How to structure your website with HTML2. Design with latest CSS techniques3. Understanding responsive web design4. Best Practices adapted in market5. Tools and References to follow while designing 6. Understanding JavaScripts and now Jquery 7. Do and Don'ts while Designing website8. Difference between UI and UX 9. Discussing case studies

What is HTML?

● Although HTML stands for HyperText Markup Language, it's not really a programming language like Java, Perl, C, or BASIC-- it's much simpler.

● It's a way of describing how a set of text and images should be displayed to the viewer.

Anatomy of a Web Page

● A Web page consists of an HTML file, plus any image (picture) files used on the page.

● The HTML file (a normal text file) contains all the text to display, and also acts as the "glue" to hold the text and images together in the right places, and display them in the right style.

● Tags● Head● Body● Tables● Headers h[1-6]● I B U● div, span● ol, ul, li● <img />

HTML Diagnosed

● forms○ textbox○ textarea○ select○ checkbox○ radio

● hr, br● anchor links● special characters

Dhanyawad

@GanatraT | tg@pricebaba.com