HTML e CSS na Prática

Compre o curso completo por apenas R$ 29,90!
Clique aqui para ter acesso.
Unidade 1 – Introdução – Lição 6

Montando a Base do Website

Nesta lição iremos iniciar o desenvolvimento do nosso website.

Vamos começar criando a estrutura de pastas e arquivos. Utilizando o seu gerenciador de arquivos, crie uma pasta "website". Dentro desta pasta, iremos criar mais duas: "css" e "imagens", para conter os estilos do site e suas imagens, respectivamente.

Estrutura de pastas do website
Estrutura de pastas do website

A sua estrutura de pastas deve ficar como na imagem ao lado.

Dentro da pasta "website", vamos criar agora a página que será a Home do nosso website. Utilizando seu editor de texto, crie um arquivo chamado "index.html". Neste arquivo, vamos colocar o nosso código de página HTML básica. Exemplo abaixo:

<!DOCTYPE HTML>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Home - Site da Empresa</title>
    <link href="css/estilos.css" rel="stylesheet">
</head>
<body>

</body>
</html>

Agora, vamos criar o arquivo CSS que irá conter todos os estilos das páginas do site. Usando o editor de texto novamente, crie um arquivo chamado "estilos.css". Neste arquivo, por enquanto apenas colocaremos um breve comentário CSS (iniciado com /* e terminado com */):

/*
-- Estilos CSS - Website da Empresa
*/
Estrutura de pastas do website
Estrutura de pastas do website

Com isso, a estrutura de pastas e arquivos do site deve ficar como a do exemplo ao lado.

Clique no botão abaixo para ver o arquivo "index.html" que criamos, ligado com o arquivo "estilos.css" (a href do arquivo CSS está diferente no exemplo por causa da estrutura do meu site). Não se esqueça de ver o código fonte, pois nada irá aparecer na página, já que ainda não temos conteúdo:

Visualizar Exemplo

Por enquanto paramos por aqui. Na próxima unidade, vamos investigar mais a fundo as características da linguagem CSS e montaremos a estrutura principal da página inicial do website.

Compre o curso completo por apenas R$ 29,90!
Clique aqui para ter acesso.