Obvious In Hindsight

PHP: Using predefined variables in paths

obviousinhindsight — Wed, 13 Jan 2010 02:21:04 +0000

Predefined variables can be used to replace specific parts of the paths of files or images.

Predefined variable in a path for an include file

It’s important to understand that the path for an include file is relative to the web server and not the web root where the home page is stored.

The predefined variable:

$_SERVER['DOCUMENT_ROOT']

It produces something like this:

/home/yoursite/public_html

Using it in a path:

Predefined variable for images

This path is relative to the web root (unlike the path for the include file).

The predefined variable:

$_SERVER['HTTP_HOST']

It produces something this:

www.yoursite.com

Using it in a path:

/images/logo.png”>

Learn more about predefined variables here: http://php.net/manual/en/reserved.variables.php

Everything’s obvious in hindsight, eh?

Web Design: Absolute paths, document relative and root relative paths

obviousinhindsight — Wed, 13 Jan 2010 01:54:59 +0000

A path, in effect, is like a postal address. Paths generally lead to a file (e.g. image) or a folder (e.g. directory).

Web root vs. document root

A web root is the upper most layer of your website in which all files and subdirectories are stored. Generally this is where the home page is stored.

http://www.somesite.com

A document root is relative to the location of the document.

http://www.somesite.com/somefolder/somefile.html

Note: A document root and web root can be one and the same if the document is located in the web root. Both web roots and document roots can be defined either absolutely or relatively.

Absolute path vs. relative path

An absolute path is simply a complete path and always starts from the web root.

http://www.somesite.com/images/apple.jpg

A relative path is simply a short hand version of the absolute path. Usually you’re simply omitting the scheme (http), host (www), domain (www.somesite.com) and port (com). There are two ways of defining a relative path.

Document relative path

A document relative path is the more common type of relative paths. It’s important to note that there is no preceding forward slash.

images/apple.jpg

Such a path allows you to freely move up and down your sites hierarchy by adding “../” before the document relative path.

The path becomes relative to the root above the document realtive path for every “../” added. The following will jump up three roots for example:

Root relative paths

A root relative path is relative to the web root where your overall home page resides. Such a path is useful for files that are to be universally included across an group of or all of your web pages (e.g. a header). A document relative path will not work if the location of the documents (web pages) vary. For this reason, the universality of the root relative path will do the trick. It’s important to note that there is no preceding forward slash.

The preceding forward slash matters!

It’s critical to understand that a preceding forward makes the difference between a document relative path and a root relative path.

Everything’s obvious in hindsight, eh?

PHP: Include file

obviousinhindsight — Mon, 11 Jan 2010 21:35:15 +0000

The include function is useful for streamlining code across your site. Rather than the full code of you header section, for example, you can replace it the one line of code required for the include function. This is also advantageous for future modifications. This does not affect SEO (Search Engine Optimization) since search engines only detect the parsed code (output i.e. what you see in the source code).

Web Design: Meta tags

obviousinhindsight — Mon, 11 Jan 2010 18:16:17 +0000

Meta tags contain metadata about a HTML document. Metadata is defined in the between the elements and therefore will not by displayed on your page when it’s rendered in a browser. Metadata can be used to describe your page, keywords, author, the ‘last modified’ date and more.

Using meta tags

Your website name goes here

HTML vs. XHTML metadata

In HTML, the meta tags should not be closed i.e. no forward slash before the closing bracket of the element:

In XHTML, the meta tags should be closed i.e. add a forward slash before the closing bracket of the element:

Everything’s obvious in hindsight, eh?

CSS: Horizontal row of images in a div

obviousinhindsight — Mon, 11 Jan 2010 16:12:30 +0000

Often, images are arranged horizontally for the purposes of a navigation menu using images rather than standard text link. What in theory should be a relativly simple task can in practice become a nightmare if you overthink the process, are unaware of the idiosyncracities of the various popular browsers and the relevant workarounds. The simple fact of the matter is you can do this without any CSS whatsoever.

The correct way of arranging images inside a div

Let’s say we have six images that we want to arrange in our div. The following HTML code will do just that:

img src=”images/image4.png”>

It’s very important to note that there can not be a space or spaces between your image elements. If you do, most browsers will render an undesirable blank space between your images of about five to ten pixels in width. It took me a few hours of searching to find this solution. The following code, which has spaces between the image elements is an example of the incorrect way of going about this.

What will not work

Why not use a horizontal unordered list?

You don’t need to unless your images are actually part of a list. You can, if you really feel the need but why add extraneous code?

Why not use CSS?

Again, you can but you don’t need to for the specific purpose of arranging the images. The most common way of going about this in CSS would involve styling an unordered list horizontally, the use of floats and various checks for cross-browser rendering. Furthermore, IE6 present various bugs with floats for novices. If you can do the exact same thing without CSS and with code then why bother?

Conclusion

Make sure there are no spaces between your image elements. Sure, the HTML markup will look cluttered but it’s the only workaround I’m aware of.

Everything’s obvious in hindsight, eh?

Web Design: Basic mouse-over image swap

obviousinhindsight — Mon, 11 Jan 2010 03:08:50 +0000

A common image effect is to swap out an image for another when the end-user places their mouse over it. This techniques is usually used for links but can be used as creatively as you like.

Basic mouse-over image swap (JavaScript)

You should have two images: a default image and an image that’s to appear on the mouse-over event. ’somename’ is simply what we’ve named our image swap. This can be changed but must remain consistent for each the three counts e.g. ‘myimagswap1, myimagswap1 and myimagswap1′ but not ’myimagswap1, myimagswap2 and myimagswap3′

Everything’s obvious in hindsight, eh?

CSS: Horizontal ul (unordered list)

obviousinhindsight — Mon, 11 Jan 2010 02:36:45 +0000

An unordered list is a list that uses bullet points rather than incrementing numbers (1, 2, 3, 4 etc.). By default a browser will render the list vertically. The following styling will remove the bullets, the default bullet indent (margin), the list padding and will arrange the list horizontally rather than vertically. This technique is commonly used for navigation menus.

Styling an unordered list

Firstly create your list in HTML and define a class (learn about classes here):

Home

Link 2

Link 3

Link 4

Link 5

Next, let’s begin adding the relevant code to your style sheet (learn about about the various ways of adding style to you HTML documents here):

navigation-menu.ul{

list-style-type:none; /* This removes the bullets */

margin:0px; /* The removes the default bullet indent */

padding:0px; /* This removes the default list padding */

}

.navigation-menu li{

display:inline; /* This switches the list from vertical to horizontal */

}

Next, let’s finish by styling the links with some basic effects (you can learn more about this here).

.navigation-menu a:link {

color:#000000; /* This is the text color */

text-decoration:none; /* This removes the link underline */

padding:0em 2em 0em 0em; /* This adds 2 characters worth of space to the right of each link */

}

.navigation-menu a:visited {

color:#000000; /* This is the text color */

text-decoration:none; /* This removes the link underline */

padding:0em 2em 0em 0em; /* This adds 2 characters worth of space to the right of each link */

}

.navigation-menu a:hover {

color:#FF0000; /* This is the text color */

text-decoration:underline; /* This adds the link underline */

padding:0em 2em 0em 0em; /* This adds 2 characters worth of space to the right of each link */

}

.navigation-menu a:active {

color:#000000; /* This is the text color */

text-decoration:none; /* This removes the link underline */

padding:0em 2em 0em 0em; /* This adds 2 characters worth of space to the right of each link */

}

That’s basically it. You now have rudimentary horizontal list that functions as a navigation menu. You can use CSS to add background images for hover effects etc.

Everything’s obvious in hindsight, eh?

CSS: Links

obviousinhindsight — Sun, 10 Jan 2010 23:22:08 +0000

