Vous êtes sur la page 1sur 49

AUTORIA WEB

Prof. Antonio Arley Rodrigues da Silva arleysb@gmail.com

Sumrio
1 2 Introduo ....................................................................................................................................... 4 HTML ............................................................................................................................................... 5 2.1 Estrutura Bsica....................................................................................................................... 5 Exerccios de Fixao ....................................................................................................... 6 2.1.1 2.2 2.3

Semntica HTML ..................................................................................................................... 6 Pargrafos ............................................................................................................................... 7 Exerccios de Fixao ....................................................................................................... 7

2.3.1 2.4

Cabealho ................................................................................................................................ 8 Exerccios de Fixao ....................................................................................................... 9

2.4.1 2.5

Links ....................................................................................................................................... 10 Exerccios de Fixao ..................................................................................................... 11

2.5.1 2.6

ncoras .................................................................................................................................. 11 Exerccios de Fixao ..................................................................................................... 12

2.6.1 2.7

Imagens ................................................................................................................................. 13 Exerccios de Fixao ..................................................................................................... 14

2.7.1 2.8

Tabelas .................................................................................................................................. 14 Exerccios de Fixao ..................................................................................................... 15

2.8.1 2.9

Listas ...................................................................................................................................... 16 Lista de Definio .......................................................................................................... 16 Exerccios de Fixao ..................................................................................................... 17 Lista Ordenada .............................................................................................................. 17 Exerccios de Fixao ..................................................................................................... 18 Lista Sem Ordem ........................................................................................................... 18 Exerccios de Fixao ..................................................................................................... 19

2.9.1 2.9.2 2.9.3 2.9.4 2.9.5 2.9.6 2.10

Formulrios ........................................................................................................................... 19 A tag input ..................................................................................................................... 19 A tag Select .................................................................................................................... 22 A tag textarea ................................................................................................................ 23 A tag label ...................................................................................................................... 24 A tag form...................................................................................................................... 25

2.10.1 2.10.2 2.10.3 2.10.4 2.10.5 2.11 2.12

A tag Div ................................................................................................................................ 25 Tableless ................................................................................................................................ 26

2.13 3

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

CSS ................................................................................................................................................. 28 3.1 3.2 Estrutura de uma Regra CSS .................................................................................................. 31 Tipos de seletores ................................................................................................................. 31 Seletor Universal ........................................................................................................... 31 Seletor de tipo ............................................................................................................... 31 Seletor de id .................................................................................................................. 32 Seletor de classe ............................................................................................................ 32 Exerccios de Fixao ..................................................................................................... 32

3.2.1 3.2.2 3.2.3 3.2.4 3.2.5 3.3

Principais Propriedades CSS .................................................................................................. 32 Propriedades de background ........................................................................................ 32 Propriedades de texto ................................................................................................... 33 Propriedades de fonte................................................................................................... 34 Propriedades de tabela ................................................................................................. 34 Propriedades de dimenso ........................................................................................... 34

3.3.1 3.3.2 3.3.3 3.3.4 3.3.5 3.4 3.5

Box Model ............................................................................................................................. 35 Posicionando Elementos ....................................................................................................... 36 Posicionamento esttico ............................................................................................... 36 Posicionamento fixo ...................................................................................................... 36 Posicionamento relativo ............................................................................................... 37 Posicionamento absoluto .............................................................................................. 37

3.5.1 3.5.2 3.5.3 3.5.4 3.6 3.7 4

Cores em CSS ......................................................................................................................... 37 Unidades de Medida ............................................................................................................. 37

Exerccios Finais ............................................................................................................................. 39 4.1 4.2 Lista 1 .................................................................................................................................... 39 Lista 2 .................................................................................................................................... 40

Referncias .................................................................................................................................... 49

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.

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

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

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 5 6 7 8 9 10 11 12 13 <p>J este pargrafo demonstra a quebra de linha forada .<br/>Percebeu ?</p> </body> </html> Cdigo HTML 2.5: Exemplo de quebra de linha em um pargrafo <html> <head> <meta http-equiv=" Content-Type" content =" text / html ; charset =UTF-8"> <title >Exemplo de quebra de linha em um pargrafo </ title > </head> <body> <p>Um texto bem longo . Longo mesmo ! Este pargrafo serve para demonstrar o comportamento da quebra de linha automtica , ou seja , sem utilizar nenhum recurso para que a quebra ocorra .</p>

Figura 2.2: Exemplo de quebra de linha em um pargrafo

