Years ago, I was asked to help construct & build a music website which had the potential to be pretty big. The site was called ukgarageworldwide.com and it already had an installed user-base. It started as a mere forum, but as the users grew, the need for real content became apparent.
I was called in after winning a design content to create a new header image for the forum. Looking back, it was horrible, but it gave me experience.
Anyhow, I got to work on the design, with help from one of the co-owners, Jess Jackson. After the initial site design was done, it was then down to me to create the pages, include the content and work out the structure. This proved quite difficult as articles would go into the articles folder, contact details would go in a separate folder too yada yada. Now this seems pretty simple, but at that point in my life, I had no clue about CSS, yet Jess had created a CSS file for the pages. In hindsight, I didn't really know much about web-design and all my work was done in the WYSIWYG view of Dreamweaver. I never really learnt from that.
Now back to my story. When I had done an article, i placed in the article folder. And then when i viewed it, all the styles had gone. This was because the style tag in the meta part of the header was calling the CSS file which was in a different location. This taught me about the "../" that you need to put into a link if you'd like to reference a separate folder on a higher level of the tree.
This still confused the hell outta me, and in the end, i would have images that looked like Morse code.
src="../../../../../../images/header.gif"So knowing about the BASE tag back then would of been really really handy.
The BASE tag goes into the meta of your header (Between the <head></head> tags, and generally looks like this:
<Base href="http://www.yoursite.com/">Once that's in between your <head></head> tags, then any link or image you reference on that page can include your BASE tag. As an example, here's the current tree of a site I'm re-developing at the moment.
Home > Events > UK > Event 1Now I'd like this split into separate folders for clarity, so the folder structure would look like: yoursite.com/events/UK/event-1. My images would be under yoursite.com/i. If I was currently on the 'event-1' page and i wanted to add the header image, I'd have to reference it like "../../../i/header.JPG". But after including the BASE tag into the <head> and referencing the home page URL (in this case, <Base href="http://www.yoursite.com/">), then i could just call images as if I was in the root. I'd call "src=i/header.jpg" and this would read from the BASE URL, and put it together.
"yoursite.com/i/header.jpg"
If i had known about the BASE tag when I was developing ukgarageworldwide.com, then it would of stopped plenty of headaches & late nights trying to figure out what folder i was trying to call from!
The BASE tag is your friend!!!
(note: Don't know what 'all your base are belong to us' means? click here)
