Saturday, 12 August 2017

,

Beginner Guide: How To Insert Images In HTML - arcreationsweb


html image tag

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

how to open notepad in computer

you can open notepad in two ways start>type "notepad" > click open
press window button + R and type "notepad"> enter

STEP 2 : Write the Basic structure of the HTML

<html>
<title></title>
<head></head>
<body>
</body>
</html>

structure of html

STEP 3 : Enter the "TITLE" of the HTML document

write the title of the html document

STEP 4 : Enter the Head text of your HTML document

header of the image

STEP 5 : Here is Your Body of your HTML document.

body of HTML structure

STEP 6 : Insert <img src =""> tag below the <head> tag.


STEP 7 : Select the Image from your computer.

any image to insert in HTML

STEP 8 : Open the Properties of your image.

how to open the properties of an image

STEP 9 : Copy the Location of your image file

find the location of the image

STEP 10 : Paste the location address within the quote of <img src = "D:\AR Creations Web - Ashutosh - Rohit and Dipesh\images2">

copy the properties

STEP 11 : Check the type of file it may be - .png, .jpeg, .bmp, .jpg, .gif etc... Here the file is (.png)

how to open properties of an image

STEP 12 : Now put a right slash "\" and Write the name of image with extension.

how to insert image in the html

STEP 13 : Now save the file with the extension of .html or .htm

what is the extension of html



STEP 14 : Now open the saved file.

how to insert image in html

STEP 15 : Click Open

how to insert the image in html

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.

image in HTML


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)

how to change height and width of the iamge

STEP 18 : Now Save the Page by pressing ctrl+s and open the saved file again to see the result.

how to change image size in HTML?

How To Move The Image

STEP 19 : Use <Marquee> Tag Before <img src="">

how to use <marquee tag>

STEP 20 : Now Save the Page by pressing ctrl+s and open the saved file again to see the result.

how to move a image in html


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


how many types of alignments in html?

STEP 22 : Now Save the Page by pressing ctrl+s and open the saved file again to see the result.

image align left


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  

Share:

1 comment:

  1. Very good article consists of useful information explained in a simple way which helps me a lot.
    HTML5 and CSS3 with Bootstrap Online Training | HTML5 CSS3 Training

    ReplyDelete

JOIN OUR DISCUSSION CORNER...