O que é HTML
O HTML (Hyper Text Markup Language), é uma linguagem de marcação usada para estruturar e organizar o conteúdo de páginas.
Requisitos
Para programar HTML, é preciso utilizar algum editor de texto (como Notepad++ ou o próprio Bloco de Notas), também é preciso de um Browser (Navegador).
Não esqueça: sempre salve o arquivo com a extensão .html.
Sintaxe básica do HTML
Temos as tags de abertura <> e tags de fechamento . Além de serem chamadas de tags, podemos chama-las de marcas ou etiquetas. As marcas não são Case Sensitive, ou seja, podemos escrever os comandos sem se importar com letras maiúsculas ou minúsculas (recomendado).
Geralmente são escritas assim...
Exemplo:
comando1="atributo1" /comando
p id="parágrafo" /p
Lembrando que é possível usar mais de um atributo.
!DOCTYPE html, indica que é uma página HTML.
meta charset="UTF-8", permite que a página tenha caracteres especiais.
Um código indentado facilita a visualização.
Como trabalhar com texto no HTML
Há várias formas para implementar textos em páginas HTML.
Forma mais simples hx, x corresponde a um número de 1 a 6, sendo 1 o maior e 6 o menor.
Não esqueça: não é possível usar hx mais de uma vez.
br, usado para quebra de linha. Também é possível escrever br/ ou /br.
p /p, usado para criação de parágrafo.
!--comentário--, permite escrever um comentário.
Tags para formatação de texto:
b /b, usado para escrever em negrito.
i /i, usado para escrever em itálico.
sub /sub, usado para escrever em subscrito.
sup /sup, usado para escrever em sobrescrito.
Lorem Ipsum é um gerador de textos e parágrafo que gera palavras aleatórias.
Como usar cores no HTML
As cores podem ser escritas em inglês ou codificadas em números hexadecimais, mistura de cores RGB (1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f)
Exemplo: "#550000" ou "White".
Atenção: em inglês pode ocorrer problemas em alguns navegadores.
https://img.ibxk.com.br/2016/10/25/25130612440085.jpg?ims=328x
Como criar lista ordenada com HTML
Para criar listas ordenadas usaremos a tag OL e a tag LI que define os itens da lista.
https://1.bp.blogspot.com/-8ph_SYYwZdo/UPN3BbLWv7I/AAAAAAAAAY4/JFv9YhSN5RM/s1600/IMG14.png
Como criar lista não ordenada com HTML
Para criar listas não ordenadas usaremos a tag UL e a tag LI que define os itens da lista. Esse tipo de lista é muito utilizado para implementar menus.
Tipo de listas
Para listas ordenadas temos os tipos:
type="1", os itens da lista serão numerados com números (padrão).
type="A", os itens da lista serão numerados com letras maiúsculas.
type="a", os itens da lista serão numerados com letras minúsculas.
type="I", os itens da lista serão numerados com números romanos em letras maiúsculas.
type="i", os itens da lista serão numerados com números romanos em letras minúsculas.
Para listas não ordenadas temos os estilos:
list-style-type:disc, os itens da lista serão marcados com círculos preenchidos (padrão).
list-style-type:circle, os itens da lista serão marcados com círculos.
list-style-type:square, os itens da lista serão marcados com quadrados.
list-style-type:none, nenhum dos itens da lista serão marcados.
Atenção: o último estilo apresentado pode ser utilizado em menus.
Como inserir imagem com HTML
A imagem é inserida utilizando a tag IMG. Nesta tag podemos definir o tamanho, alinhamento, a borda etc.
img src ="foto.png" height="200" width="250"
width, define a largura da imagem.
height, define a altura da imagem.
Para colocarmos precisamos identificar o nome do destino da imagem, seu diretório.
tag alt, para texto alternativo (caso a imagem não carregue, esse texto aparecerá).
tag title, para título da imagem (identificador do que está sendo apresentado).
Para subir um diretório: img src="../foto.png" e acessar um diretório: img src="../11-teste/foto.png".
Quando acessamos um diretório que está no mesmo nível do arquivo html: img src="imagem/foto.png" .
Como criar link com HTML
Link de site para site
Para criar links utilizaremos a tag A junto com o atributo href ="página_redirecionada.html ", a palavra apresentada ao usuário e o fechamento da tag A.
target="_blank", o atributo target e valor _blank geram uma nova página ao clicar no link.
Link entre páginas de um mesmo site
Criação de mais de um arquivo .html. Você pode usar a tag UL para implementar um menu.
Link para determinado ponto de uma página
Colocamos o #, que indica o ID:
a href="#elemento"
,ou seja, esse link o redirecionará para o local que o ID elemento.
Criando o local com o ID elemento:
span id="elenco" /span
Criando link para uma imagem
Dentro da tag A, escreva a tag IMG, indicando os diretórios.