Desenvolvimento Web com HTML, CSS e Javascript

(1)

TREINAMENTOS

Desenvolvimento Web com

HTML, CSS e Javascript

(2)

(3)

Desenvolvimento Web com HTML, CSS e Javascript

9 de abril de 2013

Sumário

i

Sobre a K19

1 Seguro Treinamento

2 Termo de Uso

3 Cursos

4

1 Introdução

1

1.1 Client Side e Server Side

. . . .

1

1.2 HTML, CSS e Javascript

. . . .

2

2 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

(4)

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

. . . .

37

3 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

. . . .

69

4 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

. . . .

83 A

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

(5)

iii

S

UMÁRIO

A.8 Métodos das Strings

. . . .

99

A.9 Exercícios de Fixação

. . . 100

A.10 Exercícios Complementares

. . . 103

B 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

. . . 121

C 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

. . . 127

D CSS3

129

D.1 Bordas arredondadas

. . . 129

D.2 Sombras

. . . 130

D.3 Transformações

. . . 136

D.4 Fontes no CSS3

. . . 138

E

Mais Propriedades CSS

141

E.1 Propriedades de tabela

. . . 141

E.2 Propriedades de borda

. . . 142

E.3 Propriedades de conteúdo gerado

. . . 143

E.4 Propriedades de posicionamento

. . . 144

F

Quizzes

147

(6)

(7)

1 S

UMÁRIO

Sobre 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 tornam

capacitados 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 atualizados

didática e tecnicamente.

(8)

S

UMÁRIO

2 Seguro 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 desejar

mediante 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 ao

alunos que desejam utilizar o Seguro Treinamento. O valor da franquia para utilizar o Seguro

Treina-mento é 10% do valor total do curso.

(9)

3 S

UMÁRIO

Termo de Uso

Todo o conteúdo desta apostila é propriedade da K19 Treinamentos. A apostila pode ser utilizada

livremente para estudo pessoal . Além disso, este material didático pode ser utilizado como material

de apoio em cursos de ensino superior desde que a instituição correspondente seja reconhecida pelo

MEC (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 sem

o prévio consentimento formal, por escrito, da K19 Treinamentos. O uso indevido está sujeito às

medidas legais cabíveis.

(10)

S

UMÁRIO

4 K01- Lógica de Programação

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

K31 - C# e Orientação a Objetos

K32 - Desenvolvimento Web com ASP.NET MVC

TREINAMENTOSTREINAMENTOSTREI

NAMENTOS

Conheça 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

(11)

I

NTRODUÇÃO

C

A

P

Í

T

U

L

O

1

Durante muito tempo, a ideia de desenvolvimento web ficou associada apenas a construção de

pá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 sociais

ganharam forças graças à grande interatividade permitida entre os usuários. Gravadoras de música

passaram a vender seus títulos através de canais especializados. No meio corporativo, as empresas

passaram a adotar sistemas web para controlar as suas tarefas administrativas. Enfim, necessidades

antes inexistentes surgiram em uma velocidade muito grande. Muitos sites deixaram de ser simples

páginas para se tornarem verdadeiras aplicações.

Há cerca de 15 anos, era muito comum que um único desenvolvedor fosse responsável por todo

o desenvolvimento de uma aplicação web. Essa pessoa era chamada de webmaster. Com o passar do

tempo, o papel do webmaster como era conhecido foi desaparecendo. A complexidade e volume de

trabalho para o desenvolvimento de uma aplicação web se tornaram muito grande para apenas uma

pessoa 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 apenas

gerencia 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 classificadas

em dois grupos: desenvolvedores front-end e back-end. Em geral os desenvolvedores front-end são

responsá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). Os

desenvolvedores front-end devem conhecer bem o funcionamento dos navegadores e das

tecnolo-gias e linguagens relacionadas a eles. Essas tecnolotecnolo-gias e linguagens são categorizadas como client

side. Atualmente, as principais linguagens e tecnologias client side são HTML, CSS, Javascript, Adobe

Flash, 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ção

dos profissionais em determinadas tecnologias que podem tender mais para o front-end ou para o

(12)

I

NTRODUÇÃO

2 back-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 bem

específico que podemos resumir da seguinte maneira: o código HTML será responsável por prover

o conteúdo de uma página, o código CSS cuidará da formatação visual do conteúdo apresentado e o

có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.

(13)

HTML

C

A

P

Í

T

U

L

O

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 linguagem

de marcação originalmente proposta por Tim Berners-Lee no final da década de 1980. O objetivo do

Tim Barners-Lee era criar um mecanismo simples que pudesse ser utilizado por qualquer pessoa que

quisesse disseminar documentos científicos.

Desde sua proposta até os dias de hoje, a linguagem HTML sofreu diversas alterações. A cada

versão, novos recursos são adicionados e problemas corrigidos. A versão mais atual da especificação

da 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 recursos

do HTML5.

As especificações da linguagem HTML são publicadas pelo World Wide Web Consortium mais

conhecido por sua sigla W3C. Além do HTML, o W3C também é responsável por linguagens como o

XML, 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 e

possivelmente filhos que podem ser um texto simples ou outros elementos. Cada elemento deve

obrigatoriamente possuir uma tag e ela deve ser definida entre parênteses angulares (< e >). Veja o

exemplo:

1 <html> 2 <head>

