Sei sulla pagina 1di 16
Página Inicial Criação de Websites Tutoriais HTML Básico CSS Básico JavaScript Básico XML Básico Guias

Página Inicial

Criação de Websites

Tutoriais HTML Básico CSS Básico JavaScript Básico XML Básico Guias de Referência Elementos HTML Propriedades CSS Seletores CSS Tabela de Cores HTML/CSS Tabela de Caracteres Especiais Como especificar o path

Tabela de Caracteres Especiais Como especificar o path Noções de SQL Downloads Links úteis Hora do
Tabela de Caracteres Especiais Como especificar o path Noções de SQL Downloads Links úteis Hora do

Noções de SQL

Downloads

Links úteis

Hora do Café

HTML Básico

Por Aires Bento Pereira Filho

Entrar em Contato

A página HTML As tags Os atributos das tags O uso de maiúsculas ou minúsculas Bons hábitos de digitação – rumo ao XHTML Comandos básicos de uma página HTML Criando uma página HTML Título do Documento Cabeçalhos Parágrafos e Quebras de linhas Listas Ordenadas e Não Ordenadas Listas de Definições

A página HTML

Uma página HTML é gerada por um simples arquivo de texto. Esse arquivo de texto pode ser editado até pelo Bloco de Notas e deve ser salvo com a extensão .html ou .htm.

Se você abrir qualquer arquivo .html com um navegador (com o Internet Explorer, por exemplo), poderá visualizar a página HTML e, se abrir o mesmo arquivo com o Bloco de Notas, poderá visualizar e editar o código-fonte da página.

Você poderá também abrir o código-fonte, a partir do Internet Explorer, quando estiver visualizando a página. Para fazer isso, acesse a barra de menus, selecione Exibir e dê um clique em Código fonte. Em outros browsers, isso pode ser feito de maneira semelhante.

O arquivo deve possuir obrigatoriamente alguns comandos que fazem o navegador enxergar o texto como uma página HTML. Esses comandos são marcações também chamadas de etiquetas (tags, em inglês).

As tags

As tags, que servem para definir os elementos da página, são iniciadas pelo símbolo "menor que" (<) e finalizadas pelo símbolo "maior que" (>). Em geral, uma tag aparece duas vezes, abrindo e fechando um conteúdo, mas a que fecha contém uma barra (/).

Se quisermos, por exemplo, inserir dois elementos (um cabeçalho e um parágrafo), fazemos assim:

<h1>Isto é um cabeçalho</h1> <p>Isto é um parágrafo</p>

Nem todas as tags necessitam funcionar em pares. Por exemplo, para os casos acima, o elemento parágrafo introduzido pela tag <p> não necessitaria da tag de fechamento </p>. O browser saberia que o parágrafo chegou ao fim, quando encontrasse qualquer outro elemento ou mesmo outro parágrafo. Já para o elemento cabeçalho, também exemplificado, o fechamento não é dispensável.

Há também os elementos que não possuem tag de fechamento. São chamados de elementos vazios. Neste caso, a tag de fechamento não existe porque não há conteúdo

a ser fechado.

Um exemplo de uma tag que cria um elemento vazio é a que introduz uma quebra de linha:

<p>Aqui temos um parágrafo<br> que continua na linha seguinte.</p>

Note, neste exemplo, que o conteúdo do elemento parágrafo é tudo que está entre as tags <p> e </p>. Já o elemento quebra de linha <br> não possui conteúdo.

Os atributos das tags

Uma tag pode conter um ou mais atributos que são colocados somente na de abertura, obedecendo ao formato: atributo="valor". O valor pode ser colocado entre aspas ou não. Veja o exemplo de uma tag, onde align é o atributo:

<p align="center">parágrafo centralizado</p>

Veja agora um exemplo em que colocamos mais de um atributo na mesma tag:

<font face="arial" size="2">texto</font>.

O uso de maiúsculas ou minúsculas

A liguagem HTML não diferencia letras maiúsculas e minúsculas. Logo, tanto faz você escrever, por exemplo, <FONT>, <font> ou até mesmo <FoNt>. Isso vale também

para os atributos.

Bons hábitos de digitação – rumo ao XHTML

O escopo do presente tutorial é a linguagem HTML, mas vamos falar de antemão um pouco sobre XHTML.

Já tratamos de certas liberdades existentes no HTML, como digitar as tags e atributos em maiúsculas ou minúsculas, colocar os valores dos atributos entre aspas ou não, além da dispensa de algumas tags de fechamento.

O XHTML que é uma aplicação do XML é mais rigoroso e nele não podemos contar com tais liberdades.

Você naturamente irá querer depois converter suas páginas para XHTML, já que esta é uma nova geração do HTML, ou seja, é um avanço.

Então, mesmo sabendo que não são uma exigência da linguagem HTML, considere como bons hábitos:

1. Utilizar sempre as tags de fechamento;

2. Colocar sempre os valores dos atributos entre aspas;

3. Utilizar sempre letras minúsculas nas tags e atributos.

Comandos básicos de uma página HTML

<html>

<head>

<title> ··· </title>

</head>

<body>

···

</body>

</html>

As tags <html> e </html> marcam o início e o final do documento HTML. Enfeixam duas subestruturas distintas: o cabeçalho do documento, delimitado por <head> e </head>, e o corpo do documento, entre <body> e </body>.

O bloco cabeçalho do documento, marcado por <head> e </head>, traz informações sobre o conteúdo da página e pode ser constituído de vários elementos, dentre os

quais, temos o título do documento, entre as tags <title> e </title>.

O bloco marcado por <body> e </body> é o corpo da página e contém as informações que efetivamente serão exibidas pelo navegador. Nele, são inseridos elementos, tais

como, cabeçalhos, parágrafos, listas, links, imagens e tabelas.

Criando uma página HTML

Para criar uma página HTML, a mais simples possível, abra o Bloco de Notas (ou outro editor de texto ASCII) e siga os seguintes passos:

1. Copie os comandos básicos mencionados no tópico anterior;

2. Entre as tags <title> e </title>, digite o título do documento;

3. Entre as tags <body> e </body>, insira um elemento qualquer.

4. Salve o documento atribuindo ao arquivo um nome com a extensão .html ou .htm.

Observação:

O nome do arquivo tem de ser todo em letras minúsculas. É que o Windows aceita letras maiúsculas para nomeação de arquivos, mas o Unix e o Linux não aceitam.

nomeação de arquivos, mas o Unix e o Linux não aceitam. Seguindo o pequeno roteiro acima,

Seguindo o pequeno roteiro acima, vamos escrever nossa primeira página HTML:

<html>

<head>

<title>Exemplo 0 - Esta é uma página simples</title>

</head>

<body>

Este é um texto que aparece no corpo desta página simples.

</body>

</html>

O passo 3 do roteiro manda inserir um elemento qualquer entre <body> e </body>. Nós Sabemos que um elemento deve ser envolvido por uma tag de abertura e outra de

fechamento; ou deve ser introduzido por uma única tag, se for um elemento vazio.

Entretanto, colocamos um texto sozinho dentro do corpo do documento. Fizemos isso para mostrar que qualquer texto isolado é apresentado normalmente na página. Em HTML, isso realmente funciona, mas é uma prática que deve ser evitada. No XHTML, que é mais rigoroso, isso não é permitido.

Melhor seria fazer assim:

<p>Este é um texto que aparece no corpo desta página simples.</p>

Observação:

Doravante, na medida em que formos fazendo nossa explanação, estaremos inserindo exemplos que terão a forma de apresentação semelhante ao que foi visto acima. Sugerimos que você, utilizando um editor de texto ASCII qualquer (o Bloco de Notas, por exemplo), copie o código do exemplo, salve-o com a extensão .html ou .htm e depois abra-o com o seu browser para ver o resultado. Você também poderá visualizar o resultado desses exemplos dando um clique na imagem que aparece na introdução de cada um (um "olho").

Título do Documento

Deve ser inserido entre as tags <title> e </title>. Dá uma identidade ao documento e é utilizado em buscas na rede, devendo por isso ser descritivo. Aparece fora da página, na barra de título do navegador. Não podemos confundir esse título com aqueles títulos que são exibidos dentro da página.

Cabeçalhos

O texto de um cabeçalho deve ser especificado com a utilização das tags a seguir. São seis níveis: de 1 (o maior tamanho) a 6 (o menor tamanho).

<h1> e </h1> <h2> e </h2> <h3> e </h3> <h4> e </h4> <h5> e </h5> <h6> e </h6>

Observação:

Não podemos confundir esse cabeçalho, que é uma espécie de título dentro do corpo do documento, com o cabeçalho do documento que é constituído pelos elementos delimitados por <head> e </head>.

Eis um exemplo de página, onde inserimos dois cabeçalhos.elementos delimitados por <head> e </head>. <html> <head> <title>Exemplo

<html>

<head>

<title>Exemplo 1</title>

</head>

<body>

<h1>Este é um cabeçalho de nível 1</h1> <h2>Este é um cabeçalho de nível 2</h2>

</body>

</html>

Parágrafos e Quebras de Linhas

