autoria web apostila

AUTORIA WEB

Prof. Antonio Arley Rodrigues da Silva

[email protected]

Sumrio 1 Introduo ....................................................................................................................................... 4

2 HTML ............................................................................................................................................... 5

2.1 Estrutura Bsica ....................................................................................................................... 5

2.1.1 Exerccios de Fixao ....................................................................................................... 6

2.2 Semntica HTML ..................................................................................................................... 6

2.3 Pargrafos ............................................................................................................................... 7


2.4 Cabealho ................................................................................................................................ 8


2.5 Links ....................................................................................................................................... 10

2.5.1 Exerccios de Fixao ..................................................................................................... 11

2.6 ncoras .................................................................................................................................. 11


2.7 Imagens ................................................................................................................................. 13


2.8 Tabelas .................................................................................................................................. 14


2.9 Listas ...................................................................................................................................... 16

2.9.1 Lista de Definio .......................................................................................................... 16


2.9.3 Lista Ordenada .............................................................................................................. 17


2.9.5 Lista Sem Ordem ........................................................................................................... 18


2.10 Formulrios ........................................................................................................................... 19

2.10.1 A tag input ..................................................................................................................... 19

2.10.2 A tag Select .................................................................................................................... 22

2.10.3 A tag textarea ................................................................................................................ 23

2.10.4 A tag label ...................................................................................................................... 24

2.10.5 A tag form ...................................................................................................................... 25

2.11 A tag Div ................................................................................................................................ 25

2.12 Tableless ................................................................................................................................ 26

2.13 Exerccios de Fixao ............................................................................................................. 27

3 CSS ................................................................................................................................................. 28

3.1 Estrutura de uma Regra CSS .................................................................................................. 31

3.2 Tipos de seletores ................................................................................................................. 31

3.2.1 Seletor Universal ........................................................................................................... 31

3.2.2 Seletor de tipo ............................................................................................................... 31

3.2.3 Seletor de id .................................................................................................................. 32

3.2.4 Seletor de classe ............................................................................................................ 32


3.3 Principais Propriedades CSS .................................................................................................. 32

3.3.1 Propriedades de background ........................................................................................ 32

3.3.2 Propriedades de texto ................................................................................................... 33

3.3.3 Propriedades de fonte ................................................................................................... 34

3.3.4 Propriedades de tabela ................................................................................................. 34

3.3.5 Propriedades de dimenso ........................................................................................... 34

3.4 Box Model ............................................................................................................................. 35

3.5 Posicionando Elementos ....................................................................................................... 36

3.5.1 Posicionamento esttico ............................................................................................... 36

3.5.2 Posicionamento fixo ...................................................................................................... 36

3.5.3 Posicionamento relativo ............................................................................................... 37

3.5.4 Posicionamento absoluto .............................................................................................. 37

3.6 Cores em CSS ......................................................................................................................... 37

3.7 Unidades de Medida ............................................................................................................. 37

4 Exerccios Finais ............................................................................................................................. 39

4.1 Lista 1 .................................................................................................................................... 39

4.2 Lista 2 .................................................................................................................................... 40

5 Referncias .................................................................................................................................... 49

4

1 Introduo

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

pginas cuja funo era simplesmente levar ao usurio um determinado contedo. Porm, com a

popularizao da internet, novas necessidades foram surgindo em diversas reas como a do

entretenimento, assim como a dos negcios. Cada vez mais jogos online foram aparecendo, redes

sociais ganharam foras graas grande interatividade permitida entre os usurios, gravadoras de

msica passaram a vender seus ttulos atravs de canais especializados e ferramentas de

produtividade comearam a rodar na tal da "nuvem". Enfim, necessidades antes inexistentes

surgiram numa velocidade muito grande e muitos sites deixaram de ser simples pginas para se

tornarem verdadeiras aplicaes.

H cerca de 15 anos era muito comum que um nico desenvolvedor fosse o responsvel por produzir

o cdigo HTML, CSS, Javascript, PHP, SQL e de qualquer outra tecnologia que fosse necessrio. Essa

pessoa era chamada de webmaster. Com a evoluo dos sites a figura do webmaster como era

conhecida foi desaparecendo, pois a complexidade e volume de trabalho para o desenvolvimento de

uma aplicao web foi ficando muito grande para apenas uma pessoa, ou para um grupo muito

pequeno de desenvolvedores (webmasters). Hoje a figura do webmaster ainda existe, mas seu papel

mudou um pouco, pois esse profissional atua mais como um gerente que possui bom conhecimento

das diversas tecnologias empregadas nos desenvolvimento de uma aplicao web. Ele pode ou no

participar diretamente do desenvolvimento, ou seja, pode ou no "botar a mo na massa".

J que as tarefas antes de responsabilidade do webmaster foram delegadas a outros

desenvolvedores, naturalmente foram aparecendo algumas especializaes que podemos separar

basicamente em dois grupos: desenvolvedores front-end e back-end. Em geral os desenvolvedores

front-end so responsveis pela interface com a qual o usurio ir interagir enquanto que os

desenvolvedores back-end so responsveis pela implantao das regras de negcio na aplicao.

As principais linguagens/tecnologias client side so HTML, CSS, Javascript, Adobe Flash, Microsoft

Silverlight e VBScript. De todas elas as trs primeiras so as mais importantes e atualmente esto em

maior evidncia.

Cada uma das trs linguagens possui um papel bem especfico que podemos resumir da seguinte

maneira: o cdigo HTML ser responsvel por prover o contedo de uma pgina, o cdigo CSS ir

cuidar da formatao visual do contedo apresentado e o cdigo Javascript permitir que a pgina

possua algum tipo de comportamento ("inteligncia") e que alguma interao possa ser feita como

usurio. Nos prximos captulos iremos abordar mais a fundo as duas primeiras tecnologias.

5

2 HTML

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

ela na forma de texto, imagem ou vdeo. O contedo de uma pgina web , em geral, escrito na

linguagem HTML (HyperText Markup Language), que uma linguagem de marcao originalmente

proposta por Tim Berners-Lee no final da dcada de 1980. Sua ideia era disseminar documentos

cientficos de uma maneira simples e com uma sintaxe flexvel o suficiente para que mesmo aqueles

sem muita familiaridade com a linguagem pudessem fazer o mesmo.

Desde sua proposta at os dias de hoje a linguagem sofreu diversas alteraes em sua especificao

de uma verso para outra, sendo a mais atual a especificao do HTML5. As especificaes do HTML

so publicadas pelo World Wide Web Consortium mais conhecido por sua sigla W3C.

2.1 Estrutura Bsica

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 estar entre parnteses angulares (< e >). Veja o

exemplo:

1

2

3

4 Exemplo da estrutura bsica de um documento HTML

5

6

7 Ol mundo !

8

