(sem título)

Introdução à Linguagem HTML

HTML (HyperText Markup Language – Linguagem de Formatação de Hipertexto) é fruto do “casamento” dos padrões HyTime e SGML.

HyTime – Hypermedia/Time-based Document Structuring Language

Hy Time (ISO 10744:1992) – padrão para representação estruturada de hipermídia e informação baseada em tempo. Um documento é visto como um conjunto de eventos concorrentes dependentes de tempo (áudio, vídeo, etc.), conectados por webs ou hiperlinks.
O padrão HyTime é independente dos padrões de processamento de texto em geral. Ele fornece a base para a construção de sistemas hipertexto padronizados, consistindo de documentos que alicam os padrões de maneira particular

SGML – Standard Generalized Markup Language

Padrão ISO 8879 de formatação de textos: não foi desenvolvido para hipertexto, mas torna-se conveniente para transformar documentos em hiper-objetos e para descrever as ligações.
SGML não é padrão aplicado de maneira padronizada: todos os produtos SGML têm seu próprio sistema para traduzir as etiquetas para um particular formatador de texto.

 

· DTD – Document Type Definition – define as regras de formatação para uma dada classe de documentos. Um DTD ou uma referência para um DTD deve estar contido em qualquer documento conforme o padrão SGML.

Portanto, HTML é definido segundo um DTD de SGML.

Todo documento HTML apresenta elementos entre parênteses angulares (< e >); esses elementos são as etiquetas (tags) de HTML, que são os comandos de formatação da linguagem. A maioria das etiquetas tem sua correspondente de fechamento:

<etiqueta>...</etiqueta>

Isso é necessário porque as etiquetas servem para definir a formatação de uma porção de texto, e assim marcamos onde começa e termina o texto com a formatação especificada por ela.

Alguns elementos são chamados “vazios”, pois não marcam uma região de texto, apenas inserem alguma coisa no documento:

<etiqueta>

Todos os elementos podem ter atributos:

<etiqueta atributo1=valor1 atributo2=valor2>...</etiqueta>

HTML é um recurso muito simples e acessível para a produção de documentos. Nestes “capítulos”, será possível aprender grande parte de seus elementos.

Edição de documentos HTML

Os documentos em HTML são como arquivos ASCII comuns, que podem ser editados em vi, emacs, textedit, notepad, ou qualquer editor simples.

Para facilitar a produção de documentos, existem editores HTML específicos:

• Editores de texto fonte

- facilitam a inserção das etiquetas, orientando o uso de atributos e marcações.

Ex.: W3e, HotDog, Crimson Editor.

 

• Editores WYSIWYG

- oferecem ambiente de edição com “um” resultado final das marcações (pois o resultado final depende do browser usado para visitar a página).

Ex.: FrontPage, Namo Editor, Dreamweaver.

Além dos editores específicos para HTML, editores bastante utilizados, como o Word, entre outros, permitem a exportação de seus documentos próprios para o formato HTML.

O documento HTML produzido, normalmente terá extensão .html ou .htm.

Publicação de documentos

Para que uma página esteja permanentemente disponível pela Web, ela precisa ter um endereço fixo, alojada em um servidor.

Existem vários provedores de espaço (hosting) gratuitos e também os provedores de acesso geralmente oferecem espaço para os sites de seus assinantes. Sites com fins lucrativos geralmente são hospedados em provedores de espaço pagos.

Definida a hospedagem, basta enviar para o provedor os arquivos de seu site (via FTP ou por uma página de envio no próprio provedor de espaço) e suas páginas já estarão disponíveis para visitas.

Na rede do ICMC

Para ter sua página pessoal, é necessário ter uma área na rede. Tendo sua área, o primeiro passo é criar, em seu diretório raiz, um diretório de nome WWW (em letras maiúsculas).

A partir do momento da criação desse diretório WWW, o URL

http://www.icmc.usp.br/~seulogin/

- ou http://www.grad.icmc.usp.br/~seulogin/, no caso de alunos de graduação

passa a ser reconhecido pelo servidor. Nesse diretório WWW deve haver um arquivo index.html, que será a sua página principal.

A seguir, certifique-se de que sua área e o diretório WWW dentro dela estejam com permissão de leitura para “todos” (no ambiente UNIX, dê o comando chmod 755 WWW).

Feito isso, se você é aluno do ICMC faça o cadastro de sua página aqui.

Obs.: Estas diretivas se aplicam em particular à rede do ICMC; outros sistemas podem ter outras configurações específicas. Se você não é usuário do ICMC, visite a página de seu provedor de acesso à Internet ou provedor de e-mail (webmail) e procure informações sobre hospedagem de páginas.

Documento básico e seus componentes

A estrutura de um documento HTML apresenta os seguintes componentes:

<HTML>

<HEAD><TITLE>Titulo do Documento</TITLE></HEAD>

<BODY>

texto,

imagem,

links,

...

</BODY>

</HTML>

As etiquetas HTML não são sensíveis à caixa. Traduzindo: tanto faz escrever <HTML>, <Html>, <html>, <HtMl>, …

Os documentos se dividem em duas seções principais, que veremos a seguir.

A seção <HEAD>

<HEAD> contém informações sobre o documento. O elemento <TITLE>, por exemplo, define um título, que é mostrado no alto da janela do browser. Nesta página, por exemplo, está definido assim:

<HEAD><TITLE>A seção <HEAD> - Tutorial HTML do ICMC-USP</TITLE></HEAD>

Todo documento WWW deve ter um título; esse título é referenciado em buscas pela rede, dando uma identidade ao documento. Para ver na prática a importância do título, se você adicionar esta página aos seus Favoritos (Bookmarks), o resultado será semelhante a este:

Note que o título da página se tornou a âncora de atalho para ela. Por isso é sugerido que os títulos dos documentos sejam sugestivos, evitando-se títulos genéricos como “Introdução”. O título também é bastante significativo para a listagem de uma página nos resultados de pesquisas nos catálogos da Internet.

Além do título, <HEAD> contém outras informações de importância para os robôs de pesquisa, indicadas nos campos <META>.

Campos <META>

Os campos <META> têm dois atributos principais:

• NAME, indicando um nome para a informação
• HTTP-EQUIV, que faz uma correspondência com campos de cabeçalho do protocolo HTTP; a informação desse campo pode ser lida pelos browsers, e provocar algumas ações.

<HEAD>

<TITLE>Título do Documento</TITLE>

<META NAME="nome" CONTENT="valor">

<META HTTP-EQUIV="nome" CONTENT="valor">

</HEAD>

Este documento, por exemplo, tem as seguintes informações:

<HEAD>
<META HTTP-EQUIV="content-type" CONTENT="text/html; charset=iso-8859-1">
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<TITLE>A seção <HEAD> - Tutorial HTML do ICMC-USP</TITLE>
<META NAME="Author" CONTENT="Maria Alice Soares de Castro - masc@icmc.usp.br">
<META NAME="Generator" CONTENT="Namo WebEditor v5.0">
<META NAME="Description" CONTENT="Manual de referência para webdesigners e desenvolvedores de sites">
<META NAME="KeyWords" CONTENT="HTML, WWW, Webpublishing, Internet, Webdesign">
<LINK REL="stylesheet" href="folhatut.css">
</HEAD>

Alguns valores dos atributos META NAME são inseridos automaticamente por alguns editores, por exemplo: Generator e Author. Os campos Description e KeyWords ajudam a classificação da página em algumas ferramentas de busca. Essas informações não têm qualquer efeito na apresentação da página, mas servem como uma explicação ou documentação sobre as informações contidas nela.

Há poucos valores para META HTTP-EQUIV em uso. O mais comum é content-type, que indica o conjunto de caracteres usado na página: essa informação ajuda o browser a exibir corretamente os caracteres especiais que estiverem presentes no texto.

Um exemplo de uso comum do atributo HTTP-EQUIV é promover a mudança automática de páginas, atribuindo-lhe o valor Refresh. Veja este exemplo.

Agora que você voltou do exemplo, veja como esse efeito é conseguido:

<HEAD>

<TITLE> ... </TITLE>

<META HTTP-EQUIV="Refresh" CONTENT="segundos; URL= pagina.html">

</HEAD>

onde:

pagina.html

é a página a ser carregada automaticamente

segundos

é o número de segundos passados até que a página indicada seja carregada.

Como foi comentado no exemplo, o efeito é interessante, mas para que serve? Se não pensamos em uma finalidade útil para esse efeito, caímos na tentação de usá-lo “à toa”.

A aplicação mais utilizada é a atualização automática de um documento que, por exemplo, tenha uma foto produzida por uma câmara de vídeo: pode-se forçar, com o Refresh, a atualização dessa página, mostrando para o leitor sempre uma imagem mais atual de algum evento sendo focalizado pela câmara. Outra utilização é em “chats”, ou em páginas que desviem a navegação por documentos desenvolvidos para browsers avançados.

A seção <BODY>

Tudo que estiver contido em <BODY> será mostrado na janela principal do browser, sendo apresentado ao leitor. <BODY> pode conter cabeçalhos, parágrafos, listas, tabelas, links para outros documentos, imagens, formulários, animações, vídeos, sons e scripts embutidos.

Veja um documento básico em HTML.

Atributos de <BODY>

Através de atributos de <BODY>, podemos definir cores para os textos, links e para o fundo das páginas, bem como uma imagem de fundo (marca d’água):

<BODY BGCOLOR="#rrggbb" TEXT="#rrggbb" LINK="#rrggbb" ALINK="#rrggbb" VLINK="#rrggbb" BACKGROUND="URL">

onde:

BGCOLOR

cor de fundo (quando não é indicada, o browser irá mostrar uma cor padrão, geralmente o cinza ou branco; alguns editores poderão estabelecer o branco para o fundo da página)

TEXT

cor dos textos da página (padrão: preto)

LINK

cor dos links (padrão: azul)

ALINK

cor dos links, quando acionados (padrão: vermelho)

VLINK

cor dos links, depois de visitados (padrão: azul escuro ou roxo)

Seus valores são dados em hexadecimal, equivalentes a cores no padrão RGB (Red, Green, Blue). Existem tabelas de cores com esses valores, mas grande parte dos editores já oferece uma interface bem amigável através da qual escolhemos as cores desejadas, sem nos preocuparmos com números esdrúxulos tais como #FF80A0.

Browsers que seguem a definição de HTML 3.2 em diante, também aceitam 16 nomes de cores, tirados da paleta VGA do Windows – por exemplo, podemos escrever BGCOLOR="BLUE". Porém, browsers mais antigos não apresentarão as cores indicadas.

BACKGROUND

indica o URL da imagem a ser replicada no fundo da página, como uma marca d’água. Veja o exemplo de uma página cuja imagem de fundo é .

Para efeitos de design, é possível fixar a imagem de fundo, para que ela não se mova junto com o texto ao se rolar a página. Esse efeito não é padrão e funciona no Internet Explorer.

Cabeçalhos

Há seis níveis de cabeçalhos em HTML, de <H1> a <H6>:

<H1>Este é um cabeçalho de nível 1</H1><H2>Este é um cabeçalho de nível 2</H2>
<H3>Este é um cabeçalho de nível 3</H3><H4>Este é um cabeçalho de nível 4</H4>
<H5>Este é um cabeçalho de nível 5</H5><H6>Este é um cabeçalho de nível 6</H6>

Esses cabeçalhos são mostrados da seguinte forma:

Este é um cabeçalho de nível 1

Este é um cabeçalho de nível 2

Este é um cabeçalho de nível 3

Este é um cabeçalho de nível 4

Este é um cabeçalho de nível 5

Este é um cabeçalho de nível 6

Aninhamento de cabeçalhos

Os cabeçalhos não podem ser aninhados, isto é, a formatação:

<H2>Este é <H1>um cabeçalho de nível 1</H1> dentro de um cabeçalho de nível 2</H2>

pode produzir algum resultado próximo ao desejado:

Este é

um cabeçalho de nível 1

dentro de um cabeçalho de nível 2

mas o mais comum é que os browsers “entendam” essa formatação como sendo:

<H2>Este é</H2> <H1>um cabeçalho de nível 1</H1> dentro de um cabeçalho de nível 2</H2>

- ou seja, como se estivesse faltando uma etiqueta de fechamento de <H2> antes de <H1>, e faltando uma abertura de <H2> depois do fechamento de <H1>, oferecendo o seguinte resultado:

Este é

um cabeçalho de nível 1

dentro de um cabeçalho de nível 2

Os editores WYSIWYG naturalmente não permitem o aninhamento de cabeçalhos.

Alinhamento

Os cabeçalhos têm atributos de alinhamento:

<H2 ALIGN=CENTER>Cabeçalho centralizado</H2>

Cabeçalho centralizado

<H3 ALIGN=RIGHT>Cabeçalho alinhado à direita</H3>

Cabeçalho alinhado à direita

<H4 ALIGN=LEFT>Cabeçalho alinhado à esquerda (default)</H4>

Cabeçalho alinhado à esquerda (default)

Separadores

Como vimos no primeiro exemplo, as quebras de linha do texto fonte não são significativas na apresentação de documentos em HTML. Para organizar os textos, precisamos de separadores, apresentados aqui.

Quebra de linha

Quando queremos mudar de linha, usamos o elemento <BR>. Isso só é necessário quando queremos uma quebra de linha em determinado ponto, pois os browsers já quebram as linhas automaticamente para apresentar os textos.

Com sucessivos <BR>, podemos inserir diversas linhas em branco nos documentos. Esse elemento tem um atributo especial, que será apresentado no item sobre inserção de imagens.

Parágrafos

Para separar blocos de texto, usamos o elemento <P>:

Parágrafo 1;<P>Parágrafo 2.

que produz:

Parágrafo1;

Parágrafo2.

Combinando parágrafos e quebras de linha, temos:

Parágrafo 1;<br> linha 1 do parágrafo 1, <br>linha 2 do parágrafo 1.<P>Parágrafo 2;<br> linha 1 do parágrafo 2, <br>linha 2 do parágrafo 2.

O resultado da marcação acima é:

Parágrafo 1;
linha 1 do parágrafo 1,
linha 2 do parágrafo 1.

Parágrafo 2;
linha 1 do parágrafo 2,
linha 2 do parágrafo 2.

<P> tem atributo de alinhamento, como os cabeçalhos:

<P ALIGN=CENTER>Assim como os trens, as boas idéias às vezes chegam com atraso. <BR>(Giovani Guareschi)</P>

Assim como os trens, as boas idéias às vezes chegam com atraso.
(Giovani Guareschi)

<P ALIGN=RIGHT>Como diz o provérbio chinês: “É melhor passar por ignorante uma vez do que permanecer ignorante para sempre”.</P>

Como diz o provérbio chinês: “É melhor passar por ignorante uma vez do que permanecer ignorante para sempre”.

<P ALIGN=LEFT>Este é o alinhamento padrão (default), e por isso não vou colocar nenhuma frase especial.</P>

Este é o alinhamento padrão (default), e por isso não vou colocar nenhuma frase especial.

Linha Horizontal

<HR> insere uma linha horizontal:

---

Essa linha tem diversos atributos, oferecendo resultados diversos.

<HR SIZE=7> insere uma linha de largura 7 (pixels):

---

<HR WIDTH=50%> insere uma linha que ocupa 50% do espaço horizontal disponível:

---

<HR WIDTH=30% ALIGN=RIGHT NOSHADE> insere uma linha de comprimento 30% (do espaço horizontal disponível), alinhada à direita, sem efeito tridimensional:

---

<HR SIZE=70 WIDTH=2 ALIGN=LEFT> insere uma linha de largura 70 (pixels), comprimento 2 (pixels), alinhada à esquerda (o Netscape, aparentemente, não aceita esta formatação de <HR>):

Listas em HTML

Há vários tipos de listas em HTML, sendo estas as mais usadas e corretamente apresentadas pelos browsers:

Listas de Definição

Estas listas são chamadas também “Listas de Glossário”, uma vez que têm o formato:

<DL>

<DT>termo a ser definido

<DD>definição

<DT>termo a ser definido

<DD>definição

</DL>

Que produz:

termo a ser definido

definição

termo a ser definido

definição

Este tipo de lista é muito utilizado para diversos efeitos de organização de páginas, por permitir a tabulação do texto. Um exemplo são os índices de navega_1ção presentes nas pági nas deste tutorial; outro exemplo é a lista composta abaixo:

<DL>

<DT>Imperadores do Brasil:

<DD>D. Pedro I

<DL>

<DD>Nome completo: Pedro de Alcântara Francisco Antônio João Carlos Xavier de Paula Miguel Rafael Joaquim José Gonzaga Pascoal Cipriano Serafim de Bragança e Bourbon

</DL>

<DD>D. Pedro II

<DL>

<DD>Nome completo: Pedro de Alcântara João Carlos Leopoldo Salvador Bibiano Francisco Xavier de Paula Leocádio Miguel Gabriel Rafael Gonzaga

</DL>

</DL>

Imperadores do Brasil:

D. Pedro I

Nome completo: Pedro de Alcântara Francisco Antônio João Carlos Xavier de Paula Miguel Rafael Joaquim José Gonzaga Pascoal Cipriano Serafim de Bragança e Bourbon

D. Pedro II

Nome completo: Pedro de Alcântara João Carlos Leopoldo Salvador Bibiano Francisco Xavier de Paula Leocádio Miguel Gabriel Rafael Gonzaga

Listas não-numeradas

São equivalentes às listas com marcadores do MS Word:

<UL>

<LI>item de uma lista

<LI>item de uma lista, que pode ser tão grande quanto se queira, sem que seja necessário se preocupar com a formatação das margens de texto

<LI>item

</UL>

• item de uma lista
• item de uma lista, que pode ser tão grande quanto se queira, sem que seja necessário se preocupar com a formatação das margens de texto
• item

A diferença entre o resultado da marcação HTML e do Word está na mudança dos marcadores, assinalando os diversos níveis de listas compostas:

<UL>

<LI>Documentos básicos

<LI>Documentos avançados

<UL>

<LI>formulários

<UL>

<LI>CGI

</UL>

<LI>contadores

<LI>relógios

</UL>

<LI>Detalhes sobre imagens

</UL>

• Documentos básicos
• Documentos avançados
  • formulários
    • CGI
  • contadores
  • relógios
• Detalhes sobre imagens

Essa lista pode ter marcadores diferentes, indicados através do atributo TYPE, que assume os valores CIRCLE, SQUARE e DISC (default):

<UL TYPE=CIRCLE>

<LI>um item

<LI>mais um item

</UL>

• um item
• mais um item

Cada item também pode ter seu atributo específico:

<UL>

<LI TYPE=DISC>um item

<LI TYPE=CIRCLE>mais um item

<LI TYPE=SQUARE>último item

</UL>

• um item
• mais um item
• último item

Listas Numeradas

<OL>

<LI>item de uma lista numerada

<LI>item de uma lista numerada, que pode ser tão grande quanto se queira, sem que seja necessário se preocupar com a formatação das margens de texto

<LI>item de lista numerada

</OL>

1. item de uma lista numerada
2. item de uma lista numerada, que pode ser tão grande quanto se queira, sem que seja necessário se preocupar com a formatação das margens de texto
3. item de lista numerada

Estas listas não apresentam numeração em formato 1.1, 1.2 etc., quando compostas:

1. Documentos básicos
2. Documentos avançados
   1. formulários
      1. CGI
      2. contadores
      3. relógios
   2. Detalhes sobre imagens

Porém, através do atributo TYPE (HTML 3.2), pode-se lidar com a numeração dos itens:

<OL TYPE=I>

<LI>Documentos básicos

<LI>Documentos avançados

<OL TYPE=a>

<LI >formulários

<OL TYPE=i>

<LI>CGI

</OL>

<LI>contadores

<LI>relógios

</OL>

<LI>Detalhes sobre imagens

</OL>

1. Documentos básicos
2. Documentos avançados
   1. formulários
      1. CGI
   2. contadores
   3. relógios
3. Detalhes sobre imagens

Ainda segundo HTML 3.2, o atributo START pode indicar o início da numeração da lista:

<OL START=4 TYPE=A>

<LI>um item

<LI>outro item

<LI>mais um item

</OL>

1. um item
2. outro item
3. mais um item

Listas e “sub-listas”

As listas podem ser aninhadas. Por exemplo:

<DL>

<DT>termo a ser definido

<DD>definição

   <OL>

   <LI>item de uma lista numerada

   <LI>item de uma lista numerada

      <UL>

      <LI>item de uma lista

      </UL>

   <LI>item de uma lista numerada

   </OL>

<DT>termo a ser definido

<DD>definição

</DL>

termo a ser definido

definição

1. item de uma lista numerada

2. item de uma lista numerada

o item de uma lista

3. item de uma lista numerada

termo a ser definido

definição

 

 

Formatação de textos e caracteres

Há dois tipos de formatação em HTML: lógico e físico. Os efeitos de apresentação na tela são os mesmos: o motivo da distinção entre eles se deve à idéia básica de independência entre especificação e apresentação.

Quando formatamos um trecho de texto como cabeçalho de nível 1, não explicitamos se esse tipo de cabeçalho deve ser em alguma fonte determinada, em um tamanho determinado, justificado à esquerda ou à direita, ou centralizado. Esses detalhes de apresentação são deixados para o browser – o dispositivo de apresentação do documento – que pode ser configurado de acordo com o leitor (usuário final).

Desse modo, além de facilitar enormemente o trabalho de quem escreve os documentos, a linguagem garante a uniformidade de apresentação de cabeçalhos, parágrafos, listas, etc.

A formatação lógica segue o significado lógico do texto marcado: um endereço de e-mail, uma citação etc. Sua apresentação final varia conforme o browser, podendo oferecer resultados mais ricos.

A formatação física especifica explicitamente o estilo que se quer para o texto: itálico, grifado etc. Sua apresentação final não sofre grandes variações.

Blocos de texto

HTML oferece as seguintes formatações de blocos de texto:

<PRE>

Apresenta o texto na mesma maneira em que foi digitado, mantendo quebras de linha e tabulações:

<pre>uma        linha   aqui,

outra ali,

   etc.</pre>

Resulta em:

uma      linha   aqui,

outra ali,

   etc.

Uma vez que <PRE> mantém o texto original, não se deve forçar espaços com essa marcação dentro de outra marcação que já apresente tabulações e espaços específicos.

Veja este exemplo, que apresenta também alguns problemas com o uso de <PRE>.

<BLOCKQUOTE>

É usado para citações longas:

<blockquote>A massa do Sol arqueia o espaço-tempo de tal maneira que, ainda que a Terra siga uma trajetória reta no espaço-tempo quadridimensional, parece-nos que se desloca em órbita circular no espaço tridimensional.</blockquote> (Stephen W. Hawking, “Uma Breve História do Tempo”)

A massa do Sol arqueia o espaço-tempo de tal maneira que, ainda que a Terra siga uma trajetória reta no espaço-tempo quadridimensional, parece-nos que se desloca em órbita circular no espaço tridimensional.

(Stephen W. Hawking, “Uma Breve História do Tempo”)

<ADDRESS>

Usado para formatar endereços E-mail e referências a autores de documentos:

Envie críticas e sugestões para <address>webmaster@icmc.usp.br</address>

Envie críticas e sugestões para

webmaster@icmc.usp.br

Formatação de frases

Como visto anteriormente (em Formatação de Textos e Caracteres), HTML permite dois tipos de formatação: lógico e físico; aqui veremos as formatações mais utilizadas:

Estilos Lógicos

<CITE>

Para títulos de livros, filmes, e citações curtas. Exemplo:

Assisti Guerra nas Estrelas umas oito vezes!

<CODE>

Para indicar trechos de código de programas. Exemplo:

for (x=0); cl &&(!feof(stdin)); x++));

<DFN>

Indica definição de uma palavra, em geral apresenta o texto em itálico. Exemplo:

CERN: Centre d’Éstudes et Recherches Nucleaires

<EM>

Ênfase, também normalmente apresentado em itálico. Exemplo:

É preciso pesquisar muito para encontrar o termo exato.

<KBD>

Indica uma entrada via teclado. Exemplo:

Para ler mensagens recebidas, digite pine -i

<SAMP>

Indica uma seqüência de caracteres, por exemplo uma mensagem de erro ou um resultado. Exemplo:

O resultado do primeiro applet é: Hello, World!

<STRONG>

Forte ênfase, mostrado normalmente em negrito. Exemplo:

Antes de enviar um e-mail, confira o campo “Subject:”!

<VAR>

Indica variáveis, ou valores que o usuário deverá escrever; geralmente mostrado em itálico. Exemplo:

No campo Login, escreva guest.

Estilos Físicos

<B>

Quando disponível no browser, é mostrado em negrito (em alguns browsers, pode aparecer sublinhado)

<I>

Itálico (em alguns casos, caracteres inclinados)

<TT>

Tipo teletype - fonte de espaçamento fixo.

<U>

Sublinhado; deve ser usado com cuidado, pois confunde-se com a apresentação de links.

<STRIKE> ou <S>

Frase riscada.

<BIG>

Fonte um pouco maior.

<SMALL>

Fonte um pouco menor.

<SUB>

Frase em estilo _índice, como em H₂O.

<SUP>

Frase em estilo ^expoente, como em Km².

Caracteres especiais

HTML permite que caracteres especiais sejam representados por seqüências de escape, indicadas por três partes: um & inicial, um número ou cadeia de caracteres correspondente ao caracter desejado, e um ; final.

Quatro caracteres ASCII – <, >, e & têm significados especiais em HTML, e são usados dentro de documentos seguindo a correspondência:

 

 

Entidade	Caracter
<	<
>	>
&	&

Outras sequências de escape suportam caracteres ISO Latin1. Aqui está uma tabela com os caracteres mais utilizados em Português:

Entidade Caracter á á â â à à ã ã ç ç é é ê ê í í ó ó ô ô õ õ ú ú ü ü

Entidade Caracter Á Á Â Â À À Ã Ã Ç Ç É É Ê Ê Í Í Ó Ó Ô Ô Õ Õ Ú Ú Ü Ü

 

 

Como vemos, as sequências de escape são sensíveis à caixa. Os editores de HTML fazem essa tradução automaticamente.

Alguns editores, no entanto, mantêm a acentuação, sem usar as entidades de formatação. Quando isso acontece, deve-se inserir uma indicação do esquema de codificação ISO Latin1, escrevendo:

<HTML>

<HEAD>

<TITLE>...</TITLE>

<META HTTP-EQUIV="Content-Type"

CONTENT="text/html; charset=ISO-8859-1">

</HEAD>

...

Existem alguns símbolos que vêm sendo incorporados ao conjunto de caracteres reconhecidos em HTML. Por exemplo, ©, que é o símbolo ©, ® para ®, e § para §.

Também se pode usar seqüências com códigos ASCII, por exemplo:

¿Qué pasa, señor?

¿Qué pasa, señor?

Cores e fontes

Cores

As cores são introduzidas através do elemento <FONT>, usando o sistema RGB para cores (da mesma forma que vimos para cores de documentos):

<FONT COLOR="#rrggbb">Texto</FONT>

Assim, um trecho de texto pode ter uma cor diferente da definição geral de cores, feita através dos atributos de <BODY>.

Tamanho

A formatação

<FONT SIZE=tamanho_da_letra>Texto</FONT>

permite que o autor do documento altere o tamanho das letras em trechos específicos de texto. O tamanho básico dos textos é 3. Podemos indicar tamanhos relativos a esse, por exemplo:

<FONT SIZE=+2>Letra maior</FONT>
Letra normal
<FONT SIZE=-2>Letra menor</FONT>

Letra maior Letra normal Letra menor

Fontes

Uma evolução que permite a escolha da fonte para os textos, é o atributo FACE:

<FONT FACE="fonte_da_letra">Texto</FONT>

Por exemplo:

<FONT FACE="Verdana" COLOR="#0000AA">Fonte Verdana azul</FONT>
Fonte Verdana azul

<FONT FACE="Arial" COLOR="#00AA00">Fonte Arial verde</FONT>
Fonte Arial verde

<FONT FACE="Courier New" COLOR="#AA0000">Fonte Courier New vermelha</FONT>
Fonte Courier New vermelha

