sábado, 9 de novembro de 2013

Html Simplificado

Este artigo trata de uma introdução ao HTML. O HTML é uma abreviação de HyperText Markup Language ou seja que em português significa, Linguagem de marcação de Hipertexto. Os arquivos HTML são interpretados pelos navegadores (browsers), portanto, caso você tenha algum arquivo HTML no computador, basta pedir que o seu navegador abra ele.
O HTML trabalha com o sistema de tags (etiquetas). Esse sistema funciona da seguinte maneira.
Ex:

1	`<tag>Conteúdo` `da tag</tag>`

Toda tag aberta, deve ser fechada, salvo raras exceções, nesses casos ela pode ser fechada da seguinte maneira:

</tag>

Uma tag HTML pode conter outra tag dentro dela, e quantas forem necessárias.

<tag>
  <outraTag>texto</outraTag>
</tag>

Algumas tag's possuem propriedades que podem possuir valores. Um exemplo claro é a tag de imagem que possui o caminho da imagem.

1	`<img src="caminhoImg.jpg"` `/>`

É importante seguir alguns padrões ao criar seu arquivo HTML.

- Primeiramente tente sempre que possível usar as letras em caixa baixa, ou seja, todas em minúsculo.
- Nesse artigo irei abordar somente o HTML. Antigamente os desenvolvedores personalizavam a aparência da página no próprio HTML, porém atualmente estamos fazendo isso pelo arquivo CSS. Portanto, caso gostem desse artigo, posso escrever um sobre CSS básico para personalizar uma página HTML
- O comentário em HTML é feito da seguinte maneira <!–Comentário a seguir –>
- Tente manter seu documento indentado para facilitar a manutenção. Uma tabulação com 2-4 espaços é o suficiente para ajudar na endentação do documento.
Ex:

<tag>
  <outraTag />
</tag>

- Evitem de colocar elementos redundantes no código. Um uso comum é o de <br /> para pular linhas e definir uma altura para um elemento, enquanto o correto seria definir a altura através do Css.
- Uma página HTML tem a extensão .html, porém elas podem ser geradas dinamicamente com alguma linguagem com o PHP, ASP, PYTHON… Então em alguns casos essa extensão é alterada para a extensão da linguagem utilizada para gerar a página HTML.

Quais editores HTML usar.

Para escrever código HTML basta um simples editor de texto como o bloco de notas (notepad). Porém eu recomendo editores mais robustos para facilitar um pouco sua vida. Os principais são es seguintes:
- Sublime Text 2: Considero o melhor editor atualmente. Experimente usar a extensão Zen Coding em conjunto com ele e experimente o máximo da performance ao criar seus arquivos HTML.
- Notepad ++: Outro excelente editor. Possui uma interface simples mas é bem poderoso também.
- Dreamweaver: Um excelente editor para iniciantes. Cuidado com o modo Design. Evite de editar seu HTML por ele pois ele não gera um código muito semântico.

Vou abordar agora as principais tags HTML e explicar um pouco de seu funcionamento.

HTML – <html> </html>
Essa tag é responsável por definir o início de um documento HTML e seu fim. Logo deve ser aberta no início do documento e fechado no seu final.
HEAD – <head></head>
Tag que define o início e o fim do cabeçalho do documento. Abordaremos mais abaixo o que deve ser inserido no cabeçalho.
BODY – <body></body>
Tag onde devem ser inseridos os conteúdos do site que deverão ficar visíveis ao usuários quando a página for renderizada no navegador.
Somente com essas três tags já podemos ter uma estrutura HTML básica. Segue um exemplo.

<!DOCTYPE html>
<html>
    <head>
        <!--conteudo do head-->
    </head>
    <body>
        <!--conteudo do body-->
    </body>
</html>

O <!DOCTYPE html> inserido antes da tag <html> no exemplo anterior é para especificar para o navegador o tipo de página HTML que ele vai renderizar. Existem diferentes tipos de HTML usados atualmente porém os mais usados são o HTML 5, cujo doctype especificado é o que eu utilizei no exemplo, o HTML 4.1 e o XHTML. Nos últimos dois exemplos o doctype é um pouco mais complexo, trazendo informações sobre o tipo de documento (Strict, transitional e frameset). Porém recomendo que sempre utilizem o doctype do HTML 5, pois ele é mais enxuto e mesmo que não utilize HTML 5 em sua página não vai prejudicar em nada a renderização da página pelo browser.

Cabeçalho <head>

No cabeçalho trazemos informações que serão usadas pelo navegador como:
TITLE – <title>Sou o título da página</title>
Título da página a ser exibido (texto que fica na aba de seu navegador quando uma página esta aberta)
LINK – <link href="" type="" media="" rel="" />
Geralmente usado para selecionar arquivo externo no HTML. Um uso comum dele é para selecionar arquivos CSS (responsáveis por definir a aparência da sua página para o usuário final).
Ex:

1	`<link href="estilo.css"` `type="text/css"` `media="screen"` `rel="stylesheet"` `/>`

Nessa linha, definimos que arquivo a ser utilizado na página é do tipo CSS, para ser renderizado em telas (Monitores, TV's, smartphones…)
METATAGS – code><meta name="" content="" />
Metatags tem uma infinidade de funções que não irei citar aqui, porém nesse link existem mais informações sobre todas elas, http://www.w3.org/TR/html401/struct/global.html#h-7.4.4.
Atualmente só costumo utilizar duas. Uma para referenciar para os buscadores um breve resumo sobre a página, chamada DESCRIPTION. O seu uso é basicamente da seguinte forma:
<meta name="description" content="Aqui entra o resumo sobre a página. É recomendável que você não ultrapasse 160 caracteres nesse texto" />
E a metatag CHARSET. Com ela você define que tipo de codificação que o seu texto vai usar ao ser renderizado pelo navegador. Recomendo utilizar o utf-8 mesmo. Porém existem casos onde é preciso usar uma diferente. Existem duas formas de usar o charset. Uma para HTML 5 e uma para os demais. Seguem os exemplos:
HTML 5: <code><meta charset="utf-8" /></code>
Demais: <code><meta http-equiv=”Content-Type” content=”text/html;charset=utf-8″ /></code>
Novamente, recomendo utilizar a marcação do HTML 5 por ser mais enxuta.
Existe ainda a tag <script> que é chamada no cabeçalho por alguns desenvolvedores, porém, prefiro chama-la no final do <body> para não atrapalhar no carregamento dos demais componentes de suas página.
Segue uma exemplo de um cabeçalho:

<!doctype html>
<head>
    <title>Título da página</title>
    <meta charset="utf-8" />
    <meta name="description" content="Breve resumo sobre o conteúdo desta página" />
    <link href="estilo.css" rel="stylesheet" type="text/css" />
</head>

Corpo da página – <body>

Dentro da tag <body> é que vão entrar todos os elementos que ficarão visíveis aos usuários. As tags usadas dentro do body podem ser divididas em inline e block. Tags inline são tags que mantem o fluxo comum do conteúdo e tags block quebram o fluxo e geram o elemento abaixo do último block. Você pode usar uma tag inline dentro de uma block, mas não pode usar uma block dentro de uma inline por questões de semântica.
Vou agrupa as principais tags e explicar o seu funcionamento:
<h1></h1>– O H1 é utilizado para marcar um título. Você pode utilizar diversos níveis de relevância, para isso basta mudar o número na tag. As heading tags como são chamadas, vão de 1 á 6. Ou seja, você pode ter um<h1></h1> <h2></h2> … <h6></h6>. É recomendável por questões de otimização e semântica que você utilize apenas um <h1>, que seria o título da página como um todo, e que posicione ele o quanto antes no <body>. Porém as demais tags de título podem ser usadas conforme a necessidade.
Ex:

1	`<h1>Sou um título relevante</h1>`

<p></p>– O P é utilizado para definir um parágrafo.
Ex:

1	`<p>Sou um elemento de parágrafo</p>`

<span></span>– SPAN é uma tag inline usada para marcar um trecho de texto. Ele é frequentemente usado para personalizar um trecho de texto em um paragráfo via css, já que naturalmente não altera nada no HTML.
Ex:

1	`<p>Sou um<span>pequeno parágrafo</span></p>`

<Strong></Strong>– O STRONG é utilizado para deixar um texto em negrito. A tag <b></b> tem um comportamento semelhante porém a W3C recomenda utilizar o <Strong>.
Ex:

1	`<p>O trecho a seguir está em<b>negrito</b></p>`

<em></em>– A tag EM é utilizada para deixar um elemento em itálico. A tag <i> foi utilizada durante muito tempo para isso porém a W3C recomenda que utilize o <em> mesmo.
Ex:

1	`<p>O trecho a seguir está em<em>itálico</em></p>`

<u></u>– A tag U é usada para sublinhar um termo.
Ex:

1	`<p>Pequeno texto com trecho<u>sublinhado</u></p>`

<br />– A tag BR é utilizada para definir uma quebra de linha. Seu uso deve ser cauteloso. Evite usar muitos BR's em casos onde deveriam existir paragráfos.
Ex:

<p>Primeira linha<br />
  segunda linha</p>

<ul></ul> – <ol></ol> – <li></li>– Os elementos UL e OL são usados para iniciar uma lista, sendo o <ul> para uma sem ordenação numérica e o <ol> para uma com ordenação numérica. Os elementos dentro dessa lista devem ser marcados com a tag LI.
Ex:

<ul>
  <li>Sou um elemento de uma lista</li>
  <li>Sou outro elemento dentro da lista</li>
</ul>

<a></a>– O A é um elemento responsável por "linkar" páginas/arquivos na sua página. Através do atributo href você pode especificar aonde está a página/arquivo a ser linkado na página.
Ex:

<a href="clientes.html">Página de clientes</a>
<a href="currículo.pdf">Curriculo</a>

Link externo:

1	`<a href=http://www.siteexterno.com>Site externo sendo linkado</a>`

<img /> – A tag IMG é usada para renderizar uma imagem no site. É necessário que o campo src seja preenchido com o caminho para a imagem. Os campos width e height devem ser preenchidos com a largura e a altura da imagem em pixels, é muito importante que esse campo esteja sempre preenchido para evitar que o navegador tenha que calcular sozinho o tamanho da imagem. O campo alt, deve conter uma pequena descrição da imagem para o caso do navegador não conseguir reproduzir a imagem e por questões de acessibilidade para leitores de tela usados por cegos.
Ex:

1	`<img src="imagem.jpg"` `width="50"` `height="50"` `alt="Descrição da imagem"` `/>`

<div></div>– O DIV é uma tag de bloco, usado para agrupar elementos semelhantes. Um uso comum dele é para categorizar o cabeçalho (Header) da página, o conteúdo (content) e o rodapé (footer). É muito utilizado para auxiliar na personalização do site através do Css.
Ex:

<div>
  <h2>Título relevante</h2>
  <p>Texto do bloco</p>
  <img src="alerta.jpg" width="10" height="7" alt="alerta" /></div>

<table></table> – <td></td> – <tr></tr> – A tag TABLE é usada para dermacar uma tabela. As linhas são marcadas com a tag TR enquanto as colunas ficam com a tag TD. É possível agrupar colunas com o atributo colspan e linhas com o atributo rowspan. Um <td colspan="2"></td> significa que aquela coluna vai ocupar o espaço de duas colunas.
Ex: Tabela 2×2

<table>
  <tr>
    <td>Primeira coluna da primeira linha</td>
    <td>Segunda coluna da primeira linha</td>
  </tr>
  <tr>
    <td>Primeira coluna da segunda linha</td>
    <td>Segunda coluna da segunda linha</td>
  </tr>
</table>

<form></form>– A tag FORM serve para demarcar a área de um formulário. No caso do form abordarei as tags utilizadas por ele em grupos diferentes pois são muitos. A tag form tem o atributo action, que determina qual ação vai ser executada quando ele for submetido.
Ex:

<form action="envioFormulario.php">
</form>

<input />– A tag INPUT pode adquirir características especificas de acordo com o atributo type que ele receber.
Ex:

<input type="text" value="Digite aqui" />
<!--Campo onde o usuário pode digitar um pequeno texto. 
Caso queira deixar um valor por padrão, 
basta adicionar um atributo value com o valor desejado.-->
<input type="submit" />
<!-- Cria um botão que vai submeter o formulário ao ser clicado.-->
<input type="file" />
<!-- Cria um campo para fazer uploads de arquivos.-->
<input type="radio" type="grupo" />
<!-- Cria um campo para seleção única. 
As opções disponíveis são agrupadas pelo type, ou seja, 
se houverem 3 inputs radio com o mesmo type, 
o usuário só poderá escolher um deles.-->
<input type="checkbox" />
<!-- Bem semelhante ao radio, porém permite múltipla seleção.-->

<textarea></textarea>– A tag TEXTAREA tem um comportamento semelhante ao do input text, porém ele é destinado a textos maiores.
Ex:

1	`<textarea></textarea>`

<label></label>– A tag LABEL permite que você atribua uma legenda a um campo do seu formulário. Existem duas formas de usa-la:
Ex:
1-

<label>Sou uma legenda
  <input type="text" />
</label>

2 -

<label for="campo">Sou uma legenda</label>
<input type="text" id="campo" />

ALGUMAS TAGS HTML 5

Não irei muito a fundo nesse tópico pois boa parte das tags HTML 5 ainda não estão totalmente compatíveis com todos os navegadores. Principalmente quando falamos do Internet Explorer 8 ou inferior.
<header></header>– A tag HEADER serve para limitar o cabeçalho da sua página. Ele foi criado com a intenção de simplificar o famoso <div id="cabecalho"> / <div id="header">. Cuidado para não confundi-lo com a tag HEAD. O HEADER deve ser utilizado dentro do BODY como auxiliar semântico, enquanto o HEAD fica dentro da tag HTML e trás informações somente visíveis para o navegador.
<footer></footer>– O FOOTER assim como o HEADER serve para auxiliar na formatação da página e veio para substituir a famoso <div id="rodapé">/<div id="footer">.
<aside></aside>– A tag ASIDE é utilizada para demarcar as regiões laterais das páginas que geralmente carregam elementos de navegação, ou informações auxiliares ao conteúdo principal.
<section></section> -A tag SECTION tem um funcionamento muito semelhante ao da DIV porém ela serve para demarca que um bloco de conteúdo possui uma relação mais próxima. Enquanto o DIV não carrega valor semântico algum.
<article></article>– A tag ARTICLE serve para definir o conteúdo principal de uma página.
<nav></nav>– A tag NAV é usada para indicar uma navegação. Ela deve ser usada para agrupar links de navegação.
A principal diferença dessas tags novas das DIV's é que elas passam valor semântico enquanto a DIV só serve como auxiliar para formatação, sem passar valor algum.
Caso queiram utilizar as tags citadas acima em qualquer navegador, mesmo que ele não leia HTML 5, basta inserir o seguinte script no final de sua página:

<!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

ID's e CLASS

OsID'ssão atributos que podem ser atribuídos a qualquer tag presente no <body>. Com ele é possível identificar um elemento facilmente. Isso ajuda muito no desenvolvimento do Css e na programação do Javascript (falaremos adiante sobre isso). É importante ressaltar que o ID deve ser único, ou seja, só pode existir um por página.
Exemplos clássicos de ID's são para definir cabeçalhos, rodapés e blocos de conteúdo.
Ex:

<div id="cabeçalho"></div>
<img src="perfil.jpg" height="50" width="20" id="imagemPerfil" />
<span id="horario">12:30</span>

Já oCLASSdeve ser utilizado para agrupar elementos com atribuições semelhantes. Se você vai usar um botão com as mesmas características em vários locais do site, vale a pena colocar um CLASS nele e personalizar somente uma vez no css.
Ex:

1	`<input type="submit"` `value="Enviar"` `class="botaoForm"` `/>`

CSS e JAVASCRIPT

OCssé um arquivo que visa personalizar o modo como seu HTML aparece para o usuário. Ele deve ser chamado dentro da tag <head> no topo do site.
Ex: <code><link href="estilo.css" type="text/css" media="screen" rel="stylesheet" /></code>
O Javascripté uma linguagem muito ponderosa que permite que o desenvolvedor altere elementos na página HTML. O ideal é que ele seja chamado no fim da página (antes do fechamento da tag body) para não atrasar o carregamento dos demais componentes do seu HTML. Caso tenha interesse em estudar, recomendo olhar também a biblioteca javascript jQuery.
Ex:

<script type="text/javascript" src="script.js"></script>
<script type="text/javascript">//Aqui vai o seu código javascript</script>

Vou me conter as esses comentários para não sair do foco do artigo. Em breve postarei sobre Css e Javascript também.

Exemplo de uma página HTML completa:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Título da página</title>
<meta name="description" content="Sou o description da página. Uma breve descreição" />
<link href="css/estilo.css" type=text/css rel=stylesheet>
<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<header> <a href="/"><img src="logo.jpg" alt="Logo site" width="200" height="50"></a>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="clientes.html">Clientes</a></li>
      <li><a href="empresa.html">Empresa</a></li>
      <li><a href="contato.html">Contato</a></li>
    </ul>
  </nav>
</header>
<section>
  <h1>Sou o título da página</h1>
  <h2>Sou um subtitulo</h2>
  <p>Sou um conteúdo comum. 
  <em>Estou em italico</em>. 
  <b>Estou em negrito</b>
  <u>Estou sublinhado</u></p>
</section>
<footer>Sou o rodapé</footer>
<script src="js/javascript.js" type="text/javascript"> </script>
</body>
</html>

ORGANIZANDO E HOSPEDANDO SEU SITE

De aqui em diante falarei de coisas que saem um pouco do escopo do HTML mas que são essenciais para o desenvolvimento de um site.
A principal dela é a organização. Seu site vai ter diversos arquivos HTML. Vamos supor que seja um site empresarial. De cara teríamos uma página para a Home, uma para Empresa, uma para Clientes e uma para Contatos. Então na pasta principal do site, teríamos um arquivo home.html (ou index.html), empresa.html, clientes.html e contato.html.
Porém o site teria diversos outros arquivos como por exemplo, arquivos Css, Imagens usadas no site, Javascripts, documentos anexados nas páginas… Então acaba sendo interessante, criar pastas para arquivos semelhantes. Geralmente trabalho com a seguinte estrutura:
- Site (aqui ficam os arquivos html)
– Css (aqui ficam os arquivos css)
– JS (aqui ficam os arquivos javascript)
– Img (aqui ficam as imagens do site)
– Docs (aqui ficam os demais documentos, pdfs, txt…)
Após isso é necessário providenciar duas coisas para que seu site entre de vez no ar. Uma hospedagem e um domínio.
O domínio .com.br pode ser adquirido no registro.br por apenas R$ 30,00 mensais.
Já a hospedagem deve ser paga a uma empresa terceirizada. Existem planos de R$ 10,00 mensais até planos bem mais caros, porém é importante pesquisar o que melhor se adequa ao seu caso. Existem hospedagens gratuitas, porém não recomendo nenhuma delas.
Após o registro do domínio e o plano de hospedagem, vai ser necessário que você envie seus arquivos para o servidor. Para isso é necessário uma programa de envio ftp. Eu recomendo o filezilla (http://filezilla-project.org/). Basta preencher no programa os dados de host, username e password que a hospedagem irá fornecer e subir o seu diretório com os arquivos do site para o servidor. É importante que na raiz do site tenha um arquivo chamado index.html que seria a página inicial do site. Geralmente a pasta raiz do site no servidor se chama public_html.
Leandro Oriente – Desenvolvedor Front-End

quarta-feira, 6 de novembro de 2013

Introdução HTML

Aprendendo HTML

INTRODUÇÃO AO HTML -

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.

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.

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

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>

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

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 H₂O - O número 2 ficou em baixo.

<SUP> Como em Km² - 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>

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.

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.

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">

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="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">

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

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:
<a href="http://www.extremaonline.com"><IMG SRC="local, nome da imagem + extensão"></a> Sendo que:

http://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:

<a href="arquivo.rar">Clic aqui para baixar</a>

<a href="pasta_tal/arquivo.zip">Clic aqui para baixar</a>
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:
<OL> <LI> <LI> <LI> </OL> 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ó <OL>
use <OL START=1 TYPE=A> - Onde "1" indica para começar pela primeira letra do alfabeto.
Lista Sem Ordenação:
<UL> <LI> <LI> <LI> </UL>
Resultado:

Primeiro item.
Segundo item.
Terceiro item. As "bolinhas" são inseridas automaticamente.

Listas Encadeadas:
<OL> <LI> <UL> <LI> <LI> </UL> <LI> </OL> Produz resultado misto.

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 <BODY>, assim: <BODY BACKGROUND="nome da imagem+extensão">.
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 <MARQUEE>Veja o código:
<MARQUEE BEHAVIOR=SCROLL DIRECTION="RIGHT" BGCOLOR="YELLOW"WIDTH=50%>TEXTO</MARQUEE>
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: <MARQUEE DIRECTION="RIGHT"> <FONT SIZE="3" COLOR="RED" FACE="COMIC SANS MS">texto</FONT></MARQUEE>
LINHAS Para inserir uma linha basta colocar a TAG <HR>.
Não é preciso fechar "</HR>".
Atributos da Linha Você pode definir a largura, cor e alinhamento.
<HR SIZE=10> - Insere uma linha de largura 10 pixels.
<HR WIDTH=50%> - Insere uma linha que ocupa 50% do espaço em tela.
<HR WIDTH=50% ALIGN=RIGHT> - Insere uma linha que ocupa 50% do espaço em tela alinhada à Direita. Ou LEFT à esquerda.
Cor da Linha
<HR SIZE=1 WIDTH=100% COLOR="RED"> 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 <TABLE> e </TABLE> 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 </TR> -Define uma linha da tabela.
<TH> e </TH> -Define um cabeçalho da tabela.
<TD> e </TD> -Define a coluna de informações.
<CAPTION> e </CAPTION> -Define o título da tabela.
Veja um exemplo: <TABLE BORDER="2" BORDERCOLOR="RED" CELLSPACING="10" CELLPADDING="6" WIDTH="50" HEIGHT="20" BGCOLOR="YELLOW" <TR> <TD> 1a.coluna </TD> <TD>2a.coluna </TD> <TD> 3a.coluna </TD> </TR> <TR> <TD> 1a.linha </TD> <TD> 1a.linha </TD><TD> 1a.linha </TD> </TABLE> </BR>
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 <CENTER> antes do código e
</CENTER> 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" <TR> <TD>lista dentro da célula<UL> <LI>1 item<LI>2 item<LI>3 item</UL> </TD> </TABLE>Resultado:

lista dentro da célula

1 item
2 item
3 item

COMO INSERIR MÚSICA NO SITE:

Para inserir uma música em sua página, antes de fechar a tag <HEAD> coloque a tag: <BGSOUND SRC="musica.mid">.A Extensão do arquivo pode ser .mid ou .wav.
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.* Para que abra a página já tocando a música, coloque este código:
<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:

Para inserir um flash (arquivo com extensão .swf), como abaixo, coloque este código depois da tag <BODY>:
<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"</EMBED> </OBJECT>
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 <BODY>:
<EMBED SRC="arquivo.avi" </EMBED>

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

<META NAME="GENERATOR" CONTENT="Microsoft FrontPage 5.0">
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:

Cliando aqui

COMO FAZER UM LINK PARA ENVIAR E-MAIL :

Código:<a href="mailto:seuemail@provedor.com.br">Clic Aqui</a>
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 é: fulano@provedor.com.br se preferir, Clic Aqui

COMO FAZER UMA CAIXA DE TEXTO :

Código:<textarea rows="5" cols="50" style="background-color: #ffffff">ESCREVA AQUI O SEU TEXTO</textarea>
Fica assim:

COMO FAZER UMA ÂNCORA :

Repare que ao clicar ir para âncora você foi redirecionado à outro ponto desta página. Isto é chamado "Â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:<a name="ancora">
E o código do comando "ir para" é:
Código:<a href="#ancora">ir para ancora</a>
Você pode criar vários pontos, como:
<a name="ancora2"> e <a href="#ancora2">ir para ancora2</a>
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>

OUTRAS DICAS:

Após fazer seu site, veja Como colocar o site na Internet
Você também pode ganhar dinheiro com seu site em programas de Afiliados.
Como?: Quantidade é a alma do negócio. Consulte Clicando Aqui
Para gerar tráfego no Seu site: Funciona Mesmo Clica Aqui e depois AQUI
Agora uma dica muito legal. Um provedor que funciona 100% com um painel incrível.
O famoso CPanel, lá você tem emails; redirecionamentos; banco de dados e muitas outras coisas incríveis.
Hospede alí seu site em HTML, PHP ou outra linguagem.
O mais legal, é o preço mais justo que já ví: Super Provedor
Seu site no topo das buscas, consulte: Como aparecer
Se você achou complicado os códigos html, e quer fazer um site sem precisar saber estes códigos Crie um site Grátis
Só indico estes, porque garanto que funcionam, não conheço outros melhores. São muito bons.
Faça turismo em Extrema MG - Confira Hotéis em Extrema - Imobiliárias em Extrema - Restaurantes em Extrema
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 proje