Tempo de leitura: 19 minutos
INTRODUÇÃO AO HTML – COMO FAZER UM SITEComo 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.
|
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 :
Não está no código acima o atributo BACKGROUND pois não é padrão.
C O R E S NO SEU SITE:
Mas você pode definir varias tonalidades e cores, basta ter a lista de códigos das cores, ou
CABEÇALHOS :
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:
Pode-se alinhar os cabeçalhos
TAMANHO E CORES DAS LETRAS :
COMO FORMATAR OS TEXTOS :
COMO FAZER PARÁGRAFOS E LINHAS :
ALINHAMENTO COM A TAG :
COMO INCLUIR IMAGENS NO SITE :
Atributos da Imagem:
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:
COMO FAZER OS LINKS :
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 “Clic aqui – Note que após o nome da página é colocado a extensão .html
COMO FAZER IMAGEM COM LINK :
Veja o exemplo abaixo, note que formou um link na figura e o levará ao referido site acima.



COMO FAZER LINKS PARA DOWNLOAD :
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.
L I S T A S :
- Listas Ordenadas
- Listas sem ordenação
- Listas Encadeadas
COMO INSERIR IMAGEM DE FUNDO NO SEU SITE:
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.
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.
COMO FAZER LETREIROS E LINHAS :
Resultado
TEXTO
Onde: DIRECTION= indica a direção “LEFT” ou “RIGHT”.
BGCOLOR= indica a cor de fundo do letreiro.
WIDTH= indica a porcentagem que o letreiro ocupará sua página.
COMO FAZER TABELAS :
e
e possue os seguintes atributos:
border=”valor” -Onde o “valor” define a largura da borda (contorno).
cellspacing=”valor” -Onde o “valor” define o espaço horizontal entre as células.
cellpadding=”valor” -Onde o “valor” define o espaço vertical entre as células.
width=”valor” -Onde o “valor” define a largura da tabela em pixels ou em porcentagem.
height=”valor” -Onde o “valor” define a altura da tabela em pixels ou em porcentagem.
bgcolor=”#cor” -Define a cor de fundo da tabela.
bordercolor=”#cor” -Define a cor da borda.
background=”imagem.jpg” -Define uma imagem de fundo.
A tabela possui alguns comandos que são:
<.TR> e
-Define uma linha da tabela.
<.TH> e -Define um cabeçalho da tabela.
<.TD> e -Define a coluna de informações.
<.CAPTION> e -Define o título da tabela.
1a.coluna | 2a.coluna | 3a.coluna |
Você pode colocar o código acima em apenas uma linhaResultado:
1a.coluna | 2a.coluna | 3a.coluna |
1a.linha | 1a.linha | 1a.linha |
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:
<.TABLE BORDER=”1″ <.TD>lista dentro da célula<.UL> <.LI>1 item
- 2 item
- 3 item<./UL> <./TD>
Resultado:
lista dentro da célula
|
SITE COM FRAMES :
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 <.FRAMESET COLS=”20%, 80%”> o atributo COLS divide as colunas ou seja, 20% do lado esquerdo e 80% do lado direito da página. 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.
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 no Bloco de Notas e salve como “index.html” depois dê 2 cliques nesse arquivo para visualizá-lo aberto em seu browser.
Copie o código no Bloco de Notas e salve como “index.html” depois dê 2 cliques nesse arquivo para visualizá-lo aberto em seu browser.
Ir para o topo
COMO INSERIR MÚSICA NO SITE:
Para que a música toque novamente, sempre, acrescente: loop=”-1″ Assim:
<.BGSOUND SRC=”musica.mid” loop=”-1.”>
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:
<.EMBED SRC=”musica.mid.” AUTOSTART=”.FALSE” LOOP=”TRUE”.>
* Note que você terá que acionar PLAY para iniciar a música.
<.EMBED SRC=”musica.mid” AUTOSTART= LOOP=”TRUE”.>
* Você ainda pode definir o tamanho do display, assim:
<.EMBED SRC=”musica.mid” AUTOSTART= LOOP=”TRUE” WIDTH=145 HEIGHT=25.>
COMO INSERIR FLASH NO SITE:
<.OBJECT CLASSID=”FLASH” CODEBASE=”http://download.macromedia.com/pub/shockwave/cabs/
flash/swflash.cab#version=6,0,0,0 “.> <.EMBED SRC=”arquivo.swf” WIDTH=”200″ HEIGHT=”200″ TYPE=”application/x-shockwave-flash” PLUGINSPAGE=”http://www.macromedia.com/go/getflashplayer” <./OBJECT.>
COMO INSERIR VÍDEO NO SITE:
<.EMBED SRC=”arquivo.avi”
META TAGS :
- Após feito seu site, não basta apenas coloca-lo na internet somente com a tag título,
<.TITLE> Título da página<./TITLE>, é preciso que os buscadores, como o Google, Yahoo, etc “achem” o seu site, e outras informações, por isso, você deve inserir as METAS TAGS necessárias, entre <.HEAD> e <./HEAD> conforme abaixo: - <.META NAME=”keywords” CONTENT=”palavras chaves“.>
Note que onde está escrito “palavras chaves” você deve colocar as palavras pelo qual os buscadores encontrarão seu site quando procurado na pesquisa pelo Google, Yahoo, por exemplo. As palavras deverão ser escritas em minúsculas e separadas por uma vírgula e logo após um espaço. Ex.: “bonito, fotos, casamento, dicas, downloads, etc”. - <.META NAME=”Description” CONTENT=”descrição do seu site.“.>
Informe do que se trata seu site, coerente com o título e as palavras chaves.
Ex.: “Site bonito, com fotos de casamento, downloads e dicas”. - <.META NAME=”AUTHOR” CONTENT=”seu nome.“>
Coloque seu nome, pois é ético e fornece confiança ao site. - <.META NAME=”ROBOTS” CONTENT=”INDEX, FOLLOW”.>Sendo:
“index,follow” – Indexa a página inicial e todas as páginas nela indicadas.
“noindex,follow” – Não indexa a página inicial, mas indexa as páginas nela indicada.
“index,nofollow” – Indexa a página inicial, mas não os links que ela indique.
“noindex,nofollow” – Não indexa nem a página inicial e nem os links.
Se é seu primeiro site, está aprendendo, use o primeiro exemplo “index,follow”.
Aconselho você que fez um site com FRAMES usar “index,follow” somente na página que você salvou como index.html, e nas outra páginas “noindex,nofollow” ou simplesmente não use essa tag nessas páginas. - <.META HTTP-EQUIV=”CONTENT-LANGUAGE” CONTENT=”pt”.>
Coloque em todas as páginas do site, instruindo os navegadores que seu site é feito em lingua portuguêsa.
Indique que programa usou para fazer o site, FrontPage, Bloco de Notas, etc.
- <.META HTTP-EQUIV=”CONTENT-TYPE” CONTENT=”text/html; charset=iso-8859-1.”.>
Indica que você escreveu normalmente seus textos nas páginas html (com acentuação, etc) sem usar caracteres especiais (ASCII), e a META TAG acima indica isto (palavras originarias do Latim).
Existem outras Meta Tags que você deve verificar:
COMO FAZER UM LINK PARA ENVIAR E-MAIL :
Note que ao ser clicado no link (Clic Aqui), abrirá o programa que está instalado no computador, exemplo: Outlook, Incredimail, etc. Porém nem todos tem esses programas instalados, vão buscar seus e-mails diretamente nos sites, motivo pelo qual você deve sempre deixar visível seu endereço de e-mail, como abaixo:
Meu e-mail é: [email protected] se preferir, Clic Aqui
COMO FAZER UMA CAIXA DE TEXTO :
COMO FAZER UMA ÂNCORA :
Você pode redirecionar o usuário para qualquer ponto de sua página ou para outro ponto de outra página.
O código de destino, isto é, o ponto de chegada ao ser clicado é:
Código:
E o código do comando “ir para” é:
Código:ir para ancora
Você pode criar vários pontos, como:
e ir para ancora2
Para fazer o usuário “Ir para o topo” não é necessário uma âncora como acima, tem um código especial para isto:
Código: <.a href=”#top”.>Ir para o topo<./a>
Para ir à outra página:
Código: .<.a href=”nomedapagina.html#ancora”.>ir para ancora<./a>
Utilizando uma imagem como âncora:
Código: <.a href=”#ancora”.><.img src=”imagem.jpg”.><./a>
Ir para o topo
OUTRAS DICAS:
Você também pode ganhar dinheiro com seu site em programas de Afiliados.
Como?: Quantidade é a alma do negócio. Consulte Beruby O portal de economia e ganhos na internet
Para ganhar conectado a internet: Funciona Mesmo Gomez Peer Zone e depois os cursos para vender Cursos 24 Horas
O mais legal, é o preço mais justo que já ví: Adsense em seu Tumblr
O gerenciador de Twitter: Manage Flitter
Conheça nosso blog, Facebook, Twitter minhas redes sociais: Sobre mim
Se você tiver alguma dúvida, vá no INDEX (menu acima) e entre em contato, teremos prazer em ajudar.
Agora que já dei essas dicas, entre nesse projeto que poderá mudar sua vida, assim como mudou a minha, visite: Projeto do Bem