Você está na página 1de 39

GuiaHtml < Sysadmin < Indymedia Documentation Project http://docs.indymedia.org/viewauth/Sysadmin/GuiaHtml?skin=pri...

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
Manual Prático de HTML
Índice
Processamento e Formatação de textos
Texto e escrita
Texto puro
Markup Language
Editores "Puros" versus WYSIWYG
Hipertexto
HTML Básico
Por que não usar um editor de html?
Começando
Mais um pouco de teoria
Observações
Finalmente a prática!
Escrevendo uma página em HTML
Texto em negrito
Texto em itálico
Texto sublinhado
Espaçamento
Quebra de linha
Texto centralizado
Parágrafos
Alinhamentos de parágrafo
Criando uma divisão
Mudando os atributos da fonte.
Texto pré-formatado
Imagens
Tamanho de exibição da imagem
Texto alternativo
Borda da imagem
Alinhamento da imagem
Espaçamento da imagem
Tipos de imagens
Links
Links internos
Links locais ou relativos
Links externos
Alvo (target)
Headings
Tabelas

1 of 39 13-06-2008 20:27
GuiaHtml < Sysadmin < Indymedia Documentation Project http://docs.indymedia.org/viewauth/Sysadmin/GuiaHtml?skin=pri...
Espaçamento entre células
Preenchimento de células
Largura de células e tabelas
Uso de tabelas
Entidades, acentuação e caracteres especiais
Modificando o corpo do documento
Outras possibilidades
Colocando seu site no ar
HTML Avançado
Folhas de Estilo
Templates
Acessibilidade
Sítios dinâmicos ou automatizados
Programas de edição e ferramentas diversas
HTML: Guia de referência rápida
Características gerais de um documento HTML
Aparência do documento
Quebra de linha, parágrafos e divisões
Atributos diversos
Espaçamento e entidades
O Presente e o futuro do markup
O consórcio da Web
SGML e HTML
XML
RDF e Syndication
Novos formatos e acessibilidade
Fuga de padrões: flash e conteúdo embarcado
Teia de informação: web semântica, busca por contexto e redes sociais
Gran Finale
Notas
Tabela ASCII
Sobre números hexadecimais
Sobre este Guia

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ê

2 of 39 13-06-2008 20:27
GuiaHtml < Sysadmin < Indymedia Documentation Project http://docs.indymedia.org/viewauth/Sysadmin/GuiaHtml?skin=pri...
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

3 of 39 13-06-2008 20:27
GuiaHtml < Sysadmin < Indymedia Documentation Project http://docs.indymedia.org/viewauth/Sysadmin/GuiaHtml?skin=pri...
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

