CAMINHA, Adriano. HTML 4

Adriano Caminha
adriano@templojava.org
www.templojava.org
© 1999 – 2005 Adriano Caminha
SUMÁRIO
INTRODUÇÃO À INTERNET E A THE WORLD WIDE WEB ............................................................................ 4

A Internet ............................................................................................................................................... 4
Endereçamento Internet ....................................................................................................................... 4
Endereçamento Web............................................................................................................................. 5
Principais Serviços Internet ................................................................................................................. 5
The World Wide Web ............................................................................................................................ 5
Arquitetura Cliente Servidor ................................................................................................................ 6
DEFINIÇÕES DA HTML ...................................................................................................................................... 7

Estilo de Programação ......................................................................................................................... 7
Elementos de um Projeto Web ............................................................................................................ 8
Comandos HTML (Tags) ....................................................................................................................... 9
Regras HTML e Dicas ........................................................................................................................... 9
Observações em Relação aos Nomes dos Arquivos ........................................................................ 10
Software Utilizado ................................................................................................................................. 10
Documento Básico HTML .................................................................................................................... 11
TAGS POR CATEGORIA ................................................................................................................................... 12

Tags de Estrutura de Documento ....................................................................................................... 12
Tags de Formatação de Texto ............................................................................................................. 15
Tags de Apresentação .......................................................................................................................... 18
Tags de Links (Vínculos) ...................................................................................................................... 19
Tags de Listas ....................................................................................................................................... 23
Tabelas ................................................................................................................................................... 25
Conjunto de Caracteres Especiais ISO .............................................................................................. 30
Frames (Molduras) ................................................................................................................................ 32
Imagens na Web .................................................................................................................................... 36
Tipos de Arquivos de Imagens ................................................................................................... 36
Observações .............................................................................................................................. 36
Cores na Web ............................................................................................................................ 37
RGB vs. CMYK ........................................................................................................................... 37
Alta Resolução e Baixa Resolução ............................................................................................ 37
Profundidade de Bits .................................................................................................................. 37
Pontilhamento e Separação por Bandas ................................................................................... 38
Profundidade de Bits do Monitor ................................................................................................ 38
Cores Hexadecimais .................................................................................................................. 38
Cores Protegidas para Navegadores ......................................................................................... 39
Por que Trabalhar com um Paleta Limitada ? ........................................................................... 39
Trabalho Baseado em Fotografias ............................................................................................. 39
HTML 4 - © 1999-Adriano Caminha - adriano@krueger.com.br 2

Tag de Inclusão de Imagens ................................................................................................................ 40
Image Maps............................................................................................................................................ 41
Tags de Inclusão de Applets Java ...................................................................................................... 42
Scripts .................................................................................................................................................... 44
Tags de Inclusão de Scripts ................................................................................................................ 44
Eventos de Programação Intrínsecos................................................................................................. 45
Tags de Inclusão de Objetos ............................................................................................................... 47
Forms + CGI + Gateways ...................................................................................................................... 48
Tags de Formulários ............................................................................................................................. 50
FOLHAS DE ESTILO EM CASCATA (CSS) ...................................................................................................... 55

Sintaxe das Folhas de Estilo ............................................................................................................... 56
Famílias de Propriedades das Folhas de Estilo ................................................................................ 57
Propriedades de Caixa ............................................................................................................... 57
Propriedades de Classificação ................................................................................................... 59
Propriedades de Fonte ............................................................................................................... 60
Propriedades de Texto ............................................................................................................... 62
Propriedades de Segundo Plano ............................................................................................... 63
CSS2 .......................................................................................................................................... 64
PROJETO: PERSONAL HOME PAGE .............................................................................................................. 66

Sugestão de Nomes de Arquivos e Títulos dos Documentos ......................................................... 66
Mapa do Site .......................................................................................................................................... 66
Requerimentos Mínimos ...................................................................................................................... 67
BIBLIOGRAFIA ................................................................................................................................................... 68

1. INTRODUÇÃO À INTERNET E A THE WORLD WIDE WEB
A INTERNET
A Internet é a rede mundial de computadores e interliga várias redes de computadores (instituições

educacionais, governamentais, comerciais, etc). Milhares de pessoas trabalham na expansão e
administração destas redes. A rede mundial compreende recursos de informação tão vastos que estão
além da compreensão humana.
A Internet surgiu nos anos 70, a partir de uma rede de computadores chamada ARPANET, patrocinada
pelo departamento de defesa dos EUA, com fins militares. Com o desenvolvimento de redes em
instituições educacionais e interligação destas, a Internet cresceu, se expandindo mais ainda com o
início da sua utilização para fins comerciais, chegando aos patamares que temos hoje.
O sucesso da Internet está na quantidade de informação disponível e nas possibilidades de

comunicação que podemos ter através dela.
ENDEREÇAMENTO INTERNET
nome@dominio
nome = identificação do usuário (geralmente o mesmo usado no login)
@ = pronuncia-se "et" para significar "em" (AT = preposição em inglês indicando lugar)
domínio = nome do computador onde "está localizado" o usuário "nome". É formado por
subdomínios, como segue :
subdom.subdom.subdom . . . subdom (mínimo de 2)
O subdomínio mais a direita é chamado "Domínio de Alto Nível" e os domínios são interpretados da
direita para a esquerda.
IMPORTANTE: Alguns sistemas operacionais utilizados em computadores na Internet diferenciam

caracteres maiúsculos de minúsculos (são Case Sensitive). Os endereços Internet são
comumente escritos em minúsculos.

ENDEREÇAMENTO WEB
O endereçamento Web é feito através da URL (Universal Resource Location), local onde está
armazenado o arquivo ou documento Web e é sempre do tipo: http://www.dominio/
Onde: domínio = subdominio.subdominio ... subdominio
http = Hipertext Transfer Protocol (Protocolo de Transferência de Arquivos Hipertexto)
Uma URL pode ser também apenas o nome de um recurso Web (nomearquivo.extensão), se os arquivos
que o referenciarem estiverem no mesmo local (diretório).
PRINCIPAIS SERVIÇOS INTERNET
Correio Eletrônico (E-Mail)  Permite o envio e o recebimento de mensagens entre os usuários.
Telnet (Login Remoto)  Permite o login em um Host Internet. Utilizado antes do FTP, e para
verificação de contas distantes.
FTP (File Transfer Protocol)  Protocolo de Transferência de Arquivos. Permite a transferência de

arquivos entre computadores. Este serviço é usado pelos webmasters para a publicação dos sites na
Web.
Download - "Descarregamento" de um arquivo de um servidor para um computador cliente.
Upload - Transferência de um arquivo, de um cliente para um servidor.
Gopher  Arquivos textuais que podem ser acessados via menus interativos baseados em hipertexto.
Já está praticamente obsoleto. O Gopher foi substituído por um serviço Internet hipermídia chamado
WWW.
THE WORLD WIDE WEB
A World Wide Web (WWW ou Web) é o serviço de informações Internet que utiliza a hipermídia como
base para a navegação através das informações desejadas. Esta navegação é possível através de um
programa (ou janela) chamado Browser (ou navegador).
Hipertexto - utilização de uma estrutura organizacional textual onde os textos estão unidos por
ligações (links) a partir de palavras-chave (Hot Words).
Hipermídia - conceito idêntico ao de hipertexto mas com links a partir de vários tipos de mídia e
que levam a vários tipos de mídia.

Com o uso da Hipermídia é possível utilizar recursos multimídia para melhorar a compreensão do
usuário, bem como tornar as informações mais atraentes e agradáveis.
A WWW é também uma tentativa de unificação dos serviços Internet, disponibilizados através das
páginas web. Ela foi desenvolvida originalmente na Suíça, no centro de pesquisas CERN, em 1990, com
o intuito de criar uma maneira de compartilhar o trabalho e usar informações da comunidade nas
pesquisas deste centro.
ARQUITETURA CLIENTE-SERVIDOR
A arquitetura Cliente-servidor é a arquitetura mais comum dos computadores ligados na Internet. No

servidor, que possui discos com bastante espaço para armazenamento, estão armazenados os
programas e arquivos dos usuários, além de todos os protocolos para controle de todas as transações
entre os terminais da rede (um computador em uma rede local ou o seu computador em casa) e o
servidor. Os terminais são geralmente computadores que não possuem grandes discos rígidos (às vezes
não possuem nenhum) e que só operam a partir da conecção com o servidor. Quando você se liga a um
provedor através de uma linha telefônica, o seu computador funcionará como um terminal, se
considerarmos apenas as operações que são feitas remotamente, através do servidor do provedor.
Servidor  armazena arquivos e programas que serão

compartilhados pelos clientes. Controla o
compartilhamento através de protocolos e prioridades.
Clientes  utilizam os serviços e programas do

servidor.

2. DEFINIÇÕES DA HTML
Os documentos na Web são organizados com o uso de comandos que são interpretados pelos
browsers. Estes comandos compõem a linguagem HTML (HyperText Markup Language).
A linguagem HTML é uma linguagem utilizada para definir a aparência (formatação) dos documentos na
Web.
Atualmente, a versão 4 da HTML é a linguagem de programação padrão da Web. A HTML 4 contém 86

comandos de marcação. Omitiremos, porém, alguns destes comandos que já estão em desuso pelos
programadores de uma forma geral e que provavelmente serão omitidos em uma nova versão da HTML.
Para saber mais visite o site oficial do W3C (World Wide Web Consortium), grupo responsável pela
determinação e publicação de padrões da Web, em:
http://www.w3.org/MarkUp
Uma DTD (Document Type Definition), definição do tipo de documento, é uma descrição formal da
estrutura de um documento. Uma DTD indica quais definições e elementos estruturais de marcação
podem ser usados na criação de documentos. Para ver a DTD da HTML 4, visite:
http://www.w3.org/TR/WD-html40/sgml/HTML4.decl
ESTILO DE PROGRAMAÇÃO
Algumas características da programação Web são utilizadas pela maioria dos programadores Web com
o objetivo de facilitar a leitura da informação pelo usuário e a manutenção dos documentos (código
fonte). São elas:
- Necessidade de "higiene" na escrita do código;
- Organização através de:

Indentação  escrita de código utilizando tabulação segundo uma hierarquia de
comandos;
Comentários Internos  inserção de comentários no código fonte (Source Code),
arquivo de texto que define a página Web, contendo os
comandos HTML;
- Comandos escritos com maiúsculas;
- Divisão da informação em vários documentos;
- Arquivos de tamanhos pequenos.

ELEMENTOS DE UM PROJETO WEB
Página Web - Arquivo de texto formatado com HTML (segundo as convenções da linguagem).
Home Page - Página pessoal ou página inicial do site.
Web Site - Sítio, lugar; conjunto de páginas HTML que contém informações relacionadas. Também
podem fazer parte de um Web Site arquivos de texto, programas, imagens, etc.
Estrutura de um Web Site – Um Web Site pode estar organizado de três maneiras:
1. Seqüencial
2. Árvore
3. Mista

COMANDOS HTML (TAGS)
Os comandos HTML são descritores que indicam ao browser como as informações devem aparecer e
são chamados de tags. São escritos obrigatoriamente entre os sinais "<" (menor que) e ">" (maior que).
Formas dos Comandos HTML  Os tags podem ser:
- Abertos (simples): <comando>
- Fechados: <comando> . . . </comando>
- Compostos: <comando>
<elemento 1> ... </elemento 1>
<elemento 2> ... </elemento 2>
....
<elemento n> ... </elemento n>
</comando>
REGRAS HTML E DICAS
 Fechar sempre os tags fechados e compostos;
 NUNCA esquecer um sinal de “<” ou de “>”, no início ou no fim do tag;
 Não usar espaços no tag (no interior dos sinais “<” e “>”).
 EX: </ comando>  ERRADO!!!

< com an do>  NUNCA!!!!
 Os agrupamentos de espaços colocados FORA dos tags serão interpretados como apenas
um espaço. Fora dos tags não há restrição do uso dos espaços;
 NOMES DOS TAGS  Maiúsculas (não é estritamente necessário mas facilita a leitura e
tomaremos como convenção para os nossos códigos);
 NOMES DOS ARQUIVOS (inclusive extensão “.html” ou “.htm”)  Minúsculas;
Algumas dicas importantes para o seu sucesso na Web:
 Seja um observador da HTML  é uma das maneiras mais fáceis de se familiarizar com as
convenções da linguagem além de aprender sempre mais com outros programadores. Ao visitar um
Web Site visualize o código da página clicando em View/Source Code (Visualizar/Código Fonte ou
Exibir/Origem da Página) no menu do seu navegador (ou usando o botão direito do mouse);

 Confirme seu código HTML  é possível verificar se o seu código fonte HTML segue os padrões
atuais e não contém erros. Visite:
http://validator.w3.org/
 Outras dicas interessantes:
 Verifique suas páginas com diferentes navegadores e em diferentes plataformas para assegurar
