K19 k02-desenvolvimento-web-com-html-css-e-javascript

2,299 views
2,200 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,299
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
98
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

K19 k02-desenvolvimento-web-com-html-css-e-javascript

  1. 1. TREINAMENTOSDesenvolvimento Web com HTML, CSS e Javascript
  2. 2. Desenvolvimento Web com HTML, CSS e Javascript 7 de janeiro de 2013Sumário iSobre a K19 1Seguro Treinamento 2Termo de Uso 3Cursos 41 Introdução 1 1.1 Client Side e Server Side . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 1.2 HTML, CSS e Javascript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 HTML 3 2.1 Estrutura Básica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 2.2 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 2.3 Exercícios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 2.4 Semântica HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 2.5 Parágrafos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 2.6 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 2.7 Exercícios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 2.8 Cabeçalhos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 2.9 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 2.10 Exercícios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 2.11 Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 2.12 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 2.13 Exercícios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 2.14 Âncoras . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 2.15 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 2.16 Exercícios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 2.17 Imagens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 2.18 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 2.19 Exercícios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 www.facebook.com/k19treinamentos i
  3. 3. S UMÁRIO ii 2.20 Tabelas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 2.21 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 2.22 Exercícios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 2.23 Listas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 2.24 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 2.25 Exercícios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 2.26 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 2.27 Exercícios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 2.28 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 2.29 Exercícios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 2.30 Formulário . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 2.31 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37 2.32 Exercícios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 373 CSS 39 3.1 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42 3.2 Estrutura de uma regra CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 3.3 Tipos de seletores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44 3.4 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47 3.5 Cores em CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48 3.6 Unidades de medida . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48 3.7 Principais propriedades CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 3.8 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51 3.9 Box model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58 3.10 A propriedade display . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60 3.11 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61 3.12 Posicionando elementos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65 3.13 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66 3.14 Desafios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 694 JavaScript 71 4.1 Declarando e inicializando variáveis em JavaScript . . . . . . . . . . . . . . . . . . . . . 71 4.2 Operadores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71 4.3 Controle de fluxo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74 4.4 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75 4.5 Exercícios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77 4.6 Funções JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79 4.7 Objetos JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80 4.8 Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81 4.9 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82 4.10 Exercícios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83A Javascript Avançado 85 A.1 Objetos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85 A.2 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89 A.3 Exercícios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92 A.4 Funções . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92 A.5 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94 A.6 Exercícios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96 A.7 Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96ii www.k19.com.br
  4. 4. iii S UMÁRIO A.8 Métodos das Strings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99 A.9 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100 A.10 Exercícios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103B jQuery 105 B.1 Introdução . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105 B.2 Sintaxe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106 B.3 Seletores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106 B.4 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107 B.5 Exercícios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109 B.6 Eventos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109 B.7 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110 B.8 Exercícios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112 B.9 Efeitos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113 B.10 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115 B.11 Exercícios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117 B.12 HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118 B.13 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119 B.14 Exercícios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121C HTML5 123 C.1 article . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124 C.2 section . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124 C.3 header . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125 C.4 footer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125 C.5 nav . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126 C.6 aside . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126 C.7 figure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127 C.8 figcaption . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127D Respostas 129 www.facebook.com/k19treinamentos iii
  5. 5. S UMÁRIO iviv www.k19.com.br
  6. 6. 1 S UMÁRIOSobre a K19 A K19 é uma empresa especializada na capacitação de desenvolvedores de software. Sua equipeé composta por profissionais formados em Ciência da Computação pela Universidade de São Paulo(USP) e que possuem vasta experiência em treinamento de profissionais para área de TI. O principal objetivo da K19 é oferecer treinamentos de máxima qualidade e relacionados às prin-cipais tecnologias utilizadas pelas empresas. Através desses treinamentos, seus alunos se tornamcapacitados para atuar no mercado de trabalho. Visando a máxima qualidade, a K19 mantém as suas apostilas em constante renovação e melho-ria, oferece instalações físicas apropriadas para o ensino e seus instrutores estão sempre atualizadosdidática e tecnicamente. www.facebook.com/k19treinamentos 1
  7. 7. S UMÁRIO 2Seguro Treinamento Na K19 o aluno faz o curso quantas vezes quiser! Comprometida com o aprendizado e com a satisfação 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 não preenchidas até um dia antes do início de uma turma da K19 serão 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
  8. 8. 3 S UMÁRIO Termo de UsoTermo de Uso Todo o conteúdo desta apostila é propriedade da K19 Treinamentos. A apostila pode ser utilizadalivremente para estudo pessoal . Além disso, este material didático pode ser utilizado como materialde apoio em cursos de ensino superior desde que a instituição correspondente seja reconhecida peloMEC (Ministério da Educação) e que a K19 seja citada explicitamente como proprietária do material. É proibida qualquer utilização desse material que não se enquadre nas condições acima semo prévio consentimento formal, por escrito, da K19 Treinamentos. O uso indevido está sujeito àsmedidas legais cabíveis. www.facebook.com/k19treinamentos 3
  9. 9. S UMÁRIO 4 TR EIN AM EN TR TO EIN S TREINAMENTOS AM EN TO S Conheça os nossos cursos K01- Lógica de Programação K02 - Desenvolvimento Web com HTML, CSS e JavaScript K03 - SQL e Modelo Relacional K11 - Orientação a Objetos em Java K12 - Desenvolvimento Web com JSF2 e JPA2 K21 - Persistência com JPA2 e Hibernate K22 - Desenvolvimento Web Avançado com JFS2, EJB3.1 e CDI K23 - Integração de Sistemas com Webservices, JMS e EJB K41 - Desenvolvimento Mobile com Android K51 - Design Patterns em Java K52 - Desenvolvimento Web com Struts K31 - C# e Orientação a Objetos K32 - Desenvolvimento Web com ASP.NET MVC www.k19.com.br/cursos4 www.k19.com.br
  10. 10. CAPÍTULO I NTRODUÇÃO 1 Durante muito tempo, a ideia de desenvolvimento web ficou associada apenas a construção depáginas que possuíam somente o intuito de oferecer aos usuários o acesso a um determinado con-teúdo. Porém, com a popularização da internet, novas necessidades foram surgindo em diversasáreas. Na área de entretenimento, cada vez mais jogos online foram aparecendo. Diversas redes sociaisganharam forças graças à grande interatividade permitida entre os usuários. Gravadoras de músicapassaram a vender seus títulos através 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 simplespáginas para se tornarem verdadeiras aplicações. Há cerca de 15 anos, era muito comum que um único desenvolvedor fosse responsável por todoo desenvolvimento de uma aplicação 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 aplicação web se tornaram muito grande para apenas umapessoa ou até mesmo para um grupo pequeno de desenvolvedores (webmasters). Hoje, a função 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 especializações. Essas especializações podem ser classificadasem dois grupos: desenvolvedores front-end e back-end. Em geral os desenvolvedores front-end sãoresponsáveis pela interface com a qual os usuários interagem enquanto os desenvolvedores back-end são responsáveis pelo funcionamento interno das aplicações. Client Side e Server Side Os usuários acessam a interface de uma aplicação web através 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 são categorizadas como clientside. Atualmente, as principais linguagens e tecnologias client side são 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 são clas-sificadas como server side. Isso não significa que os desenvolvedores front-end não precisam co-nhecer as linguagens utilizadas pelo back-end e vice-versa. Na prática, ocorre uma especializaçãodos profissionais em determinadas tecnologias que podem tender mais para o front-end ou para o www.facebook.com/k19treinamentos 1
  11. 11. I NTRODUÇÃO 2back-end. HTML, CSS e Javascript Como acabamos de ver, as principais linguagens e tecnologias client side são HTML, CSS, Javas-cript, Adobe Flash, Microsoft Silverlight e VBScript. De todas elas as três primeiras são as mais impor-tantes e atualmente estão em maior evidência. Cada uma das três linguagens possui um papel bemespecífico que podemos resumir da seguinte maneira: o código HTML será responsável por provero conteúdo de uma página, o código CSS cuidará da formatação visual do conteúdo apresentado e ocódigo Javascript permitirá que as páginas possuam algum tipo de comportamento (“inteligência”)e que alguma interação possa ser estabelecida com os usuários. Nos próximos capítulos, discutiremos em detalhes cada uma dessas três linguagens.2 www.k19.com.br
  12. 12. CAPÍTULO HTML 2 Quando acessamos uma página web, estamos interessados na informação contida nessa página.Essa informação pode estar na forma de texto, imagem ou vídeo. Em geral, o conteúdo de uma pá-gina web é definido com a linguagem HTML (HyperText Markup Language). HTML é uma linguagemde marcação originalmente proposta por Tim Berners-Lee no final da década de 1980. O objetivo doTim Barners-Lee era criar um mecanismo simples que pudesse ser utilizado por qualquer pessoa quequisesse disseminar documentos científicos. Desde sua proposta até os dias de hoje, a linguagem HTML sofreu diversas alterações. A cadaversão, novos recursos são adicionados e problemas corrigidos. A versão mais atual da especificaçãoda linguagem HTML é a 5. Essa versão ainda não foi finalizada, ela está na fase de “trabalho em pro-gresso” (working draft). Porém, já existem navegadores implementando alguns dos novos recursosdo HTML5. As especificações da linguagem HTML são publicadas pelo World Wide Web Consortium maisconhecido por sua sigla W3C. Além do HTML, o W3C também é responsável por linguagens como oXML, o SVG e pela interface DOM (Document Object Model), por exemplo. Estrutura Básica 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 parênteses angulares (< e >). Veja oexemplo:1 < html >2 < head >3 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " >4 < title > Exemplo da estrutura básica de um documento HTML </ title >5 </ head >6 < body >7 <p > Olá mundo ! </ p >8 </ body >9 </ html > Código HTML 2.1: Exemplo da estrutura básica de um documento HTML www.facebook.com/k19treinamentos 3
  13. 13. HTML 4 Figura 2.1: Exemplo da estrutura básica de um documento HTML No exemplo acima, temos um elemento HTML representado pela tag “p” e um texto simples “OláMundo!” filho desse elemento. Exercícios de Fixação 1 Na pasta Desktop do seu usuário, crie uma nova pasta com o seu primeiro nome. Dentro dessapasta, crie um diretório chamado html. Para facilitar, utilize apenas letras minúsculas 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 código dentro do arquivo ola-mundo.html:1 < html >2 < head >3 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " >4 < title > Exemplo da estrutura básica de um documento HTML </ title >5 </ head >6 < body >7 <p > Olá mundo ! </ p >8 </ body >9 </ html > Código HTML 2.2: ola-mundo.html4 www.k19.com.br
  14. 14. 5 HTML Abra o arquivo ola-mundo.html em um navegador e veja o resultado. Exercícios Complementares 1 Crie uma página HTML que exiba o nome deste curso duas vezes. Semântica HTML De acordo com a especificação da linguagem HTML, cada elemento possui um propósito bemdefinido. Para o funcionamento correto das páginas de uma aplicação web, é fundamental respeitaro propósito de cada elemento e utilizá-lo nas condições corretas. Muitos autores utilizam o termosemântica HTML ao se referirem ao uso correto dos elementos da linguagem HTML. Por exemplo:1 < html >2 < head >3 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " >4 < title > Exemplo de uso correto da semântica HTML </ title >5 </ head >6 < body >7 <p > Este é um texto para mostrar o significado da tag p . </ p >8 </ body >9 </ html > Código HTML 2.4: Exemplo de uso correto da semântica HTML No exemplo acima, utilizamos o elemento p para definir um parágrafo. De acordo com a espe-cificação da linguagem HTML, esse elemento deve ser utilizado justamente para definir parágrafos.Portanto, ele foi aplicado corretamente. Agora, vejamos outro exemplo: 1 < html > 2 < head > 3 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 4 < title > Meus amigos - Site do Jonas - Criado pelo Jonas </ title > 5 </ head > 6 < body > 7 < address > 8 Rafael Cosentino 9 rafael . cosentino@k19 . com . br10 Sócio fundador da K19 Treinamentos11 Av . Brigadeiro Faria Lima , 1571 - Jardim Paulistano - São Paulo , SP12 CEP 01452 -00113 </ address >1415 < address >16 Marcelo Martins17 marcelo . martins@k19 . com . br18 Sócio fundador da K19 Treinamentos19 Av . Brigadeiro Faria Lima , 1571 - Jardim Paulistano - São Paulo , SP20 CEP 01452 -00121 </ address >22 </ body >23 </ html > Código HTML 2.5: Exemplo de uso incorreto da semântica HTML Dessa vez, utilizamos o elemento address. De acordo com a especificação, o elemento address www.facebook.com/k19treinamentos 5
  15. 15. HTML 6deve ser utilizado para fornecer informações de contato dos autores do documento ou da maior partedo documento. Normalmente, esse elemento aparece no início ou no final das páginas. Se observarmos o exemplo mais atentamente, trata-se de uma página do site do Jonas (repareno título da página). O autor da página é o Jonas e não o Rafael ou o Marcelo. Portanto, o elementoaddress foi aplicado incorretamente. Além disso, devemos evitar o uso desse elemento para infor-mar endereços postais a menos que essas informações sejam relevantes para o documento. Parágrafos Os parágrafos dentro de um documento HTML, em geral, são definidos através do elemento p.Uma das principais características desse elemento é que ele ocupa horizontalmente todo o espaçodefinido 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 parágrafo à largura do elemento pai realizando todas as quebras delinha necessárias. Caso seja necessário forçar uma quebra de linha, podemos utilizar a elemento br.Confira o exemplo: 1 < html > 2 < head > 3 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 4 < title > Exemplo de quebra de linha em um parágrafo </ title > 5 </ head > 6 < body > 7 <p > Um texto bem longo . Longo mesmo ! Este parágrafo serve para demonstrar 8 o comportamento da quebra de linha automática , ou seja , sem utilizar 9 nenhum recurso para que a quebra ocorra . </ p >1011 <p > Já este parágrafo demonstra a quebra de linha forçada . < br / > Percebeu ? </ p >12 </ body >13 </ html > Código HTML 2.6: Exemplo de quebra de linha em um parágrafo6 www.k19.com.br
  16. 16. 7 HTML Figura 2.2: Exemplo de quebra de linha em um parágrafo Exercícios de Fixação 3 Crie um novo documento HTML chamado p-quebra-de-linha.html na pasta html. Em seguida,abra esse arquivo em um navegador (se necessário, redimensione a janela do navegador para verifi-car o comportamento da quebra de linha). 1 < html > 2 < head > 3 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 4 < title > Exemplo de quebra de linha em um parágrafo </ title > 5 </ head > 6 < body > 7 <p > Um texto bem longo . Longo mesmo ! Este parágrafo serve para demonstrar 8 o comportamento da quebra de linha automática , ou seja , sem utilizar 9 nenhum recurso para que a quebra ocorra . </ p >1011 <p > Já este parágrafo demonstra a quebra de linha forçada . < br / > Percebeu ? </ p >12 </ body >13 </ html > Código HTML 2.7: p-quebra-de-linha.html Exercícios Complementares www.facebook.com/k19treinamentos 7
  17. 17. HTML 8 2 Crie um documento HTML e force uma quebra de linha em qualquer parte de um parágrafo.Dica: utilize o site www.lipsum.com para gerar um texto fictício. Cabeçalhos Assim como em um livro, uma página HTML pode conter uma hierarquia de títulos para estabe-lecer uma divisão de seu conteúdo. Para conseguirmos realizar essa tarefa devemos utilizar as tagsde cabeçalho h1, h2, h3, h4, h5 e h6. Os sufixos numéricos de 1 a 6 indicam o nível do título dentro da hierarquia de títulos do docu-mento. Veja o exemplo: 1 < html > 2 < head > 3 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 4 < title > Exemplo de cabeçalhos </ title > 5 </ head > 6 < body > 7 < h1 > Título 1 </ h1 > 8 < h2 > Título 2 </ h2 > 9 < h3 > Título 3 </ h3 >10 < h4 > Título 4 </ h4 >11 < h5 > Título 5 </ h5 >12 < h6 > Título 6 </ h6 >13 </ body >14 </ html > Código HTML 2.9: Exemplo de cabeçalhos8 www.k19.com.br
  18. 18. 9 HTML Figura 2.3: Exemplo de cabeçalhos Perceba que cada nível possui um tamanho diferente de fonte. Esse tamanho é determinado pelonavegador e pode ser alterado através de regras CSS que veremos posteriormente. Devemos utilizar os cabeçalhos com cautela, pois eles são utilizados como parâmetros de ran-queamento da página por diversos buscadores como Google, Yahoo e Bing, por exemplo. O usocorreto das tags de cabeçalho faz parte das técnicas de SEO (Search Engine Optimization) que, comoo próprio nome já indica, são técnicas que ajudam a melhorar o ranqueamento de páginas dentrodos buscadores. De acordo com as técnicas de SEO devemos tomar os seguintes cuidados ao utilizarmos as tagsde cabeçalhos: • Utilizar apenas uma tag <h1> por página. • Utilizar no máximo duas tags <h2> por página. Exercícios de Fixação 4 Crie um novo documento HTML chamado cabecalhos-1.html com o conteúdo abaixo na pastahtml. Em seguida, abra esse arquivo em um navegador.1 < html > www.facebook.com/k19treinamentos 9
  19. 19. HTML 10 2 < head > 3 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 4 < title > K02 - Desenvolvimento Web com HTML , CSS e Javascript </ title > 5 </ head > 6 < body > 7 < h1 > K02 - Desenvolvimento Web com HTML , CSS e Javascript </ h1 > 8 9 <p > Atualmente , praticamente todos os sistemas corporativos possuem10 interfaces web . Para quem deseja atuar no mercado de desenvolvimento11 de software , é obrigatório o conhecimento das linguagens : HTML , CSS12 e JavaScript . </ p >1314 <p > Essas linguagens são utilizadas para o desenvolvimento da camada de15 apresentação das aplicações web . </ p >1617 < h2 >Pré - requisitos </ h2 >1819 <p > Familiaridade com algum sistema operacional ( Windows / Linux / Mac OS X ) </ p >20 <p > Lógica de programação </ p >2122 < h2 > Agenda </ h2 >2324 < h3 > Aos domingos </ h3 >2526 <p > xx / xx / xxxx das 08:00 às 14:00 </ p >27 <p > xx / xx / xxxx das 14:00 às 20:00 </ p >2829 < h3 > Aos sábados </ h3 >3031 <p > xx / xx / xxxx das 08:00 às 14:00 </ p >32 <p > xx / xx / xxxx das 14:00 às 20:00 </ p >33 </ body >34 </ html > Código HTML 2.10: cabecalhos-1.html 5 Imagine que você possua um site de culinária no qual você disponibiliza algumas receitas. Crieuma página com uma receita fictícia utilizando cabeçalhos para organizar conteúdo. Utilize quantosníveis de título achar necessário. 1 < html > 2 < head > 3 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 4 < title > Como preparar um delicioso macarrão instantâneo em 6 min . </ title > 5 </ head > 6 < body > 7 < h1 > Como preparar um delicioso macarrão instantâneo em 6 min . </ h1 > 8 9 <p > Com esta receita você se tornará um profissional na arte de10 preparar um macarrão instantâneo . </ p >1112 < h2 > Ingredientes </ h2 >1314 <p > Macarrão instantâneo de sua marca favorita </ p >15 <p > 600 ml de água </ p >1617 < h2 > Modo de preparo </ h2 >1819 < h3 > No microondas </ h3 >2021 <p > Insira o macarrão instantâneo em um recipiente com 600 ml de água e22 programe o microondas por 6 minutos . Aperto o botão iniciar ou23 equivalente . </ p >2425 < h4 > Ponto importante </ h4 >2610 www.k19.com.br
  20. 20. 11 HTML27 <p > Utilize um recipiente que permita o macarrão ficar totalmente submerso28 na água . </ p >29 <p > Quando ouvir o bip não saia correndo . O microondas não irá explodir ,30 pois o bip significa que o macarrão está pronto . </ p >3132 < h3 > No fogão </ h3 >3334 <p > Ferva a água em uma panela . </ p >35 <p > Insira o macarrão e cozinhe - o por 3 minutos </ p >3637 < h4 > Ponto importante </ h4 >3839 <p > Utilize uma panela que permita o macarrão ficar totalmente submerso40 na água . </ p >41 <p > Não se distraia com a televisão ou qualquer outra coisa . Você poderá42 queimar a sua refeição </ p >43 </ body >44 </ html > Código HTML 2.11: receita.html Exercícios Complementares 3 Utilizando as tags de cabeçalho, crie uma página HTML que exiba hierarquicamente o nome euma curiosidade de alguns continentes, países, estados (províncias) e cidades. 4 Utilizando as tags de cabeçalho, crie uma página de um produto e suas especificações, observa-ções e ou comentários. Utilize quantos níveis de título achar necessário. Links Normalmente, um site é formado por um conjunto de páginas que estão interligadas de algumaforma. Para permitir que um usuário navegue de uma página para outra, devemos utilizar os links.Um link pode fazer a ligação de uma página para outra do mesmo site (link interno) ou para umapágina de outro site (link externo). Para criarmos um link, devemos utilizar a tag a. Porém, essa tag sem atributos não criará nenhumlink interno ou externo. Para que um link seja criado, devemos, no mínimo, utilizar o atributo hrefcom o caminho relativo ou absoluto de uma outra página. Veja o exemplo: 1 < html > 2 < head > 3 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 4 < title > Exemplo de uso da tag a </ title > 5 </ head > 6 < body > 7 <p > <a href = " pagina2 . html " > Exemplo de link relativo </ a > </ p > 8 <p > <a href = " outros / pagina3 . html " > Outro exemplo de link relativo </ a > </ p > 9 <p > <a href = " http :// www . k19 . com . br " > Exemplo de link absoluto </ a > </ p >10 </ body >11 </ html > Código HTML 2.14: Exemplo de uso da tag a www.facebook.com/k19treinamentos 11
  21. 21. HTML 12 Além do atributo href, podemos utilizar o atributo target para informar onde o documentodeve ser aberto. Os possíveis valores para o atributo target são: • _blank - em uma nova janela ou aba • _self - na mesma janela ou frame do documento que contém 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 contém o link Ao testar os valores acima, logo percebemos que _self e _top possuem o mesmo comporta-mento se a página que contém o link não 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 próprio frame. Dentro de uma única página 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 padrão de um link é abrir o documento na mesma página ou frame caso oatributo target não seja utilizado. 1 < html > 2 < head > 3 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 4 < title > Exemplo de uso da tag a com o atributo target </ title > 5 </ head > 6 < body > 7 <p > <a href = " pagina1 . html " target = " _blank " > Abre em outra janela / aba </ a > </ p > 8 <p > <a href = " pagina2 . html " target = " _self " > Abre na mesma janela </ a > </ p > 9 <p > <a href = " pagina3 . html " > Abre na mesma janela </ a > </ p >10 </ body >11 </ html > Código HTML 2.15: Exemplo de uso da tag a com o atributo target Importante Ao longo da evolução do HTML, a tag frame foi caindo em desuso até que no HTML5 foi totalmente retirada da especificação. Contudo a grande maioria dos navegadores ainda interpretam a tag corretamente mesmo dentro de um documento HTML5. Porém, devemos nos lembrar que ainda estamos num momento de transição para o HTML5. Logo, para evitar problemas no futuro, evite o uso da tag frame ao máximo. Exercícios de Fixação 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 página externa e outros trêsque apontem para uma página interna de maneiras diferentes. Lembre-se de criar também a páginapara a qual o seu link interno irá apontar.12 www.k19.com.br
  22. 22. 13 HTML 1 < html > 2 < head > 3 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 4 < title > Exemplo de uso da tag a com o atributo target </ title > 5 </ head > 6 < body > 7 <p > <a href = " http :// www . k19 . com . br " target = " _blank " > Link externo </ a > </ p > 8 <p > <a href = " pagina2 . html " target = " _self " > Link interno </ a > </ p > 9 <p > <a href = " pagina2 . html " target = " _top " > Link interno </ a > </ p >10 <p > <a href = " pagina2 . html " > Link interno </ a > </ p >11 </ body >12 </ html > Código HTML 2.16: pagina1.html1 < html >2 < head >3 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " >4 < title > Exemplo de uso da tag a com o atributo target </ title >5 </ head >6 < body >7 < h1 > Página 2 </ h1 >8 </ body >9 </ html > Código HTML 2.17: pagina2.html Exercícios Complementares 5 Crie vários links em uma página e para cada link escolha um target diferente. Crie tambémquantas páginas de destino forem necessárias (caso seja necessário). 6 Pesquise na internet como criar um iframe dentro de um documento HTML. Em seguida, crieuma página com alguns links e um iframe. Crie também alguns links na página contida no iframe.Para cada link em ambas as páginas, utilize valores diferentes para o atributo target e observe osresultados. Âncoras Além de criar links para outras páginas, podemos criar links para uma determinada seção dentroda própria página na qual o link se encontra ou dentro de outra página. Esse recurso chama-seancoragem, pois as seções para as quais queremos criar um link devem possuir uma âncora. Para criarmos uma âncora devemos utilizar novamente a tag a, porém sem o atributo href. Dessavez utilizaremos o atributo name para identificar a seção através de um nome. O link também muda levemente, pois agora ao invés de passar somente o nome do arquivo dapágina como valor do atributo href devemos passar o nome da seção prefixada com o caractere #.1 < html >2 < head >3 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > www.facebook.com/k19treinamentos 13
  23. 23. HTML 14 4 < title > Exemplo de uso da tag a como âncora </ title > 5 </ head > 6 < body > 7 <p > <a href = " # mais_info " > Veja mais informações </ a > </ p > 8 <p > <a href = " pagina2 . html # outra_ancora " > Âncora em outra página </ a > </ p > 9 ...10 ...11 ...1213 <a name = " mais_info " > Mais informações </ a >1415 <p >16 ...17 ...18 ...19 </ p >20 </ body >21 </ html > Código HTML 2.22: Exemplo de uso da tag a como âncora Lembre-se Até a versão 4 do HTML e no XHTML, a especificação dizia para utilizarmos o atributo name da tag a para criarmos as âncoras. Porém, no HTML5, a recomendação do W3C é que o atributo id seja utilizado para tal propósito. Desenvolvedores mais preocupados em estar sempre atualizados podem ficar tranquilos e utilizar somente o atributo id ao invés do name, pois os navegadores mais modernos conseguem interpretar o uso de ambos os atributos em qualquer versão do HTML. Exercícios de Fixação 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 própria página. Dica: insira um conteúdosuficientemente grande para que a barra de rolagem vertical do navegador apareça e coloque a ân-cora no final da página. 1 < html > 2 < head > 3 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 4 < title > Exercício sobre âncoras </ title > 5 </ head > 6 < body > 7 <p > <a href = " # sobre " > Sobre o texto dessa página </ a > </ p > 8 9 <p > 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 . </ p >13 <p > ... </ p >14 <p > ... </ p >15 <p > ... </ p >1617 <p > 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 . </ p >2014 www.k19.com.br
  24. 24. 15 HTML21 <a name = " sobre " > Sobre o texto dessa página </ a >22 <p >O texto dessa página foi gerado através do site :23 <a href = " http :// www . lipsum . com / " > http :// www . lipsum . com / </ a > </ p >24 </ body >25 </ html > Código 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 conteúdo suficientemente grande para que a barra de rolagem verti-cal do navegador apareça e coloque a âncora no final da página. 1 < html > 2 < head > 3 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 4 < title > Exercício sobre âncoras </ title > 5 </ head > 6 < body > 7 < h1 > Ancora página 2 </ h1 > 8 9 <p > 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 </ p >13 <p > ... </ p >14 <p > ... </ p >15 <p > ... </ p >1617 <p > 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 . </ p >2021 <a name = " outra_ancora " > Mais uma âncora </ a >2223 <p > Se você chegou aqui deu tudo certo ! :) </ p >24 </ body >25 </ html > Código 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 < html > 2 < head > 3 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 4 < title > Exercício sobre âncoras </ title > 5 </ head > 6 < body > 7 <p > <a href = " # sobre " > Sobre o texto dessa página </ a > </ p > 8 <p > <a href = " ancora - pagina2 . html # outra_ancora " > Âncora em outra página </ a > </ p > 910 <p > 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 . </ p >14 <p > ... </ p >15 <p > ... </ p >16 <p > ... </ p >1718 <p > 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 . </ p > www.facebook.com/k19treinamentos 15
  25. 25. HTML 162122 <a name = " sobre " > Sobre o texto dessa página </ a >23 <p >O texto dessa página foi gerado através do site :24 <a href = " http :// www . lipsum . com / " > http :// www . lipsum . com / </ a > </ p >25 </ body >26 </ html > Código HTML 2.25: ancora-pagina1.html Exercícios Complementares 7 Crie dois documentos HTML. No primeiro crie um link que aponte para o site da K19 e tambémcoloque 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 também umlink qualquer ou um texto. 8 Dentro de um documento HTML crie três links. Dois devem apontar para âncoras de páginasexternas e o último link deve aparecer no final da página e apontar para uma âncora no topo daprópria página. Imagens Certamente, os sites na internet seriam muito entediantes se não fosse possível adicionar ima-gens ao conteúdo das páginas. Como não queremos que as nossas páginas fiquem muito monóto-nas, neste capítulo, utilizaremos a tag img para melhorar um pouco a aparência das páginas 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 < html > 2 < head > 3 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 4 < title > Exemplo de uso da tag img </ title > 5 </ head > 6 < body > 7 < h1 > K19 Treinamentos </ h1 > 8 < img src = " http :// www . k19 . com . br / css / img / main - header - logo . png " / > 910 < h2 > Cursos </ h2 >11 <p >12 < img src = " http :// www . k19 . com . br / css / img / k01 - logo - large . png " / >13 K01 - Lógica de Programação14 </ p >15 <p >16 < img src = " http :// www . k19 . com . br / css / img / k02 - logo - large . png " / >17 K02 - Desenvolvimento Web com HTML , CSS e JavaScript18 </ p >19 <p >20 < img src = " http :// www . k19 . com . br / css / img / k03 - logo - large . png " / >21 K03 - SQL e Modelo Relacional22 </ p >16 www.k19.com.br
  26. 26. 17 HTML23 <p >24 < img src = " http :// www . k19 . com . br / css / img / k11 - logo - large . png " / >25 K11 - Orientação a Objetos em Java26 </ p >27 <p >28 < img src = " http :// www . k19 . com . br / css / img / k12 - logo - large . png " / >29 K12 - Desenvolvimento Web com JSF2 e JPA230 </ p >31 ...32 ...33 ...34 </ body >35 </ html > Código HTML 2.29: Exemplo de uso da tag img Figura 2.4: Exemplo de uso da tag img Exercícios de Fixação10 Crie um documento HTML em um arquivo chamado imagem.html na pasta html que contenhaalguns elementos IMG.1 < html >2 < head >3 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " >4 < title > Exemplo de uso da tag img </ title >5 </ head > www.facebook.com/k19treinamentos 17
  27. 27. HTML 18 6 < body > 7 < h1 > K19 Treinamentos </ h1 > 8 < img src = " http :// www . k19 . com . br / css / img / main - header - logo . png " / > 910 < h2 > Cursos </ h2 >11 <p >12 < img src = " http :// www . k19 . com . br / css / img / k01 - logo - large . png " / >13 K01 - Lógica de Programação14 </ p >15 <p >16 < img src = " http :// www . k19 . com . br / css / img / k02 - logo - large . png " / >17 K02 - Desenvolvimento Web com HTML , CSS e JavaScript18 </ p >19 <p >20 < img src = " http :// www . k19 . com . br / css / img / k03 - logo - large . png " / >21 K03 - SQL e Modelo Relacional22 </ p >23 </ body >24 </ html > Código HTML 2.30: imagem.html Exercícios Complementares 9 Em um documento HTML insira no mínimo duas imagens utilizando o elemento IMG. Tabelas Suponha que você esteja desenvolvendo o site de uma empresa e precisa apresentar alguns rela-tórios em páginas HTML. Considere que os dados desses relatórios são 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 < html > 2 < head > 3 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 4 < title > Exemplo de uso da tag table </ title > 5 </ head > 6 < body > 7 < h1 > Carros </ h1 > 8 9 < table >10 < tr >11 < th > Marca </ th >12 < th > Modelo </ th >13 < th > Ano </ th >14 </ tr >15 < tr >16 < td > Toyota </ td >17 < td > Corolla </ td >18 < td > 2010 </ td >19 </ tr >20 < tr >21 < td > Honda </ td >22 < td > Civic </ td >23 < td > 2011 </ td >18 www.k19.com.br
  28. 28. 19 HTML24 </ tr >25 < tr >26 < td > Mitsubishi </ td >27 < td > Lancer </ td >28 < td > 2012 </ td >29 </ tr >30 < tr >31 < td colspan = " 3 " > Última atualização : 06/2012 </ td >32 </ tr >33 </ table >34 </ body >35 </ html > Código HTML 2.32: Exemplo de uso da tag table Figura 2.5: Exemplo de uso da tag table Perceba que a tag table não é 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 célula de cabeçalho • td - define uma célula Existe uma outra forma de criar a mesma tabela:1 < html > www.facebook.com/k19treinamentos 19
  29. 29. HTML 20 2 < head > 3 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 4 < title > Exemplo de uso da tag table </ title > 5 </ head > 6 < body > 7 < h1 > Carros </ h1 > 8 9 < table >10 < thead >11 < tr >12 < th > Marca </ th >13 < th > Modelo </ th >14 < th > Ano </ th >15 </ tr >16 </ thead >17 < tfoot >18 < tr >19 < td colspan = " 3 " > Última atualização : 06/2012 </ td >20 </ tr >21 </ tfoot >22 < tbody >23 < tr >24 < td > Toyota </ td >25 < td > Corolla </ td >26 < td > 2010 </ td >27 </ tr >28 < tr >29 < td > Honda </ td >30 < td > Civic </ td >31 < td > 2011 </ td >32 </ tr >33 < tr >34 < td > Mitsubishi </ td >35 < td > Lancer </ td >36 < td > 2012 </ td >37 </ tr >38 </ tbody >39 </ table >40 </ body >41 </ html > Código HTML 2.33: Exemplo de uso da tag table20 www.k19.com.br
  30. 30. 21 HTML Figura 2.6: Exemplo de uso da tag table Repare que visualmente não mudou absolutamente nada. Além disso, apareceram mais algumastags: thead, tfoot e tbody. O que significam essas tags? • thead - define o cabeçalho da tabela • tfoot - define o rodapé da tabela • tbody - define o corpo da tabela Por que complicar? Qual o motivo da existência dessas tags? • A tag thead, assim como a tfoot, servem para agrupar as linhas de cabeçalho e de rodapé, respectivamente. • O código fica mais claro. • Facilita a aplicação de estilos CSS (através do seletor de elemento) • Pode permitir que o conteúdo do corpo da tabela possua rolagem*. • Ao imprimir a página com uma tabela muito extensa, pode permitir que o cabeçalho e rodapé sejam replicados em todas as páginas*. * Esses recursos podem existir ou não, pois os desenvolvedores de navegadores podem decidirnão implementá-los. Esses recursos são sugestões da especificação. www.facebook.com/k19treinamentos 21
  31. 31. HTML 22 Outros dois atributos importantes para a construção de tabelas são 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 célula ignore onúmero de colunas definidas em seu valor. Analogamente, o atributo rowspan faz o mesmo, porémcom linhas. Exercícios de Fixação11 Crie uma página HTML em um arquivo chamado tabela.html na pasta html que contenha umatabela de acordo com a imagem abaixo: Figura 2.7: Exercício para a tag table As linhas vermelhas foram colocadas na imagem apenas para facilitar a visualização do pro-blema.1 < html >2 < head >3 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " >4 < title > Exercício para a tag table </ title >5 </ head >6 < body >7 < table >8 < thead >9 < tr >22 www.k19.com.br
  32. 32. 23 HTML10 < th > Marca </ th >11 < th > Modelo </ th >12 < th > Ano </ th >13 </ tr >14 </ thead >15 < tfoot >16 < tr >17 < td colspan = " 3 " > Última atualização : 06/2012 </ td >18 </ tr >19 </ tfoot >20 < tbody >21 < tr >22 < td rowspan = " 2 " > Toyota </ td >23 < td > Corolla </ td >24 < td > 2010 </ td >25 </ tr >26 < tr >27 < td > Camry </ td >28 < td > 2011 </ td >29 </ tr >3031 < tr >32 < td rowspan = " 3 " > Honda </ td >33 < td > Civic </ td >34 < td > 2004 </ td >35 </ tr >36 < tr >37 < td > Fit </ td >38 < td > 2012 </ td >39 </ tr >40 < tr >41 < td > City </ td >42 < td > 2011 </ td >43 </ tr >4445 < tr >46 < td > Mitsubishi </ td >47 < td > Lancer </ td >48 < td > 2012 </ td >49 </ tr >50 </ tbody >51 </ table >52 </ body >53 </ html > Código HTML 2.34: tabela.html Exercícios Complementares10 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 três tipos de listas e cada uma delas deve ser utilizada deacordo com a sua semântica, ou seja, você deve escolher um tipo de lista para cada situação. Os três tipos possíveis de listas são: www.facebook.com/k19treinamentos 23
  33. 33. HTML 24 • Lista de definição - utilizada para exibir definições de termos. Funciona como nos dicionários, no qual temos uma palavra e em seguida o seu significado. • Lista ordenada - utilizada para exibir qualquer conteúdo de forma ordenada. • Lista sem ordem - utilizada para exibir qualquer conteúdo sem ordenação.Lista de definição Para criarmos uma lista de definição 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 definição écomposto por um par de elementos dt e dd. 1 < html > 2 < head > 3 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 4 < title > Exemplo de uso da tag dl </ title > 5 </ head > 6 < body > 7 < h1 > Cursos - K19 Treinamentos </ h1 > 8 9 < dl >10 < dt > K01 - Lógica de Programação </ dt >11 < dd >12 Conhecimentos em Lógica de Programação é o pré - requisito fundamental13 para que uma pessoa consiga aprender qualquer Linguagem de Programação ...14 </ dd >15 < dt > K02 - Desenvolvimento Web com HTML , CSS e JavaScript </ dt >16 < dd >17 Atualmente , praticamente todos os sistemas corporativos possuem18 interfaces web . Para quem deseja atuar no mercado de desenvolvimento ...19 </ dd >20 < dt > K03 - SQL e Modelo Relacional </ dt >21 < dd >22 Como as aplicações corporativas necessitam armazenar dados é fundamental23 que os desenvolvedores possuam conhecimentos sobre persistência de dados .24 </ dd >25 </ dl >26 </ body >27 </ html > Código HTML 2.36: Exemplo de uso da tag dl24 www.k19.com.br
  34. 34. 25 HTML Figura 2.8: Exemplo de uso da tag dl Exercícios de Fixação12 Crie um documento HTML em um arquivo chamado restaurante.html na pasta html que con-tenha o cardápio de um restaurante com os nomes dos seus pratos e uma breve descrição sobre osmesmos. 1 < html > 2 < head > 3 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 4 < title > Menu - K19 Pizzaria </ title > 5 </ head > 6 < body > 7 < h1 > Menu - K19 Pizzaria </ h1 > 8 9 < dl >10 < dt >À moda da casa </ dt >11 < dd >12 Presunto coberto com mussarela , ovos e palmito .13 </ dd >14 < dt >À moda do pizzaiolo </ dt >15 < dd >16 Mussarela , presunto , ovos e bacon .17 </ dd >18 < dt > Aliche </ dt >19 < dd >20 Aliche , parmesão e rodelas de tomate .21 </ dd > www.facebook.com/k19treinamentos 25
  35. 35. HTML 2622 </ dl >23 </ body >24 </ html > Código HTML 2.37: restaurante.html Exercícios Complementares11 Crie um documento HTML que contenha uma lista de alguns pontos turísticos do Brasil de quevocê tenha conhecimento e cite algumas atrações 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 < html > 2 < head > 3 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 4 < title > Exemplo de uso da tag ol </ title > 5 </ head > 6 < body > 7 < h1 > Macarrão instantâneo - K19 Receitas </ h1 > 8 < h2 > Modo de preparo </ h2 > 910 < ol >11 < li > Ferver 600 ml de água em uma panela . </ li >12 < li > Retirar o macarrão do pacote . </ li >13 < li > Colocar o macarrão na panela no fogo baixo . </ li >14 < li > Cozinhar o macarrão por 3 min . </ li >15 < li > Temperar a gosto . </ li >16 </ ol >17 </ body >18 </ html > Código HTML 2.39: Exemplo de uso da tag ol26 www.k19.com.br
  36. 36. 27 HTML Figura 2.9: Exemplo de uso da tag ol Exercícios de Fixação13 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 eletrônico para a operação de saque. 1 < html > 2 < head > 3 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 4 < title > Operação de saque - Manual do caixa eletrônico - K19 Bank </ title > 5 </ head > 6 < body > 7 < h1 > Operação de saque - Manual do caixa eletrônico - K19 Bank </ h1 > 8 9 < ol >10 < li > Insira o cartão </ li >11 < li > Digite a senha </ li >12 < li > Escolha a opção de saque </ li >13 < li > Informe o valor que deseja sacar </ li >14 < li > Insira o cartão novamente </ li >15 < li > Aguarde até a liberação do dinheiro </ li >16 </ ol >17 </ body >18 </ html > Código HTML 2.40: manual.html www.facebook.com/k19treinamentos 27
  37. 37. HTML 28 Exercícios Complementares12 Crie um documento HTML que contenha um manual que explique passo-a-passo a instalação,manutenção ou manuseio de um aparelho eletrônico.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 < html > 2 < head > 3 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 4 < title > Exemplo de uso da tag dl </ title > 5 </ head > 6 < body > 7 < h1 > K02 - Desenvolvimento Web com HTML , CSS e JavaScript </ h1 > 8 < h2 >Pré - requisitos </ h2 > 910 < ul >11 < li > Conhecimento de algum sistema operacional ( Windows / Linux / MacOS X ) </ li >12 < li > Lógica de programação </ li >13 </ ul >14 </ body >15 </ html > Código HTML 2.42: Exemplo de uso da tag ul28 www.k19.com.br
  38. 38. 29 HTML Figura 2.10: Exemplo de uso da tag ul Exercícios de Fixação14 Crie um documento HTML em um arquivo chamado lista-curso.html na pasta html que con-tenha a lista dos cursos da Formação Básica da K19. 1 < html > 2 < head > 3 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 4 < title > K00 - Formação Básica - K19 Treinamentos </ title > 5 </ head > 6 < body > 7 < dl > 8 < h1 > K00 - Formação Básica </ h1 > 910 < ul >11 < li > K01 - Lógica de Programação </ li >12 < li > K02 - Desenvolvimento Web com HTML , CSS e JavaScript </ li >13 < li > K03 - SQL e Modelo Relacional </ li >14 </ ul >15 </ dl >16 </ body >17 </ html > Código HTML 2.43: lista-cursos.html www.facebook.com/k19treinamentos 29
  39. 39. HTML 30 Exercícios Complementares13 Crie um documento HTML que contenha a lista dos cursos da Formação Desenvolvedor Java daK19. Formulário Para trazermos um pouco mais de interatividade para as nossas páginas, podemos utilizar oselementos de formulário. Esses elementos recebem algum tipo de entrada do usuário, seja atravésde 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 conjunto com o atributo name é possível 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 com o atributo name é possível que se crie um grupo de radios no qual apenas um radio seja "che- cado". • button - cria um botão. Através do atributo value definimos o texto do botão. • submit - cria um botão para o envio do formulário. Através do atributo value definimos o texto do botão. • file - cria um botão que, ao ser clicado, abre uma caixa de diálogo para a escolha de um arquivo no computador do usuário. • reset - cria um botão que descarta todas as alterações feitas dentro de um formulário. Através do atributo value definimos o texto do botão. • image - cria um botão para o envio do formulário. Dese ser utilizado em conjunto com o atri- buto src para que uma imagem de fundo seja utilizada no botão. • hidden - cria um elemento que não fica visível para o usuário, porém pode conter um valor que será enviado pelo formulário. Existem outros valores possíveis para o atributo type, porém eles fazem parte da especificaçãodo HTML5 e nem todos os navegadores suportam tais valores.1 < html >2 < head >3 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " >4 < title > Exemplo de uso da tag input </ title >5 </ head >6 < body >30 www.k19.com.br
  40. 40. 31 HTML 7 < form action = " pagina . html " method = " get " > 8 <p > 9 text :10 < input type = " text " / >11 </ p >12 <p >13 password :14 < input type = " password " / >15 </ p >16 <p >17 checkboxes :18 < input type = " checkbox " name = " checkgroup " / >19 < input type = " checkbox " name = " checkgroup " / >20 < input type = " checkbox " name = " checkgroup " / >21 </ p >22 <p >23 radios :24 < input type = " radio " name = " checkgroup " / >25 < input type = " radio " name = " checkgroup " / >26 < input type = " radio " name = " checkgroup " / >27 </ p >28 <p >29 button :30 < input type = " button " value = " Botão " / >31 </ p >32 <p >33 submit :34 < input type = " submit " value = " Enviar " / >35 </ p >36 <p >37 file :38 < input type = " file " / >39 </ p >40 <p >41 reset :42 < input type = " reset " value = " Descartar alterações " / >43 </ p >44 <p >45 image :46 < input47 type = " image " src = " http :// www . k19 . com . br / css / img / main - header - logo . png " / >48 </ p >49 <p >50 hidden :51 < input type = " hidden " value = " valor escondido " / >52 </ p >53 </ form >54 </ body >55 </ html > Código HTML 2.45: Exemplo de uso da tag input www.facebook.com/k19treinamentos 31
  41. 41. HTML 32 Figura 2.11: Exemplo de uso da tag inputA tag select A tag select permite ao usuário 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 através de elementos option. Tais elementos devem ser filhosdiretos ou indiretos de elementos select. Além disso, cada item pode conter o atributo chamadovalue para informar o valor associado a uma determinada opção. 1 < html > 2 < head > 3 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 4 < title > Exemplo de uso da tag select </ title > 5 </ head > 6 < body > 7 < form action = " pagina . html " method = " get " > 8 <p > 9 Selecione uma cidade :10 < select >11 < option value = " sao - paulo " > São Paulo </ option >12 < option value = " rio - de - janeiro " > Rio de Janeiro </ option >13 < option value = " porto - alegre " > Porto Alegre </ option >14 < option value = " curitiba " > Curitiba </ option >15 </ select >16 </ p >1718 <p >19 Selecione uma ou mais categorias de produtos ( mantenha a tecla20 " control " ( ou " command " no Mac ) pressionada para escolher mais de uma21 categoria ) :22 < select multiple = " multiple " >32 www.k19.com.br
  42. 42. 33 HTML23 < option value = " desktops " > Desktops </ option >24 < option value = " notebooks " > Notebooks </ option >25 < option value = " tablets " > Tablets </ option >26 < option value = " celulares " > Celulares </ option >27 </ select >28 </ p >29 </ form >30 </ body >31 </ html > Código 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 opções de um elemento select, podemos utilizar o ele-mento optgroup em conjunto com o atributo label. Veja o exemplo: 1 < html > 2 < head > 3 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 4 < title > Exemplo de uso da tag select </ title > 5 </ head > 6 < body > 7 < form action = " pagina . html " method = " get " > 8 <p > 9 Selecione uma cidade :10 < select >11 < optgroup label = " Região Sudeste " >12 < option value = " sao - paulo " > São Paulo </ option >13 < option value = " rio - de - janeiro " > Rio de Janeiro </ option >14 </ optgroup >15 < optgroup label = " Região Sul " >16 < option value = " porto - alegre " > Porto Alegre </ option > www.facebook.com/k19treinamentos 33
  43. 43. HTML 3417 < option value = " curitiba " > Curitiba </ option >18 </ optgroup >19 </ select >20 </ p >2122 <p >23 Selecione uma ou mais categorias de produtos ( mantenha a tecla24 " control " ( ou " command " no Mac ) pressionada para escolher mais de uma25 categoria ) :26 < select multiple = " multiple " >27 < optgroup label = " De mesa " >28 < option value = " desktops " > Desktops </ option >29 </ optgroup >30 < optgroup label = " Portáteis " >31 < option value = " notebooks " > Notebooks </ option >32 < option value = " tablets " > Tablets </ option >33 < option value = " celulares " > Celulares </ option >34 </ optgroup >35 </ select >36 </ p >37 </ form >38 </ body >39 </ html > Código HTML 2.47: Exemplo de uso da tag select Figura 2.13: Exemplo de uso da tag selectA tag textarea A tag textarea exibe uma caixa de texto na qual o usuário poderá inserir um texto qualquer. Adiferença para a tag input com o atributo type com o valor text é que a tag textarea permite ainserção de textos mais longos e com quebras de linha.34 www.k19.com.br

×