Antes de começarmos a estudar HTML, é necessário que se entenda alguns princípios básicos que envolvem esta linguagem.

1.Introdução

Antes de começarmos a estudar HTML, é necessário que se entenda alguns princípios  básicos que envolvem esta linguagem. 1.1. Internet Mais que um modismo a Internet tornou­se um fenômeno. Conectando mais de um  milhão de computadores e cerca de 40 milhões de usuários, espalhados em diversos  países, valores estes que mudam a cada dia, sem dúvida não dar para ficar de fora  desta teia. Enfim, se formos descrever Internet, a melhor é definirmos como comunicação. Com  ela encontramos serviços e facilidades, notícias e atualidades, ou se preferir como é o  caso de muitas pessoas, um excelente local para encontrar amigos, jogos, bate papo e  muito   mais,   como   lojas   virtuais,   onde   você   pode   comprar   ou   vender   com   toda  segurança. 1.2. Histórico da Internet A Internet teve início em 1969 sob o nome de ARPANET (USA). Composta de quatro  computadores tinha como finalidade, demonstrar as potencialidades na construção de  redes usando computadores dispersos (espalhados) em uma grande área. A idéia foi  boa, e em 1972, 50 universidades e instituições militares já possuíam conexões. Hoje é uma arquitetura de software e hardware que se comunicam entre si que são  mantidas   por   organizações   comerciais   e   governamentais.   Mas   uma   das   principais  características da Internet, é que não possui dono. 

Para organizar todas estas trocas de informações, existem associações e grupos que se  dedicam  para  suportar,   ratificar  padrões e  resolver  questões  operacionais,   visando  promover os objetivos da Internet.

1.3. A WORD WIDE WEB(WWW)

As pessoas costumam falar em Internet e Web, será a mesma coisa? Será apenas uma  gíria da moçada do bate papo? Ou existe realmente um conceito científico para isto? Para   resolver   esta   dúvida   e   também   para   começarmos   a   entender   esta   série   de  definição de conceitos, vamos partir do seguinte princípio:

A   Word   Wide   Web   (Ampla   Rede   Mundial)   é   conhecida   como   WWW,   uma   nova  estrutura   de   navegação   pelos   diversos   itens   de   dados   em   vários   computadores  diferentes. O modelo WWW é tratar todos os dados da Internet como hipertexto, isto é,  vinculações entre as diferentes partes do documento para permitir que as informações  sejam exploradas interativamente e não apenas de uma forma linear.

aumentaram muito a popularidade da Internet e graças as suas potencialidades. 

Hoje podemos ver nas páginas da Internet, documentos formatados (cores, efeitos e  etc...), escutar música, assistir a vídeos, e muito mais.

Enfim   a   Web   é   a   interface   gráfica   da   Internet,   pois   podemos   acessar   a   Internet,  transferir arquivos( Processo a qual chamamos UpLoad), e realizar outras operações  básica sem precisar de uma interface gráfica.

Para concluir só estamos de fato usando a Web, quando estamos navegando fazendo  uso das Home Pages para acessar um site, ou seja, um endereço único que contêm a  Home   Page   (página   inicial)   e   outras   páginas   que   fazem   parte   deste   conjunto   de  páginas e todas em um único código fonte escrito em uma linguagem chamada HTML.

1.4. Web

Web é o diminutivo para World Wide Web. Termo usado originalmente para a parte da  Internet que surgiu no início da década de 90, composta por informações dispostas na  forma de textos, imagens e sons, pela qual se navega com a ajuda de Browsers. Antes,  trocava­se  basicamente mensagens.  As  duas  redes  acabaram se fundindo  e hoje a  palavra Web é usada como sinônimo da própria Internet ("Grande Rede").

1.5. Hipertexto

Originalmente, Hipertexto é qualquer informação de texto em um computador, que  contenha saltos para outras informações.

Os   documentos   visualizados   através   dos   Browsers   são   escritos   em   Hipertextos,  utilizando­se   uma   linguagem   especial   chamada   HTML   (HyperText   Markup  Language).

Através   de   hipertexto   pode­se   "navegar"   de   forma   especial   através   de   elementos  especiais   chamados   "links"   para   outros   documentos   ou   para   partes   do   mesmo  documento. Um documento "não­hipertexto" permite somente que se navegue em uma sequência,  percorrendo seu conteúdo para frente e para trás. O hipertexto nas páginas da Web foi expandido para incluir hyperlinks a partir de  texto, de uma figura, de um elemento gráfico, de mapas de imagens, som e até mesmo  animações. Para se ter uma idéia de hipertexto, basta visualizar o sistema de "Ajuda" do Microsoft  Windows. 1.6. Links ou Hyperlinks Link é um ponto de acesso ou salto até um local na mesma pasta de trabalho ou em  outro arquivo, representado a partir de texto colorido ou sublinhado, de uma figura, de 

um elemento gráfico ou de um mapa de imagens. Você pode clicar em um link para saltar até um local em um arquivo em seu sistema  local, em um compartilhamento de rede na World Wide Web ou em uma Intranet. 1.7. Home Page Home Page é um conjunto de "páginas", documentos diponíveis na Web, interligados  entre si (através de links). O termo Home Page também é usado para designar a  "página principal" de um conjunto de documentos. Um conjunto de "páginas"  também  é chamado de Site.

Alguns Servidores da Web reservam  index.htm  como o nome da home page (página 

principal), enquanto outros a denominam como default.htm.  1.8. Site Palavra em inglês  que significa local, lugar. Na Internet, designa um conjunto de  páginas que representa uma pessoa, instituição ou empresa na rede. 1.9. Browsers (Navegadores da Web) Browsers são softwares que lêem e interpretam arquivos HTML (Hyper Text Markup  Language)  enviados na World Wide Web, formata­os em páginas da Web e os exibe ao  usuário.   Navegadores   da   Web   também   podem   executar   som   ou   arquivos   de   vídeo  incorporados em documentos da Web se você dispuser do hardware necessário. Existem Browsers para todos os gostos. Os mais utilizados, o Internet Explorer e o  Mozilla Firefox, vêm acompanhados de outros programas para Internet, como o leitor  de Correio Eletrônico (e­mail). Existem outras opções de Browsers, basta escolher um  deles e partir tranquilo pelos "mares" da Internet. 1.10. Protocolo

Protocolo   é   um   conjunto   de   regras   estabelecidas   com   o   objetivo   de   permitir   a  comunicação entre computadores. É um método de acesso a um documento ou serviço  através da Internet, como File Transfer Protocol (FTP) ou Hypertext Transfer Protocol  (HTTP). Também denominado tipo. 1.11. Protocolo HTTP (HyperText Transfer Protocol) HTTP (Protocolo de Transferência de Hipertexto) é um protocolo da Internet utilizado  pelos computadores ligados à Web para comunicar­se entre si, ativa os navegadores da  Web para recuperarem informações de servidores da World Wide Web. O protocolo permite a um usuário usar um programa cliente para entrar em um URL  (ou   clicar   em   um   hyperlink)   e   recuperar   texto,   elementos   gráficos,   som   e   outras  informações digitais de um servidor da Web.

Endereços URL de recursos HTTP começam com http://.

1.12. Protocolo FTP (File Transfer Protocol)

FTP(Protocolo   de   Trasferência   de   Arquivo)   é   um   protocolo   que   possibilita   a  transferência de arquivos de um local para outro pela Internet.

Normalmente, os sites têm áreas públicas de FTP, permitindo que os usuários façam  download de programas por esse processo.

Protegido   por   senhas,   o   FTP   também   é   utilizado   para   atualizar   a   distância   sites  localizados em empresas hospedeiras.

URLs de arquivos em servidores FTP começam com ftp://.

1.13. URL (Uniform Resource Locator ­  Localizador de Recursos Uniforme) Um dos principais objetivos do projeto da WWW era o desenvolvimento de um padrão  de referência a um item independente de seu tipo (som, filme, imagem, etc.). Para este  objetivo foi desenvolvido a URL (Uniform Resource Locator). URL (Uniforme Resource Locator, numa tradução literal, Localizador Uniforme de  Recursos) é uma seqüência de caracteres que fornece o endereço Internet de um Site  da Web ou um recurso da World Wide Web, juntamente com o protocolo (como FTP ou  HTTP) através do qual o site ou o recurso é acessado.

A  parte  inicial  do  URL (a  que  termina  com  os  dois  pontos) indica  qual protocolo  Internet está sendo usado.

As duas barras indicam que o que vem a seguir é o endereço de um servidor válido da  Internet ou localização simbólica. Pode ser colocado um texto 

(www.xyz.com.br, por exemplo) ou o endereço IP do site.

1.13.1. URL Absoluto 

O URL absoluto inclui um protocolo, como "http", local da rede, além de caminho e nome de arquivo opcionais.

Exemplo: http://www.xyz.com.br/treinamento/cursos.htm , é um URL Absoluto

1.13.2. URL Relativo 

Uma referência relativa assume-se que a máquina e diretório do item já estão sendo usados e apenas necessita-se indicar o nome do arquivo desejado (ou posivelmente subdiretório e arquivo).Um URL relativo inclui um protocolo.

Exemplo:

abaixo da pasta atual.

1.13.3. Endereço

Endereço é o caminho até um objeto, documento, arquivo, página ou outro destino.

Um endereço pode ser um URL (Uniforme Resource Locator - Localizador Uniforme de Recursos) ou um caminho de rede UNC (Universal Naming Convention - Convenção Universal para Nomes), o formato padrão para caminhos que incluem um servidor de arquivo de rede de área local que utiliza a sintaxe a seguir:

Exemplo: \\servidor\compartilhamento\caminho\nome do arquivo

O endereço http://www.xyz.com.br indica um URL do Web Site da XYZ Informática Ltda.

1.13.4. Entendendo uma URL

http://www.xyz.com.br/treinamento/cursos.htm#local

http:// Protocolo - Protocolo da Internet utilizado pelos computadores ligados à Web para

comunicar-se entre si.

www.xyz.com.br Nome do Domínio - Domínio são as categorias de endereços da Internet que

representam países ou tipos de organização.

•www Sigla de World Wide Web, significa Rede Mundial

•XYZ Nome específico que pode conter uma ou mais palavras, separadas ou não, por hifens (ex.:

XYZ-informatica), que simboliza por exemplo o nome da empresa, ou de um produto especifico.

•com Tipo de Domínio - Indica a natureza do Site. No caso como trata-se de um Site de uma

empresa privada, ".com" vem de comercial. Outros Exemplo: .gov (governo) e .org (organizações sem fins lucrativos).

•br Sigla do País - composta de duas letras, significa que a página está situada em um computador

no Brasil. Páginas que não possuem terminação indicando o país de origem estão situadas nos Estados Unidos. Outros Exemplo: .pt (Portugal) e .jp (Japão).

treinamento Diretório (pasta) onde está localizado a página (arquivo) cursos.htm.

Às vezes uma URL indica apenas o diretório (ou o servidor). Nesse caso, o servidor se encarrega de procurar e enviar o arquivo adequado.

cursos.htm Nome da página escrita em HTML requerida (páginas da Web geralmente tem

terminação em .htm ou .html).

#local   Aponta para o local específico dentro da página que será exibida. 1.14. Endereço IP (Endereço do Protocolo Internet)

A  maneira  padrão de  identificar  um  computador  conectado  à  Internet,  da  mesma  forma que um número de telefone identifica um telefone em uma rede telefônica. Um  endereço IP é representado por quatro números separados por pontos e onde cada  número é menor que 256, por exemplo, 192.200.44.69. O administrador de seu servidor 

Web   ou   o   provedor   de   serviços   de   Internet   irá   atribuir   um   endereço   IP   a   seu  computador. 

O tipo mais comum de URL é http://, que fornece o endereço Internet de uma página da Web. Alguns outros tipos de URL são:

ftp:// que fornece o local da rede de um recurso FTP(este serviço representa o protocolo de transferência de arquivo na Internet.).

gopher:// que fornece o endereço Internet de um diretório gopher (representa um serviço não-gráfico de informações, dirigido por menus).

news:// grupos de discussão ou de notícias (representa o serviço de BBS (bulletin board) organizado em áreas de interesse especial. )

mailto:// para especificar um endereço de Correio Eletrônico da Internet (para enviar correio

eletrônico).

mailto:// representa um arquivo localizado em seu próprio computador.

1.15. ISP (Internet Service Provider) 1.15.1. Provedores

O Provedor é uma Empresa ou Organização que oferece conexão para Internet. Através de um Provedor você pode ter acesso à Internet e serviços de hospedagem de Site. O Provedor disponibiliza as informações solicitadas pelos "navegadores" (Browsers) por uma combinação de computador e programas que formam os servidores situados em instalações apropriadas, neste caso, o Provedor aluga espaço em um disco rígido cuja máquina deve estar permanentemente conectada à rede, disponibilizando sua Home Page 24 horas por dia a todos os usuários da Internet.

A ligação com o provedor pode ser feita por linhas telefônicas normais (conexão discada) ou por linhas especiais, ligadas 24 horas por dia (conexão dedicada) e hoje em dia através de banda larga. Um provedor geralmente oferece várias funções de aplicações como World Wide Web (http), transferência de arquivos (ftp) e gerenciamento de conteúdo (armazenamento de dados). A maioria dos provedores também disponibilizam caixa postal eletrônica, "contas" de e-mail para seus usuários, juntamente com os serviços de acesso e hospedagem.

1.15.2. Seu Site na Grande Rede

Ao desenvolver sua Home Page, basta transferir seus arquivos via FTP para o Provedor.

Alguns programas específicos podem facilitar o seu Upload, já que o Browser funciona apenas para busca de arquivos, e não para o envio. O CuteFTP é um dos mais indicados pelos provedores, que permite um acesso totalmente gráfico e interativo a servidores FTP. Mas, sem dúvida, existe um excelente, o Internet Neighborhood. Sua interface é comum ao do Microsoft Windows Explorer, funcionando de maneira simples, possibilitando Download e Upload da máquina local para o servidor FTP, transferindo arquivos de uma pasta para outra.

1.14.3. Login

Acesso. É o processo de identificar-se ao entrar num computador ou em uma rede de computadores.

A cada entrada na Internet, você se "loga" (faz o login) em seu Provedor, colocando nome

2.Introdução à Linguagem HTML

Originado   do   casamento   dos   padrões   HyTime   (Hypermedia/Time­based   Doumnt  Structuring Language) e SGML (Standard Generalized Markup Language), o HTML,  sigla para HyperText Markup Language (Linguagem de Formatação de Hipertexto),  linguagem   usada   para   criar   páginas   na   Web,   estabelece   como   um   determinado  elemento deve ser visualizado, não sendo, portanto uma linguagem de programação, e  sim,   uma   linguagem   de   formatação   de   exibição   de   textos,   através   de   "comandos"  conhecidos como TAGs. Em suma, HTML é empregado para definir as funções dos  diferentes   elementos   das   páginas   (como   textos,   fotos   ou   animações)   que   serão  visualizadas pelo programa de navegação (Browser).

2.1. HyTime (Hyprmedia/Time­based Document Structuring Language)

HyTime (ISO 10744:1992) é o padrão para representação estruturada de hipermídia e  informação baseada em tempo. Um documento é visto como um conjunto de eventos  concorrentes   dependentes   de   tempo   (áudio,   vídeo,   etc.),   conectados   por   webs   ou  hiperlinks. O padrão HyTime é independente dos padrões e processamento de texto em geral. Ele  fornece a base para a construção de sistemas hipertexto padronizados, consistindo de  documentos que aplicam os padrões de maneira particular. SGML (Standard Generalized Marup Language) Padrão ISO 8879 de formatação de textos: não foi desenvolvido para hipertexto, mas  torna­se conveniente para transformar documentos em hiper­objetos e para descrever  as ligações. SGML não é aplicado de maneira padronizada: todos os produtos SGML  tem seu próprio sistema para traduzir as etiquetas para um particular formatador de  texto.ssa sim é uma postura que deve ser tomada

O documento HTML pode ser escrito em qualquer editor de textos, desde que este  tenha   a   capacidade   de   gravá­lo   como   código   ASCII   (American   Standard   Code   for  Information   Interchange   ­   código   utilizado   para   representar   textos   quando   há  computadores envolvidos), isto é, como texto puro, sem formatação ou caracteres de  controle.   Pode­se   usar,   portanto,   o   gedit,   kate,   kedit   nas   distribuições   linux,   ou   o  Notepad do Windows,. Pode­se também usar editores mais modernos, como o BrOffice  Writer   ou   o   Word,   sendo   necessário   neste   caso   que   o   documento   seja   gravado   no  formato texto e não como um ''.odt" normal do BrOffice Writer ou “.doc" normal do MS­ Word.

O conjunto de caracteres de 7 bits do código padrão americano para intercâmbio de  informações (ASCII, American Standard Code for Information Interchange) e que é  amplamente  usado para  representar  letras e símbolos  encontrados em um  teclado  americano   padrão.   O   conjunto   de   caracteres   ASCII   é   igual   aos   128   primeiros  caracteres (0127) do conjunto de caracteres ANSI.

Conjunto de caracteres ANSI

O conjunto de caracteres de 8 bits do Instituto Nacional de Padronização Americano  (ANSI, American National Standards Institute) que é usado pelo Microsoft Windows e  que possibilita a representação de até 256 caracteres (0­255) através do teclado. Os  128   primeiros   caracteres   (0­127)   correspondem   a   letras   e   símbolos   de   um   teclado  americano   padrão.   Os   outros   128   caracteres   (128­255)   representam   caracteres  especiais,   como   letras   de   alfabetos   internacionais,   acentos,   símbolos   monetários   e  frações.

Toda vez que você acessar um site (veja tópico Word Wide Web) por meios de domínios  quando adiciona a URL na barra de endereço, do seu Navegador (Browser), você verá  páginas   na   WEB   bem   dinâmicas,   organizadas,   animadas   e   com   ela   trazendo  informações, imagens, sons, vídeos e etc. Então, você deve se perguntar. Como é feito? Como elas se propagam?   Todas estas  páginas possuem um código fonte escrito numa linguagem chamada HTML (Hyper  Text Markup Language). Este manual tem por objetivo mostrá­lo como criar e exibir páginas HTML, como as  que você ver através da WEB. Tais páginas são criadas a partir de arquivos texto  ASCII, contendo caracteres de marcação da linguagem HTML. Uma vez criados, estes  arquivos   são   salvos   com   uma   extensão“.html”.   Portanto,   deveremos   salvar   nosso  exercícios com esta extensão.

Já que entendemos melhor como funciona a internet em geral, daremos inicio ao curso  de HTML. 

Todo documento HTML apresenta elementos entre parênteses angulares (< e >). Esses  elementos são as etiquetas (tags) de HTML, que são os comandos de formatação da  linguagem.   A   maioria   das   etiquetas   tem   sua   correspondente   de   fechamento,  representada com uma “barra” ( / ):

Isso é necessário porque as etiquetas servem para definir a formatação de uma porção  de texto, e assim marcamos onde começa e onde termina o texto com a formatação  especificada por ela. Alguns elementos são chamados “vazios”, pois não marcam uma  região   de   texto,   apenas   inserem   alguma   coisa   no   documento,   não   havendo   a  necessidade do fechamento:

Todos   os   elementos   podem   ter  atributos: 

HTML é um recurso muito simples e acessível para a produção de documentos. Nesta  apostila, será possível aprender grande parte de seus elementos.

Nota: Não existem programas em HTML, pois HTML não é uma linguagem de programação, mas de formatação (marcação). Portanto, a rigor não existem "programadores" de HTML.

3.Edição de Documentos HTML

Existem Editores HTML chamados WYSIWYG (what you see is what you get ­ o que  você vê é o que você tem). Eles oferecem ambiente de edição com um resultado final  das   marcações   (pois   o   resultado   final   depende   do   browser1   usado   para   visitar   a  página). Alguns bastante conhecidos são por exemplo: FrontPage e Dreamweaver.

Além dos editores específicos  para HTML,  Editores de Textos bastante  utilizados,  como o Word, entre outros, permitem a exportação de seus documentos próprios para o  formato HTML (menu Arquivo, Salvar como, Salvar_como Tipo). Um documento HTML, como dito anteriormente, normalmente terá extensão .html  porem, poderão também estar no formato .htm. Gostaria de lembrar como citei a linha acima, que existem vários editores de Home  Pages, como por exemplo: o Front Page Express, Netscape Composer,  Home Site, etc.  Só   que   na   ausência   destes   aplicativos   e   você   desconhecendo   a   Linguagem   de  HyperTextos, HTML, não poderia criar suas páginas. Daí a importância de se conhecer  esta linguagem.  Para estudarmos HTML, usaremos editores de texto simples como gedit, kate ou Bloco  de Notas. Precisaremos também de um Browser (Mozilla Firefox ou Internet Explorer)  para que possamos visualizar como nossa página está ficando. Para nossos exemplos  usarei o Mozilla Firefox. Tudo Bem? Mas antes vamos entender como estas páginas  são colocadas para que todos possam ver na Web.

4.Publicação de Documentos na Internet (Sites)

Para que uma página esteja permanentemente disponível pela Web, ela precisa ter um  endereço fixo, alojada em um servidor. Existem vários provedores de espaço (hosting) gratuitos e também os provedores de  acesso geralmente oferecem espaço para os sites de seus assinantes. Sites com fins 

lucrativos geralmente são hospedados em provedores de espaço pagos. Definida a hospedagem, basta enviar para o provedor os arquivos de seu site (via FTP2  ou por uma página de envio no próprio provedor de espaço) e suas páginas já estarão  disponíveis para visitas no mundo todo. Já tendo uma idéia dos principais conceitos, vamos começar a produzir nossas páginas.

5.Documento HTML Básico e seus Componentes

A estrutura básica de uma página HTML é mostrada na Figura 1. Observe que a  construção de páginas exige o uso das TAGS.   Figura 1 -

Componentes Básicos de um Documento HTML

Com   certeza   você   observou   melhor   o   que   foi   dito   anteriormente,   que   as   TAGs  normalmente estarão antes e depois de algo, onde este algo pode ser algum texto, ou  outro conjunto de TAGs que estão entre estas duas TAGS As etiquetas (tags) HTML não são case sensitive, ou seja, as TAGS não fazem diferença  entre letras maiúsculas ou minúsculas. Tanto faz escrever, por exemplo, <HTML>,  <Html>, <html>, <HtMl>, etc.  Onde :

Tabela 1 - Tabela de TAGs Principais

<html> Marca o início e fim do documento <head> Marca o início e o fim do cabeçalho <title> Marca o inicio e o fim do título

<body> Marca o início e o fim do do corpo da página

O documento HTML básico se divide principalmente em duas TAGS principais das  vistas acima, são elas: <HEAD> e <BODY>.

Esta TAG contém informações sobre o documento. O elemento <TITLE>, por exemplo,  define um título, que é mostrado no alto da janela do browser. 

Exemplo:

Todo   documento   WWW   deve   ter   um   título,   onde   principalmente   esse   título   é  referenciado em buscas pela rede, dando uma identidade ao documento.  Ao adicionar uma página aos seus Favoritos (Bookmarks), o título da página se torna a  âncora de atalho para ela. Portanto, este é um dos motivos pelo qual sugere­se que ao  dar um título a uma página, que ele seja sugestivo, evitando­se títulos genéricos como  "Introdução", por exemplo. O título também é bastante significativo para a listagem de  uma página nos resultados de pesquisas nos sites de busca da Internet. 4.2.<BODY>

Tudo   que   estiver   contido   em   <BODY>   (Corpo   do   Texto)   será   mostrado   na   janela  principal do browser, sendo apresentado ao leitor. No corpo do texto pode conter por  exemplo:   imagens,   vídeos,   sons,   cabeçalhos,   parágrafos,   listas,   tabelas,   links   para  outros documentos, formulários, animações entre outros.

Exercício 1:

Com o que foi visto até agora, vamos criar uma página HTML simples.

Passo 1: Abrir o Ambiente de Desenvolvimento WEB (Iniciar>Desenvolvimento WEB>Quanta

Plus)

Passo 2: Digite o código exatamente como está da abaixo.

Passo 3: Após digitá-lo salva em uma pasta ( Crie uma pasta no computador com seu nome, e

dentro dela outra pasta com o nome “Minhas páginas HTML” ) com o nome “Minha_primeira_página.html”

Como salvar:

Localiza­se onde está sua pasta e é só salvar quando estiver dento de “Minhas páginas  HTML”

Para ver o resultado deste exemplo abra o Internet Mozilla Firefox, e na barra de  endereço digite C:\Meus documentos\exemplo1.html. Veja a figura 1.2

Figura 2 – Resultado do Exercício 1

Perceba que existe uma parte do texto que não é mostrada.   Perceba que existe um  texto após     “<!­­  ­­>” Isto é um cometário e não será mostrado na página.

Cada  tag, dentro dela,  poderão existir atributos para implementar, veremos então  abaixo alguns destes atrubutos da TAG <BODY> 4.2.1.Atributos de <BODY> Dentro da TAG <BODY> é possível ter vários atributos e podemos definir, por exemplo,  as cores para os textos, links e para o fundo das páginas, bem como uma imagem de  fundo (marca d’água): Onde: Tabela 2 – Atrabutos da TAG <BODY>

BGCOLOR Background Color(ou cor de fundo da página). _{A cor padrão é branca quando não se determina cor.} TEXT Cor dos textos da página (padrão: preto).

LINK Cor dos links (padrão: azul).

VLINK Cor dos links depois de visitados (padrão: azul escuro ou roxo) BACKGROUN

D Caminho para a figura de fundo

Na TAG <BODY> acima, percebemos que por exemplo, no bgcolor temos “#rrggbb”.  Seus valores são dados em hexadecimal, equivalentes a cores no padrão RGB (Red,  Green,   Blue).   Existem   tabelas   de   cores   com   esses   valores,   mas   grande   parte   dos  editores já oferece uma interface bem amigável através da qual escolhemos as cores  desejadas, sem nos preocuparmos com números esdrúxulos tais como #FF80A0. 

Browsers que seguem a definição de HTML 3.2 em diante, também aceitam 16 nomes  de   cores,   tirados   da   paleta   VGA   do   Windows   ­   por   exemplo,   podemos   escrever  BGCOLOR="BLUE".

Porém, browsers mais antigos não apresentarão as cores indicadas.

BACKGROUND: Indica a URL da imagem a ser replicada no fundo da página, como  uma marca imagem de fundo.

O   significado  do   link,   alink   e   vlink,   não   serão  discutidos   agora,  mas   estas   TAGS  servirão para o uso de links, ou seja, atalho para outras páginas, o que será visto  posteriormente.      

Nota: Os 16 nomes de cores aceitos desde a versão 3.2 da HTML são estes: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow.

Exercício 2:

Salve com o nome “segunda_pagina.html” O resultado da página poderá ser feito no próprio programa ou como visualizamos o  primeiro exercício. Para visualizar pelo programa, clique no ícone em destaque na  imagem abaixo Agora vamos Visualizar pelo Konqueror, como foi visualizado o primeiro exercício. Veja o resultado:

Opa! Aconteceu algo errado! Os acentos viraram caracteres malucos?

Bom, é preciso falar para o navegador qual codificação ele está usando. Para que nosso  texto seja  mostrado normalmente, iremos criar  uma nova  página  e colocar  nossas  informações nela para sair corretamente.

Primeiramente vamos criar um novo arquivo:

Irá abrir uma janela(Imagem ao lado) e desmarque as opções “Mostrar DTD” e “Meta  Quanta”. Confirme clicando em “OK” após estas alterações. Aparecerá um documento com a estrutura que vimos anteriormente, mas com uma  novidade, a TAG        Não é preciso entendermos a fundo sobre esta TAG agora, pois o importante é que ela  resolverá nosso problema. Agora com esta estrutura montada, perceba que no rodapé da página existe a página  que salvamos e este novo documento. Com base nisso, clique em Segunda_página.html e copie o que está entre da tag <title>  e o que está dentro da tag <body>, e faça alteração no texto como mostra a figura  abaixo:

Salve  como  “Segunda_página_modificada.html”,   e  volte   para  ver  esta   página   como  ficou.

Viu a diferença?  

Concordo que é muito chato ficar toda vez digitando todo o código principal. Sabemos  então que, para nossa página sair mais interessante, o uso da TAG <meta> para a  codificação é muito importante. Portanto, vamos criar um novo documento, como feito  no   exemplo   anterior,   e   vamos   fazer   o   Exercício   3,   já   que   ela   nos   dá   a   estrutura  principal da nossa página.

Exercício 3:

Algumas vezes é melhor colocar na nossa página uma imagem de fundo, no lugar de  uma cor de fundo, não acha? Então, que tal agora colocar uma imagem ao invés da  cor  de fundo??  Vamos digitar o arquivo para depois explicar como colocar a imagem. Deixe o seu  arquivo como mostra abaixo  Agora teremos que ir buscar na internet alguma imagem para colocar como plano de  fundo. Que tal escolher uma imagem no Firefox, por exemplo?  Após escolhida a imagem, salve­a dentro da pasta que estará nossas páginas HTML,  no nosso caso, dentro de “Minhas Páginas HTML”. Escolhemos a imagem com o nome  “firefox­wallpaper.jpg”. Portanto colocaremos, do mesmo jeito que salvamos, o nome do arquivo dentro da TAG  <body>, como mostra abaixo.

