Introduction
HTML stands for Hyper Text Markup Language. HTML is not a programming language, it is a mark-up language. Using HTML to create a web page is very simple and easy. HTML was designed to display in a web browser, and HTML elements are the building blocks of a web page. HTML elements are represented by tags < >.
Requirements
- Operating System (any operating system)
- Text editor (Example: Notepad or any code editor)
- Browser (Example: google chrome)
The <img> tag
The image tag is used to insert an image. It contains only one attribute, and does not have a closing tag. The image URL can be defined by the src attribute.
The HTML image syntax,
<img src=”image.jpg”/>
Image location
You can take any image location for the src attribute, and for the image address, put in a double quotation (i.e. “tee.jpg”.) The image in the HTML folder was in ‘jpg’ format. The image extension is very important.
Example Code
- <html>
- <head>
- <title>Simple Web Page</title>
- </head>
- <body>
- <center>
- <h2 style="color: blue">
- <i>THIS IS MY FIRST WEB PAGE</i>
- </h2>
- <img src="nature.jpg"/>
- </center>
- </body>
- </html>
Image Resizing
The resize in a webpage is used to resize the image. Width and height are used for resizing attribute. The resize value is defined by pixel and percentage.
Example code
- <html>
- <head>
- <title>Simple Web Page</title>
- </head>
- <body>
- <centre>
- <h2 style="color: blue">
- <i>THIS IS MY FIRST WEB PAGE</i>
- </h2>
- <img src="nature.jpg" height="150px" width="150px" />
-
-
- <br>
- <img src="nature.jpg" height="50%" width="50%"/>
-
-
- </centre>
- </body>
- </html>
Image Border
A normal image has no borders. You can create a border using the border attribute within the image tag to create a border for an image.
Example Code
- <html>
- <head>
- <title>Simple Web Page</title>
- </head>
- <body>
- <centre>
- <h2 style="color: blue">
- <i>THIS IS MY FIRST WEB PAGE</i>
- </h2>
- <img src="nature.jpg" height="150px" width="150px" border="5px" />
- <br>
- <img src="nature.jpg" height="50%" width="50%" border="5%" />
- </centre>
- </body>
- </html>
Conclusion
In this blog, we learned how to display images in a webpage, as well as adjust location, image resizing, and image border. If you work this out in our practice, then it is simply HTML. The style in an image uses CSS. Next, I will write an article on CSS.