Now that you’re building up your knowledge of HTML in order to create web pages, and the use of CSS to specify how each HTML tag looks, we’ll cover three more features of web pages that you might find useful.
Horizontal Rules
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.
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:
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 colors 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=robertcell> 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.
Image Maps
This allows you to divide an image into a number of separate areas, and specify a different link destination for each area. For example, let’s say that you are creating a web site that offers various items of clothing for
sale. You place a picture on your home page that shows someone dressed in shoes, trousers, t-shirt, scarf and hat. You want to allow your visitors to click on part of the picture and be taken to different pages of your web site, namely shoes.html, trousers.html, tshirts.html, scarves.html or hats.html.
You might think that achieving this feat involves loading the picture into an image editing program and dividing it into five separate files, but actually you’d be wrong. The picture can remain intact. What you need to create is an Image Map, which is a special collection of data items which specify the boundary co-ordinates of each clickable area of the image, as well as details of the link destination. For example, "if someone clicks within the square that starts in the top left-hand corner and whose lower right hand corner is 38 pixels down and 29 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=robertcell> 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.
Unfortunately Amaya can’t create image maps, but there are a few free programs on the internet that can. One such program is called Handy Image Mapper. There’s a link on http://silveragesoftware.com/handytools.html which allows you to download it, and the good news is that, like all of the software mentioned in this book, it’s free.
Once you’ve download the file and installed it, you can run it. Start by clicking on its folder icon to open one of your pictures. Then click on the shapes to define areas of the screen, and enter the URLs that correspond to the intended web destinations. When you’re finished, click the Place On Clipboard button, which creates the map data and copies it to the Windows clipboard. You can then paste it into your web page.
The HTML code for using an image map looks like this:
<IMG SRC="computer.jpg" USEMAP="#computer">
<map name="computer">
Paste your image map data here
</map>
As you can see, it’s all pretty straightforward. Add a USEMAP parameter to the <img> tag, which names the image map to be used. Then place the map data somewhere on the page between a <map> tag and a </map> tag. The map data can simply be pasted from the clipboard, having been generated with Handy Image Mapper as described above.
In this example, I’ve loaded computer.jpg and, using the controls at the top of the right-hand column, created a square area that links to screen.html and a round area that links to mouse.html.
With this done, I can paste the map data into Amaya. The map data, in case you’re interested, consists of:
<MAP NAME="map1">
<AREA SHAPE="RECT" COORDS="25,8,81,52" HREF="screen.html" TITLE="">
<AREA SHAPE="CIRCLE" COORDS="69,104,16" HREF="mouse.html" TITLE="">
</MAP>
Obviously you’ll need to change the name from map1 to match whatever you have specified in the picture’s <img> tag.
Horizontal Rules
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.
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:
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 colors 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=robertcell> 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.
Image Maps
This allows you to divide an image into a number of separate areas, and specify a different link destination for each area. For example, let’s say that you are creating a web site that offers various items of clothing for
sale. You place a picture on your home page that shows someone dressed in shoes, trousers, t-shirt, scarf and hat. You want to allow your visitors to click on part of the picture and be taken to different pages of your web site, namely shoes.html, trousers.html, tshirts.html, scarves.html or hats.html.
You might think that achieving this feat involves loading the picture into an image editing program and dividing it into five separate files, but actually you’d be wrong. The picture can remain intact. What you need to create is an Image Map, which is a special collection of data items which specify the boundary co-ordinates of each clickable area of the image, as well as details of the link destination. For example, "if someone clicks within the square that starts in the top left-hand corner and whose lower right hand corner is 38 pixels down and 29 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=robertcell> 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.
Unfortunately Amaya can’t create image maps, but there are a few free programs on the internet that can. One such program is called Handy Image Mapper. There’s a link on http://silveragesoftware.com/handytools.html which allows you to download it, and the good news is that, like all of the software mentioned in this book, it’s free.
Once you’ve download the file and installed it, you can run it. Start by clicking on its folder icon to open one of your pictures. Then click on the shapes to define areas of the screen, and enter the URLs that correspond to the intended web destinations. When you’re finished, click the Place On Clipboard button, which creates the map data and copies it to the Windows clipboard. You can then paste it into your web page.
The HTML code for using an image map looks like this:
<IMG SRC="computer.jpg" USEMAP="#computer">
<map name="computer">
Paste your image map data here
</map>
As you can see, it’s all pretty straightforward. Add a USEMAP parameter to the <img> tag, which names the image map to be used. Then place the map data somewhere on the page between a <map> tag and a </map> tag. The map data can simply be pasted from the clipboard, having been generated with Handy Image Mapper as described above.
In this example, I’ve loaded computer.jpg and, using the controls at the top of the right-hand column, created a square area that links to screen.html and a round area that links to mouse.html.
With this done, I can paste the map data into Amaya. The map data, in case you’re interested, consists of:
<MAP NAME="map1">
<AREA SHAPE="RECT" COORDS="25,8,81,52" HREF="screen.html" TITLE="">
<AREA SHAPE="CIRCLE" COORDS="69,104,16" HREF="mouse.html" TITLE="">
</MAP>
Obviously you’ll need to change the name from map1 to match whatever you have specified in the picture’s <img> tag.
0 comments:
Post a Comment