Salve   com   o   nome   “Segunda_pagina_com_background.html”,   e   faça   a   visualização  novamente. Veja o resultado:

Nota: Deve­se ter cuidado na hora de escolher o tipo de plano de fundo ou cor de fundo,  pois por exemplo, se neste caso tivesse usado um plano de fundo com cor mais clara,  provavelmente ficaria difícil enxergar as letras do texto. É importante que mesmo que sua página tenha uma imagem de fundo, ela também  tenha uma cor de fundo. Sempre coloque uma cor de fundo parecida com o do plano de  fundo, pois pode ser que por algum motivo a imagem não seja carregada. Então, o  Leitor da sua página poderá ainda sim, mesmo não visualizando a imagem, ver o texto  escrito

6.Cabeçalho(Títulos) <Hn></Hn>

Há seis níveis de cabeçalhos em HTML, de <H1> a <H6>: Esses cabeçalhos são mostrados no browser da seguinte forma:

Exercício 4:

Vamos   agora   utilizar   a   página   do   exercício   3,   salvando­a   como  “Pagina_com_cabeçalho.html”.  Observe abaixo e faça as alterações necessárias:

Salve novamente, mas como a página já tem um nome, precisa­se só atualizar as  alterações. A seguir vamos ver algo mais sobre os cabeçalhos. Aninhamento de cabeçalhos Os cabeçalhos não podem ser aninhados, isto é, a formatação pode produzir algum  resultado próximo ao desejado. Observe abaixo o código e como ficou logo em seguida: Mas o mais comum é que os browsers "entendam" essa formatação como sendo: Ou seja, como se estivesse faltando uma etiqueta de fechamento de <h2> antes de  <h1> e faltando uma abertura de <h2> depois do fechamento de <h1>, oferecendo o  seguinte resultado: Os editores WYSIWYG naturalmente não permitem o aninhamento de cabeçalhos. Alinhamento de cabeçalhos Os cabeçalhos têm atributos de alinhamento: Como resultado:

7.Fonte <FONT></FONT>

Até agora construímos uma página relativamente simples. Percebemos então que o  texto todo fica de uma cor só até agora. Mas será que a página só poderá ficar assim?  Não poderei codificar o tipo de fonte, nem o tamanho, muito menos a cor? Claro que isso é possível! Para isso que serve a TAG <FONT> Para utilizar as mudanças acima devemos complementar a TAG <FONT> com os seus  atributos, como por exemplo: Onde:  Tabela 3 – Artibuotos da TAG <FONT> SIZE Determina o tamanho da fonte. Esta opção especifica o tamanho da fonte  utilizada; FACE Determina o tipo de fonte que será usado. Se nenhuma fonte for colocada,  será usada a fonte padrão. Esta opção permite que seja definida uma  fonte diferente para o texto; COLOR Determina a cor da forte. Esta opção especifica a cor do texto. Seu valor  pode ser especificado pelo

código   hexadecimal   ou,   para  algumas  cores,  pelo  seu   nome   em  inglês  (blue, black, white etc.). Abaixo vemos a diferença das duas TAGs acima: Veremos um pouco sobre cada um dos atributos começando pelo tamanho. A TAG acima produzirá a palavra Texto com o tamanho numero 3(tamanho padrão). Este comando permite que o autor do documento altere o tamanho das letras em  trechos específicos de texto. O tamanho básico dos textos é 3 (padrão). Podemos indicar 

tamanhos relativos a esse, por exemplo:

Digite os exemplos e veja a diferença entre eles.  Para a seleção das fontes usaremos o atributo FACE;

Digite e veja o resultado. Descubra as outras fontes que existe e faça o texto também.

As cores são introduzidas também através do elemento <FONT> quando queremos que algumas partes do texto fique diferente da padrão, ou da que foi definida na TAG <BODY> . Usa-se também o sistema RGB para cores (da mesma forma que vimos para cores anteriormente), como mostrado no exemplo a seguir: Assim, um trecho de texto pode ter uma cor diferente da definição geral de cores, feita  através dos atributos de <BODY>. Mais exemplos: Perceba, como foi dito anteriormente que tanto faz colocar em letras maiúsculas ou  minusculas, que o navegador vai interpretar corretamente.

8.Estilos de texto

Até agora vimos a estrutura principal do HTML, como modificar a cor de todo o texto,  como colocar um plano e fundo e como alterar partes do texto, mas e se eu quiser  colocar, por exemplo uma palavra em negrito e sublinhado, por exemplo o título? Sim,  isso é possível, por isso vamos estudar os estilos.

Tabela 4 –Estilos Físicos

<B> Negrito <I> Itálico <U> Sublinhado. <STRIKE> ou <S> Frase riscada.

<BIG> Fonte um pouco maior. <SMALL> Fonte um pouco menor.

<SUB> Frase em estilo índice, como em H2O, por exemplo. <SUP> Frase em estilo expoente, como em Km2, por exemplo.

Outras TAGs de formatação

Temos   outras   TAGs   que   dependendo   no   Navegador,   podem   um   não   funcionar  corretamente:

HTML oferece outras TAGs para formatação

Tabela 5 – Outras TAGs de Formatação

<PRE> Apresenta o texto na mesma maneira em que foi digitado, mantendo quebras de linha e tabulações

<BLOCKQUO TE>

É usado para citações longas

<ADDRESS> Usado para formatar endereços de E-Mail e referências a autores de documentos, como por exemplo:

<CODE>. Utilizada para relacionar o código-fonte de programas. Geralmente será visualizado em fonte

monoespaçada.

<STRONG> Utilizada para dar ênfase especial a um trecho de texto. Geralmente será visualizado em fonte

<DFN> Utilizada para destacar um definição. Geralmente será visualizado em fonte itálica.

<EM> Utilizado para sublinhar parte do texto <CENTER> Utilizada para centralizar um texto na tela.

A TAG <PRE> permite criar textos pré­formatados semelhantes aos produzidos em  editores de texto. Espaços em branco, marcas de tabulação e quebras de linha são  reconhecidos e colocados nos respectivos pontos de inserção. Textos pré­formatados são  representados pela fonte mono espaçada definida pelo usuário.

Uma vez que <PRE> mantém o texto original, não se deve forçar espaços com essa  marcação dentro de outra marcação que já apresente tabulações e espaços específicos. Dentro de um texto pré­formatado: ∙É permitido utilizar links e âncoras. Entretanto, não existe certeza de como o browser  interpretará essas marcações. ∙A TAG <P> não deve ser utilizado. ∙Não devem ser usados outros comandos de formatação, tais como os de listas e de  cabeçalhos. Observe abaixo:

que resultaria na seguinte representação na tela:

A Tag <ADDRESS> formata informações tais como o endereço, a assinatura e a autoria de quem publicou a página. Normalmente, estes dados são colocados no final de um documento e, geralmente, serão visualizados em itálico. Exemplo:

O resultado seria:

Exercício 5:

Produza uma página utilizando os conhecimentos adquiridos até agora. Faça uma página com se fosse um currículo seu, colocando alguns dados seus, o que gosta( Tipo de música por exemplo ). Chame-a de “meus_dados.html”.

9.Parágrafo <P>

Para separar blocos de texto, usamos o elemento <P>, por exemplo: que produz o seguinte:

Combinando parágrafos e quebras de linha(Veremos em breve), temos por exemplo:

O resultado da marcação acima é:

A TAG <P> tem atributo de alinhamento, semelhante aos cabeçalhos, como nos exemplos a seguir:

Como vimos anteriormente, podemos também alinhar a esquerda(align=left), que já é padrão e também a direita(align=right).

Exercício 6:

Para Exercitar. Pegue a página  “meus_dados.html” e implemente com estes conhecimentos  de   parágrafos.   Salve   a   página,   antes   de   modificar   como  “meus_dados_modificados.html”

10.Quebra de linha <BR>

uma quebra de linha em determinado ponto, pois os browsers já quebram as linhas automaticamente para apresentar os textos.

Com sucessivos <BR>, podemos inserir diversas linhas em branco nos documentos. Esse elemento tem um atributo especial, que será apresentado no item sobre inserção de imagens.

11.Linhas horizontais <HR>

A TAG <HR> insere uma linha horizontal que tem diversos atributos, oferecendo resultados diversos.

Exercício 6:

Para exercitar, através do “meus_dados_modificados.html”,   implemente   as   linhas  horzontais da melhor forma possivel.

12.HiperTexto(Hyperlink)<A>

Agora teremos a oportunidade de interligar todas as nossas páginas através dos hyperlinks Com HTML é possível fazermos ligações de uma região de texto (ou imagem) a um outro

documento (ou a outra parte do próprio documento). Você já deve ter visto em alguma página internet exemplos dessas ligações: o browser destaca essas regiões e imagens do texto, indicando que são ligações de hipertexto - também chamadas hypertext links ou hiperlinks ou simplesmente links, onde normalmente, o mouse vira uma “mãozinha” e ao clicar “chamamos” (abrimos) um outro documento, página web ou figura por exemplo.

Para inserir um link em um documento, utilizamos a etiqueta <A>, da seguinte forma: Onde:

arquivo_destino: é o endereço do documento de destino, da página ou imagem a qual queremos

abrir.

âncora: é o texto ou imagem que servirá de ligação hipertexto do documento sendo apresentado

para o documento de destino.

Atributos

A TAG <A> tem vários atributos que são utilizados de acordo com a ação associada ao link. Os mais usados são apresentados a seguir:

HREF Indica o arquivo de destino da ligação de hipertexto.

TARGET Indica o frame em que será carregado o arquivo_destino. Maiores detalhes na seção sobre frames.

documento como destino de uma ligação

Caminhos (uso de Links)

Os links podem estar indicados como caminhos relativos ou absolutos.

Caminho Relativo

O caminho relativo pode ser usado sempre que queremos fazer referência a um documento armazenado no mesmo servidor do documento atual.

Através do campo de endereços do browser, é possível identificar se um documento (página)

que está sendo visualizado está dentro de algum diretório (pasta). Como por exemplo se estivermos em um browser acessando a página da FACCAT e vemos o seguinte endereço:

http://www.faccat.br/apostilas/apostila_de_informatica.html. O que podemos concluir é que o documento que está sendo visualizado no momento, chamado apostila_de_informatica.html, está localizado dentro de um diretório (pasta) chamado apostilas do servidor www.faccat.br.

Então para escrevermos por exemplo um link deste documento (apostila_de_informatica.html) para um documento chamado doc.html que está localizado no diretório /apostilas/documentos/ do mesmo servidor www.faccat.br, tudo que precisamos fazer é escrever:

<A HREF="documentos/doc.html"> Exemplo de Caminho Relativo </A>

Para usar links com caminhos relativos é preciso, portanto, conhecer a estrutura do diretório do servidor no qual estamos trabalhando, pois devemos indicar todo o caminho onde está o documento no qual estamos nos referindo no link. Quando há alguma dúvida, o melhor é usar o caminho absoluto.

Caminho Absoluto

Utilizamos o caminho absoluto quando desejamos referenciar um documento que esteja em outro servidor, por exemplo:

<A HREF="http://www.faccat.br"> FACCAT - Faculdades de Taquara </A>

Que oferece um link FACCAT - Faculdades de Taquara que ao ser clicado com o mouse abrirá a página cujo endereço é http://www.faccat.br.

Com a mesma sintaxe, é possível escrever links para qualquer servidor de informações da Internet.

Indicadores (uso de Links)

Como foi dito anteriormente, o atributo NAME permite indicar um trecho de documento como ponto de chegada de uma ligação hipertexto.

A formatação:

<A NAME="inicio"> Indicadores (uso de links) </A>

faz com que a âncora Indicadores (uso de links) seja o destino de um link. Se escrevermos:

<A HREF="#inicio"> Topo do Documento </A>

teremos uma ligação hipertexto para um trecho deste mesmo documento.

Exercício 6:

Vamos agora treinar os indicadores. Vamos fazer uma página sobre as ferramentas estudadas até aqui. Ou seja. Elabore um pequeno texto sobre: Inkscape, Gimp, BrOffice. Faça no inico da página um link para cada um dos conteudos. E em cada conteudo, dê a opção para ir ao topo. Veja como vai funcionar isso. Salve como “Ferramentas_Livres”

Exercício 7:

links de todas as páginas criadas até agora. Se preferir(o que é importante), em cada página crie os mesmos links para o acesso mais rápido.

13.Lista de caracteres

HTML permite que caracteres especiais sejam representados por sequências de escape, indicadas por três partes: um & inicial, um número ou cadeia de caracteres correspondente ao caracter

desejado, e um ; final.

Quatro caracteres ASCII - <, >, e & têm significados especiais em HTML, e são usados dentro de documentos seguindo a correspondência:

Entidade Caracter Significado Entidade Caracter Significado

&lt; < Menor que ‘ e ’ &lsquo; e &rsquo;

aspas simples (esquerda e direita) &gt; > Maior que ‹ e › &lsaquo; e

&rsaquo;

aspas angulares simples (esquerda e direita)

&amp; & E comercial « e » &laquo; e &raquo;

aspas angulares duplas (esquerda e direita)

&nbsp; &circ; Espaço º &ordm; ordenal masculino

ˆ acento

circunflexo ª &ordf; ordinal feminino ˜ &tilde; acento til – &ndash; travessão 'en' ¨ &uml; acento trema — &mdash; travessão 'em' ´ &cute; acento agudo &shy; hífen oculto ¸ &cedil; cedilha ¯ &macr; macron " &quot; aspas duplas … &hellip; reticências

“ e ” &ldquo; e &rdquo;

aspas duplas (esquerda e direita)

¦ &brvbar; barra vertical

€ &euro; euro • &bull; marcador (bullet) ¢ &cent; centavo ¶ &para; parágrafo

£ &pound; libra esterlina § &sect; parágrafo legal ™ &trade; trade mark ♠ &spades; espadas

® &reg; marca

registrada ♣ &clubs; paus © &copy; copyright ♥ &hearts; copas

♦ &diams; ouros

Outras sequências de escape suportam caracteres ISO Latin1. Temos aqui uma tabela com os caracteres mais utilizados em Português:

Entidade Caracter Entidade Caracter Entidade Caracter Entidade Caracter

&aacute; á &Aacute; Á &iacute; í &Iacute; Í &acirc; â &Acirc; Â &oacute; ó &Oacute; Ó &agrave; à &Agrave; À &ocirc; ô &Ocirc; Ô &atilde; ã &Atilde; Ã &otilde; õ &Otilde; Õ &ccedil; ç &Ccedil; Ç &uacute; ú &Uacute; Ú &eacute; é &Eacute; É &uuml; ü &Uuml; Ü &ecirc; ê &Ecirc; Ê

Como vemos, as sequências de escape são sensíveis à caixa.

15.Imagens<IMG>

A TAG <IMG> insere imagens que são apresentadas junto com os textos. E segue a seguinte forma:

Um atributo SRC deve estar presente, onde URL_imagem é o URL do arquivo que contém a imagem que se quer inserir. Pode ser referenciada uma imagem que esteja em um outro servidor (o que, logicamente, não é conveniente).

Assim, escrevendo:

<IMG SRC = "nome_da_figura.extensão">

<IMG SRC = "nome_da_pasta/nome_da_figura.extensão">

Por exemplo, se quisermos inserir na página uma imagem chamada arvore.gif localizada no mesmo servidor e na mesma pasta, a tag seria assim:

<IMG SRC = "arvore.gif">

As imagens usadas na Web, normalmente são armazenadas em arquivos com as seguintes extensões: .gif, .jpg (ou .jpeg), .png, .bmp.

Atributos Básicos de Imagem

ALT Indica um texto alternativo, descrevendo brevemente a imagem, que é apresentado no lugar da imagem nos browsers texto, ou quando se desabilita o carregamento de imagens em browsers gráficos. É recomendável que esteja sempre presente. Também aparecerá ao “passar o mouse sobre a imagem”.

<IMG SRC="URL_imagem" ALT="descrição_da_imagem">

Dessa forma:

<IMG SRC="newred.gif" ALT="Novo!!!">

WIDTH e

HEIGHT Atributos de dimensão da imagem, em pixels4. Grande parte dos editores HTML coloca automaticamente os valores destes atributos, quando indicamos a inserção de uma imagem.

<IMG SRC="URL_imagem" ALT="descrição" WIDTH="largura" HEIGHT="altura">

Uma das vantagens de se usar esses atributos é que o browser pode montar mais rapidamente as páginas, por saber de antemão o espaço que deverá ser reservado a elas.

BORDE R

Quando uma frase é marcada como âncora de um link, ela se apresenta sublinhada; quando uma imagem faz as vezes de âncora, ganha uma borda que indica sua condição de link.

Porém, por questões de apresentação, nem sempre interessa termos essa borda ao redor da imagem. Assim, com o atributo BORDER, podemos controlar esse detalhe.

Se quisermos uma borda mais larga:

<A HREF="URL"> <IMG SRC="imagem" ALT="descrição" BORDER=4> </A>

Se quisermos uma imagem sem borda:

<A HREF="URL"> <IMG SRC="imagem" ALT="descrição" BORDER=0> </A>

Essa borda pode ser apresentada também em imagens que não são âncora de links. Basta aplicar, por exemplo, a formatação:

<IMG SRC="figura1.gif" ALT="Minha Foto" BORDER=2>

ALIGN <IMG SRC="imagem.extensão" ALT="descrição" ALIGN=alinhamento_desejado> Existem também atributos de alinhamento, que produzem os seguintes resultados: ALIGN=TOP → Alinha o texto adjacente com o topo da imagem.

ALIGN=MIDDLE → Alinha o texto adjacente com o meio da imagem.

ALIGN=BOTTOM → Alinha o texto adjacente com a parte de baixo da imagem.

ALIGN=RIGHT → Alinha imagem à direita, e o que houver ao redor a partir do topo da imagem.

ALIGN=LEFT → Alinha imagem à esquerda, e o que houver ao redor a partir do topo da imagem.

Para ter duas imagens, uma em cada margem, numa mesma linha, escreva: entre as imagens!

E o resultado ficará parecido com o abaixo:

Um detalhe surgido com o alinhamento de imagens foi a necessidade de se liberar o texto desse alinhamento, ou seja:

Suponhamos um texto mais ou menos curto, que desejamos colocar com a imagem ilustrativa, mas gostaríamos que este trecho já estivesse abaixo da imagem! De acordo com o comprimento da primeira frase, não seria possível usar o alinhamento TOP.

Para conseguir isso, seria necessário incluir diversos <BR> consecutivos, inserindo linhas em branco: mesmo assim, o resultado final poderia ser bem pouco elegante. Surgiu, então, o atributo CLEAR para <BR>.

Com esse atributo, podemos, por exemplo ter um texto posicionado no ponto em que a margem direita fica livre, com <BR CLEAR=RIGHT> ou no ponto em que a margem esquerda fica livre, com <BR CLEAR=LEFT>

Dessa maneira, podemos controlar bem a posição relativa dos textos.

Também pode-se posicionar o texto no ponto em que ambas as margens estão livres. Isso é conseguido com <BR CLEAR=ALL>

E, assim, vimos tudo sobre quebras de linha depois de imagens!

15.1. Molduras de Imagem

Para melhorar ainda mais a apresentação das imagens junto com os textos, foram desenvolvidos atributos de moldura. Estes atributos definem o espaço - vertical e horizontal - deixado entre as imagens e os textos circundantes:

<IMG SRC="imagem.extensão" VSPACE=espaço_vertical> <IMG SRC=" imagem.extensão " HSPACE=espaço_horizontal> Outros exemplos:

<IMG SRC="foto.gif" WIDTH="148" HEIGHT="95" ALIGN=left VSPACE="30"> <IMG SRC="foto.gif" WIDTH="160" HEIGHT="71" ALIGN=right HSPACE="30"> Abaixo, temos um exemplo com os dois atributos, através da formatação:

<IMG SRC="foto.gif" ALIGN="LEFT" WIDTH="63" HEIGHT="68" HSPACE="20" VSPACE="20">

16.Tabelas <TABLE>

A formatação de tabelas foi adotada bem antes de sua inclusão na definição de HTML. A manipulação de tabelas, mesmo em editores, é trabalhosa. A maior diferença entre tabelas em HTML e em editores como o MS-Word, entretanto, é o fato das tabelas em HTML serem definidas apenas em termos de linhas e não de colunas. Mas isso será percebido no decorrer deste capítulo. As tabelas foram uma grande conquista para os autores de documentos para a Web. Com elas é possível, por exemplo, termos páginas organizadas em colunas, sendo uma delas reservada aos links de navegação dentro de cada seção.

Tabelas implementam um conceito importante de layout: as “grades”, segundo as quais organizamos textos e ilustrações de maneira harmoniosa.

Como já foi possível perceber, as tabelas contêm textos, listas, parágrafos, imagens, formulários e várias outras formatações - inclusive outras tabelas. Novas versões de HTML e de browsers

populares vêm acrescentando diversos atributos às tabelas, e nosso objetivo aqui é saber lidar com a maioria desses recursos disponíveis.

Elementos básicos de tabelas

A base de uma tabela é determinada por <TABLE>...</TABLE> , que delimita uma tabela. Um atributo básico é BORDER, que indica a apresentação da borda.

<TABLE BORDER="borda">...</TABLE> Títulos, linhas e elementos

<CAPTION>...</CAPTION> Define o título da tabela <TR>...</TR> Delimita uma linha

<TH>...</TH> Define um cabeçalho (dentro de <TR>)

<TD>...</TD> Delimita um elemento ou célula (dentro de <TR>) Veremos agora um exemplo de tabela simples com borda.

É possível englobar colunas e linhas, através dos atributos COLSPAN (para colunas) e ROWSPAN (para linhas):

Neste exemplo, vemos que o cabeçalho Colunas 1 e 2 compreende duas colunas (COLSPAN=2); o cabeçalho 3 linhas compreende, por sua vez, 3 linhas (ROWSPAN=3).

Para uma página sem borda, podemos tratar de duas formas:

<TABLE BORDER="0">...</TABLE> ou <TABLE>...</TABLE>

