HTML

HTML Curso de Introduo
Vitor Manuel Carvalho CICA - FEUP
HTML - Curso de Introduo
ndice
Esclarecimento Prvio A Histria da Internet Captulos 1 2 3 4 5 6 7 8 9 10 11 Apndices A B C D Prlogo A Linguagem Uma Pgina Simples Formatao de Texto Insero de Links Insero de Imagens Insero de Tabelas Formatao de Fontes Ttulos e Formatos Tipo Insero de Frames Esttica e Conduta Web Glossrio Cdigos de Caracteres Pallette Cromtica da Web Estruturao de Directrios 3 4 6 6 7 9 10 12 15 21 23 27 32 36 42 43 49
Esclarecimento Prvio
Assisti, como todo o mundo, ao surgir desta nova tecnologia assente no termo Comunicao Global. Embora a sua histria remonte a 1969, s em princpios da dcada de noventa a Internet passou a ser domnio do grande pblico. Tive o meu primeiro contacto com um browser em finais de 1993. Depois da curiosidade inicial, quis saber o que se encontrava por trs da cortina de texto e imagens que me eram apresentados. Adquiri uma verso do Netscape Navigator com editor de HTML e puz-me a inventar uma pgina de cariz pessoal - um Curriculum Vitae. A sua apresentao era manifestamente pobre. Creio que me faltava uma certa conscincia da Web. Algumas horas passadas a surfar na rede, fizeram com que abrisse os olhos para uma realidade que pensava no existir. Aprendi no contacto directo com as pginas da Web e tambm na troca de ideias com os meus amigos Csar Henriques e Jorge Reis. Ganhei um especial gosto pelo Web Design, que se desenvolveu quando tive possibilidade de trabalhar com o Photoshop, um programa para processamento de imagem. Depois de algumas brincadeiras em programao HTML, surgiu nas minhas mos o projecto de colaborar na elaborao das pginas Web da Faculdade de Engenharia da Universidade do Porto. Esta proposta foi personalizada pela Dra. Lgia Ribeiro do Centro de Informtica Correia de Arajo da mesma faculdade. Corria o ano de 1996. Ao longo de um ano, enquanto trabalhava em conjunto com Csar Henriques na elaborao das pginas, fui-me apercebendo de toda a dimenso que a Internet verdadeiramente ocupa. O tempo passa e cada vez mais percebo que o adjectivo teia no significa apenas um emaranhado de fios. Deixei-me prender por este mundo e os projectos no param de surgir. No que diz respeito ao bichinho ciberntico, sinto-me plenamente realizado. Passou o tempo necessrio para poder dizer que reuni um conjunto de informaes suficiente para elaborar o presente livro. Espero que ele seja de alguma utilidade para quem, pela primeira vez, deseje aventurar-se neste mundo global que a Internet
Vitor Manuel Ferreira Alves Carvalho vitor@atlantis.fe.up.pt 970904
A Histria da Internet
A Internet comeou a sua vida como ARPAnet, um projecto fundado pelo Departamento de Defesa dos Estados Unidos em 1969, para ligar os departamentos militares e numerosas universidades com pesquisa apoiada pelo exrcito. ARPA Advanced Research Project Administration - era ento responsvel por arrecadar fundos para o Projecto. Mas a ARPAnet no foi apenas criada para ligar a comunidade investigadora de cariz militar. Ela prpria era um projecto de investigao. O objectivo era desenvolver uma tecnologia de rede informtica fivel que pudesse suportar uma estratgia de ataque militar. No corao do design da network para a ARPAnet estava uma faceta chamada dynamic rerouting : se uma das ligaes fosse cortada ou corrompida, a network desviaria o trfego para outras ligaes. Por volta de 1983, a ARPAnet tinha-se tornado to usada, particularmente por universidades, que comeou a acusar excesso de trfego. Uma nova network teve de ser criada - MILNET servindo apenas sites militares. A ARPAnet abarcou o trfego nomilitar, mas continuava ligada MILNET atravs de um sistema de software designado por Internet Protocol, ou IP. Capaz de aguentar dezenas de milhar de networks separadas, o IP tornou-se rapidamente standard e a Internet - originalmente descrevendo um sistema que tornava possvel a intercomunicao de duas networks - tornou-se no nome para a network global dos nossos dias. Na mesma altura, um sistema operativo universal para computadores chamado UNIX tinha-se tornado bastante popular, especialmente nas universidades. O sistema UNIX era comum em poderosos computadores desktop, tambm conhecidos como workstations. Algumas verses do UNIX incluiam o software necessrio para a ligao a uma network. As workstations tornaram-se comuns. Todas elas ligaram-se ARPAnet. Mais uma vez, era eminente o perigo de excesso de trfego. Em 1984, a administrao da ARPAnet tornou-se responsabilidade da US National Foundation (NSF). A NSF providenciou desde logo uma network mais rpida (NSFNET) para lidar com o trfego proveniente destes centros de super-computadores. Isto em 1986. A NSFNET trabalhou bem e, por volta de 1990, a mais lenta ARPAnet sofria de tantas deficincias que, depois de vinte anos de servio, foi finalmente desligada. A misso original da NSFNET era ligar super-computadores. A chegada de mquinas mais pequenas e mais poderosas tornou os super-computadores menos atractivos.
Em meados dos anos noventa a NSFNET comeou a desaparecer, mas ainda era a parte principal da Internet. Isto traz-nos quase ao presente. Outros desenvolvimentos importantes que moldaram a Internet dos nossos dias, vieram do mercado comercial. No princpio dos anos noventa, algumas grandes companhias criaram as suas prprias networks globais, cada uma das quais possuindo links ou gateways para a Internet. Estas companhias incluiam lderes mundiais em computadores, sistemas de telecomunicaes e operadores especializados em Internet. Foi esta exploso de networks comerciais interligadas que deu Internet a cobertura de que ela goza hoje em dia - mais de cem pases por todo o mundo.
19 69
Os primeiros quatro ns da ARPAnet foram colocados em algumas universidades dos Estados Unidos.
A primeira demonstrao pblica da ARPAnet numa conferncia em Washington DC. O mundo quer ligar-se! Ray Tomlinson inventa o correio electrnico.
19 72
A Noruega e a Inglaterra so ligadas. Trata-se agora de uma rede internacional.
19 73
Os detalhes do Protocolo de Controlo de Transmisses (TCP), uma das tecnologias que iro definir a Internet, so publicados.
19 74
19 83
TCP/IP torna-se o protocolo standard para a ARPAnet no dia 1 de Janeiro.
A NSF responsabiliza-se pela ARPAnet. O sistema de atribuio de nomes para computadores na network, Domain Name System (DNS), introduzido.
19 84
19 86
A NSF estabelece a sua prpria rede mais rpida a NSFNET. introduzido o Network News Transfer Protocol (NNTP), que torna possvel a discusso interactiva em fruns on-line.
A ARPAnet desligada. A mais popular Internet toma conta das ligaes.
19 90
19 91
A Universidade do Minnesota introduz o sistema Gopher, um programa de software que disponibiliza informao contida nos servidores da Internet.
CERN, um gabinete internacional de pesquisa em fsica com sede na Suia, lana o cdigo HTML, um conceito em software que levar ao desenvolvimento da WWW.
19 92
19 93
O primeiro lanamento de um browser para a Web, chamado Mosaic. Outros se seguiro, incluindo a Netscape e a Microsoft. Nasceu o termo: Surfar na Rede.
25 anos desde o nascimento da ARPAnet. Um quarto de sculo de existncia para a Internet.
19 94
19 95
O crescimento explosivo. No final do ano, seis milhes de servidores e cinquenta mil networks esto ligadas Internet.
Os termos "Internet" e "Web" tornam-se de uso comum por todo o mundo.
19 96
HTML
Curso de Introduo 1
O que a HTML?
Prlogo
HTML uma linguagem baseada em marcas, que se destina a formatar tudo quanto aparece em documentos para a WWW. Esta formatao feita tanto no layout de qualquer texto inserido, como na colocao de imagens, passando pela criao de links e atribuio de cores ou imagens para papel-de-parede. No uma linguagem complexa e torna-se fcil de entender mesmo para quem nunca teve nenhum tipo de contacto com linguagens de programao. Iremos abordar passo-a-passo os comandos bsicos da linguagem HTML. Criaremos uma pgina bastante simples de incio e medida que formos avanando pelos diferentes captulos, acrescentaremos pormenores mais elaborados. No final deste curso, o leitor dever ser capaz de fazer pelos seus prprios meios uma pgina HTML e ganhar uma determinada tica e esttica criativa para a Web.
Como se estrutura este curso?
2
O que significa HTML?
A Linguagem
HTML a abreviatura de HyperText Markup Language. Foi a linguagem desenvolvida para transmitir a informao dos documentos que so disponibilizados na Web pelo protocolo http (hypertext transfer protocol). Os documentos nesta linguagem so armazenados em ficheiros ASCII com extenso .html em plataformas de 32 bits ou superiores e com extenso .htm em plataformas de 16 bits. Para criar um documento em HTML basta que o leitor possua um editor de texto bsico: o programa EDIT do MS-DOS ou o
necessrio algum aplicativo para a escrita em HTML?
NOTEPAD do Windows 95 servem perfeitamente. Existem tambm programas prprios para editar cdigo HTML. O mais conhecido e tambm o mais verstil, o HOMESITE. Encontrar uma cpia shareware deste programa em: http://www.allaire.com Neste curso, partiremos do princpio que o leitor utilizar um editor ou processador de texto na elaborao das listagens.
Estruturao de uma escrita em HTML
Antes de comearmos propriamente com a escrita em HTML, h que alertar desde j o leitor para a importncia da estruturao de um programa em qualquer linguagem e muito em particular numa listagem HTML. Existem certas linguagens que obrigam o utilizador a estruturar os seus programas, como o caso do FORTRAN, LISP, C ou PASCAL. Com o HTML no se passa o mesmo. Podemos introduzir todo o cdigo de uma pgina numa nica linha, sem que por isso o browser se queixe ou interprete mal o conjunto de comandos. Em HTML, a estruturao destina-se apenas a tornar mais legvel o cdigo inserido. Com frequncia, aparecem erros de cdigo que poderiam ser evitados com uma formatao prvia do programa. Esta formatao facilita a descoberta de erros, por exemplo: marcas no fechadas, como veremos mais adiante. Na lista do cdigo em si, existem duas divises fundamentais: o cabealho e o corpo do programa.
3
Programa 1
Uma Pgina Simples

<html> <head> <title>A Minha Primeira Pgina</title> </head> <body> </body> </html>
Noes gerais sobre os comandos
O programa acima escrito 100% funcional, embora produza uma pgina HTML bastante pobre. Faamos a sua anlise: Todos os comandos HTML e suas respectivas propriedades devem aparecer entre os sinais < (menor-do-que) e > (maior-doque) e designam-se por marcas (tags). Quando o browser encontra estes sinais, sabe que o que est entre eles no texto, mas sim um comando a ser executado. Como facilmente se percebe, tudo o
que no se encontre entre estes dois sinais, tratado como texto a ser colocado na pgina. Por outro lado, vemos que os comandos so abertos, produzem um determinado efeito, e depois so fechados, para cessar o seu efeito. Fecha-se uma marca recorrendo ao sinal / (right slash). Passemos a analizar cada uma das marcas do programa:
<html> </html>
com esta marca que se inicia qualquer programa em HTML. A marca fechada apenas no final do programa, depois de todas as outras marcas terem sido fechadas. Esta marca delimita o cabealho do programa, onde so inseridos alguns dados relativamente pgina a ser gerada, como por exemplo, o ttulo da mesma. Veja a marca seguinte: Como o prprio nome deixa antever, entre esta marca que se deve colocar o ttulo da nossa pgina HTML. O que escrevermos neste local, aparecer na barra de ttulo da janela do browser. Deve estar contida na marca <head> </head>. A ltima deste conjunto bsico de marcas, a que delimita o corpo do programa. Entre esta marca, devero estar todas as outras marcas e textos que comporo a pgina HTML. Como o leitor pode reparar, introduziram-se pargrafos entre as zonas distintas do programa e tabulou-se com dois espaos a linha referente marca <title>, j que esta faz parte do cabealho. A forma como a estruturao feita, depende bastante do programador. ele quem deve fomentar uma boa forma de se ler e compreender o programa. Atente nos exemplos de estruturao que lhe sero fornecidos ao longo do curso e crie essa mesma conscincia. Bem. Chegou a altura de escrevermos o programa e envi-lo para o browser, agora que se explicou o que cada uma destas marcas bsicas faz. Comece por abrir o seu processador de texto e introduza o programa tal-e-qual o v acima. Grave o programa em formato ASCII (lembre-se que se utilizar um processador de texto mais complexo, como o caso do MICROSOFT WORD, no dever gravar o programa em formato WORD, j que esse formato introduz cdigos especiais de formatao, incompatveis com a linguagem HTML. Resultar num ficheiro que no pode ser aberto num browser. Retire a exteno criada por defeito para o ficheiro, por exemplo: .txt ou .asc e coloque no seu local a exteno .html ou .htm. Lembre-se que o browser s se preocupar em interpretar o ficheiro se este possuir uma extenso .html ou .htm. Grave o ficheiro num directrio que seja facilmente acedvel e mande depois ler esse mesmo ficheiro a partir do browser
<head> </head>
<title> </title>
<body> </body>
Como se estruturou este programa?
Como se v este exemplo no browser?
(utilizando o boto OPEN e escrevendo a path do ficheiro). De futuro, quando criar novas verses deste ficheiro, bastar-lhe- fazer um RELOAD no seu browser para visualisar das alteraes efectuadas. O que v depois da pgina ter sido carregada? Em princpio no dever ver nada! Este programa produz uma pgina HTML vazia. O nico pormenor a salientar que a janela do browser possui o ttulo da nossa pgina.
4
Programa 2
Formatao de Texto
<html> <head> <title>A Minha Primeira Pgina</title> </head> <body> Eis que surge quase vinda do nada A minha primeira pgina HTML! Sei que no tem muita coisa Mas a seu tempo, evoluir! </body> </html>
Tipos de formatao possveis em HTML
Quase todos os tipos de formatao que o leitor porventura est habituado a utilizar nos processadores de texto mais elaborados, so possveis em HTML. A nica diferena que estas formataes so feitas introduzindo marcas especficas entre o texto do cdigo fonte. So formataes vlidas: pargrafos, tabulaes, mudanas de linha, atribuir cor ao texto, modificar a fonte e o tamanho das letras, escrever caracteres sublinhados, em itlico ou negrito e introduzir tabelas ou listas. Esta marca executa um pargrafo (paragraph) e introduz uma linha em branco. Qualquer texto introduzido depois desta marca, aparecer distanciado de uma linha em relao ao texto anterior. No necessita de ser fechado. Quando se introduz esta marca, resulta numa quebra de linha (break). parecida com a ltima marca, mas no adiciona uma linha em branco. Qualquer texto introduzido depois desta marca, aparecer na linha imediatamente a seguir ao texto anterior.

 
Tambm no necessita de ser fechada. Nota: O facto de se escrever o texto em linhas diferentes dentro do cdigo da pgina (nomeadamente premindo a tecla RETURN sempre que se quer mudar de linha), no faz com que o texto aparea na linha seguinte aquando da interpretao do documento. tambm de salientar que o HTML no reconhece mais do que um espao entre letras. Por outras palavras, quer sejam cinco espaos, n espaos ou um espao, introduzidos recorrendo SPACE BAR, o HTML faz a equivalncia entre esse n nmero de espaos a um s espao. Para se conseguir introduzir mais do que um espao entre letras, h que recorrer ao cdigo prprio de HTML que representa o espao, ou a uma marca especial. Para todos os efeitos, a nica forma de se formatar texto em HTML, recorrendo s marcas prprias de formatao.
 
Qualquer texto introduzido entre esta marca aparecer em itlico (italic). Qualquer texto introduzido entre esta marca aparecer no formato negrito (bold). Qualquer texto introduzido sublinhado (underlined). entre esta marca aparecer
5
Programa 3
Insero de Links
<html> <head> <title>A Minha Primeira Pgina</title> </head> <body link=0000FF vlink=CCCCCC> sempre interessante colocar links para outras pginas. Estamos assim a aproveitar verdadeiramente as potencialidades da Internet. Eis o link para uma <a href=http://www.fe.up.pt>Faculdade</a>. </body> </html>
O que so
Se atendermos palavra inglesa, link significar elo ou ligao e
10
HTML - Curso de Introduo links?
mesmo disso que se trata! Por meio de uma instruo, dizemos ao computador que se o utilizador carregar numa dada poro de texto ou imagem, estabelecer-se- uma ligao com outra pgina da Web. Na prtica, um novo documento ser aberto no browser. A marca mais utilizada quando se trata de links. Tudo o que se encontrar entre a abertura e o fecho da marca, ser considerado como um link para o documento cujo endereo figure no local onde se encontra o ponto de interrogao. Por exemplo: <a href=http://www.fe.up.pt>Faculdade</a> A palavra Faculdade seria o link para a pgina. Alternativamente a texto, podemos colocar uma tag de insero de imagem, como veremos mais adiante. Neste caso, a imagem seria o link. Um link dever aparecer com uma cor diferente do resto do texto, para ser mais facilmente identificado. Estipulamos a cor dos links por meio de trs propriedades que se colocam dentro da marca <body>. Como vimos no programa acima, existem certos atributos que so inseridos dentro da marca principal. Estes atributos designam-se propriedades.
<a href=?> </a>
link
Esta propriedade estabelece a cor dos links das pginas que ainda no foram visitadas. Eis a sua sintaxe: link=cdigo HTML da cor Nota: Para saber qual o cdigo HTML de uma determinada cor, por favor consulte o Apndice C deste livro.
vlink
Esta propriedade designa a cor dos links das pginas que j foram visitadas. Possui uma sintaxe equivalente propriedade anterior. Esta propriedade designa a cor dos links de uma pgina que se encontrem activos. Na prtica, quer ns carreguemos com o rato num link visitado ou no visitado, o link mudar para a cor estipulada nesta propriedade enquanto mantivermos o boto do rato pressionado sobre o texto. Possui uma sintaxe equivalente s duas propriedades anteriores. Se a nossa pgina for bastante extensa e estiver dividida, suponhamos, por captulos podemos colocar esta tag no incio de cada captulo para que o mesmo seja mais facilmente acedvel. No stio do ponto de interrogao, devemos colocar o nome que queremos dar ao captulo. Por exemplo: <a name=cap1>
alink
<a name=?>
11
Esta tag utilizada em conjunto com href da seguinte forma: a) A parte para a qual queremos saltar encontra-se no mesmo documento que o link. <a href=#cap1>Link para o captulo 1</a> Este link faria saltar a pgina para o stio que fosse precedido pela tag <a name=cap1>. b) A parte para a qual queremos saltar no se encontra no mesmo documento que o link. <a href=http://www.books.com/livro.html#cap1>Link para o captulo 1</a> Este link mudaria para a pgina contida no endereo e dentro dessa pgina, saltaria para o stio que fosse precedido pela tag <a name=cap1>.
Como podemos invocar o servio de correio electrnico do browser?
til darmos a possibilidade a algum que esteja a aceder nossa pgina de nos poder enviar email. Podemos chamar automaticamente o servio de correio electrnico do browser para enviar uma mensagem por email para um endereo prestabelecido. Fazemos uso de href do seguinte modo: <a href=mailto:ze.povo@santoinho.pt>Escreva-me!</a> Neste exemplo, a frase Escreva-me! o link para enviarmos email para algum cujo endereo ze.povo@santoinho.pt
6
Quais so os formatos de imagem suportados pelos browsers? Qual a diferena entre GIF se JPEG s?
Insero de Imagens
Embora no princpio existisse mais variedade de formatos de imagem suportados pelos browsers, chegou-se concluso que apenas dois tipos seriam suficientes. Falamos de GIF s e JPEG s. Tanto um como outro fazem compresso de dados. Isto resulta em taxas de transferncia menores. GIF s e JPEG s so utilizados consoante o tipo de imagem a disponibilizar na Web. A principal diferena entre GIF s e JPEG s reside na capacidade de resoluo de cores de um e outro. Os GIF s suportam apenas uma resoluo de 8 bits (equivale a uma pallette de 256 cores). Os JPEG s aguentam at uma resoluo muito maior: 24 bits (equivale a uma pallette de 16 777 216 cores, denominada true color). Os GIF s resultam melhor em desenhos com poucas cores, em que
12
estas aparecem em blocos, sem gradaes. Os JPEG s resultam melhor em fotografias, onde abundam as gradaes de cores e os empastelamentos. Se quisermos utilizar imagens em que uma das cores seja transparente, devemos recorrer ao formato GIF. Existem programas especiais para a criao de GIF s transparentes.
Programa 4
<html> <head> <title>A Minha Primeira Pgina</title> </head> <body background=fundo.jpg> Dados Pessoais <img src=foto.jpg height=50 width=40 hspace=10 vspace=15 border=2 alt=A minha foto.> Nome:Z Povo Data de Nascimento:25/04/1974 Morada:Santonho Nome:Z Povo </body> </html>
<img src=?>
Esta a marca que nos permite inserir uma imagem no nosso documento. No local onde se encontra o ponto de interrogao, devemos inserir o URL da imagem desejada. Segue-se uma lista de propriedades associadas com a marca <img src=?>. Propriedades:
align
Esta propriedade define a localizao do texto que vier a seguir imagem. Eis a sintaxe da propriedade align: align=left|right|top|texttop|middle|absmiddle|baseline| |bottom|absbottom| align=left A imagem alinhar pelo lado esquerdo da pgina e o texto ser localizado no lado direito da imagem. align=right A imagem alinhar pelo lado direito da pgina e o texto ser localizado no lado esquerdo da imagem. align=top A imagem alinha-se automaticamente pelo topo do item mais alto
13
que se encontrar na primeira linha. align=texttop A imagem alinha-se automaticamente pelo topo da letra mais alta que se encontrar no texto da primeira linha. equivalente na maior parte das vezes, mas nem sempre, propriedade align=top. align=middle Alinha a base da linha corrente com a metade vertical da imagem. align=absmiddle Alinha o meio vertical da linha corrente com a metade vertical da imagem. align=baseline Alinha o fundo da imagem, com a base da linha corrente. align=bottom Idem. align=absbottom Alinha o fundo da imagem, com o fundo da linha corrente.
alt
Por razes que se prendem com as taxas de transferncia, certas imagens podem demorar algum tempo a aparecer. Esta propriedade serve para darmos um nome imagem, nome que aparece enquanto esta no for carregada na totalidade. Existe ainda outra vantagem em inserir a propriedade alt: Para quem possuir terminais de texto, no podendo por este motivo ter acesso a grficos, o nome alternativo diz ao utilizador que imagem ele veria se tivesse possibilidade disso. Eis a sintaxe desta propriedade: alt=Nome Alternativo
width height
Aqui especificamos a dimenso da imagem inserida em pixels. Eis a sintaxe destas propriedades: width=valor em pixels height=valor em pixels Se fizermos uso destas duas propriedades, o browser salvaguardar este espao no documento, mesmo que o utilizador opte por no carregar as imagens dessa pgina. Poder ser uma vantagem utilizar estas propriedades se o seu documento tiver uma estrutura que deva ser preservada.
border
Esta propriedade coloca um caixilho volta da imagem, com um valor para a largura estipulada em pixels. Eis a sintaxe desta
14
propriedade: border=valor em pixels Para que nenhum caixilho seja colocado, basta que no se introduza esta propriedade ou, alternativamente, atribuir-lhe o valor 0 (zero). A cor do caixilho ser a mesma dos links. Se a imagem for um link para outra pgina, prevalece o cdigo de cores estipulado pelas propriedades link, vlink e alink.
vspace hspace
Respectivamente, salvaguardam um espao vertical e horizontal volta da imagem. n pixels acima da imagem, n pixels abaixo da imagem, n pixels esquerda da imagem e n pixels direita da imagem. Eis a sintaxe destas propriedades: vspace=valor em pixels hspace=valor em pixels
Como se introduz uma imagem para pano de fundo da pgina?
A HTML permite que se coloque uma imagem como pano de fundo para um documento. Se a imagem no ocupar toda a pgina (coisa que normalmente acontece) o browser procede ao seu ladrilhamento at que todo o espao seja preenchido. A referncia imagem de pano de fundo, colocada dentro da marca <body> recorrendo seguinte propriedade: Eis a sua sintaxe: background=URL da imagem.
background
7
Qual o uso mais frequente das tabelas?
Insero de Tabelas
As tabelas servem basicamente para dois tipos de uso distintos. O primeiro, prende-se com a estruturao de dados num texto, por exemplo: lista de materiais, folhas de clculo, etc. O segundo, prende-se com a estruturao da prpria pgina HTML. Utilizando uma tabela, podemos facilmente delimitar campos e formatar profissionalmente o layout do texto e das imagens. Vejamos um exemplo prtico. Queremos construir a tabela seguinte:
15
Relaes Homem Casal Mulher
Programa 5
<html> <head> <title>Uma tabela</title> </head> <body> <table width=200 border=2> <tr> <th colspan="2">Relaes</th> </tr> <tr> <td>Homem</td> <td rowspan="2">Casal</td> </tr> <tr> <td>Mulher</td> </tr> </table> </body> </html>
<table> </table>
esta a marca que introduz uma tabela no documento. Dentro dela, podemos introduzir vrias propriedades. Propriedades:
border
Coloca um caixilho volta da tabela e volta de cada clula. Eis a sintaxe desta propriedade: border=valor Um valor para a largura do caixilho pode ser estipulado. Se no introduzirmos esta propriedade, o caixilho no aparecer volta da tabela ou das clulas, mas o espao que ele ocuparia, ser preservado. Se no quisermos que isto acontea, basta atribuir o valor 0 (zero) ao valor da propriedade border.
cellspacing
Atribui um valor para o espao entre as clulas de uma tabela. Eis a sintaxe desta propriedade: cellspacing=valor
cellpadding
Atribui um valor para o espao que existe entre os limites da clula e o texto que ela contm. Possui uma sintaxe equivalente propriedade anterior.
16
width height
Com estas propriedades, atribuimos um valor para a altura e para a largura de uma tabela. Os valores podero ser dados em pixels ou em percentagem. No caso da percentagem, os valores so calculados a partir do espao disponvel na pgina. Eis a sintaxe destas duas propriedades: width=valor em pixels|percentagem% height=valor em pixels|percentagem%
align
Esta propriedade especifica o alinhamento da tabela dentro da pgina. Eis a sua sintaxe: align=left|right align=left A tabela aparece encostada ao lado esquerdo da pgina. align=right A tabela aparece encostada ao lado direito da pgina. Especificando estes valores, fazemos com que o texto flua pela direita ou pela esquerda da tabela, respectivamente.
valign
Aqui controla-se o alinhamento vertical do texto contido nas clulas da tabela. Eis a sintaxe para esta propriedade: valign=top|bottom valign=top O texto ser inserido a partir do topo de cada clula. valign=bottom A ltima linha de texto ficar junto do fundo de cada clula. Se a propriedade valign for omitida, o texto ser colocado no centro da clula.
bgcolor
Com esta propriedade, controla-se a cor de fundo da tabela. Eis a sua sintaxe: bgcolor=cdigo HTML da cor
background
Podemos ainda introduzir uma imagem como fundo para a tabela. Se a imagem for menor que a tabela, o browser far o ladrilhamento da imagem at que todo o espao seja preenchido. Eis a sintaxe desta propriedade:
17
background=URL da imagem
Como se introduzem linhas e colunas numa tabela?
Todos sabemos que qualquer tabela constituida por um determinado nmero de linhas e de colunas. Quando planeamos construir uma tabela em HTML, devemos fazer um esboo daquilo que queremos, para conseguirmos determinar quantas linhas e colunas necessitamos. No exemplo acima, v-se facilmente que a matriz da tabela tem trs linhas e duas colunas, mas vemos tambm que na primeira linha temos as duas colunas unidas e na segunda coluna, temos a linha dois e a linha trs unidas. Veremos mais frente como unir duas ou mais clulas contguas. Esta marca introduz uma nova linha na tabela (table row). Para cada uma das linhas da tabela, devemos proceder da seguinte forma: a) Abre-se a marca; b) Introduzem-se as diferentes clulas com as suas propriedades; c) Fecha-se a marca. Note que as propriedades seguintes afectam todas as clulas da linha em questo. Propriedades:
<tr> </tr>
align
Esta propriedade controla o alinhamento horizontal do texto contido nas clulas de uma mesma linha da tabela. Eis a sua sintaxe: align=left|center|right align=left O texto ser alinhado pela esquerda de cada clula. align=center O texto aparecer centrado em cada clula. align=right O texto ser alinhado pela direita de cada clula. Se a propriedade align for omitida, o texto ser alinhado esquerda de cada uma das clulas dessa linha.
valign
Esta propriedade controla o alinhamento vertical do texto contido nas clulas de uma mesma linha da tabela. Eis a sintaxe para esta propriedade: valign=top|bottom
18
valign=top O texto ser inserido a partir do topo de cada clula. valign=bottom A ltima linha de texto ficar junto do fundo de cada clula. Se a propriedade valign for omitida, o texto ser colocado no centro de cada uma das clulas dessa linha.
bgcolor
Com esta propriedade, controla-se a cor de fundo de toda a linha. Eis a sintaxe para esta propriedade: bgcolor=cdigo HTML da cor
<td> </td>
Esta marca introduz uma nova clula na tabela (table data). Deve ser sempre introduzida entre a marca <tr> </tr>. As linhas no necessitam de ter o mesmo nmero de clulas, porm, a tabela calculada recorrendo linha que contenha o maior nmero de clulas. s linhas em dfice sero acrescentadas clulas vazias. Uma clula pode conter todos os elementos que normalmente aparecem no corpo de um documento HTML. As propriedades que se seguem, apenas afectam o contedo da clula qual a marca <td> se refere. Propriedades:
align
Esta propriedade controla o alinhamento horizontal do texto contido na clula. Eis a sua sintaxe: align=left|center|right align=left O texto ser alinhado pela esquerda da clula. align=center O texto aparecer centrado na clula. align=right O texto ser alinhado pela direita da clula. Por defeito ou se a propriedade align for omitida, o texto ser colocado no centro da clula.
valign
Esta propriedade controla o alinhamento vertical do texto contido na clula. Eis a sua sintaxe: valign=top|middle|bottom|baseline
19
valign=top O texto colocado junto ao topo da clula. valign=middle O texto centrado verticalmente dentro da clula. valign=bottom A ltima linha de texto colocada junto ao fundo da clula. valign=baseline Especifica que todas as clulas de uma linha devem ser verticalmente alinhadas pela mesma linha de base.
width height
Se utilizadas, estas propriedades podem especificar o comprimento e altura exactos da clula em pixels ou como percentagem da tabela a ser apresentada. Apenas uma clula pode especificar a largura de uma coluna inteira, por isso, boa ideia que todas as clulas de uma dada coluna possuam a mesma largura. De igual forma, apenas uma clula pode especificar a altura de uma linha. Eis a sintaxe destas duas propriedades: width=valor em pixels|percentagem% height=valor em pixels| percentagem%
nowrap
Se esta propriedade aparecer associada a uma clula significa que o texto l inserido no sofrer quebras para se adaptar largura estipulada para a clula. H que ter cuidado para no serem geradas clulas demasiado compridas. Esta propriedade pode aparecer em qualquer clula da tabela e o valor nela estipulado indica o nmero de clulas da linha que sero aglutinadas numa s. Conta a clula em questo e as clulas que se encontrem sua direita. Eis a sintaxe desta propriedade: colspan=nmero de clulas numa mesma linha a aglutinar
colspan
rowspan
Esta propriedade pode aparecer em qualquer clula da tabela e o valor nela estipulado indica o nmero de clulas da coluna que sero aglutinadas numa s. Conta a clula em questo e as clulas que se encontrem abaixo dela. Eis a sintaxe desta propriedade: rowspan= nmero de clulas numa mesma coluna a aglutinar
bgcolor
Com esta propriedade, controla-se a cor de fundo da clula em questo. Eis a sintaxe para esta propriedade:
20
bgcolor=cdigo HTML da cor

