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

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

[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

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.

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.

por Conteúdo patrocinado

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

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

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

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

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