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

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

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

Mensagem por Davichococat em 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! ).
  • 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 Sab 17 Mar 2012, 22:53, editado 4 vez(es)

Davichococat

Número de Mensagens : 182
Data de inscrição : 29/12/2011
Reputação : 1
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 0
   : 0
   : 0

http://www.google.com

Voltar ao Topo Ir em baixo

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

Mensagem por Da Galáxia em 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:
http://gmbr.forumeiros.com/t20792-tutorialparte-5-a-magica-da-programacao-de-sites

vlw.

Da Galáxia

Número de Mensagens : 348
Data de inscrição : 14/01/2010
Reputação : 1
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 0
   : 0
   : 0

Voltar ao Topo Ir em baixo

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

Mensagem por Davichococat em Sab 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

Número de Mensagens : 182
Data de inscrição : 29/12/2011
Reputação : 1
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 0
   : 0
   : 0

http://www.google.com

Voltar ao Topo Ir em baixo

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

Mensagem por Conteúdo patrocinado Hoje à(s) 16:29


Conteúdo patrocinado


Voltar ao Topo Ir em baixo

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum