Construindo a Web

Comparto con ustedes una interesante lista la que publica el sitio Font Tester: List of Web Safe Fonts

font-family: Arial, Helvetica, sans-serif;
font-family: 'Arial Black', Gadget, sans-serif;
font-family: 'Bookman Old Style', serif;
font-family: 'Comic Sans MS', cursive;
font-family: Courier, monospace;
font-family: 'Courier New', Courier, monospace;
font-family: Garamond, serif;
font-family: Georgia, serif;
font-family: Impact, Charcoal, sans-serif;
font-family: 'Lucida Console', Monaco, monospace;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-family: 'MS Sans Serif', Geneva, sans-serif;
font-family: 'MS Serif', 'New York', sans-serif;
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
font-family: Symbol, sans-serif;
font-family: Tahoma, Geneva, sans-serif;
font-family: 'Times New Roman', Times, serif;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
font-family: Verdana, Geneva, sans-serif;
font-family: Webdings, sans-serif;
font-family: Wingdings, 'Zapf Dingbats', sans-serif;

Vista pevia en el siguiente linck:

http://img153.imageshack.us/img153/2219/websafefontspreviewfontbf4.png

Ícones são pequenas representações gráficas do site, sendo comumente usado o logo do site como ícone. Devem ter sempre formato quadrado, embora isso não signifique que o ícone em si precisa ter esse formato, visto que se pode criar uma imagem de qualquer formato visual usando o efeito transparência.

Ícone alternativo

O ícone padrão é usado em geral, na falta de outro. É inserido usando o seguinte código:

<link rel="icon" href="http://www.seusite.com/favicon.ico" type="image/x-icon" />

Onde o atributo href deve ter como valor a URL onde o favicon está hospedado.

Favicon

Favicon é o acrônimo de "favorite icon" (do inglês: "ícone de favorito") e é usado principalmente ao lado do título na barra de título, na aba ou nos favoritos (marcadores). Deve ter preferencialmente as dimensões 16px x 16px, mantendo sempre a proporção entre altura e largura e deve ter a extensão .ico. É inserido usando o seguinte código:

<link rel="shortcut icon" href="http://www.seusite.com/favicon.ico" type="image/x-icon" />

Onde o atributo href deve ter como valor a URL onde o favicon está hospedado.

Apple Touch Icon

Apple Touch Icon é o ícone usado pelos equipamentos com o sistema operacional iOS da Apple, como o iPhone e iPad. Ele é utilizado quando o usuário usa a função “Adicionar à Tela Início” no site. Deve estar no formato PNG e é recomendável uma resolução mínima de 114px x 114px, devido a que as resoluções ideias para os dispositivos são 114px x 114px para iPhone 4, 72px x 72px para iPad e 57px x 57px para as demais versões do iPhone, embora seja possível adicionar ícones de diferentes resoluções ao mesmo tempo.
O código usado para inserção desse ícone é o seguinte:

<link rel="apple-touch-icon" sizes="157x157" href="http://www.seusite.com/apple_touch_icon.png" />

Onde o atributo sizes deve ter como valor as dimensões do ícone e o atributo href, a URL do ícone. Pode ser inserido mais de um ícone com outras resoluções.

O título é usado pelo navegador para organizar as páginas e é exibido na barra de título do navegador e nas abas. Também é exibido como link em resultados de busca. Deve ser inserido entre as tags title, na sessão head, como mostrado abaixo:

<title>Título</title>

O resultado pode ser visto na imagem:

Meta tags são tags que descrevem o conteúdo do site e são usadas principalmente por motores de busca, como Google, Yahoo e Bing, para indexação das páginas. Elas contém dados como palavras-chave, descrição, idioma da página e autor entre outros. Devem sempre ser posicionadas entre as tags <header> e </header> da página.

Palavras-chave

Palavras-chave são palavras que resumem os temas principais de um site ou página. Por exemplo, as palavras-chave desse blog sobre desenvolvimento web poderiam ser essas: desenvolvimento, web, HTML, CSS, webdesign. Elas são usadas pelos motores de busca para categorizar o conteúdo dos sites, mas não somente elas como também o próprio conteúdo da página.
Para inserir palavras-chave, usa-se o seguinte código, que deve sempre ser colocado na cessão header da página, com as palavras-chave após content, entre aspas e separadas por vírgula:

<meta name="keywords" content="palavra-chave, palavra-chave, palavra-chave">

É importante manter um limite de aproximadamente 150 caracteres, buscando não exceder esse limite.

Descrição

A descrição é um curto resumo de poucas frases do conteúdo da página. Aparece nos resultados de busca embaixo do link do site, como mostrado abaixo, destacado em vermelho. Em sua falta, os motores de busca usam um trecho do site.

É inserida basicamente da mesma forma que as palavras chave, sendo a única diferença o atributo name="description":

<meta name="description" content="Essa é a descrição do seu site">

Idioma

A especificação do idioma da página é usada pelos motores de busca para apresentar sua página como resultado de busca no idioma em que esta e também é usada pelos navegadores para ajustar o corretor ortográfico para a linguagem da página.
É definido usando o seguinte código, onde pt-br é a sigla do idioma, neste caso, Português do Brasil:

