Scribd
Upload
2 views

HTML

The document provides instructions on how to add images to an HTML page using the <img> tag, detailing the use of the 'src', 'alt', 'width', and 'height' attributes. It includes examples of HTML structure, headings, and tables, demonstrating various HTML elements. Additionally, it shows how to style images with CSS and provides links for further information on HTML image borders and related tags.

Uploaded by

Abhishek Jaat
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

HTML

The document provides instructions on how to add images to an HTML page using the <img> tag, detailing the use of the 'src', 'alt', 'width', and 'height' attributes. It includes examples of HTML structure, headings, and tables, demonstrating various HTML elements. Additionally, it shows how to style images with CSS and provides links for further information on HTML image borders and related tags.

Uploaded by

Abhishek Jaat
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

7) How to Add Images to your HTML page?

Here is Simple syntax for adding an image in your HTML page.

<img src="url">

The src is an attribute to which you need to pass the complete path of the image.

You can also add some other attributes:

alt – This attribute is to define an alternative name for the image.

What is the use of alt tag?

And there are many purposes for using it. This name will be shown to the user if the image is not able to
load properly (because of poor internet connection). It is also used by the search engine to identify the
image.

width and height – With these attributes, you can provide the dimensions of the image to display.
1 <imgsrc="example.jpg"alt="instance"width="500"height="333">
stance"width="500"height="333">

PS: The images displayed above in this post are the example of using the img HTML tag.

Other HTML tags you can use for Web development:


Program no 1 Page Structure

<html>
<head>
<link rel="stylesheet" type="text/css" href="/styles.css">
<title> Example is Body Section Elements </title>
</head>
<body>
<!-- Body Part -->
<p>This is Body Section </p>
<a href="html-basic.php">goto HTML Index Page </a>
</body>
</html>

Result:
This is Body Section
Program no 2 Headlines

<!DOCTYPE html>
<html>
<body>

<h1>This is heading 1</h1>


<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

</body>
</html>

Result:
Program no 3 Table

<!DOCTYPE html>
<html>
<body>

<table style="width:100%" border="1">


<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>

</body>
</html>
Program no 4
<!DOCTYPE html>

<title>My Example</title>

<style>

img {

border: 3px solid black;

</style>

<imgsrc="/pix/samples/15m.jpg" alt="Boat at Phi Phi, Thailand">

<hr>

<p>More info: <a href="/html/codes/html_image_borders.cfm">HTML Image Borders</a>, <a


href="/html/tags/html_img_tag.cfm"><code>img</code></a>, <a
href="/css/properties/css_border.cfm"><code>border</code></a>.</p>

Result:

You might also like