Dica: A formatação de tabelas é complicada, pois dependendo do tamanho passa a ser complexa pois fazemos uso de seus diversos atributos. A melhor opção, sem dúvida, é usar os editores WYSIWYG(Como o quanta).

Diversas extensões de tabelas possibilitam a apresentação de efeitos muito bons nas páginas. A primeira delas é a cor de fundo e a cor da borda:

Observando agora os atributos CELLSPACING e CELLPADDING.

17.Listas

Há vários tipos de listas em HTML, sendo estas as mais usadas e corretamente apresentadas pelos browsers:

17.1. Listas de Definição

Estas listas são chamadas também “Listas de Glossário”, uma vez que têm o seguinte formato: Que produz:

Este tipo de lista é muito utilizado para diversos efeitos de organização de páginas, por permitir a tabulação do texto. Um exemplo é a lista composta abaixo:

17.2. Listas não-numeradas

São equivalentes às listas com marcadores do MS-Word, por exemplo:

A

diferença entre o resultado da marcação HTML e do Word está na mudança dos marcadores, assinalando os diversos níveis de listas compostas:

Resulta em:

17.3. Listas Numeradas

Resulta em:

Estas listas não apresentam numeração em formato 1.1, 1.2, etc., quando compostas apresentam-se da seguinte forma:

1. Documentos básicos 2. Documentos avançados 1. formulários

1. CGI 2. contadores 3. relógios

2. Detalhes sobre imagens

Porém, através do atributo TYPE (HTML 3.2), pode-se lidar com a numeração dos itens:

Resulta em:

Ainda segundo HTML 3.2, o atributo START pode indicar o início da numeração da lista:

Resulta em:

17.4. Listas e sub-listas

As listas podem ser aninhadas. Por exemplo:

18.Frames(Molduras)

Os frames são divisões da tela do browser em diversas telas (ou “quadros”). Com isso, torna-se possível apresentar mais de uma página por vez: por exemplo, um índice principal em uma parte pequena da tela, e os textos relacionados ao índice em outra parte (menus).

É muito fácil colocar frames em páginas, porém, nem todos os usuários gostam deles, pois nem sempre a navegação é fácil, além de problemas para a impressão e a marcação dos documentos interiores aos frames nos bookmarks. A alternativa natural para os frames são as tabelas.

Uma página com frames tem um texto fonte semelhante a:

A parte FRAMESET define a divisão da página em “quadros”. Neste exemplo, a página será dividida em duas colunas, sendo a primeira com 20% do tamanho da tela, e a segunda coluna com os restantes 80% da tela.

Dentro da formatação de FRAMESET, temos os FRAME SRC, que são referências às páginas que serão mostradas nos frames definidos

Assim, no código acima vemos que a página indice1.html será mostrada na primeira coluna (que ocupará 20% da tela), e a página apresenta.html será mostrada na segunda (ocupando 80% da

tela).

A formatação de frames inclui também uma parte NOFRAME, que é mostrada normalmente pelos browsers que não suportam sua apresentação.

19.Áudio e Vídeo

O uso de áudio e vídeo na Internet vem ganhando muito destaque nos últimos anos, e é bom saber como usar bem estas mídias.

Áudio e vídeo são classificados como "mídias contínuas", pois são geradas segundo

determinadas taxas, devendo ser reproduzidas nessa mesma taxa, para evitar distorções. Quanto mais informações de uma seqüência de áudio ou vídeo digital são armazenados, melhor a qualidade do áudio ou vídeo reproduzido. Isso implica, logicamente, no fato de arquivos de áudio e vídeo serem geralmente muito grandes, o que torna inviável o uso mais freqüente dessas mídias em páginas Web.

tecnologias recentes que permitem a transmissão em tempo real.

Áudio

Há duas maneiras de inserir som em uma página:

<EMBED SRC="arquivo_de_som.extens o"> ã

<BGSOUND SRC=" arquivo_de_som.extens o "> ã

Na primeira opção, insere o arquivo de som como objeto.

Na segunda faz com que o som seja inserido como som de fundo ou 'trilha sonora' de uma página. Esta formatação só funciona no Internet Explorer.

Essas formatações, porém, não farão efeito algum quando o browser não estiver configurado para "executar" o arquivo de som por meio de um plug-in adequado, ou se o computador em que estiver carregada a página não tiver instalada uma placa de som.

Tipos de arquivo de áudio

Os tipos de arquivo de áudio são escolhidos segundo o tipo de áudio (voz, sons, música), a aplicação

desse áudio e a qualidade de reprodução desejada. Aqui serão apresentados apenas os tipos mais comuns:

•AU (Sun Audio), usando pelas estações de trabalho da Sun Microsystems.

•AIFF, usado geralmente em máquinas Macintosh e Silicon Graphics.

•RIFF (Resource Interchange File Format): pode conter muitos tipos diferentes de dados, incluindo áudio digital (WAV) e MIDI. Geralmente, os "arquivos MIDI" do Microsoft Windows estão, na realidade, em formato RIFF e não MIDI.

•WAV (Wave) é um subconjunto da especificação RIFF.

•AVI (Audio Video Interleave), formato Microsoft.

•MPEG (Motion Pictures Expert Group): o padrão MPEG-3 (conhecido por MP3) é o padrão de compressão de áudio mais popular atualmente.

•MIDI (Musical Instrument Digital Interface) não é exatamente um formato de áudio, mas de representação de música. Um arquivo MIDI armazena informações sobre cada nota e instrumento e, a partir dessas informações, um sintetizador reproduz os sons. Por isso, uma música instrumental em MIDI geralmente produzirá um arquivo muito menor do que a mesma música em Wave ou qualquer outro formato.

Vídeo

A inserção de vídeo depende bastante do tipo de arquivo de vídeo que temos para inserir em uma página. De maneira geral, esta formatação pode servir para a inserção de um arquivo QuickTime: <EMBED SRC="arquivo_de_video.extensão">

Uma formatação mais completa inclui a indicação do plug-in e controles da reprodução do vídeo.

20.Outros  

Blink

Netscape.

O perigo de se usar o BLINK é que, se sua página já apresenta cores, desenhos, cabeçalhos, todos efeitos que chamam a atenção do leitor, o BLINK será um fator ainda mais chamativo, o que causa um efeito final cansativo e confuso.

Evite usar o BLINK. É possível substituir esse recurso por outros efeitos de JavaScript.

Felizmente, são poucos os browsers que mostram o efeito dessa formatação. O Internet Explorer é um dos browsers que não consideram o BLINK.

Ao usar o BLINK, aplique-o somente em pequenos detalhes (palavras ou flechinhas), nunca em grande quantidade, muito menos em frases inteiras ou cabeçalhos.

Marquee

É possível obter o efeito de animação de texto, através desta TAG . <MARQUEE BEHAVIOR=efeito> Texto </MARQUEE>

Atributos de largura e direção do efeito permitem diversas apresentações diferentes, por exemplo:

<MARQUEE BEHAVIOR=SCROLL WIDTH=30%> Texto </MARQUEE> <MARQUEE BEHAVIOR=SLIDE DIRECTION=RIGHT> Texto </MARQUEE> <MARQUEE BEHAVIOR=SLIDE DIRECTION=LEFT> Texto </MARQUEE> Atenção: O efeito Marquee só é executado no Internet Explorer e em versões recentes do Netscape - e de maneiras diferentes. Fontes

http://pinga.eep.br/~fzenaro/apostila_html.pdf - Profa. Flávia Pereira de Carvalho