Criação de páginas web

(1)

Alojamento web

Criado por Marco Soares

1

(2)

Browsers

2

 Para aceder e/ou navegar a um site é necessário um

programa (software) específico

 Este tipo de programa chama-se Browser (Navegador)

 Existem vários disponíveis tais como

 Internet Explorer  Google Chrome  Mozilla Firefox  Opera

(3)

Browsers

3

 Um browser quando acede a um determinado site,

descarrega as páginas dum servidor em um computador à distância através da Internet

(4)

Servidores WEB

4

 As páginas web ficam alojadas em um computador à distância

através dum software que se chama servidor web

 Os servidores web mais conhecidos são:

 Apache  IIS

(5)

Upload das páginas web

5

 Depois de elaboradas as várias páginas web dum site,

colocam-se os ficheiros das páginas no servidor web

 Este processo de transferência chama-se upload

 Normalmente o processo de transferência de ficheiros utiliza

um protocolo que se chama FTP (File Transfer Protocol)

 Através dum cliente FTP, conseguimos transferir os ficheiros

do nosso computador para um servidor remoto (à distância)

 Um protocolo é como se fosse uma linguagem

 O protocolo FTP é a forma como o servidor ftp “conversa”

(6)

Cliente de FTP

6

 O FileZilla portable é um cliente de ftp portável, quer dizer que

não necessita de instalação para ser executado

(7)

Cliente de FTP

7

(8)

FileZilla Portable

8

 Para configurar a ligação a um servidor ftp no Filezilla

(9)

FileZilla Portable

9

 Aparece a janela seguinte onde pode configurar vários sítios  Vamos ver um que já está configurado, o acesso ao espaço das

(10)

FileZilla Portable

10

 Depois configuramos a pasta local e a pasta remota

 Por exemplo para aceder ao espaço da turma 10I, a pasta

(11)

FileZilla Portable

11

(12)

FileZilla Portable

12

 Depois de configurado o site, basta aceder e arrastar

(13)

Alojamento web e registo de nome

13

 Para termos um site a funcionar precisamos dum pc para

alojá-lo e convém ter um endereço URL registado para o site

 Por exemplo o site https://www.marcosoares.com está

alojado nos servidores: http://www.webhs.pt/

 É possível adquirir um nome (endereço URL) e um local de

alojamento gratuitos com algumas restrições

 Se pesquisar no Google por: free web hosting

 Um dos sites que aparece onde pode alojar gratuitamente o

(14)

Alojamento web gratuito

(15)

Alojamento web gratuito

15

(16)

Alojamento web gratuito

(17)

Alojamento web gratuito

17

(18)

Alojamento web gratuito

18

(19)

Alojamento web gratuito

19

 Aparece a janela

 Sempre que pretender configurar o seu site necessitará dos dados

(20)

Alojamento web gratuito

20

(21)

Alojamento web gratuito

21

 Para fazer o upload das suas páginas web, poderia utilizar o

programa FileZilla portable ou então fazê-lo diretamente clicando em:

(22)

Criar um ficheiro html com o bloco de

notas

22

 Vou criar um ficheiro em html para mais tarde fazer o upload  O ficheiro inicial duma página web costuma ter este nome

(index.html), o servidor web chama-o automaticamente

 Vou criar o ficheiro diretamente no bloco de notas e

(23)

Como abrir o bloco de notas

(24)

Como abrir o bloco de notas

(25)

Criar um ficheiro html com o bloco de

notas

(26)

Criar um ficheiro html com o bloco de

notas

26

 Depois de pronto

(27)

Criar um ficheiro html com o bloco de

notas

(28)

Alojamento web gratuito

28

 Vamos utilizar o cliente ftp web do próprio servidor para

(29)

cliente ftp web do freewebhostingarea

(30)

cliente ftp web do freewebhostingarea

30

(31)

cliente ftp web do freewebhostingarea

31

 Vamos inserir os dados de acordo com o que tínhamos

(32)

cliente ftp web do freewebhostingarea

32

 Já aparece com alguns ficheiros, o que vamos fazer agora é

(33)

cliente ftp web do freewebhostingarea

(34)

cliente ftp web do freewebhostingarea

(35)

cliente ftp web do freewebhostingarea

(36)

cliente ftp web do freewebhostingarea

(37)

cliente ftp web do freewebhostingarea

37

(38)

Aceder ao site que criou

38

(39)

Exercícios

39

 Ex1) Altere o ficheiro index.html de acordo com as suas

preferências e transfira-o novamente para o servidor

 Ex2) Altere novamente o ficheiro index.html, utilizando

estilos css de texto retirados de:

http://www.novaz.com.br/blog/2010/11/using-css-text-shadow-to-create-cool-text-effects/

 Desta vez utilize o FileZilla Portable para transferir o ficheiro

 Ex3) Utilize o FileZilla Portable para transferir ficheiros para