MATERIAL IMPRESSO Desenvolvimento de Home Pages

Desenvolvimento de home pages
Prof. Igor Thiago Marques Mendona
Florianpolis 2010
Organizao de contedo:
Andrino Fernandes Elaine Luz Barth
Comisso Editorial:
Hamilcar Boing Andrino Fernandes Elaine Luz Barth
Produo e design instrucional:

Andrino Fernandes Elaine Luz Barth
Projeto grfico:
Paulo Ricardo Rodrigues de Lima
Capa:
Lucio Baggio
Reviso ortogrfica:
Marcos Pessoa
Editorao Eletrnica:
Paulo Ricardo Rodrigues de Lima
Sumrio
Captulo 1 - A preparao
1. Ciclo bsico de um projeto de desenvolvimento de programas .........................................11 1.1 O desenvolvimento do Projeto de uma pgina para a Internet ....................................11 1.2 Estrutura e organizao de pastas, edio de pginas e o Navegador para Internet. ...12 1.3 O Padro De Desenvolvimento Web: Modelo Em Camadas ........................................15 1.4Vamos criar os primeiros exemplos? .............................................................................18 Atividades .............................................................................................................................21
Captulo 2 - A Linguagem HTML

2.1 A Linguagem HTML........................................................................................................25 2.1.2 Formato do cdigo (X) HTML ................................................................................26 2.1.3 Acentuao e Caracteres Especiais .........................................................................28 2.1.4 Ttulos, Sub-Ttulos e Pargrafos .............................................................................30 2.1.5 Formatao de textos ..............................................................................................32 2.1.6 Listas ......................................................................................................................34 2.1.7 Tabelas ...................................................................................................................36 2.1.8 Formulrios ............................................................................................................39 2.1.9 Marcadores de entrada ...........................................................................................41 2.1.10 Hiperlinks e ncoras .............................................................................................43 Atividades .............................................................................................................................44
Captulo 3 - Folha de Estilo em Cascata (CSS - Cascading Style Sheets)

3.1 Cascading Style Sheet (CSS) ...........................................................................................47 3.2 Regras bsicas .................................................................................................................49 3.3 Fontes .............................................................................................................................51 3.4 Atributos de texto ............................................................................................................54 3.5 Margens ..........................................................................................................................56 3.6 Bordas.............................................................................................................................58 3.7 Espaamento...................................................................................................................60 3.8 Fundos ...........................................................................................................................62 3.9 Listas ...............................................................................................................................64 3.10 Unidades de medida CSS..............................................................................................66 3.11 Cores.............................................................................................................................68 Atividades .............................................................................................................................69
Captulo 4 - Projeto de homepage

4.1 Criao de um projeto de homepage ..............................................................................73 4.1.1 Primeiro passo: O Projeto .......................................................................................73 4.1.2 Segundo passo: A execuo....................................................................................74 Atividades .............................................................................................................................90
Referncias bibliogrficas ...................................................................................................91
Apresentao
Prezado aluno (a), Este material foi preparado para auxili-lo no decorrer dos estudos da unidade curricular denominada Desenvolvimento de Home Page. Ao mesmo tempo em que os conceitos da linguagem de marcao de hipertexto HTML sero apresentados, paralelamente ser proposto exerccio prtico visando a construo de exemplos. Logo na primeira unidade voc ser estimulado a colaborar na preparao de um ambiente de desenvolvimento de pginas para a Internet. O desenvolvimento de uma pgina para a internet deve ser encarado como um projeto, por isso ainda na primeira unidade, veremos o ciclo bsico de um projeto e a seguir um exemplo de como organizar os arquivos pertinentes a um projeto. Quando estudarmos a preparao do ambiente voc conhecer um editor de pginas para internet de distribuio gratuita, e os principais navegadores de Internet. Na seqncia, voc identificar um modelo denominado modelo em camadas de desenvolvimento de pginas para a Internet. A partir da Unidade 2 estudaremos a estrutura e o formato do cdigo HTML e na continuao seus principais marcadores, tais como, como realizada a acentuao, a construo de listas, tabelas e outros elementos do HTML. A seguir, ser introduzida a formatao do HTML utilizando Cascading Style Sheets (CSS) e por fim, as etapas de desenvolvimento de um projeto cujo objetivo a construo de uma pgina de classificados de automveis. Os trechos de cdigos sero exibidos neste livro no seguinte formato: <p>Trecho de código HTML</p> <hr /> Tenho certeza que juntos poderemos construir uma base slida de conhecimento e ao final da unidade curricular voc ser um craque no desenvolvimento de pginas para a Internet. Estarei sempre disposio para dirimir as dvidas. Bons estudos! Um abrao, Prof. Igor Thiago.
CAPTULO
1
A Preparao
Objetivo
Nesta primeira unidade estudaremos os conceitos bsicos de desenvolvimento de projetos, conheceremos uma ferramenta de edio de pginas para a Internet e os principais navegadores, e por fim, veremos o atual modelo de desenvolvimento de pginas para a Internet.
A Preparao
Esta primeira unidade deve ser encarada como uma preparao. Nela estudaremos os conceitos bsicos de desenvolvimento de projetos, iremos conhecer uma ferramenta de edio de pginas para a Internet e os principais navegadores, e por fim, veremos o atual modelo de desenvolvimento de pginas para a Internet.
1. Ciclo bsico de um projeto de desenvolvimento de programas

Antes de abordarmos o desenvolvimento de pginas para a Internet necessrio uma preparao inicial. Vamos primeiro conhecer o ciclo bsico de desenvolvimento de projetos, depois iremos preparar o ambiente destacando os programas necessrios para o desenvolvimento. So eles: um editor de pgina HTML e um navegador de Internet. No importa qual seja o sistema operacional da sua mquina, pode ser um Microsoft Windows ou um Linux porque as pginas HTML so simplesmente arquivos do tipo texto. Apesar disso, surgiram programas especializados para ajudar os desenvolvedores com seus cdigos. Veremos nesta unidade um deles que distribudo gratuitamente e funciona no Microsoft Windows, mas saiba que voc est livre para utilizar o programa de sua preferncia.
1.1 O desenvolvimento do Projeto de uma pgina para a Internet

Um projeto de pgina para a Internet, assim como o desenvolvimento de software, deve seguir um ciclo de vida bem definido. No faz parte dos objetivos desta unidade estudar as metodologias de desenvolvimento de software, mas sim, de apresentar algumas definies bsicas que voc precisa conhecer para vivenciar exigncias do mercado de trabalho. No quadro abaixo voc conhecer as fases de elaborao de um projeto de desenvolvimento de pgina para a Internet:
11
Desenvolvimento de Home pages

FASE Planejamento ATIVIDADES Nesta etapa deve ser definido o real objetivo do projeto e quem so as pessoas envolvidas, deve ser obtido o maior nmero possvel de informaes a serem utilizadas no desenvolvimento. De posse das informaes coletadas na fase anterior, nesta feita a codificao do projeto. Tambm nesta fase verificado se o projeto est de acordo com o que foi solicitado e so realizados os testes. Nesta fase, o projeto publicado e estar disponvel para os usurios acessarem. So realizados os ltimos testes. Nesta fase opcional, so feitas modificaes no projeto a fim de atualizar informaes ou readequar o contedo ou a apresentao deste.
Execuo
Implantao
Manuteno
1.2 Estrutura e organizao de pastas, edio de pginas e o Navegador para Internet.

Quando um projeto de desenvolvimento de pgina para a Internet est finalizado ele contm um conjunto de arquivos interligados que remetem o usurio a um conjunto de informaes sobre determinado assunto. Nesse conjunto de arquivos voc encontra: cdigos HTML, imagens, apresentaes Adobe Flash entre outros. Quando estes arquivos vo sendo criados no decorrer do desenvolvimento da pgina, eles devem seguir um senso de organizao. Veja a seguir, um exemplo de estrutura que permite essa organizao.
Organizao de pastas para um projeto

indicado que o seu conjunto de arquivos (de um projeto) esteja sob a mesma pasta, e que preferencialmente estejam separados em subpastas. A figura 1 exibe um exemplo de estrutura de pastas para projetos de pginas para a Internet. O mesmo ser utilizado no decorrer dessa Unidade Curricular.
12
A Preparao
Figura 1: Estrutura bsica para projetos
Seguindo o raciocnio da figura 1, em um local do seu computador voc deve criar uma pasta com o nome Projeto 1. Dentro dela, crie outras duas pastas, uma com nome estilos e outra com nome imagens. Na pasta Projeto 1 sero criados arquivos de cdigos HTML. A subpasta imagens ser utilizada para figuras referentes ao layout e composio das pginas HTML. A subpasta estilos armazenar os arquivos que iro definir como ser apresentado o contedo. Outras pastas podem e devem ser criadas sempre em conformidade da necessidade de cada projeto. Agora que j sabe como criar (e j deve ter criado) a estrutura de pastas para um projeto, veremos um programa de edio de pginas para a Internet e suas principais funcionalidades.
Editor de pginas HTML - Notepad++

O programa Notepad++ um editor de cdigo livre ( um substituto do Notepad), que suporta vrias linguagens de programao, rodando sobre o ambiente Microsoft Windows [NOTEPAD++09]. Alm de ser de cdigo livre, o programa e o seu site tm verses completas em Portugus. Algumas das principais funcionalidades :[NOTEPAD++09] : Destaque de Sintaxes - Utilizando um sistema de cores exibe o cdigo de maneira clara e agradvel. Autocompletar - Para quase todas as linguagens suportadas, o usurio pode criar sua prpria lista de api (ou baixar os arquivos na sesso download). Uma vez que o arquivo api estiver pronto, digite Ctrl+Espao para executar esta ao. Mais informaes sobre o autocompletar, na sesso Autocompletar.
13

Mltiplos Documentos - Voc pode editar vrios documentos ao mesmo tempo. Suporta o Arrastar e Soltar - Voc pode abrir um documento arrastando e soltando. Voc pode tambm mover seu documento (ou visualizao) de uma posio a outra usando o Arrastar e Soltar. Autodeteco de Estado do Arquivo - se voc modificar ou apagar um arquivo que esteja aberto no Notepad++, voc receber uma notificao para atualizar seu documento (recarregar o arquivo ou apagar o arquivo). Grava e Reproduz Macros- voc pode salvar vrias macros e criar atalhos de tecla para o prximo uso. Muito til para eventos de muita repetio.
Pesquise na Internet os programas existentes para criao de pginas HTML. O mais conhecido e utilizado o Dreamweaver para Windows que realmente o melhor, mas para utiliz-lo necessrio a compra de uma licena. No Linux Ubuntu o prprio gedit possui recursos extras que podem ser instalados tornando-o uma tima ferramenta de edio de HTML.
Para obter a lista completa dos recursos e fazer o download gratuitamente do programa, acesse o endereo: http://notepad-plus.sourceforge.net/ Aps a instalao, o programa Notepad++ ter a interface parecida com a figura 2.
Figura 2: Interface do programa Notepad++[NOTEPAD++09]
Navegadores de Internet
Os desenvolvedores de pginas para a Internet devem preocupar-se com apresentao de suas pginas aos usurios. Apesar do HTML possibilitar que apenas um arquivo sirva para os diferentes navegadores, na prtica um tanto diferente. Uma mesma pgina HTML mostra-se, por muitas vezes, diferente em navegadores distintos. Por isso, importante que o desenvolvedor faa testes de visualizao nas
14
A Preparao
pginas desenvolvidas, utilizando os principais navegadores do mercado antes de public-las na Internet. Como mostra a figura 3, o Internet Explorer e o Firefox (juntos) so responsveis por quase 90% dos acessos Internet, por isso o desenvolvedor de pginas dever testar seus documentos pelo menos nesses dois navegadores. O navegador Internet Explorer vem instalado juntamente com o sistema operacional Microsoft Windows e o Mozilla Firefox pode ser obtido no link http://www.getfirefox.com.br
Figura 3: Navegadores mais utilizados [NETAPP09]
1.3 O Padro De Desenvolvimento Web: Modelo Em Camadas

Desenvolver sites e aplicaes para internet usando padres significa, basicamente, usar cada tecnologia para o propsito nico para o qual ela foi desenvolvida. Com isso, acabamos por organizar nosso cdigo em camadas. So elas: a) contedo, b) apresentao e c) comportamento. Vamos ver, separadamente, o que significa, para que serve e como desenvolver as duas primeiras camadas [TORRES06]. Posteriormente, a camada de comportamento ser abordada em outra Unidade Curricular.
Figura 4: Camadas do padro de desenvolvimento web
15

Na figura 4 est representado numa seqncia, o padro de desenvolvimento web que divide em camadas a construo de pginas para a Internet. Os navegadores de Internet exibem as pginas para os usurios, mas no a maneira como elas compem essas informaes.
a) Camada de Contedo
A camada de contedo , sem sombra de dvida, a mais importante de todas. onde colocamos a parte mais preciosa do nosso site, aquilo que realmente faz a diferena o contedo. Para desenvolver essa camada usamos as chamadas linguagens de marcao de hipertexto, no nosso caso HTML ou XHTML. O desenvolvimento deve sempre comear por esta camada. Antes de se preocupar com a parte visual ou comportamental de um site ou aplicao, deve-se estruturar com o maior cuidado e critrio possveis o contedo desejado. importante lembrar que no momento que voc for comear a realmente pr a mo na massa e escrever o cdigo (mesmo que j tenha um layout definido) tente no pensar na parte visual. Se atenha ao contedo. Como esse contedo dividido? Que partes compem esse contedo? Qual a funo de cada parte do contedo dentro do site? Tendo isso em mente, ordene essas partes por ordem de importncia e relevncia para os usurios. Certifique-se de que tudo que for realmente importante seja colocado antes no cdigo. Preocupe-se com a semntica. Use os elementos certos para marcar o contedo. O HTML oferece uma boa quantidade de elementos para estruturao do contedo. Por exemplo, os dois cdigos abaixo produzem nos navegadores de Internet, a exibio dos textos de maneira idntica, mas somente o segundo est semanticamente correto. Cdigo 1: HTML semanticamente incorreto: Texto para o parágrafo 1. <br /><br /> Parágrafo dois.
Neste contexto o usurio a pessoa que ir acessar o site.
16
A Preparao
Cdigo 2: HTML semanticamente correto: <p>Texto para o parágrafo 1. </p> <p>Parágrafo dois. </p> Observe que no cdigo 1 o marcador <br /> utilizado duplicado para produzir o efeito de um pargrafo, mas na verdade, esse marcador deve ser utilizado somente no caso da necessidade de uma quebra de linha. Todo o restante do processo de desenvolvimento de uma pgina vai depender de como o contedo est estruturado. Se as coisas no estiverem bem estruturadas nessa primeira camada, certamente problemas aparecero no futuro.
b) Camada de Apresentao
A tecnologia utilizada para esta camada ser o Cascading Style Sheets (CSS) que definir as propriedades visuais para cada elemento do contedo. Esta camada ir aplicar o layout criado visando tornar o contedo das pginas mais atraente. importante observar alguns cuidados nesta etapa, tais como: Lembre que o mais importante nesta camada procurar manter as coisas simples. Propriedades que possam causar problemas em diferentes navegadores devem ser evitadas. Em geral possvel criar qualquer tipo de layout usando apenas aquilo que largamente suportado. Resista tentao de mexer na camada de contedo para satisfazer uma necessidade especificamente de apresentao. No decorrer do livro sero apresentados exemplos corretos e incorretos desta situao. A indicao de realizar testes em diversos navegadores reforada nessa etapa, pois na apresentao do contedo que so estabelecidas as diferenas entre eles. Apesar do Internet Explorer ser um dos navegadores mais usados na Internet, ele tem um suporte precrio para os padres. Uma dica utilizar como base um navegador que tenha um melhor suporte, como o Mozilla Firefox, mas, lembre de testar tambm no Internet Explorer.
17

Cdigo 3: Exemplo de cdigo da camada de apresentao
p { color:blue; font-style:italic; text-decoration:underline; } Neste caso, o cdigo 3 define que todos o pargrafos da pgina sero exibidos na cor azul, com o estilo itlico e sublinhado. Abaixo, a figura 5 exibe o resultado do cdigo 3, da camada de apresentao, aplicado sobre o cdigo 2, da camada de contedo.
Figura 5: Aplicao da camada de apresentao
1.4Vamos criar os primeiros exemplos?

Lembre-se que conforme indicado na Preparao do Ambiente, uma estrutura de pastas dever ser criada para salvar cada projeto. Cada exemplo poder ser um projeto. Assim como ocorre na fase de Execuo, os arquivos dos exemplos abaixo ficaro somente na mquina do desenvolvedor. Para facilitar o entendimento, os primeiros exemplos sero oferecidos atravs de uma seqncia passo-a-passo. No decorrer da construo do seu material utilize sempre o mesmo procedimento.
Exemplo 1
Passo 1: Abra o programa de edio de pginas HTML, Notepad++, e crie um arquivo do tipo HTML para colocar o contedo do 4.
18
A Preparao
Cdigo 4: Exemplo 1, cdigo HTML.
<html> <head> <title>Título do Documento</title> </head> <body> <h1>Título de nível 1</h1> <p>Primeiro parágrafo</p> <p>Segundo parágrafo</p> <h2>Título de nível 2</h2> <p>Terceiro parágrafo</p> </body> </html> Passo 2: Salve o cdigo acima com o nome exemplo1.html na pasta criada para este projeto. Passo 3: Abra o navegador de sua preferncia e no menu Arquivo escolha a opo Abrir arquivo .... Navegue at a pasta do projeto e selecione o arquivo exemplo1.html clicando na seqncia em Abrir. O resultado dever ser semelhante ao exibido na figura 6 logo abaixo.
Caso voc tenha outros navegadores instalados na mquina, repita o passo 3 para verificar as diferenas de exibio.
Figura 6: Exibio do exemplo1.html no navegador Mozilla Firefox
Exemplo 2
Siga os mesmo passos do exemplo 1, utilizando agora o cdigo 5 e o salvando com o nome exemplo2.html.
19

Cdigo 5: Exemplo 2, cdigo HTML. <html> <head> <title>Atrações turísticas</title> </head> <body> <h1>Atraes turísticas</h1> <p><strong>Santa Catarina</strong> é considerado o estado brasileiro com maior potencial turístico. A cidade de <i>Florianópolis</i>, capital do estado, possui uma infinidade de atrações turísticas. A seguir, uma lista de algumas dessas atrações.</p> <hr /> <ul> <li>Praias</li> <ul> <li>Joaquina</li> <li>Praia mole</li> <li><strong>Santinho</strong></li> </ul> </ul> <hr /> <ul> <li>Atrações históricas</li> <ul> <li>Museu de armas</li> <li>Ponte Hercílio Luz</li> </ul> </ul> </body> </html>
20
A Preparao
O resultado no navegador dever ser parecido com o exibido na figura 7.
Figura 7: Exibio do exemplo2.html no navegador Mozilla Firefox
Os exemplos 1 e 2 so compostos somente pela camada de contedo. Por isso, as pginas criadas no parecem muito atraentes. Mas, por enquanto isso no deve ser motivo de preocupao. Logo este assunto ser tratado na unidade 3 quando estudarmos a camada de apresentao. Na prxima unidade iniciaremos o entendimento do cdigo HTML.
Atividade
1. Resgatando o que foi aprendido sobre o modelo de desenvolvimento em camadas, para voc qual a camada principal? Por qu? 2. Vamos ao frum conversar sobre os programas de desenvolvimento de pginas para a Internet. Cada um traga a sua experincia e vamos todos compartilhar o conhecimento.
21
CAPTULO
2
A Linguagem HTML
Objetivo
Nesta unidade aprenderemos a linguagem HTML, que faz parte da camada de contedo. Veremos como compor um documento e seus elementos bsicos e obrigatrios. Ao final desta unidade voc ser capaz de codificar pginas e ver os primeiros resultados.
A Linguagem HTML
2.1 A Linguagem HTML

Traduzindo literalmente do ingls, HTML significa Linguagem de Marcao de Hipertexto. O que HTML? um tipo especial de documento de texto utilizado por navegadores Web para exibir textos e grficos [HTML05]. A caracterstica especial dos documentos HTML so seus marcadores, tambm chamados de TAGs, fora isso, eles nada mais so do que simples documentos de texto. O HTML, assunto principal desta unidade, foi e ainda , a base para Internet que conhecemos hoje. Ela uma evoluo de um projeto do Governo Norte Americano, denominado ARPANET, que nasceu na poca urea da Guerra Fria, mas que a partir de 1989, por contribuio do cientista Tim Berners-Lee, iria se popularizar atravs da criao de uma rede chamada WWW (World Wide Web) e o HTML (HyperText Markup Language) em 1991. A verso 2.0 do HTML, que sairia em novembro de 1995, foi desenvolvida sob a superviso da Internet Engineering Task Force (IETF) para padronizar a prtica de codificao no final do ano de 1994. Paralelamente em 1993 e 1995, verses HTML+ e HTML 3.0 foram propostas como muito mais recursos. Mesmo nunca tendo recebido total apoio, estes projetos conduziram adoo de uma srie de novas funcionalidades ao HTML. Os esforos do Grupo de Trabalho HTML da World Wide Web Consortium (W3C) para definir uma codificao comum em 1996 resultou no HTML verso 3.2 (em Janeiro de 1997) [HTML99]. O objetivo principal dos documentos HTML possibilitar que funcionem entre diferentes navegadores e plataformas permitindo assim, que os provedores de contedo disponibilizem somente uma verso de um documento. O HTML desenvolvido com a misso de ser democrtico. Sua visualizao deve ser possvel, igualmente em um computador com monitor de alta definio de imagens ou em telefones celulares, tanto na velocidade de banda larga quanto em conexes discadas, e tambm atravs de recursos de acessibilidade para fornecer meios de acesso a portadores de deficincias.
Navegadores web so programas utilizados para acessar pginas na Internet
25
Em sua ltima verso, nmero 4, o HTML possui mecanismos para folhas de estilo, scripting, frames, objetos embarcados, melhora no suporte para direo do texto da direita para esquerda, tabelas ricas e oferece melhorias de acessibilidade a pessoas com deficincias [HTML99]. Uma variao do HTML surgiu sob o nome de Extensible HyperText Markup Language (XHTML), e considerada uma linguagem sucessora. A partir de agora, vamos comear aprendendo elementos fundamentais para entendimento da linguagem HTML: A) O formato do cdigo, ou seja, sua sintaxe, B) Acentuao e caracteres especiais, C) Ttulos, subttulos e pargrafos, D) Formatao do texto, E) Listas, F) Tabelas e Formulrios, F) Hyperlinks e Ancoras.
a) Formato do cdigo (X) HTML

Assim como em todas as linguagens, o HTML tem um formato especfico. Como j foi mencionado trata-se de uma linguagem de marcao de textos e at a verso 4 possui dois tipos de marcadores: os que marcam o incio e o fim de algum elemento e os de marcao nica. A sua construo feita da seguinte maneira: o sinal de menor que (<) no incio e o sinal de maior que (>) no final. Um exemplo de marcador nico o <br>. Outro que tem marca de incio e fim de elemento o <p> Texto do pargrafo </p>. Note que neste ltimo exemplo, no marcador que indica o fim utilizado o caractere / exatamente para indicar que de fim. Os marcadores podem ainda possuir atributos, por exemplo: <a href=novapagina.html target=_blank>Link</a> possui o atributo href e target. Em XHTML no so permitidos marcadores nicos, sendo assim, as marcaes que j existiam aparecem da seguinte forma: HTML: <br> XHTML: <br /> HTML: <hr> XHTML: <hr />
26
A Linguagem HTML
Os atuais navegadores de Internet aceitam tanto os formatos do HTML quanto do XHTML, por isso, pode-se encontrar nas pginas desenvolvidas at mesmo uma mescla dos dois. A recomendao que se utilize somente um deles como forma de padronizao de cdigo. Outro aspecto da linguagem de no ser sensvel caixa, ou seja, tanto faz qual seja o cdigo escrito <html>, <HTML> ou <HtMl>. Evidentemente que a utilizao de um mesmo formato facilita a visualizao do cdigo. O HTML possui uma estrutura bsica para todos os cdigos, nos exemplos 4 e 5 essa estrutura foi propositalmente deixada em preto. Atravs delas so demarcadas as sees da linguagem. O primeiro e o ltimo marcador que devem aparecer numa pgina so respectivamente <html> e </html>, indicando o incio e o fim do documento. Com as marcaes <head> e </head> definida uma seo de cabealho, na qual so adicionadas informaes a respeito do documento. Por exemplo, o ttulo, a descrio e seus autores informaes comumente chamadas de meta-dados . Alm dessas, quando necessrio, so includas referncias a outros arquivos, por exemplo, referncia a uma folha de estilos. Outra seo obrigatria definida pelos marcadores <body> e </body>, neste local estar o contedo do documento.
Para que servem os marcadores de comentrios no cdigo?

Para facilitar o entendimento do cdigo, muitas vezes necessria a incluso de comentrios, por isso a linguagem HTML define as marcaes  para indicar o incio e o fim de um comentrio. Os navegadores desconsideram qualquer informao que esteja dentro deles. Como mostrado no cdigo a seguir, muitas vezes os desenvolvedores utilizam este recurso para ocultar o prprio contedo.
27

Cdigo 6: Utilizao de comentrios no cdigo HTML <html> <head> <title>Título do Documento</title> </head> <body> <h1>Título de nível 1</h1> <p>Texto para o único parágrafo
é exibido no texto, a seguir existe outro, mas por estar entre os caracteres de comentário, não é exibido pelos navegadores</p>  </body> </html>
b) Acentuao e Caracteres Especiais

Nos exemplos de HTML at agora apresentados ficou claro que a acentuao nos textos realizada por uma codificao diferente. Alm dela, outros caracteres so representados desta maneira. Por exemplo, se for necessria a utilizao do sinal menor que (<) ou ento do smbolo (). Por isso, ficou definido na linguagem um conjunto de cdigos que permitem a utilizao desses caracteres especiais. O HTML permite que caracteres especiais sejam representados por seqncias de escape indicadas por trs partes: um & inicial, um nmero ou cadeia de caracteres correspondente ao caractere desejado, e um ; (ponto e vrgula) no final. Por exemplo a sequncia de escape ç representa o caractere no HTML. Trs caracteres ASCII : <, >, e & tm significados especiais em HTML, e so usados dentro de documentos seguindo a correspondncia: Entidade < > & Caractere < > &
Tabela 1: Cdigos especiais
28
A Linguagem HTML
Outras seqncias de escape mais utilizadas em Portugus esto nas tabelas abaixo: Entidade á â à ã ç é ê í ó ô õ ú Caractere Entidade Á Â À Ã Ç É Ê Í Ó Ô Õ Ú Caractere
Tabela 2: Acentuao em HTML
Alguns editores, no entanto, mantm a acentuao, sem precisar usar os cdigos especiais de formatao. Quando isso acontece, deve-se inserir uma indicao do esquema de codificao ISO Latin1, como segue no exemplo abaixo: Cdigo 7: Acentuao sem cdigo especiais <html> <head> <meta http-equiv=Content-Type
content=text/html; charset=ISO-8859-1 />
<title>Ttulo do Documento</title> </head> <body> <h1>Ttulo de nvel 1</h1> <p>Texto para o nico pargrafo que exibido no texto.</p> </body> </html> Verifique o funcionamento criando e abrindo no navegador dois arquivos. Um com exatamente o cdigo 7 e outro removendo
29
o marcador <meta http-equiv=Content-Type content=text/ html; charset=ISO-8859-1 />. O resultado deve ser parecido com o exibido na figura 8.
Figura 8: Resultado com e sem o marcador meta indicando a codificao do texto.
c) Ttulos, Sub-Ttulos e Pargrafos

Iniciamos agora com os cdigos do HTML que fazem parte da camada de Contedo. Como dito anteriormente, so a parte mais importante de uma pgina para a Internet e mais importante ainda, a utilizao correta deles, pois cada marcador tem sua funo semntica.
Figura 9: Nveis de ttulos
Ttulos e subttulos
Os ttulos e subttulos no cdigo HTML so demarcados pelos marcadores de incio <h1> e a de final </h1>. O nmero 1 indica o nvel, portanto <h1> utilizado para ttulos principais. Para indicar subttulos so utilizados <h2> , <h3> , <h4> e assim por diante. Para analisar como os navegadores exibem ttulos e subttulos utilizaremos o cdigo 8.
30
A Linguagem HTML
Cdigo 8: Acentuao sem cdigos especiais <html> <head> <title>Título do Documento</title> </head> <body> <h1>Título de nível 1</h1> <h2>Título de nível 2</h2> <h3>Título de nível 3</h3> <h4>Título de nível 4</h4> <h5>Título de nível 5</h5> </body> </html> O resultado do cdigo 8 no navegador Mozilla Firefox deve ser parecido com o exibido pela figura 9. Compare o resultado com outros navegadores. Comentrio: A importncia da utilizao correta dos marcadores, seguindo sua semntica, est fortemente ligada a um novo segmento de negcio que surgiu na Internet: Da sigla em ingls SEO (Search Engine Optimization Otimizao de sites) empresas que oferecem servio de otimizao de cdigo para que o site do contratante aparea melhor classificado nos sites de busca como Google, Yahoo e outros. Uma das tcnicas utilizadas em SEO o ajuste dos ttulos e subttulos para denotar a real importncia do contedo de textos das pginas. Um cliente que solicita o desenvolvimento de uma pgina para a Internet deseja que o mximo de pessoas a acesse, seja para realizar vendas ou divulgar o seu negcio. As pginas de busca so mecanismos gratuitos a partir das quais as pessoas acham pginas na Internet.
Pargrafos
No incio deste livro, foram exibidos dois exemplos de como utilizar corretamente o cdigo HTML e foram eles: cdigo 1 e cdigo 2, que apesar de apresentarem no navegador resultados
31

semelhantes, um deles estava semanticamente incorreto. Sempre que se desejar utilizar pargrafos nos textos, os marcadores corretos de incio e fim so <p> e </p>. A seguir, no cdigo 9, exibido a utilizao correta, nunca esquecendo do marcador de fechamento de pargrafo. Cdigo 9: Utilizao de pargrafos <html> <head> <title>Utilização de parágrafos</title> </head> <body> <h1>Utilização de parágrafos</h1> <p>Primeiro parágrafo. Todo o texto deverá estar contido dentro das TAGs <p> e </p>, apesar de funcionar somente com a marcação de início, o código estará incorreto.</p> <p>Uma maneira de validar o seu HTML é a utilização do link http://validator.w3.org/.</p> </body> </html> A figura a seguir exibe o resultado do cdigo 9 no navegador Mozilla Firefox.
Figura 10: Utilizao de pargrafos no HTML
d) Formatao de textos
A linguagem HTML define vrios marcadores para formatao de textos e eles esto divididos em dois grupos: lgico e fsico. Nos navegadores a exibio ser igual tanto para marcadores lgicos quanto para fsicos, o motivo da distino entre eles se deve ideia bsica de independncia entre especificao e apresentao. Quando
32
A Linguagem HTML
formatamos um trecho de texto como cabealho de nvel 1, no explicitamos se esse tipo de cabealho deve ser em uma fonte determinada, em um tamanho determinado, justificado esquerda ou direita, ou centralizado. Esses detalhes de apresentao so deixados para o navegador - o dispositivo de apresentao do documento - que pode ser configurado de acordo com o leitor (usurio final). Desse modo, alm de facilitar enormemente o trabalho de quem escreve os documentos, a linguagem garante a uniformidade de apresentao de cabealhos, pargrafos, listas, etc.
Marcadores lgicos
A formatao lgica segue o significado lgico do texto marcado: um endereo de e-mail, uma citao etc. Sua apresentao final varia conforme o navegador, podendo oferecer resultados mais ricos. A seguir a apresentao de um cdigo e sua exibio no navegador Mozilla Firefox de um cdigo utilizando marcadores lgicos.
Cdigo 10: Utilizao de estilos lgicos

<html> <head> <title>Utilização de estilos lógicos </title> </head> <body> <h1>O cabeçalho é um estilo lógico</h1> <p>Outro exemplo é quando desejamos <strong>chamar atenção</strong> para uma parte do texto, indicar que o texto se trata de um código:</p> <code><strong>Chamar atenção</ strong></code> <p>Ou ainda que trata-se de um endereço: <address>email@ifsc.edu.br</address></p> </body> </html>
33
Figura 11: Utilizao de estilos lgicos
Marcadores fsicos
A formatao fsica especifica explicitamente o estilo que se quer para o texto: itlico, grifado etc. Sua apresentao final no sofre grandes variaes. A seguir a apresentao de um cdigo e sua exibio no navegador Mozilla Firefox de um cdigo utilizando marcadores fsicos. Cdigo 11: Utilizao de estilos lgicos <html> <head> <title>Estilos físicos</title> </head> <body> <h1>Utilização de estilos físicos</h1> <p><i>Parágrafo em itálico</i></p> <p><b>Parágrafo em negrito</b></p> <p><b><i><u>Parágrafo em itálico, negrito e sublinhado</u></i></b></p> </body> </html>
e) Listas
Vamos ver dois tipos: no ordenadas e numeradas.
Listas no ordenadas
As listas no ordenadas so compostas de vrios itens, todos marcados com o mesmo smbolo (normalmente um crculo).
34
A Linguagem HTML
A marcao utilizada para criao deste tipo de lista o <ul>, do ingls unordered list - lista no ordenadas e dentro deste cada item marcado por <li>, no esquecendo claro de utilizar os respectivo marcadores para fech-los </ul> e </li>. Como exibido a seguir, este tipo de lista pode ainda conter subitens. Cdigo 12: Listas no ordenadas <html> <head> <title>Lista no ordenadas</title> </head> <body> <h1>Exemplo de lista no ordenadas</h1> <ul> <li>Item 1</li> <li>Item 2</li> <ul> <li>Sub-item 1</li> <li>Sub-item 2</li> <li>Sub-item 3</li> </ul> <li>Item 3</li> <li>Item 4</li> </li> </ul> </body> </html>
Figura 12: Lista no ordenada exibida pelo navegador Mozilla Firefox
35
Desenvolvimento de Home pages Listas numeradas

Assim como as listas no ordenadas, as listas numeradas so compostas por vrios itens numerados ascendentemente. A marcao utilizada para criao deste tipo de lista o <ol>, do ingls ordered list - lista ordenada e dentro deste cada item marcado por <li>, no esquecendo claro de utilizar os respectivo marcadores para fech-los </ol> e </li>. Este tipo de lista tambm pode conter subitens. Como o exemplo de cdigo muito parecido com o anterior, somente trocando a marcao <ul> por <ol> a seguir ser exibido somente como o mesmo visto no navegador Mozilla Firefox.
Figura 13: Lista ordenada exibida pelo navegador Mozilla Firefox
f) Tabelas
Este marcador teve um papel fundamental no desenvolvimento de pginas para a Internet, antes do aparecimento do marcador <div>, isto porque era ( e ainda hoje o ) utilizado para definir a aparncia das pginas. Como vimos no captulo Padro de desenvolvimento Web a aplicao de um layout feito pela camada de apresentao, por isso, em nossa unidade curricular aprenderemos a cri-las com o uso do CSS. Voltando ao marcador de tabelas, a idia a de exibir dados de maneira tabular. Para isso foram definidos os seguintes marcadores principais: <table>, <tr>, <td>. O primeiro marcador, <table>, indica o incio de uma tabela e como de costume a sua finalizao se d pelo </table>. A seguir um exemplo simples:
36
A Linguagem HTML
Cdigo 13: Exemplo de tabela simples <table> <tr> <td>Linha 1, coluna 1</td> <td>Linha 1, coluna 2</td> </tr> <tr> <td>Linha 2, coluna 1</td> <td>Linha 2, coluna 2</td> </tr> </table> O resultado no navegador ser parecido com:
Figura 14: Tabela padro exibida por navegador
No cdigo HTML as tabelas so construdas por linhas e clulas. Acompanhando pelo Cdigo 13 e analisando o que foi exibido pelo navegador na Figura pode-se notar que o marcador <tr> (table row linha da tabela) inicia uma nova linha e o marcador <td> (table data dados da tabela) uma clula de dados. importante ressaltar que os marcadores <td> e </td> devero sempre estar entre os marcadores <tr> e </tr>, assim como esses estaro dentro de <table> e </table>. Assim como em editores de texto , em HTML possvel mesclar clulas, tanto na vertical quanto na horizontal. Os cdigos a seguir exibem exemplos dos dois casos.
Como exemplos de editores de texto temos o Microsoft Word, OpenOffice Writer ...
37

Cdigo 14: Exemplo de tabela mesclando clulas na horizontal. <table> <tr> <td colspan=2>Linha 1, coluna 1. Linha 1, coluna 2</td> </tr> <tr> <td>Linha 2, coluna 1</td> <td>Linha 2, coluna 2</td> </tr> </table> Cdigo 15: Exemplo de tabela mesclando clulas na vertical. <table> <tr> <td>Linha 1, coluna 1. Linha 1, coluna 2</td> <td rowspan=2>Linha 1, coluna 2 <br />Linha 2, coluna 2</td> </tr> <tr> <td>Linha 2, coluna 1</td> </tr> </table> Cdigo 16: Exemplo de tabela mesclando clulas na vertical e na horizontal. <table> <tr> <td colspan=2>Linha 1, coluna 1. Linha 1, coluna 2</td> <td rowspan=2>Linha 1, coluna 3 <br />Linha 2, coluna 3 </td> </tr> <tr> <td>Linha 2, coluna 1</td> <td>Linha 2, coluna 2</td> </tr> </table> A exibio no navegador dos cdigos 14, 15 e 16 dever ser parecida com as imagens a seguir:
38
A Linguagem HTML
Figura 15: Aparncia no navegador dos cdigo 14, 15 e 16.
Observando os cdigos acima cdigos pode-se notar o aparecimento de dois novos atributos: colspan e rowspan. Eles so utilizados para mesclar colunas e linhas, recebendo como parmetro a quantidade de colunas ou linhas que devero mesclar. A utilizao deles no nada simples e quase sempre exigir do desenvolvedor vrias tentativas at se chegar ao resultado desejado.
g) Formulrios
Formulrios so conjuntos de objetos para entrada de dados. Delimitados pelos marcadores <form> e </form> contm um seqncia de elementos. Dentre estes elementos podem estar textos, figuras, tabelas entre outros e os marcadores para entrada de dados, cujos principais so: <input>;<select>;<textarea>. Normalmente, os formulrios so usados para enviar informaes preenchidas pelos usurios que acessam as pginas, como forma de entrar em contato. Outra utilizao na transferncia de informaes entre as prprias pginas HTML, como o caso de sistemas de busca. Quase sempre, eles so usados em conjunto com uma linguagem de programao no servidor que o hospeda. Por exemplo, no caso de um sistema de busca, o servidor poder recorrer a um banco de dados para exibir as informaes solicitadas pelo usurio. Como nesta unidade curricular no ser abordada linguagem de programao aprenderemos somente como construir os formulrios.
39

A seguir, no cdigo 17 e na figura ser exibida a utilizao de um formulrio de contato. Cdigo 17: Exemplo de formulrio de contato <form name=contato action=contato.cgi method=POST> <legend>Formulário de contato</legend> <input type=hidden name=pagina value=contato> <label for=nome>Nome:</label> <input type=text name=nome /> <br /> <label for=tel>Tel.:</label> <input type=text name=tel /> <br /> <label for=informacoes>Quais são suas dúvidas?</label> <br /> <textarea name=informacoes cols=40 rows=8></ textarea><br /> <input type=submit value=Enviar> </form>
Figura 16: Formulrio de contato
Dentro de uma mesma pgina HTML podem existir diversos formulrios, cada um deve ser delimitado pelos marcadores <form> e </ form>. No cdigo 17 o marcador <form> possui as propriedades name, action e method, o primeiro serve para identificar o formulrio. Em seguida, a propriedade action indica para qual endereo este formulrio ser enviado, e por fim qual ser o mtodo de envido indicado pela propriedade method. Alm do mtodo POST, mostrado no exemplo,
40
A Linguagem HTML
h tambm o mtodo GET, que difere do primeiro enviando os dados de maneira visvel no navegador, mas este ltimo possui restrio na quantidade de caracteres enviados. Importante: Todos os marcadores de entrada de um formulrio devem possuir a propriedade name, isto porque ser atravs dela que o servidor ir recuperar os valores enviados. Caso exista num formulrio marcadores com nome repetido, os valores sero concatenados e separados por vrgula.
h) Marcadores de entrada
Estes objetos compem o conjunto de informaes que ser enviado pelo formulrio. O primeiro marcador de entrada que aparece no cdigo 17 o mais utilizado. O <input>, assim como no cdigo exemplo, pode assumir diferentes tipos, cuja indicao se d pela propriedade type. Existem outros tipos, veja a seguir: text: usado para entrada de textos simples como nome, endereo, bairro etc, password: semelhante ao anterior mas oculta os dados digitados pelo usurio, hidden: carrega informaes ocultas no formulrio, checkbox: exibe uma pequena caixa que quando marcada carrega seu contedo na submisso do formulrio, radio: semelhante ao anterior, mas usado em casos de mltiplas opes que admita somente uma resposta, button: inclui um boto sem ao definida, submit: tambm inclui um boto, mas esse exerce a funo de envio do formulrio, reset: inclui um boto que restaura os valores iniciais do formulrio, image: boto que tambm exerce a funo de envio do formulrio mas admite que seja utilizada uma imagem ao invs de um boto. Os marcadores input podem ainda possuir um valor j preenchido. Para isso usada a propriedade value=valor desejado. O marcador <select> apresenta uma lista de valores e pode ser utilizado para escolha entre duas ou mais opes.
41

Ele possui as propriedades name, size (para identificar quantas opes sero exibidas por vez) e multiple (que possibilita seleo de mltiplas opes). As opes so apresentadas sob o marcador <option>. A seguir, vamos ver como este marcador utilizado: Cdigo 18: Exemplo do elemento select <select name=ddd> <option value=48>048</option> <option value=47>047</option> </select> Observe o exemplo acima, nele o marcador <option> aparece no valor 048 e 047. Neste caso, o que estiver na propriedade value ser enviado pelo formulrio, o outro servir somente para exibio na tela. Existe ainda o marcador <textarea>, utilizado para incluir uma rea de texto. Diferentemente dos anteriores, este no possui a propriedade value, por isso, o valor inicial dever estar entre os marcadores. Cdigo 19: Exemplo do elemento textarea <textarea name=informacoes>TEXTO INICIAL</textarea> A seguir, um exemplo contendo todos os marcadores de entrada apresentados nesta seo. Cdigo 20: Exemplo completo de formulrio <form name=contato action=contato.cgi method=POST> <fieldset> <legend>Marcadores input</legend> <input type=hidden name=pagina value=contato> <label for=nome>Nome:</label> <input type=text name=nome /> <br /> <label for=tel>Tel.:</label> <input type=text name=tel /> <br /> <label for=acessointernet>De onde acessa a internet?</label> <br /> <input type=checkbox name=acessointernet value=casa />De casa <br />
42
A Linguagem HTML
<input type=checkbox name=acessointernet value=trabalho />Do trabalho <br /> <input type=checkbox name=acessointernet value=amigos />Da casa de amigos<br /> <input type=checkbox name=acessointernet value=escola />Da escola <br /> <label for=sexo>Qual o seu sexo?</label> <br /> <input type=radio name=sexo value=masculino />Masculino <br /> <input type=radio name=sexo value=feminino />Feminino <br /> <label for=time>Times do coração?</label> <br /> </fieldset> <fieldset> <legend>Outros marcadores</legend> <select name=time multiple=multiple> <option value=Sao Paulo>São Paulo</option> <option value=Corinthians>Corinthians</option> <option value=Avai>Avaí</option> <option value=Figueirense>Figueirense</option> </select> <br /> <label for=informacoes>Quais são suas dúvidas?</label> <br /> <textarea name=informacoes></textarea><br /> </fieldset> <input type=reset value=Limpar> <input type=submit value=Enviar> </form>
i) Hiperlinks e ncoras
O HTML define um marcador que possibilita a ligao de uma poro de texto ou imagem a outro documento, ou outro ponto do mesmo documento. Os navegadores comumente destacam essas marcaes sublinhando-as e trocando sua cor, alm de substituir o cursor para uma mo quando o mouse passa por cima dela. Para tanto, o marcador <a> utilizado de duas formas distintas. Na primeira age como ncora para indicar um local de
43

chegada. Na segunda age criando o hiperlink, ou simplesmente link, para o local desejado. A seguir os exemplos de utilizao de hiperlinks e ncoras. Cdigo 21: Exemplos de hiperlinks  <a href=pagina.html>Texto para o link</a>  <a name=ancora1>Âncora</a>  <a href=#ancora1>Âncora</a> Todos os marcadores aprendidos at agora fazem parte da camada de contedo, que juntamente com textos e imagens tem a funo de incluir e delimitar as informaes que estaro disponveis numa pgina para a Internet. Os contedos apresentados a partir da prxima seo fazem parte da camada de Apresentao, cujo objetivo principal definir como o contedo ser exibido nos navegadores.
Atividade
1. Qual a diferena entre marcadores lgicos e marcadores fsicos? 2. Se num texto voc deseja dar um destaque ou um enfoque maior numa palavra ou em uma frase, qual marcador voc ir utilizaria? <b> ou <strong>? Justifique sua escolha.
44
CAPTULO
3
Cascading Style Sheet (CSS) Folha de Estilo em Cascata
Objetivo
Nesta unidade, em que a camada de apresentao abordada, aprenderemos como dar a forma a nossas pginas. Atravs da aplicao de estilos indicaremos ao navegador como ele dever exibir o contedo ao usurio que acessa a pgina.
Cascading Style Sheet (CSS)
3.1. Cascading Style Sheet (CSS)

Cascading Style Sheet (CSS) um padro para definio de propriedades visuais aos marcadores HTML. Chamado em portugus por Folha de Estilo em Cascata, com ele, pode-se definir o estilo de toda uma pgina. Por exemplo cor de fundo da pgina, tipos de fonte padro, formatao de ttulos, margens, entre outros. A palavra Cascata est contida no nome deste padro e isso no por acaso. Como veremos a seguir, em CSS as propriedades aplicadas aos marcadores estendem-se, como em uma cascata, aos marcadores aninhados. LEMBRE-SE: CSS so as as folhas de estilo que aplicam a formatao visual das pginas Para que seja possvel que a folha de estilo formate uma pgina HTML, ela precisa ser includa no documento. A seguir, veremos como isso pode ser feito.
Incluindo Folhas de Estilo em Cascata

Existem trs maneiras distintas para se incluir uma Folha de Estilo em Cascata em um documento. 1. Importadas ou referenciadas 2. Incorporadas 3. Em linha
Folha de Estilos em Cascata Externa

Uma Folha de Estilos em Cascata denominada externa quando as regras esto declaradas em um documento a parte da pgina HTML. Este arquivo separado possui a extenso .css. Folhas de Estilo em Cascata externa so ideais para serem aplicadas a vrias pginas. Com uma folha de estilo externa, podese mudar a aparncia de um site inteiro num nico arquivo (o arquivo de Folha de Estilo em Cascata). Para importar ou referenciar uma Folha de Estilos em Cascata num documento HTML usa-se, dentro do marcador <head>, a seguinte sintaxe:
47
Cdigo 22: Importao de uma folha de estilos  <head> ... <link rel=stylesheet type=text/css href=estilo.css> ... </head> Cdigo 23: Importao de uma folha de estilos 2  <head> ... <style type=text/css> @import url(estilo.css); </style> ... </head>
Folha de Estilos em Cascata Incorporada ou Interna

