« Colocar vídeos no blog é fácil!
Click Comments - A salvação ! Como usar o Click Comments »

Aprender HTML - Tutorial fácil! Parte 1 - Introdução

O objetivo deste tutorial é introduzir aos blogueiros que ainda não conhecem, a linguagem que pode ajudar a resolver alguns problemas do dia-a-dia. Vou pular todo a parte de história e tudo mais. Se tiver interesse pode ver isso na Wikipédia.

HTML é uma linguagem de marcação. A maneira como dizemos ao computador para mostrar as coisas. Um parágrafo é isso, por exemplo:

<p>Texto do parágrafo</p>

Ou seja, o código HTML alí é o <p> e </p>. O <p> é uma tag HTML. Existem muitas tags. As mais comuns são:

  • <p> - parágrafo
  • <strong> - negrito
  • <em> - itálico
  • <h1> - título de primeiro nível
  • <h2> - título de segundo nível (segue até h5)
  • <a> - âncora (links). ex: <a href=”endereço do link”>
  • <li> - item de lista
  • <img> - imagem

A lista de itens acima tem o seguinte código:

<ul>
<li><p> - parágrafo</li>
<li><strong> - negrito</li>
<li><em> - itálico</li>
<li><h1> - título de primeiro nível</li>
<li><h2> - título de segundo nível (segue até h5)</li>
<li><a> - âncora (links). ex: <a href=”endereço do link”></li>
<li><li> - item de lista</li>
<li><img> - imagem</li>
</ul>

< significa <

> significa >

Observe que o código tem uma marcação que avisa o computador (navegador [ex: Internet Explorer, Firefox]) onde começa a listagem, quais são os itens e onde termina a lista. O ul é o começo (unordered list significa lista não-ordenada).

Nosso interesse no HTML é puramente blogueiro. Por isso não vou explicar passo a passo como criar um documento HTML e descrever suas tags obrigatórias, etc.

Abra o código HTML de um dos seus posts e tente entendê-lo e faça algumas modificações diretas. Geralmente tem-se acesso ao HTML dos posts clicando em “Code” ou “Html” na área de ediçã, seja do Blogger, Wordpress ou qualquer outro.

__

Deixe suas dúvidas e ou sugestões nos comentários.

This entry was posted on Thursday, June 21st, 2007 at 10:04 pm and is filed under abstrações. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

11 Responses to “Aprender HTML - Tutorial fácil! Parte 1 - Introdução”

  1. Copiador Descarado Says:
    June 22nd, 2007 at 11:48 am
    Já que você tocou no assunto:
    Qual a diferença entre (bold) e (strong)?
  2. rafael Says:
    June 22nd, 2007 at 12:08 pm
    B é meramente negrito. Enquanto STRONG é um negrito semântico, com significado.

    Colocar palavras com STRONG significa que você está dizendo à máquina (Googlebot, principalmente) que aquilo é importante. ;)

  3. Daniel Says:
    June 22nd, 2007 at 4:06 pm
    Eu não sei como é no Wordpress, mas no Blogger é mais tranquilo, pois ele te dá botões que formatam seu texto automaticamente, como no Word. Uso esses tags mais para linkar algum texto mesmo.
  4. Ed Says:
    June 23rd, 2007 at 9:28 pm
    Muito bom!
    Facil de entender para quem ta começando.
    Eu tambem tava colocando umas dicas Html no meu blog, mas eu falei especificamente da Meta-tag para sites de buscas.
    Abraços
  5. Mário Yanase Says:
    June 25th, 2007 at 2:02 pm
    Rafael, aprendi um pouco sobre estes códigos, observando. Hoje já edito meus temas, e, na medida do possível, os deixo da maneira que gosto. :D
  6. byBartus Says:
    June 25th, 2007 at 6:54 pm
    Só pra ajudar a esclarecer melhor.

    I ou itálico é meramente visual, enquanto EM é uma ênfase (ou destaque).
    B ou bold é meramente visual, enquanto STRONG é uma ênfase forte (ou super destaque).

    EM ou STRONG não precisam necessariamente ter a aparência de itálico ou negrito, pois isso pode ser determinado através das folhas de estilo (CSS), mas eles sempre vão ter o significado (semântica) de destaque.

    Segue o link: http://htmlplayground.com/ bastante útil pra entender bem o significado das tags, com exemplos de usos e resultados (em inglês, mas é fácil de entender).

    vlw t+

  7. Vinicius Says:
    June 26th, 2007 at 1:29 pm
    Cara não gostei… além de serem dicas muitos simples fugiu da cara do blog verde…
  8. Ajuda para blog? Chame o garoto prodígio! Says:
    July 9th, 2007 at 12:37 am
    [...] já começou bem, ensinando os pré-bloguers a basicamente respirar com um tutorial de HTML básico. Poderia pular pra um tutorial de PHP básico para ajudar um pouco mais os que optaram pelo [...]
  9. Tiago Madeira Says:
    July 20th, 2007 at 1:34 pm
    Algo me diz que você quis fazer “&lt;” ao invés de “<” em alguns momentos aí no seu post…
  10. Débora Says:
    September 8th, 2007 at 4:52 pm
    Hey..
    Muito bom seu post.
    Bem explicadinho e fácil de entender pra quem não entende batatas do assunto e só tá começando (como eu). xP
    Beijookas.
  11. ghjghjghj Says:
    November 13th, 2007 at 6:27 pm
    ghjghjghjghj
    h
    j
    ghj