Compreendendo os Fundamentos da Internet

Você provavelmente já deve ter escutado muita coisa sobre Internet, WWW, Web, ciberespaço, hipertexto/hipermídia, etc. Estes novos termos estão ganhando uma força cada vez maior em nosso vocabulário e já fazem parte, direta ou indiretamente, de nosso cotidiano. Logicamente, não é necessário que você domine todas estas terminologias e tecnologias para poder utilizar os benefícios que elas proporcionam. Nosso dia a dia nos comprova isto. Nós não dominamos as tecnologias do videocassete ou da televisão, embora façamos bom uso delas. No campo da Informática não é diferente, ou seja, a tendência também é a de produzir programas de computador com qualidade e de fácil utilização.

A Internet é uma rede mundial de redes de computadores. Podemos dizer que a Internet é a união dos computadores com as telecomunicações. Podemos dizer, também, que esta união tem causado grandes mudanças de comportamento econômico, social, e político em todo o mundo.

A grande característica da Internet é proporcionar às pessoas a oportunidade de obter informações. Informações de qualquer natureza e localizadas em qualquer lugar. Sua arquitetura "aberta" é simples e baseada principalmente no compartilhamento de informações. Qualquer pessoa utilizando qualquer modelo de computador pode conectar-se à Internet. Atualmente atinge cerca de 50 milhões de usuários em todo o mundo. O crescimento da Internet no Brasil também é significativo. Dados recentes indicam que existem cerca de 50.000 computadores ligados à Internet no Brasil, e que este número tem crescido a uma taxa de 5.000 computadores por mês.

Assim, é esta popularidade da Internet que tem exigido a necessidade de compreendermos como ela funciona e como poderemos utilizá-la. Neste curso vamos ver como desenvolver nossas "páginas" com a linguagem HTML para que possamos também contribuir de alguma maneira com esta rede mundial de informações.

Basicamente as aplicações na Internet são utilizadas para :

• Copiar arquivos
• Enviar e receber mensagens eletrônicas
• Compartilhar informações
• Pesquisar por documentos e informações em geral

As seguintes aplicações darão a você uma idéia de como as pessoas estão utilizando a Internet. Estas são algumas das principais aplicações Internet que têm auxiliado no crescimento desta rede global. Se você compreender o que estas aplicações fazem, você começará a compreender como a Internet funciona.

"File Transfer Protocol", mais conhecido como FTP, foi desenvolvido para copiar arquivos de um sistema para outro. É o aplicativo Internet tradicional para receber ou carregar arquivos disponíveis na rede para o seu computador. Você pode também enviar ou transmitir arquivos de seu computador para outros computadores da rede. Portanto, a idéia básica por trás deste protocolo é a sua capacidade de enviar e receber arquivos, em formato texto ou binário, entre dois computadores da rede.

Apesar de parecer um processo simples, isto não era fácil há alguns anos atrás, quando os dois computadores envolvidos neste processo eram sistemas completamente diferentes.

Este talvez seja o principal serviço da Internet. Uma vez que computadores em todo o mundo estão interligados via rede Internet, os usuários destes sistemas podem se comunicar utilizando SMTP. Com um sistema de mensagens eletrônicas deste tipo, você pode enviar mensagens para qualquer parte do mundo pelo custo de sua conexão local com a Internet. Assim como o FTP, o SMTP foi projetado para ser fácil de utilizar e fácil de programar. Apresenta um conjunto pequeno de comandos, mas de grande utilidade para seus usuários. Vários outros serviços Internet têm sido baseados neste protocolo SMTP.

Um "list server" é um sistema baseado em SMTP que permite aos usuários subscrever em tópicos sobre os quais outros usuários enviam mensagens eletrônicas. Quando um usuário envia uma mensagem sobre um determinado assunto, o "list server" remete a mensagem para todos os usuários que estejam subscritos naquele assunto.

A Usenet é um tipo de organização de grupos de discussão na qual artigos individuais são distribuídos pelo mundo todo. A Usenet tem milhares de grupos de discussões sobre os mais variados assuntos. Em cada instalação Internet, o administrador do sistema pode decidir se deve ou não organizar um determinado grupo de discussão. Assim, a Usenet é um outro tipo de conversação baseada em mensagens.

O Gopher teve um papel importante para o avanço da popularidade da Internet. Este protocolo foi estabelecido pela Universidade de Minnesota como uma maneira fácil de pesquisar por informações "on-line". Os sistemas do tipo Gopher oferecem uma interface com o usuário baseada em menus, a partir dos quais você pode acessar qualquer tipo de informação na forma de texto. Assim, este protocolo permite a um cliente acessar um servidor que contenha informações de uma maneira hierárquica similar a uma árvore de diretório com seus subdiretórios.

Como um serviço público, muitos sistemas Internet são organizados para permitir a qualquer pessoa logar usando uma conta do tipo convidado (guest). Uma das características fascinantes da Internet é justamente poder utilizar um computador do outro lado do mundo como se este estivesse localizado num outro canto da nossa sala. O programa Telnet é utilizado para que você possa fazer uma conexão remota. Assim, basta digitar "telnet" e nome do endereço remoto, como por exemplo: "telnet books.com". Quando o Telnet estabelecer a conexão, você poderá interagir com o computador remoto.

A tecnologia da World-Wide Web pode ser vista como o produto de contínuas pesquisas por novas maneiras de compartilhar recursos através da rede Internet. A idéia foi inicialmente concebida em 1989 por Berners-Lee do então CERN (Conseil Europeen pour la Recherche Nucleaire, atualmente denominado "European Laboratory for Particle Physics"), como um método para agilizar a transferência de informações entre a comunidade científica internacional.

A WWW consiste de computadores (servidores), espalhados pelo mundo, os quais armazenam informações tanto no modo texto quanto no formato multimídia. São milhares de servidores ativos (cada um contendo um endereço Internet) permitindo aos usuários localizarem facilmente as informações desejadas.

O objetivo principal deste serviço é proporcionar uma interface gráfica com o usuário, de forma simples e consistente o suficiente para manter uma compatibilidade com os inúmeros recursos proporcionados pela Internet. A principal característica do WWW é o seu potencial para a criação de ligações entre texto e outros meios, não só dentro de um documento individual mas também entre documentos armazenados em qualquer computador que tenha acesso à rede Internet. O projeto é baseado no princípio do "leitor universal", ou seja, "se a informação está disponível, então qualquer pessoa (autorizada, é claro) deve ser capaz de acessá-la de qualquer parte do mundo".

A popularização do World Wide Web deve-se, em grande parte, à utilização inicial de um "browser" de domínio público chamado Mosaic. O Mosaic é mantido e distribuído pelo NCSA (National Center for Supercomputing Applications) da Universidade de Illinois. Enquanto o Gopher permite que uma linha de texto de informação sirva como um "link" para outro documento ou outro "site", o WWW permite que uma página seja mostrada com múltiplas fontes, gráficos, e "links" para animações, filmes e sons. Estes "links" podem dar acesso a outras páginas de informações com as mesmas características.

Assim, o ambiente WWW utiliza a tecnologia de hipertexto para proporcionar, em uma única interface gráfica com o usuário, o acesso a diferentes classes de informações armazenadas como relatórios, notas, documentações, sistemas de ajuda "on-line", e outras bases de informações.

Agora que já compreendemos alguns conceitos sobre a rede Internet, não seria perda de tempo conhecermos um pouco sobre o seu sistema de endereçamento.

As aplicações Internet comunicam-se sobre a rede utilizando o protocolo TCP/IP (Transmition Control Protocol / Internet Protocol). Este protocolo e seu mecanismo de endereçamento permitem que suas aplicações conectem e troquem informações com outros sistemas.

O protocolo TCP/IP deixa os computadores "compreenderem" para onde as mensagens devem ser enviadas. Um protocolo de rede tal como o TCP/IP é freqüentemente comparado ao serviço dos correios. Quando você envia uma carta a um amigo distante, por exemplo. Depois de escrever a carta, você coloca num envelope, escreve o nome e o endereço do lado de fora da carta. O endereço diz ao serviço postal onde entregar a sua carta. Então sua carta é colocada numa caixa de correio local e posteriormente transportada para seu amigo utilizando uma seqüência de ações padronizadas pelo serviço local.

Com o protocolo TCP/IP, cada rede e "host" tem um determinado e específico endereço. Este endereço é composto de quatro (4) conjuntos de oito bits cada um. Estes conjuntos são expressos como quatro números separados por pontos. Por exemplo,

Para tornar o endereçamento TCP/IP fácil de ser utilizado, uma convenção de nomes - denominado Domain Name Servers (DNS) - foi criada. Um Domain é um grupo de hosts que tem nomes de hosts associados a eles. Para acessar um servidor, pode-se através do endereço TCP/IP ou pelo seu nome DNS. Obviamente é muito mais fácil lembrar do nome dos hosts do que dos endereços numéricos. O endereçamento DNS sempre termina com um "top-level domain", Por exemplo,

A Internet pode ser vista como um grande repositório de informações. São milhares de computadores interligados proporcionando inúmeras fontes de conhecimento. Assim, a grande questão para todo iniciante na Intenet é : "Por onde devo começar minha pesquisa ?" Bem, atualmente o ponto inicial é o WWW ou somente Web como tem sido chamado.

A WWW funciona de acordo com o modelo "cliente-servidor". Um servidor Web é um programa cujo objetivo é disponibilizar documentos para que os clientes possam acessá-los. Um cliente Web é um programa que faz a interface com o usuário, intermediando pedidos de documentos a um determinado servidor. Portanto, o processo pode ser resumido da seguinte maneira :

1. Através de um cliente Web - ou browser - o usuário seleciona um documento para visualização;
2. O cliente Web conecta-se a um computador especificado por um endereço Internet, e solicita ao servidor Web pelo documento solicitado pelo usuário;
3. O servidor responde enviando o documento (contendo textos, figuras, sons, etc...) para o cliente.

A linguagem que estes clientes e servidores Web "entendem" para comunicar é denominada HTTP (HyperText Transfer Protocol) e será vista com detalhes adiante. Portanto, podemos dizer que todos os clientes Web precisam "falar" HTTP para que esta comunicação seja realizada.

Assim como o Gopher, o WWW é um protocolo que permite que as informações sejam enviadas de um servidor para um cliente. A grande diferença como vimos, é que a Web permite que "páginas multimídia" sejam enviadas ao cliente. Enquanto o protocolo Gopher utiliza o conceito de árvore para pesquisar a estrutura de informações, o WWW utiliza o conceito de uma "rede" de documentos interconectados. Ou seja, a WWW não tem um ponto inicial e final. As páginas Web, que são mostradas através dos "browsers", são transferidas de um servidor Web para o sistema local, para então serem interpretadas e mostradas adequadamente na tela do computador do usuário. Portanto, qualquer pessoa com um servidor Web pode "contribuir" para as informações contidas no WWW. Empresas provedoras de serviços na Internet permitem que seus associados publiquem suas páginas Web através de seus servidores.

Uma das principais tecnologias que proporciona o embasamento teórico ao funcionamento do ambiente WWW é o hipertexto. Por isso, a próxima sessão analisa esta tecnologia com maiores detalhes para que possamos compreender adiante outros dois conceitos envolvidos neste ambiente WWW que são os protocolos HTTP (HyperText Transfer Protocol) e, é claro, o nosso objetivo que é a linguagem HTML (HyperText Markup Language).

Em 1945, Vannevar Bush em seu artigo intitulado As We May Think [1], imaginou uma máquina para o armazenamento e a manipulação de informações que ele casualmente denominou "Memex". Este artigo é freqüentemente citado como o precursor de grandes desenvolvimentos nas áreas de computação, recuperação de informação, e hipertexto.

O sistema Memex foi idealizado como uma ferramenta de acesso à grandes quantidades de informações armazenadas em microfilmes. Este sistema propunha uma máquina que utilizasse microfilme e fotocélulas para armazenar dados, capacitando o usuário a formar trilhas de informações, ou sejam, ligações à textos e ilustrações correlacionados. Foi o primeiro sistema a descrever o uso de máquinas para armazenar conexões entre trechos de informações. Já nesta época Bush argumentava sobre a necessidade de um mecanismo para auxiliar as pessoas a tratar com a crescente quantidade de informações disponíveis no mundo. Ele visualizou o conceito embora jamais tenha criado o mecanismo para concretizá-lo.

Posteriormente, nos anos 60, Douglas Engelbart influenciado pelo trabalho de Bush com relação aos conceitos de "links" e "browsing", pesquisou a convergência destes conceitos, com o objetivo de utilizar os computadores para aumentar a capacidade intelectual da humanidade[2]. A partir das idéias originais, como parte de seu projeto Augment, Engelbart desenvolveu o NLS ("oN-Line System"), que inicialmente serviu para o armazenamento de memorandos, notas de pesquisas, e documentações que podiam ser interrelacionados. Posteriormente, ele classificou o NLS como um sistema de cooperação e colaboração entre pessoas dispersas geograficamente.

Considerando estes trabalhos anteriores, Teodhor Nelson foi o responsável por criar o termo "hipertexto" referindo-se aos conceitos e técnicas utilizadas para suportar um modo de escrita não seqüencial auxiliada por computador[3] . Nelson falava sobre o impacto que a tecnologia do hipertexto produziria na sociedade futura através de uma rede "on-line" capaz de armazenar todo o conhecimento literário do mundo. Por volta de 1967, Nelson traduziu estas suas idéias em um projeto denominado Xanadu, que tornou-se, talvez, o mais conhecido sistema hipertexto. Este sistema seria um ambiente de publicações em constante expansão, o qual milhões de pessoas poderiam utilizar, interagindo e interconectando documentos eletronicamente. O projeto de um servidor de rede universal para o Xanadu foi descrito em várias edições de seu livro "Literary Machines"[4] .

Portanto, nota-se que há muitos anos os pesquisadores sonham com um "banco de dados universal" no qual grande quantidade de informações estariam disponíveis para que as pessoas pudessem acessar de qualquer parte do mundo.

Recentemente, os avanços tecnológicos têm tornado possível a realização deste sonho pois, à medida que a popularidade da Internet aumenta, as pessoas tornam-se mais cientes de seu enorme potencial, vislumbrando um subconjunto das funcionalidades da hipermídia na estruturação e acesso às informações através do recente surgimento da atividade do World-Wide Web (WWW).

O livro tem sido tradicionalmente o principal meio de armazenamento do conhecimento. As informações são geralmente organizadas em páginas seqüenciais para serem lidas de modo linear.

Ao contrário dos livros, os sistemas hipertexto podem representar uma coleção de arquivos interconectados em uma rede de informações. Os usuários são livres para progredir, ou "navegar", através desta base de informações utilizando vários caminhos distintos e não seqüenciais, cujas ligações foram de alguma maneira estabelecidas pelo projetista do sistema. Por "não seqüencial", subentende-se o movimento ou salto de um ponto do programa para outro, baseado tanto nas necessidades dos usuários quanto nos padrões de relações explicitamente definidos pelo autor.

Assim, os sistemas hipertexto estão baseados principalmente na suposição de que a interpretação do usuário é mais importante do que aquela do autor, e têm sido definido como "uma abordagem para o gerenciamento de informação no qual os dados são armazenados em uma rede de nodos conectados por links. Os nodos podem conter texto, gráficos, som, vídeo, ou outras formas de informações." [5]

Um sistema hipertexto é constituído de nodos (ou unidades de informação) e links (ou relações). Os dados são organizados como segmentos separados, embora interrelacionados, de informações. Uma parte do sistema hipertexto é um conjunto de links associativos que conectam os nodos individuais em uma rede principal. Portanto, um documento hipertexto é uma rede destes nodos conectados pelos links. A figura 1 ilustra a estrutura de um documento hipertexto no qual cada palavra sublinhada em negrito é um link para um outro nodo de informação. As setas indicam o nodo alvo de cada link.

Um nodo geralmente representa um único conceito ou idéia contido em uma ou mais telas de informação. Nesta figura, embora a rede hipertexto mostre somente informações textuais, é certo que poderia conter outros meios de comunicação suportados pelo sistema utilizado.

Portanto, em uma rede hipertexto, os nodos estão conectados uns aos outros através dos links. O nodo origem é chamado de referência e o nodo destino é chamado de referente. São também freqüentemente chamados de âncoras. O conteúdo de cada nodo é exibido pela ativação dos links, os quais podem ser bidirecionais facilitando o processo da busca de informação.

Figura 1 - Trecho de uma rede hipertexto interrelacionando conceitos.

Esta estrutura "nodo-link" na base de conhecimento hipertexto, permite ao usuário percorrer o "espaço da informação" utilizando as chamadas ferramentas de navegação ou "browsers". A seqüência de links a ser seguida fica sempre à critério do usuário, constituindo-se em uma característica predominante na estruturação de materiais baseados em hipertexto. Apesar da essência deste modelo serem os links eletrônicos, os nodos contribuem significativamente para a definição das operações que um sistema hipermídia pode desempenhar.

Os dois problemas clássicos freqüentemente citados na literatura de sistemas hipertexto ou hipermídia, com relação à sua utilização são:

• Desorientação

Este é o problema de sentir-se "perdido no hiperespaço", ou seja, o usuário não se sente seguro de onde ele está em relação à outras partes da rede, ou não é capaz de encontrar alguma informação que tinha certeza que estava em algum lugar no sistema. Esta tendência aumenta consideravelmente com o tamanho e a complexidade do hipertexto. Um importante ramo da pesquisa atual em hipertexto concentra-se na tentativa de desenvolver ferramentas cada vez mais poderosas para a visualização de estruturas. É preciso fornecer ao usuário um determinado nível de complexidade que seja compatível com os limites de sua cognição visual. Muitas estruturas conceituais podem ser eficazmente representadas pela exposição gráfica, e o problema da desorientação pode ser corrigido através de algum tipo de mapa.

• Sobrecarga cognitiva

A necessidade de acompanhar as ligações acarreta uma carga cognitiva adicional podendo significar que alguma capacidade de processamento da informação é desviada para a tarefa de tomada de decisão (que não deixa de ser a essência do trabalho com hipertexto). De outro modo, esta capacidade poderia ser concentrada no material sendo pesquisado ou estudado. Esta sobrecarga está presente até mesmo no processo de leitura de um documento hipertexto.

O Hypertext Transfer Protocol - ou HTTP como é chamado - é o protocolo através do qual as informações são transferidas utilizando o ambiente Web. A grande expansão da Web tem promovido este protocolo a um papel muito importante na Internet. Sua principal característica é a flexibilidade e a simplicidade. Assim, este protocolo é utilizado para transferir informações dos servidores para os clientes. Além do protocolo HTTP é preciso compreender o sistema de endereçamento dos servidores utilizando o Universal Resource Identifier (URI), que permite aplicações clientes localizarem servidores dentro da rede.

A medida que o número de protocolos cresce na rede, torna-se necessário uma padronização e simplificação da maneira como um determinado serviço é identificado e endereçado na rede. Os URIs permitem a existência de uma série de mecanismos de endereçamento. O URI define um método para "empacotar" um nome de um objeto de dado com um endereço universal pelo qual ele pode ser localizado no campo de outros endereços universais. O sistema de endereçamento não necessariamente revela qualquer informação útil a respeito do objeto de dado básico, sua metodologia de acesso, ou o sistema no qual o dado reside. O URI meramente permite que o dado seja encontrado.

O URI pode incluir informações que podem identificar qual o princípio de acesso. Este tipo de identificador é chamado Uniform Resource Locator ou URL como ficou conhecido na terminologia da Internet. Assim, o URL é um URI contendo informações adicionais sobre como o objeto que está sendo endereçado deve ser acessado. O seguinte exemplo ilustra melhor estes conceitos :

Assim, o protocolo HTTP é utilizado no ambiente WWW para transferir informações dos servidores para os clientes. O exemplo de URL acima, pode ser utilizado para demonstrar isto. A seguir vamos ver então como os outros principais serviços na Internet podem utilizar o sistema de endereçamento URL para acessar informações em servidores remotos.

Como vimos o protocolo FTP permite que arquivos sejam copiados de um computador remoto para um computador local usando o conceito de URI. Uma vez que vários parâmetros podem ser atribuídos para o FTP, algumas considerações tiveram de ser avaliadas por questões de interoperabilidade do sistema de endereçamento. O protocolo FTP quando acessado através do URL realizará a cópia do arquivo correspondente. Os endereços devem especificar o nome do usuário e a senha dentro do endereço URL, ou o usuário deve assumir que o modo de transferência de arquivo é do tipo " anonymous" e utilizará o endereço " e-mail" como senha. Por exemplo,

O URI para o protocolo Gopher permite que o endereço contenha o caminho completo para o diretório e também o número da porta TCP. Por exemplo,

A sintaxe do Gopher indica que a porta "70" deve ser utilizada para a conexão com este servidor e o objeto "00" indica que trata-se de um arquivo do tipo texto.

Os endereços podem também apontar para "mailboxes" eletrônicos, para permitir que os usuários consigam enviar um "feedback" sobre as informações contidas em determinados "links", ou para se comunicar com pessoas que podem estar envolvidas com um conjunto de informações que está sendo recuperado. Por exemplo,

Alguns "links" de endereços apontam para algumas sessões em hosts que utilizam emulação de terminal para acessar informações. Estes endereços contém o nome do host e a porta para conexão. Por exemplo,

HTML é uma linguagem de formatação de textos utilizada para definir páginas na Web, baseada em códigos embutidos em um documento que pode servir para ajustar fontes, criar listas, mostrar imagens, entre outros tipos de formatações de páginas. A linguagem HTML está fundamentada na ISO Standard Generalized Markup Language (ou SGML como é conhecida), que é um padrão internacional de formatação de documentos. Como um subconjunto deste padrão ISO, qualquer aplicação que possa interpretar o formato SGML poderá também ler o formato HTML.

Como o próprio nome diz, a HTML é uma linguagem de marcação hipertexto, e é considerada a "linguagem da Web". Todos os documentos que você acessar na Web foram implementados em HTML por alguém. As formatações de páginas, as imagens coloridas, os "hyperlinks" que possibilitam "navegar" pelo mundo virtual, foram desenvolvidos utilizando HTML. A linguagem HTML é fácil de aprender e requer na verdade muita criatividade. Basicamente, os documentos escritos em HTML são arquivos no formato ASCII-texto. Assim, podem ser criados com a utilização de qualquer editor de texto que grave os arquivos em formato texto "puro".

.

HTML é uma linguagem simples, porém poderosa e com muitos recursos. Um fator importante para o seu aprendizado é compreender seus conceitos, seus propósitos, e o que ela pode nos oferecer. Daí em diante, nossa criatividade é constantemente colocada à prova.

Algumas das principais características da HTML são :

• Formatação de documentos
• Organização de listas
• Capacidade de incluir hipertexto/hipermídia em documentos Web
• Capacidade de incluir imagens clicáveis.

Freqüentemente você vai deparar com muitas outras características de implementações HTML na Web, mas certamente todas serão fáceis de assimilar se você antes de tudo compreender a "filosofia" da linguagem. É isto que veremos a seguir.

A HTML faz uso de "tags" e elementos que proporcionam uma maneira de especificar qual formato utilizar e quando um formato começa e termina. Para isso, utiliza marcações específicas e distintas para dizer ao browser do usuário como exibir um documento. A sintaxe básica para estas marcações HTML geralmente são especificadas da seguinte maneira :

Portanto, a estrutura básica de um documento HTML deve conter :

• uma identificação do tipo HTML: <Html> </Html>
• uma seção de cabeçalho delimitada por: <Head> </Head>
• o título do documento dentro da seção de cabeçalho: <Title>título</Title>
• uma área como corpo do documento: <Body>corpo_do_conteúdo</Body>

Esta estrutura básica é ilustrada na figura abaixo:

.

Os elementos de formatação representam o "coração" da linguagem HTML. Os códigos de formatação do documento podem ser divididos em dois grupos básicos :

• propriedades do documento
• propriedades de formatação

As propriedades do documento descrevem o título e outras características gerais sobre o documento como um todo. Os seguintes parâmetros aparecem dentro do cabeçalho de um documento para identificar sua utilização por um sistema cliente :

Assim, existem várias propriedades que podem ser encontradas dentro de uma seção HEAD de um documento, mas a principal que teremos que conhecer por enquanto é TITLE. As outras são : ISINDEX, NEXTID, LINK, e BASE e não serão vistas neste curso.

Cada documento tem um título que o browser utiliza para identificar a página. Este título é mostrado como parte da janela e representa uma maneira para o usuário poder ver o título do documento, principalmente se este documento é composto de várias telas.

As propriedades de formatação especificam o "layout" do texto e as imagens dentro do documento. Vimos que a seção HEAD contém somente informações sobre o documento. Aqui, o elemento BODY é que contém as informações sobre seus conteúdos, visto que existem vários elementos para manipular um documento a fim de formatar textos, imagens, listas e outros objetos. O elemento BODY é utilizado para indicar o início e o final do conteúdo de um documento.

Os cabeçalhos geralmente são utilizados para títulos e sub-títulos em uma página Web. Na linguagem HTML, você pode utilizar até seis níveis de cabeçalhos. Tipicamente estes cabeçalhos mostrarão diferentes tamanhos de texto e formatos, dependendo destes níveis. Portanto, a notação relativa a cabeçalhos é:

.

A marcação de parágrafo é utilizada para definir o início de um novo parágrafo. Entre dois parágrafos é deixado uma linha em branco. Portanto, este tipo de marcador é utilizado para separar a informação entre blocos lógicos de texto. A linguagem HTML não reconhece o caracter de quebra de linha dos editores de texto. Mesmo que exista uma linha em branco, os clientes Web só reconhecem o início de um novo parágrafo mediante a marcação apropriada. Assim, a notação relativa a esta marcação é dada por :

Embora esta marcação não exija o terminador </P>, é interessante colocá-lo pois existe uma tendência de que novas normas da linguagem HTML venham a incluí-lo.

.

A marcação <BR> faz uma quebra de linha sem acrescentar espaço extra entre as linhas. Assim como os marcadores de parágrafo, o marcador de quebra de linha indica que o texto seguinte ao marcador deve iniciar na próxima linha. A diferença entre os dois marcadores está justamente no espacejamento entre as linhas.

A marcação <HR> produz uma linha de separação horizontal.

A marcação <PRE>...</PRE> é utilizada para representar blocos de texto com suas formatações originais, ou seja, espaços em branco, tabulações, e quebras de linhas são preservados.

A marcação <EM>...</EM> é utilizada para a formatação de textos enfatizados, representados com a utilização de fontes itálicas ou negritadas. A marcação <STRONG>...</STRONG> desempenha função parecida utilizando fontes negritadas. A marcação <CITE>...</CITE> é utilizada para a formatação de citações, geralmente utilizando fontes itálicas.

Agora que já vimos a estrutura básica de um documento HTML e alguns comandos simples de formatação, já podemos fazer nossa primeira página. Assim, observe com atenção todos os comandos programados utilizando um editor de textos qualquer (neste caso o Windows NotePad), e na página seguinte o resultado obtido no browser cliente (neste caso Netscape Gold).

Então, em seu browser Web, esta página aparecerá como:

A utilização de listas será de grande importância para a criação de suas páginas Web. A linguagem HTML suporta vários formatos diferentes de listas. Os tipos de listas que iremos ver aqui são : listas ordenadas, listas não ordenadas, listas de definições, e listas encadeadas.

Uma lista ordenada, também conhecida como lista numerada, utiliza marcação <OL> (Ordered List). Os itens da lista são identificados utilizando-se a notação <LI> e são automaticamente numerados. Portanto, a sintaxe é a seguinte :

.

Uma lista não ordenada, também conhecida como lista não numerada, é semelhante a uma lista ordenada, exceto pela utilização da marcação <UL> (Unordered List) ao invés de <OL>. As listas não ordenadas utilizam algum símbolo gráfico para denotar cada item da lista. A maioria dos browsers utilizam um "bullet" (ou seja, um símbolo · ). Portanto a sintaxe lembra muito aquela anterior :

Uma lista de definições permite incluir uma descrição de cada item listado. Por isso, alguns autores chamam este tipo de lista de lista de glossário. Uma lista de definição utiliza o marcador <DL>. Normalmente consiste de um termo (através da marcação <DT>) e de uma definição (através da marcação <DD>). Os browsers clientes geralmente formatam a definição em uma nova linha com outro alinhamento. Portanto, a sintaxe geral para este tipo de lista é a seguinte:

.

As listas podem ser sucessivamente encadeadas (ou seja, uma lista dentro de outra lista), embora uma boa prática seja você limitar o encadeamento a três níveis no máximo. Com isto você conseguirá produzir resultados satisfatórios e facilitará a compreensão por parte do leitor da sua página Web. Por exemplo, você poderá ter um parágrafo intercalado com uma lista que contenha um único item. Assim um exemplo genérico para este tipo de lista pode ser mostrada como :

1) Observe o exemplo de código abaixo sobre lista ordenada e não ordenada, e verifique o respectivo resultado...

2) Observe o exemplo de código abaixo sobre lista de definições e verifique o respectivo resultado...

3) Observe o exemplo de código abaixo sobre listas encadeadas e verifique o respectivo resultado...

