Autoria Web Apostila

AUTORIA WEB
Prof. Antonio Arley Rodrigues da Silva

arleysb@gmail.com

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 <html >
2 <head >
3 <meta http - equiv =" Content - Type " content =" text / html ; charset =UTF -8">
4 <title >Exemplo da estrutura bsica de um documento HTML </ title >
5 </ head >
6 <body >
7 <p>Ol mundo !</p>
8 </ body >
9 </ html >
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 <html>
2 <head>
3 <meta http-equiv ="Content-Type" content =" text / html ; charset =UTF-8">
4 <title>Exemplo da estrutura bsica de um documento HTML </title>
5 </head >
6 <body >
7 <p>Ol IFCE!</p>
8 </body >
9 </ html >

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 <html>
2 <head>
3 <meta http-equiv=" Content-Type " content =" text / html ; charset =UTF-8">
4 <title >Exemplo de uso correto da semntica HTML </ title>
5 </head>
6 <body>
7 <p>Este um texto para mostrar o significado da tag p.</p>
8 </body>
9 </html>

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 <html>
2 <head>
3 <meta http-equiv=" Content-Type" content =" text / html ; charset =UTF-8">
4 <title >Exemplo de quebra de linha em um pargrafo </ title >
5 </head>
6 <body>
7 <p>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 .</p>
10
11 <p>J este pargrafo demonstra a quebra de linha forada .<br/>Percebeu ?</p>
12 </body>
13 </html>

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 <html>
2 <head>
3 <meta http-equiv ="Content-Type" content=" text/html ; charset =UTF-8">
4 <title>Exemplo de quebra de linha em um pargrafo </ title >
5 </head>
6 <body>
7 <p>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.</p>
10
11 <p>J este pargrafo demonstra a quebra de linha forada .<br/>Percebeu ?</p>
12 </body>
13 </html>

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 <html>
2 <head>
3 <meta http-equiv =" Content-Type" content=" text/html ; charset=UTF-8">
4 <title>Exemplo de cabealhos </ title>
5 </head>
6 <body>
7 <h1>Ttulo 1</h1 >
8 <h2>Ttulo 2</h2 >
9 <h3>Ttulo 3</h3 >
10 <h4>Ttulo 4</h4 >
11 <h5>Ttulo 5</h5 >
12 <h6>Ttulo 6</h6 >
13 </body>
14 </html>

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 <html >
2 <head >
3 <meta http-equiv="Content-Type "content=" text/html ; charset=UTF-8">
4 <title >Curso de Programao Web</ title >
5 </ head >
6 <body >
7 <h1 >Programao Web Disciplina de Autoria Web </h1 >
8
9 <p>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 .</p>
13

10

14 <p>Essas linguagens so utilizadas para o desenvolvimento da camada de
15 apresentao das aplicaes web .</p>
16
17 <h2 >Pr - requisitos </h2 >
18
19 <p> Familiaridade com algum sistema operacional ( Windows / Linux / Mac OS X)</p>
20 <p>Conhecimentos bsicos de Editor de Texto e Planilha Eletrnica </p>
21
22 <h2 >Agenda </h2 >
23
24 <h3 >s teras </h3 >
25
26 <p>xx/xx/ xxxx das 18:00 s 20:00 </p>
27 <p>xx/xx/ xxxx das 20:10 s 22:00 </p>
28
29 <h3 >Aos sbados </h3 >
30
31 <p>xx/xx/ xxxx das 08:00 s 14:00 </p>
32 <p>xx/xx/ xxxx das 14:00 s 20:00 </p>
33 </ body >
34 </ html >

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 <html >
2 <head >
3 <meta http-equiv="Content-Type" content="text / html ; charset=UTF-8">
4 <title >Exemplo de uso da tag a</ title >
5 </ head >
6 <body >
7 <p><a href ="pagina2 . html ">Exemplo de link relativo </a></p>
8 <p><a href ="outros / pagina3.html ">Outro exemplo de link relativo </a></p>
9 <p><a href ="http://www.ifce.edu.br">Exemplo de link absoluto </a></p>

11

10 </ body >
11 </ html >
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 <html >
2 <head >
3 <meta http-equiv ="Content-Type" content=" text / html ; charset =UTF-8">
4 <title >Exemplo de uso da tag a com o atributo target </ title >
5 </head >
6 <body >
7 <p><a href =" pagina1 . html " target =" _blank ">Abre em outra janela / aba </a></p>
8 <p><a href =" pagina2 . html " target =" _self ">Abre na mesma janela </a></p>
9 <p><a href =" pagina3 . html ">Abre na mesma janela </a></p>
10 </ body >
11 </html >
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 <html >
2 <head >
3 <meta http - equiv =" Content - Type " content =" text / html ; charset =UTF -8">
4 <title >Exemplo de uso da tag a como ncora </ title >
5 </ head >
6 <body >
7 <p><a href ="# mais_info ">Veja mais informaes </a></p>
8 <p><a href =" pagina2 . html # outra_ancora ">ncora em outra pgina </a></p>
9
10 ...
11 ...
12 ...
13
14 <a name =" mais_info ">Mais informaes </a>
15
16 <p>
17 ...
18 ...
19 ...
20 </p>
21 </ body >
22 </ html >

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 <html>
2 <head>
3 <meta http-equiv =" Content-Type" content=" text/html ; charset =UTF-8">
4 <title>Exemplo de uso da tag img </title>
5 </head>
6 <body>
7 <h1>Pronatec </h1>
8 <img src ="<img src="http://www.revista.espiritolivre.org/wp-content/uploads/2013/05/23-05-
2013_logo_pronatec.jpg" />
9
10 <h2>Curso </h2>
11 <p>
12 <img src="http://www.scriptcase.com.br/blog/wp-content/uploads/2013/06/programacao-web-1.jpg"
width="161" height="136"/>
13 Programao Web
14
15 </ body >
16 </ html >
Cdigo HTML 2.13: Exemplo de uso da tag img

Figura 2.4: Exemplo de uso da tag img

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 <html >
2 <head >
3 <meta http-equiv="Content-Type" content="text/html ; charset=UTF-8">
4 <title >Exemplo de uso da tag table </ title >
5 </ head >
6 <body >
7 <h1 >Carros </h1 >
8
9 <table >
10 <tr >
11 <th >Marca </th >
12 <th >Modelo </th >
13 <th >Ano </th >
14 </tr >
15 <tr >
16 <td >Toyota </td >
17 <td >Corolla </td >
18 <td >2013 </td >
19 </tr >
20 <tr >
21 <td >Honda </td >
22 <td >Civic </td >
23 <td >2011 </td >
24 </tr >
25 <tr >
26 <td >Mitsubishi </td >
27 <td >Lancer </td >

15

28 <td >2012 </td >
29 </tr >
30 <tr >
31 <td colspan ="3">ltima atualizao: 08/2013 </td >
32 </tr >
33 </ table >
34 </ body >
35 </ html >
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 <html>
2 <head>
3 <meta http-equiv =" Content-Type" content=" text/html ; charset=UTF-8">
4 <title>Exemplo de uso da tag dl </title>
5 </head>
6 <body>
7 <h1 >PRONATEC </h1 >
8 <h2 >Cursos </h2 >
9
10 <dl >
11 <dt >Programao Web </dt >
12 <dd>
13 A programao web necessria para o desenvolvimento de sites dinmicos
14 e sistemas com interface web...

17

15 </dd>
16 <dt >Desenvolvimento Web com HTML , CSS e JavaScript </dt >
17 <dd>
18 Atualmente , praticamente todos os sistemas corporativos possuem
19 interfaces web . Para quem deseja atuar no mercado de desenvolvimento ...
20 </dd>
21 <dt >SQL e Modelo Relacional </dt >
22 <dd>
23 Como as aplicaes corporativas necessitam armazenar dados fundamental
24 que os desenvolvedores possuam conhecimentos sobre persistncia de dados .
25 </dd>
26 </dl>
27 </body>
28 </html>
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 <html >
2 <head>
3 <meta http-equiv="Content-Type" content=" text/html ; charset=UTF-8">
4 <title>Exemplo de uso da tag ol </title >

