Linhas e parágrafos

Esta seção descreve o HTML associado a linhas e parágrafos. Começamos com o e <P> tags.

O < DIV > Elemento

<DIV>, um elemento de nível de bloco, simplesmente define um bloco de conteúdo na página. Além de definir um bloco, o próprio <DIV> não faz nada. Por exemplo, o código a seguir cria um elemento <DIV> com dois parágrafos dentro dele. Observe que você pode colocar <P> elementos dentro de um <DIV>.

O que nos dá:

O atributo ALIGN

ALIGN define o alinhamento do conteúdo do elemento <DIV>. Todos os quatro valores, LEFT, CENTER, RIGHT e JUSTIFY, são todos bem suportados. LEFT é o valor padrão.
Este código mostra o padrão:

O que nos dá:

O elemento de parágrafo

<P> indica o início de um novo parágrafo. Isso geralmente é renderizado com dois retornos de carro, produzindo uma única linha em branco entre os dois parágrafos:

O que produz isso:

O Atributo ALINHAR

ALIGN indica o alinhamento do parágrafo.

O que produz isso:

O atributo CLEAR

CLEAR é reconhecido por alguns navegadores e funciona de maneira muito semelhante a <BR>. No entanto, não é HTML padrão e ainda não é amplamente suportado, então use <BR> em vez disso.

O P Endtag é obrigatório? W3C diz sobre </P>: “A tag final é opcional, pois sempre pode ser inferida pelo analisador.” Isso significa que um novo <P> implica o fim do <P> anterior (e qualquer alinhamento definido pelo ).

Qualquer outro elemento de nível de bloco, como <HR> ou <BLOCKQUOTE> também deve terminar o parágrafo. No entanto, nem sempre funciona assim. Alguns navegadores, por exemplo, alinharão o texto à direita mesmo depois de uma tabela. No exemplo a seguir, o MSIE renderiza a parte “após a tabela” alinhada à direita, enquanto o Netscape o renderiza como alinhado à esquerda:

Renderização do MSIE	Renderização do Netscape

Se você definir o alinhamento ou outra propriedade de estilo para um elemento de parágrafo, é melhor usar </P>. Se você nunca usa definir estilos, geralmente pode ignorar </P>.

Consulte as especificações do W3C para parágrafos para obter mais informações sobre este tópico.

Alinhamento de texto

Você pode definir o alinhamento de qualquer elemento HTML usando a regra de estilo text-align. text-align pode ser usado para definir o alinhamento de um parágrafo, uma seção do documento ou até mesmo de todo o documento. text-align pode ser usado para definir o alinhamento à esquerda, à direita, ao centro ou justificado.

Por exemplo, suponha que desejamos centralizar um parágrafo.Primeiro, criaremos uma classe de estilos chamada centeralign, colocando o seguinte código na seção “do documento:

Agora podemos definir qualquer parágrafo para classe centeralign assim:

O que nos dá o seguinte:

Podemos aplicar a mesma classe a um elemento <DIV> para centralizar uma seção do página:

O que nos dá:

Justificação

Por padrão , a maioria dos navegadores renderiza o texto com uma borda direita recortada.

Se você deseja que todo o texto seja renderizado como em um livro com uma borda direita uniforme, você pode usar uma única regra de estilo. código i na seção “do seu documento.

O problema com a justificativa é que muitos navegadores ficam confusos sobre onde está a última linha de texto (o que não deveria ser justificado). Por exemplo, MSIE 4.x fica confuso quando um bloco de texto é seguido imediatamente por uma tabela. Observe nesta imagem que a última linha do texto estende as palavras “um de nossos agentes” em uma linha inteira:

Para remediar esta situação rodeie todos os blocos de texto com <P> e </P>:

Agora, o nosso MSIE errante torna as coisas mais sanely:

Recuo

Existem várias maneiras de recuar parágrafos e seções inteiras de sua página da web . As próximas seções descrevem as quatro técnicas principais de recuo:

• Recuo de um parágrafo
• Recuo de uma seção da página
• Recuo da página inteira
• Recuando a primeira linha de cada parágrafo

