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.

Voltar ao topo

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

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.

      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:

      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>

Para ver como ficará a página com estes códigos na tela do Browser clique aqui:

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:

      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;

Voltar ao topo

Â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">Clique aqui</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">Clique aqui</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:

    • 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>.
    • Agora faça o link para essa âncora, como a seguir:
      <A HREF="#inicio">Clique aqui</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>

Voltar ao topo

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.

      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:

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:

      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 imagens está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. LEFT
  2. RIGHT
  1. Move o letreiro da esquerda para direita.
  2. Move o letreiro da direita para 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.

Exemplo: <MARQUEE ALIGN=middle BEHAVIOR=scroll BGCOLOR=#009900 DIRECTION=left HEIGHT=5% WIDTH=80% HSPACE=1 VSPACE=10 LOOP=infinite SCROLLAMOUNT=2 SCROLLDELAY=20> Texto </MARQUEE>

Voltar ao topo

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:

Voltar ao topo

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.

      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>:

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

      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>

Voltar ao topo

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 o frame 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:

      Exemplos:

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

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

Voltar ao topo

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:

      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 ???
Se você colocar SIZE=2 então fica assim:

Qual o estado que você mora ???

      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>

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:

      Alguns destes elementos são 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 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.:
País.:
Mensagem.:

Voltar ao topo

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 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.

Voltar ao topo

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:

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 entre outras 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

Voltar ao topo

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>

Voltar ao topo

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

Voltar ao topo