As a programmer JavaScript, CSS, PHP, HTML, XHTML, XML, MySQL, RoR and others are common knowledge and I know when and when not to use them for different applications. People who are not programmers ask what is “X” programming language? What does it do? What is it for?

Well, at first I have to tell you my explanations were long and drawn out and who knows if anyone ever understood them. As time passed on my explanations go more and more concise until I came up with this analogy:

Building a web page is like building a house

Here is how it’s like a house.

(X)HTML & XML
If you were going to build a house what would be the first thing you would do after getting the blueprint (in the case of web development, wireframes) for it? You’d get out your hammer (or nail gun if you prefer), and some nails and start building the structure of the house.

XHTML, HTML, and XML are all the same in essence. Without them you’d have a site with one giant block of text. No columns, no soft or hard returns, no nothing, but a big block of text. HTML is like the studs and walls of your house. It hold it together and makes rooms. Could you imagine having a house with one giant room?

Using HTML you can structure your site with headers, footers, navigations, etc. Although these things would not be styled, they would still have the structure. Now if you wanted to style them and make them all pretty, you’d use the next thing we are going to talk about, CSS.

I won’t go into what the difference between XHTML, HTML, and XML is, but short and quick, it’s just different ways to structure data for different applications.

Demo (No, HTML, XHTML, or XML) || Demo (HTML)

CSS
After you are finishing putting the walls up, what would you do next? I can bet the next thing you would do is go out and get stuff to decorate it. You would get paint, pictures, and other various things to spruce up your new house.

CSS, or Cascading Style Sheet, does just that with your newly created web page. CSS allows you to use background images, background colors, change your font size, color, or weight. It allows you to create horizontal and vertical navigations. Everything you see on a site that has to do with the style of the site is, or should be, CSS.

Demo (with CSS)

JavaScript
Great, you have a nice looking house and with some essentials like a bed, bathroom, etc it would be livable, right? Probably not a great house, but livable. This is where JavaScript comes in. JavaScript is like the appliances of your house.

Yes, you could wash all of your clothes by hand, or you could get a washing machine. Yes, you could have a huge navigation in a list with the sub pages in a list, and those sub pages in a list, or you could have some JavaScript to make them collapsible allowing you to only view the pages and sub pages you want to view by clicking on something.

In this demo JavaScript will get some content when you click on a nav button and replace the current content with a nice fading effect without ever reloading the page. Also take a look at the search bar text.

Demo (with JavaScript+jQuery)

jQuery
jQuery in short, is basically a bunch of JavaScript functions that speed up the process of writing JavaScript. So instead of writing 20 lines of code to make an element fade out, you only write fadeOut(); I do not have time to go into jQuery further, but there is more info on jQuery on their web site http://jquery.com

Conclusion
After all of this I hope I helped you understand or helped you explain better what these basic programming/coding languages do in relation to each other. I know I have had a tough time explaining to people what exactly HTML is because you can’t just say “HTML is what you make a web site with”, because it isn’t. You use that plus so many programming languages.

Look forward to more on PHP and MySQL next!

Here is the source to all the web pages if you are curious about any of it:
Source

         

Posted in (X)HTML, CSS, Programming