buenodc

Search buenodc

bg cover

HTML - Estrutura e imagens

Prof. Me. Danilo Bueno

Padrões de código

  • Todo documento precisa de uma estrutura mínima
<!-- ⚡HTML INCOMPLETO⚡ -->
<h1>Olá mundo HTML</h1>  
<p>Meu primeiro parágrafo</p>
<hr>
<p>Meu <strong>segundo</strong> parágrafo</p>

Assim como os engenheiros seguem restritas diretrizes de design, ou restaurantes têm regulamentos de saúde e segurança, assim também os desenvolvedores web têm um conjunto de regras que definem um trabalho bem feito.

O esqueleto básico

Todo documento precisa ter essa estrutura mínima

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">
  <title>Meu título</title>
</head>
<body>
  <!--Aqui vai o código visto até então -->
</body>
</html>

DOCTYPE

  • Não é uma tag do HTML, mas uma instrução para que o browser tenha informações sobre qual versão de código a marcação foi escrita.
<!DOCTYPE html>

DOCTYPE antigo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

A tag HTML

<!DOCTYPE html>
<html lang="pt-BR">
  
</html>
  • Este elemento envolve todo o conteúdo da página;
  • É o pai de <head> e <body>, contendo tudo no documento;
  • É o elemento no qual o idioma do conteúdo é declarado.

A tag HEAD

<!DOCTYPE html>
<html lang="pt-BR">
  <head>

  </head>  
</html>
  • Contém metadados sobre o documento, como título, conjunto de caracteres, configurações de viewport, links de folha de estilo, scripts, etc;

A tag HEAD: title

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <title>Título de seu documento</title>
  </head>  
</html>
  • É o título que aparece na guia do navegador.
  • É usado para descrever a página quando é favoritada.
  • É usado para SEO

bg contain

A tag meta: charset

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <title>Título de seu documento</title>
    <meta charset="utf-8">
  </head>  
</html>
  • computadores só entendem números
  • garante a renderização correta dos caracteres em todo o documento (inclusive emojis)

A tag meta: charset

  • É a regra que mapeia cada caractere para um número.
  • O UTF-8 é o padrão recomendado e dominante na Web:
    • Letras acentuadas (á, ç, õ), símbolos de moedas (€, £, $)
    • Caracteres de outros alfabetos (grego, cirílico, árabe, etc.)
    • Caracteres asiáticos (你好, こんにちは)
    • Emojis (🚀, 👍, ❤️)

Se eu não usar? Por exemplo, a palavra “página” poderia ser exibida como “página”.

bg contain

A tag meta: viewport

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <title>Título de seu documento</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
  </head>  
</html>
  • Ajuda na adaptação do site a diferentes tamanhos de tela
  • Não permite que o conteúdo do site seja redimensionado para um tamanho menor (default)

O esqueleto básico

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">
  <title>Meu título</title>
</head>
<body>
  <!--Aqui vai o código visto até então -->
</body>
</html>

Todo documento precisa ter essa estrutura mínima

bg right

Imagens

No início a Web era somente texto, e era tedioso.

Imagens na Web

  • Usar a tag vazia <img> com os atribustos src e alt
  • src: Caminho da imagem, que pode ser relativo ou absoluto
  • alt: Texto alternativo para a imagem (acessibilidade e SEO)
<img src="caminho-da-imagem.extensao" alt="Descrição da imagem">

Atributo src

Se sua imagem chamar-se foto.jpg e estiver na mesma pasta do seu arquivo index.html, você pode incorporar ela assim:

<img src="foto.jpg" alt="Descrição da imagem">
📁 meu-projeto/
├── 📄 index.html # <-- Arquivo HTML   
└── 🏞️ foto.jpg   # <-- Foto

Atributo src

Se a imagem estivesse em um subdiretório images, que esta dentro do mesmo diretório que a página index.html, você a incorporaria assim:

<img src="images/foto.jpg" alt="Descrição da imagem">
📁 meu-projeto/
├── 📄 index.html # <-- Arquivo HTML
└── 📁 images/
    └── 🏞️ foto.jpg   # <-- Foto

Atributo alt

  • Seu valor é um texto descritivo da imagem que será exibido se a imagem não puder ser carregada.
  • O usuário possui deficiência visual e está usando um leitor de tela.
  • Os mecanismos de busca também levam em consideração o texto alternativo, então use palavras-chave relevantes.

Licenciamento de Imagens

  • As imagens (e outros tipos de mídia) possuem licença de uso.
  • Categorias comuns de licenciamento:
    • Todos os direitos reservados (all rights reserved)
    • Permissivas (Creative Commons, MIT, etc.)
    • Domínio Público (public domain)

Antes de usar uma imagem em um site, certifique-se de que, tenha permissão para usá-la ou cumprir as condições de licenciamento do proprietário

Banco de imagens

Legenda da Imagem

  • É um texto que descreve ou complementa a imagem.
  • Para tal, você deve usar as tags <figcaption> e <figure>
  • São os elementos semânticos para agrupar imagens e suas legendas.
<figure>
    <img src="foto.jpg" alt="Descrição da imagem">
    <figcaption>Legenda da imagem</figcaption>
</figure>

Elemento figure

  • O elemento <figure> pode ser usado para além de imagens, como um trecho de código, áudio, vídeo, equações etc.

Obrigado!

[email protected] · website/docs · github