Buscar

Tudo sobre HTML 35

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você viu 3, do total de 26 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você viu 6, do total de 26 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você viu 9, do total de 26 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Prévia do material em texto

INTRODUÇÃO A LINGUAGEM HTML 
 
Esta página foi adaptada de: Aprenda HTML jeguinho.cjb.net 
e-mail: maurinho@brazil.zzn.com 
 
 Esta página tem o objetivo de ensinar as noções básicas 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 formatação de sua 
página sem precisar saber códigos. 
O Que é HTML ??? 
 HTML é a abreviatura de Hyper Text Markup Language, que pode ser traduzida como 
Linguagem de Hipertexto Baseada em Códigos. Define um conjunto de estilos como 
cabeçalhos, parágrafos, listas e tabelas que compões uma página da WWW e serve para 
indicarmos formatações para textos, inserir imagens e ligações 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 parênteses angulares 
(<ELEMENTOS>), esses elementos são as etiquetas da linguagem HTML, que são os 
comandos de formatação da linguagem. As etiquetas, tags ou diretivas, tem sua 
correspondente etiqueta de fechamento (<ETIQUETA> ... </ETIQUETA>). Isto é 
nescessário porque as tags servem para definir a formatação de uma porção de texto, e 
assim marca-se onde começa e onde termina o texto com formatação especificada por 
ela. Alguns tags são chamados "vazios" ou unidirecionais, pois não marcam uma região 
de texto, apenas inserem alguma coisa no documento. As etiquetas serão escritas em 
maiúsculas apenas para facilitar a visualização, pois você pode misturar ou colocar tudo 
minúsculo que é igualmente aceito pelos Browsers. 
Como Editar as Páginas em HTML. 
 As páginas desenvolvidas em HTML são 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 códigos e textos é só gravar o arquivo mudando a 
extenção (ex.: .txt) para .html ou .htm. 
 A diferença entre .htm e .html é que o .html é mais novo e são comandos melhores 
aceitos e .htm é como se iniciou o html mais não mudou praticamente nada. Tanto faz 
você salvar em qualquer uma das duas. 
 Então, basicamente, os arquivos HTML possuem dois componentes: 
1. O texto propriamente dito; 
2. As tags que indicarão os elementos de página: 
estrutura; 
formatação; 
vínculos a outras páginas. 
 Obs.: Para exibir o resultado do arquivo HTML não é nescessário estar conectado à rede, basta acessar um 
Browser (Internet Explorer, Netscape, etc) e utiliza-lo para abrir o arquivo. 
 
 
Formatação de Textos 
 Em uma página HTML podem existir textos, imagens, itens multimídia 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 não é uma linguagem de programação, você nunca será avisado de 
erros cometidos na edição do seu documento. Um simples esquecimento de uma barra 
pode mudar toda sua página. 
Seções 
 <HTML> e </HTML>: 
Identifica o documento como sendo HTML. 
 <HEAD> e </HEAD>: 
É o cabechalho e contém as informações sobre o documento. 
 <TITLE> e </TITLE>: 
Define um título que é mostrado no alto da janela do Browser. Todo documento 
WWW deve ter um título. Esse título é referenciado em busca pela rede, dando 
uma identidade ao documento, facilitando assim, a classificação em catalogos de 
busca. 
 <BODY> e </BODY>: 
Tudo que estiver na seção BODY será mostrado na janela do browser e, 
consequentemente, apresentado ao leitor. Esta seção pode conter cabeçalhos, 
parágrafor, listas, tabelas, imagens e links para outros documentos. Dentro da 
tag <BODY> podemos usar as seguintes opções que não são obrigatórias e caso 
não existam assumem o valor default: 
BGCOLOR - especifica uma cor de fundo para a página; 
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 então, podemos usar o código 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> 
Não importa a seqüência dos atributos (BGCOLOR, LINK, VLINK...) e sempre se 
coloca um espaço entre os atributos. 
Formatação de Textos 
 Podemos formatar o texto mudando a fonte do texto, a cor, colocando em itálico, 
negrito, sublinhado, fonte espaçada, subscrito, etc. Para todas elas são nescessário 
delimitar o início e o fim do texto a ser formatado. 
 <FONT COLOR=nome_cor> texto </FONT>: 
Muda a cor do texto que estiver entre as tags início e fim. 
 <FONT FACE=nome_letra> texto </FONT>: 
Muda o tipo de letra do texto que estiver entre as tags início e fim. 
 <FONT SIZE=tamanho> texto </FONT> ou <Hn> texto </Hn>: 
Muda o tamanho da letra do texto que estiver entre as tags início 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 início e fim em negrito. 
 <I> texto </I>: 
Coloca o texto que estiver entre as tags início e fim em itálico. 
 <TT> texto </TT>: 
