html avançado

F141 Páginas

LinguagemLinguagemHTMLHTML

Professora Ana Carolina Jaskulski

http://[email protected]

Março/2007

ÍndiceIntrodução..................................................................................................................................91 História..................................................................................................................................10

1.1 Evolução do HTML .........................................................................................................................................................101.2 Fundamentos da Linguagem HTML................................................................................................................................111.3 Os Nomes dos Arquivos .................................................................................................................................................111.4 A Lógica LIFO..................................................................................................................................................................111.5 O Arquivo HTML Básico .................................................................................................................................................121.6 O Arquivo index.htm .......................................................................................................................................................12

2 Elementos Estruturais..........................................................................................................13<html atributos> ... </html>....................................................................................................................................................13

version= "versão" ................................................................................................................................................................13lan="idioma".........................................................................................................................................................................13dir= "rtl| ltr" ..........................................................................................................................................................................13

<head atributos> ... </head>..................................................................................................................................................13<body atributos> ... </body> .................................................................................................................................................14

background= "URL".............................................................................................................................................................14bgcolor= "#rrggbb" ou "nome".............................................................................................................................................15text= "#rrggbb" ou "nome"...................................................................................................................................................15link= "#rrggbb" ou "nome"....................................................................................................................................................15alink= "#rrggbb" ou "nome"..................................................................................................................................................15vlink= "#rrggbb" ou "nome"..................................................................................................................................................16hover= "#rrggbb" ou "nome"................................................................................................................................................16bgproperties= "fixed"...........................................................................................................................................................16leftmargin= "n".....................................................................................................................................................................16topmargin= "n".....................................................................................................................................................................17scroll= "yes | no | auto"........................................................................................................................................................17

3 Elementos do Cabeçalho.....................................................................................................18<script >...</script > ..............................................................................................................................................................18

status= "mensagem"............................................................................................................................................................18defaultstatus= "mensagem".................................................................................................................................................18

Alterando o Formato do Cursor ............................................................................................................................................18Usando um Arquivo como Cursor..........................................................................................................................................19

cursor:url(...)........................................................................................................................................................................19Anexando Objetos ao Cursor ...............................................................................................................................................20

4 Links e Imagens ..................................................................................................................22Links Internos e Externos .....................................................................................................................................................22href= "..."................................................................................................................................................................................22

name= "..."...........................................................................................................................................................................23target="_blank", "nome" ou "_top".......................................................................................................................................24title="descrição"...................................................................................................................................................................24

style=text-decoration=: " "......................................................................................................................................................25Link Que Muda o Cursor........................................................................................................................................................25onmouseover=" "...................................................................................................................................................................26Fazendo um link oculto..........................................................................................................................................................26onclick="alert('...')".................................................................................................................................................................27mailto:....................................................................................................................................................................................27Criando Links Para Download...............................................................................................................................................28Abrir no Browser Arquivos de Outros Softwares ..................................................................................................................29Configurando a Página Inicial - Página de Abertura .............................................................................................................29

5 Imagens................................................................................................................................31<img atributos>......................................................................................................................................................................31

Profª Ana Carolina Jaskulski http://anacarol.blog.br [email protected]

2

src="..."................................................................................................................................................................................31align="top | middle | bottom | left | right"..............................................................................................................................31width="largura", height="altura"...........................................................................................................................................33border="valor"......................................................................................................................................................................33vspace="y" hspace="x"........................................................................................................................................................34alt="texto".............................................................................................................................................................................35onmouseover, onmouseout="imagem"...............................................................................................................................35

Criando um Diretório de Imagens Reduzidas .......................................................................................................................35Imagem de Baixa Resolução ................................................................................................................................................36

lowsrc="arquivo"..................................................................................................................................................................36

6 Elementos Especiais............................................................................................................37<applet> ... </applet>.............................................................................................................................................................37

code="classe Java".............................................................................................................................................................37codebase="URL base".........................................................................................................................................................37name="nome"......................................................................................................................................................................37align, alt, hspace, vspace, height, width..............................................................................................................................37

<param atributos> .................................................................................................................................................................37name="nome"......................................................................................................................................................................37value="valor"........................................................................................................................................................................38

<font atributos> ... </font> .....................................................................................................................................................38size="valor" ou "incremento"...............................................................................................................................................38color="#rrggbb" ou "nome"..................................................................................................................................................39face="nome de fonte"..........................................................................................................................................................40

<br atributos>........................................................................................................................................................................41clear="left", "right", "all"........................................................................................................................................................41

<nobr> ... </nobr>..................................................................................................................................................................41<wbr> ....................................................................................................................................................................................41<map atributos> ... </map > ..................................................................................................................................................42

name="nome_do_mapa".....................................................................................................................................................42ismap...................................................................................................................................................................................42usemap="#nome_do_mapa"...............................................................................................................................................42

<area atributos> ...................................................................................................................................................................43shape="circ", "poly" ou "rect"...............................................................................................................................................43coords="coordenadas"........................................................................................................................................................43href="URL"...........................................................................................................................................................................43nohref...................................................................................................................................................................................43

7 Bloqueando a Cópia da Página............................................................................................44oncontextmenu="return false".............................................................................................................................................44onselectstart="return false"..................................................................................................................................................44

 ..........................................................................................................................................................44

8 Formatação de textos e caracteres......................................................................................45Elementos Lógicos................................................................................................................................................................45<strong> ... </strong>............................................................................................................................................................45<em> ... </em>......................................................................................................................................................................45<cite> ... </cite>.....................................................................................................................................................................45<var> ... </var>......................................................................................................................................................................45<samp> ... </samp>...............................................................................................................................................................45<kbd> ... </kbd>.....................................................................................................................................................................45<dfn> ... </dfn>......................................................................................................................................................................45<code> ... </code>.................................................................................................................................................................45<pre> ... <pre> ......................................................................................................................................................................46Elementos Físicos.................................................................................................................................................................47<b> ... </b>............................................................................................................................................................................47<i> ... </i>...............................................................................................................................................................................47<tt> ... </tt>............................................................................................................................................................................47


3

<u> ... </u>............................................................................................................................................................................47<strike> ... </strike>...............................................................................................................................................................47<del> ... </del>.......................................................................................................................................................................47<s> ... </s>.............................................................................................................................................................................47<sub> ... </sub>.....................................................................................................................................................................47<sup> ... </sup>.....................................................................................................................................................................47<small> ... </small>................................................................................................................................................................47<big> ... </big>.......................................................................................................................................................................47<blink> ... </blink>..................................................................................................................................................................48

align="top", "middle", "bottom" ............................................................................................................................................49behavior =scroll, slide, alternate .........................................................................................................................................49bgcolor="cor" ......................................................................................................................................................................50direction=left, right, up, down...............................................................................................................................................50height="número", %:............................................................................................................................................................50hspace="número"................................................................................................................................................................50loop="número", -1 a infinite.................................................................................................................................................50scrollamount="número".......................................................................................................................................................50scrolldelay="número"...........................................................................................................................................................50vspace="número".................................................................................................................................................................50width="número", %..............................................................................................................................................................50

9 Formatações.........................................................................................................................57<H1, H2, ..., H6 atributos>.....................................................................................................................................................57</H1, H2, ..., H6> ..................................................................................................................................................................57

align="center", "left", "right" ou "justify"...............................................................................................................................57style="propriedades"............................................................................................................................................................57

<p atributos> ... </p> .............................................................................................................................................................58align.....................................................................................................................................................................................58style="propriedades" ...........................................................................................................................................................58

10 Linhas Horizontais .............................................................................................................60<hr atributos> .......................................................................................................................................................................60

size="número"......................................................................................................................................................................60width="número"....................................................................................................................................................................60align="left", "center" ou "right".............................................................................................................................................61noshade...............................................................................................................................................................................61color="#rrggbb" ou "nome"..................................................................................................................................................61

11 Linhas Verticais..................................................................................................................63Outros Separadores de Texto...............................................................................................................................................66

12 Texto Pré-Formatado ........................................................................................................68<pre atributos> ... </pre> ......................................................................................................................................................68

width="...".............................................................................................................................................................................68Espaçamento Forçado...........................................................................................................................................................68<q atributo> ... </q> ..............................................................................................................................................................69

cite=URL..............................................................................................................................................................................69<blockquote> ... </blockquote> .............................................................................................................................................69<address> ... </address> ......................................................................................................................................................70<div atributos> ... </div> .......................................................................................................................................................70

align="center", "left" ou "right".............................................................................................................................................70style="propriedades"............................................................................................................................................................70

<center> ... </center> ...........................................................................................................................................................71<acronym atributos> ... </acronym> .....................................................................................................................................71

title ......................................................................................................................................................................................71

13 Listas..................................................................................................................................72Não Ordenada.......................................................................................................................................................................72<ul atributos> ... </ul> ...........................................................................................................................................................72


4

type= “tipo"...........................................................................................................................................................................72Ordenada...............................................................................................................................................................................72<ol atributos> ... </ol> ...........................................................................................................................................................72

type="tipo"............................................................................................................................................................................72start="valor".........................................................................................................................................................................73

<li atributos> ... </li> .............................................................................................................................................................73<dl atributos> ... </dl> ...........................................................................................................................................................73

compact...............................................................................................................................................................................73<dt atributos> ... </dt> ...........................................................................................................................................................74<dd atributos> ... </dd> .........................................................................................................................................................74Usando Figuras como Marcadores .......................................................................................................................................74

14 Tabelas...............................................................................................................................76<table>...</table> ..................................................................................................................................................................76<tr>...</tr> .............................................................................................................................................................................76<td>...</td> ...........................................................................................................................................................................76<table atributos> ... </table> .................................................................................................................................................76

border="valor"......................................................................................................................................................................77cellpadding="valor"..............................................................................................................................................................78width="valor" e height="valor"...........................................................................................................................................79bgcolor="#rrggbb" ou "nome"..............................................................................................................................................79background ="diretório/nome do arquivo"...........................................................................................................................80bordercolor ="#rrggbb" ou "nome".......................................................................................................................................80bordercolordark ="#rrggbb" ou "nome"................................................................................................................................81bordercolorlight ="#rrggbb" ou "nome"................................................................................................................................81

<tr atributos> ... </tr> ............................................................................................................................................................82align="left, right" ou "center"................................................................................................................................................82valign="baseline, bottom, top" ou "middle"..........................................................................................................................83bgcolor="cor".......................................................................................................................................................................83bordercolor="cor".................................................................................................................................................................84bordercolordark="cor"..........................................................................................................................................................84bordercolorlight="cor"..........................................................................................................................................................84char="caracter"....................................................................................................................................................................84charoff="número".................................................................................................................................................................84table data <td atributos> ... </td> ........................................................................................................................................85rowspan=número.................................................................................................................................................................85colspan=número..................................................................................................................................................................85align=left, right ou center ....................................................................................................................................................86valign=baseline, bottom, top ou middle ..............................................................................................................................87nowrap.................................................................................................................................................................................87width=valor...........................................................................................................................................................................88bgcolor="#RRGGBB"...........................................................................................................................................................89background="diretório/nome do arquivo"............................................................................................................................89bordercolor...........................................................................................................................................................................89bordercolordark e bordercolorlight.......................................................................................................................................90

<th atributos> ... </th> ...........................................................................................................................................................90<caption atributos> </caption> .............................................................................................................................................91

align=top, (default) ou bottom..............................................................................................................................................91Formatando grandes tabelas ................................................................................................................................................91<thead>...</thead> ...............................................................................................................................................................91<tbody>...</tbody> ................................................................................................................................................................92<tfoot>...</tfoot> ...................................................................................................................................................................92Usando Tabelas para criar Colunas de Texto.......................................................................................................................93Imagens, Cores e Backgrounds em Tabelas.........................................................................................................................96Fazendo Gráficos de Estatísticas........................................................................................................................................100Tabela com Imagens Linkadas............................................................................................................................................103


5

15 Multimídia ........................................................................................................................106<bgsound atributo> .............................................................................................................................................................106

src="URL"..........................................................................................................................................................................106loop="número | infinite"......................................................................................................................................................106

meta.....................................................................................................................................................................................106

16 Vídeos com img................................................................................................................107align= ""..............................................................................................................................................................................107alt="texto"...........................................................................................................................................................................107border="número"................................................................................................................................................................107controls..............................................................................................................................................................................107dynsrc="URL"....................................................................................................................................................................107height="número"................................................................................................................................................................107hspace="número"..............................................................................................................................................................107loop="número ou infinite"...................................................................................................................................................108src="endereço"..................................................................................................................................................................108start="fileopen / mouseover"..............................................................................................................................................108vspace="número"...............................................................................................................................................................108width="número"..................................................................................................................................................................108

<embed atributos> ... </embed> .........................................................................................................................................108align="left", "right", "top", "bottom" ....................................................................................................................................108border="número"................................................................................................................................................................108frameborder="no"...............................................................................................................................................................108height="número"................................................................................................................................................................108hidden="true", "false".........................................................................................................................................................108hspace="número"..............................................................................................................................................................109name="texto".....................................................................................................................................................................109pallete="foreground", "background"...................................................................................................................................109pluginspace="endereço"....................................................................................................................................................109vspace="número"...............................................................................................................................................................109type="mimetype"................................................................................................................................................................109width="número"..................................................................................................................................................................109

<nobed> ... </nobed> .........................................................................................................................................................109

17 Posicionamento de Objetos - div.....................................................................................110left (esquerdo) e top (topo)................................................................................................................................................110width (largura) e height (altura).........................................................................................................................................110position...............................................................................................................................................................................110z-index...............................................................................................................................................................................113overflow..............................................................................................................................................................................113

18 Filtros................................................................................................................................115alpha....................................................................................................................................................................................115opacity ................................................................................................................................................................................115

finishopacity ......................................................................................................................................................................115style ...................................................................................................................................................................................115startx .................................................................................................................................................................................115starty .................................................................................................................................................................................115finishx ................................................................................................................................................................................115finishx ................................................................................................................................................................................115

blur.......................................................................................................................................................................................117add ....................................................................................................................................................................................117direction ............................................................................................................................................................................117strength .............................................................................................................................................................................117

chroma ................................................................................................................................................................................119color ..................................................................................................................................................................................119

dropshadow ........................................................................................................................................................................119color...................................................................................................................................................................................119offx ....................................................................................................................................................................................119


6

offy ....................................................................................................................................................................................119positive ..............................................................................................................................................................................120

fliph e flipv............................................................................................................................................................................120glow ....................................................................................................................................................................................120

color ..................................................................................................................................................................................121strength .............................................................................................................................................................................121

gray......................................................................................................................................................................................121invert....................................................................................................................................................................................122motion blur ..........................................................................................................................................................................122

strenght .............................................................................................................................................................................123direction ............................................................................................................................................................................123progid:DXimagetransform.Microsoft .................................................................................................................................123

wave ...................................................................................................................................................................................124add ....................................................................................................................................................................................124freq ....................................................................................................................................................................................124lightstrength ......................................................................................................................................................................124phase ................................................................................................................................................................................124strength .............................................................................................................................................................................124

xray .....................................................................................................................................................................................125

19 Frames .............................................................................................................................126<frameset atributos> ... </frameset> ...................................................................................................................................126

cols="x, y, ...".....................................................................................................................................................................126rows="x, y, ..."....................................................................................................................................................................126frameborder="1 / 0"............................................................................................................................................................126

Frames verticais .................................................................................................................................................................126Frames Horizontais..............................................................................................................................................................127Frames Combinados...........................................................................................................................................................127

framespacing="valor".........................................................................................................................................................128<frame atributos> ................................................................................................................................................................128

align="top, middle, bottom, left, right"................................................................................................................................128frameborder="1 / 0" ...........................................................................................................................................................128src="URL"..........................................................................................................................................................................128name="rótulo"....................................................................................................................................................................129marginheight="número".....................................................................................................................................................129marginwidth="número".......................................................................................................................................................129noresize ............................................................................................................................................................................129scrolling="yes | no"............................................................................................................................................................129

Montando um Diretório com frames ...................................................................................................................................130<iframe> ... </iframe > ........................................................................................................................................................132

src="URL"..........................................................................................................................................................................132name="texto".....................................................................................................................................................................132width="número"..................................................................................................................................................................132height="número"................................................................................................................................................................133align="top | middle | bottom | left | right"............................................................................................................................133Frameborder="1 | 0"..........................................................................................................................................................133margnwidth="pixels"..........................................................................................................................................................133marginheight="pixels"........................................................................................................................................................133scrolling="yes | no | auto"..................................................................................................................................................133

20 Botões...............................................................................................................................135Fechar a janela....................................................................................................................................................................135Imprimir a página.................................................................................................................................................................135"Voltar" e "Avançar".............................................................................................................................................................136Exibir Código Fonte.............................................................................................................................................................137Botões Coloridos ................................................................................................................................................................137Botões com Links ...............................................................................................................................................................137Botões Texturizados............................................................................................................................................................139


7

Tamanhos e Formatos ........................................................................................................................................................140Botões com Imagens...........................................................................................................................................................141


8

IntroduçãoIntroduçãoAqui neste material você encontrará muitas informações sobre HTML.É um apanhado de materiais que encontrei (outros que ganhei) e alguns exemplos que visam ajudar no seu aprendizado.

Esta apostila não substitui a aula. Tampouco você precisa ter ela durante as aulas- ela é um complemento.Nem todos os conteúdos abordados aqui nós veremos em sala de aula... porque não há tempo para tudo.

Esta apostila é um Guia.Ela não vai te ensinar CSS. Ela não vai te ensinar tudo de HTML. Nem DHTML. Nem Javascript. Nem Ajax.

A editora Alta Books lançou a coleção Use a cabeça. com livros MUITO divertidos, muito completos e muito bons de ler. São escritos com técnicas que ajudam o leitor decorar os comandos através de exemplos bem humorados e figuras divertidas.

No site da editora eles disponibilizaram parte dos livros em formato PDF. Dê uma olhada. É muito divertido!.

Use a Cabeça - HTML com CSS e Use a Cabeça – AJAX

No site http://anacarol.com.br eu vou sempre colocar mais informações e outras fontes de pesquisa - de vários assuntos.

Essa apostila não visa lucros.... você não deve pagar por ela.

Bons estudos!


9

1 História1 HistóriaA internet nasceu em 1969, nos Estados unidos. Interligava originalmente laboratórios de pesquisa e se chamava ARPANET

(ARPA: Advanced Research Projects Agency). Era uma rede do Departamento de Defesa norte-americano. Era o auge da Guerra Fria, e os cientistas queriam uma rede que continuasse de pé em caso de um bombardeio. Surgiu então o conceito central da internet: uma rede em que todos os pontos se equivalem e não há um comando central. Assim, se B deixa de funcionar, A e C continuam podendo se comunicar.

O nome “internet" surgiu bem mais tarde, quando a tecnologia da ARPANET passou a ser usada para conectar universidades e laboratórios, primeiro nos EUA e depois em outros países. Por isso que não há um único lugar que "governa" a internet. Hoje ela é um conjunto de milhares de redes no mundo inteiro. O que essas redes têm em comum é o protocolo TCP/IP (Transmission Control Protocol/Internet Protocol), que permite que elas se comuniquem umas com as outras.

Então, a internet pode ser definida como: uma rede de redes baseadas no protocolo TCP/IP; uma comunidade de pessoas que usam e desenvolvem essas redes; uma coleção de recursos que podem ser alcançados através destas redes.

Durante cerca de duas décadas, a internet ficou restrita ao ambiente acadêmico e científico. Em 87 pela primeira vez foi liberado seu uso comercial nos EUA.

A "antiga" internet, antes da Web, exigia do usuário disposição para aprender comandos em Unix (uma linguagem de programação) bastante complicados, e enfrentar um ambiente pouco amigável (unicamente em texto). A Web fez pela internet o que o Windows fez pelo computador pessoal – tornou acessível.

O poder da WWW (World Wide Web - Rede de Alcance Mundial), reside em sua capacidade em associar uma determinada parte de um documento eletrônico a outro computador e a outro documento à milhares de quilômetros afastado. Essa conexão entre documentos é possível graças à utilização do protocolo de comunicação chamado HTTP (Hypertext Transfer Protocol - Protocolo de transferência de Hipertexto) e da linguagem HTML (Hypertext Markup Language – Linguagem de Desenvolvimento de Hipertexto).

O HTML nasceu em 1991 no CERN (European Council for Nuclear Research – Conselho Europeu de Pesquisas Nucleares), na suíça.

Seu criador, o inglês Tim Berners-Lee de 44 anos, a concebeu unicamente como uma linguagem que serviria para interligar computadores do laboratório e outras instituições de pesquisa e exibir documentos científicos de forma simples e fácil de acessar.

Um desenvolvimento fundamental aconteceu em julho de 1992 com a liberação da biblioteca de desenvolvimento para WWW. Foi essa biblioteca que deu origem à construção de vários browsers WWW e servidores que tornaram a WEB viável.

Um desses browsers foi o Mosaic, o primeiro browser multiplataforma que explorava completamente a capacidade de hipermídia da WEB. Desenvolvido por Marc Andreson, então do NCSA, o Mosaic foi que iniciou o crescimento explosivo da WEB. No outono 1993 tornou-se disponível a milhões de usuários, com a liberação das versões para Mac e Windows.

Se por um lado novos browsers têm superado os recursos do Mosaic, por outro lado foi esse programa que se tornou sinônimo da WEB.

Cada versão de HTML tem tentado refletir todo o consenso entre a indústria de software para que o investimento feito pelos autores de páginas não seja desperdiçado e que os seus documentos não deixem de se poder ler num curto período de tempo. O HTML tem sido desenvolvido com a visão que todos os equipamentos fossem capazes de usar a informação da Web, computadores com monitores de diversas resoluções e vários números de cores, equipamentos para input e output de voz, computadores com alta e baixa largura de freqüência e muito mais. Não desperdiçando o tempo (e custo) de serviço de um Webmaster que faz um site e logo-logo esse site deixa de funcionar - para isso é mantido o padrão.

Com o HTML (e a facilidade dele), a internet se tornou uma imensa biblioteca, onde há de tudo. Tornou-se uma grande arena de conhecimento e diversão

O HTML 4.0 estende com mecanismos para style sheets (CSS), scripting, frames (janelas), embedding objects, melhor suporte para texto com direção variável (esquerda, direita, e ambos), tabelas mais visualizáveis, melhorias nos forms, melhor acessibilidade para pessoas com incapacidades.

1.1 Evolução do HTML 1992 - Primeira aparição do HTML. 1993 - HTML+ Algumas definições da aparência, tabelas, formulários. 1994 - HTML v2.0 Padronização para as características principais. 1994 - HTML v3.0 uma extensão do HTML+ entendido como um rascunho de padrão. 1995 - HTML v3.2 Netscape e Internet Explorer definem seus próprios padrões baseados nas implementações correntes. 1995 - JavaScript criada por Brendan Eich da Netscape como uma extensão do HTML para o browser Navigator v2.0. JavaScript é

uma linguagem de roteiro (script) baseada em objetos e permite que sejam manipulados através de eventos dinâmicos que faltavam ao HTML: abertura de janelas de avisos etc.

1996 - CSS1 em dezembro deste ano é apresentada pela primeira vez a Folha de Estilo, criada para complementar a linguagem HTML. Possuía uma formatação simples e cerca de 60 propriedades.

1997 - HTML v4.0 São lançados os browsers Netscape v4.0 (agosto) e internet Explorer v4.0 (outubro) que apresentaram um conjunto de tecnologias (CSS, JavaScript/VBScript e DOM) que juntas disponibilizaram diversos recursos tornando o HTML dinâmico. Surge então o DHTML.

1998 - CSS2 em maio é lançado a segunda versão da Folha de Estilo que, além de incluir todas as propriedades do CSS1 ainda


10

http://www.cern.ch/

apresenta por volta de 70 novas propriedades. 1999 - HTML v4.01 Alguma modificações da versão anterior. 2000 - XHTML v1.0 É criado e consiste de uma versão XML do HTML v4.01.

1.2 Fundamentos da Linguagem HTMLO Edit foi um dos primeiros (e mais simples) editores de texto. Caracteres ASCii puro, sem formatação alguma (mudança de cor

de fonte, tabulações nem parágrafos), mas depois vieram os WordStar, OpenAcces, Carta Certa, Word. Cada um trazia suas inovações (suas possibilidades), que infelizmente não eram compatíveis entre si, ou seja: uma arquivo do Word não abria no Carta Certa.

A incompatibilidade existia porque cada programa adicionava ao texto códigos próprios (para o controle dele e que os outros não conheciam), mas com o passar do tempo foram-se criando formas de transformar de um padrão para outro: de Word para Carta Certa, por exemplo.

Para evitar que ocorram incompatibilidades como esta, na internet foi desenvolvido o padrão HTML. O HTML é uma linguagem de formatação criada para estruturar a página que será exibida na internet (no browser). Seus arquivos

são de texto puro com códigos de marcação (as Tags). Cada Tag é um comando que será interpretado pelo browser (por exemplo, a tag <b> é o comando para transformar o texto em negrito).

Ser em texto puro significa que os arquivos em HTML não contêm nada além de letras, números, sinais de pontuação e caracteres em geral que podem ser impressos. um arquivo HTML é também conhecido como página Web ou Home Page e são identificados com a extensão .htm ou .html, exemplo: index.htm.

Os códigos de marcação de uma página HTML também são conhecidos como código fonte e para acessá-los basta posicionar o ponteiro do mouse sobre a página, clicar no botão direito e selecionar a opção [Exibir código fonte]. Muitos Webmaster s não gostam que os usuários da internet fiquem xeretando no código fonte de sua home page porque lá está toda a sua criatividade, truques de macetes de elaboração da página (a questão de copyright ou direitos autorais), por isso é comum encontrarmos sites com bloqueio deste recurso

A grande vantagem da linguagem HTML é que, por ela ser muito simples, não necessita de conhecimentos prévios de programação, por isso que muitas vezes é escolhida como a primeira Linguagem de Programação a ser aprendida por uma pessoa. Outro fator é o de não precisar de um editor específico, qualquer um serve (o Bloco de Notas e o Vi, por serem texto puro, são excelente para isso), mas existem editores exclusivamente HTML, os WYSiWYG (What You See is What You Get - O que você vê é o que você tem).

Estas ferramentas foram desenvolvidas para facilitar a vida do Webmaster, porém, como tudo na Rede está em fase de transição, estes editores ainda deixam muito a desejar tanto na apresentação de novos recursos do HTML (que normalmente levam tempo para serem incorporados aos editores), como também na possibilidade de acontecerem incompatibilidades do editor para com a linguagem. Quando isso acontece o Webmaster (que conhece a Linguagem HTML), simplesmente entra no código fonte e "faz na mão", pois não tem como o browser não cumprir uma ordem direta. Entrar no código fonte para suprimir as redundâncias e os caracteres de controle dos editores ("sujeiras do código") é um grande artifício, principalmente para diminuir o tamanho do arquivo.

Sabendo HTML se ganha independência para criar, usando a criatividade, e sem depender dos recursos do Editor HTML que se estaria usando.

1.3 Os Nomes dos Arquivos HTML não faz distinção entre letras maiúsculas (caixa alta) e letras minúsculas (caixa baixa). Tanto faz escrever <font> como

<FONT>. Porém o servidor onde a página estiver hospedada (ou o sistema operacional, caso a página esteja no seu próprio computador) diferencia letras minúsculas e maiúsculas, e se criar um link para um arquivo chamado apostila.htm e ele estiver com o nome Apostila.htm, o servidor simplesmente não irá encontrá-lo. É por isso que muitas vezes o servidor retorna com uma mensagem de "Arquivo não encontrado".

Os nomes não devem conter mais que 32 caracteres nem espaços em branco (use o símbolo _ para substituir o espaço em branco), assim, ao invés de nomear o arquivo "pagina um.html", nomeie como "pagina_um.html"

O ponto final deve ser usado uma só vez para separar a extensão (de três letras) que classifica o arquivo. Não use pagina..html, use pagina.html para o nome do arquivo.

Os nomes de arquivos não devem conter caracteres, tais como: acentos, cedilha, pontuações, sinais de maior e menor, pipe, trema, e comercial, asterisco, parênteses, chaves etc. use somente números, letras e underline (o _)

1.4 A Lógica LIFO O HTML é uma Linguagem de Marcação., onde se insere marcações (tags), na forma de elementos HTML no conteúdo da

informação que será publicada. As marcações informam ao browser como formatar o conteúdo (em Cabeçalhos, Parágrafos, Listas e Tabelas) e onde inserir links em hipertexto e imagens e outros Objetos.

As tags são delimitadas entre os sinais de menor "<" e maior ">". A maioria das tags funciona em dois tempos, ou seja, tem que se especificar onde começa e onde termina, por exemplo: <tag>texto</tag>, onde o sinal "/" significa o fim da atuação da tag.

Nunca se deve 'embaralhar' as tags, elas podem vir uma dentro da outra, porém a que começou primeiro tem que necessariamente terminar por último, assim:


11

<tag1> <tag2> <tag3> texto </tag3> </tag2> </tag1>

Nunca misture a seqüência, como por exemplo:

<tag1> <tag2> <tag3> texto </tag2> </tag1> </tag3>

isso segue a lógica LIFO (Last in, First Out - O último aberto deve ser o primeiro a ser fechado). Nem todas as tags necessitam ser terminadas. A tag que significa linha em branco não necessita de fim, assim como também a tag

de barra horizontal.Como não são todas as tags que são relacionadas com textos, a tag que significa imagem não necessita de terminação e nem se

relaciona necessariamente com texto. Uma tag é formada por comando, atributo e valor.Os atributos com seus valores modificam os resultados default dos comandos.

1.5 O Arquivo HTML Básico O documento HTML normalmente possui extensão .htm ou .html. Existe uma tag que identifica o documento como sendo HTML,

é a <html>, que necessariamente é a primeira que aparece no texto, e sua terminação </html> é obviamente a última. em seguida define-se o cabeçalho com <head> e </head>

Dentro do cabeçalho podem existir diversas outras tags específicas e scripts em diversas linguagens, porém o que sempre existe é a definição do título, com <title> e </title>. Este título é o que irá aparecer na barra superior da janela do browser, junto com o nome do mesmo. Fora do cabeçalho, porém dentro das tags <html>, existe o "corpo" definido por <body> e </body> e aonde vai o "corpo" do site.

Estas são as tags básicas de todo arquivo html.

<html> <!— início do código html --><head> <!— cabeçalho -->

<title> <!— título --></title> <!— final do título -->

</head> <!— final do cabeçalho --><body> <!— corpo do site --></body> <!— final do corpo do site -->

</html> <!— final do código html-->

1.6 O Arquivo index.htm Normalmente, o arquivo index.htm é o arquivo default dentro de um diretório. Quando indicamos um endereço (link) e não

especificamos um arquivo dentro de um diretório, o browser procura pelo arquivo index.html. Se esse arquivo não existir, o browser apresentará uma listagem dos arquivos contidos naquele diretório, o que pode não ser nosso desejo.

Por exemplo, o endereço de um site pode ser http://www.meusite.com.br/meu_diretorio/index.html. Se digitar no browser somente http://www.meusite.com.br/meu_diretorio/, o browser procurará naquele servidor

("meusite.com.br") o arquivo index.html dentro do diretório "meu_diretorio" mesmo que eu não tenha especificado isso quando eu digitei o endereço. Porém, se o arquivo index.html tiver sido deletado ou for inexistente, o browser não abrirá nenhum outro arquivo, mas exibirá uma lista de todos os arquivos e diretórios contidos no diretório "meu_diretorio".


12

http://orbita.starmedia.com/~edaurelio/ab.htm#default

2 Elementos2 Elementos EstruturaisEstruturais

<html atributos> ... </html><html atributos> ... </html>É o comando de abertura e fechamento do documento HTML. Todos os demais comandos devem ser envolvidos por ele.

version= "versão"

informa a versão do HTML usado.

lan="idioma"

<html lang="en-us">O corpo do arquivo...

</html>

No exemplo acima estou declarando que o arquivo HTML está no idioma inglês Americano. Os idiomas diferem de muitas maneiras quanto à aparência impressa: tipos de caracteres, fluxo direcional e uma infinidade de peculiaridades principalmente nos idiomas orientais.

dir= "rtl| ltr"

Determina a direção do fluxo do texto: RTL da direita para a esquerda, Ltr da esquerda para a direita.

<html lang="HE" Dire="RTL">Essa é uma página formatada para o Hebraico.

</html>

Visualização: rtl (observe que a barra de rolagem vertical passou para o lado esquerdo):

Visualização dir.= "Ltr"

<head atributos> ... </head><head atributos> ... </head>


13

Contém o cabeçalho do documento HTML também conhecido como Meta Tag (informações sobre o documento para classificação e indexação dele). Elas não aparecem na página visualizada.

<html><head>

<title>Apostila de HTML

</title><link rev=made href="mailto:[email protected]"><meta name= "author" content= "Ana Carolina Schneider da Silva" ><meta name= "keywords" content= "HTML, WWW, tutorial, comandos, programação" ><meta name= "description" content= "Apostila de HTML com comandos".

básicos e avançados ">".<meta name="language" content="Portuguese"><meta name="robots" content="all, follow">

</head> <body>

Este é um exemplo de corpo do site para mostrar que só o que está aqui vai aparecer para nosso caro internauta!!

</body></html>

Visualização (observe que as informações estão somente no código):

<body atributos> ... </body> <body atributos> ... </body> Contém o corpo do documento HTML, a parte que aparece na área de visualização do browser. Os atributos alteram a aparência.

background= "URL"

Contém a URL (localização) da imagem que cobrirá o fundo da área de visualização do documento se repetindo para cobrir toda a tela (tiling ou lado-a-lado).

Atenção para cores fortes: isso não poderá impedir a leitura do texto.

<html> <body background="imagens\folha.jpg">

Esse é o body - o conteúdo do seu site.... e as figuras aqui atrás são o background e não aparecerão quando o internauta imprimir o site;

</body></html>

Visualização:


14

bgcolor= "#rrggbb" ou "nome"

indica um número em hexadecimal ou um nome que define a cor de fundo. O nome é uma das 16 cores universalmente conhecidas (padrão VGA do Windows): aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white (branco), yellow.

text= "#rrggbb" ou "nome"

Cor de texto. O padrão é preto (text= "#000000").

<html> <body text="lime">

isso é um texto na cor lime... cuidado! Algumas cores podem *ofuscar* o internauta!!!! - esta que estou usando, por exemplo ;)

</body></html>

Visualização (cuidado com o uso inadequado das cores!!):

link= "#rrggbb" ou "nome"

Cor de texto do link, sendo que o padrão é azul (link= "#0000FF").

<html><body link="red">

Essa é uma (outra) excelente revista para interessados em banco de dados (e é grátis!):

<a href= "http://www.oracle.com/profitmagazine" >PROFIT

</a>(ah! esse link (por padrão) estaria em azul)

</body></html>

Visualização: cor do link em vermelho:

alink= "#rrggbb" ou "nome"

Cor do link já visitado (na hora que clico, muda a cor), o padrão é o vermelho (alink= "#FF0000").


15

http://www.oracle.com/profitmagazine

vlink= "#rrggbb" ou "nome"

Configura a cor do link ativo, sendo que a cor padrão é vermelho púrpura (vlink= "#800080").

hover= "#rrggbb" ou "nome"

Cor do link quando o cursor estiver sobre ele.

bgproperties= "fixed".

Mantém o papel de parede fixo no fundo da tela, impedindo que o ele role junto com o conteúdo da página.

<html><body bgproperties="fixed" background="imagens\sky03.jpg">

Observe que mesmo movimentando AS BARRAS de rolagem (tanto a vertical quanto a horizontal) a figura de fundo permanece fixa - ela não se move junto com o texto ************************* **************** **************************************** ***************************** ***************************************** ************************** *********************

</body></html>

Visualização:

Visualização (depois de mover a barra):

leftmargin= "n"

Define o tamanho, em pixels, do espaço entre o início do texto e a borda esquerda da área de visualização do browser.

<body leftmargin= "10" >Observe o espaço entre a margem e o início desse texto --- LEFTMARGIN=10

</body>

Visualização com leftmargin = 10:


16

Visualização com leftmargin = 100

topmargin= "n".

Define o tamanho, em pixels, do espaço entre o início do texto e a borda superior da área de visualização do browser.

<body topmargin= "50" >Observe o espaço entre o início desse texto e a parte SUPERIOR--- TOPMARGiN=50

</body>

Visualização:

scroll= "yes | no | auto"

Este atributo define se a página terá as barras de rolagens horizontal e vertical. Onde "yes" Sempre apresentará as barras mesmo que a página não precise, "no" NUNCA apresentará as barras mesmo que a página precise e "auto" apresentará as barras automaticamente caso a página venha a precisar delas. No exemplo a seguir configurei SCRolL= "no", isso é, ele irá apresentar uma página sem as barras.


17

3 Elementos do3 Elementos do CabeçalhoCabeçalho

<script >...</script > <script >...</script > status= "mensagem"

Exibe uma mensagem que aparece na barra de status (barrinha no canto inferior esquerdo). Pode-se alterar essa mensagem determinando entre os parâmetros <script> status= "..." </script> a mensagem que quer que apareça. Pode-se acentuar normalmente!!!

<html><body>

<script>status= "isso é um exemplo de mensagem na barra de status"

</script></body>

</html>

Visualização:

defaultstatus= "mensagem"

Mostra uma mensagem quando nenhuma outra está sendo exibida.

Alterando o Formato do Cursor Basta acrescentar o parâmetro style= "cursor:tipo_do_cursor". ao comando hrEF, e quando colocar o mouse sobre o link, o formato

do cursor se modificará.


18

Usando um Arquivo como Cursorcursor:url(...)


19

especifica um arquivo.ani a escolher. Por exemplo com o arquivo meu_cursor.ani.

<a href= "meu_link.htm" style= "cursor:url (meu_cursor.ani)" > Aqui esta um link

</a>

Para mudar definitivamente um cursor de uma página basta usar a classe de estilo inserindo body {cursor:url( ... )} entre as tags <head> ... </head>. Este cursor só irá funcionar nesta homepage, de modos que, quando você clicar num link ou fechar a página ele voltará ao cursor normal configurado em seu sistema operacional. No exemplo abaixo, o cursor default da página (quando não estiver sobre um outro link definido) será o cursor progress.

<html><head>

<style type="text/css">body {cursor:progress}

</style></head> <body>

<a href="historia.htm" >Historia

</a></body>

</html>

Anexando Objetos ao Cursor Deve-se tomar cuidado ao usar este tipo de efeito porque ele pode acabar irritando o internauta que ao movimentar o cursor tem

esse objeto atrapalhando ou distraindo sua atenção.Para vincular um arquivo de imagem ao cursor, de modo que essa imagem o acompanhará, fazemos assim:Entre <head> e </head> colocamos o código javascript a seguir:

<head><script type="text/javascript">

function cursor(){trail.style.visibility="visible"trail.style.position="absolute"trail.style.left=event.clientX+10trail.style.top=event.clienty

}</script>

</head>

Depois colocamos o parâmetro onmousemove= "cursor()" na tag <body>, ficando assim

<body onmousemove= "cursor ()" > ... </body>

Por último colocamos dentro do corpo do documento (entre <body> e </body>) a linha que identificará a figura que se movimentará com o cursor e seu tamanho.

<img id="trail" style="visibility:hidden" src="imagens\minha_imagem.gif" width="64" height="64">

Todo o código ficará assim:

<html><head>

<script type="text/javascript">function cursor(){

trail.style.visibility="visible"trail.style.position="absolute"trail.style.left=event.clientX+10trail.style.top=event.clienty

}</script>


20

</head> <body onmousemove="cursor()">

<img id="trail" style="visibility:hidden" src="imagens/minha_imagem.gif" width="64" height="64">

</body></html>

Visualização:


21

4 Links e Imagens 4 Links e Imagens O termo hypertext é definido por "texto que tem link para outros textos".Sendo assim o que caracteriza a estrutura HTML é a sua

propriedade de se "ligar indefinidamente a outros documentos". O link é um canal, uma porta de conexão com outra página, possibilitando a interação de um site com outros sites existentes. Os links podem ser relativos, absolutos, internos e externos Link (ou hiperlink) é um termo inglês que quer dizer "ligação" e sua função é ligar dois documentos.O link relativo não especifica o caminho completo do endereço do arquivo, já o link absoluto sim. Por exemplo aqui está o link relativo que direciona para o arquivo de exemplo_de_link.html, que está no mesmo diretório e na

mesma máquina do arquivo que o chamará.

<html><body>

<a href="exemplo_de_link.html">isso aponta para o arquivo exemplo_de_link.html

</a></body>

</html>

Porém o seu endereço absoluto seria:

<html><body>

<a href="C:\ana\exemplo_de_link.html">isso aponta para o arquivo exemplo_de_link.html

</a></body>

</html>

Mas como o arquivo exemplo_de_link.html, onde quero chegar, está no mesmo diretório do site que está chamando-lhe, não precisa todo o trabalho de digitação, apenas o nome do arquivo já basta. O link absoluto é usado para localizar arquivo que está num servidor (ou diretório ou máquina) diferente, por isso seu endereço tem que estar completo.

Links Internos e Externos Links Internos e Externos O Link interno é aquele que liga dois pontos em uma mesma homepage. O Link Externo é aquele que cria uma ligação entre homepages diferentes em locais diferentes e, por isso, é um link absoluto (tem

que possuir o endereço completo).

<a atributos> ... </a>

uma âncora é um ponto de referência que marca o destino de um link interno. As âncoras criam pontos de ligação entre todos os tópicos abordados, organizando sua estrutura e com isso otimizando sua

navegação. Por exemplo, quando se cria um artigo com índice e todo o seu conteúdo está na mesma página, podemos fazer com que cada ponto do índice seja um link para o parágrafo exato (da mesma página) ao qual esse item diz respeito.

Para definir um link, utilizaremos o par de tags <a>.. </a>, cujo "A" vem de "Anchor" ("âncora" em inglês). Quando numa página necessito colocar um link para uma palavra (ou parágrafo) no final dessa página, faz-se necessário colocar

uma marcação (uma âncora) nesse destino para que o link o encontre.Portanto, um link possui dois comandos distintos: (<a href= "..." >, comando de partida e <a NAME= "#..." > comando de

chegada) que possibilitam: saltos para pontos diferentes em uma mesma página ou saltos para pontos de uma página diferente mas que se encontra no mesmo diretório da página que a chama.

href= "..."href= "..."De Hypertext REFerence ou referência de hipertexto. informa a URL, que pode ser um documento HTML, uma imagem ou outro

tipo de recurso. Esse é um exemplo de link para outro site de HTML:

<html><body>


22

http://orbita.starmedia.com/~edaurelio/Abc.htm#recurso

http://orbita.starmedia.com/~edaurelio/Abc.htm#URL

<a href="http://www.icmsc.sc.usp.br/manuals/html/index.html"> Tutorial HTML ICMC-USP

</a></body>

</html>

Visualização:

name= "..."

Este atributo estabelece o ponto de chegada (destino) nos saltos interligados do link. Esse exemplo coloca a frase (o link) que quando clicar o levará para onde coloquei a âncora (entre <a name= "..." > e </a>).

<html> <body>

<a href="#imgreduzidas"> Clique aqui e chegue ao destino

</a><br><br>isso seria um texto muito grande <br> isso seria um texto muito grande<br>isso

seria um texto muito grande<br>isso seria um texto muito grande<br>isso seria um texto muito grande<br>isso seria um texto muito grande<br>isso seria um texto muito grande<br>isso seria um texto muito grande<br>isso seria um texto muito grande<br>isso seria um texto muito grande<br>isso seria um texto muito grande<br>isso seria um texto muito grande

<br><br> <a name="imgreduzidas">

DESTINO!!!!!!!!</a>

</body></html>

Visualização:

Quando abre o site:

Depois que clica no link e vai parar na âncora:


23

target="_blank", "nome" ou "_top"

Especifica uma janela ou quadro que receberão a página ou recurso referenciado.Se target="_blank", a página será aberta em uma nova janela do browser.

<html><head></head> <body>

<a href="2.html" target="_blank">Link para 2.html

</a> </body>

</html>

Visualização:

target="nome" a página será aberta dentro de um frame que possua o tal nome. target="_top", a página será aberta sobre a mesma janela do browser, ignorando qualquer organização de frames.

title="descrição"

Apresenta um quadro com a descrição do link quando o mouse é posicionado sobre ele.

<html><body>

<a href="2.html" title="isso aponta para a pagina 2.html">Link para 2.html

