GEOCACHING PHOTOS & CARTES VOYAGES LOGICIELS DIVERS
Petit guide simplifié du HTML à utiliser dans votre page de géocache
OpusTerra  >  Géocaching  >  Guide HTML simplifié
Bold: <b>text</b> crée:
text

Italics <i>text</i> crée:
text

Line Break: Ceci est une cassure<br>de ligne crée:
Ceci est une cassure
de ligne

Paragraphe: Ceci est un paragraphe<p>cassé crée:
Ceci est un paragraphe
cassé

Paragraphs part 2: La "vraie" façon d'écrire un paragraphe est de faire <p>Ceci est un paragraphe</p>

Texte de dimension fixe:
<pre>12345
2 O O
3
4 \__/
5 U </pre> crée:

12345
2 O O
3  >
4 \__/
5   U
Note that what html does is compress spaces. If it sees two spaces, it treats it as a single space.
<pre> tags are made to deal with that problem. Another way to deal with it is to use a &nbsp; tag.
&nbsp; means non breaking space. You can pile up the non-breaking spaces and it will show them all and not replace any of them with a line break.
There are 3 more of these types of charaters that are very useful and a lot more you probably don't need.
&amp; creates a & symbol
&lt; creates a < symbol (and is used a lot in creating this web page)
&gt; creates a > symbol
&deg; creates a ° symbol (46&deg; = 46° - now ain't that useful)

Font type: <font face="comic sans ms">I like comic sans</font> creates:
I like comic sans
(This assumes the person looking at the page has the font on their pc. If they don't, they won't see any difference)

Font size: <font size=4>I like it big</font> creates:
I like it big

Font size part 2: <font size=2>I like it small</font> creates:
I like it small

Font size: <font color=green>I like it green</font> creates:
I like it green

Fonts combined: <b><font face="comic sans ms" color=green size=4>Mean green fighting machine</font></b> creates:
Mean green fighting machine

Note that all the font stuff is contained in one tag and the one tag is inside the other.
<b><i>text</i></b> works but <b><i>text</b></i> doesn't.

Graphics: <img src="//http://opusterra.gel.usherbrooke.ca/images/sp_ken.gif"> creates:

Background: <BODY BACKGROUND="http://nozen.com/geo/hpbackground.jpg" BGPROPERTIES="fixed"> creates the background seen on http://www.geocaching.com/seek/cache_details.aspx?ID=106531

Link:<a href="http://www.geocaching.com/seek/cache_details.aspx?ID=106531">Link</a> creates: Link

Ordered Lists: <ol><li>Bob</li><li>Carol</li><li>Ted</li><li>Alice</li></ol> creates:

  1. Bob
  2. Carol
  3. Ted
  4. Alice

Unordered Lists: <ul><li>Bob</li><li>Carol</li><li>Ted</li><li>Alice</li></ul> creates:

  • Bob
  • Carol
  • Ted
  • Alice
Note that the only difference is ol or ul in the tag.

Colors: If you want colors you don't know the name of, you can use hex codes. This site has a nice list you can use.

More Special Characters: I ♥ ♣ ®