Difference between revisions of "Making an "Under Construction" page"
Jump to navigation
Jump to search
(→Save the file) |
(→In Notepad) |
||
| Line 58: | Line 58: | ||
===In Notepad=== | ===In Notepad=== | ||
Click '''File > Save As...''' | Click '''File > Save As...''' | ||
| + | |||
For '''Encoding''' select '''UTF-8'''. | For '''Encoding''' select '''UTF-8'''. | ||
| + | |||
For the file name, enter '''index.html''' | For the file name, enter '''index.html''' | ||
| + | |||
Take note of where you will be saving the file, and click '''Save''' | Take note of where you will be saving the file, and click '''Save''' | ||
| + | |||
| + | ===In TextEdit=== | ||
</div> | </div> | ||
Revision as of 18:54, 16 February 2023
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
Making 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%);
font-size: 2em;
}
/* style of space behind the image */
body {
background-color: black;
}
</style>
</head>
<body>
<div class="page">
<img src="Background.png" alt="Under construction page">
<div class="centered">
<p><center>
My website
</br>
Coming soon
</center></p>
</div>
</div>
</body>
</html>
