Aqui aprendemos a realizar a personalização de imagens, aplicando bordas e alterando a largura e altura. Na sequência encontram-se a vidades referentes ao capítulo.
1. O que a propriedade CSS border permite?
2. Em qual ocasião se u liza o valor do tamanho em porcentagem?
Passo a passo:
1. Abra o Sublime Text.
2. Com o programa aberto, abra nele os arquivos "teste.html" e "style.css", presentes den-tro da pasta Testes HTML.
3. No arquivo CSS apague a declaração de plano de fundo. 4. Salve as alterações e acesse o documento HTML.
5. Posicione o cursor após o atributo Ɵ tle da tag <img>, tecle <Espaço> e digite: border="10" 6. Salve as alterações no código. Depois, minimize a janela do Sublime e abra o arquivo
"teste.html" no navegador.
7. Observe a borda aplicada na imagem. Em seguida, retorne ao Sublime.
8. Apague o atributo border da tag <img>, salve as alterações e acesse o arquivo CSS. 9. Apague o elemento body e, no lugar, digite: img
10. Dentro do bloco de declarações, digite: border:3px solid #FF0000;
11. Salve as alterações e atualize a página no navegador.
Borda inserida na imagem
img{
border:3px solid #FF0000; }
Arquivo style.css
12. Visualize a nova borda e volte ao Sublime.
13. Acesse o documento HTML, posicione o cursor após o atributo tle, tecle <Espaço> e di-gite: height="350" width="350"
14. Salve as alterações no código, volte ao navegador e atualize a página.
15. Retorne ao Sublime e apague o atributo height.
16. Selecione o valor de width, tecle <Delete> e, no lugar, digite: 75% 17. Salve as alterações e atualize a página no navegador.
18. Observe as alterações no tamanho da imagem. Depois, diminua o tamanho da janela do navegador.
19. Após visualizar o novo tamanho da imagem, maximize novamente a janela do navegador. 20. Volte ao Sublime e apague o atributo width da tag <img>.
21. Salve as alterações e acesse o arquivo CSS.
22. Com o cursor posicionado após a declaração atual, tecle <Enter>. 23. Digite a declaração da largura: width:512px;
24. Tecle <Enter> e digite a declaração da altura: height:384px;
<!DOCTYPE html> <html>
<head>
<title>Teste</title>
<link rel="stylesheet" type="text/css" href="style.css"> </head>
<body>
<img src="img/img2.jpg" title="Imagem de Exemplo" height="350" width="350"> </body>
</html>
Alterando o tamanho da imagem
25. Salve as alterações no código. O bloco fi cará assim:
26. Volte ao navegador e atualize a página.
27. Após visualizar a página, feche o navegador, a pasta, os arquivos e o Sublime.
17. LINKS ͳ 1
Aprendemos a u lizar a tag <a>, inserindo links na página. Faça as a vidades propostas para colocar em prá ca o seu aprendizado.
1. Para que um fragmento de URL é u lizado?
2. Qual a função do atributo target?
img{ border:3px solid #FF0000; width:512px; height:384px; } Arquivo style.css
Passo a passo:
1. Abra o Sublime Text.
2. Com o programa aberto, abra nele os arquivos "teste.html" e "style.css", presentes den-tro da pasta Testes HTML.
3. No documento HTML posicione o cursor após a abertura da tag <body> e tecle <Enter>. 4. Digite a tag de link: <a href="https://www.google.com">Buscar</a><br> 5. Salve as alterações teclando <Ctrl> + <S>.
6. Minimize a janela do Sublime e abra o arquivo "teste.html"no navegador.
7. Posicione o cursor sobre o link e observe seu caminho na parte inferior da janela. 8. Dê um clique no link.
9. Clique no botão do navegador para voltar à página anterior. 10. Retorne ao Sublime.
11. Após o fi m da tag do primeiro link, tecle <Enter> e digite: <a href="img/img4.jpg" target="_blank">Imagem</a><br>
12. Salve as alterações e atualize a página no navegador.
13. Clique no link da imagem para abri-la em outra aba. 14. Feche a aba com a imagem e volte ao Sublime.
15. Selecione e apague o valor atual do atributo target. No lugar digite: _self 16. Salve as alterações e atualize a página no navegador.
17. Clique no link referente à imagem.
18. Volte à página anterior clicando no botão do navegador. Depois, feche o navegador.
<!DOCTYPE html> <html>
<head>
<title>Teste</title>
<link rel="stylesheet" type="text/css" href="style.css"> </head>
<body>
<a href="https://www.google.com">Buscar</a><br> <a href="img/img4.jpg" target="_blank">Imagem</a><br>
<img src="img/img2.jpg" title="Imagem de Exemplo" height="350" width="350"> </body>
</html>
Inserindo links
19. No Sublime tecle <Ctrl> + <Z> até voltar ao valor _blank em target.
20. Salve as alterações. Depois, feche os arquivos, o Sublime e a pasta Testes HTML.
18. LINKS ͳ 2
Durante esse capítulo aprendemos a u lizar links que levam para a mesma página, além de u -lizar uma imagem como link. A seguir encontram-se alguns exercícios para prá ca.
1. Para que serve o atributo name?
2. O que o atributo target com o valor _blank permite?
Passo a passo:
1. Abra o Sublime Text e o arquivo "teste.html". O arquivo sofreu algumas modifi cações para facilitar o trabalho do usuário.
2. Posicione o cursor após o código da terceira imagem e tecle <Enter>. 3. Digite o tulo: <h2>Bem-vindo</h2>
4. Tecle <Enter> e digite o texto: <p>Bem-vindo ao curso de HTML e CSS.</p> 5. Posicione o cursor após a tag de abertura do tulo <h2> e digite a tag com o atributo:
<a name="chegada">
6. Feche a tag de link, posicionando o cursor antes do fechamento de <h2> e digitando: </a> 7. A linha de código deve fi car assim: <h2><a name="chegada">Bem-vindo</a></h2> 8. Posicione o cursor após a abertura da tag <body> e tecle <Enter>.
9. Digite o link: <a href="#chegada">Bem-vindo</a><br>
10. Salve as alterações no documento. Minimize a janela do Sublime e abra o arquivo"teste. html"no navegador.
<body>
<a href="#chegada">Bem-vindo</a><br>
<a href="https://www.google.com">Buscar</a><br> <a href="img/img4.jpg" target="_blank">Imagem</a><br> <img src="img/img2.jpg" title="Imagem de Exemplo"><br> <img src="img/img6.jpg" title="Imagem de Exemplo"><br> <img src="img/img7.jpg" title="Imagem de Exemplo"><br> <h2><a name="chegada">Bem-vindo</a></h2>
<p>Bem-vindo ao curso de HTML e CSS.</p> </body>
11. Dê um clique no linkBem-vindo.
12. Retorne ao Sublime, posicione o cursor antes da abertura da tag da primeira imagem e digite: <a>
13. Coloque o cursor após o código da primeira imagem e feche a tag de link: </a>
14. Posicione o cursor dentro da tag de abertura do link, tecle <Espaço> e digite o atributo: href="https://images.google.com"
15. Ainda dentro da tag de abertura do link, tecle <Espaço> e digite: target="_blank" 16. O código fi cará assim:
17. Salve as alterações, volte ao navegador e atualize a página. 18. Clique na primeira imagem.
19. Observe o site aberto em uma nova aba. Feche o navegador.
20. Para fi nalizar feche o documento "teste.html"e o Sublime.
<a href="https://images.google.com" target="_blank"> <img src="img/img2.jpg"
title="Imagem de Exemplo"> </a> <br>
Inserindo links
Link aberto em uma nova aba Link Bem-vindo