Skip to content

Commit c294268

Browse files
hectorcorreahectorcorrea
committed
Minor tweaks
1 parent 575c290 commit c294268

5 files changed

+95
-102
lines changed

‎hello-world-bootstrap.html

-56
This file was deleted.

‎hello-world-fancy.html

+40-13
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,65 @@
11
<html>
22
<head>
3-
<title>Hello (fancy)</title>
3+
<title>Hello (fancy with CSS)</title>
4+
<style>
5+
h1 {
6+
background-color: gray;
7+
}
8+
div {
9+
margin-left: 100px;
10+
}
11+
p {
12+
font-family: 'Courier New', Courier, monospace;
13+
}
14+
img {
15+
border: 2px solid black;
16+
box-shadow: 10px 10px orange;
17+
}
18+
footer {
19+
color: gray;
20+
}
21+
</style>
422
</head>
523
<body>
6-
<h1>Hello World (fancy edition)</h1>
24+
<header>
25+
<h1>Hello World (fancy edition)</h1>
26+
</header>
727
<div>
8-
<p>This is my first web page</p>
9-
<p>And it has many paragraphs</p>
28+
<p>
29+
This is my first web page, and it has many paragraphs
30+
</p>
1031
<p>
1132
This paragraph is so fancy it even has text
1233
in <b>bold</b> and <i>italics</i>.
1334
</p>
35+
<p>And here is a list of programming languages:</p>
36+
<ul>
37+
<li>Ruby</li>
38+
<li>Java</li>
39+
<li>Python</li>
40+
</ul>
41+
<p>This is a quote by <a href="https://www.ursulakleguin.com/a-rant-about-technology" target="_blank">Ursula K. Le Guin</a></p>
42+
<blockquote>
43+
"Technology is the active human interface with the material world."
44+
</blockquote>
1445
<p class="important-paragraph">
1546
This paragraph is very important.
1647
</p>
1748
<p>
1849
We even have a <a href="hello-world.html">link to our original hello-world page</a>.
1950
</p>
2051
<p>
21-
This paragraph even has a <button id="do-nothing-button">button</button> that does nothing</p>
52+
This paragraph even has a <button id="do-nothing-button">button</button> that does nothing
2253
</p>
54+
<!-- this is multi-line a comment, the browser ignores it
55+
(i.e. it does not show on the page) -->
2356
<p class="important-paragraph">
2457
This paragraph is also very important.
2558
</p>
26-
<!-- this is a comment,
27-
the browser ignores it -->
28-
<p>
29-
Links can also point to other websites too, for example to
30-
<a href="https://en.wikipedia.org/wiki/HTML" target="_blank">Wikipedia</a>
31-
</p>
3259
</div>
3360
<div>
34-
<p>And here is more content and a photo<p>
35-
<img src="./public/chicago-street-art.jpg" alt="Chicago street art"/>
61+
<p>And here is more content and a photo<p>
62+
<img src="./public/chicago-street-art.jpg" alt="Chicago street art"/>
3663
</div>
3764
<footer>
3865
This is the footer of the page.

‎hello-world.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,4 @@
66
<h1>Hello World</h1>
77
<p>This is my first web page</p>
88
</body>
9-
</html>
9+
</html>

‎tutorial.md

