Apart from the code discussed on the previous pages, you will sometimes see code that you can ignore.
The bits of code to ignore are listed below:
- Blocks of text %block% and (:div:)
- Images, e.g. PICS:word_doc_icon.gif"Word document"
- Automatic text: {$TransBy}, {$WEB}, {$LINK}, and {$MP3}
- Sound files: (:button-player:)
- <span class="..."> and </span>
- Two backslashses at the end of a line \\
- 'Next page' button
Because you do not need to do anything with this code, you might as well skip this page. However, you may feel more comfortable editing the pages knowing exactly what code you should not touch. Even if you mess up the code by mistake, this is not such a big deal as it can easily be fixed.
1. Blocks of text
Some text comes in the form of a 'block', which we can establish by using (:div:). For example:
For this block, I used (:div:)
This is the code:
(:div class="dlmp3":)
For this block, I used (:div:)
(:divend:)
As you can see, a (:div:) block needs the closing 'tag' (:divend:).
The (:div:) tag can be filled with a lot of code that tells the system how to display a block of text. Just bear in mind that you should not touch anything between (:div and :).
For example:
(:div style="font-size: x-small;text-align:middle;border: 1px solid #cccccc; font-weight:bold; font-style:italic":).
The blue text needs no adjustment as it is enveloped by (:div and :).
Another way to create a block of text is by using %block%. It can contain a lot of extra code, for example:
%%block style='border:1px solid blue; background-color: #cccccc; color: red'%
This is where the text goes.
This is where the text goes.
If you come across such a 'block', you have to leave everything between the first % and the last % intact. You only have to edit the plain text.
2. Images
Images always begin with 'PICS' (in uppercase) followed by the image name (usually ending in something like 'gif' or 'png' and a description between quotation marks.
For example, PICS:word_doc_icon.gif"Word document" gives us the following image:
If you move your mouse over the image, you will see the tooltip 'Word document'. This is the text that we placed between quotation marks. You do not need to edit any image code but feel free to edit the text between the quotation marks. This is particularly useful for visually impaired readers, who cannot see the images but whose speech synthesizers can read the description.
3. Automatic text
As explained in the introduction, there are a few words or texts that are used so often that we better use some sort of a shortcut.
{$TransBy} is the code that renders the text "Translated from English by" in the page's language.
{$WEB} is a shortcut for:
PICS:link_icon.gif"This is an external link, which will open a new window"
It gives us this image:
The blue text is the description that you see when you move your mouse over the image. The text will be adjusted according to the language of the page.
{$LINK} gives us the red arrow:
. This image normally appears automatically before internal links but there are cases where this needs to be added separately.
{$MP3} is the code we use for the 'download mp3' image:
.
4. Sound files
Visitors can listen to sound files by clicking on a small 'play' button.
ABC-lied by Robin
This what the code of the button looks like:
(:button-player SOUND:abc_lied_door_Robin.mp3 text="MP3":)
You do not need to adjust anything inside the button player tag.
5. <span class="..."> and </span>
The span tags are html tags. They are used to format inline text (not entire blocks). You can ignore them, including anything you find inside the tags.
6. Two backslashes at the end of a line \\
The two backslashes cause a pagebreak. Normally, clicking on 'enter' will force a line break. Sometimes, e.g. in tables, this type of line-break does not work. This is when you will see the double backslash.
7. 'Next page' button
Most pages contain a 'next page' button, just like the page you are now viewing (scroll to the bottom of this page). Above each 'next page' button, you will find an 'edit' link, which you can ignore.
This link was not placed here to encourage you to edit this button. It simply marks the end of the previous editable section. (Why is there a link then? Here is why: I have not found a way to indicate the end of an editable section without automatically marking the beginning of the next editable section).
You do not have to edit the 'next page' button. If you are curious, you can click on the 'edit' link and be faced with a lot of code. It may surprise you how much code goes into such a simple button!
The text 'next page' is automatically rendered by {$NextPage}, which will be adjusted according to the language of the page. On the French pages, for example, {$NextPage} will automatically give us 'page suivante', on the Czech pages 'další stránka'.