How to Create Your Own Website — HTML, PHP, and FTP Upload

Want your own website on the internet — a page about you, your guild, your project, or a simple portfolio? You do not need WordPress or complex frameworks to get started. With HTML, a bit of CSS, and optionally PHP for a contact form, you can have a working website in a few hours.

This guide shows how to build that page on your computer and publish it via FTP on your Battlehorns hosting.

New to FTP? Start with our How to Use FTP with FileZilla tutorial.

What you need

• A hosting plan with PHP (e.g. Battlehorns)
• FTP/SFTP access to your web space
• A text editor (VS Code, Notepad++, or similar)
• Optional: FTP client like FileZilla

Overview (5 steps)

1. Create the file structure on your PC
2. Write index.html (main page)
3. Add styling with CSS
4. Optional: PHP contact form
5. Upload everything via FTP to public_html

Step 1 — Folder structure on your PC

Create a folder on your computer, e.g. my-site:

my-site/
├── index.html
├── css/
│   └── style.css
├── img/
│   └── logo.png
└── contact.php   (optional)

Step 2 — Main page in HTML

Create index.html with a basic structure:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Website</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <header>
    <h1>Welcome to my site</h1>
    <nav>
      <a href="#about">About</a>
      <a href="#contact">Contact</a>
    </nav>
  </header>

  <main>
    <section id="about">
      <h2>About me</h2>
      <p>This is my first website. Here I share information about my project.</p>
    </section>

    <section id="contact">
      <h2>Contact</h2>
      <form action="contact.php" method="post">
        <label>Name<br><input type="text" name="name" required></label><br><br>
        <label>Email<br><input type="email" name="email" required></label><br><br>
        <label>Message<br><textarea name="message" rows="4" required></textarea></label><br><br>
        <button type="submit">Send</button>
      </form>
    </section>
  </main>

  <footer>
    <p>&copy; 2026 — My Website</p>
  </footer>
</body>
</html>

Step 3 — Styling with CSS

In css/style.css:

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  max-width: 800px;
  margin: 0 auto;
  padding: 1.5rem;
  background: #0f172a;
  color: #e2e8f0;
}

header {
  border-bottom: 2px solid #0ff;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
}

nav a {
  color: #0ff;
  margin-right: 1rem;
  text-decoration: none;
}

button {
  background: #0ff;
  color: #000;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
}

input, textarea {
  width: 100%;
  max-width: 400px;
  padding: 0.5rem;
  border: 1px solid #334155;
  border-radius: 4px;
  background: #1e293b;
  color: #fff;
}

Open index.html in your browser (double-click the file) to preview before uploading.

Step 4 — PHP contact form (optional)

If your hosting has PHP (Battlehorns plans do), create contact.php:

<?php
$name = trim($_POST['name'] ?? '');
$email = trim($_POST['email'] ?? '');
$message = trim($_POST['message'] ?? '');

if ($name === '' || $email === '' || $message === '') {
  header('Location: index.html?error=1#contact');
  exit;
}

$to = '[email protected]';
$subject = 'Website contact — ' . $name;
$body = "Name: $name
Email: $email

Message:
$message";
$headers = 'From: ' . $email;

if (mail($to, $subject, $body, $headers)) {
  header('Location: index.html?sent=1#contact');
} else {
  header('Location: index.html?error=1#contact');
}
exit;
?>

Important: replace [email protected] with your real email. The mail() function depends on server configuration — on many hostings it works out of the box; if not, use an external form service (Formspree, etc.) while you learn.

Step 5 — Upload via FTP

1. Connect via FTP to your hosting (see FileZilla tutorial)
2. On the server, open public_html (or www)
3. Select all files and folders from your my-site folder
4. Drag them into public_html
5. Wait for the upload to finish

Structure on the server

public_html/
├── index.html      ← main page (opens at yourdomain.com)
├── css/style.css
├── img/logo.png
└── contact.php

Open https://yourdomain.com in your browser. If you see your page, you are live.

Common problems

Blank page or 404 error

• Confirm index.html is in public_html (not accidentally in a subfolder)
• The filename must be exactly index.html (lowercase on Linux)

CSS not loading

• Check the path in HTML: href="css/style.css"
• Confirm the css/ folder was uploaded via FTP

PHP form does not send email

• Test that PHP is enabled in your hosting panel
• Check error logs in the panel
• Alternative: external form service without PHP

Next steps

• Install WordPress via FTP — blog and dynamic site
• Install PrestaShop — online store
• Custom domain and subdomains in the Battlehorns panel
• SSL certificate (HTTPS) — essential for trust and SEO

Hosting for your first website

Battlehorns offers hosting with PHP, databases, SSL, and FTP/SFTP access — ideal for your first web project, whether a personal page, guild site, or portfolio.

View hosting plans  ·  My services  ·  FTP FileZilla tutorial  ·  Support

Tutorial adapted for Battlehorns customers. HTML, CSS, and PHP are standard web technologies.