|... From 16|
|Every Image is a File|
Image, picture, photo, drawing, etc, are technically different terms in computing. We many a times use these words synonymously.
Every image file is a data file. The programs we use to read or edit the images (i.e. the image files) are capable of understanding this data and displaying the image that is represented by the data.
Some of the file name extensions used for files containing image data are
Windows Paint Brush, Photoshop, Corel Draw, Adobe Illustrator etc are some programs that are capable of both reading editing the most common image files.
Each file name extension relates to a distinct method adopted in creating the image file.
|Image Editors and Readers|
Image editors are programs which enable us to open the image file, make changes to it and save it in the changed form.
Image readers (it would be more appropriate to use the word view here) i.e. image viewers are programs which would read the image file and display the image i.e. enable us to view the image.
File editors need not always be file readers. You can notice this in case of HTML files. However, in case of images, in almost all the case, the image editors are image readers. There are many programs which are just image readers (Windows Picture and Fax Viewer etc).
• Multiple Format Editors
Many of the programs are multi format image editors i.e. they can edit more than one type of files. Say the paint brush program can edit image files with the extensions ".bmp, .gif, .jpe, .jpeg, .tiff, .png".
• Multiple Format Readers/Viewers
Many of the image reading programs are also multi format image readers i.e. they can read (display) more than one file type. Say the program "Irfan Viewer" opens and displays almost all types of image file formats.
• Browser » An Image Reader
The most common formats of images on the web ".gif, .jpg, .jpeg, .png," are capable of being opened and displayed by the browser. This would be clear if you open an image file in any of these formats in the browser. That is what the picture below shows you.
Apart from its ability to read (display) images, the browser can also embed the image within the textual content. The page that you are reading now is one example of a browser displaying images embedded within text.
|Displaying images Embedded within Text|
• In a Word Processing Document
Consider a document (say Microsoft Word document) with images (.jpg, .png, .gif etc inserted into it) in it.
» Word Processor an Image Reader/Editor
Because the images are displayed in the document, we can say that a word processing program is an image reader.
Technically a Word Processor is not an image editor. However, we can edit autoshapes, text art etc., constructed using the tools within word. These also look like images. However, you cannot edit images in other formats (like .jpg, .gif files) from within the word processing program. You need the help of another program to edit these images.
Thus we can say that with regard to text, tables, autoshapes, text art, etc., within the document, the word processing program is an editor. But with regard to other images (like .jpg, .gif files) the word processing program is just a reader.
» Images are Embedded Objects
Every image is a file. Thus we can say that the program (microsoft word) is handling two types of content. Content which it cannot edit (like .jpg, .gif images) and content that it can edit like text, table, autoshapes, text art etc.
The content present in the document that the word processor cannot edit is the content of the files that is embedded into the document and is called an object. Anything that is not native to the program is an object.
[Choose the menu option ⇒ Insert | Object ... in Microsoft Word to view the objects that a word document can include within it]
» Embedded Objects saved along with the document
The word processing program (Microsoft Word), saves all the information relating to the image file, which it has embedded within it as an object, in the same file along with the other content.
Therefore, we seldom identify that the images that we use within the word processing program are separate files.
• In a Web Page
A browser is just a web page reader. Any simple text editor can be a web page (HTML or other file) editor. Since we make a HTML file with a text editor, there is no way we can embed and save an image along with it.
However, we do find that just like in a document, the browser also displays the text and images together.
For the browser, the text file containing the HTML code and the image file are two different files. While making up the HTML code relating to a web page (HTML file) we only include the information relating to the image file (its location and file name of the image to be displayed along with the text) as a part of the HTML code.
The browser reads the HTML file (containing the textual content to be displayed, related HTML tags and information relating to the image files to be included) interprets the tags, formats the content appropriately based on the HTML tags and displays the content in the browser window. It also fetches the image using the information relating to the image file found within the HTML code, embeds the image within the textual content and displays it in the browser window.
In other words the image files are not embedded in the HTML file, but are embedded by the browser while displaying the web page (HTML file).
An example of the information relating to an image included in a web page:
The HTML tag that is used to embed an image in the web page is the <img> tag. This is one of those few tags that does not have an ending tag related to it. The tag is generally physically located near the text along with which the image should be displayed by the browser. The various attributes within the tag give the information required by the browser to fetch, format and display the image.
|What the browser does » On encountering the <img> tag|
The browser on encountering the <img> tag would first collect all the information within the tag in the form of attributes and/or style properties.
<img src="http://photos1.blogger.com/blogger/6726/689/320/17.1.jpg" height="200px" width="125px" alt="cuckoo bird" border="1">
|Alternative Text (alt)|
Immediately on the browser reserving the space for the image, it would write the text placed as the value of the "alt" (identified as alternative text) attribute within the <img> tag. In case the image is not filled or it takes to get filled, this text would be visible to the reader. This would give an idea of the image to the viewer in the absence of the image.
<img src="__" height="__" width="__" alt="cuckoo bird" border="1">
The dimensions (height, width) of the area within which the browser has to display the image are defined within the <img> tag, as either attribute values or style properties.
• Image height
To define the height, we can use
• Image Width
To define the width, we can use
• Attribute values different from actual values!!
If the height and width defined within the <img> tag are different from the actual height and width of the image, the browser would accommodate the picture into the defined space by resizing it. If the actual image is smaller the browser would stretch it to fill the defined space and if it is larger, then the browser would shrink the image to fit into the defined space.
Defining the height and width attributes for an image within the <img> tag, would save the browser an extra call to be made to collect the information, and at the same time a wrong definition would distort the image. Ensure that you are using the correct values and if in doubt, do not define them.
|Image File Location|
We can notice the details relating to the location of the image file as the value of the src (read source) attribute within the <img> tag [
< img src = "/blogger/6726/689/320/17.1.jpg" >]
• Address :: Addressing
When we enter the URL of a file located on the internet, the browser would fetch that file from the address mentioned by making a request to the appropriate server. Addressing a file is calling the file by its name. The address of the file is the folder where the file is located commonly called its path. Many a times we use the terms synonymously.
• Referential/Relative Addressing
Referential addressing is addressing a file/resource with reference to the location of the file (web page) from which it is being called. This sort of addressing can be used only for resources located within the same web site.
The location of the image file can be described with respect to the location of the webpage (where the image file location is being written/included) if they are located on the same web site.
• Absolute Addressing
Absolute addressing is addressing a file/resource with its complete path starting from the root i.e. the web site name. This sort of addressing can be used anywhere. It can even be used in place of referential addresses.
This is generally resorted to where both the image file and the web page (where the image file location is being written/included) are not located within the same web site.
• Shortcut for Absolute Addressing
Where you intend to use absolute addressing even for files located within the same web site, you may cut short the address by using "/" (read root) in place of the part ending with the web site name.
Images can be either inline or floating. To position an image we can use the < img align = "(position)" > attribute or < img style = "float: (position)" style property.
The "align" attribute has two values for horizontal alignment (left, right) and three values for vertical alignment (top, bottom, middle). Only one of these can be used. The style property has two values for horizontal alignment (left, right)
• Character and Line Height
Each character can be assumed to be placed within a rectangular box and as such would have its own height. The height occupied by a line would be the height of the character with the maximum height.
• Inline Images
Including a vertical alignment option (top, middle, bottom) with the attribute would position the image inline with text. An inline image would be treated as just another character having the height and width as that of the image.
• Floating Images
Choosing a horizontal alignment option would float the image. When an image is floated, the text nearby would be wrapped to its sides depending on the alignment option chosen. The horizontal alignment can be set either using the values left/right for the "alignment" attribute or the same values for the "float" style property.
Border for a HTML element is a line drawn around it, on the four sides, identified as top, right, bottom and left. For those HTML elements which can have a border, we can make the browser display it by expressly specifying it.
For an image we make the browser display a border with specified thickness using the "border=__" attribute, the value to be used being the thickness of the border in pixels (say border="2")
The style property used for setting borders to HTML elements uses three parameters, border width (thickness), border type and border color to describe a border. Each of these characteristic may be defined separately as "border-width:_", "border-style:__" and "border_color:__" or combined into one as "border: width_value, style_value, color_value"
You will be able to define only the border thickness using the element attributes whereas using style properties you will be able to define the three border characteristics.
A border can be set distinctly for one or more sides of the image by describing them separately using the style properties border-top, border-bottom, border-left, border-right. Even while describing the borders separately, we may define the three border characteristics separately (Or) combine them.
Remember that the style properties have precedence over attributes. Where the same characteristic (say border thickness) is defined using both the element attribute as well as style properties, the style property definition holds.
The style property values for border types are :: (a) solid, (b) dotted, (c) dashed, (d) double, (e) inset and (f) outset.
• Invisible Border
There exists a border for every HTML element. Where a border is specified it is displayed and where it is not specified it is hidden/invisible. Even when specifying a border, it can be made invisible by choosing a thickness of zero (0). By choosing a color that would make the element border merge with the elements surrounding it or by choosing the page background color for the border, it may be made to look invisible.
All the colors that we see are obtained as a combination of red, green and blue the basic colors.
In web page designing, we come across a number of situations where we specify the color. Color can be specified in HTML in three different ways.
• Hexa decimal values [color:#0000ff]
The hexagecimal code should be preceded by a hash symbol. The first two digits represent red, second two green and the last two blue. Each digit is a hexadecimal value (0 to 9 and A to F thereon - a total of 16). 000000 represents black and FFFFFF represents white.
• RGB Notation [color: rgb(0, 0, 255)]
The color code in RGB notation should be placed within parentheses preceded by the word RGB. There are three values (ranging between 0 and 255) to be specified representing the red, green and blue basic colors respectively. (0,0,0) represents white and (255,255,255) represents black.
• HTML color names [color:blue].
There are 140 color names that are defined by the W3C (Word Wide Web Consortium) which the browsers can understand and interpret. You may use those names in place of the hexagecimal or RGB codes. [Eg: gold, silver, oldlace, wheat, papayawhip, lavender etc]
Both Color (American English) and Colour (British English) are correct spellings. However HTML recognises only color as the correct name.
Border which is a line drawn around the HTML element may or may not be visible. Space in relation to HTML elements can be created in two ways in relation to its border. Space within i.e. space between the border and the element which is called padding and space outside, i.e. space between the border and other elements touching it which is called margin.
Both padding and margin can be present on the four sides (top, right, bottom, right) of an image (or any HTML element which can have a border).
Margins for an image can be created using the "hspace = __" and "vspace = __" attributes as well as "margin:__" style property. Padding for images (HTML elements other than table) can be created using only the "padding:__" style property.
• Horizontal Spacing
Horizontal spacing is the space on the left and right sides of the HTML element. Horizontal spacing can be created
» By Creating Margins
The following options may be used to create horizontal margins
» By Creating Padding
The following options may be used to create horizontal padding
• Vertical Spacing
Vertical spacing is the spacing on the top and bottom of the HTML element. Vertical spacing can be created
» By Creating Margins
The following options may be used to create vertical margins
» By Creating Padding
The following options may be used to create vertical padding
Where style properties are used to set Margins and padding
Where the border is invisible, we may not be able to identify whether margins or padding is used for creating spaces. But where the border is in display, the margin space would be visible as space outside the border and the padding space as space inside the border.
|Author Credit : The Edifier||... Continued Page 18|