+31-18
Original file line numberDiff line numberDiff line change
@@ -30,14 +30,13 @@ The browser communicates with the web server via a protocol known as HTTP. When
3030
| |
3131
```
3232

33-
> If this is your first encounter with web development, the Mozilla Developer Network has great
34-
> tutorials about the [history of the web](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/The_web_and_web_standards),
35-
> [how the Internet works](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work),
36-
> and [getting started with the web](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web)
37-
> that are worth checking out.
38-
>
39-
> The book "Broad Band - The Untold Story of the Women Who Made the Internet" by Claire L. Evans is also a fascinating
40-
> story of the people and communities that made the Internet what it is today.
33+
If this is your first encounter with web development the following are good pieces to learn more about the history of the internet and the world wide web:
34+
35+
* [History of the web](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/The_web_and_web_standards)
36+
* [How the Internet works](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work),
37+
* [Getting started with the web](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web)
38+
* The book [Broad Band - The Untold Story of the Women Who Made the Internet](https://catalog.princeton.edu/catalog/99108000433506421) by Claire L. Evans is also a fascinating story of the people and communities that made the Internet what it is today.
39+
* [The birth of the Web](https://home.web.cern.ch/science/computing/birth-web) at CERN where you can view a copy of the very first web site.
4140

4241
We'll dive into the details of HTTP at a later point, but to get started let's look closely at HTML first.
4342

@@ -220,23 +219,26 @@ The talk [Everything You Know About Web Design Just Changed](https://www.youtube
220219
### CSS - using an external file
221220
In our previous examples we inserted the CSS for our pages right on the `<head>...</head>` section of the HTML page.
222221

223-
Another common way to insert CSS inside a page is to *reference an external file* that has the CSS that we would normally put in the `<style>...</style>` section. For example, let's look at the `<head>...</head>` section of our `hello-world-bootstrap.html` page, notice that it looks like this:
222+
Another common way to insert CSS inside a page is to *reference an external file* that has the CSS that we would normally put in the `<style>...</style>` section. For example, let's replace the `<head>...</head>` section of our `hello-world-fancy.html` page to look like this:
224223

225224
```
226225
<head>
227-
<title>Hello (bootstrap)</title>
228-
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
226+
<title>Hello (fancy)</title>
227+
<link rel="stylesheet" href="https://fonts.xz.style/serve/inter.css">
228+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@exampledev/[email protected]/new.css">
229229
</head>
230230
```
231231

232-
The `<link>` element tells the browser to load the CSS styles from the URL indicated. This particular example is using the CSS defined by [Bootstrap](https://getbootstrap.com/) which is a popular toolkit for frontend development. The HTML content in the `hello-world-bootstrap.html` file references several CSS class defined by Bootstrap, notice the `class="container"`, `class="row"`, `class="col"` on that HTML file.
232+
The `<link>` element tells the browser to load the CSS styles from the URL indicated. This particular example is using the CSS defined by [new.css](https://github.com/xz/new.css) which is a very small framework for frontend development that uses "some sensible defaults and styles your HTML to look reasonable".
233+
234+
Refresh your browser to view the `hello-world-fancy.html` page with the new defaults.
233235

234236

235237
## Leaving file:// behind
236238

237-
If you look at the address bar in your browser while you have the `hello_world.html` loaded you'll notice that it says something along the lines of `file:///something/.../hello-world.html`.
239+
If you look at the address bar in your browser while you have the `hello-world-fancy.html` loaded you'll notice that it says something along the lines of `file:///something/.../hello-world-fancy.html`.
238240

239-
The `file://` at the beginning of the URL indicates that the browser is accessing this file via the "file protocol". However, when you visit a website, say https://wikipedia.org, you'll notice that the URL will start with `http://` (or `https://`) rather than `file://`.
241+
The `file://` at the beginning of the URL indicates that the browser is accessing this file via the "file protocol". However, when you visit a website, say https://wikipedia.org, you would notice that the URL starts with `http://` (or `https://`) rather than `file://`.
240242

241243
The file protocol is fine for loading simple HTML pages from our local disk, but for web development we use the HTTP protocol which allows us to load HTML pages from remote servers. In the example above the URL `https://wikipedia.org` tells the browser to fetch the Wikipedia home page via the network (rather than fetching it from a file on our local disk.)
242244

@@ -404,6 +406,19 @@ end
404406

405407
The important thing about this application is that we could put it on a different server (rather than on our own laptop) and make it available for the world to access, say via a URL like `http://my-first-ruby-application.org`. We are not going to this now, but the fact that this application uses HTTP as its communication protocol and produces HTML means that we could.
406408

