# Web Development
by Spencer Tiberi
## [Internet Recap](https://video.cs50.net/cscie1a/2017/fall/lectures/web_development?t=0m09s)
- All the computers on the internet are interconnected that supports HTTP and TCP/IP
- The internet is an infrastructure to get data from a server to a client
- Supports emails, video conferencing, etc.
- The web is one specific application or service that runs atop the internet
- Assumes an internet exists to get data from point A to point B
- Layers functionality that allows us to click, browse, etc.
## [Web Browser](https://video.cs50.net/cscie1a/2017/fall/lectures/web_development?t=1m3s)
- Web browsers are found on phones, computers, and game consoles
- They have a space to enter a URL (Uniform Resource Locator)
- Prefixed by `http://` or `https://`
- When typing in a URL, you're sending a request from your device to some remote server
- The server looks at your request and figures out how to respond
- Like when we previous requested cat images!
## [Web Server](https://video.cs50.net/cscie1a/2017/fall/lectures/web_development?t=2m52s)
- A computer that has a CPU, RAM, and a hard drive
- Rack servers
![Rack Server](assets/rack.png){: width="400"}
- Sized so they can be stacked
- Odds are your company has many of these if they have a web server
## [HTTP](https://video.cs50.net/cscie1a/2017/fall/lectures/web_development?t=4m21s)
- We send requests to web servers
- Language of these requests is HTTP (Hypertext Transfer Protocol)
- Request:
`GET /cat.jpg HTTP/1.1`
- `1.1` refers to HTTP language 1.1
- Response by the server:
`HTTP/1.1 200 OK`
- This literally means that everything was okay with the request
## [HTTP Status Codes](https://video.cs50.net/cscie1a/2017/fall/lectures/web_development?t=6m3s)
| Code | Status | Meaning |
|------|--------|---------|
| 200 | OK | Everything is OK |
| 301 | Moved Permanently | Browser should redirect to new location |
| 302 | Found | Browser should redirect to new location |
| 304 | Not Modified | Browser will cache files if things don't change to save time/bytes from requests |
| 401 | Unauthorized | Not authorized to view content; Could require login |
| 403 | Forbidden | Not able to view content |
| 404 | Not Found | The requested data could not be found because it doesn't exist on the server |
| 500 | Internal Service Error | Not your fault; The server erred |
## [HTML](https://video.cs50.net/cscie1a/2017/fall/lectures/web_development?t=8m37s)
- In addition to the HTTP headers that include status codes, the bits representing an image or website will be sent to you
- The language that builds websites is HTML (Hypertext Markup Language)
- Sent as a response for a request for a web page
- HTML isn't a programming language but rather a markup language
- Allows you to format, but doesn't have control flow such as loops and conditions
```
hello, world
hello, world
```
- This is html for a webpage that says "hello, world"
- To implement webpages, you need to write HTML
- Editors like Atom and Sublime Text exist to help write HTML
- Ultimately, all you need is a computer, a keyboard, and some way of typing out text!
- ``
- Lets the browser know the following file is written in HTML 5
- ``
- Specifies that the webpage is written in English
- ``
- Example of open and close tags
- First tag opened is the last tag closed
- HTML is a tag-based markup language
- Tags have attributes
- Standard extension for a webpage is .html
- David clicks the hello.html file and loads the page
- In the top corner of the browser tab is the title
- This comes from the `head`
- The `body` contains 99% of the webpage's content
- This page is a local document, so the address is where David saved it
- Not on a web server, so no one else can access it
- There are web hosts to serve up websites we write
- We can also buy our own domain name
## [Atom](https://video.cs50.net/cscie1a/2017/fall/lectures/web_development?t=19m0s)
- TextEdit is not designed for web page development
- Free alternatives made for web development exist
- Atom is an example of one of these editors
![Atom](assets/atom.png){: width="400"}
- Fun fact: these notes were indeed created on Atom!
- In Atom, you can open multiple files at once
- Colors are added for readability
- These colors don't effect how the webpage will render
- HTML supports comments
- To help colleagues who look at your code know your intentions of the code
## [Links](https://video.cs50.net/cscie1a/2017/fall/lectures/web_development?t=21m17s)
- Links can make our pages more dynamic by linking to other pages
- `` are anchor tags that can be used for links
```
link
Visit Harvard.
```
- href (hyper reference) is set to where you want the link to go
- Blue, underlined text traditionally represents a link on a webpage
- The bottom left corner on Chrome shows the destination of a link when you hover over the text
- A link traditionally becomes purple if you've already followed that link
- Browser remembers where you've been
- Potential privacy concern
## [Images](https://video.cs50.net/cscie1a/2017/fall/lectures/web_development?t=26m46s)
- The web is filled with images
- `` is the image tag
```
image
```
- The `src` (source) attribute is set to the address of the file
- The `alt` (alternative text) attribute is what displays if the page can't be seen
- Closes itself as one tag
## [Paragraphs](https://video.cs50.net/cscie1a/2017/fall/lectures/web_development?t=30m42s)
- Even if you add spaces to format paragraphs, HTML will render without them!
- When looking at your webpage you can "view page source" on your browser to see the original HTML with your spaces, but the webpage still doesn't have these spaces
- The browser will only do what HTML tells it to do
- The browser needs instructions in the form of HTML tags
- Paragraph tags (``) tell the browser to create a paragraph of text
## [Headings](https://video.cs50.net/cscie1a/2017/fall/lectures/web_development?t=34m25s)
- `` are the heading 1 tags
- There also exists ``, ``, ``, ``, and ``
- Headings get smaller the larger the number
- These make the font larger for usage similar to marking chapters in a book
## [Lists](https://video.cs50.net/cscie1a/2017/fall/lectures/web_development?t=35m27s)
- Unordered lists
- Use bullets (like these!)
- `
`
- `` are list item tags
```
unordered list
foo
bar
baz
```
![Unordered List](assets/ul.png){: width="400"}
- Ordered lists
- Use numbers
- ``
```
ordered list
` are table data tag
- Like columns or cells
```
table
7
8
9
4
5
6
1
2
3
*
0
#
```
![Table](assets/table.png){: width="400"}
## [Implementing Google](https://video.cs50.net/cscie1a/2017/fall/lectures/web_development?t=38m52s)
- When you type google.com your browser adds "https://www." to the beginning of the URL
- As is needed to surf the web
- `curl` is a command ran in the terminal that behaves much like a browser
- It sends a request like a browser and shows what html is returned
![curl1](assets/curl1.png){: width="400"}
- Capital letter tags are a bit dated
- Shows google.com is located at http://www.google.com
![curl2](assets/curl2.png){: width="400"}
- The `-I` flag tells `curl` to return HTML headers
- Includes status codes and other info humans normally don't see
- Google's server has been configured to redirect users to http://www.google.com
- UTF-8 is unicode characters
- `curl http://www.google.com` returns a webpage that includes HTML and JavaScript
![curl3](assets/curl3.png){: width="400"}
- Searching for cats changes the URL to https://www.google.com followed by a large sequence of characters
- Distilling this URL to https://www.google.com/search?q=cats leads to the same results
- We can "create" a search engine using this info!
## [Forms](https://video.cs50.net/cscie1a/2017/fall/lectures/web_development?t=48m2s)
- `` are form tags that take attributes for an action and a method
```
search
```
- `action="https://www.google.com/search" method="get"` means "get me https://www.google.com/search"
- Inside the form, we can have `` tags
- These can have name, type, value, and text attributes
- This implementation punts the searching to Google
- The browser uses the HTML form to assemble a URL
- `https://www.google.com/search?q=cats`
- `?` in the URL means "Hey Server! Here comes my HTTP parameters!"
- A URL may have multiple parameters separated by `&`
## [css0.html](https://video.cs50.net/cscie1a/2017/fall/lectures/web_development?t=51m47s)
- Let's make our webpages more pretty
- CSS (Cascading Style Sheets) allows us to style our webpages
- In contrast, HTML allows us to structure our webpages
```
css0
John Harvard
Welcome to my home page!
```
- Here, inside `body`, we have three tags: ``, ``, and ``
- They include style attributes written in CSS
- These are written as key-value pairs
- In CSS, there is a property called `font-size`
- CSS supports `small`, `medium`, `large`, and exact sizes such as `16px`
- `text-align: center;` centers the text
- This example has some redundancy
## [DOM](https://video.cs50.net/cscie1a/2017/fall/lectures/web_development?t=55m52s)
- CSS supports the notion of a hierarchy
![DOM](assets/dom.png){: width="400"}
- Rectangles here represent HTML tags or elements
- Ovals represent text values
- This is called a tree in Computer Science, much like a family tree
- When a browser receives a webpage, it builds a tree-like data structure in your computer's RAM
- Thus, in this case `header`, `main`, and `footer` are all child nodes of of the parent node `body`
## [css1.html](https://video.cs50.net/cscie1a/2017/fall/lectures/web_development?t=58m48s)
- We can put the `text-align: center;` attribute on the `body` element so it will pass it on to its children (`header`, `main`, and `footer`)
```
css1
John Harvard
Welcome to my home page!
```
- This is better design as we can change all the text alignment at once
## [css2.html](https://video.cs50.net/cscie1a/2017/fall/lectures/web_development?t=1h1m11s)
- Combining HTML and CSS is generally frowned upon
- Makes it hard to collaborate
- One person can work on content (HTML)
- The other on style (CSS)
```
css2
John Harvard
Welcome to my home page!
```
- `
css3
John Harvard
Welcome to my home page!