O Básico da web

HTML – Esqueleto de um documento HTML – Parte 3: Outros elementos do HEAD

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:

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!

Postado por Bruno Torres em 29 Out 2006 Categorias: Web

6 Comentários »

Comprar:

HTML – Esqueleto de um documento HTML – Parte 2: HTML e HEAD

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á.

Postado por Bruno Torres em 28 Out 2006 Categorias: Web

4 Comentários »

Comprar:

HTML – Esqueleto de um documento HTML – Parte 1: DOCTYPE

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.

Postado por Bruno Torres em 27 Out 2006 Categorias: Web

8 Comentários »

Comprar:

HTML – Introdução

Comecei esse blog falando de HTTP, que é o que há de mais básico na web e que deveria correr naturalmente nas veias de todos que trabalham de alguma maneira com web. Estive pensando se deveria criar mais posts sobre o assunto, aprofundar um pouco, mas acho que ainda não é a hora.

É hora de falar de outra tecnologia que também tem precisa estar, entre um glóbulo vermelho e outro, em grande quantidade, na nossa corrente sangüínea.

Como sempre, vamos começar do começo. E, é claro, vamos por partes.

HTML é uma linguagem de marcação de texto. Mais especificamente, uma linguagem de marcação de hipertexto. Portanto, antes de começar a falar de HTML, vamos entender o que vem a ser uma linguagem de marcação.

Linguagens de marcação

Linguagens de marcação (markup languages em inglês), são linguagens que combinam texto com informações extras sobre o texto. Essa informação extra pode ser representada por diversos símbolos ou palavras-chave diferentes, dependendo da linguagem de marcação com que estivermos trabalhando.

No caso do HTML — e de outras linguagens da mesma classe, que são linguagens de marcação descritiva — a informação extra é representada pelo que chamamos de tags. Falaremos mais de tags daqui a pouco.

O importante é saber que essa informação extra (que vamos chamar daqui pra frente apenas de tags, por praticidade) serve para descrever ou dar significado à parte do texto que estiver marcada com ela. A isso chamamos semântica, que podemos dizer que é o conceito chave que precisamos absorver para entender de fato o funcionamento de uma linguagem de marcação.

Resumindo, uma linguagem de marcação descritiva de texto serve pura e simplesmente para dar significado especial a determinadas partes desse texto. Isso vai ficar mais claro mais a frente, acreditem em mim. Não mudem de canal, crianças.

SGML

SGML significa Standard Generalized Markup Language (Linguagem Padrão de Marcações Genéricas, em português) e podemos dizer que é a linguagem-mãe do HTML (e também do XML e de outras linguagens, como DocBook, por exemplo).

A SGML é o que podemos chamar de uma meta-linguagem, ou seja, uma linguagem destinada a criar outras linguagens. Não vamos nos aprofundar em SGML, não é o nosso foco. Apenas é importante saber que as regras que se aplicam ao HTML são derivadas da SGML. Inclusive o conceito de tags para descrever semanticamente o papel de determinado conteúdo dentro de um documento.