Como criar sites: HTML, CSS e o Desenvolvimento Web
Até o momento, em nossa seção sobre Como começar a programar, falamos sobre diversas linguagens de programação voltadas para o desenvolvimento desktop, como C, C++, Java e C#.
Agora vamos mostrar outro tipo de desenvolvimento, voltado para a internet.
É o desenvolvimento Web, cuja base é a famosa linguagem de marcação HTML.
O desenvolvimento Web
Pode parecer um pouco estranho ouvir falar sobre HTML em um site voltado para a programação, pois ao contrário do que muitos pensam, HTML não é linguagem de programação.
Mas sua importância é tanta, que o estudo do HTML é obrigatório para todos desenvolvedores Web.
Como já dissemos ao longo de diversos artigos de nosso site, o computador foi feito para computar.
Ou seja, contar, realizar cálculos, fazer operações matemáticas de uma maneira bem veloz.
E para superar alguns segundos de cálculos de um moderno computador, seria necessário todas as pessoas que já viveram fizessem contas durante décadas em calculadoras.
Ok, esse foi o primeiro propósito da computação.
Mas logo se viu que só fazer as contas não era muito útil. Essa informação precisava ser compartilhada, enviada para outros locais.
E aí que entrou a internet. E estas são as duas principais utilidades de um computador: fazer cálculos e compartilhar essas informações.
Até meados da década de 90, praticamente só as linguagens para desktop reinavam.
E o motivo era claro: pouquíssimas pessoas usavam internet, e em décadas anteriores somente o governo e militares usavam a grande rede.
E hoje a internet é…bom, nem precisa falar da importância dela.
O principal motivo de venda de computadores é um só: acessar a internet, trocar informações, se comunicar.
Não é por menos que o desenvolvimento Web se tornou tão importante, e muitas pessoas simplesmente só querem saber de criar aplicações para a internet: redes sociais, jogos online, programas de troca de mensagens, sites de vendas etc etc.
Mas antes de entrarmos mais em detalhes sobre as linguagens de programação usadas para criar sistemas para internet (como JavaScript e PHP), precisamos aprender a base, o mais essencial, o pontapé inicial que muitas vezes passa despercebido: o HTML.
HTML – O que é uma linguagem de marcação
Como dissemos logo de cara, HTML não é uma linguagem de programação, é uma linguagem de marcação, como seu próprio nome diz (HTML é HyperText Markup Language), e foi inventada na época em que os cientistas e militares estavam começando a trocar informações sobre os cálculos computacionais.
De uma maneira bem direta, a linguagem de marcação é um conjunto de regras e códigos para definir como um conteúdo da web vai ser definido, como uma página será formatada e exibida. E o que raios isso significa? Que marcação é essa?
Imagine um livro. Ele tem sua capa, suas cores, títulos, sumário, quando o capítulo termina numa página, o próximo capítulo só inicia em outra página, existe um espaçamento entre um parágrafo e outro, as palavras estrangeiras são em itálico, citações são feitas entre aspas etc etc.
Isto são regras de formatação, um conjunto de modelos, ordens, para que o texto seja exibido.
Por exemplo: podeRíaMos esCreverAssim,oTextoÉoMesmo,maS_a-Organização-Éhorrível.
O HTML não vai se importar com o conteúdo, com o texto que escrevi, e sim sua organização.
Ele que diz quando vai existir um espaço, um parágrafo, um título com letra maior, com cores diferentes, onde uma figura vai ficar na página, ele vai dizer que o menu fica ao lado e o cabeçalho em cima etc.
É a marcação, a formatação do conteúdo.
Imagine esta página sem título, sem espaçamento, tudo com o mesmo tamanho de fonte, cor, a figura por cima do texto ou depois dele (quando deveria ficar ao lado, para ilustrar).
Esse é o trabalho do HTML, cuidar da organização, da exibição do conteúdo.
E não importa se seu conteúdo é uma rede social, um artigo científico, um e-mail para seu chefe ou as imagens e textos de um jogo online: toda informação precisa ser bem organizada, ser exibida de uma maneira esteticamente agradável, numa ordem que faça sentido.
Em outras palavras: HTML é importante para tudo, em termos de criação de sites.
CSS – Dando estilo ao conteúdo
Até há alguns anos atrás, em toda página que você criava, tinha que decidir o tamanho do título de cada página, a cor das fontes, a figura do background, o espaçamento, tamanho das figuras e tudo que se refere ao estilo de um página.
Imagine um portal, com a globo.com, que tem milhões de páginas.
Isso era um trabalho absurdo, medonho. E quem criava o texto, tinha que se preocupar com a organização e o estilo.
Mas, para sua felicidade, hoje em dia usamos um troço chamado CSS (Cascade Sheet Style), que nada mais é que uma série de regras que definem um estilo.
Assim, criamos um arquivo ditando as regras: o espaçamento entre um parágrafo e outro é tal ; a cor do título é tal ; o tamanho da fonte do título é essa, e a do texto aquela.
Ah, é uma imagem? Então seu tamanho é esse.
É um subtítulo? Então a cor e tamanho da fonte será esta.
A seção é a de moda? Então a cor é rosa.
Essa página vai ficar na seção de esporte? Então use um tema com cor verde.
Ou seja, definimos uma folha de estilos, uma folha com um conjunto de regras.
E em vez de, em cada página, definir esses estilos, a página simplesmente vai consultar a folha de estilo CSS:
“Hey CSS, esse título, é que cor? E o tamanho? E o espaçamento?
Onde boto essa figura?”
Assim você pode ter bilhões de páginas, mas o estilo delas quem vai definir é um único arquivo.
Se todos seus títulos são em azul e você quiser mudar para vermelho, vai nessa folha de estilos e altera somente lá, pois é dessa fonte que todas as páginas vão consultar para saber que cor usar nos títulos.
Daí, você altera só uma vez em um lugar, e esse efeito se espalha por todo o seu site.
Bacana, esse CSS não?
Não é à toa que só vemos cursos e tutoriais como “HTML & CSS”, essa dupla é inseparável hoje em dia.
Outro fato bacana é que você pode ter alguém só pra escrever o conteúdo de texto de um site (um jornalista, por exemplo), contratar um Webdesigner para definir a parte gráfica e estética do site, e um desenvolvedor Web para trabalhar somente com o PHP, HTML e JavaScript.
Ou seja, o cara que cria o texto não tem que se estressar com estilo e detalhes estéticos, quem criar a folha de estilos CSS é que faz isso.
O programador PHP também não vai se importar com a criação do conteúdo, só com o HTML, JavaScript e PHP. Ele programa “essa menu fica do lado, esses links aqui e o conteúdo do artigo aqui, o que vai ter nesse artigo ou o design do site não me importa”
HTML, XHTML, CSS, HTML5 … – O que estudar?
Diferente de algumas linguagens, como C e Assembly, que são basicamente as mesmas de décadas atrás, o desenvolvimento Web é algo bem dinâmico.
Alguns anos atrás usava-se somente o que chamamos de HTML 4.01, com suas regras e funcionalidades. Se usou internet na década de 90 deve se lembrar que os sites serviam exclusivamente para exibir conteúdo, em sua maioria texto.
Quando tinha uma imagem, ela abria bem devagar e deixava a página bem pesada.
Hoje, com boas conexões de internet, as coisas mudaram bastante.
O usuário está bem mais participativo, ele não somente lê, como envia informações, conversa, troca arquivos, ao passo que escuta uma rádio online ou vê um vídeo em alta definição no Youtube.
A nova tendência é o uso do HTML5 e CSS 3.
Isso agora, sabe-se lá o que vai acontecer na internet (como a febre que existiu do ICQ, MSN, Fóruns, Redes Sociais etc). O fato é que as coisas mudam bastante, e o que você estudou 5 anos atrás pode estar bem atrasado hoje em dia.
Assim, realmente fica complicado decidir o que estudar. Mas há um fato: você deve estudar várias coisas, várias tecnologias, estar sempre atualizado e se informando sobre o que há de novo.
