HTML is a Hyper Text Markup Language which about we have discussed a lot before in my earlier posts. Today i am going to tell you - How you can insert images in your web page through HTML. The complete tutorial is given below step by step. Follow all the steps and get your image appear on your screen. I will also tell you how you can resize the images? How you can align them? and even how you can move them. So let's start our tutorial now.
Beginner Guide: How To Insert Images In HTML
Syntax - <img src="url" alt="some_text">
STEP 1 : Open a Text Editor in your computer i.e NOTEPAD
you can open notepad in two ways start>type "notepad" > click open
press window button + R and type "notepad"> enter
<html>
<title></title>
<head></head>
<body>
</body>
</html>
STEP 3 : Enter the "TITLE" of the HTML document
STEP 4 : Enter the Head text of your HTML document
STEP 5 : Here is Your Body of your HTML document.
STEP 6 : Insert <img src =""> tag below the <head> tag.
STEP 7 : Select the Image from your computer.
STEP 8 : Open the Properties of your image.
STEP 9 : Copy the Location of your image file
STEP 10 : Paste the location address within the quote of <img src = "D:\AR Creations Web - Ashutosh - Rohit and Dipesh\images2">
STEP 11 : Check the type of file it may be - .png, .jpeg, .bmp, .jpg, .gif etc... Here the file is (.png)
STEP 12 : Now put a right slash "\" and Write the name of image with extension.
STEP 13 : Now save the file with the extension of .html or .htm
STEP 14 : Now open the saved file.
STEP 15 : Click Open
STEP 16 See the result....
**The image will be shown in browser with it's original size, If you want to change the size Continue Reading.
How To Re-size The Image In HTML
STEP 17 : Use Height & Width attribute after closing quote
**Size must be in Pixels only(for exp-10px)
STEP 18 : Now Save the Page by pressing ctrl+s and open the saved file again to see the result.
How To Move The Image
STEP 19 : Use <Marquee> Tag Before <img src="">
STEP 20 : Now Save the Page by pressing ctrl+s and open the saved file again to see the result.
How To Align The Video
STEP 21 : Use "align" attribute.
syntax - <img src="" align ="">
There are 4 types of alignments of an image 1)Right 2)Left 3)Center 4)Justify
STEP 22 : Now Save the Page by pressing ctrl+s and open the saved file again to see the result.
To know more about image wait for our upcoming article on images. I hope now you are very clear about that - how you can insert images in your web page. If you have any doubts please let me know by dropping an email to us arcreationsweb@gmail.com or you can comment your queries here in comment box.
Thank you
Ashutosh Kumar
(Writee and editor)
arcreationsweb.com
Very good article consists of useful information explained in a simple way which helps me a lot.
ReplyDeleteHTML5 and CSS3 with Bootstrap Online Training | HTML5 CSS3 Training