How to make a website

There's things you need to understand that will make everything else much quicker and easier. I will try my best to cover all of those.

Prerequisites:

Text Editor

You need a text editor with color syntax highlighting. Here's a free one:

1. Root Folder

right-click on your desktop, select "New Folder", name the folder "root". That's your root folder for now.

Web URL's look like "http://www.panamaquono.com/tutorials/" In this URL the www.panamaquono.com part represents the root folder of your website, and the /tutorials/ part represents a subfolder within the root directory of your site.

Web browsers will display the folder structure of your root directory but also the filename of anything within the directory that you navigate to, along with its file extension. Like this: "http://www.panamaquono.com/tutorials/tutorials.pdf"

There's one case though in which the web browser will not display the name of the file...

2. Index page

Web browsers are trained to look for an index page. Navigate into the root folder you just made and create a new file, name it "index.html"

Put it together:

Using the text editor

  1. Start up the TextWrangler app that you downloaded in the beginning.
  2. Drag the folder that you named "root" on top of the app icon in the dock, this should open your folder in TextWrangler and you should see your index.html file in there.
  3. Type "Hello World" in the index.html page and save it.
  4. Go back to the desktop, right-click on index.html and open with Safari.
  5. you should see your file with the message "Hello World".

You're now on your way to having a website, Good Job!

Level Up

Phototshop

If you've designed a website in Illustrator or Photoshop that you'd like to see online.

  1. Open the design in Photoshop.
  2. Use the slice tool to divide the design so that items you'd like to click to cause an action are defined in the grid.
  3. Use "save for web" to save the slices as individual images and select "html and images" from the save for web dialog.
  4. Name the file index.html and use it to replace the index.html file in your root directory.
  5. the image folder that was saved with the index file should also be within your root directory.

If all went well when you go back to Safari and refresh your page you'll see your design.