3 <meta http - e qui v =" Content - Type " c o n t e n t=" text / html ; c h a r s e t = UTF -8 "> 4 <t itl e> E x e m p l o da e s t r u t u r a b á s i c a de um d o c u m e n t o HTML </tit le> 5 </head> 6 <body> 7 <p> Olá m und o ! </p> 8 </body> 9 </html>

(14)

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 dessa}

pasta, crie um diretório chamado html. Para facilitar, utilize apenas letras minúsculas em todas as

pastas e arquivos que criarmos durante o curso.

2

_{Agora, utilizando um editor de texto, crie um novo arquivo chamado ola-mundo.html e salve-o}

dentro da pasta html. Em seguida, insira o seguinte código dentro do arquivo ola-mundo.html:

1 <html>

2 <head>

3 <meta http - e qui v =" Content - Type " c o n t e n t=" text / html ; c h a r s e t = UTF -8 "> 4 <t itl e> E x e m p l o da e s t r u t u r a b á s i c a de um d o c u m e n t o HTML </tit le> 5 </head> 6 <body> 7 <p> Olá m und o ! </p> 8 </body> 9 </html> Código HTML 2.2: ola-mundo.html

(15)

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 bem

definido. Para o funcionamento correto das páginas de uma aplicação web, é fundamental respeitar

o propósito de cada elemento e utilizá-lo nas condições corretas. Muitos autores utilizam o termo

semântica HTML ao se referirem ao uso correto dos elementos da linguagem HTML. Por exemplo:

1 <html> 2 <head>

3 <meta http - e qui v =" Content - Type " c o n t e n t=" text / html ; c h a r s e t = UTF -8 "> 4 <t itl e> E x e m p l o de uso c o r r e t o da s e m â n t i c a HTML </tit le>

5 </head> 6 <body>

7 <p> Este é um t ext o para m o s t r a r o s i g n i f i c a d o 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 - e qui v =" Content - Type " c o n t e n t=" text / html ; c h a r s e t = UTF -8 "> 4 <t itl e> Meus a m i g o s - Site do Jon as - C r i a d o pelo Jon as </tit le> 5 </head> 6 <body> 7 <a d d r e s s> 8 R a f a e l C o s e n t i n o 9 r a f a e l . c o s e n t i n o @ k 1 9 . com . br 10 S óci o f u n d a d o r da K19 T r e i n a m e n t o s

11 Av . B r i g a d e i r o F ari a Lima , 1571 - J a r d i m P a u l i s t a n o - São Paulo , SP

12 CEP 01452 -001 13 </a d d r e s s> 14 15 <a d d r e s s> 16 M a r c e l o M a r t i n s 17 m a r c e l o . m a r t i n s @ k 1 9 . com . br 18 S óci o f u n d a d o r da K19 T r e i n a m e n t o s

19 Av . B r i g a d e i r o F ari a Lima , 1571 - J a r d i m P a u l i s t a n o - São Paulo , SP

20 CEP 01452 -001

21 </a d d r e s s> 22 </body> 23 </html>

Código HTML 2.5: Exemplo de uso incorreto da semântica HTML

(16)

HTML

6 deve ser utilizado para fornecer informações de contato dos autores do documento ou da maior parte

do 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 (repare

no título da página). O autor da página é o Jonas e não o Rafael ou o Marcelo. Portanto, o elemento

address

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ço

definido pelo elemento pai. Esse é o comportamento dos elementos de bloco que discutiremos com

mais 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 de

linha 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 - e qui v =" Content - Type " c o n t e n t=" text / html ; c h a r s e t = UTF -8 "> 4 <t itl e> E x e m p l o de q u e b r a de lin ha em um p a r á g r a f o </tit le>

5 </head> 6 <body>

7 <p> Um t ext o bem l ong o . Lon go mes mo ! Este p a r á g r a f o ser ve para d e m o n s t r a r 8 o c o m p o r t a m e n t o da q u e b r a de lin ha aut omá tic a , ou seja , sem u t i l i z a r 9 n e n h u m r e c u r s o para que a q u e b r a o c o r r a . </p>

10

11 <p> Já este p a r á g r a f o d e m o n s t r a a q u e b r a de lin ha f o r ç a d a . <br/ > P e r c e b e u ? </p> 12 </body>

13 </html>

(17)

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 - e qui v =" Content - Type " c o n t e n t=" text / html ; c h a r s e t = UTF -8 "> 4 <t itl e> E x e m p l o de q u e b r a de lin ha em um p a r á g r a f o </tit le>

5 </head> 6 <body>

7 <p> Um t ext o bem l ong o . Lon go mes mo ! Este p a r á g r a f o ser ve para d e m o n s t r a r 8 o c o m p o r t a m e n t o da q u e b r a de lin ha aut omá tic a , ou seja , sem u t i l i z a r 9 n e n h u m r e c u r s o para que a q u e b r a o c o r r a . </p> 10 11 <p> Já este p a r á g r a f o d e m o n s t r a a q u e b r a de lin ha f o r ç a d a . <br/ > P e r c e b e u ? </p> 12 </body> 13 </html> Código HTML 2.7: p-quebra-de-linha.html

Exercícios Complementares

(18)

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 tags

de 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 - e qui v =" Content - Type " c o n t e n t=" text / html ; c h a r s e t = UTF -8 "> 4 <t itl e> E x e m p l o de c a b e ç a l h o s </tit le> 5 </head> 6 <body> 7 <h1> T í t u l o 1 </h1> 8 <h2> T í t u l o 2 </h2> 9 <h3> T í t u l o 3 </h3> 10 <h4> T í t u l o 4 </h4> 11 <h5> T í t u l o 5 </h5> 12 <h6> T í t u l o 6 </h6> 13 </body> 14 </html>

