What is Static Website, Structure and How to Create?
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.
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.
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.
- 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
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.
- 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 or Firefox. (Double clicking on the file will open it in the default web browser).
3. Look and Feel of the Webpage
The HTML file opened with Chrome will look like as shown in the picture below.
Notice the content of the original file and the look in the browser, all the HTML tags are converted in the browser accordingly and only the content is displayed excluding the spaces. For example, the content in between the h1 tags are interpreted as a heading during the display in the browser window.
The same content will be loaded 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.
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 a 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 of these service providers offer free service with limited features and paid service with complete features. Most of these tools offer combination of static and dynamic pages for building a complete website with larger number of pages. There are advanced content management systems like WordPress, Joomla and Drupal for building more sophisticated dynamic sites.
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 multifold 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.