It’s a bit difficult to describe this all in one article, but CSS is actually not that hard to get into. Basically, your HTML code has three types of “hooks”. You probably already know one of them, this is your common, everyday tag. You can also give a unique ID to any element, or a class, which can be applied to any amount of elements. CSS can grab on to these “hooks” (this is not a technical term), and style the element you are refering to.

Let’s take a side-step and look at how to implement CSS first. Right now let’s just use the following syntax inside the file, in the header section (there are many other ways, you can also call CSS from an external file) “<style type=”text/css”> </style>“. You can write your CSS code in between the start and end tag. CSS code is also very simple syntax wise. You have to specify a selector, and then some properties and values. The selector will be one of those “hooks” we looked at, it will let you specify what you want to change the style of. The property will let you specify what property of that element you want to change (text size, color, etc), and the value will specify what you want to change it to. The correct syntax is “selector {property:value; property:value}”

With that knowledge safely in our head, let’s take a more detailed look at our “hooks”, which will become our selectors. As I said, a tag can be a hook. Say you want the color of the font in all paragraphs to be orange. You can do this by applying the following CSS code: “p {color:#ff9900;}“. The selector is “p” the actual tag in html, the property is “color”, which controls text color, and the value is “#ff9900″ which is a color code. You could also write “orange”, but color codes give you more control (more on this in another article).

That’s not too hard is it? Ok, so now all our paragraph’s have orange text color, but what if we want one to be different? You could put them in a div instead of a paragraph, since we only specified that paragraphs should have orange text. This is a very bad approach, but it does display how CSS works. You should not do this for many reasons, first of all because you loose some semantics, that piece of text is a paragraph, so should be in a paragraph tag.  Second of all, with this approach you will very quickly run out of tags to use. So in this case we apply the other “hooks”, we can specify a unique id, or a class. Let’s apply an id, since we just want a change for this one paragraph.

In your HTML the id is applied as an attribute to the tag like so: “<p id=”example”>“. What the actual id is, is not important, but try not to start it with a number, and don’t have special characters in it a lot (underscore is fine). We can use the id in our CSS code by applying the following in addition to the rule we already have: “p#example {color:black;}“. The selector now points specifically to that one paragraph, where we have specified the id “example”.

If we would have applied a class we would have “<p class=”example”>” in our HTML and “p.example {color:black;}“. If you try it out, you can see that there is no difference. The difference is in the fact that id should only be applied to one element only, while class can be applied to as many as you like. You can apply it to a paragraph and a div for example. In this case you could write the following: “p.example {color:black;} div.example {color:black;}“. This would tell each paragraph and each div with the class of “example” to have a text color of black. There is a simpler way to do this though, you can just specify the class, like so: “.example {color:black;}“. This shows how you should “read” the code. Whenever you see just a class you should read it as “change the text color of all elements with this class to black”. If you see a tag or even another id or class in front you should read it as (in case of a paragraph) “change the text color of all paragraphs with this class to black”.

Those are the very basics of CSS, you might find a list of properties helpful, but there are many resources on the web to learn more about CSS, but I will be back with more info, and you can start reading Scriptastique for more info on CSS.

<img class=”alignleft size-full wp-image-10878″ src=”http://www.ghacks.net/wp-content/uploads/2009/03/scrip_twitter.gif” alt=”Script” width=”53″ height=”53″ /><strong>If you’d like to read some similar articles, take a look at <a title=”Web development blog” href=”http://scriptastique.com”>Scriptastique</a>, a blog all about web development and coding, with great tips on CSS, HTML, PHP, MySQL and Javasctipt and tutorials and screencasts coming soon! You can follow us on our <a title=”Scriptastique RSS feed” href=”http://feeds2.feedburner.com/scriptastique”>RSS feed</a>, or <a title=”Scriptastique on Twitter” href=”http://twitter.com/scriptastique”>Twitter</a> and <a title=”Scriptastique on Facebook” href=”http://www.facebook.com/home.php?#/profile.php?id=1470106953&amp;ref=profile”>Facebook</a>! </strong>

Related posts

• Web Development: PHP – what role does it fill (1)
• PHP – what it does and what it doesn’t (4)
• Create WordPress Themes (6)
• An easy way to learn web design (4)
• XML Escape Tool (0)

The basis of this is to use php code to determine the directory of the page you are viewing and also the page’s name itself. I will show you the code in a second, but let’s say you have a social network site underway and you keep you messaging system (outbox, inbox, new message, etc.) in a folder named “messaging”. In this case you can grab the name of the directory and the page and assign these as an id and a class to the body tag automatically, so it would look like this for the inbox: <body class=”messaging” id=”inbox”>.

This will make it very easy to add new rules in your stylesheet, since you can refer to whole documents in a directory using “body.messaging” and you can refer to specific pages using “body#inbox”. You can now use the same CSS file to change the look of only one page without the need to go in and add new classes and ids all the time. So how about the code to grab the directory and the page? Let’s take a look!

First of all, let’s determine the page. For this we will use the “$_SERVER” superglobal variable which stores a lot of valuable information about the page you are viewing, the IP viewing the page and so on. Here’s the code as is, with the explanation coming up afterward.

function page()
{
$page = substr(strrchr($_SERVER['PHP_SELF'],'/'),1,-4);
return $page;
}

As you can see this is a function because I use it a lot throughout the site, not just for this one purpose. “$_SERVER['PHP_SELF']“ will return the path to the file with the filename from your root directory, so it will look something either like this: “/directory/subdirectory/file.php” or if the file is in the root directory it will simply be “/file.php”. To get only the filename we want to chop off all the bits before the slash (and the slash itself), and also chop off the file extension.

As you can see the first thing I did was to chop off everything before the last slash using “strrchr()” which returns the part of the string after the last occurrence of the sub-string you specify. However, the last slash still remains, but this is not a problem, we can get rid of this, and the “.php” part in one go.

This is done by using “substr()”. The function took three arguments, the string we want to work with, and two integers. The first integer tells the function to start from character 1 (this means everything before that will be chopped off, in this case character 0, which is the slash) and then return everything up to the -4th character from the end. This means that four characters will be dropped from the end.

Now the variable “$page” contains only the readable part of the filename which would be “inbox” or “index”, without any slashes or the extension. You could also create this as a variable without using function. the reason I use a function is that I usually have some extra code in there which allows me to echo the function at once by default, but also to store it as a variable if needed.

Now, let’s take a look at determining the directory. We could take the same approach as before but chop off different bits, but PHP already has a function which will make our life easier, let’s take a look at the code:

function thedir()
{
$dir = substr(strrchr(getcwd(), '/'),1);
return $dir;
}

Using “getcwd()” we can get the current working directory. This will be in the form of “/directory/subdirectory”, so all we need to do is return everything after the last slash and chop the last slash off. We use the same technique as before, so now we also have our directory. Once done, all you need to do is modify your header, which should be in a PHP file to make the body tag look like this (calling the functions as the names for the class and id):

<body id="<?php echo page() ?> class="<?php echo $thedir ?>"">

There are some other ways to do this, some can be simpler or more complicated, this is more like the proving of a point, but it is totally usable and I use a modified version of it throughout my sites. This is not a whole lot of code extra and will make your site better structured and easier to modify.

Please be aware that “getcwd()” can give you some weird results if you changed your current working directory somewhere in your code. In this case you can use a modified version of the ‘page getting’ code, or you can take a look at the server superglobal section in the PHP manual for some more help.

If you’d like to read some similar articles, take a look at Scriptastique, a blog all about web development and coding, with great tips on CSS, HTML, PHP, MySQL and Javasctipt and tutorials and screencasts coming soon! You can follow us on our RSS feed, or Twitter and Facebook!

Related posts

• Web Development: PHP – what role does it fill (1)
• PHP – what it does and what it doesn’t (4)
• Web development roundup (1)
• Scriptastique web development roundup (4)
• How to show 5 top categories in Wordpress (9)

The most common server architecture on which PHP is found is called LAMP (for Linux + Apache + MySQL + PHP). All of the elements of LAMP are open source, meaning that the source code of the application is freely available. This means that the cost of setting up a server running LAMP is reduced (No License Fees), so LAMP based web hosting tends to be the least expensive solution available.

The Internet is built on a client-server architecture. On the client side we have the user and the browser. One the server side we have the server and its script interpreter (In our case, Apache and PHP).
Because PHP runs on the server side, we cannot use it for flashy client side effects, things like animations and auto-complete cannot be performed by php because php is only running on the server. For client side programming we could use javascript, Flash/Flex, Silverlight, or JavaFX.

What we can do with PHP is access a database, connect to other websites/services for information, and build a page out of smaller pieces, which we then deliver to the client for rendering.

I think it is important to indicate at this time that there are four levels at which you can work with PHP.

1. Scripting – this is where you take a small script and add it (integrate) into an existing page.
2. Coding – this is where you write scripts as needed to add basic functionality to your site.
3. Development – this is where you write an full application in PHP.
4. Architect – this is where you properly design an application that develop it into an application. Like development but puts a lot more thought into a good foundation.

Depending on your actual needs, several of these layers could be overkill for your task. The following articles will mainly be focused on the first two levels – scripting, and coding. In Scripting and coding we have two primary tasks we accomplish. One makes your job as webmaster easier. The second adds new functionality to your site.

Jeremiah Stover is a Software Engineer and a Business IT Consultant at Pragmatic Development. He has hands on experience and regularly provides practical advice in Business, Marketing, IT equipment and software. His Specialties include interpersonal communications, design skills, teaching and instruction. Right now he spends most of his time developing web applications in PHP and MySQL.

Related posts

• Web Development: PHP – what role does it fill (1)
• Ghacks Web Development PDF Article Compilation January 09 (6)
• Web Development: HTML Playground (7)
• Web development roundup (1)
• Scriptastique web development roundup (4)

HTML is a markup language that lets us describe attributes of the text and blocks on our pages. This works great for simple requests, making pages much more interesting than plain text. However it leaves us with a very simple structure. One page from One url (address) results in one rendered content (every time this url is requested, the output is the same).

To give us more options we have programming languages. Some like PHP run on the server side. They modify the content that will be displayed before it is sent to the client and on to the browser. Others like JavaScript run on the client side and allow changes to be made in the browser after the page has been rendered – usually for interactivity or for adding a feature not normally available in that browser.

The very first thing you _must_ do before getting started with PHP is get a good grasp of HTML (and CSS). Many webmasters use a tool like Dreamweaver, Expression Web or KompoZer. To
work with PHP it is important that you understand the underlying HTML code. You will be modifying this code so you need to be able to understand the HTML well enough to understand what you see.

If you like video training try Lynda.com or VTC.com. If you prefer reading a book try “Head First html with CSS & Xhtml” or if you prefer free web instruction try w3schools.com and tizag.com.

Now that you understand the markup language which is what is sent to the browser (HTML) you are ready to tackle the server side use of PHP.

Jeremiah Stover is a Software Developer at Pragmatic Development. He specializes in client communications. While PD does offer a full range of IT services and consulting, they are currently specializing in website development in PHP/MySQL.

Related posts

• PHP – what it does and what it doesn’t (4)
• Ghacks Web Development PDF Article Compilation January 09 (6)
• Web Development: HTML Playground (7)
• Web development roundup (1)
• Scriptastique web development roundup (4)

This is usually referred to as AJAX, although most of it is javascript and HTML, and it is actually easier than it seems. In my opinion calling the hiding and showing of elements is not yet AJAX, because in my eyes ture AJAX communicates with the server in the background. We will only be changing CSS properties and element contents with javascript in this post to achieve our goal.

Let’s say you’re creating a form, and you want a way to explain what the fields do or what data they need to contain, but you don’t want to fill up too much space on screen, and you want to make it as unobtrusive as possible. In this case it would be cool to have a link with the anchortext “Explain”, which would expand a section which explains what the user needs to do.

As the first step, we need to create a div which will hold the explanation text, and a link which will unhide it for the user.

<a id="link1" href="javascript:display('show', 1)">Explain</a>
<div id="explanation1" style="display:none">This form let's you input your order details, please keep it short!</div>


As you can see I have given the div a unique identifier. This is needed so the javascript knows which div I want to change. I have added a number to the id because there might be many more explanations, these would receive different numbers. I have also given the link an id, with the same number at the end as the div. Once the user clicked the link, we want to change the link, so clicking it again will close the div.

The link contains “javascript:”, which indicates that this link doesn’t point to a page, but should execute javascript code, in our case a function (display), with two arguments. The first tells the javascript function which will execute that we want to show the div (as opposed to hiding it), the second is a numerical identifier, which should be the same as the number in the div’s id. Take a look at the javascript code below with the explanation afterwards.


<script type="text/javascript">

function display(action, id)
{
if (action == 'show')
{
document.getElementById("explanation"+id).style.display = "block";
document.getElementById("link"+id).href= "javascript:display('hide', "+id+")";
document.getElementById("link"+id).innerHTML = "Close";
}

if (action == 'hide')
{
document.getElementById("explanation"+id).style.display = "none";
document.getElementById("link"+id).href= "javascript:display('show', "+id+")";
document.getElementById("link"+id).innerHTML = "Explain";
}
}

</script>


As you can see, the two arguments are named “action” and “id”. The action argument will tell the script what we want to do (close the div or show it), the id argument will tell it which element we want to do it with. When you first click on the link the action is “show”, so let’s take a look at what’s happening there.

First of all, the script checks what the action is. It sees that it is “show”, so it executes three lines. the first line sets the div’s dispaly to block, which means that it will appear, you will be able to read the text. this is achieved by “grabbing” the element using its unique id. By specifying “document.getElementById(’theidhere’)” you can grab any element. In our case, we always grab the element “explanationX”, where X is the number beside it, given by the id argument. This id argument makes it possible to use one function for all the divs you want to open or close, so we won’t need to code the same function for all the different ids out there. The bit of code following specifies that we want to change the style, more specifically the display property, and we want to change it to “block”.

The second line grabs the link element, and instead of changing the style, it changes the address it points to (href), which in our case will be a new piece of javascript code. We change it to the exact same code, but instead of “show” as the action, we now have hide.

Line 3 grabs the same link element, but now changes the element contents. An element’s contents is always whatever is between the start and end tag, in a link’s case this is the anchor text. We change it from “Explain” to “Close” so the user knows that the div will disappear if he clicks the link again.

The three lines in case the action is “hide” do the exact same things, but change the values back, so if the user wants to open the div again he can do so.

That wasn’t so hard was it? The uses for these javascript methods are truly endless, from checking registration forms before submitting, to dynamically adding text to your site, you can do almost anything here, your imagination is truly the limit, so have fun!

Related posts

• Web Development: PHP – what role does it fill (1)
• View Javascript Sources with JSView (1)
• Remove adverts on Wikipedia (3)
• Preezo: Create Powerpoint Presentations Online (12)
• PHP – what it does and what it doesn’t (4)

Whilst it is possible to ‘collapse’ the advertisement to a much smaller one, having to do so is about as big an annoyance as the original advertisement.

A popular Wikimedia-themed newsletter, Wikizine, pointed out that by modifying the theme, it is possible to remove it.

All registered users can edit two files which modify CSS and JavaScript on Wikipedia for them. By default, the monobook theme is used and to my knowledge, this will only under that theme.

To remove the advert, ensure you are logged in, then go to Special:mypage/monobook.css. Go to ‘edit this page’ and paste the following:

/* Remove fundraiser banner and sitenotice */
#siteNotice, #fundraiser, .fundraiser-box { display:none; !important; }

Save the page and then do a hard refresh (Ctrl+F5). The advert should be gone!

Wikimedia obviously requires money in order to operate and they massively value donations, but I find begging for money in such an obtrustive fashion very annoying and it really makes Wikipedia less easy to use.

Related posts

• WikiTaxi Takes Wikipedia Offline (7)
• Wikipedia on your iPod (1)
• Wikipedia gets books and gets printed (2)
• WikiLook Displays Dictionary Word Definitions Without Leaving The Website (3)
• Wikia Search Alpha launches (0)

WordPress is fantastic for the extend to which is can be customised, however if mucking around with CSS isn’t something you really want to get into personally then here are a few tools to help you out:

Artisteer

Artisteer is a new application fresh out of beta which helps you design either normal websites or a WordPress theme. It’s also one of the few programs I’ve seen which uses the Office Ribbon UI, it works pretty effectively for this application and looks great as well.

The problem is that this isn’t freeware and costs $99.95 for a developer license. Considering the lack of advanced features in the software, however nice it looks, I can’t see many people jumping at the chance to purchase this.

Perhaps if it included an actual code editor as well or had a great deal more options for customisation then it would be a more attractive offer but till then I think not. If you use the free version all images are watermarked when you export your theme, however this could still be useful as you can simply replace the images in the files.

I can only assume the activation of Artisteer provides a lot more functionality such as more templates, support for more platforms and more options.

WordPress Theme Generator

Feels kind of dated compared to Artisteer but will do the basics of theme design for you, handy if you want something to work off but not much more than that.

Starkers WordPress Theme

I particularly like this. If you’ve ever started a new theme based off the default WordPress themes then you’ll have realised how much stuff is in there which you really don’t need. Naked WordPress theme is a completely stripped down theme for you to work off, really helpful =)

There’s an update saying it isn’t working too well with WP 2.6, but that the author is updating it soon =)

Related posts

• Web Development: PHP – what role does it fill (1)
• Web Development: How does PHP work? (21)
• PHP – what it does and what it doesn’t (4)
• How to style your page using CSS (0)
• An easy way to learn web design (4)

The Firefox add-on JSView adds that possibility to the Firefox browser. Installing the Firefox extension adds a new entry to the right-click menu which displays the amount of Javascript and CSS files that are referenced by the website.

Each file can be opened by selecting it. The source code of the selected file will be opened in the default source viewer of the browser.

The extension provides the option to view the source code of all Javascript or CSS files at once. The tool is especially useful for web designers.

Related posts

• Block NoScript From Opening Homepage After Update (8)
• Youtube Video Download (11)
• Youtube It Firefox Add-on (4)
• Youtube Comment Cloud Firefox Add-On (4)
• You better stop using Internet Explorer for now (18)

In fact, I’m teaching my girlfriend css design and we went through the same process, taking an existing page and recreating it. First of all, you see the design right in front of you and you don’t need to keep in mind where you want to get to. Second of all, you can use some awesome tools to help you on the way if you’re a beginner.

My favorite tool is of course Web developer toolbar, which is a Firefox extension that can aid you in web design. A great trick to know is to press ctr+shift+y to view style sheet info on a page. This will draw a rectangle around elements you hover over, and when you click, it will display the styling behind those elements.