</a> </body>

</html>

Visualização:


24

style=text-decoration=: " "style=text-decoration=: " "Este é o link tradicional, que você já conhece: Ele, geralmente, se apresenta na cor azul e possui um sublinhado.

<html><body> <a href="http://www.oracle.com">

Oracle - uma grande empresa que também usa Linux :)</a></body>

</html>

Visualização:

Pode-se omitir esse sublinhado inserindo o seguinte parâmetro style="text-decoration:none"

<html><body>

<a href="http://www.oracle.com" style="text-decoration:none">Oracle - uma grande empresa que também usa Linux :)

</a></body>

</html>

Visualização:

No exemplo acima se tira o sublinhado de um link específico, para fazer o mesmo com todos os links da página basta inserir estes parâmetros em qualquer lugar da página entre <body...> e </body>

<html><body>

<style type="text/css">a:link {text-decoration:none}a:visited {text-decoration:none}a:active {text-decoration:none}

</style> <a href="http://www.oracle.com" >

PostgreSQL - Outro excelente SGBD - esse é free! :) </a>

</body></html>

Visualização: (observe que não tem parâmetro dentro da tag <a href> do link e que mesmo assim ele mão está sublinhado)

Link Que Muda o CursorQuando você sobrepõe um link com o cursor ele muda a seta para uma mãozinha, esta é a condição default. Pode-se escolher qual figura de cursor deve aparecer em determinado link. Nos exemplos abaixo o primeiro link terá o cursor HELP (que apresenta uma seta com a interrogação) e o segundo o cursor de

espera (com a ampulheta).

<html><body>

Visite um excelente site brasileiro sobre informática, principalmente hardware -


25

<a href="http://www.clubedohardware.com.br" style="cursor:help">Clube do Hardware

</a> <br><br><a href="http://www.apostilando.com.br" style="cursor:wait">

Apostilando.com.br - ótimo site para download de apostilas</a>

</body></html>

Visualização: (Observe que a frase que coloquei informando o destino do link está fora de <a href> e </a>, por isso que o link só é o nome do site. No segundo link toda a frase está entre as tags <a href> e </a>, por isso toda ela está em azul e toda ela é link).

onmouseover=" "onmouseover=" "O link automático consiste naquele que abre espontaneamente quando o mouse passa sobre ele, sem que seja necessário o

internauta dar o clique. Sua sintaxe é simples:

<html><body>

<a href="2.html" onmouseover="parent.location='2.html'">Passe o mouse aqui e irá para outro site mesmo sem clicar!!!!

</a> </body>

</html>

Visualização:

quando abre o site:

Depois que passa o mouse sobre o link:

Fazendo um link ocultoQual a utilidade de criar um link que ninguém possa ver? Bom, isso vai da sua imaginação. Você pode criar situações interessantes com esse recurso. imagine alguns links ocultos e

automáticos numa homepage de estórias ilustrada que entram inesperadamente com um fundo musical. O internauta, ao mover o mouse sobre sua página entrará numa seção oculta, sem que ele entenda o que está acontecendo. A sintaxe do link oculto (e automático) é a seguinte:

<html><body>

Passe o mouse aqui no final dos pontinhos e vá para outra página...........

<a href="3.html"onmouseover="parent.location='3.html'" style="text-decoration:none">

</a>

</body></html>

Visualização:


26

Quando abre a página:

Depois que passa o mouse:

Onde (no-break space) cria um espaço em branco que será a área de atuação do link. Para aumentar essa área basta aumentar a quantidade de espaços.

Tem de se tomar cuidado, porque pode-se perder o controle da situação se tiverem muitos links ocultos, e o internauta pode pensar que o browser dele está com problema (ou algo parecido), e se irritar e abandonar sua página de vez.

onclick="alert('...')"onclick="alert('...')"Através da função onclick="alert('...')" podemos inserir uma mensagem no link. Essa mensagem aparecerá entre o clique no link e

a mudança da tela. Esse recurso é útil para mensagens de aviso em geral, pois a caixa de mensagem abrirá antes da página destino ser carregada.

<html><body>

<a href="2.html" onclick="alert('Tchau.... você está prestes a sair desse site e entrar em outro!')">

Clique aqui e vá para outro site</a>

</body></html>

Visualização:

Quando abre o site:

Quando clica no link:

Depois de clicar em "ok" (abre o site destino):

mailto:mailto:Podemos acionar o programa de e-mail diretamente de uma página HTML usando uma variação do comando <a>, que usa a opção

mailto no lugar da URL.


27

<html><body>

<a href="mailto:[email protected]"> Clique para me mandar um mail

</a> </body>

</html>

Visualização:

Se quiser que uma figura seja o link que acionará o seu programa de e-mail, coloque <img src="minha_figura.gif"> antes de </a> (minha_figura.gif é o nome do arquivo de imagem – como esse pombinho).

O atributo border="0" elimina a borda e deixa um acabamento mais apresentável em figuras com movimento. <body>

<a href="mailto:[email protected]"> <img src="imagens\minha_figura.gif" border="0">

</a></body>

Visualização depois de clicar na figura:

Você pode enviar E-mail para múltiplos destinatários simplesmente colocando os endereços E-mail separados por vírgulas. Exemplo: <a href="mailto:[email protected], [email protected], [email protected]">

Criando Links Para DownloadPara colocar uma relação de arquivos para o usuário fazer download, o jeito mais organizado é o seguinte:Primeiro, crie um diretório (pasta) chamada "download" no servidor onde sua homepage está hospedada (no local onde o seu site

está), ali serão colocados os arquivos que serão disponibilizados. Depois, basta utilize a tag <a href> (a mesma tag utilizada para criar os links) e direcione os arquivos indicando sua URL (o

caminho, tais como o nome do diretório e o nome do arquivo).

Por exemplo, criei o diretório download e dentro dele coloquei o game Fooblillard3

<html><body>

<a href="download\foobillard3.rar">Clique aqui para download do game Foobillard 3.0

</a> </body>

</html>

Visualização:


28

Como o arquivo está zipado, ele pergunta se quero abrir (utilizando um aplicativo) ou salvar.....Se o arquivo fosse um vídeo, por exemplo, não estivesse compactado e eu tivesse um plug-in que o reconhecesse, ele seria automaticamente executado e a janela (figura acima) não apareceria.

Compactar (zipar) os arquivos (e não simplesmente colocá-los para download) diminui o tempo de download (facilitando a vida do internauta).

Abrir no Browser Arquivos de Outros Softwares

Imagine que tenhas uma planilha do Excel (ou outro tipo de arquivo) para disponibilizar no seu site e não tens paciência de convertê-la para HTML..... Faça com que esse arquivo (essa planilha) abra no browser, mesmo sem estar em HTML!!!!!

Basta indicar o nome completo do arquivo e colocar o parâmetro target="window" para que o arquivo seja aberto em outra janela. Atenção!!!!! Mesmo que esse arquivo esteja sendo visualizado no browser, é necessário que o usuário tenha um software que

reconheça arquivos com tal extensão. Por exemplo, o arquivo que vou disponibilizar é o dados.xls. Mesmo que ele seja aberto numa janela do browser, tenho que ter o Excel instalado na minha máquina (ou outro software que abra arquivos .xls)

<html><body>

<a href="download\dados.xls" target="window">Veja uma planilha do Excel no seu browser

</a> </body>

</html>

Visualização:

Configurando a Página Inicial -


29

Página de Abertura Para fazer com que determinado site seja habilitado como a página inicial do usuário (a primeira página a ser carregada quando

abrimos o browser), usamos o código a seguir (o browser pedirá uma confirmação para o usuário quando ele clicar no link).

<html> <body>

<a href="#" unclick="this.style.behavior='url(#default#homepage)'; this.setHomePage ('anacarol.blog.br');">

coloque o site da disciplina como sua página inicial.</a>

</body></html>


30

5 Imagens5 Imagens<img atributos><img atributos>

Não existe a terminação </img>. insere uma imagem no documento. utilizado dentro de: elementos de formatação de caracteres, listas, tabelas, formulários, links

src="..."

A URL da imagem é o único atributo obrigatório. LembrE-SE: A posição do comando img antecede o texto em todos os exemplos abaixo.

align="top | middle | bottom | left | right"

Alinha a imagem em relação ao texto pelo topo, meio, base (default), esquerda e direita, respectivamente.

Exemplos:

align="top": Alinha a parte de cima da imagem com a parte mais alta da linha. Causa falha de seqüência.

<html><body>

<img src="imagens\leaf6.jpg" align="top"> Alinha a parte de cima...... ....................e se continuar o texto, a linha de baixo fica muito distante da de cima.

</body></html>

Visualização:

align="middle": Alinha a base do texto com a linha média da imagem. Também causa falha.

<html><head></head> <body>

<img src="imagens\sorriso.gif" align="middle"> Alinha a base do texto com a linha média da imagem. Quando o texto troca de linha, salta para a parte inferior da figura também causando uma falha de continuidade.

</body></html>

Visualização:

align="bottom": Alinha a parte de baixo da imagem com a base do texto. isso não causa descontinuidade.

<html>


31

http://orbita.starmedia.com/~edaurelio/a6.htm




<body><img src="imagens\fnt14001.jpg" align="bottom"> frase fica na parte de baixo

da figura &Eacute muito usada uma figura como letra capitular (como o "A" no início dessa frase), como em jornais e revistas.

</body></html>

Visualização:

align="left": Posiciona a imagem no canto esquerdo jogando todo o texto para a direita. Após o término da imagem o texto volta a ocupar a largura normal da página e ficando em baixo da figura. isso não causa falha de continuidade do texto.

<html><body>

<img src="imagens\raio.jpg" align="left"> O texto fica do lado Direito da figura, continua percorrendo toda ela e se a frase for muuuuuuiiiiito grande, termina em baixo dela. Esse é um jeito inteligente de usar figuras sem atrapalhar a leitura.

</body></html>

Visualização:

align="right": Alinha a imagem à direita forçando o texto a ocupar todo o lado livre a esquerda. É o contrário do exemplo anterior.

<html><body>

<img src="imagens\star.jpg" align="right">O texto começa do lado ESQUERDO e depois de percorrer toda a figura, ele termina de baixo dela, sem atrapalhar a leitura e sem deixar espaço vago.

</body></html>

Visualização:

Não existe um atributo em img que centraliza a imagem envolvendo-a com textos a sua esquerda e direita. Para isso temos que recorrer a tabela. Exemplo:

<body><table>

<tr><td width="250" style="text-align:justify">

Texto lado esquerdo...</td><td width="150">

<img src="imagens\sol3.gif"></td> <td width="250" style="text-align:justify">

Texto lado direito...</td>

</tr></table>

</body>


32

Visualização:

width="largura", height="altura"

informa a largura e a altura da imagem, em pixels. Com esses parâmetros, o browser reserva espaço para a figura e mostra logo o texto. Ao colocar o sinal % após algum valor em "width", ele calculará esse valor (em porcentagem) em relação à largura da janela.

<body><img src="imagens\mundo.gif" width="100%" height="80">

</body>

Visualização:

<body><img src="imagens\mundo.gif" width="45%" height="150">

</body>

Visualização:

border="valor"

Permite criar e alterar o tamanho da borda ao redor da imagem, sendo que: border="0" oculta a borda.:

<body><img src="imagens\brass.jpeg" border="0"> <br><img src="imagens\brass.jpeg" border="1"><br><img src="imagens\brass.jpeg" border="5">

</body>

Visualização:


33

vspace="y" hspace="x"

Cria um espaço entre a imagem e o texto que a envolve. Parece uma moldura invisível.

<body><img src="imagens\2bois.gif" vspace="20" HSPACE="20" align="left">Observe: ****************************** ****************** ************

****************************** ****************************** ***** ************** *********** *********** ******************* ****************************** ********* *************************** Parece que essa figura tem uma margem (ou uma moldura) invisível!</body>

Visualização (hspace="20")

<body><img src="imagens\2bois.gif" vspace="20" HSPACE="80" align="left"> Agora com HSPACE=80 ****************************** ****************************** ****************************** ****************************** ****************************** ****************************** ****************************** ************************************

</body>

Visualização: (hspace="80")


34

alt="texto"

É um rótulo que aparece quando posiciona-se o mouse sobre a imagem... muito útil quando o browser do internauta não permite exibição de imagens (ao menos a pessoa vai poder saber o que teria ali naquele lugar).

<body><img src="imagens\brasil.gif" alt="Bandeira do Brasil">

</body>

Visualização:

onmouseover, onmouseout="imagem"

Estes dois atributos fazem com que, ao passar o cursor sobre um objeto, ele execute uma função pré-programada.Essa figura é um link para o site 2.html, mas quando passa-se o mouse sobre ela, ela modifica a barra de status do Windows,

exibindo a frase: " Assim se modifica a barra de status".

<body><a href="2.html" onmouseover="window.status="Assim se altera a barra de

status";return true;" onmouseout="window.status=''; return true;"><img src="imagens\elefante.gif" name="imagem2">

</a></body>

Visualização: (com o mouse fora da figura)

Com o mouse sobre a figura...:

Criando um Diretório de Imagens Reduzidas


35

Visando diminuir o tamanho de seu site (e, assim, o tempo de transferência dele), auxiliando quem não tem banda larga, usa-se muito imagens reduzidas com link para sua correspondente em tamanho natural

uma forma interessante de se fazer isso é:Primeiro, criar uma página HTML que contenha a figura em tamanho real.Segundo colocar na sua página a figura estipulando os parâmetros width="" height="", obviamente, deixando a figura menor do

que ela realmente é, e fazer essa figura pequena ser um link para a página que contem a figura em tamanho real (grande).Página com figura pequena:

<body><a href="janela.html">

<img src="imagens\janela.jpg" width="60" height="41" alt="ir para Janela.jpg"></a>

</body>

Página com figura em tamanho real (janela.html)

<body><img src="imagens\janela.jpg"

</body>

Visualização (figura em tamanho menor):

Depois de clicar na figura pequena:

Imagem de Baixa Resolução lowsrc="arquivo"

Este atributo, do comando <img>, faz com o browser exiba uma imagem inicial, de baixa resolução, enquanto carrega a imagem definitiva. Logicamente para que a tática dê certo a imagem de baixa resolução deve ser bem menor que a definitiva.

<img src="arquivo1" lowsrc="arquivo2">

A imagem de baixa resolução coloque em "arquivo2".


36

6 Elementos Especiais6 Elementos Especiais<applet> ... </applet><applet> ... </applet>

Esta tag inclui um programa executável em Java na página, os applets Java, como são chamados. São programas de computador acionados pelos documentos em HTML. Os applets são transferidos a partir de um servidor Web para, em seguida, serem executados no computador do usuário. Os applets Java são multiplataforma, isto é, eles funcionam em PC, Macintosh, Sun, IBM ou Hewlett-Packard. Esse tipo de independência de plataforma tem sido a razão de seu maior sucesso.

code="classe Java"

informa o nome do arquivo executável que será carregado ou a sua URL completa.

codebase="URL base"

informa o caminho para o arquivo executável citado em code. É obrigatório se não foi fornecida a URL completa em code.

name="nome"

Fornece um rótulo para o applet (opcional)

align, alt, hspace, vspace, height, width

idênticos aos atributos de mesmo nome de <img>

Basta copiar o arquivo .class para o diretório onde está o arquivo HTML que irá exibir o efeito, depois insira no arquivo HTML os seguintes parâmetros:

<applet code="meu_arquivo.class" width="310" height="42"><param name="text" value="Título"><param name="fontname" value="Arial"><param name="bgcolor" value="cd853f"><param name="fontstyle" value="B"><param name="fontsize" value="30"><param name="sleeptime" value="180">

</applet>

cole esse código-fonte no arquivo HTML onde você quer que o efeito apareça. Seus parâmetros de configuração são o seguinte:

width=310 height=42 é o tamanho da janela onde o texto está contido;text value especifica o texto que irá exibir o efeito;fontname especifica o tipo da fonte;bgcolor a cor de fundo;fontstyle o efeito (no nosso exemplo ela está em negrito "B");fontsize o tamanho da fonte e finalmentesleeptime que determina o tempo de duração do efeito apresentado.

Quando abre uma homepage que possui os aplicativos applets Java o arquivo é copiado automaticamente para o seu diretório de arquivos temporários. Para localizá-lo basta clicar em [iniciar], na barra de ferramentas do Windows e depois em [Localizar]. Digite *.class <encher>. O comando de busca irá apresentar uma relação de todos os applets que você foi adquirindo pelas suas jornadas na Web. O RainbowText.class estará entre eles. Basta copia-lo para o diretório de sua homepage e pronto.

<param atributos> <param atributos> Fornece parâmetros para um applet. É utilizado dentro de: <APPLET>

name="nome"


37

informa o nome do parâmetro (definido no applet).

value="valor"

informa o valor do parâmetro (definido pelo autor da página).

<font atributos> ... </font> <font atributos> ... </font> Altera tamanho, tipologia e cor do texto marcado. Pode conter texto, formatação de caracteres e ser utilizado dentro de blocos,

listas, tabelas, formulários.

size="valor" ou "incremento"

Altera o tamanho do texto. Pode ser através de um valor de 1, o menor, até 7, o maior (o padrão é 3, caso não seja especificado o tamanho) ou através de incrementos de -3 a +3.

No exemplo abaixo cada letra está com um tamanho diferente, partindo do tamanho 7 em ordem decrescente, depois crescente, depois decrescente...

<body> <font size="7">

T</font><font size="6">

A</font><font size="5">

M</font><font size="4">

A</font><font size="3">

N</font><font size="2">

H</font><font size="1">

O </font><font size="2">

D</font><font size="3">

A </font><font size="4">

F</font><font size="5">

O</font><font size="6">

N</font><font size="7">

T</font><font size="1">

E</font>

</body>

Visualização:


38






color="#rrggbb" ou "nome"

Altera a cor do texto. Pode ser através do valor RGB (Red/Green/Blue) ou através de um dos 16 nomes padrão VGA do Windows. Os valores RGB estão na base hexadecimal (0 a 9, A, B, C, D, E, F).

NOME PADRÃO CÓDIGO NOME PADRÃO CÓDIGO

red ff0000 maroon 800000

lime 00ff00 green 008000

blue 0000ff navy 000080

yellow ffff00 olive 808000

aqua 00ffff teal 008080

fuchsia ff00ff purple 800080

white ffffff silver c0c0c0

black 000000 gray 808080

<body> <font size="7" color="red">

T</font><font size="6" color="008000">

A</font><font size="5" color="0000ff">

M</font><font size="4" color="ab0125">

A</font><font size="3" color="red">

N</font><font size="2" color="008000">

H</font><font size="1" color="0000ff">

O</font><font size="2" color="ab0125">

D</font><font size="3" color="red">

A</font><font size="4" color="008000">

F</font><font size="5" color="0000ff">

O


39

</font><font size="6" color="ab0125">

N</font><font size="7" color="red">

T</font><font size="1" color="008000">

E</font>

</body>

Visualização:

face="nome de fonte"

Altera a tipologia do texto de acordo com o nome de uma fonte disponível no sistema local. Se a fonte não estiver disponível, não será alterada.

<body> <font size="7" color="red" face="Monotype Corsiva">

T</font><font size="6" color="008000" face="MS Sans Serif">

A</font><font size="5" color="0000ff" face="Courier New">

M</font><font size="4" color="ab0125" face="TimesRoman">

A</font><font size="3" color="red" face="Arial Narrow">

N</font><font size="2" color="008000" face="impact">

H</font><font size="1" color="0000ff" face="Georgia">

O</font><font size="2" color="ab0125" face="Verdana">

D</font><font size="3" color="red" face="Arial Black">

A</font><font size="4" color="008000" face="Century Gothic">

F</font><font size="5" color="0000ff" face="Garamond">

O</font><font size="6" color="ab0125" face="Tunga">

N</font><font size="7" color="red" face="Wingdings">

T</font><font size="1" color="008000" face="Sylfaens">

E</font>

</body>


40

Visualização:

<br atributos><br atributos>Break Line - Quebra de linha. Força o texto que o segue a iniciar na próxima linha. É utilizado dentro de: cabeçalhos, elementos de

formatação de caracteres, blocos, células de tabelas, itens de listas.

<body> Esse é um texto muiiiiiiiiiiiiiiiiiiitoooooooooooooooooooooooo <br>longo por isso depois da palavra looooongo eu coloquei um br e vou colocar outro

agora <br>agora ja passei para a outra linha.

</body>

Visualização:

clear="left", "right", "all"

Sem a opção clear simplesmente introduz uma quebra de linha. Com a opção clear=left, quebra a linha e desce até encontrar uma margem esquerda limpa. clear=right faz o mesmo em relação à margem direita e clear=all, desce até encontrar ambas as margens livres de figuras.

<nobr> ... </nobr><nobr> ... </nobr>Esse comando evita que o texto seja quebrado em mais de uma linha, ou seja, o texto envolvido por <nobr>...</nobr> irá ter

somente uma linha não importando a quantidade de palavras que ele contenha.

<body> <nobr>

Esse é um texto longo mas como tem essa tag antes, ele não quebra de jeito nenhum, tendo que ficar rolando a página de um lado para o outro para conseguir ler... chato, n&atildeo?

</nobr></body>

Visualização:

<wbr> <wbr> Word Break . indica ao browser onde o texto pode ser quebrado. Esta tag é usada em conjunto com <nobr>.

<body> <nobr>


41

http://orbita.starmedia.com/~edaurelio/a4.htm#li

http://orbita.starmedia.com/~edaurelio/a5.htm#td




http://orbita.starmedia.com/~edaurelio/a3.htm#h1

Esse é um texto longo mas como tem essa tag antes, ele não quebra de jeito nenhum, tendo que ficar rolando a

<Wbr>página de um lado para o outro para conseguir ler... chato, n&atildeo?

</nobr></body>

Visualização:

<map atributos> ... </map > <map atributos> ... </map > O formato de imagem mais usado na internet é o gif e o jpg. Eles foram adotados devido seu tamanho comprimido, otimizando o

tempo de abertura das homepages que utilizam imagens, fotos ou figuras em gerais. Tais imagens podem ser mapeadas de forma que uma determinada área sua possa ser vinculada a uma âncora de acesso para outros links. Mapear uma imagem consiste em determinar as coordenadas da imagem que pertencem a uma área de link com pontos de ativação. Existem duas maneiras de se fazer isso.

uma imagem é formada por pixels (pontos). Seu tamanho é dimensionado pelos eixos X (largura) e Y (altura). A imagem dos limões, abaixo, possui a dimensão de 81 x 66 pixels. Portanto suas coordenadas partem do canto superior esquerdo (0 x 0) e vão até o canto inferior direito (81 x 66).

Para verificar a dimensão de uma imagem basta clicar sobre ela com o botão direito do mouse e depois selecionar Propriedades (no browser ou no Explorer, por exemplo), ali é apresentado várias informações sobre a imagem, entre elas sua dimensão.

Mapear uma imagem consiste em informar ao browser que determinada área da imagem irá acessar outro link, por exemplo pode-se te ruma imagem onde cada parte dessa mesma imagem acessa um link diferente.

name="nome_do_mapa"

Rotula o mapa com um nome que pode ser referenciado por uma imagem através do atributo usemap.

ismap

indica que a figura é uma imagem mapeada (imagemap) controlada pelo servidor (o mapa é estabelecido por arquivo separado, no servidor).

usemap="#nome_do_mapa"

indica que a figura é uma imagem mapeada (imagemap) controlada pelo cliente (o mapa é estabelecido pelo elemento <map>, na mesma página HTML). #nome_do_mapa informa o rótulo do mapa <map> usado pela imagem.

<body> <center>

<img src="imagens\lemon.gif" usemap="#meu_mapa" border="1"><map name="meu_mapa">

<area shape=rect coords="0,0,40,33" href="outra_pagina.html"></map>

</center></body>

Observe o comando img src="...", especificando o nome da imagem, com o parâmetro usemap="#...", especificando o nome do mapa, antecedendo o comando map name="...". Agora movimente o cursor sobre a imagem e observe que no seu primeiro 1/4 aparece a opção de âncora para outro arquivo HTML (outra_pagina.html).


42

http://orbita.starmedia.com/~edaurelio/a15.htm#map

<area atributos> <area atributos> Define coordenadas para imagens mapeadas. As coordenadas variam conforme o tipo da área a ser mapeada. A área do tipo circular possui duas coordenadas, uma para definir o centro do círculo e outra para definir o raio. A área retangular possui duas coordenadas, também, uma para o vértice superior esquerdo e outra para o vértice inferior direito. A área poligonal possui uma coordenada para cada vértice, conforme o tipo da poligonal. É utilizado somente dentro de: <MAP> Determinar as coordenadas de uma área quadrada ou retangular até que é fácil, o problema começa a complicar quanto tentamos

definir as áreas circulares ou, pior, as poligonais de uma imagem qualquer, por exemplo temos uma foto de uma pessoa e queremos que quando clicamos na cabeça aponte para uma página, nos pés para outra e nas mãos para outra. Para isso temos diversos softwares shareware ou freeware que faz todo o trabalho matemático, como o Map This v1.31 (870Kbytes).

shape="circ", "poly" ou "rect"

Círculo, polígono ou retângulo, respectivamente.

coords="coordenadas"

Depende da forma: coords="x1, y1, x2, y2, x3, y3, ..." definem os vértices em um polígono; coords="x1, y1, x2, y2" vértices opostos em um retângulo; coords="x, y, r" centro e raio de um círculo.

href="URL"

informa a URL que deve ser carregada ao se selecionar a área.

nohref

Permite que a área selecionada não acione nenhum link.

Editores de Áreas Mapeadas


43

7 Bloqueando a Cópia7 Bloqueando a Cópia da Páginada Página

Esses dois atributos são colocados dentro de <body>.

oncontextmenu="return false"

Desabilita o menu que é acionado através do botão direito do mouse – mesmo que a pessoa clique com o direito (para copiar e colar, por exemplo), esse , menu não abrirá.

onselectstart="return false"

O usuário não consegue selecionar o texto - botão esquerdo do mouse pressionado e arrastado sobre o texto.

  São anotações que só podem/devem ser vistas por quem for bisbilhotar o código fonte. Tudo o que for

escrito entre o  será ignorado pelo browser e não será mostrado na tela. Ele pode ser usado em qualquer lugar do documento. Outro comando com função similar é o <comment> ...</comment>.

utilize sempre comentários: são eles que localizam o programador dentro do código e não devem ser usados somente em outras linguagens de programação, mas em HTML também devemos adotá-lo!

<html><head> 

<title> Página com alguns comentários

</title></head> <body> 

<comment> isso também é um comentário, mas desta vez utilizei uma

tag em vez dos símbolos!!</comment>Você está vendo PARTE do código HTML deste site....

Para saber TUDO que contém nele, verifique o código fonte!!!

</body> </html>

Visualização:


44

8 Formatação de8 Formatação de textos e caracterestextos e caracteres

São elementos usados para destacar trechos de texto.

Podem ser lógicos (sugerem uma utilização para o texto destacado: grifo, destaque, variável, trecho de código, etc.) ou físicos ( somente dão uma formatação específica para o trecho: negrito, itálico, etc)

A ação dos físicos restringe-se à capacidade de visualização do browser (alguns podem não interpretar). Tanto lógicos quanto físicos podem conter: texto, elementos de formatação de caracteres, <a>, <img>, <br> e são permitidos

dentro de: cabeçalhos, elementos de formatação de caracteres, <a>, <pre>, <p>, <li>, <dd>, <dt>, <td>

Elementos Lógicos

<strong> ... </strong><strong> ... </strong>Destaque (geralmente negrito).

<em> ... </em><em> ... </em>Grifo (geralmente itálico).

<cite> ... </cite><cite> ... </cite>Citação (geralmente itálico)

<var> ... </var><var> ... </var>variável (geralmente itálico)

<samp> ... </samp><samp> ... </samp>Amostra (geralmente fonte de largura fixa)

<kbd> ... </kbd><kbd> ... </kbd>Teclado (geralmente fonte de largura fixa)

<dfn> ... </dfn><dfn> ... </dfn>indica definição de uma palavra (geralmente em itálico)

<code> ... </code><code> ... </code>Quando se deseja mostrar códigos de programas em geral, e não se quer que o browser interprete tais códigos, usa-se esse tag

(geralmente fonte de largura fixa).


45

http://orbita.starmedia.com/~edaurelio/a5.htm#td

http://orbita.starmedia.com/~edaurelio/a4.htm#dt

http://orbita.starmedia.com/~edaurelio/a4.htm#dd

http://orbita.starmedia.com/~edaurelio/a4.htm#li

http://orbita.starmedia.com/~edaurelio/a3.htm#p

http://orbita.starmedia.com/~edaurelio/a3.htm#pre


http://orbita.starmedia.com/~edaurelio/a3.htm#h1

http://orbita.starmedia.com/~edaurelio/a8.htm#br

http://orbita.starmedia.com/~edaurelio/a8.htm#img

http://orbita.starmedia.com/~edaurelio/a8.htm#a

<pre> ... <pre> <pre> ... <pre> Permite que o texto apareça tal qual a gente o escreve (inclusive com as quebras de linha sem colocar o br . quando eu pular de

linha ele pula também)

<body><strong>

Texto como strong</strong><br><em>

Texto como em</em><br><cite>

Texto como cite</cite><br><var>

Texto como var</var><br><samp>

Texto como samp</samp><br><kbd>

Texto como kbd</kbd><br><dfn>

Texto como dfn</dfn><br><code>

Texto como code</code><pre>

isso é um texto com pre e aqui eu dei um monte de espacos e troquei de linha e troquei de novo.... e o browser me mostrou tal qual eu escrevi - mesmo sem eu ter colocado br

</pre></body>

Visualização:


46

Elementos Físicos

<b> ... </b><b> ... </b>Negrito

<i> ... </i><i> ... </i>itálico

<tt> ... </tt><tt> ... </tt>Teletipo

<u> ... </u><u> ... </u>sublinhado

<strike> ... </strike><strike> ... </strike>Texto riscado

<del> ... </del><del> ... </del>Texto riscado

<s> ... </s><s> ... </s>Texto riscado

<sub> ... </sub><sub> ... </sub>Texto subscrito (como os números de fórmulas químicas)

<sup> ... </sup><sup> ... </sup>Texto Sobrescrito (como exponenciais matemáticos)

<small> ... </small><small> ... </small>Texto menor

<big> ... <big> ... </big></big>Texto maior – o contrário de small


47

<blink> ... </blink><blink> ... </blink>Texto Pulsante

<body>Texto normal<br><B>

Texto como B</b><br><i>

Texto como i</i><br><tt>

Texto como Ti</tt><br><u>

Texto como u</u><br><strike>

Texto como strike</strike><br><del>

Texto como del</del><br><s>

Texto como S</s><br>Texto normal e <sub>

texto como sub</sub><br>Texto normal e<sup>

texto como sup</sup><br><small>

Texto como small</small><br><big>

Texto como big</big><br><blink>

Texto como blink</blink>

</body>

Visualização:


48

Pode-se usar vários comandos se formatação ao mesmo tempo, mas sempre a primeira tag a ser aberta é a última a ser fechada ;)

Você também pode usar vários comandos de formatação ao mesmo tempo sobrepondo-os, sempre seguindo a lógica LIFO, isto é: A primeira tag a ser aberta, é a última a ser fechada

<body><b>

<i><u>

Este texto está com bold, itálico e sublinhado.</u>

</i></b><br><tt>

<strike>Este texto está com teletipo riscado.

</strike></tt>

</body>

Visualização:

Objetos em movimento:marquee

Propriedade que possibilita o efeito de rolamento de um objeto (texto, quadro ou imagem) para a esquerda ou direita, para cima ou para baixo como também define sua velocidade. A sintaxe é a seguinte:

<marquee atributo="efeito">objeto

</marquee>

align="top", "middle", "bottom"

Alinha o texto pelo topo, meio e inferior, respectivamente.

behavior =scroll, slide, alternate

Scroll inicia o texto aparecendo de um lado e segue até desaparecer a última letra do outro, slide inicia o texto de um lado e segue até a primeira letra tocar o lado oposto (bate e estaciona, não volta), então ele pára; e alternative onde o texto aparece de um lado e segue até tocar o lado oposto, então ele retorna (o bate-e-volta)


49

http://orbita.starmedia.com/~edaurelio/a0.htm#lifo

bgcolor="cor"

Especifica a cor de fundo. Pode ser pelo nome da cor ou através de seu código RGB.

direction=left, right, up, down

Especifica a direção do texto, esquerda (default), direita, para cima e para baixo, respectivamente.

height="número", %:

Especifica a largura do painel. Se for um número ele especifica a quantidade de pixels se for % ele especifica a largura da janela do marquee em porcentagem.

hspace="número"

Especifica a largura em pixels das margens esquerda / direita.

loop="número", -1 a infinite

Especifica quantas vezes será executado a rolagem do texto, se o valor for -1 ou infinite, o texto rolará infinitamente.

scrollamount="número"

Especifica a quantidade de pixels que será usada para deslocar o marquee, ou seja, quanto maior for o valor, maior será a velocidade de deslocamento.

scrolldelay="número"

Especifica em milissegundos o tempo de deslocamento do texto.

vspace="número"

Determina em pixels a margem superior e inferior do marquee.

width="número", %

O número especifica a altura do painel, % especifica a altura em relação a janela em porcentagem.

Texto centralizado em fonte tamanho 5 (<font size="5">) rolando numa faixa de 70% (width=70%) da tela entre duas barras <hr> :

<body><center>

<hr width="80%"><marquee behavior="scroll" width="70%">

<font size="5"><b>

Não esqueça de fazer backup de seus arquivos.</b>

</font></marquee><hr width="80%">

</center> </body>

Visualização:


50


Agora um exemplo com o texto e imagem rolando (scroll) de baixo para cima direction="up e diminui a velocidade do movimento scrollamount="1" (bem devagar) de forma que ela irá correr lentamente como na abertura de um filme.

<body><marquee behavior="scroll" direction="up" scrollamount="11">

<img src="imagens\3sun5a.gif" align="left"><center>

<i>Texto...

</i></center>

</marquee></body>

Visualização:

início da rolagem:

Final da rolagem:

Texto em movimento alternado (behavior=alternate) (bate-e-volta), da esquerda pra direita (left, default) e cor de fundo (bgcolor="dda0dd").

<body><marquee behavior="alternate" direction="left" bgcolor="dda0dd">

<font size="5"><b>


51

<i>isso é ótimo para tontear alguém!!:D

</i></b>

</font></marquee>

</body>

Visualização:

inicio:

Bate:

Volta:

Combinação de marquee com rolagens em direções alternadas (um da direita para a esquerda e outro da esquerda para a direita). A porcentagem divide a tela ao meio! Se tirar a porcentagem fica cada um correndo em linha diferente!!!

<body><marquee behavior="scroll" direction="left" width="50%" bgcolor="ffa500">

<font color="ff4500">Agora marquees combinados

</font></marquee><marquee behavior="scroll" direction="right" width="50%" bgcolor="ff7f50">

<font color="191970">sodanibmoc seeuqram arogA

</font></marquee>

</body>

Visualização:

início:

Final:

Aqui aumentei a velocidade de rolamento do texto com scrollamount="30". (Cuidado com a velocidade!!! Seu usuário pode não conseguir ler um "texto a jato" ;P

<body>


52

<marquee behavior="scroll" direction="right" scrollamount="30"><font color="green">

<b>Vc disse que sabe ler rápido? :))

</b></font>

</marquee></body>

Visualização:

início:

Final:

Rolamento de um texto com várias linhas (utilizando o comando <pre>)

<body><marquee behavior="scroll" direction="left" scrolldelay="150" vspace="20">

<font size="3" color="#ff00ff"> <pre>

<b>Agora bem devagarzinho...

Você pode fazer efeitos de movimento com várias linhas também.

</b></pre>

</marquee> </body>

Visualização:início:

Final:

Rolamentos de texto dentro de uma tabela... Espero que tenha ficado didático – ao menos para demonstrar que marquee também funciona em tabelas

<body><center>

<table border="5" bgcolor="#ffd700" width="450"><tr>


53

<td bgcolor="#00bfff"><marquee behavior=scroll direction=left scrollamount="3">

<b>uma célula

</b></marquee>

</td><td colspan=2 bgcolor="#9acd32">

<marquee behavior=scroll direction=left scrollamount="3"><b>

outra!!</b>

</marquee></td><td bgcolor="#f0e68c">

<marquee behavior=scroll direction=left scrollamount="3"><b>

mais uma!!</b>

</marquee></td>

</tr><tr>

<td colspan=4 bgcolor="#483d8b"><marquee behavior=scroll direction=right scrollamount="3">

<font color="#ffffff">isso é uma tabela com marquee

</font></marquee>

</td></tr>

</table></center>

</body>

Visualização:

início:

Final:

uma imagem com movimento!

<marquee behavior="scroll" direction="left" scrolldelay="140" scrollamount="20"> <img src="imagens\cat_toilet.gif">

</marquee>

Visualização:

início:


54

Fim:

Página com uma janela (criada com a tag <iframe>) com o arquivo 2.html, sendo que a sua página (fora da janela) recebe um background (pingüins) .

<body background="imagens\pinguins2.gif"><center>

<iframe src="pagina_da_janela.html" width="650" height="90" scrolling="auto" frameborder="1">

</iframe><br>Esse texto não está mais no frame, está no seu site

mesmo!!</center>

</body>

Visualização:


55


56

9 Formatações9 FormataçõesVamos aplicar formatações a títulos, cabeçalhos, parágrafos, textos espaçados, saltos de linha, endentação, centralização de

objetos, formatação de diversos tipos de linhas..

<H1, H2, ..., H6 atributos><H1, H2, ..., H6 atributos></H1, H2, ..., H6> </H1, H2, ..., H6>

São disponíveis seis níveis de cabeçalhos formando uma hierarquia descendente em tamanho. Os comandos de cabeçalho incluem uma linha antes e outra depois (não necessita colocar um <br> depois que termina a frase... ele pula a linha automaticamente).

As tags <H1, H2, H3, H4, H5, H6> apresentam apenas 6 tamanhos de cabeçalho sendo o <H1> o maior tamanho. Podem conter: texto; todos os elementos de formatação de caracteres; <a>, <img>, <br>, etc.. é utilizado dentro de: <body>,

<form>, <blockquote>, <center>, <div>

align="center", "left", "right" ou "justify"

Alinha o cabeçalho no centro, à esquerda (padrão), à direita ou pelas duas margens, respectivamente.

<body><h1 align="center">

h1 com align=center</h1> <h2 align="left">

h2 com align=left</h2><h3 align="right">

h3 com align=right</h3><h4 align="justify">

h4 com align=justify. ou seja, fica parelha a margem esquerda e a margem direita, como um bloco de texto ' quadradinho'. sem aquelas ' idas e vindas' como fica o caderno da gente.ah! isso se o parágrafo for muito grande, se for somente uma linha, fica só alinhadinho à esquerda, viu? </h4>

<h5 align="center">h5 com align=center

</h5><h6>

h6 com align default - sem eu ter especificado</h6>

</body>

Visualização:

style="propriedades"


57

atributo de <H...>.Altera a apresentação do cabeçalho (cor, fonte, tamanho, sublinhado, estilo) de acordo com uma lista de propriedades de estilo.

Por exemplo. formatar a palavra "Computador" em azul marinho, fonte Helvetica (ou, na ausência desta, a fonte Sans-serif), com 2 cm de tamanho (pode-se usar pt,. in,. cm também ).

<body><h3 style="color: navy; font-family: Helvetica, Sans-serif; font-size: 2cm">

Computador</h3>

</body>

Visualização:

<p atributos> ... </p> <p atributos> ... </p> P (Paragraph) – Parágrafo é usado para separar blocos de texto (geralmente com o espaço de uma linha entre eles). É opcional

usar </p>. é utilizado dentro de: <body>, <form>, <blockquote>, <center>, <li>, <dd>, <div>

align

"center", alinhamento pelo centro; "left" - alinhamento pela esquerda, (default),"right" - alinhamento pela direita ou "justify" (justificado) - alinha o texto pelas duas margens. O modo justificado permite dar ao parágrafo uma aparência mais profissional e organizada, já que os textos ficam alinhados de maneira uniforme entre as margens esquerda e direita.

<body><p align="justify">

Para inovar é preciso olhar as coisas de uma nova forma, entender as pessoas, ter vontade de assumir riscos e trabalhar pesado. uma idéia não se transforma em inovação até que tenha sido largamente adotada e incorporada à vida das pessoas. Muita gente teme mudanças, portanto, uma peça-chave do processo é convencer os outros de que sua idéia é boa. Você pode simplesmente incorporar a ajuda deles e, fazendo isso, estará ajudando-os a descobrir a utilidade de sua idéia.

</p></body>

Visualização:


formata o parágrafo (cor, fonte, tamanho, sublinhado, estilo) de acordo com uma lista de propriedades de estilo. Parágrafo na cor verde 006400, fonte Verdana ou, na ausência dessa, a fonte Sans-serif em itálico com tamanho 11pt

<body>


58

<p style="color:006400; font-family: verdana, sans-serif; font-style: italic; font-size: 11pt">

Se você quer inovar, precisa de três coisas: um certo grau de conhecimento na área; um desejo grande de fazer algo útil (seja para a sociedade ou para a indústria) e um objetivo.

</p></body>

Visualização:

No exemplo acima se está formatando apenas um parágrafo, os demais manterão a configuração padrão (conforme pode ver). Mas se o desejo for tornar essa configuração como formato padrão na homepage, então tem que colocar a sintaxe abaixo entre as tags <head>...</head> da página HTML, e então todos os parágrafos terão essa formatação.

<head> <style type="text/css">

P {color: #006400; font-family: verdana, sans-serif; font-style: italic;

font-size: 11pt; }

</style></head>


59

10 Linhas Horizontais10 Linhas Horizontais <hr atributos> <hr atributos>

Horizontal Rule - Régua horizontal, usada como divisor de texto.. é utilizado dentro de: <body>, <form>, <blockquote>, <pre>, <center>, <div>

size="número"

Espessura da linha em pixels.

<body>Aqui em baixo está uma linha size=2<hr size="2"> Aqui em baixo está uma linha size=4<hr size="4"> Aqui em baixo está uma linha size=9<hr size="9"> Aqui em baixo está uma linha size=20<hr size="20">

</body>

Visualização:

width="número"

Largura da linha: número pode ser um valor absoluto em pixels ou uma percentagem em relação a largura da página (seguido de %). O default é aparecer centralizada a linha caso ela seja menor que 100% da largura da página.

<body>Linha com 20% da largura da página <hr width="20%"> Linha com 50% da largura da página <hr width="50%"> Linha com 80% da largura da página <hr width="80%"> Linha com largura de 10 pixels<hr width="10"> Linha com largura de 40 pixels<hr width="40"> Linha com largura de 90 pixels<hr width="90">

</body>

Visualização:


60

align="left", "center" ou "right"

Se for menor que a largura da página, a linha pode ser alinhada pela margem esquerda, pelo centro ou pela margem direita, respectivamente. O default é centralizado.

<body>Linha com 50% da largura da página alinhada à direita<hr width="50%" align="right"> e esta com 75% da largura e alinhada à esquerda<hr width="50%" align="left">

</body>

Visualização:

noshade

Especifica uma linha horizontal sólida, sem sombreamento (o default é a sombreada).

<body>Linhas sem sombreamento, e com size = 3, 8 e 12 respectivamente<hr noshade size="3"> <hr noshade size="8"> <hr noshade size="12">

</body>

Visualização:

color="#rrggbb" ou "nome"Profª Ana Carolina Jaskulski http://anacarol.blog.br [email protected]

61

Determina uma cor para a linha. O default é o cinza.

<body>Linhas com cores iguais a red, #00ff00 e #00ccff , respectivamente<hr noshade size="3" color="red"> <hr noshade size="5" color="#00ff00"> <hr noshade size="8" color="#00ccff">

</body>

Visualização:


62

11 Linhas Verticais11 Linhas VerticaisNão existe uma tag que cria uma linha vertical (assim como <hr> para a horizontal), o que existe são alguns macetes que substitui

esse comando.

Primeiro recurso: Se pegarmos o comando <hr> (a linha horizontal) e configurar seus atributos width para uma largura muito pequena e size para uma altura muito grande temos uma linha vertical. um problema com esse recurso é que ele não funciona para linhas verticais maiores que size="100", ou seja, a linha terá no máximo um tamanho igual ao terceiro exemplo.

<body><hr width="2" size="50"> <hr width="2" size="75"> <hr width="2" size="100">

</body>

Visualização:

Segundo recurso: aplicar o mesmo princípio (de afinar largura e alongar altura), mas em uma tabela. Os atributos são: border, cellpadding, cellpacing e height. As linhas não têm limite de tamanho.

Cria-se, então, uma tabela com UMA linha e UMA célula - sem textos!!!!! Então teremos uma linha do tamanho que necessitarmos.

<table border cellpadding="1" cellpacing="0" height="200"><tr>

<td></td>

</tr></table>

Visualização:


63

<table border cellpadding="1" cellpacing="0" height="400"><tr>

<td></td>

</tr></table>

Visualização:

Agora vou acrescentar cor e espessura.

<body><table border cellpadding="0" cellpacing="0" height="20" bgcolor="#006600">

<tr><td></td>

</tr></table><table border cellpadding="1" cellpacing="1" height="30" bgcolor="#ff2400">

<tr><td></td>

</tr></table> <table border cellpadding="1" cellpacing="2" height="40" bgcolor="#0000c9">

<tr><td>


64

</td></tr>

</table> </body>

Visualização:

Os exemplos acima criam linhas verticais livres, isso é, desvinculada com qualquer objeto, mas podemos utilizar a tag <table> (tabela) para criar linhas vinculadas a objetos. Nos exemplos a seguir o texto irá determinar o comprimento da linha, e isso é o mais prático quando se quer uma linha vertical (faz uma tabela, onde uma célula vai estar com o texto e a outra célula não conterá texto e será tão fina que parecerá uma linha)

Repare que para alterar a posição (direita/esquerda) da linha, basta alterar a posição da "célula-linha" para antes ou depois da célula que tem o texto. Para alterar cor e espessura das linhas basta configurar os atributos width e bgcolor da célula. Lembre-se: cada célula começa com <td> e termina com </td>!!!!! Cada linha da tabela começa com <tr> e termina com </tr>!!!!

<table cellpadding="0"><tr>

<td width="2" bgcolor="#db7093"></td><td width="200">

isso é um texto com uma linha do lado... aquela linha é uma célula da tabela e esse texto está em outra célula. A diferença é a espessura delas, certo?

</td> </tr>

</table>

Visualização:

Outro exemplo, mas com a linha um pouco mais grossa (lembre-se que o que diferencia é a largura das células.... se quiser a linha mais grossa, deve-se aumentar a largura da célula que não recebe texto).

<table cellpadding="0"><tr>

<td width="250">Outro exemplo de texto com uma linha grossa à direita (essa linha

é outra célula da tabela, mas à direita e mais fina que a célula desse texto aqui).

</td><td width="7" bgcolor="008000"></td>

</tr></table>

Visualização:


65

Aqui está um exemplo de uma tabela com três células, sendo que a do meio recebe o texto e as outras duas (as de fora) possuem uma largura bem estreita (width=3)

<table><tr>

<td width="3" bgcolor="purple"></td><td width="280">

Aqui está um texto com linhas dos dois lados.... Elas são duas células da tabela (uma antes e outra depois desta célula AQUI que tem este texto que você esté lendo!!!)

</td><td width="3" bgcolor="purple"></td>

</tr></table>

Visualização:

Outros Separadores de TextoO comando de inserção de imagens também pode ser usado como separador de texto, etc... Existem muitos arquivos gif ou jpeg

criados exclusivamente para isso. Para inserir um arquivo de imagem usamos o comando

<img src="arquivo.ext">

Os parâmetros width=número e height=número que altera a largura e altura da imagem pode causar alguns efeitos interessantes:

<body> <center>

<img src="imagens\linha.gif"></center><center>

<img src="imagens\vizinhanca.gif"></center><center>

<img src="imagens\mabelT.gif"></center>

</body>

Visualização:

Outros exemplos de linhas:


66


67

12 Texto Pré-12 Texto Pré-Formatado Formatado

<pre atributos> ... </pre> <pre atributos> ... </pre> pre (Preformatted Text). digitar em um código HTML vários espaços em branco entre duas palavras, de nada adiantará, o browser

só reconhecerá um. Para resolver isso é usando os tags <pre>...</pre>. O texto que estiver dentro deste elemento preservará a formatação original (o browser interpretará os espaços, retornos e tabulações). O texto pré-formatado é exibido em uma fonte de espaçamento fixo, como Courier, ou seja, cada letra vai ocupar sempre o mesmo espaço que a outra. Pode conter: texto, elementos de formatação de caracteres, <a>, <br>, <hr> e pode ser utilizado dentro de: <body>, <form>, <blockquote>, <dd>, <li>

width="..."

Opcional. informa a largura em colunas. Note que as fontes ocupam tamanho fixo, mas o tamanho das letras depende do browser:

<pre> através do comando pre

pode-se colocar texto em qualquer lugar da tela que ele sera mostrado bem igual ao codigo fonte.

inclusive com um moooooooonte de espacos e novas-linhas como esse exemplo aqui.

Cuidado!!! Se fizer linha muito longa o usuário vai ter de usar a barra de rolagem horizontal do navegador porque ele não vai quebrar a linha sozinho!!!!

</pre>

Visualização:

Espaçamento ForçadoEspaçamento Forçado


68

Non-Breaking Space.Ainda que o Webmaster adicione dez espaços com a tecla [space] várias vezes em seu código fonte, o browser irá considerar apenas um espaço. isso é muito chato quando descobrimos que o texto teima em não ficar no lugar indicado de uma coluna. uma forma de impor espaçamentos forçados é o conjunto de caracteres (non-breaking space). Repita 3 vezes se terá três espaços seguidos.

<body> 1000,00<br> 903,00<br>&nbsp 21,00<br>&nbsp&nbsp 0,23

</body>

Visualização:

usando <p> aumentando o espaçamento vertical entre cada parágrafo... esse é um jeito de ‘pular a linha’ sem usar <br>.

<body> O número de computadores de médio porte utilizados nas empresas com

Linux em todo mundo vem crescendo rapidamente.<p>

No último trimestre de 2003, sua comercialização totalizou 960 milhões de dólares: 63,1% superior às vendas no ano anterior.

</p>

</body>

Visualização:

<q atributo> ... </q> <q atributo> ... </q> É usado para citações curtas. Se parece com o blockquote.

cite=URL

Especifica a fonte da citação.:

<q cite=url>texto...

</q>:

<blockquote> ... </blockquote> <blockquote> ... </blockquote> Destacar um bloco de texto aumentando a espessura de suas margens. Pode conter: listas, cabeçalhos, separadores, blocos, formulários, tabelas e estar dentro de <body>, <form>, <dd>, <li>,

<blockquote>, <pre> Observe o deslocamento das margens dir/esq. do segundo parágrafo que foi ajustado com o parâmetro:


69

<body> Sobre JavaScript e Applets Java em sites:<br>Segundo John e Peter Kent em JavaScript para Netscape - Guia Oficial:<blockquote>

O Javascipt enviará informações da página para a applet Java, e a applet Java poderá retornar algo para a página.

</blockquote> Ou seja, o JavaScript é uma interface entre sua página e os Applets

Java.</body>

Visualização – observe o segundo parágrafo:

<address> ... </address> <address> ... </address> Bloco de texto destacado. utilizado para endereços e para assinar o documento.

<body> Veja um exemplo de address:<address>

CTT - Maxwell Educacional<br>Porto Alegre - RS - Brasil

</address> </body>

Visualização:

<div atributos> ... </div> <div atributos> ... </div> divide a página em blocos que podem ser alterados de acordo com características comuns.

align="center", "left" ou "right"

Alinha todo o bloco de acordo com a posição.


Altera a apresentação do conteúdo do bloco (cor, fonte, tamanho, sublinhado, estilo, espaçamento) de acordo com uma lista de propriedades de estilo.

<body> <div style="color: 005500; font-family: Comic Sans MS;font-size: 12pt;line-height:

14pt">


70

formata esse texto em verde, fonte Comic Sans MS 12pt (ou qualquer outra fonte sem serifa caso não tenha Comic Sans) e espaçamentos entre linhas de 14pt.

</div> </body>

Visualização:

<center> ... </center> <center> ... </center> Alinha um bloco de texto, cabeçalho, tabela ou imagem no centro da página.Pode conter blocos e ser utilizado dentro de <body>, <form>, <blockquote> e <pre>.

<body> Figuras também podem ser centralizadas:<br><br><center>

<img src="imagens\div82.gif"></center>

</body>

Visualização:

<acronym atributos> ... </acronym> <acronym atributos> ... </acronym> Esta tag indica que o conteúdo envolvido por ela é um acrônimo (abreviação formada pelas letras iniciais de uma frase.)

title

Este atributo apresenta a forma desabreviada do acrônimo, tornando desnecessária a utilização de textos explicativos sobre a abreviação (geralmente apresentada entre parênteses).

<body> Para programar em Java necessita do <acronym title = "Java Developer's Kit">

JDK</acronym>instalado.

</body>

Visualização:


71

13 Listas13 ListasUma forma de estruturar um documento HTML é a utilização de listas. Elas funcionam como um sumário, um menu ou um

resumo do conteúdo do documento. Existem dois tipos de listas: não ordenadas (que contém uma série de itens sem numeração), e as ordenadas (que atribuem um

número ou letra para cada elemento da lista).

Não Ordenada

<ul atributos> ... </ul> <ul atributos> ... </ul> uL (unordered List) é o comando usado para gerar lista não ordenada. Define os níveis (para identação). Ele deve envolver o

primeiro e o último item da lista. Cada <uL> funciona como um toque na tecla tab , sendo que se coloco um <ul> dentro de outro <ul>, eu terei uma identação no meio da lista.

Cada <li> é um tópico da lista. Não necessita </li>, mas pode ser usado!Pode conter <li> e poder ser utilizado dentro de: <li>, <dd>, <body>, <form>, <blockquote>, <td>, <center>

type= “tipo"

tipo: disc, circle ou square.

Estrutura de uma lista típica:

<ul type="disc"><li>Lista NÃO ORDENADA: <ul type="square">

<li> Vegetais<li> Animais

<ul type="circle"><li> Vertebrados<li> invertebrados

</uL><li> Minerias

</uL> </ul>

Visualização: (veja que a cada <ul> eu mudo o nível da identação)

Ordenada

<ol atributos> ... </ol> <ol atributos> ... </ol> ol (Ordered List) - Consiste no comando para a lista ordenada de itens com números, letras maiúscula ou minúscula e algarismos

romanos. Pode conter: <li> e é utilizado dentro de: <li>, <dd>, <body>, <form>, <blockquote>, <td>, <center>

type="tipo"


72

"tipo-de-numeração" descreve o formato de numeração empregado na lista. Pode ser de letras:type=A (alfabeto maiúsculas); type=a (alfabeto minúsculas); type=i (romanos maiúsculos); type=i (romanos minúsculos) ou

type=1 (numeração -default).

start="valor"

"valor" é o número no qual se inicia a contagem de numeração. Por exemplo: start=8 iniciaria a contagem a partir de 8, viii, Viii, H ou h, dependendo do valor do atributo type.

A cada novo <ol> reinicia a contagem!

Estrutura de uma lista numerada típica:

<ol type="1" START="8"><li> Melancia<li> Repolho<ol type="a">

<li> Repolho-roxo<li> Repolho-verde

</ol><li> Goiaba

<ol type="i"><li> Goiaba-branca<ol type="1">

<li> Bem madura<li> Ainda verde

</ol><li> Goiaba-vermelha

</ol></ol>

Visualização: observe Bem os níveis de texto e como reinicia a contagem a cada novo <ol>!

<li atributos> ... </li> <li atributos> ... </li> Li (List item), item de lista. O descritor de fechamento ( a tag </li> ) é opcional (em geral não é utilizado). Pode conter: outro nível de listas (<uL>, <ol>, <dl>), texto, elementos de formatação de caracteres, blocos, <a>, <img>, <br> e é

utilizado dentro de <uL> e <ol>

<dl atributos> ... </dl> <dl atributos> ... </dl> Listas de definições. NÃO possui numeração e nem caracteres de marcação (circulo, quadrado, bolinha) antes de cada tópico.

Somente identa (usando um <dl> para cada identação e um <dt> para cada tópico e <dd> para definir cada tópico)Pode conter: <dt>, <dd> e ser utilizado dentro de: <li>, <dd>, <body>, <form>, <blockquote>, <td>, <center>

compact

opcional. Especifica uma formatação compacta (que utiliza menos espaço vertical)


73

<dt atributos> ... </dt> <dt atributos> ... </dt> Marca o termo a ser definido. O descritor de fechamento é opcional e em geral não é utilizado.Pode conter: texto, elementos de formatação de caracteres, <a>, <img>, <br> e é utilizado dentro de: <dl>

<dd atributos> ... </dd> <dd atributos> ... </dd> Marca a definição do termo. O descritor de fechamento é opcional e em geral não é utilizado.Pode conter: listas , <uL>, <ol>, <dl>, texto, elementos de formatação de caracteres, blocos, <a>, <img>, <br> e é utilizado dentro

de: <dl>

<dl><dt> varanda

<dd> um cômodo de uma casa.<dt> Garagem

<dd> um local onde se estaciona.<dl>

<dt> Garagem coberta <dd> Local coberto, onde se estaciona.

<dt> Garagem aberta <dd> Local aberto, onde se estaciona.

</dl><dt> Telhado

<dd> Local onde o gato fica</dl>

Visualização (observe que não existe marcação no início dos tópicos)

Usando Figuras como Marcadores A combinação do comando <blockquote> com alguns gifs, pode criar efeitos de marcação elaborados, também. Nesse caso, a

identação (como a tecla tab do teclado) será feita a cada <blockquote>. Para cada nível mais à direita, mais um <blockquote> deve ser aberto

<blockquote><img src="imagens\cafe.gif" >Capítulo i<br><blockquote>

<img src="imagens\pipoca.gif" >Parágrafo<br><blockquote>

<img src="imagens\pipoca2.gif">Texto<br>


74

</blockquote></blockquote><img src="imagens\cafe.gif" >Capítulo ii<br><blockquote>


<img src="imagens\pipoca2.gif" >Texto<br>

</blockquote></blockquote><img src="imagens\cafe.gif" >Capítulo iii<br><blockquote>


<img src="imagens\pipoca2.gif" >Texto<br>

</blockquote></blockquote>

</blockquote>

Visualização: Observe que a cada novo <blockquote> é criado um novo nível


75

14 Tabelas14 TabelasTabela surgiu pela primeira no HTML na versão 3.2 para melhorar o layout da página oferecendo recursos para posicionar seus

textos e imagens semelhante as páginas dos jornais e revistas.Basicamente uma tabela é composta por três tags:

<table>...</table> <table>...</table> Este é o elemento principal que estabelece os limites da tabela. Dentro dele estão todos os demais elementos da tabela;

<tr>...</tr> <tr>...</tr> Este elemento define a linha da tabela. Para uma tabela, por exemplo, ter 4 linhas este atributo deve ser escrito 4 vezes.;

<td>...</td> <td>...</td> Este define a célula da linha. Dentro das células podemos inserir o texto, imagens, formulários e até mesmo outra tabela.

A seguir está um exemplo de uma tabela simples montada com estas 3 tags. Observe que para criar duas linhas tive que repetir o conjunto <tr>...</tr> duas vezes. Para criar 3 células em cada linha repeti o conjunto <td>...</td> 3 vezes em cada linha. E finalmente um conjunto de <table>...</table> envolvendo toda a estrutura. A barra "/" antes da tag representa o fechamento (fim) dela.

<table border=1><tr>

<td>Linha 1, coluna 1

</td><td>

Linha 1, coluna 2</td><td>

Linha 1, coluna 3</td>

</tr><tr>

<td>Linha 2, coluna 1

</td><td>

Linha 2, coluna 2</td><td>

Linha 2, coluna 3</td>

</tr></table>

Visualização:

Agora vamos nos aprofundar um pouquinho mais.

<table atributos> ... </table><table atributos> ... </table> table é o elemento principal que estabelece os limites de uma tabela. Ele pode conter atributos:


76

border="valor"

Define uma borda para a tabela. Se este atributo não estiver presente, a tabela será exibida sem bordas ou linhas separando as

células. Quando é especificado border sem nenhum valor, é criada uma borda de 1 pixel de espessura.

<table><td>

Célula sem borda</td>

</table>

<table border><td>

border = 1</td>

</table>

<table border="5"><td>

border = 5</td>

</table>

Visualização:

cellpacing="valor"

Controla o espaçamento entre as células de uma tabela ou torna as bordas mais grossas, se elas existirem. Valor absoluto em pixels.

<table border cellpacing="3"><tr>

<td>célula 1

</td><td>

célula 2</td>

</tr></table> <br><br><table border cellpacing="10">

<tr><td>

célula 1</td><td>

célula 2</td>

</tr></table> <br><br><table cellpacing="30">

<tr><td>


77

célula 1</td><td>

célula 2</td>

</tr></table>

Visualização:

cellpadding="valor"

Controla a quantidade de espaço entre o conteúdo da célula e suas bordas, estando elas visíveis ou não. Valor absoluto em pixels.

<table border cellpadding="10"><tr>

<td>célula 1

</td><td>

célula 2</td>

</tr></table> <table border cellpadding="30">

<tr><td>

célula 1</td><td>

célula 2</td>

</tr></table> <table cellpadding="50">

<tr><td>

célula 1</td><td>

célula 2</td>

</tr></table>

Visualização:


78

width="valor" e height="valor"

Permite especificar a largura e altura da tabela, seja através de um valor absoluto em pixels ou através de uma percentagem da área

da página. Para percentagem, utilize o sinal "%" após o número.

Reduza a janela do browser e observe o efeito que isso causa aos dois exemplos acima. O exemplo 1 mantém o seu tamanho fixo, enquanto o exemplo 2 ajusta-se a % da janela reduzida.

<table border width="60" height="40"><tr>

<td>célula 1

</td><td>

célula 2</td>

</tr></table>

<table border width="30%" height="30%"><tr>

<td>célula 1

</td><td>

célula 2</td>

</tr></table>

Visualização:

bgcolor="#rrggbb" ou "nome"

Altera a cor de fundo da tabela ou apenas da célula conforme aonde ele for usado. Pode ser através do valor RGB ou através de um dos 16 nomes padrão VGA do Windows.

<table bgcolor="blue"><tr>


79

http://orbita.starmedia.com/~edaurelio/a12.htm#16 nomes

<td>célula 1

</td><td>

célula 2</td>

</tr></table>

Visualização:

background ="diretório/nome do arquivo"

coloca um arquivo de imagem como fundo da tabela ou da célula. Se o arquivo de imagem estiver no mesmo diretório do arquivo.htm onde a tabela é exibida você pode omitir o diretório no endereço do background.

<table border background="imagens\confeti.jpg" height="80" width="200"><tr>

<td>célula 1

</td><td>

célula 2</td>

</tr></table>

Visualização:

bordercolor ="#rrggbb" ou "nome"

Altera a cor das bordas da tabela.

<table border bordercolor="#4682b4"><tr>

<td>célula 1

</td><td>

célula 2</td>

</tr></table> <br><br><table border bordercolor="red">

<tr><td>

célula 1</td><td>

célula 2</td>

</tr></table>

Visualização:


80

bordercolordark ="#rrggbb" ou "nome"

Altera a cor da sombra das bordas de toda a tabela ou de uma célula específica.

<table border bordercolordark="#4682b4"><tr>

<td bordercolordark="#FF6600">célula 1

</td><td>

célula 2</td>

</tr></table>

<br><br>

<table border bordercolordark="red"><tr>

<td bordercolordark="#000000">célula 1

</td><td bordercolordark="#000000">

célula 2</td>

</tr></table>

Visualização (compare com o outro exemplo, onde só tinham as ocres, e não as sombras)

bordercolorlight ="#rrggbb" ou "nome"

Altera a cor da luz das bordas de toda a tabela ou de uma célula específica.

<table border bordercolorlight="#4682b4"><tr>

<td bordercolorlight="#CC33CC">célula 1

</td><td>

célula 2</td>

</tr></table> <br><br><table border bordercolorlight="red">


81

<tr><td>

célula 1</td><td>

célula 2</td>

</tr></table>

Visualização:

<tr atributos> ... </tr> <tr atributos> ... </tr> table row - Linha de tabela. Todas as células são dispostas em linhas. O conjunto <tr>...</tr> deve se repetir conforme o número

que linhas que se deseja criar. table row pode conter os seguintes atributos:

align="left, right" ou "center"

Controla o alinhamento horizontal do conteúdo das células na linha. Para habilitar align configurei espaçamento horizontal da tabela com o width="300", para que haja o deslocamento horizontal do texto.

<table border width="300"><tr align="center">

<td>Texto no

</td><td>

Centro</td><td>

da linha</td>

</tr></table> <br><br><table border width="300">

<tr align="right"><td>

Texto</td><td>

todo</td><td>

à direita</td>

</tr></table>

Visualização:


82

valign="baseline, bottom, top" ou "middle"

Controla o alinhamento vertical do conteúdo das células na linha. Para habilitar Valign configurei o espaçamento vertical da tabela com height="100", para que haja o deslocamento vertical do texto.

<table border width="180" height="100"><tr valign="bottom">

<td>Texto na

</td><td>

base da</td><td>

linha</td>

</tr></table> <br><br><table border width="180" height="100">

<tr Valign="middle"><td>

Texto no</td><td>

meio da</td><td>

linha</td>

</tr></table>

Visualização:

bgcolor="cor"

Define a cor de fundo da linha envolvendo todas as células que estiverem nela.

<table border="1" width="60%"><tr bgcolor="ff4500">


83

<td>Cuidado com

</td><td>

as cores para</td>

</tr><tr bgcolor="db7093">

<td>o texto

</td><td>

poder ser lido! </td>

</tr></table>

Visualização:

bordercolor="cor"

Define a cor da borda da linha.

bordercolordark="cor"

Define a cor da sombra da borda da linha.

bordercolorlight="cor"

Define a cor da luz da borda da linha.

char="caracter"

Define o caracter de alinhamento da célula que pode ser um ponto, uma vírgula ou caracteres tais como "=", "/", ":", etc. No exemplo abaixo usei um ponto como caracter de alinhamento.

charoff="número"

Define o deslocamento do caracter de alinhamento da célula. Ah! Muito poucos browsers sabem interpretar esses parâmetros.

