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