• Olá Visitante, se gosta do forum e pretende contribuir com um donativo para auxiliar nos encargos financeiros inerentes ao alojamento desta plataforma, pode encontrar mais informações sobre os várias formas disponíveis para o fazer no seguinte tópico: leia mais... O seu contributo é importante! Obrigado.

HTML Básico - Criando Listas Ordenadas e Listas de Definição

helldanger1

GForum VIP
Entrou
Ago 1, 2007
Mensagens
29,631
Gostos Recebidos
1
Objetivo:

O objetivo deste tutoria a criar lista ordenas e lista de definição sempre de uma forma bem objetiva , tudo mostrado através das telas.



Pré-requisito:

Para você poder acompanhar o desenvolvimento deste tutorial, será necessário ter conhecimento no mínimo do
de informática básica e Parte 1, Parte 2, Parte 3 , Parte 4 e Parte 5 do tutorial html básico.



Nota:

Irei ensinar a linguagem de html de uma forma bem objetiva, ou seja, iremos aprender na prática através da criação páginas.



Vamos aprender a criar listas ordenadas, então crie uma página em branco com o nome de “lista.hml”:



<html>

<head><title>Listas</title>

<body>

<center><h1>Listas</h></center>

</body>

</html>
htmlbasico006_clip_image002.jpg


Tela 001



Sua criação é simples e para cria-las utilizamos as etiquetas <ol></ol> sendo que cada um dos elementos fica citado por outra etiqueta <li></li> sendo assim as memas ficaram:



<ol>

<li> Internet</li>

<li> Computador</li>

<li> Site</li>

</ol>

htmlbasico006_clip_image004.jpg
 

helldanger1

GForum VIP
Entrou
Ago 1, 2007
Mensagens
29,631
Gostos Recebidos
1
Tela 002

htmlbasico006_clip_image006.jpg


Tela 003



Também podemos definir o tipo de estilo utilizado pela lista como números ou até mesmo utilizar letras (A, B, C) para isso utilizamos mais um atributo que é o “type” que deve ser incluido dentro da etiqueta <ol> sendo que o mesmo ficaria assim:



<ol type=”a”>



Iremos ver os cada um desses tipos lista ,copie e cole no bloco de notas a lista abaixo, salve e depois atualize a página:



<ul type="a">

<li> Internet</li>

<li> Computador</li>

<li> Site</li>

</ul>

htmlbasico006_clip_image008.jpg


Tela 004(Por letra)

htmlbasico006_clip_image010.jpg


Tela 005



Agora iremos aprender a criar lista d definição o processo é semelhante ao que acabamos de aprender, portanto, para criar a a lista utilizamos as etiquetas <dl></dl> sem do utilizarenmos duas etiquetas para definição <dt></dt> e <dd></dd>, então ficaria assim:



<dl>

<dt>Html</dt>

<dd> Html Basico</dd>

<dt> Aprender</dt>

</dl>



Ou poderiamos definir da seguinte maneira:



<dl>

<dd>Aprender

<dl>

<dd>Html

<dl>

<dd> Sempre

</dl>

</dl>

</dl>
 

helldanger1

GForum VIP
Entrou
Ago 1, 2007
Mensagens
29,631
Gostos Recebidos
1
Veja como fica na página com o primeiro e segundo código, para isso,copie e cole no bloco de notas, salve para visulizar no brauser.

htmlbasico006_clip_image012.jpg


Tela 006

htmlbasico006_clip_image014.jpg


Tela 007



Segundo código:
htmlbasico006_clip_image016.jpg


Tela 008

htmlbasico006_clip_image018.jpg


Tela 009
 
Topo