Capítulo 2

HTML Básico

Criado por: Malcon Toledo

Parágrafos e Quebra de linha

Tags:

p br pre

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

Tag <br/>: Estabelece uma quebra de linha

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



isto é um parágrafo


essa linha 
 foi qubrada


aqui está um texto pre-formatado:
INGREDIENTE    QUANTIDADE
açucar         300g
leite          500ml

Cabeçalhos

Tags:

h1 h2 h3 h4 h5 h6

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


Heading 1


Heading 2


Heading 3


Heading 4


Heading 5


Heading 6

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.

Formatação de Strings

Tags:

strong i u mark
Tag <strong> </strong> Coloca negrito
Tag <i></i> Coloca itálico
Tag <u></u> Sublinha o texto
Tag <mark></mark> Destaca o texto 



texto em negrito 

texto em itálico

texto sublinhado

texto destacado.

Link para outro site
[ cria um link para outro site na mesma janela ]
[ cria um link para outro site em outra janela ]

Link para outra área da mesma página


Clique aqui para ir para área 1


Área 1


Este é o conteúdo da área 1



Área 2


Aqui vai o conteúdo da área 2

Imagens

Tags:

img picture figure

Tag: <IMG>


texto
src endereço da imagem a ser carregada na página
alt texto alternativo, exibido quando a imagem não pode ser carregada
title texto que aparecerá como tooltip ao passar o mouse sobre a imagem

imagens responsivas usando a tag <picture>
Exiba a imagem padrao.jpg, a não ser que:
se a tela for maior que 450px, então exiba imagem_.pequena.jpg
se a tela for maior que 600px, então exiba imagem_grande.jpg
O assunto sobre sites responsivos será melhor abordado em capítulo posterior do livro

Tag: <figure>




	Pirâmides do Egito
	
Necrópole de Gizé, onde estão localizadas as pirâmides de Quéops, Quéfren e Miquerinos

Tipos de Imagem

JPEG

Suporta mais de 16 milhoes de cores(2 24)

Os 16 milhões de cores possíveis em uma imagem JPEG são produzidos usando 8 bits para cada cor (vermelho, verde e azul) no espaço de cores RGB

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

PNG-8: substitui o GIF. Também trabalha com 256 cores e 1-bit de transparência.
PNG-24: Possui 24-bits de cores, similar ao JPEG.

Qual formato utilizar?

Atributos Globais

Atributos:

acesskey hidden title

Atributo acesskey

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


HTML tutorial

CSS tutorial
[ alt + h - acessa o link HTML tutorial ]
[ alt + c - acessa o link CSS tutorial ]

Atributo hidden

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

Atributo title

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



clique 
  aqui
  para acessar
clique aqui para saber mais sobre esse tema

Audio e Vídeo

Tags:

audio video

Tag: <audio>

Permite inserir audio no documento

Atributos:

autoplay autoplay=true; inicia automaticamente o audio
controls controls = true; o navegador oferecerá controles para permitir ao usuário controlar a reprodução do áudio, incluindo volume, navegação, e pausa/continuação da reprodução
loop loop=true; ao chegar no fim do áudio, ele voltará automaticamente para o começo.

Tag: <video>

Permite inserir vídeo no documento

Atributos:

autoplay autoplay=true; inicia automaticamente o audio
controls controls = true; o navegador oferecerá controles para permitir ao usuário controlar a reprodução do áudio, incluindo volume, navegação, e pausa/continuação da reprodução
loop loop=true; ao chegar no fim do áudio, ele voltará automaticamente para o começo.