TUDO SOBRE HTML
INTRODUÇÃO AO HTML - COMO FAZER UM SITE
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.
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 <HTML> e terminar com </HTML>. 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:
<HTML>
<HEAD>
<TITLE> Título da página </TITLE>
</HEAD>
<BODY> Texto; Imagens; Links; etc </BODY>
</HTML>
As tags podem ser escritas em Maiúscula ou Minúscula Ex.: <html> ou <HTML>.
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.
Ir para o topo
ATRIBUTOS DE <BODY> :
Através de <BODY>, 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:
<BODY BGCOLOR="YELLOW" TEXT="BLACK" LINK="BLUE" ALINK="RED" VLINK="PURPLE">
Não está no código acima o atributo BACKGROUND pois não é padrão.
Ir para o topo
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
CLICAR AQUI
Ir para o topo
CABEÇALHOS :
O tamanho das letras ou fontes é definido pela tag <H> - "Headings".
A tag <H> 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:<H1>
Este é o tamanho:<H2>
Este é o tamanho:<H3>
Este é o tamanho:<H4>
Este é o tamanho:<H5>
Este é o tamanho:<H6>
Pode-se alinhar os cabeçalhos
<H2 ALIGN=CENTER>Texto centralizado</H2>
<H2 ALIGN=RIGHT>Texto alinhado à direita</H2>
<H2 ALIGN=LEFT>Texto alinhado à esquerda</H2>
Ir para o topo
TAMANHO E CORES DAS LETRAS :
Você também pode usar a tag <FONT> para definir o tamanho, bem como sua cor e tipo da fonte.
<FONT FACE> - Define o tipo de letra
<FONT COLOR> - Define a cor da letra
<FONT SIZE> - Define o tamanho da letra
Veja abaixo alguns exemplos:
<FONT FACE="ARIAL" SIZE="1" COLOR="RED">Fica assim</FONT>
<FONT FACE="ARIAL" SIZE="2" COLOR="BLUE">Fica assim</FONT>
<FONT FACE="ARIAL" SIZE="3" COLOR="BLACK">Fica assim</FONT>
<FONT FACE="TIMES" SIZE="5" COLOR="BLUE">Fica assim</FONT>
* Note que você define com mais precisão o tamanho das letras do que a tag <H>.
Ir para o topo
COMO FORMATAR OS TEXTOS :
Formatando o texto em Negrito, Itálico, Sublinhado e Centralizado. TAGS:
<B> - Negrito, <U> - Sublinhado, <I> - Itálico e <CENTER> - Centralizado
<B>Texto em Negrito</B>
<U>Texto Sublinhado</U>
<I>Texto em Itálico</I>
<STRIKE> ou <S> Texto Riscado assim
<SUB> Como em H2O - O número 2 ficou em baixo.
<SUP> Como em Km2 - O número 2 ficou em cima.
<CENTER>Texto Centralizado</CENTER>
Você também pode acumular os efeitos, agrupando os códigos Ex.:
<CENTER><B><U><I>O texto fica assim</B></U></I></CENTER>
Ir para o topo
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 <P> e para linha usar <BR> Exemplo:
<P>
Primeiro Parágrafo
<BR>
Primeira Linha
<P>
Segundo Parágrafo
<BR>
Segunda Linha
Note que cada vez que você coloca a TAG <BR> estará fazendo uma nova linha, que também não deixa de ser um parágrafo.
Se você escrever sem usar as tags <BR> ou <P> o próprio browser quebra as linhas automaticamente.
Ir para o topo
ALINHAMENTO COM A TAG <P> :
Para alinhar os parágrafos basta incluir depois do "P" o parâmetro "align + tipo de alinhamento", conforme abaixo:
<P ALIGN="LEFT"> Texto alinhado à esquerda.
<P ALIGN="RIGHT"> Texto alinhado à direita.
<P ALIGN="CENTER"> Texto centralizado.
<P ALIGN="JUSTIFY"> Texto justificado.
Ir para o topo
COMO INCLUIR IMAGENS NO SITE :
A TAG utilizada é: <img src="nome da imagem+extensão"(gif,jpg,bmp,etc)>
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:
<img src="zero.gif" alt="Seu texto" border="0">
<img src="zero.gif" alt="Seu texto" border="1">
<img src="zero.gif" alt="Seu texto" border="2" width="20" height="20">
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:
<img src="zero.gif" align="top">
<img src="zero.gif" align="middle">
<img src="zero.gif" align="left">
<img src="zero.gif" align="right">
Há também os atributos de moldura, que definem o espaço vertical e horizontal entre as imagens e os textos circundantes, onde:
<IMG SRC="imagem.gif" VSPACE=espaço vertical>
<IMG SRC="imagem.gif" HSPACE=espaço horizontal>
Ex.: <IMG SRC="imagem.gif" ALIGN="LEFT" WIDTH="10" HEIGHT="10" VSPACE="50">
<IMG SRC="imagem.gif" ALIGN="RIGHT" WIDTH="10" HEIGHT="10" HSPACE="30">
Ir para o topo
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 é:
<a href="nome do lugar à ser levado">descrição do lugar</a>
Exemplos
<a href="http://www.extremaonline.com">Conheça Extrema-MG</a> Resultado:
Conheça Extrema-MG
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:
<a href="http://www.extremaonline.com" target="_blank">Conheça Extrema-MG</a> Para fazer um link para uma outra página do seu site use:
<a href="pagina_tal.html">Clic aqui</a> - Note que após o nome da página é colocado a extensão .html
INTRODUÇÃO AO HTML - COMO FAZER UM SITE
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.
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 <HTML> e terminar com </HTML>. 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:
<HTML>
<HEAD>
<TITLE> Título da página </TITLE>
</HEAD>
<BODY> Texto; Imagens; Links; etc </BODY>
</HTML>
As tags podem ser escritas em Maiúscula ou Minúscula Ex.: <html> ou <HTML>.
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.
Ir para o topo
ATRIBUTOS DE <BODY> :
Através de <BODY>, 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:
<BODY BGCOLOR="YELLOW" TEXT="BLACK" LINK="BLUE" ALINK="RED" VLINK="PURPLE">
Não está no código acima o atributo BACKGROUND pois não é padrão.
Ir para o topo
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
CLICAR AQUI
Ir para o topo
CABEÇALHOS :
O tamanho das letras ou fontes é definido pela tag <H> - "Headings".
A tag <H> 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:<H1>
Este é o tamanho:<H2>
Este é o tamanho:<H3>
Este é o tamanho:<H4>
Este é o tamanho:<H5>
Este é o tamanho:<H6>
Pode-se alinhar os cabeçalhos
<H2 ALIGN=CENTER>Texto centralizado</H2>
<H2 ALIGN=RIGHT>Texto alinhado à direita</H2>
<H2 ALIGN=LEFT>Texto alinhado à esquerda</H2>
Ir para o topo
TAMANHO E CORES DAS LETRAS :
Você também pode usar a tag <FONT> para definir o tamanho, bem como sua cor e tipo da fonte.
<FONT FACE> - Define o tipo de letra
<FONT COLOR> - Define a cor da letra
<FONT SIZE> - Define o tamanho da letra
Veja abaixo alguns exemplos:
<FONT FACE="ARIAL" SIZE="1" COLOR="RED">Fica assim</FONT>
<FONT FACE="ARIAL" SIZE="2" COLOR="BLUE">Fica assim</FONT>
<FONT FACE="ARIAL" SIZE="3" COLOR="BLACK">Fica assim</FONT>
<FONT FACE="TIMES" SIZE="5" COLOR="BLUE">Fica assim</FONT>
* Note que você define com mais precisão o tamanho das letras do que a tag <H>.
Ir para o topo
COMO FORMATAR OS TEXTOS :
Formatando o texto em Negrito, Itálico, Sublinhado e Centralizado. TAGS:
<B> - Negrito, <U> - Sublinhado, <I> - Itálico e <CENTER> - Centralizado
<B>Texto em Negrito</B>
<U>Texto Sublinhado</U>
<I>Texto em Itálico</I>
<STRIKE> ou <S> Texto Riscado assim
<SUB> Como em H2O - O número 2 ficou em baixo.
<SUP> Como em Km2 - O número 2 ficou em cima.
<CENTER>Texto Centralizado</CENTER>
Você também pode acumular os efeitos, agrupando os códigos Ex.:
<CENTER><B><U><I>O texto fica assim</B></U></I></CENTER>
Ir para o topo
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 <P> e para linha usar <BR> Exemplo:
<P>
Primeiro Parágrafo
<BR>
Primeira Linha
<P>
Segundo Parágrafo
<BR>
Segunda Linha
Note que cada vez que você coloca a TAG <BR> estará fazendo uma nova linha, que também não deixa de ser um parágrafo.
Se você escrever sem usar as tags <BR> ou <P> o próprio browser quebra as linhas automaticamente.
Ir para o topo
ALINHAMENTO COM A TAG <P> :
Para alinhar os parágrafos basta incluir depois do "P" o parâmetro "align + tipo de alinhamento", conforme abaixo:
<P ALIGN="LEFT"> Texto alinhado à esquerda.
<P ALIGN="RIGHT"> Texto alinhado à direita.
<P ALIGN="CENTER"> Texto centralizado.
<P ALIGN="JUSTIFY"> Texto justificado.
Ir para o topo
COMO INCLUIR IMAGENS NO SITE :
A TAG utilizada é: <img src="nome da imagem+extensão"(gif,jpg,bmp,etc)>
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:
<img src="zero.gif" alt="Seu texto" border="0">
<img src="zero.gif" alt="Seu texto" border="1">
<img src="zero.gif" alt="Seu texto" border="2" width="20" height="20">
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:
<img src="zero.gif" align="top">
<img src="zero.gif" align="middle">
<img src="zero.gif" align="left">
<img src="zero.gif" align="right">
Há também os atributos de moldura, que definem o espaço vertical e horizontal entre as imagens e os textos circundantes, onde:
<IMG SRC="imagem.gif" VSPACE=espaço vertical>
<IMG SRC="imagem.gif" HSPACE=espaço horizontal>
Ex.: <IMG SRC="imagem.gif" ALIGN="LEFT" WIDTH="10" HEIGHT="10" VSPACE="50">
<IMG SRC="imagem.gif" ALIGN="RIGHT" WIDTH="10" HEIGHT="10" HSPACE="30">
Ir para o topo
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 é:
<a href="nome do lugar à ser levado">descrição do lugar</a>
Exemplos
<a href="http://www.extremaonline.com">Conheça Extrema-MG</a> Resultado:
Conheça Extrema-MG
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:
<a href="http://www.extremaonline.com" target="_blank">Conheça Extrema-MG</a> Para fazer um link para uma outra página do seu site use:
<a href="pagina_tal.html">Clic aqui</a> - Note que após o nome da página é colocado a extensão .html
Dicas,
HTML,
outros,
Passo 1 para criar seus Sites
15:51
0 Responses to "Introdução de HTML parte 1"
Postar um comentário