Aqui aprendemos a criar uma estrutura de menu em um documento HTML, u lizando uma lis-ta não ordenada. Faça as a vidades referentes para colocar em prá ca o seu entendimento sobre o assunto.
1. Qual é a forma correta de se criar um menu em um documento HTML?
2. O que acontece quando a página especifi cada no link não existe ou está com o endereço errado?
Passo a passo:
1. Abra o Sublime e crie um novo arquivo.
2. Com o arquivo criado, clique em File e selecione Save As.
3. Salve o arquivo dentro da pasta Testes HTML com o nome menu.html. 4. Inicie a estrutura HTML digitando: <html
5. Confi rme a sugestão do programa teclando <Enter>.
6. Com o cursor posicionado entre as tags de tulo, digite: Exemplo de Menu
7. Posicione o cursor dentro de <body> e tecle <Tab> para aplicar a indentação correta. 8. Digite a tag da lista não ordenada: <ul></ul>
9. Posicione o cursor entre as tags de abertura e fechamento da lista e tecle <Enter>. 10. Digite a tag do primeiro item: <li></li>
11. Coloque o cursor entre as tags de abertura e fechamento do item e digite a tag de link: <a></a>
12. Posicione o cursor dentro da tag de abertura do link, tecle <Espaço> e digite: href="estrutura.html"
13. Coloque o cursor entre as tags de abertura e fechamento do link e digite: Estrutura 14. Salve as alterações no documento. Depois, abra o arquivo "menu.html" no navegador.
Arquivo menu.html <!DOCTYPE html> <html> <head> <title>Exemplo de Menu</title> </head> <body> <ul>
<li><a href="estrutura.html">Estrutura</a></li> </ul>
</body> </html>
15. Clique no link do menu.
16. Após visualizar a página, volte à anterior.
17. Retorne ao Sublime, posicione o cursor após a tag de fechamento do primeiro item e tecle <Enter>.
18. Digite o código do segundo item: <li><a href="divs.html">Divs</a></li>
19. Tecle <Enter> e digite o código do terceiro item: <li><a href="listas.html">Listas</a></li>
20. Tecle <Enter> e digite o código do quarto item: <li><a href="teste.html">Teste</a></li>
21. Salve as alterações e atualize a página.
22. Teste os três novos links e depois volte à página do menu.
23. Retorne ao Sublime, posicione o cursor antes do nome teste.html e digite: 1
24. Salve as modifi cações e atualize a página.
25. Clique no quarto link e visualize o erro informado.
Visualização da página menu.html
<ul>
<li><a href="estrutura.html">Estrutura</a></li> <li><a href="divs.html">Divs</a></li>
<li><a href="listas.html">Listas</a></li> <li><a href="teste.html">Teste</a></li> </ul>
Lista criadas
Visualização das listas
<ul>
<li><a href="estrutura.html">Estrutura</a></li> <li><a href="divs.html">Divs</a></li>
<li><a href="listas.html">Listas</a></li> <li><a href="1teste.html">Teste</a></li> </ul>
26. Feche o navegador.
27. De volta ao Sublime, tecle a combinação <Ctrl> + <Z> para desfazer a alteração no nome do arquivo.
28. Salve as modifi cações no documento, feche o arquivo e o Sublime.
34. ESTILIZAÇÃO DE MENU
Con nuamos a construção de um menu de exemplo, o es lizando através de códigos CSS. Na sequência você encontra algumas a vidades referentes a este capítulo.
1. O que o recurso hover permite?
2. Como se defi ne o valor para a propriedade border?
Passo a passo:
1. Comece abrindo o Sublime e o arquivo "menu.html".
2. Crie um novo arquivo e o salve na pasta Testes HTML com o nome menu.css. 3. Acesse o documento HTML, posicione o cursor após a tag de tulo e tecle <Enter>.
4. Digite o código para vincular o arquivo CSS: <link rel="stylesheet" href="menu.css">
5. Posicione o cursor dentro da tag de abertura da lista, tecle <Espaço> e digite: id="menu" 6. Salve as alterações e acesse o arquivo CSS.
7. Digite o seletor e abra o bloco de declarações: #menu {
8. Tecle <Enter> para organizar o bloco. Depois, digite as declarações:
9. Tecle <Enter> e digite as declarações para a fonte. Se desejar, você pode escolher outra fonte. font-family:Tahoma, sans-serif;font-size: 22px;
10. Após teclar <Enter>, digite a declaração da largura: width:100px;
11. Pressione <Enter> e digite a declaração da borda: border:1px solid #545454;
12. Salve as alterações no código e abra o arquivo "menu.html" no navegador.
13. Visualize como o menu está fi cando. Depois, retorne ao Sublime.
14. Coloque o cursor após a chave que fecha o primeiro bloco e tecle <Enter> duas vezes. 15. Digite o bloco de declarações para o item. Se você desejar, você pode defi nir outra cor de
plano de fundo. #menu{ padding:0; margin:0; list-style:none; font-family:Tahoma, sans-serif; font-size:22px; width:100px; border:1px solid #545454; } Arquivo menu.css Visualização do menu #menu li { border:1px solid #545454; background-color:#AAFF91; } Arquivo menu.css #menu{ padding:0; margin:0; list-style:none; } Arquivo menu.css
16. Salve as alterações e atualize a página no navegador.
17. Retorne ao Sublime, tecle <Enter> duas vezes e digite o bloco do link:
18. Após salvar as alterações, atualize a página no navegador.
19. Retorne ao Sublime, pressione <Enter> duas vezes e digite os blocos com o recurso hover:
20. Salve as modifi cações e atualize a página.
21. Direcione o cursor sobre os itens do menu. Depois, feche o navegador, os arquivos e o
Sublime. Visualização do menu #menu li a { text-decoration:none; color:#545454; } Arquivo menu.css Visualização do menu #menu li:hover { background-color:#545454; } #menu li a:hover { color:#AAFF91; } Arquivo menu.css