How to Design a Placeholder Page for Your Website
A placeholder page is exactly what it sounds like: It’s the default home page that visitors see at a particular web address — your domain name — when you (or your client) have both registered the domain and set up a hosting plan, but have not yet published the new website or any of your own pages there.
To create your own custom placeholder page, you need access to the following things:
A text, HTML, or WYSIWYG code editor to build the placeholder page such as Dreamweaver, CoffeeCup, Amaya, Kompozer, TextWrangler, or even TextEdit or Notepad
The site owner’s company name/logo in GIF, PNG, or JPG format
The descriptive statement about the site that will be included on the placeholder page
The site owner’s e-mail address, which should use the new domain name such as email@example.com rather than a personal e-mail address from AOL, Gmail, AT&T, or Yahoo!
Here is how to create a simple customized placeholder page styled with internal CSS. By leaving the CSS inside the page, you only have to upload a single file rather than the HTML and the CSS.
Follow these steps to create the placeholder page:
Create a new folder on your computer desktop called Placeholder, and inside that folder, create another folder called images.
The placeholder page and image you’re about to create will be saved to this folder structure.
Save the company logo with the .jpg, .gif, or .png file extension and place it into your new images folder inside the Placeholder folder on your desktop.
To save a copy of the graphic, right-click (Windows) or Control+click (Mac) the image and choose Save (This) Image As. Choose the images folder inside the Placeholder folder on your desktop as the save-to location.
Using your preferred code editor, or your computer’s text editing program, open a new blank document.
To use your computer’s default text editing program, choose Start→All Programs→Accessories→Notepad if you’re using a PC, or on a Mac, launch your Applications folder and double-click the TextEdit icon.
A new untitled document should open automatically. If that doesn’t happen, choose File→New to open a new file.
If you’re using a text editor, type the following basic HTML5 page structure, including the HTML5 DTD and charset meta tag:
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> </html>
Otherwise, if you’re using an HTML code editor, which automatically drops in the structural code for you, skip ahead to Step 5.
Between the opening and closing <title> tags, type a title for the page (for example, Luau-a-go-go).
Your code should now look like this:
<!doctype html><html> <head> <meta charset="utf-8"> <title>Luau-a-go-go</title> </head> <body> </body> </html>
This code sets the title for the page, which appears in the browser’s title bar.
Between the opening and closing <body> tags, type the company name, a descriptive statement or tag line, and an e-mail address (which you convert into an encrypted e-mail address in Step 10).
For example, type the following bold text, making sure to add the paragraph <p> and break <br> tags where indicated:
<!doctype html><html> <head> <meta charset="utf-8"> <title>Luau-a-go-go</title> </head> <body> <p>Luau-a-go-go</p> <br> <h1>Hawaiian Themed Catering</h1><br> <p>Luaus * Special Events * Birthdays * Anniversaries *Celebrations<br> Santa Monica, CA<br> For further information contact<br> firstname.lastname@example.org</p> </body> </html>
The <body> tags hold the text and other content that appear in the browser window.
Choose File→Save to open the Save As dialog box.
You need to save the document to your new Placeholder folder.
In the File Name field, type index.html; in the Save In field, select the Placeholder folder; and in the Save as Type field, select the All Files option. Then click the Save button.
This document does not include any logo graphic yet, so you’ll need to modify the code.
If you’re using TextEdit, choose the Make Plain Text option from the Format menu. You also want to make sure that you include the .html file extension before saving so your document doesn’t accidentally save as an .rtf or .txt file.
Delete the line of code that says <p>Luau-a-go-go</p> and replace it with the following line of code, which inserts the logo graphic onto the page:
<img src="images/luauagogo.gif" alt="Luau-a-go-go" width="208" height="76">
Replace the text in italics if you’re using your client’s logo.
Convert the e-mail address into a working hyperlink using an e-mail encryption service (instead of the regular mailto: e-mail link, which is vulnerable to spambots), like the one found at Dynamic Drive.
Your page code should now look something like this:
Save the changes to your file and preview the page in a browser window.
To preview the page in a browser, drag and drop the icon of your new index.html page into any open browser window. No Internet connection is required to preview the page locally.