Lições
Iniciar
Começar a aprender
CodeGym /Curso Java /Python SELF PT /Introdução ao HTML

Introdução ao HTML

Python SELF PT
Nível 29 , Lição 0
Disponível

1. Tags no HTML

O que é HTML?

HTML (HyperText Markup Language) — é uma linguagem de marcação usada para criar e estruturar páginas web. Com o HTML, a gente pode organizar o conteúdo da página usando várias tags e atributos para que o navegador saiba como exibir as informações. Nesta aula, vamos dar uma olhada nos conceitos básicos do HTML, como tags, árvore de tags, atributos, tags únicas e a estrutura de um documento HTML.

No HTML, as tags são os elementos principais que permitem marcar o conteúdo. Elas envolvem textos e outros elementos, ajudando o navegador a entender como exibi-los. Por exemplo, as tags <h1> e <p> indicam ao navegador que o texto nelas contém um título ou um parágrafo.

As tags são escritas entre colchetes angulares <>. A maioria das tags abrem e fecham, ou seja, possuem uma tag de abertura e outra de fechamento. Por exemplo:

HTML
                      
                        <h1>Este é um título</h1>
                        <p>Este é um parágrafo de texto.</p>

Aqui, <h1> é a tag de abertura, e </h1> é a tag de fechamento.

Árvore de tags

Um documento HTML tem uma estrutura hierárquica, onde as tags estão aninhadas umas dentro das outras, formando uma estrutura em forma de árvore. Essa "árvore de tags" define como os elementos na página estão relacionados entre si e em que ordem devem ser exibidos.

Aqui está um exemplo simples de uma árvore de tags:

Python

<html>
<head>
  <title>Exemplo de página</title>
</head>
<body>
  <h1>Título da página</h1>
  <p>Aqui está o texto do parágrafo.</p>
</body>
</html>

Nesse exemplo, a tag <html> é o elemento raiz, dentro do qual estão as tags <head> e <body>. Dentro do <body> estão as tags <h1> e <p>. Essa estrutura permite organizar logicamente o conteúdo da página.

Atributos

Os atributos no HTML são usados para adicionar informações extras às tags. Eles ficam na tag de abertura e consistem em um nome e um valor. Por exemplo:

HTML

<a href="https://example.com">Link para o site</a>
<img src="image.jpg" alt="Descrição da imagem">
  • href indica o endereço do link.
  • src — caminho para a imagem.
  • alt — texto alternativo, exibido caso a imagem não seja carregada.

Atributos permitem adicionar características extras aos elementos, como um identificador (id), classes (class), estilos (style) e muito mais.

Tags únicas

Algumas tags HTML não possuem conteúdo interno e não requerem uma tag de fechamento. Essas tags são chamadas de tags únicas. Por exemplo, a tag <img> é usada para inserir uma imagem, e sua estrutura é assim:

CSS
  
    <img data-max-width="800" data-id="e1aacecf-c8a8-43e8-85cb-02ee6fffd33e"
src="https://cdn.javarush.com/images/article/e1aacecf-c8a8-43e8-85cb-02ee6fffd33e/800.jpeg" alt="Descrição da imagem">
HTML
  
    <img src="image.jpg" alt="Descrição da imagem">

Outros exemplos de tags únicas:

  • <br> — para quebra de linha.
  • <hr> — para adicionar uma linha horizontal.

2. Conhecendo um documento HTML

Um documento HTML começa com a declaração <!DOCTYPE html>, que indica ao navegador que este é um documento HTML5. Em seguida, vem a tag raiz <html>, que contém as tags <head> e <body>. No <head> estão os metadados do documento (título, estilos, scripts), e no <body> — o conteúdo principal da página.

Exemplo de documento HTML

Python
      
        <!DOCTYPE html>
        <html lang="pt-BR">
        <head>
          <meta charset="UTF-8">
          <title>Minha primeira página</title>
        </head>
        <body>
          <h1>Bem-vindo!</h1>
          <p>Este é um exemplo de documento HTML.</p>
          <a href="https://example.com">Visite nosso site</a>
        </body>
        </html>
  • <!DOCTYPE html> informa ao navegador que o documento está escrito em HTML5.
  • <html lang="pt-BR"> define o idioma do documento.
  • <meta charset="UTF-8"> define a codificação, o que ajuda a exibir os caracteres corretamente.
  • <title> define o título da página, que será visível na aba do navegador.

Tags adicionais no <head>

A tag <head> contém informações que não são exibidas diretamente na página, mas são importantes para o funcionamento do site. Dentro do <head> você pode adicionar as seguintes tags:

  • <meta name="description" content="Descrição da página"> — uma breve descrição da página para mecanismos de busca.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0"> — permite fazer o site ser responsivo para dispositivos móveis.
  • <link rel="stylesheet" href="styles.css"> — conexão de um arquivo CSS com estilos.
  • <script src="script.js"></script> — conexão de um arquivo de JavaScript externo.

Essas tags ajudam a melhorar a interação com o usuário, otimizar a página para mecanismos de busca e conectar recursos necessários.

Comentários
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION