2 - Exercicio de HTML

UFCD|Mdulo
1
Curso co-financiado por:

Srgio Varela
html
Objetivos:
Criao de um site simples utilizando cdigo html
Escrita manual de cdigo
Insero de texto e imagens
hiperligaes

Tarefa 1

Criao a estrutura de pginas
Com o objetivo de criar um site html composto de 4 pginas, comece por criar os 4
ficheiros html base: abra o Notepad e crie 4 novos documentos. Faa "guardar como.."
as de cada um deles com os seguintes nomes:
home.htm
principal.htm
tecnologias.htm
multimedia.htm
No se esquea de alterar a extenso de .txt para .htm. Note que os ficheiros ainda
no tm qualquer cdigo, pelo que, caso os abra no browser, visualizar pginas em
branco. Os quatros ficheiros devem ser guardados na raiz da pasta.

Tarefa 2

Criao da Home Page (home.htm)
Abra o Notepad e no menu File>Open, abra o ficheiro home.htm
Comece por inserir o cdigo base, especificando, no header, o ttulo desta pgina:

<html>
<head>
<title>home page do site 2 de html</title>
</head>
<body>
</body>
</html>

Por forma configurar as opes de cor dos textos e links a inserir posteriormente nesta
pgina, insira no TAG <body> os seguintes atributos:

<body text="#000000" link="#000000" vlink="#666666"
alink="#999999">

UFCD|Mdulo

2

Srgio Varela
Por forma centrar todos os contedos a inserir posteriormente na pgina, insira dentro
do <body> um novo TAG: <div align="center"> </div>

<body link="#000000" vlink="#666666" alink="#999999">
<div align="center">
</div>
</body>
...

No sentido de espaar os contedos a inserir relativamente ao topo da pgina insira,
depois do TAG <div align> 5 quebras de pginas :

 
...

Imediatamente a seguir s quebras de pginas, insira a imagem mao_pedido.jpg que
se encontra na pasta imagens do directrio em que est a trabalhar:

 
<img src="imagens/mao_pedido.jpg">
...

Por forma a assegurar um link para a pgina principal.htm, a partir da imagem
inserida, insira o TAG <a href> </a>, assim como os atributos de border=0 e
alt=entrar (no TAG <img src>):

 
<a href="principal.htm"> <img src="imagens/mao_pedido.jpg"
alt="entrar" border="0"> </a>
...

Abaixo da imagem, insira uma quebra de pargrafo e imediatamente a seguir o
texto: entrar. Este texto deve ter os atributos de size=2 e face=Verdana (que
surgem dentro do TAG ). O texto entrar dever assegurar tambm uma ligao
pgina principal.htm, pelo que dever surgir dentro de um <a href>:

alt="entrar" border="0"> </a>

<a
href="principal.htm">entrar</a>
...
Com o intuito de espaar este ltimo texto inserido com um novo texto que surgir
mais abaixo,
insira agora 8 quebras :

UFCD|Mdulo

3

Srgio Varela

<a
href="principal.htm">entrar</a>
 
...

Por fim, insira o texto: 2 experincia de html | CONCLUSO, com os seguintes
atributos: size=1, face=verdana:

 
 2 experincia de html |
CONCLUSO 
...

Guarde o seu documento e visualize-o no seu Browser (File>Open no Browser)

Tarefa 3

Criao da pgina Principal (principal.htm)
3.1 Abra duas vezes o Notepad: num abra o ficheiro home.htm e noutro o ficheiro
principal.htm. Copie o cabealho (at ao TAG <div>) e rodap do cdigo que inseriu
no ficheiro home.htm
para o ficheiro principal.htm. Altere apenas o texto do ttulo para pgina principal do
site 1 de html:

<html>
<head>
<title>pgina principal do site 1 de html</title>
</head>
alink="#999999">
<div align=center>
</div>
</body>
</html>

Feche o Notepad onde abriu o ficheiro home.htm. Mantenha apenas o ficheiro
principal.htm aberto no notepad.

Com o objectivo de organizar a composio visual dos contedos a introduzir nesta
pgina, vamos construir uma tabela que funcionar com grelha (invisvel, ie, sem

UFCD|Mdulo

4

Srgio Varela
bordo). A tabela surgir centrada (div align =center) no ecr e ter 500 pixeis de
largura, e duas linhas (<tr>), cada uma com duas cluas (<td>):

Para introduzir a tabela no cdigo, utilizamos o TAG <table>, imediatamente a seguir
ao <div>

<div align=center>
<table width="500" border="0" align="center">
</table>

