Uma introdução ao HTML
HTML significa linguagem de marcação de hipertexto e os documentos que usam essa linguagem criam páginas da web. Todo site usa isso, por isso é importante entender como funciona.
Neste artigo tutorial, você aprenderá tudo o que precisa saber sobre HTML .
O que é a declaração <! DOCTYPE>?
A declaração <! DOCTYPE> é a primeira linha de código em cada arquivo HTML . Ele informa aos navegadores da web qual versão do HTML está dentro de um arquivo específico.
Cada versão do HTML é única e possui seu próprio conjunto de regras. HTML 5 é a versão mais recente do idioma. É a versão recomendada para desenvolvedores, bem como a versão mais simples de declarar. Para declarar um documento HTML 5 , basta adicionar o elemento HTML à declaração <! DOCTYPE> .
Você pode ver um exemplo abaixo:
<!DOCTYPE html>O que é a tag <head>?
Em cada documento HTML , a declaração <! DOCTYPE> é seguida pela tag <html> . Esta tag identifica a raiz do documento e inclui as tags <head> e <body> .
A tag <head> é a primeira seção e contém as tags <title> e <meta> . No entanto, em alguns casos, quando o desenvolvedor escolhe usar CSS interno, a tag <style> também é colocada dentro da tag <head> .
Apenas uma tag <title> está em um documento HTML . A tag <title> contém o título de uma página da web e essas informações aparecem na área da guia de um navegador da web.
Você pode ver um exemplo de tag de título abaixo:
<title>An Introduction to HTML</title>Um arquivo HTML com a tag <title> acima aparecerá como “Uma introdução ao HTML” na área da guia dos navegadores.
A tag <meta> descreve o conteúdo em uma página da web e geralmente tem um nome e um atributo de conteúdo. Três dos tipos mais populares de tags <meta> são descrição, palavra-chave e janela de visualização.
Abaixo está um exemplo de tag de descrição <meta> :
<mete name="description" content="This is a simple page, which demonstrates the basics of HTML">
O atributo de conteúdo da tag de descrição <meta> contém uma descrição de sua página da web. Esses são os dados exibidos no resultado de um mecanismo de pesquisa, que informam a um visitante em potencial o que esperar de um site.
Abaixo está um exemplo de tag <meta> de palavras-chave:
<meta name="keywords" content="HTML, web development, etc">
A tag de palavras- chave <meta> contém palavras ou frases relevantes para o seu site. Cada nova palavra ou frase atribuída a um atributo de conteúdo de palavra-chave é separada por uma vírgula, como você pode ver no exemplo acima.
Abaixo está um exemplo de tag <meta> da janela de visualização:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
A tag <meta> da janela de visualização ajuda a criar designs responsivos, tornando sua página da web responsiva a diferentes tipos de dispositivos.
O que é a tag <body>?
A tag <body> é a segunda seção principal da tag raiz <html> . A tag <body> contém todos os elementos exibidos em uma página da web.
Os elementos com uma tag <body> são classificados como elementos inline ou em bloco. Se você deseja ver uma folha de referências completa dos fundamentos de HTML , reunimos uma para que você possa entender tudo com mais facilidade.
O que são elementos de bloco?
Os elementos de bloco sempre começam em uma nova linha e ocupam toda a largura da linha em que estão.
Alguns elementos de bloco que você usará incluem:
- As tags de título
- A tag <p>
- A tag <div>
- A tag <ol>
- A tag <ul>
- A tag <li>
Elementos de bloco são usados para dividir o texto no site em um formato coerente e digerível.
O que são tags de título?
Existem seis tipos diferentes de tags de título: <h1> , <h2> , <h3> , <h4> , <h5> e <h6> . A tag <h1> produz o maior título, a <h6> produz o menor título e todos os outros títulos ficam em uma posição entre os dois (dependendo de seu valor numérico).
As tags de título são usadas nos títulos de uma página da web. O uso de uma tag de título específica depende da posição do título na página da web. Por exemplo, a tag <h1> é usada no primeiro título de uma página da web, e uma página da web usa apenas um elemento h1 (embora possa ter vários elementos h2, h3 e h4).
Você pode ver um exemplo da tag <h1> em ação abaixo:
<h1> Learning the Basics of HTML </h1>
O que é a tag <p>?
O <p> é outro elemento de bloco usado no corpo da página da web e cria parágrafos. Abaixo está um exemplo desta tag sendo usada:
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit aliquid a cupiditate
inventore, reiciendis earum illum mollitia dignissimos officia,culpa cumque dolorem
quidem atque maiores, ad tempora quia. Repudiandae, delectus!
</p>
O que é a tag <div>?
A tag <div> representa uma divisão. É usado para criar contêineres para grupos de outros elementos HTML para fins de estilização ou funcionais.
Por exemplo, se você estiver trabalhando com uma grade, terá que colocar todos os elementos da grade dentro de um contêiner. Uma tag <div> é o que você precisa usar para criar o contêiner.
O que são as tags <ol> e <ul>?
As tags <ol> e <ul> são usadas para criar listas em HTML . A tag <ol> cria listas ordenadas, enquanto a tag <ul> cria listas não ordenadas. No entanto, ambas as tags usam a tag <li> , que cria itens de lista.
Usando a tag <ol>
Uma lista ordenada usa números por padrão. No entanto, a tag <ol> tem um atributo de tipo que você pode usar para declarar explicitamente o elemento que deseja usar para ordenar sua lista. Você pode solicitar uma lista com algarismos romanos maiúsculos ou minúsculos, letras maiúsculas ou minúsculas ou números.
Você pode ver um exemplo abaixo:
<ol type="a">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
O código acima cria uma lista ordenada usando letras minúsculas.
Usando a tag <ul>
A tag <ul> também possui um atributo de tipo, que assume um de vários valores: a saber, disco, círculo ou quadrado. No entanto, o disco é o indicador padrão de um novo item da lista em uma lista não ordenada.
Abaixo está um exemplo do que uma lista não ordenada gostaria em forma de código:
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
O que são elementos embutidos?
Um elemento embutido não começa em uma nova linha. Ele começa na próxima posição disponível, que pode ou não estar em uma nova linha, e usa apenas a largura necessária. Alguns elementos embutidos que você provavelmente usará incluem:
- A tag <span>
- A tag <a>
- A tag <img>
- A tag <label>
- A tag <button>
Discutiremos cada um deles em maior profundidade a seguir.
O que é a tag <span>?
A tag <span> é usada para fins de estilo embutido. Por exemplo, se você deseja alterar o estilo de uma palavra ou frase específica em um parágrafo, pode usar a tag <span> .
Abaixo está um exemplo desta tag:
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit aliquid a cupiditate
inventore, reiciendis earum illum <span id="important">dignissimos officia</span> ,culpa cumque dolorem
quidem atque maiores, ad tempora quia. Repudiandae, delectus!
</p>
Usar a tag <span> no exemplo acima garante que as duas palavras dentro da tag <span> agora podem ter um estilo único.
O que é a tag <a>?
A tag <a> é usada para criar links em uma página da web. A tag <a> permite que um desenvolvedor crie um link para um site diferente (link externo) ou uma página da web diferente no mesmo site (link interno). A tag <a> tem dois atributos importantes – href e target.
O atributo href é essencial, pois armazena o valor do local do link. E o atributo target é necessário porque permite ao usuário abrir o link em uma nova aba. Sem o atributo target, um link será aberto na guia atual e, se for um link externo, direcionará o tráfego para fora do seu site.
Veja abaixo um exemplo da tag <a> em ação:
<a href="http://google.com" target="_blank">Click this link to Google</a>Aprender HTML é essencial para programadores
Aprender HTML é crucial para todos os programadores e deve formar o básico de seus estudos. Felizmente, porém, também não é muito complicado.
Depois de ler este guia, você terá tudo de que precisa para começar a formatar melhor os sites.
