php-mysql tutorial

Designed By NISHANT GUPTA

  • Home
  • PHP
  • HTML
  • CSS
  • JavaScript
  • JQuery
  • Contact-us
  • Learn HTML

    • Introduction of HTML
    • Image Handle in HTML
    • List Handling in HTML
    • Font Handling in HTML
    • Table Handling in HTML
    • Form Handling in HTML
  • Learn CSS

    • Introduction of CSS
    • Styling Background in CSS
    • Styling Text in CSS
    • Styling Font in CSS
    • Styling Link in CSS
    • Styling List in CSS
    • Styling Table in CSS
    • Styling Div in CSS
    • Styling Span in CSS
    • Positioning in CSS
    • Display in CSS
  • Learn JavaScript

    • Introduction of JavaScript
    • Data Type in JavaScript
    • Variable in JavaScript
    • Oprator in JavaScript
    • Cond. Statement in JavaScript
    • Loop in JavaScript
    • Array in JavaScript
    • Function in JavaScript
    • Date in JavaScript
    • String in JavaScript
    • DOM in JavaScript
    • Event Handling in JavaScript
    • Form Handling in JavaScript
  • Learn PHP-MYSQL

    • Introduction of PHP
    • Decision Control in PHP
    • Loop in PHP
    • Array in PHP
    • Function in PHP
    • Form Handling in PHP
    • File Inclusion in PHP

Image Handling in HTML

How To Display Images?
  1. To insert an image we use the <img> tag
  2. General Syntax

    <img src=“path to the image”>

For Example

<html>
<head>
<title>Image Demo 1</title>
<body>
This is first line

<img src="../images/puzzled.jpg">

This is second line
</body>
</html>

How browser loads images?

  1. It is very important to understand that images are not technically "part" of the web page file.
  2. They are separate files which are inserted into the page when it is viewed by a browser. So a simple web page with one image is actually two files - the HTML file and the image file.
  3. When the HTML file is displayed in a browser, it requests the image file and places it on the page where the tag appears.
Attributes Of <img> Tag

1.src

2.width

3.height

4.alt

5.title

6.align

7.border

Resizing The Image
The size attributes define the width and height of the image. They look like this:

<img src="image.jpg" width="200" height="150">

If the size attributes are set to different values than the original image size, the browser will resize the image to the specified size (this doesn't affect the image file itself, just the way it's displayed in the page).

For Example

<html>
<head>
<title>Image Demo 1</title>
<body>
This is first line

<img src="../images/puzzled.jpg" width="100" height="100">

This is second line
</body>
</html>

Advertisements

 

©  2014 All Rights Reserved  •  Design by >Nishant Gupta.

Privacy Policy • Terms of Use