HTML - smeduquedecaxias.rj.gov.brsmeduquedecaxias.rj.gov.br/nead/Biblioteca/Formação...

44
HTML

Transcript of HTML - smeduquedecaxias.rj.gov.brsmeduquedecaxias.rj.gov.br/nead/Biblioteca/Formação...

HTML

UNIVERSIDADE FEDERAL DO PARANÁ CENTRO DE COMPUTAÇÃO ELETRÔNICA

DIVISÃO DE SUPORTE TÉCNICO

HyperText Markup Language - HTML Página 2

SUMÁRIO

COMPREENDENDO OS FUNDAMENTOS DA INTERNET ..........................................................5

O QUE É A INTERNET ? ..........................................................................................................................5

AS APLICAÇÕES BÁSICAS NA INTERNET.................................................................................................6

FTP - File Transfer Protocol ..........................................................................................................6

SMTP - Simple Mail Transfer Protocol ..........................................................................................6

List Servers......................................................................................................................................6

Usenet (User’s Network).................................................................................................................6

Gopher ............................................................................................................................................7

Telnet ..............................................................................................................................................7

WWW - World Wide Web..............................................................................................................7

ENDEREÇANDO REDES E COMPUTADORES ............................................................................................9

O básico do TCP/IP ........................................................................................................................9

Endereçamento da Rede .................................................................................................................9

Nomes e Endereços .........................................................................................................................9

COMPREENDENDO OS CONCEITOS WEB..................................................................................10

UMA VISÃO HISTÓRICA DE HIPERTEXTO..............................................................................................10

FUNDAMENTOS DE HIPERTEXTO .........................................................................................................11

NODOS E LINKS...................................................................................................................................12

COMPREENDENDO O HYPERTEXT TRANSFER PROTOCOL (HTTP)................................14

UNIVERSAL RESOURCE IDENTIFIER (URI) ..........................................................................................14

UNIFORM RESOURCE LOCATOR (URL)...............................................................................................14

FTP - FILE TRANSFER PROTOCOL .......................................................................................................15

GOPHER ..............................................................................................................................................15

MAILTO...............................................................................................................................................15

UNIVERSIDADE FEDERAL DO PARANÁ CENTRO DE COMPUTAÇÃO ELETRÔNICA

DIVISÃO DE SUPORTE TÉCNICO

HyperText Markup Language - HTML Página 3

TELNET ...............................................................................................................................................15

HYPERTEXT MARKUP LANGUAGE (HTML) .............................................................................16

CARACTERÍSTICAS DA LINGUAGEM HTML.........................................................................................16

COMPREENDENDO A ESTRUTURA HTML ............................................................................................17

PROPRIEDADES DO DOCUMENTO .........................................................................................................18

TITLE............................................................................................................................................18

PROPRIEDADES DE FORMATAÇÃO........................................................................................................18

Cabeçalhos....................................................................................................................................18

Parágrafos ....................................................................................................................................19

Quebras de linha...........................................................................................................................19

OUTRAS MARCAÇÕES DE ESTILOS BASTANTE UTILIZADAS... ...............................................................19

Linha de separação Horizontal ....................................................................................................19

Texto Pré-Formatado....................................................................................................................19

Ênfase............................................................................................................................................19

+ EXEMPLO INICIAL..........................................................................................................................20

TRABALHANDO COM LISTAS NA LINGUAGEM HTML..........................................................................22

Listas Ordenadas ..........................................................................................................................22

Listas Não Ordenadas...................................................................................................................22

Listas de Definições ......................................................................................................................23

Listas Encadeadas ........................................................................................................................23

+ EXEMPLOS SOBRE LISTAS.............................................................................................................24

TRABALHANDO COM HYPERLINKS NA LINGUAGEM HTML .................................................................27

Estabelecendo hyperlinks locais ...................................................................................................27

Estabelecendo hyperlinks a pontos específicos em um documento...............................................28

Estabelecendo hyperlinks a documentos ou outros recursos remotos..........................................28

+ EXEMPLOS SOBRE HYPERLINKS ...................................................................................................30

UNIVERSIDADE FEDERAL DO PARANÁ CENTRO DE COMPUTAÇÃO ELETRÔNICA

DIVISÃO DE SUPORTE TÉCNICO

HyperText Markup Language - HTML Página 4

TRABALHANDO COM IMAGENS NA LINGUAGEM HTML ......................................................................34

Inserindo imagens em sua página Web ........................................................................................34

Transformando imagens em hyperlinks ........................................................................................35

+ EXEMPLOS DE IMAGENS EM PÁGINAS WEB ..................................................................................35

TRABALHANDO COM TABELAS NA LINGUAGEM HTML ......................................................................38

+ EXEMPLOS DE TABELAS EM PÁGINAS WEB ...................................................................................39

MARCAÇÕES IMPORTANTES........................................................................................................40

CÓDIGOS HTML PARA CARACTERES ACENTUADOS ...........................................................43

REFERÊNCIAS BIBLIOGRÁFICAS ................................................................................................44

OUTRAS BIBLIOGRAFIAS PESQUISADAS ..................................................................................44

UNIVERSIDADE FEDERAL DO PARANÁ CENTRO DE COMPUTAÇÃO ELETRÔNICA

DIVISÃO DE SUPORTE TÉCNICO

HyperText Markup Language - HTML Página 5

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.

Apesar destas considerações, é necessário que consigamos acompanhar de alguma maneira esta (r)evolução da “tecnologia da informação” que aliada ao processo de “globalização” tem exigido da sociedade moderna uma verdadeira transformação em seus costumes. Assim, a idéia é tentar abordar alguns conceitos importantes, embora complexos, de uma maneira simples para que você consiga compreender o que realmente toda esta tecnologia pode trazer de benefícios no seu dia a dia.

O que é a Internet ?

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.

UNIVERSIDADE FEDERAL DO PARANÁ CENTRO DE COMPUTAÇÃO ELETRÔNICA

DIVISÃO DE SUPORTE TÉCNICO

HyperText Markup Language - HTML Página 6

As aplicações básicas na Internet

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.

FTP - File Transfer Protocol

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

SMTP - Simple Mail Transfer Protocol

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.

List Servers

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.

Usenet (User’s Network)

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

UNIVERSIDADE FEDERAL DO PARANÁ CENTRO DE COMPUTAÇÃO ELETRÔNICA

DIVISÃO DE SUPORTE TÉCNICO

HyperText Markup Language - HTML Página 7

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.

Gopher

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.

Telnet

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.

WWW - World Wide Web

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.

UNIVERSIDADE FEDERAL DO PARANÁ CENTRO DE COMPUTAÇÃO ELETRÔNICA

DIVISÃO DE SUPORTE TÉCNICO

HyperText Markup Language - HTML Página 8

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.

UNIVERSIDADE FEDERAL DO PARANÁ CENTRO DE COMPUTAÇÃO ELETRÔNICA

DIVISÃO DE SUPORTE TÉCNICO

HyperText Markup Language - HTML Página 9

Endereçando Redes e Computadores

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 básico do TCP/IP

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.

Endereçamento da Rede

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,

200.17.210.109

Nomes e Endereços

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,

.com organizações comerciais .edu instituições educacionais .br hosts no Brasil

UNIVERSIDADE FEDERAL DO PARANÁ CENTRO DE COMPUTAÇÃO ELETRÔNICA

DIVISÃO DE SUPORTE TÉCNICO

HyperText Markup Language - HTML Página 10

Compreendendo os Conceitos Web 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).

Uma visão histórica de Hipertexto

Em 1945, Vannevar Bush em seu artigo intitulado As We May Think [1], imaginou

UNIVERSIDADE FEDERAL DO PARANÁ CENTRO DE COMPUTAÇÃO ELETRÔNICA

DIVISÃO DE SUPORTE TÉCNICO

HyperText Markup Language - HTML Página 11

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

Fundamentos de Hipertexto

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.

UNIVERSIDADE FEDERAL DO PARANÁ CENTRO DE COMPUTAÇÃO ELETRÔNICA

DIVISÃO DE SUPORTE TÉCNICO

HyperText Markup Language - HTML Página 12

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]

Nodos e Links

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.

UNIVERSIDADE FEDERAL DO PARANÁ CENTRO DE COMPUTAÇÃO ELETRÔNICA

DIVISÃO DE SUPORTE TÉCNICO

HyperText Markup Language - HTML Página 13

Figura 1 - Trecho de uma rede hipertexto interrelacionando conceitos.

Nodo B

Nodo C

Nodo A Talvez a primeira proposição da

existência de alterações celulares subjacentes à formação de memórias tenha sido feita por Donald Hebb, em seu livro “Organization of Behavior” (1949). Esse psicólogo canadense propôs que na situação de aprendizagem, um neurônio estimula outro de tal forma que a sinapse entre eles se torna fortalecida, o que poderia explicar o fenômeno da memória.

A sinapse é uma junção especializada entre dois neurônios, presente em todos os sistemas nervosos. Impulsos nervosos de um neurônio são transmitidos ao seguinte através desta junção, seja quimicamente (via neurotransmissores) ou eletricamente (via correntes locais).

Memória é a capacidade de reter e recuperar informações. Processo que produz alterações no comportamento, permitindo que o indivíduo se situe no presente, considerando o passado e o futuro. As memórias podem ser de curto prazo ou longo prazo - conforme permaneçam por maior ou menor tempo - e podem ser divididas em memória semântica (conhecimento) e episódica (lembrança de eventos específicos vividos pelo indivíduo).

Os neurônios são células nervosas. São alongadas e especializadas na condução dos impulsos nervosos ( sinais elétricos ).

Nodo D

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.

UNIVERSIDADE FEDERAL DO PARANÁ CENTRO DE COMPUTAÇÃO ELETRÔNICA

DIVISÃO DE SUPORTE TÉCNICO

HyperText Markup Language - HTML Página 14

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

Compreendendo o Hypertext Transfer Protocol (HTTP)

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.

Universal Resource Identifier (URI)

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.

Uniform Resource Locator (URL)

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 :

URI : //river.clarion.edu/trvilberg/conceptmap.html URL : http://river.clarion.edu/trvilberg/conceptmap.html

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.

UNIVERSIDADE FEDERAL DO PARANÁ CENTRO DE COMPUTAÇÃO ELETRÔNICA

DIVISÃO DE SUPORTE TÉCNICO

HyperText Markup Language - HTML Página 15

FTP - File Transfer Protocol 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,

ftp://userid:password@bighost/finance/q4-95.xls ftp://bighost/games/arcade/cdown.zip

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

gopher://host5:70/00/research-papers/baby.txt 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.

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

mailto:[email protected]

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

telnet://infoserv.abc.com:6677

UNIVERSIDADE FEDERAL DO PARANÁ CENTRO DE COMPUTAÇÃO ELETRÔNICA

DIVISÃO DE SUPORTE TÉCNICO

HyperText Markup Language - HTML Página 16

HyperText Markup Language (HTML) 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”.

.

A HTML é uma linguagem interpretada. O interpretador é o browser do usuário ou o “sistema cliente”.

Características da linguagem HTML

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.

UNIVERSIDADE FEDERAL DO PARANÁ CENTRO DE COMPUTAÇÃO ELETRÔNICA

DIVISÃO DE SUPORTE TÉCNICO

HyperText Markup Language - HTML Página 17

Compreendendo a estrutura HTML

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 :

<elemento> Texto a ser formatado </elemento>

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:

. A linguagem HTML não diferencia entre letras maiúsculas e minúsculas, ou seja, não é

"case sensitive". Assim, a notação <HEAD> é equivalente a <Head>.

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

UNIVERSIDADE FEDERAL DO PARANÁ CENTRO DE COMPUTAÇÃO ELETRÔNICA

DIVISÃO DE SUPORTE TÉCNICO

HyperText Markup Language - HTML Página 18

Propriedades do documento

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 :

<HEAD> <TITLE>Curso de HTML</TITLE> </HEAD>

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.

TITLE

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.

Propriedades de formatação

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.

Cabeçalhos

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

<Hn>Texto do cabeçalho </Hn > onde “n” é um número entre 1

.

O elemento <Hn> não define o tamanho da letra em um cabeçalho O tamanho exato com que ele será visualizado é definido pelo browser de cada usuário.

UNIVERSIDADE FEDERAL DO PARANÁ CENTRO DE COMPUTAÇÃO ELETRÔNICA

DIVISÃO DE SUPORTE TÉCNICO

HyperText Markup Language - HTML Página 19

Parágrafos

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 :

<P> Texto correspondente a este parágrafo... </P>

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.

.

Inserindo-se uma marcação de parágrafo depois de <P>, <LI>,<Hn> e algumas outras, esta marcação será ignorada.

Quebras de linha

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.

Outras marcações de estilos bastante utilizadas...

Linha de separação Horizontal

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

Texto Pré-Formatado

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.

Ênfase

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.

UNIVERSIDADE FEDERAL DO PARANÁ CENTRO DE COMPUTAÇÃO ELETRÔNICA

DIVISÃO DE SUPORTE TÉCNICO

HyperText Markup Language - HTML Página 20

+ Exemplo inicial

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

UNIVERSIDADE FEDERAL DO PARANÁ CENTRO DE COMPUTAÇÃO ELETRÔNICA

DIVISÃO DE SUPORTE TÉCNICO

HyperText Markup Language - HTML Página 21

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

UNIVERSIDADE FEDERAL DO PARANÁ CENTRO DE COMPUTAÇÃO ELETRÔNICA

DIVISÃO DE SUPORTE TÉCNICO

HyperText Markup Language - HTML Página 22

Trabalhando com Listas na linguagem HTML

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.

Listas Ordenadas

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 :

<OL> <LI>Primeiro item da lista</LI> <LI>Segundo item da lista</LI> <LI>Terceiro item da lista</LI> </OL>

.

As listas ordenadas são numeradas automaticamente quando interpretadas pelo browsers dos usuários. Qualquer alteração nas listas (inclusão ou exclusão de itens) irá renumerar todos os seus itens.

Listas Não Ordenadas

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 :

<UL> <LI>Primeiro item da lista</LI> <LI>Segundo item da lista</LI> <LI>Terceiro item da lista</LI> </UL>

UNIVERSIDADE FEDERAL DO PARANÁ CENTRO DE COMPUTAÇÃO ELETRÔNICA

DIVISÃO DE SUPORTE TÉCNICO

HyperText Markup Language - HTML Página 23

Listas de Definições

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:

<DL> <DT>Termo 1 <DD>Definição do Termo 1 <DT>Termo 2 <DD>Definição do Termo 2 </DL>

.

As marcações <DT> e <DD> podem conter múltiplos parágrafos (separados pela marcação <P> ), listas, ou outras definições. A marcação <DD> pode também ser utilizada, fora de uma lista de definições como se fosse uma tabulação (insere um espaço no início da frase).

Listas Encadeadas

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 :

<UL> (ou <OL>) <LI>Primeiro item da lista</LI> <LI>Segundo item da lista</LI> <UL> <LI>Primeiro subitem do segundo item da lista</LI> <LI>Segundo subitem do segundo item da lista</LI> </UL> <LI>Terceiro item da lista</LI> </UL> (ou </OL>)

Aqui, para forçar quebra de linha, você não precisará utilizar a marcação <P> por exemplo, pois os comandos <UL> ou <OL> forçam a quebra de linha automaticamente. Também, cada marcação <LI> poderá conter vários parágrafos, cada qual contendo uma nova lista encadeada.

.

UNIVERSIDADE FEDERAL DO PARANÁ CENTRO DE COMPUTAÇÃO ELETRÔNICA

DIVISÃO DE SUPORTE TÉCNICO

HyperText Markup Language - HTML Página 24

+ Exemplos sobre Listas

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

UNIVERSIDADE FEDERAL DO PARANÁ CENTRO DE COMPUTAÇÃO ELETRÔNICA

DIVISÃO DE SUPORTE TÉCNICO

HyperText Markup Language - HTML Página 25

respectivo resultado...

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

UNIVERSIDADE FEDERAL DO PARANÁ CENTRO DE COMPUTAÇÃO ELETRÔNICA

DIVISÃO DE SUPORTE TÉCNICO

HyperText Markup Language - HTML Página 26

UNIVERSIDADE FEDERAL DO PARANÁ CENTRO DE COMPUTAÇÃO ELETRÔNICA

DIVISÃO DE SUPORTE TÉCNICO

HyperText Markup Language - HTML Página 27

Trabalhando com hyperlinks na linguagem HTML

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

<A COMANDO = “destino_da_ligação”>Texto que aparecerá destacado</A>

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

HREF=“nome_da_âncora” HREF=“endereço_URL” HREF=“endereço_URL#nome_da_âncora” HREF=“endereço_URL?string_de_busca”

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:

NAME=“nome_da_âncora”

Estabelecendo hyperlinks locais

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

<A HREF=”destino.html”>Texto que aparecerá destacado</A>

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

UNIVERSIDADE FEDERAL DO PARANÁ CENTRO DE COMPUTAÇÃO ELETRÔNICA

DIVISÃO DE SUPORTE TÉCNICO

HyperText Markup Language - HTML Página 28

Estabelecendo hyperlinks a pontos específicos em um documento 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 :

<A HREF="#ponto1">Preços</A>

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:

<A NAME="ponto1">Lista de Preços</A>

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

.

Estabelecendo hyperlinks a documentos ou outros recursos remotos 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 :

Onde protocolo poderia ser algum destes abaixo especificados :

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

protocolo://servidor[:porta]/caminho/nome_do_arquivo

Para estabelecer um hyperlink a pontos específicos em um outro documento, basta incluir no parâmetro HREF o endereço correspondente. Por exemplo, <A HREF=”subdiretorio1/destino.html#ponto1”>Preços</A>

UNIVERSIDADE FEDERAL DO PARANÁ CENTRO DE COMPUTAÇÃO ELETRÔNICA

DIVISÃO DE SUPORTE TÉCNICO

HyperText Markup Language - HTML Página 29

news: para acessar Usenet newsgroup mailto: para acessar caixa postal eletrônica

UNIVERSIDADE FEDERAL DO PARANÁ CENTRO DE COMPUTAÇÃO ELETRÔNICA

DIVISÃO DE SUPORTE TÉCNICO

HyperText Markup Language - HTML Página 30

+ Exemplos sobre Hyperlinks

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

UNIVERSIDADE FEDERAL DO PARANÁ CENTRO DE COMPUTAÇÃO ELETRÔNICA

DIVISÃO DE SUPORTE TÉCNICO

HyperText Markup Language - HTML Página 31

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

...e clicando no segundo link ...

UNIVERSIDADE FEDERAL DO PARANÁ CENTRO DE COMPUTAÇÃO ELETRÔNICA

DIVISÃO DE SUPORTE TÉCNICO

HyperText Markup Language - HTML Página 32

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

UNIVERSIDADE FEDERAL DO PARANÁ CENTRO DE COMPUTAÇÃO ELETRÔNICA

DIVISÃO DE SUPORTE TÉCNICO

HyperText Markup Language - HTML Página 33

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

UNIVERSIDADE FEDERAL DO PARANÁ CENTRO DE COMPUTAÇÃO ELETRÔNICA

DIVISÃO DE SUPORTE TÉCNICO

