Tutorial HTML – Tags #2

Logo HTML

Logo HTML

 

Para entender como funciona o HTML, é preciso conhecer as diversas tags (etiquetas) que delimitam uma página e as suas respectivas funções.

Antes de conhecer cada tag, é preciso entender como normalmente são formadas as tags.

Primeiro temos as tags compostas, que são as mais comuns:

 

<tag>Dados</tag>

Veja acima que a tag tem uma abertura (<tag>) e um fechamento (</tag>) e tudo que estiver dentro dela (Textos, Imagens, dados diversos ou até outras tags) estará submetido ao seu domínio e consequentemente poderá ser modificado de acordo com a função da tag.

 

E também existem as tags simples, que não contém dados, mas que também tem funções específicas para uma página HTML:

 

<tag>

Veja acima que a tag simples não tem um fechamento, isso porque ela não aplica funcionalidades a nenhum conteúdo.

 

Finalmente vamos conhecer as Tags

 

Primeiro precisamos conhecer a tag de comentário.

<!– Dados –>

Essa tag tem como objetivo delimitar uma parte do código que não será exibida e não terá efeito na página web, mas que ajuda muito a identificar as partes do código com informações complementares.

Abaixo um código em HTML com um comentário:

 

 

Tags Indispensáveis:

Abaixo as tags que são indispensáveis para o código HTML. Não quer dizer que a página não funcionará sem elas, mas por questão de boas práticas de programação é importante ter todas elas.

 

<html>Dados</html>

Essa é a Tag principal que delimita todo o código HTML. Por padrão o código precisa ser iniciado e finalizado por ela.

Ela não tem nenhuma função específica, somente a de marcar/delimitar o código.

 

<head>Dados</head>

Essa Tag tem como função delimitar o cabeçalho da página HTML. No cabeçalho existem outras tags que tem como objetivo fornecer informações da página como: título, descrição, palavras chaves, etc. Que são mais conhecidos como metadados. Veremos mais a frente como utilizar esses metadados.

 

<body>Dados</body>

Como o próprio nome já diz, essa tag tem como função principal delimitar todo o corpo da página, que é a página propriamente dita que você visualizará no seu navegador web.

 

Portanto após aprender sobre cada uma das tags principais, segue o template padrão do código de uma página HTML:

 

Tags Opcionais:

 

<div>Dados</div>

Fiz questão de colocar essa tag em primeiro na lista, porque atualmente ela é muito utilizada na criação de layout para páginas web. Por ser uma tag que não apresenta função definida, apenas a de dividir o código, você pode associar a ela alguns parâmetros que podem modificar o comportamento de tudo que está dentro dela.

 

<span>Texto</span>

Essa tag tem o comportamento similar a <div> com a diferença que ela deve ser usada para modificar o comportamento de um texto dentro de uma tag. Essa tag não deve ser usada para modificar o comportamento de outras tags, como é o caso da <div>.

 

<table>Dados</table>

A tag de tabela faz exatamente o que o seu nome sugere: cria uma tabela. Essa tag deve ser utilizada apenas para tabular dados e não para criar um layout de uma página, como é comumente usada de forma incorreta. Essa tag sozinha não tem efeito algum, mas combinada com as tags <tr> e <td> são criadas as colunas e linhas da tabela.

 

<tr>Dados</tr>

Essa tag cria uma linha dentro de uma tabela, portanto ela é uma tag dependente: necessita estar dentro da tag <table></table>. Se não estiver dentro desta tag ela não tem funcionalidade alguma.

 

<td>Dados</td>

Essa tag cria uma coluna dentro de uma linha e tabela, portanto ela é dependente das tags <table></table> e <tr></tr>. Se não estiver dentro destas tags ela não tem funcionalidade alguma.

 

Após conhecer as tags de criação de uma tabela, vamos ver como ficaria a formação de uma tabela com 3 linhas e 2 colunas:

 

 

<ul>Texto</ul>

Essa tag cria uma lista desordenada, ou seja, uma lista sem numeração, apenas com símbolos, porém ela precisa de outra tag interna para ter um efeito de lista que é <li>, que cria as linhas da lista.

 

<ol>Texto</ol>

Essa tag cria uma lista ordenada, ou seja, uma lista numerada, porém ela precisa de outra tag interna para ter um efeito de lista que é <li>, que cria as linhas da lista.

 

<li>Texto</li>

Essa tag cria as linhas da lista, seja ela ordenada ou desordenada.

 

Após conhecer as tags de lista ordenada e desordenada, vamos ver como ficaria a formação de uma lista ordenada com 3 linhas e uma lista desordenada com 2 linhas:

 

 

<p>Texto</p>

Essa tag cria um parágrafo em um texto.

 

<b>Texto</b>

Coloca um texto como negrito.

 

<i>Texto</i>

Coloca um texto como itálico.

 

<u>Texto</u>

Coloca um texto como sublinhado.

 

<a href=”http://www.google.com.br”>Texto</a>

Cria um Hyperlink em um elemento, que ao ser clicado pode levar a uma nova página ou mesmo a outro conteúdo. Essa tag precisa estar acompanhada de um parâmetro que informa qual o caminho do Hyperlink (href=”http://www.google.com.br”), caso contrário ela não funciona.

 

<h1>Texto</h1>, <h2>Texto</h2>, <h3>Texto</h3>, <h4>Texto</h4>, <h5>Texto</h5>, <h6>Texto</h6>

As tags acima representam os 6 níveis de tamanho de um cabeçalho de uma página. Quanto menor o número, maior o texto.

 

Depois de conhecer todas essas tags HTML, vamos criar uma página com todas as tags que utilizamos? Segue o código e logo abaixo como ficou a página.

 

Código HTML:

 

Página Resultado:

Página Resultado Final

Página Resultado Final

OBS: Nas tags <div> e <table> foram adicionados alguns parâmetros que serão discutidos mais a frente.

Bem, essas não são todas as tags do HTML, mas são as principais e mais utilizadas. No próximo capítulo do nosso tutorial vamos falar sobre os metadados, que são tags que contém informações muito importantes, e que devem ficar no cabeçalho de uma página HTML.

Jefferson Lins

Analista de Sistemas, louco por tecnologia e muito curioso.

Sem Comentários

Deixe seu Comentário

Preencha todos os campos.
Seu e-mail não será exibido ao público.