SI Mod2 | pedrolima

AULA 1

Módulo 2 - Linguagens de Programação I

Introdução

A World Wide Web (WWW) está em larga expansão. Na Internet é possível fazer "quase tudo". Ler jornais, aprender à distância, marcar viagens, ver televisão, ouvir rádio e mais uma infindável lista de opções à disposição de um clique. Cada vez mais se torna importante dominar as linguagens de programação Web para singrar neste mundo emergente. Neste módulo, vamos aprender a construir páginas Web através das linguagens HTML, CSS e Javascript.

1. Construção de páginas Web

A internet, quando acedida através de um browser, permite-nos interagir com conteúdos multimédia tais como vídeos, músicas, imagens, animações e muitos outros. A forma como são construídas as páginas Web é na sua essência muito simples. A Internet usa uma linguagem denominada de HTML (Hipertext Markup Language) que se limita a formatar o conteúdo de uma página Web, sendo responsável pelo posicionamento de texto, imagem, vídeo, animações e ainda por estabelecer hiperligações.

Os ficheiros HTML podem apresentar dois tipos de extensões: html ou htm

Hoje em dia, podemos usar a extensão html sem problemas, uma vez que são apenas os sistemas operativos MS-Dos e as versões do Windows a 16 bits as únicas que não suportam extensões com mais de três caracteres.

De seguida encontra-se a estrutura básica de uma página Web.

<html>

<head>

<title>

Título aqui

</title>

</head>

<body>

Olá Mundo!!!

</body>

</html>

AULA 1 - EXERCÍCIO 1

Copie para o Bloco de Notas o código anterior e grave a página como AULA1_1.html

Abra-a com o seu browser e verifique o resultado.

O nome atribuído às palavras entre os sinais de menor e maior < >, denominam-se de tags ou etiquetas <nome da tag>. A zona de aplicação de uma tag situa-se entre a tag de abertura <nome da tag> e a tag de fecho </nome da tag>. Como é visível, qualquer tag de fecho é sempre igual à de abertura precedida de /

Neste módulo, toda a programação deverá ser realizada em bloco de notas (notepad) ou em programas como Notepad++ (Windows) ou Gedit (Linux). A independência do ambiente gráfico é fulcral na aprendizagem dos conteúdos deste módulo e será determinante na qualidade dos futuros programadores.

No capítulo seguinte, abordam-se com maior rigor as funções de cada uma das tags mais importantes em HTML.

1.1 Etiquetas mais comuns em HTML

Como vimos, a estrutura básica de uma página Web pode ser representada apenas por quatro etiquetas (tags). Vejamos para que servem:

<html> indica que se trata de uma página escrita em linguagem HTML. Esta deve abranger todo o código;

<head> tag de cabeçalho. Habitualmente, onde se encontra o título da página que irá ser mostrado na barra de título do web browser. Existem outras tags para além do <title> que podem ser colocadas dentro do cabeçalho, como iremos ver mais à frente;

<title> título da página;

<body> zona onde deve ser colocada toda a informação a ser apresentada na página Web.

Esta são as etiquetas base de um documento html. No entanto, existem muitas mais, que serão apresentadas gradualmente ao longo do módulo.

Todas elas, não são case sensitive, isto é não são sensíveis a caracteres maiúsculos ou minúsculos: (ex: <body> igual a <BODY> igual a <Body>)

RECONHECIMENTO DE CARACTERES ESPECIAIS PORTUGUESES

Para que o HTML reconheça os caracteres especiais portugueses é necessário colocar na <head> o seguinte código:

ou este:
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

Comentários

Os comentários são largamente utilizados pelo programador. Servem como memorando, indicando o que cada parte do código é responsável por fazer, ou para comentar parte do código que não seja necessária a dado momento.

Um comentário é adicionado ao código através da tag

Exemplo:

(...)

<body>

A minha primeira página em bloco de notas!

</body>

(...)

AULA 1 - EXERCÍCIO 2

Copie para "bloco de notas" o código anterior e grave a página como AULA1_2.html

Abra-a com o seu browser e verifique o resultado.

Ao longo deste módulo existirão muitos exemplos que pode copiar para o bloco de notas e verificar o seu resultado. Não se esqueça de no final gravar a sua página com a extensão html. Deve ter, também, em atenção que a maior parte dos exemplos não estão completos, daí existirem (...) antes e depois do código apresentado. Deve sempre completar os exemplos com as tags em falta.

Cor de fundo

Mudar a cor de fundo de uma página Web é uma das primeiras mudanças que qualquer um gosta de realizar. Para o fazermos usamos o atributo bgcolor da tag <body>, embora este possa ser utilizado em outras tags que não esta, como veremos mais à frente. Os atributos são formas de personalizarmos o conteúdo das nossas tags. Neste caso permite-nos mudar a cor de fundo da nossa página.

