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

3d printing website or software written mainly in phython, 3D Printing webs...

3D Printing website as well as software written mainly in Phython and HTML5 We would like to appoint someone who is capable to bring the power of OctoPrint as well as botqueue t

Need help to add additional fields to a form wordpress, Need help to Add Ad...

Need help to Add Additional Fields to a Form wordpress I would like to add additional fields to an existing form. This person should have php and wordpress knowledge. I am utili

We need help for website design to html, We need help for Website design to...

We need help for Website design to HTML We are in search of an experienced HTML Developer with bootstrap and responsive skills. Job Description: We need to create HTML pag

I need help in buddypress project, I need help in Buddypress project I h...

I need help in Buddypress project I have a Buddypress site that I want some help with please. 1. The job needs that you know how to build a new Buddypress group component. Th

Project, how much does it cost per one project?

how much does it cost per one project?

Php being an open source is there any support to it, PHP being an open sour...

PHP being an open source is there any support available to it? PHP is an open source language, and it's been said that it has very less support online and offline. However PHP

Unordered lists, First one, we will create an unordered list. These lists a...

First one, we will create an unordered list. These lists are also called as bulleted lists. These lists are characterized through list items that do not have numbers. They are used

We need a website development help to build website, We need a Website Deve...

We need a Website Development help to build website Develop new website comprising fresh content. Job description- This will be a mainly static page development with not m

Develop and design a fully functioning website, Develop and design a fully ...

Develop and design a fully functioning website. The Company: We are a forward thinking, innovative and creative industrial design company. (not web design company!) We design

Selecting columns in mysql by by keying in a number, How do I select lets s...

How do I select lets say 2columns eg(Name and Payment plan)when I type in a a telephone number like 665528 to get the one row corresponding to the number I have typed?

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