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.

Next up

Previous