• Listas ordenadas;
• Listas não-ordenadas;
• Listas de definição.

Um exemplo básico da utilização das listas é em um mecanismo de navegação, uma barra de navegação ou um menu lateral. Infelizmente ainda encontramos sites na internet que não utilizam a marcação de listas para marcar o conteúdo de navegação do site.
Todas as listas devem conter mais do que um elemento.

Listas Ordenadas

Utilizada para marcar uma ordenação no conteúdo. Quando a informação tem uma seqüência a ser respeitada. Para iniciar a marcação utilizamos o elemento ol. Depois para marcamos os itens das listas, utilizamos o elemento li. As listas são renderizadas com uma marcação seqüencial antes do conteúdo da lista. Veja o exemplo:

<ol>
	<li>Rio Grande Do sul</li>
	<li>Minas Gerais</li>
	<li>Rio de Janeiro</li>
</ol>

Listas não-ordenadas.

O tipo de lista mais comum de se utilizar em sites são as listas não-ordenadas. Esse tipo de lista é utilizado quando a informação a ser mostrada não segue uma seqüência. Para iniciar uma lista não ordenada usamos o elemento ol. Para marcar os itens dessa lista usamos o mesmo elemento li. Veja o exemplo:

<ul>
<li>Criação de sites</li>
<li>Montagem e manutenção de computadores</li>
<li>Aulas particulares</li>
</ul>

Listas de definição

São poucos os desenvolvedores que utilizam as listas de definição. Essas listas são formadas por uma definição da lista e sua descrição. Para iniciar a lista utilizamos o elemento dl. Depois cada grupo de definição é marcado com dt. Para definir o termo da lista usamos o dd que devera estar contido dentro do elemento dt que por sua vez está dentro do elemento dl. Veja o exemplo.

<dl>
	<dt>Curso de web Standards</dt>
		<dd>Manhã/tarde/noite</dd>
		<dd>20/12/2009</dd>
	<dt>Curso de PHP</dt>
		<dd>noite</dd>
		<dd>22/12/2009</dd>
</dl>

Lista com vários níveis e não-ordenadas

<ul>
	<li>Países</li>
    	<ul>
        	<li>América do sul</li>
            	<ul>
                	<li>Brasil</li>
                    <li>Argentida</li>
                    <li>Paraguai</li>
                </ul>
            <li>América do norte</li>
            	<ul>
                	<li>Estados Unidos</li>
                    <li>Canadá</li>
                    <li>México</li>
                </ul>
		</ul>
	<li>Cidades</li>
       	<ul>
        	<li>Curitiba</li>
            <li>Salvador</li>
            <li>Floarianópolis</li>
        </ul>
</ul>

Lista com vários níveis, não-ordenadas e ordenadas

As listas podem ser usadas em conjuntos em um documento, ou seja, simultaneamente, uma lista dentro da outra. Podemos também criar níveis. No exemplo que segue temos uma lista não-ordenada dentro de uma lista ordenada.

<ol>
	<li>Países</li>
    	<ul>
        	<li>América do sul</li>
            	<ul>
                	<li>Brasil</li>
                    <li>Argentina</li>
                    <li>Paraguai</li>
                </ul>
            <li>América do norte</li>
            	<ul>
                	<li>Estados Unidos</li>
                    <li>Canadá</li>
                    <li>México</li>
                </ul>
		</ul>
	<li>Cidades</li>
       	<ul>
        	<li>Curitiba</li>
            <li>Salvador</li>
            <li>Floarianópolis</li>
        </ul>
</ol>

Veja os exemplos
Pessoal por hoje era isso! Uma ótima semana para todos. Fiquem com Deus.

Isso vai interessar você também

• Estrutura mínima de um documento (X)HTML
• Elementos HTML em desuso
• Elementos inline e nível de bloco
• Diferença entre XHTML e HTML
• Breve introdução a (X)HTML

As três partes da estrutura são:

• Definição do tipo de documento (DOCTYPE ou DTD)
• Seção head
• Seção body

DOCTYPE

É a declaração do tipo de documento. Deve ser escrita na primeira linha do documento. DOCTYPE nada mais é que um endereço que o navegador consulta para saber como renderizar sua marcação, caso essa declaração não for localizada, o navegador seguirá suas regras padrões. Como cada navegador tem suas regras, isso pode causar sérios problemas de renderização, ou seja, sempre declare o DOCTYPE.