9

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

Figura 2.1: Exemplo da estrutura bsica de um documento HTML

6

No exemplo anterior temos um elemento HTML representado por sua tag "p"e um filho de texto

simples "Ol Mundo!".

2.1.1 Exerccios de Fixao

1. Na rea de Trabalho do seu usurio crie uma nova pasta com o seu primeiro nome. Dentro

dessa pasta crie outra pasta com o nome html (para facilitar, utilize apenas letras minsculas

em todas as pastas e arquivos que criarmos durante a disciplina).

2. Agora utilizando um editor de texto crie um novo arquivo com o nome ola-ifce.html e salve

dentro da pasta html. Em seguida insira o seguinte cdigo dentro do arquivo ola-ifce.html:

1

2

3

4 Exemplo da estrutura bsica de um documento HTML

5

6

7 Ol IFCE!

8

9

Cdigo HTML 2.2: ola-mundo.html

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

2.2 Semntica HTML

De acordo com a especificao, cada tag possui um significado, isto , o que o contedo de um

determinado elemento representa. Muitos autores utilizam o termo semntica HTML ao se referirem

ao uso correto dos significados de cada tag. Por exemplo:

1

2

3

4 Exemplo de uso correto da semntica HTML

5

6

7 Este um texto para mostrar o significado da tag p.

8

9

Cdigo HTML 2.3: Exemplo de uso correto da semntica HTML

Neste exemplo utilizamos novamente a tag p e de acordo com a especificao o elemento p

representa um pargrafo. Neste caso, o elemento de tag p foi utilizado de maneira correta.

7

2.3 Pargrafos

Os pargrafos dentro de um documento HTML, em geral, so representados atravs da tag p. Uma

das caractersticas da tag p que ela ocupa horizontalmente todo o espao definido pelo elemento

pai. Esse o comportamento dos elementos de bloco que discutiremos com mais detalhes no tpico

sobre CSS.

Por enquanto o importante termos em mente que, pelo fato da tag p se um elemento de bloco, o

navegador ir ajustar o texto largura do elemento pai realizando todas as quebras de linha

necessrias. Caso seja necessrio forar uma quebra de linha no meio de um texto, podemos utilizar

a tag br. Confira o exemplo:

1

2

3

4 Exemplo de quebra de linha em um pargrafo

5

6

7 Um texto bem longo . Longo mesmo ! Este pargrafo serve para demonstrar

8 o comportamento da quebra de linha automtica , ou seja , sem utilizar

9 nenhum recurso para que a quebra ocorra .

10

11 J este pargrafo demonstra a quebra de linha forada .Percebeu ?

12

13

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

Figura 2.2: Exemplo de quebra de linha em um pargrafo


1. Crie um novo documento HTML, insira o cdigo a seguir e salve-o com o nome p-quebra-

delinha.html na pasta html. Em seguida abra o arquivo em um navegador (se necessrio,

redimensione a janela do navegador para verificar o comportamento da quebra de linha).

8

1

2

3

4 Exemplo de quebra de linha em um pargrafo

5

6

7 Um texto bem longo. Longo mesmo! Este pargrafo serve para demonstrar

8 o comportamento da quebra de linha automtica, ou seja , sem utilizar

9 nenhum recurso para que a quebra ocorra.

10

11 J este pargrafo demonstra a quebra de linha forada .Percebeu ?

12

13

Cdigo HTML 2.6: p-quebra-de-linha.htm

2.4 Cabealho

Assim como em um livro, uma pgina HTML pode conter uma hierarquia de ttulos para estabelecer

uma diviso de seu contedo. Para conseguirmos realizar essa tarefa devemos utilizar as tags de

cabealho h1, h2, h3, h4, h5 e h6.

Os sufixos numricos de 1 a 6 indicam o nvel do ttulo dentro da hierarquia de ttulos do documento.

Veja o exemplo:

1

2

3

4 Exemplo de cabealhos

5

6

7 Ttulo 1

8 Ttulo 2

9 Ttulo 3

10 Ttulo 4

11 Ttulo 5

12 Ttulo 6

13

14

Cdigo HTML 2.7: Exemplo de cabealhos

9

Figura 2.3: Exemplo de cabealhos

Perceba que cada nvel possui um tamanho diferente de fonte. Esse tamanho determinado pelo

navegador e pode ser alterado atravs de regras CSS que veremos mais adiante. Devemos utilizar os

cabealhos com cautela, pois eles so utilizados como parmetros de ranqueamento da pgina por

diversos buscadores como Google, Yahoo e Bing, por exemplo. O uso correto das tags de cabealho

faz parte das tcnicas de SEO (Search Engine Optimization) que, como o prprio nome j indica, so

tcnicas que ajudam a melhorar o ranqueamento de pginas dentro dos buscadores.

De acordo com as tcnicas de SEO devemos tomar os seguintes cuidados ao utilizarmos as tags de

cabealhos:

Utilizar apenas uma tag h1 por pgina

Utilizar no mximo duas tags h2 por pgina


1. Crie um novo documento HTML, insira o cdigo abaixo e salve-o com o nome cabecalhos-

1.html na pasta html. Em seguida abra o arquivo em um navegador.

1

2

3

4 Curso de Programao Web

5

6

7 Programao Web Disciplina de Autoria Web

8

9 Atualmente , praticamente todos os sistemas corporativos possuem

10 interfaces web . Para quem deseja atuar no mercado de desenvolvimento

11 de software , obrigatrio o conhecimento das linguagens : HTML , CSS

12 e JavaScript .

13

10

14 Essas linguagens so utilizadas para o desenvolvimento da camada de

15 apresentao das aplicaes web .

16

17 Pr - requisitos

18

19 Familiaridade com algum sistema operacional ( Windows / Linux / Mac OS X)

20 Conhecimentos bsicos de Editor de Texto e Planilha Eletrnica

21

22 Agenda

23

24 s teras

25

26 xx/xx/ xxxx das 18:00 s 20:00

27 xx/xx/ xxxx das 20:10 s 22:00

28

29 Aos sbados

30

31 xx/xx/ xxxx das 08:00 s 14:00

32 xx/xx/ xxxx das 14:00 s 20:00

33

34

Cdigo HTML 2.8: cabecalhos-1.html

2. Imagine que voc possua um site de culinria no qual voc disponibiliza algumas receitas. Crie uma pgina com uma receita fictcia utilizando cabealhos para organizar o seu documento. Utilize quantos nveis de ttulo achar necessrio.

2.5 Links

Normalmente um site formado por um conjunto de pginas que esto interligadas de alguma

forma. Para permitir que um usurio navegue de uma pgina para outra devemos utilizar os links.

Um link pode fazer a ligao de uma pgina para outra do mesmo site (link interno) ou para uma

pgina de outro site (link externo).

Para criarmos um link devemos utilizar a tag a. Porm, a tag a sem atributos no ir criar nenhum

link interno ou externo. Para que um link seja criado devemos, no mnimo, utilizar o atributo href

com o caminho relativo ou absoluto de uma outra pgina. Veja o exemplo:

1

2

3

4 Exemplo de uso da tag a

5

6

7 Exemplo de link relativo

8 Outro exemplo de link relativo

9 Exemplo de link absoluto

11

10

11

Cdigo HTML 2.9: Exemplo de uso da tag a

Alm do atributo href podemos utilizar atributo target no qual informamos onde iremos abrir o

documento. Os possveis valores para o atributo target so:

_blank - em uma nova janela ou aba

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

_parent - em um frame que seja o "pai" do frame no qual o link se encontra (desuso)

_top - na mesma janela do documento que contm o link (desuso)

Ao testar os valores acima, logo percebemos que _self e _top possuem o mesmo comportamento se

a pgina que contm o link no estiver em um frame.

O comportamento padro de um link abrir o documento na mesma pgina ou frame caso o

atributo target no seja utilizado.

1

2

3

4 Exemplo de uso da tag a com o atributo target

5

6

7 Abre em outra janela / aba

8 Abre na mesma janela

9 Abre na mesma janela

10

11

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


1. Crie um documento HTML dentro da pasta html e em seu corpo crie quatro links: um que

aponte para uma pgina externa e outros trs que apontem para uma pgina interna de

maneiras diferentes. Lembre-se de criar tambm a pgina para a qual o seu link interno ir

apontar.

2.6 ncoras

Alm de criar links para outras pginas o HTML nos permite criar links para uma determinada seo

dentro da prpria pgina na qual o link se encontra ou dentro de outra pgina. Esse recurso chama-

se ancoragem, pois as sees para as quais queremos criar um link devem possuir uma ncora.

Para criarmos uma ncora devemos utilizar novamente a tag a, porm sem o atributo href. Dessa vez

utilizaremos o atributo name para identificar a seo atravs de um nome.

12

O link tambm muda levemente, pois agora ao invs de passar somente o nome do arquivo da

pgina como valor do atributo href devemos passar o nome da seo prefixada com o caractere #.

1

2

3

4 Exemplo de uso da tag a como ncora

5

6

7 Veja mais informaes

8 ncora em outra pgina

9

10 ...

11 ...

12 ...

13

14 Mais informaes

15

16

17 ...

18 ...

19 ...

20

21

22

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

Lembre-se

At a verso 4 do HTML e no XHTML a especificao dizia para utilizarmos o atributo name para

criarmos as ncoras. Porm, no HTML5, a recomendao do W3C que se utilize o atributo id.

Desenvolvedores mais preocupados em estar sempre atualizados podem ficar tranquilos e utilizar

somente o atributo id ao invs do name, pois os navegadores mais modernos conseguem

interpretar o uso de ambos os atributos em qualquer verso do HTML.


1. Crie um documento HTML que contenha um link que aponta para uma ncora dentro da

prpria pgina. Dica: insira um contedo suficientemente grande para que a barra de

rolagem vertical do navegador aparea e coloque a ncora no final da pgina.

2. Continuando o exerccio anterior, crie um novo link que aponte para uma ncora localizada

em outra pgina. Crie uma pgina com uma ncora para a qual o link que voc acabou de

criar ir apontar.

13

2.7 Imagens

Provavelmente os sites na internet seriam muito mais entediantes se no fosse possvel adicionar

algumas imagens ao contedo das pginas (Comum antes da dcada de 90). Como no queremos

que as nossas pginas fiquem muito montonas, neste captulo iremos utilizar a tag img e melhorar

um pouco a aparncia das pginas 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

2

3

4 Exemplo de uso da tag img

5

6

7 Pronatec

8

14


1. Escolha uma ou mais imagens quaisquer no computador ou na internet. Crie um documento

HTML que contenha trs ou mais elementos com a tag img para exibir as imagens

escolhidas.

2.8 Tabelas

Suponha que voc esteja desenvolvendo o site de uma empresa que necessita divulgar alguns

relatrios em uma de suas pginas. Existe uma grande chance que os dados dos relatrios venham

de planilhas eletrnicas.

Como os navegadores interpretam apenas cdigo HTML, voc ficar encarregado de transferir para o

formato HTML as informaes dos relatrios que esto no formato da planilha eletrnica. Surge a

uma necessidade: exibir no navegador um conjunto de informaes de forma organizada.

Para resolver esse problema temos a tag table do HTML que nos permite apresentar um conjunto de

dados em forma de tabelas. Veja o exemplo:

1

2

3

4 Exemplo de uso da tag table

5

6

7 Carros

8

9

10

11 Marca

12 Modelo

13 Ano

14

15

16 Toyota

17 Corolla

18 2013

19

20

21 Honda

22 Civic

23 2011

24

25

26 Mitsubishi

27 Lancer

15

28 2012

29

30

31 ltima atualizao: 08/2013

32

33

34

35

Cdigo HTML 2.14: Exemplo de uso da tag table

Figura 2.5: Exemplo de uso da tag table

Perceba que a tag table no utilizada sozinha. Ela necessita pelo menos um ou mais elementos

com a tag tr que, por sua vez, necessita de pelo menos um ou mais elementos com a tag th ou td.

O que significam essas tags?

tr - define uma linha da tabela

th - define uma clula de cabealho

td - define uma clula

Outros dois atributos importantes para a construo de tabelas so colspan e rowspan que podem

ser aplicados nos elementos com a tag td e th.

Como podemos observar nos exemplos dados, o atributo colspan faz com que a clula ignore o

nmero de colunas definidas em seu valor. Analogamente, o atributo rowspan faz o mesmo, porm

com linhas.


1. Crie uma pgina que contenha uma tabela de acordo com a imagem abaixo:

16

Figura 2.6: Exerccio para a tag table

As linhas vermelhas foram colocadas na imagem apenas para facilitar a visualizao do problema.

2.9 Listas

Em um documento HTML podemos ter trs tipos de listas e cada uma delas deve ser utilizada de

acordo com a sua semntica, ou seja, voc deve escolher um tipo de lista para cada situao.

Os trs tipos possveis de listas so:

Lista de definio - utilizada para exibir definies de termos. Funciona como nos dicionrios,

no qual temos uma palavra e em seguida o seu significado.

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

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

2.9.1 Lista de Definio

Para criarmos uma lista de definio devemos utilizar a tag dl. O elemento com a tag dl deve possuir

pelo menos um filho com a tag dt seguido de um elemento com a tag dd, isto , um item na lista de

definio composto por um par de elementos com as tags dt e dd.

1

2

3

4 Exemplo de uso da tag dl

5

6

7 PRONATEC

8 Cursos

9

10

11 Programao Web

12

13 A programao web necessria para o desenvolvimento de sites dinmicos

14 e sistemas com interface web...

17

15

16 Desenvolvimento Web com HTML , CSS e JavaScript

17

18 Atualmente , praticamente todos os sistemas corporativos possuem

19 interfaces web . Para quem deseja atuar no mercado de desenvolvimento ...

20

21 SQL e Modelo Relacional

22

23 Como as aplicaes corporativas necessitam armazenar dados fundamental

24 que os desenvolvedores possuam conhecimentos sobre persistncia de dados .

25

26

27

28

Cdigo HTML 2.15: Exemplo de uso da tag dl

Figura 2.7: Exemplo de uso da tag dl


1. Crie um documento HTML que contenha o cardpio de um restaurante com os nomes dos

seus pratos e uma breve descrio sobre os mesmos.

2.9.3 Lista Ordenada

Para criarmos uma lista ordenada devemos utilizar a tag ol. O elemento com a tag ol deve possuir

pelo menos um filho coma tag li.

1

2

3

4 Exemplo de uso da tag ol

18

5

6

7 RECEITAS PRONATEC

8 Macarro instantneo

9 Modo de preparo

10

11

12 Ferver 600 ml de gua em uma panela .

13 Retirar o macarro do pacote .

14 Colocar o macarro na panela no fogo baixo .

15 Cozinhar o macarro por 3 min .

16 Temperar a gosto .

17

18

19

Cdigo HTML 2.16: Exemplo de uso da tag ol

Figura 2.8: Exemplo de uso da tag ol


1. Crie um documento HTML que contenha um manual que explica passo-a-passo o uso de um caixa eletrnico para a operao de saque.

2.9.5 Lista Sem Ordem

Para criarmos uma lista sem ordem devemos utilizar a tag ul. O elemento com a tag ul deve possuir

pelo menos umfilho com a tag li.

1

2

3

4 Exemplo de uso da tag dl

19

5

6

7 PRONATEC

8 Programao Web

9 Pr-requisitos

10

11

12 Conhecimento de algum sistema operacional ( Windows / Linux / MacOS X)

13 Pacote de Aplicativos Office

14

15

16

Cdigo HTML 2.17: Exemplo de uso da tag ul

Figura 2.9: Exemplo de uso da tag ul


1. Crie um documento HTML que contenha a lista dos cursos do IFCE Campus Tiangu.

2.10 Formulrios

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

2.10.1 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.

20

checkbox - cria uma caixa que assume dois estados: checado e "deschecado". Em conjunto

com o atributo name possvel que se crie um grupo de checkboxes no qual um ou mais

checkboxes seja "checado".

radio - cria uma caixa que assume dois estados: checado e "deschecado". Em conjunto com o

atributo name possvel que se crie um grupo de radios no qual apenas um radio seja

"checado".

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

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

texto do boto.

file - cria um boto que, ao ser clicado, abre uma caixa de dilogo para a escolha de um

arquivo no computador do usurio.

reset - cria um boto que descarta todas as alteraes feitas dentro de um formulrio.

Atravs do atributo value definimos o texto do boto.

image - cria um boto para o envio do formulrio. Deve ser utilizado em conjunto com o

atributo src para que uma imagem de fundo seja utilizada no boto.

hidden - cria um elemento que no fica visvel para o usurio, porm pode conter um valor

que ser enviado pelo formulrio.

Existem outros valores possveis para o atributo type, porm eles fazem parte da especificao do

HTML5 e nem todos os navegadores suportam tais valores (Contedo extra).

1

2

3

4 Exemplo de uso da tag input

5

6

7

8

9 text :

10

11

12

13 password :

14

15

16

17 checkboxes :

18

19

20

21

22

23 radios :

24

25

21

26

22

2.10.2 A tag Select

A tag select permite ao usurio escolher um ou mais itens de uma lista. O atributo multiple, quando

presente, informa ao navegador que mais de um item pode ser selecionado.

A lista de itens deve ser informada atravs de elementos com a tag option. Tais elementos devem ser

filhos diretos ou indiretos do elemento com a tag select. Alm disso, cada item pode conter o

atributo value para informar o valor associado a uma determinada opo.

1

2

3

4 Exemplo de uso da tag select

5

6

7

8

9 Selecione uma cidade :

10

11 So Paulo

12 Rio de Janeiro

13 Porto Alegre

14 Curitiba

15

16

17

18

19 Selecione uma ou mais categorias de produtos ( mantenha a tecla

20 " control " (ou " command " no Mac ) pressionada para escolher mais de uma

21 categoria ):

22

23 Desktops

24 Notebooks

25 Tablets

26 Celulares

27

28

29

30

31

Cdigo HTML 2.19: Exemplo de uso da tag select

23

Figura 2.11: Exemplo de uso da tag select

2.10.3 A tag textarea

A tag textarea exibe uma caixa de texto na qual o usurio poder inserir um texto qualquer. A

diferena para a tag input com o atributo type com o valor text que a tag textarea permite a

insero de textos mais longos e com quebras de linha.

1

2

3

4 Exemplo de uso da tag textarea

5

6

7

8

9 textarea :

10

11

12

13

14

15

Cdigo HTML 2.20: Exemplo de uso da tag textarea

Figura 2.12: Exemplo de uso da tag textarea

24

2.10.3.1 Exerccios de Fixao

1. Crie um documento HTML com formulrio que contenha uma caixa de texto que aceite mais

de uma linha.

2.10.4 A tag label

Em alguns dos exemplos anteriores foram inseridos textos ao lado dos elementos de formulrio

apresentados. Podemos pensar nesses textos como rtulos de cada elemento e exatamente para

esse fim que devemos utilizar a tag label do HTML.

Alm de servir como rtulo, a tag label auxilia o usurio a interagir comos elementos do formulrio.

Utilizando o atributo for podemos fazer com que um elemento do formulrio receba o foco. Veja o

exemplo:

1

2

3

4 Exemplo de uso da tag label

5

6

7

8

9 Nome :

10

11

12

13

14

Cdigo HTML 2.21: Exemplo de uso da tag label

Figura 2.13: Exemplo de uso da tag label

Repare que o atributo for da tag label deve conter um valor igual ao do atributo id do elemento que

desejamos focar.

25

2.10.4.1 Exerccios de Fixao

1. Crie um documento HTML com diversos elementos de formulrio e para cada elemento crie um rtulo. Cada rtulo deve focar o elemento de formulrio correspondente.

2.10.5 A tag form

Desde o momento em que comeamos a falar sobre os elementos de formulrio utilizamos a tag

form, porm no falamos nada sobre ela. A tag form ir definir, de fato, o nosso formulrio. Todos os

elementos de formulrio que vimos anteriormente devem ser filhos diretos ou indiretos de um

elemento com a tag form para que os dados vinculados a esses elementos sejam enviados.

O papel do formulrio enviar os dados contidos nele para algum lugar, mas para onde? O atributo

action quem diz para onde os dados de um formulrio deve ser enviado. Alm disso, devemos

informar a maneira como queremos que esses dados sejam enviados, ou seja, se queremos que eles

sejam enviados atravs de uma requisio do tipo GET ou POST (mtodos de envio definidos no

protocolo HTTP).

2.11 A tag Div

Vamos agora falar de um dos recursos mais utilizados em pginas html, A tag "div" utilizada para

configurao de blocos de textos, principalmente quando se trata de CSS, mas normalmente

atribumos a ela formataes mais complexas.

Basicamente quando utilizamos o DIV ele cria uma quebra de linha antes e depois do grupo de

elementos ali selecionado.

Agora crie uma nova pasta e crie um documento exemlosDiv.html Dentro deste html crie algumas

DIVs como est apresentada abaixo:

1

2

3

4 Exemplo de uso da tag label

5

6

7

8 Nome do Meu Site

9 Slogan do meu site

10

11

12 Home | Clientes | Contato

13

14

15 Bem Vindos

16 Este um exemplo da utilizao de divs e

17 span.

26

18

19

20

Cdigo HTML 2.22: Exemplo de uso da tag div

Voc deve ter percebido que usei a tag eis a explicao do que ele faz: Ela utilizada

normalmente para agrupar elementos em uma linha. Uma quantidade menor.

Vamos a alguns atributos que temos na div e no span:

Align: Alinha horizontalmente a div. Agora podemos colocar na div que representa nosso menu um

align = right e veremos que nosso menu vai agora esta do lado direito do navegador. Ex:

Id: Este atributo identifica uma tag, pode ser usado em varias tags no s na div, ele nico e seu

valor nao pode ser repetido. Visualmente nao tem nenhum efeito para o usurio final. Mas vai ser

muito til quando tivermos estudando CSS. Ex: Agora vamos nomear

nossas divs com os nomes de topo, menu e corpo.

Style: Este e outro atributo que se utiliza bastante nas divs mas ele deve conter instrues de CSS

dentro para que tenha efeito ento utilizaremos este atributo depois.

Class: E outro atributo destinado ao uso de CSS que tambm estudaremos depois.

2.12 Tableless

Tableless como sabemos a forma mais atual de montar layouts de web sites, mas o que vem a ser

tableless? Tableless uma metodologia de desenvolvimento que utiliza basicamente DIV + CSS.

As maiores vantagens em utilizar tableless que o contedo da pgina ser mostrado mais rpido,

mas isso no significa que a pgina est mais leve, outra boa vantagem a acessibilidade, seu site

poder ser visto em dispositivos mveis sem nenhuma alterao e tambm pode ser utilizado por

deficientes visuais embora no sejam todos os sites que tem est caracterstica.

Agora que sabemos utilizar DIVs vamos montar a parte html de um layout tableless que ser

completado quando aprendermos CSS.

Devemos montar um html que fique igual a este da imagem apresentada abaixo: importante que

cada umas das partes do site estejam em uma div. Exemplo:

1 Aqui uma div geral, onde vai est todo o site. 2 Todo o topo do site. 3 4 Apenas a logo marca 5 6 7 Todo o menu do site. 8 9 10 11

Cdigo HTML 2.23: Exemplo de uso de tableless com a tag div

27

2.13 Exerccios de Fixao

1. Construa uma pgina utilizando tudo que voc aprendeu at agora, porm a pgina deve

ficar igual figura abaixo:

Figura 2.14: Imagem exemplo do exerccio

2. Construa o formulrio abaixo em HTML e salve com o nome exercicioformulario.html.

Figura 2.15: Imagem exemplo do exerccio

28

3 CSS

At o momento trabalhamos apenas com os elementos HTML sem nos preocuparmos com a questo

visual dos mesmos. Durante os exemplos mostrados no captulo anterior, cada elemento estava

utilizando a formatao padro fornecida pelo navegador.

A formatao padro pode variar de navegador para navegador, pois apesar de todos os

navegadores tentarem seguir as sugestes do W3C, s vezes ocorrem erros de interpretao da

especificao ou erros de implementao. Alm disso, o W3C sugere, ou seja, no obriga. Portanto,

seria uma boa prtica formatarmos cada elemento para que o efeito visual seja o mesmo em todos

os navegadores.

E esse no o nico motivo, pois na grande maioria das vezes, desejamos aplicar em nossas pginas

um design nico, com a identidade visual da nossa empresa ou cliente. Os elementos HTML possuem

alguns atributos para formatarmos a sua aparncia, porm, alm de serem limitados, o uso desses

atributos esto caindo em desuso. Inclusive existem elementos cuja nica funo alterar a

aparncia de um texto, por exemplo.

Para alterarmos o aspecto visual dos elementos do HTML, o W3C recomenda que utilizemos o CSS

(Cascading Style Sheets - Folhas de Estilo em Cascata). Atualmente o CSS encontra-se em sua terceira

verso, porm nem todos os navegadores implementaram todos os novos recursos.

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

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

style.

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

Definindo as regras CSS em arquivo parte do documento HTML.

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

Propriedade CSS uma caracterstica visual de um elemento HTML. J a regra um conjunto de

propriedades definidas para um elemento ou para um grupo de elementos HTML. Vamos ver um

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

1

2

3

4 Exemplo de CSS diretamente em um elemento

5

6

7 Ol mundo !

8 Ol mundo novamente !

9

10

Cdigo HTML 3.1: Exemplo de aplicao das propriedades CSS inline

29

Figura 3.1: Exemplo de aplicao das propriedades CSS inline

Quando utilizamos as propriedades CSS diretamente em um elemento, dizemos que aplicando o

CSS inline. Essa prtica no recomendada, pois dessa forma no possvel reaproveitar o cdigo

CSS, alm de dificultar a leitura do cdigo HTML.

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

1

2

3

4 Exemplo de aplicao das regras CSS atravs da tag style

5

6 p {

7 font - size : 40 px;

8 color : # ff0000 ;

9 }

10

11

12

13 Ol mundo !


15

16

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

30

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

Como vimos anteriormente, tambm podemos definir as regras CSS emumarquivo parte. Com esse

arquivo em mos, dentro de um documento HTML, para indicarmos qual o arquivo que contm as

regras CSS, devemos utilizar a tag link. Veja o exemplo:

1

2

3 meta http - equiv =" Content - Type " content =" text / html ; charset =UTF -8">

4 Exemplo de aplicao das regras CSS atravs de um arquivo

5

6

7

8 Ol mundo !


10

11

Cdigo HTML 3.3: Exemplo de aplicao das regras CSS atravs de umarquivo

1 p {


3 color : # ff0000 ;

4 }

Cdigo CSS 3.1: estilo.css

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

Perceba que o efeito foi o mesmo de quando aplicamos as regras CSS atravs da tag style. Isso se

deve ao fato de estarmos utilizando a mesma regra. O que mudamos foi apenas onde a definimos.

31

3.1 Estrutura de uma Regra CSS

Uma regra CSS composta por trs partes como podemos observar na imagem abaixo:

Figura 3.4: Composio de uma regra CSS

Podemos ler a regra acima da seguinte forma: ser atribudo o valor 40px propriedade font-size em

todos os elementos que forem selecionados pelo seletor p.

Como no exemplo acima utilizamos aquilo que chamamos de seletor de tipo, todos os elementos

com a tag p recebero as propriedades definidas no corpo da regra.

3.2 Tipos de seletores

No CSS temos definidos sete tipos de seletores que podem ser utilizados sozinhos ou em conjunto:

Seletor universal

Seletor de tipos

Seletor de id

Seletor de classe

3.2.1 Seletor Universal

O seletor universal seleciona todos os elementos de um documento HTML. No exemplo a seguir

iremos fazer com que todos os elementos tenham margem igual a 0px.

1 * {

2 margin : 0px;

3 }

Cdigo CSS 3.2: Usando o seletor universal

3.2.2 Seletor de tipo

O seletor de tipo seleciona todos os elementos cuja tag seja igual ao tipo indicado pelo seletor na

declarao da regra CSS. No exemplo a seguir iremos selecionar todos os elementos que possuem a

tag textarea.

32

1 textarea {

2 border : 1px solid red ;

3 }

Cdigo CSS 3.3: Usando o seletor de tipo

3.2.3 Seletor de id

O seletor de id seleciona um nico elemento cujo atributo id possui o valor indicado pelo seletor

na declarao da regra CSS. No exemplo abaixo iremos selecionar o elemento cujo atributo id possui

o valor cidade. Repare que o seletor de id comea como caractere #.

1 # cidade {

2 font - weight : bold ;

3 }

Cdigo CSS 3.4: Usando o seletor de id

3.2.4 Seletor de classe

O seletor de classe seleciona todos os elementos cujo atributo class possui o valor indicado pelo

seletor na declarao da regra CSS. No exemplo abaixo iremos selecionar todos os elementos cujo

atributo class possui o valor titulos. Repare que o seletor de classe comea com o caractere .

(ponto).

1 .titulos {


3 }

Cdigo CSS 3.5: Usando o seletor de classe


1. Crie uma nova pgina com diversos elementos HTML. Altere a formatao dos elementos

utilizando os seletores que voc acabou de aprender. Tente usar todos os seletores.

3.3 Principais Propriedades CSS

3.3.1 Propriedades de background

background-attachment - define se a imagem de background deve se mover com a rolagem

de um elemento ou no.

background-color - define a cor do background de umelemento.

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

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

background-repeat - define se o background deumelemento de se repetir caso este seja

menor que a parte visvel do elemento.

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

33

1 body {

2 background - attachment : fixed ;

3 background - color : # dddddd ;

4 background - image : url ( ="

34

3.3.3 Propriedades de fonte

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

font-size - define o tamanho da fonte.

font-style - define o estilo de fonte.

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

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

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

1 p {

2 font - family : sans -serif , serif , monospace ;


4 font - style : italic ;

5 font - variant : small - caps ;

6 font - weight : bold ;

7 }

8

9 a {

10 font : italic small - caps bold 14 px /20 px sans -serif , serif , monospace ;

11 }

Cdigo CSS 3.8: Propriedades de fonte

3.3.4 Propriedades de tabela

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

possurem bordas.

1 table {

2 border - collapse : collapse ;

3 }

4 table ,th , td {

5 border : 1px solid blue ;

6 }

Cdigo CSS 3.9: Propriedades de tabela

3.3.5 Propriedades de dimenso

width - define a largura de umelemento.

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

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

height - define a altura de um elemento.

min-height - define a alturamnima de umelemento.

max-height - define a alturamxima de um elemento.

1 div {

2 width : 300 px;

3 height : 300 px;

35

4 }

5

6 h1 {

7 min - width : 10 px;

8 max - width : 300 px;

9 min - height : 10 px;

10 max - height : 300 px;

11 }

Cdigo CSS 3.10: Propriedades de dimenso

3.4 Box Model

O termo box model utilizado para explicar o comportamento visual dos elementos HTML, pois

podemos imaginar que cada elemento em uma pgina est envolvido por uma caixa. Essa caixa

possui trs partes: uma margem interna (padding), uma borda (border) e uma margem externa

(margin).

Figura 3.5: Box model

Um erro muito comum quando estamos comeando a aprender CSS que nos esquecemos de

considerar as dimenses das margens internas e externas no clculo das dimenses de um elemento.

Vamos pensar no seguinte caso: suponha que voc possua um espao de 300px para encaixar um

contedo dentro da sua pgina. Voc poderia incluir no HTML um elemento com a tag div e a

seguinte regra CSS:

1 div {

2 width : 300 px;

3 padding : 10 px;

4 margin : 10 px;

5 border : 1px solid green ;

6 }

Cdigo CSS 3.11: Exemplo de uso incorreto das dimenses de umelemento

36

Num primeiro momento pode parecer que tudo est correto, porm ao abrir a pgina voc

perceber que seu elemento est ultrapassando o limite dos 300px. Isso ocorre porque devemos

incluir as margens internas, as margens externas e a borda na hora de calcular as dimenses finais de

um elemento. No exemplo acima, o correto seria:

1 div {

2 width : 258 px;

3 padding : 10 px;

4 margin : 10 px;

5 border : 1px solid green ;

6 }

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

3.5 Posicionando Elementos

Para posicionar um elemento dentro de um documento HTML o CSS possui os seguintes atributos:

position - define o tipo de posicionamento.

top - define a distncia do topo do elemento em relao a outro elemento ou em relao a

janela.

left - define a distncia do lado esquerdo do elemento em relao a outro elemento ou em

relao a janela.

bottom - define a distncia da base do elemento em relao a outro elemento ou em relao

a janela.

right - define a distncia do lado direito do elemento em relao a outro elemento ou em

relao a janela.

Ao posicionarmos um elemento utilizando os atributos acima devemos nos lembrar que o sistema de

coordenadas dentro de um documento HTML possui a coordenada (0,0) no canto superior esquerdo

de um elemento ou da janela. Tambm devemos nos lembrar que se definirmos uma distncia para o

atributo left, no devemos utilizar o atributo right. A mesma ideia vale para os atributos top e

bottom.

3.5.1 Posicionamento esttico

Este tipo de posicionamento, em geral, no precisa ser definido, pois o tipo de posicionamento

padro de todos os elementos. O posicionamento esttico definido atravs do atributo position

com o valor static e no afetado pelos atributos top, bottom, left e right.

3.5.2 Posicionamento fixo

Um elemento com posicionamento fixo posicionado em relao janela do navegador. definido

atravs do atributo position com o valor fixed e sua posio definida pelos atributos top, bottom,

left e/ou right.

37

Todos os elementos posicionados fixamente no mudam de posio mesmo quando ocorrer uma

rolagem vertical ou horizontal.

3.5.3 Posicionamento relativo

Um elemento com posicionamento relativo posicionado em relao sua posio original.

definido atravs do atributo position com o valor relative e sua posio definida pelos atributos

top, bottom, left e/ou right.

3.5.4 Posicionamento absoluto

Um elemento com posicionamento absoluto posicionado em relao um elemento ancestral ou

janela do navegador. definido atravs do atributo position com o valor absolute e sua posio

definida pelos atributos top, bottom, left e/ou right.

Quando nenhum dos ancestrais de um elemento posicionado absolutamente define um tipo de

posicionamento, o posicionamento absoluto ocorre em relao janela do navegador. Para que ele

ocorra em relao a um ancestral, o elemento ancestral deve definir um posicionamento relativo,

por exemplo.

3.6 Cores em CSS

Em uma propriedade CSS na qual que devemos atribuir uma cor, podemos utilizar trs formas

diferentes de se escrever esse valor: nome da cor, valor hexadecinal ou RGB.

Nem todas as cores possuem um nome e por esse motivo que normalmente utilizamos a forma

hexadecimal ou RGB na grande maioria das vezes. Uma cor heaxadecimal definida da seguinte

forma: #RRGGBB, na qual RR, GG e BB devem variar de 00 a FF e representam os componentes

vermelho, verde e azul de uma cor.

Para definirmos uma cor utilizando a notao RGB devemos utilizar a funo rgb(R, G, B)

substituindo as letras R, G e B por valores de 0 a 255 ou por uma porcentagem de 0% a 100%. Em

CSS3 ainda possumos mais trs formas: RGBA, HSL e HSLA.

O HSL define as cores atravs da matiz, saturao e luminosidade (hue, saturation e lightness).

Devemos utilizar a funo hsl(H, S, L), na qual H pode variar de 0 a 360 e S e L de 0% a 100%.

As formas RGBA e HSLA utilizam as funes rgba(R, G, B, A) e hsla(H, S, L, A), respectivamente.

Ambas as funes possuem um ltimo parmetro que significa a opacidade da cor (alpha). Esse valor

varia de 0 a 1 ao passo de 0.1.

3.7 Unidades de Medida

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

in - polegada.

38

cm - centrmentro.

mm- milmetro.

em - tamanho relativo ao tamanho de fonte atual no documento. 1em igual ao tamanho da fonte

atual, 2em o dobro do tamanho da fonte atual e assim por diante.

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

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

px - pixels (umponto na tela do computador).

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

39

4 Exerccios Finais

4.1 Lista 1

1. Crie uma folha de estilos, chame-a de basico.css, e a carregue no arquivo paginaexemplo.html.

2. Nesta folha de estilos, usando o mnimo de declaraes possvel, declare:

a) Que todo H1 tenha fonte Tahoma, ou sans-serif, se Tahoma no existir

b) Que todo o texto do corpo (BODY) do arquivo tenha tamanho 10 pontos

c) Que todos os H1, H2 e H3 sejam vermelhos

d) Que os H1 tenham tamanho 24 pontos

e) Que os H2 tenham tamanho 18 pontos

f) Que os H3 tenham tamanho 14 pontos

3. Mude a cor do fundo da pgina para azul marinho (navy) e a cor default do texto para branco em

uma nica declarao.

4. Faa com que todo texto marcado em itlico aparea em azul ciano (cyan).

5. Carregue a folha de estilos basico.css em outros arquivos HTML e veja o que acontece. Faa com

que uma dessas outras pginas tenha uma cor de fundo clara (amarela, por exemplo) e cor de texto

escuro (diferente daquela definida por basico.css) sem que isto altere as outras paginas que usam o

mesmo arquivo.

6. Faa com que o primeiro pargrafo do arquivo paginaexemplo.html tenha texto verde.

7. Faa com que a clula do meio da tabela de paginaexemplo.html tenha texto vermelho sobre

fundo amarelo (a tabela 3x3 encontra-se no meio da pgina).

Para os exerccios abaixo, use uma nova folha de estilos para aplicar as alteraes a seguir, chame-a

de estilos.css.

8. Defina classes sec2, sec3, sec31 e sec32 para as sees () do documento

paginaexemplo.html. As sees esto indicadas em comentrios HTML (por exemplo:

40

12. Descreva o funcionamento das seguintes tags HTML:

... : __________________________________________________

: _________________________________________________________

... : ____________________________________________

: _____________________________________________

: ___________________________________________

... : ___________________________________________

... : _______________________________________

13. Construa um formulrio HTML com os seguintes campos:

Nome: Texto, usurio pode digitar no mximo 30 caracteres.

Idade: Caixa de seleo (lista ou combo) com os itens:

Entre 0 e 18

Entre 19 e 25

Entre 26 e 35

36 ou Mais

Sexo: Dois botes de radio, tendo um radio o value Masculino e outro radio com o value

Feminino.

E-Mail: Texto, usurio pode digitar no mximo 80 caracteres.

Observaes: TextArea com sete linhas e 40 colunas.

4.2 Lista 2

1. O que HTML?

a) Linguagem de Marcao de HiperTexto b) Linguagem de Alta Integrao c) Hospedagem tratada por meio lgico

2. O que so tags?

a) So imagens colocadas em uma Home Page b) Comandos ou instrues dadas em HTML c) Marcaes de texto para hiperlinks

3. Para que serve o comando ?

41

a) Colocar a figura imagem.gif como fundo da pgina b) Colocar a figura imagem.gif no canto superior da pgina c) Colocar a figura imagem.gif no centro da pgina

4. Para que serve a Tag ?

a) Configurar a linguagem da pgina para Portugus b) Quebra de linha sem deixar a linha seguinte em branco c) Incio de Pargrafo

5. Qual o comando para inserir uma imagem "Bolhas.bmp" em um Home Page ?

a) b) c)

6. O que um Hiperlink em uma Home Page ?

a) uma pgina com vrias opes de sites b) uma forma mais rpida de procura na Web c) um local clicvel, usado para saltar de um documento na Internet a outro

7. O comando BLOCKQUOTE serve para:

a) Colocar aspas duplas num trecho de cdigo html b) uma forma mais rpida de procura na Web c) colocar marcadores em uma lista no numerada

8. O que uma ncora em HTML ?

a) uma tipo de caixa de texto usada para entrar dados num formulrio b) feita atravs das tags c) um local dentro do prprio texto referenciado por um link interno

9. Quais so as tag usadas para fazer Ttulos (cabealhos) em um documento HTML?

a) as tags b) as tags c) as tags , , ,

10. Se desejarmos fazer uma pgina com a figura de fundo fixa, temos que?

a) Usar o atributo background=nome_figura.gif na tag body b) Fazer nada. O HTML no permite este tipo de procedimento c) Usar o atributo bgproperties=fixed na tag body

11. Se desejarmos fazer listas no numeradas num documento HTML, devemos:

a) Usar as tags b) Usar as tags c) Usar o atributo bgproperties=fixed na tag body

42

12. Existem trs tipos de tags HTML: as de nvel de bloco que colocam uma quebra de linha antes e

depois do elemento; as tags inline que no possuem quebras de linha associadas ao elemento e as

tags substitudas que tm as dimenses definidas ou calculadas. Dentre as tags abaixo, qual(is)

(so) consideradas de bloco?

a) b) c) d) e)

13. Podemos classificar como estilo de fontes 5 tipos. Faa a associao entre sua classificao e suas

caractersticas:

a) Serif b) Sans-serif (sem serifa) c) Monoespaada d) Cursiva e) Fantasy (smbolos)

14. Esto corretamente aninhadas os seguintes grupos de tags:

a) Meu titulo... b) palavra c) texto qualquer d) palavra e) texto qualquer

15. Uma tabela que possua 5 linhas e 6 colunas possuir quantos pares de tags ...?

a) 25 b) 30 c) 35 d) 5 e) 11

( ) Fontes que no possuem aquele ornamento

final (curvas) que fazem com que letras

individuais se destaquem de suas vizinhas.

( ) Fontes que ocupam o mesmo espao entre

si. As letras i e M deste estilo, por

exemplo, ocupam a mesma quantidade de

espao.

( ) Fontes que possuem um ornamento em suas

extremidades.

( ) Fontes que imitam a letra escrita. o

oposto da letra de frma.

( ) Fontes extremamente ornamentais,

ilustraes ou cones.

43

16. Dado o seguinte cdigo, quantas clulas possuir esta tabela?

blah

blah

blah

blah

blah

blah

blah

17. Qual das tags abaixo faz um trao (rgua) horizontal num documento HTML?

a) b) c) d) e)

18. So atributos da tag :

a) direction b) behavior c) color d) background e) scrollamount

a) 6

b) 7

c) 3

d) 5

e) 8

44

19. Qual tag responsvel por aplicar um ttulo ou legenda exclusivamente a uma tabela?

a) b) c) d) e)

20. Para mesclar clulas de uma mesma linha de uma tabela, usamos o atributo:

a) colspan b) rowspan c) linespan d) merge e) width

21. Para mesclar clulas de uma mesma coluna, usamos o atributo:


22. Marque as tags que no possuem a tag correspondente de fechamento:

a) b) c) d) e)

23. Qual dos elementos abaixo considerado um exemplo de link externo?

a) Clique aqui b) Clique aqui c) Clique aqui d) Clique aqui e) Clique aqui

24. Considerando o item 1 da questo anterior, como seria um link que fizesse referncia ncora

inicio?


45

25. Uma tag alternativa tag :

a) b) c) d) e)

26. Uma lista ordenada (ordered list) comea a contagem em V (5 em algarismo romano

maisculo). Como deveriam ser seus atributos?

a) b) c) d) e)

27. Uma lista no ordenada (unordered list) que tenha pequenos quadrados como marcadores seria:

a) b) c) d) e)

28. Quais mtodos um formulrio em HTML utiliza para enviar as informaes?

a) GET e FORM b) FORM e ACTION c) GET e POST d) ACTION e METHOD

29. Em um formulrio HTML, qual atributo responsvel por indicar para onde sero enviadas as

informaes?

a) ACTION b) METHOD c) FORM d) VALUE e) ADDRESS

30. So tags de elementos de um formulrio (pode haver mais de um)

a) b) c) d) e)

46

31. Existem trs tipos de tags HTML: as de nvel de bloco que colocam uma quebra de linha antes e

depois do elemento; as tags inline que no possuem quebras de linha associadas ao elemento e as

tags substitudas que tm as dimenses definidas ou calculadas. Dentre as tags abaixo, qual(is)

(so) consideradas de bloco?

a) b) c) d) e)

32. Para mesclar clulas de uma mesma linha de uma tabela, usamos o atributo:


33. Para mesclar clulas de uma mesma coluna, usamos o atributo:


34. Qual dos elementos abaixo considerado um exemplo de link externo?


35. Uma lista ordenada (ordered list) comea a contagem em V (5 em algarismo romano

maisculo). Como deveriam ser seus atributos?

a) b) c) d) e)

36. Uma lista no ordenada (unordered list) que tenha pequenos quadrados como marcadores, seria:

a)

47

b) c) d) e)

37. Podemos afirmar sobre a tag

a) Serve para configurar o HTML para o portugus brasileiro b) Sua tag de fechamento c) Salta uma linha d) Deve ser utilizada sempre em conjunto com a tag e) No possui a tag de fechamento

38. Um link para e-mail seria do tipo

a) Email b) Email c) Email d) Email e) Email

39. Dentre as tags enumeradas, qual(is) (so) considerada(s) tag(s) inline?

a) b) c) d) e)

40. Um link da pgina pag1.html para o final da pgina pag2.html seria mais ou menos da

seguinte maneira

a) Clique aqui para ir pgina 2 b) Clique aqui para ir pgina 2 c) Clique aqui para ir pgina 2 d) Clique aqui para ir pgina 2 e) Clique aqui para ir pgina 2

41. Observe o seguinte cdigo e responda quantas clulas esta tabela possui.

a) 15 b) 14 c) 13 d) 12 e) 11

49

5 Referncias

1. SILVA, Mauricio Samy. Criando Sites com HTML. Novatec. 2008.

2. SILVA, Mauricio Samy.Construindo Sites com CSS (X)HTML, Novatec. 2007.

3. FREEMAN, E.; FREEMAN, E. Use a cabea! HTML com CSS e XHTML. 1 Ed., So Paulo: Alta

Books, 2008.

4. DUCKETT, J. Introduo programao Web com HTML, XHTML e CSS. 2 Ed., So Paulo:

Cincia Moderna, 2010.

5. Desenvolvimento Web com HTML, CSS e Javascript Apostila. K19 Treinamentos.

6. Educandos. HTML, CSS e JS Apostila. Projeto e-Jovem.

Obs.: Grande parte do contedo desta apostila de propriedade da K19 Treinamentos.

autoria web apostila

Documents