How to Build Websites With a Splash Page
A splash page appears before the homepage of a website. Splash page use can be a mere aesthetic decision, restrict access until certain requirements are met, give viewers options concerning the website, or show a loading screen while the main website's content loads. This article assumes basic knowledge of XHTML and CSS, and that splash page use is an aesthetic choice.
Other People Are Reading
Instructions
-
-
1
Arrange website documents so that they are all in a one main folder, inside which is a folder named images where all your images will be kept, while your HTML and CSS pages remain in the main folder.
-
2
Create a new HTML document and save it as index.html.
-
-
3
Enter XHTML verification information to strengthen your XHTML and HTML at the top of the page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> -
4
Insert desired splash page text or image in proper HTML format between body tags. The following example includes both a text and image element.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Title Goes Here</title>
</head>
<body><img src="images/splashimage.gif" alt="alternate image text here" />
<p>There's nothing here unless you add text between these tags.</p></body>
</html>**The image element in this example assumes the image is in the images folder and is saved as splashimage.gif.
-
5
Attach your CSS stylesheet underneath the title tags.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Title Goes Here</title>
<link type="text/css" rel="stylesheet" href="index.css" /></head>
<body><img src="images/splashimage.gif" alt="alternate image text here" />
<p>There's nothing here unless you add text between these tags.</p></body>
</html>In this example, the CSS style sheet is named index.css to match the splash page saved name of index.html.
-
6
Place desired links to lead to main content in proper HTML format. This link is attached to the main page saved as about.html.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Title Goes Here</title>
<link type="text/css" rel="stylesheet" href="index.css" /></head>
<body><img src="images/splashimage.gif" alt="alternate image text here" />
<p>There's nothing here unless you add text between these tags.</p><a href="about.html"> about </a>
</body>
</html> -
7
Test everything to retrace your steps if something isn't working, and then upload onto your domain.
-
1
Tips & Warnings
Use div tags or other means to fix up alignment to make the page more pleasing to the eye.
JavaScipt is often used with XHTML, HTML, and CSS to add automatic timers that eliminate the need for a direct link from splash page to main page.
Splash page use has mixed reviews among the web community. Some react negatively to the inclusion of a distracting, and often, unnecessary page. This should be taken into account when considering the target audience.
