Formatação Básica

Escola
AULAS
ACTIVIDADES

Cursinhos
HTML
JAVA

Formatação básica

Utilização de marcas

Na escrita de documentos HTML usa-se o "formato livre". Isto é as linhas ou espaços adicionais são ignorados. Efectivamente, como o HTML não especifica exactamente a apresentação do documento, o browser tem a liberdade de o fazer, num dado computador.

É importante porém usar criteriosamente espaços e linhas adicionais tendo em vista a clareza do código, o que facilita, naturalmente, a sua alteração, no futuro (particularmente se não for a mesma pessoa a fazê-lo).

O HTML usa marcas (tags) para indicar ao cliente (browser) como apresentar a informação. As marcas estão contidas entre os símbolos < e >.

Exemplo: <title>A minha primeira página Web</title>

As marcas de "fecho" contém normalmente o símbolo "/" antecedendo a directiva.

A estruturação de um documento HTML, nas secções principais cabeçalho, <head>...</head> e corpo, <body>...</body>, bem como alguns exemplos simples da utilização de marcas, podem consultar-se em qualquer manual básico de HTML. De salientar que para além das marcas <html>, <head>, <title> e <body> o padrão HTML poucos mais elementos estruturantes exige. Por outro lado há apenas três tipos principais de conteúdos num documento HTML: texto, comentários e marcas.

No guia BARE BONES HTML encontra todas as marcas que as versões actuais da maioria dos navegadores pode reconhecer. Pode até optar pela versão portuguesa deste guia, também em linha.

Comentários

Tendo em vista a legibilidade do código, aconselha-se a utilização de comentários. Os comentários não são apresentados pelo navegador (browser). Os comentários são delimitados por  e podem escrever-se em múltiplas linhas.

Exemplo:

Mais marcas

Marcas físicas e lógicas

Marcas físicas

Isto é a marca negrito
Isto é a marca negrito
Isto é a marca itálico
Isto é a marca itálico

Marcas lógicas

Isto é a marca de forte ênfase
Isto é a marca de forte ênfase
Isto é a marca de ênfase
Isto é a marca de ênfase

Há uma distinção subtil entre estes dois conceitos. As marcas físicas alteram a aparência da fonte. As lógicas (ainda pouco usadas) dão ao cliente a liberdade de dar à "ênfase" a aparência que entender. Por exemplo, a marca poderia corresponder à apresentação do texto a vermelho. As marcas lógicas são, digamos, marcas que atribuem significado ao texto.

Além das indicadas, outras marcas lógicas são <cite> (citação), <code> (código de programa), <kbd> (texto teclado pelo utilizador), <sample> (amostra), <dfn> (definição) e <var> (nome de variável em código de programa).
A todas estas marcas estão associadas as correspondentes marcas de fecho.

As marcas físicas são (negrito), (itálico), <tt> (teletypewriter), (sublinhado), <strike> (rasurado), <big> (grande), (pequeno), (superior à linha), (inferior à linha), e (tipo de letra).

Caracteres especiais

O HTML permite a codificação de caracteres especiais, nomeadamente os que têm significado específico para o navegador, por exemplo "<". Esta codificação inicia-se por &, seguida do nome do carácter e termina com ;
Alternativamente pode usar-se, depois do &, o símbolo # seguido do código de três dígitos do carácter, no padrão ISO 8859-1.

Exemplo:
á ...... á
à ...... à
ã ........ ã
< .............. <
< ........ <

Tamanho, cor e tipo de letra

O HTML permite o controlo sobre o tamanho do tipo de letra à custa das marcas <basefont> e . A primeira define o tamanho do tipo de letra base (ou normal) do nosso documento. Geralmente usa-se esta marca uma vez só no cabeçalho, mas pode usar-se mais do que uma vez ao longo do documento. Esta marca tem como único atributo o tamanho (size) do tipo de letra. Este pode ser especificado em valor absoluto, de 1 a 7 (por omissão é 3) ou em valor relativo, com recurso aos sinais + e -, relativamente ao tipo de letra base (e não ao último especificado). Note-se que a marca de fecho </basefont>, contrariamente ao habitual, não termina o tamanho do tipo de letra seleccionado em último lugar, mas repõe o valor do tamanho usado por omissão. Não se aconselha, por isso, o uso desta marca.

A marca além do atributo tamanho, aceita o atributo cor (color).

Exemplo:
Aqui está o dragão
Aqui está o dragão

A cor indica-se através do respectivo código RGB, precedido do símbolo #. As aspas não são obrigatórias. A cor pode também especificar-se pelo respectivo nome padrão, nesta caso blue.

Exemplo:
Aqui está o dragão
Aqui está o dragão

Para a especificação do código RGB é muitas vezes útil um conversor de decimal para hexadecimal, uma vez que programas como por exemplo o Photoshop, da Adobe, usam a base 10 para especificar o valor das cores.

Alguns navegadores aceitam ainda o atributo face. Este permite atribuir um tipo de letra, que será o primeiro suportado pelo navegador, de um conjunto de tipos de letra separados por vírgulas.

Exemplo:
Este é o tipo de letra por omissão, mas este quem adivinha? 
Este é o tipo de letra por omissão, mas este quem adivinha?

Texto pré-formatado

Por vezes temos necessidade que o texto seja apresentado pelo browser exactamente como o introduzimos, com espaços e ou linhas adicionais. Tal pode conseguir-se com a marca <pre>.

Exemplo:
<pre>Isto é

um exemplo
de um texto

preformatado </pre>

A pré-formatação é frequentemente usada para construir tabelas. Evite os tabs nessa construção, pois são interpretados de forma diferente pelos navegadores. Use espaços para conseguir o efeito desejado. A marca <pre> aceita como único atributo a largura (width) que fixa o número máximo de caracteres que uma linha pode conter (pode ir além da largura da janela).

Outras marcas que podem por vezes ser usadas em lugar do texto pré-formatado são as marcas  e . A primeira suprime a mudança automática de linha quando o texto atinge a margem direita da janela. A segunda, usada com a primeira, acrescenta alguma sofisticação, permitindo partir a linha apenas se a margem direita da janela for ultrapassada.

Center

Para centrar texto, imagens ou títulos pode recorrer-se às marcas <center>...</center>.

Exemplo:
<center>Isto é texto centrado</center>

Isto é texto centrado

Automaticamente é colocada uma mudança de linha, após a marca </center>.

Blockquote

As marcas <blockquote>...</blockquote> usam-se para avançar à esquerda e à direita o texto que fica dentro destas marcas.

Exemplo:
<blockquote> A Internet é como um cérebro, auto-regulada, sem ninguém a controlá-la, que se limita a crescer com base em associações semelhantes às que uma criança faz, imagens com sons, ...pessoas com experiências...</blockquote>

A Internet é como um cérebro, auto-regulada, sem ninguém a controlá-la, que se limita a crescer com base em associações semelhantes às que uma criança faz, imagens com sons, ...pessoas com experiências...

Address

As marcas <address>...</address> aparecem normalmente no fim de um documento HTML, enquadrando a informação relativa aos contactos do autor ou da instituição. A informação entre estas marcas apresenta-se em itálico. Esta marca é outro exemplo de uma marca lógica.

A cor nos documentos HTML

Usando diferentes atributos da marca <body> podem definir-se as cores do fundo, das ligações e do texto num documento HTML.
É importante não esquecer que o navegador tem as suas próprias preferências para a cor de fundo, que podem sobrepôr-se
às cores definidas no documento HTML. Por outro lado as cores finais da apresentação do documento pelo navegador dependem do número de cores disponíveis no monitor que estiver a ser utilizado. Muitos usam apenas 256 cores e, por exemplo, fundos em tom pastel, podem parecer brancos.

Exemplos de cores possíveis.

O atributo BGCOLOR

Este atributo permite especificar a cor de fundo. O seu valor indica-se através do respectivo código RGB, precedido do símbolo #. A cor pode também especificar-se pelo respectivo nome padrão.

Exemplos:
<body bgcolor="#F8F8fFF">

Imagens de Fundo

Através do atributo background pode indicar-se uma imagem para figurar como fundo de uma página. Essa imagem é replicada, horizontal e verticalmente (tiling), de modo a cobrir toda a janela. É, pois, apenas necessário criar uma pequena "amostra" da imagem desejada.

Exemplo:
<body background="mosaico.gif">

Exemplos de imagens de fundo.

A Cor do texto

Sobretudo quando se escolhem imagens para o fundo das páginas, torna-se conveniente alterar a cor do texto para que este seja suficientemante visível. Para o conseguir usa-se o atributo text da marca <body>.

Exemplo:
<body background="mosaico.gif" text="blue">

Este atributo altera a cor do texto que não faz parte de uma ligação. Os atributos link, vlink e alink permitem seleccionar a cor das ligações ainda não seleccionadas, das já "visitadas" e das activas, respectivamente.

Exemplos:
<body bgcolor="#F8F8fFF" link="#CC0000" alink="#FF3300" vlink="#005522" >

Listas

Em HTML é simples criar listas não ordenadas, ordenadas ou de definições. É igualmente possível criar listas dentro de outras listas. As listas são uma das facilidades do HTML que nos permitem organizar facilmente a informação.

Listas não ordenadas

Estas listas são definidas através da marca <ul>, seguida dos itens da lista identificados pela marca <li>. A lista termina com a marca </ul>, que é obrigatória. A marca </li> não é obrigatória, por se inferir facilmente, e é mais versátil não a utilizar, por facilidade de edição futura das listas.

Exemplo:
<ul>
 <li> item 1
 <li> item 2
 <li> item 3
</ul>

item 1
item 2
item 3

O modo como se apresentam as listas no navegador varia consoante este. Não nos devemos preocupar excessivamente com a posição exacta dos diferentes itens. Mesmos os símbolos que, por omissão, são colocados antes de cada elemento da lista (identificado pela marca <li>) variam de navegador para navegador. Podemos usar o atributo type para seleccionar esse símbolo. Este atributo pode ter os valores disc, circ ou square. Por exemplo, usando <li type=square>, esse símbolo será um quadrado.

As listas do tipo "directório", definidas pelas marcas <dir>...</dir> são uma variante das listas não ordenadas e muitas vezes os navegadores não as distinguem. No entanto, os itens, também identificados pela marca <li>, não podem conter outros blocos, por exemplo outras listas.

Uma outra variante das listas não ordenadas são os menus, definidos pelas marcas <menu>...</menu>. Alguns navegadores podem apresentá-los de forma diferente da das listas não ordenadas. Tal como no casos dos directórios, não podem conter outras estruturas de bloco.

Listas ordenadas

As listas ordenadas distinguem-se das anteriores pela marca de abertura e fecho da lista, respectivamente <ol> e </ol>.
Pode usar-se o atributo start para obrigar a que a numeração da lista não comece necessariamente pelo número 1. Por exemplo, <ol start=7>. O atributo type pode igualmente usar-se aqui para alterar o tipo de numeração. Por exemplo, <li type=i> implica a numeração romana (minúsculas) para os itens. O valor I, para o atributo, permite igaualmente a numeração romana, mas com maiúsculas. Os valores A e a, permitem a ordenação com letras do alfabeto, maiúsculas e minúsculas, respectivamente. O valor 1 do atributo type, é usado, por omissão.

Nas listas ordenadas pode usar-se o atributo value para alterar o valor da ordenação. Por exemplo, <li value=8> altera a ornenação a partir desse item, que passa a ser de 8 em diante.

Quer as listas não ordenadas, quer as ordenadas, permitem o atributo compact que as apresenta de uma forma mais "compacta". O espaçamento entre linhas e o avanço (indent) são geralmente alterados. Há navegadores que ignoram este atributo.

Listas de definições

As marcas usadas neste caso são <dl> e </dl> para abertura e fecho da lista, <dt> para definir cada termo e <dd> para identificar a definição respectiva.

Exemplo:
<dl>
 <dt> Termo 1
 <dd> Isto é a definição do termo 1
 <dd> Mais outra definição do termo 1
 <dt> Termo 2
 <dd> Isto é a definição do termo 2
</dl>

Termo 1
    Isto é a definição do termo 1
    Mais outra definição do termo 1
Termo 2
    Isto é a definição do termo 2

Listas dentro de outras listas

Dentro de uma lista podem definir-se outras listas. Basta utilizar as marcas de abertura e fecho de forma apropriada. Esta é uma das situações em que a clareza na escrita do código é fundamental.

Exemplo:
<ul>
 <li> item 1
 <ul>
 <li> item interior 1
 <li> item interior 2
 </ul>
 <li> item 2
 <ul>
 <li> item interior 1
 <li> ittem interior 2
 </ul>
</ul>