Durante o processo de criação do seu site, você pode se deparar com termos como editor HTML, código HTML ou tag HTML na internet.
Embora a maioria das plataformas de criação de sites (como o WordPress) seja bastante fácil de usar e não exige muito conhecimento técnico, aprender mais sobre codificação HTML ajudará você a entender os conceitos de programação e a prepará-lo para quando for a hora de ajustar ou melhorar a aparência do seu site.
É por isso que vamos compartilhar com você algumas noções básicas sobre o assunto, assim como uma lista dos 10 códigos HTML que você deve conhecer e também alguns exemplos, para que você possa aprender a usá-los corretamente.
O que é HTML?
HTML significa “Hyper Text Markup Language” ou “Hypertext Markup Language”.
Os códigos HTML são a linguagem universal usada para criar e moldar sites. Funcionam em qualquer sistema operacional (Windows, Mac, Linux, etc.) e com qualquer navegador (Chrome, Explorer ou Mozilla).
Mesmo que não seja uma linguagem de programação muito sofisticada, saber gerenciar HTML permite inserir outros códigos mais poderosos, como Javascript, por exemplo. Agora vamos ver o elemento básico da sintaxe HTML: tags.
Tags HTML
Tags HTML o que são HTML é composto por um sistema de tags, que inclui instruções que os navegadores traduzem como:
- Imagens
- Texto
- Hiperlinks
- Listas de palavras
- Mesas, etc
Assim, para que tal elemento seja legível, a tag deve ter duas partes: uma tag inicial (<tag>) e uma tag final (</tag>) entre colchetes angulares (<>).
Por exemplo, as tags <strong> e </strong> definem texto em negrito. Se em nosso documento HTML escrevemos uma frase com o seguinte código:
<strong> Este texto está em negrito. </strong>
O resultado será:
Este texto está em negrito.
Tente você mesmo! Digite o código acima em um visualizador de HTML.
Como você deve ter notado, a tag de início é usada para definir o comportamento do conteúdo (por exemplo, se um texto ficará em negrito ou se terá um tamanho específico), e a tag de fechamento informa ao navegador para até que ponto esse comportamento deve chegar. Para construir os \”fechos\” basta adicionar uma barra ou \”barra\” (/) no início da tag.
Os códigos HTML, são usados para diferentes situações. Você pode usar, para encaixar um link em uma frase, como por exemplo: <a href=\”url\”>link text</a> e resultado fica com o link dentro da palavra: 22Bet Portugal.
Lista de códigos HTML básicos
Antes de olhar para os códigos HTML básicos, você deve saber que a primeira linha do seu documento HTML deve sempre conter a tag <!DOCTYPE html>. Isso tornará o código do seu site legível em qualquer navegador.
Agora, um bom documento HTML deve ter quatro tags essenciais para que o conteúdo seja distribuído corretamente. Estes são:
1. HTML
<html> Fica no início de um documento HTML e informa aos navegadores que a página tem código HTML para que eles possam lê-la dessa maneira. Seguindo a sintaxe desta linguagem, a tag de fechamento </html > será o último elemento do documento.
2. Cabeçalho
<head> é a tag usada para o cabeçalho da página. Sua principal função é conter todas as informações sobre o funcionamento do site. Por isso é um código criptografado que as pessoas que entram na página não conseguem ver.
3. Título do documento
<title> é a tag que dá ao seu site um nome para os usuários identificarem. É o título que você vê nas guias do navegador.
4. Corpo
<body> é a tag que contém todos os elementos individuais do site. Em outras palavras, ele contém todo o conteúdo visível. Aqui você pode inserir texto, imagens, vídeos ou qualquer outra funcionalidade que queira exibir.
Vamos dar um exemplo das quatro tags essenciais:
<html>
<cabeça>
<title> Minha página de amostra </title>
</head>
<corpo>
Aqui vai o conteúdo
</body>
</html>
Com as quatro tags que acabamos de falar você já tem o \”esqueleto\” da sua página web. A próxima tarefa seria inserir algum texto (entre as tags <body> e </body>) e verificar suas tags. Vamos ver o mais básico.
5. Cabeçalhos de páginas e parágrafos
<h1> <h2>… <h6> são tags que funcionam para adicionar títulos e legendas no corpo do texto, o que ajuda a hierarquizar as informações. A propósito, recomendamos que você use a tag H1 apenas uma vez no conteúdo.
Exemplo:
<h1> Esta é uma tag H1. Use-o em seu título. </h1>
<h2> Esta é uma tag H2. Use-o nos títulos das seções. </h2>
<h3> Esta é uma tag H3. Use-o nas subseções. </h3>
<h4> Esta é uma tag H4. Eles não são usados com muita frequência. </h4>
<h5> Esta é uma tag H5. </h5>
<h6> Esta é uma tag H6. </h6>.