HTML? Site?
Tutorial Básico sobre HTML & Site. Clique no menu ao lado em: Testar Códigos, caso queira testar exemplos desse tutorial.
HTML & Site
A linguagem Html ( Hypertext Markup Language - Linguagem de Marcação de Hipertexto) é usada para criar as páginas divulgadas na Internet. É com ela que são feitos os links que permitem navegar pela Web. Para isso, utiliza marcações, chamadas tags, no ponto da página em que é feito um link com outra página.
Para criar uma página Html, pode ser usado o Bloco de Notas do Windows, e ter um navegador instalado como o Internet Explorer.
Obs.: não copie os textos em negrito, são explicações.
Antes de tudo você deve criar uma pasta abrindo o Windows Explorer, escolhendo o diretório de sua preferência, clicando em Arquivo - Novo - Pasta. Dê um nome sugestivo a esta pasta e coloque nesta pasta todas as figuras .gif e .jpg que gostaria que sua página tivesse.
Criando sua primeira página Html
1º Abra o Bloco de Notas. Clique em Editar e marque o item Quebra automática de linha, isso é importante para melhorar a visualização do código.
2º Digite o seguinte texto:
Toda página Html deve iniciar com essa tag
3º Digite :
O cabeçalho deve ser delimitado pelas tags e
4º Digite:
<b>Onde deve ficar o título da página, nome mostrado no topo da janela</b>
<br />
feche o .
Exemplo:
meu 1º título
5º Digite:
para fechar o cabeçalho da página
6º Digite:
Onde deve ficar o corpo da sua página.
Depois deve inserir o título para o texto. Para isso você usará as tags
e
Exemplo:
Minha primeira Home Page
O tamanho vai de
tamanho maior para
tamanho menor.
7º Para colocar um texto digite:
seu texto
Exemplo:
Páginas Html podem ser criadas em qualquer editor ou processador de texto
8º Colocando uma imagem :
Exemplo:
A imagem deve estar na mesma pasta que o arquivo Html ou aponte para a pasta certa.
O img src é referente a imagem, que precisar ser indicada em extensão .gif ou .jpg.
Alt é um texto alternativo mostrado quando se passa com o mouse sobre a figura.
Height e Width são as dimensões da figura em pixels, modifique de acordo com o tamanho da figura.
Se você não indicar as dimensões da figura excluindo height e width sua imagem terá o tamanho original.
9º Vamos fechar o corpo do texto e terminar com a tag de fechamento.
Exemplo:
10º Salve o esse documento com extensão .html ou .htm
Exemplo:
teste.html ou teste.htm
Abrindo e vendo o resultado.
Abra seu navegador padrão( Internet Explorer ou Outro).
Clique em Arquivo _ Abrir ou Abrir - Procurar.
Abra a pasta onde você salvou sua página clique no arquivo html de sua página e de Ok.
Lembrando que para atualizar sua página basta apenas abri-la no navegador padrão e clicar em Exibir Código de Fonte e fazer as modificações necessárias no código do documento Html não esquecendo de salva-lo.
Exemplo completo
meu 1º titulo
Minha primeira página
Páginas Html podem ser criadas em qualquer editor ou processador de texto
Alinhamento de textos, figuras, etc...
Como fazer.
texto alinhado a esquerda
texto alinhado ao centro
texto alinhado a direita
Cor de fundo:
Para cor de fundo fazemos a difinição na tag body.
Exemplo:
ou para imagem.
Links ( ligações que ao serem clicadas levam a outro documento )
Para inserir um link que aponte para uma outra página, digite:
CodigosnaWeb.
Este exemplo irá abrir o nosso site na mesma janela do documento atual.
E Para inserir uma figura que quando clicada abre uma outra página ou um link para enviar e- mail? Veremos agora.
Digite :
caso queira alinha no centro
Agora você precisa mencionar se a figura terá ou não um contorno digitando border="0" para que o link não tenha borda colorida
Lembrando que email.gif é a imagem que você deve substituir pela que desejar. Ela precisa estar na mesma pasta que o arquivo Html. E teste@teste.com.br é um endereço eletrônico fictício.
Com este exemplo fica fácil você criar outros links usando outra figuras em suas páginas.
Altere height e width que são largura e altura da figura email.gif.
Formatar o texto
Vamos ver agora alguns complementos.
Negrito e itálico.
Basta digitar
texto negrito texto itálico texto sublinhado
Linha divisória:
Pular uma linha
Tag para cores
Digite:
Texto aqui
Branco
White
Preto
Black
Azul
Blue
Amarelo
Yellow
Verde
Green
Laranja
Orange
Vermelho
Red
Rosa
Pink
Cinza
Gray
Ouro
Gold
Verde azulado
Teal
Azul marinho
Navy
Prata
Silver
Um exemplo completo:
texto aqui
ara usar a font do windows Arial com cor azul e tamanho pequeno digite:
Texto aqui
Face faz referência a Font do windows que poderia ser outra arial, impact, times new roman, etc...
Tabela ( Estrutura para organizar informações )
Vamos criar uma tabela com valores e produtos.
Como criar uma tabela com a linguagem Html?
Digite:
Produto 1
Produto 2
Produto 3
R$ 10,00
R$ 20,00
R$ 30,00
O que você precisa saber é que, quanto mais você inserir
entre
e
mais partes sua tabela terá. A Tabela começa com
e termina com a tag de fechamento
.
Width faz referência a largura. Border a borda, se você não colocar border sua tabela não vai ter bordas. TR significa ( Table row ), que marca uma linha de tabela. TD ( Table Data ) que são as células para os dados.
Os valores em %, indica o tamanho ocupado em cada espaço na tabela podendo ser um maior e outro menor.
Caso queira inserir uma imagem ou uma cor de fundo para tabela basta colocar na linha
a bgcolor="red" ou background="imagem.gif">
Exemplo:
tabela com fundo vermelho
Download:
Como fazer com que o visitante possa baixar um arquivo ou mesmo um programa.
Download é simplesmente baixar para sua máquina algum arquivo.
Então para que alguém baixe um arquivo de sua página faça assim.
Digite :
Baixar
Nome significa o nome do arquivo e extensão nada mais é do que o formato do arquivo, geralmente .zip.
No seu caso poderia ser Baixar.
As extensões mais usadas para download são .exe e .zip
Frame
O frame permite que você veja o índice e o conteúdo em uma única página. Ou ver duas páginas de uma só vez, bonito e prático.
Digite:
frame
Salve agora de um nome sugestivo as duas página não esquecendo a extensão .htm ou .html
Lembre que tabela.htm e teste2.htm são páginas de demonstração. Sua página de frame ou outra qualquer deverá ter nomes diferentes.
O mesmo exemplo mas com um visual diferente, ao invés do frame ser em colunas cols vamos deixar com a divisória na horizontal. Modificando o nome cols por rows.
frame
Caso o browser( navegador) do usuário não suportar frame digite:
Seu Browser não suporta frame.
Podemos ter também mais de dois frame( quadros em um página).
Exemplo:
frame
Então fica assim 1º frame< frame src="teste.htm"> o 2º frame< frame src="teste2.htm"> e o 3º frame.
Agora se você quer que um link de um Frame abra em outro Frame você precisa indicar os nomes dos quadros colocando após frame src"arquivo.htm name="frame1"
Exemplo:
frame2
O link da página link.htm precisa ser escrito assim
Download isso indica que a página Download abre no quadro maior de nome frame2
Acabou?
Nada disso, você deve publicar sua página na internet. Como fazer isso? Provedores de hospedagem oferecem isso, a diferença é que a máquina que conterá seus arquivos será o própio servidor.
Você também precisa registrar seu domínio, que será o nome pelo qual se chegará a seus documentos ( meusite.com )
Como fazer uma Home Page visualmente bonita e de rápido carregamento?
Visitantes acabam desistindo de carregar uma página que está demorando.
Muitas figuras em uma só página, fazem com que toda página fique lenta. Escolha de forma correta seus frames.
Frames que fazem voltar para a página principal acaba resultando em um erro.
Você pode fazer duas versões da mesma página ou um caminho sem frame, ou mesmo uma versão só com texto sem figuras. Use e abuse de frame, link, tabela, cores, javascript, vbscript em sua página.
Como enviar suas páginas
O modo mais comum é via ftp, por isso procure programas de ftp ( envio de arquivos ) freeware para envio de arquivos, caso tenha dúdivas sobre o tipo de programa a usar solicite ajuda seja aqui no site ou em fórum.
Tornando sua página conhecida
Para que sua página possa ser visitada por muitas pessoas é necessário que você faça uma inclusão em alguns sistemas de busca como o Cadê?, Achei!, Radar Uol, Zeez, Surf, Yahoo, Altavista, Lycos, etc...
Quando estiver incluindo sua página (URL) em algum sistema de busca evite palavras como a melhor , o site mais completo. Coloque as descrições verdadeiras e sua página será encontrada por muitos Internautas.
Se mesmo assim não estiver satisfeito com o número de visitantes de sua home Page faça parte de fóruns e outros e indique seu site para amigos, etc...
10 Motivos
1º Divulgar seu fã - clube
2º Falar sobre seu time de futebol predileto, ou seu esporte predileto
3º Colocar seu currículo na Internet
4º Vender um programa de sua própria autoria
5º Criar um site de ajuda para iniciantes em determinado tema
6º Fazer amigos e trocar idéias
7º Criar uma página para sua empresa ou onde trabalha
8º Divulgar sua cidade, seu bairro ou local onde visitou
9º Fazer um site de cartões animados
10ºColetar informações de seu interesse
Boa Sorte e lembre-se, nada se consegue sem esforço e em programação não é diferente,
dê sempre preferência a criar seus própios banners e códigos para valorizar seu trabalho.
HTML? Site?
