Depois de um longo inverno, estou pretendendo voltar a escrever por aqui. Como o meu blog principal, Bruno Torres ponto net vem mudando de foco com o tempo (e acredito que vá mudar muito ainda, de acordo com as mudanças na minha vida, tanto pessoal quanto profissional) acho que esse aqui é o espaço ideal para voltar a escrever textos sobre desenvolvimento web.
O meu maior problema em voltar a escrever aqui é que acho que esse nome “O básico da web” tem me feito sentir um pouco engessado sobre os temas que devo abordar.
Além disso, comecei a fazer posts em série, no estilo curso de html, e isso acabou não me agradando, e a vontade de continuar escrevendo foi diminuindo.
Porém, este blog tem hoje incríveis 900 assinantes, o que é muito para um blog tão pequeno, com tão pouco conteúdo. Imagino que boa parte desses assinantes (ou seja, vocês, que estão lendo isso agora) vieram do outro blog e isso me faz pensar mais duas vezes antes de escrever. E aí acabo não escrevendo.
A minha idéia com esse post é tentar entender o que vocês esperam encontrar por aqui. Eu acho que devo abandonar esse esquema de posts sequenciais sobre um mesmo tema e escrever sobre o que me der na telha, ou o que estiver em foco ou, melhor ainda, o que vocês quiserem.
Sendo assim, peço àqueles que estiverem afim de ajudar, que usem o formulário de contato, ou me escrevam um email diretamente, ou façam comentários, sugerindo temas, me ajudando a definir qual o futuro do conteúdo desse espaço.
E então. Alguém afim de ajudar? Não precisa fazer trackback nem pingback (aliás, se não souberem o que é isso, me avisem 
). Só quero idéias e sugestões para fazer desse espaço um lugar melhor para aqueles que querem aprender mais sobre a web.
Conto com vocês!
Vamos continuar a falar sobre os elementos que compõem o HEAD de um documento HTML.
Elemento STYLE
O elemento STYLE serve para aplicar estilos diretamente dentro do documento HTML. É importante notar que para reforçar a questão da separação em camadas, devemos evitar ter estilos aplicados desta forma.
Vejamos um exemplo:
<style type="text/css" media="screen">
body{ font: normal 1em verdana, helvetica, sans-serif;}
div{ width: 750px; padding:10px; }
</style>
O elemento STYLE também pode ser usado para referenciar um documento CSS externo. Isso já foi muito usado para “esconder” os estilos de browsers antigos (como o Netscape 4), porém tome cuidado pois pode causa um efeito chamado FOUC, que faz com que, por um pequeno espaço de tempo, o conteúdo apareça sem nenhum estilo. Este problema é resolvido incluindo um ou mais elementos SCRIPT ou LINK dentro do HEAD do seu documento.
<style type="text/css" media="screen">
@import url(estilo.css);
</style>
Hoje esta forma já não é a única forma simples de se esconder estilos de browsers antigos. Usar um LINK com duas ou mais mídias, separadas por uma vírgula e um espaço, no atributo media, tem o mesmo efeito:
<link rel="stylesheet" type="text/css" href="estilo.css" media="screen, projection">
Elemento SCRIPT
O elemento SCRIPT serve tanto para conter scripts inteiros quanto para referenciar um script externo. Geralmente esses scripts são escritos na linguagem JavaScript. Exemplo:
<script type="text/javascript">
window.onload = function() { alert('Olá, mundo!') }
</script>
Desta forma, o script inteiro está contido no elemento SCRIPT.
Apesar de ser, em geral, melhor colocar todos os elementos SCRIPT de uma página dentro do HEAD, isso não é mandatório. Algumas vezes pode ser necessário que o script esteja localizado dentro do corpo (BODY) do documento e não há grandes problemas nisso. Falaremos desse assunto em breve, mas você pode ver algumas coisas sobre JavaScript no meu artigo sobre a camada de comportamento.
A outra forma de se usar o elemento SCRIPT é com o atributo src contendo a localização (URL) de um arquivo de script externo:
<script type="text/javascript" src="/js/script.js"></script>
Desta forma o script contido no arquivo script.js será executado logo que o elemento SCRIPT for interpretado pelo browser.
É importante notar que, de todos os elementos contidos no HEAD, apenas o SCRIPT precisa de uma tag de fechamento. E é vital que você nunca esqueça dessa tag de fechamento, pois pode fazer com que sua página apareça totalmente em branco em alguns browsers. Já já vamos entender porque alguns elementos precisam ser fechados e outros não e porque alguns tem conteúdo e outros não. Sejam pacientes.
Elemento NOSCRIPT
O elemento NOSCRIPT serve para definir um conteúdo alternativo a um script, que apenas será exibido caso o user-agent usado não tenha suporte a scripts ou esteja com esse suporte desabilitado.
Em geral, devemos desenvolver nossas páginas de forma que a camada de conteúdo seja, por si só, suficiente para que um usuário possa executar qualquer tarefa. Porém, em alguns casos, isso não é possível. Sendo assim, devemos usar o elemento NOSCRIPT para informar ao usuário que seu user-agent não tem suporte a scripts e que uma determinada função da página só pode ser usada (ou visualizada) na presença deste suporte. Exemplo:
<noscript>
<p>É necessário que haja suporte a javascript para que a função x bla bla bla</p>
</noscript>
Assim como o elemento SCRIPT, o NOSCRIPT pode ocorrer tanto dentro do HEAD quanto dentro do BODY de um documento HTML.
E aqui termina o que tinha a ser dito sobre o elemento HEAD e seus “filhos”. Com certeza, em artigos futuros desta mesma série, voltaremos a falar destes elementos, para explicar alguma especificidade que não tenha sido necessária explicar até aqui ou que necessite de algum conceito que ainda vamos aprender. Continuem comigo!
Vamos continuar desmontando o esqueleto básico do nosso documento HTML de exemplo. Antes de começar essa parte, vamos relembrar o código de exemplo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="pt-br"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Título da minha página</title> <link rel="stylesheet" href="/c/style.css" type="text/css" media="screen, projection"> </head> <body> <div id="conteudo"> </div> </body> </html>
O que nos interessa para este post é o código que vai da linha 2 à linha 7 do código acima. O elemento HTML e o elemento HEAD e seus “elementos-filho”.
Elemento HTML e o atributo lang
O elemento HTML é descrito pela tag <html>, e é o elemento raiz de todo documento HTML.
Segundo o DTD do HTML 4.01 Strict, o elemento HTML não precisa ter nem sua tag de abertura nem sua tag de fechamento declaradas no documento. Isso acontece com diversos outros elementos e você vai poder checar por si mesmo cada um deles quando estivermos estudando a leitura e interpretação de DTDs.
Porém, como boa prática, vamos sempre usar as tags de abertura e fechamento para todos os elementos, salvo algumas exceções.
O mais importante de estudarmos com relação ao elemento HTML não é o elemento em si, mas sim seu atributo lang.
O atributo lang pode ser usado em quaisquer elementos do HTML, porém ele é especialmente importante para o elemento HTML, pois serve para definir o idioma predominante no documento.
No caso do nosso documento de exemplo, o idioma que estamos declarando é o pt-br, ou seja, português do Brasil.
O valor do atributo lang pode ser apenas um código de idioma ou um código de idioma seguido de um código de país.
Códigos de idioma devem seguir o padrão ISO-639-1 (códigos de duas letras) ou o ISO-639-2 (códigos de três letras). Você pode ver os valores possíveis em ambos os padrões na página de listagem de códigos de idioma, no site da biblioteca do congresso americano.
Códigos de país com duas letras devem seguir o padrão ISO-3166.
Não pode haver espaços dentro do atributo lang e os códigos de idioma e país devem ser separados por um hífem (-).
Declarar o idioma base do documento no elemento HTML é importante e essa informação pode ser usada, por exemplo, por um leitor de tela, para selecionar o idioma correto em que o documento será lido ou por um mecanismo de busca para classificar corretamente uma página em seus índices.
Quanto ao elemento HTML em si, não temos grandes coisas a falar. Sua tag de abertura deve vir logo após o DOCTYPE e sua tag de fechamento deve estar na última linha do documento. Ponto.
Elemento HEAD e seu conteúdo
O elemento HEAD deve ser declarado logo após a tag de abertura do elemento HTML e sua função é, basicamente, descrever meta-informações sobre o documento.
Essas meta-informações podem ou não ser visíveis para o usuário e algumas fazem sentido apenas em um determinado contexto ou para um determinado user-agent.
Os elementos que compõem o HEAD são: TITLE, o título do documento; META, descritor genérico de meta-informação, que tem diversas funções que veremos a seguir; LINK, que, ao contrário do que se pode pensar, não é o elemento que cria links dentro de um texto e, sim, links para formas alternativas de conteúdo, estilos CSS, páginas vizinhas, índices, e outras coisas mais; STYLE, que serve para declarar estilos dentro do próprio documento; SCRIPT, geralmente usado para conter ou referenciar scripts em JavaScript, mas pode ser usado para scripts em outras linguagens também; NOSCRIPT, que define um conteúdo a ser exibido caso o user-agent não tenha suporte a scripts
Vamos entender melhor cada um desses elementos:
Elemento TITLE
O título do documento. O elemento cujo conteúdo é mais relevante para os mecanismos de busca na hora de indexar e ranquear uma página.
Deve haver um, e apenas um, TITLE por documento HTML. Seu conteúdo deve, preferencialmente, descrever de forma simples e clara o conteúdo do documento e, em browsers gráficos, é o que será exibido no topo da janela do browser, em geral ao lado do nome deste.
Elemento META
Como já disse, existem diversos tipos de informação que podem ser descritas pelo elemento META. Alguns exemplos são:
O tipo de conteúdo e o conjunto de caracteres usado no documento: O META exibido no exemplo é desse tipo. Declara que o documento é do tipo text/html (ou seja, HTML) e que o conjunto de caracteres usado no documento é o UTF-8. Será usado pelo browser caso esta informação não seja enviada pelo servidor, no cabeçalho HTTP. Sempre declare este META como primeiro elemento do HEAD. Quanto antes ele vier no documento melhor, pois, caso ele precise ser usado, o browser terá que fazer uma releitura do documento e é melhor que isso seja feito enquanto poucos bytes, e principalmente, apenas caracteres ASCII, foram lidos.
O http-equiv indica que este META é uma informação equivalente a um cabeçalho HTTP.
<meta http-equiv="content-type" content="text/html; charset=utf-8">
Descrição do documento: uma breve descrição do conteúdo do documento, que pode ser usada por sites de busca como descrição do site em suas listagens.
<meta name="description" content="Coloque aqui a descrição do site">
Palavras-chave: listagem de palavras-chave relevantes ao conteúdo do documento, que podem ser usadas por sites de busca (embora hoje já não sejam mais tão relevantes) e, supostamente, para outros fins, como escolha de anúncios do Adsense, por exemplo.
<meta name="keywords" content="basico,web,html,http">
Além destes exemplos de META, existem outros vários. Vamos vê-los no momento oportuno.
Elemento LINK
O elemento LINK define uma relação entre o nosso documento e outros documentos. Existem diversos tipos de relações que podem ser definidas.
O tipo de relação entre os documentos é descrita pelos atributos rel e rev.
Para entender a diferença entre rel e rev, tente pensar da seguinte forma: Se você diz “O documento X é uma versão alternativa do meu documento”, você deve usar rel; já se você disser “O meu documento é uma versão alternativa do documento X”, use rev.
Calma, vai ficar mais claro com os exemplos.
Vejamos alguns:
Documentos adjascentes e índices
Imagine um livro online. Você está escrevendo o documento que tem o conteúdo do capítulo 2. É interessante criar LINKs para o capítulo anterior, o próximo capítulo e o índice do livro. Esses LINKs podem ser usados, por exemplo, pelo browser, que pode fazer um pré-carregamento destas páginas enquanto estiver parado. Existe uma extensão para o Firefox que expõe, na barra de status, os LINKs presentes no documento. Chama-se Link Widgets.
Exemplos:
<link rel="Next" href="/capitulo-2">
<link rel="Previous" href="/capitulo-1"
<link rel="Index" href="/">
Pense: “O capítulo 2 é o próximo capítulo em relação a mim, que sou o capítulo 1″. rel na cabeça. Também seria certo, por exemplo:
<link rev="Previous" href="capitulo-2">
Ou seja: “Eu sou o capítulo anterior ao capítulo 2″. Pescou?
Versões alternativas
O tipo mais comum de versão alternativa são os feeds RSS e ATOM.
<link rel="alternate" type="application/rss+xml" href="/feed">
Note o atributo type. Ele descreve o tipo do documento que estamos referenciando. No caso, um feed RSS. Caso não seja declarado, entende-se que seja do mesmo tipo que o documento onde se encontra o link, no caso, text/html.
Além de feeds, podemos ter outros tipos de versões alternativas. Um PDF, por exemplo:
<link rel="alternate" type="application/pdf" media="print" href="arquivo.pdf">
Aqui entra em cena o atributo media, que define que este documento só fará sentido como uma versão alternativa, caso esta mídia esteja sendo usada. No nosso caso, print, ou seja, impressão.
Folhas de estilos CSS
Podemos usar o elemento LINK para aplicar uma folha de estilos CSS a um documento HTML. Exemplo:
<link rel="stylesheet" type="text/css" href="estilo.css" media="screen">
Este link diz que o documento referenciado é uma folha de estilos para o nosso documento, do tipo text/css e que deve ser aplicado apenas quando a media screen (ou seja, tela) esteja sendo usada.
Bem, o artigo já está longo demais. Vamos deixar o restante dos elementos do HEAD para amanhã. Até lá.
Ontem vimos uma introdução ao HTML. Sim, eu sei, foi chata. Mas não tinha muito jeito, era necessário apresentar alguns conceitos àqueles que estão realmente começando a estudar HTML.
Hoje, pra começar a ficar um pouco mais interessante, vamos colocar a mão na massa. Vamos ver como é a base de um documento HTML e entender como funciona e pra que serve cada uma de suas partes.
Pra começar, um documento de exemplo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="pt-br">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Título da minha página</title>
<link rel="stylesheet" href="/c/style.css" type="text/css" media="screen, projection">
</head>
<body>
<div id="conteudo">
</div>
</body>
</html>
Isso que vocês vêem aí em cima é nada mais nada menos que um documento HTML.
Vamos entender o que está descrito ali em cima e pra que serve cada um desses códigos malucos.
Bem, eu sei que disse que isso ia começar a ficar interessante. Não era totalmente verdade. Neste post vamos falar sobre a primeira linha do nosso documento de exemplo. A declaração de DOCTYPE. Pode ser um pouquinho chato, mas, acreditem, é muito importante. Vamos a ele.
DOCTYPE
A primeira linha de todo documento HTML deve ter uma declaração de DOCTYPE. Nunca se esqueçam, sempre na primeira linha, explico porque depois.
O DOCTYPE é uma referência a um DTD, que significa Document Type Definition (em português, Definição de Tipo de Documento). Um DTD é um documento onde estão definidas as regras para a criação de um documento HTML (existem DTDs pra outros tipos de documento, mas vamos manter o foco). Nele estão descritos os elementos que podem ser usados, quais elementos podem estar dentro de outros elementos, que tags descrevem esses elementos, se um elemento tem conteúdo ou não, se é necessário ter tag de abertura e/ou de fechamento. Enfim, tudo que pode ou não ser usado dentro do nosso documento.
Mais a frente vamos ver como ler e entender um DTD, por enquanto vamos nos ater ao DOCTYPE do nosso documento apenas.
Uma declaração de DOCTYPE é dividida em duas partes, um identificador público (public identifier) e uma URI.
O identificador público diz que tipo de documento está sendo usado:
-//W3C//DTD HTML 4.01//EN
Este é o identificador público do HTML 4.01 Sctrict, que é o que vamos usar daqui pra frente, em todos os nossos exemplos.
A URI aponta para o endereço do DTD na web:
http://www.w3.org/TR/html4/strict.dtd
Note que no exemplo acima, nosso DOCTYPE está dividido em duas linhas. Se você preferir, pode usar uma linha apenas, mas tome o cuidado de incluir um espaço entre o identificador público e a URI.
É extremamente importante identificar o DOCTYPE em todos os seus documentos HTML. Caso contrário, seu browser pode interpretar seu documento de maneira estranha, causando problemas que seriam facilmente evitados caso o DOCTYPE estivesse presente.
Um browser, ao encontrar a declaração de DOCTYPE não vai ler o documento referenciado em sua URI e interpretar o HTML de acordo com ele. Porém, ele vai se basear no identificador público e na presença ou não de uma URI para decidir como interpretar o documento. Na verdade, isso vai influir na maneira como estilos CSS são aplicados ao documento HTML.
Em geral, os browsers têm duas formas de interpretar um documento: Strict Mode, ou Standards Compliance Mode, onde as especificações são seguidas à risca e Quirks mode (Modo de compatibilidade), onde o browser vai deixar passar alguns erros, interpretando o documento mais ou menos como versões mais antigas de browser o fariam. Vamos estudar com calma estes modos de interpretação (além de um outro, usado pelo Mozilla) mais a frente.
Strict, Transitional ou Frameset
Existem três tipos de DOCTYPEs que podemos usar em nossos documentos HTML. Strict, Transitional e Frameset. Qual a diferença entre eles e qual devemos usar?
O DOCTYPE Transitional é, como o nome diz, uma transição entre versões mais antigas do HTML e a versão mais nova, 4.01. Nele temos alguns elementos e atributos que definem apenas apresentação e não semântica (Leia meu texto sobre desenvolvimento em camadas) e devem, a rigor, ser eliminados de nossos documentos. Além disso, um DOCTYPE HTML 4.01 Transitional faz com que a maioria dos browsers trabalhe em modo de compatibilidade, o que não é nada desejável. Portanto, o DOCTYPE Transitional deve ser evitado a todo custo. Não use nunca.
Já o DOCTYPE Strict é uma evolução do Transitional, que elimina todos esses elementos e atributos meramente de apresentação e deixa apenas os elementos que realmente carregam consigo algum significado específico. Este é o DOCTYPE que devemos usar, sempre.
O Frameset serve apenas para o caso de você precisar usar frames nos seus documentos. Mas você não quer fazer isso, né? Se quiser, depois vou te dar alguns bons motivos pra tirar essa idéia da cabeça.
