Tutorial HTML + CSS - Construindo

o primeiro website
Ciência da Computação – Tópicos Especiais em Programação
(Interface Homem-Computador)

25/4/2011
Universidade Federal de Alagoas – Campus Arapiraca
Matheus D’Eça Torquato de Melo

[Digite texto] Página 1

Tutorial HTML + CSS - Construindo o primeiro website

Sumário
Apresentação ........................................................................................................................ 3
HTML .................................................................................................................................... 3
CSS ........................................................................................................................................ 3
Construindo o primeiro site utilizando HTML e CSS ............................................................... 4
Pré-requisitos .................................................................................................................... 4
Escrevendo o código HTML ............................................................................................... 4
Adicionando cores ............................................................................................................. 5
Adicionando fontes ........................................................................................................... 7
Adicionando menu de navegação ...................................................................................... 8
Estilizando links ................................................................................................................. 9
Acrescentado uma linha horizontal ................................................................................. 11
Separando os estilos do conteúdo ................................................................................... 12
Conclusão ........................................................................................................................ 13
Bibliografia ...................................................................................................................... 14

Matheus D’Eça Torquato de Melo – CC UFAL Arapiraca – IHC Página 2

Tutorial HTML + CSS - Construindo o primeiro website

Apresentação
Este tutorial visa basicamente mostrar alguns conceitos básicos pertinentes a HTML
e CSS de modo que possamos criar um website simples utilizando ambas as tecnologias.
Indicado para aqueles que ainda não desenvolveram utilizando essas duas tecnologias
integradas. Sendo assim o tutorial se baseia numa prática de criação de um website
utilizando HTML e CSS. Inicialmente iremos entender no que consiste tanto o HTML, quanto
o CSS.

HTML
HTML é um acrônimo para a expressão inglesa HyperText Markup Language, que
significa Linguagem de Marcação de Hipertexto1. Consiste numa linguagem de marcação
utilizada para produzir websites. Arquivos HTML podem ser interpretados por navegadores
web, como Mozilla Firefox, Opera, etc.

Todo arquivo HTML é baseado em tags (etiquetas), que são elementos separados
pelos símbolos < e >. A maioria das tags possui uma tag correspondente de fechamento, isso
acontece porque, por ser uma linguagem de marcação, cada tag só deve surtir efeito sobre
uma determinada região do documento. Existem tags para os mais variados propósitos, a
tag <title> por exemplo, serve para definir o título do documento.

CSS
CSS (Cascading Style Sheets) é uma linguagem utilizada para definir estilos
associados à apresentação de documentos escritos em uma linguagem de marcação, como
HTML ou XML. Com o CSS pode-se separar o arquivo contendo os estilos a serem utilizados,
do próprio conteúdo dos arquivos HTML ou XML. Ao invés de colocar a formatação dentro
do documento, o desenvolvedor cria um link (ligação) para uma página que contém os
estilos. Quando quiser alterar a aparência basta portanto modificar apenas um arquivo.

Tendo conhecido um pouco sobre HTML e CSS, vamos agora começar a prática da
criação do nosso website.

1
Hipertexto é o termo que remete a um texto em formato digital, ao qual se agregam outros conjuntos de
informação na forma de blocos de textos, palavras, imagens ou sons, cujo acesso se dá através de referências
específicas denominadas hiperlinks, ou simplesmente links

Matheus D’Eça Torquato de Melo – CC UFAL Arapiraca – IHC Página 3

Tutorial HTML + CSS - Construindo o primeiro website

Construindo o primeiro site utilizando HTML e CSS

Pré-requisitos
Antes de começar a desenvolver nosso primeiro site deveremos ter dois softwares
básicos instalados. Um editor de texto simples como o notepad (Bloco de Notas) ou o gedit.
E um navegador Web, os mais populares são Microsoft Internet Explorer, Mozilla Firefox,
Opera, Safari e Google Chrome. Certifiquemos se tais softwares estão realmente instalados
e podemos prosseguir.

Escrevendo o código HTML

Abra seu editor de texto e digite o seguinte código:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>
<head>
<title>Minha primeira página CSS</title>
</head>

<body>

<!-- Menu de navegacao do site -->

