Basics of a Static Website
What is a Static Website?
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 in the browser window.
Pictorial representation of a browser displaying a static website content is shown in the below picture.
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.
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 the page is loaded.
- 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.
- Browser interprets the marked up content and displays it in the browser window to give a look and feel to the website. This is the reason the same website looks different in Chrome, Firefox and Internet Explorer, since all these browsers have their own way of interpreting the HTML markups.
- Static site is more appropriate for distributing fixed content which is not to be updated frequently.
- Generally the content of the static site is created and updated directly by the site owners.
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, Firefox or Internet Explorer. (Double clicking on the file will open it in the default web browser).
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.
Static Webpage Contains All 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.
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 builtin blocks.
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.