TrabalhosGratuitos.com - Trabalhos, Monografias, Artigos, Exames, Resumos de livros, Dissertações
Pesquisar

Página inicial criada - Página da Web

Relatório de pesquisa: Página inicial criada - Página da Web. Pesquise 859.000+ trabalhos acadêmicos

Por:   •  12/8/2014  •  Relatório de pesquisa  •  5.776 Palavras (24 Páginas)  •  281 Visualizações

Página 1 de 24

HTML

Crie sua Home Page – Página para Web

1 - O que é a WEB

A sigla W.W.W. significa World Wide Web, que significa muita coisa na internet. World Wide Web, ou simplesmente Web, é uma teia mundial de páginas HTML entrelaçadas. Ou seja, Web é todo conjunto de páginas interligadas na Internet que são acessadas em todo o mundo.

Na Web podemos colocar páginas HTML, com links, imagens, som e animações. Ou seja, na Web é onde colocamos disponíveis as nossas páginas para acesso mundial.

Você já ouviu falar em endereço do tipo:

www.globo.com.br , www.uol.com.br, www.terra.com.br, www.yahoo.com.br

Ou seja, um endereço http://www..., é o endereço da página na Web, ou melhor, o endereço de uma página na Teia Mundial.

O conceito de teia surgiu através das lições entre as páginas ou Sites. Ou seja, links abrindo páginas e mais páginas. O conceito de Web é muito extenso, é na verdade um mundo virtual; pois na World Wide Web pode-se encontrar de tudo, sem precisar dar a volta ao mundo de avião. Basta apenas que você tenha um computador ligado à Internet, que você terá o mundo da Web sem sair de casa.

A maneira que você tem para acessar todo esse mundo é através de Home Pages. Através desta, o seu passaporte na Web estará garantido. No curso de HTML você irá aprender a fazer a sua própria Home Page.

2 - O que são Home Pages?

Temos na Web um dos serviços mais utilizados na Internet, onde as navegações pelas páginas são muito diversificadas. As Home Pages são as principais fontes de recursos e pesquisas na Internet. Nela encontramos muitas coisas, como serviços e informações.

As Home Pages serão sempre um cartão de visita, ou seja, a porta de entrada para você ou sua empresa na Internet. Você ou sua empresa tendo uma página bem elaborada e com um conteúdo bem informativo, com certeza será bastante visitada e requisitada.

Por exemplo: você pode fazer uma Home Page com informações do jornal da sua escola, e disponibilizar na Internet as informações. Basta você elaborar uma página criativa, e divulgar o endereço dela para que todos possam acessá-la.

Além de disponibilizar informações que podem ser úteis para várias pessoas. Você também pode colocar links para outras páginas que disponibilizam serviços em outros Sites.

Elaborar um site com informações e serviços é atualmente o grande negócio na Internet.

Um site é um conjunto de Home Pages, que linkadas entre si formam um amplo e vasto ambiente ao Internauta. Ou seja, neste ambiente de Home Pages, os Sites constituem os chamados mundos virtuais.

Uma Home Page pode ser tudo o que você quiser, a sua empresa virtual, o seu jornal, o seu restaurante, a sua agência de viagens, o seu banco.

Não se esqueça que na Internet a maioria das informações é liberada, assim sendo, o conteúdo da sua página será público a todos os Internautas.

Você pode pesquisar dentro de um site por assuntos, e achar Home Pages com tudo o que você precisa e procura. Você também pode entrar em Sites que colocam à sua disposição programas que você poderá pegar gratuitamente. Pense na melhor maneira para fazer uma Home Page, e colocar nelas sempre algo de atrativo para os Internautas.

3 - Linguagem e Estrutura HTML

O HTML (Hypertext Markup Language) ou linguagem de marcação de texto é a linguagem dedicada à exibição e acesso de páginas Web.

Conhecida apenas como HTML, esta linguagem de programação tornou-se padrão mundial para se fazer Home Pages. Para você fazer uma Home Page, o primeiro passo básico é aprender HTML. Você deverá ter nações básicas dos comandos HTML e da Estrutura padrão de programação a ser seguida. O HTML é basicamente um interpretador de comando, ou seja, ele interpreta os comandos e mostra página.

A programação HTML consiste de textos comuns e de códigos especiais chamados Tags, que na verdade, são comandos da linguagem.

<html> Esta tag define o texto a ser inserido nos blocos de notas, trata-se de um documento HTML.

<hear> <title> Estas Tags definem o título a serem exibidos na barra de Menu na Janela do Navegador.

<body> Esta tag define toda área da Home Page onde serão inseridos textos, imagens, tabelas, formulários e etc.

<hr> Já esta Tag, tem a função de inserir páginas na Home Page.

<h1> Esta Tag representa um determinado tipo de fonte. Existem seis tipos de fontes na seguinte ordem: h1,h2,h3,h4,h5 e h6.

<p> Esta tag representa a mudança de parágrafo na sua Home Page.

 Toda vez que falarmos em Tags, estamos nos referindo aos comandos da página.

Antes de nós começarmos a fazer a nossa página precisamos definir qual o editor HTML. Ou que editor de texto, utilizaremos para fazer os códigos fonte da página.

E também precisamos de um Navegador (Internet Explorer ou o Netscape) ou visualizador de páginas Web, para testarmos o código-fonte da nossa página depois de pronta. Como o HTML tem o formato de um texto comum, utilizaremos o editor de texto Bloco de Notas (Note Pad) do Windows. E usaremos o Navegador (Internet Explorer).

Primeiro Vamos criar uma Pasta no Windows, onde vão ficar os arquivos HTM.

Crie uma Pasta com o Seu nome na Área de Trabalho (Desktop) do Windows.

Abra o Bloco de Notas do Windows e digite o seguinte.

<html>

<head>

<title> Página 1 </title>

</hear>

<body>

<h1>

<center> Página Teste </center>

</h1>

<p>

</body>

</html>

