Using HTML - Page 3 - Attributes - Learning to build your own website from scratch
Please note that this is part of a series:
«« First « Previous (Page 2) - Next (Page 4) »
Where Page 1 explained the very basics, Page 2 explained the most common elements. In Page 3 of this series, we’ll explore the attributes of the common elements - those listed in Page 2. At the end of this page, you should be able to make a barebone website: it might not be the prettiest, but it’ll be fully functional.
I picked all the attributes that related to the elements shown in Page 2, then removed all those that are deprecated. There are more, useful attributes that pertain to CSS, and those will be shown in the next page(s). Now, without further ado, let us begin.
- <a> </a>
- <a href=”URL”> </a>
Ex.: <a href=”http://www.YouHaveChosen.Us”>Go to You Have Chosen.Us</a>
href is the location you want the link to go to. This can be absolute or relative, with or without an id link.
Absolute: http://www.youhavechosen.us
Relative: another_page.htm
Absolute ID: http://www.youhavechosen.us/…/#more-28
Relative ID: another_page.htm#some_id
Please note: for the ID to work, you must have an <a id=”some_id”> </a> on the page. id’s should always be unique (don’t use the same one twice on the same page) - <a href=”link” target=”_blank”> </a>
While it can be anything, target is primarily used with _blank to open a new window. It’s also used with frames, but frames are horrible for a number of reasons (including the fact that search engines hate them - which means a lot less traffic for you). Seriously, stay away from frames. Please note that to use the target attribute, you need to be using the loose/traditional DTD. Using the target attribute with the strict DTD is invalid
- <a href=”URL”> </a>
- <img />
- <img src=”URL” />
This attribute is required
The URL rules are the similar to those of the <a href=”"> attribute: they can be absolute and relative - <img alt=”text” />
This attribute is required
The text is shown when you hover over the image - <img width=”100px” height=”100px” />
Width and height in pixels. This is important because it will tell the browser how big the image is before downloading it (so it can immediately show the correct layout, rather than moving it to fit the image(s) once it finds out how big it is). This can be used to make an image bigger, although obviously the result typically doesn’t look good. This can also be used to make an image smaller, but that’s a waste of bandwidth: everyone’s downloading a bigger image than they need to be (and your server is uploading too much). If you have big images, consider making thumbnails (small versions of those images) and (using those thumbnails) linking to the big one
- <img src=”URL” />
- <table> </table>
- <table border=”2″> </table>
Pretty straight-forward: how wide the border should be - <table width=”100px”> </table>
Width of the table - <table cellpadding=”2″ cellspacing=”2″> </table>
Cellpadding adds empty space inside the cells (the <td> </td> cells). Cellspacing adds empty space outside the cells. The difference between the two is hard to see if the table doesn’t have a border
- <table border=”2″> </table>
- <tr> </tr>, <td> </td>
- <tr align=”center”> </tr>
How to align the contents of the row (<tr>) or cell (<td>). Possible values are left, center, right, justify, char - <tr valign=”middle”> </tr>
How to vertically align the contents of the row or cell. Possible values are top, middle, bottom, baseline
- <tr align=”center”> </tr>
- <td> </td>
- <td colspan=”2″> </td>
How many columns wide this cell is - <td rowspan=”2″> </td>
How many rows high this cell is
- <td colspan=”2″> </td>
That’s it! I’ve left out some things, like forms (not very useful without a script), CSS (positioning, colors, …) and some other elements (like those for Java/Flash objects), but you pretty much know XHTML 1.0 at this point. To make sure you do, let’s make a small mini-page with all we’ve learnt these past three pages:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" /> <html> <head> <title>Woohoo! A complete webpage!</title> </head> <body> <img src="my_image.bmp" alt="This image is broken unless you actually have a my_image.bmp in the same folder" width="200px" height="50px" /><hr /> <!-- I love this website --> <a href="http://www.youhavechosen.us" target="_blank">Open me!</a> - <b>Yes, it's a <i>new</i> window!</b> <p>Text goes here... lalalalala. Blablabla, blabla, blablabla, blablablabla. Blablabla blabla, blabla, blablabla, blablablabla. Blablabla blabla, blabla, blablabla, blablablabla. Blablabla blabla, blabla, blablabla, blablablabla. Blablabla blabla, blabla, blablabla, blablablabla. Blablabla blabla, blabla, blablabla, blablablabla. Blablabla blabla, blabla, blablabla, blablablabla. Blablabla blabla, blabla, blablabla, blablablabla. Blablabla blabla, blabla, blablabla, blablablabla. Blablabla blabla, blabla, blablabla, blablablabla. Blablabla blabla, blabla, blablabla, blablablabla. Blablabla blabla. Oh yes, that should be quite long enough to display what a p element does.</p> <ul> <li>Unordered list; item 1</li> <li>Unordered list; item 2</li> </ul> <ol> <li>Ordered list; item 1</li> <li>Ordered list; item 2</li> </ol> <table border="2"><tr><td colspan="2">1</td><td rowspan="2">2</td></tr> <tr><td>3</td><td>4</td></tr> <tr><td>5</td><td>6</td><td>7</td></tr> </table> </body> </html>
Go ahead, try it out: Open your favorite text editor (notepad will do), copy the code above, and save the file as “anything.htm”. Then you can open it in your browser. And now, to conclude let’s recap what we’ve learnt here:
- How to make links: <a href=”url”>text</a>
- How to show images: <img src=”some_image.ext” />
- If you won’t use the <a target=”frame”> </a> attribute, you should use the strict DTD
- Unless each row and column of a table is the same amount of cells, tables can quickly get very confusing
- To get any further in designing a webpage, you’ll need to learn CSS
Please note that this is part of a series:
«« First « Previous (Page 2) - Next (Page 4) »
