Taking advantage of web languages basics

I’ve been asked a lot of times “Based on what skills is a web developer defined?”. That’s pretty hard to answer, a web developer is usually seen as someone who can deal with a project’s both front-end and back-end work, that obviously insinuating the developer’s skills in both design and programming, but when questioning what languages should one know specifically, there’s no official answer. As an example though, when companies are looking to hire a web developer, they’re usually expecting skills in: (x)HTML / CSS / JavaScript / jQuery / PHP / MySQL, either just a few from those or more.

But tell you what, everyone has to start somewhere, right?
When you dig more in the web design world using just HTML and CSS, you start feeling the need for more control, or, for the lack of a better term, the need for more power! And the good news is that you don’t really need to learn other programming languages at an advanced level to take advantage of some of their great features.

So let’s take a look at some of them:

The include function (PHP)

There are numerous times when you repeat a part of your code endlessly throughout the pages of a website (i.e. footer region, menus etc), but what if you wake up later that those regions need some modifications? You’ll end up modifying most of your pages.
To solve this, separate parts of your code that are the same across your pages into individual files and include them as you please in your pages using include, thus, having just one file to modify making changes on multiple pages.
To use include, your files need to end in the .php extension instead of .html so the server would be ready to expect PHP code, and then just type:

Here’s a little demo to download, where I’ve used ‘include’ to include the footer region on three individual pages:

Page redirect (PHP)

To make a fast redirection from a page to another, we can use PHP’s header function:

Previewing the above example, you’ll notice how the link from home.php goes towards page1.php, though it will redirect the user to page2.php

Things to know:

  • your document must start with the redirect code, no code or text should be before it;
  • your files containing PHP’s redirect code must have the .php file extension.
The load function (jQuery)

Here’s an alternative to PHP’s include function, using jQuery!
The syntax is: $(“target”).load(“source_file.html”);

Since we’re using jQuery code, we’re going to wrap our code into <script> tags and in a .ready function to have our code run when the page has loaded completely:

(“target”) stands for the element, class or ID we want the content to be inserted.
(“source_file.html”) stands for the file we want to get content from.

Now, The difference with jQuery from PHP’s include function, is that it’s inserting what’s inside the <body> element.

Let’s take the example below:

If we were to insert that page using jQuery, all it would insert would be the <p> element, namely, what’s inside the body element.
What makes jQuery a better option to use when inserting blocks of code into your pages, is that you can be specific and add whatever part or element you want from a web page, and it’s quite easy to do so.
I’ve covered more details about it in my ‘jQuery tips & tricks’ title.

To finish this up, I’ve loaded the content from footer.html into the .footer class, which in our case, it’s a div.



The download contains all files, including the css and the jQuery library.

The hide & show functions (jQuery)

With jQuery, it’s very easy to manipulate and animate your HTML elements, in this case, I’ll show you how easy it is to hide and show any element at will.
Let’s say you have a form and you’d like to display the submit button only if they accept your terms and conditions.

Consider the following example:

The logic of this little operation is pretty simple, we tell jQuery to detect when one of the radio buttons are clicked and hide or show the submit button.
By default, I’ve made the “I disagree” radio button to be checked, so for starters let’s make the submit button be initially hidden.
We insert all jQuery code within a <script> element <script type=”text/javascript”>CODE HERE</script> and add it in the HEAD section, just as how we add regular javascript, of course, it can be added inside the body element as well.

Don’t panic! It may seem mind bugling at first with all those non-sense mathematical chars haha but it’s really simple and I’ll explain why:

$(document).ready(function() {

/* jQuery_Code_Here */


Almost all jQuery code is written inside that function and you’ll see it a lot, because all it does is to run your code when the DOM has loaded completely, in other words, it says “hey, when all the page elements have loaded 100%, run my code”.
So what we really have so far, is just the hide(); function line, and it’s that simple to hide an element: $(‘class_name_here’).hide();

Now all that’s left is to show it when the user clicks “I agree” and hide it back when the user might change his mind and reselect “I disagree”.

We have added two more functions, one where we told jQuery to show the submit button when a user clicks on the “I agree” button, namely, the one which has the .agree class. And another function where we basically reversed the actions and told jQuery to hide the submit button when user clicks on the “I disagree” radio button, again, the one with the .disagree class.

You see, jQuery finds and selects HTML elements similar to how CSS does and that should give you a very good start! 😛

And.. here’s the final code with comments:

Normally, there’s a more logical and optimized way to do the above in jQuery, but I preferred not to get too technical since some of the readers might not have tasted jQuery yet.

Things to know:

  • You need to load the jQuery library onto your pages in order to run jQuery code, if you do not know how, I’ve explained how here: Approaching jQuery.
  • The available code downloads already have the jQuery library included, but I still recommend you to check with http://jquery.com and make sure you use the latest stable version.

I can’t mention in this article all the possible tips & tricks you can use and I’ll probably continue it with a few more parts soon.

Bottom line, you can increase your web development greatly by just learning a few tricks from some of the remarkable web programming languages out there!

So tell me, what are the various tricks you feel the need to apply within your projects?


My name is Cătălin Berța and I'm a front-end web developer. I was born in Focsani, Romania and currently living in Bucharest. Started playing with some good old html tables ever since 2004 as a hobby, turned out to be a full-time career! :) I've had the chances to experience and witness web development's rapid growth over the years where I've mainly focused on front-end web technologies.

3 thoughts on “Taking advantage of web languages basics

  1. indeed its best one knows the terminology and a basic understanding of the overall technology used in web development, commonly used in team-projects, tasks would be better communicated to on-going assignments

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">