Portfolio Tutorial | The Beginning

What you will learn:

The tools you'll need
How to use a text editor
How to create a basic webpage
Introduction to loading pages onto the web ( Note: This is only a primer. Detailed instructions will be covered later in Fire Up, FireFTP )

Getting Your Resources Ready

The first thing that you do before any important journey is to pack appropriately; you need to gather the right resources. This is what this chapter is all about. The following is a list of the tools that you will need:

A simple text editor (any computer has one.)
FTP Software
Color Picker
Hexidecimal Reference

Let's set up our text editor:

For mac:

In OS 10.5, open the "textEdit" application ( The process for 10.3 and up is similar.) Then go to Preferences, found under the "textEdit" main menu [view]. Now, in order to output webpages, known as "HTML", we have to change a few things:

With the New Document tab selected, under "format", click on "plain text"
Then, under the Open and Save tab, under the "When Opening a File:" heading, check "ignore rich text commands in HTML files" and "Ignore rich text commands in RTF files." Then, under "HTML saving options:" change the first dropdown to say "XHTML 1.0 Strict." Finally make sure that at the bottom, the Encoding: is set to "Unicode (UTF-8)". This is the standard format. [view all]

Note: If you mess up your settings at any time, you can click on "Restore All Defaults" at the bottom and start over.
Now, the next thing to remember comes after you create your text file: You will need to save the file with the extension ".html". Otherwise, it will not be recognized as a webpage file.
And that's it. See it!

Additional text editor for the mac:

Smultron. This particular editor doesn't come with the mac, but I include it because it has some nice additional features that make life easier, and it's also easy to use. Oh, and it's free. Get it now.

For pc:

On Windows XP, under the start menu, go to All Programs and find "notepad" (it's probably under "accessories"). Now open it up. It should be ready to go. Just make sure that when you save your file, you save it with the extension ".html" instead of ".txt". Also, you might want to change the save as type: drop down to "All files" and Encoding dropdown to "UTF-8".

Note: If you want a text editor with a little more for the pc, like what is offered in Smultron for the mac, look into notepad ++

Equipping Firefox

The next thing that you will need, after your text editor is ready, is a way to load files onto the web. For this, we will be using Firefox. Yes, the browser. But before it's ready to do something like this, we have to add what's called an "Add-On". These are little programs that you can plug into Firefox to extend its functionality. We will be adding FireFTP—an ftp client. Ftp clients let you load files from your computer onto the internet.

If you don't have Firefox already, go get it. (I also have a copy of it in the "resources" folder, if you like.) It's available free for both Windows and Mac. Now with Firefox on your computer, open it up, go to Tools in the main menu, and then click on "Add Ons". This will open up the "Add-Ons" window. With the Get Add-Ons tab selected, type "FireFTP" in the search window, and hit enter. This should bring up FireFTP in the results. Now, go ahead and click "Add to Firefox".

OK, you are ready to "ftp," baby! See it! video
Now, before we create our first webpage, we have one more weapon to add to our arsenal: the Color Picker.

Creating the Color Picker

Note: The following section is optional, and is meant only to make things easier.

Note: PC users, skip to next section.

This is a neat little trick that will help us when adding color to our site. Have you ever noticed that nifty little color picker that the mac pulls up for you when you are adding color in, say, Pages? If yes, great! If no, that's ok, too. Just know that this is a very handy little device for dealing with color on your computer. Only one problem: it only launches in other programs, but not by itself. Well, we're going to change that.

The first thing you need to do is to go to your applications, and open a folder called "Applescript." Don't be alarmed this is a very easy step, so keep going. In this folder, there is an application under the ambiguous name of "script editor." Go ahead and double-click it. Now, don't do anything else, but type the following: choose color. Then click on "save as" under the file menu, or hold down apple, shift and press s. This will bring up the save screen. Name it "Color Picker" and from the drop down menu, make sure to save it as an application. There, it's done. In order to make this easier to find and recognize, we are going to change the icon related to this item. Again, this is easier than it sounds. In fact, some of you might already know how to do this. For convenience, I have already provided you with an icon to use, under the "resources" folder (download found in the Table of Contents). So let's go there.

In the resources folder, there is a little graphic called "color vial". Select it with a single-click. Then hold apple and press c (this is the same as going to the main menu, under edit and selecting "copy".) This will copy the icon. Now, locate the color picker script that we just saved, and right click it, or if you don't have right click, hold control and click. This opens a menu where we can select get info. It should be the third or fourth option down. Click it. Now, see where the icon for the file is in the top left corner? Click it once, so that it is highlighted, and then hold apple and hit v. This will replace the old icon with the new one, the "color vial," that we copied from the "resources" folder. Neat, huh? See it! video

But there is one last thing before we're through . . .

We need our hexidecimal reference. For more on hexadecimal, see the section below. In the meantime, I will walk you through the process of adding this feature to your color picker. The first step is to download a copy of "ColorHexPicker". It's essentially a plugin that adds hexidecimal reference to your color picker. For convenience, again, I have included a copy of this plugin in the "resources" folder.

Once you have it, we need to locate the file called "HexColorPicker.colorPicker". Now, normally when you download a file, you double-click it, and then go through an install wizard. Not so, with this little jim-dandy. Instead, we are going to relocate it in the file, where it belongs, on your computer. Once this is done, your Color Picker will automatically detect it, and add it as a selection on the Color Picker's toolbar. So, let's relocate.

You can do this however you like, but for the sake of simplicity, we'll do it this way: First, open a new finder window. Select your home folder (the one that looks like a house; it should also bear your name.) In that folder is another folder called "Library". And finally, there will be a folder within that one called "ColorPickers". If there's not, don't be alarmed. Just create a new folder and call it "ColorPickers" within the "Library" folder. That's what I had to do on my computer. Just be sure to capitalize and make it plural, just as you see it here.

Now, once that is done, you should have two finder windows open: one with your "ColorPickers" folder within the "Library" folder showing, and one showing the color picker plugin that we just downloaded. With that being the case, simply grab and drag the plugin (should have an icon that looks like a little, square lego) from its folder into the "ColorPickers" folder. Now, make sure that it's within the folder and not lingering outside mixed in with the Library folders. You're done! Now, continue on to read about what this whole hexidecimal nonsense is all about. See it! video

"Holy Hexidecimal, Batman!"

Hexidecimal is the system used by the internet to interpret colors. This can be used on things like text, background color, etc. It consists of a six digit number which interprets the various shades and hues of the color spectrum. You could use regular old RGB color designations. But in my opinion, using hexidecimal is easier: easier to remember, and you can use a shorthand for many colors in CSS. But we'll get to that later.

For now, just know that colors can have this little six-digit number. In fact, if you've used colors in Photoshop, or several other Adobe products, you may have already seen it. It would have looked something like this: hexidecimal example

So, let's see it in our brand new color picker

Note: this is for mac users who took the steps above under "Creating the Color Picker." Otherwise, go to the "Text Editor"

Remember the icon that we put on the Color Picker application that we created? Well, go find it and double-click it (be sure it's the application and not the icon). Right before your eyes, you should see a feature on the end of your top choices which should look like a blue button with a pound symbol. Click this, and right before your eyes is the hexidecimal code for the active color. What's nice about this, is any color that you've added to your palette collection on the bottom of the Color Picker can be clicked to reveal it's hexidecimal designation.

In the chapter "Color Me Happy," we will use this code.

The Text Editor

OK, the steps we took above to get our text editor ready are so that when we create our html file and need to save it, it will then save the file as an html page (HTML is the type of file that the internet reads.) Let's open our text editor right now. Now go ahead and type "Hello World!" Notice how simple the text looks here. That's good. What that means is this is text in its simplest form: no formatting; nothing under the hood—just plain text! Next, let's put in a little bit of code. Don't worry, the code will be explained in more detail in the HTML tutorial. Put your cursor just before the "Hello World!" text that you just typed. Hit enter. Now place your cursor on the line above it. Then type <html> hit enter, <body> and then hit enter again. Now place the cursor after "Hello World!" and hit enter, then type </body> making sure to include the backslash just before the word "body", then enter one more time. And finally, finish it up with </html>, again making sure to include the backslash just before "html". Your page should now look like this:

This is the most basic of web pages. Now save your file as "my-first-webpage.html" making sure to use hyphens between the words, rather than spaces. (You can use underscores, as well)

Note: the internet will not read files with spaces in the name.

Now right click your file and choose to open it with Firefox. Ta-dah! How does that feel? You just made your very first webpage. Ok, let's make a small change to our file. Place your cursor just before "Hello World!" in your text file. Type <h1>, and then position the cursor just after "Hello World!" and type </h1> making sure to have the "slash" before the "h". Save the file, and go back to Firefox. Let's use the shortcut keys to refresh our view: hold command, and hit R. Right before your very eyes, we just changed the font size. Cool, huh? See it! video

If you want more, you can go to the "Basics of HTML".

Loading Files

This section is to help you get your files from your computer onto the web. Bear in mind, this is on conditions that you have already set up your account with a web host and registered a domain name. For more on this, go to the "Domain Registration & Hosting" chapter. For now, I simply want to explain the process of getting files onto the web.

First, a little bit of terminology:

server: The internet is made up of a bunch of computers, large computers, connected together. In order for you to see what's on these computers, you use your own computer and view these files through a web browser, like Firefox, for example. These large computers are called servers, and anybody that has files on these servers can share their files with the entire world through the world wide web.
domain: The name of your site. This is something you purchase usually through a web host. For something fun, go to doteasy.com, and do a search for the name that you have in mind for your site, just to see if it is available.
Note: On doteasy, a search field is located about the middle of the page.
host: A host is a company that provides storage space on their server. That way, anyone can access your files, 24-7. There are also other services that may go along with this, such as database service and other more dynamic functions beyond the scope of this tutorial. But this is how companies provide online shopping services. It all happens with a web host. Just think of it as a place where your files go to be seen by all (on the web, anyways).
local files: This refers to files located on your computer. For example, the file "my-first-webpage.html" is a local file right now.
remote files: Files that have made their way onto a server.

With all of this in mind, our goal is to get our local files onto a remote location; to make them remote files. Have you ever heard of godaddy? This is a business that has servers. They offer you server space for a monthly or yearly fee. There are many companies out there who do this. But for our purposes, we'll use them.

Ok, let's open Firefox. Go to tools in the main menu and click on FireFTP, and like magic, a new tab appears. This tab contains our FireFTP program. It has two basic components: a left side, and a right side. The left side is local files--files on your computer. The right side doesn't contain anything, yet. At least , not files. We haven't connected to a server, yet.

You will also notice two arrow buttons in the middle: one pointing left and one pointing right. These buttons allow you to transfer files back and forth, once we have connected to a server.

That's it for now. Later, in the "Fire Up, FireFTP" chapter, we will learn more about loading files to a server.

[Next]

The Beginning

Table of Contents