- at many reboot steps, you need to hold down the c key to give you your boot options of hdd’s or dvd’s

- to work out a few driver issues in Windows (for older versions of OSX), use boot camp (free from apple) to create the windows drivers cd but DO NOT use it to partition your drive or any of that other jazz. Just make the cd which you’ll need later. If you have a later version of OSX all the drivers should be on your OSX install disk which you can put in after booting into your new OS.

Lets begin!

1. Make sure you have OSX installed on your macbook. I should not have to tell you this.

2. Run the following diskutil resizeVolume command (with a leading sudo command) in the osx terminal (according to your hard drive size) which resizes your osx partition and adds 2 others with the windows partition last (osx: hfs linux: linux windows: ms-dos fat32…will be converted at Windows install) So, run it like the following (except you’ll need to split up the sizes according to “YOUR” hard drive… and don’t go over):
(before running this command, check the list of partitions.
disk0s2 is most likely the main partition name. To find out type: ‘diskutil list’ and verify the name as well as the fact that there should be one EFI partition (disk0s1) and then your OS X partition(disk0s2)

3. (while pressing c) Reboot with the Windows DVD in the drive. Install windows on the correct partition(should be sda4 or hda4) Don’t worry if Windows doesn’t finish all the way or won’t boot all the way yet. Just get as far as you can in the installation and then go to the next step. Preferably you get a chance to boot into Windows to make sure it is working.

4. (while pressing c) Reboot and install Linux OS from the dvd of your choice. Make sure it’s also installed on the right partition and during installation, install the grub bootloader when it asks. Make sure grub is installed on the linux partition and NOT the base of the hdd (for example: sda3 instead of sda)

6. Don’t worry about any problems with Fedora not working perfectly either because Windows and Linux OS most definitely won’t work or boot yet due to a range of problems between file systems, boot loaders, operating-system greediness and so on…(Unless you have installed rEFIt already which is how I did it, but other suggest to do it later. I don’t see the harm in installing it earlier in lets say step 0.  This way you will have the choice of booting into Windows right away to see if it works otherwise…)

7. Boot into OS X and download a program called rEFIt and extract the files to the root directory in OSX (for example: Macintosh HD, just put the “extracted” files right in there and then…

8. The new version of rEFIt will install itself (reboot after install and see if you get the boot menu) otherwise…open up the terminal (still in osx) and cd into /efi/refit directory and then run ./enable.sh, it will ask for your password and bam, you have the refit boot screen loader for your mac making it possible to see all your installed partitions at startup (by pressing the alt/option key and selecting the rEFIt logo) and OS’s (even though they’re not all working yet)

If you can not boot into any operating system yet from rEFIt: (or if you can at least boot into Linux OS skip to 19)

9. (while pressing c) Boot into the Linux OS DVD and run the command “linux rescue” Get to the prompt (skipping the disk check and the ethernet setup)

10. Once at the prompt, chroot to /mnt/sysimage

11. cd into /boot/grub and type: cp grub.conf grub.conf.backup(for a backup) and then type: nano grub.conf

12. In nano, add the following at the bottom(and don’t save just yet):

title Windows at sda4
rootnoverify (hd0,3)
savedefault
makeactive
chainloader +1

(this is where the magic occurs allowing grub to point to the windows MBR on boot… but we’re not done)
13. Make a few other minor changes to what was there already in the file – just make sure your grub.conf file matches this and you should be ok:

# grub.conf generated by anaconda
#
# Note that you do not have to rerun grub after making changes to this file
# NOTICE: You have a /boot partition. This means that
# all kernel and initrd paths are relative to /boot/, eg.
# root (hd0,2)
# kernel /vmlinuz-version ro root=/dev/VolGroup00/LogVol00
# initrd /initrd-version.img
#boot=/dev/sda3
default=0
timeout=50
color white/blue
foreground ffffff
background 0639a1
splashimage=(hd0,2)/grub/splash.xpm.gz
#hiddenmenu
title Linux OS
root (hd0,2)
kernel /vmlinuz-2.6.18-1.2798.fc6 ro root=/dev/VolGroup00/LogVol00 rhgb quiet
initrd /initrd-2.6.18-1.2798.fc6.img

title Windows at sda4
rootnoverify (hd0,3)
savedefault
makeactive
chainloader +1

14. Ctrl-x and confirm with ” y ” to overwrite the existing file

15. Go back to root ( cd / ) and type: fdisk /dev/sda (that’s a space after fdisk)

16. Enter option: ” t ” … and then partition number ” 4 ” (the windows partition number) and then the id number ” 7 ” (which changes the Windows partition to an HPFS/NTFS partition id) Then type ” w ” to write the changes to the drive – This will save you from a windows booting error when the filesystem ID’s clash -

17. Type exit twice to reboot

18. (while pressing c) Reboot and DO NOT ENTER THE rEFIt MENU and then… eject the linux OS dvd and insert the windows dvd.

This is all I had to do to make it work:

19. Boot into the windows dvd and after choosing the language, click on “repair” instead of install and just follow each step. It will automatically find a windows startup problem and fix it automatically (if it doesn’t detect the OS or the problem the 1st time, reboot and do it again…it didn’t detect the problem the first time on mine…if it does on yours…kudos!)

20. After windows is repaired and the computer restarts, take out the DVD, select the rEFIt menu, and if you did everything correctly (and in the right order)…choose any OS and VOILA! You should have a triplebooting machine!!!

For older OSX versions:

~ And now, for those windows drivers from the cd you made. This can be a little tricky but pretty necessary if you want Windows to be totally functional with your mac. First, put in the drivers cd and start the installation. It will then begin to install all the necessary files and drivers into a directory but then… the installation will fail (at least it did on mine several times) So what you must do is snatch the folder full of drivers before it quits. Luckily, Windows stops at the end of the drivers installation and asks for some kind of verification on something. That is the window of time to go to Program Files (assuming you know where that is) and then copy and paste the “macintosh drivers” folder that it installed to your desktop. After the verify window is closed, it fails and rips back all those files, but if you did it fast enough, then you’ll have a copy on your desktop. Then you simply go into the Device Manager and update any drivers you want in there. I also looked through the whole folder and installed anything that looked necessary (if it wasn’t compatible then it wouldn’t let me). Sometimes it would say, “do you want Windows to re-install that software with the recommended settings” and i’d just say yes and let it do its thing. But, it’s your computer and you can do it any way you please.

Other things worth mentioning:
- Linux OS will automatically install everything pretty nicely except for your wireless adapter, ACPI (sleep mode), and other little things, use the updater or other resources online to fix Linux OS the way you want them.

Many thanks to: http://tripleboot.is2.byuh.edu/

Lets begin!

The MBR holds information regarding the number of partitions in the hard disk, starting point of the OS and so on to help the processor to start correctly each time it is turned on. This makes sure that the processor always starts processing from the correct fixed position. Thus it helps in bootstrapping the system. Restoring the MBR will help you in booting to Windows 7 if you have been dual booting with Linux, or if you are like me triple booting or quad booting with plenty of other OS’s and want to remove it now.

To accomplish this follow these steps.

1 ) Insert Windows 7 DVD and boot to it

2 ) Select the desired language in the first boot screen and click Next button

3 ) Select the option “Use recovery tools that can help fix problems…..” option and click Next button

4 ) In the System Recovery Options window click Command Prompt link

5 ) You will be in the prompt X:\Sources>. Type D: and press Enter

6 ) Type DIR and press Enter key

7 ) See if there is a directory named boot

8 ) If the boot is not present then switch to E: drive and repeat steps 6 and 7 above for E: until you find the boot directory. Repeat this step for other letters of your drive until you find boot directory.

9 ) Once boot directory is found type CD boot and press Enter key

10 ) You will be switched to boot directory i.e. E:\boot>, for example.

11 ) Type bootsect /nt60 SYS and press Enter key

12 ) Wait till the process is successful

13 ) Type exit and press Enter key

14 ) Now click Shut Down button in the System Recovery Options window

15 ) Restart your system to Windows

It is important to note that this technique is similar for fixing the MBR is all windows systems using the windows install or recovery disk.

Many thanks to: http://www.itechtalk.com/thread6519.html

Before we begin lets talk about what tools we will need a compiler.  You can Google c compiler to find any but I recommend Borland C++ compiler.  Be sure to read the instructions on how to use this program as I will not be referring to any specific program how how to compile and execute.

Lets begin.

Lesson 1: First C Program

Usually when using a compiler program and opening a new C file you will be given:

# include <stdio.h>

main()
{
printf("Hello, world\n");
}

This is a C program that displays one line. “Hello, world!”

The first line in this program is #include <stdio.h> is the code that will tell the following function where to find the library of all the definitions the program will be asking for. This declaration is important because without it your program will not function.

The next section main() declares where the main part of the program begins.  (note the main is spelled all in lower case, all programs written in c are case sensitive.)

Next lets look at the printf(“Hello, world\n”); line.  Here we learn that in proper C syntax you typically end a statement with a semi-colon (;), in contrast to the English language where you would end a sentence with a period(.).  This particular statement is a printf statement, which in C means that something is to be displayed.  In other words printf is telling your computer to create an output on to your screen or “print” on to your screen.  It is unsure to what the meaning of the f at the end of the statement means.  Some speculate that it means you have some control over the format of what gets displayed where others say it is there just to make the program look more intimidating!.

The bracket after the printf contains the data that is to be displayed.  In this case the data is contained within double quotation marks (“), which is used to tell the C compiler that what is between the quotes is not C, but a bunch of characters to be displayed, or a character string.

The \n at the end of the character string is an technique for including special characters that are not part of the output.  These special techniques always begin with a backwards slash (\) and are followed by one or more characters.  In this case, the special character \n is  called the newline character and causes the display to advance to the beginning of the next line.

Here is a list of some other commonly used characters:

\a – beep (a stands for “alarm”)
\b – backspace
\f – form feed (usually only affects printer output)
\t – go to the next tab stop (usually every 8 columns)
\\ – output backslash

Why don’t you try out these other special characters and also adding a second printf function that will display “This program was made by yourname”.  Keep trying until it works out.

Click here for sample executable
Click here for source code

Click here for next lesson: Input, Output, and Variables (coming soon)

Creating an External Style Sheet
Linking External Style Sheets
Offering Alternate Style Sheets
Creating an Internal Style Sheet
Importing External Style Sheets
Using Media-Specific Style Sheets
Applying Styles Locally
The Inspiration of Others:CSS

Creating an External Style Sheet

An external style sheet is great for giving a common look amongst the pages of your web site.  You can define these styles in a style sheet and then tell each page of your site to consult with this external style sheet to ensure that each page will have the same look.

The first step in creating an external style sheet create a new text document or if you are using a web development software tool like Dreamweaver, open up a new CSS file.

The next step will be to define the style rules for your web pages as described in these tutorials:

Defining Selectors (coming soon)
Formatting with Styles (coming soon)
Layout with Styles (coming soon)
CSS for Handhelds (coming soon)
CSS for Printing (coming soon)

Once you have defined your style rules you can then save your document with the extension .css

Linking External Style Sheets

The simplest way to apply a style sheet’s rules to a web page is to link to the style sheet.

To link an external style sheet first type <link rel=”stylesheet” type=”text/css” where text/css indicates that the style sheet is written in CSS, in the <head> section of your page. Next type href=”url.css” where url.css is the name and location of your style sheet. Finally close the tag with />.

Here is one example:

<link rel="stylesheet" href="../../lightbox2.04/css/lightbox.css" type="text/css" />

Now your style sheet is linked to your web page.

Offering Alternate Style Sheets

You can link more than one style sheet and let visitors choose the styles they like best.  This allows for a default/base setting style sheet with rules that will stay consistent and then a preferred style rule which is applied regardless of choice and then a alternate style sheet setting which the visitor can choose from that will change over from the preferred style rule.

To offer alternate style sheet first designate the style that should be used as the base, regardless of the visitor’s preferences as described in the heading above, Linking External Style Sheets.

Next you want to designate the preferred style sheet which will contain only the style rules that will be changed by the alternate choice.  To do this add title=”preferred.css” where preferred.css is the name of the style sheet rule.  Do the same for the alternate style sheet except change “rel=”stylesheet” to “rel=”alternate stylesheet” again adding title=”alternate.css” where alternate.css is the name of the alternate external style sheet. Here is an example.

<link rel="stylesheet" href="../../lightbox2.04/css/lightbox.css" type="text/css" />
<link rel="stylesheet" href="../../lightbox2.04/css/lightbox.css" type="text/css" title="black borders" />
<link rel="alternate stylesheet" href="../../lightbox2.04/css/lightbox.css" type="text/css" title="no borders" />

The visitor can now select from his/her browser from the view drop down menu which style sheet they would prefer to use.

Creating an Internal Style Sheet

Internal Style sheets let you set the styles at the top of the HTML document to which they should be applied.  This method is only useful if you do not plan on using the same style sheet more than once.

To create an internal style sheet, in the head section of your HTML document type, <style type=”text/css”> Then define as many style rules as desired as described in Intro to CSS. After all the style rules of been defined close the internal style sheet with </style>. Here is one example.

<style type=”text/css”> img{border:4px solid red;} </style>

It is important to realize that internal style rules will override any external style rules if the style tag comes after the link tag that links the external style sheet to the HTML document.

Importing External Style Sheets

One quick tip on using internal style sheets is to also import an external style sheet into an internal style sheet by typing @import”external.css”; where external.css is the name of your external css, into the style tag.  But be sure not to use the import function after any other style rules.

Using Media Specific Style Sheets

You can designate a style sheet to be used only for a particular output. The three main outputs you may want to consider is screen, print, and handheld.

To designate media-specific style sheets add media=”output” to the opening link style tags, where output is one or more of the previously mentioned outputs.  Be sure to separate the values with commas.  Not defining a media output will leave the css default output to all.

