Curso básico de HTML 5

COMPARTILHAR:

Parabéns por embarcar na jornada emocionante de aprender HTML! Este guia abrangente foi projetado para ajudar iniciantes a compreenderem os conceitos fundamentais da linguagem de marcação HTML, que é essencial para criar páginas web. Vamos começar do básico e avançar gradualmente, com exemplos práticos para solidificar seu entendimento.

O que é HTML?

HTML, que significa HyperText Markup Language (Linguagem de Marcação de Hipertexto), é a espinha dorsal da web. Ele fornece a estrutura básica para organizar conteúdo em uma página. Cada elemento HTML é representado por uma tag, que define diferentes partes do conteúdo.

Estrutura Básica de um Documento HTML

Vamos começar com a estrutura básica de um documento HTML. Abra um editor de texto, como o Bloco de Notas ou Visual Studio Code, para começar a criar sua primeira página.

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Minha Primeira Página</title>
</head>
<body>

<!-- Seu conteúdo vai aqui -->

</body>
</html>
  • <!DOCTYPE html>: Declaração que define a versão do HTML sendo usada.
  • <html lang="pt-br">: Elemento raiz, indica o início do documento HTML e define o idioma.
  • <head>: Contém meta-informações sobre o documento.
  • <meta charset="UTF-8">: Define o conjunto de caracteres como UTF-8 para suportar caracteres especiais.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Torna a página responsiva em dispositivos móveis.
  • <title>: Define o título da página, exibido na barra de título do navegador.
  • <body>: Contém todo o conteúdo visível na página.

Elementos Básicos

Parágrafos e Títulos

<p>Este é um parágrafo.</p>

<h1>Este é um Título de Nível 1</h1>
<h2>Este é um Título de Nível 2</h2>
<!-- Até h6 para Título de Nível 6 -->

Listas

Lista Não Ordenada

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

Lista Ordenada

<ol>
    <li>Primeiro</li>
    <li>Segundo</li>
    <li>Terceiro</li>
</ol>

Links e Imagens

<a href="https://www.exemplo.com">Visitar Exemplo</a>

<img src="imagem.jpg" alt="Descrição da Imagem">

Formulários

<form action="/processar" method="post">
    <label for="nome">Nome:</label>
    <input type="text" id="nome" name="nome">

    <label for="email">E-mail:</label>
    <input type="email" id="email" name="email">

    <input type="submit" value="Enviar">
</form>

CSS (Cascading Style Sheets)

Para estilizar sua página, você pode usar CSS. Adicione a seguinte tag no <head>:

<link rel="stylesheet" href="estilos.css">

Crie um arquivo estilos.css com suas regras de estilo.

body {
    font-family: Arial, sans-serif;
    background-color: #f2f2f2;
    color: #333;
}

h1 {
    color: #0066cc;
}

Conclusão

Este guia é apenas o começo. À medida que você explora mais, descobrirá muitos outros elementos HTML e recursos CSS para tornar suas páginas web incríveis. Lembre-se sempre de praticar e experimentar para aprimorar suas habilidades. Boa sorte em sua jornada de aprendizado HTML!

Conteúdo complementar

COMPARTILHAR:
brayan

Brayan Monteiro

Bacharel em Sistemas de Informação pela Faculdade Maurício de Nassau e desenvolvedor PHP. Além de programador, produzo conteúdo e gerencio blogs. Sou especialista em desenvolvimento de software, SEO de sites e em negócios digitais.