Introdução ao HTML Utilizando frames Hospedando seu site na WEB

Tamanho: px

Começar a partir da página:

Download "Introdução ao HTML Utilizando frames Hospedando seu site na WEB"

Vítor Gabriel Rosa Leão
8 Há anos
Visualizações:

1 Introdução ao HTML Utilizando frames Hospedando seu site na WEB

3 Por quê???? Por que com tantos editores gráficos de HTML, devemos saber como escrever um código fonte? Porque se você só viu páginas feitas com editores gráficos e não faz a mínima ideia do que é um código fonte ou mesmo o que é uma tag, como você vai modificar ou personalizar uma página?

4 Trabalhando com frames O que são e para que servem? O frame permite criarmos uma moldura na tela, na qual podemos inserir arquivos como páginas em html e figuras. É portanto uma maneira de formatar a tela e racionalizar o nosso trabalho. Podemos utilizar frames para criar um menu para a página.

5 Trabalhando com frames Vamos aprender hoje como criar uma página HTML com menu usando frames, neste trabalho usaremos 3 páginas para conseguirmos este resultado: index.html Será a página principal de nosso site onde mandaremos carregar o menu e os dados que desejamos exibir para os visitantes. superior.html Será propriamente dito. o menu de navegação inferior.html Será a nossa página inicial que vai ser carregada.

6 Criando o index.html <html> <head> <title>minha página</title> </head> <frameset rows="5%,*" border=5> <frame noresize src=superior.html name=superior> <frame noresize src=inferior.html name=inferior> <noframes>"seu navegador não suporta frames </noframes> <frameset> <body bgcolor="#2693ff" Text="#000000"> </body> </html> Salve como index.html

7 Criando o superior.html <html><head> <TITLE>minha pagina</title> <body bgcolor="#456789" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" text="#000000"> <table cellspacing="0" cellpadding="2" Border=1 WIDTH=100% bordercolor=#000000><tr> <td bgcolor=#456789>&nbsp<a href="inferior.html" target="inferior">inicial</a></td> <td bgcolor=#456789>&nbsp<a href="pagina1.html" target="inferior">pagina 1</a></td> </tr></table></td></tr></tbody></table></body></html>

8 Criando o inferior.html <html> <head> <title>minha página</title></head> <body bgcolor="#000000" text="ffffff"> <center> <img src="linha.gif" width=80%> eu sou a página principal meu- @seila.com.br <img src="linha.gif" width=80%> </center> </body></html>

9 Veja o resultado do menu

10 Veja o menu com 7 opções

11 Hospedando seu site na Web Para que a sua página html ou site completo esteja disponível para ser acessado em qualquer lugar do mundo, ele precisa ser colocado em um computador que fique ligado praticamente 24 horas por dia e conectado a internet com uma série de programas específicos, tais como diversos servidores. Existem na web várias empresas especializadas neste tipo de serviço e são chamadas de serviços de hospedagem que podem ser gratuitas ou pagas, isso vai depender da necessidade de cada usuário.

12 Hospedando no Nesta tela escolha a opção ao lado que é FREE e aperte o botão SIGN UP

13 Escolhendo o tipo de hospedagem Nesta tela deixe como foi mostrado nos detalhes em azul e aperte o botão NEXT, a menos que no seu caso necessite de um plano com mais espaço ou algum serviço especifico, lembrando que neste caso, você pagará pelo serviço extra que escolher.

14 Preenchendo dados para o cadastro Nesta tela preencha os dados que foram solicitados (todos os campos devem ser preenchidos). Quando acabar clique no botão signup se faltar algum dado ou der algum erro confira tudo e clique novamente no botão, quantas vezes for necessário, até que esteja tudo certo.

15 Confirmação do cadastro Agora que já preencheu seu cadastro, será mostrada a tela ao fundo, indicando que seu cadastro foi feito e em breve você vai receber um contendo seu nome de usuário e senha para acessar seu espaço e começar a enviar sua página para web. Somente depois de receber o você conseguirá avançar.

16 Administrando seu espaço Depois de pegar usuário e senha no seu , chegou a hora de colocar suas páginas e imagens na internet. Para fazer isso acesse o endereço e clique em MEMBERS LOGIN, veja os destaques em azul.

17 Logando com usuário e senha Digite seu usuário e senha nos campos solicitados e aperte o botão Login, veja os destaques em azul.

18 Seu painel de controle... cuidado! Estamos na tela do painel de controle do seu espaço na web, onde será possível fazer várias coisas que dentre elas enviar arquivos. Clique em File Manager para continuar. Obs.: não vamos fazer modificações aqui, somente queremos enviar nossos arquivos e acessá-los via web mais tarde... Mas nada impede que você depois faça modificações de acordo com a sua vontade.

19 Abrindo sua pasta de arquivos No destaque, em vermelho, podemos ver a quantidade de espaço que foi liberada para você. Para continuar, temos que abrir a pasta referente ao seu espaço no servidor de hospedagem, que em nosso exemplo é a pasta html09.50webs.com, veja no destaque em azul.

20 Deletando arquivos ou pastas Você precisa limpar a pasta para começar o envio de arquivos para o seu espaço, marque as caixas de seleção que existirem e depois clique no botão Delete File/Folder(s), veja no destaque em azul. Obs.: Você só precisa fazer isso uma vez ou toda vez que quiser apagar algum arquivo ou pasta, o procedimento será o mesmo.

21 Confirmando o processo O sistema vai perguntar se deseja realmente apagar o arquivo ou pasta em questão, se estiver tudo bem confirme apertando o botão OK, veja no destaque em azul.

22 Agora com a pasta vazia Como pode ser visto nos destaque em azul, o seu espaço se encontra vazio e agora já podemos começar o envio dos arquivos que fazem parte da sua página ou site.

23 Com a pasta vazia, enviamos arquivos Como pode ser visto nos destaque em azul, o seu espaço encontra-se vazio e podemos trabalhar. Vamos começar o envio dos arquivos do site, para isso clique no botão Arquivo..., veja destaque em vermelho.

24 Selecionando arquivos para enviar Localize a pasta no micro onde você salvou os arquivos que vai colocar no site, em nosso exemplo estamos abrindo o arquivo index.html, veja destaques em azul, depois clique no botão abrir. Repita este procedimento quantas vezes for necessário até que tenha colocado todos os arquivos que deseja enviar ao seu espaço na web.

25 Enviando os arquivos selecionados Em nosso exemplo selecionamos 3 arquivos para serem enviados, veja destaque em cor azul. Obs.: Preste atenção nos tamanhos de arquivos que são permitidos para envio ao site, veja o destaque em cor vermelha. Para iniciar a cópia de arquivos da sua máquina para o espaço da web, clique no botão UPLOAD FILES NOW, no destaque em cor verde.

26 Tela de confirmação de envio ou falha Nesta tela você será informado se os arquivos foram enviados com sucesso ou se houve algum problema, caso seja necessário refaça o processo e confira onde aconteceu o erro. Em nosso caso deu tudo certo e os arquivos foram enviados, basta apertar o botão OK, veja no destaque em cor azul.

27 Verificando os arquivos que enviamos Nesta tela você verá os arquivos que acabamos de enviar, veja no destaque em cor azul. Apartir deste ponto o seu site ou arquivo html já poderá ser acessado de qualquer computador ligado a internet em qualquer lugar do mundo, bastando digitar o endereço correto no navegador.

28 Abrindo o site no navegador Web Para abrir o site é bem simples, abra seu navegador preferido e digite o endereço web, que você recebeu ao se cadastrar no serviço de hospedagem, que em nosso caso é e apertar enter, veja no destaque em cor azul. Se tudo deu certo, o seu site deverá aparecer na tela do navegador e você verá as imagens e textos que você colocou além de acessar, caso existam, todos os links que você disponibilizou no arquivo html que construiu.

Documentos relacionados

LINUX EDUCACIONAL 3.0

Manual Instalação de Impressora no LINUX EDUCACIONAL 3.0 Instalação da impressora Via CUPS e KDE Produzido por: Sergio Graças Giany Abreu Desenvolvedores do Projeto GNU/Linux VRlivre Manual Instalação