Você está na página 1de 608
O guia amigo sobre HTML & CSS Use a Cabegca! (Head First) \\ um guia de aprendizado para a criacao de paginas ‘Web baseadas em padroes Inicie sua carreira na Web em um capitulo Aprenda porque tudo o que seus amigos sabem sobre estilo provavelmente esta errado Exercite sua mente com 100 quebra-cabegas e exercicios Evite os embaracosos erros de validagéo Corn Elisabeth Freeman & Eric Freeman =~ Elogios a Use a Cabeca! HTML com CSS e XHTML reseniaczo de paginas Web. E! rretamente xidade de Harementalcheia de fig. ym preciso a melhor m: Wea no browser para e fa item no Danny Goodman, autor de Dynamic HTML: The ic e Elisabeth Free Ken Goldstein, vice-presidente executive e diretor gerente da Disney Online -AWeb seria muito meth ada progr LL David Baron, da Mozilla Corporation, http://dbaron.org Programo em HTML © CSS ha dk P foi fesumido com clare u cativ HTML era algo que voce ta, advento dos padr : novimento pela Hestivel. do ponto de vista do negécio ou idade sox fepriadamente, nao @ mais complicado do qu cla canceitos -Hlke Davidson, CEO da Newsvine, Inc "As informagées incluidas vro S80 as mesm ediverda,q *Té bom, voces fizeram um livo Coniablidade t20 simples qu Janice Fraser, CEO da Adaptative Path Mais elogios a Use a Cabeca! HTML com CSS e XHTML Eu 68 Use @ Cabecal HTML com CSS M Sally Applin, designer de interfaces e grande artista, http://sally.com Agora e -Robert Neer, diretor de desenvolvimento de produtos da Movies.com -Nowton Lee, editor ~ chefe da ACM Computers in Entertainment, hitp schmitt@christoph oubou o livre. Ela nu design para Web, v1 a e nosso flho, nossa familia... Se eu tiver so i 0 ivr a quand David Kaminsky, inventor master da IBM TTenha cuidado. Se vocé for daqueles que léem a noite antes de dormir, terd que ler Use @ Cabegal HTML com CS: jurante o dia. Este livro acorda 0 seu cérebro Pauline McNamara, Center for New Technologies and Education da Universidade de Fribourg, Suica Elogios anteriores a outros livros dos autores memorizer. E nao é apenas um monte de figuras: figuras humanas, que tendem a interessar outros humanos di arte. Estérias, porque os humanos adoram a narrativa (estérias sobre pizza e chocolate. Preciso dizer m de tudo i muito engragado Bill Camarda, READ ONLY A clareza, o humor as substanciais doses de inteligéncia deste liv 0 tornam o tipo que ajuda até mesmo nao-programadores a pensar bem na solugao de problemas, sto Town, Cory Doctorow, co-editor de Boing-Boing e autor de “Down and Out in the Magic Kingdom” e “Someone Com Someone Leaves Town’ Sinto como se toneladas de livros tivessem sido tiradas de cima da minha cabeca. Ward Cunningham, inventor do Wiki e fundador do Hillside Group imento @ a facilidade de leitura, Ele Este livro & quase perfeito por causa da maneira © 6 otimo de ler. E um dos poucos livros sobre software que ja li e que considera indispensaveis — eu colocaria t David Gelernter, professor de ciéncia da computagio da Universidade de Yale ¢ autor de “Mirror Worlds” “Machine Beauty’ Um merguiho de cabeca no reino dos padrées, um lugar onde coisas complexas se tornam simples, mas onde coisas sit podem também se tornar complexas. Nao consigo pensar em guias melhores do que os Freemans ~ Miko Matsumura, analista da industria da The Middleware Company. Ex-evangelista chefe de Java da Sun Microsystems Daniel Steinberg, editor-chefe do java.net le em todos nés. A referéncia correta para estratég asualmente legal que urrar um monte di © livro tem o tom exato para o codificador nerd & volvimento faz meu cérebro funclonar sem ter de Travis Kalanick, fundador do Scour and Red Swoosh, membro do MIT R100 Eu lteralmente amei este lve. na frente da minha esposa Satish Kumar Use a Cabeca! HTML com CSS e KHTML 2° Edicao Elisabeth Freeman Eric Freeman Use a Cabecal (Head First) HTML com CSS & XHTML 2*Edicdo Do original Head First HTML with CSS & XHTML Copyright © 2008 da Editora Alta Books Ltda e itled Head First HTML with CSS & XHTML Freeman fedia, Inc. Copyright © 2006 by O'Reilly Media, parte de escrito da editora, podera ser reproduzida ou transmitida sejam qual forem os meios em fotografico, gravagao ou quaisquer outros. Todo o esforco foi feito para fornecer a mais completa e adequada informacao, tudo a editora e o(s) autor(es) no assumem responsabilic uultados e usos da inf mendamos aos leitores testar a informagao, bem como tomar todos os cuidados necessério da efetiva utilizacdo. Este livro no contém CD-ROM, disquete ou qualquer outra midia, s e protegid m autorizagao prévia eletrénico, mecéinica, de pelos Erratas e atualizagées: Sempre nos esforgamos para entregar a vocé, leitor, um livro livre de erros técnicos ou de contetido ‘6m, nem sempre isso 6 conseguido, seja por motivo de alteracdo de software, interpretago ou mesmo quando alguns original de alguns livros que traduzimos, Sendo assim, criamos em nosso site br, a secdo Erratas, o corregao, wwwnw.altabooks.cor livros '0 encontrado em nossos Avisos e Rentincia de Direitos: Este liv 6 vendido como esta, sem garantia de qualquer tipo, seja expressa ou implicita jos e reconhecidos como Marca Registr Marcas Registradas: Todos os termos meni responsabilidade de seus proprietarios. A Editora informa no estar associada a nenhum produto e/ou forecedor apresentad > livro, No decorrer da obra, ns, homes de produtos e fabricantes podem ter sido utllizados, e desde ja a Editora uso 6 apenas ilustrativo e/ou edu scimento do prod fabrican {0 a0 lucro, favorecimento ou desme! Produgao Editorial: Editora Alta Books Coordenacao Editorial: Fernanda Silveira Traduca: Betina Macédo Revisdo: Pedro Sangirardi Revisdo técnica 2* Edigao: Equipe Alta Books Diagramagao: Flavio Damasceno de Julho de 1992 proibe expressamente o uso coletivo s ‘a cOpia ilegal do original. Esta pratica generalizada nos estab jas dos livros a ponto de impossibilitar os autores de criarem novas obras. -40 dos Autores de Use a Cabegal HTML com CSS 6 XHTML Elisabeth Freeman é escritora e desenvolvedora de software. Esteve envolvida com a Internet desde 0 principio, sendo co: fundadorab do The Ada Project (TAP), um premiado site voltado para mulheres que trabalham com computagao, adotado agora pola ACM, Mais recentemente, Elisabeth liderou trabalhos de pesquisa @ desenvolvimento em midia digital na Walt Disney Company, ‘onde co-inventou 0 Motion,um sistema de contelido que distribui terabytes de video todos os dias aos usuarios da Disney, da ESPN e do Movies.com Elisabeth é cientista da computacao por formagao © tem Jomas universitarios em ciéncia da computagao pela Universidade de Yale e pela Universidade de Indiana. Tem trabalhado em diversas areas, incluindo linguagens visuals, transmiss6es RSS e sistemas Internet, Tem sido também uma ativista pelas mulheres na computagao, desenvolvendo programas que encorajam as mulheres a se envolverem na rea, Hoje em dia, vocé a encontra bebendo café ou chocolate quente ao lado do seu Mac, embora ela sonhe com o dia em que todo mundo usard o Scheme Elisabeth sempre adorou caminhada ao ar livre desde a sua infancia na Escécia. Quando esté ao ar livre, sua cdmera esta sempre ao seu alcance. Ela é também uma avida tariana e amante dos animais, Voc® pode enviar um e-mail para ela (em inglés) em Eric Fi arquiteturas de midia e de software, Ele acabou de fechar quatro ‘em um emprego dos sonhos -dirigindo trabalhos de banda larga e wireless na Disney — e voltado para a programagao, criando softwares legals hackeando Java e Macs. sman & um cientista da computagao apaixonado Eric passou boa parte dos anos 90 trabalhando em alternativas & metafora do desktop com David Gelernter (@ os dois ainda esto perguntando “por que eu tenho de dar um nome ao meu arquivo’), Com base nesse trabalho, Eric obleve um Ph.D, na Universidade de Yale em 97. Foi também co. fundador da Mirror Worlds Technologies (ja vendida), criando uma verso comercial do trabalho da sua tese, 0 Lifestreams. Em uma vida anterior, Eric criava software para redes @ sus computadores. Talvez voce o conheca de livros como JavaSpaces Principles Patterns and Practice. Eric tem boas lembrangas da implementacao de sistemas tuple-space em Thinking Machine CM-5s e da criagéo dos primeiros sistemas de informagao da Internet para a Ni a no final Eric atualmente mora em Bainbridge Island. Quando nao esta fevendo texto nem cédigo, vace o encontrara passando mais tempo ajustando seus programas do que assistindo TV no ‘seu home theater, ou tentando consertar um jogo de videogame dos anos 80 chamado Dragon's Lair. Ele também n rtaria de passar a noite como um DJ de misica eletrénica reva para ele (em inglés) em eric@wickedlysmart.com ou g em http: www.ericfreeman,com. vio (vesumide) Sumiarie (de verdade) Introdugao Sua mente concentrada em HTML e CSS. Aqui 6 n érebro est ndo um favor cerificando-se de s do A linguagem da Web A unica coisa que separa vocé da Web é a capacidade de aprender a falar a linguagem: VA além com o hipertexte Conhega o ‘HT’ do HTML Alguém disse “hipertext "2 O que é isso 6 te eb, No Capital ‘ HTML e descobrinos que é uma étima inguag aga L) para a descrigdo da inas Web, Agora vam hada no HT do HTML, o hipe peg deremos como oft relative gal nto E Cabe Oquel ‘ que f Plan amin 2 0s problemas comas figu Constragiie de blocos Construgao de paginas Web Alguém me disse que eu criaria paginas Web neste livro. ej ap fantéstices com es vera uma pagina Web de oncepgdo ns toques fi precisaré de s ferecendo o ho a Do rascunho para o Do esbogo para uma pigina Web icione u quo A portris dow Jequot A construsio de li iTM 7 Conecte Uma Viagem a Weblandia As paginas Web sao o melhor prato servido na Internet. ks Sumério \dicione Imagens a suas paginas Conhega a midia Sorria e diga “xis”. Na verdade, sorria e diga “gif”, “jpg” ou “png” —e Come sbalhacomimagen 1 : s:conhesao demento um pol c Formulisies XHTML Torne-se interativo Até aqui toda sua comunicagao na Web tem sido da seguinte maneira: da sua pagina para seus visitantes. Nossa, nao ve s formulérios HTML. Apendice: as sobras Os dez melhores tépicos (que nao mencionamos) Falamos sobre varios assuntos, vocé ja esta terminando o livro. Vamos mor de saudades de voo8, mas antes de o deixrmes ir, no seria coreto mandé-o para o mundo sem um pou s de preparaglo, Nao ¢ peste pe “originalmente nds incluimas tudo o que er sobre XHTM sido explicado nos capitulo perfetamente, mas nit artes para este cap sive colocar tudo 0 que v precisa sa tamanho da fonte para 0,00004. Coube tud 3 tudo fora e mantivemos as Frames, Mubimidiae Fl S74 Ferramentas para criagio de paginas Wel 5 Scripts do lado cliente 5 Scripts do lado servidos Deixe tudo afinado para 0s mecanismos de busca, Um pouco mais sobre folhas de est a aimpressic P : LEO Come utilizar este livie Introdugao HTML A quem se destina este livro? Se sim” a qualquer uma destas perquntas © Voce tem acesso 2 um computador com um browser Web e um editor de texto? > sseja aprender ou entender como se erla paginas Web ou deseja lembrar > se fa ndo as melhores técnicas e os padres mais recentes © Voce prefere uma conversa estimulante durante uma festa a palestras académicas aborrecidas ¢ sem atrativos’ Quem provavelmente deveria evitar este livro? 4 voc® responder “sim a qualquer uma destas perguntas: @ Vocé ¢ completamente leigo no assunto “computadores”? 1 um usuario avangado, mas @ preciso ent es simples de edigao de um livre de referéncia? © Voce tem medo de tentar algo diferente? Vocd profere fazer um tratamento de canal a misturarlistras e bolinhas? Vooé acre q tecnico nao pode ser sério se as tags do HTML rem antropomorfizados’ a ie Sabemos 0 que vocd esté pensando E também sabemos 0 que o seu cérebro esta pensando Isso deve ser importante! Nao esqueca! Consideramos o leitor de “Use a Cabega” como um aluno. »—B les fos ae te : ‘ € Capture e mantenha a atengao oa Yr. a j rovoque suas en Estamos falanda de emaetes Metacognigao: pensando sobre o pensamento 1 so de m a yarando est e Web. F avelmer " B voce de q capaz de ap tos. E, pata i preci Para cap 7 ro, ou de experiéne ah : le cétebro, D " n 1 ane quant 8 estard em umn an faré 0 que puder para impedit Como vocé faz para que seu cérebro pense que HTML e CSS sao tao importantes como um tigre? y c gue é caps render ¢ lembrar-se m ni " pata ele, mas ele fica olhandk acho qu mp ida ¢ fazer qualquer coisa que aumente a atividade cerebral, : Je atividades cere coisas na pig par lu coisas que sio comprovadamente capazes de ajuda 0 a trabalha . . tudos que mostrar . deserevem (ao invé jualquer outro h Jagio en ! $ : i i rch em q . ntre voce e um livto! Por outro lado, x q ik 50 xxv Veja o que NOS fizemos figuras, ° U redundancia, U nciras Inesperadas < ‘emocional divertimento, surpresea ieresse estilo conversacional; Ss 10 atividades mittiplos estilos de aprendizado} Pontos de Bata \ ambos os lados de seu eérebro, e : A voce ndo estard gastando um dendrite extra sequer pessoas. | 0 \ Veja o que VOCE pode fazer para seu cérebro 1 obedecer @ Diminua a marcha. Quanto mais vocé entender, @ Fale sobre o livro. Bem alto. menos ter que memorizar. @ Faca os exercicios. Faga suas préprias anotacées, ® Ouca o seu cérebro. Use um lapis. Leia “Nao ha perguntas tolas’ I » ® Sinta alguma coisa! elas sdo parte do conteuido principal @ Faca que essa soja a ultima coisa que vocé leia antes de dormir. Ou pelo menos a ultima coisa desafiadora @ rie alguma coisa! @ Beba Agua. Muita mesmo. xxv Leia-me Comecamos ensinando o HTML basico, entdo o HTML 4.0 baseado em padrées e finalmente o XHTML. Nao explicaremos cada um dos elementos ou atributos do HTML ou todas as, propriedades das CSS que ja foram criadas. Este livro defende uma separacao clara entre a estrutura e a apresentagao de suas paginas. xxv As atividades NAO sao opcionais. redea, Nao pule os exercicios. 0s exemplos séo os mais simples possiveis. Como usar esse Revisores técnicos Berny Marin Nossos revisores Lhe in ibe m equipe de revisio Johannes de Jong rganizou ¢ liderou todo 0 esforeo, 20 “pi fez tudo funcion: perfcitamente, Pauline McNamara, “co-gerente” do esforeo, juntou tudo e foi a pr jontar quando nossos exer am um pouco mais para velhatia dc «que para tkima moda, Tada a equipe provou o quanto precisiv se conhecimentos eéenicos e atene Valentin Crettaz, Barney Marispini, Marcus Green, Ike Van Atta, David O'Meara, Joe Konior Corey McGlone ni leisaram pedra sobre mu im super obrigado a Louise Barr, nossa Web de e ateve genuinos en cio a0s designs ¢ a0 nosso uso do XHTML e CSS rd deva $ Xxx Agradecimentos” Revisées ainda mais técnicas: abe a " 7 David Powers 7 com Ds Jo que antes. Obrigado, David. Na O'Reilly No le a Brett McLaughlin, que abu : culo actif N agradecin a toda da OR Tony Artuso ¢ Kyle Hart; tod atket utilizagio. Obrigado a Ellie Volkhausen pelo d Pi " ° 10, ea Karen Montgomery p live \do, como sempre, a Colleen Gorman por su ido). E; nito poderiam Willing ¢ Claire Cloutier lisponivel e nos apoiando. F ade U abecal e pe a ei f Kathy Sierrae Bert Bates: Kathy Sierra e Bert Bates, nosso" =~ Greg Corrin, Glenn Bisi i Mike Loukides Tim OReilly Mike Hendrickson 1 ‘Comece bem este capitulo fazendo download dos comece a entender o HTML A linguagem da Web Para me conhecer melhor, voe8 precisa falar a linguagem universal. Voc8 sabe, o HTML e as CSS. Anica coisa que separa vocé da Web é a capacidade de aprender a linguagem: HyperText Markup Language, ou HTML. Portanto, prepare-se para algumas aulas, de linguagem. Depois deste capitulo, vocé nao s6 entenderd alguns elementos basicos do HTML, como também sera capaz de falar HTML com um pouco de estilo. No final deste livro vocé estard falando HTML como se tivesse nascido ‘em Webléndia. édigos em portugues no si Itabooks.com.b A Web Video matou um artista HTML. Vamos da Internet 0 que um servidor Web faz? B 2,8 | lan 0 que o browser Web faz? O que vocé escreve (o HTML)... 0 que o browser cris... Bem-vindos ao Bar Use a Cabega @ Perguntas idictas (TML 6 apenas um monte de loco em volta do meu texto? P: A marcagao parece bobagem ‘mo o Microsoft Word ou algun browser decide a forma de TML? “Pe Por que pris ‘head> ——— - : D> bebidas /elixir.html”> Cabega HTML t Aponte seu Lapis — | Sua grande chance no Café Starbuzz 0 Café Starbuzz me como a cafeteria que crese uw alum na esquina, olhe para ‘eram tio rapidamente que ainda nem qui esta sua grande chan ‘comprando seu cha Chai Starbuzz, v (J A.Dar um banho no cachorro. lado d C1 B. Finalmente colocar minhas contas CL) DMarcay em dia yma hora no dents Cabega HTML ntentes por vocé nos ‘judar*. Veja £6 0 que hg ar es Si : epi Web 3 gee seg? ie gee ge 9 wre chara peje CAs SCE precsanes de teh intone 2 1 errata Cass, P8 LPF . u seme inte es lo ir, Se lt Cate arb com te, 8 2,35 fayrese te fore c mee de eae Capcom, #4189 Ane mre te empress tite fers © PIS. Ch Cow, OBS in hele conbrerbats com cpt, MAS jeteen meAponte seu lapis — — = Dé uma olhada no guardanapo. Vo: segue determinar a estrutura que ha rele? Em outras palavras, ha ttulos 6bvios? Paragrafos? Falla alguma coisa como um titulo para a pagina? 4 em frente e marque no guardanapo (usando seu lapis jer estrutura que eja € adicione tudo 0 que esta faltando. Voc® encontrara a stas no final do capitulo Cri « pigina Web do Starbuzz E claro que 0 tnico problema com tudo isso é que vocé ainda nio criou nenhuma pagina Web em sua vida. Entretanto, foi por isso que vocé decidiu usar sua cabega para aprender o HTML, ndo é mesmo? Nao se preocupe, veja o que vocé fara nas préximas paginas: Criara um arquivo HTML usando seu editor de texte favorito. Digitara 0 cardapio que o CEO do Starbuzz escreveu no guardanapo. 8 8 © saivara o arquivo come “indexchtm? e Abrira 0 arquivo “index.htmi” em seu browser predileto, se acomodara na cadeira e observara a magica acontecendo. esta pagina Web 36 precisa estar correta como tam " Como eriar um arquivo HTML (Mee) Todos os arquivos HTML sio arquivos de texto, Para cria m arg) 1cé precisa de uma aplicagio qu bermita texto simples sem en eum mos de texto pu mples ancionar bem, E, se voc’ est indo oW pul umas piginas para obter as inst necessir sua pasta Applications. Finder Window” do menu File e ent srar pela : ntrilo, clique i 7 a 4 s » Segundo passo: Localize e execute TextEdit. * m sua pasta Applications, Portanto, faga uma rolage ara baixo atéen TextEdit. Pa duas ve TextEd rm ee Terceiro passe (opcionall Mantenha o TextEdit em seu Dock menu instantini ha “Keep in Dock”. D Quarto passo: Altere as preferéneias no TextEdit Por padrio, o TextEdit que significa que ele adic fica em modo “rich text”, 0 nara sua propria lurante o salvamento -¢ isso mio é 0 que vocé quer. Portanto, vocé precisa aterar as preferéncias » TextEdit para que ele salve seu trabalho como escolha o item de menu “Preferences” no menu TextEdit quivo de texto puro. Para fazer isso, primeiro Quinto pass Defina as preferéncias como Plain text Uma vez na caixa de didlogo “Preferences”, hi tré coisas que voc’ deve faze Primeiro, escolha “Plain text” como o modo de icio padrio na guia “New Document ido, na guia “Open and Save”, certifique-se d que “Add txt extension to plain text files” este} desmarcado Por tiltimo, certifique-se de que “Ignore richt text commands in HTML files” esteja marcado. Isso é1u fechar a caixa de didlogo, clique n botio vermelho no canto superior esquerdo. Sexto passo: Saia ¢ reinicie Agora saia do TextEdit escolhendo “Quit” no menu idit eentio reinicie a aplicacio. Desta ver, vocé vera uma janela sem os menus de formataci le texto elegante no topo da janela. Voc# agora est pronto para criar um arquive HTML Cabega HTML Como criar um arquivo HTML (Windows) —— Se voce esti lendo esta pagina, deve ser um usuario do Windows XP. Caso contririo, pule algumas paginas adiante. Se vocé é daqueles que se senta li no. ‘undo e nio faz perguntas, tudo bem para nds t Para criar arquivos HTML no XP (ou no Windows Vista), vamos usar 0 Bloc de Notas (Notepad, se sua versio do Windows for em inglés). Ele pode ser encontrado em qualquer versio do Windows; o prego é correto ¢ ele é muito facil de usar. Se voce j possui um editor no XP, tudo bem; apenas certifique-se de que ele consiga criar um arquivo de texto simples com uma extensio * html Assumindo que voc’ esteja usando 0 Bloco de Notas, veja como criar seu primeiro arquivo HTML Primeiro passo: ‘Abra o menu Iniciar (Start, na verstio em inglés) e navegue até o Bloco de Notas chegar Is clicando no menu “Iniciar”, entio em “Pr finalmente em “Acessorios". Voc’ veri 0 Bloco de Notas listado ali Segundo passo: Abra o Bloco de Notas Um: y N Terceiro passo (opcional): No ocult s extensées de tipos de arquivo Expl XP ocul nsbes det hecidos. Por Emu nnfuso quando o XP mostra Perguntas idictas P Por que estou usando um editor de texto simples? Néo ha ferramentas poderosas como © Dreamweaver, FrontPage e o GoLive para a jo de paginas Wob? Pu tno oer, mas quel browser Opera, © que devo fazer? PP estou criando estes arquivos por conta prépria em meu computador, Como os vere na Webrinternet? Ree — : Enquanto isso, de volta ao Café Starbuzz... um cont n seu editor, sal a 1m i bebidas que f rdanapo do CEO; es das io o contetido de sua pagina. Adicion: mas m s HTM ido uma estrutura, ji, ja. P igi nteido t dicione “Bebidas do Café Sta po da pigi Cabeca HTML Love sua pagina para um test drive... acabou ‘o HTML! eat» a> 7 p a>! as anny om

ea» @ Agente i chegou? | ‘ Cabega HTML { Outro test drive Siga om frente @ altere seu arquivo “index.htm!” adicionando as tags , , , <ititle>, <body> e </body>. Uma vez feito isso, salve suas alteragées e recarregue 0 arquivo em seu browser. ans ene Starbuzz Coffee's Mission a +> le] +) 2 fie:ricapituiov/starouzzimission nm Café Starbuzz Bebidas do Café Starbuer Cappuccino, RS 1,89 conteide, tas de sbertore tas de fechamerto —~_—_Y’ SHIS) Bebidas do Café Starbuzz R/HiS —_—_——— elements tags canrespondentes Leb etre ee OE Cea eee PCC Oe kOe retin st im ey Elemento = Tag de Abertura + Conteudo + Tag de Fechamento Perguntas idictas PB Noe ue HTML em algunas 1 fachamento possuer PODER DO CEREBRO <p id=“misturadacasa”> </p> to 6 tag de abertura + conta Exercicios ‘ Certo. Ja temos a estrutura pronta, porisse agora vamos nos concentrar em sua apresentacao. ‘océ jd sabe que o HTML the descrever aestrutura do c browser exibe seu HTML, ele ut para apresentar essa estrutura. Ent lesigner d B aqui ntram as CSS. As CSS <title> <style type= “text /css”

atribute ttle Mis site do Cafe Starbuss beay>

de ver, muito a 0 site *myPod precisa fazer @ adicionar um ele! cada foto que queira inc! seattle jpg’ portanto nto para em seu browser e dé uma olhada tle para redimensionar 3s imagens. Vocé logo minha imagem? R: 0 forme permite que vo’ ira quais niveis de qualidade especifique o nivel de qualida 4rios para sua imagem e par R: vo 08 atributos “width” & imagem necesséria. Quanto menor a dgina Web que esta deservolvendo, height” para redimensionar uma imagem qualidade, menor 0 tamanho do arquiv & também saberd quando usar JPEG mas essa no é uma boa ida, P na cab de dogo “Save for Web, vera que trio a qualdade como o tama oP: © que 60 nimaro 30 préximo & sai m browser trabalhe p fam & medida que vooé altera—_legenda “Quality” na caixa de didlogo —_redimensioné-la- da n cde qualidade “JPEG Options"? quando redimensioname R: Eo ndmero que 0 Photoshop Elements que suportam esse recurso. Sui a opgao de auto mo qualidade “Medium’. O width” e “height” existem na verdade pa JPEG na verdade usa uma escala de 1- _—_ajudarem o browser a descobrir quanto 100%, e “Low” (baixa), “Medium” (médio), _espago deve reservar para aquela High apenas valor imagem; se vocé os utl edenidos usados por muta aplicagbes coin com a lrgurae a atira para 6 imagem, Corrija o HTML de “myPod” Depois de salvar a imagem, voct poders stir do Photoshop Elements, Agora, tudo o que voet precisa fazer é aera a pigina “index.html do “myPod” para inclur a nova versio da foto “seattle. med.jpg”. Aqu para photos mais duas de Seattle e algumas nsionadas para menos de 800 Vocé encontrai fotos/seattle med. jpg" al Nou

 

 

Sorbeese's verbade pare
aicianar tombén dgomes de
suas prdprias fotos agi
Lenbre-se apenes de

  

 

 

iPod no cents

 

 

 

ipod om Birmingham em una cabine telefénica’>

  

 

no “index.huml” paraa versio em miniatura de cada fotc @ Acicione um link de cada miniatura para uma n pagina contendo a foto mai Crie um novo diretério para as miniaturas Para manter a coisas organizadas, crie uma pasta separada miniatura, Caso contririo, vocé acabara com uma past miniaturas amonto poders ser bastan rabalhando com os arquivos de exemplo do liv 35 Adicione as suas paginas Crie as miniaturas Vocéj tem um lugar para colocar as miniaturas, portanto vamos crié-las, Comec abrindo *seattle_med,ipg” em sua aplicagio para edicio de fotos. Vocé dever nsionla Js usando o mesmo método utilizado para criar a Com a imagem jé redimensionada, escolha “O.k” e salves com 0 mesmo nome mas Tenha cuidado: se voct a salvar na pasta “fotos Agora repita tudo isso para cada foto que esteja na pasta “fotos”, ~~, (K€ quanto as fotos de 4) as, vemos duas op¢ ser explora er exple a 169 Adicione a8 suas paginas Refaga o HTML para usar as miniaturas gora voc’ sé precisa alterar 0 HTTML para que os elementos peguem as imagens na pasta “miniaturas” ao invés da pasta “fotos”, E, como voc’ esta usando mminhos relativos como “fotos/seattle_med.jpg”, isso seri muito simples: para cada clemento , tudo 0 que voce precisa fazer € alterar a pasta de “fotos” para Adicione a8 suas paginas Love “myPod” para outro test drive _ ns Ahh. Muito melhor. Os vsitantes podem ver todas as figuras dsponi fsidade qual precsamos encontrar uma mane Bem-vndo ao “meuiPo! is de uma s6 ver, e saber com mais : = pertence a qual cidade. Agora locar um link de NU» a paraaimagem m: Espere um momento, voc® ni ‘cha que est4 indo répido wi? As imagens estavem cima em cima da ou est ado a lade, Certo; mas lembre-se de que o elemento 6 um elemento em linha. Em outras palavras, nio estamos “indo ripido demais”, Como éum elemento em linha, ele nio faz d Assim, se houver varias ima que as quebras ha sejam inseridas ant lepois da exibicio do element st HTML, o browser se ua janela for larga o suficiente as colocari lado alad aco para exibiu-as uma acima d nio estavam lado a lado porque o browser no xibi-las uma do lado da outa. Ao invés disso, utra, Um browser sempre exibe 0 espago uum elementa de bloco. Se vocé olhar que asim fertcalmente, com uma acima da: para as capturas de tela, ve gens estio dispostas em espago entre elas Esse & outro sinal de que é um elemento em linha. Adicione as suas paginas Transforme as miniaturas em links oct jes quase li. Agora s6 precisa criar um link de cada miniatura para sua versic maior. Veja como isso ira funcionar eto Click oc xn fazer isso, duas coisas sio necessirias @ Uma pagina para a exibigéo de cada foto com um titulo que descreva seu conteddo. © Um link de cada miniatura em “index.htm!” para a pagina da sua foto correspondent. Primeiro vamos criaras paginas, e entio voltaremos e terminaremos os links. Adicione ‘8 suas paginas Crie paginas individuais para as fotos Primeiro, erie abaixo da pasta “myPod” uma nova pasta, chamada “htm!”, para @ B arena todas essas paginas individuais ra vamosriar um arquivo HITME para cada foro Se foto se chama ale med py, entio chamaremos arquivo HTML de “seattle_ med htm” pra semos corentes Em cada arquivo FITML, teremos um titulo descrevendoafoto, sudo pela propria foto, Vejao HTML pars a primeira foro de Seattle, Todas as spi Ayer ert masse C55 sale de / farna novamente, spenas para : Hote da pagina Ue deve smarter uma car consivtente na eas descrover afore, pigina ERercicios e exemalo deste capitulo, vi ra “seattle downtown jpg”. Cr ue a pagina para funcionar ant ‘algum problema em ctiar a pagina, 8 as paginas uma pagina chamada dd seguir em frente vooé der uma olhada na pasta “him” dos arqui naires jd esto Ia, excelo uma - a pa ntown html" na pasta ‘hime teste-a. Col ta no final do capitulo, se tive com as alte encontrar are 73 Adicione as suas paginas, E entao, como coloco links em imagens? junto de paginas HTML Adicione os links das imagens ao arquivo “index.html” Perguntas Idiotas P- quando colocamos um elemento em voltado _P:Nés simplesmente no podemos erar um lnk para a texto, parece um sublinhado. Porque nao temos algo imagem JPEG dlretamente, sem todas aquelas paginas HTML? equivalent com as imagens? Pensel que o browser fosse espertoo suficente para exbir as imagens indlvidualmente use sobre uma imagem, seu cursor muda ra voce pode clicar na imagem com um link. Na exbidas. ior casos, seus ususrios saberBo que ha um lnk ¥® Abra o logo myPod |myP. d Que formato devo utilizar? myPod myPod Ser ou nao ser transparente? Eis a questi... myPod myPod myP. d Salve o GIF transparente Espere af, qual &a cor do fundo da pagina Web? daqucle C88 Saida do Fome na pigina Defina a cor de acabamento he Adicione as suas paginas Defina a cor do acabamento, parte 2 Salve 0 logo Adicione o logo & pagina Web “myPod” WJ Brc="logo/mypod.gif” alt="Logo meuipod> E agora, o test drive final myPod Adicione as suas paginas Na Perguntas Idietas P: Eu realmente preciso saber de tudo isso sobre formatos de imagens para escrever boas paginas Web? R: Nao. Vooe magem, Entretanto, a ‘onstruir grandes imagens s recimento sobre cor mente ajuda, Algumas vezes, apenas uma imagem ou duas na diferenca entre uma bo: pagina fant Ha muito @ saber sobre imagens, mas serd facil aprender & medida ica P: Por que o texto precisa que suas bordas sejam suavizadas? R: Othe as duas versbes do log myPod myPod omo vocé pode ver, a vers 2 possui bordas muito retas, sté menos legvel, Essa é a maneira como o texto xi 801 iad fla do compu 5 através de uma técnica chamada a alavras suavizadas dessa forma aparecem na tel P: Entao onde entra o “Matte”? R: 0 processo de anti-serih a € cor do fundo, Se voo8 c 7 pergunta anterior) contra u id ordas brancas. A opgdo “Matte” do Phot que vooé especifique a cor do fundo em que o texto sera ‘olocado, para quando o texto for suavizado,seja com do fundo, P: Essa técnica sé funciona para texto? Reno, tne P: Por que eu néo posso simplesmente colocar a mesm: Sélida do fundo da pagina no fundo do logo? ode fazer isso, mas ha uma desvantagem: se s em sua pagina Wel a transparéncia, ela as 2 ainda né iss, DP’: se eu alterar a cor do fundo depois deter feito a versio com acabamento? — Palaviaserwadas do HIN Fe Adicion ad Exercicios Solugao . + QUAL O FORMATO DA IMAGEM JPEG ou GIF oi 8 CUIDADO como CHOCOLATE QUENTE. Re Aponte seu lapis A Solugao um “Pre eu lai /erdadeiramente sobre lapi re n ) que iss Fc e a en a resposta, voce tera que escreve HTN 4 para essa pergunt 2 que na URL (¢ nt firstlabs.comtrivialpencil.gif. Seu ti ra adi uma imagem a est HTML ¢ jerar < hemi> abs.con/trivia/pencil.gif” Adicione as suas paginas Exercicios Solugao Aqui estdo os resultados de ter um link ra uma imagem em alguns browsers maioria dos casos, o browser 6 capaz de usar as informagdes extras do atributo ‘alt’ para melhorar que é exibido. Por que nos importamos? Afinal de contas, isso 6 um erro em uma pagina Web: deviamos apenas corrigi-los, certo? Bem, no mundo real, as coisas nem sempre sao ideais; algumas vezes as figuras somem, as conex6es com a Internet caem no meio do carregamento da pagina ou usuarios com deficiéncias na visdo precisam ouvir o que est na imagem, porque ndo podem vé-la Adicione 1 suas paginas Exercicios Solugao — © > “= e e . QUAL O FORMATO DA IMAGEM Formato Qualidade Tamanho Tempo Vencedor JPEG JPEG JPEG JPEG JPEG GIF Maxima Muito Alta Alta Média Baixa N/A Adicione as suas paginas is Exercicios Solugao yma olhada na pi xemplo deste capitulo, vera que town jpg’. Cre uma pagina eatle_downtown him" na pasta “him” e teste-a. Coloque a pagina para funcionar antes de sm frente le>myPod: Centro de Seattle