Como todos já sabem o grande objetivo desse blog é auxiliar os principiantes a criar um blog de sucesso. Pensando nisso resolvi criar esse curso básico de html por dois motivos, o primeiro é que a plataforma blogger é baseada em html e o segundo é que sempre postamos algum código html aqui  e notamos que as pessoas sentem alguma dificuldade em lidar com eles. Durante o curso básico vocês verão que a linguagem html é simples de ser entendida, mesmo para os que não trabalham com informática e só querem aprender o básico para colocar códigos em seus blogs.

Curso de html – Introdução

A linguagem html (HyperText Markup Language) é a base da internet. Ela é uma linguagem de marcação que é compilada (interpretada) pelo browser de nossos computadores nos possibilitando navegar pela internet com uma interface gráfica amigável. Como já disse os blogs criados na plataforma blogger, como esse, são feitos em html.

Hoje vamos começar aprendendo algumas tags html, que nada mais são que palavras reservadas entre o sinal < e >. Quando o browser lê uma dessas palavras ele sabe que se trata de tags html e executa o que elas estão orientando. Toda tag deve ter um início e um fim para que o browser saiba como lidar com ela. Por exemplo num título você utiliza a tag <title>Fale conosco</title> e fecha ela com a mesma tag com a “/” na segunda tag indicando o final do título do documento. Fique tranquilo, vamos praticar isso no próximo artigo.

Tags HTML:

<html> e </html>
tag que inicia o documento, dizendo que será um tipo de documento HTML e o finaliza.
<body> e </body>
Indica o corpo do documento. O body contém todo o conteúdo que será exibido e finaliza o corpo do seu programa (script). Você pode colocar nesta tag a cor do fundo da página e a cor do texto e dos links, entre outros.
<p> e </p>
Inicia e finaliza um parágrafo.
<head> e </head>
tag que inicia o cabeçalho. Nele você coloca informações sobre o documento (formatações, funções, fundo musical etc). O conteúdo que estiver dentro do <head> geralmente não aparecerá quando sua home page for exibida.
<hX> e </hX>
Inicia um cabeçalho, onde X é o nível de tamanho variando de 1 a 6, onde 1 é o maior e 6 o menor. Finaliza um cabeçalho, o X é igual ao do que inicia esse mesmo cabeçalho.
<title> e </title>
Indica o título do seu documento. Repare o local em que esse título aparece. Indica o final do título (repare que o título começa com <title> e termina com </title>).
<div> e </div>
Coloca o conteúdo, entre as tags, em um quadro. Funciona como parágrafo, mas não forma espaço entre eles.
<img src=”X” width=”Y” height=”Z“>
Insere uma imagem, X é o nome ou diretório da imagem, Y é a largura e Z é a altura.
<br />
Insere uma quebra de linha. É como pressionar o enter.
<center> e </center>
Centraliza o conteúdo.
<a href = “X” target=”_blank”>Y<a>
Cria um hyperlink com o conteúdo; X é o endereço e Y o nome do endereço. O target deve ser adicionado se quiser que abra em uma nova janela.
<a href=”mailto:X“>Y<a>
Insere um hyperlink de e-mail; X é o e-mail.
<ul> e </ul>
Inicia e finaliza uma lista de tópicos não ordenada – com o símbolo ponto (bullet) no início de cada linha.
<ol> e </ol>
Inicia e finaliza uma lista de tópicos ordenada – com as linhas numeradas.
<li> e </li>
Inicia e finaliza cada linha de uma lista de tópicos ordenada e não ordenada.
<b> e </b>, e <strong> e </strong>
Texto em negrito.
<u> e </u>
Texto sublinhado.
<i> e </i>
Texto em itálico.
<sub> e </sub>
Texto subscrito.
<sup> e </sup>
Texto sobrescrito.
<strike> e </strike>
Texto tachado.
<dl> e </dl>
Usadas para listas de definições.
<dt> e </dt>
É um termo da lista de definições.
<dd> e </dd>
É a explicação do termo; aparece como nas listas ordenadas e não ordenadas, mas sem os números ou bullets.
<tr> e </tr>
Inicia e finaliza uma linha de tabela. Você pode adicionar nesta Tag o mesmo que foi adicionado acima (largura, cor etc.) mas a soma das medidas deve ser igual as da tabela.

E aqui finalizamos o primeiro artigo do curso de html. Essa foi somente uma introdução, não se assuste, pois no decorrer do curso iremos utilizar exemplos para demonstrar o funcionamento das principais tags html. Até o próximo artigo!

Atualização em 31 de janeiro de 2010

Esse curso não será continuado, pelo menos por enquanto, pois descobri um excelente curso e gratuito em vídeo aulas, acesse aqui.

Gustavo Freitas

Problogger, empresário e professor. Criou seu primeiro blog em fevereiro de 2008 e não parou mais de criar blogs.

Participe da conversa

9 Comentários

Comentários

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.

  1. Responder
  2. Responder

  3. Ola.
    Estava pesquisando sobre curso de codigos HTML e encontrei neste blog, me ajudou muito e voce informou neste curso que tera outro artigo eu procurei aqui mas nao achei, poderia me informar se ter e se tiver coloque o o link.
    Muito obrigado

    Responder
  4. Responder
  5. Responder

  6. meus parabéns,junto com vcs fiz um grande avanço em meu blog,sai do zero,ainda falta muito,mas eu chego lá.Olha rodei a net inteira atyrás de um blog didático e facil para novatos,e este aqui me surpreendeu.Gostaria muito que entrassem em contato ,gostaria de fazer parte deste time.Se vcs quiserem me dar a honra de um pulinho lá,consegui tudo através daqui.

    Abraços e mais uma vez parabéns

    Responder

  7. Olá , desde que criei meu blog que gostava de compreender certas linguagens usadas em HTML. Agora já cá estou acompanhando o teu curso e fico muito gratificada pela metodologia de ensino que usas. Uma forma simples e completa. Muito obrigada e parabéns!!!

    Responder
  8. Responder

  9. Olá,
    Tenho em meu blog, vário blogs que acompanho, mas esse sai na frente.
    As matérias são Show de Bola, muito interessnte mesmo.
    Parabêns!

    Responder