Image Handling using HTML

Last Updated on December 7, 2017 by Memorila

A website without images is dull and will only come live when images are added to it. In this tutorial, we will discuss Image Handling using HTML, while we be discussing Image Handling using PHP in the next tutorial.

THE BASICS

What is HTML

Wikipedia.org defines HTML thus: “HyperText Markup Language, commonly referred to as HTML, is the standard markup language used to create web pages. Web browsers can read HTML files and render them into visible or audible web pages.”

From the beginning, websites were designed solely with HTML. Gradually, CSS (Cascading Style Sheets) were added. Then we had Javascript, phython, PHP, Ruby on Rails, and so on.

 

What is PHP?

PHP on the other hand “is a server-side scripting language designed for web development but also used as a general-purpose programming language,” Wikipedia.org says.

As the definition states, PHP is used to program a website directly on the server.

 

HTML, PHP AND IMAGES

As the above definitions state, HTML programming works directly on the browser side while PHP deals with servers. So, if we are dealing with images using HTML, the images are rendered on the users’ browsers directly. But on the other side (PHP), the images are maneuvered at the servers-end before being rendered to the browser for users to view.

 

Rendering Images by HTML

Rendering images with HTML is not difficult. We use <img src=”path”> tag, where path is the absolute or relative path of the image file. The <img> tag has no ending tag. It is one of the stand-alone tags of HTML. See the example below:

<h2>Image handling using HTML</h2>
<img src=”logo.png”>
The above HTML will result in the following output:

Here the src attribute takes the relative path of the image file. It could also take the full absolute path of the image file. The resultant code with the same output would have been:

<h2>Web page with an Image</h2>
<img src=”https://www.memorila.com/wp-content/uploads/2015/09/image-handling-using-html1.jpg”>

By default the image appears aligned to the left. If we want to see it in the center, we could place <center> tag around the <img> tag, as under:

<h2>Image handling using HTML</h2>
<center>
<img src=”logo.png”>
</center>

There are numerous tweaks and tricks you can do to an image using HTML. But since this is just an introduction, we will stop here. But if you will need an extensive discussion on handling images with HTML or you have alternative means or believed that the information relayed here is insufficient or incorrect, please leave a comment below.

Next we will discuss Image Handling using PHP>>>