Manual de CWS

Manual de:
Criação de sites WEB

UFCD 0768

FORMADOR
LUÍS BARBOSA
 Manual de CWS

2
BENEFÍCIOS E CONDIÇÕES DE UTILIZAÇÃO

Este manual deverá constituir-se como um instrumento privilegiado de apoio ao formando, que
aborda e desenvolve todos os conteúdos que serão integrados neste módulo do curso. Poderá
ser utilizado no decorrer da formação como um instrumento de consulta, assim como no
período pós formação para esclarecimento de dúvidas acerca dos temas abrangidos.

OBJETIVOS

Explicar os conceitos associados a uma página web.

Dotar os formandos de competências necessárias para desenvolver uma página para a Web
com recurso a documentos em hipertexto.
Esclarecer de que forma se pode alojar um site na Internet.
 Manual de CWS

ÍNDICE

INTRODUÇÃO ......................................................................................................... 4
1. Introdução à Hyper Text Markup Language........................................................ 5
1.1. Elaboração documentos texto e outros tipos ficheiros em HTML para a web ..... 6
2. Servidores......................................................................................................... 12
2.1. Elaboração de site web .................................................................................... 13
2.2. Envio dos ficheiros para o servidor por ftp........................................................ 13
3. Wix - Plataforma online de criação e edição de sites ........................................ 19
BIBILIOGRAFIA CONSULTADA ............................................................................ 38
RESUMO ............................................................................................................... 38
 Manual de CWS

4
INTRODUÇÃO

O HTML é uma linguagem de marcação utilizada para desenvolvimento de sites. Esta linguagem
surgiu com o HTTP, ambos possibilitaram a popularização da internet.

O HTML é uma linguagem de marcação. Estas linguagens são constituídas de códigos que
delimitam conteúdos específicos, segundo uma sintaxe própria. O HTML tem códigos para criar
páginas na web. Estes códigos que definem o tipo de letra, qual o tamanho, cor, espaçamento, e
outros aspetos do site. No início era muito complicado aprender HTML, pois eram muitos
comandos para fazer algo simples. A cada nova versão, o HTML fica mais fácil de utilizar, e
adquire mais funções.

O HTML foi a primeira linguagem de nível mundial, porém não é a única. Existem muitas outras
linguagens destinadas á criação de páginas da web, porém o HTML ainda prevalece. Atualmente
já é possível integrar várias linguagens na mesma página da Web, sendo possível usar duas ou
mais linguagens no mesmo site.

Para criar e editar códigos em HTML é necessário qualquer editor de texto comum, como bloco
de notas. Para testar os códigos, basta salvar o arquivo em formato .HTML e executar. Para o
teste é necessário ter um navegador configurado como padrão. Não é necessária internet, pois o
arquivo com os códigos esta na máquina onde esta a ser executado.
 Manual de CWS

1. Introdução à Hyper Text Markup Language

5
Linguagem de Programação

Uma linguagem de programação é um conjunto de símbolos e códigos usados para orientar a

programação de estruturas no desenvolvimento da web.

É um sistema de comunicação estruturado, composto por conjuntos de símbolos, palavras-chave,

regras semânticas e sintáticas que permitem o entendimento entre um programador e uma máquina.

 HTML é a linguagem que estrutura uma página

 CSS é a linguagem que deixa a página bonita
 JAVASCRIPT é a linguagem que faz a página funcionar (a mais utilizada atualmente para
deixar a página com mais movimento, podendo atualizar elementos dinamicamente e lidar
melhor com dados enviados e recebidos na página).

Servidor FTP

Um servidor FTP é o servidor que oferece um serviço de acesso a um disco rígido ou servidor de
arquivos criados através de um protocolo FTP.

É ele que armazena as informações ou dados enviados por um usuário e que estarão acessíveis
por qualquer membro da internet.

Protocolo FTP vs. Servidor FTP

Protocolo FTP é um tipo de protocolo de transporte e entrega de arquivos.

Servidor FTP é um ambiente virtual gerido por um software instalado em qualquer computador.

Domínio

O domínio foi uma convenção criada para tornar o acesso ao aos sites na internet mais fáceis de
lembrar e mais amigáveis aos seres humanos. Isso porque, na realidade, os sites são localizados
pelos provedores de internet através de um número (IP).

É um nome exclusivo que serve para localizar e identificar na web, e que aparece após o www. em
sites ou após o @ em e-mails.

É o endereço que as pessoas utilizam para encontrar um site na internet.

Um domínio é composto por: nome do domínio, categoria e código do país (opcional).

www.anasoeiro.com.pt

Exemplo categorias:
.com – comercial
.edu – educação
.org – organização sem fins lucrativos
.gov – governo
 Manual de CWS

1.1. Elaboração documentos texto e outros tipos ficheiros em HTML para a web
6

Seções básicas de um documento

As páginas da web podem e serão muito diferentes umas das outras, mas todas tendem a
compartilhar componentes padrão semelhantes, a menos que a página exiba um vídeo ou um jogo
em tela cheia, seja parte de algum tipo de projeto de arte ou seja mal estruturada:

 cabeçalho (header)
