Technotip.com | Programming Video Tutorials

CSS Hover Over Effect ( CSS pseudo class )

There are many small simple tweaks in CSS that can highly enhance the over all design of a web page. CSS Hover Over Effect is one of them.

The CSS pseudo class which is used to accomplish hover over effect is:

 :hover

[youtube https://www.youtube.com/v/R3weCcjVylo]

YouTube Link: https://www.youtube.com/v/R3weCcjVylo [Watch the Video In Full Screen.]

Note: CSS pseudo classes doesn’t work on Internet Explorer. So while learning this, make sure you are using Chrome or Mozilla Firefox or Apple’s Safari.

We can apply hover over effect to almost any valid html element. Like: anchor tag, tables, lists etc.

Below is the coding for the example discussed in the above video:

 
<html>
 <head><title>Hover Over Effect In CSS2</title>
  <style type="text/css">
 
    li:hover {
        background-color: pink;
        width: 100px;
    }
 
  </style>
 </head>
 <body>
 
   <ul>
    <li>  Microsoft</li>
    <li>  Apple</li>
    <li>  Oracle</li>
   </ul>
 
 </body>
</html>

In the above example, we are applying hover over effect to a unordered list of elements. And we have changed the background color of the list item when the mouse hovers over the list item elements.

Make sure you try this :hover pseudo class with other html elements too. You can really create very good user interface with the help of hover over effect.

PHP Comments, String Concatenation, Addition of Numbers & Hello World

Today lets see these 4 basic things:
1. The classic “Hello World” program.
2. Comment system in PHP.
3. Concatenation of Strings.
4. Addition of Numbers.

Classic “Hello World” program
Program to output simple string

1
2
3

<?php
          echo "Hello World";
?>

Comments:

1	// This is single line comment

1	# This is also a single line comment

1
2
3

/* This is how multi-line comments
    are written.
*/

Anything following a double forward slash or a hash( # ) symbol will be ignored by your parser. Comments are very important and are often ignored by programmers. Comments come handy when we come back to the codes and want to make some changes to the coding. So its always a good practice to write comments wherever appropriate.

Concatenation of Strings
Concatination is joining of two or more strings end to end. Ex: if we concatenate Micro and soft, it will become Microsoft.
In PHP, we use .[DOT] operator for concatenation. Below is an example:

<?php 
         echo "Micro" . "soft";
         echo "<br />Oracle, " . "Sun Microsystems";
?>

The output for the above php code is:

1 2	Microsoft Oracle, Sun Microsystems

Addition of Numbers
We can use variables for addition of numbers or we can simply make use of echo or print for addition of numbers.

1
2
3

<?php
         echo 10+20;
?>

This gives 30 as the output.

1
2
3

<?php
         echo "5"+10;
?>

This gives 15 as output. The string “5” will be implicitly converted into number and will be added to the actual number 10.

First PHP program & Worst Practices To Avoid

We can embed php inside html tags and html tags inside php codes, but whatever it is – your php file name must end with a .php extension, so that the parser can identify that the file contains php code and it must also look for

<?php and ?>

codes inorder to recognise the codes as PHP codes and execute them.

Note: The output of PHP code is html.

Some Worst Practices to avoid:
Some people may use

<? 
    some_php_codes(); 
?>

<?= 
    some_php_codes(); 
?>

OR ASP style( Active Server Pages – from Microsoft Inc )

<% 
    some_php_codes(); 
%>

<%= 
    some_php_codes(); 
%>

and whole lot of other things.

All these or atleast some of these styles may even work on your computer, and that’s because of the way your php.ini file is configured. The same file may not work on other web servers.
So the best practice is to stick with using

<?php 
    your_php_code; 
?>

Also note that, white space isn’t significant in PHP. i.e., you can introduce any number of spaces, tabs, and new line characters in between your PHP codes.
But there must be atleast a single space after

<?php

Our First PHP program:

<?php
          phpinfo();
?>

Make sure you have saved the file with ( filename.php ) .php extension. Now open the saved file in your web browser.
If your server is working, then you must see a screen that gives information about your web server and PHP.
Output Screenshot:
phpinfo

Don’t make this file available on your server for general public, as it gives a lot of information about your server. Its a handy tool to quickly scan your server configuration.

Accessing localhost Web-server on Mac and PC

Make sure that you turn on the Wamp if you are on a PC and Mamp if you are on Mac.

PC users can access their web files using the URL http://localhost/

Mac users can access their web files using the URL http://localhost/~yourUserDirectory

yourUserDirectory is the user account name of your Mac computer using which you have logged in.

On my Mac, I have a user directory by name Satish. So I can access my web files using http://localhost/~Satish

On Mac, once you enter http://localhost/~yourUserDirectory it automatically changes the URL – but don’t worry about it, its working fine and that’s how it works!

Let non of these small things make you not use the web server. I am writing this because, some times small things like this suck a lot of time and some people may even start feeling this as something very much technical and complicated and may leave the idea of learning altogether.

If you successfully accessed your web files from your localhost web server, then congratulations. Continue your exploration. We have a lot of simple PHP examples on this website that you may want to try. All the Best.

Named Anchors In HTML – For Internal Linking

Often times we spend a lot of time and end up preparing a lengthy document thinking it will be helpful, but as a matter of fact people can’t scroll up and down to find what they are looking for – instead they will goto Google and search for some other sites.

In this situation “Named Anchors” are very helpful. This simple technique will make your miles long document more usable.

Here is a working example of Named Anchor: Clicking on Take Me To The End Of This Article will take you to the end of this article.

Here is how it works:
Imagine that you have a premium software and you have written a manual for Windows, Apple and Unix users on a single page:

<html>
<head><title>My Software Manual</title>
</head>
<body>
 
<i>Index</i>
<a href="#microsoft">Windows 7 Manual</a>
<a href="#apple">Macintosh OS X Manual</a>
<a href="#unix">Unix/Linux Manual</a>
 
 
<i>Content</i>
1. <a name="microsoft">Windows 7</a>:  
Here you may write about the system requirement
for your software to work on Windows 7. 
And the amount of resources that your application 
is going to consume. Some tips and tricks. 
    Imagine its about 50 lines.
 
 
2. <a name="apple">Macintosh OS X</a>:  
Imagine there is about 500 lines of documentation 
about using your application on a Apple Macintosh.
 
3. <a name="unix">Unix/Linux</a>:   
Imagine there is about 1000 lines of documentation 
about using your application on a Apple Macintosh.
 
</body>
</html>

These lines of code(from about spinet) act as index.

1
2
3

<a href="#microsoft">Windows 7 Manual</a>
<a href="#apple">Macintosh OS X Manual</a>
<a href="#unix">Unix/Linux Manual</a>

When people click on Windows 7 Manual link in the index section, it takes them directly to the 1. Windows 7 paragraph(in the content section) without even reloading the page – as all the information present in that page has already been loaded.

Make sure you check this working example:
You can find a link at the top of this article – “Take Me To The End Of This Article”, clicking which you will end up here!