<meta http-equiv="content-language" content="pt-br">

Cada idioma tem sua sigla, exemplos: francês: fr; inglês: en. Como é provável que raramente você vai desenvolver páginas fora desses idiomas, não listaremos todas as siglas no momento.

Autor

A especificação de do Autor, isto é, a pessoa que escreveu um artigo, é usada pelos motores de busca e o nome do autor pode aparecer nos resultados de busca, embaixo do link do respectivo artigo. É inserido com o código:

<meta name="author" content="Nome do autor">

Essa especificação não é tão vital e não influencia tanto nos resultados de busca, mas pode ser interessante se o autor quiser deixar bem claro sua autoria.

Endereço de e-mail para contato

O endereço de e-mail para contato com o responsável pelo site pode ser necessário caso algum visitante do site deseje entrar em contato para notificar algum problema no site ou por outro motivo. Insere-se com o seguinte código, substituindo o exemplo "desenvolvedor@portal.com" pelo e-mail para contato:

<meta name="reply-to" content="desenvolvedor@portal.com">

Ao ser inserido por meta tag poderá ser útil para mecanismos automatizados, mas é recomendável inserir tal informação também como link na página.

Definindo a indexação ou não de uma página

Pode ser necessário esconder uma página dos motores de busca, fazendo com que ela não apareça em nenhum resultado a qualquer pesquisa, quando ela é uma dependência de outra página e só faz sentido se exibida a partir da outra, como no caso do uso de frames, que estudaremos mais adiante; ou quando você tem um site ou blog reservado que você deseja exibir a apenas alguns amigos e não precisa de divulgação. Também é possível definir se os os links da página inicial do site deverão ser indexados ou não.
O código para definir que uma página e os links da página inicial deverão ser indexados é:

<meta name="robots" content="index,follow">

Isso é definido pelos dois valores do atributo content. O primeiro define a indexação ou não da página e pode ser index (para positivo) ou noindex (para negativo). O segundo valor define a indexação ou não dos links e suas respectivas páginas da página inicial e pode ter os valores follow (para positivo) ou nofollow (para negativo).
Para que o motor de busca Google não indexe mais conteúdo do seu site e o apague do índice após a próxima varredura, quando o buscador atualiza o índice, utilize este código:

<meta name="googlebot" content="noindex,nofollow">

A maioria dos motores de busca armazena uma cópia do site para otimizar e acelerar a busca. Para evitar que seu site passe por esse processo utilize este código:

<meta name="robots" content="noarchive">

Atualizando ou redirecionando página

É possível fazer com que uma página se atualize ou redirecione para outra página automaticamente após um tempo definido em que o navegador permaneceu na página, utilizando uma meta tag. Por exemplo, para fazer com que uma página se atualize após 10 segundos em que o usuário permaneceu nela, utiliza-se:

<meta http-equiv="refresh" content=" 10; url=http://www.seusite.com/">

Onde o valor 10 equivale a quantidade de segundos que o usuário deve permanecer na pagina para que ela se atualize e o valor url=http://www.seusite.com/ equivale a url= mais o endereço da própria página a se atualizar. Para redirecionar a página para outra, basta colocar o endereço da página para onde se quer redirecionar após "url=".

Tipo de conteúdo e codificação

A especificação do tipo de conteúdo e da codificação é importante para que o navegador possa interpretar o arquivo corretamente. Define-se o tipo para texto / HTML e a codificação de texto para iso-8859-1 usando:

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

Se desejássemos criar uma página em XML ou XHTML, formatos similares ao HTML, bastaria substituir o valor text/html por text/XML ou text/XHTML.
A codificação define o conjunto de caracteres a ser usado. Os caracteres usados para o idioma chinês por exemplo são diferentes dos usados na escrita ocidental, embora existam codificações UTF universais. Caso desejassemos usar a codificação UTF-8 deveríamos substituir o valor charset=iso-8859-1 por charset=UTF-8.

Gerador

Ao abrir uma página criada determinado aplicativo de desenvolvimento, o sistema operacional a abre utilizando o mesmo programa com que foi criada, devido a que o aplicativo inclui uma tag que informa que a página foi criada com ele. Olhando o código-fonte de uma página criada com o Microsoft Front Page 5, por exemplo, vamos encontrar o seguinte código dentro da sessão head:

<meta name="generator" content="Microsoft FrontPage 5.0">

onde o valor do atributo content equivale ao nome pela qual o sistema reconhece o aplicativo.

No capítulo anterior estudamos as tags. Neste capítulo estudaremos seus atributos.
Os atributos definem as propriedades de uma tag. São usados no formato atributo="valor", após o nome da tag, entre os sinais "<" e ">" na tag de abertura. Por exemplo, o atributo src, da tag da imagem:

<img src="http://images.com/imagens/imagem001.jpg"/>

Ele define a URL da imagem a ser inserida.
Como foi possível perceber, o propriedade deve estar seguida de seu valor entre aspas, após o sinal igual (=).
Algumas propriedades do HTML, como width e height, que definem altura e largura, podem existir como atributos CSS, por isso, não estranhe se encontrá-las no CSS.
Quaisquer dúvidas, utilize nosso fórum e iremos responder assim que possível.