Page Layouts for HTML

HTML Layout - Using Tables:

The simplest and most popular way of creating layouts is using HTML <table> tag. These tables are arranged in columns and rows, so you can utilize these rows and columns in whatever way you like.

For example, the following HTML layout example is achieved using a table with 3 rows and 2 columns - but the header and footer column spans both columns using the colspan attribute:

<table width="100%" border="0"> <tr> <td colspan="2" style="background-color:#CC99FF;"> <h1>This is Web Page Main title</h1> </td> </tr> <tr valign="top"> <td style="background-color:#FFCCFF; width:100px;text-align:top;"> <b>Main Menu</b><br /> HTML<br /> PHP<br /> PERL... </td> <td style="background-color:#eeeeee;height:200px; width:300px;text-align:top;"> welcome to you </td> </tr> <tr> <td colspan="2" style="background-color:#CC99FF;"> <center> Copyrights are saved </center> </td> </tr> </table>

This will produce following result:

This is Web Page Main title Main Menu HTML PHP PERL... welcome to you Copyrights are saved

Multiple Columns Layouts - Using Tables

You can design your webpage to put your web content in multiple pages. You can keep your content in middle column and you can use left column to use menu and right column can be used to put advertisement or some other stuff. 

Here is an example to create three column layout:

<table width="100%" border="0"> <tr valign="top"> <td style="background-color:#FFCCFF;width:20%; text-align:top;"> <b>Main Menu</b><br /> HTML<br /> PHP<br /> PERL... </td> <td style="background-color:#eeeeee;height:200px; width:60%;text-align:top;"> welcome to you </td> <td style="background-color:#FFCCFF; width:20%;text-align:top;"> <b>Right Menu</b><br /> HTML<br /> PHP<br /> PERL... </td> </tr> <table>

This will produce following result:

Main Menu HTML PHP PERL... welcome to you Right Menu HTML PHP PERL...

HTML Layouts - Using DIV, SPAN

The div element is a block level element used for grouping HTML elements. While the div tag is a block-level element, the HTML span element is used for grouping elements at an inline level.

Although we can achieve pretty nice layouts with HTML tables, tables weren't really designed as a layout tool. Tables are more suited to presenting tabular data.

You can achieve same result whatever you have achieved using <table> tag in previous example.

<div style="width:100%"> <div style="background-color:#CC99FF;"> <b style="font-size:150%">This is Web Page Main title</b> </div> <div style="background-color:#FFCCFF; height:200px;width:100px;float:left;"> <b>Main Menu</b><br /> HTML<br /> PHP<br /> PERL... </div> <div style="background-color:#eeeeee; height:200px;width:300px;float:left;"> welcome to you </div> <div style="background-color:#CC99FF;clear:both"> <center> Copyrights are saved </center> </div> </div>

This will produce following result:

This is Web Page Main title Main Menu HTML PHP PERL... welcome to you Copyrights are saved

10 useful tips for reducing the time of webpage load

The following are some tips for decreasing your web page loading times.

1. Check the Current Speed of the Website

The first thing you will want to do is to analyze your current page speed. This allows you to track your improvement and ensure that any changes you make positively improves your page load times.

There are many free tools out there for checking how long it takes to load your website. Here are a few of them:

• Pingdom offers an easy-to-use site speed test that mimics that way a page is loaded in a web browser.
• Page Speed is an open source Firefox add-on that helps you assess the performance of your web pages. It also provides suggestions on how to fix performance issues.
• Web Page Test is another great tool that shows you the speed and performance of your website in different browsers.

2. Optimize Your Images

Know when to use the appropriate file format for your images. Changing to a different file format can dramatically decrease the file size of an image.

• GIF is ideal for images with few colors like logos.
• JPEG is great for images with lots of colors and details like photographs.
• PNG is the choice when you need high quality transparent images.

3. Don’t Scale Down Images

Avoid using a larger image than you need just because you can set the width andheight attributes of <img> elements in HTML.

