top of page
Search

Explanation of simple page code

Here coming from our coding experts we'll have a full code on how to build a simple website page with a simple header text, paragraph text and button.


Firstly we'll need to understand the basics of coding and the best layout that we like to use. Firstly we'll look at this example code of one of our coded 404 page not found pages:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>404 Page Not Found</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f4f4f4;
        }
        .container {
            text-align: center;
            background-color: #fff;
            padding: 50px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
        }
        h1 {
            font-size: 100px;
            margin: 0;
            color: #ff4a4a;
        }
        h2 {
            font-size: 24px;
            color: #333;
            margin-bottom: 20px;
        }
        p {
            font-size: 18px;
            color: #666;
            margin-bottom: 30px;
        }
        a {
            text-decoration: none;
            color: #fff;
            background-color: #ff4a4a;
            padding: 15px 30px;
            border-radius: 5px;
            font-size: 18px;
            transition: background-color 0.3s ease;
        }
        a:hover {
            background-color: #ff6f6f;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>404</h1>
        <h2>Oops! Page not found</h2>
        <p>The page you are looking for doesn't exist or has been moved.</p>
        <a href="http://redhosthub.com">Back to Home</a>
    </div>
</body>
</html>

On the code above there a few things to highlight.

The first thing to point out is the header text. Which is the below:

    <title>404 Page Not Found</title>

That code is the header text.


Next thing to point out is the text with;


<h2>Oops! Page not found</h2>

Is a heading text. In the example further down the exact size is displayed but is around header 5 or 4.


The next explanation is about the style part which is below:

<style>
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f4f4f4;
        }
        .container {
            text-align: center;
            background-color: #fff;
            padding: 50px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
        }
        h1 {
            font-size: 100px;
            margin: 0;
            color: #ff4a4a;
        }
        h2 {
            font-size: 24px;
            color: #333;
            margin-bottom: 20px;
        }
        p {
            font-size: 18px;
            color: #666;
            margin-bottom: 30px;
        }
        a {
            text-decoration: none;
            color: #fff;
            background-color: #ff4a4a;
            padding: 15px 30px;
            border-radius: 5px;
            font-size: 18px;
            transition: background-color 0.3s ease;
        }
        a:hover {
            background-color: #ff6f6f;
        }
    </style>

As you might have noticed that the start and end of this code is ended with '</style>' this is partially for if your collaborating with code your team will be able to easily understand where the style (Or CSS code) is and can locate it for changes.


Once we've got that cleared up we can look at the outcome of what happens when we run this code.


Above we can see that our style part of the code was able to create the red header text and the button. And was able to make the background to be white and the boarder to be grey.

You can also see that the text parts (Two header commands and one paragraph text) they were able to display the general text you expect to see when a 404 page has been created.


If you want to test out to build your own website why not try our free hosting? It's completely free and just removed the premium version to focus on providing the best free service there currently is. Starting from FREE 24/7 ticket support which is also quick responding. Even if you have no interest in coding there's still a free no-code site installer where you can choose the software and it'll install within 5 minutes for FREE!

 
 
 

Comments

bottom of page