Vous êtes sur la page 1sur 73

Projeto eJovem Mdulo II: HTML

Captulo1. HTML
1.1. Introduo
Antes de comearmos a estudar HTML, necessrio que se entenda alguns princpios
bsicosqueenvolvemestalinguagem.

1.1.1. Internet
Maisqueummodismo,aInternettornouseumfenmeno.Conectandomaisdeummilho
decomputadoresecercade40milhesdeusurios,espalhadosemdiversospases,valores
estesquemudamacadadia.Semdvidas,nodparaficardeforadestateia.
Enfim,seformosdefinirInternet,omelhorutilizarmosotermocomunicao,poisatravs
delaencontramosserviosefacilidades;notciaseatualidades;ouainda,comoocasode
muitaspessoas,umexcelentelocalparaencontraramigos,jogos,batepapoemuitomais,
comolojasvirtuais,ondepodemoscomprarouvendercomtodasegurana.

1.1.2. HistricodaInternet
A Internet teve incio em 1969 sob o nome de ARPANET (USA). Composta de quatro
computadorestinhacomofinalidadedemonstraraspotencialidadesnaconstruoderedes,
usandocomputadoresdispersos(espalhados)emumagranderea.Aidiafoiboa,eem
1972,50universidadeseinstituiesmilitaresjpossuamconexes.
Hojeumaarquiteturadesoftwaresehardwaresqueestabelecemcomunicaoentresi,a
qualmantidapororganizaescomerciaisegovernamentais.Maisumadasprincipais
caractersticasdaInternet,quenopossuiproprietrio.
Para organizar todas estas trocas de informaes, existem associaes e grupos que se
dedicam para suportar, ratificar padres e resolver questes operacionais, visando
promoverosobjetivosdaInternet.

1.1.3. AWordWideWeb(WWW)
AspessoascostumamfalaremInterneteWeb,seramesmacoisa?Serapenasumagria
damoadadobatepapo?Ouexisterealmenteumconceitocientficoparaisto?
Pararesolverestadvidaetambmparacomearmosaentenderestasriededefiniode
conceitos,vamospartirdoseguinteprincpio:
AWordWideWeb(AmplaRedeMundial)conhecidacomoWWW,umanovaestruturade
navegao pelos diversos itens de dados em vrios computadores diferentes. O modelo
WWW trata todos os dados da Internet como hipertexto, isto , vinculaes entre as
diferentes partes do documento para permitir que as informaes sejam exploradas
interativamenteenoapenasdeumaformalinear.
Porisso,existemprogramascomooMozillaFirefoxeoMicrosoftInternetExplorerque
aumentarammuitoapopularidadedaInternetegraasssuaspotencialidades.
Hoje,podemosnaspginasdaInternet:verdocumentosformatados(cores,efeitoseetc...),

Projeto eJovem Mdulo II: HTML

escutarmsica,assistiravdeos,emuitomais.
Enfim,aWebainterfacegrficadaInternet,poispodemosacessla,transferirarquivos
(ProcessoestequechamamosUpLoad)erealizaroutrasoperaesbsicas,semprecisarde
umainterfacegrfica.
Paraconcluir,sestamosdefatousandoaWebquandoestamosnavegando,fazendouso
dasHomePagesparaacessarumsite,ouseja,umendereonicoquecontmaHomePage
(pginainicial)eoutraspginasquefazempartedesteconjuntodepginasetodasemum
nicocdigofonteescritoemumalinguagemchamadaHTML.

1.1.4. Web
WebodiminutivoparaWorldWideWeb.Termoesseusadooriginalmenteparaaparteda
Internetquesurgiunoinciodadcadade90,compostaporinformaesdispostasem
formadetextos,imagensesons.atravsdaWebquesenavegacomaajudadeBrowsers.
Antes,trocavasebasicamentemensagens.Asduasredesacabaramsefundindoehojea
palavraWebusadacomosinnimodaprpriaInternet("GrandeRede").

1.1.5. Hipertexto
Originalmente, Hipertexto qualquer informao de texto em um computador, que
contenhasaltos(links)paraoutrasinformaes.
OsdocumentosvisualizadosatravsdosBrowserssoescritosemHipertextos,utilizandose
umalinguagemespecialchamadaHTML(HyperTextMarkupLanguage).
Atravs de um hipertexto podemos navegar de forma especial atravs de elementos
chamadoslinks,osquaisremetemparaoutrosdocumentosouparapartesdomesmo
documento.
Um documento nohipertexto permite somente que naveguemos em uma seqncia,
percorrendoseucontedoparafrenteeparatrs.
OhipertextonaspginasdaWebfoiexpandidoparaincluirhyperlinksapartirdetexto,de
umafigura,deumelementogrfico,demapasdeimagens,someatmesmoanimaes,
sendodefinidocomainserodessesnovosrecursosdehipermdia.
Para se teruma idia de hipertexto,bastavisualizar osistema de "Ajuda"doMicrosoft
Windows.

1.1.6. LinksouHyperlinks
Linkumpontodeacessoousaltoatumlocalnamesmapastadetrabalhoouemoutro
arquivo,representadopormeiodetextocoloridoousublinhado,deumafigura,deum
elementogrficooudeummapadeimagens.
Vocpodeclicaremumlinkparasaltaratumlocalondeseencontraumarquivoemseu
sistemalocal,paraumcompartilhamentoderedenaWorldWideWebouatparauma
Intranet.

Projeto eJovem Mdulo II: HTML

1.1.7. HomePage
HomePageumconjuntodepginas",documentosdisponveisnaWeb,interligadosentre
si (atravs de links). O termo Home Page tambm usado para designar a "pgina
principal"deumconjuntodedocumentos.Umconjuntode"pginas"tambmchamado
deSite.
Alguns Servidores da Web reservam index.htm como o nome da home page (pgina
principal),enquantooutrosadenominamcomodefault.htm.

1.1.8. Site
Palavraeminglsquesignificalocal,lugar.NaInternet,designaumconjuntodepginas
querepresentaumapessoa,instituioouempresanarede.

1.1.9. Browsers(NavegadoresdaWeb)
Browsers so softwares que leem e interpretam arquivos HTML (Hyper Text Markup
Language)enviadosparaaWorldWideWeb,formataosempginasdaWebeosexibeao
usurio. Navegadores da Web tambm podem executar som ou arquivos de vdeo
incorporadosemdocumentosdaWeb,bastandoterdisponvelohardwarenecessrio.
ExistemBrowsersparatodososgostos.Osmaisutilizados,oInternetExplorereoMozilla
Firefox,vmacompanhadosdeoutrosprogramasparaInternet,comooleitordeCorreio
Eletrnico(email).ExistemoutrasopesdeBrowsers,bastaescolherumdelesepartir
tranquilopelosmares"daInternet.

1.1.10. Protocolo
Protocoloumconjuntoderegrasestabelecidascomoobjetivodepermitiracomunicao
entre computadores. um mtodo de acesso a um documento ou servio atravs da
Internet.DoisprincipaisprotocolosusadossooFileTransferProtocol(FTP)eoHypertext
TransferProtocol(HTTP).

1.1.11. ProtocoloHTTP(HyperTextTransferProtocol)
HTTP (Protocolo de Transferncia de Hipertexto) um protocolo da Internet utilizado
peloscomputadoresligadosWebparasecomunicarem,ativaosnavegadoresdaWebpara
recuperareminformaesdeservidoresdaWorldWideWeb.
OprotocolopermiteaumusuriousarumprogramaclienteparaentraremumURL(ou
clicaremumhyperlink)erecuperartexto,elementosgrficos,someoutrasinformaes
digitaisdeumservidordaWeb.
EndereosURLderecursosHTTPcomeamcomhttp://.

1.1.12. ProtocoloFTP(FileTransferProtocol)
FTP(ProtocolodeTransfernciadeArquivo)umprotocoloquepossibilitaatransferncia
dearquivosdeumlocalparaoutropelaInternet.
Normalmente, os sites tm reas pblicas de FTP, permitindo que os usurios faam

Projeto eJovem Mdulo II: HTML

downloaddeprogramasporesseprocesso.
Protegidoporsenhas,oFTPtambmutilizadoparaatualizar,distncia,siteslocalizados
emempresashospedeiras.
URLsdearquivosemservidoresFTPcomeamcomftp://.

1.1.13. URL(UniformResourceLocatorLocalizadordeRecursosUniforme)
UmdosprincipaisobjetivosdoprojetodaWWWeraodesenvolvimentodeumpadrode
referncia a um item independente de seu tipo (som, filme, imagem, etc.). Para este
objetivofoidesenvolvidoaURL(UniformResourceLocator).
URL (Uniforme Resource Locator, numa traduo literal, Localizador Uniforme de
Recursos)umaseqnciadecaracteresqueforneceoendereoInternetdeumSiteda
WebouumrecursodaWorldWideWeb,juntamentecomoprotocolo(comoFTPouHTTP),
atravsdoqualositeouorecursoacessado.
AparteinicialdoURL(aqueterminacomosdoispontos)indicaqualprotocoloInternet
estsendousado.
Asduasbarrasindicamqueoquevemaseguiroendereodeumservidorvlidoda
Internetoulocalizaosimblica.
(www.xyz.com.br,porexemplo)ouoendereoIPdosite.

1.1.13.1. URLAbsoluto
OURLabsolutoincluiumprotocolo,comohttp",localdarede,almdecaminhoenome
dearquivoopcionais.
Exemplo:http://www.xyz.com.br/treinamento/cursos.htm,umURLAbsoluto.

1.1.13.2. URLRelativo
Emumarefernciarelativaassumesequeamquinaediretriodoitemjestosendo
usados e apenas necessrio indicar o nome do arquivo desejado (ou possivelmente
subdiretrioearquivo).UmURLrelativoincluiumprotocolo.
Exemplo:
O URL relativo Treinamento/Cursos.htm referese pgina Cursos.htm, na pasta
Treinamento,abaixodapastaatual.

1.1.13.3. Endereo
Endereoocaminhoatumobjeto,documento,arquivo,pginaououtrodestino.
Um endereo podeser umURL(Uniforme Resource Locator Localizador Uniforme de
Recursos) ou um caminho de rede UNC (Universal Naming Convention Conveno
Universal para Nomes), o formato padro para caminhos que incluem um servidor de
arquivoderedederealocalqueutilizaasintaxeaseguir:
Exemplo:/servidor/compartilhamento/caminho/nomedoarquivo
Oendereohttp://www.xyz.com.brindicaumURLdoWebSitedaXYZInformticaLtda.

Projeto eJovem Mdulo II: HTML

1.1.13.4. EntendendoumaURL
http://www.xyz.com.br/treinamento/cursos.htm#local
http:// ProtocoloProtocolodaInternetutilizadopeloscomputadoresligadosWeb

paracomunicaremseentresi.
www.xyz.com.br

Nome do Domnio Domnio so as categorias de endereos da


Internetquerepresentampasesoutiposdeorganizao.
wwwSigladeWorldWideWeb,significaRedeMundial
xyz Nomeespecficoquepodeconterumaoumaispalavras,separadasouno, por

hifens(ex.:XYZinformtica),quesimboliza,porexemplo,onomedaempresa,oudeum
produtoespecifico.
com TipodeDomnioIndicaanaturezadoSite.Nocaso,comotratasedeumSitede

umaempresaprivada, ".com" vemdecomercial.OutrosExemplo:.gov(governo)e.org


(organizaessemfinslucrativos).

br SigladoPascompostadeduasletras,significaqueapginaestsituadaemum

computadornoBrasil.Pginasquenopossuemterminaoindicandoopasdeorigem
estosituadasnosEstadosUnidos.OutrosExemplo:.pt(Portugal)e.jp(Japo).
treinamentoDiretrio(pasta)ondeestlocalizadoapgina(arquivo)cursos.htm.

svezes uma URLindica apenasodiretrio(ouoservidor).Nessecaso,oservidor se


encarregadeprocurareenviaroarquivoadequado.
cursos.htm Nomedapginaescritaem HTML requerida(pginasdaWebgeralmente

temterminaoem.htmou.html).
#localApontaparaolocalespecficodentrodapginaqueserexibida.

1.1.14. EndereoIP(EndereodoProtocoloInternet)
amaneirapadrodeidentificarumcomputadorconectadoInternet,damesmaforma
queumnmerodetelefoneidentificaumtelefoneemumaredetelefnica.UmendereoIP
representadoporquatronmerosseparadosporpontoseondecadanmeromenorque
256,porexemplo,192.200.44.69.OadministradordeseuservidorWebouoprovedorde
serviosdeInternetiratribuirumendereoIPaseucomputador.
OtipomaiscomumdeURLhttp://,queforneceoendereoInternetdeumapginada
Web.AlgunsoutrostiposdeURLso:
ftp://

que fornece o local da rede de um recurso FTP (este servio representa o


protocolodetransfernciadearquivonaInternet).
gopher:// que fornece o endereo Internet de um diretrio gopher (representa um

servionogrficodeinformaes,dirigidopormenus).
news://

grupos de discusso ou de notcias (representa o servio de BBS (bulletin


board)organizadoemreasdeinteresseespecial).
mailto:// paraespecificarumendereodeCorreioEletrnicodaInternet(paraenviar

correioeletrnico).

Projeto eJovem Mdulo II: HTML

1.1.15. ISP(InternetServiceProvider)
1.1.15.1. Provedores
OProvedorumaEmpresaouOrganizaoqueoferececonexoparaInternet.Atravsde
umProvedorpodemosteracessoInterneteserviosdehospedagemdeSite.OProvedor
disponibiliza as informaes solicitadas pelos "navegadores" (Browsers) por uma
combinaodecomputadoreprogramasqueformamosservidoressituadoseminstalaes
apropriadas.Nestecaso,oProvedoralugaespaoemumdiscorgido,cujamquinadeve
estarpermanentementeconectadarede,disponibilizandosuaHomePage24horaspor
diaatodososusuriosdaInternet.
Aligaocomoprovedorpodeserfeitaporlinhastelefnicasnormais(conexodiscada)
ouporlinhasespeciais,ligadas24horaspordia(conexodedicada)eainda,atravsde
bandalarga.
Um provedor geralmente oferece vrias funes de aplicaes como World Wide Web
(http),transfernciadearquivos(ftp)egerenciamentodecontedo(armazenamentode
dados).Amaioriadosprovedorestambmdisponibilizacaixapostaleletrnica,"contas"de
emailparaseususurios,juntamentecomosserviosdeacessoehospedagem.

1.1.15.2. SeuSitenaGrandeRede
AodesenvolversuaHomePage,bastatransferirseusarquivosviaFTPparaoProvedor.
Alguns programas especficos podem facilitar o seu Upload, j que o Browser funciona
apenasparabuscadearquivos,enoparaoenvio.OCuteFTPumdosmaisindicados
pelosprovedores,quepermiteumacessototalmentegrficoeinterativoaservidoresFTP.
Mas,semdvidas,existeumexcelente,oInternetNeighborhood.Suainterfacecomumao
doMicrosoftWindowsExplorer,funcionandodemaneirasimples,possibilitandoDownload
eUploaddamquinalocalparaoservidorFTP,transferindoarquivosdeumapastapara
outra.

1.1.15.3. Login
Acesso oprocessodeidentificarseaoentrarnumcomputadorouemumaredede

computadores.Acadaentradana Internet,vocse "loga"(fazologin) emseu Provedor,


colocandonome(username)esenha(password).

1.2. IntroduoLinguagemHTML
Originado do casamento dos padres HyTime (Hypermedia/Timebased Doumnt
StructuringLanguage)eSGML(StandardGeneralizedMarkupLanguage),oHTML,sigla
paraHyperTextMarkupLanguage(LinguagemdeFormataodeHipertexto),linguagem
usada para criar pginas na Web, estabelece como um determinado elemento deve ser
visualizado,nosendoportantoumalinguagemdeprogramao,esim,umalinguagemde
formataodeexibiodetextos,atravsde"comandos"conhecidoscomoTAGs.Emsuma,
HTMLempregadoparadefinirasfunesdosdiferenteselementosdaspginas,como:
textos,fotosouanimaes,queserovisualizadaspeloprogramadenavegao(Browser).

Projeto eJovem Mdulo II: HTML

1.2.1. HyTime(Hyprmedia/TimebasedDocumentStructuringLanguage)
HyTime (ISO 10744:1992) o padro para representao estruturada de hipermdia e
informao baseada em tempo. Um documento visto como um conjunto de eventos
concorrentes dependentes de tempo (udio, vdeo, etc.), conectados por webs ou
hiperlinks.
O padro HyTime independente dospadrese processamento de texto emgeral.Ele
fornece a base para a construo de sistemas hipertexto padronizados, consistindo de
documentosqueaplicamospadresdemaneiraparticular.

1.2.2. SGML(StandardGeneralizedMarupLanguage)
PadroISO8879deformataodetextos:nofoidesenvolvidoparahipertexto,mastorna
seconvenienteparatransformardocumentosemhiperobjetoseparadescreverasligaes.
SGMLnoaplicadodemaneirapadronizada:todososprodutosSGMLtemseuprprio
sistemaparatraduzirasetiquetasparaumparticularformatadordetexto.ssa,sendoesta
umaposturaquedevesertomada.
OdocumentoHTMLpodeserescritoemqualquereditordetextos,desdequeestetenhaa
capacidade de gravlo como cdigo ASCII (American Standard Code for Information
Interchange cdigo utilizado para representar textos quando h computadores
envolvidos),isto,comotextopuro,semformataooucaracteresdecontrole.Podese
usar, portanto, o gedit, kate, kedit nas distribuies linux, ou o Notepad, do Windows.
Podesetambmusareditoresmaismodernos,comooBrOfficeWriterouoWord,sendo
necessrionestecaso,queodocumentosejagravadonoformatotexto,eno,comoum
''.odt"normaldoBrOfficeWriterou.doc"normaldoMSWord.

1.2.3. ConjuntodecaracteresASCII
O conjunto de caracteres de 7 bits do cdigo padro americano para intercmbio de
informaes (ASCII, American Standard Code for Information Interchange) e que
amplamente usado para representar letras e smbolos encontrados em um teclado
americanopadro.OconjuntodecaracteresASCIIigualaos128primeiroscaracteres
(0127)doconjuntodecaracteresANSI.

1.2.4. ConjuntodecaracteresANSI
O conjunto de caracteres de 8 bits, do Instituto Nacional de Padronizao Americano
(ANSI,AmericanNationalStandardsInstitute),queusadopeloMicrosoftWindowseque
possibilita a representao de at 256 caracteres (0255), atravs do teclado. Os 128
primeiroscaracteres(0127)correspondemaletrasesmbolosdeumtecladoamericano
padro.Osoutros128caracteres(128255)representamcaracteresespeciais,comoletras
dealfabetosinternacionais,acentos,smbolosmonetriosefraes.
Todavezquevocacessarumsite(vejatpicoWordWideWeb)pormeiosdedomnios
quando adiciona a URL na barra de endereo, do seu Navegador (Browser), voc ver
pginasnaWEBbemdinmicas,organizadas,animadasecomelatrazendoinformaes,
imagens,sons,vdeoseetc.
Ento,vocdeveseperguntar:Comofeito?Comoelassepropagam?Todasestaspginas

Projeto eJovem Mdulo II: HTML

possuemumcdigofonteescritonumalinguagemchamadaHTML(HyperTextMarkup
Language).
EstemanualtemporobjetivomostrlocomocriareexibirpginasHTML,comoasque
voc ver atravs da WEB. Tais pginas so criadas a partir de arquivos texto ASCII,
contendocaracteresdemarcaodalinguagemHTML.Umavezcriados,estesarquivosso
salvoscomumaextenso.html.Portanto,deveremossalvarnossosexerccioscomesta
extenso.
Jqueentendemosmelhorcomofuncionaainternetemgeral,daremosinicioaocursode
HTML.
TododocumentoHTMLapresentaelementosentreparntesesangulares(<e>).Esses
elementos so as etiquetas (tags) de HTML, que so os comandos de formatao da
linguagem.Amaioriadasetiquetastemsuacorrespondentedefechamento,representada
comumabarra(/):
Issonecessrioporqueasetiquetasservemparadefiniraformataodeumaporode
texto, e assim marcamos onde comea e onde termina o texto com a formatao
especificada por ela. Alguns elementos so chamados vazios, pois no marcam uma
regiodetexto,apenasinseremalgumacoisanodocumento,nohavendoanecessidade
dofechamento:

Todososelementospodemteratributos:
HTML um recurso muito simples e acessvel para a produo de documentos. Nesta
apostila,serpossvelaprendergrandepartedeseuselementos.
Nota:NoexistemprogramasemHTML,poisHTMLnoumalinguagemde
programao,masdeformatao(marcao).Portanto,arigor,noexistem
"programadores"deHTML.

1.3. EdiodeDocumentosHTML
ExistemEditoresHTMLchamadosWYSIWYG(whatyouseeiswhatyougetoquevocv
oquevoctem).Elesoferecemambientedeediocomumresultadofinaldasmarcaes
(poisoresultadofinaldependedobrowser1usadoparavisitarapgina).Algunsbastante
conhecidosso,porexemplo:FrontPageeDreamweaver.
AlmdoseditoresespecficosparaHTML,EditoresdeTextosbastanteutilizados,comoo
Word,entreoutros,permitemaexportaodeseusdocumentosprpriosparaoformato
HTML(menuArquivo,Salvarcomo,Salvar_comoTipo).
UmdocumentoHTML,comoditoanteriormente,normalmenteterextenso.html.Porm,
poderotambmestarnoformato.htm.
Gostariadelembrar,comociteinalinhaacima,queexistemvrioseditoresdeHomePages,
comoporexemplo:oFrontPageExpress,NetscapeComposer,HomeSite,etc.Squena

Projeto eJovem Mdulo II: HTML

ausnciadestesaplicativosesendodesconhecidaaLinguagemdeHyperTextos,HTML,no
poderiacriarsuaspginas.Da,aimportnciadeseconhecerestalinguagem.
ParaestudarmosHTML,usaremoseditoresdetextosimples,como:gedit,kateouBlocode
Notas.PrecisaremostambmdeumBrowser(MozillaFirefoxouInternetExplorer)para
quepossamosvisualizarcomonossapginaestficando.Paranossosexemplos,usareio
MozillaFirefox.TudoBem?Masantes,vamosentendercomoestaspginassocolocadas
paraquetodospossamvernaWeb.

1.4. PublicaodeDocumentosnaInternet(Sites)
Para que uma pgina esteja permanentemente disponvel pela Web, ela precisa ter um
endereofixo,alojadaemumservidor.
Existemvriosprovedoresdeespao(hosting)gratuitosetambmosprovedoresdeacesso
geralmente oferecem espao para os sites de seus assinantes. Sites com fins lucrativos
geralmentesohospedadosemprovedoresdeespaopagos.
Definidaahospedagem,bastaenviarparaoprovedorosarquivosdeseusite(viaFTP2ou
por uma pgina de envio no prprio provedor de espao) e suas pginas j estaro
disponveisparavisitasnomundotodo.
Jtendoumaidiadosprincipaisconceitos,vamoscomearaproduzirnossaspginas.

1.5. DocumentoHTMLBsicoeseusComponentes
AestruturabsicadeumapginaHTMLmostradanaabaixo.Observequeaconstruo
depginasexigeousodasTAGS:

Com certeza, voc observou melhor o que foi dito anteriormente, que as TAGs
normalmenteestaroantesedepoisdealgo,ondeestealgopodeseralgumtexto,ououtro
conjuntodeTAGsqueestoentreestasduasTAGS.
Asetiquetas(tags)HTMLnosocasesensitive,ouseja,asTAGSnofazemdiferena
entre letras maisculas ou minsculas. Tanto faz escrever, por exemplo, <HTML>,
<Html>,<html>,<HtMl>,etc.
Onde:
PrincipaisTAG's

<html>
<head>
<title>
<body>

Marcaoincioefimdodocumento
Marcaoincioeofimdocabealho
Marcaoinicioeofimdottulo
Marcaoincioeofimdodocorpodapgina

Projeto eJovem Mdulo II: HTML

10

OdocumentoHTMLbsicodividese,principalmente,emduasTAGSprincipaisdasvistas
acima,sendoelas:<HEAD>e<BODY>.

1.5.1. <HEAD>
EstaTAGcontminformaessobreodocumento.Oelemento<TITLE>,porexemplo,
defineumttulo,quemostradonoaltodajaneladobrowser.
Exemplo:
TododocumentoWWWdeveterumttulo,ondeprincipalmenteessettuloreferenciado
embuscaspelarede,dandoumaidentidadeaodocumento.
AoadicionarumapginaaosseusFavoritos(Bookmarks),ottulodapginasetornaa
ncoradeatalhoparaela.Portanto,esteumdosmotivospeloqualsesugereque,aodar
umttuloaumapginaelesejasugestivo,evitandosettulosgenricos,como"Introduo",
porexemplo.Ottulotambmbastantesignificativoparaalistagemdeumapginanos
resultadosdepesquisasnossitesdebuscadaInternet.

1.5.2. <BODY>
Tudoqueestivercontidoem<BODY>(CorpodoTexto)sermostradonajanelaprincipal
do browser, sendo apresentado ao leitor. No corpo do texto pode conter, por exemplo:
imagens,vdeos,sons,cabealhos,pargrafos,listas,tabelas,linksparaoutrosdocumentos,
formulrios,animaes,entreoutros.
Exerccio1:
Comoquefoivistoatagora,vamoscriarumapginaHTMLsimples.
Passo

1: Abrir o Ambiente de Desenvolvimento WEB (Iniciar>Desenvolvimento


WEB>QuantaPlus)
Passo2:Digiteocdigoexatamentecomoestabaixo:

Passo3: Apsdigitlo,salvaremumapasta(Crieumapastanocomputadorcomseu
nome, e dentro dela outra pasta com o nome Minhas pginas HTML ) com o nome
Minha_primeira_pgina.html
Comosalvar:
ParaSalvar,simples:Bastaprimeiramenteclicarnomenu:ArquivoSalvar.Localizase
ondeestsuapastaessalvarquandoestiverdentodeMinhaspginasHTML

Projeto eJovem Mdulo II: HTML

11

Para ver o resultado deste exemplo, abra o arquivo com o Mozilla Firefox ou com o
Konqueror.

Percebaqueexisteumapartedotextoquenomostradaequeexisteumtextoapsatag
title:<!TtulodoDocumento>.Istoumcomentrioenosermostradonapgina.
Podero existir, dentro de cada tag, atributos para implementar. Veremos ento abaixo
algunsdestesatributosdaTAG<BODY>.

1.5.2.1. Atributosde<BODY>
DentrodaTAG<BODY>possveltervriosatributosepodemosdefinilos,porexemplo,
ascores:paraostextos,linkseparaofundodaspginas,bemcomoumaimagemdefundo
(marcadgua):
Onde:

BGCOLOR
TEXT
LINK
ALINK
VLINK
BACKGROUND

AtributosdaTAG<BODY>
BackgroundColor(oucordefundodapgina).Acorpadro
branca.
Cordostextosdapgina(padro:preto).
Cordoslinks(padro:azul).
Cordoslinksquandoacionados,clicados(padro:vermelho).
Cordoslinksdepoisdevisitados(padro:azulescuroouroxo).
Caminhoparaafiguradefundo.

NaTAG<BODY>acima,percebemosque,porexemplo,nobgcolortemos#rrggbb.Seus
valoressodadosemhexadecimal,equivalentesacoresnopadroRGB(Red,Green,Blue).
Existemtabelasdecorescomessesvalores,masgrandepartedoseditoresjofereceuma
interface bem amigvel atravs da qual escolhemos as cores desejadas, sem nos
preocuparmoscomnmerosesdrxulos,taiscomo#FF80A0.
BrowsersqueseguemadefiniodeHTML3.2emdiante,tambmaceitam16nomesde
cores, tirados da paleta VGA do Windows por exemplo, podemos escrever:
BGCOLOR="BLUE".

Projeto eJovem Mdulo II: HTML

12

Porm,browsersmaisantigosnoapresentaroascoresindicadas.
BACKGROUND:IndicaaURLdaimagemaserreplicadanofundodapgina,comouma
marcaimagemdefundo.
Osignificadodolink,alinkevlink,noserodiscutidosagora,masestasTAGSserviro
paraousodelinks,ouseja,atalhoparaoutraspginas,oqueservistoposteriormente.
Nota:Os16nomesdecoresaceitosdesdeaverso3.2daHTMLsoestes:aqua,
black,blue,fuchsia,gray,green,lime,maroon,navy,olive,purple,red,silver,
teal,white,yellow.
Exerccio2:
Abranovamenteoeditordetextoedigiteocdigoabaixo:
Salvecomonomesegunda_pagina.html

O resultado da pgina poder ser feito no prprio programa ou como visualizamos o


primeiro exerccio. Para visualizar pelo programa, clique no cone em destaque, como
mostradonaimagemabaixo:

Agora,vamosVisualizarpeloKonqueror,comofoivisualizadooprimeiroexerccio.Vejao
resultado:

Projeto eJovem Mdulo II: HTML

13

Opa!Aconteceualgoerrado!Osacentosviraramcaracteresmalucos?
Bom,precisofalarparaonavegadorqualcodificaoeleestusando.Paraquenosso
texto seja mostrado normalmente, iremos criar uma nova pgina e colocar nossas
informaesnelaparasaircorretamente.
Primeiramente,vamoscriarumnovoarquivo:
CliquenoconeKommanderQuickStartDialog(Figuraabaixo).

Ir abrir uma janela (Imagem ao lado). Como


apresentadonela,desmarqueasopesMostrar
DTD e Meta Quanta. Confirme clicando em
OK,apsestasalteraes.
Aparecer um documento com a estrutura que
vimosanteriormente,mascomumanovidade,a
TAG

NoprecisoentendermosafundosobreestaTAGagora,poisoimportantesaberqueela
resolvernossoproblema.
Agora,comestaestruturamontada,percebamosquenorodapdapginaexisteapgina
quesalvamosestenovodocumento.

Combasenisso,cliqueemSegunda_pgina.htmlecopieoqueestdentrodatag<title>e
oqueestdentrodatag<body>,efaaalteraonotexto,comomostraafiguraabaixo:

SalvecomoSegunda_pgina_modificada.html,evolteparavercomoficouestapgina.
Viuadiferena?

Projeto eJovem Mdulo II: HTML

14

Concordoquemuitochatoficartodavezdigitandotodoocdigoprincipal.Sabemos
ento que, para nossa pgina sair mais interessante, o uso da TAG <meta> para a
codificaomuitoimportante.Portanto,vamoscriarumnovodocumento,comofeitono
exemploanterior,evamosfazeroExerccio3,jqueelanosdaestruturaprincipalda
nossapgina.
Exerccio3:
Algumasvezesmelhorcolocarnanossapginaumaimagemdefundo,nolugardeuma
cordefundo,noacha?Ento,quetalagoracolocarumaimagem,aoinvsda corde
fundo?
Vamosdigitaroarquivoparadepoisexplicarcomocolocaraimagem.Deixeoseuarquivo,
comomostraabaixo:

Agora, teremos que ir buscar na internet alguma imagem para colocar como plano de
fundo.
QuetalescolherumaimagemnoFirefox,porexemplo?
Apsescolhidaaimagem,salveadentrodapastaqueestaronossaspginasHTML,no
nossocaso,dentrodeMinhasPginasHTML.Escolhemosaimagemcomonomefirefox
wallpaper.jpg.
Portanto,colocaremos,domesmojeitoquesalvamos,onomedoarquivodentrodaTAG
<body>,comomostraabaixo:
Salve com o nome Segunda_pagina_com_background.html, e faa a visualizao
novamente.Vejaoresultado:

Projeto eJovem Mdulo II: HTML

15

Nota:Devesetercuidadonahoradeescolherotipodeplanodefundooucorde
fundo,pois,porexemplo,senestecasotivessemosusadoumplanodefundocom
cormaisclara,provavelmenteficariadifcilenxergarasletrasdotexto.

importantequemesmoquesuapginatenhaumaimagemdefundo,ela
tambmtenhaumacordefundo.Semprecoloqueumacordefundoparecida
comodoplanodefundo,poispodeserqueporalgummotivoaimagemnoseja
carregada.Ento,oLeitordasuapginapoderaindasim,mesmono
visualizandoaimagem,verotextoescrito.

1.6. Cabealho(Ttulos)<Hn></Hn>
HseisnveisdecabealhosemHTML,de<H1>a<H6>:

Essescabealhossomostradosnobrowserdaseguinteforma:

Exerccio4:
Vamos agora utilizar a pgina do exerccio 3, salvandoa como
Pagina_com_cabealho.html.Observeabaixoefaaasalteraesnecessrias:

Salve novamente, mas como a pgina j tem um nome, necessrio s atualizar as


alteraes.
Aseguir,vamosveralgomaissobreoscabealhos.

Projeto eJovem Mdulo II: HTML

16

Aninhamentodecabealhos
Os cabealhos no podem ser aninhados (Colocados um dentro do outro), pois a
formataopodeproduziralgumresultadoprximoaodesejado.Observeabaixoocdigo
e,logoemseguida,comoficou:

Masomaiscomumqueosbrowsers"entendam"essaformataocomosendo:
Ouseja,comoseestivessefaltandoumaetiquetadefechamentode<h2>antesde<h1>
efaltandoumaaberturade<h2>depoisdofechamentode<h1>,oferecendooseguinte
resultado:
OseditoresWYSIWYGnaturalmentenopermitemoaninhamentodecabealhos.
Alinhamentodecabealhos
Oscabealhostmatributosdealinhamento:

Comoresultado:

1.7. Fonte<FONT></FONT>
Atagora,construmosumapginarelativamentesimples.Percebemosentoqueotexto
todoficoudeumacorsatomomento.Masserqueapginaspoderficarassim?No
poderamoscodificarotipodefonte,nemotamanho,muitomenosacor?
Claroqueissopossvel!EparaissoqueserveaTAG<FONT>

Para utilizar as mudanasacima,devemos complementar aTAG <FONT> comosseus


atributos,comoporexemplo:

Projeto eJovem Mdulo II: HTML

17

Onde:
SIZE
FACE
COLOR

ArtibuotosdaTAG<FONT>
Determinaotamanhodafonte.Estaopoespecificaotamanhodafonte
utilizada;
Determinaotipodefontequeserusado.Senenhumafonteforcolocada,ser
usadaafontepadro.Estaopopermitequesejadefinidaumafontediferente
paraotexto;
Determinaacordaforte.Estaopoespecificaacordotexto.Seuvalorpode
serespecificadopelocdigohexadecimalou,paraalgumascores,peloseu
nomeemingls(blue,black,whiteetc.).

Abaixo,vemosadiferenadasduasTAGscitadasacima:

Veremosumpoucosobrecadaumdosatributos,comeandopelotamanho.
ATAGacimaproduzirapalavraTextocomotamanhonumero3(tamanhopadro).
Estecomandopermitequeoautordodocumentoaltereotamanhodasletrasemtrechos
especficosdetexto.Otamanhobsicodostextos3(padro).Podemosindicartamanhos
relativosaesse,porexemplo:

Digiteosexemplosevejaadiferenaentreeles.
Paraaseleodasfontes,usaremosoatributoFACE:

Digiteevejaoresultado.Descubraasoutrasfontesqueexistemefaaotextotambm.
Ascoressointroduzidastambmatravsdoelemento<FONT>quandoqueremosque
algumapartedotextofiquediferentedaformapadro,oudaquefoidefinidanaTAG
<BODY>.UsasetambmosistemaRGB,paracores(damesmaformaquevimospara
coresanteriormente),comomostradonoexemploaseguir:
Assim,umtrechodetextopodeterumacordiferentedadefiniogeraldecores,feita
atravsdosatributosde<BODY>.
Maisexemplos:

Projeto eJovem Mdulo II: HTML

18

Perceba, como foi dito anteriormente, que tanto faz colocar em letras maisculas ou
minsculas,poisonavegadorvaiinterpretarcorretamente.

1.8. Estilosdetexto
AtagoravimosaestruturaprincipaldoHTML,comomodificaracordetodootexto,como
colocarumplanoefundoecomoalterarpartesdotexto,masesequisermoscolocar,por
exemplo,umapalavraemnegritoesublinhado,comoottulo?Sim,issopossvel,porisso
vamosestudarosestilos.
EstilosFsicos
<B>
<I>
<U>
<STRIKE>ou
<S>
<BIG>
<SMALL>
<SUB>
<SUP>

Negrito
Itlico
Sublinhado.
Fraseriscada.
Fonteumpoucomaior.
Fonteumpoucomenor.
Fraseemestilondice,comoemH2O,porexemplo.
Fraseemestiloexpoente,comoemKm2,porexemplo.

OutrasTAGsdeformatao
TemosoutrasTAGsque,dependendonoNavegador,podemounofuncionarcorretamente:
HTMLofereceoutrasTAGsparaformatao:
<PRE>
<BLOCKQUOTE>
<ADDRESS>
<CODE>.
<STRONG>
<DFN>
<EM>
<CENTER>

OutrasTAGsdeFormatao
Apresentaotextonamesmamaneiraemquefoidigitado,
mantendoquebrasdelinhaetabulaes
usadoparacitaeslongas
UsadoparaformatarendereosdeEMailerefernciasaautoresde
documentos,comoporexemplo:
Utilizadapararelacionarocdigofontedeprogramas.Geralmente
servisualizadoemfonte
monoespaada.
Utilizadaparadarnfaseespecialaumtrechodetexto.
Geralmenteservisualizadoemfonte
Utilizadaparadestacarumdefinio.Geralmenteservisualizado
emfonteitlica.
Utilizadoparasublinharpartedotexto
Utilizadaparacentralizarumtextonatela.

A TAG <PRE> permite criar textos prformatados, semelhantes aos produzidos em


editores de texto. Espaos em branco, marcas de tabulao e quebras de linha so
reconhecidosecolocadosnosrespectivospontosdeinsero.Textosprformatadosso
representadospelafontemonoespaada,definidapelousurio.
Uma vez que <PRE> mantm o texto original, no se deve forar espaos com essa
marcaodentrodeoutramarcaoquejapresentetabulaeseespaosespecficos.
Dentrodeumtextoprformatado:

Projeto eJovem Mdulo II: HTML

19

permitido utilizar links e ncoras. Entretanto, no existe certeza de como o


browserinterpretaressasmarcaes.

ATAG<P>nodeveserutilizado.

Nodevemserusadosoutroscomandosdeformatao,taiscomoosdelistasede
cabealhos.

Observeabaixo:

Queresultarianaseguinterepresentaonatela:

ATag<ADDRESS>formatainformaes,taiscomo:oendereo,aassinaturaeaautoria
de quem publicou a pgina. Normalmente, estes dados so colocados no final de um
documentoe,geralmente,serovisualizadosemitlico.Exemplo:

Oresultadoseria:

20

Projeto eJovem Mdulo II: HTML

Exerccio5:
Produzaumapginautilizandoosconhecimentosadquiridosatagora.Faaumapgina
comse fosse umcurrculoseu, colocando algunsdadospessoais:o quegosta (Tipo de
msica,porexemplo).Chameademeus_dados.html.

1.9. Pargrafo<P>
Parasepararblocosdetexto,usamosoelemento<P>,porexemplo:
queproduzoseguinte:

Combinandopargrafosequebrasdelinhas(Veremosembreve),temosporexemplo:

Oresultadodamarcaoacima:

ATAG<P>tematributodealinhamentosemelhanteaoscabealhos,comonosexemplosa
seguir:

Comovimosanteriormente,podemostambmalinharesquerda(align=left),quej
padroetambmdireita(align=right).
Exerccio6:
Pegueapginameus_dados.htmleimplementecomestesconhecimentosdepargrafos.
Salveapgina,antesdemodificar,comomeus_dados_modificados.html

Projeto eJovem Mdulo II: HTML

21

1.10. Quebradelinha<BR>
Quandoqueremosmudardelinha,usamosoelemento<BR>.Issosnecessrioquando
queremosumaquebradelinhaemdeterminadoponto,poisosbrowsersjquebramas
linhasautomaticamenteparaapresentarostextos.
Comsucessivos<BR>,podemosinserirdiversaslinhasembranconosdocumentos.Esse
elemento tem um atributo especial, que ser apresentado no item sobre insero de
imagens.

1.11. Linhashorizontais<HR>
A TAG <HR> insere uma linha horizontal que tem diversos atributos, oferecendo
resultadosdiversos.
Exerccio7:
Para exercitar, atravs do meus_dados_modificados.html, implemente as linhas
horizontaisdamelhorformapossvel.

1.12. HiperTexto(Hyperlink)<A>
Agora,teremosaoportunidadedeinterligartodasasnossaspginasatravsdoshyperlinks.
ComHTMLpossvelfazermosligaesdeumaregiodetexto(ouimagem)aumoutro
documento(ouaoutrapartedoprpriodocumento).Vocjdevetervistoemalguma
pginainternetexemplosdessasligaes:obrowserdestacaessasregieseimagensdo
texto, indicando que so ligaes de hipertexto tambm chamadashypertext links ou
hiperlinks,ousimplesmentelinks,ondenormalmente,omouseviraumamozinhae,ao
clicarchamamos(abrimos)umoutrodocumento,pginaweboufiguraporexemplo.
Parainserirumlinkemumdocumento,utilizamosaetiqueta<A>,daseguinteforma:

Onde:

arquivo_destino oendereododocumentodedestino,dapginaouimagem
quequeremosabrir.
ncora otextoouimagemqueservirdeligaohipertextododocumento,
sendoapresentadoparaodocumentodedestino.

Atributos
ATAG<A>temvriosatributosquesoutilizadosdeacordocomaaoassociadaaolink.
Osmaisusadossoapresentadosaseguir:
HREF

Indicaoarquivodedestinodaligaodehipertexto.

TARGET

Indicaoframeemquesercarregadooarquivo_destino.Maioresdetalhesna
seosobreframes.

NAME

Marcaumindicador,isto,umaregiodeumdocumentocomodestinode
umaligao.

Projeto eJovem Mdulo II: HTML

22

1.12.1. Caminhos(usodeLinks)
Oslinkspodemestarindicadoscomocaminhosrelativosouabsolutos.

1.12.2. CaminhoRelativo
Ocaminhorelativopodeserusadosemprequequeremosfazerrefernciaaumdocumento
armazenadonomesmoservidordodocumentoatual.
Atravs do campo de endereos do browser, possvel identificar se um documento
(pgina)que est sendo visualizado est dentro dealgumdiretrio (pasta).Como,por
exemplo,seestivermosemumbrowseracessandoapginadaFACCATevemososeguinte
endereo: http://www.faccat.br/apostilas/apostila_de_informatica.html. O que podemos
concluir que o documento que est sendo visualizado no momento, chamado
apostila_de_informatica.html, est localizado dentro de um diretrio (pasta) chamado
apostilasdoservidorwww.faccat.br.
Ento,paraescrevermosumlinkdestedocumento(apostila_de_informatica.html)paraum
documentochamado(doc.html),queestlocalizadonodiretrio/apostilas/documentos/,
domesmoservidor(www.faccat.br),tudoqueprecisamosfazerescrever:
<AHREF="documentos/doc.html">ExemplodeCaminhoRelativo</A>
Para usar links com caminhos relativos preciso, portanto, conhecer a estrutura do
diretriodoservidornoqualestamostrabalhando,poisdevemosindicartodoocaminho
ondeestodocumentoaqueestamosnosreferindonolink.Quandohalgumadvida,o
melhorusarocaminhoabsoluto.

1.12.3. CaminhoAbsoluto
Utilizamosocaminhoabsolutoquandodesejamosreferenciarumdocumentoqueestejaem
outroservidor,porexemplo:
<AHREF="http://www.faccat.br">FACCATFaculdadesdeTaquara</A>
QueofereceumlinkFACCATFaculdadesdeTaquaraqueaoserclicadocomomouse
abrirapgina,cujoendereo:http://www.faccat.br.
Comamesmasintaxe,possvelescreverlinksparaqualquerservidordeinformaesda
Internet.

1.12.4. Indicadores(usodeLinks)
Comofoiditoanteriormente,oatributoNAMEpermiteindicarumtrechodedocumento
comopontodechegadadeumaligaohipertexto.
Aformatao:
<ANAME="inicio">Indicadores(usodelinks)</A>fazcomqueancoraIndicadores
(usodelinks)sejaodestinodeumlink.
Seescrevermos:
<AHREF="#inicio">TopodoDocumento</A>,teremosumaligaohipertextopara
umtrechodestemesmodocumento.

23

Projeto eJovem Mdulo II: HTML

Exerccio8:
Vamos agora treinar os indicadores. Vamos fazer uma pgina sobre as ferramentas
estudadasataqui. Ouseja,elaboreumpequenotextosobre:Inkscape,Gimp,BrOffice.
Faanoinciodapginaumlinkparacadaumdoscontedos.Eemcadacontedo,da
opoparairaotopo.Vejacomovaifuncionarisso.SalvecomoFerramentas_Livres
Exerccio9:
Agora,vamoscriarlinksentresuaspginascriadas.Crieumapginachamadaindex.html
comoslinksdetodasaspginascriadasatagora.Sepreferir(oqueimportante),em
cadapginacrieosmesmoslinksparaoacessomaisrpido.

1.13. Listadecaracteres
HTML permite que caracteres especiais sejam representados por sequncias de escape,
indicadasportrspartes:um&inicial,umnmerooucadeiadecaracterescorrespondente
aocaracteredesejado,eum;final.
QuatrocaracteresASCII<,>,e&tmsignificadosespeciaisemHTML,esousados
dentrodedocumentos,seguindoacorrespondncia:

1.13.1. CaracteresAcentuadosnoPortuguseespeciais

&aacute;
&acirc;
&eacute;
&iacute;
&otilde;
&uacute;
&ccedil;

&Aacute;
&Acirc;
&Eacute;
&Iacute;
&Otilde;
&Uacute;
&Ccedil;

&atilde;
&agrave;
&ecirc;
&oacute;
&ocirc;
&uuml;

&Atilde;
&Agrave;
&Ecirc;
&Oacute;
&Ocirc;
&Uuml;

1.13.2. CaracteresEspeciais
e aspasduplas
&ldquo;e&rdquo;
e aspassimples
&lsquo;e&rsquo;
e aspasangularessimples &lsaquo;e&rsaquo;
e aspasangularesduplas &laquo;e&raquo;
espao
&nbsp;
& ecomercial
&amp;
> maiorque
&gt;
< menorque
&lt;
acentocircunflexo
&circ;
acentotil
&tilde;
acentotrema
&uml;
acentoagudo
&cute;
cedilha
&cedil;
" aspasduplas
&quot;
pargrafolegal
&sect;

espadas
&spades;
paus
&clubs;
ordenalmasculino &ordm;
ordinalfeminino &ordf;
travessoen
&ndash;
travessoem
&mdash;
hfenoculto
&shy;
macron
&macr;
reticncias
&hellip;
barravertical
&brvbar;
marcador(bullet) &bull;
pargrafo
&para;
copas
&hearts;
ouros
&diams;

24

Projeto eJovem Mdulo II: HTML

1.13.3. CaracteresComerciais

copyright
marcaregistrada
trademark
libraesterlina

&copy;
&reg
&trade;
&pound;

centavo
euro
iene(yen)
smbolomonetrio

&cent;
&euro;
&yen;
&curren;

1.13.4. CaracteresMatemticoseLgicos

>
<

elevadoaum
&sup1;
aoquadrado
&sup2;
aocubo
&sup3;
ummeio
&frac12;
umquarto
&frac14;
trsquartos
&frac34;
maiorque
&gt;
menorque
&lt;
somatrio
&sum;
PI
&prod;
raizquadrada
&radic;
infinito
&infin;
quaseigual
&asymp;
Aprox.igual
&cong;
proporcional
&prop;
idntico
&equiv;
parterealdonmero &real;
minuto
&prime;
ngulo
&ang;
perpendicular
&perp;
Nabla
&nabla;
somadireta
&oplus;
produtodevetor
&otimes;
Alef
&alefsym;
produtovazio
&oslash;
produtovazio
&Oslash;
existe
&exist;
qualquer
&forall;
vazio
&empty;

nolgico

&not;

elgico
oulgico

&and;
&or;

maisoumenos
&plusmn;

sinaldesubtrao
&minus;

sinaldemultiplicao
&times;

sinaldediviso
&divide;

Asterisco
&lowast;

barradefrao
&frasl;

pormil
&permil;

sinaldeintegral
&int;

Diferente
&ne;

menorouigual
&le;

maiorouigual
&ge;

consequentemente
&there4;

Ponto
&sdot;

pontodomeio
&middot;

diferenaparcial
&part;

parteimaginriadonmero &image;

segundo
&Prime;

grau
&deg;

elementode/pertencea
&isin;

nelementode
&notin;

Interseo
&cap;

Unio
&cup;

subconjuntode
&sub;

superconjuntode
&sup;

subconjuntodeouiguala &sube;

superconjuntodeouiguala &supe;
e setassimples
&uarr;e&darr;

setasimples
&harr;
e setasduplas
&lArr;e&hrrr;
&uArr;e
e setasduplas
&dArr;

setadupla
&hArr;
e teto(esquerdoedireito)
&lceil;e&rceil;

25

Projeto eJovem Mdulo II: HTML

retornodecarro

e setassimples

&crarr;

piso(esquerdoedireito)

&lfloor;e
&rfloor;

&larr;e
&rarr;

losango

&loz;

1.13.5. OutrosAcentoseCaracteresEspeciais

&ntilde;
&auml;
&euml;
&iuml;
&icirc;
&ouml;
&ugrave;
&yacute;
&aelig;
&dagger;
&thorn;
&sect;

&Ntilde;
&iexcl;
&iquest;
&Auml;
&aring;
&Aring;
&Euml;
&grave;
&Egrave;
&Iuml;
&igrave;
&Igrave;
&Icirc;
&ograve; &Ograve;
&Ouml;
&ucirc;
&Ucirc;
&Ugrave; &yuml;
&Yuml;
&Yacute; &oelig;
&OElig;
&AElig;
&scaron; &Scaron;
&Dagger; &eth;
&ETH;
&THORN; &szlig;
&micro;
&fnof;

1.13.6. CaracteresGregos

&alpha;
&delta;
&eta;
&kappa;
&nu;
&pi;
&sigmaf;
&Phi;
&Omega;
&gamma;
&zeta;
&iota;
&mu;

&Alpha;

&Delta;

&Eta;

&Kappa;

&Nu;

&Pi;

&tau;

&chi;

&thetasym;
&Gamma;

&Zeta;

&Iota;

&Mu;

&beta;
&epsilon;
&theta;
&lambda;
&xi;
&rho;
&Tau;
&Chi;
&upsih;
&omicron;
&sigma;
&Upsilon;
&Psi;

&Beta;
&Epsilon;
&Theta;
&Lambda;
&Xi;
&Rho;
&upsilon;
&psi;
&piv;
&Omicron;
&Sigma;
&phi;
&omega;

Projeto eJovem Mdulo II: HTML

26

1.14. TabeladeCoresHexadecimal

1.15. Imagens<IMG>
A TAG <IMG> insere imagens que so apresentadas junto com os textos. E segue a
seguinteforma:

UmatributoSRCdeveestarpresente,ondeURL_imagemoURLdoarquivoquecontma
imagemquesequerinserir. Podeserreferenciadaumaimagemqueestejaemumoutro
servidor(oque,logicamente,noconveniente).

Projeto eJovem Mdulo II: HTML

27

