xTibia

.com
DO
html

Básico De Html

Por Doidin, 05 de abr. de 2010 em Programação Web

otserv
tibia
8
1.2k
DoidinD
05 de abril de 2010 às 05:45

Básico de HTML

Olá galerinha XTibiana,

Hoje resolvi ensinar um pouquinho de HTML para você, então criei este tutorial ensinando o bem básico de HTML...

 

Para aprendermos o básicão de HTML, não precisamos nada mais nada menos que um simples editor de texto como o NotePad. Podemos começar inserindo o seguinte:

 

<HTML>

<HEAD>
<TITLE>Olá XTibia.com</TITLE>
</HEAD>

<BODY>
</BODY>

</HTML>

Dica: Devemos criar uma pasta nova no nosso disco para conter a página, e devemos gravar o nosso de texto com o nome de "index.html". Porquê? Quando a página está a ser visualizada no nosso disco, é indiferente, mas nos servidores onde são alojadas as páginas na Internet, a página inicial por defeito chama-se index.html ou index.htm.

 

Se visualizarmos a página que acabamos de criar em um browser (programa que permita navegar na internet, por exemplo o Mozilla Firefox ou a Internet Explorer), teremos qualquer coisa como isto:

 

2a4po3l.jpg

Que conclusão podemos tirar? O texto que aparece como título da janela é definido pelo "tag" <TITLE>, que surge sempre após o o suposto cabeçalho que é o "tag" <HEAD>.

 

Agora vamos fazer a seguinte alteração:

 

<HTML>
<HEAD>
<TITLE>Olá XTibia.com</TITLE>
</HEAD>
<BODY>
Tutorial de HTML para o XTibia.com
</BODY>
</HTML>

Agora observe como ficará a pagina no browser:

 

fkbc0g.jpg

Como vocês podem observar, a área definida pelo "tag" <BODY> é aquela onde reside quase todo o conteúdo visível de uma página. Vamos nos concentrar nesta área.

 

Vamos começar acrescentando uma simples frase:

 

<BODY>
Tutorial de HTML para o XTibia.com

Abraços do Matheus!
</BODY>

Inesperadamente, o resultado obtido será o seguinte:

 

afft6w.jpg

Bom vamos esclarecer porque não pulou a linha: Em HTML, os espaçamentos e mudanças de linha processam-se de um modo algo diferente. Todo o texto é interpretado continuamente, e na verdade é possível que todo o HTML de uma página esteja numa única linha. Os espaços, tal como neste tutorial, apenas servem para tornar o código mais legível a quem o cria. Vamos introduzir a seguinte "tag":

 

<BODY>
Tutorial de HTML para o XTibia.com
<BR>
Abraços do Matheus!
</BODY>

Este <BR> (de Break) dá instruções ao browser para fazer uma mudança de linha. Assim, o resultado deverá ser este:

 

wjxwnm.jpg

Agora vou ensinar um comando bem interessante que é bastante usado, como foi dito, a noção de espaçamento em HTML é um pouco diferente, e os browsers não reconhecem mais que um único espaço entre caracteres. Para contornar isto, utiliza-se uma referência especial -   (Non-Breaking SPace), que convém esclarecer que não é um "tag". Antes de mais explicações, experimentemos isto:

 

<BODY>
Tutorial de HTML para o XTibia.com
       
Abraços do Matheus!
</BODY>

E logo você verá que o resultado será este:

 

213g2s7.jpg

Dica: Você percebeu que deu o espaço, este espaço foi cedido pois o browser não reconhece os caracteres. Por exemplo, visto que os sinais de maior e menor são utilizados pelo próprio HTML para definir os "tags", se quisermos utilizar estes sinais na nossa página utilizaremos > e < respectivamente.

 

Agora irei lhe ensinar uma coisa bem legal e bastante utilizada que é o link, como este aqui, uma das bases do HTML é o facto de ser uma linguagem de hiper-texto. Vamos agora tentar introduzir uma ligação a outra página:

 

<BODY>
Tutorial de HTML para o XTibia.com
<BR>
Visitem o <A HREF="http://XTibia.com">XTibia.com</A>
</BODY>

E logo você verá algo semelhante a isto:

 

23w7g5s.jpg

Esta é uma "tag" um pouco diferente dos que já vimos. Pode parecer confuso, mas não é, na verdade é bem simples. O "tag" <A> é aquele destinado à introdução de uma link, mas no entanto necessita de um parâmetro (o HREF) para indicar aonde é feita essa ligação. Tudo aquilo que se segue irá estar "linkado", até o "tag" ser fechado com </A>.

 

O parâmetro HREF pode conter também o endereço de outro site, como em <A HREF="http://www.xtibia.com"> (neste caso é indispensável o prefixo http://) ou qualquer outro ficheiro sem ser .HTM ou .HTML. Por exemplo, para fazer uma link para download use assim: <A HREF="ficheiro.html">.

 

Agora vou ensinar a como você muda a cor das palavras é bem simples galera, confira o código:

 

<BODY>
Tutorial de <font color="#FF0000">HTML</font> para o <font color="#0000CD">XTibia.com</font>
<BR>
Visitem o <A HREF="http://XTibia.com">XTibia.com</A>
</BODY>

E logo após adicionar este código você verá este resultado:

 

4k8f3m.jpg

Bom este é um código semelhante ao código do Link, mas neste caso você irá precisar dos códigos das cores em HTML que você encontra aqui.

 

Perceba que você irá usar o <font color="#FF0000"> o #FF0000 é o código da cor e o <font o cógigo que deverá ser fechado pós o fim da frase que ficará </font>

 

Bom galera por enquanto é isso ai, ensinei algumas coisas básicas para vocês sobre o HTML, espero que tenham gostado e aprendido, sempre estarei atualizando este tópico...

 

Tópico atualizado dia 16/04/2010.

Editado Abril 16 por DoidinMapper

joaohdJ
05 de abril de 2010 às 16:58

Ahh, ta muito simples =x Podia ter colocado outras tags e até efeitos legais como o blink e o marquee. Mas tá valendo.

 

flw

DoidinD
05 de abril de 2010 às 17:06

Irei melhorar este tutorial, irei colocar outras tags e algumas outras explicações...

Só não edito agora porque estou ocupado para caramba com a escola =O

 

EDIT-

 

Tópico atualizado, foi adicionado algumas funções em HTML novas.

 

Abraços...

Editado Abril 6 por DoidinMapper

MatheusGladM
06 de abril de 2010 às 18:44

Eu uso isso mto para cartao de feliz aniversario passo pra pessoa e ela vai e ve la, porem nao acho muito util nao =/

 

Vo dar umas dicas pra se botar no tutorial:

Fale como botar cores, eh bem legal, n sei se voce entende, vou botar uns negocio aki simples:

<html><head>

 

<title>Ola Xtibia</title>

<style charset="utf-8" type="text/css">

 

 

</style></head><body style="background-color:blue;">

<table border="0" align="center" colspan="0" valign="middle">

<tbody><tr><td><br/><br/><br/></td></tr>

<tr>

<td><font color="black"><h2>Ola Xtibia!</h2></font>

 

</td><td><font color="red"><h2> HTML</h2></font>

</td>

</tr>

 

</tbody></table></body></html>

 

 

Que no site html ficara:

 

htmlj.png

 

 

Ensina tambem a puxar imagem de ficheiro ou de um site assim olha:

imagemxf.th.png

 

CLIQUE NA IMAGEM PARA VER MAIOR

 

Merchandising da GamerChants CADE MEU PAGAMENTO?

 

Tenho outros negocios bem legais pra botar, add msn se quizer

Editado Abril 16 por MatheusMkalo

2 semanas depois...
DoidinD
16 de abril de 2010 às 22:33

Boa ideia cara, tópico já foi atualizado...

Abraços...

DiogoD
17 de abril de 2010 às 01:28

Tá basicão, mas brilhantemente bem formatado, organizado, escrito...

 

Nota 100!

DoidinD
17 de abril de 2010 às 15:24

Opa receber um elogio do Val sempre é bem vindo né :P:

Todos as semanas vou adicionando coisas novas no Tutorial, quem sabe um dia não vai ser mais "Básico de HTML" :rimbuk:

Editado Abril 17 por DoidinMapper

LorDzL
19 de abril de 2010 às 13:29

- Membro Doidinmapper +3 de reputação por ter tutorial aprovado;

 

Abraços