# 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
### 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
## 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.
