Tutorial começando HTML

Oi gente
Resolvi criar esse tutorial de HTML em N partes ( não sei quantas ainda) por 2 motivos.Um deles é que tem muita gente que deseja aprender HTML e o segundo é que HTML é a linguagem Base pra quem quer aprender PHP ( que tambem farei tutoriais) !! Ou Seja se não sabe XHTML, não aprenderá facil PHP .

Vamos ao começo de tudo( não neh rsrs)
HTML siguinifica segundo a Wikipédia: HTML (acrônimo para a expressão inglesa HyperText Markup Language, que significa Linguagem de Marcação de Hipertexto) é uma linguagem de marcação utilizada para produzir páginas na Web. Documentos HTML podem ser interpretados por navegadores.
pra quem não sabe o que significa Acrônimo ( o google explica) brinks é o mesmo que sigla ( pra que usar uma palavra tão feia neh !! ).
Tim Berners-Lee criou o HTML original ( ele é meu Idálo rsrs idolo ) tem mais coisas mas acho isso chato é só ler aqui pra quem quizer saber mais http://pt.wikipedia.org/wiki/HTML ( é que é muita coisa mesmo, e a preguiça me ataca de vez enquando) rsrsrsr.

Nosso tutorial não requer que você saiba nada de programação( seria legal se soubesse) mas tanto faz se sabe ou não !!
esses tutoriais eu não ensinarei tudo ( até por que não sei tudo mesmo ) na verdade vou falar um pouco deixar o caminho das pedras ( não tropeçe)
quero que você pratique e muito ( como eu fiz cansera que eu passei em ).
Como tirar proveito desse tutorial isso é com você, se tentar muito vai aprender se não tentar infelizmente ( ou felizmente ) não vai aprender

Vamos aos ingredientes neh !! ( sim é uma receita do Bolo ) rsrs
um computador com qualquer sistema operacional ( eu uso fedora) mas vamos falar de Windows mesmo, um bloco de notas ( recomendo o notepad++)
simples e diferencia por cores os codigos (isso ajuda muito você ira ver ) um navegador WEB, Internet explorer, ou firefox, qualquer um de sua prefêrencia ( recomendo firefox). Uma coisa internet é bom ter senão você vai se cansar do tutorial rapidão, sei como é durmir na frente do computador, mas não é obrigatório neh !! desde que você tenha esse tutorial em mãos.
Ops
Esqueci de dizer que você aprendera XHTML (Extensible HyperText Mark-up Language), google ou wikipédia explica ( dessa vez foi a wikipédia) O XHTML, ou eXtensible Hypertext Markup Language, é uma reformulação da linguagem de marcação HTML, baseada em XML. Combina as tags de marcação HTML com regras da XML. Este processo de padronização tem em vista a exibição de páginas Web em diversos dispositivos (televisão, palm, celular, etc). Sua intenção é melhorar a acessibilidade. ( lindo neh ).Tem mais mas ai é com você neh ( não posso deixar de fazer você pesquisar )
Mas como sou bom está aqui http://pt.wikipedia.org/wiki/XHTML .


Vamos ao que interessa !!
Mas o que interessa ??

hum não sei... brinks

Tags ( etiqueta )
pra que elas serverm ?
pra marcar neh
lembra o que o M quer dizer do HTML ( marcação ) ( etiquetação rsrsr )

são as tags que fazem nosso navegador saber o que mostrar pra você, quando mal feito visitante reclama ( você ja fez isso?? ) eu já !!!!

As tags tem um "simpres" formato começa com "<" = menor( sem o igual, só o que esta entre aspas) e termina com ">" ( oo maior ) isso não é tudo
falando mais ou menos genericamente o HTML tem tags abertura de comando <comando> e tags de fechamento: </comando> ( tem algo diferente nelas neh ) o "/" é o que diz que o comando acabou ( fim, the end).
Mas como era meio genereco o que eu disse existem algumas tags que trabalham diferente ( como assim ???) elas fazem coisas diferentes como quebra de linha ( o famoso enter no Word) <br /> elas não precisam de conteudo e ja terminam onde começam <br /> ( vio, ela não inicia só termina, esquisito neh )

Já entendemod que HTML é apenas tags só isso neh !! Se você sabe as tags sabe HTML ( hum...) o problema é como usar as tags
(eu demorei uns meses nisso <!-- s:( --><img src="{SMILIES_PATH}/icon_e_sad.gif" alt="" title="Triste" /><!-- s:( --> )

(chega de lenga, lenga)

a tag <b> ( quer dizer que tudo que estiver entre ) e </b> será em negrito

ex: <b>texto negritado rsrss .</b>

resultado: texto negritado rsrss:
texto negritado rsrss

entendeu como funciona basta simplemente colocar um texto entre alguma tag que sai alguma coisa neh !!


Agora vamos a outras tags ( quem serão ?)

<p> e </p>( pra ficar facil definem um paragrafo )

<p> Começando um parafo </p>

<p> Estamos num outro paragrafo </p>


Tá agora ja sabemos como funciona uma tag ( ou sabemos mais ou menos)

Vamos a um documento "simpres" ( escrevi assim pra ver se você esta prestando atenção )

A tag pra começar um documento ( pagina )
é esta
<html> ( até hoje nem imagino o por que ) fui sarcastico ok !!

seguido de <head> ( quer dizer cabeça, cabeçalho ) ( normalmente o titulo da pagina fica entre <head> e </head>)

fica assim:

<html>
<head>
qualquer que seja o nome de sua pagina!!
E dados referentes aos criadores da pegina nesse caso eu( quero dizer você)
</head> ( fechamos a tag head ) ( ate agora sua pagina ainda não aparece nada )

<body>( Hum.. corpo, é isso mesmo o corpo da tua pagina ). ( lembrando apenas abrimos a tag body )

agora sim vem o que deve ser mostrado no navegador !!
escreva qualquer bobiça aqui ( menos Olá mundo !! )
"lembrando precisa ser entre tags "



</body>( fechando nosso corpo rsrsrs )
</html> ( idem HTML )

Sua primeira pagina esta feita ( parabens !!! demorei 2 dias pra fazer a minha <!-- s:( --><img src="{SMILIES_PATH}/icon_e_sad.gif" alt="" title="Triste" /><!-- s:( --> ) .

( pegue esse codigo coloque no seu bloco de notas ou no notepad ++ e salve !! qualquer nome .html ( se não for como HTML tu não vera a pagina no navegador )

( sempre escreva em minuscula )

Agora va em seu navegador vá em arquivo e ache o seu pequeno arquivo e abra-o ( é como colocar fotos no orkut)
sua pagina apareceu !!
ta horrivel, eu sei mas você ja sabe mais que eu !!

Vamos melhorar ok
pegue seu lido arquivo e abra-o denovo

acrescente <title></title> entre a tag <head> e <head/>

como o nome ja diz é o titulo de sua pagina !!
<title> aqui escreva qualquer coisa menos coisas obvias rsrs, pode ser obvio sim </title>

vai ficar assim :

acho que deu pra entender o que temos ali em cima neh ?

Vamos esmiussar o codigo ( eu sempre quiz usar essa palavra esmiussar)

<html> : é onde começamos nosso codigo HTML isso que a nosso navegador que o ele vai ler abaixo é HTML ( ele já fica esperto )

<head> é o cabeçalho de nossa pagina aqui tu coloca informações importante do desenvolvedor data e tipo de licença

<title> </title> : como o nome ja diz é o titulo da sua pagina ( no nosso caso doiderinha)

</head> : aqui findamos nosso cabeçalho

<body> : aqui começamos nosso corpo ( hum... corpo) aqui pode ter tudo que você imaginar desde que entre tags ( marcadores)

<p> : isso é um paragrafo !! (começo do paragrafo ) que termina com </p>

<b> : isso é o começo do negrito, que termina com </b>

. : isso é um ponto ( faz o que um ponto faz )

</body>: fechando nosso corpo ( rsrsr )

</html> : fechando nosso html ( aqui o nagevagador sabe que o HTML acabou )

como nosso documento ainda esta feio vamos arrumar ( deixa-lo beleza, rsrs )

As tags <h1>, <h2> dizem ao navegador que se trata de um cabeçalho ( mais uma tag pra isso ) tem mais mas deixo pra depois !! rsrs

Esmiussando os h+numeros rsrs

<h1> </h1> : Isso diz ao navegador que dentro das desses marcadores <h1> aqui dentro </h1> é um titulo
só pra constar H vem de "heading" - cabeçalho ( hum...)

então
tudo que estiver entre <h1> aqui vai ter um titulo seja ele qual for </h1>

agora <h2> esse é um subtitulo </h2> ( sim cabeçalho 2 rssr )

<h3>Sub-subtítulo</h3> ( acho que já sabemos o que a tag h faz )

olha pra vc aprender HTML só uma maneira que eu conheço é fazendo e refazendo !! se não treinar vai esquecer ( como eu !!)

mais uma coisa você não aprendera HTML apenas com esse tutorial, aqui não tem um quinto do que você vai precisar !!
então use o google o basico, você ja esta aprendendo !!

nossa pagina ja esta assim:

acho que eu não preciso esmiussar esse codigo preciso ?
sim
então volte lá em cima e reveja o que ja ensinei !! (não tem nada de novo, mesmo )

cansei por hoje !! agora faça algumas paginas e salve como HTML e veja no seu navegador
até o proximo tutorial !!

abraço

Lindo coloca no nosso Docs em Tutorial.

Muito show!

Abs.
Trorram