This is awesome if you’re starting out because it’s a cheat sheet you can use to check how the designers did this or that, but you can also use it to take a look at what colors where used, how a float is accomplished and so on. There are also some other tools in there like changing the stylsheet on the fly, resizing the viewport and so on.

In short, copying a website is much easier than creating your own design. If you take the burden of trying to create something cool and new on your own off your back, you will be free to actually learn the methods behind coding a good site. My girlfriend also finds it very helpful, and she’s a complete css newbie, so I guess many people could find this method appealing, mosty because it puts you in the action right away, no need to go through all the boring theory.

Related posts

• Web Development: PHP – what role does it fill (1)
• Scriptastique web development roundup (4)
• PHP – what it does and what it doesn’t (4)
• How to style your page using CSS (0)
• How echo works in PHP (2)

Every click on an element displays the CSS properties for that element right on the screen. The element itself displays its width, height and position on the screen while the Xray box displays additional information such as margin, padding, position and border values.

This is in no way as powerful as the Firebug extension for Firefox but it can give a good quick overview over certain important CSS properties. I’m mentioning it here mainly because I think that it is astonishing that a simply bookmarklet could display such a wealth of information.

Related posts

• Yahoo Server Monitor Widget (0)
• XML Escape Tool (0)
• Wordpress Broken Link Checker (5)
• Widgetize you website with Yourminis (3)
• Website Optimization: Page Speed For Firebug (5)

The only aspect that is a little bit confusing is the menu structure. Since this is basically a free version of DVDFab Gold and Platinum not all options are accessible in the main menu. It is only possible to rip the DVD or HD movie to your hard disk removing all copy protection in the process or to uncheck certain elements, such as extra languages or trailers, on the disk before you do that.

The options should be your first stop before you start using DVDFab HD Decrypter. Make sure you change the temp and output directories if your c: drive does not have enough space to hold a full DVD or HD movie.

The Region Code is removed as well by default making the disk universally playable on all players. It seems however that this setting has to be changed in the options whenever a disk with a different region code is inserted. It was automatically set to region 2 and it did not change when I placed a region 1 disk in the drive.

Still no problem unless you have a lot of disks from different regions. DVDFab HD Decrypter is a great tool if you want to copy DVD or HD movies with or without copy protection. Please note that using this tool might be illegal in some countries.

Related posts

• AACS’s response to the publicity that they generated (3)
• The HD-DVD vs. Blue-Ray war confuses consumers (6)
• So, who is winning the HD war ? (8)
• One Chip to track them down (6)
• HD-DVD vs. Blu-Ray Next Round (5)

You see a puppet with clothes, by moving the bar to scroll the page you unclothe the puppet. Head over to biocandy.dk for this.

Related posts

• Another World 2006 (2)
• Zombie City Tactics (0)
• Ultrastar – Singstar like game for your PC (10)
• The Silent Japanese Game Show (1)
• Sudoku Portable (0)