HTML parte 1

Plantas Carnívoras 🌱🦖,
Tags HTML e Temperando com CSS

Na última aula...

Conversamos sobre a história da Internet e da Web
Vimos as proezas de Tim (Berners-Lee), o coração valente, ao criar:
- O protocolo HTTP
- A linguagem HTML
- Um servidor web (CERN httpd)
- O primeiro navegador (WorldWideWeb)
- ~~A linguagem CSS~~ (não foi o Tim 😱)
- ~~A linguagem JavaScript~~ (não foi o Tim 😱)

Atividade de Hoje

Você tem um novo hobby: criar plantas carnívoras.

Você encontrou um documento solto em um antigo livro do seu tio e, depois de lê-lo, decidiu criar uma página web.

Para isso, hoje vamos...

Rever o funcionamento dos servidores e navegadores
Conhecer a estrutura básica de um arquivo HTML
Aprender algumas tags HTML para texto:
- parágrafos <p>...</p>
- títulos <h1>...</h1>, ou <h2>...</h2> etc. (até <h6>...</h6>)
- imagens <img src="...">
- hiperlinks <a href="">...</a>
Entender um pouco de estilo CSS:
- color, background-color
- margin, text-align

Funcionamento da Web

Como o navegador conversa com o servidor

Modelo de requisição e resposta
1. Navegador requisita uma página
2. Servidor responde
URL: como identificar um recurso

O que um navegador faz?

Quando o usuário "vai" até um novo endereço (URL), o navegador solicita esse recurso ao servidor
- O Navegador requisita algo e Servidor responde

Requisição:

GET /index.html HTTP/1.1
Host: www.twitter.com

Resposta:

HTTP/1.1 200 OK
Date: Mon, 23 May 2005 22:38:34 GMT
Server: Apache/1.3.3.7 (Unix) (Red-Hat/Linux)
Content-Type: text/html; charset=UTF-8
Content-Length: 131 

<!DOCTYPE html>
<html>
<head>
  <title>Twitter</title>
</head>
<body>
  Olá mundo, este é um tweet.
</body>
</html>

O que é um URL?

URL: Unique Resource Locator
- É o endereço de coisas: páginas, imagens, arquivos, etc.
  
  domínio ~ Em que computador estão os arquivos
  
  porta ~ Qual endereço do programa dentro do computador
  
  caminho ~ Qual o endereço até o arquivo
Assim que recebe a resposta, o navegador mostra na tela, se der

[URL]: Unique Resource Locator

Estrutura Básica do HTML

.

Um arquivo HTML completo
- Tag <html>...</html>
- Tag <head>...</head>
- Tag <body>...</body>

Estrutura de um arquivo HTML

Um punhado de tags no texto
- As tags fazem a marcação da estrutura do texto
- Existem dezenas de tags (umas 80? 100?) e cada uma tem um propósito e um resultado visual
- A grande maioria delas precisam ser fechadas
  - Por exemplo: parágrafo (<p>...</p>), título (<h1>...</h1>)
  - Contraexemplo: imagem (<img>)
Indentação e espaçamento são livres e não afetam o resultado
Um arquivo html é plain-text, ou puramente textual
- em contraposição a um arquivo binário, por exemplo

A tag <html>

Envolve todas as outras tags
- Exceto a tag especial <!DOCTYPE html>
Dentro dela, devem sempre existir as seguintes tags, nesta ordem:
- <head>...</head>
- <body>...</body>

<!DOCTYPE html>          
<html>  ⬅️         
  <head>
    ...
  </head>
  <body>
    ...
  </body>
</html> ⬅️

A tag <head>

Do inglês: cabeça
Contém meta-informação sobre este arquivo HTML, por exemplo:
- Codificação (encoding) da página
- Título da página na aba/janela do navegador
- Iconezinho (favicon)
- Inclusão de outros arquivos (.css, .js)

<!DOCTYPE html>
<html>
  <head>   ⬅️
    <meta charset="utf-8">  <!-- codific. -->
    <title>Título na aba/janela</title>
    <link rel="icon" href="icone.png">
    ...
  </head>  ⬅️
  <body>
    ...
  </body>