(19)

9 HTML

Figura 2.3: Exemplo de cabeçalhos

Perceba que cada nível possui um tamanho diferente de fonte. Esse tamanho é determinado pelo

navegador 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 uso

correto das tags de cabeçalho faz parte das técnicas de SEO (Search Engine Optimization) que, como

o próprio nome já indica, são técnicas que ajudam a melhorar o ranqueamento de páginas dentro

dos buscadores.

De acordo com as técnicas de SEO devemos tomar os seguintes cuidados ao utilizarmos as tags

de 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 pasta}

html. Em seguida, abra esse arquivo em um navegador.

(20)

HTML

10

2 <head>

3 <meta http - e qui v =" Content - Type " c o n t e n t=" text / html ; c h a r s e t = UTF -8 "> 4 <t itl e> K02 - D e s e n v o l v i m e n t o Web com HTML , CSS e J a v a s c r i p t </tit le> 5 </head>

6 <body>

7 <h1> K02 - D e s e n v o l v i m e n t o Web com HTML , CSS e J a v a s c r i p t </h1> 8

9 <p> A tua lme nte , p r a t i c a m e n t e tod os os s i s t e m a s c o r p o r a t i v o s p o s s u e m 10 i n t e r f a c e s web . Para quem d e s e j a atu ar no m e r c a d o de d e s e n v o l v i m e n t o 11 de software , é o b r i g a t ó r i o o c o n h e c i m e n t o das l i n g u a g e n s : HTML , CSS 12 e J a v a S c r i p t . </p>

13

14 <p> E ssa s l i n g u a g e n s são u t i l i z a d a s para o d e s e n v o l v i m e n t o da c a m a d a de 15 a p r e s e n t a ç ã o das a p l i c a ç õ e s web . </p>

16

17 <h2> Pré - r e q u i s i t o s </h2> 18

19 <p> F a m i l i a r i d a d e com alg um s i s t e m a o p e r a c i o n a l ( W i n d o w s / Lin ux / Mac OS X ) </p> 20 <p> L ó g i c a de p r o g r a m a ç ã o </p> 21 22 <h2> A g e n d a </h2> 23 24 <h3> Aos d o m i n g o s </h3> 25 26 <p> xx / xx / xxxx das 0 8:0 0 às 14: 00 </p> 27 <p> xx / xx / xxxx das 1 4:0 0 às 20: 00 </p> 28 29 <h3> Aos s á b a d o s </h3> 30 31 <p> xx / xx / xxxx das 0 8:0 0 às 14: 00 </p> 32 <p> xx / xx / xxxx das 1 4:0 0 à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. Crie}

uma página com uma receita fictícia utilizando cabeçalhos para organizar conteúdo. Utilize quantos

níveis de título achar necessário.

1 <html> 2 <head>

3 <meta http - e qui v =" Content - Type " c o n t e n t=" text / html ; c h a r s e t = UTF -8 "> 4 <t itl e> Como p r e p a r a r um d e l i c i o s o m a c a r r ã o i n s t a n t â n e o em 6 min . </tit le> 5 </head>

6 <body>

7 <h1> Como p r e p a r a r um d e l i c i o s o m a c a r r ã o i n s t a n t â n e o em 6 min . </h1> 8

9 <p> Com esta r e c e i t a você se t o r n a r á um p r o f i s s i o n a l na arte de 10 p r e p a r a r um m a c a r r ã o i n s t a n t â n e o . </p> 11 12 <h2> I n g r e d i e n t e s </h2> 13 14 <p> M a c a r r ã o i n s t a n t â n e o de sua mar ca f a v o r i t a </p> 15 <p> 600 ml de água </p> 16 17 <h2> Modo de p r e p a r o </h2> 18 19 <h3> No m i c r o o n d a s </h3> 20 21 <p> I n s i r a o m a c a r r ã o i n s t a n t â n e o em um r e c i p i e n t e com 600 ml de água e 22 p r o g r a m e o m i c r o o n d a s por 6 m i n u t o s . A p e r t o o bot ão i n i c i a r ou 23 e q u i v a l e n t e . </p>

24

25 <h4> P ont o i m p o r t a n t e </h4> 26

(21)

11 HTML

27 <p> U t i l i z e um r e c i p i e n t e que p e r m i t a o m a c a r r ã o fic ar t o t a l m e n t e s u b m e r s o 28 na água . </p>

29 <p> Q u a n d o o uvi r o bip não saia c o r r e n d o . O m i c r o o n d a s não irá explodir , 30 pois o bip s i g n i f i c a que o m a c a r r ã o está p r o n t o . </p>

31

32 <h3> No f ogã o </h3> 33

34 <p> F erv a a água em uma p a n e l a . </p>

35 <p> I n s i r a o m a c a r r ã o e cozinhe - o por 3 m i n u t o s </p> 36

37 <h4> P ont o i m p o r t a n t e </h4> 38

39 <p> U t i l i z e uma p a n e l a que p e r m i t a o m a c a r r ã o fic ar t o t a l m e n t e s u b m e r s o 40 na água . </p>

41 <p> Não se d i s t r a i a com a t e l e v i s ã o ou q u a l q u e r out ra coi sa . Você p o d e r á 42 q u e i m a r a sua r e f e i ç ã 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 e}

uma 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 alguma

forma. 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 uma

página de outro site (link externo).

Para criarmos um link, devemos utilizar a tag

