Tudo Sobre HTML PDF

INTRODUO A LINGUAGEM HTML
Esta pgina foi adaptada de: Aprenda HTML jeguinho.cjb.net
e-mail: maurinho@brazil.zzn.com
Esta pgina tem o objetivo de ensinar as noes bsicas da linguagem HTML, pois
para fazer uma Home Page vac pode usar programas que usam uma linguagem visual
(como por exemplo, Front Page ou PageMill), ou seja, voc faz a formatao de sua
pgina sem precisar saber cdigos.
O Que HTML ???

HTML a abreviatura de Hyper Text Markup Language, que pode ser traduzida como
Linguagem de Hipertexto Baseada em Cdigos. Define um conjunto de estilos como
cabealhos, pargrafos, listas e tabelas que compes uma pgina da WWW e serve para
indicarmos formataes para textos, inserir imagens e ligaes de hipertexto.
Tags ou Diretivas.
A linguagem HTML possui algumas regras de sintaxe que devemos seguir para obter
o resultado desejado.
Todo documento HTML apresenta elementos entre parnteses angulares
(<ELEMENTOS>), esses elementos so as etiquetas da linguagem HTML, que so os
comandos de formatao da linguagem. As etiquetas, tags ou diretivas, tem sua
correspondente etiqueta de fechamento (<ETIQUETA> ... </ETIQUETA>). Isto
nescessrio porque as tags servem para definir a formatao de uma poro de texto, e
assim marca-se onde comea e onde termina o texto com formatao especificada por
ela. Alguns tags so chamados "vazios" ou unidirecionais, pois no marcam uma regio
de texto, apenas inserem alguma coisa no documento. As etiquetas sero escritas em
maisculas apenas para facilitar a visualizao, pois voc pode misturar ou colocar tudo
minsculo que igualmente aceito pelos Browsers.
Como Editar as Pginas em HTML.

As pginas desenvolvidas em HTML so arquivos simples e podem ser lidos e
confeccionados em qualquer editor de texto (Microsoft Word, Word Pad, Edit do DOS,
NotePad). Depois de editar os cdigos e textos s gravar o arquivo mudando a
exteno (ex.: .txt) para .html ou .htm.
A diferena entre .htm e .html que o .html mais novo e so comandos melhores
aceitos e .htm como se iniciou o html mais no mudou praticamente nada. Tanto faz
voc salvar em qualquer uma das duas.
Ento, basicamente, os arquivos HTML possuem dois componentes:
1. O texto propriamente dito;

2. As tags que indicaro os elementos de pgina:
estrutura;
formatao;
vnculos a outras pginas.
Obs.: Para exibir o resultado do arquivo HTML no nescessrio estar conectado rede, basta acessar um
Browser (Internet Explorer, Netscape, etc) e utiliza-lo para abrir o arquivo.
Formatao de Textos
Em uma pgina HTML podem existir textos, imagens, itens multimdia e hipertexto.
Para isso o documento HTML apresenta a seguinte estrutura:
<HTML>
<HEAD>
<TITLE>Titulo do documento</TITLE>
</HEAD>
<BODY>
texto, imagem, links, etc...
</BODY>
</HTML>
Como o HTML no uma linguagem de programao, voc nunca ser avisado de

erros cometidos na edio do seu documento. Um simples esquecimento de uma barra
pode mudar toda sua pgina.
Sees
<HTML> e </HTML>:
Identifica o documento como sendo HTML.
<HEAD> e </HEAD>:
o cabechalho e contm as informaes sobre o documento.
<TITLE> e </TITLE>:
Define um ttulo que mostrado no alto da janela do Browser. Todo documento
WWW deve ter um ttulo. Esse ttulo referenciado em busca pela rede, dando
uma identidade ao documento, facilitando assim, a classificao em catalogos de
busca.
<BODY> e </BODY>:
Tudo que estiver na seo BODY ser mostrado na janela do browser e,
consequentemente, apresentado ao leitor. Esta seo pode conter cabealhos,
pargrafor, listas, tabelas, imagens e links para outros documentos. Dentro da
tag <BODY> podemos usar as seguintes opes que no so obrigatrias e caso
no existam assumem o valor default:
BGCOLOR - especifica uma cor de fundo para a pgina;

BACKGROUND - especifica a imagem (.gif ou .jpg) usada no fundo da tela;
BGPROPERTIES = FIXED - fixa uma imagem no fundo da tela;
TEXT - define uma cor para o texto;
LINK - define uma cor para os links;
VLINK - define uma cor para os links j visitados;
ALINK - define uma cor para o link na hora que for ativado.
Por exemplo:
<BODY BACKGROUND=nome_imagem.extencao BGCOLOR=nome_cor

TEXT=nome_cor LINK=nome_cor VLINK=nome_cor ALINK=nome_cor>
Ou ento, podemos usar o cdigo equivalente da cor em hexadecimal:

<BODY BACKGROUND=nome_imagem.extencao BGCOLOR=#codigo_cor
TEXT=#codigo_cor LINK=#codigo_cor VLINK=#codigo_cor ALINK=#codigo_cor>
No importa a seqncia dos atributos (BGCOLOR, LINK, VLINK...) e sempre se

coloca um espao entre os atributos.
Formatao de Textos
Podemos formatar o texto mudando a fonte do texto, a cor, colocando em itlico,
negrito, sublinhado, fonte espaada, subscrito, etc. Para todas elas so nescessrio
delimitar o incio e o fim do texto a ser formatado.
<FONT COLOR=nome_cor> texto </FONT>:

Muda a cor do texto que estiver entre as tags incio e fim.
<FONT FACE=nome_letra> texto </FONT>:
Muda o tipo de letra do texto que estiver entre as tags incio e fim.
<FONT SIZE=tamanho> texto </FONT> ou <Hn> texto </Hn>:
Muda o tamanho da letra do texto que estiver entre as tags incio e fim. O n da tag
<Hn> pode variar de 1 (o maior) at 6 (o menor).
<B> texto </B>:
Coloca o texto que estiver entre as tags incio e fim em negrito.
<I> texto </I>:
Coloca o texto que estiver entre as tags incio e fim em itlico.
<TT> texto </TT>:
Coloca o texto que estiver entre as tags incio e fim com fonte monoespaada.
<U> texto </U>:
Sublinha o texto que estiver entre as tags incio e fim. (No aconselhavel
colocar o texto sublinhado, pois os links j so sublinhados e pode confundir).
<SUP> texto </SUP>:
Coloca o texto que estiver entre as tags incio e fim em sobscrito.
<SUB> texto </SUB>:
Coloca o texto que estiver entre as tags incio e fim em subscrito.
<S> texto </S>:
Taxa o texto que estiver entre as tags incio e fim.
Ainda falando da disposio de texto na tela, se desejarmos mudar de linha no

basta usar o ENTER como em um editor de textos, existem tags especficas para isso,
alm de outros recursos para alocar um texto na pgina. So eles:
<CENTER> texto </CENTER>:

Centraliza o texto em relao pgina.
<BR>:
Quebra de linha, inicia o texto seguinte na linha logo abaixo.
<NOBR> texto </NOBR>:
Faz com que o texto no tenha quebras de linhas e crie uma barra de rolagem
horizontal para poder ver o texto inteiro.
<WBR>:
Coloca quebra de linhas no comando <NOBR>.a quebra de linha vai ser onde
voc colocou este comando.
<P>:
Fora o fim de um pargrafo, ou seja, pula uma linha antes de iniciar outro
pargrafo.
Exite tambm um comando de preformatao (<PRE> texto a ser preformatado

</PRE>), ele usado para que o browser aceite seus espaos grandes de uma letra para
outra e o ENTER, Se voc colocar a tag <PRE> do jeito que voc digitar o texto ser
exatamente como aparecer no Browser.
Linhas horizontais so formas de deixar sua pgina com mais facilidade de encontrar
coisas e tambm mais apresentvel. Essas linhas so boas sadas para textos grandes
em que os assuntos so diversos.
<HR>:
Inclui uma linah horizontal no texto, separando-o em blocos. Nesta tag podemos
especificar:
WIDTH - n % do comprimento ou o n em pixel - Ex.: <HR WIDTH=50%>

ou <HR WIDTH=100>;
SIZE - espessura do trao - Ex.: <HR SIZE=5>.
Exemplo contendo os tags de formatao de texto:

<HTML>
<HEAD>
<TITLE>Exemplo das tags</TITLE>
</HEAD>
<BODY BGCOLOR=White TEXT=Black>
<HR WIDTH=80% SIZE=3>

<PRE>
<CENTER>E X E M P L O</CENTER>
</PRE>
<HR WIDTH=80% SIZE=3> <P>
<H1>Tamanho1</H1> <BR>
Texto1 - <FONT COLOR=Blue>Cor Azul</FONT> <BR>
Texto2 - <FONT FACE="Times New Roman">Fonte Times New Roman</FONT> <BR>
Texto3 - <B>Negrito</B> <BR>
Texto4 - <I>Itlico</I> <BR>
Texto5 - <TT>Monoespaado</TT> <BR>
Texto6 - <U>Sublinhado</U> <BR>
Texto7 - <SUP>Sobscrito</SUP> <BR>
Texto8 - <SUB>Subscrito</SUB> <BR>
Texto9 - <S>Taxado</S> <P>
</BODY>
</HTML>
Caracteres Especiais
Alguns caracteres especiais so tratados de uma maneira diferente na Web, pelo fato
de que nem todos os computadores ligados Internet esto configurados para visualizar
os acentos. Existe uma codificao que permite a qualquer equipamento interpretar os
cdigos e exibir na tela o caracter desejado.
Os cdigos funcionam da seguinte maneira:
Primeiro colocamos o caracter &;

Em seguida a letra que dever ser acentuada;
Coloque a acentuao desejada;
Acrescente o ";" (ponto e virgula).
Relacionamos abaixo alguns dos caracteres e acentos da HTML:
Acentos e Caracteres Cdigo

Agudo &_acute;
Grave &_grave;
Circunflexo &_circ;
Til &_tilde;
Trema &_uml;
Cedilha &_cedil;
& &
< <
> >
©
" "
(espao em branco)
ncoras e Links
ncoras (Links)
Para inserir um link, ou seja, uma ligao de uma regio do texto (ou imagem) a um
outro documento nescessrio usar o tag <A>, da seguinte forma:
<A HREF="arq_dest"> ncora </A> onde arq_dest o URL do documento de destino,
ncora o texto ou imagem que servir de ligao hipertexto do documento sendo
apresentado para o documento de destino.
Existem 3 caminhos para se referir um documento de destino:
1. Caminho relativo - Pode ser usado sempre que quiser fazer referncia a um
documento que esteja no mesmo servidor do documento atual.
<A HREF="apresentacaodalicao.html"></A>.
2. Caminho Absoluto - Quando se quer fazer referncia a um documento que esteja
em outro servidor.
<A HREF="http://www.terravista.pt/ancora/3300"></A>.
3. Ligao com trechos da mesma pgina - Desvia para o local do trecho desejado
na mesma pgina.
Colocarei um exemplo, como se voc quisesse voltar para o incio dessa pgina:
o Coloque o nome em algum local que voc quer que o link se dirija. Como
esse comando colocado no incio da pgina:
<A NAME="inicio"></A>.
o Agora faa o link para essa ncora, como a seguir:
<A HREF="#inicio"></A>.
NOTA: Para voc colocar o endereo de seu e-mail na sua pgina voc tem que colocar
da seguinte forma:
<A HREF="mailto:seu_e-mail"> seu_e-mail </A>
Imagens e Animaes
Imagens
Com relao de uso de imagens na Web temos que estas se dividem em duas
categorias gerais que so as imagens in-line e as externas. As imagens in-line so
apresentadas na pgina junto com os vnculos e com o texto e so carregadas
automaticamente. J as imagens externas so carregadas somente por demanda
(download), atravs de vnculos.
Independente de sua categoria, as imagens podem se apresentar em dois formatos:
.gif e .jpg.
GIF - Este padro mais conhecido e mais compatvel com os navegadores

existentes. Recomendado para cones com menos de 256 cores, cores lisas,
puras, preto e branco. Sua qualidade bem superior ao formato JPG, pois o
tamanho do arquivo maior.Suas imagens podem ser transparentizadas.
JPG ou JPEG - Foi o padro proposto pelo comit ISO e geralmente usado para
imagens mais complexas (fotogrficas). Permite alta taxa de compresso, por
isso gera um arquivo menor, o que implica numa perda de informao e
qualidade.
O elemento IMG, ou seja, a tag <IMG>, insere as imagens que sero apresentadas
junto ao texto. Um atributo SRC, que o mais importante dessa tag, deve estar presente
da seguinte forma:
Se a imagem estiver na mesma pasta que a sua pgina ento a tag seria assim:
<IMG SRC="nome_imagem.exteno">
Se a imagem estiver em uma pasta diferente da que sua pgina est, ento voc tem
que colocar o endereo desta pasta e depois o arquivo que contm a sua imagem.
Digamos que sua pgina esta na pasta "pagina" e a imagem (img.gif) que voc vai
colocar esta na pasta "imagens" que esta dentro da pasta "pagina", ou seja, essa
imagem est dentro da pasta "\imagens\img.gif". Ento a tag seria:
<IMG SRC="imagens\img.gif">
DICA: Se voc quiser colocar uma imagem que est em outra pgina, basta clicar
com o boto direito do mouse em cima da imagem e seleciona o opo propriedades e
copiar a endereo URL e colocar no atributo SRC.
Juntamente com a tag <IMG> podemos usar alguns parmetros como:
BORDER - para determinar a moldura da imagem;

WIDTH - para determinar a largura da imagem;
HEIGHT - para determinar a altura da imagem;
ALIGN - para alinhar as imagens de vrias formas:
LEFT - alinha a imagem a esquerda do texto;

RIGHT - alinha a imagem a direita do texto;
TOP - alinha o texto com o topo da imagem;
MIDDLE - alinha o texto com o meio da imagem;
BOTTOM - alinah o texto com a parte inferior da imagem.
ALT - quando a pessoa deixar o mouse sobre a imagem aparecer o que voc
escreveu.
Por exemplo:
<IMG ALT="explicao da imagem" BORDER=4 WIDTH=50 HEIGHT=20 ALIGN=Left>
Uma imagem pode funcionar como vnculo, incluindo-se a tag <IMG> entre as partes
de abertura e fechamento de uma tag de vnculo <A>. Assim temos:
<A HREF="arq.html"><IMG SCR="img.gif"></A>
Para se projetar uma pgina deve-se procurar um equilbrio com relao a

quantidade de imagens e cores e a necessidade de transmisso de informaes. O uso
excessivo de imagens, imagens grandes, poinis de fundo tornar a pgina mais lenta
ao ser carregada e o que, em muitos casos, levar os usurios que tiverem uma conexo
lenta de rede a desistirem de carregar esta pgina. Para que isso no acontea, verifique
a nexessidade do uso dessa ou daquela imagem, mantenha as imagens pequenas
reutilize-as sempre que possvel.
Animaes
Com relao ao uso de mdias em HTML necessrio a utilizao de vnculos
correspondente ao caminho URL do arquivo externo que se deseja inserir em sua
pgina.<A REF="arq_ext">Arquivo</A>. Neste contexto entram os arquivos de som e
vdeo.
Som
O primeiro caso, o som, utilizado para transmitir informaes que no sejam na

forma de ilustrao ou palavras e at mesmo para desejar boas vindas ao usurio que
acaba de carregar aquela pgina. Esses arquivos geralmente possuem exteno .waw e
.mid.
Agora vamos aos comandos:
<EMBED>
<BGSOUND>
Como o comando <EMBED> no aceito pelo IE 3.0 e alguns outros browsers
desconhecidos, voc ter que colocar o comando duas vezes, um com o <EMBED> para
o Netscape e <BGSOUND> para outros Browsers.
Esta tags pode conter os seguintes parmetros:
SRC - define o caminho para o arquivo de som;

AUTOSTART - define que ao ser carregado ele j deve ser tocado ou que o
visitante deve clicar no play para tocar, TRUE para tocar automaticamente e
FALSE para quando o visitante apertar play.
AUTOLOAD - define que ele deve ser automaticamente comeado a baixar o
arquivo de som quando entrar na pgina, ou o visitante deve apertar o play para
baixar o arquivo, TRUE para baixar automaticamente e FALSE para quando o
visitante apertar play.
LOOP - define o nmero de vez que a msica ser tocada, TRUE para tocar
infinitas vezes.
HIDDEN - define se voc quer que o controle ficam sumidos ou no, TRUE para
deixar invisvel e caso queira os controles no precisa colocar FALSE.
WIDHT e HIGHT define o tamanho dos controles.
Ento os comandos de sua pgina ficariam assim:

<EMBED SCR="musica.mid" AUTOSTART="true" AUTOLOAD="true" LOOP="true"
HIDDEN="true">
<BGSOUND SCR="musica.mid" AUTOSTART="true" AUTOLOAD="true"
LOOP="true" HIDDEN="true">
Vdeo
J os arquivos de vdeos fornecem informaes que as imagens estticas no so

capazes de transmitir. Suas extenses so geralmente .mpg, .mov, .avi. interessante
utilizar informaes sobre o formato e o tamanho do arquivo de mdia externo A tag
<IMG> possui atributos que permitem a execuo in-line de arquivos de som e vdeo. O
atributo DYNSRC (para IE) inclui arquivos de vdeo: <IMG DYNSRC="arquivo.avi
SRC="arquivo.gif ALT="[a arquivo]">.
Letreiros
Em HTML possvel a criao de letriros, ou seja, uma linha rolvel que se mover
de um lado ao outro da pgina da Web. Para que este efeito seja possvel basta alocar o
texto que se deseja transformar em letreiro entre as tags de abertura e fechamento
<MARQUEE> texto </MARQUEE>. Esta tag possui vrios atributos:
Atributo Utilizao
1. Rola de um lado ao outro da tela e
BEHAVIOR
at desaparecer.
2. Rola o letreiro da direita para
1. SCROOL
esquerda e para.
2. SLIPE
3. Faz o letreiro saltar de um lado da
3. ALTERNATE
tela para outro.
1. Move o letreiro da esquerda para

DIRECTION (somente se o letreiro for
direita.
SCROOL)
2. Move o letreiro da direita para
esquerda.
1. LEFT
2. RIGHT
Define o nmero de vezes que o letreiro

LOOP
ralar na tela.
Define o nmero de pixel para locao do
SCROLLAMOUNT
letreiro.
Define o tempo da animao em
SCROLLDELAY
milessegundos.
Define a cor de fundo da caixa que delimita
BGCOLOR
o letreiro.
Define a altura da caixa que delimita o
HEIGHT
letreiro.
Define a largura da caixa que delimita o
WIDTH
letreiro.
Define o espao entre as bordas esquerda e
HSPACE
direita e o texto.
Define o espao entre as bordas inferior e
VSPACE
superior e o texto.
ALIGN
TOP Define o alinhamento do letreiro com

MIDDLE relao ao texto.
BOTTOM
Listas
As lista so utilizadas para organizar o texto quando necessrio uma relao de itens
ordenados ou no. A HTML define 3 tipos de listas:
Listas Ordenadas ou Numeradas - essas listas so delimitadas pelas tags

<OL>(inicializa uma lista) ... </OL>(finaliza uma lista) e cada item desta lista
comea com a tag <LI>(sem o fechamento). So aquelas que possui um nmero.
O atributo TYPE define o tipo de numerao da lista. Assim, A (letras
maisculas), a (letras minsculas), I (algarismos romanos) e 1 (nmeros
arbicos).
Exemplo:
Cdigo Sada no Browser
<OL>
1. item 1
<LI>item 1
2. item 2
<LI>item 2
</OL>
Lista No-Ordenadas ou com Marcadores - so aquelas que os itens so

marcadores ou outros smbolos. Estas listas so indicadas pelas tags </UL> ...
</UL>. Os elementos dessa lista tambm so separados por </LI>. Nesta lista o
atributo TYPE define o tipo de marcadores de cada uma delas. Assim, disk
(marcador preenchido), square (quadrado), circle (marcador vazado).
Exemplo:

<UL>
o item 1
<LI>item 1
o item 2
<LI>item 2
</UL>
Listas de Definio ou de Glosrios - so aquelas em que cada item tem dois

componetes, um termo e uma definio. Estas listas so indicadas pelas tags
<DL> ... </DL>. As tags <DT> e <DD>, unidirecionadas, respectivamente, indicam
o termo a ser definido e a definio desse mesmo termo.
Exemplo:

<DL>
<DT>item 1 item 1
<DD>item 2 item 2
<DD>item 3 item 3
</DL>
Tabelas
As tabelas so usadas para organizar o contedo de uma pgina, ou seja, imagens
em linhas e colunas. Com tag <TABLE> contedo da tabela </TABLE> indicamos que se
trata de uma tabela.
<CAPTION> ... </CAPTION> - para acrescentar um ttulo na tabela.

<TR> ... </TR> - para informar onde comea (<TR>) e onde termina (</TR>) cada
linha da tabela.
<TH> ... </TH> ou <TD> ... </TD> - para identificar o incio e o fim de cada clula. A
diferena entre <TH> e <TD> que o conteudo da clula da tag <TH> escrita em
negrito e centralizada.
Agora j podemosfazer uma tabela com estes comandos, que ficaria assim:
Tabela
clula 1 clula 2
clula 3 clula 4
Os comandos da tabela acima seria assim:
<TABLE>
<CAPTION> Tabela </CAPTION>
<TR>
<TH> clula 1 </TH>
<TH> clula 2 </TH>
</TR>
<TR>
<TD> clula 3 </TD>
<TD> clula 4 </TD>
</TR>
</TABLE>
Atributos para a tag <TABLE>:
BORDER - define a espessura da borda;

WIDTH - define a largura da tabela, pode ser definida em % ou valor absoluto
(com nmeros);
ALIGN - alinhamento horizontal (Right, Center, Left);
BGCOLOR - para alterar a cor de fundo;
BACKGROUND - permite colocar uma imagem no fundo;
CELLSPACING - define o espao existente entre as clulas da tabela;
CELLPADDING - define o espao existente entre as bordas da clula e seu
contedo;
BORDERCOLOR - usado para alterar a cor da borda.
Atributos para as tags <TD> e <TH>:
COLSPAN - especifica quantas colunas da tabela a clula vai ocupar;

ROWSPAN - especifica quantas linhas da tabela a clula vai ocupar;
WIDTH - define a largura de cada clula, pode ser definida em % ou valor
absoluto (com nmeros);
HEIGHT - define a altura de cada clula, pode ser definida em % ou valor absoluto
(com nmeros);
ALIGN - alinhamento horizontal (Right, Center, Left);
VALIGN - alinhamento vertical (Top, Middle, Bottom);
BGCOLOR - alterar a cor de fundo desse elemento.
Uma tabela usando alguns elementos destes ficaria assim:
clula 1
clula 2
clula 3 clula 4
Cdigos da tabela acima;

<TABLE BORDER=1 BORDERCOLOR=#ffcc00 BGCOLOR=#6666ff CELLSPACING=2
CELLPADDING=10 ALIGN=center>
<TR>
<TD COLSPAN=2>clula 1</TD>
<TD ROWSPAN=2>clula 2</TD>
</TR>
<TR>
<TD>clula 3</TD>
<TD>clula 4</TD>
</TR>
</TABLE>
Frames
Os frames permitem a diviso da tela em diferentes regies onde pode-se apresentar
diferentes pginas. Isso possibilita, por exemplo, que se determine a rea da tela para
ser a pgina principal e outras reas para menus ou links.
A tag <FRAMESET> cria um documento de definio de frames, que onde ser
criado o layout de cada frame e indicado o nome dos documentos que sero
apresentados. Essa tag substitui a tag <BODY> quando for utilizada.
Deve-se definir um dos dois atributos a tag <FRAMESET> para se ter o layout
desejado: COLS e ROWS.
Com o atributo COLS indicamos quantas colunas teremos na pgina - <FRAMESET
COLS="lagura_coluna, largura_coluna, *"> (a largura podde ser definida em
porcentagem (%) ou em valor absoluto) - Assim, divide-se quantos frames foram
indicados e pelo * (asterstico), definimos que o frame ocupar todo o espao restante da
tela.
O atributo ROWS define quantas linhas a frame ser dividida - <FRAMESET
ROWS="50%, 50%"> - definimos que a pgina ser dividida em 2 frames horizontais.
O atributo SRC indica qual pgina ser chamada em cada frame criado e o atributo
NAME atribui o nome a esse frame.
Existem ainda outros atributos que esto relacionados abaixo:
Atributos Utilizao
MARGINWIDTH Determina as margens esquerda e direita do frame.
MARGINHIGHT Determina as margens superior e inferior do frame.
Configura a barra de rolagem, podendo aparecer ou no.

SCROLLING = YES,
Pode ainda, aparecer somente quando o texto ultrapassar o
NO ou AUTO
tamanho da clula (AUTO).
Impede que as barras que delimitam os frames sejam

NORESIZE
redimensionados.
O cdigo de um documento HTML contendo frames ficaria assim:

<HTML>
<HEAD>
<TITLE> Ttulo da Pgina </TITLE>
</HEAD>
<FRAMESET COLS="200, *">
<FRAME SCR="pgina que ficar no 1 frame" NAME="nome do 1 frame">
</FRAMESET>
</HTML>
A tag <NOFRAME> ... </NOFRAME> coloca o cdigo que substituir a pgina caso o
Browser no d o suporte ao recurso de frames. Caso o Browser entenda frames, tudo
que estiver entre tag de abertura e fechamento <NOFRAME> ... </NOFRAME> ser
ignorado e o frame funcionar conforme programado.
Exemplo:
<HTML>
<HEAD>
<TITLE> Ttulo da Pgina </TITLE>
</HEAD>
<FRAMESET COLS="200, *">
<NOFRAMES>
<BODY>
Aqui fica sua pgina sem frames para quem no consegue ver sua frames.
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>
Alm dos atributos j citados, temos tambm o TARGET. Quando iniciamos um

frame, geralmente colocamos um nome para que possa ser identificado. Para acessar
esse frame que colocamos nome, usamos TARGET, que define onde a pgina dever ser
carregada. O atributo tem quatro valores que so:
TARGET="nome do frame" - carrega no frame especificado;

TARGET="_top" - limpa a tela e abre o arquivo que esta sendo chamado;
TARGET="_blank" - abre uma nova janela para exibir o documento;
TARGET="_self" - carrega o documento no mesmo frame que o chamou.
Exemplos:
<A HREF="http://www.terravista.pt/ancora/3300" TARGET="menuhtml">
<A HREF="apresentacaodalicao.html" TARGET="_top">
Formulrios
Os formulrios em uma pgina WEB permitem coletar informaes das pessoas que
visitam a pgina. atravs de algumas diretivas especiais podemos definir as literais e o
formato dos objetos de resposta. Tambm definimos que ser tomada assim que o
formulrio for preenchido.
Para criar um formulrio faz-se necessrio o uso da tag <FORM> onde sero
includos os elementos desse formulrio. Essa tag contm dois atributos: METHOD e
ACTION.
1) O atributo METHOD pode ter o valor GET ou POST, que determina a maneira como
os dados do formulrio sero enviados para processamento. A diferena entre os dois
a forma que cada um "empacota" esses dados.
2) O atributo ACTION um ponteiro que indica o script que processa as informaes
que se obtm apartir do formulrio. Deve conter a URL completa do programa que ir
receber dados do formulrio. Por exemplo http://www.uky.edu/cgi-
bin/cgiwrap/~johnr/AnyForm.cgi.
Tambm tem o atributo TARGET que opcional e s necessrio quando se utiliza
frames, ele indica onde aparecer a pgina de confirmao do formulrio.
A tag <INPUT> indica um elemento de formulrio simples e possui dois atributos que
so TYPE e NAME.
1) As opes que o atributo TYPE oferece so:
TEXT - para campos de entrada de texto; Exemplo:

RADIO - para botes de rdio; Exemplo:
CHECKBOX - para caixas de verificao; Exemplo:

PASSWORD - funciona da mesma forma que o atributo TEXT, exceto que todas
as letras digitadas aparecem como um asterstico (*). Exemplo:
2) O atributo NAME, na maioria dos casos, define o nome do campo.

3) O atributo VALUE (valor), neste caso, pode ser usado se voc quiser, ele define um
valor prvio para cada campo, de tal forma que quando a pgina seja carregada este
valor j esteja preenchido podendo ser alterado pelo visitante.
4) O atributo SIZE define o tamanho do campo e definido no nmero de caracteres.
Se voc quiser um campo de 40 caracteres, voc dever definir como SIZE=40. Mas note
que esse valor no limita o campo em 40 caracteres, ele define o tamanho que ele ser
mostrado na pgina.
5) O atributo MAXLENGHT (comprimento mximo) define o nmero mximo de
caracteres que podem ser digitados nos campos.
6) O atributo CHECKED usado para marcar as opes RADIO e CHECKBOX.
Lembrando que a opo RADIO s pode ter um selecionado.
Agora vamos ver alguns exemplos:
Botes de escolha
<INPUT TYPE=Radio NAME=sexo VALUE=Mas CHECKED>Masculino
<INPUT TYPE=Radio NAME=sexo VALUE=Fem>Feminino
Masculino Feminino
O atributo NAME, neste caso, deve ser igual para todos os campos.
O atributo VALUE deve conter o valor deste campo, este ser o valor processado e
repassado ao programa.<\TD>
Botes de checagem
Na sua casa tem:<BR>
<INPUT TYPE=Checkbox NAME=eletro1 VALUE=TV>Televiso<BR>
<INPUT TYPE=Checkbox NAME=eletro2 VALUE=Radio>Rdio<BR>
<INPUT TYPE=Checkbox NAME=eletro3 VALUE=Vidio>Vdeo Cassete<BR>
Na sua casa tem:
Televiso
Rdio
Vdeo Cassete
O atributo NAME, neste caso, deve ser diferente para cada campo.
O atributo VALUE deve conter o valor deste campo, este ser o valor processado e
repassado ao programa.<\TD>
A tag <SELECT> ... <SELECT> permite que voc defina uma lista de opes para a
seleo do visitante. O atributo NAME define o nome desta lista e SIZE define quantos
elementos iro aparecer na tela. Caso ele seja omitido, somente uma opo aparece de
cada vez. Cada opo da lista recebe uma tag <OPTION>, e o atributo VALUE deste
elemento ir definir o valor de cada opo, que ser a informao fornecida ao programa
de acordo com a seleo feita.
Agora vamos ver um exemplo:
Seleo
Qual o estado que voc mora ???<BR>
<SELECT NAME=estado>
<OPTION VALUE=SP>SP
<OPTION VALUE=RJ>RJ
<OPTION VALUE=MG>MG
<OPTION VALUE=Outro>Outro
</SELECT>
Qual o estado que voc mora ???
SP
Se voc colocar SIZE=2 ento fica assim:
Qual o estado que voc mora ???

SP
RJ
As tags <TEXTAREA> ... <TEXTAREA> (rea de texto) permite definir um campo de

texto com vrias linhas. O atributo ROWS e COLUMNS definem o tamanho da rea em
que o visitante vai escrever, ROWS define o nmero de linhas da caixa de texto e
COLUMNS o nmero de colunas, e o atributo COLS define quantos caracteres cada linha
possui. O atributo NAME define o nome da caixa de texto. Se voc incluir o atributo
WRAP=hard a sua caixa de texto no ira possuir uma barra de scroll horizontal.
Agora vamos ver um exemplo:
Caixa de Texto
<TEXTAREA NAME=comentarios ROWS=3 COLUMNS=37>
Aqui voc coloca o seu comentrio
</TEXTAREA>
Aqui
voc coloca o seu comentrio
Envio e limpeza de dados:

<INPUT TYPE=Reset Value=...>
O valor RESET no atributo TYPE define um boto que limpa todos os campos,
colocando os mesmos valores de quando a pgina foi carregada. No atributo VALUE
pode-se definir o que estar escrito no boto, por exemplo, "Limpar". Caso nenhum
valor seja definido aparecer "Reset".
<INPUT TYPE=Submit NAME=... Value=...>

O valor SUBMIT (submeter) no atributo TYPE define um boto de envio de
informaes, ou seja, um boto que ao ser acionado executa o programa associado ao
formulrio (aquele que foi definido em ACTION no tag FORM), passando para ele os
dados preenchidos. Assim como no tipo RESET, o atributo VALUE define o que estar
escrito no boto. O NAME opcional.
<INPUT TYPE=Image NAME=... SRC=... ALT=...>

Uma outra alternativa para o tipo SUBMIT seria o uso de uma imagem em seu lugar.
Para isso, existe o tipo IMAGE. Neste caso, passam a existir os atributos SRC e ALT
normalmente usados em elementos que definem uma imagem.
<INPUT TYPE=Hidden NAME=... Value=...>

O valor HIDDEN (escondido) define dados que devem ser passados ao programa,
mas no devem aparecer para quem est vendo a sua pgina. Neste caso, NAME
identifica o dado e VALUE define o seu valor.
Para fazer um formulrio tem que ser usado o CGI gratuito

(ex.:http://www.uky.edu/cgi-bin/cgiwrap/~johnr/AnyForm.cgi) e este CGI precisa de
alguns comandos:
AnyFormMode - deve ser preenchido com o valor "MAIL";

AnyFormDisplay - pode ser preenchido com "SHORT", "STANDARD", com uma
URL (endereo) da pgina que ser mostrada aps os dados serem enviados ou
com "NONE";
AnyFormTo - deve conter o e-mail no qual sera enviado as informaes do
formulrio;
AnyFormFrom - deve conter o e-mail de quem est preenchendo o formulrio;
AnyFormSubject - deve conter o assunto do formulrio para quando voc
receber o e-mail contendo as informaes preenchidas do formulario voc
identifica-la.
Alguns destes elementos so normalmente definidos no elemento INPUT com o

atributo TYPE e o valor HIDDEN:
<INPUT TYPE=Hidden NAME=AnyFormTo VALUE="maurinho@brazil.zzn.com">
Agora vamos ver um exemplo completo de um formulrio:
Cdigo:
<B>Preencha o formulario e clique no botao ok.:</B>

<P>
<FORM ACTION="http://www.uky.edu/cgi-bin/cgiwrap/~johnr/AnyForm.cgi"
METHOD="POST">
<INPUT TYPE="hidden" NAME="AnyFormDisplay" VALUE=NONE>
<INPUT TYPE="hidden" NAME="AnyFormMode" VALUE="mail">
<INPUT TYPE="hidden" NAME="AnyFormSubject" VALUE="e-mails da minha
HomePage">
<INPUT TYPE="hidden" NAME="AnyFormTo" VALUE="maurinho@brazil.zzn.com">
<TABLE BORDER="0">
<TR>
<TD>Email.:</TD>
<TD><INPUT TYPE="text" SIZE="40" NAME="AnyFormFrom"></TD>
</TR><TR>
<TD>Nome.:</TD>
<TD><INPUT TYPE="text" SIZE=35 NAME="Nome.:"></TD>
</TR><TR>
<TD>Idade.:</TD>
<TD><INPUT TYPE="text" SIZE=3 NAME="Idade.:"></TD>
</TR><TR>
<TD>Sexo.: </TD>
<TD>
<INPUT TYPE="Radio" NAME=sexo VALUE=Mas CHECKED>Masculino
<INPUT TYPE="Radio" NAME=sexo VALUE=Fem>Feminino
</TD>
</TR><TR>
<TD>Cidade.:</TD>
<TD><INPUT TYPE="text" SIZE=20 NAME="Cidade.:"></TD>
</TR><TR>
<TD>Estado.:</TD>
<TD>
<SELECT NAME="estado">
<OPTION VALUE=SP>SP
<OPTION VALUE=RJ>RJ
<OPTION VALUE=MG>MG
<OPTION VALUE=Outro>Outro
</SELECT>
</TD>
</TR><TR>
<TD>Pas.:</TD>
<TD><INPUT TYPE="text" SIZE=20 NAME="Pas.:"></TD>
</TR><TR>
<TD>Mensagem.:</TD>
<TD><TEXTAREA NAME="Mensagem" ROWS="4" COLS="35"></TEXTAREA></TD>
</TR><TR>
<TD></TD>
<TD><CENTER><INPUT TYPE="image" SRC="ok.gif"></CENTER></TD>
</TABLE>
</FORM>
Agora veja como ficou este formulrio:

Preencha o formulario e clique no botao ok.:
Email.:
Nome.:
Idade.:
Sexo.: Masculino Feminino
Cidade.:
Estado.: SP
Pas.:
Mensagem.:
UpLoad
Depois que voc termina de fazer a sua pgina, voc tem que coloca-la na internet,
este processo chamado de UpLoad.
1) Primeiro voc vai precisar de um programa FTP (transferncia de arquivos por
protocolo).
O mais conhecido o WS_FTP LE 4.6. Voc pode achar o FTP Explorer mais fcil de
usar, faa o DownLoad aqui.
2) Depois de ter o programa, faa a inscrio em qualquer site de hospedagem
gratuito (ou pago). Um site de hospedagem gratuito bastante conhecido o
http://www.terravista.pt/, ele fcil de se cadastrar, pois em portugus.
3) Depois de feita a inscrio voc ter sua senha e seu login. Abra o programa FTP
Explorer, escolha a opo adicionar endereo (ADD), coloque o endereo do FTP do
provedor (neste caso ftp.terravista.pt) no HOST ADDRESS, coloque o login e a senha.
Essas so as configuraes bsicas, o resto no iremos precisar.
4) Clique em connect para conectar com o servidor e automaticamente ele ir te

mostrar a sua pasta no servidor com provavelmente um pgina j no diretrio. (Obs.: O
arquivo da sua pgina principal tem que se chamar index.html).
5) Depois basta clicar em UpLoad e mandar os arquivos desejados, no caso do FTP
Explorer voc clica na seta para cima e escolhe os arquivos.
6) Depois de colocar sua pgina na internet, teste as pginas, os links e sa figuras
para ver se esto todos certos, pode ser que no seu computador seja tudo visualizado
da forma que voc quer, mas no provedor mude, sempre que colocar mais arquivos no
provedor teste a pgina novamente.
Servios Grtis na Internet

Incremente sua Pgina
Banners
Contadores
Freehost (Espao)
Freemail (e-mail)
GuestBook
Redirecionadores
Banners
Banners onde voc divulga seu site sem pagar nada. simples, eles lhe fornecem
um cdigo para colocar um banner deles na sua pgina e ento voc lhes envia o seu
banner (desenho que tenha a propaganda de sua pgina) que eles colocam em outras
pginas.
Link Exchange: Tamanho de 468 x 60, Crdito de 2:1

BannerPlus: um bom sistema de banner, Crdito de 2:1
Em minha opinio o melhor site de sistemas de banner.
Click Banner:
160X50, 400X40, 468X60, 2:1
Banner-Link: Mais famoso sistema nacional. 468X60, 2:1
Fast-Banner: Sistema novo, tambm com 468X60 - 2:1
SmartClicks: Tamanho de 468 x 60,Crdito de 2:1
Contadores
BeSeen: Vrios tipos de contadores para voc escolher.

Fastcounter: Rpido e prtico, oferece vrios tipos e estatsticas.
Sitemeter: Bom contador, envia relatrio de visitas.
Hit Box: Bom sistema de contadores.
Internet Count: Peca pela qualidade da imagem do contador.
Site-Stats: 10 diferentes tipos de contador.
Page Count: Hits ilimitados, relatrios das visitas.
NedStat: Bom sistema de contador.
SuperStats: Contador bastante usado por Webmasters.
TheCounter: Excelente contador.
Exemplos prontos de contadores, aqui voc pode peg-los diretamente e colocar na

sua pgina, s voc colocar o seu "nome ou apelido" no lugar do "username ou
codinome" do contador. Para colocar um contador na sua pgina, siga os seguintes
passos:
1. No local de sua pgina onde voc quer mostrar o contador, coloque por ex.: (
<IMG SRC="http://counter.conex.com.br/cgi-
bin/Count.cgi?df=codinome.dat|dd=A"> ) substituindo "codinome" pelo seu
nome. As letras minsculas e maisculas devem ser respeitadas;
2. Depois de "Count.cgi?", voc pode especificar diversos parmetros. Esses
parmetros devem ser separados pelo caracter |.
Veja logo abaixo o que cada parmetro faz:
ft = n - n o tamanho da borda (1 a 5);

dd = A - A especifica o tipo de contador;
df = codinome - especifica o nome do arquivo em que ficar a contagem;
md = n - n o nmero de dgitos do contador.
Freehost (Espao)
Agora voc no paga absolutamente nada para garantir sua presena na Web!
Confira abaixo alguns servios de hospedagem gratuita na Internet.
Um ponto forte deste servio que ele no exibe aquelas telas

"Splash" como a Geocities, alm de contar com um vasto acervo
Xoom multimdia com milhares de images, gifs, fotos e sons. Hoje
voc tem direto a espao ILIMITADO.Mas tem uma barra
enorme de propaganda no topo.
Servio que oferece 11Mb, um pouco mais lento que a Xoom.
Tripod Possui um assistente para criar a homepage On-Line e uma
tima opo para iniciantes.
Oferece 11Mb gratuitos e um e-mail. Como desvantagem a
Geocities lenta (pela grande quantidade de usurios) e abusa
Geocities
das propagandas com telas splash e um quadradinho que
perseque o visitante para onde quer que ele v.
Terra Vista Servio de host de Portugal que oferece 7Mb de espao. fcil
de se cadastrar, pois ele todo em portugus. bom para quem
esta iniciando.
Oferece 5Mb e timo para quem no entende nada de HTML
pois as pginas so geradas atravs de um assistente.Como
desvantagem s permite o Upload atravs do Browser (1
Angelfire arquivo de cada vez) alm de no aceitar arquivos que no
sejam HTML, CSS ou Imagens.Alm disso as imagens so
transferidas automaticamente para o diretrio images/ o que
dificulta a vida de quem constri a pgina off-line.
Servio de FREEhost com subdomnio
(http://seunome.hypermart.net). Oferece 10Mb de espao em
disco, ilimitados e-mails aliases (...@seunome.hypermart.net),
Hypermart aceita CGIs e tambm oferece a possibilidade de proteger
diretrios por senha. um pouco lento e tambm abusa das
propagandas exibindo uma tela splash que d reload a cada 2
minutos.
Servio de free host que eferece 25 Mb de espao, timo para
Starmedia rbita
quem no entende nada de HTML, tem um editor on-line.
Webjump Servio de free-host com 25 MB.
Freemail (e-mail)
Estes so os principais servios de FreeMail do Brasil e do Mundo. Com eles voc
pode enviar e receber e-mails incluindo anexos e com uma vantagem: Voc pode checar
seu e-mail de qualquer computador conectado Internet: s acessar o site, digitar o
login e pronto!
O servio de e-mail grtis mais conhecido do mundo, oferece

entre outras coisas um servio de notcias no qual o usurio
Hotmail
recebe um e-mail avisando sobre as novidades do tema
escolhido (tudo em ingls).
Servio nacional que oferece uma conta grtis de e-mail com a
vantagem de estar num servidor seguro, garantido pelo
ZipMail protocolo SSL o que garante privacidade total para suas
mensagens mais secretas. No muito bom para mandar
arquivos.
To simples quanto o nome, nele voc cria um e-mail e os dados
j ficam armazenados no seu computador, assim s chegar l e
Yahoo! digitar a senha que voc j tem acesso aos seus e-mails.Vem
com um servio de notcias por e-mail e tambm um software
que avisa quando h novas mensagens no servidor.
No apenas um servio de e-mails grtis mas tambm traz as
Starmedia ltimas notcias do dia, hospedagem gratuita de homepages
pessoais e tambm um bate-papo.
Tem 5 MB de espao, vrios domnios: (seunome@rock-
MailBr br.com.br,seunome@linuxbr.com.br, seunome@quake-
br.com.br etc.)
Onde voc cria seu sistema de e-mail grtis. Por Exemplo:
ZZN
algum@seunome.zzn.com
Guest Book
Livro de visitas para sua home page, onde os seu visitantes podem deixar suas
sugestes e crticas.
Lemon GuestBook: GuestBook em portugus.

Lpage: Voc se inscreve e tem seu guestbook.
TheGuestbook: Exibe um banner deles em cada guestbook.
DreamBook: Bom GuestBook.
Redirecionadores
Seu endereo muito complicado? Ento obtenha gratuitamente uma URL de
redirecionamento com 'http://www.seunome.cjb.net', 'http://pagina.de/voce', etc ...
Pagina.de: http://pagina.de/seu-nome
CJB: http://www.seu-nome.cjb.net
web-page: http://www.seu-nome.web-page.net (colocar banner deles)
come.to: http://come.to/seu-nome
Outros Recursos
Para Inserir Data e Hora
Para Inserir Data e Hora num documento HTML, como por exemplo:
Hoje , de de . So e !
Cdigo:
Entre <HEAD> ... </HEAD>:
<script language="JavaScript"> function plural() {

var hora=new Date()
var horas=hora.getHours()
var singular="hora"
if (horas>1)
{singular="horas"}
document.write(singular)
} </script>
<script language="JavaScript"> function plural2() {
var minuto=new Date()
var minutos=minuto.getMinutes()
var singular2="minuto"
if (minutos>1)
{singular2="minutos"}
document.write(singular2)
var} </script>
Entre <BODY> ... </BODY>:
<script language="JavaScript">
function dia() {
dia = new Date()
document.write(dia.getDate())
}
function mes(){
var mes1=new Date()
var mes2=mes1.getMonth()
var month="Janeiro"
if(mes2 == 0) {month="Janeiro"}
else if(mes2 ==1) {month= "Fevereiro"}
else if(mes2 ==2) {month="Maro"}
else if(mes2 ==3) {month="Abril"}
else if(mes2 ==4) {month="Maio"}
else if(mes2 ==5) {month="Junho"}
else if(mes2 ==6) {month="Julho"}
else if(mes2 ==7) {month="Agosto"}
else if(mes2 ==8) {month="Setembro"}
else if(mes2 ==9) {month="Outubro"}
else if(mes2 ==10) {month="Novembro"}
else if(mes2 ==11) {month="Dezembro"}
document.write(month)
}
function hora() {
hora=new Date()
document.write(hora.getHours())
}
function minuto() {
minuto=new Date()
document.write(minuto.getMinutes())
}
function weekday( ) {
var myday=new Date().getDay()
if(myday == 0) {day="Domingo"}
else if(myday == 1) {day="Segunda - Feira"}
else if(myday == 2) {day="Tera - Feira"}
else if(myday == 3) {day="Quarta - Feira"}
else if(myday == 4) {day="Quinta - Feira"}
else if(myday == 5) {day="Sexta - Feira"}
else if(myday == 6) {day="Sbado"}
document.write(day)
}
function ano( ) {
var ano=new Date().getYear()
var aa=new Date().getYear()
if(ano == 100) {aa="2000"}

else if(ano == 101) {aa="2001"}
else if(ano == 102) {aa="2002"}
else if(ano == 103) {aa="2003"}
else if(ano == 104) {aa="2004"}
else if(ano == 105) {aa="2005"}
else if(ano == 106) {aa="2006"}
else if(ano == 107) {aa="2007"}
else if(ano == 108) {aa="2008"}
else if(ano == 109) {aa="2009"}
else if(ano == 110) {aa="2010"}
else if(ano == 111) {aa="2011"}
else if(ano == 112) {aa="2012"}
else if(ano == 113) {aa="2013"}
else if(ano == 114) {aa="2014"}
else if(ano == 115) {aa="2015"}
else if(ano == 116) {aa="2016"}
else if(ano == 117) {aa="2017"}
else if(ano == 118) {aa="2018"}
document.write(aa)
}
</script>
Na posio em que voc desejar escrever a data e hora atuais:
<script>weekday()</script>, <script>dia()</script> de <script>mes()</script> de

<script>ano()</script>.
So <script>hora()</script> <script>plural()</script> e <script>minuto()</script>
<script>plural2()</script>!
Para Desabilitar o Boto Direito do Mouse

Caso a sua inteno seja "esconder" o cdigo de sua pgina, voc pode desabilitar o
boto direito do mouse atravs do seguinte cdigo escrito entre <HEAD> ... </HEAD>:
<script language="javascript">
function noRightClick() {
if (event.button==2) {
alert('Pgina Carregada com Sucesso!')
}
}
document.onmousedown=noRightClick
</script>
Tabela com 99 cdigos de cores.
Black #000000 Moss Green #336666 Sand #FFCC99
90% Black #191919 Dark Green #003333 Walnut #663300
80% Black #333333 Forest Green #006633 Ruby Red #990000
70% Black #4C4C4C Grass Green #009933 Brick Red #CC3300
60% Black #666666 Kentucky Green #339966 Tropical Pink #FF6666
50% Black #7F7F7F Light Green #33CC66 Soft Pink #FF9999
40% Black #999999 Spring Green #33CC33 Faded Pink #FFCCCC
30% Black #B2B2B2 Turquoise #66FFCC Crimson #993366
20% Black #CCCCCC Sea Green #33CC99 Regal Red #CC3366
10% Black #E5E5E5 Faded Green #99CC99 Deep Rose #CC3399
White #FFFFFF Ghost Green #CCFFCC Neon Red #FF0099
Blue #0000FF Mint Green #99FF99 Deep Pink #FF6699
Cyan #00FFFF Army Green #669966 Hot Pink #FF3399
Green #00FF00 Avocado Green #669933 Dusty Rose #CC6600
Yellow #FFFF00 Martian Green #99CC33 Plum #660066
Red #FF0000 Dull Green #99CC66 Deep Violet #990099
Magenta #FF00FF Chartreuse #99FF00 Light Violet #FF99FF
Purple #9900CC Moon Green #CCFF66 Violet #CC66CC
Orange #FF6600 Murky Green #333300 Dusty Plum #996699
Pink #FF9900 Olive Drab #666633 Pale Purple #CC99CC
Dark Brown #663333 Khaki #999966 Majestic Purple
Powder Blue #CCCCFF Olive #999933 #9933CC
Navy Blue #003399 Banana Yellow Neon Purple #CC33FF
Deep Navy Blue #000066 #CCCC33 Light Purple #CC66FF
Twilight Blue #6666CC Light Yellow #FFFF66 Twilight Violet #9966CC
Pastel Blue #9999FF Chalk #FFFF99 Easter Purple #CC99FF
Baby Blue #6699FF Pale Yellow #FFFFCC Deep Purple #330066
Electric Blue #6666FF Brown #996633 Grape #663399
Desert Blue #336699 Red Brown #CC6633 Blue Violet #9966FF
Sky Blue #00CCFF Gold #CC9933 Blue Purple #9900FF
Ice Blue #99FFFF Autumn Orange #FF6633 Deep River #6600CC
Light BlueGreen Light Orange #FF9933 Deep Azure #6633FF
#99CCCC Peach #FF9966 Storm Blue #330099
Ocean Green #669999 Deep Yellow #FFCC00 Deep Blue #3300CC

Tudo Sobre HTML PDF

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Tudo Sobre HTML PDF

Cargado por

Copyright:

Formatos disponibles

INTRODUO A LINGUAGEM HTML

Esta pgina foi adaptada de: Aprenda HTML jeguinho.cjb.net

O Que HTML ???

Como Editar as Pginas em HTML.

1. O texto propriamente dito;

texto, imagem, links, etc...

Como o HTML no uma linguagem de programao, voc nunca ser avisado de

BGCOLOR - especifica uma cor de fundo para a pgina;

<BODY BACKGROUND=nome_imagem.extencao BGCOLOR=nome_cor

Ou ento, podemos usar o cdigo equivalente da cor em hexadecimal:

No importa a seqncia dos atributos (BGCOLOR, LINK, VLINK...) e sempre se

<FONT COLOR=nome_cor> texto </FONT>:

Ainda falando da disposio de texto na tela, se desejarmos mudar de linha no

<CENTER> texto </CENTER>:

Exite tambm um comando de preformatao (<PRE> texto a ser preformatado

WIDTH - n % do comprimento ou o n em pixel - Ex.: <HR WIDTH=50%>

Exemplo contendo os tags de formatao de texto:

<HR WIDTH=80% SIZE=3>

Primeiro colocamos o caracter &;

Relacionamos abaixo alguns dos caracteres e acentos da HTML:

Acentos e Caracteres Cdigo

Existem 3 caminhos para se referir um documento de destino:

GIF - Este padro mais conhecido e mais compatvel com os navegadores

Juntamente com a tag <IMG> podemos usar alguns parmetros como:

BORDER - para determinar a moldura da imagem;

LEFT - alinha a imagem a esquerda do texto;

Para se projetar uma pgina deve-se procurar um equilbrio com relao a

O primeiro caso, o som, utilizado para transmitir informaes que no sejam na

SRC - define o caminho para o arquivo de som;

Ento os comandos de sua pgina ficariam assim:

J os arquivos de vdeos fornecem informaes que as imagens estticas no so

1. Move o letreiro da esquerda para

Define o nmero de vezes que o letreiro

TOP Define o alinhamento do letreiro com

Listas Ordenadas ou Numeradas - essas listas so delimitadas pelas tags

Lista No-Ordenadas ou com Marcadores - so aquelas que os itens so

Cdigo Sada no Browser

Listas de Definio ou de Glosrios - so aquelas em que cada item tem dois

Cdigo Sada no Browser

<CAPTION> ... </CAPTION> - para acrescentar um ttulo na tabela.

Os comandos da tabela acima seria assim:

Atributos para a tag <TABLE>:

BORDER - define a espessura da borda;

Atributos para as tags <TD> e <TH>:

COLSPAN - especifica quantas colunas da tabela a clula vai ocupar;

Uma tabela usando alguns elementos destes ficaria assim:

Cdigos da tabela acima;

Existem ainda outros atributos que esto relacionados abaixo:

MARGINWIDTH Determina as margens esquerda e direita do frame.

MARGINHIGHT Determina as margens superior e inferior do frame.

Configura a barra de rolagem, podendo aparecer ou no.

Impede que as barras que delimitam os frames sejam

O cdigo de um documento HTML contendo frames ficaria assim:

Alm dos atributos j citados, temos tambm o TARGET. Quando iniciamos um

TARGET="nome do frame" - carrega no frame especificado;

<A HREF="http://www.terravista.pt/ancora/3300" TARGET="menuhtml">

<A HREF="apresentacaodalicao.html" TARGET="_top">

TEXT - para campos de entrada de texto; Exemplo:

CHECKBOX - para caixas de verificao; Exemplo:

as letras digitadas aparecem como um asterstico (*). Exemplo:

2) O atributo NAME, na maioria dos casos, define o nome do campo.

Agora vamos ver alguns exemplos:

Agora vamos ver um exemplo: