Making an "Under Construction" page
Here's an quick under construction page which you can get set up on your hosting package in just a few minutes. You'll also learn some useful skills along the way!
Contents
Make the page
All you need to make a basic HTML page is a text editor. On Windows, the easiest option is Notepad. On Mac, TextEdit is the default choice.
Please don't use Word to make your page. It won't work.
Open your text edit, then copy the text in the block below and paste it into your text editor.
<html>
<head>
<title>Under construction</title>
<meta name="description" content="This website is under construction">
<meta name="keywords' content="my website, my business, my products">
<meta name="viewport" content="height=device-height, initial-scale=1">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style>
/* Container holding the image and the text */
.page {
position: relative;
text-align: center;
color: black;
display: flex;
justify-content: center;
overflow: hidden;
height: 100vh;
}
/* Centered text */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-45%, -65%);
color: black; /*the immediate background of the text is white in the image, so we set the text to black explicitly to preserve contrast*/
font-size: 2em;
}
</style>
</head>
<body>
<div class="page">
<img src="Background.png" alt="Under construction page">
<div class="centered">
<p>
My website
<br />
Coming soon
</p>
</div>
</div>
</body>
</html>
Edit the content
There are a few things you can tweak and personalise in the code. First, find the following part in the head of the page:
<title>Under construction</title>
<meta name="description" content="This website is under construction">
<meta name="keywords' content="my website, my business, my products">
HTML tags look like <this>. That's called a "start tag". An "end tag" looks like </this> with a forward slash before the word. Start tags indicate the start of some format or effect, and end tags end it. If you look at the code block above, you'll see the "title" start and end tags, marking the title of the page Under construction. You can change the title of your page to be anything you want by changing the text between the title tags.
Next there's a special kind of tag, the "meta" tag. Meta tags are special because they don't have end tag partners. They also perform many functions, but the ones we're interested in are meta name="description" and meta name="keywords". These tell search engines what your page is about, and can also be used by assistive technologies like screen readers used by people with vision loss.
Each of these meta tags has a content field, which you can edit to contain information about your website. The important things to remember are:
- Only edit the text in the content="" field, between the quotation marks.
- Key words and phrases should be separated with commas.
Edit the text
The main lines "My website" and "Coming soon" is easy to change. Look for the following, toward the end of the code:
<p>
My website
<br />
Coming soon
</p>
You can change this text as well. Some tips to help you out:
The "p" tag indicates a paragraph.
The "br" tag is another special tag that doesn't need a partner. This is called a "self-closing" tag.
The "br" tag creates a line break, or new line, like pressing enter on a keyboard when you're typing normal text.
HTML ignores normal "enter" line breaks, so for short lines of text, you can use the "br" tag to end a line.
For longer lines, it's best to put each line between its own set of "p" tags.
Remove comments if you want to
In the code above you will have noticed text written /* between marks like this */. These are comments. They are not displayed or interpreted by the viewer's web browser, so it's safe to remove them if you'd like to. We've only added them to help you understand what the code does.
Save the file
In TextEdit
Download the background image
Right-click this link and click Save link as... and then click Save.
Upload to your hosting package
Both index.html and Background.png must be uploaded to the httpdocs folder on the hosting server.
There are a few ways to upload your files, but if you've never done this before, we recommend using the hosting control panel.
For other options, see Uploading your website.