</html>

A tag <body>

Do inglês: corpo
Contém todo o conteúdo da página: tags de
- parágrafos (<p>...</p>)
- títulos e subtítulos (<h1>...</h1>)
- imagens (<img>), etc.
É tudo visível logo abaixo da barra de endereços até o "chão"

<!DOCTYPE html>
<html>
  <head>...</head>
  <body>   ⬅️
    ...
    <h1>Título Grandão</h1>
    ...
    <p>Um textinho qualquer</p>
    <img src="estrela.png">
    ...
  </body>  ⬅️
<html>

Algumas tags HTML

.

Anatomia de uma tag
Parágrafo
Títulos e subtítulos
Imagens
Hiperlinks

Anatomia de uma tag

::: figure .figure-slides.tag-anatomy.clean.flex-align-center.invert-colors-dark-mode

:::

Tags de abertura podem ter atributos:
```
<img src="bob-esponja.png">
```
- Em <img>, o atributo src="..." aponta para a URL do arquivo
- Não deve haver espaço entre seu nome e seu valor:
  - <img src = "..."> 👎
  - <img src="..."> 👍

Tag de Parágrafo (`<p>...</p>`)

Quebras de linha são feitas automaticamente
```
<p>
  "Um dos maiores problemas encontrados em viajar no tempo não é vir a se tornar
  acidentalmente seu próprio pai ou mãe. Não há nenhum problema em tornar-se
  seu próprio pai ou mãe com que uma família de mente aberta e bem ajustada não
  possa lidar."
</p>
```
::: result . width: 80%; margin: 1em auto; "Um dos maiores problemas encontrados em viajar no tempo não é vir a se tornar acidentalmente seu próprio pai ou mãe. Não há nenhum problema em tornar-se seu próprio pai ou mãe com que uma família de mente aberta e bem ajustada não possa lidar." :::

Tag de Títulos e Subtítulos (`h1`, `h2` ... `h6`)

<h1>Título de 1º nível</h1>
<p>Este é o corpo da seção</p>
<h2>Subtítulo (2º nível)</h2>
<p>Este é o corpo da subseção</p>

Há a possibilidade de ter 6 níveis de títulos
- Mas a quantidade de títulos é infinita... por exemplo ➡️

Tag de Imagem: `<img>`

Para exibir imagens...

<img src="http://fegemo.github.io/kraken-typing/imgs/kraken.png">

Neste exemplo, usamos a URL de uma imagem hospedada em outro site na Internet
O atributo src="..." (abreviação de source) é usado para definir o endereço (URL) da imagem
Uma URL pode ser externa ou interna
- Veja a diferença no próximo slide

URL externa vs interna

URL externa ~ Aponta para algo (imagem etc.) de um outro site ~ Quase sempre começa com http:// ou https://. Exemplos: - http://google.com - http://fegemo.github.io/imgs/kraken.png - https://twitter.com/fegemo

URL interna ~ Aponta para algo da própria página/site ~ Pode ser um caminho relativo ou absoluto. - racas-raras.html relativo - imagens/ovelha.jpg relativo - ../imgs/logo.png relativo - /arquivos/fotosdafesta.zip absoluto

Exemplo 1: Arquivo HTML e imagem na mesma pasta

Arquivo HTML está em:
/ovelhas/racas/raras.html
A imagem está em:
/ovelhas/racas/pira-tovelha.jpg
- Podemos utilizar seu endereço absoluto: /ovelhas/racas/pira-tovelha.jpg
```
<img src="/ovelhas/racas/pira-tovelha.jpg">
```
- Ou seu endereço relativo: pira-tovelha.jpg (relativo à página atual)
```
<img src="pira-tovelha.jpg">
```
  - Apenas o nome da imagem, porque ela está na mesma pasta que o arquivo HTML

Exemplo 2: Imagem 1 pasta adentro

Endereço absoluto: /ovelhas/racas/img/pira-tovelha.jpg
```
<img src="/ovelhas/racas/img/pira-tovelha.jpg">
```
Endereço relativo: img/pira-tovelha.jpg
```
<img src="img/pira-tovelha.jpg">
```