Blink

A formatação <BLINK>frase</BLINK> foi uma das primeiras inovações introduzidas pelo Netscape.

O perigo de se usar o BLINK é que, se sua página já apresenta cores, desenhos, cabeçalhos, todos efeitos que chamam a atenção do leitor, o BLINK será ainda mais um fator chamativo, o que causa um efeito final cansativo e confuso.

Evite usar o BLINK. É possível substituir esse recurso por outros efeitos de JavaScript, como veremos em outra seção.

Felizmente, são poucos os browsers que mostram o efeito dessa formatação. O Internet Explorer é um dos browsers que não consideram o BLINK.

Ao usar o BLINK, aplique-o somente em pequenos detalhes (palavras ou flechinhas), nunca em grande número, muito menos em frases inteiras ou cabeçalhos.

Marquee

É possível obter o efeito de animação de texto, através da formatação <MARQUEE>.

<MARQUEE BEHAVIOR=efeito>Texto</MARQUEE>

Atributos de largura e direção do efeito permitem diversas apresentações diferentes. Por exemplo (o efeito só é executado no Internet Explorer e em versões recentes do Netscape – e de maneiras diferentes):

<MARQUEE BEHAVIOR=SCROLL WIDTH=30%>Texto</MARQUEE>

Texto

<MARQUEE BEHAVIOR=SLIDE DIRECTION=RIGHT>Texto</MARQUEE>

Texto


<MARQUEE BEHAVIOR=SLIDE DIRECTION=LEFT>Texto</MARQUEE>

Texto

Ligações (uso de links)

Com HTML é possível fazermos ligações de uma região de texto (ou imagem) a um outro documento. Nestas páginas, temos visto exemplos dessas ligações: o browser destaca essas regiões e imagens do texto, indicando que são ligações de hipertexto – também chamadas hypertext links ou hiperlinks ou simplesmente links.

Para inserir um link em um documento, utilizamos a etiqueta <A>, da seguinte forma:

<A HREF = "arq_destino">âncora</A>

onde:

arq_destino

é o URL do documento de destino;

âncora

é o texto ou imagem que servirá de ligação hipertexto do documento sendo apresentado para o documento de destino.

Atributos

<A> tem vários atributos, utilizados de acordo com a ação associada ao link. Os mais usados são:

HREF

Indica o arquivo de destino da ligação de hipertexto.

TARGET

Indica o frame em que será carregado o arq_destino. Maiores detalhes na seção sobre frames.

NAME

Marca um indicador, isto é, uma região de um documento como destino de uma ligação.

Inserção de imagens

O elemento IMG insere imagens que são apresentadas junto com os textos. Um atributo SRC deve estar presente, da seguinte forma:

<IMG SRC="URL_imagem">

onde URL_imagem é o URL do arquivo que contém a imagem que se quer inserir; pode ser referenciada uma imagem que esteja em um outro servidor (o que, logicamente, não é conveniente).

Assim, escrevendo:

<IMG src="/icones/newred.gif">

inserimos a figura no documento.

As imagens usadas na Web são armazenadas em arquivos com extensão *.gif, *.xbm, *.jpg (ou *.jpeg), *.png.

Atributos básicos de imagem

ALT

Indica um texto alternativo, descrevendo brevemente a imagem, que é apresentado no lugar da imagem nos browsers texto, ou quando se desabilita o carregamento de imagens em browsers gráficos. É recomendável que esteja sempre presente.

<IMG SRC="URL_imagem" ALT="descrição_da_imagem">

Dessa forma, <IMG src="/icones/newred.gif" ALT="Novo!"> é apresentado nos browsers gráficos assim: e, nos browsers texto, assim: [Novo!]

WIDTH e HEIGHT

Atributos de dimensão da imagem, em pixels. Grande parte dos editores HTML coloca automaticamente os valores destes atributos, quando indicamos a inserção de uma imagem.

<IMG SRC="imagem" ALT="descrição" WIDTH="largura" HEIGHT="altura">

Uma das vantagens de se usar esses atributos é que o browser pode montar mais rapidamente as páginas, por saber de antemão o espaço que deverá ser reservado a elas.