worldoftutorial

Top 5 HTML AND CSS Editor

2014-06-28T20:35:00.000-07:00

Hi friends

Today I come with new thing. People are taking keen interest in web designing. In the case when you write a long css and html you do lots of hard work but you made many mistake which are harmful for you so I bring some thing for you which can reduce you hard work, time and efforts and you can write clean and proper html and css. There are many html editors are available in the market with you can write the clean and proper html and css. Here I am going to describe some of the best html and css editor.

ADOBE DREAMWEAVER

Adobe dream weaver is the most popular web development software. It is very best software to edit the document. In this software you can edit html, css, JavaScript, php and many others. It is very powerful tool the mostly developer use the dreamweaver.

Coffee Cup.

It is the one of my best html and css editor I am using it to edit the html and css document and believe me it is very easy to use . You don’t need to learn eat you can use it very easily. You can manage project and mange your website through coffee cup.

Aptana studio

Aptana studio is interesting web development software you can manage you WebPages through it easily. It has colorful code and line numbering and quick button for browser.

NOTE PAD++

It is very simple best editor. It is the replacement of notepad it has many features such as syntax highlighting. Multi tab system and supported many languages. It is free you candownload it from here.

Context

Context editor is updates from notepad ++ . you can open many tabs at time and great syntax highlighted for many programming languages and supported many languages.

Conclusion

Now you can choose best editor which you can use easily. Please share our post with your friend and don't forget share our post with your friends.

How To Use CSS Position

2014-06-03T21:26:00.000-07:00

Welcome friends!

As you know in the previous we discussed about the float what is float? And how to use them and solve other problems related to the float. You can contort the layout by the float property but there is another important property which is called css position. In this tutorial we are going to explore css positioning. Css positioning is another important property to controlling the layout.

What is css positioning?

Css position property is used to control the flow of elements in the webpage or position the element on the webpage. With the help of position property you can position the element on the page where you want.

Static position

In css position static is the default value it is not affected by the left, right, top, and bottom.

NOTE

To set up the position you must define the position property .

Example without using static position:

.box1{
width:150px;
height:150px;
background-color:#0000A0;
}

.box2{
width:150px;
height:150px;
background-color:#FF0000;
}

.box3{
width:150px;
height:150px;
background-color:#00FF00;
}

Example with using static position:

.box1{
position:static;
right:20px;
width:150px;
height:150px;
background-color:#0000A0;

}
.box2{
position:static;
top:10px;
width:150px;
height:150px;
background-color:#FF0000;
}
.box3{
position:static;
left:100px;
width:150px;
height:150px;
background-color:#00FF00;
}

Now you can see there is no difference between using static position property or not and other thing is that it is not affected by the left, right, top and bottom.

RELATIVE POSITION

Css position relative behave like static position but it is affected by top, bottom, left and right but the static position is not affected by these properties.

EXAMPLE NO:1

.box1{
position:relative;
width:150px;
height:150px;
background-color:#0000A0;

}
.box2{
position:relative;
width:150px;
height:200px;
background-color:#FF0000;
}
.box3{
position:relative;
width:150px;
height:150px;
background-color:#00FF00;

}

In the above example you can see the relative position is behaving like static position.

EXAMPLE NO:2

.box1{
position:relative;
width:150px;
height:150px;
background-color:#0000A0;
}
.box2{
position:relative;
left:200px;
width:150px;
height:200px;
background-color:#FF0000;
}
.box3{
position:relative;
width:150px;
height:150px;
background-color:#00FF00;
}

In the above example you can see how the second box is affect by the adding of left position property.

NOTE

In the relative positioning all element affected by it so while using relative position be careful. Absolute property is very useful to avoid these problems.

Css Absolute Position

Css position absolute is the best way of positioning element. With the absolute position you can place the where you want it does not affect the other element on the page that’s why this property of position is very useful.

EXAMPLE

.box1{
position:absolute;
top:0px;
left:200px;
width:150px;
height:150px;
background-color:#0000A0;
}
.box2{
width:150px;
height:200px;
background-color:#FF0000;
}
.box3{
width:150px;
height:150px;
background-color:#00FF00;
}

In the above example you can observe that after adding the absolute position to the first box it is not affected other elements.

POSITION FIXED

Css position fixed is always stay at one place it moves with the scrolling of the page.

EXAMPLE

#topnav {
            background-color:#262626;
            width:100%;
            height:50px;
           position:fixed;
           top:0px;}

In the above screen shot you can see the navbar on the top which has fixed position.

Z-INDEX

This property very useful in some condition when you apply position to the element it overlap the other element to solve this problem we use z-index css property.

EXAMPLE before applying z-index

.box1{
position:absolute;
top:0px;
left:200px;
width:150px;
height:150px;
background-color:#0000A0;
}
.box2{
position:absolute;
left:210px;
top:20px;
width:150px;
height:200px;
background-color:#FF0000;
}
.box3{
width:150px;
height:150px;
background-color:#00FF00;
}

In the above example you can see how the boxes overlapping each other and now it is your wish which element you want in the front and the which one in the behind.

EXAMPLE after applying z-index

.box1{
position:absolute;
top:0px;
left:200px;
z-index:1;
width:150px;
height:150px;
background-color:#0000A0;

}
.box2{
position:absolute;
left:210px;
top:20px;
width:150px;
height:200px;
background-color:#FF0000;
}
.box3{
width:150px;
height:150px;
background-color:#00FF00;
}

CONCLUSION

After the understanding of positioning now you can design the beautiful layouts with the help of positioning.

Pleaser remember me in your prayer and share our post with your friends. Thanks!

CSS FLOAT PROPERTY

2014-05-25T00:00:00.000-07:00

Hi friends

As you know that our last post about css conflicts and today we are going to discuss about the float property which is used for designing layout. Before using float people try to create layout with html tables and frames but later the css property float which is now famous and use by designer to make the layout. With the help of float property you can easily design the layout but the problem is that if you don’t know it properly you have to face lots of problem. So today I am going to discuss the all those problem which relate to the floats.

WHAT IS THE FLOAT?

Float is the property of css which is used to positioning the element on the webpage. It has four values left, right, none and inherit.

Left to float the element on the left side.

Right to float the element on the right side.

None it is the default property. The element will not float.

Inherit the property inherited from the parent element.

ADVANTAGES OF FLOAT

The float property used to design layout.

It is used to the wrap text around the image.

It is used to positioning the element.

It is used to make columns.

EXAMPLE;

#para1{float:left;
width:200px;
margin:10px;
}#para2{float:left;
width:200px;
margin:10px;
}

CLEAR

It is the very helpful property to control the float. For example you make layout in which you add the float to the two element such as #content and #sidebar and footer move itself behind the these two elements. How to recover the float to its original position?

We use the clear property to recover the original position of elements.

For example

Example befor using clear property;

#container {
background-color:#C0C0C0;width:500px;
height:500px;
margin:10px;
float:left;
border:1px solid black;
}
#sidebar {
background-color:#C0C0C0;width:400px;
height;400px;
float:left;
margin:10px;
border: 1px solid black;
}
#footer {
background-color:#8E8E8E;
width:920px;
height:100px;
}

Example after using clear property;

#container {
background-color:#C0C0C0;width:500px;
height:500px;
margin:10px;
float:left;
border:1px solid black;
}
#sidebar {
background-color:#C0C0C0;width:400px;
height;400px;
float:left;
margin:10px;
border: 1px solid black;
}
#footer {
background-color:#8E8E8E;
width:920px;
height:100px;

clear:both;

}

COLLAPSING;

When an element contain in parent element than you add the float to the child element then container element collapse itself. How to solve them there are many ways to solve these problems. Which we discuss below?

FIRST METHOD: TO ADD THE TAG.

By this method you have to add the empty div tag or other tag you cam add but empty div tag is better. After adding this the parent element automatically expand.

SECOND METHOD: TO ADD OVERFLOW PROPERTY:

In this method you have to add overflow property to the parent element. If you set the auto or hidden value to it the parent element automatically expand and contain float element.

THIRF METHOD: TO USE CLEAR PROPERTY;

In the third method we use the pseudo selector (:after) to solve the problem. We apply class to the element and clear the float property and you can also add the id to the element.

.clear:after{
content: ".";
display: block; height: 0;
clear: both;
visibility: hidden;}

CONCLUSION;

You can style the layout with float property and now you can face all the problems related the float.

Please remember in your prayers and don’t forget to share our post with you friends.THANKS!

RESOLVING CSS CONFLICTS

2014-05-21T02:52:00.000-07:00

Hi friends!

Welcome back. Today I came with new topic which really help you a lot which about the css conflict. When you add style to the element but it does not apply on it why. You check it many times for bug but there is no bug in your code. There is concept of css which is conflict many people do not about these basic concepts. Today we talk about them and discuss how to use them.

CSS CONFLICTING;

Two are more styles are applied to the same element.

For example;

P{
Font-size:2em;
Color:red;
}
P{
Font-size:1.8em;
Color:blue;
}

Now question is that which style applied to the element the answer is simple last one will win. The css contain of three basic concepts such as specificity, inheritance and cascade.

CASCADE;

The cascade rules depend upon the order of your css. The last property applied to the element.

For example;

Body{
Font-family:Helvetica;
}
P{
Font-family:Georgia;
}

In the above case all the paragraph change with Georgia font and the Helvetica don’t work on the paragraph because the order of css.

SPECIFICITY;

Specificity defines the rules applied to the element.

If the style does not apply to the element the reason is specificity.

If two selectors are applied to the same element the selector with high specificity wins.

If two selectors have equal specificity the last one wins.

For increasing specifity you can use id selector but the inline style has more specificity than the id selector but for the reason we prefer to the id selector for more specificity.

How to count specificity?

The counting specificity is very easy. The each id is equal to the 100, the each attribute, class and pseudo-class is equal to the 10 and the each element is equal to the one .

For example;

P{
Font-size:1.5em;
Color:red;
}
.main p{
Font-size:2em;
Color:yellow;
}

In the above the example the paragraph with class will win because it has more specificity than the paragraph.

INHERITANCE;

For instance you add the properties to the body it inherited to all other properties which are present in the body such as heading tags, paragraph and other tags present in the body tag.

For example;

Body{
Font-family:Helvetica;
Font-size:1.5em;
}

The above properties applied to the all elements which are present in the body tag.

CONCLUSION;

Now you have understanding of the css conflict and how to use them and take fullest advantage of them. Remember in your prayers and don’t forget to share our post with your friends. THANKS

STYLING CSS LINK AND CSS LIST

2014-05-14T04:41:00.000-07:00

As we discussed before in html tutorial that the links are the soul of the webpage.

WebPages are containing of links without links webpage is nothing. Links allow us to jump from one page to another page or on same page. Some times we create very large document in order to help the visitor we make links on the same page. Today our topic styling links in css.

What is the links?

Links are the way by which you can jump from one page to another page.

STYLING LINKS

Link should be change by its surrounding such its background-color, color should be change from surrounding text.

There are four types of links property given below;

a:link unvisited link.

a:visited visited link

a:hover mouse over a link.

a:active user has clicked link.

Note

The sequence is important you have to write first link then visited then hover and finally active. You can add the text decoration, background color, text size, font style, font weight etc to the links.

a:link

this is unvisited link

a:link{

color:red;

}

a:visited

this is the visited link

a:visited{

color:green;

}

a:hover

when users take mouse over link.

a:hover{

color:blue;

}

a:active

when users clicked the link.

a:active{

color:yellow;

}

CSS STYLING LISTS.

Many times we need lists . in html we make lists in css we design them you can add numbering, dot, circle and also you can add images to the lists lets discusse about the styling lists. There are two types of lists in html unordered list or ordered lists.

UNORDERED LISTS;

Unordered lists contain of bullets.

ADDING CIRCLE;

ul {list-style-type:circle;}

ADDING SQUARE;

ul {list-style-type:square.}

How to add the image as list item marker?

Yes you can add the image to the list item marker.

ul{

list-style-type:url(bullet.png)

}

FINAL WORDS;

Friend now you can edit the list item according to your wish. Keep working and remember in your prayers and don’t forget to share our post with your friend.THANKS

CSS TEXT FORMATTING

2014-05-11T23:17:00.001-07:00

Hi friends Assalam-o-alaikum

Friends today we are going to discuss text formatting in css. How to make the text more readable, beautiful and attractive. For this you have to learn css selector before. In this tutorial we will discuss all the properties about text formatting such as font-family, font color, line-height, and many others. Let’s come to the topic.

Also visit the css selectors and text formatting in html.

Text formatting

With css we design the text beautifully. The different property we use to design the text such as text-decoration, font-family, color, text-align, font-size, font-weight, text-transformation, text-indention and many others. Which we discus below.

COLOR PROPERTY

Some times is important to add color to the text. You can write the value of color in hex, rgb and also red. we can add color to text like this,

p{color:red;}
h1 {color: green;}

TEXT-ALIGN

This property is used to define the position of text. As you want to add the text left, right or to the centre for this you can use this property.

FOR EXAMPLE

p{
text-align:right;}
h1 {
text-align:center;}
h2{
text-align: left;
}

TEXT-DECORATION

It is the property which is used to define the decoration of text or for removing the decoration.

FOR EXAMPLE;

For removing text decoration,

{ text-decoration:none;}

Adding decoration to text,

It has three more values overline, line-through, and underline;

p{
text-decoration:overline;
}
p{
text-decoration: line-through;
}
p{
text-decoration:underline;
}

Text-Transformation

This property use to change the text in lowercase, uppercase and capitalize the first letter of each word.

EXAMPLE;

p{
text-transform:uppercase;}
p{
text-transform:lowercase;}
p{
text-transform:capitalize;}

FONT-FAMILY

To define the font family means that you want to use different types of font. You use the property of font-family (Helvetica, Georgia, Verdana etc).

FOR EXAMPLE

p{
font-family: Helvetica;
}

TEXT-SIZE

Yes you can also set the size of text which you want. Size of text define in different units such as em, px , percentage, centimenter, millimeter and points. I prefer you to use the em unit because it change the size of text according to the device.

p{
Text-size:2.5em;
}

FONT-STYLE

This property is used to make text oblique, italic and also you can set normal the font.

FOR EXAMPLE;

p{
font-style:italic;
}

FONT WEIGHT;

It is the property which is used to make text bold or lighter and also set to the normal value to the font.

FOR EXAMPLE;

p{
font-weight:bold;
}

LINE-HEIGHT

To add the height between to lines we use the line-height property.

FOR EXAMPLE;

p{
line-height:200;
}

LETTER-SPACING

To add the spaces between the letters we use this property. To separate letters.

FOR EXAMPLE

p{
letter-spacing:5px;
}

WORD SPACING

To make the space between the words we use this property.

FOR EXAMPLE

p
{
word-spacing:3px;
}

FINAL WORDS

Now friends you can easily format the text beautiful make you design more efficient please remember in your prayers don’t forget to share our post with your friends keep visiting. THANKS!

HTML FORMS WITH DETAIL

2014-05-09T00:58:00.000-07:00

Html forms are used for website interaction. In this way the visitors can communicate with you. The html forms contain different elements such as first name, last name, password, confirm password, favorite lists, gender etc .html form start with <form> and end with </form>.

<input> this tag contain different attributes such as name, size, maxlength and type. It is used to make input field between form tags.

Type= It tells the browser that it is text field, password, submit field.

Name= Defines the name of field.

Size= This attribute used to define the size of input box.

Maxlength= This is used for maximum character in the input box.

FIRST NAME;

In text type you can add any which in text such as first name, last name etc.

FOR EXAMPLE

First name :< input type=”text” size=”15” maxlength=”30” name=”first name”>

Password;

In this type you can add the password field in your form which means if you type any thing in the password it appears in the shape of black dots.

FOR EXAMPLE;

First name :< input type=”password” size=”15” maxlength=”30” name=”first name”>

SUBMITTING DATA.

Now little bit your farm is complete but problem is that how we send data and where and adding submitting button.

There are two type of method of sending data.

get it sends the data showing its as url. This is easy to hack for hackers.

Post it send the data without showing its as url.

NOTE

get is on the default if you don’t tell the browser it automatically use get method.

How to define the method of post in form?

You can define with attribute of method just like that <form method=’post’>

Where to send data?

The two type of sending data one is you can send to the email system and this is very easy method. Second is the scripting you can use the script of php, perl, javascript etc.

You use action attribute in form tag.just like that.

EXAMPLE;

<form mehod=’post’ action=’mailto:mohammadwaqar401@gmail.com’>

SUBMIT BUTTON;

Adding submit button again we use input tag between form tags.

EXAMPLE;

<input type=’submit’ value=’submit’>

RADIO BUTTON

In the radio button you have only on choice. You give the two option choose your gender one option is male and other is female. If you click on the male it marked and when you click on female it marked the female but unmarked the male.

Forexample

Gender <input type='radio' name='gender' value='Male'>Male
<input type='radio' name='gender' value='Female'>Female

CHECK BOX;

In the check you have multiple choice. Just like that tick your favorites cities.

If there is newyork, London, sydny you can select all of these.

For example;

<input type='checkbox' name='cities' value='Newyorl'>New york <br />
<input type='checkbox' name='cities' value='Sydny'>Sydny <br />
<input type='checkbox' name='cities' value='London'>London <br />

DROPDOWN LISTS;

In this you can add list and you can select one item from the list. Drop down list contain two tags one is select and second is option. Option tag placed between select tag.

For example

<select name='birthyear'>
<option> 2001</option>
<option> 2002</option>
<option> 2003</option>
<option> 2004</option>
<option> 2005</option>
<option> 2006</option>
<option> 2007</option>
<option> 2008</option>
<option> 2009</option>
<option> 2010</option>
<option> 2011</option>
<option> 2012</option>
<option> 2013</option>
<option> 2014</option>
</select>

FINAL WORDS;

Now you know how to make form in html. It is very easy but it need some practice. Keep practicing remember in your prayer and don’t forget to share our post with your friend. Keep Visiting!

HTML TABLES

2014-05-06T22:23:00.000-07:00

Hi friends Assalam-o-alaikum

Friends as you know that in the previous we discussed about css selectors and how to use them and few of their types. Today I come with new topic which is all about the html table some people think that the html table. Believe on me it is not difficult as you think. It is very easy it needs only your concentration. Table is essential to learn it help in submitting your data in table and also helps in making layout. Yes you can design layout with it.

BASIC TABLE

The basic structure of table consists of some basic table tags. Table contain of rows and columns. The html table consists of some basic tag which is given below,

<table></table> this tag defines the table in webpage.

<tr></tr> the tr tag defines the table row in table.

<th></th> the th tag defines the heading in table.

<td></td>this tag defines the data in the table.

For example

<table>
<tr>
<td>name</td>
<td>category</td>
<td>price</td>
<tr>
<td>physics</td>
<td>science</td>
<td>200</td>
</tr>
</table>

ADDING TITLE HEADING AND BORDER.

As you need title and heading for your page as like you need title and heading and also border for html tables?

BORDER; you can syle tables with css and also with the the attributes.

For example:

<table border="5" >
<tr>
<th colspan="3">BOOK STORE</th>
</tr>
<tr>
<td>name</td>
<td>category</td>
<td>price</td>
</tr>
<tr>
<td>physics</td>
<td>science</td>
<td>200</td>
</tr>
</table>

SCREENSHOT

HEIGHT, BORDER COLOR, WIDTH.