Agora Salve este arquivo com o nome Teste.htm na sua Pasta. Observação: O Nome que fica entre as Tags <Title> e </Title> é muito importante, pois todas as pessoas irão encontrar seu site na internet, fazendo a pesquisa digitando este nome que fica entre estas duas tags nos buscadores (Exemplo: www.google.com.br). Faça um teste, acesse Home Pages através de sites de Pesquisa (Exemplo: www.cade.com.br) e digite: Nova Pagina. Veja quantas pessoas colocam na Internet Home Pages sem o titulo nas páginas.

4 - Analizando

 Note no exemplo anterior que as tags sempre começam com < > e são fechadas por </ >.

Se você abrir uma tag < > e não fechá-la com </ >, todo o restante da página abaixo da tag estará sob o efeito dele. Porém nem toda Tag precisa ser fechada. Exemplo: <p>, <hr>.

Existe uma extrutura de tags obrigatória, que sempre deve ser colocadas ordenadas no código de uma página, para que tenhamos um código estruturado.

Sempre devemos começar com as tags <html>, para o Navegador identificar o código - fonte como sendo HTML, e fechá-lo com </html> Entre as tags <head> e a tag </head>, definimos as tags de títulos da nossa página, que mostrará o título no Navegador.

As tags <body>...</body> é a parte onde definimos os comandos da linguagem, que a nossa página mostrará no corpo do navegador. Exemplo de Navegador: Internet Explorer.

E para finalizarmos a nossa página, deveremos sempre fechar o código da nossa página com </html>.

Seguindo sempre este padrão em seus códigos - fonte, você nunca terá problemas para fazer suas páginas. Observação: Todos os arquivos salvos devem ser com letras minúsculas, sem acentos, c-cedilha e espaços em branco, evite símbolos complexos e o arquivo deve ter no máximo 8 caracteres. Motivo: Você irá hospedar em Servidor Linux; e esta plataforma exige que os arquivos apresentem estas características.

5 - Criando a sua 1ª Home Page

Abra o Bloco de Notas, digite o código abaixo, e salve com o nome: paginat.htm

<html>

<head><title> Minha Primeira Home Page - Pg.1 </title> </head>

<body><center>

<h1> Esta é a minha página 1 </h1>

</center>

<hr>

<p>

<font size=4> Estou fazendo a minha primeira Home Page! </font>

<p>

<hr>

<a href=“pagina2.htm”>Clique aqui para abrir a minha página 2</a>

</body>

</html>

Agora inicie um Novo Arquivo digitando o código abaixo, e salve com o nome: pagina2.htm

<html>

<head><title> Minha Primeira Home Page - Pg.2 </title></head>

<body><center>

<h1>Esta é a minha página2</h1>

</center>

<hr>

<p>

<font size=4> Estou fazendo a minha primeira Home Page! </font>

<p>

<hr>

<a href=“paginat.htm”>Clique aqui para abrir a minha página1</a>

</body>

</html>

-------------------------------------------------------------------------------------

Agora abra o arquivo paginat.htm

Ao abrir sua 1ª página, você pode clicar no link para ver sua 2ª página.

6 - Colocando Cores na Home Page

Observe que na sua Home Page, os nomes estão com a cor Preta, o fundo está cinza e o link está azul, isto porque quando não definimos no código HTML da nossa página as cores de fundo, texto, links, links visados.

Ao carregarmos a página, ela assume o padrão das cores especificadas pelo Navegador utilizado. No caso da nossa página, ela não tem nenhuma especificação para cores em seu código HTML. No código HTML definimos as cores com valores em Hexadecimal. Veja na Tabela a seguir, algumas cores com as referências em hexadecimal.

Preto

Branco

Azul

Azul Claro

Amarelo

Verde Escuro

Rosa

Vermelho #000000

#FFFFFF

#FFF000

#00FFFF

#FFFF00

#2F4F2F

#FF00FF

#FF0000 Cinza Claro

Castanho

Azul Escuro

Lilás

Lilás Claro

Verde Claro

Turquesa

Azul Céu #C0C0C0

#800000

#000080

#800080

#FF00FF

#00FF00

#008080

#00FFFF

Vejamos agora a tag para colocarmos mais cores na nossa página.

O comando da tag é: <body bgcolor=“#XXXXXX” text=“#XXXXXX” link= “#XXXXXX”>

XXXXXX  Representa o valor da cor em Hexadecimal, mas não se esqueça de sempre colocar antes do valor o símbolo #. Body bgcolor  Representa a cor do fundo da página.

Text: Representa a cor do texto, link: Representa a cor do link, vlink: Representa a cor do link que já foi visitado.

--------------------------------------------------------------------------------------------------------------------------------------

Vamos agora colocar cores na nossa Home Page. Colocaremos o fundo da nossa página em branco, os textos em azul, os Links em verde, e os Links visitados em vermelho.

• Substitua a tag <body> do arquivo: paginat.htm, por: <body bgcolor=“#FFFFFF” text=“#0000FF” link=“#00FF00” vlink=“#FF0000”>

 Agora abra o Navegador e atualize (OBS: No Navegador Netscape, clique em reload para atualizar), outra coisa, a atualização só será aplicada, se você tiver salvo o código HTML no Bloco de Notas.

• Substitua a tag <body> do Arquivo: pagina2.htm, por:

<body bgcolor=“#FF00FF” text=“#FFFF00”>

Depois de Salvar, veja como ficou sua Home Page.

• Substitua a tag <font size=4> do arquivo: pagina2.htm, por: <font color=“#00FF00” size=4>

Depois de Salvar, veja como ficou sua Home Page. Observe que você mudou a cor de apenas uma frase.

7 - Adicionando Imagens

Nós podemos incrementar em nossa Página, imagens para torná-la mais bonita e atraente. A Tag de imagem é representada assim: <img src=“nome da imagem.gif ou .jpg”>

Sempre utilizaremos imagens com formato .gif ou .jpg em nossas páginas, pois esses são os padrões suportados pelo HTML.

