Creating Websites on OS X

Let your creative juices flow

Justin Williams Skip to comments 21 Comments (Comments Closed Closed)

Want to get a headstart on being a web developer in Mac OS X? Justin Williams shows off some of the tools of his trade and even gives a few helpful hints for the budding web developers out there.

Have you ever had the desire to learn how to create a personal website of your own? Maybe you want a page to show off pictures of your family. Maybe you want to setup a weblog (like we maczealots do). Maybe you want to setup your resume online so people can easily access it. Whatever your reasons, MacOS X makes it simple to setup a testing environment to create your web pages on.

Each version of MacOS X comes with a copy of the Apache web server. Apache powers most of the web. It is the most used server for sharing web pages according to statistics (sorry Microsoft. No monopoly there). With Apache you can setup very basic web sites. What makes Apache even more powerful is extending its functionality with other technologies that tie into it: PHP, MySQL, JSP, Perl, etc. In fact, in each of our blogging articles, we have used Apache and MySQL. Even with all of those articles, we have never taken the time to explain to the novice user the basics of setting up a website on your Mac and getting it out on the Internet for everyone to see.

Before we begin, we should go through a few basics unwritten laws of the web.

The 10 Commandments of Web Design

This article is a supplement to a presentation I gave for my Mac User Group, and I began the lecture by explaining these rules I found on the Internet. I had two reasons for taking the time to go through them. First off, they are humorous and lighten the mood in the room. Secondly, they need to be covered because I may have to look at your site one day while surfing the web, and don't want my eyes hurting. You can download a PDF of these rules from the ReData website. Print it off and memorize it. Let's go through these rules one by one.

  1. Thou shalt not use frames unless there is a need: Frames are websites that link two or three HTML pages into a single view. Why is this bad? Try saving a page from a frames site in your bookmarks. It's hard to do. Frames are also not accessible whatsoever. Frames don't work at all in text based browsers.
  2. Thou shalt not use the scrolling Marquee that everyone else uses: Ever been to a site and see a piece of text scrolling across the web page like a stock ticker? That's because of the <marquee> tag. It is distracting and takes away from your content.
  3. Thou shalt look up the word 'consistency' in Webster's Dictionary before the layout of all your site pages. The user should not be confused with a different page design every time they click to a new page: This means that if your homepage has a certain look and navigation structure to it, your child pages should have that same look. Take a look at MacZealots. Notice how the header and footer are the same for every page? Notice how every article page has the same sidebar? That's consistency.
  4. Thou shalt not use horizontal rules that are rainbow animations unless you are hawaiian.: These were cool 8 years ago. They aren't now.
  5. Thou shalt not use brightly colored patterned backgrounds that make the content impossible to read unless thou want to induce vomiting for someone that has ingested poison: I don't think this commandment would fit on a tablet, but it's an important one. Bright backgrounds make the text hard to read and hurt my eyes. Imagine a novel that had black text on a bright yellow and orange background. Do you want to read that for an extended period of time? Or, just try reading something on C|Net. Youch!
  6. Thou shalt not apply for web-design jobs after a single community College class on using FrontPage: For those that don't know, FrontPage is Microsoft's tool to develop web pages without using and sort of markup code. The problem with FrontPage is that it teaches bad practices and outputs the most god awful source code I have ever seen. Want an example? Look at the calendar for one of my courses this year. It isn't very usable in Safari. Now look at the source code (View -> View Source). Isn't that scary looking?
  7. Thou shalt not use a visible counter on a business page: Counters can be manipulated easily (hit the refresh button often). Another reason to avoid them is if you have an unpopular site. If a potential customer comes to your site and sees you have only have a few hundred visitors, they may be wary of purchasing anything from you. Use server logs instead.
  8. Thou shalt not use "Best Viewed with Safari" or "best viewed at 800 x 600 resolution": Imagine renting a DVD and popping it into your DVD player only to be greeted by a screen that says "This DVD is not compatible with your TV and will, therefore, not play. You need a high definition TV with 1080i resolution."
  9. Thou shalt not use animated gif files unless Moses himself appears in a burning pile of copier paper in your office and insists you should: How's that for an visual? Animated GIFs are cliché, tacky, and usually poorly designed.
  10. Thou shalt be clear about what the hell thou art presenting to the user: Think like a user of your website. Will they understand how you have layed out your links? Will they realize they are supposed to click something to go somewhere else? Even if something looks good, that is only half the battle. It needs to be functional as well.

Creationism

Keeping with my biblical references, let's discuss a few bits of history when it comes to the web. There are four important things to remember.

After creation came evolution. The web is a constantly evolving delivery medium. The biggest push these days on the web has been standards compliant websites. Web standards in a nutshell is separating your content from your design. This involves creating a clean, structured XHTML web page and putting all of your styling and layout information in a separate CSS file.

HTML Uses CSS

You may be asking yourself why this is important and why you should even care. Using standards allows you to create sites that are usable by all web users. This includes those using the normal range of browsers, text browsers such as Lynx, and audible browsers such as those used by the blind. Neglecting a certain class of users from your site is not only thoughtless, it can cost you business if you are running a company website.

As you begin to hone your skills, developing web sites with standards will be a faster process than using tables and font tags to layout a site. You will especially notice this when it comes time to redesign a site. You won't have hundreds of font tags and table attributes to edit. You will have a single CSS file to edit. A few changes to a CSS file, and you have a completely new design.

The final reason: money. Using web standards cuts down on your web page's size, which saves you bandwidth. A famous example is ESPN.com. It was redesigned to take advantage of web standards a little over a year ago and is saving Disney millions of dollars in bandwidth charges. ESPN.com serves out over 40,000,000 pages per day. By switching to web standards for their designs, they cut their pages size down by approximately 50 kilobytes. Their projected bandwidth savings are two terabytes a day. For the less math inclined, that is sixty-one terabytes a month and 730 terabytes per year. One terabyte is one thousand gigabytes. Sold yet?

Configuring Your Mac

The Sharing Preference Pane

Now that i have stepped off my soap box, and done my part in training you to think before design, we can begin to set up your Mac to serve web pages. Brace yourself. This is difficult.

Step 1: Open System Preferences
Step 2: Click the Sharing Pane
Step 3: Check Personal Web Sharing

Your web server is now running. Difficult wasn't it? If you visit http://localhost/ you will be greeted with a page telling you that you successfully setup your web server. The next thing we are going to want to do is create our own web pages and store them locally on the server. If you want the pages to be accessible at http://localhost, then drop your pages in /Library/WebServer/Documents/. This is the parent directory of the Apache web server. The added benefit of placing your files here is that if you want to setup a weblog or use other CGI scripts, they are only a directory away in the CGI-Documents folder.

If you are just interested in testing out your static html pages that just have HTML, CSS, and images, you can place them in the Sites folder inside your home directory. Just save whatever pages or images you create in that folder. You can access that by visiting http://localhost/~username/ (replace username with your username).

If you aren't sure what your user name is, you can easily check it from the Sharing preference pane. Look at the bottom at the line that says, "View this computers website at..." Click the second link and you will load the page that is in your Sites folder.

Sharing Your Site With The World

While you could serve your web site off your Mac, there are a few reasons why you may not want to. First, your ISP may not appreciate it. Many make it hard, if not, impossible to share web pages. Another reason may be setting up a router to allow access to your Mac's web page. Every router is different and trying to explain how to do it on each one is a task I don't have the resources to complete.

There are two routes we can take in getting your pages online. If you have an iDisk, we can easily publish your pages on the server directly from the Finder. If you have a web host somewhere else that allows FTP access, we can upload the website to your server using an FTP client such as Panic's Transmit. Let's tackle .Mac first.

If you don't keep a local copy of your iDisk, go up to the Go menu in the Finder and select iDisk -> My iDisk. Once mounted, drag the files from your home directory's Sites folder into your iDisks' sites folder. Once uploaded to the server you can access it from http://homepage.mac.com/username/filename.html. Replace username with your .Mac username and filename with the name of your HTML file.

A bit more difficult task is uploading to FTP. You are going to need to know the server address, your username, and your password to connect to the server. You can get these from your ISP if you don't know them. As I said before, we are going to use Transmit to upload these files to our server. Transmit is one of the best FTP clients developed by Panic software. If you have your information, put it into Transmit and hit the Connect button. The layout of your FTP server will vary, but it's generally assumed that you will have a folder named public_html, www, or httpdocs. Place your HTML, CSS, and image files in that directory. That is the main area of your specific web page. You should then be able to access the page from your web browser. It is hard to fully explain this task because it is so diverse between every different user. I would suggest contacting your ISP or web host if you are having trouble.

Tools of the Trade

If you are looking for some tools to ease your ability to create web sites, look no further. While you may think Microsoft Word is the best tool for creating your web pages, you are most definitely wrong. There are several tools available for the Mac platform that make writing HTML and CSS easy much easier. I'll first highlight the tools I use, and then list some alternatives below them.

HTML Editor: BBEdit 8
BBEdit is the holy grail of text editors for the Macintosh. It includes built in validation, preview in any browser, auto indenting, and HTMLTidy. HTMLTidy is a great tool for ensuring your HTML is valid. If you forget to close a tag, Tidy will take care of it for you.

Honorable Mentions

BBEdit carries a steep price of $179, but if you spend most of your day working on HTML, it is well worth the investment.

CSS Editor: CSSEdit
Sure I could use BBEdit to write my CSS, but why would I want to when CSSEdit makes it easy for me to manipulate my styles? CSSEdit gives you the choice of a friendly Aqua interface to input commonly used CSS attributes for text, padding, borders, and backgrounds or a powerful manually entry mode. If you decide to type out your own CSS in manual mode, CSSEdit lends a helping hand with its auto-complete functionality. Less typing is a good thing.

CSSEdit is worth $24.95, and I recommend it to anyone that is serious about designing web pages. I don't know how I lived without it.

FTP Client: Transmit
Transmit is almost the perfect FTP client. It has a gorgeous interface, is easy to use, and has just enough features to make it useful for the power user. The only feature missing from the application is the ability to define separate applications to edit specific file types. For example, I like editing PHP, HTML, and JSP in BBEdit, but I would prefer to edit my CSS in CSSEdit. To do that currently, I have to download my CSS file to my local drive, edit it there, and upload it manually. That's too many steps. Regardless, I still enjoy the app.

Transmit is $24.95.

Honorable Mentions

Collaborative Editing: SubEthaEdit

If I am working on a page with the other MacZealots, we always know the easiest way to work. One of us creates the file locally, and then shares it across the Internet so that we can access it via SubEthaEdit. Developed by TheCodingMonkeys, three college students in Germany, SubEthaEdit has changed the way Mac users collaborate on documents. They eliminated several steps from the process. Before, one would work on a file, email it to the others, wait for their changes, and implement them. Now, just create a file, share it online, and everyone works from the same file.

SubEthaEdit is free for non-commercial use, and $35 for commercial licenses.

Resources

If you are looking for some resources to help further your knowledge of CSS and XHTML, look no further.

Books

Online Tutorials

Conclusion

Creating your web pages on your Mac is a simple process. Most of this article was theory than actual steps to set up OS X to work. That is one of the benefits of being a Mac user. If you were using Windows XP, you would have to locate your install disc, jump through Add/Remove Programs, find Internet Information Server, install it, restart, configure your site, and then copy your pages. We just clicked a button and it worked.

If you have any questions or would like to list any other resources, leave them in the comments.

Justin WilliamsJustin Williams is founder and chief author for MacZealots. He switched to the Mac almost five years ago hasn't looked back since. When not blogging or coding, you can find him watching copious amounts of TV. Justin can be reached at

Reader Comments (21)

DISCLAIMER: The views expressed below are those of their authors and not necessarily endorsed or supported by MacZealots.com. In all cases, the comments provided here are offered as a courtesy and will be moderated. Any content deemed off-topic or offensive will be removed without notice. Posting a comment here boils down to two things: 1.) Think before you type 2.) Respect the thoughts of others. See our commenting guidelines and/or privacy policy for more information.

1 Bob Saturday remarks:
#1) On October 10, 2004 6:12 PM

you wrote:

> Frames are also not accessible whatsoever.
> Frames don’t work at all in text based browsers.

and

> God made HTML tables for displaying tabular
> data: NOT to layout your web pages

and

> God created Cascading Style Sheets (CSS)
> to style your websites and lay it out
> structurally

Frame should goeth far yon.
Verily, verily, frames stinketh.

While the other comments art pretty
neat in theory:

Internet Explorer doeth render CSS
inconsistently to the point junketh.

What text browsers art there that renderth
CSS correctly? What GUI browsers renderth CSS
with correct measure? If there be few or none,
why wouldst one not useth tables for layout
for their sake?

I know not these answers, oh great prophet
of WWW, but look forward to your judgements.

2 John Mastrolia remarks:
#2) On October 12, 2004 6:19 PM

Thanks for the article on web sites. I have a few criticisms though only because I’m a hopeless cynic. This laundry list of web tools is more than just a casual investment. Dreamweaver is, what, $399? BBEdit you mentioned is another $179. And the many CSS editing tools are expensive as well, though CSSEdit is a bargain at its $24.95 price tag. So my point? Emacs or vi comes with Mac OS/X (hell, even Pico and TextEdit.app are included). Reading up at http://www.w3c.org provides everything you need to know about creating web pages to current standards.

Why invest all this hard earned money in Mac OS/X Aqua applications when you can “fool around” and get familiar with web authoring with a minimal investment? Yes, the ramp-up time is significant for the less costly method, but you also learn A LOT LESS when using a GUI front end. Once armed with the knowledge of how to create and maintain a web site you can make more informed choices about the authoring tools you plan to use in the future.

Just my $0.02 worth.
YMMV.

Thanks.

3 Ash remarks:
#3) On October 13, 2004 6:45 AM

With regards to using vi or emacs to write webpages upto current standards:

If all you want to do is work on designing a webpage, then the tools you use shouldn’t hinder that job for you. If you know vi and emacs, that’s great; but anyone under the age of 30 likely doesn’t.

With regards to http://www.w3c.org, only a mindless drone would read every piece of sementatic text there. It’s a specification, not instruction or tutorial on building a webpage.

The right tools for the right job mean you don’t get sidetracked learning something else you don’t really need.

4 Justin Williams remarks:
#4) On October 13, 2004 12:04 PM

it’s not so much that people under the age of 30 don’t use vi or emacs (I’m 21 and I love vi). The focus group for this article is someone that doesn’t even know that they can use their Mac as a place to setup their web pages.

If they don’t know that, how much of any Terminal application do you expect them to know? If you use vi for everything, more power to you.

5 John Mastrolia remarks:
#5) On October 18, 2004 10:32 PM

Justin … Thank you again for the excellent article on web page development on Mac OS/X. It is obvious, even to the casual observer, that if one plans to do serious web development on the platform, professional tools make the job much easier, intuitive, and yield results quickly. And, yes, I am over 30 and know both vi and emacs :-) All my web pages, and CSS, are composed in one of those text editors.

I think your aritcle helps those who wish to get a web site running on their MacIntosh computers without the burden of learning a programming language, which HTML/XML is. And to my sarcastic friend Ash: Understanding the HTML language helps when writing web pages viewable across multiple platforms and web browsers. It may be drivel to you, but not to a web developer. Any Computer Science major worth his salt knows vi, at a mininum, by the time they achieve a degree in the field regardless of age.

And finally, not everyone need limit their knowledge of computers to “drag and drop” GUIs.

6 JO-Nathan remarks:
#6) On October 25, 2004 3:33 PM

I am one of those who has never made a web page or site or anything like that. However, I am all of a suddein in need of a quick site for my business until I can afford to do more. Why is WORD a poor choice for making web pages. So far it seems to be the easiest method(plus I already have it- so it’s no extra $ spent). from what I have seen I can build a web page on it w/o knowing or using HTML tags.

Jonathan

7 Rayne remarks:
#7) On November 1, 2004 4:20 PM

Actually, if you had XP, it would depend on which version. XP Home doesn’t support Internet Information Server (IIS), so you’d have to find another web server to install or upgrade to XP Professional if you absolutely had to use IIS.

8 Stef remarks:
#8) On November 14, 2004 7:19 PM

For those that want to play with more than one site on a single machine, I’d highly recommend a script by Patrick Gibson called virtualhost.sh:
http://www.patrickgibson.com/news/andsuch/000091.php

Basically it automates the creation of a virtual host in both NetInfoManager & the Apache webserver and makes a folder in your home/sites/ directory, so you can run multiple different websites on one machine (e.g. typing simply http://ballagroove/ or http://newsite/ will take you to each seperate local site).

It’s a bit tricky to set up — you’ll need to be at least a little comfortable with the command line and understand what a shell script is — but it’s very, very useful :)

9 Vic remarks:
#9) On May 6, 2005 5:13 AM

Great article, but ESPN.com using standards is a bad example. Okay, well, it’s a good example about the money that can be saved, but it’s a bad example of a website. ESPN.com sucks! Bad, bad design. It brings my Mac to it’s knees. It’s slow to load and it uses a steady 60% CPU in any browser.

10 Joris remarks:
#10) On May 8, 2005 6:17 PM

JO-NATHAN REMARKS:
“Why is WORD a poor choice for making web pages. So far it seems to be the easiest method(plus I already have it- so it�s no extra $ spent). from what I have seen I can build a web page on it w/o knowing or using HTML tags.”

Your not the only one that doesn’t know HTML, WORD doesn’t seem to know it either. Webpages created by WORD use a lot of non-standard markup. Since you’re creating a website for your business I assume you want as many potential customers to reach your website. So why exclude people who don’t have a browser which correctly displays the webpage created by WORD. I almost know for sure Safari or Mozilla won’t render the webpage the same as IE does.

Use standards complient code and anyone using a standard complient browser of their choice can view the webpage, they don’t have to rely on software they don’t want or can’t use.

11 Meg remarks:
#11) On May 18, 2005 7:54 PM

Awesome article, esp. the Creationism section.

12 joel remarks:
#12) On August 16, 2005 1:15 PM

awesome awesome awesome tutorial. i cant thankyou enough. im new to the mac stuff, i got one so i could make my websites, now my room is full of unix books and dreamweaver magazines, and i stil have nothing done, but my interest in emacs and vi must surely lead somewhere, once i get wordpress and my apache server running i’ll be on fire, i hope.
ya know i never even knew it was so straight forward, not easy, but straight forward. thanks for publishing such a great tutorial. (i even took a short course at college to learn dreamweaver - i lernt more in the 15 min it took me to soak this article up than i did in 15 weeks of four hour workshops !)

thanks a bunch !

13 Richard Chambers remarks:
#13) On September 28, 2005 10:26 PM

I followed your instructions faithfully, but instead of “View this computer’s website at…” I get “Other Macintosh users can access your computer at afp://10.0.1.2/ “. What is going on?

14 Henk Hodiamont remarks:
#14) On September 30, 2005 2:41 AM

You wrote: “Try saving a page from a frames site in your bookmarks. It’s hard to do.”

No problem with Firefox and other browsers.

You wrote: “Frames are also not accessible whatsoever.”
Of course they are.

“Frames don’t work at all in text based browsers.”
So what? Do we need text based browsers in 2005? In Firefox, Explorer, Safari, Opera and so on, frames have no problems at all.

15 Fatass Bastard remarks:
#15) On November 29, 2005 11:12 AM

can’t we just make a website without all this shite getting in our way or is that too much too ask?

16 Jack Sheek remarks:
#16) On November 29, 2005 11:17 AM

Could some one please marry me or I’ll go mental. More to the point, I cannot work out how to access a page which lets me set up my website.I would appreciate if I was emailed to tell me how to set up my homepage. Thank you. PS I LUV U!

17 Guido Norbak remarks:
#17) On November 29, 2005 3:29 PM

You wrote:

“The next thing we are going to want to do is create our own web pages and store them locally on the server. If you want the pages to be accessible at http://localhost, then drop your pages in /Library/WebServer/Documents/. This is the parent directory of the Apache web server. The added benefit of placing your files here is that if you want to setup a weblog or use other CGI scripts, they are only a directory away in the CGI-Documents folder.”

There were no /WebServer/Documents folders in my Library folder so I created them and put a test index.html page there. I was not able to access the test page with http://localhost. Could you tell me what I am doing wrong and provide more direction please?

Thanks for the great information in your article. It validates much of what I tell people all the time about making your pages accessible to a wider audience and about the appaling job that FrontPage does.

18 David McGrew remarks:
#18) On February 26, 2006 7:54 AM

Well, alright. I’m making the switch back to Mac after 13 years in Windows World and will be recreating two websites using Mac. Thanks for the 10 Commandments and other tips. I’ll keep you posted.

19 Cheryl remarks:
#19) On March 5, 2006 4:17 PM

I really like your article, but was actually googling to find an answer to a question I have. Can OS X users make updates to Web pages created in FrontPage? We have a non-profit organization with mainly Windows users creating FrontPage websites. A couple of MAC users would like to participate in updating the pages. If we use fairly simple FrontPage techniques, can they make updates is OS X (with what tool?) and replace the pages?

Would appreciate your opionons. Thanks.

20 Brian Medhurst remarks:
#20) On March 7, 2006 7:00 AM

Is anyone using Freeway? This is a web design package, which can be used by Mac users who know DTP apps such as QuarkXPress and InDesign. Unfortunately, not too many tutorials or info abot this prgramme, but as a novice, I prefer this to Dreamweaver. Freeway is not an HTML editor. Look at the Softpress web site at www.softpress.com/en

21 bugs remarks:
#21) On March 17, 2006 1:20 PM

I still don’t get how bbedit can preview webpages, when I try it, it shows the index with just the garbeled code/text but doesn’t pull in the css/images