Assim,escrevendo:
<IMGSRC="nome_da_figura.extenso">
ou,seelaestiverdentrodeumapastanomesmoservidor:
<IMGSRC="nome_da_pasta/nome_da_figura.extenso">
Porexemplo,sequisermosinserirnapginaumaimagemchamadaarvore.giflocalizadano
mesmoservidorenamesmapasta,atagseriaassim:
<IMGSRC="arvore.gif">
AsimagensusadasnaWeb,normalmentesoarmazenadasemarquivoscomasseguintes
extenses:.gif,.jpg(ou.jpeg),.png,.bmp.
AtributosBsicosdeImagem:

ALT

Indicaumtextoalternativo,descrevendobrevementeaimagem,que
apresentadonolugardaimagemnosbrowserstexto,ouquandosedesabilitao
carregamentodeimagensembrowsersgrficos.recomendvelqueesteja
semprepresente.Tambmapareceraopassaromousesobreaimagem.
<IMGSRC="URL_imagem"ALT="descrio_da_imagem">
Dessaforma:
<IMGSRC="newred.gif"ALT="Novo!!!">

Atributosdedimensodaimagem,empixels.GrandepartedoseditoresHTML
colocaautomaticamenteosvaloresdestesatributos,quandoindicamosa
inserodeumaimagem.
<IMGSRC="URL_imagem"ALT="descrio"WIDTH="largura"
WIDTHe HEIGHT="altura">
HEIGHT Umadasvantagensdeseusaressesatributosqueobrowserpodemontarmais
rapidamenteaspginas,porsaberdeantemooespaoquedeverser
reservadoaelas.

Quandoumafrasemarcadacomoncoradeumlink,elaseapresenta
sublinhada;quandoumaimagemfazasvezesdencora,ganhaumaborda,que
indicasuacondiodelink.
Porm,porquestesdeapresentao,nemsempreinteressatermosessaborda
aoredordaimagem.Assim,comoatributoBORDER,podemoscontrolaresse
detalhe.
Sequisermosumabordamaislarga:
<AHREF="URL"><IMGSRC="imagem"ALT="descrio"BORDER=4>
BORDER </A>
Sequisermosumaimagemsemborda:
<AHREF="URL"><IMGSRC="imagem"ALT="descrio"BORDER=0>
</A>
Essabordapodeserapresentadatambmemimagensquenosoncorade
links.Bastaaplicar,porexemplo,aformatao:
<IMGSRC="figura1.gif"ALT="MinhaFoto"BORDER=2>

Projeto eJovem Mdulo II: HTML

ALIGN

28

<IMGSRC="imagem.extenso"ALT="descrio"
ALIGN=alinhamento_desejado>
Existemtambmatributosdealinhamentoqueproduzemosseguintes
resultados:
ALIGN=TOPAlinhaotextoadjacentecomotopodaimagem.
ALIGN=MIDDLEAlinhaotextoadjacentecomomeiodaimagem.
ALIGN=BOTTOMAlinhaotextoadjacentecomapartedebaixodaimagem.
ALIGN=RIGHTAlinhaimagemdireita,eoquehouveraoredorapartirdo
topodaimagem.
ALIGN=LEFTAlinhaimagemesquerda,eoquehouveraoredorapartirdo
topodaimagem.

Paraterduasimagens,umaemcadamargem,numamesmalinha,escreva:

entreasimagens!
Istoresultaem:
Eoresultadoficarparecidocomoabaixo:

Umdetalhesurgidocomoalinhamentodeimagensfoianecessidadedeseliberarotexto
dessealinhamento,ouseja:
Suponhamos um texto mais ou menos curto, que desejamos colocar com a imagem
ilustrativa,masgostaramosqueestetrechojestivesseabaixodaimagem!Deacordocom
ocomprimentodaprimeirafrase,noseriapossvelusaroalinhamentoTOP.
Paraconseguirisso,serianecessrioincluirdiversos<BR>consecutivos,inserindolinhas
embranco:mesmoassim,oresultadofinalpoderiaserbempoucoelegante.Surgiu,ento,
oatributoCLEARpara<BR>.
Comesseatributo,podemos,porexemplo,terumtextoposicionadonopontoemquea
margem direita fica livre, com <BR CLEAR=RIGHT> ou no ponto em que a margem
esquerdaficalivre,com<BRCLEAR=LEFT>.
Dessamaneira,podemoscontrolarbemaposiorelativadostextos.
Tambm,podeseposicionarotextonopontoemqueambasasmargensestolivres.Isso
conseguidocom<BRCLEAR=ALL>
E,assim,vimostudosobrequebrasdelinhadepoisdeimagens!

1.15.1. MoldurasdeImagem
Para melhorar ainda mais a apresentao das imagens junto com os textos, foram
desenvolvidosatributosdemoldura.Estesatributosdefinemoespaoverticalehorizontal
deixadoentreasimagenseostextoscircundantes:
<IMGSRC="imagem.extenso"VSPACE=espao_vertical>

29

Projeto eJovem Mdulo II: HTML

<IMGSRC="imagem.extenso"HSPACE=espao_horizontal>
Outrosexemplos:
<IMGSRC="foto.gif"WIDTH="148"HEIGHT="95"ALIGN=leftVSPACE="30">
<IMGSRC="foto.gif"WIDTH="160"HEIGHT="71"ALIGN=rightHSPACE="30">
Abaixo,temosumexemplocomosdoisatributos,atravsdaformatao:
<IMG SRC="foto.gif" ALIGN="LEFT" WIDTH="63" HEIGHT="68" HSPACE="20"
VSPACE="20">

1.16. Tabelas<TABLE>
AformataodetabelasfoiadotadabemantesdesuainclusonadefiniodeHTML.A
manipulaodetabelas,mesmoemeditores,trabalhosa.Amaiordiferenaentretabelas
emHTMLeemeditorescomooMSWord,entretanto,ofatodastabelasemHTMLserem
definidasapenasemtermosdelinhasenodecolunas.Masissoserpercebidonodecorrer
destecaptulo.
AstabelasforamumagrandeconquistaparaosautoresdedocumentosparaaWeb.Com
elas,possveltermospginasorganizadasemcolunas,sendoumadelasreservadaaos
linksdenavegaodentrodecadaseo.
Tabelas implementamumconceito importante de layout:asgrades,segundo asquais
organizamostextoseilustraesdemaneiraharmoniosa.
Como j foi possvel perceber, as tabelas contm: textos, listas, pargrafos, imagens,
formulriosevriasoutrasformataes,inclusiveoutrastabelas.NovasversesdeHTMLe
debrowserspopularesvmacrescentandodiversosatributosstabelas,enossoobjetivo
aquisaberlidarcomamaioriadessesrecursosdisponveis.

1.16.1. Elementosbsicosdetabelas
Abasedeumatabeladeterminadapor<TABLE>...</TABLE>,quedelimitaumatabela.
UmatributobsicoBORDER,queindicaaapresentaodaborda.
<TABLEBORDER="borda">...</TABLE>
Ttulos,linhaseelementos
<CAPTION>...</CAPTION>
Defineottulodatabela
<TR>...</TR>
Delimitaumalinha
<TH>...</TH>
Defineumcabealho(dentrode<TR>)
<TD>...</TD>
Delimitaumelementoouclula(dentrode<TR>)

Veremosagoraumexemplodetabelasimplescomborda.

Projeto eJovem Mdulo II: HTML

30

possvel englobar colunas e linhas, atravs dos atributos: COLSPAN (para colunas) e
ROWSPAN(paralinhas):

Neste exemplo, vemos que o cabealho Colunas 1 e 2 compreende duas colunas


(COLSPAN=2);ocabealho3linhascompreende,porsuavez,3linhas(ROWSPAN=3).
Paraumapginasemborda,podemostratardeduasformas:
<TABLEBORDER="0">...</TABLE>ou<TABLE>...</TABLE>
Dica:Aformataodetabelascomplicada,pois,dependendodotamanho,
passaasercomplexa,umavezquefazemosusodeseusdiversosatributos.A
melhoropo,semdvida,usaroseditoresWYSIWYG(Comooquanta).
Diversas extenses de tabelas possibilitam a apresentao de efeitos muito bons nas
pginas.
Aprimeiradelasacordefundoeacordaborda:

ObservandoagoraosatributosCELLSPACINGeCELLPADDING.

Projeto eJovem Mdulo II: HTML

31

1.17. Listas
HvriostiposdelistasemHTML,sendoestasasmaisusadasecorretamenteapresentadas
pelosbrowsers:

1.17.1. ListasdeDefinio
Estas listas so chamadas tambm Listas de Glossrio, uma vez que tm o seguinte
formato:

Queproduz:

Estetipodelistamuitoutilizadoparadiversosefeitosdeorganizaodepginas,por
permitiratabulaodotexto.Umexemploalistacompostaabaixo:

Oqueresultaem:

1.17.2. Listasnonumeradas
SoequivalentesslistascommarcadoresdoMSWord,porexemplo:

Projeto eJovem Mdulo II: HTML

32

A diferena entre o resultado da marcao HTML e do Word est na mudana dos


marcadores,assinalandoosdiversosnveisdelistascompostas:

Resultaem:

1.17.3. ListasNumeradas

Resultaem:

Estas listas no apresentam numerao em formato 1.1, 1.2, etc. Quando compostas,
apresentamsedaseguinteforma:
1.Documentosbsicos
2.Documentosavanados
1.formulrios
1.CGI
2.contadores
3.relgios
2.Detalhessobreimagens
Porm,atravsdoatributoTYPE(HTML3.2),podeselidarcomanumeraodositens:

Resultaem:

Projeto eJovem Mdulo II: HTML

33

AindasegundoHTML3.2,oatributoSTARTpodeindicaroinciodanumeraodalista:

Resultaem:

1.17.4. Listasesublistas
Aslistaspodemseraninhadas.Porexemplo:

Resultaem:

1.18. Frames(Molduras)
Os framesso divisesdatelado browser emdiversastelas(ouquadros).Comisso,
tornasepossvelapresentarmaisdeumapginaporvez:porexemplo,umndiceprincipal
emumapartepequenadatela,eostextosrelacionadosaondiceemoutraparte(menus).
muitofcilcolocarframesempginas,porm,nemtodososusuriosgostamdeles,pois
nemsempreanavegaofcil,almdeproblemasparaaimpressoeamarcaodos
documentosinterioresaosframesnosbookmarks.Aalternativanaturalparaosframesso
astabelas.
Umapginacomframestemumtextofontesemelhantea:

Projeto eJovem Mdulo II: HTML

34

AparteFRAMESETdefineadivisodapginaemquadros.Nesteexemplo,apginaser
divididaemduascolunas,sendoaprimeiracom20%dotamanhodatela,easegunda
colunacomosrestantes80%datela.
DentrodaformataodeFRAMESET,temososFRAMESRC,quesorefernciasspginas
queseromostradasnosframesdefinidos.
Assim,nocdigoacimavemosqueapginaindice1.htmlsermostradanaprimeiracoluna
(que ocupar 20% da tela), e a pgina apresenta.html ser mostrada na segunda
(ocupando80%datela).
AformataodeframesincluitambmumaparteNOFRAME,quemostradanormalmente
pelosbrowsersquenosuportamsuaapresentao.

1.19. udioeVdeo
OusodeudioevdeonaInternetvemganhandomuitodestaquenosltimosanos,e
bomsabercomousarbemestasmdias.
udio e vdeo so classificados como "mdias contnuas", pois so geradas segundo
determinadastaxas,devendoserreproduzidasnessamesmataxa,paraevitardistores.
Quantomaisinformaesdeumaseqnciadeudioouvdeodigitalsoarmazenadas,
melhoraqualidadedoudioouvdeoreproduzido.Issoimplica,logicamente,nofatode
arquivosdeudioevdeoseremgeralmentemuitograndes,oquetornainvivelousomais
freqentedessasmdiasempginasWeb.
Alm de procurarmos lidar sempre com pequenos trechos de udio e vdeo, podemos
explorartecnologiasrecentesquepermitematransmissoemtemporeal.

1.19.1. udio
Hduasmaneirasdeinserirsomemumapgina:
<EMBEDSRC="arquivo_de_som.extenso">
<BGSOUNDSRC="arquivo_de_som.extenso">
Naprimeiraopo,insereoarquivodesomcomoobjeto.
Nasegunda,fazcomqueosomsejainseridocomosomdefundoou'trilhasonora'deuma
pgina.EstaformataosfuncionanoInternetExplorer.
Essas formataes, porm, no faro efeito algum quando o browser no estiver
configuradopara"executar"oarquivodesompormeiodeumpluginadequado,ouseo
computadoremqueestivercarregadaapginanotiverinstaladaumaplacadesom.

1.19.1.1. Tiposdearquivodeudio
Ostiposdearquivodeudiosoescolhidos:segundootipodeudio(voz,sons,msica),a
aplicao desse udio e a qualidade de reproduo desejada. Aqui sero apresentados
apenasostiposmaiscomuns:

AU(SunAudio):usadopelasestaesdetrabalhodaSunMicrosystems.

AIFF:usadogeralmenteemmquinasMacintosheSiliconGraphics.

Projeto eJovem Mdulo II: HTML

35

RIFF (Resource Interchange File Format): pode conter muitos tipos diferentes de
dados,incluindoudiodigital(WAV)eMIDI.Geralmente,os"arquivosMIDI"do
MicrosoftWindowsesto,narealidade,emformatoRIFFenoMIDI.
WAV(Wave):umsubconjuntodaespecificaoRIFF.
AVI(AudioVideoInterleave):formatoMicrosoft.
MPEG(MotionPicturesExpertGroup):opadroMPEG3(conhecidoporMP3)o
padrodecompressodeudiomaispopularatualmente.
MIDI (Musical Instrument Digital Interface): no exatamente um formato de
udio,masderepresentaodemsica.UmarquivoMIDIarmazenainformaes
sobre cada nota e instrumento e, a partir dessas informaes, um sintetizador
reproduzossons.Porisso,umamsicainstrumentalemMIDIgeralmenteproduzir
um arquivo muito menor do que a mesma msica em Wave, ou qualquer outro
formato.

1.19.2. Vdeo
Ainserodevdeodependebastantedotipodearquivodevdeoquetemosparainserir
em uma pgina.De maneira geral, esta formatao pode servir para a insero de um
arquivoQuickTime:
<EMBEDSRC="arquivo_de_video.extenso">
Umaformataomaiscompletaincluiaindicaodopluginecontrolesdareproduodo
vdeo.

1.20. Outros
1.20.1. Blink
Aformatao<BLINK>Frase</BLINK>foiumadasprimeirasinovaesintroduzidas
peloNetscape.
OperigodeseusaroBLINKque,sesuapginajapresentacores,desenhos,cabealhos,
todosefeitosquechamamaatenodoleitor,oBLINKserumfatoraindamaischamativo,
oquecausaumefeitofinalcansativoeconfuso.
EviteusaroBLINK.possvelsubstituiresserecursoporoutrosefeitosdeJavaScript.
Felizmente,sopoucososbrowsersquemostramoefeitodessaformatao.OInternet
ExplorerumdosbrowsersquenoconsideramoBLINK.
AousaroBLINK,apliqueosomenteempequenosdetalhes(palavrasouflechinhas),nunca
emgrandequantidade,muitomenosemfrasesinteirasoucabealhos.

1.20.2. Marquee
possvelobteroefeitodeanimaodetexto,atravsdestaTAG.
<MARQUEEBEHAVIOR=efeito>Texto</MARQUEE>

Projeto eJovem Mdulo II: HTML

36

Atributosdelarguraedireodoefeitopermitemdiversasapresentaesdiferentes,por
exemplo:
<MARQUEEBEHAVIOR=SCROLLWIDTH=30%>Texto</MARQUEE>
<MARQUEEBEHAVIOR=SLIDEDIRECTION=RIGHT>Texto</MARQUEE>
<MARQUEEBEHAVIOR=SLIDEDIRECTION=LEFT>Texto</MARQUEE>
Ateno:OefeitoMarqueesexecutadonoInternetExplorereemversesrecentesdo
Netscape,edemaneirasdiferentes.

Projeto eJovem Mdulo II: CSS

37

Captulo2. CSS
2.1. IntroduoaoCSS
CSSasiglaparaCascadingStyleSheetsquefoitraduzido,emportugus,parafolhasde
estiloemcascata,quesignificamumdocumentoondesodefinidasregrasdeformatao
oudeestilosaseremaplicadasaoselementosestruturaisdemarcao.
A finalidade das CSS a de retirar do HTML toda e qualquer declarao que vise a
formatao,ouseja,aapresentaododocumento.IstosignificadizerqueTAGSdotipo
<font>,<bold>,<b>,<em><i>....etc,bemcomoousodecolunaselinhasdetabelas
paraobtenodeespaamentosnosoadmitidosou,seadmitidos,comrestriesemum
projetoWebcomCSS.
AsTAGS<strong>e<em>devemserusadasemsubstituio <b> e <i>, seasua
intenoadecontemplarestastecnologias.
Contudo,emboraosuporteparaelasdevacontinuaraindapormuitotempo,nadaaponta
paraumarevitalizaode<b>e<i>.Pelocontrrio,asevidnciasaestapocaindicam
queelassejambanidasapartirdo2.0.
DeveseusaroCSSporquepermitequevocretiredamarcaoHTMLtodaaformatao
(apresentao)dodocumentoWEB.Quemvaideterminarcores,formas,tipos,tamanhos,
posicionamento,e,enfim,todoo"visual"dapgina,soasCSS.
Inmeras so as vantagensdo uso dasCSS nosdocumentos Web.Eisuma relao das
principais:
a)Controletotalsobreaapresentaodositeapartirdeumarquivocentral;
b)Agilizaodamanutenoeredesigndosite;
c)SadaparadiferentestiposdemdiaapartirdeumaversonicadeHTML;
d)ReduodotempodecargadosdocumentosWeb;
e)Adequaosimplificadaaoscritriosdeacessibilidadeeusabilidade;
f)Elaboraodedocumentosconsistentescomasaplicaesfuturasdeusurios;
g)AumentoconsidervelnaportabilidadedosdocumentosWeb.
Quando um usurio quer acessar uma pgina web, o browser temque analisar todo o
cdigoHTMLdestapararepresentlanatela.Sevoccolocarumaformataocomplexa
nas suas pginas, isso acrescentar um tempo maior de anlise para cada pgina. Ao
colocarasformataesnumanicafolhadeestiloreferenciadaporcadapgina,vocreduz
aquantidadedecdigodaspginase,conseqentemente,istoreduztambmaquantidade
dedadosquetmquesertransmitidoseanalisadospelosbrowsers.Oresultadosopginas
queaparecemmaisrapidamenteeusuriosmaisfelizes.

