janeiro – 2013 – WebCodeFree

Listas em HTML

As listas são formas de estruturar documentos em forma de sumário, menu ou resumo de conteúdo. São muito boas na hora da criação menus ou tópicos de uma página HTML. Existem dois tipos de listas: as ordenadas e as não ordenadas. As listas ordenadas obedecem a uma ordem numérica, e as não ordenadas não obedecem a nenhuma ordem.

LISTAS ORDENADAS

Para definirmos uma lista ordenada, utilizamos a tag <OL> </OL>que determina o marcador ordenado para a nossa lista. Para definir os itens da lista por sua vez utilizamos o marcador <LI></LI>.

Sintaxe:

<ol>
<li> Item 1 </li>
<li> Item 2 </li>
<li> Item 3 </li>
<li> Item 4 </li>
</ol>

<ol>

</ol>

Podemos escolher o tipo de marcador de nossa lista, podendo ser numérico (1,2,3), romano, (I, II, III) ou caracter (a, b, c). Para isso utilizamos o atributo type na tag <OL></OL>.

Sintaxe:

<ol type=”1”>
<li> Item 1 </li>
<li> Item 2 </li>
</ol>

<ol type=”I”>
<li> Item 1 </li>
<li> Item 2 </li>
</ol>

<ol type=”a”>
<li> Item 1 </li>
<li> Item 2 </li>
</ol>

</ol>

</ol>

</ol>

Exemplo Prático:

<html>
<head>
<title>Exemplo Listas 1</title>
</head>
</body>
<h3>Listas Ordenadas</h3>
<ol>
<li>C++</li>
<li>Java</li>
<li>PHP</li>
</ol>
<ol type="I">
<li>HTML</li>
<li>CSS</li>
<li>JAVASCRIPT</li>
</ol>
<ol type="A">
<li>C++</li>
<li>Java</li>
<li>PHP</li>
</ol>
</body>
</html>

<html>

<head>

<title>Exemplo Listas 1</title>

</head>

</body>

<h3>Listas Ordenadas</h3>

<ol>

</ol>

<li>JAVASCRIPT</li>

</ol>

</ol>

</body>

</html>

LISTAS NÃO ORDENADAS

Para definirmos uma lista não ordenada, precisamos utilizar a tag <UL></UL>. Para definir os itens da lista por sua vez utilizamos o marcador <LI></LI>.

Sintaxe:

<ul>
<li> Item 1 </li>
<li> Item 2 </li>
<li> Item 3 </li>
<li> Item 4 </li>
</ul>

<ul>

</ul>

Podemos escolher o tipo de marcador de nossa lista, podendo ser um quadrado ou um círculo.

Sintaxe:

<ul type=”circle”>
<li> Item 1 </li>
<li> Item 2 </li>
</ul>

<ul type=”square”>
<li> Item 1 </li>
<li> Item 2 </li>
</ul>

<ul type=”disk”>
<li> Item 1 </li>
<li> Item 2 </li>
</ul>

</ul>

</ul>

</ul>

Exemplo Prático:

<html>
<head>
<title>Exemplo Listas 1</title>
</head>
</body>
<h3>Listas Ordenadas</h3>
<ul>
<li>C++</li>
<li>Java</li>
<li>PHP</li>
</ul>
<ul type="square">
<li>HTML</li>
<li>CSS</li>
<li>JAVASCRIPT</li>
</ul>
<ul type="circle">
<li>C++</li>
<li>Java</li>
<li>PHP</li>
</ul>
</body>
</html>

<html>

<head>

<title>Exemplo Listas 1</title>

</head>

</body>

<h3>Listas Ordenadas</h3>

<ul>

</ul>

<li>JAVASCRIPT</li>

</ul>

</ul>

</body>

</html>

LISTA DE DEFINIÇÃO

Uma lista de definição é utilizada quando existem diversos tópicos curtos acompanhados de alguma descrição para o mesmo. Uma lista de definição é composta de três tags básica: <dl>, <dt>, <dd>, onde a tag <dl> delimita a área da lista, <dt> define um tópico e <dd> define a descrição do tópico.

Sintaxe:

<dl>
<dt> Tópico 1
<dd> Definição do Tópico 1</dd>
<dd> Definição do Tópico 1</dd>
<dd> Definição do Tópico 1</dd>
</dt>

<dt> Tópico 2
<dd> Definição do Tópico 2</dd>
<dd> Definição do Tópico 2</dd>
<dd> Definição do Tópico 2</dd>
</dt>
</dl>

<dl>

<dt> Tópico 1

<dd> Definição do Tópico 1</dd>

</dt>

<dt> Tópico 2

<dd> Definição do Tópico 2</dd>

</dt>

</dl>

Exemplo Prático:

<html>
<head>
<title>Exemplo Listas 3</title>
</head>
</body>
<h3>Listas de Definição</h3>
<dl> 
<dt> HTML
<dd> Linguagem usada na criação de páginas web.</dd>
<dd> Baseada em conjunto de pares de tags.</dd>
</dt>
<dt> CSS
<dd> É usada para criar folhas de estilos para páginas web.</dd>
<dd> Pode ser inserido no corpo de uma páginas html ou importada de um arquivo texto.</dd>
</dt>

<dt> JAVASCRIPT
<dd> Linguagem usada para dar um pouco mais de dinamismo em páginas html.</dd>
<dd> Como o HTML o JAVASCRIPT também é processado pelo BROWSER</dd>
</dt>
</dl>

</body>
</html>

<html>

<head>

<title>Exemplo Listas 3</title>

</head>

</body>

<h3>Listas de Definição</h3>

<dl>

<dt> HTML

<dd> Linguagem usada na criação de páginas web.</dd>

<dd> Baseada em conjunto de pares de tags.</dd>

</dt>

<dt> CSS

<dd> É usada para criar folhas de estilos para páginas web.</dd>

<dd> Pode ser inserido no corpo de uma páginas html ou importada de um arquivo texto.</dd>

</dt>

<dt> JAVASCRIPT

<dd> Linguagem usada para dar um pouco mais de dinamismo em páginas html.</dd>

<dd> Como o HTML o JAVASCRIPT também é processado pelo BROWSER</dd>

</dt>

</dl>

</body>

</html>

Month: janeiro 2013

Backup de Base de Dados no PhpMyAdmin

Listas em HTML

Listas em HTML