<table><colgroup align="char" char="." charoff="35%">

<tr><td>

880.76</td>

</tr><tr>

<td>7.032

</td></tr><tr>

<td>13.48

</td></tr><tr>

<td>


84

542.23</td>

</tr></colgroup>

</table>

Visualização:

table data <td atributos> ... </td>

Célula de dados da tabela. Pode conter texto, listas, elementos de formatação de caracteres, blocos, arquivos de imagem e também outras tabelas.

rowspan=número

Especifica o número de linhas que a célula pode ocupar. O default é 1. é o famosos efeito "mesclar células" na horizontal

<table border="1" width="60%"><tr>

<td rowspan=2 align="center">Mesclada

</td><td>

Normal</td>

</tr><tr>

<td>Normal

</td>

</tr></table>

Visualização:

colspan=número

Especifica o número de colunas que a célula pode ocupar. O default é 1.


<td colspan="2" align="center">Celula 1 primeira linha

</td></tr><tr>

<td>Celula 1 segunda linha

</td><td>

celula 2 segunda linha</td>


85

</tr></table>

Visualização:

Agora a combinação entre as duas:


<td colspan="2" align="center">L1 C1

</td><td>

L1 C2 </td>

</tr><tr>

<td rowspan="2" align="center">L2 C1

</td><td>

L2 C2</td>

</tr><tr>

<td>L3 C1

</td></tr>

</table>

Visualização:

align=left, right ou center

Controla o alinhamento horizontal do conteúdo das células.

<table border width="400"><tr>

<td align="right">right - cuidado com a grafia

</td><td align="center">

center</td><td align="left">

left</td>

</tr></table>

Visualização:


86

valign=baseline, bottom, top ou middle

Controla o alinhamento vertical do conteúdo das células.

<table border width="140" height="100"><tr>

<td Valign="bottom">bottom

</td><td Valign="middle">

middle</td><td Valign="top">

top</td><td Valign="baseline">

baseline</td>

</tr></table>

Visualização:

nowrap

Atributo Booleano. evita que haja uma quebra de linha dentro da célula (se incluído significa verdadeiro, senão falso). O termo booleano provém do nome do matemático inglês George Boole (1815 / 1864), criador da álgebra booleana.

Este atributo, em conjunto com o atributo width, permite criar células com tamanho fixo. Assim quando o browser é redimensionado pelo usuário, as células terão sempre o mesmo tamanho ao invés de quebrar seu conteúdo em várias linhas.

A sintaxe ...<td nowrap width="200">...</td>

...especifica uma célula de 200 pixels de largura cujo conteúdo não pode ter quebra de linha (text wrapping).

Abaixo o código para criação de duas tabelas iguais, porém a última não tem o atributo nowrap. Esse efeito, então será visualizado quando a janela não estiver maximizada.

<table border><tr>

<td nowrap width="200" align="center">Esta é uma tabela comum...

</td><td nowrap width="200" align="center">

com uma célula configurada</td><td nowrap width="200" align="center">

COM o atributo nowrap.....</td>

</tr></table> <br><br><table border>

<tr><td width="200" align="center">

Esta é uma tabela comum...</td><td width="200" align="center">

com uma célula configurada</td><td width="200" align="center">


87

http://orbita.starmedia.com/~edaurelio/a10.htm#george-boole

Sem o atributo nowrap.....</td>

</tr></table>

Visualização:

Janela maximizada:

E agora mais estreita (observe a diferença – a segunda tabela não tem nowrap)

width=valor

Controla a largura da célula, seja através de um valor absoluto em pixels, seja através de uma percentagem em relação à largura da tabela.

&nbsp = Espaço vazio

<table border><tr>

<td width="10">

</td><td width="10">

width=10</td><td width="80">

width=80</td><td width="120">

width=120</td>

</tr></table>

Visualização:


88

bgcolor="#RRGGBB"

Define uma cor de fundo para a célula. No exemplo abaixo estou apresentando uma configuração de cores completa envolvendo table, tr e td.

background="diretório/nome do arquivo"

Define uma textura de fundo na célula. Quando eu coloco um background na tabela (ou na linha), as células daquela tabela (ou daquela linha) receberão (todas) aquele

background, a não ser que eu defina um outro para cada uma delas.

<table border background="imagens\menta.jpg"><tr>

<td background="imagens\sky.jpg">aqui tem a figura sky.jpg

</td><td background="imagens\papel.jpg">

e aqui a papel.jpg</td><td>

e aqui como não identifiquei, ela fica com o fundo da própria tabela (o menta.jpg)

</td></tr>

</table>

Visualização (observe que a tabela tem o background menta.jpg. a primeira célula tem um outro (o sky.jpg) e a segunda célula tem o (papel.jpg), como não defini um para a terceira célula, ela recebe o da tabela – o menta.jpg)

bordercolor

Altera a cor da borda de uma célula específica dentro da tabela.

<table border=3 bordercolor="blue"><tr>

<td bordercolor="red">célula 1

</td><td>

célula 2</td>

</tr></table>

<br><br>

<table border=5 bordercolor="purple"><tr>

<td>célula 1

</td><td border =3 bordercolor="yellow">

célula 2</td>

</tr></table>

Visualização:


89

bordercolordark e bordercolorlight

Têm a mesma função que estes atributos em <table> porém aqui eles são aplicados apenas em uma célula. Os exemplos já foram apresentados acima.

Aqui está um tabuleiro. A tabela é definida assim:

<table border="3" cellpadding="1">

E as linhas assim:<tr height="25">

Cada célula dentro de cada linha é assim (onde o bgcolor varia em white ou black)<td width="25" bgcolor="white">

</td>

Visualização:

<th atributos> ... </th> <th atributos> ... </th> title heading. Este comando especifica um título centralizado e em negrito para cada coluna.

<table border ><tr>

<th>texto negrito e no centro por causa da tag th

</th><th>

linha 1 coluna 2 - tambem com a tag th</th>

</tr><tr>

<td>linha 2 coluna 1

</td><td>

linha 2 coluna 2</td>

</tr></table>

Visualização:


90

<caption atributos> </caption> <caption atributos> </caption> Este elemento é usado para especificar uma legenda à tabela e sua tag deve seguir imediatamente após a table inicial. Só deve

haver uma tag desse tipo na tabela.

align=top, (default) ou bottom

Controla a posição da legenda em relação a tabela.

<table border><caption align="top">

Legenda no topo</caption><tr>

<th>L1 C1 - Titulo 1 (com th)

</th><th>

L1 C2 - Titulo 2 (com th)</th>

</tr><tr>

<td>L2 C1 (celulas normais com td)

</td><td>

L2 C2</td>

</tr></table>

Visualização:

Formatando grandes tabelas

Vamos imaginar a seguinte situação: Quero criar uma tabela que possui muitas células, distribuídas em diversas linhas, sendo que algumas células terão uma formatação de cor e texto diferentes que as demais. Eu não posso configurar <table> porque, como falei, a células possuem formatações diferentes e <tr> não aceita formatação para células individuais.

Nesse caso o jeito seria entrar em cada célula e inserir os parâmetros, célula por célula... Tudo bem, já fiz isso diversas vezes e com o auxílio do comando COPY fica até mais fácil. Porém quando a tabela é consideravelmente enorme, esse método deixa de ser adequado, pois o excesso de formatação além de ser trabalhoso deixaria o arquivo desnecessariamente "pesado". Para resolver este problema existem três tags criadas exclusivamente para essa finalidade:

<thead>...</thead> <thead>...</thead> formata o cabeçalho.


91

<tbody>...</tbody> <tbody>...</tbody> formata o corpo.

<tfoot>...</tfoot> <tfoot>...</tfoot> formata o rodapé.

Elas foram criadas exclusivamente para facilitar a formatação dos módulos da tabela. Vamos supor que a tabela abaixo é uma lista de preços de materiais enorme, com 80 itens!! A borda (em table) possuirá uma

formatação diferente que o seu título, cabeçalho e rodapé, que por sua vez serão diferentes que o seu corpo. Configurar cada item do título, cabeçalho e rodapé até que seria simples, porém o corpo da tabela possui 240 células!!! Pois em cada item possuo 3 células e como são 80 itens (3 x 80 = 240). imagine acionar o comando COPY 240 vezes!!

<table border width="350" bgcolor="cyan"> <thead bgcolor="gold"> 

<tr><td colspan=5 align="center">

Parte de cima da tabela</td>

</tr></thead>

<tbody bgcolor="purple" style="font-size:18"> 

<tr><td width="25">

item</td><td width="150">

DESCRIÇÃO</td><td width="50">

QUANT.</td>

</tr></tbody><tbody bgcolor="pink" style="font-size:12"> 

<tr><td>

1)</td><td>

CD-RW</td><td>

R$3,50</td>

</tr>

<tr><td>

2)</td><td>

Cartucho recarregado</td><td>

17,80</td>

</tr>

<tr><td>

...</td><td>

...


92

</td><td>

...</td>

</tr>

<tr><td>

80)</td><td>

Caneta para quadro branco</td><td>

R$2,00</td>

</tr></tbody><tfoot bgcolor="blue" style="color:#FFFFFF"> 

<tr><td colspan=5 align="center">

Parte de baixo... ;) </td>

</tr></tfoot>

</table>

Visualização:

Usando Tabelas para criar Colunas de Texto

Uma forma de incrementar a apresentação de sua homepage é dividir o texto em duas ou mais colunas, estilo manchete de revista. Vou montar um exemplo com um texto formatado em duas colunas. Primeiro digite o texto em modo simples, sem qualquer

formatação. Depois divida o texto exatamente no meio criando uma linha em branco entre o texto superior e o inferior (conforme o exemplo do texto em itálico, abaixo). O texto superior será a coluna direita e o inferior a esquerda.

Agora vou inserir os parâmetros de tabela <table> , envolvendo os dois blocos de texto, superior e inferior. Entre eles irei inserir uma coluna intermediária com <td width="8%">, direi que essa linha possui um packground especial (as laranjas), só para identificar a linha e para separar uma coluna da outra usando essa coluninha especial.

<body><table>

<tr><td width="20%">

Saiba o que fez Steve Jobs parecer um bom sujeito </td><td width="5%" background="imagens\laranja.jpg"></td><td width="75%">

em 1976, a Apple começou a comercializar o Apple i por uS$ 666 e logo nesse primeiro ano, as vendas alcançaram uS$ 774 mil. Steve Jobs viu que estava na hora de ampliar a empresa, e para isso apelou para os empréstimos. Diz o financeiro (que emprestou o dinheiro) que ele era muito mal apresentado, se vestia muito mal, mas que só comia frutas, e isso o fez dar um voto de confianca e


93

efetuar o empréstimo para a apple. </td>

</tr></table>

</body>

Visualização (Observe que a soma de "width="20%" + "5%" + "75%" = 100% que é a largura da tela do seu monitor. A coluna do centro serve como um separador de texto.Agora vou usar o mesmo exemplo para inserir imagens nas colunas. )

<body><table>


<img src="imagens/ping.gif" align="left" vspace="6" hspace="10" border="2" >

Essa figura e esse texto estão na mesma célula, viu?</td><td width=3pt bgcolor=gold>

Aqui é outra célula!</td><td background="imagens\pipoca.jpg" align="left" vspace="6" hspace="10"

border="2">E isso aqui é para lembrar que amanhã é

SÁBADO, ótimo dia para comer pipoca.</td>

</tr></table>

</body>

Visualização: veja que a cada novo td uma nova célula é aberta. Repare que eu não determinei tamanho para a nova célula, portanto ela assume o resto da largura disponível.

imagine o mesmo exemplo com figura de centro e o texto margeando suas duas laterais. Para isso vou criar mais dois blocos de tabela,com três divisões cada, e trabalhar com eles.

Quando se cria uma tabela com mais de uma linha e com mais de uma coluna, os tamanhos de coluna (largura das células) da primeira linha é que definirão a largura das demais colunas, portanto, se o tamanho das células da primeira linha for 10, depois 20 e depois 70%, as outras linhas dessa mesma tabela também terão essas mesmas larguras de colunas. Para eu ter larguras diferentes de colunas, tenho que criar nova tabela (nem que a tabela tenha só uma linha).

<body><table>


Primeira célula da PRIMEIRA tabela. Esse vermelho aqui do lado é uma outra célula

</td>


94

<td width="1%" bgcolor=red></td><td width="51%" background="imagens\margarida.jpg">

Aqui está a terceira célula - desta vez, com margaridas no fundo.

</td></tr>

</table> <table>


Primeira célula desta SEGUNDA tabela. O baterista aqui do lado é a segunda célula desta tabela aqui

</td><td width="50%">

<img src="imagens\bateria.gif" align="left" vspace="6" hspace="10" >

</td><td width="25%">

Terceira e última célula desta tabela.</td>

</tr></table><table>


Primeira célula da primeira linha. Aqui do lado tem outra célula - também poderí amos chamar de COLUNA.

</td><td width="10%" bgcolor=00ff7f ></td><td width="48%">

Esta é a última célula desta linha. Veja que a largura das células da primeira linha vai ser a mesma largura da segunda linha - mesmo que eu não defina largura na segunda linha

</td></tr><tr>

<td >primeira célula da SEGUNDA LINHA. Aqui do lado tem outra

célula </td><td bgcolor=pink ></td><td>

última célula dessa linha!!.</td>

</tr></table>

</body>

Visualização: (repare que a ultima tabela tem 2 linhas, e que na segunda linha eu não especifico largura de celula porque será sempre as mesmas larguras da primeira linha da tabela).


95

Imagens, Cores e Backgrounds em Tabelas

Alinhando três arquivos de imagem.gif.

<body><table border>

<tr><td>

<img src="imagens\garfield.gif"></td><td>

<img src="imagens\rosa.jpg"></td><td>

<img src="imagens\martelando.gif"></td>

</tr></table>

</body>

Visualização: (observe que como nao defini a largura das celulas, elas se dispõe conforme o tamanho da figura – veja também que o atributo "border" na tag table define que a tabela terá uma borda)

Configurando border="0" (sem borda) e usando cellpadding="50" para aumentar os espaços entre as figuras temos os seguintes resultados:

<table border="0" cellpadding="50"><tr>

<td>


96

<img src="imagens\garf.gif"></td><td>

<img src="imagens\bola.gif"></td><td>

<img src="imagens\borboleta.gif"></td>

</tr></table>

Visualização:

Você pode inserir um texto do lado direito, esquerdo, ou, usando a tag <br>, (break line = quebra de linha), acima e abaixo da imagem. Você pode usar normalmente quebras de linhas e até linhas (<hr>) e formatações (<b>) dentro de uma célula.

Aqui colocarei cellpadding (distância) = 10, compare com o exemplo acima (do Garfield), que o cellpadding é 50!


<td><img src="imagens\queijo.jpg"><br>um queijo...

</td><td>

um chocolate<br><img src="imagens\chocolate.jpg">

</td><td>

<img src="imagens\rosa.jpg">E flores...!</td>

</tr></table>

Visualização: (repare que como não coloquei <br> depois da figura na última célula, o texto ficou do lado)

Agora vamos inserir uma cor de fundo com o atributo bgcolor:

<table border="0" cellpadding="10" bgcolor="#87ceeb"><tr>

<td><img src="imagens\magica.gif"><br>Abóboras!


97

</td><td>

O Sistema Solar<br><img src="imagens\sistema.gif">

</td><td>

<img src="imagens\ramalhete.gif">um ramalhete!

</td></tr>

</table>

Visualização: (observe que o fundo ficou azul e que "Abóboras" está escrito em baixo porque tem um <br> antes, e que "O Sistema Solar" está escrito em cima da figura porque entre o texto e a figura tem um <br>. Veja a distância entre os objetos com o uso do cellpadding = 10)

inserindo um background. (figura como fundo)

<table ><tr>

<td bgcolor=ba55d3><img src="imagens\pegadas.gif"<br>Esse fundo é uma cor (uso do bgcolor).

</td><td background="imagens\pool.jpg">

Aqui e no cogumelo, eu uso o background (para ter figuras como fundo)<br><img src="imagens\jacare.gif">

</td><td background="imagens\manta.jpg">

<img src="imagens\cogumelo.gif">

</td></tr>

</table>

Mais um exemplo de como se pode ter efeitos diferentes (usando figuras com movimento como fundo)uso do cellpacing="0" para


98

eliminar os espaços entre as células.

<table border="0" cellpadding="20" cellpacing="0"><tr>

<td background="imagens\color.gif"><img src="imagens\quadro.gif">

</td><td background="imagens\inch.gif">

<img src="imagens\dado.gif"></td><td background="imagens\gota.gif">

<img src="imagens\cabeca.gif"></td>

</tr></table>

Visualização:

Alguns gifs são ótimos para se colocar bem em cima da página (como enfeite)... e eles podem ocupar a largura toda da tela (são ótimos para sublinhas títulos, por exemplo). Esses gifs também podem ser colocados em tabelas (como no exemplo abaixo, onde dependendo da altura do texto ele vai repetir ou não a figura dentro da célula), mas tenha muito cuidado na hora de inserir textos em cima de figuras (o internauta pode ter dificuldade de ler).

Gifs usados:

Pisca (troca as cores das lâmpadas e "acende")

Jacaroa (pisca os olhos):

Pasta (a mão comprime o tubo e a "pasta" :é espirrada até o fim da página (ou da célula da tabela)


<td background="imagens\pisca.gif" width="150"><b>

olhe as cores!!</b>

</td><td background="imagens\jacaroa.gif" width="400">

<font color=ba55d3>


99

um gif interessante para <br>colocar bem em cima<br>de sua pagina!

</font></td><td background="imagens\pasta.gif" width="200"></td>

</tr></table>

Visualização:

Fazendo Gráficos de EstatísticasGeralmente o Webmaster utiliza arquivos gif ou jpg que (cá entre nós), além de serem mais trabalhosos ocupam mais espaço na

página, também. Vamos analisar passo-a-passo como montar o gráfico. Ele nada mais é que um conjunto de módulos sendo que cada módulo

consiste numa tabela inserida dentro da outra. Observe uma dificuldade que temos:

1ª célula da 1ª linha 2ª célula da 1ª linha 3ª célula da 1ª linha



Veja que quando eu defino a largura das células da primeira linha, eu estou definindo a largura das células de todas as linhas daquela tabela (as primeiras células sempre terão a mesma largura, as segundas células também e as terceiras células também).

isso não tem problema quando vou usar uma tabela normal, mas quando eu vou fazer um gráfico de barras horizontais, eu necessito que a coluna onde vão as barras (a segunda coluna de cada linha, por exemplo), tenha tamanhos diferentes (porque as barras terão tamanhos variados de linha para linha). isso obriga eu ter uma outra tabela dentro de cada uma das "segundas células" (dentro das segundas células de cada linha), e essa nova tabela mudará de tamanho de acordo com o tamanho que eu quero as barras.

Somente colocando uma tabela dentro da outra é que eu conseguirei larguras diferentes.

1. <table border=1>2. <tr>


100

3. <td>4. Homens5. </td>6. <td width="200">7. <table height="15" width="50" bgcolor="pink">8. <tr>9. <td>10. </td>11. </tr>12. </table>13. </td>14. <td>15. 30016. </td>17. </tr>18. <!—aqui inicia a outra barra -->29. <tr>20. <td>21. Mulheres22. </td>23. <td>24. <table height="15" width="100" bgcolor="pink">25. <tr>26. <td>27. </td>28. </tr>29. </table>30. </td>31. <td>32. 60033. </td>34. </tr>35. </table>

1- Tabela de base: terá 3 colunas (para ir o "masculino" e o "feminino", as barras e os valores)2- primeira linha (para ir cada uma das 3 células)3- Primeira célula da primeira linha (para ir o "masculino")4- O conteúdo da primeira célula da primeira linha (o "masculino")6- coluna onde vão as barras – vai deve ser igual em todas as barras (por isso só defino na primeira) e deve ser maior que a maior barra para ficar mais apresentável.7- largura, altura e cor da BARRA! Altura deve ser igual em todas as barras8- linha que conterá a célula que formará a barra9- célula vazia que formara a barra14- Terceira célula da tabela de base, que conterá texto do valor que a barra está representando.15- o valor (escrito) que a barra está representando19- linha que fará a outra barra20- primeira célula da segunda linha21- conteúdo da primeira célula (o "Mulheres")23- coluna onde vai a barra (já defini a largura quando fiz a primeira, por isso não defino de novo)24- largura, altura e cor que quero que a barra tenha (altura tem que ser igual em todas para ser mais bonito)25- linha que recebera a célula vazia26- célula vazia que será a barra em si31- célula que recebera o valor que a barra está representando32- valor

Visualização:

O gráfico de barras vertical segue o mesmo princípio, mas ele terá uma tabela com uma linha (onde estarão duas colunas (uma para cada barra) e dentro dessas colunas estará uma tabela em cada para que seja desenhadas as barras coloridas). Relembrando: só teremos tabelas dentro dessas colunas para que possamos colocar alturas diferentes nas barras. Depois de pronta as barras, colocamos na tabela primária uma outra linha com os rótulos (das legendas)


101

1. <table border=1>2. <tr height="240">3. <td valign="bottom" >4. <table> 5. <tr width=10 height=200>6. 200 7. <td bgcolor="pink"8. </td>9. </tr>10. </table>11. </td> 12. 13. <td valign="bottom" > 14. <table> 15. <tr width=10 height=100>16. 100 17. <td bgcolor="pink" >18. </td>19. </tr>20. </table>21. </td>22. </tr>23. <tr> 24. <td>25. Mulheres 26. </td>27. <td> 28. Homens 29. </td>30. </tr>31. </table>

1- tabela primária (duas colunas – uma para cada barra) e duas linhas (uma para as barras e outra para a legenda)2- primeira linha que terá as duas colunas (uma para cada barra)3- primeira coluna onde vai a primeira barra4- tabela que desenhara a barra5- linha que desenhara a barra – terá a largura e a altura da barra (largura deve ser igual para todas as barras do gráfico para ficar mais bonito6- valor que ficara "em cima" da barra para indicar o valor que ela representa7- célula vazia que será a barra; e a sua cor13- segunda coluna que conterá a segunda barra14 - tabela que desenhará a segunda barra15- linha com a altura e a largura da segunda barra16- valor que a barra representa – fica em cima da barra17- célula vazia que será a barra23- segunda linha da tabela, que será a legenda 24- primeira célula da legenda25- primeira rótulo "Mulheres"26- segunda célula27- segundo rótulo "Homens"

Visualização:


102

Tabela com Imagens LinkadasCriação de uma tabela com três colunas em uma linha. Cada coluna será um frame (uma outra janela), e cada um desses frames

abre um arquivo html diferente.um efeito legal é esse: cada site html que abre em cada um desses frames, possui uma figura que é um link para outro site... que

pode conter também somente uma tabela ou ser um link para a mesma página que esta abrindo da outra coluna (no outro frame) da tabela que você criou!!

Ou seja, uma tabela que mostra outras páginas que tem figuras que se chamam!! Como um jogo!

Visualização quando abre:

E quando clica na primeira imagem ela vai chamar outro arquivo!


103

Veja agora de forma mais didática como isso foi feito:Escolha três imagens de tamanho igual (sakura.gif, libra.jpg e light.jpg) com width="150" heiht="338". em seguida crie a estrutura

de tabela normal com 3 células. Dentro dessas células os parâmetros da tag iframe. Cada iframe tem o mesmo tamanho das imagens. O atributo scrolling="no" omite aquelas barras de rolagens horizontal e vertical. Porém as imagens não são inseridas diretamente dentro do iframe, para isso criei 3 arquivos HTML que chamei arquivo-a.htm, arquivo-b.htm e arquivo-c.htm sendo que cada um possui SÓ, E SOMENTE SÓ, uma imagem.

<table border=1><tr >

<td><iframe src="imagens\arquivo-a.html" width="150" height="338"

scrolling="no"></iframe>

</td><td>

<iframe src="imagens\arquivo-b.html" width="150" height="338" scrolling="no" >

</iframe></td><td>

<iframe src="imagens\arquivo-c.html" width="150" height="338" scrolling="no" >

</iframe></td>

</tr></table>

1. a tabela2. a linha3. a primeira coluna4. o frame dentro dessa primeira coluna com o arquivo que deverá abrir nele, a largura e a altura e o scrolling="no" para não

aparecer barra de rolagem7. a outra coluna que terá o outro frame8. definição do outro frame abrindo o outro arquivo

1. terceira e ultima coluna2. terceiro e ultimo frame abrindo o terceiro arquivo

Os arquivos HTML com as imagens contidas são simples, porém possuem alguns parâmetros importantes. Os três são semelhantes, só mudando os nomes do arquivo e sua respectiva imagem.

Sintaxe do arquivo-a.htm 1. <html>2. <head>3. </head>4. <body>5. <div style="position:absolute; left:0px; top:0px;">6. <a href="imagens\arquivo-b.html">


104

7. <img src="imagens\light.jpg">8. </a>9. </div>10. </body>11.</html>

5. define a posição (o mais encostado da lateral esquerda e o mais acima possível)6. define o que será chamado quando clicar na imagem.7. define a imagem que será usada como link – quando clicar nela abre o link da linha acima

Observe que a imagem light.jpg deste arquivo é um link que chama o arquivo-b. A imagem do arquivo-b possui outro link chamando o arquivo-c e a imagem do arquivo-c possui um outro link chamando o arquivo-a, fechando o loop de 3 saltos.

Arquivo-b.html

<html><head></head><body>

<div style="position:absolute; left:0px; top:0px;"><a href="imagens\arquivo-c.html">

<img src="imagens\sakura.jpg"></a>

</div></body>

</html>

Arquivo-c.html

<html><head></head><body>

<div style="position:absolute; left:0px; top:0px;"><a href="imagens\arquivo-a.html">

<img src="imagens\libra.jpg"></a>

</div></body>

</html>


105

15 Multimídia 15 Multimídia <bgsound atributo> <bgsound atributo>

bgsound executa um arquivo de som ( exclusivo do internet Explorer), assim que a página é acessada. uma vez iniciada a execução do som, pode-se interrompê-la pressionando Esc ou simplesmente mudando de página.

A tag <bgsound> deve ser colocado entre as tags <head>...</head>.

<bgsound src="audio/minha_musica.mid" loop="1">

src="URL"

endereço do arquivo de som. No exemplo acima, o arquivo mid está dentro do diretório "audio".

loop="número | infinite"

quantas vezes o arquivo será executado.

metametaPossibilita colocar a chamada da música dentro do <body>. Porém, usando META tem de clicar no stop para a música parar, não

adianta somente dar esc.

<html><head></head><body bgcolor="#000000">

<meta http-equiv="refresh" content=5; url="D:\msc\asas.mp3></body>

</html>

Visualização: Observe que abre no browser uma janela do Media Player (tanto com, quanto sem "<meta>").


106

16 Vídeos com img16 Vídeos com imgDentro do comando img existe um parâmetro muito usado para se inserir clipe de vídeo na homepage. É o dynsrc, abreviatura de

Dynamic Source.

<body>Clip de Eric Clapton com Jeff Beck e Jimmy Page - Layla <center>

<img dynsrc="imagens\EricClap.mpg" width="100" height="70" loop="infinite"></center>

</body>

Visualização: (no quadrado aparece o clip)

No exemplo acima temos dynsrc que exibe o arquivo numa janela de 100 x 70 pixels com uma repetição infinita (loop=infinite).

align= ""

top, middle, bottom, left, right. Alinha o texto que margeia a imagem pelo topo, meio, base, esquerda e direita, respectivamente.

alt="texto"

Exibe um texto alternativo no lugar da imagem.

border="número"

Especifica a largura da borda.

controls

Exibe botões de controle sob a imagem.

dynsrc="URL"

Exibe o arquivo de vídeo. Os formatos de arquivo são avi, mpg e mov.

height="número"

Determina a altura da janela que será aberta para exibir o arquivo.

hspace="número"

Especifica uma margem horizontal entre a imagem e o texto.


107

loop="número ou infinite"

Especifica quantas vezes o arquivo será exibido.

src="endereço"

Especifica o endereço do arquivo de vídeo.

start="fileopen / mouseover"

Fileopen (default), especifica que o vídeo deve ser executado imediatamente. Mouseover faz com que o vídeo seja executado somente quando o cursor do mouse passa sobre a área da imagem.

vspace="número"

Especifica uma margem vertical entre a imagem e o texto.

width="número"

Determina a largura da janela que será aberta para exibir o arquivo.

Agora alguns parâmetros de configuração sobre o mesmo arquivo:

<center><img dynsrc="imagens\EricClap.mpg" border="2" start="mouseover" alt="A imagem nao

pode ser carregada"></center>

O parâmetro border=2 criou uma borda preta em torno da imagem; start=mouseover faz a imagem se movimentar (iniciar o clip) quando o cursor do mouse é passado sobre ela, o alt apresenta uma janelinha com o nome "A imagem nao pode ser carregada", quando a imagem, por uma razão qualquer, deixa de ser carregada.

<embed atributos> ... </embed> <embed atributos> ... </embed> Executa ou carrega um objeto, como um vídeo ou arquivo de som.

align="left", "right", "top", "bottom"

Alinha o texto à esquerda, direita, topo e base, respectivamente.

border="número"

insere e determina a espessura de uma borda em torno do applet.

frameborder="no"

Configura uma moldura sem borda.

height="número"

Determina a altura da janela em pixels.

hidden="true", "false"

Determina se o plug-in é visível na página.


108

hspace="número"

Especifica as bordas horizontais.

name="texto"

Especifica o nome do applet.

pallete="foreground", "background"

Só é usado na plataforma Windows. Foreground faz a paleta do plug-in ser a paleta de primeiro plano. background a do segundo plano.

pluginspace="endereço"

Especifica o endereço que contém as instruções para a instalação do plug-in.

vspace="número"

Especifica as bordas verticais.

type="mimetype"

Determina o tipo de mime da tag embed deve ser carregado.

width="número"

Determina a largura da janela em pixels.

<center><embed src="imagens\EricClapton.mpg" width="150" align="top" height="150">

Eric Clapton,Jeff Beck, Jimmy Page - Layla (texto alinhado no topo).</embed>

</center>

Visualização:

<nobed> ... </nobed> <nobed> ... </nobed> Este comando exibe uma mensagem informando que o browser usado não tem capacidade para exibir o objeto. A mensagem deve

ser inserida entre <nobed> e </nobed>.


109

17 Posicionamento de17 Posicionamento de Objetos - divObjetos - div

Um recurso interessante que o CSS trouxe ao Webmaster foi o controle do posicionamento de objetos na tela, que não era possível apenas com o HTML convencional. Agora pode-se definir a localização exata de um objeto e sobrepô-los em camadas nas mais diferentes maneiras.

Através da propriedade position o posicionamento pode acontecer de três modos distintos: absolute - definido pelas margens superior e esquerda da tela.;relative - definido pela margem inferior do último objeto e margem esquerda da tela.static - O posicionamento é definido pelo próximo espaço disponível no canto esquerdo da tela.

left (esquerdo) e top (topo)

definem a distância que o objeto terá em relação ao browser ou a outro objeto dependendo do que for definido em posicion. As unidades que definem as distâncias podem ser em pixels (px), points (pt) e porcentagem (%).

width (largura) e height (altura)

definem o tamanho do bloco que irá comportar o objeto.

position

Quando você especifica uma posição absoluta em pixel de um objeto (um quadro, uma imagem ou algum texto), ele aparecerá no local exato que você o especificar mesmo quando o internauta minimiza a tela do browser. Os blocos de posições absolutas podem se sobrepor, e a hierarquia de sobreposição obedece àquela apresentada no código-fonte, isso é, os objetos definidos por último irão sobrepor os anteriores. Abaixo segue um exemplo prático de como isso acontece.

São três textos com background (o que forma retângulos quando eu estipulo alturas e larguras), e são colocados a uma altura (top) da tela e à uma distância da margem esquerda (left)

<div style="background-color:4682b4; position:absolute; left:200px; top:210px; height:50px; width:200px;">

Bloco azul</div><div style="background-color:7fff00; position:absolute; left:300px; top:230px; height:50px; width:200px;">

Bloco verde</div><div style="background-color:808080 ; position:absolute; left:400px; top:250px; height:50px; width:200px;">

Bloco cinza</div>

Visualização: (a altura e a largura são iguais, o que varia é a distância de cima da página e da esquerda (top e left)


110

Agora invertendo as posições dos blocos. Também foram alteradas as propriedades left & top dos três blocos para que o exemplo fosse deslocado mais para baixo na tela.

<div style="background-color: 7fff00; position: absolute; left: 300px; top: 530px; height: 50px; width: 200px">

Bloco verde</div><div style="background-color: 4682b4; position: absolute; left: 200px; top: 550px; height: 50px; width: 200px">

Bloco azul</div><div style="background-color: 808080; position: absolute; left: 400px; top: 570px; height: 50px; width: 200px">

Bloco cinza</div>

Visualização:

Agora vou apresentar os mesmos exemplos porém mudando a configuração de absolute para relative. Como já disse na posição relativa o objeto irá ocupar o próximo espaço disponível abaixo do último objeto

<body><div style="background-color: 7fff00; position: relative;

left:200px; top:10px; height: 50px; width: 200px;"> Bloco verde


111

</div><div style="background-color: 4682b4; position: relative;

left:300px; top:10px; height: 50px; width: 200px;"> Bloco azul

</div><div style="background-color: 808080; position: relative;

left: 400px; top:-20px; height: 50px; width: 200px;"> Bloco cinza

</div></body>

Visualização:

O top do bloco verde está a 10px abaixo do texto, já o top do bloco azul também deveria estar a 10px abaixo do texto (sobrepondo a metade direita do bloco verde), porém sua distância não corresponde com o que vemos. isso porque relative contabiliza a distância do texto mais a altura (height) do bloco anterior. Então ele irá contar 10px + 50px = 60px abaixo do texto. Para sobrepô-los temos que inserir valores negativos em top. Observe que o bloco cinza possui top:-20px, então ele irá subir 30px para dentro do bloco azul (pois além do bloco cinza não ter os 10px, ele possui -20px totalizando -30px). A equação ficaria assim:

10 + 50 + 50 +[-20 -(+10)] = 80px. isso quer dizer que o bloco cinza com top=-20px está 80px abaixo do texto. isso parece muito complicado... Qual seria a utilidade

de relative funcionar assim? Para posicionar um objeto no meio ou final de arquivos HTML relativamente longos, não precisamos ficar calculando sua posição vertical, relative já o colocaria diretamente no local disponível mais próximo. Agora sobre a razão de ele funcionar assim só o W3C (Consórcio internacional que padroniza os protocolos e linguagens utilizadas na Web) saberá responder.

A posição estática irá inserir o objeto no espaço disponível mais próximo sem nenhuma característica especial aplicada a ele, isso é, ele irá ocupar o primeiro canto superior esquerdo, conforme você está vendo abaixo independente de você inserir valores em left e top.

<div style="background-color: eee8aa; position: static; left:200px; top:10px; height: 50px; width: 200px;">

Bege </div><div style="background-color: ff7f50; position: static;left:300px; top:10px; height: 50px; width: 200px;">

Laranja </div><div style="background-color: 483d8b; position: static;left: 400px; top:-20px; height: 50px; width: 200px;">

Azul</div>

Visualização:


112

http://www.w3.org/

Observe que em static as propriedades left & top são ignoradas.

z-index

z-index define uma hierarquia de sobreposição de objetos independente do seu alinhamento sintático. Os valores de z-index são sempre inteiros e o objeto que tiver o maior valor irá sobrepor os demais. Essa norma é usada tanto para o posicionamento absoluto como para o relativo.

<div style="position: absolute; left: 80px; top: 4px; z-index:1"><img src="imagens\mickey.gif">

</div> <div style="position: absolute; left: 80px; top: 4px; z-index:2">

<img src="imagens\jacare.gif "></div>

Visualização: (repare que o Mickey tem z-index menor, por isso ele está atrás do jacaré – o jacaré tem fundo transparente)

<body><div style="position: absolute; left: 80px; top: 4px; z-index:2">

<img src="imagens\mickey.gif"></div> <div style="position: absolute; left: 80px; top: 4px; z-index:1">

<img src="imagens\jacare.gif "></div>

</body>

trocando a ordem, o mickey fica na frente (como tem fundo branco, o jacaré não aparece).

Repare que embora o alinhamento sintático das figuras permaneça o mesmo, a sobreposição das figura se alteraram.

overflow

É aplicada sobre um texto que extrapolou o tamanho do bloco definido por width e height. Seus valores são: visible - Onde será mostrado todo o conteúdo da caixa.;hidden - Onde não será mostrado o conteúdo que ficar fora dos limites da caixa.;auto - O browser mostrará uma barra de rolagem, caso seja necessário.;scroll - O browser sempre mostrará uma barra de rolagem, mesmo que não seja necessário.

<div style="overflow:scroll; width:400px; height:80px; background-color:40e0d0">


113

Este texto está configurado com overflow:scroll e irá aparecer dentro de um quadro com barras de rolagem horizontal e vertical mesmo que as barras sejam desnecessárias.</div>

Visualização:

<div style="overflow:visible; width:300px; height:80px; background-color:#ffc0cb">Este texto está configurado com overflow:visible e irá aparecer dentro de um quadro

sem barras de rolagem.</div>

Visualização:


114

18 Filtros18 FiltrosEfeitos visuais (sombreamento, foco...)apareceram pela primeira vez como controles de ActiveX e posteriormente foram

incorporados como propriedades de folha de estilo aceitas inicialmente pelo browser internet Explorer v4.0. Note o uso de <span>.

alphaalphaCria um efeito de transparência total ou parcial no objeto por ele envolvido de forma que quanto menor for a sua graduação de

porcentagem, definida por opacity=% maior será a sua transparência.

opacity opacity Apresenta o grau de transparência do objeto e seu valor refere-se a %. Opacity=100 apresenta um objeto totalmente opaco e

opacity=0 um objeto totalmente invisível.

finishopacity

Define o nível de ‘opacidade’ e seus valores vão de 0 à 100%.

style

Seus estilos podem ser 0 (uniforme), 1 (linear), 2 (radial) ou 3 Retangular.

startx

Coordenada horizontal para começo do gradiente de opacidade.

starty

Coordenada vertical para começo do gradiente de opacidade.

finishx

Coordenada horizontal para o fim do gradiente de opacidade.

finishx

Coordenada vertical para o fim do gradiente de opacidade.

<span style="font-size: 24pt; font-family: Arial Black; height:1;filter:Alpha(opacity=10)">

opacity =10</span>

Visualização:

<span style="font-size: 24pt; font-family: Arial Black; height:1;filter:Alpha(opacity=80)">

opacity = 80</span>


115

Visualização:

<span style="font-size: 24pt; font-family: Arial Black; height:1;filter:Alpha(style=0)">style=0 uniforme

</span>

Visualização:

<span style="font-size: 24pt; font-family: Arial Black; height:1;filter:Alpha(style=1)">style=1 linear

</span>

Visualização:

<span style="font-size: 24pt; font-family: Arial Black; height:1;filter:Alpha(style=2)">style=2 radial

</span>

Visualização:

<span style="font-size: 24pt; font-family: Arial Black; height:1;filter:Alpha(style=3)">style=3 retangular

</span>

Visualização:

<span style="font-size: 24pt; font-family: Arial Black; height:1;filter:Alpha(opacity=0, finishopacity=50, style=2)">

opacity=0 finishopacity=50 style=2</span>

Visualização:

<span style="font-size: 24pt; font-family: Arial Black; height:1;filter:Alpha(opacity=0, Finishopacity=70, style=3)">

opacity=0 finishopacity=70 style=3</span>

Visualização:


116

blurblurEste filtro cria um efeito difuso diminuindo a definição das bordas do objeto. Sua sombra apresenta a mesma cor do objeto, porém

com uma textura mais atenuada.

add

Booleano, 1 Sombreamento nítido, 0 Sombreamento difuso.

direction

Define o ângulo em que o efeito deve acontecer. Seu valor vai de 0 (topo) em incrementos de 45 graus até 315 graus.

strength

Define o comprimento que o efeito deve ter. Default = 5.

<span style="height:1; filter: Blur(add=0,Direction=45, Strength=3)"> <font color="blue">

<img src="imagens\cs05g.gif">Figura e texto

</font> COM <font color="red">

o filtro.</font>

</span>

Visualização:

<span style="height:1; filter: Blur(add=1,Direction=45, Strength=2)"> <font color="blue">


</font>COM<font color="red">

o filtro</font>

</span>

Visualização:

<span style="height:1; filter: Blur(add=1,Direction=45, Strength=3)"><font color="blue">


</font> COM


117

<font color="red">o filtro

</font></span>

Visualização:

<span style="height:1; filter: Blur(add=1,Direction=10, Strength=3)"><font color="blue">



o filtro</font>

</span>

Visualização:

<span style="height:1; filter: Blur(add=1,Direction=45,Strength=5)"> <font color="blue">



o filtro</font>

</span>

Visualização:

<font color="blue"><img src="imagens\cs05g.gif">Figura e texto

</font>Sem<font color="red">

o filtro</font>

Visualização:


118

chromachroma

Este filtro torna uma cor específica do objeto transparente. No exemplo a seguir a imagem home1.gif tem o fundo branco (criando contraste com o background) Com o filtro chroma pode-se neutralizar o fundo branco (#FFFFFF) da imagem, simulando uma imagem GiF de fundo transparente. Ah! O efeito não funcionará caso a cor selecionado não exista na figura.

color

Define uma cor do código RGB que sofrerá o efeito de transparência.

<body background="imagens\ambulancia.jpg"><span style="filter:chroma(color=FFFFFF); height:1">

<img src="imagens\home1.gif"></span>

</body>

Visualização (usando o filtro):

Sem o filtro:

dropshadow dropshadow Este filtro cria um eleito de sombra sólida no objeto. pode ser direcionada conforme o ângulo desejado.

color

Define a cor RGB (#rrggbb) da sombra. Os valores são em hexadecimal.

offx

Determina a distância de afastamento em "x" (horizontal). Os valores em pixels (px) podem ser positivos ou negativos.

offy

Determina a distância de afastamento em "y" (vertical). Os valores em pixels (px) podem ser positivos ou negativos.


119

positive

Parâmetro booleano: 1 para sombra positiva. 0 para sombra negativa.

<body><span style="font-size: 24pt; font-family: Arial Black;

height:1;filter:dropshadow(color=blue, offx=2, offy=2, positive=1) ;height:1"> color =blue offx=2 offy=2

</span> </body>

Visualização:

<body><span style="font-size: 24pt; font-family: Arial Black; height:1;

filter:dropshadow(color=green, offx=10, offy=10, positive=1) ;height:1">color =green offx=10 offy=10

</span> </body>

Visualização:

fliph e flipvfliph e flipvEfeito de imagem invertida no objeto. FlipH inverte no sentido horizontal (reflexo de espelho) e FlipV inverte no sentido vertical

(reflexo na superfície de um lago).

<body><p align="center" style="filter:fliph; height:1; font-size:20px;

color:#8B008B">Socorram-me subi no ônibus em Marrocos

</p></body>

Visualização:

<body><p align="center" style="filter:flipv; height:1; font-size:20px;

color:#8A2BE2">Socorram-me subi no ônibus em Marrocos

</p></body>

Visualização:

glow glow Borra os contornos do objeto. Esse ‘ borro’ pode ter uma cor diferente do objeto. Repare que no exemplo a seguir o objeto possui bordas pretas e o borrado é vermelho


120

color

Define a cor RGB (#rrggbb) do ‘borrado’.

strength

Determina a distância de afastamento do efeito. Seu valor é em pixels (px) e pode ser valor positivo (borro externo) ou negativo (borro interno).

<body><div style="filter:glow(color=red strength=-10); height:1">

<img src="imagens\comp.png"> </div>

</body>

Visualização – strength = -10:

<div style="filter:glow(color=red strength=10); height:1"><img src="imagens\comp.png">

</div>

Visualização - strength=10:

<div style="filter:glow(color=red strength=200); height:1"><img src="imagens\comp.png">

</div>

Visualização - strength=200:

graygrayEsse filtro torna a figura em tons de cinza:

A figura normal é:


121

<body><div style="filter:gray; height:1">

<img src="imagens\pordosol.jpg"></div>

</body>

Visualização:

invertinvertinverte a matiz de cores do objeto, criando um efeito como o negativo de uma fotografia.

Figura normal:

<body><div style="filter:invert; height:1">

<img src="imagens\flores.jpg"></div>

</body>

Visualização ( filtro invert):

motion blur motion blur Este filtro cria um efeito de movimento no objeto.


122

strenght

Define o comprimento do efeito (em pixels).

direction

Define o grau em que o efeito deve ocorrer (obviamente, de 0 a 360 graus).

progid:DXimagetransform.Microsoft

Parâmetros proprietários da Microsoft – obrigatórios

Visualização sem o efeito:

<div style="height:1; filter:progid:DXimagetransform.Microsoft.MotionBlur(strength=20, direction=100)">

<img src="imagens\rio.jpg"></div>

Visualização - strength=20 direction=100

<div style="height:1; filter:progid:DXimagetransform.Microsoft.MotionBlur(strength=100, direction=45)">

<img src="imagens\rio.jpg"></div>

Visualização strength=100, direction=45


123

wave wave Cria um efeito de ondulação no objeto.

add

Parâmetro booleano: 1 cria o efeito wave, 0 anula o efeito.

freq

Número de ondulações que o objeto deve sofrer.

lightstrength

intensidade de ondulação luminosa. (de 0 a 100%)

phase

Freqüência da ondulação, seu valor vai de 0 a 360graus.

strength

intensidade da ondulação da imagem.

Visualização figura sem o efeito:

<span style="filter:wave(freq=13, lightstrength=30); height:1"><img src="brasil.gif">

</span>

Visualização freq=13 lightstrength=30:

<span style="filter:wave(freq=4, lightstrength=80); height:1"><img src="brasil.gif">

</span>

Visualização freq=4 lightstrength=80:

<span style="filter:wave(freq=4, lightstrength=80, strength=5);height:1"><img src="brasil.gif">

</span>

Visualização freq=4 lightstrength=80 strength=5:


124

<span style="filter:wave(freq=4, lightstrength=80, phase=360); height:1"><img src="brasil.gif">

</span>

Visualização freq=4 lightstrength=80 phase=360 :

xray xray Efeito de chapa de raio X (se parece muito com o efeito Gray, mas é menos nítido:

imagem sem efeitos:

imagem com efeito Gray:

<div style="filter:xray; height=1"><img src="imagens\barra_flor.jpg">

</div>

Visualização XRay:


125

19 Frames 19 Frames <frameset atributos> ... </frameset><frameset atributos> ... </frameset>

Define um conjunto de quadros. um arquivo HTML que contenha o <frameset> não deve conter também o descritor <body> . . Pode ser utilizado dentro de <html>, <frameset> e pode <frame>, <no frames>, <frameset>

cols="x, y, ..."

largura ocupada por cada quadro. Pode ser uma porcentagem (valor seguido de "%") em relação à largura total da página ou um valor absoluto em pixels.

rows="x, y, ..."

altura ocupada por cada quadro. Pode ser uma ou um valor absoluto

frameborder="1 / 0"

largura em pixels da borda dos quadros. Por default, todo quadro possui uma borda. Para retirá-la use frameborder="0".

Frames verticais Esta é a sintaxe de um arquivo HTML simples com frames verticais. O exemplo consiste num arquivo dividido em três frames: 1,

2 e 3 com 10, 30 e 20 colunas, respectivamente. Cada frame exibirá seu arquivo correspondente conforme mostra o comando <frame src="...">O arquivo criado simplesmente estrutura a apresentação dos outros arquivos HTML, chamados frames_1.html, frame_2.html e

frame_3.html (mas poderia ser qualquer outro site, viu?). Ele é a moldura de apresentação desses três arquivos HTML. Quando a janela criada para cada arquivo não for suficiente para exibir todo o seu conteúdo, ele automaticamente cria barras de rolagem vertical e/ou horizontal, conforme a necessidade.

<html><frameset cols="10,15,20">

<frame src="frame_1.html"><frame src="frame_2.html"><frame src="frame_3.html">

</frameset></html>

Visualização:


126

http://orbita.starmedia.com/~edaurelio/a1.htm#html

http://orbita.starmedia.com/~edaurelio/a1.htm#body

Frames Horizontais

O mesmo exemplo dado anteriormente (usando frame_1.html, frame_2.html e frame_3.html), mas usando o atributo "rows=10,15,20": e sem as bordas, frameborder="0".

<html><frameset rows="10,25,10" frameborder="0">

<frame src="frame_1.html"><frame src="frame_2.html"><frame src="frame_3.html">

</frameset></html>

Visualização - foram incluídas automaticamente barras de rolagem porque não foi suficiente o espaço!!!

Para dividir os frames em janelas iguais no browser usamos o "*".

<frameset cols="*,*,*">

ou

<frameset rows="*,*,*">

irá criar três janelas verticais ou horizontais equivalentes.

Outra forma de distribuir os frames é usando valores percentuais. Determine quantos % cada frame deverá ocupar na janela do monitor. As distribuições sempre deverão totalizar os 100%:

<frameset cols="20%,60%,20%">

Frames CombinadosOs atributos "cols" e "rows" podem ser combinados simultaneamente criando janelas verticais e horizontais.

<frameset cols="30%,70%"><frameset rows="50%,50%">

<frame src="frame_1.html"><frame src="frame_2.html">

</frameset><frame src="frame_3.html">

</frameset>

Visualização:


127

framespacing="valor"

Este atributo altera a espessura das bordas deixando os frames mais separados entre si.

<frameset cols="30%,70%" framespacing="15"><frameset rows="50%,50%">

<frame src="frame_1.html"><frame src="frame_2.html">

</frameset><frame src="frame_3.html">

</frameset>

Visualização:

<frame atributos> <frame atributos> Define um quadro dentro de um conjunto <frameset>. É utilizado dentro de: <frameset>

align="top, middle, bottom, left, right"

Ajusta o alinhamento do frame ou do texto.

frameborder="1 / 0"

Ativa ou desativa a exibição de borda no frame relacionado.

src="URL"


128

informa a URL do documento que será exibido dentro do quadro.

name="rótulo"

Define um nome para o quadro que pode ser referenciado pelo atributo target do elemento <a>.

marginheight="número"

Define um espaçamento vertical em pixels entre a borda do quadro e o seu conteúdo.

marginwidth="número"

Define um espaçamento horizontal em pixels entre a borda do quadro e o seu conteúdo.

noresize

impede que o quadro possa ser redimensionado pelo usuário.

scrolling="yes | no"

Decide se haverá ou não barra de rolamento para permitir a visualização do conteúdo do quadro. Por default, as barras de rolamento aparecem sempre que o conteúdo ultrapassa a área de visualização do browser.


<frame marginwidth="50" marginheight="50" src="frame_1.html"><frame scrolling="no" src="frame_2.html">

</frameset>

<frame frameborder=0 src="frame_3.html"></frameset>

Visualização:

Neste exemplo, no frame 1 marginwidth=50 marginheight=50, observe como ficaram as margens do texto. Ele criou um espaçamento nas bordas verticais e horizontais.

No frame 2 configurei scrolling="no", ou seja, sem barras de rolagem. embora exista uma parte do texto que ficou oculta (no monitor de 14"), a barra de rolagem vertical não aparece.

No frame 3 configurei frameborder=0, então ele aparecerá sem bordas, observe a diferença entre os frames 1 e 2, com borda e o frame 3, sem borda.

<noframes> ... </noframes>

Caso o browser do usuário seja antigo ou não compatível com os recursos de frames, um recurso muito utilizado é inserir uma mensagem de aviso entre <noframes>... </noframes>, informando o usuário.


<frame marginwidth="50" marginheight="50" src="frame_1.html"><frame scrolling="no" src="frame_2.html">

</frameset>


129

<frame frameborder=0 src="frame_3.html"></frameset>

<noframes>O seu browser não suporta frames. Sugerimos obter uma versão atualizada do

Netscape Navigator 3.0 ou do internet Explorer 3.0 através dos seguintes sites:<p>

Microsoft: <a href="http://www.microsoft.com">

http://www.microsoft.com </a>

</p><p>

Netscape: <a href="http://home.netscape.com">

http://home.netscape.com </a>

</p><p>

<center>Clique no botão [Back] do seu browser para voltar.

</center></p>

</noframes>

Visualização - caso o browser não suportasse frames:

Montando um Diretório com frames Montar uma estrutura com frames verticais de forma que, ao clicar no índice do frame à esquerda ele mude apenas o frame à direita

mantendo o resto da página inalterada. Para montar essa estrutura vou criar mais três arquivos que me servirão como exemplos. Os arquivos chamarão matriz.htm, indice.htm e abertura.htm (dei aos arquivos nomes associados as suas funções pra ficar mais fácil o entendimento).

matriz.htm: Este e o arquivo que irá comportar os frames. É ele que irá aparecer no monitor com os dois frames verticais. indice.htm: Este é o arquivo que irá conter a lista de arquivos à esquerda. Serão os nossos já conhecidos frame1, frame2 e

frame3.htm. abertura.htm: Este é o arquivo que sempre irá aparecer à direita quando entrarem na sua página juntamente com o arquivo índice à

esquerda.

Sintaxe do arquivo matriz.htm

<html>

<frameset cols=20%,*><frame name="ladoesquerdo" src=indice.htm><frame name="ladodireito" src="abertura.htm">

</frameset></html>


130

Observe que o frame da esquerda terá 20% de tamanho <frameset cols=20%,*> e o asterisco indica que o restante do espaço ficará com o arquivo da direita. O parâmetro <frame name="ladoesquerdo" src=indice.htm> define qual arquivo irá aparecer à esquerda e <frame name="ladodireito" src=abertura.htm>, qual arquivo irá aparecer a direita.

Para criar o arquivo indice.htm

<html><head>

<base target="ladodireito"></head><body bgcolor="#daa520">

<center><h1>

Diretório</h1><br>Clique sobre a lista abaixo.<br><a href="abertura.htm">

abertura</a><br><a href="frame_1.htm">

Frame 1</a><br><a href="frame_2.htm">

Frame 2</a><br><a href="frame_3.htm">

Frame 3</a>

</center></body>

</html>

Visualização:

Sintaxe do abertura.htm:

<html><body>

Oi... esta é e abertura.htm!</body>

</html>


131

Visualização:

O parâmetro <base target="ladodireito"> acima, irá indicar ao browser onde os arquivos vinculados pelo comando <a href> devem ser carregados. Para entender melhor vamos ao exemplo prático, ele nada mais é que os dois arquivos apresentados acima.

Os arquivos frame_1, frame_2 e frame_3 são os mesmos já usados (não colocarei novamente a sintaxe porque poderiam ser quaisquer outros sites (como o www.google.com, por exemplo, em um dos frames)

Note como ficou fácil o entendimento analisando as sintaxes dos arquivos acima e depois verificando o exemplo.

Visualização final (abrindo o matriz.htm):

<iframe> ... </iframe > <iframe> ... </iframe > Define um frame embutido na página (como uma janela) e permite também a inclusão de outros documentos HTML.

src="URL"

Endereço do documento que será exibido.

name="texto"

Nome do frame.

width="número"

Define a largura do frame.


132

height="número"

Define a altura do frame.

align="top | middle | bottom | left | right"

Alinha o frame em relação a página no topo, meio, base, esquerda e direita, respectivamente.

Frameborder="1 | 0"

O valor 1 insere uma borda no frame, o valor 0 omite.

margnwidth="pixels"

Define uma largura para a margem.

marginheight="pixels"

Define uma altura para a margem.

scrolling="yes | no | auto"

yes permite a rolagem do frame, no não permite.

Exemplo: uma janela no centro desta página utilizando o comando iframe. A sintaxe de configuração é a seguinte:

<center><iframe width="350" height="200" scrolling="auto" frameborder="1"></iframe>

</center>

visualização:

Este frame possui o tamanho de 350 x 200 pixels, barra de rolagem automática e uma borda. Agora irei colocar um arquivo HTML dentro desta janela (o arquivo background.htm).

Sintaxe:

<center><iframe src="background1.htm" width="350" height="200" scrolling="auto"

frameborder="1"></iframe>

</center>


133

No próximo exemplo coloquei um texto rolante dentro da janela. Para criar o texto rolante coloquei uma frase qualquer dentro do comando marquee que por sua vez está dentro do arquivo banner.htm, depois inseri o arquivo banner.htm dentro da janela iframe, pronto!

Sintaxe deste exemplo:

<center><iframe src="banner.htm" width="400" height="20" scrolling="no" frameborder="1"

marginheight="2px"></iframe>

</center>

Arquivo banner.htm

<html><body bgcolor="#D8D8BF">

<center><marquee behavior="scroll" width="700">

<font face="verdana" size="2">Outro exemplo de aplicação é esta mensagem estilo banner.

</font></marquee>

</center></body>

</html>


134

20 Botões20 BotõesFechar a janela<html>

<body><FORM>

<INPUT TYPE="button" NAME="Button" VALUE="Fechar a janela" ONCLICK="window.close()">

</FORM> </body>

</html> Visualização:

<html><body>

<A HREF=JavaScript:window.close()> Fechar a janela

</a> </body>

</html>

Visualização:

<html><body>

Clique na figura para fechar a janela<A HREF=JavaScript:window.close()>

<IMG SRC="imagens/fechar.gif "></a>

</body></html>

Visualização:

Imprimir a página

<body><FORM>

<INPUT TYPE="button" NAME="Button" VALUE="Imprimir esta página" ONCLICK="window.print()">

</FORM> </body>

Visualização:

<body><A HREF=JavaScript:window.print()>


135

Imprimir esta página</a>

</body>

Visualização:

<body><A HREF=JavaScript:window.print()>

<IMG SRC="imagens/imprimir.gif"></a>

</body>

Visualização:

"Voltar" e "Avançar"<body>

<FORM><INPUT TYPE="button" NAME="Button" VALUE="Voltar"

ONCLICK="window.history.go(-1)"></FORM>

</body>

Visualização:

<html><body>

<A HREF="javascript:window.history.go(-1)">Voltar</a> </body>

</html>

Visualização:

<html><body>

<FORM><INPUT TYPE="button" NAME="Button" VALUE="Avançar"

ONCLICK="window.history.go(1)"></FORM>

</body></html>

Visualização:

<html><body>

<A HREF="javascript:window.history.go(1)"> Avançar

</a> </body>

</html>


136

Visualização:

Exibir Código Fonte<html>

<body><INPUT TYPE="button" VALUE="Código Fonte" ONCLICK="window.location =

"view-source:"+ window.location.href"> </body>


Botões Coloridos

<body><INPUT TYPE="submit" NAME="button" VALUE="Botão 1"><INPUT TYPE="submit" NAME="button" VALUE="Botão 2">

</body>

Visualização:

O atributo VALUE="texto" é o que apresenta a escrita na sua superfície. Vamos modificar o botão 1 que terá uma letra azul escuro (color: 0000FF) e um fundo azul claro (background-color: 87CEFA), e o Botão 2 terá uma letra preta (color: 000000)e um fundo amarelo ouro (background-color: FFD700).

<html><body>

<INPUT TYPE="submit" NAME="button" VALUE="Botão 1" STYLE="color:0000FF; background-color:87CEFA">

<INPUT TYPE="submit" NAME="button" VALUE="Botão 2" STYLE="color:000000; background-color:FFD700">

</body></html>

Visualização:

Botões com Links Para endereçar os botões com links, tem-se de renomear os botões, por uma questão de referência. O botão 1 passará a ser o Cadê e

o 2 será o Google. Um detalhe de apresentação será incluir o parâmetro STYLE="cursor:hand" para que o cursor mude para a mãozinha quando o

mouse sobrepõe o botão.

<html><body>

<FORM METHOD=GET ACTION="http://www.cade.com.br/"><INPUT TYPE="submit" NAME="button" VALUE="Cadê" STYLE="cursor:hand;


137

color:0000FF; background-color:87CEFA">

<FORM METHOD=GET ACTION="http://www.google.com.br/"><INPUT TYPE="submit" NAME="button" VALUE="Google"

STYLE="cursor:hand; color:000000; background-color:FFD700"></FORM>

</FORM></body>

</html>

Visualização:

Note que o tamanho do botão se ajusta automaticamente a quantidade de caracteres que tem na sua superfície. Para alinhar os botões lado-a-lado podemos recorrer aos recursos de <TABLE> (tabela).

<body>

<CENTER><TABLE>

<TR><TD>

<FORM METHOD=GET ACTION="http://www.cade.com.br/"> <INPUT TYPE="submit" NAME="button" VALUE="Cadê?" STYLE="cursor:hand; color:0000FF; background-color:87CEFA"> </FORM>

</TD><TD>

<FORM METHOD=GET ACTION="http://www.google.com.br/"> <INPUT TYPE="submit" NAME="button" VALUE="Google" STYLE="cursor:hand; color:000000; background-color:FFD700"> </FORM>

</TD></TR>

</TABLE></CENTER>

</body> Visualização:

(estão centralizados na página)

Os botões personalizados apresentados acima são estáticos, isso é, não reagem a sobreposição do mouse. Movimente o mouse sobre eles (sem clicar) e repare que eles parecem simples imagens. Então vamos fazê-los responder a sobreposição do mouse com alternamento de cores.

Primeiro: inserimos o código CSS/JavaScript. Observe os seletores .troca1 e .troca2. São eles que irão definir as cores iniciais do botão. Se escolher duas cores diferentes tem

que usar dois seletores com propriedades diferentes.

<body>

<STYLE>

.troca1 {background-color:black}

.troca2 {background-color:gray}</STYLE><SCRIPT LANGUAGE="JavaScript1.2">

function Troca(cor){var mud=event.srcElement

if (mud.tagName=="INPUT"&&mud.type=="submit") event.srcElement.style.backgroundColor=cor

}</SCRIPT>

<CENTER>


138

<TABLE><TR>

<TD> <FORM METHOD=GET ACTION="http://www.cade.com.br/" onMouseover="Troca('yellow')" onMouseout="Troca('red')"> <INPUT TYPE="submit" NAME="button" VALUE="Cadê" STYLE="color:pink; cursor:hand" class="troca1"> </FORM>

</TD><TD>

<FORM METHOD=GET ACTION="http://www.google.com.br/" onMouseover="Troca('blue')" onMouseout="Troca('green')"> <INPUT TYPE="submit" NAME="button" VALUE="Google" STYLE="color:white"; cursor:hand" class="troca2"> </FORM>

</TD></TR>

</TABLE></CENTER>

</body>

Visualização:

Quando abre a página:

Quando o mouse está em cima do primeiro:

Quando o mouse sai de cima do primeiro e está em cima do segundo:

Quando o mouse sai fora dos dois:

Botões TexturizadosGeralmente a superfície do botão é muito pequena e isso dificulta uma definição clara de sua textura. Usamos o atributo padding

para definir o distanciamento entre o texto (do botão) e suas bordas, manipulando a sua área de superfície. Os valores usados em padding são points (pt), inches (in), centimeters (cm), pixels (px) ou percentage (%). Botão 1 sem padding (default), botão 2 com 5 pixel de padding e botão 3 com 1 centimetro de padding:

<html><body>

<INPUT TYPE="submit" NAME="button" VALUE="Botão 1" STYLE="color:000000"> <INPUT TYPE="submit" NAME="button" VALUE="Botão 2" STYLE="color:000000;

padding:5px"><INPUT TYPE="submit" NAME="button" VALUE="Botão 3" STYLE="color:000000;

padding:1cm"></body>

</html>

Visualização:


139

As texturas não devem dificultar a leitura do texto que está na superfície e os botões tem que ter padding sufuciente para as texturas poderem ser visualizadas.

As texturas que vamos usar são essas:

(textura01.jpe) (fundo3.jpe) (textura23.jpe)

Através do atributo background:url(...) inserimos dentro dos botões.

<html><body>

<INPUT TYPE="submit" NAME="button" VALUE="Botão 1" STYLE="color:000000; background:url(F:\ana\apostila_html\imagens\textura01.jpe)">

<INPUT TYPE="submit" NAME="button" VALUE="Botão 2" STYLE="color:000000; padding:5px; background:url(F:\ana\apostila_html\imagens\fundo3.jpe)">

<INPUT TYPE="submit" NAME="button" VALUE="Botão 3" STYLE="color:000000; padding:1cm; background:url(F:\ana\apostila_html\imagens\textura23.jpe)">

</body>


Tamanhos e Formatos No exemplo anterior usamos padding para alterar o tamanho do botão porém esta propriedade não foi criada especificamente para

isso. Para manipular o tamanho, bem como, o formado quadrado ou retangular do botão usamos as propriedades width (largura) e height (altura). Seus valores podem ser em pixel (px), point (pt), centimeter (cm) e inches (in).

<html><body>

<INPUT TYPE="submit" NAME="button" VALUE="Botão 1" STYLE="color:000000; background:url(imagens/textura01.jpe)">

<INPUT TYPE="submit" NAME="button" VALUE="Botão 2" STYLE="color:000000; width:60; height:75; background:url(imagens/fundo3.jpe)">

<INPUT TYPE="submit" NAME="button" VALUE="Botão 3" STYLE="color:000000; width:50; height:20; background:url(imagens/textura23.jpe)">

</body></html>

Visualização:

Repare que os botões tem que ser altos e largos o suficiente para que o texto caiba dentro. O Botão 1 está no tamanho default, o 2 estaria alto demais e o 3 muito curto.


140

Botões com ImagensVamos usar background para inserir uma imagem no botão. Omitimos o texto de sua superfície configurando VALUE=" ", depois é só configurar as propriedades width & height para o

tamanho da imagem. Com a ausência do texto a figura deverá transmitir uma idéia de qual seria a função do botão, logicamente.Podemos colocar um título explicativo title="descrição no link , e quando o internauta colocar o mouse em cima abrirá uma tarja

identificando seu destino. No exemplo, somente o primeiro botão tem tarja.

<html><body>

<FORM method="get" action="http://anacarol.blog.br/" title="Site"><INPUT TYPE="submit" NAME="button" VALUE=" "

STYLE="color:000000; width:94;height:40;background:url(F:\ana\img.gif); cursor:hand"></FORM>

<FORM method="get" action="http://anacarol.blog.br"><INPUT type="submit" NAME="button" VALUE=" "

STYLE="color:000000; width:170; height:90; background:url(imagens/img.gif); cursor:hand">

</FORM></body>

</html>

Existe necessidade de adeqäar o tamanho de acordo com o tamanho real da figura. Se colocarmos um botão maior, ele será

preenchido com repetições da figura; se colocarmos um botão menor, a figura não poderá ser totalmente vista.


141