Joomla! Amazônia – Seu site de tutorial e curso de Joomla

Você está aqui: Html Guia Prático de HTML - Atualizado 7. Elementos básicos da lingua Html

7. Elementos básicos da lingua Html

Guia Prático de HTML – Prof . Tiago Daniel de Souza
http: / /www. tiagosouza. com

7.1 - Cabeçalhos

Os cabeçalhos ( também chamados de Headings) servem para criar títulos diferenciar as seções da sua página. Eles possuem seis valores diferentes, sendo que a de valor 1 é a que possui a maior fonte e a de valor 6 possui a menor fonte.

Por exemplo, usando o seguinte código:

<html>
<head>
<title>
Valores de cabelalho</title>
</head>
<body>
<h1>
Título 1 </h1>
<h2>
Título 2 </h2>
<h3>
Título 3 </h3>
<h4>
Título 4 </h4>
<h5>
Título 5 </h5>
<h6>
Título 6 </h6>
</body>
</html>

Veja como fica:

img13.gif
No código acima, o HTML automaticamente solta uma linha em branco entre um título e outro.

7.2 - Parágrafos

Os parágrafos são definidos com a tag <p>

<p>Este é um parágrafo</p>
<p>
Este é um outro parágrafo</p>

Paragrafo.gif

No código acima, o HTML automaticamente acrescenta uma linha em branco antes e depois de um parágrafo.

7.2.1 - Alinhamentos de parágrafo

Você já deve ter visto que em certos documentos o texto aparece ora alinhado à direita, ora à esquerda, no centro ou então ocupando uniformemente o espaço da página ( texto justificado) . Isso pode ser obtido facilmente em HTML. Veja a tabela abaixo:

ELEMENTO  
DESCRIÇÃO
<p align=” left ”>
 Alinha o texto à esquerda
<p align=” right ”>
  Alinha o texto à direita
<p align=” center ”>
 Alinha o texto centralizado
<p align=” justify ”>
 Alinha o texto justificado

Note que entre os delimitadores < e > não encontra-se apenas o elemento <p>. Além dele, existe o texto align="alinhamento". Dizemos que align é um atributo do elemento p e alinhamento é o valor desse atributo. No caso de <p align="justify">, o valor do atributo align (que significa alinhamento em inglês) é justify (justificado) .

Os atributos, as palavras que seguem o elemento, informam o navegador a respeito das propriedades que os elementos podem assumir. Confuso?! Pode parecer um pouco confuso, mas não é. Como disse a Toya, "Um disco de banda punk pode ter diversas propriedades ou 'atributos' - a cor do disco, tamanho, velocidade, etc, tudo isso são atributos. " E eu digo mais: se você
coloca o disco num toca-discos, você pode ouvi- lo em duas ou no máximo três velocidades. Às vezes dá pra ouvir ao contrário. Mas se você arremessar seus discos do Fofão, garanto que eles poderão girar em muitas outras velocidades.
Assim é o HTML, com muitas opções para você exibir seu texto.

No HTML, os valores dos atributos podem ser definidos da forma atributo=valor ou atributos="valor" (como em align="justify" ) , que é mais recomendada. Como você viu, nem todos os códigos em HTML necessitam de atributos, em especial os comandos de modificação de texto como negrito, itálico, sublinhado, etc.

Resumindo, os atributos definem características adicionais aos elementos. Nas seções seguintes veremos elementos com vários atributos. Por exemplo, não adianta dizer ao seu navegador pra por um link em alguma parte do seu texto, é preciso dizer ao navegador, por exemplo, pra que lugar esse link aponta. É isso o que um atributo faz.

7.3 - Criando uma divisão

Existem momentos em que queremos que vários parágrafos possuam um mesmo valor de atributo - centralizado, por exemplo . Ao invés de escrevermos align="justify" a cada abertura de novo parágrafo, podemos usar o nelemento div, que cria uma "divisão" no documento na qual alguns atributos são preservados. Vejamos o exemplo:

<div align="center ">
<p>

