Aprendemos a criar listas ordenadas no documento HTML, personalizando com diferentes atri-butos. Resolva os exercícios a seguir para colocar em prá ca os seus estudos.
1. Por que os valores do atributo type são case sensiƟ ve? Dê um exemplo de sua aplicação.
2. O que o atributo start permite na lista?
Passo a passo:
1. Para começar abra o Sublime Text.
2. Com um novo arquivo em branco, clique em File e selecione Save As. 3. Nomeie o arquivo como listas.html.
4. Salve o arquivo dentro da pasta Testes HTML. Se precisar de ajuda para encontrar a pasta, peça ao seu instrutor.
5. Abra a tag html digitando: <html
6. Aceite a sugestão do programa teclando <Enter>.
7. Com a estrutura do HTML já criada e o cursor posicionado entre as tags de tulo, digite: Exemplo de Listas
8. Posicione o cursor dentro de <body> e tecle <Tab> para aplicar a indentação correta. 9. Digite a tag de lista ordenada: <ol></ol>
10. Posicione o cursor entre as tags de abertura e fechamento da lista e tecle <Enter>. 11. Para o primeiro item da lista digite: <li>Primeiro</li>
12. Insira mais quatro itens na lista:
13. Salve as alterações no código. Minimize a janela do Sublime e abra o arquivo "listas.html" no navegador. <ol> <li>Segundo</li> <li>Terceiro</li> <li>Quarto</li> <li>Quinto</li> </ol>
14. Após visualizar a lista, volte ao Sublime.
15. Posicione o cursor na abertura da tag <ol>, tecle <Espaço> e digite: type="I"
16. Salve as alterações, volte ao navegador e atualize a página.
17. Retorne ao Sublime, apague o valor do atributo type e, no lugar, digite: a 18. Atualize a página no navegador após salvar as alterações no código.
19. No Sublime apague o valor de type e, no lugar, digite: 1 20. Posicione o cursor após o atributo type e tecle <Espaço>. 21. Digite o atributo start e seu valor: start="10"
<ol type="I"> <li>Primeiro</li> <li>Segundo</li> <li>Terceiro</li> <li>Quarto</li> <li>Quinto</li> </ol> Alterando o Ɵ po da lista
Visualização da lista no navegador
Visualização da lista no navegador Visualização da lista no navegador
22. Salve as alterações, volte ao navegador e atualize a página.
23. Retorne ao Sublime e posicione o cursor dentro da tag de abertura do terceiro item da lista.
24. Tecle <Espaço> e digite o atributo value: value="6"
25. Salve as alterações e atualize a página no navegador.
26. Feche o navegador, os arquivos e o Sublime.
21. LISTAS NÃO ORDENADAS
Aqui aprendemos a criar uma lista não ordenada, a compondo com imagem, link e textos. Pros-siga com os seus estudos fazendo as a vidades a seguir.
1. Para que são u lizadas as listas não ordenadas?
2. Como se defi ne o po de marcador para cada item da lista individualmente?
Passo a passo:
1. Abra o Sublime e o arquivo "listas.html".
2. Selecione a tag <ol> e o seu conteúdo. Depois, tecle <Delete>.
3. Com o cursor posicionado dentro de <body>, inicie a lista não ordenada digitando: <ul></ul>
4. Posicione o cursor entre as chaves de abertura e fechamento da lista e tecle <Enter>.
<ol type="1" start="10"> <li>Primeiro</li> <li>Segundo</li>
<li value="6">Terceiro</li> <li>Quarto</li>
<li>Quinto</li> </ol>
Alterando o Ɵ po da lista
5. Digite os itens:
6. Tecle <Ctrl> + <S> para salvar as alterações. Minimize a janela do Sublime e abra o arquivo "listas.html" no navegador.
7. Observe a lista não ordenada. Em seguida, retorne ao Sublime.
8. Posicione o cursor dentro da tag de abertura da lista e tecle <Espaço>. Digite o atributo e seu valor: type="circle"
9. Salve as alterações, volte ao navegador e atualize a página.
10. Após visualizar a página, volte ao Sublime. 11. Apague o valor de type e, no lugar, digite: disc
<li>Cachorro</li> <li>Gato</li> <li>Peixe</li> <li>Porco</li> <li>Cavalo</li>
Inserindo lista não ordenada
Lista não ordenada
Alterando o Ɵ po da lista
<ul type="circle"> <li>Cachorro</li> <li>Gato</li> <li>Peixe</li> <li>Porco</li> <li>Cavalo</li> </ul> Visualização no navegador
12. Posicione o cursor dentro da tag de abertura do quinto item. Então, tecle <Espaço> e digite: type="square"
13. Salve as alterações e atualize a página no navegador.
14. Volte ao Sublime e apague o texto do primeiro item da lista.
15. Digite a tag de imagem com o atributo referente ao seu caminho: <img src="img/img8.jpg"> 16. Posicione o cursor após o atributo src, tecle <Espaço> e digite: width="100" height="100"
17. Salve as alterações no código e atualize a página no navegador.
18. Retorne ao Sublime. Depois, selecione o texto do quinto item e tecle <Delete>.
19. Para esse item digite a tag de link: <a href="img/img7.jpg" target="_blank">Imagem</a>
20. Salve as alterações, vá para o navegador e atualize a página.
Alterando o Ɵ po da lista
<ul type="disc"> <li>Cachorro</li> <li>Gato</li> <li>Peixe</li> <li>Porco</li>
<li type="square">Cavalo</li> </ul>
Inserindo imagem no primeiro item
<ul type="disc">
<li><img src="img/img8.jpg" width="100" height="100"></li> <li>Gato</li>
<li>Peixe</li> <li>Porco</li>
<li type="square">Cavalo</li> </ul>
Inserindo imagem no quinto item
<ul type="disc">
<li><img src="img/img8.jpg" width="100" height="100"></li> <li>Gato</li>
<li>Peixe</li> <li>Porco</li>
<li type="square"><a href="img/img7.jpg" target="_blank">Imagem</a></li> </ul>
21. Clique no link presente na lista.
22. Feche a aba aberta que contém a imagem.
23. Para fi nalizar feche o navegador, o documento HTML e o Sublime.
22. CLASSE E ID
Durante esse capítulo foi ensinado a nomear elementos através dos atributos class e id, eviden-ciando suas diferenças. Coloque em prá ca seu aprendizado com os exercícios a seguir.
1. Qual a diferença entre id e classe?
2. Como o CSS iden fi ca uma classe e um id no seletor?
Passo a passo:
1. Comece abrindo o Sublime e o arquivo"listas.html".
2. Apague a tag de imagem presente no primeiro item da lista. 3. Dentro do primeiro item digite: Cachorro
4. Posicione o cursor após o fechamento da tag de tulo, tecle <Enter> e digite:<link rel="stylesheet” href=”style.css">
5. Abra o arquivo "style.css" no Sublime.
6. Acesse a aba do documento HTML, posicione o cursor dentro da tag de abertura do segun do item da lista, tecle <Espaço> e digite: class="item"
7. O segundo item deve fi car assim:
8. Salve as alterações e acesse a aba do arquivo CSS.
9. Posicione o cursor após a chave de fechamento do úl mo bloco de declarações e tecle <Enter> duas vezes.
10. Digite o seletor e abra a chave do bloco: .item { 11. Tecle <Enter> para organizar o bloco.
12. Digite a declaração: color:#543CFF; 13. O bloco de declarações deve fi car assim:
14. Salve as alterações no código. Minimize o Sublime e abra o arquivo "listas.html"no na-vegador.
15. Após observar a página, retorne ao Sublime e acesse o documento HTML.
16. Posicione o cursor dentro da tag de abertura do primeiro item da lista, tecle <Espaço> e digite: class="item"
17. Salve as alterações e atualize a página no navegador.
18. Volte ao Sublime, posicione o cursor dentro da abertura da tag do terceiro item da lista, tecle <Espaço> e digite: id="peixe"
19. Salve as alterações e acesse o arquivo CSS.
20. Posicione o cursor após a chave que fecha o bloco da classe e tecle <Enter> duas vezes. 21. Digite o seletor com o id e abra as chaves do novo bloco de declarações: #peixe{ 22. Tecle <Enter> para organizar o bloco.
Inserindo classe e id na lista
<ul type="disc">
<li class="item">Cachorro</li> <li class="item">Gato</li> <li id="peixe">Peixe</li> <li>Porco</li>
<li type="square"><a href="img/img7.jpg" target="_blank">Imagem</a></li> </ul>
Inserindo classe no segundo item
<li class="item">Gato</li>
Arquivo style.css
.item{
color:#543CFF; }
23. Digite a declaração para alterar o tamanho da fonte: font-size:22px; 24. Tecle <Enter> e digite a declaração para alterar a cor: color:#B930FF;
25. Salve as alterações no código e atualize a página no navegador.
26. Após visualizar a página, feche o navegador. 27. Para encerrar feche os arquivos e o Sublime.