Noções básicas de HTML: um guia para iniciantes em HTML
Neste artigo, abordaremos o HTML básico , incluindo sua estrutura, sintaxe e elementos comuns.
Esteja você procurando construir um site básico ou um aplicativo da web complexo, entender o básico de HTML é um primeiro passo essencial.
Não se preocupe se especificarmos tags com as quais você ainda precisa se familiarizar.
Estrutura básica do HTML
Um documento HTML é composto de vários componentes, incluindo a declaração de tipo de documento, a tag HTML , a seção de cabeçalho e a seção de corpo .
A declaração de tipo de documento, ou DOCTYPE, é a primeira linha de um documento HTML.
Ele informa ao navegador qual versão do HTML está sendo usada no documento. O DOCTYPE mais comum para HTML5 é:
<!DOCTYPE html>
A tag HTML é o próximo elemento no documento.
Ele envolve todos os outros elementos do documento e especifica que é um documento HTML.
O atributo long especifica o idioma do documento.
<html lang="en">
A seção head de um documento HTML contém metadados sobre o documento, como:
- Título da página.
- Links para folhas de estilo.
- Scripts.
A seção head é delimitada pelas tags <head> e </head> .
A seção do corpo de um documento HTML contém o conteúdo visível da página, como:
- Imagens.
- Texto.
- Outras mídias.
A seção body é delimitada pelas tags <body> e </body> .
Example
Cabeçalhos HTML:
As tags de cabeçalho em HTML variam de h1 a h6 . É vital e uma regra fundamental do HTML básico.
<H1> é o cabeçalho mais importante. O título menos importante é h6:
Example:
Exemplo de Explicação:
- O exemplo acima contém um código HTML que demonstra como usar seis níveis de títulos usando as tags <h1> , <h2> , <h3> , <h4> , <h5> e <h6> .
- O código HTML começa com a tag <html> que define o início de um documento HTML. Dentro da tag <html> , existe uma tag <body> que contém o conteúdo visível da página da web.
- Dentro da tag <body>, existem seis tags de cabeçalho, de <h1> a <h6>. Cada tag de cabeçalho define um nível diferente de cabeçalho, sendo <h1> o maior e mais proeminente e <h6> o menor e menos proeminente.
- O texto dentro de cada tag de título é um título de exemplo que demonstra o tamanho e a aparência de cada nível de título. O texto de cada cabeçalho aumenta de tamanho de <h1> para <h6>
Parágrafos HTML:
Usando a tag <p> , o HTML define os parágrafos da seguinte forma:
Example:
Exemplo de Explicação:
- O código acima começa com a tag <html> , que indica o início de um documento HTML. Dentro da tag <html>, existe uma tag <body> , que é onde o conteúdo visível da página web é colocado.
- Dentro da tag <body>, existem duas tags <p> . A tag <p> significa “parágrafo” e é usada para definir um novo parágrafo de texto. O conteúdo de texto de cada parágrafo está contido nas tags <p> de abertura e fechamento.
- O primeiro parágrafo diz “Aqui você pode escrever seu primeiro parágrafo” e o segundo parágrafo diz “Aqui você pode escrever seu segundo parágrafo”. Estes são apenas textos de espaço reservado para demonstrar como usar a tag <p>.
Links HTML:
Links em HTML são definidos pela tag <a> quando se trata de HTML básico :
Example:
O atributo href especifica o destino de um link.
Os elementos HTML podem ser aprimorados com atributos para fornecer informações adicionais.
Um capítulo posterior discutirá os atributos com mais detalhes.
Imagens HTML
Uma imagem é definida em HTML com a tag <img> .
Além do arquivo de origem (src) , texto alternativo (alt) , largura e altura , os seguintes atributos estão presentes:
Example:
Vídeo HTML
Um vídeo pode ser exibido em HTML usando o elemento <video> :
Example:
Como verificar o código-fonte HTML?
Quando você está na Internet e está olhando para uma página da Web , você já se perguntou: “Como eles fizeram isso?”
Veja o código-fonte HTML:
Para visualizar o código-fonte HTML de uma página HTML , clique com o botão direito do mouse e selecione “Exibir código-fonte da página” (no Chrome), “Exibir código-fonte” (no Edge) ou similar em outros navegadores. Você verá o código-fonte HTML da página na janela que se abre.
Como inspecionar um elemento HTML:
Para determinar os componentes de um elemento, clique com o botão direito sobre ele (ou em um espaço em branco) e escolha “Inspecionar” ou “Inspecionar elemento” (você verá o HTML e o CSS). Além disso, a guia Elementos ou Estilos que aparece permite que você altere instantaneamente o HTML ou CSS.
Conclusão
Resumindo, entender o básico de HTML é um primeiro passo essencial na criação de páginas e aplicativos da web. Com o conhecimento obtido neste artigo, você pode começar a criar suas próprias páginas da Web básicas e continuar a aprender mais sobre o desenvolvimento da Web.
Esperamos ter discutido todos os fundamentos básicos do HTML . se você precisa aprender mais sobre HTML, você deve conferir nossas referências de tags html .
