HTML Images
images, html, html images, dataidea, data science, web development, website
Images
HTML Images are indeed needed or required for any website.
Images help a web site become more attractive for visitors.
Imagine a web page without even a single image, would you still browse it? Of course not.
To put an image on our web site 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
<img src="example.jpg">Attribute alt
Sometimes images 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 alternative text for an image.
Example
<img src="dataidea_logo.jpg" alt="DATAIDEA LOGO"/>Note!
On the example above, the given URL of the image does not really exist. Therefore the alternate text is shown instead.
Image Sizing (width and height)
To resize an image we just to use the width attribute to change its width and the height attribute to change its height.
The value is typically in pixels.
Example:
<img src="profile.jpg" width="350" height="400" />Note!
For following best practices, we can use the style attribute to resize an image with the properties width and height and the value can be in pixels as well.
Example:
<img src="profile.jpg" style="width:350px; height:400px" />Note!
As you can see the result is the same as using width and height attributes but the advantage of using the style attribute is that their width and height will not be overwritten by the style sheets.
Floating Image (left of right)
We can float an image to right or left side of a text.
To achieve this, we need to use the style attribute.
With the float CSS property. And the left or right value.
Example:
<p>
<img src="images/star.png" style="float: left; width: 50px; height: 50px;"> This image is floated left. This image is floated left.
</p>
<p>
<img src="images/star.png" style="float: right; width: 50px; height: 50px;"> This image is floated right. This image is floated right.
</p>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
<a href="https://blog.dataidea.org">
<img src="blog_image.jpg" />
</a>Note!
On the examples give above, the image used is the directory/folder as the HTML file.
Image from External Server
Sometimes we need to put images from other web sites like Facebook, Google or Imgur to our web site.
Here is how to do that.
Example
<img src="https://www.example.com/image.png">Tips!
- You can use any type of image you want. For instance, if you want an animating image, you can use
.gif. - Do not put a lot of images in a web page. Your page may load too slow and your visitors may leave your site and never combe back again!
To be among the first to hear about future updates of the course materials, simply enter your email below, follow us on (formally Twitter), or subscribe to our YouTube channel.