31 - Formato de parágrafos (HTML)

Moderador: Moderador

Responder
Avatar do Utilizador
Streme
Mensagens: 1766
Registado: 06 mar 2008, 17:02
Localização: Salvador-Bahia

31 - Formato de parágrafos (HTML)

Mensagem por Streme » 11 jun 2008, 13:21

ImagemVoltar Ao Estudo 30Imagem

Imagem
Estudo 31

Como colocar parágrafos e saltos de linha em páginas web. Também vemos os cabeçalhos

Formato de parágrafos


  • -
Nos capítulos anteriores apresentamos a título de exemplo, algumas etiquetas que permitem dar formato ao nosso texto. Neste capítulo veremos com mais detalhe, as etiquetas mais amplamente utilizadas e exemplificaremos algumas delas posteriormente.

  • -
Formatar um texto passa por tarefas tão evidentes como definir os parágrafos, justificá-los,
  • introduzir marcadores
, 1 numerações, ou pôr em negrito, itálico, etc.

  • -
Vimos que para definir os parágrafos utilizamos a etiqueta que introduz um salto e deixa uma linha em branco antes de continuar com o resto do documento.

  • -
Podemos também utilizar a etiqueta , da qual não existe seu fechamento correspondente , para realizar um simples enter, com o que não deixamos uma linha em branco, e sim, somente mudamos de linha.


Nota: Existem outras etiquetas que não têm seu correspondente de fechamento, como para as imagens, que veremos mais adiante. Isto ocorre porque um salto de linha ou uma imagem não começam e acabam mais adiante, simplesmente só têm presença em um lugar pontual.

  • -
Podemos comprovar que mudar de linha em nosso documento HTML sem introduzir algumas dessas ou de outras etiquetas não implica em absoluto uma mudança de linha na página visualizada.

  • -
Na realidade o navegador introduzirá o texto e não mudará de linha a não ser que esta chegue a seu fim ou se o especifiquemos com a etiqueta correspondente.

  • -
Os parágrafos delimitados por etiquetas podem ser facilmente justificados à esquerda, ao centro ou à direita, especificando tal justificação no interior da etiqueta por meio de um atributo align. Um atributo não é mais do que um parâmetro incluído no interior da etiqueta que ajuda a definir o funcionamento da etiqueta de uma forma mais pessoal. Veremos ao longo deste manual uma quantidade de atributos muito úteis para todo tipo de etiquetas.

  • -
Então, se desejássemos introduzir um texto alinhado à esquerda escreveríamos:

Texto alinhado à esquerda

O resultado seria:

Texto alinhado à esquerda

  • -
Para uma justificação ao centro:

Texto alinhado ao centro

Que seria:

Texto alinhado ao centro

  • -
Para justificar à direita:

Texto alinhado à direita

Cujo efeito seria:

Texto alinhado à direita

  • -
Como se vê, em cada caso o atributo align toma determinados valores que são escritos entre aspas. Em algumas ocasiões necessitamos especificar alguns atributos para o funcionamento correto da etiqueta. Em outros casos, o próprio navegador toma um valor definido por padrão. Para o caso de align, o valor padrão é left.

Nota: Os atributos têm seus valores indicados entre aspas ( " ), mas se não os indicamos entre aspas, também funcionará na maioria dos casos. Entretanto, é aconselhável que ponhamos sempre as aspas para acostumarmos a utilizá-las, por dar homogeneidade aos nossos códigos e para evitar erros futuros em sistemas mais meticulosos.

  • -
O atributo align não é exclusivo da etiqueta . Outras etiquetas muitos comuns, que veremos mais adiante, entre as quais se introduzem texto ou imagens, costumam fazer uso deste atributo de forma habitual.

  • -
Imaginemos um texto relativamente longo onde todos os parágrafos estão alinhados à esquerda (por exemplo). Uma forma de simplificar nosso código e de evitar introduzir continuamente o atributo align sobre cada uma de nossas etiquetas é utilizando a etiqueta

  • -
Esta etiqueta por si só não serve para nada. Tem que estar acompanhada do atributo align e o que nos permite é alinhar qualquer elemento (parágrafo ou imagem) da maneira que nós desejarmos.

  • -
Assim, o código:
paragrafo1
parágrafo2
paragrafo3

É equivalente a:


paragrafo1
paragrafo2
paragrafo3


  • -
Como vimos, a etiqueta marca divisões nas quais definimos um mesmo tipo de alinhado.

Exemplo prático:

  • -
Para praticar um pouco o que acabamos de ver, vamos propor um exercício que se pode resolver no seu computador. Simplesmente queremos construir uma página que tenha, por esta ordem:

  • 2 parágrafos centralizados
  • 3 parágrafos à direita
  • 1 salto triplo de linha
  • 1 parágrafo alinhado à esquerda


Não vamos escrever nesta ocasião o código fonte do exercício. Podemos vê-lo no final desse estudo... os arquivos em anexo...

Cabeçalhos

  • -
Existem outras etiquetas para definir parágrafos especiais, formatados como títulos. São os cabeçalhos ou Header em inglês. Como dissemos, são etiquetas que formatam o texto como um título, para o qual atribuem um tamanho maior de letra e colocam o texto em negrita

  • -
Existem vários tipos de cabeçalhos que se diferenciam no tamanho da letra que utilizam. A etiqueta em concreto é a , para os cabeçalhos maiores, para os de segundo nível e assim, até que é o cabeçalho menor.

  • -
Os cabeçalhos implicam também uma separação em parágrafos, portanto, tudo o que for escrito dentro de e (ou qualquer outro cabeçalho) será colocado em um parágrafo independente

  • Podemos ver como se apresentam alguns cabeçalhos a seguir

Cabeçalho de nível 1

Será visto dessa maneira na página:

Cabeçalho de nível 1

  • -
Os cabeçalhos, como outras etiquetas de html, suportam o atributo align. Vejamos um exemplo de cabeçalho de nível 2 alinhado ao centro

Cabeçalho de nível 2

Será visto dessa maneira na página:

Cabeçalho de nível 2

  • -
Outro exercício interessante é construir uma página web que contenha todos os cabeçalhos possíveis. Pode-se ver a seguir:



Todos os cabeçalhos




Cabeçalho de nível 1
Cabeçalho de nível 2
Cabeçalho de nível 3
Cabeçalho de nível 4
Cabeçalho de nível 5
Cabeçalho de nível 6





Pode-se ver o exercício no final desse estudo em anexo!

Conselho: Não devemos utilizar as etiquetas do cabeçalho para formatar o texto, ou seja, se queremos colocar um tipo de letra maior e em negrito, devemos utilizar as etiquetas que existem para isso (que veremos em seguida). Os cabeçalhos são para colocar títulos em páginas web e é o navegador o responsável de formatar o texto de maneira que pareça um título. Cada navegador então, pode formatar o texto ao seu gosto contanto que pareça um título.


ImagemIr Ao Estudo 32Imagem
Última edição por Streme em 24 jun 2008, 23:56, editado 1 vez no total.
O0oº* Streme*ºo0O

O seu obrigado é a melhor maneira de retribuição.

Responder

Voltar para “Design”