So you want to put a splash page on your webpage? Splash pages are a great way of branding your website. This How-To assumes you know quite a bit of HTML and CSS, and it might help if you also know some basic JavaScript.
Step 1
Create your outline page. You could use an external CSS(Cascading Style Sheet) , but in this example we are going to use an internal style sheet . So you need to start off with your basic tags:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
Step 2
"http://www.w3.org/TR/html4/strict.dtd">
Step 3
Fill in the CSS and title information in the <head> section. You will obviously need to change the values to suit your needs:
<html>
<head>
<title>Welcome!</title>
<style type="text/CSS">
body {background-color: #DCDCDC}
</style>
Omitted...
Note:You may want to add a CSS property for the fonts.
Step 4
Add the script to move onto the home page. This section is optional, and you can simply omit it if you do not want it to automatically move on. You mustnot remove the bit in bold .
Omitted...
<script type="text/javascript">
function timeout(){
window.setTimeout("redirect()",5000)}
function redirect(){
window.location="Home.htm"
return}
</script>
Omitted...
<body onload="timeout()">
Omitted...
Notes:The number5000means5seconds. Change this for shorter or longer times. Change the name of the redirect file to the name of your home page.
Step 5
Add in a title. This should probably be the name of your website. An animated GIF is a good idea, although text will load quicker. You can create your own animated GIF images here . To place the image, you simply need to use the <img> tag.
Omitted...
<body>
<img src="Title Image.gif">
</body>
</html>
Notes:This step assumes that you have saved the title image in the same folder as the.htmfile, and that it is named"Title Image.gif" . You can add positioning if you prefer the image to be somewhere else on the screen, such as the center.
Step 6
Add a picture. This should demonstrate what your site is about. Again you can use the <img> tag.
Omitted...
<body>
<img src="Title Image.gif">
<br>
<img src="Sample.gif">
</body>
</html>
Notes:Again, you should rename the file name to your file name, and you can add positioning if you like.
Step 7
Add a button. This button will be a way for visitors to get to the home page quicker. When they click it, they are immediately moved on to the home page.
Omitted...
<img src="Sample.gif">
<br>
<form>
<input type="button" value="Home Page" onClick="redirect()">
</form>
</body>
</html>
Note:You can change the"value"element to change the text displayed on the button.
Step 8
Add some text. This could be anything you like. Generally it is a "Thank You For Visiting" sort of greeting, or a "Created By..." one.
Omitted...
</form>
<p>Thank You For Visiting!</p>
</body>
</html>
Notes:This is where you could be using the CSS for the text. You could use a heading (<h1>) instead if you like.
Step 9
Now you have a working splash page! If you like, you can make it look better by surrounding everything in the <div></div> tags and adding a border, and in any other ways you can think of.
Tips
- Add as much content as you like, but don't make it too busy.
- You could add sounds and video if you like, but this will make a long load time for some people.
- Another way to call the script when the page is loaded is to get rid of the onload="timeout()" part of the <body> tag, and instead place window.onload=timeout; just after the start <script type="text/javascript"> tag. This is a less obtrusive way to add the event handler. You can read more on unobtrusive JavaScript here.
Warnings
- Splash pages can be annoying, and often not needed. Think about WHY you want one. Is it because everyone other site has one, and you think it looks cool? Don't get one. Is it because you need to give visitors important information (best browser to view it in, who it's suitable for etc.) then it is best you put it in. Remember, splash pages slow down your visitor, and it can be a hinderance to have one when it's not needed.
