vedadas. para uso comercial deste material, por favor ......10.1 jquery - a função $ 203 10.2...

EstaapostiladaCaelumvisaensinardeumamaneiraelegante,mostrandoapenasoqueénecessárioequandoénecessário,nomomentocerto,poupandoo leitordeassuntosquenãocostumamserdeseuinteresseemdeterminadasfasesdoaprendizado.

ACaelumesperaquevocêaproveiteessematerial.Todososcomentários,críticasesugestõesserãomuitobem-vindos.

Essa apostila é constantemente atualizada edisponibilizadano sitedaCaelum.Sempre consulteositeparanovasversõese,aoinvésdeanexaroPDFparaenviaraumamigo,indiqueositeparaqueelepossasemprebaixarasúltimasversões.Vocêpodeconferirocódigodeversãodaapostilalogono naldoíndice.

Baixesempreaversãomaisnovaem:www.caelum.com.br/apostilas

EssematerialéparteintegrantedotreinamentoDesenvolvimentoWebcomHTML,CSSeJavaScripte distribuído gratuitamente exclusivamente pelo site da Caelum. Todos os direitos são reservados àCaelum. A distribuição, cópia, revenda e utilização para ministrar treinamentos são absolutamentevedadas.Parausocomercialdestematerial,porfavor,consulteaCaelumpreviamente.

SOBREESTAAPOSTILA

2

6

Sumário

1Sobreocurso-ocomplexomundodofront-end1.1Ocursoeosexercícios 21.2Oprojetodee-commerce 31.3Tirandodúvidascominstrutor 31.4TirandodúvidasonlinenoGUJ 31.5Bibliografia 41.6Paraondeirdepois? 4

2IntroduçãoaHTMLeCSS2.1ExibindoinformaçõesnaWeb 62.2SintaxedoHTML 92.3EstruturadeumdocumentoHTML 92.4TagsHTML 112.5Imagens 132.6Aestruturadosarquivosdeumprojeto 132.7EditoreseIDEs 142.8Primeirapágina 152.9Exercícios:primeirospassoscomHTML 172.10EstilizandocomCSS 202.11SintaxeeinclusãodeCSS 212.12Propriedadestipográficasefontes 232.13Alinhamentoedecoraçãodetexto 242.14Imagemdefundo 252.15Bordas 252.16Exercícios:primeirospassoscomCSS 262.17CoresnaWeb 272.18ListasHTML 292.19Espaçamento,margemedimensões 302.20Exercícios:listasemargens 32

SumárioCaelum

41

61

2.21LinksHTML 332.22Exercícios:links 342.23Elementosestruturais 352.24CSS:SeletoresdeIDefilho 362.25Fluxododocumentoefloat 372.26Exercícios:seletoresCSSeflutuaçãodeelementos 382.27OfuturoepresentedaWebcomoHTML5 40

3HTMLsemânticoeposicionamentonoCSS3.1Oprocessodedesenvolvimentodeumatela 413.2OprojetoMirrorFashion 433.3AnalisandooLayout 443.4HTMLsemântico 463.5Pensandonoheader 473.6Estilizaçãocomclasses 483.7Exercícios:headersemântico 503.8CSSReset 523.9BlockvsInline 533.10Exercícios:resetedisplay 543.11Position:static,relative,absolute 553.12Exercícios:posicionamento 583.13Parasabermais:suporteHTML5noInternetExplorerantigo 583.14Exercíciosopcionais 60

4MaisHTMLeCSS4.1Analisandoomiolodapágina 614.2Formulários 614.3Posicionamentocomfloateclear 624.4DecoraçãodetextocomCSS 634.5CascataeherançanoCSS 644.6Parasabermais:ovalorinherit 654.7Exercícios:menuedestaque 664.8Displayinline-block 694.9Exercícios:painéisflutuantes 704.10SeletoresdeatributodoCSS3 734.11Rodapé 744.12SubstituiçãoporImagem 754.13Estilizaçãoeposicionamentodorodapé 754.14Exercícios:rodapé 77

CaelumSumário

80

113

127

4.15Exercíciosopcionais 79

5CSSAvançado5.1Seletoresavançados 805.2Pseudo-classes 835.3Pseudoelementos 855.4Exercícios:seletores,pseudo-classesepseudo-elementos 875.5Exercíciosopcionais 895.6CSS3:border-radius 905.7CSS3:text-shadow 915.8CSS3:box-shadow 935.9OpacidadeeRGBA 955.10Prefixos 995.11CSS3:Gradientes 985.12ProgressiveEnhancement 1005.13Exercícios:visualCSS3 1015.14CSS3Transitions 1035.15CSS3Transforms 1045.16Exercícios:CSS3transformetransition 1065.17Parasabermais:especificidadedeseletoresCSS 109

6Webparadispositivosmóveis6.1Sitemobileoumesmosite? 1136.2CSSmediatypes 1166.3CSS3mediaqueries 1176.4Viewport 1176.5Exercícios:adaptaçõesparamobile 1196.6ResponsiveWebDesign 1246.7Mobile-first 1246.8Exercíciosopcionais:versãotablet 125

7Progressiveenhancementemobile-first7.1Formuláriodecompra 1277.2Exercícios:formuláriodapáginadeproduto 1307.3Designmobile-first 1317.4Progressiveenhancement 1327.5Boxmodelebox-sizing 1337.6Exercícios:páginadeproduto 1347.7Evoluindoodesignparadesktop 138

SumárioCaelum

149

179

7.8Mediaqueriesdeconteúdo 1397.9Exercícios:responsivedesign 1407.10HTML5Inputrange 1427.11Exercícios:seletordetamanho 1437.12Tabelas 1447.13Exercícios:detalhes 1457.14Exercíciosopcionais:fundo 148

8BootstrapeformuláriosHTML58.1BootstrapeframeworksdeCSS 1498.2Estiloecomponentesbase 1508.3ApáginadecheckoutdaMirrorFashion 1508.4Exercícios:páginadecheckout 1528.5Formuláriosafundo 1558.6NovoscomponentesdoHTML5 1598.7NovosatributosHTML5emelementosdeformulário 1638.8Ícones 1658.9Exercícios:Formulários 1668.10ValidaçãoHTML5 1688.11Exercícios:validaçãocomHTML5 1708.12GridresponsivodoBootstrap 1708.13Exercícios:grids 1728.14Parasabermais:componentesJSdoBootstrap 1758.15Exercíciosopcionais:navbareJavaScript 1758.16Parasabermais:outrosframeworksCSS 177

9JavaScripteinteratividadenaWeb9.1PorqueusamosJavaScript? 1799.2UmpouquinhodahistóriadoJavaScript 1809.3Característicasdalinguagem 1819.4Consoledonavegador 1819.5Sintaxebásica 1829.6Atagscript 1849.7DOM:suapáginanomundoJavaScript 1859.8FunçõeseoseventosdoDOM 1879.9Exercícios:mostrandotamanhodoprodutocomjavascript 1889.10FunçõesAnônimas 1909.11Manipulandostrings 1919.12Manipulandonúmeros 192

CaelumSumário

203

213

218

9.13Concatenações 1929.14Exercícios:Calculandoototaldacompra 1939.15Array 1959.16BlocosdeRepetição 1969.17Funçõestemporais 1979.18Exercíciosopcionais:bannerrotativo 1989.19Parasabermais:várioscallbacksnomesmoelemento 2009.20Parasabermais:controlandoasvalidaçõesHTML5 201

10jQuery10.1jQuery-Afunção$ 20310.2jQuerySelectors 20410.3FiltroscustomizadoseporDOM 20510.4UtilitáriodeiteraçãodojQuery 20510.5Característicasdeexecução 20610.6Maisprodutosnahome 20710.7Exercícios:jQuerynahome 20810.8PluginsjQuery 21110.9Exercícios:plugin 211

11IntegraçõescomserviçosWeb11.1Web2.0eintegrações 21311.2iframes 21311.3VídeoembutidocomYouTube 21411.4Exercícios:iframe 21411.5Exercíciosopcionais:GoogleMaps 21411.6Fontescustomizadascom@font-face 21511.7Serviçosdewebfonts 21611.8Exercícios:GoogleWebFonts 216

12Apêndice-Otimizaçõesdefront-end12.1HTMLeHTTP-ComofuncionaaWorldWideWeb? 21912.2Princípiosdeprogramaçãodistribuída 22112.3Ferramentasdediagnóstico-YSlowePageSpeed 22212.4CompressãoeminificaçãodeCSSeJavaScript 22312.5Compressãodeimagens 22412.6Diminuironúmeroderequests 22612.7JuntararquivosCSSeJS 22712.8ImageSprites 228

SumárioCaelum

233

242

251

256

12.9Parasabermais 23112.10Exercícios:otimizaçõesWeb 231

13Apêndice-LESS13.1Variáveis 23313.2Contas 23413.3Hierarquia 23513.4Funçõesdecoresepalhetasautomáticas 23513.5Reaproveitamentocommixins 23613.6ExecutandooLESS 23713.7Parasabermais:recursosavançadosealternativas 23713.8Exercícios:LESS 238

14Apêndice-IntroduçãoaPHP14.1LibertandooHTMLdesuaslimitações 24214.2ComofuncionaumservidorHTTP 24314.3ComofuncionaoPHPnoservidor 24314.4Parasabermais:instalaçãodoPHPemcasa 24414.5Exercícios:executandooPHP 24514.6Reaproveitamentodecódigocominclude 24614.7Exercícios:include 24714.8Parasabermais:aindamaisflexibilidadecomvariáveis 24914.9Exercíciosopcionais:variáveisemPHP 249

15Apêndice-PHP:parâmetrosepáginasdinâmicas15.1Submissãodoformulário 25115.2ParâmetroscomPHP 25215.3ListasdedefiniçãonoHTML 25315.4Exercícios:checkoutdacompra 253

16Apêndice-PHP:BancodedadoseSQL16.1MySQLephpMyAdmin 25716.2Parasabermais:instalaçãodoMySQLemcasa 25816.3BuscasnoMySQLcomPHP 25816.4RefinandoasbuscascomWHERE 25916.5Exercícios:phpMyAdmin 26016.6Exercícios:PHPcomMySQL 26116.7Buscademuitosresultados 26216.8Ordenaçãodosresultados 26316.9Exercícios:maisbuscascomPHP 263

CaelumSumário

266

272

16.10Exercíciosopcionais 265

17Apêndice-Subindosuaaplicaçãonocloud17.1Comoescolherumprovedor 26617.2OJelasticCloudLocaweb 26717.3Criandoaconta 26717.4ImportandodadosnoMySQL 26817.5Preparandooprojeto 26917.6Enviandooprojetoeinicializandoservidor 270

18Apêndice-MaisintegraçõescomserviçosWeb18.1BotãodecurtirdoFacebook 27218.2Exercícios:Facebook 27318.3Parasabermais:Twitter 27418.4Parasabermais:Google+ 27418.5Exercíciosopcionais:TwittereGoogle+ 275

Versão:22.0.26

SumárioCaelum

CAPÍTULO1

"Açãoéachavefundamentalparatodosucesso"--PabloPicasso

Vivemoshojenumaeraemquea Internetocupaumespaçocadavezmais importanteemnossasvidas pessoais e profissionais. O surgimento constante de Aplicações Web, para as mais diversasfinalidades,éumsinalclarodequeessemercadoestáemfrancaexpansãoetrazmuitasoportunidades.Aplicaçõescorporativas,comércioeletrônico,redessociais,filmes,músicas,notíciasetantasoutrasáreasestão presentes na Internet, fazendo do navegador (o browser) o software mais utilizado de nossoscomputadores.

Essecursopretendeabordarodesenvolvimentodefront-end(interfaces)paraAplicaçõesWebeSitesque acessamos por meio do navegador de nossos computadores, utilizando padrões atuais dedesenvolvimento e conhecendoa fundo suas características técnicas.Discutiremos as implementaçõesdessas tecnologiasnosdiferentesnavegadores,aadoçãode frameworksque facilitameaceleramnossotrabalho, alémde dicas técnicas que destacamumprofissional nomercado.HTML,CSS e JavaScriptserãovistosemprofundidade.

Alémdoacessopormeiodonavegadordenossoscomputadores,hojeoacessoàInternetapartirdedispositivosmóveis representaumgrande avançodaplataforma,mas também implica emumpoucomais de atenção ao trabalho que umprogramador front-end tem que realizar.No decorrer do curso,vamos conhecer algumas dessas necessidades e como utilizar os recursos disponíveis para atendertambémaessanovanecessidade.

