Category Archives: Tutorials

Fix the dreaded “Not an image file” MySQL Django error: use VirtualEnv

If you develop Django using MySQL on a Mac, you’ve undoubtedly run into the “Not an image file” error for models with image fields. The problem has to do with JPEG support for Mac OS and how it interacts with Python Imaging Library. Diabolically, once you’ve installed PIL with bad JPEG support it seems impossible to fix.

My solution is to use a virtualenv. virtualenv is a python tool to create an isolated Python interpreter on your system, which allows you to control the installed packages without mussing up your main Python installation. It’s good practice to use a separate virtualenv for each project, and if you use Eclipse you usually want one for each workspace

There are, of course, other solutions to this problem (using PostgreSQL is probably one of them). The instructions here are based on this post on


You’ll need to have xCode installed. Also, if you want to use Eclipse, has an excellent screencast that covers everything.

Create a “workspace”

The best place to keep the virtualenv for your Django project is right next to your Django code. Create a directory to hold both. This can be just a plain directory, but if you’re using Eclipse make a new workspace first and complete the following steps in that workspace. If you have existing code, drop it in the root of this folder. For this tutorial let’s call the folder “myworkspace” and your project “myproject”.

Set up a Virtual Environment with –no-site-packages

Use easy_install to get virtualenv.

easy_install virtualenv

Change into the ‘myworkspace’ directory and create a new virtualenv. The key here is to use the –no-site-packages argument, which creates a Python that ignores the system packages already installed. We don’t want anything to come over from the system Python in case you’ve already installed a useless PIL.

python python --no-site-packages

You now have a fresh, Django- and PIL-less Python interpreter at myworkspace/python/bin/python. The directory structure should now be as follows:

- myworkspace
+ - myproject
+ - python

Install libjpeg (JPEG Support) system wide

Here’s the key to fixing the problem, and where the post really saved my butt. Forget the virtualenv for a second, we’re installing JPEG support system wide.

  1. Download JPEG support. This little sucker keeps moving around the internet. I used version 6, which is still available here. The project is maintained my the Independent JPEG Group, who are showing version 8 as of this posting.
  2. Extract the tarball, cd into the resulting folder (in my case, it was called jpeg-6b, and install it with these changes.
    cd jpeg-6b
    cp /usr/share/libtool/config.sub .
    cp /usr/share/libtool/config.guess .
    ./configure –enable-shared
    sudo mkdir -p /usr/local/include
    sudo mkdir -p /usr/local/bin
    sudo mkdir -p /usr/local/lib
    sudo mkdir -p /usr/local/man/man1
    sudo make install


Install PIL

Now we’ll install PIL and point it to the correctly installed JPEG Support. This is again lifted from the post.

  1. Download the PIL tarball here.
  2. Extract it, cd into the resulting folder, and edit to change these lines:
    JPEG_ROOT = none
    ZLIB_ROOT = none

    to this:

    JPEG_ROOT = “/usr/local/include”
    ZLIB_ROOT = “/usr/local/include”
  3. Install PIL with these commands:
    python build_ext -i
    sudo python install

I got 9 errors when I ran, but kept going and haven’t seen any indication that the errors are giving me any trouble. Again, thanks

Install Django, MySQL-python, etc.

Here’s a post a did a last year detailing Django installation on Mac OS X. That is, again, not the only way of doing it. The key here is to use the Python interpreter you just created to install Django and all it’s prereqs. You also have a virtualenv specific easy_install. Use it to install any other dependencies.


Run your project

I’m skipping a lot of steps (and debugging) here, but assuming you’ve got your project set up correctly you should now be able to cd into the ‘myproject’ directory and run the server with the following command:

../python/bin/python runserver

As a shortcut, you can set an environment variable in the ‘myworkspace’ directory to map the command ‘python’ to /myworkspace/python/bin/python. Better yet, if you’re using Eclipse, use that Python as you’re interpreter, and configure the debugger to run the command for you.

Create and Download a CSV (or any other file type) with a Plone View

Do you have a content type that you’d like to be able to offer as Comma Separated Value (CSV)/Excel download? Python can create both formats pretty easily (using either the standard csv library, or xlwt) and you can write a view for your content type that will create the file and return it to the user as a file download.

At, Martin Aspeli covers this process as a part of the five.grok documentation. I’d already created my product without using five.grok, and I didn’t figure this one use case was enough reason to switch. So here’s what I came up with:

First, register the view in browser/configure.zcml


I added the view to browser/ under the default view.

class MyContentTypeCsvView(BrowserView):
    Download the content type as a CSV file.
    def __call__(self):
	Build a CSV from the content type.
	out = StringIO()
	writer = csv.writer(out)

        # make the CSV file

	filename = "%s.csv" %

	self.request.response.setHeader('Content-Type', 'text/csv')
	self.request.response.setHeader('Content-Disposition', 'attachment; filename="%s"' % filename)

        return out.getvalue()

Now you should be able to link to and initiate a file download.

How to access the SD card from the Android Emulator on Mac OS

Here’s another one in the “I’m writing this down so I won’t forget it” category. When you’re working with the Android Emulator and you want to add files to the virtual SD card on the AVD, you have to mount it. To do so, hdid the the SD card image:

hdid ~/.android/avd/my-avd.avd/sdcard.img

The guts of the AVD live in a hidden folder in your user folder. Change the ‘my-avd.avd’ bit to match the name of the AVD whose SD card you want to manipulate. After that you’ll have a drive called ‘SDCARD’ on your Desktop that you can open and drop files in.

Unforunately, with this method you have to restart the Emulator every time you want to change the file. That’s not a big deal for me right now, but I’m sure it will be soon. I’ll update this post when/if I figure out how to change the files without restarting the device.

Getting django-syncr running on WebFaction

I’m working on a Django installation at WebFaction that will be needing the special magnificence that is django-syncr. It’s got a few other dependencies, so I thought I’d record the steps I needed to take to get it up and running.


You don’t need this unless you’re using Python 2.4 or earlier, but if you do:


Get it here:

OR…. just easy_install it :). I’m on Python 2.5, so SSH into your server and:

easy_install-2.5 django-tagging

God bless setuptools.


If you want to get your Twitter feed into your Django database, you’re gonna need python-twitter. And for python-twitter, you’re gonna need simplejson. Let’s get that first. If you’re still SSH’d in:

easy_install-2.5 simplejson

Now for python-twitter:

easy_install-2.5 python-twitter

Do you want the Flickr support?

Flickr won’t release the actual photo or allow it to be embedded using the API (as far as I can tell). I don’t really see any need for all the Flickr metadata to live in my database without the image, so I’m skipping it.

Installing django-syncr itself

django-syncr isn’t in PyPI yet, so we’ll have to download and install it the old-fashioned setuptools way:

cd ~/webapps/djangoapp/
mkdir src
cd src
svn checkout syncr
cd ..
easy_install-2.5 src/syncr

I pulled up out of the ‘src’ directory so easy_install would no exactly what ‘syncr’ I was talking about.

Including django-syncr in your Installed Apps

You’ll need to edit your file to tell django you’d like to use the new apps you just easy_installed. Get to your file and open it with your favorite editor:

cd ~/webapps/djangoapp/myproject/

Added the following lines (between the ellipses) to your ‘INSTALLED_APPS’:


In my particular case, I’ve added it after a bunch of Satchmo stuff but before my own app.

Syndb and restart

That’s it for the tricky stuff. If you’ve done everything right you should be able to sync the database no problem (now is a great time to back up your data, by the way):

python2.5 syncdb

Then restart your server…


and check your admin site for the new tables.

Installing Satchmo on Snow Leopard

Django is my framework of choice for non-CMS web applications, and that makes Satchmo my choice for eCommerce. It’s a great library, even if it does have a million dependencies. On the bright side, I’ve used many of it’s dependencies in other projects, so look at installing these as a chance to learn more about Python.

This tutorial is based on the excellent instructions at the Satchmo Project site.

Installing Dependencies

If you’re going to use Satchmo, you’ve of course got to have Django. See my Django installation tutorial.

Remember how I said that I like to keep Libraries in my user folder? Here’s my first official renege. I don’t want to keep up with all these dependencies, so I’m going to allow easy_install to install these libraries in my Python 2.6 SITE-PACKAGES whenever possible.

Installing easy_install

Here are the official instructions, written for the slightly more advanced user. Here’s what I did:

  1. Download the SetupTools Python egg for our version of Python (2.6, the default on Snow Leopard)
  2. Run the egg as a Shell script with the following Terminal command:
    sudo sh /Users/kevin/Downloads/setuptools-0.6c11-py2.6.egg
  3. Type in your password when your asked for it

That’s it. easy_install is installed as a part of setuptools, and you can run it directly from Terminal by typing ‘easy_install’

Installing the other dependencies

These are generally straightforward with easy_install. Use the command below the name of each library to install. Notes included where I ran into trouble.


easy_install pycrypto


There’s a link to the 2.5 egg on the Satchmo install site, but that doesn’t help us much. Here’s how to get ReportLab for Python 2.6 (you’ll need GCC, which is a part of XCode):

  1. Download the latest ReportLab tarball from the ReportLab site.
  2. Move the tarball into your user folder and un-tar it
  3. cd
    mv Downloads/ReportLab_2_3.tar.gz ReportLab_2_3.tar.gz
    tar xzvf ReportLab_2_3.tar.gz
  4. Move into the new directory and type the following command to install it:
  5. cd ReportLab_2_3
    python install

After running this I got the following error:

########## SUMMARY INFO #########
#Attempting install of _rl_accel, sgmlop & pyHnj
#extensions from '/Users/kevin/ReportLab_2_3/src/rl_addons/rl_accel'
#Attempting install of _renderPM
#extensions from '/Users/kevin/ReportLab_2_3/src/rl_addons/renderPM'
# installing without freetype no ttf, sorry!

Not sure what’s going on here, but I’ll ignore this for now.




easy_install django-registration


easy_install PyYAML

Python Imaging Library (PIL)

sudo easy_install --find-links= PILwoTk


  1. Download the django-threaded-multihost tarball from GoSatchmo
  2. Move the tarball into your user folder and un-tar it
  3. cd
    mv Downloads/django-threaded-multihost-1.3-2.tar.gz django-threaded-multihost-1.3-2.tar.gz
    tar xzvf django-threaded-multihost-1.3-2.tar.gz
  4. Move into the new directory and type the following command to install it:
  5. cd django-threaded-multihost-1.3-2
    python install


  1. This one’s a little funky. We’re going to need a place for this to live. Make a new directory ‘/Users/kevin/src/django/plugins/’
    mkdir ~/src/django/plugins
  2. Move to the new directory and checkout django-app-plugins from Subversion
  3. cd ~/src/django/plugins
    svn checkout django-app-plugins-read-only
  4. Create a symbolic link to the SITE-PACKAGES directory from django-app-plugins/app_plugins
    cd /Library/Python/2.6/site-packages/
    ln -s /Users/kevin/src/django/plugins/django-app-plugins-read-only/app_plugins .


This package is kept in a Mercurial repository. You’ll have to download and install Mercurial. Here’s the Mercurial Installer for Snow Leopard.

  1. Move to your newly created ‘plugins’ directory and checkout SORL-Thumbnail with Mercurial
    cd ~/src/django/plugins
    hg clone sorl-thumbnail
  2. Create a symbolic link to your SITE-PACKAGES directory for SORL-Thumbnail
    cd /Library/Python/2.6/site-packages/
    ln -s /Users/kevin/src/django/plugins/sorl-thumbnail/sorl .


  1. Move to your newly created ‘plugins’ directory and checkout signals-ahoy with Mercurial
    cd ~/src/django/plugins
    hg clone
  2. Create a symbolic link to your SITE-PACKAGES directory for django-signals-ahoy/signals-ahoy
    cd /Library/Python/2.6/site-packages/
    ln -s /Users/kevin/src/django/plugins/django-signals-ahoy/signals_ahoy .


sudo easy_install sphinx


sudo easy_install docutils

Installing Satchmo

Still with me? I want to install Satchmo the same way I installed Django. I’ll be installing it in it’s own directory in ‘src’, though it is technically a plugin. I might be using different versions of Satchmo in the future. I also want to be able to browse the source without too much trouble.

  1. Checkout Satchmo into your ‘src’ directory
    cd ~/src
    mdkir satchmo
    cd satchmo
    hg clone satchmo-trunk
  2. Add ‘satchmo-trunk/satchmo/apps’ to your Python path. I did this by adding it to my .bash_profile. Either edit or create yours, in the root your user directory, to include this line:
    export PYTHONPATH="$PYTHONPATH:/Users/kevin/src/satchmo/satchmo-trunk/satchmo/apps"

At this point, Satchmo is installed. You should be able to import Satchmo from the Python 2.6 interpreter:

>>> import satchmo_store

… and you can now run pre-exisiting Satchmo projects on your iMac.

Installing Django (1.1) and MySQL on Snow Leopard

A few days ago I posted my misadventures in setting up a Plone 3 buildout on Snow Leopard. That (fingers crossed) was a lot more complicated than getting Django going. However, I’ll also be installing MySQL (my database of choice) as a backend database. I’ll be foregoing Apache and mod_wsgi, as this is just a development instance.

Most of this is based on the excellent instructions available at the Django site

Working With What We’ve Got

The Macintosh Operating System, being the forward thinking platform that it is, already has Python 2.5 and 2.6 installed. Python 2.6 is the default (it’s the interpreter that starts when you type ‘python’ into the Terminal), and we’ll be sticking with that. It also includes Subversion, which we’ll use to download and update the Django trunk.

Where To Put Django

As my coding style has developed, I’ve gravitated more toward keeping Python libraries that need close management in my ‘home’ folder (/Users/kevin/ on my machine) and using symbolic links to get it on my Python path. It appears to me that everything installed under ‘/Library/’ is laid out quite nicely without any of my assistance, thank you very much.

Besides not wanting to play around with the system folders, there are a couple advantages to installing like this. First, I’ll want to update my Django installation as new code comes out, and it’s simpler to find stuff in your home folder. Second, keeping packages like Django in your home folder makes browsing the source code (a must in Open Source) much simpler.

You’ll see me use easy_install to get stuff for Pythons 2.5 and 2.6, but as a general rule if I have to manually install it it’s going in my home folder. For an alternative approach (i.e. installing Django in the local site-packages directory) see this post.

Getting MySQL

To paraphrase Billy Bob Thornton from The Bad News Bears, developing in Django without a database is kind of like kissing your sister. Let’s install MySQL.

There are lots of ways to install MySQL, including compiling and installing from source. As this is a Django development machine, I feel comfortable simply using an installer package. To my surprise, MySQL as of today doesn’t have a specific 10.6 installer package on their downloads page. No matter, we’ll just grab the 64-bit version for Mac OS X 5.

  1. Go to (for MySQL 5.5, the most current recommended version)
  2. Find the “Mac OS X 10.5 (x86_64)” under “Mac OS (package format)” and click “Pick a mirror”
  3. MySQL/Sun Microsystems will want to know everything about you. Go ahead and register.
  4. Pick a site, download the package, and double click to open the package
  5. Click “mysql-5.5.0-m2-osx10.5-x86_64.pkg” to begin the install
  6. OPTIONAL: click “mySQLStartupItem.pkg” to have MySQL start when you start your system
  7. Head’s Up!

    I don’t want MySQL running all the time, so I’m not going to install the MySQL Startup Item. That means that I’ll have to START MYSQL FROM TERMINAL EVERY TIME I WANT TO USE IT. I’ll show you how to make this simple a bit further down.

  8. OPTIONAL: click “MySQL.prefPane” to install a Preference Pane in the System Preference for MySQL (I didn’t do this either)
  9. Using your favorite text editor, create a new document called “.bash_profile” in your home directory (yes, the dot is supposed to be there). We’re going to add the MySQL directory to the PATH, allowing you to run MySQL commands by typing one string into the terminal (not the entire path). Add the following line to “.bash_profile” and save it.
  10. export PATH="$PATH:/usr/local/mysql/bin"
  11. You’ll need a root password for MySQL. Type the following command into Terminal, replacing “superduper” with a password you’ll remember
  12. mysqladmin -u root password superduper

To start MySQL, type the following into your Terminal

sudo mysqld_safe

You’ll be prompted for your system password. Enter it and MySQL will start running. You’ll need to leave a Terminal tab open to leaveit running. To stop MySQL, type Control+Z from the Terminal tab it’s running from. Now for Django itself.

Installing MySQLdb

