Como criar um 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, Meta-Tags, Letreiros e Linhas,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.
Itens básicos em html
< H T M L >
< H E A D >
< T I T L E > Título da página < / T I T L E >
< / H E A D >
< B O D Y > Texto; Imagens; Links; etc < / B O D Y >
< / H T M L >
As tags podem ser escritas em Maiúscula ou Minúscula Ex.: "< h t m l >" ou "< H T M L >".
Atributos de < B O D Y > :
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: < B O D Y B G C O L O R ="Y E L L O W" T E X T ="B L A C K" L I N K = " B L U E " A L I N K = " R E D " V L I N K =" P U R P L E ">
Não está no código acima o atributo BACKGROUND pois não é padrão.
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.
Cores 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
Cabeçalhos
O tamanho das letras ou fontes é definido pela tag 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:
Você também pode usar a tag < F O N T > para definir o tamanho, bem como sua cor e tipo da fonte.
< F O N T F A C E > - Define o tipo de letra
< F O N T C O L O R > - Define a cor da letra
< F O N T S I Z E > - Define o tamanho da letra
< F O N T F A C E =" A R I A L " S I Z E =" 1 " C O L O R =" R E D ">Ficará assim< / F O N T >
< F O N T F A C E=" A R I A L" S I Z E =" 2 " C O L O R = " B L U E ">Ficará assim < / F O N T >
< F O N T F A C E = " A R I A L" S I Z E = " 3 " C O L O R =" B L A C K ">Ficará assim < / F O N T >
< F O N T F A C E = " T I M E S " S I Z E = " 5 " C O L O R = " B L U E " > Ficará assim < / F O N T >
* Note que você define com mais precisão o tamanho das letras do que a tag Formatando o texto em Negrito, Itálico, Sublinhado e Centralizado.
< B > - Negrito, < U > - Sublinhado, < I > - Itálico e < C E N T E R> - Centralizado
Exemplos:
< B >Texto em Negrito< / B >
< U >Texto Sublinhado< / U >
< I >Texto em Itálico< / I >
< /s > < s u b > Como em H2O : O número 2 ficou em baixo.
< S U P > Como em Km2- O número 2 ficou em sima.
Você também pode acumular os efeitos, agrupando os códigos Ex.:
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 < B R > Exemplo:
< P >
Primeiro Parágrafo
< B R >
Primeira Linha
< P >
Segundo Parágrafo
< B R >
Segunda Linha
Note que cada vez que você coloca a TAG < B R > estará fazendo uma nova linha, que também não deixa de ser um parágrafo.
Se você escrever sem usar as tags < B R > ou < P > o próprio browser quebra as linhas automaticamente.
Para alinhar os parágrafos basta incluir depois do "P" o parâmetro "align + tipo de alinhamento", conforme abaixo:
< P A L I G N = " L E F T "> Texto alinhado à esquerda.
< P A L I G N = " R I G H T " > Texto alinhado à direita.
< P A L I G N = " C E N T E R " > Texto centralizado.
< P A L I G N = " J U S T I F Y " > Texto justificado.
A TAG utilizada é: < i m g s r c = " n o m e d a i m a g e m + e x t e n s ã o "( g i f , j p g , b m p , e t c ) >
Atributos da Imagem:
W I D T H - Define a largura da imagem.
H E I G H T - Define a altura da imagem.
A L T - Texto que aparece quando é passado o mouse sobre a imagem
B O R D E R - É 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:
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 é: Exemplos
< a h r e f = "http://www.blabla1.com" >Conheça o portal blabla1< / a >Conheça o portal blabla1 Resultado:
Conheça o portal blabla1. 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 h r e f = "http://www.blabla1.com" t a r g e t = " _ b l a n k ">Conheça o portal blabla1 < / a > Conheça o portal blabla1 Para fazer um link para uma outra página do seu site use:
< a h r e f = " p a g i n a _ t a l . h t m l " > C l i que a q u i < / a > Clique 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:
< a h r e f = " http://www.blabla1.com" > < I M G S R C = " l o c a l , nome da imagem + extensão" > < / a >
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:
Certas extensões de arquivos fazem com que os navegadores, em vez de fazer o download, abrem com programas instalados no computador.
Para você colocar uma imagem de fundo no seu site é só colocar um atributo dentro da TAG < B O D Y> Existem vários tamanhos de telas. Lembre-se: imagens grandes demoram à carregar.
Para colocar um letreiro na página é utilizado a TAG < M A R Q U E E >Veja o código: Resultado
As tabelas valorizam o Layout das páginas, pois dão harmonia e organização dos textos, imagens, listas, etc. A tabela é representada pelas Tags < T A B L E > e < / T A B L 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:
Veja um exemplo:
Para que a tabela fique centralizada, como acima, use a t a g < C E N T E R > antes do código e < / C E N T E R > depois do código. Também pode-se alinhar o texto dentro das células, utilizando os seguintes atributos:
ADICIONANDO UMA LISTA DENTRO DA CÉLULA COM O CODIGO:
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:
< H T M L >
< H E A D >
< T I T L E > Título da página < / T I T L E >
< / H E A D >
< F R A M E S E T C O L S = " 20 % , 80 % ">
< F R AM E S R C = " p a gi n a 1 . ht m l " >
< F R AM E S R C = " p ag i n a 2 . h t ml " >
< N O FR A M E >
< / N OF R A M E >
< / F RA M E S E T >
< B O D Y>
< / B OD Y >
< / H TM L >
Os códigos acima só serão colocados na página principal que será salva como " i n d e x . h t m l".
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 < F R A ME S E T C O LS = "20%, 80%" > Este é o tamanho:
< h 1 >Este é o tamanho:
< H 2 >
Este é o tamanho:
< H 3 >
Este é o tamanho:
< H 4 >
Este é o tamanho:
< H 5 >
Este é o tamanho:
< H 6 >
Tamanho e cores das fontes
Como formatar um texto
Texto Riscado assim < / s>
Como fazer parágrafo e linhas
Alinhamento com a TAG < P >
Como incluir imagens no site
< i m g s r c = " z e r o . g i f " a l t = " S e u t e x t o " b o r d e r = " 0 " >Seu texto
< i m g s rc = " z e r o . gi f " a l t = " S e u t e x t o " b o r d e r = " 1 " >Seu texto
< i m g s r c = " z e r o . g if " a l i g n = " t o p " >
< im g s r c = " z e r o . g i f " a l i g n = "m i d d l e ">
< i m g s r c = " ze r o . g i f " a l i g n = " l e f t " >
< i m g s r c= " z e r o . g i f " a l i g n= " r i g h t ">
< I M G SR C = " i m a g e m . g i f " V S P A CE = e s p a ç o v er t i c a l >
< I M G S R C =" i m a g e m . g i f " H S P A C E = e s p a ç o h or i z o n t a l >
< I M G S R C =" i m a g e m . g i f " A L I G N = " L E F T " W I DT H = " 1 0 " H E I GH T = " 1 0 " V SP A C E = " 5 0 " >
< I M G S R C =" i m a g e m . g i f " A L I G N = " R I G H T" W I D T H = " 10 " H E I G H T= " 1 0 " H S P A C E= " 3 0 " >
Como fazer links
< a h r e f = " n o m e d o l u g a r à s e r l e v a do " > d e s c r i ç ão d o l u g a r < / a >. descrição do lugar
Como fazer uma imagem com link
Sendo que:
http://www.blabla1.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.
Exemplo Lembre-se: foi usado a target"_ b l a n k" para abrir em uma nova janela.Como fazer links para Download
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.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.
Como fazer letreiros e linhas
< M A R Q U E E B E H A VI O R =S C R OL L D I R E C TI O N = " R I G HT " B G C OL O R = " Y EL L O W "W I D T H= 1 0 0 %>Texto.........Texto......< /M A R QU E E >
Como fazer tabelas
e -Define uma linha da tabela.
e -Define um cabeçalho da tabela.
e -Define a coluna de informações.
< T A B L E B O R D E R = " 2 " B O R D ER C O L OR = " R E D" C E L L S P A CI N G = " 1 0 " C E L L PA D D I N G= " 6 " W I D T H = " 5 0 " H E I G H T = " 2 0 " B GC O L O R = "Y E L L OW " < T R > < T D> 1 a .c o l u na < / TD > < T D> 2 a . co l u n a < / T D > < T D > 3 a . c ol u n a < T R > < T D > 1 a . l in h a < /T D >
Você pode colocar o código acima em apenas uma linha. Resultado:
1a.coluna 2a.coluna 3a.coluna 1a.linha 1a.linha 1a.linha
< T D >l i s t a d en t r o d a c é l u l a < U L > < L I > 1 i t e m < L I > 2 i t e m < L I > 3 i t e m < / U L > < / T D> Resultado:
lista dentro da célula
Sites com frames