A horizontal rule allows you to create a line across your web page. This is useful as a way of underlining headings, or to separate areas of a large page. Although, if a page is becoming particularly large, it’s always better to split it into multiple pages in order to save your visitors’ time and bandwidth. For example, if you’re putting together the web site for your school’s sports day and there’s a huge list of race times that requires visitors to scroll down the page in order to find their name, split the page into separate parts. "Click here if your surname begins with A-K, or here for L-R, or here for S-Z". After all, Smith is unlikely to be interested in Brown’s results, so don’t waste his time including them on the same page. The standard HTML tag for a horizontal rule is just <hr>. Because this tag doesn’t officially need to be closed, and yet modern HTML coding standards say that every tag needs to be closed, it’s good practice to use the version which includes a closure. Namely <hr /> rather than a plain <hr>. It’ll help ensure that your pages validate correctly.
Amaya has the built-in ability to create rules. Just load one of your pages, then go to the Insert menu and choose Horizontal Rule. Your page will now look something like:
In a browser, such as Internet Explorer, Chrome or Firefox, it will look similar. Possibly not identical, because each browser shows the standard <hr> rule in a different way, but the differences will only be minor. For example, the line may be a slightly different colour or thickness.
As with every HTML tag, to stamp your own design on it you need to use CSS. For example, add this to your CSS file:
hr {
width: 400px; }
and your horizontal lines now become 400 pixels wide, rather than filling the entire width of the screen. Like so:
As always, if you want one particular line to be a different width, use an id-based selector. Eg, create a line like this:
<hr id="special_line">
and then create a style called #special_line which contains the specific information for this line.
Tables
A table is useful if you want to present tabular information on a web page, such as a timetable, price list and so on. To create a table on a web page using Amaya, go to the Insert menu, choose Table, then choose Insert A Table. In the box that appears, choose the number of rows and columns that you want, and the border thickness. Here’s what Amaya looks like, after I inserted a table of 3 columns and 2 rows, with a border thickness of 1:
I’ve used Amaya to split the screen to show the table as it would normally appear in a visitor’s browser, and also the HTML code that Amaya has generated. You can now see the HTML tags that are relevant to tables, which you need to know in order to be able to control the appearance of your tables with CSS.
The table starts with a <table> tag and, of course, ends with </table>. The table’s caption, had I chosen to include one, would have been placed between the <caption> and </caption> tags. By applying CSS to the caption tag, you can thus choose the particular font etc that you wish to use for your table captions.
The <col> tags are used to specify various characteristics for each of the columns of the table. The tags above, as generated by Amaya, don’t actually have any effect because there are no additional parameters specified. It’s easiest, and perfectly safe, to ignore them.
Next comes the main body of the table, which is enclosed within a <tbody> and </tbody> tag. Within the table body, each table row goes between a <tr> and </tr> tag, and each cell is created with a <td> tag, which stands for Table Data.
To change the overall look of all tables on a page, use your CSS file to apply one or more styles to the <table> tag. This is where you change things such as overall border line colours
and thicknesses, the margin and padding between and around each cell, and so on. Styling the <tr> tag, meanwhile, lets you specify various aspects of table rows, and specifying the <td> tag in your CSS file lets you style the table cells themselves.
As always, you can use id-based styles if you want to change the appearance of just one row or cell. For example, change <td>Robert</td> to <td id=robert- cell>Robert</td> and you can now specify a unique style for the particular HTML item
whose id is robert-cell. Just create an id-based style with TopStyle Lite and specify the required id, as explained on page 90.
Another useful table-related tag is <th>. This stands for Table Header, and is often used in place of <td> tags for each of the cells in the top row of a table. By applying different styles to <th> and <td>, you can easily create a different look for your header row. For example, add a background colour, make the text slightly larger, or make it bold.