If you need a 100x100px image and you have a 700x700px image, use an image editor like Photoshop or one of these web-based image editors to resize the image to the needed dimensions. This lowers the file size of the image, thus helping to decrease page loading times.

4. Compress and Optimize Your Content

The task of compressing your website content can have a huge impact on reducing load times. When using HTTP compression, all of your web page data is sent in a single smaller file instead of a request that is full of many different files. For more information, see this Wikipedia article on HTTP Compression.

You can also optimize and compress your JavaScript and CSS files by combining them and minifying the source code.

5. Put Stylesheet References at the Top

Moving your stylesheet references to the <head> of your HTML document helps your pages feel like it is loading faster because doing so allows your pages to render the styles progressively. In addition, it doesn’t hurt that it’s the W3C standard.

6. Put Script References at the Bottom

Browsers can only download two components per hostname at the same time. If you add your scripts towards the top, it would block anything else below it on the initial loading of the page. This makes it feel like the page is loading slower.

To avoid this situation, place script references as far down the HTML document as possible, preferably right before the closing <body> tag.

7. Place JavaScript and CSS in External Files

If your JavaScript and CSS are directly in your HTML document, they are downloaded every time an HTML document is requested. This, then, doesn’t take advantage of browser caching and increases the size of the HTML document.

Always place your CSS and JavaScript in external files; it’s a best practice and makes your site easier to maintain and update.

8. Minimize HTTP Requests

When visiting a new web page, most of the page-loading time is spent downloading components of that page (e.g. images, stylesheets, and scripts).

By minimizing the number of requests a web page needs to make, it will load faster. To reduce HTTP requests for images, one thing you can do is to use CSS sprites to combine multiple images.

If you have multiple stylesheets and JavaScript libraries, consider combining them to reduce the number of HTTP requests.

9. Cache Your Web Pages

If you use a content management system that dynamically generates your web pages, you should statically cache your web pages and database queries so that you can decrease the strain on your server as well as speed up page rendering times.

When you cache your page, it saves a static version of it to be presented to the user instead of recreating it every time it’s requested.

10. Reduce 301 Redirects

Every time a 301 redirect is used, it forces the browser to a new URL which increases page-loading times. If possible, avoid using 301 redirects.

Comparison between PHP and ASP.net

A comparison of PHP (Open Source) vs ASP.net (Commercial), Performance, Cost, Scalability, Support and Complexity

There are hundreds of forum debates and articles on the Internet about whether PHP or ASP.net is a better platform. Unfortunately, most opinions are biased and their preference is typically based on promoting one programming language over the other.

Also, if you pay attention to the dates on those articles and debates, you will see that most of the information is outdated and old. This is unfortunate — the debates are showing on top of search engines and the information is no longer valid. We need to consider that there are periodic major upgrades and improvements done to both PHP and ASP.net platforms. 

Let me assure you that both programming languages are used in very large web applications and large successful web sites so there should not be any doubt to the ability of any of the above programming languages to handle a large web application project.

In this article:

Regarding performance, I'll explain what factors will effect performance and the result will prove that selecting one programming language over the other because of speed is pointless in most scenarios.

Regarding scalability, I'll explain what factors to consider when it comes to scalability and if programmed correctly, both programming languages are very scalable.

Regarding cost and support, since PHP is open source and commonly runs on an open source platform, LAMP (Linux, Apache, MySQL, PHP), PHP wins over ASP.net for providing the most cost effective solution and providing a large amount of resources and support. 

Regarding time to deployment (an additional concern for cost,) on average, it takes twice as much code writing to accomplish something with ASP.net than PHP, so time to deployment is faster using PHP.

I'll go over each of the considerations and also provide my two cents below:

I. Scalability and Ease of Maintenance

Scalability and ease of maintenance have nothing to do with whether you select PHP or ASP.net platform. Web Application scalability and ease of maintenance primarily depend on:

• Programmers' experience
• Using the best programming practices
• Using a solid programming framework
• Following programming guidelines and standards

II. Performance and Speed

