.jpeg)
Neste artigo, você aprenderá como criar seu primeiro código HTML, entenderá as marcações básicas e aprenderá a formatar seu conteúdo. Vamos começar!
Passo 1: Preparação
Antes de começar a escrever código HTML, certifique-se de ter um navegador atualizado instalado em seu computador.
Você pode usar navegadores como Safari, Google Chrome, Firefox e Opera. Ter vários navegadores permite testar seu código em diferentes ambientes.
Passo 2: Configuração do Ambiente
Escolha um editor de código, como o Sublime Text ou o PhpStorm da JetBrains, para começar a escrever seu HTML.
Ao criar um novo projeto no PhpStorm, por exemplo, a ferramenta automaticamente gera uma estrutura básica de HTML para você.
Passo 3: Escrevendo Seu Primeiro Código
1. No editor, crie um novo arquivo HTML e dê um nome a ele, por exemplo, "maldicao.html".
2. Dentro do arquivo, insira o seguinte código para criar a estrutura básica de um documento HTML:
```html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Curso de HTML5</title>
</head>
<body>
<h1>Olá, Mundo!</h1>
<h2>Me livrando da maldição</h2>
</body>
</html>
```
Este código define a estrutura do documento HTML, configura o conjunto de caracteres para UTF-8 e cria um título para a página. Além disso, adiciona dois títulos (`<h1>` e `<h2>`) ao conteúdo do corpo da página.
Passo 4: Formatação com CSS
Para adicionar estilo ao seu HTML, você pode usar folhas de estilo CSS. No cabeçalho do seu documento HTML, você pode incluir um bloco de estilo, como este:
```html
<style>
h1
font-family: Arial;
font-size: 30pt;
color: blue;
text-shadow: 2px 2px 20px black;
}
h2 {
font-family: Arial;
font-size: 20pt;
color: green;
}
</style>
```
Neste exemplo, usamos CSS para formatar os títulos `<h1>` e `<h2>`. Definimos a fonte, o tamanho da fonte e a cor do texto. Além disso, adicionamos um efeito de sombra ao `<h1>` usando a propriedade `text-shadow`.
Passo 5: Visualização no Navegador
Após salvar o arquivo, abra-o em seu navegador. Certifique-se de que o documento HTML e a folha de estilo CSS estejam na mesma pasta para que o navegador possa aplicar as configurações de estilo.
Conclusão
Neste tutorial, você aprendeu a criar seu primeiro código HTML, usar marcações básicas e adicionar estilo com CSS.
Lembre-se de que o HTML é uma linguagem de marcação que estrutura o conteúdo, enquanto o CSS é usado para estilizar o conteúdo.
Continue praticando e experimentando para aprimorar suas habilidades de desenvolvimento web.
Esperamos que este guia passo a passo tenha sido útil para você iniciar sua jornada no mundo do HTML e do desenvolvimento web.
Comentários
Postar um comentário
Deixe seu comentário, ele é muito importante para nós