Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
Sumrio
1 2 Introduo ....................................................................................................................................... 4 HTML ............................................................................................................................................... 5 2.1 Estrutura Bsica....................................................................................................................... 5 Exerccios de Fixao ....................................................................................................... 6 2.1.1 2.2 2.3
2.3.1 2.4
2.4.1 2.5
2.5.1 2.6
2.6.1 2.7
2.7.1 2.8
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
Formulrios ........................................................................................................................... 19 A tag input ..................................................................................................................... 19 A tag Select .................................................................................................................... 22 A tag textarea ................................................................................................................ 23 A tag label ...................................................................................................................... 24 A tag form...................................................................................................................... 25
2.13 3
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
Principais Propriedades CSS .................................................................................................. 32 Propriedades de background ........................................................................................ 32 Propriedades de texto ................................................................................................... 33 Propriedades de fonte................................................................................................... 34 Propriedades de tabela ................................................................................................. 34 Propriedades de dimenso ........................................................................................... 34
Box Model ............................................................................................................................. 35 Posicionando Elementos ....................................................................................................... 36 Posicionamento esttico ............................................................................................... 36 Posicionamento fixo ...................................................................................................... 36 Posicionamento relativo ............................................................................................... 37 Posicionamento absoluto .............................................................................................. 37
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.
9 </ html > Cdigo HTML 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!".
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>
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
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
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>
<p> Familiaridade com algum sistema operacional ( Windows / Linux / Mac OS X)</p> <p>Conhecimentos bsicos de Editor de Texto e Planilha Eletrnica </p>
<p>xx/xx/ xxxx das 18:00 s 20:00 </p> <p>xx/xx/ xxxx das 20:10 s 22:00 </p>
<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
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.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>
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.
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>
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
13
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
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.
15
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.
16
</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>
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
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 >
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.
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>
button : <input type ="button " value =" Boto " />
reset : <input type =" reset " value ="Descartar alteraes " />
21
22
23
Repare que o atributo for da tag label deve conter um valor igual ao do atributo id do elemento que desejamos focar.
24
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
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
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 ;
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
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.
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 ;
32
1 2 3
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 ;
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
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 2 3 4 5 6
table { border - collapse : collapse ; } table ,th , td { border : 1px solid blue ; } Cdigo CSS 3.9: Propriedades de tabela
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
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 ;
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.
36
Todos os elementos posicionados fixamente no mudam de posio mesmo quando ocorrer uma rolagem vertical ou horizontal.
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>
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)
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> </td> <td> </td> a) b) c) d) e) 15 14 13 12 11
47
<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>
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.
49