There has been much debate about this subject and most of the debates have been biased and have been tailored to promote one of the programming languages instead of informing the audience.

There are so many other factors to consider when it comes to measuring web application speed, so the speed of any programming language should not have any noticeable effect on the speed and performance of most of the websites today. 

However, if the programming language needs to perform enormous tasks similar to the kind that sites such as Google or Yahoo do daily, then there should be a lot of consideration in selecting a very fast programming language for required enormous tasks — that is why Google and Yahoo use several programming languages (mostly open source), each selected to handle the tasks that the programming language is best at performing.

Below, I'm going to analyze the common and uncommon scenarios and explain which task is better than the other:

1st Common Scenario: 

One of the common tasks of any web application would be to access and query the database and output the result to the web server and then to the browser. So on this common scenario, all the programming language is doing is communicating / interfacing with the database server and web server. On this common scenario, the speed of the programming language has almost no affect on this process; the speed of this process relies on the database server, web server, client's web browser / computer and bandwidth.

When it comes to the main and common database servers, MySQL (now owned by Oracle), PostgreSQL, MSSQL and Oracle are all fighting for speed and performance. We keep seeing new features and better performance by all database servers in each version upgrade so I will say that the above database servers will all have a great performance if the database programmers use optimized and practical SQL queries and if needed, use the advanced features such as caching.

MySQL is used by Google, Facebook, YouTube, Yahoo and recently on FIFA World Cup which received a huge audience around the World. So I would not question the capability of the MySQL database server.

Based on my research on a few online stats, as of this writing, the communication and interfacing between PHP and MySQL is faster than ASP.net and MSSQL but it is not very noticeable.

2nd Common Scenario: 

One of the other common tasks of any web application would be to access the file system, find an image and send it to the web server. In this case, again, the programming language is doing very little — it is the Operating System and the file system that has the burden of communicating with the programming language. 

Based on my research on a few online stats, as of this writing, the Linux OS and ext4 (file system) performs better (IO) than Windows OS and NTFS (file system.) 

3rd Common Scenario: 

Most Linux / Unix servers are run very lean without any extra un-needed packages or GUI interfaces and therefore the OS uses a lot less CPU and RAM which provides more allocation to the database and web server.

Most windows servers run clunky and with many un-needed packages and GUI which will be using much more CPU and RAM.

Obviously, a LAMP platform will have an advantage over the ASP.net platform because it will have more available resources.

4th Not Very Common Scenario: 

ASP.net is usually written in C# (pronounced C Sharp) — generally speaking, as of this writing, C# is a faster programming language than PHP. (This may change as each programming language will come up with upgrades to fight for a better speed.) So if the programming language needs to run a 2,000,000 loop execution of a calculation, an ASP.net written in C# will win over PHP. However, this is a very uncommon scenario, the most loop executions of a calculation would be in 100s and not 2,000,000s. And in this case, there should be other concerns about why someone needs to do a 2,000,000 loop calculation.

Additional items that can have an effect on performance but have nothing to do with which programming language is selected are:

• Ability and knowledge of programmer(s) to optimize the code
• Ability and knowledge of programmer(s) to write proper and optimized SQL queries.
• Functionality required (some functions may take longer to execute in the ASP.net platform and less time in PHP platform and vice versa.

III. Cost:

PHP, MySQL server, PostgreSQL server, Apache server, and Linux OS are all free and upgrades are also free. In addition, there is no additional licensing cost for having another hot standby server as a backup, or needing to run multiple servers for load balancing or server clustering.

LAMP (Linux, Apache, MySQL and PHP) is also much more popular among hosting companies, and its popularity results in a lower monthly hosting cost for LAMP hosting compared to Windows hosting.

ASP.net and IIS are free if you purchase Windows OS. There is a substantial licensing cost for a Microsoft Windows Server, Microsoft SQL Server and future upgrades. For example, Microsoft Server 2008 R2 Standard - 64-bit cost is about $1029 and Microsoft SQL Server 2008 Standard Edition For Small Business cost approximately $1038.

The above licensing costs for Microsoft can substantially increase if the site becomes popular and there is a need to run the site on multiple servers or requires server features such as load balancing, server clustering or hot standby.

IV. Support and Resources

Since LAMP is open source, there is a vast amount of dedicated and friendly developers around the world who continuously make improvements and updates, and provide support for the platform. Additionally, there are more support resources and developers available for PHP and LAMP Platforms.

The reason why I mentioned the word "friendly," is because Open Source developers who contribute to the Open Source community are doing so not for financial gain. If you seek help with a functionality challenge and post a question on a PHP forum, you will receive useful information from friendly contributors.

ASP.net relies on an available number of developers at Microsoft for making improvements and updates. There are less support contributors available to solve ASP.net challenges.

V. Time to Deploy

It takes a larger amount (more lines) of code to accomplish complex features and functionality with ASP.net compared to PHP, adding more time to the development process.

Additionally, PHP is interpreted at the server, so when changing a functionality, no additional steps are required to see the changes. On the other hand, ASP.net needs to be compiled each time the code is modified. Again, the development process is more time-consuming when using ASP.net as opposed to PHP.

VI. Editors and Tools

PHP & MySQL is editor independent. PHP developers have access to an extensive number of editors.

Most ASP.net programmers rely on Microsoft Visual Studio editor to help them develop .NET Applications. (Many ASP.net developers love and swear by the Microsoft Visual Studio.)

It is a different style of programming — PHP and open source developers tend to use text editors such as VI, VIM, Notepad ++. 

VI and VIM are very advanced and independent editors, and the programmers who learn and use those editors to the fullest capabilities can perform very complex programming, in a fast, efficient and independent way. Those programmers have more control and flexibility, and when it comes to the need of using and integrating other essential platforms, such as JavaScript, Ajax, JQuery, etc., the PHP developers have a better advantage because of their familiarity with the open source environment and hand coding using VI or VIM editors.

VI. Platform Independent

PHP is platform independent and can run on any platform — Linux, Unix, Mac OS X, Windows.

ASP.net is built to run only on Windows platform.

VI. Which popular sites run on which platforms?

The following table lists the top, popular sites and the platform and languages they use.

Note: Please don't confuse C with C# (pronounced C Sharp) — they are completely different programming languages. ASP.net is mostly programmed in C# (C Sharp) or Visual Basic and not C.

Site	Up Since	Server Platform	Programming Language
Google.com	November 1998	Linux	C, Java, C++, PHP & MySQL
Facebook.com	February 2004	Linux	PHP, MySQL and C++
YouTube.com	February 2005	Linux	C, Java and MySQL
Yahoo.com	August 1995	Linux	C++, C, Java, PHP & MySQL
MSN.com (owned by Microsoft)	August 1995	Windows	ASP.net
Live.com (owned by Microsoft)	August 2008	Windows	ASP.net
Wikipedia	January 2001	Linux	PHP & MySQL
Amazon.com	October 1995	Linux & Solaris	C++, Java, J2EE
WordPress.com	November 2005	Linux	PHP & MySQL

VII. Popularity

The LAMP platform is much more popular than the Windows platform. Based on Netcraft's July 2010 Web Server Survey of 205,714,253 sites, 112,945,968 (54.90%) are hosted on Apache and 53,217,620 (25.87%) are hosted on Windows; the rest are hosted on other platforms.

VII. Usability and Ease of Deployment

There are many misconceptions and misinformation about Linux being unfriendly.

This really depends on the experience and knowledge of the person setting up the platform.

However, I have to say that I'm very impressed with the new and improved versions of popular Linux distributions. These distributions of Linux such as Ubuntu, Red Hat, CentOS, openSUSE, and Fedora have done a great job providing ease of installation and deployment, as well as a simple and straight forward GUI interface that makes configuration and setting up of a Linux server very manageable.

Unfortunately, in my opinion, Microsoft Server has been going backward with usability, by making the server administration extremely clunky and filled with complex and un-needed features.