a. Porém, essa tag sem atributos não criará nenhum

link interno ou externo. Para que um link seja criado, devemos, no mínimo, utilizar o atributo

href

com o caminho relativo ou absoluto de uma outra página. Veja o exemplo:

1 <html> 2 <head>

3 <meta http - e qui v =" Content - Type " c o n t e n t=" text / html ; c h a r s e t = UTF -8 "> 4 <t itl e> E x e m p l o de uso da tag a </tit le>

5 </head> 6 <body>

7 <p> <a href=" p a g i n a 2 . html "> E x e m p l o de link r e l a t i v o </a> </p>

8 <p> <a href=" o u t r o s / p a g i n a 3 . html "> Out ro e x e m p l o de link r e l a t i v o </a> </p> 9 <p> <a href=" http :// www . k19 . com . br "> E x e m p l o de link a b s o l u t o </a> </p> 10 </body>

11 </html>

(22)

HTML

12 Além do atributo

href, podemos utilizar o atributo

target

para informar onde o documento

deve 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 e

com o valor

_top

no atributo

target, o link será aberto na janela na qual o frame se encontra. Se o

valor 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 de

um determinado frame seja aberto em outro. Para realizarmos tal tarefa devemos inserir como o

valor 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 o

atributo

target

não seja utilizado.

1 <html> 2 <head>

3 <meta http - e qui v =" Content - Type " c o n t e n t=" text / html ; c h a r s e t = UTF -8 "> 4 <t itl e> E x e m p l o de uso da tag a com o a t r i b u t o t a r g e t </tit le>

5 </head> 6 <body>

7 <p> <a href=" p a g i n a 1 . html " t a r g e t =" _ b l a n k "> Abre em out ra j a n e l a / aba </a> </p> 8 <p> <a href=" p a g i n a 2 . html " t a r g e t =" _se lf "> Abre na mes ma j a n e l a </a> </p> 9 <p> <a href=" p a g i n a 3 . html "> Abre na mes ma j a n e l a </a> </p>

10 </body> 11 </html>

Código HTML 2.15: Exemplo de uso da tagacom o atributotarget

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 da}

pasta html e em seu corpo crie quatro links: um que aponte para uma página externa e outros três

que apontem para uma página interna de maneiras diferentes. Lembre-se de criar também a página

para a qual o seu link interno irá apontar.

(23)

13 HTML

1 <html> 2 <head>

5 </head> 6 <body>

7 <p> <a href=" http :// www . k19 . com . br " t a r g e t =" _ b l a n k "> Link e x t e r n o </a> </p> 8 <p> <a href=" p a g i n a 2 . html " t a r g e t =" _se lf "> Link i n t e r n o </a> </p>

9 <p> <a href=" p a g i n a 2 . html " t a r g e t =" _top "> Link i n t e r n o </a> </p> 10 <p> <a href=" p a g i n a 2 . html "> Link i n t e r n o </a> </p> 11 </body> 12 </html> Código HTML 2.16: pagina1.html 1 <html> 2 <head>

5 </head> 6 <body> 7 <h1> P á g i n a 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ém

quantas 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, crie}

uma 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 os

resultados.

Âncoras

Além de criar links para outras páginas, podemos criar links para uma determinada seção dentro

da própria página na qual o link se encontra ou dentro de outra página. Esse recurso chama-se

ancoragem, 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. Dessa

vez 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 da

página como valor do atributo

href

devemos passar o nome da seção prefixada com o caractere

#.

1 <html> 2 <head>

(24)

HTML

14

4 <t itl e> E x e m p l o de uso da tag a como â n c o r a </tit le> 5 </head>

6 <body>

7 <p> <a href=" # m a i s _ i n f o "> Veja mais i n f o r m a ç õ e s </a> </p>

8 <p> <a href=" p a g i n a 2 . html # o u t r a _ a n c o r a "> Â n c o r a em out ra p á g i n a </a> </p> 9 ... 10 ... 11 ... 12 13 <a name=" m a i s _ i n f o "> Mais i n f o r m a ç õ e s </a> 14 15 <p> 16 ... 17 ... 18 ... 19 </p> 20 </body> 21 </html>

Código HTML 2.22: Exemplo de uso da tagacomo â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 que}

contenha um link que aponta para uma âncora dentro da própria página. Dica: insira um conteúdo

suficientemente 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 - e qui v =" Content - Type " c o n t e n t=" text / html ; c h a r s e t = UTF -8 "> 4 <t itl e> E x e r c í c i o s ob re â n c o r a s </tit le>

5 </head> 6 <body>

7 <p> <a href=" # s obr e "> Sob re o tex to des sa p á g i n a </a> </p> 8

9 <p> L ore m i psu m d olo r sit amet , c o n s e c t e t u r a d i p i s c i n g elit . Don ec jus to 10 massa , s o d a l e s sit amet e l e i f e n d a , e l e m e n t u m eu nibh . Don ec e g e s t a s dol or 11 quis t u r p i s d i c t u m t i n c i d u n t . Don ec b l a n d i t t e m p u s velit , sit amet

12 a d i p i s c i n g v eli t c o n s e q u a t p l a c e r a t . C u r a b i t u r id m a u r i s . </p> 13 <p> ... </p>

14 <p> ... </p> 15 <p> ... </p> 16

17 <p> At nisi i m p e r d i e t l a c i n i a . Ut quis arcu at nisl o r n a r e v i v e r r a .

