More:

Monday, 12 January 2015

HTML Tutorial – 6 (Images and Paragraphs in HTML)

HTML Tutorial – 6
(Images and Paragraphs in HTML)

Hello everyone. Hope you are in best of your health. Our HTML tutorials are going well, I am sure you have practiced about what you have learned so far because for a programmer practice is very very important. Practice makes a man perfect, it is true.
Till now we have learned how we can style text in HTML so we can now easily start to use text in many other tags like link names and image names and inserting other text information.
Today we are going to learn how to add a paragraph using <p> tag and how to insert an image into a webpage using <img> tag. So lets begin, <p> tag is used to insert a paragraph into a page simply. It goes like this, <p>”all the paragraph text goes here”</p> for example:-







As you can see text in both paragraphs are automatically separated and printed in two separate lines.



The other tag we are going to learn is <img>. This tag is used to insert an image in the page. This is a single tag means it has no closing tag. So all the stuff we have to do with the image is inside < > these arrow brackets, I mean the properties of the <img>  tag. Just give a space into <> these brackets after img and you will see a list of properties, one of them is src it means source. This property determines the address where the image is located in the hard drive. When you type src and press enter in Dreamweaver to browse the image simply or type <img src=”path of the image”> it will attach the image to the webpage. You can also use height, width and title property in img tag to define a specific size of the image and give it a name like:-



Output will be like this, note the test in the corner of the image, it is here because my mouse pointer was there when I captured this snapshot. Test and try other properties of the tag. Thanks for reading. 


Previous Tutorial                                                                                                                Next Tutorial

No comments:

Post a Comment