MySQLdb is the Python library that let’s us manipulate a MySQLdb with Python code.

  1. Download the MySQLdb tarball from
  2. Move the tarball to your user directory and un-tar it
    mv Downloads/MySQL-python-1.2.3c1.tar.gz MySQL-python-1.2.3c1.tar.gz
    tar xzvf MySQL-python-1.2.3c1.tar.gz
  3. Change into the directory your just created and install the library
    cd MySQL-python-1.2.3c1
    python install

Installing Django 1.1

Most of the Django sites I’ve installed at at version 1.1, but not all. I’ll also probably want to run the development version at some point as well. I’m going to set up the directories around Django with that in mind.

  1. Open Terminal, and create the following directory structure (some of which will already exist): /Users/kevin/src/django/core/. Working in our home directory…
    mkdir src
    cd src
    mkdir django
    cd django
    mkdir core
    cd core
  2. Download the latest stable version of Django 1.1 (it’s a tar.gz file, AKA a ‘tarball’)
  3. Unpack the Django tarball into the directory you created in step 1. Working in the ‘core’ directory…
    tar xzvf /Users/kevin/Downloads/Django-1.1.1.tar.gz
  4. Change into the directory you created in step 3
    cd Django-1.1.1
  5. Here is where I start deviating a little from the norm. I want to keep this code in my home directory, so I’m going to create a symbolic link to my Python SITE-PACKAGES directory that points to this version of Django. First, find your Site-Packages directory by typing this into Terminal
    python -c "from distutils.sysconfig import get_python_lib; print get_python_lib()"

    In my case, this returned:


    So, to make the symbolic link (from within the Django-1.1.1 directory), I type:

    ln -s $PWD/django /Library/Python/2.6/site-packages/django

    (change the path to match your own SITE-PACKAGES directory)

  6. I’m going to want in my path (and you will too). Create a symbolic link to /usr/local/bin:
    sudo ln -s /Users/kevin/src/django/core/Django-1.1.1/django/bin/ /usr/local/bin
  7. Check that you’ve installed Django correctly by starting the Python Interpreter (type ‘python’ into the command line) and try importing Django
    >>> import django

    No errors = awesomeness

This method installing Django 1.1.1 as my default Django (the Django I get when I type ‘django’ into a Python Interpreter). If you wanted to simultaneously run a different version of Django, repeat this process with the tarball for that version (or checkout the trunk from Subversion). When you create the symbolic link, name it something other than ‘django’ (i.e. ‘django-1.1.1’ or ‘django-trunk’).

Plone Buildout on Snow Leopard… from the ground up

This is how I got a fresh Plone buildout up and running on my brand new iMac. I’m writing this mostly for my designer buddies here in Nashville, in the hopes that one day they will come to the light and start skinning Plone sites with me. We can dream can’t we?

Major thanks to Brian Gershon (without this blog post it would have taken me until the Ides of March to get through this), and especially Florian Schulze for his buildout that makes Python 2.4 on Snow Leopard a snap.

Step 1: Find Your Mac OS X Install DVD

Okay, if you’re like me, you don’t know where your install DVD is. Unless, of course, you’ve broken the seal on your new Mac less that 24 hours prior.

If you have your Install DVD:

  1. Insert the DVD, open it, and open “Optional Installs”
  2. Double click “Xcode.mpkg”
  3. Let Xcode install on your machine. It took me between 15 and 20 minutes.

If you DON’T have your Install DVD:

  1. Go to
  2. Click “Download Latest Xcode”
  3. Create an ADC membership if you haven’t already (it’s free)
  4. Download the package (it’s a doozy, 2 GB+)
  5. Double click the package file after you’ve downloaded it
  6. Let Xcode install

Once you’ve gone through the install process, open up Terminal by going to Applications -> Utilities (go ahead and drag it to the dock, you’ll need it later). Type ‘gcc’ into Terminal and press Return. You should get something like the following:

i686-apple-darwin10-gcc-4.2.1: no input files

What’s that, you say? Why, that’s your brand new GNU C Compiler telling you it needs an input file before it can do anything! If you see something different, you probably had a problem installing Xcode.

Step 2: Installing Python 2.4 (and other goodies)

As I’m still working in Plone 3, I’ll have to install Python 2.4. SL ships with Pythons 2.5 and 2.6. Usually it’d be easy to install different versions of Python, but according to Brian’s post SL mangles up a Python 2.4 installation. Here come’s Florian’s buildout to the rescue.

NOTE: This installation method is specific to some problems that Snow Leopard had with Python 2.4. Details available here and on Brian’s blog.

To Install Python 2.4 and the rest of the gang:

  1. Open Terminal
  2. Create a new directory called ‘src’ in your home directory by typing in the following command
  3. mkdir src
  4. Move into that directory with this command
  5. cd src
  6. Checkout and run Florian’s buildout with the following commands
  7. svn co
    cd python

You should now be able to run Python 2.4 by typing the following code into Terminal:


That’s the Python2.4 deep inside your user directory. As it stands, you’d have to use the full path to that file to run Python 2.4. Let’s change that.

Symlinking Python 2.4 to the path:

The goal here is to be able to run Python 2.4 by simply typing “python2.4” into the Terminal. To accomplish this:

  1. Change to a directory in your path (I used /usr/bin)
  2. cd /usr/bin
  3. Type in the following command, substituting your username for “kevin”. You’ll have to type in your password, as we’re editing system files here (type carefully!)
  4. sudo ln -s /Users/kevin/src/python/python-2.4/bin/python2.4 python2.4
  5. Go back to your home folder, and try running Python 2.4 without the path
  6. cd ~

If you get a Python 2.4 interpreter (see below), you’re golden.

Python 2.4.6 (#1, Dec 29 2009, 23:33:05)
[GCC 4.2.1 (Apple Inc. build 5646)] on darwin
Type "help", "copyright", "credits" or "license" for more information.

While we’re at it, let’s symlink easy_install-2.4 as well. We’ll need this for ZopeSkel:

cd /usr/bin
sudo ln -s /Users/kevin/src/python/python-2.4/bin/easy_install-2.4 easy_install-2.4

If you ever happen to meet Florian Schulze, thank him for this buildout.

Step 3: Creating a Plone 3 Buildout (finally, right?)

To make a buildout, we’re gonna need Paster. To get Paster, we’re gonna need ZopeSkel. Let’s use that newly symlinked easy_install-2.4 to get ’em.

cd ~
easy_install-2.4 -U ZopeSkel

This installs what we need, but again deep in our user directory. A symlinking we will go:

cd /usr/bin
sudo ln -s /Users/kevin/src/python/python-2.4/bin/paster paster-2.4

Notice I named this particular Paster “paster-2.4”. That’s in case we ever install paster for a different version of Python, we’ll know which one is which.

Now let’s pick a home for our buildouts. I like to create a directory called “workspace” next to my “src” directory (sigh… good ol’ Eclipse). Make that directory, and move into it with these commands:

mkdir workspace
cd workspace

To start a new buildout, type the following command:

paster-2.4 create -t plone3_buildout myplone

Paster will ask you a lot of questions, like what version of Plone you want, and which Zope to use. Hit enter to accept all of the defaults. When Paster is done running, go into the directory you just created, bootstrap the buildout, and run buildout with the following commands:

cd myplone

If buildout ran without any errors, the last line of the Terminal output will look like this:

Generated interpreter '/Users/kevin/workspace/myplone/bin/zopepy'.

Step 4: Starting Plone

With our buildout created, now we simply start Zope with the following command:

bin/instance start

Point your browser to http://localhost:8080/manage_main, type in the username and password you supplied to Paster, and add a Plone site through the ZMI. Welcome to Plone on Snow Leopard!

HTML & CSS the Right Way: Part 1

With the glut of information and tutorials on writing HTML & CSS out there on the internet, it doesn’t seem to make much sense to write yet another how-to. However, considering the average quality of information out there is below par, confounded by the various (bad) coding styles in use, I’ve decided to write my own.

In the interest of accelerated learning, I’ll be skipping more basic code that isn’t best practice. For instance, you won’t see a style attribute in any of these following tutorials. All of our CSS from the very beginning will be housed in dedicated style sheets.

I’m not a designer, but I will talk some about layout and link to a couple great articles on turning Photoshop mockups into solid HTML & CSS. My focus instead will be on creating HTML documents as templates for dynamic websites, styled with CSS, using the least amount of code possible.

I’ll be making the following assumptions about you:

  1. You know how to open, edit, and save files on your computer
  2. You know how to open and use the basic text editor on your computer (NotePad for Windows, TextEdit for Mac, Text Editor for Ubuntu)
  3. You do not know anything about HTML. Some of my later posts will get slightly more advanced, but we’ll be starting from the ground up.

There are excellent, free resources on the internet that I’ll rely heavily upon. Generally speaking most of the links in these articles will point to Wikipedia or the W3 Schools. Wikipedia is the place to go if you want to wrap your head around a particular concept. For the nitty gritty on the implementation of a particular HTML tag or CSS rule, the W3 Schools website is your best bet (Googling a single tag almost always takes you directly to the W3 Schools).

So, first things first…

What is HTML?

HTML stands for Hypertext Markup Language. It the the basic programming language that web browsers (Internet Explorer, Firefox, etc.) are able to interpret. We use HTML to “mark up” a document or piece of text that we would like to display in a web browser.

For example, let’s say you wrote this piece of text:

Hello World!

…and you’d like to be able to display it on the web. Let’s try this now:

You’re First Web Page

  1. Create a new directory on your desktop, called “test”, and open it (directory is another word for folder)
  2. Open your text editor, and save a file called “index.html” in the directory you just created.
  3. To confirm that you created the right type of file, notice that the icon for “index.html” in the “test” directory has changed to the icon for your default web browser
  4. With “index.html” open in your text editor, enter the following code:
  5. <html>
            <p>Hello World!</p>
  6. Save “index.html”, and double click it to open it in your your browser.

You’ve just created your first web page. Now let’s take a closer look at what we just did:

How HTML Works

  • An HTML document is made up of “elements” wrapped in “tags”. For example, the <p>Hello World!</p> bit would be an element wrapped in a paragraph tag. Tags usually have an opening tag (without a forward slash) and a closing tag (with a forward slash). In English, you are telling the web browser “When you see <p>, display everything after that as a paragraph until you come to</p>”
  • The entire HTML document is wrapped in an HTML tag. You’re telling the web browser “Hey, all this stuff you’re about to read is HTML”
  • HTML documents have “heads” and “bodies”. These two elements are present in almost every HTML document. The <body> tag denotes all of the information that will be displayed in the body of the web page. The <head> element will contain instructions for the web browser about displaying that information. More on <head> later.
  • HTML elements are nested. Did you notice that the <p> element is inside the <body> element? It has to be that way for the <p> element to work right. In HTML, elements can be wrapped in any number of tags. You would nest a tag within another tag if you wanted the effects of both tags to work on that element. For example, change “index.html” to this:
  • <html>
            <p>Hello World! It's going to be a <strong>great</strong> day.</p>

See the difference? The <strong> makes text bold. It’s nested inside the <p>, making the word ‘great’ both bold and a part of the paragraph.

Now try adding a new paragraph:

        <p>Hello World! It's going to be a <strong>great</strong> day.</p>
        <p>I can't believe I ate the whole thing. The quick brown fox
           jumped over the lazy dog. The rain in Spain falls mainly
           on the plain.</p>

HTML Headings

Here, you create a new paragraph, and it shows up in the web page below the first. Now, let’s add a couple heading tags, <h1> and <h2>:

        <h1>My first webpage</h1>
        <p>Hello World! It's going to be a <strong>great</strong> day.</p>
        <h2>Some famous quotes</h2>
        <p>I can't believe I ate the whole thing. The quick brown fox
           jumped over the lazy dog. The rain in Spain falls mainly
           on the plain.</p>

HTML provides six different sizes of headings: <h1>, <h2>, <h3>, <h4>, <h5> and <h6>. Here’s how they are rendered on this page:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

They probably look a little different on your “index.html”, don’t they? That’s because this page uses CSS to manipulate the appearance of those tags on this page. Will talk more about CSS in Part 2 of “HTML & CSS the Right Way”

Take Aways:

  • We use HTML to “markup” a document for display in a web browser. HTML is the markup, NOT THE CONTENT.
  • If you want to tell a web browser how to display something, you have to wrap it in HTML tags

Tags Learned:

  • <html>, <head>, and <body> (the basic structure of an HTML document)
  • <p> : paragraph
  • <strong> : bold
  • <h1> – <h6> : various levels of headings


  • Practice using these tags in index.html
  • Play around with the HTML examples at W3 Schools
  • Make “index.html” look exactly like this page. You can copy and paste the text, but don’t copy and paste the code!