Índice - lyfreitas.com.br · 1.3 tipos de acesso à internet hoje em dia, existem várias formas...

Índice1 A Internet e suas características....................................................................................................................1

1.1 Introdução.........................................................................................................................................11.2 O que é a Internet?............................................................................................................................11.3 Tipos de acesso à Internet.................................................................................................................11.4 Os recursos da Internet......................................................................................................................21.5 Como funciona a Web......................................................................................................................21.6 Os servidores.....................................................................................................................................21.7 O que é uma URL.............................................................................................................................31.8 O navegador......................................................................................................................................41.9 O que é HTML..................................................................................................................................4

2 Criando uma página.......................................................................................................................................52.1 Introdução.........................................................................................................................................52.2 Como o HTML Funciona.................................................................................................................52.3 Entendendo os principais elementos de uma página.........................................................................52.4 Inserindo tags HTML básicas...........................................................................................................62.5 Meta tags...........................................................................................................................................62.6 Adicionando atributos às tags...........................................................................................................72.7 Alterando a cor de fundo da página..................................................................................................72.8 Visualizando sua primeira página.....................................................................................................82.9 Exercício Proposto............................................................................................................................8

3 Formatando o Texto.....................................................................................................................................103.1 Introdução.......................................................................................................................................103.2 Formatando o texto.........................................................................................................................103.3 Criando títulos e sub−títulos...........................................................................................................113.4 Alterando a formatação da fonte.....................................................................................................113.5 Fazendo parágrafos.........................................................................................................................123.6 Trabalhando com texto pré−formatado...........................................................................................133.7 Inserindo uma linha horizontal.......................................................................................................133.8 Listas...............................................................................................................................................133.9 Marquee..........................................................................................................................................143.10 Exercício Proposto........................................................................................................................16

4 Trabalhando com Imagens...........................................................................................................................174.1 Introdução.......................................................................................................................................174.2 Gráficos da Web.............................................................................................................................174.3 Inserindo imagens...........................................................................................................................174.4 Inserindo imagens de fundo............................................................................................................184.5 Centralizando a imagem.................................................................................................................184.6 Exibindo textos alternativos............................................................................................................184.7 Ajustando o tamanho da imagem....................................................................................................184.8 Formatando imagens com textos....................................................................................................194.9 Exercício Proposto..........................................................................................................................19

5 Links...............................................................................................................................................................205.1 Introdução.......................................................................................................................................205.2 O que é e como funciona................................................................................................................205.3 Links relativos e links absolutos.....................................................................................................205.4 Links para uma seção da página.....................................................................................................225.5 Imagens como links........................................................................................................................235.6 Links para e−mail...........................................................................................................................245.7 Exercício Proposto..........................................................................................................................24

5.7.1 Exercício 1:............................................................................................................................24

i

Índice6 Tabelas...........................................................................................................................................................25

6.1 Introdução.......................................................................................................................................256.2 Apresentando o conteúdo com tabelas............................................................................................256.3 Inserindo uma tabela.......................................................................................................................256.4 Adicionando conteúdo a uma célula da tabela................................................................................266.5 Exibindo e definindo propriedades da tabela..................................................................................276.6 Exibindo e definindo propriedades de célula, linha e coluna.........................................................286.7 Redimensionando tabelas................................................................................................................286.8 Mesclando células...........................................................................................................................306.9 Exercício Proposto..........................................................................................................................326.10 Aninhando tabelas.........................................................................................................................326.11 Utilizando tabelas para trabalhar com imagens fatiadas...............................................................33

7 Formulários...................................................................................................................................................357.1 Introdução.......................................................................................................................................357.2 Entendendo o funcionamento dos formulários...............................................................................357.3 Conhecendo os objetos dos formulários.........................................................................................357.4 Criando um formulário...................................................................................................................377.5 Utilizando os campos do formulário...............................................................................................377.6 Inserindo caixas de seleção e botões de rádio.................................................................................397.7 Inserindo listas e menus..................................................................................................................407.8 Adicionando botões de formulário..................................................................................................427.9 Inserindo um objeto image..............................................................................................................437.10 Adicionando o objeto file..............................................................................................................43

8 Frames............................................................................................................................................................458.1 Introdução.......................................................................................................................................458.2 O que são frames.............................................................................................................................458.3 Decidindo se as molduras devem ser usadas..................................................................................458.4 Criando páginas da web com molduras..........................................................................................468.5 Redimensionando molduras em um conjunto de molduras............................................................478.6 Editando o conteúdo de uma moldura............................................................................................478.7 Controlando o conteúdo de uma moldura com links......................................................................488.8 Inserindo frames inline...................................................................................................................498.9 Exercício Proposto..........................................................................................................................50

9 Recursos de Multimídia................................................................................................................................519.1 Introdução.......................................................................................................................................519.2 Inserindo áudio................................................................................................................................519.3 Inserindo vídeo................................................................................................................................529.4 Inserindo animações em Flash........................................................................................................52

10 CSS − Folhas de Estilo................................................................................................................................5410.1 Introdução.....................................................................................................................................5410.2 Entendendo as folhas de estilo......................................................................................................5410.3 Criando estilos..............................................................................................................................5410.4 Estilos incorporados......................................................................................................................5510.5 Estilos inline.................................................................................................................................5610.6 Estilos vinculados.........................................................................................................................5710.7 Exercício Proposto........................................................................................................................5710.8 Tags personalizadas......................................................................................................................5810.9 Aplicando estilo de formatação em Texto....................................................................................61

ii

Índice11 Anexo − Código de Cores RGB..................................................................................................................66

iii

1 A Internet e suas características

1.1 Introdução

Internet − O foco do assunto abordado nesta obra, ou melhor, como produzir informações para este meio decomunição, nos leva a refletir sobre os objetivos desta grande rede de computadores, que hoje se destacacomo a maior fonte de pesquisa do planeta.

A dimensão ocupada por esta mídia é tão extensa e difusa, que nos permite permanecer horas perdidos entreas milhares de páginas espalhadas por todos os quatro cantos do mundo.

Veremos no decorrer destas páginas como funciona a Internet dos bastidores, podendo ao final da leitura, nosaventurar por este submundo virtual, tanto fazendo uso de seus intermináveis assuntos, como também, sendoparte deles.

Para isso, devemos compreender o funcionamento de um dos elementos da base da Internet: a linguagemHTML. E este será nosso objetivo. Este trabalho está direcionado para a parte de programação de sites,procurando construir um embasamento que será fundamental para a produção de páginas para a Internet,podendo interagir em um segundo momento com linguagens de script Cliente e Servidor. Temas como designde páginas, criação de animações e tratamento de imagens não serão abordados neste livro.

1.2 O que é a Internet?

A Internet é uma grande rede de computadores interligados, compartilhando diversos tipos de informações,através de vários tipo de canais de reprodução, espalhados por toda a superfície terrestre e acessada por nós.

A princípio pode parecer desordenado e confuso, e realmente é, mas a Internet funciona sobre uma estruturade protocolos denominada TCP/IP, aos quais couberam a responsabilidade de tornar esta �bagunça� algorelativamente fácil de usar.

Esta tecnologia surgiu em 1969, dentro das trincheiras militares dos Estados Unidos. Tinha o objetivo dedifundir informações de forma rápida pelo território americano, sem que elas pudessem se perder durante umeventual combate, onde os meios de comunicação são os alvos principais. A Arpanet, como foi chamada noinício, conseguiu então, interligar vários computadores em diversas partes dos Estados Unidos, trafegando asinformações de forma completamente livre, ou seja, cada ponto da rede podia mandar e receber os dados, erepassá−los para outros computadores sem ter ninguém gerenciando tudo isso. Dessa forma as informaçõesconseguiam coexistir em várias fontes, eliminando assim, o risco de se perderem.

Com o passar dos anos, isso tudo foi sendo disseminado e com o avanço da tecnologia, criação decomputadores menores e mais baratos, a Internet se tornou o que é hoje. Segundo dados das Nações Unidas �ONU, em pesquisa realizada no ano 2000, existiam 13,5 milhões de brasileiros conectados a Internet.

1.3 Tipos de acesso à Internet

Hoje em dia, existem várias formas de se conectar à Internet. Vejamos algumas:

Acesso Dial Up � este tipo de acesso é feito através de linha telefônica convencional. É necessárioestar conectado a um provedor de serviços que fará a ligação com a rede. É uma conexão instável eprovê baixas taxas de transmissão.

•

ADSL(Asymetric Digital Subscriber Line) � o acesso ADSL é a grande onda do momento. Além denão ocupar a linha telefônica, permite acessos superiores a 6 Mbps(download) e conexão estáveldurante 24 horas por dia.

•

1 A Internet e suas características 1

TV a Cabo � este acesso, quando realizado em cabeamento bidirecional, permite boas taxas detransmissão e acesso 24 horas por dia.

•

Rádio Freqüência � o acesso via rádio é uma conexão wireless. Muito utilizado em edifícios, provêacessos de até 10 Mbps e conexão 24 horas. É necessário a instalação de uma antena parabólica para aconexão com o provedor de serviços.

•

Satélite � é uma conexão limitada, sujeita às variações do tempo e custo de equipamentos muitocaros. A taxa de transmissão pode atingir 500 Kbps.

•

1.4 Os recursos da Internet

A Internet não é só páginas com imagens e links. A Internet permite você se comunicar com outros usuáriosatravés de e−mails e mais, por que não realizar esta comunicação em tempo real? Os chats estão aí pra isso.Poderíamos acessar Listas de Discussões ou nos informar através de Newsgroups. É possível enumerar váriasoutras formas de usufruir da Internet, inclusive criar outras maneiras de disseminar informações.

Vejamos algumas dessas formas:

Correio Eletrônico: os e−mails, sem dúvida são a forma mais utilizada de se comunicar dentro dagrande rede. Cada pessoa pode ter o seu próprio endereço eletrônico e utilizá−lo para enviarmensagens para quem desejar.

•

Listas de Discussão: como o próprio nome enfoca, são páginas que dispõem de fórums para divulgaropiniões e debater sobre os mais variados temas.

•

Usenet Newsgroup: Muito parecido com as Listas de Discussão, funcionando sobre o protocoloNNTP e sendo necessário o acesso a um servidor de News e um Messenger.

•

FTP (File Transfer Protocol): o FTP, é utilizado para a transferência de arquivos. É através desteserviço que podemos enviar os arquivos do nosso site para o servidor e vice−versa.

•

Telnet: o telnet é um serviço que permite a conexão com outras máquinas em qualquer lugar. É comose o usuário estivesse na própria máquina a qual se conectou, mas com acesso limitado, podendoapenas visualizar arquivos em forma de texto.

•

WWW: a World Wide Web, ou simplesmente Web, é onde passamos a maior parte do tempo quandoestamos conectados a Internet. A WWW é a grande responsável pela popularização da Internet. Éonde está toda a fonte de informação devidamente apresentada através de páginas, que se interligamem uma malha sem início e fim.

•

1.5 Como funciona a Web

A Internet não possui um dono. Existe apenas um órgão que define regras para que haja uma harmonia defuncionamento na rede. Este órgão é o W3C � http://www.w3c.org.

O W3C regulamenta e rege a forma de como a Web deve se comportar e que padrões deve seguir para proverserviços de forma totalmente compatível com as mais diversas tecnologias e sistemas existentes no mercado.São através desses padrões estabelecidos que se garante a operacionalidade da Internet.

Basicamente, existem protocolos e linguagens padrões, que ao interagirem produzem este espaço virtual. Abase de todos os protocolos é o TCP/IP e a base de todas as linguagens de construção de Hipertexto é oSGML, do qual o HTML é o subconjunto mais utilizado.

1.6 Os servidores

Quando digitamos no nosso navegador um determinado endereço de algum site, começa uma viagem muitolonga e rápida entre o nosso computador e os servidores de páginas.

$LOGOIMAGE 1 A Internet e suas características

1.4 Os recursos da Internet 2

http://www.w3c.org

Isso quer dizer que, ao escrevermos o endereço estamos solicitando um determinado arquivo que se encontrano servidor. Suponhamos que queremos acessar a página da Sistemas Abertos.

Para isso, informarmos o endereço ao navegador, que é www.sistemasabertos.com.br. Neste instante, é feitauma requisição ao servidor que contém a página. Se o arquivo existir neste servidor, então é encaminhado umdocumento codificado ao browser, que o reproduzirá na tela do usuário. Caso o arquivo não exista, umamensagem de que a página não foi encontrada será enviada.

Os servidores mais utilizados para a finalidade de disponibilizar páginas web são:

Apache®: sem dúvida é o servidor mais utilizado no mundo. É um software multiplataforma egratuito, embora o par Apache/Linux seja o mais comum, pela característica de serem softwares dotipo OpenSource.

•

IIS®: o IIS é o servidor web da Microsoft, possuindo características opostas ao seu concorrente, comorodar apenas em ambiente Windows, embora não menos eficiente.

•

1.7 O que é uma URL

O endereço que digitamos agora há pouco, quando falamos dos servidores, é chamado de URL (UniformResource Location). A URL é única para cada página que tentamos acessar e existe basicamente para facilitara lembrança dos inúmeros sites que acessamos.

Cada URL está ligada á um código de identificação que somente os servidores Web podem decifrar. É aorganização da rede. Esse código é chamado de TCP/IP.

O protocolo TCP/IP é um conjunto de 4 grupos de números, responsáveis por identificar cadahost(computador) dentro de uma rede. Em outras palavras, a URL é um apelido que damos para oservidor(representado por um endereço IP). Isso é excelente porque podemos nos referir a um site sem ter quenos preocuparmos em decorar um código numérico para cada um que queiramos acessar.

Vamos agora explorar ao máximo uma determinada URL:

http://www.sistemasabertos.com.br/news/noticias.php?id_not=25&titulo=HTML

Vamos separar este endereço em algumas partes:

http:// − esta parte da URL representa o protocolo HTTP � Hypertext Transfer Protocol, que éresponsável pela transferência de hipertextos pela rede. Hipertextos são outro nome que podemos dara páginas.

•

www.sistemasabertos.com.br � o endereço aqui representado, exatamente na forma comocostumamos digitar, na verdade é o servidor que contém a nossa página. Quando digitamos oendereço acima, o servidor pesquisa qual é o endereço IP que possui aquele apelido e faz a pesquisanele.

•

/news � é um diretório virtual do servidor que irá conter o arquivo que queremos acessar.• noticias.php � é o próprio arquivo.• ?id_not=25&titulo=HTML � esta parte do endereço talvez possa parecer um pouco confusa, mas setorna muito importante conhecê−la, a partir do momento que queremos trabalhar com outraslinguagens de script Cliente e Servidor. O ponto de interrogação(?) indica que estamos enviando parao arquivo noticias.php, variáveis que serão necessárias para o carregamento perfeito da página. Quaisseriam essas variáveis? A primeira vem logo a seguir e é representada pelo nome id_not e possui ovalor 25. Temos na seqüência um e comercial(&), que informa que queremos passar nova variável.Esta nova variável é chamada de titulo e possui o valor HTML.

•


1.7 O que é uma URL 3

A URL citada no exemplo não existe, mas vocês podem testar por exemplo, fazendo uma consulta em algumsite de busca. Verifiquem na URL mostrada após a pesquisa, alguns dos detalhes que acabamos de ver. Não sepreocupem com o entendimento sobre variáveis agora. Só será necessário a partir do momento que vocêescolher uma linguagem para dinamizar o conteúdo do seu site.

1.8 O navegador

Falaremos agora um pouco sobre os navegadores.

Os navegadores são os programas Cliente que utilizamos para visualizar as páginas web. São eles queconseguem se comunicar com os servidores de páginas e reproduzi−las no seu computador. Eles conseguementender todo o código HTML que compõem as páginas.

Os browsers, como também são chamados, mais utilizados são: Netscape Navigator, Internet Explorer,Mozilla e Opera. Temos um outro grande número desses programas, cada um com suas características efunções, mas sempre tendo como base a linguagem dos hipertextos. Neste livro usaremos um navegador desua preferência para testarmos todo o código que iremos produzir.

1.9 O que é HTML

Finalmente chegamos ao tópico principal deste livro: a linguagem HTML � Hypertext Markup Language.

Muitos dizem que o HTML não é propriamente uma linguagem de programação, por não possuir estruturas decontrole, repetição ou armazena dados. Mas o fato é que, o HTML é composto de vários comandosdenominados tags que ao se unirem dentro de uma determinada lógica, produz um documento codificadoassim como qualquer outra linguagem.

Essa linguagem de marcação de hipertexto, como a tradução nos informa, é a base de toda representaçãovisual existente na Internet. Qualquer página, seja ela estática ou dinâmica, apresentará algum tipo deformatação HTML.

Poderíamos dizer que sem o HTML não haveria informação na rede. Haveriam sim, muitos dados, mas semformatação, sem diagramação ou apresentação. Apenas texto puro. E convenhamos, não existiria esse fascínioque possui hoje, fazendo com que seja a maior fonte de informação e comunicação do planeta.

A partir de agora começaremos a entender melhor tudo isso que falamos. Iremos construir páginas,procurando trabalhar todas as possibilidades que a linguagem possa nos oferecer. E, dependeremosexclusivamente de nossa criatividade para criarmos o nosso site. Bons estudos e nos vemos no Capítulo 2.


1.8 O navegador 4

2 Criando uma página

2.1 Introdução

Neste capítulo aprenderemos a escrever a nossa primeira página, utilizando comandos HTML. Veremos comose deve estruturar um documento, suas partes principais, tags básicas e seus atributos. Para isso iremos utilizarum editor de textos simples, como o notepad para escrevermos o código e um navegador de sua preferência,para a visualização da página.

Lembre−se de salvar os seus arquivos somente como texto puro, sem nenhuma formatação específica doeditor que você esteja utilizando. Salve−o também com a extensão .htm ou .html.

2.2 Como o HTML Funciona

A linguagem de marcação de hipertexto, ou simplesmente HTML, é baseada em pares de comandos chamadosde tags.

As tags são comandos, aninhados dentro de sinais <>. Elas demarcam o início de uma determinada ação emuitas vezes necessitam de uma outra tag, para sinalizar o fim da interação do comando. Essa tag definalização é uma cópia da tag de abertura, exceto pela barra que precede o comando. Veja:

Um exemplo de tag poderia ser o par de abertura e finalização de um documento HTML. Toda página webpossui um único par desses, sem exceção:

<HTML></HTML>

Ao escrevermos vários desses comandos, formatando e diagramando conteúdo, estamos produzindo páginaspara a Web.

As tags também possuirão atributos que poderão ter o valor modificado para melhor atender ao objetivo deum determinado comando.Algumas tags não têm necessidade do seu par de fechamento. Neste caso, elas nãoestariam realizando nenhuma ação específica, devendo então acrescentar algo ao conteúdo, como umaimagem.Outras, não deverão fazer efeito, dependendo do navegador que o usuário esteja utilizando. Portanto,é necessário fazermos uso das tags mais simples e comuns, para evitar que partes da nossa página não consigaser visualizada.

2.3 Entendendo os principais elementos de uma página

Como vimos no tópico anterior, possuímos a tag <HTML> </HTML> para demarcarmos todo o nosso código.Mas o que estamos demarcando? Um documento HTML é composto de duas partes: cabeçalhos e o corpo dapágina.

Os cabeçalhos armazenam informações sobre a página, como o título da página, meta−dados(veremos maissobre isso), estilos CSS e até scripts de outras linguagens.

Já a parte do corpo da página, irá representar tudo aquilo que for visível ao usuário. Todos os nossos textos,imagens, links, tabelas e formulários estarão contidos neste bloco. A parte que permitirá a interação com o seuvisitante será declarada aqui.

2 Criando uma página 5

2.4 Inserindo tags HTML básicas

Vamos criar nossa primeira página. Iniciem um novo documento no editor de textos e o salvem com o nomede PrimeiraPagina.htm. Lembrem−se de salvá−lo sem nenhuma formatação, somente como tipo texto.

Digitem o código abaixo para que possamos conhecer novos comandos. Acompanhem a seqüência passo apasso logo abaixo do exemplo.

<HTML> <HEAD> <TITLE>Minha primeira página!!!</TITLE> </HEAD></HTML>

Acompanhem agora, uma seqüência explicando passo a passo o código descrito acima.

Iniciamos o código com a tag <HTML> para informar que o documento é do tipo página para a Internet.

Logo em seguida utilizamos a tag <HEAD> para declarar os cabeçalhos que serão utilizados nodocumento.

A tag <TITLE> representa o título da página e deve estar descrita dentro da tag de cabeçalhos. Abram odocumento no navegador e verifiquem o título da janela que está sendo exibido. É exatamente aquilo que foideclarado na tag de títulos. Precisamos dizer ao código onde o título termina. Para isso utilizamos a tag defechamento </TITLE>, assim poderemos prosseguir com o resto do código.

Se não houverem mais cabeçalhos, então informamos o fim da declaração destes, escrevendo a tag</HEAD> .

Finalmente, encerramos a nossa primeira página com o comando </HTML> .

2.5 Meta tags

Vimos no exercício acima, a declaração de cabeçalhos HTML, em especial o título da página. Como foi ditoanteriormente, a tag <HEAD> armazena diversos tipos de cabeçalho. Entre eles estão as meta tags.

Meta tags são pequenas informações úteis para indexar e categorizar páginas para serviços de busca. Possuemainda informações sobre o tipo de padrão W3C utilizado para construir a página e ainda pode fazerdirecionamentos e atualizar sua página de acordo com os parâmentros especificados.

Vamos alterar o exercício anterior para testarmos algumas meta tags.

<HTML> <HEAD> <TITLE>Minha primeira página!!!</TITLE> <META name="Author" content="Nome do autor"> <META name="Description" content="Descrição da página"> <META name="Keywords" content="Palavras chave"> <META http−equiv="refresh" content="9;URL=http://www.sistemasabertos.com.br"> </HEAD> <BODY> Nosso endereço mudou. Aguarde uns instantes para acessar a nova página. </BODY></HTML>

Agora vamos entender o que foi feito acima..

$LOGOIMAGE 2 Criando uma página

2.4 Inserindo tags HTML básicas 6

Já sabemos que devemos iniciar nossos códigos com a tag <HTML>. Se houverem cabeçalhos em nossapágina, eles deverão estar contidos dentro do bloco <HEAD>.

Incluímos no exercício algumas meta tags. As meta tags não possuem fechamento. Elas possuem atributosque informam ao navegador exatamente o que ele precisa saber. Os atributos deve ser declarados no corpo dameta tag e seu conteúdo deve estar entre aspas.

A primeira meta tag tem a propriedade name com valor �Author�. Isso significa que o conteúdo existentena propriedade content terá informações sobre o autor da página, ou a pessoa que escreveu o código.

Logo em seguida, temos a meta tag Description. Seu conteúdo guardará uma breve descrição sobre oassunto da página. Isso será muito útil para os serviços de busca.

A meta tag �Keywords� tem comportamento semelhante à meta �Description�. Só que agoraarmazenamos palavras chaves que irão facilitar as buscas realizadas na Internet. Seu site será encontrado commaior precisão através dessas keywords.

Finalmente temos a meta tag Refresh. Aqui temos uma ação a ser realizada pelo browser. Informamos queao passar de 9 segundos, a página será direcionada para o endereço descrito. Se quisermos apenas que apágina seja recarregada em certos intervalos de tempo, eliminamos a parte que se refere à URL. É um recursomuito utilizado em sites de notícias, que atualizam suas informações freqüentemente. Observe também que apropriedade name foi substituidada pela http−equiv informando ao navegador que esta propiedade é umcabeçalho Http.

Temos também uma outra tag codificada no exercício. A tag <BODY> representa tudo aquilo que serávisível ao usuário. Colocamos um texto para testar a meta tag Refresh. É dentro da tag <BODY> que seconcentrará o conteúdo deste livro.

Para encerrrarmos a página, precisamos lembrar de fechar todas as tags abertas.

Abram esta página no seu navegador e aguarde alguns segundos para ser redirecionado para a páginaespecificada.

2.6 Adicionando atributos às tags

As tags HTML, às vezes precisam de informações extras que poderão variar de acordo com a formataçãodesejada em cada seção da página. A essas informações damos o nome de propriedades.

Cada tag poderá ter um conjunto de propriedades que lhe proporcionará melhor caracterização. Essaspropriedades devem ser declaradas junto com a inicialização da tag e seus valores estarão acondicionadosentre aspas.

Veja o exemplo:

<BODY bgcolor="#FF0000">...</BODY>

2.7 Alterando a cor de fundo da página

Vamos acrescentar alguns atributos ao exercício. Altere a tag <BODY> com os atributos abaixo e verifiquecomo ela se comportará.

<BODY bgcolor="#FFFF00" text="#0000FF">


2.6 Adicionando atributos às tags 7

No caso descrito acima, alteramos a cor de fundo da página � propriedade bgcolor � para ser visualizada coma cor: #FF0000 e também dissemos que a cor dos textos existentes no corpo do documento terão a cor#0000FF.

As cores que utilizamos na nossa página estão em código hexadecimal. Cada cor tem o seu próprio código e opadrão de cores RGB. Veja no final do livro, o anexo sobre cada cor e seu respectivo código hexadecimal. Ascores mais comuns podem ser escritas com o seu nome equivalente em inglês. Veja o exemplo:

<BODY bgcolor="yellow" text="blue">

A tag <BODY> suporta várias outras propriedades, mas só veremos no decorrer do livro, quandoaprenderemos quando elas poderão ser utilizadas. Observe a descrição de cada uma:

<BODY link="#333333" vlink="#009966" alink="#FF0000"><BODY leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

As propriedades link, vlink e alink dizem quais cores os links assumirão quando eles estiverem no estadoinicial, quando for um link que já foi visitado e quando ele estiver ativo, respectivamente.

Já as propriedades leftmargin, topmargin, marginwidth e marginheight representam as margens esquerda,superior, direita e inferior a serem utilizadas na página. As margens deve ser especificadas em pixels.

Podemos utilizar todas essas propriedades juntas ou somente aquelas que precisarmos efetivamente.

Agora altere as cores de fundo da página e dos textos. Acrescente mais texto dentro da tag <BODY> e alteretambém as margens. Verifique o resultado.

2.8 Visualizando sua primeira página

Para visualizar páginas de Internet, precisamos de um navegador que irá interpretar os código escritos emHTML. Os arquivos de páginas deve ter a extensão .htm ou .Html.

Como nossas páginas ainda não estão no servidor, precisamos carregar o arquivo no browser. Clique emarquivo e depois abrir. Selecione o arquivo desejado e clique em ok. Não é necessário repetir essa operação acada alteração da página. Os navegadores possuem comandos para atualizar a página corrente sem anecessidade de abrir o arquivo novamente. Verifique a melhor forma de executar esta atualização no seunavegador.

2.9 Exercício Proposto

− Digite o código abaixo e salve−o como ex1.htm.

<HTML> <HEAD> <TITLE>Documento com fundo azul!!</TITLE> </HEAD> <BODY bgcolor="#0000FF" text="#00FF00"> Página com fundo e texto coloridos!</BODY></HTML>

− Agora faça as seguintes alterações:

Altere a cor de fundo• Altere a cor do texto•


2.8 Visualizando sua primeira página 8

Utilize meta tags e direcione a página para um site qualquer• Retire a tag </BODY>•


2.8 Visualizando sua primeira página 9

3 Formatando o Texto

3.1 Introdução

No Capítulo 2, aprendemos como deve ser a estrutura de um documento HTML, que deve ser composta pordois blocos de códigos: os cabeçalhos, representados pela tag <HEAD>, e o corpo do documento, utilizando atag <BODY>. Aprendemos também, como declarar uma tag e suas propriedades, que poderão ser definidas deacordo com a necessidade de formatação.

Agora veremos como trabalhar com texto dentro da página. Formatação do texto, alinhamento e listas serãoalgumas das tags que trabalharemos neste capítulo.

A partir de agora, será exibida uma lista com as propriedades de cada tag e suas funções. Os exercícios nãodeverão contemplar todas, mas você pode e deve testar o maior número de opções possíveis, para aprimorarseus conhecimentos da linguagem.

3.2 Formatando o texto

Podemos inserir textos nas nossas páginas apenas escrevendo−os diretamente no código, sempre dentro da tagbody, como fizemos no Capítulo 2. Dessa forma possuiremos um texto simples, sem formatação especial,alinhamento ou cor. Não poderíamos destacar uma determinada parte do texto, indicando um título, porexemplo.

Vamos utilizar agora, tags que podem ser muito úteis quando queremos exibir um certo destaque ao nossotexto:

Tags − comandos Formatação<b></b> negrito<strong></strong>negrito<i></i> italico<em></em> italico<s></s> riscado<u></u> sublinhado<sub></sub> nota inferior − exibe o texto em forma de nota de "rodapé"<sup></sup> nota superior − exibe o texto em forma de �potência�

O HTML possui várias outras tags de formatação de texto, mas um pouco menos comuns. Antes detrabalharmos as novas tags que acabamos de aprender, precisamos abrir um parênteses sobre como funciona adiagramação do texto dentro da página.

As quebras de linhas e espaços inseridos atráves do uso das teclas ENTER ou SPACE do seu teclado nãoterão efeito visual na página.

A linguagem HTML interpreta apenas um espaço entre cada palavra ou caracter ou outro elemento dalinguagem. Se quisermos inserir mais de um espaço temos uma tag especial para isso. É a tag . Cada significa um espaço visual na página.

Assim acontece também com as quebras de linha. O uso de ENTER com a intenção de quebra de linha nãoterá efeito na diagramação da página. Para fazer isso utilize a tag <br>. Cada <br> dentro do códigorepresentará uma quebra de linha. Detalhe, esta tag não possui seu par de fechamento.

3 Formatando o Texto 10

http://www.sistemasabertos.com.br/twiki/bin/genpdf/Main/LivroHTMLTotal?sortcol=0&table=1&up=0#sorted_table


Monte o exemplo a seguir e visualizem no seu web browser como texto está sendo apresentado. Salve oarquivo, atribua o nome de conteudo.htm.

<HTML> <HEAD> <TITLE>Formatando o texto!!!</TITLE> </HEAD> <BODY> <strong>HTML − <s>Sistemas Abertos</s></strong><br> <br> Esta é a página do Curso de HTML<sup>1</sup>.<br> O <u>HTML</u> é a linguagem para a construção de páginas para a <i>Internet</i>.<br> <br> <b>HTML</b>: Hypertext Markup Language </BODY></HTML>

Observem o aninhamento de tags, sempre lembrando de finalizar cada uma delas, de acordo com a suaexigência. Modifiquem o exemplo inserindooutras tags ao texto. Depois verifiquem o resultado.

3.3 Criando títulos e sub−títulos

Na linguagem HTML existem tags que, ao serem aplicadas no texto, caracteriza o mesmo em formato detítulos. Podemos formatar um texto para assumir o status de título, utilizando a seguinte tag:

<hn></hn> − onde n é o nível do título ou sub−título, lembrando que o título de maior expressão é oprimeiro(<h1>), e o de menor, o último(<h6>).

•

<h2>Isto é um título de nível 2</h2>

Vejamos agora uma nova tag que posiciona um determinado elemento HTML, seja ele texto, imagem, tabelaou qualquer outro, na região central da página.

Como estamos trabalhando com textos, nosso exemplo será baseado na centralização desse elemento. A tagem questão é a:

<center></center> − centraliza o elemento contido entre as tags.•

3.4 Alterando a formatação da fonte

Já aprendemos como inserir textos nas nossas páginas, como informar que uma parte desse texto deve assumiruma determinada característica e também como dizer se o texto é um título.

Porém, tudo isso ainda é pouco se quisermos uma página mais apresentável. Parar escolher o tipo de fonte quequeremos utilizar, seu tamanho e suas cores,basta utilizar a tag <font>. Esta tag possui algumas propriedades,exatamente aquelas que acabamos de mencionar. Vejamos alguns exemplos:

<font face="Verdana" size="3" color="#FF0000">Texto</font><font face="Verdana, Arial" color="#FF00FF">Texto</font><font color="#C4C4C4">Texto</font>

onde:

face � a propriedade face define qual é a fonte que queremos utilizar no nosso texto. Neste casoutilizamos a fonte Verdana. Poderíamos especificar mais de uma, separando−as por uma vírgula. Caso

•

$LOGOIMAGE 3 Formatando o Texto

3.3 Criando títulos e sub−títulos 11

não seja possível ao seu web browser utilizar a primeira, a especificação no HTML de uma segundaopção, permitiria o uso desta e assim por diante. Lembre−se de sempre utilizar fontes mais comuns epadrão, para evitar que sua página sofra uma descaracterização pelo fato do sistema usuário nãopossuir determinada fonte.

size � com esta propriedade informamos qual é o tamanho da fonte a ser utilizada no nosso texto. Osize varia de 1 a 7 e funciona de forma inversa aos tamanhos dos títulos. Aqui a menor fonte é a detamanho 1 e a maior, tamanho 7, seu tamanho real depende do browser .

•

color � como o nome sugere, podemos definir qual a cor assumida pelo texto, expressadapreferencialmente em código hexadecimal.

•

Se quisermos inserir uma certa identação ao texto, para que ele fique a uma certa distância do elemento que ocontém, no nosso caso a própria página, utilizamos a tag <blockquote>.

<blockquote>Texto identado</blockquote>

Coloque em prática o que aprendemos, modificando o exemplo anterior, de forma que ele se apresente maisinteressante aos olhos do usuário.

<HTML> <HEAD> <TITLE>Formatando o texto!!!</TITLE> </HEAD> <BODY bgcolor="#FFFFCC"> <center><h3>HTML − Sistemas Abertos</h3></center> <blockquote> <font face="Verdana" size="3" color="#000000"> Esta é a página do <font color="#FF0000">Curso de HTML</font> <sup>1</sup>.<br> O <u>HTML</u> é a linguagem para a construção de páginas para a <i>Internet</i>.<br> <br> <b>HTML</b>: Hypertext Markup Language </font> </blockquote></BODY></HTML>

3.5 Fazendo parágrafos

Os parágrafos no HTML têm a mesma função que em um texto digitado em um editor de textos qualquer.

Podemos visualizar a disposição do texto entre vários parágrafos, a principal função deles no Html será oalinhamento do texto.

A tag <p> nos diz que o texto inserido dentro dela e de seu par de fechamento é um parágrafo. Este parágrafopossui uma propriedade que é o alinhamento (align). O alinhamento pode ser centralizado (center), à esquerda(left), à direita (right) e justificado (justify). Observe:

<p align="left">Utilizando Parágrafos</p><p align="justify">O texto inserido aqui será apresentado com alinhamento justificado. Podemos utilizar outros três tipos de alinhamento:centralizado, utilizando o valor center para a propriedade


3.5 Fazendo parágrafos 12

align, alinhado à esquerda, com o valor left para a mesma propriedade, e se quisermos, podemos ainda alinhar o texto à direita, informando o valor right para a propriedade align.</p><p align="right">Veja o texto alinhado à direita!!!</p>

3.6 Trabalhando com texto pré−formatado

Como foi mencionado anteriormente, o HTML não interpreta os vários espaços e as quebras de linhas quandoutilizamos as teclas SPACE e ENTER. Quando queríamos mostrar visualmente esses elementos, utilizávamosa tag para cada espaço pretendido e a tag <br> para cada quebra de linha.

Porém, existe uma tag que imprime o texto na tela exatamente como o digitamos no código,respeitando todosos espaços, tabulações e quebras de linha, sem que para isso seja necessário utilizar as tags descritas acima.

Estamos falando da tag <pre>. Esta tag não altera a formatação dos textos do documento, apenas preserva suadiagramação de acordo com a forma que foi digitada.

− <pre>− Ao utilizarmos a tag pre,− podemos escrever da forma− como queremos ver na tela,− sem nos preocuparmos com espaços− ou quebras− de linha, ou− tabulações.− </pre>

3.7 Inserindo uma linha horizontal

Para inserirmos uma linha horizontal, que poderá ser utilizada como separador entre várias partes do texto,declaramos a tag <hr>.

A tag <hr> possui alguns parâmetros como comprimento, espessura, cor, sombra.

<hr align="center" width="400" size="10" noshade color="#0000FF">

Neste exemplo utilizamos vários atributos que serão explicados agora.

align � posiciona a linha de acordo com os valores dados: pode ser center, right ou left.• width � representa o comprimento da linha, podendo ser expressado em pixels ou porcentagemrelativa ao tamanho da tela ou ao elemento que contém a linha horizontal.

•

size � define a espessura da linha, neste caso especial, 10 pixels.• color � é a cor da linha, sempre dando preferência às cores expressas em código hexadecimal.• noshade � neste caso, queremos dizer não haverá sombreamento na linha. Caso o queiramos, bastaomitirmos esta propriedade.

•

3.8 Listas

O conceito de listas em HTML significa estar diagramando tópicos em formatos de marcadores. Temos trêstipos de listas: numeradas, não numeradas e uma lista de definição de termos. Vamos entender cada umadelas:


3.6 Trabalhando com texto pré−formatado 13

Listas numeradas: esta lista exibe os tópicos com marcadores numéricos. A tag de declaração delistas numeradas é <ol> e cada tópico é uma tag <li>.

•

Listas não numeradas: as listas não numeradas são declaradas com a tag <ul>, e também possui um<li> para cada tópico desta lista.

•

Observação: a tag <li> deve estar contida dentro da tag <ol> ou <ul>, formando uma certa hierarquia nadeclaração.

Listas de definição de termos: esta lista trabalha com a idéia de que um certo termo textual possui umsignificado que deve ser apresentado ao usuário. A tag que declara uma lista de definição de termos éa <dl>. Cada termo é representado pela tag <dt> e o seu significado é dado pela tag <dd>.

•

Escreva o exercício abaixo para visualizar o funcionamento de cada uma das listas acima.

<HTML> <HEAD> <TITLE>Trabalhando com listas!!!</TITLE> </HEAD> <BODY bgcolor="#FFFFCC"> <p><b>Carreira Desenvolvedor Web − Programa</b></p> <ol> <li>Lógica de Programação</li> <li>HTML</li> <li>JavaScript</li> <li>PHP</li> <li>PHP Avançado</li> </ol> <p><b>Curso de HTML Total − Programa</b></p> <ul> <li>Dia 1 − Introdução</li> <li>Dia 2 − Links e Tabelas</li> <li>Dia 3 − Frames</li> <li>Dia 4 − Formulários</li> <li>Dia 5 − CSS</li> </ul> <dl> <dt>HTML</dt> <dd>Hypertext Markup Language</dd> <dt>PHP</dt> <dd>Hypertext Pre Processor</dd> <dt>CSS</dt> <dd>Cascade Style Sheets</dd> </dl></BODY></HTML>

3.9 Marquee

Existem algumas tags HTML que são restritas a um browser específico. Isso quer dizer que, quando asusamos podem não funcionar em alguns navegadores. A tag marquee é um desses casos.

Ao utilizarmos esta tag, estamos informando ao navegador, que o texto que ela contém terá um movimento dedeslizar pela tela. Atenção: a tag <marquee> só funciona no Internet Explorer.

A característica do movimento e suas direções são definidas pelas propriedades a seguir:

behavior � a propriedade behavior pode ter três valores, admitindo que ainda não declaramos apropriedade direction:

alternate � o texto começa o seu movimento da direita para a esquerda e continua atéalcançar o lado esquerdo, retornando à direita novamente em um vai e vem sem fim.

♦

•


3.9 Marquee 14

scroll � o valor scroll para a propriedade behavior, indica que o movimento iniciará do ladodireito e atravessará o lado esquerdo, reaparecendo novamente no lado direito, realizandoaquilo que podemos dizer, ser uma trajetória circular.

♦

slide � utilizando este valor, o texto iniciará seu movimento pela direita e será executado atéatingir a borda direita, onde deverá parar.

♦

direction � esta propriedade define a direção que o texto deverá seguir quando iniciar seu movimento.Temos quatro direções possíveis:

down � o texto deslizará de cima para baixo.♦ left � o movimento será da direita para a esquerda.♦ right � o movimento será da esquerda para a direita.♦ up � o texto deslizará de baixo para cima.♦

•

width � a propriedade width representa o comprimento da área de deslizamento. Pode ser expressa empixels ou porcentagem, neste caso, sempre em relação ao local que contiver o texto.

•

height � define a espessura ou a altura da área de deslizamento. Também pode ser expressa em pixelsou porcentagem, porém é mais comum a primeira opção.

•

bgcolor � é a cor de fundo da área imaginária onde o texto estará deslizando. É recomendável autilização das cores em formato hexadecimal.

•

Antes de colocarmos em prática estes novos elementos, é de bom tom, apresentar−lhes um concorrente da tag<marquee>. É necessário dizer que esta nova tag só terá efeitos no Netscape. Estamos falando da tag <blink>.

A tag <blink> mostra o texto piscando na tela. Sua sintaxe é a seguinte:

<blink>Texto piscando!!!</blink>

Como dissemos anteriormente, é muito importante utilizarmos fontes que sejam comuns e possam serencontradas facilmente. Esta observação serve também para os casos em que determinadas tags não seaplicam de forma geral.

Ao utilizarmos um código padrão, estamos garantindo que nossas páginas poderão ser visualizadascorretamente em qualquer navegador.

Vamos exercitar um pouco a tag marquee.

<HTML> <HEAD> <TITLE>Utilizando o Marquee!!!</TITLE> </HEAD> <BODY bgcolor="#FFFFCC"> <center> <marquee behavior="scroll" direction="up" width="50%" height="60" bgcolor="#000000"> <font face="Verdana" size="3" color="#FFFF00"> Isto é um exemplo da tag Marquee </font> </marquee> </center></BODY></HTML>

Modifique o exemplo, coloque suas preferências visuais.


3.9 Marquee 15


− Escreva o código necessário para a construção da figura abaixo, salve−o como ex2.htm e:

Transforme a lista em uma lista ordenada• Teste diferentes atributos das linhas horizontais• Teste diferentes atributos do marquee•


3.10 Exercício Proposto 16

4 Trabalhando com Imagens

4.1 Introdução

Trabalhando com imagens será o capítulo onde aprenderemos como utilizar racionalmente a inclusão deimagens dentro das nossas páginas.

As imagens devem ser utilizadas com muita cautela dentro de um site, porque podem tornar o acesso muitodemorado e cansativo aos olhos do usuário. Na programação atual, muitos dos efeitos produzidos pelasimagens, foram cedendo espaço para a utilização das folhas de estilo (veremos em capítulo mais adiante), porfazerem parte da programação e não sobrecarregar a visualização de páginas muito pesadas.

Com o recurso do uso de Tabelas, veremos em capítulo mais adiante, podemos fatiar uma imagem muitogrande de forma que ela seja carregada em partes.

4.2 Gráficos da Web

Os browsers suportam apenas alguns tipos de imagens, sendo os mais comuns: gif, jpeg e png.

Isso significa que todos os gráficos(imagens) que forem utilizadas nas nossas páginas deverão estar em umdesses formatos.

4.3 Inserindo imagens

A tag de inserção de imagens que o HTML possui é a seguinte:

<img src="nome da imagem">

Veremos então, quais as propriedades que nos permitirão um maior controle deste elemento.

src � define o nome da imagem e a localização dentro da árvore de diretórios do site.• width � especifica a largura da imagem.• height � especifica a altura da imagem.• alt � exibe um texto informartivo ao se passar o mouse sobre a imagem.• border � define a borda da imagem.• align � alinhamento da imagem (align = left/right) ou do texto em relação à imagem (align =top/middle/bottom)

•

lowsrc � o Netscape e o Internet Explorer, conseguem carregar uma imagem alternativa, em baixaresolução para resolver o problema do carregamento de imagens muito grandes.

•

Vamos inserir nossa primeira imagem dentro da nossa página. Escrevam o código abaixo e visualizem nonavegador.

<HTML> <HEAD> <TITLE>Trabalhando com imagens!!!</TITLE> </HEAD> <BODY bgcolor="#FFFFCC"> <img src="logosa.gif"></BODY></HTML>

4 Trabalhando com Imagens 17

4.4 Inserindo imagens de fundo

No Capítulo 2(ArtigoCriandoUmaPagina), vimos que a tag <body> tinha uma propriedade que permitia queuma imagem fosse inserida como background da página. Acrescentem o código abaixo para colocarmos umaimagem como fundo da nossa página.

<HTML> <HEAD> <TITLE>Trabalhando com imagens!!!</TITLE> </HEAD> <BODY bgcolor="#FFFFCC" background="img_back.gif"> <img src="logosa.gif"></BODY></HTML>

4.5 Centralizando a imagem

Para termos a imagem centralizada em relação à página, só precisamos colocá−la entre as tags<center></center>.

<HTML> <HEAD> <TITLE>Trabalhando com imagens!!!</TITLE> </HEAD> <BODY bgcolor="#FFFFCC" background="img_back.gif"> <center><img src="logosa.gif"></center></BODY></HTML>

4.6 Exibindo textos alternativos

Todos já devem ter observado que ao passarmos o mouse em cima de alguma imagem, imediatamente apareceum pequeno retângulo amarelo com alguma informação sobre a imagem. Esse efeito é devido ao uso dapropriedade alt. Modifique o exercício anterior e depois testem no navegador.

<HTML> <HEAD> <TITLE>Trabalhando com imagens!!!</TITLE> </HEAD> <BODY bgcolor="#FFFFCC" background="img_back.gif"> <center> <img src="logosa.gif" alt="Texto informativo"> </center></BODY></HTML>

4.7 Ajustando o tamanho da imagem

Ao inserirmos uma imagem ná página, ela irá se mostrar exatamente do tamanho que ela é. Às vezes isso setorna um pouco incômodo, principalmente se temos várias imagens para o usuário carregar.

Podemos então, criar thumbnails(imagens reduzidas) para facilitar o carregamento de todas as imagens eainda dar uma opção ao usuário, de ao clicar em cima da imagem que ele quer ver, essa imagem seja entãocarregada no tamanho natural. Isso é feito com o auxílio das propriedades width e height.

A redução ou o aumento forçado de uma imagem pode causar uma certa deformação na mesma. Lembre−sede reduzí−la ou aumentá−la proporcionalmente.

$LOGOIMAGE 4 Trabalhando com Imagens

4.4 Inserindo imagens de fundo 18

<HTML> <HEAD> <TITLE>Trabalhando com imagens!!!</TITLE> </HEAD> <BODY bgcolor="#FFFFCC"> <center> <img src="img_aurora.jpg" alt="Imagem reduzida" width="115" height="100"><br><br> <img src="img_aurora.jpg" alt="Imagem normal"> </center></BODY></HTML>

4.8 Formatando imagens com textos

Até aprendermos a utilizar tabelas no HTML, precisaremos utilizar recursos que a tag <img> fornece, parapodermos alinhar textos em relação às nossas imagens, o que poderia se tornar uma tarefa indigesta se não ospossuíssemos. Escrevam o código abaixo.

<HTML> <HEAD> <TITLE>Trabalhando com imagens!!!</TITLE> </HEAD> <BODY bgcolor="#FFFFCC" background="img_back.gif"> <img src="logosa.gif" width="161" height="26" alt="Sistemas Abertos"><br><br> <img src="logosa.gif" width="161" height="26" align="right"> Imagem à direita do texto<br><br> <img src="logosa.gif" border="1"> Imagem com borda<br><br> <img src="logosa.gif" width="161" height="26" align="middle"> Texto alinhado ao meio<br><br></BODY></HTML>


− Digite o código abaixo, salve−o como ex3.htm e:

Selecione imagens no formato jpeg ou gif e substitua os nomes "figura" colocados nas tags <img>• Combine diferentes atributos para as imagens• Escreva os atributos de cada figura•

<HTML> <HEAD> <TITLE>Utilizando figuras!</TITLE> </HEAD> <BODY bgcolor="#C0C0C0"> <img src="FIGURA"> <br><br> <img src="FIGURA"> <br><br> <img src="FIGURA"> <br><br> <img src="FIGURA"> <br><br></BODY></HTML>

$LOGOIMAGE 4 Trabalhando com Imagens

4.8 Formatando imagens com textos 19

5 Links

5.1 Introdução

Já vimos que a Internet é uma imensidão de páginas interligadas em uma teia de documentos. E mais, essasligações não possuem em um ponto final, onde seria possível dizer: a Internet acaba aqui. Tudo isso é devidoa uma característica da linguagem HTML, que são os hyperlinks ou simplesmente links..

Os links são ligações de uma página para outra ou até mesmo um link para ela mesma. E essas páginas queforam requisitadas por um link, também possuirá vários outros links que levarão a novas páginas e assim pordiante. É uma navegação que nunca acaba. Quanto mais navegamos, mais a Internet se agiganta.

5.2 O que é e como funciona

Os links são tags comuns HTML. Eles possuem uma tag de abertura e outra de fechamento. Sua principalcaracterística é uma propriedade onde podemos especificar o local para onde o usuário irá quando ele clicarno link.

Sua sintaxe básica é a seguinte, <a href=�local de destino�>Nome do link</a> onde href é a propriedade quearmazena a página de destino do usuário, e o Nome do link, o texto clicável que será a chamada dolink:Vamos praticar um pouco.

<HTML> <HEAD> <TITLE>Trabalhando com links!!!</TITLE> </HEAD> <BODY bgcolor="#FFFFCC"> <center> Clique aqui para visitar o site da <a href="http://www.sistemasabertos.com.br"> Sistemas Abertos </a> </center></BODY></HTML>

Observação: na propriedade href podemos ligar tanto páginas externas ao nosso servidor, como o exercícioacima faz, como também arquivos da nossa própria página e até arquivos para downloads. Veremos como issoirá influir na declaração do código no tópico seguinte.

5.3 Links relativos e links absolutos

Quando falamos em links relativos ou links absolutos, estamos nos referindo a como expressar o valor de hrefse tivermos que ligar páginas do nosso próprio site, ou páginas que se encontram fora do nosso site.

Os links absolutos servem para fazermos uma chamada a uma página que está fora do nosso site, como porexemplo, o exercício anterior. Neste caso, é necessário especificarmos o link por completo, desde o protocolohttp. Se colocarmos apenas www.sistemasabertos.com.br, não estará correto.

Já quando o destino for uma página que pertence à nossa própria página, e estiver armazenado no próprioservidor, basta que o nome do arquivo e seu caminho seja referenciado. Precisamos entender melhor comofunciona a nossa estrutura de diretórios.

Imaginem a seguinte árvore de diretórios:

5 Links 20

/www/nosso_site/

imagens/◊ scripts/◊ index.htm◊ ex1.htm◊ ex2.htm◊ news/

news.htm⋅ ◊

♦ •

Queremos que nossa página principal, chamada de index.htm, tenha um link para a página ex2.htm. Observemque eles estão no mesmo nível na árvore de diretórios. Neste caso, para criarmos o link, basta especificarmoso nome do arquivo que queremos chamar. Veja a sintaxe a seguir (este código deverá ser colocado na páginaindex.htm):

<a href="ex2.htm">Link para a página Ex2</a>

Agora, suponhamos que a página ex2.htm tenha um link para a página news.htm. A página de origem e apágina de destino não estão no mesmo nível. Temos que acessar o diretório news para ver a página. É precisoinformar todo o caminho para o link.

Atenção: páginas web não trabalham com letras de unidades, como a sintaxe seguinte. Os servidores web nãoaceitam essa declaração: c:\www\nosso_site\news\news.htm. Então como deve ser feito? Observem agora:

<a href="news/ex2.htm">Link para a página Ex2</a>

Da mesma forma, o caminho inverso também requer que o endereço seja declarado nestes termos. Agora, apágina news.htm, tem um link para a página ex1.htm. Utilizaremos um duplo ponto para informar queestamos saindo do diretório news, e aí sim, poderemos acessar a página ex1.htm.

<a href="../ex1.htm">Link para a página Ex1</a>

Vamos então criar alguns arquivos para podermos trabalhar com links. É recomendável salvar os arquivoscom os mesmos nomes utilizados aqui, para que o código seja executado com perfeição.

pagina1.htm(salvem no diretório de trabalho)

<HTML> <HEAD> <TITLE>Trabalhando com links!!!</TITLE> </HEAD> <BODY bgcolor="#FFFFCC"> <b><i><font face="Verdana" size="2"> Trabalhando com links − PÁGINA 1 </font></i></b> <br><br> <a href="pagina2.htm">Página 2</a><br> <a href="links/pagina3.htm">Página 3</a><br></BODY></HTML>

pagina2.htm(salvem no diretório de trabalho)

<HTML> <HEAD> <TITLE>Trabalhando com links!!!</TITLE> </HEAD> <BODY bgcolor="#FFFFCC"> <b><i><font face="Verdana" size="2">

$LOGOIMAGE 5 Links

5 Links 21

Trabalhando com links − PÁGINA 2 </font></i></b> <br><br> <a href="pagina1.htm">Página 1</a><br> <a href="links/pagina3.htm">Página 3</a><br></BODY></HTML>

pagina3.htm(criem um diretório chamado links e salvem a pagina3.htm dentro dele)

<HTML> <HEAD> <TITLE>Trabalhando com links!!!</TITLE> </HEAD> <BODY bgcolor="#FFFFCC"> <b><i><font face="Verdana" size="2"> Trabalhando com links − PÁGINA 3 </font></i></b> <br><br> <a href="../pagina1.htm">Página 1</a><br> <a href="../pagina2.htm">Página 2</a><br></BODY></HTML>

Abram no navegador o arquivo pagina1.htm e utilizem os links criados para acessar todas as páginas.

5.4 Links para uma seção da página

Os links não ligam apenas outras páginas, sejam elas pertencentes ao nosso site ou simplesmente uma páginaexterna ao nosso servidor. Os links também podem levar a uma determinada parte da própria página que ochama.

Essas seções específicas que são chamadas pelos links têm o nome de âncoras. Para utilizarmos as âncoras,temos que aprender uma nova propriedade da tag <a>:

name � utilizamos esta propriedade para dar um nome à seção que queremos linkar. A âncora deveser criada da seguinte forma:

•

<a name="nome_secao">

Quando a âncora estiver criada, agora precisamos criar o link que a chamará. É só acrescentar o sinal # nafrente do nome da âncora:

<a href="#nome_secao">Clique aqui para ir para a seção desejada</a>

Se for uma âncora de um outro arquivo, precisaremos chamar o arquivo e a âncora juntas:

<a href="pagina.htm#nome_secao">Clique aqui para ir para a seção desejadano arquivo pagina.htm</a>

Vamos editar os exercícios pagina2.htm e pagina3.htm, que fizemos anteriormente. Teremos que acrescentarconteúdo suficiente para que seja criado uma certa barra de rolagem e possamos navegar na própria página.Para isso, acrescentem várias vezes a tag <br> ou texto, para forçar a situação desejada:

pagina2.htm

$LOGOIMAGE 5 Links

5.4 Links para uma seção da página 22

<HTML> <HEAD> <TITLE>Trabalhando com links!!!</TITLE> </HEAD> <BODY bgcolor="#FFFFCC"> <b><i><font face="Verdana" size="2"> Trabalhando com links − PÁGINA 2 </font></i></b> <br><br> <a href="pagina1.htm">Página 1</a><br> <a href="links/pagina3.htm">Página 3</a><br> <br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br> <a name="fim">Fim da Página</a></BODY></HTML>

pagina3.htm

<HTML> <HEAD> <TITLE>Trabalhando com links!!!</TITLE> </HEAD> <BODY bgcolor="#FFFFCC"> <b><i><font face="Verdana" size="2"> Trabalhando com links − PÁGINA 3 </font></i></b> <br><br> <a href="#fim">Clique aqui para ir ao fim desta página</a> <a href="../pagina2.htm#fim">Clique aqui para ir ao fim do exercício pagina2.htm </a> <a href="../pagina1.htm">Página 1</a><br> <a href="../pagina2.htm">Página 2</a><br> <br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br> <a name="fim">Fim da Página</a></BODY></HTML>

5.5 Imagens como links

Vocês já viram que alguns links nas inúmeras páginas que já navegaram, não eram texto, como estamostrabalhando, e sim imagens. Isso mesmo! As imagens do nosso site também pode ser utilizadas como links.

Ao inserirmos imagens ao invés do texto dentro da tag <a>, temos então, uma imagem que também é um link.Vamos editar o arquivo pagina1.htm.

pagina1.htm

<HTML> <HEAD> <TITLE>Trabalhando com links!!!</TITLE> </HEAD> <BODY bgcolor="#FFFFCC"> <b><i><font face="Verdana" size="2"> Trabalhando com links − PÁGINA 1 </font></i></b> <br><br> <a href="pagina2.htm">Página 2</a><br> <a href="links/pagina3.htm">Página 3</a><br><br>

$LOGOIMAGE 5 Links

5.5 Imagens como links 23

Clique na imagem para visitar a Sistemas Abertos<br><br> <a href="http://www.sistemasabertos.com.br"> <img src="logosa.gif" border="0"> </a></BODY></HTML>

5.6 Links para e−mail

Finalmente, temos uma certa característica da tag <a> que induz o link a chamar um programa cliente dee−mail, como Evolution ou Outlook Express e preencherá o campo de destinatário, com o valor dapropriedade href.

Este tipo de sintaxe, embora muito utilizado, não é recomendável. Uma vez que a maioria das pessoasutilizam webmail, este link apenas chamará o programa de e−mail e muitas vezes não estará configurado parao envio de e−mails.

Atenção: este link não envia e−mails, apenas carrega o programa cliente de e−mails com o nome dodestinatário especificado na declaração da tag.

Vamos agora finalizar este capítulo colocando em prática este novo recurso que aprendemos. Podemos alteraro arquivo pagina1.htm para que ele tenha um link para e−mail.

<HTML> <HEAD> <TITLE>Trabalhando com links!!!</TITLE> </HEAD> <BODY bgcolor="#FFFFCC"> <b><i><font face="Verdana" size="2"> Trabalhando com links − PÁGINA 1 </font></i></b> <br><br> <a href="pagina2.htm">Página 2</a><br> <a href="links/pagina3.htm">Página 3</a><br><br> <a href="mailto:[email protected]"> Clique aqui para enviar um email </a> <br><br> Clique na imagem para visitar a Sistemas Abertos<br><br> <a href="http://www.sistemasabertos.com.br"> <img src="logosa.gif" border="0"> </a></BODY></HTML>


5.7.1 Exercício 1:

Crie um arquivo index.html, ex1.html e ex2.html;• Crie links com imagens no arquivo index.html que apontem para ex1.html e ex2.html;• Modifique os arquivos ex1.html e ex2.html, criando as seções: INICIO, MEIO e FIM• Crie um índice interno em ex1.html e ex2.html que aponte para as suas secoes• Adicione um link para e−mail em index.html•

$LOGOIMAGE 5 Links

5.6 Links para e−mail 24

6 Tabelas

6.1 Introdução

Você já deve ter notado que a diagramação de elementos dentro da página HTML, é muito limitada. Até agorasó conseguimos alinhar textos e imagens, um ao lado do outro e linha por linha.

Em HTML, as tabelas são o único recurso para se obter uma boa diagramação e organização do conteúdo daspáginas. Com o seu uso, é possível promover a junção de qualquer conteúdo, sem que a página ocupe maisespaço que o definido previamente, causando imperfeição na visualização.

6.2 Apresentando o conteúdo com tabelas

A disposição dos elementos utilizados dentro de uma tabela é muito simples. Uma tabela é composta de linhase colunas. Cada ponto de interseção entre uma linha e uma coluna é chamado de célula. São nas células queinserimos o nosso conteúdo.

Uma boa prática de programação é definir todas as margens da página com tamanho zero e incluir uma tabelaque servirá como container para todo o resto da página.

Essa tabela terá apenas uma célula. Se as margens estão zeradas e a tabela principal ocupa exatamente otamanho que queremos, então não fica difícil distribuir os objetos da forma desejada.Assim que a tabelaprincipal estiver desenhada, basta que imaginemos o resultado final e acrescentar o conteúdo, sempre dentrode novas tabelas. Vamos entender melhor.

6.3 Inserindo uma tabela

A tag que representa uma tabela na linguagem HTML, é a <table>. Uma <table> tem linhas, que é um <tr>, eas células, que é a tag <td>.

Devemos seguir uma certa hierarquia para não desenharmos uma tabela errada. Uma célula ou <td> deve estarsempre dentro de uma linha ou <tr>, que por sua vez, deve ser descrita dentro de uma tabela ou <table>.Podemos ter quantas linhas(<tr>) e quantas células(<td>) quanto desejarmos.

Podemos ainda ter tabelas dentro de outras tabelas, o que chamamos de aninhamento de tabelas, assim comofazemos com as outras tags. Mas esta etapa será visualizada nos tópicos seguintes, quando estivermos mais avontade na criação de tabelas.

Vejam o exemplo abaixo. Nele iremos construir uma tabela simples, apenas para exercitar a sintaxe. Estatabela terá apenas um célula, conseqüentemente, uma linha e uma coluna.

<HTML> <HEAD> <TITLE>Trabalhando com tabelas!!!</TITLE> </HEAD> <BODY bgcolor="#FFFFCC"> <table border="1"> <tr> <td>O conteúdo vem aqui!!!</td> </tr> </table></BODY></HTML>

6 Tabelas 25

Notem que usamos a propriedade border com valor 1. Esse valor representa a espessura da borda da tabela. Seutilizarmos o valor 0, estamos omitindo a borda, senda esta sua declaração padrão.

6.4 Adicionando conteúdo a uma célula da tabela

Vamos agora alterar o exemplo e incluir novas células e mais conteúdo.

<HTML> <HEAD> <TITLE>Trabalhando com tabelas!!!</TITLE> </HEAD> <BODY bgcolor="#FFFFCC"> <table border="1"> <b>Campeonato de F1</b><br><br> <tr> <td><b>Classificação Final</b></td> </tr> <tr> <td>1º − Ayrton Senna</td> </tr> <tr> <td>2º − Nigel Mansell</td> </tr> <tr> <td>3º − Alain Prost</td> </tr> </table></BODY></HTML>

Agora temos várias linhas na nossa tabela e uma célula por linha. Em cada célula temos um conteúdo.Tentamos dar um aspecto de título na primeira célula, por isso usamos a tag de negrito para dar esse realce.Queremos mostrar que o aninhamento de outras tags dentro da tabela é permitido e muito útil.

Mas podemos economizar algum código se utilizarmos tags específicas para título da tabela e título dascolunas. Substituam no exemplo anterior conforme o código abaixo.

<HTML> <HEAD> <TITLE>Trabalhando com tabelas!!!</TITLE> </HEAD> <BODY bgcolor="#FFFFCC"> <table border="1"> <caption>Campeonato de F1</caption> <tr> <th>Classificação Final</th> </tr> <tr> <td>1º − Ayrton Senna</td> </tr> <tr> <td>2º − Nigel Mansell</td> </tr> <tr> <td>3º − Alain Prost</td> </tr> </table></BODY></HTML>

A tag <caption> exibe o título da tabela. E onde quisermos utilizar títulos para as colunas, trocamos o <td>pelo <th>.

$LOGOIMAGE 6 Tabelas

6.4 Adicionando conteúdo a uma célula da tabela 26

6.5 Exibindo e definindo propriedades da tabela

Mas as funcionalidades das tabelas são muitas, observem as propriedades das tabelas:

border � determina uma borda na tabela em pixels. Caso esse atributo não apareça, a tabela não terábordas.

•

width � especifica a largura da tabela. Pode ser expressa em pixels ou em porcentagem, em relação aonde a tabela está contida.

•

height � define a altura da tabela, também podendo utilizar pixels e porcentagem como medidas.• cellpading � com esta propriedade, dizemos qual a distância entre as bordas da célula e o conteúdodevem ficar.

•

cellspacing � o cellspacing define qual a distância entre cada uma das células da tabela.• align − define o alinhamento horizontal da tabela. Pode ser à esquerda, left, centralizado, center, ealinhada à direita, right.

•

valign � controla como será o alinhamento vertical da tabela em relação à página web. Pode ser noalto, top, no centro, middle ou no final, bottom.

•

bgcolor � a propriedade bgcolor, configura a cor de fundo da tabela, de preferência utilizando ocódigo hexadecimal de cores.

•

bordercolor � aqui temos a cor da borda da tabela, seguindo a mesma declaração das cores de fundo.• background � se quisermos inserir uma imagem como fundo da tabela, então devemos utilizar estapropriedade.

•

rules � finalmente, podemos especificar se queremos mostrar as bordas internas das linhas ou dascolunas, ou se ambas ou nenhuma.

•

Para mostrarmos todas as bordas internas, utilizamos o valor all. Se não quisermos exibir nenhuma bordainterna, o valor a ser fixado é o none. Para mostrarmos apenas as linhas, declaramos o atributo rules comorows. E se quisermos apenas as linhas das colunas, utilizamos cols.Escrevam o código do exemplo abaixo evisualizem no navegador.

<HTML> <HEAD> <TITLE>Trabalhando com tabelas!!!</TITLE> </HEAD> <BODY bgcolor="#FFFFCC"> <table border="1" width="30%" align="center" cellspacing="5" bordercolor="#000000" rules="rows"> <caption>BOLETIM ESCOLAR</caption> <tr> <th>Alunos</th> <th>Notas</th> </tr> <tr> <td>Fulano</td> <td>9.5</td> </tr> <tr> <td>Cicrano</td> <td>5.7</td> </tr> <tr> <td>Beltrano</td> <td>7.8</td> </tr> </table></BODY></HTML>

Observem agora que temos duas células por linha, embora o atributo rules não permita a visualização dasbordas internas das colunas.


6.5 Exibindo e definindo propriedades da tabela 27

6.6 Exibindo e definindo propriedades de célula, linha ecoluna

Assim como a tabela, as linhas e as colunas(células) também possuem muitas propriedades. Observem aspropriedades das células(<td>):

align � alinha o conteúdo dentro da célula(center, right e left).• valign � alinha verticalmente o conteúdo dentro da célula(top, middle e bottom).• bgcolor � define a cor de fundo da célula.• background � determina uma imagem como background da célula.• nowrap � esta propriedade faz com que não haja quebra de linha dentro da célula.• width � define a largura da célula, podendo ser expressa em pixels ou porcentagem.• height � define a altura da célula, seguindo as mesmas características da propriedade anterior.• colspan � define quantas colunas uma célula poderá abranger, este atributo será melhor explorado nodecorrer do capítulo.

•

rowspan � define quantas linhas uma célula poderá abranger, este atributo será melhor explorado nodecorrer do capítulo.

•

Agora observem as propriedades das linhas(<tr>):

align � alinha o conteúdo dentro da linha(center, right e left).• valign � alinha verticalmente o conteúdo dentro da linha (top, middle e bottom).• bgcolor � define a cor de fundo da linha.•

Agora vamos aplicar algumas destas propriedades no exemplo anterior.

<HTML> <HEAD> <TITLE>Trabalhando com tabelas!!!</TITLE> </HEAD> <BODY bgcolor="#FFFFCC"> <table border="1" width="30%" align="center" cellspacing="5" bordercolor="#000000" rules="rows"> <caption>BOLETIM ESCOLAR</caption> <tr> <th>Alunos</th> <th>Notas</th> </tr> <tr> <td>Fulano</td> <td align="center" bgcolor="#0099FF">9.5</td> </tr> <tr> <td>Cicrano</td> <td align="center" bgcolor="#CC3333">5.7</td> </tr> <tr> <td>Beltrano</td> <td align="center" bgcolor="#0099FF">7.8</td> </tr> </table></BODY></HTML>

6.7 Redimensionando tabelas

O redimensionamento de tabelas exige que o programador já possua uma certa prática ou tenha dominado oque foi explicado desde o início do capítulo.


6.6 Exibindo e definindo propriedades de célula, linha e coluna 28

Contudo não é uma tarefa difícil, basta que façamos passo a passo para não haver uma anomalia na tabela.

Imaginem uma tabela com duas linhas e duas células, como na figura abaixo:

Vejam o código para esta tabela:

<HTML> <HEAD> <TITLE>Trabalhando com tabelas!!!</TITLE> </HEAD> <BODY> <table border="1" width="10%" align="center"> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table> </BODY></HTML>

Como nossa tabela possui duas linhas e duas células, temos obrigatoriamente que ter duas tags <td>, células,para cada tag <tr>, linhas, que serão duas ao final.

A tag , que define um espaço visual, dentro de cada célula, representa um preenchimento imagináriopara a célula, não possuindo nenhum efeito, podendo inclusive, ser omitida do código. Foi colocada apenaspor questão de didática.

Agora, queremos que nossa tabela tenha mais um célula por linha, conforme a nova figura:

Para obtermos esta nova tabela, precisamos inserir uma nova coluna. Essa nova coluna, assim como as outrasé possuidora de duas células, uma por linha. Então, basta acrescentarmos um novo <td> (célula), em cada umdos <tr> (linha), que possuimos.

Vamos ver como ficará o nosso código:

<HTML> <HEAD> <TITLE>Trabalhando com tabelas!!!</TITLE> </HEAD> <BODY> <table border="1" width="10%" align="center"> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td>


6.6 Exibindo e definindo propriedades de célula, linha e coluna 29

</tr> </table> </BODY></HTML>

Agora que aprendemos a inserir uma nova coluna, então vamos aprender a inserir uma nova linha. Comosabemos, as linhas da nossa tabela, possuem três células cada. Para obtermos uma tabela com três linhas e trêscolunas, partindo do exemplo anterior, basta acrescentarmos um novo <tr> (linha), e dentro dele, inserirmostrês <td>, que representa o número de células que vamos precisar.

A tabela que vamos criar tem o seguinte aspecto:

Para finalizarmos este tópico, vamos dar um pouco de vida à nossa tabela, definindo a propriedade bgcolor decada célula com uma cor diferente. O fica a critério do leitor a escolha dessas cores, porém, vamos utilizaralgumas, para que o resultado final seja obtido corretamente. Então, mãos à obra.

