Entrar
Últimos assuntos
» Procuro Programador de game makerpor 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
Página 1 de 1
[Tutorial](Parte 4) A mágica da programação de sites
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!
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!
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:
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:
Essas tags são fundamentais, como já disse. E então, que tal colocarmos algo nelas? Insira isso dentro da tag <body>:
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:
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...
Agora a coisa pode ficar um pouquinho mais séria.
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:
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:
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 ).
:arrow: Próximo tutorial
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!
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>
- 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>
- Código:
<title>Hotel Intergalático D-Luxo</title>
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 />
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>
- Código:
<table></table>
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>
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">
- 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>
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 ).
: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.)
Tópicos semelhantes
» [Tutorial](Parte 5) A mágica da programação de sites
» Documento de Design - Tutorial (1ª Parte)
» [TUTORIAL] Programação GML 01 - Funções / Scripts
» [Tutorial] I.A - 1ª parte
» [Tutorial] Introdução a GML - Parte 1
» Documento de Design - Tutorial (1ª Parte)
» [TUTORIAL] Programação GML 01 - Funções / Scripts
» [Tutorial] I.A - 1ª parte
» [Tutorial] Introdução a GML - Parte 1
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
|
|