((

4 of 39 13-06-2008 20:27
GuiaHtml < Sysadmin < Indymedia Documentation Project http://docs.indymedia.org/viewauth/Sysadmin/GuiaHtml?skin=pri...

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

5 of 39 13-06-2008 20:27
GuiaHtml < Sysadmin < Indymedia Documentation Project http://docs.indymedia.org/viewauth/Sysadmin/GuiaHtml?skin=pri...
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

6 of 39 13-06-2008 20:27
GuiaHtml < Sysadmin < Indymedia Documentation Project http://docs.indymedia.org/viewauth/Sysadmin/GuiaHtml?skin=pri...
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>

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

7 of 39 13-06-2008 20:27
GuiaHtml < Sysadmin < Indymedia Documentation Project http://docs.indymedia.org/viewauth/Sysadmin/GuiaHtml?skin=pri...

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>

8 of 39 13-06-2008 20:27
GuiaHtml < Sysadmin < Indymedia Documentation Project http://docs.indymedia.org/viewauth/Sysadmin/GuiaHtml?skin=pri...

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

9 of 39 13-06-2008 20:27
GuiaHtml < Sysadmin < Indymedia Documentation Project http://docs.indymedia.org/viewauth/Sysadmin/GuiaHtml?skin=pri...

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,
&nbsp; As entidades serão tratadas em detalhes na seção Entidades, acentuação e caracteres especiais.

10 of 39 13-06-2008 20:27
GuiaHtml < Sysadmin < Indymedia Documentation Project http://docs.indymedia.org/viewauth/Sysadmin/GuiaHtml?skin=pri...

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, &nbsp;:

Exemplo 1:

Espaço simples e espaço&nbsp;&nbsp;duplo.

Resultado:

Espaço simples e espaço duplo.

Exemplo 2:

Olha&amp;nbsp;como&amp;nbsp;&amp;nbsp;as
&amp;nbsp;&amp;nbsp;&amp;nbsp;coisas
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;vão
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
&amp;nbsp;ficando&amp;nbsp;&amp;nbsp;&amp;nbsp;
&amp;nbsp;&amp;nbsp;&amp;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

11 of 39 13-06-2008 20:27
GuiaHtml < Sysadmin < Indymedia Documentation Project http://docs.indymedia.org/viewauth/Sysadmin/GuiaHtml?skin=pri...

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

12 of 39 13-06-2008 20:27
GuiaHtml < Sysadmin < Indymedia Documentation Project http://docs.indymedia.org/viewauth/Sysadmin/GuiaHtml?skin=pri...
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

13 of 39 13-06-2008 20:27
GuiaHtml < Sysadmin < Indymedia Documentation Project http://docs.indymedia.org/viewauth/Sysadmin/GuiaHtml?skin=pri...
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.

14 of 39 13-06-2008 20:27
GuiaHtml < Sysadmin < Indymedia Documentation Project http://docs.indymedia.org/viewauth/Sysadmin/GuiaHtml?skin=pri...

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>

15 of 39 13-06-2008 20:27
GuiaHtml < Sysadmin < Indymedia Documentation Project http://docs.indymedia.org/viewauth/Sysadmin/GuiaHtml?skin=pri...
<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

16 of 39 13-06-2008 20:27
GuiaHtml < Sysadmin < Indymedia Documentation Project http://docs.indymedia.org/viewauth/Sysadmin/GuiaHtml?skin=pri...
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:

&lt;pre&gt;
Lista de cores:
&lt;font color="#FFFF00"&gt;
a
m
arelo
&lt;/font&gt;
&lt;font color="#000000"&gt;
p
r
e
to
&lt;/font&gt;
&lt;font color="#0000FF"&gt;
l
u
z

17 of 39 13-06-2008 20:27
GuiaHtml < Sysadmin < Indymedia Documentation Project http://docs.indymedia.org/viewauth/Sysadmin/GuiaHtml?skin=pri...
azul
&lt;/font&gt;
&lt;font color="#FF0000"&gt;
v r e h
e m l o
&lt;/font&gt;
&lt;pre&gt;

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:

18 of 39 13-06-2008 20:27
GuiaHtml < Sysadmin < Indymedia Documentation Project http://docs.indymedia.org/viewauth/Sysadmin/GuiaHtml?skin=pri...

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

19 of 39 13-06-2008 20:27
GuiaHtml < Sysadmin < Indymedia Documentation Project http://docs.indymedia.org/viewauth/Sysadmin/GuiaHtml?skin=pri...
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">

20 of 39 13-06-2008 20:27
GuiaHtml < Sysadmin < Indymedia Documentation Project http://docs.indymedia.org/viewauth/Sysadmin/GuiaHtml?skin=pri...

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!".

21 of 39 13-06-2008 20:27
GuiaHtml < Sysadmin < Indymedia Documentation Project http://docs.indymedia.org/viewauth/Sysadmin/GuiaHtml?skin=pri...
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"

22 of 39 13-06-2008 20:27
GuiaHtml < Sysadmin < Indymedia Documentation Project http://docs.indymedia.org/viewauth/Sysadmin/GuiaHtml?skin=pri...
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

23 of 39 13-06-2008 20:27
GuiaHtml < Sysadmin < Indymedia Documentation Project http://docs.indymedia.org/viewauth/Sysadmin/GuiaHtml?skin=pri...

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>

24 of 39 13-06-2008 20:27
GuiaHtml < Sysadmin < Indymedia Documentation Project http://docs.indymedia.org/viewauth/Sysadmin/GuiaHtml?skin=pri...

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>

25 of 39 13-06-2008 20:27
GuiaHtml < Sysadmin < Indymedia Documentation Project http://docs.indymedia.org/viewauth/Sysadmin/GuiaHtml?skin=pri...
<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>

26 of 39 13-06-2008 20:27
GuiaHtml < Sysadmin < Indymedia Documentation Project http://docs.indymedia.org/viewauth/Sysadmin/GuiaHtml?skin=pri...
<td>Quarta</td>
<td>Quinta</td>
</tr>
</table>
</td>
</tr>
</table>

Primeira Segunda

Terceira Quarta Quinta

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>

27 of 39 13-06-2008 20:27
GuiaHtml < Sysadmin < Indymedia Documentation Project http://docs.indymedia.org/viewauth/Sysadmin/GuiaHtml?skin=pri...

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>

28 of 39 13-06-2008 20:27
GuiaHtml < Sysadmin < Indymedia Documentation Project http://docs.indymedia.org/viewauth/Sysadmin/GuiaHtml?skin=pri...
<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>

Segunda
Primeira
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>

29 of 39 13-06-2008 20:27
GuiaHtml < Sysadmin < Indymedia Documentation Project http://docs.indymedia.org/viewauth/Sysadmin/GuiaHtml?skin=pri...
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;
Á Aacute &Aacute;
é eacute &eacute;
ã atilde &atilde;
ô ocirc &ocirc;
& amp &amp;
< lt &lt;
> gt &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.

30 of 39 13-06-2008 20:27
GuiaHtml < Sysadmin < Indymedia Documentation Project http://docs.indymedia.org/viewauth/Sysadmin/GuiaHtml?skin=pri...

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.

31 of 39 13-06-2008 20:27
GuiaHtml < Sysadmin < Indymedia Documentation Project http://docs.indymedia.org/viewauth/Sysadmin/GuiaHtml?skin=pri...

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

32 of 39 13-06-2008 20:27
GuiaHtml < Sysadmin < Indymedia Documentation Project http://docs.indymedia.org/viewauth/Sysadmin/GuiaHtml?skin=pri...
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:

?
FreeMarker: utilizado por exemplo no sítio do CMI Brasil (ver detalhes técnicos )
Smarty: usado para sítios escritos em PHP

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.

33 of 39 13-06-2008 20:27
GuiaHtml < Sysadmin < Indymedia Documentation Project http://docs.indymedia.org/viewauth/Sysadmin/GuiaHtml?skin=pri...

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:

Gerenciadores de conteúdo: Drupal (ver Como instalar e configurar o Drupal), SPIP (ver Manual Básico de
Spip)
Wikis: PmWiki, PhpWiki, MediaWiki, TWiki
Blogs: b2, WordPress

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.

34 of 39 13-06-2008 20:27
GuiaHtml < Sysadmin < Indymedia Documentation Project http://docs.indymedia.org/viewauth/Sysadmin/GuiaHtml?skin=pri...
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


&nbsp; espaço simples não é uma tag

O Presente e o futuro do markup

35 of 39 13-06-2008 20:27
GuiaHtml < Sysadmin < Indymedia Documentation Project http://docs.indymedia.org/viewauth/Sysadmin/GuiaHtml?skin=pri...

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.

36 of 39 13-06-2008 20:27
GuiaHtml < Sysadmin < Indymedia Documentation Project http://docs.indymedia.org/viewauth/Sysadmin/GuiaHtml?skin=pri...

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

Web 2.0 na Wikipedia


Rede Semântica na Wikipedia
Introdução à Semântica Web

37 of 39 13-06-2008 20:27
GuiaHtml < Sysadmin < Indymedia Documentation Project http://docs.indymedia.org/viewauth/Sysadmin/GuiaHtml?skin=pri...

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

Mineração de Dados na Wikipedia


Web 2.0 will end your privacy

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

38 of 39 13-06-2008 20:27
GuiaHtml < Sysadmin < Indymedia Documentation Project http://docs.indymedia.org/viewauth/Sysadmin/GuiaHtml?skin=pri...
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

Attachment Action Size Date Who Comment

ascii.html manage 7.5 K 26 Aug 2003 - 01:25 SilvioRhatto Tabela ASCII

emma.jpg manage 12.9 K 24 Apr 2004 - 19:58 SilvioRhatto Emma Goldman

Revision: r1.67 - 13 Sep 2007 - 20:44 - AlsteR

Sysadmin > CmiBrasilTech > GuiaHtml

Copyright © 1999-2008 by the contributing authors.


All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding this tool? Send feedback (in English, Francais, Deutsch or Dutch).

39 of 39 13-06-2008 20:27