NocoesBasicas_v2

Criao de pginas Web

Copyright

Copyright (c) 2006 Escola Secundria Artstica de Soares dos Reis permitido copiar, distribuir e/ou modificar este documento de acordo com os termos da GNU Free Documentation

License - verso 1.2 (http://www.gnu.org/copyleft/fdl.html) ou outra mais recente publicada pela Free Software Foundation.

Autores

Alexandre Manuel Pinto Martins

Fernando J. Leal

Maio 2006

ndice1.World Wide Web...........................................................................................................................................................5

1.1.Introduo............................................................................................................................................................5

1.2.Noes elementares do seu funcionamento ...........................................................................................................6

Hipertexto.............................................................................................................................................................6

URL e endereo IP ...............................................................................................................................................6

Modelo cliente-servidor..........................................................................................................................................7

Pginas Web e o HTML.........................................................................................................................................7

Protocolo HTTP (HyperText Transfer Protocol)........................................................................................................71.3.Percurso de uma ligao.......................................................................................................................................8

1.4.Literatura de apoio................................................................................................................................................8

2.A linguagem HTML........................................................................................................................................................9

2.1.Estrutura do ficheiro HTML....................................................................................................................................9

Cabealho..........................................................................................................................................................10

Corpo.................................................................................................................................................................11

2.2.Principais elementos do HTML.............................................................................................................................11

Ttulos................................................................................................................................................................11

Pargrafos..........................................................................................................................................................11

Listas..................................................................................................................................................................12

Imagens..............................................................................................................................................................13

Tabelas..............................................................................................................................................................14

Ligaes (Hyperlinks)..........................................................................................................................................16Formulrios.........................................................................................................................................................17

Frames...............................................................................................................................................................19

2.3.Leitura de apoio..................................................................................................................................................20

3.Introduo ao CSS......................................................................................................................................................21

3.1.Sintaxe do CSS...................................................................................................................................................22

Ficheiro HTML com CSS externo..........................................................................................................................23

Ficheiro HTML com CSS interno..........................................................................................................................23

Esquemas de Cores............................................................................................................................................25

Estilos em Cascata..............................................................................................................................................25

Classes de Estilos...............................................................................................................................................26

Eventos..............................................................................................................................................................27

3.2.Literatura de apoio..............................................................................................................................................27

Criao de pginas Web

1. World Wide Web

1.1. Introduo

Ao contrrio do que se possa pensar, o termo Internet e WWW (World Wide Web ou apenas Web, para abreviar) no so sinnimos. A Internet surgiu bastante tempo antes e apenas na dcada de 90 surgiu o WWW.

A origem da Internet est na ARPA (Advanced Research Projects Agency), uma instituio criada nos anos 60, com o intuito de desenvolver uma rede de dados capaz de sobreviver a um ataque nuclear. Essa rede iria interligar as diversas

instituies militares de forma a quer se ocorresse um ataque nuclear nos E.U.A. fosse possvel manter as comunicaes

entre essas instituies. A rede criada foi designada ARPANET e considerada o embrio do que viria a ser a Internet.

A essa rede foram-se ligando durante os anos 70 e 80 diversas universidades, centros de investigao e grandes

empresas comearam tambm a ligar-se no sentido de desenvolver a investigao. Mais tarde essa rede, passou para a ser

gerida pela NSF (National Science Foundation) e continuou a alargar-se.Pode-se afirmar que a Internet no uma rede de computadores, mas sim um vasto conjunto de redes de

computadores interligadas entre si.

Para que todos os computadores pudessem comunicar entre si, tinham de falar a mesma linguagem. A essa

linguagem, designada tecnicamente por protocolo, chamou-se TCP/IP (Transport Control Protocol/Internet Protocol). Um protocolo poder ser definido, de uma forma simples, como um conjunto de regras que os computadores tm de seguir para poderem comunicar entre si.

Nos primeiros tempos da Internet, foram criados um conjunto de servios que os computadores ligados utilizavam: E-mail;

News: equivalente aos actuais fruns de discusso ou mailing lists;

Login remoto (telnet): permite a um utilizador entrar num computador remoto (distante) e trabalhar como se estivesse no seu computador local;

FTP (File Transfer Protocol): permite transferir ficheiros entre dois computadores.Apenas em 1991 que surgiu a World Wide Web que veio tornar a utilizao da Internet mais fcil para o utilizador

comum e, como utilizava hipertexto, imagens, som e vdeo, mais atractiva. A WWW foi criada por Tim Berners-Lee, um

investigador do CERN (Organisation Europenne pour la Recherche Nuclaire) na Sua, com o objectivo de partilhar a informao entre investigadores. O primeiro browser (software para navegar na Web) surgiu apenas em 1993!

Escola Secundria Artstica de Soares dos Reis 6

Criao de pginas Web

1.2. Noes elementares do seu funcionamento

Alguns dos conceitos de funcionamento descritos nesta seco so comuns a todos os servios disponveis na

Internet (email, FTP, etc), no entanto, o WWW contm algumas particularidades. Pode-se dizer que a Web resulta da combinao de quatro conceitos1:

hipertexto

Identificadores de recursos

Modelo cliente-servidor

Linguagem de marcas

Hipertexto

Por hipertexto designam-se os documentos que contm ligaes para outros documentos. O utilizador pode assim,

clicar nas hiperligaes para aceder a outro documento relacionado com a palavra ou expresso onde clicou.

URL e endereo IP

Considere-se o caso da rede telefnica existente. Cada telefone que est ligado rede necessita de ter um nmero

de nico de forma a distinguir-se de todos os outros. Tambm na Internet cada computador que est ligado Internet

necessita de um identificador nico em toda a Internet que o permita distinguir de todos os outros computadores que esto

ligados. A este identificador chama-se endereo IP (a sigla IP refere-se ao nome do protocolo Internet Protocol, referido anteriormente).

Este endereo composto por quatro nmeros2 (de 0 a 255) separados por pontos, por exemplo, 194.210.67.2

No caso dos utilizadores residenciais este endereo fornecido temporariamente pela empresa que fornece o

servio de Internet ao utilizador, designado ISP (Internet Service Provider).Este endereo permite identificar cada computador na Internet sem haver dois repetidos. Como estes nmeros so

muito difceis de fixar foi criado um sistema textual mais fcil designado por URL (Universal Resource Locator). Assim, em vez de utilizar, por exemplo, o endereo 66.102.9.99 basta utilizar o URL www.google.com.

Para fazer a converso entre nomes de domnio e endereos IP, existe um conjunto de computadores designados servidores de DNS.

1 Adaptado de: http://en.wikipedia.org/wiki/Www

2 Esta estrutura dever ser substituda gradualmente por uma outra designada por IPv6 (IP verso 6).


Criao de pginas Web

Modelo cliente-servidor

Todos os servios existentes na Internet (email, Web, FTP, etc) baseiam-se numa estrutura designada cliente-servidor. Como se poder depreender pelas designaes, os clientes efectuam

pedidos que sero atendidos pelos servidores. Na prtica um

cliente ser um programa que est no computador do utilizador e

um servidor um computador que est algures na Internet mas que

contm software especfico para responder ao pedido de um

software cliente.

No caso da Web, um programa cliente ser o browser

(designao genrica dos programas para navegar na Web, por exemplo, o Mozilla Firefox, Internet Explorer, Safari, Opera, etc) que "pede" servidor uma determinada pgina. O servidor contm um software que mediante o pedido do cliente, procura o ficheiros dessa pgina no seu disco rgido e envia-a para o cliente.

Em termos de software, um servidor poder ser um computador absolutamente normal, apenas ter de conter

software para responder aos pedidos dos clientes.

Pginas Web e o HTML

Uma pgina Web enviada pelos servidores para o nosso computador um ficheiro de texto escrito numa linguagem

designada HyperText Markup Language (HTML) que contm as instrues que permitem ao browser construir a pgina tal como a vemos. Por exemplo, podero existir instrues que indicam ao browser a cor e tamanho do texto que dever

apresentar no ecr; a indicao e nome dos respectivos ficheiros das imagens includas nas pginas ou as hiperligaes

para outras pginas.

Protocolo HTTP (HyperText Transfer Protocol)Ao conjunto de regras e procedimentos que os vrios clientes e servidores utilizam para pedir e enviar as pginas,

chama-se Hypertext Transfer Protocol (HTTP). esta sigla que normalmente aparece na barra de endereos do browser. Por exemplo, no endereo http://www.google.com, a sigla http indica que este o protocolo que se est a

utilizar.

Um servidor Web um computador com um software de servidor de HTTP. Exemplos deste software o Internet

Information System (IIS) da Microsoft ou o Apache da Mozilla Foundation.


Figura 1: Modelo cliente-servidor

Criao de pginas Web

1.3. Percurso de uma ligao

O que acontece quando nos ligamos a partir de nossa casa e acedemos a uma determinada pgina Web?

O primeiro passo a ligao a um servidor pertencente ao ISP que atribui ao nosso computador um endereo IP

temporrio. Esta ligao feita atravs de um modem e, normalmente, realizada atravs da rede telefnica pblica ou rede

de cabo. Um modem um dispositivo que converte os bits (os e 1s existentes no computadores em sinais elctricos que circulam na rede telefnica ou rede cabo).

Aps termos o endereo IP, podemos ento utilizar um programa para navegar na Web, genericamente designado

browser e digitar na barra de endereos o respectivo endereo da pgina a visualizar (por exemplo, http://www.essr.net). Assim que inserimos esse endereo, o nosso computador contacta um servidor de DNS para converter o URL num endereo IP. O servidor de DNS responde com o respectivo endereo IP (ex.: 194.210.67.2). Posteriormente o nosso browser, contacta o servidor com esse endereo, "pedindo" a respectiva pgina. O servidor que contm um software especfico para responder a pedidos de HTTP, envia-lhe a respectiva pgina e

eventualmente outros ficheiros de imagens, vdeos, sons ou animaes que estejam contidos na pgina.

1.4. Literatura de apoio

A World Wide Web na Wikipedia . http://en.wikipedia.org/wiki/World_wide_web

A proposta original para o sistema WWW de Tim Berners-Lee - http://www.w3.org/History/1989/proposal.html

Um resumo da histria da World Wide Web - http://www.w3.org/History.html

Oficina de Internet, porTIC - http://www.portic.ese.ipp.pt/oficina.html?tipo=1


Criao de pginas Web

2. A linguagem HTML

O HTML foi originalmente criado por Tim Berners-Lee e

actualmente um standard gerido pelo Word Wide Web Consortium

(W3C). Ao longo do tempo foram surgindo vrias verses desta linguagem, sendo que a verso actual estabilizou na verso 4.01. No

entanto, o W3C criou um novo standard, designado por XHTML que se

pretende vir a substituir gradualmente o HTML. O XHTML permite uma

mais fcil manuteno e processamento automtico das pgina e,

fundamentalmente, procura separar contedo da apresentao, o que

no acontece com o HTML.

Normalmente um ficheiro HTML tem a extenso .html, no

entanto, para compatibilidade com sistemas mais antigos, o software actual tambm suporta a extenso com trs letras,

.htm.

2.1. Estrutura do ficheiro HTML

Em HTML usam-se marcas, ou tags (do ingls), para indicar, por exemplo, o incio e o fim dum pargrafo. Estas marcas aparecem entre os smbolos < e >. Um pargrafo por exemplo, identificado da seguinte forma:

Istoumpargrafo.

O fim de uma marca indicado (salvo raras excepes como a tag ) por uma marca idntica, mas cujo nome precedido do smbolo /.

Existem marcas com diferentes objectivos [1]:

Marcas estruturais: descrevem o propsito/funo do texto. Por exemplo,Golf

indica ao browser para mostrar Golf como um ttulo de segundo nvel (algo como um sub-ttulo). Estas marcas no definem a formatao com que sero apresentadas, mas normalmente os browsers tem formataes pr-

definidas para estas marcas (ex.: tamanho maior do que o texto normal, negrito, etc).

Marcas de apresentao: indicam ao browser como apresentar o texto, independentemente do seu

propsito/funo. Por exemplo:


Figura 2: Exemplo de cdigo HTML

Criao de pginas Web

boldface normalmente apresentado como negrito (bold).

Marcas de hipertexto: permitem estabelecer ligaes a outros documentos. Por exemplo,Wikipedia

apresentado com a palavra Wikipedia com uma hiperligao para o URL

http://wikipedia.org.

O incio do ficheiro HTML indicado pela marca , e o fim pela correspondente marca de fim .

Tudo aquilo que possa aparecer aps a marca de fim ignorado.

Na actual verso do HTML (4.01 Transitional) h um elemento adicional: a primeira linha deve identificar a verso e o tipo de ficheiro HTML, de acordo com as normas da W3C. Um documento "normal" (um texto, por ex.) em HTML identifica-se como no exemplo:

(...)

O ficheiro HTML pode ser dividido em dois blocos: o cabealho e o corpo do documento.

Cabealho

O cabealho delimitado pelas tags e . Nele aparecem elementos informativos para o browser, que

no so mostrados no documento. Por exemplo:

Ttulo

Neste exemplo, dentro do cabealho do documento temos duas tags significativas:

a primeira indica o ttulo do documento, que normalmente apresentado pelo browser na barra de ttulo da sua

janela, no ambiente grfico; a segunda indica o tipo de contedo do ficheiro (text/html) e a codificao usada na escrita (o iso-8859-1

corresponde aos caracteres portugueses).


Criao de pginas Web

Corpo

O corpo do documento HTML delimitado pelas marcas e . nesta seco que aparece todo o contedo que o autor do documento pretende disponibilizar ao leitor.

Convm neste momento introduzir a noo de estilo. Um estilo, em termos de composio grfica, um conjunto de caractersticas que so comuns a um determinado elemento grfico. Por exemplo, um pargrafo, que como j vimos, em HTML, delimitado pelas marcas e , est associado a um determindo tipo de letra, tamanho, cor, etc. Na actual

verso do HTML (verso 4), os estilos de cada elemento grfico devem ser indicados parte do ficheiro HTML (num ficheiro CSS). Por ora, vamos deixar que o browser use os estilos por omisso que entender mais adequados. Mais frente, veremos como caracterizar os estilos dos nossos elementos grficos.

2.2. Principais elementos do HTML

Os elementos mais comuns que constituem um documento so:

Ttulos

Os ttulos chamam-se headings em Ingls, e distinguem-se consoante o nvel (ttulo, sub-ttulo, sub-sub-ttulo, etc.)Assim, um ttulo principal (de um captulo, por ex.), um "heading 1", um sub-ttulo um "heading 2", e por a

adiante. Em HTML, usam-se as marcas , , ...

Exemplo:

IstoumttuloIstoumsubttuloIstoumpargrafo,comojtnhamosvisto.

Pargrafos

Como j foi referido, um pargrafo aparece delimitado entre marcas e . No necessrio ao autor preocupar-se com o fim da linha - consoante a largura disponvel na janela do browser, este ajustar o texto e dividi-lo- por tantas linhas quantas as necessrias. No entanto, o autor pode querer, a dada altura, introduzir uma quebra de linha. Para

tal, pode usar a marca (abreviatura de break). Esta marca introduz uma quebra de linha, mas no termina o pargrafo. Em HTML 4.01 (a verso actual), esta marca tambm uma das poucas excepes regra de que uma marca tem sempre a sua correspondente marca de fim.

Exemplo:

Istoumpargrafo"quebrado"ameio.


Criao de pginas Web

Outras marcas podem aparecer no meio de um pargrafo. Por exemplo, a marca indica negrito, e a marca

indica itlico.

Istoumpargrafocompalavrasemnegritoeemitlico.

Listas

H vrias formas de definir listas em HTML: podem ser listas com elementos no-numerados, listas em que os

elementos aparecem numerados, ou ainda (menos habituais) listas com elementos que possuem uma descrio extra. Para qualquer um destes tipos de lista possvel inserir listas dentro de listas, obtendo-se assim diferentes nveis dentro da lista.

Exemplo de lista sem numerao:

Item1Item2Item3

O resultado algo como:

Item 1

Item 2

Item 3

Exemplo de lista numerada:

Item1Item2Item3

Resultado:

1. Item 1

2. Item 2

3. Item 3

Exemplo de lista com descries para cada item:

Item1Descrioitem1Item2Descrioitem2Item3Descrioitem3

Resultado:

Item 1


Criao de pginas Web

Descrio item 1

Item 2

Descrio item 1

Item 3

Descrio item 1

As listas podem conter sub-items. Atente-se, por exemplo, no seguinte cdigo:

TesteExperinciaSubexperincia1Subexperincia2Outroteste

Cujo resultado uma lista com vrios nveis, e ordenada como tal:

1. Teste

2. Experincia

1. Sub-experincia 1

2. Sub-experincia 2

3. Outro teste

Imagens

A introduo de imagens num ficheiro HTML faz-se pela tag . Esta marca outra excepo regra de que

cada marca deve ter uma marca de fim, dado que no necessrio indicar ao browser onde uma imagem acaba. As

imagens so carregadas a partir de ficheiros de imagem (em formatos JPEG, PNG, etc.)Assim, a tag tem alguns atributos que tm obrigatoriamente que ser indicados. Por exemplo, e como

bvio, no basta indicar que em determinada posio queremos inserir uma imagem - necessrio especificar qual imagem,

onde est o ficheiro que contm a informao da imagem. Para tal, usa-se a marca com a seguinte sintaxe:

Os atributos das marcas, quando aplicveis, devem ser sempre delimitados por aspas (embora o HTML 4.01 no obrigue a esta prtica, ela constitui um bom hbito porque a evoluo da linguagem, o XHTML 1.0, obriga). Assim, no exemplo acima, estamos a indicar ao browser que queremos inserir no documento uma imagem que est num ficheiro

chamado wanda_the_fish.png, que est no mesmo directrio do ficheiro HTML. O atributo alt uma


Criao de pginas Web

representao alternativa da imagem que o browser usar caso no consiga encontrar o ficheiro. A sua incluso

obrigatria.

Alguns browsers frequentes no mercado usam erradamente o atributo alt das imagens para mostrar uma

pequena legenda sobre a imagem quando o utilizador sobre ela detm o rato por breves instantes. Este comportamento

incorrecto de acordo com as normas da W3C, devendo para esse efeito usar-se o atributo (opcional) . No exemplo acima, ficaria:

Convm referir que as imagens, dos vrios elementos que podem constituir uma pgina HTML, so dos que podem

conter maior quantidade de informao. Convm, portanto, fazer uma utilizao criteriosa deste recurso.

Embora a Banda Larga seja hoje uma realidade, quando disponibilizamos um recursos na Internet estamos a torn-lo acessvel a todo o Mundo, no apenas aos vizinhos e amigos prximos. Em muitas localidades, no h ainda Banda

Larga. (Em muitos pases, no h ainda Internet...) Dado que muitos utilizadores da Internet vem-se obrigados a usar ligaes muito lentas, convm resumir ao mnimo a quantidade de informao a transmitir - tirar uma fotografia com uma

cmara digital a 4 MegaPixel e coloc-la directamente numa pgina HTML quase sempre um erro crasso! Quando muito,

pode usar-se uma verso de baixa resoluo dessa imagem (tratando-a num programa de tratamento de imagem como o GIMP), que sirva de ligao (link) verso de resoluo superior, qual s aceder, de forma consciente, quem estiver interessado nela.

Tabelas

As tabelas so dos elementos mais usados em HTML, muitas vezes at de forma invisvel para o leitor do

documento (com a borda invisvel - largura zero), apenas para posicionar outros elementos.Uma tabela uma matriz de linhas e colunas, como num jogo de batalha naval. Eventualmente, algumas dessas

linhas ou colunas podem estar agrupadas. Pode existir uma linha inicial com uma formatao especial (os ttulos da tabela).Uma tabela define-se pela marca (e termina com ). Cada linha delimitada pelas marcas

e ("tr" vem do ingls table row), e cada coluna por e (do ingls table division). Uma clula especial com ttulos pode ser marcada como em vez de (do ingls table heading). Por exemplo:

Ttulocoluna1Ttulocoluna2Ttulocoluna3linha1,coluna1linha1,coluna2linha1,coluna3


Criao de pginas Web

linha2,coluna1linha2,coluna2linha2,coluna3linha3,coluna1linha3,coluna2linha3,coluna3

O exemplo acima resulta na seguinte tabela:

O atributo border="1" da marca indica que a borda volta das clulas da tabela deve ter 1 pxel

de espessura; o atributo cellspacing define o valor do espaamento entre as clulas; e o atributo cellpadding

define o intervalo interior, em cada clula, entre os seus limites e o contedo.

Atributos como rowspan e colspan podem ser usados para juntar clulas entre lihnas e/ou colunas. Por exemplo, o cdigo anterior alterado para:

Ttulocoluna1Ttulocoluna2Ttulocoluna3linha1,coluna1linha1,coluna3linha2,coluna1linha2,coluna2linha2,coluna3linha3,coluna1linha3,coluna2


Criao de pginas Web

Produz a seguinte alterao:

Outras formataes, como alinhamentos, cores, tipos de letra, etc., para cada clula ou para a totalidade da tabela

podem ser definidas directamente no HTML, mas essas definies esto a cair em desuso a favor da utilizao de ficheiros

CSS (Cascading Style Sheets).

Ligaes (Hyperlinks)Uma das funcionalidades mais interessantes das pginas da Internet como as conhecemos a facilidade de se

fazer um "clique" com o rato sobre um link e aceder a outra pgina, ou outro local na mesma pgina. Este o mecanismo

bsico que permite a "navegao" na Internet.

Para definir ligaes entre pginas (links), usa-se a marca anchor, abreviada apenas pela primeira letra, seguida do atributo href para indicar o endereo para onde ligar. Por exemplo:

IstoumpargrafocomumlinkparaaWikipedia.

Para indicar um endereo de correio electrnico, pode fazer-se:Omeuemail:[email protected]

No caso de se pretenderem referncias para o interior de uma pgina devem ser definidos os "alvos" dos links com

a marca seguida do atributo name. Por exemplo, no incio de um captulo poder-se--ia fazer:

CaptuloI

Algures na mesma pgina, um link para este ponto seria:


Criao de pginas Web

linkparacap.I

Note-se a utilizao do caracter # precedendo o nome. Se o link fosse definido noutra pgina, seria, por exemplo:linkparacap.Inapginaxpto.html

Por fim, se se pretender que um link seja seguido num frame diferente daquele onde se situa (isto no caso de a pgina estar dividida em frames), pode fazer-se:

xpto

O atributo target da marca permite definir o frame onde o link deve ser aberto. No valor deste atributo

deve indicar-se o nome do frame desejado, ou um de quatro valores pr-definidos: _blank - o link ser aberto numa nova pgina (provavelmente, numa nova janela do browser). _self - o link ser aberto no prprio frame onde se situa (comportamento por omisso). _top - o link ser aberto na totalidade da janela actual, destruindo quaisquer frames que possam existir. _parent - o link ser aberto no frame que suporta o frameset onde reside o frame actual, isto , no frame

parente do actual.

Formulrios

Os formulrios so blocos, dentro das pginas HTML, que permitem a interaco com o utilizador, oferecendo-lhe a

possibilidade de submeter informao para o servidor. Caracterizam-se por possurem um conjunto de campos de escrita ou escolha de valores, e normalmente um boto para submeter essa informao.

Para definir um formulrio usa-se a marca form, com dois atributos importantes: method identifica o mtodo de

submisso (post ou get) e action identifica o ficheiro que, no servidor, receber a resposta (a submisso por parte do utilizador).

Um exemplo de um formulrio muito simples :

Nome:

Este formulrio ser submetido usando o mtodo post do protocolo HTTP, e o servidor invocar o ficheiro

resposta.php para tratar a informao submetida. Para trabalhar a informao que o servidor recebe necessrio

dispor de uma ferramenta de programao do lado do servidor. Neste exemplo, usado um ficheiro com extenso php, o

que significa que ser executado no servidor, como resposta submisso do do formulrio, um script escrito em PHP. (O estudo desta linguagem est fora do mbito deste curso.)

A marca input define um campo de interaco com o utilizador. No exemplo acima usada uma caixa de texto,


Criao de pginas Web

definida no atributo type (type="text"). Os diferentes tipos de campos de interaco so:

text

Define uma caixa de texto. O nmero mximo de caracteres pode ser definido pelo atributo maxlength. O

atributo size indica o tamanho da caixa, e o value indica o texto inicial.

password

Idntico ao anterior, mas o texto aparece mascarado com o caracter "*" (contudo, enviado ao servidor como texto normal).

checkbox

Define uma caixa de seleco. Esta caixa tem dois estados, "on" e "off", e s submetida informao ao servidor

caso o seu estado esteja em "on". O atributo checked indica que ela deve inicialmente ter o estado "on".

radio

Produz uma caixa de seleco num grupo de vrias seleces possveis. O atributo checked numa das caixas

do grupo indica a que deve estar inicialmente seleccionada. Todas as caixas de seleco de um grupo devem ter o mesmo

nome (atributo name) e diferentes valores (atributo value).

submit

Produz um boto de submisso do formulrio. O texto deste boto indicado no atributo value.

reset

Define um boto de limpeza do formulrio. O texto indicado no atributo value.

file

Define um controlo de upload de ficheiros. Tipicamente, apresentado como uma caixa de texto seguida de um

boto para procurar ficheiros no disco do local. Mltiplos ficheiros podem normalmente ser indicados em simultneo.

hidden

Define uma caixa de texto escondida, imutvel e impreceptvel para o utilizador. O contedo de uma tal caixa

normalmente alterado usando um script (normalmente, escrito em JavaScript).

image

Produz um boto de submisso do formulrio com uma imagem em vez duma legenda. O atributo


Criao de pginas Web

align controla o alinhamento da imagem.

Em todos estes campos de interaco o atributo name define o nome do campo.

Frames

Um tipo especial de ficheiro HTML o que se designa por frameset (conjunto de frames, sendo cada frame uma poro da pgina HTML completa). Um frameset uma pgina HTML que no tem contedo (o que normalmente aparece na seco body do ficheiro HTML), mas antes a informao sobre a forma de dividir o ecr em vrios pedaos ("fatias" verticais oU horizontais, ou uma grelha com vrias linhas e colunas) e o endereo do ficheiro HTML a carregar para cada uma dessas divises. A cada diviso chama-se um frame.

Exemplo de frameset:

Exemplodeframeset

Oseubrowsernosuportaframes.

Este exemplo define trs frames horizontais: o primeiro (topo) com 100 pxeis de altura; o segundo (principal) ocupar o mximo de espao que lhe for possvel (pois a medida no se encontra definida); e o terceiro (rodap), com 50 pxeis de altura. As pginas HTML que sero carregadas em cada um deles so, respectivamente, topo.html,

principal.html e rodape.html, tal como definido no atributo src de cada frame.

A utilizao de frames foi muito popular h alguns anos atrs - actualmente, muito limitada. Um dos mais fortes

argumentos contra a utilizao de frames a forma como os motores de busca (tal como o Google) indexam os sites na Internet, que resulta em menes directas, nos resultados das buscas, s pginas que compem o frameset. Assim, quando

um utilizador segue um desses links, obtm apenas uma parte do site (visto que este composto por vrias partes, vrios frames). Por este motivo (e alguns outros, mais de natureza esttica), a utilizao de frames est actualmente limitada a sites de intranets (redes internas de organizaes) e pequenos sistemas de documentao que funcionam em modo local


Criao de pginas Web

(off-line).A zona definida pela marca noframes destina-se a um contedo alternativo, que ser exibido apenas caso o browser

no tenha capacidade para mostrar frames. (Todos os browsers modernos tm essa capacidade.) Nesta zona, tipicamente, definida uma seco body que segue as regras normais para o corpo do documento, mas s usada caso o browser no

possa mostrar o frameset.

2.3. Leitura de apoio

W3C -World Wide Web Consortium - http://www.w3.org

Getting Started With HTML, Dave Ragget, Maio de 2005 - http://www.w3.org/MarkUp/Guide

HTML 4.01 Specification - http://www.w3.org/TR/html401

HTML na Wikipedia - http://en.wikipedia.org/wiki/Html

Ajuda e ferramentas on-line da Web Design Group - http://www.htmlhelp.com Validador de pginas HTML da W3C - http://validator.w3.org/

Validador de cdigo HTML da WDG - http://www.htmlhelp.com/tools/validator/direct.html


Criao de pginas Web

3. Introduo ao CSS

CSS significa Cascading Style Sheets, algo como Estilos em Cascata em Portugus. So essencialmente coleces

de estilos que, uma vez aplicadas ao ficheiro HTML, caracterizam os elementos desse ficheiro em termos de cores, tipos e

tamanhos de letra, posicionamentos, espaamentos, alinhamentos, etc. A ideia separar claramente o que a estrutura do

documento (no ficheiro HTML) da sua formatao (no ficheiro CSS). Um mesmo documento HTML pode, assim, ter aspectos totalmente diferentes consoante a folha de estilos (o ficheiro CSS) adoptada, mantendo-se a informao contida no ficheiro inalterada. Como exemplo, quase obrigatrio conhecer o site CSS Zen Garden1.

Cada marca (ou tag) do ficheiro HTML pode (e deve) ter a sua caracterizao em termos do ficheiro de estilos. Se no tiver, o browser assumir valores por omisso para a representar.

A ligao entre um ficheiro HTML e um ficheiro CSS faz-se por uma informao na seco head do ficheiro HTML:

Teste

(...)

A marca link no cabealho do ficheiro HTML indica a relao com uma folha de estilos (atributo rel="stylesheet", definido pela marca href="styles.css", cujo tipo type="text/css". Desta forma, a folha de estilos ser aplicada em todas as situaes. Tambm possvel definir folhas de estilos para diferentes

situaes - por exemplo, estilos que s sero aplicados quando a pgina vista num ecr (acrescentando o atributo media="screen"), quando projectada (atributo media="projection"), ou apenas quando impressa (atributo media="print").

Os estilos podem tambm ser definidos directamente no cabealho do prprio ficheiro HTML. Alis, vulgar alguns

documentos HTML usarem folhas de estilos globais para caracterizar a maior parte dos seus elementos, e alguns estilos

definidos localmente, na sua seco head, quando a utilizao desses estilos se limita a um nico documento, evitando

assim sobrecarregar as "bibliotecas" de estilos que mltiplos documentos usam com estilos que s uma vez so usados.

Neste caso, a sintaxe ser:

1 http://www.csszengarden.com/


Criao de pginas Web

Teste

(...)

(...)

H ainda uma terceira opo, vlida em HTML 4.01 Transitional mas que deve ser evitada: a utilizao de estilos in-

line com as marcas HTML. Por exemplo:

Istoumpargrafoescritoavermelho.

A indicao do estilo como se de um atributo da marca HTML se tratasse pode dar jeito em determinadas situaes, mas acaba normalmente por se revelar inconveniente quando se pretende alterar todo o aspecto (o layout) do documento, porque neste caso as definies dos estilos deixam de estar centralizadas, passam a estar distribudas pelo documento. , portanto, uma prtica que deve ser evitada.

3.1. Sintaxe do CSS

Os ficheiros CSS so ficheiros de texto, tal como os ficheiros HTML. Cada marca HTML possui um conjunto de atributos passveis de serem caracterizados por CSS. Uma das melhores referncias para esses atributos e seus valores

possveis a pgina CSS Properties1, da WDG.

Alguns exemplos:

Ficheiro HTML com CSS externo

Retomando o exemplo anterior em que o cdigo CSS estava num ficheiro externo ao HTML chamado

styles.css, esse ficheiro poderia ser:

body{backgroundcolor:yellow;

1 http://www.htmlhelp.com/reference/css/properties.html


Criao de pginas Web

margin:10px;}h1{fontfamily:helvetica,sansserif;fontsize:xlarge;fontweight:bold;textalign:left;color:black;}h2{fontfamily:helvetica,sansserif;fontsize:large;fontweight:bold;textalign:left;color:black;}p{fontfamily:helvetica,sansseif;fontsize:medium;textalign:justify;color:#202020;}

A interpretao do CSS simples: para cada marca HTML (, , e ), identificada apenas pelo nome, h um conjunto de atributos (entre chavetas) aos quais so associados valores. Por exemplo, os valores que caracterizam o corpo do documento (seco do HTML) definem a cor amarela para o fundo e uma margem de 10 pxeis entre os limites do documento e o seu contedo. So depois caracterizados dois nveis de ttulos ( e ) e o elemento pargrafo (). O primeiro nvel de ttulo ter uma letra do tipo helvetica (famlia sans-serif), um tamanho "extra-grande", ser escrito em negrito, alinhado esquerda e de cor negra; o segundo nvel de ttulo ser um pouco mais

pequeno (tamanho "grande", apenas); e qualquer pargrafo ter uma letra de tamanho mdio, justificada esquerda e direita, e de cor #202020 (ligeiramente mais claro que o negro).

Ficheiro HTML com CSS interno

As mesmas definies podiam ser carregadas directamente no ficheiro HTML da seguinte forma:

Testebody{backgroundcolor:yellow;margin:10px;}h1{fontfamily:helvetica,sansserif;fontsize:xlarge;fontweight:bold;


Criao de pginas Web

textalign:left;color:black;}h2{fontfamily:helvetica,sansserif;fontsize:large;fontweight:bold;textalign:left;color:black;}p{fontfamily:helvetica,sansseif;fontsize:medium;textalign:justify;color:#202020;}

(...)

Esta tcnica tem a desvantagem de no permitir que as definies CSS sejam teis seno ao ficheiro HTML em que esto inseridas. Outros ficheiros HTML no podero beneficiar do mesmo cdigo, a no ser que o repitam nas suas

respectivas seces . Mas tem a vantagem de, no caso de o CSS em questo ser especfico de um nico ficheiro

HTML, estar localizado nesse ficheiro e no ocupar espao (no "pesar") em ficheiros CSS que podem ser includos que vrios ficheiros HTML. Em todo o caso, sempre possvel dividir o cdigo CSS por vrios ficheiros, e incluir em cada ficheiro

HTML apenas o(s) CSS que lhe diga(m) respeito. A separao entre a marcao do documento (conseguido com HTML) e o seu aspecto num determinada meio de apresentao (misso do CSS) sempre benfica, quanto mais no seja pela "limpeza" do cdigo assim construdo.

Esquemas de Cores

Uma cor pode ser definida, essencialmente, de duas formas: pelo nome (h tabelas de correspondncia entre nomes e valores) e pelo valor em RGB. O sistema RGB (Red-Green-Blue) usa um byte (8 bits) para representar cada componente. Significa isto que cada componente pode assumir valores discretos (inteiros) entre 0 (zero) e 255, resultando num total de 256 estados possveis. Juntando os trs componentes, temos um total de 2563 cores possveis, ou seja, 16.777.216 cores. capaz de ser suficiente para a maioria das aplicaes... ;)

Referir cores por nomes no seguro, porque nada garante que diferentes browsers atribuam exactamente o

mesmo valor a um nome (ou at que o conheam). O mtodo mais rigoroso usar valores numricos. costume esses valores serem expressos em hexadecimal (precedidos do caracter #), mas tambm perfeitamente correcto usar notao decimal, octal, ou outra - ou ainda a funo rgb(valor_r, valor_g, valor_b). Neste ltimo caso, os valores podem ser escritos segundo vrias notaes, sendo as mais comuns como inteiros no intervalo [0, 255] ou em


Criao de pginas Web

percentagem. Por exemplo:color:rgb(0%,50%,25%)

Nota: h uma tabela til de cores e seus valores hexadecimais neste endereo1.

Estilos em Cascata

O mesmo grupo de estilos pode ser aplicado a vrias marcas HTML sem ser necessrio repeti-lo. Por exemplo, a

seguinte sintaxe aplica a cor azul (blue) ao ttulo de nvel 1 e ao pargrafo:h1,p{color:blue;}

Vrias marcas HTML podem ser mencionadas no mesmo bloco CSS, desde que separadas por vrgulas. Contudo,

se estiverem separadas por espaos, a interpretao muito diferente - aqui que entra verdadeiramente o conceito de

"cascata". Por exemplo, o bloco seguinte aplica a cor azul a marcas de pargrafo, e a cor vermelha a texto em itlico que

esteja dentro de marcas de pargrafo:p{color:blue;}pi{color:red;}

Se o segundo bloco de cdigo no estivesse presente, o texto em itlico dentro dos pargrafos (azuis) seria tambm impresso em azul, porque herdaria essa caracterstica (a cor da letra) do seu nvel imediatamente superior no HTML, j que a marca , por si s, nada define em relao cor do texto.

Na realidade, num documento HTML, possvel definir uma "rvore" de marcas, comeando pelo corpo do

documento (). Se num documento for definido por CSS que este elemento deve ter cor verde, por exemplo, e nada for especificado quanto aos pargrafos que lhe estejam imediatamente anexos (sem nenhum outro elemento HTML pelo meio), ento esses pargrafos herdaro a cor verde. Daqui vem a noo de "estilos em cascata".

Classes de Estilos

Suponhamos que queremos definir um estilo genrico para pargrafos, mas que h alguns pargrafos especiais (por exemplo, citaes) que devem obedecer a um estilo diferente. Como distingui-los?

Uma hiptese definir classes de estilos, que podem ser aplicadas a qualquer marca HTML. Os nomes destas

classes no devem ser os mesmos das marcas HTML (para evitar confuso), e so declarados nos blocos CSS comeando por um ponto. Por exemplo:

1 http://www.htmlhelp.com/icon/hexchart.gif


Criao de pginas Web

p{color:black;marginleft:1cm;fontfamily:helvetica,sansserif;fontsize:normal;}.citacao{color:darkblue;marginleft:2cm;fontstyle:italic;}

O cdigo acima define pargrafos escritos a cor negra, com uma margem de 1cm esquerda, uma letra da famlia

"sans-serif" ("helvetica", se possvel), e um tamanho normal. Isto vlido para todos os pargrafos do documento. Mas se a um pargrafo for aplicada a classe citacao, o seu estilo muda - passa a ter cor azul-escura, 2cm de margem esquerda e

a estar escrito em itlico. Mas apenas esse pargrafo em questo! Por exemplo:(...)

Istoumpargrafonormal,afectadopeloestilodefinidoparaospargrafos.Estepargrafoumacitao.

(...)

Eventos

O sinal ":" (dois-pontos) pode ser usado para distinguir entre diferentes estados em que alguns elementos HTML se encontrem, funo de eventos que aconteam. O exemplo tpico o caso da ncora (o vulgar link), que por omisso os browsers costumam representar de uma cor se no tiver ainda sido visitado, e de cor diferente caso j tenha sido usado. Vejamos um exemplo:

a,a:visited{color:#800000;textdecoration:none;}a:hover{color:#800000;textdecoration:underline;}

Este exemplo caracteriza os links HTML "normais" (por usar) e depois de visitados de um tom vermelho-tinto, e sem qualquer outra decorao (sem sublinhado). Contudo, quando o utilizador passa o rato sobre um desses links, a cor mantm-se mas a decorao muda para sublinhado (underline). Esta uma forma de usar CSS para responder a eventos.


Criao de pginas Web

3.2. Literatura de apoio

Cascading Style Sheets, da W3C - http://www.w3.org/Style/CSS/

Cascading Style Sheets, da WDG - http://www.htmlhelp.com/reference/css/

Cascading Style Sheets, na Wikipedia - http://en.wikipedia.org/wiki/Cascading_Style_Sheets

CSS Zen Garden, referncia fundamental para a compreenso do poder do CSS - http://www.csszengarden.com/

Validador de CSS, da W3C - http://jigsaw.w3.org/css-validator/


1.World Wide Web1.1.Introduo1.2.Noes elementares do seu funcionamento HipertextoURL e endereo IP Modelo cliente-servidorPginas Web e o HTMLProtocolo HTTP (HyperText Transfer Protocol)

1.3.Percurso de uma ligao1.4.Literatura de apoio

2.A linguagem HTML2.1.Estrutura do ficheiro HTMLCabealhoCorpo

2.2.Principais elementos do HTMLTtulosPargrafosListasImagensTabelasLigaes (Hyperlinks)FormulriosFrames

2.3.Leitura de apoio

3.Introduo ao CSS3.1.Sintaxe do CSSFicheiro HTML com CSS externoFicheiro HTML com CSS internoEsquemas de CoresEstilos em CascataClasses de EstilosEventos

3.2.Literatura de apoio

NocoesBasicas_v2

Documents

linguagem html

ficheiro html

elementos do html

world wide web

escola secundria artstica

autoresalexandre manuel

soares dos reis permitido

pginas webcopyrightcopyright