Links can styled by ID or class (an ID can only called on once whereas a class can be called on many times). The styling is generally used to present a sense of interactivity to the end-user. Links have four states:

link (unvisited)
visited
hover (mouse over)
active (selected)

The unvisited and visited links are self-explanatory. The hover link is how the link appears when the mouse cursor is placed over it.

Active links vs visited links

Active links are links that have just been clicked. It’s fairly redundant considering that the target us usually loaded as soon as the linked is clicked so you may not get to see it’s styling for the active state. Furthermore, when the visitor returns to your site the active link will become a visited link so again, you won’t get to see it’s styling.

Styling links using a class

a.somenav:link {color: red; text-decoration:none;} /* unvisited link */

a.somenav:visited {color: purple; text-decoration:none;} /* visited link */

a.somenav:hover {color: red; text-decoration:underline;} /* mouse over link */

a.somenav:active {color: blue; text-decoration:underline;} /* selected link */

Styling links using an ID

#somenav a:link {color: purple; text-decoration:none;} /* unvisited link */

#somenav a:visited {color: purple; text-decoration:none;} /* visited link */

#somenav a:hover {color: red; text-decoration:underline;} /* mouse over link */

#somenave a:active {color: blue; text-decoration:underline;} /* selected link */

Everything’s obvious in hindsight, eh?

CSS: ID vs. Class

obviousinhindsight — Sun, 10 Jan 2010 22:50:21 +0000

IDs and classes are used as part of a HTML element to trigger (call on) the styling in your CSS documents.

What’s the difference?

An ID can only be called on once and is used for a unique element of your web page such as a banner, navigation menu or footer. The following example demonstrates how a div is defined using an ID (#).

div#header { background-color: black; }

Similarily, sub-elements of the above div can be defined as follows (notice that the sub-element is placed after the id name – this paragraph element does not need to have an id defined in html as your style sheet will automatically trigger it):

#header p {color:#F00;}

A class, as the name implies, can be called on more than once and can therefore used more than once on elements such as paragraphs, headers or links. The following example demonstrates how a paragraph is defined using an class (.).

div.content-box{ width:300px; }

Similarily, sub-elements of the above div can be defined as follows (again, notice that the sub-element is placed after the class name – this paragraph element does not need to have a class defined in html as your style sheet will automatically trigger it):

.content-box p{color:#900;}

The benefit of styling sub-elements

Simply put, by not having to define class=”somename” or id=”somename” in your elements you are minimizing the amount of code in your overall HTML document. The less clutter the better.

Everything’s obvious in hindsight, eh?

CSS: Inline, Internal, External

obviousinhindsight — Sun, 10 Jan 2010 20:03:57 +0000

You can add CSS (Cascading Style Sheets) to web pages in three different ways. External CSS is considered best practice since you can effectivly change the styling of an entire website by editing one CSS document. The inline and internal options would require you to edit each document individually which might prove to be unnecessary repetition.

Inline CSS

Inline CSS allows you to style the document from within the element.

style=”background: black; color: white;”>

Some text here.

Internal CSS

Internal CSS is defined with in the elements and is triggered by an element or by the specific selector of element (div or class).

Some text here.

External CSS

External CSS is defined a separate external document (e.g. mycsspage.css) and like internal CSS, is triggered by an element or by the specific selector of element (div or class). The following example shows the code as it might appear in your CSS document:

body{ background-color: black;}

p { color: white; }

h3{ color: orange; }

The following example shows the corresponding HTML:

A White Header

Some text here.

It’s important that you link your HTML (or XHTML) document to your CSS document between the elements.

Using multiple style sheets

You’re not limited to using the one style sheet. You can freely use as many as need to. I like to use multiple style sheets to avoid having to sift through cluttered code. I usually have the one universal style sheet and other just for forms or specific subsections of my site (e.g. blog or forum).

“universal-styling.css” />

styling-for-my-forms.css” />

styling-for-my-guestbook.css” />

Everything’s obvious in hindsight, eh?