Oficina da Net

Fonte de ícones - Confira o novo ÍCONES BR.

Curso de HTML - Aula 4

Publicado em: 13/05/2008 | HTML | Visualizações: 865 | 1 Comentário(s)

Queridos leitores, desculpe a demora para postar essa aula, mas estava muito ocupado com alguns projetos de clientes e o tempo estava curto. Mas o importante é que durante esse tempo vocês puderam aperfeiçoar bastante os conhecimentos adquiridos nas 3 aulas anteriores.

Na aula de hoje falaremos sobre LISTAS, elas são uma forma de organizar e enumerar informações em seqüência e são divididas em 3 categorias que veremos a seguir.

1ª Categoria – LISTAS DE DEFINIÇÃO

Esse tipo de lista possui um termo em evidência e um texto explicativo logo na seqüência, ela também pode ser chamada de “lista de glossário”. Elas são muito utilizadas para criar páginas de índices, dicionários online, etc.
As Tags que definem essa lista são:

DL (Definition List)
DT (Definition Term)
DD (Definition Definition)

OBS: A partir desse ponto do curso, alguns exemplos não serão apresentados de forma visual, ou seja, com imagem demonstrativa da solução, pois HTML se aprende na prática, então, todo código que for apresentado nos exemplos, copie-o e cole-o no Bloco de Notas, salvando com a extensão .html

Exemplo:

<html>

<head>

   <title>Curso de HTML</title>

</head>

<body>

   <dl>

      <dt>Divisões da Linguagem HTML</dt>

         <dd>TAGs Iniciais</dd>

         <dd>Formatação de Texto</dd>

         <dd>Links</dd>

         <dd>Imagens</dd>

         <dd>Tabelas</dd>

         <dd>Formulários</dd>

   </dl>

</body>

</html>

2ª Categoria – LISTAS ORDENADAS

Esse tipo de lista tem seus itens enumerados seqüencialmente e são definidas pelas Tags:

OL (Order List)
LI (List Iten)

Sintaxe:

<ol type=tipo start=inicio>

Onde:

Type define o tipo de marcador utilizado. Os marcadores disponíveis são:

A (A, B, C...Z)
A (a, b, c... z)
i (i, ii, iii...)
1 (1, 2, 3...) – este é padrão, caso não seja especificado o tipo ele será utilizado

Start define qual o elemento inicial da numeração. Muito útil para listas aninhadas.

Exemplo:

<html>

<head>

   <title>Curso de HTML</title>

</head>

<body>

      <ol start=3>Divisões da Linguagem HTML

         <li>TAGs Iniciais</li>

         <li>Formatação de Texto</li>

         <li>Links</li>

         <li>Imagens</li>

         <li>Tabelas</li>

         <li>Formulários</li>

   </ol>



<ol type=”a”start=3>Divisões da Linguagem HTML

         <li>TAGs Iniciais</li>

         <li>Formatação de Texto</li>

         <li>Links</li>

         <li>Imagens</li>

         <li>Tabelas</li>

         <li>Formulários</li>

   </ol>

</body>

</html>

3ª Categoria – LISTAS NÃO ORDENADAS

É uma lista que tem seus itens definidos por marcadores. Ela é definida pelas Tags:

UL (Unorder List)
LI (List Iten)

Exemplo:

<html>

<head>

   <title>Curso de HTML</title>

</head>

<body>

      <ul>Divisões da Linguagem HTML

         <li>TAGs Iniciais</li>

         <li>Formatação de Texto</li>

         <li>Links</li>

         <li>Imagens</li>

         <li>Tabelas</li>

         <li>Formulários</li>

   </ul>

</body>

</html>

LISTAS ANINHADAS

As listas aninhadas são, nada mais que, a quebra na utilização de uma lista, seja ela ordenada, não ordenada ou de definição.

Exemplo:

<html>

<head>

   <title>Curso de HTML</title>

</head>

<body>

   <ol>A Linguagem HTML

      <li>Tags Iniciais</li>

         <ul>

            <li>HTML</li>

            <li>HEAD</li>

            <li>TITLE</li>

        </ul>

     <li>Formatação de Texto</li>

         <ul>

            <li>FONT</li>

            <li>P</li>

            <li>I</li>

            <li>B</li>

        </ul>

</ol>

</body>

</html>

Para tirarem suas dúvidas sobre as aulas do curso, basta enviar um e-mail para cursohtml2008@gmail.com e seu e-mail será respondido o mais breve possível, não atrapalhando o andamento do seu curso. Ao enviar o e-mail, não esqueça de identificar a aula na qual você teve dúvidas.

Até a próxima.

Links patrocinados