desenvolvimento web com html, css e javascript

184
TREINAMENTOS Desenvolvimento Web com HTML, CSS e Javascript

Upload: wildcorreia

Post on 18-Dec-2015

303 views

Category:

Documents


9 download

DESCRIPTION

Manual

TRANSCRIPT

  • TREINAMENTOS

    Desenvolvimento Web comHTML, CSS e Javascript

  • Desenvolvimento Web com HTML, CSS e Javascript

    9 de abril de 2013

    Sumrio i

    Sobre a K19 1

    Seguro Treinamento 2

    Termo de Uso 3

    Cursos 4

    1 Introduo 11.1 Client Side e Server Side . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11.2 HTML, CSS e Javascript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

    2 HTML 32.1 Estrutura Bsica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32.2 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42.3 Exerccios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52.4 Semntica HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52.5 Pargrafos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62.6 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72.7 Exerccios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72.8 Cabealhos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82.9 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92.10 Exerccios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112.11 Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112.12 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122.13 Exerccios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132.14 ncoras . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132.15 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142.16 Exerccios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162.17 Imagens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162.18 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172.19 Exerccios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

    www.facebook.com/k19treinamentos i

  • SUMRIO ii

    2.20 Tabelas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182.21 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222.22 Exerccios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232.23 Listas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232.24 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252.25 Exerccios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262.26 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272.27 Exerccios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282.28 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292.29 Exerccios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302.30 Formulrio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302.31 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 372.32 Exerccios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37

    3 CSS 393.1 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 423.2 Estrutura de uma regra CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 433.3 Tipos de seletores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 443.4 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 473.5 Cores em CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 483.6 Unidades de medida . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 483.7 Principais propriedades CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 493.8 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 513.9 Box model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 583.10 A propriedade display . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 603.11 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 613.12 Posicionando elementos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 653.13 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 663.14 Desafios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69

    4 JavaScript 714.1 Declarando e inicializando variveis em JavaScript . . . . . . . . . . . . . . . . . . . . . 714.2 Operadores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 714.3 Controle de fluxo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 744.4 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 754.5 Exerccios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 774.6 Funes JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 794.7 Objetos JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 804.8 Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 814.9 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 824.10 Exerccios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83

    A Javascript Avanado 85A.1 Objetos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85A.2 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89A.3 Exerccios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92A.4 Funes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92A.5 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94A.6 Exerccios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96A.7 Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96

    ii www.k19.com.br

  • iii SUMRIO

    A.8 Mtodos das Strings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99A.9 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100A.10 Exerccios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103

    B jQuery 105B.1 Introduo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105B.2 Sintaxe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106B.3 Seletores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106B.4 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107B.5 Exerccios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109B.6 Eventos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109B.7 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110B.8 Exerccios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112B.9 Efeitos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113B.10 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115B.11 Exerccios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117B.12 HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118B.13 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119B.14 Exerccios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121

    C HTML5 123C.1 article . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124C.2 section . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124C.3 header . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125C.4 footer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125C.5 nav . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126C.6 aside . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126C.7 figure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127C.8 figcaption . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127

    D CSS3 129D.1 Bordas arredondadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129D.2 Sombras . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130D.3 Transformaes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136D.4 Fontes no CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138

    E Mais Propriedades CSS 141E.1 Propriedades de tabela . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141E.2 Propriedades de borda . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142E.3 Propriedades de contedo gerado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143E.4 Propriedades de posicionamento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144

    F Quizzes 147

    G Respostas 149

    www.facebook.com/k19treinamentos iii

  • SUMRIO iv

    iv www.k19.com.br

  • 1 SUMRIO

    Sobre a K19

    A K19 uma empresa especializada na capacitao de desenvolvedores de software. Sua equipe composta por profissionais formados em Cincia da Computao pela Universidade de So Paulo(USP) e que possuem vasta experincia em treinamento de profissionais para rea de TI.

    O principal objetivo da K19 oferecer treinamentos de mxima qualidade e relacionados s prin-cipais tecnologias utilizadas pelas empresas. Atravs desses treinamentos, seus alunos se tornamcapacitados para atuar no mercado de trabalho.

    Visando a mxima qualidade, a K19 mantm as suas apostilas em constante renovao e melho-ria, oferece instalaes fsicas apropriadas para o ensino e seus instrutores esto sempre atualizadosdidtica e tecnicamente.

    www.facebook.com/k19treinamentos 1

  • SUMRIO 2

    Seguro Treinamento

    Na K19 o aluno faz o curso quantas vezes quiser!

    Comprometida com o aprendizado e com a satisfao dos seus alunos, a K19 a nica que pos-sui o Seguro Treinamento. Ao contratar um curso, o aluno poder refaz-lo quantas vezes desejarmediante a disponibilidade de vagas e pagamento da franquia do Seguro Treinamento.

    As vagas no preenchidas at um dia antes do incio de uma turma da K19 sero destinadas aoalunos que desejam utilizar o Seguro Treinamento. O valor da franquia para utilizar o Seguro Treina-mento 10% do valor total do curso.

    2 www.k19.com.br

  • 3 SUMRIO

    Termo de UsoTermo de Uso

    Todo o contedo desta apostila propriedade da K19 Treinamentos. A apostila pode ser utilizadalivremente para estudo pessoal . Alm disso, este material didtico pode ser utilizado como materialde apoio em cursos de ensino superior desde que a instituio correspondente seja reconhecida peloMEC (Ministrio da Educao) e que a K19 seja citada explicitamente como proprietria do material.

    proibida qualquer utilizao desse material que no se enquadre nas condies acima semo prvio consentimento formal, por escrito, da K19 Treinamentos. O uso indevido est sujeito smedidas legais cabveis.

    www.facebook.com/k19treinamentos 3

  • SUMRIO 4

    K01- Lgica de Programao

    K11 - Orientao a Objetos em Java

    K12 - Desenvolvimento Web com JSF2 e JPA2

    K21 - Persistncia com JPA2 e Hibernate

    K22 - Desenvolvimento Web Avanado com JFS2, EJB3.1 e CDI

    K23 - Integrao de Sistemas com Webservices, JMS e EJB

    K31 - C# e Orientao a Objetos

    K32 - Desenvolvimento Web com ASP.NET MVC

    TREINA

    MENT

    OS

    TREINAMENTOSTREINAMENTOS Conhea os nossos cursos

    www.k19.com.br/cursos

    K02 - Desenvolvimento Web com HTML, CSS e JavaScript

    K03 - SQL e Modelo Relacional

    K41 - Desenvolvimento Mobile com Android

    K51 - Design Patterns em Java

    K52 - Desenvolvimento Web com Struts

    4 www.k19.com.br

  • INTRODUO

    CA

    P

    TU

    LO

    1Durante muito tempo, a ideia de desenvolvimento web ficou associada apenas a construo de

    pginas que possuam somente o intuito de oferecer aos usurios o acesso a um determinado con-tedo. Porm, com a popularizao da internet, novas necessidades foram surgindo em diversasreas.

    Na rea de entretenimento, cada vez mais jogos online foram aparecendo. Diversas redes sociaisganharam foras graas grande interatividade permitida entre os usurios. Gravadoras de msicapassaram a vender seus ttulos atravs de canais especializados. No meio corporativo, as empresaspassaram a adotar sistemas web para controlar as suas tarefas administrativas. Enfim, necessidadesantes inexistentes surgiram em uma velocidade muito grande. Muitos sites deixaram de ser simplespginas para se tornarem verdadeiras aplicaes.

    H cerca de 15 anos, era muito comum que um nico desenvolvedor fosse responsvel por todoo desenvolvimento de uma aplicao web. Essa pessoa era chamada de webmaster. Com o passar dotempo, o papel do webmaster como era conhecido foi desaparecendo. A complexidade e volume detrabalho para o desenvolvimento de uma aplicao web se tornaram muito grande para apenas umapessoa ou at mesmo para um grupo pequeno de desenvolvedores (webmasters).

    Hoje, a funo de webmaster ainda existe mas com um papel um pouco diferente. Geralmente,esse profissional apesar de possuir bons conhecimentos nas diversas tecnologias utilizadas apenasgerencia o desenvolvimento que realizado por outros profissionais.

    Como as tarefas antes de responsabilidade do webmaster foram delegadas a outros profissionais,naturalmente, apareceram algumas especializaes. Essas especializaes podem ser classificadasem dois grupos: desenvolvedores front-end e back-end. Em geral os desenvolvedores front-end soresponsveis pela interface com a qual os usurios interagem enquanto os desenvolvedores back-end so responsveis pelo funcionamento interno das aplicaes.

    Client Side e Server Side

    Os usurios acessam a interface de uma aplicao web atravs de navegadores (browsers). Osdesenvolvedores front-end devem conhecer bem o funcionamento dos navegadores e das tecnolo-gias e linguagens relacionadas a eles. Essas tecnologias e linguagens so categorizadas como clientside. Atualmente, as principais linguagens e tecnologias client side so HTML, CSS, Javascript, AdobeFlash, Microsoft Silverlight e VBScript.

    Por outro lado, os desenvolvedores back-end trabalham com linguagens como Java, C#, VB.NET,PHP, Ruby, Python, SQL entre outras. Essas linguagens atuam do lado do servidor por isso so clas-sificadas como server side. Isso no significa que os desenvolvedores front-end no precisam co-nhecer as linguagens utilizadas pelo back-end e vice-versa. Na prtica, ocorre uma especializaodos profissionais em determinadas tecnologias que podem tender mais para o front-end ou para o

    www.facebook.com/k19treinamentos 1

  • INTRODUO 2

    back-end.

    HTML, CSS e Javascript

    Como acabamos de ver, as principais linguagens e tecnologias client side so HTML, CSS, Javas-cript, Adobe Flash, Microsoft Silverlight e VBScript. De todas elas as trs primeiras so as mais impor-tantes e atualmente esto em maior evidncia. Cada uma das trs linguagens possui um papel bemespecfico que podemos resumir da seguinte maneira: o cdigo HTML ser responsvel por provero contedo de uma pgina, o cdigo CSS cuidar da formatao visual do contedo apresentado e ocdigo Javascript permitir que as pginas possuam algum tipo de comportamento (inteligncia)e que alguma interao possa ser estabelecida com os usurios.

    Nos prximos captulos, discutiremos em detalhes cada uma dessas trs linguagens.

    2 www.k19.com.br

  • HTML

    CA

    P

    TU

    LO

    2Quando acessamos uma pgina web, estamos interessados na informao contida nessa pgina.

    Essa informao pode estar na forma de texto, imagem ou vdeo. Em geral, o contedo de uma p-gina web definido com a linguagem HTML (HyperText Markup Language). HTML uma linguagemde marcao originalmente proposta por Tim Berners-Lee no final da dcada de 1980. O objetivo doTim Barners-Lee era criar um mecanismo simples que pudesse ser utilizado por qualquer pessoa quequisesse disseminar documentos cientficos.

    Desde sua proposta at os dias de hoje, a linguagem HTML sofreu diversas alteraes. A cadaverso, novos recursos so adicionados e problemas corrigidos. A verso mais atual da especificaoda linguagem HTML a 5. Essa verso ainda no foi finalizada, ela est na fase de trabalho em pro-gresso (working draft). Porm, j existem navegadores implementando alguns dos novos recursosdo HTML5.

    As especificaes da linguagem HTML so publicadas pelo World Wide Web Consortium maisconhecido por sua sigla W3C. Alm do HTML, o W3C tambm responsvel por linguagens como oXML, o SVG e pela interface DOM (Document Object Model), por exemplo.

    Estrutura Bsica

    Um documento HTML composto por elementos que possuem uma tag, atributos, valores epossivelmente filhos que podem ser um texto simples ou outros elementos. Cada elemento deveobrigatoriamente possuir uma tag e ela deve ser definida entre parnteses angulares (< e >). Veja oexemplo:

    1 2 3 4 Exemplo da estrutura bsica de um documento HTML5 6 7 Ol mundo!8 9

    Cdigo HTML 2.1: Exemplo da estrutura bsica de um documento HTML

    www.facebook.com/k19treinamentos 3

  • HTML 4

    Figura 2.1: Exemplo da estrutura bsica de um documento HTML

    No exemplo acima, temos um elemento HTML representado pela tag p e um texto simples OlMundo! filho desse elemento.

    Exerccios de Fixao

    1 Na pasta Desktop do seu usurio, crie uma nova pasta com o seu primeiro nome. Dentro dessapasta, crie um diretrio chamado html. Para facilitar, utilize apenas letras minsculas em todas aspastas e arquivos que criarmos durante o curso.

    2 Agora, utilizando um editor de texto, crie um novo arquivo chamado ola-mundo.html e salve-odentro da pasta html. Em seguida, insira o seguinte cdigo dentro do arquivo ola-mundo.html:

    1 2 3 4 Exemplo da estrutura bsica de um documento HTML5 6 7 Ol mundo!8 9

    Cdigo HTML 2.2: ola-mundo.html

    4 www.k19.com.br

  • 5 HTML

    Abra o arquivo ola-mundo.html em um navegador e veja o resultado.

    Exerccios Complementares

    1 Crie uma pgina HTML que exiba o nome deste curso duas vezes.

    Semntica HTML

    De acordo com a especificao da linguagem HTML, cada elemento possui um propsito bemdefinido. Para o funcionamento correto das pginas de uma aplicao web, fundamental respeitaro propsito de cada elemento e utiliz-lo nas condies corretas. Muitos autores utilizam o termosemntica HTML ao se referirem ao uso correto dos elementos da linguagem HTML. Por exemplo:

    1 2 3 4 Exemplo de uso correto da semntica HTML5 6 7 Este um texto para mostrar o significado da tag p.8 9

    Cdigo HTML 2.4: Exemplo de uso correto da semntica HTML

    No exemplo acima, utilizamos o elemento p para definir um pargrafo. De acordo com a espe-cificao da linguagem HTML, esse elemento deve ser utilizado justamente para definir pargrafos.Portanto, ele foi aplicado corretamente. Agora, vejamos outro exemplo:

    1 2 3 4 Meus amigos - Site do Jonas - Criado pelo Jonas5 6 7 8 Rafael Cosentino9 [email protected] Scio fundador da K19 Treinamentos11 Av. Brigadeiro Faria Lima , 1571 - Jardim Paulistano - So Paulo , SP12 CEP 01452 -00113 1415 16 Marcelo Martins17 [email protected] Scio fundador da K19 Treinamentos19 Av. Brigadeiro Faria Lima , 1571 - Jardim Paulistano - So Paulo , SP20 CEP 01452 -00121 22 23

    Cdigo HTML 2.5: Exemplo de uso incorreto da semntica HTML

    Dessa vez, utilizamos o elemento address. De acordo com a especificao, o elemento address

    www.facebook.com/k19treinamentos 5

  • HTML 6

    deve ser utilizado para fornecer informaes de contato dos autores do documento ou da maior partedo documento. Normalmente, esse elemento aparece no incio ou no final das pginas.

    Se observarmos o exemplo mais atentamente, trata-se de uma pgina do site do Jonas (repareno ttulo da pgina). O autor da pgina o Jonas e no o Rafael ou o Marcelo. Portanto, o elementoaddress foi aplicado incorretamente. Alm disso, devemos evitar o uso desse elemento para infor-mar endereos postais a menos que essas informaes sejam relevantes para o documento.

    Pargrafos

    Os pargrafos dentro de um documento HTML, em geral, so definidos atravs do elemento p.Uma das principais caractersticas desse elemento que ele ocupa horizontalmente todo o espaodefinido pelo elemento pai. Esse o comportamento dos elementos de bloco que discutiremos commais detalhes posteriormente.

    Por enquanto, o importante sabermos que, devido ao comportamento de bloco do elemento p,o navegador ajustar o texto do pargrafo largura do elemento pai realizando todas as quebras delinha necessrias. Caso seja necessrio forar uma quebra de linha, podemos utilizar a elemento br.Confira o exemplo:

    1 2 3 4 Exemplo de quebra de linha em um pargrafo 5 6 7 Um texto bem longo. Longo mesmo! Este pargrafo serve para demonstrar8 o comportamento da quebra de linha automtica , ou seja , sem utilizar9 nenhum recurso para que a quebra ocorra.1011 J este pargrafo demonstra a quebra de linha forada.Percebeu?12 13

    Cdigo HTML 2.6: Exemplo de quebra de linha em um pargrafo

    6 www.k19.com.br

  • 7 HTML

    Figura 2.2: Exemplo de quebra de linha em um pargrafo

    Exerccios de Fixao

    3 Crie um novo documento HTML chamado p-quebra-de-linha.html na pasta html. Em seguida,abra esse arquivo em um navegador (se necessrio, redimensione a janela do navegador para verifi-car o comportamento da quebra de linha).

    1 2 3 4 Exemplo de quebra de linha em um pargrafo 5 6 7 Um texto bem longo. Longo mesmo! Este pargrafo serve para demonstrar8 o comportamento da quebra de linha automtica , ou seja , sem utilizar9 nenhum recurso para que a quebra ocorra.1011 J este pargrafo demonstra a quebra de linha forada.Percebeu?12 13

    Cdigo HTML 2.7: p-quebra-de-linha.html

    Exerccios Complementares

    www.facebook.com/k19treinamentos 7

  • HTML 8

    2 Crie um documento HTML e force uma quebra de linha em qualquer parte de um pargrafo.Dica: utilize o site www.lipsum.com para gerar um texto fictcio.

    Cabealhos

    Assim como em um livro, uma pgina HTML pode conter uma hierarquia de ttulos para estabe-lecer uma diviso de seu contedo. Para conseguirmos realizar essa tarefa devemos utilizar as tagsde cabealho h1, h2, h3, h4, h5 e h6.

    Os sufixos numricos de 1 a 6 indicam o nvel do ttulo dentro da hierarquia de ttulos do docu-mento. Veja o exemplo:

    1 2 3 4 Exemplo de cabealhos 5 6 7 Ttulo 18 Ttulo 29 Ttulo 310 Ttulo 411 Ttulo 512 Ttulo 613 14

    Cdigo HTML 2.9: Exemplo de cabealhos

    8 www.k19.com.br

  • 9 HTML

    Figura 2.3: Exemplo de cabealhos

    Perceba que cada nvel possui um tamanho diferente de fonte. Esse tamanho determinado pelonavegador e pode ser alterado atravs de regras CSS que veremos posteriormente.

    Devemos utilizar os cabealhos com cautela, pois eles so utilizados como parmetros de ran-queamento da pgina por diversos buscadores como Google, Yahoo e Bing, por exemplo. O usocorreto das tags de cabealho faz parte das tcnicas de SEO (Search Engine Optimization) que, comoo prprio nome j indica, so tcnicas que ajudam a melhorar o ranqueamento de pginas dentrodos buscadores.

    De acordo com as tcnicas de SEO devemos tomar os seguintes cuidados ao utilizarmos as tagsde cabealhos:

    Utilizar apenas uma tag por pgina.

    Utilizar no mximo duas tags por pgina.

    Exerccios de Fixao

    4 Crie um novo documento HTML chamado cabecalhos-1.html com o contedo abaixo na pastahtml. Em seguida, abra esse arquivo em um navegador.

    1

    www.facebook.com/k19treinamentos 9

  • HTML 10

    2 3 4 K02 - Desenvolvimento Web com HTML , CSS e Javascript 5 6 7 K02 - Desenvolvimento Web com HTML , CSS e Javascript 89 Atualmente , praticamente todos os sistemas corporativos possuem10 interfaces web. Para quem deseja atuar no mercado de desenvolvimento11 de software , obrigatrio o conhecimento das linguagens: HTML , CSS12 e JavaScript.1314 Essas linguagens so utilizadas para o desenvolvimento da camada de15 apresentao das aplicaes web.1617 Pr -requisitos 1819 Familiaridade com algum sistema operacional (Windows/Linux/Mac OS X)20 Lgica de programao 2122 Agenda 2324 Aos domingos 2526 xx/xx/xxxx das 08:00 s 14:0027 xx/xx/xxxx das 14:00 s 20:002829 Aos sbados 3031 xx/xx/xxxx das 08:00 s 14:0032 xx/xx/xxxx das 14:00 s 20:0033 34

    Cdigo HTML 2.10: cabecalhos-1.html

    5 Imagine que voc possua um site de culinria no qual voc disponibiliza algumas receitas. Crieuma pgina com uma receita fictcia utilizando cabealhos para organizar contedo. Utilize quantosnveis de ttulo achar necessrio.

    1 2 3 4 Como preparar um delicioso macarro instantneo em 6 min.5 6 7 Como preparar um delicioso macarro instantneo em 6 min.89 Com esta receita voc se tornar um profissional na arte de10 preparar um macarro instantneo.1112 Ingredientes 1314 Macarro instantneo de sua marca favorita 15 600ml de gua1617 Modo de preparo 1819 No microondas 2021 Insira o macarro instantneo em um recipiente com 600ml de gua e22 programe o microondas por 6 minutos. Aperto o boto iniciar ou23 equivalente.2425 Ponto importante 26

    10 www.k19.com.br

  • 11 HTML

    27 Utilize um recipiente que permita o macarro ficar totalmente submerso28 na gua.29 Quando ouvir o bip no saia correndo. O microondas no ir explodir ,30 pois o bip significa que o macarro est pronto.3132 No fogo3334 Ferva a gua em uma panela.35 Insira o macarro e cozinhe -o por 3 minutos 3637 Ponto importante 3839 Utilize uma panela que permita o macarro ficar totalmente submerso40 na gua.41 No se distraia com a televiso ou qualquer outra coisa. Voc poder42 queimar a sua refeio 43 44

    Cdigo HTML 2.11: receita.html

    Exerccios Complementares

    3 Utilizando as tags de cabealho, crie uma pgina HTML que exiba hierarquicamente o nome euma curiosidade de alguns continentes, pases, estados (provncias) e cidades.

    4 Utilizando as tags de cabealho, crie uma pgina de um produto e suas especificaes, observa-es e ou comentrios. Utilize quantos nveis de ttulo achar necessrio.

    Links

    Normalmente, um site formado por um conjunto de pginas que esto interligadas de algumaforma. Para permitir que um usurio navegue de uma pgina para outra, devemos utilizar os links.Um link pode fazer a ligao de uma pgina para outra do mesmo site (link interno) ou para umapgina de outro site (link externo).

    Para criarmos um link, devemos utilizar a tag a. Porm, essa tag sem atributos no criar nenhumlink interno ou externo. Para que um link seja criado, devemos, no mnimo, utilizar o atributo hrefcom o caminho relativo ou absoluto de uma outra pgina. Veja o exemplo:

    1 2 3 4 Exemplo de uso da tag a5 6 7 Exemplo de link relativo 8 Outro exemplo de link relativo 9 Exemplo de link absoluto 10 11

    Cdigo HTML 2.14: Exemplo de uso da tag a

    www.facebook.com/k19treinamentos 11

  • HTML 12

    Alm do atributo href, podemos utilizar o atributo target para informar onde o documentodeve ser aberto. Os possveis valores para o atributo target so:

    _blank - em uma nova janela ou aba

    _self - na mesma janela ou frame do documento que contm o link

    _parent - em um frame que seja o pai do frame no qual o link se encontra

    _top - na mesma janela do documento que contm o link

    Ao testar os valores acima, logo percebemos que _self e _top possuem o mesmo comporta-mento se a pgina que contm o link no estiver em um frame. Caso o link esteja em um frame ecom o valor _top no atributo target, o link ser aberto na janela na qual o frame se encontra. Se ovalor for _self, o link ser aberto no prprio frame.

    Dentro de uma nica pgina podemos ter diversos frames e, s vezes, queremos que um link deum determinado frame seja aberto em outro. Para realizarmos tal tarefa devemos inserir como ovalor do atributo target o nome do frame no qual o link ser aberto.

    O comportamento padro de um link abrir o documento na mesma pgina ou frame caso oatributo target no seja utilizado.

    1 2 3 4 Exemplo de uso da tag a com o atributo target 5 6 7 Abre em outra janela/aba8 Abre na mesma janela 9 Abre na mesma janela 10 11

    Cdigo HTML 2.15: Exemplo de uso da tag a com o atributo target

    ImportanteAo longo da evoluo do HTML, a tag frame foi caindo em desuso at que no HTML5 foitotalmente retirada da especificao. Contudo a grande maioria dos navegadores ainda

    interpretam a tag corretamente mesmo dentro de um documento HTML5. Porm, devemosnos lembrar que ainda estamos num momento de transio para o HTML5. Logo, para evitarproblemas no futuro, evite o uso da tag frame ao mximo.

    Exerccios de Fixao

    6 Crie dois documentos HTML em arquivos chamados pagina1.html e pagina2.html dentro dapasta html e em seu corpo crie quatro links: um que aponte para uma pgina externa e outros trsque apontem para uma pgina interna de maneiras diferentes. Lembre-se de criar tambm a pginapara a qual o seu link interno ir apontar.

    12 www.k19.com.br

  • 13 HTML

    1 2 3 4 Exemplo de uso da tag a com o atributo target 5 6 7 Link externo 8 Link interno 9 Link interno 10 Link interno 11 12

    Cdigo HTML 2.16: pagina1.html

    1 2 3 4 Exemplo de uso da tag a com o atributo target 5 6 7 Pgina 28 9

    Cdigo HTML 2.17: pagina2.html

    Exerccios Complementares

    5 Crie vrios links em uma pgina e para cada link escolha um target diferente. Crie tambmquantas pginas de destino forem necessrias (caso seja necessrio).

    6 Pesquise na internet como criar um iframe dentro de um documento HTML. Em seguida, crieuma pgina com alguns links e um iframe. Crie tambm alguns links na pgina contida no iframe.Para cada link em ambas as pginas, utilize valores diferentes para o atributo target e observe osresultados.

    ncoras

    Alm de criar links para outras pginas, podemos criar links para uma determinada seo dentroda prpria pgina na qual o link se encontra ou dentro de outra pgina. Esse recurso chama-seancoragem, pois as sees para as quais queremos criar um link devem possuir uma ncora.

    Para criarmos uma ncora devemos utilizar novamente a tag a, porm sem o atributo href. Dessavez utilizaremos o atributo name para identificar a seo atravs de um nome.

    O link tambm muda levemente, pois agora ao invs de passar somente o nome do arquivo dapgina como valor do atributo href devemos passar o nome da seo prefixada com o caractere #.

    1 2 3

    www.facebook.com/k19treinamentos 13

  • HTML 14

    4 Exemplo de uso da tag a como ncora 5 6 7 Veja mais informaes 8 ncora em outra pgina 9 ...10 ...11 ...1213 Mais informaes 1415 16 ...17 ...18 ...19 20 21

    Cdigo HTML 2.22: Exemplo de uso da tag a como ncora

    Lembre-seAt a verso 4 do HTML e no XHTML, a especificao dizia para utilizarmos o atributoname da tag a para criarmos as ncoras. Porm, no HTML5, a recomendao do W3C que o atributo id seja utilizado para tal propsito. Desenvolvedores mais preocupados

    em estar sempre atualizados podem ficar tranquilos e utilizar somente o atributo id ao invs doname, pois os navegadores mais modernos conseguem interpretar o uso de ambos os atributosem qualquer verso do HTML.

    Exerccios de Fixao

    7 Crie um documento HTML em um arquivo chamado ancora-pagina1.html na pasta html quecontenha um link que aponta para uma ncora dentro da prpria pgina. Dica: insira um contedosuficientemente grande para que a barra de rolagem vertical do navegador aparea e coloque a n-cora no final da pgina.

    1 2 3 4 Exerccio sobre ncoras 5 6 7 Sobre o texto dessa pgina 89 Lorem ipsum dolor sit amet , consectetur adipiscing elit. Donec justo10 massa , sodales sit amet eleifend a, elementum eu nibh. Donec egestas dolor11 quis turpis dictum tincidunt. Donec blandit tempus velit , sit amet12 adipiscing velit consequat placerat. Curabitur id mauris.13 ... 14 ... 15 ... 1617 At nisi imperdiet lacinia. Ut quis arcu at nisl ornare viverra.18 Duis vel tristique tellus. Maecenas ultrices placerat tortor. Pellentesque feugiat19 accumsan commodo. Proin non urna justo , id pulvinar lacus.20

    14 www.k19.com.br

  • 15 HTML

    21 Sobre o texto dessa pgina 22 O texto dessa pgina foi gerado atravs do site:23 http ://www.lipsum.com/24 25

    Cdigo HTML 2.23: ancora-pagina1.html

    8 Crie um novo arquivo chamado ancora-pagina2.html na pasta html com um ncora chamadaoutra_ancora. Dica: insira um contedo suficientemente grande para que a barra de rolagem verti-cal do navegador aparea e coloque a ncora no final da pgina.

    1 2 3 4 Exerccio sobre ncoras 5 6 7 Ancora pgina 289 Lorem ipsum dolor sit amet , consectetur adipiscing elit. Donec justo10 massa , sodales sit amet eleifend a, elementum eu nibh. Donec egestas dolor11 quis turpis dictum tincidunt. Donec blandit tempus velit , sit amet12 adipiscing velit consequat placerat. Curabitur id mauris 13 ... 14 ... 15 ... 1617 at nisi imperdiet lacinia. Ut quis arcu at nisl ornare viverra.18 Duis vel tristique tellus. Maecenas ultrices placerat tortor. Pellentesque feugiat19 accumsan commodo. Proin non urna justo , id pulvinar lacus.2021 Mais uma ncora 2223 Se voc chegou aqui deu tudo certo! :)24 25

    Cdigo HTML 2.24: ancora-pagina2.html

    9 Crie um novo link no arquivo ancora-pagina1.html que aponte para ncora outra_ancora doarquivo ancora-pagina2.html.

    1 2 3 4 Exerccio sobre ncoras 5 6 7 Sobre o texto dessa pgina 8 ncora em outra pgina 910 Lorem ipsum dolor sit amet , consectetur adipiscing elit. Donec justo11 massa , sodales sit amet eleifend a, elementum eu nibh. Donec egestas dolor12 quis turpis dictum tincidunt. Donec blandit tempus velit , sit amet13 adipiscing velit consequat placerat. Curabitur id mauris.14 ... 15 ... 16 ... 1718 At nisi imperdiet lacinia. Ut quis arcu at nisl ornare viverra.19 Duis vel tristique tellus. Maecenas ultrices placerat tortor. Pellentesque feugiat20 accumsan commodo. Proin non urna justo , id pulvinar lacus.

    www.facebook.com/k19treinamentos 15

  • HTML 16

    2122 Sobre o texto dessa pgina 23 O texto dessa pgina foi gerado atravs do site:24 http ://www.lipsum.com/25 26

    Cdigo HTML 2.25: ancora-pagina1.html

    Exerccios Complementares

    7 Crie dois documentos HTML. No primeiro crie um link que aponte para o site da K19 e tambmcoloque um texto qualquer. Em qualquer ponto deste texto, crie uma ncora. No segundo docu-mento crie um link que aponte para a ncora criada no primeiro documento, coloque tambm umlink qualquer ou um texto.

    8 Dentro de um documento HTML crie trs links. Dois devem apontar para ncoras de pginasexternas e o ltimo link deve aparecer no final da pgina e apontar para uma ncora no topo daprpria pgina.

    Imagens

    Certamente, os sites na internet seriam muito entediantes se no fosse possvel adicionar ima-gens ao contedo das pginas. Como no queremos que as nossas pginas fiquem muito monto-nas, neste captulo, utilizaremos a tag img para melhorar um pouco a aparncia das pginas comalgumas imagens.

    A tag img possui o atributo src que utilizaremos para informar qual imagem queremos carregardentro de um documento HTML. O valor do atributo pode ser o caminho absoluto ou relativo deuma imagem.

    1 2 3 4 Exemplo de uso da tag img5 6 7 K19 Treinamentos 8 910 Cursos 11 12 13 K01 - Lgica de Programao14 15 16 17 K02 - Desenvolvimento Web com HTML , CSS e JavaScript18 19 20 21 K03 - SQL e Modelo Relacional22

    16 www.k19.com.br

  • 17 HTML

    23 24 25 K11 - Orientao a Objetos em Java26 27 28 29 K12 - Desenvolvimento Web com JSF2 e JPA230 31 ...32 ...33 ...34 35

    Cdigo HTML 2.29: Exemplo de uso da tag img

    Figura 2.4: Exemplo de uso da tag img

    Exerccios de Fixao

    10 Crie um documento HTML em um arquivo chamado imagem.html na pasta html que contenhaalguns elementos IMG.

    1 2 3 4 Exemplo de uso da tag img5

    www.facebook.com/k19treinamentos 17

  • HTML 18

    6 7 K19 Treinamentos 8 910 Cursos 11 12 13 K01 - Lgica de Programao14 15 16 17 K02 - Desenvolvimento Web com HTML , CSS e JavaScript18 19 20 21 K03 - SQL e Modelo Relacional22 23 24

    Cdigo HTML 2.30: imagem.html

    Exerccios Complementares

    9 Em um documento HTML insira no mnimo duas imagens utilizando o elemento IMG.

    Tabelas

    Suponha que voc esteja desenvolvendo o site de uma empresa e precisa apresentar alguns rela-trios em pginas HTML. Considere que os dados desses relatrios so obtidos de planilhas eletr-nicas. Da surge a necessidade de definir dados de forma tabular em HTML.

    Para resolver esse problema, podemos utilizar o elemento table do HTML. Esse elemento per-mite apresentar um conjunto de dados na forma de tabelas. Veja o exemplo:

    1 2 3 4 Exemplo de uso da tag table5 6 7 Carros 89 10 11 Marca12 Modelo 13 Ano14 15 16 Toyota 17 Corolla 18 201019 20 21 Honda22 Civic23 2011

    18 www.k19.com.br

  • 19 HTML

    24 25 26 Mitsubishi 27 Lancer 28 201229 30 31 ltima atualizao: 06/2012 32 33 34 35

    Cdigo HTML 2.32: Exemplo de uso da tag table

    Figura 2.5: Exemplo de uso da tag table

    Perceba que a tag table no utilizada sozinha. Ela necessita de pelo menos um ou mais ele-mentos tr que, por sua vez, necessitam de pelo menos um ou mais elementos th ou td.

    O que significam essas tags?

    tr - define uma linha da tabela

    th - define uma clula de cabealho

    td - define uma clula

    Existe uma outra forma de criar a mesma tabela:

    1

    www.facebook.com/k19treinamentos 19

  • HTML 20

    2 3 4 Exemplo de uso da tag table5 6 7 Carros 89 10 11 12 Marca13 Modelo 14 Ano15 16 17 18 19 ltima atualizao: 06/2012 20 21 22 23 24 Toyota 25 Corolla 26 201027 28 29 Honda30 Civic31 201132 33 34 Mitsubishi 35 Lancer 36 201237 38 39 40 41

    Cdigo HTML 2.33: Exemplo de uso da tag table

    20 www.k19.com.br

  • 21 HTML

    Figura 2.6: Exemplo de uso da tag table

    Repare que visualmente no mudou absolutamente nada. Alm disso, apareceram mais algumastags: thead, tfoot e tbody.

    O que significam essas tags?

    thead - define o cabealho da tabela

    tfoot - define o rodap da tabela

    tbody - define o corpo da tabela

    Por que complicar? Qual o motivo da existncia dessas tags?

    A tag thead, assim como a tfoot, servem para agrupar as linhas de cabealho e de rodap,respectivamente.

    O cdigo fica mais claro.

    Facilita a aplicao de estilos CSS (atravs do seletor de elemento)

    Pode permitir que o contedo do corpo da tabela possua rolagem*.

    Ao imprimir a pgina com uma tabela muito extensa, pode permitir que o cabealho e rodapsejam replicados em todas as pginas*.

    * Esses recursos podem existir ou no, pois os desenvolvedores de navegadores podem decidirno implement-los. Esses recursos so sugestes da especificao.

    www.facebook.com/k19treinamentos 21

  • HTML 22

    Outros dois atributos importantes para a construo de tabelas so colspan e rowspan que po-dem ser aplicados nos elementos td e th.

    Como podemos observar nos exemplos dados, o atributo colspan faz com que a clula ignore onmero de colunas definidas em seu valor. Analogamente, o atributo rowspan faz o mesmo, pormcom linhas.

    Exerccios de Fixao

    11 Crie uma pgina HTML em um arquivo chamado tabela.html na pasta html que contenha umatabela de acordo com a imagem abaixo:

    Figura 2.7: Exerccio para a tag table

    As linhas vermelhas foram colocadas na imagem apenas para facilitar a visualizao do pro-blema.

    1 2 3 4 Exerccio para a tag table5 6 7 8 9

    22 www.k19.com.br

  • 23 HTML

    10 Marca11 Modelo 12 Ano13 14 15 16 17 ltima atualizao: 06/2012 18 19 20 21 22 Toyota 23 Corolla 24 201025 26 27 Camry28 201129 3031 32 Honda33 Civic34 200435 36 37 Fit38 201239 40 41 City42 201143 4445 46 Mitsubishi 47 Lancer 48 201249 50 51 52 53

    Cdigo HTML 2.34: tabela.html

    Exerccios Complementares

    10 Crie em um documento HTML uma tabela que contenha o continente/subcontinente, o nomee o idioma de algumas cidades do mundo.

    Listas

    Em um documento HTML podemos ter trs tipos de listas e cada uma delas deve ser utilizada deacordo com a sua semntica, ou seja, voc deve escolher um tipo de lista para cada situao.

    Os trs tipos possveis de listas so:

    www.facebook.com/k19treinamentos 23

  • HTML 24

    Lista de definio - utilizada para exibir definies de termos. Funciona como nos dicionrios,no qual temos uma palavra e em seguida o seu significado.

    Lista ordenada - utilizada para exibir qualquer contedo de forma ordenada.

    Lista sem ordem - utilizada para exibir qualquer contedo sem ordenao.

    Lista de definio

    Para criarmos uma lista de definio devemos utilizar a tag dl. O elemento dl deve possuir pelomenos um elemento filho dt seguido de um elemento dd. Um item em uma lista de definio composto por um par de elementos dt e dd.

    1 2 3 4 Exemplo de uso da tag dl5 6 7 Cursos - K19 Treinamentos 89 10 K01 - Lgica de Programao 11 12 Conhecimentos em Lgica de Programao o pr -requisito fundamental13 para que uma pessoa consiga aprender qualquer Linguagem de Programao ...14 15 K02 - Desenvolvimento Web com HTML , CSS e JavaScript 16 17 Atualmente , praticamente todos os sistemas corporativos possuem18 interfaces web. Para quem deseja atuar no mercado de desenvolvimento ...19 20 K03 - SQL e Modelo Relacional 21 22 Como as aplicaes corporativas necessitam armazenar dados fundamental23 que os desenvolvedores possuam conhecimentos sobre persistncia de dados.24 25 26 27

    Cdigo HTML 2.36: Exemplo de uso da tag dl

    24 www.k19.com.br

  • 25 HTML

    Figura 2.8: Exemplo de uso da tag dl

    Exerccios de Fixao

    12 Crie um documento HTML em um arquivo chamado restaurante.html na pasta html que con-tenha o cardpio de um restaurante com os nomes dos seus pratos e uma breve descrio sobre osmesmos.

    1 2 3 4 Menu - K19 Pizzaria 5 6 7 Menu - K19 Pizzaria 89 10 moda da casa11 12 Presunto coberto com mussarela , ovos e palmito.13 14 moda do pizzaiolo 15 16 Mussarela , presunto , ovos e bacon.17 18 Aliche 19 20 Aliche , parmeso e rodelas de tomate.21

    www.facebook.com/k19treinamentos 25

  • HTML 26

    22 23 24

    Cdigo HTML 2.37: restaurante.html

    Exerccios Complementares

    11 Crie um documento HTML que contenha uma lista de alguns pontos tursticos do Brasil de quevoc tenha conhecimento e cite algumas atraes do mesmo.

    Lista ordenada

    Para criarmos uma lista ordenada, devemos utilizar a tag ol. O elemento ol deve possuir pelomenos um elemento filho li.

    1 2 3 4 Exemplo de uso da tag ol5 6 7 Macarro instantneo - K19 Receitas 8 Modo de preparo 910 11 Ferver 600ml de gua em uma panela.12 Retirar o macarro do pacote.13 Colocar o macarro na panela no fogo baixo.14 Cozinhar o macarro por 3min.15 Temperar a gosto.16 17 18

    Cdigo HTML 2.39: Exemplo de uso da tag ol

    26 www.k19.com.br

  • 27 HTML

    Figura 2.9: Exemplo de uso da tag ol

    Exerccios de Fixao

    13 Crie um documento HTML em um arquivo chamado manual.html na pasta html que contenhaum manual que explica passo-a-passo o uso de um caixa eletrnico para a operao de saque.

    1 2 3 4 Operao de saque - Manual do caixa eletrnico - K19 Bank5 6 7 Operao de saque - Manual do caixa eletrnico - K19 Bank89 10 Insira o carto 11 Digite a senha12 Escolha a opo de saque13 Informe o valor que deseja sacar14 Insira o carto novamente 15 Aguarde at a liberao do dinheiro 16 17 18

    Cdigo HTML 2.40: manual.html

    www.facebook.com/k19treinamentos 27

  • HTML 28

    Exerccios Complementares

    12 Crie um documento HTML que contenha um manual que explique passo-a-passo a instalao,manuteno ou manuseio de um aparelho eletrnico.

    Lista sem ordem

    Para criarmos uma lista sem ordem, devemos utilizar a tag ul. O elemento ul deve possuir pelomenos um elemento filho li.

    1 2 3 4 Exemplo de uso da tag dl5 6 7 K02 - Desenvolvimento Web com HTML , CSS e JavaScript 8 Pr -requisitos 910 11 Conhecimento de algum sistema operacional (Windows/Linux/MacOS X)12 Lgica de programao 13 14 15

    Cdigo HTML 2.42: Exemplo de uso da tag ul

    28 www.k19.com.br

  • 29 HTML

    Figura 2.10: Exemplo de uso da tag ul

    Exerccios de Fixao

    14 Crie um documento HTML em um arquivo chamado lista-curso.html na pasta html que con-tenha a lista dos cursos da Formao Bsica da K19.

    1 2 3 4 K00 - Formao Bsica - K19 Treinamentos 5 6 7 8 K00 - Formao Bsica 910 11 K01 - Lgica de Programao 12 K02 - Desenvolvimento Web com HTML , CSS e JavaScript 13 K03 - SQL e Modelo Relacional 14 15 16 17

    Cdigo HTML 2.43: lista-cursos.html

    www.facebook.com/k19treinamentos 29

  • HTML 30

    Exerccios Complementares

    13 Crie um documento HTML que contenha a lista dos cursos da Formao Desenvolvedor Java daK19.

    Formulrio

    Para trazermos um pouco mais de interatividade para as nossas pginas, podemos utilizar oselementos de formulrio. Esses elementos recebem algum tipo de entrada do usurio, seja atravsde um clique ou digitando algum valor.

    A tag input

    A tag input permite que o elemento que a contenha assuma diversas formas dependendo do seuatributo type. O atributo type pode receber os seguintes valores:

    text - cria uma caixa de texto de uma linha.

    password - cria uma caixa de texto de uma linha escondendo os caracteres digitados.

    checkbox - cria uma caixa que assume dois estados: checado e "deschecado". Em conjuntocom o atributo name possvel que se crie um grupo de checkboxes no qual um ou mais check-boxes seja "checado".

    radio - cria uma caixa que assume dois estados: checado e "deschecado". Em conjunto como atributo name possvel que se crie um grupo de radios no qual apenas um radio seja "che-cado".

    button - cria um boto. Atravs do atributo value definimos o texto do boto.

    submit - cria um boto para o envio do formulrio. Atravs do atributo value definimos o textodo boto.

    file - cria um boto que, ao ser clicado, abre uma caixa de dilogo para a escolha de um arquivono computador do usurio.

    reset - cria um boto que descarta todas as alteraes feitas dentro de um formulrio. Atravsdo atributo value definimos o texto do boto.

    image - cria um boto para o envio do formulrio. Dese ser utilizado em conjunto com o atri-buto src para que uma imagem de fundo seja utilizada no boto.

    hidden - cria um elemento que no fica visvel para o usurio, porm pode conter um valorque ser enviado pelo formulrio.

    Existem outros valores possveis para o atributo type, porm eles fazem parte da especificaodo HTML5 e nem todos os navegadores suportam tais valores.

    1 2 3 4 Exemplo de uso da tag input5 6

    30 www.k19.com.br

  • 31 HTML

    7 8 9 text:10 11 12 13 password:14 15 16 17 checkboxes:18 19 20 21 22 23 radios:24 25 26 27 28 29 button:30 31 32 33 submit:34 35 36 37 file:38 39 40 41 reset:42 43 44 45 image:46 48 49 50 hidden:51 52 53 54 55

    Cdigo HTML 2.45: Exemplo de uso da tag input

    www.facebook.com/k19treinamentos 31

  • HTML 32

    Figura 2.11: Exemplo de uso da tag input

    A tag select

    A tag select permite ao usurio escolher um ou mais itens de uma lista. O atributo multiple,quando presente, informa ao navegador que mais de um item pode ser selecionado.

    A lista de itens deve ser informada atravs de elementos option. Tais elementos devem ser filhosdiretos ou indiretos de elementos select. Alm disso, cada item pode conter o atributo chamadovalue para informar o valor associado a uma determinada opo.

    1 2 3 4 Exemplo de uso da tag select 5 6 7 8 9 Selecione uma cidade:10 11 So Paulo12 Rio de Janeiro 13 Porto Alegre 14 Curitiba 15 16 1718 19 Selecione uma ou mais categorias de produtos (mantenha a tecla20 "control" (ou "command" no Mac) pressionada para escolher mais de uma21 categoria):22

    32 www.k19.com.br

  • 33 HTML

    23 Desktops 24 Notebooks 25 Tablets 26 Celulares 27 28 29 30 31

    Cdigo HTML 2.46: Exemplo de uso da tag select

    Figura 2.12: Exemplo de uso da tag select

    Caso exista a necessidade de agrupar as opes de um elemento select, podemos utilizar o ele-mento optgroup em conjunto com o atributo label. Veja o exemplo:

    1 2 3 4 Exemplo de uso da tag select 5 6 7 8 9 Selecione uma cidade:10 11 12 So Paulo13 Rio de Janeiro 14 15 16 Porto Alegre

    www.facebook.com/k19treinamentos 33

  • HTML 34

    17 Curitiba 18 19 20 2122 23 Selecione uma ou mais categorias de produtos (mantenha a tecla24 "control" (ou "command" no Mac) pressionada para escolher mais de uma25 categoria):26 27 28 Desktops 29 30 31 Notebooks 32 Tablets 33 Celulares 34 35 36 37 38 39

    Cdigo HTML 2.47: Exemplo de uso da tag select

    Figura 2.13: Exemplo de uso da tag select

    A tag textarea

    A tag textarea exibe uma caixa de texto na qual o usurio poder inserir um texto qualquer. Adiferena para a tag input com o atributo type com o valor text que a tag textarea permite ainsero de textos mais longos e com quebras de linha.

    34 www.k19.com.br

  • 35 HTML

    1 2 3 4 Exemplo de uso da tag textarea 5 6 7 8 9 textarea:10 11 12 13 14 15

    Cdigo HTML 2.48: Exemplo de uso da tag textarea

    Figura 2.14: Exemplo de uso da tag textarea

    A tag label

    Em alguns dos exemplos anteriores foram inseridos textos ao lado dos elementos de formulrioapresentados. Podemos pensar nesses textos como rtulos de cada elemento e exatamente paraesse fim que devemos utilizar a tag label do HTML.

    Alm de servir como rtulo, a tag label auxilia o usurio a interagir com os elementos do formu-lrio. Utilizando o atributo for podemos fazer com que um elemento do formulrio receba o foco.Veja o exemplo:

    1

    www.facebook.com/k19treinamentos 35

  • HTML 36

    2 3 4 Exemplo de uso da tag label5 6 7 8 9 Nome:10 11 12 13 14

    Cdigo HTML 2.49: Exemplo de uso da tag label

    Figura 2.15: Exemplo de uso da tag label

    Repare que o atributo for da tag label deve conter um valor igual ao do atributo id do elementoque desejamos focar.

    A tag form

    Desde o momento em que comeamos a falar sobre os elementos de formulrio utilizamos a tagform, porm no falamos nada sobre ela. A tag form ir definir, de fato, o nosso formulrio. Todosos elementos de formulrio que vimos anteriormente devem ser filhos diretos ou indiretos de umelemento com a tag form para que os dados vinculados a esses elementos sejam enviados.

    O papel do formulrio enviar os dados contidos nele para algum lugar, mas para onde? O atri-buto action quem diz para onde os dados de um formulrio deve ser enviado. Alm disso, devemos

    36 www.k19.com.br

  • 37 HTML

    informar a maneira como queremos que esses dados sejam enviados, ou seja, se queremos que elessejam enviados atravs de uma requisio do tipo GET ou POST (mtodos de envio definidos noprotocolo HTTP).

    Exerccios de Fixao

    15 Crie um documento HTML em um arquivo chamado formulario.html na pasta html com diver-sos elementos de formulrio e para cada elemento crie um rtulo. Cada rtulo deve focar o elementode formulrio correspondente.

    1 2 3 4 A tag label e os elementos de formulrio 5 6 7 8 9 Nome:10 11 12 13 Senha:14 15 16 17 Sexo:18 19 Masculino 20 21 Feminino 22 23 24 Mensagem:25 26 27 28 29

    Cdigo HTML 2.50: formulario.html

    Exerccios Complementares

    14 Em um documento HTML, crie um formulrio que utilize as tags input, select, label e textarea.Tente utilizar todos os tipos do elemento input vistos neste captulo.

    www.facebook.com/k19treinamentos 37

  • HTML 38

    38 www.k19.com.br

  • CSS

    CA

    P

    TU

    LO

    3At o momento, utilizamos os elementos HTML sem modificar a forma de exibio dos mesmos.

    Nos exemplos mostrados no Captulo 2, os elementos foram exibidos com a formatao padro de-finida pelo navegador utilizado.

    A formatao padro pode variar de navegador para navegador. Em geral, os navegadores tentamseguir as sugestes do W3C. Mas, algumas vezes, erros de interpretao da especificao ou erros deimplementao podem ocorrer. Alm disso, o W3C pode apenas sugerir, ele no possui o poder deobrigar que todos os navegadores tenham o mesmo comportamento. Portanto, uma boa prticaformatarmos cada elemento para que o efeito visual seja o mesmo em todos os navegadores. E esseno o nico motivo, pois na grande maioria das vezes, desejamos aplicar em nossas pginas umdesign nico, com a identidade visual da nossa empresa ou cliente.

    Os elementos HTML possuem alguns atributos para formatarmos a sua aparncia. Porm, almde serem limitados, o uso desses atributos esto caindo em desuso. Inclusive, existem elementoscuja nica funo alterar a aparncia de um texto, por exemplo. Contudo, esses elementos tambmcaram em desuso e provavelmente no estaro nas prximas especificaes do HTML.

    Para alterarmos o aspecto visual dos elementos do HTML, o W3C recomenda que utilizemos oCSS (Cascading Style Sheets - Folhas de Estilo em Cascata). Atualmente o CSS encontra-se em suaterceira verso. Porm, nem todos os navegadores implementaram todos os novos recursos.

    Podemos aplicar o CSS de trs formas em um documento HTML:

    Definindo as propriedades CSS diretamente no elemento HTML atravs do seu atributo style.

    Definindo as regras CSS dentro de um elemento com a tag style.

    Definindo as regras CSS em arquivo parte do documento HTML.

    Mas o que so essas regras e propriedades? Como elas so definidas?

    Propriedade CSS uma caracterstica visual de um elemento HTML. J a regra um conjunto depropriedades definidas para um elemento ou para um grupo de elementos HTML.

    Vamos ver um exemplo de aplicao das propriedades CSS diretamente em um elemento HTML:

    1 2 3 4 Exemplo de CSS diretamente em um elemento 5 6 7 Ol mundo!8 Ol mundo novamente!9 10

    Cdigo HTML 3.1: Exemplo de aplicao das propriedades CSS inline

    www.facebook.com/k19treinamentos 39

  • CSS 40

    Figura 3.1: Exemplo de aplicao das propriedades CSS inline

    Quando aplicamos as propriedades CSS diretamente a um elemento atravs da propriedadestyle, estamos utilizando a abordagem CSS inline. Essa prtica no recomendada, pois dessaforma no possvel reaproveitar o cdigo CSS, alm de dificultar a leitura do cdigo HTML.

    Vamos ver agora a aplicao das regras CSS utilizando a tag style:

    1 2 3 4 Exemplo de aplicao das regras CSS atravs da tag style5 6 p {7 font -size: 40px;8 color: #ff0000;9 }10 11 12 13 Ol mundo!14 Ol mundo novamente!15 16

    Cdigo HTML 3.2: Exemplo de aplicao das regras CSS atravs da tag style

    40 www.k19.com.br

  • 41 CSS

    Figura 3.2: Exemplo de aplicao das regras CSS atravs da tag style

    Como vimos anteriormente, tambm podemos definir as regras CSS em um arquivo parte. Comesse arquivo em mos, dentro de um documento HTML, para indicarmos qual o arquivo que contmas regras CSS, devemos utilizar a tag link. Veja o exemplo:

    1 2 3 4 Exemplo de aplicao das regras CSS atravs de um arquivo 5 6 7 8 Ol mundo!9 Ol mundo novamente!10 11

    Cdigo HTML 3.3: Exemplo de aplicao das regras CSS atravs de um arquivo

    1 p {2 font -size: 40px;3 color: #ff0000;4 }

    Cdigo CSS 3.1: estilo.css

    www.facebook.com/k19treinamentos 41

  • CSS 42

    Figura 3.3: Exemplo de aplicao das regras CSS atravs de um arquivo

    Perceba que o efeito foi o mesmo de quando aplicamos as regras CSS atravs da tag style. Issose deve ao fato de estarmos utilizando a mesma regra. O que mudamos foi apenas onde a definimos.

    Exerccios de Fixao

    1 Dentro da pasta com o seu nome utilizada no captulo anterior, crie uma subpasta chamadacss. Novamente para facilitar, utilize apenas letras minsculas em todas as pastas e arquivos quecriarmos durante esse captulo.

    2 Crie um documento HTML em um arquivo chamado testando-css.html dentro da pasta css.Todos os pargrafos desse documento devem ser exibidos em negrito, com cor azul e com fonte20px. Defina uma regra CSS para formatar os pargrafos.

    1 2 3 4 Testando CSS5 6 p {7 font -weight: bold;8 font -size: 20px;9 color: #0000FF;10 }

    42 www.k19.com.br

  • 43 CSS

    11 12 13 14 Um pargrafo formatado 15 Outro pargrafo formatado 16 17

    Cdigo HTML 3.4: testando-css.html

    3 Para organizar melhor o contedo e a formatao da pgina criada no exerccio anterior, crie umarquivo CSS chamado regras-de-formatacao.css na pasta css.

    1 p {2 font -weight: bold;3 font -size: 20px;4 color: #0000FF;5 }

    Cdigo CSS 3.2: regras-de-formatacao.css

    4 Modifique o arquivo testando-css.html para aplicar as regras de formatao criadas no exerccioanterior.

    1 2 3 4 Testando CSS5 6 7 8 Testando o pargrafo com o CSS9 Testando novamente o pargrafo com o CSS10 11

    Cdigo HTML 3.5: testando-css.html

    Estrutura de uma regra CSSUma regra CSS composta por trs partes como podemos observar na imagem abaixo:

    www.facebook.com/k19treinamentos 43

  • CSS 44

    Seletor Corpo

    Propriedade

    p {

    font-size: 40px;}

    Figura 3.4: Estrutura de uma regra CSS

    Podemos ler a regra acima da seguinte forma: ser atribudo o valor 40px propriedade font-sizeem todos os elementos que forem selecionados pelo seletor p.

    No exemplo acima, utilizamos aquilo que chamamos de seletor de tipo. Todos os elementosp recebero as propriedades definidas no corpo da regra.

    Tipos de seletores

    Na linguagem CSS existem diversos tipos de seletores, sendo os principais:

    Seletor universal

    Seletor de tipo

    Seletor de descendentes

    Seletor de filhos

    Seletor de irmo adjacente

    Seletor de atributos

    Seletor de id

    Seletor de classe

    Seletor universal

    O seletor universal seleciona todos os elementos de um documento HTML.

    No exemplo a seguir, faremos com que todos os elementos tenham margem igual a 0px.

    1 * {2 margin: 0px;3 }

    Cdigo CSS 3.3: Usando o seletor universal

    44 www.k19.com.br

  • 45 CSS

    Seletor de tipo

    O seletor de tipo seleciona todos os elementos com tag igual ao tipo indicado na declarao daregra CSS.

    No exemplo a seguir, selecionaremos todos os elementos que possuem a tag textarea.

    1 textarea {2 border: 1px solid red;3 }

    Cdigo CSS 3.4: Usando o seletor de tipo

    Seletor de descendentes

    Chamamos de seletor de descendentes a seleo de um ou mais elementos fazendo o uso de ou-tros seletores separados por espaos. Um espao indica que os elementos selecionados pelo seletor sua direita so filhos diretos ou indiretos dos elementos selecionados pelo seletor sua esquerda.

    No exemplo a seguir iremos selecionar todos os elementos que possuem a tag input e que sejamfilhos diretos ou indiretos de elementos com a tag p.

    1 p input {2 border: 1px solid red;3 }

    Cdigo CSS 3.5: Usando o seletor de descendentes

    Seletor de filhos

    Chamamos de seletor de filhos a seleo de um ou mais elementos fazendo o uso de outros sele-tores separados pelo caractere >. Um caractere > indica que os elementos selecionados pelo seletor sua direita so filhos diretos dos elementos selecionados pelo seletor sua esquerda.

    No exemplo a seguir iremos selecionar todos os elementos que possuem a tag a e que sejam filhosdiretos de elementos com a tag p.

    1 p > a {2 color: green;3 }

    Cdigo CSS 3.6: Usando o seletor de filhos

    Seletor de irmo adjacente

    Chamamos de seletor de irmo adjacente a seleo de um ou mais elementos fazendo o uso deoutros seletores separados pelo caractere +. Um caractere + indica que os elementos selecionadospelo seletor sua direita sejam irmos e imediatamente precedidos pelos elementos selecionadospelo seletor sua esquerda.

    No exemplo a seguir iremos selecionar todos os elementos que possuem a tag input e que sejamirmos e imediatamente precedidos por elementos com a tag label.

    1 label + input {2 color: green;

    www.facebook.com/k19treinamentos 45

  • CSS 46

    3 }

    Cdigo CSS 3.7: Usando o seletor de irmo adjacente

    Seletor de atributos

    O seletor de atributos seleciona um ou mais elementos que possuam o atributo ou o atributojuntamente com o seu valor da mesma forma como indicada pelo seletor na declarao da regraCSS. Os atributos so informados dentro de colchetes [].

    No exemplo abaixo iremos selecionar todos os elementos que possuam o atributo name igual acidade.

    1 *[name=cidade] {2 font -weight: italic;3 }

    Cdigo CSS 3.8: Usando o seletor de atributos

    Se desejarmos tambm podemos informar apenas o atributo. No exemplo a seguir iremos sele-cionar todos os elementos com a tag img que possuam o atributo title.

    1 img[title] {2 width: 100px;3 }

    Cdigo CSS 3.9: Usando o seletor de atributos

    Seletor de id

    O seletor de id seleciona um nico elemento cujo atributo id possui o valor indicado pelo seletorna declarao da regra CSS.

    No exemplo abaixo iremos selecionar o elemento cujo atributo id possui o valor cidade. Repareque o seletor de id comea com o caractere #.

    1 #cidade {2 font -weight: bold;3 }

    Cdigo CSS 3.10: Usando o seletor de id

    Seletor de classe

    O seletor de classe seleciona todos os elementos cujo atributo class possui o valor indicado peloseletor na declarao da regra CSS.

    No exemplo abaixo iremos selecionar todos os elementos cujo atributo class possui o valorttulos. Repare que o seletor de classe comea com o caractere . (ponto).

    1 .titulos {2 font -size: 40px;3 }

    Cdigo CSS 3.11: Usando o seletor de classe

    46 www.k19.com.br

  • 47 CSS

    Exerccios de Fixao

    5 Para testar o funcionamento de alguns seletores, crie um documento html em um arquivo cha-mado seletores.html. Alm disso, defina algumas regras de formatao em um arquivo CSS chamadoseletores.css. Salve esses arquivos na pasta css.

    1 2 3 4 5 6 7 8 9 10 Cursos 11 Apostilas 12 Artigos 13 Sobre14 1516 K19 - Treinamentos 1718 Curso Java , C# e ASP.NET MVC? Conhea os Cursos da K191920 21 Para saber mais informaes acesse22 www.k19.com.br23 24 25

    Cdigo HTML 3.6: seletores.html

    1 * {2 font -family: Monaco , DejaVu Sans Mono , monospace;3 }45 h1 {6 color: blue;7 }89 h3 {10 font -size: 20px;11 }1213 p > a {14 font -weight: bold;15 text -decoration: none;16 }1718 #main -menu {19 font -size: 18px;20 list -style: none;21 padding: 0px;22 }2324 #main -menu li {25 display: inline;26 margin: 0 50px 0 0;27 }2829 #main -menu li a {

    www.facebook.com/k19treinamentos 47

  • CSS 48

    30 border: 2px solid #0000ff;31 text -decoration: none;32 }3334 .selected {35 background -color: blue;36 color: white;37 }

    Cdigo CSS 3.12: formatando-pagina.css

    Visualize a pgina HTML atravs de um navegador

    Cores em CSSTradicionalmente, as cores podem ser definidas de trs formas diferentes: pelo nome da cor, pelo va-lor hexadecimal associado cor ou atravs da funo rgb(). Nem todas as cores possuem um nome.Por isso, normalmente, utilizamos a forma hexadecimal ou a funo rgb().

    Uma cor definida em hexadecimal da seguinte forma: #RRGGBB. Onde RR, GG e BB podem variarde 00 a FF e representam os componentes vermelho, verde e azul de uma cor.

    Para definir uma cor utilizando a funo rgb(), necessrio passar como argumento as quan-tidades de vermelho, verde e azul necessrias para formar a cor desejada. Essas quantidade podemser expressas na escala de 0 a 255 ou em porcentagem. Veja os exemplos abaixo:

    1 color: rgb(20, 255, 40);2 background -color: rgb(10%, 80%, 40%);

    Mais SobreEm CSS3, h mais trs funes para definir uma cor: rgba(), hsl() e hsla().

    A funo hsl() define as cores atravs da matiz, saturao e luminosidade (hue, satu-ration e lightness). Essa funo possui trs parmetros hsl(H, S, L). Onde H pode variar de0 a 360, S e L de 0% a 100%.

    As funes rgba(R, G, B, A) e hsla(H, S, L, A) possuem um ltimo parmetro que sig-nifica a opacidade da cor (alpha). Esse valor varia de 0 a 1 com passo de 0.1.

    Unidades de medidaEm CSS possumos diversas unidades de medida como podemos verificar na listagem abaixo:

    in - polegada.

    cm - centmetro.

    mm - milmetro.

    em - tamanho relativo ao tamanho de fonte atual no documento. 1em igual ao tamanho dafonte atual, 2em o dobro do tamanho da fonte atual e assim por diante.

    ex - essa unidade igual altura da letra "x"minscula da fonte atual do documento.

    48 www.k19.com.br

  • 49 CSS

    pt - ponto (1pt o mesmo que 1/72 polegadas).

    px - pixels (um ponto na tela do computador).

    Da lista acima, as unidades mais utilizadas so px e em.

    Principais propriedades CSS

    Propriedades de background

    background-attachment - define se a imagem de background deve se mover com a rolagem deum elemento ou no.

    background-color - define a cor do background de um elemento.

    background-image - define a imagem de background de um elemento.

    background-position - define a posio do background de um elemento.

    background-repeat - define se o background de um elemento de se repetir caso este seja menorque a parte visvel do elemento.

    background - define todas as propriedades de background em uma nica linha.

    1 body {2 background -attachment: fixed;3 background -color: #dddddd;4 background -image: url(http://www.k19.com.br/css/img/main -header -logo.png );5 background -position: left top;6 background -repeat: repeat;7 }89 div {10 background: #dddddd url(http://www.k19.com.br/css/img/main -header -logo.png )11 no -repeat center center fixed;12 }

    Cdigo CSS 3.14: Propriedades de background

    Propriedades de texto

    color - define a cor do texto.

    direction - define a direo do texto.

    letter-spacing - define o espaamento entre as letras do texto.

    line-height - define a altura das linhas de um texto.

    text-align - define o alinhamento horizontal do texto.

    text-decoration - define uma "decorao"ou efeito para um texto.

    text-indent - define a identao da primeira linha de um bloco de texto.

    text-transform - define a capitalizao do texto.

    vertical-align - define o alinhamento vertical do texto.

    white-space - define como os espaos do texto sero tratados.

    www.facebook.com/k19treinamentos 49

  • CSS 50

    word-spacing - define o espaamento entre as palavras do texto.

    1 p {2 color: green;3 direction: rtl;4 letter -spacing: 10px;5 line -height: 30px;6 text -align: right;7 text -decoration: blink;8 text -indent: 50px;9 text -transform: uppercase;10 vertical -align: middle;11 white -space: nowrap;12 word -spacing: 30px;13 }

    Cdigo CSS 3.15: Propriedades de texto

    Propriedades de fonte

    font-family - define a famlia de fontes a ser utilizada.

    font-size - define o tamanho da fonte.

    font-style - define o estilo de fonte.

    font-variant - define se a fonte ser utilizada no formato small-caps ou no.

    font-weight - define a espessura dos traos de uma fonte.

    font - define todas as propriedades de fonte em uma nica linha.

    1 p {2 font -family: sans -serif , serif , monospace;3 font -size: 14px;4 font -style: italic;5 font -variant: small -caps;6 font -weight: bold;7 }89 a {10 font: italic small -caps bold 14px/20px sans -serif , serif , monospace;11 }

    Cdigo CSS 3.16: Propriedades de fonte

    Propriedades de lista

    list-style-image - define qual ser o indicador de item da lista.

    list-style-position - define se o indicador de item da lista ser exibido do lado de dentro ou defora do elemento do item.

    list-style-type - define qual o tipo de indicador de item ser usado na lista.

    list-style: define todas as propriedades de lista em uma nica linha.

    1 ul {2 list -style -image: url(http://www.k19.com.br/css/img/box -dot -orange.png );3 list -style -position: inside;4 list -style -type: disc;5 }

    50 www.k19.com.br

  • 51 CSS

    67 ol {8 list -style: square outside9 url(http://www.k19.com.br/css/img/box -dot -orange.png );10 }

    Cdigo CSS 3.17: Propriedades de lista

    Propriedades de tabela

    border-collapse - faz com que as bordas das clulas no fiquem duplicadas quando estas pos-surem bordas.

    1 table {2 border -collapse: collapse;3 }4 table ,th, td {5 border: 1px solid blue;6 }

    Cdigo CSS 3.18: Propriedades de tabela

    Propriedades de dimenso

    width - define a largura de um elemento.

    min-width - define a largura mnima de um elemento.

    max-width - define a largura mxima de um elemento.

    height - define a altura de um elemento.

    min-height - define a altura mnima de um elemento.

    max-height - define a altura mxima de um elemento.

    1 div {2 width: 300px;3 height: 300px;4 }56 h1 {7 min -width: 10px;8 max -width: 300px;9 min -height: 10px;10 max -height: 300px;11 }

    Cdigo CSS 3.19: Propriedades de dimenso

    Exerccios de Fixao

    6 A partir de agora, o nosso objetivo formatar a pgina principal do blog da K19. Ao trmino dosexerccios, essa pgina deve ficar igual ilustrao abaixo.

    www.facebook.com/k19treinamentos 51

  • CSS 52

    Figura 3.5: Blog Layout

    O primeiro passo criar o documento HTML com o contedo desejado. Faa um arquivo cha-mado index.html na pasta css com o seguinte contedo.

    1 2 3 4 5 6 7 8 9 10 11 12 15 1617 18 Home19 Arquivo 20 Site da K1921 2223 24 Efetuar login25

    52 www.k19.com.br

  • 53 CSS

    26 2728 29 Primeiro post no Blog da K19!3031 32 33 Lorem ipsum dolor sit amet , consectetur adipiscing elit.34 Integer convallis pharetra nibh , in rhoncus dolor convallis eu.35 Mauris iaculis odio ut nunc scelerisque luctus sit amet quis purus.36 Morbi venenatis cursus tellus , non ultricies libero interdum nec.37 Etiam in imperdiet velit. Pellentesque feugiat felis ac mi tempor38 et semper lacus luctus. Morbi eu nunc dui , ac ullamcorper lorem.39 Vestibulum ante ipsum primis in faucibus orci luctus et ultrices40 posuere cubilia Curae;41 4243 44 45 46 Integer 47 Proint 48 Nunc49 50 51 52 53 Donec id massa54 Vestibulum eget55 Quisque venenatis magna vitae56 57 58 Etiam a sollicitudin 59 Quisque venenatis 60 Nam tempus tincidunt posuere 61 62 63 Etiam sit64 Praesent felis65 Vestibulum nunc magna66 67 68 Cras eros est69 Mauris rhoncus 70 Donec eget porttitor ipsum71 72 73 Morbi vel erat74 Pellentesque feugiat 75 Praesent aliquam , nunc nec placerat 76 77 78 7980 81 Nunc in risus odio , mollis sollicitudin sem. Vivamus hendrerit82 eros sed mauris bibendum elementum. Nullam cursus dictum sem ,83 ut semper dolor cursus eu. Donec id massa quis libero mattis84 iaculis. Cras in luctus velit. Quisque id nisi nunc , sed mollis85 mi. Mauris sit amet purus libero , ut dignissim tellus. Aenean86 ac risus massa. Mauris lacinia tempus orci , nec pellentesque metus87 fringilla quis.88 8990 91 92 Integer vitae aliquet ligula. Etiam a sollicitudin orci. Nam tempus93 tincidunt posuere.94 95

    www.facebook.com/k19treinamentos 53

  • CSS 54

    96 Proin consectetur justo nisl , nec scelerisque est. Morbi nec97 urna sit amet arcu tincidunt pretium eu id libero. Ut quis ligula98 velit. Praesent aliquam , nunc nec placerat vestibulum , nisi eros99 rutrum erat , vel imperdiet nisi dui at metus. Nam mollis magna quis100 ligula dignissim.101 102 103 Duis augue diam , iaculis quis egestas id, placerat vitae turpis.104 105 106 107 108109 110 111 114 115116 117 Contato 118119 120 Nome121 122 123124 125 E-mail126 127 128129 130 Mensagem 131 132 133134 135 136 Deseja receber a nossa newsletter?138 139140 141 142 143144 145 Copyright 2013. K19 Treinamentos.146 147 148 149

    Cdigo HTML 3.7: k19-blog.html

    7 Copie os arquivos logo.png, publicidade.png e list-bullet.png da pasta K19-Arquivos/imagens/k02da sua rea de trabalho para a pasta css.

    8 Para definir a formatao da pgina que desejamos criar, faa um arquivo chamado blog.css napasta css com o seguinte contedo.

    1 * {

    54 www.k19.com.br

  • 55 CSS

    2 font -family: arial , sans -serif;3 }45 body {6 white -space: nowrap;7 }89 #blog {10 width: 980px;11 }1213 #logo -link {14 text -decoration: none;15 }1617 #logo -link img {18 vertical -align: bottom;19 }2021 #main -menu {22 list -style: none;23 }2425 #main -menu li a {26 background: #cecece;27 color: #333333;28 text -decoration: none;29 }3031 #main -menu li a.selected {32 background: #074 f83;33 color: #ffffff;34 }3536 #main -content {37 vertical -align: top;38 width: 660px;39 color: #666666;40 white -space: normal;41 }4243 #main -content h1 {44 background: #074 f83;45 color: #ffffff;46 font -size: 24px;47 }4849 #blog -content > table {50 width: 100%;51 }5253 #blog -content > table th {54 color: #ffffff;55 background: #5f5f5f;56 }5758 #blog -content > table td {59 background: #dddddd;60 color: #333333;61 }6263 #blog -content > table td.first -col {64 background: #a9a9a9;65 }6667 #blog -content ul {68 list -style -image: url(list -bullet.png );69 }7071 #side -content {

    www.facebook.com/k19treinamentos 55

  • CSS 56

    72 vertical -align: top;73 }7475 #contact -form {76 text -align: right;77 }7879 #contact -form h3 {80 font -size: 18px;81 color: #074 f83;82 text -align: left;83 }8485 #contact -form div {86 text -align: left;87 }8889 #contact -form label {90 font -size: 14px;91 vertical -align: middle;92 color: #666666;93 }9495 #contact -form input ,96 #contact -form textarea {97 width: 288px;98 font -size: 18px;99 }100101 #contact -form textarea {102 height: 100px;103 }104105 #contact -form input[type=checkbox ] {106 width: auto;107 }108109 #contact -form input[type=submit ] {110 background: #074 f83;111 color: #ffffff;112 text -transform: uppercase;113 font -size: 14px;114 width: auto;115 }116117 #footer {118 font -size: 12px;119 color: #999999;120 text -align: center;121 }

    Cdigo CSS 3.20: blog.css

    Linhas 1 a 3: Selecionamos, atravs da propriedade font-family e do seletor universal (*), asfamlias de fontes que devem ser utilizadas para todos os elementos HTML. No caso, as famliasselecionadas foram arial e sans-serif.

    Linhas 5 a 7: Evitamos, atravs da propriedade white-space, que uma quebra de linha dentrodo corpo do documento HTML seja interpretada como espao em branco.

    Linhas 9 a 11: Definimos, atravs da propriedade width, que o contedo do blog ter umalargura de 980px.

    Linhas 13 a 15: Definimos, atravs da propriedade text-decoration, que o texto do logo nodeve receber nenhum tipo de decorao.

    56 www.k19.com.br

  • 57 CSS

    Linhas 17 a 19: Definimos, atravs da propriedade vertical-align, que a imagem do logodeve ser alinhada inferiormente aos elementos da mesma linha.

    Linhas 21 a 23: Definimos, atravs da propriedade list-style, que nenhum smbolo deve serutilizado nos itens do menu principal.

    Linhas 25 a 29: Definimos, atravs das propriedades background e color, as cores #cecece e#333333 para o fundo e para o texto dos links do menu principal respectivamente. Alm disso,retiramos as decoraes desses links atravs da propriedade text-decoration.

    Linhas 31 a 33: Definimos, atravs das propriedades background e color, as cores #074f83 e#ffffff para o fundo e para o texto do link selecionado do menu principal respectivamente

    Linhas 36 a 41: Definimos que o contedo principal ser alinhado verticalmente na parte decima, ter largura de 660px e a cor do texto ser #666666.

    Linhas 43 a 47: Definimos, atravs das propriedades background, color e font-size, que oselementos H1 do contedo principal tero cor de fundo #074f83 e fonte de cor #ffffff com ta-manho 24px.

    Linhas 49 a 51: Definimos, atravs da propriedade width, que toda tabela filha de contedo doblog ter largura de 100

    Linhas 53 a 56: Definimos, atravs da propriedade background e color, as cores #ffffff e #5f5f5fpara o texto e fundo dos ttulos das colunas das tabelas filhas do contedo do blog respectiva-mente.

    Linhas 58 a 61: Definimos, atravs da propriedade background e color, as cores #333333 e#dddddd para o texto e fundo das clulas das tabelas filhas do contedo do blog respectiva-mente.

    Linhas 63 a 65: Definimos, atravs da propriedade background, a cor #a9a9a9 para o fundo dasclulas da primeira coluna das tabelas filhas do contedo do blog.

    Linhas 67 a 69: Definimos, atravs da propriedade list-style-image, a imagem que deve serutilizada como smbolo dos itens de todas as listas sem ordem do contedo do blog.

    Linhas 71 a 73: Definimos, atravs da propriedade vertical-align, que o contedo lateralser alinhado verticalmente na parte de cima.

    Linhas 75 a 77: Definimos, atravs da propriedade text-align, que o texto do formulrio decontato ser alinhado direita.

    Linhas 79 a 83: Definimos, atravs das propriedades font-size color e text-align, que todottulo nvel 3 dentro do formulrio de contato ter fonte com tamanho 18px e cor #074f83 e otexto ser alinhado esquerda.

    Linhas 85 a 87: Definimos, atravs da propriedade text-align, que todo elemento DIV dentrodo formulrio de contato ter o texto alinhado esquerda

    Linhas 89 a 93: Definimos, atravs das propriedades font-size, vertical-align e color, quetodo rtulo dentro do formulrio de contato ter fonte com tamanho 14px e cor #666666 e oalinhamento vertical do texto ser no centro.

    Linhas 95 a 99: Definimos, atravs das propriedades width e font-size, a largura e o tamanhoda fonte dos elementos INPUT e TEXTAREA do formulrio de contato.

    Linhas 101 a 103: Definimos, atravs da propriedade height, a altura dos elementos TEXTAREAdo formulrio de contato.

    Linhas 105 a 107: Definimos, atravs da propriedade width, a largura dos checkboxes do for-mulrio de contato.

    www.facebook.com/k19treinamentos 57

  • CSS 58

    Linhas 109 a 115: Definimos, atravs das propriedades background, color, text-transforme font-size, a cor do fundo, a cor da fonte, o tipo de letra, o tamanho da fonte e largura doboto de envio do formulrio de contato.

    Linhas 117 a 121: Definimos, atravs das propriedades font-size, color e text-align, que oo texto do rodap ter fonte de tamanho 12px, cor #999999 e alinhamento centralizado.

    Box modelO termo box model utilizado para explicar o comportamento visual dos elementos HTML, pois po-demos imaginar que cada elemento em uma pgina est envolvido por uma caixa. Essa caixa possuitrs partes: uma margem interna (padding), uma borda (border) e uma margem externa (margin).

    Margem externa (margin)

    Borda (border)

    Margem interna (padding)

    contedo

    Figura 3.6: Box model

    Um erro muito comum quando estamos comeando a aprender CSS que nos esquecemos deconsiderar as dimenses das margens internas e externas no clculo das dimenses de um elemento.

    Vamos pensar no seguinte caso: suponha que voc possua um espao de 300px para encaixarum contedo dentro da sua pgina. Voc poderia incluir no HTML um elemento com a tag div e aseguinte regra CSS:

    1 div {2 width: 300px;3 padding: 10px;4 margin: 10px;5 border: 1px solid green;6 }

    Cdigo CSS 3.21: Exemplo de uso incorreto das dimenses de um elemento

    Num primeiro momento pode parecer que tudo est correto, porm ao abrir a pgina voc per-ceber que seu elemento est ultrapassando o limite dos 300px. Isso ocorre porque devemos incluir

    58 www.k19.com.br

  • 59 CSS

    as margens internas, as margens externas e a borda na hora de calcular as dimenses finais de umelemento. No exemplo acima, o correto seria:

    1 div {2 width: 258px;3 padding: 10px;4 margin: 10px;5 border: 1px solid green;6 }

    Cdigo CSS 3.22: Exemplo de uso correto das dimenses de um elemento

    O comportamento do box model facilmente observado em elementos de bloco. Em elementosinline o box model continua valendo, porm sempre devemos nos lembrar que eles no sofrem osefeitos das propriedades width e height. Alm disso, as propriedades margin-top, margin-bottom,padding-top e padding-bottom no afetam o posicionamento do contedo ao redor do elementoinline com tais propriedades. Observe o exemplo:

    1 2 3 4 5 span {6 border: 1px solid red;7 padding: 20px;8 margin: 40px;9 }10 11 12 13 Lorem ipsum dolor sit amet , consectetur adipiscing elit. Donec justo14 massa , sodales sit amet eleifend a, elementum eu nibh. Lorem ipsum dolor15 sit amet , consectetur adipiscing elit. Donec justo massa , sodales sit amet16 eleifend a, elementum eu nibh. Donec egestas dolor quis turpis17 dictum tincidunt. Donec blandit tempus velit , sit amet adipiscing velit18 consequat placerat. Curabitur id mauris. Lorem ipsum dolor19 sit amet , consectetur adipiscing elit. Donec justo massa , sodales sit amet20 eleifend a, elementum eu nibh. Lorem ipsum dolor21 sit amet , consectetur adipiscing elit. Donec justo massa , sodales sit amet22 eleifend a, elementum eu nibh.23 24

    Cdigo HTML 3.8: Box model em elemento inline

    O resultado do cdigo acima pode ser observado na imagem abaixo:

    www.facebook.com/k19treinamentos 59

  • CSS 60

    Figura 3.7: Box model em um elemento inline

    A propriedade display

    Todo elemento possui uma propriedade CSS chamada display que afeta a maneira como talelemento ser posicionado na tela. Essa propriedade pode assumir diversos valores, sendo os prin-cipais:

    block - o elemento que tiver a propriedade display: block far com que o prximo ele-mento seja posicionado logo abaixo e ter a largura definida pelo atributo width ou herdara largura do elemento que o contm. Chamamos esse tipo de elemento de elemento de bloco.Um elemento de bloco pode conter elementos de bloco, elementos inline e elementos inline-block.

    inline - o elemento que tiver a propriedade display: inline far com que outros elementosinline (ou inline-block) ao seu redor sejam posicionados um do lado do outro, na ordem emque foram criados em um documento HTML. Chamamos esse tipo de elemento de elementoinline. Um elemento inline s pode conter outros elementos inline.

    inline-block - o elemento que tiver a propriedade display: inline-block far com que ou-tros elementos inline (ou inline-block) ao seu redor sejam posicionados um do lado do outro,na ordem em que foram criados em um documento HTML. Chamamos esse tipo de elementode elemento inline-block. Um elemento inline-block pode conter elementos de bloco, elemen-tos inline e outros elementos inline-block.

    Durante a aplicao do CSS em uma pgina HTML muitas vezes temos a necessidade de inserirou remover alguns elementos HTML afim de obtermos o resultado desejado. Isso perfeitamentenormal. Contudo, em algumas situaes esse simples remanejamento dos elementos HTML no osuficiente.

    Em alguns momentos temos a necessidade de que um elemento de bloco se comporte como umelemento inline e vice-versa. Para atingirmos esse objetivo devemos utilizar a propriedade display,como nos exemplos a seguir:

    60 www.k19.com.br

  • 61 CSS

    1 div {2 display: inline;3 }

    Cdigo CSS 3.23: Elemento de bloco se comportando como inline

    1 span {2 display: block;3 }

    Cdigo CSS 3.24: Elemento inline se comportando como bloco

    Num primeiro momento temos a falsa impresso de que podemos utilizar essa propriedade li-vremente sem nos preocuparmos com os valores originais da propriedade display dos elementosHTML.

    De acordo com a especificao do HTML, elementos inline no podem conter elementos debloco. J elementos de bloco podem conter tanto elementos inline assim como elementos de bloco.

    Portanto, no primeiro exemplo, ao fazermos um div se comportar como um elemento inline, essediv no poder conter elementos de bloco. Devemos prestar ateno nesse tipo de detalhe quandoestivermos alterando as propriedades CSS de um elemento HTML.

    Por outro lado, no segundo exemplo, apesar de fazermos um span se comportar como um ele-mento de bloco, no poderemos fazer com que ele contenha elementos de bloco ou inline-block.Isso se deve ao fato de que antes de qualquer regra CSS ser aplicada o documento j teria um erro devalidao. Alterar a propriedade display de um elemento no significa que podemos desobedeceras regras estabelecidas na especificao do HTML.

    Exerccios de Fixao

    9 Continuando o exerccio anterior, altere o arquivo blog.css conforme as linhas destacadas abaixo:

    1 * {2 margin: 0;3 padding: 0;4 font -family: arial , sans -serif;5 }67 body {8 white -space: nowrap;9 }1011 #blog {12 width: 980px;13 margin: 0 auto;14 }1516 #header {17 border -bottom: 1px solid #074 f83;18 margin: 0 0 20px 0;19 }2021 #logo -link {22 text -decoration: none;23 }

    www.facebook.com/k19treinamentos 61

  • CSS 62

    2425 #logo -link img {26 margin: 20px 40px 20px 20px;27 vertical -align: bottom;28 }2930 #main -menu {31 list -style: none;32 display: inline -block;33 }3435 #main -menu li {36 display: inline -block;37 margin: 0 10px 0 0;38 }3940 #main -menu li a {41 display: block;42 padding: 8px 10px 5px 10px;43 background: #cecece;44 color: #333333;45 text -decoration: none;4647 border -top -left -radius: 5px; /* CSS3 */48 border -top -right -radius: 5px; /* CSS3 */49 }5051 #main -menu li a.selected {52 background: #074 f83;53 color: #ffffff;54 }5556 #main -content {57 display: inline -block;58 vertical -align: top;59 width: 660px;60 color: #666666;61 white -space: normal;62 }6364 #main -content h1 {65 padding: 10px;66 background: #074 f83;67 color: #ffffff;68 font -size: 24px;69 }7071 #blog -content {72 padding: 20px;73 }7475 #blog -content > p {76 margin: 0 0 20px 0;77 }7879 #blog -content > table {80 border -collapse: collapse;81 border: 1px solid #5f5f5f;82 margin: 0 0 20px 0;83 width: 100%;84 }8586 #blog -content > table th,87 #blog -content > table td {88 border: 1px solid #5f5f5f;89 padding: 10px 5px;90 }9192 #blog -content > table th {93 color: #ffffff;

    62 www.k19.com.br

  • 63 CSS

    94 background: #5f5f5f;95 }9697 #blog -content > table td {98 background: #dddddd;99 color: #333333;100 }101102 #blog -content > table td.first -col {103 background: #a9a9a9;104 }105106 #blog -content ul {107 list -style -image: url(list -bullet.png );108 margin: 0 0 0 30px;109 }110111 #side -content {112 display: inline -block;113 margin: 0 0 0 20px;114 vertical -align: top;115 }116117 #ad {118 display: block;119 margin: 0 0 20px 0;120 }121122 #contact -form {123 text -align: right;124 }125126 #contact -form h3 {127 font -size: 18px;128 color: #074 f83;129 text -align: left;130 border -bottom: 1px solid #999999;131 margin: 0 0 10px 0;132 padding: 0 0 5px 0;133 }134135 #contact -form div {136 margin: 0 0 10px 0;137 text -align: left;138 }139140 #contact -form label {141 font -size: 14px;142 vertical -align: middle;143 color: #666666;144 }145146 #contact -form input ,147 #contact -form textarea {148 display: block;149 border: 1px solid #999999;150 padding: 5px;151 margin: