• Home
  • About
  • Job Profile
  • Portfolio
  • Training
Blue Orange Green Pink Purple

Posts Tagged ‘html’

You can use the search form below to go through the content and find a specific post or page:

Aug 19

Set favicon in cross browser and more…

We have seen most of the site has favicon which describe the additional information about the site , Addition in the scene it could be logo,company Profile, company production,web site application, and so many .

now how can u do this ? its very simple to do , just u need to add some line’s of code and be ready with small icon image, u can also add animated image in fevicon

add this part in between Section. Please try to use relative icon type like type=”image/ico” for .ico image.

<link rel="shortcut icon" type="image/ico"  href="images/favicon.ico">

now some time this code will not work on most of the Browser like IE old version in this case u can add this line

<link rel="shortcut icon" href="images/favicon.ico" type="image/vnd.microsoft.icon" *gt;

we can use this also for IE:

<!--[if IE]>
<link href="images/favicon.ico" type="image/x-icon" rel="shortcut icon" />
<![endif]-->

Finally ConvertICO can help to convert png image to ico image.

Standard size of favicon: 16×16 is the better size for favicon to show in major browsers. Here is a better read about creating a favicon and more : http://www.netmagazine.com/features/create-perfect-favicon

Hope this will help the beginners who just started their journey in web development.

Happy’s coding :)

Apr 05

Execute PHP code within a html/htm file

When a web page is call, the server checks two thongs, whether it is a html/htm file or a php/asp(etc) file. The key point is file extension or file type.If it is a normal .html/.htm file, server sends it direct to the browser. And if it is a php/asp(etc), server than execute the appropriate code before sending it to the browser.

Come to the point: Now you need to add some php code within your existing html file,then what is the process?
There are two ways, what i ever know and want to share with you,
1.Rename the html file to php file (the easiest way),
2.Using .htaccess file to allow php within html file.

if you follow the first one, it’s easy. but you may have incoming links or search engine ranking or if u change the file type, you need to change many code within your application.so in this situation, come to the second solution. ;)

The way is:
You need to add some command in your .htaccess file like below:
For html file :
AddType application/x-httpd-php .html

Or for .htm
AddType application/x-httpd-php .htm

If you only plan on including the PHP on one page, it is better to setup this way:
<Files myhome.html> AddType application/x-httpd-php .html </Files>

Example:
Now you can put php script like below in your html file :

<p id='php_cont'><?php echo "hi all"; ?></p>

N.B. Always be careful about your .htaccess file. if you have already one, just add the above command to the file, don’t replace all. and for beginner, the .htaccess file will be in your root folder, where your application or project exists (i.e. http://localhost/myapp)

That’s all. For very beginners it may be helpful and i think this is a common question for them that ‘How to use php in html file?’. cheers ;)

Apr 05

Go to a URL/link from drop down list/menu in html+javascript

In many web application, we see some kind of drop down list to go to a URL only by clicking on the list item, no need to click on any button. For the users, this is a nice experience that they don’t have to click on submit button.
I have described here in details the tutorial especially for beginners. Let we have a form like below:

<form method="post" action="http://www.example.com/submit.php">
<input type="submit" name="submit_button" value="Go">
<select name="url_list" >
<option value="http://www.example.com/index.html">list 1</option>
<option value="http://www.example.com/about.html">list 2</option>
</select>
</form>

we can improve the form performance by combining it with a simple javascript and it has below advantages:

1.It makes your page more efficient, because if JavaScript is enabled, the web browser can jump to the destination webpage itself without having to run the script. Also it is nicer for users because they do not need to select the “go” button.

2.The form will also continue to work with web browsers that do not have JavaScript available.

Now, the following example displays a drop down list with a js function. Include the js in your <head></head> of the file :

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin gotosite
function gotosite()
{
var URL = document.gotoform.url_list.options[document.gotoform.url_list.selectedIndex].value; window.location.href = URL;
}
// End gotosite -->
</script>

and now try the form like this :

<form name="gotoform" method="post" action="http://www.example.com/submit.php">
<noscript>
<!-- use noscript to only show this if no javascript is available -->
<input type="submit" name="submit_button" value="Go">
</noscript>
<select name="url_list" size="1" onChange="gotosite()">
<-- Value of first option is default, usually current page -->
<option value="http://www.example.com/submit.php"> Select a Site...</option>
<option value="http://www.example.com/index.html">list 1</option>
<option value="http://www.example.com/about.html">list 2</option>
</select>
</form>

we call ‘gotosite()’ function on ‘onChange’ of <select>, and this will help to jump to the url for each list.
Hope this will help the beginners for more reliable user experience.

Saif The Green

  • View Saif's profile on LinkedIn
  • Recent Posts
    • RESTful API – The HTTPish …
    • SUSE – another user-friendly desktop Linux distributions
    • SEO meta techniques for a wordpress blog
    • Set favicon in cross browser and more…
    • WordPress custom URL rewrites and tips
  • Archives
    • October 2016
    • August 2016
    • August 2014
    • July 2014
    • April 2014
    • June 2013
    • April 2013
    • March 2013
  • Categories
    • CodeIgniter
    • Javascript
    • Linux
    • MySQL
    • opencart
    • php
    • SEO
    • Software Development
    • Web Development
    • Web Services
    • Wordpress
  • Meta
    • Log in
    • Entries RSS
    • Comments RSS
    • WordPress.org
  • Archives
    • October 2016
    • August 2016
    • August 2014
    • July 2014
    • April 2014
    • June 2013
    • April 2013
    • March 2013
  • Search







Saif The Green is proudly powered by WordPress
Entries (RSS) and Comments (RSS).