HTML: Tudo o que precisa para começar a criar páginas web

HTML (HyperText Markup Language) é a base de qualquer página da web. Com ele, define uma estrutura de conteúdo, permitindo que os navegadores saibam como exibir

textos, imagens e outros elementos na tela. Se você está começando no desenvolvimento web, o HTML é o primeiro passo para entender como a internet funciona. Neste artigo, vou explicar os conceitos básicos de HTML e ensinar a criar a sua primeira página web.

O que é HTML?

HTML é uma linguagem de marcação, o que significa que usa "marcas" (ou tags) para definir diferentes partes de uma página. Essas tags ajudam a identificar e organizar o conteúdo, como títulos, parágrafos, imagens e links. O HTML não é uma linguagem de programação, pois não inclui lógica como condições ou loops. Ele serve apenas para estruturar e apresentar o conteúdo.

Estrutura Básica de uma Página HTML

Qualquer página HTML começa e termina com uma tag <html>. Dentro dela, encontramos outras tags principais que compõem a estrutura do documento:

<!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 HTML</title>
</head>
<body>
    <h1>Bem-vindo ao Meu Site!</h1>
    <p>Esta é a minha primeira página web criada com HTML.</p>
</body>
</html>

Explicação das Tags

<!DOCTYPE html>: Informa ao navegador que estamos a usar HTML5, a versão mais recente da linguagem.

<html lang="pt-br">: A tag <html> envolve todo o conteúdo da página. O atributo lang="pt-br" indica que a língua principal do conteúdo é o português brasileiro.

<head>: Contém Metadados sobre a página, como o título e informações de codificação de caracteres.

<meta charset="UTF-8">: Garante que os caracteres especiais sejam exibidos corretamente.

<title>: Define o título da página, que aparece na aba do navegador.

<body>: Contém o conteúdo visível da página, como textos, imagens e links.

Principais Tags de HTML

Agora, vamos explorar as tags mais utilizadas em HTML:

Títulos e Parágrafos

Para títulos e textos, utilizamos as tags <h1> até <h6> para criar diferentes níveis de títulos, e uma tag <p> para parágrafos.

<h1> Título Principal </h1> 
<h2> Título Secundário </h2> 
<p> Este é um parágrafo de exemplo. </p>

Ligações

Para criar links, utilizamos uma tag <a>, que permite adicionar hiperligações para outras páginas ou recursos.

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

Imagens

As imagens são adicionadas com a tag <img>, que inclui um atributo src para especificar o caminho da imagem.

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

Listas

Existem dois tipos de listas principais: listas não ordenadas <ul> e listas ordenadas <ol> . Cada item da lista é definido com uma tag <li>.

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

<ol>
    <li>Item 1</li>
    <li>Item 2</li>
</ol>

Atributos em HTML

As tags HTML podem ter atributos que definem propriedades adicionais. Alguns exemplos incluem:

href: Especifique o URL de um link na tag <a>.

src: Especifica o caminho da imagem na tag <img>.

alt: Texto alternativo para imagens.

class e id: Atributos que identificam e estilizam elementos, facilitando o uso de CSS e JavaScript.

Exemplo com Classes e IDs

<p class="texto-destaque">Este parágrafo tem uma classe chamada "texto-destaque".</p>

<p id="paragrafo-unico">Este parágrafo tem um ID único.</p>

Estruturação e Semântica

Com HTML5, foram implementadas novas tags semânticas, que tornam o código mais acessível e fácil de entender. Algumas das mais importantes são:

<header>: Cabeçalho da página ou de uma seção.

<nav>: Barra de navegação.

<main>: Conteúdo principal.

<section>: Seção de conteúdo.

<article>: Artigo independente dentro do conteúdo.

<footer>: Rodapé.

Exemplo de uma estrutura mais semântica:

<header>
    <h1>Meu Blog de Programação</h1>
</header>
<nav>
    <a href="#home">Início</a>
    <a href="#sobre">Sobre</a>
    <a href="#contato">Contato</a>
</nav>
<main>
    <article>
        <h2>Primeiro Artigo</h2>
        <p>Este é o conteúdo do primeiro artigo.</p>
    </article>
</main>
<footer>
    <p>&copy; 2024 Meu Blog</p>
</footer>

Exemplo de "Hello, World!" em HTML:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Exemplo de Hello World</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>Esta é a minha primeira página HTML.</p>
</body>
</html>

Boas Práticas com HTML

Aqui ficam algumas dicas para escrever um HTML bem organizado e eficiente:

Utilize tags semânticas: Melhora a acessibilidade e o SEO.

Use indentação: Facilita a leitura e manutenção do código.

Adicionando alt nas imagens: Descreve o conteúdo das imagens para melhorar a acessibilidade.

Não repita IDs: IDs devem ser únicos numa página.

Quanto às tags: Mesmo que o HTML5 permita omitir algumas tags, é uma boa prática fazê-las para manter o código consistente.

Pronto para criar sua própria página?

Agora que você conhece os conceitos básicos de HTML, está pronto para começar a criar suas páginas! Explore as tags, experimente novos layouts e lembre-se de seguir as boas práticas para criar páginas acessíveis e bem estruturadas.

Com o HTML dominado, o próximo passo será aprender CSS para estilizar suas páginas e JavaScript para adicionar interatividade. Continue a acompanhar nosso blog para mais tutoriais!

Programar Tudo - Blog de Programação

Pesquisar este blog