Aula 16 - HTML: Listas e links

class: center, middle, title-slide

.title[
# Aula 16 - HTML: Listas e links
]
.author[
### Leonardo Mancini
]
.date[
### 2022
]

---

# Listas

Há dois tipos de listas, as ordenadas e as
 não ordenadas

1. Esta é 
1. Uma lista 
1. Ordenada

- E esta é
- Uma lista 
- Não ordenada

As tags para cada uma delas é diferente:

```r
<ul>
 <li> Esta é uma lista não ordenada</li>
</ul>
```

```r
<ol>
 <li> Esta é uma lista ordenada</li>
</ol>
```

---
# Lista não ordenada

Abra o Notepad (windows key + Notepad)

Crie uma lista como a que vem abaixo:

<ul>
 <li> Farinha </li>
 <li> Ovo </li>
 <li> Leite </li>
 <li> Açúcar </li>
 <li> Fermento </li>
</ul>

Salve o arquivo como "receita.html"

Abra no navegador

---
# Lista não ordenada

```r
<ul>
 <li> Farinha </li>
 <li> Ovo </li>
 <li> Leite </li>
 <li> Açúcar </li>
 <li> Fermento </li>
</ul>
```

---

#Lista ordenada

- Adicione o seguinte código à sua página:

```r
*<ol>
 <li> Farinha </li>
 <li> Ovo </li>
 <li> Leite </li>
 <li> Açúcar </li>
 <li> Fermento </li>
*</ol>
```

- Salve o arquivo como "receita.html"

- Abra no navegador

---

# Listas aninhadas

É possível aninhar listas

<ul>

<li>Objetivos</li>
	<li>Experiências anteriores </li>
 	<ul>
 		<li>Estágio 1</li>
 		<li>Estágio 2</li>
 	</ul>
	<li>Domínio de ferramentas</li>
	<li>Contato</li>
</ul>

```r
<ul>
	<li>Objetivos</li>
	<li>Experiências anteriores</li>
 	<ul>
 		<li>Estágio 1</li>
 		<li>Estágio 2</li>
 	</ul>
	<li>Domínio de ferramentas</li>
	<li>Contato</li>
</ul>
```

---

# Listas aninhadas mistas

É possível aninhar listas ordenadas ou não

<ol>
	<li>Objetivos</li>
	<li>Experiências anteriores</li>
 	<ul>
 		<li>Estágio 1</li>
 		<li>Estágio 2</li>
 	</ul>
	<li>Domínio de ferramentas</li>
	<li>Contato</li>
</ol>

```r
*<ol>
	<li>Objetivos</li>
	<li>Experiências anteriores</li>
* 	<ul>
 		<li>Estágio 1</li>
 		<li>Estágio 2</li>
* 	</ul>
	<li>Domínio de ferramentas</li>
	<li>Contato</li>
*</ol>
```

---

# Links

A criação de links utiliza uma tag específica, a _anchor_. Sua estrutura básica:

```r
 <a href="http://www.google.com"> Google </a>
```

O resultado é:

<a href="http://www.google.com"> Google </a>

OBS: 
+ Esse é um **link absoluto**, ou seja, para um arquivo (ou site) hospedado em outro servidor.
+ Um **link relativo** é aquele que aponta para a estrutura de arquivos do mesmo servidor da página.  
---
# Links

Link absoluto:

```r
 <a href="http://www.google.com"> Google </a>
```

Link relativo:

```r
 <a href="./comcorp.html"> ComCorp </a>
```

---

# Links
Vamos experimentar com o nosso cv:

<ol>
	<li>Objetivos</li>
	<li>Experiências anteriores</li>
 	<ul>
 		<li><a href="https://grupoglobo.globo.com/">Grupo Globo</a></li>
 		<li>Estágio 2</li>
 	</ul>
	<li>Domínio de ferramentas</li>
	<li>Contato</li>
</ol>

---
# Links

Resultado

```r
<ol>
	<li>Objetivos</li>
	<li>Experiências anteriores</li>
 	<ul>
 		<li><a href="https://grupoglobo.globo.com/">Grupo Globo</a></li>
 		<li>Estágio 2</li>
 	</ul>
	
	<li>Domínio de ferramentas</li>
	<li>Contato</li>
</ol>
```

---
# Links

Abrindo em outra janela

```r
<a href="folder/test.html" target="blank">

Este link é absoluto ou relativo? 
 
</a>
```

Este link é absoluto ou relativo? 
 
</a>

---
class: center, middle, inverse

# Crie o seu CV em html!

---
# Crie o seu CV em html!

Use todas as tags das duas aulas.

Roteiro sugerido:
+ Nome
+ Contatos
+ Foto
+ Expectativas profissionais
+ Formação
+ Portifólio 
+ Embede conteúdo (Youtube)