|
CODES
Some keys on the keyboard are used for certain commands and so it will not appear in the text as it should. For example the angle brackets are used for tags, which will not be visible. So we have to use codes to write such characters. Below are some of them.
- — = —
- ’ = ’
- “ = “
- ” = ”
- • = •
- < = <
- > = >
- = spacing (one set for each spacing)
|
FONT
The font of the text: < font > < /font >.
Attributes
- color="#? " , ? is the color code
- face="#?" , ? is the type of lettering. Illustration
- size="?" , ? is 1 to 7, with 7 being the largest size.
Alternatively ? is size relative to the size defined in the < body > tag ranging from +4 to -4
Illustration
Font faces of size="3"
|
century gothic
verdana
tahoma
sans-serif
|
georgia
trebuchet
helvetica
times new roman
arial
|
brush script mt
|
|
G - L
- Image link
- Italics
- Headings: < h? > </h? >. ? ranges from 1 to 6, with 6 the smallest.
- Highlighters
- Boldface: < b > www.singnet.com.sg/~drscng < /b >
alternatively: Strong: < strong > www.singnet.com.sg/~drscng < /strong >
- Italics: < i > www.singnet.com.sg/~drscng < /i >
alternatively: Citation: < cite > www.singnet.com.sg/~drscng < /cite >
alternatively: Definition: < dfn > www.singnet.com.sg/~drscng < /dfn >
alternatively: Emphasis: < em > www.singnet.com.sg/~drscng < /em >
- Line Break: < br > (a stand alone tag). Illustration
|
LINKS
Path
The most essential attribute of a link is the path (path), which is the address from which the computer is to retrieve the information. An easy path is the address of a website. It the website is "www.singnet.com.sg/~drscng", then the path is "http://www.singnet.com.sg/~drscng". A more tricky address will be the "room" in the same website.
The space given to you by your ISP will be referred here as a directory (or folder, or a floppy disc in drive A). Your homepage (the index.html) will have to be in this directory. You can partition this directory into subdirectories (or subfolders). One of the commonly subdirectory most likely created for you by your ISP is "images" subdirectory.
One may want to create subdirectories like "business", "notes", "contacts", etc. Or even a subdirectory in your subdirectory. But for now I will ignore this. Once you know the fundamentals you will know how to figure the rest out yourself. If not email me.
I will deal with only two cases using a text file drscng.html to illustrate:
- In the same directory: The path will be "drscng.html"
- In the subdirectory "images": The path will be "images/drscng.html". You can also place a base tag < base href="(your webpsite address)" > just to be more specific.
Image link: < img src=" ? " >: ? is the path.
Attributes
- Aligment: align=" ? ", ? is left, middle, or right.
- Alternate: alt="" ? ", ? is a description of the image. In the event that the browser cannot download your image, least the viewer will have some idea what to expect.
- Borders for the image: vspace=" ? ", ? top or bottom.
- Borders for the image: hspace=" ? ", ? left or right.
- Height: height=" ? ", ? is the dimension in pixels. Default is the height of your image.
- Width: width=" ? ", ? is the dimension in pixels. Default is the width of your image.
It is advisable to provide the dimensions of your image as the browser will use the data to allot a space for it while it is downloading the text. It can then download the image and picture simultaneously.
Text link: < a href=" ? " > < /a >: ? is the path.
Link to email: < a href="mailto: ? " > < /a >: ? is the email address.
Link to another section of the same page
- Link: < a href="# ? " > ?? < /a >
- Target: < a name="# ? " > ??? < /a >
Note: "?" , "??", and "???" are any designate you fancy. It is more logical to give them the same designation.
To return to the previous page, use the back button at the top left hand corner of your screen. If it is not lighted up then close the page with the button (X) at the top right hand corner of your screen.
|
LISTING
Listing: < li >. Stand alone tag. Illustration
Ordered list (ol): < ol > < /ol >. Illustration
Attributes: type="?", start="?".
- The default is by numbers.
- By numbers starting from 5: start=5
- By Roman numericals (I, II, III, IV, etc): type=I (for upper case), type=i (for lower case)
- By Roman numericals starting from V (i.e. 5): type=I start=5 (for upper case), type=i start=5 (for lower case)
- By alphabets: type=A (for upper case), type=a (for lower case)
- By alphabets starting E (i.e. 5th alphabet): type=A start=5 (for upper case), type=a start=5 (for lower case).
Unordered list (ul): < ul > < /ul >. Illustration
Attributes: type.
- The default is anything, but most likely a black dot.
- Dot: type=disc
- Open circle: type=circle
- Filled square: type=square
Illustration
We will illustrate with a list for cat, fish and dog,
< ol >
< li > cat
< li > fish
< li > dog
< /ol >
|
|
This is what you see
- cat
- fish
- dog
|
|
< ol start=5 >
< li > cat
< li > fish
< li > dog
< /ol >
|
|
This is what you see
- cat
- fish
- dog
|
|
< ol type=I >
< li > cat
< li > fish
< li > dog
< /ol >
|
|
This is what you see
- cat
- fish
- dog
|
|
< ol type=I start=5 >
< li > cat
< li > fish
< li > dog
< /ol >
|
|
This is what you see
- cat
- fish
- dog
|
|
< ol type=A >
< li > cat
< li > fish
< li > dog
< /ol >
|
|
This is what you see
- cat
- fish
- dog
|
|
< ol type=A start=5 >
< li > cat
< li > fish
< li > dog
< /ol >
|
|
This is what you see
- cat
- fish
- dog
|
| |
Unordered List
For a list of cat, fish and dog.
|
< ul >
< li > cat
< li > fish
< li > dog
< /ul >
|
|
< ul type=disc >
< li > cat
< li > fish
< li > dog
< /ul >
|
|
< ul type=circle>
< li > cat
< li > fish
< li > dog
< /ul >
|
|
< ul type=square >
< li > cat
< li > fish
< li > dog
< /ul >
|
|
|
M - P
Page breaker (a horizontal line across the page): < hr >, a stand alone tag.
Attributes:
- size="?", ? is a number specifying the thickness of line
- width="?", ? is length of line given by number of pixels. Default is from end to end.
- align="?", ? is left, centre, or right. Default is left.
|
PARAGRAPH
Paragraph: < p > < /p >.
Illustration
Remember that all the tags (the red portion) will be invisible.
< p >
Creativity is essentially finding new applications from existing knowledge. This is done by putting together whatever you have and making it work to achieve the goal.< br >
The Japanese management concept of kaizen, basically look at the features of the management system and merely re-arrange them to create a new combination which is more efficient. < /p >
< p >
Many managers seek to add new things. This only resulted in mopre confusion. When there are more and more new regulations, one can see the symptoms of confusion. This is not creativity. < /p >
< p >
Creativity is essentially finding new applications from existing knowledge. This is done by putting together whatever you have and making it work to achieve the goal.< blockquote >
The Japanese management concept of kaizen, basically look at the features of the management system and merely re-arrange them to create a new combination which is more efficient. < /blockquote >
< p >
Many managers seek to add new things. This only resulted in mopre confusion. When there are more and more new regulations, one can see the symptoms of confusion. This is not creativity. < /p >
|
TABLE
|
< table > < tbody > < tr > < td >
< /td > < /tr > < /tbody > < /table >
|
Tags
- Table Row: < tr >
- Table Data: < td >
- Table Data bold: < th >
- Caption: < caption >
td in practice may sometimes function as a table column.
< table >
Attributes
< tr > < td > < /td > < td > < /td > < td > < /td > < td > < /td > < td > < /td > < /tr >
This will give one row with five columns.
Illustration
< table width="100%" ><tbody>
<caption align="left"> TABLE: Columns and Rows </caption>
< tr >
<th> c1, r1 </th> <th> c2, r1 </th> <th> c3, r1 < /th>
</tr> <tr>
<td> c1, r2 </td> <td> c2, r2 </td> <td> c3, r2 </td>
</tr> <tr>
<td> c1, r3 </td> <td> c2, r3 </td> <td> c3, r3 </td>
</tr></tbody></table>
|
This is what you will see.
TABLE: Columns and Rows
| c1, r1 | c2, r1 | c3, r1 |
|---|
| c1, r2 | c2, r2 | c3, r2 |
| c1, r3 | c2, r3 | c3, r3 |
Each cell in the row will follow the exact width of the first row. You can change the number of rows or columns in this formate by fusing them. See below.
|
FUSING of CELLS
Attributes:
Of Columns: rowspan=" ? ". ? number of adjacent columns.
Of Rows: rowspan=" ? ". ? number of adjacent rows.
< table width="100%" ><tbody>
<caption align="left"> TABLE: Columns and Rows </caption>
< tr >
<th> c1, r1 </th> <th> c2, r1 </th> <th rowspan=2> c3, r(1+2) < /th>
</tr> <tr>
<td> c1, r2 </td><td> c2, r2 </td> <td> c3, r2 </td>
</tr> <tr>
<td colspan=2 > c(1+2), r3 </td> <td> c3, r3 </td>
</tr> </tbody></table>
|
This is what you will see.
TABLE: Columns and Rows
| c1, r1 | c2, r1 | c3, r(1+2) |
| c1, r2 | c2, r2 |
| c(1+2), r3 | c3, r3 |
|
TABLE WITHIN a CELL
Now you can fused cells, you can also increase the number of cells by nesting a table in the cell.
< table width="100%" ><tbody>
< tr >
<td> c1, r1 </td> <td> c2, r1 </td>
</tr> <tr>
<td> c1, r2 </td> <td>
< table width="100%" ><tbody>
<td> c21, r21 </td> <td> c22, r22 </td>
</tr></tbody></table>
</tr></tbody></table>
|
This is what you will see.
| c1, r1 | c2, r1 |
| c1, r2 |
| c2, r2 | c3, r2 |
| c2, r3 | c3, r3 |
|
Note that I have set the width 0f the table to 100%, meaning 100% of the width of the colum 2.
|
|
|
|