All Code Tips ~ Code Tutorial of C, Web, PHP, CodeIgniter, SQL, Tricks N Tips: WebDevelopment

Showing posts with label WebDevelopment. Show all posts

Saturday 10 May 2014

Populate Select Box / Drop Down Dynamically From Database

Health Product Benefits HTML , php , WebDevelopment No comments

How to fill select box dynamically from database table. Here is a tutorial of how to fill up HTML drop down menu dynamically from MySQL database table.

Fill or Populate Drop Down or Select Box Dynamically Using Database

Fill Select Box / Drop Down Dynamically

HTML List Example

Health Product Benefits HTML , WebDevelopment 1 comment

In HTML, there are two most commonly used list tags <ol> - ordered list and <ul> - unordered list. <ol> - ordered list displays list with decimal numbers or roman numbers or alphabets. <ul> - unordered list displays list with bullet or circle or square symbol.

HTML List Examples

HTML Ordered List Example

Health Product Benefits HTML , WebDevelopment No comments

Ordered list contains order of decimal numbers, roman numbers or alphabet characters. To create ordered list <ol> tag used. Inside <ol> tag <li> - list item tag is used to create list item.

HTML - OL - Ordered List Example

Unordered List Example

Health Product Benefits HTML , WebDevelopment No comments

Unordered list creates list with symbols like disc/bullet, circle or square. To create unordered list <ul> tag is used. Create list item using <li> tag. In <ul> tag type attribute is used to create symbol like disc , circle or square with list item. If you not specify type attribute then by default is disc/bullet symbol.

HTML - UL - Unordered List Example

Description List Example

Health Product Benefits HTML , WebDevelopment No comments

With description list, we have to use three HTML tags named : <dl> - description list , <dt> - name of description list and <dd> - description of name.

HTML DL-Description List Example

HTML Heading Tags

Health Product Benefits HTML , WebDevelopment No comments

In HTML, <h1> to <h6> tags are used for HTML heading. <h1> tag displays text bigger compare to <h2> and <h2> tag displays text bigger compare to <h3> and so on.

HTML Heading Tags

Hack - New Programming Language By Facebook

Health Product Benefits Facebook , Hack , HHVM , php , WebDevelopment No comments

Facebook just released new programming language named 'Hack'. Hack is a programming language for HHVM (Hip Hop Virtual Machine) that interoperates seamlessly with PHP (Hypertext Preprocessor).

Hack - Programming Language By Facebook

Types of CSS

Health Product Benefits CSS , WebDevelopment No comments

Hello friends, here is a tutorial of types of CSS. CSS stands for Cascading Style Sheet. CSS is used in web development for to style webpage. Using CSS, you can change font-size, font-family, text color, background color, etc.

Types of Cascading Style Sheet

There are 3 (three) types of Cascading Style Sheet. There are few advantages and disadvantages of these different types of style sheets.

Following are the list of different types of style sheets:

Inline Style Sheet
Internal Style Sheet
External Style Sheet

Let's understand each style sheet with example codes:

1. Inline Style Sheet

Inline style sheet is embedded to individual elements of HTML.

To give inline style sheet to particular HTML element then use 'style' attribute of any HTML element.

If you give same style to another HTML element, then style code is repeated. It is better to not write too much inline style sheet.

Inline style sheet is useful when you want to override a style sheet.

Example:

OUTPUT:

This is div tag

2. Internal Style Sheet

Internal style sheet is also known as embedded style sheet.

This internal style sheet is written inside <head> tag of HTML.

To write internal style sheet inside <head> tag, you have to use <style> tag of HTML.

Syntax:

Scope of this style sheet is within the page. If you want to use this style sheet in another page then you have to write again this internal style sheet in that page.

Example:

<html>
<head>
   <style type="text/css">
     div
     {
       background-color:yellow;
       color:red;
     }
   </style>
</head>
<body>
   <div>
     This is div tag
   </div>
</body>
</html>

OUTPUT:

This is div tag

3. External Style Sheet

This type of style sheet is written in separate '.css' file and linked to the webpage.

This type of style sheet reduces redundant code of style sheet.

Because of separate external '.css' file, you can link it into any number of pages, in short reuse the style.

I highly recommended, to use external style sheet.

