Tutorial Intermediário de HTML: Tags Meta

9 03 2008

Exemplo de tag

Muitas eras atrás, quanto a Internet era apenas um pequeno número de caixas de papelão unidos uns aos outros através de barbante, tags meta eram os guias turísticos da… erm… Cidade Internet.

Tags Meta não fazem nada com o conteúdo apresentado na janela do navegador, mas são usadas por mecanismos, como os de busca, para catalogar informação sobre a página web.

A tag meta pode ser usada quantas vezes você quiser e pode conter os atributos content (obrigatório), http-equiv e name.

O atributo content é o próprio meta-dado (dado sobre o próprio dado), que está ligado ao atributo name ou http-equiv. Esses meta-dados servem para dar informação extra sobre a página.

O atributo name pode ser qualquer coisa que você queira. Nomes comumente usados incluem author (autor), keywords (palavras-chave) e description (descrição).

O atributo description geralmente é usado por mecanismos de busca (como o Google) para exibir uma descrição da página em seus resultados de busca, e essa é a maior utilidade na aplicação da tag meta.

O atributo http-equiv pode ser usado no lugar de name para fazer um cabeçalho HTTP, que é informação enviada ao servidor aonde a aplicação está. O atributo content (conteúdo) pode ser content-type (tipo do conteúdo), expires (expira), refresh (com que frequência a página automaticamente se atualiza – péssimo pra acessibilidade), ou set-cookie.

<html>

<head>

	<title>Título</title>

	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="description" content="Essa é minha página super excitante sobre condicionadores de ar." />

	...

A razão pela qual as tags meta costumavam ser tão importantes é que mecanismos de busca as utilizavam para construir um perfil da página web. O meta-dado keywords, por exemplo, era usado extensivamente. Hoje em dia, no entanto, a maior parte dos mecanismos de busca usam o conteúdo real da página para definir seus resultados, tornando a maior parte das tags meta sem utilidade nenhuma além de levar informação a alguém que está lendo o próprio HTML.

Pra se aprofundar no assunto, leia o artigo sobre tags meta no Tableless.

Páginas Relacionadas

Referência
BlogBlogs Tags: , ,

Esse material é uma adaptação do HTML Intermediate Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.


Comentários : 1 Comentário »
Tags: , , , , ,
Categorias : +web, css, html, htmldog

Tutorial Intermediário de HTML: Span e Div

9 03 2008

Código HTML com as tahs <div> e <span>

A principal função do HTML é dar significado ao conteúdo. Enquanto a maioria das tags HTML aplicam algum significado (p quer dizer parágrafo, h1 quer dizer cabeçalho, etc.), as tags span e div não têm significado algum. Isso pode parecer quase tão útil quanto um martelo sem cabeça, mas essas tags são usadas extensivamente com CSS.

Elas são usadas para agrupar um bloco de HTML e aplicar alguma informação a esse bloco, na maioria das vezes usando os atributos class e id para associar o elemento com um seletor de classe ou id CSS.

id é um atributo que identifica um elemento, e é único (dois elementos não podem ter o mesmo id). class identifica um grupo de elementos, e vários elementos podem ter a mesma class. No Tutorial Intermediário de CSS class e id são explicados mais detalhadamente.

A diferença entre span e div é que span é um elemento inline e geralmente é usado para um pequeno bloco de HTML, e div é um elemento de bloco (o que basicamente é equivalente a ter uma quebra de linha antes e depois do elemento) e é usado para agrupar blocos maiores de código (geralmente divisões da página como menu, cabeçalho, etc.). Este artigo explica melhor as diferenças entre elementos inline e de bloco.

<div id="tesouras">
	<p>Isso é <strong><span class="papel">louco!</span></strong></p>
</div>

div e principalmente span não devem ser usados com muita frequência. Sempre que houver uma outra alternativa que faça mais sentido, ela deve ser usada. Por exemplo, se você quer enfatizar a palavra “louco!” e aplicar nela a classe “papel”, o código pode ficar assim:

<div id="tesouras">
	<p>Isso é <strong class="papel">louco!</strong></p>
</div>

Páginas Relacionadas

Referência

BlogBlogs Tags: , ,

Esse material é uma adaptação do HTML Intermediate Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.


Comentários : 10 Comentários »
Tags: , , , , ,
Categorias : +web, html, htmldog, minicursos

Tutorial Intermediário de HTML

9 03 2008

Trecho de código HTML

Enquanto o objetivo do Tutorial Iniciante de HTML era te ensinar só o essencial, o que você precisava pra começar a fazer suas páginas, esse guia vai um pouco mais além, acrescentando alguns detalhes práticos que vão melhorar a sua compreensão de HTML e permitir que você faça mais coisas. E esse tutorial ainda é mais fácil que o iniciante.

Conteúdos

  • Span e Div – Os elementos “sem significado”, que são usados com CSS.
  • Tags Meta – Adicionando informação extra sobre sua página.
  • Tabelas II – Expandindo o que você viu na página sobre tabelas do Tutorial Iniciante de HTML, conhecendo células-cabeçalho e mesclando células.
  • Listas de Definição – As listas esquecidas.
  • Tags Más – Os elementos e atributos HTML que você não deve usar.
  • Exercícios

Páginas Relacionadas

BlogBlogs Tags: , , ,

Esse material é uma adaptação do HTML Intermediate Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.


Comentários : 3 Comentários »
Tags: , , , , ,
Categorias : +web, html, htmldog, minicursos


Seguir

Obtenha todo post novo entregue na sua caixa de entrada.