04/01/2010

Guia de HTML


O que é HTML ?
     HTML é uma das linguagens de utilizadas para criar paginas da Internet. HTML são linhas de códigos que podem ser distinguidos sintaticamente, ou seja, cada código tem sua função. O HTML é interpretado, em geral, por programas chamados navegadores.


Aonde eu posso usar HTML ?
    Você pode usar, dentro de neopets, em petpages, userlookups, petlookups e guilds.  Fora de Neopets, você pode usar em qualquer site da internet.


O que são TAGS ?
   No HTML, não basta você escrever o que você quer que apareça, você tem que usar as chamadas Tags. As tags são uma de abertura e outra de fechamento e tem o seguinte aspecto (Abertura e fechamento, respectivamente): <código> </código>


Você pode ver a seguir uma lista com os códigos mais usados.



  • Link HTML
    Links "são como portais" que te direciona de uma pagina à outra. Você pode criá-los usando a tag <a>
<a href="Endereco-da-pagina">O que estiver escrito no link</a>
* Você não pode colocar links para fora do neopets ou para os sites de fans recomendados


  • Imagem em HTML
    Imagens... são imagens. você pode inserir uma imagem usando a tag <img>
<img src="url-da-imagem" width="largura" height="altura" />


  • Cabeçalho / Header
    Você pode criar um cabeçalho em HTML usando a tag da <h1> até <h6> (H1 - maior | H6 - menor). Sendo H6 considerado fonte normal.
<h1> Cabeçalho Maior</h1>
<h2> Sub cabeçalho </h2>
<h3> Cabeçalho menor</h3


  • Formatação de Texto
   Com o HTML, você pode deixar o texto: em negrito, em itálico, sublinhado, riscado, colorido*, Grande,Pequeno, etc...
<b> Negrito </b>
<i> Itálico </i>
<u> Sublinhado </u>
<strike> Sublinhado </strike>
<font color="#000fff">Texto em azul </font>
<big> Grande </big>
<small> Pequeno </small>
* para escolher as cores, você deve pegar o código HTML da cor Ex: #000fff


  • Pular Linha 
  No HTML você, é claro, pode pular linha. É só usar a tag <br/> *
~le texto~ <br/> Agora já é outra linha =D
*a tag <br /> é umas das unicas que o "/" fica depois do código


  • Formatação de texto - Fonte
   Acha a Times New Roman? Você pode mudar! Que tal a Comic-Sans ? E verdana ? Você escolhe!
<font family:"Nome da fonte";> Texto </font>
PS: Alguns usuários podem não ter as fontes que você tem. Nesse caso, ele verá a Times New Roman.


  • Texto em Scroll
Seu texto fica deslizando \o/

<marquee> Texto </marquee> 


  • Posicionar  Texto
Você pode colocar seu texto aonde você quiser usando a tag <div align>
<div align="left"> Texto na Esquerda </div>
<div align="center"> Texto no Centro </div>
<div align="right"> Texto na Direita </div>

Listas
  • De Bolinhas
Você pode fazer uma lista de bolhinhas usando as tags <ul> e <li> (juntas)
<ul>
<li> Bolinha 1 </li>
<li> Bolinha 2 </li>
<li> Bolinha 3 </li>
</ul>
  1. De numeros 
Você também pode fazer uma lista numerada usando a tag <ol> e <li> (juntas)
<ol>
<li> Numero 1 </li>
<li> Numero 2 </li>
<li> Numero 3 </li>
</ol>

Plano de Fundo
  Você pode embelezar sua pagina com um plano de fundo, basta usar a tag <body background> . Você pode fazer seu plano de fundo com uma imagem ou com uma cor.

 - Com imagem
<body background="URL da imagem">

 - Com uma Cor
<body bgcolor="código HTML da cor">
* Você pode pegar o codigo HTML da cor usando o Color Picker

Textareas
  Textarea é um código que permite que outras pessoas peguem o que está escrito dentro dele. Muito utilizado em Caixas Link-me e em guias de HTML / CSS. Você pode consegui-lo usando a tag <textarea>

<textarea> Texto </textarea>

Tabelas 
  Tabelas são códigos muito complexos. Nós vamos colocar aqui só o básico. Em breve faremos um guia sobre tabelas mais abrangente.

Você pode fazer tabelas usando os códigos <table> <tbody> <tr> <td> (Todos juntos e nessa ordem)
<table border="#">
<tbody>
<tr>
<td> Célula 1 </td>
<td> Célula 2 </td>
<td> Célula 3 </td> 
</tr> <tr>
<td> Nova Linha </td> 
<td> Célula 2 </td>
<td> Célula 3 </td> 
</tr>
</table>
</tbody> 
Explicação
<table> e <tbody> - Abre a Tabela
<table border="#"> Altere o "#" por um numero que represente a espessura da borda da sua tabela  
<tr> - Adiciona uma linha
<td> - Adiciona uma célula

Estilo da Borda
 Você pode alterar o estilo da borda da sua tabela. Basta usar uma propriedade CSS chamada Border-Style
<table border="#" border-style: *nome do estilo*;>
Estilos 
Solid - Borda Contínua
dotted - Pontilhada
dashed - Tracejada
double - dupla
groove - entalhada
ridge - ressalto
inset - relevo alto
outset - relevo baixo

Agora que você sabe os códigos básicos, basta você misturar um e outro para fazer o efeito que você deseja. Caso tenha alguma duvida, vá no TACPP e comente sua duvida. Nossa equipe terá o prazer de esclarecer sua duvida

Editores de Código

Para você editar seu código, ver como ficou ... Você tem 2 opções

1) Bloco de Notas (funciona offline)

Abra o Bloco de notas. Vá em:

Iniciar
  Todos os Programas
     Acessórios
         Bloco de Notas 

Agora digite seu código no Bloco de notas

Notepad

Ao terminar, clique em Salvar Como e salve como um arquivo .html  Agora é só abrir que você vai ver o resultado das suas codificações

2) Editor em Tempo Real do TACPP

Esse é super simples, basta ir no Editor de HTML do TACPP, digitar seu código, que ele aparece em tempo real para você.

Lembrando que nem todos os códigos passam pelos filtros de segurança do neopets ;)

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Grants For Single Moms