18 Duis vel t r i s t i q u e t e l l u s . M a e c e n a s u l t r i c e s p l a c e r a t t o r t o r . P e l l e n t e s q u e f e u g i a t 19 a c c u m s a n c o m m o d o . P ro in non urna justo , id p u l v i n a r lac us . </p>

(25)

15 HTML

21 <a name=" s obr e "> S obr e o tex to des sa p á g i n a </a> 22 <p>O t ext o d ess a p á g i n a foi g e r a d o a t r a v é s do site :

23 <a href=" http :// www . l i p s u m . com / "> http :// www . l i p s u m . 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 chamada}

outra_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>

5 </head> 6 <body>

7 <h1> A n c o r a p á g i n a 2 </h1> 8

12 a d i p i s c i n g v eli t c o n s e q u a t p l a c e r a t . C u r a b i t u r id m a u r i s </p> 13 <p> ... </p>

14 <p> ... </p> 15 <p> ... </p> 16

17 <p> at nisi i m p e r d i e t l a c i n i a . Ut quis arcu at nisl o r n a r e v i v e r r a .

20

21 <a name=" o u t r a _ a n c o r a "> Mais uma â n c o r a < /a> 22

23 <p> Se você c h e g o u aqui deu tudo cer to ! :) </p> 24 </body>

25 </html>

9

_{Crie um novo link no arquivo ancora-pagina1.html que aponte para âncora outra_ancora do}

arquivo ancora-pagina2.html.

1 <html>

2 <head>

5 </head> 6 <body>

7 <p> <a href=" # s obr e "> Sob re o tex to des sa p á g i n a </a> </p>

8 <p> <a href=" ancora - p a g i n a 2 . html # o u t r a _ a n c o r a "> Â n c o r a em ou tra p á g i n a < /a> < /p> 9

13 a d i p i s c i n g v eli t c o n s e q u a t p l a c e r a t . C u r a b i t u r id m a u r i s . </p> 14 <p> ... </p>

15 <p> ... </p> 16 <p> ... </p> 17

18 <p> At nisi i m p e r d i e t l a c i n i a . Ut quis arcu at nisl o r n a r e v i v e r r a .

(26)

HTML

16

21

22 <a name=" s obr e "> S obr e o tex to des sa p á g i n a </a> 23 <p>O t ext o d ess a p á g i n a foi g e r a d o a t r a v é s do site :

24 <a href=" http :// www . l i p s u m . com / "> http :// www . l i p s u m . com / </a> </p> 25 </body>

26 </html>

Exercícios Complementares

7

_{Crie dois documentos HTML. No primeiro crie um link que aponte para o site da K19 e também}

coloque 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 docudocu-mento, coloque também um

link qualquer ou um texto.

8

_{Dentro de um documento HTML crie três links. Dois devem apontar para âncoras de páginas}

externas e o último link deve aparecer no final da página e apontar para uma âncora no topo da

pró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 com

algumas imagens.

A tag

img

possui o atributo

src

que utilizaremos para informar qual imagem queremos carregar

dentro de um documento HTML. O valor do atributo pode ser o caminho absoluto ou relativo de

uma imagem.

1 <html> 2 <head>

3 <meta http - e qui v =" Content - Type " c o n t e n t=" text / html ; c h a r s e t = UTF -8 "> 4 <t itl e> E x e m p l o de uso da tag img </tit le>

5 </head> 6 <body>

7 <h1> K19 T r e i n a m e n t o s </h1>

8 <img src=" http :// www . k19 . com . br / css / img / main - header - logo . png " / > 9

10 <h2> C u r s o s </h2> 11 <p>

12 <img src=" http :// www . k19 . com . br / css / img / k01 - logo - lar ge . png " / > 13 K01 - L ó g i c a de P r o g r a m a ç ã o

14 </p> 15 <p>

16 <img src=" http :// www . k19 . com . br / css / img / k02 - logo - lar ge . png " / > 17 K02 - D e s e n v o l v i m e n t o Web com HTML , CSS e J a v a S c r i p t

18 </p> 19 <p>

20 <img src=" http :// www . k19 . com . br / css / img / k03 - logo - lar ge . png " / > 21 K03 - SQL e M o d e l o R e l a c i o n a l

(27)

17 HTML

23 <p>

24 <img src=" http :// www . k19 . com . br / css / img / k11 - logo - lar ge . png " / > 25 K11 - O r i e n t a ç ã o a O b j e t o s em Java

26 </p> 27 <p>

28 <img src=" http :// www . k19 . com . br / css / img / k12 - logo - lar ge . png " / > 29 K12 - D e s e n v o l v i m e n t o Web com JSF2 e JPA2

30 </p> 31 ... 32 ... 33 ... 34 </body> 35 </html>

Código HTML 2.29: Exemplo de uso da tagimg

Figura 2.4: Exemplo de uso da tagimg

Exercícios de Fixação

10

_{Crie um documento HTML em um arquivo chamado imagem.html na pasta html que contenha}

alguns elementos

IMG.

1 <html>

2 <head>

3 <meta http - e qui v =" Content - Type " c o n t e n t=" text / html ; c h a r s e t = UTF -8 "> 4 <t itl e> E x e m p l o de uso da tag img </tit le>

(28)

HTML

18

6 <body>

7 <h1> K19 T r e i n a m e n t o s </h1>

8 <img src=" http :// www . k19 . com . br / css / img / main - header - logo . png " / > 9

10 <h2> C u r s o s </h2> 11 <p>

