HTML Images
HTML Images are indeed needed or required for any web site.
Images help a website become more attractive for visitors.
Imagine a web page without even a single image would you still browse it? f course not.
To put an image on our website we simply need to use the <img /> element with an src attribute to define the URL or the location of an image.
The <img /> is an empty and inline element.
Attribute src
We use the src attribute to specify an image's URL or file path.
Example:
<!doctype html><html><head><title> HTML img Element </title></head><body><img src="example.jpg" /></body></html>
Output:
Attribute alt
Sometimes image may not load on the user's browser because of slow internet connection, slow server, image is deleted from directory or wrong URL value is specified in the src attribute
The alt attribute provides an alternate text for an image.
Example:
<!doctype html><html><head><title> HTML alt Element </title></head><body><img src="eeexample.jpg" alt="this image is corrupted"/></body></html>
💡On the example above the given URL of the image does not really exist.Therefore, the alternate text is shown instead.
Output:
Image Sizing (width & height)
To resize an image we just need to use the width attribute to change its width and the height attribute to change its height.
The value is typically in pixels.
Example:
<!doctype html><html><head><title> HTML width height Element </title></head><body><img src="example.jpg" width="500" height="400"/></body></html>
Output:
💡For following practices, we can use the a style attribute to resize an image with the properties width and height and value can be in pixel as well.
Example:
<!doctype html><html><head><title> style, width, height Element </title></head><body><img src="example.jpg" style="width: 400px; height: 400px;"/></body></html>
Output:
Floating Image (left or right)
We can float an image to the left or right side of a text.
To achieve that we need to use the style attribute.
With the float CSS property. And left or right value.
Here is lesson for HTML Styling.
Example:
<!doctype html><html><head><title> float Element </title></head><body><p><img src="star.svg" style="float: left;"/>The image is floated left.The image is floated left.The image is floated left.The image is floated left.</p><p><img src="star.svg" style="float: right;"/>The image is floated right.The image is floated right.The image is floated right.The image is floated right.</p></body></html>
Output:
Image as a Link
There are some situations that we need an image to act as a link.
To do that just enclose the image with an <a> element with its href attribute.
Example:
<!doctype html><html><head><title> Image as link </title></head><body><a href="http://www.example.com"><img src="example.jpg" /></a></body></html>
Output:
Image as link After clicking image
✔️On the examples given above the image used is in the same directory/folder as the HTML file.
Image in Another Folder
Usually, we keep all of our images in a sub-folder to keep our directory clean and well-organized.
To define an image from a folder look at the example given below:
Example:
<!doctype html><html><head><title> Image from Another Folder </title></head><body><img src="C:\Users\HP\Downloads\image.jpeg"/></body></html>
Output:
The value of the src attribute is called a File Path, here is a lesson for that.
Image From External Server
Sometime we need to put images from other web likes Facebook, Google or Imgur to our web site.
Here is how to do that:
Example:
<!doctype html><html><head><title> Image from External Server </title></head><body><img src="https://i.ibb.co/D5tnLmS/image.jpg"/></body></html>
Output:
📎Tip!
- You can use any type of image you want. For instance, if you want an animating image then use .gif .
- Do not put a lot of images in a webpage.Your page may load too slow and your visitors may leave your site and never comeback again!
HTML and Images in Your Phone Storage
If you save the example codes above anywhere in your Phone Storage the image will not show.
Why? Because the images are only stored in this app's directory and not in your Phone Storage.
Follow these steps to properly insert images to your web page when you're in your Phone Storage.
1.Open any File Manager.
2.Create a Folder named example.
3.Paste any image to that Folder. Remember the file name of the image.
4.Click the 'Try It Yourself' button below.
Replace the value of the src attribute with the file name of the image.
Save it as index.html to the menu on the upper-right corner of the editor.
Post a Comment