How do I create a static website with HTML?

Angelo Elmer
548 Words
2:28 Minutes
1
0

Every web page that you visit on the Internet and see in your browser is created with HTML. HTML stands for Hypertext Markup Language. It is a method of formatting text using tags. These tags are often called inline styles because they are in the text itself.

HTML is the language of web pages. It tells browsers how to display information such as images, links, and other elements. HTML code also contains instructions on how to format the page.

A good understanding of HTML is essential for anyone who wants to publish their work online. It is important to know that not all websites use HTML. Some websites use proprietary formats instead.

To create a simple static website using HTML, you must first understand the basic structure of a website. With the following HTML code, you can begin to create a new page for the site:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <title>Dokument-Titel</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    
    <!-- Hier binden wir CSS Regeln ein, um die Seite zu gestalten -->
    <link rel="stylesheet" href="/main.css">
  </head>
  <body>
    <header>
      <h1>Titel</h1>
    </header>

    <main>
      <p>Das ist der Text der Seite.</p>
    </main>

    <footer>
      <ul>
        <li><a href="/index.html">Startseite</a></li>
        <li><a href="/kontakt.html">Kontakt</a></li>
        <li><a href="/impressum.html">Impressum</a></li>
      <ul>
    </footer>
    
    <!-- Hier binden wir JavaScript code ein, um die Seitenelemente zu manipulieren -->
    <script src="/main.js"></script>
  </body>
</html>

If we look at the source code from above, we can see several sections that are very important and are enclosed in their own "HTML tag":

  • <html> contains all the elements of the web page. This is the root level of the document.
  • <head> is the header of the document and contains important information about the document, such as the title, files that need to be included in the document, etc.
  • <body> is the main part of the document. This is where the main content of the web page is located.
  • <header> is the header of the content, contains the heading, and may additionally contain some information about the content itself.
  • <main> contains the page's text. Everything in this area belongs to the important content of the HTML page.
  • <footer> is the footer area of the page and usually contains references to subpages, for example, the contact page, the imprint, etc.

To create a simple website that is completely static, we need to create three files:

  1. index.html – this is the home page of the website.
  2. contact.html – this is the contact page of the website.
  3. about.html – this is the about us page of the website.

The structure of each of these pages is identical. The pages differ only by the title, the file name, and the content. For static pages, you usually first create a template that looks similar to the one above and use it for each subpage you need for the website.

Once you have created the files and placed them in the same folder, you can open the index.html file and view the result. After that, you can navigate through the pages by clicking on the links in the footer of the page.

After that, you need to conceive the whole design of the website and implement it with the help of CSS rules. These rules are stored in the main.css file, which is located in the same directory as all other files. Then the website gets a structure and, most importantly, colors, and looks much nicer.

Angelo Elmer

About Angelo Elmer

Angelo Elmer, a wordsmith with a passion for storytelling, has mastered the art of telling multi-layered stories. His adaptable writing style translates seamlessly to a variety of topics and delivers informative and engaging content.

Redirection running... 5

You are redirected to the target page, please wait.