Talvez a maior potencialidade da linguagem HTML seja a sua capacidade de interligar trechos de textos (ou imagens) a outros documentos da rede. Este é o princípio da tecnologia de hipertexto e estas "ligações" são realizadas através dos hyperlinks. No browser do usuário, os hyperlinks aparecem como palavras ou frases destacadas (com cores diferentes ou sublinhadas) indicando uma ligação hipertexto. Os hyperlinks estão baseados na marcação <A>, denominada âncora. A sintaxe para incluir uma âncora em seu documento é:

"COMANDO" pode assumir dois valores : HREF (Hypertext REFerence) ou NAME. O parâmetro HREF identificará o endereço URL de destino, portanto define um hyperlink. As declarações válidas para o parâmetro HREF (ou seja, os valores para o nosso "destino_da_ligação") podem ser :

O parâmetro NAME identificará uma âncora de destino, portanto define um lugar marcado no documento. A única declaração válida para este parâmetro é dado por:

O tipo de hyperlink mais simples é aquele que aponta para um determinado documento no mesmo computador, no mesmo diretório de trabalho. Por exemplo,

No browser do usuário, quando ele clicar em "Texto que aparecerá destacado", o documento "destino.html" será chamado e mostrado em sua tela.

Você pode querer que o seu hyperlink aponte para um determinado ponto em documento de destino que pode ser local ou remoto. Assim, a linguagem HTML permite que se façam ligações entre diferentes trechos de um documento. Isto é bastante útil, pois permite que o administrador de um sistema Web deixe disponível documentos grandes com determinados locais indexados, ao invés de vários documentos pequenos. Como vimos anteriormente, há dois comandos que podem fazer parte de uma âncora (HREF e NAME). Os índices internamente referenciados são determinados, utilizando o comando NAME para marcar o ponto de referência.

Portanto, os dois passos principais para você utilizar este recurso, seriam :

¬ Definir um nome para o ponto de origem precedido pelo caracter #, por exemplo :

Neste exemplo, "Preços" apontará para uma referência dentro do próprio documento.

­ Definir um ponto de destino, com o nome correspondente ao ponto de origem:

Esta declaração indica o local para onde o usuário será "conduzido" quando clicar em "Preços" definido no primeiro passo.

.

Para referenciar um endereço remoto, a Web utiliza-se das URLs (Uniform Resource Locators) para especificar a localização de arquivos em servidores remotos. A URL inclui o tipo de recurso acessado (Telnet, Gopher, etc.), o endereço do servidor, e a localização do arquivo desejado. Portanto, em linhas gerais, um endereço URL completo segue a seguinte especificação :

http://	para acessar um servidor Web
ftp://	para acessar um servidor de ftp
file://	para acessar o sistema local
gopher://	para acessar um servidor Gopher
telnet://	para estabelecer uma conexão Telnet
news:	para acessar Usenet newsgroup
mailto:	para acessar caixa postal eletrônica

1) Observe o exemplo de código abaixo sobre hyperlinks locais e remotos. Depois, verifique o respectivo resultado...

...clicando no primeiro link, o browser direciona para o "doc2.html"...

...e clicando no segundo link ...

1. Observe o exemplo de código abaixo sobre ligações a pontos específicos dentro de um documento. Depois, verifique na próxima página, os respectivos resultados...

...clicando no texto destacado "Características da linguagem HTML" (na primeira figura), o browser conduzirá o usuário para um ponto específico dentro do mesmo documento (na segunda figura).

Certamente a popularidade da WWW deve-se em grande parte a sua capacidade de exibir imagens gráficas, não somente para proporcionar bonitas apresentações como também para serem utilizadas na "navegação" através das base de informações. As imagens produzem um grande impacto, enriquecendo o conteúdo visual de sua página.

Quando inserindo imagens em páginas Web, você deve ter em mente duas preocupações principais : a diagramação e o tamanho da imagem sendo inserida.

• Diagramação - é preciso utilizar as imagens com discernimento. A prática do bom estilo de diagramação diz que as imagens não devem jamais distrair a atenção do leitor, para não desviá-lo do conteúdo principal da mensagem que se deseja transmitir. Portanto, devem ser usadas somente para complementar (ou explicar) aquilo que se está transmitindo.
• Tamanho da imagem - é preciso ter cuidado com o tamanho das imagens que você deseja exibir em sua página Web. Uma imagem GIF de tamanho 640 x 480 pixels com 256 cores, utiliza cerca de 300 Kb (kilobytes). Se o usuário estiver utilizando um modem de 14.400 bauds, esta imagem levaria cerca de 3 minutos para ser transferida. Portanto, na construção de uma página Web, devemos contornar este tipo de problema. Embora na Internet fale-se muito em "altas velocidades", a maioria dos usuários (ligados por exemplo a um provedor de acesso Internet), consegue trabalhar a 14.400 bauds ou 28.800 bauds no máximo.

A maioria dos browsers manipulam somente imagens no formato GIF (Graphical Image Format). Este formato foi desenvolvido pela empresa americana Compuserve. A vantagem deste formato é o seu excelente fator de compactação (gastando menos tempo de transferência das imagens através das linhas de comunicação). Mais recentemente, a Netscape adotou também o formato JPEG, desenvolvido pelo Joint Photographs Experimental Group (uma associação de fotógrafos profissionais dedicada à divulgação de fotografias digitais). Assim, você utilizará sempre somente um dos dois formatos em suas páginas Web.

