HTML - Introdução

O que é HTML?

HTML (Hypertext Markup Language) é a linguagem de marcação padrão usada para criar e estruturar conteúdo na web. É a base de todas as páginas da web e é usada para definir a estrutura e o layout do conteúdo que aparece em um site.

O HTML usa um sistema de tags e atributos para marcar o conteúdo, como:

Essas tags indicam aos navegadores como exibir o conteúdo, facilitando a leitura e a interação dos usuários com as páginas da web.

No desenvolvimento web, o HTML trabalha em conjunto com:

• CSS (Cascading Style Sheets): Usado para estilizar e organizar o conteúdo
• JavaScript: Usado para adicionar interatividade e funcionalidade às páginas web

HTML é uma habilidade essencial para qualquer pessoa envolvida em desenvolvimento web, pois fornece a estrutura básica para todo o conteúdo da web. Aprender HTML é o primeiro passo na criação de sites e é uma habilidade valiosa para designers web, desenvolvedores e criadores de conteúdo.

<p>Este    é   um   parágrafo   com    espaços   extras.</p>

Este é um parágrafo com espaços extras.

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

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

História do HTML

O HTML tem uma história que remonta aos primeiros dias da World Wide Web. Foi criado inicialmente por Tim Berners-Lee, um cientista da computação britânico, no final dos anos 1980, enquanto trabalhava no CERN (Organização Europeia para a Pesquisa Nuclear). Berners-Lee criou o HTML como uma forma de estruturar e compartilhar documentos na internet.

A primeira versão do HTML foi lançada em 1991 e era muito básica. Tinha apenas algumas tags para estruturar texto, como títulos e parágrafos. Com o tempo, o HTML evoluiu para incluir mais recursos e funcionalidades.

Aqui estão alguns marcos importantes na história do HTML:

O HTML5 foi projetado para ser compatível com versões anteriores do HTML, então sites criados usando versões anteriores do HTML ainda funcionam com navegadores web modernos. No entanto, muitos desenvolvedores web agora usam HTML5 devido aos seus novos recursos e funcionalidade aprimorada.

Atualmente, o HTML continua a evoluir e melhorar, com novos recursos e tecnologias sendo adicionados regularmente. Como a base da web, o HTML desempenha um papel importante na criação dos sites interativos e envolventes que usamos todos os dias.

Por que Aprender HTML?

O HTML é a base de todos os sites e é uma habilidade importante para qualquer pessoa envolvida no desenvolvimento web. Se você é um desenvolvedor web profissional ou está começando como um entusiasta, aprender HTML é necessário para criar e manter sites.

Um dos principais motivos para aprender HTML é sua importância no desenvolvimento web. O HTML fornece a estrutura e o conteúdo de um site, que são então estilizados com CSS e aprimorados com JavaScript. Sem HTML, não existiriam sites como os conhecemos hoje. Entender HTML é necessário para criar sites bem estruturados, semânticos e acessíveis que funcionem em diferentes navegadores e dispositivos.

Aprender HTML também oferece muitos benefícios tanto para profissionais da web quanto para entusiastas. Para profissionais, conhecer HTML é uma habilidade básica necessária para a maioria dos trabalhos de desenvolvimento web. Permite que você crie e modifique páginas web, corrija problemas e trabalhe com sistemas de gerenciamento de conteúdo (CMS) e frameworks web. Para entusiastas, aprender HTML abre possibilidades para criar sites pessoais, blogs e portfólios online. Também fornece uma base sólida para aprender outras tecnologias web e pode ser um hobby divertido e gratificante.

O HTML não é importante apenas por si só, mas também serve como base para outras tecnologias web. Depois de ter um bom entendimento de HTML, você pode facilmente aprender CSS para estilizar suas páginas web e torná-las visualmente atraentes. Você também pode aprender JavaScript para adicionar interatividade e funcionalidade dinâmica aos seus sites. Outras tecnologias web, como linguagens de programação do lado do servidor (por exemplo, PHP, Python) e bancos de dados (por exemplo, MySQL), também dependem do HTML para exibir conteúdo aos usuários.

Além disso, entender HTML é valioso para trabalhar com sistemas de gerenciamento de conteúdo populares como WordPress, Drupal e Joomla. Essas plataformas usam templates e temas HTML para controlar a estrutura e a aparência dos sites. Conhecer HTML permite que você personalize esses templates, crie seus próprios temas e corrija quaisquer problemas que possam surgir.

<p>This    is   a   paragraph   with    extra   spaces.</p>

This is a paragraph with extra spaces.

<p>This is a paragraph.</div>

<p>This is a paragraph.</p>

Primeiros passos com HTML

Para começar a escrever HTML, você precisa de algumas ferramentas básicas: um editor de texto e um navegador web. Um editor de texto é um programa que permite escrever e editar arquivos de texto simples, como o Bloco de Notas (Windows) ou o TextEdit (Mac). Mas para uma melhor experiência de codificação, você pode querer usar um editor de código feito para desenvolvimento web, como:

• Visual Studio Code
• Sublime Text
• Atom
• Brackets

Esses editores de código têm recursos como destaque de sintaxe, autocompletar e gerenciamento de arquivos que tornam a escrita de HTML mais fácil e rápida.

Para visualizar suas páginas HTML, você precisará de um navegador web como Google Chrome, Mozilla Firefox, Apple Safari ou Microsoft Edge. Os navegadores web leem o código HTML e mostram o conteúdo formatado aos usuários.

Criar um documento HTML básico é simples. Abra seu editor de texto e crie um novo arquivo. Comece escrevendo a estrutura do documento HTML, que inclui estes elementos:

<!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>Olá, Mundo!</h1>
    <p>Esta é minha primeira página HTML.</p>
