cursowebdesigner_codificacao

Prévia do material em texto

C CO OD DI IF FI IC CA AÇ ÇÃ ÃO O
2 
Todos os Direitos Reservados ao Apostilando.com, proibido a reprodução total 
ou parcial deste material, com sanções previstas em lei. 
ÍNDICE 
ÍNDICE .....................................................................................................................................2 
INTRODUÇÃO..........................................................................................................................8 
Nomenclatura ................................................................................................. 8 
Sobre as linguagens de codificação e programação para WEB..................... 9 
HTML .......................................................................................................... 9 
XHTML ........................................................................................................ 9 
Javascript .................................................................................................. 11 
XML........................................................................................................... 12 
AJAX ......................................................................................................... 12 
HTML .....................................................................................................................................14 
Como se cria um documento HTML ............................................................. 14 
Tags ou comandos HTML ......................................................................... 15 
Estrutura Básica ........................................................................................... 16 
Comentários.............................................................................................. 17 
Parágrafos e quebras de linha...................................................................... 18 
O Comando <P> ....................................................................................... 18 
Alinhando parágrafos ................................................................................ 18 
O Comando <BR>..................................................................................... 19 
O Comando <HR>..................................................................................... 19 
Alterando o formato de linha de separação............................................... 19 
USANDO IMAGENS COMO LINHAS SEPARADORAS ........................... 19 
DIV ............................................................................................................ 20 
blockquote................................................................................................. 20 
Estilos de Texto e Fonte ............................................................................... 20 
Alterando o tamanho da fonte ................................................................... 21 
Size ........................................................................................................... 21 
Face .......................................................................................................... 21 
Color.......................................................................................................... 21 
Cabeçalhos................................................................................................... 22 
Alinhando cabeçalhos ............................................................................... 22 
Listas ............................................................................................................ 23 
Listas Ordenadas ...................................................................................... 23 
Listas Não ordenadas ............................................................................... 23 
Lista de Definição...................................................................................... 24 
Imagens........................................................................................................ 25 
urls e links..................................................................................................... 27 
URL........................................................................................................... 27 
Criando um Link com Arquivos Locais ...................................................... 28 
Usando uma Imagem como Hiperlink ....................................................... 28 
Vinculando Arquivos de outros diretórios.................................................. 28 
CRIANDO LINKS PARA SEÇÕES DE UMA PÁGINA .............................. 28
3 
Criando uma Âncora ................................................................................. 29 
Enviando E­Mail diretamente da Página HTML ........................................ 29 
Definindo Destinos .................................................................................... 29 
TABELAS...................................................................................................... 29 
Elementos básicos de tabelas ...................................................................... 30 
Parâmetros................................................................................................ 31 
Parâmetros do elemento <TABLE>........................................................... 31 
Parâmetros do elemento <TR> ................................................................. 32 
Parâmetros dos Elementos <TD> e <TH> ................................................ 32 
Frames.......................................................................................................... 34 
Como funcionam os frames ...................................................................... 34 
O Comando Document.............................................................................. 35 
O atributo <FRAMESPACING=valor>....................................................... 36 
O atributo <frameborder=1/0>................................................................... 36 
O comando <frame src>............................................................................ 37 
Ajustando as margens internas do Frame................................................. 38 
Barras de Rolagem e Redimensionamento dos Frames........................... 38 
Interligação de frames............................................................................... 38 
Criando a Estrutura dos Frames ............................................................... 39 
Criando o conteúdo do Menu.................................................................... 39 
IFRAME ........................................................................................................ 41 
META............................................................................................................ 42 
Informações específicas............................................................................ 42 
Variações do comando meta..................................................................... 43 
Multimídia ..................................................................................................... 43 
Consideração no uso de multimídia .......................................................... 44 
Folhas de estilo............................................................................................. 44 
Versões da CSS........................................................................................ 44 
CSS ­ 1...................................................................................................... 44 
CSS – Position (CSS­P)............................................................................ 44 
CSS – 2..................................................................................................... 45 
CSS – 3..................................................................................................... 45 
Regras da CSS .........................................................................................45 
Incluindo CSS no Documento ................................................................... 46 
Incluindo a CSS em uma página WEB...................................................... 46 
Incluindo a CSS em um site da WEB........................................................ 48 
Principais atributos de uma folha de estilo ................................................ 49 
Definindo classes ...................................................................................... 51 
Definindo IDS ............................................................................................ 51 
Definindo TAGS dentro do contexto.......................................................... 52 
Definindo a CSS para impressão .............................................................. 53 
Definindo Quebras de página para a impressão ....................................... 54 
Controles de Texto.................................................................................... 54 
Ajustando as Entrelinhas........................................................................... 55 
Definindo Segundo Plano.......................................................................... 55 
Bordas....................................................................................................... 56 
Envolvendo  um elemento com texto ........................................................ 56 
Posicionamentos....................................................................................... 57
4 
Posicionamento Estático ........................................................................... 57 
Posicionamento Relativo........................................................................... 57 
Posicionamento Absoluto.......................................................................... 58 
Posicionamento 3D ................................................................................... 58 
Próximo passo .............................................................................................. 58 
ADOBE DREAMWEAVER......................................................................................................59 
PROJETO DE UM SITE ............................................................................... 60 
Criando documentos..................................................................................... 70 
Propriedades da página ............................................................................ 72 
Publicando seu arquivo............................................................................. 76 
Interface........................................................................................................ 77 
Formas de visualização............................................................................. 79 
Visualização do Documento...................................................................... 80 
Paletas ...................................................................................................... 80 
Barra de Propriedades .............................................................................. 81 
TRABALHANDO COM TEXTOS .................................................................. 81 
Localizar e Substituir ................................................................................. 85 
Parágrafos e Layout .................................................................................. 86 
Parágrafos e Quebras de linha ................................................................. 86 
Títulos ....................................................................................................... 86 
Texto Pré­Formatado ................................................................................ 87 
Listas......................................................................................................... 87 
Recuando Texto........................................................................................ 88 
Caracteres Especiais em HTML................................................................ 88 
Linhas Horizontais..................................................................................... 89 
IMAGENS ..................................................................................................... 90 
Mapas de Imagem..................................................................................... 93 
Criando Rollovers simples......................................................................... 94 
Image Placeholder .................................................................................... 95 
Barras de Navegação................................................................................ 96 
Conteúdo multimídia..................................................................................... 97 
Inserção de Animações Flash (SWF)........................................................ 97 
Flash Vídeo ............................................................................................... 99 
Plug­ins ................................................................................................... 100 
Hyperlinks ................................................................................................... 101 
Links Absolutos e Relativos .................................................................... 101 
Os nomes de caminho absolutos ............................................................ 101 
Criando Links .......................................................................................... 102 
Âncoras ................................................................................................... 104 
Criando a âncora..................................................................................... 104 
Chamando o link da âncora .................................................................... 104 
Links para e­mail ..................................................................................... 105 
TABELAS.................................................................................................... 105 
Células .................................................................................................... 108 
Tabela Modificada................................................................................... 109 
FOLHAS DE ESTILO.................................................................................. 110 
Editando uma folha de Estilos................................................................. 113
5 
Criando uma classe................................................................................. 113 
CAMADAS E POSICIONAMENTO............................................................. 115 
Posicionamento CSS .............................................................................. 116 
Posicionamento absoluto versus relativo ................................................ 116 
Criando Camadas ................................................................................... 116 
Escolhendo as TAGS.............................................................................. 118 
Aninhando Camadas............................................................................... 119 
Criando layout com DIVS ........................................................................ 119 
FRAMES..................................................................................................... 122 
Criando os Frames.................................................................................. 122 
Salvando Frames .................................................................................... 125 
Alterando as propriedades de suas molduras ......................................... 125 
Criando links em Frames ........................................................................ 126 
Criando Frames Embutidos (IFRAME).................................................... 126 
FORMULÁRIOS .........................................................................................128 
Os elementos de um Formulário ............................................................. 128 
Tipos de campos de formulário ............................................................... 129 
Menu de Salto ......................................................................................... 133 
COMPORTAMENTOS................................................................................ 134 
Adicionando Comportamentos ................................................................ 134 
Pop­ups................................................................................................... 135 
Ocultar Mostrar camadas ........................................................................ 136 
Validando Formulários ............................................................................ 139 
SPY (AJAX no Dreamweaver) .................................................................... 141 
Spry Menu Bar ........................................................................................ 143 
Spry Accordion........................................................................................ 145 
Spry Effects............................................................................................. 146 
Appear/ Fade .......................................................................................... 146 
Blind ........................................................................................................ 147 
Grow/ Shrink ........................................................................................... 148 
Shake ...................................................................................................... 149 
Squish ..................................................................................................... 150 
Slide ........................................................................................................ 150 
Highlight .................................................................................................. 151 
EXTENSÕES DO DREAMWEAVER .......................................................... 152 
Instalando uma nova extensão ............................................................... 153 
CONCLUSÃO ............................................................................................. 154 
PHP ­ INTRODUÇÃO ...........................................................................................................156 
Ambiente para o PHP ................................................................................. 156 
Instalando o ambiente com EasyPHP..................................................... 156 
Sintaxe do PHP .......................................................................................... 162 
Variáveis em PHP ................................................................................... 163 
Comentários em PHP.............................................................................. 164 
Tipos de dados........................................................................................ 165 
Operadores................................................................................................. 165 
Operadores aritméticos ........................................................................... 165 
Operadores de comparação.................................................................... 167
6 
Operadores lógicos ................................................................................. 170 
Condições................................................................................................... 172 
Declarações condicionais........................................................................ 172 
A declaração if ........................................................................................ 172 
A declaração switch ................................................................................ 174 
Looping ................................................................................................... 176 
A declaração while .................................................................................. 176 
A declaração do ... while ......................................................................... 177 
A declaração for ...................................................................................... 178 
A declaração foreach .............................................................................. 179 
Formulários................................................................................................. 179 
Datas em PHP ............................................................................................ 181 
Funções...................................................................................................... 183 
Matrizes ...................................................................................................... 184 
Inclusão de Arquivos................................................................................... 185 
Cookies....................................................................................................... 186 
Parâmetros ................................................................................................. 189 
Envio de e­mails ......................................................................................... 191 
Banco de dados.......................................................................................... 192 
Sistema de Banco de Dados................................................................... 192 
Principais Módulos  de um Sistema de Banco de Dados........................ 192 
Tabela ..................................................................................................... 192 
Tipos de Campos .................................................................................... 193 
Chave Primária ....................................................................................... 194 
Exemplo de Tabelas................................................................................ 195 
Relacionamento entre tabelas................................................................. 195 
Princípios básicos da sintaxe...................................................................... 195 
O Painel PHP do Dreamweaver ................................................................. 197 
Conhecendo o painel PHP do Dreamweaver.......................................... 198 
Databases ............................................................................................... 199 
Bindings .................................................................................................. 200 
Server Behaviors..................................................................................... 200 
Components............................................................................................ 201 
Criando um banco de dados pelo phpMyAdmin ......................................... 202 
Conectando o Dreamweaver ao seu banco de dados ................................ 204 
Criando um sistema de cadastro............................................................. 205 
Vamos agora listar os dados cadastrados em nosso Banco................... 210 
Sistema de Login..................................................................................... 213 
MONTAGEM E PUBLICAÇÃO DO PROJETO PHOTOSHOP, FLASH E DREAMWEAVER 218 
Trabalhando com as imagens que constituirão o site................................. 218 
Montando o topo......................................................................................... 224 
Montando o Slide Show.............................................................................. 232 
Personalizando as miniaturas. ................................................................ 233 
Criação do Preloader .............................................................................. 237 
Montagem da página inicial ........................................................................241 
Montando a página inicial ........................................................................... 243 
Personalizando o CSS................................................................................ 244
7 
Página Interna ............................................................................................ 256 
Criando a galeria de fotos. ...................................................................... 257 
Criação de Camadas............................................................................... 260 
Utilizando o recurso de Mapas do Google .............................................. 264 
Criando o Formulário de Contato ............................................................ 266 
CUIDADOS NA CONSTRUÇÃO DE UM SITE......................................................................270 
Trace metas................................................................................................ 270 
Faça um esboço ......................................................................................... 270 
Divida o seu site ......................................................................................... 271 
Acesso direto a informação ........................................................................ 271 
Evite sites tipo carnaval .............................................................................. 271 
Não se prenda a plataformas...................................................................... 271 
Divulgue o seu site e observe os acessos.................................................. 271 
GLOSSÁRIO ........................................................................................................................271
8 
INTRODUÇÃO 
Na  primeira  parte  de  nosso  curso,  vimos  como  criar  objetos,  layouts  e 
animações para nossos projetos de WEB. 
Nessa  segunda  parte,  vamos  entender  como  fazer  para  que  os  gráficos  e 
animações criados possam ser adicionados a páginas, blogs, etc..., nesse novo 
tipo de mídia que é a WEB. 
Essa  segunda  parte  divide­se  em  uma  introdução  a  codificação  HTML,  pois 
mesmo utilizando­se editores de HTML visuais como o Adobe Dreamweaver®, 
é  de  extrema  importância  saber  os  principais  comandos  HTML  –  que  são 
chamados de TAGS. 
Na  segunda  parte  veremos  como  utilizar  o  Dreamweaver,  essa  excelente 
ferramenta  de  autoração  de  sites,  suas  principais  ferramentas  e 
funcionalidades,  a  integração  que  ele  tem  com  os  programas  aprendidos 
anteriormente até a publicação de um projeto criado anteriormente. 
Para  finalizar  teremos  uma  introdução  básica  à  linguagem  de  programação 
para WEB PHP e ao Actionscript. 
Nomenclatura 
Em nosso curso utilizaremos ícones para destacar itens importantes durante o 
curso. A nomenclatura segue abaixo: 
Representa que o assunto a ser tratado é de grande importância e 
requer muita atenção. 
Ferramenta ou comando já existente, mas que tenha mudança ou 
atualização. 
Ferramenta ou comando de versões anteriores do programa. 
Ferramenta ou comando disponível apenas na versão CS4 
(utilizada no curso).
9 
Assunto ou exemplo disponível em vídeo aula no CD­ROM. 
Arquivo a ser utilizado no exemplo da apostila, disponível no CD­ 
ROM. 
Sobre as linguagens de codificação e programação para WEB 
Atualmente  existem  diversas  linguagens  que  são  utilizadas  na WEB,  vamos 
aprender um pouco sobre elas e sua utilização. 
HTML 
HTML  (acrônimo  para  a  expressão  inglesa Hypertext Markup  Language,  que 
significa  Linguagem  de  Marcação  de  Hipertexto)  é  uma  linguagem  de 
marcação utilizada para produzir páginas na Web. Documentos HTML podem 
ser  interpretados  por  navegadores.  A  tecnologia  é  fruto  do  "casamento"  dos 
padrões HyTime e SGML. 
HyTime  é  um  padrão  para  a  representação  estruturada  de  hipermídia  e 
conteúdo  baseado  em  tempo.  Um  documento  é  visto  como  um  conjunto  de 
eventos  concorrentes  dependentes  de  tempo  (como  áudio,  vídeo,  etc.), 
conectados por hiper­ligações. O padrão é independente de outros padrões de 
processamento de texto em geral. 
SGML  é  um  padrão  de  formatação  de  textos.  Não  foi  desenvolvido  para 
hipertexto, mas tornou­se conveniente para transformar documentos em hiper­ 
objetos e para descrever as ligações. 
XHTML 
O XHTML, ou eXtensible Hypertext Markup Language, é uma reformulação da 
linguagem  de  marcação  HTML,  baseada  em  XML.  Combina  as  tags  de 
marcação HTML com regras da XML. Este processo de padronização tem em 
vista  a  exibição  de  páginas  Web  em  diversos  dispositivos  (televisão,  palm, 
celular, etc). Sua intenção é melhorar a acessibilidade. 
O  XHTML  consegue  ser  interpretado  por  qualquer  dispositivo, 
independentemente  da  plataforma  utilizada,  pois  as  marcações  possuem
10 
sentido  semântico  para  as  máquinas.  O  HTML  não  consegue  esta 
implementação. No entanto, não existem muitas diferenças entre o HTML e o 
XHTML. Para verificar se uma página XHTML está bem construída, o melhor 
método é validar o código através de uma aplicação Web disponibilizado pela 
organização W3C. 
A Recomendação XHTML original da W3C, XHTML 1.0, foi simplesmente uma 
reformulação  do  HTML  4.01  em  XML.  Existem  três  diferentes  "DTDs"  de 
XHTML 1.0, cada qual com equivalência a uma versão em HTML 4.01. 
• XHTML 1.0 Strict é o mesmo que HTML 4.01 Strict, mas segundo regras 
de sintaxe XML. 
• XHTML  1.0  Transitional  é  o  mesmo  que  HTML  4.01  Transitional,  mas 
segue as regras de sintaxe XML. Ele suporta tudo encontrado no XHTML 
1.0 Strict, mas também permite o uso de vários elementos e atributos que 
são julgados presencionais, para facilitar a transição de HTML 3.2 e mais 
recentes. Isso inclui <center>, <u>, <strike>, e <applet>. 
• XHTML  1.0  Frameset:  é  o  mesmo  que  HTML  4.01  Frameset,  mas 
segundo  as  regras  de  sintaxe  XML.  Ele  permite  a  definição  de  um 
frameset HTML, uma prática comum em versões de HTML anteriores ao 
HTML 4.01. 
A mais recente Recomendação XHTML da W3C é o XHTML 1.1: Module­based 
XHTML,  que  é  uma  reformulação  do  XHTML  1.0  Strict,  com  pequenas 
modificações,  usando  alguns  módulos  de  um  conjunto  definido  em 
Modularização  de  XHTML[1],  uma  Recomendação  W3C  que  cria  uma 
modularização de  frames, um padrão de módulos, e várias outras definições. 
Todas as ferramentas depreciadas de HTML, como elementos presencionais e 
framesets, e até mesmo os atributos  lang e o atributo de âncoras name, que 
ainda eram permitidos no XHTML 1.0 Strict, foram removidos desta versão. A 
apresentação  é  controlada  puramente  pelas  Folhas  de  Estilo  em  Cascata 
(CSS). Esta versão também permite suporte à marcação rubi, necessária para 
línguas do Extremo Oriente (especialmente CJK). 
Além  da  Modularização  de  XHTML  permitir  pequenas  ferramentas  XHTML 
serem reutilizadas por outras aplicações XML de uma maneira bem definida, e
11 
que  o  XHTML  seja  estendido  para  alguns  propósitos,  XHTML  1.1  adiciona  o 
conceito  de  um  documento  "estritamente  conformado":  esses  documentos 
definidos  nos  módulos  requeridos  para  XHTML  1.1.  Por  exemplo,  se  um 
documento  é  estendido  para  usar  o  módulo  XHTML  Frames  (frameset),  ele 
também pode ser descrito como XHTML 1.1, mas não estritamente conforme o 
XHTML  1.1.  Ao  invés  disso,  ele  deve  ser  descrito  como  um  XHTML  Host 
Language  Conforming  Document[2],  se  a  ferramenta  for  relevante  e 
necessária. 
Javascript 
JavaScript  é  uma  linguagem  de  programação  criada  pela  Firefox,  Opera 
Chrome  em  1995,  que  a  princípio  se  chamava  LiveScript,  para  atender, 
principalmente, as seguintes necessidades: 
• Validação de formulários no lado cliente (programa navegador); 
• Interação com a página. 
Assim,  foi  feita  como  uma  linguagemde  script.  Javascript  tem  sintaxe 
semelhante à do Java, mas é totalmente diferente no conceito e no uso. 
1.  Oferece tipagem dinâmica ­ tipos de variáveis não são definidos; 
2.  É interpretada, ao invés de compilada; 
3.  Possui ótimas ferramentas padrão para listagens (como as linguagens de 
script, de modo geral); 
4.  Oferece  bom  suporte  a  expressões  regulares  (característica  também 
comum a linguagens de script). 
Sua  união  com  o  CSS  é  conhecida  como  DHTML.  Usando  o  Javascript,  é 
possível  modificar  dinamicamente  os  estilos  dos  elementos  da  página  em 
HTML. 
Dada sua enorme versatilidade e utilidade ao  lidar com ambientes em árvore 
(como  um  documento HTML),  foi  criado  a  partir  desta  linguagem  um  padrão 
ECMA,  o  ECMA­262,  também  conhecido  como  ECMAScript.  Este  padrão  é 
seguido,  por  exemplo,  pela  linguagem  ActionScript  da  Adobe(Antigamente 
Macromedia, porém a empresa foi vendida a Adobe). 
Além  de  uso  em  navegadores  processando  páginas  HTML  dinâmicas,  o 
JavaScript é hoje usado  também na construção do navegador Mozilla, o qual
12 
oferece para a criação de sistemas GUI todo um conjunto de ferramentas (em 
sua versão normal como navegador, sem a necessidade de nenhum software 
adicional),  que  incluem  (e  não  apenas)  um  interpretador  de  Javascript,  um 
comunicador Javascript <­> C++ e um interpretador de XUL, linguagem criada 
para definir a interface gráfica de aplicações. 
O  uso  de  JavaScript  em  páginas  XHTML,  pelo  padrão  W3C,  deve  ser 
informado ao navegador da seguinte forma: 
<script type="text/javascript"> 
/* aqui fica o script */ 
</script> 
Caso contrário, o navegador irá interpretar o script como sendo código HTML, 
escrevendo­o na página. 
XML 
XML (eXtensible Markup Language) é uma recomendação da W3C para gerar 
linguagens de marcação para necessidades especiais. 
É um subtipo de SGML (acrônimo de Standard Generalized Markup Language, 
ou  Linguagem  Padronizada  de  Marcação  Genérica)  capaz  de  descrever 
diversos  tipos  de  dados.  Seu  propósito  principal  é  a  facilidade  de 
compartilhamento  de  informações  através  da  Internet.  Entre  linguagens 
baseadas  em  XML  incluem­se  XHTML  (formato  para  páginas  Web), 
RDF,SDMX  ,SMIL,  MathML  (formato  para  expressões  matemáticas),  NCL, 
XBRL, XSIL e SVG (formato gráfico vetorial). 
AJAX 
AJAX (acrônimo em língua inglesa de Asynchronous Javascript And XML) é o 
uso  metodológico  de  tecnologias  como  Javascript  e  XML,  providas  por 
navegadores,  para  tornar  páginas  Web  mais  interativas  com  o  usuário, 
utilizando­se de solicitações assíncronas de informações. AJAX não é somente 
um novo modelo, é  também uma  iniciativa na construção de aplicações Web 
mais dinâmicas e criativas. AJAX não é uma tecnologia — são realmente várias 
tecnologias  conhecidas  trabalhando  juntas,  cada  uma  fazendo  sua  parte,
13 
oferecendo novas funcionalidades. AJAX incorpora em seu modelo.: 
• Apresentação baseada em padrões, usando XHTML e CSS; 
• Exposição e interação dinâmica usando o DOM; 
• Intercâmbio e manipulação de dados usando XML e XSLT; 
• Recuperação assíncrona de dados usando o objeto XMLHttpRequest; 
• e JavaScript unindo todas elas em conjunto. 
O modelo clássico de aplicação web  trabalha assim: a maioria das ações do 
usuário  na  interface  dispara  uma  solicitação  HTTP  para  o  servidor  web.  O 
servidor  processa  algo  —  recuperando  dados,  realizando  cálculos, 
conversando  com  vários  sistemas  legados  —  e  então  retorna  uma  página 
HTML para o cliente. É um modelo adaptado do uso original da Web como um 
agente  de  hipertexto,  porém  o  que  faz  a  Web  boa  para  hipertexto  não 
necessariamente faz ela boa para aplicações de software. 
Esta  aproximação  possui muito  dos  sentidos  técnicos, mas  não  faz  tudo  que 
um  usuário  experiente  poderia  fazer.  Enquanto  o  servidor  está  fazendo  seu 
trabalho, o que o usuário estará fazendo? O que é certo, esperando. E a cada 
etapa em uma tarefa, o usuário aguarda mais uma vez. 
Obviamente,  se  nós  estivéssemos  projetando  a  Web  a  partir  do  zero  para 
aplicações, não  faríamos com que os usuários esperassem em vão. Uma vez 
que a interface está carregada, por que a interação do usuário deveria parar a 
cada  vez  que  a  aplicação precisasse de algo  do  servidor? Na  realidade,  por 
que o usuário deveria ver a aplicação ir ao servidor toda vez? 
A  maior  vantagem  das  aplicações  AJAX  é  que  elas  rodam  no  próprio 
navegador web. 
O desenvolvimento  do AJAX  foi muito  importante  para o  desenvolvimento  da 
Web  2.0  a  partir  de  2005,  levando  à  Internet  funções  inesperadas,  que 
passariam por ficção há um pouco período de tempo atrás. 
Estas  são  algumas  das  linguagens  utilizadas  em  uma  criação  WEB,  nos 
aprofundaremos  mais  no  HTML,  para  entender  o  significado  e  a  função  de 
cada TAG.
14 
HTML 
Apesar  da  palavra  linguagem,  que  leva  a  associação  com  linguagens  de 
programação,  ao  final  deste  curso  você  vai  perceber  que  gerar  documentos 
HTML é bastante fácil e parecido com formatação de textos. 
Para que qualquer computador pudesse entender os documentos HTML, sem 
as  complicações  que  trazem  os  caracteres  de  controles  e  coisa  do  tipo,  foi 
definido que estes documentos deveriam ser gerados no formato mais simples 
possível, o bom e velho “txt”. 
Desta  forma,  documentos  HTML  podem  ser  gerados  por  qualquer  editor  de 
textos, desde que gravados no formato texto e com extensão.Htm ou .html. 
Como se cria um documento HTML 
Uma página Web é  composta  de  textos  e  comandos especiais  (tags). Assim 
como  qualquer  linguagem,  o  programador  deve  escrever  o  código­fonte 
seguindo  as  regras  da  linguagem.  Esse  código­fonte  é  posteriormente 
interpretado pelo browser, que se encarregará de executar os comandos (tags) 
do código para formatar e acessar recursos da Web. 
O  código  fonte  pode  ser  escrito  usando­se  o  mais  simples  dos  editores  de 
texto. Até  o  programa Bloco de Notas pode  ser  usado para  esta  tarefa. Mas 
existem editores WYSIWYG (What you see is what you get, ou o que você vê é 
o que realmente obtém) como exemplo podemos citar o Dreamweaver. 
Existem ainda editores não WYSIWIG, onde você tem que construir o código, 
mas  ele  completa  muitos  comando,  como  exemplo  podemos  citar  o  Sothink 
HTML  Editor  (disponível  na  pasta  do  Dreamweaver),  e  na  própria  Internet 
existem vários destes editores gratuitos.
15 
Tags ou comandos HTML 
As TAGS normalmente são especificadas em pares, delimitando um texto que 
sofrerá algum tipo de formatação. 
As TAGS são identificadas pelo sinais < > ou </ >. 
Entre os sinais <> são especificados os comandos propriamente ditos. No caso 
de  tags  que  necessitam  envolver  um  texto,  sua  finalização  deve  ser  feita 
usando­se  a  barra  de  divisão  /  ,  indicando  que  a  TAG  está  finalizando  a 
marcação de texto. 
Os  principais  elementos  de  página  HTML  são,  títulos,  textos,  parágrafos, 
imagens e links, responsáveis pela chamada de outras páginas para a tela: 
Título: É o texto que aparece na barra de título do browser. 
Imagem: São figuras, desenhos e fotos usados para ilustrar a página. 
Texto: É a informação mais comum dentro de uma página. Pode ser formatado 
através de comandos. 
Link: É um trecho que aparece destacado do restante do  texto, normalmente 
sublinhado e com outra cor. Ao clicar no Link, o browser acessa outra região da 
página  atual  ou  uma  página  localizada  em  qualquer  lugar  na  Internet.  Uma 
figura também pode ser usada como link, ou seja, clicando na figura saltamos
16 
para outro local. 
Cabeçalho:  São  linhas  de  texto  com  tamanhos  especiais.  Existem  seis 
tamanhos de cabeçalhos.Estrutura Básica 
A estrutura básica de um documento HTML é a seguinte: 
<HTML> 
<HEAD> 
<TITLE> Título do Documento</TITLE> 
</HEAD> 
<BODY> Aqui  deverá  ser  digitado e  criado a maioria  dos  itens  que  irão 
aparecer em sua Home Page 
</BODY> 
</HTML> 
Vamos ver um pouco sobre os elementos básicos do HTML: 
<HTML></HTML>:  Indicam  respectivamente  o  início  e  o  fim  do  documento. 
Todo o resto deve estar entre estas marcas. 
<HEAD></HEAD>: Delimitam a  seção  de  cabeçalho do documento.  Trata­se 
da primeira seção do documento. 
<TITLE></TITLE>:  Indicam  o  título  do  documento,  que  será  apresentado  na 
barra  superior  do  browser.  Estas  marcas  devem  constar  da  seção  de 
cabeçalho. 
<BODY></BODY>:  Corpo  do  documento.  Entre  estas  marcas  estará  o 
conteúdo a ser apresentado,  textos, cores,  imagens, etc. Este elemento pode 
conter cinco parâmetros opcionais: 
BACKGROUND:  configura  especificar  uma  imagem  como  fundo  da  página. 
EX.  <BODY  BACKGROUND=  “ fundo.gif”   >  configura  uma  página  com  a 
imagem fundo.gif como fundo. 
BGCOLOR:  Configura  a  cor  de  fundo  da  página.  EX:  <BODY  BGCOLOR= 
“White”  > configura uma página com fundo branco (padrão). 
TEXT: configura a cor padrão do texto da página. EX: <BODY TEXT= “ Black”
17 
> configura uma página com texto em cor preta. (padrão). 
LINK, ALINK, VLINK: configura as cores dos links da página. ALINK configura 
a cor do link ativo, isto é quando é clicado, e VLINK configura a cor de um link 
já  visitado.  EX:  <BODY  LINK=”Blue”   VLINK=”Purple”   ALINK=”Red” > 
configura uma página com links azuis,  links ativos vermelhos e links visitados 
roxos. 
Esta  estrutura  inicial  é  simples,  no  entanto  existem  detalhes  que  devem  ser 
respeitados: 
Todas as marcas apresentadas são do  tipo  início­fim, ou seja,  funcionam em 
pares. 
Em cada documento HTML só deve haver uma marca de cada tipo acima. 
Existe uma ordem seqüencial lógica entre as marcas. 
Estes  detalhes  devem  ser  respeitados,  senão  o  browser  não  conseguirá 
apresentar o documento. 
Como HTML não é uma linguagem de programação, você não será avisado de 
erros que tenha cometido na edição do seu documento. 
Criando o primeiro documento HTML 
<HTML> 
<HEAD> 
<TITLE>Este é o meu primeiro documento em HTML</TITLE> 
</HEAD> 
<BODY BGCOLOR=”Red”  TEXT=”White” > 
Agora  no  corpo  do  texto  vou  digitar  o  meu  primeiro  texto  em  Html,  no 
momento não usarei nenhuma formatação especial aqui dentro. 
</BODY> 
</HTML> 
Comentários 
Podemos  também  acrescentar  comentários  ao  nosso  código  HTML,  estes 
comentários  não  aparecem  para  no  navegado  e  somente  no  código,  são 
representados  pela  seguinte  TAG  <!­  ­  inicia  o  comentário  //­  ­  >,  finaliza  o
18 
comentário. 
São utilizados para ocultar scripts dentro do código Html, pois caso o script não 
possa ser processado o mesmo será ignorado pelo navegador. 
Caracteres especiais 
Existem caracteres que não podem ser obtidos através de teclado. Eles podem 
ser  inseridos em sua página através da especificação de um código especial 
que o browser interpreta e substitui por um caractere específico. Esses códigos 
podem ser obtidos utilizando­se uma nomenclatura definida pela norma ISO. 
Alguns dos símbolos mais utilizados no HTML é o &nbsp;  que  corresponde 
ao espaço do teclado, já que na HTML ele considera apenas um espaço. Para 
uma  tabela  mais  completa  visite  o  link 
http://www.w3.org/TR/html401/sgml/entities.html 
Parágrafos e quebras de linha 
Ao contrário dos editores de texto comum, nos quais você insere uma quebra 
ou avanço de linha  toda vez que pressiona a  tecla ENTER, em um programa 
HTML  é  necessário  colocar  um  comando  específico  para  que  o  browser 
entenda que você deseja mudar de linha e iniciar uma nova linha ou começar 
um  novo  parágrafo.  Existem  dois  comandos  para  criar  quebras  de  linha  e 
novos parágrafos. São os comandos <P> e <BR> 
O Comando <P> 
Para forçar um novo parágrafo, ou seja, avançar uma linha em branco e iniciar 
o  texto na segunda  linha após o  final do parágrafo anterior deve ser usado o 
comando <P>. 
Alinhando parágrafos 
O  Comando  <P>  inicia  um  novo  parágrafo  onde  o  texto  é  automaticamente 
alinhado pela margem esquerda da tela. Através do parâmetro ALIGN, pode­se 
mudar  o  alinhamento  de  forma  que  o  texto  do  parágrafo  inteiro  fique 
centralizado  ou  alinhado  à  direita.  Nesse  caso,  deve­se  usar  um  par  de 
comandos <P> envolvendo o parágrafo.
19 
ALIGN=CENTER  Centraliza o texto. 
ALIGN=RIGHT  Alinha pela margem direita 
ALIGN=JUSTIFY  Alinha pelas duas margens 
ALIGN=LEFT  Alinha pela margem esquerda (padrão) 
O Comando <BR> 
O comando <P> insere uma linha em branco no seu local ou na linha seguinte 
à qual ele foi inserido, caso esteja no meio de uma linha de texto e não em seu 
final. O comando <BR> tem como função avançar para a linha imediatamente 
após  àquela  em  que  ele  se  encontra,  sem,  contudo,  deixar  uma  linha  em 
branco. 
O Comando <HR> 
O comando <HR>  tem como  finalidade  inserir  uma  linha  divisória  na posição 
em  que  foi  especificado.  Seu  uso é  recomendado  para  criar  uma  divisão  na 
página. 
Alterando o formato de linha de separação 
As  linhas  criadas  pelo  comando  <HR>  podem  Ter  o  seu  tamanho  alterado 
pelos parâmetros SIZE e WIDTH. O parâmetro SIZE altera a espessura (altura) 
da linha, deixando­a mais grossa em função do valor especificado. Esse valor é 
expresso em pixels. 
A  largura ou comprimento da  linha é alterada pelo parâmetro WIDTH e pode 
ser expresso em pixels, sendo que, nesse caso, o tamanho da linha é fixo ou 
utiliza uma porcentagem relativa à largura da janela. Assim, seu tamanho varia 
em função da largura da janela. Veja o código abaixo: 
USANDO IMAGENS COMO LINHAS SEPARADORAS 
Em  vez  de  usar  o  comando  <HR>  como  separador,  podemos  usar  uma 
imagem com o comando <IMG>. Assim como o comando HR, podemos usar 
os parâmetros WIDTH e HEIGHT para alterar o tamanho da imagem.
20 
DIV 
A Tag <DIV></DIV> envolve uma área do  texto ou divisão que pode  receber 
parâmetros específicos de alinhamento, como é o caso de ALIGN, para alinhar 
o texto. Podemos envolver vários parágrafos com o elemento DIV 
blockquote 
O  comando  Blockquote  permite  dar  recuos  de  parágrafos  aos  parágrafos,  e 
pode ser cumulativo 
Estilos de Texto e Fonte 
Assim como no editor de textos, você pode criar uma série de efeitos no texto, 
alterando a forma ou o tipo da fonte. Todos os comandos que alteram o estilo 
do  texto  são  do  tipo  contêiner  ou  liga  desliga,  ou  seja,  precisam  ser 
especificados  em  pares,  marcando  o  início  e  fim  do  texto  que  sofrerá  a 
formatação. 
Os principais comandos de estilo de texto são: 
Comando  Sintaxe  Função 
Negrito  <B>Texto</B>  Aplica o estilo Negrito 
Itálico  <I>Texto</I>  Aplica o estilo Itálico 
Sublinhado  <U>Texto</U>  Aplica  o  estilo  sublinhado(Não 
funciona em alguns Browsers 
Strong  <Strong>Texto</Strong 
> 
Similar ao Negrito 
Typerwriter  <TT>Texto</TT>  Deixa o  texto com espaçamento 
regular 
Big  <BIG>Texto</BIG>  Aumenta a fonte e aplica negrito 
Small  <SMALL>Texto</SMAL 
L> 
Reduz e altera a fonte 
Sobrescrito  <SUP>Texto</SUP>  Eleva o texto e diminui seu corpo 
Subscrito  <SUB>Texto</SUB>  Rebaixa  o  texto  e  diminui  seu 
corpo 
Pulsante  <BLINK>Texto</BLINK 
> 
Faz com que o texto pisque (Não 
funciona no IE 4.
21 
Alterando o tamanho da fonte 
Um  dos  recursos  de  tratamento  do  texto  mais  interessantes  da  linguagem 
HTML é a possibilidade de alterar o tamanho, a cor e o tipo da fonte do texto 
utilizado. O comando responsável por isso é o comando <FONT>, que é do tipo 
liga desliga. 
Size 
O  parâmetro  size  especifica  o  tamanho  da  fonte  utilizada.  Osvalores 
permitidos vão de 1, o menor até 7, o maior. O padrão é 3. Se for especificado 
um  número  antecedido  pelo  sinal  de  adição  ou  de  subtração,  o  tamanho  da 
fonte atual será aumentado ou diminuído nesse valor. Por exemplo, se a fonte 
atual é 3 e for especificado <FONT SIZE=+2> o texto será exibido no tamanho 
5.  Se  o  valor  for  especificado  sem  sinal,  a  fonte  será  exibida  no  tamanho 
especificado. 
Face 
Esse  parâmetro  permite  que  seja  escolhida uma  fonte  diferente  para  o  texto. 
Podemos especificar várias fontes, de maneira que, se o sistema não possuir a 
primeira opção, a segunda é carregada. 
Se não for encontrada nenhuma das fontes especificadas, o texto é exibido na 
fonte padrão. 
Color 
Esse parâmetro especifica a cor do  texto. Seu valor pode ser especificado no 
formato hexadecimal, RGB ou através de um nome predefinido de cores como 
mostra a tabela abaixo: 
Cor  Código  Cor  Código 
Aqua  #70DB93  Blue  #0000FF 
Black  #000000  Cyan  #00FFFF 
Fúcsia  #FF00FF  Gray  #C0C0C0 
Green  #00FF00  Lime  #32CD32 
Brown  #800000  Navy  #23238E
22 
Olive  #808000  Red  #FF0000 
Silver  #E6E8FA  Teal  #008080 
White  #FFFFFF  Yellow  #FFFF00 
Não  exagere  na  quantidade  cores  e  tamanho  das  letras  do  texto  ou  a  sua 
página parecerá uma mensagem enviada por código. 
Cabeçalhos 
Outra  forma muito usada para mudar o  tamanho da  letra e aplicar um efeitos 
em  textos é utilizando cabeçalhos. A  linguagem HTML possui seis comandos 
de cabeçalho de <H1> até <H6>. Além do  tamanho diferenciado, o comando 
cabeçalho insere uma  linha em branco antes e depois da linha que contém o 
comando. Eles são perfeitos para criar  títulos e  iniciar seções dentro de uma 
página. O comando <H1> possui o maior tamanho enquanto que <H6> possui 
o menor tamanho de fonte. 
Alinhando cabeçalhos 
Como padrão um cabeçalho gerado pelo comando <Hn> é sempre posicionado 
no lado esquerdo da linha. Usando o parâmetro ALIGN pode­se centralizar ou 
ajustar o cabeçalho à direita da linha. 
Veja o código: 
<HTML> 
<HEAD> 
<TITLE>Alinhando Cabeçalhos</TITLE> 
</HEAD> 
<BODY> 
<H2> Cabeçalho sem alinhamento especial</H2> 
<HR> 
<H2 ALIGN=CENTER>Cabeçalho com alinhamento centralizado</H2> 
<HR> 
<H2 ALIGN=RIGHT>Cabeçalho com alinhamento à direita</H2>
23 
</BODY> 
</HTML> 
Listas 
Na  linguagem HTML  existem  elementos  específicos  para  a  criação  de  listas, 
que podem ser listas ordenadas (OL), listas sem ordenação (UL), ou listas de 
definições  (DL).  Um  detalhe  interessante  é  que  podem  ser  criadas  listas 
aninhadas, ou seja, listas dentro de listas. A seguir, veremos as características 
de cada umas delas. 
Listas Ordenadas 
<OL  TYPE=...START=...>...</OL>  são  os  elementos  delimitadores  de  listas 
ordenadas  (OL – Ordered Lists). A  estrutura  das  listas  ordenadas é bastante 
simples: entre os elementos de início e fim, os itens da lista são definidos pelos 
elementos  <LI></LI>.  Os  itens  são  apresentados  em  linhas  consecutivas  e 
precedidos por uma numeração atribuída pelo paginador. O parâmetro opcional 
TYPE  define  como  será  o  tipo  de  numeração  de  cada  linha.  Os  tipos 
disponíveis  são:  “A”  (A,B,...Z),  “a”(a,b,...z),  “I”  (I,II,III,  etc.),  “i’  (i,ii,iii,etc),  e  “1” 
(1,2,3,etc).  Se  omitido,  é  utilizado  o  tipo  padrão  (1,2,3,  etc).  O  parâmetro 
opcional START define a partir de que elemento a numeração deve se iniciar. 
Ele  deve  receber  como  valor  um  número  indicando  em  que  posição  a 
contagem deve se iniciar. 
Listas Não ordenadas 
<UL>...</UL> são os elementos delimitadores de  listas sem ordenação  (UL – 
Unordered Lists). A estrutura das  listas sem ordenação é a mesma das  listas 
ordenadas,  sendo  que,  na  apresentação,  os  itens  serão  precedidos  por  um 
marcador (bullet). No caso de listas sem ordenação aninhadas (listas dentro de 
listas),  o  paginador  utilizará  um  marcador  (bullet)  diferente  para  os  itens  de 
cada lista. 
Como  já foi visto acima <LI>...</LI> é o elemento que define um item de uma
24 
lista ordenada ou sem ordenação. O seu conteúdo pode ser texto, outras listas, 
imagens, links ,etc. 
Lista de Definição 
<DL>...</DL> são as marcas que englobam uma lista de definições, ideais para 
a criação de glossários e coisas do gênero. A estrutura desta lista é diferente 
das  outras,  pois  existem  dois  elementos  –  o  termo  a  ser  definido  (DT),  e  a 
definição  propriamente  dita  (DD).  Na  apresentação  cada  termo  aparece  em 
uma linha, e a respectiva definição na linha seguinte, deslocada para a direita. 
<HTML> 
<HEAD> 
<TITLE>Listas de definição</TITLE> 
</HEAD> 
<BODY> 
<H2>Listas de definição</H2> 
<DL> 
<DT>HTML</DT> 
<DD>Hiper Text Markup Language</DD> 
<DT>OL</DT> 
<DD>Listas ordenadas com numeração.</DD> 
<DT>UL</DT> 
<DD>Listas sem ordenação</DD> 
<DT>LI</DT> 
<DD>Elemento da Lista</DD> 
</DL> 
<H2>Listas  não  ordenadas  combinadas<BR>com  uma  lista  de 
Definição</H2> 
<DL> 
<DT>Parâmetro do elemento OL</DT> 
<DD> 
<UL>
25 
<LI>TYPE</LI> 
<LI>START</LI> 
</UL> 
</DD> 
<DT>Parâmetros do elemento IMG</DT> 
<DD> 
<UL> 
<LI>SRC</LI> 
<LI>ALT</LI> 
<LI>BORDER</LI> 
<LI>WIDTH</LI> 
<LI>HEIGHT</LI> 
<LI>VSPACE</LI> 
<LI>HSPACE</LI> 
</UL> 
</DD> 
</DL> 
</BODY> 
</HTML> 
Imagens 
Você  pode  obter  uma  imagem  através  de  uma  cópia  feita  a  partir  de  uma 
página da  Internet,  através de CDs ROMs, Scanners,  etc.  ou  pode criá­las a 
partir de um programa de imagens. 
O comando img 
Esse  comando  define  a  posição  de  uma  imagem  que  aparece  no  corpo  do 
documento. 
<IMG  SRC=”URL”  WIDTH=”...”  HEIGHT=”…”  BORDER=”…”  ALT=”Texto” 
VSPACE=”…” HSPACE=”…”> 
ALIGN=| “BOTTOM” | “TOP” | “MIDLE”
26 
SRC=”URL  É  o  nome  da  figura,  se  estiver  no 
mesmo diretório  do programa ou  seu 
caminho completo. 
ALT=”texto”  Exibe  o  texto  quando  o  browser  não 
encontra  a  imagem,  ou  uma  legenda 
quando  o  cursor  do  mouse  passa 
sobre  ela  mostrando  o  texto 
especificado. 
ALIGN=”TOP”  | 
“MIDLE” | “BOTTOM” 
Especifica  o  alinhamento  da  imagem 
relativamente à  linha de  texto onde é 
exibida. 
ALIGN=”LEFT”  | 
“RIGHT” 
Especifica  o  alinhamento  da  imagem 
relativamente  às  bordas  laterais  da 
janela 
WIDTH=”número”| 
”número%” 
Esse  parâmetro  especifica  a  largura 
de  exibição  da  imagem 
independentemente  do  seu  tamanho 
físico.  Se  a  imagem  for  maior  ou 
menor  do  que  o  valor  especificado, 
ela será esticada ou comprimida para 
caber  no  espaço especificado. Se  for 
o  colocado  o  sinal  de  porcentagem, 
ele é relativo à largura da janela. 
HEIGHT=”número”  Especifica  a  altura  de  exibição  da 
imagem  independentemente  de  seu 
tamanho  físico.  Se  a  imagem  for 
maior  ou  menor  do  que  o  valor 
especificado. 
BORDER=”número”  Especifica  em  pixels  a  largura  da 
borda  da  imagem.  O  valor  zero 
remove a imagem
27 
VSPACE=”número”  Determina  em  pixels  o  espaço  que 
deve ser deixado em branco na parte 
de  cima  e  na  parte  de  baixo  da 
imagem. 
HSPACE=”número”  Determina  em  pixels  o  espaço  que 
deve  ser  deixado  em  branco  nas 
laterais da imagem 
Com  exceção  do  parâmetro  SRC,  todos  os  demais  são  opcionais.  Portanto, 
para  exibir  uma  imagem  chamada  foto.gif  que  esteja  no mesmo  diretório  do 
programa deve ser especificado o seguinte comando: 
IMG SRC=”foto.gif” 
urls e links 
Até  agora  você  aprendeu  como  criar  documentos  interessantes,  mas  que 
poderiam ter sido criados em um processador de textos. 
O Principal atrativo da  Internet é a criação de documentos com o conceito de 
hipertexto, ou seja  , um documento que se liga a outros por meio de vínculos 
especiais  chamados  hyperlinks.  Com  esse  conceito  você  pode  criar 
documentos quefaçam referência a um endereço qualquer do computador ou 
da Web e permitam ao usuário acessar essas referências, não importando se 
elas  estão  em  outra  página WEB,  no  seu micro  ou  em  qualquer  servidor  da 
rede. 
URL 
A  Internet  usa  uma  nomenclatura  específica  para  indicar  o  endereço  de  um 
documento. Chamada de Uniform Resource Locator (Localizador Universal de 
Recursos)  ou  URL,  essa  nomenclatura  inclui  três  componentes.  Ela  deve 
conter o protocolo do documento, (como por exemplo http. Gopher ou WAIS), o 
endereço servidor e a localização do arquivo, usando a seguinte sintaxe: 
Protocolo://servidor.NomeDoArquivo
28 
http://www.apostilando.com/index.htm 
http: É o protocolo 
www.apostilando.com: É o nome do servidor 
index.htm: É o nome do documento que será acessado. 
Criando um Link com Arquivos Locais 
Vincular um texto com uma página local é uma tarefa bastante simples. Você 
precisa  apenas  especificar  o  nome  completo  do  arquivo  que  será  chamado, 
utilizando o comando <A> de âncora. Veja a sintaxe básica deste comando: 
<A HREF=”...”NAME”...”>caracteres</A> 
Principais parâmetros: 
HREF=”URL”  Especifica o  endereço do URL ao 
qual  o  link  está  associado.  Pode 
ser  usado  dentro  e  fora  do 
documento. 
NAME=”String”  Especifica o nome da seção de um 
documento  à  qual  um  link  de 
hipertexto faz referência. 
Usando uma Imagem como Hiperlink 
Você  pode  usar  uma  imagem  como  hiperlink  envolvendo­a  com  o  comando 
<A></A>.  Em  vez  de  especificar  um  texto  de  hiperlink,  você  usa o  comando 
<IMG> para colocar a imagem. 
Vinculando Arquivos de outros diretórios 
Você pode especificar o endereço de outros diretórios usando um esquema de 
caminhos parecido com DOS. Existe uma diferença entre esses caminhos. Na 
Web você deve inverter a barra de espaços, usando a barra / no lugar da barra 
\, para separar diretórios. 
CRIANDO LINKS PARA SEÇÕES DE UMA PÁGINA
29 
Para  dominar  o  uso  do  hipertexto,  o  programador  em  HTML  deve  conhecer 
bem  o  funcionamento  do  comando  <A>  e  dois  de  seus  parâmetros  da 
linguagem. Um é o <H HREF>, usado para criar o link em si, e o outro é o <A 
NAME>,  que  cria  âncoras  ou  endereços  de  seções  de  um  documento, 
permitindo seu endereçamento. 
Criando uma Âncora 
Para  interligar uma página, você precisa criar uma âncora  (também chamado 
de  indicador  em  alguns  editores  de  HTML)  no  inicio  de  cada  seção  do 
documento. Essa âncora recebe um nome que será mencionado pelo link que 
acessará. 
<A NAME=”#nome da âncora”>Texto Opcional</A> 
Iremos criar agora uma página Web com exemplos de links e âncoras : 
Neste  código  criamos  primeiramente  os  links  com  as  âncoras  da  página,  e 
depois  as  âncoras,  aproveitamos  também  e  trabalhamos  com  inserção  de 
imagens na página: 
Enviando E­Mail diretamente da Página HTML 
Você pode acionar  o  programa padrão  de e­mail  diretamente  de uma página 
HTML usando uma  variação  do  comando <A>,  que  usa a  opção MAILTO no 
lugar da URL. 
<A HREF=”MAILTO:faleconosco@provedor.com.br”>Tire as suas dúvidas </A> 
Definindo Destinos 
Podemos também definir destinos para os nossos links,(recurso muito utilizado 
em frames) através do parâmetro target: . E podem ser _self: Mesmo quadro, 
_top: página inteira, _blank: nova janela e _parent: quadro pai. 
TABELAS 
Assim com as listas que nós já vimos, no HTML existem elementos específicos 
para  a  criação  e  formatação  de  tabelas.  O  recurso  de  tabelas  é  muito 
interessante e muito usado nas páginas Web.
30 
O conceito é o mesmo conhecido usualmente: ela  tem  linhas e colunas, e na 
interseção delas estão as células. 
Na linguagem HTML, você pode inserir nas células tudo o que normalmente faz 
parte  do  corpo  de  um  documento,  como  textos,  links,  imagens,  listas  e  até 
outras tabelas. 
Elementos básicos de tabelas 
<TABLE>...</TABLE> 
São  as  marcas  que  englobam  a  definição  de  uma  tabela.  Todas  as  demais 
marcas referentes a  tabelas – linhas e células – somente serão consideradas 
se incluídas entre <TABLE>e </TABLE>. 
<CAPTION>...</CAPTION> 
Trata­se de um elemento opcional que define o título da tabela, e deve constar 
entre as marcas que definem a tabela, mas separado das marcas que definem 
linhas  e  colunas.  Sem  parâmetros,  o  título  á  apresentado acima  da  tabela  e 
centralizado. 
<TR>...</TR> 
Table Row ou Linha de tabela 
Este  é  o  elemento  utilizado  na  definição  de  linhas  de  tabelas.  Tabelas  são 
definidas em linhas, sendo as linhas compostas de células. O número de linhas 
de uma tabela corresponde ao número de <TR></TR>. 
<TD>...</TD> 
Table Data ou Dados de Tabela 
Marcas  que  delimitam  as  células  que  compõem  as  linhas,  e  assim  sendo 
devem estar inseridas entre as marcas de linhas. Uma célula pode conter tudo 
o  que  normalmente  consta  do  corpo  de  um  documento  HTML  –  Links, 
referências a imagens, textos, e até tabelas. 
O  alinhamento  padrão  de  uma  célula  é  à  esquerda  horizontalmente  e 
centralizado verticalmente, e caso o número de células varie de uma linha para 
outra, as linhas com menos células são completadas à direita com células em 
branco. 
<TH>...</TH>
31 
Table Header ou Cabeçalho de Tabela 
Elemento  que  define  células  de  cabeçalho.  Células  de  cabeçalho  têm 
características idênticas a células de dados definidas por <TD>, a não ser pelo 
alinhamento  horizontal,  que  é  centralizado,  e  pela  utilização  de  fonte  em 
Negrito. 
Parâmetros 
Estes  elementos  básicos,  entretanto,  possuem  alguns  parâmetros  que 
permitem um maior controle sobre alguns detalhes da apresentação da tabela. 
Parâmetros do elemento <TABLE> 
BORDER 
A apresentação padrão de uma tabela é sem bordas. A presença do parâmetro 
BORDER indica  justamente que deve ser desenhada uma borda em torno de 
cada célula da tabela. Pode ser usado para indicar a espessura da borda (em 
pixels), com BORDER=X. Exemplo: <TABLE BORDER=2> 
BORDERCOLOR 
Permite  que  se  coloque  cores  nas  bordas  de  sua  tabela  e  possui  duas 
variações: bordercolorlight e bordercolordark, permitindo que se coloque duas 
cores de bordas em volta de sua tabela. 
WIDTH 
Especifica  a  largura  da  tabela,  que  pode  ser  definida  em  pixels  ou  em 
percentual referente à largura da janela. Caso não seja especificado, o próprio 
browser  se  encarrega  de  determinar  a  largura mais  adequada,  baseado  nos 
textos inseridos nas células. Exemplo: <TABLE WIDTH=75%> 
CELLSPACING 
Define  o  espaço  entra  as  células,  ou  seja, a  largura  das  linhas  de grade  (as 
bordas que envolvem as células). É especificado em pixels. Exemplo: <TABLE 
CELLSPACING=3> 
CELLPADDING 
Determina,  em  pixels,  o  espaço  entre  o  conteúdo  e  as  bordas  da  célula. 
Exemplo: <TABLE CELLPADING=6> 
ALIGN
32 
Configura o alinhamento horizontal da tabela em relação aos outros elementos 
da  página.  Pode  conter  os  valores  LEFT  (esquerda),  CENTER  (centro)  ou 
RIGHT( direita). Este parâmetro não funciona em alguns browsers. 
BGCOLOR 
Define a cor de fundo da tabela. 
Parâmetros do elemento <TR> 
ALIGN 
Configura o alinhamento horizontal dos elementos contidos nas células de uma 
linha.  Pode  conter  os  valores  LEFT,  CENTER  OU  RIGHT.  Se  omitido,  o 
alinhamento  é  à  esquerda  para  as  células  de  dados  (<TD>),  e  centralizado 
para células de cabeçalho (<TH>). 
VALIGN 
Define o alinhamento vertical dos elementos contidos nas células de uma linha. 
Pode  conter  os  valores  TOP(topo),  MIDLE(meio)  ou  BOTTOM  (fundo).  Se 
omitido, o alinhamento é ao meio. 
BGCOLOR 
Define a cor de fundo da linha. 
Parâmetros dos Elementos <TD> e <TH> 
ALIGN 
Configura  o  alinhamento  horizontal  dos  elementos  contidos  na  célula.  Pode 
conter os valores LEFT, CENTER OU RIGHT.Se  omitido,  o alinhamento  é  à  esquerda  para  as  células  de  dados  (<TD>),  e 
centralizado para células de cabeçalho (<TH>). 
VALIGN 
Define o alinhamento vertical dos elementos contidos na célula. Pode conter os 
valores  TOP  (topo),  MIDLE(meio)  ou  BOTTON(fundo).  Se  omitido,  o 
alinhamento é ao meio. 
BGCOLOR 
Define a cor de fundo da linha. 
NOWRAP
33 
Quando  este  parâmetro  encontra­se  associado  a  uma  célula,  o  browser 
entende que o  texto dentro daquela célula não pode ser dividido em mais de 
uma linha. Este parâmetro deve ser utilizado com cuidado, para evitar colunas 
demasiadamente largas. 
COLSPAN 
Especifica o número de colunas de uma tabela a ser ocupado por uma célula. 
Deve  ser  utilizado  para  expandir  uma  célula  horizontalmente.  Se  atribuirmos 
COLSPAN=2 a uma célula, ela ocupará o seu espaço e o espaço de mais uma 
célula para a direita, assim esta linha deverá possuir uma célula a menos que 
as demais, já que uma de suas células “vale”por duas. 
ROWSPAN 
Define  o  número  de  linhas  a  ser  ocupado  por  uma  célula. Deve  ser utilizado 
para expandir uma célula verticalmente (para baixo). Ao atribuir ROWSPAN=2 
para uma célula, diminuirá em 1 o número de células da linha de baixo. 
Vamos a um exemplo: 
<html> 
<head> 
<title>Tabelas</title> 
</head> 
<body> 
<table  border="10"   width="100%"   bordercolorlight="#000080"  
bordercolordark="#0000FF"> 
<tr> 
<th width="100%"  colspan="3"> 
<p align="center">Título da Tabela</th> 
</tr> 
<tr> 
<td width="33%">Texto1</td> 
<td width="33%">Texto 2</td> 
<td width="34%">Texto 3</td> 
</tr>
34 
</table> 
</body> 
</html> 
Atenção:  Além  de  criar  tabelas  para  exibir  dados  como  numa  planilha,  os 
elementos de  tabelas são usados para  formatar páginas de uma  forma geral. 
Eles são usados para criar  textos com elementos na  tela de  forma mais  fácil, 
para delimitar áreas de uma página e diversas outras utilidades que você nem 
imagina. 
Por exemplo, podemos usar tabelas para garantir que o texto fique na posição 
A da tela e a imagem fique na posição B, independente da resolução de vídeo 
do  visitante  de  sua  página.  Utilizando  uma  tabela  de  tamanho  definido, 
podemos evitar que a página fique grande demais para resoluções de 640x480, 
podemos simular colunas de texto, entre outras aplicações. 
Frames 
O recurso de frames (janelas), compatível com a versão 2 e superiores do  e do 
IE, permite ao desenvolvedor criar páginas HTML que podem ser visualizadas 
simultaneamente na janela do browser. Com esse recurso, a janela do browser 
é dividida em frames que compartilham o espaço disponível. 
Sem o recurso de frames, para visualizar três páginas diferentes chamadas A. 
HTM,  B.HTM  e  C.HTM,  o  usuário  precisaria  acessá­las  individualmente  por 
meio  de  uma  página  inicial  que  contivesse  um  menu  ou  então  através  da 
especificação de seu URL 
Usando  o  recurso  de  frames,  podemos  exibir  mais  de  um  frame  (janela) 
simultaneamente.  Em  nosso  projeto  iremos  usar  um  dos  frames  para  exibir 
permanentemente  o  conteúdo  da  página  do  menu  e  a  outra  para  exibir  o 
conteúdo dos capítulos, facilitando a navegação pelo manual. 
Como funcionam os frames 
Ao contrário da maioria dos recursos da linguagem HTML, o uso frames requer 
um planejamento  prévio. Esse  planejamento  consiste  na  criação da estrutura
35 
dos frames, na qual você irá especificar a quantidade de frames, a disposição 
que  eles  terão  na  tela,  a  largura  e  a  altura  de  cada  frame,  assim  como  o 
conteúdo  que  será  exibido  em  cada  um  deles.  Trabalhar  com  frames  exige 
duas etapas. Na primeira você cria o layout dos frames, na segunda, define seu 
conteúdo. 
O Comando Document 
O uso de frames exige a criação de um documento HTML especial que contém 
todas as definições dos  frames. Você pode considerá­lo como um documento 
mestre. Esse documento se diferencia dos demais documentos HTML, pois ele 
não usa os comandos <BODY> e </BODY>. Em seu lugar é usado o comando 
<FRAMESET></FRAMESET>.  Dentro  desse  par  de  comandos  são 
especificados  todos  os  atributos  dos  frames  que  serão  criados.  O  frameset 
define as características gerais dos frames, como sua quantidade e disposição 
horizontal  e  vertical.  Cada  frame  especificado  precisará  de  outro  comando 
chamado <FRAME> para definir suas características individuais. 
O Comando FRAMESET 
Este comando é do  tipo contêiner, ou seja deve ser aberto e  fechado. Veja a 
sintaxe deste comando: 
<FRAMESET 
COLS=tamanho 
FRAMEBORDER=1/0 
FRAMESPACING=spacing 
ROWS=tamanho></FRAMESET> 
Cols=tamanho 
O  atributo  cols  é  usado  para  criar  um  documento  com  frames  dispostos  em 
colunas. Nele deverá ser especificada a largura de cada coluna do documento. 
Pode  ser  especificado  um  valor  padrão  para  todas  as  colunas  ou  tamanhos 
individuais.  Os  valores  podem  ser  especificados  em  pixels,  percentagem  ou 
tamanho relativo. 
Usando valores em pixels 
<FRAMESET COLS=”100,300,200”>
36 
Usando valores relativos 
Para dividir os frames igualmente pela largura da janela do browser, a melhor 
opção é usar um asterisco (*) para cada coluna 
<FRAMESET COLS=*,*,*> 
Usando valores percentuais 
A terceira forma de determinar a largura de uma coluna é especificar os valores 
em forma de percentual, totalizando 100 por cento 
<FRAMESET COLS=25%,50%,25% 
Os diferentes valores podem ser combinados entre si. Por exemplo, para criar 
um frameset com três colunas de modo que a primeira ocupe 25%, a terceira 
tenha 100 pixels e a outra ocupe o espaço restante, pode­se usar o seguinte 
comando: 
<FRAMESET COLS=25%,*,100> 
ROWS=tamanho 
O atributo ROWS funciona da mesma forma que o atributo COLS, só que cria 
os  frames  horizontalmente.  Tudo  o  que  foi  exposto  para  COLS,  aplica­se  a 
ROWS. 
Combinando ROWS e COLS 
Pode­se  combinar  a  criação de  frames,  usando  os  dois  atributos. Você pode 
criar  um  janela  dividida  em  dois  frames  horizontais,  onde  o  primeiro  deles  é 
dividido em duas colunas. Para que isso seja possível, basta aninhar conjuntos 
de comandos <FRAMESET> 
O atributo <FRAMESPACING=valor> 
Esse atributo  tem como  finalidade alterar o espaço entre os  frames, dando a 
impressão  de  que  a  borda  dos  frames  foi  aumentada.  Contudo,  ele  apenas 
distancia um frame de outro pela quantidade de pixels especificada. 
O  código  pode  ser  o  mesmo  do  exemplo  anterior.  A  penas  a  primeira  linha 
deve ser alterada para: 
<FRAMESET ROWS=50%,50% FRAMESPACING=10> 
O atributo <frameborder=1/0> 
Esse atributo tem a finalidade de eliminar as bordas dos frames. Como padrão,
37 
ele usa o valor 1, que exibe a borda. Se for especificado o valor 0, as bordas 
serão omitidas. A omissão de bordas é interessante para criar a ilusão de uma 
única janela, onde as partes dessa janela são independentes das outras. Outro 
efeito  interessante  é  a mudança  da  cor  de  fundo  de  cada  janela,  permitindo 
dividir a tela em áreas coloridas distintas. 
O comando <frame src> 
Sintaxe: 
<FRAME ALIGN=posição 
FRAMEBORDER=1/0 
MARGINHEIGHT=altura 
MARGINWIDTH=largura 
NAME=nome 
SCROLLING=yes/no 
SRC=endereço 
Align=posição 
Ajusta o alinhamento do frame ou do texto. Os valores permitidos são: 
TOP  O texto ao redor do frame é alinhado pela parte superior do 
frame. 
MIDDLE  O texto ao redor do frame é alinhado pelo meio do frame. 
BOTTO 
M 
O texto aos redor do frame é alinhado pela parte inferior do 
frame. 
LEFT  O  frame  é  alinhado  à  esquerda,  deixando  o  texto 
posicionado no seu lado direito. 
RIGHT  O frame é alinhado à direita, deixando o texto posicionado 
no seu lado esquerdo 
Frameborder=0/1 
Idêntico ao atributo de mesmo nome do comando <FRAMESET>, ele ativa ou 
desativa a exibição de borda para o frame atual.Marginheight=altura
38 
Especifica a altura da margem superior e inferior do frame em pixels. 
Marginwidht=largura 
Especifica a largura das margens esquerda e direita do frame em pixels. 
Name=nome 
Atribui  um  nome  para  o  frame,  de  maneira  que  possa  ser  identificado  e 
localizado para carregar documentos. 
Noresize 
Esse atributo evita que o frame seja redimensionado pelo usuário. 
Scrolling=yes/no 
Esse atributo, quando ajustado para o valor no, não permite que o frame tenha 
barras de rolagem quando a janela for redimensionada. 
SRC=endereço 
Endereço  deve  ser  substituído  pelo  nome  ou  URL  do  documento  que  será 
exibido no frame. 
Ajustando as margens internas do Frame 
O  desenvolvedor  pode  criar  uma  margem  interna  para  o  frame,  de  forma  a 
distanciar  o  conteúdo  da  janela  da  sua  borda.  Para  criar  um  margem  nas 
laterais da janela, deve ser usado o comando MARGINWIDTH. Para criar uma 
margem  na  parte  superior  e  outra  no  rodapé  do  frame,  deve  ser  usado  o 
atributo MARGINHEIGHT.  O  tamanho  da margem  deve  ser  especificado  em 
pixels. 
Barras de Rolagem e Redimensionamento dos Frames 
Como  padrão,  os  frames  possuem  os  atributos  que  permitem  seu 
redimensionamento e a inclusão automática de barras de rolagem quando suas 
dimensões ficam menores do que o conteúdo a ser exibido. Para alterar essas 
características, você deve usar os comandos SCROLLING E NORESIZE. 
No  caso do  comando SCROLLING,  deve  ser  atribuído  a  ele  o  valor  no  para 
desativar as barras de rolagem. 
Interligação de frames 
Até agora você viu como criar um conjunto de frames para exibir documentos 
independentes  um  do  outro.  Nosso  projeto  inicial  previa  a  criação  de  um
39 
manual eletrônico usando  frames para mostrar um  índice permanente na  tela 
enquanto  outra  janela  exibia  o  conteúdo  selecionado.  Para  isso  iremos 
aprender mais alguns itens. O primeiro deles é a atribuição de um nome para o 
frame  e  o  segundo  é  direcionar  o  carregamento  de  um  documento  em  uma 
janela específica. 
Para indicar ao browser em qual janela os documentos dos capítulos deverão 
ser carregados, devemos  incluir no documento que contém os  links um novo 
comando chamado <BASE TARGET=”nome da  janela”> contendo o nome da 
janela­alvo. 
Criando a Estrutura dos Frames 
Esse arquivo contém a definição de dois frames, um para o menu e outro para 
os capítulos. O frame que receberá o nome de “textos”, e nenhum arquivo será 
previamente  carregado.  O  frame  que  conterá  o  menu  principal  recebera  o 
nome de “menu”. Nessa situação, apenas o nome do frame “textos” tem de ser 
obrigatoriamente especificado. 
Criando o conteúdo do Menu 
O  arquivo  de  menu  contém  os  links  para  os  capítulos  do  manual.  Nesse 
documento, você deve incluir o comando <BASE TARGET>, que é responsável 
por indicar ao browser onde os arquivos vinculados pelo comando <A HREF> 
devem ser carregados. Em nosso exemplo, ele orienta o browser a carregar os 
links  no  frame  chamado  “textos”.  Se  esse  comando  for  omitido,  os  capítulos 
serão carregados no frame do menu. 
Os códigos dos documentos ficarão da seguinte maneira e salve o documento 
como menu: 
<HTML> 
<HEAD> 
<TITLE>Menu Principal</TITLE> 
<BASE TARGET=" textos"> 
</HEAD> 
<BODY BGCOLOR="FFFFEE"> 
<CENTER>
40 
<H1>Menu Principal</H1> 
<UL> 
<LI><A HREF=A.HTM>Introdução</A> 
<LI><A HREF=B.HTM>Capítulo 1</A> 
<LI><A HREF=C.HTM>Capítulo 2</A> 
<LI><A HREF=D.HTM>Capítulo 3</A> 
<LI><A HREF=E.HTM>Capítulo 4</A> 
<LI><A HREF=F.HTM>Capítulo 5</A> 
</UL> 
</CENTER> 
</BODY> 
</HTML> 
Script para o topo.htm 
<html> 
<head> 
<title>Topo</title> 
</head> 
<body> 
<div align="center"> 
<img src=" images/principal1.gif"> 
</div> 
</body> 
</html> 
Crie  também  um  arquivo  com  a  estrutura  básica  do  HTML  e  salve­o  com  o 
nome de nada. 
Veja agora o código para o frame: 
<html> 
<head> 
<title>Frames</title>
41 
</head> 
<frameset rows="64,*"> 
<frame name=" topo"  scrolling="no"  noresize src==" topo.htm"> 
<frameset cols="150,*"> 
<frame name="menu"  src="menu.htm"> 
<frame name=" textos"  src=” nada.htm” > 
</frameset> 
<noframes> 
<body> 
<p>Esta  página  usa  quadros  mas  seu  navegador  não  aceita 
quadros.</p> 
</body> 
</noframes> 
</frameset> 
</html> 
No código acima se pode ver também que foi utilizada a TAG <NOFRAMES> 
</NOFRAMES> esta TAG é  utilizada para  avisar o  usuário que  o  navegador 
dele não suporta frames, então pode­se colocar qualquer texto ou figura HTML 
para  o  usuário  (  Atualmente  praticamente  todos  os  navegadores  suportam 
FRAMES). 
IFRAME 
O IFRAME é um frame interno que só pode ser utilizado em IE de versão 4 ou 
superior, ele está facilitando a troca de informações em sites de que precisam 
mudar textos, pois ele pode ser colocado no documento e conforme altera­se o 
documento do IFRAME ele altera na página, ele possui os mesmos parâmetros 
dos Frames. 
<html> 
<head> 
<title>IFRAME</title>
42 
</head> 
<body bgcolor="#000000"  text="#FFFFFF"> 
<p>&nbsp;</p> 
<p align="center">Utilizando IFRAME</p> 
<div align="center"> 
<center> 
<table border="0"  width="80%"  height="193"> 
<caption>&nbsp;</caption> 
<tr> 
<td width="100%"  height="187"  align="center"> 
<p align="center"><IFRAME SRC=" textos.htm"></iframe></td> 
</tr> 
</table> 
</center> 
</div> 
</body> 
</html> 
META 
O comando META é um dos comandos pouco explorados da linguagem HTML. 
Contudo,  é  responsável  por  importantes  aspectos  de  uma  página  HTML. 
Através  dele,  podemos  criar  documentos  dinâmicos,  informações  especificas 
que serão usadas pelo servidor, em resposta a uma solicitação do usuário, ou 
pelos mecanismos de busca na Internet. 
Informações específicas 
Esse  comando  das  linguagem  HTML  pode  ser  usado  para  criar 
metainformação ou variáveis, e seus conteúdos descrevem características do 
documento HTML, como o nome do autor, data de vencimento ou criação do 
documento, palavras­chave, etc. 
<META  HTTP­EQUIV=resposta  CONTENT=descrição  NAME=descrição 
URL=url> 
O  comando  META  deve  ser  especificado  entre  os  comandos  <HEAD>
43 
</HEAD>. 
Variações do comando meta 
Usar  o  recurso  do  autocarregamento  é  indicado  quando  você  deseja  exibir 
alguma  informação  inicial  e  depois  outra  informação.  Por  exemplo  o  usuário 
acessa  uma  página  que  exibe  informações  sobre  a  empresa,  depois  de  um 
tempo carrega outra página. Isso é possível da seguinte forma: 
<META HTTP­EQUIV=”Refresh” CONTENT=”5 ; URL=arquivo.htm”> 
Outro  grande  uso  do  comando  META  é  para  que  possa  ser  usado  para  as 
consultas  em  mecanismos  de  busca,  ou  seja  os  mecanismos  verificam  no 
comando META de sua página qual é a sua descrição e quais são as palavras 
chaves do site. 
<meta name="description" content="Site sobre Informática"> 
<meta name="keywords" content="Photoshop, Flash, Fireworks, Dreamweaver, 
HTML"> 
Podemos  também  especificar  o  autor  e  programa  gerador  do  código  HTML 
através do comando META 
<meta name="author" content="Marcos Paulo Furlan"> 
<meta name="generator" content="HTML­Kit"> 
Multimídia 
O  principal  elemento  de  sucesso  da  Internet  é  o  hiperlink.  Que  permite  a 
criação  de  documentos  com  ligações  para  outros  contidos  em  qualquer 
computador ligado à Internet. A maioria dos usuários que acessa a Internet faz 
isso a partir de ambientes gráficos, como o Windows, e conhecendo o Windows 
todos  sabemos  de  sua  capacidade  em  trabalhar  com  multimídia.  Esse  é  o 
propósito  deste  capítulo,  vamos  aprender  a  trabalhar  com  os  elementos 
multimídia em nossas páginas. 
Os principais elementos multimídia para uma aplicação são: 
Fotos ou imagens estáticas 
Animação
44 
Áudio 
Vídeo 
Consideração no