HyperText Markup Language - HTML Página 34

Trabalhando com Imagens na linguagem HTML

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.

Inserindo imagens em sua página 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:

<IMG SRC=image_URL > 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 :

<IMG SRC=image_URL ALIGN=TOP,MIDDLE, ou BOTTOM >

Alguns browsers não permitem exibir imagens. Para evitar que o usuário não entenda

UNIVERSIDADE FEDERAL DO PARANÁ CENTRO DE COMPUTAÇÃO ELETRÔNICA

DIVISÃO DE SUPORTE TÉCNICO

HyperText Markup Language - HTML Página 35

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 :

<IMG SRC=image_URL ALT=texto que identifique a imagem >

.

É uma boa prática incluir sempre este parâmetro ALT, para você ter sempre a certeza de que seus leitores verão a representação correta de suas páginas, independente do browser que eles estiverem utilizando.

Transformando imagens em hyperlinks

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 :

<A HREF=”endereço_destino” > <IMG SRC=”nome_da_imagem.gif”> </A>

.

É possível utilizar uma única imagem para direcionar o browser para diversos outros documentos ou arquivos remotos. Estas imagens são chamadas mapeadas e o parâmetro adicionado ao comando é ISMAP. Esta técnica não será estudada neste curso.

+ Exemplos de Imagens em páginas Web

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

UNIVERSIDADE FEDERAL DO PARANÁ CENTRO DE COMPUTAÇÃO ELETRÔNICA

DIVISÃO DE SUPORTE TÉCNICO

HyperText Markup Language - HTML Página 36

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

UNIVERSIDADE FEDERAL DO PARANÁ CENTRO DE COMPUTAÇÃO ELETRÔNICA

DIVISÃO DE SUPORTE TÉCNICO

HyperText Markup Language - HTML Página 37

UNIVERSIDADE FEDERAL DO PARANÁ CENTRO DE COMPUTAÇÃO ELETRÔNICA

DIVISÃO DE SUPORTE TÉCNICO

HyperText Markup Language - HTML Página 38

Trabalhando com Tabelas na linguagem HTML

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 :

<TABLE BORDER> <CAPTION> Exemplo de Tabela </CAPTION> <TR> <TH>Título da Linha 1</TH> <TD>Coluna 1 da Linha 1</TD> <TD>Coluna 2 da Linha 1</TD> </TR> <TR> <TH>Título da Linha 2</TH> <TD>Coluna 1 da Linha 2</TD> <TD>Coluna 2 da Linha 2</TD> </TR> </TABLE>

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.

UNIVERSIDADE FEDERAL DO PARANÁ CENTRO DE COMPUTAÇÃO ELETRÔNICA

DIVISÃO DE SUPORTE TÉCNICO

HyperText Markup Language - HTML Página 39

+ Exemplos de Tabelas em páginas Web

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

UNIVERSIDADE FEDERAL DO PARANÁ CENTRO DE COMPUTAÇÃO ELETRÔNICA

DIVISÃO DE SUPORTE TÉCNICO

HyperText Markup Language - HTML Página 40

Marcações Importantes

Marcações Necessárias Significado

<HTML> </HTML> Declara um documento HTML

<HEAD> </HEAD> Indica Cabeçalho de um documento

<TITLE> </TITLE> Indica Título do documento

<BODY> </BODY> Indica Corpo do documento

Cabeçalhos, Estilos, geral ... Significado

<H1-6> </H1-6> Seis níveis de cabeçalhos

<STRONG> </STRONG> Aplica negrito

<EM> </EM> Dá ênfase ao texto

<CITE> </CITE> Usada para citação

<P> </P> Parágrafo

<BR> Quebra de linha

<PRE> </PRE> Aplica Texto Pré-formatado

<HR> Aplica um traço horizontal

<!-- texto de comentário Define linha de comentários

Âncoras e Ligações Significado

<A HREF=”objetivo”>Texto</A> Âncora de hyperlink

