GMBR
Gostaria de reagir a esta mensagem? Crie uma conta em poucos cliques ou inicie sessão para continuar.
Entrar

Esqueci-me da senha

Últimos assuntos
» Procuro Programador de game maker
por Wou Sex 15 Mar 2024, 10:27

» Retorno da GMBR!!!
por vinians Qui 14 Mar 2024, 19:07

» Mod APK
por gamerainha Qua 13 Mar 2024, 06:30

» Mudar cor de apenas uma palavra
por lunalol Sex 01 Mar 2024, 13:42

» Aceito pedidos de sprites (Com exemplos meus)
por Sevilha Qua 28 Fev 2024, 12:17

» Inventário simples
por Isquilo_Roedor Qui 22 Fev 2024, 15:18

» Problemas na programaçnao de inimigo [jogo DOOM LIKE]
por Black Mirror Dom 11 Fev 2024, 13:34

» ANDROID MULTI TOUCH
por DiegoBr Dom 04 Fev 2024, 12:13

» Servidor de Discord do fórum?
por Lighter Sáb 27 Jan 2024, 17:18

» Save e Load Json
por Klinton Rodrigues Qui 25 Jan 2024, 11:12

» Colisão com mais de um objeto
por aminaro Seg 22 Jan 2024, 15:02

» Oi sou novo aqui
por Thiago Silveira Alexandre Sáb 20 Jan 2024, 20:55

» Como acessar conteudo comprado no marketplace
por macmilam Sex 19 Jan 2024, 07:42

» Devlogs em vídeos do Block Room
por Joton Seg 15 Jan 2024, 16:56

» Alguém aqui já ganha dinheiro com seus games?
por Joton Seg 15 Jan 2024, 16:49

» ACERVO GMBR MAGAZINE
por Joton Qui 11 Jan 2024, 19:21

» como aumentar o obj sem aumentar a colisão??
por GabrielXavier Qua 10 Jan 2024, 07:21

» Asteroid Core - Early Acesse Update [0.2.0.0]
por JOZ. Seg 08 Jan 2024, 14:39

» Versionamento de código com GitHub
por GabrielXavier Seg 08 Jan 2024, 07:32

» Rio Rise - novo launcher do Gta San Andreas SAMP Brasil
por kolesovsup Sex 29 Dez 2023, 07:16

» a funçao approach ainda existe?
por PEDRINDEV Ter 26 Dez 2023, 20:05

» Inimigo ataca até por trás! >:(
por saim Sex 22 Dez 2023, 08:55

» [RESOLVIDO]Spawn após morte
por Deception_1999 Dom 17 Dez 2023, 16:39

» Remunerado $$$ - Procuro programador para ajudar a "montar" um jogo
por theguitarmester Sáb 02 Dez 2023, 16:28

» Game maker nao abre
por Cerf Dom 26 Nov 2023, 12:01


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

Ir para baixo

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

Mensagem por Davichococat Qua 01 Fev 2012, 10:55

Rolling Eyes 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

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


Última edição por Davichococat em Qua 01 Fev 2012, 13:51, editado 6 vez(es) (Motivo da edição : Adicionado o link.)
Davichococat
Davichococat

Data de inscrição : 29/12/2011
Reputação : 1
Número de Mensagens : 182
Prêmios : [Tutorial](Parte 4) A mágica da programação de sites Empty

Medalhas x 0 Tutoriais x 0 Moedas x 0

Ouro x 0 Prata x 0 Bronze x 0

Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0

http://www.google.com

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos