Criação de páginas web
Alojamento web
1
Criado por Marco Soares
Browsers
 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
…
2
Criado por Marco Soares
Browsers
 Um browser quando acede a um determinado site,
descarrega as páginas dum servidor em um computador à
distância através da Internet
 Em seguida interpreta as páginas e mostra-as no browser
3
Criado por Marco Soares
Servidores WEB
 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
4
Criado por Marco Soares
Upload das páginas web
 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”
com o cliente ftp
5
Criado por Marco Soares
Cliente de FTP
 O FileZilla portable é um cliente de ftp portável, quer dizer que
não necessita de instalação para ser executado
 Para descarregar o software pode ir a:
6
Criado por Marco Soares
Cliente de FTP
 Temos aqui por exemplo o FileZilla Portable
7
Criado por Marco Soares
FileZilla Portable
 Para configurar a ligação a um servidor ftp no Filezilla
Portable deve fazer o seguinte:
8
Criado por Marco Soares
FileZilla Portable
 Aparece a janela seguinte onde pode configurar vários sítios
 Vamos ver um que já está configurado, o acesso ao espaço das
turmas da Escola Secundária da Lagoa
9
Criado por Marco Soares
FileZilla Portable
 Depois configuramos a pasta local e a pasta remota
 Por exemplo para aceder ao espaço da turma 10I, a pasta
remota seria:
10
Criado por Marco Soares
\turmas\10i
FileZilla Portable
 Agora basta escolher o servidor que configuramos
11
Criado por Marco Soares
FileZilla Portable
 Depois de configurado o site, basta aceder e arrastar
pastas/ficheiros da pasta local para a remota e vice-versa
12
Criado por Marco Soares
Alojamento web e registo de nome
 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
seu site é: http://www.freewebhostingarea.com/
13
Criado por Marco Soares
Alojamento web gratuito
14
Criado por Marco Soares
Alojamento web gratuito
 Em primeiro lugar vamos escolher um nome
15
Criado por Marco Soares
Alojamento web gratuito
16
Criado por Marco Soares
Alojamento web gratuito
 Aparece a janela
17
Criado por Marco Soares
Alojamento web gratuito
 Preencha os dados
18
Criado por Marco Soares
Alojamento web gratuito
 Aparece a janela
 Sempre que pretender configurar o seu site necessitará dos dados
abaixo
19
Criado por Marco Soares
Alojamento web gratuito
 Para ver o seu site depois de criado basta usar o endereço:
20
Criado por Marco Soares
Alojamento web gratuito
 Para fazer o upload das suas páginas web, poderia utilizar o
programa FileZilla portable ou então fazê-lo diretamente
clicando em:
21
Criado por Marco Soares
Criar um ficheiro html com o bloco de
notas
 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 guardá-
lo com o nome index.html
22
Criado por Marco Soares
Como abrir o bloco de notas
23
Criado por Marco Soares
Como abrir o bloco de notas
24
Criado por Marco Soares
Criar um ficheiro html com o bloco de
notas
25
Criado por Marco Soares
Criar um ficheiro html com o bloco de
notas
 Depois de pronto
 Ficheiro-> Guardar como
26
Criado por Marco Soares
Criar um ficheiro html com o bloco de
notas
27
Criado por Marco Soares
Alojamento web gratuito
 Vamos utilizar o cliente ftp web do próprio servidor para
transferir o ficheiro index.html que criámos
28
Criado por Marco Soares
cliente ftp web do freewebhostingarea
29
Criado por Marco Soares
cliente ftp web do freewebhostingarea
 Vamos configurar para português
30
Criado por Marco Soares
cliente ftp web do freewebhostingarea
 Vamos inserir os dados de acordo com o que tínhamos
escolhido
31
Criado por Marco Soares
cliente ftp web do freewebhostingarea
 Já aparece com alguns ficheiros, o que vamos fazer agora é
transferir o ficheiro index.html que criámos
32
Criado por Marco Soares
cliente ftp web do freewebhostingarea
33
Criado por Marco Soares
cliente ftp web do freewebhostingarea
34
Criado por Marco Soares
cliente ftp web do freewebhostingarea
35
Criado por Marco Soares
cliente ftp web do freewebhostingarea
36
Criado por Marco Soares
cliente ftp web do freewebhostingarea
 Repare que agora aparece o index.html
37
Criado por Marco Soares
Aceder ao site que criou
 Agora já pode aceder ao site que criou: http://onomequeeuquiser.eu5.org
38
Criado por Marco Soares
Exercícios
 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-textshadow-to-create-cool-text-effects/
 Desta vez utilize o FileZilla Portable para transferir o ficheiro
 Ex3) Utilize o FileZilla Portable para transferir ficheiros para
o seu espaço da turma na escola
39
Criado por Marco Soares