We can set the height of table and width of the border and also add the color to make it beautiful.

FOR EXAMPLE

<table border="4" bordercolor="red" width="50%" height="40%">
<tr>
<th colspan="3">BOOK STORE</th>
</tr>
<tr>
<td>name</td>
<td>category</td>
<td>price</td>
</tr>
<tr>
<td>physics</td>
<td>science</td>
<td>200</td>
</tr>
<tr>
<th colspan="3">www.worldoftuorials9.blogspot.com</th>
</tr>
</table>

SCREEN SHOT

CELL SPACING AND CELLPADDING.

To add the padding and spacing between the tables we use these attributes cellpadding and cellspacing. Cell padding defines the padding between the cell and cellspacing defines space between the cells.

FOR EXAMPLE;

<table border="4" bordercolor="red" width="50%" height="40%" cellspacing="8" CELLPADDING="7">
<tr>
<th colspan="3">BOOK STORE</th>
</tr>
<tr>
<td>name</td>
<td>category</td>
<td>price</td>
</tr>
<tr>
<td>physics</td>
<td>science</td>
<td>200</td>
</tr>
<tr>
<th colspan="3">www.worldoftuorials9.blogspot.com</th>
</tr>
</table>

SCREEN SHOT

ADDING CSS TO TABLES

We can use css to add styling to the tables it makes it more beautiful and better looking. We are only describing it little bit.

FOR EXAMPLE

<tr>

<th colspan="3" style="background-color:#C11B17">BOOK STORE</th>

</tr>

<tr>

<td>category</td>

<td>price</td>

</tr>

<tr>

<td>physics</td>

<td>science</td>

</tr>

<tr>

<th colspan="3">www.worldoftuorials9.blogspot.com</th>

</tr>

</table>

FINAL WORLD

Friend now you can make the table easily first keeps practicing. Remember us in your prayer and share our post with your friends. Keep visiting.

CSS SELECTORS

2014-05-04T20:21:00.001-07:00

Hi friend, Assalam-o-alaikum.

As you know from few days we learn the html such as htmlbasic tags, html meta tags, text formatting in html. Today I am going to present tutorial on css selector. I don’t take your time much. lets start.

What is css selector?

Css selector contain of id and class with class and id you can specify any element on the page which you want to style.

Css selector is used to identify or find the html elements which are based on their id, attribute etc.

THE ELEMENT SELECTOR.

The element selector is the base on element name.

If you want to style paragraph use p tag identify the selector

For example you want to select the paragraph and want to change its background or font. What you will do? Here is how we can do this is very easy

P{
Background-color:violet red;
font-family:Verdana;
}

In the above the case it design the all paragraph on the page and also their font but you want to design particular paragraph on the how we will do this? This is easy we can do this with css selector id and class. You add class or id tag. Like this.

Html
<p id=”important”>this is the important paragraph on the page we want design different from other</p>

This is how we add id in html now we can indicate this paragraph particularly.

Css

#important{
Background-color:violet red;
font-family:Verdana;
}

What is id?

For id selector we use id attribute with in the html tag.

Id tag must be unique. It should be not repeated again and again

The id is unique and it is use only one time in the whole page.

The id can be identifying with the hash (#) character.

FOR Example

#paragraph1 {
Background-color:blue;
}

What is class?

For class selector we use class attribute with in the html tag.

The class can be used multiple times on the page. It can be repeated again and again.

The class is not unique it can be use many times on the same page.

The class selector can be identifying with the period (full stop).

NOTE

The same class can be use on multiple elements.

The multiple classes can be use on same elements.

For example.
.paragraph2{
background-color:green;
}

GROUPING SELECTOR.

The grouping selector is use when you want to apply same style to different elements. For this you can use group selector.

It reduces your effort to write same code again and again.

For example: if you want to change the font family of all headings.

h1,h2,h3,h4,h5,h6{
font-family:Gorgia;
}

FINAL WORDS.

In the above we mentioned the basic selector which commonly used by every one Inshallah in few days we will discuss on the advanced css selector but it is important that you have basic understanding of selector. Please keep visiting and share our post with your friends. Thanks!

TEXT FORMATTING IN HTML

2014-05-03T10:33:00.000-07:00

Hi friends, Assalam-o-alaikum as we learnt earlier the link tag and image tag now come to the text formatting in html. It is necessary to know because text formatting is main part without you can not manage your contact. Today I am going explain how make text italic bold underlined different forms of tag. These tag make your content readable and beautiful you can make it more beautiful to add css to webpage. This will be discussed in future how to make page more beautiful with css. Let’s come to the topic.

TEXT FORMATING.

HEADING.

As you know in every page first and important tag is heading tag. You can use various sizes of heading tag. Heading tag has six levels h1 to h6. The biggest heading h1 and smallest is h6.

For example

<h1>heading one</h1>
<h2>heading two</h2>
<h3>heading three</h3>
<h4>heading 4</h4>
<h5>heading five</h5>
<h6>heading six</h6>

PARAGRAPH.

The second most tag in the page is paragraph with this tag you show different paragraph. It leaves the blank line before and after the paragraph.

<p>this is paragraph tag<p>

Line break.

The <br /> tag we used to break line this is the example of an empty tag. This tag use to break line not to separate paragraph.

<hr>

<hr >tag used to separate the content in html page. It has no end tag in html but in xhtml its closing tag look like this <hr />.it is also an example of empty tag.

BOLD TEXT.

The text between the <b></b> the text displayed as bold.

For example;

<p>this the <b>bold</b> tag in paragraph</p>

ITALIC TEXT.

The text between the <i>italic</i> the text displayed as italic.

For example;

<p> this is the</i> italic</i> tag in paragraph</p>

UNDERLINED TEXT.

The text between the in tags<u>underlined</u>this text will displayed as underlined.

<p>this is the paragraph tag with explanation of <u>underlined</u> tag.

STRIKE-OUT

It puts the line through the text.

For example

<strike>This tag is strike</strike>

PERFORMATTED TEXT

The text between the tag it will be display as you write it in the text editor. You can add multiple spaces which browser neglect.

For example

<pre>this is the preformatted text</pre>

SUPERSCRIPT TEXT.

The <sup> tag defines the superscript text. The text appears half character above the baseline.

<p> this is the paragraph contains on <sup>script text</sup></p>

SUBSCRIPT TEXT.

The <sub> tag defines the subscript text. The text appears half character below the baseline.

<p>this is the paragraph contain on <sub> subscript text</sub></p>

SMALL TEXT

Instead of using font size we use small text tag. This tag make small text than the normal text.

<p>this is the paragraph tag with the <small>small tag</small><p>

LARGE TEXT.

For large text we simply use <big></big>tag.

<p> this is the paragraph tag with <big>large text</big></p>

FINAL WORDS.

In this tutorial you have learnt about the html text formatting. Now you have concept of text formatting. Please visit us regularly and don’t forget to share our post with your friends.

HTML LINK AND IMAGE TAG

2014-05-02T05:07:00.001-07:00

Hi friends. I hop you are all fine with the bless of Allah as you know that in previous tutorial we discussed about the meta tags in html. I think now every body knows about the meta tags of html and how these tags are important. Let’s come to the topic today we are going to discuss about the links in html. Links are the backbone of the html without link tag the webpage is nothing. Let’s start.

What is the link?

Links or hyperlink is a word, group of word, image on which we click to jump to another page.

When you take your cursor to the link it will be change into small hand.

Note.

Unvisited link underlined and has blue color.
Visited link underlined and has purple color.
Active link is underlined and red color.

LINK TAG.

Link tag can be written as;

<a href="index.html" target="_blank">HOME</a>

a; ( a shows the anchor which means link ) .

href; (hypertext reference this attribute shows the where is document located)

target; target attribute it is important you must know about this if you want to open the link in new window or tab it will help you . you use target attribute. ( _blank the value of attribute this value open the link in new window or tab.

NOTE

You can add various documents to the page with html link tag like html document, mp3 file, ms files and PDF etc.

Image and link tag contain attributes .

IMAGE TAG

In html we can easily add link to the image for this first we have take look to the html image tag then we can add the link to image.

Lets discuss about the image tag. Imag tag can be written as

<img src=”Pakistan.jpeg” title=”we proud on palkistan” alt=”pakistan nation” width=”30” height=”30”>

Img; this tag specify the image

Src; the attribute which is used to tell the location of image.

Extension; it is important to write the extension or formate of the image like jpeg, gif, png etc. without the extension it the image will not display.

alt; the alternate name for the image. If the image can not display for some reason it will helpful.

Title; The tile of the image what the tile you choose for image.

Width and height; you can set the width which you like as well as height.

LINK TO THE IMAGE

Link to the image it is easy you have to write the image tag between the link tag. Like this,

<a href=”url”><img src=”image.png”></a>

FINAL WORDS.

Friends now you have understanding of html links and the importance of the link and images. Remember in your prayers keep visiting and don’t forget to share our tutorial with your friends. Thanks!

META TAGS IN HTML

2014-05-01T00:35:00.001-07:00

Who does not want to top search engine every blogger has dream to top search engine ranking. There are many bloggers who doing lots of effort in order to get high traffic or top rank in search engine. The meta tags one of the way to top search engine ranking and for getting more traffic. The meta tags tell the search enige what your blog or website is about, to implement meta tags incorrectly it can be dangrous for your blog or website.
Also visit this article=HTML DOCUMENT TYPE DECLARATION

What are meta tags?

Html Meta tags lie between the opening and closing of head tag in html document.

The data in these tags not showed on browser.

The meta tags tell the browser and search engine what your site is about.

TITLE TAG.

Title tag is not meta tag .but it is important to write the title tag should not be long it contain some word like your page name as like index, profile etc. it is also written in head tag.

META DESCRIPTION.

As I mentioned before that the meta description tag tell the browser and search engine what your blog or websit is about. It is important to write good description for search engine which they can understand. It is also important to write meta description on every page but it should be different frome each other . Meta description should no longer 155 character even including spaces. It can be written as:

<meta name="description" content="description goes here">

META KEYWOEDS.

Meta keywords contain the words which familar with your blog or website. This tag also helps to get lot of traffic. The meta keywords tag should be contain on 20 words.

<meta name="keywords" content="keywords goes here">

ROBOTS META TAGS.

This tag is important and main tag. The robot meta tags specify the particular page that

Should be index to the search engine or not and the links on that page are followed by search engine or not. Meta tags can be written in four different methods given below.

<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">

In this method the search engine doesn't index your page and doesn't follow the links to the other pages.

<META NAME="ROBOTS" CONTENT="INDEX, NOFOLLOW">

In this method you requests to the search engine that index the page but don’t follow the links to other pages.

<META NAME="ROBOTS" CONTENT="NOINDEX, FOLLOW">

In this method the search engine doesn't index the page but follow the links to the other pages.

<META NAME="ROBOTS" CONTENT="INDEX, FOLLOW">

In this method the search engine index the page and also follow the links to the other pages.

CONCLUSION .

Now you have understanding of meta tags these tags helps a lot to get high page rank or lots of traffic.

Remember in your prayers and keep visiting and share the post with your friends.

HTML DOCUMENT TYPE DECLARATION

2014-04-29T18:10:00.000-07:00

Hi friends! As you now in the previous post we share the basic of html tags and i think you know something about html tags. Today we take step toward the html declaration don't worry i explain it briefly.

What is document type declaration?

· Doc type declaration is a kind of instruction to tell the web browser which version of html we are using.

· In html we use document type declaration refer to DTD (document type definition) because html based on SGML. The DTD indicate the rule of markup languages.

· With document type declaration browser understand how to show the content on webpage.

· Always try to use document type declaration and tell the browser how to show the content on webpage.

TYPES OF DECLARATION;

There are three types of declaration in html and xhtml.

1. Strict

2. Transitional

3. Frameset

DOCUMENT TYPE DECLARATION IN HTML(4.01)

STRICT

This type of declaration consists of html element and attributes, but does not include presentational or deprecated elements. Frameset not supported in this type of declaration.

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd"

TRANSITIONAL;

This type of declaration consists of html element and also including presentational or deprecated elements. Frameset not supported in this document type declaration.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

FRAMESET

This type of declaration consists of html element and attributes, including presentation and deprected elements. Framset is supported in this declaration.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

DOCUMENT TYPE DECLARATION IN XHTML (1.0)

STRICT

This type of declaration consists of html element and attributes, but does not include presentational or deprecated elements. Frameset not supported in this type of declaration.

It is important to write in well-formed xml.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

TRANSITIONAL;

This type of declaration consists of html element and also including presentational or deprecated elements. Frameset not supported in this document type declaration.

It is important to write in well-formed xml.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

FR AMESET

This type of declaration consists of html element and attributes, including presentation and deprecated elements. Frameset is supported in this declaration.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

FINAL WORDS
friend i think now you get it how the declaration and why the declaraton use in html document. please visit us regularly and share our post with your post with your friend and support us.

HTML BASIC TAGS

2014-04-23T19:52:00.002-07:00

In the last tutorial we learn basic definition of of html, tags, element and attributes.
Html is easy of all other language and today i come with the basic tag of html. It is said by mostly designer the html tags are easy any body can learn it in five minutes.

<html> </html>

Html tag tells the browser that it is an html document. All the html tag describe in the html tag. Each document have an opening tag and closing tag like that <html> </html>

<head>

It is the first tag which is written after the html opening tag <html>. This tag is containing on all information about head section. It is contain on title tag, Meta tags, cascading style sheet (css), JavaScript tags. All the script tag are written in head such as JavaScript, VBScript inside the document.

EXAMPLE

<head><title> this is my first page </title><meta name=’keyword’ content=”html, css, JavaScript” /> (this is a meta tag)<link rel=”stylesheet” type=”text/css” href=”tutorialworld.css”/><scrip type=’text/javascript’>document.write(“hello world”);</script></head>

<body>

Body is the most important tag which comes after the head tag. It contain of content tags such as hyperlinks, text, images, list, tables, form and frames etc. It is main and important section of page because all the thing which display on webpage written in this section.

EXAMPLE

<html><head><title>body tag</title></head><body><p>this is paragraph tag which indicate the paragraph in your webpage it leave a blank line before and after the paragraph.</p></body></html>

Paragraph TAG <p></p>

This tag defines the paragraph in webpage it leaves blank line before and after the paragraph.

EXAMPLE

<body><p>this is paragraph tag which indicate the paragraph in your webpage it leave a blank line before and after the paragraph. </p></body>

HEADING TAGS<h1></h1>

These tags indicate different heading it start from h1 to h6. h1 heading is the bid heading all of them and h6 is smallest.

EXAMPLE

<body><h1>HEADING </h1><h2>HEADING </h2><h3>HEADING </h3><h4>HEADING </h4><h5>HEADING </h5><h6>HEADING </h6></body>

IMAGE TAG <img>

This tag defines html image tage to show the image on webpage.

"src"(source) where is your file locate. It is important write the format image otherwise it will nor show the image.

EXAMPLE

<body><img src="image.gif" /></body>

LINK TAG

Link tag defines the link tag in webpage. It is very important tag because links are important to the webpage and without link tag the

Webpage is incomplet. Link tag is <a href=""></a> (a indicate anchor and href means hyper text reference) and the address of link written between inverted coma.

FOR EXAMPLE

<body><a href="www.worldoftutorial.blogspot.com">world of tutorial</a></body>

FINAL WORDS.

In this lesson you learned about basic tags of html and now you have understanding of basic tags. Please share our tutorial with your friends.

INTRODUCTION OF HTML

2014-04-15T20:49:00.000-07:00

INTRODUCTION TO HTML

Welcome to my blog world of tutorial here you find many tutorials which help you a lot.
Now come to the topic I am going to start our first topic about html which give you basic understanding of html.
Html is not programming language. it is markup language which is used to make web pages. Html stands for hyper text markup language.

Html history

In 1980, Tim berners-lee working as physicist at CERN (The European Organization for Nuclear Research). He thinks a way for scientist to share document over internet, communication via internet was limited to plain text by using technologies such as email system and FTP (File Transfer Protocol).

WHAT IS HTML?

Html is a markup language. it tells the browser how to display content on web pages such as (videos, images, words etc.). Html is a markup language. Markup language is a collection of markup tags. The tags describe content of document. Html document consist of tags and plain text.

WHAT IS TAGS?

A web browser reads the html document with help of html tags with the tags the browser understand that this is paragraph, video, images, etc. Html tags are in pairs. First tag of the pair is called opening tag and the second tag of the pair is called closing tag. Closing tag is written as first tag but with forward slash before the tag name.
The opening tag and closing tag is also called start tag and end tag.
EXAMPLE;
<h1> this is my first web page</h1>

ELEMENT

Element html tags are totally same thing both describe same thing html element consist of html tags and content.
Html also contains some empty content tags such as <br> (this tag is used break line).
NOTE;
In xhtml all tags must be closed in html right way of write tag is <br />
EXAMPLE
<p> this my first paragraph </p<
From the opening to closing tag is called element.

ATTRIBUTES

In html every element has attributes. Attributes tells the browser how to appear the element in web browser. Attributes written as name and there value. Value must be written in quote. No matter you use double quote or single quote.
EXAMPLE
<h1 align=”left”> this is our first web page</h1>

FINAL WORDS

NOw you have understanding of basic of html . our next topic will be about the basic of html. Please suport us and visit our blog regularly.
thanks

worldoftutorial

Top 5 HTML AND CSS Editor

ADOBE DREAMWEAVER

Coffee Cup.

Aptana studio

NOTE PAD++

Context

Conclusion

How To Use CSS Position

Static position

RELATIVE POSITION

Css Absolute Position

POSITION FIXED

Z-INDEX

CSS FLOAT PROPERTY

RESOLVING CSS CONFLICTS

CSS CONFLICTING;

CASCADE;

SPECIFICITY;

INHERITANCE;

STYLING CSS LINK AND CSS LIST

STYLING LINKS

CSS STYLING LISTS.

CSS TEXT FORMATTING

Text formatting

COLOR PROPERTY

TEXT-ALIGN

TEXT-DECORATION

Text-Transformation

FONT-FAMILY

TEXT-SIZE

FONT-STYLE

FONT WEIGHT;

LINE-HEIGHT

LETTER-SPACING

WORD SPACING

FINAL WORDS

HTML FORMS WITH DETAIL

FIRST NAME;

Password;

RADIO BUTTON

CHECK BOX;

DROPDOWN LISTS;

HTML TABLES

BASIC TABLE

ADDING TITLE HEADING AND BORDER.

HEIGHT, BORDER COLOR, WIDTH.

CELL SPACING AND CELLPADDING.

ADDING CSS TO TABLES

FINAL WORLD

CSS SELECTORS

What is css selector?

THE ELEMENT SELECTOR.

What is id?

What is class?

For example. .paragraph2{background-color:green;}

GROUPING SELECTOR.

TEXT FORMATTING IN HTML

TEXT FORMATING.

HEADING.

For example

PARAGRAPH.

Line break.

<hr>

BOLD TEXT.

For example;

ITALIC TEXT.

For example;

UNDERLINED TEXT.

STRIKE-OUT

For example

PERFORMATTED TEXT

For example

SUPERSCRIPT TEXT.

SUBSCRIPT TEXT.

SMALL TEXT

LARGE TEXT.

FINAL WORDS.

HTML LINK AND IMAGE TAG

What is the link?

For example.
.paragraph2{
background-color:green;
}