Adicionando Conteúdo

Criando cabeçalhos de seções

As tags <h1>, <h2>,..., <h6> fornecem uma pré-formatação específica para cada navegador (browser), no entanto mantém entre si uma relação em que sempre o tamanho da fonte decresce à medida em que seus níveis aumentam. Assim, <h1> terá uma fonte maior que <h2>, que por sua vez será maior que <h3> e assim sucessivamente. Normalmente estão em negrito por padrão, porém sua formatação pode ser controlada por meio de CSS.

Este é um cabeçalho nível 4

Este é um cabeçalho nível 5

Inserindo texto

Os editores visuais de XHTML, como o Dreamweaver, reconhecem o pressionar da tecla "Enter" ou "Return" como o início de um novo parágrafo, desde que você esteja trabalhando no modo "Design" e não no código da página. Porém, os editores de texto plano para XHTML não o reconhecem, portanto, para iniciar um novo parágrafo deve-se inserir a tag <p>.

Exemplo:
<p>Texto do parágrafo</p>
<p>Texto do parágrafo 2</p>

É extremamente importante que se utilize o fechamento da tag </p> ao término do parágrafo. As versões anteriores do HTML não exigiam esse comportamento, no entanto, se você quer que as suas páginas sejam exibidas corretamente no XHTML, deve sempre fechar as tags.

 

Imagens

A inserção de imagens é feita por meio da tag <img /> e seus atributos básicos:
<img src="/caminho/imagem.png" width="largura" height="altura" alt="Texto alternativo" />

O atributo "alt" é utilizado para informar ao navegador um texto a ser exibido caso a imagem não seja encontrada ou, aos os leitores de tela para informar aos deficientes visuais do que se trata a imagem. Deve-se usar esse atributo como uma descrição da imagem.

Reconhecidamente, o Internet Explorer exibe esse texto se o cursor for posicionado sobre uma imagem. Esse comportamento é uma má interpretação do atributo "alt". Para que um valor seja exibido ao se posicionar o mouse sobre um elemento, deve-se utilizar o atributo "title".

 

Links e/ou âncoras

Os links são elementos que apontam para outro arquivo ou seção de uma página.
<a href="/caminho/arquivo.html" title="Titulo do link" target="alvo (essa página, frame, ou nova página)" accesskey="Tecla de atalho" tabindex="Ordem de tabulação (para acesso pelo teclado)"/>

Os links podem ser usados como âncoras para navegar dentro da mesma página. Por exemplo, clicando aqui você deverá voltar ao início do texto (Cabeçalhos).

 

Spans

Spans são elementos que podem ser inseridos em outros elementos em linha para identificá-los ou aplicar uma formatação específica. Exemplo:
<p>Paragrafo com texto normal e com <span style="font-weight:bold">texto em negrito.</span></p>

Visualização:
Paragrafo com texto normal e com texto em negrito.

É óbvio que os spans não são utilizados apenas para colocar um texto em negrito, normalmente são utilizados com os atributos "id" ou "class" para aplicar formatações muito mais complexas.

 

Quebras de Linha

As quebras de linha são utilizadas para forçar um elemento a ir para a próxima linha de texto. Pode-se utilizar esse recurso em poemas, letras de músicas ou outras linhas de texto curtas. Também pode ser utilizada para inserir espaço entre parágrafos ou outros elementos. Exemplo:
<p>Paragrafo com texto em linha e com <br />quebra de linha</p>

Visualização:
Paragrafo com texto em linha e com
quebra de linha

A quebra de linha é um elemento vazio, portanto, dispensa o fechamento da tag.

• Estrutura da página >