Dentro da tabela, importa agora especificar as duas linhas <tr>:

<tr> </tr>
<tr> </tr>

Dentro de cada linha <tr>, introduzem-se cada uma das duas clulas <td>. A Primeira
clula da primeira linha (com 150 pixeis de largura e 40 de altura) no conter
qualquer contedo:

<tr> <td width="150" height="40"> </td> </tr>

Note que o texto clula vazia no ser visvel no browser j que foi inserido como
comentrio de cdigo.

Na segunda clula da primeira linha (com 350 pixeis de largura e 40 de altura) vamos
introduzir o menu de navegao ( 3 saltos hipertextuais).
O texto a introduzir ser: home | sobre tecnologias da comunicao | sobre
multimdia |. O texto home assegura o salto para o ficheiro home.htm; o texto
sobre tecnologias da comunicao assegura o salto para o ficheiro tecnologias.htm;
o texto sobre multimdia assegura o salto para o ficheiro multimedia.htm:

<tr> <td width="150" height="40"> </td> </tr>
<td width="350" height="40"> 

UFCD|Mdulo

5

Srgio Varela
<a href="home.htm"> home </a> |
<a href="tecnologias.htm"> sobre tecnologias da comunicao </a>
|
<a href="multimedia.htm"> sobre multimdia </a>

</td>
</tr>

Ficou concluda a primeira linha.

Na segunda linha, na primeira clula (com 150 pixeis de largura) introduza a imagem
mm-finger.jpg que se encontra na pasta imagens:

</td>
</tr>
<tr>
<td width="150" valign="top"> <img src="imagens/mm-finger.jpg"
align="top"> </td>

Ainda na segunda linha, na segunda clula (com 350 pixeis de largura) vamos
introduzir um texto que apresenta o site. O texto ter um ttulo a bold e no final, depois
de trs quebras de texto, surgir uma linha com a filiao do site. O texto est
disponvel na pasta textos:

<td width="150" valign="top"> <img src="imagens/mm-finger.jpg"
align="top"> </td>
<td width="350">primeira
experncia 
Esta a primeira experincia de criao de pginas em html. 
A edio do cdigo em notepad e gravao com extenso .htm
permite a
visualizao das pginas num browser web.
Este pequeno site inclui imagens, textos e hiperligaes
internas e externas.
Incluem-se duas pginas de contedos principais: uma sobre as
novas tecnologias da comunicao e outra sobre a
multimdia.
 
1 experincia de html |
multimdia

</td>
</tr>

Terminou a insero de cdigo. Guarde o seu ficheiro e visualize-o no browser
(File>Open no
Browser):

UFCD|Mdulo

6

Srgio Varela

Tarefa 4

Criao da pgina Multimdia (multimedia.htm)

Abra duas vezes o Notepad: num abra o ficheiro principal.htm e noutro o ficheiro
multimedia.htm.
Copie a totalidade do cdigo do ficheiro principal.htm para o ficheiro
multimedia.htm.
Feche o ficheiro principal.htm, mantendo aberto no Notepad apenas o ficheiro
multimedia.htm.
Comece por alterar o ttulo:

<html>
<head>
<title>pgina de multimdia do site 2 de html</title>
</head>

