GeoPT.org - Portugal Geocaching and Adventure Portal

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>

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


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

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

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


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:

* 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:


Inserir imagens:
A TAG utilizada é:

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:

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:

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


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 é:

Exemplos:

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:

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

* 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:

Sendo que:


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:

A tabela possui alguns comandos que são:

Veja um exemplo:

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:


Adicionar uma lista dentro da célula::

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:


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

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

Um exemplo de texto:

Um exemplo de imagem:

Onde...


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

É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...

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



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