que você terá uma experiência de visualização consistente;
 Como a maioria dos usuários Web ainda se conectam a velocidades como 14,4 Kbs ou 28 Kbs,
verifique se suas páginas podem ser visualizadas com estes modens;
 Revise a grafia e a gramática antes de publicar a sua página (peça que outra pessoa a leia).
Verifique todos os links entre as páginas. Esta dica é simples mas muitas pessoas esquecem
dela e publicam péssimos trabalhos;
 Em vez de fazer seu vínculo de texto com coisas chatas do tipo ‘Clique aqui!’, procure ser mais
específico, use ‘Iniciar’, ‘Transferir’, ou outra;
 Não coloque informações do tipo “Este site está em processo de criação” (geralmente
acompanhada de sinais amarelos), pois praticamente todos os sites da Web estão em criação e
em desenvolvimento. É preferível não colocar nada a colocar uma página com um aviso deste
tipo;
 Peça a opinião de outras pessoas antes de publicar o seu site, o olhar crítico de alguém pode
detectar erros que não foram percebidos por você.
OBSERVAÇÕES EM RELAÇÃO AOS NOMES DOS ARQUIVOS
 Usaremos sempre e somente minúsculas;
 As extensões ".html" ou ".htm" são importantes quando o servidor Web está identificando o
arquivo. Usaremos como convenção para os nossos trabalhos a extensão ".html";
 Os nomes devem iniciar com uma letra obrigatoriamente;
 Pode-se utilizar caracteres como "-" e "_";
 Procure usar nomes significativos, que remetam ao conteúdo do arquivo.
SOFTWARE UTILIZADO
Para edição de páginas Web existem várias ferramentas disponíveis no mercado que facilitam esta
tarefa, mas, para esta etapa de aprendizagem, aconselho o uso de um editor de texto comum (o
Notepad ou Bloco de Notas, p.e.) e um browser para visualização (I. Explorer, Netscape ou outro).

DOCUMENTO BÁSICO HTML
<HTML>
<HEAD>
<TITLE> Titulo da Página </TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Um documento HTML básico é composto de três partes:

- A declaração de informações da versão;
- A seção de cabeçalho descritiva;
- O corpo do conteúdo.
Analisaremos, mais adiante, cada um destes tags.

3. TAGS POR CATEGORIA
TAGS DE ESTRUTURA DE DOCUMENTO
<!DOCTYPE> - (Tag Simples)
Identificação da versão HTML usada no documento. Obrigatório para ajudar os navegadores e

ferramentas de validação na determinação da versão HTML da página.
Atributo: (os atributos de um tag são colocados depois do nome do tag e são separados por
espaços)
 HTML PUBLIC "Nome da Versão"

- Atributo obrigatório que deve conter o nome completo da versão HTML.
Para HTML 4: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
Onde: W3C  World Wide Web Consortium;
DTD  Document Type Definition;

EN  Encoded.
<ADDRESS> ... </ADDRESS> - (Tag Composto)
Contém informações de crédito e referência sobre um documento HTML e geralmente inclui

nome e endereço do autor, informações para contatos, etc. É usado no final do documento e os
itens incluídos geralmente são apresentados em itálico, pelo browser.
Atributos: Nenhum

<BODY> ... </BODY>
Definição do corpo do documento HTML. Tag obrigatório para páginas que não usem Frames.
Atributos:
1. BGCOLOR = #RRGGBB | NOME_DA_COR ( | significa símbolo lógico OU)

- Define cor do segundo plano da página.
2. TEXT = #RRGGBB | NOME_DA_COR
- Cor do Texto
3. LINK = #RRGGBB | NOME_DA_COR
- Cor dos links
4. ALINK = #RRGGBB | NOME_DA_COR
- Cor dos links ativos
5. VLINK = #RRGGBB | NOME_DA_COR
- Cor dos links visitados
6. BACKGROUND = "URL"
- Define imagem a ser usada como "papel de parede" da página.
Ex: <BODY BGCOLOR=#000080 TEXT=#FFFFFF LINK=#FFFF00 ALINK=#FF0000

VLINK=#808080>
Exemplos de cores: ACQUA = #00FFFF, FUCHSIA = #FF00FF
<DIV> ... </DIV>
Indica divisões em um documento e pode ser usado para agrupar elementos em um bloco.
Atributo:
 ALIGN = LEFT | RIGHT | CENTER | JUSTIFY

- Especifica alinhamento horizontal padrão para o conteúdo incluído.
OBS: Use <CENTER> em vez de <DIV ALIGN=CENTER>. <DIV> não pode ser usado com <P>
porque um elemento <DIV> terminará em um parágrafo.
<H1> . . . </H1> - <H6> . . . </H6>
Títulos e subtítulos. Ajudam a adicionar estrutura e divisões ao seu documento tornando-o

organizado. Podem ser substituídos pelo tag que define o tamanho e atributos de fontes.
Atributos: Nenhum

<HEAD> . . . </HEAD>
Bloco de cabeçalhos de documento. Define informações sobre um documento HTML incluindo

título, metainformações, vínculos para outros documentos HTML.
Atributo:
 PROFILE=”URL”
- Define a localização de um metadicionário ou perfil. Quase nunca usado.
<HTML> . . . </HTML>
Define um documento HTML inteiro e é o nível mais externo de sua estrutura.
Atributo:
 VERSION=”URL”
Define a DTD para interpretação do documento. Quase nunca usado. Geralmente são as
mesmas informações contidas em DOCTYPE.
<META>
Usado dentro de HEAD para incorporar metainformações do documento. Essas informações

podem ser extraídas pelos servidores/clientes e serem usadas na identificação, indexação e
catalogação de metainformações especializadas deste documento HTML. Para a indexação
automática, as metainformações podem tornar as informações mais acessíveis a sites índices,
spiders e robôs.
Atributos:
1. NAME=”texto”
- Nomeia uma propriedade como autor, data de publicação, etc.
2. CONTENT=”texto”
- Fornece um valor para uma propriedade nomeada.
3. HTTP-EQUIV=”tipo de recurso”
- Vincula o elemento a um cabeçalho de resposta HTTP. Se o cabeçalho de
resposta HTTP for conhecido, o conteúdo poderá ser processado, senão, o atributo NAME
será usado para identificar essas metainformações e não deve ser usado dentro de um
cabeçalho HTTP.

Exs:
<META NAME=”keywords” CONTENT=”palavra-chave1, palavra-chave2, palavra-chave3,

palavra-chave4, palavra-chave5”>
- Palavras-chave para mecanismos de busca como o Altavista ou o Infoseek.
<META HTTP-EQUIV=”reply-to” CONTENT=”nomedousuario@dominio.nome”>
- Endereço do autor ou responsável pelo conteúdo e manutenção do documento.
<META HTTP-EQUIV=”copyright” CONTENT=”nome-data”>
- Proprietário e data do copyright.
<TITLE> ... </TITLE>
Inclui um título de um documento HTML, que aparecerá na barra de título da janela do browser.
Use um título descritivo e significativo, isto ajudará os mecanismos de busca e ferramentas da
Web a localizarem seu conteúdo.
Atributos: Nenhum

Inclui um comentário no código fonte de um documento HTML. O texto é ignorado pelo

navegador. Usado para documentar seus arquivos, fazer anotações que facilitem a leitura e
manutenção do documento, ou outras informações. Pode ser usado para testar exclusões de
seções de uma página Web.
Atributos: Nenhum
TAGS DE FORMATAÇÃO DE TEXTO
<ACRONYM> . . . </ACRONYM>
Marca um texto incluído como um acrônimo, por exemplo TCP/IP (Transfer Control
Protocol/Internet Protocol).
Atributo:
 TITLE=”texto”
Fornece a versão expandida do acrônimo e aparece em uma caixa suspensa quando o
mouse está sobre ele.

<BLOCKQUOTE> . . . </BLOCKQUOTE>
Usado para indentação de blocos de texto.
Atributo:
 CITE=”texto”
Fornece informações sobre a fonte, caso o bloco seja uma citação.
<BR>  Quebra de linha forçada no texto. Para textos que devem ser quebrados em locais específicos
<CITE> ... </CITE>  Para destacar citações.
<CODE> ... </CODE>  Exemplos de código de programa.
<B> ... </B>  Negrito
<STRONG> ... </STRONG>  Fortemente enfatizado
<I> ... </I>  Itálico
<EM> ... </EM>  Enfatizado
<DFN> ... </DFN>  Definição de um termo usado pela primeira vez.
<STRIKE> ... </STRIKE>  Texto riscado
<TT> ... </TT>  Caracteres semelhantes aos de uma máquina de escrever
<SAMP> ... </SAMP>  Exemplo de saída de um programa.
<U> ... </U>  Texto sublinhado
<S> ... </S>  Texto tachado

<KBD> ... </KBD>  Teclado. Indica que o texto deve ser digitado.
<VAR> ... </VAR>  Destaca nomes de variáveis ou argumentos nos comandos.
<BIG> ... </BIG>  Grande
<SMALL> ... </SMALL>  Pequeno
<SUB> ... </SUB>  Subscrito
<SUP> ... </SUP>  Sobrescrito
<Q> . . . </Q>
Para destacar citações curtas de recursos externos.
Atributo:
 CITE=”texto”
Fornece informações sobre a origem da citação.
<P> (</P> opcional)
Parágrafos. Quebra de linha com espaço de uma linha em branco.
Atributo:
 ALIGN = LEFT | RIGHT | CENTER | JUSTIFY

Especifica alinhamento horizontal padrão para o conteúdo incluído.
<PRE> ... </PRE>
Textos pré-formatados. Apresenta o texto na forma como foi inserido no arquivo HTML.
ATENÇÃO: cuidado com a diferença entre os browsers.

OBSERVAÇÕES:
Tags Físicos: <TT> <I> <B> <STRIKE> <BIG> <SMALL> <SUB> <SUP>
Não sofrem alterações relativas ao browser em uso.
Tags Lógicos: <EM> <STRONG> <DFN> <CODE> <SAMP> <KBD> <VAR> <CITE>
Podem ser configurados pelo usuário no browser, ou seja, cada usuário pode definir, no
próprio navegador, o efeito correspondente.
TAGS DE APRESENTAÇÃO
<FONT> ... </FONT>
Define o tamanho, a fonte e a cor do texto inserido.
Atributos:
1. COLOR = #RRGGBB | NOME_DA_COR

Define a cor da fonte.
2. FACE = “nomefonte1, nomefonte2,nomefonte3”
Define a tipologia, ou seja, com que tipo de fonte será mostrado o texto no browser.
3. SIZE = “número”
Tamanho da fonte (entre 1 e 7). Um sinal de adição ou subtração antes do número
significa tamanho relativo à configuração de fonte atual.
Ex: <FONT COLOR=#000080 FACE=”Arial” SIZE=1>
<CENTER> ... </CENTER>
Indica que o texto deve ser centralizado horizontalmente.
Atributos: Nenhum

<HR>
Desenha uma régua horizontal atravessando a página, geralmente com um ou dois pixels de
largura. Usada para enfatizar divisões naturais no documento HTML.
Atributos:
1. ALIGN = LEFT | RIGHT | CENTER | JUSTIFY

- Especifica alinhamento horizontal padrão para a régua.
2. NOSHADE
- Define a régua sem sombreamento 3D.
3. SIZE = “número”
- Define a altura da régua, em pixels.
4. WIDTH = “número” | “%”
- Define a largura da régua, em pixels ou em percentual em relação à largura da
janela.
TAGS DE LINKS (VÍNCULOS)
Âncoras Externas – Ligação (link) entre uma hotword de um arquivo hipertexto para outro arquivo.
Hotword  Palavra, imagem ou área marcada como ORIGEM de uma ligação hipertexto.
Na web, as hotwords são chamadas apenas de “links” e podem levar a páginas web e a arquivos em
qualquer lugar da rede mundial.
Âncoras Internas – Para navegar dentro do próprio documento. São links que levam a outras partes do
mesmo arquivo. É mais usado com arquivos extensos.

<A > ... </A>
Define um vínculo clicável para outro recurso Web ou para um ponto específico em uma página
Web.
Atributos:
1. HREF = “URL”
Define o endereço do recurso Web destino. Para links internos, a URL deve ser o nome
do rótulo dado a um trecho da própria página Web, precedido do sinal “#”. Exemplo: <A
HREF = “#parte3”>....</A>.
2. NAME = “texto”
Rotula um destino para uma âncora interna, ou seja, marca um recurso dentro do
documento que será o destino de um link definido anteriormente dentro do documento.
3. REL = “texto”
Indica a extremidade de origem de um vínculo e especifica o seu tipo. Pouco usado.
4. REV = “texto”
Indica a extremidade de destino de um vínculo e especifica o seu tipo. Pouco usado.
5. TARGET = “janela”
Especifica o carregamento do vínculo na janela de destino. Pode ser usado com
FRAMESET, onde a moldura tenha sido nomeada no elemento FRAME. A janela de
destino pode ser um dos seguintes valores:
window – Especifica o carregamento do vínculo na janela de destino. Deve começar

