Ir para conteúdo

Básico De Html

Doidin

Por Doidin
em Programação Web

 Share

Posts Recomendados

Doidin

Doidin 275

Postado
Postado (editado)

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 por DoidinMapper
Link para o comentário
https://xtibia.com/forum/topic/130444-b%C3%A1sico-de-html/
Compartilhar em outros sites
Doidin

Doidin 275

Postado
  • Autor
Postado (editado)

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 por DoidinMapper
Link para o comentário
https://xtibia.com/forum/topic/130444-b%C3%A1sico-de-html/#findComment-859591
Compartilhar em outros sites
MatheusGlad

MatheusGlad 424

Postado
Postado (editado)

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 por MatheusMkalo
Link para o comentário
https://xtibia.com/forum/topic/130444-b%C3%A1sico-de-html/#findComment-859988
Compartilhar em outros sites
  • 2 weeks later...
Doidin

Doidin 275

Postado
  • Autor
Postado (editado)

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 por DoidinMapper
Link para o comentário
https://xtibia.com/forum/topic/130444-b%C3%A1sico-de-html/#findComment-863960
Compartilhar em outros sites
 Share
Ir para a lista de tópicos
×
×
  • Criar Novo...