Imagens Links e Controlos
Índice da página:
As imagens dentro de uma página devem estar preferencialmente no formato
".gif" ou ".jpg". Estes são os formatos mais
universalmente aceites pelos visualizadores de WWW (browsers).
Utiliza-se a seguinte notação para incluir uma imagem: <img src="diretório/arquivo">
Toda imagem incluída pode ser posicionada (align=...) na tela das seguintes formas: top, absmiddle, bottom, left e right.
As três primeiras opções definem a posição da imagem em relação ao texto.
Existem ainda dois controlos border="0" (0 = sem rebordo 1 = Com Rebordo) e alt="", este comando deve ser sempre inserido no código, o texto entre ásperas corresponderá a um aviso tipo Tooltip.
Uma imagem pode ser ainda um botão sensível: Para isso basta incluir uma imagem no interior de uma âncora.
Exemplo:
Utiliza-se a seguinte notação para incluir uma imagem: <img src="diretório/arquivo">
Toda imagem incluída pode ser posicionada (align=...) na tela das seguintes formas: top, absmiddle, bottom, left e right.
As três primeiras opções definem a posição da imagem em relação ao texto.
Existem ainda dois controlos border="0" (0 = sem rebordo 1 = Com Rebordo) e alt="", este comando deve ser sempre inserido no código, o texto entre ásperas corresponderá a um aviso tipo Tooltip.
Uma imagem pode ser ainda um botão sensível: Para isso basta incluir uma imagem no interior de uma âncora.
Exemplo:
<html> <head> <title>Inserir Imagens</title> </head> <body> <h3>Inserir Imagens</h3> <img src="rato.gif" align="top" alt="Eu sou mesmo vaidoso."><br> <img src="rato.gif" align="top" alt="Eu sou mesmo vaidoso."> Eu Sou um Ratito Maroto! <hr width="80%" size="2" color="#666666"> <img src="rato.gif" align="absmiddle" alt=""><br> <img src="rato.gif" align="absmiddle" alt=""> Eu Sou um Ratito Maroto! <hr width="80%" size="2" color="#666666"> <img src="rato.gif" align="bottom" alt=""><br> <img src="rato.gif" align="bottom" alt=""> Eu Sou um Ratito Maroto! <hr width="80%" size="2" color="#666666"> <img src="rato.gif" align="right" alt=""><br> <img src="rato.gif" align="right" alt=""> Eu Sou um Ratito Maroto! </body> </html>
 Ver |
 Índice |
É importante ter cuidado para que elementos de fundo não prejudiquem a leitura do texto em tela.
De um modo geral, esses elementos devem aparecer em cores bem claras ou de contraste. Sempre vale a pena visitar
outras páginas que utilizam esse recurso para recolher boas ideias.
1-O formato de côr de fundo é: <body bgcolor="#rrggbb"> (rr=hex red,
gg=hex green, bb=hex blue).
2-O formato de Imagem de fundo é: <body background="images/fundo.gif">.
3-Para tornar o seu fundo fixo e a sua página transparente ponha o atributo <bgproperties="fixed">.
Exemplo:
2-O formato de Imagem de fundo é: <body background="images/fundo.gif">.
3-Para tornar o seu fundo fixo e a sua página transparente ponha o atributo <bgproperties="fixed">.
Exemplo:
<html>
<head> <title>Imagem e Cor de Fundo</title>
</head>
<body bgcolor="#FFCBB3" text="#000000" background="ratito.gif" bgproperties="fixed">
<h3>Imagem e Cor de Fundo:</h3>
<b>Cor de Fundo = "#FFCBB3"</b><br>
<pre>
Este texto serve apenas
para ocupar espaço na folha
a fim de poder ver o scroll
transparente de sua página numa
imagem de fundo.
</pre>
</body>
</html>
<head> <title>Imagem e Cor de Fundo</title>
</head>
<body bgcolor="#FFCBB3" text="#000000" background="ratito.gif" bgproperties="fixed">
<h3>Imagem e Cor de Fundo:</h3>
<b>Cor de Fundo = "#FFCBB3"</b><br>
<pre>
Este texto serve apenas
para ocupar espaço na folha
a fim de poder ver o scroll
transparente de sua página numa
imagem de fundo.
</pre>
</body>
</html>
| Ver |
Índice |
Âncora
O principal poder do HTML vem da sua capacidade de interligar partes de um texto (e também imagens)
a outros documentos. Os clientes exibem em destaque estas áreas ou pontos chaves (normalmente com cores diferentes
ou sublinhado) para indicar que se trata de um link, ou interligação, no hipertexto.
A marcação <a>, que define o ponto de partida para os links, é denominada de âncora. Para incluir uma âncora em seu documento:
A marcação <a>, que define o ponto de partida para os links, é denominada de âncora. Para incluir uma âncora em seu documento:
1. Inicie a âncora com <a . ( Há um espaço depois de a.)
2. Especifique o documento a ser interligado, inserindo parâmetro href="filename" seguido do sinal: >.
3. Insira o texto que vai funcionar como link no documento corrente.
4. Anote a marcação de final da âncora: </a>.
2. Especifique o documento a ser interligado, inserindo parâmetro href="filename" seguido do sinal: >.
3. Insira o texto que vai funcionar como link no documento corrente.
4. Anote a marcação de final da âncora: </a>.
Um exemplo de referência a um hipertexto:
<a href="exe002.htm">Exemplo 2</a>.
Ver
VerA palavra "Exemplo 2" é definida como o marcador do link para se chegar ao documento exe002.htm,
que está no mesmo diretório do documento corrente. Ou seja, "Exemplo 2" aparece em negrito e se eu clicar nessa
palavra será exibido o documento apontado - exe002.htm.
Importante: se você quiser referenciar um diretório a partir do "raiz" do seu servidor www, inicie a notação com /. Isto é, se você tiver uma notação desta forma <a href="/imagens/icon1.gif">, significa que o arquivo icon1.gif deverá ser buscado no diretório imagens que está imediatamente acima do diretório raiz do seu servidor WWW.
Se desejar fazer um link com uma imagem como neste Tutorial, basta pôr o comando de inserção de imagem no meio do comando de hipertexto. Coloque o border a Zero ou aparecerá um quadrado na sua imagem, indicando que é um link.
Um exemplo de referência a um hipertexto com imagem:
Importante: se você quiser referenciar um diretório a partir do "raiz" do seu servidor www, inicie a notação com /. Isto é, se você tiver uma notação desta forma <a href="/imagens/icon1.gif">, significa que o arquivo icon1.gif deverá ser buscado no diretório imagens que está imediatamente acima do diretório raiz do seu servidor WWW.
Se desejar fazer um link com uma imagem como neste Tutorial, basta pôr o comando de inserção de imagem no meio do comando de hipertexto. Coloque o border a Zero ou aparecerá um quadrado na sua imagem, indicando que é um link.
Um exemplo de referência a um hipertexto com imagem:
<a href="exe002.htm"><img src="imagens/ver.gif" alt="" border="0">
Ver</a>.
Âncora Nome
O HTML permite que se façam ligações entre diferentes trechos de um documento. Você pode apontar uma palavra
ou trecho de um texto utilizando uma âncora de nome (named anchor). Este recurso é bastante usado na geração de índices
de conteúdo no início de uma página em trechos de Ajuda ou exemplos como este Tutorial.
1.Defina o "ponto de partida", atribuindo a ele um nome qualquer - no exemplo item1-, precedido do
caractere #,da seguinte forma:
Crie o ponto de partida <a href="#item1">Item 1</a>.
2.Defina o "ponto de chegada", atribuindo a ele uma âncora de nome, com o nome correspondente ao do ponto de partida, assim: <a name="item1">Item 1: Descrição</a>.
Poderá configurar as suas cores de link, na expressão <body> com cor do Link link, cor do Link Visitado vlink, cor do Link Activado alink.
Exemplo:
2.Defina o "ponto de chegada", atribuindo a ele uma âncora de nome, com o nome correspondente ao do ponto de partida, assim: <a name="item1">Item 1: Descrição</a>.
Poderá configurar as suas cores de link, na expressão <body> com cor do Link link, cor do Link Visitado vlink, cor do Link Activado alink.
Exemplo:
<html>
<head>
<title>Links</title>
</head>
<body bgcolor="#FFCBB3" text="#000000" topmargin="0" leftmargin="0"
link="#00FF00" alink="#FFFF00" vlink="#FF9900";>
<a name="topo"></a><!-- Topo Escondido -->
<h3>Links:</h3>
<b>Resumo Items:</b><br>
<a href="#item1">Item 1</a><br>
<a href="#item2">Item 2</a><br>
<a href="#item3">Item 3</a><br>
<hr width="80%" size="2" align="Center" color="#8b0000"><br>
<a name="item1"><b>Item 1:</b></a><br>
Segue Descrição Item 1.<br>
Teste 1<br>
Teste 2<br>
Teste 3<br>
Teste 4<br>
Teste 5<br>
Teste 6 <a href="#topo">Topo</a><br><br>
<a name="item2"><b>Item 2:</b></a><br>
Segue Descrição Item 2.<br>
Teste 10<br>
Teste 20<br>
Teste 30<br>
Teste 40<br>
Teste 50<br>
Teste 60 <a href="#topo">Topo</a><br><br>
<a name="item3"><b>Item 3:</b></a><br>
Segue Descrição Item 3.<br>
Teste 100<br>
Teste 200<br>
Teste 300<br>
Teste 400<br>
Teste 500<br>
Teste 600 <a href="#topo">Topo</a><br><br>
<b>Fim</b><br>
</body>
</html> Ver
<head>
<title>Links</title>
</head>
<body bgcolor="#FFCBB3" text="#000000" topmargin="0" leftmargin="0"
link="#00FF00" alink="#FFFF00" vlink="#FF9900";>
<a name="topo"></a><!-- Topo Escondido -->
<h3>Links:</h3>
<b>Resumo Items:</b><br>
<a href="#item1">Item 1</a><br>
<a href="#item2">Item 2</a><br>
<a href="#item3">Item 3</a><br>
<hr width="80%" size="2" align="Center" color="#8b0000"><br>
<a name="item1"><b>Item 1:</b></a><br>
Segue Descrição Item 1.<br>
Teste 1<br>
Teste 2<br>
Teste 3<br>
Teste 4<br>
Teste 5<br>
Teste 6 <a href="#topo">Topo</a><br><br>
<a name="item2"><b>Item 2:</b></a><br>
Segue Descrição Item 2.<br>
Teste 10<br>
Teste 20<br>
Teste 30<br>
Teste 40<br>
Teste 50<br>
Teste 60 <a href="#topo">Topo</a><br><br>
<a name="item3"><b>Item 3:</b></a><br>
Segue Descrição Item 3.<br>
Teste 100<br>
Teste 200<br>
Teste 300<br>
Teste 400<br>
Teste 500<br>
Teste 600 <a href="#topo">Topo</a><br><br>
<b>Fim</b><br>
</body>
</html>
VerÂncora Email
Existe ainda um recurso para criar um item na página que, ao ser selecionado, abre uma janela, e permite
que se envie uma mensagem eletrónica para um endereço específico. Para isso utiliza-se a variável "mailto:".
Veja o exemplo para enviar mensagens de dúvidas para o N/ endereço electrónico jat@joatex.com.
Exemplo:
Exemplo:
<html> <head> <title>Email</title> </head> <body bgcolor="#FFCBB3" text="#000000" topmargin="0" leftmargin="0" link="#00FF00" alink="#FFFF00" vlink="#FF9900";> <h3>Email:</h3> Qualquer dúvida ou comentário, enviar email ao <a href="mailto:jat@joatex.com">Apoio </a> do site JoaTex.com. </body> </html>
| Ver |
Índice |
Caracteres Especiais:
As notações presentes em marcações, devem ser representadas com notações especiais para que possam ser exibidas
em tela. Estas notações especiais sempre se iniciam por & (e comercial) e encerram-se
com ; (ponto e vírgula).
| Notação | Descrição | Aparência |
| < | Menor que | < |
| > | Maior que | > |
| & | E comercial | & |
| " | Aspas | " |
| ® | Marca Registada | ® |
| © | Copyright | © |
| | Espaço |
Acentuação:
É possível utilizar facilidades de acentuação (padrão do Windows por exemplo) em documentos HTML.
No entanto, desta forma, apenas poderá visualizar a acentuação o computador que reconhecer este padrão específico.
Segue abaixo o padrão para acentuação - ISO Latin-1 alphabet -, semelhante ao utilizado para exibir caracteres das marcações, e que poderá ser visualizado pela grande maioria das máquinas.
Segue abaixo o padrão para acentuação - ISO Latin-1 alphabet -, semelhante ao utilizado para exibir caracteres das marcações, e que poderá ser visualizado pela grande maioria das máquinas.
| Caractere | Notação |
| Acento Agudo | &xacute; onde x é uma letra qualquer, maiúscula ou minúscula |
| Acento Grave | &xgrave; onde x é uma letra qualquer, maiúscula ou minúscula |
| Acento Circunflexo | ◯ onde x é uma letra qualquer, maiúscula ou minúscula |
| Letra com Til | &xtilde; onde x é uma letra qualquer, maiúscula ou minúscula |
| Letra com Trema | &xuml; onde x é uma letra qualquer, maiúscula ou minúscula |
| Letras Unidas | &Aelig; = Æ e æ = æ |
| Letra com Argola | Å = Å e å = å |
| Cedilha | Ç = Ç e ç= ç |
| N com Til | Ñ = Ñ e ñ = ñ |
| O Cortado | Ø = Ø e ø = ø |
| THORN Maiúsculo | Þ = Þ(Icelandic) |
| Thorn Minúsculo | þ= þ (Icelandic) |
| ETH Maiúsculo | Ð= Ð (Icelandic) |
| eth Minúsculo | ð ð (Icelandic) |
| Caractere Alemão | ß = ß |
Existem várias tabelas de cores e nomenclaturas para as cores, mas nem todas são fidedignas em diversos
browsers, o que aconselho a ajustar as cores em hexadecimal.
Veja Tabela Exemplo: Ver
Veja Tabela Exemplo:
Ver
