Scribd Logo
Hochladen

Willkommen bei Scribd!

  • Elementos HTML

    Hochgeladen von

    Heleno Santos
    16 Ansichten27 Seiten

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Verfügbare Formate

    PDF, TXT oder online auf Scribd lesen

    Stufen Sie dieses Dokument als nützlich ein?

    Sind diese Inhalte unangemessen?

    Dieses Dokument melden

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Als PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    16 Ansichten27 Seiten

    Elementos HTML

    Hochgeladen von

    Heleno Santos

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Als PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    von 27

    Elementos HTML - Guia de Referncia

    Este Guia de Referncia apresenta em primeiro plano uma tabela onde esto relacionadas as tags HTML e seus respectivos atributos. Nas duas primeiras colunas da tabela, aparecem as tags de abertura e de fechamento e, a terceira, a descrio da finalidade de cada uma. Na ltima coluna aparecem os atributos com seus possveis valores. E eis o que mais importante: um clique no atributo leva voc a um esclarecimento a respeito dele com riqueza de detalhes. As tags e atributos esto sinalizados com vermelho ou verde. O sinal vermelho indica desaprovao pelo W3C e o verde indica que no h desaprovao. 1 - DOCUMENTO Fechamento Finalidade Abertura e fechamento do </html> documento HTML. Abertura e fechamento do </head> cabealho do documento Abertura e fechamento do </title> ttulo do documento

    Abertura <html>

    Atributos

    <head> <title>

    <body>

    </body>

    Abertura e fechamento do corpo do documento

    bgcolor=nomecor | #rrggbb | rgb(x,x,x) background=nomearquivo text=nomecor | #rrggbb | rgb(x,x,x) link=nomecor | #rrggbb | rgb(x,x,x) vlink=nomecor | #rrggbb | rgb(x,x,x) alink=nomecor | #rrggbb | rgb(x,x,x)

    <!--

    -->

    Abertura e fechamento de comentrios Atributos

    Abertura

    <h1>...<h6>

    2 - TEXTO Fechamento Finalidade Abertura e fechamento de um cabealho. So 6 nveis: </h1>...</h6> h1 (o maior) at h6 (o menor). </p> Dispensvel No h Inicia um pargrafo pulando uma linha. Vai para outra linha sem pular nenhuma.

    align=left | center | right

    <p> <br>

    align=left | center | right | justifiy clear=left | right | all

    <b> <i> <tt> <sup> <sub>

    </b> </i> </tt> </sup> </sub>

    Coloca o texto em negrito Coloca o texto em itlico Coloca o texto em fonte monoespaada Coloca o texto sobrescrito Coloca o texto subscrito

    <font>

    </font>

    Estabelece o tipo de fonte, o tamanho e a cor.

    face="nomefonte, nomefonte" size=+x | -x | x color=nomecor | #rrggbb | rgb(x,x,x) align=left | center | right size=x width=x | x% noshade

    <hr>

    No h

    Cria uma linha divisria horizontal. Abertura e fechamento de uma diviso de pgina cujos elementos que esto dentro dela obedecero s mesmas definies. 3 - LISTAS Finalidade Abertura e fechamento de uma lista ordenada. Abertura e fechamento de uma lista no ordenada. Inicia um item de lista ordenada ou no ordenada. Abertura e fechamento de uma lista de definies. Inicia o termo a ser definido. Inicia a definio do termo. 4 - LINKS Finalidade

    <div>

    </div>

    align=left | center | right

    Abertura

    Fechamento </ol> </ul> </li> Dispensvel </dl> </dt> Dispensvel <dd> Dispensvel Fechamento

    <ol> <ul> <li> <dl> <dt> <dd>

    Atributos type=1 | A | a | I | i start=x type=disc | circle | square type=1 | A | a | I | i | disc | circle | square

    Abertura

    Atributos

    <a>

    </a>

    Estabelece um texto ou imagem como link. 5 - IMAGENS Finalidade

    href=arquivodestino name=nomealvo target=_blank | _self | _parent | _top

    Abertura

    Fechamento

    <img>

    No h

    Insero de imagem

    Atributos src=nomearquivo lowsrc=nomearquivo align=bottom | left | right | top | middle width=x height=x alt=texto border=x hspace=x vspace=x usemap=nomemapa

    Abertura

    <map>

    6 - MAPAS DE IMAGENS Fechamento Finalidade Abertura e fechamento de </map> um mapa de imagens processado no cliente. Define uma rea clicvel que funcionar como link dentro do mapa de imagens. 7 - TABELAS Finalidade

    Atributos

    name=nomemapa shape=rect | circle | poly coords=x,y,x,y href=arquivodestino alt=texto

    <area>

    No h

    Abertura

    Fechamento

    <table>

    </table>

    Abertura e fechamento de uma tabela.

    Atributos width=x height=x align=left | center | right cellspacing=x cellpadding=x border=x bordercolor=nomecor | #rrggbb | rgb(x,x,x) bgcolor=nomecor | #rrggbb | rgb(x,x,x) background=nomearquivo align=left | center | right valign=top | middle | bottom height=x bgcolor=nomecor | #rrggbb |

    <tr>

    </tr>

    Abertura e fechamento de uma linha da tabela.

    rgb(x,x,x)

    <td>

    </td>

    Abertura e fechamento de uma clula dentro de uma linha da tabela.

    align=left | center | right valign=top | middle | bottom width=x height=x colspan=x rowspan=x bgcolor=nomecor | #rrggbb | rgb(x,x,x)

    <th>

    </th>

    Abertura e fechamento de uma clula dentro de uma linha da tabela. Funciona como <td>, mas o texto que Os mesmos atributos de <td> contm aparece em negrito e centralizado (uma espcie de cabealho ou ttulo).

    Esclarecimentos detalhados sobre os atributos das tags

    bgcolor Como atributo de <body>


    Define uma cor de fundo para a pgina. Pode-se 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%. Exemplos: <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. Observaes: 1. Muitas vezes voc no poder utilizar o nome das cores, porque poucas tm um nome reconhecido pelo navegador. recomendvel que se utilize sempre o cdigo hexadecimal. 2. Ao escolhermos uma cor de fundo, devemos nos preocupar 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

    bgcolor Como atributo de <table>, <tr> , <td> ou <th>


    Define uma cor de fundo de uma tabela, linha ou clula. Pode-se 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%. Quando uma cor de fundo definida para a pgina na tag <body>, a tabela tambm ser abrangida, mas mesmo assim voc poder definir outra cor para a tabela, o que ir distingi-la. Isso pode ser feito tambm para uma ou mais linhas e/ou clulas. Exemplos: <table bgcolor="yellow"> <table bgcolor="FF9900"> <tr bgcolor="#008000"> <tr bgcolor="rgb(204,102,0)"> <td bgcolor="#CD5C5C"> <td bgcolor="rgb(80%,20%,60%)"> Note que o smbolo # no incio do cdigo hexadecimal obrigatrio. Disponibilizamos neste site uma tabela de cores que voc poder usar. Observaes: 1. Muitas vezes voc no poder utilizar o nome das cores, poucas tm um nome reconhecido pelo navegador. recomendvel que se utilize sempre o cdigo hexadecimal. 2. Ao escolhermos uma cor de fundo, devemos nos preocupar 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

    background Como atributo de <body>


    Define uma imagem como fundo de uma pgina. Supondo a existncia de um arquivo de imagem com o nome "imagem.gif" no mesmo diretrio onde se encontra a pgina, podemos fazer o seguinte: <body background="imagem.gif">.

    Se o arquivo de imagem no estiver no mesmo diretrio, ser necessrio especificar o caminho e, para fazer isso adequadamente, leia como especificar o caminho de acesso a arquivos (path). Observaes: 1. Muitas vezes voc no poder utilizar o nome das cores, poucas tm um nome reconhecido pelo navegador. recomendvel que se utilize sempre o cdigo hexadecimal. 2. Ao escolhermos uma imagem como fundo, devemos considerar a sua cor e nos preocupar 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, uma imagem de cor clara exige uma cor escura para o texto, j um fundo de cor escura exige uma cor clara 3. Mesmo tendo colocado uma imagem de fundo, devemos tambm colocar uma cor de fundo igual ou semelhante cor da imagem (com o atributo bgcolor). Dessa maneira, mesmo que o navegador no carregue a imagem por algum motivo, o contraste estabelecido para o texto estar preservado. Assim, para que tal problema no ocorra, podemos estabelecer o seguinte: <body bgcolor="black" background="imagem.gif">. Mas claro que essa preocupao ser desnecessria, caso o texto tenha uma cor que possa apresentar-se ntida num fundo branco.

    background Como atributo de <table>


    Define uma imagem como fundo de uma tabela. Supondo a existncia de um arquivo de imagem com o nome "imagem.gif" no mesmo diretrio onde se encontra a pgina, podemos fazer o seguinte: <table background="imagem.gif">. Se o arquivo de imagem no estiver no mesmo diretrio, ser necessrio especificar o caminho e, para fazer isso adequadamente, leia como especificar o caminho de acesso a arquivos (path). Observaes: 1. Muitas vezes voc no poder utilizar o nome das cores, poucas tm um nome reconhecido pelo navegador. recomendvel que se utilize sempre o cdigo hexadecimal. 2. Ao escolhermos uma imagem como fundo, devemos considerar a sua cor e nos preocupar 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, uma imagem de cor clara exige uma cor escura para o texto, j um fundo de cor escura exige uma cor clara 3. Mesmo tendo colocado uma imagem de fundo, devemos tambm colocar uma cor de fundo igual ou semelhante cor da imagem (com o atributo bgcolor). Dessa maneira, mesmo que o navegador no carregue a imagem por algum motivo, o contraste estabelecido para o texto estar preservado. Assim, para que tal problema no ocorra, podemos estabelecer o seguinte: <table

    bgcolor="black" background="imagem.gif">. Mas claro que essa preocupao ser desnecessria, caso o texto tenha uma cor que possa apresentar-se ntida num fundo branco.

    text Como atributo de <body>.


    Define a cor do texto para todo o corpo da pgina, ou seja, para tudo que est entre as tags <body> e </body>, sendo que o padro black (preto). Pode-se 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%. Exemplos: <body text="blue"> <body text="#00FF00"> <body text="rgb(0,0,102)"> <body text="rgb(0%,0%,50%)"> Note que o smbolo # no incio do cdigo hexadecimal obrigatrio. Disponibilizamos neste site uma tabela de cores que voc poder usar. Se voc quer que o texto da pgina, do incio ao fim, tenha determinada cor, ento defina esse atributo. Mas, no decorrer do texto voc pode mudar a cor de segmentos da pgina, utilizando a tag <font> com o seu atributo color. Mas, depois que for aplicada a tag de fechamento </font>, o texto volta cor estabelecida no atributo text de <body>. Veja o exemplo abaixo: <body text="green"> <p>Este pargrafo verde, porque essa cor foi estabelecida como atributo de body.</p> <p><font color="blue">Estas palavras so azuis,</font> mas estas voltam a ser verdes.</p> </body> Observaes: 1. Muitas vezes voc no poder utilizar o nome das cores, porque poucas tm um nome reconhecido pelo navegador. recomendvel que se utilize sempre o cdigo hexadecimal. 2. Ao definirmos uma cor para o texto, devemos considerar a cor que foi escolhida como fundo, 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.

    link, vlink e alink Atributos de <body>.


    So trs atributos que definem as cores dos links, j que estes devem diferenciar-se do restante do texto, para que o visitante da pgina possa identific-los com facilidade.Tais definies valem para todos os links que aparecem dentro do corpo da pgina, ou seja, entre as tags <body> e </body>. Veja o que definido em cada um dos atributos: 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. Pode-se 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%. Existe uma cor padro para cada um dos trs casos, para quando no se faz a definio. Exemplos: <body link="blue" vlink="green" alink="yellow"> <body link="#0000FF" vlink="#FF00FF" alink="#00FF00"> <body link="rgb(0,0,255)" vlink="rgb(255,0,255)" alink="rgb(0,255,0)"> <body link="rgb(0%,0%,100%)" vlink="rgb(100%,0%,100%)" alink="rgb(0%,100%,0%)"> Note que o smbolo # no incio do cdigo hexadecimal obrigatrio. Disponibilizamos neste site uma tabela de cores que voc poder usar. Observaes: 1. Muitas vezes voc no poder utilizar o nome das cores, porque poucas tm um nome reconhecido pelo navegador. recomendvel que se utilize sempre o cdigo hexadecimal. 2. Ao definirmos uma cor para o texto, devemos considerar a cor que foi escolhida como fundo, 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.

    align Como atributo de <p>


    Define o alinhamento do pargrafo dentro da pgina. O funcionamento igual ao alinhamento que feito num processador de textos, como o Word. Os valores que podem ser atribudos so os seguintes: 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. Exemplo: <p align="right">.

    Como atributo de <h1>... <h6>


    Da mesma forma que voc define o alinhamento de um pargrafo, voc poder definir o alinhamento de um cabealho. Os valores "center" e "right" so utilizados com muita freqencia, alm de "left" que o padro. Apesar de funcionar, provavelmente voc no ver muito sentido em aplicar o valor "justify" a um cabealho. Exemplo: <h4 align="center">.

    Como atributo de <hr>


    Com esse atributo voc pode tambm definir o alinhamento de uma linha horizontal. claro que neste caso voc dever tambm definir uma extenso com o atributo size. Isso porque o padro da extenso da linha de 100% e, sendo assim, no surtir nenhum efeito um alinhamento como right ou center, j que a largura da pgina estar integralmente ocupada. Eis um exemplo: <hr size="40%" align="center">

    Como atributo de <div>


    Outra aplicao desse atributo na diviso de pgina criada pela tag <div>. O objetivo dessa tag o de estabelecer uma nica formatao para todo o bloco englobado por ela. Voc define o alinhamento de todos os elementos que esto dentro do bloco por atacado. Suponha que voc queira dar o mesmo alinhamento para dez pargrafos. Uma das formas seria especificar o atributo align nas dez tags <p>. Mas melhor colocar tudo entre as tags <div> e </div> e fazer a definio uma vez s. Quanto aos valores atribudos, eles so os mesmos que vimos para o alinhamento de pargrafo. Mesmo tendo sido definido um alinhamento dentro do bloco <div>, voc pode ainda alinhar pargrafos especficos de forma diferente, abrindo excees dentro do bloco. Mas depois que for novamente aplicada a tag <p> sem esse alinhamento particular, volta a funcionar o que foi estabelecido em <div>. Veja como funciona: <div align="right"> <p>Este pargrafo est alinhado direita por causa da definio em div <p>Este tambm. <p align="left">Este est esquerda. <p>Volta a definio feita em div </div>

    align Como atributo de <img>


    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>. Descrevemos abaixo como isso funciona com cada um dos valores que podemos atribuir.

    bottom - A imagem coloca-se esquerda do texto. O texto tem seu incio na linha nivelada com o canto inferior direito da imagem. Este o padro, portanto no precisa ser especificado. Exemplo: <img src="imagem.gif">texto.

    left - A imagem coloca-se esquerda da pgina. O texto tem seu incio na linha nivelada com o canto superior direito da imagem, contornando-a. Exemplo: <img src="imagem.gif" align="left">texto.

    right - A imagem coloca-se direita da pgina. O texto tem seu incio na linha nivelada com o canto superior esquerdo da imagem, contornando-a. Exemplo: <img src="imagem.gif" align="right">texto.

    top - A imagem coloca-se esquerda do texto. O texto tem seu incio na linha nivelada com o canto superior direito da imagem. Apenas uma linha fica ao lado da imagem, sendo que o resto do texto passa a fluir por baixo a partir da margem esquerda da pgina. de se notar que esse tipo de alinhamento mais til com pouco texto. Exemplo: <img src="img.gif" align="top">texto.

    middle - A imagem coloca-se esquerda do texto. O texto tem seu incio na linha nivelada com o ponto central da imagem (sentido vertical). Apenas uma linha fica ao lado da imagem, sendo que o resto do texto passa a fluir por baixo a partir da margem esquerda da pgina. Como em top, esse alinhamento tambm mais til com pouco texto. Exemplo: <img src="imagem.gif" align="middle">texto. O alinhamento de uma imagem dentro da pgina pode ser feito tambm utilizando o atributo align na tag <p> ou <div>, mas a definio em <img>, se for left ou right, ir prevalecer. J os valores bottom, middle e top apenas controlam o fluxo do texto e, com eles, o alinhamento da imagem obedece ao que foi definido em <p> ou <div>, sendo que o padro left. Podemos esclarecer isso melhor atravs de alguns exemplos, onde fizemos a combinao do alinhamento definido em <p> com o alinhamento definido em <img>. <p align="right"><img src="imagem.gif" align="middle">pouco texto</p> <p align="right"><img src="imagem.gif" align="top">pouco texto</p> <p align="center"><img src="imagem.gif" align="middle">pouco texto</p>

    <p align="center"><img src="imagem.gif" align="top">pouco texto</p> Observao: Voc pode interromper o fluxo do texto ao lado da imagem, fazendo-o passar para a parte de baixo antecipadamente, com a utilizao do atributo clear na tag <br>.

    face Como atributo de <font>


    Define a fonte do texto, como arial, verdana, etc. O padro costuma ser Times New Roman, dependendo do navegador. Voc deve preocupar-se em colocar uma fonte mais comum, porque pode ser que o visitante no tenha a que voc escolheu instalada em seu computador. Caso ocorra isso, o texto ser exibido com a padro. Exemplos: <font face="arial"> <font face="Comic Sans MS,arial,verdana"> Pelo segundo exemplo, voc percebe que pode especificar mais de uma fonte, para que o navegador escolha a primeira, se encontr-la, e se no encontrar, coloque a segunda e assim por diante. Neste caso voc no pode deixar de colocar o valor do atributo entre aspas que em alguns casos so opcionais. Quando um atributo possui espaos em seu interior as aspas passam a ser necessrias. No caso exemplificado, no fossem colocadas as aspas, o navegador entenderia que o nome da primeira fonte apenas Comic. Note que tem de ser apenas um par de aspas, englobando todos os nomes. Observao: Quando voc coloca a tag <font> com os atributos face, size e color em qualquer ponto do documento, a partir da todo o texto ter essa fonte at encontrar o fechamento </font>, exceto o contedo das tabelas. O texto antes e depois de uma tabela ter a fonte que voc definiu, mas o texto dentro de suas clulas ter a fonte padro. Ento, preciso definir a fonte dentro de cada clula, ou seja, utilizar as tags <font> e </font> entre <td> e </td>.

    size Como atributo de <font>


    Define o tamanho da fonte do texto. 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. Voc notar que 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.

    Exemplo: <font size="2">. Existe tambm outra maneira de especificar esse tamanho de fonte. Podemos modificar o tamanho definido anteriormente utilizando os sinais + e -. Eis um exemplo: <font size="=+1"> No caso deste ltimo exemplo, se o tamanho anterior era 2, passa a ser trs. Ou seja, voc pode aumentar ou diminuir o tamanho, em vez de especificar outro. Observao: Quando voc coloca a tag <font> com os atributos face, size e color em qualquer ponto do documento, a partir da todo o texto ter essa fonte at encontrar o fechamento </font>, exceto o contedo das tabelas. O texto antes e depois de uma tabela ter a fonte que voc definiu, mas o texto dentro de suas clulas ter a fonte padro. Ento, preciso definir a fonte dentro de cada clula, ou seja, utilizar as tags <font> e </font> entre <td> e </td>.

    size Como atributo de <hr>


    Define a espessura da linha horizontal criada. Pode ser um nmero de 1 a 100. Especificando um nmero maior que 100, ser entendido como 100. Exemplos: <hr size="5"> <hr size="10">

    color Como atributo de <font>


    Define a cor da fonte do texto. Pode-se 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%. Exemplos: <font face="arial" size="2" color="green"> <font face="arial" size="2" color="#00FF00"> <font face="arial" size="2" color="rgb(0,255,0)"> <font face="arial" size="2" color="rgb(0%,100%,0%)"> Note que o smbolo # no incio do cdigo hexadecimal obrigatrio.

    Observaes: 1. Muitas vezes voc no poder utilizar o nome das cores, porque poucas tm um nome reconhecido pelo navegador. recomendvel que se utilize sempre o cdigo hexadecimal. 2. Se a definio da cor no for feita em <font> (ou, se feita, mas depois fechada com </font>), o texto ser apresentado na cor padro que o preto (black ou #000000) ou a definida no atributo text de <body>. 3. Ao definirmos uma cor para o texto, devemos considerar a cor que foi escolhida como fundo, 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. 4. Quando voc coloca a tag <font> com os atributos face, size e color em qualquer ponto do documento, a partir da todo o texto ter essa fonte at encontrar o fechamento </font>, exceto o contedo das tabelas. O texto antes e depois de uma tabela ter a fonte que voc definiu, mas o texto dentro de suas clulas ter a fonte padro. Ento, preciso definir a fonte dentro de cada clula, ou seja, utilizar as tags <font> e </font> entre <td> e </td>.

    width Como atributo de <hr>


    Define a extenso da linha horizontal criada. O padro a linha atingir toda a largura da pgina. Deve ser especificado em quantidade de pixels ou em percentual. Veja os exemplos: <hr width="200"> - A linha ter 200 pixels de extenso. <hr width="50%"> - A linha ter uma extenso igual metade da largura da pgina.

    width e height Como atributos de <img>


    Definem a largura e altura da imagem em pixels. Deve-se colocar exatamente as medidas que a imagem possui. Obtm-se esses valores atravs da utilizao de um designer grfico ou exibindo a imagem no prprio navegador e, com um clique com o boto direito do mouse sobre ela, l-se suas propriedades. Exemplo: <img src="imagem.gif width="80" height="60"> Pode-se inserir uma imagem sem definir esses dois atributos, mas isso no recomendvel. Vejamos por que: fazendo tal definio, o navegador, durante o processamento, j reserva o espao necessrio para o carregamento da imagem. Assim o visitante poder ler o texto que se apresenta, antes da imagem ser baixada. possvel reduzir ou aumentar o tamanho da imagem atravs desses atributos, mas isso tambm no conveniente, porque a imagem apresenta-se distorcida, alm de que, quando fazemos reduao, estamos utilizando um arquivo de imagem maior do que o necessrio.

    noshade Como atributo de <hr>


    A linha horizontal sem esse atributo desenhada com uma sombra que lhe d um efeito de trs dimenses. Com esse atributo a linha fica sem essa sombra, ou seja, perde o efeito de trs dimenses. Exemplo: <hr noshade>

    clear Como atributo de <br>


    Utilizado para interromper o fluxo de texto ao lado de uma imagem ou tabela. Quando <img> ou <table> contm o atributo align definido como left ou right, o texto inicia-se ao lado da imagem ou da tabela e vai contornando-a. Ento, <br> com o atributo clear faz com que esse fluxo lateral seja interrompido.O texto jogado para a prxima margem livre. So os seguintes os valores que podem ser atribudos: left - pula e atinge a margem livre aps a imagem ou tabela alinhada esquerda. right - pula e atinge a margem livre aps a imagem ou tabela alinhada direita. all - pula e atinge as duas margens livres (esquerda e direita). Exemplo: <img src="imagem.gif" align="right">texto<br clear=all>texto Observao: Usa-se all com mais freqencia porque h situaes em que, com sua utilizao, pode-se obter o mesmo que obteramos com left ou right. Mas left e right tm especial importncia quando temos uma imagem ou tabela esquerda e outra direita, e uma delas menor na altura. Neste caso, voc pode querer que o efeito seja interrompido apenas em relao imagem menor, mas que continue em relao maior.

    type Como atributo de <ol>


    As listas ordenadas tm, por padro, os seus itens numerados com algarismos arbicos. Voc poder mudar o tipo de marcador para letras, minsculas ou maisculas, ou para algarismos romanos, minsculos ou maisculos. Para fazer isso basta definir o atributo type com um dos seguintes valores: 1 - seqncia numrica (algarismos arbicos) - o padro. a - letras minsculas. A - letras maisculas. i - seqncia numrica (algarismos romanos minsculos). I - seqncia numrica (algarismos romanos maisculos). Exemplo: <ol type="A">

    Como atributo de <ul>

    As listas no ordenadas tambm possuem um tipo de marcador. O padro um pequeno crculo cheio. Para mudar o tipo de marcador nas listas no ordenadas, atribua um dos seguintes valores ao atributo type: disc - pequeno crculo cheio(o padro); circle - pequeno crculo vazio; square - pequeno quadrado cheio. Exemplo: <ul type=circle>

    Como atributo de <li>


    Quando utilizamos o atributo type em <ol> ou <ul>, estamos definindo o tipo de marcador para toda a lista. Entretanto, voc pode definir um tipo de marcador diferente para um item especfico de uma lista, usando o mesmo atributo na tag <li>. Se o item pertencer a uma lista ordenada, use os mesmos valores que so usados em <ol> e, se pertencer a uma lista no ordenada, use os mesmos valores que so usados em <ul>. Eis os exemplos: <li type="A"> <li type="circle">

    start Como atributo de <ol>


    Voc pode querer definir um nmero a partir do qual os itens de sua lista ordenada comecem a ser contados (o padro 1). Por exemplo: <ol start="3">. Isso vale para qualquer tipo de ordem, seja em algarismos arbicos, em romanos (minsculos ou maisculos), ou letras do alfabeto (minsculas ou maisculas), mas o valor atribudo a start sempre ser em algarismo arbico. Vejamos os exemplos: <ol start="3"> - Os itens da lista sero numerados a partir de 3. No precisa de type porque o padro adotado. <ol type="i" start=3> - O primeiro item ser iii. <ol type="A" start=3> - O primeiro item ser C.

    href Como atributo de <a>


    Define o destino do link. O valor atribudo a href pode ser um nome de um arquivo, um caminho completo do arquivo (path), uma URL ou ainda um alvo localizado no interior de uma pgina. Exemplos: <a href="arq.htm"> acessa uma pgina no mesmo site e no mesmo diretrio. <a href="artigos/arq.htm"> acessa uma pgina no mesmo site mas noutro diretorio. <a href="http://www.abc.com.br"> acessa um arquivo em outro site. <a href="#capitulo1"> acessa um alvo localizado no interior da mesma pgina.

    <a href="arq.htm#capitulo1"> acessa um alvo localizado no interior de outra pgina mas no mesmo site. Notar que, para acessar um ponto localizado no interior do arquivo, necessrio o smbolo #.

    name Como atributo de <a>


    Define o alvo a ser atingido no interior da pgina. Quando voc estabelece um link, precisa de uma referncia para o destino, ou seja, necessrio atribuir um valor ao atributo href. Quando se trata de acessar um site ou um arquivo, a referncia j existe, porque voc dispe do endereo do site ou do nome do arquivo. Mas quando voc precisa atingir um alvo no interior da pgina, necessrio criar tal referncia. Para isso voc utiliza o atributo name: <a name=nomealvo>textoalvo<a> onde nomealvo um nome que voc cria e textoalvo o trecho de texto que voc quer atingir dentro da pgina. Vejamos o exemplo abaixo: <a name="cap3">Captulo 3</a> [corpo do texto intitulado captulo 3] Agora voc pode acessar o captulo 3 de seu documento assim: <a href="#cap3">Captulo 3</a>. Note que necessrio usar o smbolo # no atributo href.

    target Como atributo de <a>


    Define em qual janela (ou frame) que ser exibido o resultado do link. Se no for especificado, a exibio ser feita na prpria janela onde est o link. Pode-se atribuir um dos seguintes valores: _blank - A exibio feita em uma nova janela. _self - A exibio feita na prpria janela onde est o link(padro). _parent - A exibio feita na janela que contm o frame onde est o link. _top - A exibio feita na janela que ocupa posio mais alta na hierarquia, quando h frames. Exemplo: <a href=http://www.abc.com.br target="_blank">Site ABC</a>.

    src Como atributo de <img>


    Especifica o arquivo de imagem ou o caminho completo (path). Observe que src vem de source (fonte). Exemplos: <img src="imagem.gif"> acessa um arquivo de imagem no mesmo mesmo diretrio. <img src="imagens/imagem.jpg"> acessa um arquivo de imagem noutro diretrio.

    lowsrc Como atributo de <img>


    Define uma imagem provisria, de baixa resoluo, para ser exibida antes de ser carregada a definitiva. um truque para melhorar a performance da pgina, mas hoje em dia pouca gente o utiliza porque as mquinas agora tm mais recursos. Pode-se,por exemplo, carregar uma imagem em preto e branco antes da colorida. A especificao feita da mesma forma que em src, ou seja, o nome do arquivo ou o caminho completo (path). Exemplo: <img lowsrc="imagem1.gif" src="imagem2.gif">

    alt Como atributo de <img>


    Especifica um texto que aparecer dentro do retngulo da imagem at que ela seja baixada. Observe que alt vem de alternative (texto alternativo). Esse texto aparecer tambm numa tarjeta quando o ponteiro do mouse for estacionado sobre a imagem. Essa definio importante para que o visitante saiba de qual imagem se trata, antes de ela ser exibida, ou mesmo depois. Exemplo: <img src="imagem.jpg" alt="foto da igreja"> imporante que voc digite o texto entre aspas. Sabemos que em muitos casos as aspas so dispensveis, mas aqui, se no fossem colocadas, o navegador iria ver s a primeira palavra. No caso, exibiria apenas a palavra foto.

    Como atributo de <area>


    O atributo alt na tag <area> especifica um texto que aparecer numa tarjeta quando o ponteiro do mouse for estacionado sobre uma rea clicvel de um mapa de imagens.

    Exemplo: <area shape="rect" coords="270,123,179,32" href="arq.htm" alt="texto"> Note que o texto no aparecer tambm num retngulo de contorno, como ocorre com <img>.

    order Como atributo de <img>


    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 definida como zero no ter bordas. Exemplos: <img src="imagem.jpg" border="1"> coloca a imagem dentro de um retngulo. <img src="imagem.jpg" border="0"> a imagem exibida sem borda.

    border Como atributo de <table>


    Define que a tabela ter bordas em seu contorno (bordas externas) e no contorno de suas clulas (bordas internas). O valor em pixels define a espessura das bordas externas. A espessura das bordas internas ficam inalterveis. O valor zero define que a tabela no ter bordas nem externas nem internas. Se for especificado apenas border, sem atribuio de valor, tal especificao equivaler atribuio de 1 pixel. Vejamos alguns exemplos: <table border="1"> bordas externas e internas com a espessura de 1 pixel. <table border> bordas externas e internas com a espessura de 1 pixel. (equivalente anterior.) <table border="2"> bordas externas com a espessura de 2 pixels e internas com 1 pixel. <table border="0"> sem bordas. <table> sem bordas (padro).

    bordercolor Como atributo de <table>


    Define a cor das bordas da tabela (externa e interna). Pode-se 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%. Exemplos:

    <table border="1" bordercolor="blue"> <table border="1" bordercolor="#00FF00"> Muitas vezes voc ter que recorrer ao cdigo hexadecimal, porque apenas algumas cores podem ser identificadas pelo nome. Note que o smbolo # no incio do cdigo hexadecimal obrigatrio. Disponibilizamos neste site uma tabela de cores que voc poder usar.

    hspace e vspace Como atributos de <img>


    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). Muito teis para distanciar o texto da extremidade da imagem. Exemplo: <img src="imagem.jpg" hspace="20" vspace="10"> No possvel definir margem esquerda diferente da margem direita. Da mesma forma, no possvel definir margem de cima diferente da margem de baixo.

    cellspacing e cellpadding Como atributos de <table>


    Definem, em pixels, o espao entre as clulas e a margem dentro das clulas, respectivamente. Com cellspacing voc cria um distanciamento entre as extremidades das clulas, nos quatro lados, direita, esquerda, em cima e embaixo. Com cellpadding, voc tambm cria um distanciamento, mas do contedo da clula em relao s suas extremidades e tambm nos quatro lados. Exemplo: <table cellspacing="3" cellpadding="5"> Para se ter uma idia mais ntida da diferena entre os dois atributos, observe uma tabela com bordas, ou seja, com o atributo border igual ou maior que 1. Nela voc percebe que cellspancing estabelece um distanciamento entre os contornos das clulas contguas. J cellpaddig, estabelece um distanciamento do contedo da clula em relao ao seu contorno. Outra forma de se observar o efeito causado por esses atributos colocando uma cor de fundo em cada clula com bgcolor. Esses fundos criam para cada clula uma espcie de tarja e dentro da tarja fica o contedo da clula. Assim, com cellspacing, voc cria um distanciamento entre as tarjas, esquerda e direita, bem como em cima e embaixo. E,

    com cellpadding, voc cria distanciamentos do contedo em relao extremidade da tarja. bom esclarecer que o funcionamento de ambos os atributos no depende de que haja bordas ou fundos nas clulas. Entretanto, quando temos uma tabela que no possui bordas, e que para suas clulas no houve nenhuma definio de cor de fundo ou de imagem de fundo, na prtica, pode ser indiferente utilizar cellspacing ou cellpadding para estabelecer espaos entre os contedos das clulas. Ou seja, neste caso, pode-se estabelecer o espao desejado utilizando apenas um dos atributos.

    width Como atributo de <table> e <td>


    Em <table> define a largura da tabela e em <td> define a largura da clula. Os valores so atribudos em pixels ou em percentagem. No sendo definida as larguras da tabela e das clulas, cada uma das clulas ter uma largura suficiente para acomodar o seu contedo. E, se as larguras forem definidas de forma insuficiente para acomodar o contedo, haver quebra de linhas, fazendo a altura crescer. Mas isso s vai ocorrer se o contedo for quebrvel, como um texto, por exemplo. Suponha que o contedo seja uma imagem com 100 pixels de largura e que a clula tenha uma definio de 50 pixels, neste caso, prevalecer a largura suficiente para acomodar a imagem. A soma dos valores das larguras das clulas de uma linha ser igual largura da tabela. interessante definir as larguras em percentagem, porque em pixels, a visualizao no ser a mesma dependendo da resoluo de vdeo. Eis um exemplo: <table width="100%"> <tr> <td width="50%"> clula 1 da linha 1</td> <td width="50%"> clula 2 da linha 1</td> </tr> <tr> <td width="50%"> clula 1 da linha 2</td> <td width="50%"> clula 2 da linha 2</td> </tr> Se voc definir a largura da tabela em 100%, ela ocupar toda a largura da pgina que possvel ser vista sem a barra de rolagem horizontal. Isso com qualquer resoluo de vdeo. Quando no h definio de largura para as clulas, a largura total da tabela dividida igualmente entre elas e, quando apenas algumas esto definidas, o espao restante dividido igualmente entre as demais. A no ser nos casos em que se usa o atributo colspan, todas as clulas de uma mesma coluna tero a largura igual, prevalencendo sempre a maior largura. Portanto, possvel alterar a largura de uma coluna, definindo-a em uma nica clula dentro de uma coluna.

    Se voc quiser criar uma tabela mais estreita ou mais larga pode definir a sua largura em um percentual menor ou maior que 100%. E, ainda assim, a soma das larguras das clulas deve ser igual a 100%, porque essa soma deve corresponder largura integral da tabela (integralidade=100%), embora ela possa ter um valor relativo diferente de 100%. Quando essa soma for menor ou maior que 100%, isso ser ajustado e esse ajuste recair sobre a ltima clula.

    height Como atributo de <table>, <tr> e <td>


    Em <table> define a altura da tabela, em <tr> define a altura de todas as clulas pertencentes linha, e em <td> define a altura da clula. Os valores so atribudos em pixels ou em percentagem. Na maioria das vezes deixamos de utilizar esse atributo tanto em <table>, como em <tr> ou em <td>, porque as clulas j crescem o suficiente para acomodar o contedo inserido. Inclusive, quando definimos a largura com o atributo width; se essa largura no for suficiente para a largura do texto, ento haver quebras de linha e a clula crescer automaticamente na altura. Alm disso, h de se considerar o fato de que esse atributo no contemplado por todos os browsers. Mas h situaes em que sua utilizao pode ser interessante. Apesar de funcionar, no h muito sentido na utilizao de height em <td> porque no h como fazer com que clulas pertencentes a uma mesma linha apresentem-se com alturas diferenciadas. O que ocorre que a linha toda assume altura da clula de maior altura. Assim prefervel definir a altura em <tr>. D mais clareza ao cdigo. O funcionamento de height muito parecido com o de width, mas height, em vez de atuar na largura, atua na altura, obviamente. Ento, para se ter uma idia a respeito, voc pode ler as consideraes feitas em width. Observe, entretanto, que <tr> nao possui width.

    align Como atributo de <table>


    Define o alinhamento da tabela dentro da pgina e controla o fluxo do texto ao seu redor. Tal texto o que digitado imediatamente aps a tag </table>. Descrevemos abaixo como isso funciona com cada um dos valores que podemos atribuir.

    left - A tabela coloca-se esquerda da pgina. O texto tem seu incio na linha nivelada com o canto superior direito da tabela, contornando-a. Exemplo: <table align="left">...</table>texto

    right - A tabela coloca-se direita da pgina. O texto tem seu incio na linha nivelada com o canto superior esquerdo da tabela, contornando-a. Exemplo: <table align="right">...</table>texto center - A tabela coloca-se no centro da pgina. O fluxo do texto no afetado, ou seja, ele aparece normalmente abaixo da tabela. Exemplo: <table align="center"> Observaes: 1) Os efeitos obtidos com left e right numa tabela so os mesmos que se obtm com uma imagem, mas, quanto aos obtidos em <img> atravs dos valores bottom, middle e top, no h para eles correspondentes em <table>. 2) O alinhamento de uma tabela tambm pode ser definido no pargrafo que a contm, mas a definio em <table> prevalece sobre a feita em <p>.

    align Como atributo de <tr> e <td>


    Define o alinhamento horizontal do contedo das clulas. Quando atribudo a <tr>, todas as clulas pertencentes linha tero o alinhamento definido e, quando atribudo a <td>, somente a clula que teve a definio. Mesmo tendo feito a definio para a linha, voc poder faz-la tambm para uma ou mais clulas. Assim todas as clulas tero um alinhamento igual, exceto as que tiveram uma definio particular. So os seguintes os valores que podem ser atribudos: left - alinhamento esquerda (o padro). center - alinhamento ao centro. right - alinhamento direita. Exemplos: <tr align="center"> <td align="right">

    valign Como atributo de <tr> e <td>


    Define o alinhamento vertical do contedo das clulas. Quando atribudo a <tr>, todas as clulas pertencentes linha tero o alinhamento definido e, quando atribudo a <td>, somente a clula que teve a definio. Mesmo tendo feito a definio para a linha, voc poder faz-la tambm para uma ou mais clulas. Assim todas as clulas tero um alinhamento igual, exceto as que tiveram uma definio particular. So os seguintes os valores que podem ser atribudos:

    top - alinhamento no topo da clula. middle - alinhamento no meio da clula (o padro). bottom - alinhamento na parte de baixo da clula. Exemplos: <tr align="middle"> <td align="bottom">

    colspan Como atributo de <td>


    Expande a largura de uma clula. O valor atribudo um nmero inteiro que corresponde quantidade de colunas que a clula expandida abrange. Veja o exemplo: <table border="1"> <tr><td colspan="2" align="center">clula expandida</td></tr> <tr> <td>clula 1/linha 2</td> <td>clula 2/linha 2</td> </tr> </table> clula expandida clula 1/linha 2 clula 2/linha 2 Veja ao lado a tabela criada no cdigo exemplificado. Possui duas linhas: na segunda linha colocamos duas clulas e na primeira linha apenas uma com colspan="2". Assim criamos na primeira linha uma clula expandida que tem a largura igual soma das larguras das clulas da segunda linha. Apenas para melhorar a esttica, acrescentamos align="center".

    rowspan Como atributo de <td>


    Expande a altura de uma clula. O valor atribudo um nmero inteiro que corresponde quantidade de linhas que a clula expandida abrange. Veja o exemplo: <table border="1"> <tr> <td rowspan="3">clula 1(expandida)</td><td>clula 2/linha 1</td> </tr><tr> <td>clula 2/linha 2</td> </tr><tr>

    <td>clula 2/linha 3</td> </tr> </table> clula 2/linha 1 clula 1(expandida) clula 2/linha 2 clula 2/linha 3 Veja ao lado a tabela criada no cdigo exemplificado. Note que a criamos com trs linhas: na primeira linha colocamos clula 1 e clula 2, sendo que a primeira foi expandida na altura com rowspan="3". Nas linhas 2 e 3, colocamos apenas clula 2, porque a clula 1 da primeira linha ocupa o espao no sentido vertical.

    shape e coords Como atributos de <area>

    O atributo shape define o formato de uma rea clicvel de um mapa de imagens processado no cliente e coords estabelece as coordenadas dessa rea em pixels. Os valores de coords devem ser separados por vrgulas. Abaixo, vamos tecer comentrios sobre cada um dos formatos e apresentar exemplos com base na figura ao lado. rect - Cria uma rea retangular. Temos obrigatoriamente quatro valores para coords, sendo que os dois primeiros (x1,y1) correspondem s coordenadas do vrtice de um dos ngulos e os outros dois (x2,y2) s coordenadas do vrtice do ngulo oposto. Exemplos: <area shape="rect" coords="21,16,132,87" href="arq.htm"> <area shape="rect" coords="132,16,21,87" href="arq.htm"> <area shape="rect" coords="21,87,132,16" href="arq.htm"> <area shape="rect" coords="132,87,21,16" href="arq.htm"> Os quatro exemplos fazem exatamente a mesma coisa, portanto deve-se adotar apenas um deles. Para apresentao desses exemplos, indicamos na figura as coordenadas dos vrtices dos quatro ngulos, mas isso desnecessrio, porque voc precisa apenas das coordenadas dos vrtices de dois ngulos opostos. Aqui quisemos apenas demonstrar todas as possibilidades.

    circle - Cria uma rea circular. Temos obrigatoriamente trs valores para coords (x,y,r). Onde x e y so as coordenadas do centro do crculo e r o comprimento do seu raio. Exemplo: <area shape="circle" coords="226,59,52" href="arq.htm"> poly - Cria uma rea poligonal. Temos obrigatoriamente para coords tantos valores quantos forem os ngulos. A quantidade de valores indeterminada, porque um polgono pode possuir qualquer quantidade de ngulos. Ento, coords=x1,y1,x2,y2,x3,y3,...,xn,yn. Onde x1 e y2 correspondem s coordenadas do vrtice do primeiro ngulo, x2 e y2 s coordenadas do vrtice do segundo ngulo e assim por diante. Isso tem de ser na ordem em que os pontos esto localizados no permetro do polgono, percorrendo-o no sentido horrio. Mas qual deve ser colocado primeiro no importa. Um tringulo tem trs pontos, um losango quatro, um hexagono seis, etc. Exemplos: <area shape="poly" coords="327,16,424,41,413,106,341,77,363,44" href="arq.htm"> <area shape="poly" coords="424,41,413,106,341,77,363,44,327,16" href="arq.htm"> Os dois exemplos fazem a mesma coisa. No primeiro, iniciamos num ponto, no segundo noutro, mas seguimos a ordem de localizao desses pontos no sentido horrio. Observao: Voc que conhece o sistema cartesiano pode se confundir ao estabelecer os pontos. No sistema cartesiano, a reta x cresce da esquerda para a direita e a y de baixo para cima. J aqui a quantidade de pixels cresce a partir do topo da imagem em direo parte de baixo e cresce a partir da extremidade esquerda em direo extremidade direita. Note bem: ao contrrio s verticalmente. Com rect e circle no h que preocupar-se com isso, mas com poly sim. Utilize o Paint do Windows para observar isso: abra uma imagem e estacione o ponteiro do mouse sobre algum ponto. Na barra de status voc l as coordenadas desse ponto (localizao no sentido horizontal e no vertical). Caminhe com o mouse para ver esses nmeros aumentarem e diminuirem e confirme nossa afirmao.

    href Como atributo de <area>


    Define o destino de um link de uma rea clicvel de um mapa de imagens processado no cliente. O atributo href em <area> funciona exatamente como em <a>.O valor atribudo a href pode ser um nome de um arquivo, um caminho completo do arquivo (path), uma URL ou ainda um alvo localizado no interior de uma pgina. Exemplos:

    <area shape="rect" coords="21,16,132,87" href="arq.htm" alt="texto"> href define o acesso a uma pgina no mesmo site e no mesmo diretrio. <area shape="rect" coords="21,16,132,87" href="artigos/arq.htm" alt="texto"> href define o acesso a uma pgina no mesmo site mas noutro diretrio. <area shape="rect" coords="21,16,132,87" href="http://www.abc.com.br" alt="texto"> href define o acesso a um arquivo em outro site. <area shape="rect" coords="21,16,132,87" href="#capitulo 1" alt="texto"> href define o acesso a um alvo localizado no interior da mesma pgina. <area shape="rect" coords="21,16,132,87" href="arq.htm#capitulo 1" alt="texto"> href define o acesso a um alvo localizado no interior de outra pgina mas no mesmo site. Notar que, para acessar um ponto localizado no interior do arquivo, necessrio o smbolo #.

    name Como atributo de <map>


    Define um nome para um mapa de imagens processado no cliente. Voc cria um mapa de imagens em duas etapas: 1. Entre as tags <map> e </map>, voc delimita as reas clicveis da imagem que serviro de links, utilizando a tag <area>. Em <map>, voc especifica um nome para o mapa atravs do atributo name. 2. Com a tag <img> voc insere a imagem e, no atributo usemape, especifica o mesmo valor atribudo a name. No precisa ser nessa ordem dentro do cdigo. Voc pode primeiro inserir a imagem depois o mapa, e vice-versa. Veja um exemplo completo de criao de um mapa clicvel: <map name="mapa1"> <area shape="rect" coords="21,16,132,87" href="arq.htm"> <area shape="circle" coords="226,59,52" href="arq.htm"> <area shape="poly" coords="327,16,424,41,413,106,341,77,363,44" href="arq.htm"> </map> <img src="imagem.gif" width="380" height="72" usemap="#mapa1">

    usemap Como atributo de <img>

    Especifica um nome de um mapa clicvel processado no cliente. Este nome tem de ser o mesmo que foi definido no atributo name da tag <map>. Exemplo: <img src="imagem.gif" width="380" height="72" usemap="#mapa1"> Note que obrigatria a colocao do smbolo # antes do nome.

    Das könnte Ihnen auch gefallen