| Basics |
HTML Code:
<b>Bold text</b>
<i>Italic text</i>
<u>Underlined text</u>
<font size="#">Your text</font>
<font color="color">Your text</font>
|
Result:
Bold text
Italic text
Underlined text
Size 1
Size 2
Size 3
Size 4
Size 5
Size 6
Size 7
|
Explanation:
The words between the tags <b> and </b> become bold
in appearance.
The words between the tags <i> and </i> become italic
in appearance.
The words between the tags <u> and </u> become
underlined.
You may change your font's size by surrounding the desired text with <font> tags as shown
above. Valid sizes are 1 through 7.
You may change text colour by adding color="" into the <font>
tag. Valid colour codes are colour names (red, blue, green, etc) or HEX colour codes (i.e.: #FFFFFF is white, #000000 is
black).
|
| Tables |
HTML Code:
<table border="1">
<tr>
<td valign="top">
This is the left most column. Insert your text here.
</td>
<td width="10">
</td>
<td valign="top">
This is the right most column. Insert your text here.
</td>
</tr>
</table>
|
Result:
|
Your text here.
|
|
Your text here.
|
|
Explanation:
This code creates a table that splits your layout into two columns.
The border's size is defined in the <table> tag (which tells the browser to create a
table). To get rid of it, simply change the border property to 0.
A <tr> tag indicates the row we are working with. The </tr> tag indicates that we are done working with the row.
The <td> and </td> tags indicate a new cell (or column)
in the row. Whatever is put between them will be the content that shows up in the cell.
Note: The <td width="10"></td> part in the preceding code is used as a spacer between
the two columns. If you wish not to have a spacer, you may simply change the width to 0, or get rid of that part of the code
completely.
Other properties for the <td> tag:
valign="top, center or bottom" - This part of code aligns the data in
the cell vertically.
align="left, center or right" - This part of code aligns the data in
the cell horizontally.
width="## or ##%" - This part of code may be put into <table> or <td> to define a width. A number alone is measured
in pixels, if a % is added, it will use up that much percent of the page.
|
| Images |
HTML Code:
<img src="image address" alt="aleternative text" />
Optional properties:
width="##"
height="##"
border="##"
|
Result:
Regular: Width & height of
100: Border of 2:
|
Explanation:
The preceding code embeds an image into your web page. The src part (the source) indicates the
location of the image. Put in there the address to the image.
The alt part is simply an alternative to the picture. If a user has pictures disabled, this is
what will appear instead. In some browsers (such as Internet Explorer) the alt will also create pop-up text when the mouse is
held over the image.
Other properties for the <img> tag:
width="##" - This property changes the width of the image.
height="##" - This property changes the height of the image.
border="##" - This property adds a border around the image. When an
image is a link, this is set to a default of 1.
|
| Linking |
HTML Code:
<a href="file or site address" target="location">Linked Text</a>
<a href="file or site address" target="location">
<img
src="image address" alt="aleternative text" />
</a>
|
Result:
Google
|
Explanation:
The first part of code creates a text link, the second an image link.
This type of code may be used for a link, an anchor (covered in the next section), or any files (images, movies, pdfs, etc).
It is only necessary to indicate the location of the target desired. In our case we replaced file or site address with http://www.google.ca/.
The target may be either _blank, which will open a new window, or _self, which will load the link in the current window. If a target isn't present, the link will load by
default in the current window.
|
| Page Anchors |
HTML Code:
<a name="anchor name">Sample Text</a>
<a href="#anchor name">Linked Text</a>
|
Result:
Use the menu to the left as an example.
|
Explanation:
The first part of the code creates an "anchor" within your web page. The second part is just a link, but instead of linking
to a new page, it links to the anchor within the current page. When a link to an anchor is clicked, the anchor will be
brought up to the top of the page, or as close as possible.
|
| Galleries |
HTML/Javascript Code:
<script language="javascript">
<!--
var pictures = new Array("image address","image address");
var i = 0;
function nextPic() {
i++;
if(i > pictures.length -1) {
i = 0;
}
document.images["picture"].src = pictures[i];
}
function previousPic() {
i--;
if(i < 0) {
i = pictures.length -1;
}
document.images["picture"].src = pictures[i];
}
-->
</script>
<img src="first picture address" name="picture" /><br />
<a href="javascript:previousPic();"><img src="image address" border="0" alt="Previous"
/></a>
<a href="javascript:nextPic();"><img src="image address" border="0" alt="Next"
/></a>
|
Result:
 
|
Explanation:
This code creates a gallery that cycles through the images loaded into it.
The array (the 3rd line of code starting with var pictures = ) is a variable that holds the addresses to all the images you want your gallery to hold. You
may put as many images into this array as you want, just separate each address with a comma, and surrounded them with
quotes.
i.e.: var pictures = new Array("picture1.gif","apple.jpg","earth.png");
You can leave the rest of the script as it is. Moving on to the HTML portion, that first <img> tag is the first picture that is to appear in the gallery (make it the same as the first
picture in the array). Be sure to leave the name portion as it is as this is important for the
Javascript to function properly.
In our example, we used images for the Next and Previous links. If you wish, you may replace them with text links, or use
your own images (in which case you would need to provide an address for each image). You're welcome to use ours of course!
|