Bluesoft Website . Login -   Home
Lightweight HTML User's Guide
This "page" describes lightweight HTML codes that you might want to use in your Bluesoft "Data Page" website for things like bolding, italics and links to external websites. Normally you should just let the program do all the formatting.

1. Bolding: Here is the source to create bold subheadings, such as the one above:

<b>This will be bold</b>
Notice that there are two "tags" to accomplish the bolding - the first one turns bolding on, and the second one turns it off again. All HTML works with markup tags. All tags are surrounded by angle brackets. The second tag has a forward slash, which generally means "turn this tag off".

2. Italics: Italics are basically the same syntax as bolding:

<i>This is italics</i>

3. Breaks: Normally HTML wraps all text, regardless of whether you typed a carriage return or not. So if you put a heading into bold, the text will wrap right up onto the same line. If you really want a break, the code is <br>. There are also built in heading tags like <h2> and <h3> but I don't like to use them because they leave too much space - I'd rather have the heading right next to the text. There is also a tag for paragraph breaks: <p> In the Bluesoft system, you don't have to put these in, since the program injects them automatically when it sees a blank line.

4. Font size, color and typeface: By using a pair of font tags, you can change the size, color or typeface of a block of text. For example, this is some text with typeface arial and red: This is arial. Here is the HTML source code:


 <font size=+1 color=red face=arial>
 This is arial
 </font>
Typical type faces are "times roman", "arial" and "courier". Courier is fixed pitch, so its ideal for tables.

5. Simple Tables: To do simple tables, I don't bother with HTML, I just use the preformatted tags <pre> and </pre> tags, which put it into fixed pitch. Below is a simple table:


  Daily Weekly
  -----------------------------------
  Kayak Rentals 40 200
  Double Kayak 50 300

Here is the source for the above:

<pre>
  Daily Weekly
  -----------------------------------
  Kayak Rentals 40 200
  Double Kayak 50 300 </pre>

If you want to create tables where each cell might contain a whole paragraph instead of one word, then you would use the HTML tags for tables. There are three pairs of tags: one for the "table" itself, one for each row, and one for each "cell" of the table. Below is an example:
Montreal Located on the St Lawrence River, and at one time the biggest city in Canada
Toronto Located on Lake Ontario and is now the largest city in Canada
The table has to start with <table> then each row has to start with <tr> and end with </tr>, and each cell has to start with <td> and end with </td>. Here is the source for the above:


 <table border bgcolor=ivory>
 <tr>
 <td>Montreal</td>
 <td>At one time the biggest city in Canada</td>
 </tr>

<tr>
 <td>Toronto</td>
 <td>Toronto is located on Lake Ontario</td>
 </tr>

</table>

In general, creating and maintaining tables in your website with raw HTML is too complex. Initially, I created a table by hand on the Bluesoft site to describe my Hosting services, but I quickly discovered it was too hard to maintain. So I created a separate table in the database for services.

6. Lists
The simplest way to do a list is to not use any HTML code at all, but just to indent each item one space, and put your own numbers in. Below is an example:

a. Vancouver
 b. Toronto
 c. Montreal

However HTML has a special tag for lists called <li> Below is a list done with these tags:

  • Vancouver
  • Toronto
  • Montreal

    The HTML source code for the above list is <li>. For example, below is a list:

    <li>Vancouver
     <li>Toronto
     <li>Montreal

    The above list will be displayed with bullets. If you want the list numbered, then you should start the list with the "ordered list" code <ol> and end the list with </ol>. Below is an example:

    <ol>
      <li>Vancouver
      <li>Toronto
      <li>Montreal
      </ol>

    Do not indent the list unless you want an extra space between each item.

    7. Links to External Websites: Below is the syntax for a link to an external website:

    <a href=http://Bivouac.com>Click Here
    

  • Readers of this Page
    2023.102023.112023.122024.012024.022024.03Total
    20191117101188