|
Curso de Webdesign
Material
de Curso de Webdesign Gratuito |
|
TABELA DE CORES
Você percebeu que as cores a fonte obedecem o idioma inglês, no entanto,
as cores da fonte podem ser adicionados através do nome ou de seus respectivos códigos. Então para você ficar mais feliz, relacionei aqui algumas cores para colorir e
diversificar sua home page. Veja a figura 1.6
Exercício 5 – LISTAS NUMERADAS E MARCADAS
E lá vamos nós para um mais exercício. Desta vez trabalharemos com listas numeradas
e marcadores. Assim como em uma carta ou qualquer outro documento comum,
precisamos listar tópicos através de símbolos ou números.
Para entender isto, digite a listagem 1.6, e salve como exemplo5.html,
Listagem 1.6
<html>
<head><title>Listas</title>
</head>
<body>
<h3>Isto é uma lista</h3>
<! Início dos Numeradores>
<ol>
<li>Item 1
<li>Item 2
<li>Item 3
</ol>
<! Fim dos Numeradores>
<hr width=50% size=5 align=left>
<! Início dos Marcadores>
<ul>
<li>Item 1
<li>Item 2
<li>Item 3
</ul>
<! Fim dos Marcadores>
</body>
</html>
Fim da Listagem 1.6
Para ver o resultado deste exemplo abra o Internet Explorer, e na barra de endereço
digite C:\Meus documentos\exemplo5.html. Veja a figura 1.7
|
|
CONCEITO DOS TAGS USADOS NESTE EXERCÍCIO
TAG |
O QUE FAZ |
| <ol> |
Marca o início e o fim de uma lista ordenada. Recebem na primeira linha
um número ou letra. Devem ser usados com tag <LI>
Atributos
Start = especifica o número a partir do qual os itens começam a ser
contados. Ex: <ol start=3>
Type = modifica o tipo do numerador que pode ser: número, letras ou
algarismo romano.
Ex: <ol type=A> <ol type=I> |
| <ul> |
Marca o início e o fim de uma lista não ordenada, ou seja, os itens da lista
recebem símbolos na primeira linha. Devem ser usados com tag <LI>
Atributos
Type = modifica o tipo do marcador (símbolo), que pode ser:
Circle = um círculo vazio. Ex: <ul type=circle>
Disc = um círculo cheio. Ex: <ul type=disc>
Square = um quadrado cheio Ex: <ul type=square> |
Ficou confuso? Quer mais um exemplo para entender legal? Vamos nessa!
Para entender isto, digite a listagem 1.7, e salve como exemplo6.html,
Listagem 1.7
<html>
<head><title>Listas</title>
</head>
<body>
<h3>Isto é uma listagem iniciando no número 4</h3>
<ol start=4>
<li>Item 1
<li>Item 2
<li>Item 3
</ol>
<h3>Isto é uma listagem com letras</h3>
<ol type=A>
<li>Editora
<li>Érica
<li>Livros
</ol>
<h3>Isto é uma listagem em algarismo romano</h3>
<ol type=I>
<li>Editora
<li>Érica
<li>Livros
</ol>
<h3>Esta é uma listagem em algarismo romano a partir
do número 3</h3>
<ol type=I start=3>
<li>Editora
<li>Érica
<li>Livros
</ol>
</body>
</html>
Fim da Listagem 1.7
Para ver o resultado deste exemplo abra o Internet Explorer, e na barra de endereço
digite C:\Meus documentos\exemplo6.html. Veja a figura 1.8
Vamos terminar esta lição com mais um exemplo? Desta vez, faremos uma listagem
com subníveis.
Para entender isto, digite a listagem 1.8, e salve como exemplo7.html
Listagem 1.8
<html>
<head><title>Listas</title>
</head>
<body>
<h3>Listagem e SubListagem</h3>
<ol><! Início do Numerador>
<li>Item 1
<ul><! Início do Marcador dentro do Numerador>
<li type=disc>Item 1.1
<li type=disc>Item 1.2
<li type=disc>Item 1.3
</ul><! Fim do Marcador dentro do Numerador>
<li> Item 2
<ul><! Início do Marcador dentro do Numerador>
<li type=square>Item 2.1
<ul><!Início do Marcador dentro do Marcador>
<li type=circle>Item 2.1.1
<li type=circle>Item 2.1.2
<li type=circle>Item 2.1.3
</ul><!Fim do Marcador dentro do Marcador>
<li type=circle>Item 2.2
<li type=disc>Item 2.3
</ul><! Fim do Marcador dentro do Numerador>
<li> Item 3
</ol><! Fim do Numerador>
</body>
</html>
Fim da Listagem 1.8
Ufa! Terminamos mais uma etapa! Esse código foi grande, mas valeu!
Para ver o resultado deste exemplo abra o Internet Explorer, e na barra de endereço
digite C:\Meus documentos\exempl7.html. Veja a figura 1.9
|
