Guide to Static and Dynamic Websites
Earlier days, it is common to show the same webpage to all the users as a static page. However, with the development in web technologies nowadays it is difficult to find static webpages on the internet. The page what you read here is a dynamically assembled page by putting together different components. In order to understand the web, it is essential to get the knowledge of static and dynamic websites.
Related: Guide to HTTP communication.
What We Cover in this Article?
Basically both static and dynamic websites works in a similar manner. However, the bigger difference is that the static page is a single page contains all information while a dynamic page is assembly of many single pages. We cover the followings in this article:
- Basics of a static website – structure and how to create a static site.
- How dynamic site works with examples.
- Difference between static and dynamic web pages to compare the features of static and dynamic websites.
1. What is a Static Website?
As the name indicates static websites deliver the same content whenever you visit. It can be defined as below:
A static website or a webpage is a collection of items like text, images and multimedia elements containing marked up content created with Hyper Text Markup Language (HTML) and stored in a web server.webnots.com
The browser retrieves content from the server when a visitor enters the URL of a static site. Then it interprets the received content and display it as an attractive page on the browser window.
1.1. Features of a Static Website
Below are some of the general features of a static website:
- Static site focuses on distributing fixed information from the web server to the browser running on a client computer.
- All visitors will see exactly the same content each time when they load the page.
1.2. How Does a Static Website Work?
When a visitor enters a URL in the web browser running on a computer, browser sends an HTTP request to the server. The web server simply sends an HTTP response to indicate the availability of the requested URL. The response will be completed by sending the content of the requested URL to the client. In general web server does not perform any code processing in a static web page.
Below picture represents the communication between a server and browser displaying content from a static website.
- The browser interprets the marked up content to give a look and feel to the website. All web browsers have their own way of interpreting HTML markups. This is the reason the same website looks different on Chrome, Firefox, Safari, Edge and Internet Explorer. Web designers focus on developing sites that look similar on all browsers and platforms.
- Static site is more appropriate for distributing fixed content that does not change with time or not need frequent update.
- Generally site owners create and update the content of static site by themselves.
1.3. Creating a Simple Static Webpage
There are many ready made frameworks available for creating a static webpage. For example, Bootstrap is one of the popular free open source framework you can use to create static webpages. However, it is very easy to create a static webpage on your own. Follow the below steps to create a simple static web page.
Remember, in this example the content is located on your own local computer hence no server is required separately. (This means the local computer acts as a client as well as a server).
- Open any word processor, in this example we explain with a Notepad for Windows operating system. You can use TextEdit if you are using Mac. Don’t use Microsoft Word or Apple Pages, they are rich text processors not meant for coding purposes. You can use professional tools like Brackets for making the coding visually easy.
- Copy and paste the below code in the Notepad.
<title>WebNots - Static Page Example</title>
<body bgcolor="#f1f1f1" text="Red">
<h1>Create Your Static Website</h1>
Here is the content of your site.
- Save the file as staticpage.html on your local desktop.
- Open the file using any browser like Chrome, Firefox or Safari. (Double clicking on the file will open it in the default web browser).
1.4. Look and Feel of the Webpage
Below is how the HTML file will look when opened with Google Chrome.
Notice the content of the original file and the look in the browser. The browser converted all the HTML tags and displays only the marked up content excluding space between lines. For example, the content in between the h1 tags is interpreted as a heading during the display in the browser window. The browser loads the same content every time you open the file since there is no interactive processing neither at server nor at browser side.
For a real case in the internet, the HTML file will be located on a web server with a page name on the domain like “www.domain-name.com/staticpage.html“. The web page will open in the browser window when a visitor enters this URL directly on the browser address bar or when this URL is redirected from a search result.
1.5. Static Webpage Details
A static webpage contains all the required information to be displayed on that page. Let us take an example of a simple blog page with the name “blog-post.html” as shown below. When this page is a static page then all content relevant to header, main content area, footer and sidebar are available within the “blog-post.html” page. You can right click and view the source of the page to find all relevant details.
1.6. Creating Live Static Sites
The easiest way to create live static webpage is to create a HTML page as explained above. Then upload the HTML page and relevant linked resources like images and stylesheets to the web server using file transfer protocol. As mentioned, there are also pre-compiled frontend frameworks like Bootstrap will help you to create static pages quickly by reusing built-in blocks. You can view the demo static Bootstrap site with some dynamic scripts for form data processing.
The last option is to use website builder tools like Weebly, Wix and Yola. All these service providers offer free service with limited features. You can upgrade to paid service to get complete features. Most of these tools offer combination of static and dynamic pages for building a complete website with large number of pages.
There are advanced content management systems like WordPress, Joomla and Drupal for building more sophisticated dynamic sites.
Related: Guide to HTTP status codes.
1.7. Advantages and Disadvantages of Static Website
Static websites have many advantages in this mobile world:
- Search engines like Google like static websites as they load very fast. Google also push site owners to have Accelerated Mobile Pages (AMP), which is static in nature, equivalent to the dynamic pages on desktop.
- In order to improve page loading speed, site owners use caching to convert dynamic pages into static pages.
- The cost of creating and hosting static websites is multi-fold lower than managing dynamic sites.
Nowadays you simply can’t have standalone static site with fixed content.
- You need server side scripting for processing emails and collecting details using contact forms.
- Offering customized content to individual users is not possible with static websites. In order to run a membership or subscription site, you first need to collect, process and store data in a database. You can’t manage these things as static site will not have separate database.
- Similarly, ecommerce sites need to offer product variations and collect payments from customers which you can’t do with static site.
1.8. Final Words on Static Website
Static websites offer simple yet powerful presentation of content. This is more suitable for people create one time content with few pages in order to have website for showcasing purposes. It is not possible to manage a static site with hundreds of pages and offer customized content to different user base. You have to choose appropriate content management systems for managing dynamic large scale websites in an effective manner.
2. Basics of Dynamic Websites
2.1. What is a Dynamic Website?
A dynamic website or a webpage displays the content differently each time when a visitor reloads or refreshes the page or provides more interactive features within a webpage without reloading. Most importantly dynamic webpages are created by assembling multiple static or dynamic pages together. Let us take the same example blog post we have shown for the static site. You can use scripting languages like PHP to create the same page as shown below. Though it looks same as static page, it is an assembly of header.php, footer.php, sidebar.php and main-content.php files.
You can create such dynamic pages using the following two methods based on the processing:
- Client side scripting
- Server side scripting
2.2. Client Side Scripting
var name = prompt("Enter your name", "Name");
document.write("<H2> Hello " + name + "</H2>");
- Browser receives the HTML document, interprets the markups, process the script and load the content as a webpage.
2.3. Server Side Scripting
Server side scripting allows the same page to display different content every time it is loaded. The content of a dynamic page is stored in a server’s database and the dynamic behavior is controlled by the scripting programs running at server side. Hence reloading of the page is required by the browser every time to retrieve the dynamic content. Server side scripting languages include PHP, JSP, Perl, ASP, ASP.NET, ColdFusion, Ruby and WebDNA.
2.3.1. Example of How Server Side Scripting Works with PHP
Here is an example code for the server side scripting to display different content every time the page is loaded using HTML and PHP.
<title>WebNots - Dynamic Page Example with PHP</title>
<BODY STYLE="background-color:#f1f1f1; color:red;">
<?php $dynamicsites = array("This is a HTML site", "This is a site created with PHP", "This is a free Weebly Site", "This is a free site created by Wix");
$item = rand(0, sizeof($websites )-1); ?>
<?php echo $websites [$item] ?>
- Assuming this code is stored in a server as “http://www.example.com/dynamicphp.php”.
- When the browser requesting this URL for first time, server first processes the PHP code in the document and sends the first content “This is a HTML site”.
- Browser receives this content, interprets for the markups and displays it as heading.
- When the page is requested for the second time, server responds with the second element “This is a site created with PHP” and the process continues.
A typical example of dynamic processing is serving of advertisements on a webpage with programs like Google AdSense. You will see different advertisement on the page every time it is loaded based on the highest cost offered by the advertiser.
2.4. Features of a Dynamic Webpage
Below are some of the common features of a dynamic webpage:
- Dynamic pages offer customized information according to the user needs.
- Provides more interactive elements to engage the visitors long time in a webpage.
- Server side scripting needs access to the server and hence needs hosting account with the service providers like Bluehost, SiteGround, HostGator, etc.
- Though free website builder tools like Weebly allows dynamic assembly of content (at least for blog post in Weebly), you can’t access the server for troubleshooting.
- Basic form validations are done with client side scripting and complex processing are achieved through server side scripting.
Related: Guide to IP address.
3. Comparison of Static and Dynamic Websites
Here is the complete comparison of static and dynamic website features based on each parameter from usability to search engine visibility.
|Parameters||Static Webpage||Dynamic Webpage|
|Layout and Content|