Web Basics

Chinmay Pendharkar | June 2018

Internet vs Web

# Internet - Created in : 1974 - Created by : Vint Cerf and Bob Kahn - Created at : DARPA, USA - Created for : Interconnecting networks around the world.
# Web - Created in : 1989 - Created by : Tim Berners-Lee - Created at : CERN, Switzerland - Created for : Accessing documents, over the internet.

Networking Layers

Communication

Server-Client

Servers

Run you own server!

python -m http.server 8080

Clients

Simple Client!

curl -i http://google.com

Request Response Model

# HTTP Protocol | Components | Description | Example | | ---------- | -------------- | ------------------------------- | | Verbs | Action | GET, PUT, POST, DELETE | | URL | Location | https://subnero.com/logo.png | | Headers | Meta data | Last-Modified: Tue, 21 Nov 2017 | | Body | Document data | Image, Text , etc |
## HTTP Protocol (Request) ``` GET logo.png HTTP/1.1 Host: www.subnero.com Accept: image/png, */* Accept-Language: en-us Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1) (blank line) ```
## HTTP Protocol (Response) ``` HTTP/1.1 200 OK Date: Sun, 18 Oct 2009 08:56:53 GMT Server: Apache/2.2.14 (Win32) Last-Modified: Sat, 20 Nov 2004 07:16:26 GMT ETag: "10000000565a5-2c-3e94b66c2e680" Accept-Ranges: bytes Content-Length: 44 Content-Type: text/html X-Pad: avoid browser bug <html><body><h1>It works!</h1></body></html> ```
## HTTP Status Codes - 200 OK - 301 Moved Permanently - 401 Unauthorized - 403 Forbidden - 404 Not Found

index.html

https://subnero.com → https://subnero.com/index.html

Dev Tools

Static vs Dynamic

Static vs Dynamic

User Interface

### A browser understands only 3 "languages" - HTML → Content/Data - CSS → Presentation/Style - JS → Interactivity
### HTML - Hyptetext Markup Language - Structuring of content (text, image, etc). - Allows grouping of content. ``` <html> <head> <title>This is a title</title> </head> <body> <p id="p1" >Hello world!</p> </body> </html> ```

HTML - Basic Styles

<button>Click Me!</button>

HTML - Inline Styles

<button style="color:red">Click Me!</button>
### CSS - Cascading Style Sheets - Affects Presentation (Look and Feel) - Layout, colors, and fonts. - Targets html elements using HTML `class` and `id` ``` button { color: pink; } #p1 { margin-top: 5px; } ```
### CSS - Cascading Style Sheets - [100s of stylistic properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference#Keyword_index) - Advance layouts (tables, [mobile responsive design](https://sauvc.org/)) - [Basic Animation](https://daneden.github.io/animate.css/) - Lots of libraries available. For eg. [Bootstrap](https://getbootstrap.com/docs/3.3/css/#buttons-active)

CSS - BootStrap

Example
### JS - Javascript - NOT RELATED TO JAVA - Full programing (scripting) language that runs in a browser. - Able to read and write to the HTML on the page. ``` document.getElementsByTagName('button')[0].style.color = 'green' ```
### JS - Devtools - Javascript REPL (Console) - Javascript Debugger/IDE in every browser ![img](img/ide.jpg)
## Cool things on the Web - Presentation Slides - [reveal.js](https://github.com/hakimel/reveal.js) - [Musical Instruments](https://www.propellerheads.se/europa) - [Oscilloscope UI](http://waveformslive.com/) - [PCB Layout Tools](https://upverter.com/HiveTracker/d253389ed0119004/HiveTracker/) - ... and many more.
## Web is the user interface of the future!

Hands On

## Github Pages - Free static web server. - Create a file named `index.html` - Add some HTML to the file. - Enable in [Github settings](https://github.com/subnero1/subnero1.github.io/settings) - Go to the published URL.