Tutorial de Linguagem HTML



Hospedando sua página gratuitamente  
Letras e seus tamanhos  
As tags   
Inserindo imagens  
Inserindo Links  
Links e imagens  
Inserindo linhas  
Listas  
Tabelas   
Construindo o seu próprio contador  
Frames ou não frames, eis a questão!  
Textos que andam   



Hospedando sua página.

Existem vários lugares que oferecem hospedagem gratuíta na Internet, porém aqui indicarei apenas dois endereços; a famosa GeoCities e a Starmedia, cuja a única vantagem é estar toda em português. Os sites são respectivamente: http://geocities.datacellar.net/ e http://www.starmedia.com. Na Starmedia , acredito que se despensam grandes explicações, pois logo ao entrar no site, um pequeno banner estará indicando o lugar para pegar a sua free home page. Aí é só escolher o assunto que está mais de acordo com o site que você pretende criar e preencher o formulário. Haja visto que vc deve ter um Login name e um password. O login name é o nome do seu free email também...
Logo em seguida eles te darão o seu endereço! Depois é só clicar no "Ferramentas na Web" e optar por um dos editores de HTML, dependendo do seu conhecimento.
Da mesma forma como funciona na GeoCities, vc terá uma espécie de "armário" o qual guardará todos os arquivos da sua home page, inclusive aqueles que você "puxar" do seu computador para a Starmedia ou para a CeoCities.
Agora na Geocities, logo ao entrar, aparecerá um "menu" com os diversos assuntos, chamado Neighbourhoods. Depois de clicar na tal "vizinhança"que tenha mais a ver com o conteúdo do seu futuro site, clique onde estiver escrito: Free home page, no topo da página. Aí é só preencher o que eles pedem, escolher um member name e ceder seu email, pois é através dele que eles te enviarão a confirmação e o código de acesso.
Agora, para começar a construir, abra a página principal da GeoCities e clique em Member's Area, e depois selecione File Manager. Você já terá pronta uma página index.
Para construir novas páginas é só clicar em Create new HTLM files. E para copiar arquivos do seu computador para a GeoCities, para que vc possa usá-los, é só ir até o EZ File Upload, clicar no botão cinza retângular ao lado do retângulo branco, e selecionar o arquivo a ser copiado! E no fim apertar "Upload Files".
Para copiar mais de 5 arquivos por vez, é só selecionar na opção Display o número desejado até o máximo de 20.
Pronto!!! É uma explicação simples, mas acredito que dá pra entender bem...
Qualquer dúvida, é só mandar um Email!!!



Letras e tamanhos

Aí vai uma tabelinha com os códigos, é só copiar...

<*h1>Tamanho um<*/h1>
<*h2>Tamanho dois<*/h2>
<*h3>Tamanho três<*/h3>
<*h4>Tamanho quatro<*/h4>
<*h5>Tamanho cinco<*/h5>
<*h6>Tamanho seis<*/h6>


Não esqueça de tirar as estrelinhas de todos os exemplos!!! Elas foram postas só para poder mostrar o código HTML!!!




Como ficará:

Tamanho um

Tamanho dois

Tamanho três

Tamanho quatro

Tamanho cinco
Tamanho seis


Itálico:

<*i> Palavra <*/i>

Exemplo:
Palavra


Negrito:

<*b> Palavra <*/b>

Exemplo:
Palavra



As tags


<*html> marca o início da página
<*head> início do cabeçalho
<*title> título da página <*/title>
<*/head> fecha o cabeçalho
<* body> início do conteúdo da página
<*/body> fim do conteúdo da página
<*/html> fim da página



Inserindo imagens

O código é o seguinte:

<*img src="nome do arquivo.gif">



Inserindo links

Links são palavras ou textos que dão acesso a outras páginas, ou outras partes de uma mesma página.

Veja o código:

<*a href="nome do arquivo ou do endereço"> texto do link <*/a>

Exemplos:

Página principal

Ou:

Meu outro site



Links de imagens

É aquela imagem a qual se clica e é levado para outra página, ou endereço. Tem o mesmo papel do texto-link.



Veja o código:

<*a href="song_007.mid"><*img src="som.gif"><*/a>



Inserindo linhas

Linha simples:

Código: <*hr>




Linhas mais sofisticadas:

Código: <*hr size=10 align=left noshade width=50%>



Sendo que:

size: largura que varia de 1 a 10.
align: define a posição; left(esquerda), right(direita), center(centro).
noshade: escurece a linha
width: comprimento da linha, de 0 até 100%.



Listas

Listas não-ordenadas:


<*ul>
<*li>Um
<*li>Dois
<*li>Três
<*/ul>


Veja como ficará:


  • Um
  • Dois
  • Três



Listas ordenadas:


<*ol>
<*li>Um
<*li>Dois
<*li>Três
<*/ol>


Veja como ficará:


  1. Um
  2. Dois
  3. Três




Tabelas

Organizei desta forma esta parte: primeiro a apresentação de algumas palavras e seus respectivos significados, seguido dos códigos-fonte e exemplos de como vai ficar.

Border: espessura da borda. Varia geralmente de 0(sem borda) até 5.

Cellpading: espaço dentro da "célula" da tabela.

Cellspacing: espaço entre as "células" e as bordas da tabela.

Bgcolor: a cor de fundo da tabela.

Background:: a textura de fundo da tabela.

Bordercolor: a cor das bordas.

Podem ser: "green", "yellow", "red" , etc...


Width: a largura da tabela


Height: a altura da célula


Align: alinha horizontalmente o conteúdo das células na linha. Pode ser:

    align="left" ou align="center" ou align="right"



Preste bastante atenção nos códigos fontes das tabelas.

Não esquecendo de retirar as estrelinhas!!!Caso contrário não funcionará!!!




Exemplo 1:


<*p align="center">
<*table border=2 cellspacing=3>
<*tr>
<*td height="35">alguma palavra
<*td width="50">alguma palavra
<*/tr> <*/table> <*/p>



alguma palavra alguma palavra




Exemplo 2:


<*p align="center">
<*table border=4 cellspacing=2 bordercolor="yellow">
<*tr>
<*td height="20">alguma palavra
<*td width="70">alguma palavra
<*/tr> <*/table> <*/p>





alguma palavra alguma palavra




Exemplo 3:


<*p align="left">
<*table border=10 cellspacing=5 bordercolor="green" background="30.gif">
<*tr>
<*td height="20">alguma palavra
<*td width="190">alguma palavra
<*/tr> <*/table> <*/p>





alguma palavra alguma palavra




Exemplo 4 :


<*p align="center">
<*table border=2 cellspacing=5 bordercolor="red">
<*tr>
<*td height="20">alguma palavra
<*td width="190">alguma palavra
<*/tr> <*/table> <*/p>

palavra1 palavra2 palavra3 palavra4
palavra5 palavra6 palavra7 palavra8
palavra9 palavra10 palavra11 palavra12
palavra13 palavra14 palavra15 palavra16




<*p align="center"> <*table border=1 cellspacing=2 bordercolor="red" > <*tr> <*td>palavra1<*/td> <*td>palavra2<*/td> <*td>palavra3<*/td> <*td>palavra4<*/td> <*/tr> <*td>palavra5<*/td> <*td>palavra6<*/td> <*td>palavra7<*/td> <*td>palavra8<*/td> <*/tr> <*td>palavra9<*/td> palavra10<*/td> <*td>palavra11<*/td> <*td>palavra12<*/td> <*/tr> <*td>palavra13<*/td> palavra14<*/td> <*td>palavra15<*/td> <*td>palavra16 <*/tr> <*/table> <*/p>


Construindo seu próprio contador


Para construir seu próprio contador, é so inserir este código de fonte:

<*img src="http://www.ez-poa.com.br/cgi-bin/Count.cgi?ft=1|dd=A|df=nome|md=5"

ft=x, x é o tamanho da borda.
df=nome, nome do seu contador, é só escolher um. Para zerá-lo, é só trocar o nome.
md=n, onde n é o número de dígitos do contador.

Depois é só abrir a sua página online, que ele funcionará!



Textos que andam



<*marquee height=30 width=500 direction=left scrollamount=15><*font size="6">Andando!!!<*/font><*/b><*/marquee>

Andando!!!




Frames


Quando eu comecei a pesquisar sobre frames, visitando diversos sites e colhendo informações de cada um, percebi que as explicações eram meio confusas, e acabei por me virar sozinho, juntando as explicações e fazendo experiências. Por isso é que eu vou tentar explicar de forma muito simples e fácil, para que todos possam se utilizar desse recurso sem problema!

O primeiro de tudo é você ter dois arquivos final ".html". Geralmente as pessoas fazem um como a página principal, e o outro como um menu. Vamos chamá-los de "principal.htm" e "menu.htm" Pronto, agora é só construir uma outra página, a qual chamaremos de Frame, só com esse código de fonte:
<*html>
<*head>
<*title>Frames<*/title>
<*/head>
<*frameset cols="20%,80%">
<*frame src=menu.htm NAME=indice>
<*frame src=principal.htm NAME=conteudo>
<*/frameset>
<*noframes> O seu browser não sabe exibir frames. <*/noframes>

É só isso!!! Agora uma dica: todas as vezes que você for inserir links em uma dessas duas páginas, você deve especificar onde quer que esse arquivo do link abra! Assim:

<*a href="qualquer arquivo.htm" target="o menu.htm ou o principal.htm">Link<*/a>




O comando target indica se o arquivo do link vai abrir no lugar onde está o "menu" ou no lugar onde está o "principal".

The End


1