HTML Websites

HTML websites are the most basic type of website you can create. They consist of HTML files, which are the backbone of any website, and can be styled with CSS and made interactive with JavaScript. In this guide, we will show you how to create a simple HTML website using

DirectAdmin.

FTP & SFTP can be used instead of the online file manager.

Open your

DirectAdmin control panel’s

File Explorer and navigate to the public_html folder on the left. Your website files should appear in front of you. If you already have a website made, you can delete all files in the public_html folder and upload your website files to the public_html folder. Once you have done that, close the

File Manager tab and reload your domain and you should see your website updated. If you do not have a website already made, you can start with a template. Open the index.html file in the directory, and replace all content with this:

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.108.0">
    <title>Starter Template · Bootstrap v5.3</title>
    <link rel="icon" href="https://getbootstrap.com/5.3/assets/img/favicons/favicon.ico">
    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }

      .b-example-divider {
        height: 3rem;
        background-color: rgba(0, 0, 0, .1);
        border: solid rgba(0, 0, 0, .15);
        border-width: 1px 0;
        box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
      }

      .b-example-vr {
        flex-shrink: 0;
        width: 1.5rem;
        height: 100vh;
      }

      .bi {
        vertical-align: -.125em;
        fill: currentColor;
      }

      .nav-scroller {
        position: relative;
        z-index: 2;
        height: 2.75rem;
        overflow-y: hidden;
      }

      .nav-scroller .nav {
        display: flex;
        flex-wrap: nowrap;
        padding-bottom: 1rem;
        margin-top: -1px;
        overflow-x: auto;
        text-align: center;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
      }
    </style>
    <link href="https://getbootstrap.com/5.3/examples/starter-template/starter-template.css" rel="stylesheet">
  </head>
  <body>
    <div class="col-lg-8 mx-auto p-4 py-md-5">
    <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
        <a href="/" class="d-flex align-items-center text-dark text-decoration-none">
            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"></path></svg>
            <span class="fs-4">Starter template</span>
        </a>
    </header>
    <main>
        <h1>Get started with Bootstrap</h1>
        <p class="fs-5 col-md-8">Quickly and easily get started with Bootstrap's compiled, production-ready files with this barebones example featuring some basic HTML and helpful links. Download all our examples to get started.</p>
        <div class="mb-5">
            <a href="https://getbootstrap.com/5.3/examples/" class="btn btn-primary btn-lg px-4">Download examples</a>
        </div>
        <hr class="col-3 col-md-2 mb-5">
            <div class="row g-5">
                <div class="col-md-6">
                    <h2>Starter projects</h2>
                    <p>Ready to beyond the starter template? Check out these open source projects that you can quickly duplicate to a new GitHub repository.</p>
                    <ul class="icon-list ps-0">
                        <li class="d-flex align-items-start mb-1">
                        <a href="https://github.com/twbs/bootstrap-npm-starter" rel="noopener" target="_blank">Bootstrap npm starter</a>
                        </li>
                        <li class="text-muted d-flex align-items-start mb-1">Bootstrap Parcel starter (coming soon!)</li>
                    </ul>
                </div>
                <div class="col-md-6">
                    <h2>Guides</h2>
                    <p>Read more detailed instructions and documentation on using or contributing to Bootstrap.</p>
                    <ul class="icon-list ps-0">
                        <li class="d-flex align-items-start mb-1">
                            <a href="https://getbootstrap.com/5.3/getting-started/introduction/">Bootstrap quick start guide</a>
                        </li>
                        <li class="d-flex align-items-start mb-1">
                            <a href="https://getbootstrap.com/5.3/getting-started/webpack/">Bootstrap Webpack guide</a>
                        </li>
                        <li class="d-flex align-items-start mb-1">
                            <a href="https://getbootstrap.com/5.3/getting-started/parcel/">Bootstrap Parcel guide</a>
                        </li>
                        <li class="d-flex align-items-start mb-1">
                            <a href="https://getbootstrap.com/5.3/getting-started/vite/">Bootstrap Vite guide</a>
                        </li>
                        <li class="d-flex align-items-start mb-1">
                            <a href="https://getbootstrap.com/5.3/getting-started/contribute/">Contributing to Bootstrap</a>
                        </li>
                    </ul>
                </div>
            </div>
        </main>
        <footer class="pt-5 my-5 text-muted border-top">
            Created by the Bootstrap team &middot; &copy; 2022
        </footer>
        </div>
        <script src="https://getbootstrap.com/5.3/dist/js/bootstrap.bundle.min.js"></script>      
    </body>
</html>

Click save, and you now have an example Bootstrap website from Bootstrap. Close the

File Manager tab. The website template should be visible on your domain. If it does not appear when you reload the page, try accessing the domain on another browser or device, or clearing your browser’s cache.