HtmlBasico

HTML e CSS para preguiçosos, ops, programadores.

O início:

HTML é um arquivo texto com tags para formatar o seu conteúdo. Pense no seu caderno escolar,
lembre-se que para destacar certas coisas você sublinhava, colocava em outra cor, etc. Só
que num arquivo HTML esse efeito através de tags. Exemplo, para sublinhar uma palavra usando
HTML tu usa o seguinte código: <u>Professora boazuda, essa</u>

Bronca do Tio Bill (aka Dirceu):
"HTML é uma linguagem de marcação que usa tags para
*estruturar* o seu conteúdo".

Como criar um HTML ? O que eles comem ?:

Para criar um arquivo HTML basta um editor de texto simples, um Bloco de Notas do Windows já dá conta.
No Linux eu uso o Scite ou o Vim, mas tu pode usar outros. Só não vale usar Word, OpenOffice, etc.
Esses não servem.

Sim, vamos fazer o velho Hello World:

HTMLs seguem uma estrutura mínima básica. Ela é útil para seu browser saber que aquilo ali é um
arquivo html e assim tratá-lo adequadamente. A estrutura básica é a seguinte:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<body>
Hello World!
</body>
</html>

* Tio Bill deu outra bronca, o validator só passa com o atributo xmlns na tag html.

Eu não entendi bulhufas da estrutura mínima:

Dissecando linha a linha, como o Jack Estripador fala, vamos por partes:

1. A primeira linha "<!DOCTYPE" serve para indicar o tipo do documento. Assim seu browser saberá o que fazer e
seu documento vai se comportar do mesmo jeito desde o IE até o Firefox, pelo menos era pra ser.
2. Abrindo a tag <html> indica que desse ponto até </html> é tudo um arquivo .html.
3. Abrindo a tag <body> diz que o que está entra <body> e </body> aparecerá no browser do usuário. Esse bloco
é a parte visível para seu usuário.
4. Fecha a tag <body>
5. Fecha a tag <html>

Manjou ? Todo arquivo html deve indicar que é um arquivo html para o browser; Indicar as partes que são o html;
Indicar qual parte desse html vai aparecer no browser; Ter todas tags religiosamente fechadas;

Tags, legal, mas e os atributos?:

Oia. Tu tá ficando esperto, hein. Já tá sabendo que existem atributos. Ok, ok. Vou explicar. Atributos são valores
extras dentro da tag de abertura (<html>, <body>...) que adicionam informações sobre esse pedaço do html, a esse elemento
, adicionam um atributo a essa tag.

Um exemplo de atributo seria o seguinte:
    <body background="./images/planodefundo.jpg">

Eu também ouvi falar de uns tais "elementos":

Elementos são o que estão entre as tags. Exemplo, o que está entre as tags <body> e </body> constituem o elemento
body. Só isso. Ficam criando conceitos para coisas simples mesmo.

***

Todo documento tem que ter um título, já dizia minha vó:

Obviamente, todo documento tem que ter um título. Documentos HTML também. Título é aquele texto que fica lá em cima, do lado dos botões "Minimizar", "Maximizar" e "Fechar" do seu browser. Para adicionar um título em seu html é bem simples, basta adicionar dentro do elemento head o elemento title. Veja abaixo o exemplo baseado em nosso modelo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
        <title> Título vem aqui! </title>
    </head>

    <body>
    Hello World!
    </body>
</html>

Não se fazem mais parágrafos como antigamente:

Se você adicionar outra linha no último exemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title> Título vem aqui! </title>
    </head>

    <body>
    Hello World!
    Foo Bar!
    </body>
</html>

Ele irá aparecer "Hello World!! Foo Bar" no seu browser, ao invés de em linhas separadas. Para separar seu documento em parágrafos,
existe a tag <p> que significa parágrafo. Assim, para separar o exemplo acima em linhas separadas deveríamos fazer o seguinte:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title> Título vem aqui! </title>
    </head>

    <body>
    <p>Hello World!</p>
    <p>Foo Bar!</p>
    </body>
</html>

Desse modo teremos o resultado desejado, isto é, as linhas separadas. Em parágrafos.

Html sensacionalista, chamando atenção do leitor:

Para chamar a atenção para uma palavra ou trecho do documento tu pode pôr ele em negrito, para isso existem as tags
<em>Texto em negrito "leve"</em> e a tag <strong>Texto em negrito "forte"</strong>.

Você pula ou pede ajudar aos parágrafos ?

Além dos parágrafos tu pode pular linha usando a tag <br /> (observe que ele se abre e se fecha só). Veja nosso exemplo como ficaria:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title> Título vem aqui! </title>
    </head>

    <body>
    Hello World! <br />
    Foo Bar!
    </body>
</html>

***

Headings = cabeceadores ?

Você já deve ter notado que o HTML foi feito para moldar documentos mesmo. Documentos "tipo Word" e com o tempo começou a ser usado para fazer coisas fru-fru na internê. Pois bem, tanto é que além do título da página, você pode criar títulos para seções do seu documento. São os headings.

Por padrão nós temos 6 tipos de headings em HTML, são as tags que vão de <h1>Meu Heading maioral!</h1> até a <h6> Meu heading menorzinho, pirralho. </h6>.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title> Título vem aqui! </title>
    </head>

    <body>
        <h1> Meu títulio </h1>
        <p> Conteúdo do primeiro títulio </p>

        <h2> Meu segundio títulio </h2>
        <p> Segundio conteudio </p>

        <p>...</p>

        <h6> Meu sextio títulio </h6>
        <p> Conteúdo do sexto... </p>
    </body>
</html>

Se ela lista, eu listo, se ela dança, eu danço:

Existem três tipos de listas para documentos html. Aqui, per enquantum, abordaremos apenas duas. As mais famosas. São elas: A lista ordenada e a lista desordenada. As duas são basicamente iguais, o que muda mesmo é o troço que fica na frente dos elementos da lista. Nas desordenadas normalmente são pontinho, balõezinhos, etc. Já as ordenadas são numeradas.

A lista desordenada fica entre as tags: <ul> </ul> e os elementos dessa lista ficam dentro desse elemento, listados em tags: <li> </li>. Lá vem o exemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title> Título vem aqui! </title>
    </head>

    <body>
        <ul>
            <li> Ahá! </li>
            <li> Ahá2! </li>
            <li> Ahá1! Não disse que era desordenada ? </li>
        </ul>
    </body>
</html>

Já as listas ordenadas ficam entre as tags <ol></ol> e os elementos dessa lista ficam dentro do elemento ol, listas em tags <li></li>. Exemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title> Título vem aqui! </title>
    </head>

    <body>
        <ol>
            <li> Ahá1! </li>
            <li> Ahá2! </li>
            <li> Ahá3! Botei ordem na casa, ops, na lista. ? </li>
        </ol>
    </body>
</html>

***

Linkando tudo, mano:

O barato da internet é que tudo está linkado. Uma informação leva a outra, que leva a outra, que leva a outra, e você vê o céu amanhecendo sem ter achado o que queria. Culpa (?) disso é dos hyperlinks, elementos do HTML que permitem linkar a outra página. Esse elemento se baseia na tag <a> </a>. Sendo que o atributo href deve estar presente. (lembre-se que os valores de todos atributos devem estar entre aspas duplas!).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title> Título vem aqui! </title>
    </head>

    <body>
        <ol>
            <li> <a href="http://www.google.com.br">Ahá1!</a></li>
            <li> <a href="http://www.digg.com">Ahá2!</a> </li>
            <li> <a href="http://www.reddit.com">"Ahá3! Botei ordem na casa, ops, na lista. ?</a> </li>
        </ol>
    </body>
</html>

Os links podem ser para qualquer link válido da internet, uma imagem, um endereço, outro html. Tanto faz. Também é possível linkar para elementos da própria página, basta colocar no href o valor "#idDoElemento".