Horizontal Ruled Line
The <HR> element is used to produce a horizontal line across the visible screen. The width of the line depends on the current size of the browser view area.
Format
<HR>
Example of HR Use
<HTML>
<BODY>
This text is above the line.
<HR>
This text is below the line!
</BODY>
</HTML>
Netscape displays the above HTML as:
In-Line Images
One of the great features of HTML is the ability to incorporate in-line images into your HTML Web pages. This enables far more interesting pages to be created than those consisting solely of text. HTML is after all an HyperText system. The <IMG> element is used to denote an in-line image. The element consists of four attributes.
SRC=
ALIGN=
ALT=
ISMAP
The SRC attribute specifies the name and location of the image: SRC="image name and location". Images are kept as separate files and are referred to from within the HTML text document. The Web browser reads the separate files if it can display the images.
The ALIGN attribute tells the browser how to align the image with text on the same line as the image. TOP aligns the top of the image with the top of the text. MIDDLE aligns the middle of the image with the middle of the text. BOTTOM aligns the bottom of the image with the bottom of the text.
Some browsers cannot display images. The ALT attribute allows you to specify text that will be displayed instead of the image, if the image cannot be shown. Most browsers (including Netscape) support graphics.
Some browsers (such as Netscape) support image maps. Specifying an image as ISMAP allows you to click on an image. The XY co-ordinates of where you clicked on a image are passed to a program or script which is invoked. ISMAP is covered in a later section.
File Name and Locations
The filename and location attribute of the IMG tag specify the location and name of the graphic file to be displayed. HTML documents which been completed and "published" on the Web have a unique URL (Uniform Resource Location) which specifies the name and location of the Web page.
When we publish Web pages we have to copy them to our Internet server.
Image file locations are also referenced by a unique URL. These graphic files have also to be copied to the server. An example graphic file URL looks like this:
"http://osiris.sunderland.ac.uk/sst/simon.gif"
The above URL references a graphic file called simon.gif which is stored in a sub-directory sst on the osiris computer in sunderland, uk.
When developing Web pages locally, URL graphics references should be referenced using the following format:
file:///drive|/directory/filename
Note: use a | (pipe) symbol instead of a : (colon) to denote the drive. Also that the / (forward slash) symbol is used to divide directories instead of the standard DOS \ (backslash) symbol.
For example, a graphics file called simon.gif on drive C of your computer in directory graphics would be referenced with the following URL:
file:///C|/graphics/simon.gif
Format
<IMG SRC="filename&location" ALIGN=BOTTOM | MIDDLE | TOP>
OR
<IMG SRC="filename&location" ALIGN=BOTTOM | MIDDLE | TOP ALT="text">
OR
<IMG SRC="filename&location" ALIGN=BOTTOM | MIDDLE | TOP ISMAP>
The | symbol above means OR. i.e. either BOTTOM, MIDDLE or TOP.
Example of Image Use
<HTML>
<BODY>
<P>
First graphics example:
<P>
<IMG SRC ="file:///C|/htmlw/jack.gif" ALIGN=TOP>
This text is aligned with the top of the graphic.
<P>
Second graphics example:
<P>
<IMG SRC ="file:///C|/htmlw/jack.gif" ALIGN=MIDDLE>
This text is aligned with the middle of the graphic.
<P>
Third graphics example:
<P>
<IMG SRC ="file:///C|/htmlw/jack.gif" ALIGN=BOTTOM>
This text is aligned with the bottom of the graphic.
</BODY>
</HTML>
Netscape displays the above HTML as:
