Unidade 4 – Concepção de web sites. Subunidade 2 ... · A linguagem HTML não diferencia as...

- - - - - 1 - - - - -Paula Cardoso Alcobia

Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano

Esco

la S

ecun

dária

S. J

oão

do E

stor

il

Unidade 4 – Concepção de web sites.Unidade 4 – Concepção de web sites.Unidade 4 – Concepção de web sites.Unidade 4 – Concepção de web sites.Unidade 4 – Concepção de web sites.

Subunidade 2 - Construção de páginas Subunidade 2 - Construção de páginas Subunidade 2 - Construção de páginas Subunidade 2 - Construção de páginas Subunidade 2 - Construção de páginas webwebwebwebweb

-Introdução ao HTML

ooooo Tags e elementos

o o o o o Estrutura básica de uma página em HTML

ooooo As tags HTML, HEAD, TITLE e BODY

o o o o o Definições de character entities

o o o o o Tags elementares

ooooo Listas

o o o o o Definição do fundo da página

ooooo Texto nas páginas em HTML

ooooo Uso das cores

ooooo Uso de imagens

ooooo Hiperligações

ooooo Image maps

ooooo Inserção de elementos multimédia

ooooo Tabelas

ooooo Formulários

ooooo Molduras (frames)

o o o o o Promoção do web site

o o o o o Todos os elementos do HTML ordenados alfabeticamente

o o o o o Truques e Dicas

o o o o o Bibliografia



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

1. Introdução ao HTML1. Introdução ao HTML1. Introdução ao HTML1. Introdução ao HTML1. Introdução ao HTML

A linguagem HTMLHTMLHTMLHTMLHTML significa Hypertext Markup LHypertext Markup LHypertext Markup LHypertext Markup LHypertext Markup Languageanguageanguageanguageanguage – Linguagem de Marca-ção de Hipertexto. É uma linguagem universal destinada à elaboração de páginascom hiper-texto, como o nome indica. O conceito de hipertexto é muito simples:certos itens de um documento contêm uma ligação a outra zona do mesmo docu-mento ou, como é mais vulgar a outros documentos.

A principal aplicação do HTML é a criação de páginas da WEB, e convém esclare-cer que não se trata de uma linguagem de programação. O HTML é uma espéciede linguagem de formatação, um ficheiro de texto que é formatado através de umsérie de comandos designado por TTTTTAAAAAGSGSGSGSGS.

Para criar uma página HTML, não é necessário nenhum software especial. ONotepad do Windows é suficiente para a criação de uma página. Para testar apágina é necessário um Browser (Netscape Communicator e/ou Microsoft InternetExplorer).

TAGS (Marcações) e elementosTAGS (Marcações) e elementosTAGS (Marcações) e elementosTAGS (Marcações) e elementosTAGS (Marcações) e elementos

As tags consistem do sinal (<), (o símbolo de “menor que”), seguida pelo nome damarcação e fechada por (>) (“maior que”).

Todas as tags de formatação devem ser abertas e fechadas. O símbolo que terminauma determinada tag é igual aquele que a inicia, antecedido por uma barra (/) eprecedido pelo texto referente.

Exemplo: <tag>

</tag>

Todas as tags obedecem a uma hierarquia, como no seguinte exemplo:

<a> <b> <c> </c> </b> </a> - Correcto

<a> <b> <c> </a> </b> </c> - Incorrecto

O primeiro a abrir é o último a fechar, e vice-versa.

Existem algumas excessões das tags: a tag que indica um final de parágrafo:<P>, não necessita de fechar: </P>. A tag que indica quebra de linha - <br> -também não precisa de fechar, e outras tais como <hr> e <li>.

A linguagem HTML não diferencia as maiúsculas das minúsculas (não é CaseSensitive), pois se escrever uma tag como <html>, <HTML>, <Html>, <hTML>ou <HtMl>, o comando é o mesmo e os browsers vão interpretá-lo da mesmaforma.



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

Estrutura básica de uma página em HTMLEstrutura básica de uma página em HTMLEstrutura básica de uma página em HTMLEstrutura básica de uma página em HTMLEstrutura básica de uma página em HTML

Existem quatro pares de tags que devem ser sempre colocados na página. As tags<HTML> <HTML> <HTML> <HTML> <HTML> e </HTML></HTML></HTML></HTML></HTML> devem englobar todo o conteúdo da página (estar presenteno início e no fim do texto) para indicar ao browser que se trata de um documentoHTML. O documento, por sua vez, está dividido em duas partes: o cabeçalho e ocorpo do texto, cada um indicado por tags diferente. Tudo que estiver entre<HEAD><HEAD><HEAD><HEAD><HEAD> e </HEAD></HEAD></HEAD></HEAD></HEAD> irá compor o cabeçalho, não aparecendo na página. Oelemento principal do cabeçalho é o título do documento, que deve ser colocadoentre <TITLE><TITLE><TITLE><TITLE><TITLE> e </TITLE></TITLE></TITLE></TITLE></TITLE>. Por fim, existe o <BOD<BOD<BOD<BOD<BODY>Y>Y>Y>Y> e </BOD</BOD</BOD</BOD</BODY>Y>Y>Y>Y>, que servepara indicar o corpo do texto.

Exemplo: <HTML> </HTML>

<HEAD> Cabeçalho do documento </HEAD>

<BODY> Corpo do Documento </BODY>

As tags HTML, HEAD, TITLE e BODYAs tags HTML, HEAD, TITLE e BODYAs tags HTML, HEAD, TITLE e BODYAs tags HTML, HEAD, TITLE e BODYAs tags HTML, HEAD, TITLE e BODY

As tags <HTML> e </HTML> servem para indicar ao browser onde começa etermina um documento.

As tags <HEAD> e </HEAD> determina os comandos que devem ser lidos antesde carregar o texto HTML, como por exemplo, métodos de abertura da página,linguagens incorporadas ao texto e o título da página.

A utilização da tag HEAD é opcional, porém ferramentas de pesquisa como oGoogle utilizam esta tag como parâmetro para encontrar palavras-chave que iden-tificarão um site.

As tags que podem ser colocadas na parte HEAD são: base, link, meta, title, style,script.



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

♦ BaseBaseBaseBaseBase: define o URL do documento actual.

Exemplo:Exemplo:Exemplo:Exemplo:Exemplo: <base href=http://www.alcobias.net>

♦ LinkLinkLinkLinkLink: estabelece uma organização hierárquica para a navegação entre documen-tos

Exemplo:Exemplo:Exemplo:Exemplo:Exemplo: <link rel=”index” href=”index.html”>

<link rel=”previous” href=”anterior.html”>

<link rel=”next” href=”seguinte.html”>

♦MetaMetaMetaMetaMeta: serve para definir os atributos identificadores do site como por exemplo oautor da página, os direitos de autor e as palavras-chaves.

Sintaxe:Sintaxe:Sintaxe:Sintaxe:Sintaxe:

<META NAME=”[author/copyright/keywords]” CONTENT=”[Valor do atributo]”>

Exemplo:Exemplo:Exemplo:Exemplo:Exemplo:

<META NAME=”author” CONTENT=”Paula Cardoso Alcobia”>

AtributosAtributosAtributosAtributosAtributos:::::

♦NAME – identifica o identificador que se vai adicionar à página, podendo ser:

- AUTHOR: autor da página.

- COPYRIGHT: direitos de autor

- KEYWORDS: palavras-chave, utilizadas por ferramentas de pesquisapara conhecer o conteúdo do site.

♦ CONTENT – determina o conteúdo do identificador. Se um item possuir mais doque um identificador, então é necessário separá-los por vírgulas.


<HEAD>

<META NAME=”author” CONTENT=”Paula Cardoso Alcobia”>

<META NAME=”copyrigt” CONTENT=”Paula Alcobia”>

<META NAME=”Keywords” CONTENT=”API A, Curso Tecnológico deInformática, 11º Ano, Aplicações Informáticas”>

</HEAD>



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

♦HTTP-EQUIV=”REFRESH”

Um recurso da tag Meta que determina um tempo em segundos, antes que obrowser seja direccionado para outra página.


<html>

<head>

<META HTTP-EQUIV=”REFRESH” CONTENT=”5; URL=http:// www.alcobias.net”>

</head>

veja esta página por 5 segundos e depois verá o portal alcobia.</html>

♦TITLETITLETITLETITLETITLE – é responsável por identificar o título da página, colocando na janela dobrowser, ou seja na barra de títulos.

Sixtaxe:Sixtaxe:Sixtaxe:Sixtaxe:Sixtaxe:

<TITLE> [Título da página] </TITLE>


<head> <title>” ..—..—..—.. Página Pessoal da Paula Cardoso Alcobia ..—..—..—..

</title></head>

♦STYLESTYLESTYLESTYLESTYLE- define um estilo embutido na página.


<style type=”Text/css”> h1.....mine{{{{{text-align:::::center;;;;;color:::::blue}}}}}</style>

♦ScriptScriptScriptScriptScript- inclui scripts no documento. Estes são executados pela ordem que apare-cem no documento.


<HEAD>

<SCRIPT LANGUAGE=”JavaScript”>document.write(“o meu primeiro script”)</script>

</HEAD>



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

As tags <body> e </body> delimitam o corpo do documento. Estas contêm astags e o texto que formam o conteúdo principal da página web, por exemplo pará-grafos, listas, imagens , hiperligações entre outros.

Definições de character entitiesDefinições de character entitiesDefinições de character entitiesDefinições de character entitiesDefinições de character entities

Alguns caracteres tem um significado próprio para o html e por isso, são caracteresreservados, como, por exemplo o símbolo <. Para poder visualizar estes caracteresé necessário recorrer ao uso de character entities.

O character entity é composto por:

-o E comercial(&), o nome ou número da entidade precedido de cardinal(#) e o símbolo ponto e vírgula(;).

Alguns character entities:Alguns character entities:Alguns character entities:Alguns character entities:Alguns character entities:

O HTML 4.01 suporta o conjunto de caracteres ISO 8859-1 (Latin-1,) que contémos caracteres com acentos usados pelas línguas da Europa Ocidental. Os caracte-res acentuados da língua portuguesa podem ser todos obtidos usando este conjuntode caracteres.

Os caracteres da primeira metade do conjunto ISO-8859-1 (códigos desde 0 a127) são os mesmos que os caracteres padrão ASCII de 7 BITs. A maior parte destescaracteres pode ser usada directamente sem necessidade de recorrer a entidadesporque estão sempre disponíveis em todas as máquinas qualquer que seja a suaconfiguração.

Os caracteres finais do conjunto ISO-8859-1 (códigos desde 160 até 255) podemser usados recorrendo a nomes de entidade de carácter definidos em HTML.

Nota: os nomes das entidades são sensíveis ao tipo de letra (maiúscula ou minúscu-la.)

Os caracteres acentuadosOs caracteres acentuadosOs caracteres acentuadosOs caracteres acentuadosOs caracteres acentuados



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

Entidades para caracteres do conjunto ISO 8859-1 (não ASCII)Entidades para caracteres do conjunto ISO 8859-1 (não ASCII)Entidades para caracteres do conjunto ISO 8859-1 (não ASCII)Entidades para caracteres do conjunto ISO 8859-1 (não ASCII)Entidades para caracteres do conjunto ISO 8859-1 (não ASCII)



Esco

la S

ecun

dária

S. J

oão

do E

stor

il



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

Entidades HTML não pertencentes ao conjunto ISO 8859-1Entidades HTML não pertencentes ao conjunto ISO 8859-1Entidades HTML não pertencentes ao conjunto ISO 8859-1Entidades HTML não pertencentes ao conjunto ISO 8859-1Entidades HTML não pertencentes ao conjunto ISO 8859-1



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

EXERCÍCIO 1EXERCÍCIO 1EXERCÍCIO 1EXERCÍCIO 1EXERCÍCIO 1Grupo IGrupo IGrupo IGrupo IGrupo I

⇒ Assinale com uma cruz a resposta correctaAssinale com uma cruz a resposta correctaAssinale com uma cruz a resposta correctaAssinale com uma cruz a resposta correctaAssinale com uma cruz a resposta correcta

1. HTML significa:

!a) HyperText Manipulation Language.

!b) HyperText Markup Language.

!c) HyperText Make Language.

2. Em HTML o tag obrigatório no início de cada página é:

!a) <HEAD>

!b) <TITLE>

!c) <HTML>

3. Todos os tags de formatação devem ser abertos e fechados. Para fechar um tagutilizo o caracter:

!a) /

!b) \

!c) %

4. Para inserir um titulo na página HTML utilizo o tag <TITLE>. Este tem que sercolocado na área:

!a) <HEAD>

!b) <BODY>

!c) <FOOTER>

5. Qual destas tags está realmente certa?:

!a) <BODY>

!b) <body>

!c) </Body>

!d) Todas

!e) nenhuma das anteriores



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

Grupo IIGrupo IIGrupo IIGrupo IIGrupo II

1. Todas as páginas em HTML contêm duas partes.

a. Indique quais?

b. Diga o que contém cada uma delas.

2. Indique se o fecho dos seguintes tags estão correctos. Porquê?

<a> <b> <c> </a> </b> </c>

3. Na sua opinião, a tag <META> é útil?

4.Indique os nomes das entidades para escrever os caracteres maior que e menorque.

5.Escreva o código HTML atribuindo o seguinte:

título à página: “Exercício 1”

nome do autor;

direitos de autor deverá ser atribuído à Escola SJE

palavra-chave = exercicios e HTML



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