Esse é um curso prático que começa nos fundamentos de HTML e CSS, incluindo tópicosrelacionadosàsnovidadesdasversõesHTML5eCSS3.Depois,éabordadaalinguagemdeprogramaçãoJavaScript,paraenriquecernossaspáginascominteraçõeseefeitos, tantocomJavaScriptpuroquantocomabibliotecajQuery,hojepadrãodemercado.

Duranteocurso,serãodesenvolvidaspáginasdeumSitedecomércioeletrônico.OsexercíciosforamprojetadosparaapresentargradualmenteaoalunoquaissãoastécnicasmaisrecomendadaseutilizadasquandoassumimosopapeldoProgramadorfront-end,quaissãoosdesafiosmaiscomunsequaissãoas

SOBREOCURSO-OCOMPLEXOMUNDODOFRONT-END

1.1OCURSOEOSEXERCÍCIOS

.

técnicasepadrõesrecomendadosparaatingirmosnossoobjetivo,transformandoimagensestáticas(oslayouts)emcódigoqueosnavegadoresentendemeexibemcomopáginasdaWeb.

Osexercíciospropostossãofundamentaisparaoacompanhamentodocurso,desdeosmaisiniciais,já que são incrementados no decorrer das aulas. Igualmente importante é a participação ativa nasdiscussõesedebatesemsaladeaula.

Conheça a Casa do Código, uma nova editora, com autores de destaque nomercado, foco em ebooks (PDF, epub, mobi), preços imbatíveis e assuntosatuais.Com a curadoria daCaelum e excelentes autores, é uma abordagemdiferenteparalivrosdetecnologianoBrasil.

CasadoCódigo,LivrosdeTecnologia.

Duranteocurso,vamosproduzirumsiteparaume-commercedemodachamadoMirrorFashion.ConstruiremosváriaspáginasdalojacomintuitodeaprenderosconceitosdeHTML,CSSeJS.

Osconteúdoseodesigndalojajáforampré-definidos.Vamos,aqui,focarnaimplementação,papeldoprogramadorfront-end.

Durante o curso, tire todas as suas dúvidas com o instrutor.HTML, CSS e JavaScript, apesar deparecerem simples e básicos, têm muitas características complexas que não podem deixar de sertotalmentecompreendidaspeloaluno.Osinstrutorestambémestãodisponíveisparatirarasdúvidasdoalunoapósotérminodotreinamento,bastaentraremcontatodiretocomoinstrutoroucomaCaelum,teremosoprazeremajudá-lo.

Se você está acompanhando essa apostila em casa, pense também em fazer o curso presencial naCaelum.Você terácontatodiretocomo instrutorparaesclarecersuasdúvidas,aprendermais tópicosalémdaapostila,etrocarexperiências.

Seuslivrosdetecnologiaparecemdoséculopassado?

1.2OPROJETODEE-COMMERCE

1.3TIRANDODÚVIDASCOMINSTRUTOR

1.4TIRANDODÚVIDASONLINENOGUJ

.

https://www.casadocodigo.com.br

Recomendamosfortementeabuscaderecursoseaparticipaçãoativanacomunidadepormeiodaslistasdediscussãorelacionadasaoconteúdodocurso.

OGUJ.com.br é um site de perguntas e respostas para desenvolvedores de software que abrangediversasáreas,sendoquefront-endéumdosprincipaisfocos.AcomunidadedoGUJtemmaisde150milusuáriose1milhãoemeiodemensagens.Éo lugar idealpravocê tirar suasdúvidaseencontraroutrosdesenvolvedores.

http://www.guj.com.br

Se você está gostando dessa apostila, certamente vai aproveitar os cursosonlinequelançamosnaplataformaAlura.VocêestudaaqualquermomentocomaqualidadeCaelum.Programação,Mobile,Design, Infra,Front-Ende

Business!Ex-alunodaCaelumtem15%dedesconto,sigaolink!

ConheçaaAluraCursosOnline.

AlémdoconhecimentodisponívelnaInternetpelacomunidade,existemmuitoslivrosinteressantessobreoassunto.Algumasreferências:

HTML5eCSS3:Domineawebdofuturo-LucasMazza,editoraCasadoCódigo;AWebMobile:DesignResponsivoealémparaumaWebadaptadaaomundomobile -SérgioLopes,editoraCasadoCódigo;AArteEACiênciaDoCSS-Adams&Cols;ProJavaScriptTechniques-JohnResig;TheSmashingBook-smashingmagazine.com

Este curso é parte daFormaçãoFront-end da Caelum que engloba também o treinamentoWebAppscomJavaScriptModerno,DOMejQuery.Vocêpodeobtermaisinformaçõesaqui:

https://www.caelum.com.br/formacao-frontend

Se o seu desejo é entrar mais a fundo no desenvolvimento Web, incluindo a parte server-side,

Agoraéamelhorhoraderespirarmaistecnologia!

1.5BIBLIOGRAFIA

1.6PARAONDEIRDEPOIS?

.

http://www.guj.com.brhttps://www.alura.com.br/promocao/aluno-caelumhttps://www.caelum.com.br/formacao-frontend

oferecemosocursoDesenvolvimentoWebcomPHPeMySQL,aFormaçãoJavaeaFormação.NETqueabordamtrêscaminhospossíveisparaessemundo.

Maisinformaçõesem:

https://www.caelum.com.br/curso-php-mysqlhttps://www.caelum.com.br/formacao-javahttps://www.caelum.com.br/formacao-dotnet

.

https://www.caelum.com.br/curso-php-mysqlhttps://www.caelum.com.br/formacao-javahttps://www.caelum.com.br/formacao-dotnet

CAPÍTULO2

"Quantomais nos elevamos,menores parecemos aos olhos daqueles que não sabem voar." -- FriedrichWilhelmNietzsche

Aúnica linguagemqueonavegadorconsegue interpretarparaaexibiçãodeconteúdoéoHTML.Para iniciar a exploração do HTML, vamos imaginar o seguinte caso: o navegador realizou umarequisiçãoerecebeucomocorpodarespostaoseguinteconteúdo:

MirrorFashion.

Bem-vindoàMirrorFashion,sualojaderoupaseacessórios.

Confiranossaspromoções.Recebainformaçõessobrenossoslançamentosporemail.Navegueportodosnossosprodutosemcatálogo.Compresemsairdecasa.

Para conhecer o comportamento dos navegadores quanto ao conteúdo descrito antes, vamosreproduziresseconteúdoemumarquivodetextocomum,quepodesercriadocomqualquereditordetextopuro.Salveoarquivocomoindex.htmleabra-oapartirdonavegadoràsuaescolha.

INTRODUÇÃOAHTMLECSS

2.1EXIBINDOINFORMAÇÕESNAWEB

.

Parece que obtemos um resultado umpouco diferente do esperado, não?Apesar de ser capaz deexibirtextopuroemsuaáreaprincipal,algumasregrasdevemserseguidascasodesejemosqueessetextosejaexibidocomalgumaformatação,parafacilitaraleiturapelousuáriofinal.

Usandooresultadoacimapodemosconcluirqueonavegadorporpadrão:

Podenãoexibircaracteresacentuadoscorretamente;Nãoexibequebrasdelinha.

Paraquepossamosexibirasinformaçõesdesejadascomaformatação,énecessárioquecadatrechodetextotenhaumamarcação indicandoqualéosignificadodele.Essamarcaçãotambéminfluenciaamaneira com que cada trecho do texto será exibido. A seguir é listado o texto com uma marcaçãocorreta:

MirrorFashionMirrorFashion.Bem-vindoàMirrorFashion,sualojaderoupaseacessórios.Confiranossaspromoções.Recebainformaçõessobrenossoslançamentosporemail.

.

Navegueportodosnossosprodutosemcatálogo.Compresemsairdecasa.

Reproduzaocódigoanterioremumnovoarquivodetextopuroesalve-ocomoindex-2.html.Nãosepreocupecomasintaxe,vamosconhecerdetalhadamentecadacaracterísticadoHTMLnospróximoscapítulos.Abraoarquivononavegador.

Agora, o resultado é exibido de maneira muito mais agradável e legível. Para isso, tivemos queutilizaralgumasmarcaçõesdoHTML.Essasmarcações sãochamadasde tags, e elasbasicamentedãosignificadoaotextocontidoentresuaaberturaefechamento.

Apesardeestaremcorretamentemarcadas,asinformaçõesnãoapresentamnenhumatrativoestéticoe,nessadeficiênciadoHTML,resideoprimeiroemaiordesafiodoprogramadorfront-end.

OHTMLfoidesenvolvidoparaexibiçãodedocumentoscientíficos.Paratermosumacomparação,écomoseaWebfossedesenvolvidaparaexibirmonografiasredigidaseformatadaspelaMetodologiadoTrabalhoCientíficodaABNT.Porém,comotempoeaevoluçãodaWebedeseupotencialcomercial,tornou-senecessáriaaexibiçãodeinformaçõescomgranderiquezadeelementosgráficosedeinteração.

.

NaAlura Língua você reforça e aprimora seuinglês! Usando a técnica Spaced Repetitions oaprendizado naturalmente se adapta ao seuconhecimento. Exercícios e vídeos interativosfazem com que você pratique em situações

cotidianas. Além disso, todas as aulas possuem explicações gramaticais, para você entendercompletamente o que está aprendendo. Aprender inglês é fundamental para o profissional detecnologiadesucesso!

PratiqueseuinglêsnaAluraLíngua.

O HTML é um conjunto de tags responsáveis pela marcação do conteúdo de uma página nonavegador.Nocódigoquevimosantes,astagssãooselementosamaisqueescrevemosusandoasintaxe. Diversas tags são disponibilizadas pela linguagem HTML e cada uma possui umafuncionalidadeespecífica.

No códigode antes, vimos por exemplo o uso da tag. Ela representao títuloprincipal dapágina.

MirrorFashion

Noteasintaxe.Umatagédefinidacomcaracteres<e>,eseunome(h1nocaso).Muitas tagspossuem conteúdo, como o texto do título ("Mirror Fashion"). Nesse caso, para determinar onde oconteúdoacaba,usamosumatagdefechamentocomabarraantesdonome:.

Algumastagspodemreceberatributosdentrodesuadefinição.Sãoparâmetrosusandoasintaxedenome=valor. Para definir uma imagem, por exemplo, usamos a tag e, para indicar qualimagemcarregar,usamosoatributosrc:

Reparequeatagimgnãopossuiconteúdoporsisó.Nessescasos,nãoénecessáriousarumatagdefechamentocomoantesnoh1.

SaberinglêsémuitoimportanteemTI

2.2SINTAXEDOHTML

2.3ESTRUTURADEUMDOCUMENTOHTML

.

https://www.aluralingua.com.br/?utm_source=alumni&utm_medium=apostila&utm_campaign=aluno-caelum

Um documento HTML válido precisa seguir obrigatoriamente a estrutura composta pelas tags,eeainstrução.Vejamoscadaumadelas:

Naestruturadonossodocumento,antesdetudo,inserimosumatag.Dentrodessatag,énecessáriodeclarar outrasduas tags: e. Essasduas tags são "irmãs", pois estãonomesmonívelhierárquicoemrelaçãoàsuatag"pai",queé.

A tag contém informações sobre nosso documento que são de interesse somente donavegador, e não dos visitantes do nosso site. São informações que não serão exibidas na área dodocumentononavegador.

A especificação obriga a presença da tag de conteúdo dentro do nosso ,permitindoespecificarotítulodonossodocumento,quenormalmenteseráexibidonabarradetítulodajaneladonavegadorounaabadodocumento.

Outraconfiguraçãomuitoutilizada,principalmenteemdocumentoscujoconteúdoéescritoemumidiomacomooportuguês,quetemcaracterescomoacentosecedilha,éaconfiguraçãodacodificaçãodecaracteres,chamadodeencodingoucharset.

Podemos configurar qual codificação queremos utilizar em nosso documento por meio daconfiguraçãodecharsetnatag.UmdosvaloresmaiscomunsusadoshojeemdiaéoUTF-8,tambémchamadodeUnicode.Háoutraspossibilidades,comoolatin1,muitousadoantigamente.

O UTF-8 é a recomendação atual para encoding na Web por ser amplamente suportada emnavegadoreseeditoresdecódigo,alémdesercompatívelcompraticamentetodososidiomasdomundo.Éoqueusaremosnocurso.

MirrorFashion

Atagcontémocorpodonossodocumento,queéexibidopelonavegadoremsuajanela.É

Atag

Atag

Atag

.

necessárioqueotenhaaomenosumelemento"filho",ouseja,umaoumaistagsHTMLdentrodele.

MirrorFashionAMirrorFashion

Nesseexemplo,usamosatag,queindicaumtítulo.

ODOCTYPEnãoéumatagHTML,masumainstruçãoespecial.Ela indicaparaonavegadorqualversãodoHTML deve ser utilizada para renderizar a página.Utilizaremos, queindicaparaonavegadorautilizaçãodaversãomaisrecentedoHTML-aversão5,atualmente.

HámuitoscomandoscomplicadosnessapartedeDOCTYPEqueeramusadosemversõesanterioresdoHTMLedoXHTML.Hojeemdia,nadadissoémaisimportante.OrecomendadoésempreusaraúltimaversãodoHTML,usandoadeclaraçãodeDOCTYPEsimples:

OHTMLécompostodediversastags,cadaumacomsuafunçãoesignificado.OHTML5,então,adicionoumuitasnovastags,queveremosaolongodocurso.

Nessemomento,vamosfocaremtagsquerepresentamtítulos,parágrafoeênfase.

Quandoqueremosindicarqueumtextoéumtítuloemnossapágina,utilizamosastagsdeheadingemsuamarcação:

MirrorFashion.Bem-vindoàMirrorFashion,sualojaderoupaseacessórios.

Astagsdeheadingsãotagsdeconteúdoevãodea,seguindoaordemdeimportância,sendootítuloprincipal,omaisimportante,eotítulodemenorimportância.

Utilizamos,porexemplo,atagparaonome,títuloprincipaldapágina,eatagcomosubtítulooucomotítulodeseçõesdentrododocumento.

Aordemdeimportância,alémdeinfluenciarnotamanhopadrãodeexibiçãodotexto,temimpacto

AinstruçãoDOCTYPE

2.4TAGSHTML

Títulos

.

nasferramentasqueprocessamHTML.Asferramentasdeindexaçãodeconteúdoparabuscas,comooGoogle,BingouYahoo!levamemconsideraçãoessaordemerelevância.Osnavegadoresespeciaisparaacessibilidade também interpretam o conteúdo dessas tags de maneira a diferenciar seu conteúdo efacilitaranavegaçãodousuáriopelodocumento.

Quandoexibimosqualquertextoemnossapágina,érecomendadoqueelesejasempreconteúdodealgumatagfilhadatag.Amarcaçãomaisindicadaparatextoscomunséatagdeparágrafo:

Nenhumitemnasacoladecompras.

Sevocêtiverváriosparágrafosdetexto,useváriasdessastags

parasepará-los:

Umparágrafodetexto.

Outroparágrafodetexto.

Quandoqueremosdarumaênfasediferenteaumtrechodetexto,podemosutilizarasmarcaçõesdeênfase.Podemosdeixarumtexto"maisforte"comatagoudeixarotextocomuma"ênfaseacentuada"comatag.Tambémháatag,quediminuiotamanhodotexto.

Por padrão, os navegadores renderizarão o texto dentro da tag em negrito e o textodentrodatagemitálico.Existemaindaastagse, que atingemomesmo resultadovisualmente, mas as tags e são mais indicadas por definirem nossa intenção designificadoaoconteúdo,maisdoqueumasimplesindicaçãovisual.Vamosdiscutirmelhoraquestãodosignificadodastagsmaisadiante.

CompresuasroupaseacessóriosnaMirrorFashion.

Parágrafos

Marcaçõesdeênfase

.

Você conhece alguém que tem potencial paratecnologia e programação, mas que nuncaescreveuumalinhadecódigo?Podeserumfilho,sobrinho, amigo ou parente distante. NaAlura

Start ela vai poder criar games, apps, sites e muito mais! É o começo da jornada comprogramaçãoeaportadeentradaparaumapossívelcarreiradesucesso.Elavaiestudaremseupróprioritmoecomamelhordidática.AqualidadedaconceituadaAlura,agoraparaStarters.

ConheçaoscursosonlinedaAluraStart!

AtagdefineumaimagememumapáginaHTMLenecessitadedoisatributospreenchidos:srcealt.Oprimeiroéumatributoobrigatórioeapontaparaolocaldaimagemeosegundo,umtextoalternativoparaaimagemcasoessanãopossasercarregadaouvisualizada.Oatributoaltnãoéobrigatório,maséimportanteserpreenchidoparaqueleitoresdetelaerobôsdebuscacomooGoogleconsigamleroconteúdodaimagem.

OHTML5introduziuduasnovastagsespecíficasparaimagem:e.Atag define uma imagem com a conhecida tag . Além disso, permite adicionar umalegendaparaaimagempormeiodatag.

FuzzCardiganporR$129,90

Comotodotipodeprojetodesoftware,existemalgumasrecomendaçõesquantoàorganizaçãodosarquivosdeumsite.Nãohánenhumrigor técnicoquantoaessaorganizaçãoe,namaioriadasvezes,vocêvaiadaptarasrecomendaçõesdamaneiraqueformelhorparaoseuprojeto.

Como um site é um conjunto de páginasWeb sobre um assunto, empresa, produto ou qualqueroutracoisa,écomumtodososarquivosdeumsiteestaremdentrodeumasópastae,assimcomoumlivro,érecomendadoqueexistauma"capa",umapáginainicialquepossaindicarparaovisitantequaissãoasoutraspáginasquefazempartedesseprojetoecomoelepodeacessá-las,comosefosseoíndicedo

AprendasedivertindonaAluraStart!

2.5IMAGENS

2.6AESTRUTURADOSARQUIVOSDEUMPROJETO

.

https://www.alurastart.com.br/?utm_source=alumni&utm_medium=apostila&utm_campaign=aluno-caelum

site.

Esse índice, não por coincidência, é convenção adotada pelos servidores de páginas Web. Sedesejamosqueumadeterminadapastasejaservidacomoumsiteedentrodessapastaexisteumarquivochamado index.html, esse arquivo será a página inicial amenos que alguma configuração determineoutrapáginaparaessefim.

Dentrodapastadosite,nomesmonívelqueoindex.html,érecomendadoquesejamcriadasmaisalgumaspastasparamanterseparadososarquivosdeimagens,asfolhasdeestiloCSSeosscripts.Parainiciarumprojeto,teríamosumaestruturadepastascomoademonstradanaimagemaseguir:

Muitas vezes, um site é servido pormeio de uma aplicaçãoWeb e, nesses casos, a estrutura dosarquivosdependedecomoaaplicaçãonecessitadosrecursosparafuncionarcorretamente.Porém,nogeral,asaplicaçõestambémseguemumpadrãobemparecidocomoqueestamosadotandoparaonossoprojeto.