Tipos de DOCTYPE

Strict: Documentos que usam essa declaração não podem conter nenhum elemento e nem atributo em desuso pelo W3C e marcação de frames.
Transitional: Pode ter alementos a atributos em desuso, mas não marcação de frames
Frameset: Pode contem elementos de frames, e elementos e atributos em desuso pelo W3C.
O melhor a se usar é o strict, assim você está escrevendo marcação seguindo os padrões web. Mas não esqueça: usando essa declaração não podemos usar elementos e atributos em desuso.

Seção head

Oferece informações adicionais sobre o documento e nele é onde fica o título do documento, as metatags, links para arquivos CSS JavaScript relacionados com esse documento.
Seção body
Onde ficam os elementos destinados a marcar o conteúdo do documento.

Estrutura completa (X)HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
< html>
< head>
< meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
< title>Título da página< /title>
< /head>
<body>
marcação da página
</body>
< /html>

Isso vai interessar você também

• Tipos de listas em (X)HTML
• Elementos HTML em desuso
• Elementos inline e nível de bloco
• Diferença entre XHTML e HTML
• Breve introdução a (X)HTML

Isso vai interessar você também

• Tipos de listas em (X)HTML
• Estrutura mínima de um documento (X)HTML
• Elementos inline e nível de bloco
• Diferença entre XHTML e HTML
• Breve introdução a (X)HTML

Elementos níveis de bloco

Elementos nível de bloco ocupam toda largura disponível na página e criam uma linha invisível antes e depois de si próprio. Elementos nível de bloco sempre começam em nova linha. Um elemento que venha antes ou depois de um elemento nível de bloco é renderizado acima ou abaixo do elemento nível de bloco, nunca ao lado.
Elementos nível de bloco podem conter elementos inline e outros elementos nível de bloco.
Exemplos de tags nível de bloco:

address, blockquote, center, dir, div, dl, dt, dd, frameset, fieldset, form,
h1, h2, h3, h4, h5, h6, hr, menu, noframes, noscript, ol, ul, li, p, pre, table,
tbody, thead, tfoot, tr, td, th

Elementos inline

Ocupa somente a largura do elemento, largura necessária. Elementos “inline” poderão apenas conter informações e outros elementos “inline”, jamais poderão conter elementos nível de bloco.
Diferente dos elementos nível de bloco os inline não começam em nova linha.
Exemplos de tags inlines:

a, abbr, acronym, applet, b, basefont, bdo, big, br, button, cite, code, del, dfn,em, font, i, iframe, img, input, ins, kbd, label, map, object, q, s, samp, select,small, span, strike, strong, sub, sup, textarea, tt, u, var

Elementos invisíveis

São definidos como tags invisíveis porque estão escritas no documento mas o usuário não as vê.
Exemplos de elementos invisíveis:

meta, link, style, title

Usando display:block; e display:inline; podemos trocar um elemento para nível de bloco e inline respectivamente.

Isso vai interessar você também

• Tipos de listas em (X)HTML
• Exemplos de menus em CSS
• Comentários condicionais para o Internet Explorer
• Abreviando propriedades CSS
• Entendendo a especificidade CSS
• Centralizando layout com CSS – parte I
• Bug do Internet Explorer 6 (IE6) – fundo desaparecendo em listas
• Bug do Internet Explorer 6 (IE6) – Margem dobradas
• Css TypeSet Gerador de CSS
• Posicionamento relativo, absoluto, static e fixed em CSS

Escrever todas as tags e atributos em letras minúsculas:

XML que deu origem ao XHTML é sensível ao tamanho de caixa de fonte, então com XHTML não é diferente. É obrigatório o uso de letras minúsculas ao escrever a sintaxe de elementos XHTML.
Exemplo:

• Errado:

<H1>Título principal</H1>
<P> Parágrafo de exemplo</P>
<td COLSPAN=”3”>

• Certo:

<h1>Título principal</h1>
<p> Parágrafo de exemplo</p>
<td colspan=”3”>

Aninhar as tags:

A primeira tag a ser aberta dever ser a última a ser fechada, a segunda tag é a penúltima e assim por diante.
Exemplo:

• Errado:

<div><p><em>Texto em destaque</div></p></em>

• Certo:

<div><p><em>Texto em destaque</em></p></div>

Fechar todas as tags abertas:

Toda tag que for aberta deve ser fechada, diferentemente do que ocorre com HTML. Em HTML podemos omitir a tag de fechamento, por exemplo, nas tags.

<p> e <li>

Exemplo:

• Errado:

<p>Parágarfo sem tag de fechamento.
<li>Um item da lista sem tag de fechamento

• Certo:

<p>Parágarfo com tag de fechamento.</p>
<li>Um item da lista com tag de fechamento</li>

Fechar elementos vazios:

Elementos vazios dever ter uma tag de fechamento ou a tag de abertura dever terminar com />
Exemplo:

• Errado:

<hr>
<br>
<img src=”foto.jpg” alt=”minha foto”>

• Certo:

<hr></hr>
<br></br>
<img src=”foto.jpg” alt=”minha foto”></img>

Como vimos acima podemos usar a tag de fechamento ou usar a terminação com barra como mostrado abaixo.

<hr />
<br />
<img src=”foto.jpg” alt=”minha foto” />

Procure adotar a opção de terminação com barra, assim terá um código menor e mais limpo.

Colocar valores dos atributos entre “ “:

Todos os valores de atributos devem ficar entre aspas, independente de ser texto ou número.
Exemplo:

• Errado:

 <td colspan=3>

• Certo:

<td colspan=”3”>

Escrever a sintaxe para atributos:

A sintaxe para atributos dever ser escrita com nome e valor.
Exemplo:

• Errado:

<input checked />

• Certo:

<input checked=”checked” />

Usar id ao invés de name:

O atributo name está em desuso e possivelmente será excluído das próximas versões do XHTML.
Exemplo:

• Errado:

<img src=”foto.jpg” alt=”minha imagem” name=”foto” />

• Certo:

<img src=”foto.jpg” alt=”minha imagem” id=”foto” />

Isso vale também para links internos, âncoras. Em XHTML use o atributo id no lugar de name.
Use:

<a id=”topo”>Topo</>

Ao invés de:

<a name=”topo”>Topo</>

OBS: Em documentos nos quais você precise de compatibilidade entre navegadores antigos, use ambos atributos, como mostrador abaixo.

<a id=”topo” name=”topo”>Topo</>
<img src=”foto.jpg” alt=”minha imagem” id=”foto” name=”foto” />

Atributo alt para imagens:

O uso do atributo alt é obrigatório. No caso de uma imagem que esteja fazendo um papel decorativo, use o atributo alt vazio, apenas dê um espaço entre as aspas.
Exemplo:

<img src=”foto.jpg” alt=”minha imagem” />
<img src=”barra_lateral.jpg” alt=” ” />

Bloco de comentários:

É comum o uso de comentários para marcar trechos de código. E também é comum o uso de uma seqüência de caracteres, dentro da tag de comentário, para destacar mais o comentário.
Evite o uso do clássico tracejado (-). Alguns navegadores mais antigos podem encontrar dificuldade na interpretação da seqüência desse caractere. Use sinais de iguais (=) ou a letra xis (x).
Exemplo:

• Errado:

<!--- ----------------------------------- menu lateral ----------------------------------- -->

• Certo:

<!-- ==================== menu lateral ====================== -->

Isso vai interessar você também

• Tipos de listas em (X)HTML
• Estrutura mínima de um documento (X)HTML
• Elementos HTML em desuso
• Elementos inline e nível de bloco
• Breve introdução a (X)HTML

Diferença de marcação e programação

Com certeza quem é da área de Web já ouviu alguém falar “sou programador (X)HTML”, “Tem que fazer a programação em (X)HTML” e por aí vai. Na verdade escrever desenvolver em (X)HTML nada tem a ver com programar. Programar é algo muito mais complexo, capazes de fazer comparação ente valores, realizar tomadas de decisão, consultar um banco de dados… algo impossível de se fazer com (X)HTML. Podemos citar alguns exemplos de linguagens de programação: PHP, ASP, JAVA, JavaScript, ActionScript entre outras.
Linguagens como (X)HTML e HTML são linguagens de marcação ou linguagem de publicação, que tem como principal objetivo estruturar conteúdos para serem visualizados na web. Jamais fale programar em (X)HTML.

Isso vai interessar você também

• Tipos de listas em (X)HTML
• Estrutura mínima de um documento (X)HTML
• Elementos HTML em desuso
• Elementos inline e nível de bloco
• Diferença entre XHTML e HTML