How To Build A Static Website With Example

A static website is a type of website that consists of fixed HTML pages. It does not require a server-side language or a database, and the content of the website remains the same unless it is manually updated by the developer.

Here is an example of how to build a simple static website using HTML and CSS:

  1. Create an HTML file: HTML (HyperText Markup Language) is used to structure and organize content on the web. You can create an HTML file using a text editor, such as Notepad or Sublime Text.

Here is an example of an HTML file that defines the structure of a simple webpage:

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>This is a static website built with HTML and CSS.</p>
</body>
</html>
  1. Add styling with CSS: CSS (Cascading Style Sheets) is used to style and design webpages. You can add CSS to your HTML file by using the style element in the head section, or by linking to a separate CSS file.

Here is an example of how to use CSS to style the elements in the HTML file above:

<style>
  body {
    font-family: Arial, sans-serif;
  }
  h1 {
    color: blue;
  }
  p {
    font-size: 16px;
  }
</style>
  1. Save the file

To complete the static website example, you would need to save the HTML and CSS files and open them in a web browser.

Here is the complete code for the static website:

HTML file:

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
  <style>
    body {
      font-family: Arial, sans-serif;
    }
    h1 {
      color: blue;
    }
    p {
      font-size: 16px;
    }
  </style>
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>This is a static website built with HTML and CSS.</p>
</body>
</html>

To view the website, save the HTML file and open it in a web browser. You should see a webpage with a blue heading and styled paragraph.

This is just a basic example of how to build a static website with HTML and CSS. You can add more content and features to your website by using additional HTML elements and CSS styles.

Facebook
Twitter
LinkedIn
Pinterest

Table of Contents

Related posts