Existem editores de texto comoGedit (www.gnome.org), Sublime (http://www.sublimetext.com/),Atom (http://atom.io/) eNotepad++ (http://notepad-plus-plus.org), que possuem realce de sintaxe eoutras ferramentas para facilitar o desenvolvimento de páginas. Há também IDEs (IntegratedDevelopment Environment), que oferecem recursos como autocompletar e pré-visualização, comoEclipseeVisualStudio.

2.7EDITORESEIDES

.

http://www.sublimetext.com/http://atom.io/http://notepad-plus-plus.org



A primeira página que desenvolveremos para aMirrorFashion será a Sobre, que explica detalhessobreaempresa,apresentafotoseahistória.

Recebemos o design já pronto, assim como os textos. Nosso trabalho, como desenvolvedores defront-end,écodificaroHTMLeCSSnecessáriosparaesseresultado.


2.8PRIMEIRAPÁGINA

.


1. Aolongodocurso,usaremosdiversasimagensqueonossodesignerpreparou.Nesseponto,vamosimportar todas as imagens dentro do projeto que criamos antes para que possamos usá-las naspáginas.

Copie a pastamirror-fashion de dentro da pasta Caelum/43 para a área de trabalho de suamáquina.

Verifique apasta img, agora cheia de arquivos dodesigndo site.Alémdesta pasta, teremos aspastasjsecss,queaindanãousaremos.

EMCASA

Você pode baixar um ZIP com todos os arquivos necessários para o curso aqui:https://s3.amazonaws.com/caelum.com.br/caelum-arquivos-curso-web.zip

2. Dentrodapastamirror-fashion,vamoscriaroarquivosobre.htmlcomaestruturabásicacontendooDOCTYPEeastagshtml,headebody:

SobreaMirrorFashion

3. Apáginadeveterumaimagemcomologodaempresa,umtítuloeumtextofalandosobreela.

Otextoparasercolocadonapáginaestánoarquivosobre.txtdisponívelnapastaCaelum/43/textos.SãováriosparágrafosquedevemseradaptadoscomoHTMLapropriado.

Apóscopiarotextodoarquivosobre.txtcoloquecadaumdosparágrafosdentrodeumatag

.ColoquetambémotítuloHistóriadentrodeumatag.

Useatagparaologoeatagparaotítulo.SeuHTMLdeveficarassim,nofinal:

AMirrorFashion

AMirrorFashionéamaiorempresadecomércioeletrôniconosegmentodemodaemtodoomundo.Fundadaem1932,possuifiliaisem124países........

2.9EXERCÍCIOS:PRIMEIROSPASSOSCOMHTML

.

https://s3.amazonaws.com/caelum.com.br/caelum-arquivos-curso-web.zip

4. Umtextocorridosemênfasesédifícildeler.Usenegritoseitálicosparadestacarpartesimportantes.

Usea tag para a ênfasemais forte emnegrito, por exemploparadestacar onomedaempresanotextodoprimeiroparágrafo:

AMirrorFashionéamaiorempresacomércioeletrônico.......

Usetambémaênfasecomquedeixaráo textoem itálico.NapartedaHistória,coloqueosnomesdaspessoasedafamíliaem.

5. Apáginadeveterduasimagens.AprimeiraapresentaocentrodaMirrorFashionedeveserinseridaapósosegundoparágrafodotexto.Aoutra,éumaimagemdaFamíliaPelhoedevesercolocadaapósosubtítulodaHistória.

As imagens podem ser carregadas com a tag , apontando seu caminho. Além disso, noHTML5,podemosusarastagseparadestacaraimagemecolocarumalegendaemcadauma.

Aimagemdocentrodedistribuiçãoestáemimg/centro-distribuicao.png:

CentrodedistribuiçãodaMirrorFashion

Aimagemdafamíliaéaimg/familia-pelho.jpgedevesercolocadanapartedeHistória:

FamíliaPelho

6. Confiraseoseucódigofinalestácomoaseguir:

SobreaMirrorFashion

AMirrorFashion

AMirrorFashionéamaiorempresacomércioeletrôniconosegmentodemodaemtodoomundo.Fundadaem1932,possuifiliaisem124países,sendolíderdemercadocommaisde90%departicipaçãoem118deles.

NossocentrodedistribuiçãoficaemJacarezinho,noParaná.Delá,saem48aviõesquedistribuemnossosprodutosàscasasdomundotodo.Nossocentrodedistribuição:

.

CentrodedistribuiçãodaMirrorFashion

CompresuasroupaseacessóriosnaMirrorFashion.Acessenossalojaouentreemcontatosetiverdúvidas.Conheçatambémnossahistóriaenossosdiferenciais.

História

FamíliaPelho

Afundaçãoem1932ocorreunomomentodadescobertaeconômicadointeriordoParaná.AfamíliaPelho,tradicionaldaregião,investiutodasassuaseconomiasnessanovainiciativa,revolucionáriaparaaépoca.OfundadorEduardoSimõesPelho,dotadodeparticularvisãoadministrativa,guiouosnegóciosdaempresadurantemaisde50anos,muitosdelesaoladodeseufilhoE.S.PelhoFilho,atualCEO.Onomedaempresaéinspiradononomedafamília.

Ocrescimentodaempresafoipraticamenteinstantâneo.Nosprimeiros5anos,jáatendia18países.Bateuamarcade100paísesemapenas15anosdeexistência.Atéhoje,jáatendeu740milhõesdeusuáriosdiferentes,embilhõesdediferentespedidos.

Ocrescimentoemnúmerodefuncionáriosétambémassombroso.Hoje,éamaiorempregadoradoBrasil,masmesmoapósapenas5anosdesuaexistência,jápossuía30milfuncionários.ForadoBrasil,há240milfuncionários,alémdos890milbrasileirosnasinstalaçõesdeJacarezinhoenosescritóriosemtodopaís.

DadaaimportânciaeconômicadaempresaparaoBrasil,afamíliaPelhojárecebeudiversosprêmios,homenagensecondecorações.TodosospresidentesdoBrasiljávisitaramasinstalaçõesdaMirrorFashion,alémdepresidentesdaUniãoEuropéia,Ásiaeosecretário-geraldaONU.

7. Verifiqueoresultadononavegador.Devemosjáveroconteúdoeasimagensnasequência,massemumdesignmuitointeressante.

.

BOAPRÁTICA-INDENTAÇÃO

Umapráticasemprerecomendada,ligadaàlimpezaeutilizadaparafacilitaraleituradocódigo,éousocorretoderecuos,ouindentação,noHTML.Costumamosalinharelementos"irmãos"namesmamargemeadicionaralgunsespaçosouumtabparaelementos"filhos".

Amaioriadosexercíciosdessaapostilautilizaumpadrãorecomendadoderecuos.

BOAPRÁTICA-COMENTÁRIOS

Quandoiniciamosnossoprojeto,utilizamospoucastagsHTML.Maistardeadicionaremosumaquantidaderazoáveldeelementos,oquepodegerarumacertaconfusão.Paramanterocódigomaislegível, é recomendada a adição de comentários antes da abertura e após o fechamento de tagsestruturais(queconterãooutrastags).Dessamaneira,nóspodemosidentificarclaramentequandoumelementoestádentrodessaestruturaoudepoisdela.

Esseparágrafoestá"dentro"daáreaprincipal.

Esseparágrafoestá"depois"daáreaprincipal.

QuandoescrevemosoHTML,marcamosoconteúdodapáginacomtagsquemelhorrepresentamosignificado daquele conteúdo.Aí quando abrimos a página no navegador é possível perceber que elemostraasinformaçõescomestilosdiferentes.

Umh1,porexemplo,ficaemnegritonumafontemaior.Parágrafosdetextosãoespaçadosentresi,eassimpordiante.Issoquerdizerqueonavegadortemumestilopadrãoparaastagsqueusamos.Mas,claro,prafazersitesbonitõesvamosquerercustomizarodesigndoselementosdapágina.

Antigamente,issoerafeitonopróprioHTML.Sequisesseumtítuloemvermelho,erasófazer:

MirrorFashionanos90

Alémdatag, váriasoutras tagsdeestiloexistiam.Mas issoépassado.TagsHTMLparaestilosãomápráticahojeemdiaejamaisdevemserusadas.

Emseulugar,surgiuoCSS,queéumaoutralinguagem,separadadoHTML,comobjetivoúnicode

2.10ESTILIZANDOCOMCSS

.

cuidar da estilização da página. A vantagem é que o CSS é bem mais robusto que o HTML paraestilização,comoveremos.Mas,principalmente,escreverformataçãovisualmisturadocomconteúdodetextonoHTML semostrou algobem impraticável.OCSS resolve isso separandoas coisas; regrasdeestilonãoaparecemmaisnoHTML,apenasnoCSS.




AsintaxedoCSStemestruturasimples:éumadeclaraçãodepropriedadesevaloresseparadosporumsinaldedoispontos":",ecadapropriedadeéseparadaporumsinaldepontoevírgula";"daseguintemaneira:

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

O elemento que receber essas propriedades será exibido com o texto na cor azul e com o fundoamarelo.Essaspropriedadespodemserdeclaradasdetrêsmaneirasdiferentes.

Aprimeiradelasécomoatributostylenopróprioelemento:

Oconteúdodestatagseráexibidoemazulcomfundoamarelononavegador!

MastínhamosacabadodediscutirqueumadasgrandesvantagensdoCSSeramanterasregrasdeestiloforadoHTML.Usandoesseatributostylenãoparecequefizemosisso.Justamenteporissonãoserecomendaessetipodeusonaprática,massimosqueveremosaseguir.

AoutramaneiradeseutilizaroCSSédeclarandosuaspropriedadesdentrodeumatag.


2.11SINTAXEEINCLUSÃODECSS

Atributostyle

Atagstyle

.

https://www.alura.com.br/promocao/aluno-caelum

Como estamos declarando as propriedades visuais de um elemento em outro lugar do nossodocumento, precisamos indicar de alguma maneira a qual elemento nos referimos. Fazemos issoutilizandoumseletorCSS.Ébasicamenteumaformadebuscarcertoselementosdentrodapáginaquereceberãoasregrasvisuaisquequeremos.

Noexemploaseguir,usaremososeletorquepegatodasastagspealterasuacorebackground:

SobreaMirrorFashionp{color:blue;background-color:yellow;}

Oconteúdodestatagseráexibidoemazulcomfundoamarelo!

Tambémseráexibidoemazulcomfundoamarelo!

O código dentro da tag indica que estamos alterando a cor e o fundo de todos oselementoscomtagp.Dizemosqueselecionamosesseselementospelonomedesua tag,eaplicamoscertaspropriedadesCSSapenasneles.

A terceira maneira de declararmos os estilos do nosso documento é com um arquivo externo,geralmentecomaextensão.css.Paraque sejapossíveldeclararnossoCSSemumarquivoàparte,precisamosindicaremnossodocumentoHTMLumaligaçãoentreeleeafolhadeestilo(arquivocomaextensão.css).

Alémdamelhororganizaçãodoprojeto,afolhadeestiloexternatrazaindaasvantagensdemanternosso HTML mais limpo e do reaproveitamento de uma mesma folha de estilos para diversosdocumentos.

Aindicaçãodeusodeumafolhadeestilosexternadeveserfeitadentrodatag donossodocumentoHTML:

SobreaMirrorFashion

Arquivoexterno

.

Oconteúdodestatagseráexibidoemazulcomfundoamarelo!

Tambémseráexibidoemazulcomfundoamarelo!

Edentrodoarquivoestilos.csscolocamosapenasoconteúdodoCSS:

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

Damesmamaneiraquealteramoscores,podemosalterarotexto.Podemosdefinirfontescomousodapropriedadefont-family.

A propriedade font-family pode receber seu valor com ou sem aspas. No primeiro caso,passaremosonomedoarquivodefonteaserutilizado,noúltimo,passaremosafamíliadafonte.

Porpadrão,osnavegadoresmaisconhecidosexibemtextoemumtipoqueconhecemoscomo"serif".Asfontesmaisconhecidas(ecomumenteutilizadascomopadrão)são"Times"e"TimesNewRoman",dependendodosistemaoperacional.Elassãochamadasdefontesserifadaspelospequenosornamentosemsuasterminações.

Podemosalterarafamíliadefontesquequeremosutilizaremnossodocumentoparaafamília"sans-serif"(semserifas),quecontém,porexemplo,asfontes"Arial"e"Helvetica".Podemostambémdeclararquequeremosutilizarumafamíliadefontes"monospace"como,porexemplo,afonte"Courier".

h1{font-family:serif;}

h2{font-family:sans-serif;}

p{font-family:monospace;}

Épossível,emuitocomum,declararmosonomedealgumasfontesquegostaríamosdeverificarseexistemnocomputador,permitindoquetenhamosumcontrolemelhordaformacomonossotextoseráexibido. Normalmente, declaramos as fontes mais comuns, e existe um grupo de fontes que sãoconsideradas"seguras"porserembempopulares.

2.12PROPRIEDADESTIPOGRÁFICASEFONTES

.

Emnossoprojeto,vemosqueasfontesnãotêmornamentos.Entãovamosdeclararessapropriedadeparatodoodocumentopormeiodoseuelementobody:

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

Nessecaso,onavegadorverificarásea fonte"Arial"estádisponíveleautilizarápararenderizarostextos de todos os elementos do nosso documento que, por cascata, herdarão essa propriedade doelementobody.

Casoafonte"Arial"nãoestejadisponível,onavegadorverificaráadisponibilidadedapróximafontedeclarada, no nosso exemplo a "Helvetica". Caso o navegador não encontre também essa fonte, elesolicitaqualquerfontequepertençaàfamília"sans-serif",declaradalogoaseguir,eautilizaparaexibirotexto,nãoimportaqualsejaela.

Temosoutraspropriedadesparamanipularafonte,comoapropriedadefont-style,quedefineoestilodafontequepodeser:normal(normalnavertical),italic(inclinada)eoblique(oblíqua).

Já vimos uma série de propriedades e subpropriedades que determinam o tipo e estilo da fonte.Vamosconheceralgumasmaneirasdealterarmosasdisposiçõesdostextos.

Umadaspropriedadesmaissimples,porémmuitoutilizada,éaquedizrespeitoaoalinhamentodetexto:apropriedadetext-align.

p{text-align:right;}

O exemplo anterior determina que todos os parágrafos da nossa página tenhamo texto alinhadoparaadireita.Tambémépossíveldeterminarqueumelementotenhaseuconteúdoalinhadoaocentroaodefinirmoso valorcenter para a propriedadetext-align, ou entãodefinir queo textodeveocupartodaalarguradoelementoaumentandooespaçamentoentreaspalavrascomovalorjustify.Opadrãoéqueotextosejaalinhadoàesquerda,comovalorleft,poréméimportantelembrarqueessapropriedadepropaga-seemcascata.

ÉpossívelconfigurartambémumasériedeespaçamentosdetextocomoCSS:

p{line-height:3px;/*tamanhodaalturadecadalinha*/letter-spacing:3px;/*tamanhodoespaçoentrecadaletra*/word-spacing:5px;/*tamanhodoespaçoentrecadapalavra*/text-indent:30px;/*tamanhodamargemdaprimeiralinhadotexto*/}

2.13ALINHAMENTOEDECORAÇÃODETEXTO

.

Editorastradicionaispoucoligamparaebooksenovastecnologias.Nãodominamtecnicamente o assunto para revisar os livros a fundo. Não têm anos deexperiênciaemdidáticascomcursos.ConheçaaCasadoCódigo,umaeditoradiferente,comcuradoriadaCaelum eobsessãoporlivrosdequalidadeapreçosjustos.

CasadoCódigo,ebookcompreçodeebook.

A propriedade background-image permite indicar um arquivo de imagem para ser exibido aofundodoelemento.Porexemplo:

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

Comessa declaração, o navegador vai requisitar um arquivosobre-background.jpg, que deveestarnamesmapastadoarquivoCSSondeconstaessadeclaração.

AspropriedadesdoCSSparadefinirmosasbordasdeumelementonosapresentamumasériedeopções. Podemos, para cada borda de um elemento, determinar sua cor, seu estilo de exibição e sualargura.Porexemplo:

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

Apropriedadebordertemumaformaresumidaparaescreverosmesmosestilosqueadicionamosacima,masdeumamaneiramaissimples:

body{border:1pxsolidred;}

Paraqueoefeitodacorsobreabordasurtaefeito,énecessárioqueapropriedadeborder-styletenhaqualquervalordiferentedopadrãonone.

EditoraCasadoCódigocomlivrosdeumaformadiferente

2.14IMAGEMDEFUNDO

2.15BORDAS

.


ConseguimosfazertambémcomentáriosnoCSSusandoaseguintesintaxe:

/*deixandoofundoridículo*/body{background:gold;}

1. Aplicaremos um pouco de estilo em nossa página usando CSS. Dentro da pasta css, crie umarquivosobre.css,queconteránossocódigodeestiloparaessapágina.

Emprimeirolugar,precisamoscarregaroarquivosobre.cssdentrodapáginasobre.html,comatagquedeveseradicionadadentrodatag:

SobreaMirrorFashion

Noarquivosobre.css,paraoelemento,altereasuacoresuafontebasepormeiodaspropriedadescolorefont-family:

body{color:#333333;font-family:"LucidaSansUnicode","LucidaGrande",sans-serif;}

Otítuloprincipaldeveterumfundoestampadocomaimagemimg/sobre-background.jpg.Useapropriedadebackground-imagepraisso.Aproveiteecoloqueumabordasutilnossubtítulos,paraajudarasepararoconteúdo.

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

h2{border-bottom:2pxsolid#333333;}

Acerte também a renderização das figuras. Coloque um fundo cinza, uma borda sutil, deixe alegendaemitálicocomfont-styleealinheaimagemealegendanocentrocomtext-align.

figure{background-color:#F2EDED;border:1pxsolid#ccc;text-align:center;}

figcaption{font-style:italic;

2.16EXERCÍCIOS:PRIMEIROSPASSOSCOMCSS

.

}

Testeoresultadononavegador.Nossapáginacomeçaapegaroestilodapáginafinal!

2. (opcional) Teste outros estilos de bordas em vez do solid que vimos no exercício anterior.Algumaspossibilidades:dashed,dotted,double,grooveeoutros.

Testetambémoutraspossibilidadesparaotext-align,comoleft,rightejustify.

AAlura oferece centenasdecursosonline em suaplataforma exclusivadeensinoquefavoreceoaprendizadocomaqualidadereconhecidadaCaelum.VocêpodeescolherumcursonasáreasdeProgramação,Front-end,Mobile,

Design & UX, Infra e Business, com um plano que dá acesso a todos os cursos. Ex aluno daCaelumtem15%dedescontonestelink!

ConheçaoscursosonlineAlura.

JáconheceoscursosonlineAlura?

2.17CORESNAWEB

.


Propriedades como background-color, color, border-color, entre outras aceitam uma cor comovalor.ExistemváriasmaneirasdedefinircoresquandoutilizamosoCSS.

Aprimeira,maissimpleseingênua,éusandoonomedacor:

h1{color:red;}

h2{background-color:yellow;}

Odifíciléacertaraexatavariaçãodecorquequeremosnodesign.Porisso,ébemincomumusarmoscorescomseusnomes.OmaiscomumédefiniracorcombaseemsuacomposiçãoRGB.

RGBéumsistemadecorbastantecomumaosdesigners.Elepermiteespecificaraté16milhõesdecorescomumacombinaçãodetrêscoresbase:Vermelho(Red),Verde(Green),Azul(Blue).Podemosescolheraintensidadedecadaumdessestrêscanaisbásicos,numaescalade0a255.

Umamareloforte,porexemplo,tem255deRed,255deGreene0deBlue(255,255,0).Sequiserumlaranja,bastadiminuirumpoucooverde(255,200,0).Eassimpordiante.

NoCSS, podemos escrever as cores tendo comobase sua composiçãoRGB.Aliás, noCSS3 - queveremosmelhordepois-háatéumasintaxebemsimplespraisso:

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

Essa sintaxe funciona nos browsers mais modernos mas não é a mais comum na prática, porquestões de compatibilidade. O mais comum é a notação hexadecimal, que acabamos usando noexercícioanterioraoescrever#F2EDED.Essasintaxetemsuporteuniversalnosnavegadoreseémaiscurtadeescrever,apesardesermaisenigmática.

h3{background-color:#F2EDED;}

No fundo, porém, é a mesma coisa. Na notação hexadecimal (que começa com #), temos 6caracteres.Osprimeiros2indicamocanalRed,osdoisseguintes,oGreen,eosdoisúltimos,Blue.Ouseja, RGB. E usamos a matemática pra escrever menos, trocando a base numérica de decimal parahexadecimal.

Nabasehexadecimal,osalgarismosvãodezeroaquinze(aoinvésdozeroanovedabasedecimalcomum).Pararepresentarosalgarismosdedezaquinze,usamosletrasdeAaF.Nessasintaxe,portanto,podemosutilizarnúmerosde0-9eletrasdeA-F.

Há uma conta por trás dessas conversões,mas seu editor de imagens deve ser capaz de fornecer

.

ambos os valores para você sem problemas. Um valor 255 vira FF na notação hexadecimal. A cor#F2EDED,porexemplo,éequivalenteargb(242,237,237),umcinzaclaro.

Valeaquiumadicaquantoaousodecoreshexadecimais, todavezqueoscaracterespresentesnacomposição da base se repetirem, estes podem ser simplificados. Então um número em hexadecimal3366FF,podesersimplificadopara36F.

Não são raros os casos em que queremos exibir uma listagem em nossas páginas.OHTML temalgumas tagsdefinidasparaquepossamos fazer issodemaneiracorreta.A listamaiscomuméa listanão-ordenada.

PrimeiroitemdalistaSegundoitemdalista:PrimeiroitemdalistaaninhadaSegundoitemdalistaaninhadaTerceiroitemdalista

Noteque,paracadaitemdalistanão-ordenada,utilizamosumamarcaçãodeitemdelista.Noexemploacima,utilizamosumaestruturacompostanaqualosegundoitemdalistacontémumanovalista.Amesmatagdeitemdelistaéutilizadaquandodemarcamosumalistaordenada.

PrimeiroitemdalistaSegundoitemdalistaTerceiroitemdalistaQuartoitemdalistaQuintoitemdalista

Aslistasordenadastambémpodemtersuaestruturacompostaporoutraslistasordenadascomonoexemploquetemosparaaslistasnão-ordenadas.Tambémépossívelterlistasordenadasaninhadasemumitemdeumalistanão-ordenadaevice-versa.

Existeumterceirotipode listaquedevemosutilizarparademarcarumglossário,quandolistamostermoseseussignificados.Essalistaéalistadedefinição.

HTMLHTMLéalinguagemdemarcaçãodetextosutilizadaparaexibirtextoscomopáginasnaInternet.NavegadorNavegadoréosoftwarequerequisitaumdocumentoHTML

2.18LISTASHTML

.

atravésdoprotocoloHTTPeexibeseuconteúdoemumajanela.

Utilizamosapropriedadepaddingparaespaçamento,marginparamargem,heightewidthparaalterardimensõesdoselementos.Vejamoscadaumaecomoelasdiferementresi.

Apropriedadepaddingéutilizadaparadefinirumespaçamentointernoemalgunselementos(porespaçamentointernoqueremosdizeradistânciaentreolimitedoelemento,suaborda,eseurespectivoconteúdo)etemassubpropriedadeslistadasaseguir:

padding-toppadding-rightpadding-bottompadding-left

Essaspropriedadesaplicamumadistânciaentreolimitedoelementoeseuconteúdoacima,àdireita,abaixo e à esquerda respectivamente. Essa ordem é importante para entendermos como funciona ashorthandpropertydopadding.

Podemosdefinir todososvaloresparaassubpropriedadesdopaddingemumaúnicapropriedade,chamadaexatamentedepadding,eseucomportamentoédescritonosexemplosaseguir:

Sepassadosomenteumvalorparaapropriedadepadding,essemesmovaloréaplicadoemtodasasdireções.

p{padding:10px;}

Se passados dois valores, o primeiro será aplicado acima e abaixo (equivalente a passar omesmovalor para padding-top e padding-bottom) e o segundo será aplicado à direita e à esquerda(equivalenteaomesmovalorparapadding-rightepadding-left).

p{padding:10px15px;}

Sepassadostrêsvalores,oprimeiroseráaplicadoacima(equivalenteapadding-top), o segundoserá aplicado à direita e à esquerda (equivalente a passar o mesmo valor para padding-right epadding-left)eoterceirovalorseráaplicadoabaixodoelemento(equivalenteapadding-bottom).

p{

2.19ESPAÇAMENTO,MARGEMEDIMENSÕES

Padding

.

padding:10px20px15px;}

Se passados quatro valores, serão aplicados respectivamente a padding-top,padding-right,padding-bottomepadding-left.Parafacilitaramemorizaçãodessaordem,basta lembrarqueosvaloressãoaplicadosemsentidohorário.

p{padding:10px20px15px5px;}

A propriedade margin é bem parecida com a propriedade padding, exceto que ela adicionaespaço após o limite do elemento, ou seja, é um espaçamento além do elemento em si. Além dassubpropriedadeslistadasaseguir,háashorthandpropertymarginquesecomportadamesmamaneiraqueashorthandpropertydopaddingvistanotópicoanterior.

margin-topmargin-rightmargin-bottommargin-left

Há ainda umamaneira de permitir que o navegador defina qual será a dimensão da propriedadepadding ou margin conforme o espaço disponível na tela: definimos o valor auto para osespaçamentosquequisermos.

Noexemploaseguir,definimosqueumelementonãotemnenhumamargemacimaouabaixodeseuconteúdoequeonavegadordefineumamargemigualparaambososladosdeacordocomoespaçodisponível:

p{margin:0auto;}

Épossíveldeterminarasdimensõesdeumelemento,porexemplo:

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

TodososparágrafosdonossoHTMLocuparão300pixelsdealturaedelargura,comcordefundovermelha.

Margin

Dimensões

.

NaAlura Língua você reforça e aprimora seuinglês! Usando a técnica Spaced Repetitions oaprendizado naturalmente se adapta ao seuconhecimento. Exercícios e vídeos interativosfazem com que você pratique em situações

cotidianas. Além disso, todas as aulas possuem explicações gramaticais, para você entendercompletamente o que está aprendendo. Aprender inglês é fundamental para o profissional detecnologiadesucesso!

PratiqueseuinglêsnaAluraLíngua.

1. Aindanapáginasobre.html,crieumsubtítulochamadoDiferenciaise,logoemseguida,umalistadediferenciais.Useparaosubtítulo,paraalistaeparaositensdalista.

Dica:vocêpodecopiarotextodosdiferenciaisdoarquivodiferenciais.txt.

Diferenciais

Menorpreçodovarejo,garantidoSevocêacharumalojamaisbarata,levaoprodutodegraça....

Testeoresultadononavegador.

2. Podemos melhorar a apresentação da página acertando alguns espaçamentos usando váriaspropriedadesdoCSS,comomargin,paddingetext-indent.

h1{padding:10px;}

h2{margin-top:30px;}

p{padding:045px;text-indent:15px;}

SaberinglêsémuitoimportanteemTI

2.20EXERCÍCIOS:LISTASEMARGENS

.

https://www.aluralingua.com.br/?utm_source=alumni&utm_medium=apostila&utm_campaign=aluno-caelum

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

figcaption{margin-top:10px;}

Vejaoresultadononavegador.

3. Paracentralizarobody comonodesign, podemosusar o truquede colocarum tamanho fixo emargensautonaesquerdaenadireita:

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

Verifiquemaisumavezoresultado.

Quando precisamos indicar que um trecho de texto se refere a um outro conteúdo, seja ele nomesmodocumentoouemoutroendereço,utilizamosatagdeâncora.

Existemdoisdiferentesusosparaasâncoras.Umdeleséadefiniçãodelinks:

VisiteositedaCaelum.

Note que a âncora está demarcando apenas a palavra "Caelum" de todo o conteúdodo parágrafoexemplificado.Issosignificaque,aoclicarmoscomocursordomousenapalavra"Caelum",onavegadorredirecionaráousuárioparaositedaCaelum,indicadonoatributohref.

Outrousoparaatagdeâncoraéademarcaçãodedestinosparalinksdentrodoprópriodocumento,oquechamamosdebookmark.

Maisinformaçõesaqui.

2.21LINKSHTML

.

Conteúdodapágina...

Maisinformaçõessobreoassunto:

Informações...

Deacordocomoexemploacima,aoclicarmos sobreapalavra "aqui",demarcadacomum link,ousuárioserá levadoàporçãodapáginaondeobookmark"info"évisível.Bookmarkéoelementoquetemoatributoid.

Épossível,comousodeumlink,levarousuárioaumbookmarkpresenteemoutrapágina.

Entreemcontatosobreocurso

Oexemploacimafarácomqueousuárioqueclicarnolinksejalevadoàporçãodapáginaindicadanoendereço,especificamentenopontoondeobookmark"contato"sejavisível.

1. No segundo parágrafo do texto, citamos o centro de distribuição na cidade de Jacarezinho, noParaná.TransformeessetextoemumlinkexternoapontandoparaomapanoGoogleMaps.

UseatagparacriarlinkparaoGoogleMaps:

Jacarezinho,noParaná

Testeapáginanonavegadoreacesseolink.

2. Duranteocurso,vamoscriarváriaspáginasparaositedaMirrorFashion,comoumapáginainicial,chamadaindex.html.

Queremos,nessapáginadeSobrequeestamosfazendo,linkarparaessanovapágina.Porisso,vamoscriá-laagoranapastamirror-fashioncomaestruturabásicaeumparágrafoindicandoemqualpáginaousuárioestá.Nãosepreocupe,elaseráincrementadaembreve.

Crieapáginaindex.html:

MirrorFashionOlá,souoindex.html!

Adicioneumlinkinternonanossasobre.htmlapontandoparaestapáginaqueacabamosdecriar.

2.22EXERCÍCIOS:LINKS

.

Oterceiroparágrafodotextopossuireferênciaaestapáginamasaindasemlink.Crielinklá:

...Acessenossaloja...

Reparecomoapenasenvolvemosotextoaserlinkadousandoatag.

Vejaoresultadononavegador.

3. Serepararbem,aindanesseterceiroparágrafodetexto,háreferênciastextuaisparaasoutrasseçõesdanossapágina,emparticularparaaHistóriaeosDiferenciais.Parafacilitaranavegaçãodousuário,podemostransformaressasreferênciasemâncorasparaasrespectivasseçõesnoHTML.

Paraisso,adicioneumidemcadaumdossubtítulosparaidentificá-los:

História

...

Diferenciais

Agora que temos os ids dos subtítulos preenchidos, podemos criar uma âncora para eles noterceiroparágrafodotexto:

...Conheçatambémnossahistóriaenossosdiferenciais....

Vejaoresultadoemseunavegador.

Você conhece alguém que tem potencial paratecnologia e programação, mas que nuncaescreveuumalinhadecódigo?Podeserumfilho,sobrinho, amigo ou parente distante. NaAlura

Start ela vai poder criar games, apps, sites e muito mais! É o começo da jornada comprogramaçãoeaportadeentradaparaumapossívelcarreiradesucesso.Elavaiestudaremseupróprioritmoecomamelhordidática.AqualidadedaconceituadaAlura,agoraparaStarters.

ConheçaoscursosonlinedaAluraStart!

Já vimosmuitas tags para casos específicos: títulos comh1, parágrafos comp, imagens com img,

AprendasedivertindonaAluraStart!

2.23ELEMENTOSESTRUTURAIS

.

https://www.alurastart.com.br/?utm_source=alumni&utm_medium=apostila&utm_campaign=aluno-caelum

listascomuletc.Eaindavamosverváriasoutras.

Mas é claroquenão existeuma tagdiferentepara cada coisadouniverso.Oconjuntode tagsdoHTMLébemvastomasétambémlimitado.

Invariavelmente você vai cair algum dia num cenário onde não consegue achar a tag certa paraaqueleconteúdo.Nessecaso,podeusarastagsequefuncionamcomocoringas.Sãotagssemnenhumsignificadoespecialmasquepodemservirparaagruparumcertoconteúdo,tantoumblocodapáginaquantoumpedaçodetexto.

E, como vamos ver a seguir, vamos poder estilizar esses divs e spans comCSS customizado. Porpadrão,elesnãotêmestiloalgum.

JávimoscomoselecionarelementosnoCSSusandosimplesmenteonomedatag:

p{color:red;}

Apesardesimples,éumamaneiramuitolimitadadeselecionar.Àsvezesnãoqueremospegartodososparágrafosdapágina,masapenasalgumdeterminado.

Existem, portanto, maneirasmais avançadas de selecionarmos um oumais elementos doHTMLusandoosseletoresCSS.VamosverseletoresCSSquasequeao longodocurso todo, inclusivealgunsbemavançadosemodernosdoCSS3.Porenquanto,vamosvermais2básicosalémdoseletorpornomedetag.

Épossívelaplicarpropriedadesvisuaisaumelementoselecionadopelovalordeseuatributoid.Paraisso,oseletordeveiniciarcomocaractere"#"seguidodovalorcorrespondente.

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

O seletor acima fará com que o elemento do nosso HTML que tem o atributo id com valor"cabecalho" tenha seu texto renderizado na cor branca e centralizado. Note que não há nenhumaindicaçãoparaqualtagapropriedadeseráaplicada.Podesertantoumaquantoum

, atémesmo tags sem conteúdo como uma , desde que essa tenha o atributo id com o valor"cabecalho".

Comooatributoiddevetervalorúniconodocumento,oseletordeveaplicarsuaspropriedadesdeclaradassomenteàqueleúnicoelementoe,porcascata,atodososseuselementosfilhos.

2.24CSS:SELETORESDEIDEFILHO

SeletordeID

.

Podemosaindautilizarumseletorhierárquicoquepermiteaplicarestilosaoselementosfilhosdeumelementopai:

#rodapeimg{margin-right:30px;vertical-align:middle;width:94px;}

Noexemploanterior,oelementopairodape é selecionadopelo seuid.O estilo será aplicadoapenasnoselementosimgfilhosdoelementocomid=rodape.

Suponhamos que, por uma questão de design, a imagem da família Pelho deva vir ao lado doparágrafoeconformeaimagemabaixo:

Isso não acontece por padrão. Repare que, observando as tags HTML que usamos até agora, oselementosdapáginasãodesenhadosumemcimadooutro.Écomosecadaelementofosseumacaixa(box) e o padrão é empilhar essas caixas verticalmente.Mais pra frente vamos entendermelhor essealgoritmo,masagoraoimportanteéqueeleatrapalhaessenossodesign.

Temosumproblema:atagocupatodaalarguradapáginaeapareceempilhadanofluxododocumento,nãopermitindoqueoutroselementossejamadicionadosaoseulado.

Esteproblemapodesersolucionadopormeiodapropriedadefloat.Estapropriedadepermitequetiremosumcertoelementodofluxoverticaldodocumento,oquefazcomqueoconteúdoabaixodelefluaaoseuredor.Naprática,vaifazerexatamenteolayoutquequeremos.

Em nosso exemplo, o conteúdo do parágrafo tentará fluir ao redor da nossa imagem com float.PercebaquehouveumaperturbaçãodofluxoHTML,poisagoraanossaimagempareceexistirforado

Seletorhierárquico

2.25FLUXODODOCUMENTOEFLOAT

.

fluxo.



1. Temosumacomaimagemdocentrodedistribuiçãoquequeremoscentralizarnapágina(marginauto)eacertarotamanho(width).

Paraaplicaressasregrasapenasaessefigureenãoatodosdapágina,vamosusaroID.Coloqueumidnessaparapodermosestilizá-laespecificamenteviaCSS:

....

AdicionandooCSS:

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

Testenonavegador.Compareoresultadocomaoutrafiguraquenãorecebeuomesmoestilo.


2.26EXERCÍCIOS:SELETORESCSSEFLUTUAÇÃODEELEMENTOS

.


2. Crieumrodapéparaapáginautilizandouma,quedeveserinseridacomoúltimoelementodentrodatag:

©CopyrightMirrorFashion

Testeoresultadononavegador.

3. Assimcomofizemosparaostítulosesubtítulos,estilizeonossorodapé.ReparenousodoidviaCSSparaselecionarmosapenasoelementoespecíficoqueseráestilizado.Reparetambémnousodoseletordedescendentesparaindicarumelementoqueestádentrodeoutro.

#rodape{color:#777;margin:30px0;padding:30px0;}

#rodapeimg{margin-right:30px;vertical-align:middle;width:94px;}

Testeoresultadofinalnonavegador.

4. Queremos que a imagem da Família Pelho esteja flutuando a direita no texto na seção sobre aHistóriadaempresa.Paraisso,useapropriedadefloatnoCSS.

ComoacomaimagemdafamíliaPelhoaindanãopossuiid,adicioneum:

....

Agorapodemosreferenciaroelementoatravésdeseuid emnossoCSS, indicandoa flutuaçãoeumamargemparaespaçamento:

#familia-pelho{float:right;margin:0010px10px;}

Testeoresultado.Reparecomootextoérenderizadoaoredordaimagem,bemdiferentedeantes.

.

5. (opcional)Façatestescomofloat:lefttambém.

6. (opcional)Testeflutuara imagemdocentrodedistribuição.Comooconteúdofluiráaoseuredoragora?Éoquequeríamos?Comomelhorar?

Nos últimos anos, muito tem se falado sobre a versão mais recente do HTML, o HTML5. EsseprojetoéumgrandeesforçodoW3CedosprincipaisbrowsersparaatenderaumasériedenecessidadesdodesenvolvimentodaWeb comoplataformade sistemas distribuídos e informaçãodescentralizada.Algumasnovidadessãoimportantesparaamarcaçãodeconteúdo,outrasparaaestilizaçãocomoCSSnível3 (CSS3)eoutrasnovidades são importantespara interaçãoavançadacomousuáriocomnovasfuncionalidadesdonavegadorcomJavaScript.

Apesar da especificação já estar completa, existem diferenças entre as implementações adotadaspelos diferentes navegadores ainda hoje. Mesmo assim, o mercado está tomando uma posição bemagressivaquantoàadoçãodosnovospadrõesehojemuitosprojetosjásãoiniciadoscomeles.

Emalgunscasos,osesforçosdemanutençãodeumprojetoqueadotaosnovospadrõesésimilaroucomparável com a manutenção de um projeto que prevê compatibilidade total com navegadores jáobsoletoscomooInternetExplorer7eoFirefox3.

Emnossoprojeto,vamosadotarospadrõesdoHTML5evamosconhecereutilizaralgumasdesuasnovidadesquantoàmelhoriadasemânticadeconteúdoenovaspropriedadesdeCSSquenospermiteadicionarefeitosvisuaisantesimpossíveis.Aindaassim,nossoprojetoseráparcialmentecompatívelcomnavegadoresobsoletosporcontadatécnicaProgressiveEnhancement.

2.27OFUTUROEPRESENTEDAWEBCOMOHTML5

.

CAPÍTULO3

"Ocaoséarimadoinaudito."--ZackdelaRocha

Existehojenomercadoumagrandequantidadedeempresasespecializadasnodesenvolvimentodesites e aplicações web, bem como algumas empresas de desenvolvimento de software ou agências decomunicaçãoquetêmpessoascapacitadasparaexecutaressetipodeprojeto.

Quandodetectadaanecessidadedodesenvolvimentodeumsiteouaplicaçãoweb,aempresaquetem essa necessidade deve passar todas as informações relevantes ao projeto para a empresa que vaiexecutá-lo.Aempresaresponsávelpeloseudesenvolvimentodeveanalisarmuitobemessasinformaçõeseutilizarpesquisasparacomplementaroumesmocertificar-sedavalidadedessasinformações.

Umprojetodesiteouaplicaçãowebenvolvemuitasdisciplinasemsuaexecução,poissãodiversascaracterísticasaseremanalisadasediversasaspossibilidadesapresentadaspelaplataforma.Porexemplo,devemos conhecer muito bem as características do público alvo, pois ele define qual a melhorabordagemparadefiniranavegação,tomlinguísticoevisualaseradotado,entreoutras.AafinidadedopúblicocomaInterneteocomputadorpodeinclusivedefinirotipoeaintensidadedasinovaçõesquepodemserutilizadas.

Por isso, aprimeiraetapadodesenvolvimentodoprojeto ficaa cargodaáreadeUserExperienceDesign(UX)ouInteractionDesign(IxD),normalmentecompostadepessoascomformaçãonaáreadecomunicação. Essa equipe, ou pessoa, analisa e endereça uma série de informações da característicahumanadoprojeto,definindoaquantidade,conteúdoelocalizaçãodecadainformação.

AlgumasdasmotivaçõesepráticasdeDesigndeInteraçãoeExperiênciadoUsuáriosãoconteúdodocursoDesign de Interação, Experiência do Usuário e Usabilidade. O resultado do trabalho dessaequipeéumasériededefiniçõessobreanavegação(mapadosite)eumesboçodecadaumadasvisões,que são as páginas, e visões parciais como, por exemplo, os diálogos de alerta e confirmação daaplicação. Essas visões não adotam nenhum padrão de design gráfico: são utilizadas fontes, cores eimagensneutras,emboraasinformaçõesescritasdevamserdefinidasnessafasedoprojeto.

HTMLSEMÂNTICOEPOSICIONAMENTONOCSS

3.1OPROCESSODEDESENVOLVIMENTODEUMATELA

.

Esses esboços das visões são o que chamamos dewireframes e guiam o restante do processo dedesign.

Comoswireframesemmãos,éhoradeadicionarasimagens,cores,tipos,fundos,bordaseoutrascaracterísticas visuais. Esse trabalho é realizado pelos designers gráficos, que utilizam ferramentasgráficas comoAdobePhotoshop,AdobeFireworks,GIMP, entreoutras.Oque resultadesse trabalhoqueodesignerrealizaemcadawireframeéoquechamamosdelayout.Oslayoutssãoimagensestáticasjá com o visual completo a ser implementado. Apesar de os navegadores serem capazes de exibirimagensestáticas,exibirumaúnicaimagemparaousuáriofinalnonavegadornãoéaformaidealdese

.

publicarumapágina.

Paraqueasinformaçõessejamexibidasdeformacorretaeparapossibilitaroutrasformasdeusoeinteração com o conteúdo, é necessário que a equipe de programação front-end transforme essasimagensemtelasvisíveise,principalmente,utilizáveispelosnavegadores.Existemdiversastecnologiaseferramentaspararealizaressetipodetrabalho.Algumasdastecnologiasdisponíveissão:HTML,AdobeFlash,AdobeFlex,JavaFXeMicrosoftSilverlight.

Detodasastecnologiasdisponíveis,amaisrecomendadaécertamenteoHTML,poiséalinguagemqueonavegadorentende.TodasasoutrastecnologiascitadasdependemdoHTMLparaseremexibidascorretamentenonavegadore,ultimamente,ousodoHTML,emconjuntocomoCSSeo JavaScript,tem evoluído a ponto de podermos substituir algumas dessas outras tecnologias onde tínhamosmaispoderecontroleemrelaçãoàexibiçãodegráficos,efeitoseinteratividade.



Duranteocurso,vamosproduzir algumaspáginasdeumprojeto:ume-commercede roupas.Nocapítuloanterior,deintrodução,criamosumapáginasimplesdeSobre.Vamoscomeçaragoraaprojetarorestante,comaspáginasmaiscomplexas.

Uma equipe de UX já definiu as páginas, o conteúdo de cada uma delas e produziu algunswireframes.Depois de realizado esse trabalho, a equipe de design já adicionouo visual desejadopeloclientecomoresultadofinaldoprojeto.

AgoraéanossavezdetransformaresselayoutemHTML,paraqueosnavegadorespossamlererenderizarocódigo,exibindoapáginaparaousuáriofinal.

No capítulo anterior, começamos a codificar a página de Sobre da nossa loja, com o intuito depraticarobásicodeHTMLeCSS.


3.2OPROJETOMIRRORFASHION

.


Nessemomento,vamosfocarnaconstruçãodaparteprincipaldaloja,aHomePage,eseguiremosolayoutoficialcriadopelaequipededesign:

Figura3.2:DesigndaHomepage

Antesdedigitarqualquercódigo,énecessáriaumaanálisedolayout.Comessaanálise,definiremosasprincipaisáreasdenossaspáginas.UmfatormuitoimportanteaserconsideradoquandofazemosessaanálisedolayoutéomodocomoosnavegadoresinterpretamerenderizamoHTML.

OHTMLéexibidononavegadordeacordocomaordemdeleituradoidiomadapágina.Namaioriadoscasos,aleituraéfeitadaesquerdaparaadireita,decimaparabaixo,damesmamaneiraquelemosessaapostila,porexemplo.

Olhe detalhadamente nosso layout e tente imaginar qual a melhor maneira de estruturar nossoHTMLparaquepossamoscodificá-lo.

3.3ANALISANDOOLAYOUT

.

De acordo com o posicionamento de elementos que foi definido desde a etapa de criação doswireframes,todasaspáginasnonossoprojetoobedecemaumaestruturasimilar.

Notequeháumcabeçalho(umaáreaquepotencialmenteserepetiráemmaisdeumapágina)queocupaumalargurafixa;sendoassim,podemoscriarumaseçãoexclusivaparaocabeçalho.

Outraáreaquetemumacaracterísticasemelhanteéorodapé,poispodeserepetiremmaisdeumapágina. Podemos notar que o fundo do elemento vai de uma ponta à outra da página, porém seuconteúdosegueamesmalargurafixadorestantedapágina.

Aáreacentral,quecontéminformaçõesdiferentesemcadapágina,não temnenhumelementoaofundo.Porém,notemosquesualarguraélimitadaantesdeatingiroinícioeofimdapágina.Notemosque,apesardofundodorodapéirdeumapontaàoutra,seuconteúdotambémélimitadopelamesmalarguradoconteúdo.

Nocasodahomepage,omiolodapáginapodeaindaservistocomodoisblocosdiferentes.Háoblocoprincipalinicialcomomenudenavegaçãoeobannerdedestaque.Eháoutrobloconofinalcomdoispainéiscomlistasdeprodutos.

Poderíamosdefiniressasáreasdaseguintemaneira:

Estruturadapágina

.

NotequeutilizamosoatributoiddoHTMLparaidentificaraprincipal.Oatributoiddeveserúnicoemcadapágina,ouseja,sópodehaverumelementocomoatributoid="main".Mesmoseooutroelemento fordeoutra tag,o idnãopodese repetir.Deacordocomaestruturaacima,nósseparamosasquatroáreasprincipais.

Astagsqueusamosantes-headerefooter - são tagsnovasdoHTML5.Antigamente,numasituação parecida com essa, teríamos criado quatro div, uma para cada parte da página, e talvezcolocadoidsdiferentespracadauma.

QualadiferençaentrecolocardiveessasnovastagsdoHTML5?Visualmenteefuncionalmente,nenhuma. A única diferença é o nome da tag e o significado que elas carregam. E isso é bastanteimportante.

Dizemos que a função do HTML é fazer a marcação do conteúdo da página, representar suaestrutura da informação. Não é papel do HTML, por exemplo, cuidar da apresentação final e dosdetalhesdedesign,poisistoéopapeldoCSS.OHTMLprecisaserclaroelimpo,focadoemmarcaroconteúdo.

As novas tags do HTML5 trazem novos significados semânticos para usarmos em elementosHTML. Em vez de simplesmente agrupar os elementos do cabeçalho em um div genérico e semsignificado,usamosumatagheaderquecarregaemsiosignificadoderepresentarumcabeçalho.

Comisso,temosumHTMLcomestruturabaseadanosignificadodeseuconteúdo,oquetrazumasériedebenefícios,comoafacilidadedemanutençãoecompreensãododocumento.

Provavelmente,odesigndasuapáginadeixabastanteclaroqualpartedasuapáginaéocabeçalhoequal parte é omenu de navegação. Visualmente, são distinguíveis para o usuário comum.Mas e sedesabilitarmosoCSSeasregrasvisuais?Comodistinguiressesconteúdos?

Um HTML semântico carrega significado independente da sua apresentação visual. Isso éparticularmenteimportantequandooconteúdoforconsumidoporclientesnãovisuais.Háváriosdessescenários.Umusuáriocegopoderiausarumleitordetelaparaouvirsuapágina.Nestecaso,aestruturasemânticadoHTMLéessencialparaeleentenderaspartesdoconteúdo.

Mais importante ainda, robôs de busca como o Google também são leitores não visuais da suapágina.SemumHTMLsemântico,oGooglenãoconsegue,porexemplo,saberqueaquiloéummenuequedeveseguirseuslinks.Ouquedeterminadaparteésóumrodapéinformativo,masnãofazpartedoconteúdo principal. Semântica é uma importante técnica de SEO -Search EngineOptimization - e

3.4HTMLSEMÂNTICO

.

críticaparamarketingdigital.

Vamos falar bastante de semântica ao longo do curso e esse é um ingrediente fundamental dastécnicasmodernasdewebdesign.Veremosmaiscenáriosondeumaboasemânticaéessencial.




Já sabemos que o nosso cabeçalho será representado pela tag do HTML5,semanticamenteperfeitaparaasituação.Maseoconteúdodele?

Observeapenasocabeçalhonolayoutanterior.Quaisblocosdeconteúdovocêidentificanele?

OlogoprincipalcomonomedaempresaUmamensagemsobreasacoladecomprasUmalistadelinksdenavegaçãodaloja

Repare como não destacamos a presença do ícone da sacola. Ele não faz parte do conteúdo, émeramentedecorativo.Oconteúdoéamensagemsobreositensnasacola.Quetipodeconteúdoéesse?Qualtagusar?Éapenasumafraseinformativa,umparágrafodetexto.Podemosusar

:

Nenhumitemnasacoladecompras

Maseaimagemcomoícone?Comoédecorativa,pertenceaoCSS,comoveremosdepois.OHTMLnãotemnadaavercomisso.

Continuandonoheader,nossalistadelinkspodeserumalista-coms.Dentrodecadaitem,vamosusarumlink- -paraapáginacorrespondente.Mashácomomelhoraraindamais:esses links não são links ordinários, são essenciais para a navegação do usuário na página. PodemossinalizarissocomanovatagdoHTML5,querepresentablocosdenavegaçãoprimários:


3.5PENSANDONOHEADER

.


SuaContaListadeDesejosCartãoFidelidadeSobreAjuda

Oúltimopontoparafecharmosnossocabeçalhoéologo.Comorepresentá-lo?

Visualmente,observamosnolayoutqueéapenasumaimagem.Podemosusarentãoumatagcomofizemosantes.Masesemanticamente,oqueéaqueleconteúdo?E,principalmente,oquesignificaaquelelogoparaclientesnãovisuais?ComogostaríamosqueesseconteúdofosseindexadonoGoogle?

Émuitocomum,nesse tipodesituação,usarum comum textoque representeo títulodanossa página. Se pensarmos bem, o que queremos passar como logo é a ideia de que a página é daMirrorFashion.

Quandoo texto for lidoparaumcego,queremos essamensagem lida.QuandooGoogle indexar,queremosqueeleassocienossapáginacomMirrorFashionenãocomumaimagem"qualquer".

É fácilobteresseresultadocolocandoadentrodo. Epara representar o conteúdotextual da imagem (o que vai ser usado pelo leitor de tela e pelo Google), usamos o atributo alt daimagem.Esseatributoindicaconteúdoalternativo,queseráusadoquandooclientenãoforvisualenãoconseguirenxergaraimagemvisualmente.

ReparecomoacolocaçãodoH1edoALTnaimagemnãoalteramemnadaapáginavisualmente.Estãoláporpuraimportânciasemântica.Eissoémuitobom.OH1daráodevidodestaquesemânticopara o logo, colocando-o como elemento principal. E o ALT vai designar um conteúdo textualalternativoàimagem.

Parapodermosestilizaroselementosquecriamos,vamosprecisardeumaformadeselecionarmosnoCSScadacoisa.JávimosseletordetageporID.Ouseja,praestilizarnossomenu,podíamosfazer:

nav{...}

MasimaginequepodemostermuitosNAVnapáginaequeremossermaisespecíficos.OIDéumasolução:

3.6ESTILIZAÇÃOCOMCLASSES

.

E,noCSS:

#menu-opcoes{...}

Vamosverumaterceira forma,comousodeclasses.Ocódigoésemelhantedequandousamosoatributoid,masagoravamosusaroatributoclassnoHTMLeopontonoCSS:

...

E,noCSS:

.menu-opcoes{...}

MasquandousarIDouCLASS?

Ambosfariamseutrabalhonessecaso.Masébomlembrarqueidssãomaisfortes,devemserúnicosnapágina, sempre.Emboraessenossomenusejaúnicoagora, imagine se,no futuro,quisermos teromesmo menu em outro ponto da página, mais pra baixo? Usar classes facilita reuso de código eflexibilidade.

Alémdisso,umelementopodetermaisdeumaclasseaomesmotempo,aplicandoestilosdeváriasregrasdoCSSaomesmotempo:

...

.menu-opcoes{//códigodeummenudeopcoes//essasregrasserãoaplicadasaonav}

.menu-cabecalho{//códigodeummenunocabeçalho//essasregrasTAMBÉMserãoaplicadasaonav}

NocasodoID,não.Cadaelementosótemumid,único.

Preferimosousode classes, no lugarde ids, pradeixar emaberto a possibilidadede reaproveitaraqueleelementoemmaisdeumpontodocódigo.Vamosfazerousodeclassenasacoladocabeçalho:


Reutilizandoumaclasseparadiversoselementos

.

Pode ser interessante criar uma classe que determina a centralização horizontal de qualquerelemento,seminterferiremsuasmargenssuperioreinferiorcomonoexemploaseguir:

.container{margin-right:auto;margin-left:auto;}

Agora,ésóadicionaraclasse"container"aoelemento,mesmoqueelejátenhaoutrosvaloresparaesseatributo:

Conteúdoquedeveficarcentralizado

1. Já temos o arquivo index.html criado. Vamos apagar seu único parágrafo, pois adicionaremosconteúdoquefarásentido.

Crieoarquivoestilos.css napastacss doprojeto, que será onde escreveremos todosos estilosdapágina.Adicionenaindex.htmlatagapontandoparacss/estilos.css:

MirrorFashion

2. Próximopasso: criar o cabeçalho.Use as tags semânticas que vimosno curso, como,,,, etc.Crie linksparaaspáginasdomenu.Euse para representar otítulodapáginacomologoacessível.


SuaContaListadeDesejosCartãoFidelidadeSobreAjuda

3. Já podemos testar no navegador. Repare como a página, embora sem estilo visual, éutilizável. Éassim que os clientes não visuais lerão nosso conteúdo. Qual a importância de uma marcação

3.7EXERCÍCIOS:HEADERSEMÂNTICO

.

semântica?

4. Vamos criar a estilização visual básica do nosso conteúdo, sem nos preocuparmos composicionamentoainda.Ajusteascoresealinhamentodostextos.ColoqueoíconedasacolacomCSSatravésdeumaimagemdefundodoparágrafo:

.sacola{background-image:url(../img/sacola.png);background-repeat:no-repeat;background-position:topright;

font-size:14px;padding-right:35px;text-align:right;width:140px;}

.menu-opcoesul{font-size:15px;}

.menu-opcoesa{color:#003366;}

Aproveiteeconfigureacoreafontebasedetodosostextosdosite,usandoumseletordiretonatag:

body{color:#333333;font-family:"LucidaSansUnicode","LucidaGrande",sans-serif;}

Testenonavegadorevejacomonossapáginacomeçaapegarodesign.

.

Editorastradicionaispoucoligamparaebooksenovastecnologias.Nãodominamtecnicamente o assunto para revisar os livros a fundo. Não têm anos deexperiênciaemdidáticascomcursos.ConheçaaCasadoCódigo,umaeditoradiferente,comcuradoriadaCaelum eobsessãoporlivrosdequalidadeapreçosjustos.

CasadoCódigo,ebookcompreçodeebook.

QuandonãoespecificamosnenhumestiloparanossoselementosdoHTML,onavegadorutilizaumasérie de estilos padrão, que são diferentes em cada um dos navegadores. Em um momento maisavançadodosnossosprojetos,poderemosenfrentarproblemascomcoisasquenãotínhamosprevisto;porexemplo,oespaçamentoentrecaracteresutilizadoemdeterminadonavegadorpodefazercomqueumtextoque,pelanossadefiniçãodeveriaaparecerem4linhas,apareçacom5,quebrandotodoonossolayout.

Paraevitaressetipodeinterferência,algunsdesenvolvedoreseempresascriaramalgunsestilosquechamamos deCSS Reset. A intenção é setar um valor básico para todas as características do CSS,sobrescrevendototalmenteosestilospadrãodonavegador.

Dessejeitopodemoscomeçaraestilizarasnossaspáginasapartirdeumpontoqueéomesmoparatodososcasos,oquenospermiteterumresultadomuitomaissólidoemváriosnavegadores.

ExistemalgumasopçõespararesetarosvaloresdoCSS.Algumasquemerecemdestaquehojesãoasseguintes:

HTML5Boilerplate

OHTML5Boilerplateéumprojetoquepretendefornecerumexcelentepontodepartidaparaquempretende desenvolver um novo projeto com HTML5. Uma série de técnicas para aumentar acompatibilidadedanovatecnologiacomnavegadoresumpoucomaisantigosestãopresenteseocódigoétotalmentegratuito.Emseuarquivo"style.css",estãoreunidasdiversastécnicasdeCSSReset.Apesarde consistentes, algumas dessas técnicas são um pouco complexas, mas é um ponto de partida quepodemosconsiderar.

YUI3CSSReset

EditoraCasadoCódigocomlivrosdeumaformadiferente

3.8CSSRESET

.


Criadopelosdesenvolvedores front-enddoYahoo!,umadas referênciasna área, esseCSSReset écompostode3arquivosdistintos.Oprimeirodeles, chamadodeReset, simplesmentemuda todososvalorespossíveisparaumvalorpadrão,ondeatémesmoastagsepassamaserexibidascomomesmotamanho.OsegundoarquivoéchamadodeBase,ondealgumasmargensedimensõesdoselementossãopadronizadas.OterceiroéchamadodeFont,ondeotamanhodostiposédefinidoparaquetenhamosumvisualconsistenteinclusiveemdiversosdispositivosmóveis.

EricMeyerCSSReset

Há também o famoso CSS Reset de Eric Meyer, que pode ser obtido emhttp://meyerweb.com/eric/tools/css/reset/.Éapenasumarquivocomtamanhobemreduzido.

OselementosdoHTML,quandorenderizadosnonavegador,podemcomportar-sebasicamentededuasmaneirasdiferentesnoquedizrespeitoàmaneiracomoelesinterferemnodocumentocomoumtodo:embloco(block)ouemlinha(inline).

Elementos em bloco são aqueles que ocupam toda a largura do documento, tanto antes quantodepoisdeles.Umbomexemplodeelementoemblocoéatag,quejáutilizamosemnossoprojeto.Note que não há nenhum outro elemento à esquerda ou à direita do nosso nome da loja, apesar daexpressão"MirrorFashion"nãoocupartodaalarguradodocumento.

Entreoselementosembloco,podemosdestacarastagsdeheadinga, os parágrafos

edivisões.

Elementos em linha são aqueles que ocupam somente o espaço necessário para que seu próprioconteúdo seja exibido, permitindo que outros elementos em linha possam ser renderizados logo nasequência,sejaantesoudepois,exibindodiversoselementosnessamesmalinha.

Entreoselementosemlinha,podemosdestacarastagsdeâncora,astagsdeênfase,eeatagdemarcaçãodeatributos.

Saberadistinçãoentreessesmodosdeexibiçãoé importante,poishádiferençasnaestilizaçãodoselementosdependendodoseutipo.

Pode ser interessante alterarmos esse padrão de acordo com nossa necessidade, por isso existe apropriedadedisplaynoCSS,quepermitedefinirqualestratégiadeexibiçãooelementoutilizará.

Porexemplo,oelementodeumatemporpadrãoovalorblockparaapropriedadedisplay.Sequisermososelementosnahorizontal,bastaalterarmosapropriedadedisplaydaparainline:

ulli{display:inline;

3.9BLOCKVSINLINE

.

http://meyerweb.com/eric/tools/css/reset/

}

1. UtilizaremosoCSSresetdoEricMeyer.Oarquivoreset.cssjáfoicopiadoparaapastacssdonossoprojetoquandoimportamosoprojetonocapítuloinicial.

Precisamossóreferenciá-lonoheadantesdonossoestilos.css:

MirrorFashion

Abranovamenteapáginanonavegador.Observeadiferença,principalmentenapadronizaçãodosespaçamentos.

2. Próximopasso:transformarnossomenuemhorizontaleajustarespaçamentosbásicos.

Vamosusarapropriedadedisplayparamudarosparainline.Aproveitee já coloqueumespaçamentoentreoslinkscommargin.

Reparetambémcomoasacolaestádesalinhada.Otextoestámuitopracimaenãoalinhadocomabasedoícone.Umpadding-topdeveresolver.

.menu-opcoesulli{display:inline;margin-left:20px;}

.sacola{padding-top:8px;}

Testeapáginanonavegador.Estámelhorando?

3. Nossoheaderaindaestátodoàesquerdadapágina,sendoquenolayouteletemumtamanhofixoeficacentralizadonapágina.Aliás,nãoésóocabeçalhoqueficaassim:oconteúdodapáginaemsieoconteúdodorodapétambém.

Temos três tiposdeelementosqueprecisamsercentralizadosnomeiodapágina.VamoscopiarecolarasinstruçõesCSSnos3lugares?Não!CriamosumaclassenoHTMLaseraplicadaemtodosessespontoseumúnicoseletornoCSS.

.container{margin:0auto;width:940px;}

Vamos usar essa classe container no HTML também. Altere a tag header e passe o

3.10EXERCÍCIOS:RESETEDISPLAY

.

class="container"paraela:

Teste a página e veja o conteúdo centralizado. Agora, falta "somente" o posicionamento doselementosdoheader.

AAlura oferece centenasdecursosonline em suaplataforma exclusivadeensinoquefavoreceoaprendizadocomaqualidadereconhecidadaCaelum.VocêpodeescolherumcursonasáreasdeProgramação,Front-end,Mobile,

Design & UX, Infra e Business, com um plano que dá acesso a todos os cursos. Ex aluno daCaelumtem15%dedescontonestelink!

ConheçaoscursosonlineAlura.

Existeumconjuntodepropriedadesquepodemosutilizarparaposicionarumelementonapágina,quesãotop,left,bottomeright.Porémessaspropriedades,porpadrão,nãosãoobedecidaspornenhumelemento,poiselasdependemdeumaoutrapropriedade,aposition.

Apropriedadepositiondeterminaqualéomododeposicionamentodeumelemento,eelapoderecebercomovalor:static,relative,absolute ou fixed.Veremoso comportamentode cadaumdeles,juntocomaspropriedadesdecoordenadas.

Oprimeirovalor,padrãoparatodososelementos,éostatic.Umelementocomposiçãostaticpermanecesempreemseu localoriginalnodocumento,aquelequeonavegadorentendecomosendosuaposiçãoderenderização.Sepassarmosvaloresparaaspropriedadesdecoordenadas,elesnãoserãorespeitados.

Umdosvaloresparaapropriedadepositionqueaceitamcoordenadaséorelative.Comele,as

JáconheceoscursosonlineAlura?

3.11POSITION:STATIC,RELATIVE,ABSOLUTE

.


coordenadasquepassamossãoobedecidasemrelaçãoàposiçãooriginaldoelemento.Porexemplo:

.logotipo{position:relative;top:20px;left:50px;}

Oselementosemnossodocumentoquereceberemovalor"logotipo"emseuatributoclassterão20pxadicionadosaoseutopoe50pxadicionadosàsuaesquerdaemrelaçãoàsuaposiçãooriginal.Noteque, ao definirmos coordenadas, estamos adicionando pixels de distância naquela direção, então oelementoserárenderizadomaisabaixoeàdireitaemcomparaçãoàsuaposiçãooriginal.

Opróximomododeposicionamentoquetemoséoabsolute,eeleéumpoucocomplexo.Existemalgumas regras que alteram seu comportamento em determinadas circunstâncias. Por definição, oelementoque temomododeposicionamento absolute tomacomo referênciaqualquer elementoquesejaseupainaestruturadoHTMLcujomododeposicionamentosejadiferentedestatic (queéopadrão),eobedeceàscoordenadasdeacordocomotamanhototaldesseelementopai.

Quando não há nenhum elemento em toda a hierarquia daquele que recebe o posicionamentoabsolutequesejadiferentedestatic,oelementovaiaplicarascoordenadastendocomoreferênciaaporçãovisíveldapáginanonavegador.Porexemplo:

EstruturaHTML

EstilosCSS

.quadrado{background-color:green;height:200px;width:200px;}

.absoluto{position:absolute;top:20px;right:30px;}

Seguindo o exemplo acima, o segundo elemento , que recebe o valor "absoluto" em seuatributoclass,nãotemnenhumelementocomoseu"pai"nahierarquiadodocumento,portantoelevaialinhar-seaotopoeàdireitadolimitevisíveldapáginanonavegador,adicionandorespectivamente20pxe30pxnessasdireções.Vamosanalisaragoraoexemploaseguir:

EstruturaHTML

.

EstilosCSS

.quadrado{background-color:green;height:200px;width:200px;}

.absoluto{position:absolute;top:20px;right:30px;}

.relativo{position:relative;}

Nesse caso, o elemento que recebe o posicionamento absolute é "filho" do elemento que recebe oposicionamentorelativenaestruturadodocumento,portanto,oelementoabsolutevaiusarcomopontodereferênciaparasuascoordenadasoelementorelativeeseposicionar20pxaotopoe30pxàdireitadaposiçãooriginaldesseelemento.

O outromodo de posicionamento, fixed, sempre vai tomar como referência a porção visível dodocumento no navegador, e mantém essa posição inclusive quando há rolagem na tela. É umapropriedadeútilparaavisosimportantesquedevemservisíveiscomcerteza.

static

Suaposiçãoédadaautomaticamentepelofluxodapágina:porpadrãoeleérenderizadologoapósseusirmãosNãoaceitaumposicionamentomanual(left,right,top,bottom)Otamanhodoseuelementopailevaemcontaotamanhodoelementostatic

relative

Porpadrão,oelementoserárenderizadodamesmamaneiraqueostaticAceitaposicionamentomanualOtamanhodoseuelementopai levaemcontaotamanhodoelementorelative,porémsemlevaremcontaseuposicionamento.Opainãosofreriaalteraçõesmesmoseoelementofossestatic

fixed

Umaconfiguraçãodeposicionamentovertical (leftouright)eumahorizontal (topoubottom)éobrigatóriaOelemento será renderizadonapáginanaposição indicada.Mesmoqueocorrauma rolagem,oelementopermaneceránomesmolugar

Umresumodeposition

.

Seu tamanhonãocontaparacalcularo tamanhodoelementopai, écomosenão fosseelementofilho

absolute

Umaconfiguraçãodeposicionamentovertical (leftouright)eumahorizontal (topoubottom)éobrigatóriaO elemento será renderizadonaposição indicada, porém relativa aoprimeiro elementopai cujopositionsejadiferentedestaticou,senãoexistirestepai,relativaàpáginaSeutamanhonãocontaparacalcularotamanhodoelementopai

1. Posicione o menu à direita e embaixo no header. Use position: absolute para isso. E nãoesqueça:sequeremosposicioná-loabsolutamentecomrelaçãoaocabeçalho,ocabeçalhoprecisaestarcomposition:relative.

header{position:relative;}

.menu-opcoes{position:absolute;bottom:0;right:0;}

2. Asacolatambémdeveesta

vedadas. para uso comercial deste material, por favor ......10.1 jquery - a função $ 203 10.2...

Documents