Uma Folha de Estilos em Cascata denominada Incorporada ou Interna quando as regras esto declaradas dentro do prprio documento HTML. Este tipo de incluso interessante quando a aplicao de estilos servir somente a essa pgina. Assim como no tipo de incorporao anterior, este dever ficar dentro do marcador <head> e ainda sob o marcador <style> como exibido no exemplo a seguir: Cdigo 24: Incorporao de estilos na pgina <head> ... <style type=text/css> body { background: #dddddd; } p{ margin-left: 10px; } </style> ... </head>
48
Cascading Style Sheet (CSS) Folha de Estilos em Cascata em Linha

So chamadas em Linha, quando as regras CSS so declaradas dentro do prprio marcador HTML. Isto significa que as regras iro valer somente para o marcador em que elas estiverem. A utilizao de regras CSS em Linha deve ser usada somente em casos excepcionais, isto porque ela no se enquadra nos padres de desenvolvimento Web (modelo em camadas). A seguir o exemplo de utilizao deste mtodo. Cdigo 25: Aplicao de estilo em linha <p style=font-size:12px; margin-left:10px;> Texto para o pargrafo </p>
3.2 Regras bsicas

Regras CSS so declaraes que seguem uma sintaxe prpria e definem como sero aplicados estilos a um ou mais elementos do HTML. Um conjunto de regras CSS formam uma Folha de Estilos em Cascata. Existem trs formas de se definir um estilo: 1. M {definio de estilo} M o marcador para o qual se esta aplicando o estilo, podendo ser composto de vrios marcadores (Exemplo: P H1, H3). Desta , forma definido que todos os marcadores M tero o estilo definido. Exemplo prtico: p {font-size:12px; color:#00ffff} O exemplo acima define que todos os textos que estiverem dentro do marcador <p> tero fonte de tamanho 12 pixels e cor vermelha. 2. M#classid {definio de estilo} ou M.classname {definio de estilo} Desta forma criado um estilo classid ou classname que pode ser aplicado a marcadores do tipo M. Por exemplo:
49

INPUT#unico {definio de estilo} Indica que o campo INPUT com id=unico ter a definio de estilo aplicado a ele. A seguir o exemplo do marcador que receber a definio de estilo acima: Cdigo 26: Aplicao da propriedade id ao elemento do HTML <input type=text name=ddd /> <input type=text name=telefone id=unico /> Note que o estilo ser aplicado somente ao segundo marcador, isto porque ele que possui a propriedade id=unico. O exemplo abaixo para definio de uma classe. INPUT.campo {definio de estilo} Indica que todos os campos INPUT que possurem o class=campo tero o estilo aplicado a ele. Cdigo 27: Aplicao da propriedade class ao elemento do HTML <input type=text name=ddd class=campo /> <input type=text name=telefone class=campo /> <input type=text name=ramal /> No exemplo acima, a formatao ocorrer nos dois primeiros marcadores, os que possuem a propriedade class=campo. Em documentos HTML os valores de propriedade id devem ser nicos. Por isso a existncia de classid e classname, com o primeiro definese estilos para somente um elemento, enquanto que com classname pode-se aplicar estilos a diversos elementos do documento HTML. 3. #classid {definio de estilo} ou .classname {definio de estilo} Semelhante ao anterior, este define estilos genricos que podem ser aplicados para quaisquer tipos de marcadores. Exemplos: <p id=classid>Texto exemplo</p> class=classname>Texto exemplo</p> ou <p
50

Existe ainda pseudo-classes especiais para serem usadas na definio de estilos. Algumas delas so: Link estilo aplicado quando o marcador for clicvel. Visited estilo aplicado quando o marcador j tiver sido clicado. Hover estilo aplicado quando o mouse passar sobre o marcador. Active estilo aplicado durante o clique no marcador. Exemplo: a:link { color: red } a:visited { color: blue } a:hover { color: yellow } a:active { color: green } Os exemplos acima definem que os marcadores a, de hiperlinks, tero a cor vermelha (red) em seu estado natural, a cor azul (blue) quando o hiperlink j tiver sido visitado (visited), a cor amarela (yellow) quando o cursor estiver sobre ela (hover) e a cor verde (green) quando estiver sendo pressionado (active).
3.3 Fontes
As propriedades bsicas e seus valores vlidos para a definio de fontes exibido na tabela a seguir.
Propriedade e Valores aceitos funcionalidade - cdigo hexadecimal. Ex: #000000 color - cdigo rgb: rgb(255,235,0) cor da fonte - nome da cor: red, blue, green...etc - nome da famlia de fontes : define-se font-family pelo nome da fonte, p. ex:verdana, tipo da fonte helvetica, arial, etc. - nome da famlia genrica: define-se pelo nome genrico, p. ex:serif, sansserif, cursive, etc
51

font-size tamanho para a fonte - xx-small - x-small - small - medium - large - x-large - xx-large - smaller - larger - length: uma medida reconhecida pelas CSS (px, pt, em, cm, ) -% - normal: fonte normal na vertical font-style - italic: fonte inclinada estilo da fonte - oblique:fonte oblqua - normal: fonte normal font-variant fontes maisculas - small-caps: transforma em maisculas de menor altura de menor altura - normal font-weight quanto mais escu- - bold ra a fonte deve ser - bolder - lighter (negrito) - 100 - 200 - 300 - 400 - 500 - 600 - 700 - 800 - 900
Tabela 3: Propriedades e valores para fontes em CSS [MAUJOR10]
A seguir so apresentados alguns exemplos de aplicao das propriedades de fontes. Para uma melhor fixao refaa os exemplos adicionando novas propriedades modificando os valores por outros exibidos na Tabela 3.
52

Cdigo 28: Aplicaes de estilos a fontes <html> <head> <title>Exemplos de estilos em fontes</title> <style type=text/css> #segundo { color: grey; font-family: sans-serif } #terceiro { font-size: x-large; font-weight: bold } #quarto { font-style: italic } #quinto { font-size: 18px; font-family: sans-serif } .outro { font-variant: small-caps } </style> </head> <body> <h1>Exemplos de estilos em fontes</h1> <p>Primeiro Parágrafo (sem estilo)</p> <p id=segundo>Segundo Parágrafo</p> <p id=terceiro>Terceiro Parágrafo</p> <p id=quarto>Quarto Parágrafo</p> <p id=quinto>Quinto <span class=outro>Parágrafo</span></p> </body> </html>
Tabela 4: Exemplo de aplicao de estilo em textos
O resultado do cdigo acima dever ser parecido com o exibido a seguir.
Figura 17: Exemplo de aplicao de estilo em fontes
53
3.4 Atributos de texto

Os atributos de texto definem outras regras de formatao para textos no HTML. A seguir uma tabela com os atributos bsicos com sua funcionalidade e valores vlidos. Propriedade e funcionalidade letter-spacing espaamento entre letras Valores aceitos - normal: o espaamento default - lenght: uma medida reconhecida pelas CSS (px, pt, em, cm, ...) So vlidos valores negativos - normal: o espaamento default - lenght: uma medida reconhecida pelas CSS (px, pt, em, cm, ...) So vlidos valores negativos - left: alinha o texto a esquerda - right: alinha o texto a direita - center: alinha o texto no centro - justify: fora o texto a ocupar toda a extenso da linha da esquerda a direita - none: nenhuma decorao - underline: coloca sublinhado no texto - overline: coloca um sobrelinhado no texto - line-through: coloca uma linha em cima do texto - blink: faz o texto piscar - lenght: uma medida reconhecida pelas CSS (px, pt, em, cm, ) - % : porcentagem da largura do elemento pai
word-spacing espaamento entre palavras
text-align alinhamento do texto
text-decoration decorao do texto
text-indent recuo do texto
54

text-transform forma das letras - none: texto normal - capitalize: todas as primeiras letras do texto em maisculas - uppercase: todas as letras do texto em maisculas - lowercase: todas as letras do texto em minsculas - ltr: texto escrito da esquerda direction para a direita direo do texto - rtl: texto escrito da direita para a esquerda - normal: os espaos em branco white-space como o browser trata os espaos sero ignorados pelo navegador - pre: os espaos em branco seem branco ro preservados pelo navegador - nowrap: o texto ser apresentado todo ele numa linha nica na tela. No h quebra de linha at ser encontrada uma tag <br>
Tabela 5: Propriedades e valor para textos em CSS [MAUJOR10]
A seguir so apresentados alguns exemplos de aplicao das propriedades a textos. Para uma melhor fixao refaa os exemplos adicionando novas propriedades modificando os valores por outros exibidos na Tabela 5. Cdigo 29: Exemplo de aplicaes de estilos a textos <html> <head> <title>Exemplos de estilos em textos</title> <style type=text/css> #segundo { letter-spacing: 10px; text-decoration: linethrough } #terceiro { word-spacing: 40px; text-indent: -20px } #quarto { text-transform: uppercase } #quinto { text-decoration: overline } .outro { text-decoration: underline } </style> </head>
55

<body> <h1>Exemplos de estilos em textos</h1> <p>Primeiro Parágrafo (sem estilo)</p> <p id=segundo>Segundo Parágrafo</p> <p id=terceiro>Terceiro Parágrafo</p> <p id=quarto>Quarto Parágrafo</p> <p id=quinto>Quinto <span class=outro>Parágrafo</span></p> </body> </html>
Tabela 6: Exemplo de aplicao de estilos em textos
O resultado do cdigo acima dever ser parecido como o exibido a seguir.
Figura 18: Propriedades e valor para textos em CSS
3.5 Margens
As propriedades de margem definem a espessura de margem para os elementos do HTML. A seguir, uma tabela com os atributos bsicos com sua funcionalidade e valores vlidos.
Propriedade e funcionalidade Valores aceitos para a propriedade - auto: valor default da margem - length: uma medida reconhecida pelas CSS (px, pt, em, cm, ) - %: porcentagem da largura do elemento pai
margin-top
(define a margem superior)
margin-right
(define a margem direita)
margin-bottom margin-left margin
(define a margem inferior) (define a margem esquerda) maneira abreviada para todas as margens
Tabela 7: Propriedades e valores vlidos para margem em CSS [MAUJOR10]
56

Para ilustrar a utilizao das propriedades de margens a seguir sero apresentados um cdigo exemplo e seu resultado exibido no navegador. Cdigo 30: Exemplo de estilos em margens <html> <head> <title>Exemplos de estilos em margens</title> <style type=text/css> #segundo { margin-left:100px; background-color:lightgray } #terceiro { background-color:lightgray } #quarto { margin-top:50px; background-color:lightgray } #quinto { margin:10px 60px 0 30px; backgroundcolor:lightgray } </style> </head> <body> <h1>Exemplos de estilos em margens</h1> <p>Primeiro Parágrafo (sem estilo)</p> <p id=segundo>Segundo Parágrafo</p> <p id=terceiro>Terceiro Parágrafo</p> <p id=quarto>Quarto Parágrafo</p> <p id=quinto>Quinto Parágrafo</p> </body> </html> O resultado do cdigo acima dever ser parecido como o exibido a seguir. A cor de fundo foi propositalmente configurada como cinza claro como forma de demonstrar o local em que a propriedade esta agindo. Quando necessrio, a aplicao da propriedade margin aos quatro lados de um elemento HTML, a utilizao da forma abreviada, como exibido para o quinto pargrafo, se torna mais interessante. Isto porque, com somente uma propriedade pode-se definir todas as margens. Elas so dispostas na sequncia e so nesta ordem o topo, o lado direito, a base e o lado esquerdo.
57
Figura 19: Aplicao de propriedades de margem em CSS
3.6 Bordas
As propriedades de borda definem como sero as linhas que contornam os elementos do HTML. A seguir uma tabela com os atributos bsicos, sua funcionalidade e valores vlidos.
Propriedade e funcionalidade border-width - espessura das bordas border-style - estilo das bordas border-color - cor das bordas border-top-width - espessura da borda superior border-top-style - estilo da borda superior border-top-color - cor da borda superior border-right-width - espessura da borda direita border-right-style - estilo da borda direita border-right-color - cor da borda direita border-bottom-width - espessura da borda inferior border-bottom-style - estilo da borda inferior border-bottom-color - cor da borda inferior border-left-width - espessura da borda esquerda border-left-style - estilo da borda esquerda border-left-color - cor da borda esquerda Valores aceitos para a propriedade color - cdigo hexadecimal: #FFFFFF - cdigo rgb: rgb(255,235,0) - nome da cor: red, blue, green...etc style - none: nenhuma borda - hidden: equivalente a none - dotted: borda pontilhada - dashed: borda tracejada - solid: borda contnua - double: borda dupla - groove: borda entalhada - ridge: borda em ressalto - inset: borda em baixo relevo - outset: borda em alto relevo width - thin: borda fina - medium: borda mdia - thick: borda grossa - length: uma medida reconhecida pelas CSS (px, pt, em, cm, ...)
58

border-top - maneira abreviada para todas as propriedades da borda superior border-right - maneira abreviada para todas as propriedades da borda direita border-bottom - maneira abreviada para todas as propriedades da borda inferior border-left - maneira abreviada para todas as propriedades da borda esquerda border - maneira abreviada para todas as quatro bordas
Tabela 8: Propriedades e valores vlidos para bordas em CSS [MAUJOR10]
Para ilustrar a utilizao das propriedades de bordas a seguir sero apresentados um cdigo exemplo e seu resultado exibido no navegador. Cdigo 31: Exemplo de estilos em bordas <html> <head> <title>Exemplos de estilos em bordas</title> <style type=text/css> #segundo { border-style: dotted } #terceiro { border-style: ridge; border-width: 10px; } #quarto { border-width: 5px; border-style: dashed; bordercolor: gray } #quinto { border: 5px dashed gray } </style> </head> <body> <h1>Exemplos de estilos em bordas</h1> <p>Primeiro Parágrafo (sem estilo)</p> <p id=segundo>Segundo Parágrafo</p> <p id=terceiro>Terceiro Parágrafo</p> <p id=quarto>Quarto Parágrafo</p> <p id=quinto>Quinto Parágrafo</p> </body> </html>
59

O resultado do cdigo acima dever ser parecido como o exibido a seguir. Assim como no exemplo anterior, existe uma forma abreviada de configurar propriedades. Note que na figura a seguir os pargrafos quatro e cinco possuem o mesmo efeito, enquanto que a maneira como eles so declarados no cdigo acima diferem.
Figura 21: Aplicao de bordas em elementos HTML
3.7 Espaamento
As propriedades para espaamentos definem valores para os espaamentos entre o contedo e as bordas de elementos do HTML. primeira vista esta propriedade pode ser confundida com outra j apresentada (margem), mas os exemplos ilustraro as diferenas entre elas. A seguir uma tabela com os atributos bsicos, sua funcionalidade e valores vlidos.
Propriedade e funcionalidade Valores aceitos para a propriedade - auto: valor default da margem - length: uma medida reconhecida pelas CSS (px, pt, em, cm, ) - %: porcentagem da largura do elemento pai
padding-top
define a espaamento superior
padding-right
define a espaamento direita
padding-bottom padding-left padding
define a espaamento inferior define a espaamento esquerda maneira abreviada para todas os espaamentos
Tabela 9: Propriedades e valores vlidos para espaamento em CSS [MAUJOR10]
Para ilustrar a utilizao das propriedades de espaamento a seguir sero apresentados um cdigo exemplo e seu resultado exibido no navegador.
60

Cdigo 31: Exemplo de estilos para espaamento <html> <head> <title>Exemplos de estilos para espaço</title> <style type=text/css> #segundo { padding-left:100px; backgroundcolor:lightgray } #terceiro { background-color:lightgray } #quarto { padding-top:50px; background-color:lightgray } #quinto { padding:10px 60px 0 30px; backgroundcolor:lightgray } </style> </head> <body> <h1>Exemplos de estilos para espaço</h1> <p>Primeiro Parágrafo (sem estilo)</p> <p id=segundo>Segundo Parágrafo</p> <p id=terceiro>Terceiro Parágrafo</p> <p id=quarto>Quarto Parágrafo</p> <p id=quinto>Quinto Parágrafo</p> </body> </html> O resultado do cdigo acima dever ser parecido como o exibido a seguir e assim como no exemplo de margens foi definida a cor cinza claro para exibir o local onde a propriedade de espaamento est fazendo efeito.
Figura 22: Aplicao de espaamento em elementos HTML
61

Se compararmos este ao exemplo das margens, nota-se que o espaamento age dentro do elemento HTML, enquanto que as margens agem externamente.
3.8 Fundos
Mais conhecidos pelo termo em ingls backgound, esta propriedade define como ser o fundo de um elemento HTML. Alm do exemplo j mostrado anteriormente (que preenche o fundo com uma cor) possvel tambm aplicar uma imagem ao fundo de um elemento. A seguir, uma tabela com os atributos bsicos, sua funcionalidade e valores vlidos.
Propriedade e funcionalidade background-color cor de fundo Valores aceitos para a propriedade - cdigo hexadecimal: #FFFFFF - cdigo rgb: rgb(255,235,0) - nome da cor: red, blue, green...etc - transparente: transparent - URL: url(caminho/para/imagem) - no repete: no-repeat - repete vertical e horizontal: repeat - repete vertical: repeat-y - repete horizontal: repeat-x - imagem fixa na tela: fixed - imagem rola com a tela: scroll - x-pos y-pos - x-% y-% - top left - top center - top right - center left - center center - center right - bottom left - bottom center - bottom right
background-image imagem de fundo background-repeat maneira como a imagem de fundo posicionada background-attachment se a imagem de fundo rola ou no com a tela background-position como e onde a imagem de fundo posicionada
Tabela 9: Propriedades de fundos em elementos HTML [MAUJOR10]
Para ilustrar a utilizao das propriedades de fundos a seguir sero apresentados um cdigo exemplo e seu resultado exibido no navegador.
62

Cdigo 32: Exemplo de estilos para fundos <html> <head> <title>Exemplos de estilos para fundos</title> <style type=text/css> #segundo { background-color:#000000; color:#ffffff } #terceiro { background-image: url(../imagens/fundo. png); padding:10px; } #quarto { background-image: url(../imagens/fundo.png); background-repeat: repeat-x; padding:10px; border: solid 1px #000 } #quinto { background-image: url(../imagens/fundo.png); background-repeat: repeat-y; padding:10px; border: solid 1px #000 } </style> </head> <body> <h1>Exemplos de estilos para fundos</h1> <p>Primeiro Parágrafo (sem estilo)</p> <p id=segundo>Segundo Parágrafo</p> <p id=terceiro>Terceiro Parágrafo</p> <p id=quarto>Quarto Parágrafo</p> <p id=quinto>Quinto Parágrafo</p> </body> </html> O resultado do cdigo acima dever ser parecido como o exibido a seguir.
Figura 23: Resultado no navegador da aplicao de fundos
63

O exemplo do segundo pargrafo parecido aos exemplos anteriormente utilizados, com a mudana da cor de fundo para preto e a cor do texto para branco. No terceiro pargrafo feito a aplicao do fundo ( ) de maneira fundamental. Desta forma, ocorre a repetio lado-a-lado da imagem por todo o fundo do elemento HTML que recebeu a propriedade. Os exemplos dos pargrafos quarto e quinto demonstram como possvel repetir o fundo somente em uma das orientaes, horizontal ou vertical. Juntamente ao exemplo foram utilizadas outras propriedades, como padding e border para exibir com maior clareza o efeito produzido na aplicao da imagem de fundo.
3.9 Listas
As propriedades de listas definem como elas devero ser exibidas no navegador. A seguir uma tabela com os atributos bsicos, sua funcionalidade e valores vlidos.
Propriedade e funcionalidade Valores aceitos para a propriedade - none - URL: url(caminho/para/imagem) - outside: marcador fora do alinhamento do texto - inside: marcador alinhado com texto - none: sem marcador - disc: crculo (bolinha cheia) - circle: circunferncia (bolinha vazia) - square: quadrado cheio - decimal: nmeros 1, 2, 3, 4, ... - decimal-leading-zero - lower-roman: romano minsculo i, ii, iii, iv, ... - upper-roman: romano maisculo I, II, III, IV, ... - lower-alpha: letra minscula a, b, c, d, ... - upper-alpha: letra maiscula A, B, C, D, ...
list-style-image
imagem como marcador da lista
list-style-position
onde o marcador da lista posicionado
list-style-type
tipo do marcador da lista
64

- upper-latin - hebrew - armenian - georgian - cjk-ideographic - hiragana - katakana - hiragana-iroha - katakana-iroha
Tabela 10: Propriedades de listas [MAUJOR10]
Para ilustrar a utilizao das propriedades de listas a seguir sero apresentados um cdigo exemplo e seu resultado exibido no navegador. Cdigo 33: Exemplo de estilos para listas
<html> <head> <title>Exemplos de estilos para listas</title> <style type=text/css> #subsegunda { list-style-image: url(../imagens/passos.png) } #segunda { list-style-type: upper-latin } </style> </head> <body> <h1>Exemplos de estilos para listas</h1> <h2>Primeira lista</h2> <ul> <li style=list-style-type: square>Item 1</li> <li style=list-style-type: circle>Item 2</li> <li style=list-style-type: disc>Item 3</li> </ul> <h2>Segunda lista</h2> <ul id=segunda> <li>Item 1</li> <li>Item 2 <ul id=subsegunda> <li>Sub 2.1</li> <li>Sub 2.2</li> <li>Sub 2.3</li> </ul> </li> <li>Item 3</li> <li>Item 4</li> </ul> </body> </html>
65

O resultado do cdigo acima dever ser parecido como o exibido a seguir.
Figura 24: Resultado no navegador da aplicao de CSS em listas
Na primeira lista aplicado o estilo CSS em linha para definir diretamente no item da lista qual o estilo de marcador dever exibir. Na segunda lista, que contm uma sub-lista so definidas letras maisculas para os itens principais e a imagem ( ) para os sub-itens.
3.10 Unidades de medida CSS

Em diversas propriedades mostradas at agora os valores aceitos so unidades de medida, por exemplo o tamanho que a fonte de um texto deve ter. A maneira como as unidades de medida so utilizadas determina o quanto um site acessvel e veremos a seguir porque. As unidades de medida esto divididas em absolutas e relativas. A primeira determina um tamanho fixo enquanto que na segunda o tamanho depende das configuraes padro do usurio.
Unidades absolutas in (polegadas) cm (centmetros) mm (milmetros) pt (pontos) pc (picas) px (pixels) Unidades relativas em ex %
Tabela 10: Unidades de medida absolutas x relativas [MAUJOR10]
66

A recomendao a utilizao de unidades de medida relativas, em especial a em, pois com ela determina-se o tamanho da fonte em relao ao tamanho padro do usurio. As fontes absolutas so recomendadas quando se conhece a mdia de sada, por exemplo uma pgina HTML que ser utilizada para impresso. A seguir, o cdigo e a imagem demonstram a utilizao e o resultado no navegador de unidades de medida aplicadas a textos. Cdigo 34: Pgina que exibe as unidades de medida
<html> <head> <title>Unidades de medida CSS</title> </head> <body> <h1>Unidades de medida CSS</h1> <p><strong>Utilizando em</strong> Texto normal: <span style=font-size: 3em;>3em</span>, <span style=font-size: 2em;>2em</span>,<span style=font-size: 1em;>1em</span>. <strong>Utilizando ex</strong> Texto normal: <span style=font-size: 3ex;>3ex</span>, <span style=font-size: 2ex;>2ex</span>,<span style=fontsize: 1ex;>1ex</span>. <strong>Utilizando px</strong> Texto normal: <span style=font-size: 20px;>20px</span>, <span style=font-size: 15px;>15px</span>,<span style=font-size: 10px;>10px</span>. <strong>Utilizando in</strong> Texto normal: <span style=font-size: 1in; line-height: 1in;>1in</span>, <span style=font-size: 0.5in; line-height: 0.5in;>0.5in</ span>. <strong>Utilizando cm</strong> Texto normal: <span style=font-size: 2cm; line-height: 2cm;>2cm</span>, <span style=font-size: 1cm; line-height: 1cm;>1cm</span>. <strong>Utilizando mm</strong> Texto normal: <span style=font-size: 20mm; line-height: 20mm;>20mm</span>, <span style=font-size: 10mm;>10mm</span>. <strong>Utilizando pt</strong> Texto normal: <span style=font-size: 18pt; line-height: 18pt;>18pt</span>, <span style=font-size: 12pt;>12pt</span>. <strong>Utilizando pc</strong> Texto normal: <span style=font-size: 5pc; line-height: 5pc;>5pc</span>, <span style=font-size: 3pc;>3pc</span></p> </body> </html>
67
O resultado do cdigo acima num navegador deve ser parecido com a ilustrao da figura a seguir.
Figura 25: Resultado no navegador da utilizao de unidades de medida
3.11 Cores
Diversas propriedades CSS definem cores a elementos ou textos do HTML. H diversas maneiras como as cores podem ser aplicadas. A lista abaixo exibe cinco maneiras diferentes de aplicar a cor vermelha a uma elemento do HTML. #ff0000 #f00 rgb(255, 0, 0) rgb(100%, 0%, 0%) red
Os quatro primeiros itens utilizam a mistura de cores RGB (Vermelho, Verde e Azul) para definir a cor a ser utilizada, nos dois primeiros atravs de nmeros hexadecimais cujos menores (0) indicam ausncia de cor e os maiores (f) presena total da cor. O primeiro permite uma maior variedade de cores pois para cada cor do RGB h dois nmeros para indicar, j na segundo somente um. Os prximos dois, terceiro e
68

quarto itens, tambm se utilizam de uma mistura das cores RGB, mas a intensidade definida de 0 a 255 e de 0 a 100% respectivamente. Por ltimo permitido a utilizao do nome da cor em ingls. Dentre as cores possvel esto: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, e yellow
ATIVIDADE
1. Existe alguma maneira de abreviar o cdigo CSS a seguir? Exemplifique! p{ border-width: 1px; border-style: solid; border-top: 10px; border-left: 10px; border-right: 10px; border-bottom: 10px; } 2. Qual ser a diferena exibida pelo navegador quando as cores a seguintes forem aplicadas a um elemento do HTML? Cor 1: red Cor 2: rgb(255,0,0) Cor 3: #f00
69
CAPTULO
4
Projeto de home page
Objetivo
O principal objetivo desta unidade fazer a ligao entre as camadas de contedo e de apresentao que foram vistas nas unidades 2 e 3,respectivamente. Ao final desta unidade voc dever estar pronto para desenvolver seus prprios projetos.
4.1 Criao de um projeto de homepage

Para concluir a nossa Unidade Curricular, esta ltima unidade aborda atravs de um passo-a-passo, a criao de um projeto para uma pgina HTML utilizando os padres de desenvolvimento Web. At agora, vimos atravs de exemplos os elementos do HTML e da Folha de Estilos em Cascata. Chegou o momento dessas duas partes se unirem para que o resultado final, uma pgina HTML, seja construda e disponibilizada para acesso aos usurios. Tambm nesta unidade, veremos alguns aspectos relacionados ao posicionamento, que no foi abordado antes, mas so estilos do CSS que posicionam o local da pgina que um elemento do HTML dever estar.
4.1.1 Primeiro passo: O Projeto

O sucesso de um projeto est intimamente ligado ao seu planejamento. Desde sua concepo at a entrega, ele dever passar por vrias fases que devem ser planejadas cuidadosamente. O pior erro de um desenvolvedor sair escrevendo cdigos sem ao menos saber onde deseja chegar. Como j foi citado no incio deste material, de forma simplificada, um projeto deve ter fases de planejamento, execuo, implantao e manuteno. Nesta sesso, que se enquadra a primeira fase, ser feito o levantamento de requisitos e definidos os objetivos do projeto e seu escopo, ou seja, onde ele dever parar. Nesta fase, comumente, so definidas as pessoas envolvidas, cronograma inicial e oramento, mas por este material no tratar especificamente de padres de projetos eles no sero abordados.
Objetivo do projeto
Desenvolvimento de uma homepage para exibio de anncios de carros usados, possuindo local para divulgao de outras homepages atravs de banners.
Escopo do projeto
A homepage, desenvolvida utilizando a tecnologia HTML dever conter no mximo 10 pginas sendo:
73
1. Pgina inicial contendo anncios de destaque e outros links, dever possuir local para um full banner (banner de tamanho 468x60 pixels) e para outros banners de tamanho 120x60 pixels de outros sites parceiros; 2. Pgina contendo textos explicando a finalidade da homepage; 3. Pgina contendo um formulrio de contato; 4. Pginas para exibio de carros anunciados, com ttulo, foto, e um pequeno texto, segmentados por marca.
Levantamento de requisitos
Nesta etapa so reunidas informaes que sero utilizadas na execuo do projeto. Textos, imagens, vdeos e outras mdias que iro compor a homepage. Para este projeto devero ser levantadas as seguintes informaes: Anncios que sero publicados e quais devero receber destaque na pgina inicial; Banners que devero aparecer na homepage e os hyperlinks para onde sero direcionados; Texto explicando a finalidade da homepage; Padro de cores a ser utilizado na homepage;
4.1.2 Segundo passo: A execuo

De posse das informaes, o prximo passo a execuo do projeto. Mas, antes de colocar a mo na massa e comear a escrever cdigos importante fazer um rascunho de como a homepage e outras pgina devero ficar. Com o rascunho em mos tm-se algo para nortear o desenvolvimento. No precisa ser algo muito elaborado, inclusive podendo ser feito apenas com papel e lpis. Em seguida apresentado o rascunho que ser usado como base neste projeto. Num cenrio real, o rascunho pode ser utilizado para, junto com o cliente, definir como as informaes devero estar dispostas na homepage e, neste caso, o rascunho dever ser elaborado com melhor qualidade.
74
Figura 26: Rascunho da homepage
Com a estrutura bsica da homepage o prximo passo a criao das pastas que sero colocados os arquivos HTML, imagens e estilos CSS. A seguir a estrutura de pasta que ser usada neste projeto.
Figura 27: Estrutura de pastas do projeto
Na pasta Classificados estaro os arquivos HTML e as pastas estilos e imagens que tero respectivamente arquivos de Folhas de Estilo em Cascata e imagens para a homepage. A organizao em pastas importante, pois quando bem realizada, otimiza as manutenes e modificaes dos documentos. Cada desenvolvedor ou empresa de desenvolvimento define um padro de pastas a ser adotado. Como exibido na figura acima, na pasta Classificados est o arquivo index.html, que o arquivo principal contendo o cdigo da pgina inicial. Alm da pgina index.html, na pasta Classificados haver outras oito pginas, uma para as informaes sobre o site (sobre.html), outra para o formulrio de contato (contato.html) e as outras seis que iro conter os
75
classificados por marcas (chevrolet.html, ford.html, volkswagem. html, fiat.html, renault.html, pegeout.html). Relembrando o que foi explicado na parte 1 deste material, iniciase codificando o contedo das pginas no levando muito em considerao a parte visual. Todas as pginas devero conter a parte superior igual, contendo o logotipo e slogan do site, um fullbanner que poder ser diferente a cada pgina e os menus conforme exibido na ilustrao do esboo. Por isso, a dica construir a parte superior primeiro e depois us-la como exemplo nas outras pginas. O cdigo a seguir ser a base para a criao de todas as pginas deste projeto. Veja que nele h um comentrio de incio e fim do topo alm de utilizao das propriedades class e id, foram vistas na seo de Regras Bsicas de Folhas de Estilos em Cascata, aplicadas a alguns elementos do HTML. Estas propriedades sero utilizadas na aplicaes de estilos. Cdigo 35: Cdigo HTML com o topo da pgina
<html> <head> <title>Início - Anúncios do Igor</title> </head> <body>  <h1><img id=logotipo src=imagens/logotipo.png /></h1> <span class=slogan>Compra e venda rápida de carros!</ span> <div><img id=fullbanner src=imagens/fullbanner1.png /></ div> <ul id=menu-principal> <li><a href=index.html>Página inicial</a></li> <li><a href=sobre.html>Sobre o site</a></li> <li><a href=contato.html>Contato</a></li> </ul> <ul id=menu-marcas> <li><strong>Marcas:</strong></li> <li><a href=chevrolet.html>Chevrolet</a></li> <li><a href=ford.html>Ford</a></li> <li><a href=volkswagem.html>Volkswagem</a></li> <li><a href=fiat.html>Fiat</a></li> <li><a href=pegeout.html>Pegeout</a></li> <li><a href=renault.html>Renault</a></li> </ul>  </body> </html>
O logotipo e o fulbanner j devero estar na pasta imagens. (Criar uma seta para o local do cdigo que infique logotipo.png)
76
Figura 28: Imagens para a pasta imagens
Note que, como j foi indicado antes, no est explcito nos cdigo uma formatao para os navegadores alm dos marcadores padres do HTML. Sendo assim, o cdigo acima salvo com o nome index.html na pasta Classificados quando aberto pelo navegador ser exibido como na figura a seguir.
Figura 29: Pgina HTML sem formatao CSS
Com a continuao da codificao do HTML tem-se o cdigo a seguir. Cdigo 36: Pgina inicial completa index.html <html> <head> <title>Início - Anúncios do Igor</title> <link rel=stylesheet type=text/css href=estilos/estilos. css> </head> <body>  <h1><img id=logotipo src=imagens/logotipo.png /></h1>
77

<span class=slogan>Compra e venda rápida de carros!</span> <div><img id=fullbanner src=imagens/fullbanner1.png /></div> <ul id=menu-principal> <li><a href=index.html>Página inicial</a></ li> <li><a href=sobre.html>Sobre o site</a></li> <li><a href=contato.html>Contato</a></li> </ul> <ul id=menu-marcas> <li><strong>Marcas:</strong></li> <li><a href=chevrolet.html>Chevrolet</a></li> <li><a href=ford.html>Ford</a></li> <li><a href=volkswagem.html>Volkswagem</a></li> <li><a href=fiat.html>Fiat</a></li> <li><a href=pegeout.html>Pegeout</a></li> <li><a href=renault.html>Renault</a></li> </ul>   <h2>Destaques</h2> <div id=fundo-homepage> <h3><img src=imagens/strada.jpg /></h3> <h4>Título do anúncio destaque</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...</p> <h5 style=clear: both><img src=imagens/golg4160x120. jpg /><p>Sed malesuada dignissim augue, in ...</p></h5> <h5><img src=imagens/focus160x120.jpg /><p>Sed malesuada dignissim augue, in ...</p></h5> <h5><img src=imagens/vectra160x120.jpg /><p>Sed malesuada dignissim augue, in ...</p></h5> <h5><img src=imagens/golg4160x120.jpg /><p>Sed malesuada dignissim augue, in ...</p></h5> </div> <h6><img src=imagens/banner120x60-1.png /></h6> <h6><img src=imagens/banner120x60-2.png /></h6> <h6><img src=imagens/banner120x60-3.png /></h6> <h6><img src=imagens/banner120x60-4.png /></h6> <div class=espaco-simples></div>
78

  <ul id=menu-marcas> <li><strong>Marcas:</strong></li> <li><a href=chevrolet.html>Chevrolet</a></li> <li><a href=ford.html>Ford</a></li> <li><a href=volkswagem.html>Volkswagem</ a></li> <li><a href=fiat.html>Fiat</a></li> <li><a href=pegeout.html>Pegeout</a></li> <li><a href=renault.html>Renault</a></li> </ul> <ul id=menu-principal> <li><a href=index.html>Página inicial</ a></li> <li><a href=sobre.html>Sobre o site</a></li> <li><a href=contato.html>Contato</a></li> </ul>  </body> </html> Note que agora, alm dos comentrios marcando inicio de fim do topo, tem-se comentrios para o meio e o rodap da homepage. A utilizao de comentrios importante para documentar como foi realizada a codificao, facilitando a manuteno da mesma. No cdigo acima foi includo tambm a referncia para uma folha de estilo no cabealho do HTML, <link rel=stylesheet type=text/css href=estilos/estilos.css>. Ser necessrio ento a criao desse arquivo e a incluso dos estilos que iro aplicar a identidade visual a homepage. A seguir a folha de estilos e sua explicao:
79

h1 {
Cdigo 37: Contedo do arquivo estilos.css

position: relative; height: 115px;
} #logotipo { margin-left: 20px }
.slogan { font-size: .9em; position: absolute; top: 115px; left:10px; } #fullbanner { position: absolute; top: 25px; left:250px; } /* Menu principal */ #menu-principal { height:25px; margin:0; padding:0 0 0 40px; background-color: #ccc } #menu-principal li { float: left; width: 200px; padding-top:2px; list-style: none; } /* Menu marcas */ #menu-marcas { height:25px; margin:0; padding:0 0 0 10px; background-color: orange; color: #fff } #menu-marcas li { float: left; padding:2px 25px 0 0; list-style: none; }
80

* Contedo pagina inicial */ #fundo-homepage { background: url(../imagens/fundo-homepage.png) repeat-x; height:400px; padding: 1em } h3 { padding:0 1em 1em 0; margin:0; position: relative; float: left } h4 { padding:0; margin:0 } h5 { float: left; width: 23%; margin:1% 1% } h6 { float: left; width: 23%; margin:0 1%; text-align:center } .espaco-simples { clear: both; height:1.5em }
Os quatro primeiros estilos definem a formatao do topo da pgina. Para o elemento h1 definido uma largura fixa e o posicionamento relativo para que os prximos trs elementos possam ser posicionados baseados na posio dele. No estilo .slogan aplicado posicionamento absoluto, quando isso ocorre as propriedades top e left dele indicam o espao do topo e lado esquerdo da pgina ou do elemento anterior caso tenha posicionamento relativo, como o h1. Da mesma forma o elemento #fullbanner posicionado. Na sequncia, os estilos que formatam o menu da homepage. recomendado que os menus sejam sempre construdos no HTML com os marcadores <ul></ul>, isto porque, os sites de busca que fazem cadastro automtico de homepages identificam links nesses marcadores como mais importantes. O estilo #menu-principal formata o marcador <ul
81
id=menu-principal>, definindo sua margem, espaamento interno, cor de fundo e altura. Os itens dessa lista so formatados pelo estilo #menu-marcas li, cujo definio indica largura fixa de 200px, no existncia do marcador de lista list-style: none e que eles iro flutuar float: left, assim ao invs de um abaixo do outro, ficaro lado-a-lado. O menu de marcas tem estilos semelhantes ao principal.
At esse ponto, j se tem a formatao de como ser exibida o topo desta homepage, vista nos navegadores dever ficar como a imagem a seguir:
Figura 30: Topo da pgina com aplicao de estilos
Seguindo o esboo, na continuao, a formatao da parte central da pgina principal pede um degrad ao fundo. Para isso, necessrio a criao de uma imagem com degrade de cinza para branco, com 1px de largura e aproximadamente 400px de altura. Essa imagem ser usada repetindo na horizontal background: url(../imagens/fundo-homepage.png) repeat-x;. Para que a aplicao deste fundo fique abaixo dos elementos exibidos no esboo necessrio a utilizao dos elementos <div id=fundo-homepage> e </div> cujo papel ser aninh-los. Alm do fundo aplicada a propriedade padding: 1em que far o espaamentos interno uniforme. Em seguida so aplicados estilos aos elementos h3, h4, h5 e h6. Aos elementos h3, h4, e h6 aplicada a propriedade float: left, por isso, assim como os itens do menu, estes elementos iro flutuar, fazendo com que os elementos na sequncia apaream ao seu lado e no abaixo. Um efeito colateral a utilizao da propriedade float: left que quando o prximo no deva ficar ao lado, este dever possuir a propriedade clear: left ou clear: both. Por isso, o primeiro elemento h5 ter definido em linha a aplicao do estilo clear: both. Para resolver o mesmo problema do pargrafo anterior, agora para os quatro banners ao final da pgina, foi includo o elemento <div
82

class=espaco-simples></div> e na folha de estilos foram aplicadas as propriedades de clear: both e height: 1.5em, isto porque necessrio um espao entre os banners e a prxima parte que a repetio dos menus de navegao. Como resultado da aplicao dos estilos a figura a seguir exibe como ficar no navegador.
Figura 31: Rascunho da pgina de anncios por marca
A prxima pgina ser uma das que exibem os anncios de uma marca especfica. Ela ser aberta quando o usurio selecionar a opo da marca no menu Marcas. Como para a pgina inicial, primeiro um esboo de como ela dever ficar. Como j foi dito anteriormente, a construo da pgina inicial iria dar base para as outras pgina, no cdigo a seguir, em negrito somente os novos cdigos, o restante recuperado, exatamente igual, da pgina inicial. Salve o arquivo com o nome chevrolet.html na pasta Classificados. O mesmo processo de cpia ser usado nas prximas pginas.
83
Cdigo 38: Contedo completo da pgina chevrolet.html

<html> <head> <title>Início - Anúncios do Igor</title> <link rel=stylesheet type=text/css href=estilos/estilos.css> </head> <body>  <h1><img id=logotipo src=imagens/logotipo.png /></h1> <span class=slogan>Compra e venda rápida de carros!</ span> <div><img id=fullbanner src=imagens/fullbanner1.png /></ div> <ul id=menu-principal> <li><a href=index.html>Página inicial</a></li> <li><a href=sobre.html>Sobre o site</a></li> <li><a href=contato.html>Contato</a></li> </ul> <ul id=menu-marcas> <li><strong>Marcas:</strong></li> <li><a href=chevrolet.html>Chevrolet</a></li> <li><a href=ford.html>Ford</a></li> <li><a href=volkswagem.html>Volkswagem</a></li> <li><a href=fiat.html>Fiat</a></li> <li><a href=pegeout.html>Pegeout</a></li> <li><a href=renault.html>Renault</a></li> </ul>   <h2>Anúncios Chevrolet</h2> <div id=fundo-marcas> <h3><img src=imagens/captiva320x240.jpg /></h3> <h4>Captiva 2010 - Imperdível</h4> <p>Venha até uma concessionária ..</p> </div> <hr style=margin-top:0 /> <h7><img src=imagens/vectra160x120.jpg /></h7><h4>Vectra 2009 modelo 2010</h4> <p>Pouco rodado, .. </p> <hr /> <h7><img src=imagens/corsa160x120.jpg /></h7><h4>Corsa 2008</h4> <p>Única dona, ...</p> <hr /> <h7><img src=imagens/montana160x120.jpg /></ h7><h4>Montana, direto ..</h4> <p>Oportunidade ...</p> <hr />
84

  <ul id=menu-marcas> <li><strong>Marcas:</strong></li> <li><a href=chevrolet.html>Chevrolet</a></li> <li><a href=ford.html>Ford</a></li> <li><a href=volkswagem.html>Volkswagem</a></ li> <li><a href=fiat.html>Fiat</a></li> <li><a href=pegeout.html>Pegeout</a></li> <li><a href=renault.html>Renault</a></li> </ul> <ul id=menu-principal> <li><a href=index.html>Página inicial</a></ li> <li><a href=sobre.html>Sobre o site</a></li> <li><a href=contato.html>Contato</a></li> </ul>  </body> </html>
No novo cdigo foram includos elementos que precisam ser formatados. A seguir, os cdigos CSS que devero ser includos no arquivo de folha de estilos estilos.css. Cdigo 39: Estilos para serem incluveis no arquivo estilos.css
#fundo-marcas { background: url(../imagens/fundo-homepage.png) repeat-x; height:250px; padding: 1em; } h7 { float: left; margin-right:1em; } hr { clear:both; border: none; margin:1.5em; }
Alm dos estilos j conhecidos foi includo um novo ao elemento <hr /> que ir quebrar a flutuao dos elementos anteriores e aplicar um espaamento entre eles. O resultado nos navegadores ser parecido com a figura a seguir.
85
Figura 32: Pgina de marcas exibida no navegador
Para as prximas pginas de marcas, faz-se a cpia da pgina chevrolet.html e troca-se as imagens dos carros e os textos, adicionando ou removendo carros quando necessrio. Assim, tem-se alm da pgina inicial, index.html, as pginas: chevrolet.html, ford.html, volkswagem.html, fiat.html, peugeot.html e renault.html. A prxima pgina, bem mais simples que as desenvolvidas at agora a sobre.html, cujo objetivo ser explicar a finalidade da homepage. Utiliza-se os cdigos base da pgina inicial e inclui-se o cdigo a seguir.
86

Cdigo 40: Cdigo HTML para compor a pgina sobre.html
<h2>Sobre a <i>homepage</i></h2> <p>Esta <i>homepage</i> foi desenvolvida para fixação do conteúdo ministrado na Unidade Curricular <strong>Desenvolvimento de homepages</strong>.</ p> <p>Os textos e imagens são fictícios e utilizados somente para fins didáticos. Todas as imagens de carros foram capturadas de páginas da internet.</p> <p>As marcas, bem como os carros, que selecionadas para compor esta <i>homepage</i> foram escolhidas ao acaso.</p> <h2>Sobre o autor</h2> <p>Meu nome é Igor Thiago Marques Mendonça e sou professor do curso Técnico de Informática para Internet na modalidade a distância. Seja bem vindo e aproveite as aulas!<p>
Para esta pgina no foi necessrio a incluso de nenhum estilo adicional. O resultado nos navegadores dever ser como a figura a seguir.
Figura 33: Pgina sobre.html exibida no navegador
A prxima e ltima pgina deste passo-a-passo exibe a criao de um simples formulrio de contato a partir de onde as pessoas que acessam a homepage podem solicitar informaes, dar sugestes ou entrar em contato com os responsveis pela pgina.
87
Assim como para as pgina anteriores, nesta ser utilizada a estrutura bsica da pgina inicial. A seguir somente o cdigo HTML para o formulrio. Cdigo 41: Cdigo para compor a pgina contato.html
<h2>Formulário de contato</h2> <form method=post action=enviaremail.cgi> <fieldset> <label for=nome>Nome:</label> <input type=text name=nome /> <label for=telefone>Telefone:</label> <input type=text name=telefone /> <label for=assunto>Assunto:</label> <input type=text name=assunto /> <label for=assunto>Explique aqui o motivo do contato:</label> <textarea name=texto></textarea> <input type=submit value=Enviar /> <input type=reset value=Limpar /> </fieldset> </form>
O formulrio sem a devida formatao ficaria como a figura a seguir.
Figura 35: Formulrio de contato sem aplicao de estilos
Como novos itens foram adicionados ser necessrio a criao de estilos para formatao desta pgina. A seguir os novos estilos que devem ser incorporados ao arquivo de estilos estilos.css.
88

Cdigo 42: Estilos para serem includos no arquivo estilos.css
fieldset { margin-bottom:1em; } label { float: left; clear: both } input { clear: both; float: left; margin-bottom:1em } textarea { clear: both; float: left; width:30em; height:15em; margin-bottom:1em }
A aplicao das propriedades clear: both e float: left tanto aos elementos input, quanto aos elementos label, faz com que eles flutuem mas ao mesmo tempo quebrem a flutuao do item anterior. Isso causa o efeito de deixar os elementos um abaixo do outro como poder ser visto na figura abaixo, que aps a incluso dos novos estilos dever ser exibida no navegador como segue.
Figura 36: Pgina de contato com a aplicao dos estilos.
89

Com esta ltima pgina conclumos o passo-a-passo cujo objetivo era aplicar os conceitos abordados durante esta Unidade Curricular. Assim como explicado na parte um, importante que, ao aplicar os estilos, seja verificado em tantos navegadores quanto possvel como est ficando a exibio da homepage. Este material no propem explicar todos os elementos do HTML, bem como os estilos CSS, mas sim, ser uma referncia para que voc tenha uma base sobre essas tecnologias e procure outras fontes de conhecimento. Um importante site nacional sobre o assunto de folhas de estilo em cascata : http://www.maujor.com/
ATIVIDADE
Quais seriam os passos e cdigos necessrios quando deseja alterar as cores que os links aparecem no navegador? necessrio aplicar as propriedades id ou class ao marcado <a>? Justifique suas respostas.
90
Referncias bibliogrficas
[MAUJOR10] Mauricio Samy Silva, Site do Maujor. Acessado em 18 de novembro de 2009. On-line: http://www.maujor.com/ [HTML05] Dave Raggett, Getting started with HTML. 24 maio de 2005. Acessado em 15 de julho de 2009. On-line: http://www.w3.org/MarkUp/Guide/ [HTML99] Dave Raggett, Arnaud Le Hors, Ian Jacobs. HTML 4.01 Specification. 24 de dezembro de 1999. Acessado em: 12 de julho de 2009. On-line: http:// www.w3.org/TR/html4/ [NOTEPAD++09] NOTEPAD++. About Notepad++. Acesso em 13 de junho de 2009. On-line: http://notepad-plus.sourceforge.net/br/site.htm [NETAPP09] Net Applications. Acessado em 30 julho de 2009. On-line: http:// marketshare.hitslink.com [TORRES06] Bruno Torres. Padres web: Desenvolvimento em camadas. 21 de maio de 2006. Acessado em 11 de junho de 2009. On-line: http://www.obasicodaweb.com/padroes-web-desenvolvimento-em-camadas

MATERIAL IMPRESSO Desenvolvimento de Home Pages

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

MATERIAL IMPRESSO Desenvolvimento de Home Pages

Caricato da

Copyright:

Formati disponibili

Desenvolvimento de home pages

Prof. Igor Thiago Marques Mendona

Produo e design instrucional:

Captulo 2 - A Linguagem HTML

Captulo 3 - Folha de Estilo em Cascata (CSS - Cascading Style Sheets)

Captulo 4 - Projeto de homepage

Referncias bibliogrficas ...................................................................................................91

1. Ciclo bsico de um projeto de desenvolvimento de programas

1.1 O desenvolvimento do Projeto de uma pgina para a Internet

Desenvolvimento de Home pages

1.2 Estrutura e organizao de pastas, edio de pginas e o Navegador para Internet.

Organizao de pastas para um projeto

Figura 1: Estrutura bsica para projetos

Editor de pginas HTML - Notepad++

Desenvolvimento de Home pages

Figura 2: Interface do programa Notepad++[NOTEPAD++09]

Figura 3: Navegadores mais utilizados [NETAPP09]

1.3 O Padro De Desenvolvimento Web: Modelo Em Camadas

Figura 4: Camadas do padro de desenvolvimento web

Desenvolvimento de Home pages

Neste contexto o usurio a pessoa que ir acessar o site.

Desenvolvimento de Home pages

Figura 5: Aplicao da camada de apresentao

1.4Vamos criar os primeiros exemplos?

Figura 6: Exibio do exemplo1.html no navegador Mozilla Firefox

Desenvolvimento de Home pages

Figura 7: Exibio do exemplo2.html no navegador Mozilla Firefox

2.1 A Linguagem HTML

Desenvolvimento de Home pages

a) Formato do cdigo (X) HTML

Para que servem os marcadores de comentrios no cdigo?

Desenvolvimento de Home pages

b) Acentuao e Caracteres Especiais

Tabela 1: Cdigos especiais

Tabela 2: Acentuao em HTML

content=text/html; charset=ISO-8859-1 />

Desenvolvimento de Home pages

Figura 8: Resultado com e sem o marcador meta indicando a codificao do texto.

c) Ttulos, Sub-Ttulos e Pargrafos

Figura 9: Nveis de ttulos

Desenvolvimento de Home pages

Figura 10: Utilizao de pargrafos no HTML

Cdigo 10: Utilizao de estilos lgicos

Desenvolvimento de Home pages

Figura 11: Utilizao de estilos lgicos

Figura 12: Lista no ordenada exibida pelo navegador Mozilla Firefox

Desenvolvimento de Home pages Listas numeradas

Figura 13: Lista ordenada exibida pelo navegador Mozilla Firefox

Figura 14: Tabela padro exibida por navegador

Desenvolvimento de Home pages

Figura 15: Aparncia no navegador dos cdigo 14, 15 e 16.

Desenvolvimento de Home pages

Figura 16: Formulrio de contato

Desenvolvimento de Home pages

Desenvolvimento de Home pages

Cascading Style Sheet (CSS)

3.1. Cascading Style Sheet (CSS)

Incluindo Folhas de Estilo em Cascata

Folha de Estilos em Cascata Externa

Desenvolvimento de Home pages

Folha de Estilos em Cascata Incorporada ou Interna

Cascading Style Sheet (CSS) Folha de Estilos em Cascata em Linha

3.2 Regras bsicas

Desenvolvimento de Home pages