Sei sulla pagina 1di 16

Pgina Inicial Criao de Websites Noes de SQL Downloads Links teis Hora do Caf Entrar em Contato

Tutoriais HTML Bsico CSS Bsico JavaScript Bsico XML Bsico Guias de Referncia Elementos HTML Propriedades CSS Seletores CSS Tabela de Cores HTML/CSS Tabela de Caracteres Especiais Como especificar o path

HTML Bsico
Por Aires Bento Pereira Filho A pgina HTML As tags Os atributos das tags O uso de maisculas ou minsculas Bons hbitos de digitao rumo ao XHTML Comandos bsicos de uma pgina HTML Criando uma pgina HTML Ttulo do Documento Cabealhos Pargrafos e Quebras de linhas Listas Ordenadas e No Ordenadas Listas de Definies

A pgina HTML
Uma pgina 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 extenso .html ou .htm. Se voc abrir qualquer arquivo .html com um navegador (com o Internet Explorer, por exemplo), poder visualizar a pgina HTML e, se abrir o mesmo arquivo com o Bloco de Notas, poder visualizar e editar o cdigo-fonte da pgina. Voc poder tambm abrir o cdigo-fonte, a partir do Internet Explorer, quando estiver visualizando a pgina. Para fazer isso, acesse a barra de menus, selecione Exibir e d um clique em Cdigo 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 pgina HTML. Esses comandos so marcaes tambm chamadas de etiquetas (tags, em ingls).

As tags
As tags, que servem para definir os elementos da pgina, so iniciadas pelo smbolo "menor que" (<) e finalizadas pelo smbolo "maior que" (>). Em geral, uma tag aparece duas vezes, abrindo e fechando um contedo, mas a que fecha contm uma barra (/).

Se quisermos, por exemplo, inserir dois elementos (um cabealho e um pargrafo), fazemos assim: <h1>Isto um cabealho</h1> <p>Isto um pargrafo</p> Nem todas as tags necessitam funcionar em pares. Por exemplo, para os casos acima, o elemento pargrafo introduzido pela tag <p> no necessitaria da tag de fechamento </p>. O browser saberia que o pargrafo chegou ao fim, quando encontrasse qualquer outro elemento ou mesmo outro pargrafo. J para o elemento cabealho, tambm exemplificado, o fechamento no dispensvel. H tambm os elementos que no possuem tag de fechamento. So chamados de elementos vazios. Neste caso, a tag de fechamento no existe porque no h contedo a ser fechado. Um exemplo de uma tag que cria um elemento vazio a que introduz uma quebra de linha: <p>Aqui temos um pargrafo<br> que continua na linha seguinte.</p> Note, neste exemplo, que o contedo do elemento pargrafo tudo que est entre as tags <p> e </p>. J o elemento quebra de linha <br> no possui contedo. Os atributos das tags Uma tag pode conter um ou mais atributos que so colocados somente na de abertura, obedecendo ao formato: atributo="valor". O valor pode ser colocado entre aspas ou no. Veja o exemplo de uma tag, onde align o atributo: <p align="center">pargrafo 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 maisculas ou minsculas A liguagem HTML no diferencia letras maisculas e minsculas. Logo, tanto faz voc escrever, por exemplo, <FONT>, <font> ou at mesmo <FoNt>. Isso vale tambm para os atributos. Bons hbitos de digitao rumo ao XHTML O escopo do presente tutorial a linguagem HTML, mas vamos falar de antemo um pouco sobre XHTML. J tratamos de certas liberdades existentes no HTML, como digitar as tags e atributos em maisculas ou minsculas, colocar os valores dos atributos entre aspas ou no, alm da dispensa de algumas tags de fechamento. O XHTML que uma aplicao do XML mais rigoroso e nele no podemos contar com tais liberdades. Voc naturamente ir querer depois converter suas pginas para XHTML, j que esta uma nova gerao do HTML, ou seja, um avano. Ento, mesmo sabendo que no so uma exigncia da linguagem HTML, considere como bons hbitos: 1. Utilizar sempre as tags de fechamento; 2. Colocar sempre os valores dos atributos entre aspas; 3. Utilizar sempre letras minsculas nas tags e atributos.

Comandos bsicos de uma pgina HTML

<html> <head> <title> </title> </head> <body> </body> </html> As tags <html> e </html> marcam o incio e o final do documento HTML. Enfeixam duas subestruturas distintas: o cabealho do documento, delimitado por <head> e </head>, e o corpo do documento, entre <body> e </body>. O bloco cabealho do documento, marcado por <head> e </head>, traz informaes sobre o contedo da pgina e pode ser constitudo de vrios elementos, dentre os quais, temos o ttulo do documento, entre as tags <title> e </title>. O bloco marcado por <body> e </body> o corpo da pgina e contm as informaes que efetivamente sero exibidas pelo navegador. Nele, so inseridos elementos, tais como, cabealhos, pargrafos, listas, links, imagens e tabelas.

Criando uma pgina HTML


Para criar uma pgina HTML, a mais simples possvel, abra o Bloco de Notas (ou outro editor de texto ASCII) e siga os seguintes passos: 1. 2. 3. 4. Copie os comandos bsicos mencionados no tpico anterior; Entre as tags <title> e </title>, digite o ttulo do documento; Entre as tags <body> e </body>, insira um elemento qualquer. Salve o documento atribuindo ao arquivo um nome com a extenso .html ou .htm.

Observao: O nome do arquivo tem de ser todo em letras minsculas. que o Windows aceita letras maisculas para nomeao de arquivos, mas o Unix e o Linux no aceitam. Seguindo o pequeno roteiro acima, vamos escrever nossa primeira pgina HTML: <html> <head> <title>Exemplo 0 - Esta uma pgina simples</title> </head> <body> Este um texto que aparece no corpo desta pgina simples. </body> </html> O passo 3 do roteiro manda inserir um elemento qualquer entre <body> e </body>. Ns 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 pgina. Em HTML, isso realmente funciona, mas uma prtica que deve ser evitada. No XHTML, que mais rigoroso, isso no permitido. Melhor seria fazer assim: <p>Este um texto que aparece no corpo desta pgina simples.</p>

Observao: Doravante, na medida em que formos fazendo nossa explanao, estaremos inserindo exemplos que tero a forma de apresentao semelhante ao que foi visto acima. Sugerimos que voc, utilizando um editor de texto ASCII qualquer (o Bloco de Notas, por exemplo), copie o cdigo do exemplo, salve-o com a extenso .html ou .htm e depois abra-o com o seu browser para ver o resultado. Voc tambm poder visualizar o resultado desses exemplos dando um clique na imagem que aparece na introduo de cada um (um "olho").

Ttulo 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 pgina, na barra de ttulo do navegador. No podemos confundir esse ttulo com aqueles ttulos que so exibidos dentro da pgina.

Cabealhos
O texto de um cabealho deve ser especificado com a utilizao das tags a seguir. So seis nveis: de 1 (o maior tamanho) a 6 (o menor tamanho). <h1> e <h2> e <h3> e <h4> e <h5> e <h6> e </h1> </h2> </h3> </h4> </h5> </h6>

Observao: No podemos confundir esse cabealho, que uma espcie de ttulo dentro do corpo do documento, com o cabealho do documento que constitudo pelos elementos delimitados por <head> e </head>. Eis um exemplo de pgina, onde inserimos dois cabealhos. <html> <head> <title>Exemplo 1</title> </head> <body> <h1>Este um cabealho de nvel 1</h1> <h2>Este um cabealho de nvel 2</h2> </body> </html>

Pargrafos e Quebras de Linhas


A tag <p> utilizada para definir o incio de um novo pargrafo, deixando uma linha em branco. Ao digitar o texto, de nada adianta voc pressionar a tecla Enter para inserir um pargrafo. necessrio que se utilize a tag apropriada para que o navegador a interprete. Em HTML, a tag de fechamento </p> dispensvel, mas, como j dissemos, aconselhvel a sua utilizao. Apresentamos o cdigo de uma pgina que contm dois pargrafos. <html>

<head> <title>Exemplo 2</title> </head> <body> <h2>Texto com dois pargrafos</h2> <p>Queremos que este texto tenha dois pargrafos. Este o primeiro.</p> <p>Este o segundo pargrafo.</p> </body> </html> H muitas situaes em que precisamos mudar de linha sem deixar linha em branco. Para fazer isso, devemos aplicar uma quebra de linha atravs da tag <br>. No exemplo de cdigo 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 pargrafo para fazer isso, vai ocorrer a insero de uma linha em branco entre cada verso e no isso que desejamos. <html> <head> <title>Exemplo 3 </title> </head> <body> <h2>Uma quadrinha popular</h2> <p> Tanto limo, tanta lima,<br> Tanta silva, tanta amora,<br> Tanta menina bonita...<br> Meu pai sem ter uma nora! </p> </body> </html>

Listas Ordenadas e No Ordenadas


A linguagem HTML permite a criao de listas que podem ser ordenadas ou no ordenadas. As ordenadas (ordered lists) so criadas com as tags <ol> e </ol> e as no ordenadas (unordered lists) com <ul> e </ul>. Em ambas, utilizamos <li> e <li> para introduzir cada item. Esta ltima tag no necessitaria da tag de fechameto, mas a estamos utilizando, pelos motivos j expostos. Apresentamos um exemplo de lista ordenada: <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 no ordenada. <html> <head> <title>Exemplo 5</title> </head> <body> <h2>Uma lista no 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 so numerados e, nas no 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 especificao ser feita na tag <ol> ou <ul>, para que o tipo seja vlido em toda a lista, ou na tag <li>, para que seja vlido para determinado item. <ol type="marcador"> ou <ul type="marcador"> ou <li type="marcador"> Para as listas ordenadas, marcador pode ser: 1 - nmeros (default); a -letras minsculas; A - letras maisculas; i - nmeros romanos em minsculas; I - nmeros romanos em maisculas. Para as listas no ordenadas pode ser: disc (default), circle ou square. Agora apresentamos um exemplo com duas listas, uma ordenada e outra no ordenada. Utilizamos o atributo type em ambas para fazer com que a primeira tenha seus itens marcados com letras minsculas e a segunda com pequenos quadrados (square). <html>

<head> <title>Exemplo 5a</title> </head> <body> <h2>Uma lista ordenada e outra no 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 Definies
Alm das listas ordenadas e no ordenadas, vistas anteriormente, podemos criar tambm as chamadas listas de definies. Numa lista desse tipo, voc pode apresentar termos e abaixo de cada um a sua definio 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 definio entre <dd> e </dd>. Vejamos a disposio abaixo. <dl> <dt>termo a definir</dt> <dd>definio</dd> <dt>termo a definir</dt> <dd>definio</dd> </dl> Um exemplo de lista de definies: <html> <head> <title>Exemplo 6</title> </head> <body> <h2>Uma lista de definies</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 So Paulo.</dd> <dt>Ouro Preto</dt>

<dd>Patrimnio histrico 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 pgina HTML atravs das tags <a> e </a>. E, no atributo href, colocamos o seu destino. Eis as sintaxe geral de um link: <a href="destino">contedo</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 endereo de e-mail. contedo Pode ser um texto ou uma imagem e nele que o usurio d um clique para fazer o acesso. Vamos classificar os links, segundo o seu destino, assim: 1. 2. 3. 4. 5. Links Links Links Links Links com outras pginas do site; com outros sites; com pontos determinados no interior da pgina (esses pontos recebem marcas para serem localizados); com endereos de correio (para que o visitante possa enviar uma mensagem); com arquivos para downloads.

