Wow! Have you ever felt intimidated by acronyms? HTML, XHTML, DHTML, XML, CSS, DOM, PHP... the list goes on and on! How the heck are you ever supposed to make heads or tails of all of this? For the web-site developer wanna-be, the challenge may seem overwhelming.
So I began a quest to educate myself about web-site development. This all started out many months ago with the intriguing idea of writing Google Gadgets. Particularly, I wanted to create a Georeferencing Calculator - a gadget that would convert Latitudes and Longitudes to Earth Centered Earth Fixed (ECEF) coordinates. (Yep, more acronyms). How hard could that be? Well it turns out you need to know XML, HTML, and JavaScript. Oh that sounded bad right from the start. I already knew some HTML, but that was about it. So in time, I actually gave up on this little idea. However, I continued to want to build this little "gadget" but on a web page.
Web Serving on the Mac with ApacheFinally a couple weeks ago, it occurred to me that I could actually serve web pages on my Mac. Macs conveniently come with the Apache web server built in. All I had to do was turn it on by selecting Personal Web Sharing under Sharing in the System Preferences:
With the help of some tutorials (see
Apache Web Serving with Jaguar), I managed to figure out where to actually store my
.html and
.css files so I could view them in a web browser via
http://localhost/. In my case (and probably in most cases initially), the default location for storing these files is in
/Library/WebServer/Documents.
So now with the ability to write my own web pages and serve them up to myself, I launched into reviewing my HTML skills and taking my web skills to the next level.
Learning CSSFortunately, I had purchased a book last year called
Creating Web Sites - The Missing Manual (by Matthew Macdonald, 2005). I had read bits and pieces of it before, but really hadn't delved into it much. Lo and behold it has a wonderful review of HTML and an introduction to Cascading Style Sheets (CSS) (and an introduction to blogging as well, BTW)!
Okay, get this. The idea behind CSS is to separate the
content of a web page from its
formatting or style. Styling encompasses such things as text color, background color or image, fonts, line spacings, etc. You can embed the CSS styling instructions within your
.html file or you can keep it in a separate
.css file. The CSS file can be reused for multiple web pages. It turns out to be an amazing thing! There are some extremely excellent examples of how you can use CSS to completely alter the look of a web page at the
CSS Zen Garden web page. (There's an accompanying book, also).
The key to using CSS successfully (IMO) is the use of HTML
div tags so that you can break up the content of your web page into blocks. If you assign an id or a class to a particular
div (e.g.
< class="main_content">), then you can style everything within that block by referencing its class or id.
CSS also provides a nice mechanism for controlling the positions of blocks of HTML content. You can position blocks absolutely, you can control their widths / heights, and you can "float" blocks to the left or right side of the block's container (e.g. the web page). This ability to control the placement of content blocks allows you to format your web page without the use of tables and tables within tables, etc. In fact, when you add images to your blogger postings, you have the option to float your images to the left or right. I've done this in previous posts. Using CSS for controlling layouts is something I have yet to really mastered, but I have had some success.
I also found the book
CSS - The Missing Manual (by David McFarland, 2006) to be an excellent means of building on what I had learned in the
Creating Web Sites book.
Password Protecting a Web PageI used my new-found CSS skills to mock up a web site for our local GarageTown HOA. In doing so, I was also presented with the problem of password-protecting one of the web pages. Turns out this was fairly easy with the Apache web server. Here are some basic instructions:
- Suppose you have a web page you want to password protect, e.g. members_only.html.
- Put this web page in its own sub-directory (e.g. /Library/WebServer/Documents/members) and be sure to update whatever links you had to it from other pages.
- Create a text file called .htaccess in the members directory with the following content. You do know how to use vi, right? :)
- AuthName "Members Only"
- AuthType Basic
- AuthUserFile my_secretdir/.htpasswd
- require valid-user
- Note that the AuthName will appear in the dialog box when the user is prompted for a username and password.
- The .htpasswd file should be located in a directory which is not accessible by the public.
- Now create the .htpasswd file as follows:
- cd my_secretdir
- htpasswd -c .htpasswd
- htpasswd .htpasswd user1
- You'll be prompted for the password for user1.
- Multiple user names can be added to the .htpasswd file.
- Be sure to set the protections on the my_secretdir and on the .htpasswd file to only allow access by the owner and the Apache server.
- Turn on password authorization on your Apache web server as follows:
- Locate the file httpd.conf which should be in /private/etc/httpd
- Make a backup copy of this file and then edit it (you may need to sudo vi)
- Locate the AllowOverride line which follows comments about the .htaccess file (should be the 2nd instance) and change None to All
Remember, always proceed with caution and heed my advice with a grain of salt!Here is the final product - a mock-up of my HOA web-site and the dialog box requesting a username and password:
Having mastered some CSS with this little project, I then returned to building a Georeferencing Calculator web page. More on that (and JavaScript) on my next post!