In the previous article, we learned about the basic structure of HTML and created our first webpage. Let us continue our basic HTML lessons in our mission to create an HTML website.
All websites on the web are rendered in HTML, irrespective of the technology or language used to create the website. Even when a website is created using PHP or ASP server languages, the output is always HTML-based webpages. HTML is the language that web browsers such as Mozilla Firefox and Internet Explorer understand.
In a webpage, you have various elements such as paragraphs, images, hyperlinks, lists and quotes. Let us look at the HTML tags used to create the most common elements in webpages.
Paragraphs: We have already seen how to all paragraphs are enclosed within <p>…</p>.
Adding Images in HTML: <img/>
How to add images in a HTML page? For adding images in a webpage, the <img/> code should be used.
In the introductory article, we got to know that all HTML tags are opened and closed, such as <p>….</p>. However, some HTML tags do not have any separate closing tags. They exist as single tags and not in pairs.
The <img/> tag is one of such tags. Note that the first tag also includes the “/” indicating the end of the tag.
Each image tag includes image source URL, alternate text to be shown when image is not available and the title tag for providing information about the image when a user moves the cursor on it.
Attributes of <img> tag
- src (for image source URL)
- alt (for alternate text)
- title (for title diplayed on mouse hover)
- width (defines the width in which it should be displayed)
- height (defines the height in which it should be displayed)
Look at example code to see how the image source URL is defined with the “src” attribute, the allernate text using the “alt” attribute and the image title with the “title” attribute.
<img title="Holy cow" alt="Holy Cow Alternate Text" src="http://mywebsiteurl.com/image.jpg" />
The image source URL in the above example is an absolute URL, which define the exact path of the website and the image. We can also have the image source defined as a relative path, which means relative to the location of the HTML file in which the code exists.
Let us take an image with the “jpg” extension and rename it as “image.jpg”. Now, save the image in the same folder where our previous HTML file index.html is saved.
Now, open the index.html file in a text editor and modify the code as follow to include the image. Save the file and open it in a web browser. Do you see the image?
<html> <head> <title>My First Webpage</title> </head> <body> <p>Holy Cow! This is my first webpage. It doesn't have any style, but I will soon make it look good too.</p> <img src="image.jpg" alt="Holy Cow" title="Holy cow!" /> </body> </html>
In the image HTML tag, you can do away with the alternate text and title if you are feeling lazy. The following code will also show you the same result, though without the alternate text and title.
<html> <head> <title>My First Webpage</title> </head> <body> <p>Holy Cow! This is my first webpage. It doesn't have any style, but I will soon make it look good too.</p> <img src="image.jpg"/> </body> </html>
Do we always need to save the image in the same folder as the HTML file referencing it? No. You can save the image anywhere, in a sub-folder in the main folder, on another web server/website or just anywhere. You just need to make sure that you reference the source URL correctly.
Let us now create an images folder in our main website folder and name it “images”. Now, move the “image.jpg” image file to the images folder. Open the inedx.html file (or refresh the page if it is already open). You will see that the image is now missing.
Why is the image missing? Right, the webpage is trying to look for the image in the same folder as the index.html file, but it doesn’t exist there anymore. Let us fix the code to reflect the correct image destination. We will also alter the code to resize the image to our desired size.
<html> <head> <title>My First Webpage</title> </head> <body> <p>Holy Cow! This is my first webpage. It doesn't have any style, but I will soon make it look good too.</p> <img src="image.jpg" alt="Holy Cow" title="Holy cow!" width="200px" height="175px"/> </body> </html>
Do we always have to use JPEG/JPG images? What if you have your images as .GIF or .PNG? You are not limited to using JPG image file in webpages. You can use other image formats as well. you just need to take care that the image URL defines the image name and destination properly.
<img src="images/image.png"/> <img src="images/image.gif"/>
That’s all that you need to know about adding images in HTML webpages.
So far we have created a basic HTML webpage and also added an image in it. Let us take a break and get back with our HTML learning in the next article. See you later!