Working with images in html, PHP Web Programming

Assignment Help:

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.


Related Discussions:- Working with images in html

Magento community m2e pro integration with rekuten, Magento Community M2E P...

Magento Community M2E Pro integration with Rekuten, Ebay, Amazon We are seeking an experienced individual that will integrate our Magento (1.6.1.1) with other market places- Ama

I want somebody who has experience in cakephp to work, CakePHP, OAuth, Vide...

CakePHP, OAuth, Video APIs I want somebody who has experience in CakePHP to work on a project that requires OAuth integration with various sites and then post videos to these si

Seeking a rock star front end developer, We are a social technology establi...

We are a social technology establish led by two pioneers in the social technology business in Los Angeles. There are three developers presently working on our project on a stock an

We need an expert help in web app development, We need an expert help in We...

We need an expert help in Web App Development I am starting a fresh specific web development project that will not be based on a CMS. I want the application to be based onlin

I want a restful api integration to existing web pages, Restful API integra...

Restful API integration to existing web pages We want experienced web programmers to take a complicated set of API calls and integrate data into two demo applications. Should

We are seeking of joomla template conversion, We are seeking of Joomla Temp...

We are seeking of Joomla Template Conversion I need to convert the template into Joomla format. The deliverables here are- a) The ENTIRE template including all the pages w

Design a page in layout view, You will begin your first page whereas workin...

You will begin your first page whereas working in Dreamweaver's Layout view. You will lay out the page and afterward insert images & text. The page you developed in this section of

I need experienced developer to build an audio recorder, HTML 5 Audio Recor...

HTML 5 Audio Recorder (Hourly or Escrow) I am seeking a talented fully experienced developer to build an audio recorder in HTML5 (WebRTC style). The audio recorder must work in

Website development fo responsive site, Website Development We have a st...

Website Development We have a static website that we would willing to change to a responsive wordpress site. We would willing a quote for design of the mobile versions based

Hypertext transfer protocol, HTTP is a connectionless text depend protocol....

HTTP is a connectionless text depend protocol. Clients (web browsers) send requests to web servers for web elements like web pages and images. After the request is serviced through

Write Your Message!

Captcha
Free Assignment Quote

Assured A++ Grade

Get guaranteed satisfaction & time on delivery in every assignment order you paid with us! We ensure premium quality solution document along with free turntin report!

All rights reserved! Copyrights ©2019-2020 ExpertsMind IT Educational Pvt Ltd