HTML, CSS, Javascript e PHP

Download HTML, CSS, Javascript e PHP

Post on 31-Dec-2016

231 views

Category:

Documents

7 download

Embed Size (px)

TRANSCRIPT

<ul><li><p>Conhea mais da Caelum.</p><p>Cursos Onlinewww.caelum.com.br/online</p><p>Blog Caelumblog.caelum.com.br</p><p>Newsletterwww.caelum.com.br/newsletter</p><p>Facebookwww.facebook.com/caelumbr</p><p>Twittertwitter.com/caelum</p><p>Casa do CdigoLivros para o programador</p><p>www.casadocodigo.com.br</p></li><li><p>Sobre esta apostila</p><p>Esta 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.</p><p>A Caelum espera que voc aproveite esse material. Todos os comentrios, crticas e sugestes sero muitobem-vindos.</p><p>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.</p><p>Baixe sempre a verso mais nova em: www.caelum.com.br/apostilas</p><p>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.</p><p>www.caelum.com.br</p><p>1</p></li><li><p>Sumrio</p><p>1 Sobre o curso - o complexo mundo do front-end 1</p><p>1.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</p><p>2 Introduo a HTML e CSS 4</p><p>2.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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212.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 Fluxo do documento e oat . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322.26 Exerccios: seletores CSS e utuao de elementos . . . . . . . . . . . . . . . . . . . . . . . . . . 332.27 O futuro e presente da Web com o HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35</p><p>3 HTML semntico e posicionamento no CSS 37</p><p>3.1 O processo de desenvolvimento de uma tela . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37</p><p>i</p></li><li><p>3.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</p><p>4 Mais HTML e CSS 55</p><p>4.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</p><p>5 JavaScript e interatividade naWeb 75</p><p>5.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 . . . . . . . . . . . . . . . . . . . . . . . 845.10 Para saber mais: vrios callbacks no mesmo elemento . . . . . . . . . . . . . . . . . . . . . . . . 86</p><p>ii</p></li><li><p>6 CSS Avanado 87</p><p>6.1 Seletores avanados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 876.2 Pseudo-classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 906.3 Pseudo elementos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 936.4 Exerccios: seletores e pseudo-classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 956.5 Exerccios opcionais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 976.6 CSS3: border-radius . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 986.7 CSS3: text-shadow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1006.8 CSS3: box-shadow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1006.9 Opacidade e RGBA . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1026.10 Prexos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1046.11 CSS3: Gradientes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1056.12 Progressive Enhancement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1076.13 Exerccios: visual CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1086.14 CSS3 Transitions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1106.15 CSS3 Transforms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1126.16 Exerccios: CSS3 transform e transition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1146.17 Para saber mais: especicidade de seletores CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . 117</p><p>7 Web para dispositivos mveis 120</p><p>7.1 Site mobile ou mesmo site? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1207.2 CSS media types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1227.3 CSS3 media queries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1237.4 Viewport . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1247.5 Exerccios: adaptaes para mobile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1267.6 Responsive Web Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1307.7 Mobile-rst . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1307.8 Exerccios opcionais: verso tablet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131</p><p>8 Introduo a PHP 133</p><p>8.1 Libertando o HTML de suas limitaes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1338.2 Como funciona um servidor HTTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1348.3 Como funciona o PHP no servidor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1348.4 Para saber mais: instalao do PHP em casa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1358.5 Exerccios: executando o PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1368.6 Reaproveitamento de cdigo com include . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1378.7 Exerccios: include . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1378.8 Para saber mais: ainda mais exibilidade com variveis . . . . . . . . . . . . . . . . . . . . . . . 1398.9 Exerccios opcionais: variveis em PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140</p><p>9 Progressive enhancement e mobile-rst 142</p><p>9.1 Formulrio de compra . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1439.2 Exerccio: formulrio da pgina de produto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145</p><p>iii</p></li><li><p>9.3 Design mobile-rst . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1469.4 Progressive enhancement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1479.5 Box model e box-sizing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1489.6 Exerccios: pgina de produto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1499.7 Evoluindo o design para desktop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1539.8 Media queries de contedo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1539.9 Exerccios: responsive design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1549.10 HTML5 Input range . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1569.11 Exerccios: seletor de tamanho . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1579.12 Tabelas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1579.13 Exerccios: detalhes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1599.14 Exerccios opcionais: fundo . . ....</p></li></ul>