Scribd Logo
Upload

Welcome to Scribd!

  • WD 43

    Uploaded by

    Mauricio de Sá
    138 views243 pages
    linguagem de programação

    Original Title

    WD-43

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    linguagem de programação

    Copyright:

    © All Rights Reserved
    Download as PDF or read online from Scribd
    Flag for inappropriate content
    138 views243 pages

    WD 43

    Uploaded by

    Mauricio de Sá
    linguagem de programação

    Copyright:

    © All Rights Reserved
    Download as PDF or read online from Scribd
    Flag for inappropriate content
    of 243
    WD-43 Desenvolvimento Web com HTML, CSS e JavaScript WEB SITE | SCRIPTS | StyleSheet T | Cae | um Ensino e Inovacao www.caelum.com.br Sumario Sobre 0 curso - 0 complexo mundo do front-end] 1 {kx _O-curso e os exercicios] : : 1 f.2 _Oprojeto dee-commerce] . . 2 i: Tirando duvidas com instrutor] . . we 2 ts Tirando ividas onlineno GU]... .. . 2 i PraondeWdepow. oe... F088 wh Gl BeOS CH eae cD ota RR 3 5 —Introdugio a HTML « CS z .1__Bxibindo informacoes na Web]... ..... Shee 20 YON Tene Oe 2A GA Ea aa g 4 far Stee POT ME seus ows we eos ees Mais ams eee MED ee 7 2.3 Estrutura deum documento HTMI] .. . 7 a4 Tags 9 .s Imagens]. . 10 Bo ‘A estrurura dos aguivos Teamprgen a Editores ¢ IDEs| a 2.8 _ Primeira paginal u Bp _Fxercicio: primeiros passos com 4 bio Estilizando comCSS....... 16 bain Sintaxe einchusio de CSS). « 7 baz _Propriedades Tpogralicas « ne 19 13 Alinhamento e decoracao de texto] 20 2.14 Imagem de fando] a pas Bordas]....... a 2.16 Exercicio: primeitos passos com C: 2 paz Coresna Web] ...........5 . wee aut ae i 2 oe 0s eee BB pas Tistas HTMY] 4 po Fspagamento emargem] 00s... se TEER 26 .20 Exercicios: listase margens| ....... 28 a 2.24 CSS: Seletores de TD e filho] 32 f.25 Exercicios: seletores CSS] . 33 2.26 Fluxo do documento e float] . 7. 6 bay Prercicios: thinapao de clementaa ann op BE b.28 Cisse presente ts Web como ATMS RG GE) A SEG HG GG Ge RE RE See 36 HTML semantico e posicionamento no CSS 7 B.__Oprocesso de desenvolvimento deumateh] .... 20.6... cece ee eee 7 .2__O projeto Mirror Fashion| 39 3 __Analisando o Layout ‘ ‘ 40 8 HT™ . . . 42 Pensandonoheader. 6.0... cece cece cee eee eee eee tune eee eae B 6 Fstilizagao com classes]. “4 7 Exercicios: header aman 46 BCOoRese. Gis oes vg ee oe RG OF £4 OS OG OER iE ae SeR Ewe Eig Bockysinlings icin ons wes ees es aes aes aes es a wis bans wana oo 48 10 _Exercicios: reset e display eretn 49 fan _Postion: stati, relative, absolut)... ial gH £501.37, 50 jaz Exerdlclos: posiconamento] vs vies Hes kes ex Sk Ee eR 2s OS GG ae a 53 PIS EREROCIOSOPOMMED cose: ace suone ssaee caiie comes cme Gane sete eatie ete aan cae eae oe [ais eC! 5s (ja _Analisando o miolodapaginal............. i 20R aRA om HRS He eR SS [g.2__ Formulario: Lee 3 Ppsicionament aiiisarecea ig.5 _Cascata e heranca no C: (6 Para saber mais: 0 valor inherit] . . 7 __Pxercicios: menu ¢ destaqu 8 Dis ay inline-blodl [4.9 _ Exercicios: painéis flutuantes 64 -10_Seletores de atributo do CSS: o 1_Rodapé] . seh is9 “6 Ee Substituigao por Tagen] : 69 (4.3 Estilizacio e posicionamento ae ola 6 fag Exercicios: rodapé). «sev cee eet eeeeeeees 2 sas se es OL [xen Bxeritosopeonng) Fis ties ors Oi EkE MAS GIG EHS OS core ee Uae KAR wos STM JavaScript e interatividade na Web] 7 -1__Introdugio ao JavaScript]... eee eee eee eee ees 5 2 Console do navegador] ..... 5.5 sia GL Hea ee ows cee bese 7B 3 Sintaxe basical * +s cone aes 76 Ean Reercicioy opciones Reaciiateetinal ld ee : eB 5 _Interatividade na Web] 8 G-6 Exerclcio valldagio na busca com}. a -7__ Fungbes temporai Sere lees cet cave totun gases cate, woee seus conse Hoant tw & .8__ Exercicio: banner rotativo) 3 2 29 . 84 G5 Para saber mols sagestio para vdeo depawelplay| . 85 10 Para saber mais: varios callbacks no mesmo elemento]... ... 0... . esse esse ves 86 ii [CSS Avangado 2 Seletores avancados] . 2 PRM OCA ass ts ee as a 63 Pseudo elementos] . . 6.4 _Exercicios: eletorese poeuo> =cTasses]. 65 Exercicios opcionais). 6.6 _CSS3: border radiug. Z_CSS3: text-shadow] 68 C585 box-shadow].. 6... ee ee ee eee 69 _Opacdade eRGBA] . (6.10 Prefixos] . ee ee ere 11 CSS3! Gradienteg ER ERT 6.12 Progressive Enhancement] Exercicios: visual CS: 6. ‘CSS5 Transk 16_Fxercicios: CSS3 transform ¢ transition) (6.17 Para saber mais: especificidade de seletores CSS] . . . Zz Web para dispositivor moves] Ba Site. ‘mobi le ou mesmo site?] . fa CSS medagped 3 CSG media queries BEELER 101 103, = 105 106 G4 Viewpor] [25__Exercicios: mobile site] . . a 7.6 Responsive Web Design] . E:z_Mobile-first] eal ‘xercicios opcional & Tatrodugio a PHP] 8.3_Como funciona o PHP no servidor]. .... . 5. Exercicios: executando o PHP|.............- 8.6 _Reaproveitamento de codigo com include] Exercicios: include]... . 8 Para saber mais: ainda mais Texibiidade ‘com variaveis| . S.9__ Exercicios opcionais: variaveis em PHD] Progressive enhancement e mobile-firs ba Formulario de compra] . 2 Exercieiofonnulario da pagina de proaan. iii a3 us 18, 1 1 125 124 125 17 132 {93 Design mobile-first] . Bir dion model cborcetingt (9.6 Exercicios: pigina de produto]... . 7 Evoluindo o design para desktop]... . OMIM PHP: parametros e bancos de dados| o.1_Submissio do formulario] fto.3_Listas de cei jo no HIMI] . . lo.4_Exercicios: checkout arcompril im fo.5 Exercicios opcionais. 40.6 Banco dedadose SQL] ........ ho.7 MySQL e phpMyAdmin] ......... sees (0.8 Para saber mais: instalacao do MySQL em casa). 10.9 Buscas no MySQL com - j10.10 Refinando as buscas com WHERE] (0.1 Exercicios: phpMyAdmin] ........ fi0.12 Exercicios: PHP com MySQU] .. .. . 10.13 Busca de muitos resultados) 10.14 Ordenagio dos resultados) . . fto.15 Exercicios: maisbuscascomPHP)............ (0.16 Exercicios opclonaig. a Bootstrap e formularios HTML5| fuu.1 Bootstrap e frameworks de CSS). . iu.2 Estilo e componentes base]... . . . rrr fis A piginade checkout de MirorFashion) .. 0.0... ....scc ccs eeeee f.4_Exercicio opcional: inicio do checkout sem PHP]. . ns Exercicios: pagina de checkout] .........- in.6 Formulariosa funda 2 hz Novos SEnapnaRTaS ATM... ‘ 7-8 Novas atbutes HTMLs em elementosde formulirio 11.9 _Icones com glyphicon: in.10_Exercicios. formulario 1 Pari : outros fr eee bec eee eee ees iv 149 - 150 + 155 158 155 455 159 . 159 16 163 165 . 165 181 182 = 185 - 190 194 . 195 +197 . 201 i2_Componentes complexos do Bootstrap e mais HTML5| fiz.1_Grid responsivo do Bootstrap] f2.2_Exercicios: grids 12.3 _Validagao 3 2.4 Para saber mais: conirolando arvaldages HTML . 2.5 Exercicios: validagao com HTML5] . . {12.6 Componentes JavaScript do Bootstrap]. 2.7 _Fxercicios: navbar e JavaScript] . - i & 412.9 Para saber mais: envio de emails com PHP] . 2.10 Exercicios opcionais: email de confirmagao]........ 112.11 Discussao em aula: os problemas do Bootstrap e quando nao usa-lo| 3 FQuery| 13.1_jQuery - A fungao 8]. 13.2 _jQuery Selector: ea fs Filmes customizadai @por DOM]... 3.4 Utilitario de iteracao do jQuery]... . 13.6 Mais produtos na home] ig7Exerciios Query nahonig. 3.8 _ elemento output do TML3| 3.9 _Exercicios: mostrando tamanho do produto com jQuery] 13.10 Formularios dinamicos com jQuery] 13.11 _Exercicios: javascript no checkout] ig.i2 Plugins jQuery]. i3.13_Exercicios: plugin] . . ig.aq_Exercicios opcionaig fig _Integragbes com servicos We] fia. Web 2.0 e integragoes| 14.2 iframe: 4.3 Video embutd. com YouTubd 4.4 _Exercicios: iframe] 14.5 Exercicio opcional: Google Wrap] eT Y 4.6 _Botao de curtir do Facebook]... ... . 114.7 _Exercicios: Facebook] . . . 4.8 Para saber mai Open Graph = web senna F 14.10 Para saber mais: Twitter. 4.n_Para saber mais: Googles] . fa.u Frerdiclos opclonals Twitere Googled 4.13, Fontes customizadas com @font-face].. 6... 6. os 202 - 202 = 204 - 207 208 . 209 - 210 - 210 22 - 23 24 215 a6 - 216 7 218, - 219 - 219 . 220 aan . 224 224 226 - 226 + 228 - 228 . 229 230 = 230 = 230 - 23 21 . 231 + 232 233 +233 = 435 235 = 236 +237 +237 fig.ag Servicos de web fonts 14.15 Exercicios: Google Web Font: ‘Otimizagoes de Tront-end » 238 hs. HTML eHTTP - Como funciona a World Wide Web?]...... isa Principios de programacio distriburda] 15.3 _Ferramentas de diagndstico - YSlow e PageSpeed| 15.5 _Compressao de imagens, . 15.6 Diminuir o numero de requests|, . fis.7_Juntar arquivos CSSe JS) ...... 5.8 Image Sprite. . . 15.9 Para saber mais] 15.10 _Exercicios: otimizagoes Web]. endice - LE 6.1 _Varidveis Pear ConMe ss ees an os ffo.3 _Terarquia] ...... 16.4 _Tungoes de cores « palhetas automatica 5 16.6 Reaproveltamento com mixing) . Executando oL. 15.4 _Compressao e minificagio de CSS e JavaScript]. . 16. Para saber mais: recursos avangados e allernativas]. 116.8 _Exercicios: LESS). 7_Apéndice - Subindo sua aplicagao no cloud) za _Como escolher um provedor iz.2 _O Jelastic Cloud 3_Criando a contal : ira Importando dados no NySQI]. nam 75 _Preparando o projeto] 78 Enviando o projete ¢ inicalzanda wervidod. Tocaweb| indice Remissivo] Versio: 16.6. vi 8 240 241 243 243 244 246 248 249, 249, 252 252 254 254 255 250 237 1.257 258 - 259 . 259 263 263 265 264, 264 265 266 267 Cariruro1 Sobre 0 curso - o complexo mundo do front-end “Acao &a chave fundamental para todo sucesso” — Pablo Picasso. ‘Vivemos hoje numa era em que a Internet ocupa um espaco cada vez mais importante em nossas vidas pesso- aise profissionais, © surgimento constante de Aplicagdes Web, para as mais diversas finalidades, é um sinal claro de que esse mercado esti em franca expansio e traz muitas oportunidades. Aplicacées corporativas, comércio eletronico, redes sociais, filmes, misicas, noticias e tantas outras éreas estio presentes na Internet, fazendo do navegador (0 browser) o software mais utilizado de nossos computadores. Esse curso pretende abordar 0 desenvolvimento de front-end (interfaces) para Aplicagdes Web e Sites que acessamos por meio do navegador de nossos computadores, utilizando padroes atuais de desenvolvimento e conhecendo a fundo suas caracteristicas técnicas. Discutiremos as implementagdes dessas tecnologias nos diferentes navegadores, a adocao de frameworks que facilitam e aceleram nosso trabalho, além de dicas téc- nicas que destacam um profissional no mercado. HTML, CSS e JavaScript sero vistos em profundidade, Além do acesso por meio do navegador de nossos computadores, hoje o acesso a Internet a partir de dis- positives méveis representa um grande avanco da plataforma, mas também implica em um pouco mais de atengao 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 disponiveis para atender também a essa nova necessidade 1 O CURSO E OS EXERCICIOS Esse é um curso pritico que comega nos fundamentos de HTML e CSS, incluindo tépicos relacionados is novidades das versbes HTMLs e CSS3. Depois, éabordada a linguagem de programagio JavaScript, para en- riquecer nossas paginas com interagdes e efeitos, tanto com JavaScript puro quanto com a biblioteca jQuery, hoje padrao de mercado. Cc | Moterial do Trcinamento Desenvolvimento Web com HTML, CSS ¢ JavaScript aelum Ensino eInovagdo Aprenda 10x mais fazendo 0 curso dessa apostila Durante o curso, serdo desenvolvidas paginas de um Site de comércio eletronico. Os exercicios foram proje- tados para apresentar gradualmente ao aluno quais sio as técnicas mais recomendadas e utilizadas quando assumimos o papel do Programador front-end, quais sio os desafios mais comuns e quais so as técnicas € padrées recomendados para atingirmos nosso objetivo, transformando imagens estaticas (os layouts) em cédigo que os navegadores entendem e exibem como paginas da Web. Os exercicios propostas sio fundamentais para o acompanhamento do curso, desde os mais iniciais, ja que sio incrementados no decorrer das aulas. Igualmente importante é a participagao ativa nas discusses e debates em sala de aula, 1.2 O PROJETO DE E-COMMERCE Durante o curso, vamos produzir um site para um e-commerce de moda chamado Mirror Fashion. Cons- truiremos varias piginas da loja com intuito de aprender os conceitos de HTML, CSS e JS. Os contetidos ¢ 0 design da loja jé foram pré-definidos. Vamos, aqui, focar na implementagao, papel do programador front-end. 1.3. TIRANDO DUVIDAS COM INSTRUTOR Durante o curso, tire todas as suas duividas com o instrutor. HTML, CSS e JavaScript, apesar de parecerem simples ¢ basicos, tém muitas caracteristicas complexas que nao podem deixar de ser totalmente compreen- didas pelo aluno. Os instrutores também estdo disponiveis para tirar as duividas do aluno apés o término do treinamento, basta entrar em contato direto com o instrutor ou com a Caelum, teremos o prazer em ajuda. Se vocé esti acompanhando essa apostila em casa, pense também em fazer o curso presencial na Caelum, ‘Vocé tera contato direto com o instrutor para esclarecer suas duividas, aprender mais tépicos além da apostila, € trocar experiéncias. 1.4 TIRANDO DUVIDAS ONLINE NO GUJ Recomendamos fortemente a busca de recursos ¢ a participagio ativa na comunidade por meio das listas de discussio relacionadas ao contetido do curso. O GUj.com.br é um site de perguntas e respostas para desenvolvedores de software que abrange diversas ‘reas, sendo que front-end € um dos principais focos. A comunidade do GUJ tem mais de 150 mil usudriose 1 milhao ¢ meio de mensagens. £ o lugar ideal pra vocé tirar suas dtividase encontrar outros descnvolvedores. com. Capitulo 1 -Sobre o curso - 0 complexo mundo do front-end - O projeto de e-commerce - Pigina 2 aa You have either reached a page that is unavailable for viewing or reached your viewing limit for this book. aa You have either reached a page that is unavailable for viewing or reached your viewing limit for this book. aa You have either reached a page that is unavailable for viewing or reached your viewing limit for this book. Cc | Moterial do Trcinamento Desenvolvimento Web com HTML, CSS ¢ JavaScript aelum Ensino e inovagao Os melhores cursos de Java, Agile, Mobile, Ruby e Web! <1i>Gonfira nossas pronogées. <1iNavegue por todos nossos produtos em catélogo. <1irConpre sen sair de casa. Reproduza o cédigo anterior em um novo arquivo de texto puro € salve-o como index-2.html, Nao se preo- cupe com a sintaxe, vamos conhecer detalhadamente cada caracteristica do HTML nos préximos capitulos. Abra o arquivo no navegador. aes eo € © © © file://locathost/Users/Gabrie!/Oocuments/Caelum/Ap... | @ [DO A Mirror Fashion. Bem-vindo a Mirror Fashion, sua loja de roupas e acess6rios. Confira nossas promogaes. Receba informagies sobre nossos langamentos por email. Navegue por todos nossos produtos em catélogo. Compre sem sair de casa. Agora, o resultado é exibido de mancira muito mais agradavel ¢ legivel. Para isso, tivemos que utilizar al- gumas marcacbes do HTML. Essas marcacdes sao chamadas de tags, ¢ elas basicamente dao significado a0 texto contido entre sua abertura e fechamento. Apesar de estatem corretamente marcadas, asinformagdes nao apresentam nenhum atrativo estético e, nessa deficiéncia do HTML, reside o primeiro e maior desafio do programador front-end. O HTML foi desenvolvido para exibicao de documentos cientificos. Para termos uma comparacio, é como se a Web fosse desenvolvida para exibir monografias redigidas ¢ formatadas pela Metodologia do Trabalho Capitulo 2 - Introdugio a HTML ¢ C88 Exibindo informagies na Web - Pagina 6 aa You have either reached a page that is unavailable for viewing or reached your viewing limit for this book. aa You have either reached a page that is unavailable for viewing or reached your viewing limit for this book. Cc | Moterial do Trcinamento Desenvolvimento Web com HTML, CSS ¢ JavaScript aelum Ensino e inovagao Os melhores cursos de Java, Agile, Mobile, Ruby e Web! A instrucdo DOCTYPE © DOCIYPE nao é uma tag HTML, mas uma instrugio especial. Ela indica para o navegador qual versio do HTML deve ser utilizada para renderizar a pégina. Utilizaremos 2.4 Tacs HTML O HTML é composto de diversas tags, cada uma com sua fungao e significado, O HTML 5, entio, adicionou muitas novas tags, que veremos ao longo do curso. Nese momento, vamos focar em tags que representam titulos, paragrafo e énfase TiTutos Quando queremos indicar que um texto é um titulo em nossa pagina, utilizamos as tags de heading em sua marcaca

    Ben-vinde 4 Mirror Fashion, sua loja de roupas e acessérios.

    ‘As tags de heading sio tags de contetido e vio de cht> a
    , seguindo a ordem de importancia, sendo titulo principal, o mais importante, e
    o titulo de menor importancia. Utilizamos, por exemplo, a tag

    para o nome, titulo principal da pagina, e a tag como subtitulo ou como titulo de segdes dentro do documento. ‘A ordem de importincia, além de influenciar no tamanho padrio de exibi¢io do texto, tem impacto nas ferramentas que processam HTML. As ferramentas de indexagao de contetido para buscas, como 0 Google, Bing ou Yahoo! levam em consideragao essa ordem e relevancia. Os navegadoresespeciais para acessibilidade também interpretam o contcudo dessas tags de mancira a diferenciar scu conteudo ¢ facilitar a navegagio do usudrio pelo documento. Capitulo 2 - Introdugio a HTML e CSS - Tags HTML - Pagina Cc | Moterial do Trcinamento Desenvolvimento Web com HTML, CSS ¢ JavaScript aelum Ensino e inovagao Os melhores cursos de Java, Agile, Mobile, Ruby e Web! ParAGRAFOS Quando exibimos qualquer texto em nossa pagina, é recomendado que ele seja sempre contetido de alguma lag filha da tag . A marcagdo mais indicada para textos comuns & tag de parégrafo:

    Nenhum item na eacola de compras.

    Se voc’ tiver virios pardgrafos de texto, use varias dessas tags

    para separd-los

    Um paragrafo de texto.

    Outro parégrafo de text.

    MARCAGGES DE £NFASE Quando queremos dar uma énfase diferente ¢ um trecho de texto, podemos utilizar as marcagées de énfase Podemos deixar um texto “mais forte” com a tag ou deixar o texto com uma “énfase acentuada” com a tag . Também ha a tag , que diminui o tamanho do texto Por padrao, os navegadores renderizarao o texto dentro da tag em negrito e o texto dentro da tag em itdlico, Existem ainda as tags e , que atingem o mesmo resultado visualmente, mas as tags ¢ sio mais indicadas por definirem nossa intengio de significado ao contetido, mais do que uma simples indicacio visual. Vamos discutir melhor a questio do significado das tags mais adiante.

    Compre suas roupas e acess6rios na Mirror Fashion.

    2.5 IMAGENS A tag define uma imagem em uma pagina HTML e necessita de dois atributos preenchidos: src e alt. O primeiro aponta para 0 local da imagem e 0 segundo, um texto alternativo para a imagem caso essa nao possa ser carregada ou visualizada, O HTML 5 introduziu dues novas tags especificas para imagem:
    ¢
    . A lag
    define uma imagem com a conhecida tag . Além disso, permite adicionar uma legenda para a imagem por meio da tag
    .
    Fuzz Cardigan por R$ 129,90
    Capitulo 2 - Introdugio a HTML e CSS - Imagens - Pagina 10 Cc | Moterial do Trcinamento Desenvolvimento Web com HTML, CSS ¢ JavaScript aelum Ensino e inovagao Os melhores cursos de Java, Agile, Mobile, Ruby e Web! 2.6 A ESTRUTURA DOS ARQUIVOS DE UM PROJETO Como todo tipo de projeto de software, existem algumas recomendagoes quanto a organizacao dos arquivos de um site, Nao ha nenhum rigor técnico quanto a essa organizagao e, na maioria das vezes, voce vai adaptar as recomendagdes da maneira que for melhor para 0 seu projeto. ‘Como um site é um conjunto de piginas Web sobre um assunto, empresa, produto ou qualquer outra coisa, ‘comum todos os arquivos de um site estarem dentro de uma s6 pastae, assim como um livro, é recomendado (que exista uma “capa’, uma pagina inicial que possa indicar para o visitante quais sio as outras paginas que fazem parte desse projeto e como cle pode acessé-las, como se fosse 0 indice do site. Esse indice, ndo por coincidéncia, & convengao adotada pelos servidores de paginas Web. Se desejamos que uma determinada pasta seja servida como um site e dentro dessa pasta existe um arquivo chamado index.html, esse arquivo sera a pagina inicial a menos que alguma configurasao determine outra pagina para esse fim. Dentro da pasta do site, no mesmo nivel que o index. htnl, é recomendado que sejam criadas maisalgumas pastas para manter separados os arquivos de imagens, as folhas de estilo CSS e os scripts, Para iniciar um projeto, teriamos uma estrutura de pastas como a demonstrada na imagem a seguir: V@root > wes > img Bis B indexhtml [Bsobrentmi Muitas vezes, um site € servido por meio de uma aplicagao Web e, nesses casos, a estrutura dos arquivos depende de como a aplicagao necessita dos recursos para funcionar corretamente. Porém, no geral, as apli- cages também seguem um padrdo bem parecido com o que estamos adotando para 0 nosso projeto. 2.7. Epirores EIDEs Existem editores de texto como Gedit (www.gnome.org), Sublime (http://www.sublimetext.com/) ¢ Note- pad--+ (http://notepad-phis-plus.org), que possuem realce de sintaxe e outras ferramentas para facilitar 0 desenvolvimento de paginas, Ha também IDEs (Integrated Development Environment), que oferecem re- cursos como autocompletar e pré-visualizagao, como Eclipse e Visual Studio. 2.8 PRIMEIRA PAGINA A primeira pagina que desenvolveremos para a Mirror Fashion sera a Sobre, que explica detalhes sobre a ‘empresa, apresenta fotos ea histéria, Capitulo 2 - Introdusio a HTML € CSS A estrutura dos arquivos de um projeto- Pigina 1. Cc | Moterial do Trcinamento Desenvolvimento Web com HTML, CSS ¢ JavaScript aelum Ensino eInovagao Os melhores cursos de Java, Agile, Mobile, Ruby e Web! Recebemos o design jé pronto, assim como os textos, Nosso trabalho, como desenvolvedores de front-end, &codificar o HTML e CSS necessarios para esse resultado. Capitulo 2 - Introdugio a HTML © C88 - Primeira pagina - Pigina 12 aa You have either reached a page that is unavailable for viewing or reached your viewing limit for this book. Cc | Moterial do Trcinamento Desenvolvimento Web com HTML, CSS ¢ JavaScript aelum Ensino e inovagao Os melhores cursos de Java, Agile, Mobile, Ruby e Web! 2.9 EXERCICI : PRIMEIROS PASSOS COM HTML 1) Ao longo do curso, usaremos diversas imagens que 0 nosso designer preparou, Nesse ponto, vamos im- portar todas as imagens dentro do projeto que criamos antes para que possamos usé-las nas paginas. + Copiea pasta caelum/43/mirror-fashion para a drea de trabalho de sua maquina «+ Verifique a pasta img, agora cheia dearquivos do design do site. Além desta pasta, teremosas pastas se ess, que ainda nao usaremos. Em Casa Vocé pode baixar um ZIP com todos os arquivos necessirios para o curso aqui: http:// mirrorfashion.net/caelum-arquivos-curso-webzi 2) Dentro da pasta mirror-fashion, vamos criar 0 arquivo sobre.html com a estrutura basica contendo o DOCTYPE € as tags html, head e body: Sobre a Nirror Fashion 3) A pagina deve ter uma imagem com o logo da empresa, um titulo e um texto falando sobre ela. Use a tag para o logo,

    para titulo,

    para subtitulo e

    para pardgrafo chiA Mirror Fashion

    Dica: 0 texto para ser colocado na pagina esta no arquivo sobre.txt disponivel na pasta Caelum/43/textos. Sao varios pargrafos que devem ser adaptados com © HTML apropriado Apés copiar o texto do arquivo sobre.txt coloquc cada um dos parigrafos dentro de uma tag

    . Coloque também 0 titulo Histéria dentro de uma tag <2>. Capitulo 2 - Introdugio a HTML ¢ C85 - Exercicio: primeiros passos com HTML - Pagina 14 aa You have either reached a page that is unavailable for viewing or reached your viewing limit for this book. aa You have either reached a page that is unavailable for viewing or reached your viewing limit for this book. aa You have either reached a page that is unavailable for viewing or reached your viewing limit for this book. Cc | Moterial do Trcinamento Desenvolvimento Web com HTML, CSS ¢ JavaScript aelum Ensino e Inovagdo Os melhores cursos de Java, Agile, Mobile, Ruby e Web!

    Tambén sera exibido en azul com fundo amarelo!

    O cédigo anterior da tag indica que estamos alterando a cor ¢ o fundo de todos os elementos com tag p. Dizemos que selecionamos esses elementospelo nome de sua tag, ¢ aplicamos certas propriedades CSS apenas neles. ARQUIVO EXTERNO A terceira maneira de declararmos os estilos do nosso documento & com um arquivo externo, geralmente com a extensio ess, Para que seja possivel declarar nosso CSS em um arquivo & parte, precisamos indicar em nosso documento HTML uma ligacao entre ele ea folha de estilo. ‘Além da melhor organizagao do projeto, a folha de estilo externa traz ainda as vantagens de manter nosso HTML mais limpo e do reaproveitamento de uma mesma folha de estilos para diversos documentos. A indicagao de uso de uma folha de estilos externa deve ser feita dentro da tag do nosso documento: HTML: cbtal> Sobre a Mirror Fashion body>

    Tambén ser exibido en azul com fundo amarelo!

    Capitulo 2 - Introdugio a HTML e CSS - Sintaxe ¢ indusio de CSS - Pagina i8 aa You have either reached a page that is unavailable for viewing or reached your viewing limit for this book. aa You have either reached a page that is unavailable for viewing or reached your viewing limit for this book. aa You have either reached a page that is unavailable for viewing or reached your viewing limit for this book. Cc | Moterial do Trcinamento Desenvolvimento Web com HTML, CSS ¢ JavaScript aelum Ensino e inovagao Os melhores cursos de Java, Agile, Mobile, Ruby e Web! 2.16 EXERCI{CIO: PRIMEIROS PASSOS COM CSS 1) Aplicaremos um pouco de estilo em nossa pigina usando CSS. Dentro da pasta css, crie um arquivo sobre. css, que conterd nosso cédigo de estilo para essa pagina. Em primeiro lugar, precisamos carregar 0 arquivo sobre.css dentro da pagina sobre.html com a tag dentro da tag : Para a tag , altere a sua cor e sua fonte base por meio das propriedades color ¢ font-faxily: body { color: #333333; font-family: “Lucida Sans Unicode", ‘Lucida Grande", sans-serif; } O titulo 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 subtitulos, para ajudar a separar o conteitdo, hid background-inage: url(../img/sobre-background. jpg); ¥ n2{ border-bottom: 2px solid #333333; ¥ Acerte também a renderizagao das figuras, Cologue um fundo cinza, uma borda sutil, deixe a legenda em itdlico com font-style e alinhe a imagem e a legends no centro com text-align. figure { background-color: #F2EDED: border: 1px solid #ecc; text-align: center; + figeaption { font-style: italic: } Teste o resultado no navegador. Nossa pagina comega a pegar o estilo da pagina final! Capitulo 2 - Introdugio a HTML ¢ C38 - Exercicio: primeiros passos com CSS - Pégina 22 aa You have either reached a page that is unavailable for viewing or reached your viewing limit for this book. aa You have either reached a page that is unavailable for viewing or reached your viewing limit for this book. aa You have either reached a page that is unavailable for viewing or reached your viewing limit for this book. Cc | Moterial do Trcinamento Desenvolvimento Web com HTML, CSS ¢ JavaScript aelum Ensino e inovagao Os melhores cursos de Java, Agile, Mobile, Ruby e Web! 2.19 ESPACAMENTO E MARGEM Uuilizamos a propriedade padding para espagamento ¢ margin para margem. Vejamos cada uma e como clas diferem entre si. PADDING A propriedade padding ¢ utilizada para definir uma margem interna em alguns elementos (por margem interna queremos dizer a distancia entre o limite do elemento, sua borda, e seu respectivo contetido) ¢ tem as subpropriedades listadas a seguir: + padding-top + padding-right + padding-bottom + padding-left Essas propriedades aplicam uma distancia entre o limite do elemento seu conteiido acima, a direita, abaixoe ‘A esquerda respectivamente. Essa ordem éimportante para entendermos como funciona shorthand property do padding. Podemos definir todos os valores para as subpropriedades do padding em uma tinica propriedade, chamada exatamente de padding, ¢ seu comportamento € descrito nos exemplos & seguir: Se passado somente um valor para a propriedade padding, esse mesmo valoré aplicado em todas as diregdes. pt padding: 10px; } Se passados dois valores, o primeiro seré aplicado acima e abaixo (equivalente a pasar o mesmo valor para padding-top ¢ padding-bottom) e o segundo sera aplicado a direita e a esquerda (equivalente ao mesmo valor para padding-right e padding-left). pt padding: 10px 15px; + Se passados trés valores, o primeiro serd aplicado acima (equivalente a padding-top), 0 segundo ser aplicado a direita e & esquerda (equivalente a passar 0 mesmo valor para padding-right e padding-left) € 0 terceiro valor ser aplicado abaixo do elemento (equivalente a paddiag-bot tom) pt padding: 10px 20px 15px; } Capitulo 2 -Introdugio a HTML eCSS~ Espagamento e margem - Pigin aa You have either reached a page that is unavailable for viewing or reached your viewing limit for this book. aa You have either reached a page that is unavailable for viewing or reached your viewing limit for this book. aa You have either reached a page that is unavailable for viewing or reached your viewing limit for this book. Cc | Moterial do Trcinamento Desenvolvimento Web com HTML, CSS ¢ JavaScript aelum Ensino e inovagao Os melhores cursos de Java, Agile, Mobile, Ruby e Web! E possivel, com o uso de um link, levar o usuirio a um bookmark presente em outra pagina, Entre en conteto sobre 0 curse © exemplo acima fara com que 0 usudrio que clicar no link seja levado 4 porcdo da pagina indicada no endereco, especificamente no ponto onde o bookmark “contato” seja visivel. 2.22 EXERCICIOS: LINKS 1) No primeiro pardgrafo do texto, citamos o centro de distribuicao na cidade de Jacarezinho, no Parand Transforme esse texto em um linkexterne apontando para 0 mapa no Google Maps. Use a tag para criar link para o Google Maps: Jacarezinho, no Parana Teste a pagina no navegador e acesse o link. 2) Durante 0 curso, vamos criar varias paginas para o site da Mirror Fashion, como uma pagina inicial (chamada index.html) e uma pagina de contato (chamada contato.htm!). Queremos, nessa pagina de Sobre que estamos fazendo, linkar para essas outras. Por isso, vamos crid- las agora na pasta nirror-fashioa com a estrutura basica e um parigrafo indicando em qual pagina 0 usuario esti, Nao se preocupe, elas serdo incrementadas em breve. Crie a pigina index hen]: cbody> 014, sou 0 index.html Crie a pagina contato html: Capitulo2 - Introdugio a HTML ¢ C88 - Exercicios links - Pagina 30 Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript Caelum Ensino e inovagao Os melhores cursos de Java, Agile, Mobile, Ruby e Web! Mirror Fashion 014, sou o contato.html Agora adicione links internos na nossa sobre.html apontando para estas outras paginas que acabamos de criar, O terceiro pardgrafo do texto possui diversas referéncias a essas outras paginas mas ainda sem links. Crie links li: Acesse nossa loja ou entre em contato se tiver dividas Repare como apenas envolvemos o texto a ser linkado usando a tag . Vejao resultado. 3) Se reparar bem, ainda nesse terceiro pardgrafo de texto, ha referéncias textuais para as outras segdes da nossa pagina, em particular para a Histéria e os Diferenciais, Para facilitar a navegacio do usuario, pode- mos transformar essas referéncias em Ancoras para as respectivas secdes no HTML. Para isso, adicione um id em cada um dos subtitulos para identificd-los: cha id="historia">Histériac/n2>

    Diferenciais

    Agora que temos os ids dos subtitulos preenchidos, podemos criar uma ancora para eles: . Conheca também nossa     historia e nossos diferenciais. Veja o resultado em seu navegador. 2.23 ELEMENTOS ESTRUTURAIS J4 vimos muitas tags para casos especificos: titulos com h1, pardgrafos com p, imagens com img, listas com ul etc. E ainda vamos ver varias outras Mas é claro que nao existe uma tag diferente para cada coisa do universo. O conjunto de tags do HTML é bem vasto mas é também limitado, Capitulo 2 - Introdugio a HTML ¢ CSS = Elementos estruturais Pagina 51 Cc | Moterial do Trcinamento Desenvolvimento Web com HTML, CSS ¢ JavaScript aelum Ensino e inovagao Os melhores cursos de Java, Agile, Mobile, Ruby e Web! Invariavelmente vocé vai cair algum dia num cendrio onde nao consegue achar a tag certa para aquele con- tettdo, Nesse caso, pode usar as tags
    e que funcionam como coringas. Sao tags sem nenhum significado especial mas que podem servir para agrupar um certo contetido, tanto um bloco da pagina quanto um pedago de texto. E, como vamos ver a seguir, vamos poder estilizar esses divs e spans com CSS customizado. Por padrao, eles nao tém estilo algum. 2.24 CSS: SELETORES DE ID E FILHO Ja vimos como selecionar elementos no CSS usando simplesmente o nome da tag: pf color: red; Apesar de simples, é uma maneita muito limitada de selecionar, As vezes nao queremos pegar todos os parigrafos da pag , mas apenas algum determinado. Existem, portanto, maneiras mais avancadas de selecionarmos um ou mais elementos do HTML usando os seletores CSS. Vamos ver seletores CSS quase que ao longo do curso todo, inclusive alguns bem avangadose modernos do CSS3. Por enquanto, vamos ver mais 2 basicos além do seletor por nome de tag. SELETOR DEID £ possivel aplicar propriedades visuais a um clemento selecionado pelo valor de seu atributo ia. Para isso, 0 seletor deve iniciar com o caractere “#” seguido do valor correspondente. Hcabecalho { color: white; text-align: center t seletor acima faré com que © elemento do nosso HTML que tem 0 atributo id com valor “cabecalho” tenha seu texto renderizado na cor branca e centralizado. Note que nao hé nenhuma indicago para qual tag a propriedade seré aplicada, Pode ser tanto uma
    quanto um

    , até mesmo tags sem contetido como uma , desde que essa tenha o atributo id com o valor “cabecalho”, Como o atributo 4a deve ter valor Gnico no documento, 0 seletor deve aplicar suas propriedades declaradas somente aquele tinico clemento e, por cascata, a todos os seus elementos filhos. Capitulo 2- Introdus: aHTMLe CSS CSS:Seletores de ID c filho- Pagina 52 aa You have either reached a page that is unavailable for viewing or reached your viewing limit for this book. ‘a Caelam ill 86 Tass Dave Woe ITM, CSR Teg Eneino e inovaedo Os melhores cursos de Java, Agile, Mobile, Ruby e Web! 2) Crie um rodapé para a pagina utilizando uma

    , que deve ser inserida como tiltimo elemento dentro 3) da tag :
    keopy; Copyright Mirror Fashion
    Teste 0 resultado. Assim como fizemos para os titulos e subtitulos, estilize o nosso rodapé. Repare no uso do id via CSS para selecionarmos apenaso elemento especifico que serd estilizado. Repare também no uso do seletor de descendentes para indicar um elemento que esta dentro de outro. frodape { color: #777; margin: 30px 0; padding: 30px 0; trodape img { margin-right: 30px; vertical-align: middle; width: 94px; y Teste o resultado final no navegador. 2 Rensimento via telefon, ema chat twitter, facebook, cat, fax e Wegrema 1 Presente em 124 paises Atte de ure mine de funconsros em ado 0 mando MIRAOR © conyeight Minor Fashion Capitule 2 - Intreducio a HTML ¢ C83 Exercicios: seletores CSS Pagina 34 aa You have either reached a page that is unavailable for viewing or reached your viewing limit for this book. aa You have either reached a page that is unavailable for viewing or reached your viewing limit for this book. aa You have either reached a page that is unavailable for viewing or reached your viewing limit for this book. Cc | Moterial do Trcinamento Desenvolvimento Web com HTML, CSS ¢ JavaScript aelum Ensine Inovaggo OS melhores cursos agora também online. Confira no site! série de definigoes sobre a navegacio (mapa do site) e um esboco de cada uma das visbes, que sioas paginas, e visdes parciais como, por exemplo, os dilogos dealerta e confirmagao da aplicagao, Essas visdes nao adotam nenhum padrio de design grifico: sio utilizadas fontes, cores ¢ imagens neutras, embora as informagdes escritas devam ser definidas nessa fase do projeto. Esses esbocos das vis6es sao o que chamamos de wireframes ¢ guiam o restante do processo de design a OCD X(T = <_ WELCOMING HEADER SLOGAN SITE Lem pin dr ane emcee ding ed od tenor nels w bree ior pene ln me ‘ele, ater enero san hr lt gp oo ‘Snmato oena NOVIDADES MIRROR MAIS VENDIDOS MIRROR XIX XIXIXDXD XIX oe | Poets | Rove | Prnoien | cn x —: | Com 05 wireframes em mios, ¢ hora de adicionar as imagens, cores, tipos, fundos, bordas e outras caracte- risticas visuais, Esse trabalho é realizado pelos designers grificos, que utilizam ferramentas graficas como Capitule 3 - ITTML semantico ¢ posicionamento no CSS - © processo de desenvolvimento de uma tela - Pagina 38 aa You have either reached a page that is unavailable for viewing or reached your viewing limit for this book. aa You have either reached a page that is unavailable for viewing or reached your viewing limit for this book. aa You have either reached a page that is unavailable for viewing or reached your viewing limit for this book. Cc | Moterial do Trcinamento Desenvolvimento Web com HTML, CSS ¢ JavaScript aelum Ensine Inovaggo OS melhores cursos agora também online. Confira no site!
    Note que utilizamos o atributo id do HTML para identilicar a
    principal. O atributo id deve ser Unico em cada pagina, ou seja, s6 pode haver um elemento com 0 atributo id="nain". Mesmo se 0 outro elemento for de outra tag, 0 id nio pode se repetir. De acordo com a estrutura acima, nés separamos as quatro areas principais. 3.4 HTML semAnrtico As tags que usamos antes - header, section e footer - sao tags novas do HTMLs. Antigamente, numa situagdo parecida com essa, terfamos criado apenas trés div, uma para cada parte da pagina, e talvez colocado ids diferentes pra cada uma, Qual a diferenga entre colocar div ¢ essas novas tags do HTMLs? Visualmente e funcionalmente, nenhuma diferenca. A tinica diferenca é0 nome da tag eo significado que elas carregam. isso é bastanteimportante, Dizemos que a funcao do HTML ¢ fazer a marcagao do contetido da pagina, representar sua estrutura da informagao. Nao € papel do HTML, por exemplo, cuidar da apresentagao final e dos detalhes de design - isso & papel do CSS, O HTML precisa ser claro ¢ limpo, focado em marcar 0 contetido. As novas tags do HTMLs trazem novos significados semanticos para usarmos em elementos HTML, Em vezde simplesmente agrupar os elementos do cabecalho em um div genérico e sem significado, usamos uma tagheader que carrega em si o significado de representar um cabecalho. ‘Com isso, temos um HTML com estrutura baseada no significado de seu contetido, o que traz uma série de beneficios, como a facilidade de manutencao e compreensao do documento. Provavelmente, o design da sua pagina deixa bastante claro qual parte da sua pagina é 0 cabecalho e qual parte 60 menude navegacio. Visualmente, sio distinguiveis para o usuario comum. Mase se desabilitarmos 0 CSS eas regras visuais? Como distinguir esses contetidos? Um HTML semantico carrega significado independente da sua apresentagio visual. Isso ¢ particularmente importante quando 0 contetido ser consumido por clientes nao visuais. Ha varios desses cendrios. Um usuirio cego poderia usar um leitor de tela para ouvir sua pagina, Neste caso, a estrutura semintica do HTML é essencial para ele entender as partes do contetido. Mais importante ainda, robds de busca como o Google também sao leitores nao visuais da sua pagina, Sem um HTML semantico, Google nio consegue, por exemplo, saber que aquilo é um menu e que deve seguir seus links, Ou que determinada parte é sé um rodapé informativo, mas nao faz parte do contetido principal. Semantica é uma importante técnica de SEO - Search Engine Optimization - e critica para marketing digital. Capitulo 3 - HTML semantico e posicionamento no CSS - HTML semintico - Pigina 42 aa You have either reached a page that is unavailable for viewing or reached your viewing limit for this book. aa You have either reached a page that is unavailable for viewing or reached your viewing limit for this book. aa You have either reached a page that is unavailable for viewing or reached your viewing limit for this book. aa You have either reached a page that is unavailable for viewing or reached your viewing limit for this book. aa You have either reached a page that is unavailable for viewing or reached your viewing limit for this book. aa You have either reached a page that is unavailable for viewing or reached your viewing limit for this book. aa You have either reached a page that is unavailable for viewing or reached your viewing limit for this book. Cc | Moterial do Trcinamento Desenvolvimento Web com HTML, CSS ¢ JavaScript aelum Ensine Inovaggo OS melhores cursos agora também online. Confira no site! 3) Nosso header ainda esté todo 4 esquerda da pagina, sendo que, no layout, ele tem um tamanho fixo e fica centralizado na pagina. Alias, nao é s6 0 cabegalho que fica assim: 0 contetido da pagina em si eo contetido do rodapé também. Temas trés tipos de elementos que precisam ser centralizados no meio da pagina. Vamos copiar e colar as instrugdes CSS nos 3 lugares? Nao! Criamos uma classe no HTML a ser aplicada em todos esses pontos ¢ um Ginico seletor no CSS, -container { margin: 0 auto; width: 940px; , Vamos usar essa classe container no HTML também, Altere a tag header e passe 0 class="container" para ela. Teste a pagina e veja o contetido centralizado. Agora, falta “somente” o posicionamento dos elementos do header. MIRAO “SiaGonta "iikace Destos Cartio Fideldade Sobre luca 3-11 POSITION: STATIC, RELATIVE, ABSOLUTE Existe um conjunto de propriedades que podemos utilizar para posicionar um elemento na pagina, que so top, lett, bottom right, Porém essas propriedades, por padrao, nao sio obedecidas por nenhum elemento, pois elas dependem de uma outra propriedade, a position. A propriedade position determina qual 6 0 modo de posicionamento de um elemento, ¢ ela pode receber como valor static, relative, absolute ou fixed, Veremos 0 comportamento de cada um deles, junto com as propriedades de coordenadas. © primeiro valor, padrao para todos os elementos, é o static. Um elemento com posigao static permanece sempre em seu local original no documento, aquele que o navegador entende como sendo sua posicio de renderizagio. Se passarmos algum valor para as propriedades de coordenadas, eles nao serio respeitados Um dos valores para a propriedade position queaceitam coordenadas é0 relative. Com ele, ascoordenadas que passamos sto obedecidas em relarao a posigao original do elemento, Por exemplo: logotipo { position: relative: top: 20px; Capitulo 3 - HTML semintico ¢ posicionamento no CSS - Position: static, relative, absolute - Pagina 30 Cc | Moterial do Trcinamento Desenvolvimento Web com HTML, CSS ¢ JavaScript aelum Ensine Inovaggo OS melhores cursos agora também online. Confira no site! left: 50px; Os elementos em nosso documento que receberem o valor “logotipo” em seu atributo clase terio 20px adicionados aa seu topo € sopx adicionados & sua esquerda em relacao a sua posi¢ao original. Note que, a0 definirmos coordenadas, estamos adicionando pixels de distancia naquela diregao, entao o elemento sera renderizado mais abaixo e direita em comparagao a sua posigio original. O préximo modo de posicionamento que temos ¢ 0 absolute, ¢ ele é um pouco complexo. Existem algumas regras que alteram seu comportamento em determinadas circunstancias. Por definicao, o elemento que tem ‘0 modo de posicionamento absolute toma como referéncia qualquer elemento que seja seu pai na estrutura do HTML cujo modo de posicionamento seja diferente de static (que ¢ 0 padrao), eobedece ascoordenadas de acordo com o tamanho total desse elemento pai Quando nao hi nenhum elemento em toda a hierarquia daquele que recebe o posicionamento absolute que seja diferente de static, o elemento vai aplicar as coordenadas tendo como referéncia a porgio visivel da pagina no navegador. Por exemph Estrutura HTML
    Estilo CSS quadrado { background: green; height: 200px; width: 200px; } absolute { position: absolute; top: 20px; right: 30px; } Seguindo o exemplo acima, o segundo elemento
    , que recede o valor “absolute” em seu atributo class, no tem nenhum elemento como seu “pai” na hierarquia do documento, portanto ele vai alinhar-seao topoe A direita do limite visivel da pagina no navegador, adicionando respectivamente 20px e 30px nessas direcdes. ‘Vamos analisar agora o exemplo a seguir: Estrutura HTML
    quadrado absoluto">
    Capitulo 3 - HTML semantico e posicionamento no CSS ~ Position: static, relative absclute - Pagina 51 Cc | Moterial do Trcinamento Desenvolvimento Web com HTML, CSS ¢ JavaScript aelum Ensine Inovaggo OS melhores cursos agora também online. Confira no site! Estilos CSS quadrado { background: green} height: 200px; width: 200px; } absoluto { position: absolute; top: 20px; right: 30px; } relativo { position: relative; + Nesse caso, 0 elemento que recebe 0 posicionamento absolute é “filo” do elemento que recebe o posi onamento relative na estrutura do documento, partanto, o elemento absolute vai usar como ponto de referencia para suas coordenadas o elemento relative e se posicionar 20px ao topo e 3px 4 direita da posi- 20 original desse elemento. © outro modo de posicionamento, fixed, sempre vai tomar como referéncia a porcao visivel do documento no navegador, e mantém essa posicdo inclusive quando ha rolagem na tela. E uma propriedade titil para avisos importantes que devem ser visiveis com certeza, UM RESUMO DE POSITION + static ~ Sua posigao é dada automaticamente pelo fluxo da pagina: por padrao ele é renderizado logo apés seus irmaos ~ Nao aceita um posicionamento manual (left, right, top, bottom) ~ O tamanho do seu elemento pai leva em conta o tamanho do elemento static + relative = Por padrio o elemento seri renderizado da mesma maneira que o static ~ Aceita posicionamento manual ~ O tamanho do seu elemento pai leva em conta o tamanho do elemento relative, porém sem lever em conta seu posicionamento. O pai nao sofreria alteragdes mesmo se 0 elemento fosse static. Capitulo 3 - HTML semintico ¢ posicionamento ne C38 ~ Position: static, relative, absolute - Pagina 52 aa You have either reached a page that is unavailable for viewing or reached your viewing limit for this book. Cc | Moterial do Trcinamento Desenvolvimento Web com HTML, CSS ¢ JavaScript aelum Ensinoe inovagio Petrobras, UOL, Globo e mais. Os melhores treinam na Caelum MIRAOR stererasnst il FASHION SuaCont LUsae Deseiot Cando Fete Sobre Ai 3.13 EXERCICIOS OPCIONAIS 1) Aplique nosso novo cabecalho também na pagina sobre.html. Capitula 5 - HTML scmintico e posicionamento no CSS - Exercicios opcionais - Pagina 54 aa You have either reached a page that is unavailable for viewing or reached your viewing limit for this book. aa You have either reached a page that is unavailable for viewing or reached your viewing limit for this book. aa You have either reached a page that is unavailable for viewing or reached your viewing limit for this book. Cc | Moterial do Trcinamento Desenvolvimento Web com HTML, CSS ¢ JavaScript aelum Ensinoe inovagio Petrobras, UOL, Globo e mais. Os melhores treinam na Caelum + capitalize - $6 as primeiras letras das palavras em maitisculo, Se quisermos colocar 0 texto em caixa alta: menu-departanentos { text-transform: uppercase; DrcoragAo DE TExTO Existe uma série de decoracdes que o navegador adiciona aos textos, dependendo das tags que utilizamos. ‘A decoragao mais comum € 0 sublinhado nos textos de links (tags com valor para o atributo “href”, Existem outros tipos de decoracao, como por exemplo, o texto contido na tag (que serve para indicar um texto que foi removido de uma determinada versio do documento) é exibido com uma linha bem no meio do texto. E muito comum que em alguns casos seja desejavel ocultar a linha inferior nos links, embora seja recomen- dado que links dentro de textos sejam decorados para destacarem-se do restante, facilitando a usabilidade € navegabilidade. No caso dos menus, onde temos uma area especifica e isolada, normalmente estilizada e decorada o suficiente, normalmente podemos ocultar esse sublinhado, como no exemplo: item-nenu { text-decoration: none; Além do none (nenhuma decora¢ao) ainda poderiamos ter configurado under Line (com uma linha embaixo, ‘o padrao dos links), overline (com uma linha em cima do texto), 1ine-through (uma linha no meio do texto) e blink (0 texto fica piscando na tela, 0 que nao é muito recomendado). 4.5 CASCATA E HERANGA NO CSS Algumas propriedades de elementos pais, quando alteradas, sio aplicadas automaticamente para seus ele- mentos filhos em cascata, Por exemplo
    POSICIONAMENTO Ao colocar o rodapé, voce percebera que ele subira na pagina ao invés de ficar em baixo. Isso porque os elementos anteriores a ele, os paingis de destaque, estdo flutuando na pagina e, portanto, sairam do fluxo de renderizacio. Para corrigir isso, basta usar a propriedade clear: bothno footer. Dentro do rodapé em si, queremos que a lista de icones seja colocada 4 direita. Podemos acertar isso com posicionamento absoluto, desde que o container do rodapé esteja posicionado (basta dar um position:relative ale), Ja os itens dentro da lista (os 3 links), devem ser flutuados lado a lado (e nao um em cima do outro). F facil fazer com float: left no li. ESTILizaGAo © rodapé em si teri um background-inage com 0 fundo preto estampado repetido infinitamente. (Os elementos intemnos sio todos icones a serem substituidos por imagens via CSS com image replacement. E, para saber qual icone atribuir a qual link da lista de midias sociais, podemos usar seletores de atributo do C883: social afhref+="facebook.con"] { background-image: url (../ing/facebook.pag) ; Capitulo 4 - Mais HTML € CSS - Estilizagio e posicionamento de rodapé - Pagina 70 aa You have either reached a page that is unavailable for viewing or reached your viewing limit for this book. aa You have either reached a page that is unavailable for viewing or reached your viewing limit for this book. aa You have either reached a page that is unavailable for viewing or reached your viewing limit for this book. Cc | Moterial do Trcinamento Desenvolvimento Web com HTML, CSS ¢ JavaScript aelum Ensino e ovagao Acompanhe a Caelum também no Facebook e no Twitter 4.16 EXERCICIOS OPCIONAIS 1) Porte nosso rodapé para a pagina “Sobre” do capitulo anterior, 2) Nossa pagina “Sobre” foi construida sem muita preocupacdo semantica, No HTMLs, ha novas tags com objetivo especifico de lidar com conteiidos textuais divididos em partes, com subtitulos ete. Podem ser artigos de um jornal, um livro online ou mesmo um texto descrevendo nossa empresa - como nossa pigina Sobre faz. Podemos representar o texto todo com
    e suas segdes com
    . Use essas novas tags na sobre.html para termos uma marcagao mais semintica. 3) Adicione suporte ao TE8 na nossa pagina usando o HTMLsshiv. Capitulo 4 - Mais HTML © CSS - Exercicios opcionais - Pagina 74 aa You have either reached a page that is unavailable for viewing or reached your viewing limit for this book. aa You have either reached a page that is unavailable for viewing or reached your viewing limit for this book. aa You have either reached a page that is unavailable for viewing or reached your viewing limit for this book. Cc | Moterial do Trcinamento Desenvolvimento Web com HTML, CSS ¢ JavaScript aelum Ensino e inovagao Acompanhe a Caelum também no Facebook € no Twitter var pessoas = [*Joo", "José", "Maria", "“Sebastio", "Anténio"] ; for (var i = 0; i < pessoas-Jength; it) { alert (pessoas [i]); + Essa sintaxe utilizando os colchetes em pessoas[i] é uma maneira de selecionarmos um elemento de um Array, no caso o valor de 4 é um mimero para cada um dos elementos da colegio. Para explorar 0 compor- tamento do Array voce pode realizar alguns testes com essa selecao: var pessoas = [*Jofo", "José", "Maria", "Sebastiao", “Anténio"]; alert (pessoas ([0]) ; alert (pessoas(1]); alert (pessoas [4]) ; 5.4 EXxERCiCIOS OPCIONAIS: FIXAGAO DE SINTAXE Os préximos exercicios sio opcionais e mostram mais aspectos de légica de programacao com algoritmos usando JavaScript. 1) Escreva um cédigo que mostre os niimeros impares entre 1 € 10, 2) Escreva um cédigo que calcule a soma de 1 até 100, (obs: a resposta € 5050) 3) Crie um Array igual ao abaixo e mostre apenas os nomes das pessoas que tenham letras. var pessoas = ["JoSo", "José", "Maria", "“Sebastiio", "Anténio"] ; Dica: use 0 atributo Length das Strings. 5-5 INTERATIVIDADE NA WEB ‘© uso do JavaScript como a principal linguagem de programacao da Web sé épossivel por conta da integragao que o navegador oferece para o programador, a maneira com que conseguimos encontrar um elemento da pagina e alterar alguma caracteristica dele pelo cédigo JavaScript var titulo = document .querySelector.getElenentByld(*titulo"); titulo.textContent = "Agora o texto do elenesto midou!"; No exemplo anterior, nés selecionamos um elemento do documento e alteramos sua propriedade textCon- tent, Existem diversas maneiras de selecionarmos elementosde um documento e de alterarmos suas propri- edades. Inclusive ¢ possivel selecionar elementos de maneira similar ao CSS, através de seletores CSS: Capitulo 5 - JavaScript e interatividade na Web - Exercicios opcionais:fixagio de sintaxe - Pagina 78

    You might also like