html: making lines
html tips: making lines
The basic tags, and their modifications, are given below. In each case, the new code is shown in red, and the line beneath it is an example of what that code does.
line thickness
The default line thickness is 2; you can see that in the examples above. Below are some different values for the line thickness.
line width
The "width" tag refers to the left to right size. Default is 100% across the screen, meaning that if you don't specify the width, as in the examples above, the line spans the entire screen. The examples below show the results of specifying the width. On most browsers, the line will be centered.
You can also specify by percent. The percent refers to the percent of the browser screen size; 50% means half the width of the screen, no matter what size it is. The size of the lines below will change if you make your browsers screen wider or narrower; notice, though, that the examples above do not change.
alignment
The "align" tag works on most browsers, and will put the line on either the right or left side of the screen.
comparing widths - percent vs. numbers
Notice the difference between these two examples. In one, the width is given as a number value: 200, which is roughly a third of a full-sized, 15 inch monitor. The second is given as percent: 33%. If you adjust your browser window to make it narrower or wider, you can see that the first example does not change, whereas the second does change.
color, shape
As far as I know, there is no way to specify the color of an HR line. Furthermore, the color of these lines on your screen now depends on the browser, the operating system, and the monitor you're using. On my Macintosh's 256 color screen, using Netscape 3, the unshaded lines are black, and the edges are squared. On my Compaq's million color monitor, using Netscape 3 for Windows 95, the unshaded lines are drab olive or grey, and the edges are rounded if the size is over 5.
However, if you use a background image, and you specify a contrasting background color, the lines will (with certain setups, but not all) take on the color you have specified in the background. (I've seen this work on a Japanese Windows 95 version of Netscape 3 on a 16-bit color Compaq monitor.)
html tips: making lines
- Making dividing lines to section off areas of your pages is easy to do. This page gives examples of code above the line created by that code.
The basic tags, and their modifications, are given below. In each case, the new code is shown in red, and the line beneath it is an example of what that code does.
- <hr>
- <hr noshade>
line thickness
The default line thickness is 2; you can see that in the examples above. Below are some different values for the line thickness.
- <hr size=1>
- <hr noshade size=1>
- <hr size=3>
- <hr noshade size=3>
- <hr noshade size=7>
- <hr size=7>
line width
The "width" tag refers to the left to right size. Default is 100% across the screen, meaning that if you don't specify the width, as in the examples above, the line spans the entire screen. The examples below show the results of specifying the width. On most browsers, the line will be centered.
- <hr noshade size=1 width=33>
- <hr noshade size=1 width=300>
You can also specify by percent. The percent refers to the percent of the browser screen size; 50% means half the width of the screen, no matter what size it is. The size of the lines below will change if you make your browsers screen wider or narrower; notice, though, that the examples above do not change.
- <hr noshade size=1 width="33%">
- <hr noshade size=4 width="50%">
- <hr size=4 width="50%">
alignment
The "align" tag works on most browsers, and will put the line on either the right or left side of the screen.
- <hr noshade size=4 width="50%" align=left>
- <hr noshade size=4 width="50%" align=right>
- <hr size=8 width="50%" align=left>
- <hr size=8 width="50%" align=right>
comparing widths - percent vs. numbers
Notice the difference between these two examples. In one, the width is given as a number value: 200, which is roughly a third of a full-sized, 15 inch monitor. The second is given as percent: 33%. If you adjust your browser window to make it narrower or wider, you can see that the first example does not change, whereas the second does change.
- <hr size=3 width=200 align=left>
- <hr size=3 width="33%" align=left>
color, shape
As far as I know, there is no way to specify the color of an HR line. Furthermore, the color of these lines on your screen now depends on the browser, the operating system, and the monitor you're using. On my Macintosh's 256 color screen, using Netscape 3, the unshaded lines are black, and the edges are squared. On my Compaq's million color monitor, using Netscape 3 for Windows 95, the unshaded lines are drab olive or grey, and the edges are rounded if the size is over 5.
However, if you use a background image, and you specify a contrasting background color, the lines will (with certain setups, but not all) take on the color you have specified in the background. (I've seen this work on a Japanese Windows 95 version of Netscape 3 on a 16-bit color Compaq monitor.)
| back to HTML Tips Articles Index |
Bill Pellowe
e-mail: billp@gol.com |
