HTML

HTML
Vtor Pimentel
sbado, 30 de Novembro de 2013
HTML HyperText Markup Language

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.
Vtor Pimentel
As bases do HTML
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.
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...
Vtor Pimentel
Regras bsicas de HTML

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>
Vtor Pimentel

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.
Vtor Pimentel

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>
Vtor Pimentel

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>
Vtor Pimentel
Uma primeira pgina

Para criarmos a nossa primeira pgina em HTML, basta
qualquer simples editor de texto, como o Bloco de Notas (Notepad). Podemos comear por inserir o seguinte: <HTML> <HEAD> <TITLE>A minha primeira pgina</TITLE> </HEAD> <BODY> </BODY> </HTML>
Vtor Pimentel
Uma primeira pgina

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.
Vtor Pimentel
Uma primeira pgina

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>).
10
Vtor Pimentel
Uma primeira pgina

Vamos agora fazer a seguinte alterao:
<HTML> <HEAD> <TITLE>A minha primeira pgina</TITLE> </HEAD> <BODY> Ol mundo! </BODY> </HTML>
11
Vtor Pimentel
Uma primeira pgina

Comecemos por acrescentar uma frase:
<BODY> Ol mundo! Chamo-me Eduardo. </BODY> Inesperadamente, o resultado obtido ser:
12
Vtor Pimentel
Uma primeira pgina

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 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.
13 Vtor Pimentel sbado, 30 de Novembro de 2013
Uma primeira pgina

Vamos agora tentar o seguinte: <BODY>
Ol mundo! Chamo-me Eduardo. </BODY> Iremos obter novamente o seguinte resultado:
14
Vtor Pimentel
Uma primeira pgina

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>
15
Vtor Pimentel
Uma primeira pgina

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.
16
Vtor Pimentel
Uma primeira pgina

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.
17
Vtor Pimentel
Uma primeira pgina

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.vpimentel.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">.
18
Vtor Pimentel
Uma primeira pgina

Dica: IMPORTANTE: 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.
19
Vtor Pimentel
Formatao e Aspecto
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>
20
Vtor Pimentel
Formatao e Aspecto
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:
21
Vtor Pimentel
Formatao e Aspecto
Branco: #FFFFFF Preto: #000000 Cinza: #999999 Vermelho: #FF0000 Verde: #00FF00 Azul: #0000FF Amarelo: #FFFF00 Magenta: #FF00FF Ciano: #00FFFF Laranja: #FF6600 Verde escuro: #006600 Azul escuro: #000066
22
Vtor Pimentel
Formatao e Aspecto
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:
23
Vtor Pimentel
Formatao e Aspecto
Alm do aspecto global do texto, podemos tambm escolher o
tipo de letra que 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>
24
Vtor Pimentel
Formatao e Aspecto
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:
25
Vtor Pimentel
Formatao e Aspecto
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>
Formatao e Aspecto
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:
27
Vtor Pimentel
Formatao e Aspecto
O parmetro COLOR, que j vimos aplicado no tag <BODY>,
contm a cor do texto no seu cdigo hexadecimal . 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.
Multimdia: Som e Imagem

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 sbado, 30 de Novembro parametro BACKGROUND, presente na mesma pasta que de a Vtor Pimentel 2013 nossa pgina.
29
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.
30 Vtor Pimentel

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 Vitor</P> <P><IMG SRC=vitor.jpg" ALT="Sou eu!"></P> </BODY>
Vitor
31
Vtor Pimentel

As imagens so objectos inseridos no meio do texto, pelo que a
sua colocao requer algum planeamento: <DIV ALIGN="CENTER"> Ol, sou o Vitor.<IMG SRC=vitor.jpg" ALT="Sou eu!"> Benvindos minha pgina. </DIV> Tem um resultado um pouco infeliz:
Vitor
32
Vtor Pimentel

Vamos ento analizar o tag <IMG>. O parmetro SRC (SouRCe)
indica o ficheiro da imagem. Deve ser um ficheiro .GIF ou .JPG, 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
33
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> sbado, 30 de Novembro de Vtor Pimentel 2013 </P>

Teremos ento uma link para paginadois.htm na imagem
link.gif:
O parmetro BORDER define a largura da borda da imagem. No
34
Vtor Pimentel
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. sbado, 30 de Novembro de
2013

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>
35
Vtor Pimentel
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 Mozilla Firefox 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.
36
Vtor Pimentel

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.
37
Vtor Pimentel
Estrutura usando tabelas

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> sbado, 30 de Novembro de <TABLE Vtor Pimentel ALIGN="CENTER" BORDER="2">
38
2013

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.
J o tag <TR> 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>
39
Vtor Pimentel

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.
41
Vtor Pimentel

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 Vitor 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=vitor.jpg" ALT="Clique para entrar"> </A> </TD></TR> </TABLE> </BODY> </HTML> sbado, 30 de Novembro de
2013
42
Vtor Pimentel

O resultado ser este:
Site de Vitor Carregue na Imagem para entrar Microsoft Internet
43
Vtor Pimentel

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
45
Vtor Pimentel

<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:
47
Vtor Pimentel

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.
48
Vtor Pimentel

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.
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.
Estrutura avanadas: "Frames"

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, teramos, 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 contedo
51
Vtor Pimentel

<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> sbado, 30 de Novembro de Vtor Pimentel </HTML> 2013
52

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
53
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 sbado, 30 de Novembro de espaamento entre frames. Vtor Pimentel
2013

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 os 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
56
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 sbado, 30 de Novembro de frame onde existem. Vtor Pimentel
2013
FIM
57
Vtor Pimentel

HTML

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

HTML

Transféré par

Droits d'auteur :

Formats disponibles

HTML

sbado, 30 de Novembro de 2013

HTML HyperText Markup Language

sbado, 30 de Novembro de 2013

sbado, 30 de Novembro de 2013

Regras bsicas de HTML

sbado, 30 de Novembro de 2013

Regras bsicas de HTML

exemplo: <a> <b> <c> </c> </b> </a>

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

sbado, 30 de Novembro de 2013

Regras bsicas de HTML

sbado, 30 de Novembro de 2013

Regras bsicas de HTML

sbado, 30 de Novembro de 2013

Uma primeira pgina

sbado, 30 de Novembro de 2013

Uma primeira pgina

sbado, 30 de Novembro de 2013

Uma primeira pgina

Que concluso podemos tirar? O texto que aparece como ttulo

sbado, 30 de Novembro de 2013

Uma primeira pgina

sbado, 30 de Novembro de 2013

Uma primeira pgina

<BODY> Ol mundo! Chamo-me Eduardo. </BODY> Inesperadamente, o resultado obtido ser:

sbado, 30 de Novembro de 2013

Uma primeira pgina

<BODY> Ol mundo! <BR> Chamo-me Eduardo. </BODY>

Uma primeira pgina

Ol mundo! Chamo-me Eduardo. </BODY> Iremos obter novamente o seguinte resultado:

sbado, 30 de Novembro de 2013

Uma primeira pgina

sbado, 30 de Novembro de 2013

Uma primeira pgina

sbado, 30 de Novembro de 2013

Uma primeira pgina

sbado, 30 de Novembro de 2013

Uma primeira pgina

sbado, 30 de Novembro de 2013

Uma primeira pgina

sbado, 30 de Novembro de 2013

sbado, 30 de Novembro de 2013

sbado, 30 de Novembro de 2013

sbado, 30 de Novembro de 2013

sbado, 30 de Novembro de 2013

sbado, 30 de Novembro de 2013

sbado, 30 de Novembro de 2013

Multimdia: Som e Imagem

<HTML> <HEAD><TITLE>Pgina com imagem</TITLE></HEAD>

Multimdia: Som e Imagem

sbado, 30 de Novembro de 2013

Multimdia: Som e Imagem

sbado, 30 de Novembro de 2013

Multimdia: Som e Imagem

sbado, 30 de Novembro de 2013

Multimdia: Som e Imagem

Multimdia: Som e Imagem

O parmetro BORDER define a largura da borda da imagem. No

Multimdia: Som e Imagem

sbado, 30 de Novembro de 2013

Multimdia: Som e Imagem

Nota-se que foram utilizados dois tags para fazer a mesma

sbado, 30 de Novembro de 2013