There is nothing new to external style sheet creation, just create separate '.css' file like below:

Example:

mystyle.css

div
{
background-color:cyan;
color:blue;
}

After creating 'mystyle.css' file then create HTML file named 'mypage.html' and embed this external style sheet file using HTML <link> tag as illustrated below:

mypage.html

OUTPUT:

This is div tag

NOTE: These two files 'mystyle.css' and 'mypage.html' must be in same directory/folder.

HTML Image Tag Example

Health Product Benefits HTML , WebDevelopment No comments

Hello friends, this tutorial is about HTML <img> (image) tag. To display/show image in the webpage then we have to use <img> tag of HTML. Here you can find all required attributes of <img> tag and some tips for image optimization.

HTML Image Tag Example

Syntax:

"src" and "alt" attributes are important in image tag.

There are following important attributes list of image tag:

src
alt
height
width

To Read Form Tag. Click Here

To Read Table Tag. Click Here

src attribute:

Src stands for Source and contains value of image path.

For example, if your webpage is saved in some "xyz" directory/folder and image is also in same folder then you have to write following code to display image. Here "allcodetips.jpg" is a image file name, your image file name can be different.

Example:

If your webpage is saved in "xyz/" directory and image is stored in "xyz/img/" directory then you have to use following code:

Example:

alt attribute:

Alt attribute is second most useful attribute. Alt attribute contains text message and this text message is displayed when image is not display. In short when image is not possible to display at that time alt attribute's value is displayed.

Second use of alt attribute is SEO (Search Engine Optimization) because Search Engine crawler does not crawl images, so crawler crawls src and alt attributes' value.

So always use alt attribute for better Search Engine Optimization.

Example:

height attribute:

Height attribute specifies height of image. You can provide height value like 100, 250, 500, etc as your requirement.

Example:

width attribute:

Width attribute specifies width of image. You can provide percent value to the width attribute like width="100%". You can also provide pixel value to the width attribute.

Example:

Conclusion:

HTML image tag contains many other attributes, but above listed attributes are most common. You can use events in image tag using onmouseover, onclick, onmouseout, etc.

If you find any difficulty then comment below.

How To Create Form In HTML

Health Product Benefits HTML , WebDevelopment No comments

Hello friends here is a descriptive tutorial about form creation in HTML. To create form in HTML <form> tag is used. Forms are useful in creation of student registration, employee registration, login, etc.

Create HTML Form

How To Create Drop Down Menu In HTML

Health Product Benefits HTML , WebDevelopment No comments

Here is a tutorial of how to create drop down menu in HTML (HyperText Markup Language). To create drop down menu you have to use two HTML tags that are <select> tag and <option> tag.

HTML Drop Down Menu

<select> tag is parent tag of <option> tag. Options can be specified using <option> tag. This drop down menu is used in city, country, etc list.

Read How To Create Textarea In HTML
Read How To Create Button In HTML
Read How To Create Radio Button In HTML
Read How To Create Checkbox In HTML
Read How To Create Table In HTML
Read How To Create Text and Password Fields In HTML

Let's first understand <select> tag then <option> tag.

<select> tag

<select> tag is parent tag for <option> tag. To create drop down menu, you have to first write <select> tag.

<select> tag has following useful attributes:

multiple
name
disabled

multiple attribute:

Multiple attribute is used to make drop down menu as multiple items can be selected.

For example


<form>
 <select multiple="multiple">
  <option>United States</option>
  <option>United Kingdom</option>
  <option>India</option>
    </select>
</form>

name attribute:

This attribute is available in all HTML elements and it is just name of drop down menu.

For example


<form>
 <select name="country">
  <option>United States</option>
  <option>United Kingdom</option>
  <option>India</option>
    </select>
</form>

disabled attribute:

Disabled attribute is used to make drop down disabled. We can not interact with disabled drop down menu.

For example


<form>
 <select disabled="disabled">
  <option>United States</option>
  <option>United Kingdom</option>
  <option>India</option>
    </select>
</form>

<option> tag

<option> tag is used to create options for drop down menu.

<option> tag contains two important attributes listed below:

selected
value

selected attribute:

This attribute is used to select particular item/option from drop down menu.

For example