A tag <p> é utilizada para definir o início de um novo parágrafo, deixando uma linha em branco. Ao digitar o texto, de nada adianta você pressionar a tecla Enter para inserir

um parágrafo. É necessário que se utilize a tag apropriada para que o navegador a interprete. Em HTML, a tag de fechamento </p> é dispensável, mas, como já dissemos, é aconselhável a sua utilização.

Apresentamos o código de uma página que contém dois parágrafos.de fechamento </p> é dispensável, mas, como já dissemos, é aconselhável a sua utilização. <html>

<html>

<head> <title>Exemplo 2</title> </head> <body> <h2>Texto com dois parágrafos</h2> <p>Queremos que este texto tenha dois parágrafos. Este é o primeiro.</p> <p>Este é o segundo parágrafo.</p> </body> </html>

Há muitas situações em que precisamos mudar de linha sem deixar linha em branco. Para fazer isso, devemos aplicar uma quebra de linha através da tag <br>.

No exemplo de código a seguir, considere que queremos exibir uma estrofe com quatro versos. Sabemos que cada verso de uma estrofe constitui uma linha, portanto, deveremos usar uma tag <br> para separar cada uma dessas linhas. Se utilizarmos a tag de parágrafo para fazer isso, vai ocorrer a inserção de uma linha em branco entre cada verso e não é isso que desejamos.aplicar uma quebra de linha através da tag <br>. <html> <head> <title>Exemplo 3

<html> <head> <title>Exemplo 3 </title> </head> <body>

<h2>Uma quadrinha popular</h2> <p> Tanto limão, tanta lima,<br> Tanta silva, tanta amora,<br>

Tanta menina bonita

Meu pai sem ter uma nora!

</p>

</body>

</html>

Listas Ordenadas e Não Ordenadas

A linguagem HTML permite a criação de listas que podem ser ordenadas ou não ordenadas. As ordenadas (ordered lists) são criadas com as tags <ol> e </ol> e as não ordenadas (unordered lists) com <ul> e </ul>. Em ambas, utilizamos <li> e <li> para introduzir cada item. Esta última tag não necessitaria da tag de fechameto, mas a estamos utilizando, pelos motivos já expostos.

<br>

Apresentamos um exemplo de lista ordenada:estamos utilizando, pelos motivos já expostos. <br> <html> <head> <title>Exemplo 4

<html> <head> <title>Exemplo 4 </title> </head> <body> <h2>Uma lista ordenada</h2>

<ol>

<li>Belo Horizonte</li>

<li>Salvador</li>

<li>Rio de Janeiro</li>

</ol>

</body>

</html>

Um exemplo de lista não ordenada.</ol> </body> </html> <html> <head> <title>Exemplo

<html>

<head>

<title>Exemplo 5</title>

</head>

<body>

<h2>Uma lista não ordenada</h2>

<ul>

<li>Belo Horizonte</li>

<li>Salvador</li>

<li>Rio de Janeiro</li>

</ul>

</body>

</html>

Nos exemplos anteriores você pode observar que ambos os tipos de listas possuem marcadores. Nas ordenadas, os itens são numerados e, nas não ordenadas, aparece como marcador um pequeno disco.

Se você quiser, poderá mudar isso definindo o tipo de marcador empregado para cada item. Para fazer isso, basta especificar o atributo type. Essa especificação será feita na tag <ol> ou <ul>, para que o tipo seja válido em toda a lista, ou na tag <li>, para que seja válido para determinado item.

<ol type="marcador"> ou <ul type="marcador"> ou <li type="marcador">

Para as listas ordenadas, marcador pode ser:

1 - números (default);

a -letras minúsculas;

A - letras maiúsculas;

i - números romanos em minúsculas;

I - números romanos em maiúsculas.

Para as listas não ordenadas pode ser: disc (default), circle ou square.

Agora apresentamos um exemplo com duas listas, uma ordenada e outra não ordenada. Utilizamos o atributo type em ambas para fazer com que a primeira tenha seus itens marcados com letras type em ambas para fazer com que a primeira tenha seus itens marcados com letras minúsculas e a segunda com pequenos quadrados (square).

<html>

<head> <title>Exemplo 5a</title> </head> <body> <h2>Uma lista ordenada e outra não ordenada</h2> <ol type="a"> <li>Belo Horizonte</li> <li>Salvador</li> <li>Rio de Janeiro</li> </ol> <ul type="square"> <li>Paraná</li> <li>Santa Catarina</li> <li>Rio Grande do Sul</li> </ul> </body> </html>

Listas de Definições

Além das listas ordenadas e não ordenadas, vistas anteriormente, podemos criar também as chamadas listas de definições. Numa lista desse tipo, você pode apresentar termos e abaixo de cada um a sua definição com um certo deslocamento.

As tags <dl> e </dl> abrem e fecham esse tipo de lista. Entre as tags <dt> e </dt>, você coloca o termo a ser definido e, em seguida, a definição entre <dd> e </dd>. Vejamos a disposição abaixo.

<dl> <dt>termo a definir</dt> <dd>definição</dd> <dt>termo a definir</dt> <dd>definição</dd> </dl>

<dd>definição</dd> </dl> Um exemplo de lista de definições: <html>

Um exemplo de lista de definições:

<html> <head> <title>Exemplo 6</title> </head> <body> <h2>Uma lista de definições</h2> <dl> <dt>Belo Horizonte</dt> <dd>Capital do Estado de Minas Gerais. Situada a 434 km do Rio de Janeiro e a 586 km de São Paulo.</dd> <dt>Ouro Preto</dt>

<dd>Patrimônio histórico da humanidade. Preserva um dos maiores acervos barrocos do mundo. Localiza-se a 90 km de Belo Horizonte.</dd> </dl> </body> </html>

Links

Podemos inserir um link numa página HTML através das tags <a> e </a>. E, no atributo href , colocamos o seu destino.

Eis as sintaxe geral de um link:

<a href="destino">conteúdo</a>

destino Pode ser um nome de um arquivo, um caminho completo do arquivo (path), um ponto localizado no interior de um arquivo, uma URL, ou ainda um endereço de e-mail. conteúdo Pode ser um texto ou uma imagem e é nele que o usuário dá um clique para fazer o acesso.

Vamos classificar os links, segundo o seu destino, assim:

1. Links com outras páginas do site;

2. Links com outros sites;

3. Links com pontos determinados no interior da página (esses pontos recebem marcas para serem localizados);

4. Links com endereços de correio (para que o visitante possa enviar uma mensagem);

5. Links com arquivos para downloads.

Links com outras páginas do site

São links que estabelecem conexão entre as páginas do mesmo site. Vejamos a forma de fazer isso:

<a href="arquivo.html">conteúdo</a>

Onde arquivo.html é o nome de um dos arquivos que compõem o site e conteúdo é o trecho de texto ou imagem onde o visitante irá clicar.

é o trecho de texto ou imagem onde o visitante irá clicar. Neste exemplo vamos apresentar

Neste exemplo vamos apresentar uma página que contém um link que acessa a página referente ao primeiro exemplo apresentado neste trabalho.

<html> <head> <title>Exemplo 7</title> </head> <body> <h1>Exemplo de link</h1> <p>No exemplo 1, mostramos como criar cabeçalhos. Lembra-se?</p> <p>Para rever o exemplo 1, <a href="exemplo1.html">clique aqui.</a></p> </body> </html>

Se o arquivo de destino não estiver no mesmo diretório em que está localizada a página que contém o link, não basta especificar apenas o seu nome como fizemos acima; será necessário o caminho completo (path). Para que você possa especificar esse caminho de maneira adequada, leia como especificar o caminho de acesso a arquivos (path).

Links com outros sites

São links que se dirigem a páginas de outro site. Para fazer isso, basta colocar no atributo href da tag <a> o endereço da página, ou seja, a URL.

<a href=http://www.sitexyz.com.br>sitexyz</a>

É necessário que no endereço se coloque o protocolo de acesso seguido de duas barras, como http//, ftp// ou outros. É mais comum que esses links tenham como destino

a página principal do site, como no exemplo acima. Mas é possível linkar também outras páginas do site, conforme o exemplo abaixo.

<a href=http://www.sitexyz.com.br/pagx.html>sitexyz</a>

Links com pontos determinados no interior da página

Quando uma página é muito extensa, para que seja facilitada a sua leitura, podemos criar links que acessam determinados pontos dentro dela. Esses pontos recebem marcas que permitem a sua localização. Normalmente se faz isso na mesma página, mas é perfeitamente possível acessar outras páginas abrindo-as a partir desses pontos.

Para estabelecer essa funcionalidade, é necessário criar uma marca de identificação para ser utilizada como destino do link. Vejamos como é criada essa marca.

<a name="marca"></a>.

Onde marca é um nome atribuído ao ponto a ser localizado dentro da página.

Assim, um documento que contenha dois capítulos poderia ter duas marcas colocadas nos pontos onde esses capítulos iniciam:

<a name="cap1">Capítulo 1</a> [desenvolvimento do capítulo 1]

<a name="cap2">Capítulo 2</a> [desenvolvimento do capítulo 2]

Colocadas essas marcas, pode-se então inserir em algum lugar da página os links que irão atingi-las:

<a href="#cap1">Capítulo 1</a> <br> <a href="#cap2">Capítulo 2</a>

Não se pode deixar de digitar o símbolo # (tralha). Este símbolo é próprio dos links que se dirigem a pontos determinados, portanto não é utilizado nos demais.

Se você desejar acessar determinado ponto dentro de outro documento, especifique o nome do arquivo seguido do símbolo # e do nome da marca:

<a href="arq.html#cap2">Capítulo 2</a>

Links com endereços de correio

Os links a endereços de correio são aqueles que permitem ao visitante remeter uma mensagem via correio eletrônico (e-mail). Vejamos como se faz isso.

<a href="mailto:abc@gmail.com">abc@gmail.com</a>

Notar que antes do endereço de e-mail colocamos a palavra mailto seguida de dois-pontos.

A mensagem pode ser emitida com a indicação de "assunto". Fazemos isso colocando depois do endereço de e-mail, um ponto de interrogação (?), a palavra subject, o

sinal de igual (=) e o assunto.

<a href="mailto:abc@gmail.com?subject=mensagem do visitante">abc@gmail.com</a>

Podemos especificar também que a mensagem deve ser emitida com cópia para outro endereço de e-mail.

<a href="mailto:abc@gmail.com?subject=mensagem do visitante&cc=xyz@gmail.com">abc@gmail.com</a>

O visitante da página necessitará ter uma conta de e-mail configurada em seu sistema. Se não tiver, esse sistema de contato não funcionará.

Por isso, pode ser interessante especificar no conteúdo do link (o que há entre <a> e </a>) o endereço de e-mail. Assim o visitante poderá copiá-lo para remeter sua mensagem através de outro computador ou de um sistema de web-mail.

Links com arquivos para downloads

Este tipo de link permite que você coloque à disposição do visitante arquivos para serem baixados (downloads). O mecanismo é o mesmo dos outros links, só que, em vez de dirigir-se a uma página web, dirige-se a um arquivo de outro tipo.

<a href="arq.zip">clique aqui para fazer o download</a>

Quando o visitante dá um clique num link desse tipo, aparece uma caixa de diálogo exibindo a seguinte mensagem: "Deseja abrir o arquivo ou salvá-lo no computador?".

É importante que você não disponibilize arquivos executáveis, mas sim arquivos comprimidos, como o arquivo .zip. Isso porque o arquivo ocupará menos espaço e, dessa

forma, o visitante terá de salvá-lo antes de executá-lo.

Entretanto, você poderá disponibilizar outros tipos de arquivo, como é o caso dos arquivos .pdf. Para os arquivos .pdf, o navegador colocará o programa Acrobat Reader em funcionamento para mostrar o conteúdo.

Links cujos resultados são abertos em nova janela

Colocando o atributo target na tag <a>, podemos definir em qual janela (ou frame) deverá ser exibido o resultado do link. Se esse atributo não for especificado, a exibição será feita na própria janela onde está o link.

Pode-se atribuir um dos seguintes valores:

_blank - A exibição será feita em uma nova janela. _self - A exibição será feita na própria janela onde está o link (padrão). _parent - A exibição será feita na janela que contém o frame onde está o link. _top - A exibição será feita na janela que ocupa posição mais alta na hierarquia, quando há frames.

Observação:

Sobre frames estaremos falando mais adiante.

Atributos do corpo da página

Alguns atributos podem ser especificados na tag <body> para definir a forma de apresentação da página HTML.

Você pode estabelecer uma cor de fundo para a página ou uma imagem de fundo. Pode estabelecer a cor do texto (cor dos caracteres) e também a cor dos links.

bgcolor Define uma cor de fundo para a página. background Define uma imagem como fundo de página. text Define a cor do texto para todo o corpo da página. link, vlink e alink Definem as cores dos links: não vistado, visitado e ativo, respectivamente.

Cor de fundo da página e cor do texto

Para definirmos a cor de fundo da página e a cor do texto, inserimos na tag <body> os atributos bgcolor e text. Como valor desses atributos, podemos colocar o nome da cor, o seu código hexadecimal no formato #rrggbb ou o seu código decimal no formato rgb (x,x,x). Neste último formato, x pode ser um número de 0 a 255 ou um percentual de 0% a 100%.

Então, se você quiser colocar, por exemplo, um fundo azul em sua página, poderá fazê-lo adotando uma das formas abaixo:

<body bgcolor="blue"> <body bgcolor="#0000FF"> <body bgcolor="rgb(0,0,255)"> <body bgcolor="rgb(0%,0%,100%)">

Note que o símbolo # no início do código hexadecimal é obrigatório.

Disponibilizamos neste site uma tabela de cores que você poderá usar.

Vejamos um exemplo de página que tem o fundo verde e o texto branco. Neste exemplo optamos por usar nomes de cores, tanto em bgcolor como em text . bgcolor como em text.

<html> <head> <title>Exemplo 8</title> </head> <body bgcolor="green" text="white"> <h3>Exemplo de cor de fundo e de texto</h3> <p>Nesta página, definimos o fundo verde (green) e o texto branco (white).</p> <p>Observe que tais definições foram feitas em bgcolor e text, ambos atributos da tag body.</p> </body> </html>

É muito importante que, ao escolhermos uma cor de fundo, preocumemo-nos também com a definição de uma cor adequada para o texto, para que ocorra o devido contraste entre ambas e fique assegurada a nitidez dos caracteres. Assim, um fundo de cor clara exige uma cor escura para o texto, já um fundo de cor escura exige uma cor clara. Imagine se você colocasse um fundo preto e esquecesse de definir uma cor clara para o texto. Considerando essa hipótese, o texto preto (padrão) num fundo também preto ficaria invisível.

Imagem como fundo de página

Utilizando o atributo background, podemos colocar uma imagem como fundo de página. Para isso, especificamos como valor desse atributo, o nome de um arquivo de imagem, geralmente .gif ou jpg. Na maioria das vezes, usamos uma imagem pequena (tamanho em pixels), mas ela toma conta de toda a página numa formação tipo mosaico.

Vamos ver agora um exemplo de página que tem como fundo uma imagem. Neste exemplo, partimos do pressuposto de que o arquivo de imagem está no mesmo diretório onde se encontra a página.toma conta de toda a página numa formação tipo mosaico. <html> <head> <title>Exemplo

<html> <head> <title>Exemplo 9</title> </head>

<body background="fundo2.gif"> <h3>Exemplo de fundo de página com imagem</h3> <p>Nesta página, colocamos uma imagem como fundo. Não fizemos nenhuma definição para a cor do texto, uma vez que a cor padrão (preto) satisfaz.</p> <p>Observe que o fundo foi definido em background, atributo da tag body.</p> </body> </html>

Se o arquivo de imagem não estiver no mesmo diretório, será necessário especificar o caminho (path) e, para fazer isso adequadamente, leia como especificar o caminho de acesso a arquivos (path).

Quando falamos acima sobre a cor de fundo, falamos também da necessidade de contrastar a cor do texto. É claro que esse mesmo cuidado também tem de existir quando o fundo é uma imagem. Mas neste caso temos ainda de ter uma segunda preocupação. Mesmo tendo colocado uma imagem de fundo, devemos também colocar uma cor de fundo igual ou semelhante à cor da imagem (com o atributo bgcolor). Isso porque, se por algum motivo o browser não carregar a imagem, o contraste estabelecido para o texto estará preservado.

o contraste estabelecido para o texto estará preservado. Vamos a um exemplo de página que tem

Vamos a um exemplo de página que tem como fundo uma imagem escura.

<html> <head> <title>Exemplo 10</title> </head> <body background="fundo3.gif" bgcolor="#000000" text="#FFFFFF"> <h3>Exemplo de fundo de página com imagem escura.</h3> <p>Nesta página, definimos imagem de fundo, cor de fundo (igual a cor da imagem) e cor do texto contrastante.</p> </body> </html>

Cor dos Links

Na tag <body>, com atributos link, vlink e alink, pode-se definir cores para todos os links que aparecem na página, em todos os seus estados.

link - Define a cor dos links que não foram visitados. vlink - Define a cor dos links já visitados. alink - Define a cor dos links ativos. Um link está ativo no momento em que se dá um clique nele.

Acima, quando tratamos da definição da cor de fundo da página e da cor do texto, dissemos que o valor da cor pode ser especificado pelo nome ou pelo código. Ao atribuirmos valor aos atributos referentes à cor dos links, fazemos da mesma forma.

Assim, poderíamos fazer o seguinte:

<body link="blue" vlink="yellow" alink="teal"> ou <body link="#0000FF" vlink"#FFFF00" alink="#008000"> ou <body link="rgb(0,0,255)" vlink="rgb(255,255,0)" alink="rgb(0,128,128)"> ou <body link="rgb(0%,0%,100%)" vlink="rgb(100%,100%,0%)" alink="rgb(0%,50%,50%)">

Formatação de texto

Vamos falar agora de como formatar o texto que você já sabe inserir em sua página. Podemos, por exemplo, alinhá-lo, colocando-o à esquerda, à direita, centralizado ou

