View source for Making an "Under Construction" page

[[file:Underconstructionpage.png|thumb|What the template page looks like unedited]]
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!
=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.
  &lt;html>
  &lt;head>
      &lt;title>Under construction</title>
      &lt;meta name="description" content="This website is under construction">
      &lt;meta name="keywords' content="my website, my business, my products">
      &lt;meta name="viewport" content="height=device-height, initial-scale=1">
      &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8">
      &lt;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;
          }
      &lt;/style>
  &lt;/head>
  &lt;body>
      &lt;div class="page"> 
      &lt;img src="Background.png" alt="Under construction page">
          &lt;div class="centered"> 
          &lt;p>
              My website
              &lt;br />
              Coming soon
          &lt;/p>
          &lt;/div> 
      &lt;/div> 
  &lt;/body>
  &lt;/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:

      &lt;title>Under construction</title>
      &lt;meta name="description" content="This website is under construction">
      &lt;meta name="keywords' content="my website, my business, my products">

HTML tags look like &lt;this>. That's called a "start tag". An "end tag" looks like &lt;/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:

          &lt;p>
              My website
              &lt;br />
              Coming soon
          &lt;/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 '''br'''eak, 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 <code>/* between marks like this */</code>. 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==
<div style="overflow:hidden">
[[file:Notepad_encoding.jpeg|thumb|Be sure to choose UTF-8 encoding before saving]]
When you've finished customising your page, it's time to save the file.
===In Notepad===
Click '''File > Save As...''' 

For '''Encoding''' select '''UTF-8''' (See the screenshot to the right).

For the file name, enter '''index.html'''

Take note of where you will be saving the file, and click '''Save'''.
</div>

===In TextEdit===
<div style="overflow:hidden">
[[file:Textedit.png|thumb|In TextEdit, Save the file as HTML]]
Click '''File > Save'''.

For '''Save As''' enter '''index.html'''.

For '''Plan text encoding''' select '''UTF-8'''. (See the screenshot to the right)

Click '''Save'''.

</div>

=Download the background image=
[https://www.imaginet.co.za/kb/images/2/26/Background.png 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 [[Manage files via Plesk control panel|using the hosting control panel]].

For other options, see [[Uploading your website]].