HTML:Criando Listas em Sua página.
Autor: Erick | Publicado: 2011-03-24T20:58:00-03:00


&nbsp;&nbsp;&nbsp; Até o momento aprendemos a estruturar um HTML&nbsp;&nbsp;&nbsp; de forma correta, utilizar as devidas TAGS, combinar TAGS e já criamos nossas&nbsp;&nbsp;&nbsp; duas primeiras páginas.
&nbsp;&nbsp;&nbsp; Agora então vamos aprender a acrescentar LISTAS em nossa página.&nbsp;&nbsp;&nbsp; Primeiramente, vou re-apresentar uma estrutura de código HTML:&nbsp;&nbsp;&nbsp; Ex:&nbsp;&nbsp;&nbsp; &lt;html&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;head&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;title&gt;Criando Listas&lt;/title&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/head&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;body&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/body&gt;&nbsp;&nbsp;&nbsp; &lt;/html&gt;
&nbsp;&nbsp; Uma das formas de listas, são as LISTAS NÃO ORDENADAS.
&nbsp;&nbsp; Nesse caso utilizamos a TAG &lt;ul&gt; para ABRIR e &lt;/ul&gt; para FECHAR a Lista.&nbsp;&nbsp; E para cada ITEM a ser acrescentado utilizamos a TAG &lt;li&gt;&nbsp;&nbsp; E agora em seguida iremos ¨LISTAR¨.&nbsp;&nbsp; Ex:&nbsp;&nbsp; &lt;html&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;head&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;title&gt;Criando Listas&lt;/title&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/head&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;body&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &lt;ul&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;Item 1&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &lt;li&gt;Item 2&lt;/li&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;Item 3&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &lt;li&gt;Item 4&lt;/li&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/ul&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/body&gt;&nbsp;&nbsp;&nbsp; &lt;/html&gt;
&nbsp;&nbsp;&nbsp; Como já foi explicado anteriormente, tudo referente ao CORPO da página&nbsp;&nbsp;&nbsp; vai incorporada entre &lt;body&gt; e &lt;/body&gt;.&nbsp;&nbsp;&nbsp; Resultado:Item 1
Item 2
Item 3
Item 4
&nbsp;&nbsp;&nbsp; Esse é o resultado interpretado pelo nosso navegador.&nbsp;&nbsp;&nbsp; Entenderam até aqui?Para Listas sem ordenação é a TAG &lt;ul&gt; e &lt;/ul&gt;.&nbsp;&nbsp;&nbsp; E caso precisemos ordenar esses mesmos ITENS a TAG é &lt;ol&gt; e &lt;/ol&gt;&nbsp;&nbsp;&nbsp; Ex:&nbsp;&nbsp;&nbsp; &lt;html&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;head&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;title&gt;Criando Listas&lt;/title&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/head&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;body&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &lt;ol&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;Item 1&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &lt;li&gt;Item 2&lt;/li&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;Item 3&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &lt;li&gt;Item 4&lt;/li&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/ol&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/body&gt;&nbsp;&nbsp;&nbsp; &lt;/html&gt;
&nbsp;&nbsp;&nbsp; Notaram aonde eu fiz a alteração?Substitui os &lt;ul&gt; por &lt;ol&gt; e &lt;/ul&gt; por &lt;/ol&gt;.&nbsp;&nbsp;&nbsp; Resultado:Item 1
Item 2
Item 3
Item 4
&nbsp;&nbsp;&nbsp; Agora temos uma Lista devidamente ordenada com o 1, 2, 3 e 4.Aonde anteriormente&nbsp;&nbsp;&nbsp; eram apenas as ¨bolinhas¨, pretas.
&nbsp;&nbsp;&nbsp; Revisando o material de hoje:&nbsp;&nbsp;&nbsp; Temos a Listas NÃO ordenadas com:&lt;ul&gt; e &lt;/ul&gt;&nbsp;&nbsp;&nbsp; Temos a Lista ORDENADA com: &lt;ol&gt; e &lt;/ol&gt;&nbsp;&nbsp;&nbsp; Então agora entraremos no terceiro e ultimo item dessa matéria.&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; O&nbsp; BLOCKQUOTE , utilizamos ele para criar citações em especial.&nbsp;&nbsp;&nbsp; Pois essa TAG cria a identação e uma abre uma linha de espaço em cima &nbsp;&nbsp;&nbsp; e outra embaixo da palavra em questão.&nbsp;&nbsp;&nbsp; &lt;blockquote&gt; e &lt;/blockquote&gt;&nbsp;&nbsp;&nbsp; Vamos combinar todas essas 3 da aula de hoje e criar uma nova página&nbsp;&nbsp;&nbsp; no Notepad++?&nbsp;&nbsp;&nbsp; Acompanhem na imagem abaixo:
&nbsp;&nbsp; &nbsp;&nbsp; E esse será o resultado:&nbsp;&nbsp; Listas Não OrdenadasItem 1
Item 2
Item 3
Item 4
Listas OrdenadasItem 1
Item 2
Item 3
Item 4
&nbsp;&nbsp; Para quem preferir, sempre existe a possibilidade de combinarmos.&nbsp;&nbsp; Ex:&nbsp;&nbsp; &lt;blockquote&gt; de CITAÇÃO, com o &lt;b&gt; de NEGRITO.&nbsp;&nbsp; &lt;Blockquote&gt;&lt;b&gt;Citação em Negrito&lt;/b&gt;&lt;/blockquote&gt;
&nbsp;&nbsp; Resultado:Citação em Negrito&nbsp;&nbsp; Esta sendo tudo muito fácil até agora não é?&nbsp;&nbsp; Mas...afinal de contas, quem foi que falou que HTML era difícil?^^

&nbsp;&nbsp;&nbsp;Continuação AQUI:Acrescentando Atributos.
&nbsp;