Links com outras pginas do site So links que estabelecem conexo entre as pginas do mesmo site. Vejamos a forma de fazer isso: <a href="arquivo.html">contedo</a> Onde arquivo.html o nome de um dos arquivos que compem o site e contedo o trecho de texto ou imagem onde o visitante ir clicar. Neste exemplo vamos apresentar uma pgina que contm um link que acessa a pgina 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 cabealhos. Lembra-se?</p> <p>Para rever o exemplo 1, <a href="exemplo1.html">clique aqui.</a></p> </body> </html> Se o arquivo de destino no estiver no mesmo diretrio em que est localizada a pgina que contm o link, no basta especificar apenas o seu nome como fizemos acima; ser necessrio 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 So links que se dirigem a pginas de outro site. Para fazer isso, basta colocar no atributo href da tag <a> o endereo da pgina, ou seja, a URL. <a href=http://www.sitexyz.com.br>sitexyz</a> necessrio que no endereo se coloque o protocolo de acesso seguido de duas barras, como http//, ftp// ou outros. mais comum que esses links tenham como destino a pgina principal do site, como no exemplo acima. Mas possvel linkar tambm outras pginas do site, conforme o exemplo abaixo. <a href=http://www.sitexyz.com.br/pagx.html>sitexyz</a> Links com pontos determinados no interior da pgina Quando uma pgina 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 localizao. Normalmente se faz isso na mesma pgina, mas perfeitamente possvel acessar outras pginas abrindo-as a partir desses pontos. Para estabelecer essa funcionalidade, necessrio criar uma marca de identificao para ser utilizada como destino do link. Vejamos como criada essa marca. <a name="marca"></a>. Onde marca um nome atribudo ao ponto a ser localizado dentro da pgina. Assim, um documento que contenha dois captulos poderia ter duas marcas colocadas nos pontos onde esses captulos iniciam: <a name="cap1">Captulo 1</a> [desenvolvimento do captulo 1] <a name="cap2">Captulo 2</a> [desenvolvimento do captulo 2] Colocadas essas marcas, pode-se ento inserir em algum lugar da pgina os links que iro atingi-las: <a href="#cap1">Captulo 1</a> <br> <a href="#cap2">Captulo 2</a> No se pode deixar de digitar o smbolo # (tralha). Este smbolo prprio dos links que se dirigem a pontos determinados, portanto no utilizado nos demais. Se voc desejar acessar determinado ponto dentro de outro documento, especifique o nome do arquivo seguido do smbolo # e do nome da marca: <a href="arq.html#cap2">Captulo 2</a> Links com endereos de correio Os links a endereos de correio so aqueles que permitem ao visitante remeter uma mensagem via correio eletrnico (e-mail). Vejamos como se faz isso. <a href="mailto:abc@gmail.com">abc@gmail.com</a> Notar que antes do endereo de e-mail colocamos a palavra mailto seguida de dois-pontos. A mensagem pode ser emitida com a indicao de "assunto". Fazemos isso colocando depois do endereo de e-mail, um ponto de interrogao (?), 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 tambm que a mensagem deve ser emitida com cpia para outro endereo de e-mail.

<a href="mailto:abc@gmail.com?subject=mensagem do visitante&cc=xyz@gmail.com">abc@gmail.com</a> O visitante da pgina necessitar ter uma conta de e-mail configurada em seu sistema. Se no tiver, esse sistema de contato no funcionar. Por isso, pode ser interessante especificar no contedo do link (o que h entre <a> e </a>) o endereo de e-mail. Assim o visitante poder copi-lo para remeter sua mensagem atravs de outro computador ou de um sistema de web-mail. Links com arquivos para downloads Este tipo de link permite que voc coloque disposio do visitante arquivos para serem baixados (downloads). O mecanismo o mesmo dos outros links, s que, em vez de dirigir-se a uma pgina 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 dilogo exibindo a seguinte mensagem: "Deseja abrir o arquivo ou salv-lo no computador?". importante que voc no disponibilize arquivos executveis, mas sim arquivos comprimidos, como o arquivo .zip. Isso porque o arquivo ocupar menos espao 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 contedo. Links cujos resultados so 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 no for especificado, a exibio ser feita na prpria janela onde est o link. Pode-se atribuir um dos seguintes valores: _blank - A exibio ser feita em uma nova janela. _self - A exibio ser feita na prpria janela onde est o link (padro). _parent - A exibio ser feita na janela que contm o frame onde est o link. _top - A exibio ser feita na janela que ocupa posio mais alta na hierarquia, quando h frames. Observao: Sobre frames estaremos falando mais adiante.

Atributos do corpo da pgina


Alguns atributos podem ser especificados na tag <body> para definir a forma de apresentao da pgina HTML. Voc pode estabelecer uma cor de fundo para a pgina ou uma imagem de fundo. Pode estabelecer a cor do texto (cor dos caracteres) e tambm a cor dos links. bgcolor Define uma cor de fundo para a pgina. background Define uma imagem como fundo de pgina. text Define a cor do texto para todo o corpo da pgina. link, vlink e alink Definem as cores dos links: no vistado, visitado e ativo, respectivamente.

Cor de fundo da pgina e cor do texto Para definirmos a cor de fundo da pgina 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 cdigo hexadecimal no formato #rrggbb ou o seu cdigo decimal no formato rgb (x,x,x). Neste ltimo formato, x pode ser um nmero de 0 a 255 ou um percentual de 0% a 100%. Ento, se voc quiser colocar, por exemplo, um fundo azul em sua pgina, 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 smbolo # no incio do cdigo hexadecimal obrigatrio. Disponibilizamos neste site uma tabela de cores que voc poder usar. Vejamos um exemplo de pgina que tem o fundo verde e o texto branco. Neste exemplo optamos por usar nomes de cores, tanto em 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 pgina, definimos o fundo verde (green) e o texto branco (white).</p> <p>Observe que tais definies 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 tambm com a definio 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 hiptese, o texto preto (padro) num fundo tambm preto ficaria invisvel. Imagem como fundo de pgina Utilizando o atributo background, podemos colocar uma imagem como fundo de pgina. 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 pgina numa formao tipo mosaico. Vamos ver agora um exemplo de pgina que tem como fundo uma imagem. Neste exemplo, partimos do pressuposto de que o arquivo de imagem est no mesmo diretrio onde se encontra a pgina. <html> <head> <title>Exemplo 9</title> </head>

<body background="fundo2.gif"> <h3>Exemplo de fundo de pgina com imagem</h3> <p>Nesta pgina, colocamos uma imagem como fundo. No fizemos nenhuma definio para a cor do texto, uma vez que a cor padro (preto) satisfaz.</p> <p>Observe que o fundo foi definido em background, atributo da tag body.</p> </body> </html> Se o arquivo de imagem no estiver no mesmo diretrio, ser necessrio 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 tambm da necessidade de contrastar a cor do texto. claro que esse mesmo cuidado tambm tem de existir quando o fundo uma imagem. Mas neste caso temos ainda de ter uma segunda preocupao. Mesmo tendo colocado uma imagem de fundo, devemos tambm colocar uma cor de fundo igual ou semelhante cor da imagem (com o atributo bgcolor). Isso porque, se por algum motivo o browser no carregar a imagem, o contraste estabelecido para o texto estar preservado. Vamos a um exemplo de pgina 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 pgina com imagem escura.</h3> <p>Nesta pgina, 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 pgina, em todos os seus estados. link - Define a cor dos links que no 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 definio da cor de fundo da pgina e da cor do texto, dissemos que o valor da cor pode ser especificado pelo nome ou pelo cdigo. Ao atribuirmos valor aos atributos referentes cor dos links, fazemos da mesma forma. Assim, poderamos 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%)">

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

