Vous êtes sur la page 1sur 48
www.DinheiroSite.com

www.DinheiroSite.com

HTML & CSS

INDICE

INDICE

 

2

HTML BÁSICO –

5

 

COMO SE CRIA UM DOCUMENTO HTML

5

TAGS OU COMANDOS HTML

5

ESTRUTURA BÁSICA

7

 

Criando o primeiro documento HTML

7

Comentários

8

Caracteres especiais

8

PARÁGRAFOS E QUEBRAS DE LINHA

8

 

O

COMANDO <P>

8

 

Alinhando parágrafos

8

 

O

COMANDO <BR>

8

O

COMANDO <HR>

9

 

Alterando o formato de linha de separação

9

USANDO IMAGENS COMO LINHAS SEPARADORAS

9

 

DIV

9

 

BLOCKQUOTE

9

ESTILOS DE TEXTO E FONTE

10

 

APLICANDO CORES E TAMANHOS NO TEXTO

10

ALTERANDO O TAMANHO DA FONTE

10

 

Size

10

Face

10

Color

11

CABEÇALHOS

11

 

ALINHANDO CABEÇALHOS

12

LISTAS

 

12

 

LISTAS ORDENADAS

12

LISTAS NÃO ORDENADAS

12

LISTA DE DEFINIÇÃO

13

 

IMAGENS

14

 

O

COMANDO IMG

14

URLS E LINKS

15

 

URL

15

 

Criando um Link com Arquivos Locais

16

Usando uma Imagem como Hiperlink

16

Vinculando Arquivos de outros diretórios

16

 

CRIANDO LINKS PARA SEÇÕES DE UMA PÁGINA

16

 

Criando uma Âncora

16

 

ENVIANDO E-MAIL DIRETAMENTE DA PÁGINA HTML

16

DEFININDO DESTINOS

16

 

TABELAS

17

 

ELEMENTOS BÁSICOS DE TABELAS

17

 

PARÂMETROS

18

2

HTML & CSS

 

Parâmetros do elemento <TABLE>

18

Parâmetros do elemento <TR>

18

Parâmetros dos Elementos <TD> e <TH>

19

FRAMES

 

20

 

Como funcionam os frames

20

O

Comando Document

20

O

Comando FRAMESET

20

Cols=tamanho

21

ROWS=tamanho

21

Combinando ROWS e COLS

21

 

O ATRIBUTO <FRAMESPACING=VALOR>

21

O

ATRIBUTO <FRAMEBORDER=1/0>

21

O

COMANDO <FRAME SRC>

21

 

Ajustando as margens internas do Frame

22

Barras de Rolagem e Redimensionamento dos Frames

22

 

INTERLIGAÇÃO DE FRAMES

23

 

Criando a Estrutura dos Frames

23

Criando o conteúdo do Menu

23

 

IFRAME

24

META

 

25

 

INFORMAÇÕES ESPECÍFICAS

25

VARIAÇÕES DO COMANDO META

25

MULTIMIDEA

25

 

CONSIDERAÇÃO NO USO DE MULTIMIDEA

26

INSERINDO UM VÍDEO

26

ATRIBUTOS UTILIZADOS EM VÍDEOS

26

USANDO O COMANDO EMBED PARA EXIBIR VÍDEO

27

 

O

comando NOEMBED

28

 

MARQUEE

28

 

Combinando a utilização de vários Marquees

30

 

SOM

 

30

 

Inserindo Áudio

31

Inserindo Áudio através de Hiperlinks

31

 

INSERINDO MÚSICA DE FUNDO

31

 

O

comando BGSOUND (Internet Explorer)

31

JAVA

 

32

 

ELEMENTO HTML PARA APPLETS JAVA

32

FOLHAS DE ESTILO

33

 

VERSÕES DA CSS

33

 

CSS - 1

33

 

CSS – Positioning (CSS-P)

33

 

CSS – 2

33

CSS – 3

33

 

REGRAS DA CSS

33

INCLUINDO CSS NO DOCUMENTO

34

 

Incluindo a CSS em uma página WEB

34

Incluindo a CSS em um site da WEB

35

 

PRINCIPAIS ATRIBUTOS DE UMA FOLHA DE ESTILO

36

DEFININDO CLASSES

37

DEFININDO IDS

37

LAYERS

 

37

3

HTML & CSS

 

DEFININDO TAGS DENTRO DO CONTEXTO

38

CRIANDO UMA DEFINIÇÃO !IMPORTANT

38

DEFININDO A CSS PARA IMPRESSÃO

38

DEFININDO QUBRAS DE PÁGINA PARA A IMPRESSÃO

39

FAZENDO O DOWNLOADS DE FONTES

40

CONTROLES DE TEXTO

40

 

Ajustando o Kerning

40

Ajustando o espaçamento entre as palavras

40

Ajustando as Entrelinhas

40

 

DEFININDO SEGUNDO PLANO

41

 

BORDAS

42

 

ENVOLVENDO UM ELEMENTO COM TEXTO

42

POSICIONAMENTOS

43

 

Posicionamento Estático

43

Posicionamento Relativo

43

Posicionamento Absoluto

43

Posicionamento 3D

43

 

DEFININDO A VISIBILIDADE DE UM ELEMENTO

44

DEFININDO A ÁREA VISIVEL DE UM ELEMENTO (RECORTE)

44

 

Definindo o lugar do Overflow

45

 

BARRAS DE ROLAGEM COLORIDAS

45

CUIDADOS NA CONSTRUÇÃO DE UM SITE

47

 

TRACE METAS

47

 

FAÇA UM ESBOÇO

47

DIVIDA O SEU SITE

47

ACESSO DIRETO A INFORMAÇÃO

47

EVITE SITES TIPO CARNAVAL

47

NÃO SE PRENDA A PLATAFORMAS

47

DIVULGUE O SEU SITE E OBSERVE OS ACESSOS

47

 

GLOSSÁRIO

47

4

HTML & CSS

HTML BÁSICO –

A Internet é, sem sombra de dúvida, o lugar mais quente da atualidade, onde os internautas passam a maior parte do tempo, e onde proliferam home pages de universidades, empresas, tendências, jornais, lojas e tudo o mais que se possa imaginar. Até pouco tempo, atingir o grande público era privilégio de poucos. Com a WWW, tudo fica diferente; coloque uma home page no ar, mande um e-mail para algumas pessoas, e saiba que, se o conteúdo for bom, a sua página será visitada e divulgada para outras pessoas. Para colocar uma página no ar, duas coisas: fazer a Home Page e conseguir um espaço em disco em uma máquina conectada permanentemente na Internet. Agora você conhecerá o básico da linguagem HTML, utilizada para se construírem páginas Web. Para fazer Home Pages, você terá que aprender pelo menos um pouco de HTML (Hipertext Markup Language) que pode ser traduzido como Linguagem de Hipertexto baseada em Marcas. Apesar da palavra linguagem, que leva a associação com linguagens de programação, ao final deste curso você vai perceber que gerar documentos HTML é bastante fácil e parecido com formatação de textos. Para que qualquer computador pudesse entender os documentos HTML, sem as complicações que trazem os caracteres de controles e coisa do tipo, foi definido que estes documentos deveriam ser gerados no formato mais simples possível, o bom e velho “txt”. Desta forma, documentos HTML podem ser gerados por qualquer editor de textos, desde que gravados no formato texto e com extensão.Htm ou .html.

COMO SE CRIA UM DOCUMENTO HTML

Uma página Web é composta de textos e comandos especiais (tags). Assim como qualquer linguagem, o programador deve escrever o código-fonte seguindo as regras da linguagem. Esse código-fonte é posteriormente interpretado pelo browser, que se encarregará de executar os comandos (tags) do código para formatar e acessar recursos da Web. O código 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 obtém) como exemplo podemos citar o Microsoft FrontPage, DreamWeaver. Existem ainda editores não WYSIWIG, onde você tem que construir o código, mas ele completa muitos comando, como exemplo podemos citar o Arachnophilia e o AceExpert, e na própria Internet existem vários destes editores gratuitos.

TAGS OU COMANDOS HTML

As TAGS normalmente são especificadas em pares, delimitando um texto que sofrerá algum tipo de formatação. As TAGS são identificadas pelo sinais < > ou </ >. Entre os sinais <> são especificados os comandos propriamente ditos. No caso de tags que necessitam envolver um texto, sua finalização deve ser feita usando-se a barra de divisão / , indicando que a TAG está finalizando a marcação de texto.

5

HTML & CSS

Os principais elementos de página HTML são, títulos, textos, parágrafos, imagens e links, responsáveis pela chamada de outras páginas para a tela:

1. Título: É o texto que aparece na barra de título do browser.

2. Imagem: São figuras, desenhos e fotos usados para ilustrar a

página.

Texto: É a informação mais comum dentro de uma página. Pode

ser formatado através de comandos.

4. Link: É um trecho que aparece destacado do restante do texto,

normalmente sublinhado e com outra cor. Ao clicar no Link, o browser acessa outra região da página atual ou uma página localizada em qualquer lugar na Internet. Uma figura também pode ser usada como link, ou seja, clicando na figura saltamos para outro local.

5. Cabeçalho: São linhas de texto com tamanhos especiais. Existem

seis tamanhos de cabeçalhos.

3.

6

HTML & CSS

ESTRUTURA BÁSICA

A estrutura básica de um documento HTML é a seguinte:

<HTML> <HEAD> <TITLE> Título do Documento</TITLE> </HEAD> <BODY> Aqui deverá ser digitado e criado a maioria dos itens que irão aparecer em sua Home Page </BODY> </HTML>

Vamos ver um pouco sobre os elementos básicos do HTML:

<HTML></HTML>: Indicam respectivamente o início e o fim do documento. Todo o resto deve estar entre estas marcas. <HEAD></HEAD>: Delimitam a seção de cabeçalho do documento. Trata-se da primeira seção do documento. <TITLE></TITLE>: Indicam o título do documento, que será apresentado na barra superior do browser. Estas marcas devem constar da seção de cabeçalho. <BODY></BODY>: Corpo do documento. Entre estas marcas estará o conteúdo a ser apresentado, textos, cores, imagens, etc. Este elemento pode conter cinco parâmetros opcionais:

BACKGROUND: configura especificar uma imagem como fundo da

página. EX. <BODY BACKGROUND= “fundo.gif” > configura uma página com a imagem fundo.gif como fundo.

BGCOLOR: Configura a cor de fundo da página. EX: <BODY

BGCOLOR= “White” > configura uma página com fundo branco (padrão).

TEXT: configura a cor padrão do texto da página. EX: <BODY

TEXT= “Black” > configura uma página com texto em cor preta. (padrão).

LINK, ALINK, VLINK: configura as cores dos links da página.

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 página 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 são do tipo início-fim, ou

seja, funcionam em pares.

Em cada documento HTML só deve haver uma marca de

cada tipo acima.

Existe uma ordem seqüencial lógica entre as marcas.

Estes detalhes devem ser respeitados, senão o browser não conseguirá apresentar o documento. Como HTML não é uma linguagem de programação, você não será avisado de erros que tenha cometido na edição do seu documento.

Criando o primeiro documento HTML

<HTML> <HEAD> <TITLE>Este é o meu primeiro documento em HTML</TITLE>

7

HTML & CSS

</HEAD> <BODY BGCOLOR=”Red” TEXT=”White”> Agora no corpo do texto vou digitar o meu primeiro texto em Html, no momento não usarei nenhuma formatação especial aqui dentro. </BODY> </HTML>

Comentários

Podemos também acrescentar comentários ao nosso código HTML, estes comentários não aparecem para no navegado e somente no código, são representados pela seguinte TAG <!- - inicia o comentário //- - >, finaliza o comentário. São utilizados para ocultar scripts dentro do código Html, pois caso o script não possa ser processado o mesmo será ignorado pelo navegador.

Caracteres especiais

Existem caracteres que não podem ser obtidos através de teclado. Eles podem ser inseridos em sua página através da especificação de um código especial que o browser interpreta e substitui por um caractere específico. Esses códigos podem ser obtidos utilizando-se uma nomenclatura definida pela norma ISO. Alguns dos símbolos mais utilizados no HTML é o &nbsp; que corresponde ao espaço do teclado, já que na HTML ele considera apenas um espaço. Para uma tabela mais completa visite o link http://www.w3.org/TR/html401/sgml/entities.html

PARÁGRAFOS E QUEBRAS DE LINHA

Ao contrário dos editores de texto comum, nos quais você insere uma quebra ou avanço de linha toda vez que pressiona a tecla ENTER, em um programa HTML é necessário colocar um comando específico para que o browser entenda que você deseja mudar de linha e iniciar uma nova linha ou começar um novo parágrafo. Existem dois comandos para criar quebras de linha e novos parágrafos. São os comandos <P> e <BR>

O COMANDO <P>

Para forçar um novo parágrafo, ou seja, avançar uma linha em branco e iniciar o texto

na segunda linha após o final do parágrafo anterior deve ser usado o comando <P>.

Alinhando parágrafos

O Comando <P> inicia um novo parágrafo onde o texto é automaticamente alinhado

pela margem esquerda da tela. Através do parâmetro ALIGN, pode-se mudar o alinhamento de forma que o texto do parágrafo inteiro fique centralizado ou alinhado à direita. Nesse caso, deve-se usar um par de comandos <P> envolvendo o parágrafo.

ALIGN=CENTER

ALIGN=RIGHT

ALIGN=JUSTIFY

ALIGN=LEFT

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

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 não em seu final. O

8

HTML & CSS

comando <BR> tem como função avançar para a linha imediatamente após à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 divisória na posição em que

foi

especificado. Seu uso é recomendado para criar uma divisão na página.

Alterando o formato de linha de separação

As linhas criadas pelo comando <HR> podem Ter o seu tamanho alterado pelos parâmetros SIZE e WIDTH. O parâmetro SIZE altera a espessura (altura) da linha,

deixando-a mais grossa em função do valor especificado. Esse valor é expresso em pixels.

A largura ou comprimento da linha é alterada pelo parâmetro 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 em função da largura da janela. Veja o código 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 parâmetros WIDTH e HEIGHT para alterar o tamanho da imagem.

DIV

A Tag <DIV></DIV> envolve uma área do texto ou divisão que pode receber

parâmetros específicos de alinhamento, como é o caso de ALIGN, para alinhar o

texto. Podemos envolver vários parágrafos com o elemento DIV

BLOCKQUOTE

O comando Blockquote permite dar recuos de parágrafos aos parágrafos, e pode ser

cumulativo

Vamos a um exemplo:

<html> <head> <title>Formatação de Parágrafos</title> </head> <body> <P align="center">Texto centralizado</p> <P align="Justify">Aqui temos um texto justificado, aqui temos um texto justificado, Aqui temos um texto justificado, <BR> <div align="center">Aqui centralizamos um texto com o elemento DIV</div> <div align="justify">Começamos justificado<P align="center">centralizei</P> continuamos justificado</div> <hr align="center"> <blockquote>Recuando o Texto</blockquote> <blockquote><blockquote>Recuando o Texto 2 vezes</blockquote></blockquote> <HR color="red" size=10 width=75%>

9

HTML & CSS

</body>

</html>

ESTILOS DE TEXTO E FONTE

Assim como no editor de textos, você pode criar uma série de efeitos no texto, alterando a forma ou o tipo da fonte. Todos os comandos que alteram o estilo do texto são do tipo contêiner ou liga desliga, ou seja, precisam ser especificados em pares, marcando o início e fim do texto que sofrerá a formatação.

Os principais comandos de estilo de texto são:

Comando

Sintaxe

 

Função

 

Negrito

<B>Texto</B>

Aplica o estilo Negrito

 

Itálico

<I>Texto</I>

Aplica o estilo Itálico

 

Sublinhado

<U>Texto</U>

Aplica o estilo sublinhado(Não funciona em alguns Browsers

Strong

<Strong>Texto</Strong>

Similar ao Negrito

 

Typerwriter

<TT>Texto</TT>

Deixa

o

texto

com

espaçamento

regular

Big

<BIG>Texto</BIG>

Aumenta a fonte e aplica negrito

Small

<SMALL>Texto</SMALL>

Reduz e altera a fonte

 

Sobrescrito

<SUP>Texto</SUP>

Eleva o texto e diminui seu corpo

Subscrito

<SUB>Texto</SUB>

Rebaixa o texto e diminui seu corpo

Pulsante

<BLINK>Texto</BLINK>

Faz com que o texto pisque (Não funciona no IE 4.

APLICANDO CORES E TAMANHOS NO TEXTO

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 responsável por isso é o comando <FONT>, que é do tipo liga desliga.

Size

O parâmetro size especifica o tamanho da fonte utilizada. Os valores permitidos vão de 1, o menor até 7, o maior. O padrão é 3. Se for especificado um número antecedido pelo sinal de adição ou de subtração, o tamanho da fonte atual será aumentado ou diminuído 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 parâmetro permite que seja escolhida uma fonte diferente para o texto. Podemos especificar várias fontes, de maneira que, se o sistema não possuir a primeira opção, a segunda é carregada. Se não for encontrada nenhuma das fontes especificadas, o texto é exibido na fonte padrão.

10

HTML & CSS

Color

Esse parâmetro especifica a cor do texto. Seu valor pode ser especificado no formato hexadecimal, RGB ou através de um nome predefinido de cores como mostra a tabela abaixo:

Cor

Código

Cor

Código

Aqua

#70DB93

Blue

#0000FF

Black

#000000

Cyan

#00FFFF

Fuchsia

#FF00FF

Gray

#C0C0C0

Green

#00FF00

Lime

#32CD32

Brown

#800000

Navy

#23238E

Olive

#808000

Red

#FF0000

Silver

#E6E8FA

Teal

#008080

White

#FFFFFF

Yellow

#FFFF00

Não exagere na quantidade cores e tamanho das letras do texto ou a sua página parecerá uma mensagem enviada por código.

Veja o exemplo abaixo:

As figuras acima mostram o código anterior sendo visualizado no IE e o Netscape, observem que no IE o comando BLINK não é aplicado.

<HTML> <HEAD><TITLE>Aplicando estilos de texto</TITLE> </HEAD> <BODY> <font face="Arial" size="4" color="Red">Este texto está em<B>Negrito</B><BR> Este texto está em <I>Itálico</I><BR> Este texto está em <U>Sublinhado</U><BR> Este texto está em<B><I> Negrito e Itálico</B></I><P> Este texto recebeu o estilo<STRONG> chamado Strong que é parecido com </STRONG>negrito<BR> Este texto recebeu o estilo<TT>Typerwriter</TT>.<HR> Este texto recebeu o formato de fonte <BIG>big</BIG> que cria letras grandes.<BR> Este texto recebeu o formato de fonte <SMALL>Small</SMALL> que cria letras pequenas. <BR> Este é um exemplo de texto <SUP>Sobrescrito</SUP> pelo comando SUP.<BR> Este é um exemplo de texto onde foi usado o efeito <SUB>Subscrito</SUB> do comando SUB.<P> Para chamar a <BLINK>atenção</BLINK> use o comando BLINK.</font> </BODY> </HTML>

CABEÇALHOS

Outra forma muito usada para mudar o tamanho da letra e aplicar um efeitos em textos é utilizando cabeçalhos. A linguagem HTML possui seis comandos de cabeçalho de <H1> até <H6>. Além do tamanho diferenciado, o comando cabeçalho insere uma linha em branco antes e depois da linha que contém o comando. Eles são

11

HTML & CSS

perfeitos para criar títulos e iniciar seções dentro de uma página. O comando <H1> possui o maior tamanho enquanto que <H6> possui o menor tamanho de fonte.

ALINHANDO CABEÇALHOS

Como padrão um cabeçalho gerado pelo comando <Hn> é sempre posicionado no lado esquerdo da linha. Usando o parâmetro ALIGN pode-se centralizar ou ajustar o cabeçalho à direita da linha. Veja o código:

<HTML> <HEAD> <TITLE>Alinhando Cabeçalhos</TITLE> </HEAD> <BODY> <H2> Cabeçalho sem alinhamento especial</H2> <HR> <H2 ALIGN=CENTER>Cabeçalho com alinhamento centralizado</H2> <HR> <H2 ALIGN=RIGHT>Cabeçalho com alinhamento à direita</H2> </BODY> </HTML>

LISTAS

Na linguagem HTML existem elementos específicos para a criação de listas, que podem ser listas ordenadas (OL), listas sem ordenação (UL), ou listas de definições (DL). Um detalhe interessante é que podem ser criadas listas aninhadas, ou seja, listas dentro de listas. A seguir, veremos as características de cada umas delas.

LISTAS ORDENADAS

são os elementos delimitadores de listas

ordenadas (OL – Ordered Lists). A estrutura das listas ordenadas é bastante simples:

entre os elementos de início e fim, os itens da lista são definidos pelos elementos

<LI></LI>. Os itens são apresentados em linhas consecutivas e precedidos por uma numeração atribuída pelo paginador. O parâmetro opcional TYPE define como será o tipo de numeração de cada linha. Os tipos disponíveis são: “A” (A,B, Z),

“I” (I,II,III, etc.), “i’ (i,ii,iii,etc), e “1” (1,2,3,etc). Se omitido, é utilizado o

<OL

TYPE=

START=

>

</OL>

“a”(a,b,

z),

tipo padrão (1,2,3, etc). O parâmetro opcional START define a partir de que elemento a numeração deve se iniciar. Ele deve receber como valor um número indicando em que posição a contagem deve se iniciar.

LISTAS NÃO ORDENADAS

<UL>

Unordered Lists). A estrutura das listas sem ordenação é a mesma das listas ordenadas, sendo que, na apresentação, os itens serão precedidos por um marcador

são os elementos delimitadores de listas sem ordenação (UL –

</UL>

(bullet). No caso de listas sem ordenação aninhadas (listas dentro de listas), o paginador utilizará um marcador (bullet) diferente para os itens de cada lista.

12

HTML & CSS

é o elemento que define um item de uma lista

ordenada ou sem ordenação. O seu conteúdo pode ser texto, outras listas, imagens, links ,etc.

Como já foi visto acima <LI>

</LI>

LISTA DE DEFINIÇÃO

são as marcas que englobam uma lista de definições, ideais para a

criação de glossários e coisas do gênero. A estrutura desta lista é diferente das

outras, pois existem dois elementos – o termo a ser definido (DT), e a definição propriamente dita (DD). Na apresentação cada termo aparece em uma linha, e a respectiva definição na linha seguinte, deslocada para a direita.

<DL>

</DL>

<HTML> <HEAD> <TITLE>Listas de definição</TITLE> </HEAD> <BODY> <H2>Listas de definição</H2> <DL> <DT>HTML</DT> <DD>Hiper Text Markup Language</DD> <DT>OL</DT> <DD>Listas ordenadas com numeração.</DD> <DT>UL</DT> <DD>Listas sem ordenação</DD> <DT>LI</DT> <DD>Elemento da Lista</DD> </DL> <H2>Listas não ordenadas combinadas<BR>com uma lista de Definição</H2> <DL> <DT>Parâmetro do elemento OL</DT> <DD> <UL> <LI>TYPE</LI> <LI>START</LI> </UL> </DD> <DT>Parâmetros 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>

13

HTML & CSS

</HTML>

IMAGENS

Você pode obter uma imagem através de uma cópia feita a partir de uma página da Internet, através de CDs ROMs, Scanners, etc. ou pode cria-las a partir de um programa de imagens.

O COMANDO IMG

Esse comando define a posição de uma imagem que aparece no corpo do documento.

<IMG SRC=”URL” WIDTH=”

VSPACE=”…” HSPACE=”…”> ALIGN=| “BOTTOM” | “TOP” | “MIDLE”

ALT=”Texto”

HEIGHT=”…”

BORDER=”…”

SRC=”URL

É

o nome da figura,

se

estiver no mesmo ou seu caminho

diretório

do

programa

completo.

ALT=”texto”

Exibe o texto quando o browser não 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=”número”|

Esse parâmetro especifica a largura de exibição da imagem independentemente do seu tamanho físico. Se a imagem for maior ou menor do que o valor especificado, ela será esticada ou comprimida para caber no espaço especificado. Se for o colocado o sinal de porcentagem, ele é relativo à largura da janela.

”número%”

HEIGHT=”número”

Especifica a altura de exibição da imagem independentemente de seu tamanho físico. Se

imagem for maior ou menor do que o valor especificado.

a

BORDER=”número”

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

VSPACE=”número”

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

HSPACE=”número”

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

Com exceção do parâmetro SRC, todos os demais são opcionais. Portanto, para exibir uma imagem chamada foto.gif que esteja no mesmo diretório do programa deve ser especificado o seguinte comando:

IMG SRC=”foto.gif”

<html>

14

HTML & CSS

<head> <title>Imagens</title> </head> <body background="images/backarvore.jpg" text="yellow"> <img src="images/worldmap.jpg" width="200" height="100" alt="Mapa Mundi" align="left" align="midle"> <DIV align="justify">O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa,O Mapa,O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, </div><hr> <img src="images/Batlow.gif" alt="Morcego" align="right"><DIV align="justify">O Morcego,O Morcego, O Morcego, O Morcego, O Morcego, O Morcego, O Morcego, O Morcego, O Morcego, O Morcego, O Morcego, O Morcego, O Morcego, O Morcego, O Morcego, O Morcego, O Morcego, O Morcego, O Morcego, O Morcego,O Morcego,O Morcego,O Morcego,O Morcego,O Morcego,O Morcego,O Morcego, </div> <Br> <img src="images/Hlpglobe.gif" width="20" height="20"><b>Usando uma imagem como marcador</b><bR> Usando imagens como linhas separadoras <br> <img src="images/arame.gif" width="120%"> </body> </html>

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 criação de documentos com o conceito de hipertexto, ou seja , um documento que se liga a outros por meio de vínculos especiais chamados hyperlinks. Com esse conceito você pode criar documentos que façam referência a um endereço qualquer do computador ou da Web e permitam ao usuário acessar essas referências, não importando se elas estão em outra página WEB, no seu micro ou em qualquer servidor da rede.

URL A Internet usa uma nomenclatura específica para indicar o endereço de um documento. Chamada de Uniform Resource Locator (Localizador Universal de Recursos) ou URL, essa nomenclatura inclui três componentes. Ela deve conter o protocolo do documento, (como por exemplo http. Gopher ou WAIS), o endereço servidor e a localização do arquivo, usando a seguinte sintaxe:

Protocolo://servidor.NomeDoArquivo

http://www.hardcore.com.br/index.htm

15

HTML & CSS

http: É o protocolo www.hardcore.com.br: É o nome do servidor index.htm: É o nome do documento que será acessado.

Criando um Link com Arquivos Locais

Vincular um texto com uma página 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 básica deste comando:

<A HREF=” ”NAME” ”>caracteres</A> Principais parâmetros:

HREF=”URL”

Especifica o endereço do URL ao

NAME=”String”

qual o link está associado. Pode ser usado dentro e fora do documento. Especifica o nome da seção de um documento à qual um link de hipertexto faz referência.

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.

Vinculando Arquivos de outros diretórios

Você pode especificar o endereço de outros diretórios usando um esquema de caminhos parecido com DOS. Existe uma diferença entre esses caminhos. Na Web você deve inverter a barra de espaços, usando a barra / no lugar da barra \, para separar diretórios.

CRIANDO LINKS PARA SEÇÕES DE UMA PÁGINA

Para dominar o uso do hipertexto, o programador em HTML deve conhecer bem o funcionamento do comando <A> e dois de seus parâmetros da linguagem. Um é o <H HREF>, usado para criar o link em si, e o outro é o <A NAME>, que cria âncoras ou endereços de seções de um documento, permitindo seu endereçamento.

Criando uma Âncora

Para interligar uma página, você precisa criar uma âncora (também chamado de indicador em alguns editores de HTML) no inicio de cada seção 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 página Web com exemplos de links e âncoras :

Neste código criamos primeiramente os links com as âncoras da página, e depois as âncoras, aproveitamos também e trabalhamos com inserção de imagens na página:

ENVIANDO E-MAIL DIRETAMENTE DA PÁGINA HTML

Você pode acionar o programa padrão de e-mail diretamente de uma página HTML usando uma variação do comando <A>, que usa a opção MAILTO no lugar da URL. <A HREF=”MAILTO:faleconosco@provedor.com.br”>Tire as suas dúvidas </A>

DEFININDO DESTINOS

16

HTML & CSS

Podemos também definir destinos para os nossos links,(recurso muito utilizado em frames) através do parâmetro target: . E podem ser _self: Mesmo quadro, _top:

página inteira, _blank: nova janela e _parent: quadro pai.

<html> <head> <title>Links</title> </head> <body> <p align="center">Links</p> <p><a href="http://www.microsoft.com.br">Microsoft</a> <p><a href="http://www.macromedia.com.br">Macromedia</a> <p><a href="http://www.adobe.com.br" target="_blank">Adobe</a> <p><a href="mailto:softwaresuporte@hardcoreinformatica.zzn.com">e-mail</a> <hr> <P Align="center">Criando as Âncoras</P> <a href="#textos">Textos</a> &nbsp;&nbsp;<a href="#imagens">Imagens</a> <P> <a name="textos">TEXTOS</a> <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p> &nbsp;</p> <a name="imagens">IMAGENS</a> <p align="center"><img border="0" src="entrar1.gif" width="150"

height="50"></p>

</body>

</html>

TABELAS

Assim com as listas que nós já vimos, no HTML existem elementos específicos para a criação e formatação de tabelas. O recurso de tabelas é muito interessante e muito usado nas páginas Web.

O conceito é o mesmo conhecido usualmente: ela tem linhas e colunas, e na

interseção delas estão as células.

Na linguagem HTML, você pode inserir nas células tudo o que normalmente faz parte

do corpo de um documento, como textos, links, imagens, listas e até outras tabelas.

ELEMENTOS BÁSICOS DE TABELAS

<TABLE> </TABLE> São as marcas que englobam a definição de uma tabela. Todas as demais marcas referentes a tabelas – linhas e células – somente serão consideradas se incluídas entre <TABLE>e </TABLE>. <CAPTION> </CAPTION>

Trata-se de um elemento opcional que define o título da tabela, e deve constar entre

as marcas que definem a tabela, mas separado das marcas que definem linhas e

colunas. Sem parâmetros, o título á apresentado acima da tabela e centralizado. <TR> </TR> Table Row ou Linha de tabela Este é o elemento utilizado na definição de linhas de tabelas. Tabelas são definidas em linhas, sendo as linhas compostas de células. O número de linhas de uma tabela corresponde ao número de <TR></TR>.

17

HTML & CSS

<TD> </TD> Table Data ou Dados de Tabela Marcas que delimitam as células que compõem as linhas, e assim sendo devem estar inseridas entre as marcas de linhas. Uma célula pode conter tudo o que normalmente consta do corpo de um documento HTML – Links, referências a imagens, textos, e até tabelas. O alinhamento padrão de uma célula é à esquerda horizontalmente e centralizado verticalmente, e caso o número de células varie de uma linha para outra, as linhas com menos células são completadas à direita com células em branco. <TH> </TH> Table Header ou Cabeçalho de Tabela Elemento que define células de cabeçalho. Células de cabeçalho têm características idênticas a células de dados definidas por <TD>, a não ser pelo alinhamento horizontal, que é centralizado, e pela utilização de fonte em Negrito.

PARÂMETROS Estes elementos básicos, entretanto, possuem alguns parâmetros que permitem um maior controle sobre alguns detalhes da apresentação da tabela.

Parâmetros do elemento <TABLE>

BORDER

A apresentação padrão de uma tabela é sem bordas. A presença do parâmetro BORDER indica justamente que deve ser desenhada uma borda em torno de cada célula 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 variações:

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 não seja especificado, o próprio browser se encarrega de determinar a largura mais adequada, baseado nos textos inseridos nas

células. Exemplo: <TABLE WIDTH=75%>

CELLSPACING

Define o espaço entra as células, ou seja, a largura das linhas de grade (as bordas

que envolvem as células). É especificado em pixels. Exemplo: <TABLE

CELLSPACING=3>

CELLPADDING

Determina, em pixels, o espaço entre o conteúdo e as bordas da célula. Exemplo:

<TABLE CELLPADING=6>

ALIGN

Configura o alinhamento horizontal da tabela em relação aos outros elementos da página. Pode conter os valores LEFT (esquerda), CENTER (centro) ou RIGHT( direita). Este parâmetro não funciona em alguns browsers.

BGCOLOR

Define a cor de fundo da tabela.

Parâmetros do elemento <TR>

ALIGN

Configura o alinhamento horizontal dos elementos contidos nas células de uma linha. Pode conter os valores LEFT, CENTER OU RIGHT. Se omitido, o alinhamento é à

18

HTML & CSS

esquerda para as células de dados (<TD>), e centralizado para células de cabeçalho (<TH>).

VALIGN

Define o alinhamento vertical dos elementos contidos nas células 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.

Parâmetros dos Elementos <TD> e <TH>

ALIGN

Configura o alinhamento horizontal dos elementos contidos na célula. Pode conter os valores LEFT, CENTER OU RIGHT.

Se omitido, o alinhamento é à esquerda para as células de dados (<TD>), e centralizado para células de cabeçalho (<TH>).

VALIGN

Define o alinhamento vertical dos elementos contidos na célula. 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 parâmetro encontra-se associado a uma célula, o browser entende que o texto dentro daquela célula não pode ser dividido em mais de uma linha. Este parâmetro deve ser utilizado com cuidado, para evitar colunas demasiadamente largas.

COLSPAN

Especifica o número de colunas de uma tabela a ser ocupado por uma célula. Deve ser utilizado para expandir uma célula horizontalmente. Se atribuirmos COLSPAN=2 a uma célula, ela ocupará o seu espaço e o espaço de mais uma célula para a direita, assim esta linha deverá possuir uma célula a menos que as demais, já que uma de suas células “vale”por duas.

ROWSPAN

Define o número de linhas a ser ocupado por uma célula. Deve ser utilizado para expandir uma célula verticalmente (para baixo). Ao atribuir ROWSPAN=2 para uma célula, diminuirá em 1 o número de células 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"> <p align="center">Título da Tabela</th> </tr> <tr> <td width="33%">Texto1</td> <td width="33%">Texto 2</td>

19

HTML & CSS

<td width="34%">Texto 3</td> </tr> </table> </body> </html>

Atenção: Além de criar tabelas para exibir dados como numa planilha, os elementos de tabelas são usados para formatar páginas de uma forma geral. Eles são usados para criar textos com elementos na tela de forma mais fácil, para delimitar áreas de uma página e diversas outras utilidades que você nem imagina. Por exemplo, podemos usar tabelas para garantir que o texto fique na posição A da tela e a imagem fique na posição B, independente da resolução de vídeo do visitante de sua página. Utilizando uma tabela de tamanho definido, podemos evitar que a página fique grande demais para resoluções de 640x480, podemos simular colunas de texto, entre outras aplicações.

FRAMES

O recurso de frames (janelas), compatível com a versão 2 e superiores do Navigator e

do IE, permite ao desenvolvedor criar páginas HTML que podem ser visualizadas simultaneamente na janela do browser. Com esse recurso, a janela do browser é dividida em frames que compartilham o espaço disponível. Sem o recurso de frames, para visualizar três páginas diferentes chamadas A. HTM, B.HTM e C.HTM, o usuário precisaria acessá-las individualmente por meio de uma página inicial que contivesse um menu ou então através da especificação de seu URL Usando o recurso de frames, podemos exibir mais de um frame (janela) simultaneamente. Em nosso projeto iremos usar um dos frames para exibir permanentemente o conteúdo da página do menu e a outra para exibir o conteúdo dos capítulos, facilitando a navegação pelo manual.

Como funcionam os frames

Ao contrário da maioria dos recursos da linguagem HTML, o uso frames requer um planejamento prévio. Esse planejamento consiste na criação da estrutura dos frames, na qual você irá especificar a quantidade de frames, a disposição que eles terão na tela, a largura e a altura de cada frame, assim como o conteúdo que será exibido em cada um deles. Trabalhar com frames exige duas etapas. Na primeira você cria o layout dos frames, na segunda, define seu conteúdo.

O

Comando Document

O

uso de frames exige a criação de um documento HTML especial que contém todas

as definições dos frames. Você pode considera-lo como um documento mestre. Esse documento se diferencia dos demais documentos HTML, pois ele não usa os comandos <BODY> e </BODY>. Em seu lugar é usado o comando <FRAMESET></FRAMESET>. Dentro desse par de comandos são especificados todos os atributos dos frames que serão criados. O frameset define as características gerais dos frames, como sua quantidade e disposição horizontal e vertical. Cada frame especificado precisará de um outro comando chamado <FRAME> para definir suas características individuais.

O Comando FRAMESET

Este comando é do tipo contêiner, ou seja deve ser aberto e fechado. Veja a sintaxe deste comando:

<FRAMESET

COLS=tamanho

20

HTML & CSS

FRAMEBORDER=1/0

FRAMESPACING=spacing

ROWS=tamanho></FRAMESET>

Cols=tamanho

O atributo cols é usado para criar um documento com frames dispostos em colunas.

Nele deverá ser especificada a largura de cada coluna do documento. Pode ser especificado um valor padrão para todas as colunas ou tamanhos individuais. Os valores podem ser especificados em pixels, percentagem ou tamanho relativo.

Usando valores em pixels <FRAMESET COLS=”100,300,200”>

Usando valores relativos Para dividir os frames igualmente pela largura da janela do browser, a melhor opção é usar um asterisco (*) para cada coluna <FRAMESET COLS=*,*,*> Usando valores percentuais

A terceira forma de determinar a largura de uma coluna é especificar os valores em

forma de percentual, totalizando 100 por cento <FRAMESET COLS=25%,50%,25% Os diferentes valores podem ser combinados entre si. Por exemplo, para criar um frameset com três colunas de modo que a primeira ocupe 25%, a terceira tenha 100 pixels e a outra ocupe o espaço restante, pode-se usar o seguinte comando:

<FRAMESET COLS=25%,*,100>

ROWS=tamanho

O atributo ROWS funciona da mesma forma que o atributo COLS, só que cria os

frames horizontalmente. Tudo o que foi exposto para COLS, aplica-se a ROWS.

Combinando ROWS e COLS

Pode-se combinar a criação de frames, usando os dois atributos. Você pode criar um janela dividida em dois frames horizontais, onde o primeiro deles é dividido em duas colunas. Para que isso seja possível, basta aninhar conjuntos de comandos <FRAMESET>

O ATRIBUTO <FRAMESPACING=VALOR>

Esse atributo tem como finalidade alterar o espaço entre os frames, dando a

impressão de que a borda dos frames foi aumentada. Contudo, ele apenas distancia um frame de outro pela quantidade de pixels especificada.

O código pode ser o mesmo do exemplo anterior. A penas a primeira linha deve ser

alterada para:

<FRAMESET ROWS=50%,50% FRAMESPACING=10>

O ATRIBUTO <FRAMEBORDER=1/0>

Esse atributo tem a finalidade de eliminar as bordas dos frames. Como padrão, ele usa o valor 1, que exibe a borda. Se for especificado o valor 0, as bordas serão

omitidas. A omissão de bordas é interessante para criar a ilusão de uma única janela, onde as partes dessa janela são independentes das outras. Outro efeito interessante

é a mudança da cor de fundo de cada janela, permitindo dividir a tela em áreas coloridas distintas.

O COMANDO <FRAME SRC>

21

HTML & CSS

Sintaxe:

<FRAME ALIGN=posição

FRAMEBORDER=1/0

MARGINHEIGHT=altura

MARGINWIDTH=largura

NAME=nome

SCROLLING=yes/no

SRC=endereço

Align=posição Ajusta o alinhamento do frame ou do texto. Os valores permitidos são:

TOP

O

texto ao redor do frame é alinhado pela parte superior do

frame.

MIDDLE

O

texto ao redor do frame é alinhado pelo meio do frame.

BOTTO

O

texto aos redor do frame é alinhado pela parte inferior do

M

frame.

LEFT

O

frame é alinhado à esquerda, deixando o texto posicionado no

seu lado direito.

RIGHT

O

frame é alinhado à direita, deixando o texto posicionado no

seu lado esquerdo

Frameborder=0/1

Idêntico ao atributo de mesmo nome do comando <FRAMESET>, ele ativa ou desativa a exibição de borda para o frame atual. Marginheight=altura Especifica a altura da margem superior e inferior do frame em pixels. Marginwidht=largura Especifica a largura das margens esquerda e direita do frame em pixels. Name=nome Atribui um nome para o frame, de maneira que possa ser identificado e localizado para carregar documentos. Noresize Esse atributo evita que o frame seja redimensionado pelo usuário. Scrolling=yes/no Esse atributo, quando ajustado para o valor no, não permite que o frame tenha barras de rolagem quando a janela for redimensionada. SRC=endereço Endereço deve ser substituído pelo nome ou URL do documento que será exibido no frame.

Ajustando as margens internas do Frame

O desenvolvedor pode criar uma margem interna para o frame, de forma a distanciar o conteúdo da janela da sua borda. Para criar um margem nas laterais da janela, deve ser usado o comando MARGINWIDTH. Para criar uma margem na parte superior e outra no rodapé do frame, deve ser usado o atributo MARGINHEIGHT. O tamanho da margem deve ser especificado em pixels.

Barras de Rolagem e Redimensionamento dos Frames

Como padrão, os frames possuem os atributos que permitem seu redimensionamento e a inclusão automática de barras de rolagem quando suas dimensões ficam menores

22

HTML & CSS

do que o conteúdo a ser exibido. Para alterar essas características, você deve usar os comandos SCROLLING E NORESIZE. No caso do comando SCROLLING, deve ser atribuído a ele o valor no para desativar as barras de rolagem.

INTERLIGAÇÃO DE FRAMES Até agora você viu como criar um conjunto de frames para exibir documentos independentes um do outro. Nosso projeto inicial previa a criação de um manual eletrônico usando frames para mostrar um índice permanente na tela enquanto outra janela exibia o conteúdo selecionado. Para isso iremos aprender mais alguns itens. O primeiro deles é a atribuição de um nome para o frame e o segundo é direcionar o carregamento de um documento em uma janela específica. Para indicar ao browser em qual janela os documentos dos capítulos deverão ser carregados, devemos incluir no documento que contém os links um novo comando chamado <BASE TARGET=”nome da janela”> contendo o nome da janela-alvo.

Criando a Estrutura dos Frames

Esse arquivo contém a definição de dois frames, um para o menu e outro para os capítulos. O frame que receberá o nome de “textos”, e nenhum arquivo será previamente carregado. O frame que conterá o menu principal recebera o nome de “menu”. Nessa situação, apenas o nome do frame “textos” tem de ser obrigatoriamente especificado.

Criando o conteúdo do Menu

O arquivo de menu contém os links para os capítulos do manual. Nesse documento, você deve incluir o comando <BASE TARGET>, que é responsável por indicar ao browser onde os arquivos vinculados pelo comando <A HREF> devem ser carregados. Em nosso exemplo, ele orienta o browser a carregar os links no frame chamado “textos”. Se esse comando for omitido, os capítulos serão carregados no frame do menu. Os códigos dos documentos ficarão da seguinte maneira e salve o documento como menu:

<HTML> <HEAD> <TITLE>Menu Principal</TITLE> <BASE TARGET="textos"> </HEAD> <BODY BGCOLOR="FFFFEE"> <CENTER> <H1>Menu Principal</H1> <UL> <LI><A HREF=A.HTM>Introdução</A> <LI><A HREF=B.HTM>Capítulo 1</A> <LI><A HREF=C.HTM>Capítulo 2</A> <LI><A HREF=D.HTM>Capítulo 3</A> <LI><A HREF=E.HTM>Capítulo 4</A> <LI><A HREF=F.HTM>Capítulo 5</A> </UL> </CENTER> </BODY> </HTML>

Script para o topo.htm

23

HTML & CSS

<html> <head> <title>Topo</title> </head> <body> <div align="center"> <img src="images/principal1.gif"> </div> </body> </html>

Crie também um arquivo com a estrutura básica do HTML e salve-o com o nome de nada. Veja agora o código para o frame:

<html> <head> <title>Frames</title> </head> <frameset rows="64,*"> <frame name="topo" scrolling="no" noresize src=="topo.htm"> <frameset cols="150,*"> <frame name="menu" src="menu.htm"> <frame name="textos" src=”nada.htm”> </frameset> <noframes> <body> <p>Esta página usa quadros mas seu navegador não aceita quadros.</p> </body> </noframes> </frameset> </html>

No código acima pode-se ver também que foi utilizada a TAG <NOFRAMES> </NOFRAMES> esta TAG é utilizada para avisar o usuário que o navegador dele não suporta frames, então pode-se colocar qualquer texto ou figura HTML para o usuário.

IFRAME

O IFRAME é um frame interno que só pode ser utilizado em IE de versão 4 ou superior, ele está facilitando a troca de informações em sites de que precisam mudar textos, pois ele pode ser colocado no documento e conforme altera-se o documento do IFRAME ele altera na página, ele possui os mesmos parâmetros dos Frames.

<html> <head> <title>IFRAME</title> </head> <body bgcolor="#000000" text="#FFFFFF"> <p>&nbsp;</p> <p align="center">Utilizando IFRAME</p> <div align="center"> <center>

24

HTML & CSS

<table border="0" width="80%" height="193"> <caption>&nbsp;</caption> <tr> <td width="100%" height="187" align="center"> <p align="center"><IFRAME SRC="textos.htm"></iframe></td> </tr> </table> </center> </div> </body> </html>

META

O comando META é um dos comandos pouco explorados da linguagem HTML.

Contudo, é responsável por importantes aspectos de uma página HTML. Através dele, podemos criar documentos dinâmicos, informações especificas que serão usadas pelo servidor, em resposta a uma solicitação do usuário, ou pelos mecanismos de busca

na Internet.

INFORMAÇÕES ESPECÍFICAS Esse comando das linguagem HTML pode ser usado para criar metainformação ou variáveis, e seus conteúdos descrevem características do documento HTML, como o nome do autor, data de vencimento ou criação do documento, palavras-chave, etc. <META HTTP-EQUIV=resposta CONTENT=descrição NAME=descrição URL=url> O comando META deve ser especificado entre os comandos <HEAD> </HEAD>.

VARIAÇÕES DO COMANDO META

Usar o recurso do autocarregamento é indicado quando você deseja exibir alguma informação inicial e depois outra informação. Por exemplo o usuário acessa uma página que exibe informações sobre a empresa, depois de um tempo carrega outra página. Isso é possível 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 página qual é a sua descrição e quais são as palavras chaves do site. <meta name="description" content="Site sobre Informática"> <meta name="keywords" content="Photoshop,Flash, Fireworks, Dreamweaver, HTML"> Podemos também especificar o autor e programa gerador do código HTML através do comando META <meta name="author" content="Marcos Paulo Furlan"> <meta name="generator" content="HTML-Kit">

MULTIMIDEA

O principal elemento de sucesso da Internet é o hiperlink. Que permite a criação de

documentos com ligações para outros contidos em qualquer computador ligado à Internet. A maioria dos usuários que acessa a Internet faz isso a partir de ambientes

gráficos, como o Windows, e conhecendo o Windows todos sabemos de sua capacidade em trabalhar com multimídia. Esse é o propósito deste capítulo, vamos aprender a trabalhar com os elementos multimídia em nossas páginas.

25

HTML & CSS

Os principais elementos multimídia para uma aplicação são:

Fotos ou imagens estáticas

Animação

Áudio

Vídeo

CONSIDERAÇÃO NO USO DE MULTIMIDEA

O grande inimigo da utilização de multimídia é o mesmo relacionado com as imagens,

a velocidade de transferência de informações via Internet. Se uma imagem de 70Kb

pode levar vários segundos, ou até mesmo minutos para ser carregada imagine a execução de um clipe de vídeo com mais de 1MB. Os vídeos vão se popularizar mais quando a Internet a cabo se tornar mais acessível.

INSERINDO UM VÍDEO

Existem várias maneiras de inserir um vídeo em sua página. O vídeo pode aparecer

sob a forma de um link que ao ser clicado, executa o programa responsável pela sua exibição, ou aparecer diretamente na página.

A maneira mais simples de incluir um clipe de vídeo em sua página é utilizar as

opções do comando IMG. O principal parâmetro usado para inserir vídeo é a DYNSRC, abreviatura de Dynamic Source

ATRIBUTOS UTILIZADOS EM VÍDEOS

O vídeo como qualquer imagem em um documento HTML também possui uma infinidade de atributos, estes atributos estão na tabela abaixo:

Atributo

Finalidade

   

Exemplo

 

ALIGN=TOP,

O

texto que margeia a

<IMG SRC=”video.avi” ALIGN=MIDDLE>Este texto é alinhado pelo meio da figura.

MIDDLE,

ou

imagem é alinhado

BOTTOM

pelo topo, meio ou base do vídeo.

ALIGN=LEFT

A

imagem, ou vídeo é

   

ou RIGHT

alinhado a esquerda ou direita da página

<IMG SRC=”video.avi” ALIGN=RIGHT>Este

texto

aparece

do

lado

esquerdo

da

 

imagem.

ALT=texto

Especifica

um

texto

IMG SRC=”video.avi” ALT=”figura exibida”.

alternativo

para

ser

exibido

no

local

do

 

vídeo

BORDER=n

Especifica a largura da borda em pixels do

<IMG SRC=”vídeo.avi” BORDER=5>Esta imagem possui

vídeo

borda de 5 pixels de largura.

 

CONTROLS

Exibe botões

de

<IMG

DYNSRC=”vídeo.avi”

controle do tipo vídeo

CONTROLS>

 

cassete

 

DYNSRC=URL

Especifica o URL do

<IMG

SRC=”vide.gif”,

vídeo

que

será

DYNSRC=”vídeo.avi”>

 

exibido.

 

HEIGHT=n

Especifica a altura do vídeo. Se o vídeo possuir outro tamanho será ajustado para o

<IMG

SRC=”vídeo.avi”

WIDTH=150 HEIGHT=200>

 

26

HTML & CSS

 

tamanho especificado

 

HSPACE=n

Especifica uma margem horizontal em volta da imagem para

afastá-la do texto que

<IMG

 

SRC=”vídeo.avi”

HSPACE=10 VSPACE=10>

 
 

a

envolve

LOOP=n

Especifique quantas

<IMG SRC=”vídeo.avi” DYNSRC=”vídeo.avi” LOOP=3> o vídeo é executado três vezes.

LOOP=INFINIT

vezes

o

vídeo

será

E

executado.

Se

n

for

igual

a

 

–1

ou

 

INFINITE, o vídeo será

executado

 

continuamente. Caso

contrário, é executado

o

número

de vezes

especificado.

 

SRC

Especifica o endereço

<IMG

 

SRC

do

vídeo

 
   

START=

Para

clips

de

vídeo

DYNSRC=”vídeo.avi”

START=

FILEOPEN/

especifica

quando

o

FILEOPEN>

 

MOUSEOVER

vídeo

deve

ser

O

vídeo

é

executado

ao

ser

executado.

 

Como

carregado. <IMG SRC=”vídeo.gif” DYNSRC=”vídeo.avi” START=MOUSEOVER,FILEOPE

padrão,

o

vídeo

assume

o

valor

FILEOPEN

e

é

executado

 

N>

imediatamente

após

seu carregamento . O

valor

faz com

seja

MOUSEOVER que o vídeo executado

quando o cursor passa

sobre

a

área

da

imagem do vídeo.

VSPACE=n

Especifica

 

uma

<IMG SRC=”video.avi”

 

margem, vertical para

VSPACE=10>

 

o

vídeo, em pixels

   

WIDTH=n

Especifica a largura da

<IMG SRC=”vídeo.avi”

 

Imagem

 

WIDTH=150 HEIGHT=200>

 

USANDO O COMANDO EMBED PARA EXIBIR VÍDEO

O comando EMBED permite a exibição não somente de vídeo, mas também de arquivos de diferentes tipos em uma página HTML e que são executados por algum

plug-in previamente instalado. Ele funciona tanto no Internet Explorer quanto no Netscape Navigator.

Sintaxe:

<EMBED ALIGN=”LEFT” | “RIGHT” | “TOP” | “BOTTOM” BORDER=”pixels”

FRAMEBORDER=”NO”

27

HTML & CSS

HEIGHT=”pixels” HIDDEN=”TRUE” | “FALSE” HSPACE=”pixels” NAME=”appletName”

PALLETE=”FOREGROUND” | “BACKGROUND” PLUGINSPACE=”instrURL” SRC=”endereço” TYPE=”MIMEtype” VSPACE=”pixels” WHIDTH=”pixels”

>

</EMBED>

O comando NOEMBED

Para manter a compatibilidade com browsers antigos, use o comando <NOEMBED> para exibir uma mensagem indicando que o browser não tem capacidade para exibir o objeto. <html> <head> <title>Multimidea</title> </head> <body> <IMG DYNSRC="Cyclers.avi" START="fileopen" Loop="Infinite"> <HR> <embed src="admiradora.asf"></embed> <HR> <embed src="ambulancia.mpeg"></embed> </body> </html>

MARQUEE

O Internet Explorer introduziu um comando muito simpático chamado MARQUEE, que faz com que um texto especificado fique rolando em uma determinada área da página. Veja na tabela abaixo a sintaxe do comando MARQUEE

ALIGN=posição

Especifica como o texto que envolve o marquee será alinhado. Pode conter os seguintes valores:

TOP

Alinha

o

texto

pela

sua

parte

superior

MIDDLE

Alinha o texto pelo meio

 

BOTTOM

Alinha o texto pela sua parte inferior

BEHAVIOR=tipo

Especifica o comportamento do texto, ou seja, como será a sua rolagem pela janela. Pode conter os seguintes valores.

28

HTML & CSS

 

SCROLL

Inicia a rolagem introduzindo o texto de um lado e rola o texto até que ele saia completamente da janela no lado oposto ao que começou. Após a ultima letra ter saído da tela, o texto reaparece no canto inicial repetindo continuamente o processo.

SLIDE

Inicia a rolagem introduzindo o texto de um lado e rola o texto até que ele atinja a borda oposta. Quando a primeira letra do texto bater na borda, o texto para de rolar e permanece naquela posição.

ALTERNAT

Cria um efeito de movimento para o

E

texto, que inicia de um lado, entrando pela borda da janela e, ao bater na outra borda, inverte o seu deslocamento voltando para a borda inicial.

BGCOLOR=cor

Especifica a cor do texto do Segundo plano. Caso não seja especificada uma cor, é assumida a cor de segundo plano atual.

DIRECTION=direção

Especifica a direção que o texto vai usar para o deslocamento. O padrão é LEFT, que faz o texto deslocar-se do canto direito da janela para o canto esquerdo. Pode ser especificado também o valor RIGHT que inverte o sentido de deslocamento.

HEIGHT=n

Especifica a largura do painel, ou a área do MARQUEE. Se for especificado um número, ele é considerado como quantidade de pixels. Se for seguido do sinal %, indica a largura com relação à janela por meio da porcentagem.

HSPACE=n

Especifica a largura em pixels das margens esquerda e direita, para afasta-lo do texto ou outros objetos que o cercam.

LOOP=n

Especifica quantas vezes será executado. Se o valor de n for –1 ou INFINITE ele será executado continuamente.

SCROLLAMOUNT=

Indica a quantidade de pixels que será usada para

n

deslocar o marquee a cada movimentação.

SCROLLDELAY=n

Especifica em milissegundos o tempo entre cada deslocamento do texto.

VSPACE=n

Especifica em pixels a margem superior e inferior do marquee.

WIDTH=n

Especifica a altura do painel, ou área do marquee. Se for especificado um número, ele é considerado

como quantidade de pixels. Se for seguido do sinal %, indica a altura em relação à janela por meio de

porcentagem

Tenho certeza de que vocês vão gostar de usar esse comando para chamar a atenção dos seus usuários. Antes, porém, teste a visualização da página com um browser que não seja compatível com esse comando para verificar como ficará a tela.

29

HTML & CSS

Infelizmente,a Netscape deixou de incorporar esse comando à versão 4 do seu browser.

Combinando a utilização de vários Marquees

Você pode criar alguns efeitos interessantes combinando o uso de vários marquees. Eles podem ser colocados lado a lado ou um sobre o outro para a criação de um marquee com várias linhas. Os primeiros dois marquees são colocados lado a lado com o texto rolando em posição contrária. Eles partem das bordas e colidem no centro da página. O segundo exemplo é uma variação do primeiro. Porém, foi adicionados uma quebra de linha com o comando <BR> entre os dois e delimitada uma largura. No terceiro exemplo, três marquees são colocados um abaixo do outro, criando um painel de três linhas.

<html> <head> <title> Combinando vários Marquees</title> </head>

<body bgcolor="#FFFFFF"> <marquee height="15" width="300" behavior="Scroll" direction="right" bgcolor="#FFFF00" loop=infinite>

É fácil juntar dois Marquees</marquee>

<marquee height="15" width="300"behavior="Scroll" direction="Left" bgcolor="#00FF00" loop=infinite>

É fácil juntar dois Marquees</marquee>

<hr> <body bgcolor="#FFFFFF">

<marquee height="15" width="200" behavior="Scroll" direction="right" bgcolor="#FFFF00" loop=infinite>

É fácil juntar dois Marquees</marquee>

<br>

<marquee height="15" width="200" behavior="Scroll" direction="Left" bgcolor="#00FF00" loop=infinite>

É fácil juntar dois Marquees</marquee>

<hr> <body bgcolor="#FFFFFF"> <marquee height="15" width="200" behavior="Scroll" direction="left" bgcolor="#FFFF00" loop=infinite> Para criar um Marque com</marquee> <br> <marquee height="15" width="200" behavior="Scroll" direction="Left" bgcolor="#FFFF00" loop=infinite> diversas linhas bastam especificar</marquee><br> <marquee height="15" width="200" behavior="Scroll" direction="Left" bgcolor="#FFFF00" loop=infinite> vários Marquees em seqüência </marquee> </body> </html>

SOM

30

HTML & CSS

A inclusão de som em uma home page ou aplicação Internet pode ser um recurso bastante interessante para chamar a tenção do usuário. Menos problemático do que o uso do vídeo, devido ao tamanho dos seus arquivos, o uso de som também enfrenta problemas de velocidade de transmissão devido às limitações da rede ou do browser. Existem vários tipos de formatos para arquivos de áudio, porém quatro ou cinco deles dominam o mercado e são compatíveis com a maioria dos browsers atuais, vejam quais são eles:

AU: Esse formato é dominante na plataforma Unix e é compatível com quase todas as demais plataformas. É adequado para instrumentos e voz. WAV: Formato padrão de som da plataforma Windows – oferece boa qualidade de som, porém gera arquivos de tamanho muito grande, o que o torna problemático para ser executado quando não existe boa velocidade de transmissão entre o browser e o servidor. MIDI: Esse formato é um padrão para a representação de instrumentos musicais produzidos por um instrumento eletrônico, como um sintetizador. Ao contrário dos formatos anteriores, ele não é compatível com voz, pois na verdade o arquivo MIDI não é uma gravação digital de som e sim um arquivo com comandos para a execução de sons. Sua vantagem é que ele possui um tamanho extremamente reduzido e oferece ótima qualidade para música orquestrada. MP3: Esse formato, ou seja, todos os formatos de MPA são arquivos de áudio compactados, equivalentes aos arquivos de vídeo MPEG. Seu tamanho é menor do que os arquivos WAV e com qualidade superior. Existe hoje na Web uma procura enorme em arquivos MP3. RAM ou RA: É o formato RealAudio, e está se tornando muito popular, pois permite a execução sob demanda, ou seja, permite transmissões ao vivo e quando executado, a partir de um arquivo, reproduz o som à medida que ele vai sendo lido.

Inserindo Áudio

Assim como no caso dos clipes de vídeo, ou imagens, podemos usar duas técnicas para incluir áudio na página. A primeira é através de hiperlinks, a segunda através do comando META e, dependendo do browser, através de comandos específicos.

Inserindo Áudio através de Hiperlinks

Veja o código abaixo onde os arquivos de áudio e estão vinculadas as páginas através de hyperlinks.

<html> <head> </head> <body bgcolor="#FFFFFF"> <a href="mission2.mid">Missão impossível</a> <a href="solar2.wav"> do tipo .WAV</a>, <a href="gamel.au">no formato .AU</a> ou <a href="eg-follow.mp2"> no formato .mpeg</a> </body> </html>

INSERINDO MÚSICA DE FUNDO

O comando BGSOUND (Internet Explorer)

Esse novo comando introduzido pelo browser da Microsoft é extremamente simpático. Ele carrega e executa imediatamente um arquivo de som, assim que a página é acessada. Uma vez iniciada a execução do som, pode-se interrompê-la pressionando a tecla ESC ou mudando de página. A sintaxe é:

31

HTML & CSS

Atributo

Finalidade

Exemplo

 

SRC= URL

Especifica o endereço do arquivo de áudio que será executado.

<BGSOUND SRC=”ring.au”

LOOP=n

Especifica quantas vezes o arquivo será reproduzido.

<BGSOUND

SRC=”ring.au”

LOOP=3>

LOOP=INFINITE

O valor INFINITE reproduz o arquivo continuamente

Executa

o

arquivo

infinitamente

Veja um exemplo abaixo:

<html> <head> </head> <bgsound src="africa.mid"> <body bgcolor="#FFFFFF"> <font color=Red> <h1> O comando BGSOUND </h1> </font> </body> </html>

JAVA

Java. Com certeza você já deve ter ouvido falar nele. Primeiramente nunca devemos confundir JAVA com Javascript, pois são coisas totalmente distintas. JAVA é uma linguagem de programação desenvolvida inicialmente pela SUN, e a sua construção é bastante complexa e Javascript é uma linguagem de scripts desenvolvida inicialmente pela Netscape. Bom vamos agora aprender a incorporar programas de Java (classes) no documento HTML.

ELEMENTO HTML PARA APPLETS JAVA

Os applets Java são arquivos com extensão “.class” que o browser carrega junto com

a sua página. Uma vez transferido para o seu computador, o browser executa o

aplicativo da forma configurada na página e exibe o resultado na sua tela. Tal como as

imagens referenciadas em sua página, um applet também precisa ser transferido para o seu espaço de home page no seu provedor.

<APPLET CODE=

WHIDTH=

HEIGHT=

CODEBASE= > <PARAM NAME=

VALUE= >

<PARAM NAME=

VALUE= >

<PARAM NAME=

VALUE=

>

</APLLET>

O elemento HTML de um applet é bem simples. Tudo que você tem a fazer é colocar

o nome do arquivo “.class” correspondente ao applet no parâmetro CODE, colocar a largura e a altura da área ocupada pelo mesmo nos parâmetros WIDTH E HEIGHT e

32

HTML & CSS

em CODEBASE você pode especificar o diretório (no servidor WEB) onde ficarão só seus applets. Vamos agora utilizar alguns applets mais comuns utilizados pela Web. Todos os Applets que serão mostrados aqui foram adquiridos na própria WEB. Um dos programas mais conhecidos para a criação de applets é ANFY que pode ser baixado no seguinte link: http://anfyteam.com/index.htm. Ele permite que você possa criar o seu applet e depois copiar o código e colar diretamente dentro do HTML.

FOLHAS DE ESTILO

A CSS traz para a WEB a mesma conveniência de “um só lugar” para definir os estilos

que estão disponíveis na maioria dos editores de texto. Você pode definir uma CSS em uma localização central para afetar a aparência das tags HTML em uma única página da WEB ou em todo um site da WEB. Embora a metodologia da CSS funcione com a HTML, não é HTML. Em vez disso, a CSS é um código separado que amplia as capacidades da HTML, permitindo que você redefina o modo como as tags HTML funcionam.

VERSÕES DA CSS

A CSS evoluiu nos últimos anos sob a orientação do W3C ( www.w3.org/Style/CSS/ )

até a sua versão atual a 2(dois). Embora a maioria dos browsers modernos suporte a versão mais recente, os browsers mais antigos suportam as combinações das versões antigas da CSS. Elas são:

CSS - 1

O W3C lançou a primeira versão oficial da CSS em 1996. Essa primeira versão incluía

a capacidade de núcleo associada às CSS, tais como a capacidade de formatar texto,

definir fontes e margens.

CSS – Positioning (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 lançada e a CSS-2 ainda estava distante, de modo que a W3C lançou uma solução intermediária: A CSS- Positioning. Esse padrão de destinava a ser uma proposta que seria discutida pelas várias partes envolvidas antes de ele ser oficializado. A Netscape e a Microsoft assumiram essas propostas, porém, e incluíram as idéias preliminares nas versões 4 de seus navegadores. Embora a maioria dos recursos básicos sejam suportados em ambos os browsers como o nome de “marca” diversos recursos forma deixados de fora.

CSS – 2

A versão mais recente da CSS surgiu em 1998. O nível 2 inclui todos os atributos das

duas versões anteriores mais uma ênfase maior na facilidade de acesso e na capacidade de especificar CSSs especificas de mídia. A partir do IE e Netscape 6 suportam CSS 2.

CSS – 3

Este padrão ainda está em desenvolvimento, e mesmo após o lançamento geralmente leva alguns anos para que os navegadores suportem o padrão. Sem dúvida, a nova adição será o Scalable Vector Graphics (SVG). Esse é um formato que permite incluir formas (linhas, círculos, curvas e outras), como vetores e não bitmaps, levando o poder dos gráficos baseados no vetor e na tipografia à WEB.

REGRAS DA CSS

33

HTML & CSS

O melhor da folha de estilo em cascata é que ela é incrivelmente fácil de configurar. Não exige plug-ins ou softwares diferente – apenas regras. Podemos definir regras que dizem a uma tag HTML especifica o seu conteúdo, ou pode criar regras genéricas e, em seguida, aplicá-las às TAGS como quiser. Existem três etapas na regras da CSS. Seletor HTML: A parte de texto de uma TAG HTML se chama seletor. Exemplo:

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 versátil. 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, porém, geralmente são aplicados somente uma vez na página a determinada TAG HTML para criar um objeto para ser usado com uma função JavaScript. Exemplo:

#objeto{font bold 12pt times;}

INCLUINDO CSS NO DOCUMENTO Embora a CSS signifique nunca ter que definir a aparência 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 estão definidos para a página. 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 o filme

o

filme o filme o filme o filme <br>

o

filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme

o

filme o filme o filme o filme o filme <br>

o

filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme

o

filme o filme o filme o filme

</p>

</body>

</html>

Incluindo a CSS em uma página WEB

A principal utilização da CSS é para definir as regras de todo um documento. Para fazer isso, você deve inclui as regras de estilo no título do documento aninhado dentro de um conteiner de estilo. Embora os resultados do acréscimo de estilo dessa forma possam parecer idênticos ao acréscimo dos estilos diretamente em uma TAG HTML, a colocação dos estilos em

34

HTML & CSS

uma localização 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 o filme

o

filme o filme o filme o filme <br>

o

filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme

o

filme o filme o filme o filme o filme <br>

o

filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme

o

filme o filme o filme o filme

</P>

</body>

</html>

Incluindo a CSS em um site da WEB

Um dos benefícios da CSS é a possibilidade de criar uma folha de estilo para ser usada não apenas em um único documento HTML, mas através 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 contém as formatações deve possuir a extensão CSS. Veja o mesmo exemplo:

Arquivo CSS:

body{background-color:black;}

h1{color:red;}

h2{color:yellow;}

p{color:white;}

Arquivo HTML

<html>

<head>

35

HTML & CSS

<title>CSS</title>

<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 o filme

o

filme o filme o filme o filme <br>

o

filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme

o

filme o filme o filme o filme o filme <br>

o

filme o filme o filme o filme o filme 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 Posição

Elemento

Definição

 

Exemplo de Atributo

Position

Tipo de Posicionamento

 

Absolute ou relative

Top

Distância Vertical para o canto superior esquerdo do quadro

10in, 150px, 30 cm

Left

Distância Horizontal para o canto superior esquerdo do quadro

10in, 150px, 30 cm

Width

Largura do Quadro

 

10in, 150px, 30 cm

Height

Altura do Quadro

 

10in, 150px, 30 cm

Z-index

Camada

usada

quando

1,2,3,4

sobrepondo quadros

Padding

Margem entre as bordas do quadro e o texto interno ao quadro

2,5,10,17

Margin

Margem

entre

as

bordas

do

1,2,3,4

quadro

e

o

texto

externo

ao

quadro

Border-width

Largura da borda do quadro

 

Thin, medium, thick

Border-color

Cor da borda do quadro

 

Yellow,#00FFAA

Border-style

Estilo da Borda

 

None,dotted,dashed,soli

 

d,double

Broder-width

Largura da borda do quadro

 

Thin,medium,thick

 

Atributos de Fontes

 

Elemento

Definição

 

Exemplo de Atributo

Font-family

Fonte que será usada para mostrar o texto

Helvetica, Arial, Courier

Font-size

Tamanho da Fonte

 

12pt,10cm, 5in

Font-style

Estilo

Normal, italic

36

HTML & CSS

Font-weight

Peso da fonte

Bold, lighter,100,300

Atributos e Cores de Fundo da Página

Elemento

Definição

Exemplo de Atributo

Color

Cor do texto

Marrom,#ffffcc

Backgroun-

Cor de fundo

Marrom,#ffffcc

color

Background-

Imagem de fundo

Imagem.gif

image

 

Atributos de Texto

Elemento

Definição

Exemplo de Atributo

Word-spacing

Espaçamento entre as palavras

1em, 5pt

Letter-spacing

Espeçamento entre as letras

0,1em, 0,1cm, 2 pt

Text-

Decoração de texto

None, underline, blink

decoration

Vertical-align

Alinhamento vertical

Middle, top, sub, super

Text-align

Alinhamento Horizontal

Left,center, right

Text-height

Altura da Linha

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 definição com uma chave ({)

O nome da classe pode ser o que você quiser, desde que use letras e números. Por

exemplo podemos criar uma classe chamada .copy{. Ela é uma classe independente e você pode usá-la com qualquer TAG HTML, com uma condição: 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”>

DEFININDO IDS Assim como o seletor de classe, o seletor de ID pode ser usado para criar estilos exclusivos que são 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 começam com (#) e, sem seguida, o nome do ID. O nome pode ser uma palavra ou qualquer conjunto de letras ou números que você quiser. Digite as suas definições para essa classe separando-as com um ponto e vírgula. 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 não 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”>

LAYERS

37

HTML & CSS

Uma camada do Netscape é uma parte independente do conteúdo da WEB que há dentro de um documento HTML, a qual é separada com um dos pares de tags de duas camadas:

<layer>: Equivalente à <div style=”position:absolute;”> <ilayer>:Equivalente à <span style=”position:absolute;”>

DEFININDO TAGS DENTRO DO CONTEXTO Quando uma TAG é cercada por outra TAG, uma dentro da outra, são 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 espaço. 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">Próximo Capítulo &gt;</a> </div> <hr> <h3>Novo Capítulo</h3>

<p>Teste

parágrafo, Teste de parágrafo, Teste de parágrafo, <a href="curioso.htm">Efeito curiosos</a></p> </body> </html>

de parágrafo,

Teste de parágrafo,

Teste de parágrafo,

Teste de

CRIANDO UMA DEFINIÇÃO !IMPORTANT

O valor !important pode ser incluído em uma definição para fornecer o máximo de

peso na determinação da ordem em cascata. Para forçar que uma definição seja sempre usada abra uma regra da CSS com um seletor e uma chave ({), digite uma definição de estilo, um espaço, !important e um

ponto e vírgula para fechar a definição.

O Netscape 4 não suporta !important

Exemplo: p{ font-size:12px !important;}

DEFININDO A CSS PARA IMPRESSÃO

38

HTML & CSS

Quando a maioria das pessoas pensam em páginas WEB, pensa nessas páginas exibidas na tela. Entretanto, mais cedo ou mais tarde, a maioria das pessoas quer imprimir pelo menos algumas páginas 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 página 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 impressão. Veja os códigos 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 Impressão:

body{ color:black; font-family:Arial;

h1,h2{

font-weight:bold;} .cassea{

color:#999999;}

Código no HTML:

<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> Mídia de tela </h1> <br>

na

impressão</span>

<hr>

<h2>Teste</h2>

</body>

</html>

DEFININDO QUBRAS DE PÁGINA PARA A IMPRESSÃO Um problema que você encontrará ao tentar imprimir um site da WEB são as quebras de página. Na verdade, uma página da WEB pode conter diversas páginas impressas. Assim sendo, o cabeçalho de uma seção pode aparecer na parte inferior de uma página e seu texto na parte superior da próxima página. Podemos forçar uma quebra de página ao imprimir uma página da WEB, para isso utilize: < TAG style=”page-break-before:always;”> </TAG> Onde always Força a quebra de página antes do elemento. Auto permite que o browser coloque as quebras de página.

<span

class="classea">O

que

pode

ser

visto

na

tela

será

diferente

39

HTML & CSS

FAZENDO O DOWNLOADS DE FONTES Um dos melhores recursos da WEB é o download de fontes. Imagine se em vez de

depender da lista limitada de fontes browser-safe ou em vez de criar gráficos apenas para obter o tipo desejado, você pudesse enviar automaticamente fontes para o computador do visitante. Com a CSS-2 isso é possível com algumas restrições. Para o IE você tem que converter as suas fontes para o formato .eot, usando um

WEFT

(http://www.microsoft.com/typography/web/embedding/weft3 ) Esse programa porém é exclusivo do Windows. No Netscape, você tem que comprar o software TrueDoc(www.truedoc.com), esse programa era para funcionar tanto no Netscape quanto no IE, mas no IE tem muitos BUGS. Outro problema é a diferença entre os nomes de fontes de diferentes SO. Para fazer o download de uma fone basta apenas o seguinte:

programa

chamado

@font-face{ Bastarda; src:url(Bastarda.eot);} p{font-family:Bastarda, Arial;} É recomendado a inclusão de pelo menos uma fonte alternativa, para o caso da fonte referenciada não conseguir ser baixada.

CONTROLES DE TEXTO

Ajustando o Kerning

O Kerning se refere à quantidade de espaço que há entre as letras de uma palavra. Geralmente, quando há mais espaço entre as letras a facilidade de leitura é maior. Por outro lado, espaço de menos pode impedir a leitura, fazendo com que as palavras individuais apareçam menos distintas na página. Para definir o Kerning:

Letter-spacing: 2em. Um valor positivo para o espaçamento de letras inclui mais espaço na quantidade padrão; um valor negativo fecha o espaço.

Ajustando o espaçamento entre as palavras

Podemos também ajustar o espaçamento entre as palavras. A inclusão de um pequeno espaço entre as palavras na tela pode ajudar a tornar o seu texto mais fácil de ler, mas espaço demais interrompe o caminho do olho do leitor na tela. Para definir estes espaçamento:

Word-spacing: 8px;

Ajustando as Entrelinhas

O espaço entre as linhas também podem ser aumentados para dar um efeito dramático, criando áreas de espaço em negativo no texto. Mas também podem ser usados para facilitar a leitura e inclusão de comentários em seu texto. Para definir o espaçamento entra linhas:

Line-height:2; ou line-height:12px ou line-height:% Exemplo:

<html> <head> <title>Ajustando o Texto</title> <style type="text/css">

<!--

.copia{line-height:2;}

.titulo{word-spacing:8px;}

.kerning{letter-spacing:2em}

40

HTML & CSS

--> </style> </head> <body> <h1 class="titulo">Palavras com Espaçamento</h1> <hr> <p class="copia">teste de texto com espaçamento entre linhas teste de texto com espaçamento entre linhas teste de texto com espaçamento entre linhas teste de texto com espaçamento entre linhas teste de texto com espaçamento entre linhas </p> <P class="kerning">Espaçamento entre letras Espaçamento entre letras Espaçamento entre letras Espaçamento entre letras </P> </body> </html>

DEFININDO SEGUNDO PLANO Podemos usar a propriedade background para definir a imagem e a cor do segundo plano de toda a página ou a imagem e cor de segundo plano imediatamente atrás de cada elemento individual da página. Para definir o segundo plano iniciamos a digitação 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 espaço. 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 localização do arquivo. Alternativamente pode-se usar none em vez de url, ele instrui a browser a não utilizar uma imagem de segundo plano. Repeat Defina qual será o modo de repetição a ser utilizado eles podem ser:

Repeat-x: Instrui o browser para repetir o gráfico de segundo plano na horizontal. Repeat-y: Instrui o browser para repetir o gráfico de segundo plano na vertical. No-repeat: faz com que o gráfico de segundo plano apareça apenas uma vez. Fixed: Instrui para que a figura fique fixa ou seja não role com o site. Scroll: Instrui para que a imagem role junto com a tela. Right top: Digite dois valores separados por um espaço para especificar o lugar onde o segundo plano deve aparecer em relação ao canto superior esquerdo do elemento. Exemplo:

<html> <head> <title>Cores e planos de fundo</title> </head> <style type="text/css">

<!--

body{background:black url(images/astalavistagrouplogo3.jpg) no-repeat fixed center; color:white;}

h2{background-color:yellow;color:red;}

.copia{background-color:orange;color:brown;}

-->

</style>

41

HTML & CSS

<body> <h2> testando cores de preenchimento</h2> <hr> <span class="copia">texto </span> </body> </html>

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. Também é possível definir a borda do elemento em cada lado da caixa individualmente. As principais propriedades para bordas são: border-width, border-style, border-color.

Boder style

Border width

None

Thin

Dotted

Medium

Dashed

Tick

Solid

lenght

Double

 

Groove

 

Ridge

 

Inset

 

outset

 

Exemplo:

<html>

<head>

<title>Untitled</title> <style type="text/css">

<!--

.inset{border-style:inset; border-color:red;

border-width:15px}

.double{border-style:double; border-color:orange;

border-width:10px;}

td{text-align:center;} --> </style> </head> <body> <table class="inset"> <tr> <td colspan=2>Célula 1</td></tr> <tr><td>abaixo</td><td>abaixo e à direita</td></tr> </table> <p class="double">Texto envolvido por bordas<br>com duas linhas</p> </body> </html>

ENVOLVENDO UM ELEMENTO COM TEXTO

42

HTML & CSS

No inicio do desenvolvimento HTML, quando a capacidade de fazer o texto flutuar ao redor de um gráfico foi incluída, os designers de toda parte estavam maravilhados. A CSS levou este passo um pouco adiante, permitindo que o texto não apenas flutue ao redor do texto, mas também que flutue ao redor dos outros blocos de texto e do texto

ao redor das tabelas, para isso usamos a propriedade float.

Inicie sua definição 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 conteúdo dentro de um conteiner daquela TAG como sendo um elemento exclusivo da janela. Em seguida é possível manipular esse elemento exclusivo por meio do posicionamento da CSS. Um elemento pode ter um de quatro valores de posicionamento – estático, relativo, absoluto ou fixo – embora apenas os três primeiros normalmente estejam disponíveis na maioria dos browsers. O tipo de posicionamento diz ao browser como ele deve tratar o elemento ao posicioná-lo na janela.

Posicionamento Estático

Como padrão, os elementos são posicionados como estáticos dentro da janela, a menos que você os defina com os outros posicionamentos. Entretanto o posicionamento estático é diferente, porque um elemento estático não 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 padrão

de qualquer outro elemento da HTML – ou seja, ele aparece após tudo que está antes

dele na HTML e antes de tudo que está após ele na HTML. Você pode mover um elemento posicionado relativamente a partir de sua posição natural na janela usando as propriedades top e left. Essa técnica é útil para controlar o modo como os elementos aparecem com relação aos outros elementos da janela.

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 conteúdo HTML que quiser. Os elementos que são definidos dessa forma são colocados em um ponto exato da janela por meio das coordenadas x e y. O canto superior esquerdo da janela ou de seu elemento conteiner é a origem.

Posicionamento 3D

Apesar da área da tela ser bidimensional, os elementos que são posicionados podem receber uma terceira dimensão: uma ordem de empilhamento na qual um elemento se relaciona ao outro. Os elementos posicionados recebem números automáticos de empilhamento, a partir

do

0 (zero)incrementalmente com 1,2,3 e assim por diante. Esse sistema é chamado

de

índice Z. O número de índice Z de um elemento é um valor que mostra sua relação

3D

com os outros elementos da janela.

Para definir o indice Z de um elemento, primeiro defina o posicionamento (ex: