[MANUAL OWNER] Criar a pagina da cache em código HTML

Criar a pagina da cache em código HTML (modo à unha)

O objectivo deste tópico é ensinar os princípios básicos para a criação de uma pagina em HTML.

Cabeçalhos:
O tamanho das letras ou fontes é definido pela tag <H> - "Headings".
A tag <H> normalmente é usada em Cabeçalhos e existem seis níveis. Com esta tag pode definir o tamanho das letras, mas não o tipo da fonte. Veja abaixo como fica:
Este é o tamanho:<H1>
Este é o tamanho:<H2>
Este é o tamanho:<H3>
Este é o tamanho:<H4>
Este é o tamanho:<H5>
Este é o tamanho:<H6>

  Código:

<H2>Texto</H2>

Pode-se alinhar os cabeçalhos, ao centro da pagina:

  Código:

<H2 ALIGN=CENTER>Texto centralizado</H2>
<H2 ALIGN=RIGHT>Texto alinhado à direita</H2>
<H2 ALIGN=LEFT>Texto alinhado à esquerda</H2>

Tamanho e cores das letras:
Também pode usar a tag <FONT> para definir o tamanho, bem como sua cor e tipo da fonte.
<FONT FACE> - Define o tipo de letra
<FONT COLOR> - Define a cor da letra
<FONT SIZE> - Define o tamanho da letra

  Código:

<FONT FACE="ARIAL" SIZE="1" COLOR="RED">Texto 1</FONT>
<FONT FACE="ARIAL" SIZE="2" COLOR="BLUE">Texto 2</FONT>
<FONT FACE="ARIAL" SIZE="3" COLOR="BLACK">Texto 3</FONT>
<FONT FACE="TIMES" SIZE="5" COLOR="BLUE">Texto 4</FONT>

Veja os exemplos:
Texto 1
Texto 2
Texto 3
Texto 4
* Desta maneira vai definir com mais precisão o tamanho das letras, do que se utilizar a tag <H>.

Formatar os textos:
Formatar o texto em Negrito, Itálico, Sublinhado e Centralizado. TAGS:
<B> - Negrito, <U> - Sublinhado, <I> - Itálico e <CENTER> - Centralizado

  Código:

<B>Texto em Negrito</B>
<U>Texto Sublinhado</U>
<I>Texto em Itálico</I>
<STRIKE> ou <S> Texto Riscado
<SUB> Como em H2O - O número 2 ficou em baixo.
<SUP> Como em Km2 - O número 2 ficou em cima.
<CENTER>Texto Centralizado</CENTER>

Também pode acumular os efeitos, agrupando os códigos Ex.:

  Código:

<CENTER><B><U><I>Texto</B></U></I></CENTER>

Criar parágrafos e linhas:
Não basta carregar em ENTER para que a linha vá para baixo. Tem de colocar uma TAG para criar um parágrafo ou uma uma nova linha.
Para criar o parágrafo usar a TAG <P> e para a linha usar <BR> Exemplo:

  Código:

<P>
Primeiro Parágrafo
<BR>
Primeira Linha

<P>
Segundo Parágrafo
<BR>
Segunda Linha

* Cada vez que coloca a TAG <BR> está a criar uma nova linha, que também não deixa de ser um parágrafo.
Se você escrever sem usar as tags <BR> ou <P> o próprio browser quebra as linhas automaticamente.

Alinhamento com TAG <P> :
Para alinhar os parágrafos basta incluir depois do "P" o parâmetro "align + tipo de alinhamento", conforme abaixo:

  Código:

<P ALIGN="LEFT"> Texto alinhado à esquerda.
<P ALIGN="RIGHT"> Texto alinhado à direita.
<P ALIGN="CENTER"> Texto centralizado.
<P ALIGN="JUSTIFY"> Texto justificado.

Inserir imagens:
A TAG utilizada é:

  Código:

<img src="nome da imagem+extensão"(gif,jpg,bmp,etc)>

Atributos da Imagem:
WIDTH - Define a largura da imagem.
HEIGHT - Define a altura da imagem.
ALT - Texto que aparece quando é passado o mouse sobre a imagem
BORDER - É um valor atribuido à largura da borda da imagem (Contorno).
Alguns exemplos:

  Código:

<img src="zero.gif" alt="Texto" border="0">
<img src="zero.gif" alt="Texto" border="1">
<img src="zero.gif" alt="Texto" border="2" width="20" height="20">

No ultimo exemplo especificamos o tamanho da imagem. Não definindo este tamanho, a imagem aparecerá no tamanho original. Pode especificar um tamanho menor do que a original, pois não acarretará perda de qualidade da imagem, mas se fizer ao contrário, isto é, definir um tamanho maior que a original, esta perderá qualidade.
O correcto é ter a imagem do tamanho que deseja para apareça na página. Quanto maior a imagem mais tempo levará para carregar.
Alinhamento texto de imagens:

  Código:

<img src="zero.gif" align="top">
<img src="zero.gif" align="middle">
<img src="zero.gif" align="left">
<img src="zero.gif" align="right">

Há também os atributos de moldura, que definem o espaço vertical e horizontal entre as imagens e os textos circundantes, onde:

  Código:

<IMG SRC="imagem.gif" VSPACE=espaço vertical>
<IMG SRC="imagem.gif" HSPACE=espaço horizontal>
Ex.: <IMG SRC="imagem.gif" ALIGN="LEFT" WIDTH="10" HEIGHT="10" VSPACE="50">
<IMG SRC="imagem.gif" ALIGN="RIGHT" WIDTH="10" HEIGHT="10" HSPACE="30">

Criar Links:
Os links são pontos clicáveis que levam a qualquer site da Internet ou a qualquer página do site e até mesmo qualquer ponto da própria página. A TAG usada é:

  Código:

<a href="Endereço da página">Nome ou descrição da página</a>

Exemplos:

  Código:

<a href="http://www.geocaching.com">Página do Geocaching</a>

Resultado: Página do Geocaching

Repare que criou um link para uma determinada pagina, que foi descrita no código acima.
Se carregar nele vai abrir a página e sair desta, mas se adicionar o atributo "TARGET", então já não vai fechar esta janela e vai-se abrir uma nova, o código é o seguinte:

  Código:

<a href="http://www.geocaching.com" target="_blank">Página do Geocaching</a>

Para fazer um link para uma outra página, use:

  Código:

<a href="pagina_tal.html">Carregue aqui</a>

* Após o nome da página é colocado a extensão .html

Imagens com links:
É simples criar uma imagem com link. Em vez de colocar um texto, colocamos antes uma TAG de imagem. Vejam o exemplo:

  Código:

<a href="http://www.geocaching.com"><IMG SRC="http://i50.tinypic.com/33o76h2.jpg"></a>

Sendo que:

  Código:

http://www.geocaching.com é o URL (endereço) da pagina.
http://i50.tinypic.com/33o76h2.jpg  é o URL (endereço) da imagem.

Criar tabelas:
As tabelas valorizam o Layout das páginas, pois dão harmonia e organização dos textos, imagens, listas, etc.
A tabela é representada pelas Tags <TABLE> e </TABLE> e possuem os seguintes atributos:

  Código:

border="valor" -Onde o "valor" define a largura da borda (contorno).
cellspacing="valor" -Onde o "valor" define o espaço horizontal entre as células.
cellpadding="valor" -Onde o "valor" define o espaço vertical entre as células.
width="valor" -Onde o "valor" define a largura da tabela em pixels ou em percentagem.
height="valor" -Onde o "valor" define a altura da tabela em pixels ou em percentagem.
bgcolor="#cor" -Define a cor de fundo da tabela.
bordercolor="#cor" -Define a cor da borda.
background="imagem.jpg" -Define uma imagem de fundo.

A tabela possui alguns comandos que são:

  Código:

<TR> e </TR> -Define uma linha da tabela.
<TH> e </TH> -Define um cabeçalho da tabela.
<TD> e </TD> -Define a coluna de informações.
<CAPTION> e </CAPTION> -Define o título da tabela.

Veja um exemplo:

  Código:

<TABLE BORDER="2" BORDERCOLOR="RED" CELLSPACING="10" CELLPADDING="6" WIDTH="50" HEIGHT="20" BGCOLOR="YELLOW" <TR> <TD> 1a.coluna </TD> <TD>2a.coluna </TD> <TD> 3a.coluna </TD> </TR> <TR> <TD> 1a.linha </TD> <TD> 1a.linha </TD><TD> 1a.linha </TD> </TABLE> </BR>

Você pode colocar o código acima em apenas uma linha. Resultado:


Para que a tabela fique centralizada, como acima, use a tag <CENTER> antes do código e </CENTER> depois do código.
Também pode-se alinhar o texto dentro das células, utilizando os seguintes atributos:

  Código:

Align="left" -Alinha o texto à esquerda.
Align="right" -Alinha o texto à direita.
Align="center" -Alinha o texto no centro.
Valign="top" -Alinha o texto no topo da célula.
Valign="middle" -Alinha o texto no meio da célula.
Valign="bottom" -Alinha o texto na parte inferior da célula.

Adicionar uma lista dentro da célula::

  Código:

<TABLE BORDER="1" <TR> <TD>lista dentro da célula<UL> <LI>1 item<LI>2 item<LI>3 item</UL> </TD> </TABLE>

Resultado:

Vou aqui tentar demonstrar de maneira simplificada o processo:

Começamos por criar uma tabela centralizada e com apenas uma célula de texto e/ou imagem:

  Código:

<div align="center">
<table border="0">
<tr>
<td></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>
</div>

Se quisermos adicionar mais células, basta adicionar o código abaixo, sempre a seguir ao ultimo </tr>

  Código:

<tr>
<td>&nbsp;</td>
</tr>

* &nbsp; é o espaço onde podemos colocar imagens ou texto.

Um exemplo de texto:

  Código:

<tr>
<td>TEXTO</td>
</tr>

Um exemplo de imagem:

  Código:

<tr>
<td><img border="0" <img border="0" src="http://i50.tinypic.com/33o76h2.jpg" width="377" height="296"></td>
</tr>

Onde...

  Código:

img border="0" é a largura da borda da imagem
src="http://i50.tinypic.com/33o76h2.jpg" é o endereço da imagem
width="377" a largura
height="296" a altura

Aqui deixo o código já com o espaço do nome da cache, uma imagem e uma linha de texto:

  Código:

<div align="center">
<table border="0">
<tr>
<td></td>
</tr>
<tr>
<td>
<p align="center">Nome da Pagina</td>
</tr>
<tr>
<td>
<img border="0" src="http://i50.tinypic.com/33o76h2.jpg" width="175" height="120"></td>
</tr>
<tr>
<td>Texto da pagina</td>
</tr>
</table>
</div>

ÉS GRANDE!

VÉNIA!

OLá a todos

Eu coloquei este assunto noutro local, mas se estiverem interessados, pode ser incluído no manual a opção de utilização do Write Area 1.0.0 para quem utiliza o browser Firefox Mozilla. Este plug.in da Firefox possibilita inserir o texto da cache em código html de maneira bastante simples.

Basta instalar este plug-in e depois clicar com o botão direito do rato no quadro de inserção de texto e escolher Edit in Write Area e a inserção de texto é feita como num normal processador de texto e uma vez completo, basta escolher Guardar e a sua transformação em html no quadro é feita de forma automática.

Abraço

Scirpaceus

Grande Tutorial!!!
OBA!

como se coloca uma imagem de fudo repetida numa cache, a la mano?

a partir do momento em que colocas uma imagem como fundo, é automaticamente repetida...

como se coloca uma imagem de fudo repetida numa cache, a la mano?

Escreves isto, na primeira linha do código da página:

  Código:

<body background="http://exemplodeendereco.com/exemplodeimagem.jpg">

Era assim no meu tempo. Parece que com as modernices de agora, se faz de outra forma (que não sei explicar).

tens que explicar se queres colocar na página de uma cache com a funcionalidade de background image que a edição da listing te permite ou não... se for isso, a resposta é a que te dei acima. Caso queiras ter como fundo do conteúdo e não das áreas laterais, é assim:

<body style="background-image:url('http://URL_DA_IMAGEM');">

Quero colocar como fundo da listing da cache .. parecido com a gc34mdr

Sent from my GT-I9300 using Tapatalk 2