Síntese da aula anterior Na última aula, aprendemos a utilizar em html: Tabelas Hiperligações 1
O que vamos fazer hoje? Vamos utilizar o que aprendemos da aula anterior juntamente com Utilização de imagens através de html Formatação de imagens em html Utilização de novas tags tais como (<img>) Utilização de novos atributos tais como (valign) para criar um ficheiro em HTML que inclua todos estes conceitos O resultado final está nos diapositivos seguintes 2
Resultado 3
Resultado 4
Exercícios utilizando instruções HTML e técnicas para a colocação e formatação de elementos em páginas web Aula de 2013-05-27 5
Competências a desenvolver na aula Conhecer as instruções HTML e as técnicas para a colocação e formatação de elementos em páginas web Utilizar tabelas Definir propriedades das tabelas, linhas, colunas e células Utilizar imagens através de html Formatar imagens através de html Utilizar hiperligações 6
Guião da aula Em pares, elabore os seguintes exercícios em HTML: Exercício 1 (Carregue aqui para ver o resultado: ex1) Crie um documento em html chamado ex1.html Coloque como título na página web o seu nome Crie uma tabela com 2 colunas e 2 linhas A borda da tabela deve ser de tamanho: 1 Formate a tabela de forma a ter 700 pixéis de largura e 330 de altura Formate a 1.ª coluna de forma a ter 150 pixéis de largura Formate a 1.ª linha de forma a ter 70 pixéis de altura 7 Notas: Utilize o documento de ajuda: http://www.marcosoares.com/lagoa/10i/ajuda_rapida_html.pdf Aplique as pistas adicionais, apresentadas a partir do diapositivo 12, para a elaboração dos exercícios
Guião da aula Exercício 2 ( Carregue aqui para ver o resultado: ex2) Formate a célula inferior da esquerda de forma a ficar alinhada ao centro horizontalmente e alinhada ao topo verticalmente Adicione na célula inferior esquerda o texto Experiência Formate a célula inferior direita de forma a o seu conteúdo ficar alinhado horizontalmente ao centro Adicione na célula inferior direita o texto: Bem vindo à minha página web Una as 2 células superiores 8
Guião da aula Exercício 3 (Carregue aqui para ver o resultado: ex3) Crie duas hiperligações na 1.ª linha: Início e Fotos A hiperligação Fotos deve apontar para o documento fotos A hiperligação Início deve apontar para o documento inicial 9
Guião da aula Exercício 4 (Carregue aqui para ver o resultado: ex4) Faça uma cópia do ficheiro do último exercício criado e altere o nome para fotos.html Altere o ficheiro fotos.html de forma a ter a imagem avaliacao.gif na célula inferior direita invés do texto Bem vindo à minha página web 10
Exercícios adicionais Altere os fundos das células ao seu gosto com imagens e/ou cores Para descobrir como fazer isso, pesquise no google por: alterar fundo tabela html alterar fundo célula html Altere o fundo de toda a página Altere os estilos dos textos utilizados Consulte o site: http://www.novaz.com.br/blog/2010/11/usingcss-text-shadow-to-create-cool-text-effects/ Ou pesquise por efeitos texto css no Google 11
Pistas para elaboração dos exercícios Utilize o documento de ajuda: http://www.marcosoares.com/lagoa/10i/ajuda_rapida_html. pdf Exemplo de uma tag com um atributo: Atributo align aplicado à tag heading 1 Valor center aplicado ao atributo align <h1 align="center">ola</h1> 12 Texto Ola que ficará com Tag heading 1 a formatação heading 1 Fecho datag heading 1
Pistas para elaboração dos exercícios Alguns atributos úteis para utilizar com a tag <table> Largura: width Altura: height Borda: border Alinhar horizontalmente: align 13
Pistas para elaboração dos exercícios Alguns atributos úteis para a tag <td> Altura: height Largura: width Alinhamento vertical: valign Alguns valores possíveis para o valign: Topo: top Meio: middle Baixo: bottom 14
Pistas para elaboração dos exercícios Exemplo duma tabela em que uma célula está formatada para uma altura de 100, largura de 200, alinhamento horizontal ao centro e alinhamento vertical ao meio <table border="1"> <tr> <td height="100" width="200" align="center" valign="middle">1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </table> 15
Pistas para elaboração dos exercícios (continuação) Alguns atributos úteis para a tag <td> Unir células: colspan Para unir duas células, por exemplo, elimina-se uma das td, ficando só uma: <td colspan="2"> 16
Pistas para elaboração dos exercícios Exemplo de uma hiperligação <a href="ola.html">isto é uma hiperligação</a> Exemplo de uma imagem <img src="ola.gif" width="375" height="400"> 17