409+
> The 3000 in the URL http://localhost:3000/ designates the port the browser will
410+
> use to talk to our `localhost` server. If we don't indicate a port in the URL
411+
> (e.g. http://wikipedia.org) the browser by default will use port 80 and will
412+
> issue http://wikipedia.org:80 behind the scenes.
413+
>
414+
> Our little Ruby program is hard-coded to listen on port `3000`, see line
415+
> `set :port, 3000` in `webdemo1.rb`.
416+
>
417+
> Port numbers below 1024 are reserved in most operating systems and
418+
> [require administrative privileges to be accessed](https://stackoverflow.com/questions/10182798/why-are-ports-below-1024-privileged).
419+
> To work around that security restriction developers typically use port
420+
> numbers like 3000 or 8080 during development.
421+
407422
For now, type `CTRL-C` from your terminal to shut down this application. You'll see the following output in the terminal:
408423

409424
```
@@ -428,11 +443,11 @@ get("/fancy") do
428443
end
429444
```
430445

431-
By default the ERB file is expected to be found in the `./views` folder. In fact you can open this file in VS Code and you'll notice that is an almost identical copy to the `hello_world_fancy.html` that we used at the beginning of the workshop.
446+
By default the ERB file is expected to be found in the `./views` folder. In fact you can open this file in VS Code and you'll notice that is an almost identical copy to the `hello-world-fancy.html` that we used at the beginning of the workshop.
432447

433448
We can run this new demo by running `ruby webdemo2.rb` from the Terminal window and pointing our browser again to http://localhost:3000/fancy
434449

435-
Notice how it looks just like our previous `hello_world_fancy.html` page, but again, this time the page is served via HTTP (rather than via the file system).
450+
Notice how it looks just like our previous `hello-world-fancy.html` page, but again, this time the page is served via HTTP (rather than via the file system).
436451

437452
Another thing that is not obvious in the code but that is important to notice is the page rendered at http://localhost:3000/fancy is using some CSS styling, but there is no `<style>...</style>` section defined in our `fancy.erb` file. Where is this styling coming from?
438453

@@ -649,5 +664,3 @@ Similarly to what we did with CSS, it is also possible to load external JavaScri
649664
```
650665

651666
however, the order in which JavaScript is loaded and executed is important and something that has to be kept in mind when loading from an external source from the `<head>...</head>` section of the page. If we load and execute the JavaScript before the HTML elements are rendered on the page the code won't be able to find them. There are many ways of working around this issue, and libraries like [jQuery](https://jquery.com/) take care of it rather nicely, just be aware of this.
652-
653-

‎views/fancy.erb

+23-14
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,43 @@
1-
<h1>Hello World (fancy edition using Ruby and Sinatra)</h1>
1+
<header>
2+
<h1>Hello World (fancy edition)</h1>
3+
</header>
24
<div>
3-
<p>This is my first web page</p>
4-
<p>And it has many paragraphs</p>
5+
<p>
6+
This is my first web page, and it has many paragraphs
7+
</p>
58
<p>
69
This paragraph is so fancy it even has text
710
in <b>bold</b> and <i>italics</i>.
811
</p>
12+
<p>And here is a list of programming languages:</p>
13+
<ul>
14+
<li>Ruby</li>
15+
<li>Java</li>
16+
<li>Python</li>
17+
</ul>
18+
<p>This is a quote by <a href="https://www.ursulakleguin.com/a-rant-about-technology" target="_blank">Ursula K. Le Guin</a></p>
19+
<blockquote>
20+
"Technology is the active human interface with the material world."
21+
</blockquote>
922
<p class="important-paragraph">
1023
This paragraph is very important.
1124
</p>
1225
<p>
13-
We even have a <a href="/">link to our first page</a>.
26+
We even have a <a href="hello-world.html">link to our original hello-world page</a>.
1427
</p>
1528
<p>
16-
This paragraph even has a <button id="do-nothing-button">button</button> that does nothing</p>
29+
This paragraph even has a <button id="do-nothing-button">button</button> that does nothing
1730
</p>
31+
<!-- this is multi-line a comment, the browser ignores it
32+
(i.e. it does not show on the page) -->
1833
<p class="important-paragraph">
1934
This paragraph is also very important.
2035
</p>
21-
<!-- this is a comment,
22-
the browser ignores it -->
23-
<p>
24-
Links can also point to other websites too, for example to
25-
<a href="https://en.wikipedia.org/wiki/HTML" target="_blank">Wikipedia</a>
26-
</p>
2736
</div>
2837
<div>
29-
<p>And here is more content and a photo<p>
30-
<img src="chicago-street-art.jpg" alt="Chicago street art"/>
38+
<p>And here is more content and a photo<p>
39+
<img src="./public/chicago-street-art.jpg" alt="Chicago street art"/>
3140
</div>
3241
<footer>
3342
This is the footer of the page.
34-
</footer>
43+
</footer>

0 commit comments

Comments
 (0)