<link rel="stylesheet" href="../../lightbox2.04/css/lightbox.css" type="text/css" media="screen" />

You can apply the output rule with the import rule by adding the output following the url/name of the style sheet being imported like so.

<style>@import “lightbox.css” screen;</style>

Applying Styles Locally

Applying styles locally is an easy, small scale and safe way to apply style rules to your web page.  This method is easy for editing however, it does not provide a centralized way of formatting your entire web site.

To apply styles locally type style= within the HTML tag that you want to format, whether it be the HTML tag itself or the img tag, td tag, and so on.  Create a style rule without curly brackets or a selector. The selector isn’t necessary since you are placing it directly inside the desired element.  To create additional style definitions type a semicolon ; after each definition and repeat. Type the final ” mark to close the style.  Your local style should look something like this.

 <td style="font-family: HelveticaNeueLT Std; font-size:14px">

It is also important to note that all local style rules will override any external linked or imported style rules.

The Inspiration of Others: CSS

By viewing the source code of a web page you can look and see how others have created their style sheets.  This is something I do often to help me create my own style sheets from other style sheets a come across that I feel are very inspiring.

To view other designers’ CSS code first view the page’s source by going to view > page source on your browser.  If the CSS is local/internal that you can see the CSS right away.  If the CSS is linked externally you can copy the url of the CSS file shown in the link element or the import rule.  Once you have copied the address of the style sheet paste this url into your browsers address box and hit enter.  If the style sheet address is relative you may have to rebuild the url by combining the page’s url with the style sheets url.

Here is a sample of an HTML e-mail we are putting together for broadcast e-mailing. “Email V2″

Click here for previous tutorial: Intro to CSS

That concludes this tutorial.  For a list of other CSS tutorials click HERE.

The good thing is if HTML is good for anything these days it is good for e-mail because HTML web pages are a thing of the past.

Before we begin however, let me first say this. The way I learned and the way I am going to teach you does not include everything there is to know about HTML e-mail nor do I think it is the best way to do it.  But it is one way to do it and it is pretty simple.

I would also recommend that you learn a little about HTML and CSS if you do not know already as I will not be going into details.  If you are interested I have made more tutorials on HTML and CSS which you can find in this blog.

Step 1: Use Tables!

This is probably the best way to organize your HTML e-mail.  If you don’t know how to make tables with code “Dreamweaver” has an easy table function button. If you don’t have “Dreamweaver” you can make your HTML e-mail in “Word” which I am positive you most likely have.  Just save your word document as .html. (This should work and word is also really simple when using tables and images)

Don’t forget you can also make tables within an existing table cell.

Step 2:Do Not Use CSS!

CSS will not work within HTML e-mails but don’t freak just yet.  There is an alternative and that is “Inline CSS”.

Inline CSS allows you to create CSS functions within an HTML tag.  This works by typing the CSS following your opening HTML tag and before closing with “style=” and a CSS function following it. You can add more by using “;” after each function.  So far your e-mail should contain something like this.

<td style="font-family: Helvetica Inserat LT Std; font-size: 17px"> PROFILE</td>

(I would not recommend using Helvetica, but I like it so much I used it for mine.  However, most would say stick to your basic fonts such as Arial)

Step 3: Do Not Use Background Pictures!

Simply because they won’t work.  Select a background colour for your table or for each cell instead.  I would also suggest you strictly define the size of each cell and your complete table to avoid a squished or expanded e-mail like so.

<table style="" width="550" border="0" align="center">

Step 4: Save  Received HTML E-mails

If you have received any HTML e-mails that you liked use this to your advantage.  Learn the code and mimic it.  This is probably the best advice I can give you in regards to scripting a really super nice HTML e-mail. (DUH!)

Step 5: Copy the Preview Into Your E-mail

I must of spent a week wondering why the e-mail I created would not send properly and this was my first step in learning how to code the HTML e-mail properly.  Rather then inserting the HTML code into the e-mail, preview the e-mail in your browser > press  ctrl-a > open a new e-mail > press ctrl-v >  send.

That concludes this tutorial.   I hope this was useful as I must of read a dozen other extremely detailed tutorials that did not get me far at all.  If you are still having troubles I will be happy to help me out, just send me an e-mail to adrian@alphaorganicmedia.com and I will be sure to reply to as soon as possible. Or you can visist  http://www.w3.org/TR/1998/NOTE-HTMLThreading-0105.htm.

That concludes this tutorial.  For a list of other HTML tutorials click HERE.

Constructing a Style Rule
Adding Comments to Style Rules
When Rules Collide
A Property’s Value
CSS Color

