% JLdL 09Jun02.
%	Copyright (C) 2000-2002 by Jorge L. deLyra.
% Mail: <delyra@latt.if.usp.br>. Web: "http://latt.if.usp.br".
% Este documento pode ser copiado e/ou distribuído livremente.
% Ver os termos e condições nos arquivos do sub-diretório web/.
% This document may be copied and/or distributed freely. See the
% _ terms and conditions in the files in the web/ subdirectory.

\documentclass[12pt]{article}
\usepackage[brazil]{babel}\usepackage[latin1]{inputenc}\usepackage{html}

\newcommand{\linkf}[2]{\htmladdnormallinkfoot{#1}{#2}}
\newcommand{\link}[2]{\htmladdnormallink{#1}{#2}}
\newcommand{\lnk}[1]{\htmladdnormallink{#1}{#1}}

\title{ {\huge\bf FMA 215} \\ Aula 11: Páginas em HTML }

\author{Prof. Jorge L. deLyra}

\date{13 de Junho de 2002}

\begin{document}\maketitle

\section{Alguns Conceitos Relevantes}

 A linguagem HTML (Hyper-Text Markup Language) é uma das linguagem mais
 flexíveis e de utilidade mais universal na Internet. Trata-se, de certa
 forma, de uma novidade conceitual, pois ela é muito mais o que se poderia
 chamar de uma linguagem de comunicação digital do que uma linguagem
 tradicional de programação. Esta linguagem de comunicação é transportada
 na rede por um dos protocolos mais recentes da Internet, o HTTP
 (Hyper-Text Transport Protocol). É através da implementação destes dois
 elementos que surge a teia mundial WWW (World Wide Web). Trata-se aqui de
 um sistema mundial de armazenamento e transporte de informação que pode
 ser encarado como uma enorme base de dados, com uma estrutura muito
 fluída e pouco rígida, que coloca quantidades inimagináveis de informação
 ao alcance de todos. Além disso, este novo aspecto da Internet torna
 possível a qualquer um comunicar-se com praticamente todo o planeta.

 Este sistema leva rapidamente ao que se convencionou chamar de sobrecarga
 de informação (information overload). Há tanta informação disponível que
 passamos a gastar uma parcela cada vez maior de nosso tempo tentando
 achar alguma coisa de útil em meio a esta massa de dados, em geral com
 muito pouco sucesso. É um fato básico da informática que a
 disponibilidade de uma quantidade muito grande de informação sem que
 existam meios rápidos para se procurar, localizar e recuperar a
 informação que se quer para um determinado fim é o mesmo que não ter
 informação nenhuma. Ou é até pior, pois tende a nos deixar muito mais
 estressados. Este problema está sendo abordado no desenvolvimento atual
 da Internet pelos poderosíssimos sistemas de busca que hoje existem em
 operação na rede. Além disso, há um esforço contínuo de se organizar a
 informação e melhorar o acesso a ela. Infelizmente muitos sites da
 Internet ainda enfatizam muito mais a parte estética das suas páginas de
 HTML do que a parte de organização da informação. Apesar de que é
 importante que um site apresente e mantenha uma certa consistência
 estilística, estes sites, por não se preocuparem suficientemente com a
 consistência de apresentação e organização do conteúdo, costumam ser de
 utilidade real muito limitada.

 O HTML é uma ``markup language'', na qual blocos de texto são formatados
 de formas específicas. Estes blocos de texto são definidos através de
 ``tags'' que marcam o seu início e término, delimitando assim a sua
 extensão e posição no texto. Neste aspecto a estrutura geral de um
 documento em HTML não é muito diferente da de um documento em \LaTeX, que
 é outra ``markup language''. Uma diferença muito importante entre as duas
 linguagens é que, enquanto o \LaTeX\ é uma linguagem concebida para
 produzir resultados gráficos de formato preciso e alta qualidade,
 incluindo a formatação de linguagem matemática, exigindo que a fonte seja
 um texto sem nenhum erro de sintaxe, o HTML é uma linguagem concebida
 para ser o mais robusta possível, que tipicamente ignora silenciosamente
 qualquer erro não-fatal de sintaxe no texto da fonte e tem uma
 preocupação bem menor com o formato preciso do documento resultante.
 Outra diferença muito importante é que o HTML é, como diz o nome, um
 sistema de hipertexto, ou seja, é possível definir ``links'' ou atalhos
 dentro dele que levam de imediato a uma certa página de um determinado
 documento em algum lugar na rede. Assim, a WWW não é um sistema linear de
 organização de informação e sim um sistema com um grande número de partes
 onde quaisquer duas partes podem estar relacionadas diretamente por um
 link. Esta coisa toda tem a estrutura de um espaço de dimensão muito
 alta, com um nível muito grande de conectividade entre quaisquer dois
 pontos da estrutura.

 Nas tarefas desta seção vamos trabalhar no sentido de habilitar cada
 aluno(a) a eventualmente compor a sua home page no projeto Sócrates.
 Vamos nos ater aos elementos básicos da linguagem, tentando cobrir de
 forma suficiente os seus principais aspectos e as estruturas mais
 básicas. Serão deixados de lado tópicos mais avançados tais como
 ``frames'', páginas de estilo, a criação de formulários através de
 programas ``cgi-bin'', páginas geradas dinamicamente com ``php'', scripts
 e programas em Java e o acesso a bancos de dados através de páginas de
 WWW e do uso de um browser. Também vamos evitar o uso de ``composers'' de
 HTML, editando as páginas à mão com um editor de texto comum, de forma a
 termos uma chance de entender como funciona a linguagem. Estas tarefas
 devem ser realizadas dentro do sistema de janelas X11. O objetivo do
 exercício é que ao final delas você tenha escrito uma versão rudimentar
 de sua home page no sistema socrates. Se você já escreveu uma home page,
 talvez não precise realmente fazer esta aula em tanto detalhe, mas pelo
 menos dê uma olhada geral. E não apague a sua home page, escreva o
 material em algum outro arquivo, com outro nome, no mesmo diretório.

 O sistema socrates roda um servidor de HTTP, o Apache. Assim, ele pode
 servir páginas a qualquer site da Internet que as solicite. Há um outro
 servidor central no Projeto, o servidor euclides, no qual também roda o
 servidor Apache. Não está implementada nenhuma limitação de acesso para
 os serviços de transporte de HTML. Estão implementados nestes dois
 servidores quatro domínios diferentes de páginas da WWW, com as funções
 descritas a seguir.

\begin{itemize}

 \item Domínio {\bf socrates}, localizado no servidor socrates, para as
 páginas centrais do projeto Sócrates e as páginas individuais dos alunos.

 \item Domínio {\bf proaluno}, localizado no servidor socrates, para as
 páginas da Sala Pró-Aluno do Instituto de Física.

 \item Domínio {\bf euclides}, localizado no servidor euclides, para as
 páginas de apoio aos instrutores associados ao projeto Sócrates.

 \item Domínio {\bf plato}, localizado no servidor euclides, para as
 páginas das disciplinas associadas ao projeto Sócrates.

\end{itemize}

\noindent
 Desta forma, além das páginas centrais do projeto, o servidor Apache do
 socrates está configurado para distribuir home-pages dos usuários do
 sistema. Qualquer material que seja colocado num diretório chamado {\tt
 WWW} na raiz da conta de um usuário é acessível para leitura através do
 servidor a partir de qualquer ponto da Internet. Assim, todo o material
 que for colocado lá deve ser considerado como de {\em acesso público}.
 Para que isto funcione, tanto este diretório quanto a raiz de sua conta
 tem de estar com acesso de leitura permitido para ``other''. Se você
 quiser fechar algum diretório e proteger alguns de seus arquivos contra
 leitura, faça isto dentro de algum outro subdiretório que você crie em
 sua conta.

 Você vai usar o {\tt emacs} (ou seu editor de texto preferido) para
 editar um arquivo ASCII contendo HTML e o browser {\tt mozilla} ou {\tt
 netscape} para olhar o resultado que se vê através do servidor Apache. O
 endereço de sua home page no sistema socrates é

\begin{center}\tt
 http://socrates.if.usp.br/\~{}<username>
\end{center}

\noindent
 Isto é o que se chama de uma URL (Universal Resource Locator), que é o
 sistema de endereçamento da WWW. A sintaxe é a seguinte: o que está antes
 do {\tt :} é o nome de um protocolo da Internet, através do qual o
 recurso endereçado poderá ser alcançado; logo depois da barra dupla há o
 endereço Internet do servidor que abriga o recurso; o que vem depois
 disto é uma instrução sobre a localização do recurso dentro deste
 servidor. Em geral este último é o path completo de um arquivo dentro do
 servidor, contado a partir, não da raiz do sistema do servidor, mas de um
 determinado diretório que é definido como a raiz do servidor HTTP naquela
 máquina. Em nosso servidor este diretório é o diretório {\tt /var/www/}
 do sistema. No caso acima está sendo usada uma sintaxe adicional, pois a
 combinação {\tt\~{}<username>} representa a raiz da parte da conta do
 usuário {\tt <username>} que é visível através do servidor, em nosso caso
 o diretório {\tt WWW} na raiz da conta do usuário. Desta forma, nem todo
 o conteúdo dos discos do servidor é visível através da WWW, escolhemos
 uma parte definida dele para disponibilizar publicamente para leitura.

\section{Tarefas}

 Faça um login em sua conta utilizando o sistema de janelas X11 em uma das
 máquinas da sala Pró-Aluno. Abra uma janela de terminal, ou use a que é
 aberta automaticamente na entrada. Na shell dentro desta janela vá para o
 subdiretório {\tt WWW} de sua conta. Abra também o browser {\tt mozilla}
 ou {\tt netscape} clicando o botão esquerdo do mouse em um botão marcado
 com {\tt WWW} ou {\tt WEB} que exista em seu sistema de janelas, ou rode
 o browser no background executando diretamente o comando {\tt mozilla \&}
 ou o comando {\tt netscape \&} na linha de comando do terminal.

 Uma vez aberto o browser, digite em sua janelinha de endereçamento o
 endereço reservado para a sua home page no sistema socrates,

 {\tt http://socrates.if.usp.br/\~{}<username>},

\noindent
 usando, naturalmente, o seu próprio username. Se você ainda não tem uma
 home page, aparecerá uma mensagem de erro enviada pelo servidor, dizendo
 que a página não foi encontrada. Se você já tem uma home page, use o
 endereço de algum outro arquivo dentro do seu diretório {\tt WWW}, como,
 por exemplo:

 {\tt http://socrates.if.usp.br/\~{}<username>/treino.html}

 Organize as duas janelas em sua tela de forma que você possa ver as duas
 e passar facilmente de uma para a outra. Em sua janela de terminal edite,
 no subdiretório {\tt WWW}, um arquivo chamado {\tt Index.html}. Este é o
 nome padrão que utilizamos para o arquivo-índice ou arquivo básico do
 sistema WWW dentro de um determinado diretório. Uma chamada para uma URL
 que aponte para um diretório, como é o caso do endereço de sua home-page,
 fará com que este arquivo seja aberto pelo servidor e enviado a quem fez
 a chamada. Você está agora pronto(a) para começar a escrever a sua home
 page.

\begin{enumerate}

 \item Assim como o \LaTeX, o HTML funciona em grande parte através da
 definição de environments. O environment mais básico, que deve englobar
 todo o documento, é o environment {\tt html}, que é delimitado pelos tags
 {\tt <html>} e {\tt </html>}.

 No HTML todo tag de início de environment tem esta forma,

 {\tt <nome-do-environment>},

\noindent
 usando explicitamente os símbolos {\tt <} e {\tt >}, enquanto o tag de
 final de environment é quase igual, sendo a única diferença a barra
 colocada antes do nome do environment,

 {\tt </nome-do-environment>}.

\noindent
 O nome do environment pode tanto estar em maiúsculas quanto em
 minúsculas; para facilitar a legibilidade da fonte vamos usar sempre
 minúsculas em nossos exemplos.

 Coloque estes tags em seu documento, em linhas separadas, deixando algum
 espaço entre elas, como mostra o exemplo abaixo.

\input{aula-11-verbatim01.tex}

\noindent
 Escreva o buffer para o arquivo no disco usando (no caso do editor Emacs)
 o comando {\tt \^{}X\^{}S} e, em seguida, clique no botão ``Reload'' do
 browser. Você vai executar este par de operações muitas vezes durante
 estas tarefas. Desta vez, em vez de uma mensagem de erro, deve aparecer
 uma página de HTML em branco, com o fundo cinza padrão. Pronto, você já
 tem uma home page, que ainda está em branco, mas logo vamos consertar
 isto.

 \item O environment {\tt html} é dividido em duas partes básicas, que são
 os environments {\tt head} e {\tt body}. Em geral o environment {\tt
 head} contém apenas o título da página, que é o texto que aparece na
 barra superior da janela do browser. Este título é definido por um
 environment {\tt title} que deve aparecer dentro do environment {\tt
 head}. Coloque um título em sua página, como no exemplo abaixo.

\input{aula-11-verbatim02.tex}

\noindent
 Note como os tags tanto podem ser colocados em linhas diferentes quanto
 na mesma linha. No HTML, assim como no \LaTeX, a formatação da fonte não
 tem muito efeito na formatação da página resultante. A formatação da
 fonte pode e deve ser feita de forma a simplesmente facilitar a sua
 leitura e manutenção com o editor.

 Observe que estamos usando, dentro das páginas de HTML, a sintaxe {\tt <
 seu nome >}, com espaços entre os símbolos {\tt <} e {\tt >} e o texto,
 um pouco diferente do que estivemos usando nas aulas anteriores, para
 indicar um local onde você deve colocar uma informação específica. Desta
 forma, evitamos confusão com a sintaxe do HTML, que usa os mesmos dois
 símbolos, mas na qual nunca há espaços entre os símbolos e o nome do
 environment.

 Escreva a página no disco como fez antes e dê um reload no browser. Sua
 página continua em branco, mas observe como aparece o título na barra
 superior da janela do browser.

 \item O environment {\tt body} contém todo o texto e demais elementos da
 página. Coloque este environment em sua página e escreva algo dentro
 dele, como no exemplo que segue. Observe que o servidor e o browser são
 capazes de lidar com caracteres acentuados diretamente dentro do texto.
 Como você pode inserir estes caracteres com o Emacs, não é necessário
 nenhum esforço especial para colocar texto em Português na sua página.

\input{aula-11-verbatim03.tex}

\noindent
 Salve a sua página e dê um reload no browser. Como você vê, o texto foi
 formatado como um parágrafo logo no início da página. Isto não é
 esteticamente muito satisfatório. Seria bom se pudéssemos controlar o
 tamanho da fonte (ou seja, das letras), a cor do fundo e assim por
 diante. Bem, nós podemos!

 \item Vamos colocar um título mais visível dentro de sua página, além
 daquele que aparece na barra superior da janela do browser. Para fazer
 isto é uma boa idéia mudar também o tamanho da fonte, aumentando o
 tamanho das letras. Uma forma de separar o título do texto ao mesmo tempo
 que se aumenta e enfatiza a fonte, colocando-a em negrito, é usar os tags
 do tipo ``header''. Existem seis tamanhos predeterminados de headers,
 indicados pelos tags {\tt <h1>} a {\tt <h6>}, que definem environments
 dentro dos quais são usados seis tamanhos de fonte definidos de uma forma
 proporcional, não absoluta. Isto significa que se mudarmos o tamanho da
 fonte que é usada no browser, modificando as suas configurações, estes
 seis tamanhos todos mudarão, mantendo a proporcionalidade entre si.
 Coloque um título em seu documento, no maior tamanho de header entre os
 seis, como no exemplo abaixo.

\input{aula-11-verbatim04.tex}

\noindent
 Olhe o resultado no browser. Como se vê, a coisa melhorou mas ainda não
 está muito boa. Decerto que seria melhor ter o título centrado na página.

 \item Para centrar o título na página, basta colocá-lo dentro de um
 environment {\tt center}. Vamos aproveitar também para colocar algumas
 linhas horizontais antes e depois dele, usando o tag {\tt <hr>}
 (horizontal rule), como no exemplo abaixo.

\input{aula-11-verbatim05.tex}

\noindent
 Observe que o tag {\tt <hr>} não tem um tag final. Ele é um exemplo de
 tag que funciona mais como uma declaração no \LaTeX\ do que como um
 environment. Se as suas linhas horizontais não ficam muito bem assim,
 tente usar o tag com as seguintes opções: {\tt <hr size=1 noshade>}.

 \item Para vermos um exemplo de outro tag que não tem o correspondente
 tag final, vamos dividir o nosso texto em dois parágrafos, usando o tag
 {\tt <p>}, como no exemplo abaixo.

\input{aula-11-verbatim06.tex}

\noindent
 Observe que, ao contrário do que acontece no \LaTeX, simplesmente dividir
 o texto em dois blocos que ficam separados por uma linha em branco não
 basta para definir parágrafos, é necessário colocar o tag {\tt <p>}.
 Tente retirar o tag {\tt <p>} e olhar o resultado no browser para ver o
 que acontece. Você não precisa apagar o tag, basta comentá-lo, colocando
 um sinal de exclamação {\tt !} no início dele, que fica assim: {\tt
 <!p>}. Esta é a sintaxe de comentários no HTML, qualquer tag no início do
 qual se coloca o sinal {\tt !} passa a ser ignorado pelo sistema de
 formatação visual do browser. Isto pode ser usado para a inclusão de
 comentários no texto em HTML, como se poderá ver no próximo exemplo.

 \item Para colocar uma cor diferente do cinza-padrão no fundo de sua
 página, basta usar uma opção do tag {\tt <body>}, definindo a cor do
 background ou colocando nele uma figura qualquer. Para definir a cor a
 opção é \verb|bgcolor="< cor >"|, onde a cor pode ser definida por um
 nome ou por um código RGB, que dá, em notação hexadecimal, as componentes
 de vermelho (Red), verde (Green) e azul (Blue) da cor. Coloque um fundo
 amarelo em sua página como no exemplo abaixo.

\input{aula-11-verbatim07.tex}

\noindent
 Observe os comentários no início do arquivo. Os nomes de cor só funcionam
 se estiverem definidos na base de dados de cores de seu sistema X11, que
 em geral está no arquivo

 {\tt /usr/lib/X11/rgb.txt},

\noindent
 vá dar uma olhada nele. Por outro lado, os códigos hexadecimais de cor
 sempre funcionam. Em qualquer caso a placa de vídeo e o monitor precisam
 suportar cor até um nível suficiente. Para podermos compreender como
 funcionam estes códigos de cor, é necessário que digamos duas palavras
 sobre placas de vídeo, monitores e sistemas de cor.

 Em geral os monitores coloridos suportam 8~bits, 16~bits, 24~bits ou
 32~bits de cor, dependendo da capacidade da placa de vídeo e da
 quantidade de memória de vídeo disponível nela. Um sistema de 8 bits de
 cor pode mostrar até 256~cores simultaneamente, o de 16~bits até cerca de
 65.000~cores e os de 24~bits e 32~bits até cerca de 16.000.000~de
 cores. O sistema RGB presume que existam pelo menos 24~bits de cor, ou
 seja, três bytes, cada um dos quais vai codificar a intensidade de uma
 das três cores básicas deste sistema. Entretanto, o sistema também
 funciona em sistemas com menor capacidade de cor, caso em que será usada
 a cor, entre aquelas disponíveis naquele sistema, que mais se aproxima da
 que foi escolhida. As placas de vídeo das máquinas da sala Pró-Aluno
 suportam 24 ou 32~bits de cor na resolução com que os sistemas foram
 configurados (1152 por 864 pixels para os monitores de 15 polegadas, 1280
 por 960 pixels para os monitores de 17 polegadas) e certamente serão
 suficientes para todas as suas necessidades de cor.

 Os códigos de cor RGB consistem de três números, cada um deles entre 0 e
 255, que descrevem as intensidades das três componentes básicas de cor.
 Estes números são escritos como números de dois dígitos em formato
 hexadecimal, ou seja, na base 16. Desta forma, os números que descrevem a
 intensidade de cada uma das três cores básicas variam de {\tt 00} a {\tt
 ff}, que é 255 em base 16. Os três números são concatenados em um único
 número de 6 dígitos, na ordem RGB (vermelho, verde e azul), precedidos de
 um símbolo {\tt \#}, o que indica que se trata de um código hexadecimal
 RGB e não de um nome de cor. Por exemplo, a cor que é usada no background
 das páginas desta disciplina é descrita por {\tt \#e0d4c0},
 correspondendo às componentes {\tt e0} (224) para o vermelho, {\tt d4}
 (212) para o verde e {\tt c0} (192) para o azul, resultando num bege
 claro. Neste sistema {\tt \#000000} (0 para todas as três cores básicas)
 corresponde ao preto e {\tt \#ffffff} (255 para todas) ao branco, de
 forma que números grandes, próximos ao máximo, correspondem a cores
 claras. Para usar a cor das páginas da disciplina, troque a opção de cor
 em sua página para \verb|bgcolor="#e0d4c0"|. Salve o seu arquivo e veja o
 que acontece no browser.

 \item Outra alternativa consiste de colocar no background uma imagem
 qualquer. Em geral é conveniente usar uma imagem de pequenas dimensões,
 que será usada automaticamente pelo browser para encher o fundo,
 repetindo-a muitas vezes, num processo denominado ``tiling''
 (azulejamento). Desta forma, apenas uma imagem de pequenas dimensões
 precisa ser transportada pela rede. O transporte de imagens é uma das
 cargas mais pesadas para o transporte pela rede e o uso de imagens
 grandes e complexas em sua página fará com que o seu carregamento pelo
 browser seja muito lento, em especial por browsers que não estejam muito
 bem conectados à rede, como é típico dos sistemas residenciais. Para
 experimentar com a inclusão de imagens no background, tente a seguinte
 opção do tag {\tt <body>}:

 \verb|<body background="/images/chalk.gif">|

\noindent
 Esta opção vai acessar uma imagem em formato GIF no subdiretório {\tt
 images} da raiz do servidor HTTP, ou seja, no diretório

 {\tt /var/www/images/}

\noindent
 do sistema do socrates. Você também pode usar suas próprias imagens,
 colocando-as dentro do diretório {\tt WWW} de sua conta. Por exemplo,
 você pode criar um diretório {\tt \~{}/WWW/images/}, colocar uma cópia do
 arquivo {\tt chalk.gif} lá dentro e usar em sua página a linha

 \verb|<body background="/~< username >/images/chalk.gif">|

\noindent
 Desta forma, você mesmo poderá definir e armazenar todos os elementos
 gráficos que decidir usar em suas páginas. Tente todas estas opções em
 sua página. De agora em diante, para poupar espaço nesta apostila, não
 vamos mais mostrar a página de HTML completa nos exemplos. Todas as
 estruturas de que vamos falar devem ser incluídas dentro do environment
 {\tt body} da sua página. Em cada caso, você deve fazer as modificações
 no buffer, salvá-las para o arquivo no disco e dar um reload no browser.

 \item É possível incluir uma figura como parte do texto de sua página.
 Para fazer isto usa-se o tag {\tt <img>}, que não tem tag de término. Um
 argumento do tag indica qual é o arquivo contendo a figura. Coloque em
 sua página, em um parágrafo isolado do restante do texto, a estrutura

\input{aula-11-verbatim08.tex}

\noindent
 Observe o alinhamento da figura com o texto. Em seguida, tente usar o
 mesmo tag com uma opção que muda este alinhamento:

 \verb|<img align=top src="/images/chalk.gif">|

\noindent
 ou

 \verb|<img align=center src="/images/chalk.gif">|

\noindent
 Para ver como podemos obter efeitos mais dramáticos com a inclusão de
 figuras, tente usar algumas das figuras que estão no diretório

 {\tt /var/www/images/}

\noindent
 do servidor como, por exemplo, as da lista abaixo.

\input{aula-11-verbatim09.tex}

\noindent
 Tente usar algumas destas imagens como backgrounds de sua página.

 \item Além de definir headers, podemos também mudar o tamanho e o tipo da
 fonte dentro do texto. Os tags {\tt <b>}, {\tt <i>} {\tt <u>} {\tt <tt>}
 mudam o tipo, respectivamente, para negrito (boldface), itálico,
 sublinhado (underline) e caracteres de máquina de escrever (teletype) ou
 de tipo fixo. Existem sete tamanhos de fonte, sendo a de número 1 a menor
 e a de número 7 a maior. Note que a ordem é inversa à ordem dos tags de
 header. De fato, o tag {\tt <h1>} usa a fonte 6, o tag {\tt <h2>} a fonte
 5 e assim por diante, sempre em negrito (boldface).

 O environment que define a fonte chama-se {\tt <font>}, que pode conter
 as opções \verb|size="< número de 1 a 7 >"| e \verb|color="< cor >"|, que
 definem o tamanho e a cor das letras. A cor pode ser definida das mesmas
 duas formas que para o fundo, por nomes ou por códigos hexadecimais RGB
 de cor. Observe que os tags que definem o tipo das letras podem ser
 combinados. Para obter um tipo itálico em negrito, por exemplo, basta
 usar simultaneamente os tags {\tt <b>} e {\tt <i>}. Experimente todos
 estes tipos de letras, combinando-os com os diversos tamanhos, como nos
 exemplos abaixo.

\input{aula-11-verbatim10.tex}

 \item Uma das características mais importantes da linguagem é a
 capacidade de definirmos links de hipertexto. Para fazer isto usa-se o
 environment {\tt a}, com a opção {\tt href} cujo argumento é o endereço
 (URL) da página para a qual se está apontando o link. Como pode ser usado
 qualquer endereço da WWW, é possível desta forma fazer com que o browser
 passe para qualquer página em qualquer servidor que esteja disponível em
 toda a Internet. A sintaxe do link é a seguinte:

 \verb|<a href="http://< servidor >/< path >">texto do link</a>|

\noindent
 O texto do link aparecerá sublinhado e em uma cor diferente no browser e,
 quando se clicar sobre ele, a página que está sendo mostrada na janela do
 browser será trocada pela página para a qual aponta o link. Como o
 browser guarda na memória a sequência de páginas, conforme se passa de
 uma para outra, é possível retornar a páginas anteriores usando o botão
 ``Back'' do browser. Faça um link em sua página apontando, por exemplo,
 para a home page desta disciplina, como aparece no exemplo abaixo.

\input{aula-11-verbatim11.tex}

 A possibilidade de se fazer este tipo de link de hipertexto é um fator
 determinante no estilo de escrita do HTML, que tende a ser o de se compor
 um número grande de páginas, em geral relativamente curtas, linkadas umas
 às outras desta forma. O conjunto das apostilas desta disciplina, em sua
 versão em HTML que está colocada nas páginas, segue este tipo de estilo.

 \item Uma tipo de estrutura muito útil é a da formatação de listas, que
 podem ser numeradas ou não. Os environments correspondentes são chamados
 de {\tt ul} (unordered list) e {\tt ol} (ordered list). Estes são tags
 que definem environments e portanto requerem um tag final correspondente.
 O tag que define um elemento de uma lista é o {\tt <li>} (list item). O
 conteúdo de cada ítem pode consistir de várias linhas, formando um
 parágrafo. Você pode controlar o espaço deixado entre os ítens com o tag
 de parágrafos {\tt <p>}. Formate uma lista em sua página, guiando-se pelo
 exemplo abaixo.

\input{aula-11-verbatim12.tex}

\noindent
 Repita o exemplo comentando os tags de parágrafo para ver o que acontece.
 Em seguida, troque o environment {\tt ul} por um environment {\tt ol} e
 veja, mais uma vez, o que acontece.

 \item Uma forma conveniente de formatar um bloco de texto como um
 pará\-grafo em evidência através de indentação, é o uso do environment
 {\tt blockquote}. É este o formato que se usa para fazer citações de
 trechos de outros textos. Experimente usar este environment, como no
 exemplo abaixo.

\input{aula-11-verbatim13.tex}

 \item Uma das estruturas mais úteis é a de tabelas, tanto para a
 construção de tabelas propriamente ditas quanto como uma ferramenta de
 organização e colocação de elementos gráficos e de navegação na página. O
 environment para tabelas chama-se {\tt table}. Além dele, usa-se os tags
 {\tt <td>} e {\tt <tr>} que definem, respectivamente, as entradas de cada
 coluna (table data) e o final de uma linha (table rule). Há também o tag
 {\tt <th>} (table header) que define o elemento usado como título de uma
 coluna. Existem várias opções que permitem controlar a aparência da
 tabela, definindo a cor de fundo, a existência ou não de linhas entre as
 colunas e entre as linhas, o alinhamento dos ítens e assim por
 diante. Vamos nos ater aqui apenas aos elementos mais básicos. Coloque em
 sua página uma tabela como a do exemplo que segue.

\input{aula-11-verbatim14.tex}

\noindent
 Observe como os elementos dos títulos são formatados em negrito. Tanto
 dentro do environment {\tt <caption>} quanto dentro de cada elemento da
 tabela, podemos colocar outros elementos da linguagem HTML, incluindo
 figuras. Por exemplo, tente mudar a fonte dentro de um dos elementos,
 usando algo como \verb|<font size="5" color="blue">|.

 \item Um outro environment muito útil é aquele para texto pré-formatado.
 Ele se chama {\tt pre} e dentro dele tudo é mostrado como está na
 formatação ASCII da fonte, com espaços, linhas em branco, etc. Ele é
 muito útil para se colocar na WWW algo que já temos em formato ASCII e
 que no momento não temos tempo de formatar cuidadosamente em HTML. Por
 exemplo, podemos fazer uma versão tosca mas legível da tabela acima
 usando o environment {\tt pre}, como se vê no exemplo. Coloque em sua
 página uma tabela formatada em ASCII, guiando-se pelo exemplo.

\input{aula-11-verbatim15.tex}

\noindent
 Observe que algumas estruturas, as que contém os caracteres {\tt <} e
 {\tt >} imediatamente seguidos e precedidos de texto, respectivamente,
 ainda são interpretadas, de forma que não devem ser usadas dentro deste
 environment. Tente fazer isto para ver o que acontece, depois repita o
 estrutura deixando espaços entre os caracteres {\tt <} e {\tt >} e o
 texto.

\end{enumerate}

\section{Problemas e Dicas}

\begin{enumerate}

 \item Escreva uma página para experimentar todas as combinações possíveis
 de tipos, tamanhos e cores de letra. Observe que é possível combinar os
 tags {\tt <b>} e {\tt <u>} com os tags {\tt <i>} e {\tt <tt>} para obter
 novos tipos de letras. Linke esta nova página a partir de sua home page.

 \item Existe mais um tipo de lista, chamada de ``description list'', que
 usa os tags {\tt <dl>}, {\tt <dt>} e {\tt <dd>}. O environment é chamado
 {\tt dl}, os tags {\tt <dt>} (description titles) devem ter argumentos
 curtos e os tags {\tt <dd>} que os seguem podem ter argumentos longos,
 tais como parágrafos. Construa uma description list usando estes
 elementos.

 \item Construa uma tabela usando todas as possíveis propriedades delas,
 tais como fontes, cores de letras e cores de fundo dos elementos,
 alinhamentos de variados tipos, com linhas desenhadas entre colunas e
 entre linhas da tabela, links e imagens dentro dos elementos, etc.

\end{enumerate}

\section{Uma Lista de Comandos Relevantes}

 Apresentamos abaixo uma lista dos comandos de HTML usados nesta apostila,
 com algumas das suas possíveis opções. A lista não pretende ser completa.
 Nesta lista ``{\tt ...}'' representa o texto que está sendo formatado ou
 o argumento de uma opção.

\begin{description}\setlength{\itemsep}{0ex}

 \item[\tt <a href="..."\latexhtml{\ }{ }...>...</a>]: define um
 hiperlink.

 \item[\tt <b>...</b>]: coloca o texto em negrito (boldface).

 \item[\tt <blockquote>...</blockquote>]: environment para uma cotação.

 \item[\tt <body>...</body>]: environment para o corpo da página.

 \item[\tt <caption>...</caption>]: define o título de uma tabela.

 \item[\tt <center>...</center>]: centra o texto na página.

 \item[\tt <dd>]: define o dado de uma entrada numa {\tt dl}.

 \item[\tt <dl>...</dl>]: environment para uma lista de descrições.

 \item[\tt <dt>]: define o título de uma entrada numa {\tt dl}.

 \item[\tt <font size="..."\latexhtml{\ }{ }color="..."\latexhtml{\ }{
 }...>...</font>]: coloca o texto na fonte especificada.

 \item[\tt <h1>...</h1>]: coloca o texto em evidência, em primeiro nível,
 que é o que usa a maior fonte.

 \item[\tt <h6>...</h6>]: coloca o texto em evidência, em sexto e último
 nível. Existem ao todo 6 níveis de texto em evidência.

 \item[\tt <head>...</head>]: environment para o cabeçalho da página. Não
 produz texto visível dentro da página.

 \item[\tt <hr>]: produz uma linha horizontal na página.

 \item[\tt <html>...</html>]: environment geral para todo o texto em HTML.

 \item[\tt <i>...</i>]: coloca o texto em itálico.

 \item[\tt <img src="..."\latexhtml{\ }{ }...>]: inclui uma imagem na
 página.

 \item[\tt <li>]: define um ítem de uma lista.

 \item[\tt <ol>...</ol>]: environment para uma lista numerada.

 \item[\tt <p>]: termina um parágrafo, deixando um espaço.

 \item[\tt <pre>...</pre>]: environment para texto pré-formatado em ASCII.

 \item[\tt <table>...</table>]: environment para tabelas.

 \item[\tt <td>]: define um elemento de uma tabela.

 \item[\tt <th>]: define um título de uma coluna em uma tabela.

 \item[\tt <title>...</title>]: define o título que aparece na barra
 superior da janela do browser.

 \item[\tt <tr>]: termina uma linha de elementos de uma tabela.

 \item[\tt <tt>...</tt>]: coloca o texto em uma fonte de largura fixa
 (teletype).

 \item[\tt <u>...</u>]: sublinha o texto (underline).

 \item[\tt <ul>..</ul>]: environment para uma lista não-numerada.

\end{description}

\section{Arquivos de Configuração}

 Os únicos arquivos de configuração relevantes para esta aula são os do
 seu browser. Eles estão dentro de diretórios {\tt .mozilla/} ou {\tt
 .netscape/} na raiz da sua conta, conforme for o caso. Entretanto, em
 geral não se edita estes arquivos diretamente. Você pode ajustar as
 configurações do seu browser usando o próprio browser, clicando primeiro
 no botão {\tt Edit} e depois no ítem {\tt Preferences} dentro do menu que
 aparece. Será aberta uma janela que permitirá que você mude cada uma das
 configurações disponíveis.

\end{document}

###