38

Projeto eJovem Mdulo II: CSS

2.2. EstruturadoCSS
OCSScompostoporregra,queumaunidademnimadeprogramaodeestilos,que
segueumasintaxeprpriaedestinaseaestilizarumaoumaispropriedades.

A sintaxedeumaregracompreendeum seletor,uma propriedade eum valor, escritos


comomostradoabaixo.Aoconjuntodepropriedadeevalor,denominamosdedeclarao.

Seletor(Elemento) descreveoelementodedesignaoqualoestiloseraplicado.
AmesmatagHTML,massemossinaisdemaioremenor.Essapartedaregra,s
vezes,chamadadeseletor.

Proriedade(Atributo)oaspectoespecficodoelementoquevocquerusarcomo
estilo.DeveserumnomedeatributoCSSvlido,comooatributofontsize.

Valor aconfiguraoaplicadaaoatributo.Deveserumaconfiguraovlidapara
oatributoemquesto,como20pt(20pontos)parafontsize.

Atributo: valor a parte declarao da regra. Voc pode atribuir mltiplas


declaraessedesejarseparloscompontoevrgula(;).

Porexemplo:
h1{color:#000000;}umaregraCSS

p{textindent:10pt;}umaregraCSS

Onde:
h1oseletor
{color:#000000;}adeclarao
colorapropriedadeCSS
#000000ovalorCSS

Onde:
poseletor.
{textindent:10pt}adeclaraoCSS
textindentapropriedadeCSS
10ptovalorCSS

EntreoscaracterespermitidosnoCSSestoasletrasdeaz,AZ,osnmerosde09,hfen
ecaracteresdeescape.CaracteresUnicode161255,bemcomocaracteresUnicodecomo
cdigosnumricos.Nopermitidoiniciarumnomecomumtraoounmero.

2.3. IniciandoaprticadoCSS
Tendoestasprimeirasnoes,veremosagoracomoincorporarasregrasdeCSS.Comofoi
dito,nomaisusaremosasTAGSdaformaqueforamusadasanteriormente,algumasdelas
nemmaisserousadas,easqueforemusadas,seromodificadas.
Primeiramente,iremosutilizar,assimcomonoinicio,oprogramaQuanta.
Vamosnovamenteabriloeexecutarodocumentobsico,comofizemosl,digitaremosum
texto abaixo para facilitar o andamento da atividade, pegaremos um trecho da nossa
apostila:

Projeto eJovem Mdulo II: CSS

39

Vamoscomearaentenderamudanadosatributosdocorpodotexto(<body>)edo
ttulodotexto,nousandomaisdeclaraesdeTAGSdadasantes.
Primeiramente,cliquedentrodaTAG<BODY>.Emseguida,naabaestilo(Figuraabaixo)
eemdepoisnoconeCSS:

ApareceratelacomaspropriedadesdoCSS.
Vamosprimeiramentemodificarotipodefonte(fontfamily)eotamanhodafonte(font
size).Paramodificarotipodefonte,ddoiscliquesnonomefont(Destaquenaimagem
abaixo)eemseguidacliquenocone:

Surgiratelaparaescolhadasfontesdesejadas.Aovisualizarafontedesejada,cliquena
setaemdestaque.(Conformefiguraabaixo).Escolha3fonteseconfirmenoOK.

Projeto eJovem Mdulo II: CSS

40

Sigaosmesmospassosnofontsize,colocandootamanho13.

ConfirmanoOKevejaoresultadodaTAG<BODY>
Agora,jquevimosumapartedoquesepodefazer,iremosentomodificarumpoucomais
aTAG<BODY>eincrementaraTAG<H2>
Faaasmodificaesvocmesmo:

Comoresultadotemos:

Tendoisso,podemosnanossapginamodificarosvaloreseirverificandooresultado.
SalveodocumentocomoPrimeiro_CSS.html.
As Regras no so case sensitivas, isto , podemse usar maisculasouminsculas nas
folhasdeestiloindiferentemente.Istovlidosomenteparaasdeclaraesespecficasda
folhadeestilo,pormemoutroscasos,no.Porexemplo:nadeclarao,escreverovalor
figura.gifdiferentedeFIGURA.gif
Comentriospodemedevemserusadosnasfolhasdeestilo.recomendvelquesefaa
amplousodecomentriosparafornecerinformaessobreosseletores,propriedadese
valoresdeclarados,comointuitodefacilitarfuturasmodificaesoumesmoentendimento
do cdigo gerado. Os comentrios devem estar entre as marcas /* e */ e podem ser
inseridosemqualquerespaoembrancodentrodafolhadeestilos.Nosopermitidos
comentriosaninhados.
/*IstoumcomentrioCSS*/

DentrodoCSS,temosefeitocascata,queomtodopeloqualaplicadaumaregraem
funodoimportnciadaregra.QuandoemumelementoHTMLaplicasemaisdeuma
regra,dizsequehumconflitoderegraseseraplicadaaquelaquetivermaior
prioridade,sendodeterminadapelaordemdoefeitocascata.
A ordem para o efeito cascata a ordenao das regras de acordo com critrios pr
estabelecidos,comafinalidadederesolvereventuaisconflitosentreregras.Eestescritrios
soosabaixoenumerados:

Localizadas todas as regras aplicveis ao seletor/propriedade, determinase a


especificidadedecadaumadelas.Aregramaisespecificaentreasconflitantesser
aplicada.

Projeto eJovem Mdulo II: CSS

41

Senoforencontrauma(oumais)regraaplicvelaoelementoHTML,esteherdar
as propriedades de estilo de seu elemento pai. No havendo elemento pai, ser
aplicadoovalorinicialdefaultdeestiloparaaqueleelemento

Regrascomdeclaraoimportante(!important)temprioridadesobreaquelassema
declarao.Seoautoreousuriodeclaramregrasconflitantescom!important,as
dousuriotmprioridadesobreasdoautor.

Regrascommesmopso(sem!important)ecoflitantes,declaradaspeloautortm
prioridade sobre aquelas declaradas pelo usurio. Regras do usurio com maior
especificidade que aquelas do autor tm a prioridade. Regras com igual
especificidadedeclaradaspeloautortmprioridadesobreasdousurio.Regrasdo
autoredousuriotmprioridadesobreasregrasdefaultdasaplicaesdousurio
(p.ex.:obrowser)

Regrasmaisespecficastmaprioridadesobreasmenosespecficas.

Entre regras de mesmo peso, tm prioridade aquelas declaradas por ltimo na


sequnciadasregrasnafolhadeestilos.

Folhasdeestiloinline,incorporadas,lincadaseimportadas(@import)nestaordem,
tmdo maiorparaomenorpeso(estilosinlinetmomaiorpeso).Entre vrias
folhasdeestilolincadas,tmmaiorprioridadeaquelaimportadaporltimo(mais
prximadatag</head>).Omesmoocorreentreasfolhasimportadas(@import)

2.3.1. Declaraoeofragmentodeumaregradentrodoscolchetes{}
Adeclaraocompesededuaspartes:apropriedadeeovaloreumaregrapodeconter
vriasdeclaraesseparadasporumpontoevrgula(;).
Porexemplo:
h1{color:#000000;/*estalinhacontmadeclarao*/}
Podeseatribuirmaisdeumadeclaraoaumseletor,paraisso,asdeclaraesdevemser
separadasporpontoevrgula.
Porexemplo:
p{background:#FFFFFF;color:#000000;}
SeletorumaentidadequeidentificaumelementoHTMLoudefineumaclasseoupseudo
classenaqualaregradeestiloseraplicada.
Porexemplo:
p{fontsize:12px;}
Oseletorp(elementoHTMLpargrafo)earegraescritadeterminaqueospargrafos
teroumafontedetamanho12px.
p,ul{textindent:10pt;}
Osseletoressopeul
Agrupamentodeseletoresumaformacompactadereunirseletoresquecompartilhamas
mesmasregrasdeestilo.

Projeto eJovem Mdulo II: CSS

42

Porexemplo:
p{color:#000000;}
.classeb{color:#000000;}
span{color:#000000;}
Osseletoresp.classebespancorrespondememletrasnacorpreta,entopodemosagrup
losassimcomoabaixo,pormnotequeosseletoresagrupadosdevemserseparadospor
virgula:
p,.classeb,span{color:#000000;}

2.4. EstruturandomelhoroCSS
AtagoravimoscomocriaroCSS,masdentrodaTAG.Podemosfazerissoseparadamente,
oqueinicialmenteiremosfazerdentrodomesmoarquivoHTML,pormcomovimosno
exemploanterior,jtemosanecessidadedevisualizarcomoiremoscriarisso.
Voc pode definir regras de CSS em trs lugares. E, por definio, pode utilizar uma
combinaodostrsmtodosnosseuswebsites.Amaneiracomoasregrasinteragementre
siestrelacionadaparte"emcascata".Ostrslugaresso:1)emumdocumentoseparado
foradetodososdocumentosHTML,2)nocabealhodeumdocumentoHTMLe3)dentro
deumatagdeHTML.
CadaumdestesmtodostemumnomeeafetaaspginasHTMLemseusitedeummodo
diferente,comodiscutidoaqui:

Externo significaquevoccolocaasregrasdeCSSemumarquivoseparado,e
entosuapginaHTMLpodefazerumlinkparaessearquivo.Essaabordagemlhe
permitedefinirregrasemumoumaisarquivosquepodemseraplicadasemalguma
pginadoseuwebsite.

Incorporado significa que voc especifica as regras de CSS no cabealho do


documento.Asregrasincorporadasafetamsomenteapginaatual.

InlinesignificaquevocespecificaasregrasdeCSSdentrodatagdeHTML.Essas
regrasafetamsomenteatagatual.

2.4.1. Estilosexternos
Paradefinirumconjuntoderegrasdeestiloquevocpodefacilmenteaplicaremalguma
pginadoseusite,precisocolocarasregrasemumarquivodetexto.Vocpodecriareste
arquivocomumeditordetextossimplesedaraonomedessearquivoaextenso.css.
Sempre que quiser utilizar esses estilos em uma nova pgina, basta colocar uma tag
<LINK>nocabealhoquereferencieessearquivo.css.Vejaoexemplo:
Arquivomeu_estilo.css
H1{fontfamily:'ComicSansMS';fontsize:36pt;color:blue}
P{fontfamily:'Courier';marginleft:0.5in}

43

Projeto eJovem Mdulo II: CSS

Agora,parautilizarosestilosdefinidosnestearquivo.css,vocprecisaadicionarataga
seguir ao cabealho da pgina, onde nome_do_arquivo uma referncia absoluta ou
relativaaoarquivo.css.
<LINK

REL="STYLESHEET"
TYPE="text/css">

HREF="http://www.iecentral.net/meu_estilo.css"

OBS: Voc deve inserir este texto entre as tags <HEAD>...</HEAD> e colocar a
localizaocorretadoseuarquivoeseunome.

2.4.2. Estilosincorporados
Se quiser criar um conjunto de estilos que se aplicam a uma nica pgina, voc pode
configurarosestilosexatamentecomofizemosnoexemplodosestilosexternos,mas,em
vezdecolocarastags<STYLE>...</STYLE>easregrasemumarquivoseparado,coloque
estastagsnaprpriapginaHTML.Aestruturabsicadeumapginadawebqueutiliza
estilosincorporadossemelhanteaoseguintecdigo:

2.4.3. Estilosinline
Osestilosinlinesoosquetmmenosefeitos.Elesafetamsomenteatagatual,nooutras
tagsnapginaetopouco,outrosdocumentos.Asintaxeparadefinirumestiloinlinea
seguinte:<TAGSTYLE="regrascss">
Exemplo:
Notequeemvezdastags<STYLE>...</STYLE>,vocapenasutilizaumatributoSTYLE
dentrodatagparadefiniroestilo.

2.5. PropriedadeseValoresdeFontes
Fontessoestilosdeapresentaoconsistentesaplicadosaalfabetos.Umafonteconsistede
atributosquealteramaaparnciadeumsmbolo,semalteraroseusignificado.Oferecem
as informaes necessrias para que uma letra ou smbolo possa ser representado
graficamente.
Osatributosessenciaisdeumafonteso:

Seutipo(oufamlia)

Seutamanho

Seuestilo(regular,itlico,outline,etc.)

Seupeso(normal,negrito,light,black)

Projeto eJovem Mdulo II: CSS

44

Pararepresentarqualquertexto,portanto,precisoescolherumafonte,ouseja:umtipo,
umestilo,umpesoeumtamanho.Letrasmaisculaseminsculasnosoconsideradas
fontesdiferentes,poistmumsignificadodistinto.
Os quatroatributosacima podemser definidosemCSS atravsdaspropriedades:font
family, fontsize, fontstyle e fontweight. No preciso definir todas, pois sempre tm
valoresdefault.CSSofereceaindafontvariant,quepermiteconsideraroutrasvariaesde
umafonte.

2.5.1. fontfamily
Umafamliadefontes(tipo)selecionadacomapropriedadefontfamily.Estapropriedade
aceita uma lista de valores separados por vrgulas, representando nomes de fontes
existentesounonosistemadousurio.Nofinaldalista,podeserincludaumareferncia
aumafamliagenrica,queserusadacasonenhumdosnomescoincidacomonomede
umafontedosistema.
Asintaxe:
fontfamily:fonte1,fonte2,fonte3,...,fontegenrica
Exemplos:

Obrowserusaraprimeirafontedalista,seencontrla.Senoencontrar,irprocurara
fonteseguinte.
Seonomedeumafontetivermaisdeumapalavra,estedeversercolocadoentreaspas.
Asaspaspodemserapstrofessimples(')ouaspasduplas(").Osapstrofessonecessrios
quandoforprecisoespecificarestilosdentrodeumatributoHTML:

2.5.2. fontsize
Otamanhodeumafontealteradousandofontsize.Podeserespecificadoemvalores
absolutosourelativos.Paraespecificarumvalorabsoluto,podeseusar:
fontsize:nmero(pt|px|cm|mm|pc|in)
fontsize:xxsmall|xsmall|small|medium|large|xlarge|xxlarge
Otamanhotambmpodeserespecificadorelativoaoelementonoqualoatualobjetoest
contido.
1.fontsize:tamanho_relativo(smaller,larger)
2.fontsize:comprimento(emouex)
3.fontsize:porcentagem(%)

Projeto eJovem Mdulo II: CSS

45

Exemplos:

Ostamanhosdepontosdevemserespecificadoscomovaloresinteiros(mesmoseusados
cm ou in).Osbrowserspodem formatarostamanhosde forma diferente e osmesmos
podem ser alterados pelos usurios nos browsers atuais. As unidades vlidas so: pt
(pontos),px(pixels),pc(paicas),cm(centmetros),mm(milmetros)ein(polegadas).

2.5.3. fontstyleefontweight
Oestilodeumafonteafetadoatravsdeduasdiferentespropriedades:fontweight,que
alteraopesodafonte,efontstyle,quealteraoestiloouinclinao.
Sintaxe:
4.fontstyle:normal(ouitalic,oblique)
Exemplos:

Sintaxe:

fontweight:normal|bold(normal=400ebold=700)

fontweight:bolder|lighter(valoresrelativos)

fontweight:100|200|300|400|500|600|700|800|900

Exemplos:

A palavra oblique deve fazer com que fontes chamadas de "oblique" (se existirem no
sistema)sejamusadas,assimcomoocorrecomfontes"italic".Arigor,italicumafonte
distinta da normal, e no, meramente uma verso inclinada da mesma. Os browsers,
porm,noencontrandoumequivalente"italic","oblique","kursiv"ousimilar,iroinclinar
otextosimulandoumitlico.

2.5.4. fontvariant
Atualmente,anicaopodisponvelparaestapropriedadesmallcaps,quedevecolocar
otextoselecionadoemmaisculas,pormmenoresqueascapitulares.Naprtica,atas
maisculassoreduzidasnoInternetExplorer.Asuasintaxe:

fontvariant:smallcaps

46

Projeto eJovem Mdulo II: CSS

Exemplo:

Sairassim:

2.5.5. Apropriedadefont
Para especificar vrias propriedades de um seletor de uma vez s, podese usar a
propriedadefont,emvezdedefiniremseparadofontsize,fontweight,fontfamily,etc.
Nestasintaxe,aordemdosfatoresimportante,pormnemtodososelementosprecisam
estarpresentes:
font:fontstylefontvariantfontweightfontsizelineheightfontfamily

Exemplos:
Logoabaixo,encontramsepropriedadesevaloresdeestilodefontes.

Propriedade

Descrio

Valores

Exemplo

tamanho(pt,in,cm,px)
porcentagemdotamanhonormal {fontsize:12pt}
relativo:xxlarge,xlarge,large, {fontsize:200%}
medium,small,xsmall,xxsmall, {fontsize:xlarge}
larger,smaller

fontsize

Ajustaotamanhodo
texto

fontfamily

Ajustaostiposdefacee
asalternativas(em
ordemdepreferncia)

nomedotipodefacenomeda
famliadafonte

{fontfamily:
"TrebuchetMS",
"Sansserif"}

fontweight

Ajustaopesodotipo

normalbold(outrasopessero
suportadasmaistarde)

{fontweight:
bold}

47

Projeto eJovem Mdulo II: CSS

fontstyle

Textoemitlico

fontvariant

especificaumavariante
defonte

normalitalic(maisopesestaro
disponveismaistarde;'oblique
{fontstyle:italic}
smallcaps'estdisponvelnoIE4
somente)
smallcaps(outrasopessero
suportadasmaistarde)

{fontvariant:
smallcaps}

pt=pontos;in=polegadas;cm=centmetros;px=pixels;

2.6. Propriedadesevaloresdetexto
Aspropriedadesdestaseotratamdetransformaeseatributosaplicadosatexto,no
afetandoaexibiodasfontes.Osatributostipogrficosafetamaformacomootexto
apresentado na tela, como: o espaamento entre linhas, entre palavras, entre letras, o
alinhamentodepargrafoseaendentao.
A propriedade texttransform permite colocar letras em maisculas ou minsculas e a
propriedadetextdecorationpermiteacrescentaroutirarefeitosdecorativosdotextocomo
riscadosesublinhados.

2.6.1. texttransform
Apropriedadetexttransformrealizatransformaesnoformatocaixaaltaoucaixabaixa
dotexto.Asuasintaxe:

texttransform:capitalize

texttransform:uppercase

texttransform:lowercase

texttransform:none(valordefault)

Exemplos:
H1{texttransform:capitalize}
Capitalizecolocaaprimeiraletradecadapalavraemmaisculas.Uppercasecolocatudo
em maisculas e lowercase coloca tudo em minsculas. None remove qualquer
transformao,deixandootextodaformacomofoidefinidoantesdastransformaes.

Projeto eJovem Mdulo II: CSS

48

Resultado:

2.6.2. textdecoration
A propriedade textdecoration permite colocar (ou tirar) sublinhados, linhas sobre e
atravessandootexto,etc.Asuasintaxe:

textdecoration:underline(defaultemlinks)

textdecoration:overline

textdecoration:linethrough

textdecoration:blink

textdecoration:none(default)

Exemplos:

Veremosalgumasformasde,usandoestapropriedade,mexercomadecoraodelinks:
Forma1:

Forma2:

Projeto eJovem Mdulo II: CSS

49

Observe os resultados das formas acima, compare e veja se existem outras formas de
realizaroquedeseja:

Vnculos(links)sonormalmentesublinhadosnamaiorpartedosbrowsers.
Osublinhadopodeserremovidocomapropriedadetextdecoration:none.
ObrowserNetscape4nosuportaapropriedadeoverline.OInternetExplorernosuporta
apropriedadeblink.

2.6.3. textaligneverticalalign
CSSoferecepropriedadesquepermitemcontrolaroalinhamentohorizontaldotexto,seu
alinhamentoverticaleendentaodotextonaprimeiralinha.Oalinhamentohorizontalo
mesmo conseguido com o atributo align do HTML, s que o da folha de estilos tem
precedncia.Asintaxe:

textalign:left|right|center|justify

Oalinhamentosseaplicaaelementosdebloco(<P>,<DIV>,H1,etc.)eelementos
como applets e imagens. A caracterstica herdada para subblocos. O valor default
sempreleft.Exemplo:
DIV{textalign:center}
AlinhamentoverticalemHTMLspodeseraplicadoatabelaseimagens.ComCSS,esta
propriedadeestendidaaqualquerelementodetextoeimagens.Asintaxe:

verticalalign:baseline|top|texttop|middle|bottom|textbottom

verticalalign:sub|super

verticalalign:porcentagem%

Ovalordefaultbaseline.Asporcentagensreferemsealturadalinha(lineheght)do
prprioelemento.Usandoporcentagensnegativasconseguemsesobreporelementos.
Naprtica,apenasoInternetExplorer4suportaverticalaligncomosvaloressubesuper
(colocaelementosemsubscritoousobrescrito).

2.6.4. textindent
Apropriedadetextindentaplicaseaelementosdeblocoerealizaaendentaoda
primeiralinha.Asuasintaxe:

textindent:comprimento

textindent:porcentagem

Projeto eJovem Mdulo II: CSS

50

Aporcentagemocorreemrelaolarguradoelementoquecontmoseletor.Podesera
larguratotaldapgina,alarguradacluladeumatabela,etc.Exemplos:
P{textindent:1cm}
P{textindent:50%}
<Pstyle="textindent:1in">
Aedentaotratadaaquiapenasparaumalinhadetexto.Paraendentarblocos
inteiros,deveseusarasmargens(emseomaisafrente).

2.6.5. lineheight
Esteatributousadoparacontrolaroespaoqueexisteantesedepoisdeumalinhade
texto.Elaespecificaaalturatotaldeumalinhadetexto.Sevoctemumtextode10
pontoseumalineheightde20pontos(lineheight:2),haver5pontosantese5pontos
depoisdecadalinhadetexto(espaoduplo).Oespaosimplesequivalegeralmentealine
height:120%.Umalineheightmenorqueotamanhodafonteproduzirsobreposiode
texto.
Embora ambos os browsers mais populares suportem este recurso, ele no ocorre da
maneira correta. Os browsers no acrescentam a mesma quantidade de espao antes e
depois,comoesperado.
UmbugnoInternetExplorer3fazcomqueeleinterpretevaloresabsolutos(semunidade)
comovaloresempixels.Porexemplo,1.5indicaespaoumemeioou150%.NoInternet
Explorer 3, as linhas ficam sobrepostas, pois o browser interpreta a unidade como 1.5
pixels.Evite,portanto,usarvaloresabsolutos(useporcentagens).Asintaxe:

lineheight:nmero_absoluto

lineheight:comprimentoouunidade

lineheight:porcentagem

Exemplos:

Sevocusarumvalorpercentualmenorque100%,umvalorabsolutomenorque1ouuma
unidademenorqueotamanhodafonte,haversobreposiodelinhas.

2.6.6. letterspacing
Apropriedadeletterspacingalteraoespaoentreasletras.Asuasintaxe:

letterspacing:normal

letterspacing:comprimento

Asunidadespodemserqualquerumadasunidadesvlidasparatamanhodefontes(pt,px,
pc, cm, in, mm, em e ex). Na tipografia, mais comum usar "em" como medida de
espaamentoporserproporcionalaotamanhodafonte.

51

Projeto eJovem Mdulo II: CSS

Podeseusartambmvaloresnegativosparasobreporcaracteres,criarligaduras(usadas
emkerning)ecaracteresespeciais(porexemplo,sobrepondo/com\).
O suporte a letterspacing nos principais browsers ainda inconsistente. O Netscape
(verso4)noosuporta.
Logoabaixo,encontramsepropriedadesevaloresdeestilodetexto.
Propriedade

Descrio

Valores

Exemplo

tamanho(pt,in,cm,px, {lineheight:18pt
Ajustaadistnciaentreas
em)porcentagem(%)do }{lineheight:
basesdalinhadetexto
tamanhodefonte
120%}

lineheight
textdecoration

Sublinhaouento
selecionaotexto

noneunderlineoverline
linethrough

{textdecoration:
underline}

textalign

Ajustaoalinhamentode
textoparaamargem
esquerdaoudireita,ou
paraocentrodapgina

leftcenterright

{textalign:
right}

Fazaindentaoda
primeiralinhadotextono tamanho(pt,in,cm,px)
elemento

textindent

{textindent:
0.5in}

verticalalign

alinhaotexto
verticalmentedentrodo
elemento

baselinesubsupertop
texttopmiddlebottom
textbottomporcentagem
daalturadelinhaapartir
dabasedalinha(%)

texttransform

Ajustaasregrasde
maisculaseminsculas
notexto

capitalize(colocaem
maisculaaprimeira
letradecadapalavra)
uppercaselowercase

{texttransform:
capitalize}

letterspacing

ajustaoespaamento
entreasletrasnotexto
(seesperaquetenha
suportenaversofinal
doIE4.0)

normal,tamanho(pt,in,
cm,px)

{letterspacing:
2pt}

{verticalalign:
super}

pt=pontos;in=polegadas;cm=centmetros;px=pixels;

2.7. BackgroundedeCor
Comaspropriedadesdecores,podemoscontrolarascoresdevriaspartesdapgina,do
texto,dofundodapginaedeelementosHTML.Almdisso,podemosaplicarimagensde
fundoemqualquerelemento,nosnoelementoBODY,comojsefazemHTML.
AscoresdefinidasemCSS,assimcomoemHTML,podemserespecificadasporumnmero
em hexadecimal (representando um cdigo RGB) ou por um nome. Alm dessas duas
formas,podemaindaserespecificadasportrsnmerosdecimais,representandotambmo
cdigoRGBdacor.

Projeto eJovem Mdulo II: CSS

52

OscdigosRGBinformamaquantidadedeluzvermelha,verdeeazulquecompeacor,
respectivamente. Cada cor pode ter 16 nveis de intensidade: 0 a 256 (00 a FF, em
hexadecimal).Ototaldecombinaespossveisde16.777.216cores.
Aexibiocorretadascoresdependedacapacidadedovdeoondeserovistas.Poucos
sistemas tm capacidade de mostrar mais que 65.536 cores simultneas. A maioria s
mostra256.
A tabela abaixo relaciona em negrito os 16 nomes padro, suportados por todos os
browsersqueexibemcores,eseusrespectivoscdigosRGBemhexadecimaledecimal.
H muito mais cores com nomes suportadas pelo Netscape e Internet Explorer. Estas
listadas, so as nicas que fazem parte da especificao oficial do HTML 4. So todas
"seguras",ouseja,fazempartedapaletabsicade216cores.

2.7.1. color
Define a cor do texto. A propriedade color substitui totalmente o descritor <FONT
COLOR>comvantagens.Podeseraplicadalocalmenteemumdescritor(usandooatributo
style)ouglobalmentenapginaenosite,comoqualqueroutrapropriedadedeestilo.A
sintaxedapropriedadecolor:

color:nome_de_cor

color:#nmero_hexadecimal

color:rgb(vermelho,verde,azul)

Exemplos:

Osnomessoqualquernomevlidodecor.Seobrowsernoencontraronomeaoqualo
estiloserefere,deveexibiracordefault(ouherdada).Osmbolo"#"opcionalnocdigo
hexadecimal.Aintensidadedacorpodeserexpressaemvaloresabsolutos(0a255)ou
percentagens(0.0100.0%).

2.7.2. backgroundcolor
As cores de fundo de qualquer elemento podem ser alteradas atravs da propriedade
backgroundcolor.Asintaxe:

backgroundcolor:transparent(valordefault)

backgroundcolor:nome_de_cor

backgroundcolor:#nmero_hexadecimal

backgroundcolor:rgb(vermelho,verde,azul)

Projeto eJovem Mdulo II: CSS

53

Exemplos:

Ofundotransparentesimplesmentedeixamostraofundodoobjetoqueocontm.O
fundo, para texto, ocupa todo o espao da fonte (inclusive espao em branco acima e
abaixo que fazem parte da fonte). A cor no estendida quando o espaamento entre
linhasaumentadoemalgunsbrowsers.

2.7.3. backgroundimage
CombackgroundimagepossvelatribuiraqualquerelementoHTMLumaimagemque
serexibidanofundo,assimcomoascoresdefundo.Asintaxe:
backgroundimage:none(valordefault)|url(URL_da_imagem)

Exemplos:

AsURLssorelativaslocalizaodoarquivoquecontmafolhadeestilos(podesera
prpriapgina,ouno).Acordebackupusadapara'vazar'pelaspartestransparentesda
imagemouprevenircontraonocarregamentodofundo(parapermitiraleituraemfundo
escuropodeseusarpretocomocordebackupdeumaimagemescura).

2.7.4. backgroundrepeat
CSSpermitemaiscontroleaindasobreaimagemdefundo,facilitandoamaneiracomoa
mesmairserepetir.Apropriedadebackgroundrepeat.Sintaxe:

backgroundrepeat:repeat(default)|repeatx|repeaty|norepeat

Exemplos:

Ovalorrepeatdefaultefazcomqueaimagemocupetodaatela.repeatxfazcomquea
imagem seja repetida apenas horizontalmente e repeaty faz com que ela seja repetida
apenasverticalmente.norepeatfazcomqueaimagemnosejarepetidadeformaalguma
(aparecerumaimagemapenasnocantosuperioresquerdo).
Para fazer a imagem aparecer em outros lugares, podese usar as propriedades de
posicionamentodofundodatela.

2.7.5. backgroundpositionebackgroundattachment
O posicionamento e a forma de exibio do papel de parede so controlados pelas
propriedadesbackgroundattachmentebackgroundposition.Aprimeiradefineseofundo
irounosemovercomotexto,ouficarfixonatela.Asegundapermiteoposicionamento

Projeto eJovem Mdulo II: CSS

54

dofundoemumlocalexatodatela.Infelizmenteessasduaspropriedadesnotmsuporte
universalpelosbrowserscomerciais(apenasoInternetExplorerossuporta).
Sintaxe:

backgroundattachment:fixed|scroll

Exemplo:

Sintaxe:

backgroundposition:porcentagem_horiz%porcentagem_vert%

backgroundposition:comprimentocomprimento

backgroundposition:posio_verticalposio_horizontal

Exemplos:

Osvaloresdeporcentagemsorelativosposiodoelementosobreoqualseaplicao
estilo.Asposiessosempredadasempares,tendoosvaloresseparadosporespaos.O
primeirovalorsempreumvalorhorizontaleosegundoumvalorvertical.Obrowser
coloca oblocoafetadodentrodeuma "caixa invisvel"e a posicionadeacordo comas
porcentagens.
Umvalorde100%paraoprimeirovalorempurraamargemdireita(oposta)desta"caixa
invisvel"contraamargemdireitadobrowser.
Osvaloresdecomprimento,assimcomoosdeporcentagemtambmsodadosempares.O
primeiroadistnciadamargemhorizontalapartirdocantosuperioresquerdodoobjeto;
osegundoadistnciadamargemsuperior.Asunidadesvlidassoasmesmasusadasem
fontes(cm,mm,in,pc,px,pt,em,ex)epodemsermisturadasnosdoisvaloresdopar.
Osvaloresdeposiosopalavraschaveusadastambmaospares.Soequivalentesdas
porcentagensbsicasdealinhamento.Oprimeiroparpodeterleft(0%),right(100%)ou
center(50%).Osegundoparpodesertop(0%),bottom(100%)oucenter(50%).

55

Projeto eJovem Mdulo II: CSS

2.7.6. background
Apropriedadebackgroundpodeserusadaparadefinirvriascaractersticasdefundode
umanicavez.Nasintaxeabaixo,aordemdosfatoresimportante.Asuasintaxe:

background: backgroundcolor backgroundimage backgroundrepeat background


attachmentbackgroundposition

Deve haver pelo menos um valor definido, mas qualquer nmero de valores pode ser
atribudodeumavez.
Exemplos:

Logo abaixo, encontramse propriedades e valores para imagens de background e para


cores.
Propriedade

Descrio

Valores

Exemplo

cor

Ajustaacordo
texto

nomedacorTrioRGB
CdigohexValoresRGB

{color:blue}{color:#00F}
{color:#0000FF}{color:
RGB0.00.01.0}

background

url(URL)(comousem
repeat);nomedacor
Ajustaasimagens (outransparent,ou
debackgroundou doisnomesdecores,
cores
queseromisturadas,
separadosporum/);
trioRGB(cdigohex)

{background:url(image1.gif)
repeat}{background:Red}
{background:Red/Blue}
{background:transparent}{
background:#CCCCCC}

background
color

Ajustaacordo
background

nomedacor;trioRGB
(cdigohex)

{backgroundcolor:Red}
{backgroundcolor:
#CCCCCC}

background
image

Ajustaaimagem
debackground

URL

{backgroundimage:
url(image1.gif)}

background
repeat

Ajustaarepetio repeat(horizontalmente
doentelhamento everticalmente);repeat {backgroundrepeat:repeaty
dasimagensde x(horizontal);repeaty
}
background
(vertical);norepeat

background
attachment

Fixaaimagemde
backgroundou
permitequeela
deslizejuntocom
apgina

background
position

Ajustaaposio
inicialdas
imagensde
background
(Observequea

scrolloufixed

{background:fixed}

Posio(xy)ou(x%y
{backgroundposition:2cm
%);top,center,bottom 1cm}{backgroundposition:
left,center,right
50%20%}{background
position:topcenter}
{backgroundposition:top}

56

Projeto eJovem Mdulo II: CSS

posiodefault,
0,0ou0%,0%,o
cantosuperior
esquerdodo
elemento)

{backgroundposition:
bottomright}

pt=pontos;in=polegadas;cm=centmetros;px=pixels;

2.8. Controledeblocos
UmacaixaumapropriedadedequalquerelementodebloconoHTML:H1,P,DIV,etc,
que automaticamente definem seu prprio bloco ou pargrafo. A caixa de um objeto
consistedaspartesseguintes:

Oelementoemsi(texto,imagem)

Asmargensinternasdoelemento(padding)

Abordaemtornodasmargensinternas(border)

Amargememtornodaborda(margin)

Todoelementodeblocotemessaspropriedades.AspropriedadesCSSqueveremos
nesta seo mostraro comoalterlas.Acor e tamanho da bordapodemseralterados
assim como o fundo (como vimos na seo anterior). A margem externa sempre
transparente,masamargeminternaherdaacordefundodoobjeto.
Tambmsoalterveisasmargensinternaseexternas,largurasdeborda,cordeborda
eestilodebordadecadaumdosquatroladosdeumacaixaindividualmente,identificados
pelosnomestop,right,bottomeleft:

2.8.1. marginepadding
As margens externas so definidas usando a propriedade margin, que afeta todas as
margensaomesmotempo;ouaspropriedadesmargintop,marginbottom,marginrighte
marginleftquepermitemalterarasmargensindividualmente.Sintaxe:

margintop:comprimento|porcentagem%|auto

marginbottom:comprimento|porcentagem%|auto

marginright:comprimento|porcentagem%|auto

marginleft:comprimento|porcentagem%|auto

Exemplo:
margintop:1cm;marginleft:12pt;
Apropriedademarginafetavriosaspectosdasmargensexternasdeumavezs.Aordem
dosfatoresimportante.Podemserincludostodososquatrovalores,apenasum(todasas
margensiguais)oudois(margenshorizontaiseverticais).Sintaxe:

margin:margintopmarginrightmarginbottommarginleft

margin:margintop%marginright%marginbottom%marginleft%

Projeto eJovem Mdulo II: CSS

margin:espao_verticalespao_horizontal

margin:margem_de_todos_os_lados

57

Exemplos:
margin:5cm//valeparaasquatromargens
margin:5cm2cm//5cmmargsverticais,2cmmargshorizontais
margin:5cm3cm2cm1cm//sent.horrio:top,right,bottom,left
As margens internas (padding) so definidas usando a propriedade padding (que afeta
todasasmargensinternasaomesmotempo)ouaspropriedadespaddingtop,padding
bottom,paddingrightepaddingleft.Sintaxe:

paddingtop:comprimento|porcentagem%

paddingbottom:comprimento|porcentagem%

paddingright:comprimento|porcentagem%

paddingleft:comprimento|porcentagem%

Apropriedadepaddingafetavriosaspectosdasmargensinternasdeumavezs.Aordem
dos fatores importante. Podem ser includos todos os quatro valores ou apenas um.
Sintaxe:

padding:paddingtoppaddingrightpaddingbottompaddingleft

padding:paddingtop%paddingright%paddingbottom%paddingleft%

padding:espao_verticalespao_horizontal

padding:margem_de_todos_os_lados

2.8.2. borderwidth
Podesecontrolarvriosaspectosdasbordascomoasuaespessuraemcadaumdosquatro
lados,suascores(tambmcadaumdosquatrolados)eestilos(idem).Istopodeserfeito
dediversasmaneiras.Paraqueasbordasapareamprecisoprimeiroqueoestilo(border
style)sejadefinido.Porexemplo:
borderstyle:solid
Aespessuradasbordaspodesercontroladaatravsdapropriedadeborderwidth,afetando
asespessurasdetodososladosdaborda,ouindividualmenteatravsdebordertopwidth,
borderbottomwidth,borderrightwidtheborderleftwidth.Sintaxe:

bordertopwidth:comprimento|thin|medium|thick

borderbottomwidth:comprimento|thin|medium|thick

borderrightwidth:comprimento|thin|medium|thick

borderleftwidth:comprimento|thin|medium|thick

Exemplos:
borderbottomwidth:thick;borderrightwidth:5.5px;
borderleftwidth:0.2cm

Projeto eJovem Mdulo II: CSS

58

Aspropriedadesdasbordaspodemsertratadasemgrupo,comborderwidth.Aordemdos
fatoresimportante.Podemserincludostodososquatrovalores,dois(referindoses
bordashorizontaiseverticais)ouapenasum(afetandotodasasbordas).Sintaxe:

borderwidth:bordertopwidthIborderrightwidth

borderwidth:borderbottomwidthIborderleftwidth

Exemplos:
borderwidth:5cm//valeparaasquatrobordas
borderwidth:5cm2cm//5cmverticais,2cmhorizontais
borderwidth:5cm3cm2cm1cm//horrio:top,right,bottom,left

2.8.3. bordercolor
Apropriedadebordercolorumatalhoquepermitequesealtereacordeumaoudetodas
as quatro bordas ao redor de um elemento que tambm podem ser definidas
individualmente atravs de bordertopcolor, borderbottomcolor, borderrightcolor e
borderleftcolor.Sintaxe:

bordertopcolor:cor(nomeoucdigo)

borderbottomcolor:cor(nomeoucdigo)

borderrightcolor:cor(nomeoucdigo)

borderleftcolor:cor(nomeoucdigo)

Exemplos:
borderbottomcolor:rgb(231,45,112);borderrightcolor:0fa97b;
borderleftcolor:navy
Aspropriedadesdasbordaspodemsertratadasemgrupo,combordercolor.Aordemdos
fatoresimportante.Podemserincludostodososquatrovalores,dois(referindoses
bordashorizontaiseverticais)ouapenasum(afetandotodasasbordas).Sintaxe:

bordercolor:bordertopcolorIborderrightcolorIborderbottomcolor|border
leftcolor

Cada um dos borderxxxcolor acima uma cor (RGB, hexadecimal ounome). Podese
alterartodasasbordasdeumavez,apenasasduasverticaisehorizontaisouasquatro
individualmente.
Exemplos:
bordercolor:red//redparaasquatrobordas
bordercolor:rgb(255,0,0)//red
bordercolor:rgb(100%,0,0)//red
bordercolor:red0000ff//redverticais,0000ffhorizontais
bordercolor:redblueyellowcyan//4coressentidohorrio

Projeto eJovem Mdulo II: CSS

59

2.8.4. borderstyle
Oestilodecadaumadasquatrobordaspodeseralteradocomborderstyle.Tambm
possvel definilos individualmente usando bordertopstyle, borderbottomstyle, border
rightstyleeborderleftstyle.Sovriososestilosdisponveis(tracejado,pontilhado,vrias
versesde3D,etc.).

bordertopstyle:none|dotted|dashed|solid|double|groove|ridge|inset|
outset

borderbottomstyle:nomedeestilo(umdosnomesacima)

borderrightstyle:nomedeestilo

borderleftstyle:nomedeestilo

Exemplos:
borderbottomstyle:noneborderrightstyle:solid;
borderleftstyle:inset
Aspropriedadesdasbordaspodemsertratadasemgrupo,comborderstyle.Aordemdos
fatoresimportante.Podemserincludostodososquatrovalores,dois(referindoses
bordashorizontaiseverticais)ouapenasum(afetandotodasasbordas).Sintaxe:
borderstyle:bordertopstyle|borderrightstyle|borderbottomstyle|borderleftstyle

Exemplos:
borderstyle:solidnoneinsetoutset;
borderstyle:solid
borderstyle:insetoutset
Cadaumdosborderxxxstyle acimaumdosseguintesvalores:none,dotted,dashed,
solid,double,groove,ridge,inset,outset.NoNetscapeeInternetExplorerfuncionamos
estilos:solid,inset(efeitobaixorelevo)eoutset(efeitoaltorelevo).NoNetscapesolid
default, mas no Explorer, o default none. Portanto, uma borda no aparece se a
propriedadeborderstylenofordefinidaantes.

2.8.5. Border
As propriedades bordertop, borderbottom, borderleft e borderright agrupam as
propriedadesdecor,estiloeespessuraparacadaumadasquatrobordas.
bordertop:borderwidth|borderstyle|bordercolor
borderbottom:borderwidth|borderstyle|bordercolor
borderleft:borderwidth|borderstyle|bordercolor
borderright:borderwidth|borderstyle|bordercolor
Apropriedadeborderumaformareduzidadedefinirtudoistodeumavezsparatodas
asbordasedeformaidntica(nopossvelespecificarvaloresdiferentesparaasbordas,
nestecaso).Todosositensnoprecisamaparecer,masaordemdosfatoresimportante:
border:borderwidth|borderstyle|bordercolor

60

Projeto eJovem Mdulo II: CSS

2.8.6. widtheheight
Aspropriedadeswidtheheightmodificamaalturaelarguradeumblocodamesmaforma
queatributosHTMLwidtheheightusadosemimagenseappletsnoHTML.Comfolhasde
estilos podem ser usados para redimensionar a "caixa" de qualquer elemento de bloco.
Sintaxe:

width:comprimento|auto

height:comprimento|auto

2.8.7. float
Apropriedadefloatpermitequeumblocoqualquersejaposicionadodireitaouesquerda
dajaneladobrowser,fazendocomqueotextorestantefluaemsuavolta.Permiteque
qualquer bloco se comporte como uma imagem que faz uso dos atributos align=left e
align=rightnoHTML.Sintaxe:

float:left|right|none

2.8.8. clear
Efinalmente,paraevitarqueumblocofluaemtornodeumaimagemoublocoqueutilizaa
propriedade float, existe a propriedade clear, a qual deve ser atribuda a um bloco ou
pargrafoqueafetadopelaflutuaodeumbloco.Fazamesmacoisaqueoatributoclear,
usadono<BR>emHTML,squeaquielasuportadaemqualquerelemento(blocoou
no).

clear:none|left|right|both

Logoabaixo,encontramsepropriedadesevaloresparacaixas.
Propriedade
marginleft

Descrio

Valores

Exemplo

Ajustaadistnciaapartirdo
tamanho(pt,in,cm,px) {marginleft:1in}
ladoesquerdodapgina

marginright

Ajustaadistnciaapartirdo
tamanho(pt,in,cm,px)
ladodireitodapgina

{marginright:
1in}

margintop

Ajustaadistnciaapartirda
partedebaixodoelemento tamanho(pt,in,cm,px)
prvio

{margintop:
20pt}

marginbottom

margin

Ajustaadistnciaapartirda
{marginbottom:
partedecimadoprximo tamanho(pt,in,cm,px)
20pt}
elemento
Ajustasasmargensemtodos
osquatroladosdeum
tamanho(pt,in,cm,px)
elemento(Sehouver
ouporcentagemdo
somenteumvalor,elese
tamanhodafontena
aplicaatodososlados;se
ordem:alto,direita,
houverdoisoutrs,ovalor
baixo,esquerda
quefaltasertomadodo
ladooposto.)

{margin:.5cm.
5cm1cm.5cm}

61

Projeto eJovem Mdulo II: CSS

padding

paddingtop

Ajustaopreenchimentoem
todososquatroladosdo
tamanho(pt,in,cm,px)
contedodeumelemento
ouporcentagemdo
(Sehouversomenteum
{padding:.5cm.
tamanhodafontena
valor,eleseaplicaatodosos
5cm1cm.5cm}
ordem:alto,direita,
lados;sehouverdoisou
baixo,esquerda
trs,ovalorquefaltaser
tomadodoladooposto.)
Ajustaopreenchimentona tamanho(pt,in,cm,px)
partedecimadocontedo
ouporcentagemdo {paddingtop:5pt}
deumelemento
tamanhodafonte

Ajustaopreenchimentono tamanho(pt,in,cm,px)
paddingright ladodireitodocontedode
ouporcentagemdo
umelemento
tamanhodafonte

{paddingright:
5pt}

padding
bottom

Ajustaopreenchimentona tamanho(pt,in,cm,px)
{paddingbottom:
partedebaixodocontedo
ouporcentagemdo
5pt}
deumelemento
tamanhodafonte

paddingleft

Ajustaopreenchimentono tamanho(pt,in,cm,px)
ladoesquerdodocontedo
ouporcentagemdo {paddingleft:5pt}
deumelemento
tamanhodafonte

bordertop
width

Ajustaalarguradabordaao
tamanho(pt,in,cm, {bordertopwidth:
longodapartedecimade
px);thin,medium,thick
thin}
umelemento

borderright
width

Ajustaalarguradabordaao
tamanho(pt,in,cm,
longodoladodireitodeum
px);thin,medium,thick
elemento

{borderright
width:thin}

borderbottom
width

Ajustaalarguradabordaao
tamanho(pt,in,cm,
longodapartedebaixode
px);thin,medium,thick
umelemento

{borderbottom
width:thin}

borderleft
width

Ajustaalarguradabordaao
{borderleftwidth:
tamanho(pt,in,cm,
longodoladoesquerdode
thin}
px);thin,medium,thick
umelemento

Ajustaalarguradaborda
emcadaladodeum
elementonaordempartede
cima,ladodireito,partede
baixo,ladoesquerdo(Se
tamanho(pt,in,cm, {borderwidth:thin
borderwidth
houversumvalor,elese px);thin,medium,thick thinthickthin}
aplicaatodososlados;se
houverdoisoutrs,os
valoresquefaltamsero
tomadosdoladooposto.)
bordertop
color

Ajustaacordabordaao
longodoladodecimade
umelemento

nomedacoroucdigo
hex

{bordertopcolor:
green}

62

Projeto eJovem Mdulo II: CSS

borderright
color

Ajustaacordabordaao
nomedacoroucdigo {borderrightcolor:
longodoladodireitodeum
hex
green}
elemento

borderbottom
color

Ajustaacordabordaao
longodoladodebaixode
umelemento

nomedacoroucdigo
hex

{borderbottom
color:#00FF00}

borderleft
color

Ajustaacordabordaao
longodoladoesquerdode
umelemento

nomedacoroucdigo
hex

{borderleftcolor:
thin}

Ajustaacordabordaemcada
ladodeumelementonaordem
partedecima,ladodireito,
partedebaixo,ladoesquerdo
(Sehouversumvalor,elese nomedacoroucdigo
aplicaatodososlados;se
hex
houverdoisoutrs,osvalores
quefaltamserotomadosdo
ladooposto;notequeo
Netscapespermiteumvalor)

{bordercolor:green
#FFFF00#00FFFF
green}(IE4)
{bordercolor:
green}(IE4or
Netscape4)

bordercolor

bordertop
style

Ajustaoestilodabordaao
longodoladodecimade
umelemento

nomedoestilo(none,
solid,double,groove,
ridge,inset,outset)

borderright
style

Ajustaoestilodabordaao
longodoladodireitodeum
elemento

nomedoestilo(none,
{borderrightstyle:
solid,double,groove,
solid}
ridge,inset,outset)

borderbottom
style

Ajustaoestilodabordaao
longodoladodebaixode
umelemento

nomedoestilo(none,
solid,double,groove,
ridge,inset,outset)

{borderbottom
style:groove}

borderleft
style

Ajustaoestilodabordaao
longodoladoesquerdode
umelemento

nomedoestilo(none,
solid,double,groove,
ridge,inset,outset)

{borderleftstyle:
inset}

borderstyle

Ajustaoestilodabordaem
todososladosdeum
elemento

nomedoestilo(none,
solid,double,groove,
ridge,inset,outset)

{borderstyle:
outset}

bordertop

Ajustaalargura,cor,eestilo
dabordaaolongodolado
decimadeumelemento

largura,cor,eestilo

{bordertop:thin
greenridge}

borderright

Ajustaalargura,cor,eestilo
dabordaaolongodolado
direitodeumelemento

largura,cor,eestilo

{borderright:thin
greenridge}

borderbottom

Ajustaalargura,cor,eestilo
dabordaaolongodolado
debaixodeumelemento

largura,cor,eestilo

{borderbottom:
thingreenridge}

{bordertopstyle:
ridge}

63

Projeto eJovem Mdulo II: CSS

borderleft

Ajustaalargura,cor,eestilo
dabordaaolongodolado
esquerdodeumelemento

largura,cor,eestilo

{borderleft:thin
greenridge}

border

Ajustaalargura,cor,eestilo
dabordaemtodososlados
deumelemento

largura,cor,eestilo

{border:thingreen
ridge}

float

Fazcomqueoelementoflutue
paraumladoeoutrodotextoe
oenvolva.(Usadonos
elementosDIVeSPAN.)

left,right,ounone

{float:left}

clear

Especificaseoelementopode
terelementosflutuandosua
voltafazcomqueoelemento
seposicioneporbaixode
qualquerelementoqueesteja
flutuandonoladoespecificado.

left,right,ouboth

{clear:left}

pt=pontos;in=polegadas;cm=centmetros;px=pixels;

2.9. Propriedadesdeclassificao
Estas propriedades classificam os elementos em categorias que podem receber estilos.
Categoriaspodemser:listas,blocos,trechosdeblocosouitensinvisveis.

2.9.1. display
Esta propriedade define como um elemento mostrado. A propriedade none desliga o
elementoefechaoespaoqueoobjetoantesocupava(tornaoobjetoinvisvel);blockabre
umanovacaixaondeoobjetoposicionado,relativoaosoutrosblocos;listitemum
blococomummarcadordelistaeinlinedefineumelementocomopartedeumbloco.
Sintaxe:

display:block|inline|listitem|none

Exemplo:
P{display:listitem}
IMG{display:none}//desligatodasasimagens

2.9.2. whitespace
Define como o espao em branco do elemento gerenciado (se as linhas devem ser
quebradas para que apaream na tela ou no (nowrap) ou se os espaos em branco,
tabulaes,etc.devemserconsiderados(pre).

whitespace:normal|pre|nowrap

64

Projeto eJovem Mdulo II: CSS

2.9.3. liststyle
Esta propriedade e as propriedades liststyletype, liststyleimage e liststyleposition
definematributosparaobjetosdelista,comotipodemarcador,imagemdomarcadore
posio.EsseselementosnososuportadosnoNetscape.

liststyletype:disc|circle|square|decimal|lowerroman

liststyletype:upperroman|loweralpha|upperalpha|none

liststyleimage:url(url_da_imagem)

liststyleposition:inside|outside

Exemplo:
liststyleimage:url(bullet.gif)
possveldefinirastrspropriedadesatravsdeumatalhousandolisttype.Aordemdos
fatoresimportantenestecaso.

liststyle:liststyletype|liststyleimage|liststyleposition

Exemplo:
liststyle:url(bullet.gif)
liststyle:squareoutside
Logoabaixoseencontraumatabeladepropriedadesevaloresestilsticosdeclassificao
Propriedade

Descrio

Valores

Exemplo

display

fazcomqueoelementono
aparea

none

{display:none}

liststyletype

especificaaaparnciade
marcadoresdeitemdelista
(usocomelementosLI)

disk;circle;square;
decimal;lower
{liststyletype:
roman;upperroman;
square}
loweralpha;upper
alpha;none

especificaumaimagemparaser
liststyleimage usadacomomarcadordeitemde
lista(usocomelementosLI)

url(URL);none

{liststyle
image:
url(redball.jpg)}

liststyle
position

especificaaposiode
marcadoresdeitemdelista(uso
comelementosLI)

inside;outside

{liststyle
position:inside}

liststyle

inside;outsidedisk;
especificaaposio,estilo,eURL
circle;square;
{liststyle:inside
daimagemaserusadacomo
decimal;lower
disk
marcadordeitemdelista(uso roman;upperroman;
url(redball.jpg)}
comelementosLI)
loweralpha;upper
alpha;noneURL
pt=pontos;in=polegadas;cm=centmetros;px=pixels;

Projeto eJovem Mdulo II: CSS

65

2.10. Posicionamento
O posicionamento de objetos em HTML pode ser conseguido em termos absolutos ou
relativosusandoCSS2.Aspropriedadespermitemoposicionamentoemtrsdimenses
(horizontal, vertical e em camadas). Embora os recursos de posicionamento no faam
partedoCSS1,tantooNetscapeNavigator4comooInternetExplorer4osuportam.

2.10.1. position,topeleft
Estapropriedadeprecisademaisduaspropriedadesquedefinemoposicionamentodeum
objeto.Osatributoslocalizamoobjetonateladeformaabsolutaoudeformarelativa.A
origemdaposioabsolutaseraposiodoobjetononvelimediatamentesuperior.O
posicionamentorelativorefereseposioanteriordoobjeto.Sintaxe:

position:absolute|relative

left:comprimento|porcentagem|auto

top:comprimento|porcentagem|auto

Exemplo:considereasquatroimagensaseguir:
<divclass="imagem1">
<imgsrc="T1.gif"width=150height=72border=1>1Posio00
</div>
<divclass="imagem2">
<imgsrc="T2.gif"width=150height=72border=1>2Posio0200
</div>
<divclass="imagem3">
<imgsrc="T3.gif"width=150height=72border=1>3Posio2525
</div>
<divclass="imagem4">
<imgsrc="T4.gif"width=150height=72border=1>4Posio1000
</div>
Aplicandoaseguintefolhadeestilosparaposicionarasquatroimagensrelativamentesua
localizao original, obtemos a imagem ao lado (qual imagem?). Os retngulos claros
indicamaposiooriginaldaimagem:
DIV.imagem1{position:relative;top:0px;left:0px;}
DIV.imagem2{position:relative;top:0px;left:200px;}
DIV.imagem3{position:relative;top:25px;left:25px;}
DIV.imagem4{position:relative;top:100px;left:0px;}
Usandoposicionamentoabsoluto,oblocomovidoemrelaoaocantosuperioresquerdo
dobrowser.

66

Projeto eJovem Mdulo II: CSS

DIV.imagem1{position:absolute;top:0px;left:250px;}
DIV.imagem2{position:absolute;top:100px;left:0px;}
DIV.imagem3{position:absolute;top:160px;left:120px;}
DIV.imagem4{position:absolute;top:200px;left:80px;}

2.10.2. zindex
Apropriedadezindexpermiteordenarosobjetosemcamadas.umeixodeprofundidade.
Parausla,bastadefiniremcadaobjeto:

zindex:nmero

ondenmeroacamadadeexibio.Quantomaioronmero,maisaltaacamada.O
correspondecamadadotexto.Seumobjetotiverzindexmenorquezeroapareceratrs
dotexto.Sezindexformaiorquezero,aparecernafrente.Quandonodefinidoou
quandozindex:0oblocoocuparamesmacamadaqueotexto.

2.10.3. visibility
Estapropriedadeserveparatornarumblocovisvelouinvisvel.Diferededisplayporque
noremoveoespaoantesocupadopelaimagem:

visibility:hidden|visible

Exemplo:
IMG{visibility:hidden}//tornainvisveistodasasimagens
Logo abaixo, encontrase uma tabela com propriedades e valores estilsticos para
posicionamento:
Propriedade

Descrio

Valores

Exemplo

clip

rect(toprightleft
bottom)ondetopright
Especificaareadoelemento leftbottomsodefinidas {clip:rect(5pt
comoautooucomo
queaparececomotransparente
autoautoauto)}
valoresdeextenso(pt,
in,cm,px)

height

Especificaaalturadeumelemento
(maistilparaoescalonamento
autoouvaloresde
deimagens;amdiadaaparncia extenso(pt,in,cm,px) {height:50px}
sermantidaseawidthfor
ouporcentagem
especificadacomoauto)

width

Especificaalarguradeum
elemento(maistilparao
autoouvaloresde
escalonamentodeimagens;amdia extenso(pt,in,cm,px) {width:50%}
daaparnciasermantida,se
orporcentagem
heightforespecificadacomoauto)

67

Projeto eJovem Mdulo II: CSS

left

Especificaaposioesquerdade
autoouvaloresde
umelementorelativamenteou extenso(pt,in,cm,px)
orporcentagem
absolutamenteposicionado

{left:2pt}

top

Especificaaposiodapartede
autoouvaloresde
cimadeumelemento
extenso(pt,in,cm,px)
relativamenteouabsolutamente
orporcentagem
posicionado

{top:2pt}

overflow(no
herdado)

clip(aporo
Especificaomanejodaporo
inundadaoculta)ou
deumelementorelativamente
none(aporo
ouabsolutamenteposicionado,
{overflow:clip}
inundadaaparece)ou
quesederramasobreoutro
scroll(pararevelara
elemento
poroinundada)

position

Especificaseoelementopode
serposicionado

absolute(emrelao
aodocumento);
relative(emrelao
aoelementopai);
static(defaultno
posicionado)

visibility

Especificaseoelementovisvel
(espaoparaoelemento
reservadoemambososcasos)

visible;hidden

zindex

whitespace

number(positivopara
cima,negativopara
Especificaseoelementomostrado baixo,comeandodo
acimaouabaixodeoutros
1;pordefaulta
elementoscomosquaisfaz
elementossucessivos
entelhamento(observequeo
soassignados
Netscape4.0lidacomissoatravs
nmerossuperiores
doatributolayer)
aoselementos
antecedentes)
Especificaseumelementovai
sermostradonormalmenteou
numtextoprformatado

normal;pre

{position:
relative}

{visibility:
hidden}

{zindex:2}

{whitespace:
pre}

pt=pontos;in=polegadas;cm=centmetros;px=pixels;

2.11. ClasseseIDs
svezes,umpargrafotemumaaparnciadiferentedosoutrospargrafosemumacerta
partedotexto.Paramudaroestilodele,podemseincluirasdeclaraesemumatributo
STYLE.
Mas,setalprocedimentotornadifcilalocalizaoeagernciadosestilos,podeseusar
umrecurso paramarclo,deformaque seja considerado diferente.Istopodeserfeito
atribuindolheumaidentificaonica.EmHTML3.2,podeseusaroatributoID:
<PID=w779>Textoespecial</P>

Projeto eJovem Mdulo II: CSS

68

Paraalterarascaractersticasdestepargrafoagora,podeseusaroseuIDcomoseletor,da
forma:
#w779{color:cyan}
Se isto estiver em um arquivo CSS, todas as pginas que o usam e que tiverem um
elementocomoID#w779seroafetadas.SehouvermaisdeumcomomesmoID,apenas
oprimeiroserafetado.
MelhorqueusarIDagruparcaractersticassemelhantesemclasses.Umaclasseuma
variaodeumdeterminadoobjeto.Porexemplo,umtextoteatralpodetertrspargrafos
comapresentaodiferente,representandoasfalasdetrspersonagens.Sequisssemos
quecadaumtivesseumacordiferente,poderamosdeclararcadaumcomosendodeuma
classedistinta:
<pclass=padre>Euretirooquedisse,Joo</p>
<p class=grilo>Retirando ou no retirando, o fato que o cachorro enterrouse em
latim</p>
<pclass=bispo>Umcachorro?Enterradoemlatim?</p>
<pclass=padre>Enterradolatindo,SenhorBispo,Au,au,au,nosabe?</p>
Paradaracadapargrafodeummesmopersonagem(mesmaclasse)osmesmosatributos,
usase:
P.grilo{color:maroon}
P.padre{color:black}
P.bispo{color:navy}
Destamaneira,todosostextosquedeveroserlidospelopersonagem"Bispo"estaroem
azulmarinho.
Umaclassetambmpodeconterdescritoresdiferentes.Setodosostextoscitadosporum
certoautortivessemqueestaremoutracoroufonte,poderamoscriarumaclassesemcitar
odescritor:
.verde{color:green}
TodososdescritoresquetiveremoatributoCLASS=verdeseroafetados,porexemplo:
<Pclass=verde>,<h3class=verde>,<tableclass=verde>,etc.

2.12. Links(pseudoclassesepseudoelementos)
Paraseletoresespeciaisquemudamdeestado,comootextomarcadocom<A>,possvel
atribuirpropriedadesdiferentesparacadaestado:

Projeto eJovem Mdulo II: CSS

69

Oquevemosoquemudaascaractersticasdoslinksnovisitados,ativosevisitados.
Assimcomoqualquerseletor,oslinkspodemsercombinadoscomoutrosdescritores:
P,A:link,H2{color:red}

2.13. Agrupandoelementos(spanediv)
Oselementos<span>e<div>sousadosparaagrupareestruturarumdocumentoeso
freqentementeusadosemconjuntocomosatributosclasseid.
Nestalio,veremoscomdetalhesousodoselementosHTML<span>e<div>,noquese
refereasuavitalimportnciaparaasCSS.

Agrupandocom<span>

Agrupandocom<div>

2.13.1. Agrupandocom<span>
Oelemento<span>umelementoneutroequenoadicionaqualquertipodesemntica
aodocumento.Contudo,<span>podeserusadopelasCSSparaadicionarefeitosvisuaisa
partesespecficasdotextonoseudocumento.
Umexemplodesteusomostradonacitaoabaixo:
<p>Dormircedoeacordarcedofazohomemsaudvel,ricoesbio.</p>
Vamossuporquequeremosenfatizarnacorvermelhaosbenefciosapontadosnafrase.
Para isto, marcamos os benefcios com <span>. A cada span, atribumos uma class e
estilizamosnafolhadeestilos:

Paraveroresultado,digiteaslinhasacima!
claroquevocpodeusaridparaestilizaroelemento<span>.Mas,comovocdeveestar
lembrado,deverusarumanicaidparacadaumdostrselementos<span>,conforme
foiexplicadonalioanterior.

2.13.2. Agrupandocom<div>
Enquanto<span>usadodentrodeumelementonveldebloco,comovimosnoexemplo
anterior,<div>usadoparaagruparumoumaiselementosnveldebloco.
Diferenas parte, o agrupamento com <div> funciona mais ou menos da mesma
maneira.VamosverumexemplotomandoduaslistasdepresidentesdosEstadosUnidos
agrupadossegundosuasfiliaespolticas:

70

Projeto eJovem Mdulo II: CSS

Enafolhadeestilos,podemosagruparaestilizaodaseguinteforma:

Eofazeroagrupamentodaseguinteforma:

Comoresultado,temos:

Nos exemplos mostrados acima usamos somente <div> e <span> para simples
estilizaes, tais como cores de textos e de fundos. Contudo, estes dois elementos
possibilitamestilizaesbemmaisavanadas.
AtributosdoCSS
AtributodeCSS

background
background

Oqueeleformata

Cordefundo,imagem,
transparncia.
Rolagemdofundo/

AtributodeCSS

Oqueeleformata

borderleftcolor

Cordabordacitada.

borderleftstyle

Estilodabordacitada.

71

Projeto eJovem Mdulo II: CSS

attachment
background
image

Marcad'gua.
Imagemdefundo.

borderleftwidth

Larguradabordacitada.

Cordefundoou
Largura,estiloecorda
borderright
transparncia.
bordadireita.
background
Posicionamentoda
borderrightcolor
Cordabordacitada.
position
imagemdefundo.
background
Configuraoladoalado
borderrightstyle
Estilodabordacitada.
repeat
daimagemdefundo.
Largura,estiloecorde
border
borderrightwidth Larguradabordacitada.
todasas4bordas.
Largura,estiloecorda
borderbottom
borderstyle
Estilodetodasas4boras.
bordainferior.
borderbottom
Largura,estiloecorda
Cordacitadaborda.
bordertop
color
bordasuperior.
borderbottom
Estilodacitadaborda.
bordertopcolor
Cordabordacitada.
style
borderbottom
Larguradacitadaborda. bordertopstyle
Estilodabordacitada.
width
bordercolor
Cordas4bordas.
bordertopwidth Larguradabordacitada.
Largura,estiloecorda
Larguradetodasas4
borderleft
borderwidth
bordaesquerda.
bordas.
Elementosflutuantes
Tipodefiltroaplicadoao
clear
filter
esquerdaoudireita.
elemento.
Partevisveldeum
clip
float
Seoelementoflutua.
elemento.
Estilo,variante,peso,
color
Cordeprimeiroplano.
font
tamanhoealturadalinha
dotipodefonte.
Tipodeponteirodo
Incorporaodafonteao
cursor
@fontface
mouse.
arquivoHTML.
Seoelementoexibidoe
display
oespaoreservado
fontfamily
Tipodefonte.
paraele.
Espaoesquerdado
fontsize
Tamanhodafonte.
paddingleft
elemento.
Espaodireitado
fontstyle
Fonteitlico.
paddingright
elemento.
Espaoapartirdamargem
Fontevariant
Fontebold.
paddingtop
superiordoelemento.
Pesodafontedeclaroa
Inserirquebradepgina
fontweight
pagebreakafter
negrito.
depoisdeumelemento.
Alturaexibidaao
Comooelemento
height
position
elemento.
posicionadonapgina.
@import
Folhadeestiloa
textalign
Alinhamentodotexto.
importar.

backgroundcolor

72

Projeto eJovem Mdulo II: CSS

left

Posiodoelementoem
relaoamargem
esquerdadapgina.

textdecoration

letterspacing

Distnciaentreasletras.

textindent

lineheight

Distnciaentrelinhasde
base.

texttransform

liststyle

Tipo,imagemeposio
doestilodalista.

top

Marcadordeitemde
verticalalign
lista.
Posiodomarcadorde
liststyleposition
visibility
itemdalista.
Marcadordeitemdelista
liststyletype
width
alternativo.
Tamanhodetodasas4
margin
zindex
margens.
Tamanhodamargem
marginright
position
direita.
Tamanhodamargem
marginbottom
textalign
inferior.
Tamanhodamargem
margintop
textdecoration
superior.
Exibiodeimagensque
overflow
somaioresdoquesuas
textindent
molduras.
Espaoemtornodeum
padding
elementoemtodosos
texttransform
lados.
Espaoapartirda
paddingbottom margeminferiordeum
top
elemento.
liststyleimage

verticalalign

Sublinhado,sobrelinhado
ouriscado.
Recuodaprimeiralinhado
pargrafo.
Transformaoparatodas
maisculas,minsculasou
inicialmaiscula.
Posiodoelementoem
relaoapartesuperiorda
pgina.
Alinhamentoverticaldo
elemento.
Seelementovisvelou
invisvel.
Larguradoelemento.
Posiodoel
Comooelemento
posicionadonapgina.
Alinhamentodotexto.
Sublinhado,sobrelinhado
ouriscado.
Recuodaprimeiralinhado
pargrafo.
Transformaoparatodas
maisculas,minsculasou
inicialmaiscula.
Posiodoelementoem
relaoapartesuperiorda
pgina.
Alinhamentoverticaldo
elemento.