Fundamentos de HTML e CSS para Construir um Site do Zero
Introdução ao HTML e CSS
HTML (Linguagem de Marcação de Hipertexto) e CSS (Folhas de Estilo em Cascata) são as duas linguagens fundamentais usadas para criar e estilizar páginas web. O HTML é responsável pela estrutura da página, enquanto o CSS trata da sua aparência. Se você deseja construir um site gratuitamente do zero, o conhecimento dessas linguagens é essencial. Neste artigo, vamos explorar as principais tags HTML e as propriedades básicas de CSS que irão ajudá-lo a começar a criar suas primeiras páginas web.
Tags Básicas de HTML
HTML consiste em várias tags que definem diferentes elementos em uma página web. Essas tags são os blocos de construção de qualquer página. Aqui estão algumas tags fundamentais que você precisa conhecer:
A Tag <!DOCTYPE html>
Essa tag informa ao navegador que o documento é um documento HTML. Todas as outras tags devem estar aninhadas dentro desta tag. Ela é o elemento raiz do documento HTML.
<!DOCTYPE html>
<html>
</html>A Tag <head>
Essa tag contém informações meta sobre o documento, como o título da página, links para estilos e scripts. Dentro dessa tag, você também pode adicionar meta tags que ajudam os motores de busca e navegadores a entender melhor o conteúdo da página.
<head>
<title>Meu Primeiro Site</title>
<meta charset="UTF-8">
<meta name="description" content="Descrição do meu primeiro site">
<meta name="keywords" content="HTML, CSS, criação de site">
<meta name="author" content="Seu Nome">
</head>A Tag <body>
Essa tag contém o conteúdo principal da página web, que é exibido no navegador. Dentro dessa tag, todos os elementos visíveis da página estão presentes, como títulos, parágrafos, imagens e links.
<body>
<h1>Bem-vindo ao Meu Site!</h1>
<p>Este é meu primeiro site criado com HTML e CSS.</p>
</body>Tags de Título
As tags de título são usadas para criar cabeçalhos de vários níveis. Existem seis níveis de títulos, de <h1> a <h6>. Os títulos ajudam a estruturar o conteúdo e torná-lo mais legível.
<h1>Cabeçalho de Nível 1</h1>
<h2>Cabeçalho de Nível 2</h2>
<h3>Cabeçalho de Nível 3</h3>
<h4>Cabeçalho de Nível 4</h4>
<h5>Cabeçalho de Nível 5</h5>
<h6>Cabeçalho de Nível 6</h6>A Tag <p>
Essa tag é usada para criar parágrafos de texto. Os parágrafos ajudam a separar o texto em blocos lógicos, tornando-o mais legível.
<p>Este é um parágrafo de texto.</p>
<p>Este é outro parágrafo de texto.</p>A Tag <a>
Essa tag é usada para criar hyperlinks. Os links permitem que os usuários naveguem para outras páginas ou recursos na internet.
<a href="https://exemplo.com">Ir para Exemplo</a>
<a href="https://outro-exemplo.com" target="_blank">Abrir em uma nova janela</a>A Tag <img>
Essa tag é usada para inserir imagens. As imagens tornam as páginas web mais atraentes e informativas.
<img src="imagem.jpg" alt="Descrição da imagem">
<img src="outra-imagem.jpg" alt="Outra imagem" width="200" height="150">Estilizando com CSS
O CSS permite que você altere a aparência dos elementos HTML. Os estilos podem ser adicionados diretamente no documento HTML ou em uma folha de estilo separada. Com o CSS, você pode modificar cores, fontes, tamanhos e o posicionamento dos elementos na página.
Estilos Inline
Os estilos podem ser adicionados diretamente às tags usando o atributo style. Esse método é conveniente para mudar rapidamente o estilo de elementos individuais, mas não é recomendado para projetos grandes.
<p style="color: red;">Este texto ficará vermelho.</p>
<p style="font-size: 20px; text-align: center;">Este texto ficará grande e centralizado.</p>Estilos Internos
Os estilos podem ser adicionados na seção <head> usando a tag <style>. Esse método permite gerenciar centralmente os estilos para toda a página.
<head>
<style>
p {
color: blue;
}
h1 {
font-size: 24px;
text-align: left;
}
</style>
</head>Estilos Externos
Os estilos podem ser armazenados em um arquivo separado e vinculados ao documento HTML usando a tag <link>. Esse método é o mais preferido para projetos grandes, pois permite a fácil gestão dos estilos em várias páginas.
<head>
<link rel="stylesheet" href="estilos.css">
</head>Propriedades Básicas de CSS
Cor do Texto
A propriedade color altera a cor do texto. Você pode usar nomes de cores, valores hexadecimais ou códigos RGB.
p {
color: green;
}
h1 {
color: #ff0000; /* Cor vermelha */
}Fundo
A propriedade background-color altera a cor de fundo. Essa propriedade pode ser aplicada a qualquer elemento HTML.
body {
background-color: lightblue;
}
div {
background-color: #f0f0f0; /* Cinza claro */
}Fonte
As propriedades font-family, font-size e font-weight alteram a fonte do texto. Você pode usar múltiplas fontes em uma propriedade para que o navegador selecione a primeira disponível.
h1 {
font-family: Arial, sans-serif;
font-size: 24px;
font-weight: bold;
}
p {
font-family: 'Times New Roman', Times, serif;
font-size: 16px;
font-weight: normal;
}Margens e Preenchimento
As propriedades margin e padding controlam o espaçamento externo e interno dos elementos. Isso ajuda a gerenciar a distância entre os elementos e seu conteúdo.
div {
margin: 20px; /* Margem externa */
padding: 10px; /* Preenchimento interno */
}Bordas
A propriedade border permite adicionar bordas aos elementos. Você pode personalizar a cor, o estilo e a largura da borda.
p {
border: 1px solid black;
}
div {
border: 2px dashed red;
}Criando uma Página Web Simples
Agora que você conhece as tags HTML básicas e as propriedades CSS, vamos criar uma página web simples. Usaremos todas as tags e estilos abordados para criar um exemplo completo.
Código HTML
<!DOCTYPE html>
<html>
<head>
<title>Meu Primeiro Site</title>
<link rel="stylesheet" href="estilos.css">
<meta charset="UTF-8">
<meta name="description" content="Descrição do meu primeiro site">
<meta name="keywords" content="HTML, CSS, criação de site">
<meta name="author" content="Seu Nome">
</head>
<body>
<h1>Bem-vindo ao Meu Site!</h1>
<p>Este é meu primeiro site criado com HTML e CSS.</p>
<a href="https://exemplo.com">Ir para Exemplo</a>
<img src="imagem.jpg" alt="Descrição da imagem">
<div>
<h2>Sobre Mim</h2>
<p>Sou um desenvolvedor web iniciante e estou aprendendo a criar sites.</p>
</div>
<div>
<h2>Meus Projetos</h2>
<ul>
<li>Projeto 1</li>
<li>Projeto 2</li>
<li>Projeto 3</li>
</ul>
</div>
</body>
</html>Código CSS
Crie um arquivo chamado estilos.css e adicione os seguintes estilos:
body {
background-color: lightblue;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
h1 {
color: navy;
text-align: center;
margin-top: 20px;
}
p {
color: darkgreen;
font-size: 18px;
margin: 10px 20px;
}
a {
color: red;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
img {
width: 100px;
height: auto;
display: block;
margin: 20px auto;
}
div {
background-color: white;
border: 1px solid #ccc;
padding: 20px;
margin: 20px;
}
ul {
list-style-type: square;
padding-left: 40px;
}Conclusão e Próximos Passos
Parabéns! Agora você conhece os fundamentos de HTML e CSS e pode criar uma página web simples. Os próximos passos podem incluir explorar elementos HTML e CSS mais complexos, como formulários, tabelas e animações. Também vale a pena prestar atenção ao design responsivo para que seus sites sejam exibidos corretamente em diferentes dispositivos. Aprender JavaScript ajudará você a adicionar interatividade ao seu site, e familiarizar-se com frameworks como o Bootstrap agilizará o processo de desenvolvimento. Lembre-se de praticar e experimentar com diferentes tags e estilos para aprimorar suas habilidades. Boa sorte na sua jornada para dominar o desenvolvimento web!