Introdução ao XHTML e CSS – Parte 1
Eu vou dar uma pausa na série Como criar um tema para WordPress. O motivo é simples: acho importante mostrar o básico de XHTML (e no final da série, mostrar o básico de HTML 5). Lembrando que essa série será menor do que a “Como criar um tema”. E a periodicidade de artigos será maior: vou tentar lançar duas “partes” por semana. Com o WordPress será uma “parte” por semana.
O XHTML é tão importante para um tema WordPress quanto o código PHP. Sem esses dois requisitos, o site simplesmente não existe. Estou cursando Sistemas para Internet, na Faculdade Marista. No primeiro período teve introdução ao HTML mas, estranhei muitas coisas (já que estou adaptado ao padrão válido). Por exemplo, alguns recursos ensinados pelo professor já estavam em desuso fazia uns dois anos, no mínimo. Mas, para quem estava começando mesmo, aquilo era o básico (MESMO).
Felizmente, esse não é o foco do DicasWP. Não quero ensinar aos visitantes, a forma “errada” de se fazer. E por isso, vamos começar ensinando o básico, válido, do XHTML.
A estrutura de uma página XHTML é bem simples: possui um cabeçalho (chamado header) onde fica localizado o nome da página, as informações meta (calma que vamos chegar lá), scripts e eventuais referencias à outros arquivos. Depois disso vem o corpo (chamado body) é aqui que ficará todo o conteúdo do site. Essas duas estruturas estão dentro da tag HTML que engloba todo o site.
O topo do site, geralmente, começa com a tag DOCTYPE. Também conhecido como DTD (Document Type Definition – Definição do tipo de documento). Ele define quais regras os navegadores devem seguir. A W3C define três Doctypes para o XHTML 1.0 (o que vamos utilizar aqui):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Cada um difere entre si: Strict é uma regra mais rígida, Transitional possui menos regras já que é “transição” e inclui alguns recursos que estão em desuso (o Strict não permite) e o Frameset é usado em sites que possuam frames (dica: não usem) (ele aceita todas as tags do Transitional + Frames).
Em seguida, é preciso “abrir” o código HTML.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
É importante você definir o “lang”, por questões de validação e acessibilidade. Inclusive, os blogs: Acessibilidade Legal e Revolução Etc possuem dois ótimos artigos sobre isso. Você pode ver alguns idiomas suportados no site do W3CSchool.
Temos o doctype, o html, o que falta agora? Ele mesmo… O Head é o cabeçalho do site. Geralmente definimos nessa área: scripts, css, códigos meta, título do site. Os scripts são códigos, geralmente em javascript que complementam ou adicionam uma funcionalidade ao site. Aqui no @dicaswpbr, por exemplo, essa função de auto-completar o texto com o arroba, é feito graças ao script do Twitter.
O CSS é todo o visual do site. Inclusive, esse arquivo é o principal fator que levou os sites a melhorarem o seu visual e principalmente: os seus códigos. Antigamente, você definia cores das fontes, tamanho, etc., tudo no mesmo código. Ficava difícil de modificar depois e principalmente, era muito trabalhoso. Com o CSS você pode editar todo o estilo do site, com um arquivo “independente”.
Os códigos META são informações que descrevem o conteúdo do site para buscadores. Existem várias tags meta. As principais são: keywords, description, robots e content-type.
Keywords são palavras-chaves que definem o conteúdo do seu texto ou do seu site. Por favor, não adianta escrever um artigo sobre Culinária e colocar qualquer palavra-chave caça-paraquedista que não esteja no foco do seu blog. Todas as palavras devem ser separadas por vírgulas.
Description é a descrição do seu texto ou do seu site. Foque no artigo ou no site, já vi ótimos blogs/sites escrevendo descrições horríveis. O máximo de caracteres é 160. Você até pode digitar mais mas, elas serão “cortadas” pelos buscadores.
Robots é basicamente se você permite, ou não, que os “robôs” dos buscadores acessem seu site/blog. Nesse caso, recomendo a substituição pelo arquivo robots.txt. Mas, já que ainda estamos em XHTML… esses são os valores que a tag aceita:
<meta name="robots" content="index,follow" /> <meta name="robots" content="noindex,follow" /> <meta name="robots" content="index,nofollow" /> <meta name="robots" content="noindex,nofollow" /> <meta name="robots" content="noarchive" />
O que significa cada valor? “index, follow”: indexa a página inicial e todas as páginas nela referenciadas; “noindex, follow”: não indexa a página inicial mas, indexa todas as páginas nela referenciadas; “index, nofollow”: indexa a página inicial mas, não indexa as páginas que a inicial está linkando; “noindex, nofollow”: não indexa a página inicial nem as páginas referenciadas; “noarchive”: serve para não indexar uma cópia da página em cachê. Fonte.
O Content-type serve para especificar o conteúdo da página e o conjunto de caracteres utilizados por ela (codificação). As duas codificações mais utilizadas atualmente, são: ISO-8859-1 e UTF-8. Todas as tags META devem ser fechadas. A última tag do artigo é: title. E serve apenas para definir o título da página.
Agora já podemos fechar o cabeçalho da página e começar o corpo da página. Primeiro, vamos abrir a tag “corpo”:
<body>
Recomendo, para depois não esquecerem, de fechar todas as tags abertas. O Dreamweaver e o Coda fazem isso automaticamente. Mas, só para mostrar: esse é o nosso código atual:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="keywords" content="exemplo, palavra, chave, dicas, wp, temas, tutorais" /> <meta name="description" content="Exemplo de palavras chaves e tutorial sobre HTML no DicasWP" /> <meta name="robots" content="nofollow" /> <title>Primeiro Exemplo do Tutorial</title> </head> <body> </body> </html>
E como vocês podem perceber, só vamos continuar na próxima parte da série. Até sexta-feira. :-)
2 Comments