A horizontal rule is a line that extends across the full width of the page. It is created with the <HR> tag.
A number of attributes change the appearance of a horizontal rule. These are shown below:
| Thickness | <HR SIZE=x> (where x is the number of pixels) |
| Width | <HR WIDTH=x> (where x is the number of pixels) |
| Width Percentage | <HR WIDTH="x%"> (where x is the percentage of the page width) |
| Alignment | <HR ALIGN=LEFT|RIGHT|CENTER> |
| Solid line (without 3D cutout look) | <HR NOSHADE> |
Horizontal rules are also called dividers since they were once often used to divide a document into sections. Their use as dividers, however, is now generally frowned upon.
Read about horizontal rules in your textbooks.
In-line images give the Web much of its visual appeal. They can also cause people using a slow Internet connection to not visit the site; so unless large in-line images are vital, they should either be avoided or alternate pages not using them provided. Small icons, however, have almost negligible transfer cost and can greatly enhance the appearance of your pages.
Use GIF or JPG files for graphics as appropriate:
Scanned images look better as JPG files. The JPG file format uses variable compression to make the file size smaller, but too much compression causes the picture to lose detail. As a guideline, use a JPG compression level between 60 and 75 percent. JPG is always 24 bit colour or 8 bit grey scale (such as in a black and white photograph).
GIF is useful for special effects such as transparent artwork (background transparency) and animation. It is 8 bit.
Another format called PNG combines the features JPG and GIF.
The <IMG> tag is used to embed an image into a Web document:
<IMG SRC="URL" ALT="Alternate Text">
The URL is the location of the image file. The ALT attribute specifies text to be displayed if the browser does not display the image.
In-line images are often placed inside anchors. The HTML code to create an image as a hyperlink is:
<A HREF="URL"><IMG SRC="URL" ALT="text"></A>
When an in-line image is used as a hyperlink, a border is placed around the image. This can be removed using BORDER=0. Similarly, a border, of any size, can be placed around a graphic using BORDER=x, where x is the width of the border in pixels.
Make use of the WIDTH and HEIGHT attributes in the IMG tag to specify the width and height of the image. This allows the browser to layout the page before all the graphics have finished downloading. The width and height can be specified either in pixels or as a percentage:
<IMG SRC="URL" WIDTH=x HEIGHT=x> (in pixels)
<IMG SRC="URL" WIDTH=x% HEIGHT=x%> (as a percentage)
It is also possible to specify how the graphic is to be placed on the page in relation to the rest of the text. This is done using the ALIGN attribute. By default the bottom of the image is aligned with the bottom of the text — this can be changed using ALIGN=left|right|top|middle|bottom.
To include a large graphic that will take a long time to load, first load another (smaller) image while the second larger one loads using LOWSRC="URL" to specify the location of the initial image.
Read about images in your textbooks.
In this Activity you will use the IMG tag and its attributes to create a Web page that includes graphic elements.
Open Notepad and begin a new HTML document by entering the main structural tags. Save this file as image.htm
Now find an image or icon to use in your page. You can save one from any Web page by right-clicking the image and selecting Save As. Save the image in the same directory as image.htm.
This image is going to be embed into the document. Save the file after each instruction and view it in your browser to see the affect.
Embed the graphic image in the document using the <IMG SRC="URL"> tag.
Include some alternative text to be used <IMG SRC="URL" alt="text">
If you can find out the width and height dimensions of the image, include these, otherwise try resizing the image as <IMG SRC="URL" alt="text" width=50 height=50>
Turn the image into a hyperlink by linking it to a page of your choice:
<A HREF="URL"><IMG SRC="URL" alt="text" width=50 height=50></A>
Turn the border that appears around the image off.
<IMG SRC="URL" alt="text" width=50 height=50 border=0>
Enter a short paragraph of text.
Align the image so that appears on the right side of the Web page.
<IMG SRC="URL" alt="text" width=50 height=50 border=0 align="right">
This section described how to incorporate other objects objects — such as multimedia and Java applets — into your Web pages:
The <EMBED SRC="URL"> tag is used to embed media such as background sound. For example <EMBED SRC="music.avi" WIDTH=320 HEIGHT=200 autostart=true loop=3> inserts an AVI movie object into a page, scales it to 320 x 200, starts playing the video, and loops it three times.
Java applets can be embedded using the <APPLET> tag. For example, <APPLET CODE=clock.class codebase=http://www.server.com/classes/ height=100 width=100> </APPLET> loads a Java applet from a remote Web server.
The <OBJECT> tag is used by multimedia software publishers like Macromedia and Digital Workshop (among others) to embed their programmes into Web browsers. Originally used by Microsoft for its Active-X technology, Netscape has adapted it to some degree. You probably will not be writing code using this tag. Programmes, like Flash and Director, generate the code for you to copy and paste into your HTML files. Some programmes, like Dreamweaver, which is a Web authoring tool, produce sophisticated code snippets based upon the designer's input parameters.
The following is an example that Macromedia Director produced for a Shockwave movie. Notice how the EMBED tag is inside the OBJECT tag.
<object classid="clsid:166B1BCA-3F9C-11CF-8075-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/director/
sw.cab#version=7,0,0,0" width="150" height="100">
<param name="src" value="welcome.dcr">
<embed src="welcome.dcr" pluginspage="http://www.macromedia.
com/shockwave/download/" width="150" height="100">
</embed>
</object>
Read about applets, plugins and objects in your textbooks.
An imagemap is a graphic that has certain areas on it defined as hyperlinks. These areas can do whatever normal HTML links do — email, ftp, gopher, etc. Two very popular uses for image maps are navigation bars and thumbnail sheets.
There are two types of imagemaps: client-side imagemaps and server-side imagemaps.
A server-side imagemap requires the imagemap information to be saved within a separate file stored on a server and accessed through a CGI script. This type of imagemap is far more complicated to set up, and is not supported by all servers. Server-side imagemap behaviour varies from system to system, even among different systems using the same server. A server-side imagemap shows mouse co-ordinates at the bottom of the screen.
A client-side imagemap (CSIM) requires the imagemap information to be stored within the HTML document. A client-side image map shows the actual URL in the status bar message at the bottom of the browser window. Client-side image maps store the hyperlink information in the HTML document, not in a separate map file as do server-side image maps.
When the user clicks a hotspot in the image, the associated URL is sent directly to the server. This makes client-side image maps faster than server-side image maps because the server does not need to interpret where the user clicked. Client-side image maps are supported by all modern browsers.
Read about imagemaps in your textbooks.