Exemplo 3: Imagem 1 pasta acima

Endereço absoluto: /ovelhas/pira-tovelha.jpg
```
<img src="/ovelhas/pira-tovelha.jpg">
```
Endereço relativo: ../pira-tovelha.jpg
```
<img src="../pira-tovelha.jpg">
```

Exemplo 4: Imagem 2 pastas acima

Endereço absoluto: /pira-tovelha.jpg
```
<img src="/pira-tovelha.jpg">
```
Endereço relativo: ../../pira-tovelha.jpg
```
<img src="../../pira-tovelha.jpg">
```

Sumarizando: URLs absolutas e relativas

Endereço absoluto	Endereço relativo
/ovelhas/racas/c.jpg	c.jpg
/ovelhas/racas/xpto/d.jpg	xpto/d.jpg
/ovelhas/b.jpg	../b.jpg
/a.jpg	../../a.jpg

Prefira usar endereços relativos ::: did-you-know Ao abrir páginas HTML sem um servidor Web ("dando 2 cliques"), um endereço absoluto começa na raiz do sistema de arquivos (e.g., "C:") e não devemos especificar endereços dessa forma :::

Tag de Hyperlink (`<a href="">...</a>`)

Link externo (para fora da página):
```
<a href="http://www.google.com">Texto do link externo</a>
```
::: result

Texto do link externo

:::
Link interno (para algo hospedado no próprio computador)
```
<a href="downloads/exemplo.zip">Texto do link interno</a>
```
::: result

Texto do link interno

:::

Como o navegador vai desenhar as tags HTML?

Ele usa estilos padrão:

Cor do texto ~ preta

Cor de fundo ~ branca

Fonte ~ Times New Roman para títulos (no Windows) ~ Arial para parágrafos
Cada navegador pode ter um estilo padrão diferente
É possível e altamente recomendável criar estilos próprios
Vamos conhecer agora uma segunda linguagem: CSS

Um pouco de estilo

Conhecendo CSS - Cascading Stylesheets

A tag <style>...</style>
Definindo as propriedades de:
- Cor do texto: color
- Cor do fundo: background-color
- Margem (espaçamento): margin
- Fonte: font-family

Definindo o estilo (aparência)

Adicionamos um novo elemento: <style>...</style>

Podemos colocá-lo no <head> (boa prática) ou no <body> (não faça)

<!DOCTYPE html>
<html>
  <head>
    <title>Título da página</title>
    <!-- início do CSS -->
    <style>
      body {
        background-color: teal; /* um tom de azul */
      }
    </style>
    <!-- fim do CSS -->
  </head>
  <body>
  ...

Definindo o estilo (cont.)

Estilizando a página dos drinks:

body {
  background-color: teal;
  color: white;
  margin-left: 20%;
  margin-right: 20%;
  font-family: "Arial", sans-serif;
}

h1 {
  color: yellow;
  font-family: "Courier New", monospace;
  text-align: center;
}

p {
  text-align: justify;
}

h2 {
  color: pink;
}

Entendendo o estilo: cores

```
body {
  background-color: teal;    
}
```
Define a cor (color) do fundo (background) para azul ocre (teal)
- Mas também poderia ser: orange, red, green, black etc.
```
body {
  color: white;
}
```
Define a cor do texto como branco

Entendendo o estilo: margens laterais

```
body {
  margin-left: 20%;
  margin-right: 20%;
}
```
Define as margens (espaço) laterais da página
- Também existem: margin-top (cima) e margin-bottom (baixo)

Entendendo o estilo: fonte

```
body {
  font-family: "Arial", sans-serif;
}
```
Define a fonte do texto da página
- Dá 2 opções: se não tiver a 1ª, vai a 2ª
```
h1 {
  font-family: "Courier New", monospace;
}
```
Define a fonte sendo usada para o texto de todos <h1> na página

Entendendo o estilo: alinhamento do texto

```
p {
  text-align: justify;
}
```

p {
  text-align: left; /* valor padrão */
}

```
p {
  text-align: right;
}
```
```
p {
  text-align: center;
}
```

Referências

Capítulo 1 do livro

Files

README.md

Latest commit

History