Na primeira clula da segunda linha, localize o TAG <img src> e substitua a imagem
mmfinger. jpg pela imagem rato.jpg (tambm disponvel na pasta Imagem:

<td width="150" valign="top"> <img src="imagens/rato.jpg"
align="top"> </td>

Na segunda clula da segunda linha, localize o TAG e substitua o ttulo
() para multimdia . Mantenha a quebra e seguidamente substitua o
texto pelo texto sobre multimdia que se encontra disponvel na pasta Textos.
Mantenha a linha final sobre a filiao:

<td width="350"> 
Multimdia 
De acordo com Fetterman & Grupta (1993), o conceito multimdia
restringe-se a aplicaes que (...)utilizador por um computador
ou por outro meio electrnico".
 
...

Terminou a pgina de Multimdia. Faa gravar e visualize no browser:

UFCD|Mdulo

7

Srgio Varela

Tarefa 5

Criao da pgina Tecnologias da Comunicao (tecnologias.htm)
Abra duas vezes o Notepad: num abra o ficheiro principal.htm e noutro o ficheiro
tecnologias.htm.
Copie a totalidade do cdigo do ficheiro principal.htm para o ficheiro
tecnologias.htm.
Feche o ficheiro principal.htm, mantendo aberto no Notepad apenas o ficheiro
tecnologias.htm
Comece por alterar o ttulo:

<html>
<head>
<title>pgina de tecnologias da comunicao do site 2 de
html</title>
</head>

Na primeira clula da segunda linha, localize o TAG <img src> e substitua a imagem
mmfinger.
jpg pela imagem mao_livro.jpg (tambm disponvel na pasta Imagem:

<td width="150" valign="top"> <img src="imagens/mao_livro.jpg"
align="top"> </td>

Na segunda clula da segunda linha, localize o TAG e substitua o ttulo
() para
Tecnologias da Comunicao. Mantenha a quebra e seguidamente substitua o
texto pelo texto sobre Tecnologias da Comunicao que se encontra disponvel na
pasta Textos. Mantenha a linha final sobre a
filiao:

Tecnologias da Cominicao 
Chamam-se de Novas Tecnologias de Informao e Comunicao
(NTICs) as tecnologias e mtodos para comunicar surgidas no
contexto da Revoluo Informacional, "Revoluo Telemtica" ou
Terceira (...)na sociedade estruturada em redes telemticas.

UFCD|Mdulo

8

Srgio Varela

 

Com o intuito de incluir um link (no final do texto) que permita regressar ao incio da
pgina,
insira uma ncora (com o nome topo) no incio do documento (a seguir ao TAG
<body>):

alink="#999999">
<a name="topo"></a>

Crie agora o link (para a ncora topo) no final do texto sobre Tecnologias da
Comunicao, antes das trs quebras
finais. O texto do link dever ser: voltar ao texto da pgina e este dever ser a
size=1:

na sociedade estruturada em redes telemticas.

<a href="#topo">voltar ao topo da
pgina</a>
 
multimdia 
...
Terminou o site. Faa gravar e visualize todo site no browser.

cdigos

home.htm
<html> <head> <title>home page do site 1 de html</title> </head>
alink="#999999">
 
alt="entrar" border="0"> </a> 
<a href="principal.htm">entrar</a>
 
 2 experincia de html |
CONCLUSO 
</div> </body> </html>

UFCD|Mdulo

9

Srgio Varela
principal.htm
<html> <head> <title>pgina principal do site 2 de html</title>
</head>
alink="#999999">
<tr> <td width="150" height="40"> </td>
<td width="350" height="40"> <a
href="home.htm"> home </a> | <a href="tecnologia.htm">
sobre tecnologias da comunicao </a> | <a
href="multimedia.htm"> sobre multimedia </a> </td> </tr>
<tr> <td width="150" valign="top"> <img src="imagens/mm-
finger.jpg" align="top"> </td>
<td width="350"> primeira
experncia 
Esta a primeira experincia de criao de (...)e outra sobre a
multimdia.
 
1 experincia de html | CONCLUSO
 </td> </tr>
</table>

multimedia.htm
<html> <head> <title>pgina de multimdia do site 2 de
html</title> </head>
alink="#999999">
<tr>
<td width="150" height="40"> </td>
<td width="350" height="40"> 
<a href="home.htm"> home </a> |
<a href="tecnologias.htm"> sobre tecnologias da comunicao </a>
|
<a href="multimedia.htm"> sobre multimdia </a>

</td>
</tr>
<tr>
<td width="150" valign="top"> <img src="imagens/rato.jpg"
align="top"> </td>
multimdia 
De acordo com Fetterman & Grupta (1993), o conceito multimdia
restringe-se a aplicaes que (...)utilizador por um computador
ou por outro meio electrnico".
 

UFCD|Mdulo

10

Srgio Varela
2 experincia de html | CONCLUSO

</td>
</tr>
</table>

tecnologias.htm
<html> <head><title>pgina de tecnologias da comunicao do site
2 de html</title></head>
alink="#999999">
<a name="topo"></a>
<tr> <td width="150" height="40"> </td>
<td width="350" height="40"> <a
href="home.htm"> home </a> | <a href="tecnologia.htm">
sobre ntc </a> | <a href="multimedia.htm"> sobre multimedia </a>
 </td> </tr>
<tr>
<td width="150" valign="top"> <img src="imagens/mao_livro.jpg"
align="top"> </td>
tecnologias da comunicao 
Chamam-se de Novas Tecnologias de Informao e Comunicao
(...)na sociedade estruturada em redes telemticas.

<a href="#topo">voltar ao topo da
pgina</a>
 
CONCLUSO
</td>
</tr>
</table>

Bom trabalho!!!

2 - Exercicio de HTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

2 - Exercicio de HTML

Uploaded by

Copyright:

Available Formats

UFCD|Mdulo

You might also like