justificado. Podemos coloc-lo em negrito, em itlico, sublinh-lo, alm de alterar a cor, o tamanho e o tipo de fonte. Podemos fazer ainda muitas outras coisas, como inserir texto sobrescrito, subscrito, monoespaado, etc. Alinhamento de texto Com o atributo align, pode-se definir o alinhamento do texto dentro da pgina. Este atributo pode ser inserido na tag <p> (pargrafo) ou nas tags <h1> ... <h6> (cabealhos). Eis os valores que podem ser atribudos: left - alinhamento esquerda (o padro); right - alinhamento direita; center - alinhamento ao centro; justify - faz com que as palavras sejam distribudas dentro de cada linha do texto de forma a ocupar toda a largura da pgina, sendo que a ltima fica localizada na extremidade direita. Apesar de funcionar, provavelmente voc no ver muito sentido em aplicar o valor "justify" a um cabealho, porque este dificilmente ter uma quantidade de texto maior que uma linha. Vamos apresentar um exemplo onde aparecem alinhamentos de cabealhos e pargrafos. No inserimos o atributo align nos casos de alinhamento esquerda, j que este o padro. <html> <head> <title>Exemplo 11</title> </head> <body> <h2>Cabealho alinhado a esquerda (padro)</h2> <h3 align="center">Cabealho centralizado</h3> <h2 align="right">Cabealho alinhado direita</h2> <p>pargrafo alinhado esquerda (padro)</p> <p align="center">pargrafo centralizado</p> <p align="right">pargrafo alinhado direita</p> <p align="justify">Este pargrafo est justificado. Pode ser que este efeito s seja notado, se houver uma quantidade de texto que ocupe mais de uma linha. Faa a janela ficar pequena (redimensione-a).</p> </body> </html> Alinhamento de texto dentro de uma diviso de pgina Criamos uma diviso de pgina atravs da tag <div> e nela podemos inserir o atributo align. Assim, todos os elementos que estiverem dentro da diviso de pgina, ou seja, entre as tags <div> e </div>, tero o alinhamento definido e, obviamente, os que estiverem fora no o tero. A vantagem de utilizar a diviso de pgina 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 definio uma vez s. Mesmo tendo sido definido um alinhamento dentro do bloco <div>, voc pode ainda alinhar elementos especficos de forma diferente, abrindo excees 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 diviso de pgina. <html> <head> <title>Exemplo 12</title> </head> <body> <div align="right"> <h3>Este cabealho est alinhado direita por causa da definio em div</h3> <p>Este pargrafo tambm.</p> <p align="left">Este pargrafo est esquerda por causa de sua definio particular.</p> <p>Volta a definio feita em div</p> </div> </body> </html> Texto em negrito, em itlico, sublinhado, monoespaado, sobrescrito e subscrito Esses efeitos so obtidos com a utilizao das seguintes tags e seus respectivos fechamentos: <b> - texto em negrito (bold); <i> - texto em itlico; <u> - texto sublinhado (underline); <tt> - texto com caracteres monoespaados; <sup> - texto sobrescrito; <sub> - texto subscrito. Alm dessas, temos tambm <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 itlico pode estar tambm em negrito, sublinhado, etc. Textos com caracteres monoespaados so semelhantes aos que eram escritos com as mquinas de escrever antigas e os textos sobrescritos e subscritos so especialmente teis para frmulas matemticas ou matria de contedo cientfico. Definio da fonte Podemos definir a fonte (tipo de letra), seu tamanho e sua cor com a utilizao 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 definio, ser exibida a fonte padro que costuma ser Times New Roman, dependendo do browser. Pode ser tambm que o visitante da pgina no possua instalada em seu computador a fonte escolhida ao se criar a pgina e, neste caso tambm, o texto ser exibido com a fonte padro. 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 possvel especificar mais de uma fonte, para que o navegador coloque a primeira, se encontr-la, e se no 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 nmeros no coincidem com os nmeros 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 tambm 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 trs. 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 definio no for feita (ou, se for feita, mas depois for fechada com </font>), o texto ser apresentado na cor padro 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 especificao. No atributo color da tag <font> fazemos da mesma forma: podemos usar o nome da cor, o cdigo hexadecimal no formato #rrggbb ou o cdigo decimal no formato rgb(x,x,x). Neste ltimo formato, x pode ser um nmero de 0 a 255 ou um percentual de 0% a 100%. Ento podemos fazer assim: <font <font <font <font face="arial" size="2" face="arial" size="2" face="arial" size="2" face="arial" size="2" color="green"> ou color="#008000"> ou color="rgb(0,128,0)"> ou color="rgb(0%,50%,0%)">

Note que o smbolo # no incio do cdigo hexadecimal obrigatrio. Voltamos a dizer que disponibilizamos neste site uma tabela de cores que voc poder usar.

Insero de imagens
As imagens so armazenadas em arquivos que podemos criar utilizando editores grficos ou podemos j t-los prontos. Existem vrios formatos de arquivos de imagens, ou seja, vrios tipos. Os principais so: .jpeg (ou .jpg), .gif e .png. Neste tutorial, vamos nos limitar a falar das imagens j prontas. Para inserir uma imagem numa pgina HTML utilizamos a tag <img>. Essa tag uma das que introduzem elementos vazios, ou seja, no possui contedo 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 retngulo, e o valor atribudo em pixels estabelece a sua espessura. Se for definida como zero no ter bordas e, se no for definida, ter bordas com 1 pixel (padro). 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 pgina e controla o fluxo do texto ao seu redor. Tal texto o que digitado imediatamente aps a tag <img>.
Copy r ight 2006 Abpsof t. Todos os dir eitos reservados. | Mapa do Si te |

Potrebbero piacerti anche