2.3.1 Exerccios de Fixao


1. Crie um novo documento HTML, insira o cdigo a seguir e salve-o com o nome p-quebradelinha.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).

1 2 3 4 5 6 7 8 9 10 11 12 13

<html> <head> <meta http-equiv ="Content-Type" content=" text/html ; charset =UTF-8"> <title>Exemplo de quebra de linha em um pargrafo </ title > </head> <body> <p>Um texto bem longo. Longo mesmo! Este pargrafo serve para demonstrar o comportamento da quebra de linha automtica, ou seja , sem utilizar nenhum recurso para que a quebra ocorra.</p>

<p>J este pargrafo demonstra a quebra de linha forada .<br/>Percebeu ?</p> </body> </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 2 3 4 5 6 7 8 9 10 11 12 13 14 <html> <head> <meta http-equiv =" Content-Type" content=" text/html ; charset=UTF-8"> <title>Exemplo de cabealhos </ title> </head> <body> <h1>Ttulo 1</h1 > <h2>Ttulo 2</h2 > <h3>Ttulo 3</h3 > <h4>Ttulo 4</h4 > <h5>Ttulo 5</h5 > <h6>Ttulo 6</h6 > </body> </html> Cdigo HTML 2.7: Exemplo de cabealhos

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

2.4.1 Exerccios de Fixao


1. Crie um novo documento HTML, insira o cdigo abaixo e salve-o com o nome cabecalhos1.html na pasta html. Em seguida abra o arquivo em um navegador.
1 2 3 4 5 6 7 8 9 10 11 12 13 <p>Atualmente , praticamente todos os sistemas corporativos possuem interfaces web . Para quem deseja atuar no mercado de desenvolvimento de software , obrigatrio o conhecimento das linguagens : HTML , CSS e JavaScript .</p> <html > <head > <meta http-equiv="Content-Type "content=" text/html ; charset=UTF-8"> <title >Curso de Programao Web</ title > </ head > <body > <h1 >Programao Web Disciplina de Autoria Web </h1 >

14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

<p>Essas linguagens so utilizadas para o desenvolvimento da camada de apresentao das aplicaes web .</p>

<h2 >Pr - requisitos </h2 >

<p> Familiaridade com algum sistema operacional ( Windows / Linux / Mac OS X)</p> <p>Conhecimentos bsicos de Editor de Texto e Planilha Eletrnica </p>

<h2 >Agenda </h2 >

<h3 >s teras </h3 >

<p>xx/xx/ xxxx das 18:00 s 20:00 </p> <p>xx/xx/ xxxx das 20:10 s 22:00 </p>

<h3 >Aos sbados </h3 >

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

10

10 11

</ body > </ 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 2 3 4 5 6 7 8 9 10 11 <html > <head > <meta http-equiv ="Content-Type" content=" text / html ; charset =UTF-8"> <title >Exemplo de uso da tag a com o atributo target </ title > </head > <body > <p><a href =" pagina1 . html " target =" _blank ">Abre em outra janela / aba </a></p> <p><a href =" pagina2 . html " target =" _self ">Abre na mesma janela </a></p> <p><a href =" pagina3 . html ">Abre na mesma janela </a></p> </ body > </html > Cdigo HTML 2.10: Exemplo de uso da tag a com o atributo target

2.5.1 Exerccios de Fixao


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

11

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

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.

2.6.1 Exerccios de Fixao


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.

12

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 5 6 7 <html> <head> <meta http-equiv =" Content-Type" content=" text/html ; charset =UTF-8"> <title>Exemplo de uso da tag img </title> </head> <body> <h1>Pronatec </h1>

8 <img src ="<img src="http://www.revista.espiritolivre.org/wp-content/uploads/2013/05/23-052013_logo_pronatec.jpg" /> 9 10 11 <h2>Curso </h2> <p>

12 <img src="http://www.scriptcase.com.br/blog/wp-content/uploads/2013/06/programacao-web-1.jpg" width="161" height="136"/> 13 14 15 16 </ body > </ html > Cdigo HTML 2.13: Exemplo de uso da tag img Programao Web

Figura 2.4: Exemplo de uso da tag img

13

2.7.1 Exerccios de Fixao


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

14

28 29 30 31 32 33 34 35

<td >2012 </td > </tr > <tr > <td colspan ="3">ltima atualizao: 08/2013 </td > </tr > </ table > </ body > </ 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.

2.8.1 Exerccios de Fixao


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

15

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 5 6 7 8 9 10 11 12 13 14 <dl > <dt >Programao Web </dt > <dd> A programao web necessria para o desenvolvimento de sites dinmicos e sistemas com interface web... <html> <head> <meta http-equiv =" Content-Type" content=" text/html ; charset=UTF-8"> <title>Exemplo de uso da tag dl </title> </head> <body> <h1 >PRONATEC </h1 > <h2 >Cursos </h2 >

16

15 16 17 18 19 20 21 22 23 24 25 26 27 28 </dl> </body> </html>

</dd> <dt >Desenvolvimento Web com HTML , CSS e JavaScript </dt > <dd> Atualmente , praticamente todos os sistemas corporativos possuem interfaces web . Para quem deseja atuar no mercado de desenvolvimento ... </dd> <dt >SQL e Modelo Relacional </dt > <dd> Como as aplicaes corporativas necessitam armazenar dados fundamental que os desenvolvedores possuam conhecimentos sobre persistncia de dados . </dd>

Cdigo HTML 2.15: Exemplo de uso da tag dl

Figura 2.7: Exemplo de uso da tag dl

2.9.2 Exerccios de Fixao


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 <html > <head> <meta http-equiv="Content-Type" content=" text/html ; charset=UTF-8"> <title>Exemplo de uso da tag ol </title >

17

5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

</head> <body > <h1 >RECEITAS PRONATEC</h1 > <h2 >Macarro instantneo </h2 > <h3 >Modo de preparo </h3 >

<ol > <li >Ferver 600 ml de gua em uma panela .</li > <li >Retirar o macarro do pacote .</li > <li >Colocar o macarro na panela no fogo baixo .</li > <li >Cozinhar o macarro por 3 min .</li > <li >Temperar a gosto .</li > </ol > </ body > </ html > Cdigo HTML 2.16: Exemplo de uso da tag ol

Figura 2.8: Exemplo de uso da tag ol

2.9.4 Exerccios de Fixao


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 <html > <head > <meta http-equiv ="Content-Type" content=" text/html ; charset=UTF-8"> <title >Exemplo de uso da tag dl </title >

18

5 6 7 8 9 10 11 12 13 14 15 16

</head > <body > <h1 >PRONATEC </h1 > <h2 >Programao Web </h2 > <h3 >Pr-requisitos </h3 >

<ul > <li >Conhecimento de algum sistema operacional ( Windows / Linux / MacOS X)</li > <li >Pacote de Aplicativos Office </li > </ul > </body > </html >

Cdigo HTML 2.17: Exemplo de uso da tag ul

Figura 2.9: Exemplo de uso da tag ul

2.9.6 Exerccios de Fixao


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

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

20

26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 </p> </form > </body > </html > </p> <p> </p> <p> </p> <p> </p> <p> </p> <p>

<input type ="radio " name =checkgroup " />

button : <input type ="button " value =" Boto " />

submit : <input type ="submit " value ="Enviar " />

file : <input type ="file" />

reset : <input type =" reset " value ="Descartar alteraes " />

hidden : <input type ="hidden" value="valor escondido" />

Cdigo HTML 2.18: Exemplo de uso da tag input

Figura 2.10: Exemplo de uso da tag input

21

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 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 </p> </form > </body > </html > Cdigo HTML 2.19: Exemplo de uso da tag select <p> Selecione uma ou mais categorias de produtos ( mantenha a tecla " control " (ou " command " no Mac ) pressionada para escolher mais de uma categoria ): <select multiple ="multiple "> <option value ="desktops ">Desktops </option > <option value ="notebooks ">Notebooks </option > <option value ="tablets ">Tablets </option > <option value ="celulares ">Celulares </option > </select > </p> <html > <head > <meta http-equiv ="Content-Type "content="text / html ; charset=UTF-8"> <title>Exemplo de uso da tag select </title > </ head > <body > <form action ="pagina.html" method ="get"> <p> Selecione uma cidade : <select > <option value ="sao-paulo ">So Paulo </ option > <option value ="rio-de-janeiro">Rio de Janeiro </ option > <option value ="porto-alegre ">Porto Alegre </ option > <option value ="curitiba">Curitiba </ option > </ select >

22

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 5 6 7 8 9 10 11 12 13 14 15 </p> </form > </body > </html > Cdigo HTML 2.20: Exemplo de uso da tag textarea <html > <head > <meta http-equiv="Content-Type" content=" text/html ; charset=UTF-8"> <title >Exemplo de uso da tag textarea </ title > </head > <body > <form action ="pagina.html "method="get "> <p> textarea : <textarea > </textarea >

Figura 2.12: Exemplo de uso da tag textarea

23

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 5 6 7 8 9 10 11 12 13 14 </p> </form > </body > </html > Cdigo HTML 2.21: Exemplo de uso da tag label <html> <head> <meta http-equiv ="Content-Type " content=" text/html ; charset=UTF-8"> <title >Exemplo de uso da tag label </title > </head > <body > <form action ="pagina.html" method="get "> <p> <label for ="nome">Nome :</ label > <input type ="text" id="nome" />

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.

24

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 5 6 7 8 9 10 11 12 13 14 15 16 17 <html> <head> <meta http-equiv ="Content-Type " content=" text/html ; charset=UTF-8"> <title >Exemplo de uso da tag label </title > </head > <body > <div> <h1>Nome do Meu Site</h1> <h2>Slogan do meu site</h2> </div> <div> Home | Clientes | Contato </div> <div> <h3>Bem Vindos</h3> <span><p>Este um exemplo da utilizao de <b>divs</b> e <b>span</b>.</p></span>

25

18 19 20

</div> </body > </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 2 3 4 5 6 7 8 9 10 11 <div id=geral> Aqui uma div geral, onde vai est todo o site. <div id=topo> Todo o topo do site. <div id=marca> Apenas a logo marca </div> <div id=menu> Todo o menu do site. </div> </div> </div> Cdigo HTML 2.23: Exemplo de uso de tableless com a tag div

26

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

27

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 5 6 7 8 9 10 <html> <head> <meta http-equiv="Content-Type" content="text/html ; charset=UTF-8"> <title>Exemplo de CSS diretamente em um elemento </title> </head> <body> <p style ="font-size : 40px; color: #ff0000 ">Ol mundo !</p> <p>Ol mundo novamente !</p> </body> </html> Cdigo HTML 3.1: Exemplo de aplicao das propriedades CSS inline

28

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 5 6 7 8 9 10 11 12 13 14 15 16 } </ style > </ head > <body > <p>Ol mundo !</p> <p>Ol mundo novamente !</p> </ body > </ html > <html > <head > <meta http - equiv =" Content - Type " content =" text / html ; charset =UTF-8"> <title >Exemplo de aplicao das regras CSS atravs da tag style </ title > <style type =" text / css "> p{ font - size : 40 px; color : # ff0000 ;

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

29

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 4 5 6 7 8 9 10 11 <html > <head > meta http - equiv =" Content - Type " content =" text / html ; charset =UTF -8"> <title >Exemplo de aplicao das regras CSS atravs de um arquivo </ title > <link rel =" stylesheet " type =" text / css" href =" estilo.css " /> </ head > <body > <p>Ol mundo !</p> <p>Ol mundo novamente !</p> </ body > </ html > Cdigo HTML 3.3: Exemplo de aplicao das regras CSS atravs de umarquivo 1 2 3 4 } Cdigo CSS 3.1: estilo.css p{ font - size : 40 px; color : # ff0000 ;

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.

30

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 3 } Cdigo CSS 3.2: Usando o seletor universal *{ margin : 0px;

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

1 2 3

textarea { border : 1px solid red ; } 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 2 3 } Cdigo CSS 3.4: Usando o seletor de id # cidade { font - weight : bold ;

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 2 3 } Cdigo CSS 3.5: Usando o seletor de classe .titulos { font - size : 40 px;

3.2.5 Exerccios de Fixao


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.

32

1 2 3

body { background - attachment : fixed ; background - color : # dddddd ;

4 background - image : url ( ="<img src="http://www.revista.espiritolivre.org/wp-content/uploads/2013/05/23-052013_logo_pronatec.jpg"); 5 6 7 8 9 div { } background - position : left top ; background - repeat : repeat ;

10 background : # dddddd url ( ="<img src="http://www.revista.espiritolivre.org/wp-content/uploads/2013/05/23-052013_logo_pronatec.jpg") 11 12 } Cdigo CSS 3.6: Propriedades de background no - repeat center center fixed ;

3.3.2 Propriedades de texto



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

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.

33

3.3.3 Propriedades de fonte



1 2 3 4 5 6 7 8 9 10 11 } Cdigo CSS 3.8: Propriedades de fonte a{ font : italic small - caps bold 14 px /20 px sans -serif , serif , monospace ; } p{ font - family : sans -serif , serif , monospace ; font - size : 14 px; font - style : italic ; font - variant : small - caps ; font - weight : bold ;

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.

3.3.4 Propriedades de tabela


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

1 2 3 4 5 6

table { border - collapse : collapse ; } table ,th , td { border : 1px solid blue ; } Cdigo CSS 3.9: Propriedades de tabela

3.3.5 Propriedades de dimenso



1 2 3 div { width : 300 px; height : 300 px;

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.

34

4 5 6 7 8 9 10 11

h1 { min - width : 10 px; max - width : 300 px; min - height : 10 px; max - height : 300 px; } 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 2 3 4 5 6 } Cdigo CSS 3.11: Exemplo de uso incorreto das dimenses de umelemento div { width : 300 px; padding : 10 px; margin : 10 px; border : 1px solid green ;

35

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 2 3 4 5 6 } Cdigo CSS 3.12: Exemplo de uso correto das dimenses de um elemento div { width : 258 px; padding : 10 px; margin : 10 px; border : 1px solid green ;

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.

36

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.

37

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.

38

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) b) c) d) e) f) Que todo H1 tenha fonte Tahoma, ou sans-serif, se Tahoma no existir Que todo o texto do corpo (BODY) do arquivo tenha tamanho 10 pontos Que todos os H1, H2 e H3 sejam vermelhos Que os H1 tenham tamanho 24 pontos Que os H2 tenham tamanho 18 pontos 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).

