Making Webpages HTTPS SSL Secure
Adding SSL secure webpages to your website
Find your secure server
Support to add secure https://
pages to your website. This may be for your entire site, or for a secure contact or order form. In some cases you may want to place the secure files inside a folder. Support for this type of setup should be provided by your web hosting company.
To use secure https://
links a security SSL certificate is required (Secure Sockets Layer). You'll need to contact your web hosting company to see if you have SSL and what the secure link path is. Your secure URL may look something like the following for a single page:
Or it may appear like the following:
Or if your entire website will be secure you'll use https in the link instead of http:
In any case you'll need to contact your hosting company for help with this setup.
Secure setup notes
Full secure website option
- Allwebco Design does not offer support for creating a secure site or webpage. Contact your hosting company for help and support for SSL.
- In most cases you will not need to place secure pages in a subdirectory.
- You may, or may not, need to edit each HTML page to make them secure.
- You may, or may not, need to edit each .css file and .js file with the secure path.
- If you have Flash animation in your webpages, you may need to hard code your text into the Flash header. See advanced Flash variables. Optionally, you can use the template graphic logo option on your secure pages.
- You may optionally (if securing single pages) want to make copies of your .css files and .js files and rename them to be "secure-filename.xxx" files so you have separate secure page support files.
If you're making your entire website secure with https:// linking, adding secure paths to all your files as outlined below may not be required
. With a full secure site, optionally check your webpages to see if you added any absolute links that use the full domain path and change them from http:// to https://. Additionally you may then want to "force HTTPS" using your .htaccess file. This is an advanced user setting. Contact your hosting company support for help.
See: Google Support - Secure your site with HTTPS
Creating secure single pages
The following modifications may be required only
if you are making a single page or just a few pages on your website secure.
Choose an HTML page you want to make secure. This type of editing is what is known as adding Absolute Paths
. You will be adding your secure server path in front of all .js file paths, image paths and .css file paths in your HTML secure page.
In the examples below we are using https://your-web-domain.com:2083/
as the secure path link. Your secure path may be different.
You will need the support files (css, js and images) uploaded to your hosting area for this to work when editing on your local hard drive.
Edit your HTML page on your local hard drive. You will put https://your-web-domain.com:2083/
(or your SSL path) in front of all the .js paths, the .css paths, and in front of every image path.
Edit all .css file lines. Example:
<link rel="StyleSheet" href="https://your-web-domain.com:2083/coolstyle.css" type="text/css">
Edit all .js file lines. Example:
Edit all image file lines. Example:
<img src="https://your-web-domain.com:2083/picts/contact.jpg" height="125" width="200" border="0" alt="Image" class="borders"><br>
You must do this with every picture and every file that the secure page will be using.
The .js files
You must also edit your "menu.js" and put http://your-web-domain/
in front of all the links and put https://your-web-domain.com:2083/
in front of all image paths. You will need to do a lot of editing to your files to make this work properly.
You will need all image paths in your "menu.js" to be secure paths, however, the links to other pages in the "menu.js" need to be absolute, but not secure to non-secure pages.
Check every .js file that is being used in your secure page for image paths.
In the "header.js" edit the path to the logo image (or .swf file in 2 places if you have a Flash header) to make them a secure path, or use the graphic header for your secure page. Also see "Secure setup notes" above on this page.
The CSS file
Search your .css files for "url". These will be image paths. You will need to edit all .css file image paths with your secure path. EXAMPLE:
Link to the secure page
Once you have edited your template files as indicated above, you can now add a link to your secure page in your "menu.js". In this example we have made the contact.htm secure. Your link should appear similar to the following:
An "SSL Certificate" may be offered by your hosting company. You will need to contact your hosting company to see what they offer and for more information on "SSL Certificates".