Guia completo HTML e CSS para iniciantes

Sumrio
INTRODUO ......................................................................................................................... 5
Boas vindas! .................................................................................................................................. 5
No um bicho de sete cabeas ................................................................................................... 5
Mdulos ........................................................................................................................................ 5
MDULO I..................................................................................................................................... 6
- O que HTML ? ....................................................................................................................... 6
- Requisitos para o desenvolvimento de uma pgina web ....................................................... 6
- O que so tags HTML ? ............................................................................................................ 6
1.1 Iniciando um documento .................................................................................................. 7
1.2 Iniciando nosso primeiro exemplo .................................................................................... 7
1.3 Trabalhando com textos ............................................................................................... 9
1.3.1 Ttulos e subttulos .................................................................................................... 9
1.3.2 Estilos em texto ....................................................................................................... 10
1.3.3 Fontes ...................................................................................................................... 12
1.4 Posso usar vrias tags simultaneamente? .................................................................. 13
2 Mais tags................................................................................................................................ 13
3 Listas .................................................................................................................................. 14
3.1 Criando Listas ordenadas ............................................................................................... 14
3.2 Listas no ordenadas ...................................................................................................... 15
4 Atributos ............................................................................................................................ 16
5 Imagens ............................................................................................................................. 16
6 Links ................................................................................................................................... 17
6.1 Links para o mesmo diretrio ......................................................................................... 18
7 Tabelas ............................................................................................................................... 19
8 Mais Tabelas ..................................................................................................................... 21
9 Formulrios ....................................................................................................................... 22
9.1 Construindo formulrios com o form ............................................................................. 23
9.2 Atributos para form ........................................................................................................ 23
9.2.1 Get ............................................................................................................................... 23
9.2.2 Post .............................................................................................................................. 23
9.2.3 Input ............................................................................................................................ 23
9.2.3.1 Tipos de elementos TYPE ......................................................................................... 24
9.2.3.1.1 TYPE Radio ............................................................................................................. 24
9.2.3.1.2 TYPE Password ...................................................................................................... 24
9.2.3.1.3 TYPE Checkbox ...................................................................................................... 24
9.2.3.1.4 TYPE Submit........................................................................................................... 25
9.2.3.1.5 TYPE Reset ............................................................................................................. 25
9.2.4 Textarea ....................................................................................................................... 25
9.2.5 Select ........................................................................................................................... 25
10 Webstandards e validao .............................................................................................. 26
MDULO II.................................................................................................................................. 28
- O que CSS ?......................................................................................................................... 28
11 O que mais posso fazer com Css?.................................................................................... 30
11.1 Propriedade Float e Position ........................................................................................ 30
12 Como funciona as CSS ..................................................................................................... 31
12.1 A sintaxe bsica das Css................................................................................................ 32
12.2 Aplicando CSS a um documento HTML ........................................................................ 32
13 Cores e fundos ................................................................................................................. 34
13.1 A propriedade background-color ............................................................................... 35
13.2 Imagens de fundo [background-image] ....................................................................... 35
13.3 Imagem de fundo repetida [background-repeat] ........................................................ 36
13.4 Image de fundo fixa [background-attachment] ........................................................... 36
13.5 Posio da imagem de fundo [background-position] .................................................. 37
13.6 Compilando [background] ............................................................................................ 38
14 Fontes .............................................................................................................................. 39
14.1 Familia de fontes [ font-family ] ................................................................................... 39
14.2 Estilo da fonte [ font-style ] .......................................................................................... 40
14.3 Fonte variante [ font-variant ] ...................................................................................... 40
14.4 Peso da fonte [ font-weight ] ....................................................................................... 40
14.5 Tamanho da fonte [ font-size ] ..................................................................................... 41
14.6 Compilando [ font ] ...................................................................................................... 41
15 Textos .............................................................................................................................. 42
15.1 Indentao de texto [ text-indent ] .............................................................................. 42
15.2 Alinhamento de textos [ text-align ]............................................................................. 42
15.3 Decorao de textos [ text-decoration ] ...................................................................... 43
15.4 Espao entre letras [ letter-spacing ] ........................................................................... 43
15.5 Transformao de textos [ text-transform ] ................................................................ 44
16 Links ................................................................................................................................. 44
16.1 O que pseudo-classe? ................................................................................................ 45
17 - Identificando e agrupando elementos ( classes e ids ) .................................................... 47
17.1 Identificando um elemento com uso de id .................................................................. 48
18 Agrupando elementos (span e div) ................................................................................. 50
18.1 - Agrupando com <span> ............................................................................................... 50
18.2 Agrupando com <div> .................................................................................................. 51
19 Margin e Padding ............................................................................................................ 52
19.1 Definindo margin de um elemento .............................................................................. 52
19.2 Definindo padding de um element .............................................................................. 53
20 Bordas .............................................................................................................................. 53
20.1 A espessura das bordas [ border-width ] ..................................................................... 54
20.2 As cores das bordas [ border-color ] ............................................................................ 54
20.3 Tipos de bordas [ border-style ] ................................................................................... 54
20.4 Compilando [ border ] .................................................................................................. 56
21 Altura e largura ................................................................................................................ 56
21.1 Atribuindo largura [ width ] .......................................................................................... 57
21.2 Atribuindo altura [ height ] ........................................................................................... 57
22 Flutuando elementos ( floats ) ........................................................................................ 57
22.1 A propriedade clear ...................................................................................................... 59
23 Posicionando elementos ................................................................................................. 59
23.1 O principio de posicionamento CSS ............................................................................. 59
23.2 Posicionamento absoluto ............................................................................................. 61
23.3 Posicionamento relativo ............................................................................................... 61
24 Usando z-index ( Layers ) ................................................................................................. 62
25 Introduo ao XHTML ...................................................................................................... 64
26 O que DOC TYPE?.......................................................................................................... 64
27 Feche todas as tags ......................................................................................................... 65

TERMOS DE RESPONSABILIDADE E AVISOS LEGAIS
Todos os direitos so reservados. Nenhuma parte desta apostila
pode ser reproduzida ou transmitida livremente de alguma forma,
sem o consentimento prvio dos seus autores. Se por ventura tiver
interessado na publicao de uma anlise ao livro, entre em
contato atravs do site http://www.wlconsultoria.net.

O autor deste livro no se responsabiliza direta ou indiretamente
pela utilizao de qualquer um dos exerccios ou informaes nela
contidos. Estes exerccios e informaes so baseados em
experincias pessoais e profissionais deste autor. O objetivo desta
apostila o de ensinar todos os passos e mtodos de iniciao no
mercado de criao de sites e portais, com o objetivo de o tornar
apto a desenvolver templates e estruturar diagramas de sites, sem
que na realidade se possa comprometer com esse resultado.

recomendado que o utilizador desta apostila siga tambm as
vdeo-aulas do curso e que aproveite os exemplos mostrados para
um melhor entendimento do assunto.

No final do curso o aluno desenvolver um projeto de criao de
um template com as ferramentas que aprendeu no decorrer do
mesmo, obtendo assim o certificado equivalente ao conhecimento
adquirido.

INTRODUO

A educao tem razes amargas, mas os seus frutos so doces.
-Aristteles

Boas vindas!

Gostaria primeiramente de dar lhe os parabns por ter adquirido o nosso curso de
HTML e CSS, tenho certeza que no se arrepender do investimento feito.
Espero que aproveitem todo o contedo do curso, e que, alm disso, possam aprender
ou aumentar seus conhecimentos na rea de web designer. Atravs desse curso vocs
estaro aptos a criar uma base slida de construo de websites e acima de tudo dar o
primeiro passo nessa longa caminhada que o aprendizado na internet, aproveitem
bastante e qualquer duvida entre em contato comigo atravs deste e-mail
wilkerlancelot@hotmail.com que eu estarei os ajudando nas suas possveis dvidas.
No um bicho de sete cabeas

Bem como o titulo expressa o HTML e o prprio CSS no so bicho de sete cabeas
como muitos acham, pelo contrrio so fceis de aprender e com o tempo se torna at
divertido e confortante escrever HTML. No comeo pode parecer difcil e ao mesmo
tempo chato codificar HTML, mas te garanto por experincia prpria que quando se
acostuma algo natural, voc escreve e nem percebe que sua mente j sabe todos os
comandos. Ento mais uma vez digo para vocs aproveitarem o contedo aqui
disponibilizado e as vdeo aulas, que tenho certeza que voc aluno sair daqui
satisfeito com o conhecimento adquirido.
Mdulos

O nosso curso de HTML estar dividido em dois mdulos, onde o primeiro mdulo ser
constitudo por o HTML em si, aprenderemos os conceitos da linguagem, as tags, e
varias outras coisas importantes. No segundo mdulo aprenderemos os conceitos das
folhas de estilo, ou seja, os CSS.

MDULO I

- O que HTML ?

O HTML , a linguagem me da internet. Apesar de ser uma linguagem limitada, o HTML
essencial no inicio do aprendizado para qualquer profissional que queira trabalhar com
internet. O HTML foi ficando obsoleto, por ser uma linguagem limitada, ou seja no se pode
trabalhar com grficos e animaes por exemplo, apenas texto e imagens estticas ou GIfs
animados sem muita complexidade. Decifrando mais a fundo o HTML, ns temos em sua sigla
o significado para Hyper Text Markup Language, ou seja Linguagem de marcao de
hipertexto que nada mais do que marcaes no documento que viabiliza a criao
da pgina de internet. Hoje em dia o HTML trabalha em conjunto com diversas
linguagens para obter resultados mais satisfatrios, como por exemplo Java script
para animaes e php para dinamismo em suas pginas.

- Requisitos para o desenvolvimento de uma pgina web

Conhecer a linguagem HTML para escrever o cdigo fonte de sua pgina;
Editor de texto para gerar o seu cdigo fonte (bloco de notas, notepad ++++,
dremweaver, entre outros);
Um navegador de internet (browser) para visualizar as suas pginas (Internet
Explorer, Firefox. Google chrome);

- O que so tags HTML ?

Os comandos HTML so chamados de TAGs, compreendem de marcas padres
que so utilizadas para fazer indicaes a um browser.
Assim como em outras linguagens, os comandos tm uma sintaxe prpria, e
seguem algumas regras:
As Tags sempre aparecem entre sinais de maior que ( > ) e menor que ( < );
Geralmente so utilizadas aos pares, sendo que a Tag de finalizao de um
comando qualquer finalizada com a precedncia de uma barra ( / );

Exemplo:
TAG nico:
<br>
TAG duplo:
<p>xxxx</p>
1.1 Iniciando um documento

Todo o documento HTML fica contido entre os TAGS: <HTML> e </HTML>.
Uma pgina HTML possui trs partes bsicas: estrutura principal, um cabealho e um
corpo de pgina.

