HISTÓRIA DA INTERNET



Internet

Índice

História da Internet 3

O que é a Internet 3

Como a Internet Funciona 6

Protocolos da Internet 7

Recursos na Internet 9

Navegadores da WEB 11

URL 11

Organização do Conteúdo 13

Formas de Organização 15

A Linguagem HTML 17

Tags 18

Estrutura de um Página 18

Formatação de Texto 20

Definição de Listas 27

Imagens 31

Tabelas 35

Links 39

Frames 42

Áudio e Vídeo 46

Novas Tecnologias 48

Validando seu Site 49

Divulgação e Cadastramento em Catálogos 49

Dicas 50

HISTÓRIA DA INTERNET

A Internet começou no início de 1969 sob o nome ARPANET (USA). Composta de quatro computadores tinha como finalidade, demonstrar as potencialidades na construção de redes usando computadores dispersos em uma grande área. Em 1973, 50 universidades e instituições militares tinham conexões.

Hoje é uma teia de redes diferentes que se comunicam entre si e que são mantidas por organizações comerciais e governamentais. Mas, por mais estranho que pareça, não há um único proprietário que realmente possua a Internet. Para organizar tudo isto, existem associações e grupos que se dedicam para suportar, ratificar padrões e resolver questões operacionais, visando promover os objetivos da Internet.

O que é a Internet

A Internet é hoje uma coleção de milhares de computadores que interligam milhões de computadores. Estes são utilizados por cerca de 40 milhões de usuários que compartilham um meio comum permitindo a interação entre eles para a troca de informações digitalizadas. Esta rede cresce atualmente a uma taxa de 8% ao mês.

A Internet pode ser vista como um enorme espaço destinado à troca de informações. Por esta razão, ela tem sido chamada de CyberSpace ou por outras designações semelhantes.

Os benefícios da Internet podem ser descritos, numa primeira aproximação, através dos seguintes itens:

➢ Pode-se trocar informações de forma rápida e conveniente;

➢ Pode-se ter acesso a especialistas em milhares de especialidades;

➢ Pode-se obter atualizações constantes sobre tópicos de interesse;

➢ Pode-se disponibilizar dados pessoais ou institucionais para uma enorme audiência;

➢ Pode-se formar equipes para trabalhar em conjunto independentemente de distâncias geográficas;

➢ Pode-se ter acesso a várias formas de arquivos e repositórios de informações;

➢ Pode-se traduzir e transferir dados entre máquinas localizadas em locais quaisquer;

Aos benefícios mencionados, também ajuda na caracterização, a apresentação de alguns fatos sobre o que a Internet é e o que ela não é:

➢ A Internet é, simultaneamente, uma entidade local e internacional que permite a interação entre usuários separados por uma parede de escritório ou por um oceano;

➢ A Internet não é um hardware ou um software específico;

➢ A Internet não é uma rede de computadores única, mas um grupo de redes organizadas logicamente (mas não fisicamente) segundo uma hierarquia;

➢ A Internet não é propriedade de ninguém: de nenhum governo, corporação ou grupo de universidades;

➢ A Internet não é igual em todos os lugares (homogênea). Ao contrário, ela varia significativamente de local para local (heterogênea);

➢ Algumas das redes que formam a Internet podem ser restritas à educação e pesquisa, mas a Internet, em geral, não faz restrições a usos comerciais apropriados;

➢ A Internet não é a Information Superhighway. Causou-se muita confusão com toda a publicidade em torno deste projeto do governo americano. O projeto ainda não é uma realidade, diferentemente da Internet. O único consenso sobre o projeto é que ele pretende ser uma rede de comunicação de altíssima velocidade que usará novas tecnologias para transportar dados de computadores, televisão e serviços de telefone em uma única linha. Este projeto poderá ou não se integrar a Internet.

➢ A Internet é um mercado global sem limites. Não há duvidas de que estamos entrando em uma era em que negócios serão realizados entre companhias e seus clientes através de redes de computadores. O marketing no mercado global da Internet é totalmente diferente do que é utilizado na imprensa escrita, falada e televisiva. Também não há lugar para telemarketing na Internet. Só pessoas e companhias que assimilaram a cultura Internet estão sendo bem sucedidas ao fazer negócios na rede.

Prosseguimos esta caracterização da Internet, enumerando as coisas que os usuários da comunidade Internet fazem mais freqüentemente na rede:

➢ Os usuários da rede mandam e recebem mensagens eletrônicas (email) para todas as partes do mundo. Por exemplo, o email está sendo utilizado para viabilizar a comunicação entre empresas de todo o mundo. Estudantes estão aprendendo a se comunicar via email com outros estudantes pelo mundo para obter informações sobre trabalhos e projetos. Pesquisadores localizados em diferentes países colaboram em projetos complexos usando email. O correio eletrônico está reestruturando a forma pela qual as pessoas se comunicam em todo o mundo.

➢ Os usuários da rede discutem tópicos, compartilham informações e buscam apoio para a solução de seus problemas na Internet.

➢ Membros da comunidade Internet participam de discussões sobre dezenas de milhares de tópicos através de áreas da Internet conhecidas por Usenet e através do que se convencionou chamar de listas de endereços eletrônicos. Através dos grupos de notícias da Usenet (newgroups) os usuários colocam questões para outros usuários ao redor do mundo que compartilham dos mesmos interesses. O espírito peculiar e a natureza cooperativa da Internet fazem com que um completo estranho gaste alguns minutos redigindo uma resposta para um novo correspondente.

➢ Os usuários da rede tem acesso a arquivos de dados, incluindo som, imagem e texto e a mecanismos de busca de informação na rede.

➢ A Internet causa a impressão de ser a maior biblioteca do mundo, sendo, de fato, um banco de dados on-line com tal escopo e alcance que permite o acesso a maior quantidade de informação a qual o ser humano jamais teve acesso.

Os usuários da rede navegam ou surfam (terminologia bastante usual na atualidade) na rede para fins de entretenimento. Viajando de local para local e de país para país usando o modem o usuário pode, num dado momento, estar revendo os mapas do metrô de Tóquio em um computador em Paris e em outro estar lendo os resultados dos campeonatos regionais de futebol que estão ocorrendo no Brasil ou na Inglaterra.

Os usuários da rede também consomem o seu tempo afixando notícias (newletters) ou gerando recursos para rede.

Qualquer membro da comunidade Internet pode ser um provedor de informações (Information provider). Todos podem contribuir. Se alguém decide criar um espaço na rede (site) para divulgar as atividades de uma universidade ou grupo de pesquisas, a tecnologia para implementar este recurso está disponível e é simples. Se uma empresa resolve colocar na rede a sua presença institucional e seus catálogos de produto e dar assistência técnica, ela pode fazê-lo. Se os recursos colocados na rede são públicos (e uma enorme quantidade dele) é a divulgação desses recursos é totalmente livre. Se os recursos serão comercializados a empresa precisa compreender muito bem que estratégias de marketing são aceitáveis pela comunidade Internet.

Como a Internet Funciona

Cada host possui um endereço próprio e único. Um endereço na Internet (endereço IP) = 32 bits divididos em 2 partes:

1. identifica a rede onde está o host

2. identifica o host dentro da rede.

Endereço IP - Cada byte (8bits) é representado no sistema decimal e separados por um ponto (.)

Ex: 200.17.210.65 e 200.17.210.101, onde 200.17.210 endereço da rede

e 65 e 101 endereço do host

IP’s são distribuídos pelo NIC (Network Information Center) e no Brasil são repassados pela FAPESP. Como é mais fácil lembrar de nomes do que de números, ao configurar um sistema, o administrador dá nomes aos hosts.

O nome de um host é composto :

← domínio (organização ou nacionalidade) Top Level Domain

← subdomínio (divisão ou Depto dentro da organização)

← hostname (nome do computador dentro do subdomínio)

DNS - traduz nome em endereço IP e vice-versa.

Cada organização mantém uma tabela dos seus domínios e subdomínios.

Domínios Especiais nos EUA:

(.gov - rede governamental (.mil - rede militar

(.edu - rede educacional (.net - organização da rede

( org - rede não governamental (.com - rede comercial

Domínio Principal ou Top Level Domain:

(.br - Brasil ( de - Alemanha (.jp - Japão, etc.....

Para utilizar todos os serviços disponibilizados na Internet, a pessoa deverá se inscrever como usuário de um computador conectado na Internet.

Ao se inscrever, a pessoa recebe uma identificação - login ou username. A partir daí, o usuário passa a ser identificado dentro da Internet como:

username@hostname.subdomínios.domínio

Essa identificação é denominada endereço eletrônico ou e-mail do usuário. Ex:.:

fulano@.br - Significa: usuário Fulano do host .br

Protocolos da Internet

Assim como temos nossas regras sociais de comunicação (por exemplo, em uma palestra somente uma pessoa fala; em uma assembléia, são várias as pessoas que falam e, mesmo assim, uma pessoa fala por vez), também os computadores precisam de algumas regras para trocar informações. No caso da Internet, essas regras básicas estão reunidas no conjunto de protocolos chamados TCP/IP.

IP

Na Internet cada computador tem um número IP próprio, assim como cada casa tem um endereço único.

Empresas que têm redes ligadas dia e noite na Internet possuem o que se chama acesso dedicado, isto é, as conexões de sua rede têm sempre um mesmo número IP na Internet.

Quando temos acesso à Internet através de um provedor, usamos o que se chama acesso discado, e nossa conexão com a Internet em geral ganha números IP diferentes a cada acesso. Mesmo assim, quando nosso computador se conecta ao provedor, o número IP atribuído a ele é único em toda a Internet.

TCP

Suponhamos que em dado computador existem vários programas se comunicando através da rede em um mesmo instante - por exemplo, uma página da Web sendo carregada enquanto se verifica a caixa postal. Como o computador "sabe" que a página da Web deve ir para o browser e os e-mails para o programa que lê e-mails? Isso é possível porque cada programa em execução recebe também seu endereço próprio dentro do computador: no caso de programas que se comunicam pela Internet, esse endereço é o número TCP.

Assim, continuando a comparação com endereços físicos, suponhamos que seu computador é um prédio de apartamentos com um dado número IP; seu browser e seu programa de e-mail seriam apartamentos distintos nesse prédio, cada qual com seu número TCP.

Outros Protocolos

Veremos que, para cada tipo de recurso disponível pela Internet, também existe um protocolo de comunicação específico, além do TCP/IP.

SLIP (Serial Line Internet Protocol) e PPP (Point-Point Protocol)

Protocolo que permite acesso a Internet, sendo um dos responsáveis pela popularização da rede. Está sendo substituído pelo PPP. Este tipo de conexão é a mais poderosa forma de acesso à rede por modem, pois o micro passa a ser um node da Internet e não mais um terminal remoto. Com este protocolo, você roda software no seu micro e este interage com as informações e outros computadores na Net.

HTTP ( Hypertext Transfer Protocol )

Este protocolo regula as comunicações na World Wide Web. Ele possui uma série de comandos que são transparentes para quem usa programas como: Mosaic, Cello e Web Explorer. O HTTP basicamente trata de transferências de arquivos entre duas máquinas. Estes arquivos são codificados em uma linguagem de Hipertexto chamada HTML ( Hypertext Markup Language ). Estes arquivos são as Home-Pages que estão cadastradas na Internet.

FTP (File Transfer Protocol )

A recuperação de arquivos localizados em computadores remotos é feito através de um software chamado FTP. Ele é utilizado para transferir documentos (software, texto, imagem e som) tornando-os disponíveis na Internet por indivíduos ou instituições.

Recursos na Internet

A Internet possui vários tipos de comunicação, e as vezes as pessoas acham que Web e Internet é uma coisa só. Conheça o que é e como pode ser usada cada forma de comunicação que existe na teia mundial de computadores.

As principais são:

➢ WEB

➢ FTP (File Transfer Protocol)

➢ Telnet

➢ Gopher

➢ Newsgroups

➢ Usenet

O que é a Web?

World Wide Web (abreviada como Web, W3 ou WWW) é o serviço mais popular da Internet. As principais vantagens dos serviços disponíveis na Web são interface gráfica, adequada para a troca de informações e documentos multimídia, documentos criados com facilidade que utilizam uma linguagem chamada HTML (Hypertext Markup Language - Linguagem de Marcação de Hipertexto) e documentos com estrutura de hiperlinks (palavras-chave ou imagens) que, quando clicadas, levam o usuário a outro documento.

Os documentos criados com esse tipo de estrutura são chamados de Hipertexto. O protocolo utilizado para a comunicação na Web é chamado de HTTP (Hypertext Transfer Protocol - Protocolo de Transferência de Hipertexto). Esse protocolo viabiliza o tráfego de documentos HTML na Internet. Os endereços na Web são conhecidos como URL (Uniform Resource Locator - Localizador Uniforme de Recursos) e sempre começam com http:// seguido do nome de domínio. Para pesquisar em um servidor Web, basta conhecer o URL correto do servidor e digitá-lo na barra de endereços do browser. Por exemplo: ínio, Exemplo de nome de domínio: .br.

O que é FTP?

FTP (File Transfer Protocol - Protocolo para Transferência de Arquivos) como o nome indica, é o protocolo utilizado para transferir arquivos através da Internet, ou seja, com ele é possível trazer arquivos para o seu computador (download) ou enviar arquivos (upload) para outros computadores. Muitos provedores disponibilizam uma área pública onde qualquer pessoa pode acessar sem precisar de senha. Uma prática bastante comum é colocar nessa área um banco de software com vários programas que podem ser úteis aos usuários da Internet. Quando você deseja hospedar um site na Internet, o upload dos arquivos que estão na sua máquina para o provedor de hospedagem é feito através de FTP. Para transferir arquivos da sua máquina para um servidor FTP é necessário um programa específico. Existem vários programas fáceis de usar, disponíveis gratuitamente na Internet. O endereço de um servidor FTP deve começar sempre com ftp:// Para fazer download através de FTP de uma área pública de um provedor, basta conhecer o URL correto do servidor e digitá-lo na barra de endereços do browser. Por exemplo: . Os browsers possuem limitações para lidar com FTP e permitem apenas download de arquivos. Quando for usar esse serviço, dê preferência para um software específico. Além de mais rápidos, permitem tanto download quanto upload de arquivos.

O que é Telnet?

Telnet é um serviço de comunicação através da Internet onde podemos nos conectar a outro computador e trabalhar remotamente como se estivéssemos sentados à sua frente. Só é possível usar Telnet para se comunicar com servidores. Para usar esse serviço é preciso conhecer o sistema operacional do computador que estamos conectando. Além disso, como o computador conectado pode ser vasculhado, esse tipo de serviço requer sistemas de segurança e o acesso só é possível através de senha. O Telnet requer o uso de software específico, já que os browsers, não permitem esse tipo de acesso.

O que é Gopher?

Gopher é um serviço muito útil na Internet mas pouco conhecido. É um banco de dados armazenado em um servidor que disponibiliza grande quantidade de informações em forma de arquivos de texto. A grande diferença entre o Gopher e a Web, é que ele não trabalha com hipertexto (linguagem HTML) e não aceita imagens e recursos multimídia. Serve como ferramenta de pesquisa para muitas universidades e bibliotecas no mundo inteiro.

Existe uma rede de servidores Gopher, chamada Veronica, em que, com uma única busca nessa rede é possível obter resultados pesquisados em computadores do mundo todo. O endereço de um servidor Gopher deve começar sempre com gopher:// Para pesquisar em um servidor Gopher, basta conhecer o endereço correto do servidor e digitá-lo na barra de endereços do browser. Não é necessário senha. Por exemplo: gopher://servidor:porta.

Toda tela de Gopher traz um link para a rede de servidores Veronica. Dê preferência aos servidores brasileiros pois são mais rápidos (por estarem mais perto) e também dão acesso à rede Veronica de consulta mundial.

O que são Newsgroups?

Newsgroups são grupos de discussão abertos, em que pessoas com interesses comuns compartilham dúvidas, opiniões e informações. Nesse meio de comunicação as mensagens são enviadas para um grupo de interesse e ficam disponíveis em computadores denominados news servers (servidores de notícias), onde cada pessoa acessa apenas os grupos de seu interesse.

O que é a Usenet?

A Usenet é uma rede formada por diversos News Server. Para utilizar a Usenet é preciso ter o endereço de news server fornecido pelo seu provedor de acesso. Geralmente um news server é designado como servidor NNTP (Network News Transfer Protocol - Protocolo de Transferência de Notícias em Rede), que é o protocolo usado para intercâmbio de mensagens entre os news server.

Navegadores da WEB

O acesso ao WWW é possível através dos "browsers", ou navegadores, programas que têm por finalidade :

← Transferir informações ( textos, imagens, som, vídeo ) entre o servidor e o cliente.

← Codificar as diretivas e apresentar no monitor.

← Iniciar a execução de arquivos de som e vídeo, caso existam, e se a instalação dispor dos programas necessários.

Possuem muitos recursos e funções que devem estar devidamente configuradas para permitir uma perfeita navegação.

Browsers mais utilizados: Netscape e Internet Explorer

URL

O sistema de endereçamento da Web é baseado em uma sintaxe chamada URI (Universal Resource Identifier - Identificador Universal de Recursos). Os endereços que utilizamos atualmente são os URLs, que seguem essa sintaxe.

URL significa Uniform Resource Locator - Localizador Uniforme de Recursos.

A primeira parte da URL (antes das duas barras) especifica o método de acesso. A segunda parte é tipicamente o endereço do computador, os dados ou a localização do serviço. Outras partes podem especificar nomes de arquivos, a porta a conectar, ou o texto para se buscar em um banco de dados.

Aqui estão alguns exemplos de URLs:

➢ - Recupera um arquivo de som e o reproduz.

➢ - Recupera uma imagem e a exibe, em um programa separado ou dentro de um documento.

➢ - Exibe o conteúdo de um diretório.

➢ - Conecta-se a um servidor HTTP e recupera um arquivo HTML.

➢ - Abre uma conexão FTP em endereço.do.site e recupera um arquivo texto.

➢ gopher://endereco.do.site - Conecta-se ao Gopher em endereço.do.site.

➢ telnet://endereco.do.site:1234 - Faz um Telnet em endereço.do.site na porta 1234.

➢ news:alt.hypertext - Conecta-se a um host de news (NNTP) e retorna os artigos no formato hipermídia.

Hiperlinks podem referenciar não somente outros textos e mídias, mas também a outros serviços de rede. Browsers Web não são simplesmente clientes Web, mas são também clientes FTP, Gopher e Telnet.

Organização do Conteúdo

O Que Pretende Divulgar?

Que tipo de conteúdo você pode apresentar na Web? Praticamente o que quiser. Eis aqui alguns tipos de conteúdo mais comuns na Web, no momento:

➢ Informações pessoais: informações sobre você, por exemplo.

➢ Hobbies ou interesses especiais: filmes, motocicletas, etc.

➢ Publicações: como jornais, revistas.

➢ Perfis de empresa: o que uma empresa faz ou vende, etc

➢ Documentação On-line: desde manuais, guias de treinamento, dicionários, etc.

➢ Catálogos de compras: comercialização de artigos.

➢ Lojas on-line.

➢ Pesquisas de opinião: a interatividade com o usuário através de formulários, caixas de sugestões, etc.

➢ Educação On-line: numerosas universidades, escolas e empresas particulares oferecem o ensino a distância através da Web.

O único limite da Web é a sua própria vontade. Por isso, se a sua idéia não estiver nesta lista ou parecer meio maluca ou ainda não estiver amadurecida, pare e navegue um pouco pela Internet. Com certeza encontra excelentes idéias e poderá amadurecer as suas e ter muitas outras.

Estabeleça seus Objetivos

Você deve se perguntar os que seus leitores procuram? O que deseja realizar com sua apresentação? Eles lerão a página inteira ou apenas uma parte dela?

Antes começar entrar com códigos ou imagens você deve pensar o que quero colocar em minha página? Como será estruturada? Ela está adequada ou não ao meu público alvo?

Os objetivos não precisam ser grandiosos, mas a determinação irá ajudá-lo a elaborar, organizar e codificar suas páginas com uma maior probabilidade de sucesso.

Caso vá desenvolver uma apresentação Web para uma empresa ou pessoas é importante que você colha junto ao seu cliente seus objetivos, idéias, a forma que imagina sua página, etc. Assim, ficará bem mais fácil de começar seu trabalho.

Divida seu Conteúdo em Tópicos

Crie uma lista com os principais tópicos, a princípio não importa a ordem. Esta é uma forma de começar a se organizar.

Sua lista poderá ter quantos tópicos desejar, mas se perca listando uma quantidade enorme de tópicos (seu leitor poderá se cansar e se perder em meio a tantas opções).

Organização e Navegação

Aqui descreverei algumas das estruturas e navegação e suas características e ainda considerações importantes como:

← Os tipos de informação que se adaptam melhor a cada estrutura.

← Como os leitores conseguem se deslocar pelo conteúdo de cada tipo de estrutura para encontrar as informações de que precisam .

← Como Ter certeza de que os leitores conseguem se localizar nos seus documentos (contexto) e achar o caminho de volta até uma posição conhecida.

Ao ler esta parte reflita como suas informações se encaixaria em cada uma. Você poderá combinar, até mesmo, duas estruturas e criar uma nova forma de navegação.

Formas de Organização

1. Hierarquias

A maneira mais fácil e mais lógica de estruturar os seus documentos. As hierarquias e os menus adaptam-se especialmente bem aos documentos on-line e de hipertexto. Exemplo: sistemas de ajuda.

Home Page

Em uma organização hierárquica, é fácil para os leitores descobrir a posição em que se encontram na estrutura. Nas hierarquias, a home page fornece uma visão geral do conteúdo que está subordinado a ela e ainda define os principais vínculos ás páginas dos níveis inferiores da hierarquia.

Este tipo de estrutura oferece um risco mínimo de ficar perdido, além de ser uma forma mais fácil de localizar informações. Mas procure não incluir muitos níveis para não aborrecer os leitores. Pois estes, após ter de selecionar opções em muitos menus, acaba esquecendo o que estava procurando. Fica aborrecido demais para prosseguir. Procure manter apenas dois ou três níveis na sua hierarquia.

2. Linear

Muito semelhante à forma como são organizados documentos impressos. Neste tipo de estrutura a home page é o título, ou introdução, e todas as outras páginas acompanham-na em seqüência com vínculos que levam de uma página a outra, normalmente com opções de avançar e retroceder.

Uma organização linear é muito rígida e limita tanto a liberdade dos seus leitores de consultar as informações quanto a sua própria liberdade de apresentá-las. As estruturas lineares são ideais para apresentar, no ambiente on-line, um material que já tenha esse tipo de estrutura no ambiente off-line. Como por exemplo: instruções passo-a-passo ou treinamento baseado em computador.

Estrutura Linear com Alternativas

Você pode tornar a estrutura linear menos rígida permitindo que o leitor se desvie do caminho principal. Pode ter, por exemplo, uma estrutura linear com ramificações alternativas que partam de um único tronco. As ramificações podem se reunir ao tronco principal em algum ponto mais adiante, em um nível mais baixo da estrutura, ou continuar se ramificando em níveis inferiores seguindo caminhos próprios até chegar a um "fim".

Além de ramificar a estrutura linear, você pode também oferecer vínculos que permitam aos leitores avançar ou retroceder na cadeia, caso precisem rever alguma etapa ou já conheçam alguma parte do conteúdo.

4. Combinação das Estruturas Linear e Hierárquica

Uma forma comum de organizar um documento na Web consiste em obter uma combinação das estruturas linear e hierárquica. Essa estrutura combinada ocorre com maior freqüência quando documentos de estrutura rígida, porém lineares, são apresentados no ambiente on-line. Um exemplo é os famosos FAQ (Frequently Asked Questions).

A combinação de documentos lineares e hierárquicos funciona bem desde que haja pistas em relação ao contexto.

Como essa é uma estrutura linear e hierárquica, em cada página do roteiro você deve oferecer vínculos para o leitor avançar, retroceder, retornar ao início e subir um nível.

A Linguagem HTML

Uma página é um hipertexto no World Wide Web que associa diferentes tipos de mídia como textos, imagens, áudio e vídeo, conectados por hiperlinks.

Pode ser única ou estar ligada logicamente a outras páginas formando um sistema de informações ou um site.

A página de entrada ou página inicial recebe o nome de "Home Page" .

A linguagem HTML (Hypertext Markup Language) é que nos permite criar home pages e disponibilizá-las no WWW da Internet.

Esta linguagem se utiliza diretivas que são interpretadas pelos browsers . Ao interpretar as diferentes diretivas temos a página apresentada respeitando a formatação de texto, cores e imagens definida pelo autor.

Não é possível programar em linguagem HTML, pois ela é simplesmente uma linguagem de marcação: ela serve para indicarmos formatações para textos, inserir imagens e ligações de hipertexto.

Os browsers são os responsáveis por identificar as marcações em HTML e apresentar os documentos conforme o que foi especificado por essas marcações.

Cuidado! Uma página pode ser apresentada de forma diferente por diferentes Browsers.

De acordo com Tim Beners-Lee, um dos criadores do World Wide Web, a linguagem foi definida para ser usada por processadores de texto e os autores de páginas não deveriam necessariamente conhecer as diretivas produzidas pelo processo de criação.

Atualmente a confecção de Home Pages tem se tornado um processo cada vez mais automático através da utilização de editores gráficos que apresentam as diretivas como ferramentas, permitindo assim que o autor crie uma página sem conhecer profundamente os códigos da linguagem HTML.

Além de Editores existem também programas Assistentes que transformam documentos gerados em MS Word, Power Point e Excel em páginas HTML.

Tags

Tags são comandos que a linguagem HTML lê e interpreta para executar determinada tarefa em uma página de um navegador (browser) da Web.

Na linguagem HTML, os tags são envolvidos pelos sinais "". Sendo que o "liga" ou "faça daqui" recebe os sinais "" e o "desliga" ou "até aqui" recebe os sinais "".

O caractere de divisão "/" no segundo tag indica finalização do texto ou tarefa solicitada no primeira tag.

Alguns elementos são chamados “vazios”, pois não marcam uma região de texto, apenas inserem alguma coisa no documento:

Todos os elementos podem ter atributos:

...

Estrutura de um Página

A estrutura de um documento HTML apresenta os seguintes componentes:

aula 1

*****************************************

** Escreva aqui o texto da sua home page

*****************************************

As tags e identificam que o documento é do tipo html, ou seja uma página web.

Basicamente um documento HTML é dividido em duas partes :

• Cabeçalho : onde especificamos o título da página e , esse é o mais importante e aparecerá na barra superior do browser. E finalizamos o cabeçalho com

• Corpo : nessa parte especificamos as cores de fundo, texto, links, e marcamos o início do documento propriamente dito.

Juntamente a tag podemos usar as seguintes opções, que não são obrigatórias, pois caso não existam assumem um valor default :

➢ bgcolor - especifica uma cor de fundo para a página

➢ background - especifica a imagem nos formatos .jpg ou .gif usada de fundo da página

➢ text - define uma cor para o texto

➢ link - define uma cor para os links

➢ vlink - define cor para os link já visitados

➢ alink - define a cor para o link na hora que for ativado

Como o HTML não é uma linguagem de programação, você nunca será avisado de erros que tenha cometido na edição do seu documento. O simples esquecimento de uma barra pode gerar efeitos colaterais inesperados na visualização de uma página, e estes efeitos colaterais serão o único sinal de que algo está errado.

O arquivo inicial de uma home page sempre tem nome index.htm

Ao nomear um nome de arquivo, lembre-se que o ideal é que o nome tenha no máximo 8 caracteres e todos em minúsculo.

Formatação de Texto

Blocos de Texto

HTML oferece as seguintes formatações de blocos de texto:

Apresenta o texto na mesma maneira em que foi digitado, mantendo quebras de linha e tabulações:

Exemplo:

|Comando HTML |Resultado: |

|uma linha aqui, |uma linha aqui, |

|outra ali, |outra ali, |

|etc. |etc. |

Uma vez que mantém o texto original, não se deve forçar espaços com essa marcação dentro de outra marcação que já apresente tabulações e espaços específicos.

Até o momento, somente como uso de é possível gerar parágrafos com texto justificado à esquerda e à direita.

É usado para citações longas:

Exemplo:

A massa do Sol arqueia o espaço-tempo de tal maneira que, ainda que a Terra siga uma trajetória reta no espaço-tempo quadridimensional, parece-nos que se desloca em órbita circular no espaço tridimensional. (Stephen W. Hawking, “Uma Breve História do Tempo”)

Resultado:

A massa do Sol arqueia o espaço-tempo de tal maneira que, ainda que a Terra siga uma trajetória reta no espaço-tempo quadridimensional, parece-nos que se desloca em órbita circular no espaço tridimensional.

(Stephen W. Hawking, “Uma Breve História do Tempo”)

Usado para formatar endereços E-mail e referências a autores de documentos:

Exemplo:

Envie críticas e sugestões para info@.br

Resultado:

Envie críticas e sugestões para

infocio@.br

Cabeçalhos

Há seis níveis de cabeçalhos em HTML, de a :

Este é um cabeçalho de nível 1

Este é um cabeçalho de nível 2

Este é um cabeçalho de nível 3

Este é um cabeçalho de nível 4

Este é um cabeçalho de nível 5

Este é um cabeçalho de nível 6

Esses cabeçalhos são mostrados da seguinte forma:

Este é um cabeçalho de nível 1

Este é um cabeçalho de nível 2

Este é um cabeçalho de nível 3

Este é um cabeçalho de nível 4

Este é um cabeçalho de nível 5

Este é um cabeçalho de nível 6

Atributos do Cabeçalho

Os cabeçalhos têm atributos de alinhamento:

Cabeçalho centralizado

Cabeçalho centralizado

Cabeçalho alinhado à direita

Cabeçalho alinhado à direita

Cabeçalho alinhado à esquerda (default)

Cabeçalho alinhado à esquerda (default)

Acentuação e Caracteres Especiais

Os acentos e alguns caracteres especiais são tratados de uma maneira diferente na Web, pelo fato de que nem todos os computadores ligados à Internet estão configurados para visualizar os acentos. Existe uma codificação que permite a qualquer equipamento interpretar os códigos e exibir na tela o caracter desejado. Vale lembrar que hoje em dia a maioria dos browsers entende os acentos.

Os códigos funcionam na seguinte maneira :

• Primeiro colocamos o caracter "&"

• Em seguida a letra que deverá ser acentuada, pode ser minúscula ou maiúscula

• De acordo com a tabela abaixo coloque o código do acento desejado

• Por fim acrescente o caracter " ; " ( ponto de vírgula )

Exemplos :

diário = diário

natação = natação

seqüência = seqüência

Caracteres Especiais

|Entidade |Caracter | |Entidade |Caracter |

|< |< | |® |® |

|> |> | |§ |§ |

|& |& | |  |Espaço em branco |

|© |© | | | |

Acentuação

|Entidade |Caracter | |Entidade |Caracter |

|á |á | |Á |Á |

|â |â | |Â |Â |

|à |à | |À |À |

|ã |ã | |Ã |Ã |

|ç |ç | |Ç |Ç |

|é |é | |É |É |

|ê |ê | |Ê |Ê |

|í |í | |Í |Í |

|ó |ó | |Ó |Ó |

|ô |ô | |Ô |Ô |

|õ |õ | |Õ |Õ |

|ú |ú | |Ú |Ú |

|ü |ü | |Ü |Ü |

Por que usar essas formatações?

Os browsers costumam também mostrar corretamente os caracteres acentuados normalmente - á em lugar de á, por exemplo. Essa prática, embora facilite sobremaneira a digitação dos documentos, não é recomendada, devido a um problema relativo à transmissão desses caracteres.

Chama-se conjunto de caracteres uma representação digital de texto. O conjunto de representação amplamente utilizado é o ASCII. O ASCII padrão tem 7 bits, porém o que se usa são versões particulares desse padrão - o ASCII americano, ASCII português, etc., que usam 8 bits. Se geramos um texto em ASCII de 8 bits e, na transmissão, esse texto é tratado por um sistema que “compreende” apenas o ASCII de 7 bits, os caracteres especiais serão transformados em caracteres diferentes, pela perda do 8o. bit.

Os usuários da Internet já devem ter sofrido experiência semelhante com mensagens de e-mail.

Na World-Wide Web, os acentos da Língua Portuguesa chegam a travar os browsers de usuários em outros países, que usam um conjunto de caracteres diferente do ISO Latin 1.

Estilos

Quando disponível no browser, é mostrado em negrito (em alguns browsers, pode aparecer sublinhado)

Itálico (em alguns casos, caracteres apenas inclinados)

Tipo teletype - fonte de espaçamento fixo.

Sublinhado; deve ser usado com cuidado, pois confunde-se com a apresentação de links.

ou Frase riscada (exemplo: curso).

Fonte um pouco maior.

Fonte um pouco menor.

Frase em estilo índice, como em H2O.

Frase em estilo expoente, como em Km2.

Cores e Fontes

Cores

As cores são introduzidas através do elemento , usando o sistema RGB para cores (da mesma forma que vimos para cores de documentos):

Cada cor pode ter um valor que variar de 0 a 255 ( #00 a #FF)

Ex: #000000 ( Preto #FF0000 ( Vermelho #00FF00 ( Verde

#0000FF ( Azul #FFFFFF ( Branco

As cores podem ser definidas com seus respectivos nomes em inglês ou através do código hexadecimal.

Texto

Assim, um trecho de texto pode ter uma cor diferente da definição geral de cores, feita através dos atributos de .

Parágrafos

Para separar blocos de texto, usamos o elemento :

|Exemplo: |Resultado: |

| | |

|Parágrafo 1;Parágrafo 2. |Parágrafo1; |

| |Parágrafo2. |

Atributos de Alinhamentos

Assim como os trens, as boas idéias às vezes chegam com atraso. (Giovani Guareschi)

Assim como os trens, as boas idéias às vezes chegam com atraso.

(Giovani Guareschi)

Como diz o provérbio chinês: “É melhor passar por ignorante uma vez do que permanecer ignorante para sempre”.

Como diz o provérbio chinês: “É melhor passar por ignorante uma vez do que permanecer ignorante para sempre”.

Este é o alinhamento padrão (default), e por isso não vou colocar nenhuma frase especial.

Este é o alinhamento padrão (default), e por isso não vou colocar nenhuma frase especial.

Linha Horizontal

A tag insere uma linha horizontal:

Essa linha tem diversos atributos, oferecendo resultados diversos.

insere uma linha que ocupa 50% do espaço disponível:

insere uma linha de comprimento 30% (do espaço disponível), alinhada à direita, sem efeito tridimensional:

Marquee

É possível obter o efeito de animação de texto, através da formatação .

Texto

Atributos de largura e direção do efeito permitem diversas apresentações diferentes. Por exemplo (o efeito só é visto através do Internet Explorer):

Texto

[pic]

Texto

[pic]

Texto

[pic]

Blink

Blinks são um perigo!

A formatação frase foi uma das primeiras inovações introduzidas pelo Netscape. O perigo de se usar o BLINK é que, se sua página já apresenta cores, desenhos, cabeçalhos, todos efeitos que chamam a atenção do leitor, o BLINK será ainda mais um fator chamativo, o que causa um efeito final cansativo e confuso.

Evite usar o BLINK; ao usá-lo, aplique somente em pequenos detalhes (palavras ou flechinhas), nunca em grande número, muito menos em frases inteiras ou cabeçalhos.

E, se você já está ficando neurótico com o pisca-pisca dos exemplos de BLINK desta página, melhor mudar para outro assunto! ;-)

Definição de Listas

As listas são utilizadas para organizar seu texto quando for necessário uma relação de itens e subitens, ordenados ou não. Existem três tipos de listas :

➢ Listas Ordenadas,

➢ Listas Não-Ordenadas

➢ Listas de Definição.

Listas Ordenadas

- inicia uma lista

|type - define o tipo de numeração da lista |A - Letras maiúsculas |

| |a - Letras minúsculas |

| |I - Algarismos romanos |

| |1 - Números arábicos |

- determina um item da lista

- finaliza a lista

Exemplo :

|Código html: |Resultado: |

| |Primeiro |

|Primeiro |Segundo |

|Segundo |Terceiro |

|Terceiro | |

| | |

Estas listas não apresentam numeração em formato 1.1, 1.2 etc., quando compostas:

1. Documentos básicos

2. Documentos avançados

1. formulários

1. CGI

2. contadores

3. relógios

2. Detalhes sobre imagens

Porém, através do atributo TYPE (HTML 3.2), pode-se lidar com a numeração dos itens:

|Código html: |Resultado: |

| |Documentos básicos |

|Documentos básicos |Documentos avançados |

|Documentos avançados |formulários |

| |CGI |

|formulários |contadores |

| |relógios |

|CGI |Detalhes sobre imagens |

| | |

|contadores | |

|relógios | |

| | |

|Detalhes sobre imagens | |

| | |

Ainda segundo HTML 3.2, o atributo START pode indicar o início da numeração da lista:

|Código html: |Resultado: |

| |um item |

|um item |outro item |

|outro item |mais um item |

|mais um item | |

| | |

Listas Não-Ordenadas

- marca o início da lista

|type - define o tipo de marcador de cada item da lista |disk - pequeno disco sólido |

| |square - quadrado preenchido |

| |circle - círculo cheio |

| | |

- determina um item da lista

- marca o final da lista

Exemplo :

|Código html |Resultado |

| |Primeira |

|Primeira |Segunda |

|Segunda |Terceira |

|Terceira | |

|> | |

A diferença está na mudança dos marcadores, assinalando os diversos níveis de listas compostas:

|Código html |Resultado |

| |Documentos básicos |

|Documentos básicos |Documentos avançados |

|Documentos avançados |formulários |

| |CGI |

|formulários |contadores |

| |relógios |

|CGI |Detalhes sobre imagens |

| | |

|contadores | |

|relógios | |

| | |

|Detalhes sobre imagens | |

| | |

Listas de Definição

Estas listas são chamadas também “Listas de Glossário”, uma vez que têm o formato:

marca o início da lista

indica termo a ser definido

indica a definição do termo acima

Exemplo:

|Código html |Resultado |

| |Listas |

|Listas |Ordenadas |

|Ordenadas |Não Ordenadas |

| Não Ordenadas |Definição |

|Definição | |

| | |

Listas e “sub-listas”

As listas podem ser aninhadas. Por exemplo:

|Código html |Resultado |

| |termo a ser definido |

|termo a ser definido |definição |

|definição |item de uma lista numerada |

| |item de uma lista numerada |

|item de uma lista numerada |item de uma lista |

|item de uma lista numerada |item de uma lista numerada |

| |termo a ser definido |

|item de uma lista |definição |

| | |

|item de uma lista numerada | |

| | |

|termo a ser definido | |

|definição | |

| | |

Observações

1) Boa parte dos editores HTML (WYSIWYG ou não), insere marcações que não existem em listas. Exemplos típicos são , e . Porém, como essas etiquetas não são reconhecidas pelos browsers, não causam efeito colateral algum nos documentos.

2) Nestes exemplos, o texto fonte aparece tabulado apenas para efeito de melhor visualização, uma vez que já foi visto que os espaços em branco e tabulações originais não têm efeito no documento final.

3) Se você não está vendo diferença alguma entre as listas comuns e as que têm atributos de HTML 3.2, isso se deve ao fato de seu browser não estar reconhecendo esses atributos como válidos. Trata-se de um browser de versão antiga. Isso deve ser pensado quando usamos atributos mais recentes: nem todo usuário poderá ver o resultado das novas marcações.

Imagens

A tag IMG insere imagens que são apresentadas junto com os textos. Um atributo SRC deve estar presente, da seguinte forma:

onde URL_imagem é o URL do arquivo que contém a imagem que se quer inserir; pode ser referenciada uma imagem que esteja em um outro servidor (o que, logicamente, não é conveniente).

Assim, escrevendo:

Inserimos a figura ao lado no documento.

As imagens usadas na Web são armazenadas em arquivos com extensão *.gif, *.xbm, *.jpg (ou *.jpeg).

Alinhamento de Imagens

Para alinharmos uma imagem, basta usarmos o atributo dentro do tag . O alinhamento padrão é sempre à esquerda. (O alinhamento tanto tem a ver com a disposição dela na tela, como também, com os textos que estão ao redor)

ALIGN="TOP" - Este atributo alinha o texto adjacente com o topo da imagem.

(Com linhas muito compridas o resultado não fica muito bom)

EX:

ALIGN="BOTTOM" - Este atributo alinha o texto adjacente com o rodapé da imagem.

(Com linhas muito compridas o resultado não fica muito bom)

EX:

ALIGN="MIDDLE" - Este atributo alinha o texto adjacente com o meio da imagem.

(Com linhas muito compridas o resultado não fica muito bom)

EX:

ALIGN="RIGHT" - Este atributo alinha a imagem à direita, e tudo que houver ao redor.

(É preciso testar o resultado, para ver se resulta o efeito desejado no browser)

EX:

ALIGN="LEFT" - Este atributo alinha a imagem à esquerda, e tudo que houver ao redor.

(é preciso testar o resultado, para ver se resulta o efeito desejado no browser)

EX:

CLEAR="ALL" - Este atributo é utilizado dentro da tag , e serve para interromper o fluxo de texto ao lado da imagem, ou seja, interrompe o atributo ALIGN.

EX:

Texto Alternativo para Imagem

De nada adiantará você caprichar em sua home page, inserindo imagens, gifs, fotos e etc., se a pessoa que está vendo as páginas utiliza um navegador incapaz de mostrar imagens (eles existem, e muitas pessoas utilizam, o linux é um deles). Existem usuários também que ajustam o navegador para não carregar imediatamente as imagens. É ai que entra, o texto alternativo, colocamos um título ou uma descrição da imagem com o atributo ALT, e a pessoa escolhe as imagens que quer carregar. Esse atributo comporta até 256 caracteres, contando com os espaços. Mas calma, não vá exagerar!

O atributo ALT:

Utilizamos o atributo ALT, dentro da tag . Ele ser para exibir o texto definido neste atributo quando paramos com o mouse em cima da imagem.

Dimensões de Imagens

O atributo WIDTH:

Este atributo é usado dentro do tag , e faz com que a imagem aumente ou diminua para os lados esquerdo e direito. (largura).

O atributo HEIGHT:

Este atributo também é usado dentro do tag , e faz com que a imagem aumente ou diminua para cima e para baixo. (altura)

EX:

Personalizando o Segundo Plano

O atributo BACKGROUND:

Com certeza você deve morrer de vontade de que o fundo de sua página seja diferente, com fotos ou texturas diferentes. A maioria das pessoas preferem adicionar texturas, pois fotos demoram demais a serem carregadas. Para acrescentar uma textura ou uma foto em seu fundo da página, é necessário que você tenha o arquivo pronto e com extensão .gif ou .jpg, tendo isso você utiliza o atributo BACKGROUND, na tag .

EX:

Essa textura se multiplicará, formando um fundo de página com o aspecto de um vôo pelo espaço. O nome do arquivo dessa textura é "espaço.gif" e para você inserí-la em sua página, clique com o botão direito do mouse e escolha "Salvar figura como" e salve no diretório de sua preferência. Insira essa figura na sua página e veja o resultado.

Figuras JPEG

JPEG é um padrão internacional, proposto pelo comitê ISO “Joint Photographers Expert Group”.

Esse formato permite a transferência de arquivos por uma grande variedade de plataformas. JPEG é baseado em codificação da imagem por transformação matemática, o que oferece altas taxas de compressão, embora haja perda de informações.

JPEG pode comprimir imagens até um quinto (1/5) do tamanho original, sem perda de qualidade perceptível. Arquivos de imagens que seguem este formato têm extensão .jpeg ou .jpg.

Figuras GIF

Chamamos GIF (em geral, lê-se "guif") as imagens (ícones, ilustrações, e outras) apresentadas nas páginas WWW.

GIF é a breviação de “Graphics Interchange Format”, desenvolvido pela CompuServe para transmissão de imagens por linhas discadas. Este formato usa codificação LZW (Lempel-Ziv and Welsh) para comprimir imagens e assim reduzir tempos de transmissão. Imagens que seguem este formato são armazenadas em arquivos de extensão .gif.

Os formatos GIF mais recentes são os GIF87a e GIF89a.

Exemplos comparativos de imagens GIF e JPEG

O primeiro exemplo compara uma imagem digital, gerada por uma câmera de vídeo, e armazenada segundo os formatos GIF e JPEG:

|[pic] |[pic] |

|Imagem GIF: 21KB |Imagem JPEG: 6KB |

Embora neste exemplo a imagem final não pareça sofrer muito a diferença de compactação, vemos que o formato JPEG lidou melhor com a complexidade da imagem (tons de cor), gerando um arquivo bem menor - e isso será refletido na velocidade de carregamento da imagem.

O segundo exemplo mostra duas imagens simples:

|[pic] |[pic] |

|Imagem GIF: 2KB |Imagem JPEG: 5KB |

Além do formato JPEG ter gerado um arquivo maior, a imagem ficou um pouco borrada ao das linhas pretas. É um exemplo de que o formato JPEG "não serve" para imagens em cores lisas.

Tabelas

As tabelas ajudam na organização e melhor visualização de uma página HTML. Há páginas cuja diagramação é inteiramente baseada em tabelas, pois como ainda não existem formas mais sofisticadas de controlar o posicionamento de imagens e texto, o uso de tabelas tornou-se um recurso essencial para dispor os elementos da página de maneira mais criativa.

As tabelas são compostas de linhas, dentro das quais são colocadas células com o conteúdo. Dentro das células pode-se colocar o texto, imagens ou até mesmo outras tabelas. Uma linha pode conter várias células, tornando-se então uma tabela com várias colunas.

Os tags para construir uma tabela são:

➢ ... : para indicar o início e o fim de uma tabela.

➢ ... : para indicar o início e o fim de uma linha

➢ ... : para indicar o início e o fim de uma célula-título.

➢ ... : para indicar o início e o fim de uma célula.

➢ . . . : define o título da tabela

A única diferença entre o tag e é que o primeiro marca o texto da célula com ênfase. Os navegadores interpretam essa ênfase como negrito, mas a ênfase também pode ser conseguida com tags como e .

Não é obrigatório colocar os tags de fechamento dos elementos da tabela (, e ), mas estes tags são úteis para entender melhor a estrutura de linhas e células. Nos exemplos seguintes adicionamos uma borda à tabela. O atributo da borda é colocado dentro do tag .

|Código em HTML |

| |

| |

| |

| |

|Célula 1 |

|Célula 2 |

| |

| |

|Célula 3 |

|Célula 4 |

| |

| |

| |

Resultado:

|Célula 1 |Célula 2 |

|Célula 3 |Célula 4 |

O exemplo acima mostra uma tabela com duas linhas e duas colunas. O número de colunas é definido pelo número de células presentes nas linhas.

É possível expandir as células para que elas ocupem o espaço de mais de uma coluna ou linha.

Célula expandida

Célula 1 Célula 2

Célula 3 Célula 4

Veja como ficou:

|Célula expandida |

|Célula 1 |Célula 2 |

|Célula 3 |Célula 4 |

Ou

Célula expandida

Célula 1Célula 2

Célula 3Célula 4

Veja como ficou:

|Célula expandida |Célula 1 |Célula 2 |

| |Célula 3 |Célula 4 |

A solução necessária para fazer uma célula expandida é diferente em cada um dos exemplos anteriores. No caso da célula expandida na largura de duas colunas, ela ficou em uma linha diferente das células 1 e 2. No segundo exemplo, para deixar a célula expandida da altura de duas linhas foi preciso colocá-la na mesma linha das células 1 e 2.

Dimensões da Tabela

Além de controlar a largura da borda (com o atributo BORDER), é possível definir as dimensões (em pixels) de toda a tabela, espaço entre células e as margens dentro das células. Todos esses controles são feitos através de atributos dentro do tag . Os atributos são:

➢ WIDTH: para definir a largura da tabela

➢ HEIGHT: para definir a altura da tabela

➢ CELLPADDING: para definir a margem dentro das células

➢ CELLSPACING: para definir o espaço entre as células

Alinhamento

Os elementos dentro da tabela podem ser alinhados da mesma forma que um parágrafo comum. Se nenhum alinhamento for definido, o conteúdo das células é alinhado horizontalmente, esquerda e verticalmente ao centro. Os atributos ALIGN (alinhamento horizontal) e VALIGN (alinhamento vertical) devem ser usados dentro dos tags e (além de , se for o caso). Os alinhamentos possíveis são:

Alinhamento horizontal:

▪ ALIGN="LEFT": alinha o conteúdo à esquerda;

▪ ALIGN="RIGHT": alinha o conteúdo à direita;

▪ ALIGN="CENTER": alinha o conteúdo ao centro.

Alinhamento vertical:

➢ VALIGN="BASELINE": mantém as linhas de texto com o mesmo alinhamento (para ser usado dentro de ou no primeiro de uma linha);

➢ VALIGN="TOP": alinha o conteúdo no topo;

➢ VALIGN="MIDDLE": alinha o conteúdo ao centro;

➢ VALIGN="BOTTOM": alinha o conteúdo na base da célula.

Cor de Fundo

Utilizamos o parâmetro bgcolor para aplicarmos uma cor de fundo. Este parâmetro poderá ser usado no TABLE, no TR ou no TD. Caso seja definida no Table, irá definir uma cor de fundo para a tabela. Se for no TR irá definir uma cor para a linha. E se for definido no TD irá definir uma cor para a célula.

Exemplo 1:

Célula 1 Célula 2

Célula 3 Célula 4

|Célula 1 |Célula 2 |

|Célula 3 |Célula 4 |

Exemplo 2:

Célula 1 Célula 2

Célula 3 Célula 4

|Célula 1 |Célula 2 |

|Célula 3 |Célula 4 |

Exemplo 3:

Célula 1

Célula 2

Célula 3

Célula 4

|Célula 1 |Célula 2 |

|Célula 3 |Célula 4 |

Cor de borda

Para alteramos a corda da borda basta utilizarmos o parâmetro Bordercolor.

Exemplo:

|janeiro |fevereiro |março |

|abril |maio |junho |

Imagem de fundo

Para colocarmos uma imagem como fundo da tabela utilizamos parâmetro Background.

Links

Podemos interligar partes de um texto e também imagens, a outros documentos. Normalmente exibimos em destaque estas áreas ou pontos na página (com cores diferentes ou sublinhado), para indicarmos que se trata de um link, ou interligação, no hipertexto. O par de tags e , que definem o ponto para os links, esse tag é denominado âncora.

Por exemplo: Texto ou Imagem

Caminhos para o documento de destino

Caminho relativo

O caminho relativo pode ser usado sempre que queremos fazer referência a um documento que esteja no mesmo servidor do documento atual.

Através do campo Location do browser, vemos que este documento está localizado em um diretório /manuais/HTML/ do servidor icmsc.sc.usp.br. Para escrevermos um link deste documento para o documento doc2.html no diretório /manuais/HTML/exemplos, tudo que precisamos fazer é escrever:

Veja o exemplo de caminho relativo.

que é apresentado como:

Veja o exemplo de caminho relativo.

Da mesma forma, se quisermos um link deste documento para um outro que esteja em diretório diferente neste mesmo servidor, escrevemos, por exemplo:

Instituto de Ciências Matemáticas de São Carlos

que produz o link: Instituto de Ciências Matemáticas de São Carlos

Para usar links com caminhos relativos é preciso, portanto, conhecer a estrutura do diretório do servidor no qual estamos trabalhando.

Caminho absoluto

Utilizamos caminho absoluto quando desejamos referenciar um documento que esteja em outro servidor, por exemplo:

Grupo Intermídia

que oferece um link para um documento no servidor WWW do Grupo de Pesquisa Intermídia:

Grupo Intermídia

Com a mesma sintaxe, é possível escrever links para qualquer servidor de informações da Internet.

Ligações para trechos de documentos

Além do atributo href, que indica um documento destino de uma ligação hipertexto, o elemento A possui um atributo NAME que permite indicar um trecho de documento como ponto de chegada de uma ligação hipertexto.

Neste documento temos diversos parágrafos marcados como chegada de um link, por exemplo:

Caminho relativo

que faz com que a âncora Caminho relativo seja o destino de um link. Se escrevermos:

Leia sobre caminhos relativos.

Teremos uma ligação hipertexto para um trecho deste mesmo documento:

Leia sobre caminhos relativos.

Da mesma forma, construímos links para trechos determinados de outros documentos, desde que saibamos quais trechos do documento destino estão marcados para ponto de chegada de um link. Por exemplo:

São Carlos é um pólo de alta tecnologia.

que produz um link para um parágrafo marcado no arquivo histprogr.html sobre a cidade de São Carlos, no diretório /Portugues/Sao_Carlos/:

São Carlos é um pólo de alta tecnologia.

Links para outros Serviços Internet

|Telnet | telnet para máquina turing.unicamp.br |

| |Telnet para máquina turing..br |

|Ftp | Ftp para máquina ftp.unicamp.br |

| |Ftp para máquina ftp.unicamp.br |

|Mail | mails para a conta cursos |

| |Mails para a conta cursos |

|Gopher | Acesso ao Gopher Unicamp |

| |Acesso ao Gopher Unicamp |

|News | Acesso à Usenet |

| |Acesso à Usenet |

Cores de Hyperlinks

As cores dos hyperlinks variam de acordo com a sua condição: visitados, nunca visitados e ativos. Esse atributos, são definidos no tag , e precisa ser colocado nas primeiras linhas do documento HTML

EX:

➢ LINK determina a cor dos links não visitados, (vermelho);

➢ ALINK determina a cor que deve ficar o link no momento em que está sendo clicado, (azul);

➢ VLINK determina a cor dos links já visitados, (verde).

Frames

Frames são quadros, que facilitam a navegação do visitante. São divisões físicas na página.

Quando você vê uma página que se vale do recurso de frames, na verdade está vendo duas ou mais páginas HTML, carregadas uma em cada quadro.

Um exemplo de frame, é esta página, você pode perceber que ela é composta por três frames, o do "menu" a esquerda, o do "título" acima e o do "corpo", no centro.

Quando você clica no menu ao lado, ele não muda, permanece fixo, só muda esta outra parte, que chamo de corpo, essa é uma das finalidades do frame. A página que cria esta organização na verdade tem só um comando, que é o que cria os frames.

Como isso é feito?

Substituímos pelo tag e metade do caminho está feito.

Sintaxe:

Primeiramente devemos fazer um documento HTML para ele ser especificado pela sintaxe de frames, no caso chamado de Frame1.htm. Construa outro documento HTML e salve como Frame2.htm, para a construção do segundo frame.

Construa agora o documento que será a sua página principal, desta forma:

MINHA HOME PAGE

A primeira especificação é o FRAMESET, que é acompanhado pelas definições ROWS e COLS.

ROWS:

Especifica o número de frames e a altura de cada um.

Exemplo

Neste exemplo acima, ele chama 2 frames, o 1º com 20% da tela e o 2º com 80% da tela (ambos em altura).

COLS:

Especifica o numero de frames e a largura de cada um.

Exemplo:

Neste exemplo acima, ele chama 3 frames, o 1º (Cols) com 20% da tela e o restante com 80%, o 2º (Rows) com 20% da tela e o 3º (Rows) com o que sobrar ("*").

As especificações de COLS e ROWS, podem ser em porcentagem (%), pixel ou o que sobrar, que é representado pelo sinal "*".

A segunda especificação é o FRAME, que é acompanhado pelas definições SRC, NAME, SCROLLING, NORESIZE, TARGET.

NAME:

Especifica o nome do documento de formato HTML chamado para o frame.

É extremamente necessário para o uso do TARGET, que será visto a seguir.

Exemplo:

SCROLLING:

Define se o Frame terá barra de rolagem, o default, ou seja, o padrão do navegador é Auto (automático).

Fornece as opções: Yes, No, Auto.

Yes - Exibe a barra de rolagem independente do tamanho do documento.

No - Não exibe a barra de rolagem, mesmo que o documento seja maior que o tamanho

especificado.

Auto - Só exibe a barra de rolagem se o documento for maior que a área especificada.

Exemplo:

NORESIZE:

Impossibilita o usuário de mudar o tamanho da área especificada do Frame.

Por default o usuário pode mudar esta área.

Exemplo:

Border:

Define qual a borda que o frame terá e a cor da borda. Mais útil na utilização de backgrounds iguais.

Exemplo:

TARGET:

O atributo target (alvo) é o que indica onde uma página deverá ser apresenta assim que o visitante clica em um link . Por definição uma nova página será apresentada na mesma área onde está link. Para redirecionar a página para outra área temos as possibilidades a seguir que devem ser constar na definição no link ( ) :

target="nome da área " : carrega a página na área especificada.

target=_top : limpa a tela e abre a nova página ocupando toda a tela.

target=_blank : abre uma nova janela para exibir a página.

target=_self : carrega a página na mesma área do link. Opção é default.

Áudio e Vídeo

O uso de áudio e vídeo na Internet vem ganhando muito destaque nos últimos dois anos, e é bom saber como usar bem estas mídias.

Áudio e vídeo são classificados como "mídias contínuas", pois são geradas segundo determinadas taxas, devendo ser reproduzidas nessa mesma taxa, para evitar distorções.

Quanto mais informações de uma seqüência de áudio ou vídeo digital são armazenados, melhor a qualidade do áudio ou vídeo reproduzido. Isso implica, logicamente, no fato de arquivos de áudio e vídeo serem geralmente muito grandes, o que torna inviável o uso mais freqüente dessas mídias em páginas Web.

Além de procurarmos lidar sempre com pequenos trechos de áudio e vídeo, podemos explorar tecnologias recentes que permitem a transmissão em tempo real.

Som

Há duas maneiras de inserir som em uma página:

← Para browsers Netscape:

← Para browsers Internet Explorer:

onde:

autostart=true ( inicia música imediatamente após o carregamento da página;

loop=true ( toca a música indefinidamente;

hidden=true ( esconde o controle com os botões play/pause/stop.

Essas formatações, porém, não farão efeito algum quando o browser não estiver configurado para "tocar" música, ou se o computador que receber a página não tiver uma placa de som.

Vídeo

Em geral, embutimos um arquivo de vídeo em um documento desta maneira

Essa formatação, porém, não fará efeito algum quando o browser não estiver configurado para "tocar" o vídeo.

Acionando o botão direito do mouse sobre a janela do vídeo, abre-se um menu de controle sobre a apresentação.

É possível configurar a apresentação do arquivo de vídeo, como veremos nos próximos passos...

Novas Tecnologias

Algumas novas tecnologias aplicadas na Internet tem possibilitando o uso da rede de maneira mais completa e interativa, com o uso de elementos multimídia como som, imagem e vídeo, apresentados através de páginas web. Aos poucos assim a Web se torna cada vez mais atraente exigindo dos navegantes uma atualização constante de browsers e plug-ins.

Html Dinâmico: Criação de camadas (floaters) interativos na página.

Shockwave Flash: Criação de páginas multimídias com tamanho reduzido, pelo uso de gráficos vetoriais, podendo, se necessário você também incluir imagens fotográficas digitalizadas.

Real Vídeo e Vdo: Vídeo e Áudio sob demanda.

VRML: Virtual Reality Modeling Language - Transforma as página bidimensionais em mundos em 3D.

Validando seu Site

É importante sempre checar se os links nas páginas de seu site estão todos levando a informação indicada pois são constantes as mudanças de endereço de sites na Internet. Existem alguns sites pela rede que oferecem gratuitamente serviços de verificação de links e código HTML utilizando programas que visitam o site checando os links.

Após a visita estes programas retornam um aviso sobre as ocorrências registradas.

Sites gratuitos:

1. Geocities ( )

2. HighWay tecnologias ( )

3. Locadora ( )

4. Tripod ( )

5. Angelfire ( )

6. TerraÀVista ( )

7. Hpg (.br )

Divulgação e Cadastramento em Catálogos

É importante que sua página esteja cadastrada nos principais mecanismos de busca na rede. Viste os principais catálogos de informações disponíveis.

Altavista ( )

Yahoo ( )

Surf ( )

Cadê ? ( )

InfoBrasil Navegador ( )

Argos ( )

Dicas

O desenvolvimento de um site da Web eficiente requer algumas considerações:

➢ Determine o objetivo do site. Por exemplo, será uma ferramenta de relações públicas, um meio eficiente de transmitir e receber informações ou um canal direto para a comercializar produtos?

➢ Em seguida, determine o público-alvo para o site.

➢ Selecione o estilo e o tom em que irá escrever de acordo com o público-alvo.

➢ Use uma linguagem enfática para atrair a atenção.

➢ Como uma excelente fonte de informações para o site, use folhetos, boletins informativos ou outro material de marketing já impresso.

➢ Selecione um material que ainda seja relevante para os leitores. Um site pode ser ideal para exibir informações difíceis de serem encontradas.

➢ Verifique os sites dos concorrentes ou empresas de ramo semelhante para obter outras idéias.

➢ Uma forma de organizar o conteúdo é separar os itens alterados com freqüência dos que requisitam atualização constante. Por exemplo, agrupe um sumário das empresas, os principais produtos ou serviços e informações sobre a localização separadamente do anúncio de novos produtos, ofertas especiais, informações à imprensa e eventos futuros. Essa forma de organizar informações permite atualizar facilmente as seções que necessitam de reavaliações constantes, além de ajudar os leitores a encontrarem com rapidez as informações desejadas.

➢ Use também elementos gráficos e figuras para dar mais dinamismo ao site. Mas lembre-se de que eles ocupam mais espaço de memória, aumentando o tempo de descarregamento.

➢ Quando terminar a criação do site, execute uma verificação de design' para certificar-se de que não há problemas em descarregar o site e identificar problemas com o design de página.

➢ E por último publique-o e bons negócios.

-----------------------

[pic]

| | |

| |COLS |

| | |

| |

| |

|ROWS |

| | |

| | |

| |ROWS |

| |E |

| |COLS |

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download