18

5 </head>
6 <body >
7 <h1 >RECEITAS PRONATEC</h1 >
8 <h2 >Macarro instantneo </h2 >
9 <h3 >Modo de preparo </h3 >
10
11 <ol >
12 <li >Ferver 600 ml de gua em uma panela .</li >
13 <li >Retirar o macarro do pacote .</li >
14 <li >Colocar o macarro na panela no fogo baixo .</li >
15 <li >Cozinhar o macarro por 3 min .</li >
16 <li >Temperar a gosto .</li >
17 </ol >
18 </ body >
19 </ html >
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 <html >
2 <head >
3 <meta http-equiv ="Content-Type" content=" text/html ; charset=UTF-8">
4 <title >Exemplo de uso da tag dl </title >

19

5 </head >
6 <body >
7 <h1 >PRONATEC </h1 >
8 <h2 >Programao Web </h2 >
9 <h3 >Pr-requisitos </h3 >
10
11 <ul >
12 <li >Conhecimento de algum sistema operacional ( Windows / Linux / MacOS X)</li >
13 <li >Pacote de Aplicativos Office </li >
14 </ul >
15 </body >
16 </html >

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 <html >
2 <head >
3 <meta http-equiv ="Content-Type" content ="text / html ; charset=UTF-8">
4 <title >Exemplo de uso da tag input </title >
5 </head >
6 <body >
7 <form action ="pagina.html" method="get ">
8 <p>
9 text :
10 <input type ="text " />
11 </p>
12 <p>
13 password :
14 <input type ="password " />
15 </p>
16 <p>
17 checkboxes :
18 <input type ="checkbox " name ="checkgroup " />
21 </p>
22 <p>
23 radios :
24 <input type ="radio " name ="checkgroup " />
25 <input type ="radio " name ="checkgroup " />

21

26 <input type ="radio " name =checkgroup " />
27 </p>
28 <p>
29 button :
30 <input type ="button " value =" Boto " />
31 </p>
32 <p>
33 submit :
34 <input type ="submit " value ="Enviar " />
35 </p>
36 <p>
37 file :
38 <input type ="file" />
39 </p>
40 <p>
41 reset :
42 <input type =" reset " value ="Descartar alteraes " />
43 </p>
44 <p>
45 hidden :
46 <input type ="hidden" value="valor escondido" />
47 </p>
48 </form >
49 </body >
50 </html >

Cdigo HTML 2.18: Exemplo de uso da tag input

Figura 2.10: Exemplo de uso da tag input

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 <html >
2 <head >
3 <meta http-equiv ="Content-Type "content="text / html ; charset=UTF-8">
4 <title>Exemplo de uso da tag select </title >
5 </ head >
6 <body >
7 <form action ="pagina.html" method ="get">
8 <p>
9 Selecione uma cidade :
10 <select >
11 <option value ="sao-paulo ">So Paulo </ option >
12 <option value ="rio-de-janeiro">Rio de Janeiro </ option >
13 <option value ="porto-alegre ">Porto Alegre </ option >
14 <option value ="curitiba">Curitiba </ option >
15 </ select >
16 </p>
17
18 <p>
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 <select multiple ="multiple ">
23 <option value ="desktops ">Desktops </option >
24 <option value ="notebooks ">Notebooks </option >
25 <option value ="tablets ">Tablets </option >
26 <option value ="celulares ">Celulares </option >
27 </select >
28 </p>
29 </form >
30 </body >
31 </html >
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 <html >
2 <head >
3 <meta http-equiv="Content-Type" content=" text/html ; charset=UTF-8">
4 <title >Exemplo de uso da tag textarea </ title >
5 </head >
6 <body >
7 <form action ="pagina.html "method="get ">
8 <p>
9 textarea :
10 <textarea >
11 </textarea >
12 </p>
13 </form >
14 </body >
15 </html >
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 <html>
2 <head>
3 <meta http-equiv ="Content-Type " content=" text/html ; charset=UTF-8">
4 <title >Exemplo de uso da tag label </title >
5 </head >
6 <body >
7 <form action ="pagina.html" method="get ">
8 <p>
9 <label for ="nome">Nome :</ label >
10 <input type ="text" id="nome" />
11 </p>
12 </form >
13 </body >
14 </html >
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 <html>
2 <head>
3 <meta http-equiv ="Content-Type " content=" text/html ; charset=UTF-8">
4 <title >Exemplo de uso da tag label </title >
5 </head >
6 <body >
7 <div>
8 <h1>Nome do Meu Site</h1>
9 <h2>Slogan do meu site</h2>
10 </div>
11 <div>
12 Home | Clientes | Contato
13 </div>
14 <div>
15 <h3>Bem Vindos</h3>
16 <span><p>Este um exemplo da utilizao de <b>divs</b> e
17 <b>span</b>.</p></span>