Estrutura bsica.
<HTML> => Tag de abertura do HTML.
<HEAD> => Cabealho da pgina. Onde ficam as informaes adicionais.
</HEAD> => Tag de fechamento do cabealho.
<TITLE> => a Tag de abertura do titulo da janela.
</TITLE> => Tag de fechamento do titulo da janela.
<BODY> => Corpo da pgina. Aqui ficar a parte principal do seu site.
</BODY> => Tag de fechamento do corpo da pgina.
</HTML> => Tag de fechamento do html.

1.2 Iniciando nosso primeiro exemplo

O nosso primeiro exemplo gira em torno de colocar uma cor de fundo no nosso documento
HTML atravs da Tag BGCOLOR, e uma imagem tambm de fundo com a tag
BACKGROUND. Iniciaremos nossa primeira pgina editando o cdigo no bloco
de notas.
Siga os passos abaixo:
1. Crie uma pasta chamada CursoHtml na sua rea de trabalho;
2. Abra o bloco de notas e crie um novo documento de texto;
3. Salve o arquivo como index.html dentro da pasta CursoHtml;
4. Clique no arquivo salvo e ver no navegador que ele estar em branco;
5. Copie e cole o trecho de cdigo abaixo no seu arquivo HTML, depois atualize a pgina
onde est sendo mostrado o arquivo index.html.

Exemplo com cor de fundo na pgina:
<html>
<head>
<title>
Curso de HTML
</title>
</head>
<body bgcolor="green" >
Corpo da pgina HTML com cor de fundo.
</body>
</html>

Agora substitua o cdigo acima pelo exemplo abaixo seguindo o passo 5.

Exemplo com imagem de fundo na pgina:
<html>
<head>
<title>
Curso de HTML
</title>
</head>
<body background="fundo.gif" >
Corpo da pgina HTML com imagem de fundo.
</body>
</html>

1.3 Trabalhando com textos

No corpo do documento onde estar localizado o ttulo e subttulos, texto,
imagens, ligaes com outras pginas, etc. Nesta seo veremos como trabalhar com
os textos.

1.3.1 Ttulos e subttulos

Para demarcar ttulos e subttulos, use as Tags de HEADER ( H1 a H6).
Veja alguns exemplos :
<h1>Aqui ficar o ttulo </h1>
*O tamanho do ttulo pode ser definido por suas

tags de h1 a h6, sendo que quanto maior o valor
da tag menor ser o tamanho do texto.

1.3.2 Estilos em texto

Existem alguns tipos de estilos no HTML que podemos aplicar aos nossos textos, dos
quais se destacam:
Texto em negrito =>
Para colocarmos nossos textos em negrito devemos adiciona-los entre as tags <b> e </b>

<b> Este texto deve ser negrito </b>

Texto em itlico =>
Para colocarmos nossos textos em itlico devemos adiciona-los entre as tags <i> e </i>

<i> Este texto deve ser itlico </i>

Texto sublinhado => OBS Nem todos os browsers o reconhecem.
Para deixarmos nossos textos sublinhados devemos coloca-los entre as tags <u> e </u>
<u> Este texto deve ser sublinhado </u>

Para inserir pargrafos em nosso documento HTML fazemos uso da tag <p> e </p>
Exemplo :
Crie um novo arquivo com o nome Exemplo_04.html e insira o cdigo abaixo:
<html>
<body>
<title>Curso de HTML</title>
<B>Estilo negrito.</B>
<br>
<I>Estilo itlico.</I>
<br>
<U>estilo sublinhado (nem todos os browser o
reconhecem)</U>
<br>
<p align="center"> Este um exemplo do primeiro
pargrafo centralizado.
<p> Este um exemplo do segundo pargrafo.
</body>
</html>

1.3.3 Fontes

Para inserir em sua pgina um texto com fontes de tamanhos, cores e tipos
diferentes utilizamos a TAG <FONT> ... </FONT>.

Sintaxe do comando:

<FONT size=n face=nome color=cor>
TEXTO FORMATADO AQUI
</FONT>

Onde:

SIZE=n => n varia de 1 a 7 e 3 o valor padro da maioria dos navegadores;
FACE=nome => nome da fonte a ser utilizada (Arial, Tahome, etc);
COR=cor => Cor da fonte definida em hexadecimal, ou atravs de um nome
pr-definido de cores.

1.4 Posso usar vrias tags simultaneamente?

Sim voc pode usar quantas tags quiser desde que as aninhe corretamente. Veja o
exemplo abaixo:
Para escrever um texto em negrito e itlico faa como mostrado a seguir:

<b><i> Este texto deve ser negrito e itlico </i></b>

E no assim:
<b><i> Este texto deve ser negrito e itlico </b></i>

Observe que no primeiro exemplo a primeira tag de abertura <b> corresponde a
ltima tag de fechamento </b>, e o aninhamento est certo. Isto evita confuso para
quem escreve o cdigo e para o navegador que l o cdigo. As ltimas tags a
serem abertas tem que ser as primeiras a serem fechadas, e as primeiras a
serem abertas ter de serem as ltimas a serem fechadas.
2 Mais tags

Existem tags que so abertas e fechadas em uma nica tag. Estas tags so
comandos isolados, ou seja, no contm nenhum texto dentro delas para poder
funcionar. Um exemplo a tag <br /> que serve para criar uma quebra de linha:

Um texto <br /> e mais texto em nova linha

Outra tag de comando <hr /> que serve para definir uma linha horizontal ("hr" vem
"horizontal rule" - rgua horizontal)

3 Listas

3.1 Criando Listas ordenadas

Listas ordenadas so tambm denominadas listas numeradas, pois, quando um
navegador encontra uma TAG, iniciando uma lista ordenada, ele passa a mostrar
cada item utilizando nmeros, como 1, 2, 3, e assim sucessivamente.
Listas ordenadas so iniciadas pela TAG <OL>.
Cada item utiliza a TAG <LI>.
Finaliza com, </OL>.

Sintaxe:

<OL TYPE=formato START=n>
<LI> Tpico 1 </LI>
<LI> Tpico 2 </LI>
<LI> Tpico n </LI>
</OL>

Onde:

<OL> => Incio da lista ordenada;
TYPE =formato => o formato da numerao pode ser:
o 1: Lista numrica (no necessrio ser definido);
o A: Lista alfabtica com letras maisculas;
o a: Lista alfabtica com letras minsculas;
o L: Lista numrica com nmeros romanos maisculos;
o L: Lista numrica com nmeros romanos minsculos;
START =n => o valor inicial de uma lista numerada;
<LI> => Tpicos da lista;
</OL> => Fim da lista ordenada.

3.2 Listas no ordenadas

Listas no ordenadas so muito parecidas com as ordenadas. A nica diferena
o fato de elas no definirem explicitamente uma ordem, como no caso das
numeradas. Eles so formados por smbolos, que podem ser uma bola, quadrado, e
uma bola vazia. Elas so iniciadas com a TAG <UL> e so respectivamente
terminadas com </UL>. E seus elementos so que nem as numeradas: com <LI>.
Sintaxe:
<UL TYPE=formato>
<LI> Tpico 1
<LI> Tpico 2
<LI> Tpico 3
</UL>
Onde:

<UL> => Incio da lista no ordenada;
TYPE =formato => o formato do marcador pode ser:
o disc: o marcador um ponto (padro utilizado pelos navegadores,
no precisa indicar);
o square: o marcador um quadrado;
o circle: o marcador um ponto;
<LI> => Tpicos da lista;
</UL> => Fim da lista ordenada.

4 Atributos

Como voc deve est lembrando, uma tag um comando para o navegador (por
exemplo, <br /> um comando para mudar de linha). Em algumas tags voc pode ser
mais especifico, acrescentando na tag, informaes adicionais de comando. Isto feito
atravs dos atributos.

<h3 style="background-color: #ff0000;"> HTML (Hyper Text Markup Language) </h3>

Atributos so escritos dentro da tag, seguidos por um sinal de igual e depois entre
aspas so declaradas as informaes do atributo. As informaes quando mais de uma,
devem ser separadas por ponto e vrgula, tudo conforme mostrado no exemplo acima.
Adiante voltaremos a este assunto.
Como isto?
Existem vrios atributos. O primeiro que voc aprender o atributo style. Com o
atributo style voc pode adicionar estilizao e layout ao seu website. Mais veremos
isso mais a fundo no modulo II, pois trataremos e aprenderemos os css.
Atributos podem ser aplicados maioria das tags.
Voc normalmente usar atributos com mais frequncia em algumas tags, tais como a
tag body e raramente usar em outras, como, por exemplo, a tag br que um
comando para pular de linha e no precisa de nenhuma informao adicional.
Assim como existem muitas tags, tambm existem muitos atributos. Alguns atributos
so empregados em tags especificas enquanto outros servem para vrias tags. E vice-
versa: algumas tags podem conter somente um tipo de atributo, enquanto outras
podem conter vrios tipos.
Isto pode parecer um pouco confuso, mas medida que voc for praticando vai
constatar que tudo fcil e lgico, bem como vai verificar as inmeras possibilidades
que os atributos oferecem.
5 Imagens

Para inserir uma imagem em uma pgina web utilizamos a tag <img src> e seus
atributos. Os formatos mais usados so o GIF eo JPG, ambos com compactao de
pixels.
Sintaxe:
<IMG SRC= endereo da imagem WIDTH= n HEIGHT= n ALIGN= posio ALT=
Texto />
Atributos:
WIDTH: Define a largura da imagem, o que pode ser feito em pixels ou em
percentual da tela;
HEIGHT: Define a altura da imagem, o que pode ser feito em pixels ou em
percentual;
ALIGN: Alinhamento da imagem pode ser LEFT, RIGHT e CENTER, ou seja,
esquerda, direita e ao centro, respectivamente;
ALT: texto que ir aparecer ao passar o mouse sobre a imagem ou texto que
surgir caso a imagem no possa ser visualizada;
BORDER: Especificao da largura da borda da imagem. Valor em pixel;
SRC: Caminho da imagem obrigatrio.

6 Links

O principal poder do HTML vem da capacidade de interligar partes de um texto,
imagens a outros documentos.
A Interligao entre documentos no se restringe somente s ligaes com outras
pginas. Em pginas muito longas onde um assunto tem vrios tpicos, podemos
utilizar ndices onde os links possuem a funo de interligar os tpicos de um texto e
que com apenas um clique em um dos tpicos do ndice, o item exibido.
6.1 Links para o mesmo diretrio

Voc s precisa especificar o nome do arquivo que ser chamado e a sua extenso.
Sintaxe:
<A HREF = nomedoarquivo.extenso > Texto ou imagem </A>
O elemento a refere-se a "anchor" - ncora . O atributo href abreviao para
"hypertext reference" - referncia a hypertexto - e especifica o destino do link - que
Normalmente um endereo na Internet ou um arquivo.
No exemplo acima o atributo href tem o valor "http://www.html.net", que o.
Endereo completo do site HTML.net e chamado de URL (Uniform Resource
Locator). Notar que "http://" deve sempre ser includo nas URLs. A frase "Aqui entra
O nome do link" o texto mostrado no navegador como link. Lembre-se de fechar a
tag com um </a>.
Onde:
A: Abertura da tag de link;
HREF= nome doarquivo.extenso: deve ser informado o nome completo do
arquivo que ser acessado;
Texto ou imagem: que servir como link;
</A>: encerra a TAG de link.

Exemplo:
Crie um arquivo chamado menu.html e insira o cdigo abaixo e depois verifique em
seu navegador.
<html>
<head>
<title>
Curso de HTML
</title>
</head>
<body >
<h1><font face="Arial" color="orange">MENU</font></h1>
<HR width="100%" align="left" size="2" color="silver"
>
<A HREF = "#">Estilo de Texto</A>
<br>
<A HREF = "#">Ttulos e Subttulos</A>
<br>
<A HREF = "#">LinhaHorizontal</A>
<br>
<A HREF = "#">Fontes</A>
<br>
<A HREF = "#">Imagem</A>
</body>
</html>

7 Tabelas

Tabelas so usadas para apresentar dados tabulares, isto , informao que deve ser
apresentada em linhas e colunas, de forma lgica e organizada.
difcil?
Criar tabelas em HTML pode parecer complicado, mas quando voc acompanhar passo
a passo a explicao ver que bem fcil.
<table>
<tr>
<td>Clula 1</td>
<td>Clula 2</td>
</tr>
<tr>
<td>Clula 3</td>
<td>Clula 4</td>
</tr>
</table>

Qual diferena entre as tags < tr > e < td > ?
Este com certeza o cdigo mais complicado at agora. Vamos analisar isto por partes
e explicar as diferentes tags:
trs tags bsicas so usadas para inserir tabelas:
< table > => Comea e termina uma tabela.
< tr > => Significa table row linha de tabela comea e termina e uma linha
horizontal da tabela.
< td > significa table data dados da tabela. Comea e termina cada clula
contida nas linhas da tabela.

Eis o acontece no exemplo dado acima: a tabela comea com <table>, segue-se uma
<tr>, que indica o incio de uma nova linha. Duas clulas so ento inseridas na linha:
<td>Clula 1</td> e <td>Clula 2</td>. A linha termina com </tr> e uma nova linha
<tr> comea imediatamente a seguir. A nova linha tambm contm duas clulas. A
tabela termina com </table>.

Clula um e Clula dois formam uma linha. Clula um e Clula trs formam uma
coluna.
No exemplo acima a tabela tem duas linhas e duas colunas. Uma tabela pode conter
um nmero ilimitado de linhas e colunas.

Outro exemplo:

<table>
<tr>
<td>Clula 1</td>
<td>Clula 2</td>
<td>Clula 3</td>
<td>Clula 4</td>
</tr>
<tr>
<td>Clula 5</td>
<td>Clula 6</td>
<td>Clula 7</td>
<td>Clula 8</td>
</tr>
<tr>
<td>Clula 9</td>
<td>Clula 10</td>
<td>Clula 11</td>
<td>Clula 12</td>
</tr>
</table>

Existem atributos?

Claro! Por exemplo, o atributo border que usado para definir a espessura de uma
borda em volta da tabela.
A borda da tabela especificada em pixels.
Existem mais atributos?

Existe uma grande quantidade de atributos para tabelas. A seguir mais dois:

align: define o alinhamento horizontal do contedo da tabela, de uma linha ou
de uma clula. Por exemplo, left, centre ou right ( esquerda, no centro ou
direita).

valign: define o alinhamento vertical do contedo de uma clula. Por exemplo,
top, middle ou bottom (em cima, no meio ou em baixo).

O que posso inserir em tabelas?

Teoricamente voc pode inserir qualquer coisa em uma tabela: texto, links e
imagens... MAS, tabelas tem por objetivo apresentar dados tabulares (isto ,
dados que por sua natureza devam ser apresentados em linhas e colunas) ento
abstenha-se de colocar coisas dentro de tabela simplesmente porque voc deseja que
elas estejam prximas umas s outras.

Nos primrdios da Internet - isto , h poucos anos atrs - tabelas eram usadas como
ferramenta para construir layout. Se voc quer controlar a apresentao de textos e
imagens existe uma maneira bem mais racional (dica: CSS ou tableless). Veremos isso
mais a frente em CSS e tableless.

8 Mais Tabelas

Nesta segunda etapa vamos dar continuidade e aprender mais um pouco sobre
tabelas.
O que mais existe?
Os dois atributos colspan e rowspan so usados para criar tabelas singulares.
Colspan a abreviao para colunn span. Colspan usada na tag < td > para indicar
quantas colunas estaro contidas em uma clula.
<table border="1">
<tr>
<td colspan="3">Clula 1</td>
</tr>
<tr>
<td>Clula 2</td>
<td>Clula 3</td>
<td>Clula 4</td>
</tr>
</table>

E o rowspan?
Como voc j deve ter concludo, rowspan especifica quantas linhas estaro contidas
em uma clula:
<table border="1">
<tr>
<td rowspan="3">Clula 1</td>
<td>Clula 2</td>
</tr>
<tr>
<td>Clula 3</td>
</tr>
<tr>
<td>Clula 4</td>
</tr>
</table>

9 Formulrios

A linguagem HTML tambm permite que o cliente (navegador) interaja com o
servidor, preenchendo campos, clicando em botes e passando informaes.

O elemento FORM, da linguagem HTML, justamente o responsvel por tal
interao. Ele prov uma maneira agradvel e familiar para coletar dados do
usurio atravs da criao de formulrios com janelas de entrada de textos, botes,
etc.

9.1 Construindo formulrios com o form

Para fazer formulrio, voc tem que colocar as TAGs <FORM> </FORM>. Todos os
outros comandos, devem ficar dentro dessas TAGs. Ok?!

9.2 Atributos para form

O elemento FORM pode conter dois atributos que determinaram para onde ser
mandada a entrada do FORM. Vejam como eles so:

9.2.1 Get

Os dados entrados fazem parte do URL associado consulta enviado para o
servidor e suporta at 128 caracteres.
9.2.2 Post

o mais utilizado, pois envia cada informao de forma separada da URL. Com este
mtodo POST os dados entrados fazem parte do corpo da mensagem enviada para o
servidor e transfere grande quantidade de dados.

9.2.3 Input

A TAG <INPUT> especifica uma variedade de campos editveis dentro de um
formulrio. Ele pode receber diversos atributos que definem o tipo de mecanismo de
entrada (botes, janelas de texto, etc.), o nome da varivel associada com o dado da
entrada, o alinhamento e o campo do valor mostrado. O atributo mais importante do
INPUT o NAME. Ele associa o valor da entrada do elemento. Por exemplo, quando
voc for receber os dados, j, processados, ir vir o name: =resposta dada pelo
visitante. Outro atributo importante o TYPE. Ele determina o campo de entradas de
dados. Veja como se usa este atributo:

<INPUT TYPE="TEXT" NAME="nome">

9.2.3.1 Tipos de elementos TYPE

Voc pode fazer vrias coisas com o elemento TYPE. Por exemplo, para ser um campo
de senha, que quando digitado, aparea o smbolo "*", ao invs das letras, voc deve
escrever o seguinte:

<INPUT TYPE"PASSWORD" NAME="nome" SIZE=8>

9.2.3.1.1 TYPE Radio

Quando o usurio deve escolher uma resposta em uma nica alternativa,
de um conjunto, utiliza-se o RADIO Buttons. Um exemplo tpico do uso de
tais botes cuja resposta pode ser SIM ou NO. preciso que todos os
rdios buttons de um mesmo grupo, ou seja, referentes mesma pergunta,
tenham o mesmo atributo NAME. Para esse tipo de entrada, os atributos
NAME e VALUE, so necessrios. Veja a seguir:

<INPUT TYPE="RADIO" NAME="voc gostou dessa home page?"
VALUE="sim">sim<p>
<INPUT TYPE="RADIO" NAME="voc gostou dessa home page?"
VALUE="nao">no<p>

9.2.3.1.2 TYPE Password

Este comando serve para fazer um campo de senhas! Quando a pessoa
digitar, aparecer o sinal de "*"! O comando :
<INPUT TYPE="PASSWORD" NAME="SENHA" MAXLENGHT=6>

9.2.3.1.3 TYPE Checkbox

Esse comando vlido quando apenas uma resposta, esperada. Mas
nem sempre esta a situao...O tipo CHECKBOX prov outros botes
atravs dos quais mais de uma alternativa, pode ser escolhida.
<INPUT TYPE="CHECKBOX" NAME="netscape" VALUE="net">
Netscape<p>
<INPUT TYPE="CHECKBOX" NAME="Explorer" VALUE="exp">
Internet Explorer<p>
<INPUT TYPE="CHECKBOX" NAME="Mosaic" VALUE="mos">
Mosaic<P>
<INPUT TYPE="CHECKBOX" NAME="Hot Java" VALUE="hot"> Hot
Java<P>

9.2.3.1.4 TYPE Submit

Esse o boto que submete os dados do formulrio quando pressionados,
ou seja, possibilitam, o envio, dos dados para o script que vai trat-los. Veja
como se adiciona o boto:
<INPUT TYPE="SUBMIT" VALUE="enviar">

9.2.3.1.5 TYPE Reset

No caso dos botes RESET, quando o boto clicado, ele
automaticamente limpa todos os campos j preenchidos no formulrio,
voltando situao inicial.
<INPUT TYPE="RESET" VALUE="Limpar">

9.2.4 Textarea

Para se limitar o tamanho do campo mostrado na tela, faz-se o uso dos atributos COLS
e ROWS que especificam, respectivamente, o nmero de colunas e linhas que se
deseja mostrar para o usurio. O atributo NAME obrigatrio, e especifica o nome da
varivel, que ser associada entrada do cliente (navegador). O atributo VALUE no
aceito nesse elemento, mas voc pode colocar j um texto da seguinte maneira. Veja
como ele colocado:

<TEXTAREA NAME="nome" COLS=20 ROWS=3>texto</TEXTAREA>

9.2.5 Select

Permite definir uma lista de opes, com barra de rolagem ou fixa na tela do
navegador.
uma TAG que deve ser iniciada com <SELECT> e finalizada com </SELECT>.
<SELECT MULTIPLE NAME=nomeDaLista>
<OPTION SELECTED VALUE=valor de retorno>
Valor Visualizado
<OPTION VALUE=Valor de retorno>
Valor Visualizado 2
</SELECT>

10 Webstandards e validao

Nesta lio voc aprender mais alguns conceitos tericos do HTML.

O que mais h para conhecer sobre HTML?

HTML pode ser escrito de vrias maneiras. O navegador est apto a ler HTML escrito
de
vrias maneiras. Podemos dizer que HTML tem muitos dialetos. Esta a razo
por que alguns websites so apresentados de formas diversas em diferentes
navegadores.

Desde o aparecimento da Internet tem sido feitas vrias tentativas para se normatizar
o
HTML notadamente atravs do World Wide Web Consortium (W3C) fundado por
Tim Berners-Lee (o grande inventor do HTML).

No passado - quando voc tinha que comprar um navegador - Netscape dominava o
mercado de navegadores. quela poca as normas para o HTML estavam nas suas
verses 2.0 e 3.2. Mas pelo fato de dominar 90% do mercado a Netscape no teria, e
no teve que se preocupar muito com normas. Pelo contrrio, a Netscape inventava
seus prprios elementos de marcao que no funcionavam em outros navegadores.
Por muitos anos a Microsoft ignorou completamente a Internet. Em determinado
momento resolveu competir com a Netscape e lanou seu navegador prprio. A
primeira verso do navegador da Microsoft, o Internet Explorer, no era melhor do
que o Netscape no suporte s normas do HTML. Mas, a Microsoft resolveu distribuir
seu navegador gratuitamente junto com o Sistema Operacional Windows e o Internet
Explorer em pouco tempo tornou-se o navegador mais usado e mais popular.

A partir das verses 4 e 5 a Microsoft anunciava que seus navegadores ofereciam cada
vez maior suporte s normas HTML do W3C. A Netscape no se movimentou para
atualizar seu navegador e continuou a colocar no mercado a velha e desatualizada
verso 4.
Quando voc codifica HTML de acordo com as normas do W3C, voc est
construindo um website para ser visualizado em todos os navegadores, no
s agora mas tambm no futuro. E felizmente, tudo o que voc aprendeu neste
tutorial est de acordo com a mais nova verso do HTML, que o XHTML.

Devido existncia de diferentes tipos de HTML, voc precisa informar ao navegador
qual o "dialeto" do HTML e no seu caso voc aprendeu XHTML. Para informar ao
navegador, voc usa o Document Type Definition. O Document Type Definition deve
ser escrito sempre no topo do documento:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br">
<head>
<title>Ttulo</title>
</head>
<body>
<p>texto texto</p>
</body>
</html>

Alm do Document Type Definition (escrito na primeira linha no exemplo acima), que
informa ao navegador que voc est codificando XHTML, voc precisa ainda adicionar
informao extra na tag html, usando os atributos xmlns e lang.

xmlns abreviao de "XML-Name-Space" e deve ter sempre o valor
http://www.w3.org/1999/xhtml. Isto tudo o que voc precisa saber.

No atributo lang voc especfica em que lngua (aqui trata-se de linguagem humana) o
documento escrito. As abreviaturas para as lnguas existentes no mundo todo, esto
nas ISO 639 standard . No exemplo acima a lngua definida no atributo o portugus
do Brasil ("pt-br").
Validao? Por que deveria eu fazer isto?

O DTD importante tambm para a validao da pgina.
Insira o DTD nas suas pginas e poder verificar erros no seu HTML, usando o
validador gratuito do W3C.

Para testar o validador faa o seguinte: crie uma pgina e publique na Internet. A
seguir entre em validator.w3.org e l digite o endereo (a URL) da sua pgina,
depois clique no boto validar. Se seu HTML estiver correto, vai aparecer uma
mensagem de congratulaes. Se no, ser apresentada uma lista de erros,
informando o qu est errado e onde. Cometa alguns erros propositais no seu cdigo
para verificar o que acontece.

O validador no til somente no encontro de erros. Alguns navegadores tentam
interpretar os erros cometidos pelos desenvolvedores e consertar o cdigo mostrando
a pgina corretamente. Em navegadores assim voc nunca encontrar erros no prprio
navegador. J outros navegadores no aceitam o erro e apresentam a pgina
arruinada ou mesmo nem apresentam. O validador ento ajuda voc a encontrar erros
que voc no tenha nem ideia de que existiam

Sempre valide suas pginas, para ter certeza que elas sero mostradas corretamente
em todos os navegadores.

MDULO II

- O que CSS ?

CSS significa Cascading Style Sheetes (Folhas de estilo em Cascata). Basicamente o Css
usado para alterar cores, fontes e todo o estilo da sua pgina sem que haja a
modificao do arquivo html.
Por exemplo, em vez de usar o marcador <font> para especificar o tamanho, a cor e a
fonte do texto, podemos usar os Css.
Exemplo:
<style type="text/css">

</style>

No se preocupem quanto a esses comandos saberemos em pouco tempo como us-
los sem complicaes.
Vamos ter uma breve introduo ao Css para voc ter uma ideia como o Css prtico.
Podemos dizer que o Css a melhor metade do Html. Codificando, no h melhor
parceria: Html responsvel pelo trabalho pesado (a estrutura), enquanto o Css d o
toque de elegncia (layout).
CSS pode ser adicionado com uso do atributo style. Por exemplo, voc pode
definir o tipo e o tamanho da fonte em um pargrafo:

<p style= font-size: 20px; >Este pargrafo em tamanho de fonte igual a
20px</p>

<p style="font-family:courier;">Este pargrafo em fonte Courier</p>

<p style="font-size:16px; font-family:cambria">Este pargrafo em fonte
Cambria e tamanho 20px</p>

Ser renderizado no navegador assim:
Este pargrafo em tamanho de fonte igual a 20px
Este pargrafo em fonte Courier
Este pargrafo em fonte Cambria e tamanho 16px
No exemplo acima usamos o atributo style para definir o tipo de fonte usado (com a
(propriedade font-family) e o tamanho da fonte (com a propriedade font-size). Notar
que no ltimo pargrafo do exemplo definimos tanto o tipo como o tamanho da fonte
separados por um ponto e vrgula.
Dessa maneira vocs devem est a pensar: Poxa mais dar muito trabalho estilizar
elemento por elemento individualmente.

Mais em contrapartida eu digo que uma das funcionalidades mais inteligentes das
Css a possibilidade de controlar o layout de um arquivo central. Em lugar de se usar
o atributo style em cada tag , voc pode dizer ao navegador como deve ser o layout de
todos os textos em uma pgina:

<html>
<head>
<title>Minha primeira pgina CSS</title>
h1 {font-size: 30px; font-family: Arial}
h2 {font-size: 15px; font-family: courier}
p {font-size: 8px; font-family: times new roman}
</style>
</head>
<body>
<h1>Minha primeira pgina CSS</h1>
<h2>Bem vindo minha primeira pgina CSS</h2>
<p>Aqui voc ver como funciona CSS</p>
</body>
</html>

No exemplo acima inserimos as Css na seo head do documento, assim ela se aplica
pgina inteira. Para fazer isto use a tag <style type= text/css > que informa ao
navegador que voc est digitando Css.

No exemplo, todos os cabealhos da pgina sero em fonte Arial e tamanho 30px.
Todos os subttulos sero em fonte Courier tamanho 15. E, todos os textos dos
pargrafos sero em fonte Times New Roman tamanho 8.

11 O que mais posso fazer com Css?

CSS faz muito mais do que definir tipos e tamanhos de fontes. Por exemplo, voc
pode adicionar cores e fundos. A seguir alguns exemplos para voc praticar:

<p style="color:green;">Texto verde</p>
<h1 style="background-color: blue;">Cabealho com fundo azul</h1>
<body style="background-image: url('http://www.html.net/logo.png');">

Alm de cores, tipos de fontes, etc., o Css pode ser usado para controlar a
configurao e a apresentao da pgina (margens, flutuaes, alinhamentos, larguras,
alturas, etc.) Controlando os diferentes elementos com Css voc ser capaz de criar
layouts elegantes e precisos.
11.1 Propriedade Float e Position

O elemento Float serve basicamente para estruturao do layout, ou seja posso
colocar um texto ou imagem flutuando a esquerda ou direita, possibilitando uma
melhor organizao do template.
O exemplo ilustra esse principio:

<img src="imagem.jpg" alt="imagem " style= "float:left;" />
<p> dddddddddddddddddddddddddddddd<br />
kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk<br />
kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk<br />
dddddddddddddddddddddddddddddd</p>

Ser renderizado no navegador assim:

No exemplo mostrado, um elemento (a imagem) flutua esquerda e o outro elemento
(o texto) preenche o espao deixado direita. Isso funcionaria de maneira inversa caso
a propriedade Float estivesse com o valor Right.
Com a propriedade position, voc pode posicionar um elemento em qualquer lugar da
pgina, com preciso:

<img src="bill.jpg" alt="Bill Gates"
style="position:absolute;bottom:50px;right:10px;" />

No exemplo mostrado a imagem foi posicionada a 50 pixels da borda inferior e a 10
pixels da borda da direita do navegador. Voc pode colocar em qualquer lugar na
pgina.
Voc no aprende CSS em 10 minutos. preciso se dedicar um tempo para estudar.
Mas no nada difcil, vamos ver nas prximas pginas o que voc precisa saber
sobre as CSS.
12 Como funciona as CSS

Nesta lio voc aprender a desenvolver sua primeira folha de estilos. Voc ver o
bsico sobre o modelo CSS e que cdigo necessrio para usar CSS em um documento
HTML.
Muitas das propriedades usadas em Cascading Style Sheets (CSS) so semelhantes
quelas do HTML. Se voc est acostumado a usar HTML para layout ir reconhecer
muitos dos cdigos que usaremos.

12.1 A sintaxe bsica das Css

Suponha que desejamos uma cor de fundo vermelha para a pgina web:
Usando HTML podemos fazer assim:
<body bgcolor= #FF0000 >
Com CSS o mesmo resultado ser obtido assim:
body {background-color:#FF0000;}
Como voc pode notar os cdigos HTML e CSS so mais ou menos parecidos. O
exemplo acima serve tambm para demonstrar o fundamento do modelo CSS:
SELETOR {PROPRIEADE:VALOR}
SELETOR: a tag que ser aplicada a propriedade. Por exemplo: body
PROPRIEDADE: o estilo a ser atribudo, como por exemplo: a cor do fundo
VALOR: O valor da propriedade, como por exemplo, a cor do fundo em hexadecimal:
#FF0000
Mas, onde colocamos o cdigo CSS? isto que veremos a seguir.

12.2 Aplicando CSS a um documento HTML

Voc pode aplicar CSS a um documento de trs maneiras distintas. Os trs mtodos de
Aplicao esto exemplificados a seguir. Recomendo que voc foque no terceiro
mtodo, ou seja, o mtodo externo. O mtodo externo alm de ser menos confuso
para trabalhar por no estar junto com o HTML ele no ficar amostra se
algum olhar o cdigo fonte da sua pgina pelo browser, pois estar
escondido no servidor onde est hospedando o seu site.
Mtodo 01: In-Line (o atributo style)
Uma maneira de aplicar CSS pelo uso do atributo style do HTML. Tomando como
base o exemplo mostrado anteriormente a cor vermelha para o fundo da pgina pode
ser:
<html>
<head>
<title>Exemplo</title>
</head>
<body style="background-color: #FF0000;">
<p>Esta uma pgina com fundo vermelho</p>
</body>
</html>
Nesse exemplo puderam notar que o atributo foi colocado de forma In-line, ou seja,
incorporado ao HTML em si. Para tal fim temos que usar a tag Style juntamente com
sua propriedade e valor.
OBS: Essa prtica no recomendada, pois o HTML ficar sujo e embaraado,
dificultando os leitores de tela e aumentando o tempo de carregamento do seu site.
Mtodo 02: Interno (a tag style)
Uma outra maneira de aplicar CSS pelo uso da tag <style> do HTML. Como mostrado
a seguir:
<html>
<head>
<title>Exemplo</title>
body {background-color: #FF0000;}
</style>
</head>
<body>
<p>Esta uma pgina com fundo vermelho</p>
</body>
</html>
Como podem observar nesse mtodo o CSS aplicado atravs de um pequeno bloco
de texto localizado antes do fechamento da tag de cabealho (head). Esse mtodo
fornece mais organizao comparada ao mtodo anterior, porm ainda no o mais
adequado devido a est localizado no corpo do documento html, provendo assim
lentido no carregamento do seu site e dificuldade na otimizao do estilo.
Mtodo 03: Externo (link para uma folha de estilos)
O mtodo recomendado o de lincar para uma folha de estilos externa.
Uma folha de estilos externa um simples arquivo de texto com a extenso .css. Tal
como qualquer outro tipo de arquivo voc pode colocar uma folha de estilos tanto no
servidor como no disco rgido.
Vamos supor, por exemplo, que sua folha de estilos tenha sido nomeada de estilo.css
e est localizada no diretrio estilo (o que no necessrio, colocar em pasta
separada do arquivo HTML). Tal situao est mostrada a seguir:
O que voc tem a fazer criar um link no documento HTML (ndex.html) para a folha

de estilos (estilo.css). O link criado em uma simples linha de cdigo HTML como
mostrado a seguir:
<link rel= stylesheet" type= text/css" href= c:\~documentos~/estilo.css" />
Notar que o caminho para a folha de estilos indicado no atributo href.
Esta linha de cdigo deve ser inserida na seo header do documento HTML, isto ,
entre as tags <head> e </head>. Conforme mostrado abaixo:
<html>
<head>
<title>Meu documento</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
Este link informa ao navegador para usar o arquivo CSS na renderizao e
Apresentao do layout do documento HTML.

A coisa realmente inteligente disto que vrios documentos HTML podem lincar para
Uma mesma folha de estilos. Em outras palavras isto significa que um simples arquivo
Ser capaz de controlar a apresentao de muitos documentos HTML.

Esta tcnica pode economizar uma grande quantidade de trabalho. Se por exemplo,
Voc quiser trocar a cor do fundo de um site com 100 pginas, a folha de estilos evita
Que voc edite manualmente uma a uma as pginas para fazer a mudana nos 100
Documentos HTML. Usando CSS a mudana se far em uns poucos segundos trocando-
se a cor em uma folha de estilos central.

13 Cores e fundos

Voc vai aprender agora como aplicar cores de primeiro plano e cores de fundo no seu
website. Abordaremos ainda os mtodos avanados de controle e posicionamento de
Imagens de fundo.
Cor do primeiro plano: a propriedade color
A propriedade color define a cor do primeiro plano de um elemento.
Considere, por exemplo, que desejamos que todos os cabealhos de primeiro nvel no
documento sejam na cor vermelha. O elemento HTML que marca tais cabealhos o
elemento <h1>. O cdigo a seguir define todos os <h1> na cor vermelha.

h1 { color: #FF0000; }

As cores podem ser definidas pelo seu valor hexadecimal como no exemplo acima
(#FF0000), com uso do nome da cor (red) ou ainda pelo seu valor RGB (rgb (255,
0,0)).

13.1 A propriedade background-color

A propriedade background-color define a cor do fundo de um elemento.
O elemento <body> contm todo o contedo de um documento HTML. Assim, para
mudar a cor de fundo da pgina, devemos aplicar a propriedade background-color ao
elemento <body>.
Voc pode aplicar cores de fundo para outros elementos, inclusive para cabealhos e
textos. No exemplo abaixo foram aplicadas diferentes cores de fundo para os
elementos <body> e <h1>.

body { background-color: #FFCC66; }
h1 { color: #990000; background-color: #FC9804; }

OBS: Note que foram aplicadas duas propriedades ao elemento <h1> separadas por
um ponto e vrgula. Para melhor compreenso teste todos os exemplos desta
apostila.

13.2 Imagens de fundo [background-image]

A propriedade CSS background-image usada para definir uma imagem de fundo.
Para inserir uma imagem de fundo na pgina basta aplicar a propriedade background-
image ao elemento <body> e especificar o caminho para onde est gravada a imagem.

body { background-color: #FFCC66; background-image: url(imagem.gif); }
h1 { color: #990000; background-color: #FC9804; }

OBS: Note como foi especificado o caminho para a imagem usando url
(imagem.gif). Isto significa que a imagem est localizada no mesmo diretrio da
folha de estilos. Pode ser escolhido um outro diretrio para gravar as imagens e o
caminho seria url (../imagens/imagem.gif) ou at mesmo hosped-la na Internet:
url (http://www.html.net/imagem.gif).

13.3 Imagem de fundo repetida [background-repeat]

No exemplo anterior voc observou que a imagem se repetiu tanto na vertical como
na horizontal cobrindo toda a tela? (Por favor, teste o exemplo anterior) A
propriedade background-repeat controla o comportamento de repetio da imagem
de fundo.
A tabela a seguir mostra os quatro diferentes valores para background-repeat.
Valor Descrio
Background-repeat: repeat-x A imagem se repete na horizontal
Background-repeat: repeat-y A imagem se repete na vertical
Background-repeat: repeat A imagem se repete na horizontal e vertical
Background-repeat: no-repeat A imagem no se repete

Por exemplo, o cdigo mostrado a seguir para que a imagem no se repita na tela:

body { background-color: #FFCC66; background-image: url(imagem.gif); background-
repeat: no-repeat; }
h1{ color: #990000; background-color: #FC9804; }

13.4 Image de fundo fixa [background-attachment]

A propriedade background-attachment define se a imagem ser fixa ou se ir rolar
juntamente com o elemento que a contm.
Uma imagem de fundo fixa permanece no mesmo lugar e no rola com a tela ao
contrrio da imagem que no fixa e rola acompanhando o contedo da tela.
A tabela a seguir mostra os quatro diferentes valores para background-attachment.

Veja os exemplos para constatar a diferena entre imagem fixa e imagem que rola.
Valor Descrio
Background-attachment: scroll A imagem rola com a pgina
Background-attachment: fixed A imagem fixa

Por exemplo, o cdigo abaixo fixa a imagem na tela.

Body { background-color: #FFCC66; background-image: url(imagem.gif); background-
repeat: no-repeat: no-repeat; background-attachment: fixed; }
H1 { color: #990000; background-color: #FC9804 }

13.5 Posio da imagem de fundo [background-position]

Por padro uma imagem de fundo posicionada no canto superior esquerdo da tela. A
propriedade background-position permite alterar este posicionamento padro e
colocar a imagem em qualquer lugar da tela.
Existem vrias maneiras de definir o posicionamento da imagem na tela definindo
valores para background-position. Todas elas se utilizam de um sistema de
coordenadas. Por exemplo, os valores 100px 200px posiciona a imagem a 100px do
topo e a 200px do lado esquerdo da janela do navegador.
AS coordenadas podem ser expressas em porcentagem da largura da janela, em
unidades fixas (pixels, centmetros, etc.) ou pode-se usar as palavras top, bottom,
center, left e right.
Na tabela a seguir so mostrados alguns exemplos.
Valor Descrio
Background-position: 2cm 2cm A imagem posicionada a 2cm da
esquerda e 2cm para baixo na pgina
Background-position: 50% 25% A imagem centrada na horizontal e a
um quarto (25%) para baixo na pgina
Background-position: top right A pgina posicionada no canto superior
direito da pgina

No exemplo de cdigo a seguir a imagem posicionada no canto inferior direito da
pgina:

Body { background-color: #FFCC66; background-image: url(imagem.gif); background-
repeat: no-repeat; background-attachment: fixed; background-position: right bottom;
}
H1 { color: #990000; background-color: #FC9804; }

13.6 Compilando [background]

A propriedade background uma abreviao para todas as propriedades listadas
anteriormente.
Com background voc declara vrias propriedades de modo abreviado, economizando
digitao e alguns bytes, alm de tornar a folha de estilo mais fcil de se ler e
entender.
Por exemplo, observe as cinco linhas a seguir:

background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}

Usando background voc consegue o mesmo resultado, abreviando como mostrado
abaixo:

background: #FFCC66 url("imagem.gif") no-repeat fixed right bottom;

A declarao abreviada deve seguir a seguinte ordem:
background-color;
background-image;
background-repeat;
background-attachment;

background-position;
Se uma das propriedades no for declarada ela assume automaticamente o seu valor
default. Por exemplo, a propriedade background-attachment e background-position
no foram declaradas no cdigo mostrado a seguir:

background: #FFCC66 url("imagem.gif") no-repeat;

As duas propriedades no declaradas assumiro o valor default que como voc j sabe
so: a imagem rola na tela e ser posicionada no canto superior esquerdo ( que so os
valores default para as propriedades no declaradas ).

14 Fontes

Estudaremos as fontes e como aplica-las usando CSS, Veremos como criar situaes
para que determinada font seja visualizada pelo usurio mesmo no estando em seu
sistema operacional.

14.1 Familia de fontes [ font-family ]

A propriedade font-family usada para definir uma lista de fontes e sua prioridade
para apresentao de um elemento em uma pgina. Se a primeira fonte da lista no
estiver instalada na mquina do usurio, dever ser usada a segunda e assim por
diante at ser encontrada uma fonte instalada.
Ao listar fontes para seu website, comece com aquela preferida, seguindo-se algumas
alternativas para ela. recomendvel encerrar a listagem das fontes com uma fonte
genrica. Assim fazendo, em ltimo caso a pgina ser renderizada com fonte da
mesma famlia das que foram especificadas quando todas as demais estiverem
indisponveis na mquina do usurio.
A seguir mostramos um exemplo de listagem de fontes:

H1 { font-family: arial, verdana, sans-serif; }
H2 { font-family: Times New Roman, serif; }

Cabealhos <h1> sero renderizados com fonte Arial. Se o usurio no tiver a font
Arial instalada, ser usada a fonte Verdana. Se ambas estiverem indisponveis na
mquina do usurio ser usada uma fonte da famlia sans-serif.
Notar que para especificar a fonte Times New Roman foram usadas aspas, Isto
necessrio para fontes com nome compostos e que contenham espaos entre os
nomes.

14.2 Estilo da fonte [ font-style ]

A propriedade font-style define a escolha da fonte em normal, italic ou oblique. No
exemplo a seguir todos os cabealhos <h2> sero em itlico.

H1 { font-family: arial, verdana, sans-serif; }
H2 { font-family: Times New Roman, serif; font-style: italic;}

14.3 Fonte variante [ font-variant ]

A propriedade font-variant usada para escolher as variantes normal ou small-caps.
Uma fonte small-caps aquela que usa letras maisculas de tamanhos reduzidos.
Se a propriedade font-variant for definida para small-caps e no estiver disponvel na
mquina do usurio, ser usada fonte em maiscula.

H1 { font-variant: small-caps; }
H2 { font-variant: normal; }

14.4 Peso da fonte [ font-weight ]

A propriedade font-weight define se a fonte ser em negrito. Uma fonte pode ser
normal ou bold. Alguns navegadores suportam nmeros de 100-900 ( em intervalos de
100 em 100 ) para definir o peso da fonte.

P { font-family: arial, verdana, sans-serif; }
Td { font-family: arial, verdana, sans-serif, font-weight:bold; }

14.5 Tamanho da fonte [ font-size ]

O tamanho da fonte definido pela propriedade font-size.
Existem muitas unidades ( p. ex.:. pixels e porcentagens ) que podem ser usadas para
definir o tamanho da fonte.
Veja os exemplos a seguir:

H1 { font-size: 30px; }
H2 { font-size: 12pt; }
H3 { font-size: 120%;}
P { font-size: 1em; }

Existe uma diferena fundamental entre as quatro unidades adotadas no exemplo
acima. As unidades px e pt so absolutas, enquanto % e em permitem ao usurio
ajustar o tamanho das fontes ao seu gosto e necessidade. Para fazer seu site acessvel
a todos, voc dever usar unidades como % ou em.

14.6 Compilando [ font ]

Usar font uma abreviao que permite definir vrias propriedades em uma s.
Veja a seguir quatro linhas de cdigo usadas para definir propriedades de fonte para
um pargrafo <p>:

P { font-style: italic; font-weight: bold; font-size: 30px; font-family: arial,sans-serif; }

Usar a abreviao simplifica o cdigo como mostrado abaixo:
P { font: italic bold 30px arial, sans-serif; }
A ordem dos valores para font a mostrada a seguir:
Font-style;
Font-variant;
Font-weight;
Font-size;
Font-family

15 Textos

Formatar e estilizar textos um item chave para qualquer web designer. Nesta lio
voc ser apresentado s interessantes oportunidades que as CSS proporcionam para
adicionar layout aos textos. Sero discutidas as propriedades listadas abaixo:

15.1 Indentao de texto [ text-indent ]

A propriedade text-indent permite que voc aplique um recuo primeira linha de um
pargrafo. No exemplo a seguir um recuo de 30px aplicado a todos os textos.

P { text-indent: 30px; }

15.2 Alinhamento de textos [ text-align ]

A propriedade text-align corresponde ao atributo align das antigas verses do HTML.
Textos podem ser alinhados esquerda ( left ), direita ( right ) ou centrados ( centred
). E temos ainda o valor justify que faz com o texto contido em uma linha se estenda
tocando as margens esquerda e direita. Este tipo de alinhamento usado em jornais e
revistas.

No exemplo a seguir o texto contido na clula de cabealho <th> alinhado direita e
os contidos nas clulas de dados <td> so centrados. E, os textos normais em
pargrafos so justificados:

Th { text-align: right; }
Td { text-align: center; }
P { text-align: justify; }

15.3 Decorao de textos [ text-decoration ]

A propriedade text-decoration possibilita adicionar efeitos ou decorao em
textos. Voc pode por exemplo, sublinha textos, cortar o texto com uma linha, colocar
uma linha sobre o texto, etc. No exemplo a seguir os cabealhos <h1> so sublinhados,
os cabealhos <h2> levam uma linha em cima e os cabealhos <h3> so cortados por
uma linha.

H1 { text-decoration: underline; }
H2 { text-decoration: overline; }
H3 { text-decoration: line-through; }

15.4 Espao entre letras [ letter-spacing ]

O espaamento entre os caracteres de um texto controlado pela propriedade letter-
spacing. O valor desta propriedade define o espao entre os caracteres. Por exemplo,
se voc deseja um espao de 3px entre as letras do texto de um pargrafo <p> e de
6px entre as letras do texto de um cabealho <h1> o cdigo a seguir dever ser usado.

H1 { letter-spacing: 6px; }
P { letter-spacing: 3px; }

15.5 Transformao de textos [ text-transform ]

A propriedade text-transform controla a capitalizao ( tornar maiscula ) do texto.
Voc pode escolher capitalize, uppercase ou lowercase independentemente de como
o texto foi escrito no cdigo HTML.
Como exemplo tomamos a palavra cabealho que pode ser apresentada ao usurio
como CABEALHO ou Cabealho. So quatro os valores possveis para text-
transform:
Capitalize
Capitaliza a primeira letra de cada palavra. Por exemplo: Wilker costa transforma-se
para Wilker Costa.
Uppercase
Converte todas as letras para maiscula. Por exemplo: Wilker costa transforma-se
para WILKER COSTA.
Lowercase
Converte todas as letras para minscula. Por exemplo: WILKER COSTA transforma-se
para wilker costa.
None
Sem transformaes - o texto apresentado com foi escrito no cdigo HTMl.
Para exemplificar vamos usar uma lista de nomes. Os nomes esto marcados com o
elemento <li> ( item de lista ). Vamos supor que desejamos os nomes capitalizados e
os cabealhos em letras maisculas.
Ao consultar o exemplo sugerido para este cdigo d uma olhada no HTML da pgina
e observe que os textos no cdigo foram escritos com todas as letras em minsculas.

H1 { text-transform: uppercase; }
Li { text-transform: capitalize; }

16 Links

Voc pode aplicar aos links tudo que aprendeu nas lies anteriores (mudar cores,
fontes, sublinhados, etc.). A novidade aqui que voc pode definir as propriedades de
maneira diferenciada de acordo com o estado do link ou seja visitado, no visitado,
ativo ou com o ponteiro do mouse sobre o link. Isto possibilita adicionar interessantes
efeitos ao seu website. Para estilizar estes efeitos voc usar as chamadas
pseudoclasses.

16.1 O que pseudo-classe?

Uma pseudo-classe permite estilizar levando em conta condies diferentes ou
eventos ao definir uma propriedade de estilo para uma tag HTML.

Vamos ver um exemplo. Como voc j sabe, links so marcados no HTML com tags
<a>. Podemos ento usar a como um seletor CSS:
A { color: blue; }
Um link pode ter diferentes estados. Por exemplo, pode ter sido visitado ou no
visitado. Voc usar pseudo-classes para estilizar links visitados e no visitados.

A:link { color: blue; }
A:visited { color: red; }

Use as pseudo-classes a:link e a:visited para estilizar links no visitados e visitados
respectivamente. Links ativos so estilizados com a pseudo-classe a:active e a:hover,
esta ltima a pseudo-classe para links com o ponteiro do mouse sobre ele.

A seguir explicaremos com mais detalhes e exemplificao, as quatro pseudo-classes.

Pseudo-classe: link

A pseudo-classe :link usada para links no visitados.

No exemplo a seguir links no visitados sero na cor verde.

A:link { color: green; }

Pseudo-classe: visited

A pseudo-classe: visited usada para links visitados. No exemplo a seguir links
visitados sero na cor amarela:

A:visited { color: yellow; }

Pseudo-classe: active

A pseudo-classe: active usada para links ativos.

No exemplo a seguir links ativos tero seu fundo na cor vermelha:

A:active { background-color: red; }

Pseudo-classe: hover

A pseudo-classe :hover usada para quando o ponteiro do mouse est sobre o link.

Isto pode ser usado para conseguir efeitos bem interessantes. Por exemplo, podemos
mudar a cor do link para laranja e o texto para itlico quando o ponteiro do mouse
passa sobre ele, o cdigo CSS para estes efeitos o mostrado a seguir:

A:hover { color: Orange; font-style: italic; }

Exemplo 01: Efeito quando o ponteiro est sobre o link

comum a criao de efeitos diferentes quando o ponteiro est sobre o link. Veremos
a seguir alguns exemplos extras de estilizao da pseudo-classe :hover.

Exemplo 01: Espaamento entre as letras

Como voc deve estar lembrado da lio anterior, o espaamento entre as letras de
um texto pode ser controlado pela propriedade letter-spacing. Isto pode ser aplicado
aos links para obter um efeito interessante:

A:hover { letter-spacing: 10px; font-weight: bold; color: red; }

Exemplo 01b: UPPERCASE e lowercase

Na lio anterior vimos a propriedade text-transform, para estilizar com letras
maisculas e minsculas. Isto pode ser usado para estilizar links:

A:hover { text-transform: uppercase; font-weight: bold; color: blue; }

Exemplo 02: Removendo sublinhado dos links

Uma pergunta comum: Como remover o sublinhado dos links?

Voc deve estudar com muito cuidado a necessidade de retirar o sublinhado dos
links, pois isto poder reduzir significativamente a usabilidade dos website. As
pessoas esto acostumadas com links na cor azul e sublinhados e sabem que ali h um
texto a ser clicado. Se voc muda a cor e retira o sublinhado dos links, poder
confundir seus visitantes e em consequncia no retirar o mximo dos contedos do
seu web site.

Feita esta ressalva, muito fcil retirar o sublinhado dos links. Conforme explicado na
lio anterior, a propriedade text-decoration pode ser usada para definir se o texto
ou no sublinhado. Para remover o sublinhado, basta definir o valor none para a
propriedade text-decoration.

A { text-decoration: none; }

Alternativamante, voc pode definir text-decoration juntamente com outras
propriedades para as quatro pseudo-classes.

A:link { color:blue; text-decoration: none; }
A:visited { color: purple; text-decoration: none; }
A:active { background-color: yellow; text-decoration; none; }
A:hover { color: red; text-decoration: none; }

17 - Identificando e agrupando elementos ( classes e ids )

Em alguns casos voc deseja aplicar estilos a um elemento ou grupo de elementos em
particular. Nesta lio veremos como usar class e id para estilizar elementos.
Como definir uma cor para um determinado cabealho, diferente da cor usada para os
demais cabealhos do website? Como agrupar links em diferentes categorias e estilizar
cada categoria diferentemente? Estas so algumas das questes que vamos ver agora.
Agrupando elementos com uso de classe
Vamos supor que temos duas listas de links para diferentes tipos de uvas usadas na
produo de vinho branco e de vinho tinto. O cdigo HTMl conforme mostrado abaixo:
<p>Uvas para vinho branco:</p>
<ul>
<li><a href="ri.htm">Riesling</a></li>
<li><a href="ch.htm">Chardonnay</a></li>
<li><a href="pb.htm">Pinot Blanc</a></li>
</ul>
<p>Uvas para vinho tinto:</p>
<ul>
<li><a href="cs.htm">Cabernet Sauvignon</a></li>
<li><a href="me.htm">Merlot</a></li>
<li><a href="pn.htm">Pinot Noir</a></li>
</ul>
Queremos que os links para vinho branco sejam na cor amarela, para vinho tinto na
cor vermelha e os demais links na pgina permaneam na cor azul.
Para conseguir isto, dividimos os links em duas categorias. Isto feito atribuindo uma
classe para cada link, usando o atributo class.
Vamos especificar esta classe no exemplo a seguir:
<p>Uvas para vinho branco:</p>
<ul>
<li><a href="ri.htm" class="whitewine">Riesling</a></li>
<li><a href="ch.htm" class="whitewine">Chardonnay</a></li>
<li><a href="pb.htm" class="whitewine">Pinot Blanc</a></li>
</ul>
<p>Uvas para vinho tinto:</p>
<ul>
<li><a href="cs.htm" class="redwine">Cabernet Sauvignon</a></li>
<li><a href="me.htm" class="redwine">Merlot</a></li>
<li><a href="pn.htm" class="redwine">Pinot Noir</a></li>
</ul>
Agora podemos definir propriedades especificas para links pertencentes as classes
whitewine e redwine, respectivamente.
A { color: blue; }
a.whitewine { color: #FFBB00; }
a.redwine { color: #800000; }
Como mostrado no exemplo acima, pode-se definer propriedades para estilizao dos
elementos pertencentes a uma determinada classe usando um .nomedaclasse na folha
de estilos do documento.

17.1 Identificando um elemento com uso de id

Alm de agrupar elementos podemos querer atribuir identificao a um nico
elemento. Isto feito usando o atributo id.
O que h de especial no atributo id que no poder existir dois ou mais elementos
com a mesma id, ou seja em um documento apenas um e somente um elemento
poder ter uma determinada id. Cada id nica. Para casos em que haja necessidade
de mais de um elemento com a mesma identificao usamos o atributo class. A seguir
exemplo de possvel uso de id:
<h1>Captulo 1</h1>
...
<h2>Captulo 1.1</h2>
...
...
<h1>Captulo 2</h1>
...
...
<h3>Captulo 2.1.2</h3>
O exemplo acima simula os cabealhos de um documento estruturado em captulos e
pargrafos. comum atribuir uma id para cada capitulo como mostrado a seguir:
<h1 id="c1">Captulo 1</h1>
...
<h2 id="c1-1">Captulo 1.1</h2>
...
<h2 id="c1-2">Captulo 1.2</h2>
...
<h1 id="c2">Captulo 2</h1>
...
<h2 id="c2-1">CCaptulo 2.1</h2>
...
<h3 id="c2-1-2">Captulo 2.1.2</h3>
Vamos supor que o cabealho do capitulo 1.2 deva ser na cor vermelha. Isto pode ser
feito conforme mostrado na folha de estilo a seguir:
#c1-2 { color: red; }
Como mostrado no exemplo acima, podemos definir propriedades para um elemento
especifico usando um seletor #id na folha de estilos para o documento.

18 Agrupando elementos (span e div)

Os elementos <span> e <div> so usados para agrupar es estruturar um documento e
so frequentemente usados em conjunto com o atributos class e id.
Nesta lio veremos com detalhes o uso dos elementos HTML <span> e <div> no que
se refere a sua vital importncia para as CSS.
- Agrupando com <span>
- Agrupando com <div>

18.1 - Agrupando com <span>

O elemento <span> um elemento neutro e que no adiciona qualquer tipo de
semntica ao documento. Contudo, <span> pode ser usado pelas CSS para adicionar
efeitos visuais a partes especificas do texto no seu documento.
Um exemplo deste uso mostrado na citao abaixo:

<p> dormir cedo e acordar cedo faz o homem saudvel, rico e sbio. </p>

Vamos supor que queremos enfatizar na cor vermelha os benefcios apontados ma
frase. Para isto marcamos os benefcios com <span>. A cada span atribumos uma
class, e estilizamos na folha de estilos:

<p>Dormir cedo e acordar cedo faz o homem
<span class="beneficio">saudvel</span>,
<span class="beneficio">rico</span>
e <span class="beneficio">sbio</span>.</p>

A folha de estilos (CSS)
Span.beneficio { color: red; }

claro que voc pode usar id para estilizar o elemento <span>. Mas, como voc deve
estar lembrado, dever usar uma nica id para cada um os trs elementos <span>,
conforme foi explicado na lio anterior.

18.2 Agrupando com <div>

Enquanto <span> usado dentro de um elemento nvel de bloco como vimos no
exemplo anterior, <div> usado para agrupar um ou mais elementos nvel de bloco.
Diferenas parte, o agrupamento com <div> funciona mais ou menos da mesma
maneira. Vamos ver um exemplo tomando duas listas de presidentes dos estados
Unidos agrupados segundo suas filiaes poiliticas:

<div id="democrats">
<ul>
<li>Franklin D. Roosevelt</li>
<li>Harry S. Truman</li>
<li>John F. Kennedy</li>
<li>Lyndon B. Johnson</li>
<li>Jimmy Carter</li>
<li>Bill Clinton</li>
</ul>
</div>
<div id="republicans">
<ul>
<li>Dwight D. Eisenhower</li>
<li>Richard Nixon</li>
<li>Gerald Ford</li>
<li>Ronald Reagan</li>
<li>George Bush</li>
<li>George W. Bush</li>
</ul>
</div>

E na folha de estilos, podemos agrupar a estilizao da mesma maneira como fixemos
no exemplo acima:
#democrats { background: blue; }
#republicans { background: red; }
Nos exemplos mostrados acima usamos somente <div> e <span> para simples
estilizaes, tais como cores de textos e de fundos. Contundo estes dois elementos
possibilitam estilizaes bem mais avanadas como veremos adiante nas lies desta
apostila.

19 Margin e Padding

19.1 Definindo margin de um elemento

Um elemento tem quatro lados: right, left, top e bottom ( direito, esquerdo, superior e
inferior ). A margin a distncia entre os lados de elementos vizinhos ( ou s bordas do
documento ). Veja o diagrama da lio anterior.
Vamos comear com um exemplo mostrando como definir margins para o documento,
ou seja, para o elemento <body>. A ilustrao a seguir mostra como sero as margens
da pgina.

As CSS so mostradas abaixo:

Body { margin-top: 100px; margin-right: 40px; margin-bottom: 10px; margin-left:
70px; }
Ou, adotando uma sintaxe mais elegante:
Body { margin: 100px 40px 10px 70px; }
As margens para a maioria dos elementos pode ser definida conforme o exemplo
acima. Podemos ento, por exemplo, definir margens para todos os pargrafos <p>:
P { margin: 5px 50px 5px 50px; }

19.2 Definindo padding de um element

Padding pode tambm ser entendido como enchimento. Isto faz sentindo, por que
padding no computado na distncia entre elementos, padding define simplesmente
a distncia entre a borda e o contedo do elemento.
Ilustramos o uso de padding atravs de um exemplo onde todos os cabealhos tm
uma cor de fundo definida:

H1 { background: yellow; }
H2 { background: Orange; }

Definindo padding para os cabealhos, alteramos a quantidade de enchimento
existente ao redor de cada um deles:
H1 { padding: 20px 20px 20px 80px; }
H2 { paddin-left:120px; }

20 Bordas

Bordas podem ser usadas para muitas coisas, por exemplo, como elemento decorativo
ou para servir de linha de separao entre duas coisas. CSS proporciona infinitas
possibilidades de uso de bordas na pgina.

20.1 A espessura das bordas [ border-width ]

A espessura das bordas definida pela propriedade border-width, que pode assumir
os valores thin, medium e thick ( fina, mdia e grossa ), ou um valor numrico em
pixels. A figura a seguir ilustra algumas espessuras de bordas:

20.2 As cores das bordas [ border-color ]

A propriedade border-color define as cores para as bordas. Os valores so expressos
em cdigo ou nome de cores, por exemplo, #123456, rgb(123,123,123,) ou
yellow.

20.3 Tipos de bordas [ border-style ]

Existem vrios tipos de bordas disponveis para escolha. A seguir apresentamos 8 tipos
diferentes de bordas e como elas so renderizadas Internet Explorer 5.5. Todos os
exemplos so mostrados na cor "gold" e com espessura thick, mas voc pode usar
qualquer cor e espessura ao seu gosto.
Os valores none ou hidden podem ser usados quando no se deseja a existncia de
bordas.

As trs propriedades explicadas acima podem ser definidas juntas para cada elemento
e resultam em diferentes bordas. Para exemplificar, foram estilizadas diferentes
bordas para os elementos <h1>, <h2>, <ul> e <p>. O resultado pode no ser uma obra
prima, mas, ilustra bem algumas das inmeras possibilidades de estilizao de bordas:
h1 {
border-width: thick;
border-style: dotted;
border-color: gold;
}
h2 {
border-width: 20px;
border-style: outset;
border-color: red;
}
p {
border-width: 1px;
border-style: dashed;
border-color: blue;
}
ul {
border-width: thin;
border-style: solid;
border-color: orange;
}

possvel ainda definir propriedades especialmente para as bordas top, bottom, right
ou left ( superior, inferior, direita e esquerda ). Veja o exemplo a seguir:
h1 {
border-top-width: thick;
border-top-style: solid;
border-top-color: red;
border-bottom-width: thick;
border-bottom-style: solid;
border-bottom-color: blue;
border-right-width: thick;
border-right-style: solid;
border-right-color: green;
border-left-width: thick;
border-left-style: solid;
border-left-color: orange;
}

20.4 Compilando [ border ]

Assim como para muitas outras propriedades, voc pode usar uma declarao
abreviada para bordas. Vamos a um exemplo:
P { border-width: 1px; border-style: solid; border-color: blue; }
Pode ser abreviada assim:
P { border: 1px solid blue; }

21 Altura e largura

At agora ainda no fizemos qualquer considerao sobre as dimenses dos
elementos com que trabalhamos. Nesta lio veremos como fcil atribuir uma altura
e uma largura para um elemento.

21.1 Atribuindo largura [ width ]

A propriedade width destina-se a definir a largura de um elemento.
O exemplo a seguir constri um box dentro do qual podemos digitar um texto:

div.box { width: 200px; border: 1px solid black; background: Orange; }

21.2 Atribuindo altura [ height ]

No exemplo acima a altura ser determinada pelo contedo inserido no box. Voc
pode definir a altura de um elemento com a propriedade height. Como exemplo
vamos fazer a altura do box anterior igual a 500px;

div.box { height: 500px; widht: 200px; border: 1px solid black; background:
orange }

22 Flutuando elementos ( floats )

Um element pode ser flutuado esquerda ou direita com uso da propriedade float.
Isto significa que o box e seu contedo so deslocados para a direita ou para a
esquerda do documento ( ou do bloco container ) A figura a seguir ilustra o principio
de float:

Floats podem ser usados para construir colunas em um documento. Para criar as
colunas estruturamos as colunas no cdigo HTML usando <div> como mostrado a
seguir:

<div id="column1">
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...</p>
</div>
<div id="column2">
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx,
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...</p>
</div>
<div id="column3">
<p>xxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...</p>
</div>

A seguir definimos a largura de cada coluna, por exemplo 33%, e declaramos float: left;
para cada uma das colunas:
#column1 {
float:left;
width: 33%;
}
#column2 {
float:left;
width: 33%;
}

#column3 {
float:left;
width: 33%;
}

22.1 A propriedade clear

A propriedade clear usada para controlar o comportamento dos elementos que se
seguem aos elementos floats do documento.
Por padro, o elemento subsequente a um float, ocupa o espao livre ao lado do
elemento flutuado.
A propriedade clear pode assumir os valores left. Right, both o none. A regra geral :
se clear, for por exemplo definido both para um box, a margem superior deste box
ser posicionada sempre abaixo da margem inferior dos boxes flutuados que estejam
antes dele no cdigo.

<div id="picture">
<img src="bandeiradobrasil.jpg" alt="Bandeira do Brasil">
</div>
<h1>Bandeira do Brasil</h1>
<p class="floatstop">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx,
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...</p>

23 Posicionando elementos

Com o posicionamento CSS podemos colocar um elemento em uma posio exata na
pgina. Combinado com floats ( ver lio 13 ), o posicionamento abre muitas
possibilidades para criao de layouts precisos e avanados.
23.1 O principio de posicionamento CSS

Considere a janela do navegador como um sistema de coordenadas:

O principio de posicionamento CSS estabelece que voc pode posicionar um elemento em
qualquer lugar na tela usando um sistema de coordenadas.
Vamos supor que queremos posicionar um cabealho:
H1 { position: absolute; top:100px; left:200px }
O resultado mostrado a seguir:

Como voc pode ver, posicionar com CSS uma tcnica precisa para colocar
elementos. muito mais fcil do que usar tabelas, imagens transparentes e tudo mais.

23.2 Posicionamento absoluto

Um elemento posicionado absolutamente no cria nenhum espao no documento. Isto
significa que no deixa nenhum espao vazio aps ser posicionado.
Para posicionar um elemento de forma absoluta a propriedade position deve ser definida para
absolute. Voc pode ento usar as propriedades left, right, top e bottom para definir as
coordenadas e posicionar o elemento.
Para exemplificar o posicionamento absoluto escolhemos colocar quatro boxes nos quatro
cantos da pgina:
#box1 {
position:absolute;
top: 50px;
left: 50px;
}
#box2 {
position:absolute;
top: 50px;
right: 50px;
}
#box3 {
position:absolute;
bottom: 50px;
right: 50px;
}
#box4 {
position:absolute;
bottom: 50px;
left: 50px;
}

23.3 Posicionamento relativo

Para posicionar um elemento de forma relativa a propriedade position deve ser
definida para relative. A diferena entre os dois tipos de posicionamento a maneira
como o posicionamento calculado.
O posicionamento para posio relativa calculado com base na posio original do
elemento no documento. Isto significa uma movimentao do elemento para a
esquerda, para a direita, para cima ou para baixo. Assim fazendo o elemento ocupar
um espao aps ser posicionado.
Como exemplo de posicionamento relativo vamos tentar posicionar trs imagens
relativamente as suas posies originais na pgina. Notar como as imagens deixam um
espao vazio nas suas posies originais no documento:
#bola1 {
position:relative;
left: 350px;
bottom: 150px;
}
#bola2 {
position:relative;
left: 150px;
bottom: 500px;
}
#bola3 {
position:relative;
left: 50px;
bottom: 700px;
}

24 Usando z-index ( Layers )

CSS usa o espao tri-dimensional altura, largura e profundidade. Nas lies anteriores
vimos as duas primeiras dimenses. Nesta lio aprenderemos como colocar
elementos em layers ( Camadas ). Resumindo, camadas significam como os elementos
se sobrepem uns aos outros.
Para fazer isto definimos para cada elemento um nmero ndice ( z-index ). O
comportamento que elementos com nmero ndice maior se sobrepem aqueles
com menor numero.
Vamos supor um royal flush no jogo de poker. As cartas podem ser apresentadas como
se cada uma delas tivesse um z-index:

No caso mostrado, os nmeros ndice esto em uma sequncia direta (de 1-5 ),
contudo o mesmo resultado poderia ser obtido com uso de 5 diferentes nmeros, no
em sequncia. O que conta a cronologia dos nmeros ( a ordem ).
O cdigo para a ilustrao das cartas mostrado a seguir:
#ten_of_diamonds {
position: absolute;
left: 100px;
bottom: 100px;
z-index: 1;
}
#jack_of_diamonds {
position: absolute;
left: 115px;
bottom: 115px;
z-index: 2;
}
#queen_of_diamonds {
position: absolute;
left: 130px;
bottom: 130px;
z-index: 3;
}
#king_of_diamonds {
position: absolute;
left: 145px;
bottom: 145px;
z-index: 4;
}
#ace_of_diamonds {
position: absolute;
left: 160px;
bottom: 160px;
z-index: 5;
}
O mtodo simples, mas as possibilidades so muitas. Voc pode colocar imagens
sobre textos, texto sobre texto e etc.

25 Introduo ao XHTML

Para que serve o XHTML? Um arquivo XHTML um arquivo HTML, que pode ser lido
por qualquer browser. No estamos falando de um novo HTML, com novas tags ou
coisa assim. Pelo contrrio, o XHTML foi feito para funcionar mesmo em navegadores
antigos. Mas, ao mesmo tempo, Um arquivo XHTML tambm um arquivo XML vlido,
que pode ser lido por qualquer interpretador de XML.

Meu primeiro conselho, nesse caso, que voc, se no trabalha com XML, deixe
preocupao com o XHTML para depois de dominar bem o cdigo semntico e o
layout tableless. No porque seja complicado, pelo contrrio, transformar HTML em
XHTML bem simples, mas simplesmente porque voc pode obter benefcios muito
significativos, e muito mais rapidamente, aprendendo CSS do que XHTML.

O segundo conselho que voc comece a estudar o assunto. Depois de dominar bem
layouts CSS, mergulhe no XML. A maioria dos bancos de dados hoje permite extrair
dados diretamente em XML e todas as plataformas de aplicaes web trabalham bem
com XML. E com a poderosa linguagem XSLT voc pode muito facilmente oferecer
seus os dados em XHTML para o navegador.

Para que seu arquivo possa ser lido por mquinas alm de humanos muito
importante que voc escreva um XHTML vlido, com isso voc est fazendo com que
as informaes do seu site fique mais acessvel para as buscas, contribuindo para o
projeto e principalmente melhorando as visitas do seu site.

26 O que DOC TYPE?

O Doctype (Document Type Definition) a primeira coisa que se deve escrever em
um arquivo XHTML, ele vai na primeira linha do seu documento, se voc quiser ter
um XML vlido, no devemos esquec-lo, ele serve para informar ao browser que
tipo de documento ser visualizado.

Existem 3 tipos:

Strict: Este tipo usado quando voc fez um cdigo 100% XHTML, sem erros, deve
ser escrito assim:

<!DOCTYPE html
PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>

Transitional: Este o modo mais usado, voc o usa quando est comeando a
migrar do nosso amigo HTML para o poderoso XHTML, sua sintaxe :

<!DOCTYPE html
PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>

Frameset: usado quando voc est utilizando FRAMES em seu site, se escreve
assim:

<!DOCTYPE html
PUBLIC -//W3C//DTD XHTML 1.0 Frameset//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd>
Veja o exemplo abaixo:

Exemplo:
<!DOCTYPE html
PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
<html>
<head>
<title></title>
</head>
<body>

</body>
</html>

27 Feche todas as tags

Quem j escreveu algum XML sabe que ele no funciona at que TODAS as tags
estiverem bem fechadas, no HTML era diferente, muitas vezes deixvamos tags
abertas, e ele funcionava que era uma beleza.

Para se fazer um XHTML vlido, devemos fechar TODAS as tags:

1. No devemos esquecer de fechar as tags que estamos carecas de conhecer:
<p></p>, <b></b>, etc

2. E no devemos esquecer de forma alguma de fechar as tags solitrias, assim, ao
invs de <br> escrevemos <br></br>, ou na forma simplificada: <br />.
Descobriram que fechando tags desta forma <br/>, no se sabe porque estava
causando um problema no Netscape, mas apenas colocando um espao antes da / o
problema solucionado.

Use letras minsculas

Quem nunca viu um cdigo fonte de um documento HTML escrito assim:
<A href=http://tags.com.letras.minsculas/ TARGET=_BLANK> </A>
Um documento XHTML deve ter TODAS as tags e seus respectivos atributos escritos
com letra minscula!

No esquea das ASPAS

Esta regra bem simples. Todos os atributos XHTML devem conter as benditas
ASPAS.

Atributo NAME

O antigo atributo NAME foi substitudo pelo atributo ID. Se seus usurios, clientes, etc,
utilizam ainda antigos browsers, voc pode sem problema nenhum utilizar as duas
formas juntas durante neste perodo em que estamos migrando:
<img src=imagem.gif id=imagem name=imagem />

Atributos sem valor

No devemos esquecer tambm os atributos que escrevemos sem valor, por exemplo:
ERRADO:
<option selected>
<frame noresize>
<input checked>
<input readonly>
CERTO:
<option selected=selected>
<frame noresize=noresize>
<input checked=checked>
<input readonly=readonly>
E assim por diante.

Quer uma dica?

Se voc est migrando do HTML para o XHTML, o TIDY pode te dar uma forcinha.
O TIDY uma ferramenta para validar e consertar cdigos HTML, ele tem opes que
voc pode escolher qual a verso do HTML voc quer validar, uma dessas opes a
XHTML. Se voc j est escrevendo um XHTML e quer que seu cdigo fique livre de
todos os erros, o TIDY arruma para voc.

Guia completo HTML e CSS para iniciantes

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Guia completo HTML e CSS para iniciantes

Uploaded by

Copyright:

Available Formats

Sumrio

You might also like