F

141 Páginas

Linguagem
HTML
Professora Ana Carolina Jaskulski
http://anacarol.blog.br
anamaxwell@gmail.com
Março/2007

2

Índice

Introdução..................................................................................................................................9
1 História..................................................................................................................................10

1.1 Evolução do HTML .........................................................................................................................................................10
1.2 Fundamentos da Linguagem HTML................................................................................................................................11
1.3 Os Nomes dos Arquivos .................................................................................................................................................11
1.4 A Lógica LIFO..................................................................................................................................................................11
1.5 O Arquivo HTML Básico .................................................................................................................................................12
1.6 O Arquivo index.htm .......................................................................................................................................................12

2 Elementos Estruturais..........................................................................................................13

<html atributos> ... </html>....................................................................................................................................................13
version= "versão" ................................................................................................................................................................13
lan="idioma".........................................................................................................................................................................13
dir= "rtl| ltr" ..........................................................................................................................................................................13

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

3 Elementos do Cabeçalho.....................................................................................................18

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

Alterando o Formato do Cursor ............................................................................................................................................18
Usando um Arquivo como Cursor..........................................................................................................................................19
cursor:url(...)........................................................................................................................................................................19

Anexando Objetos ao Cursor ...............................................................................................................................................20

4 Links e Imagens ..................................................................................................................22

Links Internos e Externos .....................................................................................................................................................22
href= "..."................................................................................................................................................................................22
name= "..."...........................................................................................................................................................................23
target="_blank", "nome" ou "_top".......................................................................................................................................24
title="descrição"...................................................................................................................................................................24

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

5 Imagens................................................................................................................................31

<img atributos>......................................................................................................................................................................31
Profª Ana Carolina Jaskulski

http://anacarol.blog.br

anaschneider@gmail.com

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

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

6 Elementos Especiais............................................................................................................37

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

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

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

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

<nobr> ... </nobr>..................................................................................................................................................................41
<wbr> .................................................................................................................................................................................
...41
<map atributos> ... </map > ..................................................................................................................................................42
name="nome_do_mapa".....................................................................................................................................................42
ismap...................................................................................................................................................................................42
usemap="#nome_do_mapa"...............................................................................................................................................42

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

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

<!-- comentários ... --> ..........................................................................................................................................................44

8 Formatação de textos e caracteres......................................................................................45

Elementos 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> ......................................................................................................................................................................46
Elementos Físicos.................................................................................................................................................................47
<b> ... </b>............................................................................................................................................................................47
<i> ... </i>...............................................................................................................................................................................47
<tt> ... </tt>............................................................................................................................................................................47
Profª Ana Carolina Jaskulski

http://anacarol.blog.br

anaschneider@gmail.com

.... </sup>........................................................................................................................... "bottom" .................................................47 <s> .........50 scrollamount="número"............... </blink>.....................................................47 <strike> ......68 Espaçamento Forçado......................................................................................................................................................................50 direction=left........................................................................................ </p> ............................................................................................................ down..............................................................................................................................................................................................60 align="left"................................................................................................................................................... alternate .......................................................48 align="top".............................................50 loop="número".............................................................57 </H1................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................47 <blink> ...69 <blockquote> ............................................................................................................................................................................ -1 a infinite.......................................................................................... </acronym> .................................................57 <p atributos> .................... </s>..................................... "left"....................................................................................................................................................................................................................50 hspace="número"............................................... </pre> .57 align="center"...............................................................................................................50 height="número"..................................................................................................... "center" ou "right"............................................................................ </div> ................................................................................................................................................................................................................................... H6> .....................................................................................................................................70 align="center"..............................58 align...................................................................................................................................................50 scrolldelay="número"................................................. </small>...........................................................................................................blog.................................................. </center> .............................47 <sub> .............................................................................................................................................................................................................................................................................................................................. </address> .............................................................................................................................br anaschneider@gmail................4 <u> ...........................50 width="número".................50 vspace="número"............ H6 atributos>.......................................................................................................................................................................................................................................................................................................................................................................................................................47 <sup> .........................................................................60 <hr atributos> ........................................................................................................................................................................................................................................................70 style="propriedades"......70 <div atributos> ..69 <address> ............................................................................58 10 Linhas Horizontais ........71 title ......69 cite=URL.....60 size="número".............................................................................................................................72 Não Ordenada..............58 style="propriedades" ..........................................................................63 Outros Separadores de Texto........... </del>...............................................................61 color="#rrggbb" ou "nome"............... </strike>...................................................49 bgcolor="cor" ..................47 <del> ..................................................................................................................................................................................................................... H2...................................................................................................................................................... </ul> .................................................................................................................................................................................................................................................................................................50 9 Formatações.......................................68 <q atributo> ......................68 width=".............................................................................. up...........................................................................72 <ul atributos> .......................................................................................................................................... </u>..................................................................................................................................................................................................................................................................................................................... "left" ou "right"....................................................................................................................47 <big> ..........................................................................."............................ </sub>........................................................... H2........... </q> .........................................................47 <small> ..................................49 behavior =scroll.......................................................................................... "right" ou "justify".........................................................................................................................................................................................................................................................................................................com .......................................70 <center> .................................. ..................................... %......................................................... %:...............................................................................................................................................................................................61 11 Linhas Verticais........................68 <pre atributos> ...................... right............... ................ </blockquote> ..........72 Profª Ana Carolina Jaskulski http://anacarol.......... </big>..........................................................................57 <H1........................................................61 noshade......... slide........................71 13 Listas.............................................................................................................................60 width="número"........................................66 12 Texto Pré-Formatado ........................................................................................................................57 style="propriedades"...................................................................................................................................................................................................................................71 <acronym atributos> ..................................................................................................................... "middle".......................

....................................................................................................................................br anaschneider@gmail...............83 bgcolor="cor"...................................................................................................................... Cores e Backgrounds em Tabelas...........................................................................................................................................................84 table data <td atributos> .......................................................................................................................................................................................................................................</td> .........................84 char="caracter".................................................................................................................................................................................................74 14 Tabelas....................................................................................................................................................................73 <li atributos> ....................82 valign="baseline..............................................................................................................................96 Fazendo Gráficos de Estatísticas......................................................................................................... </table> ...................................90 <caption atributos> </caption> .............................. </th> ......................................................................................87 width=valor...........................................................................................................72 start="valor"......................................................................................................................................................................................................................................</tbody> .........89 bordercolor.......... </dt> ............................81 <tr atributos> ....................................................................................5 type= “tipo"........................................................................................................................................................76 <table atributos> .............................................................................................76 <tr>..............................................84 bordercolordark="cor".........................................92 <tfoot>............... </li> ............................................................. </td> ..91 <thead>..............................................................................................................................................................................................81 bordercolorlight ="#rrggbb" ou "nome"..................................91 <tbody>.........................................90 <th atributos> ............ top" ou "middle"................................................................</table> ............................. </ol> ....................................................... (default) ou bottom......................................................................................................................................................74 <dd atributos> ...............................................................................................................................................................................................................................................................................................................................................................82 align="left................................................................78 width="valor" e height="valor"...............................................................................76 <table>...................84 charoff="número".89 bordercolordark e bordercolorlight....................................................................................................................................................................87 nowrap.........................................................80 bordercolordark ="#rrggbb" ou "nome"................................................................................................88 bgcolor="#RRGGBB"......................................com ...........................................................................73 compact....................................................................................................................................................85 colspan=número.............................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................84 bordercolorlight="cor".........................................................................................................................................................85 rowspan=número............76 border="valor".............................................................................................................................</tr> .........................100 Tabela com Imagens Linkadas..................................................................................77 cellpadding="valor"......................................................................................................................................................................................................73 <dt atributos> ...............................................................................86 valign=baseline................................................................................................................................................................................................89 background="diretório/nome do arquivo".....................................................79 bgcolor="#rrggbb" ou "nome"..................................... right ou center ...............................................79 background ="diretório/nome do arquivo"...........................................76 <td>............................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................blog........................................................... </tr> .................................................................................................................................................................................................. bottom........74 Usando Figuras como Marcadores ................................... </dl> ...................................... bottom.......................................</thead> ................................................................................................................................................................................................................................................................................................................................................91 align=top......... </dd> ....................72 type="tipo".................................................................................................................................................. top ou middle ............................................................................................................................................................................................................................................................................................................................................ ...........................................................................................................................................................................92 Usando Tabelas para criar Colunas de Texto...............................73 <dl atributos> ...............................93 Imagens..............................................72 <ol atributos> ...............................................................................103 Profª Ana Carolina Jaskulski http://anacarol...................................................................91 Formatando grandes tabelas ................80 bordercolor ="#rrggbb" ou "nome"..............................................................................83 bordercolor="cor"...............................................................................................................................................................................................................................................................</tfoot> ...................85 align=left...................... right" ou "center"...........................................................72 Ordenada..............................................................................................................................................................................................

...........................................................................115 alpha........109 <nobed> .................................................................................................................................................................................................................109 width="número"............................................................................................................................................................................................................................ ......................................................................................................................................................................................................................................108 src="endereço"..................................................................................................................................................................................................................................................................................................................................................................................115 startx .......................................................................................................................................................div................................................................108 width="número"...............................................................................................................................................................................................................................................................................119 offx ............................................................................................................................................................. "bottom" ............................................... </nobed> .......................................................................115 starty ................................................................108 height="número".................................................................................................................................................................................................108 hspace="número".........................................................................................................117 add ........................................................................................................................................107 align= ""..................................................................................................................107 hspace="número".................................................................. "background"....................................................................................................................... ...............................................................................................................................................................................................................................................................................................................................................................................................................................................108 hidden="true"...............................................115 finishopacity ........................................................com .................................................................................................................................................................................................................................................................................................................. "false"......................................................................................................................................................................................................................................................................................................107 controls......................................119 Profª Ana Carolina Jaskulski http://anacarol.......................................................................................................... </embed> .......................................................................110 left (esquerdo) e top (topo)................................................................................................................................................................... "top".........................................................................................................................................................................119 color................107 loop="número ou infinite"............................117 strength .........................................................................................109 pallete="foreground"..........................................................................119 color .........................................................................................................................................................115 blur...........106 16 Vídeos com img........................................................................................................................................115 finishx .. "right".......................................108 <embed atributos> .....................................................................................................................................................................................................................................................................................108 align="left".........................................................................................................................................................................................................................................................110 width (largura) e height (altura)..........................................................117 direction .............................106 loop="número | infinite"......................109 17 Posicionamento de Objetos .........................................................................................................................................................................................................................................................................................................................................................................108 vspace="número".....................................................................................................................109 vspace="número".108 border="número"...........................................................................................................................................................................................107 border="número"......... .......................................................................................................................... .................................................................................................................................................................................................................................................................................................................................107 height="número"......115 finishx ............108 start="fileopen / mouseover".....................................................117 chroma ..........................................................................................................................................................................................................................................................br anaschneider@gmail..........................................................................................................................................................107 alt="texto"..........................................................................................................................................................................................................................................................................................................................................................................................................115 style ............................................................................................................................................................................................................113 18 Filtros................................................109 pluginspace="endereço"..................................................................6 15 Multimídia ...110 z-index.................................................................................................110 position....................................................................................................109 type="mimetype"..........................................................................................................................blog.........................................................................................106 meta................................................119 dropshadow .........................................115 opacity ...........................................................................................113 overflow........108 frameborder="no".....................106 <bgsound atributo> .........................................107 dynsrc="URL"......................................................................................................................................109 name="texto"...................................................................106 src="URL".................................................................................................................................................................................................................................................................................................

.....132 src="URL"....................126 <frameset atributos> .............................................................................................................................................................................................................................127 Frames Combinados..133 marginheight="pixels"....................120 color ..................................................................................................................................................................................................................................................................128 align="top............................................................................................................................................... </frameset> .....129 marginwidth="número"...............................................................................................................126 frameborder="1 / 0"................................................................... bottom..............................137 Botões com Links .....................119 positive ........................................ ...................................................................................................................130 <iframe> ............................................................................................127 framespacing="valor"...........................................................................................124 xray .. middle.....................125 19 Frames ..................................................................................................................................................................................................................................................................................................................................................................................................133 scrolling="yes | no | auto"..............................................................................................................................................................................................................................................................7 offy .......................................................129 marginheight="número"............................................137 Botões Coloridos ........................................................................................................................................................124 strength .................................................................................................................................................................................................122 strenght ....................133 Frameborder="1 | 0"...................................................................................................................................................................129 noresize ...................................................................124 freq ......................................................................................................................................................................................................133 20 Botões....................................................................................................124 lightstrength .....................................................................135 "Voltar" e "Avançar".......................................................................................126 Frames Horizontais..........................126 rows="x.....133 margnwidth="pixels"......................................................... ....................... right"............................................................................................................................................135 Imprimir a página.............................................................................................................126 cols="x....................................................................................blog.......................................................................................................................................br anaschneider@gmail........................................................................................................................................................................"......................................................................................................................................................... ..............................................................................................................................................................................................................................................................132 name="texto"..............................................................137 Botões Texturizados..................121 strength ....................................................................120 glow .....................................................................................................129 Montando um Diretório com frames ...........................................................................................................................................................................................................................................................................................................................................123 wave ...............................................................................................120 fliph e flipv...................128 frameborder="1 / 0" ................................................................................................................................................................................................................................................................................................................................................................................................................................................................................132 height="número"........................................com .......129 scrolling="yes | no"................................................................................................................................................................................................................................................................................................................................................................................................................. y............................................................................................................................................................................Microsoft ................................................. ........................139 Profª Ana Carolina Jaskulski http://anacarol..........................................................................128 src="URL"..................................................................................................................................124 add ...........................................................................121 gray.........................................................................133 align="top | middle | bottom | left | right"................................128 <frame atributos> .......................................................................................................... y...............................................................................................................................................................................................................................................................................................................................................................................................................................121 invert................................................................................................................................................................................................................................................124 phase ............132 width="número"............................................................................................................................................................................................................................................................................................................................................................................. </iframe > .................................................................126 Frames verticais .......................................................................135 Fechar a janela...............................................................................................123 direction ......... left................................................................................................................................................................................................................................................................................................................................................................................................................................................................................122 motion blur .............................................................................................................................................................................................................................................128 name="rótulo".......................................................... ..........................................136 Exibir Código Fonte.."..................................................................................................................123 progid:DXimagetransform...............................................................................................................................................................................................................................................................................

.....br anaschneider@gmail........................................141 Profª Ana Carolina Jaskulski http://anacarol....................................................8 Tamanhos e Formatos ............................................blog.......................................................................................................................................140 Botões com Imagens.................................com ..

Nem Ajax.br anaschneider@gmail. Nem Javascript. Nem todos os conteúdos abordados aqui nós veremos em sala de aula. Bons estudos! Profª Ana Carolina Jaskulski http://anacarol. Ela não vai te ensinar tudo de HTML. Esta apostila é um Guia. Esta apostila não substitui a aula.. Ela não vai te ensinar CSS.com.. Essa apostila não visa lucros.ela é um complemento.br eu vou sempre colocar mais informações e outras fontes de pesquisa . porque não há tempo para tudo. É um apanhado de materiais que encontrei (outros que ganhei) e alguns exemplos que visam ajudar no seu aprendizado. Nem DHTML. muito completos e muito bons de ler. Tampouco você precisa ter ela durante as aulas. você não deve pagar por ela.. No site da editora eles disponibilizaram parte dos livros em formato PDF.. com livros MUITO divertidos. São escritos com técnicas que ajudam o leitor decorar os comandos através de exemplos bem humorados e figuras divertidas. Dê uma olhada.. A editora Alta Books lançou a coleção Use a cabeça.9 Introdução Aqui neste material você encontrará muitas informações sobre HTML. É muito divertido!. Use a Cabeça .blog.com .HTML com CSS e Use a Cabeça – AJAX No site http://anacarol.de vários assuntos.

se B deixa de funcionar. 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 . O HTML nasceu em 1991 no CERN (European Council for Nuclear Research – Conselho Europeu de Pesquisas Nucleares).CSS2 em maio é lançado a segunda versão da Folha de Estilo que. Hoje ela é um conjunto de milhares de redes no mundo inteiro. embedding objects. Por isso que não há um único lugar que "governa" a internet.Rede de Alcance Mundial). 1995 .0 São lançados os browsers Netscape v4. Com o HTML (e a facilidade dele). Então.1 Evolução do HTML 1992 . Era o auge da Guerra Fria. uma coleção de recursos que podem ser alcançados através destas redes. e ambos). com a liberação das versões para Mac e Windows. o Mosaic foi que iniciou o crescimento explosivo da WEB. melhor suporte para texto com direção variável (esquerda. computadores com monitores de diversas resoluções e vários números de cores. formulários. O que essas redes têm em comum é o protocolo TCP/IP (Transmission Control Protocol/Internet Protocol). JavaScript/VBScript e DOM) que juntas disponibilizaram diversos recursos tornando o HTML dinâmico. Seu criador. então do NCSA. quando a tecnologia da ARPANET passou a ser usada para conectar universidades e laboratórios. 1993 . onde há de tudo. Assim. No outono 1993 tornou-se disponível a milhões de usuários. que permite que elas se comuniquem umas com as outras. melhorias nos forms. O poder da WWW (World Wide Web . 1994 .com .Primeira aparição do HTML. 1996 .10 1 História A internet nasceu em 1969. direita. a internet ficou restrita ao ambiente acadêmico e científico. 1994 . 1. frames (janelas). Possuía uma formatação simples e cerca de 60 propriedades. Surgiu então o conceito central da internet: uma rede em que todos os pontos se equivalem e não há um comando central. Interligava originalmente laboratórios de pesquisa e se chamava ARPANET (ARPA: Advanced Research Projects Agency). criada para complementar a linguagem HTML. scripting. por outro lado foi esse programa que se tornou sinônimo da WEB.0. primeiro nos EUA e depois em outros países.HTML v3. na suíça. uma comunidade de pessoas que usam e desenvolvem essas redes.Protocolo de transferência de Hipertexto) e da linguagem HTML (Hypertext Markup Language – Linguagem de Desenvolvimento de Hipertexto). Essa conexão entre documentos é possível graças à utilização do protocolo de comunicação chamado HTTP (Hypertext Transfer Protocol . tabelas. tabelas mais visualizáveis. o inglês Tim Berners-Lee de 44 anos.0 Padronização para as características principais. Em 87 pela primeira vez foi liberado seu uso comercial nos EUA.0 (agosto) e internet Explorer v4. a internet se tornou uma imensa biblioteca.HTML v3. 1998 . 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. exigia do usuário disposição para aprender comandos em Unix (uma linguagem de programação) bastante complicados. Foi essa biblioteca que deu origem à construção de vários browsers WWW e servidores que tornaram a WEB viável.br anaschneider@gmail. nos Estados unidos.2 Netscape e Internet Explorer definem seus próprios padrões baseados nas implementações correntes. Era uma rede do Departamento de Defesa norte-americano.0 estende com mecanismos para style sheets (CSS). A e C continuam podendo se comunicar. e enfrentar um ambiente pouco amigável (unicamente em texto).HTML+ Algumas definições da aparência. O nome “internet" surgiu bem mais tarde. Um desses browsers foi o Mosaic. a internet pode ser definida como: uma rede de redes baseadas no protocolo TCP/IP. Durante cerca de duas décadas.para isso é mantido o padrão.0 (outubro) que apresentaram um conjunto de tecnologias (CSS. o primeiro browser multiplataforma que explorava completamente a capacidade de hipermídia da WEB. equipamentos para input e output de voz. 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. e os cientistas queriam uma rede que continuasse de pé em caso de um bombardeio.JavaScript criada por Brendan Eich da Netscape como uma extensão do HTML para o browser Navigator v2. 1997 . Tornou-se uma grande arena de conhecimento e diversão O HTML 4.HTML v4. A Web fez pela internet o que o Windows fez pelo computador pessoal – tornou acessível. 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. Se por um lado novos browsers têm superado os recursos do Mosaic. melhor acessibilidade para pessoas com incapacidades.CSS1 em dezembro deste ano é apresentada pela primeira vez a Folha de Estilo. Surge então o DHTML. Um desenvolvimento fundamental aconteceu em julho de 1992 com a liberação da biblioteca de desenvolvimento para WWW. computadores com alta e baixa largura de freqüência e muito mais.0 uma extensão do HTML+ entendido como um rascunho de padrão.HTML v2. antes da Web. O HTML tem sido desenvolvido com a visão que todos os equipamentos fossem capazes de usar a informação da Web.blog. A "antiga" internet. 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. Desenvolvido por Marc Andreson. além de incluir todas as propriedades do CSS1 ainda Profª Ana Carolina Jaskulski http://anacarol. 1995 .

2000 . O HTML é uma linguagem de formatação criada para estruturar a página que será exibida na internet (no browser). Cada Tag é um comando que será interpretado pelo browser (por exemplo. pois não tem como o browser não cumprir uma ordem direta.htm e ele estiver com o nome Apostila. assim. 1999 . Sabendo HTML se ganha independência para criar. letras e underline (o _) 1. Parágrafos. ao invés de nomear o arquivo "pagina um. Quando isso acontece o Webmaster (que conhece a Linguagem HTML). exemplo: index. onde o sinal "/" significa o fim da atuação da tag. Não use pagina.HTML v4. tem que se especificar onde começa e onde termina. um arquivo HTML é também conhecido como página Web ou Home Page e são identificados com a extensão . assim: Profª Ana Carolina Jaskulski http://anacarol.html" O ponto final deve ser usado uma só vez para separar a extensão (de três letras) que classifica o arquivo. As tags são delimitadas entre os sinais de menor "<" e maior ">".O que você vê é o que você tem). OpenAcces.0 É criado e consiste de uma versão XML do HTML v4.3 Os Nomes dos Arquivos HTML não faz distinção entre letras maiúsculas (caixa alta) e letras minúsculas (caixa baixa). use somente números. os WYSiWYG (What You See is What You Get . números.4 A Lógica LIFO O HTML é uma Linguagem de Marcaçã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).html. elas podem vir uma dentro da outra. por isso que muitas vezes é escolhida como a primeira Linguagem de Programação a ser aprendida por uma pessoa. ou seja: uma arquivo do Word não abria no Carta Certa. Para evitar que ocorram incompatibilidades como esta. mas depois vieram os WordStar.br anaschneider@gmail. e se criar um link para um arquivo chamado apostila. o servidor simplesmente não irá encontrá-lo. usando a criatividade. sem formatação alguma (mudança de cor de fonte. parênteses. Listas e Tabelas) e onde inserir links em hipertexto e imagens e outros Objetos. 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). pipe. caso a página esteja no seu próprio computador) diferencia letras minúsculas e maiúsculas. nomeie como "pagina_um. porém. Ser em texto puro significa que os arquivos em HTML não contêm nada além de letras..01 Alguma modificações da versão anterior. simplesmente entra no código fonte e "faz na mão". por exemplo: <tag>texto</tag>. na internet foi desenvolvido o padrão HTML.htm. As marcações informam ao browser como formatar o conteúdo (em Cabeçalhos. A incompatibilidade existia porque cada programa adicionava ao texto códigos próprios (para o controle dele e que os outros não conheciam). são excelente para isso).11 apresenta por volta de 70 novas propriedades. Estas ferramentas foram desenvolvidas para facilitar a vida do Webmaster. 1. qualquer um serve (o Bloco de Notas e o Vi. a tag <b> é o comando para transformar o texto em negrito). e sem depender dos recursos do Editor HTML que se estaria usando.com . truques de macetes de elaboração da página (a questão de copyright ou direitos autorais). Nunca se deve 'embaralhar' as tags. onde se insere marcações (tags). trema. Porém o servidor onde a página estiver hospedada (ou o sistema operacional. como também na possibilidade de acontecerem incompatibilidades do editor para com a linguagem. tais como: acentos. Os nomes de arquivos não devem conter caracteres. cedilha. por exemplo. A maioria das tags funciona em dois tempos. por serem texto puro. use pagina. sinais de pontuação e caracteres em geral que podem ser impressos.html". pontuações. 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.XHTML v1.html. não necessita de conhecimentos prévios de programação. É por isso que muitas vezes o servidor retorna com uma mensagem de "Arquivo não encontrado".2 Fundamentos da Linguagem HTML O Edit foi um dos primeiros (e mais simples) editores de texto. Seus arquivos são de texto puro com códigos de marcação (as Tags).. Muitos Webmasters 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.01. e comercial. Tanto faz escrever <font> como <FONT>. Carta Certa. como tudo na Rede está em fase de transição. tabulações nem parágrafos). principalmente para diminuir o tamanho do arquivo.htm.htm ou . 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. que infelizmente não eram compatíveis entre si. mas existem editores exclusivamente HTML. na forma de elementos HTML no conteúdo da informação que será publicada. Word. asterisco. Cada um trazia suas inovações (suas possibilidades).html para o nome do arquivo. chaves etc. mas com o passar do tempo foram-se criando formas de transformar de um padrão para outro: de Word para Carta Certa. 1. ou seja. clicar no botão direito e selecionar a opção [Exibir código fonte]. por ela ser muito simples.blog. Caracteres ASCii puro. por isso é comum encontrarmos sites com bloqueio deste recurso A grande vantagem da linguagem HTML é que. Outro fator é o de não precisar de um editor específico. sinais de maior e menor. porém a que começou primeiro tem que necessariamente terminar por último.

html tiver sido deletado ou for inexistente.htm Normalmente. com <title> e </title>. Porém.meusite. atributo e valor.htm ou .blog.meusite. que necessariamente é a primeira que aparece no texto.br/meu_diretorio/index. Fora do cabeçalho. o browser procurará naquele servidor ("meusite. o browser procura pelo arquivo index.com. e sua terminação </html> é obviamente a última. 1. porém dentro das tags <html>.br/meu_diretorio/. Profª Ana Carolina Jaskulski http://anacarol. existe o "corpo" definido por <body> e </body> e aonde vai o "corpo" do site. como por exemplo: <tag1> <tag2> <tag3> texto </tag2> </tag1> </tag3> isso segue a lógica LIFO (Last in.com . First Out .html. o browser apresentará uma listagem dos arquivos contidos naquele diretório.com. mas exibirá uma lista de todos os arquivos e diretórios contidos no diretório "meu_diretorio". o browser não abrirá nenhum outro arquivo. A tag que significa linha em branco não necessita de fim. Se esse arquivo não existir. <html> <head> <title> </title> </head> <body> </body> </html> <!— <!— <!— <!— <!— <!— <!— <!— início do código html --> cabeçalho --> título --> final do título --> final do cabeçalho --> corpo do site --> final do corpo do site --> final do código html--> 1. Uma tag é formada por comando. a tag que significa imagem não necessita de terminação e nem se relaciona necessariamente com texto. se o arquivo index. Nem todas as tags necessitam ser terminadas. o arquivo index. o endereço de um site pode ser http://www.O último aberto deve ser o primeiro a ser fechado). assim como também a tag de barra horizontal. Como não são todas as tags que são relacionadas com textos. é a <html>.htm é o arquivo default dentro de um diretório. junto com o nome do mesmo.6 O Arquivo index. porém o que sempre existe é a definição do título. em seguida definese o cabeçalho com <head> e </head> Dentro do cabeçalho podem existir diversas outras tags específicas e scripts em diversas linguagens. Este título é o que irá aparecer na barra superior da janela do browser.12 <tag1> <tag2> <tag3> texto </tag3> </tag2> </tag1> Nunca misture a seqüência. Existe uma tag que identifica o documento como sendo HTML. o que pode não ser nosso desejo. Se digitar no browser somente http://www.5 O Arquivo HTML Básico O documento HTML normalmente possui extensão . Os atributos com seus valores modificam os resultados default dos comandos.com.html. Quando indicamos um endereço (link) e não especificamos um arquivo dentro de um diretório. Por exemplo.html.br anaschneider@gmail.br") o arquivo index. Estas são as tags básicas de todo arquivo html.html dentro do diretório "meu_diretorio" mesmo que eu não tenha especificado isso quando eu digitei o endereço.

. dir= "rtl| ltr" Determina a direção do fluxo do texto: RTL da direita para a esquerda.br anaschneider@gmail. </html> No exemplo acima estou declarando que o arquivo HTML está no idioma inglês Americano. Todos os demais comandos devem ser envolvidos por ele. fluxo direcional e uma infinidade de peculiaridades principalmente nos idiomas orientais.. <html lang="HE" Dire="RTL"> Essa é uma página formatada para o Hebraico. lan="idioma" <html lang="en-us"> O corpo do arquivo. Ltr da esquerda para a direita...blog. </html> É o comando de abertura e fechamento do documento HTML. </html> Visualização: rtl (observe que a barra de rolagem vertical passou para o lado esquerdo): Visualização dir. </head> Profª Ana Carolina Jaskulski http://anacarol.com . version= "versão" informa a versão do HTML usado.. Os idiomas diferem de muitas maneiras quanto à aparência impressa: tipos de caracteres.= "Ltr" <head atributos> .13 2 Elementos Estruturais <html atributos> ..

com"> <meta name= "author" content= "Ana Carolina Schneider da Silva" > <meta name= "keywords" content= "HTML.o aparecer&atilde.o quando o internauta imprimir o site.br anaschneider@gmail.jpg"> Esse &eacute. <html> <body background="imagens\folha. e as figuras aqui atr&aacute. <html> <head> <title> Apostila de HTML </title> <link rev=made href="mailto:anaschneider@gmail. o body . WWW. 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).14 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). programação" > <meta name= "description" content= "Apostila de HTML com comandos". básicos e avançados ">". Elas não aparecem na página visualizada.s s&atilde..blog.. </body> </html> Visualização: Profª Ana Carolina Jaskulski http://anacarol.do do seu site.. aqui vai aparecer para nosso caro internauta!! </body> </html> Visualização (observe que as informações estão somente no código): <body atributos> . Atenção para cores fortes: isso não poderá impedir a leitura do texto. a parte que aparece na área de visualização do browser. </body> Contém o corpo do documento HTML..o conte&uacute. um exemplo de corpo do site para mostrar que s&oacute. comandos. Os atributos alteram a aparência. tutorial. o que est&aacute.. <meta name="language" content="Portuguese"> <meta name="robots" content="all. follow"> </head> <body> Este &eacute.com .o o background e n&atilde.

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.esta que estou usando. muda a cor).15 bgcolor= "#rrggbb" ou "nome" indica um número em hexadecimal ou um nome que define a cor de fundo. green. olive.com . lime. gray. sendo que o padrão é azul (link= "#0000FF"). <html> <body text="lime"> isso &eacute. red.tis!): <a href= "http://www. maroon. white (branco). text= "#rrggbb" ou "nome" Cor de texto. blue. <html> <body link="red"> Essa &eacute.br anaschneider@gmail. cuidado! Algumas cores podem *ofuscar* o internauta!!!! .) </body> </html> Visualização (cuidado com o uso inadequado das cores!!): link= "#rrggbb" ou "nome" Cor de texto do link. por exemplo . um texto na cor lime. teal.oracle. fuchsia. yellow..com/profitmagazine" > PROFIT </a> (ah! esse link (por padr&atilde. purple. O nome é uma das 16 cores universalmente conhecidas (padrão VGA do Windows): aqua. o padrão é o vermelho (alink= "#FF0000"). silver..blog. gr&aacute. Profª Ana Carolina Jaskulski http://anacarol. navy. black. O padrão é preto (text= "#000000"). uma (outra) excelente revista para interessados em banco de dados (e &eacute.

bgproperties= "fixed". <body leftmargin= "10" > Observe o espaço entre a margem e o início desse texto </body> --- LEFTMARGIN=10 Visualização com leftmargin = 10: Profª Ana Carolina Jaskulski http://anacarol.16 vlink= "#rrggbb" ou "nome" Configura a cor do link ativo.com .ela n&atilde. <html> <body bgproperties="fixed" background="imagens\sky03. do espaço entre o início do texto e a borda esquerda da área de visualização do browser. Mantém o papel de parede fixo no fundo da tela. impedindo que o ele role junto com o conteúdo da página.o se move junto com o texto ************************* **************** **************************************** ***************************** ***************************************** ************************** ********************* </body> </html> Visualização: Visualização (depois de mover a barra): leftmargin= "n" Define o tamanho. hover= "#rrggbb" ou "nome" Cor do link quando o cursor estiver sobre ele.br anaschneider@gmail. sendo que a cor padrão é vermelho púrpura (vlink= "#800080").blog. em pixels.jpg"> Observe que mesmo movimentando AS BARRAS de rolagem (tanto a vertical quanto a horizontal) a figura de fundo permanece fixa .

"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".17 Visualização com leftmargin = 100 topmargin= "n". isso é.com . Profª Ana Carolina Jaskulski http://anacarol. Define o tamanho. Onde "yes" Sempre apresentará as barras mesmo que a página não precise. do espaço entre o início do texto e a borda superior da área de visualização do browser. em pixels. <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.br anaschneider@gmail.blog. ele irá apresentar uma página sem as barras.

18 3 Elementos do Cabeçalho <script >.blog.br anaschneider@gmail. Pode-se alterar essa mensagem determinando entre os parâmetros <script> status= ". Alterando o Formato do Cursor Basta acrescentar o parâmetro style= "cursor:tipo_do_cursor". 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. e quando colocar o mouse sobre o link. ao comando hrEF." </script> a mensagem que quer que apareça. o formato do cursor se modificará.. Profª Ana Carolina Jaskulski http://anacarol..</script > status= "mensagem" Exibe uma mensagem que aparece na barra de status (barrinha no canto inferior esquerdo).com ...

19 Usando um Arquivo como Cursor cursor:url(..com .blog..) Profª Ana Carolina Jaskulski http://anacarol.br anaschneider@gmail.

left=event..top=event.ani a escolher.htm" style= "cursor:url (meu_cursor.visibility="visible" trail.style.position="absolute" trail.gif" width="64" Todo o código ficará assim: <html> <head> <script type="text/javascript"> function cursor(){ trail..blog.ani. Por exemplo com o arquivo meu_cursor.top=event.left=event.clienty } </script> </head> Depois colocamos o parâmetro onmousemove= "cursor()" na tag <body>. o cursor default da página (quando não estiver sobre um outro link definido) será o cursor progress.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.clientX+10 trail.. <html> <head> <style type="text/css"> body {cursor:progress} </style> </head> <body> <a href="historia. No exemplo abaixo.style. </head>.. quando você clicar num link ou fechar a página ele voltará ao cursor normal configurado em seu sistema operacional. <img id="trail" height="64"> style="visibility:hidden" src="imagens\minha_imagem.20 especifica um arquivo.com .visibility="visible" trail.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( .style. fazemos assim: Entre <head> e </head> colocamos o código javascript a seguir: <head> <script type="text/javascript"> function cursor(){ trail. Este cursor só irá funcionar nesta homepage. de modos que.style. de modo que essa imagem o acompanhará.style.clientX+10 trail.clienty } </script> Profª Ana Carolina Jaskulski http://anacarol. Para vincular um arquivo de imagem ao cursor.style.style..style.position="absolute" trail. 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..br anaschneider@gmail. )} entre as tags <head> . <a href= "meu_link.

gif" width="64" height="64"> </body> </html> Visualização: Profª Ana Carolina Jaskulski http://anacarol.br anaschneider@gmail.blog.com .21 </head> <body onmousemove="cursor()"> <img id="trail" style="visibility:hidden" src="imagens/minha_imagem.

</a>. informa a URL. Esse é um exemplo de link para outro site de HTML: <html> <body> Profª Ana Carolina Jaskulski http://anacarol.blog. onde quero chegar." >.. que pode ser um documento HTML. não precisa todo o trabalho de digitação. </a> uma âncora é um ponto de referência que marca o destino de um link interno..22 4 Links e Imagens O termo hypertext é definido por "texto que tem link para outros textos". quando se cria um artigo com índice e todo o seu conteúdo está na mesma página. organizando sua estrutura e com isso otimizando sua navegação.html"> isso aponta para o arquivo exemplo_de_link.html </a> </body> </html> Mas como o arquivo exemplo_de_link. por isso. O link absoluto é usado para localizar arquivo que está num servidor (ou diretório ou máquina) diferente.. O link relativo não especifica o caminho completo do endereço do arquivo. utilizaremos o par de tags <a>. Para definir um link. é um link absoluto (tem que possuir o endereço completo). que está no mesmo diretório e na mesma máquina do arquivo que o chamará. uma porta de conexão com outra página.html.. O Link Externo é aquele que cria uma ligação entre homepages diferentes em locais diferentes e. <html> <body> <a href="exemplo_de_link. por isso seu endereço tem que estar completo. Quando numa página necessito colocar um link para uma palavra (ou parágrafo) no final dessa página. possibilitando a interação de um site com outros sites existentes. um link possui dois comandos distintos: (<a href= ".. <a atributos> .html </a> </body> </html> Porém o seu endereço absoluto seria: <html> <body> <a href="C:\ana\exemplo_de_link.br anaschneider@gmail. href= ". comando de partida e <a NAME= "#. As âncoras criam pontos de ligação entre todos os tópicos abordados. está no mesmo diretório do site que está chamando-lhe. Os links podem ser relativos. já o link absoluto sim.Sendo assim o que caracteriza a estrutura HTML é a sua propriedade de se "ligar indefinidamente a outros documentos"." > 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. Links Internos e Externos O Link interno é aquele que liga dois pontos em uma mesma homepage. uma imagem ou outro tipo de recurso. O link é um canal.com .. Portanto.. apenas o nome do arquivo já basta.. Por exemplo aqui está o link relativo que direciona para o arquivo de exemplo_de_link. Por exemplo. absolutos..html"> isso aponta para o arquivo exemplo_de_link. 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. faz-se necessário colocar uma marcação (uma âncora) nesse destino para que o link o encontre." De Hypertext REFerence ou referência de hipertexto.html. cujo "A" vem de "Anchor" ("âncora" em inglês). internos e externos Link (ou hiperlink) é um termo inglês que quer dizer "ligação" e sua função é ligar dois documentos.

br anaschneider@gmail.usp." > e </a>)..icmsc. <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: Profª Ana Carolina Jaskulski http://anacarol..blog.sc.23 <a href="http://www...com ." Este atributo estabelece o ponto de chegada (destino) nos saltos interligados do link.html"> Tutorial HTML ICMC-USP </a> </body> </html> Visualização: name= ". Esse exemplo coloca a frase (o link) que quando clicar o levará para onde coloquei a âncora (entre <a name= ".br/manuals/html/index.

a página será aberta em uma nova janela do browser. "nome" ou "_top" Especifica uma janela ou quadro que receberão a página ou recurso referenciado. target="_top".html </a> </body> </html> Visualização: target="nome" a página será aberta dentro de um frame que possua o tal nome.com . Se target="_blank".html" title="isso aponta para a pagina 2.br anaschneider@gmail. <html> <head> </head> <body> <a href="2. a página será aberta sobre a mesma janela do browser.html" target="_blank"> Link para 2. title="descrição" Apresenta um quadro com a descrição do link quando o mouse é posicionado sobre ele. ignorando qualquer organização de frames.html"> Link para 2.blog.24 target="_blank".html </a> </body> </html> Visualização: Profª Ana Carolina Jaskulski http://anacarol. <html> <body> <a href="2.

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.blog.oracle.oracle.. 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 Cursor Quando você sobrepõe um link com o cursor ele muda a seta para uma mãozinha.com"> 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.com" style="text-decoration:none"> Oracle . se apresenta na cor azul e possui um sublinhado.esse &eacute. geralmente.. Pode-se escolher qual figura de cursor deve aparecer em determinado link.Outro excelente SGBD . para fazer o mesmo com todos os links da página basta inserir estes parâmetros em qualquer lugar da página entre <body. <html> <body> <a href="http://www. que você já conhece: Ele.> 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. <html> <body> Visite um excelente site brasileiro sobre inform&aacute.tica.com . principalmente hardware - Profª Ana Carolina Jaskulski http://anacarol.com" > PostgreSQL .25 style=text-decoration=: " " Este é o link tradicional. esta é a condição default.oracle. 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).br anaschneider@gmail.

... Sua sintaxe é simples: <html> <body> <a href="2.br" style="cursor:wait"> Apostilando. ao mover o mouse sobre sua página entrará numa seção oculta.&nbsp...html" onmouseover="parent. Você pode criar situações interessantes com esse recurso. isso vai da sua imaginação.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 oculto Qual a utilidade de criar um link que ninguém possa ver? Bom...com.&nbsp. onmouseover=" " O link automático consiste naquele que abre espontaneamente quando o mouse passa sobre ele. O internauta.apostilando.&oacute.. <a href="3.html'" style="textdecoration:none"> &nbsp.blog.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>. A sintaxe do link oculto (e automático) é a seguinte: <html> <body> Passe o mouse aqui no final dos pontinhos e v&aacute.html"onmouseover="parent. No segundo link toda a frase está entre as tags <a href> e </a>.. sem que ele entenda o que está acontecendo.br .com. </a> </body> </html> Visualização: Profª Ana Carolina Jaskulski http://anacarol.26 <a href="http://www.com .br" style="cursor:help"> Clube do Hardware </a> <br><br> <a href="http://www. imagine alguns links ocultos e automáticos numa homepage de estórias ilustrada que entram inesperadamente com um fundo musical. por isso que o link só é o nome do site. por isso toda ela está em azul e toda ela é link). para outra p&aacute.location='3.clubedohardware. sem que seja necessário o internauta dar o clique.br anaschneider@gmail.&nbsp.gina..com.

<html> <body> <a href="2. e o internauta pode pensar que o browser dele está com problema (ou algo parecido).. Para aumentar essa área basta aumentar a quantidade de espaços.')" Através da função onclick="alert('.')" podemos inserir uma mensagem no link. porque pode-se perder o controle da situação se tiverem muitos links ocultos.. pois a caixa de mensagem abrirá antes da página destino ser carregada.. Esse recurso é útil para mensagens de aviso em geral.blog. Tem de se tomar cuidado... 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: Podemos acionar o programa de e-mail diretamente de uma página HTML usando uma variação do comando <a>. Essa mensagem aparecerá entre o clique no link e a mudança da tela..br anaschneider@gmail. que usa a opção mailto no lugar da URL.27 Quando abre a página: Depois que passa o mouse: Onde &nbsp. Profª Ana Carolina Jaskulski http://anacarol. e se irritar e abandonar sua página de vez. onclick="alert('.com . (no-break space) cria um espaço em branco que será a área de atuação do link.html" onclick="alert('Tchau..

beltrano@aol.br. O atributo border="0" elimina a borda e deixa um acabamento mais apresentável em figuras com movimento.28 <html> <body> <a href="mailto:anaschneider@gmail.com"> 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.blog.com .gif" </a> </body> border="0"> 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.com.com.0 </a> </body> </html> Visualização: Profª Ana Carolina Jaskulski http://anacarol. Depois.rar"> Clique aqui para download do game Foobillard 3. o jeito mais organizado é o seguinte: Primeiro. <body> <a href="mailto:anaschneider@gmail. crie um diretório (pasta) chamada "download" no servidor onde sua homepage está hospedada (no local onde o seu site está).com. tais como o nome do diretório e o nome do arquivo). basta utilize a tag <a href> (a mesma tag utilizada para criar os links) e direcione os arquivos indicando sua URL (o caminho. Exemplo: <a href="mailto:fulano@ig.com"> <img src="imagens\minha_figura. criei o diretório download e dentro dele coloquei o game Fooblillard3 <html> <body> <a href="download\foobillard3.br anaschneider@gmail. ali serão colocados os arquivos que serão disponibilizados. coloque <img src="minha_figura.gif"> antes de </a> (minha_figura. ciclano@hotmail. Por exemplo.gif é o nome do arquivo de imagem – como esse pombinho).br"> Criando Links Para Download Para colocar uma relação de arquivos para o usuário fazer download.

29

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

Profª Ana Carolina Jaskulski

http://anacarol.blog.br

Inicial
anaschneider@gmail.com

-

30

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>

Profª Ana Carolina Jaskulski

http://anacarol.blog.br

anaschneider@gmail.com

31

5 Imagens
<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&eacute;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>

Profª Ana Carolina Jaskulski

http://anacarol.blog.br

anaschneider@gmail.com

com . Após o término da imagem o texto volta a ocupar a largura normal da página e ficando em baixo da figura. <html> <body> <img src="imagens\raio.. sem atrapalhar a leitura e sem deixar espa&ccedil.. Para isso temos que recorrer a tabela. isso não causa falha de continuidade do texto.br anaschneider@gmail.a do lado ESQUERDO e depois de percorrer toda a figura. um jeito inteligente de usar figuras sem atrapalhar a leitura.jpg" align="left"> O texto fica do lado Direito da figura. Exemplo: <body> <table> <tr> <td width="250" style="text-align:justify"> Texto lado esquerdo..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).o vago.blog.jpg" align="right">O texto come&ccedil. </td> <td width="150"> <img src="imagens\sol3. É o contrário do exemplo anterior. </body> </html> Visualização: align="left": Posiciona a imagem no canto esquerdo jogando todo o texto para a direita. </body> </html> Visualização: align="right": Alinha a imagem à direita forçando o texto a ocupar todo o lado livre a esquerda. termina em baixo dela.gif"> </td> <td width="250" style="text-align:justify"> Texto lado direito. ele termina de baixo dela. </body> </html> Visualização: Não existe um atributo em img que centraliza a imagem envolvendo-a com textos a sua esquerda e direita. como em jornais e revistas.. Esse &eacute. continua percorrendo toda ela e se a frase for muuuuuuiiiiito grande. </td> </tr> </table> </body> Profª Ana Carolina Jaskulski http://anacarol.32 <body> <img src="imagens\fnt14001. <html> <body> <img src="imagens\star.

: <body> <img src="imagens\brass.jpeg" <br> <img src="imagens\brass. Ao colocar o sinal % após algum valor em "width".33 Visualização: width="largura".jpeg" </body> border="0"> border="1"> border="5"> Visualização: Profª Ana Carolina Jaskulski http://anacarol. height="altura" informa a largura e a altura da imagem.gif" width="100%" height="80"> </body> Visualização: <body> <img src="imagens\mundo.com .blog. sendo que: border="0" oculta a borda.br anaschneider@gmail. Com esses parâmetros. em pixels. <body> <img src="imagens\mundo.jpeg" <br> <img src="imagens\brass.gif" width="45%" height="150"> </body> Visualização: border="valor" Permite criar e alterar o tamanho da borda ao redor da imagem. ele calculará esse valor (em porcentagem) em relação à largura da janela. o browser reserva espaço para a figura e mostra logo o texto.

<body> <img src="imagens\2bois.34 vspace="y" hspace="x" Cria um espaço entre a imagem e o texto que a envolve. Parece uma moldura invisível.blog.com .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.br anaschneider@gmail.gif" vspace="20" HSPACE="80" align="left"> Agora com HSPACE=80 ****************************** ****************************** ****************************** ****************************** ****************************** ****************************** ****************************** ************************************ </body> Visualização: (hspace="80") Profª Ana Carolina Jaskulski http://anacarol.

html" onmouseover="window.return true..com ."> <img src="imagens\elefante..br de Imagens anaschneider@gmail.blog. Essa figura é um link para o site 2. 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)." onmouseout="window.. ao passar o cursor sobre um objeto.. exibindo a frase: " Assim se modifica a barra de status". mas quando passa-se o mouse sobre ela.status=''.gif" </body> alt="Bandeira do Brasil"> Visualização: onmouseover.gif" name="imagem2"> </a> </body> altera a barra de Visualização: (com o mouse fora da figura) Com o mouse sobre a figura. ele execute uma função pré-programada.: Criando Reduzidas um Profª Ana Carolina Jaskulski Diretório http://anacarol.35 alt="texto" É um rótulo que aparece quando posiciona-se o mouse sobre a imagem. return true.status="Assim se status".html. <body> <img src="imagens\brasil. <body> <a href="2. onmouseout="imagem" Estes dois atributos fazem com que. ela modifica a barra de status do Windows.

br anaschneider@gmail. criar uma página HTML que contenha a figura em tamanho real. 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". obviamente. Segundo colocar na sua página a figura estipulando os parâmetros width="" height="". faz com o browser exiba uma imagem inicial.blog. e fazer essa figura pequena ser um link para a página que contem a figura em tamanho real (grande). o tempo de transferência dele).jpg" </body> Visualização (figura em tamanho menor): Depois de clicar na figura pequena: Imagem de Baixa Resolução lowsrc="arquivo" Este atributo. de baixa resolução. assim.html) <body> <img src="imagens\janela. Página com figura pequena: <body> <a href="janela. do comando <img>.jpg"> </a> </body> Página com figura em tamanho real (janela. enquanto carrega a imagem definitiva. deixando a figura menor do que ela realmente é. usa-se muito imagens reduzidas com link para sua correspondente em tamanho natural uma forma interessante de se fazer isso é: Primeiro.jpg" width="60" height="41" alt="ir para Janela. auxiliando quem não tem banda larga. Profª Ana Carolina Jaskulski http://anacarol.36 Visando diminuir o tamanho de seu site (e.com .html"> <img src="imagens\janela.

O RainbowText. codebase="URL base" informa o caminho para o arquivo executável citado em code. fontstyle o efeito (no nosso exemplo ela está em negrito "B").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. hspace. fontname especifica o tipo da fonte. alt. Sun. IBM ou Hewlett-Packard. Os applets Java são multiplataforma. Basta copia-lo para o diretório de sua homepage e pronto. os applets Java. code="classe Java" informa o nome do arquivo executável que será carregado ou a sua URL completa.blog. É utilizado dentro de: <APPLET> name="nome" Profª Ana Carolina Jaskulski http://anacarol. eles funcionam em PC. Esse tipo de independência de plataforma tem sido a razão de seu maior sucesso.com ..class para o diretório onde está o arquivo HTML que irá exibir o efeito. text value especifica o texto que irá exibir o efeito. </applet> Esta tag inclui um programa executável em Java na página. O comando de busca irá apresentar uma relação de todos os applets que você foi adquirindo pelas suas jornadas na Web.class estará entre eles. em seguida. serem executados no computador do usuário. depois insira no arquivo HTML os seguintes parâmetros: <applet code="meu_arquivo. Macintosh. vspace.. É obrigatório se não foi fornecida a URL completa em code. name="nome" Fornece um rótulo para o applet (opcional) align.br anaschneider@gmail. Os applets são transferidos a partir de um servidor Web para. height. como são chamados. bgcolor a cor de fundo. fontsize o tamanho da fonte e finalmente sleeptime que determina o tempo de duração do efeito apresentado. width idênticos aos atributos de mesmo nome de <img> Basta copiar o arquivo . <param atributos> Fornece parâmetros para um applet. São programas de computador acionados pelos documentos em HTML.class <encher>. Quando abre uma homepage que possui os aplicativos applets Java o arquivo é copiado automaticamente para o seu diretório de arquivos temporários. na barra de ferramentas do Windows e depois em [Localizar].37 6 Elementos Especiais <applet> . Para localizá-lo basta clicar em [iniciar]. Digite *. isto é. Seus parâmetros de configuração são o seguinte: width=310 height=42 é o tamanho da janela onde o texto está contido.

br anaschneider@gmail.com .. Pode ser através de um valor de 1. 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: Profª Ana Carolina Jaskulski http://anacarol. formatação de caracteres e ser utilizado dentro de blocos. o maior (o padrão é 3. até 7.. tipologia e cor do texto marcado. value="valor" informa o valor do parâmetro (definido pelo autor da página). <font atributos> . No exemplo abaixo cada letra está com um tamanho diferente. Pode conter texto. size="valor" ou "incremento" Altera o tamanho do texto. caso não seja especificado o tamanho) ou através de incrementos de -3 a +3. listas. formulários. tabelas. </font> Altera tamanho..38 informa o nome do parâmetro (definido no applet). depois crescente. o menor. partindo do tamanho 7 em ordem decrescente..blog.

A.blog. B. Pode ser através do valor RGB (Red/Green/Blue) ou através de um dos 16 nomes padrão VGA do Windows.br anaschneider@gmail.39 color="#rrggbb" ou "nome" Altera a cor do texto. 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" 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 color="red"> color="008000"> color="0000ff"> color="ab0125"> color="red"> color="008000"> color="0000ff"> color="ab0125"> color="red"> color="008000"> color="0000ff"> Profª Ana Carolina Jaskulski http://anacarol. F). D. Os valores RGB estão na base hexadecimal (0 a 9.com . C. E.

blog.40 </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.br anaschneider@gmail. não será alterada.com . <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> color="red" face="Monotype Corsiva"> color="008000" face="MS Sans Serif"> color="0000ff" face="Courier New"> color="ab0125" face="TimesRoman"> color="red" face="Arial Narrow"> color="008000" face="impact"> color="0000ff" face="Georgia"> color="ab0125" face="Verdana"> color="red" face="Arial Black"> color="008000" face="Century Gothic"> color="0000ff" face="Garamond"> color="ab0125" face="Tunga"> color="red" face="Wingdings"> color="008000" face="Sylfaens"> Profª Ana Carolina Jaskulski http://anacarol. Se a fonte não estiver disponível.

quebra a linha e desce até encontrar uma margem esquerda limpa.. tendo que ficar rolando a página de um lado para o outro para conseguir ler. blocos. <nobr> . </nobr> Esse comando evita que o texto seja quebrado em mais de uma linha. ele não quebra de jeito nenhum. <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..Quebra de linha. desce até encontrar ambas as margens livres de figuras. chato. Força o texto que o segue a iniciar na próxima linha.blog. clear=right faz o mesmo em relação à margem direita e clear=all. Esta tag é usada em conjunto com <nobr>. n&atildeo? </nobr> </body> Visualização: <wbr> Word Break .41 Visualização: <br atributos> Break Line .br anaschneider@gmail. </body> Visualização: clear="left". o texto envolvido por <nobr>. <body> <nobr> Esse é um texto longo mas como tem essa tag antes. <body> <nobr> Profª Ana Carolina Jaskulski http://anacarol. ou seja. itens de listas.. indica ao browser onde o texto pode ser quebrado. "right". elementos de formatação de caracteres. Com a opção clear=left. células de tabelas. É utilizado dentro de: cabeçalhos..com ..</nobr> irá ter somente uma linha não importando a quantidade de palavras que ele contenha. "all" Sem a opção clear simplesmente introduz uma quebra de linha..

possui a dimensão de 81 x 66 pixels. uma imagem é formada por pixels (pontos). antecedendo o comando map name=". usemap="#nome_do_mapa" indica que a figura é uma imagem mapeada (imagemap) controlada pelo cliente (o mapa é estabelecido pelo elemento <map>. #nome_do_mapa informa o rótulo do mapa <map> usado pela imagem.40. ali é apresentado várias informações sobre a imagem. por exemplo).com . Tais imagens podem ser mapeadas de forma que uma determinada área sua possa ser vinculada a uma âncora de acesso para outros links.blog. Mapear uma imagem consiste em informar ao browser que determinada área da imagem irá acessar outro link. ele não quebra de jeito nenhum. name="nome_do_mapa" Rotula o mapa com um nome que pode ser referenciado por uma imagem através do atributo usemap... otimizando o tempo de abertura das homepages que utilizam imagens. Profª Ana Carolina Jaskulski http://anacarol. especificando o nome da imagem.... Mapear uma imagem consiste em determinar as coordenadas da imagem que pertencem a uma área de link com pontos de ativação.gif" usemap="#meu_mapa" border="1"> <map name="meu_mapa"> <area shape=rect coords="0.".. n&atildeo? </nobr> </body> Visualização: <map atributos> . abaixo. tendo que ficar rolando a <Wbr> página de um lado para o outro para conseguir ler.html"> </map> </center> </body> Observe o comando img src=".. Portanto suas coordenadas partem do canto superior esquerdo (0 x 0) e vão até o canto inferior direito (81 x 66). na mesma página HTML). fotos ou figuras em gerais. 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. entre elas sua dimensão.. <body> <center> <img src="imagens\lemon.br anaschneider@gmail.". no servidor)..0. chato. Eles foram adotados devido seu tamanho comprimido.". especificando o nome do mapa. A imagem dos limões. 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. </map > O formato de imagem mais usado na internet é o gif e o jpg.. com o parâmetro usemap="#.33" href="outra_pagina.html). por exemplo podese te ruma imagem onde cada parte dessa mesma imagem acessa um link diferente. Seu tamanho é dimensionado pelos eixos X (largura) e Y (altura).42 Esse é um texto longo mas como tem essa tag antes. ismap indica que a figura é uma imagem mapeada (imagemap) controlada pelo servidor (o mapa é estabelecido por arquivo separado. Existem duas maneiras de se fazer isso.

por exemplo temos uma foto de uma pessoa e queremos que quando clicamos na cabeça aponte para uma página. como o Map This v1. As coordenadas variam conforme o tipo da área a ser mapeada. Para isso temos diversos softwares shareware ou freeware que faz todo o trabalho matemático. y1. É utilizado somente dentro de: <MAP> Determinar as coordenadas de uma área quadrada ou retangular até que é fácil. nohref Permite que a área selecionada não acione nenhum link. . r" centro e raio de um círculo. Editores de Áreas Mapeadas Profª Ana Carolina Jaskulski http://anacarol.com . A área retangular possui duas coordenadas. A área do tipo circular possui duas coordenadas. coords="x. também. nos pés para outra e nas mãos para outra. coords="coordenadas" Depende da forma: coords="x1. uma para definir o centro do círculo e outra para definir o raio. conforme o tipo da poligonal. o problema começa a complicar quanto tentamos definir as áreas circulares ou. coords="x1. polígono ou retângulo. y3.. y2. respectivamente. shape="circ". href="URL" informa a URL que deve ser carregada ao se selecionar a área. x2." definem os vértices em um polígono.blog. as poligonais de uma imagem qualquer. uma para o vértice superior esquerdo e outra para o vértice inferior direito.43 <area atributos> Define coordenadas para imagens mapeadas. y1.br anaschneider@gmail. x2. pior. "poly" ou "rect" Círculo. y2" vértices opostos em um retângulo. x3. y. A área poligonal possui uma coordenada para cada vértice.31 (870Kbytes)..

Tudo o que for escrito entre o <!-.</comment>. mas em HTML também devemos adotá-lo! <html> <head> <!-. Ele pode ser usado em qualquer lugar do documento..com ..... --> São anotações que só podem/devem ser vistas por quem for bisbilhotar o código fonte.br anaschneider@gmail.44 7 Bloqueando a Cópia da Página Esses dois atributos são colocados dentro de <body>. Outro comando com função similar é o <comment> . onselectstart="return false" O usuário não consegue selecionar o texto .comentários . 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..digo fonte!!! </body> <!-. 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 desta vez utilizei uma tag em vez dos símbolos!! </comment> Voc&ecirc.A seguir está o título da Página --> <title> Página com alguns comentários </title> </head> <body> <!-. est&aacute.m nele. porém este comentário -obviamente.blog.e o --> será ignorado pelo browser e não será mostrado na tela. esse .Aqui é o conteúdo da página que será exibido ao usuário. vendo PARTE do código HTML deste site.não será exibido --> <comment> isso também é um comentário. verifique o c&oacute. Para saber TUDO que cont&eacute..Aqui terminou a parte visível do documento --> </html> Visualização: Profª Ana Carolina Jaskulski http://anacarol. por exemplo). menu não abrirá.botão esquerdo do mouse pressionado e arrastado sobre o texto. <!-. por ser um comentário.

. usa-se esse tag (geralmente fonte de largura fixa). destaque.. <a>. elementos de formatação de caracteres.blog.. </samp> Amostra (geralmente fonte de largura fixa) <kbd> .. </var> variável (geralmente itálico) <samp> . <td> Elementos Lógicos <strong> .. Podem ser lógicos (sugerem uma utilização para o texto destacado: grifo..45 8 Formatação de textos e caracteres São elementos usados para destacar trechos de texto. e não se quer que o browser interprete tais códigos. variável. Profª Ana Carolina Jaskulski http://anacarol. <a>. <pre>. </em> Grifo (geralmente itálico)... </code> Quando se deseja mostrar códigos de programas em geral. <em> ... </dfn> indica definição de uma palavra (geralmente em itálico) <code> .br anaschneider@gmail... <img>. <dd>. trecho de código. etc) A ação dos físicos restringe-se à capacidade de visualização do browser (alguns podem não interpretar). <br> e são permitidos dentro de: cabeçalhos.. </cite> Citação (geralmente itálico) <var> . etc. Tanto lógicos quanto físicos podem conter: texto. <cite> .) ou físicos ( somente dão uma formatação específica para o trecho: negrito.. <dt>. itálico. </kbd> Teclado (geralmente fonte de largura fixa) <dfn> . <p>.com ... </strong> Destaque (geralmente negrito). <li>. elementos de formatação de caracteres.

e o eu escrevi .... 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 &eacute.mesmo sem eu Visualização: Profª Ana Carolina Jaskulski http://anacarol.br anaschneider@gmail.com . um texto com pre dei um monte de espacos e troquei de linha browser me mostrou tal qual ter colocado br </pre> </body> e aqui eu e troquei de novo. <pre> Permite que o texto apareça tal qual a gente o escreve (inclusive com as quebras de linha sem colocar o br ...blog.46 <pre> .

. </strike> Texto riscado <del> . </del> Texto riscado <s> ....br anaschneider@gmail....... </small> Texto menor <big> . </s> Texto riscado <sub> . </sup> Texto Sobrescrito (como exponenciais matemáticos) <small> . </big> Texto maior – o contrário de small Profª Ana Carolina Jaskulski http://anacarol.. </i> itálico <tt> ..com . </tt> Teletipo <u> .. </u> sublinhado <strike> .. </b> Negrito <i> ........ </sub> Texto subscrito (como os números de fórmulas químicas) <sup> .blog.47 Elementos Físicos <b> ..

</blink> Texto Pulsante <body> Texto normal <br> <B> Texto como </b> <br> <i> Texto como </i> <br> <tt> Texto como </tt> <br> <u> Texto como </u> <br> <strike> Texto como </strike> <br> <del> Texto como </del> <br> <s> Texto como </s> <br> Texto normal e <sub> texto como </sub> <br> Texto normal e <sup> texto como </sup> <br> <small> Texto como </small> <br> <big> Texto como </big> <br> <blink> Texto como </blink> </body> B i Ti u strike del S sub sup small big blink Visualização: Profª Ana Carolina Jaskulski http://anacarol.br anaschneider@gmail..48 <blink> .blog..com .

behavior =scroll. A sintaxe é a seguinte: <marquee atributo="efeito"> objeto </marquee> align="top".49 Pode-se usar vários comandos se formatação ao mesmo tempo.) Você também pode usar vários comandos de formatação ao mesmo tempo sobrepondo-os. então ele pára. mas sempre a primeira tag a ser aberta é a última a ser fechada . respectivamente. slide inicia o texto de um lado e segue até a primeira letra tocar o lado oposto (bate e estaciona. então ele retorna (o bate-e-volta) Profª Ana Carolina Jaskulski http://anacarol.br anaschneider@gmail.blog. e alternative onde o texto aparece de um lado e segue até tocar o lado oposto. "bottom" Alinha o texto pelo topo. meio e inferior. alternate Scroll inicia o texto aparecendo de um lado e segue até desaparecer a última letra do outro. isto é: A primeira tag a ser aberta. </u> </i> </b> <br> <tt> <strike> Este texto está com teletipo riscado. itálico e sublinhado. sempre seguindo a lógica LIFO. slide.com . para cima ou para baixo como também define sua velocidade. não volta). "middle". </strike> </tt> </body> Visualização: Objetos em movimento: marquee Propriedade que possibilita o efeito de rolamento de um objeto (texto. é a última a ser fechada <body> <b> <i> <u> Este texto está com bold. quadro ou imagem) para a esquerda ou direita.

ou seja. esquerda (default). -1 a infinite Especifica quantas vezes será executado a rolagem do texto. Se for um número ele especifica a quantidade de pixels se for % ele especifica a largura da janela do marquee em porcentagem. down Especifica a direção do texto. direction=left. %: Especifica a largura do painel. 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. vspace="número" Determina em pixels a margem superior e inferior do marquee.blog. se o valor for -1 ou infinite. quanto maior for o valor. respectivamente. width="número". scrolldelay="número" Especifica em milissegundos o tempo de deslocamento do texto.com . right. para cima e para baixo. o texto rolará infinitamente.50 bgcolor="cor" Especifica a cor de fundo. % especifica a altura em relação a janela em porcentagem. maior será a velocidade de deslocamento. </b> </font> </marquee> <hr width="80%"> </center> </body> Visualização: Profª Ana Carolina Jaskulski http://anacarol. loop="número".br anaschneider@gmail. up. direita. scrollamount="número" Especifica a quantidade de pixels que será usada para deslocar o marquee. Pode ser pelo nome da cor ou através de seu código RGB. hspace="número" Especifica a largura em pixels das margens esquerda / direita. % O número especifica a altura do painel. height="número".

. <body> <marquee behavior="scroll" direction="up" scrollamount="11"> <img src="imagens\3sun5a. da esquerda pra direita (left.blog. <body> <marquee behavior="alternate" direction="left" bgcolor="dda0dd"> <font size="5"> <b> Profª Ana Carolina Jaskulski http://anacarol..com . default) e cor de fundo (bgcolor="dda0dd").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).51 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.br anaschneider@gmail.

com . 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".timo para tontear algu&eacute.blog.P <body> Profª Ana Carolina Jaskulski http://anacarol.br anaschneider@gmail.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). (Cuidado com a velocidade!!! Seu usuário pode não conseguir ler um "texto a jato" .52 <i> isso &eacute. &oacute.

53
<marquee behavior="scroll" direction="right" scrollamount="30">
<font color="green">
<b>
Vc disse que sabe ler r&aacute;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>

Profª Ana Carolina Jaskulski

http://anacarol.blog.br

anaschneider@gmail.com

54
<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 &eacute; 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"
<img src="imagens\cat_toilet.gif">
</marquee>

scrolldelay="140"

scrollamount="20">

Visualização:
início:

Profª Ana Carolina Jaskulski

http://anacarol.blog.br

anaschneider@gmail.com

55

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&atilde;o est&aacute; mais no frame, est&aacute; no seu site
mesmo!!
</center>
</body>

Visualização:

Profª Ana Carolina Jaskulski

http://anacarol.blog.br

anaschneider@gmail.com

br anaschneider@gmail.blog.com .56 Profª Ana Carolina Jaskulski http://anacarol.

br anaschneider@gmail. saltos de linha... fica s&oacute. <center>.sem eu ter especificado </h6> </body> Visualização: style="propriedades" Profª Ana Carolina Jaskulski http://anacarol. H6> apresentam apenas 6 tamanhos de cabeçalho sendo o <H1> o maior tamanho.. H2. como um bloco de texto ' quadradinho'.. <H1. ele pula a linha automaticamente). etc. <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.com . Os comandos de cabeçalho incluem uma linha antes e outra depois (não necessita colocar um <br> depois que termina a frase. à direita ou pelas duas margens. ou seja. . à esquerda (padrão).. viu? </h4> <h5 align="center"> h5 com align=center </h5> <h6> h6 com align default . . "right" ou "justify" Alinha o cabeçalho no centro.blog.. H2. alinhadinho &agrave.. esquerda. respectivamente. As tags <H1.ah! isso se o parágrafo for muito grande. fica parelha a margem esquerda e a margem direita. <blockquote>.. cabeçalhos. é utilizado dentro de: <body>. <br>.57 9 Formatações Vamos aplicar formatações a títulos. H2. H6 atributos> </H1. "left". Podem conter: texto. H3. sem aquelas ' idas e vindas' como fica o caderno da gente. textos espaçados. endentação. centralização de objetos.. H6> São disponíveis seis níveis de cabeçalhos formando uma hierarquia descendente em tamanho. parágrafos. todos os elementos de formatação de caracteres. <form>. H5. <a>. <img>.. formatação de diversos tipos de linhas. H4. se for somente uma linha. <div> align="center".

uma id&eacute. estar&aacute.alinhamento pela direita ou "justify" (justificado) . <div> align "center". É opcional usar </p>. convencer os outros de que sua id&eacute. tamanho. preciso olhar as coisas de uma nova forma. O modo justificado permite dar ao parágrafo uma aparência mais profissional e organizada.58 atributo de <H. font-size: 2cm"> Computador </h3> </body> Visualização: <p atributos> . a fonte Sans-serif).ia n&atilde.. sublinhado.ia. estilo) de acordo com uma lista de propriedades de estilo.ia &eacute. entender as pessoas. é utilizado dentro de: <body>.Altera a apresentação do cabeçalho (cor. in. boa..alinhamento pela esquerda. a fonte Sans-serif em itálico com tamanho 11pt <body> Profª Ana Carolina Jaskulski http://anacarol. <dd>. </p> P (Paragraph) – Parágrafo é usado para separar blocos de texto (geralmente com o espaço de uma linha entre eles). uma pe&ccedil. </p> </body> Visualização: style="propriedades" formata o parágrafo (cor. Sans-serif. Voc&ecirc.br anaschneider@gmail.&atilde.. fonte Verdana ou. font-family: Helvetica.o se transforma em inova&ccedil. vida das pessoas. <body> <p align="justify"> Para inovar &eacute. <blockquote>. pode simplesmente incorporar a ajuda deles e. na ausência desta. já que os textos ficam alinhados de maneira uniforme entre as margens esquerda e direita.. formatar a palavra "Computador" em azul marinho. fazendo isso. fonte. fonte Helvetica (ou.alinha o texto pelas duas margens.blog. <center>. portanto. Muita gente teme mudan&ccedil..o at&eacute. <form>. cm também ). ajudando-os a descobrir a utilidade de sua id&eacute. com 2 cm de tamanho (pode-se usar pt. <body> <h3 style="color: navy.>. estilo) de acordo com uma lista de propriedades de estilo. fonte. ter vontade de assumir riscos e trabalhar pesado. <li>. Por exemplo. tamanho. que tenha sido largamente adotada e incorporada &agrave.a-chave do processo &eacute."right" . alinhamento pelo centro.. Parágrafo na cor verde 006400. "left" . sublinhado. na ausência dessa. (default).com .as.

sans-serif. anaschneider@gmail. sans-serif.stria) e um objetivo.blog. um desejo grande de fazer algo &uacute. e então todos os parágrafos terão essa formatação. font-style: italic.. http://anacarol. font-family: verdana. <head> <style type="text/css"> P { color: #006400.s coisas: um certo grau de conhecimento na &aacute. precisa de tr&ecirc. fontsize: 11pt"> Se voc&ecirc. } </style> </head> Profª Ana Carolina Jaskulski font-family: verdana. então tem que colocar a sintaxe abaixo entre as tags <head>. font-size: 11pt.com . quer inovar. Mas se o desejo for tornar essa configuração como formato padrão na homepage.br font-style: italic. os demais manterão a configuração padrão (conforme pode ver).59 <p style="color:006400.rea.</head> da página HTML.til (seja para a sociedade ou para a ind&uacute.. </p> </body> Visualização: No exemplo acima se está formatando apenas um parágrafo.

<pre>. <blockquote>. <form>.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: Profª Ana Carolina Jaskulski http://anacarol. <hr size="20"> </body> uma linha size=2 uma linha size=4 uma linha size=9 uma linha size=20 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 %). usada como divisor de texto. é utilizado dentro de: <body>. <hr size="9"> Aqui em baixo est&aacute. <body> Linha com 20% da largura da p&aacute. <hr size="2"> Aqui em baixo est&aacute. <hr size="4"> Aqui em baixo est&aacute. <body> Aqui em baixo est&aacute.blog.gina <hr width="20%"> Linha com 50% da largura da p&aacute..br anaschneider@gmail. <center>.com .gina <hr width="50%"> Linha com 80% da largura da p&aacute.60 10 Linhas Horizontais <hr atributos> Horizontal Rule . O default é aparecer centralizada a linha caso ela seja menor que 100% da largura da página.Régua horizontal. <div> size="número" Espessura da linha em pixels.

<body> Linhas sem sombreamento. 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.gina alinhada &agrave. a linha pode ser alinhada pela margem esquerda. <body> Linha com 50% da largura da p&aacute. direita <hr width="50%" align="right"> e esta com 75% da largura e alinhada &agrave.com . esquerda <hr width="50%" align="left"> </body> Visualização: noshade Especifica uma linha horizontal sólida. O default é centralizado.61 align="left". "center" ou "right" Se for menor que a largura da página. respectivamente.blog. pelo centro ou pela margem direita. e com size = 3. sem sombreamento (o default é a sombreada).br anaschneider@gmail.

respectivamente <hr noshade size="3" color="red"> <hr noshade size="5" color="#00ff00"> <hr noshade size="8" color="#00ccff"> </body> Visualização: Profª Ana Carolina Jaskulski http://anacarol.br anaschneider@gmail.com . <body> Linhas com cores iguais a red.62 Determina uma cor para a linha. #00ff00 e #00ccff . O default é o cinza.blog.

cellpacing e height. então. uma tabela com UMA linha e UMA célula . cellpadding.com . Cria-se. mas em uma tabela. As linhas não têm limite de tamanho. um problema com esse recurso é que ele não funciona para linhas verticais maiores que size="100".blog.br anaschneider@gmail. <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).63 11 Linhas Verticais Não existe uma tag que cria uma linha vertical (assim como <hr> para a horizontal). Os atributos são: border. o que existe são alguns macetes que substitui esse comando. a linha terá no máximo um tamanho igual ao terceiro exemplo. 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.sem textos!!!!! Então teremos uma linha do tamanho que necessitarmos. ou seja. <table border cellpadding="1" cellpacing="0" height="200"> <tr> <td> </td> </tr> </table> Visualização: Profª Ana Carolina Jaskulski http://anacarol.

com . <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> Profª Ana Carolina Jaskulski http://anacarol.64 <table border cellpadding="1" cellpacing="0" height="400"> <tr> <td> </td> </tr> </table> Visualização: Agora vou acrescentar cor e espessura.blog.br anaschneider@gmail.

uma c&eacute. outra c&eacute. um texto com uma linha do lado.com . mas com a linha um pouco mais grossa (lembre-se que o que diferencia é a largura das células.lula da tabela e esse texto est&aacute. A diferença &eacute. mas &agrave. aquela linha &eacute.lula. direita (essa linha &eacute. a espessura delas. <table cellpadding="0"> <tr> <td width="250"> Outro exemplo de texto com uma linha grossa &agrave. isso é. 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. deve-se aumentar a largura da célula que não recebe texto).. mas podemos utilizar a tag <table> (tabela) para criar linhas vinculadas a objetos.... 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 &eacute. e isso é o mais prático quando se quer uma linha vertical (faz uma tabela. certo? </td> </tr> </table> Visualização: Outro exemplo.br anaschneider@gmail. direita e mais fina que a c&eacute. desvinculada com qualquer objeto. basta alterar a posição da "célula-linha" para antes ou depois da célula que tem o texto.. em outra c&eacute. Para alterar cor e espessura das linhas basta configurar os atributos width e bgcolor da célula. </td> <td width="7" bgcolor="008000"> </td> </tr> </table> Visualização: Profª Ana Carolina Jaskulski http://anacarol. Nos exemplos a seguir o texto irá determinar o comprimento da linha.lula desse texto aqui).lula da tabela. se quiser a linha mais grossa.65 </td> </tr> </table> </body> Visualização: Os exemplos acima criam linhas verticais livres.blog.

Para inserir um arquivo de imagem usamos o comando <img src="arquivo. um texto com linhas dos dois lados.lulas da tabela (uma antes e outra depois desta c&eacute.gif"> </center> <center> <img src="imagens\mabelT.. lendo!!!) </td> <td width="3" bgcolor="purple"> </td> </tr> </table> Visualização: Outros Separadores de Texto O comando de inserção de imagens também pode ser usado como separador de texto.com . 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&aacute..66 Aqui está um exemplo de uma tabela com três células.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.. etc.blog. est&eacute.br anaschneider@gmail.gif"> </center> </body> Visualização: Outros exemplos de linhas: Profª Ana Carolina Jaskulski http://anacarol.. Elas s&atilde.lula AQUI que tem este texto que voc&ecirc.gif"> </center> <center> <img src="imagens\vizinhanca.o duas c&eacute.. Existem muitos arquivos gif ou jpeg criados exclusivamente para isso.

67 Profª Ana Carolina Jaskulski http://anacarol.com .br anaschneider@gmail.blog.

ou seja. </pre> pre (Preformatted Text). Note que as fontes ocupam tamanho fixo. <blockquote>. <dd>.</pre>. como Courier. <form>..blog.. o browser só reconhecerá um. Pode conter: texto. Para resolver isso é usando os tags <pre>. de nada adiantará.. O texto que estiver dentro deste elemento preservará a formatação original (o browser interpretará os espaços.68 12 Texto PréFormatado <pre atributos> . <hr> e pode ser utilizado dentro de: <body>." Opcional.. <a>. <br>. digitar em um código HTML vários espaços em branco entre duas palavras. mas o tamanho das letras depende do browser: <pre> atrav&eacute.com .o vai quebrar a linha sozinho!!!! </pre> Visualização: Espaçamento Forçado Profª Ana Carolina Jaskulski http://anacarol. cada letra vai ocupar sempre o mesmo espaço que a outra. elementos de formatação de caracteres. Cuidado!!! Se fizer linha muito longa o usu&aacute. O texto pré-formatado é exibido em uma fonte de espaçamento fixo. retornos e tabulações). informa a largura em colunas.rio vai ter de usar a barra de rolagem horizontal do navegador porque ele n&atilde.. <li> width=".s do comando pre em qualquer mostrado pode-se lugar da tela bem igual colocar texto que ele ao codigo fonte.. sera inclusive com um moooooooonte de espacos e novas-linhas como esse exemplo aqui.br anaschneider@gmail.

&nbsp.br anaschneider@gmail.. o browser irá considerar apenas um espaço. </q>: <blockquote> .. sua comercializa&ccedil. separadores.&nbsp. <blockquote>. </blockquote> Destacar um bloco de texto aumentando a espessura de suas margens.&nbsp. <li>.23 </body> Visualização: usando <p>&nbsp.&nbsp. isso é muito chato quando descobrimos que o texto teima em não ficar no lugar indicado de uma coluna. se terá três espaços seguidos.. <body> O n&uacute.&atilde.&nbsp.o totalizou 960 milh&otilde.00 <br> &nbsp. cite=URL Especifica a fonte da citação. Pode conter: listas. </p> </body> Visualização: <q atributo> .21.mero de computadores de m&eacute.dio porte utilizados nas empresas com Linux em todo mundo vem crescendo rapidamente.com . <dd>.00 <br> &nbsp&nbsp.&nbsp.. tabelas e estar dentro de <body>.1% superior &agrave..: <q cite=url> texto. uma forma de impor espaçamentos forçados é o conjunto de caracteres &nbsp. </q> É usado para citações curtas. aumentando o espaçamento vertical entre cada parágrafo. <pre> Observe o deslocamento das margens dir/esq..903. Se parece com o blockquote. cabeçalhos. formulários.69 Non-Breaking Space. do segundo parágrafo que foi ajustado com o parâmetro: Profª Ana Carolina Jaskulski http://anacarol. esse é um jeito de ‘pular a linha’ sem usar <br>. No &uacute.es de d&oacute.ltimo trimestre de 2003.Ainda que o Webmaster adicione dez espaços com a tecla [space] várias vezes em seu código fonte.blog.0.00 <br> &nbsp&nbsp&nbsp. <p> &nbsp.s vendas no ano anterior. <body> 1000. <form>.. (non-breaking space). Repita 3 vezes &nbsp.lares: 63. blocos..

style="propriedades" Altera a apresentação do conteúdo do bloco (cor. </blockquote> Ou seja. font-family: Comic Sans MS. utilizado para endereços e para assinar o documento. uma interface entre sua p&aacute.. retornar algo para a p&aacute.Maxwell Educacional <br> Porto Alegre . </div> divide a página em blocos que podem ser alterados de acordo com características comuns.blog. </address> Bloco de texto destacado.. fonte. informa&ccedil.Guia Oficial: <blockquote> O Javascipt enviar&aacute.gina para a applet Java.br anaschneider@gmail.RS . e a applet Java poder&aacute.es da p&aacute. <body> Veja um exemplo de address: <address> CTT .gina e os Applets Java.font-size: 12pt. sublinhado..line-height: 14pt"> Profª Ana Carolina Jaskulski http://anacarol. estilo.&otilde.gina. align="center".Brasil </address> </body> Visualização: <div atributos> . <body> <div style="color: 005500. "left" ou "right" Alinha todo o bloco de acordo com a posição. o JavaScript &eacute.com .. tamanho. </body> Visualização – observe o segundo parágrafo: <address> .70 <body> Sobre JavaScript e Applets Java em sites: <br> Segundo John e Peter Kent em JavaScript para Netscape . espaçamento) de acordo com uma lista de propriedades de estilo.

) title Este atributo apresenta a forma desabreviada do acrônimo.o tenha Comic Sans) e espa&ccedil. tabela ou imagem no centro da página.m podem ser centralizadas: <br> <br> <center> <img src="imagens\div82..br anaschneider@gmail. </acronym> Esta tag indica que o conteúdo envolvido por ela é um acrônimo (abreviação formada pelas letras iniciais de uma frase.gif"> </center> </body> Visualização: <acronym atributos> . <blockquote> e <pre>. </body> Visualização: Profª Ana Carolina Jaskulski http://anacarol. <body> Para programar em Java necessita do <acronym title = "Java Developer's Kit"> JDK </acronym> instalado. fonte Comic Sans MS 12pt (ou qualquer outra fonte sem serifa caso n&atilde.71 formata esse texto em verde...blog.com . tornando desnecessária a utilização de textos explicativos sobre a abreviação (geralmente apresentada entre parênteses). <form>.. </center> Alinha um bloco de texto.amentos entre linhas de 14pt. </div> </body> Visualização: <center> . <body> Figuras tamb&eacute. Pode conter blocos e ser utilizado dentro de <body>. cabeçalho.

<body>. Elas funcionam como um sumário.com .br anaschneider@gmail. <form>. Estrutura de uma lista típica: <ul type="disc"> <li>Lista N&Atilde. <center> type="tipo" Profª Ana Carolina Jaskulski http://anacarol. <td>. eu terei uma identação no meio da lista. Cada <uL> funciona como um toque na tecla tab . Existem dois tipos de listas: não ordenadas (que contém uma série de itens sem numeração).. <dd>.Consiste no comando para a lista ordenada de itens com números.blog. Não necessita </li>. um menu ou um resumo do conteúdo do documento. Não Ordenada <ul atributos> . <blockquote>. <form>. </ol> ol (Ordered List) . </ul> uL (unordered List) é o comando usado para gerar lista não ordenada. Pode conter: <li> e é utilizado dentro de: <li>.72 13 Listas Uma forma de estruturar um documento HTML é a utilização de listas. e as ordenadas (que atribuem um número ou letra para cada elemento da lista). <dd>. Cada <li> é um tópico da lista. <body>. letras maiúscula ou minúscula e algarismos romanos.. Define os níveis (para identação). circle ou square. <blockquote>. <td>..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> . Ele deve envolver o primeiro e o último item da lista.. sendo que se coloco um <ul> dentro de outro <ul>. <center> type= “tipo" tipo: disc. mas pode ser usado! Pode conter <li> e poder ser utilizado dentro de: <li>.

O descritor de fechamento ( a tag </li> ) é opcional (em geral não é utilizado). bolinha) antes de cada tópico. quadrado. texto. <body>. <form>. <dd> e ser utilizado dentro de: <li>. NÃO possui numeração e nem caracteres de marcação (circulo.br anaschneider@gmail. 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> . <center> compact opcional. Por exemplo: start=8 iniciaria a contagem a partir de 8.. blocos. type=i (romanos minúsculos) ou type=1 (numeração -default). <br> e é utilizado dentro de <uL> e <ol> <dl atributos> . viii. <img>...73 "tipo-de-numeração" descreve o formato de numeração empregado na lista. <blockquote>.blog. <a>.com . dependendo do valor do atributo type. type=i (romanos maiúsculos). type=a (alfabeto minúsculas). start="valor" "valor" é o número no qual se inicia a contagem de numeração. <dl>). H ou h. Viii. 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>. Pode conter: outro nível de listas (<uL>. <td>. </dl> Listas de definições. elementos de formatação de caracteres. </li> Li (List item). Pode ser de letras: type=A (alfabeto maiúsculas). item de lista. Especifica uma formatação compacta (que utiliza menos espaço vertical) Profª Ana Carolina Jaskulski http://anacarol. <ol>.

mais um <blockquote> deve ser aberto <blockquote> <img src="imagens\cafe. a identação (como a tecla tab do teclado) será feita a cada <blockquote>.gif" > Parágrafo <br> <blockquote> <img src="imagens\pipoca2.br anaschneider@gmail. </dt> Marca o termo a ser definido.. Nesse caso. elementos de formatação de caracteres. também. blocos.. <img>.gif" > Capítulo i <br> <blockquote> <img src="imagens\pipoca. <br> e é utilizado dentro de: <dl> <dl> <dt> varanda <dd> um cômodo de uma casa.blog. <a>. <dt> Garagem aberta <dd> Local aberto. O descritor de fechamento é opcional e em geral não é utilizado. onde se estaciona. pode criar efeitos de marcação elaborados.gif"> Texto <br> Profª Ana Carolina Jaskulski http://anacarol.. texto. <ol>. O descritor de fechamento é opcional e em geral não é utilizado.. <dl> <dt> Garagem coberta <dd> Local coberto. Pode conter: texto. </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 conter: listas . <a>.com . <br> e é utilizado dentro de: <dl> <dd atributos> . onde se estaciona. <dl>. <uL>. <img>. Para cada nível mais à direita.74 <dt atributos> . </dd> Marca a definição do termo. <dt> Garagem <dd> um local onde se estaciona. elementos de formatação de caracteres.

gif" > Texto <br> </blockquote> </blockquote> </blockquote> Visualização: Observe que a cada novo <blockquote> é criado um novo nível Profª Ana Carolina Jaskulski http://anacarol.blog.br anaschneider@gmail.gif" > Capítulo iii <br> <blockquote> <img src="imagens\pipoca.com .gif" > Parágrafo <br> <blockquote> <img src="imagens\pipoca2.gif" > Texto <br> </blockquote> </blockquote> <img src="imagens\cafe.gif" > Parágrafo <br> <blockquote> <img src="imagens\pipoca2.gif" > Capítulo ii <br> <blockquote> <img src="imagens\pipoca.75 </blockquote> </blockquote> <img src="imagens\cafe.

.</td> 3 vezes em cada linha... ter 4 linhas este atributo deve ser escrito 4 vezes.</table> Este é o elemento principal que estabelece os limites da tabela.</td> Este define a célula da linha.. coluna 2 2... Para uma tabela... A barra "/" antes da tag representa o fechamento (fim) dela. <table border=1> <tr> <td> Linha </td> <td> Linha </td> <td> Linha </td> </tr> <tr> <td> Linha </td> <td> Linha </td> <td> Linha </td> </tr> </table> 1.</tr> Este elemento define a linha da tabela. E finalmente um conjunto de <table>.. imagens.</table> envolvendo toda a estrutura.. formulários e até mesmo outra tabela. <tr>. </table> table é o elemento principal que estabelece os limites de uma tabela.Basicamente uma tabela é composta por três tags: <table>.blog. Observe que para criar duas linhas tive que repetir o conjunto <tr>.2 para melhorar o layout da página oferecendo recursos para posicionar seus textos e imagens semelhante as páginas dos jornais e revistas.br anaschneider@gmail.com . Dentro das células podemos inserir o texto. coluna 3 Visualização: Agora vamos nos aprofundar um pouquinho mais. coluna 1 1.</tr> duas vezes. Ele pode conter atributos: Profª Ana Carolina Jaskulski http://anacarol.. coluna 3 2.. coluna 2 1... Para criar 3 células em cada linha repeti o conjunto <td>. <table atributos> . A seguir está um exemplo de uma tabela simples montada com estas 3 tags.. coluna 1 2. Dentro dele estão todos os demais elementos da tabela. <td>. por exemplo.76 14 Tabelas Tabela surgiu pela primeira no HTML na versão 3.

br anaschneider@gmail. Valor absoluto em pixels.77 border="valor" Define uma borda para a tabela. é criada uma borda de 1 pixel de espessura. Se este atributo não estiver presente. <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> Profª Ana Carolina Jaskulski http://anacarol. <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. a tabela será exibida sem bordas ou linhas separando as células.com . Quando é especificado border sem nenhum valor.blog.

blog. <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: Profª Ana Carolina Jaskulski http://anacarol. Valor absoluto em pixels.78 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.com . estando elas visíveis ou não.br anaschneider@gmail.

blog. enquanto o exemplo 2 ajusta-se a % da janela reduzida. Para percentagem. <table bgcolor="blue"> <tr> Profª Ana Carolina Jaskulski http://anacarol. utilize o sinal "%" após o número.79 width="valor" e height="valor" Permite especificar a largura e altura da tabela. <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. Reduza a janela do browser e observe o efeito que isso causa aos dois exemplos acima.br anaschneider@gmail.com . O exemplo 1 mantém o seu tamanho fixo. seja através de um valor absoluto em pixels ou através de uma percentagem da área da página. Pode ser através do valor RGB ou através de um dos 16 nomes padrão VGA do Windows.

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.htm onde a tabela é exibida você pode omitir o diretório no endereço do background. <table border background="imagens\confeti.blog. Se o arquivo de imagem estiver no mesmo diretório do arquivo.br anaschneider@gmail.80 <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. <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: Profª Ana Carolina Jaskulski http://anacarol.com .

<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.com .br anaschneider@gmail.blog. <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"> Profª Ana Carolina Jaskulski http://anacarol. 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.81 bordercolordark ="#rrggbb" ou "nome" Altera a cor da sombra das bordas de toda a tabela ou de uma célula específica.

br anaschneider@gmail. </tr> table row .. para que haja o deslocamento horizontal do texto.com .blog. <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: Profª Ana Carolina Jaskulski http://anacarol... table row pode conter os seguintes atributos: align="left. Para habilitar align configurei espaçamento horizontal da tabela com o width="300".Linha de tabela. right" ou "center" Controla o alinhamento horizontal do conteúdo das células na linha. Todas as células são dispostas em linhas. O conjunto <tr>..82 <tr> <td> célula 1 </td> <td> célula 2 </td> </tr> </table> Visualização: <tr atributos> .</tr> deve se repetir conforme o número que linhas que se deseja criar.

83 valign="baseline. <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. para que haja o deslocamento vertical do texto.br anaschneider@gmail. Para habilitar Valign configurei o espaçamento vertical da tabela com height="100". <table border="1" width="60%"> <tr bgcolor="ff4500"> Profª Ana Carolina Jaskulski http://anacarol. bottom. top" ou "middle" Controla o alinhamento vertical do conteúdo das células na linha.blog.com .

76 </td> </tr> <tr> <td> 7. <table> <colgroup align="char" char="." charoff="35%"> <tr> <td> 880. bordercolordark="cor" Define a cor da sombra da borda da linha.84 <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.032 </td> </tr> <tr> <td> 13. char="caracter" Define o caracter de alinhamento da célula que pode ser um ponto.com . "/".br anaschneider@gmail. bordercolorlight="cor" Define a cor da luz da borda da linha. ":". Ah! Muito poucos browsers sabem interpretar esses parâmetros. etc.blog. charoff="número" Define o deslocamento do caracter de alinhamento da célula. No exemplo abaixo usei um ponto como caracter de alinhamento. uma vírgula ou caracteres tais como "=".48 </td> </tr> <tr> <td> Profª Ana Carolina Jaskulski http://anacarol.

é 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.23 </td> </tr> </colgroup> </table> Visualização: table data <td atributos> . O default é 1. <table border="1" width="60%"> <tr> <td colspan="2" align="center"> Celula 1 primeira linha </td> </tr> <tr> <td> Celula 1 segunda linha </td> <td> celula 2 segunda linha </td> Profª Ana Carolina Jaskulski http://anacarol.85 542..com . O default é 1. listas. arquivos de imagem e também outras tabelas. Pode conter texto. rowspan=número Especifica o número de linhas que a célula pode ocupar. blocos.br anaschneider@gmail. elementos de formatação de caracteres. </td> Célula de dados da tabela..blog.

blog. <table border width="400"> <tr> <td align="right"> right .86 </tr> </table> Visualização: Agora a combinação entre as duas: <table border="1" width="60%"> <tr> <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.cuidado com a grafia </td> <td align="center"> center </td> <td align="left"> left </td> </tr> </table> Visualização: Profª Ana Carolina Jaskulski http://anacarol.com . right ou center Controla o alinhamento horizontal do conteúdo das células.br anaschneider@gmail.

<table border> <tr> <td nowrap width="200" align="center"> Esta é uma tabela comum. evita que haja uma quebra de linha dentro da célula (se incluído significa verdadeiro.br anaschneider@gmail. em conjunto com o atributo width.. permite criar células com tamanho fixo. </td> <td width="200" align="center"> com uma célula configurada </td> <td width="200" align="center"> Profª Ana Carolina Jaskulski http://anacarol.. então será visualizado quando a janela não estiver maximizada... Esse efeito..</td> . bottom... criador da álgebra booleana. as células terão sempre o mesmo tamanho ao invés de quebrar seu conteúdo em várias linhas.especifica uma célula de 200 pixels de largura cujo conteúdo não pode ter quebra de linha (text wrapping). <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. O termo booleano provém do nome do matemático inglês George Boole (1815 / 1864).blog.com . <td nowrap width="200">.. porém a última não tem o atributo nowrap. Este atributo. </td> </tr> </table> <br><br> <table border> <tr> <td width="200" align="center"> Esta é uma tabela comum..87 valign=baseline. senão falso).. Abaixo o código para criação de duas tabelas iguais... Assim quando o browser é redimensionado pelo usuário. </td> <td nowrap width="200" align="center"> com uma célula configurada </td> <td nowrap width="200" align="center"> COM o atributo nowrap.. top ou middle Controla o alinhamento vertical do conteúdo das células.. A sintaxe .

</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.br anaschneider@gmail.88 Sem o atributo nowrap. </td> <td width="10"> width=10 </td> <td width="80"> width=80 </td> <td width="120"> width=120 </td> </tr> </table> Visualização: Profª Ana Carolina Jaskulski http://anacarol..blog.com . &nbsp = Espaço vazio <table border> <tr> <td width="10"> &nbsp.. seja através de uma percentagem em relação à largura da tabela..

No exemplo abaixo estou apresentando uma configuração de cores completa envolvendo table. a não ser que eu defina um outro para cada uma delas. ela fica com o fundo da pr&oacute.jpg </td> <td background="imagens\papel. como não defini um para a terceira célula. background="diretório/nome do arquivo" Define uma textura de fundo na célula.jpg).o identifiquei. <table border background="imagens\menta.jpg) bordercolor Altera a cor da borda de uma célula específica dentro da tabela.jpg"> e aqui a papel.com .pria tabela (o menta.jpg) e a segunda célula tem o (papel. Quando eu coloco um background na tabela (ou na linha).89 bgcolor="#RRGGBB" Define uma cor de fundo para a célula. a primeira célula tem um outro (o sky. ela recebe o da tabela – o menta.blog.jpg"> aqui tem a figura sky.jpg.jpg"> <tr> <td background="imagens\sky. <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: Profª Ana Carolina Jaskulski http://anacarol. tr e td.br anaschneider@gmail.jpg) </td> </tr> </table> Visualização (observe que a tabela tem o background menta. as células daquela tabela (ou daquela linha) receberão (todas) aquele background.jpg </td> <td> e aqui como n&atilde.

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"> &nbsp. 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 . </td> Visualização: <th atributos> .blog.tambem com a tag th </th> </tr> <tr> <td> linha 2 coluna 1 </td> <td> linha 2 coluna 2 </td> </tr> </table> Visualização: Profª Ana Carolina Jaskulski http://anacarol.com . Aqui está um tabuleiro.90 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. </th> title heading. Os exemplos já foram apresentados acima..br anaschneider@gmail..

a células possuem formatações diferentes e <tr> não aceita formatação para células individuais. distribuídas em diversas linhas. como falei.91 <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. Tudo bem. Nesse caso o jeito seria entrar em cada célula e inserir os parâmetros. Eu não posso configurar <table> porque. <table border> <caption align="top"> Legenda no topo </caption> <tr> <th> L1 C1 . Porém quando a tabela é consideravelmente enorme. já fiz isso diversas vezes e com o auxílio do comando COPY fica até mais fácil.com .. Para resolver este problema existem três tags criadas exclusivamente para essa finalidade: <thead>. align=top.blog. (default) ou bottom Controla a posição da legenda em relação a tabela. célula por célula. Profª Ana Carolina Jaskulski http://anacarol.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.Titulo 1 (com th) </th> <th> L1 C2 ..</thead> formata o cabeçalho.. sendo que algumas células terão uma formatação de cor e texto diferentes que as demais. pois o excesso de formatação além de ser trabalhoso deixaria o arquivo desnecessariamente "pesado".br anaschneider@gmail.. esse método deixa de ser adequado.

borda azul claro --> <thead bgcolor="gold"> <!-. Vamos supor que a tabela abaixo é uma lista de preços de materiais enorme.corpo rosa --> <tr> <td> 1) </td> <td> CD-RW </td> <td> R$3..com . </td> <td> . <tfoot>.</tfoot> formata o rodapé.br anaschneider@gmail.. imagine acionar o comando COPY 240 vezes!! <table border width="350" bgcolor="cyan"> <!-. cabeçalho e rodapé.... 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).80 </td> </tr> <tr> <td> . Elas foram criadas exclusivamente para facilitar a formatação dos módulos da tabela.. Configurar cada item do título.blog..</tbody> formata o corpo.parte de cima amarelo --> <tr> <td colspan=5 align="center"> Parte de cima da tabela </td> </tr> </thead> <tbody bgcolor="purple" style="font-size:18"> <!-. com 80 itens!! A borda (em table) possuirá uma formatação diferente que o seu título. </td> </tr> </tbody> <tbody bgcolor="pink" style="font-size:12"> <!-..titulos roxo--> <tr> <td width="25"> item </td> <td width="150"> DESCRIÇÃO </td> <td width="50"> QUANT.50 </td> </tr> <tr> <td> 2) </td> <td> Cartucho recarregado </td> <td> 17. cabeçalho e rodapé até que seria simples. que por sua vez serão diferentes que o seu corpo.92 <tbody>. Profª Ana Carolina Jaskulski http://anacarol.

comia frutas.. estilo manchete de revista.stimos.00 </td> </tr> </tbody> <tfoot bgcolor="blue" style="color:#FFFFFF"> <!-. direi que essa linha possui um packground especial (as laranjas).. Steve Jobs viu que estava na hora de ampliar a empresa.. Entre eles irei inserir uma coluna intermediária com <td width="8%">. Primeiro digite o texto em modo simples.ou a comercializar o Apple i por uS$ 666 e logo nesse primeiro ano. Vou montar um exemplo com um texto formatado em duas colunas.) </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.blog. superior e inferior. 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. O texto superior será a coluna direita e o inferior a esquerda. e para isso apelou para os empr&eacute. <body> <table> <tr> <td width="20%"> Saiba o que fez Steve Jobs parecer um bom sujeito </td> <td width="5%" background="imagens\laranja.br anaschneider@gmail. e isso o fez dar um voto de confianca e Profª Ana Carolina Jaskulski http://anacarol.com . as vendas alcançaram uS$ 774 mil.. só para identificar a linha e para separar uma coluna da outra usando essa coluninha especial. Agora vou inserir os parâmetros de tabela <table> . </td> </tr> <tr> <td> 80) </td> <td> Caneta para quadro branco </td> <td> R$2. sem qualquer formatação. Diz o financeiro (que emprestou o dinheiro) que ele era muito mal apresentado.base da tabela em azul --> <tr> <td colspan=5 align="center"> Parte de baixo. envolvendo os dois blocos de texto.93 </td> <td> .jpg"> </td> <td width="75%"> em 1976. mas que s&oacute. . abaixo). a Apple come&ccedil. se vestia muito mal.

com três divisões cada.gif" align="left" vspace="6" hspace="10" border="2" > Essa figura e esse texto estão na mesma célula.br anaschneider@gmail. depois 20 e depois 70%. &eacute.lula </td> Profª Ana Carolina Jaskulski http://anacarol.jpg" align="left" vspace="6" hspace="10" border="2"> E isso aqui &eacute. </td> </tr> </table> </body> que amanh&atilde. Repare que eu não determinei tamanho para a nova célula. viu? </td> <td width=3pt bgcolor=gold> Aqui &eacute. outra c&eacute. Para eu ter larguras diferentes de colunas. &oacute.BADO.lula! </td> <td background="imagens\pipoca. imagine o mesmo exemplo com figura de centro e o texto margeando suas duas laterais.timo dia para comer pipoca. os tamanhos de coluna (largura das células) da primeira linha é que definirão a largura das demais colunas. se o tamanho das células da primeira linha for 10. portanto. e trabalhar com eles. A coluna do centro serve como um separador de texto.Agora vou usar o mesmo exemplo para inserir imagens nas colunas. Visualização: veja que a cada novo td uma nova célula é aberta. <body> <table> <tr> <td width="48%"> Primeira c&eacute. Quando se cria uma tabela com mais de uma linha e com mais de uma coluna. ) <body> <table> <tr> <td width="48%"> <img src="imagens/ping.stimo para a apple. Para isso vou criar mais dois blocos de tabela. portanto ela assume o resto da largura disponível. as outras linhas dessa mesma tabela também terão essas mesmas larguras de colunas. para lembrar S&Aacute. </td> </tr> </table> </body> Visualização (Observe que a soma de "width="20%" + "5%" + "75%" = 100% que é a largura da tela do seu monitor. tenho que criar nova tabela (nem que a tabela tenha só uma linha).blog. uma outra c&eacute.com .94 efetuar o empr&eacute. Esse vermelho aqui do lado &eacute.lula da PRIMEIRA tabela.

lula desta SEGUNDA tabela.ltima c&eacute.lulas da primeira linha vai ser a mesma largura da segunda linha mesmo que eu n&atilde.lula da SEGUNDA LINHA.lula </td> <td bgcolor=pink > </td> <td> &uacute. </td> </tr> </table> </body> Visualização: (repare que a ultima tabela tem 2 linhas.lula dessa linha!!.desta vez. a terceira c&eacute. e que na segunda linha eu não especifico largura de celula porque será sempre as mesmas larguras da primeira linha da tabela). Veja que a largura das c&eacute. Profª Ana Carolina Jaskulski http://anacarol. </td> </tr> </table> <table> <tr> <td width="48%"> Primeira c&eacute.lula .br anaschneider@gmail.m poder&iacute.blog. com margaridas no fundo.lula da primeira linha. a &uacute.lula desta linha.jpg"> Aqui est&aacute. Aqui do lado tem outra c&eacute.tamb&eacute.95 <td width="1%" bgcolor=red> </td> <td width="51%" background="imagens\margarida.com . O baterista aqui do lado &eacute. </td> </tr> </table> <table> <tr> <td width="25%"> Primeira c&eacute.lula desta tabela.ltima c&eacute. amos chamar de COLUNA.lula . Aqui do lado tem outra c&eacute.o defina largura na segunda linha </td> </tr> <tr> <td > primeira c&eacute.gif" align="left" vspace="6" hspace="10" > </td> <td width="25%"> Terceira e &uacute. a segunda c&eacute.lula desta tabela aqui </td> <td width="50%"> <img src="imagens\bateria. </td> <td width="10%" bgcolor=00ff7f > </td> <td width="48%"> Esta &eacute.ltima c&eacute.

blog.jpg"> </td> <td> <img src="imagens\martelando.gif"> </td> <td> <img src="imagens\rosa.com .gif.96 Imagens. 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> Profª Ana Carolina Jaskulski http://anacarol. Tabelas Cores e Backgrounds em Alinhando três arquivos de imagem. <body> <table border> <tr> <td> <img src="imagens\garfield.gif"> </td> </tr> </table> </body> Visualização: (observe que como nao defini a largura das celulas.br anaschneider@gmail.

.. 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. usando a tag <br>.blog. que o cellpadding é 50! <table border="0" cellpadding="10"> <tr> <td> <img src="imagens\queijo. compare com o exemplo acima (do Garfield). acima e abaixo da imagem.com . esquerdo. ou.gif"> </td> <td> <img src="imagens\borboleta. </td> <td> um chocolate <br> <img src="imagens\chocolate.gif"> <br>Ab&oacute.boras! Profª Ana Carolina Jaskulski http://anacarol.jpg">E flores.97 <img src="imagens\garf..br anaschneider@gmail.gif"> </td> <td> <img src="imagens\bola.gif"> </td> </tr> </table> Visualização: Você pode inserir um texto do lado direito. Você pode usar normalmente quebras de linhas e até linhas (<hr>) e formatações (<b>) dentro de uma célula.jpg"> </td> <td> <img src="imagens\rosa. (break line = quebra de linha)..! </td> </tr> </table> Visualização: (repare que como não coloquei <br> depois da figura na última célula. Aqui colocarei cellpadding (distância) = 10.jpg"><br>um queijo.

br anaschneider@gmail.com . (figura como fundo) <table > <tr> <td bgcolor=ba55d3> <img src="imagens\pegadas. eu uso o background (para ter figuras como fundo) <br> <img src="imagens\jacare. Veja a distância entre os objetos com o uso do cellpadding = 10) inserindo um background.jpg"> <img src="imagens\cogumelo. e que "O Sistema Solar" está escrito em cima da figura porque entre o texto e a figura tem um <br>. uma cor (uso do bgcolor).gif"> </td> <td> <img src="imagens\ramalhete.blog.98 </td> <td> O Sistema Solar <br> <img src="imagens\sistema.gif" <br> Esse fundo &eacute. </td> <td background="imagens\pool.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.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 Profª Ana Carolina Jaskulski http://anacarol.jpg"> Aqui e no cogumelo.gif"> </td> <td background="imagens\manta.

com . 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) <table border="1" cellpadding="10"> <tr> <td background="imagens\pisca.gif"> <img src="imagens\quadro.99 eliminar os espaços entre as células. onde dependendo da altura do texto ele vai repetir ou não a figura dentro da célula).gif"> </td> <td background="imagens\inch.gif"> <img src="imagens\dado. <table border="0" cellpadding="20" cellpacing="0"> <tr> <td background="imagens\color.gif"> </td> </tr> </table> Visualização: Alguns gifs são ótimos para se colocar bem em cima da página (como enfeite). Esses gifs também podem ser colocados em tabelas (como no exemplo abaixo.blog.. por exemplo).gif"> </td> <td background="imagens\gota.gif" width="150"> <b> olhe as cores!! </b> </td> <td background="imagens\jacaroa.br anaschneider@gmail.gif" width="400"> <font color=ba55d3> Profª Ana Carolina Jaskulski http://anacarol. mas tenha muito cuidado na hora de inserir textos em cima de figuras (o internauta pode ter dificuldade de ler). e eles podem ocupar a largura toda da tela (são ótimos para sublinhas títulos..gif"> <img src="imagens\cabeca.

isso não tem problema quando vou usar uma tabela normal. tenha tamanhos diferentes (porque as barras terão tamanhos variados de linha para linha). além de serem mais trabalhosos ocupam mais espaço na página. isso obriga eu ter uma outra tabela dentro de cada uma das "segundas células" (dentro das segundas células de cada linha). por exemplo). Observe uma dificuldade que temos: 1ª célula da 1ª linha 2ª célula da 1ª linha 3ª célula da 1ª linha 1ª célula da 2ª linha 2ª célula da 2ª linha 3ª célula da 2ª linha 1ª célula da 3ª linha 2ª célula da 3ª linha 3ª célula da 3ª linha Veja que quando eu defino a largura das células da primeira linha. 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. Ele nada mais é que um conjunto de módulos sendo que cada módulo consiste numa tabela inserida dentro da outra.com . <table border=1> <tr> Profª Ana Carolina Jaskulski http://anacarol. 2. e essa nova tabela mudará de tamanho de acordo com o tamanho que eu quero as barras.100 um gif interessante <br> colocar bem em cima <br> de sua pagina! </font> para </td> <td background="imagens\pasta. também. as segundas células também e as terceiras células também).br anaschneider@gmail. Vamos analisar passo-a-passo como montar o gráfico. 1. eu estou definindo a largura das células de todas as linhas daquela tabela (as primeiras células sempre terão a mesma largura.gif" width="200"> </td> </tr> </table> Visualização: Fazendo Gráficos de Estatísticas Geralmente o Webmaster utiliza arquivos gif ou jpg que (cá entre nós). Somente colocando uma tabela dentro da outra é que eu conseguirei larguras diferentes.blog.