26

18 </div>
19 </body >
20 </html >
Cdigo HTML 2.22: Exemplo de uso da tag div

Voc deve ter percebido que usei a tag <span> 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: <div
align="right">
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: <div id="menu" align="right"> 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 <div id=geral> Aqui uma div geral, onde vai est todo o site.
2 <div id=topo> Todo o topo do site.
3
4 <div id=marca> Apenas a logo marca
5 </div>
6
7 <div id=menu> Todo o menu do site.
8 </div>
9
10 </div>
11 </div>
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 <html>
2 <head>
3 <meta http-equiv="Content-Type" content="text/html ; charset=UTF-8">
4 <title>Exemplo de CSS diretamente em um elemento </title>
5 </head>
6 <body>
7 <p style ="font-size : 40px; color: #ff0000 ">Ol mundo !</p>
8 <p>Ol mundo novamente !</p>
9 </body>
10 </html>
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 <html >
2 <head >
3 <meta http - equiv =" Content - Type " content =" text / html ; charset =UTF-8">
4 <title >Exemplo de aplicao das regras CSS atravs da tag style </ title >
5 <style type =" text / css ">
6 p {
7 font - size : 40 px;
8 color : # ff0000 ;
9 }
10 </ style >
11 </ head >
12 <body >
13 <p>Ol mundo !</p>
15 </ body >
16 </ html >

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 <html >
2 <head >
3 meta http - equiv =" Content - Type " content =" text / html ; charset =UTF -8">
4 <title >Exemplo de aplicao das regras CSS atravs de um arquivo </ title >
5 <link rel =" stylesheet " type =" text / css" href =" estilo.css " />
6 </ head >
7 <body >
8 <p>Ol mundo !</p>
10 </ body >
11 </ html >

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 ( ="<img src="http://www.revista.espiritolivre.org/wp-content/uploads/2013/05/23-05-
2013_logo_pronatec.jpg");
5 background - position : left top ;
6 background - repeat : repeat ;
7 }
8
9 div {
10 background : # dddddd url ( ="<img src="http://www.revista.espiritolivre.org/wp-content/uploads/2013/05/23-05-
2013_logo_pronatec.jpg")
11 no - repeat center center fixed ;
12 }
Cdigo CSS 3.6: Propriedades de background
3.3.2 Propriedades de texto
color - define a cor do texto.
direction - define a direo do texto.
letter-spacing - define o espaamento entre as letras do texto.
line-height - define a altura das linhas de umtexto.
text-align - define o alinhamento horizontal do texto.
text-decoration - define uma "decorao"ou efeito para um texto.
text-indent - define a identao da primeira linha de um bloco de texto.
text-transform- define a capitalizao do texto.
vertical-align - define o alinhamento vertical do texto.
white-space - define como os espaos do texto sero tratados.
word-spacing - define o espaamento entre as palavras do texto.
1 p {
2 color : green ;
3 direction : rtl ;
4 letter - spacing : 10 px;
5 line - height : 30 px;
6 text - align : right ;
7 text - decoration : blink ;
8 text - indent : 50 px;
9 text - transform : uppercase ;
10 vertical - align : middle ;
11 white - space : nowrap ;
12 word - spacing : 30 px;
13 }
Cdigo CSS 3.7: Propriedades de texto

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 (<DIV>) do documento
paginaexemplo.html. As sees esto indicadas em comentrios HTML (por exemplo: <!--Seo 2 --
>). Aplique um fundo diferente (imagem ou cor) nessas sees para diferenci-las das outras.
9. Tire os sublinhados de todos os links e substitua-os por um fundo cinza claro.
10. Faa com que o link ativo (active) fique em negrito; que o link normal tenha tamanho 10pt e que
mostre fundo amarelo quando o mouse estiver sobre ele (hover); e que o link visitado no tenha
mais cor de fundo, mas recupere o sublinhado. Obs: Para fazer um link ainda no visitado, faa um
link para qualquer recurso do sistema de arquivos; para ver o link ativo, clique no link e segure o
mouse.
11. Defina todos os ttulos H2 como sendo caixa alta (uppercase).

40

12. Descreva o funcionamento das seguintes tags HTML:
<H3> ... </H3>: __________________________________________________
<HR>: _________________________________________________________
<Form ...> ... </Form>: ____________________________________________
<input type=text ...>: _____________________________________________
<input type=hidden ...>: ___________________________________________
<select ...> ... </select>: ___________________________________________
<textarea ...> ... </textarea>: _______________________________________
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 <body background="imagem.gif"> ?

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 <BR> ?
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) <IMG BMP="bolhas.bmp">
b) <IMG PICTURE="bolhas.bmp">
c) <IMG SRC="bolhas.bmp">
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 <form></form>
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 <form></form>
b) as tags <table><tr><td></td></tr></table>
c) as tags <h1></h1>, <h2></h2>, , <h6></h6>
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 <UL><LI></LI></UL>
b) Usar as tags <OL><LI></LI></OL>
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) <i>
b) <u>
c) <table>
d) <ul>
e) <h1>

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) <HTML><HEAD><TITLE>Meu titulo</TITLE></HEAD></BODY>...</BODY></HTML>
b) <i><u>palavra</i></u><br>
c) <p><font color=red>texto qualquer</font></p>
d) <br><b>palavra</b></br>
e) <marquee><u>texto qualquer</u></marquee>

15. Uma tabela que possua 5 linhas e 6 colunas possuir quantos pares de tags <td>...</td>?
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?
<table width="300" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>blah</td>
<td colspan="2">blah</td>
</tr>
<tr>
<td rowspan="2">blah</td>
<td>blah</td>
<td>blah</td>
</tr>
<tr>
<td>blah</td>
<td>blah</td>
</tr>
</table>

17. Qual das tags abaixo faz um trao (rgua) horizontal num documento HTML?
a) <th>
b) <ruler>
c) <line>
d) <hr>
e) <style>

18. So atributos da tag <marquee>:
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) <th>
b) <tr>
c) <td>
d) <table>
e) <caption>

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:
a) colspan
b) rowspan
c) linespan
d) merge
e) width

22. Marque as tags que no possuem a tag correspondente de fechamento:
a) <br>
b) <h1>
c) <img>
d) <font>
e) <table>

23. Qual dos elementos abaixo considerado um exemplo de link externo?
a) <a name=inicio></a>Clique aqui
b) <a href=pag2.html>Clique aqui</a>
c) <a href=http://www.cefetce.br>Clique aqui</a>
d) <a href=#inicio>Clique aqui</a>
e) <a href=#www.playboy.com.br>Clique aqui</a>

24. Considerando o item 1 da questo anterior, como seria um link que fizesse referncia ncora
inicio?
a) <a href=inicio.html>Clique aqui</a>
b) <a href=inicio>Clique aqui</a>
c) <a href=#inicio>Clique aqui</a>
d) <a href=#www.inicio.com.br>Clique aqui</a>
e) <a name=#inicio>Clique aqui</a>