com um caractere alfanumérico, com as seguintes exceções:
_blank | _new – Carrega o vínculo em uma nova janela em branco;
_parent – Carrega o vínculo no documento principal em que se encontra o vínculo;
_self – Carrega na mesma janela do vínculo;
_top – Carrega no corpo completo da janela, ignorando o esquema de frames.
Ex1: <A HREF=”http://www.jb.com.br” TARGET=”_new”>Jornal do Brasil</A>
OBS: Para âncoras internas, marque o destino com <A NAME=”rotulo”>texto destino</A> , e
a origem com <A HREF=”#rotulo”>link origem</A>. É obrigatório o uso do sinal “#” antes do
rótulo de uma âncora interna.

<BASE>
Ocorre dentro de <HEAD> ... </HEAD> e estabelece a URL base para todas as definições de
links dentro do documento. Com este recurso as URLs de vínculos podem ser escritas mais
rapidamente mas, se a URL base estiver definida como um endereço de servidor (http://www...),
todas as vezes que o usuário clicar em algum vínculo, será ativada uma nova chamada ao
servidor HTTPD, o que tornará o carregamento das suas páginas um pouco mais lento. Só use
em casos extremos, em que todos os vínculos da página referenciarem para outro servidor que
não o atual (onde a página está).
Atributos:
1. HREF = “URL”
Define o URL absoluto ou relativo para a página atual.

Ex: <BASE HREF=”http://www.cos.ufrj.br” TARGET=”principal”> , onde principal é o nome de um

frame.

<LINK>
Ocorre dentro de <HEAD> ... </HEAD> e fornece informações que vinculam o documento atual a
outros documentos ou recursos. Costuma ser usado em atribuições de autoria, glossários,
tutoriais e informações sobre versões desatualizadas ou mais recentes do documento.
Atributos:
1. HREF = “URL”
Define o URL destino do vínculo acessível por meios normais de vínculo da Web.
2. MEDIA = SCREEN | PRINT | PROJECTION | BRAILLE | SPEECH | ALL
Identifica o ambiente ideal para a página Web. Pode especificar um dos seguintes meios:
SCREEN – Tela;
ALL – Padrão;
PRINT – Impressora ou similar;
PROJECTION – Projetor;
SPEECH – Indica que é um texto para ser lido em discurso;
BRAILLE – Aparelho para leitura em Braille (alfabeto apropriado para deficientes
visuais).
3. REL = “texto”
Indica a extremidade de origem do vínculo e especifica o seu tipo. Pouco usado.
4. REV = “texto”
Indica a extremidade de destino do vínculo e especifica o seu tipo. Pouco usado.

6. TYPE = “MIME”
Especifica o tipo MIME (Multipurpose Internet Mail Extensions) do recurso vinculado.
Veja os tipos mime em:
ftp://ftp.isi.edu/m-notes/iana/assignments/media-types/media- types

TAGS DE LISTAS
As listas devem apresentar pontos, etapas ou itens de dados específicos antes ou depois do texto de
conteúdo relacionado a elas. Definem várias formas de apresentar listas de itens em páginas Web.
<UL> ... </UL>
Lista de itens com marcadores, na qual a ordem dos itens não importa.
Atributos:
1. COMPACT
Apresenta a lista de forma compacta (já está depreciado).
2. TYPE = DISC | SQUARE | CIRCLE
Define o desenho do marcador, disco, quadrado ou círculo.
<LI>
Define os itens de listagem.
Atributos:
1. TYPE = DISC | SQUARE | CIRCLE | 1 | a | A | i | I

Define o desenho do marcador, disco, quadrado ou círculo, para listas sem ordem e a
aparência do número para listas ordenadas (OL).
2. VALUE = número
Define a contagem à medida que a lista vai aumentando.
<OL> ... </OL>
Lista de itens com marcadores ordenada. Usadas em instruções passo a passo, por exemplo.
Atributos:
1. TYPE = 1 | a | A | i | I
Define a aparência dos números dos itens da lista.
2. COMPACT
3. START = “valor”
Indica o número inicial da lista.

<MENU> ... </MENU>
Listas semelhante às listas sem ordem (UL) mas apresentada de forma mais compacta. Muito
pouco usada.
Atributos:
 COMPACT
<DL> ... </DL>
Lista de definições. Usada em situações em que termos da lista necessitam de definições, como
em dicionários ou glossários. São compostas por itens de definição (DT), que ficam mais a
esquerda, e suas definições (DD), que são recuadas levemente para a direita.
Atributos:
 COMPACT
<DT> ... </DT>
Termo de definição em uma lista de definições (DL).
Atributos: Nenhum
<DD> ... </DD>
Parte descritiva ou de definição de um elemento de lista de definições. É exibido mais à direita

do item.
Atributos: Nenhum
Ex: <DL>
<DT> Item 1
<DD> Este é o texto que define o item 1.
<DT> Item 2
<DD> Este é o texto que define o item 2.
</DL>

TABELAS
As tabelas têm a função de dividir uma determinada área em subáreas (células), para publicação de
informações em linhas e colunas. É um dos recursos mais usados para diagramação de páginas Web.
Tabelas são essenciais para implementação de layouts profissionais na Web.
É necessário saber a função de cada tag e de cada atributo, seus valores default (padrão) e os efeitos
dos valores permitidos. O erro mais comum é não fechar os tags compostos e não observar a ordem
correta dos mesmos. O uso de indentação facilita o desenvolvimento e a leitura do código durante a
programação.
<TABLE> ... </TABLE>
Cria uma tabela.
Atributos:
1. ALIGN = LEFT | RIGHT | CENTER

Especifica o alinhamento da tabela em relação ao documento.
Valores :
LEFT - Alinha a tabela do lado esquerdo do documento – DEFAULT;
RIGHT - Alinha a tabela do lado direito do documento;
CENTER - Centraliza a tabela.
2. BGCOLOR = #RRGGBB | NOME_COR
3. BORDER = número
Tamanho da borda. DEFAULT = 1.
4. CELLPADDING = número
Quantidade de espaço, em pixels (unidade de medida da tela do monitor. Um ponto da
tela), entre os lados de uma célula e o seu conteúdo.
5. CELLSPACING = número
Define espaço entre células.
6. COLS = número_de_colunas

7. FRAME = VOID | ABOVE | BELOW | HSIDES | LHS | RHS | VSIDES | BOX | BORDER
Define a moldura da tabela (bordas externas)
Valores
VOID - remove as bordas;
ABOVE - borda na parte superior;
BELOW - borda na parte inferior;
HSIDES - borda na parte;
LHS - borda no lado esquerdo;
RHS - borda no lado direito;
VSIDES - esquerda e direita;
BOX - todos os lados da tabela;
BORDER - (Idem box).
8. RULES = NONE | GROUPS | ROWS | COLS | ALL

Define linhas de divisão (bordas internas).
Valores
NONE - remove bordas internas;
GROUPS - bordas horizontais nos grupos da tabela. (<THEAD>, <TBODY>,
<TFOOT>, <COLGROUP>);
ROWS - bordas horizontais em todas as linhas;
COLS - bordas verticais em todas as colunas;
ALL - bordas em todas as linhas e colunas.
9. WIDTH = pixels | "%"

Define a largura da tabela.
<TR> ... </TR>
Cria linhas de tabelas.
Atributos:
1. ALIGN = LEFT | RIGHT | CENTER | JUSTIFY | CHAR

Alinhamento horizontal do texto (conteúdo).
Valores:
LEFT, RIGHT, CENTER, JUSTIFY - iguais a texto;
CHAR = texto alinhado ao caractere especificado em CHAR.
3. CHAR = "caractere"
Define a que caractere o texto será alinhado ao usar ALIGN = CHAR e quando o atributo
CHAR OFF está presente.

4. CHAROFF = número
Distância, em pixels, do alinhamento do texto em relação ao caractere de CHAR.
5. VALIGN = TOP | MIDDLE | BOTTOM | BASELINE

Alinhamento vertical de texto nas células da linha.
Valores:
TOP - o texto é alinhado na parte superior da célula;
MIDDLE - o texto é alinhado no meio;
BOTTOM - o texto é alinhado na parte inferior;
BASELINE - o texto é alinhado com a linha de base comum a todas as células na
linha.
<TD> ... </TD>
Cria uma célula em uma tabela.
Atributos:

Idem TR.
2. AXIS = “texto”
Descrição abreviada do conteúdo.
3. AXES = “texto”
Fornece uma lista dos cabeçalhos de linha e coluna relacionados com a célula (o texto
deve ser separado por vírgulas).
7. COLSPAN = número
Indica por quantas colunas a célula se estende.
8. ROWSPAN = número
Indica por quantas linhas a célula se estende.
9. NOWRAP
Trunca o conteúdo do texto se o mesmo ultrapassar o limite da célula.

Idem TR.

Ex: Tabela Básica
<TABLE> 

<TR> Linha 1 Inicio
<TD> Célula 1, 1 </TD>
</TR> Linha 1 (Fim)
<TR> Linha 2 Inicio
</TR>
</TABLE>
<THEAD> ... </THEAD>
Usado dentro de TABLE para criar o cabeçalho da tabela.
Atributos: Nenhum
<TH> ... </TH>
Define um cabeçalho de linha ou coluna, exibido em negrito ou itálico.
Atributos :
2. AXIS = “texto”
3. AXES = “texto”
7. COLSPAN = número
8. ROWSPAN = número
9. NOWRAP
<TFOOT> ... </TFOOT>
Rodapé de tabela.
Atributos: Nenhum

<TBODY> ... </TBODY>
Corpo de tabela. Separa as células do corpo da tabela quando são usados cabeçalho e rodapé.
O uso de <TBODY> várias vezes é útil para dividir grandes tabelas em partes menores.
Atributos: Nenhum
<CAPTION> ... </CAPTION>
Inclui uma legenda na tabela
Atributo:
 ALIGN = LEFT | RIGHT | TOP | BOTTOM

Alinhamento da legenda na tabela.
<COLGROUP>
Define a propriedade de uma ou mais colunas. Usado quando grupos diferentes de colunas
exigirem diferentes propriedades.
Atributos :
2. CHAR = "texto"
4. SPAN = " número "

Número de colunas consecutivas as quais as propriedades estão definidas.
6. WIDTH = número
Define a largura de cada coluna.
Ex: Definição de Propriedades de Colunas
<TABLE>
<COLGROUP><COL ALIGN=CENTER><COL ALIGN=LEFT>
<COLGROUP><COL ALIGN=RIGHT>
<TBODY>
<TR> <TD> 1a Coluna<BR> (alinhada no centro)</TD>
<TD> 2a Coluna<BR> (alinhada à esquerda)</TD>
<TD> 3a Coluna<BR> (alinhada à direita)</TD>
</TR>
</TBODY>
</TABLE>

<COL>
Define propriedades de uma coluna. Usado com COLGROUP para definir as propriedades de
uma única coluna dentre outras.
Atributos:
2. CHAR = "texto"
4. SPAN = " número "
5. VALIGN = (TOP,MIDDLE,BOTTOM,BASELINE)
6. WIDTH = número
CONJUNTO DE CARACTERES ESPECIAIS ISO
Os caracteres especiais permitem que os navegadores exibam símbolos que seriam normalmente
interpretados como tags de marcação. Também permitem que os navegadores apresentem caracteres
ASCII de ordem mais alta (código > 127), por exemplo, caracteres não romanos.
Sinais Especiais: &  Indica ao browser que o que vem a seguir é um código de caractere;
#  Indica ao browser que o que vem a seguir é uma string de números que
corresponde ao código de caractere de um símbolo a ser produzido. É chamado
Entidade Numérica;
;  O ponto e vírgula sinaliza o fim da string que representa o código do caractere.
OBS: Ao reproduzir uma string de entidades, a HTML faz distinção entre maiúsculas e minúsculas. Cada
código deve ser escrito exatamente como está na tabela de códigos.
Entidades de Caractere  Strings de caracteres que representam os caracteres especiais. Ex: < = <.
Entidades Numéricas  Strings de números que representam os caracteres especiais. Ex: < = <.
A tabela completa com o conjunto de caracteres especiais ISO (International Standards Organization)
HTML estão na DTD HTML 4.0, encontrada em:
http://www.w3.org/TR/WD-html40/sgml/HTML4.decl

Outros exemplos:
lt => '<', #a less-than Ograve => chr 210, #capital O, grave accent
gt => '>', #a greater-than Oacute => chr 211, #capital O, acute accent
amp => '&', #a nampersand Ocirc => chr 212, #capital O, circumflex
quot => '"', #a (verticle) double-quote accent
nbsp => chr 160, #no-break space Otilde => chr 213, #capital O, tilde
iexcl => chr 161, #inverted exclamation mark Ouml => chr 214, #capital O, dieresis or
cent => chr 162, #cent sign umlaut mark
pound => chr 163, #pound sterling sign times => chr 215, #multiply sign
curren => chr 164, #general currency sign Oslash => chr 216, #capital O, slash
yen => chr 165, #yen sign Ugrave => chr 217, #capital U, grave accent
brvbar => chr 166, #broken (vertical) bar Uacute => chr 218, #capital U, acute accent
sect => chr 167, #section sign Ucirc => chr 219, #capital U, circumflex
uml => chr 168, #umlaut (dieresis) accent
copy => chr 169, #copyright sign Uuml => chr 220, #capital U, dieresis or
ordf => chr 170, #ordinal indicator, feminine umlaut mark
laquo => chr 171, #angle quotation mark, left Yacute => chr 221, #capital Y, acute accent
not => chr 172, #not sign THORN => chr 222, #capital THORN, Icelandic
shy => chr 173, #soft hyphen szlig => chr 223, #small sharp s, German (sz
reg => chr 174, #registered sign ligature)
macr => chr 175, #macron agrave => chr 224, #small a, grave accent
deg => chr 176, #degree sign aacute => chr 225, #small a, acute accent
plusmn => chr 177, #plus-or-minus sign acirc => chr 226, #small a, circumflex accent
sup2 => chr 178, #superscript two atilde => chr 227, #small a, tilde
sup3 => chr 179, #superscript three auml => chr 228, #small a, dieresis or umlaut
acute => chr 180, #acute accent mark
micro => chr 181, #micro sign aring => chr 229, #small a, ring
para => chr 182, #pilcrow (paragraph sign) aelig => chr 230, #small ae diphthong
middot => chr 183, #middle dot (ligature)
cedil => chr 184, #cedilla ccedil => chr 231, #small c, cedilla
sup1 => chr 185, #superscript one egrave => chr 232, #small e, grave accent
ordm => chr 186, #ordinal indicator, masculine eacute => chr 233, #small e, acute accent
raquo => chr 187, #angle quotation mark, right ecirc => chr 234, #small e, circumflex accent
frac14 => chr 188, #fraction one-quarter euml => chr 235, #small e, dieresis or umlaut
frac12 => chr 189, #fraction one-half mark
frac34 => chr 190, #fraction three-quarters igrave => chr 236, #small i, grave accent
iquest => chr 191, #inverted question mark iacute => chr 237, #small i, acute accent
Agrave => chr 192, #capital A, grave accent icirc => chr 238, #small i, circumflex accent
Aacute => chr 193, #capital A, acute accent iuml => chr 239, #small i, dieresis or umlaut
Acirc => chr 194, #capital A, circumflex accent mark
Atilde => chr 195, #capital A, tilde eth => chr 240, #small eth, Icelandic
Auml => chr 196, #capital A, dieresis or ntilde => chr 241, #small n, tilde
umlaut mark ograve => chr 242, #small o, grave accent
Aring => chr 197, #capital A, ring oacute => chr 243, #small o, acute accent
AElig => chr 198, #capital AE diphthong ocirc => chr 244, #small o, circumflex accent
(ligature) otilde => chr 245, #small o, tilde
Ccedil => chr 199, #capital C, cedilla ouml => chr 246, #small o, dieresis or umlaut
Egrave => chr 200, #capital E, grave accent mark
Eacute => chr 201, #capital E, acute accent divide => chr 247, #divide sign
Ecirc => chr 202, #capital E, circumflex accent oslash => chr 248, #small o, slash
Euml => chr 203, #capital E, dieresis or ugrave => chr 249, #small u, grave accent
umlaut mark uacute => chr 250, #small u, acute accent
Igrave => chr 204, #capital I, grave accent ucirc => chr 251, #small u, circumflex accent
Iacute => chr 205, #capital I, acute accent uuml => chr 252, #small u, dieresis or umlaut
Icirc => chr 206, #capital I, circumflex accent mark
Iuml => chr 207, #capital I, dieresis or yacute => chr 253, #small y, acute accent
umlaut mark thorn => chr 254, #small thorn, Icelandic
ETH => chr 208, #capital Eth, Icelandic yuml => chr 255, #small y, dieresis or umlaut
Ntilde => chr 209, #capital N, tilde mark

FRAMES (MOLDURAS)
Os frames, quadros ou molduras, permitem a apresentação simultânea de mais de uma página Web no
browser. O seu uso deve ser bem planejado, sem exageros nem prejuízo à velocidade de carregamento.
Ao criar um Site com frames, deve-se definir inicialmente:
 As dimensões de cada frame;
 As informações que cada frame conterá (que página será exibida naquele frame);
 Nomes simbólicos de cada frame, para serem usados como alvo dos links.
Em segundo lugar deve-se criar o arquivo HTML que define os frames e que páginas serão carregadas
inicialmente em cada frame. Ou seja, uma página com frames precisamos criar um arquivo a mais, que
é a página que define as propriedades dos frames.
No exemplo abaixo, temos uma página com três frames cujos nomes são superior, lateral e principal e
cujas páginas iniciais são titulo.html, menu.html, e benvindo.html, respectivamente, além da página
exframes.html, que contém a definição de cada frame.
titulo.html
benvindo.html
menu.html

<FRAMESET> ... </FRAMESET>
Definição de grupo de frames. É usado no lugar do tag <BODY> no documento que define os
frames. Pode conter os tags <FRAMESET>, <FRAME> e <NOFRAMES>.
Atributos:
1. COLS = “largura_colunas | % | * “
Define as colunas dos frames.
Valores :
As dimensões das colunas podem ser expressas em pixels, percentuais ou tamanho
relativo (restante). O uso de aspas é obrigatório e os valores são separados por
vírgulas (o número de elementos determina o número de colunas).
2. ROWS = “altura_linhas | % | * “
Define as linhas dos frames.
Valores :
Idem COLS aplicado a linhas.
OBS: Os frames são aninhados para formar estruturas mais complexas (tags FRAMESET dentro de
outros tags FRAMESET).
<FRAME>
Define uma moldura em um tag <FRAMESET>.
Atributos:
1. FRAMEBORDER = 1 | 0
Apresenta uma borda na moldura. O valor 0 (zero) anula a borda do frame.
2. MARGINHEIGHT = “número | % “
Controla a altura da margem para a moldura.
3. MARGINWIDTH = “número | % “
Controla a largura da margem para a moldura.
4. NAME = “texto“
Nome do frame para uso como alvo dos links.
5. NORESIZE
Não permite que o usuário redimensione o frame.
6. SCROLLING = “yes | no | auto “

Controla da barra de rolagem.
7. SRC = “URL “
Endereço do arquivo inicial.
OBS: Os navegadores apresentam diferenças em relação à apresentação das páginas com frames. É
necessário testar o site exaustivamente.
<NOFRAMES> ... </NOFRAMES>
Para conteúdo que será visualizado por navegadores que não são compatíveis com frames.
Funcionam da seguinte forma: os browsers que não reconhecem os tags <FRAMESET> também
não reconhecem os <NOFRAMES>. Assim o conteúdo alternativo é então apresentado.
<IFRAME> ... </IFRAME>
Define uma moldura flutuante ou em linha.
Atributos:
1. ALIGN = LEFT | RIGHT | CENTER | TOP | MIDDLE | BOTTOM

Valores :
LEFT – Moldura à esquerda e texto ao redor;
RIGHT – Moldura à direita e texto ao redor;
CENTER – Moldura no centro e texto ao redor;
TOP – Texto alinhado com a parte superior do frame;
MIDDLE – Texto alinhado com o centro do frame;
BOTTOM – Texto alinhado com a parte inferior do frame;
2. FRAMEBORDER = 1 | 0
3. HEIGHT = “número | % “
Altura da moldura.
4. MARGINHEIGHT = “número | % “
5. MARGINWIDTH = “número | % “
7. NORESIZE
8. SCROLLING = “yes | no | auto “
9. SRC = “URL “
10. WIDTH = “número | % “

Largura da moldura.

Veremos agora os documentos HTML que compõem o exemplo mostrado na figura da página 31:
Exemplo 1: exframes.html (Página de Definição dos Frames)
<HTML>
<HEAD>
<TITLE>Exemplo Frames</TITLE>
</HEAD>
<FRAMESET ROWS="77,419" FRAMEBORDER="YES">

<FRAME SRC="titulo.html">
<FRAMESET COLS="216,564">
<FRAME SRC="menu.html">
<FRAME SRC="bemvindo.html">
</FRAMESET>
</FRAMESET>
<NOFRAMES>
</NOFRAMES>
</HTML>
Exemplo 2: titulo.html
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<DIV ALIGN="center">
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="7">
<B>SUPERIOR</B>
</FONT>
</DIV>
</BODY>
</HTML>

Exemplo 3: menu.html
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<P ALIGN="center">
<B>
L<BR>
A<BR>
T<BR>
E<BR>
R<BR>
A<BR>
L</B>
</FONT>
</P>
</BODY>
</HTML>
Exemplo 4: bemvindo.html
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<DIV ALIGN="center">
<P> </P>
<P> </P>
<P> </P>
<P>
<B>PRINCIPAL</B>
</FONT>
</P>
</DIV>
</BODY>
</HTML>

IMAGENS NA WEB
Para criar ou editar imagens, utilize ferramentas como o Paint Shop Pro, o pacote da Corel
(Draw, Photo Paint, etc.), o Adobe Photo Shop ou outras. Há sempre a opção de se digitalizar uma
imagem para depois editá-la e adaptá-la a sua página. Para digitalizar uma imagem é necessário o uso
de um scanner, que pode estar disponível em algumas lojas especializadas em serviços de xerox.
Tipos de Arquivos de Imagens
a) GIF (pronuncia-se "Gêf") - Graphical Interchange Format - Criado pela CompuServe,

aceitam o uso de somente 256 cores. Esta limitação ajuda a manter baixo o tamanho dos
arquivos que contenham pequenos gráficos. É aconselhado para botões, imagens de
segundo plano, ícones, barras de navegação e gráficos simples. Não funciona bem para
fotografias;
b) JPG (pronuncia-se "Jotapégue") - Joint Photographic Experts Group - Projetado

especificamente para fotografias e imagens em milhões de cores. É um formato eficiente
quanto à compactação eletrônica de grandes imagens. Usado para fotos, logotipos
complexos e grandes imagens;
c) PNG (pronuncia-se "Ping") - Portable Network Graphics - Criado recentemente, é

semelhante ao GIF mas mais eficiente em relação à utilização de grande quantidade de
cores e poderá substituir este na web em pouco tempo. Mais informações em:
http://www.cdrom.com/pub/png/
Observações
 Qualquer pessoa que crie uma página web é obrigada a assumir o papel de designer virtual.
 Devemos perceber que a cor na web é tratada de forma diferente por diversos navegadores,
por diversas plataformas de computadores e por diversos sistemas operacionais.
 Não temos como ditar a plataforma de computador a qual as nossas páginas web serão
visualizadas. Não temos controle sobre a profundidade de bits e a quantidade de cores da
tela do usuário. Não há como ajustar os monitores dos usuários (brilho/contraste). Não
temos nenhum modo de forçar os outros a usar os plug-ins que desejarmos.
 Podemos pedir aos usuários para fazer praticamente qualquer coisa para que seu site fique
como você pretende, mas a realidade é que muitos não vão nem se incomodar.
 Portanto, necessitamos aprender a tornar os nossos aspectos visuais flexíveis o suficiente

para se sustentarem sob uma diversidade de situações.

Cores na Web
 Em uma página impressa, todo mundo vê as mesmas cores.
 Na web, temos: diferentes monitores de computador, com capacidade de cores e gama

diferentes, além de diferentes configurações de profundidade de bits, sistemas operacionais
diferentes, que exibem as cores de diferentes formas, browsers que afetam o modo como as
cores são exibidas, velocidade diferentes de carregamento dependendo das cores usadas.
RGB vs. CMYK
 RGB  gráficos na tela do computador. Cores dos pixels são formadas por combinações de
vermelho, verde e azul. As cores são aditivas (somadas criam o branco).
 CMYK  para simular tintas de impressão em papel. Ciano, magenta, amarelo e preto.
Cores subtrativas (somadas criam o preto).
 Os web designers sempre usam RGB e nunca CMYK.
 O Photoshop e o Paint Shop Pro usam espaço de cor RGB.
Alta Resolução e Baixa Resolução
 Alta Resolução: qualquer imagem com resolução acima de 72 ppp (pontos por pixel) ou dpi
(pontos por polegada). Qualquer coisa que não possa ser exibida em seu tamanho normal
(escala 1:1), na tela de um computador.
 Baixa Resolução: resolução abaixo de 72 dpi. São as imagens usadas para a web.
 Sempre que trabalhar com imagens para a web, defina a medida em pontos por pixels.
Profundidade de Bits
 Se refere à quantidade de cores que há em uma imagem.
 A quantidade de cores pode ter um enorme impacto no tamanho do arquivo.
 Profundidades e quantidade de cores relativas: (cores = 2 bits)

1 bit – 2 cores 5 bits – 32 cores 15 bits – 32,8 mil cores
2 bits – 4 cores 6 bits – 64 cores 16 bits – 65,5 mil cores
3 bits – 8 cores 7 bits – 128 cores 24 bits – 16,7 milhões ou mais
4 bits – 16 cores 8 bits – 256 cores 32 bits – 16,7 milhões de cores ou mais, além de
uma máscara de escala de cinza de 8 bits
Pontilhamento e Separação por Bandas
 Conversão de milhões de cores para 256 cores acarreta perda de qualidade da imagem.
Isso pode ocorrer por pontilhamento ou por separação por bandas.
 Pontilhamento  posicionamento de pixels coloridos diferentes dentro de uma imagem que

utiliza uma paleta de 256 cores, para simular uma cor que não existe na paleta.
 Paleta Adaptativa  usada para conversão para 256 cores com base em cores existentes
dentro da imagem.
 Pontilhamento de tela  acontece quando uma imagem de 24 ou 16 bits é visualizada em

um computador com placa para 256 cores.
 Separação por Bandas  processo para redução de cores a 256 ou menos sem
pontilhamento. Produz áreas de cor sólida e gera um efeito posterizado.
 O pontilhamento e a separação por bandas aplicados pelos monitores dos usuários são
efeitos indesejáveis para quem trabalha com a web.
Profundidade de Bits do Monitor
 Há duas maneiras de se interpretar este conceito: profundidade de bits de uma imagem e

profundidade de bits no monitor do usuário.
 A maioria dos artistas da área digital tem monitores de 24 bits (16,7 milhões de cores),
enquanto que o usuário médio de computador (incluindo a massa de usuários da web) tem
um monitor de 8 bits (256 cores). Ou seja, quem trabalha para web geralmente visualiza as
imagens sob condições superiores as do usuário mediano final.
Cores Hexadecimais
 São usados para converter valores RGB de maneira que o HTML entenda quais cores você
escolheu. Ex: <BODY BGCOLOR=”#003333”>  R: 0, G: 51, B: 51.

Cores Protegidas para Navegadores
 Os navegadores mais conhecidos (Netscape e Explorer) compartilham o mesmo processo

de gerenciamento de paleta. Eles trabalham com as paletas do sistema de cada plataforma
(Mac, Windows, Unix, etc).
 Felizmente, há cores comuns nas paletas de sistema 256 – na verdade, 216 cores comuns.
Cada sistema operacional reserva 40 cores, além das 256 possíveis, para seu próprio uso.
Isso significa que se utilizarmos as 216 cores comuns, elas serão universalmente aceitas
entre os navegadores, sistemas operacionais e plataformas de computadores.
Por que Trabalhar com uma Paleta Limitada ?
 A maioria dos usuários tem monitores configurados para 800x600 pixels, com 256 cores.
 Quando trabalhamos com cores diferentes das protegidas para navegadores estes as
convertem de qualquer maneira. Seja nas cores que você usar para o background, texto,
ilustrações, e logotipos, as cores serão convertidas para uma das 216 cores protegidas.
 As fotografias são o único tipo de arte que realmente não se beneficiam do uso de cores
protegidas. Os navegadores convertem-nas mas usando suas próprias paletas fixas, e
fazem um bom trabalho, diferentemente da conversão de péssima qualidade que fazem com
ilustrações e arte baseadas em cores hexadecimais.
Trabalho Baseado em Fotografias
 Independentemente de a imagem fotográfica ter sido convertida para 8 bits, o navegador

fará o seu trabalho sujo de pontilhamento. É melhor deixar a imagem em uma paleta
adaptativa ou em 24 bits para que sejam bem visualizadas em monitores configurados para
24 bits.
 Procurar utilizar sempre que possível, o formato JPG.
 O trabalho com 256 cores fica limitado, mais ainda com os avançados recursos
computacionais que temos hoje. Mas devemos pensar no usuário mediano, é para ele que
construirmos os sites.
 Para programas como o Paint Shop Pro da JASC, são distribuídas paletas especiais como a
netscape.pal. Para carregar uma paleta no PSP escolha o menu Colors/Load Pallete e em
seguida selecione o arquivo desejado.
Veja mais sobre cores e imagens na web no livro “Cores na Web”, de Linda Weinman, recomendado
também na nossa bibliografia.

TAG DE INCLUSÃO DE IMAGENS
<IMG>
Fornece informações sobre a origem, o posicionamento e o comportamento da imagem. Este tag

posiciona a imagem na página.
Atributos:
1. ALT = “texto”
Fornece um texto alternativo caso a visualização de imagens esteja desativada. Também
serve para identificação, pelo usuário, de que imagem será carregada.
2. ALIGN = LEFT | RIGHT | TOP | MIDDLE | BOTTOM

Alinhamento de texto ao redor da imagem.
Valores :
LEFT – Imagem à esquerda e texto ao redor;
RIGHT – Imagem à direita e texto ao redor;
TOP – Texto alinhado com a parte superior da imagem;
MIDDLE – Texto alinhado com a parte central da imagem;
BOTTOM – Texto alinhado com a parte inferior da imagem;
3. BORDER = “número“
Define a largura de uma borda para a imagem se ela for um link para outro objeto ou
documento Web. 0 (padrão) oculta a borda.
4. HEIGHT = pixels
5. WIDTH = pixels
Altura e largura da imagem, respectivamente. Os atributos de dimensão agilizam o
carregamento da imagem. Se a imagem tiver tamanho diferente, será adaptada à
dimensão informada nestes atributos.
6. HSPACE = “número“
7. VSPACE = “número“
Margens (espaço em branco) para a imagem.
8. SRC = “URL“
Endereço do arquivo da imagem. Obrigatório.
9. ISMAP
Para mapas de imagem do lado do servidor, que usam CGI para o seu funcionamento.
10. USEMAP = “nome do mapa“

Identifica a imagem como um mapa de imagens do lado do cliente (browser).

IMAGE MAPS
<MAP> ... </MAP>
Define um mapa de imagens do lado do cliente. Divide a imagem em um mapa de links (áreas
clicáveis dentro da imagem). Um mapa do lado do cliente é igual ao do lado do servidor, exceto
pelo local onde são armazenadas as definições de áreas de ativação.
Atributo:
 NAME = “texto”
Define o nome do mapa que será citado em USEMAP = “nome do mapa”.
<AREA>
Especifica uma área de ativação em um Mapa de Imagem.
Atributos:
Fornece um texto alternativo para a área.
2. COORDS = “X1, Y1, X2, Y2, ...”

Especifica as coordenadas que definem o formato do ponto de ativação.
3. HREF = “URL“
Destino do link da respectiva área de ativação.
4. SHAPE = RECT | CIRCLE | POLY | DEFAULT

Especifica o formato da área de ativação.
Valores :
RECT – Retângulo – formado pelo canto superior esquerdo e o canto inferior
direito. (COORDS = “xesquerda, ytopo, xdireita, ybase”);
CIRCLE – Círculo – formado pelo centro e pelo raio do círculo. (COORDS =
“xcentro, ycentro, raio”);
POLY – Polígono – definido a partir de uma lista de coordenadas, conectadas na
ordem apresentada e ligando o último ponto ao primeiro. (COORDS =
“x1, y1, x2, y2, x3, y3, ...”);
DEFAULT – Localização padrão no mapa e deve ser usada só uma vez para
indicar o que deve ocorrer se o usuário selecionar uma coordenada
não definida.

5. NOHREF
Indica que a área não tem link para nenhuma URL, incluindo o documento atual ou o
URL padrão.
6. TARGET = “janelas“
Veja FRAMES.
7. ACCESSKEY = “caractere”
Define tecla de atalho via teclado.
TAGS DE INCLUSÃO DE APPLETS JAVA
<APPLET> ... </APPLET>
Usado para incluir um miniaplicativo JAVA em um documento HTML.
Atributos:
Fornece um texto alternativo quando o miniaplicativo não puder ser carregado.
2. ALIGN = LEFT | RIGHT | TOP | MIDDLE | BOTTOM
3. ARCHIVE = “texto“
Define uma lista de nomes de arquivos delimitados por vírgula, que contêm classes ou
outros recursos a serem pré-carregados.
4. CODEBASE = “URL“
Semelhante ao <BASE> mas usado para especificar a URL absoluta onde estão
localizadas outras classes que serão usadas com o applet.
5. CODE = “URL“
Endereço da subclasse de aplicativo compilado do miniaplicativo. Deve ser uma URL
relativa a CODEBASE.
6. HEIGHT = “número”
7. WIDTH = “número | % “

Nome do miniaplicativo.

OBSERVAÇÕES:
 Os atributos CODE, HEIGHT e WIDTH são obrigatórios;
 O valor de CODE deve ser apenas o nome da classe (no formato “nome.class”) que compõe
o applet, já compilado. Não deve fazer parte deste atributo a URL (ou diretório) onde está
localizado o applet;
 Caso o applet esteja em local diferente de onde se encontram os documentos HTML, este
local deve ser indicado com o uso de CODEBASE;
 O tag ALT especifica um texto que será exibido caso o browser não “entenda” o applet,
mesmo que seja JAVA compatível;
 Para que uma mensagem seja escrita, caso o browser não suporte JAVA, escreva-a antes
do tag </APPLET>.
<PARAM>
Fornece os argumentos ou parâmetros de ‘linha de comando’ a um miniaplicativo JAVA

incorporado em um documento com o tag <APPLET>.
Atributos:
Especifica o nome da propriedade do objeto. A distinção entre maiúsculas e minúsculas
é determinada pelo objeto.
2. VALUE = (número | “texto“ )

Especifica o valor da propriedade identificada com o atributo NAME. O valor não muda
mas os valores de caractere correspondentes substituem as entidades de caractere.
3. VALUETYPE = ( DATA | REF | OBJECT )

Especifica como interpretar o valor. O tipo pode ser:
Valores :
DATA – Dados – é o valor padrão;
REF – Um URL;
OBJECT – Um URL de um objeto no mesmo documento.
4. TYPE = “tipo“
Especifica o tipo MIME do parâmetro.

SCRIPTS
Os scripts são métodos de personalização, modificação e aperfeiçoamento de Sites Web.
Os scripts do lado do cliente podem ser incorporados diretamente ao documento HTML ou como um
arquivo à parte.
Algumas funções que podem ser executadas por scripts:
 Modificar um documento dinamicamente, a medida que for carregado, para que fique de
acordo com o navegador, as preferências do usuário ou as variáveis de ambiente.
 Processar dados coletados em um formulário (veja este assunto no próximo tópico) e/ou
personalizar os campos.
 Lançar ações especiais baseadas no posicionamento do mouse ou no clique para o

carregamento de novos módulos, atualização de conjuntos de dados ou exibição de
multimídia, entre outros.
TAGS DE INCLUSÃO DE SCRIPTS
<SCRIPT> ... </SCRIPT>
Especifica a inclusão de um script.
Atributos:
1. TYPE = “linguagem de scripting”

Especifica o tipo de linguagem de scripting para o texto de script incluído. Deve ser um
tipo de mídia Internet (MIME).
2. LANGUAGE = “linguagem de scripting”

Indica a linguagem em que o script foi escrito (ex: JavaScript). Está depreciado.
3. SRC = “URL“
Endereço de um script externo. Se esse valor estiver definido, todo o texto incluído pelo
tag <SCRIPT> será ignorado.
<NOSCRIPT> ... </NOSCRIPT>
Especifica um conteúdo alternativo a ser usado por navegadores que não são compatíveis com
scripts ou com a linguagem especificamente utilizada. A mensagem ou conteúdo HTML
alternativo deve estar entre o <NOSCRIPT> e o </NOSCRIPT>. Sem atributos.

EVENTOS DE PROGRAMAÇÃO INTRÍNSECOS
Ainda dentro de programação de scripts, discutiremos agora os eventos de programação intrínsecos,

com os quais a HTML também é compatível, e que podem ser usados da mesma maneira que os
atributos de tags.
Analisaremos alguns eventos intrínsecos onde, para cada um a seguir, o valor do script deve definir um
nome ou uma ID (Identification) para um script:
onload = script
Indica que o script deve ocorrer quando uma janela ou todos os frames foram carregados. Usado
com os tags <BODY> e <FRAMESET>.
onunload = script
Indica que o script deve ocorrer quando um documento é removido de uma janela. Usado com
os tags <BODY> e <FRAMESET>.
onclick = script
O script é ativado com um clique no mouse ou do dispositivo de apontamento. Usado com a

maioria dos tags.
ondblclick = script
O script é ativado com um clique duplo no mouse. Usado com a maioria dos tags.
onmousedown = script
O script é ativado quando o botão do mouse é pressionado sobre um elemento. Usado com a
maioria dos tags.
onmouseup = script
O script é ativado quando o botão do mouse é solto sobre um elemento. Usado com a maioria
dos tags.
onmouseover = script
O script é ativado quando o mouse é posicionado sobre um elemento. Usado com a maioria dos
tags.

onmousemove= script
O script é ativado quando o mouse é movido sobre um elemento. Usado com a maioria dos tags.
onmouseout = script
O script é ativado quando o mouse é movido para fora de um elemento. Usado com a maioria
dos tags.
onfocus = script
Usado quando os elementos permitem navegação tabulada (exemplo: formulários). O script é

ativado quando um elemento torna-se o foco do mouse (ou é o selecionado na navegação
tabulada). Usado com os tags <LABEL>, <INPUT>, <SELECT>, <TEXTAREA> e <BUTTON>
(todos tags de formulário).
onblur = script
Usado quando os elementos permitem navegação tabulada (exemplo: formulários). O script é

ativado quando um elemento deixa de ser o foco do mouse. Uso: idem anterior.
onkeypress = script
O script é ativado quando uma tecla é pressionada e solta sobre um elemento. Usado com a
maioria dos tags.
onkeydown = script
O script é ativado quando uma tecla é pressionada (apenas) sobre um elemento. Usado com a
maioria dos tags.
onkeyup = script
O script é ativado quando uma tecla é solta (apenas) sobre um elemento. Usado com a maioria
dos tags.
onsubmit = script
O script é ativado quando o formulário é submetido. Usado com <FORM>.
onreset = script
O script é ativado quando o formulário é resetado (limpo). Usado com <FORM>.

onselect = script
O script é ativado quando o usuário seleciona um trecho de texto. Usado com <INPUT> e
<TEXTAREA>.
TAGS DE INCLUSÃO DE OBJETOS
<OBJECT> ... </OBJECT>
Insere um objeto (imagem, documento ou aplicativo) no documento HTML.
Atributos:
1. ALIGN = BASELINE | CENTER | LEFT | RIGHT | MIDDLE | TEXTBOTTOM | TEXTMIDDLE |

TEXTTOP
Define o alinhamento do objeto.
Valores :
BASELINE – alinhamento com a linha de base comum (ver <TD>);
CENTER – alinhamento com o centro do documento;
LEFT – alinhamento com a esquerda do documento;
RIGHT – alinhamento com a direita do documento;
MIDDLE – alinhamento com o centro do documento;
TEXTBOTTOM – alinhado com a parte inferior do texto;
TEXTTOP – alinhado com a parte superior do texto;
TEXTMIDDLE – alinhado com o centro do texto.
2. BORDER = “número“
Define a largura da borda.
3. CLASSID = “URL“
Endereço de um recurso a ser usado na apresentação do objeto.
4. CODEBASE = “URL“
Identifica o código-base ou o endereço do código fonte do objeto.
5. CODETYPE = tipo de código

Especifica o tipo de mídia (MIME) para o código. Veja os tipos de códigos em:
ftp://ftp.isi.edu./m-notes/iana/assignments/media-types/media-types/
6. DATA = “URL“
Endereço dos dados para o objeto. A sintaxe do URL depende do objeto.
7. TYPE = tipo
Especifica o tipo MIME para os dados.

8. DECLARE
Possibilita definir um objeto sem ativá-lo. Use-o quando fizer referência cruzada a um
objeto que apareça depois no mesmo documento ou quando usar um objeto como
parâmetro em outro objeto.
9. HEIGHT = pixels
10. WIDTH = pixels

Altura e largura do objeto, respectivamente, em pixels.

Margens (espaço em branco) para o objeto.
13. NAME = “URL“

Define o nome de um objeto quando submetido como parte de um formulário.
14. STANDBY = “URL“

Define uma mensagem a exibir enquanto carrega o objeto.
FORMS + CGI + GATEWAYS
Os formulários são um dos mais utilizados meios pelos quais as pessoas comunicam informações, fatos
e opiniões pessoais. Independentemente da maneira pela qual os formulários são usados, todos têm um
aspecto em comum: são um meio padronizado para que vários itens de informação sejam coletados em
um breve espaço.
Os formulários fazem as mesmas perguntas a várias pessoas e depois essas informações (respostas)
podem ser consolidadas e comparadas.
Um formulário web contém elementos interativos como: campos de texto, caixas de seleção, botões de
rádio e botões de ativação. Eles permitem solicitar e receber informações dos usuários.
Os formulários requerem algum tipo de aplicativo que coleta, manipula, armazena ou processa dados e
os encaminha ao servidor Web. Estes aplicativos podem estar em scripts junto ao código HTML
(JAVASCRIPT) ou em aplicativos de segundo plano, geralmente chamados de Gateways.
CGI  método padronizado para a transmissão de informações entre um cliente e um aplicativo

no servidor Web. É um mecanismo para comunicação entre o Gateway e o servidor web.
GATEWAY  script ou programa invocado pelo servidor web, que pode aceitar entradas de
dados do usuário e retornar uma página web, uma URL ou outro tipo de dados, para o
usuário.

Os formulários funcionam, em geral, conforme a figura abaixo:
Os dados informados pelo usuário via formulário são enviados ao Gateway através das
variáveis de ambiente (método GET) ou usando a entrada de dados padrão STDIN (método
POST).
GET - o browser enviará uma URL para o script consistindo de: URL da página que contém o
formulário seguido de um ponto de interrogação, dos valores das áreas de entrada do formulário
e de outros objetos.
POST - o browser enviará uma cópia do conteúdo do formulário como um bloco de dados para o
serviço de entrada padrão (STDIN), o que facilita a captura e processamento. É o método
preferido pelos programadores pois passa as informações de modo mais limpo que o GET. Tudo
que o Gateway gravar na saída padrão (STDOUT) será retornado como um documento HTML
para posterior interação ou ser gravado como um arquivo no servidor web local.
Para incorporar scripts CGI ao seu site web, você deve:
 Aprender uma linguagem de programação CGI e escrever seus próprios scripts;
 Usar um programa de criação de scripts que gere código para você;
 Ou, usar scripts de domínio público, shareware ou scripts CGI preexistentes.

TAGS DE FORMULÁRIOS
<FORM> ... </FORM>
Define uma área que contém objetos que solicitam entrada de dados pelo usuário. Define os
limites do formulário.
Atributos:
1. ACCEPT = “tipo de mídia“

Listas de tipos MIME separados por vírgulas, que serão reconhecidos pelo servidor que
está processando o formulário.
2. ACCEPT-CHARSET = “texto“
Especifica o conjunto ou conjuntos de caracteres que devem ser aceitos pelo servidor.
3. ACTION = “URL“
Ação (programa) que será executado ao pressionar-se o botão SUBMIT. A URL
geralmente aponte para um script em um servidor web.
4. ENCTYPE = “tipo de mídia”

Especifica o tipo de mídia MIME (formato) para os dados enviados, caso o protocolo
(HTTPD) não imponha um formato. Com o método POST , esse atributo é um tipo MIME
que especifica o formato dos dados postados. O valor padrão é:
“APPLICATION/X-WWW=URLENCODED”
5. METHOD = “GET“ | “POST”

Especifica como o navegador vai interagir com o script. O padrão é GET.
<INPUT>
Define um objeto de entrada do formulário.
Atributos:
1. ACCEPT = “tipo de mídia“
2. ALIGN = LEFT | CENTER | RIGHT | JUSTIFY
Texto alternativo para browsers que não suportam formulários.

4. TYPE = TEXT | PASSWORD | CHECKBOX | RADIO | SUBMIT | RESET | FILE | HIDDEN |
IMAGE | BUTTON
Define o tipo de controle de entrada.
Valores :
TEXT – gera um campo de entrada no qual o usuário pode digitar até
MAXLENGTH caracteres. SIZE dá o comprimento;
PASSWORD – igual a TEXT porém a entrada será oculta por asteriscos;
CHECKBOX – insere uma caixa de seleção, onde o usuário pode escolher entre
opções, podendo escolher mais de uma;
RADIO – insere um botão de rádio. Quando agrupados, todos devem ter o
mesmo NAME e diferentes VALUE. Apenas um poderá ser selecionado
e o VALUE do escolhido será enviado;
SUBMIT – botão que envia o conteúdo para o servidor;
RESET – botão que restaura o formulário ao estado inicial;
FILE – permite que o usuário faça a transferência de um arquivo. Forneça uma
lista de arquivos com ACCEPT;
HIDDEN – informações ocultas. Útil para informações que deverão ser enviadas
ao servidor e que não precisam ser vistas pelo usuário;
IMAGE – semelhante ao SUBMIT mas utiliza uma imagem no lugar do botão;
BUTTON – cria um botão que chama um script qualquer.
5. CHECKED
Define como “selecionado”, se o tipo for CHECKBOX ou RADIO, quando o formulário é
carregado.
6. DISABLED
Desabilita o elemento.
7. MAXLENGTH = “número“
Quantidade máxima de caracteres aceitos pelo campo.
Define o nome do objeto de controle de entrada, a ser usado como identificador pelo
script. Obrigatório.
9. READONLY
O conteúdo não poderá ser modificado pelo usuário.
10. SIZE = “largura“ | “largura, altura”

Tamanho da janela de entrada (em caracteres).
11. SRC = “URL“

Endereço de imagem a ser utilizada quando o TYPE está definido como IMAGE.
12. TABINDEX = “número”

Identifica a posição do elemento na ordem de tabulação.

13. USEMAP = “texto”
Identifica o mapa de imagens do lado do cliente a ser usado como dispositivo de entrada
do usuário, se o TYPE for IMAGE.
14. VALUE = “texto“

Define o valor padrão do objeto de controle de entrada. Indica também o rótulo dos
botões SUBMIT e RESET.
<TEXTAREA> ... </TEXTAREA>
Define um objeto de entrada do formulário.
Atributos:
1. COLS = “número“
Número de colunas. Padrão = 80.
2. DISABLED
Define o nome do campo, a ser usado como identificador pelo script. Obrigatório.
4. READONLY
5. ROWS = “número“
Número de linhas. Padrão = 1. Valores mais usados: 2 a 6.
<SELECT> ... </SELECT>
Define uma lista de opções. Cada opção é representada por um tag OPTION.
Atributos:
1. MULTIPLE
Habilita o usuário a escolher mais de uma opção.
2. DISABLED
Define o nome para a lista. Obrigatório.
4. SIZE = “número“
Número de opções visíveis.

<OPTION>
Opções dentro de SELECT.
Atributos:
1. SELECTED
Define que esta é uma opção padrão.
2. DISABLED
Define o valor para uma opção SELECT específica, que é igual a string de texto atribuída
a VALUE.
Exemplo:
<FORM ACTION=”http://www.company.com/escolha/” METHOD=POST>
<SELECT NAME=”carros” MULTIPLE SIZE=1>
<OPTION VALUE=1>BMW
<OPTION VALUE=2>PORSCHE
<OPTION VALUE=3 SELECTED>MERCEDES
</SELECT><P>
<INPUT TYPE=”submit” VALUE=”OK”>
<INPUT TYPE=”reset” VALUE=”reset”>
</FORM>
<LEGEND> ... </LEGEND>
Fornece uma legenda para um FIELDSET.
Atributos:
1. ALIGN = LEFT | RIGHT | TOP | BOTTOM
2. ACCESSKEY = “texto”
Especifica o caractere a ser usado como parte de uma tecla de atalho para mover o foco
para o controle.

<FIELDSET> ... </FIELDSET>
Agrupa elementos de formulários em uma área comum. Sem atributos.
<BUTTON> ... </BUTTON>
Cria um elemento de entrada de envio semelhante aos botões padrão do tipo SUBMIT ou
RESET, porém é graficamente mais interessante.
Atributos:
1. DISABLED
Define o nome do botão.
4. TYPE = SUBMIT | RESET | BUTTON

Define o tipo de controle de entrada.
Valores :
SUBMIT – botão que envia o conteúdo para o servidor;
RESET – botão que restaura o formulário ao estado inicial;
BUTTON – cria um botão que chama um script. É possível ter mais de um botão
por formulário mas todos devem ter nomes diferentes.
Define o valor do objeto de controle de entrada.
<LABEL> ... </LABEL>
Atribui um rótulo a um elemento de um formulário, para fornecer informações sobre ele.
Atributos:
1. DISABLED
2. FOR = “texto“
Associa explicitamente o rótulo a um elemento do formulário, usando o identificador
exclusivo do elemento (o NAME). Se esse atributo não estiver incluído, o rótulo será
associado automaticamente ao elemento que o contém.

4. FOLHAS DE ESTILO EM CASCATA
CSS (Cascading Style Sheets) ou Folhas de Estilo em Cascata são um conjunto de regras de estilo que
definem como os elementos e os tags em uma página HTML devem ser exibidos pelo navegador. As
regras dão aos usuários um controle mais abrangente sobre os elementos do que utilizando apenas os
atributos disponíveis na HTML padrão. Alguns aspectos que podem ser definidos utilizando folhas de
estilo são as margens, as cores de segundo plano, as bordas e os estilos de fontes, além de possibilitar
uma predefinição das propriedades da maioria dos tags HTML.
Há três maneiras de se inserir CSS nas páginas HTML:
1. UTILIZANDO O TAG <STYLE>...</STYLE> - utilizando este tag você define as

propriedades de CSS diretamente na página, como veremos a seguir;
2. EM UM ARQUIVO EXTERNO – podemos também colocar todas as definições de estilo em

um arquivo de texto que será referenciado pela página através do tag <LINK>, visto na
página 22. O arquivo externo deve cobrir todas as propriedades desejadas e as mesmas
devem estar separadas apenas por parágrafos (tecla ENTER). O exemplo a seguir mostra
um arquivo texto CSS:
EX: propriedades.css
p { font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 11pt}

td { font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 11pt}
pre { font-family: "Courier New", Courier, mono; font-size: 11pt}
h2 { font-family: Arial, Helvetica, sans-serif; font-size: 16pt; font-weight: bold }
code { font-family: "Courier New", Courier, mono; font-size: 11pt}
th { font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 11pt ; font-weight: bold}
sup { font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 10pt}
Para referenciar este arquivo você pode colocá-lo no mesmo diretório que a sua página (ou em
outra URL qualquer) e utilizar o tag LINK no seguinte formato:
<LINK REL=STYLESHEET HREF=”nome_da_folha_de_estilo”>
Que no nosso caso ficaria:
<LINK REL=STYLESHEET HREF=”propriedades.css”>
Nos dois casos a sintaxe da regra é a mesma, tanto para o uso interno ou externo.
3. STYLE COMO ATRIBUTO – este atributo é comum a quase todos os tags HTML. Quando
não temos nenhuma outra definição de estilo, o método de atributo é o melhor, por exemplo:
<P TYPE=”text/css” STYLE=”color: red”>

As Folhas de Estilo fazem parte da especificação da HTML 4 e os browsers de versões
anteriores às versões 4.0 (tanto o Netscape Navigator como I.Explorer) não são compatíveis e
ignoram marcações de estilo.
Veremos a seguir o tag STYLE e cada propriedade com seus respectivos atributos.
<STYLE> ... </STYLE>
Ocorre dentro de <HEAD> e fornece um meio de incluir informações utilizando notação de folhas
de estilo. As folhas de estilo do tipo CSS1 são as mais aceitas atualmente. As informações em
<STYLE> agem sobre a configuração padrão do cliente, assim como qualquer folha de estilo
referida externamente.
Atributos:
1. TYPE = “texto”
Especifica o tipo de folha de estilo em uso. Para folhas CSS1 o tipo é “text/css”.
2. MEDIA = SCREEN | PRINT | PROJECTION | BRAILLE | SPEECH | ALL
Identifica o ambiente ideal para a página Web.
SINTAXE DAS FOLHA DE ESTILO
As folhas de estilo são compostas de regras. Estas regras têm o seguinte formato:
SELETOR { propriedade1: valor1, valor2,..., valorn; propriedade2: valor1, valor2,..., valorn}
Onde: Seletor – escrito à esquerda das chaves, especifica elemento da HTML que será definido nesta
regra de estilo.
Declaração – escrita dentro de chaves ( {} ), especifica como o seletor deve ser apresentado.
Uma declaração possui duas partes:
Propriedade – especifica qual o aspecto do seletor deve ser modificado.
Valor – especifica como a propriedade deve ser apresentada.
É possível criar regras com mais de uma combinação de propriedade/valor dentro de uma única regra de
estilo. As folhas de estilo são uma tecnologia ainda emergente e há exceções para cada regra e
informações específicas sobre cada uma, como veremos no próximo tópico.

Alguns sites interessantes para obter mais informações sobre CSS são:
 http://www.w3.org/Style/css/
 http://www.htmlhelp.com
 http://www.useit.com/alertbox/9707a.html/
FAMÍLIAS DE PROPRIEDADES DAS FOLHAS DE ESTILO
As propriedades das Folhas de Estilo podem ser divididas em famílias baseadas no aspecto do elemento
HTML ao qual as propriedades são aplicadas. Veremos a seguir as famílias e suas diferentes
propriedades e valores que podem ser utilizados nas definições de estilo.
Propriedades de Caixa
Especificam informações de bordas, margens, espaços em branco e altura e largura para elementos
HTML. As propriedades de caixa podem ser usadas com agrupamentos de texto, imagens ou uma
página HTML inteira.
margin-top: <comprimento> | <percentual> | auto
Especifica a margem superior de um elemento.
margin-bottom: <comprimento> | <percentual> | auto
Especifica a margem inferior de um elemento.
margin-left: <comprimento> | <percentual> | auto
Especifica a margem esquerda de um elemento.
margin-right: <comprimento> | <percentual> | auto
Especifica a margem direita de um elemento.
margin: [<comprimento> | <percentual> | auto] {1, 4}
Especifica as margens de um elemento.
padding-top: <comprimento> | <percentual>
Define o espaço em branco entre a borda superior de um elemento e seu conteúdo.
padding-bottom: <comprimento> | <percentual>
Define o espaço em branco entre a borda inferior de um elemento e seu conteúdo.

padding-left: <comprimento> | <percentual>
Define o espaço em branco entre a borda esquerda de um elemento e seu conteúdo.
padding-right: <comprimento> | <percentual>
Define o espaço em branco entre a borda direita de um elemento e seu conteúdo.
padding: [<comprimento> | <percentual> | auto] {1, 4}
Define o espaço em branco entre as bordas dos elementos e seus respectivos

conteúdos.
border-top-width: <comprimento> | thin | medium | thick
Especifica a largura da borda superior de um elemento (fina média ou grossa).
border-bottom-width: <comprimento> | thin | medium | thick
Especifica a largura da borda inferior de um elemento (fina média ou grossa).
border-right-width: <comprimento> | thin | medium | thick
Especifica a largura da borda à direita de um elemento (fina média ou grossa).
border-left-width: <comprimento> | thin | medium | thick
Especifica a largura da borda à esquerda de um elemento (fina média ou grossa).
border-width: [<comprimento> | thin | medium | thick] {1, 4}
Especifica a largura da borda de um elemento (fina média ou grossa).
border-color: <nome_da_cor | #RRGGBB>
Define a cor da borda de um elemento.
border-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset
Define o estilo da borda de um elemento.
border-top: <border-width> || <border-style> || <color>
Define a largura, o estilo e a cor da borda superior de um elemento.
border-bottom: <border-width> || <border-style> || <color>
Define a largura, o estilo e a cor da borda inferior de um elemento.
border-left: <border-width> || <border-style> || <color>
Define a largura, o estilo e a cor da borda à esquerda de um elemento.
border-right: <border-width> || <border-style> || <color>
Define a largura, o estilo e a cor da borda à direita de um elemento.
border: <border-width> || <border-style> || <color>
Define a largura, o estilo e a cor da borda inteira de um elemento.

width: <comprimento> | <percentual> | auto
Especifica a largura de um elemento.
heigth: <comprimento> | <percentual> | auto
Especifica a altura de um elemento.
clear: <comprimento> | <percentual> | auto
Define se outros elementos podem ficar em torno do elemento e, se puderem, de que

lado (nenhum, esquerdo, direito ou ambos, respectivamente).
float: <comprimento> | <percentual> | auto
Especifica em que sentido o texto e outros elementos devem ficar em relação a um

elemento.
Exemplo:
<STYLE>
P {margin: .5in;
padding: 15%;
border-width: medium;
border-style: ridge;
color: teal}
</STYLE>
Propriedades de Classificação
Definem como devem ser exibidos os espaços em branco, os numeradores e os marcadores de listas.
display: block | inline | list-item | none
Especifica como um elemento deve ser exibido. Valores:

 block – adiciona uma quebra de linha e um espaço antes e depois do
elemento;
 inline – remove todas as quebras de linha;
 list-item – adiciona um marcador a um item sem criar uma lista de verdade;
 none – desativa todas as exibições que possam estar associadas ao item,
como um número ou um marcador em uma lista.
white-space: normal | pre | nowrap
Define como um espaço em branco dentro de um elemento deve ser tratado. Valores:
 normal – apresentação padrão do navegador;
 pre – interpreta todo espaço em branco e quebra de linha (como o tag PRE);
 nowrap – impede que as linhas sejam quebradas até que apareça um <BR>.

list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha |
upper-alpha | none
Especifica o tipo de marcador que deve ser exibido com itens de listas.
list-style-image: URL
Identifica a URL de uma imagem a ser usada como marcador em uma lista.
list-style-position: inside | outside
Define como um indicador de lista (marcador, numerador ou imagem) é posicionado em

relação ao texto da lista. Valores:
 inside - para colocar o texto sob o indicador;
 outside - recua o texto de modo que o indicador fique à esquerda.
list-style: <list-style-type> || <list-style-position> || <list-style-image>
Define o estilo ou a imagem e posição dos indicadores de lista.
Exemplo:
<STYLE>
P .list1 {display: list-item;
white-space: nowrap;
list-style: url (ball.gif) outside; }
</STYLE>
Propriedades de Fonte
Fornecem informações específicas de fonte como tipo, cor e tamanho.
font-family: <family-name> || <generic-family>
Especfica em que tipologia deve ser apresentado o texto. Alguns exemplos de nomes de
família são: Times New Roman, Arial, Helvetica e Sans Serif. A generic-family não é
específica da família, mas descreve o estilo da fonte, ou seja, serifada, sem serifa,
cursiva, fantasiada ou monoespaçada.
font-style: normal | italic | oblique
Define o estilo do texto a ser apresentado.

font-size: <xx-small | x-small | small | medium | large | x-large | xx-large> | <comprimento> |
<percentual> | [larger | smaller | <relative-size> ]
Define o tamanho da fonte de uma dentre quatro maneiras:

1. tamanho absoluto – como small (pequeno) ou x-large (extra grande). É
definido pelo navegador e é relativo ao tamanho real do texto;

2. comprimento – especifica o tamanho da fonte em pixels ou qualquer outra
unidade de medida válida;
3. percentual – especifica o tamanho da fonte atual como percentual da fonte-
base do documento;
4. tamanho relativo – como larger (maior que). Aumenta ou diminui o tamanho
do texto em relação tamanho da fonte-base do documento.
font-variant: normal | small-caps
Determina se a fonte deve ser exibida em texto regular ou em capitular (inicial

maiúscula).
font-weight: normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | lighter | bolder
Especifica o peso ou largura da fonte utilizando tamanho absoluto (medidas de número)

ou tamanho relativo – lighter (mais claro) ou bolder (mais escuro). O peso 400 representa
texto normal, enquanto 700 é texto em negrito.
line-height: normal | <número> | <comprimento> | <percentual>
Especifica a altura de uma linha ou a quantidade de espaço entre o texto.
font: <font-weight> || <font-style> || <font-variant> || <font-size> || <line-height> || <font-family>
Uma versão abreviada das propriedades de família de fontes utilizada para definir todos
os aspectos das fontes com um conjunto de itens propriedade-valor.
Exemplo:
<STYLE>
P .headline {font-family: Arial sans-serif;
font-size: x-large;
font-weight: bolder;
font-style: normal;
line-height: 50%; }
</STYLE>

Propriedades de Texto
Especifica como o texto deve ser apresentado pelo navegador através de propriedades como cor,
espaçamento, maiúscula ou minúscula, decoração e alinhamento.
color: <nome_da_cor | #RRGGBB>
Define a cor do texto.
text-align: left | right | center | justify
Define o alinhamento do texto.
text-indent: <comprimento> | <percentual>
Define o recuo ou indentação para o texto, em relação à margem esquerda.
word-spacing: normal | <comprimento>
Define o espaçamento entre as palavras. Normal é o padrão e comprimento fornece uma

medida real.
letter-spacing: normal | <comprimento>
Define o espaçamento entre as letras. Normal é o padrão e comprimento fornece uma

medida real.
text-transform: capitalize | uppercase | lowercase | none
Força o navegador a apresentar todo o texto em letras maiúsculas, minúsculas ou com

iniciais maiúsculas, independentemente de como foi digitado.
text-decoration: none | underline | overline | line-trhrough | blink
Adiciona a decoração do texto.
vertical-align: base-line | sub | super | top | text-top | middle | bottom | text-bottom | <percentual>
Especifica como o texto deve ser alinhado em relação ao restante do texto e à página.
Exemplo:
<STYLE>
P .byline {color: teal;
letter-spacing: 5px;
word-spacing: 10px;
text-transform: capitalize;
text-align: center; }
</STYLE>
Propriedades de Segundo Plano
Inclui cor e imagem de segundo plano, além de especificar como as imagens devem ser dispostas lado a
lado. As propriedades de segundo plano permitem que diferentes cores e imagens de segundo plano
sejam atribuídas a diferentes elementos HTML e que mais de uma de cada seja incluída em uma
determinada página.
background-color: <nome_da_cor> | transparent
Define a cor do segundo plano ou a propriedade de transparência (que faz o segundo

plano principal aparecer transparente).
background-image: URL | none
Define a imagem do segundo plano. A notação para URL é: url (imagem.extensão)
background-repeat: repeat | repeat-x | repeat-y | no-repeat
Define a disposição da imagem em relação à repetição. Valores:

 repeat – dispõe a imagem lado a lado;
 repeat-x – duplica a imagem em uma linha reta atravessando a página da
