Loading [MathJax]/jax/output/HTML-CSS/fonts/TeX/fontdata.js

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.

https://image.slidesharecdn.com/aula5-141124154058-conversion-gate02/75/aula5-listas-html-5-4-2048.jpg?cb=1671639939

 

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.

 

 

 

 

 

 

 

 

 

 

O que é HTML até Como usar cores no HTML

GABRIELA COSTA
Module by GABRIELA COSTA, updated more than 1 year ago

Description

Anotações referentes as aulas: O que é HTML; Requisitos; Sintaxe básica do HTML; Como trabalhar com texto no HTML; Como usar cores no HTML.
No tags specified