45

25. Uma tag alternativa tag <b> :
a) <i>
b) <bolder>
c) <black>
d) <strong>
e) <blockquote>

26. Uma lista ordenada (ordered list) comea a contagem em V (5 em algarismo romano
maisculo). Como deveriam ser seus atributos?
a) <ol type=disc begin=5>
b) <ul type=a start=V>
c) <ol type=I start=V>
d) <ol type=I start=5>
e) <ol type=V>

27. Uma lista no ordenada (unordered list) que tenha pequenos quadrados como marcadores seria:
a) <ol type=quadrado>
b) <ul type=square>
c) <ol type=disc>
d) <ul type=circle>
e) <ul type=disc>

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) <INPUT>
b) <TEXTAREA>
c) <SELECT>
d) <TEXTBOX>
e) <RADIOBUTTON>

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) <i>
b) <u>
c) <table>
d) <ul>
e) <h1>
32. Para mesclar clulas de uma mesma linha de uma tabela, usamos o atributo:
a) colspan
b) rowspan
c) linespan
d) merge
e) width

33. Para mesclar clulas de uma mesma coluna, usamos o atributo:
a) colspan
b) rowspan
c) linespan
d) merge
e) width

34. Qual dos elementos abaixo considerado um exemplo de link externo?
a) <a name=inicio></a>Clique aqui
b) <a href=pag2.html>Clique aqui</a>
c) <a href=http://www.ifce.edu.br>Clique aqui</a>
d) <a href=#inicio>Clique aqui</a>
e) <a href=#www.playboy.com.br>Clique aqui</a>

35. Uma lista ordenada (ordered list) comea a contagem em V (5 em algarismo romano
maisculo). Como deveriam ser seus atributos?
a) <ol type=disc begin=5>
b) <ul type=a start=V>
c) <ol type=I start=V>
d) <ol type=I start=5>
e) <ol type=V>

36. Uma lista no ordenada (unordered list) que tenha pequenos quadrados como marcadores, seria:
a) <ol type=quadrado>

47

b) <ul type=square>
c) <ol type=disc>
d) <ul type=circle>
e) <ul type=disc>

37. Podemos afirmar sobre a tag <BR>
a) Serve para configurar o HTML para o portugus brasileiro
b) Sua tag de fechamento </BR>
c) Salta uma linha
d) Deve ser utilizada sempre em conjunto com a tag <b>
e) No possui a tag de fechamento </BR>

38. Um link para e-mail seria do tipo
a) <a name=http://recomo@ifce.edu.br>Email</a>
b) <a href=http://recomo@ifce.edu.br>Email</a>
c) <a href=recomo@ifce.edu.br>Email</a>
d) <a href=mailto:recomo@ifce.edu.br>Email</a>
e) <a href=send:rcomo@ifce.edu.br>Email</a>

39. Dentre as tags enumeradas, qual(is) (so) considerada(s) tag(s) inline?
a) <ul>
b) <li>
c) <b>
d) <i>
e) <table>

40. Um link da pgina pag1.html para o final da pgina pag2.html seria mais ou menos da
seguinte maneira
a) <a href=pag2.html>Clique aqui para ir pgina 2</a>
b) <a href=pag2.html#final>Clique aqui para ir pgina 2</a>
c) <a href=pag1.html#final>Clique aqui para ir pgina 2</a>
d) <a href=pag1.html>Clique aqui para ir pgina 2</a>
e) <a href=final#pag2.html>Clique aqui para ir pgina 2</a>

41. Observe o seguinte cdigo e responda quantas clulas esta tabela possui.
<table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td> </td>
a) 15
b) 14
c) 13
d) 12
e) 11

48

<td> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>

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

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Autoria Web Apostila

Enviado por

Direitos autorais:

Formatos disponíveis

AUTORIA WEB

Prof. Antonio Arley Rodrigues da Silva

Você também pode gostar