CodigosnaWeb   forum   Ler o feed   Assinar o feed

e mais partes sua tabela terá. A Tabela começa com


Fóruns sobre programação



seta 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:
texto relacionado a figura

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


texto relacionado a figura



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
enviar e- mail


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 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.

Rolar para o topo