</body>
</html>

Vamos detalhar a estrutura de um documento HTML:

Salve o arquivo com a extensão .html (por exemplo, index.html) e abra-o em seu navegador web. Você deverá ver o cabeçalho "Olá, Mundo!" e o parágrafo "Esta é minha primeira página HTML." exibidos na página.

Conforme você continua aprendendo HTML, descobrirá como adicionar mais elementos, atributos e conteúdo para criar páginas web estruturadas e visualmente atraentes. Lembre-se de sempre começar com a estrutura básica do documento e construir a partir daí.

Elementos e Tags HTML

Documentos HTML são compostos por elementos, definidos por tags. Elementos são os blocos de construção de uma página HTML e estruturam o conteúdo, como títulos, parágrafos, listas, links e imagens. Tags marcam o início e o fim de um elemento e fornecem informações sobre seu propósito e conteúdo.

Um elemento HTML tem três partes principais:

1. Tag de abertura: Inicia um elemento, envolta em colchetes angulares (< >). A tag de abertura tem o nome do elemento, como <p> para um parágrafo ou para uma imagem.

2. Conteúdo: O conteúdo do elemento, que pode ser texto, outros elementos ou ambos.

3. Tag de fechamento: Finaliza um elemento, também envolta em colchetes angulares, com uma barra (/) antes do nome do elemento. Por exemplo,

   fecha um elemento de parágrafo.

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

Alguns elementos, chamados de elementos vazios ou nulos, não têm uma tag de fechamento ou conteúdo. Esses elementos são auto-fecháveis e inserem conteúdo na página sem envolvê-lo. Exemplos de elementos vazios incluem:

<img src="imagem.jpg" alt="Uma imagem de exemplo">
<br>
<hr>
<input type="text" name="nome_usuario">

Aqui estão alguns elementos HTML comuns que você verá:

À medida que você aprende mais sobre HTML, encontrará muitos outros elementos, cada um com seu próprio propósito e atributos. Aninhando elementos uns dentro dos outros e aplicando tags apropriadas, você pode criar documentos HTML bem estruturados e significativos.

Atributos HTML

Os atributos HTML fornecem mais informações sobre um elemento e alteram seu comportamento ou aparência. Os atributos estão na tag de abertura de um elemento e têm um nome e um valor, separados por um sinal de igual (=). O valor do atributo está sempre entre aspas, simples ('') ou duplas (").

Os atributos são importantes para personalizar e aprimorar os elementos HTML. Eles podem ser usados para:

Aqui estão alguns atributos HTML comuns que você verá:

<img src="logo.png" alt="Logo da Empresa" width="200" height="100">
<a href="https://www.exemplo.com" target="_blank">Visite Exemplo.com</a>
<input type="text" name="nome_usuario" required>
<p class="intro" style="font-weight: bold;">Este é um parágrafo de introdução.</p>

Nem todos os atributos funcionam com todos os elementos. Cada elemento tem seu próprio conjunto de atributos válidos, e usar atributos inválidos não alterará o elemento.

À medida que você trabalha com HTML, aprenderá mais sobre os diferentes atributos disponíveis e como eles podem ser usados para criar páginas web dinâmicas e interativas. Ao combinar bem elementos e atributos, você pode estruturar seu conteúdo e controlar sua aparência para criar sites atraentes e fáceis de usar.

Estrutura do Documento HTML

Todo documento HTML segue uma estrutura básica que inclui a declaração doctype e os elementos <html>, <head> e <body>. Essa estrutura ajuda navegadores e outras ferramentas a entender e exibir o conteúdo corretamente.

A declaração doctype é a primeira linha de um documento HTML e informa ao navegador qual versão do HTML está sendo usada. No HTML5, a declaração doctype é simplesmente <!DOCTYPE html>. Essa declaração não é uma tag HTML, mas uma instrução para o navegador.

Após a declaração doctype, o elemento <html> é o elemento raiz de uma página HTML. Ele contém todo o conteúdo e estruturas do documento. O atributo lang dentro da tag <html> especifica o idioma do documento, como "en" para inglês ou "pt-BR" para português do Brasil.

Dentro do elemento <html>, existem duas seções principais: <head> e <body>.

O elemento <head> contém meta-informações sobre o documento que não são exibidas na própria página. Isso inclui:

• <title>: Especifica o título da página web, que aparece na barra de título ou aba do navegador.
• <meta>: Fornece metadados sobre o documento, como codificação de caracteres, configurações de viewport, palavras-chave e descrições.
• <link>: Conecta o documento a recursos externos, como folhas de estilo CSS ou favicons.
• <script>: Inclui código JavaScript ou links para scripts externos.

O elemento <body> contém o conteúdo principal do documento HTML que é exibido na janela do navegador. Isso inclui texto, imagens, links, tabelas, formulários e outros elementos que compõem a parte visível da página web.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Minha Página Web</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Bem-vindo à Minha Página Web</h1>
        <nav>
            <ul>
                <li><a href="#">Início</a></li>
                <li><a href="#">Sobre</a></li>
                <li><a href="#">Contato</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <h2>Sobre Mim</h2>
        <p>Olá, sou João Silva. Sou desenvolvedor e designer web.</p>
    </main>
    <footer>
        <p>&copy; 2023 Minha Página Web. Todos os direitos reservados.</p>
    </footer>
    <script src="script.js"></script>
</body>
</html>

A estrutura adequada do documento é importante por vários motivos:

Ao seguir a estrutura padrão do documento HTML e usar elementos e atributos apropriados, você pode criar páginas web bem organizadas, semanticamente significativas e acessíveis que funcionam bem para todos os usuários.