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 the content from the server when a visitor enters the URL of a static site. The retrieved content is then interpreted to display it as an attractive site on the browser window.
Basically both static and dynamic sites works in a similar manner. But 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. You can check out the article on difference between static and dynamic web pages to compare the features of static and dynamic websites.
Basics of Static Website
We will discuss the following topics in this article:
- Static website features
- Creating a static page
- Check sample page on browser
- Details of static webpage
- Creating live static sites
- Pros and cons of static websites
1. Features of a Static Website
- Static site is mainly used to distribute a 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.
- Generally static sites are created with Hyper Text Markup Language (HTML) but it is not necessary that all HTML pages are static. For example, a JavaScript code embedded in an HTML page will still show as HTML page with .html extension when opened in a browser.
- 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. Pictorial representation of a browser displaying a static website content is shown in the below picture.
- Browser interprets the marked up content and displays it in the browser window 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.
2. 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.
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.
<html> <head> <title>WebNots - Static Page Example</title> </head> <body bgcolor="#f1f1f1" text="Red"> <h1>Create Your Static Website</h1> Here is the content of your site. </body> </html>
- Save the file as staticpage.html on your local desktop.
- Open the file using any browser like Chrome or Firefox. (Double clicking on the file will open it in the default web browser).
3. 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.
4. 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.
5. 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.
6. 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.
Conclusion
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.
4 Comments
Leave your reply.