<form>
 <select>
  <option>United States</option>
  <option selected="selected" >United Kingdom</option>
  <option>India</option>
    </select>
</form>

value attribute:

Value attribute is important for drop down menu. This value is passed to actioned page when form is submitted.

For example


<form>
 <select>
  <option value="US" >United States</option>
  <option value="UK" >United Kingdom</option>
  <option value="IN" >India</option>
    </select>
</form>

HTML Drop Down Menu Example:


<form>
 <select name="country">
  <option value="US">United States</option>
  <option selected="selected" value="UK">United Kingdom</option>
  <option value="IN">India</option>
 </select>
</form>

OUTPUT:

How To Create Textarea In HTML Form

Health Product Benefits HTML , WebDevelopment No comments

This post discusses about how to create textarea in HTML form. <textarea> tag can be written inside the <form> tag and it is used for to get large text like address, resume, etc.

HTML textarea Example

Read How To Create Button In HTML
Read How To Create Radio Button In HTML
Read How To Create Checkbox In HTML
Read How To Create Table In HTML
Read How To Create Text and Password Fields In HTML

Syntax of textarea:


<form>
 <textarea></textarea>
</form>

<textarea> tag has following most common used attributes:

cols
dir
disabled
name
readonly
rows
tabindex

cols attribute:

This attribute is used to give number of columns to textarea. This attribute takes numeric value. cols is one of the important attribute of textarea tag.

For example:


<form>
 <textarea cols="50">
  This is textarea
 </textarea>
</form>

dir attribute:

dir attribute contains two values:

ltr (left to right)
rtl (right to left)

If you use "ltr" value then text is displayed as left alignment and if you use "rtl" value then text is displayed as right alignment.

For example:


<form>
 <textarea dir="rtl">
  This is textarea
 </textarea>
</form>

disabled attribute:

If textarea has disabled attribute then you can not interact with textarea.

For example:


<form>
 <textarea disabled="disabled">
  This is textarea
 </textarea>
</form>

name attribute:

This attribute is common attribute for all HTML elements. This attribute specifies name of textarea.

For example:


<form>
 <textarea name="txtarea">
  This is textarea
 </textarea>
</form>

readonly attribute:

This attribute makes textarea as readonly that means you can not type anything inside textarea but you can select text and copy it.

For example:


<form>
 <textarea readonly="readonly">
  This is textarea
 </textarea>
</form>

rows attribute:

This attribute is important attribute of textarea. This attribute makes number of rows to textarea.

For example:


<form>
 <textarea rows="3">
  This is textarea
 </textarea>
</form>

tabindex attribute:

This attribute specifies tab order of an element when you use tab key for navigation.

For example:


<form>
 <textarea tabindex="1">
  This is textarea
 </textarea>
</form>

HTML Textarea Example:


<form>
 Address:<br />
 <textarea cols="40" dir="ltr" rows="3" tabindex="1">
  Type Your Address
 </textarea>
</form>

OUTPUT:

How To Create Button In HTML

Health Product Benefits HTML , WebDevelopment No comments

This post is about how to create button in HTML. There are many different methods of creating button. Some examples are given below but we talk only about <input type="button" />, <input type="submit" /> and <input type="reset" />

HTML Button Example

Read How To Create Radio Button In HTML
Read How To Create Checkbox In HTML
Read How To Create Table In HTML
Read How To Create Text and Password Fields In HTML

Using <input> tag example:


<form>
 <input type="button" />
</form>

Using <button> tag example:


<form>
 <button type="button" /> Click Me </button>
</form>

There are many attributes but this tutorial focuses only most common used attributes.

Let's understand following buttons:

<input type="button" />
<input type="submit" />
<input type="reset" />

1. <input type="button" /> (Simple Button)

Syntax of button:


<form>
 <input type="button" />
</form>

type="button" creates simple clickable button. This is simple button, to make any action then you have to use events of button. There are following some events available in button tag:

onblur
onclick
ondblclick
onfocus
onmouseover, etc

Above listed events contain javascript code or function call. Let's see one example of click event:


<form>
 <input type="button" onclick="my_method()" />
</form>

my_method() is javascript method.

Following are the most common attributes of <input type="button" />:

name
tabindex
value

Let's understand each attribute.

name attribute:

This attribute is available in all HTML elements. This is just name of button.

For example:


<form>
 <input type="button" name="btn_save" />
</form>

tabindex attribute:

Specifies the tab order of an element when you use tab key for navigation.

For example:


<form>
 <input type="button" tabindex="2" />
 <input type="button" tabindex="1" />
</form>

value attribute:

Value attribute is used to display text on the button. If you not provide this attribute then button contains empty text. Use this attribute to set value like "Save", "Submit", "Update", etc.

For example:


<form>
 <input type="button" value="Save" />
</form>

2. <input type="submit" /> (Submit Button)

Syntax of Submit button:


<form action="page2.php">
 <input type="submit" />
</form>

Submit button is used to submit form data to actioned page (here is page2.php). You can get form's data in page2.php using GET or POST array in PHP.

Below are the attribute list of submit button:

name
tabindex
value

These attributes are already discussed above in the <input type="button" /> tutorial

For example:


<form action="page2.php">
 <input type="submit" name="btn_submit" value="Submit Data" />
</form>

3. <input type="reset" /> (Reset Button)

Syntax of Reset button:


<form>
 <input type="reset" />
</form>

Reset button is used to reset form's data. There are some following attributes of reset button:

name
tabindex
value

These attributes are already discussed above in the <input type="button" /> tutorial.

For example:


<form>
 <input type="reset" name="btn_reset" value="Reset Data" />
</form>

HTML Button Example:


<form action="#">
     Username: <input type="text" name="uname" /><br /><br />
     <input type="button" name="btn_save" tabindex="1"
         value="This is Button"  />
        <input type="submit" name="btn_update" tabindex="2"
         value="Submit"  />
        <input type="reset" name="btn_reset" tabindex="3" 
         value="Reset"  />
</form>

OUTPUT:

How To Create Radio Button In HTML

Health Product Benefits HTML , WebDevelopment No comments

Hello friends, here is a descriptive tutorial of how to create radio button in HTML (HyperText Markup Language). This radio button creation tutorial contains all most common used attributs with example codes.

HTML Radio Button Example

Radio button tag can be written inside the <form> tag, so <form> tag is parent tag of radio button tag.

Read How To Create Checkbox In HTML
Read How To Create Table In HTML
Read How To Create Text and Password Fields In HTML

Here is the syntax of radio button creation.

Syntax of radio button:


<form>
 <input type="radio" />
</form>

Radio button contains following most common attributes:

checked
disabled
name
tabindex
value

Let's see step by step all attributes of radio button.

checked attribute:

Checked attribute is used to check-mark radio button. By default radio button is not checked, to make by default checked use checked="checked".

For example:


<form>
 <input type="radio" checked="checked" />
</form>

disabled attribute:

To make radio button disable then use disabled attribute. We can not interact with disabled radio button.

For example:


<form>
 <input type="radio" disabled="disabled" />
</form>

name attribute:

This attribute is available in all HTML elements. Use of this attribute is to give name of particular element.

NOTE: In radio button name is important attribute. To make group of radio button then give same name to each radio button. If you give different name to each radio button then all radio button can be checked, but it is not nature of radio button. Only one radio button is selected at a time.

For example:


<form>
 <input type="radio" name="gender" /> Male
 <input type="radio" name="gender" /> Female
</form>

tabindex attribute:

This attribute specifies tab order of an element when you use tab key for navigation.

For example:


<form>
 <input type="radio" tabindex="2" /> 
 <input type="radio" tabindex="1" /> 
</form>

value attribute:

Value attribute is used to set value for radio button. Set value is used in submitted page. In short, when you submit form than that value is passed to actioned page.

For example:


<form>
 <input type="radio" value="male" /> 
 <input type="radio" value="female" /> 
</form>

HTML radio button example:

   
<form>
 Gender: <br />
 <input type="radio" name="gender" tabindex="1"
  value="male" checked="checked" /> Male
 <br />
 <input type="radio" name="gender" tabindex="2"
  value="female" /> Female
</form>

OUTPUT:

How To Create Text and Password Fields in HTML

Health Product Benefits HTML , WebDevelopment No comments

This is descriptive note about how to create text field and password field in HTML form. This note contains description of all attributes of text field and password field.