<ul class="navbar">
<li><a href="index.html">Home</a>
<li><a href="planejamento.html">Planejamento</a>
<li><a href="atividades.html">Atividades</a>
<li><a href="links.html">Links</a>
</ul>

<!-- Conteúdo -->

<h1>Minha primeira página CSS</h1>

<p>Bem vindos!

<p>Conteúdo 1

<p>Conteúdo 2

<!-- Data e assinatura -->

<address>Construída em 25 de abril de 2011 <br>
por mim mesmo.</address>

</body>
</html>

Matheus D’Eça Torquato de Melo – CC UFAL Arapiraca – IHC Página 4

Tutorial HTML + CSS - Construindo o primeiro website

A primeira do arquivo HTML acima informa ao navegador Web que tipo de HTML,
(DOCTYPE significa tipo de documento). Neste caso, é versão do HTML 4.01. O documento
está contido dentro da tags <html> e </ html>. Entre <head> e </ head>, também conhecido
como cabeçalho, há espaço para vários tipos de informação que não são exibidas na tela.

A tag <body> indica o corpo do texto do arquivo HTML é onde o próprio texto do
documento vai. Em princípio, tudo lá dentro vai ser exibido. Se quisermos utilizar
comentários no nosso código é necessário colocá-los entre as seguintes cadeias de
caracteres <!- e -->, assim o texto será ignorado pelo navegador. A tag <ul> introduz uma
lista não ordenada, isto é, uma lista em que os itens não são numerados. O <li> é um "item
da lista." O <p> é um "parágrafo". E o <a> é uma "âncora", que é o que cria um hiperlink.
Existem ainda inúmeras outras tags, que criam desde uma linha simples até uma tabela.

Depois de ter digitado tal código no editor de texto, devemos salvar o arquivo com o
nome primeiroSite.html, ou qualquer outro nome, desde que o arquivo possua
extensão .html. Feito isso é só abrir o arquivo utilizando o navegador web. Assim,
poderemos visualizar como nosso site está por enquanto.

Figura 1: Site sem CSS

Adicionando cores
Inicialmente iremos colocar os estilos (CSS) dentro do próprio arquivo .html,
posteriormente separaremos os estilos e o conteúdo. Separar os estilos do conteúdo é uma
boa prática, pois permite que mudemos todo o estilo do site modificando apenas um
arquivo, e ainda permite que usar o mesmo estilo em várias páginas HTML. Para colocar os
estilos precisamos iniciar uma tag <style> no nosso arquivo HTML. Devemos colocar o

Matheus D’Eça Torquato de Melo – CC UFAL Arapiraca – IHC Página 5

Tutorial HTML + CSS - Construindo o primeiro website

estilo no campo <head> do nosso arquivo HTML. Sendo assim modifique o campo <head>
do arquivo HTML, para que ele fique assim:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>
<head>
<title>Minha primeira página CSS</title>
<style type="text/css">
body {
color: purple;
background-color: #d8da3d }
</style>

</head>

<body>
…

As linhas que devem ser inseridas estão destacadas em negrito. A primeira linha
informa que trata-se de uma folha de estilos escrita na linguagem de estilos CSS (“text/css”).
A segunda linha mostra que os estilos que serão indicados devem ser aplicados no campo
<body> do nosso arquivo. A terceira determina que os textos serão em cor purple (púrpura)
e a linha a seguir coloca a cor #d8da3d (amarela esverdeada) para o fundo da página.

Em CSS as folhas de estilos são constituídas de regras. Cada regra é composta por
três elementos: selector, propriedade e valor.

 Selector (no exemplo: “body”), informa ao navegador qual é o campo do

arquivo ao qual a regra será aplicada;
 Propriedade (no exemplo, 'color' e 'background-color', duas propriedades
distintas), que especifica qual é a característica do layout que está sendo
estilizada, color é a cor da fonte, e 'background-color' é a cor do plano de
fundo do nosso website.;
 Valor ('purple' e '#d8da3d'), que fornece o valor da propriedade, no exemplo,
diz que a cor da fonte vai ser púrpura e a cor do fundo vai ser amarela
esverdeada.

No caso como as regras se aplicam ao mesmo campo elas foram combinadas, mas se
quiséssemos poderíamos colocar as duas em separado.

body { color: purple }

body { background-color: #d8da3d }

Com isso feito vamos conferir como está ficando nossa página, para fazer isso basta
recarregar o arquivo HTML no navegador, depois de ter feito e salvo as alterações indicadas
acima. A página deve estar da seguinte forma.

Matheus D’Eça Torquato de Melo – CC UFAL Arapiraca – IHC Página 6

Tutorial HTML + CSS - Construindo o primeiro website

Figura 2: Site com primeiro estilo CSS

Adicionando fontes
Outro aspecto que devemos estilizar são as fontes utilizadas em nosso site, a
propósito de exemplo escolheremos a fonte “Georgia” para os textos e a fonte “Helvetica”
para títulos dentro da tag <h1>. É inviável saber quais fontes o usuário do site vai possuir
instaladas na sua máquina, por isso é importante definir uma “fonte reserva”. No exemplo
abaixo propomos a fonte Times New Roman como substituta e ainda mais, se ambas
também estiverem indisponíveis o browser do visitante usará uma fonte com serifas2. 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.

No nosso arquivo acrescentaremos as seguintes linhas nos locais indicados:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>
<head>
<title>Minha primeira página CSS</title>
<style type="text/css">
body {
font-family: Georgia, "Times New Roman",
Times, serif;

color: purple;
background-color: #d8da3d }
h1 {

2
Serifa - Traços que fazem o acabamento de uma letra.

Matheus D’Eça Torquato de Melo – CC UFAL Arapiraca – IHC Página 7

Tutorial HTML + CSS - Construindo o primeiro website

font-family: Helvetica, Geneva, Arial,

SunSans-Regular, sans-serif }
</style>
</head>

<body>
…

Feito isso podemos recarregar nossa página.

Figura 3: Adicionando fontes

Adicionando menu de navegação

A lista que está contida no topo da página é destinada a constituir o menu de
navegação. Web sites em geral tem uma barra de navegação disposta horizontalmente no
topo ou um menu na lateral da página, e nossa página também terá seu menu de navegação.
Nosso menu já esta no código HTML da página. Ele é a lista <ul> no topo. Como estamos
trabalhando num tutorial simples, os links inseridos na lista não levam a lugar algum. Agora
precisamos mover a lista para a esquerda e o restante do texto para a direita com a
finalidade de abrir espaço para a lista. As propriedades CSS que usaremos para isto são
'padding-left' (para mover o texto para a direita) e 'position', 'left' e 'top' (para posicionar o
menu).

No editor de texto adicione mais estas linhas no arquivo HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>

<head>
<title>Minha primeira página CSS</title>
<style type="text/css">

Matheus D’Eça Torquato de Melo – CC UFAL Arapiraca – IHC Página 8

Tutorial HTML + CSS - Construindo o primeiro website

body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
ul.navbar {
position: absolute;
top: 2em;
left: 1em;
width: 9em }

h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
</style>
</head>

<body>
…
O que fizemos com isso foi simplesmente empurrar o texto contido no <body> para a
direita e posicionarmos a barra de navegação no canto superior esquerdo da nossa página.
A regra 'position: absolute', dentro de ul.navbar determina que a lista seja posicionada na
página independentemente de qualquer texto que venha antes ou depois no código HTML e
as diretivas 'left' e 'top' indicam qual a posição será ocupada pela lista.

A página deve ficar da seguinte forma.

Figura 4: Site com menu de navegação

Nosso próximo passo é estilizar os links da página. Mãos à obra.

Estilizando links
Como o menu de navegação ainda não está com a cara de menu e sim com cara de
lista vamos então estilizá-lo para obter um resultado visual mais agradável. Comecemos
removendo os marcadores de lista e deslocando o menu mais para a esquerda, para o lugar

Matheus D’Eça Torquato de Melo – CC UFAL Arapiraca – IHC Página 9

Tutorial HTML + CSS - Construindo o primeiro website

agora ocupado pelos marcadores. Coloquemos cada item da lista dentro de uma caixa, para
parecerem mais com itens de menu. Também definiremos cores para os links visitados e
não visitados, isso facilita a navegação por parte do usuário, pois o mesmo saberá por quais
itens já passou. As cores para os links serão: azul para links não visitados e púrpura para
links já visitados

O código fica dessa maneira.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Minha primeira página CSS</title>
<style type="text/css">
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;

position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }
ul.navbar a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }
</style>
</head>

<body>
…
Acrescentamos a cada item da lista algumas características como: plano de fundo,
margens e borda. E acrescentamos características aos links visitados e não visitados.

Matheus D’Eça Torquato de Melo – CC UFAL Arapiraca – IHC Página 10

Tutorial HTML + CSS - Construindo o primeiro website

Notemos que em HTML, criamos hyperlinks com o elemento <a>, assim para especificar
cores para links estabelecemos regras CSS para "a", isso serve também para <body>, <h1>,
etc.

Nossa página está quase pronta, vamos dar uma olhada em como está ficando.

Figura 5: Site com menu estilizado

Acrescentado uma linha horizontal

Linhas horizontais são no geral muito úteis para fazer separações entre conteúdo e
rodapé, ou entre quaisquer outros campos que desejemos. No nosso caso iremos adicionar
uma linha horizontal antes do nosso rodapé da página.

O código está especificado abaixo.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>
<head>
<title>Minha primeira página CSS</title>

<style type="text/css">
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
ul.navbar li {

Matheus D’Eça Torquato de Melo – CC UFAL Arapiraca – IHC Página 11

Tutorial HTML + CSS - Construindo o primeiro website

background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }
ul.navbar a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted }
</style>
</head>

<body>
...
Lembrando que o que deve ser editado é apenas o que está em negrito. Com a
alteração feita a nossa página está pronta. Olhemos o resultado.

Figura 6: Site pronto

Separando os estilos do conteúdo

Nosso último passo é separar os estilos da página principal. Para que várias páginas
HTML possam utilizar o mesmo estilo que editamos agora. Para tanto faremos o seguinte,
copiaremos todo o conteúdo que está entre as tags <style> e </style> e criaremos um
novo arquivo no nosso editor de texto com o seguinte conteúdo.

body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;

color: purple;

Matheus D’Eça Torquato de Melo – CC UFAL Arapiraca – IHC Página 12

Tutorial HTML + CSS - Construindo o primeiro website

background-color: #d8da3d }
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }
ul.navbar a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted }

Salvaremos o arquivo com o nome ”meuestilo.css”.

Tendo feito isso é necessário acrescentar a referência a esse estilo no nosso arquivo
HTML, para isso o nosso campo <head> deve ficar da seguinte forma.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>
<head>

<title>Minha primeira página CSS</title>

<link rel="stylesheet" href="meuestilo.css">
</head>

<body>
…
Assim outras páginas HTML poderão utilizar também esse estilo que acabamos de
editar.

Conclusão
Vimos que o desenvolvimento de páginas web utilizando HTML e CSS não é nada
complicado, a composição do estilo CSS é baseado nas tags HTML, ou seja, é possível definir
um estilo o texto de cada tag. Além disso o CSS facilita na produção pois possibilita que o
mesmo estilo possa ser utilizado em mais de uma página. Existem diversos tutoriais e

Matheus D’Eça Torquato de Melo – CC UFAL Arapiraca – IHC Página 13

Tutorial HTML + CSS - Construindo o primeiro website

manuais espalhados na internet que podem auxiliar e muito no aprendizado dessas

tecnologias.

Bibliografia
O tutorial aqui descrito foi baseado na seguinte página.

Primeiros passos HTML + CSS. Disponível em <

http://www.maujor.com/w3ctuto/firstcss.html>. Acessado em: 25/04/2011.

Como referências complementares foram utilizados.

Glossario. Disponível em
<http://www.labiutil.inf.ufsc.br/estilo/glossario.htm#Serifa>. Acessado em 25/04/2011.

HTML- Wikipédia , A enciclopédia livre. Disponível em

<http://pt.wikipedia.org/wiki/HTML>. Acessado em 25/04/2011.

Cascading Style Sheets- Wikipédia , A enciclopédia livre. Disponível em

<http://pt.wikipedia.org/wiki/Cascading_Style_Sheets>. Acessado em 25/04/2011.

Matheus D’Eça Torquato de Melo – CC UFAL Arapiraca – IHC Página 14