[Tutorial](Parte 4) A mágica da programação de sites

por Davichococat Qua 01 Fev 2012, 10:55

Olá, novamente, mamífero! Bem, demorou um pouco essa quarta parte, mas ela está aqui agora. ;)

Ah, e aos usuários avançados de HTML: Sei que tem algumas tags aqui que já são antigas e removidas dos padrões atuais, porém não quero entrar em CSS pelo menos antes da parte 6 ou 7, então espero que entendam que irei usar estas tags no tutorial, já que funcionam sem problemas nos navegadores mais conhecidos. Depois iremos "se alinhar mais aos padrões". Mas se acharem algum problema no código, avisem! o.-

Mais uma coisa: Novatos, lembrem-se SEMPRE! Quando criar um novo arquivo, não se esqueça de mudar a linguagem para "HTML" como explicamos na primeira parte do tutorial!

A mágica da programação de sites

Parte 4 - Botando a mágica pra funcionar

Nesta parte do tutorial iremos fazer um site decente e agradável aos olhos. Ou, eu deveria dizer, um site útil. A mágica do visual vem depois, quando aprendermos o CSS, que você provavelmente ainda não sabe o que significa, mas também não é necessário. Por enquanto...

Crie um novo arquivo. Aprendemos isso na primeira parte do tutorial, então não deve ser problema.

Insira este código, no topo de tudo:

Código:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Ele é necessário em todo site. Ele diz ao navegador o quê, afinal, você está fazendo. Lembre-se de sempre começar páginas HTML com essa tag.

Agora, abra 3 tags:

Código:: <html> <head> </head> <body> </body>

Bem, o que abrimos e fizemos aqui? Entenda, acabamos de abrir 3 tags, e estas são fundamentais no seu site.

A tag <html> explica o que o navegador vai interpretar. O que estiver dentro, é a página, o que estiver fora, são erros. Esta vem depois da tag que acabamos de explicar. Coloque seu site "aí dentro".
A tag <head> dá algumas informações sobre o site ao navegador. Também se pode inserir nela "keywords", que se traduz para "palavra chaves". Elas ajudam motores de busca como o Google à achar o seu site. Iremos inserir algumas informações nela depois.
A tag <body> pode se traduzir para "corpo". O que estiver nela será vísivel ao usuário seu site. Lembre-se que código não é igual a visualização, o código nem sempre irá mostrar algo ao usuário. Isso não significa que você deve deixar de colocar seu código aqui, de fato, por enquanto, tudo vai aqui dentro. Ou seja: Coloque seu conteúdo aqui.

Essas tags são fundamentais, como já disse. E então, que tal colocarmos algo nelas? Insira isso dentro da tag <body>:

Código:: <center><h1>Hotel Intergalático D-Luxo</h1> <center><p>Olá, criatura, e bem vindo à nossa nave espacial. Oferecemos lanche intergalático e serviço UniverseWeb grátis.</p> <p>O nosso código de comunicação espacial IAKCSA é "222-334as-kkai-o2" seguindo os padrões Iota para comunicações. </p>Desejamo-lhes um bom repouso nas nossas camas antigravitacionais. Descanço por menos YZZ$ é só aqui!</center>

Bem, não fizemos muito além do que já aprendemos no segundo tutorial, exceto pela tag <p>. Ela organiza os parágrafos, use ela ao invés de <br>. A tag não deixa de ser útil, você ainda pode usar <br> para quebrar várias linhas, fazendo um espaçamento vertical. Mas então, antes de continuar, que tal colocarmos algo na nossa tag <head>? Adicione isso, dentro da tag <head>:

Código:: <title>Hotel Intergalático D-Luxo</title>

O que fizemos aqui? É simples, é facil: Informamos ao navegador qual é o título da página. O título é o que aparece lá em cima. Um exemplo seria: "GMBR, página inicial - Mozilla Firefox". O título está presente nesta parte, além de ficar "estampado" nas abas. Agora temos um título, e algum texto... Mas precisamos ir mais fundo! [Tutorial](Parte 4) A mágica da programação de sites 71423

[Tutorial](Parte 4) A mágica da programação de sites 71423

Que tal darmos mais informações aos clientes do nosso hotel intergalático? Afinal, eles precisam saber o preço... E nós não deixaremos de organizar a página por causa disso... Nem de informar os nossos clientes. Parece uma ótima hora pra usar tabelas(<table>) e linhas horizontais(<hr>).

Comece criando uma linha horizontal embaixo do nosso texto. Ah, não sabe? Veja, é fácil:

Código:: <hr />

Isso vai criar uma linha horizontal. Ajuda um pouco a organizar o texto. Se parece com isso:

Dúvido que tenha visto, pois está meio branco. Bem, se você tiver uma tela LED fica mais fácil. Porém, a ideia geral você já tem. Agora, vamos à parte complicada: tabelas.
Quer dizer, antes, insira isso debaixo da linha...

Código:: <h2>Preços (YZZ$)</h2>

Você deve estar achando que <H2> é uma tag familiar(sem química, por favor, isso não é hidrogênio Rolling Eyes

)... É porque já tinhamos fuçado um pouquinho com outra tag parecida, o <H1>. Bem, o segredo é, mamífero, esta tag vai de 1 a 6. Sim, temos <h1>,<h2>,<h3>,<h4>,<h5> e <h6>. Quanto menor o número, menor o tamanho. Depois iremos aprender a personalizar a fonte e etc. Na próxima parte. Então, de volta à estas malditas tabelas!

Código:: <table></table>

Você já deve saber o que estamos fazendo aqui. Tudo dentro dessa tag faz parte da tabela. Mas não é tão simples assim. Precisamos especificar como a tabela é organizada.
Agora a coisa pode ficar um pouquinho mais séria.

Código:: <table> <tr> <td>Preço - Espaço normal</td> <td>5240 YZZ$</td> </tr><tr> <td>Preço - Espaço VIP</td> <td>12560 YZZ$</td> </tr> </table>

E então, o que fizemos? Quer arriscar explicar? Melhor não. Deixe isso comigo. Bem, o que fizemos foi simples. Abrimos uma nova coluna com a tag <tr>. Dentro dela colocamos duas linhas com a tag <td>. Depois, abrimos uma nova coluna. E fizemos o mesmo processo anterior. Não é tão fácil, talvez você se confunda. Então, compare o código ao resultado. Vá lá, veja como fica.
Hmmm, não funcionou, não é? Ficou somente algum texto perdido na página, certo? Isso é porque não formatamos a tabela. Uau, você deve estar orgulhoso. Iremos começar a usar a nossa primeira tag com atributos! Apenas modifique <table>, adicionando estes atributos:

Código:: <table border=1 bordercolor="green">

Nossa, o que fizemos aqui? É simples, se você já leu a terceira parte do tutorial. Bem, adicionamos os atributos border e bordercolor, mas você ainda não sabe o que eles fazem...

O atributo border é responsável por controlar a espessura da borda. Quanto maior o valor, mais grossa a borda da tabela é. Mas esse atributo não é só usado em tabelas. Há outras coisas que lhe permitem modificar a borda. Mas só aprenderemos tabelas nessa parte.
O atributo bordercolor fica com o honroso trabalho de informar ao navegador a cor da borda. Bem, nesta parte, fizemos uma borda verde, para se adequar mais ao site da nossa nave espacial.

Agora que já sabe, que tal testar? Vá lá, veja como o seu site está!
Legal, não é? Hehehe. Salve a sua página com o nome "index" na pasta que fizemos na primeira parte do tutorial. Bem, até agora, tudo bom. Mas, antes de terminar esta parte do tutorial, eu quero lhe ensinar outra tag.

Que tal fazermos links? Eu tenho 99% de certeza que você já sabe o que é um, mas se não souber é só testar. Crie uma nova linha horizontal. A tag você já sabe. Embaixo dela, coloque isso:

Código:: <a href="http://gmbr.forumeiros.com/t20662-tutorialparte-1-a-magica-da-programacao-de-sites">Este site foi feito usando um tutorial da GMBR por Davichococat.</a>

Isso vai criar um link até o meu tutorial. Não é necessário manter-lo, de fato, não desejo créditos, é apenas para lhe passar uma ideia de como funciona a tag <a>. Mas espera aí... Eu não expliquei como ela funciona. Bem, funciona deste jeito:

A tag <a> abre um link. Tudo dentro dela é um link. Porém, esta tag tem um atributo, e o mesmo é chamado de href. Nele se coloca o destino do link. Este atributo não se limita somente às tags <a>, existem outras que o usam também. E lembre-se sempre: O que não é número, leva aspas.

É isso aí, terminamos essa parte aprendendo várias tags novas. Vá e mexa um pouco com seu site. Não tenha medo de errar. Seu computador não irá explodir. A próxima parte vem em pouco tempo, e o nosso site ficará muito mais agradável aos olhos(ou não... isso depende do meu senso artístico para cores Happy

).

:arrow: Próximo tutorial