Previously we have discussed over the two most important namely span and div elements of HTML. If we have a good enough grip on them then we can design almost anything possible under HTML. I hope you have already enjoyed the two previous posts on this tutorial so lets have a quick look on these following useful miscellaneous HTML elements and their properties.
3. img element:
This is used to embed images on screen. Take a look at the image below
<img src=”YOUR IMAGE URL” height=”Image height” width=”Image width” alt=”Alternative text” float=”left“/>
- YOUR IMAGE URL :Replace this with the direct link of your image
- Image height / Image width :Set the height and width of the image. Permissible units are pixels and %-age.
Like width=”80%” height=”240px”- If you want the image to appear at its normal height and width just delete these attributes.
For ex: <img src=”URL”/> - If you want the image to stretch fix the screen then set height and width to be 100%
For example <img src=”YOUR IMAGE URL” height=”100%” width=”100%”/>
- If you want the image to appear at its normal height and width just delete these attributes.
- Alternative text :This is the alternate text which shall be shown to the browser where image is disabled.
For example alt=”My image” - float=”left” :Permissible values are right and left to make the float on respective side
You can learn more about img elements here @ w3schools
4. p {Paragraph} element:
As the name suggests it is used to define new paragraphs. Take a look at the lines below
Paragraph 1
Paragraph 2
Paragraph 3
This is the basic p element template used
<p style=”text-align: center; color: HEXCODE;”>YOUR TEXT</p>
- text-align: center :aligns the text. As usual the permissible values are center, left and right
- color: HEXCODE :You have to place the Hex colour code which you can get from here
For example: color: #33CC00 - YOUR TEXT :The HTML styles are applied over this text
The p element is most effectively used to WRAP a span element. For example
Learn more about the Paragraph element here
5. textarea Element:
Well this is not so important but still have a look below
Here is the basic code used for this:
<textarea readonly=”readonly” cols=”25” rows=”10“>YOUR TEXT</textarea>
- readonly=”readonly” :If this is present then the text box will not be editable, like second box. If absent then it will be editable.
For ex: <textarea cols=”25” rows=”10“>YOUR TEXT</textarea> - cols/rows :The corresponding numbers set the height and width of the text box. Play with the values to make a textarea of your requirement
- YOUR TEXT :This text will be wrapped inside the text box
To learn more about textarea head on to this thread on tip-for-new-blogger blog
6. hr {horizontal line} Element:
Hi how are you
Did you noticed the line
. Well I hope so! Read on please
It can get effective while separating sections from each other especially on long posts. Here is the basic code for this
<hr width=“80%” color=”HEXCODE“/>
- width=“80%” :Sets the width of the horizontal line.
- You can set percentage for fluid width.
- Or you can also use pixel unit for fixed width.
For example width=200px
- color=”HEXCODE” :Obviously you need to set the Hex color code which you can generate from here
7. br {Line BRake} element:
The simplest HTML code but useful indeed. Simply insert <br/> where ever you want [Yes where ever] to get a line break there.
Alternately you can also press shift+Enter while editing under COMPOSE mode [of default blogger editor] to get a line break there
That’s it! Remember that you need to put all the codes under Edit HTML mode to work
Do tell us how you liked our posts and also if you are having any problem then we shall be glad to help you!