<HTML> <HEAD> <TITLE>Trabalhando com tabelas!!!</TITLE> </HEAD> <BODY> <table border="1" width="10%" align="center"> <tr> <td bgcolor="#FF0000"> </td> <td bgcolor="#000000"> </td> <td bgcolor="#00FF33"> </td> </tr> <tr> <td bgcolor="#FF6600"> </td> <td> </td> <td bgcolor="#3333FF"> </td> </tr> <tr> <td bgcolor="#FF99CC"> </td> <td bgcolor="#990066"> </td> <td bgcolor="#FFFF00"> </td> </tr> </table> </BODY></HTML>

6.8 Mesclando células

Para aqueles que já utilizaram alguma planilha eletrônica, já precisaram alguma vez promover a junção deduas ou mais células e transformá−las em apenas uma. Essa junção de células em apenas uma chama−semesclagem de células.

A mesclagem de células pode acontecer de duas formas:

por colunas � a mesclagem por colunas acontece quando as células que queremos mesclar sãocolunas de uma mesma linha. Neste caso, utlizaremos a propriedade colspan indicando quantascélulas serão mescladas.

•

por linhas � a mesclagem por linhas deverá ser usada quando quisermos unir células que ocupamvárias linhas. Para mesclarmos as células de várias linhas, definimos a propriedade rowspan com onúmero de células desejadas.

•


6.8 Mesclando células 30

Seguindo a linha de raciocínio do redimensionamento de tabelas, vamos trabalhar a mesclagem de célulaspasso a passo.

Em princípio, criaremos uma tabela com três linhas e três colunas. Podemos utilizar o exemplo anterior, masantes removam as propriedades de cor de fundo de cada célula, apenas para melhorar a visualização.

Alterem também a propriedade width para 30%. O resultado deve se parecer com isto:

Primeiramente vamos mesclar as três primeiras células da linha 1, onde iremos colocar um texto qualquer que,ao final do exemplo, ocupará toda a linha conforme a figura abaixo:

células mescladas

Agora observem o código que produziu esta tabela.

<HTML> <HEAD> <TITLE>Trabalhando com tabelas!!!</TITLE> </HEAD> <BODY> <table border="1" width="30%" align="center"> <tr> <td colspan="3" align="center"> células mescladas </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table> </BODY></HTML>

Vamos acompanhar o raciocínio. Queríamos mesclar as três células da primeira linha, tornando−a apenas umacélula única. Então definimos a propriedade colspan da primeira célula com o valor 3, que representa onúmero de células que serão mescladas.

Ao fazermos isso, nossa linha conterá apenas uma célula e não precisaremos mais escrever o código para asoutras duas que existiam antes.

As outras linhas continuam com três células cada uma, ou seja, três <td> para cada <tr>.

Agora queremos mesclar duas células da 2ª e 3ª linhas, produzindo a seguinte saída:

3 células


6.8 Mesclando células 31

2células

A primeira linha não será modificada. As 2ª e 3ª células das 2ª e 3ª linhas também não serão alteradas. Apenasa 1ª célula da 2ª linha será mesclada com a 1ª célula da 3ª linha, que deixará de existir, tornando−se uma únicacélula. Vamos ao código:

<HTML> <HEAD> <TITLE>Trabalhando com tabelas!!!</TITLE> </HEAD> <BODY> <table border="1" width="30%" align="center"> <tr> <td colspan="3" align="center">3 células</td> </tr> <tr> <td rowspan="2" align="center">2 células</td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table> </BODY></HTML>


− Escrevam um código que deverá produzir aproximadamente, a seguinte tabela:

6.10 Aninhando tabelas

O aninhamento de tabelas consiste em inserir uma tabela dentro de outra tabela. Sabemos que devemosarmazenar o conteúdo da nossa tabela dentro das células, que são representadas pela tag <td>.

Portanto, se o objetivo é colocar uma nova tabela dentro de outra tabela, essa nova tabela deve também estardentro de uma célula. Observem a seguinte imagem:

Agora, o código:

<HTML> <HEAD>



<TITLE>Trabalhando com tabelas!!!</TITLE> </HEAD> <BODY> <table border="1" width="40%" align="center" cellpadding="10"> <tr> <td align="center" width="50%" bgcolor="#FFFFCC"> <table border="1" width="75%" bgcolor="#99FFFF"> <tr><td> </td></tr> <tr><td> </td></tr> <tr><td> </td></tr> </table> </td> <td width="50%"> A cor de fundo da tabela interna sobrepõe a cor de fundo da tabela principal </td> </tr> </table> </BODY></HTML>

6.11 Utilizando tabelas para trabalhar com imagensfatiadas

Um recurso muito utilizado hoje é o fatiamento de imagens para auxiliar no carregamento da página. Se existeuma imagem muito grande dentro da página, divide−se essa imagem em pedaços menores, que serãocarregados mais rapidamente, dando a impressão de que a página não é tão pesada.

Após esse fatiamento, utilizamos as tabelas para juntar a imagem novamente para que ela tenha a aparêncianormal.

O detalhe é colocarmos o espaçamento entre as células com valor 0 e depois colocar cada pedaço da imagemdentro de uma célula.

<HTML> <HEAD> <TITLE>Trabalhando com tabelas!!!</TITLE> </HEAD> <BODY> <table border="0" align="center" cellspacing="0"> <tr> <td> <img src="pordosol1.gif"> </td> </tr> <tr> <td> <img src="pordosol2.gif"> </td> </tr> <tr> <td> <img src="pordosol3.gif"> </td> </tr> <tr> <td> <img src="pordosol4.gif"> </td> </tr> </table>


6.11 Utilizando tabelas para trabalhar com imagens fatiadas 33

</BODY></HTML>


6.11 Utilizando tabelas para trabalhar com imagens fatiadas 34

7 Formulários

7.1 Introdução

Para aqueles que desejam prosseguir na programação web, aprendendo posteriormente linguagens de scriptcliente e servidor, devem entender os formulários e suas funcionalidades.

Os formulários são essenciais para que haja uma interação entre o usuário que acessa nossa página. Isso querdizer que os elementos declarados dentro da tag <form>, são a principal fonte de feedback ou entrada dedados da máquina cliente, que serão armazenados no servidor ou enviados por email para o administrador dosite.

7.2 Entendendo o funcionamento dos formulários

Como adiantamos na introdução deste capítulo, a tag <form> é a responsável pela declaração de uso de umformulário dentro de nossa página. Dentro desta tag serão inseridos todos os objetos que farão a interação como usuário.

A tag <form> possui algumas propriedades importantes que devemos entender:

action � esta propriedade define qual programa ou script deverá analisar e processar os dados queserão enviados para o servidor.

•

method � os métodos de envio podem ser dois:get � a diferença básica entre esses dois métodos é o fato de que, ao usarmos o método get,todos os dados a serem enviados serão passados diretamente na URL. Embora ligeiramentecodificados, esses dados são passíveis de entendimento pelo usuário. Caso os dados possuamcerta discrição, torna−se incompatível o seu uso.

♦

post � já o método post, submete os dados de forma oculta, não alterando a URL. Deve serutilizado em casos de autenticação de usuários, consultas de bancos de dados e onde hajatráfego de informações que não devem se tornar públicas.

♦

•

enctype � com esta propriedade informamos qual é o tipo de mídia ou dado que está transitando pelosnossos formulários. O tipo mais comum e default é o application/x−www−form−urlencoded,responsável pela transmissão de dados típicos de formulários, ou melhor, pelos valores que esseselementos estão assumindo. Há uma excessão no caso de transmissão de arquivos, como em umupload. Neste caso, o enctype a ser usado é o multipart/form−data. E se os dados forem enviadosdiretamente por e−mail, o valor a ser utilizado é o text/plain.

•

name � é a propriedade que define o nome de acesso ao nosso objeto em questão, o formulário.•

Nos tópicos a seguir, veremos a declaração e uma implementação progressiva do uso de formulários.

7.3 Conhecendo os objetos dos formulários

Os objetos dos formulários são vários e iremos estudá−los um de cada vez. Eles possuirão característicascomuns e talvez funcionalidades comuns, dependendo da forma que serão utilizados. Mas todos eles devemestar declarados dentro das tags <form></form>. Caso algum deles esteja fora dessas tags, eles não serãoenviados ao servidor.

Vejamos agora uma lista de objetos que podemos usar:

7 Formulários 35

text � o objeto text é uma caixa de texto, limitando o tamanho do texto a 255 caracteres ou de acordocom a propriedade maxlength.

•

password � campo texto destinado à inserção de valores de senha. É igual ao objeto text, porém otexto digitado pelo usuário aparece em forma de asteriscos ou marcadores para ocultar a senha.

•

textarea � também permite a entrada de texto, porém de forma livre, sem um limite de caracterespré−estabelecido.

•

hidden � o objeto hidden armazena um determinado valor, pré−estabelecido ou não, de forma ocultaao usuário.

•

checkbox � a checkbox permite que o usuário decida se quer ou não aceitar uma determinada cláusulaestabelecida na página, como receber e−mails de propaganda ou newsletters.

•

radio � os botões de rádio permitem que o usuário escolha apenas uma entre várias alternativasexibidas na página, como por exemplo o campo sexo em um cadastro qualquer. Sabemos que é umaescolha de uma única resposta.

•

select � o objeto select se parece muito com as combo box de outras linguagens de programação. Édado ao usuário uma lista com várias opções e ele pode escolher apenas uma.

•

select multiple � a sintaxe é igual ao objeto select, exceto pela cláusula multiple, que permitirá aousuário selecionar uma ou mais opções, utilizando as teclas shift ou ctrl para a seleção múltipla.

•

image � muitas páginas utilizam imagens como botões. Isso poderia ser feito com o auxílio de umalinguagem de script cliente, como o JavaScript. Porém o HTML fornece o objeto image, que tem amesma funcionalidade.

•

$LOGOIMAGE 7 Formulários

7 Formulários 36

file � o objeto file somente será aproveitável com o auxílio de uma outra linguagem que poderá trataro dado que foi submetido, no caso um arquivo. Este objeto é composto de uma caixa de texto e umbotão, que ao ser clicado abre a árvore de diretórios da máquina do usuário.

•

submit � este é um botão que já vem com uma tarefa específica: enviar todos os dados para oprograma ou script que irá tratar esses dados, que foi definido na propriedade action da tag <form>.

•

reset � este também é um botão com tarefa pré−definida: limpar os valores de todos os objetosincluídos no formulário.

•

button � este último botão não tem atividade pré−programada. A programação dele depende de outralinguagem de script, como o JavaScript. Essa programação dependerá do objetivo desejado, como porexemplo processar uma determinada informação.

•

7.4 Criando um formulário

Para se criar um formulário, basta inserir a tag form com suas respectivas propriedades. Vamos iniciar aqui,uma declaração que será aproveitada até o final do capítulo em todos os exemplos. Vamos trabalhar tambémcom tabelas, para organizarmos nossos objetos e também treinarmos um pouco mais.

<HTML> <HEAD> <TITLE>Trabalhando com formulários!!!</TITLE> </HEAD> <BODY bgcolor="#FFFFCC"> <center>Currículo ON−Line</center><br><br> <form action="" method="get" enctype="multipart/form−data"> </form></BODY></HTML>

Estaremos utilizando a propriedade enctype com valor multipart/form−data apenas para fins didáticos, já quenão faremos nenhum envio de formulário, conforme consta na propriedade action do formulário. Após avisualização deste exemplo, você ainda não poderá ver nada do formulário, porque ainda não declaramosnenhum objeto. Faremos isso nos tópicos seguintes.

7.5 Utilizando os campos do formulário

Conforme o texto inicial da página, iremos montar, ao final de todo o capítulo, um formulário para cadastro decurrículos, porém sem nenhuma funcionalidade. O HTML produz apenas páginas estáticas, que não podeminteragir com o usuário.

Vamos então inserir algumas caixas de texto para obter os dados do usuário, como nome e endereço.

<HTML> <HEAD>


7.4 Criando um formulário 37

<TITLE>Trabalhando com formulários!!!</TITLE> </HEAD> <BODY bgcolor="#FFFFCC"> <center>Currículo ON−Line</center><br><br> <form action="" method="get" enctype="multipart/form−data"> <table width="50%" align="center" border="0"> <tr> <td align="right">Nome:</td> <td> <input type="text" name="nome" size="40" maxlength="50"> </td> </tr> <tr> <td align="right">Endereço:</td> <td> <input type="text" name="ende" size="40" maxlength="100"> </td> </tr> </table> </form></BODY></HTML>

Vamos entender agora a declaração e as propriedades das caixas de texto. As caixas de texto são tags <input>com tipo text:

<input type="text� name=�nome� size=ì0� maxlength=í0�>

type � define o tipo do objeto input, neste caso, uma caixa de texto(text).• name � é o nome pelo qual outras linguagens acessarão o valor deste objeto.• size � define um tamanho para o objeto, baseado em números de caracteres desejados.• maxlength � limita o tamanho do texto, conforme o valor estabelecido.•

O exemplo será alterado agora, para que o usuário possa inserir uma senha de acesso ao seu currículo.Estamos falando do objeto password. O password também é um objeto input, só que com o tipo password.Veja a declaração:

<input type=�password� name=�senha� size=é5� maxlength=î�>

Agora observe como ficará o código:

<HTML> <HEAD> <TITLE>Trabalhando com formulários!!!</TITLE> </HEAD> <BODY bgcolor="#FFFFCC"> <center>Currículo ON−Line</center><br><br> <form action="" method="get" enctype="multipart/form−data"> <table width="50%" align="center" border="0"> <tr> <td align="right">Nome:</td> <td> <input type="text" name="nome" size="40" maxlength="50"> </td> </tr> <tr> <td align="right">Endereço:</td> <td> <input type="text" name="ende" size="40" maxlength="100"> </td> </tr>


7.4 Criando um formulário 38

<tr> <td align="right">Senha:</td> <td> <input type="password" name="senha" size="15" maxlength="6"> </td> </tr> </table> </form></BODY></HTML>

As propriedades de password são as mesmas do objeto text. Todos os objetos tem ainda uma propriedade quecontém o valor do objeto. Nas caixas de texto não é comum usá−la, pois espera−se que o usuário insira algumtexto. Somente em casos particulares seu uso pode ser útil, como por exemplo induzir a entrada com umdeterminado formato.

7.6 Inserindo caixas de seleção e botões de rádio

A funcionalidade que vamos declarar agora é a caixa de seleção ou checkbox. O checkbox é um objeto inputdo tipo checkbox.

Vamos perguntar ao usuário se ele quer que seus dados sejam públicos.

<input type=�checkbox� name=�publicar� value=�sim� checked>

Procurem o final da última linha e acrescentem o novo código:

<HTML> <HEAD> <TITLE>Trabalhando com formulários!!!</TITLE> </HEAD> <BODY bgcolor="#FFFFCC"> <center>Currículo ON−Line</center><br><br> <form action="" method="get" enctype="multipart/form−data"> <table width="50%" align="center" border="0"> . . . <tr> <td align="right"> </td> <td> <input type="checkbox" name="publicar" value="sim" checked> Quero que meu currículo seja público. </td> </tr> </table> </form></BODY></HTML>

Vamos entender as propriedades do objeto checkbox:

type � o tipo do objeto será checkbox.• name � é o nome pelo qual outras linguagens poderão acessar o checkbox.• value � define o valor que será enviado caso o usuário marque a checkbox. Caso não seja declarada, ovalor default será on se estiver marcado.

•

checked � informa que o checkbox inicia já marcado. Caso queira dar essa opção ao usuário, é sóomitir esta cláusula.

•

Perguntaremos o sexo do usuário utilizando o objeto de escolha radio. Sua sintaxe de declaração é a seguinte:


7.6 Inserindo caixas de seleção e botões de rádio 39

<input type=�radio� name=�sexo� value=�Masculino�>

Vejam o código:

<HTML> <HEAD> <TITLE>Trabalhando com formulários!!!</TITLE> </HEAD> <BODY bgcolor="#FFFFCC"> <center>Currículo ON−Line</center><br><br> <form action="" method="get" enctype="multipart/form−data"> <table width="50%" align="center" border="0"> . . . <tr> <td align="right">Sexo:</td> <td> <input type="radio" name="sexo" value="Masculino">Masculino<br> <input type="radio" name="sexo" value="Feminino">Feminino </td> </tr> </table> </form></BODY></HTML>

Vamos entender as propriedades deste objeto:

type � o tipo deste input é radio.• name � é nome pelo qual este objeto será acessado por outras linguagens de programação. No caso deobjetos radio, que podem ser vários, todos aqueles que pertencerem a um mesmo grupo de informaçãodeverão ter o mesmo nome. Do contrário, mais de uma opção poderá ser selecionada. Não é o quequeremos. Sexo só poderá ser Masculino ou Feminino, nunca os dois.

•

value � valor que será enviado de acordo com a seleção do usuário.• checked � permite definir se uma determinada opção já iniciará com valor checkado ou não. Se estacláusula for declarada, deverá ser feita diretamente na opção preterida. Se não existir em nenhuma dasopções, a opção ficará em branco para o usuário escolher.

•

7.7 Inserindo listas e menus

Agora vamos perguntar ao usuário qual é o seu nível de escolaridade. Esta pergunta também só poderá teruma única resposta. Um objeto que pode nos auxiliar com esta questão é o select. Vamos ver como ficará ocódigo e logo ao final estaremos discutindo sua declaração e propriedades:

<HTML> <HEAD> <TITLE>Trabalhando com formulários!!!</TITLE> </HEAD> <BODY bgcolor="#FFFFCC"> <center>Currículo ON−Line</center><br><br> <form action="" method="get" enctype="multipart/form−data"> <table width="50%" align="center" border="0"> . . . <tr> <td align="right">Escolaridade:</td> <td>


7.7 Inserindo listas e menus 40

<select name="escolaridade"> <option value="sup">Superior</option> <option value="2">2º Grau</option> <option value="1">1º Grau</option> </select> </td> </tr> </table> </form></BODY></HTML>

Vamos entender a declaração deste objeto. Cada opção que o usuário terá deverá estar dentro das tags<select></select>. Estamos falando das tags

name � é o nome pelo qual este objeto será acessado por outras linguagens de programação.• value � como termos várias opções para o usuário, é conveniente que cada uma delas tenha um valordiferente. Após a submissão deste formulário teremos um objeto select com apenas um valor, aqueleque foi selecionado pelo usuário.

•

Queremos que o usuário também informe quais as tecnologias que ele domina. Como podem ser várias,precisamos de um objeto que possa permitir a seleção de uma ou mais opções. Este objeto é o mesmo selectvisto no exemplo anterior, mas agora, com uma cláusula multiple, que habilitará este objeto para que sejapossível um seleção múltipla com auxílio das teclas shift e ctrl.

Vejam o código e no final a explicação da declaração e propriedades deste objeto:

<HTML> <HEAD> <TITLE>Trabalhando com formulários!!!</TITLE> </HEAD> <BODY bgcolor="#FFFFCC"> <center>Currículo ON−Line</center><br><br> <form action="" method="get" enctype="multipart/form−data"> <table width="50%" align="center" border="0"> . . . <tr> <td align="right">Tecnologia:</td> <td> <select name="tecnologias" multiple size="3"> <option value="php">PHP</option> <option value="html">HTML</option> <option value="js">Javascript</option> <option value="java">Java</option> </select> </td> </tr> </table> </form></BODY></HTML>

Como vimos, a declaração é exatamente igual ao objeto select, exceto pela cláusula multiple. Vejamos quepropriedades este objeto possui:

name � nome pelo qual outros linguagens de programação poderão acessar este objeto.• size � define quantas opções serão mostradas ao usuário sem criar barras de rolagem no objeto. Casoo número de opções seja superior ao informado, uma barra de rolagem é automaticamente inserida.

•

value � são os valores que serão transmitidos após a submissão. Como podem ser vários, este objeto•


7.7 Inserindo listas e menus 41

será interpretado como um array no script que irá processar este formulário. Isso será melhorentendido em um curso de JavaScript ou PHP.multiple � permite que seja selecionados várias opções ao mesmo tempo.•

7.8 Adicionando botões de formulário

O formulário terá que ter botões para que ele possa ser enviado e dar a opção ao usuário para limpar oscampos caso deseje reiniciar o preenchimento.

Vamos começar com o botão de submissão. O input de tipo submit, é o responsável pelo envio dos dados parao script ou programa de processamento. Observe a sintaxe:

<input type=�submit� name=�enviar� value=�Enviar�>

Veja como ficará no exemplo:

<HTML> <HEAD> <TITLE>Trabalhando com formulários!!!</TITLE> </HEAD> <BODY bgcolor="#FFFFCC"> <center>Currículo ON−Line</center><br><br> <form action="" method="get" enctype="multipart/form−data"> <table width="50%" align="center" border="0"> . . . <tr> <td align="center" colspan="2"> <input type="submit" name="enviar" value="Enviar"> </td> </tr> </table> </form></BODY></HTML>

Vamos entender as propriedades do botão submit:

type � é o tipo deste input, que é submit, ou seja, um botão que tem a função de submeter oformulário.

•

name � nome pelo qual este objeto será acessado por outras linguagens de programação.• value � é o valor que será exibido no botão para informar ao usuário, qual a função do mesmo.•

Aproveitaremos o código acima para adicionar um botão que tem a tarefa de limpar todos os campos queestão declarados dentro das tags form></form>.

Escrevam na mesma célula do botão submit.

<HTML> <HEAD> <TITLE>Trabalhando com formulários!!!</TITLE> </HEAD> <BODY bgcolor="#FFFFCC"> <center>Currículo ON−Line</center><br><br> <form action="" method="get" enctype="multipart/form−data"> <table width="50%" align="center" border="0"> . . .


7.8 Adicionando botões de formulário 42

<tr> <td align="center" colspan="2"> <input type="submit" name="enviar" value="Enviar"> <input type="reset" name="limpar" value="Limpar"> </td> </tr> </table> </form></BODY></HTML>

As propriedades para o botão reset são as mesmas do botão submit. Apenas o tipo de input é diferente: como afunção deste botão é limpar o conteúdo dos campos do formulário, então seu tipo é reset.

Não vamos inserir um input do tipo button, porque não teríamos funcionalidade para ele, uma vez que nãopossuímos conhecimento para acrescentar−lhe uma funcionalidade. Suas propriedades também são idênticasaos botões submit e reset, apenas seu tipo será button. Vejamos apenas sua sintaxe de declaração:

<input type=�button� name=�processar� value=�Processar�>

7.9 Inserindo um objeto image

O objeto image pode ser visto como uma interface mais amigável de um botão. Este objeto tem a funçãodefault igual ao botão submit, ou seja, ao ser clicado, enviará o formulário conforme a propriedade action doformulário.

Como já utilizamos botões no exemplo acima, vamos entender apenas a sintaxe de declaração e aspropriedades deste objeto:

<input type=�image� src=�enviar.gif� name=�enviar� border=è�>

Observe agora uma explicação sobre essas propriedades:

type � este é um input do tipo image.• src � define o nome e o caminho da imagem a ser utilizada como botão.• name � nome de acesso para outras linguagens.• border � define se o botão terá ou não borda.• width � como o objeto em questão é uma imagem, podemos manipular seu comprimento através destapropriedade.

•

height � o valor aqui estabelecido definirá a altura do objeto.•

7.10 Adicionando o objeto file

Com este objeto podemos dar a opção do usuário selecionar um arquivo de seu computador e enviá−lo para oservidor, desde que haja um programa ou script de processamento para este formulário.

Como ainda não aprendemos a processar os valores recebidos do usuário, trabalharemos apenas com adeclaração e propriedades deste formulário:

<input type=�file� name=�arquivo�>

Este é um input de tipo file. A propriedade name permitirá que o programa ou script que irá receber estearquivo saiba qual objeto está acessando. Entretanto, a propriedade mais importante, o value, só será definidaquando o usuário selecionar um arquivo para enviá−lo.


7.9 Inserindo um objeto image 43

Como vimos em todo o capítulo, os formulários são a principal fonte de interação entre nossas páginas e ousuário. Embora este formulário de currículo não seja processado, a sua codificação foi muito importante paraentendermos cada objeto de formulário e sabermos onde usar cada um deles.

O entendimento deste capítulo será de fundamental importância quando vocês estiverem aprendendo aslinguagens de script que tanto falamos.


7.9 Inserindo um objeto image 44

8 Frames

8.1 Introdução

A navegação na Internet ficou muito mais fácil de usar após o advento dos frames ou molduras. O fato dedeterminadas partes da página poderem ter seu conteúdo atualizado sem que toda a página o tenha sido,mudou a maneira de se utilizarem menus, apressou a navegação e melhorou a organização do site. Podemosagora estabelecer regiões do nosso site que poderão ou não serem recarregadas com um novo conteúdo, semafetar todo o resto.

8.2 O que são frames

Pensem em uma página e depois a dividam em várias partes como se fosse uma tabela. Cada célula destatabela seria uma nova página com todas as características que aprendemos. O único detalhe é que cada umadessas páginas seriam gerenciadas pela página �mãe�, assim como as células são gerenciadas pela tabela.

Observem a página a seguir:

A página acima na verdade é composta por outras duas páginas que representam efetivamente o conteúdo. Apágina principal é chamada de frameset.

O frameset é quem define o formato das molduras e quais páginas serão carregadas em cada uma delas.Quando usamos frames, omitimos a tag <body> do código, uma vez que o frameset não tem conteúdo e simsuas páginas internas.

8.3 Decidindo se as molduras devem ser usadas

Conforme foi explicado acima, as molduras trouxeram muitas vantagens e algum desconforto para osWebDesigners, que se incomodam com algumas barras de rolagem que acabam aparecendo no meio daspáginas.

8 Frames 45

De fato, causam uma certa poluição visual. Eis a questão: usar ou não usar frames?

Hoje observamos algumas tendências no desenvolvimento de sites. Muitos sites preferem chamar váriaspáginas independentes, carregando novamente cada parte da página que poderia estar fixa no layout. Isso podeser ligeiramente mais lento, mas sua interferência fica próxima da nulidade. Porém, há casos em que não hácomo fugir das molduras. Alguns sites, têm como única solução o seu uso.

De forma alguma, estamos desmerecendo esta funcionalidade. Existem várias formas de se contornar as barrasde rolagem. Com o uso de folhas de estilo, por exemplo, pode−se dar novas formas e cores às barras derolagem, suavizando o seu aparecimento.

Queremos dar todas as possibilidades para que você possa estar escolhendo a melhor hora e o melhor layoutpara o seu site.

8.4 Criando páginas da web com molduras

A sintaxe de declaração de um frameset é a seguinte. Estaremos declarando sua forma mais simples, parainiciar os estudos:

<HTML> <HEAD> <TITLE>Trabalhando com frames!!!</TITLE> </HEAD> <FRAMESET cols="20%, *"> <frame src="pag1.htm" name="pagina1"> <frame src="pag2.htm" name="pagina2"> </FRAMESET></HTML>

Com a declaração <frameset> estamos informando o uso das molduras. A propriedade cols da forma como foideclarada, indica que serão duas molduras verticais ocupando a página. A primeira moldura será carregadacom a página pag1.htm e ocupará 20% do frameset. A segunda moldura será carregada com a páginapag2.htm e ocupará todo o resto do frameset, conforme a declaração do asterisco(*).

A tag <frame> se refere a cada uma das páginas que foram estabelecidas no frameset. O parâmetro src deveser preenchido com o nome da página que se deseja carregar, juntamente com o caminho completo, caso estapágina não se encontre no mesmo diretório do frameset. A propriedade name, será o nome com que cadaframe será referenciado através de links e outras linguagens que venham acessar esta página.

Vejamos agora as propriedades do <frameset>:

rows � define se teremos a página dividida em linhas. O seu valor pode ser declarado em pixels ouporcentagem e devem ser separados por vírgula.

•

cols � semelhante ao rows, porém divide a página em colunas.• frameborder � define se o frameset terá ou não bordas, caracterizando as divisões da página. Podeconter os valores: "yes" ou "no".

•

border � o valor aqui atribuído mostrará a espessura da borda.• bordercolor � aqui especificamos a cor que a borda deverá assumir, de preferência utilizando coresno formato hexadecimal.

•

Os frames, por sua vez possuem algumas outras propriedades:

src � é o nome da página que será carregada.• name � nome pelo qual os links poderão localizar seu destino dentro do frameset.• scrolling � define se haverá ou não barras de rolagem, caso o conteúdo ultrapasse o tamanho dajanela. Pode ter como valores: "yes", "no" ou "auto".

•

$LOGOIMAGE 8 Frames

8.4 Criando páginas da web com molduras 46

noresize � define se as molduras poderão ou não ser redimensionadas pelo usuário.• marginwidth � define a margem entre as laterais do frame e seu conteúdo.• marginheigth � da mesma forma que marginwidth, este atributo define uma distância de margem,que neste caso é a margem superior e inferior do frame.

•

Agora, visualizem o resultado no navegador.

Surpresa! Duas páginas não puderam ser localizadas. É preciso criar os arquivos mencionados: pag1.htm epag2.htm. Então, crie−os sem código algum, apenas para o navegador poder chamar o frameset corretamente.Executem novamente e observem o resultado.

Agora sim temos três páginas carregadas. O frameset que gerencia os frames, que são cada uma das páginasque estamos vendo.

8.5 Redimensionando molduras em um conjunto demolduras

Vamos trabalhar com outros exemplos de molduras. Dividiremos a página em dois frames horizontais.

<HTML> <HEAD> <TITLE>Trabalhando com frames!!!</TITLE> </HEAD> <FRAMESET rows="20%, *"> <frame src="pag1.htm" name="pagina1"> <frame src="pag2.htm" name="pagina2"> </FRAMESET></HTML>

Será que podemos utilizar linhas e colunas para moldar nossa página? A resposta é afirmativa, bastacombinarmos as propriedades cols e rows como no exemplo abaixo:

<HTML> <HEAD> <TITLE>Trabalhando com frames!!!</TITLE> </HEAD> <FRAMESET rows="20%, *"> <frame src="pag1.htm" name="pagina1"> <FRAMESET cols="20%,*"> <frame src="pag2.htm" name="pagina2"> <frame src="pag3.htm" name="pagina3"> </FRAMESET> </FRAMESET></HTML>

O exemplo acima é um exemplo especial. Nele definimos que nossa página será constituída de três frames. Oprimeiro frameset informa que serão duas linhas, ocupando a primeira 20%, e a segunda, todo o resto dapágina. Declaramos o primeiro frame normalmente e logo em seguinda, ao invés de declararmos o segundoframe, dizemos que ele será um novo frameset, agora dividido em duas colunas. A primeira coluna, ocupará20% do segundo frameset e será carregada com a página pag2.htm. A segunda coluna terá todo o resto dosegundo fremeset para carregar a página pag3.htm.

8.6 Editando o conteúdo de uma moldura

Até agora, aprendemos apenas a criar as molduras. Vamos então inserir algum conteúdo para obtermosresultados mais amigáveis. Para evitar que mensagens de páginas não encontradas fossem exibidas, criamosos arquivos de frames sem nenhum código. O ponto chave da inserção de conteúdo, é que este será sempre

$LOGOIMAGE 8 Frames

8.5 Redimensionando molduras em um conjunto de molduras 47

declarado nos frames e nunca no frameset.

Vamos criar aqui três arquivos. Tomaremos o exemplo do primeiro frameset que estudamos:

<HTML> <HEAD> <TITLE>Trabalhando com frames!!!</TITLE> </HEAD> <FRAMESET cols="20%, *" frameborder="yes" border="1"> <frame src="pag1.htm" name="pagina1"> <frame src="pag2.htm" name="pagina2"> </FRAMESET></HTML>

Agora vamos criar o arquivo pag1.htm:

<HTML> <HEAD> <TITLE>Trabalhando com frames!!!</TITLE> </HEAD> <BODY bgcolor="#FFFFCC"> <a href="http://www.globo.com">Globo</a><br><br> <a href="http://www.pop.com.br">POP</a><br> <a href="http://www.bol.com.br">BOL</a><br> <a href="http://www.terra.com.br">Terra</a><br> <a href="http://www.yahoo.com.br">Yahoo</a><br> <a href="http://www.google.com.br">Google</a><br></BODY></HTML>

O código do arquivo pag2.htm

<HTML> <HEAD> <TITLE>Trabalhando com frames!!!</TITLE> </HEAD> <BODY bgcolor="#FFFFCC"> <br><br> <center> <font face="Verdana" color="#0000FF" size="3"> Nos tópicos seguinte aprenderemos como carregar os links ao lado, aqui, neste frame. </font> </center></BODY></HTML>

Visualizem agora no navegador. Lembre−se de abrir o arquivo do frameset. É ele quem se encarregará dechamar os frames internos.

8.7 Controlando o conteúdo de uma moldura com links

Uma das propriedades mais utilizadas quando estamos trabalhando com frames é a name. É com o valordeclarado nesta propriedade, que conseguimos dizer aos links onde queremos que eles sejam carregados.

Aproveitando o exemplo que acabamos de fazer, cliquem nos vários links que criamos. Nenhum deles foicarregado no frame da direita, como queríamos. Precisamos informar isso. O faremos através da propriedadetarget da tag <a>, responsável pela criação dos links.

target � é propriedade da tag <a> que armazena o local de destino da página que foi referenciada. Oseu valor deve ser preenchido com os nomes que demos aos frames na declaração do frameset. Se

•

$LOGOIMAGE 8 Frames

8.7 Controlando o conteúdo de uma moldura com links 48

queremos carregar as páginas no frame da direita, veremos na declaração do frameset qual o seunome.

Alterem o código do arquivo pag1.htm para que os links passem a suportar esta propriedade.

<HTML> <HEAD> <TITLE>Trabalhando com frames!!!</TITLE> </HEAD> <BODY bgcolor="#FFFFCC"> <a href="http://www.globo.com" target="pagina1">Globo</a> <br> <a href="http://www.pop.com.br" target="pagina1">POP</a> <br> <a href="http://www.bol.com.br" target="pagina1">BOL</a> <br> <a href="http://www.terra.com.br" target="pagina1">Terra</a> <br> <a href="http://www.yahoo.com.br" target="pagina1">Yahoo</a> <br> <a href="http://www.google.com" target="pagina1">Google</a> <br></BODY></HTML>

Como queremos carregar todas essas páginas no frame da direita, devemos referenciar seu nome napropriedade target dos links. Agora verifique se realmente essas páginas estão sendo carregadas no seu devidolugar.

Se quisermos que outra janela se abra quando cliquemos, basta inserirmos na propriedade target um nome quenão foi declarado, porém o mais utilizado é escrever �_blank�. Utilizando �_top�, o link será aberto namesma janela dos frames. Por default, se não especificarmos nada, a página será carregada de onde ela foichamada ou seja, se o link estiver na pagina1, ele será aberto na própria pagina1, seria a mesma coisa deatribuirmos o valor �_self� na propriedade target dos links.

8.8 Inserindo frames inline

Os frames inline ou iframes, são frames que não estão dentro de um frameset. Eles são inseridos em qualquerparte de uma página comum, com o tamanho que quisermos.

Observe algumas de suas propriedades:

src � define qual página será carregada no iframe.• name � nome pelo qual podemos referenciar este iframe.• frameborder � especifica se haverá ou não borda no iframe.• scrolling � define se as barras de rolagem deverão existir.• width � é a largura do iframe, definida em pixels ou porcentagem• height � é a altura do iframe, seguindo as mesmas medidas da largura.•

Alterem o arquivo pag2.htm com o seguinte código. No parâmetro src, criem um novo arquivo sem nenhumcódigo..

<HTML> <HEAD> <TITLE>Trabalhando com iframes!!!</TITLE> </HEAD> <BODY bgcolor="#FFFFCC"> <br><br> <center>

$LOGOIMAGE 8 Frames

8.8 Inserindo frames inline 49

Trabalhando com iframes<br><br> <iframe src="exerc.htm" frameborder="1" scrolling="no" width="300" height="300" name="framei"> </iframe> <br><br> Os links abaixo serão carregados no iframe <br><br> <a href="http://www.globo.com" target="framei">Globo</a> <br> <a href="http://www.pop.com.br" target="framei">POP</a> <br> <a href="http://www.bol.com.br" target="framei">BOL</a> <br> <a href="http://www.terra.com.br" target="framei">Terra</a> </center></BODY></HTML>

Observem que agora o target dos links está com o valor do name do iframe.


− Reproduza a seguintes molduras definidas na figura com base no que foi explicado e:

Crie um iframe no frame superior, crie links e os teste• Divida o frame central com frames verticais• Crie e teste diversos links para serem utilizados nos frames criados, inclusive no iframe criado•

$LOGOIMAGE 8 Frames


9 Recursos de Multimídia

9.1 Introdução

A atratividade da Internet se deve em certa parte, pelas inúmeras formas de informações que podem serexpressadas através de recursos multimídia.

Sons ou músicas, vídeos e animações em Flash são amplamente utilizadas para a disseminação de conteúdo narede. Embora seu uso acrescente um certo peso no carregamento das páginas, se feito com simplicidade eadequando−o aos objetivos do site, torna−se uma solução interessante.

Os arquivos de som e vídeo são, geralmente, muito grandes, o que torna demorado o seu carregamento nonavegador do usuário. Por isso é comum em algumas páginas, que esses arquivos não sejam carregadosautomaticamente, e sim, através de um link específico, para que o internauta escolha se quer ou não acessá−lo.

A inserção desses elementos em uma página é relativamente simples e neste capítulo aprenderemos comofaze−la.

9.2 Inserindo áudio

O uso de sons e músicas em uma página é um pouco limitado mas têm−se como padrão dois formatos básicos:as extensões wav e midi são aceitas quando estivermos falando apenas de HTML. Hoje sabemos que o uso deáudio na web não se limita a só isso. Rádios online, mp3 outras tecnologias fazem parte desse universo, masnecessitam de maior conhecimento de outras linguagens para auxiliar nesta tarefa.

O que faremos aqui será apenas a declaração de um elemento que fará o carregamento e o controle deexecução de um arquivo de mídia. A tag para esta tarefa é a <embed>. Ela possui algumas propriedades queiremos entender agora:

src � aqui declaramos o arquivo de mídia, neste caso específico de áudio, que será carregado.• autostart � podemos definir com esta propriedade se o arquivo será executado automaticamente pelapágina logo após o seu carregamento. Em caso afirmativo, declaramos como true o valor destapropriedade, caso contrário, o usuário terá a opção de iniciar a execução quando ele quiser. O valorentão desta propriedade seria false.

•

loop � define quantas vezes a execução da mídia será repetida.• hidden � define se o controle de execução será visível ao usuário. Se for visível, o valor de hiddenserá false, se não for visível, true. Lembre−se de colocar a propriedade autostart como true, casodeseje um controle invisível.

•

width � se o controle for vísivel, podemos definir qual será o tamanho que ele ocupará na tela. Aquidefinimos sua largura, em pixels, de preferência.

•

height � da mesma forma que a propriedade anterior, definimos a altura do controle de execução comesta propriedade.

•

Procurem o arquivo flourish.mid e copiem−no para o seu diretório de trabalho para iniciarmos o exercício aseguir.

<HTML> <HEAD> <TITLE>Trabalhando com áudio!!!</TITLE> </HEAD> <BODY bgcolor="#FFFFCC"> <center> <embed src="flourish.mid" autostart="false" hidden="false" width="300" height="150"> </center>

9 Recursos de Multimídia 51

</BODY></HTML>

No exercício acima definimos um elemento de áudio, que deverá ser inicializado pelo usuário. Observem ostatus false da propriedade autostart. Controles de play, pause, stop e até volume serão exibidos para eledecidir como quer que seja executado, uma vez que a propriedade hidden também está com status false.

Vamos mudar um pouco a declaração de código para obtermos uma execução no momento em que a páginafor carregada. Os controles também não estarão disponíveis para o usuário.

<HTML> <HEAD> <TITLE>Trabalhando com áudio!!!</TITLE> </HEAD> <BODY bgcolor="#FFFFCC"> <center> <embed src="flourish.mid" autostart="true" loop="2" hidden="true"> </center></BODY></HTML>

Agora também definimos que esta mídia será executada duas vezes. Fizemos isso através da propriedade loop.

9.3 Inserindo vídeo

Além do uso de sons pela rede, temos também a possibilidade de assistir vídeos em nossas páginas. Hojetornou−se possível até assistirmos televisão pela web.

O uso de vídeos também tem suas limitações quanto ao formato. Deve−se utilizar formatos que possam serlidos na web. Neste caso o formato padrão é o mpeg. Se forem utilizados formatos como avi e mov, deveráexistir na máquina cliente, programas que possam ler e executar estes arquivos.

A tag para o uso de vídeos pela rede é a mesma que usamos para a inserção de sons: <embed>. Aspropriedades também são idênticas, exceto pelo fato de não podermos atribuir à propriedade hidden o valortrue. Caso façamos isso, estaremos ocultando o controle de execução e conseqüentemente não veríamos asimagens.

Copiem o arquivo clock.avi para a pasta de trabalho que estejam utilizando e escrevam o exercício abaixo:

<HTML> <HEAD> <TITLE>Trabalhando com áudio!!!</TITLE> </HEAD> <BODY bgcolor="#FFFFCC"> <center> <embed src="clock.avi" autostart="true"> </center></BODY></HTML>

Caso as propriedades de tamanho sejam omitidas, prevalecerá o tamanho original do arquivo de vídeo.Cuidado para não definir estas propriedades com tamanho inferior ao original.

9.4 Inserindo animações em Flash

As animações em Flash são a grande onda do momento. Desde animações de apresentação do site até sitescompletos feitos com essa ferramenta.

$LOGOIMAGE 9 Recursos de Multimídia

9.3 Inserindo vídeo 52

De fato, o Flash é muito atrativo, mas caímos novamente no detalhe do peso da página. Assim como sons evídeos, ele pode se tornar uma inconveniência, caso não seja usado corretamente. A sintaxe é idêntica ao usodos elementos multimídia que usamos até o momento.

Copiem o arquivo banner01.swf para o seu diretório de trabalho e codifiquem o exercício abaixo:

<HTML> <HEAD> <TITLE>Trabalhando com áudio!!!</TITLE> </HEAD> <BODY bgcolor="#FFFFCC"> <center> <embed src="banner01.swf" width="458" height="95"> </center></BODY></HTML>

Quando utilizamos flash em nossas páginas, é necessário que o usuário possua instalado em sua máguina oplugin para a execução das animações. É conveniente acrescentar à tag <embed> propriedade que armazenaráo local de download e o solicitará automaticamente caso não seja identificado sua presença na máquinacliente. Esta propriedade é a pluginspage e deve conter a url de donwload do plugin.

Observem a declaração do exercício acima com esta propriedade:

<HTML> <HEAD> <TITLE>Trabalhando com áudio!!!</TITLE> </HEAD> <BODY bgcolor="#FFFFCC"> <center> <embed src="banner01.swf" width="458" height="95" pluginspage="http://www.macromedia.com/shockwave/ download/index.cgi?P1_Prod_Version=ShockwaveFlash"> </center></BODY></HTML>

Tudo isso que acabamos de aprender é muito interessante e com certeza prendem a atenção dos usuários. Masdeve−se analisar a necessidade de uso desses elementos, porque páginas muito pesadas − que demoram a sercarregadas pelo browser − costumam ser dispensadas antes mesmo de terem seu conteúdo completamentevisualizado na tela.

Faça suas páginas com simplicidade e criatividade, procurando utilizar todos os recurso disponíveis desde queeles se encaixem da forma mais correta no objetivo e público alvo do seu site.

$LOGOIMAGE 9 Recursos de Multimídia

9.3 Inserindo vídeo 53

10 CSS − Folhas de Estilo

10.1 Introdução

Neste capítulo estaremos aprendendo a usar CSS. As folhas de estilo ou Cascade Style Sheets são umapré−declaração de possíveis formatações que venhamos precisar no nosso site.

A partir do momento que identificamos como o código deverá se aplicar ao design da página, o uso das folhasde estilo irá tornar extremamente fácil nossa programação.

Imaginem que todos os parágrafos da nossa página utilizem como fonte Verdana e o tamanho dessa fonte seja12 pixels. Imaginem também que temos muitos parágrafos nesta página. Bom, pelo que aprendemos até agora,teríamos que declarar para cada parágrafo uma tag <p> e além disso aplicar a formatação que queremos emcada um deles com a tag <font>. Isso seria um grande trabalho, não?

Agora, imaginem se pudéssemos dizer ao browser que todas as tags <p>, ao serem declaradas, já assumissema formatação desejada?

Seria excelente! As folhas de estilo podem fazer esse trabalho para nós. Assim identificamos uma primeiravantagem no seu uso: precisamos programar menos. E se um determinado momento, acharmos que o tamanhoda fonte está muito pequeno e tenhamos que mudá−lo !

Isso seria muito trabalhoso se nosso código fosse somente HTML. Teríamos que ir em cada tag <font> ealterar o tamanho. Mas lembrem−se que estamos utilizando CSS e declaramos isso apenas uma vez. Entãoprecisamos apenas alterar o estilo que foi estabelecido? Isso mesmo. A manutenção do site se tornará muitomais fácil e rápida de ser feita.

Essas e outras vantagens estaremos aprendendo agora.

10.2 Entendendo as folhas de estilo

As folhas de estilo são declaradas apenas uma vez, e a formatação estabelecida será assumida por todos oselementos em que forem aplicadas.

Possuímos três formas de declaração de estilos:

estilos inline � a declaração que é feita dentro da própria tag HTML é chamada inline. Seu efeitoestará restrito a essa única tag.

•

estilos vinculados ou externos � neste caso, um arquivo contendo toda a formatação das folhas deestilo é criado e podemos chamá−lo de qualquer página do nosso site. Este arquivo deverá terextensão .css e é a declaração mais utilizada, pois centraliza todos os estilos do site.

•

estilos incorporados � os estilos incorporados são declarados no corpo do documento HTML e seuefeito figura apenas na página que foi declarado. Sua declaração é feita dentro do escopo da tag<head>.

•

10.3 Criando estilos

A declaração de estilos possui uma sintaxe básica que deverá ser seguida para cada estilo que queiramosutilizar:

elemento { p1: v1; p2: v2;

10 CSS − Folhas de Estilo 54

. . . pn: vn }

Vamos entender como funciona essa sintaxe:

O elemento é a tag ou objeto HTML no qual o estilo será aplicado. Veremos que esse elemento poderá serainda uma classe que poderá ser aplicada em várias tags ou objetos HTML. P1 e p2 são as propriedades queserão aplicadas no elemento declarado. E v1 e v2, os valores que essas propriedades deverão assumir aoelemento.

Observem a declaração do estilo imaginado na introdução do capítulo. Queremos que todos os parágrafostenham fonte Verdana e tamanho 12px.

p { font−family: Verdana; font−size : 12px; }

No exemplo acima, estamos dizendo que, onde for inserida uma tag <p>, de parágrafo, no nosso código, eladeverá assumir a formatação especificada na declaração do CSS, que é fonte Verdana e tamanho 12px.

Voltando ainda na imaginação do exemplo, achamos que esta fonte precisar ser um pouco maior. Vejam quesimples. Se esse estilo será assumido por todos os parágrafos, basta que eu altere sua declaração, inclusiveacrescentar novos efeitos:

