cefet_front_end

HTML parte 1

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 :scream:)
- ~~A linguagem JavaScript~~ (não foi o Tim :scream:)

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

Estrutura Básica do HTML

Estrutura

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

CÓDIGO	RESULTADO

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

tags HTML

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

Anatomia de uma tag

Anatomia de uma tag mostrando que ela consiste de seu nome envolto por sinais de "menor que" e "maior que"

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 = "..."> :thumbsdown:
  - <img src="..."> :thumbsup:

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>
```
“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 :arrow_right:

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

Página exibindo a descrição e imagem da Pira-tovelha Estrutura de pastas para demonstrar o endereço absoluto e relativo

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

Página exibindo a descrição e imagem da Pira-tovelha Estrutura de pastas para demonstrar o endereço absoluto e relativo

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

Página exibindo a descrição e imagem da Pira-tovelha Estrutura de pastas para demonstrar o endereço absoluto e relativo

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

Estrutura de pastas para demonstrar o endereço absoluto e relativo

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

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>

Texto do link externo

Link interno (para algo hospedado no próprio computador)
```
<a href="downloads/exemplo.zip">Texto do link interno</a>
```
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

cefet_front_end

HTML parte 1

Na última aula…

Hoje vamos…

Funcionamento da Web

Como o navegador conversa com o servidor

O que um navegador faz?

O que é um URL?

Estrutura Básica do HTML

Estrutura

CÓDIGO

RESULTADO

Estrutura de um arquivo HTML

A tag <html>

A tag <head>

A tag <body>

Algumas tags HTML

tags HTML

Anatomia de uma tag

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

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

Tag de Imagem: <img>

URL externa vs interna

Exemplo 1: Arquivo HTML e imagem na mesma pasta

Exemplo 2: Imagem 1 pasta adentro

Exemplo 3: Imagem 1 pasta acima

Exemplo 4: Imagem 2 pastas acima

Sumarizando: URLs absolutas e relativas

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

Como o navegador vai desenhar as tags HTML?

Um pouco de estilo

Conhecendo CSS - Cascading Stylesheets

Definindo o estilo (aparência)

Definindo o estilo (cont.)

Entendendo o estilo: cores

Entendendo o estilo: margens laterais

Entendendo o estilo: fonte

Entendendo o estilo: alinhamento do texto

Referências

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

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

Tag de Imagem: `<img>`

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