HTML 5

 Hoje a versão do HTML é a 5.

Panela

PASSO 3: ADICIONANDO FONTES

Outra coisa bem fácil de se estilizar são as fontes para os elementos da página. Vamos escolher fonte “Georgia” para os textos, exceto para o cabeçalho h1 ao qual atribuiremos a fonte “Helvetica.”

Você nunca terá como saber quais são as fontes que os visitantes do seu site têm instaladas em suas máquinas, por isso é de boa técnica sempre especificarmos fontes alternativas nas folhas de estilos: se a fonte Georgia não estiver disponível as fontes Times New Roman ou Times irá substituí-la sem grandes prejuízos e ainda mais, se ambas também estiverem indisponíveis o browser do visitante usará uma fonte (with serif) com serifas. Se a fonte Helvetica não estiver instalada, as fontes Geneva, Arial e SunSans-Regular são similares e se nenhuma delas estiver disponível o browser usará uma fonte sem serifas.

PASSO 2: ADICIONANDO CORES

Você muito provavelmente viu algum texto na cor preta sobre um fundo branco, mas isto vai depender de como seu browser está configurado. Uma maneira bem fácil de acresentar estilização à página é adicionar algumas cores a ela. (Mantenha seu browser aberto, vamos usá-lo novamente mais adiante.)

Comecemos com uma folha de estilos incorporada ao arquivo HTML. Mais a frente, separaremos os arquivos HTML e CSS. Separar os arquivos é uma boa técnica, pois isto permite usar a mesma folha de estilos para vários arquivos HTML: você precisará escrever uma só folha de estilos. Por ora vamos colocar nossa CSS no mesmo arquivo HTML.

PASSO 1: ESCREVENDO O HTML

Para acompanhar os passos deste tutorial sugiro que você use a mais simples das ferramentas disponíveis isto é, o Notepad (Windows), TextEdit ( Mac) ou KEdit (KDE) pois servirão perfeitamente aos nossos propósitos. Depois que você tiver dominado os fundamentos básicos, talvez queira utilizar ferramentas mais avançadas ou mesmo programas comerciais tais como, Style Master, Dreamweaver ou GoLive. Mas, para seus primeiros passos com CSS não será interessante utilizar-se de ferramentas com recursos mais sofisticados e avançados sobre os quais você não tenha total conhecimento e domínio.

Não use processadores de textos tais como Microsoft Word ou OpenOffice. Eles geram arquivos que os web browsers não conseguem interpretar. Para códigos HTML e CSS, precisamos de arquivos de texto simples.

Primeiros passos com HTML + CSS

Este breve tutorial destina-se àqueles que ainda não escreveram sua primeira folha de estilos e desejam começar a projetar com CSS.

Aqui você não encontrará explicações avançadas sobre CSS. Este tutoriaI explica como criar um arquivo HTML, um arquivo CSS e como integrá-los de maneira a que funcionem juntos. Após estas noções básicas você poderá ler outros tutoriais e então incrementar os arquivos HTML e CSS aqui criados. Ou ainda, poderá passar a usar um editor adequado para HTML ou CSS, que vai auxiliá-lo a construir sites mais complexos.

Abaixo uma visão da página web que construiremos ao longo deste tutorial: