HTML e Flash

Link dos vdeos.
http://info.abril.com.br/dicas/sites/desenvolvimento/quer-conhecer-flash-faca-cursogratis.shtml
Vdeo Aula -> http://info.abril.com.br/dicas/cursos/flashcs3/curso.html
Fontes:
http://pt-br.html.net/tutorials/html/
http://www.truquesedicas.com/tutoriais/html/00001a.htm
http://www.truquesedicas.com/tutoriais/html/00007a.htm
Veja Tambm:
http://www.juliobattisti.com.br/tutoriais/default.asp?
cat=0026&ast=0138
HTML significa HyperText Markup

Language, e uma linguagem universal
destinada elaborao de pginas com
hiper-texto, como o nome indica. O
conceito de hiper-texto bastante
simples: Certos itens de um documento
contm uma ligao a outra zona do
mesmo documento ou, como mais
vulgar, a outros documentos.
A principal aplicao do HTML a
criao de pginas na Web, e convm
esclarecer que no se trata de uma
linguagem de programao. De facto, o
HTML antes uma espcie de linguagem
de formatao, um ficheiro de texto que
formatado atravs de uma srie de
comandos tags.
2. As bases do HTML
Pgina:
1234567891011
Antes de mais, importa esclarecer que para a criao de uma pgina em HTML no
necessrio nenhum software especial. Se bem que existam programas especializados, o
Notepad do Windows ou mesmo o Edit do MS-DOS so mais que suficientes para a
criao de uma pgina.
Como disse no Captulo I, o HTML consiste em texto formatado por tags. Embora
existam vrias dezenas destes tags, apenas uma pequena parte destes utilizada
normalmente. H algumas regras bsicas que necessrio compreender antes de se
comear com a criao de pginas...
Todos os tags so inseridos entre o sinal de menor e maior:
<tag>
Tirando aqueles que representam a posio de um objecto (a insero de uma imagem,
por exemplo), todos os tags de formatao devem ser abertos e fechados (utilizando o
caracter /):
<tag> </tag>
Todos os tags obedecem a uma hierarquia, como no seguinte exemplo:
<a> <b> <c> </c> </b> </a>
O primeiro a abrir o ltimo a fechar, e vice-versa.
<a> <b> <c> </a> </b> </c> ERRADO.

indiferente utilizar maisculas ou minsculas nos tags. Nestes tutoriais irei utilizar
maisculas apenas por uma questo de leitura.
<tag> igual a <TAG> e a <Tag>
Todas as pginas em HTML so identificadas pelo tag <HTML>, que ter
obrigatriamente que estar no incio. Obviamente, qualquer pgina ir acabar com
</HTML>.
<HTML>
.
.
.
</HTML>
Todas as pginas em HTML contm duas partes: Aquela definida por <HEAD>, e que
contm todas as informaes do cabealho da pgina; Outra parte definida por
<BODY>, contm quase tudo aquilo que iremos ver realmente na nossa pgina.
<HTML>
<HEAD>
.
.
</HEAD>
<BODY>
.
.
</BODY>
</HTML>
3. Uma primeira pgina
Pgina:
1234567891011
Para criarmos a nossa primeira pgina em HTML, como j disse no captulo anterior,
basta qualquer simples editor de texto, como o Notepad. Podemos comear por inserir o
seguinte:
<HTML>
<HEAD>
<TITLE>A minha primeira pgina</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Dica:
Devemos criar uma pasta nova no nosso disco para conter a pgina, e devemos gravar o
nosso ficheiro de texto como 'index.htm'. Porqu? Quando a pgina est a ser
visualizada no nosso disco, indiferente, mas nos servidores onde so alojadas as

pginas na Internet, a pgina inicial por defeito chama-se index.html ou index.htm.
Se visualizarmos a pgina que acabmos de criar num browser (programa que permita
navegar na internet, por ex. IExplorer), teremos qualquer coisa como isto:
Que concluso podemos tirar? O texto que aparece como ttulo da janela definido pelo
tag <TITLE>, que surge sempre na rea correspondente ao cabealho da pgina
(<HEAD>).
Vamos agora fazer a seguinte alterao:
<HTML>
<HEAD>
<TITLE>A minha primeira pgina</TITLE>
</HEAD>
<BODY>
Ol mundo!
</BODY>
</HTML>
Iremos obter o seguinte resultado:
Como j disse antes, a rea definida pelo tag <BODY> aquela onde reside quase todo
o contedo visvel de uma pgina. Vamos concentrar-nos nesta rea.
Comecemos por acrescentar uma frase:
<BODY>
Ol mundo!
Chamo-me Eduardo.
</BODY>
Inesperadamente, o resultado obtido ser o seguinte:
Convm ento esclarecer algo: Em HTML, os espaamentos e mudanas de linha

processam-se de um modo algo diferente. Todo o texto interpretado continuamente, e
na verdade possvel que todo o HTML de uma pgina esteja numa nica linha. Os
espaos, tal como neste tutorial, apenas servem para tornar o cdigo mais legvel a quem
o cria. Vamos introduzir o seguinte tag:
<BODY>
Ol mundo!
<BR>
Chamo-me Eduardo.
</BODY>
Este <BR> (de Break) d instrues ao browser para fazer uma mudana de linha.
Assim, o resultado dever ser este:
3. Uma primeira pgina (continuao)
Pgina:
1234567891011
Vamos agora tentar o seguinte:

<BODY>
Ol mundo! Chamo-me Eduardo.
</BODY>
Iremos obter novamente o seguinte resultado:
Porqu? Como foi dito, a noo de espaamento em HTML um pouco diferente, e os

browsers no reconhecem mais que um nico espao entre caracteres. Para contornar
isto, utiliza-se uma referncia especial - (Non-Breaking SPace), que convm
esclarecer que no um tag. Antes de mais explicaes, experimentemos isto:
<BODY>
Ol mundo!

Chamo-me Eduardo.
</BODY>
O resultado ser este:
Dica:
Estes caracteres especiais so utilizados para definir caracteres que normalmente no so
reconhecidos pelo HTML. Por exemplo, visto que os sinais de maior e menor so
utilizados pelo prprio HTML para definir os tags, se quisermos utilizar estes sinais na
nossa pgina utilizaremos > e < respectivamente.
Uma das bases do HTML o facto de ser uma linguagem de hiper-texto. Vamos agora
tentar introduzir uma ligao a outra pgina:
<BODY>
Ol mundo! Chamo-me Eduardo.<BR>
Visitem a minha <A HREF="outra.htm"> outra pgina</A>.
</BODY>
iremos ento obter uma ligao a uma pgina, que seria o ficheiro outra.htm gravado
na mesma pasta que o ficheiro da pgina que estamos a editar. Seria interessante criar
rapidamente essa pgina para testar a ligao que acabmos de criar.
Este tag um pouco diferente dos que j vimos. Pode parecer confuso, mas no . O
tag <A> aquele destinado introduo de uma link, mas no entanto necessita de um
parmetro (o HREF) para indicar aonde feita essa ligao. Tudo aquilo que se segue
ir estar linkado, at o tag ser fechado com </A>.
O parmetro HREF pode conter tambm o endereo de outro site, como em <A
HREF="http://www.site.com"> (neste caso indispensvel o prefixo http://) ou

qualquer outro ficheiro sem ser .HTM ou .HTML. Por exemplo, para fazer uma link para
download usar-se-ia <A HREF="ficheiro">.
Dica:
IMPORTANTE: Aconselho vivamente que todos os ficheiros referidos numa pgina,
quer links a outras pginas, quer imagens, etc, tenham o seu nome em minsculas, pois a
grande maioria dos servidores Web fazem uma distino entre maisculas e minsculas.
Existe uma forte possibilidade que se tivermos uma link a pagina.htm, quando o
ficheiro se chama Pagina.htm, esta link no funcione.
4. Formatao e aspecto
Pgina:
1234567891011
Todas as pginas que vemos na Internet tm algo mais que texto corrido e montono.
Antes de mais, podemos mudar a cor de uma pgina:
<HTML><HEAD><TITLE>Pgina com cor</TITLE></HEAD>
<BODY BGCOLOR="#FFFF00" TEXT="#0000FF" LINK="#FF0000">
Texto normal<BR><A HREF="outra.htm">Texto com link</A>
</BODY>
</HTML>
O resultado ser o seguinte:
Aqui foram acrescentados trs parmetros adicionais ao tag <BODY>. BGCOLOR

define a cor de fundo da pgina, TEXT a cor por defeito do texto, LINK a cor de uma
hiper-ligao. Existem ainda os parmetros adicionais ALINK e VLINK que definem,
respectivamente, a cor de uma ligao activa (quando se clica sobre ela) e a cor de uma
ligao j visitada previamente.
O que est dentro destes parmetros? O cdigo hexadecimal correspondente cor (mais
informao sobre isto encontra-se no artigo sobre o uso da cor, na seguinte tabela
podemos ver alguns dos mais importantes:
Dicas:
Branco: #FFFFFF
Preto: #000000
Cinza: #999999
Vermelho: #FF0000
Verde: #00FF00
Amarelo: #FFFF00
Magenta: #FF00FF
Azul claro: #00FFFF
Laranja: #FF6600
Verde escuro: #006600
Azul: #0000FF
Azul escuro: #000066
No entanto, muitas vezes muito mais importante que as cores, o alinhamento dos
elementos da pgina. Por defeito tudo fica alinhado esquerda, mas possvel mudar
isso:
<BODY>
<DIV ALIGN="CENTER">TEXTO CENTRADO</DIV>
<DIV ALIGN="RIGHT">TEXTO DIREITA</DIV>
Texto esquerda
</BODY>
O texto em maisculas tem o seu alinhamento alterado, a utilizao do tag <DIV>
tambm provoca quebras de linha:
Porqu? O tag <P> utilizado para a definio de pargrafos, como o seguinte

exemplo o demonstra:
<BODY>
<P>Bloco de texto</P>
<P>Outro bloco de texto<BR>com mudana de linha</P>
</BODY>
Existe uma diferena clara entre o espaamento introduzido por uma mudana de
pargrafo e aquele que surge atravs do tag <BR>, de quebra de linha:
4. Formatao e aspecto (continuao)
Pgina:
Alm do aspecto global do texto, podemos tambm escolher o tipo de letra que
1234567891011
utilizamos. Antes de mais, temos os tags <B>, <I> e <U>, respectivamente para letra
carregada, em itlico e sublinhada:
<BODY>
Normal<BR>
<B>Carregado</B><BR>
<I>Italico</I><BR>
<U>Sublinhado</U><BR>
<B><I>Carregado e Italico</I></B>
</BODY>
Obtemos este resultado:
Alm disto, tambm podemos escolher a fonte, o seu tamanho e cor com <FONT>:
<BODY>
<P>Letra normal</P>
<P><FONT FACE="Arial">Letra com a fonte Arial</FONT></P>
<FONT FACE="Arial">
<P><FONT SIZE="5">Tamanho 5</FONT></P>
<P><FONT SIZE="2">Tamanho 2</FONT></P>
<FONT SIZE="5">
<P><FONT COLOR="#0000FF">Azul T.5</FONT></P>
<P><FONT COLOR="#FF0000">Vermelho T.5</FONT></P>
</FONT>
</FONT>
<P><FONT FACE="Times New Roman" SIZE="7" COLOR="#006633">
Podemos combinar varios parametros</FONT></P>
</BODY>
Este j est um pouco mais complicado. Existem vrias maneiras de fazer isto, mas esta
demonstra como se devem hierarquizar os tags correctamente. Bem executado, teremos
este resultado:
O parmetro COLOR, que j vimos aplicado no tag <BODY>, contm a cor do texto
no seu cdigo hexadecimal (ver Apndice E). O parmetro SIZE contm o tamanho do
tipo de letra, que um algarismo entre 1 (mais pequeno) e 7 (maior). Finalmente, FACE
contm o nome do tipo de letra a utilizar.
Dica:
Apesar de existirem inmeros tipos de letra, aconselhvel que uma pgina apenas
utilize o Arial ou o Times New Roman, visto que com outros existe uma grande
possibilidade que quem vai visitar a pgina no tenha essa fonte instalada no seu
computador.
5. Multimdia: Som e Imagem
Pgina:
1234567891011
Toda a manipulao de texto e de cor que vimos pode parecer interessante, mas
rarssima a pgina na Internet que no contm pelo menos uma imagem.
Podemos comear por ver como se insere um fundo numa pgina:
<HTML>
<HEAD><TITLE>Pgina com imagem</TITLE></HEAD>
<BODY BACKGROUND="imagem.jpg">
<FONT FACE="Arial" SIZE="4">Imagem de fundo</FONT>
</BODY>
</HTML>
Teremos como fundo da pgina a imagem especificada no parametro BACKGROUND,
presente na mesma pasta que a nossa pgina.
Embora no se veja na imagem acima, a imagem repete-se em padro. No

aconselhvel a utilizao de fundos complexos, visto que podem tornar o texto pouco
legvel. Tambm recomendvel a escolha de uma cor suficientemente contrastante para
o texto.
No entanto, para colocarmos uma imagem no corpo da nossa pgina utilizamos o tag
<IMG>. Este tag insere uma imagem no ponto onde colocado, e no fechado, visto
que no se trata de um tag de formatao.
<BODY BGCOLOR="#66CCFF">
<P>Ol, sou o Eduardo</P>
<P><IMG SRC="eduardo.jpg" ALT="Sou eu!"></P>
</BODY>
Tem o resultado seguinte:
As imagens so objectos inseridos no meio do texto, pelo que a sua colocao requer
algum planeamento:
<DIV ALIGN="CENTER">
Ol, sou o Eduardo.<IMG SRC="eduardo.jpg" ALT="Sou eu!">
Benvindos minha pgina.
</DIV>
Tem um resultado um pouco infeliz:
Vamos ento analizar o tag <IMG>. O parmetro SRC (SouRCe) indica o ficheiro da
imagem. Deve ser um ficheiro .GIF ou .JPG (ver Dicas para um bom design), e devemos
ter ateno s maiusculas e minsculas do seu nome. O parmetro ALT indica o texto
que ir aparecer enquanto a imagem no descarregada da Internet, ou que aparece
quando passamos com o rato por cima da Imagem.
Uma concluso muito importante que podemos inserir uma imagem numa seco
formatada pelo tag <A>, de modo a criar uma link nessa imagem:
<P>Clique abaixo para continuar</P>
<P>
<A HREF="paginadois.htm"><IMG SRC="link.gif" BORDER="4"></A>
</P>
Teremos ento uma link para paginadois.htm na imagem link.gif:
O parmetro BORDER define a largura da borda da imagem. No caso de esta fazer uma
hiper-ligao, a cor desta borda ser a cor por defeito, aquela que pode ser definida por
<BODY LINK="">, seno ser igual cor do texto. Podemos ainda utilizar
BORDER="0" para suprimir a borda.
5. Multimdia: Som e Imagem (continuao)
Pgina:
1234567891011
Alm de imagens, tambm existe a possibilidade de colocar um pequeno reprodutor de

som na pgina. Embora muita gente ache a musica de fundo algo de gosto duvidoso,
desta maneira ser possvel parar a msica, atravs de um pequeno controle tipo
aparelhagem.
<P ALIGN="CENTER">
<BGSOUND SRC="musica.mid">
<EMBED SRC="musica.mid" WIDTH="140" HEIGHT="25"
AUTOSTART="TRUE" CONTROLS="SMALLCONSOLE"
VOLUME="60"OOP="FALSE"></EMBED>
</P>
O aspecto ser o seguinte:
Nota-se que foram utilizados dois tags para fazer a mesma coisa. Porqu? Os dois
browsers mais utilizados, o Internet Explorer da Microsoft e o Navigator da Netscape
tm certas diferenas na sua interpretao do HTML. Por isso, por vezes, necessrio
incluir dois comandos diferentes para uma mesma funo, visto que cada um destes
comandos se destina a um dos browsers.
O tag <BGSOUND> tem no parmetro SRC a localizao do ficheiro de som a tocar.
No exemplo trata-se de um ficheiro .MID, mas pode perfeitamente ser um som .WAV ou
.AU.
De forma similar, o tag <EMBED> tem em SRC o ficheiro a tocar. Mas este tag
substancialmente diferente. <EMBED> um tag poderosssimo que tem como funo
a insero de plug-ins multimdia, que alm de som tambm podem ser programas em
Java, filmes ou mesmo visores de mundos em realidade virtual. Os parmetros de
<EMBED> so especficos conforme o contedo e um domnio j bastante avanado
da criao de pginas.
6. Estrutura usando tabelas
Pgina:
1234567891011
Na criao de pginas em HTML, as tabelas so algo que serve para muito mais que
para a criao de tabelas propriamente ditas. Na verdade, rara a pgina bem construda
que no as utilize para melhor controlar a localizao do texto, imagens e outros
elementos de uma pgina.
Vamos seguir atentamente a criao de uma pgina com tabelas, visto que este um dos
processos onde os iniciados ao HTML encontram mais dificuldades.
<HTML>
<HEAD><TITLE>Pgina com uma tabela simples
</TITLE></HEAD>
<BODY>
<TABLE ALIGN="CENTER" BORDER="2">
Isto parece um pouco bvio. O tag <TABLE> inicia a nossa tabela. O parmetro
ALIGN define a localizao da tabela na pgina (neste caso ficar centrada), e
BORDER define a largura da borda.

<TR>
Agora, este tag parece bem mais estranho. <TR> significa Table Row, e indica que
vamos introduzir uma linha na nossa tabela. Parece lgico, dado que normalmente as
tabelas se definem por linhas e colunas. No entanto
<TD ALIGN="CENTER">Uma clula</TD>
<TD ALIGN="CENTER">Duas clulas</TD>
Poder-se-ia dizer que o <TD> diz respeito diviso em colunas, duas neste caso. No
entanto, isto pouco exacto visto que, como vamos ver mais frente, um <TD> no
corresponde necessariamente a uma coluna da nossa tabela. Na verdade este tag apenas
divide a linha actual em vrias clulas. Mas ateno! Se quisermos apenas uma clula,
teremos sempre que utilizar na mesma um <TD>! Outra coisa a notar, o parmetro
ALIGN deste tag diz respeito ao alinhamento por defeito do texto contido na clula.
</TR>
</TABLE>
</BODY>
</HTML>
Fechamos todos os tags abertos e assim conclumos a nossa tabela:
vamos ver agora mais alguns exemplos de como utilizar tabelas.

Primeiramente vamos ver como se utiliza uma tabela para fazer uma pgina de entrada
num site, com uma imagem centrada no ecr.
<HTML>
<HEAD>
<TITLE>Site de Eduardo Sousa Carregue na imagem para entrar</TITLE>
</HEAD>
<BODY BGCOLOR="#000000" TEXT="#FFFFFF">
<TABLE ALIGN="CENTER" WIDTH="100%" HEIGHT="100%">
<TR>
<TD ALIGN="CENTER" VALIGN="MIDDLE">
<A HREF="principal.htm">
<IMG SRC="imagem.jpg" ALT="Clique para entrar">
</A>
</TD></TR>
</TABLE>
</BODY>
</HTML>
O resultado ser este:
6. Estrutura usando tabelas (continuao)
Pgina:
1234567891011
Como vimos, obrigatrio respeitar sempre a hierarquia <TABLE><TR><TD> e o facto de esta

tabela ter apenas uma clula no dispensa nenhum destes tags.
Comeando por <TABLE>, WIDTH e HEIGHT definem o tamanho da tabela. Neste caso foi
fornecido um valor em percentagem, relativo ao tamanho do ecr. Assim conseguimos criar uma
tabela que ocupa a totalidade do ecr. Caso estivesse escrito <TABLE WIDTH="100">, o valor
seria interpretado em termos absolutos, em pixeis, e tendo em conta que a maioria das pessoas tm
o seu ecr com 800 pixeis de largura, o resultado da tabela seria bem diferente. Cabe a cada um
julgar as situaes em que devem ser utilizadas percentagens ou valores em pixeis
Em <TD>, surgem ALIGN e VALIGN. Se o primeiro um parmetro que surge em muitos tags
e diz respeito ao alinhamento horizontal (pode conter "CENTER", "LEFT" ou "RIGHT"),
VALIGN um parmetro que nos surge apenas no tag <TD>, e diz respeito ao alinhamento
vertical. Pode por isso conter os valores "MIDDLE", "TOP" ou "BOTTOM", respectivamente para
o centro, em cima ou em baixo.
Finalmente, vamos analisar uma tabela complexa:
<BODY BGCOLOR="#000000" TEXT="#FFFFFF">
<TABLE BGCOLOR="#000099" ALIGN="CENTER" WIDTH="400" HEIGHT="300"
BORDER="3">
<TR>
<TD ALIGN="CENTER" COLSPAN="3"> 1 </TD>
</TR>
<TR>
<TD ALIGN="CENTER" ROWSPAN="2"> 2 </TD>
<TD ALIGN="CENTER" ROWSPAN="2"> 3 </TD>
<TD ALIGN="CENTER"> 4 </TD>
</TR>
<TR><TD ALIGN="CENTER"> 5 </TD></TR>
</TABLE>
</BODY>
Para melhor compreender esta estrutura conveniente vermos o resultado final:
por isto que no se pode associar os tags <TR> e <TD> com linhas e colunas. Se bem que
exista alguma verdade nessa associao, podemos, de facto, ter apenas um <TD> para vrias
colunas, e um <TR> para vrias linhas, como se pode ver no resultado. Analisemos ento o HTML
que inserimos.
Comeamos por introduzir um novo parmetro em <TABLE>. Atravs de BGCOLOR
conseguimos definir, tal como fizemos para a o corpo da pgina, a cor de fundo da tabela. Este
parmetro tambm pode ser utilizado em <TR> e em <TD> para definir a cor de fundo de uma
determinada linha ou clula.
Depois introduzimos <TD COLSPAN="3">. Este parmetro define o nmero de colunas que
uma determinada clula percorre. Assim, como acontece na nossa tabela, se tivermos uma nica
clula com trs clulas por baixo, teremos que percorrer trs colunas. No entanto, teremos sempre
que considerar como nmero de colunas na nossa tabela o maior numero possvel, por exemplo, se
a clula 5 estivesse dividida em duas colunas, o parmetro COLSPAN da clula 1 teria que ter um
valor igual a 4.
Semelhante temos tambm ROWSPAN, que se aplica a linhas. Vemos este parmetro aplicado
nas clulas 2 e 3, o que faz com que o <TR> seguinte a ser aberto v ocupar o espao que ficou
debaixo da clula 4.
7. Estrutura avanadas: "Frames"
Pgina:
1234567891011
Quem j navegou um pouco pela Internet com certeza j encontrou pginas em que, por
exemplo, existe um menu esttico no lado esquerdo do ecr e o contedo do lado direito
que vai mudando.
Para tal utilizado um processo mais complexo no qual visualizamos ao mesmo tempo
no ecr mais que uma pgina HTML. Para isso usa-se aquilo que iremos chamar de
sistema de frames.
O princpio simples. Temos uma pgina que nos indica a posio na qual as outras
pginas sero colocadas. No exemplo referido de um menu do lado esquerdo, ateramos,
por exemplo uma pgina principal.htm que nos diz para exibir a pgina menu.html no
lado esquerdo e a pgina conteudo.htm no lado direito.
Vamos agora ver como criar uma pgina com trs frames, uma do lado esquerdo, e do
lado direito um cabealho e o corpo, como no seguinte esquema:
cima
esquerda
conteudo
<HTML>
<HEAD><TITLE>Pgina com Frames</TITLE></HEAD>
<FRAMESET COLS ="160,*" BORDER="0" FRAMESPACING="0">
<FRAME SRC="esquerda.htm" NAME="esquerda" NORSIZE
FRAMEBORDER="NO">
<FRAMESET ROWS ="90,*">
<FRAME SRC="cima.htm" NAME="cima" NORESIZE SCROLLING="NO"
FRAMEBORDER="NO"><FRAME SRC="conteudo.htm" NAME="conteudo"
FRAMEBORDER="NO">
</FRAMESET>
</FRAMESET>
<NOFRAMES>
<BODY BGCOLOR="#FFFFFF">
Esta pgina usa frames, mas o seu browser no as consegue visualizar.
</BODY>
</NOFRAMES>
</HTML>
Vejamos: esta pgina algo diferente daquilo que aprendemos at agora. Isto porque
aquilo que vemos no ecr no esta pgina, mas sim aquelas que esta refere.
Para definir frames, utiliza-se o tag <FRAMESET>. Como no se trata propriamente
do corpo da pgina, este tag define uma rea aps a rea <HEAD>, mas no contido
dentro do tag <BODY>. Ao utilizar o parmetro COLS, divide a pgina em colunas,
neste caso definidas por "160,*". Isto significa que so criadas duas, uma com 160
pixeis de largura e outra que ocupa o resto do espao disponvel no ecr. As medidas das
frames podem ser fornecidas em pixeis, em percentagem do espao disponvel ou por
um asterisco, que significa o resto. Estas colunas so definidas da esquerda para a
direita. Temos tambm BORDER e FRAMESPACING, que definem a borda e o
espaamento entre frames.
Dentro de <FRAMESET>, podemos ento definir a frame propriamente dita ou
subdividi-la pela ordem em que foram criadas as colunas. Temos ento inserido o tag
<FRAME>, que se refere primeira coluna (de 160 pixeis). SRC define qual o ficheiro
HTML a ser exibido nessa frame, NAME, muito importante, indica qual o nome da
frame, para que as links possam l recair (veremos isto mais frente). NORESIZE
indica que a frame no pode ser redimensionada com o rato, e FRAMEBORDER, mais
uma vez, a borda da frame. Utiliza-se <FRAME FRAMEBORDER> e <FRAMESET
BORDER> mais uma vez por uma questo de compatibilidade entre o Internet Explorer
e o Netscape Navigator. SCROLLING pode ser definido com "YES" ou "NO" para
obrigar a barra de scroll a estar sempre visvel ou escondida.
A segunda coluna que definimos ento ocupada por um novo <FRAMESET>, este
agora que divide essa rea em duas linhas, utilizando ROWS. De forma semelhante a
COLS, ROWS divide a rea a que diz respeito em linhas, lidas de cima para baixo.
No final temos ainda uma estranha rea<NOFRAMES>. Esta, que dentro de si contm
uma rea<BODY>, destina-se a alojar o contedo do corpo da pgina visvel nos
browsers antigos (anteriores ao Netscape 2.0), que no suportam frames.

Como que fazemos com que as links caiam sobre uma das frames que criamos?
A entra o parmetro NAME de <FRAME>. Atravs do nome que definimos, podemos
usar o seguinte cdigo, por exemplo no ficheiro esquerda.htm:
<A HREF="link.htm" TARGET="conteudo">Link</A>
Atravs de TARGET podemos definir o alvo de uma link, que ter o nome que
atribumos frame desejada. Podemos ainda utilizar TARGET="_blank", que abre a
link numa nova janela, e TARGET="_ top", que abre a link no topo de toda a
hierarquia de frames no ecr, apagando as frames existentes. Quando no atribudo um
TARGET, as links abrem por defeito na prpria frame onde existem.
Por: Eduardo Sousa
Lista de 'tags' comuns
'TAGS' BSICOS
Inicia/termina um documento em
HTML.
Define a rea de cabealho, com
<head></head> elementos no visualisveis na
pgina.
Define a rea visvel do
<body></body>
documento.
<html></html>
CABEALHO
<title></title>
Coloca o nome da pgina na barra

de ttulo da janela.
ATRIBUTOS DO CORPO
<body bgcolor=?> Cor de fundo.

<body text=?> Cor de texto.
<body link=?> Cor das links.
Cor das links previamente
<body vlink=?>
visitadas.
<body alink=?> Cor da link activa.
TEXTO
<b></b> Texto carregado.

<i></i> Texto em itlico.
Texto estilo mquina de escrever,
<tt></tt>
monoespaamento.
<font size=?></font> Tamanho das letras.

<font color=?></font> Cor das letras.
<font face=?></font> Define a fonte utilizada.
LINKS
<a href="URL"></a> Cria uma hiperligao.

Cria uma link para o envio de
<a href="mailto:EMAIL"></a>
correio.
Cria um 'alvo' dentro de uma
<a name="NOME"></a>
pgina.
Faz a ligao a um 'alvo' presente
<a href="#NAME"></a>
dentro da mesma pgina.
FORMATAO
<p></p> Define a rea de um pargrafo.

<p align=?> Alinhamento de um pargrafo.
<br> Insere uma quebra de linha.
'Tag' genrico utilizado para
<div align=?>
formatar blocos de texto.
GRAFISMO
<img src="FICHEIRO"> Insere uma imagem.

<img src="FICHEIRO" align=? Alinha uma imagem em relao ao
> resto do texto.
<img src="FICHEIRO"
Define a borda da imagem.
border=?>
<hr> Insere uma linha horizontal.
TABELAS
<table></table> Cria uma tabela.

<tr></tr> Linha de uma tabela
<td></td> Clula individual numa linha.
ATRIBUTOS DAS TABELAS
<table border=#> Borda volta de cada clula.

<table cellspacing=#> Espao entre as clulas.
<table cellpadding=#> Margem interior das clulas.
Largura da tabela - em pixels ou
<table width=# or %>
percentagem.
Alinhamento horizontal do
<tr align=?> or <td align=?> contedo das clulas.quot;left",
"center" ou "right")
Alinhamento vertical do contedo
<tr valign=?> or <td valign=?> das clulas.("top", "middle" ou
"bottom")
Numero de colunas 'percorridas'
<td colspan=#>
por uma clula.
<td rowspan=#> Numero de linhas 'percorridas' por
uma clula.
FRAMES
Define o conjunto de frames.

<frameset></frameset> Surge antes de <body> num
documento com frames.
Define as linhas num conjunto de
frames. Valor pode ser em pixels,
<frameset rows="valor,valor">
percentagem ou * (o resto /
proporo).
Define as colunas num conjunto de
frames. Valor pode ser em pixels,
<frameset cols="valor,valor">
percentagem ou * (o resto /
proporo).
Define uma unica frame. Surge
<frame>
dentro de <frameset>.
rea onde inserido o contedo
<noframes></noframes> visivel em browsers que no
suportam o uso de frames.
ATRIBUTOS DE UMA FRAME
Especifica o documento HTML a

ser exibido na frame.
D um nome frame de modo a
<frame name="nome"> poder ser 'linkada' a partir de
outras frames.
Define se a frame tem barra de
<frame scrolling=VALOR> scroll. VALOR pode ser "yes",
"no" ou "auto".
Impede o visitante de
<frame noresize>
redimensionar a frame.
<frame src="URL">
Lio 6: Mais tags HTML

E a? Voc construiu algumas pginas como sugerimos na lio anterior? No? Sim? Bem, a seguir
um exemplo:
<html>
<head>
<title>Meu website</title>
</head>
<body>
<h1>Um cabealho</h1>
<p>texto, texto texto, texto</p>
<h2>Subttulo</h2>
<p>texto, texto texto, texto</p>
</body>
</html>
E agora?
Agora vamos aprender mais sete tags.
Voc j sabe que pode obter negrito com a tag <b>, agora saiba que pode obter itlico - letras
inclinadas - com a tag <i>. J percebeu no ?, "i" vem de "italic".
Exemplo 1:
<i>Este texto deve ser itlico.</i>
Ser renderizado no navegador assim:

Este texto deve ser itlico.
De modo similar voc pode fazer seu texto com letra menores usando a tag <small>:
Exemplo 2:
<small>Este texto deve ser com letras em tamanho small.</small>

Este texto deve ser com letras em tamanho small.
Posso usar vrias tags simultaneamente?

Sim voc pode usar quantas tags queira desde de que as aninhe convenientemente. Veja como
fazer isto no exemplo abaixo:
Exemplo 3:
Para escrever um texto em negrito e itlico faa como mostrado a seguir:
<b><i>Texto em negrito e itlico.</i></b>
E no assim:
<b><i>Texto em negrito e itlico.</b></i>
Observe que no primeiro exemplo a primeira tag de abertura <b> corresponde a ltima tag de
fechamento </b>, e o aninhamento est certo. Isto evita confuso para quem escreve o cdigo e
para o navegador que l o cdigo.
Mais tags!
Como foi dito na Lio 4 existem tags que so abertas e fechadas em nica tag. Estas tags so
comandos isolados, ou seja, no contm nenhum texto dentro delas para poder funcionar. Um
exemplo a tag <br /> que serve para criar uma quebra de linha:
Exemplo 4:
Um texto<br /> e mais texto em nova linha

Um texto
e mais texto em nova linha
Notar que a tag escrita como se fosse uma mistura de tag de abertura e de fechamento com uma
barra "/" no final: <br />. A princpio podemos escrever tambm <br></br> (sem contedo), mas
para que complicar?
Outra tag de comando <hr /> que serve para definir uma linha horizontal ("hr" vem "horizontal
rule" - rgua horizontal ):
Exemplo 5:
<hr />
Exemplo 6:
<ul>
<li>Um item de lista</li>
<li>Outro item de lista</li>
</ul>
Um item de lista
Outro item de lista
Exemplo 7:
<ol>
<li>Primeiro item da lista</li>
<li>Segundo item da lista</li>
</ol>

1. Primeiro item da lista
2. Segundo item da lista
Uau! Isto tudo?

Sim, por enquanto isto tudo. Aconselhamos, novamente, a fazer seus prprios experimentos,
construindo algumas pginas usando as sete tags ensinadas nesta lio:
<i>Itlico</i>
<small>Texto tamanho small</small>
<br /> Pula linha
<hr /> Linha Horizontal
<blockquote>Indentao</blockquote>
<ul>Lista</ul>
<ol>Lista ordenada</ol>
<li>Item de lista</li>

HTML e Flash

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

HTML e Flash

Enviado por

Direitos autorais:

Formatos disponíveis

Link dos vdeos.

HTML significa HyperText Markup

<a> <b> <c> </a> </b> </c> ERRADO.

visualizada no nosso disco, indiferente, mas nos servidores onde so alojadas as

Convm ento esclarecer algo: Em HTML, os espaamentos e mudanas de linha

3. Uma primeira pgina (continuao)

Vamos agora tentar o seguinte:

Porqu? Como foi dito, a noo de espaamento em HTML um pouco diferente, e os

HREF="http://www.site.com"> (neste caso indispensvel o prefixo http://) ou

Aqui foram acrescentados trs parmetros adicionais ao tag <BODY>. BGCOLOR

Azul escuro: #000066

Porqu? O tag <P> utilizado para a definio de pargrafos, como o seguinte

4. Formatao e aspecto (continuao)

5. Multimdia: Som e Imagem

Embora no se veja na imagem acima, a imagem repete-se em padro. No

Alm de imagens, tambm existe a possibilidade de colocar um pequeno reprodutor de

BORDER define a largura da borda.

vamos ver agora mais alguns exemplos de como utilizar tabelas.

6. Estrutura usando tabelas (continuao)

Como vimos, obrigatrio respeitar sempre a hierarquia <TABLE><TR><TD> e o facto de esta

browsers antigos (anteriores ao Netscape 2.0), que no suportam frames.

Coloca o nome da pgina na barra

<body bgcolor=?> Cor de fundo.

<b></b> Texto carregado.

<font size=?></font> Tamanho das letras.

<a href="URL"></a> Cria uma hiperligao.

<p></p> Define a rea de um pargrafo.

<img src="FICHEIRO"> Insere uma imagem.

<table></table> Cria uma tabela.

<table border=#> Borda volta de cada clula.

Define o conjunto de frames.

Especifica o documento HTML a

Lio 6: Mais tags HTML

Ser renderizado no navegador assim:

<small>Este texto deve ser com letras em tamanho small.</small>

Ser renderizado no navegador assim:

Posso usar vrias tags simultaneamente?

<b><i>Texto em negrito e itlico.</b></i>

Ser renderizado no navegador assim:

Ser renderizado no navegador assim:

Ser renderizado no navegador assim:

Ser renderizado no navegador assim:

Uau! Isto tudo?

Você também pode gostar