Síntese da aula anterior Na última aula, aprendemos a utilizar em html: Tabelas Hiperligações Foi também disponibilizado um formulário de ajuda em html com as tags principais Sítio da aula anterior: http://www.marcosoares.com/aia/11/aula_2010_04_16/
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á em: http://www.marcosoares.com/aia/11/aula_2010_04_19/
Exercícios utilizando instruções HTML e técnicas para a colocação e formatação de elementos em páginas web Aula de 2010-04-19
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
Guião da aula Em pares, elabore os seguintes exercícios em HTML: Exercício 1 (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 Notas: Utilize alguns dos conteúdos das aulas anteriores como pistas para a execução dos exercícios Se necessitar consulte os sítios: http://www.marcosoares.com/aia/11/aula_2010_04_16/ajuda_rapida_html.pdf http://www.marcosoares.com/aia/11/aula17.pdf http://www.marcosoares.com/aia/11/aula16.pdf http://www.w3schools.com Aplique as pistas adicionais, apresentadas em seguida, para a elaboração dos exercícios
Guião da aula Exercício 2 (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
Guião da aula Exercício 3 (ex3) Crie duas hiperligações na 1.ª linha: Inicio e Fotos A hiperligação Fotos deve apontar para o documento fotos A hiperligação Inicio deve apontar para o documento inicial
Guião da aula Exercício 4 (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 Exercício adicional Altere os fundos das células ao seu gosto com imagens e/ou cores Altere o fundo de toda a página
Pistas para elaboração dos exercícios Verifique no formulário de html da aula anterior como se pode fazer uma tabela Exemplo de uma tag com um atributo: Atributo align aplicado à tag heading 1 Valor center aplicado ao atributo align <h1 align= center">ola</h1> 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
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
(continuação) Alguns atributos úteis para a tag <td> Unir células: colspan Para unir duas células por exemplo, eliminase uma das td ficando só uma: <td colspan= 2 >
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">