HTML e CSS

5/11/2018 HTML e CSS - slidepdf.com

http://slidepdf.com/reader/full/html-e-css-55a0ca535d411 1/52

Profesora: Iara Fernandes

Ribeiro

Aluna: Camila Vieira de Pontes

Turma: C911M em 2007



Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro

INDICEINDICE ...................................................................................................................................................................................2

INTRODUÇÃO ........................................................................................................................................................... ......... .3

CUIDADOS NA CONSTRUÇÃO DE UM SITE ...............................................................................................................4

TRACE METAS ....................................................................................................................................................................4

FAÇA UM ESBOÇO........................................................................................................................................................... 4DIVIDA O SEU SITE.......................................................................................................................................................... 4ACESSO DIRETO A INFORMAÇÃO......................................................................................................................................... 4EVITE SITES TIPO CARNAVAL............................................................................................................................................. 5 NÃO SE PRENDA A PLATAFORMAS...................................................................................................................................... 5DIVULGUE O SEU SITE E OBSERVE OS ACESSOS...................................................................................................................... 5COMO SE CRIA UM DOCUMENTO HTML .................................................................... ............ ............. ............. ............. ......5TAGS, MARCAS OU ELEMENTOS HTML .......................................................................... ............. ............. ............ ............. ..6ESTRUTURA BÁSICA....................................................................................................................................................... 7DESCRIÇÃO DOS ELEMENTOS BÁSICOS DO HTML: ................................................................... ............. ............. ............. ......7COMENTÁRIOS............................................................................................................................................................... 8

CARACTERES ESPECIAIS................................................................................................................................................... 8CRIANDO O PRIMEIRO DOCUMENTO HTML ................................................................ ............ ............. ............. ............. ......9 FORMATANDO CABEÇALHOS ......................................................................................................................... ........ 10

PARÁGRAFOS E QUEBRAS DE LINHA.................................................................................................................................. 10O COMANDO <BR> .............................................................. ............. ............. ............. ............. ............. ............. ........11O COMANDO <P> ................................................................. ............. ............. ............. ............. ............. ............. ........11ALINHANDO PARÁGRAFOS............................................................................................................................................... 11O COMANDO <HR> ....................................................................... ............. ............. ............. ............. ............ .............11

USANDO IMAGENS COMO LINHAS SEPARADORAS .............................................................................................12DIV .........................................................................................................................................................................12BLOCKQUOTE............................................................................................................................................................... 13

ESTILOS DE TEXTO E FONTE ....................................................................................................................... ........ ......14

APLICANDO CORES E TAMANHOS NO TEXTO ................................................................... ............. ............. ............. ..........15ALTERANDO O TAMANHO DA FONTE.................................................................................................................................. 15

Size ....................................................................................................................................................................... ........ .15 Face ............................................................................................................................................................................... 15Color .................................................................................................................................................................... ........ .15

CABEÇALHOS ................................................................................................................................................................. ..18

ALINHANDO CABEÇALHOS............................................................................................................................................... 18

LISTAS .................................................................................................................................................................................19

LISTAS ORDENADAS...................................................................................................................................................... 19LISTAS NÃO ORDENADAS............................................................................................................................................... 20LISTA DE DEFINIÇÃO..................................................................................................................................................... 20

IMAGENS ............................................................................................................................................................................22O COMANDO IMG.......................................................................................................................................................... 22MARQUEE.................................................................................................................................................................. 24

Combinando a utilização de vários Marquees .................................................................................................. ........ ..26

URLS E LINKS ............................................................................................................................................................. ......28

URL .............................................................................................. ............. ............. ............. ............. ............. ..........28Criando um Link com Arquivos Locais ........................................................................................................................28Usando uma Imagem como Hiperlink ..........................................................................................................................29Vinculando Arquivos de outros diretórios ...................................................................................................................29

CRIANDO LINKS PARA SEÇÕES DE UMA PÁGINA............................................................................................ 29Criando uma Âncora ........................................................................................................................................ ......... ...29

E NVIANDO E-MAIL DIRETAMENTE DA PÁGINA HTML ....................................................... ............. ............. ............. ..........29

DEFININDO DESTINOS.................................................................................................................................................... 30


2




TABELAS .................................................................................................................................................................. ........ ..31

ELEMENTOS BÁSICOS DE TABELAS..................................................................................................................................... 31PARÂMETROS............................................................................................................................................................... 32

Parâmetros do elemento <TABLE> .................................................................................................................. ........ ..32 Parâmetros do elemento <TR> ....................................................................................................................................33 Parâmetros dos Elementos <TD> e <TH> .............................................................................................................. ...34

FRAMES ............................................................................................................................................................................ ..35Como funcionam os frames ............................................................................................................................. ........ .....36 O Comando Document ................................................................................................................................. ........ ........36 O Comando FRAMESET .......................................................................................................................................... ....36 Cols=tamanho .............................................................................................................................................. ........ ........36 ROWS=tamanho .......................................................................................................................................................... . 37 Combinando ROWS e COLS ........................................................................................................................... ........ .....37

O ATRIBUTO <FRAMESPACING=VALOR > .......................................................................... ............. ............. ............. ..37O ATRIBUTO <FRAMEBORDER =1/0> ...................................................... ............. ............. ............. ............. ............. ..........38O COMANDO <FRAME SRC> ............................................................................ ............. ............ ............. ............. .........38

Ajustando as margens internas do Frame ....................................................................................................................39 Barras de Rolagem e Redimensionamento dos Frames .................................................................................. ......... ...39

I NTERLIGAÇÃO DE FRAMES.............................................................................................................................................. 40

Criando a Estrutura dos Frames ..................................................................................................................................40Criando o conteúdo do Menu ..................................................................................................................................... ..40IFRAME ............................................................................ ............. ............. ............. ............ ............. ............. .........42

META .................................................................................................................................................................................. .43

I NFORMAÇÕES ESPECÍFICAS ............................................................................................................................................. 43VARIAÇÕES DO COMANDO META...................................................................................................................................... 43

MULTIMIDEA ....................................................................................................................................................................44

CONSIDERAÇÃO NO USO DE MULTIMIDEA............................................................................................................................ 44I NSERINDO UM VÍDEO..................................................................................................................................................... 44ATRIBUTOS UTILIZADOS EM VÍDEOS.................................................................................................................................. 45USANDO O COMANDO EMBED PARA EXIBIR VÍDEO............................................................................................................ 46

O comando NOEMBED ................................................................................................................................................47 SOM.......................................................................................................................................................................... 47

Inserindo Áudio ............................................................................................................................................ ........ ........48 Inserindo Áudio através de Hiperlinks .............................................................................................................. ........ ..48

I NSERINDO MÚSICA DE FUNDO......................................................................................................................................... 49O comando BGSOUND (Internet Explorer) ............................................................................................................... .49

GLOSSÁRIO ...................................................................................................................................................................... .50

GLOSSÁRIO ............................................................................................................ 55

INTRODUÇÃOA Internet é, sem dúvida alguma, é a grande explosão da atualidade, onde a cada dia

surgem mais e mais home pages de universidades, empresas, tendências, jornais, lojas e

tudo o mais que se possa imaginar.

Até pouco tempo, era impossível atingir um grande público com tanta facilidade e

rapidez. Com a WWW, tudo fica fácil. Porém, surgem alguns desafios e responsabilidades.

O grande desafio, é ser suficientemente interessante, para que as pessoas queiram visitar


3




novamente. A grande reponsabilidade é oferecer algo de valor ou interesse para a

comunidade alvo, e lembrar que nem todo mundo possui conexão de alta velocidade. Se

quiser atrair a atenção das pessoas, você precisa ser criativo, cortês e interessante.

Construir um site interessante é um grande desafio, e saber HTML não é o suficiente,

então, antes de entrarmos nos detalhes da criação de página, vamos ver alguns cuidados

na construção de um site.

CUIDADOS NA CONSTRUÇÃO DE UM SITE

TRACE METAS Para que você tenha algum sucesso em seu site, o mesmo deve oferecer algo

atualizado e interessante.

Se você fizer algo focado em um público em especial, com bom conteúdo atualizadoconstantemente o seu site tem boas chance s de ser bem visitado.

Portanto antes de fazer uma página planeje bem o que você quer colocar em seu site

por que se um internauta o visitar e não ver algo que o interesse com certeza ele não

voltará.

FAÇA UM ESBOÇOOrganizar um site é uma das formas mais fáceis de garantir um bom resultado final.

Então antes de sair criando códigos de HTML, pare pegue papel e caneta e desenhe o seu

site para que ele não fique totalmente fora de foco.

DIVIDA O SEU SITEDivida o seu site em seções principais, relacionadas aos assuntos principais. Isto

além de facilitar o seu trabalho também facilitará ao visitante a navegação pelo seu site.

ACESSO DIRETO A INFORMAÇÃO

Evite sites “labirintos” em que o visitante fica navegando de um lado para outro enunca consegue encontrar o que realmente deseja.

Evite também percursos longos até o destino desejado, pois com certeza a internauta

que visitar o seu site vai acabar desistindo no meio do caminho.

Então para facilitar ao máximo a navegação por seu site crie barras de navegação se

possível com links para todas a seções.

Ao final de cada assunto criar um link para o inicio da página.


4




EVITE SITES TIPO CARNAVALProcure seguir um padrão entre as suas páginas, se for usar fontes escuras use

fundos mais claros e vice versa e não faça uma página rosa choque, outra em seguida

verde-limão, etc...

NÃO SE PRENDA A PLATAFORMASVocê não pode esquecer que os internautas usam diversos tipos de sistemas

(Windows, Mac, Linux, etc...), então procure diminuir ao máximo o tamanho de imagens,

usar uma resolução de tela que você sabe que não dará problema na maioria das telas e

se possível testar o seu site em diversos sistemas operacionais.

DIVULGUE O SEU SITE E OBSERVE OS ACESSOSProcure cadastrar o seu site em todos os mecanismos de busca possíveis, e verifique

se possível ( alguns provedores de hospedagem dão esta opção) verifique sempre o cessoao seu site, se ele estiver baixo com certeza alguma coisa nele está errada.

COMO SE CRIA UM DOCUMENTO HTMLPara fazer Home Pages, você terá que aprender pelo menos um pouco de HTML

(Hipertext Markup Language) - Linguagem de Hipertexto Baseada em Marcas.

Apesar da palavra linguagem, que leva a associação com linguagens de

programação, não se assuste, 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 formato “txt”.


5




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.

Uma página Web é composta de textos e comandos especiais que são chamados de

(tags). Assim como qualquer linguagem, o programador deve escrever o código-fonteseguindo 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.

Podemos usar o Bloco de Notas para esta tarefa. Mas existem outros editores, como

exemplo o Microsoft FrontPage, DreamWeaver, dentre muitos outros.

TAGS, MARCAS OU ELEMENTOS HTML

As TAGS são utilizadas para fazer todas as indicações necessárias ao Browser

(Programa navegador, capaz de recuperar páginas Web para seu computador).

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.

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:

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

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.

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.


6




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

cabeçalhos.

ESTRUTURA BÁSICA

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

<TITLE> Titulo do Documento < /TITLE>< /HEAD>

<BODY>texto,imagem,links, etc...

< /BODY>

< /HTML>

OBS.: As ( tags ) HTML não são sensíveis à caixa, ou seja, tanto faz escrever com

letras maiúsculas ou minúsculas, porém se você escrever em maiúsculas será bem melhor

para identificá-las. Veja: <HTML> </html>

DESCRIÇÃO DOS 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, podendo ser configurado com um

valor Hexadecimal.


7




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= “Blue” > configura uma página com texto em cor preta. (padrão).

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

LINK configura a cor do link antes de clicado clicado; ALINK configura a cor do link

ativo, isto é quando é clicado; 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 visitados roxos e links ativos vermelhos.

Todas as marcas apresentadas são do tipo início-fim, ou seja, funcionam em pares.

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.

OBS.: 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.

COMENTÁRIOSPodemos 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.

CARACTERES ESPECIAISExistem 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 obtidosutilizando-se uma nomenclatura definida pela norma ISO.

HTML permite que caracteres especiais sejam representados por seqüências de

escape, indicadas por três partes: um & inicial, um número ou cadeia de caracteres

correspondente ao caracter desejado, e um ; final.

Quatro caracteres ASCII - <, >, e & têm significados especiais em HTML, e são

usados dentro de documentos seguindo a correspondência:


8




Entidade Caracter

< <

> >

& &

Outras sequências de escape suportam caracteres ISO Latin1. Aqui está uma tabelacom os caracteres mais utilizados em Português:

Entidade Caracter

á á

â â

à à

ã ã

ç ç

é é

ê ê

í í

ó ó

ô ô

õ õ

ú ú

ü ü

Entidade Caracter

Á Á

Â Â

À À

Ã Ã

Ç Ç

É É

Ê Ê

Í Í

Ó Ó

Ô Ô

Õ Õ

Ú Ú

Ü Ü

Existem alguns símbolos que vêm sendo incorporados ao conjunto de caracteres

reconhecidos em HTML. Por exemplo, &copy, que é o símbolo © , ® para ® , e §

para §.

CRIANDO O PRIMEIRO DOCUMENTO HTMLAbra o bloco de notas e digite a linha de cógigo a sagir:

<HTML>

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

</HEAD>

<BODY BGCOLOR="Blue" TEXT="Black">

Meu primeiro texto em Html, no momento não usarei nenhuma formatação especial

aqui dentro.

</BODY>


9




</HTML>

Agora salve sem esquecer que a extensão é.HTML. Ficará assim: primeiro.HTML

Minimize o bloco de notas e abra o arquivo. Ele vai aparecer no seu Browser. Sehouver a necessidade de alguma alteração, sem fechar o Browser, maximize o Bloco de

Notas, faça as alterações necessárias e salve, para isso você pose simplesmente

pressionar as teclas Ctrl+S. Volte ao Browser e pressione a tecla F5 para atualizar.

FORMATANDO CABEÇALHOSComo vimos anteriormente há seis níveis de cabeçalhos em HTML, de <H1> a <H6>:

<H1> Este é um cabeçalho de nível 1 </H1>

<H2> Este é um cabeçalho de nível 2 </H2><H3> Este é um cabeçalho de nível 3 </H3><H4> Este é um cabeçalho de nível 4 </H4><H5> Este é um cabeçalho de nível 5 </H5><H6> Este é um cabeçalho de nível 6 </H6>

Veja no bloco de notas:

<HTML>

<HEAD>

<TITLE>Formatando Cabe&ccedilalhos</TITLE>

</HEAD>

<BODY>

<H6 align="center">Minha primeira página</H6>

<H5 align="center">Minha primeira página</H5>

<H4 ALIGN="center">Minha primeira página</H4><H3 ALIGN="center">Minha primeira página</H3>

<H2 ALIGN="center">Minha primeira página</H2>

<H1 ALIGN="center">Minha primeira página</H1>

</BODY>

</HTML>

PARÁGRAFOS E QUEBRAS DE LINHA


10




Num programa HTML você não pode inserir uma quebra ou avanço de linha toda vez

que pressiona a tecla ENTER, é 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 <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 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 <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=LEFT Alinha pela margem esquerda (padrão)

ALIGN=RIGHT Alinha pela margem direita

ALIGN=CENTER Centraliza o texto.

ALIGN=JUSTIFY Alinha pelas duas margens

O COMANDO <HR>O comando <HR> tem como finalidade inserir uma linha divisória na posição em que

foi especificadoF. 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.

SIZE – Configura a espessura da linha.


11




WIDTH - Configura a largura ou comprimento da linha. 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.

ALIGN – Configura o alinhamento da linha.(Left, right ou center).

NOSHADE – Desenha uma linha sólida sem sombra (default= linha sombreada).

Tudo isso é muito fácil, não é mesmo? Então vamos incrementar um pouquinho mais

a nossa página.

EX.:

<HTML>

<HEAD>

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

</HEAD>

<BODY BGCOLOR="blue" TEXT="Black">

<H3>Meu primeiro texto em Html, no momento não usarei nenhuma formatação

especial aqui dentro.</H3><BR>

Agora já posso fazer a quebra de linhas<BR>

<P ALIGN="center">e inserir um novo parágrafo centralizado.</P>

<P> Agora vou inserir uma linha horizontal na minha página</P>

<HR SIZE="10" width="50%" ALIGN="center" NOSHADE>

</BODY>

</HTML>

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


12

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

Ex.:

<HTML>

<Head>

<TITLE>Formatação de Parágrafos</TITLE>

</HEAD>

<BODY BGCOLOR=”Green” TEXT=”Blue”>

<H1 align="center">Alinhamento de parágrafos</H1>

<P align="center">O comando align "center" permitiu que meu texto ficasse

centralizado</P>

<P align="Justify">Agora O comando align "Justify" fez com que meu texto ficasse

justificado. O alinhamento justificado é muito útil para que o texto fique todo certinho.</P>

<P ALIGN="LEFT">Meu texto ficou alinhado à esquerda com o comando align

"left"</P>

<P align="RIGHT">Meu texto está alinhado à direita porque utilizei o comando align

"right"</P><BR>

<HR align="center"> 

<BLOCKQUOTE>Com o comando blockquote pude recuar uma vez o meutexto</BLOCKQUOTE>

<BLOCKQUOTE><BLOCKQUOTE>Aqui recuei meu texo 2 vezes, logo a seguir

aparece uma linha vermela porque utilizei o comando "HR" mais o atibuto "color e atributo

Size</BLOCKQUOTE></BLOCKQUOTE>

<HR color="red" WIDTH=75% SIZE=20 > 

</BODY>


13




</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 funcionaem 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 corpoSubscrito <SUB>Texto</SUB> Rebaixa o texto e diminui seu corpo

Pulsante <BLINK>Texto</BLINK> Faz com que o texto pisque (Nãofunciona no IE 4.


14




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.

SizeO 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 oudiminuí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.

FaceEsse 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.

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:


15




Cores e Fontes

Cores - As cores são introduzidas através do elemento <FONT>, usando o sistema

RGB para cores (da mesma forma que vimos para cores de documentos), como mostradono exemplo a seguir:

<FONT COLOR="red"> Texto </FONT>

Produzirá na página: a palavra Texto escrita na cor vermelha.

Assim, um trecho de texto pode ter uma cor diferente da definição geral de cores,

feita através dos

atributos de <BODY>.

Tamanho - Veja a formatação a seguir:

<FONT SIZE=3> Texto </FONT>


16

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




Produzirá na página: a palavra Texto como o tamaho 3.

Este comando permite que o autor do documento altere o tamanho das letras em

trechos específicos de

texto. O tamanho básico dos textos é 3 (padrão). Podemos indicar tamanhos relativos

a esse, por exemplo:

<FONT SIZE=+2> Letra maior </FONT>

Letra normal

<FONT SIZE=-2> Letra menor </FONT>

Letra maior Letra normal Letra menor

Fontes - Uma evolução que permite a escolha da fonte para os textos, é o atributo

FACE:

<FONT FACE="Arial"> Texto </FONT>

Produzirá: a palavra Texto com a fonte (tipo de letra) Arial.

Mais exemplos:

<FONT FACE="Verdana" COLOR="blue"> Fonte Verdana Azul </FONT>

Fonte Verdana Azul

Apostila de HTML - Fonte: http://www.icmc.usp.br/ensino/material/html/intro.html

Profa. Flávia Pereira de Carvalho - [email protected] - http://fit.faccat.br/~fpereira 8

<FONT FACE="Arial" COLOR="green"> Fonte Arial Verde </FONT>

Fonte Arial verde

<FONT FACE="Courier New" COLOR="red"> Fonte Courier New Vermelha </FONT>

Fonte Courier New Vermelha

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 bgcolor=”blue”>


17




<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 perfeitos para criar

títulos e iniciar seções dentro de uma página. O comando<H1>

possui o maior tamanhoenquanto 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:


18




<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

<OL TYPE=...START=...>...</OL> são os elementos delimitadores de listasordenadas (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), “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 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.


19




LISTAS NÃO ORDENADAS

<UL>...</UL> são os elementos delimitadores de listas sem ordenação (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 (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.

Como já foi visto acima <LI>...</LI> é 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.

LISTA DE DEFINIÇÃO

<DL>...</DL> são as marcas que englobam uma lista de definições, ideais para acriaçã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.

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


20




<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 UL</DT>

<DD>Lista não ordenada

<UL>

<LI>TYPE</LI>

<LI>START</LI>

</UL>

</DD>

<BR>

<DT>Parâmetros do elemento IMG<Br> Utilizando Parâmtro do elemento OL</DT>

<DD>Lista ordenada com marcador alfabético<BR>

<OL type=A start=A>

<LI>SRC</LI>

<LI>ALT</LI>

<LI>BORDER</LI>

<LI>WIDTH</LI>

</OL>

<DD>Lista ordenada com marcador alfabético<BR><OL type=1 start=1>

<LI>HEIGHT</LI>

<LI>VSPACE</LI>

<LI>HSPACE</LI>

</OL>

</DD>


21




</DL>

</BODY>

</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=”...” HEIGHT=”…” BORDER=”…” ALT=”Texto”

VSPACE=”…” HSPACE=”…”>

ALIGN=| “BOTTOM” | “TOP” | “MIDLE”

SRC=”URLÉ o nome da figura, se estiver no mesmo diretório do

programa ou seu caminho 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”|”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.

HEIGHT=”número”Especifica a altura de exibição da imagem

independentemente de seu tamanho físico. Se a imagem for

maior ou menor do que o valor especificado.


22




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 embranco 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”

Vamos para o bloco de notas praticar. (as figuras são sugestões, podem ser

substituídas, porém devem estar na mesma pasta do seu arquivo).

<HTML>

<HEAD>

<TITLE>Formatando texto dividido com imagens</TITLE>

</HEAD>

<BODY leftmargin="40%" rightmargin="40%" background="G59.jpg"

BGPROPERTIES="fixed" text="blue">

<H1 ALIGN="center">Minhas Imagens</H1>

<MARQUEE BEHAVIOR= SCROL WIDTH=100%> Veja como ficam distribuídas as

minhas imagens</MARQUEE><BR><br>

<img src="urso12.gif" width="100" height="120" alt="Minhas flores" align="left"

align="midle">

<DIV align="justify">Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas,

Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas,Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas,

Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas,





Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas ,


23





Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas"

</DIV><BR>

<hr>

<BR>

<img src="borboletas.gif" width="140" height="140"alt="Borboletas"

align="right"><DIV align="justify">Borboletas, Borboletas, Borboletas, Borboletas,

Borboletas, Borboletas, Borboletas, Borboletas, Borboletas, Borboletas, Borboletas,



Borboletas, Borboletas, Borboletas, Borboletas, Borboletas, Borboletas, Borboletas,Borboletas, Borboletas, Borboletas, Borboletas, Borboletas, Borboletas, Borboletas,




</DIV>

<Br>

<BR>

<img src="estrela.gif" width="40" height="40"><b>Usando uma imagem como

marcador</B><BR>

Usando imagens como linhas separadoras

<BR>

<P ALIGN="CENTER"><img src="g52.gif" width="50%">

</BODY>

</HTML>

MARQUEE

O Internet Explorer introduziu um comando o 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


24




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.

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.

ALTERNATE

Cria um efeito de movimento para o 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 =nEspecifica 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


25




–1 ou INFINITE ele será executado continuamente.

SCROLLAMOUNT=nIndica a quantidade de pixels que será usada para deslocar o

marquee a cada movimentação.

SCROLLDELAY=nEspecifica em milissegundos o tempo entre cada

deslocamento do texto.

VSPACE=nEspecifica 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

É muito bom usar esse comando para chamar a atenção dos seus usuários. Porém,

será interessante testar a visualização da página com um browser que não seja compatível

com esse comando para verificar como ficará a tela. Infelizmente, a Netscape não

incorporou 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.

Neste 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"


26




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>


<MARQUEE height="15" width="200" behavior="Scroll" direction="right"



<BR>

<MARQUEE height="15" width="200" behavior="Scroll" direction="Left"

bgcolor="#00FF00" loop=infinite>


<BR>


<MARQUEE height="15" width="200" behavior="Scroll" direction="left"


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"


vários Marquees em seqüência </MARQUEE>

</BODY>


27




HTML

URLS E LINKS

Até agora você aprendeu como criar documentos interessantes, mas que poderiamter 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.

URLA 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

http: É o protocolo

www.voce.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ê precisaapenas 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>


28




Principais parâmetros:

HREF=”URL” Especifica o endereço do URL ao qual o l ink está

associado. Pode ser usado dentro e fora do documento.

NAME=”String” Especifica o nome da seção de um documento à

qual um link de hipertexto faz referência.

Usando uma Imagem como HiperlinkVocê 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 decaminhos 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 <HHREF>, 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


29




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:[email protected]”>Tire as suas dúvidas </A>

DEFININDO DESTINOS 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:[email protected]">e-mail</a>

<hr>

<P Align="center">Criando as Âncoras</P>

<a href="#textos">Textos</a> <a href="#imagens">Imagens</a>

<p> </p>

<P>

<a name="textos">TEXTOS</a>

<p> </p><p> </p><p> </p><p> </p><p> </p><p>&nbs

p;</p><p> </p><p> </p><p> </p><p> </p><p> </p><p>&nb

sp;</p><p> </p><p> </p>

<a name="imagens">IMAGENS</a></p><p> </p><p> </p><p>

</p><p> </p>


30




<p align="center"><img border="0" src="cachorrinhos.gif" width="180"

height="100"></p>

<p> </p><p> </p><p> </p><p> </p><p> </p><p>&nbs

p;</p><p> </p><p> </p><p> </p><p> </p><p> </p><p>&nb

sp;</p><p> </p><p> </p>

</body>

</html>

TABELAS

O conceito de TABELA é 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.

Podemos 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.

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.


31




<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>.

<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ísticasidê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


32




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: <TABLECELLSPACING=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 é à

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

(<TH>).

VALIGN


33




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


34




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>

<td width="34%">Texto 3</td>

</tr>

</table>

</body>

</html>

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.


35




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 framesAo 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 umdeles. Trabalhar com frames exige duas etapas. Na primeira você cria o layout dos frames,

na segunda, define seu conteúdo.

O Comando DocumentO 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 FRAMESETEste comando é do tipo contêiner, ou seja deve ser aberto e fechado. Veja a sintaxe

deste comando:

<FRAMESET

COLS=tamanho

FRAMEBORDER=1/0

FRAMESPACING=spacing

ROWS=tamanho></FRAMESET>

Cols=tamanho


36




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 COLSPode-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.


37




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>

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.

BOTTOM O texto aos redor do frame é alinhado pela parte inferior do

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


38




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çoEndereço deve ser substituído pelo nome ou URL do documento que será exibido no

frame.

Ajustando as margens internas do FrameO 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 margemdeve ser especificado em pixels.

Barras de Rolagem e Redimensionamento dos FramesComo 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 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.


39




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 FramesEsse 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 MenuO 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 essecomando 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>


40




<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

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


41




</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, eleestá facilitando a troca de informações em sites de que precisam mudar textos, pois elepode ser colocado no documento e conforme altera-se o documento do IFRAME ele alterana página, ele possui os mesmos parâmetros dos Frames.

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

<center><table border="0" width="80%" height="193">

<caption> </caption><tr>


42




<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 naInternet.

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">


43




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 oselementos multimídia em nossas páginas.

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.


44




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,MIDDLE, ou

BOTTOM

O texto que margeiaa imagem é alinhadopelo topo, meio oubase do vídeo.

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

ALIGN=LEFTou RIGHT

A imagem, ou vídeo éalinhado a esquerdaou direita da página

<IMG SRC=”video.avi”ALIGN=RIGHT>Este texto aparece do ladoesquerdo da imagem.

ALT=texto Especifica um textoalternativo para ser exibido no local dovídeo

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

BORDER=n Especifica a largurada borda em pixels dovídeo

<IMG SRC=”vídeo.avi” BORDER=5>Estaimagem possui borda de 5 pixels de largura.

CONTROLS Exibe botões de

controle do tipo vídeocassete

<IMG DYNSRC=”vídeo.avi” CONTROLS>

DYNSRC=URL Especifica o URL dovídeo que seráexibido.

<IMG SRC=”vide.gif”, DYNSRC=”vídeo.avi”>

HEIGHT=n Especifica a altura dovídeo. Se o vídeopossuir outrotamanho seráajustado para otamanho especificado

<IMG SRC=”vídeo.avi” WIDTH=150HEIGHT=200>

HSPACE=n Especifica uma

margem horizontalem volta da imagempara afastá-la dotexto que a envolve

<IMG SRC=”vídeo.avi” HSPACE=10

VSPACE=10>

LOOP=nLOOP=INFINIT

E

Especifique quantasvezes o vídeo seráexecutado. Se n for igual a –1 ouINFINITE, o vídeoserá executadocontinuamente. Casocontrário, é

executado o número

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


45




de vezesespecificado.

SRC Especifica o endereçodo vídeo

<IMG SRC http://www.hardcore.com.br/video.avi>

START=FILEOPEN/

MOUSEOVER

Para clips de vídeoespecifica quando o

vídeo deve ser executado. Comopadrão, o vídeoassume o valor FILEOPEN e éexecutadoimediatamente apósseu carregamento . Ovalor MOUSEOVERfaz com que o vídeoseja executadoquando o cursor

passa sobre a áreada imagem do vídeo.

DYNSRC=”vídeo.avi” START= FILEOPEN>O vídeo é executado ao ser carregado.

<IMG SRC=”vídeo.gif”DYNSRC=”vídeo.avi”START=MOUSEOVER,FILEOPEN>

VSPACE=n Especifica umamargem, vertical parao vídeo, em pixels

<IMG SRC=”video.avi”VSPACE=10>

WIDTH=n Especifica a largurada Imagem

<IMG SRC=”vídeo.avi”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 dearquivos 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”

HEIGHT=”pixels”

HIDDEN=”TRUE” | “FALSE”

HSPACE=”pixels”

NAME=”appletName”


46

http://www.hardcore.com.br/video.avi

http://www.hardcore.com.br/video.avi




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>

SOM


47




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 ÁudioAssim 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 HiperlinksVeja o código abaixo onde os arquivos de áudio e estão vinculadas as páginas

através de hyperlinks.


48




<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 é:

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:


49




<html>

<head>

</head>

<bgsound src="africa.mid"><body bgcolor="#FFFFFF">

<font color=Red>

<h1> O comando BGSOUND </h1>

</font>

</body>

</html>

GLOSSÁRIO

<HTML></HTML>: Marca início e fim de uma página.

<HEAD></HEAD>: delimita o cabeçalho de uma página.

<BODY></BODY>: Delimita o corpo de uma página.

<TITLE></TITLE> Define o título de uma página.

<H1></H1> à <H6></H6>: Define títulos, subtítulo de diferentes níveis.


50




<B></B>: Formata o texto em Negrito.

<I></I>: Formata o texto em Itálico.

<FONT></FONT>: Altera o fonte, tamanho e ou cor do texto.

<P></P>: Delimita um parágrafo.<BR>: Quebra de Linha.

<DIV></DIV>: Configura o alinhamento do texto.

<CENTER></CENTER>:Centraliza objetos(texto, imagem, tabelas)

<HR>: Cria uma linha horizontal.

<IMG>: Insere uma imagem.

<A></A>: Insere um Link

<OL>

<LI>

<LI>

</OL>: Cria uma lista ordenada.

<UL>

<LI>

<LI>

</UL>: Cria uma lista não ordenada.

<DL>

<DT></DT>

<DD></DD></DL>: Cria uma lista de definição.

<FORM></FORM>: Cria um formulário.

<INPUT> Define os campos do formulário.

<SELECT OPTION></OPTION>: define uma lista de opções no formulário.

</SELECT>

<TEXTAREA></TEXTAREA>: Define uma área de texto no formulário.


51




<TABLE></TABLE>: Cria uma tabela

<CAPTION></CAPTION>: Define o título de uma tabela.

<TR></TR>: Define a linha de uma tabela.

<TD></TD>: Define as células de uma tabela.<TH></TH>: Define as células de cabeçalho de uma tabela.

<FRAMESET></FRAMESET>:Define o conjunto de janelas (frames) da tela.

<FRAME>:Configura cada região (frame) da tela.

<NOFRAMES></NOFRAMES>: Define o conteúdo que será exibido por browser sem

suporte a frames.

<APPLET></APPLET> Insere um applet Java em uma página.

<PARAM> Definem os parâmetros do applet.

<STYLE></STYLE> Define os estilo usados na página.

Você pode encontrar um material rico e completo no site:

http://www.icmc.usp.br/ensino/material/html/intro.html


52



HTML e CSS

Documents

Transcript of HTML e CSS