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 WWW de sua conta. Abra também o browser mozilla ou netscape clicando o botão esquerdo do mouse em um botão marcado com WWW ou WEB que exista em seu sistema de janelas, ou rode o browser no background executando diretamente o comando mozilla & ou o comando 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,
http://socrates.if.usp.br/~<username>,
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 WWW, como, por exemplo:
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 WWW, um arquivo chamado 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.
No HTML todo tag de início de environment tem esta forma,
<nome-do-environment>,
usando explicitamente os símbolos < e >, enquanto o tag de final de environment é quase igual, sendo a única diferença a barra colocada antes do nome do environment,
</nome-do-environment>.
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.
<html> </html>
Escreva o buffer para o arquivo no disco usando (no caso do editor Emacs) o comando ^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.
<html> <head> <title>Home Page de < seu nome ></title> </head> </html>
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 < seu nome >, com espaços entre os símbolos < e > 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.
<html> <head> <title>Home Page de < seu nome ></title> </head> <body> Esta é a home page de < seu nome >. Eu sou um(a) aluno(a) do Instituto de Física da Universidade de São Paulo e participo do projeto Sócrates. Estou aprendendo a usar o sistema operacional Linux e a rede Internet na disciplina FMA215 e estou me divertindo à beça! Eu ainda estou aprendendo a escrever esta página de forma que tenha paciência comigo se ela ainda não está muito bonita. </body> </html>
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!
<html> <head> <title>Home Page de < seu nome ></title> </head> <body> <h1>Home Page de < seu nome ></h1> Esta é a home page de < seu nome >. Eu sou um(a) aluno(a) do Instituto de Física da Universidade de São Paulo e participo do projeto Sócrates. </body> </html>
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.
<html> <head> <title>Home Page de < seu nome ></title> </head> <body> <hr> <center><h1>Home Page de < seu nome ></h1></center> <hr> Esta é a home page de < seu nome >. Eu sou um(a) aluno(a) do Instituto de Física da Universidade de São Paulo e participo do projeto Sócrates. </body> </html>
Observe que o tag <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: <hr size=1 noshade>.
<html> <head> <title>Home Page de < seu nome ></title> </head> <body> <hr> <center><h1>Home Page de < seu nome ></h1></center> <hr> Esta é a home page de < seu nome >. Eu sou um(a) aluno(a) do Instituto de Física da Universidade de São Paulo e participo do projeto Sócrates. <p> Estou aprendendo a usar o sistema operacional Linux e a rede Internet na disciplina FMA215 e estou me divertindo à beça! Eu ainda estou aprendendo a escrever esta página de forma que tenha paciência comigo se ela ainda não está muito bonita. </body> </html>
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 <p>. Tente retirar o tag <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 ! no início dele, que fica assim: <!p>. Esta é a sintaxe de comentários no HTML, qualquer tag no início do qual se coloca o sinal ! 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.
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.
<! JLdL 25Jun00.> <html> <! Os comentários podem aparecer em qualquer lugar.> <head> <title>Home Page de < seu nome ></title> </head> <body bgcolor="yellow"> <hr> <center><h1>Home Page de < seu nome ></h1></center> <hr> Esta é a home page de < seu nome >. Eu sou um(a) aluno(a) do Instituto de Física da Universidade de São Paulo e participo do projeto Sócrates. </body> </html>
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
/usr/lib/X11/rgb.txt,
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 00 a 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 #, 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 #e0d4c0,
correspondendo às componentes e0 (224) para o vermelho, d4
(212) para o verde e c0 (192) para o azul, resultando num bege
claro. Neste sistema #000000 (0 para todas as três cores básicas)
corresponde ao preto e #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 bgcolor="#e0d4c0"
. Salve o seu arquivo e veja o
que acontece no browser.
<body background="/images/chalk.gif">
Esta opção vai acessar uma imagem em formato GIF no subdiretório images da raiz do servidor HTTP, ou seja, no diretório
/var/www/images/
do sistema do socrates. Você também pode usar suas próprias imagens, colocando-as dentro do diretório WWW de sua conta. Por exemplo, você pode criar um diretório ~/WWW/images/, colocar uma cópia do arquivo chalk.gif lá dentro e usar em sua página a linha
<body background="/~< username >/images/chalk.gif">
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 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.
<p> Esta é a imagem que estivemos usando como fundo: <img src="/images/chalk.gif"> <p>
Observe o alinhamento da figura com o texto. Em seguida, tente usar o mesmo tag com uma opção que muda este alinhamento:
<img align=top src="/images/chalk.gif">
ou
<img align=center src="/images/chalk.gif">
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
/var/www/images/
do servidor como, por exemplo, as da lista abaixo.
bark01.gif frctlwod.gif paper01.gif plate01.gif rock08.gif rosettes.gif stone02.gif skin02.gif sky.gif
Tente usar algumas destas imagens como backgrounds de sua página.
O environment que define a fonte chama-se <font>, que pode conter
as opções size="< número de 1 a 7 >"
e 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 <b> e <i>. Experimente todos
estes tipos de letras, combinando-os com os diversos tamanhos, como nos
exemplos abaixo.
<font size="6" color="blue"> Tamanho 6 em azul, já é grande. </font> <font size="4" color="red"> Tamanho 4 em <b>negrito</b>, <i>itálico</i>, <u>sublinhado</u> e <tt>tipo fixo</tt>, em vermelho. </font> <font size="2"> Tamanho 2 em <b>negrito</b>, <i>itálico</i>, <u>sublinhado</u>, <tt>tipo fixo</tt>, <b><i>itálico negrito</i></b>, <u><i>itálico sublinhado</i></u> e <u><b>negrito sublinhado</b></u>, já é bem pequeno. </font>
<a href="http://< servidor >/< path >">texto do link</a>
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.
<p> Se você clicar sobre a sigla com o botão esquerdo do mouse, será levado para a home page da disciplina <a href="http://latt.if.usp.br/fma215/">fma215</a>. Para voltar para cá, depois de fazer isto, clique uma única vez no botão "Back" que existe em seu browser. <p>
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.
<p> <ul> <li> Este é o primeiro item. <p> <li> Este é o segundo item. <p> <li> Este é um item bem longo, para ilustrar o que acontece quando você tem um item longo como este. Naturalmente, por pura falta de assunto não vai dar para manter o suspense, vou acabar tendo de dizer que o que acontece é que o texto é formatado como um parágrafo, com uma indentação. <p> <li> Este é o quarto item. </ul> <p>
Repita o exemplo comentando os tags de parágrafo para ver o que acontece. Em seguida, troque o environment ul por um environment ol e veja, mais uma vez, o que acontece.
<p> Esta é uma citação de um pequeno texto atribuído a um famoso e importante cientista do século 20: <blockquote> The strength of the Constitution lies entirely in the determination of each citizen to defend it. Only if every single citizen feels duty bound to do his share in this defense are the constitutional rights secure. -- Albert Einstein. </blockquote> <p>
<p> Esta é uma tabela muito simples, centrada na página. Para facilidade de compreensão do funcionamento dos diversos elementos mostrados, as colunas estão numeradas de A a C e as linhas de 1 a 4. <center> <table> <caption>Aqui vai o título ("caption") da tabela</caption> <th> Título A <th> Título B <th> Título C <tr> <td> Elemento 1A <td> Elemento 1B <td> Elemento 1C <tr> <td> Elemento 2A <td> Elemento 2B <td> Elemento 2C <tr> <td> Elemento 3A <td> Elemento 3B <td> Elemento 3C <tr> <td> Elemento 4A <td> Elemento 4B <td> Elemento 4C <tr> </table> </center> <p>
Observe como os elementos dos títulos são formatados em negrito. Tanto
dentro do environment <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 <font size="5" color="blue">
.
<p> Esta é uma tabela muito simples, formatada em ASCII de forma tosca e rápida. <pre> Aqui vai o título ("caption") da tabela Título A Título B Título C Elemento 1A Elemento 1B Elemento 1C Elemento 2A Elemento 2B Elemento 2C Elemento 3A Elemento 3B Elemento 3C Elemento 4A Elemento 4B Elemento 4C </pre> <p>
Observe que algumas estruturas, as que contém os caracteres < e > 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 < e > e o texto.