Síntese da aula anterior

Transcrição

1 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:

2 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:

3 Exercícios utilizando instruções HTML e técnicas para a colocação e formatação de elementos em páginas web Aula de

4 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

5 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: Aplique as pistas adicionais, apresentadas em seguida, para a elaboração dos exercícios

6 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

7 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

8 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

9 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

10 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

11 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

12 (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 >

13 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">