O atributo bgcolor aceita valores como, palavras entre aspas (blue, red, yellow, green, chocolate, etc) ou valores hexadecimais #461B7E (neste caso seria cor púrpura). Estes valores correspondem ao RGB, isto é, cada grupo de dois dígitos indica o valor para Red, Green e Blue. Assim, no exemplo anterior, R=46, G=1B e B=7E.

Podem aceder ao URL http://www.computerhope.com/htmcolor.htm para obterem mais cores.

Exemplo:

(...)

</body>

(...)

1.2 Propriedades e formatação de páginas Web

A parte mais importante de um site é o seu conteúdo, isto é, a informação textual. Esta informação, à semelhança do que acontece quando escrevemos um texto, necessita de ser formatada. Neste ponto introduzem-se as tags responsáveis pela formatação de texto.

Formatação básica de texto

Seguem-se as tags responsáveis pela formatação básica de texto:

<b> negrito </b>

<i> itálico </i>

<u> sublinhado </u>

<s> rasurado </s>

<sub> índice ex: H2O (o número 2 é o índice) </sub>

<sup> expoente ex: 2n (n é o expoente) </sup>

<big> aumenta um valor ao tipo de letra standard </big>

<small> diminui um valor ao tipo de letra standard </small>

<br> passagem de linha (simula a tecla Enter)

Todas as tags anteriores, com excepção da tag <br> necessitam ser fechadas ou serão aplicadas desde que são abertas até aos final do código HTML.

Exemplo:

(...)

<body>

<b> A minha <s>primeira</s></b> página em <i><u>bloco de notas </u></i><br><b>com uma quebra de linha!</b>

Um monitor de 22" é muito <big><big>grande</big></big> enquanto um monitor de 14" é muito <small><small> pequeno </small></small>.

Posso representar a fórmula química da água H<sub>2</sub>O ou uma potência de 2<sup>n</sup>.

</body>

(...)

Resultado

AULA 1 - EXERCÍCIO 3

Copie para "bloco de notas" o código do exemplo de cima, com o fundo em azul e grave com o nome AULA1_3.html

De seguida abra-o no seu browser para verificar o resultado.

Títulos

Os títulos são as referências do nosso texto. Quando escrevemos um texto os títulos dividem os assuntos tratados ao longo da redacção. Uma página Web funciona da mesma forma. As tags responsáveis pela inserção de títulos são as <h1> até <h6>. Quanto menor a ordem do número, maior o tamanho do título, como se pode verificar no exemplo seguinte:

Exemplo:

(...)

<body>

<h1> Títulos H1 </h1>

<h2> Títulos H2 </h2>

<h3> Títulos H3 </h3>

<h4> Títulos H4 </h4>

<h5> Títulos H5 </h5>

<h6> Títulos H6 </h6>

</body>

(...)

Resultado:

AULA 1 - EXERCÍCIO 4

Copie para "bloco de notas" o código do exemplo de cima, com o fundo em azul e grave com o nome AULA1_4.html

De seguida abra-o no seu browser para verificar o resultado.

Parágrafos

Os parágrafos são representados pela tag <p>. Não necessitam obrigatoriamente da tag de fecho. Contudo, quando esta tag contém atributos deve ser fechada </p>. A tag apresenta como atributo mais importante o align.

Exemplo:

(...)

<body>

<p align="left"> Parágrafo alinhado à esquerda!

<p align="center"> Parágrafo alinhado ao centro!

<p align="right"> Parágrafo alinhado à direita!

<p align="justify"> Parágrafo justificado!

Frase após 3 parágrafos em branco

</body>

(...)

Resultado:

AULA 1 - EXERCÍCIO 5

Copie para "bloco de notas" o código do exemplo de cima, com o fundo em azul e grave com o nome AULA1_5.html

De seguida abra-o no seu browser para verificar o resultado.

AULA 2

Etiqueta Center

Para além de ser possível centrar texto ou objectos com a tag <p align="center">, o mesmo pode ser alcançado com a tag <center>. Desta forma pode-se centrar qualquer objecto ou texto numa página html. A tag tem de ser sempre fechada após a sua utilização.

Espaço em branco

Por mais espaços em branco que se dê entre duas palavras o resultado visível num browser é de apenas um. Para poder dar mais do que esse espaço é necessário introduzir a seguinte sequência de caracteres:  

Apesar de não se tratar de uma tag, nem sequer de um atributo, pode ser usado no código HTML, sem este o confundir com caracteres de uma frase.

Texto pré-formatado

Numa página HTML, independentemente da forma como escrevemos os nossos textos, espaços a mais ou mudanças de linhas não são visualizados (como já se referiu) a não ser que se apliquem as tags ou códigos para esse efeito. Contudo, existe uma tag que nos permite que a formatação do texto apareça no browser tal e qual como está no código HTML.

