Tecnologia Hoje: 2014

Introdução ao HTML:

Quando você olha para uma página de Internet em um navegador, você enxerga, em um nível mais básico, palavras. Estas palavras geralmente tem algumas características de estilo, como diferentes tamanhos de fontes e cores. Em muitos casos uma página também exibe imagens ou talvez vídeo. Algumas vezes existe um formulário onde você pode inserir (ou procurar por) informação, ou personalizar a exibição da página ao seu gosto. Freqüentemente uma página contém conteúdo animado e conteúdo que muda enqüanto uma página permanece a mesma.

Várias tecnologias (como CSS, JavaScript, Flash, JSON) podem ser usadas para definir os elementos de uma página. Contudo, no nível mais baixo, uma página de Internet é definida usando HTML (HyperText Markup Language, ou Linguagem de Marcação de HiperTexto). Sem HTML não haveria página de Internet.

Este artigo fornece uma introdução ao HTML. Se você já se perguntou o quê acontece por trás das cenas em seu navegador de Internet, este artigo é o lugar para começar a aprender.

Uma breve história do HTML

No final dos anos 80, Tim Berners-Lee estava trabalhando como físico no CERN (a Organização Européia de Pesquisa Nuclear). Ele projetou um modo para cientistas compartilharem documentos pela Internet. Antes de sua invenção, a comunicação pela Internet era limitada à puro texto, usando tecnologias como email, FTP (Protocolo de Transferência de Arquivos) e fóruns de discussão baseados na Usenet. A invenção do HTML fazia uso de um modelo de conteúdo armazenado em um servidor central que seria transferido e visualizado em uma estaçã de trabalho local por meio de um navegador. Ela simplificou o acesso ao conteúdo e permitiu a exibição de conteúdos com visualização "rica" (como formatação de texto sofisticada e a exibição de imagens).

O que é HTML?

HTML é uma linguagem de marcação. Ela diz ao navegador de Internet como exibir conteúdo. O HTML separa o "conteúdo" (palavras, imagens, áudio, vídeo, e assim por diante) da "apresentação" (a definição do tipo de conteúdo e as instruções de como este conteúdo deve ser exibido). HTML 8usa um conjunto pré-definido de elementos para identificar tipos de conteúdo. Elementos contém um ou mais "tags" que contém ou expressam o conteúdo. Tags são delimitadas por sinais de maior e menor, e a tag de finalização (aquela que indica o fim de um conteúdo) é prefixada por uma barra.

Por exemplo, o elemento parágrafo consiste na tag de inicialização "" e na tag de finalização "

". O seguinte exemplo mostra um parágrafo contido dentro do elemento HTML parágrafo:

Meu cachorro comeu toda a guacamole.

Quando este conteúdo é mostrado em um navegador de Internet, ele se parece com:

Meu cachorro comeu toda a guacamole.

O Navegador usa as tags como um indicador de como exibir o conteúdo que está dentro das tags.

Elementos que contém conteúdo podem geralmente também conter outros elementos. Por exemplo, o elemento de ênfase ("") pode ser colocado dentro de um elemento parágrafo:

Meu cachorro comeu toda a guacamole.

Quando exibido, isso se parece com:

Meu cachorro comeu toda a guacamole.

Alguns elementos não contém outros elementos. Por exemplo, a tag imagem ("<img>") simplesmente especifica o nome do arquivo do conteúdo (uma imagem) como um atributo:

<img src="smiley.jpg">

Quando exibido, aparecerá asim:

Freqüentemente uma barra é colocada antes do último sinal de maior para indicar o fim de uma tag. Isso é opcional no HTML, mas obrigatório em XHTML (que é um esquema XML que implementa elementos HTML).

O resto deste artigo entra em maiores detalhes com relação aos conceitos introduzidos nesta seção. No entanto, se você quiser ver o HTML em ação, cheque o Mozilla Thimble, que é um editor on-line interativo que ensina à você como escrever marcação HTML. Também veja os Elementos HTML para uma lista de todos os elementos disponíveis e uma descrição de seu uso.

Elementos - os blocos básicos de construção

HTML consiste em um conjunto de elementos. Elementos definem o conteúdo semântico de seu conteúdo. Elementos incluem tudo entre duas tags de elementos que casam entre si, incluindo as próprias tags. Por exemplo, o elemento "" indica um parágrafo; o elemento "<img>" indica uma imagem. Veja a página dos Elementos HTML para uma lista completa.

Alguns elementos possuem um significado bastante preciso, como em "isto é uma imagem", "isso é um título" ou "isto é uma lista ordenada". Outros são menos específicos, como em "isto é uma seção da página" ou "isto é uma parte de texto". Ainda outros são usados por razões técnicas, como em "isto é a identificação para a página e não deve ser exibido". De qualquer forma, de um jeito ou de outro, todos os elementos HTML possuem um valor semântico.

A maioria dos elementos podem conter outros elementos, formando uma estrutura hierárquica. Uma página de Internet muito simples, mas completa se parece com isso:

<html><body>Meu cachorro comeu toda a guacamole.</body></html>

Como você pode ver, elementos <html> cercam o resto do documento, e elementos <body> cercam o conteúdo da página. Essa estrutura é freqüentemente pensada como sendo uma árvore com ramos (neste caso, os elementos <body> e ) crescendo de um tronco (<html>). Esta estrutura hierárquica é chamada de DOM: o Modelo de Objeto de Documentos.

Tags

Documentos HTML sao escritos em texto puro. Eles podem ser escritos em qualquer editor de textos (embora a maioria dos autores HTML prefiram usar um editor especializado que marca a sintaxe e mostra o DOM). Nomes de tags podem ser escritas tanto em letras maiusculas como minusculas. Contudo, o W3C (o consórcio global que mantém o padrão HTML) recomenda usar letras minúsculas (e o XHTML exige que sejam sempre letras minúsculas).

O HTML atribui significado especial à qualquer coisa que comece com o sinal de menor ("<") e termine com o sinal de maior (">"). Tais marcações são chamadas de tags. Tenha a certeza de sempre fechar cada suas tags, já que embora algumas sejam fechadas por padrão, outras podem produzir erros inesperados se você esquecer de finalizá-las.

Eis aqui um exemplo simples:

Isso é texto dentro de um parágrafo.

Neste exemplo existe uma tag de início e uma tag de fim. Tags de fim são iguais às tags de início, mas também contém uma barra logo depois do sinal de menor inicial. A maioria dos elementos HTML são escritos usando tanto tags de começo e de fim. Tags de começo e de fim devem estar corretamente aninhadas, isto é, tags de fim devem ser posicionadas na ordem contrária das tags de início. O aninhamento adequado é uma regra que deve ser obedecida para que se possa escrever código válido.

Este é um exemplo de código válido:

Eu realmente quiz dizer aquilo.

Este é um exemplo de código inválido:

Invalid: Eu realmente quiz dizer aquilo.

Note que no exemplo válido, a tag de fim para cada elemento aninhado é sempre colocada antes da tag de fim do elemento no qual ele está aninhado.

Até a adoção das regras de análise léxica do HTML5, navegadores não interpretavam código inválido da mesma forma e produziam diferentes resultados quando encontravam código inválido. Navegadores eram tolerantes com falhas de autores Web, mas infelizmente nem todos exatamente da mesma forma, resultando em resultados quase imprevisíveis em caso de HTML inválido. Nos dias de hoje, isso já não é mais o caso com as últimas evoluções dos navegadores, como o Internet Explorer 10, Firefox 4, Opera 11.60, Chrome 18 ou Safari 5, já que eles implementam as regras de análise de código inválido agora padronizadas. Código inválido resulta na mesma árvore DOM em todos os navegadores modernos.

Alguns elementos não contém qualquer texto ou qualquer outro elemento. Estes são os elementos vazios que não precisam de tags de encerramento. Este é um exemplo:

<meta charset="utf-8">

Muitas pessoas marcam elementos vazios usando uma barra no final da tag (a qual é obrigatória em XHTML).

<meta charset="utf-8" />

Em HTML esta barra não tem funcionalidade técnica e o seu uso é apenas uma escolha de estilo.

Atributos

A tag de início pode conter informações adicionais, como no exemplo acima. Tal informação é chamada de atributo. Atributos normalmente consistem em duas partes:

Um nome do atributo.

Um valor do atributo.

Alguns poucos atributos possuem somente um valor. Eles são atributos Booleanos e podem ser abreviados especificando somente o nome do atributo ou deixando o seu valor vazio. Assim, os seguintes 3 exemplos tem todos o mesmo significado:

<input required="required">
<input required="">
<input required>

Valores de atributos que consistem em uma única palavra ou número podem ser escritos diretamente, mas se existirem duas ou mais palavras no valor, ele deve ser escrito dentro de aspas. Tanto aspas simples (') como aspas duplas (") são permitidas. Muitos desenvolvedores preferem sempre usar aspas para deixar o código com aparência menos ambígua e para evitar erros. O seguinte exemplo está errado:

 (Cuidado, isso provavelmente não significa o que você acha que significa.)

Neste exemplo, o valor deveria ser "foo bar", mas como não há aspas no código, isso ´e interpretado como se fôsse:

Referências a nomes de caracteres

Referências à nomes de caracteres (freqüentemente chamadas casualmente de entidades) são usadas para mostrar caracteres que tem um significado especial em HTML. Por exemplo, HTML interpreta o sinal de menor e maior como delimitadores de tags. Quando você quer mostrar um sinal de maior no texto, você pode usar uma referência ao nome do acaractere. Existem quatro referências comuns à caracteres que uma pessoa deve conhecer:

> denota o sinal de maior, " > ".

< denota o sinal de menor, " < ".

& denota o sinal de apóstrofo, " & ".

" denota o sinal de aspas duplas, ' " '.

Existem muito mais entidades, mas estas quatro são as mais importantes por representar caracteres que tem um significado especial em HTML.

Doctype e comentários

Além das tags, conteúdo de textos e entidades, um documento HTML deve conter uma declaração doctype na primeira linha. A declaração doctype não é uma tag HTML; é uma instrução ao navegador de Internet sobre qual versão de HTML está sendo usada para escrever a página.

Em HTML 4.01, o doctype indica um DTD (Definição de Tipo de Conteúdo), já que ele foibaseado em SGML. Existem três diferentes declarações doctype em HTML 4.01.

HTML 4.01 Estrito

Este DTD contém todos os elementos HTML e atributos, mas NÃO INCLUI elementos de apresentação ou elementos obsoletos (como a tag "font"). Conjunto de frames não são permitidos.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 de Transição

Este DTD contém todos os elementos e atributos HTML, INCLUINDO elementos de apresentação ou obsoletos (como font). Conjuntos de frames não são permitidos.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 com Conjuntos de Frames

Ente DTD é igüal ao HTML 4.01 de Transição, mas permite o uso de conteúdo em conjuntos de frames.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Já em HTML 5, existe somente uma declaração e ela é escrita desta forma:

<!DOCTYPE html>

O doctype tem uma história longa e intrincada, mas por enquanto, tudo que você precisa saber é que este doctype pede ao navegador para interpretar o código HTML e CSS de acordo com os padrões W3C e não fazer de conta que é código para o Internet Explorer dos anos 90. (Veja "quirks mode").

HTML também possui um mecanismo para embutir comentários que não são mostrados quando a página é renderizada em um navegador. Isso é útil para explicar uma seção de marcação, ou deixar notas para outras pessoas que forem trabalhar na página, ou deixar lembretes para si mesmo. Comentários HTML são delimitados por símbolos desta forma:

Um documento completo, mas pequeno

Para mostrar tudo isso junto, eis um pequeno exemplo de um documento HTML. Você pode copiar este código para um editor de textos, salvá-lo como meuprimeirodocumento.html e abri-lo em um navegador. Tenha certeza de salvá-lo usando a codificação de caracteres UTF-8. Como este documento não usa estilos, ele parecerá bastante simples, mas é somente um pequeno começo.

<!DOCTYPE html><html lang="en"><head>
<meta charset="utf-8" />
<title>Um pequeno documento</title>
</head>
<body>
<h1>Título principal do meu documento</h1>

Ooolha, manhê, eu estou escrevendo código <abbr title="Linguagem de Marcação de Hipertexto">HTML</abbr>.
</body>
</html>

É isso aí! Bons estudos!

Tecnologia Hoje

quarta-feira, 10 de dezembro de 2014

Java e JavaScript: suas principais diferenças

terça-feira, 2 de dezembro de 2014

Tabela de cores HTML

quinta-feira, 13 de novembro de 2014

HTML

Introdução ao HTML:

O que é HTML?

Tags

Referências a nomes de caracteres

Doctype e comentários

<!DOCTYPE html>

domingo, 9 de novembro de 2014

Programação

Você já ouviu falar em linguagem de programação?

Mas o que é isso?