What My Static html website it taking more time to load ?

Most of websites are complained and worried about loading issues, page performance. I would like to share my knowledge regarding the same in this post. This point of view to explain, i categorize websites are built  with mixing of one or more of below.

1) Static Html (images, content,css)
2) Jasascript
3) Server side scripting languages like php, asp and jsp
3) Database tables manipulation to retrieve data, insert data and other operations. 


Static HTML:  Assume website is built with static html. Anyway commonly every website is associated with css, js files, images and content. consider, we are browsing the site through a browser say firefox. In the front end we clearly see images,content directly on the screen itself. we also see colors, padding, margin, background, width,height etc for pieces in page(s).  these are added in background in the format of styles and defined in css files.

                     Also js files /java script would be defined in the page as per the need usually happens at form validations, submission or element event(s). html, css,  javacript will be understand by the browser and it depends on standards defined as per the norms of rules and actions of it. And it varies from version to version.  Yes, now it is the time to get to know things involved in page speed.

Applying selected classes to anchor tags for dynamic pages ?

Websites have menu items. Each menu item points to unique page. Menu item usually associated with anchor tags which are placed in li tag. Colors are applied to these items default. Normally these colors are taken from the site color schemes. Designers will do job of applying colors on mouse over, mouse out. These can be easily do with the help of css styles.

They will create individual pages for each menu item. The navigation structure is placed in all pages so that it is possible to write to add color to the selected menu item. This is fine when the pages are at hand of designers. But in development if we go with CMS or core PHP there its' need to design other way as its needs optimized some common sections of the website front end.

Say for example: Header, footer and left navigation are commonly seen in all web pages. The code/html used for these section usually same in all pages.  In scripting languages like php,aspx and jsp we can eliminate redundancy, and write the same in separate pages for each section. We can include these pages using include statement in all pages so that it makes us to easily change textual changes further. Also further maintenance  will reduce too.

In case of adding the sections as included files. we will not able to see selected color if we navigate through pages in front end.  This is happened because of every page is coming through the same included file. So here it is not able to identify pages separately. To avoid this issue, the script needs able to identify the page and apply the code behavior.  see the same in below example.

$current_page = str_replace(".php","", end(explode('/',$_SERVER['SCRIPT_NAME'])));

The statement above returns the page name and holds in the variable "$current_page". For example say we are browsing the page aboutus.php, then the variable "$current_page" holds the string "aboutus". Then you can react further if the variable matches the value "aboutus". See below.

if($current_page=="aboutus")
{
$aboutus="class='selected' ";
}

Using if condition, we are checking the current page. one more variable $aboutus holds the string "class='selected'". if the page is about us then the variable will be set to "class='selected' ", for other pages the variable is set to empty.

To add css class "selected" to the page aboutus you have to echo the same variable in about us anchor tag. see example below.

 <a href="aboutus.php" <?php echo $aboutus; ?>>ABOUT US</a>

You can apply "selected" classes to anchor/li tag in the same fashion as stated above. Please find the script for 3 pages.  services, about us and contact us

<?php

$current_page = str_replace(".php","", end(explode('/',$_SERVER['SCRIPT_NAME'])));

if($current_page=="services")
{ 
$services_page="class='selected' ";
}

if($current_page=="aboutus")
{ 
$aboutus_page="class='selected' ";
}

if($current_page=="contactus")
{ 
$contactus_page="class='selected' ";
}

 <a href="services.php" <?php echo $services_page; ?>>SERVICES</a>
 <a href="aboutus.php" <?php echo $aboutus_page; ?>>ABOUT US</a>
 <a href="contactus.php" <?php echo $contactus_page; ?>>CONTACT US</a>

?>

How to stop auto populate in text field ?

Auto-Populate: When we type something in text fields and form submits, the values still be accessible, visible when ever we click in the text field after. These values are stored in the client browser so it will populate in it.

                               For some of the textfields in forms would require secure and need privacy. Some client don't want to make the information/data to be shown to public. Browsers dont' clean cached data as it  completely depends on setting that the browser has. Data will reside in it and be populated as per the text field names.

                            To avoid such population to public, text field has property called "autocomplete" and needs to appended to existing attributes.  You have to set that property to value "off".

Ex: <input type="customername" name="customername" autocomplete="off" />. 

Values will not populate when we set it to "off".