HTML Images ~ HTML ELearnSite

HTML Images

This section will show how to add images to your pages.
We will start out with a presentation of the two main image types on WebPages: jpg and gif.

After that, we will proceed with various ways to insert and customize images, with a special focus on the different alignments you can choose.
The image tag is used to place an image on the web page. In its most simple form it looks like this:

Supported image format:------>>

1).jpg

2).png

3).svg

4).bmp

An image may have an intrinsic dimension, but not necessarily, depending of its type.
To link an image to another web page (or a larger version of the image), you simply nest the <img> tag inside an <a> tag.

Description

The HTML <img> Element (or HTML Image Element) represents an image of the document.
The HTML img tag is used for embedding images into an HTML document.
To use this tag, the image you specify in the src attribute needs to be available on a web server. This could be your own web server or another web server.
Images are a staple of any web designer, so it is very important that you understand how to use them properly. In order to place an image onto a website, one needs to know where the image file is located within the file tree of the web server -- the URL (Unified Resource Locator).
Use the <img /> tag to place an image on your webpage. Like the <br /> tag, <img /> tag does not require a formal ending tag. Instead, all we need to do to close this tag out with a slash (/) placed just inside the ending bracket (/>).
Image source URLs can be either local or global, meaning that the picture files you wish to display on your website can be either hosted locally on your machine (local) or hosted elsewhere on some other web site domain (global).

Local URLs are relative to the file path of the web page itself.
For example, if the picture file is placed inside the same directory as the web page, then the local URL for the image would simply be the name of the image, since it is residing in the same directory as the HTML page.

Use

Usage:-->>

Browsers do not always display the image referenced by the element.
This is the case for non-graphical browsers (including those used by people with vision impairments), or if the user chooses not to display images, or if the browser is unable to display the image because it is invalid or an unsupported type.
In these cases, the browser may replace the image with the text defined in this element's alt attribute.

Example

<!DOCTYPE html>

<html>

<body>

<h2>Norwegian Mountain Trip</h2>

</body>

</html>

Display

Norwegian Mountain Trip

Posted in: HTML

HTML ELearnSite