Logo do Webmuseu, um círculo com WWM inscrito ao centro.

Tutorial de HTML e CSS

Sobre este tutorial

Este tutorial é composto por páginas em HTML e CSS, com o objetivo de ensinar os princípios destas linguagens.
Foi desenvolvido como material de apoio para o e-book Princípios da Web para GLAM: Museus, Bibliotecas, Arquivos e Galerias, escrito por Ana Cecília Rocha Veiga, professora da Escola de Ciência da Informação da UFMG.

Como utilizar este tutorial

Este tutorial é composto por uma página HTML, estilizada em CSS, com os seus códigos explicados por meio de comentários.
Para estudá-lo corretamente você precisará visualizar os comentários ocultos no código. Portanto, siga os passos abaixo:

  1. Baixar os arquivos do tutorial na página do projeto Recursos Web para GLAM.
  2. Clicar duas vezes no arquivo index.html para abri-lo em seu navegador padrão. Outra opção é abrir o navegador, clicar em Abrir e selecionar o arquivo.
    No navegador, será possível observar o resultado da página interpretada e renderizada. Clicando com o botão direito do mouse por sobre
    a página, selecione “ver código-fonte da página”.
  3. Abrir o arquivo, também, em um software no qual você consiga ler o seu código e as explicações do tutorial. Pode ser o Bloco de Notas, porém,
    um editor de textos para programadores permitirá diferenciar o que é cada parte do código, facilitando muito os estudos.
    Duas opções gratuitas e código aberto são:
  4. Se tiver disponível dois monitores, abra os arquivos no navegador em uma tela e no editor de texto em outra.
    Isto facilitará demais a compreensão deste tutorial. A vantagem de dois monitores ligados ao mesmo
    computador é poder realizar alterações no código da página e visualizá-las imediatamente no navegador.

Exemplos

Para acessar os exemplos de forma plena, visualize o código desta página e leia os comentários ocultos.

Glossários

HTML - HyperText Markup Language.
Linguagem de marcação, que confere significado a um texto por meio de anotações.
A primeira linguagem que um web designer precisa aprender.

CSS - Cascading Style Sheets
Linguagem de estilo que confere regras de aparência ao conteúdo das páginas HTML.
A segunda linguagem que um web designer precisa aprender.

JavaScript
Linguagem de programação, que confere interatividade às páginas na Web.
A terceira linguagem que um programador web precisa aprender.
Não é imprescindível para um web designer, mas é aconselhável que se conheça o seu funcionamento.

Citações

Citações curtas são trechos inseridos dentro de um parágrafo, como uma frase dita por alguém.

A verdade é que não é tão difícil aprender a escrever páginas web e a ler o código usado para criá-las; certamente você não tem que ser “programador”. (Jon Duckett)

Imagens

três exemplares do livro HTML & CSS Design and build websites
Livro HTML & CSS do Jon Duckett, um clássico para se aprender estas linguagens.

Vídeos

Outros elementos

Para estudar estes exemplos examine o código da página e confira as tags e os respectivos comentários.