Inserting Image in HTML Page






Photo is an essential thing when you are to make a web page look beautiful. Images is not just for making website background, but for other purpose like; dynamic user profile picture, post content picture. The list is endless.

That’s why I always tell my readers that, learning how to add image to web page is important.
I’m really happy to tell you that today we are going to add image on html web page.







Basically, there are three method for adding image/photo to html page. We’ll cover these easy three steps in this guide.

In one of our past guides, we discuss on how to style html page. We learnt three ways, which are “inline styling” “eternal styling” and “external styling”. Same thing apply to adding image on html page.


What is HREF in coding?


Method 1:

This method is very simple. We’ll make div element and add image as the background-image for the div. This background will only cover the shape of the div. In other words, it will only take the place the div occupy.








See code example below!

<div><img style="border-radius:10px;" src="home.jpg" alt="" width="100px" height="300px" /></div>

The above code makes the image cover 100px width and 300px height. The more you increase the width and height, the more the image will increase.

The code below just add the image on the web page without using the div element.

<img style="border-radius:10px;" src="home.jpg" alt="" width="100px" height="300px" />


Attributes explanation:

1. Src (Is the source where the image is located).

2. Alt (Is the alternate of the image. For example, if the image fail to load or show on the web page, the text you enter into the alt will show).

3. width (The width is the length of the image).

4. Weight (The weight is the height of the image).
 


Method 2:

Guys this method, we’ll add the image in the head section using eternal css styling.
Just as the above example code, we’re still going to use the div element but going to put the image through eternal styling method.



See code example below!

<!DOCTYPE html>
<html>
<head>
<title>Adding image to html page</title>
<style>
.AddImage
{
width:100px;
height:300px;
Background-image: (home.jpg);
}
</style>
</head>
<body>
<div class=’AddImage’></div>
</body>
</html>

I decided to write down the entire code to make you understand the process.

First, I make the div element, gave it class name (AddImage), then style the class in the page head section.

How to build basic PHP refer system from scratch

Method 3:

Now this is the last method we’re going to deal with in this guide. Just as the external styling sheet, we will make two files, one is homepage.html and the other is stylesheet.css.

To get more understanding about this method, you need to check how to link external styling.

See example code for stylesheet.css file!

.AddImage
{
width:100px;
height:300px;
Background-image: (home.jpg);
}
</style>



Save the above code as stylesheet.css


 Web design guide for beginners
Make sure both homepage.html and stylesheet.css are located the same folder

See the example code for homepage.html file!

<!DOCTYPE html>
<html>
<head>
<title>Adding image to html page</title>
<link ref=’stylesheet’ type=’text/css’ href=’stylesheet.css’ />
</head>
<body>
<div class=’AddImage’></div>
</body>
</html>



Now the new thing here is the css external file linking code. Below the attributes are explained:

1.     Ref (This is the reference file which is stylesheet).

2.     Type (This specify the type of file which is text/css).

3.     Href (Hypertext Reference, which is referencing to the css external file).

So these are the easy steps to add image/photo to html pages.

Feel free to ask questions base on things you are not getting right, and share to others.

Comments

Post a Comment

Popular posts from this blog

How to Delete Record From Table Using PHP MySQL

Image
Allowing users to deactivate/delete their account, to delete post/article and even friend and unfriend system however require the PHP MYSQL delete query if you’re dealing with PHP MYSQL database. To delete post, user account all require this same delete query. So in this tutorial I’ll be showing you how to delete post from table using MySQL delete query. some useful tutorials: Building JavaScript WYSIWYG Text Editor From Scratch How to Make Facebook Kind of Like Button Using PHP Programming Language How to Get Value from URL Using PHP Programming Language Reading on I hope you already have your database, table created and some pretty records inserted in it then next is for us to get our hands dirty with the coding process. Everything is going to be put in same web page. So I have a DATABASE name -> delete and a TABLE name -> record. My table has three rows: post_id, post_title and post_content. post_id   
Read more

Guide to add blog URL to Google search console

Image
 In one of my recent blog posts, I explained how to submit your blog for AdSense approval and things you should do first before applying. Now, in this post, I want to teach you how to add your blog url to Google search console. maybe, you might ask why this is important. Calm down, I will explain why you need to add you blog to Google search console. For you to get better traffic result in blogging, your blog need to rank high in search engines. And Google is the world's number #1 search engine. So making your blog to show on search engines will fetch you a lot organic traffic. Now you see why you should consider adding your blog url to Google search console? This is exactly what I'm going to teach you on this post. mind you, I'm making this post for Blogspot users. So first, go to your blogger dashboard and click to open the menu tab, scroll down a bit and click settings. When the settings menu come up, scroll down and click Google search console. Now when the Google searc
Read more

Best steps to master JavaScript programming language

Image
To build web app, JavaScript is not exceptional because of its ability to manipulate the browser environment. Beyond client side scripting, JavaScript libraries enable us to interact with server side, exchanging data with php . This tutorial is not about JavaScript libraries, this tutorial is to give you steps that will enable you understand and master the language itself. Many are battling with JavaScript without knowing the real course, what would this course may be? This is what I am going to tell you here. Don’t say JavaScript is hard because of the way you start learning. If you start in the right direction you’ll get it right. To understand JavaScript we must know how the language works, then how can we know how the language work is another question on its own. For web app, after learning html and css they usually tell us to learn JavaScript before learning php, isn’t it? The pattern in which the language report error is another annoying thing, compared to tha
Read more