largura. Depois de pronta as barras. que conterá texto do valor que a barra está representando.101 3. as barras e os valores) 2.com .O conteúdo da primeira célula da primeira linha (o "masculino") 6.coluna onde vai a barra (já defini a largura quando fiz a primeira. 28. 31. 11. 17.o valor (escrito) que a barra está representando 19.linha que recebera a célula vazia 26. altura e cor que quero que a barra tenha (altura tem que ser igual em todas para ser mais bonito) 25.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. 25.largura. colocamos na tabela primária uma outra linha com os rótulos (das legendas) Profª Ana Carolina Jaskulski http://anacarol. altura e cor da BARRA! Altura deve ser igual em todas as barras 8. 30. 12.célula que recebera o valor que a barra está representando 32.conteúdo da primeira célula (o "Mulheres") 23. 21.blog. 15. 7. 24. 22. 7. 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). 6. 14.linha que conterá a célula que formará a barra 9. 4. 8.Terceira célula da tabela de base.Primeira célula da primeira linha (para ir o "masculino") 4. 26. 20. 29.linha que fará a outra barra 20. 13. 10. 16.primeira célula da segunda linha 21. <td> Homens </td> <td width="200"> <table height="15" width="50" bgcolor="pink"> <tr> <td> </td> </tr> </table> </td> <td> 300 </td> </tr> <!—aqui inicia a outra barra --> <tr> <td> Mulheres </td> <td> <table height="15" width="100" bgcolor="pink"> <tr> <td> </td> </tr> </table> </td> <td> 600 </td> </tr> </table> 1.célula vazia que formara a barra 14. 29. 35.primeira linha (para ir cada uma das 3 células) 3. 23.valor Visualização: O gráfico de barras vertical segue o mesmo princípio.célula vazia que será a barra em si 31.Tabela de base: terá 3 colunas (para ir o "masculino" e o "feminino". 5. 27. 18. por isso não defino de novo) 24.br anaschneider@gmail. 34. Relembrando: só teremos tabelas dentro dessas colunas para que possamos colocar alturas diferentes nas barras. 32. 9. 15. 33.

célula vazia que será a barra. 29. 9. 13. 2. 12.br anaschneider@gmail.outro rotulo --> </td> </tr> </table> 1. 21.segunda celula --> Homens <!-. 5.linha com a altura e a largura da segunda barra 16.segunda célula 27.TERMiNA A PRiMEiRA BARRA --> <td valign="bottom" > <table> <tr width=10 height=100> 100 <td bgcolor="pink" > </td> </tr> </table> </td> </tr> <tr> <!-.segundo rótulo "Homens" Visualização: Profª Ana Carolina Jaskulski http://anacarol. 3. 22.primeira linha que terá as duas colunas (uma para cada barra) 3. que será a legenda 24.primeira coluna onde vai a primeira barra 4.tabela que desenhara a barra 5.com .valor que ficara "em cima" da barra para indicar o valor que ela representa 7.blog.valor que a barra representa – fica em cima da barra 17.primeira célula da legenda 25. 26. 31.tabela que desenhará a segunda barra 15. 30. 15. 11. 18.primeira rótulo "Mulheres" 26.legenda --> <td> Mulheres <!-. 27.célula vazia que será a barra 23.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 bonito 6. 6. 16. 28.102 1. 14. 17. 7.segunda coluna que conterá a segunda barra 14 .tabela primária (duas colunas – uma para cada barra) e duas linhas (uma para as barras e outra para a legenda) 2. 20. 4.rotulo --> </td> <td><!-. 8.segunda linha da tabela. e a sua cor 13. 25. 10. 19. 24. <table border=1> <tr height="240"> <td valign="bottom" > <table> <tr width=10 height=200> 200 <td bgcolor="pink" </td> </tr> </table> </td> <!-. 23.

103 Tabela com Imagens Linkadas Criação de uma tabela com três colunas em uma linha..com .br anaschneider@gmail. e cada um desses frames abre um arquivo html diferente.blog. 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! Profª Ana Carolina Jaskulski http://anacarol. 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. Cada coluna será um frame (uma outra janela). um efeito legal é esse: cada site html que abre em cada um desses frames..

4.html" width="150" height="338" src="imagens\arquivo-c. <a href="imagens\arquivo-b. O atributo scrolling="no" omite aquelas barras de rolagens horizontal e vertical.gif. Dentro dessas células os parâmetros da tag iframe.jpg) com width="150" heiht="338". src="imagens\arquivo-a.htm e arquivo-c.jpg e light. só mudando os nomes do arquivo e sua respectiva imagem. 3. <html> 2. Cada iframe tem o mesmo tamanho das imagens. <div style="position:absolute. terceiro e ultimo frame abrindo o terceiro arquivo Os arquivos HTML com as imagens contidas são simples. terceira e ultima coluna 2.htm.104 Veja agora de forma mais didática como isso foi feito: Escolha três imagens de tamanho igual (sakura. libra. porém possuem alguns parâmetros importantes.blog. <body> 5. Sintaxe do arquivo-a. 2.html"> Profª Ana Carolina Jaskulski http://anacarol. <head> 3."> 6. em seguida crie a estrutura de tabela normal com 3 células. Os três são semelhantes. E SOMENTE SÓ. top:0px. a outra coluna que terá o outro frame 8. <table border=1> <tr > <td> <iframe scrolling="no"> </iframe> </td> <td> <iframe scrolling="no" > </iframe> </td> <td> <iframe scrolling="no" > </iframe> </td> </tr> </table> 1. para isso criei 3 arquivos HTML que chamei arquivo-a. uma imagem. Porém as imagens não são inseridas diretamente dentro do iframe.htm sendo que cada um possui SÓ.com .br anaschneider@gmail. </head> 4. arquivo-b. a largura e a altura e o scrolling="no" para não aparecer barra de rolagem 7.html" width="150" height="338" src="imagens\arquivo-b.html" width="150" height="338" a tabela a linha a primeira coluna o frame dentro dessa primeira coluna com o arquivo que deverá abrir nele. left:0px. definição do outro frame abrindo o outro arquivo 1.htm 1.

blog.jpg"> </a> </div> </body> </html> Arquivo-c.com . <img src="imagens\light. define a imagem que será usada como link – quando clicar nela abre o link da linha acima Observe que a imagem light. define a posição (o mais encostado da lateral esquerda e o mais acima possível) define o que será chamado quando clicar na imagem.jpg"> </a> </div> </body> </html> Profª Ana Carolina Jaskulski http://anacarol. Arquivo-b."> <a href="imagens\arquivo-c.</html> 5.html"> <img src="imagens\sakura. 6. 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."> <a href="imagens\arquivo-a.br anaschneider@gmail. left:0px. </a> 9. </body> 11. left:0px. top:0px.html"> <img src="imagens\libra.html <html> <head> </head> <body> <div style="position:absolute. fechando o loop de 3 saltos.105 7. top:0px.html <html> <head> </head> <body> <div style="position:absolute.jpg deste arquivo é um link que chama o arquivo-b.jpg"> 8. 7. </div> 10.

No exemplo acima. Profª Ana Carolina Jaskulski http://anacarol.blog. pode-se interrompê-la pressionando Esc ou simplesmente mudando de página.. o arquivo mid está dentro do diretório "audio". Porém.</head>.mid" loop="1"> src="URL" endereço do arquivo de som.106 15 Multimídia <bgsound atributo> bgsound executa um arquivo de som ( exclusivo do internet Explorer). <bgsound src="audio/minha_musica.br anaschneider@gmail. <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. assim que a página é acessada. loop="número | infinite" quantas vezes o arquivo será executado. uma vez iniciada a execução do som. meta Possibilita colocar a chamada da música dentro do <body>. quanto sem "<meta>").com . A tag <bgsound> deve ser colocado entre as tags <head>. não adianta somente dar esc. usando META tem de clicar no stop para a música parar..

controls Exibe botões de controle sob a imagem. middle. border="número" Especifica a largura da borda. Os formatos de arquivo são avi. abreviatura de Dynamic Source. alt="texto" Exibe um texto alternativo no lugar da imagem. height="número" Determina a altura da janela que será aberta para exibir o arquivo. <body> Clip de Eric Clapton com Jeff Beck e Jimmy Page . base. É o dynsrc. esquerda e direita. Profª Ana Carolina Jaskulski http://anacarol.Layla <center> <img dynsrc="imagens\EricClap. hspace="número" Especifica uma margem horizontal entre a imagem e o texto. respectivamente.blog. Alinha o texto que margeia a imagem pelo topo. bottom. align= "" top. right.107 16 Vídeos com img Dentro do comando img existe um parâmetro muito usado para se inserir clipe de vídeo na homepage.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). left. dynsrc="URL" Exibe o arquivo de vídeo.com . meio.br anaschneider@gmail. mpg e mov.

o alt apresenta uma janelinha com o nome "A imagem nao pode ser carregada".br anaschneider@gmail. topo e base. "bottom" Alinha o texto à esquerda.blog. width="número" Determina a largura da janela que será aberta para exibir o arquivo. <embed atributos> . align="left". direita. "false" Determina se o plug-in é visível na página. "right". Profª Ana Carolina Jaskulski http://anacarol. hidden="true". start="fileopen / mouseover" Fileopen (default).. border="número" insere e determina a espessura de uma borda em torno do applet. height="número" Determina a altura da janela em pixels. quando a imagem. src="endereço" Especifica o endereço do arquivo de vídeo. por uma razão qualquer.. frameborder="no" Configura uma moldura sem borda. vspace="número" Especifica uma margem vertical entre a imagem e o texto. Agora alguns parâmetros de configuração sobre o mesmo arquivo: <center> <img dynsrc="imagens\EricClap. start=mouseover faz a imagem se movimentar (iniciar o clip) quando o cursor do mouse é passado sobre ela. "top". Mouseover faz com que o vídeo seja executado somente quando o cursor do mouse passa sobre a área da imagem. especifica que o vídeo deve ser executado imediatamente. como um vídeo ou arquivo de som. respectivamente.108 loop="número ou infinite" Especifica quantas vezes o arquivo será exibido. deixa de ser carregada.com . </embed> Executa ou carrega um objeto.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.

Layla (texto alinhado no topo). vspace="número" Especifica as bordas verticais..blog. </nobed> Este comando exibe uma mensagem informando que o browser usado não tem capacidade para exibir o objeto.Jeff Beck. Só é usado na plataforma Windows.br anaschneider@gmail.. <center> <embed src="imagens\EricClapton. Jimmy Page . Foreground faz a paleta do plug-in ser a paleta de primeiro plano. </embed> </center> Visualização: <nobed> . width="número" Determina a largura da janela em pixels. background a do segundo pluginspace="endereço" Especifica o endereço que contém as instruções para a instalação do plug-in. name="texto" Especifica o nome do applet.mpg" width="150" align="top" height="150"> Eric Clapton. type="mimetype" Determina o tipo de mime da tag embed deve ser carregado. pallete="foreground".109 hspace="número" Especifica as bordas horizontais.com . "background" plano. Profª Ana Carolina Jaskulski http://anacarol. A mensagem deve ser inserida entre <nobed> e </nobed>.

com . left:300px. e a hierarquia de sobreposição obedece àquela apresentada no código-fonte. o que varia é a distância de cima da página e da esquerda (top e left) Profª Ana Carolina Jaskulski http://anacarol. position:absolute. height:50px. e são colocados a uma altura (top) da tela e à uma distância da margem esquerda (left) <div style="background-color:4682b4. width (largura) e height (altura) definem o tamanho do bloco que irá comportar o objeto. Agora pode-se definir a localização exata de um objeto e sobrepô-los em camadas nas mais diferentes maneiras. width:200px. relative . top:230px. top:250px. que não era possível apenas com o HTML convencional. left:400px. points (pt) e porcentagem (%). top:210px. ele aparecerá no local exato que você o especificar mesmo quando o internauta minimiza a tela do browser.definido pela margem inferior do último objeto e margem esquerda da tela. static .. As unidades que definem as distâncias podem ser em pixels (px).br anaschneider@gmail."> Bloco verde </div> <div style="background-color:808080 . isso é."> Bloco azul </div> <div style="background-color:7fff00. position:absolute. uma imagem ou algum texto). São três textos com background (o que forma retângulos quando eu estipulo alturas e larguras).110 17 Posicionamento de Objetos . Visualização: (a altura e a largura são iguais.blog. height:50px. width:200px. 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.definido pelas margens superior e esquerda da tela. width:200px. position Quando você especifica uma posição absoluta em pixel de um objeto (um quadro. height:50px. Abaixo segue um exemplo prático de como isso acontece.div Um recurso interessante que o CSS trouxe ao Webmaster foi o controle do posicionamento de objetos na tela. Os blocos de posições absolutas podem se sobrepor. Através da propriedade position o posicionamento pode acontecer de três modos distintos: absolute .O posicionamento é definido pelo próximo espaço disponível no canto esquerdo da tela."> Bloco cinza </div> left:200px. position:absolute. os objetos definidos por último irão sobrepor os anteriores.

com .br anaschneider@gmail. top: 570px.blog. left:200px. width: 200px"> Bloco cinza </div> Visualização: Agora vou apresentar os mesmos exemplos porém mudando a configuração de absolute para relative. height: 50px. position: absolute."> Bloco verde Profª Ana Carolina Jaskulski http://anacarol. width: 200px. left: 300px. height: 50px. Também foram alteradas as propriedades left & top dos três blocos para que o exemplo fosse deslocado mais para baixo na tela.111 Agora invertendo as posições dos blocos. position: relative. width: 200px"> Bloco verde </div> <div style="background-color: 4682b4. top:10px. height: 50px. top: 530px. <div style="background-color: 7fff00. width: 200px"> Bloco azul </div> <div style="background-color: 808080. position: absolute. position: absolute. height: 50px. left: 400px. 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. top: 550px. left: 200px.

"> Bloco cinza </div> </body> Visualização: O top do bloco verde está a 10px abaixo do texto. top:-20px. isso parece muito complicado. <div style="background-color: eee8aa."> Laranja </div> <div style="background-color: 483d8b. height: 50px. Observe que o bloco cinza possui top:-20px.br anaschneider@gmail. position: static. isso quer dizer que o bloco cinza com top=-20px está 80px abaixo do texto. top:10px. porém sua distância não corresponde com o que vemos."> Bege </div> <div style="background-color: ff7f50. height: 50px. Qual seria a utilidade de relative funcionar assim? Para posicionar um objeto no meio ou final de arquivos HTML relativamente longos. Para sobrepô-los temos que inserir valores negativos em top. 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. width: 200px.left: 400px. width: 200px. isso porque relative contabiliza a distância do texto mais a altura (height) do bloco anterior. width: 200px. position: relative. left: 400px. Então ele irá contar 10px + 50px = 60px abaixo do texto. 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.112 </div> <div style="background-color: 4682b4. já o top do bloco azul também deveria estar a 10px abaixo do texto (sobrepondo a metade direita do bloco verde). ele irá ocupar o primeiro canto superior esquerdo. isso é. position: static. width: 200px."> Bloco azul </div> <div style="background-color: 808080. left:300px. top:10px. height: 50px. então ele irá subir 30px para dentro do bloco azul (pois além do bloco cinza não ter os 10px. height: 50px. relative já o colocaria diretamente no local disponível mais próximo. top:-20px.blog. width: 200px. position: static. ele possui -20px totalizando -30px)."> Azul </div> Visualização: Profª Ana Carolina Jaskulski http://anacarol.left:300px. não precisamos ficar calculando sua posição vertical. height: 50px. left:200px... top:10px. A equação ficaria assim: 10 + 50 + 50 +[-20 -(+10)] = 80px.com . position: relative. conforme você está vendo abaixo independente de você inserir valores em left e top.

a sobreposição das figura se alteraram. Repare que embora o alinhamento sintático das figuras permaneça o mesmo.gif"> </div> <div style="position: absolute..br anaschneider@gmail. top: 4px. left: 80px.gif "> </div> </body> trocando a ordem. mesmo que não seja necessário. z-index:1"> <img src="imagens\mickey. z-index:1"> <img src="imagens\jacare. <div style="overflow:scroll. Seus valores são: visible . z-index z-index define uma hierarquia de sobreposição de objetos independente do seu alinhamento sintático.113 Observe que em static as propriedades left & top são ignoradas. o jacaré não aparece)..O browser sempre mostrará uma barra de rolagem.O browser mostrará uma barra de rolagem. left: 80px. auto .com . z-index:2"> <img src="imagens\jacare. height:80px. background-color:40e0d0"> Profª Ana Carolina Jaskulski http://anacarol. o mickey fica na frente (como tem fundo branco.. left: 80px. top: 4px. top: 4px.Onde não será mostrado o conteúdo que ficar fora dos limites da caixa. 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. overflow É aplicada sobre um texto que extrapolou o tamanho do bloco definido por width e height. width:400px.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. caso seja necessário. top: 4px. scroll . <div style="position: absolute. hidden . left: 80px.Onde será mostrado todo o conteúdo da caixa.gif"> </div> <div style="position: absolute. z-index:2"> <img src="imagens\mickey.blog.

</div> Visualização: <div style="overflow:visible.br anaschneider@gmail. width:300px.com . height:80px. </div> Visualização: Profª Ana Carolina Jaskulski http://anacarol.blog.114 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. background-color:#ffc0cb"> Este texto está configurado com overflow:visible e irá aparecer dentro de um quadro sem barras de rolagem.

filter:Alpha(opacity=10)"> opacity =10 </span> 24pt. finishx Coordenada vertical para o fim do gradiente de opacidade.. Note o uso de <span>.0. font-family: Arial Black.br Visualização: anaschneider@gmail. 1 (linear).blog. foco. 2 (radial) ou 3 Retangular. <span style="font-size: height:1. <span style="font-size: height:1.. finishx Coordenada horizontal para o fim do gradiente de opacidade.filter:Alpha(opacity=80)"> opacity = 80 </span> 24pt. alpha Cria 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. finishopacity Define o nível de ‘opacidade’ e seus valores vão de 0 à 100%. Profª Ana Carolina Jaskulski http://anacarol. startx Coordenada horizontal para começo do gradiente de opacidade. definida por opacity=% maior será a sua transparência. starty Coordenada vertical para começo do gradiente de opacidade.115 18 Filtros Efeitos visuais (sombreamento.com . Opacity=100 apresenta um objeto totalmente opaco e opacity=0 um objeto totalmente invisível. style Seus estilos podem ser 0 (uniforme).)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. opacity Apresenta o grau de transparência do objeto e seu valor refere-se a %. font-family: Arial Black.

