caelum html css javascript php

267
WEB SITE WD-43 Desenvolvimento Web com HTML, CSS e JavaScript www.caelum.com.br SCRIPTS HTML StyleSheet

Upload: silviogarbes

Post on 30-Dec-2015

75 views

Category:

Documents


0 download

DESCRIPTION

Curso introdutório Caelum para aprender HTML, Css, Javascript e Php

TRANSCRIPT

  • WEB SITE

    WD-43Desenvolvimento Web com

    HTML, CSS e JavaScript

    www.caelum.com.br

    SCRIPTS HTMLStyleSheet

  • Conhea mais da Caelum.

    Cursos Onlinewww.caelum.com.br/online

    Blog Caelumblog.caelum.com.br

    Newsletterwww.caelum.com.br/newsletter

    Facebookwww.facebook.com/caelumbr

    Twittertwitter.com/caelum

    Casa do CdigoLivros para o programador

    www.casadocodigo.com.br

  • Sobre esta apostilaEsta apostila daCaelumvisa ensinar de umamaneira elegante, mostrando apenas o que necessrio e quando necessrio, no momento certo, poupando o leitor de assuntos que no costumam ser de seu interesse emdeterminadas fases do aprendizado.

    A Caelum espera que voc aproveite esse material. Todos os comentrios, crticas e sugestes sero muitobem-vindos.

    Essa apostila constantemente atualizada e disponibilizada no site da Caelum. Sempre consulte o site paranovas verses e, ao invs de anexar o PDF para enviar a um amigo, indique o site para que ele possa semprebaixar as ltimas verses. Voc pode conferir o cdigo de verso da apostila logo no nal do ndice.

    Baixe sempre a verso mais nova em: www.caelum.com.br/apostilas

    Esse material parte integrante do treinamento Desenvolvimento Web com HTML, CSS e JavaScript e dis-tribudo gratuitamente exclusivamente pelo site da Caelum. Todos os direitos so reservados Caelum. Adistribuio, cpia, revenda e utilizao para ministrar treinamentos so absolutamente vedadas. Para usocomercial deste material, por favor, consulte a Caelum previamente.

    www.caelum.com.br

    1

  • Sumrio

    1 Sobre o curso - o complexo mundo do front-end 11.1 O curso e os exerccios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11.2 O projeto de e-commerce . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21.3 Tirando dvidas com instrutor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21.4 Tirando dvidas online no GUJ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21.5 Bibliograa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31.6 Para onde ir depois? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

    2 Introduo a HTML e CSS 42.1 Exibindo informaes na Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42.2 Sintaxe do HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72.3 Estrutura de um documento HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72.4 Tags HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92.5 Imagens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102.6 A estrutura dos arquivos de um projeto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112.7 Editores e IDEs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112.8 Primeira pgina . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112.9 Exerccio: primeiros passos com HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142.10 Estilizando com CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162.11 Sintaxe e incluso de CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172.12 Propriedades tipogrcas e fontes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192.13 Alinhamento e decorao de texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202.14 Imagem de fundo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212.15 Bordas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212.16 Exerccio: primeiros passos com CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222.17 Cores na Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232.18 Listas HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242.19 Espaamento e margem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262.20 Exerccios: listas e margens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282.21 Links HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292.22 Exerccios: links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302.23 Elementos estruturais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 312.24 CSS: Seletores de ID e lho . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 312.25 Exerccios: seletores CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322.26 Fluxo do documento e oat . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 342.27 Exerccios: utuao de elementos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 352.28 O futuro e presente da Web com o HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36

    3 HTML semntico e posicionamento no CSS 37

    i

  • 3.1 O processo de desenvolvimento de uma tela . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 373.2 O projeto Mirror Fashion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 393.3 Analisando o Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 403.4 HTML semntico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 423.5 Pensando no header . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 433.6 Estilizao com classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 443.7 Exerccios: header semntico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 463.8 CSS Reset . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 483.9 Block vs Inline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 493.10 Exerccios: reset e display . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 503.11 Position: static, relative, absolute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 513.12 Exerccios: posicionamento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 543.13 Exerccios opcionais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54

    4 Mais HTML e CSS 554.1 Analisando o miolo da pgina . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 554.2 Formulrios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 554.3 Posicionamento com oat e clear . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 564.4 Decorao de texto com CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 574.5 Cascata e herana no CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 584.6 Para saber mais: o valor inherit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 594.7 Exerccios: menu e destaque . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 604.8 Display inline-block . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 634.9 Exerccios: painis utuantes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 644.10 Seletores de atributo do CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 674.11 Rodap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 684.12 Substituio por Imagem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 694.13 Estilizao e posicionamento do rodap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 694.14 Exerccios: rodap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 714.15 Para saber mais: suporte HTML5 no Internet Explorer antigo . . . . . . . . . . . . . . . . . . . 734.16 Exerccios opcionais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73

    5 JavaScript e interatividade naWeb 755.1 Introduo ao JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 755.2 Console do navegador . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 765.3 Sintaxe bsica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 765.4 Exerccios opcionais: xao de sintaxe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 785.5 Interatividade na Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 785.6 Exerccio: validao na busca com JS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 815.7 Funes temporais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 835.8 Exerccio: banner rotativo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 845.9 Para saber mais: sugesto para o desao de pause/play . . . . . . . . . . . . . . . . . . . . . . . 855.10 Para saber mais: vrios callbacks no mesmo elemento . . . . . . . . . . . . . . . . . . . . . . . . 86

    ii

  • 6 CSS Avanado 886.1 Seletores avanados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 886.2 Pseudo-classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 916.3 Pseudo elementos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 946.4 Exerccios: seletores e pseudo-classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 966.5 Exerccios opcionais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 986.6 CSS3: border-radius . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 996.7 CSS3: text-shadow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1016.8 CSS3: box-shadow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1016.9 Opacidade e RGBA . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1036.10 Prexos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1056.11 CSS3: Gradientes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1066.12 Progressive Enhancement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1086.13 Exerccios: visual CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1096.14 CSS3 Transitions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1116.15 CSS3 Transforms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1136.16 Exerccios: CSS3 transform e transition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1156.17 Para saber mais: especicidade de seletores CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . 118

    7 Web para dispositivos mveis 1217.1 Site mobile ou mesmo site? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1217.2 CSS media types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1237.3 CSS3 media queries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1247.4 Viewport . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1257.5 Exerccios: mobile site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1277.6 Responsive Web Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1317.7 Mobile-rst . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1317.8 Exerccios opcionais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132

    8 Introduo a PHP 1348.1 Libertando o HTML de suas limitaes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1348.2 Como funciona um servidor HTTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1358.3 Como funciona o PHP no servidor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1358.4 Para saber mais: instalao do PHP em casa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1368.5 Exerccios: executando o PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1378.6 Reaproveitamento de cdigo com include . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1388.7 Exerccios: include . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1398.8 Para saber mais: ainda mais exibilidade com variveis . . . . . . . . . . . . . . . . . . . . . . . 1408.9 Exerccios opcionais: variveis em PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141

    9 Progressive enhancement e mobile-rst 1439.1 Formulrio de compra . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1449.2 Exerccio: formulrio da pgina de produto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146

    iii

  • 9.3 Design mobile-rst . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1479.4 Progressive enhancement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1489.5 Box model e box-sizing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1499.6 Exerccios: pgina de produto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1509.7 Evoluindo o design para desktop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1549.8 Media queries de contedo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1549.9 Exerccios: responsive design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1559.10 HTML5 Input range . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1579.11 Exerccios: seletor de tamanho . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1589.12 Tabelas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1589.13 Exerccios: detalhes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1609.14 Exerccios opcionais: fundo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162

    10 PHP: parmetros e bancos de dados 16410.1 Submisso do formulrio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16410.2 Parmetros com PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16510.3 Listas de denio no HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16510.4 Exerccios: checkout da compra . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16610.5 Exerccios opcionais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16710.6 Banco de dados e SQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16810.7 MySQL e phpMyAdmin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16910.8 Para saber mais: instalao do MySQL em casa . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16910.9 Buscas no MySQL com PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16910.10 Renando as buscas comWHERE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17010.11 Exerccios: phpMyAdmin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17110.12 Exerccios: PHP comMySQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17210.13 Busca de muitos resultados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17410.14 Ordenao dos resultados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17410.15 Exerccios: mais buscas com PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17410.16 Exerccios opcionais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176

    11 Bootstrap e formulrios HTML5 17711.1 Bootstrap e frameworks de CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17711.2 Estilo e componentes base . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17811.3 A pgina de checkout da Mirror Fashion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17811.4 Exerccio opcional: incio do checkout sem PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . 18011.5 Exerccios: pgina de checkout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18011.6 Formulrios a fundo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18311.7 Novos componentes do HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18811.8 Novos atributos HTML5 em elementos de formulrio . . . . . . . . . . . . . . . . . . . . . . . . 19211.9 cones com glyphicons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19311.10 Exerccios: formulrios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19511.11 Para saber mais: outros frameworks CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198

    iv

  • 12 Componentes complexos do Bootstrap e mais HTML5 19912.1 Grid responsivo do Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19912.2 Exerccios: grids . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20112.3 Validao HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20312.4 Para saber mais: controlando as validaes HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . 20412.5 Exerccios: validao com HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20512.6 Componentes JavaScript do Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20612.7 Exerccios opcionais: navbar e JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20612.8 Discusso em aula: os problemas do Bootstrap e quando no us-lo . . . . . . . . . . . . . . . 209

    13 jQuery 21013.1 jQuery - A funo $ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21013.2 jQuery Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21113.3 Filtros customizados e por DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21213.4 Utilitrio de iterao do jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21313.5 Caractersticas de execuo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21313.6 Mais produtos na home . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21413.7 Exerccios: jQuery na home . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21513.8 O elemento output do HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21813.9 Exerccios: mostrando tamanho do produto com jQuery . . . . . . . . . . . . . . . . . . . . . . 21813.10 Plugins jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22013.11 Exerccios: plugin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22013.12 Exerccios opcionais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220

    14 Integraes com servios Web 22114.1 Web 2.0 e integraes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22114.2 iframes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22114.3 Vdeo embutido com YouTube . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22214.4 Exerccios: iframe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22214.5 Exerccio opcional: Google Maps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22214.6 Boto de curtir do Facebook . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22314.7 Exerccios: Facebook . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22414.8 Para saber mais: Twitter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22414.9 Para saber mais: Google+ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22514.10 Exerccios opcionais: Twitter e Google+ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22614.11 Fontes customizadas com @font-face . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22614.12 Servios de web fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22714.13 Exerccios: Google Web Fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227

    15 Apndice - Otimizaes de front-end 22915.1 HTML e HTTP - Como funciona a World Wide Web? . . . . . . . . . . . . . . . . . . . . . . . 23015.2 Princpios de programao distribuda . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23215.3 Ferramentas de diagnstico - YSlow e PageSpeed . . . . . . . . . . . . . . . . . . . . . . . . . . 232

    v

  • 15.4 Compresso e minicao de CSS e JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23315.5 Compresso de imagens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23515.6 Diminuir o nmero de requests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23715.7 Juntar arquivos CSS e JS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23815.8 Image Sprites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23815.9 Para saber mais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24115.10 Exerccios: otimizaes Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241

    16 Apndice - LESS 24316.1 Variveis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24316.2 Contas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24416.3 Hierarquia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24516.4 Funes de cores e palhetas automticas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24616.5 Reaproveitamento com mixins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24616.6 Executando o LESS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24716.7 Para saber mais: recursos avanados e alternativas . . . . . . . . . . . . . . . . . . . . . . . . . . 24816.8 Exerccios: LESS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248

    17 Apndice - Subindo sua aplicao no cloud 25217.1 Como escolher um provedor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25217.2 O Jelastic Cloud Locaweb . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25217.3 Criando a conta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25317.4 Importando dados no MySQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25317.5 Preparando o projeto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25417.6 Enviando o projeto e inicializando servidor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255

    18 Apndice - Envio de emails com PHP 25718.1 Exerccios opcionais: email de conrmao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258

    ndice Remissivo 258Verso: 16.8.2

    vi

  • Captulo 1

    Sobre o curso - o complexo mundo do front-end

    Ao a chave fundamental para todo sucesso Pablo Picasso

    Vivemos hoje numa era em que a Internet ocupa um espao cada vezmais importante emnossas vidas pesso-ais e prossionais. O surgimento constante de Aplicaes Web, para as mais diversas nalidades, um sinalclaro de que esse mercado est em franca expanso e traz muitas oportunidades. Aplicaes corporativas,comrcio eletrnico, redes sociais, lmes, msicas, notcias e tantas outras reas esto presentes na Internet,fazendo do navegador (o browser) o soware mais utilizado de nossos computadores.

    Esse curso pretende abordar o desenvolvimento de front-end (interfaces) para Aplicaes Web e Sites queacessamos por meio do navegador de nossos computadores, utilizando padres atuais de desenvolvimentoe conhecendo a fundo suas caractersticas tcnicas. Discutiremos as implementaes dessas tecnologias nosdiferentes navegadores, a adoo de frameworks que facilitam e aceleram nosso trabalho, alm de dicas tc-nicas que destacam um prossional no mercado. HTML, CSS e JavaScript sero vistos em profundidade.

    Alm do acesso por meio do navegador de nossos computadores, hoje o acesso Internet a partir de dis-positivos mveis representa um grande avano da plataforma, mas tambm implica em um pouco mais deateno ao trabalho que um programador front-end tem que realizar. No decorrer do curso, vamos conhe-cer algumas dessas necessidades e como utilizar os recursos disponveis para atender tambm a essa novanecessidade.

    1.1 O curso e os exerccios

    Esse um curso prtico que comea nos fundamentos de HTML e CSS, incluindo tpicos relacionados snovidades das verses HTML5 e CSS3. Depois, abordada a linguagem de programao JavaScript, para en-riquecer nossas pginas com interaes e efeitos, tanto com JavaScript puro quanto com a biblioteca jQuery,hoje padro de mercado.

  • Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript

    Durante o curso, sero desenvolvidas pginas de um Site de comrcio eletrnico. Os exerccios foram proje-tados para apresentar gradualmente ao aluno quais so as tcnicas mais recomendadas e utilizadas quandoassumimos o papel do Programador front-end, quais so os desaos mais comuns e quais so as tcnicase padres recomendados para atingirmos nosso objetivo, transformando imagens estticas (os layouts) emcdigo que os navegadores entendem e exibem como pginas da Web.

    Os exerccios propostos so fundamentais para o acompanhamento do curso, desde os mais iniciais, j queso incrementados no decorrer das aulas. Igualmente importante a participao ativa nas discusses edebates em sala de aula.

    1.2 O projeto de e-commerce

    Durante o curso, vamos produzir um site para um e-commerce de moda chamadoMirror Fashion. Cons-truiremos vrias pginas da loja com intuito de aprender os conceitos de HTML, CSS e JS.

    Os contedos e o design da loja j foram pr-denidos. Vamos, aqui, focar na implementao, papel doprogramador front-end.

    1.3 Tirando dvidas com instrutor

    Durante o curso, tire todas as suas dvidas com o instrutor. HTML, CSS e JavaScript, apesar de pareceremsimples e bsicos, tm muitas caractersticas complexas que no podem deixar de ser totalmente compreen-didas pelo aluno. Os instrutores tambm esto disponveis para tirar as dvidas do aluno aps o trmino dotreinamento, basta entrar em contato direto com o instrutor ou com a Caelum, teremos o prazer em ajud-lo.

    Se voc est acompanhando essa apostila em casa, pense tambm em fazer o curso presencial na Caelum.Voc ter contato direto como instrutor para esclarecer suas dvidas, aprendermais tpicos almda apostila,e trocar experincias.

    1.4 Tirando dvidas online noGUJ

    Recomendamos fortemente a busca de recursos e a participao ativa na comunidade por meio das listas dediscusso relacionadas ao contedo do curso.

    O GUJ.com.br um site de perguntas e respostas para desenvolvedores de soware que abrange diversasreas, sendo que front-end um dos principais focos. A comunidade do GUJ temmais de 150 mil usurios e1milho emeio demensagens. o lugar ideal pra voc tirar suas dvidas e encontrar outros desenvolvedores.

    http://www.guj.com.br

    Captulo 1 - Sobre o curso - o complexo mundo do front-end - O projeto de e-commerce - Pgina 2

  • Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript

    1.5 Bibliografia

    Alm do conhecimento disponvel na Internet pela da comunidade, existemmuitos livros interessantes sobreo assunto. Algumas referncias:

    HTML5 e CSS3: Domine a web do futuro - Lucas Mazza, editora Casa do Cdigo;

    AWeb Mobile: Programe para um mundo de muitos dispositivos - Srgio Lopes, editora Casa doCdigo;

    A Arte E A Cincia Do CSS - Adams & Cols;

    Pro JavaScript Techniques - John Resig;

    e Smashing Book - smashingmagazine.com

    1.6 Para onde ir depois?

    Este curso parte da FormaoWeb Design da Caelum que engloba tambm o treinamento Programaocom JavaScript e jQuery. Voc pode obter mais informaes aqui:

    http://www.caelum.com.br/cursos-web-front-end/

    Se o seu desejo entrar mais a fundo no desenvolvimento Web, incluindo a parte server-side, oferecemos aFormao Ruby on Rails, a Formao Java e a Formao .NET que abordam trs caminhos possveis paraesse mundo.

    Mais informaes em:

    http://www.caelum.com.br/cursos-rails/

    http://www.caelum.com.br/cursos-java/

    http://www.caelum.com.br/cursos-dotnet/

    Captulo 1 - Sobre o curso - o complexo mundo do front-end - Bibliograa - Pgina 3

  • Captulo 2

    Introduo a HTML e CSS

    Quanto mais nos elevamos, menores parecemos aos olhos daqueles que no sabem voar. Friedrich Wilhelm Nietzsche

    2.1 Exibindo informaes naWeb

    Anica linguagem que o navegador consegue interpretar para a exibio de contedo oHTML. Para iniciara explorao do HTML, vamos imaginar o seguinte caso: o navegador realizou uma requisio e recebeucomo corpo da resposta o seguinte contedo:

    Mirror Fashion.

    Bem-vindo Mirror Fashion, sua loja de roupas e acessrios.

    Confira nossas promoes.Receba informaes sobre nossos lanamentos por email.Navegue por todos nossos produtos em catlogo.Compre sem sair de casa.

    Para conhecer o comportamento dos navegadores quanto ao contedo descrito antes, vamos reproduzir essecontedo em um arquivo de texto comum, que pode ser criado com qualquer editor de texto puro. Salve oarquivo como index.html e abra-o a partir do navegador sua escolha.

  • Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript

    Parece que obtemos um resultado um pouco diferente do esperado, no? Apesar de ser capaz de exibir textopuro em sua rea principal, algumas regras devem ser seguidas caso desejemos que esse texto seja exibidocom alguma formatao, para facilitar a leitura pelo usurio nal.

    Usando o resultado acima podemos concluir que o navegador por padro:

    Pode no exibir caracteres acentuados corretamente;

    No exibe quebras de linha.

    Para que possamos exibir as informaes desejadas com a formatao, necessrio que cada trecho de textotenha umamarcao indicando qual o signicado dele. Essa marcao tambm inuencia a maneira comque cada trecho do texto ser exibido. A seguir listado o texto com uma marcao correta:

    Mirror Fashion

    Mirror Fashion.Bem-vindo Mirror Fashion, sua loja de roupas e acessrios.

    Captulo 2 - Introduo a HTML e CSS - Exibindo informaes na Web - Pgina 5

  • Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript

    Confira nossas promoes.Receba informaes sobre nossos lanamentos por email.Navegue por todos nossos produtos em catlogo.Compre sem sair de casa.

    Reproduza o cdigo anterior em um novo arquivo de texto puro e salve-o como index-2.html. No se preo-cupe com a sintaxe, vamos conhecer detalhadamente cada caracterstica do HTML nos prximos captulos.Abra o arquivo no navegador.

    Agora, o resultado exibido de maneira muito mais agradvel e legvel. Para isso, tivemos que utilizar al-gumas marcaes do HTML. Essas marcaes so chamadas de tags, e elas basicamente do signicado aotexto contido entre sua abertura e fechamento.

    Apesar de estarem corretamentemarcadas, as informaes no apresentam nenhum atrativo esttico e, nessadecincia do HTML, reside o primeiro e maior desao do programador front-end.

    O HTML foi desenvolvido para exibio de documentos cientcos. Para termos uma comparao, comose a Web fosse desenvolvida para exibir monograas redigidas e formatadas pela Metodologia do Trabalho

    Captulo 2 - Introduo a HTML e CSS - Exibindo informaes na Web - Pgina 6

  • Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript

    Cientco da ABNT. Porm, com o tempo e a evoluo da Web e de seu potencial comercial, tornou-senecessria a exibio de informaes com grande riqueza de elementos grcos e de interao.

    2.2 Sintaxe doHTML

    O HTML um conjunto de tags responsveis pela marcao do contedo de uma pgina no navegador.No cdigo que vimos antes, as tags so os elementos a mais que escrevemos usando a sintaxe .Diversas tags so disponibilizadas pela linguagem HTML e cada uma possui uma funcionalidade especca.

    No cdigo de antes, vimos por exemplo o uso da tag . Ela representa o ttulo principal da pgina.

    Mirror Fashion

    Note a sintaxe. Uma tag denida com caracteres < e >, e seu nome (H1 no caso). Muitas tags possuemcontedo, como o texto do ttulo (Mirror Fashion). Nesse caso, para determinar onde o contedo acaba,usamos uma tag de fechamento com a barra antes do nome: .

    Algumas tags podem receber atributos dentro de sua denio. So parmetros usando a sintaxe denome=valor. Para denir uma imagem, por exemplo, usamos a tag e, para indicar qual imagem carre-gar, usamos o atributo src:

    Repare que a tag img no possui contedo por si s. Nesses casos, no necessrio usar uma tag de fecha-mento como antes no h1.

    2.3 Estrutura de um documentoHTML

    Um documento HTML vlido precisa seguir obrigatoriamente a estrutura composta pelas tags , e e a instruo . Vejamos cada uma delas:

    A tag

    Na estrutura do nosso documento, antes de tudo, inserimos uma tag . Dentro dessa tag, necessriodeclarar outras duas tags: e . Essas duas tags so irms, pois esto nomesmonvel hierrquicoem relao sua tag pai, que .

    Captulo 2 - Introduo a HTML e CSS - Sintaxe do HTML - Pgina 7

  • Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript

    A tag

    A tag contm informaes sobre nosso documento que so de interesse somente do navegador, e nodos visitantes do nosso site. So informaes que no sero exibidas na rea do documento no navegador.

    A especicao obriga a presena da tag de contedo dentro do nosso , permitindo especi-car o ttulo do nosso documento, que normalmente ser exibido na barra de ttulo da janela do navegadorou na aba do documento.

    Outra congurao muito utilizada, principalmente em documentos cujo contedo escrito em um idiomacomo o portugus, que tem caracteres como acentos e cedilha, a congurao da codicao de caracteres,chamado de encoding ou charset.

    Podemos congurar qual codicao queremos utilizar em nosso documento por meio da congurao decharset na tag . Um dos valores mais comuns usados hoje em dia o UTF-8, tambm chamado deUnicode. H outras possibilidades, como o latin1, muito usado antigamente.

    O UTF-8 a recomendao atual para encoding na Web por ser amplamente suportada em navegadores eeditores de cdigo, alm de ser compatvel com praticamente todos os idiomas do mundo. o que usaremosno curso.

    Mirror Fashion

    A tag

    A tag contm o corpo do nosso documento, que exibido pelo navegador em sua janela. necessrioque o tenha ao menos um elemento lho, ou seja, uma ou mais tags HTML dentro dele.

    Mirror Fashion

    A Mirror Fashion

    Captulo 2 - Introduo a HTML e CSS - Estrutura de um documento HTML - Pgina 8

  • Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript

    Nesse exemplo, usamos a tag , que indica um ttulo.

    A instruoDOCTYPE

    O DOCTYPE no uma tag HTML, mas uma instruo especial. Ela indica para o navegador qual versodo HTML deve ser utilizada para renderizar a pgina. Utilizaremos , que indica para onavegador a utilizao da verso mais recente do HTML - a verso 5, atualmente.

    Hmuitos comandos complicados nessa parte de DOCTYPE que eram usados em verses anteriores do HTMLe do XHTML. Hoje em dia, nada disso mais importante. O recomendado sempre usar a ltima versodo HTML, usando a declarao de DOCTYPE simples:

    2.4 TagsHTML

    OHTML composto de diversas tags, cada uma com sua funo e signicado. O HTML 5, ento, adicionoumuitas novas tags, que veremos ao longo do curso.

    Nesse momento, vamos focar em tags que representam ttulos, pargrafo e nfase.

    Ttulos

    Quando queremos indicar que um texto um ttulo em nossa pgina, utilizamos as tags de heading em suamarcao:

    Mirror Fashion.Bem-vindo Mirror Fashion, sua loja de roupas e acessrios.

    As tags de heading so tags de contedo e vo de a , seguindo a ordem de importncia, sendo o ttulo principal, o mais importante, e o ttulo de menor importncia.

    Utilizamos, por exemplo, a tag para o nome, ttulo principal da pgina, e a tag como subttulo oucomo ttulo de sees dentro do documento.

    A ordem de importncia, alm de inuenciar no tamanho padro de exibio do texto, tem impacto nasferramentas que processam HTML. As ferramentas de indexao de contedo para buscas, como o Google,Bing ouYahoo! levam emconsiderao essa ordem e relevncia. Os navegadores especiais para acessibilidadetambm interpretam o contedo dessas tags de maneira a diferenciar seu contedo e facilitar a navegao dousurio pelo documento.

    Captulo 2 - Introduo a HTML e CSS - Tags HTML - Pgina 9

  • Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript

    Pargrafos

    Quando exibimos qualquer texto em nossa pgina, recomendado que ele seja sempre contedo de algumatag lha da tag . A marcao mais indicada para textos comuns a tag de pargrafo:

    Nenhum item na sacola de compras.

    Se voc tiver vrios pargrafos de texto, use vrias dessas tags para separ-los:

    Um pargrafo de texto.Outro pargrafo de texto.

    Marcaes de nfase

    Quando queremos dar uma nfase diferente a um trecho de texto, podemos utilizar as marcaes de nfase.Podemos deixar um texto mais forte com a tag ou deixar o texto com uma nfase acentuadacom a tag . Tambm h a tag , que diminui o tamanho do texto.

    Por padro, os navegadores renderizaro o texto dentro da tag em negrito e o texto dentro da tag em itlico. Existem ainda as tags e , que atingem o mesmo resultado visualmente, mas as tags e so mais indicadas por denirem nossa inteno de signicado ao contedo, mais do queuma simples indicao visual. Vamos discutir melhor a questo do signicado das tags mais adiante.

    Compre suas roupas e acessrios na Mirror Fashion.

    2.5 Imagens

    A tag dene uma imagem em uma pgina HTML e necessita de dois atributos preenchidos: src e alt.O primeiro aponta para o local da imagem e o segundo, um texto alternativo para a imagem caso essa nopossa ser carregada ou visualizada.

    O HTML 5 introduziu duas novas tags especcas para imagem: e . A tag dene uma imagem com a conhecida tag . Alm disso, permite adicionar uma legenda para a imagempor meio da tag .

    Fuzz Cardigan por R$ 129,90

    Captulo 2 - Introduo a HTML e CSS - Imagens - Pgina 10

  • Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript

    2.6 A estrutura dos arquivos de um projeto

    Como todo tipo de projeto de soware, existem algumas recomendaes quanto organizao dos arquivosde um site. No h nenhum rigor tcnico quanto a essa organizao e, na maioria das vezes, voc vai adaptaras recomendaes da maneira que for melhor para o seu projeto.

    Como um site um conjunto de pginasWeb sobre um assunto, empresa, produto ou qualquer outra coisa, comum todos os arquivos de um site estarem dentro de uma s pasta e, assim como um livro, recomendadoque exista uma capa, uma pgina inicial que possa indicar para o visitante quais so as outras pginas quefazem parte desse projeto e como ele pode acess-las, como se fosse o ndice do site.

    Esse ndice, no por coincidncia, conveno adotada pelos servidores de pginas Web. Se desejamosque uma determinada pasta seja servida como um site e dentro dessa pasta existe um arquivo chamadoindex.html, esse arquivo ser a pgina inicial a menos que alguma congurao determine outra pginapara esse m.

    Dentro da pasta do site, no mesmo nvel que o index.html, recomendado que sejam criadas mais algumaspastas para manter separados os arquivos de imagens, as folhas de estilo CSS e os scripts. Para iniciar umprojeto, teramos uma estrutura de pastas como a demonstrada na imagem a seguir:

    Muitas vezes, um site servido por meio de uma aplicao Web e, nesses casos, a estrutura dos arquivosdepende de como a aplicao necessita dos recursos para funcionar corretamente. Porm, no geral, as apli-caes tambm seguem um padro bem parecido com o que estamos adotando para o nosso projeto.

    2.7 Editores e IDEs

    Existem editores de texto como Gedit (www.gnome.org), Sublime (http://www.sublimetext.com/) e Note-pad++ (http://notepad-plus-plus.org), que possuem realce de sintaxe e outras ferramentas para facilitar odesenvolvimento de pginas. H tambm IDEs (Integrated Development Environment), que oferecem re-cursos como autocompletar e pr-visualizao, como Eclipse e Visual Studio.

    2.8 Primeira pgina

    A primeira pgina que desenvolveremos para a Mirror Fashion ser a Sobre, que explica detalhes sobre aempresa, apresenta fotos e a histria.

    Captulo 2 - Introduo a HTML e CSS - A estrutura dos arquivos de um projeto - Pgina 11

  • Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript

    Recebemos o design j pronto, assim como os textos. Nosso trabalho, como desenvolvedores de front-end, codicar o HTML e CSS necessrios para esse resultado.

    Captulo 2 - Introduo a HTML e CSS - Primeira pgina - Pgina 12

  • Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript

    Captulo 2 - Introduo a HTML e CSS - Primeira pgina - Pgina 13

  • Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript

    2.9 Exerccio: primeiros passos comHTML

    1) Ao longo do curso, usaremos diversas imagens que o nosso designer preparou. Nesse ponto, vamos im-portar todas as imagens dentro do projeto que criamos antes para que possamos us-las nas pginas.

    Copie a pastamirror-fashion de dentro da pasta caelum/cursos/43 para a rea de trabalho de suamquina.

    Verique a pasta img, agora cheia de arquivos do design do site. Alm desta pasta, teremos as pastasjs e css, que ainda no usaremos.

    Em casa

    Voc pode baixar um ZIP com todos os arquivos necessrios para o curso aqui: http://mirrorfashion.net/caelum-arquivos-curso-web.zip

    2) Dentro da pasta mirror-fashion, vamos criar o arquivo sobre.html com a estrutura bsica contendo oDOCTYPE e as tags html, head e body:

    Sobre a Mirror Fashion

    3) A pgina deve ter uma imagem com o logo da empresa, um ttulo e um texto falando sobre ela.

    O texto para ser colocado na pgina est no arquivo sobre.txt disponvel na pastaCaelum/43/textos. Sovrios pargrafos que devem ser adaptados com o HTML apropriado.

    Aps copiar o texto do arquivo sobre.txt coloque cada umdos pargrafos dentro de uma tag . Coloquetambm o ttulo Histria dentro de uma tag .

    Use a tag para o logo e a tag para o ttulo. Seu HTML deve car assim, no nal:

    A Mirror Fashion

    A Mirror Fashion a maior empresa de comrcio eletrnico no segmentode moda em todo o mundo. Fundada em 1932, possui filiais

    Captulo 2 - Introduo a HTML e CSS - Exerccio: primeiros passos com HTML - Pgina 14

  • Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript

    em 124 pases........

    4) Um texto corrido sem nfases difcil de ler. Use negritos e itlicos para destacar partes importantes.

    Use a tag para a nfase mais forte em negrito, por exemplo para destacar o nome da empresano texto do primeiro pargrafo:

    A Mirror Fashion a maior empresa comrcio eletrnico.......

    Use tambm a nfase com que deixar o texto em itlico. Na parte da Histria, coloque os nomesdas pessoas e da famlia em .

    5) A pgina deve ter duas imagens. A primeira apresenta o centro da Mirror Fashion e deve ser inseridaaps o segundo pargrafo do texto. A outra, uma imagem da Famlia Pelho e deve ser colocada apso subttulo daHistria.

    As imagens podem ser carregadas com a tag , apontando seu caminho. Alm disso, no HTML5,podemos usar as tags e para destacar a imagem e colocar uma legenda em cadauma.

    A imagem do centro de distribuio est em img/centro-distribuicao.png:

    Centro de distribuio da Mirror Fashion

    A imagem da famlia a img/familia-pelho.jpg e deve ser colocada na parte de Histria:

    Famlia Pelho

    Verique o resultado no navegador. Devemos j ver o contedo e as imagens na sequncia, mas sem umdesign muito interessante.

    Boa prtica - Indentao

    Uma prtica sempre recomendada, ligada limpeza e utilizada para facilitar a leitura do cdigo, o uso correto de recuos, ou indentao, no HTML. Costumamos alinhar elementos irmosna mesma margem e adicionar alguns espaos ou um tab para elementos lhos.

    A maioria dos exerccios dessa apostila utiliza um padro recomendado de recuos.

    Captulo 2 - Introduo a HTML e CSS - Exerccio: primeiros passos com HTML - Pgina 15

  • Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript

    Boa prtica - Comentrios

    Quando iniciamos nosso projeto, utilizamos poucas tags HTML.Mais tarde adicionaremos umaquantidade razovel de elementos, o que pode gerar uma certa confuso. Para manter o cdigomais legvel, recomendada a adio de comentrios antes da abertura e aps o fechamento detags estruturais (que contero outras tags). Dessa maneira, ns podemos identicar claramentequando um elemento est dentro dessa estrutura ou depois da mesma.

    Esse pargrafo est "dentro" da rea principal.

    Esse pargrafo est "depois" da rea principal.

    2.10 Estilizando com CSS

    Quando escrevemos o HTML, marcamos o contedo da pgina com tags que melhor representam o signi-cado daquele contedo. A quando abrimos a pgina no navegador possvel perceber que o navegadormostra as informaes com estilos diferentes.

    Um h1, por exemplo, ca em negrito numa fonte maior. Pargrafos de texto so espaados entre si, e assimpor diante. Isso quer dizer que o navegador tem um estilo padro para as tags que usamos. Mas, claro, prafazer sites bonites vamos querer customizar o design dos elementos da pgina.

    Antigamente, isso era feito no prprio HTML. Se quisesse um ttulo em vermelho, era s fazer:

    Mirror Fashion anos 90

    Alm da tag font, vrias outras tags de estilo existiam. Mas isso passado. Tags HTML para estilo so mprtica hoje em dia e jamais devem ser usadas.

    Em seu lugar, surgiu o CSS, que uma outra linguagem, separada do HTML, com objetivo nico de cuidarda estilizao da pgina. A vantagem que o CSS bem mais robusto que o HTML para estilizao, comoveremos. Mas, principalmente, escrever formatao visual misturado com contedo de texto no HTML semostrou algo bem impraticvel. O CSS resolve isso separando as coisas; regras de estilo no aparecem maisno HTML, apenas no CSS.

    Captulo 2 - Introduo a HTML e CSS - Estilizando com CSS - Pgina 16

  • Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript

    2.11 Sintaxe e incluso de CSS

    A sintaxe do CSS tem estrutura simples: uma declarao de propriedades e valores separados por um sinalde dois pontos :, e cada propriedade separada por um sinal de ponto e vrgula ; da seguinte maneira:

    background-color: yellow;color: blue;

    O elemento que receber essas propriedades ser exibido com o texto na cor azul e com o fundo amarelo.Essas propriedades podem ser declaradas de trs maneiras diferentes.

    Atributo style

    A primeira delas como um atributo style no prprio elemento:

    O contedo desta tag ser exibido em azul com fundo amarelo no navegador!

    Mas tnhamos acabado de discutir que uma das grandes vantagens do CSS era manter as regras de estilo forado HTML. Usando esse atributo style no parece que zemos isso. Justamente por isso no se recomendaesse tipo de uso na prtica, mas sim os que veremos a seguir.

    A tag style

    A outra maneira de se utilizar o CSS declarando suas propriedades dentro de uma tag .

    Como estamos declarando as propriedades visuais de um elemento em outro lugar do nosso documento,precisamos indicar de alguma maneira a qual elemento nos referimos. Fazemos isso utilizando um seletorCSS. basicamente uma forma de buscar certos elementos dentro da pgina que recebero as regras visuaisque queremos.

    No exemplo a seguir, usaremos o seletor que pega todas as tags p e altera sua cor e background:

    Sobre a Mirror Fashion

    p {background-color: yellow;color: blue;

    }

    Captulo 2 - Introduo a HTML e CSS - Sintaxe e incluso de CSS - Pgina 17

  • Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript

    O contedo desta tag ser exibido em azul com fundo amarelo!

    Tambm ser exibido em azul com fundo amarelo!

    O cdigo anterior da tag indica que estamos alterando a cor e o fundo de todos os elementos comtag p. Dizemos que selecionamos esses elementos pelo nome de sua tag, e aplicamos certas propriedades CSSapenas neles.

    Arquivo externo

    A terceira maneira de declararmos os estilos do nosso documento com um arquivo externo, geralmentecom a extenso .css. Para que seja possvel declarar nosso CSS em um arquivo parte, precisamos indicarem nosso documento HTML uma ligao entre ele e a folha de estilo.

    Alm da melhor organizao do projeto, a folha de estilo externa traz ainda as vantagens de manter nossoHTML mais limpo e do reaproveitamento de uma mesma folha de estilos para diversos documentos.

    A indicao de uso de uma folha de estilos externa deve ser feita dentro da tag do nosso documentoHTML:

    Sobre a Mirror Fashion

    O contedo desta tag ser exibido em azul com fundo amarelo!

    Tambm ser exibido em azul com fundo amarelo!

    Captulo 2 - Introduo a HTML e CSS - Sintaxe e incluso de CSS - Pgina 18

  • Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript

    E dentro do arquivo estilos.css colocamos apenas o contedo do CSS:

    p {color: blue;background-color: yellow;

    }

    2.12 Propriedades tipogrficas e fontes

    Da mesma maneira que alteramos cores, podemos alterar o texto. Podemos denir fontes com o uso dapropriedade font-family.

    A propriedade font-family pode receber seu valor comou sem aspas. No primeiro caso, passaremos o nomedo arquivo de fonte a ser utilizado, no ltimo, passaremos a famlia da fonte.

    Por padro, os navegadores mais conhecidos exibem texto em um tipo que conhecemos como serif . Asfontes mais conhecidas (e comumente utilizadas como padro) so Times e Times New Roman, depen-dendo do sistema operacional. Elas so chamadas de fontes serifadas pelos pequenos ornamentos em suasterminaes.

    Podemos alterar a famlia de fontes que queremos utilizar em nosso documento para a famlia sans-serif (sem serifas), que contm, por exemplo, as fontes Arial e Helvetica. Podemos tambm declarar que que-remos utilizar uma famlia de fontes monospace como, por exemplo, a fonte Courier.

    h1 {font-family: serif;

    }

    h2 {font-family: sans-serif;

    }

    p {font-family: monospace;

    }

    possvel, e muito comum, declararmos o nome de algumas fontes que gostaramos de vericar se existemno computador, permitindo que tenhamos um controle melhor da forma como nosso texto ser exibido.Normalmente, declaramos as fontesmais comuns, e existe umgrupo de fontes que so consideradas seguraspor serem bem populares.

    Em nosso projeto, vemos que as fontes no tm ornamentos. Ento vamos declarar essa propriedade paratodo o documento por meio do seu elemento body:

    Captulo 2 - Introduo a HTML e CSS - Propriedades tipogrcas e fontes - Pgina 19

  • Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript

    body {font-family: "Arial", "Helvetica", sans-serif;

    }

    Nesse caso, o navegador vericar se a fonte Arial est disponvel e a utilizar para renderizar os textos detodos os elementos do nosso documento que, por cascata, herdaro essa propriedade do elemento body.

    Caso a fonte Arial no esteja disponvel, o navegador vericar a disponibilidade da prxima fonte decla-rada, no nosso exemplo a Helvetica. Caso o navegador no encontre tambmessa fonte, ele solicita qualquerfonte que pertena famlia sans-serif , declarada logo a seguir, e a utiliza para exibir o texto, no importaqual seja ela.

    Temos outras propriedades para manipular a fonte, como a propriedade font-style, que dene o estilo dafonte que pode ser: normal (normal na vertical), italic (inclinada) e oblique (oblqua).

    2.13 Alinhamento e decorao de texto

    J vimos uma srie de propriedades e subpropriedades que determinam o estilo do tipo (fonte). Vamosconhecer algumas maneiras de alterarmos as disposies dos textos.

    Uma das propriedades mais simples, porm muito utilizada, a que diz respeito ao alinhamento de texto: apropriedade text-align.

    p {text-align: right;

    }

    O exemplo anterior determina que todos os pargrafos da nossa pgina tenham o texto alinhado para a di-reita. Tambm possvel determinar que um elemento tenha seu contedo alinhado ao centro ao denirmoso valor center para a propriedade text-align, ou ento denir que o texto deve ocupar toda a largura doelemento aumentando o espaamento entre as palavras com o valor justify. O padro que o texto sejaalinhado esquerda, com o valor left, porm importante lembrar que essa propriedade propaga-se emcascata.

    possvel congurar tambm uma srie de espaamentos de texto com o CSS:

    p {line-height: 3px; /* tamanho da altura de cada linha */letter-spacing: 3px; /* tamanho do espao entre cada letra */word-spacing: 5px; /* tamanho do espao entre cada palavra */text-indent: 30px; /* tamanho da margem da primeira linha do texto */

    }

    Captulo 2 - Introduo a HTML e CSS - Alinhamento e decorao de texto - Pgina 20

  • Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript

    2.14 Imagem de fundo

    A propriedade background-image permite indicar um arquivo de imagem para ser exibido ao fundo doelemento. Por exemplo:

    h1 {background-image: url(sobre-background.jpg);

    }

    Com essa declarao, o navegador vai requisitar um arquivo sobre-background.jpg, que deve estar namesma pasta do arquivo CSS onde consta essa declarao.

    2.15 Bordas

    As propriedades do CSS para denirmos as bordas de um elemento nos apresentam uma srie de opes.Podemos, para cada borda de um elemento, determinar sua cor, seu estilo de exibio e sua largura. Porexemplo:

    body {border-color: red;border-style: solid;border-width: 1px;

    }

    Para que o efeito da cor sobre a borda surta efeito, necessrio que a propriedade border-style tenha qual-quer valor diferente do padro none.

    Conseguimos fazer tambm comentrios no CSS usando a seguinte sintaxe:

    /* deixando o fundo ridculo */body {

    background: gold;}

    Captulo 2 - Introduo a HTML e CSS - Imagem de fundo - Pgina 21

  • Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript

    2.16 Exerccio: primeiros passos com CSS

    1) Aplicaremos um pouco de estilo em nossa pgina usando CSS. Dentro da pasta css, crie um arquivosobre.css, que conter nosso cdigo de estilo para essa pgina.

    Em primeiro lugar, precisamos carregar o arquivo sobre.css dentro da pgina sobre.html com a tag dentro da tag :

    Para a tag , altere a sua cor e sua fonte base por meio das propriedades color e font-family:

    body {color: #333333;font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;

    }

    O ttulo principal deve ter um fundo estampado com a imagem img/sobre-background.jpg. Use a pro-priedade background-image pra isso. Aproveite e coloque uma borda sutil nos subttulos, para ajudar aseparar o contedo.

    h1 {background-image: url(../img/sobre-background.jpg);

    }

    h2 {border-bottom: 2px solid #333333;

    }

    Acerte tambm a renderizao das guras. Coloque um fundo cinza, uma borda sutil, deixe a legenda emitlico com font-style e alinhe a imagem e a legenda no centro com text-align.

    figure {background-color: #F2EDED;border: 1px solid #ccc;text-align: center;

    }

    figcaption {font-style: italic;

    }

    Teste o resultado no navegador. Nossa pgina comea a pegar o estilo da pgina nal!

    Captulo 2 - Introduo a HTML e CSS - Exerccio: primeiros passos com CSS - Pgina 22

  • Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript

    2) (opcional) Teste outros estilos de bordas em vez do solid que vimos no exerccio anterior. Algumaspossibilidades: dashed, dotted, double, groove e outros.

    Teste tambm outras possibilidades para o text-align, como left, right e justify.

    2.17 Cores naWeb

    Propriedades como background-color, color, border-color, entre outras aceitam uma cor como valor. Exis-tem vrias maneiras de denir cores quando utilizamos o CSS.

    A primeira, mais simples e ingnua, usando o nome da cor:

    h1 {color: red;

    }

    h2 {background: yellow;

    }

    O difcil acertar a exata variao de cor que queremos no design. Por isso, bem incomum usarmos corescom seus nomes. O mais comum denir a cor com base em sua composio RGB.

    Captulo 2 - Introduo a HTML e CSS - Cores na Web - Pgina 23

  • Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript

    RGB um sistema de cor bastante comum aos designers. Ele permite especicar at 16 milhes de corescomo uma combinao de trs cores base: Vermelho (Red), Verde (Green), Azul (Blue). Podemos escolhera intensidade de cada um desses trs canais bsicos, numa escala de 0 a 255.

    Um amarelo forte, por exemplo, tem 255 de Red, 255 de Green e 0 de Blue (255, 255, 0). Se quiser um laranja,basta diminuir um pouco o verde (255, 200, 0). E assim por diante.

    No CSS, podemos escrever as cores tendo como base sua composio RGB. Alis, no CSS3 - que veremosmelhor depois - h at uma sintaxe bem simples pra isso:

    h3 {color: rgb(255, 200, 0);

    }

    Essa sintaxe funciona nos browsers mais modernos mas no a mais comum na prtica, por questes decompatibilidade. O mais comum a notao hexadecimal, que acabamos usando no exerccio anterior aoescrever #F2EDED. Essa sintaxe tem suporte universal nos navegadores e mais curta de escrever, apesarde ser mais enigmtica.

    h3 {background: #F2EDED;

    }

    No fundo, porm, a mesma coisa. Na notao hexadecimal (que comea com #), temos 6 caracteres. Osprimeiros 2 indicam o canal Red, os dois seguintes, o Green, e os dois ltimos, Blue. Ou seja, RGB. E usamosa matemtica pra escrever menos, trocando a base numrica de decimal para hexadecimal.

    Na base hexadecimal, os algarismos vo de zero a quinze (ao invs do zero a nove da base decimal comum).Para representar os algarismos de dez a quinze, usamos letras de A a F. Nessa sintaxe, portanto, podemosutilizar nmeros de 0-9 e letras de A-F.

    H uma conta por trs dessas converses, mas seu editor de imagens deve ser capaz de fornecer ambos osvalores para voc sem problemas. Um valor 255 vira FF na notao hexadecimal. A cor #F2EDED, porexemplo, equivalente a rgb(242, 237, 237), um cinza claro.

    Vale aqui uma dica quanto ao uso de cores hexadecimais, toda vez que os caracteres presentes na composioda base se repetirem, estes podem ser simplicados. Ento um nmero em hexadecimal 3366FF, pode sersimplicado para 36F.

    2.18 ListasHTML

    No so raros os casos em que queremos exibir uma listagem em nossas pginas. OHTML tem algumas tagsdenidas para que possamos fazer isso de maneira correta. A lista mais comum a lista no-ordenada.

    Captulo 2 - Introduo a HTML e CSS - Listas HTML - Pgina 24

  • Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript

    Primeiro item da lista

    Segundo item da lista:

    Primeiro item da lista aninhadaSegundo item da lista aninhada

    Terceiro item da lista

    Note que, para cada item da lista no-ordenada, utilizamos umamarcao de item de lista . No exemploacima, utilizamos uma estrutura composta na qual o segundo item da lista contm uma nova lista. A mesmatag de item de lista utilizada quando demarcamos uma lista ordenada.

    Primeiro item da listaSegundo item da listaTerceiro item da listaQuarto item da listaQuinto item da lista

    As listas ordenadas tambm podem ter sua estrutura composta por outras listas ordenadas como no exemploque temos para as listas no-ordenadas. Tambm possvel ter listas ordenadas aninhadas em um item deuma lista no-ordenada e vice-versa.

    Existe um terceiro tipo de lista que devemos utilizar para demarcar um glossrio, quando listamos termos eseus signicados. Essa lista a lista de denio.

    HTML

    HTML a linguagem de marcao de textos utilizadapara exibir textos como pginas na Internet.

    Navegador

    Navegador o software que requisita um documento HTMLatravs do protocolo HTTP e exibe seu contedo em umajanela.

    Captulo 2 - Introduo a HTML e CSS - Listas HTML - Pgina 25

  • Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript

    2.19 Espaamento e margem

    Utilizamos a propriedade padding para espaamento e margin para margem. Vejamos cada uma e comoelas diferem entre si.

    Padding

    A propriedade padding utilizada para denir uma margem interna em alguns elementos (por margeminterna queremos dizer a distncia entre o limite do elemento, sua borda, e seu respectivo contedo) e temas subpropriedades listadas a seguir:

    padding-top

    padding-right

    padding-bottom

    padding-le

    Essas propriedades aplicamuma distncia entre o limite do elemento e seu contedo acima, direita, abaixo e esquerda respectivamente. Essa ordem importante para entendermos como funciona a shorthand propertydo padding.

    Podemos denir todos os valores para as subpropriedades do padding em uma nica propriedade, chamadaexatamente de padding, e seu comportamento descrito nos exemplos a seguir:

    Se passado somente um valor para a propriedade padding, esse mesmo valor aplicado em todas as direes.

    p {padding: 10px;

    }

    Se passados dois valores, o primeiro ser aplicado acima e abaixo (equivalente a passar o mesmo valor parapadding-top e padding-bottom) e o segundo ser aplicado direita e esquerda (equivalente ao mesmovalor para padding-right e padding-left).

    p {padding: 10px 15px;

    }

    Se passados trs valores, o primeiro ser aplicado acima (equivalente a padding-top), o segundo ser aplicado direita e esquerda (equivalente a passar o mesmo valor para padding-right e padding-left) e o terceirovalor ser aplicado abaixo do elemento (equivalente a padding-bottom)

    p {padding: 10px 20px 15px;

    }

    Captulo 2 - Introduo a HTML e CSS - Espaamento e margem - Pgina 26

  • Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript

    Se passados quatro valores, sero aplicados respectivamente a padding-top, padding-right,padding-bottom e padding-left. Para facilitar a memorizao dessa ordem, basta lembrar que osvalores so aplicados em sentido horrio.

    p {padding: 10px 20px 15px 5px;

    }

    Margin

    A propriedade margin bem parecida com a propriedade padding, exceto que ela adiciona espao aps olimite do elemento, ou seja, um espaamento alm do elemento em si. Alm das subpropriedades listadasa seguir, h a shorthand property margin que se comporta da mesma maneira que a shorthand property dopadding vista no tpico anterior.

    margin-top

    margin-right

    margin-bottom

    margin-le

    H ainda umamaneira de permitir que o navegador dena qual ser a dimenso da propriedade padding oumargin conforme o espao disponvel na tela: denimos o valor auto para a margem ou o espaamento quequisermos.

    No exemplo a seguir, denimos que um elemento no tem nenhuma margem acima ou abaixo de seu con-tedo e que o navegador dene uma margem igual para ambos os lados de acordo com o espao disponvel:

    p {margin: 0 auto;

    }

    Dimenses

    possvel determinar as dimenses de um elemento, por exemplo:

    p {background-color: red;height: 300px;width: 300px;

    }

    Todos os pargrafos do nosso HTML ocuparo 300 pixels de largura e de altura, com cor de fundo vermelha.

    Captulo 2 - Introduo a HTML e CSS - Espaamento e margem - Pgina 27

  • Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript

    2.20 Exerccios: listas e margens

    1) Ainda na pgina sobre.html, crie um subttulo chamado Diferenciais e, logo em seguida, uma lista dediferenciais. Use para o subttulo, para a lista e para os itens da lista.

    Dica: voc pode copiar o texto dos diferenciais do arquivo diferenciais.txt.

    Diferenciais

    Menor preo do varejo, garantidoSe voc achar uma loja mais barata, leva o produto de graa....

    Teste o resultado no navegador.

    2) Podemosmelhorar a apresentao da pgina acertando alguns espaamentos usando vrias propriedadesdo CSS, como margin, padding e text-indent.

    h1 {padding: 10px;

    }

    h2 {margin-top: 30px;

    }

    p {padding: 0 45px;text-indent: 15px;

    }

    figure {padding: 15px;margin: 30px;

    }

    figcaption {margin-top: 10px;

    }

    Veja o resultado no navegador.

    3) Para centralizar o body como no design, podemos usar o truque de colocar um tamanho xo e margensauto na esquerda de direita:

    Captulo 2 - Introduo a HTML e CSS - Exerccios: listas e margens - Pgina 28

  • Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript

    body {margin-left: auto;margin-right: auto;width: 940px;

    }

    Verique mais uma vez o resultado.

    2.21 LinksHTML

    Quando precisamos indicar que um trecho de texto se refere a um outro contedo, seja ele no mesmo docu-mento ou em outro endereo, utilizamos a tag de ncora .

    Existem dois diferentes usos para as ncoras. Um deles a denio de links:

    Visite o site da Caelum.

    Note que a ncora est demarcando apenas a palavra Caelum de todo o contedo do pargrafo exempli-cado. Isso signica que, ao clicarmos com o cursor domouse na palavra Caelum, o navegador redirecionaro usurio para o site da Caelum, indicado no atributo href.

    Outro uso para a tag de ncora a demarcao de destinos para links dentro do prprio documento, o quechamamos de bookmark.

    Mais informaes aqui.Contedo da pgina...

    Mais informaes sobre o assunto:Informaes...

    De acordo com o exemplo acima, ao clicarmos sobre a palavra aqui, demarcada com um link, o usurioser levado poro da pgina onde o bookmark info visvel. Bookmark o elemento que tem o atributoid.

    Captulo 2 - Introduo a HTML e CSS - Links HTML - Pgina 29

  • Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript

    possvel, com o uso de um link, levar o usurio a um bookmark presente em outra pgina.

    Entre em contato sobre o curso

    O exemplo acima far com que o usurio que clicar no link seja levado poro da pgina indicada noendereo, especicamente no ponto onde o bookmark contato seja visvel.

    2.22 Exerccios: links

    1) No primeiro pargrafo do texto, citamos o centro de distribuio na cidade de Jacarezinho, no Paran.Transforme esse texto em um link externo apontando para o mapa no Google Maps.

    Use a tag para criar link para o Google Maps:

    Jacarezinho, no Paran

    Teste a pgina no navegador e acesse o link.

    2) Durante o curso, vamos criar vrias pginas para o site da Mirror Fashion, como uma pgina inicial(chamada index.html).

    Queremos, nessa pgina de Sobre que estamos fazendo, linkar para essa pgina. Por isso, vamos cri-la agora na pasta mirror-fashion com a estrutura bsica e um pargrafo indicando em qual pgina ousurio est. No se preocupe, ela ser incrementada em breve.

    Crie a pgina index.html:

    Mirror Fashion

    Ol, sou o index.html!

    Adicione um link inteno na nossa sobre.html apontando para esta pgina que acabamos de criar. Oterceiro pargrafo do texto possui referncia a esta pgina mas ainda sem link. Crie link l:

    ... Acesse nossa loja...

    Captulo 2 - Introduo a HTML e CSS - Exerccios: links - Pgina 30

  • Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript

    Repare como apenas envolvemos o texto a ser linkado usando a tag .

    Veja o resultado.

    3) Se reparar bem, ainda nesse terceiro pargrafo de texto, h referncias textuais para as outras sees danossa pgina, em particular para aHistria e os Diferenciais. Para facilitar a navegao do usurio, pode-mos transformar essas referncias em ncoras para as respectivas sees no HTML.

    Para isso, adicione um id em cada um dos subttulos para identic-los:

    Histria

    ...

    Diferenciais

    Agora que temos os ids dos subttulos preenchidos, podemos criar uma ncora para eles:

    ... Conhea tambm nossa histria enossos diferenciais....

    Veja o resultado em seu navegador.

    2.23 Elementos estruturais

    J vimos muitas tags para casos especcos: ttulos com h1, pargrafos com p, imagens com img, listas comul etc. E ainda vamos ver vrias outras.

    Mas claro que no existe uma tag diferente para cada coisa do universo. O conjunto de tags do HTML bem vasto mas tambm limitado.

    Invariavelmente voc vai cair algum dia num cenrio onde no consegue achar a tag certa para aquele con-tedo. Nesse caso, pode usar as tags e que funcionam como coringas. So tags sem nenhumsignicado especialmas que podem servir para agrupar um certo contedo, tanto umbloco da pgina quantoum pedao de texto.

    E, como vamos ver a seguir, vamos poder estilizar esses divs e spans com CSS customizado. Por padro, elesno tm estilo algum.

    2.24 CSS: Seletores de ID e filho

    J vimos como selecionar elementos no CSS usando simplesmente o nome da tag:

    p {color: red;

    }

    Captulo 2 - Introduo a HTML e CSS - Elementos estruturais - Pgina 31

  • Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript

    Apesar de simples, uma maneira muito limitada de selecionar. s vezes no queremos pegar todos ospargrafos da pgina, mas apenas algum determinado.

    Existem, portanto, maneiras mais avanadas de selecionarmos um ou mais elementos do HTML usando osseletores CSS. Vamos ver seletores CSS quase que ao longo do curso todo, inclusive alguns bem avanados emodernos do CSS3. Por enquanto, vamos ver mais 2 bsicos alm do seletor por nome de tag.

    Seletor de ID

    possvel aplicar propriedades visuais a um elemento selecionado pelo valor de seu atributo id. Para isso, oseletor deve iniciar com o caractere # seguido do valor correspondente.

    #cabecalho {color: white;text-align: center;

    }

    O seletor acima far com que o elemento do nosso HTML que tem o atributo id com valor cabecalhotenha seu texto renderizado na cor branca e centralizado. Note que no h nenhuma indicao para qual taga propriedade ser aplicada. Pode ser tanto uma quanto um , at mesmo tags sem contedo comouma , desde que essa tenha o atributo id com o valor cabecalho.

    Como o atributo id deve ter valor nico no documento, o seletor deve aplicar suas propriedades declaradassomente quele nico elemento e, por cascata, a todos os seus elementos lhos.

    Seletor hierrquico

    Podemos ainda utilizar um seletor hierrquico que permite aplicar estilos aos elementos lhos de um ele-mento pai:

    #rodape img {margin-right: 35px;vertical-align: middle;width: 94px;

    }

    No exemplo anterior, o elemento pai rodape selecionado pelo seu id. O estilo ser aplicado apenas noselementos img lhos do elemento com id=rodape.

    2.25 Exerccios: seletores CSS

    1) Emnossa pgina, temos uma que aponta para a imagem centro-distribuicao.png. Queremosacertar seu tamanho para ser compatvel com a imagem de dentro, alm de centraliz-la na pgina.

    Captulo 2 - Introduo a HTML e CSS - Exerccios: seletores CSS - Pgina 32

  • Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript

    Com CSS, podemos congurar o tamanho com width e colocar as margens laterais como auto para cen-tralizar. Mas como indicar no CSS que queremos aplicar essas regras somente a um certo elemento?Usando IDs.

    Coloque um id na para podermos estiliz-la especicamente via CSS:

    ....

    Adicionando o CSS:

    #centro-distribuicao {margin-left: auto;margin-right: auto;width: 550px;

    }

    Teste no navegador. Compare o resultado coma de id familia-pelho que no recebeu omesmoestilo.

    2) Crie um rodap para a pgina utilizando uma , que deve ser inserida como ltimo elemento dentroda tag :

    Copyright Mirror Fashion

    Teste o resultado.

    3) Assim como zemos para os ttulos e subttulos, estilize o nosso rodap. Repare no uso do id via CSSpara selecionarmos apenas o elemento especco que ser estilizado. Repare tambm no uso do seletor dedescendentes para indicar um elemento que est dentro de outro.

    #rodape {color: #777;

    Captulo 2 - Introduo a HTML e CSS - Exerccios: seletores CSS - Pgina 33

  • Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript

    margin: 30px 0;padding: 30px 0;

    }

    #rodape img {margin-right: 30px;vertical-align: middle;width: 94px;

    }

    Teste o resultado nal no navegador.

    2.26 Fluxo do documento e float

    Suponhamos que, por uma questo de design, a imagem da famlia Pelho deva vir ao lado do pargrafo econforme a imagem abaixo:

    Isso no acontece por padro. Repare que, observando as tags HTML que usamos at agora, os elementosda pgina so desenhados um em cima do outro. como se cada elemento fosse uma caixa (box) e o padro empilhar essas caixas verticalmente. Mais pra frente vamos entender melhor esse algoritmo, mas agora oimportante que ele atrapalha esse nosso design.

    Temos um problema: a tag ocupa toda a largura da pgina e aparece empilhada no uxo do docu-mento, no permitindo que outros elementos sejam adicionados ao seu lado.

    Captulo 2 - Introduo a HTML e CSS - Fluxo do documento e oat - Pgina 34

  • Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript

    Este problema pode ser solucionado por meio da propriedade oat. Esta propriedade permite que tiremosum certo elemento do uxo vertical do documento o que faz com que o contedo abaixo dele ua ao seuredor. Na prtica, vai fazer exatamente o layout que queremos.

    Em nosso exemplo, o contedo do pargrafo tentar uir ao redor da nossa imagem com oat. Perceba quehouve uma perturbao do uxo HTML, pois agora a nossa imagem parece existir fora do uxo.

    2.27 Exerccios: flutuao de elementos

    1) Queremos que a imagem da Famlia Pelho esteja utuando a direita no texto na seo sobre aHistria daempresa. Para isso, use a propriedade float no CSS.

    Como a com a imagem da famlia Pelho ainda no possui id, adicione um:

    ....

    Agora podemos referenciar o elemento atravs de seu id em nosso CSS, indicando a utuao e umamargem para espaamento:

    #familia-pelho {float: right;margin: 0 0 10px 10px;

    }

    Teste o resultado. Repare como o texto renderizado ao redor da imagem, bem diferente de antes.

    2) (opcional) Faa testes com o float: left tambm.

    3) (opcional) Teste utuar a imagem do centro de distribuio. Como o contedo uir ao seu redor agora? o que queramos? Como melhorar?

    Captulo 2 - Introduo a HTML e CSS - Exerccios: utuao de elementos - Pgina 35

  • Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript

    2.28 O futuro e presente daWeb com oHTML5

    Nos ltimos anos, muito tem se falado sobre a prxima verso do HTML, o HTML5. Esse projeto umgrande esforo do W3C e dos principais browsers para atender a uma srie de necessidades do desenvolvi-mento daWeb como plataforma de sistemas distribudos e informao descentralizada. Algumas novidadesso importantes para a marcao de contedo, outras para a estilizao com o CSS nvel 3 (CSS3) e outrasnovidades so importantes para interao avanada com o usurio com novas funcionalidades do navegadorcom JavaScript.

    Apesar da especicao ainda no estar completa e existirem diferenas entre as implementaes adotadaspelos diferentes navegadores ainda hoje, o mercado est tomando uma posio bem agressiva quanto ado-o dos novos padres e hoje muitos projetos j so iniciados com os novos padres.

    Em alguns casos, os esforos de manuteno de um projeto que adota os novos padres similar ou compa-rvel com a manuteno de um projeto que prev compatibilidade total com navegadores j obsoletos comoo Internet Explorer 7 e o Firefox 3.

    Em nosso projeto, vamos adotar os padres do HTML5 e vamos conhecer e utilizar algumas de suas novi-dades quanto melhoria da semntica de contedo e novas propriedades de CSS que nos permite adicionarefeitos visuais antes impossveis. Ainda assim, nosso projeto ser parcialmente compatvel com navegadoresobsoletos por conta da tcnica Progressive Enhancement.

    Captulo 2 - Introduo a HTML e CSS - O futuro e presente da Web com o HTML5 - Pgina 36

  • Captulo 3

    HTML semntico e posicionamento no CSS

    O caos a rima do inaudito. Zack de la Rocha

    3.1 O processo de desenvolvimento de uma tela

    Existe hoje no mercado uma grande quantidade de empresas especializadas no desenvolvimento de sites eaplicaes web, bem como algumas empresas de desenvolvimento de soware ou agncias de comunicaoque tm pessoas capacitadas para executar esse tipo de projeto.

    Quando detectada a necessidade do desenvolvimento de um site ou aplicao web, a empresa que tem essanecessidade deve passar todas as informaes relevantes ao projeto para a empresa que vai execut-lo. A em-presa responsvel pelo seu desenvolvimento deve analisar muito bem essas informaes e utilizar pesquisaspara complementar ou mesmo certicar-se da validade dessas informaes.

    Um projeto de site ou aplicao web envolve muitas disciplinas em sua execuo, pois so diversas caracte-rsticas a serem analisadas e diversas as possibilidades apresentadas pela plataforma. Por exemplo, devemosconhecer muito bem as caractersticas do pblico alvo, pois ele dene qual a melhor abordagem para denira navegao, tom lingustico e visual a ser adotado, entre outras. A anidade do pblico com a Internet e ocomputador pode inclusive denir o tipo e a intensidade das inovaes que podem ser utilizadas.

    Por isso, a primeira etapa do desenvolvimento do projeto ca a cargo da rea deUser ExperienceDesign (UX)ou Interaction Design (IxD), normalmente composta de pessoas com formao na rea de comunicao.Essa equipe, ou pessoa, analisa e enderea uma srie de informaes da caracterstica humana do projeto,denindo a quantidade, contedo e localizao de cada informao.

    Algumas das motivaes e prticas de Design de Interao e Experincia do Usurio so contedo do cursoDesign de Interao, Experincia do Usurio e Usabilidade. O resultado do trabalho dessa equipe uma

  • Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript

    srie de denies sobre a navegao (mapa do site) e um esboo de cada uma das vises, que so as pginas, evises parciais como, por exemplo, os dilogos de alerta e conrmao da aplicao. Essas vises no adotamnenhum padro de design grco: so utilizadas fontes, cores e imagens neutras, embora as informaesescritas devam ser denidas nessa fase do projeto.

    Esses esboos das vises so o que chamamos de wireframes e guiam o restante do processo de design.

    Com os wireframes em mos, hora de adicionar as imagens, cores, tipos, fundos, bordas e outras caracte-rsticas visuais. Esse trabalho realizado pelos designers grcos, que utilizam ferramentas grcas como

    Captulo 3 - HTML semntico e posicionamento no CSS - O processo de desenvolvimento de uma tela - Pgina 38

  • Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript

    Adobe Photoshop, Adobe Fireworks, GIMP, entre outras. O que resulta desse trabalho que o designer realizaem cada wireframe o que chamamos de layout. Os layouts so imagens estticas j com o visual completoa ser implementado. Apesar de os navegadores serem capazes de exibir imagens estticas, exibir uma nicaimagem para o usurio nal no navegador no a forma ideal de se publicar uma pgina.

    Para que as informaes sejam exibidas de forma correta e para possibilitar outras formas de uso e interaocom o contedo, necessrio que a equipe de programao front-end transforme essas imagens em telasvisveis e, principalmente, utilizveis pelos navegadores. Existem diversas tecnologias e ferramentas pararealizar esse tipo de trabalho. Algumas das tecnologias disponveis so: HTML, Adobe Flash, Adobe Flex,JavaFX e Microso Silverlight.

    De todas as tecnologias disponveis, a mais recomendada certamente o HTML, pois a linguagem que onavegador entende. Todas as outras tecnologias citadas dependem do HTML para serem exibidas correta-mente no navegador e, ultimamente, o uso do HTML, em conjunto com o CSS e o JavaScript, tem evoludoa ponto de podermos substituir algumas dessas outras tecnologias onde tnhamos mais poder e controle emrelao exibio de grcos, efeitos e interatividade.

    3.2 O projetoMirror Fashion

    Durante o curso, vamos produzir algumas pginas de um projeto: um e-commerce de roupas. No captuloanterior, de introduo, criamos uma pgina simples de Sobre. Vamos comear agora a projetar o restante,com as pginas mais complexas.

    Uma equipe deUX j deniu as pginas, o contedo de cada uma delas e produziu algunswireframes. Depoisde realizado esse trabalho, a equipe de design j adicionou o visual desejado pelo cliente como resultado naldo projeto.

    Agora a nossa vez de transformar esse layout emHTML, para que os navegadores possam ler e renderizaro cdigo, exibir a pgina para o usurio nal.

    No captulo anterior, comeamos a codicar a pgina de Sobre da nossa loja, com o intuito de praticar obsico de HTML e CSS.

    Nesse momento, vamos focar na construo da parte principal da loja, aHome Page, e seguiremos o layoutocial criado pela equipe de design:

    Captulo 3 - HTML semntico e posicionamento no CSS - O projeto Mirror Fashion - Pgina 39

  • Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript

    Figura 3.1: Design da Homepage

    3.3 Analisando o Layout

    Antes de digitar qualquer cdigo, necessria uma anlise do layout. Com essa anlise, deniremos as prin-cipais reas de nossas pginas. Um fator muito importante a ser considerado quando fazemos essa anlisedo layout o modo como os navegadores interpretam e renderizam o HTML.

    O HTML exibido no navegador de acordo com a ordem de leitura do idioma da pgina. Na maioria doscasos, a leitura feita da esquerda para a direita, de cima para baixo, da mesma maneira que lemos essaapostila, por exemplo.

    Olhe detalhadamente nosso layout e tente imaginar qual a melhor maneira de estruturar nosso HTML paraque possamos codic-lo.

    De acordo com o posicionamento de elementos que foi denido desde a etapa de criao dos wireframes,

    Captulo 3 - HTML semntico e posicionamento no CSS - Analisando o Layout - Pgina 40

  • Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript

    todas as pginas no nosso projeto obedecem a uma estrutura similar.

    Estrutura da pgina

    Note que h um cabealho (uma rea que potencialmente se repetir em mais de uma pgina) que ocupauma largura xa; sendo assim, podemos criar uma seo exclusiva para o cabealho.

    Outra rea que tem uma caracterstica semelhante o rodap, pois pode se repetir em mais de uma pgina.Podemos notar que o fundo do elemento vai de uma ponta outra da pgina, porm seu contedo segue amesma largura xa do restante da pgina.

    A rea central, que contm informaes diferentes em cada pgina, no tem nenhum elemento ao fundo.Porm, notemos que sua largura limitada antes de atingir o incio e o mda pgina. Notemos que, apesar dofundo do rodap ir de uma ponta outra, seu contedo tambm limitado pela mesma largura do contedo.

    No caso da home page, o miolo da pgina pode ainda ser visto como dois blocos diferentes. H o blocoprincipal inicial com o menu de navegao e o banner de destaque. E h outro bloco no nal com doispainis com listas de produtos.

    Poderamos denir essas reas da seguinte maneira:

    Captulo 3 - HTML semntico e posicionamento no CSS - Analisando o Layout - Pgina 41

  • Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript

    Note que utilizamos o atributo id do HTML para identicar a principal. O atributo id deve sernico em cada pgina, ou seja, s pode haver um elemento com o atributo id="main". Mesmo se o outroelemento for de outra tag, o id no pode se repetir. De acordo com a estrutura acima, ns separamos asquatro reas principais.

    3.4 HTML semntico

    As tags que usamos antes - header, section e footer - so tags novas do HTML5. Antigamente, numasituao parecida com essa, teramos criado apenas trs div, uma para cada parte da pgina, e talvez colocadoids diferentes pra cada uma.

    Qual a diferena entre colocar div e essas novas tags do HTML5? Visualmente e funcionalmente, nenhumadiferena. A nica diferena o nome da tag e o signicado que elas carregam. E isso bastante importante.

    Dizemos que a funo do HTML fazer a marcao do contedo da pgina, representar sua estrutura dainformao. No papel do HTML, por exemplo, cuidar da apresentao nal e dos detalhes de design - isso papel do CSS. O HTML precisa ser claro e limpo, focado em marcar o contedo.

    As novas tags do HTML5 trazem novos signicados semnticos para usarmos em elementos HTML. Emvez de simplesmente agrupar os elementos do cabealho em um div genrico e sem signicado, usamos umatag header que carrega em si o signicado de representar um cabealho.

    Com isso, temos um HTML com estrutura baseada no signicado de seu contedo, o que traz uma srie debenefcios, como a facilidade de manuteno e compreenso do documento.

    Provavelmente, o design da sua pgina deixa bastante claro qual parte da sua pgina o cabealho e qualparte omenu de navegao. Visualmente, so distinguveis para o usurio comum. Mas e se desabilitarmoso CSS e as regras visuais? Como distinguir esses contedos?

    Um HTML semntico carrega signicado independente da sua apresentao visual. Isso particularmenteimportante quando o contedo ser consumido por clientes no visuais. H vrios desses cenrios. Umusurio cego poderia usar um leitor de tela para ouvir sua pgina. Neste caso, a estrutura semntica doHTML essencial para ele entender as partes do contedo.

    Mais importante ainda, robs de busca como o Google tambm so leitores no visuais da sua pgina. Semum HTML semntico, o Google no consegue, por exemplo, saber que aquilo um menu e que deve seguirseus links. Ou que determinada parte s um rodap informativo, mas no faz parte do contedo principal.Semntica uma importante tcnica de SEO - SearchEngineOptimization - e crtica paramarketing digital.

    Captulo 3 - HTML semntico e posicionamento no CSS - HTML semntico - Pgina 42

  • Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript

    Vamos falar bastante de semntica ao longo do curso e esse um ingrediente fundamental das tcnic