<commit_before>title: HTML Lesson 2 - Image and hyperlink
author:
  name: select @ github
  twitter: rockdapus
  url: https://github.com/select/learn-web-development
output: dist/html-lesson-2.html
theme: ./custom-theme
controls: true

--
#HTML Lesson 2

##Image and Hyperlink

--
### The `img` tag
```html
<img src="dir/path/hot-chicks.jpg"
  alt="Natures beauty captured in an image.">
```
What? No closing or empty tag.

Relax HTML is "almost" XML but more relaxed, everybody forgot to close them anyway.

`dir/path/image.jpg` Is you Windows broken? Paths go like `C:\windowse\system32\virus.dll`


--
### Moving down
All paths in GNU/Linux (and OS X) start from one root
```
/
```
Access all your files by adding `/` between folders
```
/media/MyUSBstick/secret-stash/rainbow-dash.jpg
```

--
### An example folder structure
Lets say we have to following folder structure
```
o
├─o home
│ └─o Desktop
│ └─o Documents
│
├─o media
│ └─o MyUSBstick
…
```

--
### From the current directory
if you are in e.g. `/home/Desktop` you can start with
```
.
```
from the **current location** and go to a subfolder
```
./web-dev-course/presentation.md
```
which is the same as writing
```
/home/Desktop/web-dev-course/presentation.md
```

--
### Moving one level up
Go one level up from `/home/Desktop` with
```
..
```
to access your documents you could write
```
../Documents/my-poem-about-love.txt
```
which is the same as writing
```
/home/Documents/my-love-poem.txt
```

--
### Did you get it already?
How do I go two levels up?
<commit_msg>added pop up file trees to directory navigation slides <commit_after>title: HTML Lesson 2 - Image and hyperlink
author:
  name: <NAME>
  github: select
  url: https://github.com/select/learn-web-development
output: dist/html-lesson-2.html
theme: ./custom-theme
controls: true

--
#HTML Lesson 2

##Image and Hyperlink

--
### The `img` tag
```html
<img src="dir/path/hot-chicks.jpg"
  alt="Natures beauty captured in an image.">
```
What? No closing or empty tag.

Relax HTML is "almost" XML but more relaxed, everybody forgot to close them anyway.

`dir/path/image.jpg` Is you Windows broken? Paths go like `C:\windowse\system32\virus.dll`


--
### Moving down
All paths in GNU/Linux (and OS X) start from one root
```
/
```
Access all your files by adding `/` between folders
```
/media/MyUSBstick/secret-stash/rainbow-dash.jpg
```

--
### An example folder structure
Lets say we have the following folder structure
```
o
├─o home
│ ├─o Desktop
│ └─o Documents
│
├─o media
│ └─o MyUSBstick
…
```

--
### From the current directory
<div style="position: absolute; top: 0; right: 0; font-size: 0.6em; background-color: white; border: 2px dashed #eee;" id="dirs-current" hidden>
```
    o
    ├─o home
    │ ├─★ Desktop
    │ │ └─o web-dev-course
    │ │   └─o presentation.md
    │ └─o Documents
    │
    ├─o media
    │ └─o MyUSBstick
    …
    ```
</div>
<span style="font-size: 0.3em; position: absolute; top: 0; right: 0; cursor: pointer;" onclick="document.querySelector('#dirs-current').hidden = !document.querySelector('#dirs-current').hidden;"> ? show tree </span>
if you are in e.g. `/home/Desktop` you can start with
```
.
```
from the **current location** and go to a subfolder
```
./web-dev-course/presentation.md
```
which is the same as writing
```
/home/Desktop/web-dev-course/presentation.md
```


--
### Moving one level up
<div style="position: absolute; top: 0; right: 0; font-size: 0.6em; background-color: white; border: 2px dashed #eee;" id="dirs-up" hidden>
```
    o
    ├─o home
    │ ├─★ Desktop
    │ └─o Documents
    │   └─o my-poem-about-love.txt
    │
    ├─o media
    │ └─o MyUSBstick
    …
    ```
</div>
<span style="font-size: 0.3em; position: absolute; top: 0; right: 0; cursor: pointer;" onclick="document.querySelector('#dirs-up').hidden = !document.querySelector('#dirs-up').hidden;"> ? show tree </span>
Go one level up from `/home/Desktop` with
```
..
```
to access your documents you could write
```
../Documents/my-poem-about-love.txt
```
which is the same as writing
```
/home/Documents/my-love-poem.txt
```

--
### Did you get it already?
How do I go two levels up?

{'fraction_non_alphanumeric': 0.16120481927710845, 'fraction_numerical': 0.006746987951807229, 'mean_word_length': 3.5267175572519083, 'pattern_counts': {'":': 0, '<': 14, '<?xml version=': 0, '>': 14, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2931249', 'n_tokens_mistral': 1524, 'n_tokens_neox': 1443, 'n_words': 493}