Developing a Website from Scratch

HTML Lesson 9: Developing a Website from Scratch

Developing a website from scratch yourself

Development of the structure

Today, many website development tools have emerged, including specialized portals designed for building websites based on provided templates, content management systems, and other similar tools. These systems naturally facilitate the resource creation process. However, for educational purposes, it’s necessary to learn how to create a website from scratch. For this, we’ll choose a simple design that uses a frame structure to organize the website’s page interface.

To begin, you need to prepare a working directory and the main necessary files. Notepad++It 
is recommended for working with files. Create a working directory (named site, for example) and arrange two folders within it, as shown in the figure:

In the main directory, create and save HTML files with the following names:

• index.html
• header.html
• menu.html
• titul.html
• footer.html
• chapter 1.html

Open the main executable file, index.html (the layout file), and add the code to organize the frame structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modern Layout</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        body {
            display: grid;
            grid-template-rows: 10vh 80vh 10vh;
            height: 100vh;
            font-family: sans-serif;
        }
        .container {
            display: grid;
            grid-template-columns: 20% 80%;
            height: 100%;
        }
        iframe {
            width: 100%;
            height: 100%;
            border: none;
        }
    </style>
</head>
<body>

    <iframe src="header.html" title="Header"></iframe>

    <div class="container">
        <iframe src="menu.html" title="Navigation Menu"></iframe>
        <iframe src="titul.html" title="Main Content" name="main"></iframe>
    </div>

    <iframe src="footer.html" title="Footer"></iframe>

</body>
</html>

Then you need to add the code to the web pages intended for this purpose:

• header.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document Title</title>
</head>
<body>
    <header>
        <h1>Logo/Header</h1>
    </header>
</body>
</html>

• menu.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menu</title>
</head>
<body>
    <h1>Menu</h1>
</body>
</html>

• titul.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Description</title>
</head>
<body>
    <h1>Description</h1>
</body>
</html>

• footer.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Copyright</title>
</head>
<body>
    <h1>Copyright</h1>
</body>
</html>

• chapter 1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chapter 1</title>
</head>
<body>
    <header>
        <h1>Chapter 1</h1>
    </header>
    <main>
        <p>Your content starts here...</p>
    </main>
</body>
</html>

Organizing the work of hyperlinks in the menu

For hyperlinks in the menu.html file to work correctly, namely, for executable files to open in the frame to the right of the menu, two steps must be completed:

In the frame structure file, add a name for the frame in which we are going to open web pages in the menu:

<iframe src="title.html" name="main" title="Main Content"></iframe>

We’ve already done this when creating the frame structure. The frame we need is called main.

Add the hyperlink code to the menu.html file:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Menu</title>
</head>
<body>
  <header>
    <h1>Menu</h1>
  </header>
  <nav aria-label="Chapter Navigation">
    <ul>
      <li><a href="chlava1.html" target="main" rel="noopener">Chapter 1</a></li>
      <li><a href="chlava2.html" target="main" rel="noopener">Chapter 2</a></li>
      <li><a href="chlava3.html" target="main" rel="noopener">Chapter 3</a></li>
    </ul>
  </nav>
</body>
</html>

In the links, we indicated the target of the page output – a frame called main. target="main".

Adding CSS styles

To design a website, and in some cases to make its elements dynamic, it is necessary to use cascading style sheets.

First, create a document to store styles – a file called style.css– and place it in the files folder.

To connect the created style file to all pages of the site, you need to place a link to this file in the code of all pages, except for the file with the frame structure ( index.html ):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document Title</title>
    <link rel="stylesheet" type="text/css" href="files/style.css">
</head>
<body>

    <!-- Main content goes here -->

</body>
</html>

To add tag styling rules, please refer to our site’s CSS tutorials.

Explore More IT Terms