Manual Prático de HTML
Este é um pequeno guia de como criar documentos num formato amigável à
World Wide Web. Quando você navega na internet, praticamente todos as "páginas" pelas quais você passa estão escritas em HTML. Os requisitos para que você entenda o que está escrito aqui são:
- Saber navegar pela internet
- Saber mexer num editor de textos
- Um pouco de tempo livre
Este texto foi redigido pensando nas pessoas que terão um primeiro contato com o
HTML e também para aquelas que buscam uma visão geral do tópico de processamento de textos.
Índice
Processamento e Formatação de textos
Essa primeira seção tem apenas finalidade a cultural de informar o que é processamento de textos, como surgiu, os principais conceitos da edição em computador, etc. Se você já tem alguma noção nisso e quer partir direito pra prática, pule logo pra seção
HTML.
Texto e escrita
Primeiro os caras escreviam coisas na areia da praia ou em volta da fogueira. Talvez na mesma época descobriram que carvão e outras paradas serviam pra escrever em rochas e aí as primeiras histórias em quadrinhos foram criadas.
Um pouco depois, os parceirias inventaram papiros, pergaminhos e pigmentos, e aí aqueles símbolos de animais e forquilhas viraram épicos.
Aí, muito tempo depois, teve um cara que descobriu como seria muito legal se ele pudesse criar tipos móveis, encharcá-los de tinta e prensá-los em papel. E ele fez isso. E surgiram os primeiros contrabandistas de livros.
Você deve estar achando que agora vou falar que o próximo paradigma da informação veio com as televisões, os rádios, os computadores e as pixações de banheiro. Certo, as paredes de banheiro são o melhor sistema de publicação aberta já desenvolvido, mas ler coisas no computador é algo muito pouco confortável. Um jornal você pode dobrar, por no bolso ou usar de papel higiênico, mas duvido que alguém consiga fazer o mesmo com um laptop.
Mesmo que o computador não tenha roubado todo o espaço dos livros, ele ainda tem seus méritos. No campo onde eles tem algo em comum - transmisão visual de informações - o texto no computador possibilita um sequenciamento diferente da leitura do que no livro.
Texto puro
Dede o começo da computação, o computador interpreta todas as letras e símbolos gráficos - ou caracteres - como números. Na verdade, o processo é inverso: quando trata-se de texto, o computador interpreta números como texto. Confuso? Calma, vamos por partes: o computador é um dispositivo de manipulação de informações, mais especificamente informações
numéricas. Os computadores tem a limitação de só saber manipular números.
Então como fazer para que os computadores lidem com texto? Simples, basta criarmos uma correspondência entre números e os caracteres gráficos. A esses números dá-se o nome de
códigos de caracteres. O conjunto de todos os códigos é conhecido como
charset.
Se eu quiser, posso muito bem inventar um charset. Posso fazer, por exemplo, a típica associação que fazemos entre as letras, em ordem alfabética, e os números:
| Código | Caractere |
| 01 | A |
| 02 | B |
| 03 | C |
| 04 | D |
| 05 | E |
| 06 | F |
Podemos inventar qualquer charset, mas, quando desejamos que outras pessoas entendam nossas mensagens facilmente, devemos nos preocupar em criar um charset universal. Assim como muitas outras coisas na computação, existe uma certa padronização do charset. A maioria dos computadores usa o mesmo charset, conhecido como ASCII, que é a sigla para
American Standard Code for Information Interchange.
A tabela seguinte mostra um pedaço do charset ASCII:
| Código | Caractere |
| 65 | A |
| 66 | B |
| 67 | C |
| 68 | D |
| 69 | E |
| 79 | F |
A tabela ASCII pode ser vista
aqui.
Existe ainda o formato ASCII Extendido, que contém caracteres acentuados e outros símbolos além das letras do idioma inglês.
É importante ressaltar que nesse tipo de representação não há como distinguir entre uma letra e uma letra em
negrito ou letras com tamanhos diferentes, já que na tabela ASCII esses atributos, como tamanho e itálico, não existem. No ASCII, para cada letra só há uma manifestação tipográfica - no máximo duas, no caso de letra maiúscula e mínúscula - e o texto escrito usando apenas essa representação é chamado de
texto puro.
Por convenção, os nomes de arquivos que terminam com
.txt são arquivos de texto puro. Se você abri-los num editor de textos simples, como o
Bloco de Notas,
Nedit,
Emacs ou similar, verá apenas um texto em formatação ASCII.
Além do ASCII, um outro padrão de representação de caracteres muito poderoso é o
Unicode, que foi idealizado para representar qualquer caractere de qualquer alfabeto humano (incluindo aqueles de idiomas mortos). Por questão de simplicidade, não nos referiremos ao Unicode ao longo deste documento e sim ao ASCII Extendido.
Markup Language
Durante o período em que na computação os gráficos não eram muito desenvolvidos, o ASCII e outros padrões de texto puro foram suficientes. Com a expansão das capacidades do hardware de vídeo, surgiu a possibilidade de criar textos explorando cores, tamanhos e formas.
Na computação, o desenvolvimento aliado à retrocompatibilidade costuma ser uma constante. Retrocompatibilidade, no caso da edição de textos, quer dizer que os novos computadores suportam textos em negrito, itálico, etc, mas ainda funcionam em conformidade com o padrão ASCII. Mas como conciliar o padrão ASCII com todos esses atributos do texto?
A solução para esse aparente dilema foi a criação de processadores de texto. Esses processadores lidam com a chamada
Markup Language (Linguagem de Marcação), uma linguagem de formatação escrita em texto puro. Ãhn? Novamente, vamos por partes: um processador de texto é um programa que manipula textos de acordo com algumas instruções. No caso de processadores de texto gráficos, as instruções estão no próprio arquivo onde está o texto. Assim, se eu quiser escrever um texto em negrito, terei que passar essa instrução ao processador. No meu texto, terei que incluir algum aviso pro processador interpretar aquilo como uma instrução sobre a natureza gráfica do meu texto.
Para o computador não confundir as instruções com o texto, temos que padronizar as instruções, uma vez que elas também são escritas em texto puro. Existem muitas formas de se fazer isso. Aqui daremos o exemplo segundo a solução encontrada no padrão do html. Suponha que tudo num texto que estiver escrito entre parênteses será considerado como instrução pelo processador e tudo que estiver fora dos parênteses seja considerado como o texto a ser formatado pelo processador. Então, algo como:
TEXTO SIMPLES
(computador, o texto a seguir é em negrito!!)
TEXTO EM NEGRITO
(computador, o texto anterior foi em negrito!!)
TEXTO SIMPLES
Quando for interpretado pelo processador de textos, deverá produzir no monitor ou na impressora o seguinte:
TEXTO SIMPLES
TEXTO EM NEGRITO
TEXTO SIMPLES
Damos o nome de
caracteres reservados aos parênteses, pois eles servem como marcadores das instruções, e nisso consiste o Markup Language. Mas e se você quisesse escrever um texto entre parênteses, como por exemplo
(TEXTO EM NEGRITO)? Simples, é só fazer com que a combinação
((
seja interpretada pelo processador como apenas um parêntese, o mesmo acontecendo para os parênteses
)). Assim, nosso exemplo ficaria assim:
(computador, o texto a seguir é em negrito!!)
((TEXTO EM NEGRITO))
(computador, o texto anterior foi em negrito!!)
Considere novamente nosso primeiro exemplo:
TEXTO SIMPLES
(computador, o texto a seguir é em negrito!!)
TEXTO EM NEGRITO
(computador, o texto anterior foi em negrito!!)
TEXTO SIMPLES
Onde a saída produzida pelo processador de texto é:
TEXTO SIMPLES
TEXTO EM NEGRITO
TEXTO SIMPLES
Repare que nem todo o texto ficou em negrito. Apenas a porção de texto que está entre as instruções de
começar e
terminar o negrito é que foi afetado. A maioria dos comandos da maioria das linguagens de markup utiliza comandos que precisam ser
começados e
terminados, ou seja, são comandos de bloco, pois afetam uma seção do texto. Outros comandos não necessitam de serem terminados, como o caso de quebras de linha e novos parágrafos.
Resumindo, as linguagens de marcação consistem de instruções que ficam misturadas ao próprio texto e são interpretadas por um processador de textos, e a partir dessa interpretação é produzida uma formatação gráfica do texto. As linguagens de marcação mais modernas também suportam a formatação lógica do textos, isto é, sua divisão em cabeçalho, rodapé, notas, seções como capítulos, índice, bibliografia, etc. A formatação lógica ajuda tanto no estilo gráfico quanto na catalogação de textos em bancos de dados.
Editores "Puros" versus WYSIWYG
Existem duas formas de se criar um texto formatado através de linguagens de marcação. A primeira consiste em escrever o texto, usando as instruções da linguagem, num editor de texto puro. Em seguida, usa-se o processador de texto para produzir o texto formatado.
A outra maneira é usar um editor de textos
WYSIWYG (What You See Is What You Get - O Que Você Vê É O Que Você Tem). Apesar da sigla ser comprida, o conceito é simples: esse tipo de programa é composto por um editor de texto que também é um processador de textos formatados. A diferença aqui é que o texto que o usuário está editando e visualizando não é o texto puro, mas sim o texto já formatado graficamente, ou seja,
o que você vê é o que você tem.
Você provavelmente já usou editores desse tipo. Os editores como o Word, o AbiWord e o OpenOffice Writer são WYSIWYG e os documentos que eles geram utilizam linguagens de marcação.
Hipertexto
A formatação gráfica e lógica são duas das principais características do texto eletrônico. Elas definem um modo de escrever o texto. A outra característica importante no texto eletrônico reside na sua leitura. No texto eletrônico é possível criar referências dinâmicas que relacionem uma seção do texto com outra, e é permitido ao leitor, ao encontrar a referência, mudar de seção do texto ou mesmo saltar para outro texto. O texto formatado que possui essa possibilidade é chamado de Hipertexto.
HTML Básico
O HTML (Hyper Text Markup Language) é uma linguagem de marcação que suporta as referências do hipertexto. Ela surgiu logo no início da internet, junto com a World Wide Web. O HTML não era uma linguagem de formatação de textos qualquer, ela possibilitava ligar textos que estavam num computador a textos que estavam num outro computador, usando como meio a internet. O processador e visualizador de HTML é chamado de
Navegador, por causa da característica do hipertexto que permite ao usuário "nadar" na informação.
O navegador, também chamado de
browser, nada mais faz do que abrir arquivos de computador e, caso esses arquivos contenham código html, interpretá-los segundo o padrão do hipertexto e gerar a "página html", que é a manifestação gráfica dos códigos - aquilo que você usualmente vê quando navega pela internet. Por convenção, os nomes dos arquivos em html terminam com
.html. Exemplo:
index.html,
foo.bar.html e
etc.hml (existem também arquivos html que terminam com
.shtml e outras
extensões malucas). Observe que esses arquivos podem estar tanto no computador do usuário que usa o navegador quanto em outros computadores: o navegador é capaz de abrir esses arquivos desde que eles estejam acessíveis - as tais páginas web. Para uma maior compreensão de como isso é possível, consulte um guia básico sobre redes e internet.
Por que não usar um editor de html?
Você deve estar pensando agora que existem programas que criam páginas na web para você. Bem, existem, mas é importante aprender como que o código HTML foi criado. Se você não sabe o fundamental do HTML, então desista de todo o seu poder de usar esses editores - isto não é muito faça você mesmo, não é? Estes programas são legais, mas você realmente precisa saber o que eles estão fazendo por de trás das cenas.
Mesmo sabendo que tais programas são úteis, muitas pessoas ainda escrevem a mão HTML utilizando ferramentas de editores de texto comum. Editores de Texto são programas para manipulação básica de palavras sem todas aquelas "frescuragens" de um processador de palavras. As vantagens de se utilizar um editor de texto é que os arquivos são criados e salvos sem os códigos invisíveis ao usuário para formatação, os quais poderiam afetar drasticamente o seu documento quando for salvo como uma página da web e jogado num browser. Lembre-se sempre que a maioria dos editores/processadores WYSIWYG não exibem o conteúdo dos seus arquivos em texto puro, mas sim o seu texto já formato. Se você ainda tem dúvidas nisso, releia as seções
Texto puro,
Markup Language e
Editores "Puros" versus WYSIWYG. Por esta razão, recomendamos o uso de editores de texto simples criar documentos da web.
Um ponto contra os editores de html, esses programas que facilmente criam pra você páginas web, é que eles frequentemente bagunçam o código. Pessoas são imperfeitas. Programas são feitos por pessoas. Logo, programas são imperfeitos (demonstre). Mas pessoas são inteligentes e acho que programas "inteligentes" ainda são um sonho no nosso dia-a-dia. Então, mãos à obra e aprenda um pouco de html. Acima de tudo, html
não é dificl. Você não quer continuar a ser um analfabeto digital, não é verdade?
Começando
No HTML, os códigos são inseridor entre os marcadores
< e
>. Um comando em HTML é o código e mais os marcadores
< e
>. Por exemplo,
p é o código html para novo parágrafo, e o comando correspondente é
<p>
Se você digitar apenas o código, sem os marcadores, o seu navegador vai interpretar o código apenas como mais um caractere do seu texto. Em outras palavras, o navegador considera tudo o que está ente
< e
> como comandos em html, e tudo o que está do lado de fora ele interpreta como texto simples sujeito a modificações gráficas pelos comandos. No html, os comandos são conhecidos pelo nome de
tags.
Se você já entendeu como funciona o html, pode pular a próxima seção. O que vem a seguir é apenas um pouco de ensebação teórica, mas servirá muito pra quem tem paciência e quer aprender direitinho como o html é engraçadão.
Mais um pouco de teoria
Muito bem, vamos agora nos concentrar na estrutra de um comando em html e em seguia à estrutura de um documento (página, documento e arquivo são expressões aqui tratadas como equivalentes), para em seguida juntar o tudo e fazer algumas demonstrações.
O primeiro código que aparece entre os famigerados
< e
> é chamado de elemento. O elemento informa ao navegador qual é o tipo de instrução que trata o comando. Os tipo de istruções podem ser, por exemplo, de criar uma referência (link ou ligação também são sinônimos), adicionar uma imagem, mudar o tamanho da letra, etc. Palavras que seguem o elemento e que ainda estão dentro dos famigerados delimitadores de instrução
< e
> são chamadas de atributos (veremos mais sobre atributos a partir da seção
Parágrafos).
Observações
- As tags podem ser escritas usando letras maiúsculas ou minúsculas, indiferentemente, mas aqui sempre usaremos letras minúsculas, ou seja, <p> ao invés de <P>.
- Existem instruções em html que precisam de comandos de abertura e fechamento e outras não. Lembra o que é abertura e fechamento de uma instrução? É só voltar um pouco pra trás, na seção Markup Language. Lembre-se: instruções que afetam apenas blocos ou regiões do texto precisam de comandos de abertura e fechamento. Aguarde nossos exemplos!
- Se por acaso você escreveu os códigos html errado - por exemplo >p> invés de <p> - não se desespere! O máximo que pode acontecer é o seu navegador interpretar sua página de forma diferente do esperado e desenhá-la de um jeito maluco.
Finalmente a prática!
Depois de tanta enrolação, vamos lá, criar um pouco de texto formatado. Você irá precisar do seguinte antes de começar: acesso a um computador, algum conhecimento de como rodar um computador, um editor de texto ou html, um navegador e muito tempo livre!
Uma página html é dividida em duas partes, a cabeça e o corpo. Na cabeça são definidos os atributos principais do documento, como o título e as palavras-chave. O corpo contém a parte visível do documento, i.e, aquela que você verá processada em seu navegador. Existe ainda uma região da página que está tanto fora da cabeça quanto do corpo (não! não é a falta de juízo!), mas não iremos entrar nesse mérito. Consulte um guia mais detalhado de html para obter mais informações.
Todo o código de um documento desse tipo fica entre os comandos
<html>
e
</html>
Observe que toda instrução (tag) começa pelo nome do elemento e termina com o nome do elemento precedido por uma barra
/. Tudo o que estiver entre o começo e o fim da instrução
html será interpretado pelo navegador como código html.
Para escrever a cabeça do documento, usamos o elemento
head, e para o corpo usamos o elemento
body. Na cabeça do documento são definidos seu título e alguns atributos invisíveis ao usuário e que dizem respeito à própria navegação e por isso são definidas com o elemento
meta.
A cabeça do documento
pode conter informações do tipo:
- Título do documento
- Data de criação
- Prazo de validade
- Autor
- Qualquer outra informação que o autor ache necessária
Maiores detalhes sobre o conteúdo da cabeça do documento são dados na seção
Meta Informações.
Já o corpo do documento pode conter uma infinidade de elementos, desde texto comum quanto imagens, tabelas e formulários.
Escrevendo uma página em HTML
Agora vamos escrever uma página em html. Abra um editor de textos de sua preferência (Bloco de Notas, Emacs, etc) e um navegador web (
Mozilla, Galeon, etc). Escreva isso no editor:
<html>
<head> <title>Isso é uma confusão!</title></head>
<body>
Isso é uma página em html.
</body>
</html>
Salve isso num arquivo cujo nome tenha a extensão
html, como por exemplo
teste.html. Em seguida, abra esse arquivo no seu
Navegador. Você não verá nada especial além de uma tela em branco com a inscrição "Isso é uma página em html". Mas essa é a pura verdade, essa já é uma página em html. Fácil, não?
Mas e todo aquele monte de coisa que eu vejo enquanto navego pela internet? Calma, aqui sempre iremos por partes. Concentremo-nos ao código que acabamos de escrever no arquivo
teste.html. Na primeira linha o elemento
html informa ao navegador que esse documento está no formato html. Na segunda linha, o elemento
head abre o cabeçalho do documento. Ainda nessa linha vemos um elemento novo, o
title, que define um título para o documento.
Note que
<title>Isso é uma confusão!</title>
define o título da página como sendo "Isso é uma confusão", apesar de, como você está vendo, não ser nada confuso.
O título da página normalmente é exibido no título da janela do seu navegador e também é usado pelos mecanismos de busca (Google, Astalavista, etc) para cadastrar esse documento.
Depois de definir o título, vemos o elemento
head fechando o cabeçalho, ou seja, só o texto localizado entre
<head>
e
</head>
será parte do cabeçalho.
Depois disso, na terceira linha, vemos a "abertura" do corpo do documento, com o comando
<body>. O corpo só é fechado na sétima linha, com o comando
</body>.
Lembre-se: assim como acontece com as pessoas, um documento html só estará protegido se tiver o corpo fechado, portanto nunca se esqueça de acrescentar
</body> antes de terminar o documento. Brincadeiras à parte, você até pode esquecer de fechar o corpo do documento que o navegador não vai exibir nenhuma mensagem de erro e muitas vezes pode até produzir um documento formatado corretamente, mas é sempre bom escrevemos num bom html, pois
os computadores são burros.
Voltemos ao documento
teste.html. Dentro do corpo, vemos a linha
Isso é uma página em html.
Como esses caracteres estão no corpo do texto, eles serão exibidos na tela do seu navegador. No nosso caso, o corpo do documento não contém comandos em html mas apenas texto simples e então tudo que o navegador precisa fazer é imprimir esse texto na tela. Se no corpo do texto houvessem comandos, eles seriam interpretados pelo navegador e teriam uma saída gráfica correspondente. Os próximos exemplos esclarecerão este ponto.
Texto em negrito
Volte para o editor de textos e mude no arquivo
teste.html a linha
Isso é uma página em html.
para
Isso é uma página em <b>html</b>.
Salve essa alteração e abra novamente esse arquivo no Navegador (ou utilize o botão "Atualizar"). Note que o texto agora será exibido pelo navegador como
Isso é uma página em
html.
O elemento
b (bold - negrito) altera o texto para que ele apareça mais escuro. Para fazer jus ao método da lavagem cerebral, vou repetir: apenas o texto que ficou entre os comandos
<b> e
</b> ficam em negrito, o resto do texto não é alterado.
Texto em itálico
Para o texto em itálico utiliza-se o elemento
i, da mesma forma como utilizamos o elemento
b:
Isso é uma página em <i>html</i>.
E o resultado esperado é:
Isso é uma página em
html.
Podemos misturar texto em
negrito com texto em
itálico.
Veja os exemplos seguintes e seus respectivos resultados:
Exemplo 1:
Isso é uma <b>página</b> em <i>html</i>.
Resultado: Isso é uma
página em
html.
Exemplo 2:
Isso é uma página em <b><i>html</i></b>.
Resultado: Isso é uma página em
html.
Exemplo 3:
Isso é uma página em <b><i>ht</i>ml</b>.
Resultado: Isso é uma página em
html.
Texto sublinhado
Para sublinharmos um texto, utilizamos o elemento
u (underline):
Exemplo:
Vamos <u>sublinhar</u> algumas coisas.
Resultado: Vamos
sublinhar algumas coisas.
Agora vamos misturar algumas coisas,
negrito com
itálico e
sublinhado, para mostra a você que os comandos em html podem ser usados conjuntamente.
Exemplo:
"Eu não tenho <u>escrúpulos</u>.
O que é <i>bom</i>, a gente <b>fatura</b>;
o que é <i>ruim</i>, a gente <i><b>esconde</b></i>".
- <b><u><i>Rubens Ricupero</i></u></b>, ex-ministro da Fazenda, setembro de 1994
Resultdado: "Eu não tenho
escrúpulos. O que é
bom, a gente
fatura;
o que é
ruim, a gente
esconde". -
Rubens Ricupero, ex-ministro da Fazenda, setembro de 1994
Note que neste exemplo utilizamos várias tags atuando sobre um mesmo bloco de texto, como em
<i><b>esconde</b></i> A ordem na qual as tags são abertas e fechadas não precisa ser exatamente essa. Você poderia, sem problemas, usar
<i><b>esconde</i></b>, mas por uma questão estilística recomendamos que você sempre comece fechando a última tag que foi aberta e ir fechando de "dentro pra fora".
Espaçamento
No html, o espaçamento do texto simples não é automático. Isso quer dizer que, se você escrever no corpo de um documento algo como
Olha como as coisas vão ficando longe!
você terá o resultado:
Olha como as coisas vão ficando longe!
Em outras palavras, qualquer espaço adicional é ignorado, de modo semelhante ao que acontece com as
quebras de linha. Se quisermos adicionarmos espaços, devemos utilizar um objeto novo, que chamaremos de entidade,
As entidades serão tratadas em detalhes na seção
Entidades, acentuação e caracteres especiais.
Trocando em miúdos, uma entidade é uma porção de texto que começa com o caractere
& ("e" comercial) e termina com um ponto e vírgula. Quando o navegador encontra uma entidade, ele a troca por um conjunto de caracteres previamente determinados. É possível não só usar as entidades padrões do html como definir nossas próprias entidades. Mas não nos precipitemos.
Aqui segue o exemplo de como usar uma entidade. Nesse caso, a entidade associada ao caractere de espaço simples,
:
Exemplo 1:
Espaço simples e espaço duplo.
Resultado:
Espaço simples e espaço duplo.
Exemplo 2:
Olha&nbsp;como&nbsp;&nbsp;as
&nbsp;&nbsp;&nbsp;coisas
&nbsp;&nbsp;&nbsp;&nbsp;vão
&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;ficando&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;longe!
Resultado:
Olha como as
coisas
vão
ficando
longe!
Quebra de linha
Repare que se escrevermos o seguinte texto no corpo do documento,
Linha 1
Linha 2
Linha 3
o navegador imprimirá em sua tela isso:
Linha 1 Linha 2 Linha 3
Isso mostra que no html as quebras de linha não são feitas automaticamente. Quando quisermos pular uma linha precisamos usar o comando
<br>:
Linha 1<br>
Linha 2<br>
Linha 3<br>
Isso dará o resultado desejado. Note que para o elemento
br não existe o comando
</br>, isto é, a quebra de linha não age numa região de texto delimitada, mas sim num ponto do texto. Complicado? Então vamos lá, mais uma vez explicando de uma outra forma: comandos como
<b>,
<i> e
<u> agem sobre uma região do texto e precisam ser fechados com seus respectivos
</b>,
</i> e
</u>, pois do contrário esses comandos agirão até o fim do documento. Já o comando de quebra de linha,
</br>, e alguns outros atuam só no ponto onde eles aparecem.
Texto centralizado
Um elemento muito simples de usar é o
center, que deixa o texto centralizado:
<center>
No meio do caminho tinha uma préda.
</center>
O resultado, como é de se esperar, é o texto sendo exibido no centro da página ou da
divisão atual:
No meio do caminho tinha uma préda.
Parágrafos
Às vezes uma quebra de linha não é suficiente para dar o espaço que queremos no nosso texto. Imagine se quisermos escrever algo como
Parágrafo 1
Parágrafo 2
deixando uma linha entre os dois parágrafos. Uma solução simples é utilizar duas quebras de linha,
Parágrafo 1<br><br>Parágrafo 2
A melhor solução, porém, é utilizar o elemento
p (parágrafo), que efetua uma quebra de linha com espaçamento maior que o
br:
Parágrafo 1<p>Parágrafo 2
O elemento
p tem um uso controverso no html. Ele pode ser usado tanto como um comando pontual (exemplo anterior) como um comando que age numa região do texto:
<p>Parágrafo 1</p>
<p>Parágrafo 2</p>
Perceba a diferença, que não é apenas estilística, entre os dois usos do elemento. No primeiro caso,
p apenas efetua uma quebra de linha com espaçamento grande. No segundo,
p define uma região de texto como sendo um parágrafo. Por criar uma divisão lógica, procure sempre utilizar o elemento
p conforme esse último caso.
Alinhamentos de parágrafo
Agora vamos mostrar um uso avançado do elemento
p. Você já deve ter visto que em certos documentos o texto aparece hora alinhado à direita, hora à esquerda, no centro ou então ocupando uniformemente o espaço da página (texto justificado). Isso pde ser obtido facilmente em html. Veja os exemplos:
Exemplo 1 (texto à esquerda):
<p align="left">
Texto Texto Texto<br>
Texto Texto Texto<br>
Texto Texto Texto<br>
Texto Texto Texto<br>
</p>
Resultado:
Texto Texto Texto
Texto Texto Texto
Texto Texto Texto
Texto Texto Texto
Exemplo 2 (texto à direita):
<p align="right">
Texto Texto Texto<br>
Texto Texto Texto<br>
Texto Texto Texto<br>
Texto Texto Texto<br>
</p>
Resultado:
Texto Texto Texto
Texto Texto Texto
Texto Texto Texto
Texto Texto Texto
Exemplo 3 (texto centralizado):
<p align="center">
Texto Texto Texto<br>
Texto Texto Texto<br>
Texto Texto Texto<br>
Texto Texto Texto<br>
</p>
Resultado:
Texto Texto Texto
Texto Texto Texto
Texto Texto Texto
Texto Texto Texto
Exemplo 4 (texto justificado):
<p align="justify">
Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto
Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto
Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto
Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto
</p>
Resultado:
Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto
Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto
Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto
Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto
Note que entre os delimitadores
< e
> não encontra-se apenas o elemento
p. Além dele, existe o texto
align="alinamento". Dizemos que
align é um atributo do elemento
p e
alinhamento é o valor desse atributo. No caso de
<p align="justify">, o valor do atributo
align (que significa alinhamento em inglês) é
justify (justificado).
Os atributos, as palavras que seguem o elemento, informam o navegador a respeito das propriedades que os elementos podem assumir. Confuso? Pode parecer um pouco confuso, mas não é. Como disse a Toya, "Um disco de banda punk pode ter diversas propriedades ou 'atributos' - a cor do disco, tamanho, velocidade, etc, tudo isso são atributos." E eu digo mais: se você coloca o disco num toca-discos, você pode ouvi-lo em duas ou no máximo três velocidades. Às vezes dá pra ouvir ao contrário. Mas se você arremessar seus discos do
Fofão, garanto que eles poderão girar em muitas outras velocidades. Assim é o html, com muitas opções para você exibir seu texto.
No html, os valores dos atributos podem ser definidos da forma
atributo=valor ou
atributos="valor" (como em
align="justify"), que é mais recomendada.
Como você viu, nem todos os códigos em html necessitam de atributos, em especial os comandos de modificação de texto como
negrito,
itálico,
sublinhado, etc.
Resumindo, os atributos definem características adicionais aos elementos. Nas seções seguintes veremos elementos com vários atributos. Por exemplo, não adianta dizer ao seu navegador pra por um link em alguma parte do seu texto, é preciso dizer ao navegador, por exemplo, pra que lugar esse link aponta. É isso o que um atributo faz (mais detalhes sobre links na seção
Links).
Criando uma divisão
Existem momentos em que queremos que vários parágrafos possuam um mesmo valor de atributo - centralizado, por exemplo. Ao invés de escrevermos
align="justify" a cada abertura de novo parágrafo, podemos usar o elemento
div, que cria uma "divisão" no documento na qual alguns atributos são preservados. Vejamos o exemplo:
Exemplo:
<div align="center">
<p>
Parágrafo 1
Parágrafo 1
Parágrafo 1
</p>
<p>
Parágrafo 2
Parágrafo 2
Parágrafo 2
</p>
<p>
Parágrafo 3
Parágrafo 3
Parágrafo 3
</p>
</div>
Resultado:
Parágrafo 1
Parágrafo 1
Parágrafo 1
Parágrafo 2
Parágrafo 2
Parágrafo 2
Parágrafo 3
Parágrafo 3
Parágrafo 3
Experimente mudar os atributos do alinhamento pra ver o que acontece! Na seção
Folhas de Estilo mostraremos como utilizar o elemento
div para criar seções lógicas em documentos.
Mudando os atributos da fonte.
Até agora mostramos as modificações enfáticas do texto, como o
negrito,
itálico e
sublinhado. Adiante veremos o elemento
font e seus atributos, que permitem grande controle sobre os caracteres gráficos.
O
font - fonte do texto, no sentido tipográfico - é um elemento cujos principais atributos são
size (tamanho),
color (cor) e
face. Olhe como eles funcionam:
Exemplo 1:
<font face="times" color="red" size="+2">CUIDADO!</font>
Resultado:
CUIDADO!
Aqui vemos pela primeira vez o uso de mais de um atributo para um mesmo elemento. A ordem em que os atributos aparecem é arbitrária: poderíamos ter escrito
<font color="red" face="times" size="+2"> ou então
<font size="+2" face="times" color="red">.
O atributo
face define o tipo de
fonte do seu texto. Uma fonte é o conjunto de símbolos gráficos que representam os caracteres. Existem fontes nas quais os caracteres estão representados de formas mais arredondadas, outras em que eles aparecem com um desenho mais moderno, etc. Veja as diferenças entre alguns tipos de fonte:
<font face="times" size="+1">Isso fica de um jeito...</font>
<font face="courier" size="+1">e isso de outro.</font>
Resultado:
Isso fica de um jeito...
e isso de outro.
Notou a diferença? Em caso negativo, pode ser que o seu navegador - ou qualquer outro meio pelo qual você esteja lendo isso - não diferencie muito bem os tipos de fonte.
Times e
courier são fontes comuns de se encontrar nos computadores, porém cada sistema possui seus tipos de fontes próprios e às vezes pode acontecer de um documento pedir ao navegador exibir o texto numa determinada fonte ausente no sistema. Nesse caso, o navegador utilizará uma das fontes padrões do sistema no lugar daquela requisitada. Como essa questão do tipo de fonte é muito particular, deixaremos aqui apenas o que é relacionado ao html: utilizando a atribuição
face="nome-da-fonte" podemos modificar a fonte que exibirá nosso texto.
A seguir, vejamos o próximo atributo importante do elemento
font, que é o
size, com o qual podemos regular o tamanho da fonte exibida. O tamanho pode ser dado relativamente ao tamanho padrão da fonte no navegador ou pode ser um número entre 1 e 7:
<font size="1">Crescendo,</font>
<font size="2">crescendo,</font>
<font size="3">crescendo</font>
<font sizer="4">e crescendo!</font>
Resultado:
Crescendo,
crescendo,
crescendo
e crescendo!
É mais comum escrevermos relativamente ao tamanho padrão da fonte do navegador:
<font size="-2">Crescendo,</font>
<font size="-1">crescendo,</font>
<font size="+1">crescendo</font>
<font sizer="+2">e crescendo!</font>
Crescendo,
crescendo,
crescendo
e crescendo!
A atribução
size="-2" faz com que o texto seja exibido duas vezes menor que o tamanho padrão. Já para
size="+2" o tamanho será duas vezes maior que o padrão. A escala de tamanhos vai de -7 a +7.
O último atributo do elemento
font que veremos aqui é o
color, que define a cor do texto. O valor desse atributo pode ser o nome de uma cor (em inglês) ou um número que represente aquela cor na codificação
RGB - Red Green Blue ou Vermelho Verde Azul, as cores primárias. A vantagem de usar números ao invés dos nomes é que existem milhões (literalmente) de cores suportadas pelos atuais monitores e placas de vídeo dos computadores, ao passo que a língua ingles só tem nomes para uma meia dúzia de cores.
As letras e respectivas cores são:
| Nome | Código númerico | Cor correspondente |
| black | #000000 | |
| green | #008000 | |
| silver | #C0C0C0 | |
| lime | #00FF00 | |
| gray | #808080 | |
| olive | #808000 | |
| white | #FFFFFF | |
| yellow | #FFFF00 | |
| maroon | #800000 | |
| navy | #000080 | |
| red | #FF0000 | |
| blue | #0000FF | |
| purple | #800080 | |
| teal | #008080 | |
| fuchsia | #FF00FF | |
| aqua | #00FFFF | |
Portanto, tanto faz escrever
<font color="red"> como
<font color="#FF0000"> para usar a fonte na cor vermelha. O que faz com que o navegador diferencie um nome de um número é o símbolo
#. Quando o atributo começa com uma
# o navegador sabe que trata-se de um número. Mas aí você vem e pergunta:
Que diabos é um número desses, como FF00FF ou C0C0C0? Pra mim isso não é um número, são letras doidas!
Isso são números sim, mas escritos na base hexadecimal, e não na decimal, que é a que estamos acostumados a usar. Para quem não sabe o que é a base hexadecimal, leia a
Nota sobre números hexadecimais.
Texto pré-formatado
Haverá ocasiões nas quais você precisará exibir o texto sem nenhuma formatação especial de
html ou então quer definir sua própria formatação. Por exemplo, quero que no meio documento apareça um texto escrito exatamente desta maneira:
o
novelo
ovo
ovo
e
l
o
augusto de campos
Se eu simplesmente digitar isso no meu editor de textos, o resultado será:
o
novelo
ovo
ovo
e
l
o
augusto de campos
Eu poderia contornar esse problema utilizando a
entidade de espaçamento, mas seria algo muito trabalhoso. Ao invés disso, usemos o elemento
pre, que tem a função de manter a formatação original do texto. Ou seja, ela mantém o formato do texto do jeito que ele é colocado, com parágrafos, tabelas, listas etc.
No caso acima, bastaria que eu utiliza-se a dessa maneira para que obtivesse o resultado desejado:
<pre>
o
novelo
ovo
ovo
e
l
o
augusto de campos
</pre>
Como é de praxe, podemos misturar outras tags
html junto com o elemento
pre, isto é, utilizar comandos
html dentro de um bloco
pre:
<pre>
Lista de cores:
<font color="#FFFF00">
a
m
arelo
</font>
<font color="#000000">
p
r
e
to
</font>
<font color="#0000FF">
l
u
z
azul
</font>
<font color="#FF0000">
v r e h
e m l o
</font>
<pre>
Resultado:
Lista de cores:
a
m
arelo
p
r
e
to
l
u
z
azul
v r e h
e m l o
O texto aparece justamente da maneira como foi escrito. O elemento
pre não impede que você utilize tags dentro dele. Ou seja, ela irá ler as tags de HTML e respeitá-las.
Imagens
Além de manipular texto, o
html também serve para exibir imagens de uma maneira muito simples, usando para isso o elemento
img:
<img src="emma.jpg" width="221" height="300">
Resultado:
O atributo
src - source, fonte em inglês - dá o nome do arquivo da imagem e é o único atributo obrigatório para o elemento
img. Os atributos para a largura (width) e a altura (height) não são necessários, mas serão muito úteis quando as pessoas estiverem navegando em seu site: quando seu navegador abre um arquivo html e encontra o elemento
img, ele usará o respectivo atributo
src como o endereço onde está o arquivo de imagem a ser exibido. Em outras palavras, o elemento
img apenas passa uma referência do arquivo de imagem ao navegador, ou seja, você não está colocando esse arquivo de imagem dentro do seu arquivo
html, você está apenas colocando em seu arquivo
html uma referência a esse arquivo de imagem. O navegador, por sua vez, começa a baixar essa imagem a partir desse endereço atributo enquanto termina de exibir o documento.
Dependendo do tipo de arquivo de imagem, ela só será exibido pelo navegador quando terminar de ser baixada. Se isso ocorrer e você não utilizou os atributos
width e
height no seu documento, o navegador só reservará espaço na tela do seu computador para a exibição da imagem quando ela estiver sido baixada, e duranter esse intervalo a formatação do seu documento pode ficar diferente. Para evitar isso - somente por uma questão de estilo - recomendamos que você sempre use os atributos
width e
height, que informam ao navegador o tamanho da imagem, antes mesmo dele começar a baixá-la, e assim o espaço na tela do seu computador será apropriadamente reservado para ela.
Tamanho de exibição da imagem
Os atributos
width e
height merecem um pouco mais de atenção. Como vimos, são os atributos que determinam o tamanho que a imagem será exibida. Existem duas formas de se fazer isso, utilizando o tamanho em
pixels (tamanho absoluto) e em valores relativos ao tamanho disponível da tela do computador, isto é, em porcentagem.
Um
pixel é a menor unidade luminosa da tela do seu computador que os programas podem manipular, e isso depende muito da
resolução da tela do seu computador. Um pixel é um quadradinho luminoso. Atualmente as telas de computador tem uma resolução de 800 pixels de comprimento e 600 de altura, às vezes pode ser de 1024 de comprimento e 768 na altura ou resoluções até maiores, de tal modo que nossos olhos já não conseguem distinguir entre pixels contíguos.
O tamanho das imagens computadorizadas também pode ser medido em pixels, que é o tamanho que a imagem vai ocupar na tela do seu computador quando ela for exibida. Para que você descubra qual é o tamanho da sua imagem, você terá que usar algum programa de edição de imagens ou então abri-la diretamente no seu navegador. Experimente ir no menu
Arquivo e depois em
Abrir, no seu nagevador, ou então digitar a localização da imagem diretamente na barra de endereços. Quando a imagem for exibida, clique sobre ela com o botão direito do seu mouse e em seguida vá em
Propriedades. Uma janela com as informações da imagens - inclusive seu tamanho - deverá aparecer. De posse desses valores, basta colocar-los dentro da do
img. No exemplo anterior, onde usamos o código
width="221" height="300", a imagem foi exibida com 221 pixels de largura e 300 de altura, coincidentemente sendo seu tamanho original. Poderíamos ter escrito:
<img src="emma.jpg" width="22" height="30">
Resultado:
Ou seja, a imagem foi mostrada com um tamanho menor do que o orginal. Também poderíamos usar tamanhos maiores que original... que tal você experimentar algo como
width="2210" height="3000"?
O segundo modo de determinar o tamanho de exibição das imagens no navegador consiste em utilizar porcentagem. Por exemplo,
<img src="emma.jpg" width="10%" height="10%">
Resultará numa imagem exibida com um décimo (10%) do espaço disponível da tela do computador:
Nos dois modos de determinar o tamanho - em pixels e em porcentagem - podemos escolher valores independentes para a altura e a largura, de tal forma que a imagem fique distorcida. Olha que engraçado:
<img src="emma.jpg" width="50" height="400">
Texto alternativo
Existem ainda outros atributos interessantes para a exibição de imagens. Você pode incluir uma descrição da imagem para que se, por qualquer razão, alguém não consiga ver a imagem ela possa ler uma descrição no espaço vazio. Essa descrição também aparecerá quando você passar o mouse por sobre a imagem.
Você pode adicionar uma pequena descrição desta maneira:
<img src="emma.jpg" width="221" height="300" alt="Emma Goldman!">
O atributo
alt (texto alternativo) é utilizado para dar a pequena descrição, neste caso "Emma Goldman!". Experimente passar o mouse sobre ela, às vezes funciona :P.
Borda da imagem
Uma borda (contorno) da imagem pode ser adicionada com o atributo
border:
<img src="emma.jpg" width="10%" height="10%" border="1">
<img src="emma.jpg" width="10%" height="10%" border="2">
<img src="emma.jpg" width="10%" height="10%" border="3">
O valor do atributo
border indicará o tamanho dessa moldura:
Alinhamento da imagem
É possível ainda colocar imagens e texto um do lado do outro, de diversas formas. Vamos supor a mais simples:
<img src="emma.jpg" width="3%" height="3%" border="1">
O texto aparece ao lado da imagem.
O texto aparece ao lado da imagem.
Esse código pode funcionar muito bem, mas às vezes acontece do texto aparecer abaixo da imagem. Para fazer o posicionamento da imagens e do texto corretamente, basta utilizar o atributo
align, que funciona de modo análogo ao do
alinhamento de paragráfos:
<img src="emma.jpg" width="5%" height="5%" border="1" align="right" border="1">
O texto vai aparecer à esquerda da imagem, mesmo tendo escrito após o código sobre a imagem.
Enquanto o texto puder ficar ao lado da imagem, ele ficará. Quando ele não mais couber nesse
espaço, ele começará a ser exibido abaixo da imagem, como você pode ver aqui. Utilizar o
alinhamento de imagens é a melhor maneira de garantir que ela aparecerá no local desejado.
O texto vai aparecer à esquerda da imagem, mesmo tendo escrito após o código sobre a imagem.
Enquanto o texto puder ficar ao lado da imagem, ele ficará. Quando ele não mais couber nesse espaço,
ele começará a ser exibido abaixo da imagem, como você pode ver aqui. Utilizar o alinhamento de
imagens é a melhor maneira de garantir que ela aparecerá no local desejado.
Espaçamento da imagem
Notou como o texto do exemplo anterior saiu colado à imagem? É possível definir um espaçamento entre a imagem e qualquer objeto (texto, imagem, tabelas) que esteja ao seu lado, acima ou abaixo, usando para isso os atributos
vspace (espaçamento vertical) e
hspace (espaçamento horizontal). O valor desses atributos diz ao navegador qual será o espaço em pixels entre a imagem e qualquer objeto:
<img src="emma.jpg" width="3%" height="3%" border="1" align="left" hspace="5" border="1">
O texto vai aparecer à direita da imagem, a cinco pixels de distância dela. Deu pra notar a
diferença? Utilizando todos esses atributos para a exibição de imagens você obtém um texto
bem diagramado e bonito de ser lido!
O texto vai aparecer à direita da imagem, a cinco pixels de distância dela. Deu pra notar a diferença?
Utilizando todos esses atributos para a exibição de imagens você obtém um texto bem diagramado e bonito
de ser lido!
Tipos de imagens
Agora que você já sabe tudo isso veremos quais são os principais tipos de arquivos de imagem e quais são os melhores para se usar no seu site. Para maiores informações sobre a manipulação de imagens, consulte o
Guia de Edição de Imagens.
Links
Essa é uma das seções mais importantes deste manual, pois afinal estamos falando de hipertexto. Queremos que uma página
html possa fazer referência a outras páginas
html ou para qualquer outro tipo de arquivo que se encontre em outros lugares da web. No jargão da internet, você quer ligar (link) parte da sua página com outras.
Isso é feito de modo muito simples com o elemento
a, como segue:
<a href="http://www.midiaindependente.org">CMI Brasil</a>.
CMI Brasil.
Como você deve ter percebido, o atribudo
href (Hipertext Reference / Referência de Hipertexto) indica o endereço da página que você quer "linkar" (ligar) ao seu documento. No exemplo acima, o texto
CMI Brasil aparece como uma referência para o link. Se você clicar sobre esse texto, seu navegador automaticamente tentará abrir a página
http://www.midiaindependente.org
Os endereços são escritos na forma de
URL (Uniform Resource Locators), que é uma maneira que inventaram para se especificar o caminho até se chegar num arquivo que esteja nalgum local da internet.
O formato da URL é
protocolo://nome-do-computador/pastas/arquivo
O protocolo indica como o navegador irá buscar o arquivo (mais informações
aqui). Nome do computador é aquele endereço do tipo
www.ninguem.com.br e as pastas são os diretórios dentro desse computador onde estão os arquivos. Uma URL de artigo do CMI é, por exemplo,
http://www.midiaindependente.org/pt/blue/2004/09/290669.shtml, onde
http:// é o protocolo,
pt,
blue,
2004 e
09 são pastas (uma fica dentro da outra) e
290669.shtml é o nome do arquivo.
http://
\--- www.midiaindependente.org
\--- pt
\-- blue
\--- 2004
\--- 09
\--- 290669.shtml
Lembre-se também que quando você acessa o endereço
http://www.ninguem.com.br, por exemplo, está na verdade vendo o arquivo
http://www.ninguem.com.br/index.html. Os arquivos do tipo
index.html sempre são procurados pelo navegador quando você solicita apenas o nome do site ou uma pasta de um computador.
Em
html, existem três formas possíveis de se fazer links: os links internos, os links locais (ou relativos) e os links externos.
Links internos
Links internos são aqueles que ligam uma seção de uma página com uma outra seção da mesma página. Por exemplo, se eu quiser fazer uma referência para a seção Hipertexto desse nosso manual, basta que eu primeiro defina um nome para a seção Hipertexto e então adicione um link pra ela. Isso é feito da seguinte forma:
1 - Vou até o início da seção Hipertexto e adiciono o seguinte código, ao invés de simplesmente escrever o título da seção:
<a name="Hipertexto">Hipertexto</a>
2 - Adiciono o link pra essa seção com o seguinte código,
<a href="#Hipertexto">Vá para a seção hipertexto</a>
Cujo resultado é
Vá para a seção hipertexto
Experimente clicar nesse link! O atributo
name serve apenas para dar um nome para uma posição de uma página html. O valor de
name pode ser qualquer um (nesse caso é "Hipertexto").
Quand você fizer uma referência a um link interno utilizando o atributo
href, você precisa necessariamente adicionar o caractere
# antes do nome da sua seção - no nosso caso,
#Hipertexto - pois do contrário seu navegador tentará abri-lo como um link local.
Links locais ou relativos
Links locais são aqueles que referenciam um arquivo que esteja no mesmo computador que a sua página. Links locias não contém o
http:// no início do endereço. Por exemplo, se no meu documento html eu quiser fazer um link para o arquivo
links.html que está na mesma pasta do meu documento, não preciso digital o endereço completo, mas apenas
<a href="links.html">Acesse os links!</a>
Esse tipo de argumento para o
href também é chamado de links relativos. Se você quiser linkar uma página que esteja do diretório (pasta) superior da sua página, use dois pontos e uma barra antes do nome do arquivo:
<a href="../links.html">Acesse os links!</a>
A vantagem de você usar links relativos é que você pode mover todo o seu site para um novo endereço na internet e não precisar reeditar todos os links que apontam para páginas do seu próprio site.
Links externos
Links externos são aqueles que podem apontar para qualquer arquivo disponível na internet, como por exemplo
<a href="http://pt.wikipedia.org">Acesse a Wikipedia!</a>
Os links externos precisam necessariamente conter o prefixo
http:// e o endereço completo do arquivo.
Alvo (target)
Um outro atributo interessante para o elemento
a é o
target, que permite que o link seja aberto numa outra janela do seu navegador.
<a href="http://pt.wikipedia.org" target="__BLANK">Acesse a Wikipedia!</a>
Resultado:
Acesse a Wikipedia! (experimente clicar sobre o link).
O argumento do atributo
target é o nome da janela do navegador que abrirá o link. Se você quiser que o link seja aberto numa nova janela, simplesmente escolha qualquer nome como argumento.
Headings
Agora vejamos um elemento que serve para hierarquizar o conteúdo do seu documento em seções e subseções, útil quando você for escrever um texto bem grande, da mesma forma como este documento tem uma divisão em tópicos. Os
headings servem para criar títulos diferenciar as seções da sua página. O
heading possui seis valores diferentes, sendo que a de valor 1 é a que possui a maior fonte e a de valor 6 possui a menor fonte. A tag de abertura do
heading é
e a que fecha é , sendo que
x é o valor dado ao
heading.
Por exemplo, usando o seguinte código:
<h1>título 1</h1>
<h2>título 2</h2>
<h3>título 3</h3>
<h4>título 4</h4>
<h5>título 5</h5>
A sua página terá os seguintes títulos:
título 1
título 2
título 3
título 4
título 5
Note que o efeito do elemento
h não é semelhante ao uso do elemento
font com o atributo
size alterado, isto é, o elemento
h não é apenas a mudança de tamanho da fonte. Ele cria uma divisão lógica para o seu texto. Falaremos sobre divisões lógicas na seção
O presente e o futuro do markup.
Tabelas
Tabelas auxiliam na visualização de dados ou na divisão de sua página em setores. Entenda por uma
tabela HTML como sendo semelhante a uma tabela que você desenharia numa folha de papel ou num outro programa de computador. O elemento principal de uma tabela é o
table e aqui segue um exemplo simples de tabela:
<table border="1">
<tr>
<td>Primeira</td>
<td>Segunda</td>
</tr>
<tr>
<td>Terceira</td>
<td>Quarta</td>
</tr>
</table>
Cujo resultado é
| Primeira |
Segunda |
| Terceira |
Quarta |
Em HTML, as tabelas são divididas em linhas e células. Na tabela acima, a primeira linha contém as células
Primeira e
Segunda, enquanto que a segunda linha contém as células
Terceira e
Quarta.
Dentro de um bloco
table, os principais elementos que você utilizará são o
tr, ou table row (linha), e o
td, ou table data (célula). Dessa forma, podemos definir as linhas e as células da tabela. É mandatório que um bloco
td esteja definido dentro de um bloco
tr, ou seja, que as células estejam dentro de linhas.
No exemplo anterior, criamos uma linha com
tr e em seguida, dentro de um bloco
td, escrevemos o texto da célula (
Primeira). Abrimos outro bloco
td nesse mesmo bloco
tr, onde colocamos o texto da segunda célula (
Segunda). Depois, fechamos a linha com o
</tr> para em seguida abrir uma nova linha, onde criamos as células contendo os textos
Terceira e
Quarta.
O atributo
border no elemento
table serve para dar borda à tabela. Sem o ele não ficaria muito distinto onde começa e termina cada uma das células:
<table>
<tr>
<td>Primeira</td>
<td>Segunda</td>
</tr>
<tr>
<td>Terceira</td>
<td>Quarta</td>
</tr>
</table>
| Primeira |
Segunda |
| Terceira |
Quarta |
Dentro de um bloco
td é possível colocar códigos HTML e inclusive criar até tabelas dentro de células! Veja só:
<table border="1">
<tr>
<td>Primeira</td>
<td>Segunda</td>
</tr>
<tr>
<td>Terceira</td>
<td>
<table border="1">
<tr>
<td>Quarta</td>
<td>Quinta</td>
</tr>
</table>
</td>
</tr>
</table>
| Primeira |
Segunda |
| Terceira |
|
O código fica complicado o tanto quanto se queira.
Agora que você captou a essência das tabelas, vamos mostrar dois três atributos que podem ser utilizados em tabelas.
Espaçamento entre células
Para controlarmos a distância entre duas células, utilizamos o atributo
cellspacing, cujo argumento é dado em pixels:
<table cellspacing="20" border="1">
<tr>
<td>Primeira</td>
<td>Segunda</td>
</tr>
<tr>
<td>Terceira</td>
<td>Quarta</td>
</tr>
</table>
| Primeira |
Segunda |
| Terceira |
Quarta |
Para controlar o espaçamento vertical, utilizamos o
cellpadding:
<table cellspacing="20" cellpadding="35" border="1">
<tr>
<td>Primeira</td>
<td>Segunda</td>
</tr>
<tr>
<td>Terceira</td>
<td>Quarta</td>
</tr>
</table>
| Primeira |
Segunda |
| Terceira |
Quarta |
Preenchimento de células
Pode ser que você queira uma tabela onde a primeira linha tenha duas células, a segunda com apenas uma célula e a terceira com três células. Faremos o seguinte:
<table border="1">
<tr>
<td>Primeira</td>
<td>Segunda</td>
</tr>
<tr>
<td>Terceira</td>
</tr>
<tr>
<td>Quarta</td>
<td>Quinta</td>
<td>Sexta</td>
</tr>
</table>
| Primeira |
Segunda |
| Terceira |
| Quarta |
Quinta |
Sexta |
Percebeu como a tabela ficou cheia de buracos? Para que as céluas preecham os buracos, utilizaremos o atributo
colspan:
<table border="1">
<tr>
<td>Primeira</td>
<td colspan="2">Segunda</td>
</tr>
<tr>
<td colspan="3">Terceira</td>
</tr>
<tr>
<td>Quarta</td>
<td>Quinta</td>
<td>Sexta</td>
</tr>
</table>
| Primeira |
Segunda |
| Terceira |
| Quarta |
Quinta |
Sexta |
Da mesma forma, se quisermos uma coluna com apenas uma células e outra com duas, poderíamos usar o atributo
rowspan. Veja a diferença entre usarmos e não usarmos o
rowspan:
<table border="1">
<tr>
<td>Primeira</td>
<td>Segunda</td>
</tr>
<tr>
<td>Terceira</td>
</tr>
</table>
| Primeira |
Segunda |
| Terceira |
<table border="1">
<tr>
<td rowspan="2">Primeira</td>
<td>Segunda</td>
</tr>
<tr>
<td>Terceira</td>
</tr>
</table>
| Primeira |
Segunda |
| Terceira |
Largura de células e tabelas
Para escolher a largura de tabelas e células, utiliza-se o já conhecido atributo
width, cujo argumento é idêntico para o caso de imagens:
<table border="1" width="200">
<tr>
<td width="30%">Primeira</td>
<td width="70%">Segunda</td>
</tr>
<tr>
<td>Terceira</td>
<td>Quarta</td>
</tr>
</table>
| Primeira |
Segunda |
| Terceira |
Quarta |
Note que quando
width é utilizado com o elemento
table, a largura refere-se à largura da página, enquanto que quando usado dentro de um
td a largura é referente ao tamando da tabela. Isso tudo desde que o argumento seja dado em porcentagem e não em pixels.
Uso de tabelas
Aqui exploramos poucas possibilidades das tabelas HTML. Você pode utilizá-las para construir uma simples caixa para exibição de informações como fazer uma página inteira utilizando tabelas. Existem muitos outros elementos e atributos para ajudá-lo nessa tarefa. Consulte as referências para mais informações sobre tabelas.
Entidades, acentuação e caracteres especiais
No começo desse manual falamos de
caracteres reservados ou
marcadores, que no caso do HTML são os
< e
>, que quando aparecem num documento HTML são interpretados pelo navegador como delimitadores de instrução. Mas e se eu quiser simplesmente que esses caracteres façam parte do meu texto e não sejam interpretados como marcadores?
No HTML, todos os caracteres tem um nome especial, ou código. Para acessar um caractere, você precisa usar a seguinte convenção:
&nome-especial;
onde o
nome-especial é o nome ou um número associado ao símbolo gráfico que você deseja mostrar no seu documento. Isso define algo que podemos chamar de
sequência reservada, que é um grupo de caracteres que quando interpretado pelo navegador produzirá um caractere, que inclusive pode ser um caractere reservado. No HTML, os nomes especiais são chamaos de
entidades.
Na próxima tabela mostramos alguns nomes especiais de caracteres e suas respectivas sequências reservadas para acessá-los:
| Caracteres | Nome Especial | Sequência Reservada |
| á | aacute | á |
| Á | Aacute | Á |
| é | eacute | é |
| ã | atilde | ã |
| ô | ocirc | ô |
| & | amp | & |
| < | lt | < |
| > | gt | > |
Você encontra
aqui uma lista completa das entidades HTML.
Como você observou, não só os caracteres reservados, mas qualquer tipo de caractere pode ser representado com entidades. Isso pode ser muito útil quando você estiver editando uma página HTML num computador que não esteja com suporte para acentuação. Inclusive as entidades podem ser utilizadas para exibir símbolos matemáticos e monetários, letras gregas, etc.
Modificando o corpo do documento
Como dito anteriormente, o elemento
body engloba o corpo do seu documento HTML. Ele possui muitos atributos que possibiltam modificar a aparência da sua página, como cor de fundo ou das letras. Esses atributos também podem ser utilizados junto com o atributo
td. Aqui mostraremos apenas os atributos que interferem nas cores da sua página:
- bgcolor: define a cor de fundo de um documento
- text: a cor do texto
- link: a cor dos links
- alink: a cor dos links ativos atualmente (a página que você está visitando)
- vlink: cor dos links já visitados
Os argumentos são o nome ou o número de uma cor, exatamente como no caso do atributo
color usado no elemento
font. Por exemplo,
<html>
<head> <title>Isso é uma confusão!</title></head>
<body bgcolor="black" text="gray" link="red" alink="white">
Isso é uma página em html.
</body>
</html>
Essa é uma página HTML onde o fundo será preto, com letras cinzas, links em vermelho e links ativos em branco. Essas são as definições globais de cor para seu documento, e a qualquer instante você pode mudar as cores com o elemento
font.
Outras possibilidades
O princípio de funcionamento do HTML já deve estar sólido em sua mente, se é que você leu tudo o que antecede esta seção. Para que este texto não se torne enfadonho, passaremos para a
Especificação HTML (
texto em espanhol), desenvolvida pelo
consórcio da web, a tarefa de detalhar cada um dos tópicos listados a seguir.
- Texto estruturado: blocos que permitem estruturar lógica e visualmente seu texto
- Listas: blocos para a criação de listagens
- Frames: permite que a página exibida no navegador seja formada por mais de um arquivo html (não recomendado, veja em Acessibilidade)
- Formulários: possibilita a interação do seu html com aplicações web
- Scripting: permite a automatização de certas seções do seu documento
- Meta-informações: fornecem dados a respeito do próprio documento, como data, conjunto de caracteres usado, data de validade, etc
Essas funcionalidades permitirão que você faça documentos html bem completos. Prosseguiremos agora a parte final deste manual, onde serão abordados os temas:
- Como colocar seu site no ar
- HTML Avançado
- O Presente e o futuro do markup
Colocando seu site no ar
Depois de escrever suas páginas
html, talvez você queira colocá-las nalgum lugar acessível na internet, para que outras pessoas possam visitá-las.
Se você estiver escrevendo um
html que será inserido dentro de outra página
html, você não precisará inserir o cabeçalho da página - elementos
html,
head,
title, etc - e nem definir o corpo do documento com o elemento
body, pois isso é assumido já estar escrito no documento principal. Da mesma forma, só no documento principal é preciso colocar as tags
</body> e
</html>.
Para colocar suas páginas HTML num sítio da internet, você precisa de uma conta nalgum provedor que ofereça esse tipo de serviços. Dependendo do provedor, você enviará seus arquivos para o site usando algum programa do tipo FTP (Protocolo de Transferência de Arquivos), SFTP (FTP Seguro) ou através do próprio site do provedor. Para saber como proceder, contate o administrador do local onde seu site será hospedado.
HTML Avançado
Esta seção assume que você já treinou html o suficiente para estar familiarizado com a linguagem e fazer sítios na internet. Daqui em diante, este manual apenas fará um
tour por outras linguagens e tecnologias que podem ser utilizadas para organizar seus documentos, separar a aparência do conteúdo, facilitar buscas e criar documentos que sobretudo não utilizem formatos que venham a ser tornar obsoletos.
Aqui daremos uma visão geral de todas as tecnologias usadas atualmente que podem ser integradas ou tem alguma relação com o html e linguagens de marcação:
- Folhas de Estilo
- Templates
- Acessibilidade
- Sítios dinâmicos ou automatizados
Folhas de Estilo
Folhas de estilo permitem que você separe o conteúdo do seu documento da sua representação gráfica. Como exemplo, ao invés de uma expressão do tipo
<font face="fixed" size="+2" color="red">Estilo misturado com o texto</font>
você utiliza algo mais organizado, como
<div class="estilosa">Estilo separado do texto</div>
E então você definiria uma
classe de nome
estilosa onde os atributos, como tipo de fonte, tamanho e cor seriam definidos. Essa definição pode inclusive estar armazenada num arquivo separado do seu documento, sendo que neste último é necessário apenas uma referência ao arquivo que contanha os estilos.
O mecanismo mais utilizado para criar folhas de estilo para um arquivo HTML é o Cascading Style Sheet, ou CSS. Em CSS, o estilo
estilosa para o exemplo acima poderia ser definido como
div.estilosa {
color : red;
font : fixed;
font-size: 14;
}
As vantagens de usar folhas de estilo são
- Separação entre a informação que o seu texto pretende passar e sua apresentação
- Permite que toda a apresentação do seu texto seja mudada sem que seja preciso alterar o html, bastando apenas que o arquivo que contenha a folha de estilo seja alterado
- Mais organização para seus documentos
- Facilita a criação de Templates
Pela clareza e organização resultante do uso de folhas de estilo, muitas tags e atributos do HTML são consideradas obsoletas ou seu uso é depreciado, inclusive muitas das quais ensinadas neste tutorial. Sempre que possível, utilize CSS nos seus documentos.
Para mais informações sobre Folhas de Estilo em HTML,
consulte esta seção da especificação HTML. Para ver a especificação do CSS, consulte
Cascading Style Sheets, level 1. Um bom documento em português se encontra em
http://www.codigofonte.com/css/.
Templates
Quem usa HTML provavelmente não o faz para escrever um único documento e sim um grande número deles. Se você está redigindo um texto ou fazendo um sítio composto por muitos arquivos, provavelmente você deseja que todos seus documentos HTML tenham a mesma aparência ou o mesmo estilo.
Para uniformizar o estilo e a apresentação, você pode criar um modelo, também conhecido como
template, que contenha o esqueleto de qualquer página de um sítio ou texto que seja dividido em vários arquivos. Esse template pode conter menus, tabelas e todos os campos que você for utilizar.
Existem ainda os
motores de template, que são softwares que juntam o conteúdo com os templates e produzem páginas HTML. Criar um template depende do gosto de cada um, porém se você pretende utilizar um
sítio automatizado existem vários motores de template que você pode utilizar, como por exemplo:
Acessibilidade
Uma consideração importante ao escrever seus documentos HTML é o quão usável e acessível ele é, tanto em termos visuais quanto na organização do conteúdo. Lembre-se que todo o tipo de pessoas podem acessar seu sítio, desde as leigas até as especialistas no assunto que você trata, desde aquelas que já conhecem o sítio até as que nunca ouviram falar dele. Seu conteúdo também precisa estar organizado para que ao longo do tempo as coisas não se percam.
Para ter um bom nível de usabilidade em seu sítio, siga as seguintes recomendações:
- Use esquemas simples
- A navegação do seu sítio deve ser intuitiva
- Crie seções do tipo "Sobre este sítio", "Quem somos", etc
- Use índices na medida do possível
- Escreva resumos
- Use referências
- Use uma lógica para os nomes de arquivos e pastas
- Evite usar frames, elas bloqueiam o modo natural de se navegar pela web
- Escolha mais de um estilo para seu sítio e evite usar combinações de cores que dificultem a visualização
- Disponibilize, na medida do possível, seu conteúdo em mais de um formato: texto simples, documento HTML, etc
- Disponibilize seu conteúdo em copyleft ou em outras licenças
- Valide seu HTML: verifique se seu código HTML está válido ou se existem incorreções
A acessibilidade de um sítio também leva em consideração os
portadores de necessidades especiais.
O W3C possui
linhas gerais de recomendação quanto à acessibilidade do conteúdo de documentos que usam linguagem de marcação.
Sítios dinâmicos ou automatizados
Seu texto ou sítio pode ser composto simplesmente por meia dúzia de documentos HTML e ter pouca ou nenhuma atualização ao longo da sua existência. Caso nada disso seja verdade e você está fazendo algo grande ou então você não tem tempo para escrever seu código HTML na mão, talvez seja o momento de considerar a adoção de um sistema automatizado. Destacaremos três tipos deles:
- Gerenciadores de conteúdo
- Blogs
- Wikis
Gerenciadores de conteúdo? são softwares que rodam em servidores e que administram informações disponíveis em sites. Muitos sítios na internet são apenas arquivos html, mas também existem sítios automatizados que permitem armazenar o conteúdo das páginas num banco de dados e a partir desse banco criar muitas páginas html e ainda manter sistema de busca e publicação sem que para isso o usuário precise saber html ou qualquer outra linguagem de marcação. Alguns gerenciadores de conteúdo permitem que existam
usuários capazes de adicionar comentários em publicações existentes ou até mesmo criar suas próprias páginas através do preenchimento de formulários.
Os
Blogs são casos especiais de gerenciadores de conteúdo que funcionam como diários ou coluna de editorial, onde o dono do blog adiciona texto, imagens e código HTML no sítio apenas preenchendo um formulário.
Já os
Wikis são ferramentas que permitem qualquer pessoa criar ou editar um texto utilizando uma linguagem de marcação especial e mais simples de ser utilizada do que o HTML. Duas características principais dos sistemas Wiki são: você pode criar facilmente uma nova página simplesmente escolhendo um nome especial para ela e escrevê-lo nalguma página já existente. A outra característica dos wikis é a preservação das modificações: o wiki possui um histórico de todas as modificações feitas num documento. Mais informações sobre como usar um sistema wiki você encontra no texo
O Sistema Wiki.
Os gerenciadores de conteúdo, blogs e wikis são escritos nalguma linguagem de programação como
PHP,
Perl,
Python,
Java,
Ruby e muitas vezes utilizam um banco de dados para armazenar o conteúdo. Com um pouco de estudo, você pode escrever seu próprio sistema ou então utilizar uma solução pronta, como por exemplo:
Programas de edição e ferramentas diversas
Como dito anteriormente (mas bem anteriormente, no começo deste texto), é possível redigir arquivos HTML em editores que possuem uma interface WYSIWYG acoplada ao editor de textos, o que facilita tanto o ensino da linguagem quanto as tarefas diárias que precisam ser executadas com maior velocidade. Esses editores tem três grandes facilidades:
- Possuem atalhos para inserir no código os blocos HTML mais usados
- Mudanças no código podem ser rapidamente visualizadas
- Possuem um corretor de sintaxe baseado em cores: o código HTML escrito de forma correta é visualizado no editor com um determinado conjunto de cores no editor, como por exemplo "<a href="http://ln-s.net">Link para o sítio Ln-s.net<a>". O código digitado é constantemente inspecionado pelo programa e, caso ele encontre algum erro, um conjunto de cores de cores diferente é produzido para informar ao usuário que há algum erro de sintaxe. Isso ajuda muito a produzir códigos sempre corretos.
Dois bons exemplos desse tipo de editor são o
Amaya e o
Bluefish.
HTML: Guia de referência rápida
Como resumo de todo o código HTML apresentado até agora, deixamos algumas tabelas de referência rápida que podem ser até impressas e guardadas no bolso.
Características gerais de um documento HTML
| Código | Função | Exige fechamento |
| html | bloco interno é considerado documento html | sim |
| head | bloco que define a cabeça do documento | sim |
| title | bloco que define o título do documento | sim |
| body | bloco interno é considerado o corpo do html | sim |
Aparência do documento
| Código | Função | Exige fechamento |
| b | bloco em negrito | sim |
| i | bloco em itálico | sim |
| u | bloco sublinhado | sim |
| font | muda as características da fonte | sim |
| pre | mantém o texto pré-formatado | sim |
Quebra de linha, parágrafos e divisões
| Código | Função | Exige fechamento |
| br | quebra de linha | não |
| center | texto centralizado | sim |
| p | parágrafos | recomendado |
| div | cria uma divisão | sim |
Atributos diversos
| Código | Atributo | Função | Valores possíveis |
| p, div | align | alinhamento | letf, right, justify, center |
| font | face | fonte | nome da fonte |
| font | size | tamanho | -7 a +7 |
| font | color | cor | ver na seção de cores |
Espaçamento e entidades
| Código | Função | Exige fechamento |
| | espaço simples | não é uma tag |
O Presente e o futuro do markup
As linguagens de marcação se mostraram formas poderosíssimas para armazenar e categorizar conteúdo, tanto é que elas estão sendo desenvolvidas para acomodar dados com diferentes propósitos, incluindo representações de roteamento de chamadas telefônicas, fórmulas matemáticas e esquemas de classificação de remédios. Nas próximas seções veremos como essa generalização está tomando forma.
O consórcio da Web
O HTML e demais linguagens de marcação são atualmente regulamentados pelo
World Wide Web Consortium, o Consórcio da Web ou simplesmente
W3C, uma
iniciativa criada para padronizar muitas das tecnologias de informação surgidas com o advento da Internet.
O sucesso do HTML levou a diversos pesquisadores/as a explorar mais as possibilidades das linguagens de marcação que:
- Acomodem bem o tipo de informação que pretendem armazenar
- Separem o conteúdo da visualização
- Possam ser interpretados por diversos programas
A abordagem que as pesquisas na área escolheram foi a busca por uma generalização total das linguagens e duas metalinguagens (linguagens usadas para definir linguagens) foram definidas: o
SGML e o
XML.
SGML e HTML
O
SGML (ou Standard Generalized Markup Language, Linguagem de Marcação Genérica Padrão) foi a primeira generalização de linguagem de marcação a ser largamente adotada. Como metalinguagem, o SGML é utilizado para definir novas linguagens de marcação e atualmente o HTML é definido através de SGML.
XML
O
XML também é uma linguagem definida sobre SGML, mas que serve para definir linguagens de marcação com propósitos específicos e com uma sintaxe bem estrita. O XML é mais simples de ser interpretado via software e por isso tem ganho bastante visibilidade. Exemplos de linguagens de marcação criadas em XML são:
- MathML: usada para notação matemática.
- RDF: usado principalmente para armazenar notícias.
- VoiceXML: projetada para esquematizar conversas entre um ser humano e um computador.
- XHTML: uma versão do HTML mais simples e escrita em XML.
RDF e Syndication
Em especial, o RDF (Resource Description Framework) é uma linguagem utilizada para criar uma outra sopa de letrinhas conhecida como
RSS (RDF Site Summary, ou Conteúdo de Sítios em RDF), que é um contêiner para armazenar informações de sítios na internet.
Por exemplo,
Centro de Mídia Independente tem um desenho do sítio e uma disposição das notícias que são bem específicos. Se alguém quiser divulgar notícias veiculadas no CMI em seu próprio sítio, teria que fazer um programa bem complicado para extrair essa informação do HTML.
Mas o CMI
também oferece seu conteúdo em RSS, que nada mais é do que um arquivo escrito num dialeto XML que contém os títulos, as datas e os/as autores das notícias numa estrutura bem rígida, que pode ser facilmente interpretada por outros sítios e programas. Então, se alguém quiser divulgar conteúdo publicado no CMI em seu próprio sítio, basta utilizar o RSS do CMI.
O RSS resolveu o problema de juntar informações de diferentes sítios, cada um deles escrito em determinado software ou usando determinado template HTML. Além disso, o RSS permite que a informação de sítio seja obtida por qualquer sistema de tratamento de informações (outro sítio, um programa leitor de notícias, um telefone móvel).
O RSS é suficientemente completo para permitir também que informações de conteúdos multimídia sejam distribuídas. Exemplos disso são o
podcast e o
vodcast. O podcast é o RSS que contém informações de arquivos de áudio disponíveis nalgum site (por exemplo, áudios de notícias, músicas ou programas de rádio). Um tocador de áudio pode ser constantemente alimentado com um podcast e com as informações contidas nele baixar todos os áudios automaticamente, sem intervenção do usuário. Com um vodcast é similar e consiste num RSS para arquivos de vídeo.
Novos formatos e acessibilidade
A existência de novos formatos de armazenamento e visualização de conteúdo bem como o desenvolvimento de editores para tais formatos permite que pessoas com necessidades especiais tenham acesso às informações de um documento de maneira muito mais fácil, já que a conversão do conteúdo de um formato para outro (texto para voz ou diferentes representações gráficas de um mesmo texto, por exemplo) é muito mais simples. O Consórcio da Web inclusive
mantém uma recomendação sobre como criar sítios na internet acessíveis também a
portadores de necessidades especiais.
Fuga de padrões: flash e conteúdo embarcado
Apesar da universalidade dos formatos de armazenamento na web estar a cada dia mais próxima, existem ainda alguns formatos de arquivos que não compartilham seu conteúdo de modo a possibilitar que este seja convertido para outras formas de representação de informação. Isso acontece principalmente porque os arquivos não estão representados como texto puro, mas sim diretamente em linguagem de máquina e muitas vezes o procedimento de decodificação do conteúdo é mantido em sigilo pelos desenvolvedores.
Dois exemplos desses conteúdos "embardacos" são o
Flash e o
Java. O principal problema deles é que a extração de conteúdo neles é deliberadamente dificultada: é complicado copiar um texto de um documento em Flash ou em Java.
Tais formatos que fogem dos padrões amigáveis da web em geral são desenvolvidos por empresas privadas que desejam ter controle sobre os programas existentes para criação e exibição do conteúdo. Há uma verdadeira batalha de formatos e para mais sobre ela, leia
Podemos Pôr um Fim aos Anexos [de e-mail] do Word.
Portanto, como a boa etiqueta da internet pede, evite utilizar conteúdo embarcado em seu sítio
Teia de informação: web semântica, busca por contexto e redes sociais
A consequência de inúmeros documentos HTML referencidando uns aos outros é a formação de uma
teia de textos e imagens, entrelaçados por links.
A web permitiu que conexões entre documentos fossem estabelecidas com um mínimo esforço. Essa conexão desde cedo refletiu tanto uma relação entre assuntos e textos quanto entre pessoas. Se no início da internet apenas as relações entre assuntos eram evidenciadas, hoje a rede social é tida como o parâmetro fundamental de construção da teia da informação.
Leia mais sobre isso em
Se por um lado essas novas tecnologias e formas de organização representam um avanço na informática, por outro elas podem implicar numa grave perda da privacidade das pessoas, que a cada dia colocam mais informação das suas vidas em serviços web. Leia mais sobre isso em
Gran Finale
Apesar de excitante, a discussão sobre esses temas começa a fugir muito do objetivo inicial deste documento, que é a introdução prática do leitor ou da leitora à linguagem de marcação conhecida como HTML e também dar uma noção sobre as novas tecnologias e o futuro da linguagem de marcação.
Espero que você tenha gostado
Notas
Tabela ASCII
Aqui está uma cópia da
Tabela ASCII Simples.
Sobre números hexadecimais
Números são números. Agora, a maneira como podemos representá-los pode variar dependendo do uso que damos a eles. Por exemplo, muitas vezes é suficiente usarmos um palito para cada unidade. A representação do número 4 seria:
| | | |
Note que escrever
4 já é uma representação do número
quatro (que também é uma outra representação desse número). Em números romanos seria
IV. O que muda de uma representação pra outra -
I I I I,
4 ou
IV - são os símbolos, a
base do número e sua notação. No primeiro caso, temos a notação sequencial, onde para cada incremento adiciona-se uma barrinha ao lado das outras. Já no segundo caso, usamos uma notação posicional.
Por alguma coincidência da natureza, o ser humano tem 10 dedos nas mãos e provavelmente por isso utilizamos o sistema decimal. No sistema decimal os símbolos são, em ordem crescente de valor
0,
1,
2,
3,
4,
5,
6,
7,
8 e
9. Cada um desses símbolos ocupa uma posição. Mas o que acontece quando quisermos representar números maiores que nove? Melhor dizendo: o que acontece no sistema decimal conforme formos somando números em sequência? Por exemplo, como podemos representar o número formado pela soma de
9 com
1 se só temos símbolos de
0 a
9?
A resposta para essa pergunta é simples: na notação decimal, o valor de um símbolo depende da posição que ele ocupa. Por convenção, se um símbolo for deslocado para esquerda ele terá seu valor aumentado dez vezes. Assim, o número 2, quando deslocado para a esquerda, se transforma em 20 e um zero é colocado na sua posição anterior para marcar uma posição vazia. Da mesma forma, um deslocamento de dígito para a direita implica na redução do valor de um número em dez vezes.
"Mas você ainda não respondeu minha pergunta: o que acontece quando somamos 9 com 1?" Aí vem o pulo do gato: quando somamos 8 com 1, o número resultante é representado pelo símbolo que na ordem crescente de valores vem logo após o 8, que é o 9. Quando somamos 1 ao 9, não temos mais símbolos com valor maior que o 9. O que fazemos simplesmente é "limpar" a posição atual ocupada pelo 9 usando o número 0 e colocando o número 1 numa posição à esquerda do zero. Lembra que eu disse que um dígito quando deslocado para a esquerda cresce dez vezes de valor? Pois quando deslocamos o número 1 para esquerda ele se torna 10 (usamos o zero para indicar que há uma posição vazia à direita do 1), que é o número dez, o resultado da soma de 1 com 9.
Portanto, para representar o número dez, é necessário adicionar uma nova posição, o que significa que precisamos usar dois desses símbolos:
10. Ou seja, no sistema decimal necessitamos de dez símbolos para representar os números e por isso dizemos que ele é um sistema de base 10.
Mas nem sempre foi assim. Os babilônios utilizavam um sistema de base 60! Para eles, isso facilitava muito os cálculos de astronomia e agrimensura, porque 60 é um número divisível por 2, 3, 4, 5, 6, 10, 12, etc e isso era crucial para facilitar as contas.
Em computação, onde em geral os números são bem grandes, é comum utilizar uma notação com base maior que dez, pois cabe mais informação em cada posição numérica. A base mais utilizada é a 16, também chamada de hexadecimal, porque em geral as informações são agrupadas em múltiplos de oito. É por isso que neste tutorial os códigos de cores estão em hexadecimal: são tantas cores que a notação em decimal ficaria muito complicada.
Para ver a tabela de números hexadecimais e saber como converter da notação decimal para hexadecimal (e vice-versa), acesse a página
http://pt.wikipedia.org/wiki/Hexadecimal.
Sobre este Guia
Este manual foi escrito por Rhatto (
rhatto@riseupSTOPSPAMSTOPSPAM.net).
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 2.0 Brazil License.
--
SilvioRhatto - 18 Sep 2006
to top