A maioria dos browsers permite exibir imagens internas (ou "in-line images") no formato GIF. A sintaxe geral para inserir uma imagem em sua página Web é a seguinte:

onde image_URL é a URL do arquivo que contém a imagem a ser mostrada.

Uma vez que as imagens estão "contidas" no texto, você pode querer alterar a localização delas para obter a diagramação desejada. Para isso, as imagens internas podem ser exibidas em três diferentes alinhamentos em relação ao texto, ou seja, bottom (alinhada o texto com a parte inferior de uma imagem), middle (alinha o texto com o centro da imagem), e top (alinha o texto com o topo da imagem). Para isso, a sintaxe passaria a ser a seguinte :

Alguns browsers não permitem exibir imagens. Para evitar que o usuário não entenda a mensagem que seria transmitida com a imagem, pode-se incluir mais um parâmetro neste comando para substituí-la por um texto. Este parâmetro é ALT. Assim, a sintaxe geral contendo este parâmetro pode ser a seguinte :

Você já viu como inserir hyperlinks em seus documentos (utilizando texto ou frase), representando um acesso a algum documento local ou remoto na Web. Agora veremos que é possível utilizar imagens como links ou como auxiliares de navegação (seta para uma próxima página Web, por exemplo). Assim, as imagens podem ser utilizadas como links para documentos localizados em algum servidor remoto. A sintaxe geral é a seguinte :

1) Observe o exemplo de código abaixo sobre a inserção de imagens e suas disposições em relação ao texto. Depois, verifique o respectivo resultado...

2) Observe o exemplo de código abaixo sobre a transformação de imagens em hyperlinks (primeira figura), ou seja, o usuário poderá clicar na imagem (segunda figura) e acessar uma outra página qualquer que tenha sido previamente projetada (terceira figura).

Tabelas podem ser usadas para tabular dados científicos ou de negócios, como no exemplo mostrado na seqüência. Entretanto, uma das vantagens da utilização de tabelas é a elaboração de uma melhor diagramação da página, por exemplo a exposição das informações em duas ou mais colunas como utilizada em jornais.

Para isso, a linguagem HTML utiliza a marcação <TABLE> para identificar uma tabela. Basicamente uma tabela na HTML apresenta os seguintes elementos principais : <CAPTION> para definir uma legenda ou título para a tabela; <TH> para definir um cabeçalho de uma célula da tabela; <TR> para definir uma linha da tabela; e <TD> para definir uma coluna da tabela (informações contidas numa célula da tabela). Assim, um exemplo básico para tabelas na linguagem HTML pode ser a seguinte :

A tabela pode ou não conter borda, para isto utiliza o atributo BORDER. Portanto, <TABLE BORDER=4> define a tabela com borda de largura 4. As diretivas <TD>, <TH>, e <TR> apresentam dois atributos em comum ALIGN e VALIGN para definir o alinhamento do conteúdo das células de forma horizontal e vertical, respectivamente. Assim, por exemplo, <TD ALIGN="LEFT">, alinharia o conteúdo da célula à esquerda. Os atributos ROWSPAN e COLSPAN, controlam a largura e altura das linhas e colunas de uma tabela. Portanto, <TD COLSPAN=3> cria uma célula com largura de 3 colunas.

Aqui, não entraremos em maiores detalhes sobre tabelas. A marcação <TABLE> é bastante utilizada para diagramação visual das páginas Web e contém muitos parâmetros e atributos. Em seguida vamos ver um exemplo de tabelas, e para nossa compreensão inicial este conhecimento sobre tabelas é o suficiente. Se você precisar se aprofundar neste assunto, encontrará muitas referências.

1) Observe o exemplo de código abaixo sobre a utilização de tabelas na Web. Depois, observe os resultados obtidos...

[1]BUSH, V., "As We May Think", The Atlantic Monthly, Julho/1945. Versão eletrônica em "http://www.isg.sfu.ca/~duchier/misc/vbush", preparada por Denys Duchier, abril/1994.

[2]ENGELBART, D. C., "A Conceptual Framework for the Augmentation of Man’s Intellect", em HOWERTON, P. D. & WEEKS, D. C. (editores), "Vistas in Information Handling - Vol. 1", Spartan Books, pp. 1-29, 1963.

[3]NELSON, T., "A File Structure for the Complex, the Changing and the Indeterminate", proceedings of the ACM 20th national conference 1965.

[4]NELSON, T., "Literary Machines", Mindful Press, Sausalito, Califórnia, versão em inglês com edição mais recente, 1993.

Evans, T., "HTML - Simples e Rápido", Makron Books, 1996.

Venetianer, T., "HTML - Desmistificando a Linguagem da Internet", Makron Books, 1996.

Marchuk, M., "Building Internet Applications of Visual Basic", QUE Corporation, 1995.