p { font−family: Verdana; font−size : 16px; color : #0000FF; }

10.4 Estilos incorporados

Os estilos incorporados são declarados dentro das tags de cabeçalho ou <head>. Isso significa que todo ocódigo terá acesso às formatações ali especificadas.

Precisamos ainda informar que iremos utilizar CSS dentro das páginas. Faremos isso através da tag <style>.

Vamos à prática. Seguindo nosso primeiro exemplo, codifique o exercício abaixo e visualizem o resultado nonavegador.

<HTML> <HEAD> <TITLE>Trabalhando com CSS!!!</TITLE> <style type="text/css">

p { font−family: Verdana; font−size : 16px; color : #0000FF; }

</style> </HEAD> <BODY bgcolor="#FFFFCC"> <p> Estes parágrafos estão pré−formatados de acordo com

$LOGOIMAGE 10 CSS − Folhas de Estilo

10.4 Estilos incorporados 55

as regras de estilo definidas no cabeçalho da página. Todos os parágrafos possuirão essa mesma formatação. </p> <p> As <b>folhas de estilo</b> permitem uma codificação mais organizada, o que reflete no <b>tempo de programação</b> e <b>manutenção do site</b>, economizando tempo nestas tarefas. </p></BODY></HTML>

Observem no navegador que os nossos parágrafos estão com a cor azul, fonte e tamanhos diferentes dopadrão, sem sequer termos inserido nenhuma tag <font>. Tudo isso foi definido através do CSS no cabeçalhoda página.

No exercício, existem também três expressões em negrito, mas esteticamente, não ficaram muito bemdestacadas.

Vamos inserir um novo estilo para que onde houver uma tag de negrito, o texto assuma a cor vermelha, semperder é claro, a formatação do estilo de parágrafo.


p { font−family : Verdana; font−size : 16px; color : #0000FF; } b { color : #FF0000 }

</style> </HEAD> <BODY bgcolor="#FFFFCC"> <p> Estes parágrafos estão pré−formatados de acordo com as regras de estilo definidas no cabeçalho da página. Todos os parágrafos possuirão essa mesma formatação. </p> <p> As <b>folhas de estilo</b> permitem uma codificação mais organizada, o que reflete no <b>tempo de programação</b> e <b>manutenção do site</b>, economizando tempo nestas tarefas. </p></BODY></HTML>

10.5 Estilos inline

Os estilos inline são declarados na própria tag que se deseje alterar. Talvez seja o tipo de declaração menosutilizada pelo fato de não poder ser reaproveitada no decorrer do código.

Observem o código abaixo:

<HTML> <HEAD>


10.5 Estilos inline 56

<TITLE>Trabalhando com CSS!!!</TITLE> </HEAD> <BODY> <center> <img src="logosa.gif" style="cursor: hand"> </center> </BODY></HTML>

A declaração dos estilos inline, como vimos, deve estar dentro da tag. No exemplo acima, mudamos o cursordo mouse (seta) com o valor hand para que quando o mouse passe em cima da imagem, seja substituido pelocursor de link (imagem da mãozinha).

Observem a declaração do estilo inline. Deve ser feita com se fosse uma propriedade da tag, mas sempreseguindo a sintaxe padrão de declaração de estilos: propriedade e valor.

10.6 Estilos vinculados

Estilos vinculados existem em um arquivo com extensão .css e não necessitam da tag <style> na suadeclaração.

Simplesmente colocamos os estilos no código e chamamos este arquivo da página que precisará dele.

Vamos criar um arquivo com o nome estilo.css e acrescentar alguns estilos. Digitem exatamente como estáabaixo:

td { background−color: #FFFFCC; } input { border : 2px solid #0000FF; font−family : Verdana; font−size : 9px; color : #000099; }

O código acima define os estilos que iremos utilizar em nossa página.

O primeiro estilo, diz que, onde houver uma célula de uma tabela, ela deverá ter a cor de background com ovalor #FFFFCC. Já o estilo da tag input, diz que qualquer input, neste caso, é preferível uma caixa de texto,terá borda de 2 pixels com o formato solid e cor #0000FF. O texto digitado dentro desta caixa de texto serácom a fonte Verdana, tamanho 9 pixels e cor #000099.

Para fazermos uma chamada a este arquivo de estilos, devemos declarar da seguinte forma:

<link rel=�stylesheet� href=�estilo.css�>

Essa declaração deve ser feita dentro da tag <head>.


− Dado o código:

<HTML> <HEAD> <TITLE>Trabalhando com CSS!!!</TITLE> <link rel="stylesheet" href="estilo.css" type="text/css"> </HEAD>


10.6 Estilos vinculados 57

<BODY> <table align="center" border="0" width="40%"> <tr> <td align="right">Nome:</td> <td> <input type="text" size="50" name="nome"> </td> </tr> </table> </BODY></HTML>

Acrescente novas linhas à tabela e também outras caixas de texto, para certificar que o estilo estejasendo aplicado corretamente em todos os elementos.

•

10.8 Tags personalizadas

Até o momento, estivemos trabalhando com as tags originais da linguagem HTML. O uso de CSS tambémnos permite criar tags personalizadas.

Existem algumas variações de declaração para o uso dessas tags pessoais. Podemos criar vários estilos parauma mesma tag HTML. Isso é muito útil quando utilizamos um único arquivo de estilos para todo o site.Temos os estilos que são padrão a todas as páginas e outros estilos que podem ser aplicados apenas emalgumas, porém eles estão se referindo a uma mesma estrutura do HTML.

Para iniciarmos nossos trabalhos, precisamos entender como esses estilos serão aplicados nos elementos, seexistem vários estilos para um único elemento.

Primeiramente, devemos informar que a aplicação dos estilos está baseada no conceito de classes. Uma classefuncionará como um atributo da tag que desejamos alterar com as configurações de CSS.

Esse atributo é o class. O valor que lhe será atribuído será o nome da classe declarada. No exercício a seguir,estaremos utilizando vários links com um determinado estilo. Logo em seguida, criaremos uma variação doestilo utilizado e o atribuíremos somente em alguns dos links existentes.

Observem: teremos dois estilos diferentes, aplicados em em um mesmo elemento HTML, ao mesmo tempo.


a { font−family : Verdana; font−size : 12px; color : #0000FF; text−decoration : none; } a.links { font−family : Verdana; font−size : 12px; color : #FF0000; − text−decoration : none; } p { text−align : center; }

</style> </HEAD>


10.8 Tags personalizadas 58

<BODY bgcolor="#FFFFCC"> <p> <a href="http://www.globo.com">Globo</a> </p> <p> <a href="http://www.terra.com.br">Terra</a> </p> <p> <a href="http://www.uol.com.br">Uol</a> </p></BODY></HTML>

A declaração de uma classe, neste caso, deve ser feita com o nome da tag que se deseja aplicar o estilo,seguida de um ponto �.� e o nome da class, que é definido pelo programador. No exemplo acima, temos oestilo da tag <a> e uma classe para esta mesma tag <a>, que é a.links.

Você deve estar se perguntando: todos os links estão iguais? Correto, ainda não dissemos ao programa que eledeve usar a classe que declaramos. Acrescentem ao link do site Terra o seguinte código, de forma que ele separeça com o seguinte:

<a href=�http://www.terra.com.br� class=�links�>Terra</a>

Agora visualize novamente a página e verá que este link assumiu as características do estilo definido pelaclasse links da tag <a>.

Veremos a seguir, outra forma de declarar classes.

No exercício de estilos vinculados, criamos um estilo para o elemento input, com o intuito de aplicá−lo emcaixas de texto.

Sabemos que os elementos input têm vários tipos: caixas de texto, checkbox, botões entre outros. Setivéssemos declarados outros objetos input, além das caixas de texto, o resultado poderia não ser o esperado.

Então como declarar um estilo somente para as caixas de texto se os objetos input podem ser de vários tipos?A resposta é simples: com o uso de classes.

Mas ainda assim se criarmos uma classe para o elemento input, assim como fizemos na tag , esse estilo seráaplicado a todas as variações do input.

Correto, a diferença estará na forma de declaração da classe. Não mais ligaremos a classe ao objeto. Adeclaração da classe será feita da seguinte forma:

.classe {propriedade: valor}

Para exercitarmos essas novas possibilidades, abram o exercício Currículo Online, que fizemos no capítulo 7.Insiram no cabeçalho do exercício, os seguintes estilos:

<style type="text/css"> .texto { font−family : Verdana; font−size : 11px; color : #333333; text−align : right; } .cxtexto { font−family : Verdana; font−size : 11px; color : #000066;



width : 200px; border : 2px groove; } </style>

Ao declararmos estas classes, queremos que os texto informativos assumam as características da classe texto.Para isso devemos aplicar essa classe nas células ou tags <td> que possuam os textos.

A classe cxtexto deverá ser aplicada somente nas caixas de texto, ou seja, em todos os elementos input de tipotext e password. Os outros elementos input deverão permanecer da forma original e não devem conter essadeclaração.

Agora, vamos aplicar essas classes nos lugares desejados. Observe as linhas destacadas:

− <HTML>− <HEAD>− <TITLE>Trabalhando com formulários!!!</TITLE>− <style type="text/css">

− .texto {− font−family : Verdana;− font−size : 11px;− color : #333333;− text−align : right;− }− .texto2 {− font−family : Verdana;− font−size : 11px;− color : #333333;− }− .cxtexto {− font−family : Verdana;− font−size : 11px;− color : #000066;− width : 200px;− border : 2px groove;− }− select {− font−family : Verdana;− font−size : 11px;− color : #000066;− width : 200px;− }

− </style>− </HEAD>− <BODY bgcolor="#FFFFCC">* <center class="texto">Currículo ON−Line</center><br><br>− <form action="" method="get" enctype="multipart/form−data">− <table width="50%" align="center" border="0">− <tr>* <td align="right" class="texto">Nome:</td>− <td>* <input type="text" name="nome" size="40" maxlength="50" class="cxtexto">− </td>− </tr>− <tr>* <td align="right" class="texto">Endereço:</td>− <td>* <input type="text" name="ende" size="40" maxlength="100" class="cxtexto">− </td>− </tr> − <tr>* <td align="right" class="texto">Senha:</td>



− <td>* <input type="password" name="senha" size="15" maxlength="6" class="cxtexto">− </td>− </tr> − <tr>− <td align="right"> </td>* <td class="texto2">− <input type="checkbox" name="publicar" value="sim" checked>− Quero que meu currículo seja público.− </td>− </tr>− <tr>* <td align="right" class="texto">Sexo:</td>* <td class="texto2">− <input type="radio" name="sexo" value="Masculino">Masculino<br>− <input type="radio" name="sexo" value="Feminino">Feminino− </td>− </tr>− <tr>* <td align="right" class="texto">− Escolaridade:− </td>− <td>− <select name="escolaridade">− <option value="sup">Superior</option>− <option value="2">2º Grau</option>− <option value="1">1º Grau</option>− </select>− </td>− </tr>− <tr>* <td align="right" class="texto">− Tecnologias:− </td>− <td>− <select name="tecnologias" multiple size="3">− <option value="php">PHP</option>− <option value="html">HTML</option>− <option value="js">Javascript</option>− <option value="java">Java</option>− </select>− </td>− </tr>− <tr>− <td align="center" colspan="2">− <input type="submit" name="enviar" value="Enviar">− − <input type="reset" name="limpar" value="Limpar"> − </td>− </tr>− </table>− </form>− </BODY>− </HTML>

As caixas de seleção ou <select> assumem o estilo declarado sem que haja necessidade de uso de classe, umavez que usamos a própria tag para a declaração.

10.9 Aplicando estilo de formatação em Texto

E quanto aos textos do site? Os textos não precisam de tags para serem declarados. No entanto eles precisamde formatação e às vezes o uso de CSS será bem−vindo.

Mas como aplicar os estilos dessa forma?


10.9 Aplicando estilo de formatação em Texto 61

Existem duas tags que podem envolver os textos, de forma que, se aplicarmos os estilos nessas tags elestambém terão efeito naquilo que elas envolvem.

Estamos falando das tags <div> e <span>. A tag <span> é comumente utilizada para dar características apequenos trechos de texto ou alguns caracteres.

Após sua declaração, a classe responsável pela caracterização do texto ou o uso de estilos diretamente natag(estilos inline), deverá ser atribuído à tag <span>. Como esta tag envolve o texto que queremos aplicar oestilo, todas as características declaradas serão automaticamente repassadas ao texto.

Observe o exercício abaixo. Declaramos uma classe de nome texto e definimos que o tamanho da fonte deveráser de 2pt ou 2 pontos. Nosso estilo ainda converterá todos os caracteres que estiverem escritos em minúsculaspara maiúsculas. A propriedade que fará essa conversão é a text−transform, e o valor para esta tarefa é ouppercase.

Essa propriedade também suporta os seguintes valores: capitalize, que ao ser aplicado transforma as primeirasletras de todas as palavras para maiúsculas. E ainda, lowercase, que muda para minúsculas todos os caracteresdo texto estilizado.


.texto { font−size : 10pt; text−transform : uppercase; }

</style> </HEAD> <BODY bgcolor="#FFFFCC"> <span class="texto"> O texto aqui impresso deverá estar todo em LETRAS MAIÚSCULAS. </span></BODY></HTML>

Observe o exempo a seguir:

O exemplo acima usou como solução, uma classe com propriedade font−weight com valor bold. A tag <div>tem funcionalidade idêntica à tag <span>. A sintaxe de declaração e o objetivo final também são os mesmos,porém convencionou−se que a tag <div> deveria ser utilizada para estilizar seqüências definidas de textos ouelementos, blocos inteiros que possuiriam as mesmas características.



A princípio, você pode usar qualquer uma delas da forma que desejar, tanto em pequenos trechos decaracteres como em blocos completos, mas é muito interessante que seu código possa seguir os padrõesdefinidos por programadores mais experientes da rede.

Vejamos alguns exemplos da tag <div>.


.texto { width : 370px; border−style : dashed; border−width : thin; border−color : #FF0000; }

</style> </HEAD> <BODY bgcolor="#FFFFCC"> <center> <div class="texto"> A tag div serve para a aplicação de estilos CSS em blocos de texto que deverão assumir as mesmas características, como esse que acabamos de escrever. </div> <center> </BODY> </HTML>

A tag <div> também pode ser utilizada para formatar uma determinada área da página. Essa área estilizadaserá chamada de layer.

As layers ou camadas, são muito utilizadas para a construção de menus, banners, e também quando há anecessidade de se estipular uma área da página que obedecerá a certas interações do usuário.

No exemplo a seguir, construiremos uma layer que, ao ser visualizada, terá o aspecto de um menu. Aprincípio, ela estará com um estilo invisível e somente quando o usuário passar o mouse em cima de umbotão, ela se tornará visível. Porém, para conseguirmos este efeito, teremos que aplicar um pequeno códigoJavascript, mas você não deve se preocupar com isso neste curso.

O objetivo deste exercício será apenas apresentar ao leitor, possibilidades no uso das folhas de estilo.

Vamos ao exemplo:


.botao { background−color : #0000FF; color : #FFFFFF; }

</style> </HEAD> <BODY bgcolor="#FFFFCC"> <div id="menu" style="position: absolute; visibility: hidden; left: 104px; top: 11px;



width: 91px; height: 98px; border: 1px; background−color : #99CCCC;"> <p><a href="http://www.globo.com">Globo</a></p> <p><a href="http://www.terra.com.br">Terra</a></p> <p><a href="http://www.uol.com.br">UOL</a></p> </div> <input type="button" value="Menu CSS" name="menu" class="botao" onMouseOver="document.getElementById('menu').style.visibility='visible'"></BODY></HTML>

Vamos entender o exercício.

Declaramos uma classe botao que foi aplicada ao input de tipo button. Isso significa que o botão terá cor defundo #0000FF e cor da fonte #FFFFFF.

Definimos um div que terá o aspecto de uma layer. O estilo foi inserido diretamente na tag <div> e contemplaas seguintes características:

position � com esta propriedade definimos que a layer não ocupará nenhum espaço dentro da página.Funcionará como se estivesse flutuando sobre os outros elementos.

•

visibility � define se a layer será ou não visível ao usuário.• left � posição da margem esquerda ao início da visualização da layer.• top � posição da margem superior ao início da visualização da layer.• width � largura da layer.• height � altura da layer.• border � borda da layer.• background−color � cor de fundo da layer.•

O menu só deverá aparecer quando o usuário passar com o mouse por sobre o botão, por isso sua propriedadevisibility está com valor hidden(oculta).

Declaramos um botão para servir de ponto de referência da layer, e ser o objeto de inicialização do menuatravés do uso de Javascript. O código onMouseOver utilizado é da linguagem Javascript. Esse código écorrespondente ao movimento do mouse sobre o objeto onde foi declarado. Quando esse evento ocorre, entãoo código declarado é executado. No caso do exercício, atribui−se o valor visible a layer e ela se tornarávisível.

A tabela a seguir ilustra alguns dos estilos utilizados neste livro e alguns outros muito úteis:

Estilo Valores

font−family � tipo da fonteVerdana, Arial, Helvética, Times New Roman, Courierentre outras.

font−size � tamanho da fontePode ser expresso em pontos(pt), pixels(px), polegadas(in),centímetros(cm), milímetros(mm) entre outros.

color � cor da fonteDeve ser utilizado preferencialmente, o código hexadecimalde cores.

font−style � estilo da fonte Pode ser italic, oblique ou normal.font−weight � peso da fonte Pode ser: bold, bolder, normal, ligther entre outros.text−decoration � decoração da fonte Pode ser: none, underline, overline, line−through, blink.text−transform � define o caso da fonte Pode ser capitalize, uppercase, lowercase ou none.background−color � define a cor de fundo Utilizar preferencialmente código hexadecimal de corestext−align � alinhamento do texto Pode ser left, right, center ou justify.

width � largura de um elementoPode ser expresso em pontos(pt), pixels(px), polegadas(in),centímetros(cm), milímetros(mm) entre outros.





height � altura de um elementoPode ser expresso em pontos(pt), pixels(px), polegadas(in),centímetros(cm), milímetros(mm) entre outros.

border−style � define o estilo de bordaPode ser: dashed, dotted, double, groove, hidden, inset,none, outset, ridge e solid.

border−color � cor da borda Utilizar preferencialmente código hexadecimal de cores

border−width � espessura da bordaPode ser expresso em pontos(pt), pixels(px), polegadas(in),centímetros(cm), milímetros(mm) entre outros.

letter−spacing � define o espaçamento entrecaracteres

Pode ser expresso em pontos(pt), pixels(px), polegadas(in),centímetros(cm), milímetros(mm) entre outros.

position � define a posição do elemento comrelação a outros elementos da página

Pode ser absolute ou relative.

visibility � visibilidade do elemento Poder ser visible ou hidden.left � distância da margem esquerda ao elementoque foi estilizado


top � distância da margem superior aoelemento que foi estilizado


list−style−type � define o estilo dosmarcadores de uma lista

Pode ser: circle, disc, square, decimal, lower−roman,upper−roman, lower−alpha, upper−alpha e none.

As propriedades descritas acima são apenas algumas das mais comuns. Com certeza, são inúmeras e quantomais conhecê−las, maior o número de possibilidades teremos.

Como vimos no decorrer deste capítulo, as folhas de estilo se tornaram essenciais no mundo da construção depáginas para a web. Seu uso constante produz resultados dos mais simples até os mais refinados estilos.

Além de tudo, gera economia na codificação e facilita imensamente a manutenção e o gerenciamento daspáginas.



11 Anexo − Código de Cores RGBAbaixo encontra−se uma tabela com inúmeras cores e seus respectivos códigos hexadecimais:

Código de Cores RGB

White#FFFFFF

Red#FF0000

Green#00FF00

Magenta#FF00FF

Cyan#00FFFF

Yellow#FFFF00

Black#000000

Aquamarine#70DB93

Baker's Chocolate#5C3317

Blue Violet#9F5F9F

Brass#B5A642

Bright Gold#D9D919

Brown#A62A2A

Bronze#8C7853

Bronze 2#A67D3D

Cadet Blue#5F9F9F

Cool Copper#D98719

Copper#B87333

Coral#FF7F00

Corn Flower Blue#42426F

Dark Brown#5C4033

Dark Green#2F4F2F

Dark Green Copper#4A766E

Dark Olive Green#4F4F2F

Dark Orchid#9932CD

Dark Purple#871F78

Dark Slate Blue#2F4F4F

Dark Tan#97694F

Dark Turquoise#7093DB

Dark Wood#855E42

Dim Grey#545454

Dusty Rose#856363

Feldspar#D19275

Firebrik#8E2323

Forest Green#238E23

Gold#CD7F32

Goldenrod#DBDB70

Grey#C0C0C0

Green Copper#527F76

Green Yellow#93DB70

Hunter Green#215E21

Indian Red#4E2F2F

Khaki#9F9F5F

Light Blue#C0D9D9

Light Grey#A8A8A8

Light Steel Blue#8F8FBD

Light Wood#E9C2A6

Lime Green#32CD32

Mandarian Orange#E47833

Maroon#8E236B

Medium Aquamarine#32CD99

Medium Blue#3232CD

Medium Forest Green#6B8E23

Medium Goldenrod#EAEAAE

Medium Orchid#9370DB

Medium Sea Green#426F42

Medium Slate Blue#7F00FF

Medium Spring Green#7FFF00

Medium Turquoise#70DBDB

Medium Violet Red#DB7093

Medium Wood#A68064

Midnight Blue#2F2F4F

Navy Blue#23238E

Neon Blue#4D4DFF

Neon Pink#FF6EC7

New Midnight Blue#00009C

New Tan#EBC79E

Old Gold#CFB53B

Orange#FF7F00

Orange Red#FF7F00

Orchid#DB70DB

Pale Green#8FBC8F

Pink#BC8F8F

Plum#EAADEA

Quartz#D9D9F3

Rich Blue#5959AB

Salmon#6F4242

Scarlet#8C1717

Sea Green#238E68

Semi−SweetChocolate#6B4226

Sienna#8E6B23

Silver#E6E8FA

Sky Blue#3299CC

Slate Blue#007FFF

Spicy Pink#FF1CAE

Spring Green#00FF7F

Steel Blue#236B8E

Summer Sky#38B0DE

Tan#DB9370

Thistle#D8BFD8

Turquoise#ADEAEA

Very Dark Brown#5C4033

Very Light Grey#CDCDCD

Violet#4F2F4F

Violet Red#CC3299

11 Anexo − Código de Cores RGB 66

Índice - lyfreitas.com.br · 1.3 tipos de acesso à internet hoje em dia, existem várias formas...

Documents