justificado. Podemos colocá-lo em negrito, em itálico, sublinhá-lo, além de alterar a cor, o tamanho e o tipo de fonte.

Podemos fazer ainda muitas outras coisas, como inserir texto sobrescrito, subscrito, monoespaçado, etc.

Alinhamento de texto

Com o atributo align, pode-se definir o alinhamento do texto dentro da página. Este atributo pode ser inserido na tag <p> (parágrafo) ou nas tags <h1> (cabeçalhos).

Eis os valores que podem ser atribuídos:

<h6>

left - alinhamento à esquerda (o padrão); right - alinhamento à direita; center - alinhamento ao centro; justify - faz com que as palavras sejam distribuídas dentro de cada linha do texto de forma a ocupar toda a largura da página, sendo que a última fica localizada na extremidade direita.

Apesar de funcionar, provavelmente você não verá muito sentido em aplicar o valor "justify" a um cabeçalho, porque este dificilmente terá uma quantidade de texto maior que uma linha.

terá uma quantidade de texto maior que uma linha. Vamos apresentar um exemplo onde aparecem alinhamentos

Vamos apresentar um exemplo onde aparecem alinhamentos de cabeçalhos e parágrafos. Não inserimos o atributo align nos casos de alinhamento à esquerda, já que este é o padrão.

<html> <head> <title>Exemplo 11</title> </head> <body> <h2>Cabeçalho alinhado a esquerda (padrão)</h2> <h3 align="center">Cabeçalho centralizado</h3> <h2 align="right">Cabeçalho alinhado à direita</h2> <p>parágrafo alinhado à esquerda (padrão)</p> <p align="center">parágrafo centralizado</p> <p align="right">parágrafo alinhado à direita</p> <p align="justify">Este parágrafo está justificado. Pode ser que este efeito só seja notado, se houver uma quantidade de texto que ocupe mais de uma linha. Faça a janela ficar pequena (redimensione-a).</p> </body> </html>

Alinhamento de texto dentro de uma divisão de página

Criamos uma divisão de página através da tag <div> e nela podemos inserir o atributo align. Assim, todos os elementos que estiverem dentro da divisão de página, ou seja, entre as tags <div> e </div>, terão o alinhamento definido e, obviamente, os que estiverem fora não o terão.

A vantagem de utilizar a divisão de página é a seguinte: suponha que você queira dar o mesmo alinhamento a dez elementos. Uma das formas seria especificar o atributo align dez vezes, mas é melhor colocar tudo entre as tags <div> e </div> e fazer a definição uma vez só.

Mesmo tendo sido definido um alinhamento dentro do bloco <div>, você pode ainda alinhar elementos específicos de forma diferente, abrindo exceções dentro do bloco. Mas depois que forem inseridos novamente elementos sem esse alinhamento particular, volta a funcionar o que foi estabelecido em <div>.

Eis um exemplo onde aparecem elementos dentro de uma divisão de página. <html> <head>

Eis um exemplo onde aparecem elementos dentro de uma divisão de página.

<html> <head> <title>Exemplo 12</title> </head> <body> <div align="right"> <h3>Este cabeçalho está alinhado à direita por causa da definição em div</h3> <p>Este parágrafo também.</p> <p align="left">Este parágrafo está à esquerda por causa de sua definição particular.</p> <p>Volta a definição feita em div</p> </div> </body> </html>

Texto em negrito, em itálico, sublinhado, monoespaçado, sobrescrito e subscrito

Esses efeitos são obtidos com a utilização das seguintes tags e seus respectivos fechamentos:

<b> - texto em negrito (bold); <i> - texto em itálico; <u> - texto sublinhado (underline); <tt> - texto com caracteres monoespaçados; <sup> - texto sobrescrito; <sub> - texto subscrito.

Além dessas, temos também <strong> que faz o mesmo efeito de <b> e <em> equivalente a <i>.

Podemos aplicar esses efeitos isoladamente ou de forma cumulativa, ou seja, um texto em itálico pode estar também em negrito, sublinhado, etc.

Textos com caracteres monoespaçados são semelhantes aos que eram escritos com as máquinas de escrever antigas e os textos sobrescritos e subscritos são especialmente úteis para fórmulas matemáticas ou matéria de conteúdo científico.

Definição da fonte

Podemos definir a fonte (tipo de letra), seu tamanho e sua cor com a utilização da tag <font> e de seus atributos face, size e color.

Com o atributo face aplicado à tag <font> definimos a fonte, como arial, verdana, etc. Assim:

<font face="arial">texto</font>

Na falta de definição, será exibida a fonte padrão que costuma ser Times New Roman, dependendo do browser. Pode ser também que o visitante da página não possua instalada em seu computador a fonte escolhida ao se criar a página e, neste caso também, o texto será exibido com a fonte padrão. Por isso é muito importante que nos preocupemos em escolher uma fonte mais comum.

Pode-se ainda dar mais alternativas para o browser, assim:

<font face="tahoma,arial,verdana">texto</font>

Por este exemplo, podemos perceber que é possível especificar mais de uma fonte, para que o navegador coloque a primeira, se encontrá-la, e se não encontrar, coloque

a segunda e assim por diante.

Tamanho da fonte

Com o atributo size aplicado à tag <font>, definimos o tamanho da fonte. Existem 7 tamanhos numerados de 1 a 7 por ordem crescente. Portanto, se especificarmos size="1", teremos o menor tamanho e, se especificarmos size="7", teremos o maior. Esses números não coincidem com os números que identificam o tamanho da fonte em seu processador de textos, como o Word, onde encontramos, por exemplo, tamanhos 10, 12, etc. Aqui é uma escala de 1 a 7 que vigora.

Vejamos um exemplo:

<font face="arial, verdana" size="2">texto</font>

Existe também outra maneira de especificar esse tamanho de fonte. Podemos modificar o tamanho definido anteriormente utilizando os sinais + e -. Assim:

<font face="arial, verdana" size="+1">

Neste caso, se o tamanho anterior era 2, passa a ser três. Ou seja, pode-se aumentar ou diminuir o tamanho, em vez de especificar outro.

Cor da fonte

Com o atributo color aplicado à tag <font>, definimos a cor do texto. Se essa definição não for feita (ou, se for feita, mas depois for fechada com </font>), o texto será apresentado na cor padrão que é o preto ou a na cor definida no atributo text da tag <body>.

Já vimos como especificar o valor correspondente a uma cor, quando tratamos de outros atributos que pedem essa especificação. No atributo color da tag <font> fazemos da mesma forma: podemos usar o nome da cor, o código hexadecimal no formato #rrggbb ou o código decimal no formato rgb(x,x,x). Neste último formato, x pode ser um número de 0 a 255 ou um percentual de 0% a 100%.

Então podemos fazer assim:

<font face="arial" size="2" color="green"> ou <font face="arial" size="2" color="#008000"> ou <font face="arial" size="2" color="rgb(0,128,0)"> ou <font face="arial" size="2" color="rgb(0%,50%,0%)">

Note que o símbolo # no início do código hexadecimal é obrigatório.

Voltamos a dizer que disponibilizamos neste site uma tabela de cores que você poderá usar.

Inserção de imagens

As imagens são armazenadas em arquivos que podemos criar utilizando editores gráficos ou podemos já tê-los prontos. Existem vários formatos de arquivos de imagens, ou seja, vários tipos. Os principais são: .jpeg (ou .jpg), .gif e .png.

Neste tutorial, vamos nos limitar a falar das imagens já prontas.

Para inserir uma imagem numa página HTML utilizamos a tag <img>. Essa tag é uma das que introduzem elementos vazios, ou seja, não possui conteúdo nem fechamento. Possui apenas atributos. Abaixo, apresentamos uma lista de seus principais atributos:

src Especifica o arquivo de imagem ou o caminho completo (path). Note que src vem de source (fonte).

alt

Especifica um texto que aparecerá dentro de uma área retangular que a imagem deverá ocupar, até que ela seja baixada. Note que alt vem de alternative (texto alternativo).

border Define que a imagem terá bordas, ou seja, será colocada dentro de um retângulo, e o valor atribuído em pixels estabelece a sua espessura. Se for definida como zero não terá bordas e, se não for definida, terá bordas com 1 pixel (padrão). width e height Definem a largura e a altura da imagem em pixels. Deve-se colocar exatamente as medidas que a imagem possui. hspace e vspace Definem as margens da imagem, em pixels. O atributo hspace define as margens à esquerda e à direita (sentido horizontal) e o vspace acima e abaixo (sentido vertical). Úteis para distanciar texto ou outro elemento da extremidade da imagem. align Define o alinhamento da imagem dentro da página e controla o fluxo do texto ao seu redor. Tal texto é o que é digitado imediatamente após a tag <img>.

Copyright © 2006 Abpsoft. Todos os direitos reservados.

|

Mapa do Site |

imediatamente após a tag <img>. Copyright © 2006 Abpsoft. Todos os direitos reservados. | Mapa do
imediatamente após a tag <img>. Copyright © 2006 Abpsoft. Todos os direitos reservados. | Mapa do