HTMLs are every where in the field of Web designing and Blogging. Also it has evolved much with time. Now in the age of HTML 4 designing has become smoother than ever. But still many users uses old HTML Tags which are deprecated now a days. Infact using old HTML tags can actually decrease the grade of your Website! So we should not use them and use HTML 4 instead.
In this section we shall analyze and learn two basic but important Tags of HTML 4 namely
- span element
- div element
We shall also include other useful HTML elements.
For the betterment of the posts we shall split the article into three sections.
- SPAN ELEMENT discussion
- DIV ELEMENT discussion
- Other useful elements discussion
You can access all the tutorials from Here
- HOW TO USE THESE HTML TAGS?
Well quite easy! Just go to Edit HTML mode and copy paste the codes given below with proper attributes
So now let us start with easier span element first.
1. SPAN element:
It is like the old <font> tag but with more customization and better editing ability. The default code of the span element is like this:
<span style=”color: HEXCODE; text-decoration: none; font-weight: bold; font-style: italic; font-size: 12px; font-family: Calibri; float: right;”>YOUR TEXT HERE</span>
Lets analyze the highlighted portions of the above code:
- style=” ” : In between the quoted section different style elements are defined. Read below to learn the style definitions.
- YOUR TEXT HERE: This will be the out put of the text. Means that HTML modifications will get applied over these texts
- Attibute Name: Attribute value: You should not change the Attribute name and work with the attribute values only. Here is the list of Attribute names and their respective values
- color: HEXCODE: Sets the color of the font. In place of HEXCODE you need to put Hex colour code which you can generate from here.
Example: color: #080915 - text-decoration: none : Decorates the text! The permissible values are none / underline / blink.
For example, text-decoration: underline text-decoration: blink. - font-weight: bold : Makes the font looking bold. Either keep this value or delete this as a whole to make fonts look normal
- font-style: italic : Makes the font style italics. Either keep this value or delete this as a whole to make fonts look normal
- font-size: 12px : Sets the size of the font. You can change the number and also can set the unit of font size like => “px” or “pt” or even “%”.
Example font-size: 12pt or font-size: 80% - font-family: Calibri : Set the family of font! The style will only be visible to users having that font installed.
So better you use default fonts like Comic Sans MS, Arial, Verdana etc. - float: right : Makes the text appear on right side. Permissible values are right and left
Here are some examples to clear up your confusions:
- Example: <span style=” text-decoration: none; font-weight: bold; font-style: italic; float:right;”> This will be the output </span>
- Example: <span style=” text-decoration: none;”> This will be the output </span>
Note that in Example 2 we have removed the italics and bold definitions! You can remove either of them also. Customize the way you like
Thats it for today! On the next thread we shall discuss on DIV element and after that other common elements
Please do comment how you liked this post and also what other discussion you want. For any help you can obviously ask me through comment section
