_____________________________>>.·´¯`·.((_(((((º»»»Aqui dicas sobre HTML«««º)))))_)).·´¯`·.<<_______________________

ATRIBUTOS DE :

Através de , podemos definir cores dos textos, links e fundo das páginas, ou uma imagem de fundo. Temos entã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:

e -Define uma linha da tabela.
-Define um cabeçalho da tabela.
-Define a coluna de informações.
e -Define o título da tabela.
Veja um exemplo:

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 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 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 . 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-MG Resultado: D7Dicas e Downloads 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-MG Para 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 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. L I S T A S : 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ó     Primeiro item. Segundo item. Terceiro item. As "bolinhas" são inseridas automaticamente. - Onde "1" indica para começar pela primeira letra do alfabeto. Lista Sem Ordenação: Resultado: Listas Encadeadas: Produz resultado misto. 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 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. use COMO INSERIR IMAGEM DE FUNDO NO SEU SITE: 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. COMO FAZER LETREIROS E LINHAS : Para colocar um letreiro na página é utilizado a TAG Veja o código: TEXTO 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. Dica: Se você quiser que o texto pare no final, ao invés de SCROLL escreva SLIDE. Outro exemplo: texto LINHAS Para inserir uma linha basta colocar a TAG . Não é preciso fechar "". Atributos da Linha Você pode definir a largura, cor e alinhamento. - Insere uma linha de largura 10 pixels. - Insere uma linha que ocupa 50% do espaço em tela. - Insere uma linha que ocupa 50% do espaço em tela alinhada à Direita. Ou LEFT à esquerda. Cor da Linha Veja o resultado: COMO FAZER TABELAS : 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 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:

e

e

Você pode colocar o código acima em apenas uma linha. Resultado:

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:

SITE COM FRAMES :

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:


Título da página










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:


Título da página












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:


Título da página










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.

COMO INSERIR MÚSICA NO SITE:

COMO INSERIR FLASH NO SITE:

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

COMO INSERIR VÍDEO NO SITE:

Para inserir um vídeo (arquivo com extensão .avi), como abaixo, coloque este código depois da tag :

Note que está no tamanho reduzido, pois foi utilizado "WIDTH e HEIGHT", mas não é preciso, pois o tamanho é padrão, a menos que lhe seja útil.

META TAGS :

Após feito seu site, não basta apenas coloca-lo na internet somente com a tag título,
Título da página, é 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 e conforme abaixo:

Novo!Fundo de natal para seu site:
Cloque esse codigo:

<script src='https://snow-effect.googlecode.com/files/snow.js'></script> 

em HTML no inicio do site.Em todas as paginas.

Confira como fica aqui.