class: center, middle, inverse

# Llenguatges de marques
### HTML

.footnote[Mateu Yábar]

---
# Html
- Llenguatge de presentació
- *.html
	- en desús: *.htm

---
# Usos del Html
- Pàgines web
- Interfície gràfica d'alguns programes

---
# HTML
- HyperText Markup Language
	- _HyperText_ fa referència a la manera que es linca la web
- Inici
	- 1989 Tim Berners-Lee & Anders Berglund - CERN
- Entitat actual
	- World Wide Web Consortium (W3C)
- Versió actual
	- HTML5
- Navegadors
	- intèrprets de HTML

---
# Esquelet HTML
```html
<!DOCTYPE html>
<html>
	<head>
    <meta charset="UTF-8">
    <title>Títol de la pàgina</title>
    
	</head>
	<body>
		
	</body>
</html>
```

---
# Titols
```
<h1>titol1</h1>
<h2>titol2</h2>
<h3>titol3</h3>
<h4>titol4</h4>
<h5>titol5</h5>
<h6>titol6</h6>
```

<h1>titol1</h1>
<h2>titol2</h2>
<h3>titol3</h3>
<h4>titol4</h4>
<h5>titol5</h5>
<h6>titol6</h6>

---
# Paràgraf
```
<p>paragraf 1</p>
<p>paragraf 2</p>
```

<p>paragraf 1</p>
<p>paragraf 2</p>

---
# Emfasis

```
<p>Un text amb emfasis s'escriu entre <em>etiquetes em</em>.</p>
<p>Un text amb fort emfasis s'escriu entre <strong>etiquetes strong</strong>.</p>
```

<p>Un text amb emfasis s'escriu entre <em>etiquetes em</em>.</p>
<p>Un text amb fort emfasis s'escriu entre <strong>etiquetes strong</strong>.</p>

- Per defecte
	- emfasi (em) és cursiva
	- strong és negreta
	- Les següents etiquetes estan en desús:

```
<b>bold - negreta</b> <i>italic - cursiva</i>
```

---

# Llistes
```
<ol>
	<li>Items</li>
	<li>D'una llista ordenada</li>
</ol>
```

<ol>
	<li>Items</li>
	<li>D'una llista ordenada</li>
</ol>

```
<ul>
	<li>Items</li>
	<li>D'una llista sense numeració</li>
</ul>
```

<ul>
	<li>Items</li>
	<li>D'una llista sense numeració</li>
</ul>

---
# Links
```
<p>Aquest text és un <a href="http://itb.mateuyabar.com">link a les transparències</a></p>
```

<p>Aquest text és un <a href="http://itb.mateuyabar.com">link a les transparències</a></p>

---
# Links interns

```
<p>Anar a la <a href="#sectionA">secció A</a></p>
<p>Lorem ipsum</p>
<section id="sectionA">
<h7>Section A</h7>
<p>Lorem ipsum</p>
</section>
```

<p>Anar a la <a href="#sectionA">secció A</a></p>
<p>Lorem ipsum</p>
<section id="sectionA">
<h7>Section A</h7>
<p>Lorem ipsum</p>
</section>

---
# Imatges

```
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Markdown-mark.svg/200px-Markdown-mark.svg.png" alt="Logo Markdown">
```

---
# Cites (Blockquotes)

```
<blockquote>Això és una cita</blockquote>
```

---
# Exercici 1
Fes un Html amb el següent contingut i format
.super_long_text[
# Snatch (porcs i diamants)
## Any producció
2000

## Argument
El destí creuat de diversos personatges, entre 
els quals Franky anomenat "Franky quatre dits" que ha de 
lliurar al "Cosí Avi", un mafiós novaiorquès, un enorme 
diamant que acaba de robar.

## Actors
1. Jason Statham
2. Brad Pitt
3. Benicio Del Toro

## Urls
- [IMDB](https://www.imdb.com/title/tt0208092/)
- [MovieDB](https://www.themoviedb.org/movie/107-snatch)
]

---
# Exercici
- Exercici 1
<div class="countdown" data-countdown="20"></div>

---
# Publicar una pàgina HTML
- la ruta d'entrada per defecte és _index.html_
- Si posem un fitxer html en un lloc accesible, el podrem veure desde el navegador
  - En una carpeta del nostre ordinador
  - Hosting web
    - GitLab i Github permeten penjar pàgines html de forma gratuita

---
# GitLab pages
- Si fas servir GitLab
- El contingut de la nostra web ha d'estar en una carpeta anomeada _public_
- Afegeix el següent fixer al projecte git
  - __.gitlab-ci.yml__

```yaml
image: alpine:latest

pages:
  stage: deploy
  script:
  - echo 'Nothing to do...'
  artifacts:
    paths:
    - public
  only:
  - master
```

---
# GitLab pages
- Dins del respository al GitLab ves a settings - pages
- T'apareixerà el link de la teva web
  - Pot tardar una mica en estar activa

---
# GitLab pages
- Explicació en viu

---
# GitHub pages
- Si fas servir GitHub:

- https://pages.github.com/

---
# Exericici
- En el teu projecte d'exercicis crea un fitxer index.html
    - Posa un link des d'aquest fitxer a l'exercici anterior
- Publica la web
  - Ves actualitzant el index.html amb els nous exercicis que vagis fent

- Exercici 1
<div class="countdown" data-countdown="8"></div>

---
# Div

Ens permet fer agrupacions d'elements (div ve de division)

```
<h1>Titol</h1>
<p>Una mica de text</p>
<div>
	<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Markdown-mark.svg/200px-Markdown-mark.svg.png" alt="Logo Markdown"/>
	<p>Image Markdown</p>
</div>
```

<h1>Titol</h1>
<p>Una mica de text</p>
<div>
	<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Markdown-mark.svg/200px-Markdown-mark.svg.png" alt="Logo Markdown"/>
	<p>Image Markdown</p>
</div>

---
# Elements semàntics
- Divs que donen informació semàntica que del contingut

.pull-left[
```html
<article> </article>
<aside> </aside>
<details> </details>
<figcaption> </figcaption>
<figure> </figure>
<footer> </footer>
<header> </header>
<main> </main>
<mark> </mark>
<nav> </nav>
<section> </section>
<summary> </summary>
<time> </time>
```
]

.pull-right[![img_sem_elements](img_sem_elements.gif)]

---
class: long_code, super_long_text
# Taules

```html
<table>
  <caption>A summary of the UK's most famous punk bands</caption>
  <thead>
    <tr>
      <th>Band</th>
      <th>Year formed</th>
      <th>No. of Albums</th>
      <th>Most famous song</th>
    </tr>
  </thead>
  <tbody>
    <tr><th>Buzzcocks</th><td>1976</td><td>9</td><td>Ever fallen in love (with someone you shouldn't've)</td></tr>
    <tr><th>The Clash</th><td>1976</td><td>6</td><td>London Calling</td></tr>
    <tr><th>The Stranglers</th><td>1974</td><td>17</td><td>No More Heroes</td></tr>
  </tbody>
  <tfoot>
    <tr>
      <th colspan="2">Total albums</th>
      <td colspan="2">77</td>
    </tr>
  </tfoot>
</table>
```

<table>
  <caption>A summary of the UK's most famous punk bands</caption>
  <thead>
    <tr>
      <th>Band</th>
      <th>Year formed</th>
      <th>No. of Albums</th>
      <th>Most famous song</th>
    </tr>
  </thead>
  <tbody>
    <tr><th>Buzzcocks</th><td>1976</td><td>9</td><td>Ever fallen in love (with someone you shouldn't've)</td></tr>
    <tr><th>The Clash</th><td>1976</td><td>6</td><td>London Calling</td></tr>
    <tr><th>The Stranglers</th><td>1974</td><td>17</td><td>No More Heroes</td></tr>
  </tbody>
  <tfoot>
    <tr>
      <th colspan="2">Total albums</th>
      <td colspan="2">77</td>
    </tr>
  </tfoot>
</table>

---
# Exercici
- Fes la següent taula i publica-la (modifica el index.html per afegir un link)

<table>
  <caption>Ingredients</caption>
  <thead>
    <tr>
      <th>Quantitat</th>
      <th>Producte</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>120g</td><td>Farina</td></tr>
    <tr><td>20cl</td><td>Llet</td></tr>
    <tr><td>5g</td><td>Sal</td></tr>    
  </tbody>
</table>

---
# Exercici
- Pràctica Html: Espècies en perill d'extinció