Como fazer um site. Todos os códigos html: Como incluir flash, vídeos, imagens, músicas, inserir links, download, e-mail, Meta Tags, link para download, Tabela de cores, Atributos, etc. Faça seu site grátis com os códigos.
e -Define uma linha da tabela.
-Define um cabeçalho da tabela.
-Define a coluna de informações.
-Define o título da tabela. Veja um exemplo:
O objetivo desta página é ensinar os princípios básicos para confecção de um site em HTML para que você possa fazer seu primeiro site.
Aqui você aprenderá códigos HTML e saberá como inserir um vídeo, como inserir uma música, como inserir um flash, Inserir imagens, Criar Links com imagens, Como fazer tabelas, Criar Links para e-mail, Criar Âncora, Caixa de Texto, Meta-Tags, Letreiros e Linhas, Imagens de Fundo, Fazer Listas, Links para Downloads, Formatar Textos, Tamanho e Cores de Fonte, Cabeçalhos, Atributos de Body, enfim, será sua iniciação para fazer um site em HTML.
Existem editores HTML que oferecem comodidade para confecção das páginas, tais como: FrontPage; Dreamweaver e outros. Mas não será necessário aprendendo os códigos abaixo e você poderá fazer no Word ou Bloco de Notas e salvar como .html.
Toda página é composta por Tags, que são os comandos html. Toda página deve comerçar com a tag e terminar com . Note que a barra "/" determina o fechamento da tag. Estas são as Tags fundamentais de sua página, isto é, toda página contém estas tags:
Na medida do possível irei acrescentando mais dicas para você fazer um site bem legal.ITENS BÁSICO EM HTML:
Texto; Imagens; Links; etc
As tags podem ser escritas em Maiúscula ou Minúscula Ex.: ou .
O Título da página aparecerá no alto da janela do browser e será referenciado em buscas pela rede. Ao ser adicionada à "Favoritos" (Bookmarks), o título será o atalho para ela.
ATRIBUTOS DE :
Através de , podemos definir cores dos textos, links e fundo das páginas, ou uma imagem de fundo. Temos então:
BGCOLOR - Cor de fundo
TEXT - Cor da fonte dos textos
LINK - Cor dos links (padrão: azul)
ALINK - Cor dos links, quando clicados (padrão: vermelho)
VLINK - Cor dos Links, depois de visitados (padrão: roxo)
BACKGROUND - Imagem de fundo: Indica o URL da imagem.
Podemos definir tudo de uma só vez, colocando o seguinte código:
Não está no código acima o atributo BACKGROUND pois não é padrão.
C O R E S NO SEU SITE:
Você pode escrever as cores (em inglês) ou colocar seu código. Porém, para escrever só é aceito 16 cores, que são:
Preto = black - código = #000000
Branco = white - código = #FFFFFF
Azul = blue - código = #0000FF
Amarelo = yellow - código = #FFFF00
Verde = green - código = #008000
Lima = lime - código = #00ff00
Marron = maroon - código = #800000
Oliva = olive - código = #808000
Azul Celeste = aqua - código = #00ffff
Lilás = fuchsia - código = #ff00ff
Cinza = gray - código = #808080
Azul escuro = navy - código = #000080
Roxo = purple - código = #800080
Verde escuro = teal - código = #008080
Cinza claro = silver - código = #c0c0c0
Vermelho = red - código = #FF0000
Mas você pode definir varias tonalidades e cores, basta ter a lista de códigos das cores, ou
CABEÇALHOS :
O tamanho das letras ou fontes é definido pela tag - "Headings".
A tag normalmente é usada em CABEÇALHOS e há seis níveis. Com esta tag você pode definir o tamanho das letras, mas não o tipo da fonte. Veja abaixo como fica:
Este é o tamanho:
Este é o tamanho:
Este é o tamanho:
Este é o tamanho:
Este é o tamanho:
Este é o tamanho:
Pode-se alinhar os cabeçalhos
Texto centralizado
Texto alinhado à direita
Texto alinhado à esquerda
TAMANHO E CORES DAS LETRAS :
Você também pode usar a tag para definir o tamanho, bem como sua cor e tipo da fonte.
- Define o tipo de letra
- Define a cor da letra
- Define o tamanho da letra
Veja abaixo alguns exemplos:
Fica assim
Fica assim
Fica assim
Fica assim
* Note que você define com mais precisão o tamanho das letras do que a tag .
COMO FORMATAR OS TEXTOS :
Formatando o texto em Negrito, Itálico, Sublinhado e Centralizado. TAGS: - Negrito, - Sublinhado, - Itálico e
- Centralizado
Texto em Negrito
Texto Sublinhado
Texto em Itálico
ou Texto Riscado assim
Como em H2O - O número 2 ficou em baixo.
Como em Km2 - O número 2 ficou em cima.
Texto Centralizado
Você também pode acumular os efeitos, agrupando os códigos Ex.:
O texto fica assim
COMO FAZER PARÁGRAFOS E LINHAS :
Não basta você teclar ENTER para que a linha vá para baixo. Você terá que colocar uma TAG para um parágrafo ou para uma nova linha.
Para parágrafo usar a TAG
e para linha usar
Exemplo:
Primeiro Parágrafo
Primeira Linha
Segundo Parágrafo
Segunda Linha
Note que cada vez que você coloca a TAG
estará fazendo uma nova linha, que também não deixa de ser um parágrafo.
Se você escrever sem usar as tags
ou
o próprio browser quebra as linhas automaticamente.
ALINHAMENTO COM A TAG
:
Para alinhar os parágrafos basta incluir depois do "P" o parâmetro "align + tipo de alinhamento", conforme abaixo:
Texto alinhado à esquerda.
Texto alinhado à direita.
Texto centralizado.
Texto justificado.
COMO INCLUIR IMAGENS NO SITE :
A TAG utilizada é: Atributos da Imagem:
WIDTH - Define a largura da imagem.
HEIGHT - Define a altura da imagem.
ALT - Texto que aparece quando é passado o mouse sobre a imagem
BORDER - É um valor atribuido à largura da borda da imagem (Contorno). Veja alguns exemplos:
Note que no ultimo exemplo especificamos o tamanho da imagem. Não definindo este tamanho, a imagem aparecerá no tamanho original. Você pode especificar um tamanho menor do que a original, pois não acarretará perda de qualidade da imagem, mas se fizer ao contrário, isto é, definir um tamanho maior que a original perderá qualidade de imagem.
O correto é você ter a imagem do tamanho certo que deseja que apareça na página. Evite colocar imagens maiores que 50 Kb. Quanto maior a imagem mais tempo leverá para carregar. Alinhamento texto de imagens:
Há também os atributos de moldura, que definem o espaço vertical e horizontal entre as imagens e os textos circundantes, onde: VSPACE=espaço vertical> HSPACE=espaço horizontal> Ex.:
COMO FAZER OS LINKS :
Links são pontos clicáveis que levam a qualquer site da internet ou qualquer página do site e até mesmo qualquer ponto da própria página. A TAG usada é: descrição do lugar Exemplos Conheça Extrema-MGResultado:
Note que formou-se um link para um determinado site que foi descrito no código acima.
Se você clicar abrirá o referido site em uma outra janela, isto é, sem que você saia deste site, isto porque foi adicionado o atributo "TARGET", então na verdade, para você não fechar esta janela, o código inserido aqui foi: Conheça Extrema-MGPara fazer um link para uma outra página do seu site use: Clic aqui - Note que após o nome da página é colocado a extensão .html
COMO FAZER IMAGEM COM LINK :
É simples fazer uma imagem ter um link. Ao invés de colocar o texto com a descrição do lugar, coloque a TAG de imagem. Veja o exemplo: Sendo que:
https://www.extremaonline.com é o URL (endereço) do site.
local é caso você tenha armazenado suas imagens em uma pasta. Ex. Pasta "Imagens".
nome da imagem + extensão Exemplo: minhafoto.jpg ou barra.gif
Veja o exemplo abaixo, note que formou um link na figura e o levará ao referido site acima. Lembre-se: foi usado a target"_blank" para abrir em uma nova janela.
COMO FAZER LINKS PARA DOWNLOAD :
Na verdade não existe o comando específico. O que acontece é que quando criamos um link para um arquivo que o navegador não reconhece, ele automaticamente inicia o download, por exemplo, o navegador não reconhece os arquivos com extensão ZIP, EXE, RAR, etc., nestes casos ele inicia o download. Veja exemplos:
Clic aqui para baixar
Certas extensões de arquivos fazem com que os navegadores, em vez de fazer o download, abrem com programas instalados no computador.
Se você fazer um link para um arquivo de vídeo ".avi" o navegador abrirá o programa para exibir esse vídeo. Para que isso não aconteça, sempre compacte seus arquivos para download no formato zip ou rar, por exemplo, tornando-os mais leves (menores) e download será mais rápido.
Nesta página já existem várias listas. Logo abaixo já tem outra lista com os nomes:
Listas Ordenadas
Listas sem ordenação
Listas Encadeadas
Exemplos: A lista acima (Ordenada) foi feita com os seguintes códigos:
Os números são inseridos automaticamente.
Se você quiser trocar os números por letras, Ex.: A, B, C. ao invés de usar só
use
- Onde "1" indica para começar pela primeira letra do alfabeto. Lista Sem Ordenação:
Resultado:
Primeiro item.
Segundo item.
Terceiro item. As "bolinhas" são inseridas automaticamente.
Para você colocar uma imagem de fundo no seu site é só colocar um atributo dentro da TAG , assim: .
Quando a imagem é menor que o tamanho da tela, o navegador duplica essa imagem tantas vezes forem necessárias para cobrir todo o espaço da tela.
Existem vários tamanhos de telas. Lembre-se: imagens grandes demoram à carregar.
Para colocar um letreiro na página é utilizado a TAG
e
e
e
1a.coluna
2a.coluna
3a.coluna
1a.linha
1a.linha
1a.linha
Você pode colocar o código acima em apenas uma linha. Resultado:
1a.coluna
2a.coluna
3a.coluna
1a.linha
1a.linha
1a.linha
Para que a tabela fique centralizada, como acima, use a tag
antes do código e
depois do código.
Também pode-se alinhar o texto dentro das células, utilizando os seguintes atributos: Align="left" -Alinha o texto à esquerda. Align="right" -Alinha o texto à direita. Align="center" -Alinha o texto no centro. Valign="top" -Alinha o texto no topo da célula. Valign="middle" -Alinha o texto no meio da célula. Valign="bottom" -Alinha o texto na parte inferior da célula. ADICIONANDO UMA LISTA DENTRO DA CÉLULA:
Resume-se em mais de uma página em uma só tela. É necessário criar três páginas para criar uma página com dois frames, ou seja, uma página principal onde terá as tags referente ao frame que deverá ser salva como: index.html e as outras duas serão abertas dentro desta página principal. Exemplo:
Os códigos acima só serão colocados na página principal que será salva como "index.html".
Normalmente nesse tipo de frame a página1.html é usada para os menus e a página2.html para conteúdo geral do site.
Neste caso o atributo COLS divide as colunas ou seja, 20% do lado esquerdo e 80% do lado direito da página.
Sempre da esquerda para direita. Então a página1.html ocupará 20% do espaço e a página2.html ocupará 80% (espaço vertical). Copie o código acima, cole no Bloco de Notas e salve como "index.html" depois dê 2 cliques nesse arquivo para visualizá-lo aberto em seu browser.
As tags e é usado somente para avisar usuário que utiliza browser muito antigo que a página contém frames, que não as conseguirá visualizar (muito difícil acontecer). Exemplo 2:
Copie o código acima, cole no Bloco de Notas e salve como "index.html" depois dê 2 cliques nesse arquivo para visualizá-lo aberto em seu browser. Exemplo 3:
Copie o código acima, cole no Bloco de Notas e salve como "index.html" depois dê 2 cliques nesse arquivo para visualizá-lo aberto em seu browser.
Para inserir uma música em sua página, antes de fechar a tag coloque a tag: .A Extensão do arquivo pode ser .mid ou .wav.
Para que a música toque novamente, sempre, acrescente: loop="-1" Assim:
No exemplo acima a música tocará sem que apareça o "display" na tela. O internauta não terá como parar, pausar ou iniciar. Para que apareça o display na tela, como você vê abaixo, coloque está tag:
* Note que você terá que acionar PLAY para iniciar a música.
* Para que abra a página já tocando a música, coloque este código:
* Você ainda pode definir o tamanho do display, assim:
Para inserir um flash (arquivo com extensão .swf), como abaixo, coloque este código depois da tag :
Note no código acima que você pode especificar o tamanho da imagem. Se você não colocar os atributos "WIDTH e HEIGHT" a imagem ficará no tamanho original (tamanho que foi criada).
Para inserir um vídeo (arquivo com extensão .avi), como abaixo, coloque este código depois da tag
As tags podem ser escritas em Maiúscula ou Minúscula Ex.: ou .
O Título da página aparecerá no alto da janela do browser e será referenciado em buscas pela rede. Ao ser adicionada à "Favoritos" (Bookmarks), o título será o atalho para ela.
O tamanho das letras ou fontes é definido pela tag - "Headings".
A tag normalmente é usada em CABEÇALHOS e há seis níveis. Com esta tag você pode definir o tamanho das letras, mas não o tipo da fonte. Veja abaixo como fica:
Não basta você teclar ENTER para que a linha vá para baixo. Você terá que colocar uma TAG para um parágrafo ou para uma nova linha.
Para parágrafo usar a TAG
e para linha usar
Exemplo:
Primeiro Parágrafo
Primeira Linha
Segundo Parágrafo
Segunda Linha
Note que cada vez que você coloca a TAG
estará fazendo uma nova linha, que também não deixa de ser um parágrafo.
Se você escrever sem usar as tags
ou
o próprio browser quebra as linhas automaticamente.
ALT - Texto que aparece quando é passado o mouse sobre a imagem
BORDER - É um valor atribuido à largura da borda da imagem (Contorno). Veja alguns exemplos:
Note que no ultimo exemplo especificamos o tamanho da imagem. Não definindo este tamanho, a imagem aparecerá no tamanho original. Você pode especificar um tamanho menor do que a original, pois não acarretará perda de qualidade da imagem, mas se fizer ao contrário, isto é, definir um tamanho maior que a original perderá qualidade de imagem.
O correto é você ter a imagem do tamanho certo que deseja que apareça na página. Evite colocar imagens maiores que 50 Kb. Quanto maior a imagem mais tempo leverá para carregar. Alinhamento texto de imagens:
Há também os atributos de moldura, que definem o espaço vertical e horizontal entre as imagens e os textos circundantes, onde: VSPACE=espaço vertical> HSPACE=espaço horizontal> Ex.:
Links são pontos clicáveis que levam a qualquer site da internet ou qualquer página do site e até mesmo qualquer ponto da própria página. A TAG usada é: descrição do lugar Exemplos Conheça Extrema-MGResultado:
Note que formou-se um link para um determinado site que foi descrito no código acima.
Se você clicar abrirá o referido site em uma outra janela, isto é, sem que você saia deste site, isto porque foi adicionado o atributo "TARGET", então na verdade, para você não fechar esta janela, o código inserido aqui foi: Conheça Extrema-MGPara fazer um link para uma outra página do seu site use: Clic aqui - Note que após o nome da página é colocado a extensão .html
É simples fazer uma imagem ter um link. Ao invés de colocar o texto com a descrição do lugar, coloque a TAG de imagem. Veja o exemplo: Sendo que:
https://www.extremaonline.com é o URL (endereço) do site.
local é caso você tenha armazenado suas imagens em uma pasta. Ex. Pasta "Imagens".
nome da imagem + extensão Exemplo: minhafoto.jpg ou barra.gif
Veja o exemplo abaixo, note que formou um link na figura e o levará ao referido site acima. Lembre-se: foi usado a target"_blank" para abrir em uma nova janela.
Na verdade não existe o comando específico. O que acontece é que quando criamos um link para um arquivo que o navegador não reconhece, ele automaticamente inicia o download, por exemplo, o navegador não reconhece os arquivos com extensão ZIP, EXE, RAR, etc., nestes casos ele inicia o download. Veja exemplos:
Clic aqui para baixar
Certas extensões de arquivos fazem com que os navegadores, em vez de fazer o download, abrem com programas instalados no computador.
Se você fazer um link para um arquivo de vídeo ".avi" o navegador abrirá o programa para exibir esse vídeo. Para que isso não aconteça, sempre compacte seus arquivos para download no formato zip ou rar, por exemplo, tornando-os mais leves (menores) e download será mais rápido.
Nesta página já existem várias listas. Logo abaixo já tem outra lista com os nomes:
Listas Ordenadas
Listas sem ordenação
Listas Encadeadas
Exemplos: A lista acima (Ordenada) foi feita com os seguintes códigos:
Os números são inseridos automaticamente.
Se você quiser trocar os números por letras, Ex.: A, B, C. ao invés de usar só
use
- Onde "1" indica para começar pela primeira letra do alfabeto. Lista Sem Ordenação:
Resultado:
Primeiro item.
Segundo item.
Terceiro item. As "bolinhas" são inseridas automaticamente.
Para você colocar uma imagem de fundo no seu site é só colocar um atributo dentro da TAG , assim: .
Quando a imagem é menor que o tamanho da tela, o navegador duplica essa imagem tantas vezes forem necessárias para cobrir todo o espaço da tela.
Existem vários tamanhos de telas. Lembre-se: imagens grandes demoram à carregar.
VSPACE=espaço vertical>
CLICAR AQUI