32
Centro de Form. Profissional de Alverca 9-06-2011 Formador: Cosmin Constantinescu 1 Criação de Páginas para Web em Hipertexto Formador: Cosmin Constantinescu Outubro de 2011 Objectivo e Ferramentas Objectivo Elaborar páginas para a web, com recurso a hipertexto. Ferramentas Bloco de notas; Conta de utilizador no GMAIL – Sites; Conta de utilizadot no JIMDO; PageMaker; FrontPage; Adobe Dreamweaver CS5;

Criação de Páginas para Web em Hipertexto · Centro de Form. Profissional de Alverca 9-06-2011 Formador: Cosmin Constantinescu 1 Criação de Páginas para Web em Hipertexto Outubro

Embed Size (px)

Citation preview

Page 1: Criação de Páginas para Web em Hipertexto · Centro de Form. Profissional de Alverca 9-06-2011 Formador: Cosmin Constantinescu 1 Criação de Páginas para Web em Hipertexto Outubro

Centro de Form. Profissional de Alverca 9-06-2011

Formador: Cosmin Constantinescu 1

Criação de Páginas para

Web em Hipertexto

Formador: Cosmin ConstantinescuOutubro de 2011

Objectivo e Ferramentas

� Objectivo

� Elaborar páginas para a web, com recurso a hipertexto.

� Ferramentas

� Bloco de notas;

� Conta de utilizador no GMAIL – Sites;

� Conta de utilizadot no JIMDO;

� PageMaker;

� FrontPage;

� Adobe Dreamweaver CS5;

Page 2: Criação de Páginas para Web em Hipertexto · Centro de Form. Profissional de Alverca 9-06-2011 Formador: Cosmin Constantinescu 1 Criação de Páginas para Web em Hipertexto Outubro

Centro de Form. Profissional de Alverca 9-06-2011

Formador: Cosmin Constantinescu 2

Conteúdos #1

� Conceitos gerais de HTML

� Ficheiros HTML

� Estrutura da página HTML

� Ligações

� Tag <A> para ligação

� Ligação local com caminhos relativos e absolutos

� Ligação a outros documentos na Web e a determinados locais dentro de documentos

� Formatação de texto com HTML

� Estilos de caracteres, caracteres especiais e fontes

� Quebra de linha de texto

� Endereços de mail

Conteúdos #2� Imagens

� Imagens online

� Imagens e ligações

� Imagens externas e de fundo

� Atributos das imagens

� Referência das cores, cor de fundo e de texto

� Preparação das imagens

� Multimédia na web

� Ficheiros de som e de vídeo

� Animação na web

� Animação através de ficheiros de imagens Gife e JAVA

� Desenho de páginas web

� Estrutura da página

� Ligações, imagens fundos e cores

Page 3: Criação de Páginas para Web em Hipertexto · Centro de Form. Profissional de Alverca 9-06-2011 Formador: Cosmin Constantinescu 1 Criação de Páginas para Web em Hipertexto Outubro

Centro de Form. Profissional de Alverca 9-06-2011

Formador: Cosmin Constantinescu 3

Conteúdos #3

� Tabelas

� Definição e constituição de uma tabela

� Alinhamento de células e tabelas

� Dimensão das colunas e tabelas

� Frames

� Definição e atributos de frames

� Conjuntos e ligações de frames

� Mapas

� Estrutura de map e utilização de <MAP> e <AREA>

� Atributo USEMAP

� Coordenadas e ligações

� Páginas Web com mapas

O que é a Internet? #1

� Rede de computadores dispersos por todo o planeta que trocamdados e mensagens utilizando um protocolo comum, unindoutilizadores particulares, entidades de pesquisa, órgãos culturais,institutos militares, bibliotecas e empresas de toda envergadura.

� É um conglomerado de redes em escala mundial de milhões decomputadores interligados pelo Protocolo de Internet que permite oacesso a informações e todo tipo de transferência de dados.

Page 4: Criação de Páginas para Web em Hipertexto · Centro de Form. Profissional de Alverca 9-06-2011 Formador: Cosmin Constantinescu 1 Criação de Páginas para Web em Hipertexto Outubro

Centro de Form. Profissional de Alverca 9-06-2011

Formador: Cosmin Constantinescu 4

O que é a Internet? #2

� É uma rede de redes que se comunicam através do protocoloTCP/IP.

� A Internet pode ser definida como uma rede de redes decomputadores. Cada rede individual conectada à internet pode seradministrada por uma entidade governamental, uma empresa ouuma instituição educacional.

� A Internet, ou apenas Net, é uma rede

mundial de computadores ligados, entre

si, através de linhas telefónicas comuns,

linhas de comunicação privadas, satélites

e outros serviços de telecomunicação.

Historia e evolução da Internet #1

� A história da Internet começa com a guerra fria na década de 60,quando existia no mundo o medo da aniquilação numa guerranuclear.

� Com medo de que um ataque causasse a perda dos dados einviabilizasse a comunicação de informações estratégicas, oDepartamento de Defesa Americano e a Agência deDesenvolvimentos de Projectos Avançados (ARPA) desenvolveramuma rede de computadores para a transmissão de informaçõesimune a sabotagens.

� A ideia foi criar uma rede com vários computadores que pudessemtrocar informações através de várias conexões independentes, detal forma que se uma conexão ou um computador fossem paralisadoos outros poderiam continuar a trocar informações. Assim, asegurança seria maior.

Page 5: Criação de Páginas para Web em Hipertexto · Centro de Form. Profissional de Alverca 9-06-2011 Formador: Cosmin Constantinescu 1 Criação de Páginas para Web em Hipertexto Outubro

Centro de Form. Profissional de Alverca 9-06-2011

Formador: Cosmin Constantinescu 5

Historia e evolução da Internet #3

� As redes que formam a Internet são interligadas por outrasredes de alta capacidade, chamadas backbones (espinhadorsal).

� Um backbone é um conjunto de poderosos computadoresconectados por linhas de grande largura de banda (ou seja,que conseguem transmitir grandes volumes de dados), comocanais de fibra óptica, elos de satélite e elos de transmissãopor rádio.

� A Internet surgiu a partir da criação do backbone original, oARPAnet, financiado pelo governo norte- americano.

História e evolução da Internet #4

� A Arpanet, embrião da nossa Internet, estava no ar no final de1969, interligando quatro computadores, todos em universidades.(3 na Califórnia, em Stanford, na Ucla e na UC Santa Barbara e 1na Universidade de Utah);

� Em 1972 eram 37 os computadores ligados e, desde então, a Redenunca deixou de crescer;

� Em 1983, a ARPANET cresceu tanto que o sector militar teve que semudar para uma rede exclusiva, a MILNET;

� Em 1984, a Fundação Nacional de Ciências (NFS), outra agênciagovernamental americana, criou a NSFNET;

� Em 1987, foi necessária uma reforma nas infra-estrutura para aconseguir manter a funcionar devido a um grande aumento deutilizadores.

Page 6: Criação de Páginas para Web em Hipertexto · Centro de Form. Profissional de Alverca 9-06-2011 Formador: Cosmin Constantinescu 1 Criação de Páginas para Web em Hipertexto Outubro

Centro de Form. Profissional de Alverca 9-06-2011

Formador: Cosmin Constantinescu 6

Curiosidades sobre a Internet #1

� A Internet não tem um dono ou um comando central;

� Cada rede individual conectada à Internet, pode ser administradapor uma entidade governamental, uma empresa ou uma instituiçãoeducacional;

� Ao contrário do que normalmente se pensa, Internet não é sinónimode World Wide Web;

� A Internet é usada por 16,9% da população mundial (em torno de1,1 bilhão de pessoas), (Março de 2007).

Curiosidades sobre a Internet #2

� A ICANN é a entidade que coordena a distribuição deidentificadores únicos na Internet, incluindo nomes de domínio,endereços IP, portas de protocolos e números de parâmetros; aorganização está localizada em Marina del Rey (Califórnia, EstadosUnidos), mas é mantida por um grupo internacional de directores dediferentes comunidades, técnicas, comerciais e académicas.

� Em Portugal é a FCCN (Fundação para a Computação CientíficaNacional) quem se encarrega actualmente do registo de domíniosterminados em .pt.

Page 7: Criação de Páginas para Web em Hipertexto · Centro de Form. Profissional de Alverca 9-06-2011 Formador: Cosmin Constantinescu 1 Criação de Páginas para Web em Hipertexto Outubro

Centro de Form. Profissional de Alverca 9-06-2011

Formador: Cosmin Constantinescu 7

Requisitos mínimos para aceder a Internet

Hardware SoftwareFornecedor de Serviços - ISP

@ Computador@ Modem@ Linha telefónica normal, linha

RDIS, ligação por cabo ouADSL, Ligação GSM (TMN,Optimus, Vodafone

@ Disponibilizado pelos Fornecedoresde Serviços

@ Permite reconhecer o modem, aligação à Internet e a troca deinformação

@ Web Browser – programa que nospermite visualizar as páginas Web

@ Entidade que nos “abre a porta deentrada” para a Internet

Disponibiliza

@ A ligação ao seu servidor@ Navegar na Internet@ Visualizar e copiar ficheiros@ Envio e recepção de mensagens@ Participar em grupos de discussão@ Etc…

Tipos de Ligações

� Para que o nosso PC não se torne numa ilha isolada, há que implementar as vias para o conectar ao resto do Mundo.

� Meios que possibilitam o acesso da nossa máquina ao mundo da informação.

� Linha Analógica

� RDIS

� GSM

� Cabo

� Fibra óptica

Page 8: Criação de Páginas para Web em Hipertexto · Centro de Form. Profissional de Alverca 9-06-2011 Formador: Cosmin Constantinescu 1 Criação de Páginas para Web em Hipertexto Outubro

Centro de Form. Profissional de Alverca 9-06-2011

Formador: Cosmin Constantinescu 8

Exemplo

� Essa figura ilustra mais claramente o que acontece quando você procura uma página na Internet.

� Suponha que, na sua casa, você assine o provedor de acesso à Internet da TELEPAC.

� Então, suponha que você abra o Internet Explorer e digite www.rammstein.de, que é um site que fica na Alemanha.

� O que acontece então?� O pedido para ver aquele endereço é enviado pelo seu modem para a linha telefónica.

� Pela linha telefónica, o pedido para ver o endereço chega ao seu provedor de acesso (TELEPAC).

� A TELEPAC está ligado a algum backbone internacional.

� O pedido para ver o endereço é enviado para o backbone internacional.

� Por meio dos cabos ou via satélite desse backbone internacional, o pedido chega à rede dos Estados Unidos.

� De lá, vai para a Europa, chegando finalmente à Alemanha.

� Na Alemanha, o pedido é enviado para o computador que hospeda a página (provavelmente um provedor de acesso à Internet)

� Esse computador então envia os dados (a página propriamente dita).

� Ela então percorre o caminho inverso (não necessariamente o mesmo) e chega ao computador da sua casa.

Como funciona a Internet?

� Na base do funcionamento da Internet estão alguns protocolos: TCP/IP,DNS, SMTP, FTP, Telnet.

Page 9: Criação de Páginas para Web em Hipertexto · Centro de Form. Profissional de Alverca 9-06-2011 Formador: Cosmin Constantinescu 1 Criação de Páginas para Web em Hipertexto Outubro

Centro de Form. Profissional de Alverca 9-06-2011

Formador: Cosmin Constantinescu 9

O Protocolo TCP/IP #1

� Para a troca de mensagens na Internet foi desenvolvido o protocolode comunicação TCP/IP – Transmission Control Protocol/InternetProtocol.

� O protocolo IP define a forma como um determinado computador éreconhecido na Internet ou seja, o seu endereço IP.

� O endereço IP é constituído por um conjunto de quatro números de 0a 255, separados por um ponto, de acordo com a seguinteestrutura: ***.***.***.***

� O protocolo IP é responsávelpor “dividir” uma mensagemem “pedaços” (pacotes) menorese encaminhá-los.

Protocolo TCP/IP

� O protocolo TCP é responsável por manipular uma quantidade grandede dados e garantir que as informações transmitidas entre doiscomputadores da rede não contenham erros.

� Para que nenhum pacote “não se perca” no meio do caminho, cada umdeles viaja com um conjunto de dados:� O endereço do computador para o qual o pacote se dirige� Endereços dos computadores por onde a informação já passou� A informação propriamente dita� Informações para identificar quais pacotes fazem parte da mesmamensagem

� Etc..

Page 10: Criação de Páginas para Web em Hipertexto · Centro de Form. Profissional de Alverca 9-06-2011 Formador: Cosmin Constantinescu 1 Criação de Páginas para Web em Hipertexto Outubro

Centro de Form. Profissional de Alverca 9-06-2011

Formador: Cosmin Constantinescu 10

Como o pacote encontra o seu destino? #1

� Uma possível pergunta que pode surgir então é: “como o meucomputador sabe que o site www.rammstein.de fica naAlemanha?

� Para responder essa pergunta, é necessário saber que cadacomputador conectado à Internet possui um endereço IP(Internet Protocol), uma sequência de números com o aspecto255.255.255.255

� Mas então por que é que digitamos o nomewww.rammstein.de e não um número parecido com aquele?

Como o pacote encontra o seu destino? #2

� Acontece que, para não termos de decorar longas sequênciasde 10 ou 12 algarismos, foi desenvolvido o sistema dedomínios, que associa um nome a um endereço.

� Assim, o endereço real do site é 213.160.82.9 (faça o testedigitando esse número no Internet Explorer) mas, em vez disso,digitamos o URL (Universal Resource Locator)www.rammstein.de, que é bem mais fácil de decorar.

� O provedor de acesso à Internet, que contêm servidores denomes, são responsáveis por dizer qual é o endereço quecorresponde a cada URL.

Page 11: Criação de Páginas para Web em Hipertexto · Centro de Form. Profissional de Alverca 9-06-2011 Formador: Cosmin Constantinescu 1 Criação de Páginas para Web em Hipertexto Outubro

Centro de Form. Profissional de Alverca 9-06-2011

Formador: Cosmin Constantinescu 11

Eu também tenho IP? #1

� Outra questão que pode surgir é justamente essa: um utilizador doméstico,que assina com um provedor de acesso à Internet, tem IP? Qual é ele?

� Sim, ele tem um endereço IP. Se não tivesse, quando ele quer aceder a umapágina, por exemplo, como os dados saberiam o endereço para ondedevem ser enviados?

� O funcionamento é o seguinte: Quando um provedor de acesso à Internetentra em operação, ele recebe um conjunto de números IP, que ficamreservados para ele.

� Por exemplo, de 192.168.1.1 até 192.168.1.254.

� No entanto, geralmente o provedor tem mais utilizadores do que númerosIP. Portanto, não existe um IP para cada utilizador.

Eu também tenho IP? #2

� Portanto, o que acontece é que o utilizador só obtém o endereço IP nomomento que faz a conexão com a Internet. Nessa hora, recebe umendereço IP qualquer que esteja livre no momento.

� Isso é chamado de IP dinâmico.

� Existem também os IPs estáticos.

Ou seja, aqueles endereços que pertencem sempre ao mesmo computador.

� É o caso de empresas que querem que suas páginas estejam na Internet 24horas por dia.

� Nesse caso elas requisitam ao órgão regulador da Internet em seu paísque um IP seja permanentemente reservado para elas e, geralmente,pagam mais caro por isso.

Page 12: Criação de Páginas para Web em Hipertexto · Centro de Form. Profissional de Alverca 9-06-2011 Formador: Cosmin Constantinescu 1 Criação de Páginas para Web em Hipertexto Outubro

Centro de Form. Profissional de Alverca 9-06-2011

Formador: Cosmin Constantinescu 12

Estrutura de um endereço #1

� Exemplo1: Protocolo://nome do domínio/localização

� Protocolo – Identifica o utilizador.

� Nome do Domínio – Nome do computador e a sua localização naInternet. Normalmente, é antecedido por www.

� Localização – Pasta e/ou ficheiro específico a que pretendemosaceder.

http://www.inst-informatica.pt/v20/

Protocolo

Nome do Domínio

Localização

Estrutura de um endereço #2

� Exemplo 2: sol.eps.ufsc.br (endereço nominal)

150.162.1.50 (endereço numérico)

Onde:

sol: determina o nome do computador;

eps.ufsc.br: o nome do domínio

Page 13: Criação de Páginas para Web em Hipertexto · Centro de Form. Profissional de Alverca 9-06-2011 Formador: Cosmin Constantinescu 1 Criação de Páginas para Web em Hipertexto Outubro

Centro de Form. Profissional de Alverca 9-06-2011

Formador: Cosmin Constantinescu 13

DNS (Domain Name System)

� Ou Sistema de Nomes deDomínio é o Protocolo que, acada endereço IP, associa umnome, mais fácil de sermemorizado pelos utilizadores.

SMTP (Simple Mail Transfer Protocol)

� O SMTP é o Protocolo que possibilita a comunicação entrecomputadores por correio electrónico.

� O POP3 (Post Office Protocol 3) é o Protocolo muito utilizado parareceber mensagens de correio electrónico.

Page 14: Criação de Páginas para Web em Hipertexto · Centro de Form. Profissional de Alverca 9-06-2011 Formador: Cosmin Constantinescu 1 Criação de Páginas para Web em Hipertexto Outubro

Centro de Form. Profissional de Alverca 9-06-2011

Formador: Cosmin Constantinescu 14

Quais os serviços da Internet? #1

� Os serviços de comunicação classificam-se em dois tipos:� Síncronos - É um modo de comunicação interactiva quepossibilita, em tempo real, a comunicação entre dois oumais utilizadores da rede, independente da localizaçãogeográfica destes. Ex. ICQ, Chats, Messenger.

� Assíncronos - É um modo de comunicação independente dalocalização geográfica e de tempo. Ex. lista de discussão,e-mail, fórum.

� No entanto, a Internet é formada por diversas opções deserviços, sendo a www apenas uma delas.

Quais os serviços da Internet? #2

� Exemplos:�Serviços básicos de acesso a informação:

�www� ftp (File Transfer Protocol)� Telnet

�Serviços para comunicação:�Correio electrónico� IRC (Internet Relay Chat)� Listas de discussão�NetNews (Usenet)�VideoConferência

Page 15: Criação de Páginas para Web em Hipertexto · Centro de Form. Profissional de Alverca 9-06-2011 Formador: Cosmin Constantinescu 1 Criação de Páginas para Web em Hipertexto Outubro

Centro de Form. Profissional de Alverca 9-06-2011

Formador: Cosmin Constantinescu 15

O que é WWW? #1

� WWW significa World Wide Web. Traduzindo, seria algo como“Grande Teia Mundial”.

� Os documentos existentes na Internet são escritos em linguagensespeciais, nomeadamente, HTML e Java e, para serem visualizados,é necessário utilizar um programa adequado chamado browser(navegador).

� HTML (HyperText Markup Language, que significa Linguagem deMarcação de Hipertexto) é uma linguagem de marcação utilizadapara produzir páginas na Web.

O que é um browser? #1

� O Navegador, também conhecido como Web browser ousimplesmente browser, é um programa que permite aos utilizadoresa interagirem com documentos virtuais, também conhecidos comopáginas HTML, ou simplesmente páginas ou sites, que estãoalojadas em um servidor Web.

� A finalidade principal do navegador é fazer um pedido de umdeterminado conteúdo da Web, e providenciar a exibição domesmo.

� O navegador, tem a capacidade de ler vários tipos de ficheiro,sendo nativo o processamento dos mais comuns (HTML, XML, JPEG,GIF, PNG, etc.), e os restantes possíveis através de plugins (Flash,Java, etc.).

Page 16: Criação de Páginas para Web em Hipertexto · Centro de Form. Profissional de Alverca 9-06-2011 Formador: Cosmin Constantinescu 1 Criação de Páginas para Web em Hipertexto Outubro

Centro de Form. Profissional de Alverca 9-06-2011

Formador: Cosmin Constantinescu 16

Navegadores Web

� Os navegadores mais modernos suportam versões padronizadasdas linguagens HTML e XHTML (começando com o HTML 4.01), emostram páginas de uma maneira uniforme através dasplataformas utilizadas.

� Exemplos:� Microsoft Internet Explorer (85,5%)

� Mozilla Firefox (9,57%)

� Safari (3,07%)

� Netscape Navigator (1,24%)

� Opera (0.55%)

(NetApplications, Dezembro de 2005)

(Wikipedia, Setembro de 2011)

E-Mail (Correio Electrónico) #1

� É o serviço básico de comunicação em redes de computadores. Oprocesso de troca de mensagens electrónicas é bastante rápido efácil, necessitando apenas de um programa de correio electrónico edo endereço electrónico dos envolvidos.

� O endereço electrónico de um utilizador na Internet é composto deuma parte relacionada ao destinatário da mensagem (username) euma parte relacionada a localização do destinatário, no formato:

username@subdomínios.domínio

[email protected]

Identifica o utilizadorSímbolo

separador

Identifica o ISP responsável por enviar e receber as mensagens do utilizador

Domínio principal que indica o tipo de organização ou país

Page 17: Criação de Páginas para Web em Hipertexto · Centro de Form. Profissional de Alverca 9-06-2011 Formador: Cosmin Constantinescu 1 Criação de Páginas para Web em Hipertexto Outubro

Centro de Form. Profissional de Alverca 9-06-2011

Formador: Cosmin Constantinescu 17

E-Mail (Correio Electrónico) #2

� Os endereços IP são formados por quatro números, cada um com umvalor entre 0 e 256. Os números devem ser lidos da esquerda paraa direita. Por exemplo, o endereço mostrado a seguir:

[email protected]

� Tem o seguinte significado: Pedro utiliza o computador 11 dasubdivisão 253 da subdivisão 108 da divisão 192 da internet. Asdivisões da internet são lógicas, estratégicas, e não geográficas.

� O mesmo endereço IP mostrado anteriormente pode serrepresentado como: [email protected]

� pt - domínio geográfico

� com - tipo de organização (comercial)

� empresax- domínio da empresa

� maquina11 - nome do computador

E-Mail (Correio Electrónico) #3

Page 18: Criação de Páginas para Web em Hipertexto · Centro de Form. Profissional de Alverca 9-06-2011 Formador: Cosmin Constantinescu 1 Criação de Páginas para Web em Hipertexto Outubro

Centro de Form. Profissional de Alverca 9-06-2011

Formador: Cosmin Constantinescu 18

Software para gerir contas de correio electrónico

� Os clientes de e-mail mais populares hoje em dia são:

� Apple Mail (o principal cliente nos sistemas Macintosh );

� Calypso;

� Eudora;

� Lotus organizer (era o cliente de e-mail mais utilizado nos sistemas Win);

� Kmail (Linux e FreeBSD );

� Mozilla (cliente de e-mail incluído) (Linux e FreeBSD );

� Mozilla Thunderbird;

� Novell Evolution;

� Opera (cliente de e-mail incluído);

� Outlook;

� Outlook Express;

Servidores de Correio Electrónico

� http://www.portugalmail.pt ou .com

� http://www.sapo.pt

� http://www.clix.pt

� http://www.aeiou.pt

� http://www.iol.pt

� http://www.hotmail.com

� http://www.gmail.com

� http://www.yahoo.com

� …

Page 19: Criação de Páginas para Web em Hipertexto · Centro de Form. Profissional de Alverca 9-06-2011 Formador: Cosmin Constantinescu 1 Criação de Páginas para Web em Hipertexto Outubro

Centro de Form. Profissional de Alverca 9-06-2011

Formador: Cosmin Constantinescu 19

Os dez mandamentos da ética na Internet

� Não utilize o computador para prejudicar as pessoas.

� Não interfira no trabalho de outras pessoas.

� Não se intrometa nos arquivos alheios.

� Não utilize o computador para roubar.

� Não utilize o computador para obter falsos testemunhos.

� Não utilize nem copie softwares pelos quais você não pagou.

� Não utilize os recursos de computadores alheios sem pedir permissão.

� Não se aproprie de ideias que não são suas.

� Pense nas consequências sociais causadas pelo que você escreve.

� Utilize o computador de modo que demonstre consideração e respeito.

Motores de busca

� Google

� Yahoo

� Altavista

� MSN Search

� AEIOU

� SAPO

Page 20: Criação de Páginas para Web em Hipertexto · Centro de Form. Profissional de Alverca 9-06-2011 Formador: Cosmin Constantinescu 1 Criação de Páginas para Web em Hipertexto Outubro

Centro de Form. Profissional de Alverca 9-06-2011

Formador: Cosmin Constantinescu 20

Navegar (ou «surfar», como também é costume dizer) na Web significa que se pode, facilmente, aceder a várias páginas ou sites (conjuntos de páginas), com a possibilidade de se «saltar» de local constantemente, seguindo um rumo ou sem destino certo.

Navegação na WWW (Web)

NAVEGAR NA INTERNET

Formador: Cosmin ConstantinescuOutubro de 2011

Page 21: Criação de Páginas para Web em Hipertexto · Centro de Form. Profissional de Alverca 9-06-2011 Formador: Cosmin Constantinescu 1 Criação de Páginas para Web em Hipertexto Outubro

Centro de Form. Profissional de Alverca 9-06-2011

Formador: Cosmin Constantinescu 21

Para aceder directamente do browser a um site na WWW é necessário conhecer o seu endereço, isto é, saber a localização especifica da página que pretendemos aceder.

Endereços na Internet

O formato típico de um endereço Web é:

Protocolo:// nome_do_dominio/ localização

Em que o protocolo poder ser http://, ftp:// ou news://

O nome do domínio é o nome do computador e a sua localização na Internet. Normalmente, é antecedido por www.

A Localização indica a pasta e o ficheiro especifico a que pretendemos aceder. Normalmente acaba em html, htm ou asp.

Endereços na Internet

Page 22: Criação de Páginas para Web em Hipertexto · Centro de Form. Profissional de Alverca 9-06-2011 Formador: Cosmin Constantinescu 1 Criação de Páginas para Web em Hipertexto Outubro

Centro de Form. Profissional de Alverca 9-06-2011

Formador: Cosmin Constantinescu 22

Exemplo:

http://www.microsoft.com/default.htm

http:// - indica ao browser que se pretende efectuar uma ligação à Internet.

www.microsoft – domínio

.com – sufixo que indica que é uma organização comercial

default.htm – acesso ao ficheiro default.htm

Endereços na Internet

Sufixo:

Países.pt – Portugal.es – Espanha.br – Brasil.fr – França....

Organizações:.com – Empresas.edu – Ensino, universidades.org – Organizações sem fins lucrativos....

Endereços na Internet

Page 23: Criação de Páginas para Web em Hipertexto · Centro de Form. Profissional de Alverca 9-06-2011 Formador: Cosmin Constantinescu 1 Criação de Páginas para Web em Hipertexto Outubro

Centro de Form. Profissional de Alverca 9-06-2011

Formador: Cosmin Constantinescu 23

Utilização dos programas de navegação

��

� Barra de título

Barra de menus

Barra de ferramentas Padrão

Barra de endereços

Barra do Explorer

Painel do browser

� Barra de estado

Utilização dos programas de navegação

Barras de Ferramentas Padrão

Retroceder página Web

Avançar página Web

Parar o carregamento da página Web

Recarregar (chamar de novo) a página Web

Abrir a página definida como página principal

Procurar conteúdos na WWW

Visualizar os favoritos

Reproduzir automaticamente ficheiros digitais de multimédia

Aceder ao histórico (sites visitados recentemente)

Enviar, por correio electrónico, uma hiperligação ou página Web, ler grupos de discussão

Imprimir página Web

Editar página Web

Debate

Aceder ao Messenger

Page 24: Criação de Páginas para Web em Hipertexto · Centro de Form. Profissional de Alverca 9-06-2011 Formador: Cosmin Constantinescu 1 Criação de Páginas para Web em Hipertexto Outubro

Centro de Form. Profissional de Alverca 9-06-2011

Formador: Cosmin Constantinescu 24

Utilização dos programas de navegação

Barra de Endereços

É nesta que escrevemos o endereço da página que pretendemos visualizar.

Quando acedemos a uma página através de uma hiperligação, o seu endereço também é visualizado nesta barra.

Utilização dos programas de navegação

Barra de Hiperligações

Esta barra contém endereços de alguns sites a que pretendemos ter umacesso mais rápido.

Se quiseres adicionar outra página, faz assim:

1. Escreve o endereço da página.2. Coloca o cursor sobre o endereço.3. Clica no botão esquerdo do rato e arrasta até à barra de hiperligação.

Exercício: Adiciona a página http://esgcoutinho-m.ccems.pt/

Page 25: Criação de Páginas para Web em Hipertexto · Centro de Form. Profissional de Alverca 9-06-2011 Formador: Cosmin Constantinescu 1 Criação de Páginas para Web em Hipertexto Outubro

Centro de Form. Profissional de Alverca 9-06-2011

Formador: Cosmin Constantinescu 25

A hiperligação é uma ligação, constituída normalmente, por texto ouimagem, que permite «saltar» para outro ponto na mesma página, oupara outra página cujo conteúdo está relacionado com o texto ouimagem da hiperligação.

Quando se posiciona o rato sobre texto que contenha umahiperligação, aparece um sublinhado e apresenta uma cor diferente.

Quando se posiciona o rato sobre uma imagem que contenha umahiperligação, apresenta uma moldura colorida.

O apontador do rato muda de forma para uma mão com um dedolevantado.

Hiperligações

Tipos de Hiperligação:

� Outra parte da mesma página. � Outra página no mesmo website. � Um documento (imagem, um ficheiro em Word, etc.). � Uma página de outro website. � Um endereço de email.

Exercício:1. Abre o IE, na barra de endereços escreve www.yahoo.com.2. Clica em Sports.3. Clica em Soccer.4. Clica em Spain.5. Clica na hiperligação que te permite ver os jogos da equipa

do Atlético de Madrid.

Hiperligações

Page 26: Criação de Páginas para Web em Hipertexto · Centro de Form. Profissional de Alverca 9-06-2011 Formador: Cosmin Constantinescu 1 Criação de Páginas para Web em Hipertexto Outubro

Centro de Form. Profissional de Alverca 9-06-2011

Formador: Cosmin Constantinescu 26

A navegação pressupõe procurar, abrir, fechar ou voltar atrás, livremente, entre as páginas da Web.

O ambiente de trabalho do browser Internet Explorer permite que se executem facilmente estas operações.

Conceitos básicos de navegação

Exemplo:

Conceitos básicos de navegação

Page 27: Criação de Páginas para Web em Hipertexto · Centro de Form. Profissional de Alverca 9-06-2011 Formador: Cosmin Constantinescu 1 Criação de Páginas para Web em Hipertexto Outubro

Centro de Form. Profissional de Alverca 9-06-2011

Formador: Cosmin Constantinescu 27

Procurar pastas e ficheiros

Para abrir um ficheiro, clica sobre o seu nome.

Exemplo:Abre um ficheiro á tua escolha.

Para executar um programa:• Escreve o nome do programa• Carrega em ENTER

Exemplo: abre o WordPad, escreveC:\Programas\Acessorios\wordpad.exe

Conceitos básicos de navegação

Utilizando Motores de Pesquisa

Outra forma mais eficaz de encontrar informação na Internet é usar motores de pesquisa (busca).

Os motores de pesquisa são super computadores que armazenam gigantescas bases de dados que têm milhares de páginas que podemos consultar.

Para usares precisas de escrever uma “palavra-chave”.

Motores de Pesquisa Portugueses:Sapo – www.sapo.ptClix – www.clix.ptAeiou – www.aeiou.pt

Procurar informações na Internet

Page 28: Criação de Páginas para Web em Hipertexto · Centro de Form. Profissional de Alverca 9-06-2011 Formador: Cosmin Constantinescu 1 Criação de Páginas para Web em Hipertexto Outubro

Centro de Form. Profissional de Alverca 9-06-2011

Formador: Cosmin Constantinescu 28

Utilizando Motores de Pesquisa

Motores de Pesquisa Estrangeiros:

Altavista – www.altavista.comGoogle – www.google.comExcite – www.excite.comHotbot – www.hotbot.comLycos – www.lycos.comYahoo – www.yahoo.comWebCrawler – www.webcrawler.com

Procurar por “palavras-chave”:

Escreve o que queres procurar na WWW depois carrega em Enter.Por exemplo se escreveres:� Desporto – dá-te as páginas todas onde encontra desporto

Procurar informações na Internet

Utilizando Motores de Pesquisa

� “Desportos radicais” – vai dar-te as páginas onde encontra a expressão tal e qual está dentro de aspas.

� Desportos+radicais – dá a lista de páginas onde encontras as duas palavras

�“Desportos radicais”-skate – dá a lista de páginas onde aparece desportos radicais, mas onde não se encontre a palavra skate.

Procurar informações na Internet

Page 29: Criação de Páginas para Web em Hipertexto · Centro de Form. Profissional de Alverca 9-06-2011 Formador: Cosmin Constantinescu 1 Criação de Páginas para Web em Hipertexto Outubro

Centro de Form. Profissional de Alverca 9-06-2011

Formador: Cosmin Constantinescu 29

Utilizando Directórios

Outra forma de encontrar informação na Internet é usar os directórios.

Os directórios são listas ordenadas por assuntos de sites. A informação é muito genérica, e para usares deves procurar por categorias – exemplo: Desporto, Futebol, etc.

Para usares precisas de escrever uma “palavra-chave”.

Directórios:Google – http://directory.google.ptYahoo – www.yahoo.comAltavista – www.altavista.ptSapo – www.sapo.tIOL – www.iol.pt

Procurar informações na Internet

Download e Upload

� Download - Transferência ou importação de ficheiros de um computador para o nosso.

� Upload - Transferência ou exportação de ficheiros do nosso computador para outro qualquer computador.

Page 30: Criação de Páginas para Web em Hipertexto · Centro de Form. Profissional de Alverca 9-06-2011 Formador: Cosmin Constantinescu 1 Criação de Páginas para Web em Hipertexto Outubro

Centro de Form. Profissional de Alverca 9-06-2011

Formador: Cosmin Constantinescu 30

Classificação do Software “descarregado” para o nosso computador #1

� A Web permite a transferência de software para o computador doutilizador (download), havendo vários sites que disponibilizam esteserviço.

� Existem vários tipos de software:

� Freeware – Software que pode ser “descarregado” e,posteriormente, utilizado gratuitamente.

� Shareware – Software que pode ser “descarregado” e testadogratuitamente mas que, posteriormente, terá de ser registado.

� Beta – Versão de Software que ainda se encontra emdesenvolvimento, mas que é disponibilizada para que osutilizadores a testem.

Demo – Versão limitada (demonstração) de um determinado softwaredisponível de forma gratuita para que os utilizadores tenham uma ideia decomo funciona e que, só disponibiliza, algumas das suas funcionalidades.Malware – é um programa que tem objectivos maliciosos. É um termo genérico que engloba uma serie de outros programas:

• Trojan Horse• Spywares• ActiveX• Adwares• Worms• Virus

� Warez – refere-se ao comércio ilegal (pirataria) de produtos com direitos de autor. Este termo geralmente se refere a disponibilização por meio de grupos organizados, fazendo o uso das redes peer-to-peer, da partilha de arquivos (ficheiros) entre amigos ou entre grandes grupos de pessoas com interesses similares. O termo pirataria é utilizado para se referir ao uso não autorizado de

propriedade intelectual.

Classificação do Software “descarregado” para o nosso computador #2

Page 31: Criação de Páginas para Web em Hipertexto · Centro de Form. Profissional de Alverca 9-06-2011 Formador: Cosmin Constantinescu 1 Criação de Páginas para Web em Hipertexto Outubro

Centro de Form. Profissional de Alverca 9-06-2011

Formador: Cosmin Constantinescu 31

Podes fazer downloads de todo o tipo de software:� Programas� Jogos� Antivírus� Musicas MP3� ...

Download de software

A navegação na Web pressupõe algumas reflexões sobre segurança. No IE podes definir o nível de segurança para diferentes páginas da Web.

Para efectuar a configuração deves ir ao menuFerramentas –Opções da Internet

Segurança

Page 32: Criação de Páginas para Web em Hipertexto · Centro de Form. Profissional de Alverca 9-06-2011 Formador: Cosmin Constantinescu 1 Criação de Páginas para Web em Hipertexto Outubro

Centro de Form. Profissional de Alverca 9-06-2011

Formador: Cosmin Constantinescu 32

Também é muito importante ter em consideração os seguintes aspectos:

• a actualização regular das protecções de segurança do Windows, no site da

Microsoft (botão INICIAR – Todos os programas – Windows Update), é

fundamental;

• há que ter um enorme cuidado com mensagens de desconhecidos,

principalmente com ficheiros anexos, que podem conter vírus, usar Antivírus;

• a nível de protecção contra a intrusão de estranhos no nosso computador

através da Web, temos a ferramenta firewall;

•para a eliminação de spyware (programas que promovem a abertura de janelas

com propaganda não solicitada) temos, entre muitos outros, o software Ad-

aware.

Segurança