Normalmente, uma grande faixa na parte superior com um grande título e / ou logotipo. É
aí que as principais informações comuns sobre um site geralmente ficam de uma página
para outra.

 barra de navegação
Links para as principais seções do site; geralmente representado por botões de menu,
links ou guias. Como o cabeçalho, esse conteúdo geralmente permanece consistente de
uma página para outra - ter uma navegação inconsistente no seu site levará a usuários
confusos e frustrados. Muitos web designers consideram a barra de navegação parte do
cabeçalho em vez de um componente individual, mas isso não é um requisito; na verdade,
alguns também argumentam que ter os dois separados é melhor para acessibilidade, já
que os leitores de tela podem ler melhor os dois recursos se estiverem separados.

 conteúdo principal
Uma grande área no centro que contém a maior parte do conteúdo exclusivo de uma
determinada página da Web, por exemplo, o vídeo, a história principal, o mapa, as
manchetes de notícias, etc. Esta é a única parte do site que definitivamente irá variar de
página para página!

 barra lateral (sidebar)

Algumas informações periféricas, links, cotações, anúncios etc. Geralmente, isso é
contextual ao conteúdo principal (por exemplo, numa página de um artigo de notícias, a
barra lateral pode conter a biografia do autor ou links para artigos relacionados), mas há
também casos em que encontrará alguns elementos recorrentes como um sistema de
navegação secundário.

 rodapé (footer)
Uma faixa na parte inferior da página que geralmente contém letras pequenas, avisos de
direitos autorais ou informações de contato. É um lugar para colocar informações comuns
(como o cabeçalho), mas geralmente essas informações não são críticas ou secundárias
ao próprio site. O rodapé também é usado às vezes para fins de SEO, fornecendo links
para acesso rápido a conteúdo popular. Um "site típico" poderia ser colocado assim:
 Manual de CWS

Código HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My page title</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One"
rel="stylesheet" type="text/css">
<link rel="stylesheet" href="style.css">
<!-- as três linhas abaixo são uma correção para que elementos semânticos HTML5 funcionem em
versões antigas do Internet Explorer-->
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<!-- Esse é o cabeçalho (header) principal que vai ser usado em todas as páginas do nosso website
-->
<header>
<h1>Header</h1>
</header>
 Manual de CWS

<nav>
<ul>
<li><a href="#">Home</a></li> 8
<li><a href="#">Our team</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact</a></li>
</ul>
<!-- Um formulário de pesquisa é uma outra maneira não linear comum de navegar por um site. -->
<form>
<input type="search" name="q" placeholder="Search query">
<input type="submit" value="Go!">
</form>
</nav>
<!-- Esse é o conteúdo principal da nossa página -->
<main>
<!-- Contém um artigo -->
<article>
<h2>Article heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum
mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis
dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim,
ut porta lorem lacinia consectetur.</p>
<h3>Subsection</h3>
<p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id
dolor.</p>
<p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit
pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed
odio eros.</p>
<h3>Another subsection</h3>
<p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus
et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae
nisi at sem facilisis semper ac in est.</p>
<p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio.
Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi
diam iaculis velit, is fringille sem nunc vet mi.</p>
</article>
<!-- O contéudo do elemento aside pode ser aninhado dentro do conteúdo do elemento main -->
<aside>
<h2>Related</h2>
<ul>
<li><a href="#">Oh I do like to be beside the seaside</a></li>
<li><a href="#">Oh I do like to be beside the sea</a></li>
<li><a href="#">Although in the North of England</a></li>
<li><a href="#">It never stops raining</a></li>
<li><a href="#">Oh well...</a></li>
</ul>
</aside>
</main>
<!-- Esse é o rodapé principal que vai ser usado em todas as páginas do nosso website -->
<footer>
 Manual de CWS

<p>©Copyright 2050 by nobody. All rights reserved.</p>

</footer>
</body> 9
</html>

Elementos de layout do HTML em mais detalhes

É bom entender o significado geral de todos os elementos de seção do HTML em detalhe - isso é
algo em que trabalhará gradualmente ao começar a obter mais experiência com o desenvolvimento
web.

 <main> é para o conteúdo único dessa página.Use <main> apenas uma vez por página, e o
coloca diretamente dentro do <body>. Não é ideal aninhar ele dentro de qualquer outro
elemento senão o elemento <body>.
 <article> inclui um bloco de conteúdo relacionado o qual faz sentido por si só, sem o restante
da página (por exemplo, uma postagem singular dum blog).
 <section> é similar com <article>, mas é mais para agrupar uma única parte de página que
constitui um único pedaço de funcionalidade (por exemplo, um minimapa, ou um conjunto de
manchetes e resumo). É considerado boa prática começar cada seção com um título; observe
também que pode dividir um <article>s em diferentes <section>s, ou <section>s em
diferentes <article>s, dependendo do contexto.
 <aside> é para conteúdo que não está relacionado diretamente com os conteúdos principais,
mas que podem providenciar informações complementares a esses (entradas de glossários,
biografia do autor, links relacionados, etc.).
 <header> representa um grupo de conteúdo introdutório. Se for um elemento filho do <body>,
É um header global da página do site, mas se for um elemento filho deum
<article> ou <section>, é definido como um header específico para essa seção ( tente não
confundir isso com títulos e cabeçalhos).
 <nav> contém a funcionalidade principal de navegação da página. Links secundários, etc.
 <footer> representa um grupo de conteúdo final da página.

Elementos de layout não-semânticos

Às vezes, depara-se numa situação em que não consegue encontrar um elemento semântico ideal
para agrupar alguns itens ou agrupar algum conteúdo. Nesses momentos, convém agrupar um
conjunto de elementos para afetá-los todos como uma única entidade com alguns
CSS ou JavaScript. Para casos como esses, o HTML oferece os elementos <div> e <span>.Deve
usá-los preferencialmente com um atributo class adequado, para lhes fornecer algum tipo de rótulo
para que possam ser facilmente referenciados.

<span> é um elemento não-semântico embutido, que deve usar apenas se não conseguir pensar
num elemento de texto semântico melhor para agrupar o seu conteúdo ou se não quiser adicionar
um significado específico. Por exemplo:
 Manual de CWS

<p>O rei voltou bêbado para o quarto às 01:00, a cerveja não fez nada para ajudá-lo enquanto ele
cambaleando pela porta <span class="editor-note">[Nota do editor: Neste ponto da peça, as luzes
devem estar baixas]</span>.</p>
10
Nesse caso, a nota do editor deve meramente fornecer orientação extra para o diretor da peça; não
é suposto ter um significado semântico extra.

<div> é um elemento não semântico no nível de bloco, que deve usar apenas se não conseguir
pensar num elemento de bloco semântico melhor para usar ou se não quiser adicionar um significado
específico. Por exemplo, imagine um widget de carrinho de compras que você poderia escolher a
qualquer momento num site de comércio eletrónico:

<div class="carrinho-de-compras">

<h2>Carrinho de compras</h2>

<ul>

<li>

<p><a href=""><strong>Brincos de prata</strong></a>: €9,99p>

<img src="../products/3333-0985/thumb.png" alt="Brincos de prata">

</li>

<li>

...

</li>

</ul>

<p>Preço total: €9,99</p>

</div>

Este não é realmente um <aside>, pois não está necessariamente relacionado ao conteúdo principal
da página (deseja visualizá-lo de qualquer lugar). Nem sequer garante particularmente o uso de
uma <section>, pois não faz parte do conteúdo principal da página. Portanto, um <div> é bom neste
caso. Incluímos um cabeçalho como orientação para ajudar os usuários de leitores de tela a
encontrá-lo.
 Manual de CWS

Quebras de linha e regras horizontais

11
Dois elementos que ocasionalmente vai usar e desejará conhecer são <br> e <hr>:

<br> cria uma quebra de linha num parágrafo; é a única maneira de forçar uma estrutura rígida numa
situação em que deseja uma série de linhas curtas fixas, como numa morada ou poema. Por
exemplo:

<p>Era uma vez um homem chamado O'Dell<br>

Que adorava escrever HTML<br>

Mas sua estrutura era ruim, sua semântica era triste<br>

e sua marcação não leu muito bem.</p>

Sem os elementos <br>, o parágrafo seria apenas renderizado numa longa linha (o HTML ignora a
maioria dos espaços em branco); com elementos <br> no código, a marcação é renderizada assim:

Era uma vez um homem chamado O'Dell

Que adorava escrever HTML
Mas sua estrutura era ruim, sua semântica era tristee
sua marcação não leu muito bem.

Elementos <hr> criam uma regra horizontal no documento que indica uma alteração temática no
texto (como uma alteração no tópico ou na cena). Visualmente, apenas se parece com uma linha
horizontal. Como um exemplo:

<p>Ron foi apoiado em um canto pelas feras inferiores saqueadores. Assustado, mas determinado
a proteger seus amigos, ele levantou a varinha e se preparou para a batalha, esperando que seu
pedido de socorro tivesse passado.</p>

<hr>

<p>Enquanto isso, Harry estava sentado em casa, olhando para sua declaração de realeza e
ponderando quando a próxima série sairia, quando uma carta de socorro encantada voou pela janela
e aterrissou em seu colo. Ele leu-o nebuloso e suspirou; "é melhor voltar ao trabalho então", ele
pensou.</p>

Seria renderizado assim:

Ron foi apoiado em um canto pelas feras inferiores saqueadores. Assustado, mas determinado a
proteger seus amigos, ele levantou a varinha e se preparou para a batalha, esperando que seu
pedido de socorro tivesse passado.
 Manual de CWS

Enquanto isso, Harry estava sentado em casa, olhando para sua declaração de realeza e
ponderando quando a próxima série sairia, quando uma carta de socorro encantada voou pela janela 12
e aterrissou em seu colo. Ele leu-o nebuloso e suspirou; "é melhor voltar ao trabalho então", ele
pensou.

2. Servidores

Servidor Web

É o responsável por armazenar e disponibilizar conteúdos, como sites e páginas HTML, para que
fiquem acessíveis para qualquer pessoa na internet.

Durante o trâmite destes dados, é necessário haver conformidade, ou seja, seguir um protocolo
específico, o Protocolo de Transferência de Hipertexto (HTTP), que garante que todas as páginas
e servidores se comuniquem de forma eficiente e sem erros.

Como funciona?

Todos os computadores conectados à internet recebem um endereço de IP, por meio do qual
acontece a identificação do dispositivo na rede, incluindo computadores pessoais, notebooks,
telemóveis e tablets.

Quando visitamos uma página, uma solicitação é enviada do nosso endereço IP para o endereço
IP do servidor web, que responde de imediato, enviando dados para nós. Assim, todas as
informações são transferidas para o nosso computador a partir de uma página.

O servidor funciona em quatro fases:

1 - obtenção do endereço IP e do nome do domínio;

2 - solicitação da URL completa pelo navegador;
3 - resposta do pedido pelo servidor;
4 - exibição da página web pelo navegador.

Soluções em hospedagem geralmente incluem um servidor web ou permitem a instalação de um,

por meio de contratação do serviço, sendo incluído de diferentes formas.

Principais servidores web

 ApacheE: Muito popular, escolhido por grandes empresas de tecnologia. Software gratuito
e de código aberto, compatível e padrão nos principais sistemas operacionais (Windows,
macOS, Linux e FreeBSD).

 Microsoft IIS: Internet Information Server é o servidor web da Microsoft, executado em

plataformas Windows. O servidor dispõe de todos os recursos como o Apache e foco nas
tecnologias proprietárias da Microsoft, como a linguagem ASP.NET e sistema de banco de
dados SQL Server.
 Manual de CWS

 Nginx: Gratuito e open source. É também um dos principais servidores web/proxy utilizados
no mercado. 13

 Lighttpd, Caddy Server e o Mongoose: Um servidor prático para uso pessoal ou para um
caso específico, gratuitos, compatibilidade com outros sistemas, código aberto e fácil
instalação e usabilidade, além de suporte para diversas plataformas.

2.1. Elaboração de site web

É expectável que o formando através da prática com fichas de trabalho previamente disponibilizadas
seja capaz de elaborar um site web.

2.2. Envio dos ficheiros para o servidor por ftp

Responsável por enviar arquivos para a web. Forma prática e versátil de transferência de arquivos,
permite enviar ou receber documentos da Grande Rede por meio de um endereço no navegador ou
um software instalado no PC.

Por mais que o computador tenha espaço em disco suficiente para armazenar tudo, é sempre
recomendado usar algum recurso que divida o peso dos conteúdos e que estes estejam facilmente
acessíveis para quando alguém quiser utilizá-los.

O FTP serve exatamente para fazer a ponte de comunicação. Comunicam através de um servidor
online, que é o local onde essas informações ficam hospedadas e armazenadas.

O protocolo FTP é usado em algumas das atividades mais simples na internet.

O simples ato de aceder a um site, por exemplo, requer que o computador peça ao servidor onde
ele está hospedado para que faça o download dos dados daquela página.

É assim que consegue visualizar todo o conteúdo disponibilizado na página. Antes disso, claro,
alguém já havia enviado essas informações para o servidor através do FTP, possibilitando o seu
acesso e de qualquer outro utilizador interessado.

Como funciona o Protocolo FTP

No processo de transferência e recebimento de arquivos pela internet, o FTP funciona em torno de

dois protagonistas: o cliente e o servidor.

O cliente é o computador que solicita a conexão para ter acesso aos dados já hospedados na
internet. Já o servidor é um outro computador que atua como um ambiente virtual, recebendo a
solicitação do cliente para a transferência dos arquivos nele hospedados.

O computador que atua como cliente consegue acesso aos arquivos hospedados na internet através
de um programa que se conecta ao computador que atua como servidor. Também faz a
transferência dos arquivos do computador para o servidor.
 Manual de CWS

Já o computador que atua como servidor geralmente possui programas disponíveis para permitir a
conexão de computadores externos. Simplesmente autoriza a transferência dos arquivos 14
armazenados nele para o cliente que está a solicitar o acesso.

Essa é a dinâmica de comunicação entre utilizadores de computadores que querem compartilhar

dados, informações ou conteúdos entre si, seja para fins pessoais ou profissionais.

Essa operação precisa de ser segura. Por isso, pede sempre alguma autenticação para proteger as
transferências de dados. Ou seja, é obrigatório ter um login e uma senha de acesso para transferir
arquivos pelo FTP.

Passo a passo do que acontece ao usar um sistema FTP.

1 - inicia um programa de FTP no seu computador que atua como cliente;

2 - insere um utilizador e senha de acesso no programa de FTP;
3 - servidor recebe o pedido de conexão, reconhece os dados e redireciona o seu acesso para o
diretório onde estão os arquivos;
4 - depois de realizar todas as tarefas, a conexão entre computador e servidor é encerrada.

Fazer transferências de arquivos via FTP

Com um servidor FTP a sua empresa pode disponibilizar uma área na internet, para que os seus
fornecedores, representantes, clientes, funcionários, possam enviar ou receber arquivos facilmente
e com segurança.

Muito antes do sistema de armazenamento em nuvem, nasceu o FTP. Ele é o responsável por enviar
arquivos para internet de forma prática e versátil. É considerado um dos serviços mais importantes
da Internet, essencial para a funcionalidade e muito importante na criação, desenvolvimento e
manutenção dos websites hoje em dia.

O que é?

A sigla FTP significa File Transfer Protocol, em português Protocolo de Transferência de Arquivos.
É um sistema que permite aos usuários enviar ou receber documentos da rede por meio de um
endereço no navegador ou software instalado no computador.

Este é o método mais usado para o “transporte” de todo o tipo de ficheiros na Internet, dada a sua
rapidez e segurança, é usado por todo o tipo de utilizadores, seja para funções pessoais ou
profissionais.

Para que serve?

O FTP serve para enviar ficheiros para a criação e manutenção de websites, para permitir o acesso
a ficheiros de grande dimensão a outros utilizadores que se encontram a milhares de quilómetros
de distância e até para criar “backups” dos seus próprios ficheiros.

Quando precisa de enviar um e-mail em que é necessário adicionar um ficheiro para o envio,
certamente que já teve o problema deste ser exageradamente pesado e não ser permitido o envio.
É para este tipo de situações que o FTP serve, sendo possível enviar o ficheiro para o seu servidor,
podendo posteriormente enviar o “url” direto para o ficheiro no corpo do e-mail, permitindo assim
que o receptor do mesmo faça o download diretamente do servidor.
 Manual de CWS

Como funciona?
15
A transferência é feita entre o servidor e o cliente, o primeiro é o local onde os arquivos ficam
hospedados, enquanto o segundo é quem realiza a operação. A conexão é sempre autentificada
por um nome de usuário, senha, servidor e um determinado endereço de IP.

Para criar é preciso utilizar um programa específico, o procedimento é simples. Caso você necessite
apenas aceder um servidor de FTP existe a possibilidade de fazer isso via software com acesso à
internet. Entre os softwares mais famosos estão o FileZilla, Cyberduck para Mac, SmartFTP para
Windows , Casablanca para Linux, cada um tem suas particularidades e funcionalidades, porém o
básico é sempre o mesmo.

Por meio destes softwares é possível ter acesso a todos os arquivos hospedados no local e também
enviar outros documentos para o mesmo. Caso deseje somente entrar no FTP sem utilizar o
programa, digite FTP:// e o número do IP, no seu navegador um prompt irá solicitar o seu login e
senha. Terá acesso ao disco virtual que teria em qualquer software, a transferência de arquivos é
bem simples, semelhante a que o usuário faz no próprio computador.

Normalmente o FTP é bastante útil para pessoas que possuem discos virtuais na rede, para quem
criou um site e possui um sistema de hospedagem. É possível criar um FTP numa máquina ou ter
acesso a algum disco já criado e que tenha sido compartilhado consigo.

Cuidados necessários

Não é aconselhável passar os seus dados de acesso a qualquer pessoa, já que com esses dados
alguém poderá entrar no servidor, apagar todos os ficheiros e pode correr o risco de perder
informação vital que tanto lhe era importante. Se tiver que dar acesso a outra pessoa à sua conta
FTP, é possível criar um “novo utilizador” com menos poderes que o administrador, com credenciais
distintas, permitindo assim que posteriormente esse utilizador seja apagado e nada se perde.

Porém, é importante reforçar que a partilha individual de ficheiros pode tornar-se perigosa em
ficheiros de grande dimensão, já que um número elevado de downloads pode fazer com que o
tráfego da sua conta de alojamento seja ultrapassado e ficará sem acesso ao servidor até tudo ser
retomado.

Como hoje em dia todo o cuidado é pouco, recomenda-se sempre que tenha os seus dados de
acesso guardados num local fora do computador, estes devem ser combinações de letras e números
sem qualquer tipo de lógica, dificultando assim que sejam descobertos. Uma boa ideia é alterar
esses dados pelo menos duas vezes por ano, principalmente se o uso ao seu servidor for
profissional, desta forma não compromete os dados da empresa.

Conectar e transferir arquivos

 Se ainda não tem o Filezilla, baixe o programa, instale-o e depois execute-o;

 Digite os dados para conectar no site (host, usuário, senha e porta) na barra de conexão
rápida que fica na parte superior da janela do Filezilla. Se não souber qual a porta, deixe-a
em branco. Depois clique no botão “Conexão rápida”;
 Manual de CWS

16

 Para enviar arquivos do computador local para o remoto, selecione a pasta remota para
onde será enviado o arquivo no quadro “Endereço remoto:”.
 Selecione a pasta do arquivo a ser enviado no quadro “Endereço local:”.

 Clique com o botão direito sobre o arquivo que deseja enviar no quadro abaixo de “Endereço
local:”.
 Se quiser apenas transferir o arquivo, no menu que aparece escolha a opção “Upload”.
 Manual de CWS

17

 Se quiser transferir mais arquivos ou marcar o selecionado para enviar depois, no menu que
aparece escolha a opção “Adicionar arquivos à fila”. Repita esse passo em todos os arquivos
que quiser colocar na fila.
 Manual de CWS

 Quando tiver terminado de adicionar todos os arquivos à fila, clique no menu “Transferir” e
depois na opção “Processar fila”. 18

 Para enviar arquivos do computador remoto para o local, basta repetir os passos de 3 a 8
invertendo as localizações.
 As transferências também podem ser feitas apenas arrastando e soltando arquivos, porém,
é recomendável ter muita atenção e cuidado ao optar por usar essa abordagem, pois ela
está mais sujeita a erros e consequentemente existe um risco maior de perda acidental de
arquivos.
 Para enviar arquivos do computador remoto para o local, basta repetir os passos de 3 a 8
invertendo as localizações.
 As transferências também podem ser feitas apenas arrastando e soltando arquivos, porém,
é recomendável ter muita atenção e cuidado ao optar por usar essa abordagem, pois ela
está mais sujeita a erros e consequentemente existe um risco maior de perda acidental de
arquivos.

Obs.: Em alguns servidores não é permitido o "modo passivo" caso o cliente tenha um proxy, é
necessário desabilitar essa função para que concluir a transferência com sucesso.
 Manual de CWS

3. Wix - Plataforma online de criação e edição de sites

19

O Wix oferece todas as ferramentas que necessita para criar um site grátis. Depois de se registar
com uma conta gratuita Wix, pode criar e publicar sites.

Para se registar com uma conta gratuita:

1. Entre em Wix.com.
2. No centro superior, clique em Registre-se.

3. Na página de Login, escolha se deseja utilizar o seu login do Facebook, Google do lado
direito ou se deseja criar uma nova conta do lado esquerdo.

4. Para criar uma nova conta, digite o seu e-mail nos dois campos para o efeito (E-mail e Digite
o seu email novamente), escolha a sua senha nos dois campos seguintes (Senha e Digite
a sua senha novamente). Por fim, clique em Registre-se.

Guarde esses dados para fazer o login na sua conta.

 Manual de CWS

Para fazer login em sua conta: 20

1. Entre em Wix.com.
2. Digite o seu email e senha de acesso.

3. Clique em Login.

Editar as Configurações da Sua Conta

 Editar o seu nome de usuário

Para editar o seu nome de usuário:

1. Em Wix.com, no topo direito da página, clique no seu nome de usuário.

2. De seguida escola a opção Configurações da Conta.
 Manual de CWS

3. Surge uma nova janela.

21

Por favor, note que não pode mudar seu nome de usuário para um que já tenha utilizado ou que
outra pessoa esteja a utilizar. Deve ser um nome de usuário único.
Mudar o seu nome de usuário é uma das formas de atualizar o seu URL Wix gratuito. A estrutura
de um URL Wix gratuito é nomedeusuario.wix.com/nomedosite, então, se alterar o seu nome de
usuário, o seu URL será atualizado também!

 Editar o seu e-mail de login

Para editar o seu e-mail de login:

1. Em Configurações de Conta, clique ao lado do Endereço de E-mail.

 Manual de CWS

2. Surge uma nova caixa de texto.

22

3. Insira a sua senha e o novo email nos dois campos.

4. Clique em salvar.

 Editar a sua senha de login

Para editar a sua senha de login:

1. Em Configurações da Conta clique ao lado da sua senha.

2. Surge uma nova caixa de texto.
3.

4. Coloque a senha atual e a nova senha nos dois campos seguintes.

5. Clique em Salvar.
 Manual de CWS

Em Configurações de Conta poderá ainda configurar outros dados como o seu número de telefone,
as suas contas do Facebook e Google; alterar as suas preferências de email e de privacidade; e, 23
de fechar a sua conta.

Editor do WIX

Escolha o background do seu site a partir da coleção e use no seu site.

 Para definir o seu background:

1. No lado esquerdo do Editor, clique no ícone de pincel para abrir a página Design.
2. Em Design, clique em Background.
3. Da janela de Background, escolha um background.
 Manual de CWS

Para voltar para Design, clique em Voltar para Design no topo da janela de Background. Para
fechar a janela Design, clique no X no canto superior direito. 24

 Fazer upload da sua própria imagem de Background

Crie o seu próprio background fazendo upload das suas imagens e configurando-as como
background do seu site!
Para fazer upload de imagens para o seu background:

1. No lado esquerdo do Editor, clique no ícone de pincel para abrir a página Design.
2. Em Design, clique em Background.
3. Na janela de Background, clique em Fazer Upload e Personalizar Background.
4. Sob Personalizar Background, clique em Adicionar Imagem.

5. No canto superior direito da janela Trocar Background, clique em Upload de Imagens.

6. Na janela que se abre, navegue nas seus pastas e escolha a sua imagem. Clique em Open
para fazer upload da sua imagem.
 Manual de CWS

7. Na Galeria de Background, clique sob sua imagem e então clique em Trocar Background.
25
Pode fazer upload de qualquer tamanho de imagem (até 15MB). No entanto, o tamanho original
da sua imagem irá afetar como a imagem é visualizada se você usar as opções de escala de
imagem Normal ou Ladrilhos (veja a tabela na seção abaixo). Para uma qualidade de imagem
otimizada, se usar a opção de escala de imagem Tela Cheia, recomendamos que faça upload
da imagem no maior tamanho possível.

 Personalizar o Background do site

Personalize o seu background, ao alterar a sua escala, posição, cor e função de rolamento.

Para personalizar o seu background:

1. No lado esquerdo do Editor, clique no ícone pincel para abrir a página Design.
2. Em Design, clique em Background.
3. Em Background, clique em Fazer Upload e Personalizar Background.

4. Em Personalizar Background, sob Escala de Imagem, marque o círculo ao lado de uma