Coloca o texto que estiver entre as tags início e fim com fonte monoespaçada. 
 <U> texto </U>: 
Sublinha o texto que estiver entre as tags início e fim. (Não é aconselhavel 
colocar o texto sublinhado, pois os links já são sublinhados e pode confundir). 
 <SUP> texto </SUP>: 
Coloca o texto que estiver entre as tags início e fim em sobscrito. 
 <SUB> texto </SUB>: 
Coloca o texto que estiver entre as tags início e fim em subscrito. 
 <S> texto </S>: 
Taxa o texto que estiver entre as tags início e fim. 
 Ainda falando da disposição de texto na tela, se desejarmos mudar de linha não 
basta usar o ENTER como em um editor de textos, existem tags específicas para isso, 
além de outros recursos para alocar um texto na página. São eles: 
 <CENTER> texto </CENTER>: 
Centraliza o texto em relação à página. 
 <BR>: 
Quebra de linha, inicia o texto seguinte na linha logo abaixo. 
 <NOBR> texto </NOBR>: 
Faz com que o texto não 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>: 
Força o fim de um parágrafo, ou seja, pula uma linha antes de iniciar outro 
parágrafo. 
 Exite também um comando de preformatação (<PRE> texto a ser preformatado 
</PRE>), ele é usado para que o browser aceite seus espaços 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 são formas de deixar sua página com mais facilidade de encontrar 
coisas e também mais apresentável. Essas linhas são boas saídas para textos grandes 
em que os assuntos são 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 traço - Ex.: <HR SIZE=5>. 
 
Exemplo contendo os tags de formatação 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> 
<H2>Tamanho2</H2> <BR> 
<H3>Tamanho3</H3> <BR> 
<H4>Tamanho4</H4> <BR><H5>Tamanho5</H5> <BR> 
<H6>Tamanho6</H6> <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>Itálico</I> <BR> 
Texto5 - <TT>Monoespaçado</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 são tratados de uma maneira diferente na Web, pelo fato 
de que nem todos os computadores ligados à Internet estão configurados para visualizar 
os acentos. Existe uma codificação que permite a qualquer equipamento interpretar os 
códigos e exibir na tela o caracter desejado. 
 Os códigos funcionam da seguinte maneira: 
 Primeiro colocamos o caracter &; 
 Em seguida a letra que deverá ser acentuada; 
 Coloque a acentuação desejada; 
 Acrescente o ";" (ponto e virgula). 
 Relacionamos abaixo alguns dos caracteres e acentos da HTML: 
Acentos e Caracteres Código 
Agudo &_acute; 
Grave &_grave; 
Circunflexo &_circ; 
Til &_tilde; 
Trema &_uml; 
Cedilha &_cedil; 
& &amp; 
< &lt; 
> &gt; 
© &copy; 
" &quot; 
(espaço em branco) &nbsp; 
 
 
Âncoras e Links 
Âncoras (Links) 
 Para inserir um link, ou seja, uma ligação de uma região do texto (ou imagem) a um 
outro documento é nescessário 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 ligação 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 referência a um 
documento que esteja no mesmo servidor do documento atual. 
<A HREF="apresentacaodalicao.html"></A>. 
2. Caminho Absoluto - Quando se quer fazer referência a um documento que esteja 
em outro servidor. 
<A HREF="http://www.terravista.pt/ancora/3300"></A>. 
3. Ligação com trechos da mesma página - Desvia para o local do trecho desejado 
na mesma página. 
Colocarei um exemplo, como se você quisesse voltar para o início dessa página: 
o Coloque o nome em algum local que você quer que o link se dirija. Como 
esse comando colocado no início da página: 
<A NAME="inicio"></A>. 
o Agora faça o link para essa âncora, como a seguir: 
<A HREF="#inicio"></A>. 
NOTA: Para você colocar o endereço de seu e-mail na sua página você tem que colocar 
da seguinte forma: 
<A HREF="mailto:seu_e-mail"> seu_e-mail </A> 
 
 
Imagens e Animações 
Imagens 
 Com relação de uso de imagens na Web temos que estas se dividem em duas 
categorias gerais que são as imagens in-line e as externas. As imagens in-line são 
apresentadas na página junto com os vínculos e com o texto e são carregadas 
automaticamente. Já as imagens externas são carregadas somente por demanda 
(download), através de vínculos. 
 Independente de sua categoria, as imagens podem se apresentar em dois formatos: 
.gif e .jpg. 
 GIF - Este padrão é mais conhecido e mais compatível 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 padrão proposto pelo comitê ISO e é geralmente usado para 
imagens mais complexas (fotográficas). Permite alta taxa de compressão, por 
isso gera um arquivo menor, o que implica numa perda de informação e 
qualidade. 
 O elemento IMG, ou seja, a tag <IMG>, insere as imagens que serão 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 página então a tag seria assim: 
<IMG SRC="nome_imagem.extenção"> 
 Se a imagem estiver em uma pasta diferente da que sua página está, então você tem 
que colocar o endereço desta pasta e depois o arquivo que contém a sua imagem. 
Digamos que sua página 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". Então a tag seria: 
<IMG SRC="imagens\img.gif"> 
 DICA: Se você quiser colocar uma imagem que está em outra página, basta clicar 
com o botão direito do mouse em cima da imagem e seleciona o opção propriedades e 
copiar a endereço URL e colocar no atributo SRC. 
 Juntamente com a tag <IMG> podemos usar alguns parâmetros 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 várias 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="explicação da imagem" BORDER=4 WIDTH=50 HEIGHT=20 ALIGN=Left> 
 Uma imagem pode funcionar como vínculo, incluindo-se a tag <IMG> entre as partes 
de abertura e fechamento de uma tag de vínculo <A>. Assim temos: 
<A HREF="arq.html"><IMG SCR="img.gif"></A> 
 Para se projetar uma página deve-se procurar um equilíbrio com relação a 
quantidade de imagens e cores e a necessidade de transmissão de informações. O uso 
excessivo de imagens, imagens grandes, poinéis de fundo tornará a página mais lenta 
ao ser carregada e o que, em muitos casos, levará os usuários que tiverem uma conexão 
lenta de rede a desistirem de carregar esta página. Para que isso não aconteça, verifique 
a nexessidade do uso dessa ou daquela imagem, mantenha as imagens pequenas 
reutilize-as sempre que possível. 
Animações 
 Com relação ao uso de mídias em HTML é necessário a utilização de vínculos 
correspondente ao caminho URL do arquivo externo que se deseja inserir em sua 
página.<A REF="arq_ext">Arquivo</A>. Neste contexto entram os arquivos de som e 
vídeo. 
Som 
 O primeiro caso, o som, é utilizado para transmitir informações que não sejam na 
forma de ilustração ou palavras e até mesmo para desejar boas vindas ao usuário que 
acaba de carregar aquela página. Esses arquivos geralmente possuem extenção .waw e 
.mid. 
 Agora vamos aos comandos: 
 <EMBED> 
 <BGSOUND> 
 Como o comando <EMBED> não é 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 parâmetros: 
 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 começado a baixar o 
arquivo de som quando entrar na página, 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 número de vez que a música será tocada, TRUE para tocar 
infinitas vezes. 
 HIDDEN - define se você quer que o controle ficam sumidos ou não, TRUE para 
deixar invisível e caso queira os controles não precisa colocar FALSE. 
 WIDHT e HIGHT define o tamanho dos controles. 
 Então os comandos de sua página 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"> 
Vídeo 
 Já os arquivos de vídeos fornecem informações que as imagensestáticas não são 
capazes de transmitir. Suas extensões são geralmente .mpg, .mov, .avi. É interessante 
utilizar informações sobre o formato e o tamanho do arquivo de mídia externo A tag 
<IMG> possui atributos que permitem a execução in-line de arquivos de som e vídeo. O 
atributo DYNSRC (para IE) inclui arquivos de vídeo: <IMG DYNSRC="arquivo.avi 
SRC="arquivo.gif ALT="[a arquivo]">. 
Letreiros 
 Em HTML é possível a criação de letriros, ou seja, uma linha rolável que se moverá 
de um lado ao outro da página da Web. Para que este efeito seja possível basta alocar o 
texto que se deseja transformar em letreiro entre as tags de abertura e fechamento 
<MARQUEE> texto </MARQUEE>. Esta tag possui vários atributos: 
Atributo Utilização 
BEHAVIOR 
1. SCROOL 
2. SLIPE 
3. ALTERNATE 
1. Rola de um lado ao outro da tela e 
até desaparecer. 
2. Rola o letreiro da direita para 
esquerda e para. 
3. Faz o letreiro saltar de um lado da 
tela para outro. 
DIRECTION (somente se o letreiro for 
SCROOL) 
1. Move o letreiro da esquerda para 
direita. 
2. Move o letreiro da direita para 
1. LEFT 
2. RIGHT 
esquerda. 
LOOP 
Define o número de vezes que o letreiro 
ralará na tela. 
SCROLLAMOUNT 
Define o número de pixel para locação do 
letreiro. 
SCROLLDELAY 
Define o tempo da animação em 
milessegundos. 
BGCOLOR 
Define a cor de fundo da caixa que delimita 
o letreiro. 
HEIGHT 
Define a altura da caixa que delimita o 
letreiro. 
WIDTH 
Define a largura da caixa que delimita o 
letreiro. 
HSPACE 
Define o espaço entre as bordas esquerda e 
direita e o texto. 
VSPACE 
Define o espaço entre as bordas inferior e 
superior e o texto. 
ALIGN 
 TOP 
 MIDDLE 
 BOTTOM 
Define o alinhamento do letreiro com 
relação ao texto. 
 
 
 
Listas 
 As lista são utilizadas para organizar o texto quando necessário uma relação de itens 
ordenados ou não. A HTML define 3 tipos de listas: 
 Listas Ordenadas ou Numeradas - essas listas são delimitadas pelas tags 
<OL>(inicializa uma lista) ... </OL>(finaliza uma lista) e cada item desta lista 
começa com a tag <LI>(sem o fechamento). São aquelas que possui um número. 
O atributo TYPE define o tipo de numeração da lista. Assim, A (letras 
maiúsculas), a (letras minúsculas), I (algarismos romanos) e 1 (números 
arábicos). 
Exemplo: 
Código Saída no Browser 
<OL> 
<LI>item 1 
<LI>item 2 
</OL> 
1. item 1 
2. item 2 
 Lista Não-Ordenadas ou com Marcadores - são aquelas que os itens são 
marcadores ou outros símbolos. Estas listas são indicadas pelas tags </UL> ... 
</UL>. Os elementos dessa lista também são 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: 
Código Saída no Browser 
<UL> 
<LI>item 1 
<LI>item 2 
</UL> 
o item 1 
o item 2 
 Listas de Definição ou de Glosários - são aquelas em que cada item tem dois 
componetes, um termo e uma definição. Estas listas são indicadas pelas tags 
<DL> ... </DL>. As tags <DT> e <DD>, unidirecionadas, respectivamente, indicam 
o termo a ser definido e a definição desse mesmo termo. 
Exemplo: 
Código Saída no Browser 
<DL> 
<DT>item 1 
<DD>item 2 
<DD>item 3 
</DL> 
item 1 
item 2 
item 3 
 
 
Tabelas 
 As tabelas são usadas para organizar o conteúdo de uma página, ou seja, imagens 
em linhas e colunas. Com tag <TABLE> conteúdo da tabela </TABLE> indicamos que se 
trata de uma tabela. 
 <CAPTION> ... </CAPTION> - para acrescentar um título na tabela. 
 <TR> ... </TR> - para informar onde começa (<TR>) e onde termina (</TR>) cada 
linha da tabela. 
 <TH> ... </TH> ou <TD> ... </TD> - para identificar o início e o fim de cada célula. A 
diferença entre <TH> e <TD> é que o conteudo da célula da tag <TH> é escrita em 
negrito e centralizada. 
 Agora já podemosfazer uma tabela com estes comandos, que ficaria assim: 
Tabela 
célula 1 célula 2 
célula 3 célula 4 
 Os comandos da tabela acima seria assim: 
<TABLE> 
<CAPTION> Tabela </CAPTION> 
<TR> 
<TH> célula 1 </TH> 
<TH> célula 2 </TH> 
</TR> 
<TR> 
<TD> célula 3 </TD> 
<TD> célula 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 números); 
 ALIGN - alinhamento horizontal (Right, Center, Left); 
 BGCOLOR - para alterar a cor de fundo; 
 BACKGROUND - permite colocar uma imagem no fundo; 
 CELLSPACING - define o espaço existente entre as células da tabela; 
 CELLPADDING - define o espaço existente entre as bordas da célula e seu 
conteúdo; 
 BORDERCOLOR - usado para alterar a cor da borda. 
 Atributos para as tags <TD> e <TH>: 
 COLSPAN - especifica quantas colunas da tabela a célula vai ocupar; 
 ROWSPAN - especifica quantas linhas da tabela a célula vai ocupar; 
 WIDTH - define a largura de cada célula, pode ser definida em % ou valor 
absoluto (com números); 
 HEIGHT - define a altura de cada célula, pode ser definida em % ou valor absoluto 
(com números); 
 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: 
célula 1 
célula 2 
célula 3 célula 4 
 Códigos da tabela acima; 
<TABLE BORDER=1 BORDERCOLOR=#ffcc00 BGCOLOR=#6666ff CELLSPACING=2 
CELLPADDING=10 ALIGN=center> 
<TR> 
<TD COLSPAN=2>célula 1</TD> 
<TD ROWSPAN=2>célula 2</TD> 
</TR> 
<TR> 
<TD>célula 3</TD> 
<TD>célula 4</TD> 
</TR> 
</TABLE> 
 
 
Frames 
 Os frames permitem a divisão da tela em diferentes regiões onde pode-se apresentar 
diferentes páginas. Isso possibilita, por exemplo, que se determine a área da tela para 
ser a página principal e outras áreas para menus ou links. 
 A tag <FRAMESET> cria um documento de definição de frames, que é onde será 
criado o layout de cada frame e indicado o nome dos documentos que serão 
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 página - <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 * (asterístico), definimos que o frame ocupará todo o espaço restante da 
tela. 
 O atributo ROWS define quantas linhas a frame será dividida - <FRAMESET 
ROWS="50%, 50%"> - definimos que a página será dividida em 2 frames horizontais. 
 O atributo SRC indica qual página será chamada em cada frame criado e o atributo 
NAME atribui o nome a esse frame. 
 Existem ainda outros atributos que estão relacionados abaixo: 
Atributos Utilização 
MARGINWIDTH Determina as margens esquerda e direita do frame. 
MARGINHIGHT Determina as margens superior e inferior do frame. 
SCROLLING = YES, 
NO ou AUTO 
Configura a barra de rolagem, podendo aparecer ou não. 
Pode ainda, aparecer somente quando o texto ultrapassar o 
tamanho da célula (AUTO). 
NORESIZE 
Impede que as barras que delimitam os frames sejam 
redimensionados. 
 O código de um documento HTML contendo frames ficaria assim: 
<HTML> 
<HEAD> 
<TITLE> Título da Página </TITLE> 
</HEAD> 
<FRAMESET COLS="200, *"> 
<FRAME SCR="página que ficará no 1ª frame" NAME="nome do 1ª frame"> 
<FRAME SCR="página que ficará no 2ª frame" NAME="nome do 2ª frame"> 
</FRAMESET> 
</HTML> 
 A tag <NOFRAME> ... </NOFRAME> coloca o código que substituirá a página caso o 
Browser não 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 oframe funcionará conforme programado. 
 Exemplo: 
<HTML> 
<HEAD> 
<TITLE> Título da Página </TITLE> 
</HEAD> 
<FRAMESET COLS="200, *"> 
<FRAME SCR="página que ficará no 1ª frame" NAME="nome do 1ª frame"> 
<FRAME SCR="página que ficará no 2ª frame" NAME="nome do 2ª frame"> 
<NOFRAMES> 
<BODY> 
Aqui fica sua página sem frames para quem não consegue ver sua frames. 
</BODY> 
</NOFRAMES> 
</FRAMESET> 
</HTML> 
 Além dos atributos já citados, temos também 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 página deverá ser 
carregada. O atributo tem quatro valores que são: 
 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"> 
 
 
Formulários 
 Os formulários em uma página WEB permitem coletar informações das pessoas que 
visitam a página. através de algumas diretivas especiais podemos definir as literais e o 
formato dos objetos de resposta. Também definimos que será tomada assim que o 
formulário for preenchido. 
 Para criar um formulário faz-se necessário o uso da tag <FORM> onde serão 
incluídos os elementos desse formulário. Essa tag contém dois atributos: METHOD e 
ACTION. 
 1) O atributo METHOD pode ter o valor GET ou POST, que determina a maneira como 
os dados do formulário serão enviados para processamento. A diferença entre os dois é 
a forma que cada um "empacota" esses dados. 
 2) O atributo ACTION é um ponteiro que indica o script que processa as informações 
que se obtém apartir do formulário. Deve conter a URL completa do programa que irá 
receber dados do formulário. Por exemplo http://www.uky.edu/cgi-
bin/cgiwrap/~johnr/AnyForm.cgi. 
 Também tem o atributo TARGET que é opcional e só é necessário quando se utiliza 
frames, ele indica onde aparecerá a página de confirmação do formulário. 
 A tag <INPUT> indica um elemento de formulário simples e possui dois atributos que 
são TYPE e NAME. 
 1) As opções que o atributo TYPE oferece são: 
 TEXT - para campos de entrada de texto; Exemplo: 
 RADIO - para botões de rádio; Exemplo: 
 CHECKBOX - para caixas de verificação; Exemplo: 
 PASSWORD - funciona da mesma forma que o atributo TEXT, exceto que todas 
as letras digitadas aparecem como um asterístico (*). 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 prévio para cada campo, de tal forma que quando a página seja carregada este 
valor já esteja preenchido podendo ser alterado pelo visitante. 
 4) O atributo SIZE define o tamanho do campo e é definido no número de caracteres. 
Se você quiser um campo de 40 caracteres, você deverá definir como SIZE=40. Mas note 
que esse valor não limita o campo em 40 caracteres, ele define o tamanho que ele será 
mostrado na página. 
 5) O atributo MAXLENGHT (comprimento máximo) define o número máximo de 
caracteres que podem ser digitados nos campos. 
 6) O atributo CHECKED é usado para marcar as opções RADIO e CHECKBOX. 
Lembrando que a opção RADIO só pode ter um selecionado. 
 Agora vamos ver alguns exemplos: 
Botões 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> 
Botões de checagem 
Na sua casa tem:<BR> 
<INPUT TYPE=Checkbox NAME=eletro1 VALUE=TV>Televisão<BR> 
<INPUT TYPE=Checkbox NAME=eletro2 VALUE=Radio>Rádio<BR> 
<INPUT TYPE=Checkbox NAME=eletro3 VALUE=Vidio>Vídeo Cassete<BR> 
Na sua casa tem: 
Televisão 
Rádio 
Vídeo 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 opções para a 
seleção do visitante. O atributo NAME define o nome desta lista e SIZE define quantos 
elementos irão aparecer na tela. Caso ele seja omitido, somente uma opção aparece de 
cada vez. Cada opção da lista recebe uma tag <OPTION>, e o atributo VALUE deste 
elemento irá definir o valor de cada opção, que será a informação fornecida ao programa 
de acordo com a seleção feita. 
 Agora vamos ver um exemplo: 
Seleção 
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 então fica assim: 
Qual o estado que você mora ??? 
SP
RJ 
 As tags <TEXTAREA> ... <TEXTAREA> (área de texto) permite definir um campo de 
texto com várias linhas. O atributo ROWS e COLUMNS definem o tamanho da área em 
que o visitante vai escrever, ROWS define o número de linhas da caixa de texto e 
COLUMNS o número 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 não 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 comentário 
</TEXTAREA> 
 Aqui
você coloca o seu comentário 
 
Envio e limpeza de dados: 
 <INPUT TYPE=Reset Value=...> 
 O valor RESET no atributo TYPE define um botão que limpa todos os campos, 
colocando os mesmos valores de quando a página foi carregada. No atributo VALUE 
pode-se definir o que estará escrito no botão, por exemplo, "Limpar". Caso nenhum 
valor seja definido aparecerá "Reset". 
 <INPUT TYPE=Submit NAME=... Value=...> 
 O valor SUBMIT (submeter) no atributo TYPE define um botão de envio de 
informações, ou seja, um botão que ao ser acionado executa o programa associado ao 
formulário (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 botão. 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 não devem aparecer para quem está vendo a sua página. Neste caso, NAME 
identifica o dado e VALUE define o seu valor. 
 
 
 Para fazer um formulário 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 (endereço) da página que será mostrada após os dados serem enviados ou 
com "NONE"; 
 AnyFormTo - deve conter o e-mail no qual sera enviado as informações do 
formulário; 
 AnyFormFrom - deve conter o e-mail de quem está preenchendo o formulário; 
 AnyFormSubject - deve conter o assunto do formulário para quando você 
receber o e-mail contendo as informações preenchidas do formulario você 
identifica-la. 
 Alguns destes elementos são normalmente definidos no elemento INPUT com o 
atributoTYPE e o valor HIDDEN: 
<INPUT TYPE=Hidden NAME=AnyFormTo VALUE="maurinho@brazil.zzn.com"> 
 
 
 Agora vamos ver um exemplo completo de um formulário: 
 Código: 
<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>País.:</TD> 
<TD><INPUT TYPE="text" SIZE=20 NAME="País.:"></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 formulário: 
Preencha o formulario e clique no botao ok.: 
 
Email.: 
Nome.: 
Idade.: 
Sexo.: Masculino Feminino 
Cidade.: 
Estado.: 
SP 
País.: 
Mensagem.: 
 
 
 
 
 
 
UpLoad 
 Depois que você termina de fazer a sua página, você tem que coloca-la na internet, 
este processo é chamado de UpLoad. 
 1) Primeiro você vai precisar de um programa FTP (transferência de arquivos por 
protocolo). 
 O mais conhecido é o WS_FTP LE 4.6. Você pode achar o FTP Explorer mais fácil de 
usar, faça o DownLoad aqui. 
 2) Depois de ter o programa, faça a inscrição em qualquer site de hospedagem 
gratuito (ou pago). Um site de hospedagem gratuito bastante conhecido é o 
http://www.terravista.pt/, ele é fácil de se cadastrar, pois é em português. 
 3) Depois de feita a inscrição você terá sua senha e seu login. Abra o programa FTP 
Explorer, escolha a opção adicionar endereço (ADD), coloque o endereço do FTP do 
provedor (neste caso ftp.terravista.pt) no HOST ADDRESS, coloque o login e a senha. 
Essas são as configurações básicas, o resto não 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 página já no diretório. (Obs.: O 
arquivo da sua página 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 página na internet, teste as páginas, os links e sa figuras 
para ver se estão 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 página novamente. 
 
 
Serviços Grátis na Internet 
Incremente sua Página 
Banners 
Contadores 
Freehost (Espaço) 
Freemail (e-mail) 
GuestBook 
Redirecionadores 
Banners 
 Banners é onde você divulga seu site sem pagar nada. É simples, eles lhe fornecem 
um código para colocar um banner deles na sua página e então você lhes envia o seu 
banner (desenho que tenha a propaganda de sua página) que eles colocam em outras 
páginas. 
Link Exchange: Tamanho de 468 x 60, Crédito de 2:1 
BannerPlus: É um bom sistema de banner, Crédito de 2:1 
Click Banner: 
Em minha opinião é o melhor site de sistemas de banner. 
160X50, 400X40, 468X60, 2:1 
Banner-Link: Mais famoso sistema nacional. 468X60, 2:1 
Fast-Banner: Sistema novo, também com 468X60 - 2:1 
SmartClicks: Tamanho de 468 x 60,Crédito de 2:1 
Contadores 
BeSeen: Vários tipos de contadores para você escolher. 
Fastcounter: Rápido e prático, oferece vários tipos e estatísticas. 
Sitemeter: Bom contador, envia relatório 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, relatórios 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 página, é só você colocar o seu "nome ou apelido" no lugar do "username ou 
codinome" do contador. Para colocar um contador na sua página, siga os seguintes 
passos: 
1. No local de sua página 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 minúsculas e maiúsculas devem ser respeitadas; 
2. Depois de "Count.cgi?", você pode especificar diversos parâmetros. Esses 
parâmetros devem ser separados pelo caracter |. 
 Veja logo abaixo o que cada parâmetro 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 número de dígitos do contador. 
Freehost (Espaço) 
 Agora você não paga absolutamente nada para garantir sua presença na Web! 
Confira abaixo alguns serviços de hospedagem gratuita na Internet. 
Xoom 
Um ponto forte deste serviço é que ele não exibe aquelas telas 
"Splash" como a Geocities, além de contar com um vasto acervo 
multimídia com milhares de images, gifs, fotos e sons. Hoje 
você tem direto a espaço ILIMITADO.Mas tem uma barra 
enorme de propaganda no topo. 
Tripod 
Serviço que oferece 11Mb, é um pouco mais lento que a Xoom. 
Possui um assistente para criar a homepage On-Line e é uma 
ótima opção para iniciantes. 
Geocities 
Oferece 11Mb gratuitos e um e-mail. Como desvantagem a 
Geocities é lenta (pela grande quantidade de usuários) e abusa 
das propagandas com telas splash e um quadradinho que 
perseque o visitante para onde quer que ele vá. 
Terra à Vista Serviço de host de Portugal que oferece 7Mb de espaço. É fácil 
de se cadastrar, pois ele é todo em português. É bom para quem 
esta iniciando. 
Angelfire 
Oferece 5Mb e é ótimo para quem não entende nada de HTML 
pois as páginas são geradas através de um assistente.Como 
desvantagem só permite o Upload através do Browser (1 
arquivo de cada vez) além de não aceitar arquivos que não 
sejam HTML, CSS ou Imagens.Além disso as imagens são 
transferidas automaticamente para o diretório images/ o que 
dificulta a vida de quem constrói a página off-line. 
Hypermart 
Serviço de FREEhost com subdomínio 
(http://seunome.hypermart.net). Oferece 10Mb de espaço em 
disco, ilimitados e-mails aliases (...@seunome.hypermart.net), 
aceita CGIs e também oferece a possibilidade de proteger 
diretórios por senha. É um pouco lento e também abusa das 
propagandas exibindo uma tela splash que dá reload a cada 2 
minutos. 
Starmedia Órbita 
Serviço de free host que eferece 25 Mb de espaço, é ótimo para 
quem não entende nada de HTML, tem um editor on-line. 
Webjump Serviço de free-host com 25 MB. 
Freemail (e-mail) 
 Estes são os principais serviços 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! 
Hotmail 
O serviço de e-mail grátis mais conhecido do mundo, oferece 
entreoutras coisas um serviço de notícias no qual o usuário 
recebe um e-mail avisando sobre as novidades do tema 
escolhido (tudo em inglês). 
ZipMail 
Serviço nacional que oferece uma conta grátis de e-mail com a 
vantagem de estar num servidor seguro, garantido pelo 
protocolo SSL o que garante privacidade total para suas 
mensagens mais secretas. Não é muito bom para mandar 
arquivos. 
Yahoo! 
Tão simples quanto o nome, nele você cria um e-mail e os dados 
já ficam armazenados no seu computador, assim é só chegar lá e 
digitar a senha que você já tem acesso aos seus e-mails.Vem 
com um serviço de notícias por e-mail e também um software 
que avisa quando há novas mensagens no servidor. 
Starmedia 
Não é apenas um serviço de e-mails grátis mas também traz as 
últimas notícias do dia, hospedagem gratuita de homepages 
pessoais e também um bate-papo. 
MailBr 
Tem 5 MB de espaço, vários domínios: (seunome@rock-
br.com.br,seunome@linuxbr.com.br, seunome@quake-
br.com.br etc.) 
ZZN 
Onde você cria seu sistema de e-mail grátis. Por Exemplo: 
alguém@seunome.zzn.com 
Guest Book 
 Livro de visitas para sua home page, onde os seu visitantes podem deixar suas 
sugestões e críticas. 
Lemon GuestBook: GuestBook em português. 
Lpage: Você se inscreve e tem seu guestbook. 
TheGuestbook: Exibe um banner deles em cada guestbook. 
DreamBook: Bom GuestBook. 
Redirecionadores 
 Seu endereço é muito complicado? Então 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 . São e ! 
 Código: 
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="Março"} 
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="Terça - 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="Sábado"} 
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 posição em que você desejar escrever a data e hora atuais: 
<script>weekday()</script>, <script>dia()</script> de <script>mes()</script> de 
<script>ano()</script>. 
São <script>hora()</script> <script>plural()</script> e <script>minuto()</script> 
<script>plural2()</script>! 
Para Desabilitar o Botão Direito do Mouse 
 Caso a sua intenção seja "esconder" o código de sua página, você pode desabilitar o 
botão direito do mouse através do seguinte código escrito entre <HEAD> ... </HEAD>: 
<script language="javascript"> 
function noRightClick() { 
if (event.button==2) { 
alert('Página Carregada com Sucesso!') 
} 
} 
document.onmousedown=noRightClick 
</script> 
 
 
Tabela com 99 códigos de cores. 
 
Black #000000 
 
90% Black #191919 
 
80% Black #333333 
 
70% Black #4C4C4C 
 
60% Black #666666 
 
50% Black #7F7F7F 
 
40% Black #999999 
 
30% Black #B2B2B2 
 
20% Black #CCCCCC 
 
10% Black #E5E5E5 
 
White #FFFFFF 
 
Blue #0000FF 
 
Cyan #00FFFF 
 
Green #00FF00 
 
Yellow #FFFF00 
 
Red #FF0000 
 
Magenta #FF00FF 
 
Purple #9900CC 
 
Orange #FF6600 
 
Pink #FF9900 
 
Dark Brown #663333 
 
Powder Blue #CCCCFF 
 
Navy Blue #003399 
 
Deep Navy Blue #000066 
 
Twilight Blue #6666CC 
 
Pastel Blue #9999FF 
 
Baby Blue #6699FF 
 
Electric Blue #6666FF 
 
Desert Blue #336699 
 
Sky Blue #00CCFF 
 
Ice Blue #99FFFF 
 
Light BlueGreen 
#99CCCC 
 
Ocean Green #669999 
 
 
Moss Green #336666 
 
Dark Green #003333 
 
Forest Green #006633 
 
Grass Green #009933 
 
Kentucky Green #339966 
 
Light Green #33CC66 
 
Spring Green #33CC33 
 
Turquoise #66FFCC 
 
Sea Green #33CC99 
 
Faded Green #99CC99 
 
Ghost Green #CCFFCC 
 
Mint Green #99FF99 
 
Army Green #669966 
 
Avocado Green #669933 
 
Martian Green #99CC33 
 
Dull Green #99CC66 
 
Chartreuse #99FF00 
 
Moon Green #CCFF66 
 
Murky Green #333300 
 
Olive Drab #666633 
 
Khaki #999966 
 
Olive #999933 
 
Banana Yellow 
#CCCC33 
 
Light Yellow #FFFF66 
 
Chalk #FFFF99 
 
Pale Yellow #FFFFCC 
 
Brown #996633 
 
Red Brown #CC6633 
 
Gold #CC9933 
 
Autumn Orange #FF6633 
 
Light Orange #FF9933 
 
Peach #FF9966 
 
Deep Yellow #FFCC00 
 
 
Sand #FFCC99 
 
Walnut #663300 
 
Ruby Red #990000 
 
Brick Red #CC3300 
 
Tropical Pink #FF6666 
 
Soft Pink #FF9999 
 
Faded Pink #FFCCCC 
 
Crimson #993366 
 
Regal Red #CC3366 
 
Deep Rose #CC3399 
 
Neon Red #FF0099 
 
Deep Pink #FF6699 
 
Hot Pink #FF3399 
 
Dusty Rose #CC6600 
 
Plum #660066 
 
Deep Violet #990099 
 
Light Violet #FF99FF 
 
Violet #CC66CC 
 
Dusty Plum #996699 
 
Pale Purple #CC99CC 
 
Majestic Purple 
#9933CC 
 
Neon Purple #CC33FF 
 
Light Purple #CC66FF 
 
Twilight Violet #9966CC 
 
Easter Purple #CC99FF 
 
Deep Purple #330066 
 
Grape #663399 
 
Blue Violet #9966FF 
 
Blue Purple #9900FF 
 
Deep River #6600CC 
 
Deep Azure #6633FF 
 
Storm Blue #330099 
 
Deep Blue #3300CC

Outros materiais