Parágrafo 1
Parágrafo 1
Parágrafo 1
</p>
<p>
Parágrafo 2
Parágrafo 2
Parágrafo 2
</p>
<p>
Parágrafo 3
Parágrafo 3
Parágrafo 3
</p>
</div>

 alinhamento.gif

Experimente mudar os atributos do alinhamento pra ver o que acontece!! Na parte de Folhas de Estilo mostrarei como utilizar o elemento div para criar seções lógicas em documentos.

7.4 – Quebras de Linha

A tag <br> é utilizada quando você quer terminar uma linha, mas não quer começar um novo parágrafo. Com este comando você faz com que ocorra uma quebra de linha, onde você posicionar a tag.

Note que para o elemento <br> não existe o comando </br>, isto é, a quebra de linha não age numa região de texto delimitada, mas sim num ponto do texto. Complicado?! Então vamos lá, mais uma vez explicando de uma outra forma: comandos como <b>, <i> e <u> agem sobre uma região do texto e precisam ser fechados com seus respectivos </b>, </i> e </u>, pois do contrário esses comandos agirão até o f im do documento. Já o comando de quebra de linha, </br>, e alguns outros atuam somente no ponto onde eles aparecem.

Veja o exemplo abaixo da utilização da tag <br>

<p>Este <br> é um pará<br>grafo com quebra de linha</p>

A tag <br> é uma etiqueta vazia, ela não possui tag final.

Veja como fica:

Quebra_de_linha.gif

7.5 – Comentários

A tag de comentário é utilizada para inserir comentários no código fonte nHTML. Todo tipo de comentário é ignorado pelo navegador, isto é, ele não será exibido na tela. Você pode utilizar esta tag para explicar seu código fonte ou parte dele, que poderá ajudá- lo quando você estiver editando seus códigos posteriormente.

<! - - Este é o comentário - ->

Note que você precisa de um ponto de exclamação depois do parênteses de abertura, e não antes do parênteses final.

7.6 – Informações Úteis

1) Quando você escrever um texto em HTML, esteja ciente de que o texto que você está visualizando não será exibido igualmente em todos os navegadores. Algumas pessoas possuem computadores com resoluções maiores, outros menores, tudo isso influi na questão da exibição da página, o que pode acontecer são os textos e as janelas que podem ser redimensionados.

2) As diferenças nos tamanhos das janelas dos navegadores fazem com que o número de caracteres que cabem numa linha varie muito. Por esse motivo não seremos capazes de controlar nem o número de linhas nem os locais em que acontecem as mudanças de linha. Nunca tente formatar o texto inserindo espaços ou linhas vazias, porque os resultados não serão aqueles que você esperava.

3) O HTML quando encontra dois ou mais espaços seguidos, ele trata-os como se fosse um único espaço. Quando você escreve uma seqüência de espaços seguidos, o resultado é o mesmo de escrever um único espaço. Em HTML, as teclas Tab e Enter equivalem a um espaço.

4) Sempre que você quiser inserir linhas em branco, utilize a tag <br>. Existem pessoas que utilizam parágrafos vazios para obter o mesmo resultado, mas isso está errado. A tag <p> deve ser usada apenas para definir parágrafos, e o elemento <br> não deve ser usado, por exemplo, para criar listas, pois existem tags concebidas especificamente para isso. Sempre que você precisar de obter uma formatação especial , você deve usar o elemento que foi criado para esse efeito.

5) Em muitas páginas, os parágrafos estão escritos sem a etiqueta de fechamento (</p>) Apesar dos navegadores aceitarem esta omissão, tenha sempre atenção para fechar todos os elementos que requerem uma tag de fechamento. Se você tentar validar uma página que contenha estes erros, verá que ela não passará no teste de validação.

6) Os elementos <p> e <h1> ... <h6> o navegador adiciona automaticamente uma linha em branco antes do início e outra depois do fim.

7.7 – Lista de elementos básicos do HTML

TAG  
DESCRIÇÃO
<html>
 Define um documento HTML
<body>
 Define o conteúdo principal , o corpo do documento
<p>
 Define parágrafo
<hr> 
 Insere uma linha horizontal
<br>
 Insere linhas em branco, quebra de linha
<! - ->
 Define um comentário