CSS (Cascading Style Sheets) helps define the appearance of your web site.  It is the next step in web site design where HTML can only give you a basic structure.

A style sheet is a page of code that contains one or more rules that determine how certain elements in your web page should be displayed.  CSS works with properties and values to do this and will contain most formatting functions of your web site.  CSS also contains dynamic properties which allows items on your web page do appear and disappear and is useful for creating drop down menus and other interactive components.

CSSs are created outside the web page meaning they are a seperate document (.css) that can be used for multiple pages on your website.  So lets begin.

Constructing a Style Rule

There are two parts to a style rule, first the selector and second the declaration.  The selector will tell which elements are to be affected by the rule and the declaration will specify what should be done.

To construct a style rule first type the selector which could be something like h1, then type a { to open up a declaration and type a property then value like this, {color: blue; (spaces and final semi-colon are optional).  If you want you can type more property values following the semi-colon like this, color: blue; background: white; then close the declaration with }. The product should look something like this:

h1 {color: blue; background: white;}

Adding Comments to Style Rules

I would highly recommend  adding comments to your style sheet to help keep things organized.  It is easy to get confused on what rules are being applied to what elements.  To add comments to style rules simply type /* to begin your comment and the type */ to end the comment.  The product should look something like this:

/* Color rule for the h1 header element*/
h1 {color: blue; background: white;}

When Rules Collide

In some cases you can include a style right in your HTML code and apply then to any element such as the <p> element by inserting it at the top of your HTML code and well as importing the styles from an external document.  Some styles are then inherited from parent element to child element.

A parent to child situation occurs when you have more than one style rule that applies to a given element.  CSS  uses the principles of cascading to take in characteristics such as inheritance, specificity, and location to determine which style rules will win.

To begin we will first look at inheritance.  To describe how inheritance works with CSS the best way will to use an example.  If we were to create a style rule with a selector p and we gave the rule a property value of the color red, all p elements will  then be red and all decedents of the element will then also be red, such as <em> elements within the p element.  There are also properties that will not be inherited and I will be creating a list of CSS properties and values soon to describe them all.

Second is the law of specificity that states, the more specific the rule the stronger the rule is.  Example, if the p rule states that all p elements be red but a second rule states that all p elements with a class of bio be blue that the second rule will override the first.  Style rules can get more specific with id attributes which is considered the most specific as an id can be used only once.

Third is the law of location of the rule.  In the case of competing rules, location could break the tie because rules that appear later in the document will be stronger and will apply to all elements following it.  This is especially true when applying style rules directly in your HTML document.  If that is not enough you could always add !important at the end of a rule to override the whole system.

A Property’s Value

Each CSS property has differnt rules about what values it can accept.  Some properties can accept relative values, percentages,  URLs, or colours while others can only accept a list of pre-defined values.  These values will be discussed in later tutorials but for now I will describe the  basics of these systems here.

Inherit

You can use the inherit value for any child property you want to have the exact same property as the parent

Predefined Values

Most CSS properties have a few predefined values that can be used.  For example, the display property can be set to block, inline, list-item, or none.  Also, these values do not need to and must not be enclosed in quotation marks.

Lengths and Percentages

Many CSS properties such as font-size take a length or percentage value.  All length values must contain a quantity and unit like 3em or  10px, the only exception being 0.  Some length types are relative to the other values such as em which would mean “twice the font-size”. Pixels are relative to the resolution of the monitor.  Of course their are also absolute values such as, inches (in), centimeters (cm), millimeters (mm), points (pt), and picas (pc).   It is advised that absolute values are used only when the size of the output is known.

Bare Numbers

A very few CSS properties accept a value in the form of a number without a unit.  The most common being line-height and z-index, but  are typically not well supported.

URLs

Some CSS properties allow you to specify the URL of another file.  In this case the style rule will contain url(file.ext) where file.ext is the path and name of the desired document.  The product should look like this:

background: url(http://www.alphaorganicmedia.com/images/logo.jpg)

Quotation around the file name could be used but are not necessary.

CSS Colours

There are several ways to specify colours for CSS properties.  The first we are pretty familiar with which are the 16 predefined colours but these colours are usually not enough.

Instead you can construct your own colours by specifying the amount of red, green, and blue (rgb).  To do this you could specify the rgb values with percentages or numerical values (1-255)l of which can be determined by finding out what a taking a percentage of red, green, or blue and finding out what numerical value it is from 255.  For example 35% of 255 is 89 so your property should look something like this:

rgb(35%, 0%, 50%)

or

rgb(89, 0, 127)

The best way however, would be to convert these values into hexadecimal format and add # in front and the result should look like #59007F.  I won’t get into specifics of hexadecimal because actually I don’t know much about it except that 59 is the  hexadecimal equivalent to 89, 00 is the hexadecimal equivalent to 0, and 7F is the hexadecimal equivalent to 127. And if you have three pairs such as #ff3344 you can abbreviate it into #f34.  Instead I just open up Photoshop to find the colours I want and copy the hexadecimal value of that colour into my CSS value.

Click here for next tutorial: Working with Style Sheets

That concludes this tutorial.  For a list of other CSS tutorials click HERE.

Creating a Link to Another Web Page
Creating Anchors and Linking to a Specific Anchor
Targeting Links to Specific Windows
Setting the Default Target
Creating Keyboard Shortcuts for Links
Setting the Tab Order for Links
Using  Images to Label Links
Linking Thumbnails to Images
Dividing Images into Clickable Regions
Create a Client-Side Image Map

Lets begin.

Creating a Link to Another Web Page

First on the list of things to learn is Creating a Link to Another Web Page.  Typically web sites have more than one web page and most likely you would like to link you pages together.  Another purpose for this type of link is to also have a link refer to a completely different site all together.  To create a link to another web page do the following.  Within the HTML code you would like to have the link appear open a tag with <a href=”page.html”> where page.html is the URL of the destination.  Following this tag you should then type the label text that will correspond to this link and finally close the tag with </a>. The result should look something like this.

<a href="http://www.alphaorganicmedia.com">Alpha Organic Media</a>

The link should appear on the website like this: Alpha Organic Media

It is important to note that rather than linking to a location on my web sites server with  a page.html I have included a URL reference instead which includes http:// before the www.alphaorganicmedia.com.

Creating Anchors and Linking to a Specific Anchor

An anchor is similar to a general link like that one shown above but instead of linking to another page it is a link to a secific location on the same page, for example the list I have created at the top of the page.   First to create an anchor type <a name=”anchor name”> where you would like the anchor to be on the page and where anchor name is the text that will be used to refer to when creating the link to this anchor. From here you can than choose to close the anchor with </a> or type a desired text, like a header that you would like to appear where the anchor is like I have done in this tutorial.  Here are examples of each:

<a name="anchor1"></a>
or
<h1><a name="anchor2">Creating Anchors</a></h1>

The next step is to create a link somewhere on your page to link to this anchor you have just created.  Doing this is almost the same as creating a link to another web page.  The difference in linking to an anchor an not a page is replacing the page.html with the name of the anchor preceded with a # like this, <a href=”#anchor2″>Creating Anchors</a> and that should work.

Targeting Links to Specific Windows

Targeting a link to specific window lets you dictate how a user will navigate through your website in two ways; deciding whether the user will open the link in a new browser window allowing the previous page to remain open or open the link in the same window that the link originally appeared in.  Click these links to see examples:

Alpha Organic Media (new window) Alpha Organic Media (same window; click back to return here!!!)

Now that you clearly see the difference here is how you code this function into your HTML. Within the link definition type target=”window”.  Window is the specific window your would like the window to open in which is “_blank” for new window and “_self” for same window.  Your link should look something like this now.

<a href="http://www.alphaorganicmedia.com" target="_blank">Alpha Organic Media</a>

You can also choose to get more specific with your targets by choosing to create individual target names that you would like certain links to appear in.  For example if I wanted to have all my music links to appear in the same window to avoid the user opening up multiple windows I would give these links the target name target=”music”

Setting the Default Target

A link by default opens in the same window but like explained above you can choose the default window simple links with no targets will appear in.  This technique  is good when you have a lot of similar categorized links and little variation of other types of links.  For example if most of my links on a certain page were music links and I wanted all these links to appear in the same window with the exception of a few I would type <base target=”music”/> above the <head> tag of my HTML to make sure that all my default links open in the same window.  Then I could define the exception with other target values.

Creating Keyboard Shortcuts for Links

Creating keyboard shortcuts is a cool trick to let users activate links without using a mouse. To add a keyboard shortcut to a link add accesskey=”access key“ where access key is the letter and/or number the user will press to access that link plus if desired the information on what to press.  Here is an example on how this will work.

<p><a href="#5" accesskey="5">Creating Keyboard Shortcuts for Links</a>(Ctrl-5, Alt-5)</p>

The view should then see something like this: Creating Keyboard Shortcuts for Links (Ctrl-5, Alt-5). Unfortunately creating keyboard shortcuts does not work for all browsers and I am also unable to demonstrate it within the WordPress blog format.  It is a good thing that this technique is not widely used or heard of so there is one other mouse trap to keyboard navigating which I will teach you in the next section.

Setting the Tab Order for Links

Giving a link a Tab Order allows users to scroll through links on your page with the “TAB” button on their keyboard.  Typically tab order links are selected in order that they appear on the web page but you may choose to customize the order in which users will select links with the tab order function, this generally works will when image maps and other elements are used to create links.  We will discuss image maps further in this tutorial.

To set the tab order of your links, in your link tab type tabindex=”n” where n is the number that sets the tab order. It should look something like this.

<a href="http://www.alphaorganicmedia.com" tabindex="1">Alpha Organic</a>

The user should see you link as usual but this time press tab to see how the tab selection works but since there are other tab index functions included in the theme of this blog you will have to click it a few time until you see http://www.alphaorganicmedia.com at the bottom left of your browser and click enter to select the link.
Alpha Organic

Using Images to Label Links

Often you may come across an opportunity to use images as links.  Here is how you do that. Type <a href=”destination.html”> where destination.html is the URL of the page you want the user to go to then type <image src=”image.jpg” where image.jpg is the location of the image you want to appear as the link and if desired border=”n” where n is the width in pixels you would like the border of the picture to be, 0 being no border at all and finally close the tab with /></a>. You can also add the label text with alt=”label” then your tag should look something like this.

<a href="http://www.alphaorganicmedia.com" target="_blank"><img src="http://www.alphaorganicmedia.com/images/logo.jpg" border="0" alt="Alpha Organic Website" width="50" height="50" /></a>

Your user should see something like this:

Linking Thumbnails to Images

Thumbnail images are miniature images displaying a link to the larger image.  This technique is useful if you want the user experience to be quick when loading the page.  This works exactly the same as using images to label links except the destination is the image itself.

There are two methods of scaling down an image for a thumbnail. You can either have a separate smaller version of the image you want to link to on your server and use that as the link or use the same image you are linking to as your link but add a couple extra functions within the link tag.  To do this type <a href=”image.jpg”> where image.jpg is the location of the image you are linking to, then type <img src=”mini.jpg” where mini.jpg is the miniature version of the image you are linking to or use image.jpg again and add width=”x” height=”y” follwing the image.jpg to scale down the image to thumbnail size where x and y are pixel values. If desired give the image a label text with alt=”label” and close the tag with /</a>. The product should look something like this

<a href="http://www.alphaorganicmedia.com/images/logo.jpg" target="_blank"><img src="http://www.alphaorganicmedia.com/images/logo.jpg" border="0" alt="Alpha Organic Logo" width="50" height="50" /></a>

The user should see something like this:

Dividing Images into Clickable Regions

I am sure you have come across web pages that have images with clickable regions such as a navbar at the top of the browser screen.  This section will teach you how create an image with different clickable regions or links.  To create this type of image it is important to have some type of image editing software such as “Photoshop”.  You may also want to read this tutorial for further support when working with images in HTML: Formatting Images in HTML.

Now the first thing you want to do is open the image in Photoshop or your image editing program.  In Photoshop choose Window > Info or click the info tab at the top right of the program and make sure the selection is in pixels by clicking the cross hair which I have circled in red.

Next, point the cursor over the upper-left corner of the region you wish to define to find the x and y coordinates for that image.  Make sure you write these coordinates down because you will have to repeat this for the lower-right corner of the image as well or for a circles center and radius.

The next step will show you how to write the HTML code to now map the image out.

Create a Client-Side Image Map

An image map links the areas of an image with a series of URL’s so that a click in a particular area brings the user to the corresponding page.  This is a great technique for creating some visually appealing navbars on your website.

First step to do this is type <map on the HTML document that contains the image.  In the same tag now type name=”label” id=”label”, where label is the name you want to give your image map. Close the tag with >

Next we want to define the clickable regions.  To do this  type <area to open the tag and alt=”info” where info will describe the name of the particular link you are making.  Then type shape=”type” where type is the shape of the link which will be either rect for rectangle, circle for circle or poly for an irregular shape.  After this you want to type the coordinates; for a rectangle use coords=”x1, y1, x2″, for a circle use coords=”x, y, r”, where r is the radius, and for a polygon type coords=”x1, y1, x2, y2″ and so on for each point of the polygon. Finally type href=”url.html” where url.html is the address you want to direct your user to.  You could also choose to type noref if a click in this area should have no result, add target=”name” to target the user to a certain point on the page you are directing them to, and add accesskey=”x” to add a keyboaord shortcut. Type /> to complete the clickable area and repeat for more regions.

Type </map> to complete the map.

Next type <img src=”image.gif”, where image.gif is the name of the image to be uesd as an image map and add any other attributes you would like the image to have (see Formatting Images in HTML).  Then type usemap=”#label”, where label is the map name defined earlier above and finally close the tag with />.  Here is what the product should look like in HTML for one clickable region:

<map name="logo" id="menu">

<area alt=AO Tutorial Blog Home" shape="poly" coords="154, 41, 234, 46, 301, 1, 457, 43, 372, 47, 305, 305" href="http://aotutorial.wordpress.com/" />

</map.

<img src="http://www.alphaorganicmedia.com/images/logo.jpg" alt="logo menu" usemap="#logo" />

The product should should look something like THIS example with one mapped link.

That concludes this tutorial.  For a list of other tutorials click HERE or click Formatting Images in HTML for previous tutorial relating to this one.

To insert an image on a page first place the cursor where you want the image to appear and type <img src=”image.url” where image.url indicates the location of the image file on your website server.  If  your website is offline replace image.url with the location of the image on your computer.  Close the tag with />

With some slow connections and handheld devices may come across some images may not appear and or will appear with a red x or other symbol in the top left corner like so.

Some developers may want to offer an alternate text to display when images don’t appear.  To do this type alt= within the image tag following the “image.url” like so.

<img src="alphaorganiclogo.jpg" alt="alpha organic logo" />

Now that your image is in place you will likely want to scale it to fit your page more properly.  To scale an image insert your image tag <img src=”image.url” then type width=”x” height=”y” where x and y are the desired width and height of your image in pixels.  Close the tag with />

You can use the align attribute within the image tags to make images float.  To do this type align=”left” or align=”right” within the image tag like so.

<img src="alphaorganiclogo.jpg" alt="alpha organic logo" align="left" />

You can also use the align attribute for images in the middle of a large body of text and choose the direction top, middle, bottom to make the image appear differently within the body of text.

When making an image float you effect all the elements that follow it unless you insert a special line break.  The clear attribute inserted into the common br tag indicated that all elements should begin after clearing the image(s).  To to this type <br clear=”left” /> or <br clear=”right” /> to stop content from wrapping around the image on wither the left or right margin.  You can also type <br clear=”all” /> to stop content from wrapping on both the left and right margins.

If you decide not to stop elements from wrapping around an image the content that is wrapping around the image will appear very close to the image.  This does not look nice so you will probably want to add space between the wrapping elements.  To do this type <img src=”image.url” and follow it with hspace=”x” to add pixel space on the left and right side of the image and vspace=”x” to add pixel space on the top and bottom of the image where x is the pixel amount.  Close tag with />

Most browsers support associating small image with your website url in the address bar.  To include these icons on your page in the head tag type <link rel=”icon” href=”favicon.ico” type=”image/x-icon”/> where favicon.ico is the location of your image on your server. For compatibility with Internet Explorer type this below the first icon tag <link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon”/>

That concludes this tutorial.  Click Links in HTML (coming soon) for next tutorial or click Here for a list of all HTML tutorials.

Lets begin by looking at the start up screen when opening OTSAVP which should look something like this.

Since this tutorial is about creating your own Radio Station lets choose the “Radio Broadcaster /Webcaster” category. Hit the Radio Broadcaster button and click OK.

From  here the next thing we want to do is import the media we would like to broadcast.  At the top left of OTSAVP you will see the File drop down menu where you can select “Import / Refresh files to to Media Library”. Click this option and  you will see a menu looking like this.

From this menu hit the “Import / Refresh Files” button where you will be taken to the file selection window where you can select a single audio file or a group of audio files.  OTSAVP will then begin to import and process the files.  What I mean by process the files is that OTSAVP will automatically determine the whether the beginning of the song ends abruptly or fades out so you will automatically have smooth transitions between tracks.  You can always go back and tweak each file later, but we will visit that technique later in this tutorial.

The image above shows the media library which will appear on the right hand side of OTSAVP.  From here select which files you would like to add to your playlist by highlighting them with your mouse and keyboard and dragging them to the left hand site which is blue, or the playlist section of OTSAVP.

OTSAVP is a complete radio station automation program. It will do automatic artist separation, rate the songs, and stress the songs that you want to appear more often.  OTSAVP will also let you generate an automatic playlist that will span a pre-defined amount of time based on all the attributes you give a song.

To create a playlist like this you want to go to Edit > Generate Playlist > Template Builder.  Here you will have the option as displayed in the image below.

As you can see there is a rating selector, similar item separation to avoid having the same artist play too often, as well you can choose how often a song is played by hour, by percentage, and define how long the playlist should play for.

Another cool tool with OTSAVP is that you can select a preset dynamics processor.  By selecting View > Dynamics Processor you can select a preset or customize your own compressor and sample it in real time.  The dynamics processor should look something like this.

OTSAVP has many other useful options but after this you are pretty much ready to have your playlist broadcasted across the web.  To learn how to do this click the How to Intergrate OTS AV Pro with ShoutCast (coming soon) or click HERE for a list of Online Broadcasting tutorials.