HTML - Password Protect a Web Page ?

Posted on 2010-11-17
Last Modified: 2013-12-25
How can I password protect a web page that would reqire a user to key a given password to gain access to that page.....  The page is in HTML and I'm using Yahoo's SiteBuilder to contruct the page.  Also, what is a Good/Free HTML editor to use for a beginner
Question by:Qmez

Expert Comment

ID: 34157441

Expert Comment

ID: 34157459
Also, if you're using Yahoo Site builder already, just use it's HTML editor.

Expert Comment

ID: 34159718
Do you know what the web server is? Apache? IIS?

Do you have access to the web server settings via a control panel or directly?

If Apache you can use htaccess or if IIS you can use Authentication is IIS.
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

LVL 44

Expert Comment

ID: 34160258
You password protect a folder where the webpage is located by login to that folder.  That is the way it is done on a normal shared hosting server.  Yahoo may be the same or different.

Expert Comment

ID: 34161588
You can use a javascript to password protect a page with a password. It's not ultra-secure, but it works. If you created a paga named:  "protected.htm" the password required for this script would be "protected"  (no quotes).  Just put this script on any page to show a password box.

The script assumes your pages are in teh same directory and ending in .htm. If it's .html or .php, change the

var suffix = ".htm" to var suffix = ".html", etc.

if your pages are in another directory, you can eliminate the ".htm" and the password will be the folder that is protected. Quick little script, but again ... not ultra-secure. .htaccess is much better.

<SCRIPT language=JavaScript>  
var suffix = ".htm"  
var pass_msg = "Enter your password below to view your page.<P>";  
function go_there()  
location.href = "../" + document.pass_form.pass.value + suffix;
document.write('<br><form name="pass_form" onSubmit="go_there();return false">' + pass_msg + '<br><input type="password" name="pass" size="20" value="">' + '&nbsp;<input type="button" value="OK" OnClick="go_there()"></form>');  
// -->

LVL 38

Accepted Solution

BillDL earned 500 total points
ID: 34389226
Hi Qmez

Online Web Site building "Tools" are quite often slow and limited, and may not allow the flexibility of using additional "script" code in your pages.  You need to find that out.

Have a look at Kompozer for a free Web Page editor that will be a very good starting point and may do everything you want in the following years:

You won't get any cheaper than free, and it is a WYSIWYG editor, which means "What you see is what you get" ... well, it never is actually, but it's a good approximation of what a site visitor would see.

Many of the "free HTML editors" you will find in searches using those terms are programs that you write the HTML code and get a split-pane view of how it should look, rather than ones that allow you to insert and arrange content like images directly into the editor in a similar way to a word processing application, and then "preview in browser".

Kompozer is based on the same code that is used in other Mozilla projects like Firefox browser. It started out as "Composer" being integrated right into the Mozilla Suite (browser, email, etc) and then branched off as "NVU" which you will probably have seen listed somewhere if you have searched for free editors. I have always been disinclined to use NVU because it tries to push the "Intuit Web Building Systems" and domain names in your face:

Kompozer allows you to "publish" your website straight to your web storage using FTP. That means File Transfer Protocol and is a standard way to log in and transfer files from computer to server and vice versa.  You would need to find out from the Yahoo help pages for your webspace whether they allow FTP uploads, and if so what the web address is to the root of your storage area.  There should be a page of "settings" for those who prefer to use their own upload methods.  You just set these in Kompozer and you can can upload new, overwrite and update existing, or delete pages and files on or from your web storage area.

The secret to creating your website is the organisation of your pages, files like images and linked documents, and your scripts.  That is something that many online web building tools don't allow you to control. Having your pages and files arranged in separate folders according to the pages they relate to, or according to the nature of the files, makes it much easier to keep track of content once your site grows and more content is added.  If you need to modify a particular page, or an image that shows in a page, you should be able to locate all the files used by that page efficiently.

Having FTPd your locally stored "website to the Server, you will have a mirror image of the content on the server, and some editors allow you to place these side by side and use drag and drop copying, moving, etc between the two and also directly on the server.

If you didn't like the Kompozer method of "publishing" the site using FTP, then there is a great and absolutely free FTP application by CoffeeCup software:
That's what I use, but you will realise if you search for "free FTP" that there are a lot more quality FTP applications for free than there are free "drag and drop" Web Page Editors, eg. FileZilla:

The decision is yours whether you persist with the Yahoo site builder tools and just practice with eg. Kompozer "offline" for now, but I would say that you don't really want to create too much content on the yahoo web space if you intend to later use something like Kompozer.

The reason I say this is that online site builders create quite a lot of their own quirky code and file hierarchies that suit their intentions.  To later try and update the content with pages created in your installed editor can leave a mish-mash of loose files and strange file and folder names.  Downloading, re-editing (ie. removing all the yahoo-centric stuff), and uploading pages that were already created on the yahoo webspace by their site builder can be difficult because of the way they were written.

Better to start now and decide on naming conventions for files, hierarchy for folders, etc, and upload a brand new website to replace the old when you are ready.  There is a lot of help online that gives advice about organising files and folders for a website.

Hope this helps

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Learn by example how to specify CSS selectors for Selenium WebDriver test automation software.
Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question