CodeGym /Courses /Docker SELF /Creating a Simple HTML Site

Creating a Simple HTML Site

Docker SELF

Level 7 , Lesson 2

Available

Creating a Simple HTML Site

1. Why do we need a website in HTML?

Welcome to the fascinating world of web development! Today, we’re going to create a basic static HTML website and host it on a web server that you set up in previous lectures. Even if you’ve never written HTML code before, don’t worry – everything will be super clear. Our goal is not only to understand the basics of HTML but also to learn how to make your site accessible to the world using a web server.

So now, let’s take the next step – we’ll create our very own HTML site and configure its display using your web server. Ready to conquer the web? Let’s get started!

HTML (HyperText Markup Language) is the backbone of all web pages. It defines the structure and content of the site. With standard HTML, you can describe headers, text, images, links, and even tables. It’s simple to learn but powerful enough to be the foundation of any website.

In the real world, skills in working with static HTML pages are useful in so many different situations:

Quickly creating prototypes for web applications.
Writing and testing static pages for documentation.
Preparing a basic interface for server-side applications.

And HTML is also a great way to create a résumé in the form of a web page (yep, recruiters sometimes dig that). For us programmers, knowing basic HTML is just a must-have skill.

2. Step 1. HTML Basics: Creating Your First Page

Programming is like LEGO: a favorite pastime for all ages. Let’s start with a small "brick"—our first web page.

A Minimal Example of an HTML Document

Create a file named index.html in any text editor (for example, nano, vim, or even gedit if you want some graphics) and write the following code:

<!DOCTYPE html>
<html>
<head>
    <title>My First Website</title>
</head>
<body>
    <h1>Hello, world!</h1>
    <p>This is my first web page in HTML.</p>
</body>
</html>

Code Explanation

<!DOCTYPE html> – tells the browser that we’re using HTML5.
<html> – opens the entire document. All the content of the page goes inside this tag.
<head> – a section for metadata about the site (like the page title, linking styles, or scripts).
<title> – the name of the page, which appears on the browser tab.
<body> – the main section where all visible content is placed.
<h1> – the first-level heading (the smaller the number, the bigger the heading).
<p> – a block of text (paragraph).

Yep, just seven lines, but they’ll be the foundation for your website!

3. Step 2. Hosting the HTML Website on the Server

Now that our page is ready, it's time to show it to the world. For that, we’ll use our web server.

Preparing the Website Directory

Create a directory to store your website files. For example, if you want to host the website on a virtual host with the domain example.com, run:

sudo mkdir -p /var/www/example.com

Then move your index.html file into this folder:

sudo cp index.html /var/www/example.com/

The real magic is about to begin – the file is ready to go live.

4. Step 3. Setting Up a Web Server to Serve Your Site

Configuration for Nginx

Open the virtual host configuration file:

sudo nano /etc/nginx/sites-available/example.com

Insert the following configuration:

server {
    listen 80;
    server_name example.com;

    root /var/www/example.com;
    index index.html;

    location / {
        try_files $uri $uri/ =404;
    }
}

Activate the virtual host and restart the server:

sudo ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx

Configuration for Apache

Open the virtual host configuration file:

sudo nano /etc/apache2/sites-available/example.com.conf

Insert the following configuration:

<VirtualHost *:80>
    ServerName example.com

    DocumentRoot /var/www/example.com
    <Directory /var/www/example.com>
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
    </Directory>
</VirtualHost>

Activate the virtual host and restart the server:

sudo a2ensite example.com.conf
sudo systemctl restart apache2

Checking the Site

Now, open your browser, enter http://example.com (or your server's IP address), and enjoy the result. If you see your beautiful "Hello, World!" – congrats, it's all working!

5. Step 4. Styling Your Site

Static pages are nice, but a little CSS never hurt anyone. Let’s add a touch of style.

Add a new file style.css to the same folder /var/www/example.com/:

body {
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
    color: #333;
}

h1 {
    color: #ff5722;
}

Now update your index.html by adding a link to the CSS:

<!DOCTYPE html>
<html>
<head>
    <title>My First Website</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is my first web page made with HTML.</p>
</body>
</html>

After reloading the page, you’ll see some small style changes. Now your site looks a bit cooler!

6. Common Problems and Their Solutions

When working with websites, you might run into some issues, but don't worry, we've got your back:

Error "403 Forbidden". Check the permissions on your website folder. Use:
```
  sudo chmod -R 755 /var/www/example.com
```
Error "404 Not Found". Make sure your website files are in the correct folder and properly named.
Website not displaying. Check if your web server service is running:
```
  sudo systemctl status nginx
  sudo systemctl status apache2
```

Now your website is available to anyone who knows its address. Isn't that inspiring? In the upcoming lectures, you'll learn even more: how to add HTTPS for security and manage server settings.

Previous Previous lesson

Next Next lesson

Comments

TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION