Entrar
Últimos assuntos
» player não consegue andarpor 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
GMBR :: Outros assuntos :: Discussões
Página 1 de 1
[Tutorial](Parte 5) A mágica da programação de sites
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
}
- 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>
- Código:
<link rel="stylesheet" type="text/css" href="style.css" />
- Código:
body {
color: lime;
background-color: black;
}
b {
color: yellow;
}
i {
color: blue;
font-style:normal;
font-weight:bold;
}
h1,h2 {
color: green
}
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)
Re: [Tutorial](Parte 5) A mágica da programação de sites
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.
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- Data de inscrição : 14/01/2010
Reputação : 1
Número de Mensagens : 348
Prêmios :
x 0 x 0 x 0
x 0 x 0 x 0
x 0 x 0 x 0
Re: [Tutorial](Parte 5) A mágica da programação de sites
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
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.
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
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.
Tópicos semelhantes
» [Tutorial](Parte 4) A mágica da programação de sites
» [Inglês] Termos comuns em programação (parte 1)
» [TUTORIAL] Programação GML 01 - Funções / Scripts
» [Tutorial] I.A - 1ª parte
» [Tutorial] Introdução a GML - Parte 1
» [Inglês] Termos comuns em programação (parte 1)
» [TUTORIAL] Programação GML 01 - Funções / Scripts
» [Tutorial] I.A - 1ª parte
» [Tutorial] Introdução a GML - Parte 1
GMBR :: Outros assuntos :: Discussões
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos