Desenvolvida exclusivamente para o Apostilando.

com por Marcos Paulo Furlan

NDICE
NDICE .......................................................................................................................................... 2 HTML............................................................................................................................................. 5

XHTML ........................................................................................................ 5 Como se cria um documento HTML ............................................................... 6 Tags ou comandos HTML ........................................................................... 7 Estrutura Bsica ............................................................................................. 8 Comentrios .............................................................................................. 10 Pargrafos e quebras de linha ...................................................................... 10 O Comando <P> ....................................................................................... 10 Alinhando pargrafos ................................................................................ 11 O Comando <BR> ..................................................................................... 11 O Comando <HR> .................................................................................... 11 Alterando o formato de linha de separao............................................... 11 USANDO IMAGENS COMO LINHAS SEPARADORAS ........................... 12 DIV ............................................................................................................ 12 blockquote ................................................................................................. 12 Estilos de Texto e Fonte ............................................................................... 12 Alterando o tamanho da fonte ................................................................... 13 Size ........................................................................................................... 13 Face .......................................................................................................... 13 Color.......................................................................................................... 13 Cabealhos ................................................................................................... 14 Alinhando cabealhos ............................................................................... 14 Listas ............................................................................................................ 15 Listas Ordenadas ...................................................................................... 15 Listas No ordenadas ............................................................................... 16 Lista de Definio ...................................................................................... 16 Imagens ........................................................................................................ 17 urls e links ..................................................................................................... 19 URL ........................................................................................................... 20 Criando um Link com Arquivos Locais ...................................................... 20 Usando uma Imagem como Hiperlink ....................................................... 20 Vinculando Arquivos de outros diretrios .................................................. 21 CRIANDO LINKS PARA SEES DE UMA PGINA .............................. 21 Criando uma ncora ................................................................................. 21 Enviando E-Mail diretamente da Pgina HTML ........................................ 21 Definindo Destinos .................................................................................... 21 TABELAS...................................................................................................... 22 Elementos bsicos de tabelas ...................................................................... 22 Parmetros................................................................................................ 23 Parmetros do elemento <TABLE> .......................................................... 23 Parmetros do elemento <TR> ................................................................. 24 Parmetros dos Elementos <TD> e <TH> ................................................ 24 META ............................................................................................................ 26

Informaes especficas............................................................................ 26 Variaes do comando meta..................................................................... 27 Multimdia ..................................................................................................... 27 Considerao no uso de multimdia .......................................................... 28
FOLHAS DE ESTILO .................................................................................................................. 28

Verses da CSS ........................................................................................ 28 CSS - 1...................................................................................................... 28 CSS Position (CSS-P) ............................................................................ 29 CSS 2 ..................................................................................................... 29 CSS 3 ..................................................................................................... 29 Regras da CSS ......................................................................................... 29 Incluindo CSS no Documento ................................................................... 30 Incluindo a CSS em uma pgina WEB ...................................................... 31 Incluindo a CSS em um site da WEB ........................................................ 32 Principais atributos de uma folha de estilo ................................................ 33 Definindo classes ...................................................................................... 35 Definindo IDS ............................................................................................ 35 Definindo TAGS dentro do contexto .......................................................... 36 Definindo a CSS para impresso .............................................................. 37 Definindo Quebras de pgina para a impresso ....................................... 38 Controles de Texto .................................................................................... 38 Ajustando as Entrelinhas........................................................................... 39 Definindo Segundo Plano.......................................................................... 39 Bordas ....................................................................................................... 40 Envolvendo um elemento com texto ........................................................ 40 Posicionamentos ....................................................................................... 41 Posicionamento Esttico ........................................................................... 41 Posicionamento Relativo ........................................................................... 41 Posicionamento Absoluto .......................................................................... 42 Posicionamento 3D ................................................................................... 42 Regras, declaraes e seletores ............................................................... 42 Mltiplas declaraes e seletores ............................................................. 43 Comentrios e instrues.......................................................................... 44 Valores ...................................................................................................... 45 Herana..................................................................................................... 46 Como incluir estilos em uma pgina ............................................................. 47 Classes e IDs................................................................................................ 50 Links (pseudo-classes e pseudo-elementos) ................................................ 51 Fontes ........................................................................................................... 51 font-family.................................................................................................. 52 font-size..................................................................................................... 53 font-style e font-weight .............................................................................. 55 font-variant ................................................................................................ 56 text-transform ............................................................................................ 56 text-decoration .......................................................................................... 57 text-align e vertical-align............................................................................ 58 text-indent ................................................................................................. 58

line-height.................................................................................................. 59 letter-spacing............................................................................................. 59 Propriedade Color......................................................................................... 59 background-color ...................................................................................... 60 background-image .................................................................................... 60 Propriedades de Classificao ..................................................................... 63 display ....................................................................................................... 63 white-space ............................................................................................... 63 list-style ..................................................................................................... 63 Blocos ........................................................................................................... 64 margin e padding ...................................................................................... 65 border-width .............................................................................................. 66 border-color ............................................................................................... 67 border-style ............................................................................................... 68 border ........................................................................................................ 69 width e height ............................................................................................ 69 float ........................................................................................................... 69 clear .......................................................................................................... 70 Posicionamento ............................................................................................ 70 position, top e left ...................................................................................... 70 z-index....................................................................................................... 70 visibility ...................................................................................................... 71
HTML 5........................................................................................................................................ 71

Exemplo de um cdigo HTML5 ................................................................. 71

HTML
HTML (acrnimo para a expresso inglesa Hypertext Markup Language, que significa Linguagem de Marcao de Hipertexto) uma linguagem de marcao utilizada para produzir pginas na Web. Documentos HTML podem ser interpretados por navegadores.

XHTML
O XHTML, ou eXtensible Hypertext Markup Language, uma reformulao da linguagem de marcao HTML, baseada em XML. Combina as tags de marcao HTML com regras da XML. Este processo de padronizao tem em vista a exibio de pginas Web em diversos dispositivos (televiso, palm, celular, etc). Sua inteno melhorar a acessibilidade. O XHTML consegue ser interpretado por qualquer dispositivo,

independentemente da plataforma utilizada, pois as marcaes possuem sentido semntico para as mquinas. O HTML no consegue esta implementao. No entanto, no existem muitas diferenas entre o HTML e o XHTML. Para verificar se uma pgina XHTML est bem construda, o melhor mtodo validar o cdigo atravs de uma aplicao Web disponibilizado pela organizao W3C. A Recomendao XHTML original da W3C, XHTML 1.0, foi simplesmente uma reformulao do HTML 4.01 em XML. Existem trs diferentes "DTDs" de XHTML 1.0, cada qual com equivalncia a uma verso em HTML 4.01. XHTML 1.0 Strict o mesmo que HTML 4.01 Strict, mas segundo regras de sintaxe XML. XHTML 1.0 Transitional o mesmo que HTML 4.01 Transitional, mas segue as regras de sintaxe XML. Ele suporta tudo encontrado no XHTML 1.0 Strict, mas tambm permite o uso de vrios elementos e atributos que so julgados presencionais, para facilitar a transio de HTML 3.2 e mais recentes. Isso inclui <center>, <u>, <strike>, e <applet>. XHTML 1.0 Frameset: o mesmo que HTML 4.01 Frameset, mas segundo as regras de sintaxe XML. Ele permite a definio de um

frameset HTML, uma prtica comum em verses de HTML anteriores ao HTML 4.01. A mais recente Recomendao XHTML da W3C o XHTML 1.1: Module-based XHTML, que uma reformulao do XHTML 1.0 Strict, com pequenas modificaes, usando alguns mdulos de um conjunto definido em

Modularizao de XHTML[1], uma Recomendao W3C que cria uma modularizao de frames, um padro de mdulos, e vrias outras definies. Todas as ferramentas depreciadas de HTML, como elementos presencionais e framesets, e at mesmo os atributos lang e o atributo de ncoras name, que ainda eram permitidos no XHTML 1.0 Strict, foram removidos desta verso. A apresentao controlada puramente pelas Folhas de Estilo em Cascata (CSS). Esta verso tambm permite suporte marcao rubi, necessria para lnguas do Extremo Oriente (especialmente CJK). Alm da Modularizao de XHTML permitir pequenas ferramentas XHTML serem reutilizadas por outras aplicaes XML de uma maneira bem definida, e que o XHTML seja estendido para alguns propsitos, XHTML 1.1 adiciona o conceito de um documento "estritamente conformado": esses documentos definidos nos mdulos requeridos para XHTML 1.1. Por exemplo, se um documento estendido para usar o mdulo XHTML Frames (frameset), ele tambm pode ser descrito como XHTML 1.1, mas no estritamente conforme o XHTML 1.1. Ao invs disso, ele deve ser descrito como um XHTML Host Language Conforming Document[2], se a ferramenta for relevante e necessria.

Como se cria um documento HTML

Uma pgina Web composta de textos e comandos especiais (tags). Assim como qualquer linguagem, o programador deve escrever o cdigo-fonte seguindo as regras da linguagem. Esse cdigo-fonte posteriormente interpretado pelo browser, que se encarregar de executar os comandos (tags) do cdigo para formatar e acessar recursos da Web. O cdigo fonte pode ser escrito usando-se o mais simples dos editores de texto. At o programa Bloco de Notas pode ser usado para esta tarefa. Mas

existem editores WYSIWYG (What you see is what you get, ou o que voc v o que realmente obtm) como exemplo podemos citar o Dreamweaver. Existem ainda editores no WYSIWIG, onde voc tem que construir o cdigo, mas ele completa muitos comando, como exemplo podemos citar o Sothink HTML Editor (disponvel na pasta do Dreamweaver), e na prpria Internet existem vrios destes editores gratuitos.

Tags ou comandos HTML

As TAGS normalmente so especificadas em pares, delimitando um texto que sofrer algum tipo de formatao. As TAGS so identificadas pelo sinais < > ou </ >. Entre os sinais <> so especificados os comandos propriamente ditos. No caso de tags que necessitam envolver um texto, sua finalizao deve ser feita usando-se a barra de diviso / , indicando que a TAG est finalizando a marcao de texto. Os principais elementos de pgina HTML so, ttulos, textos, pargrafos, imagens e links, responsveis pela chamada de outras pginas para a tela:

Ttulo: o texto que aparece na barra de ttulo do browser. Imagem: So figuras, desenhos e fotos usados para ilustrar a pgina.

Texto: a informao mais comum dentro de uma pgina. Pode ser formatado atravs de comandos. Link: um trecho que aparece destacado do restante do texto, normalmente sublinhado e com outra cor. Ao clicar no Link, o browser acessa outra regio da pgina atual ou uma pgina localizada em qualquer lugar na Internet. Uma figura tambm pode ser usada como link, ou seja, clicando na figura saltamos para outro local. Cabealho: So linhas de texto com tamanhos especiais. Existem seis tamanhos de cabealhos.

Estrutura Bsica
A estrutura bsica de um documento HTML a seguinte:

<HTML> <HEAD> <TITLE> Ttulo do Documento</TITLE> </HEAD> <BODY> Aqui dever ser digitado e criado a maioria dos itens que iro aparecer em sua Home Page </BODY> </HTML>

Vamos ver um pouco sobre os elementos bsicos do HTML: <HTML></HTML>: Indicam respectivamente o incio e o fim do documento. Todo o resto deve estar entre estas marcas. <HEAD></HEAD>: Delimitam a seo de cabealho do documento. Trata-se da primeira seo do documento. <TITLE></TITLE>: Indicam o ttulo do documento, que ser apresentado na barra superior do browser. Estas marcas devem constar da seo de cabealho. <BODY></BODY>: Corpo do documento. Entre estas marcas estar o contedo a ser apresentado, textos, cores, imagens, etc. Este elemento pode conter cinco parmetros opcionais:

BACKGROUND: configura especificar uma imagem como fundo da pgina. EX. <BODY BACKGROUND= fundo.gif > configura uma pgina com a imagem fundo.gif como fundo. BGCOLOR: Configura a cor de fundo da pgina. EX: <BODY BGCOLOR= White > configura uma pgina com fundo branco (padro). TEXT: configura a cor padro do texto da pgina. EX: <BODY TEXT= Black > configura uma pgina com texto em cor preta. (padro). LINK, ALINK, VLINK: configura as cores dos links da pgina. ALINK configura a cor do link ativo, isto quando clicado, e VLINK configura a cor de um link j visitado. EX: <BODY LINK=Blue VLINK=Purple ALINK=Red> configura uma pgina com links azuis, links ativos vermelhos e links visitados roxos. Esta estrutura inicial simples, no entanto existem detalhes que devem ser respeitados: Todas as marcas apresentadas so do tipo incio-fim, ou seja, funcionam em pares. Em cada documento HTML s deve haver uma marca de cada tipo acima. Existe uma ordem seqencial lgica entre as marcas. Estes detalhes devem ser respeitados, seno o browser no conseguir apresentar o documento. Como HTML no uma linguagem de programao, voc no ser avisado de erros que tenha cometido na edio do seu documento. Criando o primeiro documento HTML

<HTML> <HEAD> <TITLE>Este o meu primeiro documento em HTML</TITLE> </HEAD> <BODY BGCOLOR=Red TEXT=White> Agora no corpo do texto vou digitar o meu primeiro texto em Html, no momento no usarei nenhuma formatao especial aqui dentro. </BODY>

</HTML>

Comentrios
Podemos tambm acrescentar comentrios ao nosso cdigo HTML, estes comentrios no aparecem para no navegado e somente no cdigo, so representados pela seguinte TAG <!- - inicia o comentrio //- - >, finaliza o comentrio. So utilizados para ocultar scripts dentro do cdigo Html, pois caso o script no possa ser processado o mesmo ser ignorado pelo navegador. Caracteres especiais Existem caracteres que no podem ser obtidos atravs de teclado. Eles podem ser inseridos em sua pgina atravs da especificao de um cdigo especial que o browser interpreta e substitui por um caractere especfico. Esses cdigos podem ser obtidos utilizando-se uma nomenclatura definida pela norma ISO. Alguns dos smbolos mais utilizados no HTML o &nbsp; que corresponde

ao espao do teclado, j que na HTML ele considera apenas um espao. Para uma tabela mais completa visite o link

http://www.w3.org/TR/html401/sgml/entities.html

Pargrafos e quebras de linha

Ao contrrio dos editores de texto comum, nos quais voc insere uma quebra ou avano de linha toda vez que pressiona a tecla ENTER, em um programa HTML necessrio colocar um comando especfico para que o browser entenda que voc deseja mudar de linha e iniciar uma nova linha ou comear um novo pargrafo. Existem dois comandos para criar quebras de linha e novos pargrafos. So os comandos <P> e <BR>

O Comando <P>
Para forar um novo pargrafo, ou seja, avanar uma linha em branco e iniciar o texto na segunda linha aps o final do pargrafo anterior deve ser usado o comando <P>.

10

Alinhando pargrafos
O Comando <P> inicia um novo pargrafo onde o texto automaticamente alinhado pela margem esquerda da tela. Atravs do parmetro ALIGN, pode-se mudar o alinhamento de forma que o texto do pargrafo inteiro fique centralizado ou alinhado direita. Nesse caso, deve-se usar um par de comandos <P> envolvendo o pargrafo.

ALIGN=CENTER ALIGN=RIGHT ALIGN=JUSTIFY ALIGN=LEFT

Centraliza o texto. Alinha pela margem direita Alinha pelas duas margens Alinha pela margem esquerda (padro)

O Comando <BR>
O comando <P> insere uma linha em branco no seu local ou na linha seguinte qual ele foi inserido, caso esteja no meio de uma linha de texto e no em seu final. O comando <BR> tem como funo avanar para a linha imediatamente aps quela em que ele se encontra, sem, contudo, deixar uma linha em branco.

O Comando <HR>
O comando <HR> tem como finalidade inserir uma linha divisria na posio em que foi especificado. Seu uso recomendado para criar uma diviso na pgina.

Alterando o formato de linha de separao

As linhas criadas pelo comando <HR> podem Ter o seu tamanho alterado pelos parmetros SIZE e WIDTH. O parmetro SIZE altera a espessura (altura) da linha, deixando-a mais grossa em funo do valor especificado. Esse valor expresso em pixels. A largura ou comprimento da linha alterada pelo parmetro WIDTH e pode ser expresso em pixels, sendo que, nesse caso, o tamanho da linha fixo ou utiliza uma porcentagem relativa largura da janela. Assim, seu tamanho varia

11

em funo da largura da janela. Veja o cdigo abaixo:

USANDO IMAGENS COMO LINHAS SEPARADORAS

Em vez de usar o comando <HR> como separador, podemos usar uma imagem com o comando <IMG>. Assim como o comando HR, podemos usar os parmetros WIDTH e HEIGHT para alterar o tamanho da imagem.

DIV
A Tag <DIV></DIV> envolve uma rea do texto ou diviso que pode receber parmetros especficos de alinhamento, como o caso de ALIGN, para alinhar o texto. Podemos envolver vrios pargrafos com o elemento DIV

blockquote
O comando Blockquote permite dar recuos de pargrafos aos pargrafos, e pode ser cumulativo

Estilos de Texto e Fonte

Assim como no editor de textos, voc pode criar uma srie de efeitos no texto, alterando a forma ou o tipo da fonte. Todos os comandos que alteram o estilo do texto so do tipo continer ou liga desliga, ou seja, precisam ser especificados em pares, marcando o incio e fim do texto que sofrer a formatao. Os principais comandos de estilo de texto so: Comando Negrito Itlico Sintaxe <B>Texto</B> <I>Texto</I> Funo Aplica o estilo Negrito Aplica o estilo Itlico Aplica o estilo sublinhado(No funciona em alguns Browsers Strong <Strong>Texto</Strong Similar ao Negrito > Typerwriter <TT>Texto</TT> Deixa o texto com espaamento regular

Sublinhado <U>Texto</U>

12

Big Small

<BIG>Texto</BIG>

Aumenta a fonte e aplica negrito

<SMALL>Texto</SMAL Reduz e altera a fonte L>

Sobrescrito <SUP>Texto</SUP> Subscrito <SUB>Texto</SUB>

Eleva o texto e diminui seu corpo Rebaixa o texto e diminui seu corpo

Pulsante

<BLINK>Texto</BLINK Faz com que o texto pisque (No > funciona no IE 4.

Alterando o tamanho da fonte

Um dos recursos de tratamento do texto mais interessantes da linguagem HTML a possibilidade de alterar o tamanho, a cor e o tipo da fonte do texto utilizado. O comando responsvel por isso o comando <FONT>, que do tipo liga desliga.

Size
O parmetro size especifica o tamanho da fonte utilizada. Os valores permitidos vo de 1, o menor at 7, o maior. O padro 3. Se for especificado um nmero antecedido pelo sinal de adio ou de subtrao, o tamanho da fonte atual ser aumentado ou diminudo nesse valor. Por exemplo, se a fonte atual 3 e for especificado <FONT SIZE=+2> o texto ser exibido no tamanho 5. Se o valor for especificado sem sinal, a fonte ser exibida no tamanho especificado.

Face
Esse parmetro permite que seja escolhida uma fonte diferente para o texto. Podemos especificar vrias fontes, de maneira que, se o sistema no possuir a primeira opo, a segunda carregada. Se no for encontrada nenhuma das fontes especificadas, o texto exibido na fonte padro.

Color
Esse parmetro especifica a cor do texto. Seu valor pode ser especificado no

13

formato hexadecimal, RGB ou atravs de um nome predefinido de cores como mostra a tabela abaixo: Cor Aqua Black Fcsia Green Brown Olive Silver White Cdigo #70DB93 #000000 #FF00FF #00FF00 #800000 #808000 #E6E8FA #FFFFFF Cor Blue Cyan Gray Lime Navy Red Teal Yellow Cdigo #0000FF #00FFFF #C0C0C0 #32CD32 #23238E #FF0000 #008080 #FFFF00

No exagere na quantidade cores e tamanho das letras do texto ou a sua pgina parecer uma mensagem enviada por cdigo.

Cabealhos
Outra forma muito usada para mudar o tamanho da letra e aplicar um efeitos em textos utilizando cabealhos. A linguagem HTML possui seis comandos de cabealho de <H1> at <H6>. Alm do tamanho diferenciado, o comando cabealho insere uma linha em branco antes e depois da linha que contm o comando. Eles so perfeitos para criar ttulos e iniciar sees dentro de uma pgina. O comando <H1> possui o maior tamanho enquanto que <H6> possui o menor tamanho de fonte.

Alinhando cabealhos
Como padro um cabealho gerado pelo comando <Hn> sempre posicionado no lado esquerdo da linha. Usando o parmetro ALIGN pode-se centralizar ou ajustar o cabealho direita da linha. Veja o cdigo:

<HTML> <HEAD>

14

<TITLE>Alinhando Cabealhos</TITLE> </HEAD> <BODY> <H2> Cabealho sem alinhamento especial</H2> <HR> <H2 ALIGN=CENTER>Cabealho com alinhamento centralizado</H2> <HR> <H2 ALIGN=RIGHT>Cabealho com alinhamento direita</H2> </BODY> </HTML>

Listas
Na linguagem HTML existem elementos especficos para a criao de listas, que podem ser listas ordenadas (OL), listas sem ordenao (UL), ou listas de definies (DL). Um detalhe interessante que podem ser criadas listas aninhadas, ou seja, listas dentro de listas. A seguir, veremos as caractersticas de cada umas delas.

Listas Ordenadas
<OL TYPE=...START=...>...</OL> so os elementos delimitadores de listas ordenadas (OL Ordered Lists). A estrutura das listas ordenadas bastante simples: entre os elementos de incio e fim, os itens da lista so definidos pelos elementos <LI></LI>. Os itens so apresentados em linhas consecutivas e precedidos por uma numerao atribuda pelo paginador. O parmetro opcional TYPE define como ser o tipo de numerao de cada linha. Os tipos disponveis so: A (A,B,...Z), a(a,b,...z), I (I,II,III, etc.), i (i,ii,iii,etc), e 1 (1,2,3,etc). Se omitido, utilizado o tipo padro (1,2,3, etc). O parmetro opcional START define a partir de que elemento a numerao deve se iniciar. Ele deve receber como valor um nmero indicando em que posio a contagem deve se iniciar.

15

Listas No ordenadas
<UL>...</UL> so os elementos delimitadores de listas sem ordenao (UL Unordered Lists). A estrutura das listas sem ordenao a mesma das listas ordenadas, sendo que, na apresentao, os itens sero precedidos por um marcador (bullet). No caso de listas sem ordenao aninhadas (listas dentro de listas), o paginador utilizar um marcador (bullet) diferente para os itens de cada lista. Como j foi visto acima <LI>...</LI> o elemento que define um item de uma lista ordenada ou sem ordenao. O seu contedo pode ser texto, outras listas, imagens, links ,etc.

Lista de Definio
<DL>...</DL> so as marcas que englobam uma lista de definies, ideais para a criao de glossrios e coisas do gnero. A estrutura desta lista diferente das outras, pois existem dois elementos o termo a ser definido (DT), e a definio propriamente dita (DD). Na apresentao cada termo aparece em uma linha, e a respectiva definio na linha seguinte, deslocada para a direita.

<HTML> <HEAD> <TITLE>Listas de definio</TITLE> </HEAD> <BODY> <H2>Listas de definio</H2> <DL> <DT>HTML</DT> <DD>Hiper Text Markup Language</DD> <DT>OL</DT> <DD>Listas ordenadas com numerao.</DD> <DT>UL</DT> <DD>Listas sem ordenao</DD> <DT>LI</DT>

16

<DD>Elemento da Lista</DD> </DL> <H2>Listas no ordenadas combinadas<BR>com uma lista de

Definio</H2> <DL> <DT>Parmetro do elemento OL</DT> <DD> <UL> <LI>TYPE</LI> <LI>START</LI> </UL> </DD> <DT>Parmetros do elemento IMG</DT> <DD> <UL> <LI>SRC</LI> <LI>ALT</LI> <LI>BORDER</LI> <LI>WIDTH</LI> <LI>HEIGHT</LI> <LI>VSPACE</LI> <LI>HSPACE</LI> </UL> </DD> </DL> </BODY> </HTML>

Imagens
Voc pode obter uma imagem atravs de uma cpia feita a partir de uma pgina da Internet, atravs de CDs ROMs, Scanners, etc. ou pode cri-las a

17

partir de um programa de imagens. O comando img

Esse comando define a posio de uma imagem que aparece no corpo do documento. <IMG SRC=URL WIDTH=... HEIGHT= BORDER= ALT=Texto VSPACE= HSPACE=> ALIGN=| BOTTOM | TOP | MIDLE

SRC=URL

o nome da figura, se estiver no mesmo diretrio do programa ou seu caminho completo.

ALT=texto

Exibe o texto quando o browser no encontra a imagem, ou uma legenda quando o cursor do mouse passa sobre ela mostrando o texto

especificado. ALIGN=TOP MIDLE | BOTTOM | Especifica o alinhamento da imagem relativamente linha de texto onde exibida. ALIGN=LEFT RIGHT | Especifica o alinhamento da imagem relativamente s bordas laterais da janela WIDTH=nmero| nmero% Esse parmetro especifica a largura de exibio da imagem

independentemente do seu tamanho fsico. Se a imagem for maior ou menor do que o valor especificado, ela ser esticada ou comprimida para caber no espao especificado. Se for o colocado o sinal de porcentagem, ele relativo largura da janela.

18

HEIGHT=nmero

Especifica a altura de exibio da imagem independentemente de seu tamanho fsico. Se a imagem for maior ou menor do que o valor especificado.

BORDER=nmero

Especifica em pixels a largura da borda da imagem. O valor zero remove a imagem

VSPACE=nmero

Determina em pixels o espao que deve ser deixado em branco na parte de cima e na parte de baixo da imagem.

HSPACE=nmero

Determina em pixels o espao que deve ser deixado em branco nas laterais da imagem

Com exceo do parmetro SRC, todos os demais so opcionais. Portanto, para exibir uma imagem chamada foto.gif que esteja no mesmo diretrio do programa deve ser especificado o seguinte comando: IMG SRC=foto.gif

urls e links
At agora voc aprendeu como criar documentos interessantes, mas que poderiam ter sido criados em um processador de textos. O Principal atrativo da Internet a criao de documentos com o conceito de hipertexto, ou seja , um documento que se liga a outros por meio de vnculos especiais chamados hyperlinks. Com esse conceito voc pode criar documentos que faam referncia a um endereo qualquer do computador ou da Web e permitam ao usurio acessar essas referncias, no importando se elas esto em outra pgina WEB, no seu micro ou em qualquer servidor da rede.

19

URL
A Internet usa uma nomenclatura especfica para indicar o endereo de um documento. Chamada de Uniform Resource Locator (Localizador Universal de Recursos) ou URL, essa nomenclatura inclui trs componentes. Ela deve conter o protocolo do documento, (como por exemplo http. Gopher ou WAIS), o endereo servidor e a localizao do arquivo, usando a seguinte sintaxe: Protocolo://servidor.NomeDoArquivo

http://www.apostilando.com/index.htm http: o protocolo www.apostilando.com: o nome do servidor index.htm: o nome do documento que ser acessado.

Criando um Link com Arquivos Locais

Vincular um texto com uma pgina local uma tarefa bastante simples. Voc precisa apenas especificar o nome completo do arquivo que ser chamado, utilizando o comando <A> de ncora. Veja a sintaxe bsica deste comando: <A HREF=...NAME...>caracteres</A> Principais parmetros:

HREF=URL

Especifica o endereo do URL ao qual o link est associado. Pode ser usado dentro e fora do

documento. NAME=String Especifica o nome da seo de um documento qual um link de hipertexto faz referncia.

Usando uma Imagem como Hiperlink

Voc pode usar uma imagem como hiperlink envolvendo-a com o comando <A></A>. Em vez de especificar um texto de hiperlink, voc usa o comando <IMG> para colocar a imagem.

20

Vinculando Arquivos de outros diretrios

Voc pode especificar o endereo de outros diretrios usando um esquema de caminhos parecido com DOS. Existe uma diferena entre esses caminhos. Na Web voc deve inverter a barra de espaos, usando a barra / no lugar da barra \, para separar diretrios.

CRIANDO LINKS PARA SEES DE UMA PGINA

Para dominar o uso do hipertexto, o programador em HTML deve conhecer bem o funcionamento do comando <A> e dois de seus parmetros da linguagem. Um o <H HREF>, usado para criar o link em si, e o outro o <A NAME>, que cria ncoras ou endereos de sees de um documento, permitindo seu endereamento.

Criando uma ncora

Para interligar uma pgina, voc precisa criar uma ncora (tambm chamado de indicador em alguns editores de HTML) no inicio de cada seo do documento. Essa ncora recebe um nome que ser mencionado pelo link que acessar. <A NAME=#nome da ncora>Texto Opcional</A>

Iremos criar agora uma pgina Web com exemplos de links e ncoras : Neste cdigo criamos primeiramente os links com as ncoras da pgina, e depois as ncoras, aproveitamos tambm e trabalhamos com insero de imagens na pgina:

Enviando E-Mail diretamente da Pgina HTML

Voc pode acionar o programa padro de e-mail diretamente de uma pgina HTML usando uma variao do comando <A>, que usa a opo MAILTO no lugar da URL. <A HREF=MAILTO:faleconosco@provedor.com.br>Tire as suas dvidas </A>

Definindo Destinos
Podemos tambm definir destinos para os nossos links,(recurso muito utilizado

21

em frames) atravs do parmetro target: . E podem ser _self: Mesmo quadro, _top: pgina inteira, _blank: nova janela e _parent: quadro pai.

TABELAS
Assim com as listas que ns j vimos, no HTML existem elementos especficos para a criao e formatao de tabelas. O recurso de tabelas muito interessante e muito usado nas pginas Web. O conceito o mesmo conhecido usualmente: ela tem linhas e colunas, e na interseo delas esto as clulas. Na linguagem HTML, voc pode inserir nas clulas tudo o que normalmente faz parte do corpo de um documento, como textos, links, imagens, listas e at outras tabelas.

Elementos bsicos de tabelas

<TABLE>...</TABLE> So as marcas que englobam a definio de uma tabela. Todas as demais marcas referentes a tabelas linhas e clulas somente sero consideradas se includas entre <TABLE>e </TABLE>. <CAPTION>...</CAPTION> Trata-se de um elemento opcional que define o ttulo da tabela, e deve constar entre as marcas que definem a tabela, mas separado das marcas que definem linhas e colunas. Sem parmetros, o ttulo apresentado acima da tabela e centralizado. <TR>...</TR> Table Row ou Linha de tabela Este o elemento utilizado na definio de linhas de tabelas. Tabelas so definidas em linhas, sendo as linhas compostas de clulas. O nmero de linhas de uma tabela corresponde ao nmero de <TR></TR>. <TD>...</TD> Table Data ou Dados de Tabela Marcas que delimitam as clulas que compem as linhas, e assim sendo devem estar inseridas entre as marcas de linhas. Uma clula pode conter tudo

22

o que normalmente consta do corpo de um documento HTML Links, referncias a imagens, textos, e at tabelas. O alinhamento padro de uma clula esquerda horizontalmente e centralizado verticalmente, e caso o nmero de clulas varie de uma linha para outra, as linhas com menos clulas so completadas direita com clulas em branco. <TH>...</TH> Table Header ou Cabealho de Tabela Elemento que define clulas de cabealho. Clulas de cabealho tm caractersticas idnticas a clulas de dados definidas por <TD>, a no ser pelo alinhamento horizontal, que centralizado, e pela utilizao de fonte em Negrito.

Parmetros
Estes elementos bsicos, entretanto, possuem alguns parmetros que permitem um maior controle sobre alguns detalhes da apresentao da tabela.

Parmetros do elemento <TABLE>

BORDER A apresentao padro de uma tabela sem bordas. A presena do parmetro BORDER indica justamente que deve ser desenhada uma borda em torno de cada clula da tabela. Pode ser usado para indicar a espessura da borda (em pixels), com BORDER=X. Exemplo: <TABLE BORDER=2> BORDERCOLOR Permite que se coloque cores nas bordas de sua tabela e possui duas variaes: bordercolorlight e bordercolordark, permitindo que se coloque duas cores de bordas em volta de sua tabela. WIDTH Especifica a largura da tabela, que pode ser definida em pixels ou em percentual referente largura da janela. Caso no seja especificado, o prprio browser se encarrega de determinar a largura mais adequada, baseado nos textos inseridos nas clulas. Exemplo: <TABLE WIDTH=75%> CELLSPACING

23

Define o espao entra as clulas, ou seja, a largura das linhas de grade (as bordas que envolvem as clulas). especificado em pixels. Exemplo: <TABLE CELLSPACING=3> CELLPADDING Determina, em pixels, o espao entre o contedo e as bordas da clula. Exemplo: <TABLE CELLPADING=6> ALIGN Configura o alinhamento horizontal da tabela em relao aos outros elementos da pgina. Pode conter os valores LEFT (esquerda), CENTER (centro) ou RIGHT( direita). Este parmetro no funciona em alguns browsers. BGCOLOR Define a cor de fundo da tabela.

Parmetros do elemento <TR>

ALIGN Configura o alinhamento horizontal dos elementos contidos nas clulas de uma linha. Pode conter os valores LEFT, CENTER OU RIGHT. Se omitido, o alinhamento esquerda para as clulas de dados (<TD>), e centralizado para clulas de cabealho (<TH>). VALIGN Define o alinhamento vertical dos elementos contidos nas clulas de uma linha. Pode conter os valores TOP(topo), MIDLE(meio) ou BOTTOM (fundo). Se omitido, o alinhamento ao meio. BGCOLOR Define a cor de fundo da linha.

Parmetros dos Elementos <TD> e <TH>

ALIGN Configura o alinhamento horizontal dos elementos contidos na clula. Pode conter os valores LEFT, CENTER OU RIGHT. Se omitido, o alinhamento esquerda para as clulas de dados (<TD>), e centralizado para clulas de cabealho (<TH>).

24

VALIGN Define o alinhamento vertical dos elementos contidos na clula. Pode conter os valores TOP (topo), MIDLE(meio) ou BOTTON(fundo). Se omitido, o alinhamento ao meio. BGCOLOR Define a cor de fundo da linha. NOWRAP Quando este parmetro encontra-se associado a uma clula, o browser entende que o texto dentro daquela clula no pode ser dividido em mais de uma linha. Este parmetro deve ser utilizado com cuidado, para evitar colunas demasiadamente largas. COLSPAN Especifica o nmero de colunas de uma tabela a ser ocupado por uma clula. Deve ser utilizado para expandir uma clula horizontalmente. Se atribuirmos COLSPAN=2 a uma clula, ela ocupar o seu espao e o espao de mais uma clula para a direita, assim esta linha dever possuir uma clula a menos que as demais, j que uma de suas clulas valepor duas. ROWSPAN Define o nmero de linhas a ser ocupado por uma clula. Deve ser utilizado para expandir uma clula verticalmente (para baixo). Ao atribuir ROWSPAN=2 para uma clula, diminuir em 1 o nmero de clulas da linha de baixo. Vamos a um exemplo:

<html> <head> <title>Tabelas</title> </head> <body> <table border="10" width="100%" bordercolorlight="#000080"

bordercolordark="#0000FF"> <tr> <th width="100%" colspan="3">

25

<p align="center">Ttulo da Tabela</th> </tr> <tr> <td width="33%">Texto1</td> <td width="33%">Texto 2</td> <td width="34%">Texto 3</td> </tr> </table> </body> </html>

Ateno: Alm de criar tabelas para exibir dados como numa planilha, os elementos de tabelas so usados para formatar pginas de uma forma geral. Eles so usados para criar textos com elementos na tela de forma mais fcil, para delimitar reas de uma pgina e diversas outras utilidades que voc nem imagina. Por exemplo, podemos usar tabelas para garantir que o texto fique na posio A da tela e a imagem fique na posio B, independente da resoluo de vdeo do visitante de sua pgina. Utilizando uma tabela de tamanho definido, podemos evitar que a pgina fique grande demais para resolues de 640x480, podemos simular colunas de texto, entre outras aplicaes.

META
O comando META um dos comandos pouco explorados da linguagem HTML. Contudo, responsvel por importantes aspectos de uma pgina HTML. Atravs dele, podemos criar documentos dinmicos, informaes especificas que sero usadas pelo servidor, em resposta a uma solicitao do usurio, ou pelos mecanismos de busca na Internet.

Informaes especficas
Esse comando das linguagem HTML pode ser usado para criar metainformao ou variveis, e seus contedos descrevem caractersticas do

26

documento HTML, como o nome do autor, data de vencimento ou criao do documento, palavras-chave, etc. <META URL=url> O comando META deve ser especificado entre os comandos <HEAD> </HEAD>. HTTP-EQUIV=resposta CONTENT=descrio NAME=descrio

Variaes do comando meta

Usar o recurso do autocarregamento indicado quando voc deseja exibir alguma informao inicial e depois outra informao. Por exemplo o usurio acessa uma pgina que exibe informaes sobre a empresa, depois de um tempo carrega outra pgina. Isso possvel da seguinte forma: <META HTTP-EQUIV=Refresh CONTENT=5 ; URL=arquivo.htm> Outro grande uso do comando META para que possa ser usado para as consultas em mecanismos de busca, ou seja os mecanismos verificam no comando META de sua pgina qual a sua descrio e quais so as palavras chaves do site. <meta name="description" content="Site sobre Informtica"> <meta name="keywords" content="Photoshop, Flash, Fireworks, Dreamweaver, HTML"> Podemos tambm especificar o autor e programa gerador do cdigo HTML atravs do comando META <meta name="author" content="Marcos Paulo Furlan"> <meta name="generator" content="HTML-Kit">

Multimdia
O principal elemento de sucesso da Internet o hiperlink. Que permite a criao de documentos com ligaes para outros contidos em qualquer computador ligado Internet. A maioria dos usurios que acessa a Internet faz isso a partir de ambientes grficos, como o Windows, e conhecendo o Windows todos sabemos de sua capacidade em trabalhar com multimdia. Esse o

27

propsito deste captulo, vamos aprender a trabalhar com os elementos multimdia em nossas pginas. Os principais elementos multimdia para uma aplicao so: Fotos ou imagens estticas Animao udio Vdeo

Considerao no uso de multimdia

O grande inimigo da utilizao de multimdia o mesmo relacionado com as imagens, a velocidade de transferncia de informaes via Internet. Se uma imagem de 70Kb pode levar vrios segundos, ou at mesmo minutos para ser carregada imagine a execuo de um clipe de vdeo com mais de 1MB. Os vdeos vo se popularizar mais quando a Internet a cabo se tornar mais acessvel.

FOLHAS DE ESTILO
A CSS traz para a WEB a mesma convenincia de um s lugar para definir os estilos que esto disponveis na maioria dos editores de texto. Voc pode definir uma CSS em uma localizao central para afetar a aparncia das tags HTML em uma nica pgina da WEB ou em todo um site da WEB. Embora a metodologia da CSS funcione com a HTML, no HTML. Em vez disso, a CSS um cdigo separado que amplia as capacidades da HTML, permitindo que voc redefina o modo como as tags HTML funcionam.

Verses da CSS
A CSS evoluiu nos ltimos anos sob a orientao do W3C ( www.w3.org/Style/CSS/ ) at a sua verso atual a 2(dois). Embora a maioria dos browsers modernos suporte a verso mais recente, os browsers mais antigos suportam as combinaes das verses antigas da CSS. Elas so:

CSS - 1
O W3C lanou a primeira verso oficial da CSS em 1996. Essa primeira verso

28

inclua a capacidade de ncleo associada s CSS, tais como a capacidade de formatar texto, definir fontes e margens.

CSS Position (CSS-P)

Os criadores da WEB precisavam de uma forma de posicionar os elementos na tela de forma precisa. A CSS 1 j havia sido lanada e a CSS-2 ainda estava distante, de modo que a W3C lanou uma soluo intermediria: A CSSPositioning. Esse padro de destinava a ser uma proposta que seria discutida pelas vrias partes envolvidas antes de ele ser oficializado. A Firefox, Opera, Chrome e a Microsoft assumiram essas propostas, porm, e incluram as idias preliminares nas verses 4 de seus navegadores. Embora a maioria dos recursos bsicos sejam suportados em ambos os browsers como o nome de marca diversos recursos forma deixados de fora.

CSS 2
A verso mais recente da CSS surgiu em 1998. O nvel 2 inclui todos os atributos das duas verses anteriores mais uma nfase maior na facilidade de acesso e na capacidade de especificar CSSs especificas de mdia. A partir do IE e Firefox, Opera, Chrome 6 suportam CSS 2.

CSS 3
Este padro ainda est em desenvolvimento, e mesmo aps o lanamento geralmente leva alguns anos para que os navegadores suportem o padro. Sem dvida, a nova adio ser o Scalable Vector Graphics (SVG). Esse um formato que permite incluir formas (linhas, crculos, curvas e outras), como vetores e no bitmaps, levando o poder dos grficos baseados no vetor e na tipografia WEB.

Regras da CSS
O melhor da folha de estilo em cascata que ela incrivelmente fcil de configurar. No exige plug-ins ou softwares diferente apenas regras. Podemos definir regras que dizem a uma tag HTML especifica o seu contedo, ou pode criar regras genricas e, em seguida, aplic-las s TAGS como quiser. Existem trs etapas na regras da CSS. Seletor HTML: A parte de texto de uma TAG HTML se chama seletor. Exemplo:

29

p {font: bold 12pt times;} Classe: Uma classe uma regra de agente livre que pode ser aplicada a qualquer tag HTML de acordo com a sua vontade. Voc pode dar classe o nome que quiser. Uma classe o tipo de seletor mais verstil. Exemplo: .minhaclasse{font bold 12pt times;} ID: As regras de ID funcionam como os seletores de classe, porque podem ser aplicadas, a qualquer Tag HTML. Os seletores de ID, porm, geralmente so aplicados somente uma vez na pgina a determinada TAG HTML para criar um objeto para ser usado com uma funo JavaScript. Exemplo: #objeto{font bold 12pt times;}

Incluindo CSS no Documento

Embora a CSS signifique nunca ter que definir a aparncia de cada tag individualmente, voc ainda tema liberdade de definir os estilos dentro das TAGS individuais. Isso particularmente til para substituir cada um dos outros estilos que esto definidos para a pgina. Veja o exemplo abaixo:

<html> <head> <title>CSS</title> </head> <body style="background-color:black;"> <br> <h1 style="color:red">A Bruxa de Blair</h1> <h2 style="color:yellow">O Filme</h2> <BR> <P style="color:White"> o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme </p> </body> </html>

30

Incluindo a CSS em uma pgina WEB

A principal utilizao da CSS para definir as regras de todo um documento. Para fazer isso, voc deve inclui as regras de estilo no ttulo do documento aninhado dentro de um continer de estilo. Embora os resultados do acrscimo de estilo dessa forma possam parecer idnticos ao acrscimo dos estilos diretamente em uma TAG HTML, a colocao dos estilos em uma localizao comum permite alterar os estilos de um documento a partir de um nico lugar. Veja o mesmo exemplo acima como ficaria: <html> <head> <title>CSS</title> <style type="text/css"> <!-body{background-color:black;} h1{color:red;} h2{color:yellow;} p{color:white;} --> </style>

</head> <body> <br> <h1>A Bruxa de Blair</h1> <h2>O Filme</h2> <BR> <P> o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme </P> </body> </html>

31

Incluindo a CSS em um site da WEB

Um dos benefcios da CSS a possibilidade de criar uma folha de estilo para ser usada no apenas em um nico documento HTML, mas atravs de todo um site da WEB. Voc pode aplicar essa folha de estilo externa a uma centena de documentos HTML. O estabelecimento de um arquivo de CSS externo um processo de duas etapas. Em primeiro lugar, configure as regras em um arquivo de texto. Em seguida, configure as regras em um arquivo e vincule ao seu documento HTML, o arquivo que contm as formataes deve possuir a extenso CSS. Veja o mesmo exemplo: Arquivo CSS: body{background-color:black;} h1{color:red;} h2{color:yellow;} p{color:white;}

Arquivo HTML <html> <head> <title>CSS</title>

32

<link rel="stylesheet" href="configura.css"> </head> <body> <br> <h1>A Bruxa de Blair</h1> <h2>O Filme</h2> <BR> <P> o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme </P> </body> </html>

Principais atributos de uma folha de estilo

Atributos de Posio Elemento Position Top Definio Tipo de Posicionamento Exemplo de Atributo Absolute ou relative

Distncia Vertical para o canto 10in, 150px, 30 cm superior esquerdo do quadro

Left

Distncia

Horizontal para

o 10in, 150px, 30 cm

canto superior esquerdo do quadro Width Height Z-index Largura do Quadro Altura do Quadro Camada usada 10in, 150px, 30 cm 10in, 150px, 30 cm quando 1,2,3,4

sobrepondo quadros Padding Margem entre as bordas do 2,5,10,17 quadro e o texto interno ao quadro Margin Margem entre as bordas do 1,2,3,4 quadro e o texto externo ao

33

quadro Border-width Border-color Border-style Largura da borda do quadro Cor da borda do quadro Estilo da Borda Thin, medium, thick Yellow,#00FFAA None,dotted,dashed,s olid,double Broder-width Largura da borda do quadro Thin,medium,thick

Atributos de Fontes Elemento Font-family Definio Exemplo de Atributo Arial,

Fonte que ser usada para Helvetica, mostrar o texto Courier 12pt,10cm, 5in Normal, italic

Font-size Font-style Font-weight

Tamanho da Fonte Estilo Peso da fonte

Bold, lighter,100,300

Atributos e Cores de Fundo da Pgina Elemento Color Backgrouncolor Backgroundimage Imagem de fundo Imagem.gif Definio Cor do texto Cor de fundo Exemplo de Atributo Marrom,#ffffcc Marrom,#ffffcc

Atributos de Texto Elemento Definio Exemplo de Atributo

Word-spacing Espaamento entre as palavras 1em, 5pt Letterspacing Textdecoration Vertical-align Alinhamento vertical Middle, top, sub, super Decorao de texto None, underline, blink Espeamento entre as letras 0,1em, 0,1cm, 2 pt

34

Text-align Text-height

Alinhamento Horizontal Altura da Linha

Left,center, right 200%, 1.2, 20pt

Definindo classes
O uso de seletor de classes permite configurar um estilo independente que voc pode aplicar em seguida a qualquer TAG HTML Para definir um seletor de classe digite um ponto (.) e um nome de classe. Em seguida, abra a sua definio com uma chave ({) O nome da classe pode ser o que voc quiser, desde que use letras e nmeros. Por exemplo podemos criar uma classe chamada .copy{. Ela uma classe independente e voc pode us-la com qualquer TAG HTML, com uma condio: as propriedades definidas para a classe devem funcionar com o tipo de tag com a qual voc a usa. Para aplicar a sua classe a uma tag HTML inclua class=nome na tag na qual voc deseja aplicar a classe. Exemplo: <p class=copy>...</p>.

Definindo IDS
Assim como o seletor de classe, o seletor de ID pode ser usado para criar estilos exclusivos que so independentes de qualquer TAG HTML em particular. Assim sendo, eles podem ser designados a qualquer TAG HTML que se aplique. As regras de ID sempre comeam com (#) e, sem seguida, o nome do ID. O nome pode ser uma palavra ou qualquer conjunto de letras ou nmeros que voc quiser. Digite as suas definies para essa classe separando-as com um ponto e vrgula. Voc pode usar um ID com qualquer tipo de propriedade, mas o melhor uso para os seletores de ID para definir os objetos exclusivos na tela. Um ID no funcionar at ser especificada com uma TAG HTML individual dentro de um documento. Exemplo: #area{color:red;margin-left:9em;position:relative;} <P id=area>...</p>.

35

Definindo TAGS dentro do contexto

Quando uma TAG cercada por outra TAG, uma dentro da outra, so chamadas de tags aninhadas. Em um conjunto aninhado, a TAG externa chamada de pai e a interna de filha. Digite o seletor HTML da TAG pai seguida por um espao. Voc pode digitar quantos seletores, HTML quiser para quantos pais e TAGS aninhadas diferentes tiver, mas o ltimo seletor da lista aquele que recebe todos os estilos da regra. Veja o exemplo abaixo: <html> <head> <title>Tags Aninhadas</title> <style type="text/css"> <!-p a:link{color:red; text-decoration:underline;} div.menu{color:#900; font-weight:bold; text-decoration:none; font-size:20;} p{font:12px;} --> </style> </head> <body> <div class="menu"> <a href="anterior.htm">&lt; Capitulo Anterior</a> <a href="proximo.htm">Prximo Captulo &gt;</a> </div> <hr> <h3>Novo Captulo</h3> <p>Teste de pargrafo <a href="curioso.htm">Efeito curiosos</a></p>

36

</body> </html>

Definindo a CSS para impresso

Quando a maioria das pessoas pensam em pginas WEB, pensa nessas pginas exibidas na tela. Entretanto, mais cedo ou mais tarde, a maioria das pessoas quer imprimir pelo menos algumas pginas da WEB. O que parece bem na tela nem sempre bom quando impresso. A CSS permite dizer ao browser para usar folhas de estilo diferentes dependendo da pgina da WEB se destinar ao monitor do computador ou a impressora. Crie duas folhas de estilo (arquivos.css), uma otimizada para o uso em uma tela de computador e outra adaptada para a impresso. Veja os cdigos abaixo: CSS para Tela: body{ color:white; font-family:Arial; background:black url(images/backarvore.jpg) no-repeat;} h1,h2{ font-weight:bold;} .cassea{ color:#999999;} CSS para Impresso: body{ color:black; font-family:Arial; h1,h2{ font-weight:bold;} .cassea{ color:#999999;} Cdigo no HTML:

37

<html> <head> <title>Midias Diferentes</title> <link rel="stylesheet" href="tela.css" media="screen"> <link rel="stylesheet" href="impressao.css" media="print"> </head> <body> <h1> Mdia de tela </h1> <br> <span class="classea">O que pode ser visto na tela ser diferente na impresso</span> <hr> <h2>Teste</h2> </body> </html>

Definindo Quebras de pgina para a impresso

Um problema que voc encontrar ao tentar imprimir um site da WEB so as quebras de pgina. Na verdade, uma pgina da WEB pode conter diversas pginas impressas. Assim sendo, o cabealho de uma seo pode aparecer na parte inferior de uma pgina e seu texto na parte superior da prxima pgina. Podemos forar uma quebra de pgina ao imprimir uma pgina da WEB, para isso utilize: < TAG style=page-break-before:always;>....</TAG> Onde always Fora a quebra de pgina antes do elemento. Auto permite

que o browser coloque as quebras de pgina.

Controles de Texto
O Kerning se refere quantidade de espao que h entre as letras de uma palavra. Geralmente, quando h mais espao entre as letras a facilidade de leitura maior. Por outro lado, espao de menos pode impedir a leitura, fazendo com que as palavras individuais apaream menos distintas na pgina. Para definir o Kerning:

38

Letter-spacing: 2em. Um valor positivo para o espaamento de letras inclui mais espao na quantidade padro; um valor negativo fecha o espao. Podemos tambm ajustar o espaamento entre as palavras. A incluso de um pequeno espao entre as palavras na tela pode ajudar a tornar o seu texto mais fcil de ler, mas espao demais interrompe o caminho do olho do leitor na tela. Para definir estes espaamento: Word-spacing: 8px;

Ajustando as Entrelinhas
O espao entre as linhas tambm podem ser aumentados para dar um efeito dramtico, criando reas de espao em negativo no texto. Mas tambm podem ser usados para facilitar a leitura e incluso de comentrios em seu texto. Para definir o espaamento entra linhas: Line-height:2; ou line-height:12px ou line-height:%

Definindo Segundo Plano

Podemos usar a propriedade background para definir a imagem e a cor do segundo plano de toda a pgina ou a imagem e cor de segundo plano imediatamente atrs de cada elemento individual da pgina. Para definir o segundo plano iniciamos a digitao com a propriedade background seguida de dois pontos e em seguida dos valores de segundo plano: White Digite um valor para a cor que voc deseja para o segundo plano

seguido de um espao. Esse valor pode ser o nome da cor, um valor hexadecimal de cor ou um valor RGB. url(imagem/figura.jpg) Para utilizar uma figura de fundo podemos definir a

localizao do arquivo. Alternativamente pode-se usar none em vez de url, ele instrui a browser a no utilizar uma imagem de segundo plano. Repeat Defina qual ser o modo de repetio a ser utilizado eles podem ser:

Repeat-x: Instrui o browser para repetir o grfico de segundo plano na horizontal.

39

Repeat-y: Instrui o browser para repetir o grfico de segundo plano na vertical. No-repeat: faz com que o grfico de segundo plano aparea apenas uma vez. Fixed: Instrui para que a figura fique fixa ou seja no role com o site. Scroll: Instrui para que a imagem role junto com a tela. Right top: Digite dois valores separados por um espao para especificar o lugar onde o segundo plano deve aparecer em relao ao canto superior esquerdo do elemento.

Bordas
Para definir um atributo de borda para uma caixa simultaneamente a CSS fornece a propriedade border, voc pode usar border para definir a largura, o estilo e/ou a cor. Tambm possvel definir a borda do elemento em cada lado da caixa individualmente. As principais propriedades para bordas so: border-width, border-style, bordercolor. Boder style None Dotted Dashed Solid Double Groove Ridge Inset outset Border width Thin Medium Tick lenght

Envolvendo um elemento com texto

No inicio do desenvolvimento HTML, quando a capacidade de fazer o texto flutuar ao redor de um grfico foi includa, os designers de toda parte estavam maravilhados. A CSS levou este passo um pouco adiante, permitindo que o texto no apenas flutue ao redor do texto, mas tambm que flutue ao redor dos outros blocos de texto e do texto ao redor das tabelas, para isso usamos a

40

propriedade float. Inicie sua definio digitando a propriedade float seguida de dois pontos. A seguir digite uma palavra-chave para dizer ao browser o lado da tela no qual o elemento deve flutuar, e estas podem ser : right, left e none. Por exemplo Img{float:right;}

Posicionamentos
Quando voc define os atributos de uma tag HTML, por meio de um seletor em uma CSS, na verdade, voc separa todo o contedo dentro de um continer daquela TAG como sendo um elemento exclusivo da janela. Em seguida possvel manipular esse elemento exclusivo por meio do posicionamento da CSS. Um elemento pode ter um de quatro valores de posicionamento esttico, relativo, absoluto ou fixo embora apenas os trs primeiros normalmente estejam disponveis na maioria dos browsers. O tipo de posicionamento diz ao browser como ele deve tratar o elemento ao posicion-lo na janela.

Posicionamento Esttico
Como padro, os elementos so posicionados como estticos dentro da janela, a menos que voc os defina com os outros posicionamentos. Entretanto o posicionamento esttico diferente, porque um elemento esttico no pode ser posicionado ou reposicionado explicitamente.

Posicionamento Relativo
Um elemento definido como sendo posicionado relativamente fluir at o seu lugar dentro da janela ou dentro de seu elemento pai, assim como o comportamento padro de qualquer outro elemento da HTML ou seja, ele aparece aps tudo que est antes dele na HTML e antes de tudo que est aps ele na HTML. Voc pode mover um elemento posicionado relativamente a partir de sua posio natural na janela usando as propriedades top e left. Essa tcnica til para controlar o modo como os elementos aparecem com relao aos outros elementos da janela.

41

Posicionamento Absoluto
O posicionamento absoluto cria um elemento independente um agente livre separado do restante do documento, no qual voc pode colocar qualquer tipo de contedo HTML que quiser. Os elementos que so definidos dessa forma so colocados em um ponto exato da janela por meio das coordenadas x e y. O canto superior esquerdo da janela ou de seu elemento continer a origem.

Posicionamento 3D
Apesar da rea da tela ser bidimensional, os elementos que so posicionados podem receber uma terceira dimenso: uma ordem de empilhamento na qual um elemento se relaciona ao outro. Os elementos posicionados recebem nmeros automticos de empilhamento, a partir do 0 (zero)incrementalmente com 1,2,3 e assim por diante. Esse sistema chamado de ndice Z. O nmero de ndice Z de um elemento um valor que mostra sua relao 3D com os outros elementos da janela. Para definir o ndice Z de um elemento, primeiro defina o posicionamento (ex: absolute) depois z-index:n. css- cascading style sheet Uma folha de estilos um conjunto de regras que informa a um programa, responsvel pela formatao de um documento, como organizar a pgina, como posicionar e expor o texto e, dependendo de onde aplicado, como organizar uma coleo de documentos. Na Web, os "pargrafos" so blocos marcados por descritores HTML como <H1>, <P>, etc. Para fazer com que todos os blocos de textos marcados com <H1> em um documento sejam exibidos em tamanho de 48 pontos, basta definir a regra: H1 {font-size: 48pt} dentro de uma "folha de estilos" aplicada ao documento. A folha de estilos pode ser um arquivo de textos simples com a extenso .css. Para vincul-lo a uma pgina HTML, esta deve ter dentro do seu bloco <HEAD> ... </HEAD> o seguinte descritor: <LINK REL="stylesheet" HREF="url_do_arquivo.css">

Regras, declaraes e seletores

A estrutura dos estilos bastante simples. Consiste de uma lista de regras.

42

Cada regra possui um bloco, entre chaves ({ e }), de uma ou mais declaraes aplicveis a um ou mais seletores. Um seletor algo no qual se pode aplicar um estilo. Pode ser um descritor HTML, uma hierarquia de descritores ou um atributo que identifique um grupo de descritores. Uma folha de estilos consiste de uma ou mais linhas de regras, da forma: seletores { declaraes } As regras podem estar dentro de um arquivo de texto com extenso .css" ou embutidas em um arquivo HTML (as vrias maneiras de aplicar estilos a um arquivo HTML sero vistas na seo seguinte). Um exemplo de folha de estilos com apenas uma regra foi mostrada na seo anterior: H1 {font-size: 48pt} Nesta regra, H1 o seletor e {font-size: 48pt} o bloco da declarao, que estabelece um tamanho de fonte (prop. font-size) para todos os objetos (pargrafos) marcados com <H1>. As declaraes so feitas usando a sintaxe: propriedade: valor Observe que se usa dois-pontos (:) e no igual (=) para aplicar um valor a uma propriedade. Pode haver mais de uma declarao de estilo para um seletor. Isto pode ser feito em outro bloco. Cada linha acrescenta ou sobrepe declaraes feitas em linhas anteriores: H1 {font-size: 24pt} H1 {color: blue} H1 { font-size: 18pt } No trecho acima, o texto marcado com <H1> ser azul e ter tamanho de 18pt porque a regra H1 { font-size: 18pt } ocorreu depois da regra H1 { font-size: 24pt }.

Mltiplas declaraes e seletores

Vrias declaraes de estilo podem ser aplicadas de uma vez a um seletor. As declaraes, ento, precisam ser separadas por ponto-e-vrgula (;) : H1 {font-size: 18pt; color: blue; font-family: Caslon, serif}

43

BODY {background: navy; color: white} Os espaos em branco (espaos, novas-linhas e tabulaes) so ignorados pelo browser na hora de interpretar uma folha de estilos e podem ser usados para melhorar a sua legibilidade. As duas linhas acima ficariam mais legveis da forma: BODY {background : navy; color : white } H1 {color: blue; font-size: 18pt; font-family: Caslon, serif } Uma declarao s termina com uma fecha-chaves (}) ou com um ponto-evrgula (;). Dependendo da propriedade, esta pode ter vrios valores separados por vrgulas ou valores compostos com as palavras separadas por espaos: P { font: 12pt "Times New Roman" bold } H2 { font-family: Arial, Helvetica, Sans-serif } As aspas devem ser usadas quando uma palavra que tem espaos precisar ser usada. No exemplo acima, o nome "Times New Roman" deveria ser tratado como o nome de uma fonte distinta, e no como trs valores, o que ocorreria se as aspas no estivessem presentes. Assim como um seletor pode ter vrias propriedades definidas para ele, um mesmo conjunto de propriedades pode ser aplicado a um grupo de seletores, separando-os com vrgulas: H1, H2, H3 { color: blue; font-size: 18pt; font-family: Arial, Helvetica, Sans-serif } Ao utilizar folhas de estilo, deve-se respeitar os elementos HTML que possuem descritores finais freqentemente ignorados, como </P>, </LI>, etc. A falta do </P> pode causar o "vazamento" das declaraes de estilo para fora do pargrafo em alguns browsers.

Comentrios e instrues
Alm das regras, um arquivo CSS pode ter ainda comentrios e instrues

44

(precedidas de @). No CSS1 apenas uma instruo definida: @import. Ela usada para que uma folha de estilos possa importar estilos de outro arquivo CSS atravs de uma URL. Os estilos importados sempre tm menos precedncia que os locais (ou seja, os locais podem sobrepor os importados). A sintaxe da instruo @import : @import url(url_da_folha_de_estilos) No deve haver outras estruturas (a no ser comentrios) na linha onde h uma instruo. Exemplos do uso de @import: @import url(../estilo.css) @import url(http://www.apostilando.com/estilo.css) Pode-se inserir trechos que sero ignorados pelo browser ao interpretar folhas de estilo usando blocos de comentrio. Comentrios em folhas de estilos so iguais a comentrios em linguagens como Actionscipt: entre /* e */:

Valores
Os valores que so aplicados s propriedades tm uma sintaxe que depende da propriedade que os usa. Propriedades que envolvem tamanho (tamanho de fontes, espaamento, etc.) geralmente recebem valores que consistem de um nmero e uma unidade ou porcentagem. O sinal de porcentagem ou unidade deve estar junto ao nmero correspondente sem espaos. Ou seja, deve-se escrever font-size: 24pt e no font-size: 24 pt. Cores e arquivos externos podem requerer uma funo para serem definidos. So duas as funes (ou procedimentos) do CSS1: rgb(), que constri uma cor, e url(), que retorna um vnculo para uma imagem ou arquivo CSS (usada em instrues @import). H quatro maneiras diferentes de especificar cores em CSS: usando o nome do sistema (red, yellow, blue, black, lightGray), usando seu cdigo RGB hexadecimal (ff0000, ffff00, 0000ff, 34adfc, 80a7a7) ou usando a funo rgb(). A funo rgb() requer trs argumentos que representam a intensidade dos componentes vermelho (R), verde (G) e azul (B) de uma cor em forma de luz (no opaca). A intensidade pode ser expressa em valores inteiros de 0 (mnimo) a 255 (mximo) ou em valores fracionrios de 0% a 100%. As instrues abaixo definem a mesma cor para um pargrafo:

45

P {color: red} P {color: ff0000} P {color: rgb(100%, 0%, 0%)} P {color: rgb(255, 0, 0)} No deve haver espao entre o "b" de rgb e o abre-parnteses. A funo URL pode ser usada em propriedades que requerem arquivos (no caso, imagens) como valores. Ela recebe um argumento apenas com a URL (relativa ou absoluta) da imagem: P {background-image: url(imagem/textura.jpg)} P url(http://www.apostilando.com/imagem/textura.jpg)} {background-image:

Herana
Os estilos "herdam" propriedades de vrias maneiras. Uma das formas atravs da prpria hierarquia do HTML. Se voc declara propriedades para BODY, todos os descritores sero afetados a no ser que tenham as suas propriedades redefinidas dentro de um novo bloco de declaraes CSS. Se um <I> est dentro de um <P> e todos os <P> so declarados como tendo a cor vermelha, o <I> tambm ser vermelho a menos que haja um bloco, posterior quela declarao, redefinindo as propriedades de <I>, por exemplo: P {font: 12pt "Times New Roman" bold; color: red } I {color: black } Faria com que o texto "seletor", no texto a seguir permanecesse preto: <P>Um <I>seletor</I> algo no qual se pode aplicar um estilo.</P> Se voc definir atributos para os descritores <BODY> ou <HTML>, toda a pgina ser afetada. No exemplo a seguir, uma cor de texto definida para BODY ser usada para colorir todo o texto do documento, a no ser que sejam sobrepostos por uma regra subseqente: BODY {color: navy } H1, H2 {color: yellow } Os blocos acima faro com que todo o texto seja azul marinho, exceto aquele

46

marcado com H1 ou H2, que ser amarelo.

Os browsers comerciais tm problemas principalmente com a aplicao de estilos em BODY, portanto, freqentemente preciso mexer nas declaraes de estilo, acrescentando propriedades redundantes para adaptlos realidade. No site do W3C (http://www.w3.org) h links para documentos que analisam essas diferenas entre browsers. O site

http://www.w3.org/Stye/CSS/Test/ uma plataforma de testes que pode ser usada para verificar se um browser suporta ou no determinada propriedade.

Como incluir estilos em uma pgina

H trs formas de aplicar uma folha de estilos a uma pgina Web. Estas formas iro determinar a abrangncia dos estilos: se afetaro um trecho limitado de uma pgina, se a toda a pgina, ou se iro afetar todo um site. A primeira forma, mais abrangente, a vinculao a um arquivo CSS. Isto feito ligando a pgina HTML a um arquivo de folha de estilo, usando do descritor <LINK>. Este mtodo permite que mltiplas pginas ou um site inteiro usem a mesma folha de estilos. Para fazer um vnculo a uma folha de estilos externa, deve-se criar um arquivo de texto contendo um conjunto de regras de estilo em CSS, salv-lo com uma extenso ".css" e cham-lo a partir de todos os documentos HTML onde o estilo ser aplicado. No preciso compilar ou qualquer coisa do tipo. Depois que as definies estiverem prontas, o estilo estar pronto para ser usado. Pode ser importado atravs do descritor LINK: <HEAD> <LINK REL=STYLESHEET HREF="estilo.css" TYPE="text/css"> </HEAD> Uma segunda forma, permite que estilos sejam aplicados localmente, em uma nica pgina, embutindo uma folha de estilos diretamente na pgina HTML dentro de um bloco formado pelos descritores <STYLE> e </STYLE>. Este mtodo permite que voc altere as propriedades de estilo de uma nica

47

pgina. A linguagem que embutida em um bloco <STYLE> a mesma usada nos arquivos CSS. <STYLE> ... </STYLE> deve ser usado em <HEAD>. Um atributo type informa o tipo de arquivo utilizado: <style type="text/css"> P { font: 12pt "Times New Roman" bold; color: red } I { color: black } </style>

As propriedades declaradas no bloco <STYLE> sobrepem qualquer propriedades anteriores do elemento (inclusive as de uma folha de estilos importada, se houver). comum colocar todo o cdigo entre comentrios HTML (<!--e -->) para proteger browsers antigos da exibio indesejada do cdigo: <style type="text/css"> <!-P { font: 12pt "Times New Roman" bold; color: red } I { color: black } --> </style>

48

Finalmente, h uma forma de aplicar estilos diretamente a um descritor individual. Para fazer isto se deve usar o atributo STYLE em quase qualquer descritor. Este mtodo no corresponde exatamente a uma "folha" de estilos, pois os estilos aplicados no so reaproveitveis. Permite alterar a aparncia de um nico descritor, de um conjunto deles ou de um bloco de informaes da pgina. Por exemplo: <P STYLE="color: green; font-size: 12pt">Teste</P> Esta propriedade mais interessante quando aplicada em um descritor que usado para agrupar vrios outros, como <DIV>, que divide a pgina em sees ou <SPAN>, usado em situaes bem especficas. Usar estilos desta forma pouco diferente de usar atributos locais. Os benefcios de poder mudar a fonte, cores e outras caractersticas em todo o documento ficam mais difceis. Pode-se usar um, dois ou os trs mtodos ao mesmo tempo. As caractersticas definidas pelos mais especficos sobrepem as definidas pelos mais genricos. Por exemplo, suponha que o arquivo estilos.css contenha apenas as seguintes regras: H1 { color: green; font-size: 24pt} P { color: blue} Suponha que ele seja carregado na pgina a seguir que possui um bloco <STYLE> com uma nova definio de P e H1. <HEAD> <link rel=STYLESHEET href="estilos.css" type="text/css"> <style type="text/css"><!-P {font: 12pt "Times New Roman" bold; color: red } H1 {color: black } --></style> </HEAD> Mais adiante, existe um pargrafo e um ttulo da forma:

49

<h1 style="color: navy">Apostilando</h1> <p style="color: black">Webkit Aplicaes Dinmicas</p> Qual estilo ir predominar? Pela regra de que o mais especfico sobrepe o mais geral, teremos uma pgina onde os <h1> tm tamanho 24pt (do estilo importado), cor preta (valor sobreposto pelo estilo da pgina) e os <p> so vermelhos (sobreposto pelo estilo da pgina). Nas duas linhas acima (e nelas apenas), o <h1> ser azul marinho (sobrepondo o estilo da pgina) e o <p> ser preto.

Classes e IDs
s vezes um pargrafo tem uma aparncia diferente dos outros pargrafos em certa parte do texto. Para mudar o estilo dele, pode-se incluir as declaraes em um atributo STYLE. Mas, se tal procedimento torna difcil a localizao e a gerncia dos estilos, pode-se usar um recurso para marc-lo de forma que seja considerado diferente. Isto pode ser feito atribuindo-lhe uma identificao nica. Em HTML, pode-se usar o atributo ID: <P ID=w779>Texto</P> Para alterar as caractersticas deste pargrafo agora, pode-se usar o seu ID como seletor, da forma: #w779 {color: cyan } Se isto estiver em um arquivo CSS, todas as pginas que o usam e que tiverem um elemento com o ID #w779 sero afetadas. Se houver mais de um com o mesmo ID apenas o primeiro ser afetado. Melhor que usar ID agrupar caractersticas semelhantes em classes. Uma classe uma variao de um determinado objeto. Por exemplo, um texto teatral pode ter trs pargrafos com apresentao diferente, representando as falas de trs personagens. Se quisssemos que cada um tivesse uma cor diferente, poderamos declarar cada um como sendo de uma classe distinta: <p class=flex>Aplicaes Ricas</p> <p class=PHP>Aplicaes Dinmicas</p> <p class=Joomla>CMS</p> <p class=flex>RIAS </p>

50

Uma classe tambm pode conter descritores diferentes. Se todos os textos citados por certo autor tivessem que estar em outra cor ou fonte, poderamos criar uma classe sem citar o descritor: .verde { color: green } Todos os descritores que tiverem o atributo CLASS=verde sero afetados, por exemplo: <P class=verde>, <h3 class=verde>, <table class=verde>, etc.

Links (pseudo-classes e pseudo-elementos)

Para seletores especiais que mudam de estado, como o texto marcado com <A>, possvel atribuir propriedades diferentes para cada estado: A:link {color: red} A:active {color: 660011} A:visited {color: black; text-decoration: none} A:hover {color: blue; text-decoration: underline} Muda as caractersticas dos links no-visitados, ativos e visitados. Assim como qualquer seletor, os links podem ser combinados com outros descritores: P, A:link, H2 {color: red}

Fontes
Fontes so estilos de apresentao consistentes aplicados a alfabetos. Uma fonte consiste de atributos que alteram a aparncia de um smbolo, sem alterar o seu significado. Oferecem as informaes necessrias para que uma letra ou smbolo possa ser representado graficamente. Os atributos essenciais de uma fonte so: Seu tipo (ou famlia) Seu tamanho Seu estilo (regular, itlico, outline, etc.) Seu peso (normal, negrito, light, black)

Para representar qualquer texto, portanto, preciso escolher uma fonte, ou seja: um tipo, um estilo, um peso e um tamanho. Letras maisculas e minsculas no so consideradas fontes diferentes, pois tm um significado distinto.

51

Os quatro atributos acima podem ser definidos em CSS atravs das propriedades font-family, font-size, font-style e font-weight. No preciso definir todas pois sempre tm valores default. CSS oferece ainda font-variant, que permite considerar outras variaes de uma fonte.

font-family
Uma famlia de fontes (tipo) selecionada com a propriedade font-family. Esta propriedade aceita uma lista de valores separados por vrgulas representando nomes de fontes existentes ou no no sistema do usurio. No final da lista, pode ser includa uma referncia a uma famlia genrica, que ser usada caso nenhum dos nomes coincida com o nome de uma fonte do sistema. A sintaxe : font-family: fonte1, fonte2, fonte3, ..., fonte-genrica Exemplos: H1 { font-family: garamond } H2 { font-family: arial, helvetica, sans-serif } H3 { font-family: courier, "courier new", monospaced } H4 { font-family: monospaced }

Uma forma de facilitar a aplicao e a criao de estilos com o Adobe Dreamweaver.Ele possui uma janela de configurao de estilos.

52

Na parte de baixo do painel esto disponveis os botes de link,que permite ligar um arquivo externo ao seu HTML. O boto ao lado permite criar um novo estilo, e o terceiro boto (forma de lpis), permite editar um estilo existente.

font-size
O tamanho de uma fonte alterado usando font-size. Pode ser especificado em valores absolutos ou relativos. Para especificar um valor absoluto, pode-se usar: font-size: nmero(pt | px | cm | mm | pc | in) font-size: xx-small|x-small|small|medium|large|x-large|xx-large O tamanho tambm pode ser especificado relativo ao elemento no qual o atual objeto est contido. font-size: tamanho_relativo (smaller, larger) font-size: comprimento (em ou ex) font-size: porcentagem% Exemplos: H1 { font-size: 24pt} H1 { font-size: x-large} H1 { font-size: smaller}

53

H1 { font-size: 1.5em} H1 { font-size: 150%} <H1 style="font-size: 1cm"> Os tamanhos de pontos devem ser especificados como valores inteiros (mesmo se usados cm ou in). Os browsers podem formatar os tamanhos de forma diferente e os mesmos podem ser alterados pelos usurios nos browsers atuais. As unidades vlidas so: pt (pontos), px (pixels), pc (paicas), cm (centmetros), mm (milmetros) e in (polegadas). Os tamanhos absolutos chamados pelo nome (xx-small, etc.) correspondem aos tamanhos de 1 a 7 do descritor <font size> e podem variar de acordo com a famlia de fontes usada (variam bastante entre plataformas tambm). Os tamanhos relativos funcionam como o <BIG> e <SMALL>, aumentando a fonte atual por 150%. A diferena que podem passar alm do limite xx-large (ou <font size=7>) ou xx-small (font size=1>). Os comprimentos referem-se a unidades comuns em tipografia. Um "em" uma distncia horizontal equivalente ao tamanho de uma fonte (se uma fonte tem 20 pontos de tamanho, um em corresponde a uma distncia de 20 pixels de largura). Um "ex" a altura das letras de caixa-baixa (sem incluir as hastes ascendentes e descendentes). Tanto "em" como "ex" usam valores relativos ao elemento que contm o elemento atual. So teis principalmente em espaamento, sendo pouco usados em fontes. As porcentagens so afetadas pela herana, por exemplo: <style> .sec {font-size: 18pt}; .sec H1 {font-size: 200%} .sec P {font-size: 50%} </style> </head>

<body> <div class=sec>Texto.> <h1>2 vezes maior</h1>

54

<p>Este um pargrafo da seo. O texto tem 50% do tamanho do texto da seo.</p> </div>

font-style e font-weight
O estilo de uma fonte afetado atravs de duas diferentes propriedades: fontweight, que altera o peso da fonte, e font-style, que altera o estilo ou inclinao. Sintaxe: font-style: normal (ou italic, oblique) Exemplos: H1 { font-style: italic } I { font-style: normal } <p style="font-style: oblique">...</p> Sintaxe: font-weight: normal | bold (normal=400 e bold = 700) font-weight: bolder | lighter (valores relativos) font-weight: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 Exemplos: H1 { font-weight: normal } B { font-weight: 900 } <b> ... <b style="font-weight: bolder">...</b> ... </b> A palavra oblique deve fazer com que fontes chamadas de "oblique" (se existirem no sistema) sejam usadas, assim como ocorre com fontes "italic". A rigor, italic uma fonte distinta da normal, e no, meramente uma verso inclinada da mesma. Os browsers, porm, no encontrando um equivalente "italic", "oblique", "kursiv" ou similar iro inclinar o texto, simulando um itlico. Os valores numricos para font-weight oferecem um controle excepcional sobre o peso da fonte na tela, embora isto esteja limitado aos nveis disponveis nas fontes instaladas (para um mesmo nome de fonte). Na prtica, dos 9 nveis disponveis de peso, se consegue 4 ou 5 nveis diferentes de mais pesado ou mais leve. 700 o "bold" tpico e 400 o "normal".

55

font-variant
Atualmente a nica opo disponvel para esta propriedade small-caps, que deve colocar o texto selecionado em maisculas, porm menores que as capitulares. Sintaxe: font-variant: small-caps Exemplos: <style> .sm {font-variant: small-caps} .tc {font-size: 120%} </style> </head>

<body> <p>Um texto simples sem SmallCaps...</p> <p class=sm>Um texto simples com SmallCaps...</p> <p>Os small-caps acima, no Internet Explorer 4, so falsos. As letras maisculas no deveriam ter sido afetadas.</p> <p><span class=sm><span class=tc>U</span>m texto simples com <span class=tc>S</span>mall<span verdadeiros</span>.</p> class=tc>C</span>aps...

text-transform
A propriedade text-transform realiza transformaes no formato caixa-alta ou caixa-baixa do texto. Sintaxe: text-transform: capitalize text-transform: uppercase text-transform: lowercase text-transform: none (valor default) Exemplos: H1 {text-transform: capitalize} Capitalize coloca a primeira letra de cada palavra em maisculas. Uppercase coloca tudo

56

em maisculas e lowercase coloca tudo em minsculas. None remove qualquer transformao deixando o texto da forma como foi definido antes das transformaes. <style> p {font-weight: bold} span {font-weight: normal} .non {text-transform: none} .upp {text-transform: uppercase} .cap {text-transform: capitalize} .low {text-transform: lowercase} </style> <p>Sem transformao: <span class=non> preciso conhecer bem HTML e CSS</span></p> <p>Uppercase: <span class=upp> preciso conhecer bem HTML e CSS</span></p> <p>Capitalize: <span class=cap> preciso conhecer bem HTML e CSS</span></p> <p>Lowercase: <span class=low> preciso conhecer bem HTML e CSS</span></p>

text-decoration
A propriedade text-decoration permite colocar (ou tirar) sublinhados, linhas sobre e atravessando o texto, etc. Sintaxe: text-decoration: underline (default em links) text-decoration: overline text-decoration: line-through text-decoration: blink text-decoration: none (default) Exemplos: h1 {text-decoration: overline} <a href="arquivo.html" style="text-decoration: none">Link sem sublinhado</a> <style>

57

.und {text-decoration: underline} .ovr {text-decoration: overline} .blk {text-decoration: blink} .lin {text-decoration: line-through} .non, .non a {text-decoration: none} </style>

text-align e vertical-align
CSS oferece propriedades que permitem controlar o alinhamento horizontal do texto, seu alinhamento vertical e endentao do texto na primeira linha. O alinhamento horizontal o mesmo conseguido com o atributo align do HTML, s que o da folha de estilos tem precedncia. A sintaxe : text-align: left | right | center | justify O alinhamento s se aplica a elementos de bloco (<P>, <DIV>, H1, etc.) e elementos como applets e imagens. A caracterstica herdada para sub-blocos. O valor default sempre left. Exemplo: DIV { text-align: center } Alinhamento vertical em HTML s pode ser aplicado a tabelas e imagens. Com CSS, esta propriedade estendida a qualquer elemento de texto e imagens. A sintaxe : vertical-align: baseline | top | text-top | middle | bottom | text-bottom vertical-align: sub | super vertical-align: porcentagem % O valor default baseline. As porcentagens referem-se altura da linha (lineheght) do prprio elemento. Usando porcentagens negativas consegue-se sobrepor elementos.

text-indent
A propriedade text-indent se aplica a elementos de bloco e realiza a endentao da primeira linha. A sua sintaxe : text-indent: comprimento text-indent: porcentagem A porcentagem ocorre em relao largura do elemento que contm o seletor.

58

Pode ser a largura total da pgina, a largura da clula de uma tabela, etc. Exemplos: P { text-indent: 1 cm } P {text-indent: 50% } <P style="text-indent: 1in">

line-height
Este atributo usado para controlar o espao que existe antes e depois de uma linha de texto. Ela especifica a altura total de uma linha de texto. Se voc tem um texto de 10 pontos e uma line-height de 20 pontos (line-height: 2), haver 5 pontos antes e 5 pontos depois de cada linha de texto (espao duplo). O espao simples equivale geralmente a line-height: 120%. Uma line-height menor que o tamanho da fonte produzir sobreposio de texto. Embora ambos os browsers mais populares suportem este recurso, ele no ocorre da maneira correta. Os browsers no acrescentam a mesma quantidade de espao antes e depois como esperado.

letter-spacing
A propriedade letter-spacing altera o espao entre as letras. A sua sintaxe : letter-spacing: normal letter-spacing: comprimento As unidades podem ser quaisquer uma das unidades vlidas para tamanho de fontes (pt, px, pc, cm, in, mm, em e ex). Na tipografia, mais comum usar "em" como medida de espaamento por ser proporcional ao tamanho da fonte.

Propriedade Color
Define a cor do texto. A propriedade color substitui totalmente o descritor <FONT COLOR> com vantagens. Pode ser aplicada localmente em um descritor (usando o atributo style) ou globalmente na pgina e no site, como qualquer outra propriedade de estilo. A sintaxe da propriedade color : color: nome_de_cor color: #nmero_hexadecimal

59

color: rgb(vermelho, verde, azul) Exemplos: H1 { color: green } P { color: #fe0da4 } EM { color: rgb (255, 127, 63) } <EM STYLE="color: rgb (100%, 50%, 25%)"> Os nomes so qualquer nome vlido de cor. Se o browser no encontrar o nome ao qual o estilo se refere, deve exibir a cor default (ou herdada). O smbolo "#" opcional no cdigo hexadecimal. A intensidade da cor pode ser expressa em valores absolutos (0 a 255) ou percentagens (0.0-100.0%).

background-color
As cores de fundo de qualquer elemento podem ser alteradas atravs da propriedade background-color. A sintaxe : background-color: transparent background-color: nome_de_cor background-color: #nmero_hexadecimal background-color: rgb(vermelho, verde, azul) Exemplos: H1 { background-color: green } P { background-color: #fe0da4 } EM { background-color: rgb (255, 127, 63) } <EM STYLE="background-color: rgb (100%, 50%, 25%)"> O fundo transparente simplesmente deixa mostra o fundo do objeto que o contm. O fundo, para texto, ocupa todo o espao da fonte (inclusive espao em branco acima e abaixo que fazem parte da fonte). A cor no estendida quando o espaamento entre linhas aumentado em alguns browsers. (valor default)

background-image
Com background-image possvel atribuir a qualquer elemento HTML uma imagem que ser exibida no fundo, assim como as cores de fundo. A sintaxe : background-image: none (valor default)

background-image: url(URL_da_imagem)

60

Exemplos: H1 { background-image: url(http://www.apostilando.com/imagens/textura.jpg) } B {background-image: url(imagens/textura.jpg) navy <TD STYLE="background-image: url(imagens/textura.jpg)">...</TD> As URLs so relativas localizao do arquivo que contm a folha de estilos (pode ser a prpria pgina ou no). A cor de backup usada para 'vazar' pelas partes transparentes da imagem ou prevenir contra o no carregamento do fundo (para permitir a leitura em fundo escuro pode-se usar preto como cor de backup de uma imagem escura). CSS permite mais controle ainda sobre a imagem de fundo, facilitando a maneira como a mesma ir se repetir. A propriedade background-repeat. Sintaxe: background-repeat: repeat background-repeat: repeat-x background-repeat: repeat-y background-repeat: no-repeat Exemplos: BODY {background-image: url(imagens/textura.jpg); background-repeat: repeat-x } TABLE{background-image: url(imagens/textura.jpg) background-repeat: no-repeat } O valor repeat default e faz com que a imagem ocupe toda a tela. repeat-x faz com que a imagem seja repetida apenas horizontalmente e repeat-y faz com que ela seja repetida apenas verticalmente. no-repeat faz com que a imagem no seja repetida de forma alguma (aparecer uma imagem apenas no canto superior esquerdo). Para fazer a imagem aparecer em outros lugares, pode-se usar as propriedades de posicionamento do fundo da tela. O posicionamento e a forma de exibio do papel de parede so controlados pelas propriedades background-attachment e background-position. A primeira define se o fundo ir ou no se mover com o texto ou ficar fixo na tela. A segunda permite o posicionamento do fundo em um local exato da tela. (default)

61

Sintaxe: background-attachment: fixed background-attachment: scroll Exemplo: BODY {background-image: url (imagem/textura,jpg); background-attachment: fixed } Sintaxe: background-position: porcentagem_horiz% porcentagem_vert% background-position: comprimento comprimento background-position: posio_vertical posio_horizontal Exemplos: BODY {background-image: url(imagem/textura.jpg); background-repeat: no-repeat; background-position: 50% 100% } BODY {background-image: url(imagem/textura.jpg); background-repeat: no-repeat; background-position: 25pt 2.5cm } BODY {background-image: url(imagem/textura.jpg); background-repeat: no-repeat; background-position: center top } BODY {background-image: url(imagem/textura.jpg); background-repeat: no-repeat; background-position: left bottom } Os valores de porcentagem so relativos posio do elemento sobre o qual se aplica o estilo. As posies so sempre dadas em pares, tendo os valores separados por espaos. O primeiro valor sempre um valor horizontal e o segundo um valor vertical. O browser coloca o bloco afetado dentro de uma "caixa invisvel" e a posiciona de acordo com as porcentagens. Um valor de 100% para o primeiro valor, empurra a margem direita (oposta) desta "caixa invisvel" contra a margem direita do browser. Os valores de comprimento, assim como os de porcentagem tambm so dados em pares. O primeiro distncia da margem horizontal a partir do

62

canto superior esquerdo do objeto; o segundo distncia da margem superior. As unidades vlidas so as mesmas usadas em fontes (cm, mm, in, pc, px, pt, em, ex) e podem ser misturadas nos dois valores do par. Os valores de posio so palavras-chave usadas tambm aos pares. So equivalentes das porcentagens bsicas de alinhamento. O primeiro par pode ter left (0%), right (100%) ou center (50%). O segundo par pode ser top (0%), bottom (100%) ou center (50%).

Propriedades de Classificao
Estas propriedades classificam os elementos em categorias que podem receber estilos. Categorias podem ser listas, blocos, trechos de blocos ou itens invisveis.

display
Esta propriedade define como um elemento mostrado. A propriedade none desliga o elemento e fecha o espao que o objeto antes ocupava (torna o objeto invisvel). block abre uma nova caixa onde o objeto posicionado, relativo aos outros blocos, list-item um bloco com um marcador de lista e inline define um elemento como parte de um bloco. Sintaxe: display: block | inline | list-item | none Exemplo: P {display: list-item} IMG {display: none} // desliga todas as imagens

white-space
Define como o espao em branco do elemento gerenciado (se as linhas devem ser quebradas para que apaream na tela ou no (nowrap) ou se os espaos em branco, tabulaes, etc. devem ser considerados (pre). white-space: normal | pre | nowrap

list-style
Esta propriedade e as propriedades list-style-type, list-style-image e list-style-

63

position definem atributos para objetos de lista, como tipo de marcador, imagem do marcador e posio. list-style-type: disc | circle | square | decimal | lower-roman upper-roman | lower-alpha | upper-alpha | none list-style-image: url(url_da_imagem) list-style-position: inside | outside Exemplo: list-style-image: url(bullet.gif) possvel definir as trs propriedades atravs de um atalho usando list-type. A ordem dos fatores importante neste caso. list-style: list-style-type list-style-image list-style-position Exemplo: list-style: url(bullet.gif) list-style: square outside

Blocos
Uma caixa uma propriedade de qualquer elemento de bloco no HTML (H1, P, DIV, etc. que automaticamente definem seu prprio bloco ou pargrafo). A caixa de um objeto consiste das partes seguintes: O elemento em si (texto, imagem) As margens internas do elemento (padding) A borda em torno das margens internas (border) A margem em torno da borda (margin)

Todo elemento de bloco tem essas propriedades. As propriedades CSS que

64

veremos nesta seo mostraro como alter-las. A cor e tamanho da borda podem ser alterados assim como o fundo (como vimos na seo anterior). A margem externa sempre transparente mas a margem interna herda a cor de fundo do objeto. Tambm so alterveis as margens internas e externas, larguras de borda, cor de borda e estilo de borda de cada um dos quatro lados de uma caixa individualmente, identificados pelos nomes top, right, bottom e left:

margin e padding
As margens externas so definidas usando a propriedade margin (que afeta todas as margens ao mesmo tempo) ou as propriedades margin-top, marginbottom, margin-right e margin-left que permite alterar as margens

individualmente. Sintaxe: margin-top: comprimento | porcentagem % | auto margin-bottom: comprimento | porcentagem % | auto margin-right: comprimento | porcentagem % | auto margin-left: comprimento | porcentagem % | auto Exemplo: margin-top: 1cm; margin-left: 12pt; A propriedade margin afeta vrios aspectos das margens externas de uma vez s. A ordem dos fatores importante. Podem ser includos todos quatro valores, apenas um (todas as margens iguais) ou dois (margens horizontais e verticais). Sintaxe: margin: margin-top margin-right margin-bottom margin-left margin: margin-top% margin-right% margin-bottom% margin-left%

65

margin: espao_vertical espao_horizontal margin: margem_de_todos_os_lados Exemplos: margin: 5cm // vale para as quatro margens

margin: 5cm 2cm // 5cm margs verticais, 2cm margs horizontais margin: 5cm 3cm 2cm 1cm // sent. horrio: top, right, bottom, left // (em cima 5; direita 3; em baixo 2;... As margens internas (padding) so definidas usando a propriedade padding (que afeta todas as margens internas ao mesmo tempo) ou as propriedades padding-top, padding-bottom, padding-right e padding-left. Sintaxe: padding-top: comprimento | porcentagem % padding-bottom: comprimento | porcentagem % padding-right: comprimento | porcentagem % padding-left: comprimento | porcentagem % A propriedade padding afeta vrios aspectos das margens internas de uma vez s. A ordem dos fatores importante. Podem ser includos todos quatro valores ou apenas um. Sintaxe: padding: padding-top padding-right padding-bottom padding-left padding: padding-top% padding-right% padding-bottom% padding-left% padding: espao_vertical espao_horizontal padding: margem_de_todos_os_lados

border-width
Pode se controlar vrios aspectos das bordas como a sua espessura em cada um dos quatro lados, suas cores (tambm cada um dos quatro lados) e estilos (idem). Isto pode ser feito de diversas maneiras. Para que as bordas apaream preciso primeiro que o estilo (border-style) seja definido. Por exemplo: border-style: solid A espessura das bordas pode ser controlada atravs da propriedade borderwidth, afetando as espessuras de todos os lados da borda, ou individualmente atravs de border-top-width, border-bottom-width, border-right-width e border-

66

left-width. Sintaxe: border-top-width: comprimento | thin | medium | thick border-bottom-width: comprimento | thin | medium | thick border-right-width: comprimento | thin | medium | thick border-left-width: comprimento | thin | medium | thick Exemplos: border-bottom-width: thick; border-right-width: 5.5px; border-left-width: 0.2cm As propriedades das bordas podem ser tratadas em grupo, com border-width. A ordem dos fatores importante. Podem ser includos todos os quatro valores, dois (referindo-se s bordas horizontais e verticais) ou apenas um (afetando todas as bordas). Sintaxe: border-width: border-top-width border-right-width

border-bottom-width border-left-width Exemplos: border-width: 5cm // vale para as quatro bordas

border-width: 5cm 2cm // 5cm verticais, 2cm horizontais border-width: 5cm 3cm 2cm 1cm // horrio: top, right, bottom, left

border-color
A propriedade border-color um atalho que permite que se altere a cor de uma ou de todas as quatro bordas ao redor de um elemento que tambm podem ser definidas individualmente atravs de border-top-color, border-bottom-color, border-right-color e border-left-color. border-top-color: cor (nome ou cdigo) border-bottom-color: cor (nome ou cdigo) border-right-color: cor (nome ou cdigo) border-left-color: cor (nome ou cdigo) Exemplos: border-bottom-color: rgb(231,45,112); border-right-color: 0fa97b; border-left-color: navy As propriedades das bordas podem ser tratadas em grupo, com border-color. A ordem dos fatores importante. Podem ser includos todos os quatro valores,

67

dois (referindo-se s bordas horizontais e verticais) ou apenas um (afetando todas as bordas). Sintaxe: border-color: border-top-color border-right-color

border-bottom-color border-left-color Cada um dos border-xxx-color acima uma cor (RGB, hexadecimal ou nome). Pode-se alterar todas as bordas de uma vez, apenas as duas verticais e horizontais ou as quatro individualmente. Exemplos: border-color: red // red para as quatro bordas

border-color: rgb(255, 0, 0) // red border-color: rgb(100%, 0, 0) // red border-color: red 0000ff // red verticais, 0000ff horizontais

border-color: red blue yellow cyan // 4 cores sentido horrio

border-style
O estilo de cada uma das quatro bordas pode ser alterado com border-style. Tambm possvel defini-los individualmente usando border-top-style, borderbottom-style, border-right-style e border-left-style. So vrios os estilos disponveis (tracejado, pontilhado, vrias verses de 3D, etc.). border-top-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset border-bottom-style: nome de estilo (um dos nomes acima) border-right-style: nome de estilo border-left-style: nome de estilo Exemplos: border-bottom-style: none border-right-style: solid; border-left-style: inset As propriedades das bordas podem ser tratadas em grupo, com border-style. A ordem dos fatores importante. Podem ser includos todos os quatro valores, dois (referindo-se s bordas horizontais e verticais) ou apenas um (afetando todas as bordas). Sintaxe: border-style: border-top-style border-right-style

border-bottom-style border-left-style

68

Exemplos: border-style: solid none inset outset; border-style: solid border-style: inset outset Cada um dos border-xxx-style acima um dos seguintes valores: none, dotted, dashed, solid, double, groove, ridge, inset, outset. No Netscape e Internet Explorer, funcionam os estilos solid, inset (efeito baixo-relevo) e outset (efeito alto-relevo).

border
As propriedades border-top, border-bottom, border-left e border-right agrupam as propriedades de cor, estilo e espessura para cada uma das quatro bordas. border-top: border-width border-style border-color

border-bottom: border-width border-style border-color border-left: border-width border-style border-color border-right: border-width border-style border-color A propriedade border uma forma reduzida de definir tudo isto de uma vez s para todas as bordas e de forma idntica (no possvel especificar valores diferentes para as bordas neste caso). Todos os itens no precisam aparecer, mas a ordem dos fatores importante: border: border-width border-style border-color

width e height
As propriedades width e height modificam a altura e largura de um bloco da mesma forma que atributos HTML width e height usados em imagens e applets no HTML. Com folhas de estilos podem ser usados para redimensionar a "caixa" de qualquer elemento de bloco. Sintaxe: width: comprimento | auto height: comprimento | auto

float
A propriedade float permite que um bloco qualquer seja posicionado direita ou esquerda da janela do browser, fazendo com que o texto restante flua em

69

sua volta. Permite que qualquer bloco se comporte como uma imagem que faz uso dos atributos align=left e a-lign=right no HTML. Sintaxe: float: left | right | none

clear
E finalmente, para evitar que um bloco flua em torno de uma imagem ou bloco que utiliza a propriedade float, existe a propriedade clear, que deve ser atribuda a um bloco ou pargrafo que afetado pela flutuao de um bloco. Faz a mesma coisa que o atributo clear, usado no <BR> em HTML, s que aqui ela suportada em qualquer elemento (bloco ou no). clear: none | left | right | both

Posicionamento
O posicionamento de objetos em HTML pode ser conseguido em termos absolutos ou relativos usando CSS 2. As propriedades permitem o posicionamento em trs dimenses (horizontal, vertical e em camadas).

position, top e left

Esta propriedade precisa de mais duas propriedades que definem o posicionamento de um objeto. Os atributos localizam o objeto na tela de forma absoluta ou de forma relativa. A origem da posio absoluta ser a posio do objeto no nvel imediatamente superior. O posicionamento relativo se refere posio anterior do objeto. Sintaxe: position: absolute | relative left: comprimento | porcentagem | auto top: comprimento | porcentagem | auto

z-index
A propriedade z-index permite ordenar os objetos em camadas. um eixo de profundidade. Para us-la, basta definir em cada objeto: z-index: nmero onde nmero a camada de exibio. Quanto maior o nmero, mais alta a camada. o corresponde camada do texto. Se um objeto tiver z-index menor que zero aparecer atrs do texto. Se z-index for maior que zero, aparecer na frente. Quando no definido ou quando z-index: 0 o bloco

70

ocupar a mesma camada que o texto.

visibility
Esta propriedade serve para tornar um bloco visvel ou invisvel. Difere de display porque no remove o espao antes ocupado pela imagem: visibility: hidden | visible Exemplo: IMG {visibility: hidden} // torna invisveis todas as imagens

HTML 5
HTML5 (Hypertext Markup Language, verso 5) a quinta verso da linguagem HTML. Esta nova verso traz consigo importantes mudanas quanto ao papel do HTML no mundo da Web, trazendo novas funcionalidades como semntica e acessibilidade, com novos recursos antes s possveis por meio de outras tecnologias, e trazendo uma importante disseminao dentre todos os novos navegadores de internet, tornando-o mais universal. Esta evoluo da linguagem padro para web pode eliminar a necessidade de plug-ins para aplicaes multimdia em navegadores. Diversos crticos consideram a tecnologia como um forte concorrente ao Flash, da Adobe, ao Silverlight, da Microsoft, e ao recente JavaFX, da Sun (Oracle). Estas tecnologias precisaro se adaptar rapidamente para conseguir manter-se no mercado, to populares quanto hoje. Na avaliao do co-diretor de ferramentas da Mozilla, Ben Galbraith, as tecnologias viabilizadas pelo HTML5 como o Canvas para desenhos 2D e o armazenamento de contedos no desktop, permitiro que "usemos mais o browser do que nunca".

Exemplo de um cdigo HTML5

<!doctype html> <html> <head> <title>HTML5</title> <meta charset="UTF-8" /> </head>

71

<body> <audio controls preload="auto"> <source src="exemplo.mp3" /> <!-- Mensagem especificando que o browser no suporta a tag ou formato --> <p>Seu browser no suporta essa tecnologia.</p> </audio> </body> </html>

Com isso finalizamos nosso estudo de HTML e Css.

72