EXERCÍCIO 2EXERCÍCIO 2EXERCÍCIO 2EXERCÍCIO 2EXERCÍCIO 2

Criar a primeira página HTMLCriar a primeira página HTMLCriar a primeira página HTMLCriar a primeira página HTMLCriar a primeira página HTML

1º - Abra o Bloco de notas.

2º - Escreva a seguinte tag:

<HTML>

3º- Escreva:

<HEAD>

4º- Escreva:

<TITLE>A minha primeira página HTML</TITLE>

5º- Feche agora o cabeçalho de sua página.

</HEAD>

6º- Escreva:

<BODY>

7º - Para inserir texto escreva:

Páginas HTML podem ser criadas em qualquer editor de texto. Ex: Bloco de notas. Apágina deve ser guardada com a extensão .htm ou .html.

8º - Feche o corpo da página:

</BODY>

9º- Feche a página:

</HTML>

10º - Grave a página com o seguinte nome: exercicio2.html

11º - Abre o browser e veja a sua página.



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

Tags elementaresTags elementaresTags elementaresTags elementaresTags elementares

♦CabeçalhosCabeçalhosCabeçalhosCabeçalhosCabeçalhos

No corpo do texto podem ser colocados até seis níveis de cabeçalhos. A hierarquiacomeça em <H1>, como o maior cabeçalho, e termina em <H6>, como o menor.Os cabeçalhos <H5> e <H6> aparecem tão pequenos no browser que provavel-mente nunca serão usados.


<h1>Isto é um cabeçalho</h1>






O HTML adiciona de forma automática uma linha em branco antes e depois de umcabeçalho.

♦PPPPParágrafosarágrafosarágrafosarágrafosarágrafos

A tag <P> serve para indicar o início de um novo parágrafo. Se a tag <P> forcolocado antes de um cabeçalho (<H2>, por exemplo), a marca de parágrafo éignorada. Nesse caso, o próprio cabeçalho se encarrega de colocar o espaçonecessário.


<p>Isto é um parágrafo</p>

♦Quebras de LinhasQuebras de LinhasQuebras de LinhasQuebras de LinhasQuebras de Linhas

Assim como as marcas de parágrafo, as quebras de linha são indicadas por umatag simples. Para abrir uma nova linha, usa-se a tag <BR>ou "line break".


Isto<br> é um pará-<br>grafo

A tag<br> é uma tag vazia. Ela não pode ter qualquer conteúdo e não tem tag defim (fecho.)

Esco

la S

ecun

dária

S. J

oão

do E

stor

il

♦ComentáriosComentáriosComentáriosComentáriosComentários

As tags de comentário são especiais porque não se escrevem da mesma forma queas tags que representam elementos normais. Os comentários servem para dizer aobrowser que o seu conteúdo é um comentário e não pode ser apresentado grafica-mente.

O exemplo seguinte mostra um comentário:



O facto de termos um ponto de exclamação no início diz ao browser que esta éuma tag especial, a qual não representa um elemento normal da linguagem HTML.

♦DivisõesDivisõesDivisõesDivisõesDivisões

Para dividir uma página com linhas horizontais utiliza-se a tag <hr>. O hr nãopossui uma tag de fecho. O quadro seguinte define os vários atributos desta tag.


Isto é algum texto <hr> Isto é mais texto

o output fica assim:



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

ListasListasListasListasListas

Listas OrdenadasListas OrdenadasListas OrdenadasListas OrdenadasListas Ordenadas

As listas ordenadas são delimitadas pelas tags <ol> e </ol> e cada um dos seusitens é delimitado pelas tags <li> e </li>.

♦<LI> <LI> <LI> <LI> <LI> - Marca um item de lista. Pode ser usado com os tags <DL>, <UL>,<OL>, <DIR> e <MENU>.

Exemplo:Exemplo:Exemplo:Exemplo:Exemplo: <UL>

<LI>Item 1

<LI>Item 2

</UL>

Aceito por: todos os browsers

AtributosAtributosAtributosAtributosAtributos

TYPE=n: modifica o tipo de marca que será colocada antes de cada item da lista.Quando utilizado numa lista ordenada (<OL>), pode modificar o tipo de marcapara um círculo ou um quadrado. TYPE=CIRCLE coloca um círculo vazio (umafalha no Netscape 2.0 para Windows faz com que a mesma opção produza umquadrado vazio). TYPE=DISC coloca um círculo cheio. TYPE=SQUARE coloca umquadrado cheio. Quando utilizado numa lista não ordenada, modifica o tipo decaractere que é utilizado para a contagem. TYPE=A ou TYPE=a coloca marcas emordem alfabética (A, B, C ou a, b, c). TYPE=1 marca os itens em ordem numérica.TYPE=I ou TYPE=i marca os itens com números romanos (I, II, III ou i, ii, iii).

Exemplo: <UL>

<LI TYPE=square>Item 1

<LI>

</UL>

ou

<OL>

<LI TYPE=a>Item 1

<LI>Item 2

</OL>

Aceito por: Netscape 1.1 e Internet Explorer



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

♦<MENU> e </MENU> <MENU> e </MENU> <MENU> e </MENU> <MENU> e </MENU> <MENU> e </MENU> - Marcam o início e o fim de uma lista. Devem ser usa-dos junto com a tag <LI>.

Exemplo:Exemplo:Exemplo:Exemplo:Exemplo: <MENU>

<LI>Item 1

<LI>Item 2

</MENU>


♦<DIR> e </DIR> <DIR> e </DIR> <DIR> e </DIR> <DIR> e </DIR> <DIR> e </DIR> - Marcam o início e o fim de uma lista. Devem ser usados juntocom a tag <LI>.

Exemplo:Exemplo:Exemplo:Exemplo:Exemplo: <DIR>

<LI>Item 1

<LI>Item 2

</DIR>


♦<OL> e </OL> <OL> e </OL> <OL> e </OL> <OL> e </OL> <OL> e </OL> - Marcam o início e o fim de uma lista ordenada. Os itens dalista são colocados em ordem e recebem na primeira linha um número ou letra.Devem ser usados junto com a tag <LI>.

Exemplo:Exemplo:Exemplo:Exemplo:Exemplo: <OL><LI>Item 1

<LI>Iem 2

</OL>


AtributoAtributoAtributoAtributoAtributo

STSTSTSTSTARARARARART=nT=nT=nT=nT=n: especifica o número a partir do qual os itens da lista começam a sercontados. Sendo que n pode ser um número ou uma letra. Também podem serutilizados números romanos.

Exemplo: <OL START=3>

<LI>Item 1

<LI>Item 2

</OL>

Aceito por: Internet Explorer e Netscape 1.1



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

Listas Não Ordenadas(Desordenadas)Listas Não Ordenadas(Desordenadas)Listas Não Ordenadas(Desordenadas)Listas Não Ordenadas(Desordenadas)Listas Não Ordenadas(Desordenadas)

As listas não ordenadas são delimitadas pelas tags <ul> e </ul> e cada um dosseus itens é delimitado pelas tags <li> e </li>.

♦<UL> e </UL> <UL> e </UL> <UL> e </UL> <UL> e </UL> <UL> e </UL> - Marcam o início e o fim de uma lista não ordenada. Deve serusado junto com a tag <LI>. Os itens da lista recebem marcas gráficas na primei-ra linha conhecidas como bullets.


<UL><LI>Item 1

<LI>Item 2

</UL>


Listas de definiçõesListas de definiçõesListas de definiçõesListas de definiçõesListas de definições

As listas de definição são delimitadas pelas tags <dl> e </dl> .Por sua vez, cadaum dos seus itens é delimitado pelas tags <dt> e </dt> e cada uma das suasdefinições delimitado pelas tags <dd> e </dd>.

♦ <DL> e </DL> <DL> e </DL> <DL> e </DL> <DL> e </DL> <DL> e </DL> - Marcam o início e o fim de uma lista de definição. Devem serusados com as tags <DT> e <DD>.

Exemplo: Exemplo: Exemplo: Exemplo: Exemplo: <DL>

<DT>Título</DT>

<DD>Texto</DD>

<DT>Título</DT>

<DD>Texto</DD>

</DL>




Esco

la S

ecun

dária

S. J

oão

do E

stor

il

♦<DT> e </DT> <DT> e </DT> <DT> e </DT> <DT> e </DT> <DT> e </DT> - Marcam os títulos de uma lista de definição. Devem ser usadosjunto com as tags <DL> e <DD>.

Exemplo: Exemplo: Exemplo: Exemplo: Exemplo: <DL>

<DT>Título</DT>

<DD>Texto</DD>

<DT>Título</DT>

<DD>Texto</DD>

</DL>


♦<DD> e </DD> <DD> e </DD> <DD> e </DD> <DD> e </DD> <DD> e </DD> - Marcam o início e o fim do texto de uma lista de definição.Devem ser usados junto com os tags <DL> e <DT>.

Exemplo:Exemplo:Exemplo:Exemplo:Exemplo: <DL>

<DT>Título</DT>

<DD>Texto</DD>

<DT>Título</DT>

<DD>Texto</DD>

</DL>


Resumo dos elementos para as ListasResumo dos elementos para as ListasResumo dos elementos para as ListasResumo dos elementos para as ListasResumo dos elementos para as Listas



Esco

la S

ecun

dária

S. J

oão

do E

stor

il


1º - Abra um novo documento.

2º - Insira as tags principais (html, head, title e body).

3º - No body experimente as tags das listas ordenadas e cabeçalhos:

<h4>Lista Ordenada com números:</h4>

<ol>

<li>Espinafres</li>

<li>Ervilhas</li>

<li>Cenouras</li>

<li>Alfaces</li>

</ol>

<h4>Lista Ordenada com letras maiúsculas:</h4>

<ol type="A">

<li>Espinafres</li>

<li>Ervilhas</li>

<li>Cenouras</li>

<li>Alfaces</li>

</ol>

<h4>Lista Ordenada com letras minúsculas:</h4>

<ol type="a">

<li>Espinafres</li>

<li>Ervilhas</li>

<li>Cenouras</li>

<li>Alfaces</li>

</ol>



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

<h4>Lista Ordenada com números romanos (maiúsculas):</h4>

<ol type="I">

<li>Espinafres</li>

<li>Ervilhas</li>

<li>Cenouras</li>

<li>Alfaces</li>

</ol>

<h4>Lista Ordenada com números romanos (minúsculas):</h4>

<ol type="i">

<li>Espinafres</li>

<li>Ervilhas</li>

<li>Cenouras</li>

<li>Alfaces</li>

</ol>

4º - Feche as tags body e html

5º - Grave o exercício com o seguinte nome: lordenadas.html.



Esco

la S

ecun

dária

S. J

oão

do E

stor

il




3º - No body experimente as tags das listas não ordenadas e cabeçalhos:

<h4>Lista com discos como marca:</h4>

<ul type="disc">

<li>Leite</li>

<li>Água</li>

<li>Café</li>

<li>Galão</li>

</ul>

<h4>Lista com anéis como marca:</h4>

<ul type="circle">

<li>Leite</li>

<li>Água</li>

<li>Café</li>

<li>Galão</li>

</ul>

<h4>Lista com quadrados como marca:</h4>

<ul type="square">

<li>Leite</li>

<li>Água</li>

<li>Café</li>

<li>Galão</li>

</ul>


5º - Grave o exercício com o seguinte nome: lnordenadas.html.



Esco

la S

ecun

dária

S. J

oão

do E

stor

il




3º - No body experimente as tags das listas encaixadas:

<h4>Listas encaixadas:</h4>

<ul>

<li>Leite</li>

<li>Bebidas de menina </li>

<ul>

<li>Cházinho</li>

<li>Garoto</li>

</ul>

</li>

<li>Chocolate</li>

<li>Café</li>

</ul>


5º - Grave o exercício com o seguinte nome: lencaixadas.html.



Esco

la S

ecun

dária

S. J

oão

do E

stor

il




3º - No body experimente as tags das listas de definição:

<h4>Uma Lista de Definições:</h4>

<dl>

<dt>Rum</dt>

<dd>Bebida com alto teor alcoólico. </dd>

<dt>Água das pedras</dt>

<dd>Bebida para senhoras .</dd>

<dt>Bagaço</dt>

<dd>Bebida para Homens.</dd>

</dl>


5º - Grave o exercício com o seguinte nome: ldefinicao.html.



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

Definição do fundo da páginaDefinição do fundo da páginaDefinição do fundo da páginaDefinição do fundo da páginaDefinição do fundo da página

A definição do fundo de um página pode ser feita através da atribuição de uma corou de uma imagem.

Para a definição do fundo da página utilizam-se os atributos bgcolor e backgroundda tag <body>.

♦ O atributo bgcolor O atributo bgcolor O atributo bgcolor O atributo bgcolor O atributo bgcolor

O atributo bgcolor permite-nos escolher a cor de fundo da página. Existem trêsformas de indicar a cor de fundo da página: usando um código de cor hexadecimalum código rgb e um nome de cor.

<body bgcolor="#000000">

<body bgcolor="rgb(0,0,0)">

<body bgcolor="black">

Todas estas formas são válidas para atribuir a cor preta ao fundo da página.

♦ O atributo background O atributo background O atributo background O atributo background O atributo background

O atributo "background" estabelece que o padrão de fundo da página é dado poruma imagem. O valor deste atributo indica o local onde se encontra a imagem. Seas dimensões da imagem forem inferiores às dimensões da página o browser repeti-rá a imagem por forma a ocupar todo o fundo da página.

<body background=”bonecos.gif">

<body background="http://www.clipart.com/smile.gif">

♦Marca de águaMarca de águaMarca de águaMarca de águaMarca de água

No Internet Explorer pode-se controlar o comportamento da imagem de fundo, obackground. Foi criado um atributo para o tag <BODY> chamado BGPROPERTIES.Com a opção BGPROPERTIES=FIXED. O recurso dá a impressão da página ter umamarca d’água e de que o texto flutua sobre o fundo.

<body background=fundo.gif BGPROPERTIES=FIXED>

DicasDicasDicasDicasDicas

Sempre que usar uma imagem de fundo deve-se ter em consideração os seguintesaspectos:

♦ o tamanho da imagem (em KBytes) não ser demasiado grande.

♦ se a imagem de fundo combina bem com a cor do texto.

♦ se o fundo combina bem com as outras imagens que tem na página.

♦ se da repetição a imagem de fundo em mosaico resulta um padrão perfeito.

♦ se a imagem não é incomodativa e não desvia a atenção do texto.



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

Texto nas páginas em HTMLTexto nas páginas em HTMLTexto nas páginas em HTMLTexto nas páginas em HTMLTexto nas páginas em HTML

A linguagem HTML define vários elementos para formatar texto, como por exemploescrever em negrito, itálico, ou sublinhado.

♦ Estilos de caracteres Estilos de caracteres Estilos de caracteres Estilos de caracteres Estilos de caracteres


<B>Texto em negrito</B>

<I>Texto em itálico</I>

<U> Texto sublinhado </U>

As tags de estilo podem ser usados uns sobre os outros, acumulando seus efeitos.

<B><I>Texto em negrito e itálico</I></B><P>

<B><TT>Texto monoespaçado em negrito</TT></B><P>

<I><TT>Texto monoespaçado em itálico</TT></I><P>

<B><TT><I>Texto monoespaçado em negrito e itálico</I></TT></B>



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

Para alterar a cor, o tipo de letra e o seu tamanho nos documentos HTML, utiliza-sea tag <font> que pode conter os atributos opcionais size, color e face.

♦TTTTTamanhos de caracteresamanhos de caracteresamanhos de caracteresamanhos de caracteresamanhos de caracteres -atributo SIZE da tag <FONT>


<FONT SIZE=7>Texto</FONT>

A tag <FONT> pode ser atribuído a qualquer parte do texto, com excepção dostítulos (<H1>, <H2> etc.). Os valores do atributo SIZE variam de 1 a 7.O tama-nho normal do texto nos browsers é equivalente a SIZE=3.

<FONT SIZE=7>Texto com FONT SIZE=7</FONT><P>

A tag <FONT> também pode ser utilizado com um atributo diferente para cadaletra. A aplicação mais óbvia é a colocação de uma capitular, aquela letra emtamanho maior no início de um parágrafo.

<FONT SIZE=7>T</FONT><FONT SIZE=4>exto</FONT>

Também é possível modificar o tamanho de todo o texto de uma vez só colocando atag <BASEFONT> no topo do texto.

<BASEFONT SIZE=5>


<body><FONT SIZE=7>Texto com FONT SIZE=7</FONT><P><FONT SIZE=6>Texto com FONT SIZE=6</FONT><P><FONT SIZE=5>Texto com FONT SIZE=5</FONT><P><FONT SIZE=4>Texto com FONT SIZE=4</FONT><P><FONT SIZE=3>Texto com FONT SIZE=3</FONT><P><FONT SIZE=2>Texto com FONT SIZE=2</FONT><P><FONT SIZE=1>Texto com FONT SIZE=1</FONT><P><FONT SIZE=”-2">Texto com FONT SIZE=-2</FONT><P><FONT SIZE=”-1">Texto com FONT SIZE=-1</FONT><P><FONT SIZE=”+1">Texto com FONT SIZE=+1</FONT><P><FONT SIZE=”+2">Texto com FONT SIZE=+2</FONT><P><FONT SIZE=”+3">Texto com FONT SIZE=+3</FONT><P><FONT SIZE=”+4">Texto com FONT SIZE=+4</FONT><P></body>



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

♦CoresCoresCoresCoresCores

<FONT COLOR=FFFFFF>Texto na cor branca</FONT>

ou

<FONT COLOR=WHITE>Texto na cor branca</FONT>

♦TTTTTipo de Fipo de Fipo de Fipo de Fipo de Fontesontesontesontesontes

Um dos tipos de fontes mais comum é o ARIAL.


<FONT FACE=ARIAL><H1>Título principal</H1>

♦ Alinhamento Alinhamento Alinhamento Alinhamento Alinhamento

A primeira providência para melhorar a aparência da página é modificar o alinha-mento do texto. O alinhamento padrão (com o qual vêm configurados os browsers)é à esquerda. Para mudar o alinhamento padrão deve-se adicionar o atributoALIGN dentro das tags que marcam os títulos e os parágrafos.

<H1 ALIGN=CENTER>Título</H1>

<P ALIGN=CENTER>Este é um parágrafo centralizado.</P>

Desta vez, a tag <P> ganhou uma opção (ALIGN=CENTER). Por isso, é precisoutilizar uma tag (</P>) para indicar que apenas aquele parágrafo receberá umalinhamento diferente.

♦TTTTTexto pré-formatadoexto pré-formatadoexto pré-formatadoexto pré-formatadoexto pré-formatado

Com a pré-formatação, pode-se controlar o espaçamento com a barra de espaço ecolocar o texto em praticamente qualquer lugar da página.

Apesar da vantagem dessa forma de alinhamento arbitrário, o tag <PRE> muda otipo de caractere para uma fonte monoespaçada. Uma fonte monoespaçada éaquela na qual todos os caracteres ocupam o mesmo espaço horizontal, ao contrá-rio da fonte proporcional, na qual o “i” ocupa menos espaço do que o “a”, porexemplo.

Exemplo:

<PRE> Este texto está pré-formatado. </PRE>



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

♦MargemMargemMargemMargemMargem

O texto sempre começa a uma determinada distância da janela do browser. Àsvezes, é necessário aumentar a margem e fazer com que o texto comece mais paradentro da página. As tags <BLOCKQUOTE> e </BLOCKQUOTE> serve paraaumentar a margem. O efeito dessa tag pode ser acumulado para conseguir mar-gens maiores. Veja os exemplos:

<BLOCKQUOTE>Texto com mais margem</BLOCKQUOTE>

<BLOCKQUOTE><BLOCKQUOTE>Texto com mais margem ainda </BLOCKQUOTE></BLOCKQUOTE>

♦ F F F F Formatações Lógicasormatações Lógicasormatações Lógicasormatações Lógicasormatações Lógicas

♦ Marquee Marquee Marquee Marquee Marquee

O Internet Explorer implementa uma forma muito simples de dar movimento aotexto. Uma série de atributos permitem controlar o tipo de rolagem do texto (daesquerda para a direita ou vice-versa), a velocidade e o tamanho, entre outrascoisas.

SintaxeSintaxeSintaxeSintaxeSintaxe::::: <MARQUEE BEHAVIOR=”[SCROLL/SLIDE/ALTERNATE]”

DIRECTION= “[LEFT/RIGHT]”

LOOP=”[1..N/INFINITE]”

ALIGN=”[LEFT/RIGHT/CENTER]” BGCOLOR=”[COR]”

SCROLLAMOUNT=”[ESPAÇO]” SCROLLDELAY=”[TEMPO]”

HEIGHT=”[ALTURA]” WIDTH=”[LARGURA]”

HSPACE=”[ESPAÇAMENTO HORIZONTAL]”

VSPACE =”[ESPAÇAMENTO VERTICAL]”> [LETREIRO] </MARQUEE>



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

BEHAVIOR - define como o texto em movimento vai deslizar no monitor.

Scroll – passa o texto continuamente no mesmo sentido

Slide – o texto parte de um ponto do monitor e vai até outro e para.

Alternate – o texto vai e vem.

DIRECTION - define a direcção em que o texto vai deslizar.

LOOP – determina quantas vezes o texto vai deslizar no monitor.

HEIGHT e WIDTH – altura e largura

HSPACE e VSPACE – determina o espaço em pixeis que deve ficar livre em torno dotexto em movimento. HSPACE - espaço horizontal e VSPACE – espaço vertical.

BGCOLOR – Cor de fundo do texto em movimento

SCROLLAMOUNT e SCROLLDELAY – controlam a velocidade do texto em movimen-to. O SCROLLDELAY define o templo em milissegundos, que o texto em movimentovai demorar em cada um dos quadros.

O SCROLLAMOUNT define a quantidade de pixeis que vai percorrer em cadaquadro.


<MARQUEE BEHAVIOR=Alternate HEIGHT=30 WIDTH=300 DIRECTION=LEFTSCROLLAMOUNT=20 BGCOLOR=BLUE>Olá melguinhas.</MARQUEE>

♦ BLINK - BLINK - BLINK - BLINK - BLINK -Faz com que o texto fique a piscar.


<BLINK> A minha Escola </BLINK>



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

EXERCÍCIO 7EXERCÍCIO 7EXERCÍCIO 7EXERCÍCIO 7EXERCÍCIO 7Formatação de Texto



3º - No body experimente as tags de formatação de texto:

<FONT SIZE=7>Texto com FONT SIZE=7</FONT><P><FONT SIZE=6>Texto com FONT SIZE=6</FONT><P><FONT SIZE=5>Texto com FONT SIZE=5</FONT><P><FONT SIZE=4>Texto com FONT SIZE=4</FONT><P><FONT SIZE=3>Texto com FONT SIZE=3</FONT><P><FONT SIZE=2>Texto com FONT SIZE=2</FONT><P><FONT SIZE=1>Texto com FONT SIZE=1</FONT><P><FONT SIZE=”-2">Texto com FONT SIZE=-2</FONT><P><FONT SIZE=”-1">Texto com FONT SIZE=-1</FONT><P><FONT SIZE=”+1">Texto com FONT SIZE=+1</FONT><P><FONT SIZE=”+2">Texto com FONT SIZE=+2</FONT><P><FONT SIZE=”+3">Texto com FONT SIZE=+3</FONT><P><FONT SIZE=”+4">Texto com FONT SIZE=+4</FONT><P>

<FONT FACE=”ARIAL” COLOR=”BLUE” SIZE=2>

<P ALIGN=”CENTER”>Texto alinhado ao centro. Formatos para alinhamentoALIGN (RIGHT, CENTER e LEFT).</P>

<B>Texto negrito</B>

<I>Texto em Itálico</I>

<U>Texto sublinhado</U>

<SUP>Texto sobrescrito</SUP>

<SUB>Texto subscrito</SUB>

<TT>Texto monoespaço </TT>

<BLOCKQUOTE>texto com margem</BLOCKQUOTE>

<PRE> texto pré- formatado</PRE>

<strong>Isto é texto forte</strong> <br/>

<big>Isto é texto maior</big> <br/>

<em>Isto é texto enfatizado</em> <br/>

<small>Isto é texto mais pequeno</small>


5º - Grave o exercício com o seguinte nome: formatacao1.html.



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

EXERCÍCIO 8EXERCÍCIO 8EXERCÍCIO 8EXERCÍCIO 8EXERCÍCIO 8Formatação de Texto



3º - No body experimente as tags de formatação de texto:

<address>José Manuel Fernandes<br/>

Rua Maria Lucas<br/>

Santa Margarida<br/>

1000 Lisboa</address>

<p>

<abbr title="United Nations">UN</abbr>

<acronym title="World Wide Web">WWW</acronym>

4º - Feche as tags body e html.




8º - Escreva em HTML a formúla H2O3.

9º - Coloque uma linha a dividir o texto com sombra.

10º - Escreva o código para colocar a seguinte frase em negrito, itálico e sublinha-do ao mesmo tempo.

A novela Morangos com Açúcar dá todos os dias na TVI.

11º - Feche as tags body e html.


</p>



Esco

la S

ecun

dária

S. J

oão

do E

stor

il




3º - No body experimente todos os parâmetros para colocar o seu nome em movi-

mento (marquee).

4º - Crie outro texto em movimento que dê duas voltas no ecrã e que pare no ladoesquerdo do monitor.

5º- Coloque como cor de fundo da página a cor azul.

6º - Feche as Tags e grave o seu ficheiro.

7º - Responda às seguintes questões:

7.1.Indique qual os tags para escolher a Fonte, o tamanho e a cor de um determinado texto.

7.2. Qual o significado da tag <P>.

7.3. O tag <BR> dá instruções ao browser para:

!a) fazer uma quebra de página

!b) fazer uma pausa

!c) fazer uma mudança de linha

7.4.Indique a tag que permite colocar um texto a piscar.

7.5.Indique alguns aspectos que se deve ter em conta ao colocar uma ima-gem como fundo da página.



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

Uso de CoresUso de CoresUso de CoresUso de CoresUso de Cores

Os códigos das cores em HTML têm por base a codificação RGB(Red, Green, Blue)e podem ser referenciadas de 3 formas distintas:

- pelo nome da cor em inglês, por exemplo, black;

- pelo sistema de numeração hexadecimal, por exemplo, #FFFF00;

- pelo sistema de numeração decimal, por exemplo, rgb(2,255,0).

Formas de exprimir coresFormas de exprimir coresFormas de exprimir coresFormas de exprimir coresFormas de exprimir cores

Na notação hexadecimal as cores exprimem-se usando três números hexadecimaisque definem as quantidades de encarnado, verde e azul que entram na composiçãode uma determinada cor. O valor mais baixo de uma determinada cor é 0 (#00 nanotação hexadecimal) e o valor mais alto é 255 (#FF em notação hexadecimal.)Assim, a cor preta tem 0 encarnado, 0 verde e 0 azul pelo que se escreve na forma#000000. Já o branco tem 255 encarnado, 255 verde e 255 azul pelo que seescreve como #FFFFFF. O amarelo forte tem 255 de encarnado, 255 de verde ezero de azul e escreve-se como #FFFF00.

A tabela seguinte mostra os resultados de diversas combinações de cores:



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

Nomes de coresNomes de coresNomes de coresNomes de coresNomes de cores

A tabela seguinte mostra as 16 cores cujos nomes foram definidos oficialmente peloW3C. Todos os browsers reconhecem estes nomes pelo que pode usá-los sem qual-quer problema:

♦ Cores com Nomes Atribuídos Oficialmente Cores com Nomes Atribuídos Oficialmente Cores com Nomes Atribuídos Oficialmente Cores com Nomes Atribuídos Oficialmente Cores com Nomes Atribuídos Oficialmente

Cores seguras da WebCores seguras da WebCores seguras da WebCores seguras da WebCores seguras da Web

♦ P P P P Problemas causados por um número reduzido de coresroblemas causados por um número reduzido de coresroblemas causados por um número reduzido de coresroblemas causados por um número reduzido de coresroblemas causados por um número reduzido de cores

Todos os computadores modernos são capazes de mostrar dezenas de milhar oumilhões de cores em simultâneo. Contudo, até meados da década de 1990 muitossistemas apenas conseguiam apresentar 256 cores diferentes de cada vez. Estalimitação obrigava os browsers a trabalharem com uma paleta fixa que continhaapenas 256 cores.

Os browsers eram obrigados a usar apenas 256 cores para simular todas as coresque não conseguiam apresentar. Os efeitos destas aproximações eram visíveis naforma pontos adjacentes com cores diferentes e de manchas de cor. Actualmenteestas limitaçõe já quase não existem.

Como acabámos de ver, na primeira metade da década de 1990, a maioria doscomputadores eram capazes de apresentar apenas 256 cores diferentes de cadavez. Dessas 256 cores, os sistemas operativos Windows e Apple Macintosh reserva-vam 20 cores cada um (40 no total) para desenhar os seus interfaces gráficos.Assim, de um total de 256 cores possíveis, apenas 216 podiam ser escolhidaslivremente com a garantia de poderem ser apresentadas tanto numa máquinaWindows como num Mac. Estas 216 cores receberam a designação de cores segu-ras da Web.

A forma encontrada para limitar as consequências resultantes da utilização de umapaleta com apenas 216 cores consiste em usar apenas cores cujos códigoshexadecimais usam apenas combinações dos números indicados na tabela seguin-te:

RGB 00 51 102 153 204 255

Hex 00 33 66 99 CC FF



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

As 216 cores seguras da Web, juntamente com os seus códigos hexadecimais (ocarácter # no início foi omitido):



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

♦ T T T T Tons de Cinzentoons de Cinzentoons de Cinzentoons de Cinzentoons de Cinzento

As cores cinzentas obtêm-se combinado quantidades iguais de encarnado, verde eazul. A cor branca corresponde ao cinzento mais claro de todos e obtém-se juntan-do 255 de encarnado, 255 de verde e 255 de azul (#FFFFFF em hexadecimal.) Opreto é o cinzento mais escuro de todos e obtém-se colocando todas as cores azero (#000000 em hexadecimal.) Entre estes dois valores extremos temos 254graus de intensidade possíveis.

A tabela seguinte dá uma ideia dos tons de cinzento que podemos obter:

A tabela correspondente ao código das cores seguras pode ser consultada em:http://www.w3schools.com/html/html_colors.asphttp://www.w3schools.com/html/html_colorsfull.asphttp://www.w3schools.com/html/html_colornames.asp



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

Uso de ImagensUso de ImagensUso de ImagensUso de ImagensUso de Imagens

É possível colocar variados formatos de imagens nos documentos HTML, embora,por questões de eficiência e tamanho, os formatos mais comuns são o JPEG, o GIFe o PNG.


<IMG SRC=”[url da imagem]”

ALIGN= “[center/left/right/top/middle/bottom/absmiddle/texttop/baseline/absbottom]”

WIDTH=”[largura]” HEIGHT=”[altura]”

VSPACE=”[espaçamento vertical]”

HSPACE=”[espaçamento horizontal]”

BORDER=”[borda]”

ALT=”[texto alternativo]”

LOWSRC=”[url de baixa qualidade]”>

♦ O elemento <img> e o atributo src. O elemento <img> e o atributo src. O elemento <img> e o atributo src. O elemento <img> e o atributo src. O elemento <img> e o atributo src.

A inserção de imagens num documento faz-se com o elemento <img>. Este ele-mento tem conteúdo vazio, o que significa que ele apenas possui atributos e nãotem a tag de fecho. O atributo src (que é uma abreviação de "source," ou origem)indica o nome e o local em que pode ser encontrado o ficheiro que contém a ima-gem.

Exemplos:Exemplos:Exemplos:Exemplos:Exemplos:

<IMG SRC =”imagem.jpg”> - apresenta uma imagem de nome imagem.jpgque se encontra no mesmo directório dapágina.

<IMG SRC =”/imagem.gif ”> - apresenta uma imagem de nome imagem.gifque se encontra no directório raiz do host.

<IMG SRC =”../imagem.jpg”> - apresenta uma imagem de nomeimagem.jpg que se encontra no directórioum nível abaixo do directório da página.

<IMG SRC =”http://www.alcobias.net/paulacardoso/imagens/imagem.jpg”>- apresenta uma imagem de nomeimagem.jpg que se encontra no siteAlcobia.



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

♦O atributo altO atributo altO atributo altO atributo altO atributo alt

O atributo alt usa-se para definir "texto alternativo" à imagem. Este texto será mos-trado em vez da imagem no caso de o browser não conseguir apresentá-la, e usa-se assim: <IMG SRC=imagem.gif ALT=nome_da_imagem>

Exemplo:Exemplo:Exemplo:Exemplo:Exemplo: <img src="imagem.gif" alt="Escola SJE">

O atributo "alt" deve conter uma descrição daquilo que a imagem contém para queseja possível compreender o seu conteúdo mesmo sem a ver. A utilização do atribu-to "alt" é recomendada porque melhora a acessibilidade das páginas. Este atributopode ser lido em voz alta pelo software de leitura utilizado pelas pessoas que têmdeficiências visuais. Nesses casos, sem o atributo "alt" o conteúdo das imagens seriasempre um mistério.

♦Alinhamento da imagemAlinhamento da imagemAlinhamento da imagemAlinhamento da imagemAlinhamento da imagem

É possível mudar o alinhamento utilizando o atributo ALIGN= dentro da tag<IMG>.

ExemploExemploExemploExemploExemplo: <IMG SRC=imagem.gif ALIGN=TOP>

ALIGN=LEFTALIGN=LEFTALIGN=LEFTALIGN=LEFTALIGN=LEFT faz a imagem“flutuar” à esquerda, en-quanto o texto circunda aimagem pela direita.

ALIGN=RIGHT ALIGN=RIGHT ALIGN=RIGHT ALIGN=RIGHT ALIGN=RIGHT faz a imagem “flutuar” à direita, enquanto o texto circunda a ima-gem pela esquerda.



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

ALIGN=TALIGN=TALIGN=TALIGN=TALIGN=TOPOPOPOPOP alinha o topo da imagem como topo do elemento mais alto da linha, quepode ser uma outra imagem.

ALIGN=TEXTTALIGN=TEXTTALIGN=TEXTTALIGN=TEXTTALIGN=TEXTTOPOPOPOPOP alinha o topo da imagemcom o topo do texto.

ALIGN=MIDDLEALIGN=MIDDLEALIGN=MIDDLEALIGN=MIDDLEALIGN=MIDDLE alinha a base do textocom o centro da imagem.

ALIGN=BOALIGN=BOALIGN=BOALIGN=BOALIGN=BOTTTTTTTTTTOM OM OM OM OM alinha a imagem com abase dos outros elementos da linha.

ALIGN=BASELINE e ALIGN=ABSBOALIGN=BASELINE e ALIGN=ABSBOALIGN=BASELINE e ALIGN=ABSBOALIGN=BASELINE e ALIGN=ABSBOALIGN=BASELINE e ALIGN=ABSBOTTTTTTTTTTOMOMOMOMOMalinham a imagem com a base dos outros.

ALIGN=ABSMIDDLEALIGN=ABSMIDDLEALIGN=ABSMIDDLEALIGN=ABSMIDDLEALIGN=ABSMIDDLE alinha o centro dotexto com o centro da imagem.

♦ContornoContornoContornoContornoContorno

O atributo é BORDER. O valor da borda é expresso em pixels.


<IMG SRC=imagens/imagem.gif BORDER=2>



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

♦MargensMargensMargensMargensMargens

É possível definir as margens separadamente ou em conjunto. Para mais espaço emcima e embaixo da imagem, o atributo é VSPACE. Se o problema for espaço doslados da imagem, usa-se o atributo HSPACE para definir as margens horizontais.

<IMG SRC=imagem.gif” VSPACE=10 HSPACE=20>

Cada um desses atributos (HSPACE e VSPACE) adiciona espaço nas duas faces daimagem (em cima e em baixo e à direita e à esquerda).

♦Baixa resoluçãoBaixa resoluçãoBaixa resoluçãoBaixa resoluçãoBaixa resolução

A inclusão da imagem de baixa resolução é conseguida com a colocação do atri-buto LOWSRC, que indica o ficheiro que será carregado primeiro.

<IMG SRC=altareso.gif LOWSRC=baixares.gif>

No exemplo acima, o arquivo altareso.gif é a imagem definitiva, de alta resolução.O arquivo baixares.gif é a imagem de baixa resolução, que será carregada antes.

♦Controlar a Quebra de linhaControlar a Quebra de linhaControlar a Quebra de linhaControlar a Quebra de linhaControlar a Quebra de linha

Quando aplicamos atributos de alinhamento na imagem, o texto fica colocado aolado da imagem. Quando é necessário quebrar o texto e o próximo parágrafo seapresente após a imagem, então utiliza-se o atributo clear, na tag BR.

Sintaxe:Sintaxe:Sintaxe:Sintaxe:Sintaxe: <BR CLEAR=”[left/right/all]”

Exemplo:

<p align="left"><img src="../imagens/cafevermelhow<p align="left"><img src="../imagens/cafevermelhow<p align="left"><img src="../imagens/cafevermelhow<p align="left"><img src="../imagens/cafevermelhow<p align="left"><img src="../imagens/cafevermelhow.jpg" width="96".jpg" width="96".jpg" width="96".jpg" width="96".jpg" width="96"height="142" align="left">height="142" align="left">height="142" align="left">height="142" align="left">height="142" align="left">O café é a semente de uma planta nativa de África.Sendo diversas as lendas em torno da origem de café existe uma - mais consensual- que atribui a sua descoberta a um pastor da Arábia.

<BR CLEAR=left><BR CLEAR=left><BR CLEAR=left><BR CLEAR=left><BR CLEAR=left> Assim, enquanto acompanhava o rebanho nas pastagens dasmontanhas reparou que este, após ter ingerido as bagas vermelhas de uma plantasilvestre, havia-se tornado mais agitado e vivaz. Estupefacto com a transformaçãono comportamento do rebanho, Kaldi - assim se chamava o pastor - decidira pro-var das mesmas bagas.



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

HiperligaçõesHiperligaçõesHiperligaçõesHiperligaçõesHiperligaçõesAo criar links, é essencial compreender o caminho do ficheiro entre o documentodo qual parte o link e o que está a ser vinculado.

Cada página da Web tem um endereço único chamado Universal Resource Locator(URL).

Existem três tipos de caminhos de link:

•Caminhos absolutos

• Caminhos relativos a documento

• Caminhos relativos à raiz

Caminhos absolutosCaminhos absolutosCaminhos absolutosCaminhos absolutosCaminhos absolutos - fornecem a URL completa do documento vinculado.Porexemplo: http://www.essje.pt/paginashtml/escola/orgaos.htm é um caminho absolu-to. Deve ser utilizado um caminho absoluto para estabelecer um link a um docu-mento noutro servidor.

Caminhos relativos a documentosCaminhos relativos a documentosCaminhos relativos a documentosCaminhos relativos a documentosCaminhos relativos a documentos - são os mais apropriados para os links locaisna maioria dos sites da Web. Eles são particularmente úteis quando o documentoactual e o vinculado estão na mesma pasta, e possivelmente permanecerão juntos.

O caminho relativo a documento também é utilizado para estabelecer um link a umdocumento noutra pasta, especificando o caminho através da hierarquia de pastas,do documento actual ao vinculado. Na especificação desse caminho, não consta aparte da URL absoluta, que é a mesma para ambos os documentos. É fornecidoapenas o segmento do caminho que é diferente.

• Para estabelecer um link a outro ficheiro na mesma pasta que o documento actu-al, basta indicar o nome do ficheiro.

• Para vincular a um ficheiro numa subpasta da pasta do documento actual, forne-ça o nome da subpasta, coloque uma barra inclinada para a direita e, em seguida,o nome do ficheiro.

• Para vincular a um ficheiro numa pasta-mãe daquela onde está o documentoactual, preceda o nome do arquivo por ../ (onde “..” significa “um nível acima nahierarquia de pastas”).

Caminhos relativos à raizCaminhos relativos à raizCaminhos relativos à raizCaminhos relativos à raizCaminhos relativos à raiz - fornecem o caminho da pasta raiz do site a um docu-mento. Pode ser conveniente utilizar esses tipos de caminhos ao trabalhar num sitegrande da Web, que use vários servidores, ou um servidor que hospede diversossites diferentes. Contudo, se não estiver familiarizado com este tipo de caminho,pode ser melhor continuar a usar os caminhos relativos a documento.

Um caminho relativo à raiz inicia com uma barra inclinada para a direita, querepresenta a pasta raiz do site. Por exemplo: /escola/orgaos.html é um caminhorelativo à raiz .



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

♦ Diversos tipos de links Diversos tipos de links Diversos tipos de links Diversos tipos de links Diversos tipos de links

- uma imagem com um link:- uma imagem com um link:- uma imagem com um link:- uma imagem com um link:- uma imagem com um link:

<a href="contactos.htm"><img src="contactos.gif" ></a>

-um link a outra site:um link a outra site:um link a outra site:um link a outra site:um link a outra site:

<a HREF=http://www.essje.pt>HTML Página da Escola</a>

-um link para um link para um link para um link para um link para downloaddownloaddownloaddownloaddownload:::::

<a HREF= “Exemplos.ZIP”> Faça o Download Aqui</a>

- um link a outra página do mesmo site:- um link a outra página do mesmo site:- um link a outra página do mesmo site:- um link a outra página do mesmo site:- um link a outra página do mesmo site:

<a HREF= “alunos.html”></a>

Podem ser criados diversos tipos de links num documento:

• Um link a outro documento ou ficheiro, como um ficheiro de imagem,filme, PDF ou som.

• Um link de âncora com nome, que salta para uma localização específicanum documento.

• Um link de correio electrónico, que cria uma nova mensagem com o ende-reço do destinatário já preenchido.

• Os links nulos e de script, que permitem anexar comportamentos a umobjecto ou criar um link que execute código JavaScript.

O elemento <a> serve para criar uma ligação ("link") para outro documento. Aligação pode apontar para qualquer recurso disponível na Web: uma página escritaem HTML, uma imagem, um ficheiro de som, um filme, etc.


<a href="url">Texto a mostrar</a>

O atributo href(Hipertext REFerence) contém o endereço (URL) do recurso ao qual sefaz a ligação. Aquilo que está dentro do elemento constitui o material visível sobreo qual se deve clicar para ligar ao recurso.

Nota:Nota:Nota:Nota:Nota: todos os ficheiros referidos numa página, quer links a outras páginas, querimagens,etc, devem ser escritos em minúsculas, pois a grande maioria dos servido-res Web fazem a distinção entre maiúsculas e minúsculas.



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

♦O atributo targetO atributo targetO atributo targetO atributo targetO atributo target

O atributo target permite-nos abrir a ligação numa janela ou moldura ("frame")diferente daquela em que foi feito o clique.Os valores padrão são:

_blank (uma nova janela)

_self (própria janela)

_top (na janela principal do browser, em casos de frames)

_parent (só para ligações que estão numa moldura, ou "frame") a ligaçãoabre-se no documento que contém a moldura (que terá sido criada atravésde um <frame> ou de um <iframe>)

nome a especificar (nome da frame)

♦O atributo nameO atributo nameO atributo nameO atributo nameO atributo name

O atributo name usa-se para dar um nome único à âncora. Este nome serve paramarcar o lugar em que a âncora se encontra e tornar possível saltar directamentepara esse local a partir de outros documentos ou de outros pontos do mesmo docu-mento sem que o utilizador tenha de se deslocar na página.

A criação de um link a uma âncora com nome é um processo em duas etapas. Primeiro, crieuma âncora com nome e, em seguida, crie um link a essa âncora.

SintaxeSintaxeSintaxeSintaxeSintaxe de uma âncora: <a name="nome">Texto a mostrar</a>

O atributo name dá uma nome único ao local em que se encontra a âncora. Essenome pode ser um texto à sua escolha e não deve ser repetido em nenhuma outraâncora que esteja no mesmo documento.

A linha seguinte define uma âncora com um nome:

<a name="topo">Voltar ao Menu</a>

Nota: uma âncora com atributo name não pode ter atributo href. Por isso ela não ésensível a cliques. Ela serve apenas para marcar um local do documento para oqual podem apontar outras ligações.

Depois de darmos um nome a um local do documento podemos ligar directamentea ele.

<a href="#topo">Topo</a>



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

Exemplo de âncorasExemplo de âncorasExemplo de âncorasExemplo de âncorasExemplo de âncoras

link à âncoratopo

âncora topo

♦ Âncora TÂncora TÂncora TÂncora TÂncora Topo:opo:opo:opo:opo:<p><font color="#990000" size="5" face="Arial, Helvetica, sans-serif"><a<a<a<a<aname="Tname="Tname="Tname="Tname="Topo"></a>opo"></a>opo"></a>opo"></a>opo"></a>Grãos</font></p>

♦ Link à âncora T Link à âncora T Link à âncora T Link à âncora T Link à âncora Topo:opo:opo:opo:opo: <a href="#topo">Topo</a>

♦ Cores dos links Cores dos links Cores dos links Cores dos links Cores dos links

A cor dos links é definida na tag <BODY>.

<BODY LINK=RED ALINK=BLUE VLINK=GREEN>

Onde:

LINK determina a cor dos links não visitados

ALINK determina a cor que os links devem ter quando clicados

VLINK determina a cor dos links já visitados

♦ Link de correio electrónico Link de correio electrónico Link de correio electrónico Link de correio electrónico Link de correio electrónico

Um link de correio electrónico abre uma nova janela de mensagem sempre que for clicado.Para que um link seja identificado como link de correio electrónico é necessário escrever antesdo endereço electrónico a palavra mailto:mailto:mailto:mailto:mailto:.Exemplo para criar um link de correio electrónico:

<a href="mailto:mailto:mailto:mailto:mailto:[email protected]">Contacto através de E-mail</a>



Esco

la S

ecun

dária

S. J

oão

do E

stor

il


1º - Dentro da pasta 1112\API\, está uma pasta designada por Exercicio10 .Copie essa pasta para dentro da sua.

2º- Abra um novo documento e grave sempre dentro da pasta copiada anteriormen-te.

3º - Insira as tags principais (html, head).

4º - Atribua como título à pagina o seguinte: A primeira página do (escreva o seunome).

5º - No body coloque a seguinte cor de fundo da página: #C0C0C0.

6º - Escreva o seguinte texto: Imagens. O tipo de letra é Arial, o tamanho é de 7 ea cor é a seguinte:#FF9966, negrito e centrado.

7º - Coloque um parágrafo.

8º - Insira o seguinte botão: fotografia.gif, que se encontra na pasta /imagens/botoes/. O texto alternativo desta imagem deverá ser Fotografias.


10º -Insira outro botão: clipart.gif, que se encontra na pasta /imagens/botoes/. Otexto alternativo desta imagem deverá ser Clipart.


12º - Insira a última imagem: correio.gif que se encontra na pasta/imagens/clipart/diversos. O texto alternativo deverá ser: correio electrónico.

13º - Nesta imagem insira um link de correio electrónico. O e-mail é oseguinte:[email protected]

14º - Insira uma linha divisória.

15º - Escreva o seguinte: Última actualização: (data). Com o nível de cabeçalhoigual a 4 e alinhado à direita.

16º- Feche as Tags e grave esta página com o nome de index.

17º - Vamos agora criar as outras páginas com a cor de fundo branco.

18º - Abra um novo ficheiro e atribua como titulo: Clipart.

19º - Escreva o seguinte texto: Clipart. O tipo de letra é Arial, o tamanho é de 7 ea cor é a seguinte:#FF9966, negrito e centrado.


21º - Escreva “Animais”, faça mudança de linha e escreva “Meninas”, faça nova-mente mudança de linha e escreva “Diversos”. O tipo de letra é Arial, o tamanho éde 3 e a cor é a seguinte:#000000.



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

22º - Coloque um parágrafo, uma linha divisória e novamente um parágrafo.

23º - Coloque um subtítulo: Animais (tamanho 5 e centrado).Faça parágrafo.

24º - Insira todas as imagens de animais que se encontram na pastaimagens\clipart\animais.Em cada imagem faça um parágrafo.

27º - Escreva o seguinte TOPO (depois das imagens). Centrado e tamanho 4.

26º - Insira novamente uma linha divisória.

27º - Proceda todos s passos(23º até ao26º) para criar as meninas e os diversos.

28º - Vamos criar âncoras.Coloque as seguintes âncoras: inicio; animais, meninase diversos. Faça todos os links necessários.

29º - No fim da página coloque o botão voltar, que se encontra na pasta\imagens\botoes\. O botão deve estar centrado e deve ter um link para a páginaindex.

30º - Grave este documento com o seguinte nome: clipart.html e grave dentro dapasta ficheiroshtml.

31º- Faça agora a página das Fotografias. Grave na pasta ficheiros html e com oseguinte nome fotos.html.

32º- Abra a página index.html e faça os links para as outras páginas.



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

Um mapa de imagens é uma imagem que foi dividida em regiões, ou pontos acti-vos; quando um ponto activo é clicado, ocorre uma acção (um novo ficheiro éaberto, por exemplo).

O conjunto destes pontos activos permite criar diferentes formas, como círculos,rectângulos e polígonos, construindo, desta forma um mapa de imagem, em quecada uma das formas geométricas possibilita uma hiperligação para outro docu-mento.

♦ Definir as zonas das imagens Definir as zonas das imagens Definir as zonas das imagens Definir as zonas das imagens Definir as zonas das imagens

Para definir as zonas das imagens é necessário conhecer as coordenadas dos pon-tos essenciais, que identificam as formas dessas zonas num mapa de imagem.

♦ Criação de server Criação de server Criação de server Criação de server Criação de server-----side e clientside e clientside e clientside e clientside e client-----side image mapsside image mapsside image mapsside image mapsside image maps

A criação de mapas pode ser feita de duas formas: criação do mapa do lado doservidor (server-side image map) ou do lado do cliente ( client-side image map).

A criação do mapa de imagem do lado do servidor, método inicialmente usado, éguardar e executar no servidor web, como recurso ao CGI, um mapa separado dodocumento. Se a grande vantagem é ser suportado por todos os browsers, o maiorinconveniente é provocar uma carga de processamento no próprio servidor, peloque se torna difícil encontrar quem permita este tipo de processo nos seus servido-res.

Para utilizar este método é necessário referenciá-lo através do atributo ismap da tagimg. Este atributo indica ao browser que a referida imagem não é umahiperligação, mas sim o fundo sobre a qual estarão as hiperligações definidas nomapa.

<a href=”nome_do_ficheiro_do_mapa_de_imagem.map”>

<img src=”nome_do_ficheiro_de_imagem.gif ” ismap> </a>

A criação do mapa de imagem do lado do cliente é feita aproveitando a capacida-de de processamento deste. Para utilizar este método é necessário enviar o mapa deimagem dentro do documento HTML, indicando ao browser o que fazer, através dautilização do atributo usemap da tag img. Este atributo indica ao browser que areferida imagem é o fundo sobre o qual estão as hiperligações definidas no mapa.

<img src=” nome_do_ficheiro_de_imagem.gif ” usemap=”nome do mapa de ima-gem” alt=””>

Para definir um mapa de imagem utiliza-se as tags <map> e </map>. Dentrodesta tag, utiliza-se a tag <area> que contém os atributos que permitem definir aszonas do mapa de imagem e as respectivas hiperligações, entre outros.

Image mapsImage mapsImage mapsImage mapsImage maps



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

♦ Atributos da tag <area> Atributos da tag <area> Atributos da tag <area> Atributos da tag <area> Atributos da tag <area>

♦ Os atributos id e name da tag <map> Os atributos id e name da tag <map> Os atributos id e name da tag <map> Os atributos id e name da tag <map> Os atributos id e name da tag <map>



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

<html>

<head>

<title>Exemplo</title>

</head>

<body>

<img src=”botoes/principal.gif ” width=”800" height=”100" align=”top”bordercolor=”#FFFFFF”border=”0" usemap=”#bannerusemap=”#bannerusemap=”#bannerusemap=”#bannerusemap=”#banner”””””>

<map id= "banner" name="banner">

<area shape=”rect” coords=”189,81,288,100" href=”index.html” target=”_self ”alt=”Página Principal”> <area shape=”rect” coords=”323,81,425,102" href=”paginas/trabalhos.html”target=”_self ” alt=”Trabalhos por mim realizados”>

</map>

<p><b>Nota:</b> O atributo "usemap" utilizado com o elemento

img refere-se ao atributo "id" ou ao atributo

"name" (depende do browser) existente num elemento map. Por

isso, se queremos garantir a compatibilidade da página

com todos os browsers, devemos aplicar ambos os atributos ("id" e

"name") ao elemento map.</p>

</body>

</html>


♦ Compatibilidade com os vários browsers Compatibilidade com os vários browsers Compatibilidade com os vários browsers Compatibilidade com os vários browsers Compatibilidade com os vários browsers

Para tornar o HTML compatível com os browsers como o Netscape e afins, deve-seacrescentar o atributo id à tag <map>, já que este não reconhecem o atributoname.

<map id= "banner" name="banner">



Esco

la S

ecun

dária

S. J

oão

do E

stor

il


1º - Dentro da pasta 1112\API\, está uma pasta designada por Exercicio11. Co-pie essa pasta para dentro da sua.

2º- Abre o software Mapedit (software shareware para utilização de imagensmapeadas).

3º - No mapedit abra a imagem Portugal.gif.

4º - Clique no ícone add polygons e faça o contorno às diversas regiões conformeimagem.

ícone add polygons

5º - Depois de fazer o contorno, minimize o software Mapedit e abra o softwareCoffeCup.

Nota: em casa região deverá ter o link e o respectivo título. Exemplo para Lisboa olink será lisboa.html e o título: Lisboa.

6º - Faça File - New Blank page.

7º - Atribua um título à página.

8º - Insira a imagem Portugal.gif (vejo o código).



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

<img src=”imagens/Portugal.gif ” width=”234" height=”439" border=”0"alt=”Mapa de Portugal” usemap=”#Pusemap=”#Pusemap=”#Pusemap=”#Pusemap=”#Portugal”ortugal”ortugal”ortugal”ortugal”>

9º - No software Mapedit, clique no ícone HTML e copie o código para o softwarecoffecup, mas apenas a parte das tags <map> </map>.

10º - Deverá ter algo semelhante, ao seguinte código, excepto no que diz respeitoàs coordenadas(coords).

<map id=”Portugal” name=”Portugal”><area shape=”poly” coords=”169,93,170,102,171,106,175,100,179,98,182,93,189,94,197,88,195,82,202,76,211,71,219,64,225,55,227,44,217,43,211,39,207,37,207,24,208,17,202,14,196,16,183,19,175,14,169,22,159,24,144,29,140,27,128,24,102,30,102,20,111,9,94,7,69,17,64,33,70,47,70,62,76,87, 81,102,83,114,92,111,103,106,99,114,111,97,123,95,138,101,139,110,145,107,149,112,155,116,156,100,157,93"href=”norte.html” title=”Norte” /><area shape=”poly”coords=”65,221,69,211,80,197,93,198,109,198,106,210,116,214,117,226,125,207,127,216,127,219,143,211,152,206,170,208,180,199,184,185,180,174,181,159,190,152,188,137,188,122,187,110,185,99,174,104,164,99,163,110,157,119,141,113,131,105,115,104,108,119,87,121,78,104,68,161,56,193"href=”centro.html” title=”Centro” /><area shape=”poly” coords=”39,312,59,302,68,303,80,289,88,274,103,278,99,266,97,244,110,232 ,129,226,107,214,81,205,74,227,59,223,54,209,31,236,30,263,24,281,41,287,49,267,62,269,57,290,46,297,40,294"href=”lisboa.html” title=”Lisboa” /><area shape=”poly” coords=”134,223,149,217,167,251,170,269,156,304,169,334,146,377,118,398,97,388,79,395,69,395,71,339,72,318,87,306,99,292,113,283,114,267,117,242,129,239"href=”alentejo.html” title=”Alentejo” /><area shape=”poly” coords=”68,401,57,425,71,419,86,420,110,422,121,429,143,418,153,406,144,394,126,406,103,408,94,402,88,403"href=”algarve.html” title=”Algarve” /><area shape=”default” nohref=”nohref” alt=”” /></map>

11º - Grave esta página com o nome index.

12º- Crie 5 páginas html, uma para cada região. Nelas coloque um Cabeçalhocom o nome da região, uma fotografia que se encontra na pasta imagens da res-pectiva região e um link à página index com a designação de voltar.

13º - No caso de dúvidas poderá visualizar a resolução.



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

Inserção de elementos multimédiaInserção de elementos multimédiaInserção de elementos multimédiaInserção de elementos multimédiaInserção de elementos multimédia

Gifs animados Gifs animados Gifs animados Gifs animados Gifs animados

Para inserir um gif animado num documento html utiliza-se a tag <img> e indica-se o nome do ficheiro que se deseja abrir através do seu atributo src.

<img src=”nome do ficheiro do gif animado”>

VídeoVídeoVídeoVídeoVídeo

A Microsoft inventou um atributo chamado DYNSRC (de dynamic source, fontedinâmica) para ser incluído dentro do tag <IMG>. O formato do ficheiro de vídeosuportado é o AVI (Audio Video Interleave).

<IMG DYNSRC=video.avi SRC=imagem.gif WIDTH=50 HEIGHT=50START=MOUSEOVER LOOP=INFINITE>

O atributo START=MOUSEOVER indica que o vídeo começará a ser executadoquando o utilizador passar o mouse sobre ele. O atributo LOOP=INFINITE declaraque o vídeo será visualizado continuamente até que o utilizador mude de página.

Outros atributos são:Outros atributos são:Outros atributos são:Outros atributos são:Outros atributos são:

START=FILEOPEN: o vídeo começa a ser visualizado assim que a página é carrega-da

CONTROLS: adiciona um conjunto de botões para controlar a execução do vídeo

LOOP=n: Executa o vídeo “n” vezes. Se for colocado LOOP=5, o vídeo serávisualizado cinco vezes.

LOOPDELAY=n: especifica, em milisegundos, de quanto em quanto tempo o vídeoserá executado quando colocado em loop.

SOMSOMSOMSOMSOM

Para colocar som, a Microsoft criou o tag BGSOUND. Pode-se incluir áudio nosformatos WAV, AU ou MIDI.

<BGSOUND SRC=som.wav LOOP=INFINITE>

♦

♦

♦



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

F F F F Ficheiros de vídeo e áudio embebidos e ancoradosicheiros de vídeo e áudio embebidos e ancoradosicheiros de vídeo e áudio embebidos e ancoradosicheiros de vídeo e áudio embebidos e ancoradosicheiros de vídeo e áudio embebidos e ancorados

Para embeber ou inserir um ficheiro de som ou de vídeo num documento HTMLutiliza-se a tag <embed>. Quando se utiliza esta tag, os ficheiros de som podemser automaticamente reproduzidos utilizando suplementos ou plug-ins e surgemcomo objecto a ser controlado na página web.

Caso o suplemento ou plug-in não exista, o browser reagirá com uma das trêspossibilidades: ignora a instrução, pergunta o que deseja fazer com o ficheiro ouindica que necessita de um suplemento e se gostaria de o descarregar.

A tag embed tem como principais atributos o src, que se iguala ao url do ficheiro aembeber, o autostart, o hidden e o loop, que pode assumir valores True ou false.

Autostart – define se o objecto deve ser iniciado imediatamente após ter sido carre-gado.

Hidden – define se o objecto deve ser visível na página web.

Loop – reproduz continuamente o ficheiro.

Áudio:Áudio:Áudio:Áudio:Áudio:

<embed src=”nome do ficheiro de som” autostart=True hidden=False loop=Falsewidth=145 height=55 align=”center”> </embed>

Video:Video:Video:Video:Video:

<embed src= “nome do ficheiro de video” autostart=false loop=Falsealign=”center”> </embed>

<a href= “nome do ficheiro de vídeo”> Texto associado à hiperligação </a>

♦



Esco

la S

ecun

dária

S. J

oão

do E

stor

il


1º - Abre o software Ani_gif.

2º - Clique no ícone B, conforme imagem:

3º - Aparece-lhe outra caixa de dialógo, confor-me imagem:

4º - Aqui escreva na parte Text o seuNome, altere as cores do fundo , do textoe da sombra. Altere também o tipo deletra.A altura e a largura. Quanto àaltura deverá ser de 100 e a largura de600.

5º - Faça Ok.

6º - Seguidamente, ao seu banner aplique efeitos e transições. Para aplicar efeitosclique no ícone E e para aplicar transições clique no ícone T.

7º - Altere os parâmetros do seu banner (Preferences- Parameters), conforme ima-gem:

8º - Por último grave o seu ícone numa nova pasta designada por exercício 12,com o seguinte nome: banner.

9º - Abra o coffecup e crie um novo documento.

10º - No novo documento insira o banner criado.

11º - Visualize o seu documento e grave com o nome de banner.html.



Esco

la S

ecun

dária

S. J

oão

do E

stor

il


1º - Abre o software gif animater.

2º - Abra a imagem urso1.gif. As imagens estão na pasta exercício13\imagens.

3º - Insira uma nova imagem - urso2.gif.Faça adicionar frame.

4º - Insira alternadamente os ursos até ter 6ou 8 frames.

5º - Altere as propriedades da animação.Para tal clique no separador Animation ealtere as seguintes propriedades:

- seleccione a caixa do looping.

- seleccione a caixa Repeat Forever.

Atenção: todas as frames tem que estarseleccionadas.

6º - Seguidamente aceda ao separadorImage. Na caixa Duration- escreva 30. Na

parte relativa ao Undraw Method, escolha restore background. Clique também nacaixa de Transparency.

7º - Clique no botão play para visualizar a sua animação.

8º - Grave a sua animação na pasta imagens.

9º - Entre no coffecup e crie um novo documento.

10º - No novo documento, insira a imagem animada criada anteriormente.

11º - Visualize o seu ficheiro html.

12º - Grave o seu ficheiro HTML, com o nome de animacao.html.

Adicionar frame



Esco

la S

ecun

dária

S. J

oão

do E

stor

il


1º - Dentro da pasta 1112\API\, está uma pasta designada por Exercicio14 . Co-pie essa pasta para dentro da sua.

2º- Abra um novo documento e grave sempre dentro da pasta copiada anteriormen-te.

3º - Coloque um titulo na sua página.

4º - Coloque a seguinte informação: Ficheiro Multimédia - como cabeçalho (h1).

5º - Seguidamente escreva Vídeo como cabeçalho (h4).

6º - Insira o vídeo - video.wmv na sua página html.

7º -Deverá centrar toda a informação contida na página.

8º - Grave o ficheiro com o seguinte nome:video.html.


10º - Coloque um titulo na sua página.

11º - Coloque a seguinte informação: Ficheiro Multimédia - como cabeçalho (h1).

12º - Seguidamente escreva Música dos D’ZRT como cabeçalho (h4).

13º - Insira a música- musica.mp3 na sua página html.

14º - Insira as fotografias do grupo.

15º -Deverá centrar toda a informação contida na página.

16º - Grave o ficheiro com o seguinte nome:som.html.

Nota: Deverá correr o ficheiro no internet Explorer.

Exemplo do ficheiro de som



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

TabelasTabelasTabelasTabelasTabelas

As tabelas definidas em HTML têm permitido apresentar dados em forma tabular econstruir arranjos de página complexos.

♦Definir tabelasDefinir tabelasDefinir tabelasDefinir tabelasDefinir tabelas

A tabelas definem-se com o elemento <table>. Uma tabela divide-se em linhas(com o elemento <tr>, cujo nome deriva de "table row"), e cada linha divide-se emcélulas (definidas com o elemento <td>, cujo nome deriva de "table data")). Umacélula pode conter dados, texto, imagens e outros elementos do HTML.


<TABLE WIDTH=”[largura]” HEIGHT=”[altura]”

ALIGN=”[left/center/right]”

BGCOLOR=”[cor]” BACKGROUND=”[url]”

CELLPADDING=”[distanciamento]”

CELLSPACING=”[espaçamento]”

BORDER=”[espessura]” BORDERCOLOR=”[cor]”

BORDERCOLORDARK=”[cor]” BORDERCOLORLIGHT=”[cor]”

FRAME=”[estilo borda]”>

<TR ALIGN=”[left/center/right]” VALIGN=”[top/middle/bottom]”

BGCOLOR=”[cor]” BACKGROUND=”[URL]”>

<TD WIDTH=”[largura]” HEIGHT=”[altura]”

CELLPADDING=”[distanciamento]”

CELLSPACING=”[espaçamento]”

ALIGN=”[left/center/right]”

VALIGN=”[top/middle/bottom]”

BGCOLOR=”[cor]” BACKGROUND=”[url]”

COLSPAN=”[celulas]” ROWSPAN=”[celulas]” >

[conteudo]

</TD>

</TR>

</TABLE>



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

Atributos:Atributos:Atributos:Atributos:Atributos:

♦WIDTHWIDTHWIDTHWIDTHWIDTH – determina a largura da tabela ou da célula e aceita valores em pixeis ouem percentagem.

♦HEIGHTHEIGHTHEIGHTHEIGHTHEIGHT - determina a altura da tabela ou da célula e aceita valores em pixeis ouem percentagem.

♦ALIGNALIGNALIGNALIGNALIGN – determina o alinhamento da tabela em relação à página.

♦VVVVVALIGNALIGNALIGNALIGNALIGN – determina o alimento vertical do conteúdo de uma célula. O valor-padrão para a maioria dos browsers é centralizado (middle).

♦BGCOLBGCOLBGCOLBGCOLBGCOLOROROROROR – Determina a cor de fundo.

♦BABABABABACKGROUNDCKGROUNDCKGROUNDCKGROUNDCKGROUND – atribui uma imagem de fundo à sua tabela, linha ou célula.

♦CELLPCELLPCELLPCELLPCELLPADDINGADDINGADDINGADDINGADDING – determina em pixeis a distância existente entre as bordas dacélula e o seu conteúdo.

♦CELLSPCELLSPCELLSPCELLSPCELLSPAAAAACINGCINGCINGCINGCING – determina o espaço em pixeis existente entre uma borda e outra.

♦BORDERBORDERBORDERBORDERBORDER – determina a espessura do limite da tabela. O padrão é sem limite.

♦BORDERCOLBORDERCOLBORDERCOLBORDERCOLBORDERCOLOROROROROR – determina a cor do limite (borda) da tabela.

♦BORDERCOLBORDERCOLBORDERCOLBORDERCOLBORDERCOLORDORDORDORDORDARKARKARKARKARK – como os limites da tabela apresentam a coloração deforma diferente para criar a sensação de tridimensão, podemos determinar deforma diferente as cores do lado escuro e do lado claro da tabela. O atributo♦BORDERCOLBORDERCOLBORDERCOLBORDERCOLBORDERCOLORDORDORDORDORDARK - ARK - ARK - ARK - ARK - determina a cor do lado escuro da borda (à esquerda eacima da tabela).

♦BORDERCOLBORDERCOLBORDERCOLBORDERCOLBORDERCOLORLIGHT ORLIGHT ORLIGHT ORLIGHT ORLIGHT – determina a cor do lado claro da borda (à direita eabaixo da tabela.

♦FRAME FRAME FRAME FRAME FRAME – podemos alterar o posicionamento dos limites de uma tabela. Os valoresválidos para o atributo frame são:

Void – elimina os limites externos

Above – apenas o limite superior

Below – apenas o limite inferior

Hsides – lados horizontais, ou seja, os limites de cima e de baixo.

Vsides – lados verticais, esquerda e direita da tabela

Lhs – limite do lado esquerdo

Rhs – limite do lado direito

Box – limite completo (padrão)

Border – limite completo (padrão)



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

♦ COLSPCOLSPCOLSPCOLSPCOLSPANANANANAN – Atributo que une duas ou mais células horizontalmente

♦ ROWSPROWSPROWSPROWSPROWSPANANANANAN – Atributo que une duas ou mais células verticalmente


<table border="1">

<tr>

<td>linha 1, célula 1</td>


</tr>

<tr>



</tr>

</table>

♦ Definição das áreas da tabela Definição das áreas da tabela Definição das áreas da tabela Definição das áreas da tabela Definição das áreas da tabela

As tags de definição das áreas da tabela são:

<THEAD>: cabeçalho da tabela, posiciona a linha no início da tabela.

<TFOOT>: rodapé da tabela, posiciona a linha no fim da tabela.

<TBOBY>: corpo da tabela, posiciona a linha no fim da tabela.

Basicamente as tags de definição de áreas da tabela comportam-se como a tag delinha (<TR>) e aceitam os mesmos parâmetros.


<table border = "1">

<thead>

<tr>

<td>Este texto está sob um elemento</td>

</tr>

</thead>



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

<tfoot>

<tr>

<td>Este texto está sob um elemento tfoot</td>

</tr>

</tfoot>

<tbody>

<tr>

<td>Este texto está sob um elemento body</td>

</tr>

</tbody>

</table>

♦ Título da tabela Título da tabela Título da tabela Título da tabela Título da tabela

Para activar um título para uma tabela, deve-se utilizar a tag CAPTION.


<CAPTION ALIGN=”[left/center/right]” VALING=”[top/bottom]”> [titulo]

</CAPTION>


<table border="1">

<caption>Isto é uma legenda</caption>

<tr>

<td>Célula 1</td>

<td>Célula 2</td>

</tr>

</table>



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

Exercício 15Exercício 15Exercício 15Exercício 15Exercício 15



3º - No body experimente as tags de inserção de uma tabela:

<TABLE BORDER CELLSPACING=2 CELLPADDING=2 COLS=3 WIDTH="100%"BGCOLOR="#FFFF99" >

<TR><TD>Manuais</TD>

<TD>Descrição</TD>

<TD>Preço</TD>

</TR><TR>

<TD>JavaScript </TD>

<TD>Linguagem de Programação para a Internet</TD>

<TD>30,00 Euros</td>

</TR><TR>

<TD>PHP </TD><TD>Linguagem de Programação para a Internet</TD>

<TD>40,00 Euros</TD>

</TR><TR>

<TD>Word 2000</TD>

<TD>Processador de Texto</TD>


</TR><TR>

<TD>Linux</TD>

<TD>Sistema Operativo</TD>


</TR>

</TABLE>

4º - Acrescente mais uma coluna (autores) e inseria os dados.

5º - Altere cores nas células. Exemplo: <TD BGCOLOR="#00FF00"> Linux</TD>



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

6º - Insira uma imagem, depois da tabela. Exemplo:

<Font Face = Arial size = 2 ><B> Os Melhores Portáteis

<IMG SRC="imagem/portatil.jpg" Align= CENTER ALT = "Portátil RCD">

</B></font></P>

7 º - Experimente os diversos tipos de alinhamentos das imagens.

8 º - Coloque um fundo na página.

9º - Utilize a tag Marque (texto rolante) e escreva Veja os nossos SALDOS!!!

10º - Grave o trabalho com o nome de exercício15.html.

11º - Explique o seguinte código:

a) <body bgcolor="#30608F" text="#000000" link="#003399" vlink="#003399"alink="#003399" ">

b)<img src="imagens/quadrado.gif" width="5" height="5">

c)<a href="paginashtml/escola/instalacoes.htm" target="_self">

Instalações Escolares</a>

12 º - No alinhamento de uma imagem o atributo align= Middle, alinha o topo daimagem com o topo do elemento mais alto da linha. Indique se a seguinte defini-ção é verdadeira ou falsa. Justifique a sua resposta.



Esco

la S

ecun

dária

S. J

oão

do E

stor

il




3º - No body experimente as seguintes tags:

<table border=10> <tr><td><table border=10> <tr><td><table border=10> <tr><td><table border=10> <tr><td><table border=10> <tr><td><table border=10> <tr><td><table border=10> <tr><td><table border=10> <tr><td><table border=10> <tr><td> Paula Cardoso Alcobia </td></tr> </table></td></tr> </table></td></tr> </table></td></tr> </table></td></tr> </table></td></tr> </table></td></tr> </table></td></tr> </table></td></tr> </table></p></p>

4º - Altere as cores dos limites.

5º - Centre a tabela.

6º - Coloque um fundo na página.

7º - Grave o seu trabalho com o seguinte nome: exercicio16.



Esco

la S

ecun

dária

S. J

oão

do E

stor

il





<body><table width=”600" BORDER=1 BORDERCOLOR=#000000 CELLPADDING=0CELLSPACING=0><tr ALIGN=CENTER>

<td WIDTH=120 HEIGHT=70> LOGOTIPO DO SITE</td><td>BANNER PRINCIPAL </td><td WIDTH=100>LOGIN</td>

</tr><tr ALIGN=CENTER>

<td HEIGHT=200>MENU1 <BR>MENU2 <BR>MENU3<BR>MENU4</td><td>PRINCIPAL </td><td>MENSAGENS <BR> <BR>PROPAGANDA</td>

</tr><tr ALIGN=CENTER>

<td HEIGHT=70>&nbsp&nbsp&nbsp&nbsp </td><td>BANNER SECUNDÁRIO </td><td>&nbsp&nbsp&nbsp&nbsp </td>

</tr></table></body>

4º - Explique o que faz o seguinte atributo &nbsp&nbsp&nbsp&nbsp ?

5º - Altere os limites da sua tabela.

6º - Grave a tabela com o seguinte nome exercicio17.



Esco

la S

ecun

dária

S. J

oão

do E

stor

il




3º - Crie uma tabela para as seguintes informações:

4º - Insira cor nas células da sua tabela.

5º - Grave a tabela com o seguinte nome: exercicio18a.



8º - Crie uma tabela com o nome, telefone e endereço dos seus amigos ( no míni-mo dez).

9º - Formate a tabela ao seu criterio.

10º - Grave o documento com o seguinte nome: exercicio18b.



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

FormuláriosFormuláriosFormuláriosFormuláriosFormulários

Os formulários servem para recolher dados introduzidos pelos utilizadores e enviá-los para processamento no servidor.

♦ A tag form A tag form A tag form A tag form A tag form

Para se indicar ao browser que se deseja criar um formulário, utilizam-se as tags<form> e </form>. Estas tags servirão de contentor, onde são definidos os cam-pos através dos quais se vai obter a informação e a forma de despoletar o envio dainformação.


<FORM NAME=”[NOME]” METHOD=”[GET/POST]” ACTION=”[URL]”ENCTYPE=”[TIPO]”> </FORM>

♦Atributos:Atributos:Atributos:Atributos:Atributos:

NAMENAMENAMENAMENAME –define o nome do formulário

METHODMETHODMETHODMETHODMETHOD – define o método de envio dos dados. Aceita valores:

Get Get Get Get Get – em que os dados do formulário serão enviados pela URL da página.

(os dados enviados por este método possuem uma limitação de 256 bytes).

PPPPPostostostostost- em que os dados serão enviados por meio de uma variável de ambiente, oculta aos utilizadores.

AAAAACTIONCTIONCTIONCTIONCTION – determina a URL de destino da informação.

ENCTYPEENCTYPEENCTYPEENCTYPEENCTYPE – especifica o tipo de conteúdo usado para codificar o conjunto de dadosa enviar ao servidor. O valor-padrão (application/x-www-form-urlencoded) é emformato de string, mas quando queremos enviar um ficheiro pelo formulário (utili-zando o campo file), precisamos de utilizar o valor multipart/form-data que trans-forma os dados em código binário.


<form method=”post” action=”./execdir/programa.prog”enctype=”multipart/form-data”>

</form>



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

♦Entrada de DadosEntrada de DadosEntrada de DadosEntrada de DadosEntrada de Dados

Para se enviar informação, esta tem de ser inserida em campos de um formulário.Os campos podem ser criados através da tag <input> ou das tags <select> e </select>, sendo estas complementadas pelas tags <option> e </option>.


<INPUT TYPE=”[tipo]” NAME=”[nome]” ID=”[identificador]”

VALUE=”[valor padrão]” SIZE=”[tamanho]”

MAXLENGHT=”[limite de caracteres]”

SRC=”[url]” CHECKED READONLY DISABLED

TABINDEX=”[sequência]” ACCESSKEY=”[tecla de atalho]”>



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

♦Área de TÁrea de TÁrea de TÁrea de TÁrea de Textoextoextoextoexto

Define uma área de texto com várias linhas e que pode ter um número ilimitado decaracteres. Os utilizadores podem escrever texto nessa área.


<TEXTAREA NAME=”[nome]” ROWS=”[linhas]” COLS=”tamanho” READONLYDISABLED TABINDEX=”[sequência]”

ACCESSKEY=”[tecla de atalho]” > [valor padrão]

</TEXTAREA>



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

♦ Identificador de campo Identificador de campo Identificador de campo Identificador de campo Identificador de campo

Dá um nome a um controlo na página. Ao clicarmos no texto contido no elemento<label> o controlo a ele associado deve ser actuado.


<LABEL FOR=”[id do campo]”> [descrição] </LABEL>

<INPUT ID=”[id do campo]”>


<label for="unome">Último Nome:<label>

<input type="text" name="unome" id="unome">



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

♦ Bloco de Dados Bloco de Dados Bloco de Dados Bloco de Dados Bloco de Dados

O elemento <fieldset> agrupa elementos num formulário e pode desenhar umalinha em redor do grupo.


<FIELDSET>

<LEGEND> [descrição] </LEGEND>

</FIELDSET>


<fieldset>

Altura <input type="text" size="6">

<input>

Peso <input type="text" size="6">

</input>

</fieldset>

O elemento <legend> define texto descritivo para um elemento <fieldset>.

♦ Lista - Select Lista - Select Lista - Select Lista - Select Lista - Select

O elemento <select> cria uma lista de abrir com várias opções seleccionáveis.


<SELECT NAME=”[nome]” SIZE=”[tamanho]” DISABLED MULTIPLETABINDEX=”[sequência]” ACCESSKEY=”[tecla de atalho]”>

<OPTION VALUE=”[valor do item]” SELECTED>

[descrição do item]

</OPTION>

</SELECT>



Esco

la S

ecun

dária

S. J

oão

do E

stor

il


<select>

<option value ="Manga">Manga</option>

<option value ="Banana">Banana</option>

<option value ="Goiaba">Goiaba</option>

<option value ="Maçã">Maçã</option>

</select>

♦ Elemento <optgroup> Elemento <optgroup> Elemento <optgroup> Elemento <optgroup> Elemento <optgroup>

Define um grupo de opções. permite agrupar várias escolhas. Quando tiver umalista de opções extensa, forme grupos com as opções que estão relacionadas entresi para lidar melhor com elas.


<SELECT >

<OPTGROUP LABEL=”[descrição do grupo]” >

<OPTION> [Item do grupo] </OPTION>

</OPTGROUP>

</SELECT>



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

♦ Elemento <option> Elemento <option> Elemento <option> Elemento <option> Elemento <option>

O element <option> insere uma opção numa lista com várias opçõesseleccionáveis.

Nota:Nota:Nota:Nota:Nota: O elemento <option> pode ser usado sem atributos, mas na prática precisa-mos de usar o atributo value para enviar os dados para processamento.

Use este elemento apenas sob o elemento <select>. Se for colocado em qualqueroutro lugar ele não tem utilidade.


<select>

<option value ="Manga">Manga</option>

<option value ="Banana">Banana</option>

<option value ="Goiaba" selected="selected">Goiaba</option>

<option value ="Maçã">Maçã</option>

</select>



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

♦ Elemento <button> Elemento <button> Elemento <button> Elemento <button> Elemento <button>

Define um botão que pode ser pressionado. Dentro do botão podemos colocarconteúdos, como texto e imagens. A diferença mais importante entre os botõescriados com este elemento e aqueles criados com o elemento <input> (com atribu-to type="button") é que estes últimos são vazios, não podem ter conteúdo.


<button>Faça Clique Aqui!</button>



Esco

la S

ecun

dária

S. J

oão

do E

stor

il





<form action=”exerc19.html”> Escreva o seu primeiro nome: <input name=”firstname”><br> Escreva o seu último o nome: <input name=”lastname”><br>

<input type=”submit”></form>

4º - Grave o ficheiro com o nome de exercicio19a.html

5º - Agora vamos criar campos para palavras-passe ("password". Para tal crie umnovo ficheiro e insira as tags principais.


<form>Escreva o seu nome de utilizador: <input name=”user”><br> Escreva a sua password (segredo): <input type=”password” value=””name=”password”><br><input type=”submit”></form>

<p><b>Nota:</b> Quando escreve uma password o browser mostraasteriscos ou bolinhas em vez dos caracteres que introduz. </p>

7º - Grave o ficheiro com o nome de exercicio19b.html

8º - Faça num novo documento o seguinte:

<form ><h1><p align=center>Como criar botões Radiobutton</p></h1>

Masculino: <input type=”radio” checked=”checked” value=”macho”name=”Sexo”><br/> Feminino: <input type=”radio” value=”fêmea” name=”Sexo”><br>

<h1><p align=center>Como criar uma lista com vários itens para seleccionar</p></h1>



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

<h3>Alunos</h3><select name=”Turma 11º 12"><option value=”Bruno” selected=”selected”>Bruno</option><option value=”Diogo”>Diogo</option><option value=”João”>João</option><option value=”Tiago”>Tiago</option><option value=”Gonçalo”>Gonçalo</option></select>

<p></p><h1><p align=center>Como criar caixas de validação</p></h1>Eu tenho um computador: <input type=”checkbox” checked=”checked”value=”ON” name=”computer”><br>Eu tenho uma impressora: <input type=”checkbox” value=”ON”name=”impressora”><br/>

<h1><p align=center>Como criar um botão</p></h1>

<input type=”button” value=”Carregue Aqui!”><p></p></form>

9º- Grave o documento com o seguinte nome:exercicio19c.html

10º- Agora vamos criar um formulário para enviar um e-mail. Insira então o se-guinte código:

<body>

<h3>Este formulário envia um e-mail para a professora Paula Cardoso.</h3>

<form action="MAILTO:[email protected]" method="post" enctype="text/plain">Nome:<br/>

<input value="Escreva o seu nome" name="nome"><br>

E-Mail:<br/>

<input value="Escreva o seu e-mail" name="email"><br>

Comentário:<br/>

<input size="40" value="Escreva um comentario" name="comentario"><br>

<br/>

<input type="submit"/> <input type="reset"/></form>

<br/>

</body>

11º- Grave o documento com o seguinte nome:exercicio19d.html



Esco

la S

ecun

dária

S. J

oão

do E

stor

il





<form>

<fieldset><legend>Dados Pessoais </legend>Nome: <input type=”text” Name=”nome”> <br>E-mail: <input type=”text” Name=”email”> <br>Sexo: <input type=”radio” Name=”sexo” value=”M”>Masculino<input type=”radio” Name=”sexo” value=”F”>feminino <br>Idade: <input type=”text” Name=”idade” size=2> <br>

</fieldset>

<fieldset><legend>Dados Profissionais </legend>Forma de contratacão: <input type=”radio” Name=”forma”value=”T”>Temporário<input type=”radio” Name=”forma” value=”C”>Efectivo <br>Cargo:<select name=”cargo”>

<option name=”cargo”><option value=”as”> Analista de sistema </option><option value=”p”> programador </option><option value=”ar”> Administrador de Redes </option><option value=”th”> Técnico de hardware </option>

</select> <br>Sector: <input type=”text” Name=”sector”>

<Fieldset>

</form>

4º - Grave o documento com o seguinte nome:exercicio20.html



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

Molduras (frames)Molduras (frames)Molduras (frames)Molduras (frames)Molduras (frames)

♦ O que é uma frame? O que é uma frame? O que é uma frame? O que é uma frame? O que é uma frame?

As molduras são subjanelas definidas sobre a janela principal do browser. Estassubjanelas são criadas dividindo a janela em várias partes. Cada uma dessas partespode apresentar uma página da Web diferente.

♦ V V V V Vantagens e desvantagens das moldurasantagens e desvantagens das moldurasantagens e desvantagens das moldurasantagens e desvantagens das moldurasantagens e desvantagens das molduras

As molduras permitem-nos apresentar mais do que uma página HTML numa únicajanela do browser. Cada página está dentro da sua própria moldura (subjanela) e éindependente das restantes páginas. Podemos determinar regiões fixas nas moldu-ras, apresentando por exemplo um logotipo de uma empresa, um menu de navega-ção, etc.

Apesar de oferecerem alguma liberdade ao facilitarem bastante a criação de barrasde navegação em conjuntos de documentos com muitas páginas e de tornarembastante mais rápido o carregamento das páginas, as molduras também podem darorigem a algumas dificuldades, tais como:

·O criador de páginas vê-se obrigado a lidar com um número maior de páginas aomesmo tempo.

·A impressão do conteúdo do browser fica mais difícil.

·Por vezes é preciso que um único elemento <a> faça ligação a duas ou maispáginas, o que obriga a utilizar JavaScript.


<FRAMESET ROWS=”[frame1,frame2]” COLS=”[frame1,frame2]”

BORDER=”[espessura]” BORDERCOLOR=”[cor]”

FRAMEBORDER=”[yes/no]”

<FRAME SRC=”[url]” NAME=”[nome]” NORESIZE

MARGINWIDTH=”[Margem lateral]”

MARGINHEIGHT=[Margem vertical]”

SCROLLING=”[yes/no/auto]”

</FRAMESET>



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

♦ A tag F A tag F A tag F A tag F A tag Framesetramesetramesetramesetrameset

- O elemento <frameset> define a forma como a janela do browser se subdividepara acomodar as molduras.

- Este elemento divide a janela do browser em linhas e colunas.

- Os valores atribuídos às linhas e às colunas indicam a quantidade de área deécran que cada linha e cada coluna devem ocupar.

Nota:Nota:Nota:Nota:Nota: Não é necessário colocar a tag TITLE nas páginas que fazem parte da frame,pois o único título de página que aparece é o que foi indicado na página principalque controla as frames.

♦ A tag <frame> A tag <frame> A tag <frame> A tag <frame> A tag <frame>

- O elemento <frame> define qual o documento HTML a colocar numa determina-da moldura.

Nota:Nota:Nota:Nota:Nota: Não use o elemento <body> numa página que contém molduras ("frames").Se o fizer as molduras não serão apresentadas.



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

O elemento <noframes> deve conter texto que só será mostrado no caso de obrowser não ser capaz de mostrar documentos contidos em molduras ("frames").Este elemento deve ficar dentro de um elemento <frameset>.

♦ A tag iframes A tag iframes A tag iframes A tag iframes A tag iframes

O elemento iframe insere uma subjanela, ou moldura, dentro de uma página daWeb ("inline frame"). A nova moldura contém a sua própria página e assemelha-sea uma moldura ("frame") criada com os elementos <frame> e <frameset>, masestá dentro de uma página normal (no meio dos seus conteúdos) em vez de estarnum frameset.

♦ A tag noframes A tag noframes A tag noframes A tag noframes A tag noframes



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

Exemplos:Exemplos:Exemplos:Exemplos:Exemplos:

♦ Criar janelas dispostas na vertical Criar janelas dispostas na vertical Criar janelas dispostas na vertical Criar janelas dispostas na vertical Criar janelas dispostas na vertical

<html>

<head>

<title>Exemplo 1 </title>

</head>

<frameset cols="25%,50%,25%">

<frame src="esquerda.htm">

<frame src="centro.htm">

<frame src="direita.htm">

</frameset>

</html>

♦ Criar janelas dispostas na horizontal Criar janelas dispostas na horizontal Criar janelas dispostas na horizontal Criar janelas dispostas na horizontal Criar janelas dispostas na horizontal

<html>

<head>

<title>Exemplo 2</title>

</head>

<frameset rows="25%,50%,25%">

<frame src="primeira.htm">

<frame src="segunda.htm">

<frame src="terceira.htm">

</frameset>

</html>



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

♦ Criar janelas dispostas na horizontal e vertical Criar janelas dispostas na horizontal e vertical Criar janelas dispostas na horizontal e vertical Criar janelas dispostas na horizontal e vertical Criar janelas dispostas na horizontal e vertical

<html>

<head>

<title>Exemplo 3</title>

</head>

<frameset rows="50%,50%">

<frame src="horizontal.htm">

<frameset cols="25%,75%">

<frame src="esquerda_vertical.htm">

<frame src="direita_vertical.htm">

</frameset>

</frameset>

</html>

♦ Colocar uma inline frame dentro de uma página Colocar uma inline frame dentro de uma página Colocar uma inline frame dentro de uma página Colocar uma inline frame dentro de uma página Colocar uma inline frame dentro de uma página

<html><head>

<title>Exemplo</title></head><body>

<h3>Uma frame “inline” (iframe)</h3><iframe src=”exemplo.htm”></iframe>

<p>Alguns browsers antigos não suportam iframes.</p></body></html>



Esco

la S

ecun

dária

S. J

oão

do E

stor

il



2º - Crie a página do café constituída por 3 frames: uma em cima (horizontal) eduas verticais (esquerdo e direito).

3º - À junção das 3 frames atribua o nome de index.html

4º - Insira o conteúdo de cada frame, conforme imagem.

Todo o material necessário para a realização deste exercício encontra-se na pastaexercício21. As imagens estão na subpasta imagens; os botões na subpasta botõese o texto na subpasta documentos em formato doc.

5º - Depois de criar a página index.html (exemplo acima), deverá criar as seguintespáginas de forma a proceder às ligações.

a página história:



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

- A página grãos

Nota: deverá inserir âncoras nesta pági-na

- A página tipos

Nota: esta página deverá ser feita comtabelas, com border=0.

- A página contactos (deverá aqui fazerum link de e-mail).

6º - Depois de todas as páginas criadas, deverá voltar ao index e proceder àsligações (exemplo: fazer a hiperligação do botão história à página história).

7º - Poderá visualizar se achar necessário à resolução do exercício.



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

Promoção do web sitePromoção do web sitePromoção do web sitePromoção do web sitePromoção do web site

A forma mais simples de promover um site é inscrevê-lo num motor de busca queassim o indexará para futuras procuras (conforme imagem).

Para facilitar a pesquisa aos motores de busca, o melhor é colocar alguma informa-ção no documento html dentro da tag <head>. Esta informação deverá estar dentroda tag <meta>. (esta tag já foi focada anteriormente na página 4 deste manual.)

A tag <meta> <meta> <meta> <meta> <meta> fornece meta-informação, ou seja: dá informação que descreve ainformação que está contida no corpo do documento. A informação fornecida consis-te principalmente em descrições do conteúdo e palavras-chave.



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

Todos os elementos do HTML ordenados alfabeticamenteTodos os elementos do HTML ordenados alfabeticamenteTodos os elementos do HTML ordenados alfabeticamenteTodos os elementos do HTML ordenados alfabeticamenteTodos os elementos do HTML ordenados alfabeticamente



Esco

la S

ecun

dária

S. J

oão

do E

stor

il



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

Truques e DicasTruques e DicasTruques e DicasTruques e DicasTruques e Dicas

♦ Para colocar um ícone que identifique uma página HTML, basta colocar a seguin-te linha de código na tag <head>:

No caso de adicionar a página aos favoritos, o ícone aparece-lhe conforme ima-gem:

O ícone pode ser elaborado através de software específico, como por exemplo:

- AWicons (http://www.awicons.com/download.html)

-Icon studio

♦ Para colocar as barras de deslocamento vertical e horizontal de outra cor, podeutilizar o software Coffee Cup Free Scrollbar Styler. Depois de colocar as cores quepretende, clique no botão Get Code. Copie o código para a sua página HTML.Coloque o código no cabeçalho.

<link rel=”shortcut icon” href=”paula.ico”href=”paula.ico”href=”paula.ico”href=”paula.ico”href=”paula.ico” type=”image/x-icon”>

nome do ícone

<style>

body{

scrollbar-arrow-color: #339966;

scrollbar-3dlight-color: #FF9933;

scrollbar-highlight-color: #336699;

scrollbar-face-color: #FF6600;

scrollbar-shadow-color: #000033;

scrollbar-darkshadow-color: #CC3300;

scrollbar-track-color: #FF6600;

}

</style>



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

♦ Pode utilizar também o software CoffeCup DHTML Menu Builder para elaborarmenus dinâmicos, conforme exemplo:

Para fazer o download destes produtos, aceda à página do coffecup:

http://www.coffeecup.com/freestuff/

Aqui encontra diverso software livre que poderá usar na construção da sua página.



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

Bibliografia:Bibliografia:Bibliografia:Bibliografia:Bibliografia:

Livros:

- Marcondes, Christian Alfim. HTML 4.0 Fundamental - A base da Programa ção para a Web. Editora Érica.

- Fonseca, Dalila. Pacheco, Deolinda. Marques, Fernandes e Soares, Ricardo. Curso Tecnológico de Informática - 11º Ano- Aplicações Informáticas A. Porto Editora.

Páginas da web:

http://www.artifice.web.pt/tutoriais/cntd/tut_html1.html

http://www.w3.org/TR/1998/REC-html40-19980424/

Unidade 4 – Concepção de web sites. Subunidade 2 ... · A linguagem HTML não diferencia as...

Documents

Transcript of Unidade 4 – Concepção de web sites. Subunidade 2 ... · A linguagem HTML não diferencia as...