Wednesday, September 20, 2017
Sharp-Journal > Knowledgebase > How to create html maintenance webpage using notepad

How to create html maintenance webpage using notepad

Create an html page using a notepad

The acronyms HTML, SQL, XHTML, COBOL, FORTRAN, are some computer coding languages I learnt their full meanings some years ago. However, HTML is the subject of attention; it means Hypertext Markup Language. It is used in combination with other coding programs like CSS (Cascading Style Sheet) to build a website or webpage.

Most people use Adobe Dreamweaver to build their hand coded website but Notepad can also serve the same purpose though not as organized and advanced like Dreamweaver. The basic thing is to know the HTML code syntax, arrangement and integration with CSS. Although HTML can be used to achieve a simple webpage on its own but what brings out the beauty is CSS and that is why its integration is very important. The attention here is just to show a simple webpage.

Creating a maintenance page is very useful in website management. There are plugins that can help achieve this purpose but if you want to try something simple devoid of any plugin, then you can create one through Notepad.

First, open your Notepad from program list on your PC.

Second, type in your syntax; codes and words.

Third, save as html file.

Fourth, open with any browser and there you have it.

Enter the following codes accordingly to your Notepad to replicate my example.

<!DOCTYPE html>

<html>

<head>

<title>SHARP JOURNAL</title>

</head>

<body>

<center>

<h4>Temporarily unavailable. </h4>

<h1>Sharp Journal is going for recess. </h1>

<h2>Coming back soon</h2>

</center>

<center>

<p style=”font-family:arial; color:#FF0000;”>CONTACT: </p>

<p><a href=”mailto:[email protected]” rel=”nofollow”>Mail</p>

<p><a href=”https://twitter.com/sharp_journal” rel=”nofollow”>Twitter</p>

<p><a href=”https://www.facebook.com/sharpjournal” rel=”nofollow”>Facebook</p>

</center>

</body>

</html>

The result

SJ-recess

NOTE:

  1. Opening doc type (<!DOCTYPE html>): It tells the computer or browser that this is an html file.
  2. <html></html>: This is the alpha and omega; it begins and end all html commands.
  3. <head></head> contains the webpage title (Sharp Journal).
  4. <body></body> contains
    • Alignment (<center></center>).
    • Type heading: h1 – h6 represents type size. H1 is bolder and legible while others are less legible according to their number arrangement.
    • Paragraph (<p></p>) contains body text and one can have multiple of it. Within the paragraph command I have ‘<a href>’ which is used to reference a web address. The font style and colour is also inclusive; type in any font family and get variant colours of your choice using appropriate colour representation.
  5. Text insertion shows what I want those commands to do but most importantly enclosing each command before initiating another is very important to prevent syntax error.

You need a maintenance page like this if your website is still under construction or you want to carry out maintenance on your website. But if you are using a CMS like WordPress, you will need some ht-access modification to redirect your visitors to your maintenance page.

Featured Image: 99robots.com

EDITOR
Mr_Odunayo Bankole is a multimedia professional. His brand of journalism is both liberal and conservative. A broadcast major, he is very passionate about online journalism and digital media. Feedback—[email protected]

Sharing is caring. Share the joy!
  •  
  •  
  •  
  •  
  •