Working with images in html, PHP Web Programming

Now let us make our web pages more exciting through putting in images.

134_WORKING WITH IMAGES in Html.png

You indicate an image along with the <IMG> (image) tag. Previously in this unit, on a page displaying the images was described via the BACKGROUND attribute of the <BODY> tag that displays the image like the background image. Background images built the page heavy and therefore the page takes a significant amount of time to load. But the <IMG>tag can be utilized for displaying an image along with the needed height & width. Let us look at an example

<HTML>

<HEAD>

<TITLE>XYZ</TITLE>

</HEAD>

<BODY BGCOLOUR="#FFFFFF">

<IMG SRC="ima.jpg" WIDTH=130 HEIGHT=101 ALT = "IMAGE IS TURNED OFF" ALIGN = "BOTTOM" BORDER = 2> This text is placed at the middle of the image.                                                                                                                                                  

</BODY>

</HTML>

 

1415_WORKING WITH IMAGES in Html1.png

Figure: Displaying Images on a Web Page

Let us take a consideration at the syntax of the <IMG> tag:

<IMG SRC = "FILENAME.GIF" WIDTH = "value" HEIGHT = "value"  ALT = "alternate text" BORDER = "value" ALIGN = "value">

 a. SRC: This attribute denote the pathname to the source file that contains the image. The value in the above example, "image.gif", refers that the browser will look for the image named image.gif in the same folder (or directory) as the html document itself.

b. WIDTH: This is used for specifying the desired width of the image.

c. HEIGHT: This is used for specifying the desired height of the image.

d. BORDER: An important attribute of the IMG tag is BORDER. This attribute denoted the width of the border of the image. By default it is 0, i.e. there is no border. As shown in Figure the image "image.gif" has been given a border 2 pixel wide. The following code gives a wider border to the above image.

<BODY BGCOLOUR="#FFFFFF">

<IMG SRC="image.gif" WIDTH=130 HEIGHT=101 BORDER=10>

</BODY>

e.  ALT: Another IMG attribute that is important is ALT. ALT is sort of a substitute for the image that is displayed or used when the user is using a browser that does not display images. Someone may be using a text only browser, he might have image loading turned off for speed or he may be using a voice browser (a browser where the web page is read out). In those cases, that ALT attribute could be very important to your visitor as it could be used (given the proper text) to describe the image that is not on the screen.

Posted Date: 4/22/2013 3:40:12 AM | Location : United States







Related Discussions:- Working with images in html, Assignment Help, Ask Question on Working with images in html, Get Answer, Expert's Help, Working with images in html Discussions

Write discussion on Working with images in html
Your posts are moderated
Related Questions
specify a form field where the user can enter large amounts of text. In most respects, works as an field. It can contain a name and

We want a Wordpress Webmaster In order to find somebody good and reliable than can become our preferred webmaster in the future, we might want to test a few people. So, I would

One of the very useful things regarding Internet is that it let you almost immediately exchange of electronic message (e-mail) across the entire worlds. On the electronic frontier

want a Workflow Designer (HTML5) Project Description: I am seeking an HTML5 designer for a custom workflow tool. It should have drag and drop functionality. Saving it as XML

Display Ads as well as Native Ad Server and Advertiser and Publisher Tools This project has two tasks- a) Build an ad-serving solution as well as analytics dashboard for disp

The objective of the term project is to build a simple E-commerce website by integrating client and server scripting. The website you designed should be published online (student.c

Small php help, Need php help I already have some php files with working code I am seeking someone to modify to get desired results. I will be checking results simultaneously

Wordpress Website creation I have just finishing a photoshop design for a merely straight forward HTML website. It has 15 content pages with few photos and graphs. I want to

Define and implement a software system that lets an authorized reporter enters information about a (simulated) computer system services incident (kind of incident, date, time of da

We need assistance in Responsive Website Design and HTML We run an existing technology website as well as we now need someone to re-design it for us as well as write the respons