Não se esqueça de que quanto maior for o tamanho da imagem, mais lento se tornará o carregamento da página. Uma página tem que ter uma distribuição perfeita de imagens, senão se tornará uma tarefa muito cansativa abri-la, pois ela ficará muito lenta. Vejamos um exemplo de página com uma imagem.

<html>

<head><title>HelpNet HTML </title></head>

<body text=“#0000A0” bgcolor=“#FFFFFF” link=“#0000A0” vlink=“#FF0000”

background=“papel.jpg”>

<img src=“titulo.jpg” width=143 height=76 align=center>

<hr>

<p>

<center>

<img src=“foto.jpg”>

<p>

Aqui você encontrará dicas e informações e como fazer sua Home Page,

<br> e terá a sua disposição 24 horas por dia ONLINE via internet o helpNet.

<p>

<hr>

<p>

<a href=“index.htm”><img border=off src=“voltar.jpg”>

</center>

</body>

</html>

------------------------------------------------------------------------------------------------------------------

Salve este código na sua pasta, com o nome: paginat.htm, depois abra o Corel Draw e faça um retângulo 18 cm de largura, e 1,5 cm de altura, crie um logotipo com o nome Curso de HTML via Internet, selecione o retângulo recorte. Depois abra o Corel Foto Paint, coloque as dimensões do papel 18 x 15 e cole. Depois selecione e salve na sua Pasta com o nome titulo.jpg. Ou então pelo Corel Draw você pode Exportar a imagem em formato .jpg e salvar na sua pasta. Porém, a imagem terá um tamanho qualquer, mas você pode ajustar o tamanho da imagem utilizando o código HTML width e height.