<A NAME=”ponto”> Marca um ponto no documento

<A HREF=”ponto#objetivo”>Texto</A> Hyperlink àquele ponto no documento

<A HREF=”URL”>Texto</A> Hyperlink a um endereço URL

UNIVERSIDADE FEDERAL DO PARANÁ CENTRO DE COMPUTAÇÃO ELETRÔNICA

DIVISÃO DE SUPORTE TÉCNICO

HyperText Markup Language - HTML Página 41

Listas Significado

<UL> </UL> Lista Não Ordenada

<OL> </OL> Lista Ordenada (numerada)

<LI> </LI> Itens individuais de uma lista

<DL> </DL> Determina uma lista de Definição

<DT> </DT> Termo em uma lista de Definição

<DD> </DD> Definição do termo

Inclusão de Imagens Significado

<IMG SRC=”filename”> Aplica o nome do arquivo de imagem<IMG ALT=”txt_alter” SRC=”filename> Texto para browser não gráficos

<IMG ALIGN=”alinhamento”...> Alinha imagem em relação ao texto

<IMG ...ISMAP> Imagem passa a ser um mapa clicável<A HREF=”URL”><IMG...></A> Imagem passa a ser um hyperlink

URL (Uniform Resource Locators) Significado

http HyperText Transfer Protocol

ftp File Transfer Protocol

gopher protocolo Gopher

telnet protocolo Telnet

news protocolo UseNet News

wais Wide Area Information Server

mailto E-Mail (Correio Eletrônico)

file para acessar arquivo na máquina local

UNIVERSIDADE FEDERAL DO PARANÁ CENTRO DE COMPUTAÇÃO ELETRÔNICA

DIVISÃO DE SUPORTE TÉCNICO

HyperText Markup Language - HTML Página 42

Tabelas Significado

<TABLE> </TABLE> Declara uma tabela

<TD> </TD> Declara um dado na tabela (célula)

<TH> </TH> Declara Cabeçalho da tabela

<TR> Fim da linha da tabela

<TH-D ALIGN=LEFT/RIGHT> Alinha cabeçalho ou dados da tabela

<TH-D COLSPAN=n> Largura da col. de cabeçalho ou dados

<TH-D ROWSPAN=n> Largura da lin. De cabeçalho ou dados

<CAPTION> Título da tabela

UNIVERSIDADE FEDERAL DO PARANÁ CENTRO DE COMPUTAÇÃO ELETRÔNICA

DIVISÃO DE SUPORTE TÉCNICO

HyperText Markup Language - HTML Página 43

Códigos HTML para Caracteres Acentuados

&aacute á &ucirc û

&eacute é &Acirc Â

&iacute í &Ecirc Ê

&oacute ó &Icirc Î

&uacute ú &Ocirc Ô

&Aacute Á &Ucirc Û

&Eacute É &auml ä

&Iacute Í &euml ë

&Oacute Ó &iuml ï

&Uacute Ú &ouml ö

&agrave à &uuml ü

&egrave è &Auml Ä

&igrave ì &Euml Ë

&ograve ò &Iuml Ï

&ugrave ù &Ouml Ö

&Agrave À &Uuml Ü

&Egrave È &atilde ã

&Igrave Ì &otilde õ

&Ograve Ò &Atilde Ã

&Ugrave Ù &Otilde Õ

&acirc â &ntilde ñ

&ecirc ê &Ntilde Ñ

&icirc î &ccedil ç

&ocirc ô &Ccedil Ç

UNIVERSIDADE FEDERAL DO PARANÁ CENTRO DE COMPUTAÇÃO ELETRÔNICA

DIVISÃO DE SUPORTE TÉCNICO

HyperText Markup Language - HTML Página 44

Referências Bibliográficas

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

[5] SMITH, J.B., WEISS, S.F., “Hypertext”, Communications of the ACM, Vol.31, N.7,

pp.816-819,July/88.

Outras Bibliografias Pesquisadas

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.