SIMPLE STEPS TO CREATE WEBSITE: Html Images

Showing posts with label Html Images. Show all posts

Tuesday, January 1, 2019

HTML Image Tags

HTML Image Tags Description:-

sk.

<img> :- Defines an image.
<map> :- Defines an image-map.
<area> :- Defines a clickable area inside an image-map.
<picture> :- Defines a container for multiple image resources.

A floating image:-

<html>
<body>

<h2>Floating Images</h2>
<p><strong>Float the image to the right:</strong></p>

<p>
<img src="sad.gif" alt="Sad face" style="float:right;width:45px;height:45px;">
A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.
</p>

<p><strong>Float the image to the left:</strong></p>
<p>
<img src="sad.gif" alt="Sad face" style="float:left;width:45px;height:45px;">
A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.
</p>

</body>
</html>

OUTPUT:-

Use the CSS float property to let the image float to the right or to the left of a text.

An image map with clickable regions

An image map with clickable regions:-

<html>
<body>

<h2>Image Maps</h2>
<p>Click on the sun or on one of the planets to watch it closer:</p>

<img src="planets.gif" alt="Planets" usemap="#planetmap" style="width:375px;height:375px;">

<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

</body>
</html>

OUTPUT:-

The <map> tag defines an image-map. An image-map is an image with clickable areas.
The name attribute of the <map> tag is associated with the <img>'s usemap attribute and creates a relationship between the image and the map.
The <map> element contains a number of <area> tags, that define the clickable areas in the image-map.

A moving image

A moving image:-

<html>
<body>

<h2>Animated Images</h2>
<p>The GIF standard allows moving images.</p>

<img src="program.gif" alt="Computer" style="width:38px;height:38px;">

</body>
</html>

OUTPUT:-

Using an image as a link

Using an image as a link:-

<html>
<body>

<h2>Image as a Link</h2>
<p>The image is a link. You can click on it.</p>

<a href="default.asp">
<img src="angel.gif" alt="HTML working" style="width:38px;height:38px;border:0;">
</a>

<p>Add "border:0;" to prevent IE9 (and earlier) from displaying a border around the image.</p>

</body>
</html>

OUTPUT:-

To use an image as a link, put the <img> tag inside the <a> tag.

An image on another server

An image on another server:-

<html>
<body>

<h2>Images on Another Server</h2>

<img src="https://www.Tecko_hub.com/images/Tecko_hub.jpg" alt="Tecko_hub.com" style="width:104px;height:142px;">

</body>
</html>

OUTPUT:-

Some web sites store their images on image servers.
you can access images from any web address in the world.

An image with a broken link

An image with a broken link:-

<html>
<body>

<p>If a browser cannot find an image, it will display the alternate text:</p>

<img src="wrongname.gif" alt="car Icon" style="width:150px;height:150px;">

</body>
</html>

OUTPUT:-

An image in another folder

An image in another folder:-

<html>
<body>

<h2>Images in Another Folder</h2>
<p>It is common to store images in a sub-folder. You must then include the folder name in the src attribute:</p>

<img src="/images/car.gif" alt="car Icon" style="width:150px;height:150px;">

</body>
</html>

OUTPUT:-

If not specified, the browser expects to find the image in the same folder as the web page.
It is common to store images in a sub-folder. You must then include the folder name in the src attribute.

Monday, December 31, 2018

An image height and width using both

An image height and width using both:-

<html>
<head>
<style>
/* This stylesheet sets the width of all images to 100%: */
img {
width: 100%;
}
</style>
</head>
<body>

<h2>Styling Images</h2>
<p>The image below has the width attribute set to 150 pixels, but the stylesheet overrides it, and sets the width to 100%.</p>
<img src="GUN.gif" alt="GUN AK47" width="150" height="150">

<p>The image below uses the style attribute, where the width is set to 150 pixels which overrides the stylesheet:</p>
<img src="GUN.gif" alt="GUN AK47" style="width:150px;height:150px;">

</body>
</html>

OUTPUT:-

An image height and width using CSS

An image height and width using CSS:-

<html>
<body>

<h2>Image Size</h2>

<p>Use the style attribute to specify the width and height of an image:</p>
<img src="img_Car.jpg" alt="Car on road" style="width:350px;height:450px;">

</body>
</html>

OUTPUT:-

An image height and width.

An image height and width using attributes:-

<html>
<body>

<h2>Image Size</h2>

<p>we specify the width and height of an image with the width and height attributes:</p>

<img src="img_car.jpg" alt="Car on road" width="350" height="450">

</body>
</html>

OUTPUT:-

You can use the STYLE attribute to specify the width and height of an image.
Alternatively, you can use the width and height attributes.
The width and height attributes always defines the width and height of the image in pixels.
The width, height, and STYLE attributes are valid in HTML5.
we suggest using the STYLE attribute. It prevents styles sheets from changing the size of images.

An image

An image:-

<html>
<body>

<h2>MANALI</h2>
<img src="pic_mul.jpg" alt="Manali Trip" style="width:100%">

</body>
</html>

OUTPUT:-

Images can improve the design and the appearance of a web page.
In HTML, images are defined with the <img> tag.
The <img> tag is empty, it contains attributes only, and does not have a closing tag.
The src attribute specifies the URL (web address) of the image.

SIMPLE STEPS TO CREATE WEBSITE

Tuesday, January 1, 2019

HTML Image Tags

A floating image

An image map with clickable regions

A moving image

Using an image as a link

An image on another server

An image with a broken link

An image in another folder

Monday, December 31, 2018

An image height and width using both

An image height and width using CSS

An image height and width.

An image

Tuesday, December 25, 2018

Internal Javascripts