HTML Form's Text and Password Fields Example

HTML Checkbox Example

Health Product Benefits HTML , WebDevelopment No comments

HTML checkbox is used for multiple item selection. Checkbox looks like square box.This tutorial gives information about attributes of checkbox element with example code.

HTML Checkbox Example

Syntax of checkbox:


<form>
 <input type="checkbox" />
</form>

There are following most common used attributes of checkbox element:

checked
disabled
name
tabindex
value

Let's see each attributes in detail.

checked attribute:

Checked attribute is used for whether checkbox is checked or not. By default checkbox is not checked. To make checkbox checked provide checked="checked".

For example:


<form>
 <input type="checkbox" checked="checked" />
</form>

disabled attribute:

This attribute is used for to make checkbox disable. User can not interact with disabled checkbox.

For example:


<form>
 <input type="checkbox" disabled="disabled" />
</form>

name attribute:

This attribute is common attribute for all element. This is just name of particular object/element. You can give any name without special characters and white spaces.

For example:


<form>
 <input type="checkbox" name="cricket" />
</form>

tabindex attribute:

This attribute is also common attribute and available in all HTML elements. It specifies tab order of an element when you use tab button/key for navigation.

For example:


<form>
 <input type="checkbox" tabindex="2" />
 <input type="checkbox" tabindex="1" />
</form>

If you have multiple elements than and only then you can understand tabindex attribute.

value attribute:

Value attribute is important attribute of checkbox. This attribute sets value and it is used when you access value in submitted page.

For example:


<form>
 <input type="checkbox" value="cricket" />
 <input type="checkbox" value="badminton" />
</form>

HTML checkbox example:


<form>
     Hobbies:<br />
     <input type="checkbox" name="reading" value="reading"
         tabindex="1" /> Reading<br />
        <input type="checkbox" name="traveling" value="traveling" 
        tabindex="2" disabled="disabled" /> Traveling<br />
        <input type="checkbox" name="cricket" value="cricket"
         tabindex="3" /> Cricket<br />
        <input type="checkbox" name="blogging" value="blogging"
         tabindex="4" checked="checked" /> Blogging
</form>

OUTPUT:

Video Tutorial:

How To Create HTML Table

How To Create Table In HTML

Health Product Benefits HTML , WebDevelopment No comments

1. What is Table In HTML?

Table is a collection of rows and columns. It is very easy to create table in HTML. To create table <table> tag is used. If we consider student table then some fields/columns of student table are Roll No, Name, Contact No, City, etc. Table is used to display records of students, employee, products, etc in tabular format. Following image contains example of student table:

Create HTML Table

Subscribe to: Posts ( Atom )

Saturday 10 May 2014

Populate Select Box / Drop Down Dynamically From Database

Saturday 12 April 2014

HTML List Example

HTML Ordered List Example

Unordered List Example

Description List Example

Friday 11 April 2014

HTML Heading Tags

Wednesday 2 April 2014

Hack - New Programming Language By Facebook

Tuesday 18 March 2014

Types of CSS

Sunday 16 March 2014

HTML Image Tag Example

Saturday 8 March 2014

How To Create Form In HTML

Friday 7 March 2014

How To Create Drop Down Menu In HTML

Thursday 6 March 2014

How To Create Textarea In HTML Form

Wednesday 5 March 2014

How To Create Button In HTML

Tuesday 4 March 2014

How To Create Radio Button In HTML

Saturday 1 March 2014

How To Create Text and Password Fields in HTML

Friday 28 February 2014

HTML Checkbox Example

Sunday 16 February 2014

How To Create Table In HTML

Become a Fan

Popular Posts

Categories

Contact Us

Follow My Blog

Saturday 10 May 2014

Saturday 12 April 2014

Friday 11 April 2014

Wednesday 2 April 2014

Tuesday 18 March 2014

Sunday 16 March 2014

Saturday 8 March 2014

Friday 7 March 2014

Thursday 6 March 2014

Wednesday 5 March 2014

Tuesday 4 March 2014

Saturday 1 March 2014

Friday 28 February 2014

Sunday 16 February 2014

Become a Fan

Popular Posts

Categories

Receive all updates via Facebook. Just Click the Like Button Below

Contact Us

Follow My Blog