NOTE: This is part 1 of our 3 part Quick Start Tutorial. Part 2, Part 3.
Quick Start Tutorial Help Forum
The following tutorial is meant to give you a taste of HTML and to demonstrate Alleycode's ability to design a simple yet professional Web site regardless of your HTML knowledge. Although Alleycode is a pure HTML editor (meaning you have full control over your code) you will find building a Web site quick and efficient with the use of built in Wizards and a bit of planning. You can view our finished sample Web site here.
Learning to code a Web site is the most important step you will take on your road to professional Web design. There is a variety of editors on the market as well as browser based template generators which will let you build a Web site without ever seeing a single HTML tag. However, as easy as that may seem, there are limitations to such systems including in some cases heavy and convoluted coding which can dramatically increase loading time. By learning and understanding basic coding techniques you will always be able to rectify problems which may arise with a few simple corrections regardless of the editor you are using.
Syntax convention:
Red: HTML tags.
Blue: Paths... Menu or System.
Green: You type...
Bold: You do.. Commands.
Go to and Click: Refers to Alleycode's menu. Most of the menu commands used in this tutorial are also available as toolbar button. However, for the sake of brevity references will only be made to menu commands.
Let's get started...
First of all let's get organized... The plan is to build a simple 5 page site with a basic logo and a menu system incorporating style sheets for easy navigation.
1) Create a new HTML page..
a) From the menu go to and Click: File > New > HTML Page... A new HTML page opens in your editor ready to go.
b) Go to line 3 ( don't worry if you don't have line numbers, we'll fix that in a minute) and replace "Your Title Here" with "My easy Web site" in <title></title>.
2) Save your new document As...
a) Go to and Click: File > Save As. The "Save As" dialog box opens.
b) Locate the "Save in" field and locate your "Alleycode" folder (c:\Program Files\Alleycode\Tutorial) which translates into:
c) Open your "Program Files" directory.
d) Open the "Alleycode" folder and then open the "Tutorial" folder (this is true provided you used default settings when installing Alleycode).
e) "Save As" is prompting you to save your document as "Untitled-1.html". Change that to "index.html" and click "Save".
NOTE: Alleycode is able to distinguish between "new" unsaved and previously saved pages when it comes time to inserting certain tags into a document. For example when you insert an image in your "index.html", you will notice a relative path to your working directory ( "images/yourimage.gif " ). If this was a "new" previously unsaved document Alleycode would insert a full path ("c:\Program Files\Alleycode\Tutorial\images\yourimage.gif"). It is most important to name and save files before adding images to ensure relative paths are inserted. Full paths are not recognized by hosting servers and will return broken images when called upon by surfers! And on top of that if you test a page from your hosting server with a unrecognized "full path" it may still show correctly in your browser because the image is cached on your system... Jungle trap!
While in your tutorial directory you will also notice an "images" and "include" directories. "images" contains several graphics which we will use to build our sample Web site. Separating "images" (graphics) and "include" files (miscellaneous files like style sheets or javascripts) makes for an organized directory structure which is also set for final transfer to your hosting server.
3) To make life easier we'll let Alleycode create an Assignment for your new "Easy Web site". Go to and Click on: View > Directory Window . At the top of the Directory Window you will see a disabled field which reads "Assignments" and to it's left, the "Set Assignment" button.
a) Click the "Set Assignment" button. The Assignment window opens.
b) In the Name field type: "Easy Web site".
c) Click on the (...) button next to the path field.
d) A "Browse for Folder" dialog opens. Locate your "Tutorial" directory... Should be: ("c:\Program Files\Alleycode\Tutorial\") Click OK!.
e) The path should now be visible in your "Path" field.
f) Click the "Add" button. "Easy Web site" should now be listed in the listbox. Click OK!.
g) The disabled "Assignment" at the top of your "Directory Window" should now be enabled and "Easy Web site" available for viewing.
4) Before we continue let's set a few Preferences...
a) Go to: Tools > Preferences > General .
b) If not already checked, Check (Select) "Display Directory Window" and "Reload Open Document". Click OK!.
c) Re-Open Preferences and select "Editor". If not already checked, Check "Show Line Numbers" and "Enable Auto Indent". Click OK!
Close and restart Alleycode... Window Directory, line numbers and last page opened should be present and ready to go.
Let's start building...
5) We'll start with our Properties.
a) Go to and Click Tools > Properties.Click on the(...) button next to "Bg Color".
b) The color dialog opens, From basic colors Select white and Click "Insert". #FFFFFF is now displayed in the "Bg Color" field.
c) Click "Insert" again. This time "bgcolor=#FFFFFF" is added to line 9 in your open document. Your background color is now white.
6) Next we'll build our header and logo (which we conveniently created for you. You can create and replace your own logo at a later time). We'll first build a "Table" to hold our logo and background images in place...
a) Place you cursor at the beginning of line 10 (should be a clear line between <body bgcolor="#FFFFFF"></body>).
b) Go to and Click Tools >Table Wizard .Table dialog opens. Enter the following in the appropriate fields.
c) Row = 1
d) Column = 2
e) Width = 80 and change "Pixel" to "Percent". Use the dropdown arrow to change.
f) Align = "Center"
g) Click "Insert".
Your document should look like this! (Use the back button to return!)
7) Now let's insert our logo...
a) Place you cursor in line 13 between <td> and </td> ("td" stands for "Table Data" which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc...).
b) Go to and Click Insert > Images > Default
c) Navigate to your Tutorial directory and open the "images" directory.
d) Locate "easylogo.gif" and Click "Open".
e) Line 13 should now look like this: <td><img src="images/easylogo.gif" width="179" height="63" border="0" alt=""></td>
8) The second portion of our logo requires a background image. A background image will fill a particular space regardless of size.
a) In Line 14 place your cursor in the <td> tag right after the letter "d".
b) Click your keyboard's space bar to create a space <td |>.
c) Go to and Click: Insert > Images > Background.
d) Navigate to your "Tutorial/images" directory and select "easybckgrd.gif". Click "Open".
e) Line 14 should now look like this: <td background="images/easybckgrd.gif"></td>.
Take a look at what you have accomplished so far. Go to and Click View > Synchro view. Your HTML code is parsed and displayed above or below (adjustable in Preferences) your code editor. You can see your logo and another stripped bar to it's right... But it doesn't look right does it? Go back to your code and look at the size of the logo in line 13 (easylogo.gif" width="179" height="63"), we need to match logo and <td> width...
f) In your logo <td> create a space after the "d" with your keyboard space bar and type width="179" (same width as your image).
g) Now your <td> should look like this: <td width="179">.
h) Double Click anywhere in your code editor (or you can also click the refresh button at the top left of Synchro View) to see your changes in Synchro View.
By the way, you can also resize "Synchro View" by running your cursor over the Synchro bar. When the "Vertical Split" cursor appears, use your left mouse button to drag accordingly. And most important "Synchro View" allows two way synchronized code/design highlighting. Highlight a portion of code in your editor for reciprocal highlighted location in "Synchro View" (or vise versa). This may not seem like such a big deal with just a few lines of code, but when your documnent contains over 300 lines it makes locating and adjusting code a snap!
Much better!... We have given the logo <td> a fixed width which essentially gives the background <td> the balance of space to utilize. In this case the background picture stretches to fill the table width minus 179 pixels.
9) Save your document. You should get in the habit of saving your document every 5- 10 modifications.
a) Go to and Click File > Save.
10) Next we will build our Menu. Our sample site has 5 pages but we will actually create 6 <td> so our Menu doesn't stretch across the total width of our site.
a) Place your cursor at the beginning of line 17 (line must be empty) and open your Table Wizard (see paragraph 6 if you forgot how).
b) Enter the following in the appropriate fields.
c) Row = 1
d) Column = 6
e) Width = 80 and change "Pixel" to "Percent". Use the dropdown arrow to change.
f) Align = "Center"
g) Click "Insert".
Your document should now look like this! (Use the back button to return!)
11) Before we continue I want you to build a quick reference to the additional 4 pages of our sample Web site.
a) Open a new HTML page (see paragraph 1).
b) Replace "Your Title Here" with "About" in <title></title>.
c) Just below the <body> tag type: "My About Page"
d) Save your document As.. "about.html... (see paragraph 2 if you forgot).
e) Repeat the same process for "My Specials Page", My Sitemap Page", My Contact Page" and Save As... "specials.html", "sitemap.html", "contact.html" .
12) Ready to build our Menu. Starting at line 20...
a) In between your <td></td> tags type the word "Home".
b) Repeat the same with the word "About" in line 21,
c) "Specials" in line 22,
d) "Sitemap" in line 23,
e) "Contact" in line 24.
f) In line 25 enter a "non-breaking space". Go to and Click Insert > HTML Tags > Non Breaking Space.
Remember to save as you go and also refresh your Synchro View to see live results... Take a look at your Menu.
13) Presently your Menu is stretched across the width of your table which doesn't look good. Let's resize it. All we need to do is to tell the empty <td> to take up more space so the Menu can align nicely to the left.
a) In the <td> tag (line 25) place your cursor after the "d" and on your keyboard press the space bar to create a space.
b) Type width="60%" at the cursor position. Notice the % sign. The percentage value allows the empty <td></td> to stretch while keeping the "Menu" index constant.
14) Now we will link our Web site! We'll start with "Home".
a) In line 20 highlight the word "Home".
b) Go to and Click Insert > Hyperlink. The Hyperlink dialog opens. Notice the word "Home" is already inserted in the "Content" field.
c) Click the "Open File" dialog which is to the right of the "Link" field.
d) Navigate to your "Tutorial" directory and select "index.html". Click "Open". The file name "index.html" is now visible in your "Link" field.
e) Click "Insert" to insert the link into your document. Line 20 should look like this: <td><a href="index.html">Home</a></td>.
f) One more thing, let's add a couple Non Breaking Spaces on each side of "Home" to space out our Menu index.
g) Line 20 should now look like this: <td><a href="index.html"> Home </a></td>.
h) Repeat the same process for lines 21 to 24 with corresponding files. Don't touch line 25.
Your document should now look like this! (Use the back button to return!).
Before we continue, check out your work in Synchro View (paragraph 8 if you forgot) and test your Menu links... Clicking on a Menu link in Synchro View takes you to appropriate linked page (providing you saved your test pages in your "Tutorial" directory) as it would live on a server. Synchro View also enables "Go Back" and "Go Forward" buttons which allows you to travel between pages.
15) You're doing good... Now we will build our main table...
a) Place your cursor at the beginning of line 28.
b) Open your Table Wizard and complete the following:
c) Row = 1
d) Column = 2
e) Width = 80 and change "Pixel" to "Percent". Use the dropdown arrow to change.
f) Align = "Center"
g) Click "Insert".
16) We want to create a left bar which can be used for additional navigation, links or?...
a) On line 31 in the <td> type width="150" after the "d".
b) We also want to set a background color for our bar so add bgcolor="#FBF3E1".
c) Finally add a "Non Breaking Space" between <td></td>.
d) Line 31 should now look like this: <td width="150" bgcolor="#FBF3E1"> </td>.
NOTE: #FBF3E1 happens to be the color code I picked for this project, you could also use your "Color Picker" to insert the color of your choice at the cursor location. Your Color Picker is at: Insert > Color....
That covered the basic layout of our Web site. Let's move on to Quick Start Tutorial - With Style!