A tag background, define a imagem gráfica do fundo do papel. Você pode abrir um retângulo (Largura 214,842 e altura 154,164, depois aplicar diversos degradês e texturas do Corel Draw, depois recorte-a, cole no Corel Foto Paint ou no Photo Shop, e salve com o nome papel.jpg, na sua Pasta.

Faça o mesmo com foto.jpg, crie uma mensagem com o nome: Bem vindo a nossa página ou outro tema.

Agora se lembre que o fundo será incrementado, portanto, é bom sempre criar um retângulo antes de colocar o nome. Elabore também uma mensagem para voltar.jpg com o nome: Clique aqui para Retornar.

Neste Código: <img src=“titulo.jpg” width=143 height=76 align=center> O Código: width=143 height=76 irá definir a Largura e a Altura da Foto. O Código: align define o alinhamento. No lugar de Center você pode mudar para Right (Alinhamento à Direita) ou Left (Alinhamento à Esquerda).

Veja abaixo algumas tags de alinhamento de texto.

<p align=left>  Inicia o Alinhamento de um Texto à esquerda

<p align=right>  Inicia o Alinhamento de um Texto à direita

8 - Criando Links

Vejamos agora como colocar links na sua página para abrir outras páginas, e como também linkar suas páginas com outros Sites, e também como criar links para enviar e-mails.

A tag de um link é representada assim:

<a href=“nome ou endereço da página”>nome do link</a>

Podemos colocar um link para abrirmos uma página em um outro serviço WWW, isso é, podemos colocar Links para outros Sites.

Colocaremos nossos primeiro link, que será o Cadê, o mais conhecido Site de pesquisa e busca Nacional.

Para enviar o e-mail, utilizaremos à seguinte Tag. <a href=“mailto:seu_email@hotmail.com”>

Ao clicarmos no Link de E-mail, será aberto o programa de E-mail do Navegador, com o endereço especificado na tag.

Antes de começarmos a criar o código html no Bloco de notas, vamos fazer no Corel Draw duas figuras pequena, para ficar na frente das mensagens. Uma para indicar retorno, e a outra para enviar seu e-mail.

Volta.jpg e Mail.jpg, seu tamanho será 1,5 x 1,5. Digite no Bloco de Notas, o código abaixo, e salve com o nome: sites.htm

<html>

<head><title> HelpNet HTML </title></head>

<body text=“#0000A0” bgcolor=“#FFFFFF” link=“#0000A0” vlink=“#FF0000”>

<center>

<img src=“titulo.jpg”>

</center>

<hr>

<a href=“http://www.terra.com.br”>Aqui você entra no Site do Provedor Terra</a>

<p><a href=“http://www.globo.com.br”>Aqui você entra no site da Globo</a>

<p><a href=“http://www.jp.com.br”>Aqui você entra no site do Jornal do Brasil</a>

<p><a href=“http://www.uol.com”>Aqui você entra no Site do Provedor Universal On-Line</a>

<center>

<p><a href=“index.htm”><img src=“volta.jpg” border=0 aling=botton>Retorna para a primeira página</a>

<p><a href=“mailto:seu_email@hotmail.com.br”><img src=“mail.jpg”border=0 align=middle>Clique aqui para enviar seu e-mail</a>

</body>

</html>

Quando você clicar na linha do e-mail, será carregado o aplicativo de correio eletrônico que vem no Windows (Exemplo: Outlook Express) com o endereço especificado na tag. Assim que for carregado o correio Eletrônico, digite a sua mensagem e clique no Botão enviar do Outlook Express. O Outlook Express deve está corretamente configurado com o seu Provedor de Internet.

3 DICAS

1. A Tag dos espaços entre as palavras é esta: &nbsp;

2. A Tag do Enter é esta: <p>&nbsp;<p>

3. Para inserir na página um Contador, acesse site abaixo, ele fornece um código para você copiar e colar na sua Home Page: http://www.2w.com.br/contador-de-visitas-acessos-gratis.html

9 - Mudando a Fonte de Sua Home Page

Você pode Mudar a fonte de sua Home Page, utilizando as fontes do Windows. Agora é importante notar que não é aconselhável utilizar fontes desconhecidas, pois nem todo computador poderá contê-la. Devem-se utilizar as fontes Padrão do Windows que já vem nele quando você o Instala.

Ex: Arial, Arial Black, Times New roman, Algerian, Verdana, Helvetica, Bookman Old Style etc.

A tag para mudar a fonte é esta:

<font face=“Bookman Old Style”>

Esta fonte pode ser usada depois da definição de cores.

10 - Utilizando Listas

Faremos agora uma página nova, utilizando os recursos de listas. Vamos primeiro utilizar o recurso lista. Vamos supor que precisemos elaborar vários tópicos, com assuntos variados e com vários subitens. Utilizaremos o recurso de listas, através das tags <ul>...</ul> e <ol>...</ol>

A tag <ul>...</ul>, nos dá a possibilidade de criarmos uma lista não-ordenada. Enquanto que a tag <ol>...</ol>, nos da à possibilidade de criarmos uma lista ordenada. Faremos uma lista de HotLinks. O comando básico da tag é: <ul><li> item1 <li> item 2 <li>item N </ul>

Antes de fazer o código html no Bloco de Notas, crie um símbolo no Corel Draw e exporte no formato (.JPG) salvando na pasta onde está a sua página com o nome hot.jpg

<html>

<head><title> HotLinks - Filmes de Ação</title></head>

<body text=“#0000A0” bgcolor=“#FFFFFF” link=“#0000A0” vlink=“#FF0000”

background=“papel.jpg”>

<img src=“foto.jpg”>

<font size=4><b>

<hr>

<ul>

<li>Rambo 2, A Missão.

<li>Indiana Jones e o Templo Perdido.

<li>Os Goonies.

<li>Braddock 3, O Resgate.

</ul>

</b></font></body></html>

 Salve este arquivo com o nome lista1.htm e visualize no seu Navegador.

Utilizaremos agora uma lista de itens não ordenados. Digite o seguinte exemplo abaixo no Bloco de Notas, e salve com o nome: lista2.htm

<html>

<head><title>HelpNet HTML</title></head>

<body text=“#0000A0” bgcolor=“#FFFFFF” link=“#0000A0” vlink=“#FF0000”

background=“papel.jpg”>

<font size=4><b>

<hr>

<ur>

<li>HotLink1

<ul>

<li>Bibliotecas

</ul>

</ul>

<li>Hotlink2

<ul>

<li>Esportes

</ul>

</ul>

<li>HotLink3

<ul>

<li>Jornais

</ul>

</ul>

<li>HotLink4

<ul>

<li>Revistas

</ul>

</ul>

</b></font></body></html>

Ao executar este arquivo no Navegador, você notará que cada HotLink tem um sub-item. Vamos colocar mais um subitem de forma ordenada. Vamos adicionar no código da página a tag <ol><li>...</ol>, para fazermos uma lista ordenada. Digite o seguinte exemplo abaixo.

<html>

<head><title>HelpNet HTML</title></head>

<body text=“#0000A0” bgcolor=“#FFFFFF” link=“#0000A0” vlink=“#FF0000”

background=“papel.jpg”>

<font size=4><b>

<hr>

<ur>

<li>HotLink1

<ul>

<li><a href=pagina1.htm>Biblioteca Nacional</a>

<li><a href=pagina2.htm>Biblioteca Estadual</a>

<li><a href=pagina3.htm>Biblioteca de Matemática</a>

</ol>

</ul>

</ul>

<li>HotLink2

<ul>

<li>Esportes

<ol>

<li><a href=pagina3.htm>Futebol</a>

<li><a href=pagina4.htm>Volei</a>

<li><a href=pagina5.htm>Basquete</a>

</ol>

</ul>

</ul>

<li>HotLink3

<ul>

</b></font></body></html>

 Salve o Arquivo anterior com o nome lista3.htm e abra no seu Navegador. Observe que colocamos os subitens como sendo uma lista ordenada.

11 - Utilizando Tabelas

Para colocarmos tabelas nas páginas, usamos a Tag: <table><tr><td>...</td></tr></table>

Onde <table> define que a tag exibirá uma Tag, <tr> define a linha, e <td> a célula.

Vejamos então. Digite a Código abaixo e salve com o nome: tabela1.htm

<html>

<head><title>HelpNet HTML</title></head>

<body text=“#0000A0” bgcolor=“#FFFFFF” link=“#0000A0” vlink=“#FF0000”

background=“papel.jpg”>

<p><center><p>&nbsp;<p>

<table border>

<tr>

<td><center>&nbsp;&nbsp;<a href=“http://www.google.com.br”>Google</a>&nbsp; &nbsp;</td>

<td><center>&nbsp;&nbsp;<a href=“http://www.aonde.com.br”>Aonde</a>&nbsp; &nbsp;</td>

<td><center>&nbsp;&nbsp;<a href=“http://www.cade.com.br”>Cade</a>&nbsp; &nbsp;</td>

</tr>

<td><center>&nbsp;&nbsp;<a href=“http://buscador.terra.com.br”>Bing</a>&nbsp; &nbsp;</td>

<td><center>&nbsp;&nbsp;<a href=“http://busca.uol.com.br”>Busca Uol</a>&nbsp; &nbsp;</td>

<td><center>&nbsp;&nbsp;<a href=“http://www.sitedebusca.com”>Site de Busca</a>&nbsp; &nbsp;</td>

</tr>

</table>

</center></body></html>

--------------------------------------------------------------------------------------------------------------------------------

Agora execute no Navegador (ou Navegador), e veja como ficou. Veja que ela possui 2 linhas e 3 colunas. Ou seja, temos duas tags <tr><td> Google </td>,<td> Aonde </td>,<td> Cade </td></tr> no código da página.

Cada tag <tr>... define uma Linha, e cada tag <td> define uma célula ou coluna. Podemos ainda colocar a nossa Tabela sem Borda. Para isto basta colocar assim <table border=0>

Você poderá colocar nas suas listas e Tabelas, tanto texto simples quanto Imagens como conteúdo, os Links para outras páginas ou Sites.

12 - Formatando a Home Page

Dependendo da Configuração de Vídeo e do Teclado, os caracteres da página podem não ser exibidos adequadamente. Isto porque se fizermos uma Página em Alemão, e o Windows não estiver configurado para a Língua Alemã, será difícil colocar no texto caracteres. Para isso o nosso texto deverá utilizar a norma ISO-Latin-1 ou uma identidade HTML, que torna a representação de caracteres mais fáceis. Ou seja, usando este padrão a nossa página não terá problemas de caracteres nos textos.

A norma ISO-Latin-1 usa um código composto pelo caractere & seguido do símbolo # e uma combinação de números, onde todo o código representa uma letra, número ou caractere qualquer. Já na identidade HTML mais usual, usamos o caractere & seguido de uma palavra que identifica o símbolo a ser apresentado.

Observe abaixo os caracteres com Identidade HTML, onde você sempre irá substituir no Código de sua página, letras acentuadas pelas referências abaixo:

&agrave

&Agrave

&Aacute

&iacute

&ccedil

&otilde 

 à

À

Á

í

ç

õ &Acirc

&ocirc

&uuml

&Ccedil

&atilde

&Uuml 

 Â

ô

ü

Ç

ã

Ü

Observe como ficarão as palavras nos seguintes exemplos:

página  p&aacutegina

carroça  carro&ccedila

ímpar  &iacutempar

13 - Colocando Frames nas Páginas

Você poderá dividir suas páginas em partes, ou seja, os conhecidos frames. Cada seção da sua página é um frame, onde cada Frame corresponde a uma página. A Tag que adiciona frames nas páginas é representada por <frameset>...</frameset>

Mas antes de vermos como funcionam os frames nas páginas, é importante lembrar que existem Navegadores que não suportam frames. Isto é, se você fizer uma página com frames, e alguém tentar visualizá-la com Navegador que não tem suporte a frames, a mesma não será carregada.

O NetScape a partir da versão 2,0 já tem suporte as frames, e o Internet Explorer a partir da versão 3.

Então quando você elaborar uma página com frames, você deve criar também um código de uma página para ser visualizada em Navegadores que não suportam frames. Para isto você terá que adicionar no código HTML da página, a tag <noframes>...</noframes>

Onde o conteúdo da tag entre <noframes>...</noframes> é o código HTML da página sem frames.

Ou seja, a página que for carregada com um Navegador que suporta frames, será exibida o conteúdo da tag <frameset>...</frameset>.

Caso contrário, o Navegador não suporta frames, será exibido o conteúdo da tag <noframes>...</noframes>.

Vejamos então como funcionam os frames numa página.

Utilizaremos a tag <frameset>...</frameset>, e temos a opção rows para definir, e cols para definir colunas. A linha <frameset rows = “50%,50%”> define que na nossa página terá dois frames horizontais, cada um ocupando 50% do espaço na tela.

A linha <frameset cols=“25%,50%,50%”> define que dentro do primeiro Frame Horizontal teremos três Frames Verticais, ocupando respectivamente 25%,50% e 50% do espaço dentro do frame. Podemos utilizar a tag <frame src=“nome”>, onde o nome poderá ser a chamada de uma imagem, página ou endereço da página a ser carregada.

Na Tag <frameset cols=“100%”> definimos que o segundo frame horizontal terá apenas uma coluna ocupando 100% do frame. Veja o código fonte.

<html>

<head><title>HelpNet HTML</title></head>

<frameset rows=“50%, 50%”>

<frameset cols=“50%, 50%”>

<frame src=“pagina1.htm”>

<frame src=“pagina2.htm”>

</frameset>

<frame src=“pagina3.htm”>

</frameset>

</frameset>

<noframes>

<html>

<head><title>HelpNet HTML </title></head>

<body text=“#0000A0” bgcolor=“#FFFFFF” link=“#0000A0” vlink=“#FF0000”>

<center>

<img src=“foto.jpg”>

<center>

<hr size=4 width=500>

<p>

<h2> Bem Vindo &agrave Nossa p&aacutegina de Help Via Internet</h2>

<p>

Aqui você encontrará dicas e informações e como fazer a sua Home Page.

</noframes></center></body></html>

---------------------------------------------------------------------------------------------------------------------

Agora Salve este arquivo no Bloco de Notas com o nome: pgpess.htm, e olhe como ficará no seu Navegador. Caso você faça uma página com frames, e não formate-a para rodar em um Navegador que não suporta frame, não será exibido nada em sua página.

14 - Utilizando Formulários

Vejamos agora como fazer formulários e disponibilizá-los em pedidos e dados on-line nas suas páginas. Para trabalharmos com formulários nas páginas, precisamos de um programa CGI. Você ao fazer um formulário, terá que disponibilizar com seu provedor um programa CGI para ativar a recepção dos dados enviados pelo seu formulário. Para maiores informações sobre CGI, informe-se com o provedor que hospedará sua página. Primeiro editaremos o código HTML da página. Para fazer formulários, utilizaremos a tag <form>...</form>, onde colocaremos, dentro das opções da tag, as variáveis.

No código fonte, precisamos também declarar as variáveis que receberão os dados no formulário. As variáveis são as responsáveis pelos dados que serão enviados pelo formulário, pois nelas estão conteúdos das informações.

Nome: <input type=“text”name=“nome”size=53 maxlength=53>

Esta tag define a entrada de uma variável do tipo texto. Onde name=“nome da variável”, size=“tamanho do campo” e maxlength=“tamanho de caracteres da variável”. Também podemos colocar um quadro de seleção para escolha de dados, onde escolhemos valores pré-definidos para a variável. Para isso utilizaremos a tag <select name=“nome da variável”>, e as tags <option> onde definimos os valores a serem escolhidos. Você pode definir qualquer opção como Selected e também definir as demais possibilidades usando a tag <option>.

 Podemos definir também as entradas de dados como Caixa de Checkbox. Basta definirmos no input type a variável como Checkbox.

 Com a variável Radio, permitimos que você escolha opções num grupo com a criação de botões de rádio.

Na linha que contém a variável Radio, podemos colocar qualquer opção como checked, ou seja, ela sempre aparecerá selecionada. E por fim, com as tags abaixo criamos os Botões de Enviar e Apagar dados.

<input type=“submit”value=“Enviar dados”>

<input type=“reset”value=“Apagar dados”>

No input type, a variável submit (Enviar dados) e a variável Reset (Apagar dados). Na opção Value, definimos o nome do texto que aparecerá no botão.

Obs.: Para enviar os dados do formulário, você não precisará de um programa CGI que receba os dados no seu provedor. Vejamos então o código fonte.

<html>

<head><title>Microsystem Informática Ltda - Formulário</title></head>

<body text="#0000A0" bgcolor="#FFFFFF" link="#0000A0" vlink="#FF0000"

background="papel3.jpg">

<bgsound src="som.wav">

<center>

<h1><img border=off src="bola.gif"> Preencha o formulário abaixo. <img border=off src="bola.gif"></h1>

<hr>

<font color="#000000">

<form>

</center><p>

Nome:<input type = "text"name="nome"size=53 maxlength=53><p>

Sexo:<input type="checkbox"name="box">

Masculino<input type="checkbox"name="box">

Feminino<p>

Endere&ccedilo:<input type="text"name="endereco"size=50 maxlength=50><p>

CEP:<input type="Text"Name="Cep"size=20 maxlength=20><p>

Bairro:<input type="text"name="Bairro"size=30 maxlength=30>

Munic&iacutepio:<input type="text"name="municipio"size=23 maxlength=23>

UF:<select name="estado">

<option selected>BA

<option>SP

<option>MG

<option>ES

<option>PE

<option>RJ

<option>MA

</select><p>

Telefone:<input type="text"name="Tel"size=20 maxlength=20>

Fax:<input type="text"name="Fax"size=20 maxlength=20><p>

Profiss&atildeo:<input type="text"name="Profissao"size=20 maxlength=20><p>

Estado Civil:

<input type="radio"name="estado_civil"value="solteiro"checked>Solteiro

<input type="radio"name="estado_civil"value="casado">Casado

<input type="radio"name="estado_civil"value="Divorciado">Divorciado<p>

J&aacute fez algum Curso de Inform&aacutetica?<input type="checkbox"name="box">

Sim<input type="checkbox"name="box">

N&atildeo<p>

Onde?<input type="Text"Name="Onde"size=115 maxlength=115><p>

<p><center>

<input type="submit"value="Enviar Dados">

<input type="reset"value="Apagar Dados"><p>

</font></form>

<a href="formula.htm"><img border=off src="correio.gif"></a><font color="2F4F2F" size=6 E WIDTH 700>Retorna ao Menu.

</center>

</html>

15 - Formatando Tabelas

Vejamos agora como formatar tabelas e alterar o tamanho e a disposição das células.

Observe o exemplo Abaixo:

Linha 1 Coluna 1 Linha 1 Coluna 2 Linha 1 Coluna 3 Linha 1 Coluna 4

Linha 2 Coluna 1 Linha 2 Coluna 2 Linha 2 Coluna 3 Linha 2 Coluna 4

Linha 3 Coluna 1 Linha 3 Coluna 2 Linha 3 Coluna 3 Linha 3 Coluna 4

Imagine se você precisasse expandir uma das Células.

- Veremos como expandir a célula 1.2 com a 1.3. Utilizaremos a tag <td> com a opção colspan. A opção colspan aumenta o tamanho das células pelas linhas.

- Vejamos como é o código fonte, do exemplo da tabela anterior.

<html>

<head><title>HelpNet HTML </title></head>

<body text=“#0000A0” bgcolor=“#FFFFFF” link=“#0000A0” vlink=“#FF0000”

background=“fundo15.jpg”>

<center>

<img src=“foto.jpg”>

<h1>Formatando Tabelas</h1>

<p>

<Table Border>

<tr>

<td>Linha1 Coluna1</td>

<td>Linha1 Coluna2</td>

<td>Linha1 Coluna3</td>

<td>Linha1 Coluna4</td>

</tr>

<tr>

<td>Linha2 Coluna1</td>

<td>Linha2 Coluna2</td>

<td>Linha2 Coluna3</td>

<td>Linha2 Coluna4</td>

</table></center></body></html>

----------------------------------------------------------------------------------------------------------------------------

Agora salve o código Fonte anterior com o nome tabela1.htm

- Vejamos agora outro exemplo de Tabela.

Digite o seguinte código Fonte e salve com o nome tabela2.htm

Utilizaremos Tag<td>com a opção colspan. A opção rowspan aumenta o tamanho da célula pelas colunas.

Digite o seguinte:

<html>

<head><title>HelpNet HTML</title></head>

<body text=“#0000A0” bgcolor=“#FFFFFF” link=“#0000A0” vlink=“#FF0000”

background=“fundo.jpg”>

<center>

<img src=“imagem.jpg”>

<h1>Formatando Tabelas</h1>

<p>

<Table Border>

<tr>

<td>Linha1 Coluna1</td>

<td align=center colspan=2>

Linha1 Coluna 2-3</td>

<td>Linha1 Coluna4</td>

</tr>

<tr>

<td>Linha2 Coluna1</td>

<td align=top rowspan=2>

Linha2 Coluna2</td>

<td>Linha2 Coluna3</td>

<td>Linha2 Coluna4</td>

</table></center></body></html>

Execute no Internet Explorer, e observe que expandimos a linha da célula 1.2 com a 1.3.

Também, expandimos a coluna da célula 2.2 com a 2.3

16 - Incrementando as Páginas (Recursos de Mídia)

Você pode incrementar suas páginas com recursos de mídia como som, imagem de vídeo e animações.

Animações

As imagens animadas mais usadas são as conhecidas gifs animadas. Ou seja, uma imagem gif que é carregada normalmente na página, mas mostra uma animação. Na internet pode-se achar de outras páginas gifs animadas, que podem ser utilizadas para a construção de suas Home Pages. Para isso basta salvar a imagem em seu computador. Por exemplo, podemos colar uma gif animada para o e-mail, e opções de links. Basta colocarmos a imagem gif no código da nossa página como uma imagem normal.

Lembra da tag <img src=“nome da imagem”>?

É só colocá-la para visualizarmos a página.

Sons (WAV)

Para nossa página poder executar o som, o Navegador deverá estar configurado com os plug ins de Sons. Para executarmos um som em nossa página, basta adicionarmos a tag <bgsound src=“nome do som”>

Obs.: Estes arquivos de sons, assim como os arquivos htm, devem ficar na sua pasta. A tag Loop executa o som infinitamente.

Ex: <bgsound src=“som.wav” loop=“infinite”>

Observação: Alguns arquivos de som e vídeo, não são permitidos nas hospedagens. Principalmente em sites de hospedagem Grátis.

Vídeo

Para exibirmos vídeo podemos utilizar arquivos (.mov, .avi, .mpg). Para colocar vídeo a ser exibido na página basta colocar a tag <a href=“video.avi”>.

Onde video.avi é o nome do arquivo de vídeo com a extensão correta no servidor.

Exemplo:

<a href=“video.avi”><img src=“video.gif”>Imagem de vídeo</a>

Obs.: O arquivo video.gif pode ser substituído por vodeo.jpg, que é uma imagem feita no Corel Draw.

 Podemos também colocar suporte URML em nossa página, o que nos permite carregar animações 3D.

Assim como colocar aplicações em Java Script, como classes dinâmicas para exibir imagens conforme a área testada. Mas não nos aprofundaremos em VRML e Java Script, pois os mesmos só funcionam em Navegadores que tem suporte para eles como o NetScape.

17 - Diferenças entre o NetScape e o Internet Explorer.

O que diferencia as páginas exibidas em diferentes Navegadores são os comandos HTML das páginas suportados pelos mesmos. Ou seja, existem comandos próprios do NetScape e do Internet Explorer que dependendo da página a ser exibida, o Navegador não reconhecerá o comando. O mais correto é o uso do HTML padrão, pois sua página poderá rodar sem problemas dentro de ambos os Navegadores. Ou seja, quando se usa uma tag específica do NetScape e a página for visualizada no Internet Explorer, a tag será ignorada.

 A seguir nós temos algumas tags padrão do NetScape que não são suportadas pelo Internet Explorer.

<BIG> texto </BIG> Aumenta o texto e o coloca em negrito.

<SMALL> texto </SMALL> Reduz e altera a fonte

<BLINK> texto </BLINK> Coloca o texto piscante

<SUP> texto </SUP> Coloca o texto sobrescrito

<SUB> texto </SUB> Coloca o texto subrescrito

<FONT> texto </FONT> Define cor, tamanho e alinhamento.

Já no Internet Explorer temos:

<U> texto </BIU> Coloca o texto sublinhado

<MARQUEE> texto </MARQUEE> Faz o texto rolar um quadro.

 Basicamente estas seriam as diferenças entre o NetScape e o Internet Explorer.

Outras diferenças seriam nos plugins incorporados e suportados pelos Navegadores, como sons e Java Script.

Dicionário

Plug-in/Extensão - É um aplicativo adicional para paginadores Web, como o Netscape Navigator, que habilita funções extras como exibição de videoclips, imagens 3D ou apresentações multimídia.

Java - Linguagem de programação para a Internet, criada pela Sun Microsystems , que estabelece interatividade adicional ao ser embutida em páginas Web.

Navegadores - Um programa que é usado para explorar a Rede. O termo é mais costumeiramente aplicado ao software utilizado para paginar a Worls Wide Web. Exemplos de Navegadores World Wide Web incluem o Navigator, Internet Explorer, Mosaic, WinWeb, Cello e Lynx. O Internet Explorer teoricamente é mais rápido para carregar página. Pois primeiro ele mostra o texto e depois carrega as imagens.

18 - Outros Comandos HTML

<STRONG>Negrito</STRONG>

<I>Itálico</I> ou <EM> Itálico</EM>

<SUB>Sublinhado</SUB>

<H1> até <H6> Aumenta o Tamanho da fonte.

<CENTER> Centraliza </CENTER>

<BLOCKQUOTE> Recua a linha e coluna

<SUP> Subscrito</SUP>

<STRIKE>Tachado</STRIKE>

<MARQUEE> Nome </MARQUEE> Movimenta um texto para a esquerda.

 OBS: Existem outras tags que você encontrará somente em livros. E dependendo do seu Navegador, algumas tags acima podem não funcionar.

19 - Tabela de Cores

20 - Tabela de Caracteres

21 - Colocando sua Página no Ar

 Vejamos agora colo colocar sua página no ar, para ser visualizada em toda internet.

Para sua página entrar no ar, você precisa hospedá-la em algum provedor de Internet. Então o primeiro passo será, procurar um provedor que ofereça a melhor relação custo X benefício para você hospedar sua Home Page. Mas cuidado, nem sempre o menor preço é sinal de lucro. Tome conhecimento dos serviços prestados pelo provedor que você escolher, como se o mesmo tem problemas em ficar temporariamente fora do ar frequentemente.

Caso o provedor sofra do problema anterior, pode descartá-lo, pois se o mesmo ficar fora do ar a sua Home Page não poderá ser vista durante este tempo.

Verifique o link do seu provedor com o Backbone que ele está ligado; dê preferência aos provedores com os links mais rápidos. Se o link for menor que 128 Kb descarte logo de cara; verifique a quantidade de usuários/linha do provedor, pois se for uma relação muito alta, o link poderá estar sobrecarregado e consequentemente a visualização da sua página ficará lenta.

Verifique os serviços de suporte oferecidos, horários de funcionamento do suporte, agora que você já tem alguma idéia de como escolher um bom servidor, basta encontrar o melhor para lhe prestar serviços.

Já com o espaço para hospedar sua página no provedor, você deverá colocar na pasta destinada a isso. Você terá no provedor uma pasta (Exemplo: WWW). É nesta pasta onde você colocará todas as suas páginas.

Não se esqueça de perguntar também ao seu provedor qual será o nome da página principal a ser colocada na pasta, pois na maioria dos provedores o nome da primeira página a ser chamada sempre será index.htm, index.html ou default.htm. Normalmente é index.htm

Verifique este nome, pois se você não colocar o nome default estabelecido, sua página não será carregada. Então você enviará remotamente, do seu computador para a pasta do provedor. Este processo que será realizado será uma transferência de arquivos, mais conhecida como FTP. Ao processo de FTP para enviar as páginas dá-se o nome de UP Load. É através do Up Load que você colocará suas páginas na pasta no provedor.

Mas para enviar suas páginas para o provedor, você também precisa ter o acesso discado à Internet por algum provedor qualquer. Estando tudo pronto, você precisa do mais importante, um programa para FTP.

Existem vários programas de FTP por toda rede, que podem ser pegos gratuitamente. Entre os mais usuais temos o WinFTP e o WS_FTP. Já com o programa de FTP escolhido você poderá configurá-lo com os dados do host do seu provedor. Mas para fazer FTP você deverá estar conectado a internet. Vejamos o WS-FTP.

No campo Profile Name; você coloca o nome sugestivo, para que você saiba qual FTP será feito. Por exemplo, se o nome das suas páginas são pgpess, coloque algo como Uplpgpess. Ou seja, Upl  Upload + Pgpess  O nome da página.

Uplpgpess=Upload para as Home Pages Pgpess.

No campo Host Name você coloca o endereço do servidor FTP do seu provedor.

Vou colocar no campo Host Type o endereço FTP do seu provedor ftp.hj - Software.com.br

No campo Host Type você seleciona o tipo de seu servidor ftp.

Deixaremos a opção selecionada Automatic detect no campo Host Type, pois o tipo do servidor será detectado automaticamente. No campo userId você coloca a sua identificação, que no seu caso será o nome da sua pasta. Iremos colocar o nome Pgpess como sendo o nome da pasta.

No campo Password, coloca-se a senha que o seu provedor passará para você; Pode ser qualquer nome. No quadro Initial Directories você define as pastas que serão abertas ao entrar no ftp. No campo Remote host define-se o nome da pasta no provedor que será aberto. Podemos colocar o nome da pasta em que colocaremos as nossas páginas, que no nosso caso será \Home\Pgpess.

No campo local PC ou Local System, você define-se o nome da pasta local no seu computador que será aberto. O nome será: C:\HTM

Depois de preencher os campos, clique no Botão Save e depois clique OK. Prosseguindo, você abrirá a sua pasta local c:\htm, onde estão as suas páginas, e a pasta remota para onde vai enviar \home\pgpess.

Caso o arquivo index.htm esteja dentro de uma subpasta, você deverá colocar as suas páginas dentro dela. Para transferir as páginas, basta selecioná-las, assim como as imagens. E a seguir clicar no botão Auto e na setinha que fará a transferência da sua pasta local para a pasta remota. Depois de transferidos todos os arquivos, sua página já estará no ar. Lembre-se de clicar em Refresh sempre que for fazer uma atualização da página.

Caso você tenha feito o registro do domínio da sua página, o endereço da sua página será algo desse tipo: www.pgpess.com.br ou apenas pgpess.com

Caso contrário você estará debaixo do domínio do seu provedor, e o endereço será algo do tipo: www.sempihost.pgpess.com.br

Exemplo de site de hospedagem: http://www.homehost.com.br, http://www.sempihost.com.br,

http://www.uolhost.com.br, http://www.globohost.com

Exemplo de site para registrar o domínio: http://www.e-dominios.com.br, www.redehost.com.br

Vantagens de ter uma loja virtual

Lojas virtuais são sites que fazem da internet seu canal de negociação, objetivando a venda de produtos e serviços à clientes online. Esses sites de e-commerce possibilitam que os clientes façam a visualização e a escolha de produtos, lançando-os em um carrinho de compras, onde a confirmação da compra e pagamento são efetuados em um processo totalmente online.

Há inúmeras vantagens em possuir um e-commerce, pois o investimento inicial das lojas virtuais é menor em relação às que necessitam de um espaço físico, as mesmas ficam abertas 24 horas por dia e oferecem serviços personalizados conforme as características do consumidor. Além disso, o mercado virtual iguala as oportunidades entre pequenas, médias e grandes empresas e permite melhor mensuração e gerenciamento das informações sobre o mercado consumidor.

Com as inovações tecnológicas, as lojas virtuais podem ter layouts personalizados, cuja função é despertar a atenção, o interesse e a identificação do cliente com a plataforma de e-commerce, uma vez que os layouts customizados tornam a loja diferenciada em relação às demais. Além dessa forma, as novidades são implantadas através da integração com as redes sociais, permitindo a participação dos clientes através de blogs e mídias de mensagens instantâneas para a divulgação do sistema.

Com o constante crescimento do mercado virtual brasileiro, possuir uma plataforma e-commerce significa investir em um empreendimento duradouro, com grandes perspectivas de sucesso, sendo suas expectativas atingidas a cada ano, com maior número de lojas adentrando ao universo online e a ampliação no volume de e-consumidores.

Alguns sites que permite criar uma Loja Vistual:

www.shopdelivery.com.br , www.dotstore.com.br , http://www.uolhost.com.br/loja-virtual.html

Você encontrará mais sites de Lojas Vistual fazendo a pesquisa no www.google.com.br

...

Baixar como  txt (43.5 Kb)  
Continuar por mais 23 páginas »