background
Podemos ainda introduzir uma imagem como fundo para a clula. Se a imagem for menor que a clula, o browser far o ladrilhamento da imagem at que todo o espao seja preenchido. Eis a sintaxe desta propriedade: background=URL da imagem
<th> </th>
Com esta marca, criamos uma clula que conter o ttulo da tabela (table header). Na prtica, todas as propriedades da marca <td> podem ser utilizadas. A nica diferena visvel, que as clulas criadas por esta marca tm, por omisso de outro valor, o texto a bold e a propriedade align=center. Sim. Esta uma das vantagens da linguagem HTML. Podemos colocar tabelas dentro de tabelas, o nmero de vezes que desejarmos. H que ter cuidado com o princpio e o fim de cada uma delas, se utilizarmos muitas tabelas encadeadas.
Pode colocar-se tabelas dentro de tabelas?
8
O que so fontes?
Formatao de Fontes
Chamam-se fontes aos diferentes tipos de conjuntos de caracteres com o qual os textos so escritos. Por omisso, a fonte utilizada nos browsers, o Times New Roman . J vimos como colocar uma fonte em Itlico, Bold ou Underlined num dos primeiros captulos. Veremos agora como mudar-lhe a cor, aumentar ou diminuir o seu tamanho ou ainda mudar a fonte com que o texto escrito. <html> <head> <title>Brincando com fontes</title> </head> <body> Eis um pedao de texto completamente normal. Esta fonte maior que a anterior. Esta fonte menor. Eis uma fonte grande a vermelho! 
Programa 6
21
 Texto escrito em Courier New e Bold Novamente... texto normal! </body> </html>
 
