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
» player não consegue andar
por lovn7 Qui 21 Nov 2024, 13:33

» É possível fazer istó no game maker
por William Lima Qui 21 Nov 2024, 10:56

» Rio Rise - novo launcher do Gta San Andreas SAMP Brasil
por Lua Sáb 16 Nov 2024, 20:22

» (Resolvido) Cenario longo x Texture Pages
por josuedemoraes Sáb 16 Nov 2024, 15:31

» Kids' band
por Adilson Lucindo Santos Sex 15 Nov 2024, 12:23

» (RESOLVIDO) Engasgos-Troca de Sprites/animações
por josuedemoraes Ter 12 Nov 2024, 01:49

» Block Room - DEMO
por Joton Qua 06 Nov 2024, 22:58

» Game Infinito vertical (subindo)
por macmilam Sáb 26 Out 2024, 12:36

» Retorno da GMBR!!!
por Dancity Ter 22 Out 2024, 16:36

» Máquina de estados
por aminaro Qui 10 Out 2024, 13:33

» como faço pra um objeto colidir com o outro e diminuir a vida do player ?
por josuedemoraes Qui 03 Out 2024, 16:51

» RESOLVIDO: Colisão com objetos moveis
por josuedemoraes Qua 02 Out 2024, 20:28

» Crypt of the Blood Moon
por divin sphere Qua 11 Set 2024, 18:18

» como fazer um objeto seguir?
por divin sphere Dom 18 Ago 2024, 18:08

» Procuro de alguém para Modelar/Texturizar/Animar objetos 3D
por un00brn Dom 11 Ago 2024, 11:10

» Destruição de cenário (estilo DD Tank)
por CoronelZeg Sex 09 Ago 2024, 17:16

» RESOLVIDO-Como destruir uma instancia especifica de um objeto
por josuedemoraes Ter 23 Jul 2024, 00:40

» Automatizar a coleta de id
por GabrielXavier Seg 22 Jul 2024, 18:01

» Preciso de ajuda para concluir um pequeno projeto
por lmoura Qui 27 Jun 2024, 15:45

» ANGULO ACOMPANHAR O OBJETO
por Klinton Rodrigues Qui 27 Jun 2024, 08:34

» Musica reinicia quando sala reinicia
por GabrielXavier Ter 18 Jun 2024, 07:28

» como fazer uma copia de gd
por generico_cube Sex 14 Jun 2024, 15:48

» Square Adventure
por guilherme551 Ter 11 Jun 2024, 09:54

» como posso definir limite de uma variavel
por GabrielXavier Sex 07 Jun 2024, 14:14

» [Resolvido] Dúvida, colisão única de objeto
por vdm842 Sex 24 maio 2024, 09:50


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

2 participantes

Ir para baixo

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

Mensagem por Davichococat Qua 01 Fev 2012, 13:48

A mágica da programação de sites
Parte 5 - Que tal um pouco de Cascade Style Sheets?

Correto. Cascade Style Sheets. Se você olhar bem, vai perceber que é o significado da abreviação "CSS". Bem, você ficou este tempo todo querendo saber o que era CSS e PHP... Nesta parte, irei explicar CSS. PHP vem bem depois...

O CSS é o que dá uma melhor visualização do site. Podemos dizer que o CSS é o que cuida da parte visual. Ele organiza, colore, decora, alinha, modifica e até texturiza o site. Se você tirasse o CSS da GMBR, seria uma grande bagunça. Textos aqui e ali, coisas sem cor, formas perdidas, botões em qualquer lugar, imagens desalinhadas, fontes sem tamanho, etc. Bem, até agora já aplicamos CSS ao nosso site, sabia? Quando fizemos a tabela, na parte 4, "border" e "bordercolor" era CSS. Só que estava imbutido nas tags, e isso é antigo e não se adequa aos padrões atuais, em casos extremos até causando erros em alguns navegadores.

Desenvolver o CSS é fácil, e fica ainda mais fácil com o Notepad++. É parecido com o que fizemos na parte 1. Crie um novo arquivo, e mude a linguagem. Só que agora, a linguagem não é HTML(Hyper Text Markup Language). É CSS(Cascade Style Sheets). Ah, e você sabia que PHP significa Hypertext Preprocessor? Isso é tudo que vou falar dele por enquanto. De volta ao CSS, estamos saindo de tópico...

Acho que você já configurou nosso ambiente de trabalho. Bem, sabia que no Notepad++ cada vez que você muda o arquivo(a pequena aba lá em cima) ele também muda a linguagem? Ou seja, dá pra desenvolver HTML e CSS ao mesmo tempo, e ainda por cima sem ficar mudando a linguagem toda hora. Vou lhe dar uma rápida introdução à sintaxe CSS, e nada melhor do que um exemplo.
Código:
cachorro {
    cor:"marrom"
    estilo:"manchado"
    raça:"pit-bull"
    cordosolhos:"azul"
}

O que acabamos de fazer? Simples. Dizemos que a tag HTML "Cachorro" deveria ter o seu atributo "cor" como marrom, "estilo" como manchado, "raça" como pit-bull, e sua "cordosolhos" como azul. Mas esses atributos não existem, e cachorro também não é uma tag HTML. E você não pode inventar tags no HTML... (antes de chegar a qualquer conclusão, por favor leia toda esta parte do tutorial)