Para isso, envolvemos o texto que pretendemos na tag <pre>

Exemplo:

(...)

<body>

<pre> Quando pretendo que apareça no browser

exactamente o que escrevo em código

como por exemplo, saltar linhas ou inserir espaços u s o a t a g pre

</pre>

</body>

(...)

Resultado

Formatação avançada de texto

A formatação avançada de texto é possível com a tag <font>.

Através desta podemos alterar o tipo de letra, o seu tamanho ou mesmo a cor de um conjunto de caracteres.

A tag tem de ser obrigatoriamente ser fechada e aceita os seguintes atributos:

face - mudar o tipo de letra

color - mudar a cor da letra

size - mudar o tamanho da letra

Exemplo

(...)

<body>

<font face="Comic Sans MS" color="green" size="15"> Alteração das propiedades da letra! </font>

<body>

(...)

Resultado

Listas

Para ordenarmos um conjunto de itens necessitamos de utilizar listas:

lista ordenada (ordered list) usamos a tag <ol>.
lista não ordenada (unordered list) usamos a tag <ul>.

Ambas necessitam da tag respectiva de fecho.

Dentro de qualquer uma das tags, os itens a ser ordenados devem ser precedidos da sub-tag <li>. Estas não necessitam obrigatoriamente de ser fechadas.

A tag <ol> aceita:

type - tipo de numeração ( 1 | a | A | i )

start - valor a começar a numeração (sempre um valor numérico)

A tag <ul> aceita:

type - tipo de marcas (circle, square)

Exemplo

<html>

<body>

<p>Lista ordenada

<li>HTML

<li>CSS

<li>JavaScript

</ol>

<p>Lista não ordenada

<li>HTML

<li>CSS

<li>JavaScript

</ul>

</body>

</html>

Resultado

Como se pode verificar, a lista ordenada começa na letra "c" visto o atributo start="3", isto é, a 3ª letra do alfabeto. Cada item da lista desordenada é precedido de um quadrado ( type="square" ).

1.3 Integração de imagens

As imagens são dos componentes mais importantes de uma página web. Quando se inserem imagens num web site, devemos preocupar-nos com quem a vai visitar. A espera prolongada para que um site carregue, pode fazer desistir quem os visita. As imagens são as maiores responsáveis por esses atrasos. Deve-se por isso, inserir imagens que ocupem o mínimo de espaço possível em disco, para serem carregadas rapidamente.

Para inserir uma imagem em HTML, usa-se a tag <img src="caminho para a imagem">

Para além do atributo obrigatório src existem outros opcionais:

align - alinhar a imagem no ecrã

border - alterar a espessura da borda à volta da imagem

width - alterar largura da imagem

height - alterar a altura da imagem

Exemplo

<html>

<body>

</body>

</html>

Resultado

Imagem de fundo

As imagens de fundo distinguem-se das anteriores porque não necessitam de uma tag específica para serem introduzidas. Como a imagem irá ocupar toda a página usa-se o atributo background na tag <body>. Este atributo aceita vários tipos de imagens: gif, bmp, jpg, png, etc.

Exemplo

<html>

</body>

</html>

AULA 2 - EXERCÍCIO 1 - formatação de texto

Escreva uma página html, com o seguinte texto:

1º parágrafo: "SISTEMAS DE INFORMAÇÃO" formatando o texto com as seguintes características:

- cor azul,

- tamanho 20

- tipo de letra Verdana.

2º parágrafo: "Módulo 2 - Linguagens de Programação 1" formatando o texto com as seguintes características:

- cor vermelho,

- tamanho 14

- tipo de letra Arial.

Centre também todo o texto na página.

Grave a página como AULA2_1.html e abra-a no seu browser para verificar o resultado.

AULA 2 - EXERCÍCIO 2 - Listas ordenadas e não ordenadas

Escreva uma página html, criando duas listas

- Lista 1: ordenada a começar pela letra "a"

Módulos da disciplina de Sistemas de Informaçãoã

a. Módulo 1 - Redes e Protocolos

b. Módulo 2 - Linguagens de Programação 1

c. Módulo 3 - Linguagens de Programação 2

d. Módulo 4 - Linguagens de Programação 3

e. Módulo 5 - Desenvolvimento de Bases de Dados

f. Módulo 6 - Linguagens de Programação 4

g. Módulo 7 - Linguagens de Programação 5

- Lista 2: não ordenada com pontos (circle) em vez de quadrados.

Ingredientes

100gr manteiga
150gr farinha
300ml água
4 ovos
10ml óleo

Grave a página como AULA2_2.html e abra-a no seu browser para verificar o resultado.

AULA 2 - EXERCÍCIO 3 - imagens/fotos

Escreva uma página html onde deverá inserir uma imagem a seu gosto que exista no seu computador e uma outra imagem que exista remotamente na Internet.

Grave a página como AULA2_3.html e abra-a no seu browser para verificar o resultado.

AULA 3

1.4 Hiperligações

A internet não faria sentido sem o conceito de hiperligação (Hyperlink). Os hiperlinks permitem-nos navegar na Internet de página em página, figura em figura, vídeo em vídeo e muito mais. Na linguagem HTML, existem dois tipos de Hiperlinks, embora os dois utilizem a tag <a>. Esta tag tem obrigatoriamente de ser fechada.

Hiperlinks externos

Para inserirmos um Hiperlink para o exterior em HTML é obrigatório que a referência http:// esteja presente.

Exemplo:

(...)

<body>

<a href="http://www.google.pt"> Site de pesquisa Google </a>

</body>

(...)

No exemplo anterior a frase "Site de pesquisa Google" será o Hiperlink. No entanto, em vez de texto, o Hiperlink poderia ser uma imagem ou vídeo, bastava para isso substituir a frase "Site de pesquisa Google" pelo código de uma imagem ou vídeo, tal como mostra no exemplo seguinte:

Exemplo (com imagem):

(...)

<body>

</body>

(...)

Hiperlinks internos

Existem dois tipos de Hiperlinks internos. Quando pretendemos aceder a uma outra página, imagem ou vídeo presente no nosso Web site, isto é, aceder a ficheiros que se encontram no nosso servidor, a forma de o fazer é similar ao exemplo de cima, apenas com uma ligeira diferença, como se pode verificar no exemplo seguinte:

Exemplo:

(...)

<body>

<a href="outra_pagina"> Outra página </a>

<a href="pasta2/imagem.jpg"> Imagem numa pasta diferente </a>

</body>

(...)

No exemplo anterior, encontram-se dois Hiperlinks. O primeiro para uma página que se encontra no mesmo directório que contém este código HTML.

O seguinte para uma imagem que se encontra numa pasta com o nome "pasta2". A raiz será sempre onde se encontra gravada a página que se está a desenvolver. Quando pretendemos Hiperlinks para outras páginas ou ficheiros, que não se encontrem na mesma pasta que a nossa página, é necessário preceder o nome dessa página ou ficheiro com o caminho até ele (path).

Os tipos de Hiperlinks internos são os que nos levam para diferentes partes do mesmo documento. Este tipo de Hiperlinks é muito utilizado para páginas muito extensas em que os links nos transportam directamente para a zona do documento que pretendemos.

Exemplo:

(...)

<body>

<a href="#texto"> Clicar para ir para a zona da página pretendida </a>

<a name="texto"> Colocar na zona da página que se pretende aceder </a>

</body>

(...)

Como se pode verificar no exemplo anterior é necessário criar uma referência para uma zona algures da página. Assim o atributo href da primeira tag <a> contém o nome da referência onde se encontra a informação pretendida. Esta é precedida de # que indica que esta referência aponta para uma zona na própria página e não para o exterior. Mais abaixo é necessário colocar de novo uma tag <a> com o atributo name igual ao da referência criada (neste caso texto)

Ao clicar no Hiperlink "Clicar para ir para zona da página pretendida" somos levados automaticamente para a zona da página onde diz "Colocar na zona da página à qual se pretende aceder".

1.5 Outras etiquetas

Existem algumas tags que não se enquadram em nenhuma das categorias anteriores mas que merecem algum destaque pela importância que apresentam.

Embed

Esta tag está particularmente na moda. Será suficiente copiar o código de um web site que o disponibilize (ex: youtube, miniclip) e colar juntamente com o vosso código para terem vídeos, jogos ou música no vosso Web site.

Exemplo

(...)

<body>

</embed>

</body>

(...)

Resultado

Linhas horizontais

A tag responsável por criar linhas horizontais é a <hr>. Servem principalmente para dividir os conteúdos de uma página.

Aceita os atributos width, height, size, color e align.

Exemplo:

(...)

<body>

</body>

(...)

Resultado

AULA 3 - EXERCÍCIO 1 - Hiperligações externas com texto e imagens

Escreva uma página em html para criar 2 links para a página do Agrupamento de escolas de Esmoriz http://www.ae-esmoriz-ovarnorte.pt/

1 com o texto "Escola de Esmoriz"

2 com a imagem do logotipo do agrupamento.

Grave a página como AULA3_1.html e abra-a no seu browser para verificar o resultado.

AULA 3 - EXERCÍCIO 2 - Hiperligações para ficheiros externos

Escreva uma página em html para criar um link para uma página que tenha feito anteriormente, por exemplo, para o exercício anterior.