esta marca que delimita o princpio e o fim de um pedao de texto com formatao especial. Possui trs propriedades explicadas de seguida. Propriedades:
size
Os valores para esta propriedade, podem variar entre 1 e 7. Opcionalmente, coloca-se um sinal + ou - antes do valor para indicar n pontos acima ou n pontos abaixo, respectivamente, do tamanho standard da fonte. Esse tamanho standard 3. Eis a sintaxe para esta propriedade: size=valor size=+valor relativo size=-valor relativo
color
Com esta propriedade alteramos a cor do texto inserido. Eis a sua sintaxe: color=cdigo HTML da cor
face
Aqui, alteramos a fonte utilizada para o texto. Note que o tipo de fonte escolhido j deve estar instalado no computador. Outras fontes podem ser escolhidas para substituirem a fonte que estiver em falta. Se nenhuma das fontes estiver disponvel, o browser mostrar o texto na sua fonte corrente. Eis a sintaxe desta propriedade: face=nome da fonte face=nome da fonte 1, nome da fonte 2,
<basefont>
Esta marca bastante til, pois permite-nos modificar os atributos da fonte standard para um documento inteiro. Propriedades:
size
Os valores para esta propriedade, podem variar entre 1 e 7 e estabelecem o tamanho base para a fonte . Eis a sua sintaxe:
22
size=valor
color
Com esta propriedade alteramos a cor actual de todo o texto inserido. Eis a sua sintaxe: color=cdigo HTML da cor
face
Com esta propriedade, alteramos a fonte corrente utilizada para o texto. Note que o tipo de fonte escolhido, j deve estar instalado no computador. Outras fontes podem ser escolhidas para substituirem a fonte que estiver em falta. Se nenhuma das fontes estiver disponvel, o browser mostrar o texto na sua fonte standard. Eis a sintaxe desta propriedade: face=nome da fonte face=nome da fonte 1, nome da fonte 2,
9
Algumas facilidades
Ttulos e Formatos Tipo

Existem algumas marcas que nos permitem introduzir facilmente (e formatar) um pedao de texto referente a um endereo, citao, listas, etc. Atente no programa seguinte: <html> <head> <title>Ttulos e formatos tipo</title> </head> <body> <h3 align=center>Ttulo da Pgina</h3> <hr size="5" width="50%" noshade> <div align=right> <address> Sr. Z Povo Rua das Accias Santonho Codex. </address> </div> Eis o que William Shakespear escreveu: <blockquote> "To be or not to be... That's the question" </blockquote> <center> Eis um texto absolutamente centrado. </center>
Programa 7
23
 No posso esquecer de comprar: <dir> <li>Ovos; <li>Farinha; <li>Leite. </dir> Eis algumas definies: <dl> <dt>Chapu<dd>Aquilo que se coloca na cabea. <dt>Sapatos<dd>Aquilo que se coloca nos ps. </dl> Por muito que diminua a janela, esta linha nunca aparecer quebrada! Frmula qumica da gua: H2O Equao do 2 Grau: 3x2+20x-3=0 </body> </html>
<div> </div>
Com esta marca estabelecemos uma poro de texto que sofrer um dado alinhamento. Para surtir efeito, exige ser acompanhada da propriedade que estipula o tipo de alinhamento. Propriedade:
align
Esta propriedade tem a seguinte sintaxe: align=left|center|right align=left O texto alinhar pela parte esquerda da pgina. align=center O texto ser colocado no centro da pgina. align=right O texto alinhar pela parte direita da pgina.
<h> </h>
Esta marca transforma uma poro de texto num ttulo. Os ttulos so escritos com o tipo de letra corrente mas a Bold. Existem seis tamanhos para os ttulos: <h1> </h1> Esta marca gera o maior tipo de ttulo disponvel. <h6> </h6>
24
Esta marca gera o menor tipo de ttulo disponvel. Propriedade:

align
Esta propriedade tem a seguinte sintaxe: align=left|center|right align=left O ttulo alinhar pela parte esquerda da pgina. align=center O ttulo ser colocado no centro da pgina. align=right O ttulo alinhar pela parte direita da pgina.
<hr>
Com esta marca geramos uma barra horizontal (horizontal ruler). Serve como uma divisria. Pode ser utilizada sem propriedades. Se assim for, resulta numa barra com quase a largura total da pgina. Propriedades:
size
Especificamos a largura da barra. Eis a sintaxe para esta propriedade: size=valor
width
Especificamos o comprimento da barra. O valor deste comprimento pode vir em pixels ou em percentagem de pgina ocupada. Eis a sintaxe desta propriedade: width=valor ou percentagem%
align
Como com a propriedade anterior, a barra pode no ocupar a largura inteira da pgina. Com esta propriedade especificamos a sua colocao. Eis a sua sintaxe: align=left|center|right align=left A barra alinhar pela margem esquerda da pgina. align=center A barra ser colocada no centro da pgina. align=right A barra alinhar pela margem direita da pgina.
25
HTML - Curso de Introduo noshade
Quando necessitarmos de uma barra slida, sem aspecto tridimensional, basta juntar esta propriedade. Esta marca especifica um pedao de texto como sendo um endereo, uma assinatura ou indicao de direitos de autor, muitas vezes no topo ou no fundo de um documento. O texto ser escrito em Itlico e poder vir tabulado. Implica a introduo de um pargrafo () antes e depois do endereo. Esta marca utilizada para indicar que um pedao de texto foi citado de uma outra fonte. Automaticamente criado um espao tanto esquerda como direita do texto. Dependendo dos browsers, a fonte poder ser escrita em Itlico. Introduz tambm um pargrafo e uma linha em branco acima e abaixo do texto. Todos os textos e figuras introduzidos entre estas duas marcas aparecero centrados relativamente s margens esquerda e direita do documento. Directory List. Esta marca deve ser usada para apresentar uma lista de itens, que so colocados numa coluna de aproximadamente vinte e quatro caracteres de comprimento. Esta marca designa cada elemento da lista e deve ser usada juntamente com a marca anterior. Definition List. uma lista de termos e definies correspondentes. Estas listas costumam ser formatadas da seguinte forma: a) O termo alinhado pela margem esquerda do documento. b) A definio separada do termo por um pargrafo e tabulada em relao ao mesmo.
<address> </address>
<blockquote> </blockquote>
<center> </center>
<dir> </dir>
<li>
<dl>
<dt>
Esta marca indica um termo. Tanto esta marca como a seguinte, devem ser utilizadas juntamente com a marca <dl>. Esta marca indica uma definio. Deve ser precedida da marca anterior. No Break. Utilizamos esta marca para indicar que uma linha de texto e/ou imagens no deve sofrer uma quebra quando se tentar dimensionar a janela do browser. H que ter cuidado para no ser gerada uma linha excessivamente comprida que obrigue o navegador a utilizar a Scroll Bar vrias vezes ao longo do documento. Superscript. Se utilizar regularmente processadores de texto,
<dd>
 

26
HTML - Curso de Introduo 
possvel que j conhea este termo e o seguinte. O texto que for introduzido entre esta marca aparecer elevado em relao ao texto normal e escrito numa fonte mais pequena. ideal para representar potncias em equaes, formas reduzidas de nomes e adjectivos, etc. Subscript. O texto que for introduzido entre esta marca aparecer rebaixado em relao ao texto normal e escrito numa fonte mais pequena. ideal, por exemplo, para representar quantidades de elementos em frmulas qumicas. Todo o texto inserido entre estas duas marcas ser encarado como um comentrio para o programador. Por outras palavras, o texto s aparece no cdigo fonte e no na pgina.
 
<!--->
10
O que so Frames?
Introduo de Frames
Basicamente, podemos dizer que se trata de uma pgina construida a partir de n outras pginas HTML. Existe um documento central que define os campos e estabelece as ligaes de cada um deles para as respectivas pginas. Se observarmos a figura junta, vemos que o documento que serve de exemplo, possui trs campos aos quais foram atribuidos os nomes de Frame 1, Frame 2 e Frame 3. O Programa 8 gera o cdigo HTML das trs frames no documento principal.
Frame 1
Frame 2
Frame 3
Programa 8
<html> <head> <title>Frames</title> </head> <frameset cols="100%" rows="50%,*"> <frame name="Frame 1" src="frame1.html"
27
scrolling="no" marginheight=0 marginwidth=0 noresize> <frameset cols="100,*"> <frame name="Frame 2" src="frame2.html" scrolling="no" marginheight=0 marginwidth=0 noresize> <frame name="Frame 3" src="frame3.html" scrolling="auto" marginheight=0 marginwidth=0 noresize> </frameset> </frameset> </html>
<frameset> </frameset>
Este o contentor principal para uma frame. Nesta marca colocam-se os atributos relativos ao nmero de colunas ou de linhas (em princpio, um documento com frames possui uma diviso de campos por linhas e/ou colunas) assim como espessuras e cores dos caixilhos. Propriedades:
rows
Nesta propriedade, deve ser especificada uma lista contendo as dimenses de cada uma das linhas (rows) separadas por vrgulas. Estes valores podem vir expressos em pixels, percentagem, ou valores de escala relativos. Por razes bvias, o somatrio de todos os valores nunca deve exceder 100%. Se os valores fornecidos so apenas nmeros, o browser interpretar a informao como quantidade de pixels. No aconselhvel dar uma lista completa de valores em pixels, j que as resolues dependem de computador para computador. Valores em percentagem podem ser fornecidos para esta propriedade. Se a percentagem total exceder os 100%, o browser proceder a uma escala automtica dos valores para que o resultado final seja os desejados 100%. Opcionalmente, podemos utilizar o carcter * (asterisco). Isto diz ao browser que a frame em questo tem uma dimenso relativa que ir variar de acordo com o tamanho da janela. Podemos intercalar valores numricos com o uso do *. Os valores na lista devem definir os tamanhos das frames comeando na frame superior e acabando na frame inferior. Eis a sintaxe deste comando: rows=lista de valores para a altura das linhas
cols
Nesta propriedade deve ser especificada uma lista contendo as dimenses de cada uma das colunas (columns) separadas por vrgulas. Tudo o que foi dito em relao aos valores para as linhas, mantm-se para as colunas. Os valores na lista devem definir o comprimento das frames, comeando na frame da esquerda e acabando na frame da direita.
28
border
O browser permite a definio da espessura para o caixilho da frame. O valor entendido como quantidade de pixels. Eis a sintaxe desta propriedade: border=valor em pixels
bordercolor
Com esta propriedade, especificamos a cor do caixilho. Eis a sua sintaxe: bordercolor=cdigo HTML da cor
frameborder
Especificamos se queremos ou no colocar caixilhos volta da frame. Eis a sintaxe para esta propriedade: frameborder=yes|no
<frame>
Esta marca define os atributos de uma nica frame, pertencente a um conjunto de frameset. Como esta marca no um contentor, no necessita de ser fechada. Propriedades:
src
Esta propriedade utilizada para especificar o URL do documento a ser visto na frame em questo. Eis a sua sintaxe: src=URL do documento
name
Aqui especificamos o nome para a frame. Esta referncia utilizada nos links. Em pginas com frames, no apenas necessrio indicar o URL de um link! Torna-se uma necessidade dizermos para que frame queremos que o documento v. Exemplo: Suponhamos que existe um link no documento da frame 2 que permite que se visione a pgina de uma Faculdade na frame 3. O link teria obrigatoriamente o seguinte aspecto: <a href=http://www.fe.up.pt target=Frame 3> A nova propriedade da marca <a> target=nome da frame.
marginwidth
Cria um espao expresso em pixels tanto esquerda como direita do contedo da frame. Este valor nunca deve ser menor do que 1. Se isso acontecer, o contedo vir colado margem esquerda da frame. Eis a sintaxe desta propriedade: marginwidth=valor em pixels
29
marginheight
Cria um espao expresso em pixels tanto acima como abaixo do contedo da frame. Este valor nunca deve ser menor do que 1. Se isso acontecer, o contedo vir colado margem superior da frame. Eis a sintaxe desta propriedade: marginheight=valor em pixels
scrolling
Esta propriedade pode ser usada para controlar o aparecimento das scroll bars em virtude do contedo da frame ser maior do que o espao que esta ocupa na janela do browser. Escolher no pode ser perigoso, j que no h possibilidade de saber se a resoluo utilizada por outro computador tal que impossibilite o acesso a alguma parte da informao. Eis a sintaxe para esta propriedade: scrolling=yes|no|auto scrolling=yes As scroll bars aparecem sempre, mesmo que no sejam neces-srias para a viso completa do documento. scrolling=no As scroll bars nunca aparecem, mesmo sendo necessrias para a viso completa do documento. scrolling=auto As scroll bars s aparecem se forem necessrias. Esta deciso cabe ao browser de acordo com a resoluo do computador ou o tamanho da janela.
noresize
Por omisso, todas as frames podem ser redimensionadas. Colocando esta propriedade, impedimos que isso acontea. No necessita de quaisquer valores. Especificamos se queremos ou no colocar caixilhos volta da frame. Eis a sintaxe para esta propriedade: frameborder=yes|no
frameborder
bordercolor
Com esta propriedade especificamos a cor do caixilho. Eis a sua sintaxe: bordercolor=cdigo HTML da cor
Quando devemos utilizar frames?
As frames podero ser extremamente teis se tivermos em mos um projecto que exija que certos elementos estejam sempre disposio do navegador. Por exemplo, podemos manter um ndice temtico numa das frames com links que do acesso aos
30
diferentes documentos que constituem o projecto. Uma imagem bastante elaborada que sirva como logotipo poder estar sempre presente numa frame que ocupe a parte de cima da janela do browser, evitando que se faa a transferncia repetida da imagem para cada pgina. Em qualquer caso, o uso de frames deve ser bem pensado. Convm no esquecer que as verses mais antigas dos browsers no suportam frames. Outros exemplos de frames:
1 2 3 5 4
<html> <head> <title>Frames</title> </head> <frameset cols="100%" rows="33%,33%,*"> <frame name="Frame 1" src="frame1.html"> <frameset cols="33%,33%,*"> <frame name="Frame 2" src="frame2.html"> <frame name="Frame 3" src="frame3.html"> <frame name="Frame 4" src="frame4.html"> </frameset> <frame name="Frame 5" src="frame5.html"> </frameset> </html>
2 1 3 4
<html> <head> <title>Frames</title> </head> <frameset rows="100%" cols="50%,*"> <frame name="Frame 1" src="frame1.html"> <frameset rows="50%,*"> <frame name="Frame 2" src="frame2.html"> <frameset cols="50%,*"> <frame name="Frame 3" src="frame3.html"> <frame name="Frame 4" src="frame4.html"> </frameset> </frameset> </frameset> </html>
31
11
Por qu uma esttica e conduta na Web?
Esttica e Conduta Web

A Internet do domnio pblico h relativamente pouco tempo. Assistiu-se a uma procura desenfreada desta nova tecnologia e quase qualquer motivo servia para se construir uma pgina HTML. Nem sempre as pessoas que faziam as pginas eram dotadas de bom gosto ou do mnimo sentido de estrutura. Por outro lado, os recursos disponibilizados e a prpria linguagem de programao encontravam-se ainda num estado de aperfeioamento. Nos dias que correm, podemos ainda ver algumas extravagncias na rede, criando uma nova definio: poluio virtual. Hoje em dia assistimos a uma crescente preocupao pelo design na Web e j existem milhares de firmas que apenas se dedicam ao Web Design. O Web Design no pode ser abordado de nimo leve: tem sempre de se estabelecer um compromisso entre o design para as massas e a conservao da identidade de uma ideia base, instituio ou personalidade individual. Encare as normas que se seguem no como um entrave sua imaginao, mas um encaminhar de ideias por forma a obter um melhor produto final. Quando temos em mos um projecto de pginas para a WEB, devemos comear por analisar qual o seu objectivo. Existe um conjunto de perguntas que torna mais fcil o seu delineamento: O que se pretende explanar nas pginas? A quem se destinam? Existe alguma "imagem de marca" pr-definida? Analisemos agora separadamente cada um destes tpicos: O que se pretende explanar nas pginas? O contedo das pginas de longe o mais importante de todos os tpicos. a razo de ser da prpria pgina. Ele influenciar a forma como toda a informao apresentada, o design da pgina e a relao de importncias e prioridades. frequente encontrarmos pginas que perdem o seu contedo face apresentao do mesmo. De facto, h quem se recorde de um bonequinho muito engraado que aparecia numa pgina, mas nem sabia muito bem qual o assunto tratado. Existe neste momento um conjunto incrivelmente vasto de ferramentas ao dispr do projectista de pginas HTML. Se estas forem racionalmente utilizadas, podem dar nfase ao assunto tratado e at destacar determinados pontos. Quando a sua utilizao assenta apenas em objectivos decorativos, perderemos
Objectivo
32
l no meio, a inteno original da pgina. A quem se destinam? Outro ponto bastante importante a ter em conta. Faa um estudo do cibernauta tpico que navegar pelas suas pginas. Em funo deste, vir o tipo de linguagem a ser utilizado e o maior ou menor impacto visual da pgina: design clssico, neutro ou radical. Tenha em conta tambm o nmero previsto de pessoas que poder aceder s suas pginas. Como bvio, medida que temos de agradar a um maior nmero de pessoas, mais neutro dever ser o design e mesmo essa neutralidade dever ser cuidadosamente estudada. Existe alguma "imagem de marca" pr-definida? Este ltimo tpico diz mais respeito ao design. Se as pginas representam uma instituio ou uma companhia, provvel que j exista um estudo no campo do design e, sendo assim, porque as pginas so acima de tudo a imagem daquilo que l est representado, no podero sair muito dessa linha orientadora. Sempre que instituies esto envolvidas, devemos planear um design sbrio. Dependendo da ideia que pretendamos transmitir, poderemos enveredar por um percurso moderno ou clssico. Em todos os casos, de evitar arranjos "psicadlicos" ou decorao pesada.
Estrutura
Navegabilidade a palavra de ordem. As pessoas esto habituadas s revistas, aos livros, aos jornais, logo, to importante como a informao disponibizada, ser a forma de disponibilizar essa mesma informao. A extenso directamente proporcional estruturao da informao. Introduza ndices, ttulos, formate alguns caracteres a negrito ou itlico para dar relevo a certos aspectos da informao. Sempre que possvel, remeta o cibernauta para outros links, que aprofundem mais um determinado tpico focado. Este um dos principais trunfos da Internet: funcionar como uma enorme enciclopdia temtica para troca de informaes. Utilize este recurso sabiamente. Evite pginas demasiado extensas, com imagens pesadas ou fundos elaborados: demoram demasiado tempo a "carregar". Um cibernauta desesperado, poder desistir de ver a sua pgina se o tempo de download for muito demorado. Pginas extensas, geralmente significam informao no estruturada. Divida-a por captulos ou assuntos e por cada captulo ou assunto, construa uma pgina independente. No introduza texto "em bruto" nas suas pginas. Seria menosprezar os recursos informticos da nossa era. Sempre que possvel, mas nunca em demasia, utilize fotografias, desenhos, diagramas ou grficos que complementem a informao prestada. Alm de serem um "regalo" para os olhos, ajudaro por certo a um melhor entendimento do texto. Cada vez mais, os media pensam cuidadosamente todo o design
33
inserido. Se bem utilizado, este poder ser um factor chave para a leitura ou no leitura de um artigo. Pense voc tambm no design ideal para a sua pgina. Torne a informao fcil de ler!
Cores
Embora o espectro cromtico que a viso humana consegue captar seja relativamente pequeno, a cor uma das propriedades mais importantes do mundo que nos rodeia. O homem tem ainda o costume de associar cores a estados de esprito, atitudes, sensaes e at orientaes de pensamento. Daqui se v a importncia fulcral da cor. O projectista de pginas WEB, deve saber jogar bem com a cor. Uma pgina que contenha informao extensa, nunca dever ter cores muito garridas. O ideal, neste caso, ser escolher cores prximas da simplicidade do contraste Preto/Branco. Para leituras prolongadas, estas "cores" so as ideais. Surge-nos tambm o caso de pginas que se encontram associadas a uma instituio ou a uma "imagem de marca" pr-definida. A nossa escolha ficar limitada s cores que figuram na ideia base, e quaisquer outras que se introduzam devero ser neutras. A Internet est repleta de maus exemplos de escolha de leques de cores. No lhes siga as pisadas! Atente no seguinte crculo cromtico:
Nele figuram as trs cores primrias subtractivas: O carmim, o amarelo e o azul ciano. Entre cada par destas cores, encontra-se uma outra cor secundria: roxo, laranja e verde. Cores opostas no crculo, so chamadas complementares, e qualquer arranjo em que estas cores apaream ao lado uma da outra, ser de evitar, j que quando isto acontece, elas parecem "vibrar":
Existe ainda o conceito de equilbrio cromtico. Assim, agradvel vista uma pgina em que figurem gradaes de um conjunto de cores, mistura de cores primrias ou secundrias. Outra diviso entre cores est associada noo de "temperatura". Falamos de cores quentes e cores frias. As cores quentes vo desde o amarelo, passando pelos laranjas, rosas e vermelhos. As cores frias englobam os verdes, os azuis e os roxos. Temos tambm as cores neutras, como o branco (mistura aditiva de todas
34
as cores), o preto (ausncia de cor) e os tons de cinzento. A ideia presente no projecto da pgina guiar a escolha sensata do seu leque de cores.
Taxas de transferncia
A Internet vive custa da transferncia de dados entre os servidores e os clientes. Embora muitas faculdades e outras instituies possuam meios bastante modernos para lidar com o trfego da Web, a maioria dos utilizadores continua a servir-se das redes telefnicas e de modems modestos. agradvel aceder a uma pgina rpida, em que as imagens e os textos nos aparecem num abrir e fechar de olhos, sem qualquer desprezo pela beleza ou grau de elaborao do documento. Isto conseguido por uma sensata escolha e tratamento de tudo o que se coloca nas pginas. Alguns exemplos j atrs foram citados, mas vale sempre a pena recordar: a) Nunca construir pginas demasiado extensas. Optar por um maior nmero de documentos de pequenas dimenses e mais organizados. b) Utilizar grafismo quanto baste. Dentro desse grafismo, fazer escolhas acertadas na utilizao de GIF s e JPEG s e optimizar as taxas de compresso. c) Estruturao correcta do cdigo HTML e evitar a colocao de marcas desnecessrias. d) Java, GIF s animados, Shock Wave e outros mimos esto agora disposio do programador. H que saber dosear estes recursos, com o perigo das pginas se tornarem excessivamente pesadas. Acima de tudo, deveremos pensar nas outras pessoas e nos recursos que estas tero sua disposio. A Internet veio modificar a vida de milhes de indivduos. Cada um de ns tem a possibilidade de fazer chegar as suas ideias, os seus conhecimentos, as suas experincias a um nmero de pessoas outrora impensvel. Aproveite esta ferramenta de uma forma sensata e lembre-se que liberdade nem sempre fazermos tudo aquilo que queremos.
35
A
Endereo (Address) America Online (AOL)
Glossrio
O cdigo que o identifica para que outros lhe possam enviar correio electrnico (email) Um prestador de servios pblico. Como o nome sugere, baseado nos Estados Unidos, embora procure agressivamente subscritores em outras partes do mundo, principalmente na Europa. Um sistema que o ajuda a encontrar ficheiros localizados na internet, antes de os gravar no seu computador utilizando o FTP. O sistema Archie refere-se a duas coisas: ao programa e a um sistema de servidores contendo ficheiros indexados. A antecessora da Internet. Criada em 1969 pelo Departamento da Defesa dos Estados Unidos. Asyncronous Transfer Mode. Uma tecnologia relativamente recente para trabalhos em rede que permite que diferentes tipos de ficheiros (video, audio, dados, etc.) sejam transmitidos simultaneamente pelo mesmo canal de comunicao. Bulletin Board System. Um sistema que lhe permite ler mensagens de outras pessoas e acrescentar novas s j existentes. Mais do que simples texto. Por exemplo, uma imagem, um documento elaborado num processador de texto, ou um ficheiro que inclua cdigos de formatao para alm de caracteres. A medida mais pequena para dados de computador. Oito bits resultam num byte. Um byte equivale a um carcter. Milhares de pequenos pontos (dots) que resultam numa imagem. O seu ecr (e um documento elaborado pela sua impressora) concebido a partir de pequenos pontos, cada um dos quais ou preto (ou qualquer outra cor) ou branco (nada). Distancie-se o suficiente e perceber a figura. Os tipos de bitmaps mais populares so: BMP, GIF, TIF e PCX. Bits per Second. Mede a velocidade dos dados transmitidos. Geralmente usado para descrever a velocidade dos modems. Uma aplicao para computador que lhe permite ver texto e imagem (e em alguns casos animao ou video) nas pginas da World Wide Web. Os exemplos mais populares so: Netscape Navigator, Mosaic ou Microsoft Internet Explorer.
Archie
ARPAnet
ATM
BBS
Ficheiro Binrio (binary file)
Bit
Bitmap
bps
Browser
36
byte
Sries de bits, usualmente com um comprimento de oito bits. Os bytes so utilizados para descrever a capacidade de armazenamento de um computador. Commercial Internet Exchange. Uma associao de fornecedores de servios Internet que acordaram em estabelecer transaces comerciais. Um computador que utiliza os servios de outro computador (um servidor - server - ou anfitrio - host). Se voc tem um PC na sua secretria e obtm informaes a partir da World Wide Web, o seu PC um cliente do servidor Web ao qual ele est ligado. Quando este termo aparece no final de um endereo (ze.povo@acme.com) significa que a organizao para a qual o Senhor Z Povo trabalha, uma companhia em vez de um estabelecimento de ensino ou uma agncia do governo.Tambm significa que o servidor se situar provavelmente nos Estados Unidos. Um fornecedor de informao on-line que tambm oferece acesso Internet. Organiza diversos foruns, que so parecidos com os grupos de discusso (newsgroups). A ltima parte de um endereo de correio electrnico (ou nome de domnio) indicando onde se encontra o servidor. Um endereo que termine em uk, por exemplo, significa Reino Unido (United Kingdom). Um fornecedor de informao on-line que fornece vrios servios na Internet. A parte do endereo que vem depois do sinal @ (at). Domain Name Server. Um computador na Internet que transforma os nomes dos domnios da Internet em endereos numricos IP que os computadores usam. Transferir software de um computador remoto para o seu prprio computador. Um mtodo de enderear na Internet que faz com que se um dos caminhos estiver bloqueado ou quebrado, a mensagem consiga passar por um caminho alternativo.
CIX
Cliente (client)
Com
CompuServe
Cdigo do Pas (Country Code)
Delphi
Domnio (Domain) DNS
Transferir (Download) Encaminhamento Dinmico (dynamic rerouting) Correio Electrnico (Email)
Mensagens enviadas pela Internet para um indivduo em particular (por vezes pode ser mais do que um indivduo).
37
edu
Quando aparece no final de um endereo (ze.povo@uni.edu), geralmente significa que o Senhor Z Povo trabalha para um estabelecimento de ensino. Tambm significa que o servidor se encontrar provavelmente dos Estados Unidos. Frequently Asked Question. A forma mais fcil de aborrecer membros de um grupo de discusso (newsgroup) fazendo questes que j se encontram respondidas na sua seco de FAQ s. File Transfer Protocol. Um mtodo de Protocolo IP para transferncia de ficheiros de um computador para outro. Permite a ambas as mquinas confirmarem uma recepo bem sucedida. Os protocolos de transferncia de ficheiros mais comuns so: xmodem, ymodem, zmodem e Kermit. A Internet tem o seu prprio protocolo de transferncia de ficheiros, chamado FTP. Uma firewall instala-se na gateway duma network privada e apenas deixa que certo tipo de informao passe para a Internet. Um computador que liga uma network a outra, quando as duas networks utilizam protocolos diferentes. Utilizado frequentemente para traduo de endereos de correio dos standards da Internet, para que eles encontrem uma pessoa relevante numa network privada (e vice-versa). s vezesdesignado como router. Um sistema que o deixa encontrar informao num servidor da Internet, utilizando menus. Quando aparece no final de um endereo (ze.povo@dpt.gov), geralmente significa que o Senhor Z Povo trabalha para o Governo Federal dos Estados Unidos Um computador na Internet ao qual voc se pode ligar utilizando o servio telnet, obter ficheiros usando o FTP , ou usando-o de qualquer outro modo. O mesmo que: Servidor Web. HyperText Markup Language. Uma linguagem de computador utilizada para escrever pginas para a World Wide Web. Permite-lhe introduzir informao acerca das fontes, aparncia, grficos e ligaes por hypertext ou hypergraphic. Os nomes dos ficheiros para a Web, geralmente tm a exteno .html. HyperText Transfer Protocol. O protocolo que governa a forma como as pginas Web so transmitidas pela Internet. A localizao do cdigo para as pginas Web geralmente comea com http:. Um sistema de escrita e de visualizao de texto para as pginas Web, que permite que o texto estabelea ligao a outros documentos. Hypermedia pode tambm conter imagens, sons e
FAQ
FTP
Firewall
Gateway
Gopher
gov
Anfitrio (Host)
HTML
HTTP
Hypertext
38
video.
IP
Internet Protocol. Uma tecnologia que permite que a informao se desloque de uma network para outra, quando for necessrio. Um algoritmo para grficos que permite que grandes ficheiros de imagem possam ser comprimidos. Desenvolvido pelo Joint Photographic Experts Group, corta dramaticamente o tempo de transferncia de uma imagem. Um computador na Internet que fornece servios de correio electrnico Quando estas letras aparecem no fim de um endereo de correio electrnico, significa que o computador em causa operado provavelmente por alguma parte do Exrcito dos Estados Unidos. Multipurpose Internet Mail Extension. Um standard que permite que ficheiros - texto, grficos, imagens, video e som - sejam enviados juntamente com o correio electrnico. Um servidor que possui cpias dos mesmos ficheiros de um outro servidor na Internet. Espalha pelos diversos cantos do mundo cpiasdos sites mais populares, para que o seu acesso seja mais rpido. Um aparelho que deixa o seu computador falar com outros computadores, utilizando uma linha telefnica analgica. Sistema de distribuio de boletins sobre um tpico em particular. Usenet news um sistema que distribui milhares de newsgroups a todas as partes da Internet. Um programa que lhe permite ler mensagens nos Usenet Groups e responder-lhes. National Science Foundation s NETwork. Uma parte da Internet dedicada pesquisa e educao, fundada pelo governo dos Estados Unidos. Desenvolvida a partir da ARPAnet, a antecessora da Internet. Pedao de informao enviado atravs de uma network. Contm sempre o endereo do destinatrio e do remetente, para alm de outras informaes. A sua conta na Internet ser protegida com uma palavra-chave: um cdigo curto que apenas deve ser conhecido pelo prprio. Um programa de software que testa se voc pode ou no estabelecer ligao com outro computador da network. Se no
JPEG & JPG
Servidor de Corrreio (Mail Server) mil
MIME
Mirror Site
Modem
Newsgroup
Newsreader
NSFNET
Packet
Password
Ping
39
receber o ping de volta, provavelmente no conseguir estabelecer a ligao (supondo que esta existe).
POP
1. Post Office Protocol. Usado pelos servidores de correio electrnico na Internet. Permite aos utilizadores de MAC se PC s receberem mail e transferirem-no. 2. Point Of Presence. O nmero que voc utiliza para se ligar a um prestador de servios da Internet. Point-to-Point Protocol. Liga dois computadores utilizando uma rede telefnica. frequentemente utilizado pelos subscritores da home Internet com uma ligao atravs de modem. Um sistema ou linguagem que dois computadores conseguem entender. Quando se utiliza o File Transfer Protocol (FTP). Por exemplo, o emissor e o receptor trocam sinais que significam podes comear, j chegou, etc. Os protocolos fazem com que a Internet funcione. Diz-se de um computador que fornece um servio a outro computador numa determinada network. Ver tambm client. Programas que so frequentemente disponibilizados para testes. Deve-se compreender que em geral, as pessoas devem pagar um preo pelo software se decidirem ficar com ele. Simple Mail Transfer Protocol. Mtodo pelo qual o correio electrnico se desloca de um computador para outro na Internet. O sistema que as networks utilizam para comunicarem umas com as outras na Internet. Significa Trasmission Control Protocol/Internet Protocol. Um programa que lhe permite ligar-se a outros computadores na Internet e aceder a informao. A maior parte das firewalls impediro uma entrada por telnet. Um artigo colocado num Usenet newsgroup juntamente com as contribuies que dele fazem parte. Enviar os seus dados ou ficheiros para outro computador. Uniform Resource Locator. Uma forma de nomear os recursos da network, originalmente para ligar pginas entre si na World Wide Web. Se algum quiser o URL do seu Web site, quer saber o seu endereo. Um sistema de distribuio de boletins de informao, chamados newsgroups, grupos de discusso sobre todos os assuntos imaginveis. Voc l as mensagens num programa chamado newsreader.
PPP
Protocol
Server
Shareware
SMTP
TCP/IP
Telnet
Thread
Upload URL
Usenet
40
WWW
World Wide Web. Um sistema hypermedia que lhe permite navegar por grandes quantidades de informao (geralmente utilizando um browser). Agora o mtodo preferido de apresentar e aceder a informao na Internet.
Nota Este glossrio foi traduzido e adaptado da obra Know your net. Copyright Digital Equipment Corporation, 1996. Written, designed and produced by The Red Group, Bandbury, United Kingdom.
41
B
Caracter

Por qu utilizar cdigos, quando a acentuao parece resultar?
Cdigos de Caracteres
Cdigo
Á Â Æ À Å Ã Ä Ç Ð É Ê È Ë Í Î Ì Ï Ñ Ó Ô Ò Ø Õ Ö Þ Ú Û Ù Ü Ý
Caracter

Cdigo
á â æ à å ã ä ç ð é ê è ë í î ì ï ñ ó ô ò ø õ ö þ ú û ù ü ý
Caracter
< > & " sp
Cdigo
< > & " © ® ² ² ³ ¶ « » ¼ ½ ¾ £ ÿ ß
Quando se constri uma pgina para a Web, constatamos que a simples utilizao da acentuao dos caracteres via teclado, parece resultar no brower e na maior parte das vezes isso mesmo que acontece. Porm, sabemos que existem incompatibilidades entre sistemas informticos, que tm a ver com facto do cdigo de caracteres variar de pas para pas. Atento a este facto, o HTML tem um cdigo prprio para a maior parte dos caracteres especiais. Quando em dvida, existe sempre a possibilidade de se recorrer ao cdigo ASCII normalizado, entre os smbolos &# e ; (por exemplo: £ ).
42
C
N 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 N Cor
Pallette Cromtica da Web

Red 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 51 51 51 51 51 51 51 51 Red Green 0 0 0 0 0 0 51 51 51 51 51 51 102 102 102 102 102 102 153 153 153 153 153 153 204 204 204 204 204 204 255 255 255 255 255 255 0 0 0 0 0 0 51 51 Green Blue 0 51 102 153 204 255 0 51 102 153 204 255 0 51 102 153 204 255 0 51 102 153 204 255 0 51 102 153 204 255 0 51 102 153 204 255 0 51 102 153 204 255 0 51 Blue HTML #000000 #000033 #000066 #000099 #0000CC #0000FF #003300 #003333 #003366 #003399 #0033CC #0033FF #006600 #006633 #006666 #006699 #0066CC #0066FF #009900 #009933 #009966 #009999 #0099CC #0099FF #00CC00 #00CC33 #00CC66 #00CC99 #00CCCC #00CCFF #00FF00 #00FF33 #00FF66 #00FF99 #00FFCC #00FFFF #330000 #330033 #330066 #330099 #3300CC #3300FF #330000 #333333 HTML 43
Cor
45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 N Cor
51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 102 102 102 102 102 102 102 102 102 102 102 102 102 102 102 102 102 102 102 102 102 Red
51 51 51 51 102 102 102 102 102 102 153 153 153 153 153 153 204 204 204 204 204 204 255 255 255 255 255 255 0 0 0 0 0 0 51 51 51 51 51 51 102 102 102 102 102 102 153 153 153 Green
102 153 204 255 0 51 102 153 204 255 0 51 102 153 204 255 0 51 102 153 204 255 0 51 102 153 204 255 0 51 102 153 204 255 0 51 102 153 204 255 0 51 102 153 204 255 0 51 102 Blue
#333366 #333399 #3333CC #3333FF #336600 #336633 #336666 #336699 #3366CC #3366FF #339900 #339933 #339966 #339999 #3399CC #3399FF #33CC00 #33CC33 #33CC66 #33CC99 #33CCCC #33CCFF #330000 #330033 #330066 #330099 #3300CC #3300FF #660000 #660033 #660066 #660099 #6600CC #6600FF #663300 #663333 #663366 #663399 #6633CC #6633FF #666600 #666633 #666666 #666699 #6666CC #6666FF #669900 #669933 #669966 HTML 44
94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 N Cor
102 102 102 102 102 102 102 102 102 102 102 102 102 102 102 153 153 153 153 153 153 153 153 153 153 153 153 153 153 153 153 153 153 153 153 153 153 153 153 153 153 153 153 153 153 153 153 153 153 Red
153 153 153 204 204 204 204 204 204 255 255 255 255 255 255 0 0 0 0 0 0 51 51 51 51 51 51 102 102 102 102 102 102 153 153 153 153 153 153 204 204 204 204 204 204 255 255 255 255 Green
153 204 255 0 51 102 153 204 255 0 51 102 153 204 255 0 51 102 153 204 255 0 51 102 153 204 255 0 51 102 153 204 255 0 51 102 153 204 255 0 51 102 153 204 255 0 51 102 153 Blue
#669999 #6699CC #6699FF #66CC00 #66CC33 #66CC66 #66CC99 #66CCCC #66CCFF #66FF00 #66FF33 #66FF66 #66FF99 #66FFCC #66FFFF #990000 #990033 #990066 #990099 #9900CC #9900FF #993300 #993333 #993366 #993399 #9933CC #9933FF #996600 #996633 #996666 #996699 #9966CC #9966FF #999900 #999933 #999966 #999999 #9999CC #9999FF #99CC00 #99CC33 #99CC66 #99CC99 #99CCCC #99CCFF #99FF00 #99FF33 #99FF66 #99FF99 HTML 45
143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 N Cor
153 153 204 204 204 204 204 204 204 204 204 204 204 204 204 204 204 204 204 204 204 204 204 204 204 204 204 204 204 204 204 204 204 204 204 204 204 204 255 255 255 255 255 255 255 255 255 255 255 Red
255 255 0 0 0 0 0 0 51 51 51 51 51 51 102 102 102 102 102 102 153 153 153 153 153 153 204 204 204 204 204 204 255 255 255 255 255 255 0 0 0 0 0 0 51 51 51 51 51 Green
204 255 0 51 102 153 204 255 0 51 102 153 204 255 0 51 102 153 204 255 0 51 102 153 204 255 0 51 102 153 204 255 0 51 102 153 204 255 0 51 102 153 204 255 0 51 102 153 204 Blue
#9900CC #9900FF #CC0000 #CC0033 #CC0066 #CC0099 #CC00CC #CC00FF #CC3300 #CC3333 #CC3366 #CC3399 #CC33CC #CC33FF #CC6600 #CC6633 #CC6666 #CC6699 #CC66CC #CC66FF #CC9900 #CC9933 #CC9966 #CC9999 #CC99CC #CC99FF #CCCC00 #CCCC33 #CCCC66 #CCCC99 #CCCCCC #CCCCFF #CCFF00 #CCFF33 #CCFF66 #CCFF99 #CCFFCC #CCFFFF #FF0000 #FF0033 #FF0066 #FF0099 #FF00CC #FF00FF #FF3300 #FF3333 #FF3366 #FF3399 #FF33CC HTML 46
192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216
Como se convertem cores para cdigo HTML?
255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255
51 102 102 102 102 102 102 153 153 153 153 153 153 204 204 204 204 204 204 255 255 255 255 255 255
255 0 51 102 153 204 255 0 51 102 153 204 255 0 51 102 153 204 255 0 51 102 153 204 255
#FF33FF #FF6600 #FF6633 #FF6666 #FF6699 #FF66CC #FF66FF #FF9900 #FF9933 #FF9966 #FF9999 #FF99CC #FF99FF #FFCC00 #FFCC33 #FFCC66 #FFCC99 #FFCCCC #FFCCFF #FFFF00 #FFFF33 #FFFF66 #FFFF99 #FFFFCC #FFFFFF
As cores que vemos no monitor de um computador, resultam da mistura quantitativa e aditiva de trs cores primrias: Vermelho (Red), Verde (Green) e Azul (Blue). A pallette de cores deste sistema chamado RGB, permite gerar exactamente 2563 cores: qualquer coisa como 16 777 216 cores (true color). Tanto o vermelho como o verde ou o azul, podem variar numa escala de 0 a 255. Para se coverter uma cor para cdigo HTML, devemos proceder da seguinte forma: a) Converter para Hexadecimal, o valor associado ao vermelho, verde e azul de uma determinada cor. b) Ordenar os valores hexadecimais por vermelho, verde e azul precedendo-os do caracter # (cardinal). Note que o cdigo HTML de cores reserva dois caracteres para cada valor de vermelho, verde ou azul. Assim, se um determinado valor convertido para hexadecimal no ocupar dois caracteres, deve ser precedido por 0. Exemplo: A cor tem o valor 0 para vermelho, o valor 153 para verde e o valor 255 para azul. Se convertermos 0 para hexadecimal, obtemos 0. De igual modo, 153 ser 99 e 255 ser FF. Estamos agora em condies de escrever
47
o cdigo HTML desta cor: #0099FF

Qual a pallette de cores utilizada na Web?
Existe um conjunto mais restrito de cores para ser utilizado na Web. Nomeadamente, quando falamos no formato GIF e em resoluo de 8 bits, chegamos tabela anterior, que apenas joga com a combinao de 6 nmeros para os valores de vermelho, verde e azul. Os seis nmeros escolhidos, foram os seguintes: 0 51 102 153 204 255
Que convertidos para hexadecimal, do origem a: 0 33 66 99 CC FF
Estes nmeros permitem um total de 63 combinaes, qualquer coisa como 216 cores. Quando se utiliza o formato GIF, estas devem ser as cores escolhidas. As verses mais recentes dos programas para edio de imagem, permitem a seleco da pallette Web, aquando da gravao de ficheiros com formato GIF.
48
D
Exemplo de uma rvore de directrios e seu contedo
Estruturao de Directrios
Origem Imagens foto.jpg Trabalhos titulo.gif HTML assinatura.gif index.html Botes frente.gif
Como se aponta para diferentes directrios?
O programa que se segue ajudar a compreender a mecnica dos links para diferentes directrios. Imaginemos que estamos a construir uma pgina HTML que se encontra no seguinte directrio: C:\Origem\Trabalhos\HTML\index.html Temos uma srie de imagens repartidas pelos diferentes directrios que queremos utilizar na pgina. Atente no seguinte programa:
Programa D1 <html> <head> <title>A Minha Fotografia</title> </head> <body> <img src="../titulo.gif" alt="A minha foto."> <img src="../../Imagens/foto.jpg" alt="Eu."> Carregue no boto para ver onde eu estudo. <a href=http://www.fe.up.pt> <img src="Botes/frente.gif" border=0 alt="FEUP"> </a> </body> </html>
49
HTML - Curso de Introduo Como se aponta para um directrio n nveis acima?
Vejamos esta linha de comando: <img src="../titulo.gif" alt="A minha foto."> Note que o directrio actual : C:\Origem\Trabalhos\HTML\ Se subirmos um nvel, chegamos ao directrio: C:\Origem\Trabalhos\ Para cada nvel que se sobe, introduzimos ../ antes do nome do documento. Queremos agora aceder ao directrio: C:\Origem\Imagens\ Temos primeiro que subir dois nveis, para nos localizarmos dentro do directrio: C:\Origem\ Como neste directrio existem dois subdirectrios, devemos explicitar a qual deles desejamos aceder. A linha de comando ser: <img src="../../Imagens/foto.jpg" alt="A minha foto.">
Como se aponta para um directrio n nveis abaixo?
Para ter acesso a subdirectrios, devemos escrever o caminho que nos conduz ao directrio que contm o ficheiro pretendido. Assim, para chegarmos ao documento frente.gif temos de escrever: <img src="Botes/frente.gif" border=0 alt="FEUP"> Nota: No sistema operativo MS-DOS, utilizamos a \ (barra esquerda) como separador de nomes de directrios, quando especificamos a localizao de um determinado ficheiro. Em HTML, simetricamente, utilizamos a / (barra direita).
50

HTML

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

HTML

Enviado por

Direitos autorais:

Formatos disponíveis

HTML Curso de Introduo

Vitor Manuel Carvalho CICA - FEUP

HTML - Curso de Introduo

HTML - Curso de Introduo

Vitor Manuel Ferreira Alves Carvalho vitor@atlantis.fe.up.pt 970904

HTML - Curso de Introduo

HTML - Curso de Introduo

TCP/IP torna-se o protocolo standard para a ARPAnet no dia 1 de Janeiro.

A ARPAnet desligada. A mais popular Internet toma conta das ligaes.

25 anos desde o nascimento da ARPAnet. Um quarto de sculo de existncia para a Internet.

Os termos "Internet" e "Web" tornam-se de uso comum por todo o mundo.

HTML - Curso de Introduo

Como se estrutura este curso?

necessrio algum aplicativo para a escrita em HTML?

HTML - Curso de Introduo

Uma Pgina Simples

Noes gerais sobre os comandos

HTML - Curso de Introduo

Como se estruturou este programa?

Como se v este exemplo no browser?

HTML - Curso de Introduo

Tipos de formatao possveis em HTML

HTML - Curso de Introduo

Se atendermos palavra inglesa, link significar elo ou ligao e

HTML - Curso de Introduo links?

<a href=?> </a>

HTML - Curso de Introduo

HTML - Curso de Introduo

HTML - Curso de Introduo

HTML - Curso de Introduo

Como se introduz uma imagem para pano de fundo da pgina?

HTML - Curso de Introduo

Relaes Homem Casal Mulher

HTML - Curso de Introduo

HTML - Curso de Introduo

HTML - Curso de Introduo

HTML - Curso de Introduo

HTML - Curso de Introduo

bgcolor=cdigo HTML da cor

Pode colocar-se tabelas dentro de tabelas?

HTML - Curso de Introduo

HTML - Curso de Introduo

Ttulos e Formatos Tipo

HTML - Curso de Introduo

HTML - Curso de Introduo

Esta marca gera o menor tipo de ttulo disponvel. Propriedade:

Especificamos a largura da barra. Eis a sintaxe para esta propriedade: size=valor

HTML - Curso de Introduo noshade

HTML - Curso de Introduo </sup>

HTML - Curso de Introduo

HTML - Curso de Introduo

HTML - Curso de Introduo

Quando devemos utilizar frames?

HTML - Curso de Introduo

HTML - Curso de Introduo

Esttica e Conduta Web

HTML - Curso de Introduo

HTML - Curso de Introduo

HTML - Curso de Introduo

HTML - Curso de Introduo

Ficheiro Binrio (binary file)

HTML - Curso de Introduo

Cdigo do Pas (Country Code)