das opções.
 Manual de CWS

Tela Cheia o background irá preencher toda sua tela

26
a imagem do background irá manter a sua relação de proporção entre a
Ajustar
largura e a altura

Ladrilhos o background irá ser visualizado em ladrilhos por todo o seu site

o background irá ser visualizado em ladrilhos nos eixos verticais do seu

Ladrilhos Verticais
site

Ladrilhos o background irá ser visualizado em ladrilhos nos eixos horizontais do seu
Horizontais site

Normal a imagem de background irá manter o tamanho original do upload

5. Sob Posição, clique num dos quadrados para escolher a posição do seu background.
6. Ative ou não a opção Rolar o background com o site.
Ao selecionar a opção, configura o seu background para que role com o texto e as imagens da
sua página.
Ao não selecionar essa opção, configura o background do seu site para que permaneça estático
em sua página.
7. Sob Trocar Cor, clique no menu para abrir o Seletor de Cores.
8. No Seletor de Cores, clique na cor desejada.

 Apagar a imagem de Background

Se fez upload da sua própria imagem para o background do seu site, pode apagar essa imagem em
Design.
Para apagar a sua imagem background:

1. No lado esquerdo do Editor, clique no ícone de pincel para abrir a página Design.
2. Em Design, clique em Background.
3. Na janela de Background, clique em Fazer Upload e Personalizar Background.
4. Sob Trocar Imagem, clique em Remover Imagem.
 Manual de CWS

27

 Alterar as cores do site

Escolha uma paleta de cores para o seu site no Gerenciador de Design.

Para alterar as cores do seu site:

1. No lado esquerdo do Editor, clique no ícone pincel para abrir a página Design.
2. Em Design, clique em Cores.
3. Na janela Cores, clique numa paleta de cores.
 Manual de CWS

 Personalizar as cores do site

28
Pode criar a sua própria paleta de cores na seção Cores em Design.
Para personalizar as cores do seu site:
1. No lado esquerdo do Editor, clique no ícone pincel para abrir a página Design.
2. Em Design, clique em Cores.
3. Na janela Cores, clique em Personalizar Paleta.
4. Na janela Personalizar Paleta, sob Cores Principais, clique numa cor.

5. No Seletor de Cores que se abre, clique numa cor para adicioná-la à sua paleta. Clique OK.
A cor que escolher, assim como diferentes tons dessa cor serão adicionadas à sua paleta de
cores. As cores abaixo da linha superior de Cores Principais indicam que tons foram
acrescentados à sua paleta.
6. Repita os passos 4 e 5 para escolher mais cores.
Para inserir cores adicionais à sua paleta, clique nas cores sob Mais cores para abrir o seletor
de cores e selecionar cores adicionais.
Clique em Inverter Paleta para inverter todas as cores em seu site em um clique.
 Manual de CWS

 Descobrir o valor HEX da cor

29
Para descobrir o valor HEX de uma cor:

1. No lado esquerdo do Editor, clique no ícone pincel para abrir a página Design.
2. Em Design, clique em Cores.
3. Em Cores, clique em Personalizar Paleta.
4. Clique numa cor.

 Escolher o esquema de fontes

Escolha um esquema de fontes através do Gerenciador de Design.

Para escolher o seu esquema de fontes:

1. No lado esquerdo do Editor, clique no ícone de pincel para abrir a página Design.
2. Em Design, clique em Fontes.
3. Em Personalizar Fontes, clique num estilo de fonte.
 Manual de CWS

 Personalizar o esquema de fontes

30
Pode criar o seu próprio esquema de fonte na seção Fontes no Gerenciador de Design.

Para personalizar o seu esquema de fontes:

1. No lado esquerdo do Editor, clique no ícone de pincel para abrir a página Design.
2. Em Design, clique em Fontes.
3. A partir da janela Fontes, clique em Personalizar Fontes.
4. Na janela Personalizar Fontes, clique num elemento de texto para alterar o seu estilo de
fonte.

5. No Seletor de Fontes, sob Fontes, clique no menu drop-down e selecione uma fonte.
 Manual de CWS

6. Sob Fontes, digite o tamanho da fonte ou clique nas setas para cima ou para baixo para
selecionar o tamanho da fonte. 31
7. Clique em B (negrito) ou I (itálico), se relevante.
8. Clique no ícone de cor para abrir o seletor de cores. A partir do Seletor de Cores, clique
numa cor da sua palete para alterar a cor do seu estilo.
9. Repita os passos 4 a 8 até que esteja satisfeito com as suas alterações.

 Adicionar suporte de fontes para idiomas

Pode adicionar mais opções de idiomas para as fontes a partir da seção Fontes em Design.

Uma vez que adicione uma nova opção de idioma, pode ver que fontes suportam este idioma,
editando um texto e escolhendo um tipo de fonte na barra do editor de texto.

Ao abrir o seu Editor em russo ou polonês, os conjuntos linguísticos adequados serão adicionados
por predefinição.

Para adicionar uma fonte:

1. Clique em Design e então clique em Fontes.

2. Clique em Suporte de Idiomas.
3. Selecione a caixa ao lado do idioma relevante. Escolhendo um idioma, carregará os
símbolos e codificações necessárias para a fonte escolhida.
4. Clique em OK.

 Adicionar páginas

Adicione mais páginas ao seu site na seção Páginas.

Para adicionar páginas:

1. No lado esquerdo do Editor, clique no ícone Páginas.

2. No canto inferior direito de Páginas, clique em Adicionar Página.
 Manual de CWS

32

3. Do lado esquerdo de Adicionar Página, clique num Layout de Página.

Pode pré-visualizar os diferentes layouts de página à direita de Adicionar Página.

4. Na parte inferior da janela de layout de página, digite um título para a sua página no campo
Nomeie sua página.

5. Clique em OK.
 Manual de CWS

Navegar entre Páginas

33
Pode navegar nas suas páginas no Editor clicando no ícone de páginas no lado esquerdo do Editor.

Em Páginas, clique no nome da página para navegar para a mesma.

Também pode navegar facilmente pelas suas páginas escolhendo a página no menu drop-down ao
lado de Página: no canto superior esquerdo do seu Editor.

Nomear as Páginas

Na seção Configurações e SEO, pode alterar o nome da sua página. Os nomes das suas páginas
irão aparecer no menu do seu site.

Para nomear sua página:

1. Do lado esquerdo do Editor, clique no ícone Páginas.

2. Ao lado da sua página, clique no ícone de Configurações.
3. Em Configurações e SEO, sob Nome da Página, digite um nome para a sua página.
 Manual de CWS

34

4. Clique em Concluído.

 Ocultar páginas

Pode ocultar as suas páginas a partir do menu de navegação na seção Configurações e SEO do
seu Editor. Os visitantes do seu site não serão capazes de aceder às páginas ocultas.

Para ocultar sua página:

1. No lado esquerdo do Editor, clique no ícone Páginas.

2. Ao lado da sua página, clique no ícone de Configurações.
3. Na janela Configurações e SEO, marque a caixa ao lado de Ocultar do Menu.

4. Clique em Concluído.
As páginas estão ocultas no seu site, mas ainda assim, aparecem em motores de busca. A única
maneira de impedir que os motores de busca indexem esta página é usar o recurso de proteção
da página por senha.
 Manual de CWS

 Reordenar Páginas
35
Altere a ordem das suas páginas de forma rápida e fácil a partir de Páginas.

Para reordenar suas páginas:

1. Na barra de ferramentas da esquerda, clique no ícone Páginas.

2. Passe o mouse sobre o lado esquerdo de uma página na lista.

3. Arraste a página para um local diferente.

 Alterar a transição das páginas

Pode escolher uma transição de página para as suas páginas. A transição de página determina
como as suas páginas irão mudar e o que os seus visitantes vão ver quando eles navegam entre
páginas.

Para alterar uma transição de página:

1. No lado esquerdo do Editor, clique no ícone Páginas.
2. Sob Transições de Página, clique no menu drop-down e selecione uma transição.
 Manual de CWS

Nenhum A transição da sua página acontecerá sem nenhum efeito especial.

36
Transição
Suas páginas irão deslizar na horizontal
Horizontal

Transição Vertical Suas páginas irão deslizar na vertical

Cross Fade Suas páginas irão desvanecer.

Sua página desaparecerá antes que a nova página apareça em seu

Fora-Dentro
lugar.

 Criar subpáginas

Pode criar subpáginas no seu site e transformar o seu menu num menu drop-down. Qualquer página
pode ser transformada numa subpágina a partir da seção Páginas do seu Editor.

Para criar subpáginas:

1. No lado esquerdo do Editor, clique no ícone de Páginas.
2. Em Páginas, passe o rato sobre o lado esquerdo do nome da página na sua lista.
3. Arraste a página para a direita.
 Manual de CWS

Proteger Páginas com Senha

Pode proteger páginas individuais do seu site na seção Configurações da Página da página que 37

deseja proteger.

Para proteger sua página com senha:

1. Do lado esquerdo do Editor, clique no ícone de página para abrir Páginas.

2. Em Páginas, ao lado da sua página, clique no ícone de configurações.
3. Em Configurações e SEO, selecione a opção Proteger Página.

4. Em Proteger Página, clique em Proteger com Senha. Digite a senha desejada no campo
senha.

Clique em OK e em Concluído.
 Manual de CWS

BIBILIOGRAFIA CONSULTADA
38

 Caldeira, Carlos Pampulim – Introdução ao html, Departamento de Informática da

Universidade de Évora.
 Feitosa, Rafael – Webmaster HTML – Curso de HTML 4.01 e Introdução ao XHTML 1.0 –
Desenvolvimento, aplicações e referências de acordo com as normas do W3C
 MDN Web Docs – Estrutura de documento e sites , disponível em: Estrutura de documento
e sites - Aprendendo desenvolvimento web | MDN (mozilla.org)

RESUMO

Não obstante a evolução verificada ao longo dos anos na área das ciências informáticas, esta
formação deverá preparar o formando para criar documentos em hipertexto, bem como
desenvolver e alojar um site na Internet independentemente da versão com que se depare. O
constante avanço deverá despoletar o gosto pela aprendizagem nesta área, mesmo que
autonomamente.

O Formador:
Luís Barbosa