Caelum HTML Css Javascript Php

Download Caelum HTML Css Javascript Php

Post on 31-Dec-2015

76 views

Category:

Documents

2 download

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 . . . . . . . . . . . . . . . . . . . . ....