Voltar Ao Estudo 30
Estudo 31
Como colocar parágrafos e saltos de linha em páginas web. Também vemos os cabeçalhos
Formato de parágrafosNos 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,
, 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çalhosExistem 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 1Os 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 2Outro 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.
Ir Ao Estudo 32