O que são tags?
Tags são marcadores que criam sentido e estrutura para que navegadores e motores de busca exibam conteúdos e informações de forma simples. Como vimos na postagem HTML o básico para começar, o html é uma linguagem de marcação e para fazer marcação no texto que será interpretado, nós utilizamos tags (marcadores). Vimos também que a maioria das tagas vem em pares, possuindo uma tag de abertura (que vai antes do conteúdo a ser marcado) e uma tag de fechamento (que vai logo após o conteúdo marcado) por exemplo: <html> Olá Mundo! </html>. Portanto o formato de uma tag será na maioria das vezes esse: <nomedatag>conteúdodatag</nomedatag>. Toda tag possui um nome entre os sinais "<" e ">" e a maioria possui um conteúdo envolvido entre a tag de abertura e fechamento. Há exceções, que veremos futuramente em tags que não envolvem um conteúdo.
*Lembrando que a tag de fechamento possui uma barra para frente "/" também conhecida como forward slash em inglês.
Todas as demais tags em um documento html devem ser colocadas entre as tags <html></html>, quando colocamos tags dentro de outras tags, dizemos que estamos aninhando (como criando camadas ou níveis, como um ninho de pássaro).Uma tag que contém outra tag aninhada é chamada de pai e a tag aninhada é chamada de tag filha, por exemplo:
<html>
<head></head>
</html>
Nesse exemplo, a tag <html></html> é o pai e a tag <head></head> é a filha, pois está contida dentro da tag pai. Também é possível ter tags irmãs (quando se encontram no mesmo nível), modificando o mesmo exemplo acima:
<html>
<html>
<head></head>
<body></body>
</html>
Nesse exemplo, a tag <html></html> é a tag pai, as tags <head></head> e <body></body> são filhas da tag <html>, porém, se analisarmos <head></head> e <body></body> estão no mesmo nível (dentro de <html></html>) e nenhma das duas está contida dentro da outra, dizemos então, que elas são irmãs.
*Observação as demais tags também podem e geralmente vão conter outras tags filhas dentro de si.
Explicando as tags que vimos rapidamente na primeira postagem
A tag <head></head> envolve informações adicionais sobre o conteúdo e documento, mas que não são exibidas diretamente como conteúdo na página web. Por exemplo: dentro da tag <head></head> podemos ver tags como <link>, <meta>, <style>, <title> entre tantas outras. Veremos para que serve cada uma futuramente.
Já a tag <body></body> envolve informações que serão mostradas na página web.
Vamos fazer um novo exemplo para treinar e ganhar prática! Abra o seu bloco de notas ou editor de texto puro (não pode ser word) utilize a mesma estrutura básica para criar um novo documento html:
<!DOCTYPE html>
<!DOCTYPE html>
<html>
</html>
Dentro da tag <html> aninhe as tags <head></head> e <body></body> em um mesmo nível:
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>
Agora veremos a diferença entre as tags <head> e <body> na prática, primeiramente insira uma tag nova chamada <title></title> dentro da tag <head>: a tag <title> envolve texto que indica ao navegador e motores de busca o assunto que trata uma página html, esse conteúdo serve para outras funções que veremos futuramente, mas principalmente serve para ser mostrada nas guias do navegador (não é exibido na página web em si):
<!DOCTYPE html>
<html>
<head>
<title>Minha Página Web</title>
</head>
<body></body>
</html>
Salve o documento com um nome da sua escolha, como: exemplo2.html
Abra o arquivo e veja que a página aparece em branco como dissemos as informações contidas em <head> não aparecem como conteúdo na página web, mas se você olhar para a guia do navegador, verá que ela exibe o título. Mas espera...
Algo parece errado!
O título na guia do navegado aparece assim?
 |
| Exibição do Título na Guia do Navegador |
Calma, isso acontece porque há diversas línguas no mundo e o navegador precisa saber qual conjunto de caracteres utilizar para exibir o texto corretamente. Para corrigir isso insira logo depois da tag </title> outra tag, chamada <meta> na linha seguinte. Esta tag é diferente e não possui tag de fechamento, nem envolve um conteúdo, futuramente falaremos mais sobre ela.
Essa tag, assim como outras aceita atributos, que são palavras que ativam ou desativam recursos num elemento html. Insira a tag com o argumento charset="UTF-8", o atributo charset (indica qual o conjunto de caracteres deve ser utilizado para exibir um conteúdo e o valor "UTF-8" corresponde ao conjunto que agrega a grande maioria de caracteres utilizados no mundo em diversos idiomas. Edite seu código para que fique como o código abaixo, salve e abra a página novamente. O título na guia deve aparecer corretamente.
<!DOCTYPE html>
<html>
<head>
<title>Minha Página Web</title>
<meta charset="UTF-8">
</head>
<body></body>
</html>
 |
| Título aparecendo corretamente |
Não se preocupe em gravar todas as informações, repetiremos essa estrutura e utilização das tags muitas e muitas vezes, com o tempo você se acostuma com as mais utilizadas.
Agora veremos o que acontece quando inserimos conteúdo na tag <body></body>. Usando o mesmo documento ainda com o bloco de notas aberto digite Olá Mundo dentro da tag <body>:
Exibindo conteúdo na página web
Agora veremos o que acontece quando inserimos conteúdo na tag <body></body>. Usando o mesmo documento ainda com o bloco de notas aberto digite Olá Mundo dentro da tag <body>:
<!DOCTYPE html>
<html>
<head>
<title>Minha Página Web</title>
<meta charset="UTF-8">
</head>
<body>
Olá Mundo!
</body>
</html>
Na próxima postagem explicaremos porque não é correto inserir texto sem marcação diretamente dentro da tag <body>, mas faremos isso para simplificar somente hoje, e conseguiremos o resultado desejado para agora. Salve o documento e abra no navegador.
 |
| Texto Exibido na Página Web |
Conclusão
Agora o texto aparece no corpo da página. Você pode estar se perguntando, qual a diferença desse resultado para o nosso primeiro exemplo, onde exibimos o "Olá Mundo!" diretamente dentro da tag pura <html>Olá Mundo!</html>, a questão é que o navegador sempre faz o melhor para exibir conteúdo de uma forma mais correta possível, e no caso ao adicionarmos texto puro, ele faz as alterações "por baixo dos panos" para exibir o conteúdo, mas nunca confie nisso, não é uma boa prática e poderá gerar resultados indesejáveis para a exibição do conteúdo. Sempre utilize as tags adequadas para cada uso. Na próxima postagem aprenderemos a tag adequada para exibir textos;
Espero que tenha gostado. Pratique bastante, tente criar um novo documento por conta própria, qualquer dúvida comente aqui. Bons estudos e até a próxima!
Espero que tenha gostado. Pratique bastante, tente criar um novo documento por conta própria, qualquer dúvida comente aqui. Bons estudos e até a próxima!
Comentários
Postar um comentário