39

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"> ? 40

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 41

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) <i> <u> <table> <ul> <h1>

13. Podemos classificar como estilo de fontes 5 tipos. Faa a associao entre sua classificao e suas caractersticas: a) b) c) d) e) Serif Sans-serif (sem serifa) Monoespaada Cursiva Fantasy (smbolos)
( ) 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.

14. Esto corretamente aninhadas os seguintes grupos de tags: a) b) c) d) e) <HTML><HEAD><TITLE>Meu titulo</TITLE></HEAD></BODY>...</BODY></HTML> <i><u>palavra</i></u><br> <p><font color=red>texto qualquer</font></p> <br><b>palavra</b></br> <marquee><u>texto qualquer</u></marquee>

15. Uma tabela que possua 5 linhas e 6 colunas possuir quantos pares de tags <td>...</td>? a) b) c) d) e) 25 30 35 5 11

42

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> a) b) c) d) e) 6 7 3 5 8

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

18. So atributos da tag <marquee>: a) b) c) d) e) direction behavior color background scrollamount

43

19. Qual tag responsvel por aplicar um ttulo ou legenda exclusivamente a uma tabela? a) b) c) d) e) <th> <tr> <td> <table> <caption>

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

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

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

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

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

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) <ol type=disc begin=5> <ul type=a start=V> <ol type=I start=V> <ol type=I start=5> <ol type=V>

27. Uma lista no ordenada (unordered list) que tenha pequenos quadrados como marcadores seria: a) b) c) d) e) <ol type=quadrado> <ul type=square> <ol type=disc> <ul type=circle> <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) b) c) d) e) ACTION METHOD FORM VALUE ADDRESS

30. So tags de elementos de um formulrio (pode haver mais de um) a) b) c) d) e) <INPUT> <TEXTAREA> <SELECT> <TEXTBOX> <RADIOBUTTON> 45

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

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

34. Qual dos elementos abaixo considerado um exemplo de link externo? a) b) c) d) e) <a name=inicio></a>Clique aqui <a href=pag2.html>Clique aqui</a> <a href=http://www.ifce.edu.br>Clique aqui</a> <a href=#inicio>Clique aqui</a> <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) b) c) d) e) <ol type=disc begin=5> <ul type=a start=V> <ol type=I start=V> <ol type=I start=5> <ol type=V>

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

b) c) d) e)

<ul type=square> <ol type=disc> <ul type=circle> <ul type=disc>

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

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

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

40. Um link da pgina pag1.html para o final da pgina pag2.html seria mais ou menos da seguinte maneira a) b) c) d) e) <a href=pag2.html>Clique aqui para ir pgina 2</a> <a href=pag2.html#final>Clique aqui para ir pgina 2</a> <a href=pag1.html#final>Clique aqui para ir pgina 2</a> <a href=pag1.html>Clique aqui para ir pgina 2</a> <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>&nbsp;</td> <td>&nbsp;</td> a) b) c) d) e) 15 14 13 12 11

47

<td>&nbsp;</td> <td colspan="2">&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td colspan="2">&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </table>

48

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.

49