12 <img src=" http :// www . k19 . com . br / css / img / k01 - logo - lar ge . png " / > 13 K01 - L ó g i c a de P r o g r a m a ç ã o

14 </p> 15 <p>

16 <img src=" http :// www . k19 . com . br / css / img / k02 - logo - lar ge . png " / > 17 K02 - D e s e n v o l v i m e n t o Web com HTML , CSS e J a v a S c r i p t

18 </p> 19 <p>

20 <img src=" http :// www . k19 . com . br / css / img / k03 - logo - lar ge . png " / > 21 K03 - SQL e M o d e l o R e l a c i o n a l 22 </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 relarela-tó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 - e qui v =" Content - Type " c o n t e n t=" text / html ; c h a r s e t = UTF -8 "> 4 <t itl e> E x e m p l o de uso da tag tab le </tit le>

5 </head> 6 <body> 7 <h1> C a r r o s </h1> 8 9 <t abl e> 10 <tr> 11 <th> M arc a </th> 12 <th> M o d e l o </th> 13 <th> Ano </th> 14 </tr> 15 <tr> 16 <td> T o y o t a </td> 17 <td> C o r o l l a </td> 18 <td> 2010 </td> 19 </tr> 20 <tr> 21 <td> H ond a </td> 22 <td> C ivi c </td> 23 <td> 2011 </td>

(29)

19 HTML

24 </tr> 25 <tr> 26 <td> M i t s u b i s h i </td> 27 <td> L a n c e r </td> 28 <td> 2012 </td> 29 </tr> 30 <tr> 31 <td c o l s p a n=" 3 "> Ú l t i m a a t u a l i z a ç ã o : 0 6 / 2 0 1 2 </td> 32 </tr> 33 </t abl e> 34 </body> 35 </html>

Código HTML 2.32: Exemplo de uso da tagtable

Figura 2.5: Exemplo de uso da tagtable

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>

(30)

HTML

20

2 <head>

3 <meta http - e qui v =" Content - Type " c o n t e n t=" text / html ; c h a r s e t = UTF -8 "> 4 <t itl e> E x e m p l o de uso da tag tab le </tit le>

5 </head> 6 <body> 7 <h1> C a r r o s </h1> 8 9 <t abl e> 10 <t hea d> 11 <tr> 12 <th> M arc a </th> 13 <th> M o d e l o </th> 14 <th> Ano </th> 15 </tr> 16 </t hea d> 17 <t foo t> 18 <tr> 19 <td c o l s p a n=" 3 "> Ú l t i m a a t u a l i z a ç ã o : 0 6 / 2 0 1 2 </td> 20 </tr> 21 </t foo t> 22 <t bod y> 23 <tr> 24 <td> T o y o t a </td> 25 <td> C o r o l l a </td> 26 <td> 2010 </td> 27 </tr> 28 <tr> 29 <td> H ond a </td> 30 <td> C ivi c </td> 31 <td> 2011 </td> 32 </tr> 33 <tr> 34 <td> M i t s u b i s h i </td> 35 <td> L a n c e r </td> 36 <td> 2012 </td> 37 </tr> 38 </t bod y> 39 </t abl e> 40 </body> 41 </html>

(31)

21 HTML

Figura 2.6: Exemplo de uso da tagtable

Repare que visualmente não mudou absolutamente nada. Além disso, apareceram mais algumas

tags:

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 decidir

não implementá-los. Esses recursos são sugestões da especificação.

(32)

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 o

número de colunas definidas em seu valor. Analogamente, o atributo

rowspan

faz o mesmo, porém

com linhas.

Exercícios de Fixação

11

_{Crie uma página HTML em um arquivo chamado tabela.html na pasta html que contenha uma}

tabela de acordo com a imagem abaixo:

Figura 2.7: Exercício para a tagtable

As linhas vermelhas foram colocadas na imagem apenas para facilitar a visualização do

pro-blema.

1 <html> 2 <head>

3 <meta http - e qui v =" Content - Type " c o n t e n t=" text / html ; c h a r s e t = UTF -8 "> 4 <t itl e> E x e r c í c i o para a tag tab le </tit le>

5 </head> 6 <body> 7 <t abl e> 8 <t hea d> 9 <tr>

(33)

23 HTML

10 <th> M arc a </th> 11 <th> M o d e l o </th> 12 <th> Ano </th> 13 </tr> 14 </t hea d> 15 <t foo t> 16 <tr> 17 <td c o l s p a n=" 3 "> Ú l t i m a a t u a l i z a ç ã o : 0 6 / 2 0 1 2 </td> 18 </tr> 19 </t foo t> 20 <t bod y> 21 <tr> 22 <td r o w s p a n=" 2 "> T o y o t a </td> 23 <td> C o r o l l a </td> 24 <td> 2010 </td> 25 </tr> 26 <tr> 27 <td> C amr y </td> 28 <td> 2011 </td> 29 </tr> 30 31 <tr> 32 <td r o w s p a n=" 3 "> Hon da </td> 33 <td> C ivi c </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> 44 45 <tr> 46 <td> M i t s u b i s h i </td> 47 <td> L a n c e r </td> 48 <td> 2012 </td> 49 </tr> 50 </t bod y> 51 </t abl e> 52 </body> 53 </html> Código HTML 2.34: tabela.html

Exercícios Complementares

10

_{Crie em um documento HTML uma tabela que contenha o continente/subcontinente, o nome}

e 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 de

acordo com a sua semântica, ou seja, você deve escolher um tipo de lista para cada situação.

(34)

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 pelo

menos 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 - e qui v =" Content - Type " c o n t e n t=" text / html ; c h a r s e t = UTF -8 "> 4 <t itl e> E x e m p l o de uso da tag dl </tit le>

5 </head> 6 <body> 7 <h1> C u r s o s - K19 T r e i n a m e n t o s </h1> 8 9 <dl> 10 <dt> K01 - L ó g i c a de P r o g r a m a ç ã o </dt> 11 <dd> 12 C o n h e c i m e n t o s em L ó g i c a de P r o g r a m a ç ã o é o pré - r e q u i s i t o f u n d a m e n t a l 13 para que uma p e s s o a c o n s i g a a p r e n d e r q u a l q u e r L i n g u a g e m de P r o g r a m a ç ã o ... 14 </dd>

15 <dt> K02 - D e s e n v o l v i m e n t o Web com HTML , CSS e J a v a S c r i p t </dt> 16 <dd>

17 A tua lme nte , p r a t i c a m e n t e tod os os s i s t e m a s c o r p o r a t i v o s p o s s u e m

18 i n t e r f a c e s web . Para quem d e s e j a atu ar no m e r c a d o de d e s e n v o l v i m e n t o ... 19 </dd>

20 <dt> K03 - SQL e M o d e l o R e l a c i o n a l </dt> 21 <dd>

22 Como as a p l i c a ç õ e s c o r p o r a t i v a s n e c e s s i t a m a r m a z e n a r dad os é f u n d a m e n t a l 23 que os d e s e n v o l v e d o r e s p o s s u a m c o n h e c i m e n t o s sob re p e r s i s t ê n c i a de dad os . 24 </dd>

25 </dl> 26 </body> 27 </html>

(35)

25 HTML

Figura 2.8: Exemplo de uso da tagdl

Exercícios de Fixação

12

_{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 os

mesmos.

1 <html> 2 <head>

3 <meta http - e qui v =" Content - Type " c o n t e n t=" text / html ; c h a r s e t = UTF -8 "> 4 <t itl e> Menu - K19 P i z z a r i a </tit le>

5 </head> 6 <body> 7 <h1> Menu - K19 P i z z a r i a </h1> 8 9 <dl> 10 <dt>À moda da casa </dt> 11 <dd>

12 P r e s u n t o c o b e r t o com mussarela , ovos e p a l m i t o . 13 </dd>

14 <dt>À moda do p i z z a i o l o </dt> 15 <dd>

16 Mussarela , presunto , ovos e bac on . 17 </dd>

18 <dt> A l i c h e </dt> 19 <dd>

20 Aliche , p a r m e s ã o e r o d e l a s de t o m a t e . 21 </dd>

(36)

HTML

26

22 </dl> 23 </body> 24 </html> Código HTML 2.37: restaurante.html

Exercícios Complementares

11

_{Crie um documento HTML que contenha uma lista de alguns pontos turísticos do Brasil de que}

você 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 pelo

menos um elemento filho

li.

1 <html> 2 <head>

3 <meta http - e qui v =" Content - Type " c o n t e n t=" text / html ; c h a r s e t = UTF -8 "> 4 <t itl e> E x e m p l o de uso da tag ol </tit le>

5 </head> 6 <body> 7 <h1> M a c a r r ã o i n s t a n t â n e o - K19 R e c e i t a s </h1> 8 <h2> Modo de p r e p a r o </h2> 9 10 <ol> 11 <li> F e r v e r 600 ml de água em uma p a n e l a . </li> 12 <li> R e t i r a r o m a c a r r ã o do p a c o t e . </li> 13 <li> C o l o c a r o m a c a r r ã o na p a n e l a no fogo bai xo . </li> 14 <li> C o z i n h a r o m a c a r r ã o por 3 min . </li> 15 <li> T e m p e r a r a g os to . </li> 16 </ol> 17 </body> 18 </html>

(37)

27 HTML

Figura 2.9: Exemplo de uso da tagol

Exercícios de Fixação

13

_{Crie um documento HTML em um arquivo chamado manual.html na pasta html que contenha}

um 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 - e qui v =" Content - Type " c o n t e n t=" text / html ; c h a r s e t = UTF -8 "> 4 <t itl e> O p e r a ç ã o de saq ue - M a n u a l do cai xa e l e t r ô n i c o - K19 Bank </tit le> 5 </head> 6 <body> 7 <h1> O p e r a ç ã o de s aq ue - M a n u a l do cai xa e l e t r ô n i c o - K19 Bank </h1> 8 9 <ol> 10 <li> I n s i r a o c a r t ã o </li> 11 <li> D i g i t e a s enh a </li> 12 <li> E s c o l h a a o pçã o de saq ue </li>

13 <li> I n f o r m e o v alo r que d e s e j a sac ar </li> 14 <li> I n s i r a o c a r t ã o n o v a m e n t e </li> 15 <li> A g u a r d e até a l i b e r a ç ã o do d i n h e i r o </li> 16 </ol> 17 </body> 18 </html> Código HTML 2.40: manual.html

(38)

HTML

28 Exercícios Complementares

12

_{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 pelo

menos um elemento filho

li.

1 <html> 2 <head>

3 <meta http - e qui v =" Content - Type " c o n t e n t=" text / html ; c h a r s e t = UTF -8 "> 4 <t itl e> E x e m p l o de uso da tag dl </tit le>

5 </head> 6 <body> 7 <h1> K02 - D e s e n v o l v i m e n t o Web com HTML , CSS e J a v a S c r i p t </h1> 8 <h2> Pré - r e q u i s i t o s </h2> 9 10 <ul>

11 <li> C o n h e c i m e n t o de alg um s i s t e m a o p e r a c i o n a l ( W i n d o w s / Lin ux / Mac OS X ) </li> 12 <li> L ó g i c a de p r o g r a m a ç ã o </li>

13 </ul> 14 </body> 15 </html>

(39)

29 HTML

Figura 2.10: Exemplo de uso da tagul

Exercícios de Fixação

14

_{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 - e qui v =" Content - Type " c o n t e n t=" text / html ; c h a r s e t = UTF -8 "> 4 <t itl e> K00 - F o r m a ç ã o B á s i c a - K19 T r e i n a m e n t o s </tit le> 5 </head> 6 <body> 7 <dl> 8 <h1> K00 - F o r m a ç ã o B á s i c a </h1> 9 10 <ul> 11 <li> K01 - L ó g i c a de P r o g r a m a ç ã o </li> 12 <li> K02 - D e s e n v o l v i m e n t o Web com HTML , CSS e J a v a S c r i p t </li> 13 <li> K03 - SQL e M o d e l o R e l a c i o n a l </li> 14 </ul> 15 </dl> 16 </body> 17 </html> Código HTML 2.43: lista-cursos.html

(40)

HTML

30 Exercícios Complementares

13

_{Crie um documento HTML que contenha a lista dos cursos da Formação Desenvolvedor Java da}

K19.

Formulário

Para trazermos um pouco mais de interatividade para as nossas páginas, podemos utilizar os

elementos de formulário. Esses elementos recebem algum tipo de entrada do usuário, seja através

de um clique ou digitando algum valor.

A tag

input

A tag

input

permite que o elemento que a contenha assuma diversas formas dependendo do seu

atributo

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ção

do HTML5 e nem todos os navegadores suportam tais valores.

1 <html> 2 <head>

3 <meta http - e qui v =" Content - Type " c o n t e n t=" text / html ; c h a r s e t = UTF -8 "> 4 <t itl e> E x e m p l o de uso da tag inp ut </tit le>

5 </head> 6 <body>

(41)

31 HTML

7 <form a c t i o n=" p a g i n a . html " m e t h o d=" get "> 8 <p>

9 text :

10 <i npu t type=" text " / > 11 </p> 12 <p> 13 p a s s w o r d : 14 <i npu t type=" p a s s w o r d " / > 15 </p> 16 <p> 17 c h e c k b o x e s :

18 <i npu t type=" c h e c k b o x " name=" c h e c k g r o u p " / > 19 <i npu t type=" c h e c k b o x " name=" c h e c k g r o u p " / > 20 <i npu t type=" c h e c k b o x " name=" c h e c k g r o u p " / > 21 </p>

22 <p> 23 r a d i o s :

24 <i npu t type=" r adi o " name=" c h e c k g r o u p " / > 25 <i npu t type=" r adi o " name=" c h e c k g r o u p " / > 26 <i npu t type=" r adi o " name=" c h e c k g r o u p " / > 27 </p>

28 <p> 29 b u t t o n :

30 <i npu t type=" b u t t o n " val ue=" Bot ão " / > 31 </p>

32 <p> 33 s u b m i t :

34 <i npu t type=" s u b m i t " val ue=" E n v i a r " / > 35 </p>

36 <p>

37 file :

38 <i npu t type=" file " / > 39 </p>

40 <p>

41 r ese t :

42 <i npu t type=" r ese t " val ue=" D e s c a r t a r a l t e r a ç õ e s " / > 43 </p>

44 <p>

45 i mag e :

46 <i npu t

47 type=" i mag e "src=" http :// www . k19 . com . br / css / img / main - header - logo . png " / > 48 </p>

49 <p> 50 h i d d e n :

51 <i npu t type=" h i d d e n " val ue=" val or e s c o n d i d o " / > 52 </p>

53 </form> 54 </body> 55 </html>

(42)

HTML

32

Figura 2.11: Exemplo de uso da taginput

A 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 filhos

diretos ou indiretos de elementos

select. Além disso, cada item pode conter o atributo chamado

value

para informar o valor associado a uma determinada opção.

1 <html> 2 <head>

3 <meta http - e qui v =" Content - Type " c o n t e n t=" text / html ; c h a r s e t = UTF -8 "> 4 <t itl e> E x e m p l o de uso da tag s e l e c t </tit le>

5 </head> 6 <body> 7 <form a c t i o n=" p a g i n a . html " m e t h o d=" get "> 8 <p> 9 S e l e c i o n e uma c i d a d e : 10 <s e l e c t>

11 <o p t i o n v alu e=" sao - pau lo "> São Pau lo </o p t i o n>

12 <o p t i o n v alu e=" rio - de - j a n e i r o "> Rio de J a n e i r o </o p t i o n> 13 <o p t i o n v alu e=" porto - a l e g r e "> Por to A l e g r e </o p t i o n> 14 <o p t i o n v alu e=" c u r i t i b a "> C u r i t i b a </o p t i o n>

15 </s e l e c t> 16 </p> 17

18 <p>

19 S e l e c i o n e uma ou mais c a t e g o r i a s de p r o d u t o s ( m a n t e n h a a tec la 20 " c o n t r o l " ( ou " c o m m a n d " no Mac ) p r e s s i o n a d a para e s c o l h e r mais de uma 21 c a t e g o r i a ) :