HTML e CSS – O princípio para o desenvolvimento de (web) sites

Como eu disse no artigo “Linguagens de programação dinâmicas e estáticas, quais as diferenças?“, existem linguagens utilizadas no desenvolvimento de sites que são dinâmicas e estáticas (Caso do HTML).

Como o HTML é processado em qualquer navegador atual (Firefox, Internet Explorer, Opera, Chrome e afins), não necessitando instalar um servidor HTTP ou contratar um serviço de hospedagem (será tratado mais a frente), e sendo uma linguagem ainda muito utilizada, mesmo em sites com conteúdo dinâmico, o HTML será a primeira linguagem a ser aprendida, junto ao CSS, a qual não é exatamente uma linguagem de programação, mas sim uma linguagem utilizada para definir a parte visual de uma página web.

O HTML cria…

O código HTML (Ou a linguagem HTML) cria e define determinadas propriedades de um texto ou qualquer elemento dentro de uma página, por exemplo um parágrafo, uma quebra de linha, uma tabela, uma imagem ou um link. Cada elemento dentro de uma página possui um código HTML, e a interpretação deste código pode ter um resultado diferente conforme o navegador.

Além de criar elementos, o HTML também é responsável por definir as propriedades do mesmo. Para criarmos uma tabela com a largura de 100px por exemplo, devemos adicionar certos atributos ao código responsável por criar tal tabela, caso estes atributos não sejam definidos, o navegador utilizará um valor padrão da linguagem para definir o tamanho do elemento. No caso de uma tabela, o tamanho padrão é 100% do tamanho da janela, ou seja, se a janela do navegador for redimensionada, a tabela também será, assim como todo o conteúdo dentro dela.

O caso acima teria um resultado tanto visual não muito agradável e deve ser evitado, mas isto será abordado em outro artigo.

O HTML possui atributos que podem definir tamanho e cores dos elementos, assim como o CSS, porém o CSS pode facilitar o trabalho de criação e alteração posterior do visual de uma página. Para um melhor aprendizado, nos artigos seguintes iremos trabalhar inicialmente com as duas formas de melhorar o visual dos elementos, e conforme a necessidade e vantagens, trabalharemos apenas com CSS.

…e o CSS melhora

O CSS (Cascading Style Sheets) é uma linguagem de tratamento visual de elementos HTML, com a qual podemos definir cores e imagens do fundo de uma página HTML ou tabela, definir cores, tamanhos e efeitos para determinadas partes de um texto ou um cabeçalho, de forma que posteriormente podemos mudar por exemplo a cor de diversos elementos em diversas páginas, editando somente um único arquivo CSS, ao invés de editar arquivo por arquivo HTML e mudarmos cada elemento manualmente.

Com CSS podemos definir a posição de um elemento com base nos eixos X e Y, o que é impossível com HTML, onde teríamos mais trabalho para definir a posição de um objeto, precisando criar uma ou mais tabelas e colocando tal objeto dentro de tais tabelas, por exemplo.

Com tal recurso, o CSS permitiu a criação do padrão Tableless, onde é possível posicionar diversos elementos de uma página sem a utilização de diversas tabelas e células, o que permite um código mais limpo e de carregamento mais rápido.

Leave a Reply