Technology

How to Create a Splash Page for a Website

Create your outline page., Fill in the CSS and title information in the section., Add the script to move onto the home page., Add in a title., Add a picture., Add a button., Add some text., Now you have a working splash page!

8 Steps 2 min read Medium

Step-by-Step Guide

  1. 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:<html> <head> <title>Welcome!</title> <style type="text/CSS"> </style> <script type="text/javascript"> </script> </head> <body> </body> </html>

  2. Step 2: 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. , This section is optional, and you can simply omit it if you do not want it to automatically move on.Omitted... <script type="text/javascript"> window.onload=timeout; function timeout(){ window.setTimeout("redirect()"

    5000)}function redirect(){ window.location="Home.htm" return} </script>Omitted... <body onload="timeout()">Omitted...Notes:
    The number 5000 means 5 seconds.

    Change this for shorter or longer times.

    Change the name of the redirect file to the name of your home page. , This should probably be the name of your website, and you should enclose it in <h1></h1> tags to make it easy for search engines to find. , This should demonstrate what your site is about.

    Again you can use the <img> tag.Omitted... <body> <img src="splashimage.jpg"> </body> </html>Notes:
    This step assumes that you have saved the title image in the same folder as the .htm file, and that it is named "splashimage.jpg".

    You can add CSS positioning if you prefer the image to be somewhere else on the screen, such as the center. , 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.

    You could alternatively simply provide a link 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. , 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. , Now it's just time to pretty it up using CSS and make it go live!

  3. Step 3: Add the script to move onto the home page.

  4. Step 4: Add in a title.

  5. Step 5: Add a picture.

  6. Step 6: Add a button.

  7. Step 7: Add some text.

  8. Step 8: Now you have a working splash page!

Detailed Guide

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:<html> <head> <title>Welcome!</title> <style type="text/CSS"> </style> <script type="text/javascript"> </script> </head> <body> </body> </html>

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. , This section is optional, and you can simply omit it if you do not want it to automatically move on.Omitted... <script type="text/javascript"> window.onload=timeout; function timeout(){ window.setTimeout("redirect()"

5000)}function redirect(){ window.location="Home.htm" return} </script>Omitted... <body onload="timeout()">Omitted...Notes:
The number 5000 means 5 seconds.

Change this for shorter or longer times.

Change the name of the redirect file to the name of your home page. , This should probably be the name of your website, and you should enclose it in <h1></h1> tags to make it easy for search engines to find. , This should demonstrate what your site is about.

Again you can use the <img> tag.Omitted... <body> <img src="splashimage.jpg"> </body> </html>Notes:
This step assumes that you have saved the title image in the same folder as the .htm file, and that it is named "splashimage.jpg".

You can add CSS positioning if you prefer the image to be somewhere else on the screen, such as the center. , 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.

You could alternatively simply provide a link 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. , 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. , Now it's just time to pretty it up using CSS and make it go live!

About the Author

D

Deborah Davis

Dedicated to helping readers learn new skills in practical skills and beyond.

82 articles
View all articles
Share this guide: Twitter Facebook Email

Rate This Guide

--
Loading...
5
0
4
0
3
0
2
0
1
0

How helpful was this guide? Click to rate:

More from Technology

Related Guides