An introduction to the InternetBasics of HTML (4) [Archives:2003/657/Education]

Adnan A. Al-Harazi
Academic Head
NCC Education, Yemen Center
Referring to previous lessons, we said that websites are actually HTML files. HTML stands for HyperText Markup Language, the most widely used programming language in formatting Internet websites. There are several versions of HTML. The latest version is HTML 4.0. HyperText here means the text that references another text in a nonlinear method. You click over links in the form of words or images to move from one source to another on the Internet. Markup here means putting text, images or pictures along with tables in one page in an understandable way. And finally, Language means programming language. It is worth bearing in mind that there are other languages used in website design, but HTML was the first and is still the dominant language.

Graphics
Almost all web sites use graphics in some form. They range from simple buttons marking links all the way up to full screen photographs. We need to understand the different types of graphic formats available and how to use them effectively.
A graphical image is built up from pixels, which are tiny rectangular areas. Each pixel has a color drawn from a range of permissible values. The quality of an image is based on the density of the pixels (the number or dots per centimeter) and the number of possible colors for each pixel. A typical image has 256 possible colors for each value. This requires 8 bits (one byte) for each pixel. A graphics image might be 200 pixels wide and 100 high. This will require about 20 Kbytes of storage. The size of the storage required for images increases very rapidly with size and with quality.
256 colors are not sufficient to convey the full range of colors and intensities that can be seen in reality. It is possible to increase the range of colors by using up to 24 bits (3 bytes) for each pixel and this represents a practical limit for what can be distinguished easily. Unfortunately, this further increases the amount of storage needed. The problem is not about using up more storage, but the time it will take for transmitting images on the Internet. A 200 x 100 24-bit image requires at least 60 Kbytes in storage, and will take a relatively long time to be transmitted. Transmitting such an image using an average dial up modem will require up to half a minute before it arrives fully to the user's computer. Of course faster modems are available, but it would be unrealistic to expect that all the customers of a web site must have fast modems.

Graphic Formats
There are so many different ways in which a graphical image can be encoded. Each of these ways has different characteristics and advantages. HTML browsers are usually capable of rendering a small number of different formats directly and can use other programs to handle other types. Three formats are common:
– GIF (Graphical Interchange Format) has been in use as a graphics format for many years. It is mostly used for images with few colors, and the less the number of floors in GIF images the smaller in size they become. There are several different versions available, but most browsers and other tools can handle the commonly used forms. GIF has some specific advantages for web applications.
– It is streamable, means that the format is suitable for transmission over communication systems such as the Internet.
– It has progressive display abilities, where the image can be displayed as it is received rather than waiting for the whole file to be transmitted.
– It supports a simple form of transparency allowing it to be placed on top of a background or another image.

– JPEG (Joint Picture Experts Group) is a more recent and complicated format, designed to be particularly effective in compressing realistic images such as photographs. JPEG has some specific advantages for web applications.
– JPEG uses 24-bit depth allowing millions of color in contrast to GIF, which usually uses 256 colors only. Hence, JPEG is much more suitable for colorful photographs.
– JPEG uses lossy compression designed to work effectively with photographs. It is capable of achieving compression rations up to 20:1 without visible loss in quality and ratios of 100:1 are possible if minor degradation in quality is accepted. The amount of compression can be selected for the purpose envisaged.
– JPEG has become a very popular standard and is likely to continue to grow in popularity.

– PNG Portable Network Graphics PNG, (pronounced 'ping') apart from being free of patent controls has some further advantages over GIF.
– PNG supports 24 bit color images. This is a significant advance on GIF.
– PNG has much more sophisticated transparency control, making it much more useful for web applications.
– PNG was designed from the outset to be robust for Internet use.
So GIF is useful for small fast to transfer images (buttons, lines, icons, etc.), while JPEG is useful for the displaying of real picture to preserve the accuracy of the image with minimum size requirements. On the other hand, PNG is useful if you don't want to pay patent cost.

Inserting Graphics
Graphics are incorporated into web pages using the tag. There are several attributes that can be used with IMG.
–
This places the graphics image at the current location on the page. “src” is a file on the local system, but can also be a file in another website.
–
width and height specify the size of the image in pixels. They should always be used together. These measurements tell the browser to allocate the required rectangular area on the page to the image. This allows the browser to show the page layout in advance of the transmission of the full graphical image, so it speeds up the rendering of the page. Both WIDTH and HEIGHT require numbers as parameters.
In our example page, if we want to insert an image saved in C: drive we use the tag as follows:

Check the border attribute; it creates a border for the rectangle that will hold the image as it looks in fig 2.
If you have any questions about the lessons please send me an e-mail to [email protected].

Next week: more and more in HTML
——
[archive-e:657-v:13-y:2003-d:2003-08-07-p:education]