Grave a página como AULA3_2.html e abra-a no seu browser para verificar o resultado.

AULA 3 - EXERCÍCIO 3 - Hiperligações internas

Escreva uma página em html como um texto muito extenso. Use o código para aceder a uma parte desse texto através de um link interno.

Grave a página como AULA3_3.html e abra-a no seu browser para verificar o resultado.

AULA 3 - EXERCÍCIO 4 - Videos

Escreva uma página em html onde coloque um video do youtube ao seu gosto, com 480 de largura (width) e 380 de altura (height)

Grave a página como AULA3_4.html e abra-a no seu browser para verificar o resultado.

AULA 3 - EXERCÍCIO 5 - Linhas horizontais

Escreva uma página em html como 4 linhas horizontais, de acordo com as seguintes características:

- Linha 1: 50% de comprimento / azul / tamanho 4 / alinhamento ao centro

- Linha 2: 80% de comprimento / amarelo / tamanho 1 / alinhamento à esquerda

- Linha 3: 50% de comprimento / verde / tamanho 8 / alinhamento ao centro

- Linha 4: 80% de comprimento / vermelho / tamanho 12 / alinhamento ao direita

Grave a página como AULA3_5.html e abra-a no seu browser para verificar o resultado.

TRABALHO AVALIAÇÃO nº.1

Construa uma página HTML que apresente um poema ou letra de uma musica; o texto tem que estar centrado e no fim da página insira a fotografia do autor e o respectivo nome.

A página tem que ter:

Um título de página (tal como mostra no separador "Poema de Florbela Espanca";
O título (usar a tag de título <h1>) do poema/letra da música centrado na página;
O poema/música da música em itálico e centrado na página;
A imagem do autor/grupo (usar a tag <img src="nome.ext"/> ) centrada na página;
O nome do do autor/grupo depois da imagem centrado na página;
Um padrão repetido como fundo.

Download de padrões de fundo gratuitos:
http://pattern8.com/
http://www.squidfingers.com

Grave a página como AVALIAÇÃO_1.html e abra-a no seu browser para verificar o resultado

Exemplo

AULA 4

2. UTILIZAÇÃO E FORMATAÇÃO DE TABELAS

Quando pretendemos arrumar a "tralha" que temos em casa o que fazemos? Bem, ou optamos por colocar na garagem ou arrecadação, onde tudo ficará empilhado e desarrumado, ou colocamos num armário com prateleiras.

As tabelas em HTML não são mais que um "armário de prateleiras" onde colocamos a informação gráfica para que fique "arrumadinha". Sem tabelas tudo ficaria "empilhado" e sem formatação.

As tabelas são muitas vezes (quase sempre) a base de uma página Web, a sua estrutura.

A tag que a representa é <table> e tem de ser obrigatoriamente fechada.

As sub-tags que podem ser utilizadas dentro desta tag são as seguintes:

<tr> sub-tag inserida dentro da tabela representando uma linha

<th> sub-tag inserida dentro da tabela representando o cabeçalho de uma coluna

<td> sub-tag inserida dentro da tabela representando os dados de uma coluna (representa uma célula da tabela)

Os atributos suportados por estas tags encontram-se de seguida:

bordercolor - alterar a cor da borda da tabela;

bgcolor - alterar a cor de fundo de uma célula ou de toda a tabela

background - inserir uma imagem de fundo numa célula ou em toda a tabela

align - alinhar horizontalmente o conteúdo de uma célula ou alinhar toda a tabela

valign - alinhar verticalmente o conteúdo de uma célula

width - alterar a largura de uma célula ou de toda a tabela

height - alterar a altura de uma célula ou de toda a tabela

rowspan - juntar duas ou mais linhas numa só célula

colspan - juntar duas ou mais colunas numa só célula

Exemplo 1:

(...)

<body>

<tr> <th> Cabeçalho 1 <th> Cabeçalho 2

<tr> <td> Célula 1 <td> Célula 2

</table>

</body>

(...)

Resultado:

A tabela anterior é muito simples, constituída por duas linhas (<tr>), um cabeçalho (<th>) e duas colunas (<td>).

Por vezes necessitamos de construir uma tabela um pouco mais complexa que a anterior. Quando usamos um editor de HTML, construir uma tabela torna-se mais fácil, uma vez que podemos usar a opção unir (merge) células. Mas como fazer isso em programação? No exemplo seguinte aborda-se um caso destes.

Exemplo 2:

(...)

<body>

<tr height="100"> <td colspan="2" align="right" bgcolor="yellow"> Esta é a célula 1

<tr> <td rowspan="2" valign="top" bgcolor="cyan"> Esta é a célula 2 <td> Esta é a célula 3

<tr bgcolor="green"> <td> Esta é a célula 4

</table>

</body>

(...)

Resultado:

O truque para construir algo semelhante passa por olhar para a tabela e identificar o número total de linhas e colunas, no caso de nenhuma delas se encontrar unida. Assim, através da figura facilmente se conclui que existem no total 2 colunas e 3 linhas.

A célula 1 ocupa as duas colunas mas apenas uma linha, logo foi necessário unir duas colunas, conseguindo através de colspan="2"

Por outro lado, a célula 2 ocupa duas linhas mas apenas uma coluna, tendo-se unido as duas linhas através de rowspan="2".

O exemplo seguinte mostra como podemos utilizar tabelas para criar a estrutura base do nosso site.

Exemplo 3:

(...)

<body>

<tr height="100"> <td colspan="2"> Logotipo do Site

<tr> <td rowspan="2"> Menu <td width="350"> Submenu ou localização

<tr height="350"> <td> Informação

<tr> <td colspan="2"> <p align="right"> Rodapé: Assinatura, @Copyright, Contactos, Informações, etc. </p>

</table>

</body>

(...)

Resultado:

AULA 4 - EXERCÍCIO 1

No "bloco de notas", crie uma página html com uma tabela com 5 colunas e 4 linhas.

Título das colunas (cabeçalho da tabela) com a cor de fundo em azul: Nome; Cartão de Cidadão; Data Nascimento; Turma; Ano Escolaridade.

Nas restantes 3 linhas preencha com dados de colegas da turma.

Grave a página como AULA4_1.html e abra-a no seu browser para verificar o resultado

AULA 4 - EXERCÍCIO 2

No "bloco de notas" crie uma página html com a estrutura da sua página baseada em tabelas.

Grave a página como AULA4_2.html e abra-a no seu browser para verificar o resultado.

AULA 5

AULA 5 - EXERCÍCIO 1

1- Abra o editor de texto (bloco de notas)

2- Aplique os conhecimentos adquiridos nas aulas para obter a tabela que se segue.

3- Grave a página como AULA5_1.html e abra-a no seu browser para verificar o resultado.

AULA 5 - EXERCÍCIO 2

1- Abra o editor de texto (bloco de notas)

2- Aplique os conhecimentos adquiridos nas aulas para obter a tabela que se segue.

Dica: Deve usar o COLSPAN e o ROWSPAN

3- Grave a página como AULA5_2.html e abra-a no seu browser para verificar o resultado.

AULA 5 - EXERCÍCIO 3

1- Abra o editor de texto (bloco de notas)

2- Aplique os conhecimentos adquiridos nas aulas para obter a tabela com as seguintes características:

Limites (Border) = 3
Altura da tabela (height) = 50%
Largura da tabela (width) = 50%
Cores:
- Cor de fundo da tabela #99FF00
- 1ª célula #CCFF00
- 2ª célula #0099FF
- 3ª célula #FF66CC
- 4ª célula #00CCCCFF

3- Grave a página como AULA5_3.html e abra-a no seu browser para verificar o resultado.

AULA 5 - EXERCÍCIO 4

1- Abra o editor de texto (bloco de notas)

2- Aplique os conhecimentos adquiridos nas aulas para obter a tabela com as

seguintes características:

Limites (Border) = 3
Altura de cada célula (height) = 145
Largura de cada célula (width) = 150
Imagem centrada nas células

3- Grave a página como AULA5_4.html e abra-a no seu browser para verificar

o resultado.

AULA 5 - EXERCÍCIO 5

1- Abra o editor de texto (bloco de notas)

2- Aplique os conhecimentos adquiridos nas aulas para obter a seguinte tabela

3- Grave a página como AULA5_5.html e abra-a no seu browser para verificar o resultado.

TRABALHO DE AVALIAÇÃO nº.2

1. Abra o seu editor de texto.

Aplique os conhecimentos adquiridos nas aulas para obter uma página Web idêntica à da figura que se segue:

2. Grave a página como AVALIAÇÃO_2.html e abra-a no seu browser para verificar o resultado.

Dica

Como procurar imagens com o mesmo tamanho como por exemplo 180x120

TRABALHO DE AVALIAÇÃO nº.3

1. Abra o seu editor de texto.

Aplique os conhecimentos adquiridos nas aulas para obter uma página Web idêntica à da figura que se segue:

Dicas para a realização do trabalho:

A figura alusiva ao planeta Terra encontra-se disponível no URL: http://homepage.univie.ac.at/ralph.hinsch/archive/world256sm25.gif

A mesma figura (do planeta Terra) tem um Hiperlink para a página www.google.pt

Na definição de HTML a abreviatura WWW contida na frase mantém os atributos do restante texto, apenas mudando a sua cor para verde.

O pedaço da frase descrita como "imagens, formulário, alteração de fontes" encontra-se no tamanho 5, cor vermelha e tipo de letra Arial.

As linhas horizontais têm espessura 3 e cor amarela. Uma delas ocupa 50% da página Web e a outra ocupa 100%. Deverá utilizar a tag <hr>

2. Grave a página como AVALIAÇÃO_3.html e abra-a no seu browser para verificar o resultado.

AULA 6

6. Utilização de frames e iframes

6.1 Frames

É possível dividir a nossa página em várias páginas distintas, isto é, muitas páginas a serem mostradas ao utilizador em simultâneo, sem que este se aperceba disso. Com a ajuda das frames é possível dividir a página, como se de uma tabela com células independentes se tratasse.

A tag responsável pela inserção de frames é a <frameset> e deve ser inserida após a tag </head> e antes da tag <body> (ver exemplo seguinte).

Nesta tag define-se o número de frames que serão adicionados à página.

Cada um deles será então precedido da tag <frame>. Após a declaração dos frames, a tag <frameset> tem de ser fechada </frameset>

Antes de passarmos a um exemplo, vejamos os atributos aceites pelas tags <frameset> e <frame>.

TAG <frameset>

rows - atributo da tag frameset que define frames em forma de linha;

cols - atributo da tag frameset que define frames em forma de coluna.

TAG <frame>

name - atribuir um nome ao frame;

scrolling - permite visualizar, ou não, a barra de movimento horizontal/vertical (scrolling);

noresize - permite ao utilizador alterar ou não o tamanho dos frames;

frameborder - permite mostrar ou omitir a borda;

bordercolor - permite alterar a cor da borda;

marginwidth - permite definir o valor em pixéis (px) da margem lateral;

marginheight - permite definir o valor em pixéis (px) da margem superior.

Exemplo 1 (index.html)

(...)

</head>

</frameset>

<body>

(...)

Resultado

No exemplo anterior foram definidos dois frames em forma de coluna na tag <frameset>, ocupando o primeiro, 15% da largura do ecrã e o segundo 85%. A soma das frames deve sempre totalizar os 100%.

Para este exemplo, foi necessária a criação de três páginas distintas. Duas para os frames e uma principal (index.html) para chamar as restantes. Para esse efeito, as páginas frame1.html e frame2.html encontravam-se no mesmo directório da index.html (página onde se encontra o código do exemplo1)

Exemplo 2 (index.html)

(...)

</head>

</frameset>

<body>

(...)

Resultado

Neste caso, foram definidas três frames em linha que são chamados pela página index.html. A introdução de um asterisco (*) em vez de um valor em percentagem para a segunda frame, indica que este terá o tamanho que faltar para atingir os 100%, isto é, somando os outros frames 40% + 25% = 65% pelo que o frame do meio ocupará 100% - 65% = 35%

Exemplo 3

(...)

</head>

</frameset>

<body>

(...)

Resultado

No exemplo anterior, a página é dividida em duas colunas onde uma delas (direita) tem duas linhas. As bordas deixam de aparecer devido ao atributo frameborder="0" da tag <frameset>

Apesar de tudo o que foi referido anteriormente, a utilização de frames está gradualmente a desaparecer. Outras linguagens associadas ao HTML (como CSS que iremos ver mais à frente) permitem obter resultados que ultrapassam largamente as possibilidades dos frames em HTML.

3.2 iFrames

Os iframes distinguem-se dos frames, visto serem declarados inline, podendo ocupar apenas uma porção da nossa página principal.

A tag responsável um inline frame é a <iframe>, que tem obrigatoriamente de ser fechada.

Os atributos que esta tag aceita são os seguintes:

width - definir a largura ocupada pelo iframe;

height - definir a altura ocupada pelo iframe;

frameborder - atributo da tag frame para mostrar ou omitir a borda.

Vejamos o exemplo seguinte:

(...)

<h2> Fotografia </h2>

<h7> Tema: Natureza </h7>

<br>

</iframe>

</center>

</body>

(...)

Resultado

AULA 6 - EXERCÍCIO 1,2 e 3

Deverá realizar cada um dos 3 exemplos das Frames:

- Exemplo 1 - Grave a página como AULA6_1.html

- Exemplo 2 - Grave a página como AULA6_2.html

- Exemplo 3 - Grave a página como AULA6_3.html

AULA 6 - EXERCÍCIO 4

Criar uma página html com a utilização de iFrames, tal como mostra no exemplo do ponto 3.2

- Título com <h1>

- Subtítulo com <h6>

- iFrame com tamanho 800x600 e respectiva imagem à sua escolha.

Grave a página como AULA6_4.html e abra-a no seu browser para verificar o resultado.

TRABALHO DE AVALIAÇÃO nº.4

Elabore um álbum de fotografias (qualquer tema ao seu gosto), com o mesmo formato do que é apresentado no exemplo em baixo.

Deverá conter os seguintes elementos:

1. Cabeçalho da página "Fotografia - Nome do Aluno"

2. Imagem de fundo tipo padrão (ver por exemplo em www.pattern8.com ou pesquisar "padrões de fundo diretamente no Google Imagens)

3. Usar os seguintes botões para escolher cada imagem (podes fazer o download destes números)

4. Usar uma iframe com as 9 imagens/fotografias (estas imagem/fotografias deverão ser descarregadas da Internet com 800x600 de resolução)

Ver na imagem seguinte como deve pesquisar imagens com tamanho exacto de 800x600

Funcionamento da página

Ao clicar em cada um dos botões deverá surgir na iFrame uma fotografia diferente.

Dicas:

...

<br>

</iframe>

EXEMPLO:

TRABALHO DE AVALIAÇÃO nº.5

Elabore um álbum de fotografias (qualquer tema ao seu gosto), com o mesmo formato do que é apresentado no exemplo em baixo.

Deverá conter os seguintes elementos:

1. Cabeçalho da página com título (por exemplo "Fotos da Natureza")

2. Fundo com a cor "Black" (ou outra a teu gosto)

3. Imagens em formato mais pequeno.

Cada imagem pequena que está na tabela tem a dimensão de 45x30

Sugestão: poderá usar uma tabela com 1 linha e X colunas (tantas quantas as fotos)

4. Ao clicar em cada imagem pequena da tabela abrir na iFrame geral

5. Usar uma iframe com as imagens/fotos (estas imagem/fotos deverão ser descarregadas da Internet com 800x600 de resolução)

Funcionamento da página

Ao clicar em cada uma das imagens/fotos deverá surgir na iFrame uma fotografia diferente.

Dicas:

<table>

<tr>

......

</table>

<br>

</iframe>

EXEMPLO:

TRABALHO DE AVALIAÇÃO nº.6

Crie um Website com as 4 categorias de animais clássicas:

Mamíferos
Aves
Peixes
Répteis

Deve utilizar uma frame onde serão mostrados os documentos de cada categoria de animais.

Funcionamento da página

Ao clicar em cada uma das categorias, deverá surgir na Frame uma tabela com os animais dessa categoria.

Dica:

Este trabalho será composto por 5 ficheiros html:

- index.html (onde estão apenas definidas as frames)

- menu.html (onde está o menu com os links para cada categoria)

- mamiferos.html (tabela com os animais deste tipo)

- aves.html (tabela com os animais deste tipo)

- peixes.html (tabela com os animais deste tipo)

- repteis.html (tabela com os animais deste tipo)

index.html

<html>

<head>

<title> Trabalho de avaliação nr.6 </title>

</head>

</frameset>

<body>

</body>

<html>

EXEMPLO:

AULA 1

Módulo 2 - Linguagens de Programação I

Introdução

1. Construção de páginas Web

AULA 1 - EXERCÍCIO 1

1.1 Etiquetas mais comuns em HTML

​

AULA 1 - EXERCÍCIO 2

1.2 Propriedades e formatação de páginas Web

​

AULA 1 - EXERCÍCIO 3

AULA 1 - EXERCÍCIO 4

AULA 1 - EXERCÍCIO 5

AULA 2

​

1.3 Integração de imagens

Imagem de fundo

AULA 2 - EXERCÍCIO 1 - formatação de texto

AULA 2 - EXERCÍCIO 2 - Listas ordenadas e não ordenadas

AULA 2 - EXERCÍCIO 3 - imagens/fotos

AULA 3

1.4 Hiperligações

​

1.5 Outras etiquetas

​

​

AULA 3 - EXERCÍCIO 1 - Hiperligações externas com texto e imagens

​

AULA 3 - EXERCÍCIO 2 - Hiperligações para ficheiros externos

AULA 3 - EXERCÍCIO 3 - Hiperligações internas

AULA 3 - EXERCÍCIO 4 - Videos

AULA 3 - EXERCÍCIO 5 - Linhas horizontais

TRABALHO AVALIAÇÃO nº.1

​

AULA 4

2. UTILIZAÇÃO E FORMATAÇÃO DE TABELAS

​

AULA 4 - EXERCÍCIO 1

AULA 4 - EXERCÍCIO 2

AULA 5

TRABALHO DE AVALIAÇÃO nº.2

​

TRABALHO DE AVALIAÇÃO nº.3

​

AULA 6

6. Utilização de frames e iframes

6.1 Frames

3.2 iFrames

AULA 6 - EXERCÍCIO 1,2 e 3

AULA 6 - EXERCÍCIO 4

TRABALHO DE AVALIAÇÃO nº.4

TRABALHO DE AVALIAÇÃO nº.5

TRABALHO DE AVALIAÇÃO nº.6