Configurando CSS e HTML para o seu site: Um tutorial

Preslav Dobrev2022-10-28 · 5 min read

Configurando CSS e HTML para o seu site: Um tutorial

Construir websites é o passo inicial para começar com o desenvolvimento web. Uma das primeiras coisas que os entusiastas do desenvolvimento web devem aprender é como configurar CSS e HTML para um website. Ao configurar a página introdutória básica, um iniciante pode se preparar com os conceitos básicos de design de websites, aprimorar suas habilidades de desenvolvimento web e aprender a colaborar com desenvolvedores.

Este tutorial irá guiá-lo pelos conceitos básicos de configuração de arquivos HTML e CSS para o seu website. Vamos começar!

Pré-requisitos

Uma compreensão básica de HTML e CSS.

Passo 1 - Configuração Inicial

Inicialmente, criaremos um novo diretório de projeto e o nomearemos como um demo-projeto :

mkdir demo-project

1	mkdir demo-project

Em seguida, mova para o diretório atual usando o comando cd :

cd demo-project

1	cd demo-project

Na pasta do projeto, vamos adicionar os seguintes arquivos que precisaremos para lançar nosso website básico:

index.html : Este arquivo terá todos os códigos HTML.
styles.css : Manteremos todos os arquivos CSS aqui para estilizar nosso website.
images : Todas as imagens necessárias devem ser mantidas nesta pasta.

Agora que criamos nosso diretório de projeto e adicionamos os arquivos necessários, vamos avançar e adicionar o conteúdo HTML em nosso index.html no próximo passo.

Passo 2 - Adicionando Conteúdo HTML no Arquivo index.html File

No arquivo index.html que criamos no passo anterior, adicionaremos os códigos HTML introdutórios. Essas linhas básicas de HTML servirão como instruções para o navegador, mas não serão exibidas na página web.

Adicione o seguinte bloco de código em seu arquivo index.html :

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>Bem-vindo à CloudSigma!</title>
<link rel="stylesheet" href="css/styles.css">
</head>

<body>
</body>

</html>

<!DOCTYPE html>

<head>

<title>Bem-vindo à CloudSigma!</title>

</head>

<body>

</body>

</html>

Nota: Certifique-se de que o arquivo index.html esteja vazio antes de adicionar esses blocos de código. Além disso, considere alterar o título conforme destacado na seção <title> .

Vamos entender os termos usados:

<!DOCTYPE html> : É uma declaração que informa ao navegador o tipo de HTML usado no documento HTML.
- Como existem várias versões de padrões HTML disponíveis, especificar o DOCTYPE torna mais fácil para os navegadores identificarem a versão do HTML sem esforço. Por exemplo, neste guia, estamos usando a versão mais recente do HTML5.
<html> : Esta tag informa ao navegador que os conteúdos incluídos dentro dela devem ser tratados como HTML. Ao abrir um arquivo <html> , certifique-se de fechá-lo usando a tag </html> . Esta tag suporta os atributos lang , e você pode especificar o idioma da página web. Definimos o idioma como inglês em nosso tutorial usando a en tag de idioma.
- Visite o IANA Language Subtag Registry para verificar os outros idiomas disponíveis para uso.
<head> : Isso cria uma seção no documento HTML e contém informações sobre a página web. No entanto, não há detalhes de conteúdo, e o navegador não exibe nenhuma informação aqui na seção head.
<meta charset="utf-8"> : Especifica o conjunto de caracteres do documento. Deve estar em um formato Unicode, ou seja, UTF-8, suportando a maioria dos idiomas escritos reconhecidos.
<title> : A tag <title> informa ao navegador sobre o nome da página web. O título aparece na aba do navegador quando o website é listado nos resultados de pesquisa.
<link rel="stylesheet" href="css/styles.css"> : Informa ao navegador para identificar a folha de estilo que contém os estilos CSS.
<body> : Esta tag contém os conteúdos principais da página web. Ao usar uma tag <body> , certifique-se de fechá-la usando a tag </body> .

Passo 3 - Estilização Usando CSS

No arquivo styles.css arquivo, adicione a estilização de acordo com as necessidades do seu projeto. Neste exemplo, adicione as seguintes linhas de código no seu styles.css arquivo:

body {
background-color: red;
}

h1 {
color: yellow;
text-align: centre;
}

p {
font-family: verdana;
font-size: 25px;
}

body {

background-color: red;

}

h1 {

color: yellow;

text-align: centre;

}

p {

font-family: verdana;

font-size: 25px;

}

Finalmente criamos os arquivos HTML e CSS básicos que precisaremos para lançar o nosso site. Além disso, você pode adicionar imagens e mantê-las na pasta de imagens. Salve e feche o arquivo. Depois disso, abra o index.html arquivo no seu navegador web favorito, e você verá uma página básica na sua tela.

Conclusão

Neste tutorial introdutório, aprendemos o básico sobre como configurar HTML e CSS e criamos um site rudimentar. Agora é a hora de criar novas páginas, ajustá-las, adicionar conteúdo e vincular tudo a partir da barra de navegação. Como próximo passo, tente adicionar mais conteúdo ao index.html arquivo e estilizá-lo usando CSS.

Além disso, existem outros tutoriais de HTML e CSS que você pode encontrar no nosso blog:

Boa computação!

Preslav Dobrev

Autor · CloudSigma

Preslav Dobrev é um designer criativo na CloudSigma, focado na construção de uma identidade empresarial consistente por meio de canais de marketing tradicionais e inovadores. Ele é hábil em combinar a visão artística com o marketing estratégico para criar narrativas de marca impactantes.