This episode is a collection of HTML language features associated with the commands you have already learned. You will see how some parameters that change the standard functioning of a command work, offering more flexibility and quality in creating pages. Among these features are:
- Aligning paragraphs
- Aligning headings
- Changing separation lines
- Working with images:-
👉 Aligning images
👉 Removing the borders of images using as links
👉 Images with transparent background
👉 Images in the GIF interlaced format
- Changing the colour and the size of the text fonts.
Aligning paragraphs
The <P> command starts a new paragraph, where the text is automatically aligned with the left margin of the screen. Through the ALIGN parameter, you can change the alignment so that the entire paragraph is centred or aligned on the right.
Examine the source code (Examp12a.htm) shown below:
<HTML>
<HEAD>
<TITLE>examp12a</TITLE>
</HEAD>
<body>
<hr>
<p align=center>This chapter is a collection of HTML language features associated with the commands you have already learned. You will see how some parameters work that change the standard working of a command.</p>
<p align=left>This chapter is a collection of HTML language features associated with the command you have already learned. You will see how some parameters were that change the standard working of a command.</p>
<p align=right>This chapter is a collection of HTML language features associated with the commands you have already learned. You will see how some parameters work that change the standard working of a command.</p>
<hr>
</body>
</HTML>
Just add the ALIGN parameter to the <P> command. The alignment remains active until another <P ALIGN=> command changes it. In this example we surrounded the paragraphs with the <P></P> commands. This makes clear the limits of the command.
Aligning the Text with the<DIV> command :-
Introduced in version 3 of language, the <DIV></DIV> command encloses a text area or section which can receive specific alignment parameters, as in the case of ALIGN, to align the text. The Examp12d.htm file uses the <DIV> command to align a group of paragraphs on the right without having to use a <P ALIGN> command for each one of them. See the following source code :
<HTML>
<HEAD>
<TITLE>examp12d</TITLE>
</HEAD>
<body>
<hr>
<div align=right>
This chapter is a collection of HTML language features associated with the command you have already learned. You will see how some parameters were that change the standard working of a command.<p>
This chapter is a collection of HTML language features associated with the command you have already learned. You will see how some parameters were that change the standard working of a command.<p>
</DIV>
This chapter is a collection of HTML language features associated with the command you have already learned. You will see how some parameters were that change the standard working of a command.<p>
</body>
</HTML>
And see the result in the following figure :
The <DIV> command may not work the same in Internet Explorer.
Aligning Headings
As standard, a heading generated by the <Hn> command is always positioned on the left side of the line. Using the ALIGN parameter, you can center or adjust the heading to the right of the line.
Take a look at the source code of the Examp12c.htm file :+
<HTML>
<HEAD>
<TITLE>examp12a</TITLE>
</HEAD>
<body>
<h2>Header without special alignment</h2>
This is the standard when a header is displayed.
<h2 align=center>Header with special alignment</h2>
In this case the header was centered by the parameter align=center
<h2 align=right>Header with special alignment</h2>
In this example the header was adjusted to the right through the parameter alignment
</body>
</html>
And now see the result:-
Changing the Format of Separation Lines or Dividers
The Dividers created by the <HR> command can have their size changed with the SIZE and WIDTH parameters. SIZE changes the thickness of the line, depending on the value specified. This value is expressed in pixels. The width, or length, of the line may be expressed in pixels, in which case the size of the line is fixed, or in a percentage relative to the width of the window. In this case, it's size varies as a function of the window width. See the source code of the Examp12b.htm file:-
<html>
<head>
<title>Examp12b -Changing divider Size</title>
</head>
<body>
<h2>Changing the divider height with Size</h2>
<hr size=1>
size 1
<hr size=2>
size 2
<hr size=3>
size 3
<hr size=5>
size 5
<hr size=10>
size 10
<hr size=15>
size 15
<hr size=25>
size 25
<h2>Changing the divider length with width</h2>
<hr size=5 width=200>
<hr size=5 width=10%>
<hr size=5 width=30%>
<hr size=5 width=60%>
<hr size=5 width=90%>
<hr size=5>
<h2>Align a divider with Align</h2>
<hr size=5 width=30% align=lift>
<hr size=5 width=30% align=center>
<hr size=5 width=30% align=right>
</body>
</html>
And now see the result:
You can also change the width of the line and its horizontal alignment through the SIZE and ALIGN parameters, as the next figure shows.
Notice in the next figure that upon reducing the size of the window, the first line with width=200 was unchanged, and the others adapted to the width of the window.
Aligning Images
You already know how to align an image with text, or to the left or right of the screen. Many times, however, it is necessary to place several images side by side in the same line. You can use several methods to do this. For example, you can create an image representing, let's say, 50 pixels and use it to separate the images. Or you can use the table creation features and place the image in each of the cells of the table. The examples shown next make use of tables, a feature you haven't seen yet. After learning to use tables in next episode, take a look at these next examples which align four images horizontally on the screen.
<html>
<head>
<title>Image Aligning - examp12e</title>
</head>
<body>
<table border>
<tr>
<td>
<img src="elogos.gif">
</td>
<td>
<img src="elogos.gif">
</td>
<td>
<img src="elogos.gif">
</td>
<td>
<img src="elogos.gif">
</td>
<td>
</table>
</body>
</html>
See how the images look:-
If you don't want the border to appear, omit the BORDER parameter from the <TABLE> command or set it to zero. To centre the images horizontally, enclose the <TABLE></TABLE> command with the <CENTER></CENTER> command.
Adding spece Between the Images:-
Upon removing the borders, the image will be evenly spaced. Through the CELLPADDING parameter, you can increase the the space between the images. The next example is the result of the Examp12f.htm file, which is identical to the previous one, except that the <TABLE> command has been modified:-
<table CELLPADDING=10>
Including a Caption in the Image:-
If you want to include a caption in the image, use the <BR> command preceding the text of the caption, as the next example shows.
<html>
<head>
<title>inserting captions - examp12g</title>
</head>
<body>
<center>
<Table cellpadding=10>
<tr>
<td>
<img src="elogos.gif"><br>Madrid
</td>
<td>
<img src="elogos.gif"><br>Castles
</td>
<td>
<img src="elogos.gif"><br>Cities
</td>
<td>
<img src="elogos.gif"><br>Help
</td>
</tr>
</table>
</center>
</body>
</html>
The Examp12g.htm file produces the following figure:
You have to be careful not to create text longer than the width of the image, or the images will be misaligned, as shown by the examp12t.htm file:
Image Borders Used as Links
When you use an image as a link, it is automatically enclosed by a border with the standard link colour. This border indicates if the link was accessed or not, just as text used as a link. At times, you may want to omit this border or change its width. This is all possible with the use of the BORDER parameter of the <IMG> command.
See the source code of Examp12g.htm file:-
<html>
<head>
<title>Images with borders as links Examp12g</title>
</head>
<body>
<a href="examp11e.htm"> <img align=middle src="elogos.gif">Information about Spain</a>
<p>
<a href="examp11e.htm"> <img align=middle src="elogos.gif" border=0>Information about Spain</a>
<p>
<a href="examp11e.htm"> <img align=middle src="elogos.gif" border=10>Information about Spain</a>
</body>
</html>
Note that the first image has a standard border. The second image has no border at all, as the BORDER=0 parameter was specified. The third image has a thick border, because of the specification of the BORDER=10 command. These values are in pixels.
Two characteristics of GIF image may be very useful in the utilisation of these images in your pages. The first is the ability to use a transparent background for the image, so that, upon being loaded, the image background colour disappears, allowing the view of the page background. Several image treatment programs can generate a GIF image with a transparent background. Even an existing image can be easily converted by utility programs, such as LView, a shareware program that is very simple to use.
The next figure shows the elogos.gif image of the the Spain page after its background became transparent. This image was saved with the name elogos2.gif.
Compare with the original image on the following page and see the effect.
Interlaced Images (GIF Interlaced) :-
The second characteristic is that a GIF image is loaded and displayed line by line, from top to bottom. Thus, a large image can take several minutes to be completely assembled on the screen, leaving the user Android and, many times, leading him to interrupt the loading of the image by pressing the browser's Stop button.
A GIF interlaced image, although not loaded any faster than the traditional GIF image, is loaded in a different manner. It first loads a law resolution, full size version of the image being loaded. Then, it loads the image little by little, giving the impression that the image is becoming increasingly sharper. With the technique, the user ends up being less impatient, because he is already seeing something on the screen.
The Examp12x.htm file is a version of the spain page which loads the logo with a transparent background and the Toledo image using an interlaced version of the image. Test this file to see how it works. Several programs convert a standard GIF image to GIF interlaced. Among them are LView Pro and paint shop Pro. The standard GIF image has a coding called gif 87. The interlaced image is identified by the coding gif 89.
Color Reduction
One of the factors contributing significantly to the size of an image is the number of colours it uses. Photographic images may have been captured using 32 kb or 16 million colours-- which makes their size gigantic. Graphs and drawings may also have been generated using a large number of colours.
If an image with a certain number of colours is displayed on a computer configured to display a smaller number of colours, the image's quality will be reduced to adjust to the machine characteristics. As standard, Windows is configured with 16 colours in the 3.x versions. To obtain 256 colour or more, adjustment must be made by installing video driver specific to the video board used. Windows 95 configures the number of colours depending on the board used in the computer. Regardless, most video board support display of 256 colours. When creating images, you should consider this value as the most common. However, many images, even those captured for 256 colours or more can have their size reduced if you decrease the number of colours used through image treatment programs. A good example is paintshop pro, a shareware program that allows reducing the number of colours of an image with two or three mouse clicks. With it, you can reduce the number of colours and view the results in the image before saving the final file. In this way you can find a balance between image quality and size. Many non photographic images captured with 256 colours can be displayed without great loss of quality with 64 or even 32 colours. See in the next figure the reduction in file size offered by the reduction of colours.
The Toledo2 image with 108 KB has 256 colours. The Toledo3 image had its colours reduced to 64. The Toledo4 image, which takes up only 67 KB, has 32 colours.
👈Episode 10.2 Episode 11.2👉
Share This Post
PRINT THIS POST
No comments:
Post a Comment
If you have any doubts. Please let me know.