|
5 | 5 | The content of the world wide web is made up of three parts:
|
6 | 6 |
|
7 | 7 | - **HTML** (Hypertext Markup Language) provides the structure and content
|
8 |
| -- **CSS** (Cascading Style Sheets) provides the style |
| 8 | +- **CSS** (Cascading Style Sheets) provides the style and presentation |
9 | 9 | - **JS** (JavaScript) provides the interactivity
|
10 | 10 |
|
11 |
| -When you access a website the owner's server sends your computer the code (written in HTML, CSS, and JS) which your browser then renders into a web page that you can view and interact with. |
| 11 | +When you enter a link into your web browser's address bar, it sends a request to a server. |
| 12 | +The server processes the request and sends your computer the code (written in HTML, CSS, and JS). |
| 13 | +Your browser then renders that code to display a web page that you can view and interact with. |
12 | 14 |
|
13 | 15 | ## View Source
|
14 | 16 |
|
| 17 | +One fascinating aspect of the web is that everyone must share code to participate. |
| 18 | +You send a request to a server, they send back some code. |
| 19 | +Your browser is not a black box--you can always peek under the hood! |
| 20 | + |
15 | 21 | **Right click** on any web page and select "**View page source**" from the context menu to see the code that is being rendered by your browser (shortcut: `Ctrl + U` / `Command + U`).
|
16 | 22 |
|
17 | 23 | Or put `view-source:` in front of any URL in your address bar, for example:
|
18 | 24 |
|
19 |
| -`view-source:https://evanwill.github.io/web-crash-course/` |
| 25 | +`view-source:https://evanwill.github.io/power-browser/` |
20 | 26 |
|
21 | 27 | This is HTML!
|
22 | 28 | (We'll learn more in the next lesson, but just take a peak now)
|
23 | 29 |
|
24 | 30 | On another web page, right click on any element in the page and select "Inspect" or "Inspect Element" from the context menu to open your browser's built in **developer tools**.
|
25 | 31 | Dev tools let you look at the code in context, which can be a great way to learn about HTML and to understand how others created the sites you use.
|
26 | 32 |
|
| 33 | +You can use dev tools to manipulate the page you are looking at by applying your own styles that override what the server sends. |
| 34 | +In the area of your dev tools window that says "element.style", try typing in `display: none;`. |
| 35 | +What happens? |
| 36 | + |
27 | 37 | ## Uniform Resource Locators (URLs)
|
28 | 38 |
|
29 | 39 | To retrieve that code we need a web address.
|
|
0 commit comments