Instituto Politcnico de Santarm Escola Superior de Educao

RESUMOS HTML
Hipermdia

1 ANO/2 SEMESTRE
26 de Abril de 2012
Criado por: Daniela Lourao

Instituto Politcnico de Santarm Escola Superior de Educao

ndice

RESUMOS HTML | 26-04-2012

HTML NOES BSICAS ...........................................................................................................2

TAGS ....................................................................................................................................2
ELEMENTOS APENAS COM MARCA DE INCIO ............................................................................3
CONJUNTO DE ELEMENTOS DA PGINA HTML .............................................................................3
DOCTYPE ........................................................................................................................3
FORMATAO DE TEXTO ..........................................................................................................5
TAMANHO DOS TTULOS ......................................................................................................5
BOLD, ITLICO E SUBLINHADO ..............................................................................................6
TORNAR O TEXTO MAIS PEQUENO ..........................................................................................6
TAMANHO, COR E TIPO DE LETRA DO TEXTO ...........................................................................7
LINK .................................................................................................................................7
COR DO FUNDO ......................................................................................................................7
INSERIR UMA IMAGEM .............................................................................................................7
INSERIR UM VDEO ..................................................................................................................7
ANIMAES ...........................................................................................................................8
NUM TEXTO.......................................................................................................................8
NUMA IMAGEM .................................................................................................................8
TIPOS DE ANIMAES ..........................................................................................................8
FAZER UM MENU ....................................................................................................................9
CORES ..............................................................................................................................9
PGINA DO LINK ...............................................................................................................10
GRELHA DE UM SITE (LOCAIS) ..............................................................................................10
LTIMA AULA...........................................................................................................................11
TABELA ...............................................................................................................................11
QUEBRA DE LINHA.................................................................................................................12
LINHA NA TABELA..................................................................................................................12
DADOS DA TABELA ................................................................................................................12
MENU ................................................................................................................................12
INSERIR MEDIA NA TABELA .....................................................................................................13
VIDEO.............................................................................................................................13
IMAGEM .........................................................................................................................13

Instituto Politcnico de Santarm Escola Superior de Educao

HTML Noes Bsicas

A formatao no HTLM ( HiperText Markup Language ) feita atravs da incluso de tags.
Assim, um elemento do HTML constitudo por trs partes: A Abertura; o Contedo e o Fecho. Para
se criar um elemento necessrio usar uma marca/sinal que ; < ou >

As tags so cdigos que envolvem a rea a formatar, os quais esto entre o sinal (Maior e
Menor), isto < >.
<TAG>
Em regra, uma tag tem dois elementos, uma que se usa para marcar o incio e outra para o fim
da formatao.

ABERTURA

Tag de Abertura: <TAG>

FECHO

Tag de Fecho: </TAG>

Para se formatar um texto, o Formando/aluno deve digitar o seguinte Script:
<TAG> NOES BSICAS </TAG>

NOTA: Quando o Formando/aluno abrir uma tag, no se deve esquecer que necessrio
efectuar o seu fecho. Por isso recomenda-se que quando digitar <tag>, digite de seguida </tag>. Isto
digitar o Fecho/Fim da tag. (/)

EXEMPLO: </TAG>
Relativamente ao contedo, este, basicamente o texto que surge nas pginas Web. Tanto

com acentuao e sem acentuao.

RESUMOS HTML | 26-04-2012

pode ser escrito em Portugus como em qualquer outra lngua. Os contedos podem ser escritos

Instituto Politcnico de Santarm Escola Superior de Educao

ELEMENTOS

A P E N A S C O M M A R C A D E I N CI O

No HTML ( HiperText Markup Language ) existem elementos que s possuem a marca de

incio.
EXEMPLO: <br> quebra de linha

DOCTYPE
Define a verso do HTML - ( HiperText Markup Language ) que estamos a trabalhar. Por norma
pomos a ltima verso, ou a mais usada.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Seguidamente, damos indicao do inicio e fim da pgina HTML - <html></html>
Depois, dentro da pgina temos duas seces, que so:

Cabealho: <head></head>

Corpo/Contedo: <body></body>

RESUMOS HTML | 26-04-2012

EXEMPLO:

No que diz respeito ao cabealho, o nome/titulo da pgina aparece em cima <title></title>.

Instituto Politcnico de Santarm Escola Superior de Educao

No que diz respeito s Metas, esta servem para fornecer informao diversa, como o tipo de
linguagem, o autor da pgina, uma breve descrio da pgina conforme se ilustra na imagem
anterior.
Explicados que esto os elementos, tempo do Formando/Aluno comear a entender os
elementos do corpo do HTML.
Comeamos pelos pargrafos e quebras de linhas.
Como sabemos, as quebras de linha so efectuadas com recurso a: <br> e neste caso no
necessitam do final/fecho.
Quanto aos pargrafos, estes servem para delimitar pedaos de informao e, a sua sintaxe
escreve-se da seguinte forma: <p> FORMACTIC - especializada no desenvolvimento de Sites
dinmicos, interactivos e fceis de actualizar. </p>
Outra necessidade da escrita em HTML tem a ver com as quebras de linha. Assim, para que se
possa digitar vrias quebras de linha necessrio utilizar a seguinte sintaxe:
<p> FORMACTIC <br> Especializada no desenvolvimento de Sites dinmicos <br> interactivos
e fceis de actualizar. <br> Desenvolvemos solues de internet. </p>

RESUMINDO:
<html>
<head>
<title> Noes Bsicas de HTML</title>
</head>
<body>
<p> FORMACTIC - especializada no desenvolvimento de Sites dinmicos, interactivos e fceis
de actualizar. </p>
<p> FORMACTIC <br> Especializada no desenvolvimento de Sites dinmicos <br> interactivos
e fceis de actualizar. <br> Desenvolvemos solues de internet.

</body>
</html>

RESUMOS HTML | 26-04-2012

</p>

Instituto Politcnico de Santarm Escola Superior de Educao

TAMANHO

DOS

T T U LO S

Existem seis nveis de cabealho no HTML. Inicia-se em <h1>, isto o mais importante e,
termina em <h6>, isto ; o menos importante.
EXEMPLO:

O resultado final o seguinte:

Existe ainda a possibilidade de centrar o texto em relao ao tamanho da pgina. Para isso

RESUMOS HTML | 26-04-2012

necessrio digitar o seguinte o seguinte script:

O resultado final o seguinte:

Instituto Politcnico de Santarm Escola Superior de Educao

BOLD, ITLICO

SUBLINHADO

O prximo passo, e transferir ao Formando/Aluno os conhecimentos necessrios para

sublinhar um uma palavra ou palavras, utilizar o Bold/Negrito e o itlico num texto.
Assim, para formatar um texto utilizando o Bold/Negrito, itlico e sublinhado deve digitar o
seguinte:
Bold/Negrito - <b> FORMACTIC </b>
Sublinhado - <u> FORMACTIC </u>
Itlico - <i> FORMACTIC </i>
O Resultado o seguinte:

TORNAR

O TEXTO MAIS P EQUENO

passo demonstrar como se coloca um texto mais pequeno usando o <small>.

RESUMOS HTML | 26-04-2012

Outra possibilidade muito utilizada na configurao de textos, o seu tamanho. O prximo

Instituto Politcnico de Santarm Escola Superior de Educao

TAMANHO, COR

T IP O

DE

LETRA

DO

T E XT O

Para mudar a cor, tamanho e tipo de letra, de um texto, basta ter em ateno o seguinte
cdigo, antes de um pargrafo ou ttulo:
<font color="black" size="5" face="verdana">

LINK
Para inserir o um link basta inserir o seguinte cdigo, com o respectivo endereo http:
<a href="http://www.google.com"> link pra google

A cor do fundo inseria com o seguinte cdigo:

<body bgcolor="pink" text=#ffffff>
Pode ser escrito o nome da cor em ingls ou pode ser inserido o cdigo da cor do sistema RGB.

RESUMOS HTML | 26-04-2012

Para inserir uma imagem basta saber o nome da mesma e a sua extenso (jpg, png, gif) e
inserir o seguinte cdigo:
<img src="cat.jpg">

Para inserir um vdeo necessrio copiar um cdigo, que por exemplo aparece no youtube no
boto Partilhar -> Incorporar. De seguida s inserir o seguinte cdigo, que contem o endereo do
vdeo e as definies para o tamanho que pretendemos dar ao mesmo.

Instituto Politcnico de Santarm Escola Superior de Educao

<iframe width="560" height="315"
src="http://www.youtube.com/embed/dga3Vwbq4_U?rel=0" frameborder="0"
allowfullscreen></iframe>

Para inserir uma animao num texto ou imagem insere-se a tag <marquee> antes dos
respectivos, e fecha-se a tag aps os respectivos.

NUM

TEXTO
<marquee direction=down><h1> Laboratrio Audiovisual: Hipermdia

</h1></marquee></center>

N U M A I M A G EM
<center><marquee scrollDelay="2" direction=up><img src="cat.jpg"></marquee></center>

TIPOS

DE ANIMAES

DIRECO
Para alterar o tipo direco na animao basta mudar a tag <direction= > para as seguintes

Up

Down

Right

Left

ANIMAO
Para alterrar o tipo de animao basta utilizar o cdigo <marquee behavior= > com as
seguintes alternativas:

Scroll

Alternate

RESUMOS HTML | 26-04-2012

alternativas:

Instituto Politcnico de Santarm Escola Superior de Educao

VELOCIADE
Para alterar a velocidade pode utilizar-se o seguinte cdigo:
<marquee scrollDelay="60">
QUANTIDADE
Para alterar a quantidade de texto e imagens a rolar pode utilizar-se o seguinte cdigo:
<marquee scrollamount="1">

Exemplo

Para fazer um menu em HTML tem de se ter em mente que ser necessrio criar uma pgina,
ou ter um link para um pgina na web, para que o mesmo funcione. De seguida o que necessrio
dar o nome e formatar as cores dos links.

CORES
Para as cores temos de ter em ateno que so necessrias trs cores para que os links sejam

RESUMOS HTML | 26-04-2012

bem-feitos, ou seja, uma cor para saber que link, uma quando se carrega e outra de link visitado.

Cor do link: link=#FF0099

Quando se carrega: alink=#FFFF33
Link visitado: vlink=#990099
<body link=#FF0099 alink=#FFFF33 vlink=#990099>

Instituto Politcnico de Santarm Escola Superior de Educao

PGINA

DO

LINK

Para fazer dar aos links a sua funo necessrio introduzir a tag <a href= o nome da pgina
dentro de aspas> e, por fim, o nome do link.
<a href="dados.html" target="meio">Dados Pessoais<p></a>
Local onde aparece a pgina em Link
Para que a pgina em link seja aberta na pgina ndex necessrio inserir a tag <target=local
onde vai aparecer a pgina/link>. Neste caso ser o local denominado meio.
<a href="academica.html" target="meio">Formao Acadmica<p></a>

Esta grelha, ou tabela, que constitui um site encontra-se num documento HTML, denominado
ndex, e nele que se encontra o tamanho de cada seco do site, onde vai posteriormente aparecer
cada uma das pginas formadas.

FILAS

TAMANHO

RESUMOS HTML | 26-04-2012

COLUNAS

Nome da pgina que

aparece em cada local

10

Instituto Politcnico de Santarm Escola Superior de Educao

ltima aula

TABELA

LINHA

TABELA

QUEBRA

N DA COLUNA ONDE O
VIDEO VAI FICAR

N DA COLUNA ONDE A
INFORMAO VAI FICAR

RESUMOS HTML | 26-04-2012

<table> .. </table>

11

<table cellpadding="2" cellspacing="2" width="100%">

<tr>
<td bgcolor="#cccccc">Column 1</td>
<td bgcolor="#cccccc">Column 2</td>
</tr>
<tr>
<td>Row 2</td>
<td>Row 2</td>
</tr>
</table>

Resultado:
Column 1

Column 2

Row 2

Row 2

Instituto Politcnico de Santarm Escola Superior de Educao

<br> uma quebra de linha

Escreve aqui <br>Escreve aqui

Resultado:
Escreve aqui
Escreve aqui

<tr> uma linha, na tabela que estamos a fazer

<table border="2" cellpadding="2" cellspacing="2" width="100%">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>

Resultado:
Column 1

Column 2

<td> serve para inserir o contedo de cada coluna e as respectivas colunas.

<td> Coluna 1</td>
<td> Coluna 2</td>
Resultado:
Column 2

Este menu contm 4 colunas e uma linha, cada coluna tem uma largura de 25% (width=25%) e
uma hiperligao para o documento inicio.html, bem como o seu respectivo texto.
<tr bgcolor=#00FF99>
<td width=25%> </td>
<td width=25%><a href="inicio.html">Inicio</a> </td>

RESUMOS HTML | 26-04-2012

Column 1

<td width=25%><a href="inicio.html">Dados Pessoais</a></td>

<td widtg=25%><a href="inicio.html">Formao Acadmica</a></td></tr>

12

Instituto Politcnico de Santarm Escola Superior de Educao

VIDEO
Ao inserir um vdeo numa tabela tem de se ter em ateno a coluna onde o vdeo vai ficar, o cdigo
do mesmo e por fim, centrar o video.
Para referir a coluna onde vai ficar utiliza-se o cdigo <colspan=nmero da coluna>
Para centrar basta inserir antes e depois do cdigo do vdeo <center>cdigo do vdeo</center>
<tr><td><h1><td><colspan=2><center><iframe width="460" height="300"
src="http://www.youtube.com/embed/Gg-Je_kkXIo?rel=0" frameborder="0"
allowfullscreen></iframe></center></td></tr>

IMAGEM
Para inserir uma imagem na tabela, basta ter em ateno os mesmos passos j descritos
anteriormente para inserir uma imagem, mas neste caso ter especial ateno com as linhas (<tr>) e
as colunas (<colspan=nmero> ou <td>imagem</td>).
<tr>
<marquee behavior="alternate"><img src="./SITE AULA/olho 2.jpg"><img src="./SITE
AULA/nome.jpg"><img src="./SITE AULA/olho 1.jpg">
</marquee></tr>

RESUMOS HTML | 26-04-2012

RESULTADO FINAL

13