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: <img src="http://photos1.blogger.com/blogger/6726/689/320/17.1.jpg"> 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"> img tag with many attributes defined. The information relating to the name and location of the image file from the value of the "src" (can be read source) attribute <img src = "__" > , the information relating to the dimensions of the image from the values of height and width attributes or within the style properties with the same name <img height="300px" style="width:250px">. Where the height and width are defined, the browser would reserve that much amount of space within the web page to fill the image in. If the image dimensions are not indicated then the browser would display a small square box as a place holder for the image till the image is fetched and filled in the place. Subsequently the browser would carry on with analysing the rest of the HTML code after the <img> tag. At the same time, it would also make a request to the server having the image to send it the image file (just like the request made for the HTML file). Height and width information is needed by the browser as it needs to know the dimension of the area within which the image is to be displayed. If the height and width are not defined within the tag, the browser would collect this information from the image file by contacting the server where the image file is located. To ensure that the browser does not waste time for an extra request for width and height information it would be appropriate to include this information within the tag. As it receives the content relating to the image file, it would start displaying the image within the space it reserved for the image. If the image file is large you would be able to notice the gradual filling up of the image space.

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">

Image Size

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 <img height="....px" > attribute or <img style="...; height:...px; ..." > property . • Image Width To define the width, we can use <img width="....px" > attribute or <img style="...; width:...px; ..." > property . • 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. Shrunk Actual Size Stretched w=50px; h=50px; w=91px; h=161px; w=150px; h=250px; 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. images/logo.jpg images/ ← indicates a folder by name images located within the same folder where the file in which this address is present is located ../6726/689/320/17.1.jpg ../6726 ← indicates a folder by name 6726 located one level above the folder where the file in which this address is present is located • 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. http://www.theedifier.com/images/6726/689/320/17.1.jpg An absolute address has the web site name included in it whereas a referential address doesn't. • 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/6726/689/320/17.1.jpg This is the same as the above addressing provided you are using this in a web page within the web site theedifier.com

Image Alignment

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. Choosing Bottom would align the bottom of the image with the base line relating to the text. Top would align the top of the image with the top line relating to the text. Middle would align the middle of the image with the vertical mid point relating to the text. • 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. Choosing Left would align the image to the left and would make the text wrap to its right. Right would align the image to the right and would make the text wrap to its left.

Image Border

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" Eg: To set a blue dashed border of 2px thickness around the image or any HTML element that can have a border, you may use Style="border-width:2px; border-style:dashed; border-color:blue" (Or) Style="border:2px dashed blue" 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. left » 4px double green right » 4px solid tomato » 5px inset gray » 4px outset snow; » top:4px dotted navy; » right:4px solid sienna 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. Eg: To set a solid border of 5px thickness at the top of the image or any HTML element that can have a border, you may use Style="border-top-width:5px; border-top-style:solid; border-top-color:sienna" (Or) Style="border-top:5px solid sienna" 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.

Colors

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] • Color/Colour Both Color (American English) and Colour (British English) are correct spellings. However HTML recognises only color as the correct name.

Spacing

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 attributes "hspace=12px" [margin on both left and right sides]. style properties "margin-left:5px" "margin-right:9px" "margin:10px 5px" [margin of 10px at the top and bottom and 5px on the left and right sides] » By Creating Padding The following options may be used to create horizontal padding style properties "padding-left:4px" "padding-right:3px" "padding:8px 6px" [padding of 8px at the top and bottom and 6px on the left and right sides] • 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 attributes "vspace=10px" [margin of 10 px at the top and bottom]. style properties "margin-top:4px" "margin-bottom:5px" "margin:4px 12px" [margin of 4px at the top and bottom and 12px on the left and right sides] » By Creating Padding The following options may be used to create vertical padding style properties "padding-top:6px" "padding-bottom:5px" "padding:4px 9px" [padding of 4px at the top and bottom and 9px on the left and right sides] Where style properties are used to set Margins and padding If two values are used, the first value relates to the top and bottom and the second value to the left and right. If four values are used, they pertain to the top, right, bottom and left respectively. ["margin: 5px 10px 15px 12px"] 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