Gostou do nosso conteúdo? Te ajudou?
Nos ajude também! Faça um PIX, de qualquer valor:
programacao.progressiva@gmail.com

HTML e CSS: separando conteúdo da exibição

HTML, CSS, PHP, JavaScript, Java, Flash, CGI/Perl, Python...com tantos nomes e tecnologias usadas em sites, fica confuso saber o que é e para que serve cada um desses nomes esquisitos.

Porém, dentre todas as tecnologias e linguagens de programação, HTML é a ferramenta mais necessária e básica.
Pra trabalhar em PHP, é necessário ter conhecimentos de HTML.
Para colocar códigos da linguagem JavaScript é um site, é necessário saber HTML.

E é sobre essa importância e possibilidades que iremos falar nesse tutorial de HTML.

Caso deseje transformar seus estudos de HTML em uma profissão para começar a ganhar dinheiro criando sites, sugerimos que faça o curso e obtenha seu certificado de Webmaster (tudo online):


Curso de HTML e CSS com certificado
Obter meu certificado!

Como funciona a dupla HTML e CSS

Embora já tenhamos falado sobre o que é HTML, XHTML e suas definições, sabemos que para os iniciantes ainda é um pouco confuso essa sopa de letrinhas. Mas o HTML Progressivo não vai deixar seus estudante confusos. Afinal, desejamos formar verdadeiros Mestres da Web, Webmasters.

Podemos dividir, basicamente, uma página em dois setores:
 - o conteúdo
 - a maneira que o conteúdo é exibido

Conteúdo qualquer um pode criar (de preferência, pessoas que saibam do que estão falando).
O conteúdo, em um site de notícias, como o da globo.com é a informação, o texto, os dados, fotos e outros dados.
Escritores, jornalistas e professores, por exemplo, se importam com o conteúdo, com a capacidade de escrever e criar material de qualidade, porém não são profissionais no que tange ao designe, ou seja, geralmente não se preocupam sobre a maneira que seu material é exibido.

Agora imagine um site centenas de links, como o site da UOL ou do Terra, com textos e imagens exibidos de maneira desorganizada.
Ok, organiza, imagine que cada link ficasse em uma linha: ainda sim seria uma tremenda bagunça.
Entre: http://www.uol.com.br/

Veja como são as seções, tem estruturas separadas para as notícias principais, as de esporte, político, uns espaços com fotos e citações. Note a organização.
Duvido você entrar em sites de notícias se eles não exibissem as coisas de maneira organizada.
Isso é feito com HTML.

Note que o conteúdo não importa. Você pode pegar todo o conteúdo e colocar em um arquivo do Word, por exemplo, mas para achar uma determinada informação seria dificílimo.
Essa é uma das utilidades do HTML: ele organiza o conteúdo da internet.
Com HTML decidimos a maneira que a Internet é vista pelo usuário.

A vantagem do HTML é pode trabalhar com essas duas coisas separadamente.
Por exemplo, o site da Globo.com tem uma estrutura de exibição diferente da do site do Terra, por exemplo.
Esse padrão já está definido, totalmente programado e estruturada (com ajuda de HTML, CSS e outros recurso).
Depois, basta o Webmaster inserir o conteúdo e subir a página para o servidor, e está no ar.

Poderíamos pegar esse mesmo conteúdo e botar no modelo do site do Terra, por exemplo. Fazer o mesmo procedimento, e veríamos o mesmo conteúdo em uma página da Globo e na do Terra.
Embora seja o mesmo texto, ele estaria sendo exibido de maneira diferente: fonte diferente, propagandas no meio do texto, links diferentes, formatação diferente do texto etc.

Essa distinção e possibilidade de se trabalhar, separadamente com o conteúdo e a exibição, é um dos pontos fortes do HTML.

CSS: dando estilo ao seu HTML

CSS significa Cascading Style Sheets, que à rigor é uma espécie de folha (sheet), com informações à respeito do estilo (style) de suas páginas.

Se você acessa a Internet há mais de 10 anos, deve ter notado a drástica mudança dos tipos de sites.
Antes, a gigantesca maioria das páginas eram estáticas, com textos e poucas fotos (e essas poucas, de baixíssima qualidade).
Tutorial de CSS
Exemplo de código CSS

Hoje em dia, as páginas estão com música, vídeos, animações, interagem com o usuário, oferecem serviços onlines (bancos, compras online etc), e até mesmo jogos. Isso foi evoluindo graças, principalmente, a grandes linguagens de programação, como JavaScript, PHP e Java.

Como HTML continua a ser a base da exibição de páginas de Internet, o HTML precisou evoluir também. E é aí que vem o CSS.
Podemos ver o CSS como um arquivo externo, onde as páginas de HTML consultam esses arquivos para saber qual o estilo e formato a página deve ser exibida.

Pegue o exemplo dos portais da Globo, Terra e UOL.
Imagina se você tiver que criar todo o código HTML para todas as páginas desses portais? Seria um trabalho imenso.
Mas, para facilitar, se cria um arquivo com os estilos das páginas.
Em seguida, criamos o HTML com o conteúdo, e o estilo de exibição das páginas estará nesse arquivo CSS, pois o estilo das páginas é o mesmo. Isso mesmo, com um único arquivo e códigos CSS, podemos controlar a maneira como milhões de páginas serão exibidas.

Um blog, como o Blogger ou Wordpress possui vários templates e estilos.
Porém, os blogueiros não se preocupam com o HTML ou layout das páginas. Isso já está pré-definido nos arquivos CSS. Os blocos, rodapés, cabeçalhos e malditas janelas pop-ups já estão pré-definidas, esperando apenas o conteúdo que o blogueiro vai inserir.
Depois, o HTML exibe tudo, e para saber o estilo de exibição ele consulta o CSS. E o que você fez?
Apenas criou o conteúdo. Tem gente que vive de criar e vender templates, layouts etc.

Porém, o CSS vai mais além, pois a tecnologia continuou, e continua, indo além.
Se você tem e usar internet através de celular ou dispositivos móveis, vai notar que alguns sites tem estilo e formatos de exibições diferentes, dependendo se você consulta a página da Web de um computador, tablet ou celular.

Como o CSS vai 'dominar' e especificar tudo à respeito dos estilos, ele serve para detectar a maneira que o usuário está acessando o site, e vai exibir um formato de página diferente para cada tipo de dispositivo.
Ora, style de exibição do site é diferente para cada um desses dispositivos.

Com o HTML, podemos dividir as informações em blocos, como blocos de assuntos diferentes, em um site de notícias. Mas o CSS que vai dizer "Hei, ele está acessando de um PC com tela enorme. Pode colocar vários blocos um ao lado do outro" ou "Opa! Ele está em um celular! Mostre um bloco abaixo do outro, pois a tela é pequena!".
Porém, o conteúdo continua o mesmo.

Potente, essa dupla HTML + CSS, não?

Um comentário:

Jairo Costa disse...

Muito bem explicado, fica fácil entender as diferentes funções de cada um.

Tutoriais de HTML e CSS