27 pág.
Denunciar
Pré-visualização | Página 1 de 7
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 <html> </html> Abertura e fechamento do documento HTML. <head> </head> Abertura e fechamento do cabeçalho do documento <title> </title> Abertura e fechamento do título do documento <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 comentários 2 - TEXTO Abertura Fechamento Finalidade Atributos <h1>...<h6> </h1>...</h6> Abertura e fechamento de um cabeçalho. São 6 níveis: h1 (o maior) até h6 (o menor). align=left | center | right <p> </p> Dispensável Inicia um parágrafo pulando uma linha. align=left | center | right | justifiy <br> Não há Vai para outra linha sem pular nenhuma. clear=left | right | all <b> </b> Coloca o texto em negrito <i> </i> Coloca o texto em itálico <tt> </tt> Coloca o texto em fonte monoespaçada <sup> </sup> Coloca o texto sobrescrito <sub> </sub> 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) <hr> Não há Cria uma linha divisória horizontal. align=left | center | right size=x width=x | x% noshade <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. align=left | center | right 3 - LISTAS Abertura Fechamento Finalidade Atributos <ol> </ol> Abertura e fechamento de uma lista ordenada. type=1 | A | a | I | i start=x <ul> </ul> Abertura e fechamento de uma lista não ordenada. type=disc | circle | square <li> </li> Dispensável Inicia um item de lista ordenada ou não ordenada. type=1 | A | a | I | i | disc | circle | square <dl> </dl> Abertura e fechamento de uma lista de definições. <dt> </dt> Dispensável Inicia o termo a ser definido. <dd> <dd> Dispensável Inicia a definição do termo. 4 - LINKS Abertura Fechamento Finalidade Atributos <a> </a> Estabelece um texto ou imagem como link. href=arquivodestino name=nomealvo target=_blank | _self | _parent | _top 5 - IMAGENS Abertura Fechamento Finalidade Atributos <img> Não há Inserção de imagem src=nomearquivo lowsrc=nomearquivo align=bottom | left | right | top | middle width=x height=x alt=texto border=x hspace=x vspace=x usemap=nomemapa 6 - MAPAS DE IMAGENS Abertura Fechamento Finalidade Atributos <map> </map> Abertura e fechamento de um mapa de imagens processado no cliente. name=nomemapa <area> Não há Define uma área clicável que funcionará como link dentro do mapa de imagens. shape=rect | circle | poly coords=x,y,x,y href=arquivodestino alt=texto 7 - TABELAS Abertura Fechamento Finalidade Atributos <table> </table> Abertura e fechamento de uma tabela. 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 <tr> </tr> Abertura e fechamento de uma linha da tabela. align=left | center | right valign=top | middle | bottom height=x bgcolor=nomecor | #rrggbb | rgb(x,x,x) <td> </td> Abertura e fechamento de uma célula 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 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