direita para a esquerda;
 repeat-y – duplica a imagem em uma linha reta para baixo na página;
 no-repeat – inclui a imagem apenas uma vez.
background-attachment: scroll | fixed
Define o se a imagem de background rolará com o conteúdo da página ou permanecerá

fixa quando o usuário usar as barras de rolagem.
background-position: <percentual> | <comprimento> | top | center | bottom
Define a posição da imagem de segundo plano em relação à página e ao seu conteúdo.
Exemplo 1:
<STYLE>
P .body {background-image: url (background.gif);
background-repeat: no-repeat;
background-attachment: fixed; }
</STYLE>

Exemplo 2: Vejamos agora um exemplo de um arquivo de CSS definido para ser referenciado
externamente. É o arquivo folha.css:
p { font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 11pt}

td { font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 11pt}
pre { font-family: "Courier New", Courier, mono; font-size: 11pt}
.subhead2 { font-family: Arial, Helvetica, sans-serif; font-size: 12pt;
font-weight: bold}
.grey { color: #666666 }
h2 { font-family: Arial, Helvetica, sans-serif; font-size: 16pt; font-weight:
bold }
code { font-family: "Courier New", Courier, mono; font-size: 11pt}
th { font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 11pt ;
font-weight: bold}
sup { font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 10pt}
Para referenciar um arquivo como este externamente, inclua-o no mesmo diretório onde estão suas
páginas HTML e insira o tag LINK entre o <HEAD> e o </HEAD>, como segue:
<LINK REL=stylesheet HREF=”folha.css”>
OBS: Ao utilizar folhas de estilo, você pode definir identificadores (indicados com um ponto “.” no início)
e classes (indicadas por um “#” no início) a serem usadas com o tag <SPAN>...</SPAN>, que aplica
diretamente o estilo a uma parte do conteúdo do seu documento HTML.
CSS2
O recém-criado padrão Cascading Style Sheets 2 (CSS2) inclui diversos novos recursos, dentre os quais
o CSS Positioning (posicionamento). Como esta versão de Folhas de Estilo foi lançada após os últimos
lançamentos dos browsers, nem todos os recursos são interpretados por eles.
O exemplo a seguir mostra o poder das CSS2 (fonte: revista Internet.br):
<HTML>
<HEAD><TITLE>Exemplo de CSS2</TITLE>
<STYLE TYPE=”text/css”>
<!—
BODY { font-family: Arial; font-size: 11pt; background-color: yellow; color: black; }
.título1 { position: absolute; top: 20px; left: 20px; z-index: 1; font-family: Arial Black; color: navy; font-size:
28pt; }
.título2 { position: absolute; top: 17px; left: 17px; z-index: 2; font-family: Arial Black; color: blue; font-size:
28pt; }
.título3 { position: absolute; top: 14px; left: 14px; z-index: 3; font-family: Arial Black; color: white; font-size:
28pt; }

.box1 { position: absolute; top: 90px; left: 20px; z-index: 3; width: 150px; font-family: Arial; background-
color: navy; color: white; font-size: 12pt; font-style: italic; font-weight: bold; padding:10; }
.box2 { position: absolute; top: 185px; left: 140px; z-index: 2; width: 170px; font-family: Times;
background-color: blue; color: white; font-size: 14pt; font-style: italic; font-weight: bold; padding:15; }
.box3 { position: absolute; top: 90px; left: 300px; z-index: 1; width: 200px; font-family: Courier New;
background-color: navy; color: white; font-size: 13pt; font-style: italic; font-weight: bold; padding:15; text-
align: center; }
TD { background-color: white; color: black; font-size: 10pt; font-weight: bold; text-align: center; }
B { color: yellow; font-size: 16pt; }
-->
</STYLE>
</HEAD>
<BODY>
<SPAN CLASS=”titulo1”>Isto é que é um título!!!</SPAN>
<SPAN CLASS=”box1”>Uma tabela<P>
<TABLE WIDTH=100% BORDER=1 BORDERCOLOR=white>
<TR><TD>(1, 1)</TD><TD>(1, 2)</TD></TR>
<TR><TD>(2, 1)</TD><TD>(2, 2)</TD></TR>
</TABLE>
</SPAN>
<SPAN CLASS=”box2”>texto,texto,texto,texto</SPAN>
<SPAN CLASS=”box3”>Se fizermos um bom uso de <B>Folhas de Estilo</B> vai conseguir um
resultado muito bom.</SPAN>
</BODY>
</HTML>

5. PROJETO: PERSONAL HOME PAGE
SUGESTÃO DE NOMES ARQUIVOS E TÍTULOS DOS DOCUMENTOS
Nome do Arquivo Título da Página

index.html Nome's Home Page
quem.html Nome's Home Page : Quem Sou
pessoais.html Nome's Home Page : Dados Pessoais
contatos.html Nome's Home Page : Contatos
areas.html Nome's Home Page : Áreas de Interesse
links.html Nome's Home Page : Links Preferidos
curric.html Curriculum Vitae Nome
formacao.html Curriculum Vitae Nome: Formação Acadêmica
experien.html Curriculum Vitae Nome: Experiência Profissional
conhec.html Curriculum Vitae Nome: Conhecimentos Específicos
cursos.html Curriculum Vitae Nome: Cursos e Congressos
* Substitua Nome pelo SEU nome.
MAPA DO SITE
index
quem pessoais contatos links areas curric
formacao conhec experien cursos

REQUERIMENTOS MÍNIMOS
- Capa (título, nome do autor, e-mail, etc.);
- Apresentação (texto simples apresentando o projeto);
- Comentários e observações sobre o projeto (texto detalhando o projeto);
- Mapa do Site;
- Impressão dos arquivos HTML;
- Conclusão sobre o projeto;
- Software e Hardware usados;
- Bibliografia;
- Cópia em disquete (testado e retestado);
- URL do projeto publicado na Internet (pode ser utilizado qualquer hospedeiro gratuito de web
sites, tipo o Starmedia ou o Geocities).

6. BIBLIOGRAFIA
Esta apostila está baseada nos livros a seguir, sendo apenas uma pequena amostra do extenso conhecimento
embutido nos mesmos, além de contribuições de materiais produzidos anteriormente para minhas aulas e
cursos, incluindo também a minha própria experiência como desenvolvedor de web sites e instrutor nas áreas de
Internet e Desenvolvimento para a Web. A bibliografia que segue é naturalmente recomendada àqueles que
desejam um conhecimento mais aprofundado dentro de desenvolvimento de Web Sites utilizando HTML 4 e
outras tecnologias como JAVA, CGI, JavaScript, etc.
- Ed Tittel, James M. Stewart e Natanya Pitts, “HTML 4”, Editora Berkeley Brasil Ltda., 1998
- Série Ramalho, “HTML 4 Prático e Rápido”, Editora Berkeley, 1999
- Laura Lemay, “Aprenda em 1 Semana HTML 4”, Editora Campus, 1998
- David Siegel, “Criando Sites Arrasadores na Web II”, Editora Quark do Brasil Ltda., 1998
- Lynda Weinman, “Colorindo Imagens na Web”, Editora Quark do Brasil Ltda., 1998
- Harley Hahn, “Dominando a Internet”, Makron Books do Brasil, 1994
- Cricket Liu, “Managing Internet Information Services”, O’Reilly & Association Inc., 1994
- Peter van der Linden, “Just JAVA”, Makron Books do Brasil, 1998
- Lemay & Perkins, “Teach Yourself JAVA in 21 Days”, Sams Net Publishing, 1996
- Lemay, "Aprenda em 21 Dias, JAVA 2", Editora Campus, 1999
- Alexander Newman, "Usando JAVA", Editora Campus, 1997
- Hopson & Ingram, "Desenvolvendo Applets com JAVA", Editora Campus, 1997
- Robert Niles & Jeffry Dwight, “CGI em Exemplos”, Makron Books do Brasil, 1998
- William Weinman, “Manual de CGI”, Makron Books do Brasil, 1997
- Gordon McComb, “JavaScript Sourcebook”, Makron Books do Brasil, 1997

CAMINHA, Adriano. HTML 4

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

CAMINHA, Adriano. HTML 4

Enviado por

Direitos autorais:

Formatos disponíveis

Adriano Caminha

INTRODUÇÃO À INTERNET E A THE WORLD WIDE WEB ............................................................................ 4

DEFINIÇÕES DA HTML ...................................................................................................................................... 7

TAGS POR CATEGORIA ................................................................................................................................... 12

HTML 4 - © 1999-Adriano Caminha - adriano@krueger.com.br 2

FOLHAS DE ESTILO EM CASCATA (CSS) ...................................................................................................... 55

PROJETO: PERSONAL HOME PAGE .............................................................................................................. 66

HTML 4 - © 1999-Adriano Caminha - adriano@krueger.com.br 3

A Internet é a rede mundial de computadores e interliga várias redes de computadores (instituições

O sucesso da Internet está na quantidade de informação disponível e nas possibilidades de

nome = identificação do usuário (geralmente o mesmo usado no login)

subdom.subdom.subdom . . . subdom (mínimo de 2)

IMPORTANTE: Alguns sistemas operacionais utilizados em computadores na Internet diferenciam

HTML 4 - © 1999-Adriano Caminha - adriano@krueger.com.br 4

Onde: domínio = subdominio.subdominio ... subdominio

http = Hipertext Transfer Protocol (Protocolo de Transferência de Arquivos Hipertexto)

PRINCIPAIS SERVIÇOS INTERNET

Correio Eletrônico (E-Mail)  Permite o envio e o recebimento de mensagens entre os usuários.

FTP (File Transfer Protocol)  Protocolo de Transferência de Arquivos. Permite a transferência de

Download - "Descarregamento" de um arquivo de um servidor para um computador cliente.

Upload - Transferência de um arquivo, de um cliente para um servidor.

THE WORLD WIDE WEB

HTML 4 - © 1999-Adriano Caminha - adriano@krueger.com.br 5

A arquitetura Cliente-servidor é a arquitetura mais comum dos computadores ligados na Internet. No

Servidor  armazena arquivos e programas que serão

Clientes  utilizam os serviços e programas do

HTML 4 - © 1999-Adriano Caminha - adriano@krueger.com.br 6

Atualmente, a versão 4 da HTML é a linguagem de programação padrão da Web. A HTML 4 contém 86

- Necessidade de "higiene" na escrita do código;

- Organização através de:

- Comandos escritos com maiúsculas;

- Divisão da informação em vários documentos;

- Arquivos de tamanhos pequenos.

HTML 4 - © 1999-Adriano Caminha - adriano@krueger.com.br 7

Home Page - Página pessoal ou página inicial do site.

HTML 4 - © 1999-Adriano Caminha - adriano@krueger.com.br 8

Formas dos Comandos HTML  Os tags podem ser:

- Abertos (simples): <comando>

- Fechados: <comando> . . . </comando>

<elemento 1> ... </elemento 1>

<elemento 2> ... </elemento 2>

<elemento n> ... </elemento n>

REGRAS HTML E DICAS

 Fechar sempre os tags fechados e compostos;

 NUNCA esquecer um sinal de “<” ou de “>”, no início ou no fim do tag;

 EX: </ comando>  ERRADO!!!

 NOMES DOS ARQUIVOS (inclusive extensão “.html” ou “.htm”)  Minúsculas;

Algumas dicas importantes para o seu sucesso na Web:

HTML 4 - © 1999-Adriano Caminha - adriano@krueger.com.br 9

 Outras dicas interessantes:

OBSERVAÇÕES EM RELAÇÃO AOS NOMES DOS ARQUIVOS

 Usaremos sempre e somente minúsculas;

 Os nomes devem iniciar com uma letra obrigatoriamente;

 Pode-se utilizar caracteres como "-" e "_";

 Procure usar nomes significativos, que remetam ao conteúdo do arquivo.

HTML 4 - © 1999-Adriano Caminha - adriano@krueger.com.br 10

Um documento HTML básico é composto de três partes:

Analisaremos, mais adiante, cada um destes tags.

HTML 4 - © 1999-Adriano Caminha - adriano@krueger.com.br 11

TAGS DE ESTRUTURA DE DOCUMENTO

<!DOCTYPE> - (Tag Simples)

Identificação da versão HTML usada no documento. Obrigatório para ajudar os navegadores e

 HTML PUBLIC "Nome da Versão"

Para HTML 4: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">