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

  • Imagens do lado do Adsense? No more.

      Segundo consta no blog oficial do Adsense não se pode mais usar imagens do lado dos anúncios. Devem ter ficado tão indecisos com as...

  • O primeiro post a gente nunca esquece

    Por esses dias bateu a curiosidade para saber quais seriam os primeiro-post dos bogs que acompanham. Testei um truquezinho que me permitiu...

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

    Your review of the ReviewMe written on the blog novo-MUNDO has been approved! You will receive $30 for this review. Minha análise do ReviewMe...

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