Como criar sites: HTML, CSS e o Desenvolvimento Web

Como criar um siteAté 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.

Curso de HTML e CSS - Onde estudar e aprender a criar sites

Assim como os projetos C Progressivo, Java Progressivo e Assembly Progressivo, decidimos iniciar os cursos nas áreas de desenvolvimento web.
Embora pudéssemos optar por uma linguagem de programação, que é o propósito e foco de nosso portal, como JavaScript, PHP, Perl, Ruby ou outras, decidimos começar bem do básico, do começo mesmo.

Assim, criamos o Curso HTML Progressivowww.htmlprogressivo.net/
O objetivo deste site é montar uma apostila online sobre HTML e CSS.

Como são áreas que mudam muito, vamos tentar ensinar o máximo possível sobre HTML e CSS.
Iniciamos com HTML 4.01, o antigo HTML, que embora tenham muitos códigos já em desuso, ainda predomina na internet. Entendemos que é importante estudar o básico, fazer um site realmente na unha, no bloco de notas, para entender como as coisas funcionam realmente.

Em seguida, ensinamos o CSS 3, que já é amplamente usado na grande rede, seguido do novo HTML 5, que tem a premissa de trazer grandes mudanças para a internet, principalmente em termos de mídia.
Espera-se, que em pouco tempo, o HTML 5 já esteja dominando os códigos de websites.

Certificado de HTML, CSS, Webdesign e PHP

Para aqueles que desejam obter uma certificação em cursos de HTML e CSS pra trabalharem como Webmasters (profissionais que criam sites), indicamos os seguintes cursos online, que possuem material didático próprio, vídeo-aulas, exercícios, professores para tirarem dúvidas e emitem certificados de conclusão de curso:

Curso de HTML com certificado
Curso de HTML5 com certificado
Curso de Web Master com certificado

Curso de Web Design com certificado
Curso de Web Developer com certificado

Curso de PHP com certificado
Curso Anti-Hacker para desenvolvedores PHP com certificado
Curso de Criação e Utilização de APIs em PHP com certificado

Livro Use a Cabeça! HTML com CSS & XHTML

Como criar sites - Curso de HTML e CSSAssim como fazemos nos outros cursos, enfatizamos a importância de se ter um bom livro de programação, seja lá qual seja a linguagem ou tecnologia usada, pois é sempre essencial ter uma boa fonte de consulta.


Para os que desejam aprender usando um livro, recomendamos o livro HTML com CSS & XHTML, da  famosa Coleção Use a Cabeça..
É um livro totalmente voltado para iniciantes, que nunca tiveram qualquer tipo de contato com HTML, desenvolvimento web ou qualquer tipo de programação.

No site HTML Progressivo há um review bem completo sobre o livro, dando os detalhes específicos do material:
http://www.htmlprogressivo.net/2013/08/Review-do-livro-USE-A-CABECA-HTML-com-CSS-e-XHTML-e-bom.html

6 comentários:

Anônimo disse...

vou começar o curso aqui ;)

Roberto Augusto disse...

Olá. Muito boas informações.

Acho interessante mencionar também o JavaScript que é muito utilizado principalmente para cirar pequenas animações, menus, botões e etc.

Anônimo disse...

Conteúdo show de bola ;)

marcio disse...

eu estava procurando informações sobre este mundo de programação e essas coisas e achei o seu blog, sou totalmente iniciante e não sei nada mesmo sabe, obrigado por compartilhar este conteúdo vai ser muito útil para eu sair do zero pois não entendo nada mesmo e queria muito aprender

JOÃO AGUIAR disse...

HOJE 27 DE SETEMBRO DE 2018, TOMEI A DECISÃO DE TORNAR MEU SONHO EM REALIDADE, OU SEJA " SABER CONSTRUIR UM SITE " POR MAIS SIMPLES QUE SEJA. SÓ NÃO CONSEGUI TER CERTEZA DO PRIMEIRO PASSO NA REALIDADE. DESCULPEM SE NÃO ENTENDI. COMEÇO REALMENTE COMO??? SOU TOTALMENTE INICIANTE.
AGRADEÇO SE TIVER UMA RESPOSTA BEM OBJETIVA.
ABS

Marcelo disse...

Conteúdo incrível, parabéns.

Veja também: