Construção de Páginas Pessoais de Internet
ÍNDICE
INTRODUÇÃO ..................................................................................... 1
PLANEAMENTO ..................................................................................................... 3
DESIGN ......................................................................................................................................... 3
CONTEÚDO ..................................................................................................................................... 3
IMAGENS ....................................................................................................................................... 4
HTML ............................................................................................... 5
FORMATO GERAL DUM DOCUMENTO HTML ..................................................................... 5
SINTAXE ............................................................................................................ 5
HEAD ELEMENTS............................................................................................................................... 5
<ISINDEX> ............................................................................................... 5
<META> ................................................................................................... 5
<TITLE> ................................................................................................... 5
BODY ELEMENTS .............................................................................................................................. 6
Âncoras .................................................................................................... 6
Parágrafos e Quebra de linha ....................................................................... 6
Títulos ...................................................................................................... 7
Linha Horinzontal (Separador)...................................................................... 7
Imagens ................................................................................................... 8
Listas ....................................................................................................... 9
Elementos de Informação .......................................................................... 10
Elementos de Formatação.......................................................................... 10
ELEMENTOS E ATRIBUTOS ...................................................................................... 11
<BODY> ................................................................................................. 11
Título e Parágrafos ................................................................................... 13
Linha Horizontal (Separador) ..................................................................... 13
CARACTERES ESPECIAIS ........................................................................................ 14
TABELAS ......................................................................................................... 16
DIRECTIVAS BÁSICAS ....................................................................................................................... 16
<TABLE> ................................................................................................................................... 16
<CAPTION> ............................................................................................................................... 16
<TR> ........................................................................................................................................ 16
<TH> ........................................................................................................................................ 16
<TD> ........................................................................................................................................ 16
FRAMES .......................................................................................................... 17
IMAGEMAPS ...................................................................................................... 21
FORMS ............................................................................................................ 23
CASCADE STYLE SHEETS ..................................................................... 27
CONCEITOS ...................................................................................................... 27
LINKED STYLE SHEETS ..................................................................................................................... 28
EMBEDDED STYLE SHEETS ................................................................................................................. 28
ESTILOS INLINE ............................................................................................................................. 29
IMPORTAÇÃO DE STYLE SHEETS ........................................................................................................... 29
AGRUPAMENTO DE ESTILOS................................................................................................................ 29
CLASSES ...................................................................................................................................... 29
REFERÊNCIA DE ESTILOS ....................................................................................... 30
REFERÊNCIA HTML ........................................................................... 35
Ana Torres ©
Pós-Graduação em Consultoria de Empresas
pág. 2/68
Construção de Páginas Pessoais de Internet
INTRODUÇÃO
HTML (HyperText Markup Language) é o termo que designa uma linguagem usada para
criar documentos hipertexto. O conceito de hipertexto está associado a uma nova forma
de documentos, compostos por texto formatado e ligações (links) a outros documentos,
os quais poderão ser do tipo hipertexto, ou mesmo imagens, sons, vídeo, etc. Podemos
ver exemplos de documentos hipertexto nos ficheiros de ajuda do Windows ou nas
páginas de um qualquer servidor de WWW (World Wide Web).
Apesar do HTML originalmente não pretender ser uma linguagem para criação de páginas
apresentou-se como uma solução muito eficaz e é esta que vai ser o objecto do nosso
estudo.
HTML foi desenvolvido por Tim Berners-Lee, e tornou-se conhecido através do Mosaic,
um browser desenvolvido na NCSA. Durante os primeiros anos da década de 90
expandiu-se com o enorme da WWW.
É a linguagem utilizada para a criação de páginas para a WWW. Não é, no entanto,
uma linguagem de programação. As suas principais características são:
• Portabilidade
Os documentos escritos em HTML devem ter aparência semelhante nas
diversas plataformas de trabalho.
• Flexibilidade
O utilizador deve tem a liberdade de personalizar diversos elementos do
documento, como o tamanho do tipo de letra, as cores, etc.
• Tamanho Reduzido
Os documentos devem ter um tamanho reduzido, a fim de economizar
tempo na transmissão através da Internet, evitando longos períodos de
espera e congestionamento na rede.
Um documento HTML é um ficheiro de texto normal (ASCII) que pode ter apenas texto
mas que normalmente tem também directivas especiais para fazer uma qualquer função.
Estas directivas, que estão delimitadas por caracteres reservados, quando são lidas por
um programa especial (browser) executam a função a que se destinam, podendo afectar
o texto (transformá-lo em itálico, bold, etc), estabelecer um link para outro documento,
criar títulos, inserir imagens, introduzir menus ou listas, etc.
Vejamos um exemplo de um pequeno texto com uma directiva (anchor neste caso):
Contacte o <A HREF="http://www.ipfel.pt/">I P F E L</A>.
O browser interpretaria este texto assim: Contacte o I P F E L.
Deslocando o rato para cima do link (Universidade de Aveiro) e carregando no botão do
rato, estaríamos a fazer uma ligação ao servidor de WWW do IPFEL
(http://www.ipfel.pt/). Simples não é?
Uma directiva começa com um start-tag (<A HREF="http://www.ipfel.pt/">, no nosso
exemplo) sendo delimitado pelos caracteres '<' e '>' e acabando com um end-tag (<A>
delimitado também por '<' e '>'. Dentro do start-tag está o nome da directiva (A de
anchor) e possíveis argumentos (HREF="http://www.ua.pt/", ainda no nosso exemplo) e
no end-tag apenas aparece o nome da directiva (novamente A), precedido de uma barra.
O start-tag é obrigatório mas o end-tag pode, em algumas directivas, ser omitido (não é
Ana Torres ©
Pós-Graduação em Consultoria de Empresas
pág. 1/68
Construção de Páginas Pessoais de Internet
esta a situação do nosso exemplo). Na prática, a sintaxe é facilmente assimilada, sendo
a seguinte a sua forma geral:
<directiva argumentos-para-a-directiva>algum-texto-se-for-preciso<fim-de-directiva-se-for-preciso>.
Só as directivas podem formatar o texto, pelo que mudanças de linha, tabuladores ou
outros códigos ASCII não alteram em nada o aspecto final da página - para realizar esses
efeitos terá de usar as directivas HTML. É indiferente o uso de letras minúsculas ou
maiúsculas ao escrever as directivas ou argumentos, mas há toda a conveniência em ser
coerente ao longo de todo o documento, pois facilita a leitura. Como só as directivas é
que formatam o texto, é possível ter numa só linha muitas directivas e texto, mas como
é obvio esta prática não é aconselhável, uma vez que dificulta mais tarde a edição do
documento.
URL
No exemplo anterior, foi usada a directiva anchor para estabelecer uma ligação a outro
documento. Para descrever as ligações usamos o URL (Uniform Resource Locator). O
formato geral de um URL é o seguinte: SERVIÇO://SITE:PORT/PATH
Os serviços (scheme) mais usados são os seguintes: http, file e ftp. Existem ainda os
seguintes: gopher, wais, news e telnet.
O site será o nome completo de um computador ligado à Internet, com um servidor
apropriado ao serviço escolhido.
Exemplos: www.ipfel.pt, www.yahoo.com, ftp.telepac.pt
O port é o porto de comunicação entre o seu computador e o site. Na maioria dos casos,
pode-se eliminar este campo, uma vez que todos os serviços têm um port standard
definidos internacionalmente. Só será obrigatório quando o serviço estiver a funcionar
num port não-standard (alguns servidores de WWW usam o port 8080 em vez do port
80).
A path é onde está localizado o documento pretendido, sendo necessário indicar o
directório e o nome do ficheiro. Em HTML também existe a noção de secção do ficheiro,
útil para grandes documentos, pois permite a referência apenas a uma determinada zona
de um documento. Nestes casos, o URL inclui ainda uma referência do género
"#secção". Exemplo: http://www.ipfel.pt/cursos/index.html#informatica
URL's relativos
Indicar vários URL's num documento HTML pode-se tornar uma tarefa repetitiva. Por isso
muitos servidores de WWW e/ou browsers proporcionam sintaxes simplificadas.
Se o link estiver a apontar para um documento existente no servidor, então pode-se
omitir os campos serviço, site e port e apenas indicar a path.
Exemplo: http://www.ipfel.pt/cursos/index.html seria abreviado para
/cursos/index.html.
Se o documento estiver no mesmo directório do documento que tem o link, então nesse
caso podemos também omitir os directórios e apenas indicar o nome do documento.
Exemplo: /cursos/index.html (ou http://www.ipfel.pt/cursos/index.html) seria
abreviado para index.html.
Ana Torres ©
Pós-Graduação em Consultoria de Empresas
pág. 2/68
Construção de Páginas Pessoais de Internet
Em quase todos os servidores de WWW o ficheiro index.html é assumido por defeito
como sendo a "porta de entrada" dum directório. Assim, se omitirmos o nome do
documento num URL, o servidor acrescenta automaticamente "index.html" à path.
Exemplo:
http://www.ipfel.pt/index.html
pode
ser
abreviado
para
http://www.ipfel.pt/.
Note-se que se o ficheiro index.html não existir então o próprio servidor fará uma
lista dos ficheiros no directório indicado na path, sendo esta situação pouco
recomendável, por poder implicar alguma falta de segurança.
PLANEAMENTO
É importante referir que, ao contrário de uma publicação escrita, o utilizador poderá
entrar no site por qualquer página e nem sempre pela homepage. Como tal, deverá ser
tida em conta a necessidade de algum tipo de navegação nas páginas.
Os utilizadores mais frequentes e que procuram informação específica vão com certeza
fazer bookmark ou procurar num dos vários search engines. Assim, um número
considerável de acessos às páginas resulta de procuras nestes sistemas. Logo, é
importante ter em conta o modo como a informação é "indexada". Para facilitar a
indexação das páginas usar as tags: META name="description" META name="keywords".
Se não desejar que a página seja incluída nas buscas ( por exemplo em arquivos de
mailling lists) deve colocar o file robots.txt.
Exemplo:
<HEAD>
<TITLE>Html Help</TITLE>
<META NAME="description" Content="Html Help">
<META NAME="keywords" Content="Colocar palavras que decrevem o
site separadas por vírgulas.">
</HEAD>
DESIGN
Para a construção de uma página eficiente deve ser encontrado um equilíbrio entre
informação e design. Este equilíbrio é, por vezes difícil, devido às limitações do HTML, da
largura de banda, da variedade de browsers e das dimensões dos monitores.
Para as páginas de níveis superiores, cujo objectivo é transmitir informação do modo
mais eficiente e onde já não é tão importante cativar a atenção do utilizador, deve-se
optar pela simplificação ( não esquecer de referir a data de actualização, autor, contacto
).
A consistência na organização e design da página de primeiro nível com as páginas
seguintes é importante. Uma mudança brusca na aparência dará ao utilizador a sensação
de que abandonou o site.
CONTEÚDO
evitar o uso de "em construção" - se a página não está pronta não deve
ser disponibilizada.
não duplicar a informação - caso não seja a fonte produtora da informação,
deve fazer um link para a página original e não repetir/copiar sob o risco de
disponibilizar informação desactualizada.
Ana Torres ©
Pós-Graduação em Consultoria de Empresas
pág. 3/68
Construção de Páginas Pessoais de Internet
indicação do título, autor, data - facilita o contacto em caso de incorrecção
da página e dá uma ideia da frequência de actualização.
evitar o "clique aqui"
colocar títulos nas páginas
testar com vários browsers antes de publicar - fazer resize da janela, ver
em várias cores (8,24 bit) , e ter atenção ao tamanho das fontes.
IMAGENS
Embora o uso de imagens e facilidades multimédia seja atractivo também poderá afastar
o utilizador da página devido ao tamanho e consequente tempo de download.
Algumas indicações importantes:
usar gifs para imagens não fotográficas e jpgs para imagens fotográficas
usar a tag ALT="texto" nas imagens.
se possível, usar a mesma imagem em várias páginas, pois uma vez
carregada fica em cache, minimizando assim o uso da rede e aumentando a
rapidez de consulta.
nos files de vídeo ou audio indicar o tamanho, de modo a prevenir o utilizador
em relação ao tempo de download.
ter atenção à textura e contraste do background usado com o texto, pois pode
dificultar a leitura.
Ana Torres ©
Pós-Graduação em Consultoria de Empresas
pág. 4/68
Construção de Páginas Pessoais de Internet
HTML
FORMATO GERAL DUM DOCUMENTO HTML
<HTML>
<HEAD>
<BASE HREF="URL-do-próprio-documento">
<TITLE>Título</TITLE>
</HEAD>
<BODY>
Parte principal do documento.
</BODY>
</HTML>
O bloco <HTML>...</HTML> indica ao browser que se trata realmente dum documento
HTML.
O bloco <HEAD>...</HEAD> contém várias directivas para o servidor ou cliente
SINTAXE
Um elemento, em HTML, é um comando que é identificado por aparecer dentro destes
sinais <>. No exemplo acima <TITLE> é um elemento. De acordo com a sintaxe do
HTML, um elemento não é case sensitive ou seja <title>, <TITLE> ou <tItLe> é a
mesma coisa quando interpretado. Certos elementos como o <HR> são auto-delimitados,
ao contrário do <TITLE> que tem de ser obrigatoriamente delimitado por </TITLE>.
Há elementos que podem ou devem levar atributos, um exemplo desta situação é o caso
do BASE usado em cima. O elemento imagem usa, neste caso, o atributo HREF.
Os elementos em HTML são classificados de acordo com o local onde são inseridos. Os
que são inseridos no corpo do documento (entre o <BODY> e </BODY>) designam-se
por BODY ELEMENTS e os elementos situados na cabeça designados por HEAD
ELEMENTS.
HEAD ELEMENTS
<ISINDEX>
Marca a página como possível de ser procurada. Para isso o servidor precisa
de ter um motor de procura definido para tal.
<META>
É o elemento que identifica a metainformação, ou seja a informação sobre a
informação contida no documento. Quando se faz uma página num editor de
HTML este cria geralmente metainformação. Este elemento tem os atributos
Content, http-equiv e name.
Exemplo:
<meta http-equiv="Content-Type" content="text/HTML;
charset=windows-1252">
<TITLE>
…</TITLE> É o título do documento.
Exemplo:
<TITLE>IPFEL-Instituto de Línguas & Informática, Lda.<TITLE>
Ana Torres ©
Pós-Graduação em Consultoria de Empresas
pág. 5/68
Construção de Páginas Pessoais de Internet
BODY ELEMENTS
Âncoras
<A>
…</A> - Este é o elemento de âncora e é usado na interligação de
documentos. De um modo geral um utilizador ao carregar numa imagem ou
num texto pode abrir uma nova página, imagem ou gravar um ficheiro. Este
elemento tem vários atributos mas o HREF é obrigatório para funcionar.
Atributos mais importantes
Href="URL". Href é a abreviatura de Hypertext reference ou seja o recurso
que o browser irá tentar abrir. Este recurso pode ser uma imagem, um
ficheiro ou uma nova página Href="http://…". É possível também abrir
recursos associados a outros serviços da internet nomeadamente:
Cria um documento em HTML de acordo com o
<Href="ftp://…"
conteúdo do FTP. De referir que só é possível
esta situação em FTP sites que aceitem entrada
de utilizadores anónimos.
Name="nome da âncora"
o nome faz a identificação da âncora que pode
ser usado para saltar para uma determinada
parte de um documento.
Exemplo:
Supondo que temos dois documentos: o doc1.html e o doc2.html. Ao carregarmos com o
rato na âncora do doc2.html abrir-se-á a página relativa ao doc1.html e o seu
posicionamento será na âncora que tem o nome de "aqui".
O doc1.html contem:
<A NAME="aqui"> Isto é uma âncora.</A>
O doc2.html contem:
<A HREF="doc1.html#aqui"> Doc1 </A> clicando salta para a
zona doc1.html onde está um elemento A com o nome de "aqui".
Exemplo:
<A Href="http://www.ipfel.pt"> IPFEL </A> abre uma sessão de
http para o IPFEL
Parágrafos e Quebra de linha
<P>
...</P>
Parágrafo.
<p> Isto é um exemplo de parágrafo</p>
<BR>
Faz a interrupção de uma Linha.
Exemplo:
<p> Isto é um parágrafo
<br> isto é uma linha do mesmo parágrafo </p>
Ana Torres ©
Pós-Graduação em Consultoria de Empresas
pág. 6/68
Construção de Páginas Pessoais de Internet
Títulos
<Hx>
…</Hx>
x pode ter o valor de 1 a 6. Sendo H1 o maior header
enquanto o H6 o mais pequeno. Estes elementos permitem criar uma
hierarquia num documento.
Exemplo:
<H1>Maior</H1>
<H6>Menor</H6>
Heading - 1
Heading - 2
Heading - 3
Heading - 4
Heading - 5
Heading – 6
Linha Horinzontal (Separador)
<HR>
Coloca uma barra horizontal.
Ana Torres ©
Pós-Graduação em Consultoria de Empresas
pág. 7/68
Construção de Páginas Pessoais de Internet
Imagens
Exemplo mais simples para incluir uma imagem numa página HTML:
<img src="URL-da-Imagem" alt="texto-alternativo">
Os formatos de imagem mais populares e suportados são o GIF e o JPEG. é conveniente
usar sempre o atributo ALT para que os browsers que correm em ambientes não-gráficos
funcionem bem.
Atributos:
SRC="URL" (indica a imagem)
ALT="texto" (texto alternativo à imagem para ambiente sem gráficos)
BORDER=n (tamanho do bordo - útil para quando existem anchors)
WIDTH=n e HEIGHT=n (controlam o tamanho da imagem e permitem que
um documento com imagens carregue mais rapidamente)
VSPACE=n e HSPACE=n (controlam o espaço livre em torno da imagem)
ALIGN=alinhamento; alinhamento pode ser LEFT, CENTER or RIGHT
(permitem que por exemplo texto possa rodear a imagem)
EXEMPLOS
Normal...
ALGUNS browsers permitem tirar o bordo do anchor com o atributo BORDER
(BORDER=0).
ALGUNS browsers permitem alinhar a imagem com o atributo ALIGN mas note que para
passar a uma nova linha tem-se de usar a directiva <BR CLEAR=ALL> - ver Mudanças de
Linha.
Texto
Mais
Ainda
Texto
alinhado
texto alinhado
mais texto alinhado
não alinhado
Actualmente, usam-se tabelas em vez do argumento ALIGN dentro das imagens.
Pode-se misturar texto com a imagem sem problema nenhum.
Especificando as dimensões da imagem com os argumentos WIDTH e HEIGHT
aumenta-se a velocidade com que o browser visualiza a imagem.
Pode-se usar os mesmos argumentos WIDTH e HEIGHT para aumentar ou diminuir a
imagem também.
Ana Torres ©
Pós-Graduação em Consultoria de Empresas
pág. 8/68
Construção de Páginas Pessoais de Internet
Listas
LISTAS NÃO DESCRITIVAS
Formato:
<lista>
<LI>Item 1
<LI>Item 2
<LI>Etc
</lista>
(o </LI> pode ser ignorado)
Onde "lista" pode ser:
UL - Unordered List
OL - Ordered List
Exemplo:
<UL>
<LI>Parafusos
<LI>Porcas
<LI>Pregos
</UL>
<OL>
<LI>Parafusos
<LI>Porcas
<LI>Pregos
</OL>
Resultado:
• Parafusos
• Porcas
• Pregos
Resultado:
1. Parafusos
2. Porcas
3. Pregos
Alguns browsers, permitem que este tipo de lista tenha em vez de números, letras:
LISTAS RECURSIVAS
Usando unicamente listas não descritivas (as descritivas também podem ser usadas):
<ul>
<li>Item 1
<li>Item 2 (com sub-lista)
<ul>
<li>Item 2.1
<li>Item 2.2 (também com uma sub-lista)
<ul>
<li>Item 2.2.1
<li>Item 2.2.2
<li>Etc
</ul>
<li>Etc
</ul>
<li>Etc
</ul>
Ana Torres ©
Pós-Graduação em Consultoria de Empresas
pág. 9/68
Construção de Páginas Pessoais de Internet
OBSERVAÇÕES
Podem ser usadas outras directivas dentro das listas (anchors por exemplo).
Outra necessidade consiste em ter uma maior separação entre cada linha da lista.
<ul>
<li>Item 1<p>
<li>Item 2<p>
<li>Item 3<p>
</ul>
Item 1
Item 2
Item 3
Para se centrar uma lista, e necessário recorrer-se a tabelas pois cada uma das linhas da
lista são centradas e não toda a lista completa. Com uma tabela a rodear a lista já é
possível fazer isso.
Elementos de Informação
<CITE>
… </CITE>
Citação
<CODE>
… </CODE>
Código de uma linguagem
… </EM>
Emphasis (acentuação)
… </KBD>
Texto digitado
<EM>
<KBD>
<SAMP>
… </SAMP>
Sequência de caracteres: # $ % 6
<STRONG>
… </STRONG>Dá uma forte acentuação
<VAR>
… </VAR>
Indica um nome variável
… -->
Não é interpretado. (Comentário)
<!-Elementos de Formatação
<B>
… </B>
Bold (Escurecido)
… </BIG>
Texto maior
… </I>
Itálico
… </U>
Sublinhado
<BIG>
<I>
<U>
<SMALL>
… </SMALL> texto mais pequeno
Ana Torres ©
Pós-Graduação em Consultoria de Empresas
pág. 10/68
Construção de Páginas Pessoais de Internet
<SUB>
… </SUB>
O texto fica mais abaixo.
… </SUP>
O texto fica mais acima.
… </TT>
Texto tipo máquina de escrever
…</FONT>
É um dos elementos mais usados para manipular o texto.
Este elemento permite não só definir o tamanho e a cor
como também o tipo de letra a utilizar.
<SUP>
<TT>
<FONT>
Color="#rrggbb"
O parâmetro cor apresenta o seguinte formato:
"#rrggbb" em que rr representa a quantidade de
vermelho, gg a quantidade de verde e bb a
quantidade de azul. A quantidade de cada uma
destas cores é representada em hexadecimal, ou
seja varia do 00 ao FF.
Size="1|2|3|4|5|6|7"
Este parâmetro varia de 1, texto mais pequeno,
até 7, texto maior.
Face="fonte"
Este parâmetro define a fonte a utilizar pelo
browser, no entanto se a pessoa que acedeu à
página não a tiver instalada então a fonte
utilizada é a de defeito nessa máquina. É
importante referir que podemos atribuir mais do
que uma fonte, e nesta situação o browser tenta
encontrar, pela ordem introduzida, uma que
esteja instalada.
Exemplo:
<FONT SIZE=7 COLOR="#FF0000" FACE="Courier New, Comic Sans MS">
TEXTO VERMELHO, TAMANHO GRANDE E LETRA COURIER NEW SE ESTIVER
INSTALADA
</FONT>
O seu browser suporta tipos de fonte como o Arial, Courier ou Times New Roman?
Aconselha-se a usar somente os tipos de fontes mais conhecidos.
ELEMENTOS E ATRIBUTOS
<BODY>
…</BODY> Como
nomeadamente:
Link="#rrggbb"
Ana Torres ©
foi
dito
o
elemento
body
apresenta
novos
atributos
Específica a cor dos links na página.
Pós-Graduação em Consultoria de Empresas
pág. 11/68
Construção de Páginas Pessoais de Internet
Vlink="#rrggbb"
Específica a cor dos links que já foram
visitados.
Alink"#rrggbb"
Específica a cor que aparece quando
utilizador está a seleccionar um link.
o
Background="nome da imagem" Específica uma imagem para o fundo do
documento.
Bgcolor="#rrggbb"
Permite o uso de cores para o o fundo do
documento.
Exemplo:
<BODY Alink="Red" Link="Blue" Vlink="Green" Bgcolor="Black">…</BODY>
Ana Torres ©
Pós-Graduação em Consultoria de Empresas
pág. 12/68
Construção de Páginas Pessoais de Internet
Título e Parágrafos
…</Hx> e <P>
Em nível avançado já é permitido controlar o local onde os
heading aparecem no écran, esta inovação deve-se à introdução do atributo ALIGN
que pode ter o valor de left, center ou right.
Por exemplo:
<H4 Align="left">Head size 4 à esquerda</H4>
O mesmo atribute Align foi acrescentado ao elemento P:
<P Align="Right">
Texto na direita
Linha Horizontal (Separador)
Este elemento recebeu também um conjunto razoável de atributos nomeadamente:
Align="Left|Center|Right" Específica o alinhamento das barras horizontais
que tenham uma largura menor que o habitual.
Width
representa o tamanho horizontal da barra. Esta
atribuição pode ser feita tanto em percentagem
como em número de pixels: Width="33%" ou
With="100" respectivamente.
Noshade
Tira o sombreado criando uma barra de cor
sólida.
Size
Especifica, em pixels, o tamanho vertical da
barra
Exemplo:
<HR Noshade Width="33%" size="5" Align="left">
Ana Torres ©
Pós-Graduação em Consultoria de Empresas
pág. 13/68
Construção de Páginas Pessoais de Internet
CARACTERES ESPECIAIS
Ana Torres ©
 
Ð
Ð
Ð
¡
¡
¡
Ñ
Ñ
Ñ
¢
¢
¢
Ò
Ò
Ò
£
£
£
Ó
Ó
Ó
¤
¤
¤
Ô
Ô
Ô
¥
¥
¥
Õ
Õ
Õ
¦
¦
¦
Ö
Ö
Ö
§
§
§
×
×
×
¨
¨
¨
Ø
Ø
Ø
©
©
©
Ù
Ù
Ù
ª
ª
ª
Ú
Ú
Ú
«
«
«
Û
Û
Û
¬
¬
¬
Ü
Ü
Ü
­
­
Ý
Ý
Ý
®
®
®
Þ
Þ
Þ
¯
¯
¯
ß
ß
ß
°
°
°
à
à
à
±
±
±
á
á
á
²
²
²
â
â
â
³
³
³
ã
ã
ã
´
´
´
ä
ä
ä
µ
µ
µ
å
å
å
¶
¶
¶
æ
æ
æ
·
·
·
ç
ç
ç
¸
¸
¸
è
è
è
¹
¹
¹
é
é
é
º
º
º
ê
ê
ê
»
»
»
ë
ë
ë
¼
¼
¼
ì
ì
ì
½
½
½
í
í
í
¾
¾
¾
î
î
î
¿
¿
¿
ï
ï
ï
À
À
À
ð
ð
ð
Á
Á
Á
ñ
ñ
ñ
Â
Â
Â
ò
ò
ò
Ã
Ã
Ã
ó
ó
ó
Ä
Ä
Ä
ô
ô
ô
Å
Å
Å
õ
õ
õ
Pós-Graduação em Consultoria de Empresas
pág. 14/68
Construção de Páginas Pessoais de Internet
Ana Torres ©
Æ
Æ
Æ
ö
ö
ö
Ç
Ç
Ç
÷
÷
÷
È
È
È
ø
ø
ø
É
É
É
ù
ù
ù
Ê
Ê
Ê
ú
ú
ú
Ë
Ë
Ë
û
û
û
Ì
Ì
Ì
ü
ü
ü
Í
Í
Í
ý
ý
ý
Î
Î
Î
þ
þ
þ
Ï
Ï
Ï
ÿ
ÿ
ÿ
Pós-Graduação em Consultoria de Empresas
pág. 15/68
Construção de Páginas Pessoais de Internet
TABELAS
DIRECTIVAS BÁSICAS
<TABLE>...</TABLE> - indica a presença duma tabela
<CAPTION>...</CAPTION> - título da tabela
<TR>...</TR> - Indica uma linha da tabela
<TH>...</TH> - Título duma coluna
<TD>...</TD> - Indica uma célula
Regra:
Uma tabela é feita de linhas e uma linha é feita de células (colunas).
A primeira linha deve conter os TH's e as seguintes os TD's.
Deve-se sempre usar os fins de directivas.
<TABLE>
WIDTH - tamanho da tabela em pixels ou em percentagem (100% por
exemplo)
CELLSPACING - espaco entre cada célula da tabela
CELLPADDING - tamanho da célula
BORDER - tamanho do bordo da tabela (por defeito não existe bordo; se
indicar o atributo BORDER mas não lhe der um valor, o browser indica um)
ALIGN - alinhamento da tabela: LEFT, RIGHT, CENTER, JUSTIFY, BLEEDLEFT
e BLEEDRIGHT
BGCOLOR - cor de fundo da tabela
Background – imagem de fundo da tabela
<CAPTION>
ALIGN - controla o alinhamento do título: LEFT, CENTER e RIGHT
<TR>
ALIGN - alinhamento horizontal: LEFT, CENTER e RIGHT
VALIGN - alinhamento vertical: TOP, MIDDLE, BOTTOM e BASELINE
ALIGN - alinhamento: LEFT, CENTER e RIGHT
ALIGN - alinhamento horizontal: LEFT, CENTER e RIGHT
VALIGN - alinhamento vertical: TOP, MIDDLE, BOTTOM e BASELINE
NOWRAP - evita mudanças de linha
ROWSPAN - indica que as células nas linhas a seguir não tem nada (na
mesma coluna)
COLSPAN - indica que as células nas colunas a seguir não tem nada (na
mesma linha)
BGCOLOR - cor de fundo da célula
Background – imagem de fundo da tabela
<TH>
<TD>
Os novos elementos permite a criação de tabelas que são, sem dúvida, muito utilizadas
no layout de um grande número de páginas que se encontram na Web.
<HTML>
<HEAD><TITLE>Exemplo de uma tabela</TITLE></HEAD>
<BODY>
<TABLE border BorderColor="BLUE" Align="Center">
<CAPTION><FONT color="BLUE" Size=3"><B><U>Curso de Internet</U></B>
</FONT></CAPTION>
Ana Torres ©
Pós-Graduação em Consultoria de Empresas
pág. 16/68
C
Construçã
ão de Pá
áginas Pe
essoais de
e Interne
et
<TR><!-- primeir
ro TR>
<TH Rowspa
an="2">1º Turma
<TH>Nome
<TD>In&eci
irc;s
<TD>S&iacu
ute;lvia
<TD>Pedro H.
<TD>Miguel
l
<TD>Pedro S.
</TR>
<TR><!-- segundo
o TR>
<TH>Idade
<TD Align=
="Center">22
<TD Align=
="Center">20
<TD Align=
="Center">20
<TD Align=
="Center">21
<TD Align=
="Center">22
</TR>
<TR><!-- terceir
ro TR>
<TH Rowspa
an="2">2º Turma
<TD Colspa
an="6" Align="Cent
ter"><FONT
T Color="R
Red">Por preencher
r
</FO
ONT>
</TR>
</TA
ABLE>
</BO
ODY>
</HT
TML>
o
a seguinte página:
De acordo com o código obtém-se
Um dos as
U
spectos a realçar
r
é que
q
para cada
c
linha de uma ttabela tem
m de haverr
o
obrigatoriam
mente um <TR>..</T
<
TR>. Assim,, quando pensarmos e
em fazer uma tabela,,
o melhor é decidir qu
uantas linha
as vamos precisar
p
e consequentemente co
olocar logo
o
e
este
elemento. Deste
e modo, como
te
emos uma
a tabela co
om três lin
nhas
c
começamos
s
faze
endo
três
<
<TR>…</TR
R> e só de
epois é que se
p
procedemos
s ao seu preenchimento
c
com
células
s do tipo <T
TD> ou <TH
H>.
AMES
FRA
ação que permite
p
a divisão
d
de uma janela
a de um browser em
m
Os frames são uma inova
es de inform
mação que trabalham de forma independen
nte ou relac
ctualmente
e
cionada. Ac
parte
só o Internet Ex
xplorer e o Netscape suportam esta funcio
onalidade.
entos para a implementação de frames
f
são
o FRAMESET
T, FRAME e NOFRAME
E
Os novos eleme
get="nome do frame" no elemento âncora.
bem como o atributo Targ
<FrameSett>…</FrameSet>
Este ele
emento pe
ermite a de
efinição de
e todos os
s
frames. Para tal conta co
om a ajuda destes
s
atributos:
Rows="Valor1
1,Valor2,…
…,ValorN" Indica o tamanho
t
v
vertical de cada uma
a
das linhas
s de frame
es. Por ex
xemplo, se
e
Rows="*,*
*" então a janela va
ai ter duas
s
linhas de frames
f
de iigual taman
nho.
T
©
Pós-Graduação em
e Consulto
oria de Em
mpresas
pág. 17/68
Ana Torres
Construção de Páginas Pessoais de Internet
Cols="Valor1,Valor2,…,ValorN"
<Frame>
Indica o tamanho horizontal de cada
frame da respectiva linha. Por exemplo,
se Cols="*,*" então a linha vai ter dois
frames de igual tamanho.
Este elemento cria um frame já definido pelo
framset. Este elemento apresenta os seguintes
atributos:
MarginHeight="Valor"
Número de pixels de margem no topo e
no fim de cada frame.
MarginWidth="Valor"
Número de pixels de margem à esquerda
e à direita.
Name="nome"
Nome do frame. Pode ser usado no
atributo Target para redireccionar o
frame onde a página vai ser aberta.
NoResize
Indica que o tamanho do frame não pode
ser reajustado pelo utilizador.
Src="url"
Específica a pagina a aparecer no frame.
Scrolling="yes|no|auto"
Permite controlar se a barras de scrolling
aparecem ou não. No modo auto as
barras só aparecem se forem mesmo
necessárias.
<NoFrame></NoFrame>
Ana Torres ©
É o elemento que define a zona que aparece
quando um browser, que não suporta frames,
tenta abrir o documento. Deste modo, é possível
a criação de uma página específica para tais
browsers.
Pós-Graduação em Consultoria de Empresas
pág. 18/68
Construção de Páginas Pessoais de Internet
Exemplo:
<NoFrame>
<Body>
Podemos criar outro documento nesta zona
</Body>
</NoFrame>
<A>…</A>
O elemento âncora, já conhecido, apresenta um
novo atributo designado por Target. Este atributo
indica o frame em que o URL indicado no Href irá
ser aberto.
Um exemplo:
Primeiro temos de construir um documento em HTML designado por Layout. Como se
pode verificar, o código em baixo, apresenta uma nova zona que engloba toda a
definição dos frames que vão aparecer no documento, ou seja
a zona entre o
<FramSet> e o </FramSet>. Neste exemplo, podemos verificar a existência de três
elementos <FramSet> isto para podermos criar duas linhas de frames em que a linha de
cima tem três frames, que por defeito abrem o frame1.html, e a debaixo apenas dois em
que o frame do lado esquerdo abre o documento frame2.html e o do lado direito a página
do iscte.
Layout.html
<HTML>
<HEAD><TITLE> Documento de Layout </TITLE></HEAD>
<FRAMESET Rows="160,*" NoreSize>
<FRAMESET Cols="*,*,*" NoreSize> <!--Define a 1ª Linha>
<Frame SRC="frame1.html" Name="f1">
<Frame SRC="frame1.html" Name="f2">
<Frame SRC="frame1.html" Name="f3">
</FRAMESET>
<FRAMESET Cols="*,*" NoreSize> <!--Define a 2ª Linha>
<Frame SRC="frame2.html" Name="f4">
<Frame SRC="http://www.iscte.pt" Name="f5">
</FRAMESET>
</FRAMESET>
<NOFRAME>
<BODY>
<p>
Este browser n&atiled;o suporta frames.
</BODY>
</NOFRAME>
</HTML>
Ana Torres ©
Pós-Graduação em Consultoria de Empresas
pág. 19/68
Consttrução de
e Páginas Pessoais de Inte
ernet
erto pelos frames
f
f1,f2
2 e f3 apresenta o seg
guinte código:
O documento frame1.html abe
ML>
<HTM
<HEA
AD><TITLE>
> Document
to Frame.h
html"</TIT
TLE></HEAD
D>
<BOD
DY>
<H1>
><FONT Col
lor="Red">
>frame1.ht
tml</FONT>
></H1>
<A Href="http
H
p://www.is
scte.pt" Target="f3
T
3">
Link
k para abr
rir o site
e do iscte
e no frame
e f3
</A>
>
</BO
ODY>
</HT
TML>
ento frame
e2.html aberto no frame
f
com o nome f4
f apresenta também
m um
O docume
código mu
uito simples
s e similar ao
a anterior:
<HTM
ML>
<HEA
AD><TITLE>
> Document
to Frame.h
html"</TIT
TLE></HEAD
D>
<BOD
DY>
<H1>
><U>frame2
2.html</U>
></H1>
<A Href="fram
H
me2.html" Target="f
f2">
Link
k para fra
ame2.html para no frame
f
f2
</A>
>
</BO
ODY>
</HT
TML>
o Layout.h
html é aberrto, se pres
ssionarmos
s num dos links dos frames
Quando o documento
f1,f2 ou f3 abrir-se--á, como é óbvio, a página do ISCTE no frame f3. Podemos ver
v
o
resultado obtido:
A rela
ação entre
e os frames
verifica
a-se na abe
ertura de um
u
link
num
outro
fram
me,
nto a in
ndependênc
cia
enquan
dos
frames
verifica-se
o se abre um link e a
quando
nova página aparece
a
n
no
o frame. Esta
E
situaçã
ão
próprio
verifica
a-se, por exemplo, se
carrega
armos em qualquer lin
nk
da pág
gina do iscte
e.
u
nova funcionalid
dade muito aplicada, no entan
nto há que ter
Os frames são uma
e não o sup
portam.
cuidado porque há muitos browser que
Ana Torres ©
P
Pós-Gradua
ção em Consultoria de
d Empresa
as
pág. 20/68
Construção de Páginas Pessoais de Internet
IMAGEMAPS
Com esta inovação é possível que um utilizador, ao carregar numa parte da imagem,
possa fazer o download ou abrir uma nova página de acordo com o conteúdo associado a
esse link.
O elementos para a manipulação de imagemaps são os seguintes:
<MAP></MAP>
Este elemento identifica a zona em que se define os
links associados a cada área de imagem. Este elemento
tem de ter obrigatoriamente o atributo Name para
podermos relacionar as coordenadas com a imagem a
que estas se referem.
<AREA>
Este elemento tem de estar entre o <MAP> e o
</MAP> e associa uma dada parte da imagem a um
link. Os atributos são os seguintes:
Shape="Circle|poly|rect|default" a opção de default define todas as zonas não
designadas.
Href="Url"
identifica o recurso associado à parte da
imagem
Coords
Este elemento depende forma escolhida:
<AREA Shape="Circle" Coords="x,y,raio" Href="Url">
<AREA
Shape="Poly"
Coords="x1,y2,..,xn,yn"
Href="Url">
<AREA Shape="rect" Coords="x1,y1,x2,y2" Href="Url">
<AREA Shape="default" NoHref>
Há a referir que, quando se proceder ao uso do elemento <IMG>, é necessário usar os
atributos Usemap="Nome definido no elemento Map" e Ismap pois de outro modo o
browser não saberia que a imagem estava associada a um imagemap.
Para a implementação de imagemaps é sempre necessário ter os seguintes passos em
mente:
1º Criação de uma imagem.
Há muitas ferramentas que possibilitam a criação uma imagem. Geralmente
estas imagem são no formato GIF (Graphical Interchange Format). Neste
momento é uma boa opção retirar os pixels que definem uma determinada
forma. Se a área for um circulo então retirar as coordenadas do centro e o
valor do raio e se for um rectângulo retirar o ponto situado em cima do lado
esquerdo e o ponto em baixo no lado esquerdo. Se a área for definida por um
polígono então retirar os pontos de cada vértice começando pelo que está
mais acima e à esquerda e depois, de forma sequencial, todos os outros .
2º Criar um mapa de coordenadas.
Neste passo é necessário especificar para cada área o recurso associado, ou
seja, é necessário decidir que o circulo definido por x,y,r irá a abrir
Ana Torres ©
Pós-Graduação em Consultoria de Empresas
pág. 21/68
Consttrução de
e Páginas Pessoais de Inte
ernet
determina
ado recurso
o. Nesta fa
ase podem
mos procede
er à criaç
ção da zon
na de
mapeame
ento que ap
presenta o seguinte
s
as
specto:
<MAP nam
me="MapNam
me">
<ARE
EA Shape="
"poly" Coo
ords="x1,y
y1,x2,y2,x
x3,y3" Hre
ef="URL">
<ARE
EA Shape="
"Circle" Coords="x,
C
,y,r" Href
f="URL">
<ARE
EA Shape="
"Rect" Coo
ords="x1,y
y1,x2,y2,x
x3,y3"
H
Href="URL ">
<AREA Shape="default" NoHr
ref>
</MAP>
Associar o a imagem
m ao mapa realizado
o.
3º A
Como se pode verifficar o elem
mento map
p tem um nome que é definido pelo
N
Este nome vai ser usa
ado para relacionar
r
o mapa co
om a
atributo Name.
imagem na
n medida em que ao escreve
er o eleme
ento <IMG
G> colocam
mos o
atributo usemap="#
u
#MapName" que indica que a imagem va
ai usar o mapa
m
com o no
ome indicado. Há a referir que
e é necessário coloca
ar tb o atrributo
Ismap para o interprretador sab
ber que está
á perante um
u imagma
ap.
map="MapNa
ame" Ismap
p>
<IMG Src="imagem.gif" Usem
agmap:
Exemplo de um ima
<HTML>
<HEAD>
<TITLE> exemplo de
d um imag
gemap </TITLE>
</HEAD>
<BODY>
<H1><P Align="cen
A
ter"> exemplo de um
u imagema
ap </H1>
<MAP nam
me="MapNam
me">
<AREA
S
Shape="pol
ly"
Coor
rds="15,30
0,150,10,1
150,100,15
5,150"
Href=
H
"http://www.iscte.pt">
<AREA Shape="Cir
S
rcle" Coo
ords="240,
,70,60" Href="htt
tp://www.i
ipfel
.pt">
<AREA
Shape="Re
ect"
Coo
ords="330,
,15,445,13
30"
Hre
ef="http:/
//www
.lycos.com">
<AREA Shape="default" NoHr
ref>
</MAP>
<P Align="center">
<IMG Src="imagemap.jpg" usemap="#Ma
apName" Is
smap>
</BODY>
</HTML>
d HTML es
scrito em cima dá origem à seguinte página
a:
O código de
o com a no
oção de ima
agemap se
e um utiliza
ador carreg
gar no políg
gono irá ab
brir a
De acordo
página do ISCTE, se carregar no
n circulo obterá
o
a página IPFEL e por fim obterá a pá
ágina
www.lycos
s.com caso opte por carregar
c
no
o
rectângulo
o.
cionalidade mostra-se
e poderosa
a
Esta func
porque pe
ermite ao utilizador um vasto
o
número de opções, na medida
a em que é
m
possível associar a cada pixel um
so. Há um
u
grande
e
determinado recurs
e sites cuja
a página HTML
H
é nem
m
número de
mais nem
m menos apenas
a
um
ma imagem
m em que partes desta têm funcionalid
dades
associadas
s.
Ana Torres ©
P
Pós-Gradua
ção em Consultoria de
d Empresa
as
pág. 22/68
Construção de Páginas Pessoais de Internet
FORMS
Um form é algo que permite receber dados do utilizador que posteriormente vão ser
usados por um script tipo JavaScript ou Visual Basic Script ou por um programa
executável que está associada ao form,
geralmente escrito em Java, c, c++, Tcl, Perl…
entre outras.
De forma geral e de acordo com o esquema
dado, um utilizador preenche todos os campos do
form cujos valores vão para um programa. Este
programa efectua uma dada operação, como por
exemplo: consultar uma base de dados e depois
criar um documento HTML que irá ser a resposta
visualizada pelo utilizador.
Para trabalhar com forms temos de usar os
seguintes elementos:
<FORM></FORM>
Delimita a zona de dados de um form.
Action="program.exe"
Neste atributos indica-se para onde devemos
enviar estes dados.
method="Post"
Indica o modo como os dados vão ser
processados. As opções são Get ou Post. O Post
deve ser usado quando se fazem alterações na
base de dados por outro lado usa-se o método
Get quando não se faz qualquer alteração.
<INPUT>
Tem de ser colocado dentro da zona definida pelo
elemento <FORM>.
Align="Middle|Top|Bottom"
segue.
Ana Torres ©
Estabelece a relação com o texto que o
Checked
Indica que o estado inicial de uma check box ou
radio button é estar seleccionado
MaxLength
Indica o número máximo de caracteres que o
utilizador pode introduzir num campo de texto.
Name
Dá o nome ao input.
Size
Específica o tamanho do campo. Se o valor dado
no MaxLength for maior que o Size é possível
fazer um scroll.
Src
Se associarmos um form a uma imagem.
Type="type"
define que tipo de input vamos ter.
Checkbox
Permite ter vários valores de uma vez.
Hidden
O campo não pode ser alvo de alteração por parte
do utilizador.
Image
Quando o utilizador carregar na imagem devolve
as coordenadas do rato.
Pós-Graduação em Consultoria de Empresas
pág. 23/68
Construção de Páginas Pessoais de Internet
Passwd
O texto é introduzido mas no browser aparecem
apenas asteriscos.
Radio
Permite ao utilizador escolher uma opção de um
conjunto de possibilidade.
Reset
Devolve o form aos valores de defeito.
Submit
Submete o form.
Text
Usado para uma linha de texto.
<SELECT></SELECT>
Permite ao utilizador escolher uma das opções cada
uma definida pelo elemento <OPTION>. Este elemento
tem os seguintes atributos:
Multiple
Indica que o utilizador pode seleccionar várias
opções.
Name
Dá o nome ao Select.
Size
Indica o número de opções visíveis.
<OPTION>
Tem de estar colocado entre as delimitações do
elemento SELECT
Selected
que indica que a opção está inicializada por
defeito.
Value
É o valor devolvido pelo select.
<TEXTAREA>
Este elemento é utilizado se pretendermos introduzir
várias linhas de texto. Este elemento apresenta os
seguintes atributos
Cols="número de Colunas"
Rows="Número de linhas".
Value="Valor"
é o valor inicial do campo quando é
seleccionado(se o type for radio este atributo têm
de estar atribuído).
Name="Nome"
Ana Torres ©
Pós-Graduação em Consultoria de Empresas
pág. 24/68
C
Construçã
ão de Pá
áginas Pe
essoais de
e Interne
et
Um exemplo:
ML>
<HTM
<HEA
AD>
<TIT
TLE> p&aac
cute;gina em HTML
</TI
ITLE>
</HE
EAD>
<BOD
DY>
<FOR
RM Method=
="Post" Ac
ction="pro
ograma.exe
e">
N
Nome:<INPU
UT Type="text" Nam
me="Nome" MaxLengt
th="15" Size="15">
<
<BR>
S
Sexo:<BR><
<INPUT Typ
pe="radio"
" Name="se
exo" Value
e="M"
C
Checked>Ma
asculino
<INPUT Typ
pe="radio" Name="se
exo" Value
e="F">Femi
inino<BR>
Q
Qual
o teu
u browser favorito?<BR>
<SELECT Na
ame="Brows
sers">
<OPTION>Arena
<OPTION>Netscape
<OPTION>Explorer
<OPTION>Lynx
<OPTION>Mosaic
<OPTION>MacWeb
</SELECT><BR>
Q
Quais
os sabores de
e gelado já provas-te?<BR>
<SELECT Na
ame="Sabor
res" Multi
iple size=
="3" Align
n="Middle"
">
<OPTION>
>Morango
<OPTION>
>Chocolate
<OPTION>
>Baunilha
<OPTION>Me
enta
</SELECT><BR>
F
Faz
um com
ment&aacut
te;rio:
<TEX
XTAREA Nam
me="Coment
t" Rows="2
2" Cols="3
30"></TEXT
TAREA>
<BR>
>
<INP
PUT Type="
"Submit" Value="Sub
V
bmit">
</FO
ORM>
</BO
ODY>
</HT
TML>
TML para fa
azer forms é bastante fácil, no entanto é
Como se pode verificar, usar o HT
ossível man
nipulá-los. Há
H assim que
q
recorrer a scripts ou a progrramas exec
cutados porr
impo
gateway que sã
ão totalmen
nte diferenttes
H
que se
e têm vindo a aprender.
do HTML
Os utilizadores
u
que estão habituados
s a
ver o código HTML nou
utras págin
nas
azer em prrogramas que
q
não o podem fa
cutados por gatewa
ay.
vão ser exec
vel
Nestte form, por exemplo,, é impossív
ver o código do
o programa
a.exe referido
no atributo Action do
d
elemen
nto
<FORM>.
T
©
Ana Torres
Pós-Graduação em
e Consulto
oria de Em
mpresas
pág. 25/68
Construção de Páginas Pessoais de Internet
Ana Torres ©
Pós-Graduação em Consultoria de Empresas
pág. 26/68
Construção de Páginas Pessoais de Internet
CASCADE STYLE SHEETS
Uma "Style Sheet" funciona basicamente como um modelo que controla a formatação
dos elementos HTML de uma página.
Alterando a formatação atribuída a um elemento HTML, através da definição de style
sheets, que se sobrepõe à formatação por defeito utilizada pelo browser para esse
elemento, é possível modificar toda a aparência de um "Web site".
Do ponto de vista dos autores de páginas HTML, esta potencialidade oferece, desde logo,
algumas vantagens:
• A possibilidade de aplicar formatações extra.
• Um controlo superior do esquema das páginas.
• A personalização rápida de um Web site como um todo.
Paralelamente, a utilização de styles sheets permite, entre outras coisas:
• Definir margens e especificar tamanhos de letra e cores de fundo para o texto.
• Deixar de utilizar estranhos truques para conseguir realizar tarefas
relativamente simples como definir as margens de um parágrafo.
• Modificar a aparência de uma só página ou de todo um site sem, para isso, ter
de alterar vários elementos HTML em cada página.
• Utilizar classes para definir variações de cada um dos estilos de formatação
definidos.
O surgimento deste novo conceito está intimamente ligado com o lançamento do
Microsoft Internet Explorer 3.0. Este foi o primeiro e, durante largo tempo, o único
browser a suportar style sheets, baseado na especificação Cascading Style Sheets do
W3C. Entretanto outros se lhe juntaram, como o Netscape Navigator
CONCEITOS
Uma style sheet pode ser utilizada de quatro formas distintas, dependendo das
necessidades:
• Ligando o documento HTML a uma style sheet. Desta forma é possível alterar
a formatação de várias páginas, modificando apenas um ficheiro.
• Inserindo uma style sheet dentro do documento HTML. Desta forma é possível
alterar a formatação de uma página, modificando apenas algumas das suas
linhas.
• Adicionando styles inline ao documento HTML. O que proporciona uma forma
simples de alterar a formatação de um só elemento, de um grupo de
elementos ou de um bloco de informação do documento.
• Importando uma style sheet externa.
• Claro que será sempre possível utilizar duas ou até as três técnicas no mesmo
documento.
Uma style sheet - seja ela utilizada da primeira forma ("Linked Style Sheet") ou na
segunda ("Embedded Style Sheet") - é composta por uma ou mais definições de estilo.
Uma definição de estilo é, por sua vez, composta pelo nome de um elemento HTML
(qualquer uma), seguida por uma lista de propriedades para esse elemento, dentro
de chavetas.
Cada uma dessas propriedades é identificada pelo seu nome, seguido de dois-pontos (:)
e pelo seu valor. Na definição de várias propriedades para um elemento, utiliza-se o
ponto-e-vírgula (;) para as separar.
Ana Torres ©
Pós-Graduação em Consultoria de Empresas
pág. 27/68
Construção de Páginas Pessoais de Internet
Por exemplo, a definição seguinte, altere o estilo de texto do elemento H1:
H1 {font-size: 15pt; font-height: bold}
A lista de todas as propriedades encontra-se na secção "Referência de Estilos".
É portanto possível criar definições de formatação para um número qualquer de
elementos HTML e colocar essas definições num ficheiro separado ou no próprio
documento.
LINKED STYLE SHEETS
Ligar um documento a uma style sheet é bastante simples. Basta criar o ficheiro com as
definições de estilo, gravá-lo com a extensão .CSS e adicionar um link para esse ficheiro
ao documento. Desta forma, o ficheiro de definições pode ser utilizado para controlar a
formatação de várias páginas HTML.
Por exemplo, se a style sheet fosse armazenada no ficheiro "style.css", armazenado na
mesma directoria que o ficheiro HTML, deveria adicionar ao documento o seguinte código
ao documento, dentro da tag HEAD:
<head>
<title>...</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
EMBEDDED STYLE SHEETS
Para inserir uma style sheet num documento, utiliza-se a tag STYLE, dentro da secção
HEAD do documento.
Este elemento recebe apenas um parâmetro, o atributo TYPE, que deve sempre ter o
valor "text/css", de forma a que os browsers que não suportam style sheets ignorem a
sua definição.
Logo após este elemento, seguem-se as definições de estilo:
<html>
<head>
(...)
<style type="text/css">
<!-H1 {font: 15pt/17pt "Arial"; color=maroon}
P {font: 10pt/12pt "Arial"; color=black}
--!>
</style>
</head>
<body>
...
</body>
</html>
Ana Torres ©
Pós-Graduação em Consultoria de Empresas
pág. 28/68
Construção de Páginas Pessoais de Internet
ESTILOS INLINE
Para beneficiar das potencialidades das style sheets em apenas algumas dos elementos
de um documento, podem utilizar-se os estilos inline.
As definições inline de estilos afectam apenas ocurrências bem definidas de um elemento
e são especificadas dentro da próprio elemento, usando o atributo STYLE:
<p style="margin-left: 0.5in; margin-right: 0.5in">
Apenas este parágrafo é afectado.
</p>
Sempre que um estilo inline entrar em conflito com outro estilo definido numa "linked" ou
"embedded" style sheet, a sua definição prevalecerá para o elemento em causa.
Para fazer um estilo inline afectar um bloco de elementos consecutivos, deve utilizar-se o
elemento DIV:
<div style="font-size: 8pt; color: blue">
<ul>
<li>Azul/8 pontos.
<li>Também.
</ul>
</div>
Torna-se, no entanto, importante perceber que a utilização frequente de estilos inline
contribui para aumentar a complexidade do código de uma página, dificultando a sua
revisão.
IMPORTAÇÃO DE STYLE SHEETS
Uma style sheet externa pode também ser importada para um documento utilizando a
propriedade @import:
@import: url(style.css);
Este elemento deve surgir no início de um bloco STYLE ou de uma "linked style sheet",
antes de outra qualquer definição. Todas as regras definidas na style sheet importada
serão aplicadas antes das regras definidas pela style sheet que contiver a importação.
AGRUPAMENTO DE ESTILOS
Para, por exemplo, atribuir a mesma formatação a várias tags, é permitido agrupar
H1 {font-size: 15pt; font-weight: bold; color=red}
H2 {font-size: 15pt; font-weight: bold; color=red}
H3 {font-size: 15pt; font-weight: bold; color=red}
numa só definição:
H1 H2 H3 {font-size: 15pt; font-weight: bold; color=red}
CLASSES
Para definir várias formatações alternativas para uma mesmo elemento, utilizam-se
classes.
Por exemplo, se desejasse utilizar trés cores diferentes para o elemento H1, consoante o
contexto, teria de definir três classes dentro do bloco STYLE:
Ana Torres ©
Pós-Graduação em Consultoria de Empresas
pág. 29/68
Construção de Páginas Pessoais de Internet
<style>
H1.red {font:15pt/17pt; color:red}
H1.green {font:15pt/17pt; color:green}
H1.blue {font:15pt/17pt; color:blue}
</style>
Existe também a possibilidade de partilhar a mesma classe por vário elementos HTML
diferentes. Nesse caso, a definição do estilo poderia ser, por exemplo:
<style>
.clsRed {color:red}
</style>
Finalmente, é possível atribuir um determinado estilo a uma instância especifica de
um elemento HTML (definida pelo atributo ID). Para estes casos, o estilo deve ser
definido, por exemplo, da seguinte forma:
<style>
#idPinkP {color:pink}
</style>
Vejamos agora alguns exemplos da aplicação destas definições:
<H1 CLASS="red">Heading vermelho</H1>
<H1 CLASS="green">Heading verde</H1>
<P CLASS="clsRed">Parágrafo vermelho</P>
<I CLASS="clsRed">Itálico vermelho</P>
<P ID="idPinkP">Parágrafo cor-de-rosa</P>
REFERÊNCIA DE ESTILOS
Aqui temos a lista completa das definições de estilos suportadas pelo Microsoft
Internet Explorer.
Para obter uma lista mais completa deve consultar a especificação W3C.
Note-se que o Internet Explorer não suporta presentemente todos os atributos e valores
definidos por essa especificação. Mais, segundo a Microsoft, alguns dos atributos
documentados nesta secção podem, em determinadas condições, não funcionar
exactamente como descrito.
Caso isso aconteça, experimente trocar a ordem dos atributos. Por exemplo, se, ao
definir duas propriedades para o elemento H1, não obtiver os resultados esperados, deve
tentar de novo trocando a ordem pela qual as definiu.
Ana Torres ©
Pós-Graduação em Consultoria de Empresas
pág. 30/68
Construção de Páginas Pessoais de Internet
Atributo
font
@font-face
Descrição
Valores
Todas as caracteristicas
da font
Font a utilizar
nome da font
Tamanho do texto
pontos(pt)
polegadas(in)
centímetros(cm)
pixels(px)
Itálico
normal
italic
Capitalização do texto
normal
small-caps
Espessura do texto
normal
bold
Font a utilizar
color
Cor do texto
font-family
font-size
font-style
font-variant
font-weight
background
background-color
background-image
background-repeat
backgroundattachment
background-position
letter-spacing
text-decoration
vertical-align
text-transform
text-align
text-indent
line-height
margin-top
margin-left
Ana Torres ©
nome da cor
valor RGB
Cor ou imagem de fundo transparent
URL
nome da cor
valor RGB
Cor de fundo
transparent
nome da cor
valor RGB
Imagem de fundo
none
URL
Modo de repetição do
repeat
background
repeat-x
repeat-y
no-repeat
scroll
fixed
Posiçã do fundo
Espaço entre as letras
normal
tamanho
Decoração do texto
none
underline
overline
line-through
Alinhamento vertical
sub
super
capitalize
uppercase
lowercase
none
Alinhamento
left
center
right
justify
Distância em relação à pontos(pt)
margem esquerda
polegadas(in)
centímetros(cm)
pixels(px)
Distância entre duas
pontos(pt)
linhas base (baselines) polegadas(in)
centímetros(cm)
pixels(px)
percentagem(%)
Distância em relação ao auto
limite superior da página pontos(pt)
polegadas(in)
centímetros(cm)
pixels(px)
Distância em relação ao auto
limite esquerdo da
pontos(pt)
Exemplo
{font:bold 12pt Arial;}
{font-family:Arial;}
{font-size:10pt;}
{font-style:italic;}
{font-variant:normal;}
{font-weight:bold;}
@font-face: {font-family:CoolFont;
url(http://server.com/cf.eof);}
{color:blue;}
{background:#008000;}
{background-color:#008000;}
{background-image:url(1.jpg);}
{background-repeat:repeat-x;}
{background-attachment:scroll;}
{background-position:top center;}
{letter-spacing:2pt;}
{text-decoration:none}
{vertical-align:sub}
{text-transform:uppercase}
{text-align:center;}
{text-indent:10pt;}
{line-height: 3cm}
{margin-top:-25px;}
{margin-left:25px;}
Pós-Graduação em Consultoria de Empresas
pág. 31/68
Construção de Páginas Pessoais de Internet
página
margin-right
margin-bottom
margin
padding-top
padding-right
padding-bottom
padding-left
padding
border-top-width
border-left-width
border-right-width
border-bottom-width
border-width
border-top-color
border-left-color
border-right-color
border-bottom-color
border-color
border-top-style
border-left-style
Ana Torres ©
polegadas(in)
centímetros(cm)
pixels(px)
Distância em relação ao auto
limite direito da página pontos(pt)
polegadas(in)
centímetros(cm)
pixels(px)
Distância em relação ao auto
limite inferior da página pontos(pt)
polegadas(in)
centímetros(cm)
pixels(px)
Margem
pontos(pt)
polegadas(in)
centímetros(cm)
pixels(px)
pontos(pt)
polegadas(in)
centímetros(cm)
pixels(px)
pontos(pt)
polegadas(in)
centímetros(cm)
pixels(px)
pontos(pt)
polegadas(in)
centímetros(cm)
pixels(px)
pontos(pt)
polegadas(in)
centímetros(cm)
pixels(px)
Largura da moldura
thin
superior
medium
thik
tamanho
Largura da moldura
thin
esquerda
medium
thik
tamanho
Largura da moldura
thin
direita
medium
thik
tamanho
Largura da moldura
thin
inferior
medium
thik
tamanho
Largura da moldura
thin
medium
thik
tamanho
Cor da moldura superior cor
Cor da moldura
cor
esquerda
Cor da moldura direita cor
Cor da moldura inferior cor
Cor da moldura
cor
Estilo da moldura
none
superior
solid
double
groove
ridge
inset
outset
Estilo da moldura
none
esquerda
solid
{margin-right:25px;}
{margin-bottom:25px;}
{margin:10px 5px 10px 5px;}
{padding-top:10%;}
{padding-right:10%;}
{padding-bottom:10%;}
{padding-left:10%;}
{padding:10% 10% 10% 10%;}
{border-top-width:thin;}
{border-left-width:thin;}
{border-right-width:thin;}
{border-bottom-width:thin;}
{border-width:thin thin thin thin;}
{border-top-color:white;}
{border-left-color:white;}
{border-right-color:white;}
{border-bottom-color:white;}
{border-color:white white white white;}
{border-top-style:solid;}
{border-left-style:solid;}
Pós-Graduação em Consultoria de Empresas
pág. 32/68
Construção de Páginas Pessoais de Internet
border-right-style
border-bottom-style
border-style
border-top
border-left
border-right
border-bottom
border
float
clear
clip
height
width
left
top
position
visibility
cursor
Ana Torres ©
double
groove
ridge
inset
outset
Estilo da moldura direita none
solid
double
groove
ridge
inset
outset
Estilo da moldura
none
inferior
solid
double
groove
ridge
inset
outset
Estilo da moldura
none
solid
double
groove
ridge
inset
outset
Moldura superior
Moldura esquerda
Moldura direita
Moldura inferior
Moldura
none
left
right
none
left
right
both
auto
área
Altura
auto
tamanho
Largura
auto
tamanho
auto
percentagem
tamanho
auto
percentagem
tamanho
Posição do elemento
absolute
relative
static
visible
hidden
inherit
Forma do cursor do rato auto
crosshair
hand
default
move
(...)
{border-right-style:solid;}
{border-bottom-style:solid;}
{border-style:solid;}
{border-top:medium outset red;}
{border-left:medium outset red;}
{border-right:medium outset red;}
{border-bottom:medium outset red;}
{border:medium outset red;}
{float:left;}
{clear:both;}
{clip:rect(0px 200px 100px 0px);}
{height:200px;}
{width:200px;}
{left:0px;}
{top:0px;}
{position:absolute;}
{visibility:hidden;}
{cursor:hand;}
Pós-Graduação em Consultoria de Empresas
pág. 33/68
Construção de Páginas Pessoais de Internet
Ana Torres ©
Pós-Graduação em Consultoria de Empresas
pág. 34/68
Construção de Páginas Pessoais de Internet
REFERÊNCIA HTML
!..
Define um comentário.
<!-- ... -->
Exemplo(s):
<!-- Comentários -->
!DOCTYPE
Especifica a versão HTML utilizada no documento.
<!DOCTYPE ...>
Exemplo(s):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
A
Serve para definir um link ou um "anchor".
<A [NAME="nome"] [HREF="url"] [TARGET="nome"]>
•
NAME
Define um "anchor" dentro de um documento HTML.
•
HREF
Define o endereço destino do link.
•
TARGET
Define a janela (ou frame) em que que o ficheiro destino deve ser aberto. Os valores possíveis são:
o nome de uma janela (ou frame), "_top", "_self", "_parent" ou "_blank".
Exemplo(s):
<A NAME="Anchor1">Link1</a>
<A HREF="http://www.sapo.pt/">SAPO</a>
<A HREF="links.html" target="Win1">Links</a>
ADDRESS
Define um endereço de mailing. O texto é normalmente visualizado em itálico.
<ADDRESS>
Exemplo(s):
<ADDRESS>[email protected]</ADDRESS>
APPLET
Insere um applet Java num documento HTML.
<APPLET [CODEBASE="url"] [CODE="url"] [NAME="nome"] [ALT="texto"] WIDTH=pixels HEIGHT=pixels
[ALIGN="alinhamento"] [HSPACE=pixels] [VSPACE=pixels]>
•
CODEBASE
Directoria em que o applet está localizado.
•
CODE
Nome do applet.
Ana Torres ©
Pós-Graduação em Consultoria de Empresas
pág. 35/68
Construção de Páginas Pessoais de Internet
•
NAME
Nome utilizado por outros objectos na página para identificar o applet.
•
ALT
Texto alternativo.
•
WIDTH
Largura inicial da área da página reservada para mostrar o applet.
•
HEIGHT
Altura inicial da área da página reservada para mostrar o applet.
•
ALIGN
Alinhamento do applet em relação ao texto circundante.
•
HSPACE
Espaço horizontal entre o applet e os objectos circundantes na página.
•
VSPACE
Espaço vertical entre o applet e os objectos circundantes na página.
Exemplo(s):
<APPLET CODE="Bubbles.class" WIDTH=500 HEIGHT=500>Animated Bubbles</APPLET>
AREA
Especifica a forma de um "ponto quente" de um "client-side image map".
<AREA [SHAPE="forma"] [COORDS="coordenadas"] [HREF="url"] [NOHREF] [TARGET="nome"] [ALT="texto"]>
•
SHAPE
Forma do "ponto quente". Os valores possíveis são:
RECT:
Rectângulo. Exige 4 coordenadas: x1, y1, x2 e y2.
CIRC:
Circulo. Exige 3 coordenadas: centrox, centroy e raio.
RECT:
Polígono. Aceita 3 ou mais pares de coordenadas que definam o polígono.
DEFAULT:
Corresponde a todas as áreas da imagem não definidas por outros elementos AREA no mesmo image map.
•
COORDS
As coordenadas que definem a área do "ponto quente".
•
HREF
Endereço do documento destino.
•
NOHREF
Define que, se o utilizador clicar a região definida, não deve acontecer nada.
•
TARGET
Nome da janela (ou frame) onde o documento destivo deve ser visualizado.
•
ALT
Texto alternativo.
Exemplo(s):
Ana Torres ©
Pós-Graduação em Consultoria de Empresas
pág. 36/68
Construção de Páginas Pessoais de Internet
<AREA SHAPE="rect" COORDS="10,10,40,50" HREF="doc1.html">
<AREA SHAPE="circ" COORDS="100,10,20" NOHREF>
<AREA SHAPE="default" HREF="doc3.html" TARGET="Frame2">
B
Desenha o texto em bold (negrito).
<B>
Exemplo(s):
<B>Texto em negrito</a>
Ana Torres ©
Pós-Graduação em Consultoria de Empresas
pág. 37/68
Construção de Páginas Pessoais de Internet
BASE
Define o URL do documento actual.
<BASE [HREF="url"] [TARGET="nome"]>
•
HREF
URL do documento.
•
TARGET
Especifica a janela (ou frame) em que todos os links do documento devem ser abertos.
Exemplo(s):
<BASE HREF="http://paginas.teleweb.pt/~ammiguel/">
BASEFONT
Define a formatação por defeito para o texto não formatado usando "style-sheets" ou elementos FONT.
<BASEFONT [FACE="nome"] [SIZE=n] [COLOR="cor"]>
•
FACE
Tipo de letra (font).
•
SIZE
Tamanho (entre 1 e 7).
•
COLOR
Cor do texto.
Exemplo(s):
<BASEFONT FACE="Arial" SIZE=3>
<BASEFONT FACE="Arial" COLOR="white">
<BASEFONT SIZE="+1" COLOR="#008000">
BGSOUND
Permite incluir m´sica de fundo numa página HTML.
<BGSOUND [SRC="url"] [LOOP=n]>
•
SRC
Endereço do ficheiro de som.
•
LOOP
Define o n´mero de vezes que o som deve tocar antes de parar. LOOP="-1" ou LOOP="infinite"
causa que o som não páre de tocar.
Exemplo(s):
<BGSOUND SRC="music1.mid" LOOP=3>
<BGSOUND SRC="music1.mid" LOOP="infinite">
BIG
Aumenta o tamanho do texto.
<BIG>
Exemplo(s):
<BIG>Texto Grande</BIG>
Ana Torres ©
Pós-Graduação em Consultoria de Empresas
pág. 38/68
Construção de Páginas Pessoais de Internet
BLOCKQUOTE
Utilizado para marcar citações.
<BLOCKQUOTE>
Exemplo(s):
<BLOCKQUOTE>Citação aqui</BLOCKQUOTE>
Ana Torres ©
Pós-Graduação em Consultoria de Empresas
pág. 39/68
Construção de Páginas Pessoais de Internet
BODY
Delimita o corpo do documento.
<BODY [BGCOLOR="cor"] [BACKGROUND="url"] [TEXT="cor"] [LINK="cor"] [VLINK="cor"] [ALINK="cor"]
[LEFTMARGIN="pixels"] [TOPMARGIN="pixels"]>
•
BGCOLOR
Define o cor de fundo da página.
•
BACKGROUND
Define a imagem a utilizar como fundo da página.
•
TEXT
Define a cor do texto.
•
LINK
Define a cor dos links não visitados.
•
VLINK
Define a cor dos links já visitados.
•
ALINK
Define a cor dos links quando o utilizador os seleccionar.
•
LEFTMARGIN
Especifica o tamanho (em pixels) da margem horizontal do corpo da página.
•
TOPMARGIN
Especifica o tamanho (em pixels) da margem vertical do corpo da página.
Exemplo(s):
<BODY BGCOLOR="white" LINK="blue" ALINK="green" VLINK="red">...</BODY>
<BODY BACKGROUND="/Images/back.gif" TEXT="#000000">...</BODY>
BR
Insere uma quebra de linha.
<BR [CLEAR="tipo"]>
•
CLEAR
Insere espaço vertical de forma que o texto seguinte seja desenhado abaixo de imagens (ou outros
objectos) que estejam ao mesmo nível do texto anterior. Os valores possíveis são: LEFT, RIGHT e
ALL.
Exemplo(s):
Linha 1<br>Linha 2
CAPTION
Define o título de uma tabela.
<CAPTION [ALIGN="alinhamento"]>
•
ALIGN
Especifica o alinhamento do título em relação à tabela.
Exemplo(s):
<TABLE>
<CAPTION>Lista de Elementos</CAPTION>
Ana Torres ©
Pós-Graduação em Consultoria de Empresas
pág. 40/68
Construção de Páginas Pessoais de Internet
...
</TABLE>
Ana Torres ©
Pós-Graduação em Consultoria de Empresas
pág. 41/68
Construção de Páginas Pessoais de Internet
CENTER
Centre os elementos incluídos entre a elemento iniciadora e a elemento terminadora.
<CENTER>
Exemplo(s):
<CENTER>Texto Centrado</CENTER>
CITE
Indica uma citação.
<CITE>
Exemplo(s):
<CITE>Citação</CITE>
CODE
Indica uma porção de código (C, por exemplo). O texto é, normalmente, desenhado usando uma font de largura
fixa e num tamanho reduzido.
<CODE>
Exemplo(s):
<CODE>VarA := 10;</CODE>
COL
Define as propriedades de uma ou mais colunas de uma tabela. Quando utilizado em conjunto com o elemento
COLGROUP, define as propriedades de uma coluna dentro de um grupo de colunas.
<COL [ALIGN="tipo"] [SPAN=n] [WIDTH=pixels]>
•
ALIGN
Define o alinhamento das células da coluna.
•
SPAN
Define o número de colunas consecutivas a que este ELEMENTO se aplica.
•
WIDTH
Define a largura da coluna.
Exemplo(s):
<COLGROUP>
<COL WIDTH=30>
<COL WIDTH=100>
COLGROUP
Define as propriedades de uma conjunto de colunas de uma tabela.
<COLGROUP [ALIGN="tipo"] [SPAN=n] [WIDTH=pixels]>
•
ALIGN
Define o alinhamento das células das colunas.
•
SPAN
Número de colunas consecutivas as quais se aplica a definição.
•
WIDTH
Define a largura das colunas.
Ana Torres ©
Pós-Graduação em Consultoria de Empresas
pág. 42/68
Construção de Páginas Pessoais de Internet
Exemplo(s):
<TABLE>
<COLGROUP SPAN=10 WIDTH=130>
<COL WIDTH=30>
<COL WIDTH=100>
<COLGROUP>
<COL WIDTH=100>
...</TABLE>
DD
Define uma definição dentro de uma lista de definições.
<DD>
Exemplo(s):
<DL>
<DT>Nome:
<DD>Nome Apelido
<DT>Email:
<DD>[email protected]
</DL>
DFN
Especifica uma definição.
<DFN>
Exemplo(s):
<DFN>Definição</DFN>
DIV
Permite a definição de um grupo de elementos (tags) HTML como um todo, ou seja, permite definir uma divisão do
documento.
<DIV [ALIGN="tipo"]>
•
ALIGN
Define o alinhamento dos conteúdos do elemento DIV.
Exemplo(s):
Linha1<DIV>Linha 2</DIV><DIV>Linha 3<P>Linha 4</DIV>
DL
Define uma lista de definições.
<DL>
Exemplo(s):
<DL>
<DT>Nome:
<DD>Nome Apelido
<DT>Email:
Ana Torres ©
Pós-Graduação em Consultoria de Empresas
pág. 43/68
Construção de Páginas Pessoais de Internet
<DD>[email protected]
</DL>
DT
Especifica um termo numa lista de definições. Indica cada um dos termos que estão a ser definidos.
<DT>
Exemplo(s):
<DL>
<DT>Nome:
<DD>Nome Apelido
<DT>Email:
<DD>[email protected]
</DL>
EM
Enfâse. Causa que o texto seja apresentado em itálico.
<EM>
Exemplo(s):
<EM>Texto</EM>
EMBED
Insere um objecto numa página HTML.
<EMBED [SRC="url"] [NAME="nome"] [WIDTH=pixels] [HEIGHT=pixels] [OPTIONAL PARAM="valor"]
[AUTOSTART="tipo"] [HIDDEN="tipo"] [LOOP="tipo"]>
•
SRC
Localização do objecto.
•
NAME
Nome a utilizar por outros objectos para referir este objecto.
•
WIDTH
Largura da área da página reservada para o objecto.
•
HEIGHT
Altura da área da página reservada para o objecto.
•
OPTIONAL PARAM
Define os parâmetros do objecto.
•
AUTOSTART
Define se o objecto deve ser iniciado imediatamente após ter sido carregado. TRUE ou FALSE.
•
HIDDEN
Define se o objecto deve ser visível na página. TRUE ou FALSE.
•
LOOP
TRUE ou FALSE.
Exemplo(s):
<EMBED SRC="movie.avi" WIDTH=100 HEIGHT=250 AUTOSTART="true">
<EMBED SRC="s1.mid" AUTOSTART="true" HIDDEN="true">
FONT
Defino o tipo de letra, a cor e tamanho do texto.
Ana Torres ©
Pós-Graduação em Consultoria de Empresas
pág. 44/68
Construção de Páginas Pessoais de Internet
<FONT [FACE="nome"] [SIZE=n] [COLOR="cor"]>
•
FACE
Lista dos tipos de letra do texto, por ordem de preferência.
•
SIZE
Define o tamanho do texto. De 1 (menor) a 7 (maior).
•
COLOR
Define a cor do texto.
Exemplo(s):
<FONT FACE="Arial,Helvetica" SIZE=4>Texto</FONT>
<FONT SIZE="+2" COLOR="blue">Texto</FONT>
<FONT SIZE="-1" COLOR="#008000">Texto</FONT>
FORM
Define uma form.
<FORM [ACTION="url"] [METHOD="tipo"] [TARGET="nome"]>
•
ACTION
Especifica o endereço a usar para realizar a acção da form.
•
METHOD
Define a forma como os dados devem ser enviados para o servidor.
GET:
Adiciona os dados, como argumentos, ao URL.
POST:
Envia os dados através de uma transacção HTTP.
•
TARGET
Define a janela (ou frame) onde os resultados da form devem ser abertos.
Exemplo(s):
<FORM ACTION="http://server.pt/cgi-bin/adduser" METHOD="post" TARGET="_top">
...
</FORM>
<FORM ACTION="mailto:[email protected]" METHOD="post">
...
</FORM>
FRAME
Define uma frame de um "frameset".
<FRAME [NAME="nome"] [SRC="url"] [FRAMEBORDER=n] [MARGINWIDTH=pixels] [MARGINHEIGHT=pixels]
[NORESIZE] [SCROLLING="tipo"]>
•
NAME
Define o nome da frame.
Ana Torres ©
Pós-Graduação em Consultoria de Empresas
pág. 45/68
Construção de Páginas Pessoais de Internet
•
SRC
Especifica o ficheiro fonte com os conteúdos da frame.
•
FRAMEBORDER
Especifica se o browser deve desenhar uma moldura em torno da frame. Os valores possíveis são 0
(sem frame) ou 1 (com frame).
•
MARGINWIDTH
Define a dimensão da margem horizontal da frame.
•
MARGINHEIGHT
Define a dimensão da margem vertical da frame.
•
NORESIZE
Impede o utilizador de alterar o tamanho da frame.
•
SCROLLING
Cria a frame com uma "scrolling bar" (barra de deslocamento).
Exemplo(s):
<FRAME NAME="Frame1" SRC="frame1.html" FRAMEBORDER=0 SCROLLING="yes">
<FRAME NAME="Frame2" SRC="frame2.html" FRAMEBORDER=0 SCROLLING="no" NORESIZE>
FRAMESET
Define um "frameset".
<FRAMESET [COLS="valores"] [ROWS="valores"] [FRAMEBORDER=n] [FRAMESPACING="pixels"]>
•
COLS
Cria um frameset com colunas. As dimensões das colunas podem ser definidas em percentagens
(%), pixels ou tamanhos relativos.
•
ROWS
Cria um frameset com linhas. As dimensões das linhas podem ser definidas em percentagens (%),
pixels ou tamanhos relativos.
•
FRAMEBORDER
Especifica se o browser deve desenhar uma moldura em torno das frames. Os valores possíveis são
0 (sem frame) ou 1 (com frame).
•
FRAMESPACING
Define o espaço entre as frames (em pixels).
Exemplo(s):
<FRAMESET COLS="33%,33%,33%">
<FRAMESET ROWS="*,200">
<FRAME NAME="Frame1" SRC="frame1.html">
<FRAME NAME="Frame2" SRC="frame2.html">
</FRAMESET>
<FRAME NAME="Frame3" SRC="frame3.html">
<FRAME NAME="Frame4" SRC="frame4.html">
</FRAMESET>
Hn
Heading.
<Hn [ALIGN="tipo"]>
•
ALIGN
Define o alinhamento do texto.
Ana Torres ©
Pós-Graduação em Consultoria de Empresas
pág. 46/68
Construção de Páginas Pessoais de Internet
Exemplo(s):
<H1>Heading 1</H1>
<H3>Heading 3</H3>
<H6>Heading 6</H6>
HEAD
Marca o cabeçalho do documento.
<HEAD>
Exemplo(s):
<HTML>
<HEAD>
<TITLE>Html Help</TITLE>
</HEAD>
...
</HTML>
HR
Insere uma linha horizontal.
<HR [ALIGN="tipo"] [SIZE=pixels] [WIDTH=pixels] [NOSHADE]>
•
ALIGN
Define o alinhamento da linha na página.
•
SIZE
Define a altura da linha em pixels.
•
WIDTH
Define a largura da linha.
•
NOSHADE
Desenha a linha sem sombra.
Exemplo(s):
<HR ALIGN="center" SIZE=3 WIDTH=200>
<HR WIDTH="75%" NOSHADE>
<HR NOSHADE>
Ana Torres ©
Pós-Graduação em Consultoria de Empresas
pág. 47/68
Construção de Páginas Pessoais de Internet
HTML
Especifica que o documento foi desenvolvido em HTML.
<HTML>
Exemplo(s):
<HTML>
...
</HTML>
I
Itálico.
<I>
Exemplo(s):
<I>Texto em Itálico</I>
IFRAME
Define uma "floating frame".
<IFRAME [NAME="nome"] [SRC="url"] [FRAMEBORDER=n] [MARGINWIDTH=pixels] [MARGINHEIGHT=pixels]
[SCROLLING="tipo"] [ALIGN="tipo"] [WIDTH=pixels] [HEIGHT=pixels]>
•
NAME
Define o nome da frame.
•
SRC
Especifica o URL do ficheiro fonte.
•
FRAMEBORDER
Desenha, ou não, uma moldura à volta da frame. Os valores possíveis são 0 ou 1.
•
MARGINWIDTH
Tamanho, em pixels, da margem horizontal da frame.
•
MARGINHEIGHT
Tamanho, em pixels, da margem vertical da frame.
•
SCROLLING
Cria a frame com uma "scrolling bar". Os valores possíveis são YES ou NO.
•
ALIGN
Define o alinhamento da frame em relação ao texto circundante.
•
WIDTH
Largura, em pixels, da frame.
•
HEIGHT
Altura, em pixels, da frame.
Exemplo(s):
<IFRAME NAME"IFrame1" SRC="foo.html"></IFRAME>
ILAYER
Define um "layer inline".
<ILAYER [NAME="nome"] [LEFT=pixels] [TOP=pixels] [PAGEX=pixels] [PAGEY=pixels] [SRC="url"]
[WIDTH=pixels] [HEIGHT=pixels] [CLIP="valores"] [Z-INDEX=n] [ABOVE="nome"] [BELOW="nome"]
[VISIBILITY="tipo"] [BGCOLOR="cor"] [BACKGROUND="url"]>
•
NAME
Define o nome do layer.
Ana Torres ©
Pós-Graduação em Consultoria de Empresas
pág. 48/68
Construção de Páginas Pessoais de Internet
•
LEFT
Posição horizontal do canto superior-esquerdo do layer em relação ao layer que o contém.
•
TOP
Posição vertical do canto superior-esquerdo do layer em relação ao layer que o contém.
•
PAGEX
Posição horizontal do canto superior-esquerdo do layer em relação ao documento que o contém.
•
PAGEY
Posição vertical do canto superior-esquerdo do layer em relação ao documento que o contém.
•
SRC
Especifica o URL do ficheiro HTML fonte.
•
WIDTH
Largura, em pixels, do layer.
•
HEIGHT
Altura, em pixels, do layer.
•
CLIP
Define os limites da área visível do layer. Aceita um valor composto por quatro números que
definem os limites, respectivamente, esquerdo, superior, direito e inferior em relação ao canto
superior-esquerdo do layer contentor.
•
Z-INDEX
Especifica a "stacking order" do layer.
•
ABOVE
Coloca o novo layer imediatamente por cima do layer especificado por este atributo.
•
BELOW
Coloca o novo layer imediatamente por baixo do layer especificado por este atributo.
•
VISIBILITY
Determina se o layer devem, ou não, ser visível. Os valores possíveis são: HIDE, SHOW e INHERIT.
•
BGCOLOR
Define a cor de fundo do layer.
•
BACKGROUND
Define a imagem de fundo do layer.
Exemplo(s):
<ILAYER NAME"Layer1" SRC="foo.html"></ILAYER>
IMG
Insere uma imagem na página.
<IMG SRC="url" [ALT="texto"] [ALIGN="tipo"] [WIDTH=pixels] [HEIGHT=pixels] [BORDER=n] [HSPACE=pixels]
[VSPACE=pixels] [USEMAP="nome"] [ISMAP]>
•
SRC
URL do ficheiro fonte.
•
ALT
Texto alternativo.
•
ALIGN
Alinhamento da imagem em relação aos elementos circundantes.
•
WIDTH
Largura da imagem, em pixels.
•
HEIGHT
Altura da imagem, em pixels.
•
BORDER
Define a largura, em pixels, da moldura a desenhar à volta da imagem.
•
HSPACE
Define a margem horizontal da imagem em relação aos elementos circundantes.
•
VSPACE
Define a margem vertical da imagem em relação aos elementos circundantes.
•
USEMAP
Identifica a imagem como sendo um "client-side image map".
Ana Torres ©
Pós-Graduação em Consultoria de Empresas
pág. 49/68
Construção de Páginas Pessoais de Internet
•
ISMAP
Identifica a imagem como sendo um "server-side image map".
Exemplo(s):
<IMG SRC="img1.gif" ALIGN="right" WIDTH=200 HEIGHT=156>
<IMG SRC="http://server.pt/gifs/img1.gif" ALT="Logo">
<IMG SRC="img1.gif" ALT="Logo" USEMAP="#Navmap">
<IMG SRC="../maps/img1.map" ISMAP>
INPUT
Define um elemento de uma form.
<INPUT [TYPE="tipo"] [NAME="nome"] [VALUE="valor"] [CHECKED] [SIZE=n] [MAXLENGTH=n] [SRC="url"]
[ALIGN="tipo"]>
•
TYPE
Define o tipo de elemento que está a ser definido.
TEXT:
Campo de texto.
PASSWORD:
Idêntico a TEXT, com excepção que o texto não será visualizado.
IMAGE:
Define uma imagem para substituir o botão de submissão da form.
HIDDEN:
O campo não é visualizado, apesar dos seus conteúdos serem enviados para o servidor.
CHECKBOX:
Utilizado para atributos booleanos e para atributos que podem assumir vários valores diferentes.
RADIO:
Para atributos que aceitam um só valor de um conjunto de alternativas.
SUBMIT:
Botão para submeter os dados da form.
RESET:
Botão para limpar o conteúdo de todos os campos da form.
•
NAME
Define o nome do elemento.
•
VALUE
Para elementos alfa-numéricos, define o seu valor por defeito. Para elementos booleanos (por
exemplo, RADIO) define o valor a enviar ao servidor quando o elemento for seleccionado.
Ana Torres ©
Pós-Graduação em Consultoria de Empresas
pág. 50/68
Construção de Páginas Pessoais de Internet
•
CHECKED
Define que o elemento deve estar seleccionado por defeito. Válido apenas para CHECKBOX e RADIO.
•
SIZE
Define o tamanho, em caracteres, do elemento.
•
MAXLENGTH
Define o número máximo de caracteres que o campo aceita.
•
SRC
Usando quando TYPE="image", define o localização da imagem.
•
ALIGN
Define o alinhamento do elemento em relação aos objectos circundantes. Válido apenas para IMAGE.
Exemplo(s):
<INPUT TYPE="text" NAME="Elem1">
<INPUT TYPE="submit" VALUE="Submeter">
<INPUT TYPE="image" SRC="/images/in.gif">
<INPUT TYPE="radio" NAME="Radio1" VALUE="Y"> Yes
<INPUT TYPE="checkbox" NAME="Check1" VALUE="Y" CHECKED> Yes
ISINDEX
Indica a presença de um índice procurável.
<ISINDEX [ACTION="url"] [PROMPT="texto"]>
•
ACTION
Especifica a localização do programa que recebe o texto introduzido pelo utilizador.
•
PROMPT
Define o texto a apresentar ao utilizador.
Exemplo(s):
<ISINDEX PROMPT="Chave da Procura:">
KBD
Desenha o texto num estilo de letra de largura fixa.
<KBD>
Exemplo(s):
<KBD>Texto aqui</KBD>
LAYER
Define um layer normal.
<LAYER [NAME="nome"] [LEFT=pixels] [TOP=pixels] [PAGEX=pixels] [PAGEY=pixels] [SRC="url"]
[WIDTH=pixels] [HEIGHT=pixels] [CLIP="valores"] [Z-INDEX=n] [ABOVE="nome"] [BELOW="nome"]
[VISIBILITY="tipo"] [BGCOLOR="cor"] [BACKGROUND="url"]>
•
NAME
Define o nome do layer.
•
LEFT
Posição horizontal do canto superior-esquerdo do layer em relação ao layer que o contém.
•
TOP
Posição vertical do canto superior-esquerdo do layer em relação ao layer que o contém.
•
PAGEX
Posição horizontal do canto superior-esquerdo do layer em relação ao documento que o contém.
Ana Torres ©
Pós-Graduação em Consultoria de Empresas
pág. 51/68
Construção de Páginas Pessoais de Internet
•
PAGEY
Posição vertical do canto superior-esquerdo do layer em relação ao documento que o contém.
•
SRC
Especifica o URL do ficheiro HTML fonte.
•
WIDTH
Largura, em pixels, do layer.
•
HEIGHT
Altura, em pixels, do layer.
•
CLIP
Define os limites da área visível do layer. Aceita um valor composto por quatro números que
definem os limites, respectivamente, esquerdo, superior, direito e inferior em relação ao canto
superior-esquerdo do layer contentor.
•
Z-INDEX
Especifica a "stacking order" do layer.
•
ABOVE
Coloca o novo layer imediatamente por cima do layer especificado por este atributo.
•
BELOW
Coloca o novo layer imediatamente por baixo do layer especificado por este atributo.
•
VISIBILITY
Determina se o layer devem, ou não, ser visível. Os valores possíveis são: HIDE, SHOW e INHERIT.
•
BGCOLOR
Define a cor de fundo do layer.
•
BACKGROUND
Define a imagem de fundo do layer.
Exemplo(s):
<LAYER NAME"Layer1" SRC="foo.html">
...
</LAYER>
LI
Denota um elemento de uma lista (definida pelos elementos OL ou UL).
<LI>
Exemplo(s):
<UL>
<LI>Item1
<LI>Item2
</UL>
<OL>
<LI>Item1
<LI>Item2
</OL>
Ana Torres ©
Pós-Graduação em Consultoria de Empresas
pág. 52/68
Construção de Páginas Pessoais de Internet
LINK
Estabelece uma organização hierarquica para a navegação entre documentos. Este elemento deve ser definida
dentro do cabeçalho do documento.
<LINK [HREF="url"] [REL="tipo"] [REV="tipo"] [TYPE="tipo"] [TARGET="nome"]>
•
HREF
Especifica o URL do documento que tem uma relação com o documento actual.
•
REL
Define o tipo de relação entre o documento especificado e o actual.
•
REV
Define o tipo de relação entre o documento actual e o especificado.
•
TYPE
Define o "internet media type".
•
TARGET
Define em que janela (ou frame) o documento destino deve ser aberto.
Exemplo(s):
<LINK REL="Index" HREF="index.html">
<LINK REL="Previous" HREF="chapter3.html">
<LINK REL="Next" HREF="chapter1.html">
MAP
Especifica um "client-side image map".
<MAP [NAME="nome"]>
•
NAME
Define o nome do mapa.
Exemplo(s):
<MAP NAME="NavMap">
<AREA SHAPE="rect" COORDS="10,10,187,27" HREF="main.html">
<AREA SHAPE="default" NOHREF>
</MAP>
MARQUEE
Cria um "marquee".
<MARQUEE [ALIGN="tipo"] [BEHAVIOUR="tipo"] [BGCOLOR="cor"] [DIRECTION="tipo"] [LOOP=n]
[SCROLLAMOUNT=n] [SCROLLDELAY=n] [WIDTH="pixels"] [HEIGHT="pixels"] [HSPACE="pixels"]
[VSPACE="pixels"]>
•
ALIGN
Define o alinhamento do "marquee" em relação aos objectos circundantes.
•
BEHAVIOUR
Define o comportamento de "marquee". Os valores possíveis são SCROLL, SLIDE e ALTERNATE.
•
BGCOLOR
Define a cor de fundo.
•
DIRECTION
Define a orientação do deslocamento do texto.
•
LOOP
Número de vezes que o texto deve ser mostrado antes de parar.
Ana Torres ©
Pós-Graduação em Consultoria de Empresas
pág. 53/68
Construção de Páginas Pessoais de Internet
•
SCROLLAMOUNT
Define o número de pixels entre visualizações consecutivas do "marquee".
•
SCROLLDELAY
Define o número de milisegundos entre visualizações consecutivas do "marquee".
•
WIDTH
Largura do "marquee".
•
HEIGHT
Altura do "marquee".
•
VSPACE
Define a margem vertical do "marquee".
•
HSPACE
Define a margem horizontal do "marquee".
Exemplo(s):
<MARQUEE DIRECTION="left" BEHAVIOUR>
Scrolling Marquee
</MARQUEE>
META
Fornece informação acerca do documento HTML.
<META [HTTP-EQUIV="nome"] [NAME="nome"] [CONTENT="texto"]>
•
HTTP-EQUIV
Liga o documento a um "HTTP response header".
•
NAME
Especifica a propriedade que está a ser definida.
•
CONTENT
Define a meta-informação associada à propriedade.
Exemplo(s):
<META HTTP-EQUIV="refresh" CONTENT="10; URL=index.html">
<META NAME="author" CONTENT="Nome">
NOBR
Impede quebras de linha.
<NOFRAMES>
Exemplo(s):
<NOBR>Texto aqui</NOBR>
NOFRAMES
Denota conteúdo visível apenas em browsers que não suportam frames.
<NOFRAMES>
Exemplo(s):
<NOFRAMES>
Conteúdo para browsers que não suportam frames
</NOFRAMES>
NOLAYER
Ana Torres ©
Pós-Graduação em Consultoria de Empresas
pág. 54/68
Construção de Páginas Pessoais de Internet
Denota conteúdo visível apenas em browsers que não suportam layers.
<NOLAYER>
Exemplo(s):
<NOLAYER>
Conteúdo para browsers que não suportam layers
</NOLAYER>
NOSCRIPT
Denota conteúdo visível apenas em browsers que não suportam scripts.
<NOSCRIPT>
Exemplo(s):
<SCRIPT LANGUAGE="JavaScript">
...
</SCRIPT>
<NOSCRIPT>
Conteúdo Alternativo
</NOSCRIPT>
OBJECT
Insere objectos (imagem, applets, documentos, etc.) na página.
<OBJECT [CODEBASE="url"] [CLASSID="url"] [DATA="url"] [SRC="url"] [ALIGN="tipo"] [WIDTH=pixels]
[HEIGHT=pixels] [HSPACE=pixels] [VSPACE=pixels] [DECLARE] [USEMAP="nome"]>
•
CODEBASE
Especifica a localização do objecto.
•
CLASSID
Identifica a implementação do objecto.
•
DATA
Localização de dados do objecto.
•
SRC
Localização do objecto (no caso de imagens).
•
ALIGN
Alinhamento do objecto em relação aos elementos circundantes.
•
WIDTH
Largura da área da página reservada para o objecto.
•
HEIGHT
Altura da área da página reservada para o objecto.
•
HSPACE
Tamanho da margem horizontal.
•
VSPACE
Tamanho da margem vertical.
•
DECLARE
Declara o objecto mas não instancia.
•
USEMAP
Define o nome do "client-side map" a utilizar para o objecto.
Exemplo(s):
<OBJECT SRC="img1.gif"></OBJECT>
<OBJECT CLASSID="http://server.pt/clock.py">Texto Alternativo</OBJECT>
Ana Torres ©
Pós-Graduação em Consultoria de Empresas
pág. 55/68
Construção de Páginas Pessoais de Internet
OL
Lista ordenada de elementos.
<OL [TYPE="tipo"] [START=n]>
•
TYPE
Define o estilo de lista.
A:
Utiliza letras grandes para numerar os elementos. (A, B, ...)
a:
Utiliza letras pequenas para numerar os elementos (a, b, ...).
I:
Utiliza números romanos grandes para numerar os elementos (I, II, ...).
i:
Utiliza números romanos pequenos para numerar os elementos (i, ii, ...).
1:
Utiliza números para numerar os elementos (1, 2, ...).
•
START
Define o número inicial.
Exemplo(s):
<OL TYPE="a">
<LI>Item 1
<LI>Item 2
</OL>
<OL START=10>
<LI>Item 10
<LI>Item 11
</OL>
OPTION
Define uma das opções de um bloco SELECT.
<OPTION [SELECTED] [VALUE="valor"]>
•
SELECT
Indica que a opção deve estar seleccionada por defeito.
•
VALUE
Valor a enviar ao servidor se o utilizador seleccionar a opção.
Exemplo(s):
Ana Torres ©
Pós-Graduação em Consultoria de Empresas
pág. 56/68
Construção de Páginas Pessoais de Internet
<SELECT NAME="List1">
<OPTION VALUE="1">Opção 1
<OPTION VALUE="2" SELECTED>Opção 2
</SELECT>
P
Insere um novo parágrafo.
<P [ALIGN="tipo"]>
•
ALIGN
Alinhamento do texto.
Exemplo(s):
<P>Parágrafo Normal</P>
<P ALIGN="center">Parágrafo Centrado</P>
PARAM
Define o valor de um parâmetro de um objecto.
<PARAM [NAME="nome"] [VALUE="valor"] [VALUETYPE="tipo"]>
•
NAME
Nome do parâmetro.
•
VALUE
Valor.
•
VALUETYPE
Define a forma de interpretar o valor.
DATA:
Dados.
REF:
URL.
OBJECT:
URL de outro objecto do documento.
Exemplo(s):
<APPLET CODE="vba.class" WIDTH=100 HEIGHT=100>
<PARAM NAME="P1" VALUE="1">
<PARAM NAME="P2" VALUE="2">
</APPLET>
PRE
Texto pré-formatado.
<PRE>
Exemplo(s):
Ana Torres ©
Pós-Graduação em Consultoria de Empresas
pág. 57/68
Construção de Páginas Pessoais de Internet
<PRE>
Texto pré-formatado
</PRE>
SAMP
Desenha o texto numa "font" de largura fixa.
<SAMP>
Exemplo(s):
<SAMP>Texto</SAMP>
SCRIPT
Inclui uma script no documento. As scripts de um documento são executadas pela ordem que aparecem no
documento.
<SCRIPT [LANGUAGE="nome"] [SRC="url"]>
•
LANGUAGE
Indica a linguagem que foi utilizada para escrever a script.
•
SRC
Localização do documento externo que contém o código da script.
Exemplo(s):
<SCRIPT LANGUAGE="JavaScript">
documente.write("A Primeira Script");
</SCRIPT>
SELECT
Define um elemento de uma form do tipo "list box".
<SELECT [NAME="nome"] [SIZE=n] [MULTIPLE]>
•
NAME
Nome do elemento.
•
SIZE
Largura do elemento.
•
MULTIPLE
Indica que o utilizador pode seleccionar mais que uma das opções da lista.
Exemplo(s):
<SELECT NAME="List1">
<OPTION VALUE="Op1"> Opção 1
<OPTION VALUE="Op2"> Opção 2
</SELECT>
<SELECT NAME="List1" MULTIPLE>
<OPTION VALUE="Op1"> Opção 1
<OPTION VALUE="Op2"> Opção 2
<OPTION VALUE="Op3"> Opção 3
Ana Torres ©
Pós-Graduação em Consultoria de Empresas
pág. 58/68
Construção de Páginas Pessoais de Internet
<OPTION VALUE="Op4"> Opção 4
</SELECT>
SMALL
Diminui o tamanho do texto.
<SMALL>
Exemplo(s):
<SMALL>Texto em letra pequena</SMALL>
STRIKE
"Strike-through".
<STRIKE>
Exemplo(s):
<STRIKE>Texto aqui</STRIKE>
STRONG
Desenha o texto em "bold" (negrito).
<STRONG>
Exemplo(s):
<STRONG>Texto</STRONG>
STYLE
Define uma "embedded style sheet".
<STYLE [TYPE="tipo"]>
•
TYPE
"Internet media type" (por exemplo, "text/css").
Exemplo(s):
<STYLE TYPE="text/css">
H1.mine {text-align: center; color: blue}
</STYLE>
SUB
"Subscript".
<SUB>
Exemplo(s):
<SUB>Texto</SUB>
SUP
"Supercript".
<SUP>
Exemplo(s):
<SUP>Texto</SUP>
Ana Torres ©
Pós-Graduação em Consultoria de Empresas
pág. 59/68
Construção de Páginas Pessoais de Internet
TABLE
Define uma tabela.
<TABLE [ALIGN="tipo"] [BGCOLOR="cor"] [BACKGROUND="url"] [WIDTH="pixels"] [COLS=n] [BORDER=n]
[CELLSPACING=n] [CELLPADDING=n]>
•
ALIGN
Especifica o alinhamento da tabela.
•
BGCOLOR
Define a cor de fundo.
•
BACKGROUND
Define a imagem de fundo da tabela.
•
WIDTH
Largura.
•
COLS
Número de colunas da tabela.
•
BORDER
Tamanho, em pixels, da moldura da tabela.
•
CELLSPACING
Define o espaço, em pixels, entre os limites das células da tabela.
•
CELLPADDING
Define o espaço, em pixels, entre os limites das células da tabela e os seus conteúdos.
Exemplo(s):
<TABLE BORDER=0 WIDTH="100%" CELLPADDING=3 CELLSPACING=0>
...
</TABLE>
<TABLE BGCOLOR="#ffffff" WIDTH="300">
...
</TABLE>
TBODY
Define o corpo ("body") da tabela. Este elemento é utilizado para distinguir as linhas da tabela que pertencem ao
corpo desta, das que pertencem ao seu cabeçalho ("header") ou rodapé ("footer").
<TBODY>
Exemplo(s):
<TABLE>
<THEAD>
<TR> header...
</THEAD>
<TFOOT>
<TR> footer...
</TFOOT>
<TBODY>
<TR> bloco 1 (linha 1)...
<TR> bloco 1 (linha 2)...
</TBODY>
<TBODY>
Ana Torres ©
Pós-Graduação em Consultoria de Empresas
pág. 60/68
Construção de Páginas Pessoais de Internet
<TR> bloco 2 (linha 1)...
<TR> bloco 2 (linha 2)...
</TBODY>
</TABLE>
Ana Torres ©
Pós-Graduação em Consultoria de Empresas
pág. 61/68
Construção de Páginas Pessoais de Internet
TD
Cria uma célula da tabela.
<TD [BGCOLOR="cor"] [BACKGROUND="url"] [ALIGN="tipo"] [VALIGN="tipo"] [WIDTH="pixels"] [ROWSPAN=n]
[COLSPAN=n]>
•
BGCOLOR
Cor de fundo.
•
BACKGROUND
Imagem de fundo.
•
ALIGN
Alinhamento horizontal do conteúdo.
•
VALIGN
Alinhamento vertical do conteúdo.
•
WIDTH
Largura da célula.
•
ROWSPAN
Número de linhas que a célula ocupa.
•
COLSPAN
Número de colunas que a célula ocupa.
Exemplo(s):
<TABLE>
<TR>
<TD WIDTH="100" ALIGN="center" VALIGN="top">
...
</TD>
<TD ALIGN="center" VALIGN="top" BGCOLOR="blue">
...
</TD>
</TR>
</TABLE>
TEXTAREA
Criar uma área numa form para o utilizador introduzir texto.
<TEXTAREA [NAME="nome"] [ROWS=n] [COLS=n]>
•
NAME
Nome do elemento.
•
ROWS
Altura, em caracteres, da área.
•
COLS
Largura, em caracteres, da área.
Exemplo(s):
<TEXTAREA NAME="texto" ROWS=4 COLS=30></TEXTAREA>
TFOOT
Define o rodapé de uma tabela.
<TFOOT>
Ana Torres ©
Pós-Graduação em Consultoria de Empresas
pág. 62/68
Construção de Páginas Pessoais de Internet
Exemplo(s):
<TABLE>
<THEAD>
<TR> header...
</THEAD>
<TFOOT>
<TR> footer...
</TFOOT>
<TBODY>
<TR> bloco 1 (linha 1)...
<TR> bloco 1 (linha 2)...
</TBODY>
<TBODY>
<TR> bloco 2 (linha 1)...
<TR> bloco 2 (linha 2)...
</TBODY>
</TABLE>
TH
Define uma célula que funciona como título de uma linha ou coluna de uma tabela.
<TH [BGCOLOR="cor"] [BACKGROUND="url"] [ALIGN="tipo"] [VALIGN="tipo"] [WIDTH="pixels"] [ROWSPAN=n]
[COLSPAN=n]>
•
BGCOLOR
Cor de fundo.
•
BACKGROUND
Imagem de fundo.
•
ALIGN
Alinhamento horizontal do conteúdo.
•
VALIGN
Alinhamento vertical do conteúdo.
•
WIDTH
Largura da célula.
•
ROWSPAN
Número de linhas que a célula ocupa.
•
COLSPAN
Número de colunas que a célula ocupa.
Exemplo(s):
<TABLE>
<TR>
<TH WIDTH="100" ALIGN="center" VALIGN="top">
...
</TH>
<TH ALIGN="center" VALIGN="top" BGCOLOR="blue">
...
</TH>
</TR>
Ana Torres ©
Pós-Graduação em Consultoria de Empresas
pág. 63/68
Construção de Páginas Pessoais de Internet
<TR>
<TD WIDTH="100" ALIGN="center" VALIGN="top">
...
</TD>
<TD ALIGN="center" VALIGN="top" BGCOLOR="blue">
...
</TD>
</TR>
</TABLE>
Ana Torres ©
Pós-Graduação em Consultoria de Empresas
pág. 64/68
Construção de Páginas Pessoais de Internet
THEAD
Define o cabeçalho de uma tabela.
<THEAD>
Exemplo(s):
<TABLE>
<THEAD>
<TR> header...
</THEAD>
<TFOOT>
<TR> footer...
</TFOOT>
<TBODY>
<TR> bloco 1 (linha 1)...
<TR> bloco 1 (linha 2)...
</TBODY>
<TBODY>
<TR> bloco 2 (linha 1)...
<TR> bloco 2 (linha 2)...
</TBODY>
</TABLE>
TITLE
Define o título de um documento HTML. Válido apenas dentro do elemento HEAD.
<TITLE>
Exemplo(s):
<HTML>
<HEAD>
<TITLE>Página do João</TITLE>
...
</HEAD>
<BODY>
...
</BODY>
</HTML>
TR
Cria uma linha da tabela.
<TR [BGCOLOR="cols"] [BACKGROUND="url"] [ALIGN="tipo"] [VALIGN="tipo"]>
•
BGCOLOR
Cor de fundo.
•
BACKGROUND
Imagem de fundo.
•
ALIGN
Alinhamento horizontal do conteúdo.
•
VALIGN
Alinhamento vertical do conteúdo.
Ana Torres ©
Pós-Graduação em Consultoria de Empresas
pág. 65/68
Construção de Páginas Pessoais de Internet
Exemplo(s):
<TABLE>
<TR BGCOLOR="white">
<TD WIDTH="100" ALIGN="center" VALIGN="top">
...
</TD>
<TD ALIGN="center" VALIGN="top" BGCOLOR="blue">
...
</TD>
</TR>
</TABLE>
TT
"Teletype". Desenha o texto numa font de largura fixa.
<TT>
Exemplo(s):
<TT>Fixed-width Font</TT>
U
Sublinhado.
<U>
Exemplo(s):
<U>Texto sublinhado</U>
UL
Define uma lista, não ordenada, de elementos.
<UL [TYPE="tipo"]>
•
TYPE
Tipo de "bullet" a utilizar. Os valores possíveis são DISC, SQUARE e CIRCLE.
Exemplo(s):
<UL>
<LI> Item 1
<LI> Item 2
<LI> Item 3
</UL>
VAR
Denota que o texto corresponde a uma variável. O texto é desenhado numa font de largura fixa.
<VAR>
Exemplo(s):
<VAR>Texto Aqui</VAR>
Ana Torres ©
Pós-Graduação em Consultoria de Empresas
pág. 66/68
Download
