2.1 Introdução às tags
HTML-documents
A marcação é baseada em tags . O que é uma etiqueta ?
As tags foram inventadas nos anos 70 para que as pessoas pudessem adicionar informações de serviço a documentos para programas que processam esses documentos.
Tag
- esta é uma palavra-chave (funcional), na maioria das vezes em inglês, que foi enquadrada entre colchetes angulares (mais e menos caracteres) para que os programas não confundam tags e palavras comuns em inglês.
A etiqueta também pode conter várias informações de serviço que podem ser úteis para o programa que processa o documento.
Exemplo de texto com uma tag:
<a href="http://codegym.cc/about">
Link to something interesting
</a>
Neste exemplo, vemos o texto, a tag "a", bem como as informações do serviço - os atributos da tag. Abaixo você aprenderá mais sobre eles.
2.2 Tipos de tags: abertura, fechamento, tag vazia
As tags são de tipos diferentes. Primeiro, eles são simples e duplos. As mais comuns são tags emparelhadas . E como você provavelmente já adivinhou, eles sempre andam em pares. Eles também são chamados de abertura e fechamento.
A tag de abertura é apenas uma palavra-chave entre colchetes. Exemplo:
<h1>
A tag de fechamento é semelhante à tag de abertura, mas a palavra-chave é precedida por uma barra. Exemplo:
</h1>
A tag de abertura pode conter informações de serviço - atributos, a de fechamento - não . A marca de início é sempre a primeira de um par. A tag de fechamento NÃO pode ir primeiro no texto e depois a tag de abertura. Isso HTML-document
não será válido.
As tags únicas não possuem uma tag de fechamento. A lista dessas tags é definida por HTML-standard
. Exemplos de tais tags:
<br>
- quebra de linha;<img>
- foto.
A propósito, uma tag emparelhada, se não contiver informações internas, pode ser escrita de forma abreviada . Exemplo:
<h1/>
Esta não é uma tag única, mas uma tag de par vazia. É como tags fechadas e abertas ao mesmo tempo. Difere da tag fechada porque a barra está no final (antes do segundo colchete triangular).
2.3 Árvore de tags
E informações mais importantes sobre tags emparelhadas. Pode haver muitos deles em um documento e eles podem ser aninhados. O que isso significa? Isso significa que qualquer texto HTML-document
pode ser enquadrado (envolvido) com tags, mesmo que contenha outras tags. Exemplo:
<html>
plain text
<a href="http://codegym.cc/about">
Link to something interesting
</a>
some other text
</html>
Grosso modo, uma sequência de tags pode ocorrer no texto html:
<h1> <h2> </h2> </h1>
Mas não pode ser:
<h1> <h2> </h1> </h2>
Se a tag inicial <h2>
estiver dentro de um <h1>
par -tag, sua tag final correspondente </h2>
também deverá estar dentro de um <h1>
par -tag.
Assim, todas as tags do documento formam uma espécie de árvore de tags . Primeiro vem a tag de nível superior que envolve todo o documento, geralmente chamada <html>
, ela tem pares de tags filhas, elas têm as suas próprias e assim por diante.
Na verdade, o programa que processa um documento com tags o vê exatamente assim - como uma árvore de tags com algum texto dentro.
2.4 Atributos
As informações sobre tags não seriam completas se não falássemos sobre atributos. Tags únicas e tags iniciais de tags pareadas podem ter . Esses atributos contêm informações úteis sobre o conteúdo da tag.
Uma tag pode conter vários atributos, e eles têm a seguinte forma geral:
<tag name1="value1" name2="value2">
Cada atributo é especificado como um par de Name
e meaning
. Pode haver qualquer número de atributos.
«<»
Mas um programador experiente fará imediatamente a pergunta: o que fazer se você precisar usar texto contendo caracteres ou «>»
aspas como um valor de atributo ?
Nome do símbolo | Símbolo | entrada HTML |
---|---|---|
aspas duplas | " | " |
E comercial | & | & |
símbolo menor que | < | < |
Mais símbolo | > | > |
Espaço | ||
citação única | ' | ' |
GO TO FULL VERSION