Antes de começar, entretanto, vale a pena dizer algumas palavras sobre <BLOCKQUOTE> . Há um equívoco popular de que <BLOCKQUOTE> deve ser usado para recuar seções da página. Essa crença vem do fato de que a maioria dos navegadores visuais renderiza textos citados como recuado. Lembre-se, entretanto, de que HTML não é uma linguagem de formatação e fornece resultados imprevisíveis quando você tenta usá-la como tal. Use <BLOCKQUOTE> se você tiver um bloco de texto entre aspas, caso contrário, use as técnicas descritas nos próximos parágrafos.

Recuando um parágrafo

Você pode recuar um único parágrafo usando estilos. Por exemplo, suponha que queremos indentar um parágrafo de 50 pontos. Primeiro, criamos uma classe chamada indentada com as seguintes regras de estilo. Coloque este código na seção “do seu documento.

Agora definimos a classe do parágrafo como indentado adicionando um atributo CLASS ao <P> tag:

O que nos dá este parágrafo recuado:

Recuando uma seção de uma página

Para recuar mais de um par agraph usaremos o mesmo estilo que definimos no exemplo anterior. Coloque este código na seção “de sua página:

Então usaremos a classe recuada em um <DIV> element:

O que nos dá uma seção recuada como esta:

Recuando a página inteira

Se você deseja que a página inteira seja recuada, defina uma regra de estilo que defina o preenchimento à direita e à esquerda para o elemento “. Por exemplo, este estilo define o preenchimento direito e esquerdo para 100 pixels:

Essa técnica é popular quando usada em combinação com uma imagem de fundo. Por exemplo, suponha que queremos que esta imagem desça no lado esquerdo da página.

Esta imagem tem 56 pixels de largura, então vamos definir o preenchimento para 60.O estilo a seguir define a imagem de fundo, define a repetição para repeat-y (apenas repete verticalmente no lado esquerdo da página) e define o preenchimento esquerdo para 60 (não definiremos o preenchimento direito).

Veja como isso pode parecer:

Recuando a primeira linha de cada parágrafo

Para recuar a primeira linha de cada conjunto de parágrafos uma regra de estilo usando indentação de texto. Por exemplo, o código a seguir recua a primeira linha de cada parágrafo 30 pontos. Copie este código para a “seção da sua página:

Este código recua a primeira linha de cada <P> , mas provavelmente você terá um problema chato. Se você for como a maioria dos designers, provavelmente não coloque um P antes do primeiro parágrafo ou entre um cabeçalho como <H1> e o texto que o segue. Infelizmente, isso é exatamente o que você precisa fazer se quiser que o parágrafo seja recuado. O texto nessas situações é parte de algo chamado “bloqueios anônimos” e não pode ser referido diretamente. Para recuá-lo, você deve colocar o texto em um elemento <P>.

Assim, por exemplo, o código a seguir não tem um <P> entre o cabeçalho e o texto, para que o texto não seja indentado:

O que nos dá:

Este código tem um <P> entre o cabeçalho e o texto, então o texto é recuado:

O < BR > Elemento

<BR> insere um único retorno de carro . Enquanto <P> indica o início de um novo parágrafo, <BR> implica apenas um retorno de carro dentro do mesmo parágrafo. <BR> geralmente é renderizado com um único retorno de carro.

Por exemplo, este código:

O que produz isso:

Como <BR> não inicia um novo parágrafo, todos os atributos do parágrafo atual permanecem os mesmos:

O que produz isso:

O atributo CLEAR

CLEAR diz que além de inserir uma quebra de linha, se houver uma imagem ou outro objeto à direita ou à esquerda, passe por ela também. Por exemplo, este código diz que a imagem deve ser alinhada no lado esquerdo da página. Depois, há algum texto e LEFT. O texto a seguir que está além da imagem:

O que produz isso:

Venha para a festa de Halloween! Você vai divirta-se.
20h à meia-noite. Use uma fantasia ou venha como seu próprio ser assustador!

BOTH é o mesmo que ALL, mas não é compatível com vários navegadores, então use ALL em vez disso.

O elemento CENTER

Recomendação de uso: use <DIV> em vez disso.

O que nos dá:

Que é o mesmo que:

O que nos dá:

O elemento < HR >

<HR> desenha uma linha horizontal (uma “regra horizontal”) ao longo da página. É isso. Para um conceito tão simples, as regras horizontais são surpreendentemente populares. Vamos começar com o básico. <HR> não tem tag final e não requer atributos:

Que cria esta regra:

<HR> geralmente indica uma divisão na página. O material antes da regra está em uma “seção” diferente do material posterior. Por esse motivo, muitos designers consideram <HR> uma tag lógica, não uma tag de layout.

O atributo NOSHADE

NOSHADE indica que a regra deve ser apresentada como plana em vez de tridimensional.Compare esta regra horizontal regular:

Com uma NOSHADE regra:

O que nos dá:

NOSHADE é frequentemente usado em conjunto com SIZE:

Produz esta regra:

NOSHADE é popular porque os navegadores geralmente não processam regras tridimensionais muito bem. De fato, em muitas circunstâncias, a regra é apresentada na mesma cor do fundo, tornando-a quase invisível.

O atributo SIZE

SIZE indica a altura da regra. (Acho que chamar de “ALTURA” teria sido muito fácil.) Para largura horizontal, consulte WIDTH. Compare alguns destes tamanhos:

O que nos fornece estas regras:

Os navegadores geralmente não renderizam um <HR> maior que 100 .

O atributo WIDTH

WIDTH define a largura horizontal da regra. Você pode expressar o tamanho em pixels ou como uma porcentagem.

Estes <HR> são definidos com larguras de pixels:

O que nos dá estas regras:

WIDTH é geralmente expresso como uma porcentagem. Se você usar uma largura de porcentagem, certifique-se de incluir o valor em citações.

Produz estas regras:

O padrão é 100%. Por padrão, a regra é centralizado. Para definir um alinhamento diferente, use ALIGN.

As larguras percentuais usam a porcentagem o f a largura disponível, não a largura total da página. Por exemplo, se a regra está em uma tabela, a largura é uma porcentagem da largura da célula da tabela.

Que produz esta tabela:

O atributo ALIGN

ALIGN define o alinhamento do regra. ALIGN só é útil se você também usar WIDTH.

Dê-nos isto:

O elemento < PRE >

<PRE> é uma das tags mais úteis na caixa de ferramentas HTML. <PRE> marca o texto como “pré-formatado” – todos os espaços e retornos de carro são renderizados exatamente como você os digita.

O que produz isso:

<PRE> o texto é renderizado em uma fonte de largura fixa, o que significa que todos os caracteres e espaços são os mesma largura. A largura fixa facilita o layout do texto da maneira que você deseja, então <PRE> é ótimo para criar tabelas “rápidas e sujas” como a anterior.

<PRE> NÃO faz com que o navegador ignore as tags. Você ainda pode criar links e outros goodies:

Produz isto:

Quando você começa a adicionar marcação , fica mais difícil ver como o texto fica (espaçar suas tags uniformemente como a tabela acima ajuda). <PRE> é frequentemente usado para citar grandes blocos de texto que você não deseja “HTMLizar”, mas um “pode bagunçar o texto. Para uma tabela com mais de algumas linhas, geralmente é mais fácil a longo prazo usar o código da tabela.

O “Elemento

” evita que ocorra um retorno de carro. Por exemplo, o código a seguir produz um poema sem sentido de uma longa linha:

Que produz isso:

is most useful for making the page layout more attractive by disallowing breaks inside logical groups of symbols and words. The poem quoted above breaks in appropriate places if each phrase is surrounded by:

O que produz isso:

O “Elemento

is for the situation where you have used para evitar quebras de linha em uma seção de texto, e então você quer dizer “mas você pode quebrar AQUI se quiser”.”não força uma quebra de linha, apenas permite uma:

Produz:

Tendo inventado , Netscape now seems to have abandoned it. It"s better to stick to grouping non-breakable sets of words within, assim:

O que nos dá este parágrafo:

Adam é um escritor técnico especializado em documentação e tutoriais para desenvolvedores.