Elementos HTML 23
Pré-visualização7 páginas
Elementos HTML - Guia de Referência Este Guia de Referência apresenta em primeiro plano uma tabela onde estão 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 descrição da finalidade de cada uma. Na última coluna aparecem os atributos com seus possíveis 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 estão sinalizados com vermelho ou verde. O sinal vermelho indica desaprovação pelo W3C e o verde indica que não há desaprovação. 1 - DOCUMENTO Abertura Fechamento Finalidade Atributos \uf0b7 <html> </html> Abertura e fechamento do documento HTML. \uf0b7 <head> </head> Abertura e fechamento do cabeçalho do documento \uf0b7 <title> </title> Abertura e fechamento do título do documento \uf0b7 <body> </body> Abertura e fechamento do corpo do documento \uf0b7 bgcolor=nomecor | #rrggbb | rgb(x,x,x) \uf0b7 background=nomearquivo \uf0b7 text=nomecor | #rrggbb | rgb(x,x,x) \uf0b7 link=nomecor | #rrggbb | rgb(x,x,x) \uf0b7 vlink=nomecor | #rrggbb | rgb(x,x,x) \uf0b7 alink=nomecor | #rrggbb | rgb(x,x,x) \uf0b7 <!-- --> Abertura e fechamento de comentários 2 - TEXTO Abertura Fechamento Finalidade Atributos \uf0b7 <h1>...<h6> </h1>...</h6> Abertura e fechamento de um cabeçalho. São 6 níveis: h1 (o maior) até h6 (o menor). \uf0b7 align=left | center | right \uf0b7 <p> </p> Dispensável Inicia um parágrafo pulando uma linha. \uf0b7 align=left | center | right | justifiy \uf0b7 <br> Não há Vai para outra linha sem pular nenhuma. \uf0b7 clear=left | right | all \uf0b7 <b> </b> Coloca o texto em negrito \uf0b7 <i> </i> Coloca o texto em itálico \uf0b7 <tt> </tt> Coloca o texto em fonte monoespaçada \uf0b7 <sup> </sup> Coloca o texto sobrescrito \uf0b7 <sub> </sub> Coloca o texto subscrito \uf0b7 <font> </font> Estabelece o tipo de fonte, o tamanho e a cor. \uf0b7 face="nomefonte, nomefonte" \uf0b7 size=+x | -x | x \uf0b7 color=nomecor | #rrggbb | rgb(x,x,x) \uf0b7 <hr> Não há Cria uma linha divisória horizontal. \uf0b7 align=left | center | right \uf0b7 size=x \uf0b7 width=x | x% \uf0b7 noshade \uf0b7 <div> </div> Abertura e fechamento de uma divisão de página cujos elementos que estão dentro dela obedecerão às mesmas definições. \uf0b7 align=left | center | right 3 - LISTAS Abertura Fechamento Finalidade Atributos \uf0b7 <ol> </ol> Abertura e fechamento de uma lista ordenada. \uf0b7 type=1 | A | a | I | i \uf0b7 start=x \uf0b7 <ul> </ul> Abertura e fechamento de uma lista não ordenada. \uf0b7 type=disc | circle | square \uf0b7 <li> </li> Dispensável Inicia um item de lista ordenada ou não ordenada. \uf0b7 type=1 | A | a | I | i | disc | circle | square \uf0b7 <dl> </dl> Abertura e fechamento de uma lista de definições. \uf0b7 <dt> </dt> Dispensável Inicia o termo a ser definido. \uf0b7 <dd> <dd> Dispensável Inicia a definição do termo. 4 - LINKS Abertura Fechamento Finalidade Atributos \uf0b7 <a> </a> Estabelece um texto ou imagem como link. \uf0b7 href=arquivodestino \uf0b7 name=nomealvo \uf0b7 target=_blank | _self | _parent | _top 5 - IMAGENS Abertura Fechamento Finalidade Atributos \uf0b7 <img> Não há Inserção de imagem \uf0b7 src=nomearquivo \uf0b7 lowsrc=nomearquivo \uf0b7 align=bottom | left | right | top | middle \uf0b7 width=x \uf0b7 height=x \uf0b7 alt=texto \uf0b7 border=x \uf0b7 hspace=x \uf0b7 vspace=x \uf0b7 usemap=nomemapa 6 - MAPAS DE IMAGENS Abertura Fechamento Finalidade Atributos \uf0b7 <map> </map> Abertura e fechamento de um mapa de imagens processado no cliente. \uf0b7 name=nomemapa \uf0b7 <area> Não há Define uma área clicável que funcionará como link dentro do mapa de imagens. \uf0b7 shape=rect | circle | poly \uf0b7 coords=x,y,x,y \uf0b7 href=arquivodestino \uf0b7 alt=texto 7 - TABELAS Abertura Fechamento Finalidade Atributos \uf0b7 <table> </table> Abertura e fechamento de uma tabela. \uf0b7 width=x \uf0b7 height=x \uf0b7 align=left | center | right \uf0b7 cellspacing=x \uf0b7 cellpadding=x \uf0b7 border=x \uf0b7 bordercolor=nomecor | #rrggbb | rgb(x,x,x) \uf0b7 bgcolor=nomecor | #rrggbb | rgb(x,x,x) \uf0b7 background=nomearquivo \uf0b7 <tr> </tr> Abertura e fechamento de uma linha da tabela. \uf0b7 align=left | center | right \uf0b7 valign=top | middle | bottom \uf0b7 height=x \uf0b7 bgcolor=nomecor | #rrggbb | rgb(x,x,x) \uf0b7 <td> </td> Abertura e fechamento de uma célula dentro de uma linha da tabela. \uf0b7 align=left | center | right \uf0b7 valign=top | middle | bottom \uf0b7 width=x \uf0b7 height=x \uf0b7 colspan=x \uf0b7 rowspan=x \uf0b7 bgcolor=nomecor | #rrggbb | rgb(x,x,x) \uf0b7 <th> </th> Abertura e fechamento de uma célula dentro de uma linha da tabela. Funciona como <td>, mas o texto que contém aparece em negrito e centralizado (uma espécie de cabeçalho ou título). Os mesmos atributos de <td> Esclarecimentos detalhados sobre os atributos das tags bgcolor Como atributo de <body> Define uma cor de fundo para a página. Pode-se 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%. Exemplos: <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. Observações: 1. Muitas vezes você não poderá utilizar o nome das cores, porque poucas têm um nome reconhecido pelo navegador. É recomendável que se utilize sempre o código hexadecimal. 2. Ao escolhermos uma cor de fundo, devemos nos preocupar 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 bgcolor Como atributo de <table>, <tr> , <td> ou <th> Define uma cor de fundo de uma tabela, linha ou célula. Pode-se 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%. Quando uma cor de fundo é definida para a página na tag <body>, a tabela também será abrangida, mas mesmo assim você poderá definir outra cor para a tabela, o que irá distingüi-la. Isso pode ser feito também para uma ou mais linhas e/ou células. 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 símbolo # no início do código hexadecimal é obrigatório. Disponibilizamos neste site uma tabela de cores que você poderá usar. Observações: 1. Muitas vezes você não poderá utilizar o nome das cores, poucas têm um nome reconhecido pelo navegador. É recomendável que se utilize sempre o código hexadecimal. 2. Ao escolhermos uma cor de fundo, devemos nos preocupar 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 background Como atributo de <body> Define uma imagem como fundo de uma página. Supondo a existência de um arquivo de imagem com o nome "imagem.gif" no mesmo diretório onde se encontra a página, podemos fazer o seguinte: <body background="imagem.gif">. Se o arquivo de imagem não estiver no mesmo diretório, será necessário especificar o caminho e, para fazer isso adequadamente, leia como especificar o caminho de acesso a arquivos (path). Observações: 1. Muitas vezes você não poderá utilizar