GoConqr has a new look! Let us know what you think.

Module 2 of 4 · Text

Como criar lista ordenada com HTML até Como criar link com HTML

GABRIELA COSTA

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.

 

 

 

 

 

 

 

 

 

 

Instructions

You must submit an attempt for this quiz to progress. You can submit it after the last question.

Go to the chosen module

Feedback

What is it about?

What do you think of the new look?

How do you like it?