Finishopacity=70. font-family: Arial Black. height:1.filter:Alpha(opacity=0. height:1. font-family: Arial Black.com . height:1. height:1.br anaschneider@gmail. font-family: Arial Black. style=3)"> opacity=0 finishopacity=70 style=3 </span> Visualização: Profª Ana Carolina Jaskulski http://anacarol. height:1. font-family: Arial Black. style=2)"> opacity=0 finishopacity=50 style=2 </span> Visualização: <span style="font-size: 24pt. font-family: Arial Black.116 Visualização: <span style="font-size: 24pt.filter:Alpha(style=2)"> style=2 radial </span> Visualização: <span style="font-size: 24pt. finishopacity=50.filter:Alpha(style=3)"> style=3 retangular </span> Visualização: <span style="font-size: 24pt. height:1.filter:Alpha(style=0)"> style=0 uniforme </span> Visualização: <span style="font-size: 24pt.blog. font-family: Arial Black.filter:Alpha(style=1)"> style=1 linear </span> Visualização: <span style="font-size: 24pt.filter:Alpha(opacity=0.

strength Define o comprimento que o efeito deve ter. Strength=3)"> <font color="blue"> <img src="imagens\cs05g. filter: Blur(add=1. 0 Sombreamento difuso.Direction=45.gif"> Figura e texto </font> COM <font color="red"> o filtro </font> </span> Visualização: <span style="height:1. 1 Sombreamento nítido. Sua sombra apresenta a mesma cor do objeto. Default = 5.com . Strength=2)"> <font color="blue"> <img src="imagens\cs05g. filter: Blur(add=1. <span style="height:1. porém com uma textura mais atenuada. add Booleano.blog. Strength=3)"> <font color="blue"> <img src="imagens\cs05g. filter: Blur(add=0. direction Define o ângulo em que o efeito deve acontecer.gif"> Figura e texto </font> COM <font color="red"> o filtro.117 blur Este filtro cria um efeito difuso diminuindo a definição das bordas do objeto.br anaschneider@gmail. Seu valor vai de 0 (topo) em incrementos de 45 graus até 315 graus.Direction=45.Direction=45. </font> </span> Visualização: <span style="height:1.gif"> Figura e texto </font> COM Profª Ana Carolina Jaskulski http://anacarol.

118 <font color="red"> o filtro </font> </span> Visualização: <span style="height:1.Direction=10.gif"> Figura e texto </font> Sem <font color="red"> o filtro </font> Visualização: Profª Ana Carolina Jaskulski http://anacarol.blog.br anaschneider@gmail.gif"> Figura e texto </font> COM <font color="red"> o filtro </font> </span> Visualização: <font color="blue"> <img src="imagens\cs05g.com .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.Strength=5)"> <font color="blue"> <img src="imagens\cs05g. filter: Blur(add=1.

height:1"> <img src="imagens\home1.gif"> </span> </body> Visualização (usando o filtro): Sem o filtro: dropshadow Este filtro cria um eleito de sombra sólida no objeto. color Define a cor RGB (#rrggbb) da sombra. simulando uma imagem GiF de fundo transparente. Os valores são em hexadecimal.br anaschneider@gmail. offy Determina a distância de afastamento em "y" (vertical). color Define uma cor do código RGB que sofrerá o efeito de transparência.gif tem o fundo branco (criando contraste com o background) Com o filtro chroma pode-se neutralizar o fundo branco (#FFFFFF) da imagem.jpg"> <span style="filter:chroma(color=FFFFFF).119 chroma Este filtro torna uma cor específica do objeto transparente. offx Determina a distância de afastamento em "x" (horizontal). Ah! O efeito não funcionará caso a cor selecionado não exista na figura. <body background="imagens\ambulancia. No exemplo a seguir a imagem home1. Profª Ana Carolina Jaskulski http://anacarol. pode ser direcionada conforme o ângulo desejado. Os valores em pixels (px) podem ser positivos ou negativos.blog.com . Os valores em pixels (px) podem ser positivos ou negativos.

Visualização: <body> <span style="font-size: 24pt. font-family: Arial height:1. offx=10.height:1"> color =blue offx=2 offy=2 </span> </body> Black. 0 para sombra negativa. <body> <p align="center" style="filter:fliph.nibus em Marrocos </p> </body> Visualização: <body> <p align="center" style="filter:flipv. offy=10.filter:dropshadow(color=blue.nibus em Marrocos </p> </body> Visualização: glow Borra os contornos do objeto. offy=2.com . color:#8A2BE2"> Socorram-me subi no &ocirc. Visualização: fliph e flipv Efeito de imagem invertida no objeto. color:#8B008B"> Socorram-me subi no &ocirc. font-size:20px. <body> <span style="font-size: 24pt.br anaschneider@gmail.blog. positive=1) . height:1. filter:dropshadow(color=green. font-family: Arial Black. Repare que no exemplo a seguir o objeto possui bordas pretas e o borrado é vermelho Profª Ana Carolina Jaskulski http://anacarol. height:1. offx=2. FlipH inverte no sentido horizontal (reflexo de espelho) e FlipV inverte no sentido vertical (reflexo na superfície de um lago).120 positive Parâmetro booleano: 1 para sombra positiva. positive=1) .height:1"> color =green offx=10 offy=10 </span> </body> height:1. Esse ‘ borro’ pode ter uma cor diferente do objeto. font-size:20px.

<body> <div style="filter:glow(color=red strength=-10).com .blog. height:1"> <img src="imagens\comp.strength=10: <div style="filter:glow(color=red strength=200). height:1"> <img src="imagens\comp.png"> </div> Visualização .png"> </div> Visualização .strength=200: gray Esse filtro torna a figura em tons de cinza: A figura normal é: Profª Ana Carolina Jaskulski http://anacarol. strength Determina a distância de afastamento do efeito.png"> </div> </body> Visualização – strength = -10: <div style="filter:glow(color=red strength=10).br anaschneider@gmail.121 color Define a cor RGB (#rrggbb) do ‘borrado’. Seu valor é em pixels (px) e pode ser valor positivo (borro externo) ou negativo (borro interno). height:1"> <img src="imagens\comp.

122

<body>
<div style="filter:gray; height:1">
<img src="imagens\pordosol.jpg">
</div>
</body>

Visualização:

invert
inverte 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
Este filtro cria um efeito de movimento no objeto.

Profª Ana Carolina Jaskulski

http://anacarol.blog.br

anaschneider@gmail.com

123

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

Profª Ana Carolina Jaskulski

http://anacarol.blog.br

anaschneider@gmail.com

124

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

Profª Ana Carolina Jaskulski

strength=5:

http://anacarol.blog.br

anaschneider@gmail.com

com .125 <span style="filter:wave(freq=4. height:1"> <img src="brasil.gif"> </span> Visualização freq=4 lightstrength=80 phase=360 : xray Efeito de chapa de raio X (se parece muito com o efeito Gray. phase=360).blog. mas é menos nítido: imagem sem efeitos: imagem com efeito Gray: <div style="filter:xray. lightstrength=80.jpg"> </div> Visualização XRay: Profª Ana Carolina Jaskulski http://anacarol.br anaschneider@gmail. height=1"> <img src="imagens\barra_flor.

. <html> <frameset cols="10. <frameset> cols="x.html e frame_3. O exemplo consiste num arquivo dividido em três frames: 1." altura ocupada por cada quadro. 2 e 3 com 10. Pode ser uma ou um valor absoluto frameborder="1 / 0" largura em pixels da borda dos quadros. .126 19 Frames <frameset atributos> . um arquivo HTML que contenha o <frameset> não deve conter também o descritor <body>. <no frames>. Quando a janela criada para cada arquivo não for suficiente para exibir todo o seu conteúdo.blog. frame_2... . ele automaticamente cria barras de rolagem vertical e/ou horizontal. conforme a necessidade.html (mas poderia ser qualquer outro site. viu?).html"> <frame src="frame_2. todo quadro possui uma borda.15. Para retirá-la use frameborder="0". Pode ser uma porcentagem (valor seguido de "%") em relação à largura total da página ou um valor absoluto em pixels. rows="x.html"> </frameset> </html> Visualização: Profª Ana Carolina Jaskulski http://anacarol.html"> <frame src="frame_3. Frames verticais Esta é a sintaxe de um arquivo HTML simples com frames verticais. 30 e 20 colunas.. Por default.. Ele é a moldura de apresentação desses três arquivos HTML.com . y. respectivamente... y.20"> <frame src="frame_1.. 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. ." largura ocupada por cada quadro. <frameset> e pode <frame>.br anaschneider@gmail. </frameset> Define um conjunto de quadros. Pode ser utilizado dentro de <html>.html.

<frameset cols="*.50%"> <frame src="frame_1.60%. Determine quantos % cada frame deverá ocupar na janela do monitor. Outra forma de distribuir os frames é usando valores percentuais.70%"> <frameset rows="50%.html"> </frameset> </html> Visualização .html"> </frameset> Visualização: Profª Ana Carolina Jaskulski http://anacarol.blog. <frameset cols="30%.20%"> Frames Combinados Os atributos "cols" e "rows" podem ser combinados simultaneamente criando janelas verticais e horizontais. frame_2. frameborder="0". As distribuições sempre deverão totalizar os 100%: <frameset cols="20%.20": e sem as bordas.10" frameborder="0"> <frame src="frame_1. <html> <frameset rows="10.html.br anaschneider@gmail.html"> </frameset> <frame src="frame_3.html"> <frame src="frame_2.*.html"> <frame src="frame_2.html"> <frame src="frame_3.*"> ou <frameset rows="*. mas usando o atributo "rows=10.com .15.*"> irá criar três janelas verticais ou horizontais equivalentes.25.*.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 "*".html).html e frame_3.127 Frames Horizontais O mesmo exemplo dado anteriormente (usando frame_1.

html"> <frame src="frame_2. bottom.50%"> <frame src="frame_1.70%" framespacing="15"> <frameset rows="50%. <frameset cols="30%. middle. left.br anaschneider@gmail. right" Ajusta o alinhamento do frame ou do texto. É utilizado dentro de: <frameset> align="top.blog.128 framespacing="valor" Este atributo altera a espessura das bordas deixando os frames mais separados entre si. frameborder="1 / 0" Ativa ou desativa a exibição de borda no frame relacionado.html"> </frameset> <frame src="frame_3.html"> </frameset> Visualização: <frame atributos> Define um quadro dentro de um conjunto <frameset>. src="URL" Profª Ana Carolina Jaskulski http://anacarol.com .

embora exista uma parte do texto que ficou oculta (no monitor de 14"). No frame 3 configurei frameborder=0. No frame 2 configurei scrolling="no". <frameset cols="30%. então ele aparecerá sem bordas.br anaschneider@gmail..html"> </frameset> <frame frameborder=0 src="frame_3. Ele criou um espaçamento nas bordas verticais e horizontais. scrolling="yes | no" Decide se haverá ou não barra de rolamento para permitir a visualização do conteúdo do quadro.html"> </frameset> Profª Ana Carolina Jaskulski http://anacarol. name="rótulo" Define um nome para o quadro que pode ser referenciado pelo atributo target do elemento <a>.70%"> <frameset rows="50%. sem borda.html"> <frame scrolling="no" src="frame_2.. sem barras de rolagem.50%"> <frame marginwidth="50" marginheight="50" src="frame_1. Por default.blog. marginwidth="número" Define um espaçamento horizontal em pixels entre a borda do quadro e o seu conteúdo.. </noframes> Caso o browser do usuário seja antigo ou não compatível com os recursos de frames. observe a diferença entre os frames 1 e 2. a barra de rolagem vertical não aparece. ou seja.129 informa a URL do documento que será exibido dentro do quadro. <noframes> . </noframes>.50%"> <frame marginwidth="50" marginheight="50" src="frame_1. um recurso muito utilizado é inserir uma mensagem de aviso entre <noframes>.html"> </frameset> Visualização: Neste exemplo. no frame 1 marginwidth=50 marginheight=50.. noresize impede que o quadro possa ser redimensionado pelo usuário.html"> <frame scrolling="no" src="frame_2.70%"> <frameset rows="50%.com . as barras de rolamento aparecem sempre que o conteúdo ultrapassa a área de visualização do browser. com borda e o frame 3. marginheight="número" Define um espaçamento vertical em pixels entre a borda do quadro e o seu conteúdo. <frameset cols="30%. observe como ficaram as margens do texto. informando o usuário.

htm: Este é o arquivo que irá conter a lista de arquivos à esquerda.0 ou do internet Explorer 3.netscape.com"> http://www.htm <html> <frameset cols=20%. Para montar essa estrutura vou criar mais três arquivos que me servirão como exemplos.0 através dos seguintes sites: <p> Microsoft: <a href="http://www. </center> </p> </noframes> Visualização . indice. É ele que irá aparecer no monitor com os dois frames verticais.htm"> </frameset> </html> Profª Ana Carolina Jaskulski http://anacarol.netscape. Sintaxe do arquivo matriz.htm: Este é o arquivo que sempre irá aparecer à direita quando entrarem na sua página juntamente com o arquivo índice à esquerda. ao clicar no índice do frame à esquerda ele mude apenas o frame à direita mantendo o resto da página inalterada.htm> <frame name="ladodireito" src="abertura. abertura. indice.html"> </frameset> <noframes> O seu browser n&atilde.130 <frame frameborder=0 src="frame_3. Os arquivos chamarão matriz.htm e abertura.com . frame2 e frame3.blog.microsoft.br anaschneider@gmail. Serão os nossos já conhecidos frame1.com"> http://home.com </a> </p> <p> Netscape: <a href="http://home.htm.htm. matriz.microsoft.com </a> </p> <p> <center> Clique no botão [Back] do seu browser para voltar.htm: Este e o arquivo que irá comportar os frames.o suporta frames.caso o browser não suportasse frames: Montando um Diretório com frames Montar uma estrutura com frames verticais de forma que.htm (dei aos arquivos nomes associados as suas funções pra ficar mais fácil o entendimento).*> <frame name="ladoesquerdo" src=indice. Sugerimos obter uma versão atualizada do Netscape Navigator 3.

com .htm"> abertura </a> <br> <a href="frame_1.htm> define qual arquivo irá aparecer à esquerda e <frame name="ladodireito" src=abertura.blog.htm"> Frame 3 </a> </center> </body> </html> Visualização: Sintaxe do abertura. qual arquivo irá aparecer a direita..htm <html> <head> <base target="ladodireito"> </head> <body bgcolor="#daa520"> <center> <h1> Diretório </h1> <br> Clique sobre a lista abaixo.131 Observe que o frame da esquerda terá 20% de tamanho <frameset cols=20%.htm"> Frame 1 </a> <br> <a href="frame_2. esta &eacute.htm"> Frame 2 </a> <br> <a href="frame_3. e abertura.htm>.*> 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! </body> </html> Profª Ana Carolina Jaskulski http://anacarol. Para criar o arquivo indice.. <br> <a href="abertura.htm: <html> <body> Oi.br anaschneider@gmail.

com . 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. por exemplo. Os arquivos frame_1.. ele nada mais é que os dois arquivos apresentados acima.blog. Profª Ana Carolina Jaskulski http://anacarol. src="URL" Endereço do documento que será exibido. Para entender melhor vamos ao exemplo prático. em um dos frames) Note como ficou fácil o entendimento analisando as sintaxes dos arquivos acima e depois verificando o exemplo.br anaschneider@gmail. </iframe > Define um frame embutido na página (como uma janela) e permite também a inclusão de outros documentos HTML. Visualização final (abrindo o matriz..132 Visualização: O parâmetro <base target="ladodireito"> acima.google. irá indicar ao browser onde os arquivos vinculados pelo comando <a href> devem ser carregados.com. width="número" Define a largura do frame. name="texto" Nome do frame.htm): <iframe> .

margnwidth="pixels" Define uma largura para a margem. barra de rolagem automática e uma borda.com . base. 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. no não permite. o valor 0 omite. Sintaxe: <center> <iframe src="background1.htm). marginheight="pixels" Define uma altura para a margem.htm" frameborder="1"> </iframe> </center> Profª Ana Carolina Jaskulski width="350" height="200" http://anacarol. esquerda e direita. scrolling="yes | no | auto" yes permite a rolagem do frame. Frameborder="1 | 0" O valor 1 insere uma borda no frame.br scrolling="auto" anaschneider@gmail. respectivamente. meio.133 height="número" Define a altura do frame.blog. Agora irei colocar um arquivo HTML dentro desta janela (o arquivo background. align="top | middle | bottom | left | right" Alinha o frame em relação a página no topo. Exemplo: uma janela no centro desta página utilizando o comando iframe.

</font> </marquee> </center> </body> </html> Profª Ana Carolina Jaskulski http://anacarol. pronto! Sintaxe deste exemplo: <center> <iframe src="banner.br anaschneider@gmail. Para criar o texto rolante coloquei uma frase qualquer dentro do comando marquee que por sua vez está dentro do arquivo banner.htm dentro da janela iframe.com .blog. depois inseri o arquivo banner.134 No próximo exemplo coloquei um texto rolante dentro da janela.htm" marginheight="2px"> </iframe> </center> width="400" height="20" scrolling="no" frameborder="1" 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.htm.

135 20 Botões Fechar a janela <html> <body> <FORM> <INPUT ONCLICK="window.print()> Profª Ana Carolina Jaskulski http://anacarol.close()> Fechar a janela </a> </body> </html> Visualização: <html> <body> Clique na figura para fechar a janela <A HREF=JavaScript:window.blog.close()> <IMG SRC="imagens/fechar.com .gif "> </a> </body> </html> Visualização: Imprimir a página <body> <FORM> <INPUT TYPE="button" ONCLICK="window.br anaschneider@gmail.print()"> </FORM> </body> NAME="Button" VALUE="Imprimir esta página" Visualização: <body> <A HREF=JavaScript:window.close()"> </FORM> </body> </html> TYPE="button" NAME="Button" VALUE="Fechar a janela" Visualização: <html> <body> <A HREF=JavaScript:window.

go(1)"> </FORM> </body> </html> NAME="Button" VALUE="Avançar" Visualização: <html> <body> <A HREF="javascript:window.com .print()> <IMG SRC="imagens/imprimir.blog.go(1)"> Avançar </a> </body> </html> Profª Ana Carolina Jaskulski http://anacarol.history.history.go(-1)"> </FORM> </body> NAME="Button" VALUE="Voltar" Visualização: <html> <body> <A HREF="javascript:window.history.history.go(-1)">Voltar</a> </body> </html> Visualização: <html> <body> <FORM> <INPUT TYPE="button" ONCLICK="window.br anaschneider@gmail.gif"> </a> </body> Visualização: "Voltar" e "Avançar" <body> <FORM> <INPUT TYPE="button" ONCLICK="window.136 Imprimir esta página </a> </body> Visualização: <body> <A HREF=JavaScript:window.

tem-se de renomear os botões. e o Botão 2 terá uma letra preta (color: 000000)e um fundo amarelo ouro (background-color: FFD700).br STYLE="cursor:hand. por uma questão de referência. anaschneider@gmail.href"> </body> </html> Fonte" ONCLICK="window.location. 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. Vamos modificar o botão 1 que terá uma letra azul escuro (color: 0000FF) e um fundo azul claro (background-color: 87CEFA).com . O botão 1 passará a ser o Cadê e o 2 será o Google. <html> <body> <FORM METHOD=GET ACTION="http://www.com. <html> <body> <INPUT TYPE="submit" background-color:87CEFA"> <INPUT TYPE="submit" background-color:FFD700"> NAME="button" VALUE="Botão 1" STYLE="color:0000FF.view-source:&quot.+ window.br/"> <INPUT TYPE="submit" NAME="button" VALUE="Cadê" Profª Ana Carolina Jaskulski http://anacarol. </body> </html> Visualização: Botões com Links Para endereçar os botões com links.location = Visualização: 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.blog.cade. NAME="button" VALUE="Botão 2" STYLE="color:000000.137 Visualização: Exibir Código Fonte <html> <body> <INPUT TYPE="button" VALUE="Código &quot.

type=="submit") event. Movimente o mouse sobre eles (sem clicar) e repare que eles parecem simples imagens.com. São eles que irão definir as cores iniciais do botão.srcElement if (mud. isso é.br/"> <INPUT TYPE="submit" NAME="button" VALUE="Cadê?" STYLE="cursor:hand.br/"> <INPUT TYPE="submit" NAME="button" STYLE="cursor:hand. não reagem a sobreposição do mouse. Observe os seletores . <body> <!-.138 color:0000FF. muda outras 2 cores //--> <CENTER> Profª Ana Carolina Jaskulski http://anacarol.google. color:000000.2"> function Troca(cor){ var mud=event.tagName=="INPUT"&&mud.br anaschneider@gmail. background-color:87CEFA"> <FORM METHOD=GET ACTION="http://www. background-color:87CEFA"> </FORM> </TD> <TD> <FORM METHOD=GET ACTION="http://www.blog. <body> <CENTER> <TABLE> <TR> <TD> <FORM METHOD=GET ACTION="http://www.troca1 e . color:0000FF.com.troca2.br/"> <INPUT TYPE="submit" NAME="button" VALUE="Google" STYLE="cursor:hand.cade. background-color:FFD700"> </FORM> </FORM> </body> </html> VALUE="Google" Visualização: Note que o tamanho do botão se ajusta automaticamente a quantidade de caracteres que tem na sua superfície. Primeiro: inserimos o código CSS/JavaScript.troca2 {background-color:gray} </STYLE> <SCRIPT LANGUAGE="JavaScript1. Para alinhar os botões lado-a-lado podemos recorrer aos recursos de <TABLE> (tabela). Então vamos fazê-los responder a sobreposição do mouse com alternamento de cores.srcElement.chama a funcao e muda qnd o mouse passar por cima.style.backgroundColor=cor } </SCRIPT> <!-.troca1 {background-color:black} .google.indica qual cor terão qnd abrir a página //--> <STYLE> . Se escolher duas cores diferentes tem que usar dois seletores com propriedades diferentes.com. 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.com .

cursor:hand" class="troca1"> </FORM> </TD> <TD> <FORM METHOD=GET ACTION="http://www.br anaschneider@gmail. Usamos o atributo padding para definir o distanciamento entre o texto (do botão) e suas bordas.br/" onMouseover="Troca('yellow')" onMouseout="Troca('red')"> <INPUT TYPE="submit" NAME="button" VALUE="Cadê" STYLE="color:pink.blog.cade. Os valores usados em padding são points (pt). manipulando a sua área de superfície.com . 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 Texturizados Geralmente a superfície do botão é muito pequena e isso dificulta uma definição clara de sua textura. centimeters (cm). Botão 1 sem padding (default).br/" onMouseover="Troca('blue')" onMouseout="Troca('green')"> <INPUT TYPE="submit" NAME="button" VALUE="Google" STYLE="color:white". padding:1cm"> </body> </html> Visualização: Profª Ana Carolina Jaskulski http://anacarol.com. padding:5px"> <INPUT TYPE="submit" NAME="button" VALUE="Botão 3" STYLE="color:000000. 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. inches (in). pixels (px) ou percentage (%).139 <TABLE> <TR> <TD> <FORM METHOD=GET ACTION="http://www.com.google.

o 2 estaria alto demais e o 3 muito curto.jpe)"> </body> </html> Visualização: 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. Profª Ana Carolina Jaskulski http://anacarol. <html> <body> <INPUT TYPE="submit" NAME="button" VALUE="Botão 1" STYLE="color:000000.jpe)"> <INPUT TYPE="submit" NAME="button" VALUE="Botão 2" STYLE="color:000000. <html> <body> <INPUT TYPE="submit" NAME="button" VALUE="Botão background:url(imagens/textura01. O Botão 1 está no tamanho default. bem como. background:url(imagens/textura23.jpe)"> <INPUT TYPE="submit" NAME="button" VALUE="Botão 3" STYLE="color:000000. background:url(F:\ana\apostila_html\imagens\fundo3.jpe)"> <INPUT TYPE="submit" NAME="button" VALUE="Botão width:60. Seus valores podem ser em pixel (px). As texturas que vamos usar são essas: (textura01..jpe) (fundo3.jpe) Através do atributo background:url(.blog.jpe)"> </body> </html> 1" STYLE="color:000000. centimeter (cm) e inches (in). background:url(F:\ana\apostila_html\imagens\textura23. padding:1cm. height:75. 2" STYLE="color:000000.com . padding:5px. background:url(imagens/fundo3.) inserimos dentro dos botões.jpe)"> <INPUT TYPE="submit" NAME="button" VALUE="Botão width:50. point (pt). height:20.jpe) (textura23. background:url(F:\ana\apostila_html\imagens\textura01. 3" STYLE="color:000000. Visualização: Repare que os botões tem que ser altos e largos o suficiente para que o texto caiba dentro.140 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.br anaschneider@gmail. Para manipular o tamanho. o formado quadrado ou retangular do botão usamos as propriedades width (largura) e height (altura)..

".blog. se colocarmos um botão menor. width:94.141 Botões com Imagens Vamos usar background para inserir uma imagem no botão. background:url(imagens/img.br/" title="Site"> <INPUT TYPE="submit" NAME="button" VALUE="&nbsp. Omitimos o texto de sua superfície configurando VALUE="&nbsp.gif). Se colocarmos um botão maior. cursor:hand"> </FORM> <FORM method="get" action="http://anacarol.background:url(F:\ana\img. Podemos colocar um título explicativo title="descrição no link . Profª Ana Carolina Jaskulski http://anacarol. height:90. Com a ausência do texto a figura deverá transmitir uma idéia de qual seria a função do botão." STYLE="color:000000. e quando o internauta colocar o mouse em cima abrirá uma tarja identificando seu destino.com . width:170. No exemplo.blog. ele será preenchido com repetições da figura. cursor:hand"> </FORM> </body> </html> Existe necessidade de adeqäar o tamanho de acordo com o tamanho real da figura.height:40.br anaschneider@gmail. <html> <body> <FORM method="get" action="http://anacarol.blog.gif). somente o primeiro botão tem tarja." STYLE="color:000000.br"> <INPUT type="submit" NAME="button" VALUE="&nbsp. logicamente. a figura não poderá ser totalmente vista. depois é só configurar as propriedades width & height para o tamanho da imagem.

Sign up to vote on this title
UsefulNot useful