Governo do Estado de Mato Grosso do Sul

1. Visão geral do HTML e Cascating Style Sheets(CSS)

De acordo com o W3C a web é baseada em 3 pilares:

Um esquema de nomes para localização de fontes de informação na Web, esse esquema chama-se URL.
Um protocolo de acesso para acessar estas fontes, hoje o HTTP.
Uma linguagem de Hypertext, para fácil navegação entre as fontes de informação: o HTML.

1.1. O que é HTML?

HTML é uma abreviação de Hypertext Markup Language – Linguagem de Marcação de Hypertext. Resumindo em uma frase: o HTML é uma linguagem que utiliza tags de marcação para descrever páginas web.

1.2. O que são Tags HTML?

São palavras-chaves cercadas por colchetes como <html> estas tags geralmente vem em pares como <p></p> a primeira tag do par é a tag de início, a segunda é a tag final, início e fim também são chamadas de tags de abertura e marcas de fechamento.

Exemplo:

<html>
<body>
<h1>aqui é um título</h1>
<p>aqui é um parágrafo</p>
</body>
</html>

1.3. O objetivo de um web browser

O objetivo de um web browser (como o Internet Explorer ou Firefox) é a leitura de documentos HTML e exibi-las como página web. O navegador não exibe as tags HTML, mas usa as tags para interpretar o conteúdo da página.
Portanto o ideal é dizer ao browser com antecedência quais os padrões ele deve seguir, por exemplo: isso é um HTML 4.0.1. Assim ele saberá exatamente como lidar com a sua página e ela será exibida como esperado.

Para se dizer ao browser como deve ser, utilizamos uma linha no topo de seus arquivos HTML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Esta linha é chamada de definição de documento e neste caso é um HTML.

É muito importante que a codificação de caracteres para qualquer documento XML ou (X)HTML seja claramente indicada, de modo a que os dispositivos do cliente possam facilmente mapear a codificação para Unicode. Esta indicação poderá ser feita das seguintes maneiras:

Usar o parâmetro 'charset' no Content-Type do cabeçalho HTTP. Exemplo:

Content-Type: text/html; charset=utf-8

Para que isto funcione você deverá ter acesso às configurações do servidor ou então servir seu documento via script.

Em XML (inclusive XHTML), usar o pseudo-atributo para codificação na declaração xml no ínicio do documento ou a declaração textual no início da entidade. Exemplo:

<?xml version="1.0" encoding="utf-8" ?>

Mas atenção, existem considerações complementares que devem ser levadas em conta quando você servir XHTML 1.0 como HTML. Para HTML ou XHTML servidos como HTML, você deve usar sempre a tag <meta> dentro da seção <head> do documento. Exemplo:

Em XHTML, você deverá colocar uma barra "/" no final:

Para uma discussão sobre qual a maneira mais apropriada para um documento (X)HTML consulte um tutorial Character sets & encodings in XHTML, HTML and CSS.
Os exemplos acima mostraram declarações para codificação de conteúdos em UTF-8. Esta parece ser a melhor escolha para a maioria dos propósitos dos documentos, contudo não é a única possibilidade.
Se você não for usar UTF-8 deverá substituir o texto utf-8 nos exemplos mostrados acima pelo nome da codificação que você pretende usar. Para informações sobre os nomes das codificações consulte a lista dos nomes de codificação de caracteres registrados pelo IANA. Na prática algumas poucas codificações são preferidas, tais como: ISO-8859-1 (Latin-1), US-ASCII, UTF-16, e outras constantes da série ISO-8859, iso-2022-jp, euc-kr, e assim por diante.

1.4. Cascating Style Sheets(CSS)

É uma linguagem de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML e XML. Seu principal benefício é prover a separação entre o formato e o conteúdo de um documento. Ao invés de colocar a formatação dentro do documento, o desenvolvedor cria um link para um arquivo CSS, assim quando for necessário alterar a aparência do front-end de uma aplicação web, site ou portal basta, portanto, modificar apenas um arquivo.
Para se utilizar CSS é necessário a utilização de um elemento chamado <style>. O CSS utiliza uma sintaxe totalmente diferente do HTML.

Exemplo:

Body {
background-color: #d2b48c; - define o fundo como dourado.
margin-left: 20%; - define a margem esquerda.
margin-right: 20%; - define a margem direta.
border: 1px dotted gray; - define a borda pontilhada e cinza em torno do corpo.
padding: 10px 10px 10px 10px; - cria enchimento em torno do corpo da página.
font-family: sans-serif; - define a fonte a ser usada no texto.
}