CSS Selectors

Hi friend, Assalam-o-alaikum.

As you know from few days we learn the html such as html basic tags, html meta tags, text formatting in html, html tables and html forms. 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!

Read More...

How To Make HTML Forms

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>.

Also Read This: HTML Tables With Detail.

Also Read This: Text Formatting.

<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.

For example

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 />

DROP DOWN 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!

Read More...

HTML Tables With Detail

Hi friends Assalam-o-alaikum

Friends as you know that in the previous we discussed about text formatting. 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.worldoftuorial9.blogspot.com</th>
</tr>
</table>

SCREEN SHOT 

CELL SPACING AND CELLPADDING.

To add the padding and spacing between the tables we use these attributes cell padding and cell spacing  Cell padding defines the padding between the cell and cell spacing 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.worldoftuorial9.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

<table border="5" style="background-color:#F62817;border:1px dotted black;width:80%;border-collapse:collapse;">>

<tr>

    <th colspan="3" style="background-color:#C11B17">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.worldoftuorial9.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.

Read More...

Text Formatting In HTML

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.
Also read this: HTML image tag and link tag.

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 ^{script text}</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 _{subscript text}</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.

Read More...

HTML Image Tag And Html Link Tag

Hi friends.  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. 

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.

HTML LINK TAG;

Html 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 .

HTML 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. Image tag can be written as;

<img src=”Pakistan.jpeg” title=”we proud on palkistan” alt=”pakistannation” 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!

Read More...

Meta Tags In Html

Who does not want to top search engine every blogger have 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 engine what your blog or website is about, to implement meta tags incorrectly it can be dangerous for your blog or website.
Also read this: Html document type declaration.
Also read this: Basic tags of html.

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 website 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 KEYWORDS.

Meta keywords contain the words which  familiar 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.

Read More...

Html Document Type Declaration

Hi friends welcome back after the basic of html tags i  am going to discuss some important thing ( Doctype declaration) i think it is essential for every one let's explain the document type declaration.

Also read: Introduction to html.
Also read: HTML basic tags.

What is document type declaration?

1.  Document type declaration is kind of instruction to tell the browser which version of html and xhtml we are using.
2. In html document we use document type declaration refer to DTD ( Document Type Definition) because html is based on SGML. The DTD indicate the rule of markup languages.
3. With document type declaration understand how to show the content on webpage.
4. Always use the document type declaration in this way the browser show your content properly on the webpage.

Types of document type declaration;

There are three types of document type declaration of html as well as xhtml.

1. Strict.
2. Transitiona.l
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"> 

Conclusion;
Now you know about the document type declaration and always try to use document type declaration.
Please remember us in your prayers and don't forget to share our post with your friends.THANKS! 

Read More...