O Básico da web

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!

Leia também:

• HTML - Esqueleto de um documento HTML - Parte 2: HTML e HEAD
• HTML - Esqueleto de um documento HTML - Parte 1: DOCTYPE
• Título editável - exemplo de JavaScript/DOM
• Padrões web: Desenvolvimento em camadas - Camada de comportamento
• Protocolo HTTP: métodos de requisição
• Hospedagem de sites Dreamhost: 50% de desconto