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. When a visitor sees the static site through a web browser, the browser retrieve the content from the server and interprets the HTML markups to provide a look and feel and 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.
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 and the web server simply sends an HTTP response to indicate the availability of the requested URL and complete the request by sending the content of the requested URL to the client. 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 beside. 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.