next up previous
Next: Problemas e Dicas Up: FMA 215 Aula 11: Previous: Alguns Conceitos Relevantes

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

  1. 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 html, que é delimitado pelos tags <html> e </html>.

    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.

  2. O environment html é dividido em duas partes básicas, que são os environments head e body. Em geral o environment 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 title que deve aparecer dentro do environment head. Coloque um título em sua página, como no exemplo abaixo.





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

  3. O environment 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.





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

  4. 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 <h1> a <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.





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

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





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

  6. 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 <p>, como no exemplo abaixo.





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

  7. Para colocar uma cor diferente do cinza-padrão no fundo de sua página, basta usar uma opção do tag <body>, definindo a cor do background ou colocando nele uma figura qualquer. Para definir a cor a opção é 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.

  8. 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 <body>:

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

  9. É possível incluir uma figura como parte do texto de sua página. Para fazer isto usa-se o tag <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





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

  10. Além de definir headers, podemos também mudar o tamanho e o tipo da fonte dentro do texto. Os tags <b>, <i> <u> <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 <h1> usa a fonte 6, o tag <h2> a fonte 5 e assim por diante, sempre em negrito (boldface).

    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>
    





  11. Uma das características mais importantes da linguagem é a capacidade de definirmos links de hipertexto. Para fazer isto usa-se o environment a, com a opção 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:

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

  12. 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 ul (unordered list) e 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 <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 <p>. Formate uma lista em sua página, guiando-se pelo exemplo abaixo.





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

  13. 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 blockquote. É este o formato que se usa para fazer citações de trechos de outros textos. Experimente usar este environment, como no exemplo abaixo.





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





  14. 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 table. Além dele, usa-se os tags <td> e <tr> que definem, respectivamente, as entradas de cada coluna (table data) e o final de uma linha (table rule). Há também o tag <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.





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

  15. Um outro environment muito útil é aquele para texto pré-formatado. Ele se chama 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 pre, como se vê no exemplo. Coloque em sua página uma tabela formatada em ASCII, guiando-se pelo exemplo.





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


next up previous
Next: Problemas e Dicas Up: FMA 215 Aula 11: Previous: Alguns Conceitos Relevantes