Aula 15 - Introdução ao HTML

class: center, middle, title-slide

# Aula 15 - Introdução ao HTML
### Leonardo Mancini
### Maio de 2022

---

# O que é?

O HyperText Markup Language (HTML) é a linguagem que está por trás de
praticamente todos os sites da internet.

- Não é exatamente uma linguagem de programação, mas permite a formatação de textos.

- Sites são, na sua forma mais básica, arquivos de textos com links para outros arquivos de textos, hospedados em um servidor.

- O elemento básico do html são as <strong> _tags_ </strong>

https://tech-espm.github.io/labs-editor/html/

---
class: inverse, middle, center

# Exemplo?

---

# Tags (ou, etiquetas)

Tags definem a característica de determinado conteúdo. Um elemento HTML é composto de uma _tag_ de abertura, o conteúdo, e uma _tag_ de fechamento.

<br>
.center[
<img src="./imagens/html_tags.png" width="450px" />
]

---

# Body

Um dos elementos mais importantes de uma página é o corpo, ou <strong> _body_ </strong>. Somente o conteúdo do _body_ é mostrado na tela do computador.

Para definir o corpo de uma página, a estrutura é a mesma:

```r
<body>

</body>
```

Depois que a página tem um corpo, podemos escrever o conteúdo dela

```r
<body>

<p> Olá, turma!</p>

</body>
```

---
# Estrutura HTML

Uma página em html é estruturada em forma de árvore. Significa dizer que um elemento é _aninhado_ dentro de outro.

```r
<body>
    <p> Este parágrafo é filho do corpo </p>
</body>
```

A estrutura do html é hierárquica. Cada nível herda as características e o estilo dos "pais"

```r
<body>
    <div>
       <h1> "Irmão" de p, mas neto de body </h1>
       <p> "Irmão" de h1, mas neto de body </p>
    </div>
</body>
```

---
# Primeira página

<br>

```r
<body>
  
  <h1> Olá, mundo! </h1>
 
  <p> Esta é minha primeira página html. Aêêê! </p>
  
</body>
```

---
# Cabeçalhos

Os elementos de cabeçalho funcionam como em qualquer mídia: os maiores chamam mais atenção e devem ser distribuídos de forma ordenada e hierarquizada.

Existem 6 cabeçalhos, de h1 a h6

```r
<body>
  <h1> Olá, mundo! </h1>
   <h2> Olá, mundo! </h2>
    <h3> Olá, mundo! </h3>
     <h4> Olá, mundo! </h4>
      <h5> Olá, mundo! </h5>
       <h6> Olá, mundo! </h6>
</body>
```

---
# Exercício

1. Comece uma página nova com a seguinte estrutura:

```r
<body>
  <h1> Educação no Brasil </h1>
	  <h2> História </h2>
	  <h2> Organização e estrutura </h2>
  		<h3> Sistema Educacional </h3>
  		<h3> Regiões </h3>
</body>
```

1. Abaixo de "Organização e estrutura", inclua um <strong> h3 </strong> com o título "Evolução"

1. Abaixo de "Sistema Educacional", inclua um <strong> h2</strong> que diga "Política e investimento"

1. Na linha seguinte, um <strong>h3</strong> com o texto "Cobertura e qualidade"

Salve e abra no navegador

---
# Exercício

```r
<body>
  <h1> Educação no Brasil </h1>
	  <h2> História </h2>
	  <h2> Organização e estrutura </h2>
  		<h3> Evolução </h3>
  		<h3> Sistema Educacional </h3>
      <h2> Políticas e investimento </h2>
          <h3> Cobertura e qualidade </h3>
          <h3> Regiões </h3>
</body>
```
---
# Textos

A principal _tag_ de texto é o parágrafo, representado por:

```r
<p> Este é um parágrafo </p>

<p> Sempre que precisar criar um parágrafo, é necessário 
colocar o conteúdo entre essas tags </p>
```

Esse código cria blocos de texto separados.

---

# Textos

É possivel estilizar o interior do texto com <strong> negrito </strong> ou <em> ênfase </em>, que resulta quase sempre em itálico

```r
<p> Este é um <strong> parágrafo </strong> </p>

<p> Sempre que precisar criar um parágrafo, é necessário 
colocar o conteúdo entre essas <em>tags</em> </p>
```

Outra _tag_ importante é o **br**:

```r
<p> Este é um <strong> parágrafo </strong> </p>

*<p> Sempre que precisar criar um parágrafo, <br> é necessário 
colocar o conteúdo entre essas<em> tags</em> </p>
```

---
# Exercício

Onde paramos

```r
<body>
  <h1> Educação no Brasil </h1>
	  <h2> História </h2>
	  <h2> Organização e estrutura </h2>
  		<h3> Evolução </h3>
  		<h3> Sistema Educacional </h3>
	  <h2> Políticas e investimento </h2>
  		<h3> Regiões </h3>
  		<h3> Cobertura e qualidade </h3>
</body>
```

---
# Exercício

1. Crie um parágrafo abaixo de "Educação no Brasil", com o seguinte texto

```r
A educação no Brasil, segundo o que determina a Constituição 
Federal e a Lei de Diretrizes e Bases da Educação Nacional 
(LDB), é responsabilidade do Governo Federal, dos estados, do
Distrito Federal e dos municípios, que devem gerir e organizar 
seus respectivos sistemas de ensino. Cada um desses sistemas
educacionais públicos é responsável por sua própria manutenção,
que gere fundos, bem como dispõe de mecanismos e fontes de 
recursos financeiros. A nova constituição reserva 25% 
do orçamento do Estado e 18% de impostos federais e taxas 
municipais para a educação.
```

1. Deixe as expressões **Constituição Federal**,  **sistemas educacionais públicos** e **nova constituição** em negrito

1. Dê ênfase em _Lei de Diretrizes e Bases da Educação Nacional_

---

#Exercício

<br>

```r
<p> A educação no Brasil, segundo o que determina a 
<strong>Constituição Federal</strong> e a 
<em>Lei de Diretrizes e Bases da Educação Nacional</em>
(LDB), é responsabilidade do Governo Federal, dos estados, 
do Distrito Federal e dos municípios, que devem gerir e 
organizar seus respectivos sistemas de ensino. Cada um desses
<strong>sistemas educacionais públicos</strong> é responsável 
por sua própria manutenção, que gere fundos, bem como dispõe 
de mecanismos e fontes de recursos financeiros. A <strong> 
  nova constituição</strong> reserva 25% do orçamento do 
Estado e 18% de impostos federais e taxas municipais para 
a educação.</p>
```

---
# Imagens

Para incluirmos imagens no nosso documento, temos que utilizar a tag
**img**, seguida do atributo **src**, que indica a localização do arquivo:

```r
<img src="./imagens/picture.png"> 
```

Essa é uma das únicas que não precisa de uma _tag_ de fechamento.

Pode-se controlar largua e altura com os atributos **width** e **height**

```r
<img src="./imagens/picture.png" width="400" height="400"> 
  
<img src="./imagens/picture.png" width="100%" height="100%"> 
```

---

#Exercícios

1. Baixe o arquivo de código neste [link](./fontes/educacao1.html)

1. Inclua, abaixo do terceiro parágrafo de História, a seguinte [imagem]( https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Faculdade_de_Direito_da_Universidade_Federal_de_Pernambuco_2.jpg/1024px-Faculdade_de_Direito_da_Universidade_Federal_de_Pernambuco_2.jpg)

```r
<img src="https://upload.wikimedia.org/wikipedia/commons
/thumb/4/44/Faculdade_de_Direito_da_Universidade_Federal_de_
Pernambuco_2.jpg/1024px-Faculdade_de_Direito_da_Universidade_
Federal_de_Pernambuco_2.jpg"> 
```

+ O que vc achou do tamanho? Ajuste para 30% em largura.
--

+ O que acontece se você adicionar o atributo alt="Faculdade de Direito de Recife"

???

The alt attribute presents an alternative text to the user when the image cannot be loaded, or if the device accessing the page cannot show images: for example, screen readers – kind of browser used by people with blindness or visual impairments – or search robots like the Google bot, which indexes the Internet by visiting web pages. Such kind of software only sees the page's code so this is the reason to have clear and semantic HTML code: it will help users and search engines to better understand the page's content.

---
# Imagens

Com a tag **img**, é possível incluir animações em gif.

<br>
.center[
<img src="./imagens/panico.gif">
]

Criem um html novo com o seguinte código:

```r
<img src="http://tic.mancini.jor.br/aulas/imagens/panico.gif"> 
```

---

# Outras tags de midia

- **video** permite inserir vídeos em uma página web

- **audio** permite inserir arquivos de áudio

- **embed** permite _embedar_ / incorporar diversos arquivos, mais comumente arquivos Flash (.swf)

```r
<video src="movie.mp4" type="video/mp4" width="320" 
height="240" controls>
</video>
```

- O sites de hospedagem de mídia (YouTube, SoundCloud, etc.) costumam facilitar a vida...

---

background-image: url(./imagens/sheldon_panic.gif)
background-size: cover
background-position: center center

class: bottom, inverse

# Em caso de pânico

---
class: center, middle, inverse

# [W3Schools](https://www.w3schools.com/)