Nada melhor do que um exemplo com algo que funcione, certo? Então é isso que irei fazer.
Código:
b {
  font-size : 1.5em
  color : "red"
  font-family : arial
  font-weight : strong
}
A tag <b> agora tem 1.5 vezes o tamanho normal da fonte, é vermelha, tem a fonte Arial e é espessa como deve ser. Ou seja, o que estiver dentro de <b> vai ser assim. Mas tudo tem um nome(hora da listinha! [Tutorial](Parte 5) A mágica da programação de sites 838487 ).
  • Seletor - É o que você selecionou para receber os atributos CSS. Neste exemplo, "b" é o seletor, e ele é um Seletor HTML. Se tiver um ponto antes, será aplicado a tags com esta id. Se tiver um "#", será aplicado a tags com esta classe. Se não tiver nada(apenas o nome) e depois um ponto, será aplicado apenas à a tags especificadas com a ID especificada.
  • Propriedades é o que o nome diz; propriedades. No nosso exemplo, font-size, color, font-family e font-weight eram propriedades(perdão se chamei de atributos). Elas sempre recebem um valor.
  • Valores atríbuidos as propriedades, são, bem... Valores, como o nome diz. Diferente do HTML, alguns "textos" podem ser aplicados sem aspas, porém os valores (geralmente) nunca são aplicados com aspas. No nosso exemplo, o valor "Arial" foi atribuído à propriedade "Font-family".


Oh yeah, aposto que confundi você totalmente. Classes? IDs? Tags com classe, tags com id? É, eu sei, você está se perguntando o que é. Bem, ignore isso por enquanto, só tenha a ideia geral dos elementos que formam o CSS. Mas, e que tal aplicarmos CSS ao site do hotel intergaláctico? É, é... Parece uma boa ideia.

Mas você não sabe aplicar o CSS ao HTML. Você sabe fazer o CSS. Mas e então, como iremos o aplicar? É fácil, e eu irei ensinar.

Abra o arquivo "Index" que fizemos na parte 4. Modifique-o e deixe assim:
Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head><title>Hotel Intergalático D-Luxo</title></head>
<body>
<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 é "<i>222-334as-kkai-o2</i>" seguindo os padrões Iota para comunicações. </p>Desejamo-lhes um bom repouso nas nossas camas antigravitacionais. Descanço por menos <b>YZZ$</b> é só aqui!<center><TABLE BORDER="3" BORDERCOLOR="green">
<hr>
<h2>Preço</h2>
<TR>
<TD>Preço - Espaço Normal</TD>
<TD>Preço - Espaço V-I-P</TD>
</TR><TR>
<TD>2605 <b>YZZ$</b></TD>
<TD>12500 <b>YZZ$</b></TD>
</TR>
</TABLE>
</body>
</html>
OK, então, vamos aplicar o CSS. Adicione isso, dentro da tag <head>:
Código:
<link rel="stylesheet" type="text/css" href="style.css" />
Isso vai ancorar o CSS ao index.html. Mas estamos assumindo que exista, na mesma pasta que o index, esteja um arquivo chamado style.css; e ele não existe. Então que tal fazermos ele? Este é o código:
Código:
body {
   color: lime;
   background-color: black;
}

b {
   color: yellow;
}

i {
   color: blue;
   font-style:normal;
   font-weight:bold;
}
h1,h2 {
   color: green
}
Pronto, olhe como a página ficou bonita! ;)
Importante notar que se pode aplicar CSS a múltiplos seletores usando uma vírgula, como eu fiz com h1 e h2.

-> Próximo tutorial


Última edição por Davichococat em Sáb 17 Mar 2012, 22:53, editado 4 vez(es)
Davichococat
Davichococat

Data de inscrição : 29/12/2011
Reputação : 1
Número de Mensagens : 182
Prêmios : [Tutorial](Parte 5) 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

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

Mensagem por Da Galáxia Qua 08 Fev 2012, 16:46

Parabéns, muito bom tuto.

Mas na cx onde digitamos a http//www bla bla bla, fica o "endereço" do meu arquivo "index", como sera o procedimento para algo como:
https://gmbr.forumeiros.com/t20792-tutorialparte-5-a-magica-da-programacao-de-sites

vlw.
Da Galáxia
Da Galáxia

Data de inscrição : 14/01/2010
Reputação : 1
Número de Mensagens : 348
Prêmios : [Tutorial](Parte 5) 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

Ir para o topo Ir para baixo

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

Mensagem por Davichococat Sáb 17 Mar 2012, 21:44

Isso vai além do que vou explicar.

Basicamente você vai precisar de um "host". Em outras palavras, olhe isso:

000WebHost

Em minha opnião é o melhor host, pra sites menores você provavelmente vai querer algo como o host da Blogspot ou Wordpress. Na minha opnião, prefiro Wordpress, o Blogspot lhe limita demais.

Vale notar que a maioria dos hosts são pagos, e quando não são, seu site será um "sub-domínio". Exemplo: Um site grátis da blogspot seria: "www.hotelintergalatico.blogspot.com". Pagando, provavelmente iriam lhe oferecer um domínio mais personalizado: "www.hotelintergalatico.com".

PS: Não clique nos links, nem sei o que é.

O assunto é melhor explicado em outros lugares da interwebz, então sinta-se livre pra procurar no google Happy

Voltei aos fórums porque me senti culpado de não terminar o tutorial, nunca mais toquei em GML porque aprendi C++, mas vou terminar este tutorial. Abraços.
Davichococat
Davichococat

Data de inscrição : 29/12/2011
Reputação : 1
Número de Mensagens : 182
Prêmios : [Tutorial](Parte 5) 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

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

Mensagem por Conteúdo patrocinado


Conteúdo patrocinado


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