Lyrics & Knowledge Personal Pages Record Shop Auction Links Radio & Media Kids Membership Help
The Mudcat Cafesj

Post to this Thread - Sort Descending - Printer Friendly - Home

Chord Diagram Primer

Related threads:
Seeing Chords as colours (26)
Help: Chord Theory/Questions (19)
chords for open tunings (9)
Chord Req: Chord formation help (16)
Help: Mistery chords (13)
bar -chord help (13)
A chord by any other name.. (13)
Mystery of Django's Chords. oooooh! (38)
Moveable Chords (12)
Thirteen movable seventh chords (6)
Our Friend the movable B7 chord. (87)
When is use of third degree justified? (16)
chord inversions. rick needs help! (26)
The hardest chord that you play (30)
I feel CAGED!!! - Guitar chords (20)
Help: Playing partial chords (14)
Eeeee! Flat breads are delicious! (18)
Does Mudcat Seem to Be flat Right Now? (45)
Weird chords (48)
What the 'F' is goin' on at Mudcat? (107)
Beginner guitar - G chord fingering (44)
Nurds-Other Voicings, Other Chords (24)
Questions about G, D, E7, and A7 (16)
Fielding thinks he's so G.D. clever! (20)
Chord diagrams in threads? (29)
A GMaj Modal System for Strummers, Hard? (11)

Mark Clark 12 Apr 00 - 03:54 PM
Mark Clark 12 Apr 00 - 04:53 PM
Mark Clark 13 Apr 00 - 12:44 AM
Hyperabid 13 Apr 00 - 04:52 AM
wysiwyg 15 Jul 01 - 11:40 AM
shankmac 15 Jul 01 - 12:45 PM
Geoff the Duck 06 Sep 01 - 08:49 PM
GUEST,Mark Clark (via public proxy) 03 Jan 02 - 05:00 PM
Share Thread
Lyrics & Knowledge Search [Advanced]
DT  Forum Child
Sort (Forum) by:relevance date
DT Lyrics:

Subject: Chord Diagram Primer
From: Mark Clark
Date: 12 Apr 00 - 03:54 PM

This is the Chord Diagram Primer thread. It's purpose is to provide a simple tutorial for folks who would like to know how to create hypertext links (blue clicky things) in their posts that display any guitar chord diagram of their choosing along with a MIDI representation of the chord so people can hear how it sounds. The chords are generated courtesy of the University of Virginia Music Department and a link to their site may be found in the Mudcat links section.

People who discover additional truths concerning this process should add their wisdom here as well. For questions and general discussion of the process, please start an appropriately titled thread so folks can feel free to post and respond as they choose. That way we can keep this thread small so it is available quickly to those wanting to use it as a reference.

I also respond to email and have submitted my email address for inclusion in the Mudcat email directory.


      - Mark

Post - Top - Home - Printer Friendly - Translate

Subject: RE: Chord Diagram Primer
From: Mark Clark
Date: 12 Apr 00 - 04:53 PM

The techniques described here help you include guitar chord diagrams in your posts by creating a hypertext link to the chord you wish to describe. Using the techniques, you can provide a visual and audio reference for interested readers without resorting to imbedding images into the thread. The chord images come from the University of Virginia Music Department and may either be looked up on their site or specified entirely by you. Many people will prefer the lookup and paste method but whey you're trying to describe "the lost chord" there may be no way to find it in the Online Guitar Chord Dictionary. In those cases, you must resort to specifying the fingering pattern yourself. Here, then, are the techniques I know about at this writing.

First of all, here is a complete Universal Resource Locator (URL) for the Online Guitar Chord Dictionary.

<a href="">your text goes here</a>

If you were to copy this text to your clipboard and drop it into one of your posts, you'd get a hypertext link to the dictionary site using what ever text you included in the URL. Be careful not to modify anything except the "your text goes here" part.

Of course dropping that link into your post doesn't provide any diagram, it's only a link to the lookup site.

Here is the general HTML syntax for any link:

<a href="  ">your text goes here</a>

To include an ordinary chord in your post, do the following:
Copy the general link syntax above and paste it into your post at the proper place. Then change the "your text goes here" part to whatever you want to appear in blue with an underline. Now visit the Online Guitar Chord Dictionary site, look up your chord in the dictionary, look at the options provided by the search and select the version you want to use. While you are viewing your selected chord, point anywhere on the page and press your right mouse button. You should see a popup menu giving you a list of choices. Click the option that's called "copy shortcut" or something close to that. You now have the needed URL on your clipboard. Arrow back to the Mudcat site where you are preparing your post, place your blinking insertion point between the quotation marks in the link string and press Ctrl-V on your keyboard or select Edit/Paste from the main menu at the top of your browser. The URL for your chord symbol will be dropped into the link and your task is complete. Now just move down beyond all the link stuff and continue typing your post. When you read your thread later, you'll see your "blue clicky" all ready to point readers to your chord.

To learn how to completely specify your own fingering for a chord, read the next post.

      - Mark

Post - Top - Home - Printer Friendly - Translate

Subject: RE: Chord Diagram Primer
From: Mark Clark
Date: 13 Apr 00 - 12:44 AM

This technique will let you build a hypertext link (blue clicky) to display any guitar chord you would like to represent. This is not nearly as daunting as it may seem. Reading these instruction is far more difficult than actually performing the work. The link is not built by copying a URL from the dictionary site, rather it is more or less hand coded by you based on the particular way you like to form the chord you are describing. To make things as simple as possible, I'll start you off with a template. You can copy the template and save it in a text file on your computer so you have it at hand whenever you need it or you can simply elect to trace this thread and keep a pointer on your personal page. The template has all the parts necessary to build an active chord reference.

Chord Link Template:

<a href="">your words</a>

To use the template, highlight it and copy it onto your clipboard using Ctrl-C or selecting Edit/Copy from the menu. Paste it into your post using Ctrl-V or by selecting Edit/Paste from the menu.

Now you're ready to fill in the details. You'll see I've placed dummy arguments into the template as place holder. Your job now is to replace each dummy argument with the proper value based on the descriptions below. Be careful not to disrupt anything but the dummy arguments themselves. Don't accidentally remove a colon or other character. Once you've set all the parameters, you've completed the chord reference and are ready to continue typing your post.


root the simple name of the chord family you're working with. (e.g., C, C#, Eb, etc.)
ext The extension or modifier for the chord if any. If no extension is wanted, just replace the word ext with a single hyphen. If you want an extension, the following list was gleaned from the reference site and should be acceptable: (e.g., major (no3rd) sus4 m (#5) (b5) 6 6(add9) m6 m6(add9) 7 7(#5) 7(b5) 7(#9) 7(b9) 7sus4 dim7 m7 m7(b5) maj7 maj7(#5) maj7(b5) maj7(add9) m(maj7) (add9) 9 9(b5) 9(#5) (b9#5) (#9#5) m9 m9(maj7) 11 (#11) m11 13 13(b9) 13(b9b5). Others may be accepted as well although I haven't yet experimented with any.
label This parameter is simply a text string used as a label at the top of your chord. Often it is just a copy of the root and ext parameters stuck together to form the third parameter.
ff1..ff6 The ff parameters specify the fret and the finger for each of the six strings. The two parts of each ff parameter are separated by a normal forward leaning slash character in the form: fret/finger. The tricky part is this: all fret references are normalized to the first five frets on the guitar. Wherever your chord begins on the neck of the guitar---the lowest fret used---should be referenced as fret number one. The fingers are numbered 1..4 in index to pinky sequence. I have successfully been using the letter T to designate the thumb. An open string is described as O/- (capital O and a hyphen), while damped or unplayed strings are described using X/- (capital X and a hyphen). The six ff parameters described the strings in left to right (bass to treble) sequence and all six strings must be described in some way.
barre The barre parameter is a way of describing barres when they occur. If the chord contains no barre, simply replace the dummy parameter with a single hyphen character. If the chord includes a barre, the parameter consists of three digits separated by hyphens (e.g., 3-1-6 for a third fret barre). The first digit is the relative fret on which the barre occurs. The second digit is the string number of the leftmost (lowest pitched) string included in the barre and the final digit is the rightmost (highest pitched) string participating.
pos The position (actual fret) at which the chord is to be played. We built our chord pretending it was contained within the first five frets of the guitar. Here is where we indicate the actual position of the chord. The parameter is just a number from the series 1..20 or so.

That's all there is to it. The template makes it easy to remember what parameters are needed and their sequence. Once you've built a few chord links by hand, the process will become second nature. When you no longer need to refer back here to remember how to build one, you may find it's faster than the hunt-cut-paste method.

Have fun and let me know if you like these or if you're having trouble. If my descriptions simply aren't clear, feel free to enhance this primer by adding your post to this thread. For praise or complaints, please start another thread.


      - Mark

Post - Top - Home - Printer Friendly - Translate

Subject: RE: Chord Diagram Primer
From: Hyperabid
Date: 13 Apr 00 - 04:52 AM

You de man! Mark - great thread...


Post - Top - Home - Printer Friendly - Translate

Subject: RE: Chord Diagram Primer
From: wysiwyg
Date: 15 Jul 01 - 11:40 AM


Post - Top - Home - Printer Friendly - Translate

Subject: RE: Chord Diagram Primer
From: shankmac
Date: 15 Jul 01 - 12:45 PM


Post - Top - Home - Printer Friendly - Translate

Subject: RE: Chord Diagram Primer
From: Geoff the Duck
Date: 06 Sep 01 - 08:49 PM

Post - Top - Home - Printer Friendly - Translate

Subject: RE: Chord Diagram Primer
From: GUEST,Mark Clark (via public proxy)
Date: 03 Jan 02 - 05:00 PM

In another thread I created a chord link (F#°7) using my description above only to find that it didn't result in a valid diagram. Wondering why, I emailed Perry Roland, the developer of the Online Guitar Chord Dictionary, to see if he knew why my link had failed. In a very polite reply, he pointed out that I had used the sharp sign (#) as clear text in the link and that special character causes the parameter list to be invalidated. Perry pointed out that I needed to “escape” the special characters so they wouldn't be seen as control characters by the host operating system.

Any use of the sharp sign (#) in active links to Perry's dictionary should be replaced with a percent sign and the hexadecimal (base 16) representation of the sharp sign (%23).

Perry actually suggested that all special characters be escaped so the #, -, :, and / characters should be replaced by %23, %2d, %3a, and %2f, respectively and I know this is good advice but, in my own experience, only the sharp sign actually requires the alternate coding in this particular application.

      - Mark

Post - Top - Home - Printer Friendly - Translate
  Share Thread:

Reply to Thread
Subject:  Help
Preview   Automatic Linebreaks   Make a link ("blue clicky")

Mudcat time: 21 April 8:28 AM EDT

[ Home ]

All original material is copyright © 2022 by the Mudcat Café Music Foundation. All photos, music, images, etc. are copyright © by their rightful owners. Every effort is taken to attribute appropriate copyright to images, content, music, etc. We are not a copyright resource.