Como aprender sobre tags de código HTML

Aprender código HTML inicia-se com o aprendizado das tags básicas. Estudando os exemplos neste artigo, você deverá conhecer todas as tags HTML básicas que irá precisar na criação de uma página web simples.

Primeiro de tudo, é importante saber que quase todos as tags têm uma abertura e um fechamento. Quando isso ocorre, abrimos com , e fechamos com . Algumas tags não abrem e fecham. Elas são simplesmente inseridos com e não fecham (embora no XHTML padrão seria digitado ). Nos exemplos seguintes, as tags que aparecem sem barras denotam de que devem ser abertas e fechadas, ao passo que as tags com uma barra depois do conteúdo () só precisam ser inseridos e não fechadas.

Nota: "" não é um verdadeiro tag.

Além disso, atributos são pedaços de informação colocados dentro de uma tag. Por exemplo, para usar a tag atributo cor, criaríamos da seguinte forma: , onde COLORINFO seria substituído com o valor apropriado e toda a tag seria fechada apenas com um simples (não ).

TAGS DE FRAMEWORK - Estas tags compreendem o framework básico de qualquer página da web.

  1. <html> Esta tag ocorre no início de qualquer página de HTML. Faz parte do framework básico de qualquer página.
  2. <head> Esta tag vem depois da tag <html> e define o título de seu documento, onde você vai colocar as informações que você não quer diretamente na sua página. Aqui você pode colocar informações como o título, metatags e CSS .
  3. <title> Essa tag indica o título. Deve ser colocado entre as tags <head>. As palavras que você quiser na barra de título do navegador devem ser colocadas entre as tags <title> e </ title>.
  4. <body> Esta tag abre o corpo da sua página, onde a maioria dos conteúdos serão inseridos. Tem dois importantes atributos: "background" e "bgcolor." Um valor de background deve ser a URL de uma imagem (para criar uma imagem de fundo) e um valor de bgcolor deve ser uma cor em palavra ou em formato hexadecimal (ex: "cinza", ou #FF55AA).
Todas as tags, neste ponto, são as tags necessárias para o framework da sua página (exceto título, mas este é considerado padrão). O framework de qualquer código HTML deve ser semelhante ao que segue:

<html>

<head>
<title> </ title>
</ head>

<body>

</ body>
</ html>

As palavras, imagens e tabelas que você quer na sua página devem situar-se entre as tags <body>. Mais tarde nesse artigo, vou mostrar a fonte de uma página web muito simples.

DECORAÇÃO DO TEXTO - As seguintes tags são as tags básicas usadas para decorar texto.
  1. <b> Esta tag torna o texto negrito.
  2. <i> Esta tag torna o texto itálico.
  3. <u> Esta tag torna o texto sublinhado.
  4. <big> Esta tag torna o texto maior. Estas tags podem ser utilizadas separadamente ou em conjunto para criar mais efeitos. Por exemplo: Este texto é enfatizado, enquanto este texto é intenso!
  5. <font> Outros efeitos de texto podem ser alcançados utilizando-se a tag <font>. Os atributos importantes aqui são "color", "size", e "face". Os valores de color devem estar em palavra ou em formato hexadecimal (ex.: "fúcsia" ou # BB6677), os valores de size devem ser números de um a sete (sendo sete o maior), e os valores de "face" podem ser o nome de qualquer fonte.
      Ex: color="green" <font size="2" face="Georgia"> Este texto é alterado. </ Font>

      Este texto é alterado.

Exemplo de código de uma webpage

O código para uma webpage de exemplo poderia ser semelhante a este:

<html>
<head>
<title> Exemplo de Website! </ title>
</ head>

<body bgcolor="#AABB33">

<b> Este texto está em negrito! </ b>

Este texto não é negrito. Nem é formatado de qualquer outra forma.

</ body>
</ html>

Formatando Texto - As seguintes tags são as tags básicas utilizadas para formatar texto.
  1. <br/> Esta tag cria uma quebra no texto. Pressionar "entra" no seu editor HTML não irá criar uma verdadeira quebra na página, por isso você deve usar essa tag para criar quebras de linha.
  2. <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <h7>Estas tags são tags de "cabeçalho". <h1> Cria o maior cabeçalho, enquanto <h7> cria o cabeçalho menor. Um cabeçalho é constituído de texto de tamanho alterado com quebras de linha acima e abaixo.
  3. A tag de parágrafo <p> cria uma quebra de linha antes e depois de um parágrafo do texto.
INSERINDO MÍDIA - As tags seguintes são usadas para inserir diversas mídias.

1. <img/> A tag imagem insere uma imagem. Possui um atributo necessário, "src". O valor de "src" deve ser a URL de uma imagem.

      Ex: <img src="http://www.images.com/image.jpg">

2. A tag âncora <a> insere um hiperlink. Tem também um atributo necessário - "href". O valor de "href" deve ser a URL do site (ou imagem, ou arquivo, etc) ao qual você quer ligar (criar o link).

      Ex: <a href="http://www.link.org"> Este site é ótimo! </ A>

CRIAR LISTAS - As seguintes tags são usados para criar listas.

Todas as listagens são feita utilizando uma tag principal de abertura (<bl>, <ul>, ou <ol>), que deve ser fechada depois que a lista é terminada, e tags de item lista (<li>), que devem ser fechadas depois de cada item da lista.

1. <ul> A tag de lista não ordenada cria uma lista marcada por pequenos círculos negros. O atributo "type" pode ter valores de "disc", "circle", ou "square", que mudam os pequenos círculos pretos em outros marcadores.

      Nota: <bl> (lista) é o mesmo que <ul>, exceto que a lista é puxado para a esquerda (geralmente não é preferido).

2. <ol> A tag de lista ordenada cria uma lista marcada por números. O valor para o atributo "start" pode ser qualquer número, e diz onde começar com os números da lista. O valor para o "type" pode ser atribuído A, a, I, i, ou 1, o que diz à lista que tipo de numeração usar (alfabética, numérica ou algarismos romanos).

TABELAS - As seguintes tags são usados para criar tabelas.

As tabelas são o tópico mais avançado coberto em HTML básico.

1.<table> A tag tabela significa o início de uma tabela. Os atributos possíveis são "bgcolor", "border", "cellpadding", "cellspacing", "width", "align", ou "valign".

• O valor para o atributo "bgcolor" é uma cor em formato hexadecimal (ex. # 33AA44).

• O valor para o atributo "border" é um número que indica a espessura da borda.

• O valor para o atributo "cellpadding" é um número que indica a distância (em pixels) entre a borda e o conteúdo da tabela.

• O valor para o atributo "cellspacing" é um número que denota o tamanho da borda.

• O valor para o atributo "width" é um número que indica qual vai ser o tamanho da tabela (em pixels).

• O valor para o atributo "align" deve ser "left", "right", ou "center", e indica onde o conteúdo da tabela alinha.

• O valor para o atributo "valign" deve ser "top", "bottom", ou "middle", e indica onde o conteúdo da tabela alinha verticalmente.

2. <tr> Esta tag define a linha da tabela. Você deve criá-la antes de criar um <td>. Você sempre define as linhas antes de definir as células nestas linhas (o que cria as colunas). Você pode usar o atributo "height" aqui, dando-lhe um valor que, em pixels, vai definir a altura da linha. Você também pode usar uma percentagem (por exemplo, "30%") para definir a quantidade da página que a linha vai ocupar acima (verticalmente), mas isso não é recomendado para linhas de tabela.

3. <td> Esta tag define uma célula de tabela. Informações podem ser colocadas em uma célula de tabela, enquanto o <tr> e o <td> em conjunto definem qual vai ser a aparência da tabela. Você pode usar o atributo "width" aqui para definir, em pixels, qual será o tamanho da célula. Você também pode usar uma percentagem (por exemplo, "55%") para definir a quantidade de página a célula vai ocupar lateralmente.

Aqui está um exemplo de código que poderia criar uma tabela:

<table>
<tr>
<td> Esta é a primeira linha, primeira coluna! </ td>
<td> Esta é a primeira linha, segunda coluna! </ td>
</ tr>

<tr>
<td> Esta é a segunda linha, primeira coluna! </ td>
<td> Esta é a segunda linha, segunda coluna! </ td>
</ tr>
</ table>

Você pode copiar este código em seu próprio editor HTML para ver como o produto final pareceria. Sinta-se livre para fazer alterações neste código, adicionando mais linhas, uma quantidade desigual de células de tabela em cada linha, e vários atributos.