28.2. The syntax of HTML code

28.2.1. How to format text in HTML

To format a text in bold, you can use the <b> tag (deprecated in XHTML, use CSS instead, see Section 14.12, Section 28.3!). We recall that in HTML in most cases you have to open and close the tag. Thus, the code

<b>Hello</b> World

means that the word “Hello” shall be in bold face, while the rest of the sentence will be in normal face, since the <b> tag was closed with </b> immediately after the word “Hello”. Other formatting tags are:

• <u></u> (for underlining a phrase)

• <i></i> (for italicizing, i.e. render a phrase with cursive face)

But how can we change not only the face, but also the colour, the size and the font? For this, the <font> tag comes to our help (also deprecated in XHTML, use CSS instead, see Section 14.12, Section 28.3!). Let's take a concrete example and analyze it:

<font color="#FF0000" size="2">Hello World</font>

The code assigns some values to attributes of the font tag, that will apply to the “Hello World” text:

• color="#FF0000": assigns the red colour to the text. Why red? Because only the first two hex numbers are set (to FF, which is the hexadecimal notation for 255), meaning that only the red component is active (there are three components, red, grren and blue, each one taking up two hex digits in the colur notation).

  	Colour wheels
  	A useful tool in exploring the visible spectrum in HTML is the colour wheel. Just hover over the wheel with your mouse to view 4096 colors in their web safe, web smart and unsafe versions. You can also use the colour popups of the Tag-o-matic to show all 216 web-safe colours in a virtual colour card.

• size = 2: assigns the size 2 to the characters of the “Hello World” string.

28.2.2. How to create a link in HTML

We recall that a link in HTML is always composed of two parts, the clickable part (the link text) and the URL (Uniform Resource Locator, the destination site, page or resource). Here is an example:

• Clickable part (link text): PHP-Nuke HOWTO.

• URL: http://www.karakas-online.de/EN-Book/

The HTML code for this link is:

<a href=”http://www.karakas-online.de/EN-Book/”>PHP-Nuke HOWTO</a>

which will look like: PHP-Nuke HOWTO. As you can see, the <a> tag is closed with </a>.

Some rules for creating links:

• If the link points to an external site, the address must always start with “http://”.

• If the link points to an internal page in the same directory as the page setting the link, it suffices to give only the name of the file. This will be a little faster, as we save a DNS query on the site's fully quallified domain name. It also saves you administration headaches, should you choose to move your files under a different directory: in case of absolute paths, you would have to change all of them in your code. Finally, if you use relative paths, you can still navigate around your pages locally, on your development server, without having to upload all files on the web server first. See also Relative vs. Absolute Links and About Paths.

• We can pass parameters (the so-called “URL parameters”) on the link. PHP-Nuke make heavy use of this feature: all PHP-Nuke modules are called through a link that passes the module's name to the modules.php script, as in the following example for the News module:

  http://www.yousite.com/modules.php?name=News

• The link text can be treated just as any other text in HTML, assigning it colour and size, in the same way as we do it for normal text (see Section 28.2.1).

28.2.3. How to insert an image in HTML

To insert an image in an HTML file (or PHP-Nuke news article (see Section 6.1), or PHP-Nuke theme (see Section 14.1)), we use the <img> tag. For example, to insert an image called photo.png, located in the same directory as the file that is going to show it, we write:

<img src="photo.png" alt=”description of the photo”></img>

The alt tag serves as an alternative, textual description of the image. This description is shown when we hover with the mouse over the image, but it is also used by speech browsers like JAWS, or text-only browsers like Lynx, instead of the image file, to convey an idea of the image object to people with disabilities, see day 23 of the 30-day Dive Into Accessibility tutorial on Providing text equivalents for images.

In case your image is included in a different folder, say images/, as is often the case with PHP-Nuke, the code looks like:

<img src="images/photo.png" alt=”description of the photo”></img>

Note that we only need to specify a relative path to the image file, relative to the PHP-Nuke root directory, that is. The reason for this is that in PHP-Nuke all articles, stories etc. are shown through the modules.php file (which is passed the right module name through an URL parameter, as shown in Section 28.2.2), which is located in the PHP-Nuke root directory (by the way, this is the same directory where the config.php file (Section 3.7) is also located).

Also note that, to remain compatible with the HTML standards, you have to include the values of the attributes, like src or alt, in double quotes, as in the examples above. You can check your site for HTML standards compliance with the W3C HTML validator.

You can also make the image clickable, combining the two techniques of creating a link (see Section 28.2.2) and inserting an image:

<a href=”http://www.karakas-online.de/EN-Book/”>
<img src=” http://www.karakas-online.de/EN-Book/images/nuke.png” 
alt=”PHP-Nuke HOWTO”></img></a>

28.2.4. How to create a table in HTML

The important HTML tags for tables are:

• <table></table> (opens and closes a table)

• <tr></tr> (opens and closes a table row)

• <td><td> (opens and closes a table cell, inside a column)

A table with one row and one column will be constructed with the code:

<table width="100%" border="0">
  <tr>
    <td></td>
  </tr>
</table>

Here you can also see how to use some attributes, like "width", which can attain values in pixels or percent, and "border", which, if set to "0" as in the above example, will suppress the drawing of borders around table cells, thus making the structure of the table invisible to the reader.

A table with two rows and two columns can be created with the code:

<table width="500" border="0">
  <tr>
    <td width="200"></td>
    <td></td>
  </tr>
  <tr>
    <td width="200"></td>
    <td></td>
  </tr>
</table>

As you can see in this example, the table has the following properties:

• two rows,

• two columns,

• fixed total table width of 500 pixels,

• fixed width of the left column: 200 pixels.

Content is inserted in the columns, while the rows have a higher priority and are inserted first. For example, if we wanted to insert the text “PHP-Nuke” in the first line of the left column of the above table, the code would look like this:

<table width="500" border="0">
  <tr>
    <td width="200">PHP-Nuke</td>
    <td></td>
  </tr>
  <tr>
    <td width="200"></td>
    <td></td>
  </tr>
</table>

HTML layout: tables was yesterday, today is CSS!

Tables are meant to hold tabular data. They should not be used for layout purposes, even though they are being widely misused for this purpose, also in PHP-Nuke. The correct way to position your data today, is not through tables, but through CSS (see Section 28.3 and Designing Without Tables). If you decide to use tables, you should be using real table headers and providing a table summary, for accessibility reasons.