Capítulo 2

Tag <p> </p>: Define um parágrafo

Tag <br/>: Estabelece uma quebra de linha

Tag <pre></pre>: Define um texto pre-formatado

<p>isto é um parágrafo</p>
<p>essa linha <br> foi qubrada</p>
<pre>aqui está um texto pre-formatado:
INGREDIENTE    QUANTIDADE
açucar         300g
leite          500ml
</pre>

cabeçalhos podem ser usados para descrever tópicos.

• <h1> define o tópico mais importante do documento
• <h6> define o tópico menos importante do documento

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Os mecanismos de busca levam os cabeçalhos muito a sério. Para não prejudicar o ranqueamento, é boa prática ter somente uma tag <h1> em cada página web. É por meio desta tag que será definido as principais palavras-chave do documento.

Link para outro site

<a href="www.exemplo.com.br"></a>

<a href="www.exemplo.com.br" target="_blank"></a>

Link para outra área da mesma página

<a href="#area1">Clique aqui para ir para área 1</a>

<h2 id="area1">Área 1</h2>
<p>Este é o conteúdo da área 1</p>

<h2 id="area2">Área 2</h2>
<p>Aqui vai o conteúdo da área 2</p>

Tag: <IMG>

<img src="imagem.jpg" alt="texto" title="texto">

imagens responsivas usando a tag <picture>

<picture>
  <source media="(min-width: 600px)" srcset="imagem_grande.jpg">
  <source media="(min-width: 450px)" srcset="imagem_pequena.jpg">
  <img src="padrao.jpg" style="width:auto;">
</picture>

Tag: <figure>

<figure>
	<img src="egito.jpg" alt="Pirâmides do Egito">
	<figcaption>Necrópole de Gizé, onde estão localizadas as pirâmides de Quéops, Quéfren e Miquerinos</figcaption>
</figure>

Tipos de Imagem

JPEG

Suporta mais de 16 milhoes de cores(2 ²⁴)

Sua taxa de compressão é ajustável: é possível ajustar tamanho e qualidade da imagem.

Sua taxa de compressão é ajustável: é possível ajustar tamanho e qualidade da imagem.

Não suporta transparência

GIF

Para imagens muito pequenas e imagens com muito texto, o formato GIF geralmente é uma alternativa melhor

Suporta transparência, mas não suporta opacidade

Suporta apenas 256 cores

É possível criar imagens animadas

PNG

Utiliza um sistema de compressão que não permite perdas como acontece com os formados GIF e JPG

Suporta transparência e opacidade

É mais pesado que o GIF ou JPG

Qual formato utilizar?

Atributo acesskey

Define um atalho de teclado para ativar ou dar o foco para um elemento

<a href="https://www.w3schools.com/html" accesskey="h">HTML tutorial</a><br>
<a href="https://www.w3schools.com/css" accesskey="c">CSS tutorial</a>

Atributo hidden

Utilizado para esconder um atributo. Ele continuará presente no documento. Poderá ser manipulado. Mas não será visível na tela.

<p hidden="true">Este parágrafo ficará escondido</p>

Atributo title

texto que aparecerá como tooltip ao passar o mouse sobre o elemento

<p>clique 
  <a title="Especificação da linguagem HTML" href="https://html.spec.whatwg.org/multipage/">aqui</a>
  para acessar
</p>

Tag: <audio>

Permite inserir audio no documento

<audio>
	<source src="musica.ogg" type="audio/ogg">
	<source src="musica.mp3" type="audio/mpeg">
	Seu navegadosr não suporta a tab audio.
</audio>

Atributos:

Tag: <video>

Permite inserir vídeo no documento

<video width="350" height="240">
	<source src="video.mp4" type="video/mp4">
	<source src="video.ogg" type="video/ogg">
	Seu navegador não suporta HTML5.
</video>

Atributos: