Subscribe to Ntwiles' Blog        RSS Feed
-----

Why So Many Web Languages?

Icon Leave Comment
To a person with little experience in web design/development, it can be hard to take that first step in the learning process. There are a great many aspects to web development, and a number of different languages that are used to achieve different things, so it's very easy to feel bombarded with information. This tutorial is meant to be an explanation of the various web languages and what they are used for, as well as an introduction to many common terms used in web development. There will be almost no actual code involved.

We'll start with the most basic.


The Basics

HTML – Just Data

At the core of every web page is HTML (HyperText Markup Language). HTML code is usually contained in .html files. It consists only of data, and named tags which explain what the data represents, and its relationship with other pieces of data. That may sound complicated, but it's not. Consider the following list of items:

Apple
Orange
Banana


We as humans know this to be a list of fruits. Even if it was surrounded by other words or phrases, we would be able to pick it out for what it is. A computer doesn't have that ability, so we have to teach it what kind of data it's looking at. In HTML, we do that with the <ol> (ordered list) and <li> (list item) tags:

This is a list of items:
<ol>
	<li>Apple</li>
	<li>Orange</li>
	<li>Banana</li>
</ol>


Everything inside the <ol> tag is now known to be part of a list. Everything inside an <li> tag is now known to be an item in that list.

This is known as Semantic Markup. Semantics is the study of meaning. By using these tags, we've given meaning to the data. What is important to understand is that these tags don't do anything. They also don't look like anything. It is only data, and tags explaining the data.

Side Note:
Spoiler


From here, things get more interesting.

CSS – Visual Style

CSS (Cascading Style Sheets) is a style sheet language which is used to apply a visual style to HTML files. This is what turns your pure data into a beautiful web page. CSS code is usually contained in .css files.

CSS allows you to change backgrounds, borders, fonts, and lots of other things. It's arguably the most straightforward of all the web languages, and I have little to say about it. Just know that – like HTML – CSS doesn't do anything.

Let's talk about some languages that do.


Languages That Do Things

There are a few scripting languages that are important to web development. Before we get into them, we need to cover an important distinction: server-side vs client-side scripting.

The Web Server

A web server does just as its name implies; it serves web pages up to the client. A web server is nothing but a series of applications constantly running on the computer which the website's files are stored on. The client (user) sends a request to the web server for a file and - if everything goes according to plan – the server responds with the requested web page. The page requested could be a simple .html file, but more often than not, it's a page that's generated on the fly.

Take, for example, your Facebook page. Mark Zuckerberg doesn't write up a new .html file every time you update your status. Instead, your statuses are stored in a database, and when you make a request to the web server to view your timeline, it generates that HTML code on the fly for you.

Server-Side Scripting

This is done via a server-side scripting language. That is, a language whose script is ran on the web-server, instead of on the user/client's computer. The server-side language tells the server what data to grab and how to format it into an HTML page, and the server sends you the generated .html file. What's important to understand is that the end user never sees this server-side code.

Client-Side Scripting

After the client has downloaded the .html file, it may be helpful to make some changes to it depending on what they do with it. For example maybe the developer only wants to display a certain section of the page if the user clicks a 'Show' button. This is where client-side scripting comes in. There are two important things to remember about client side scripting languages:

1. Every bit of code is completely visible to the end user if he/she chooses to view your page's source code.
2. The changes made are in no way permanent. They don't edit any files or change any settings. They just change temporarily how one user's page is displayed.


Common Scripting Languages

Now that we understand the difference between server-side and client-side scripting, we can talk about the languages which are most commonly used to achieve this.

Server-Side Scripting Languages

There are a number of languages used in server-side scripting, but the names you hear most often are PHP, ASP.NET, Perl, Ruby, and Python. PHP is by far the most commonly used server-side scripting language.

Javascript

For client-side scripting, Javascript is your only option. It's totally separate from and not to be confused with the Java programming language. When talking about Javascript, you'll almost always see two other terms: jQuery and AJAX.

Jquery is NOT another language. It's a library (just a series of functions and classes) for Javascript. It makes some common tasks easier to code quickly, and attempts to overcome a few of Javascript's perceived shortcomings by altering the way it interacts with HTML documents. It's not the only library available for Javascript by a longshot, it's just an extremely common one.

AJAX (Asynchronous Javascript and XML ) is also not another language, or a library. It's a technique used to make requests to the server, without loading a new page. You've seen AJAX in use before. Have you ever started to type a username into a registration box for a website, and seen a piece of text pop up that said either “Username available!” or “Username is already in use”? That's AJAX. In the background, a server-side script is being ran, and the result is displayed on the page instantly.


Lastly, Databases

The final aspect of web development that we need to talk about is the database. Databases allow you to store incredibly large amounts of information, while still being able to search quickly to find what you're looking for at any given time. All the threads, posts, and users on DIC, for example, are stored in a database.

Database Management Systems (DBMS) provide tools to allow developers to interface with these databases and retrieve the information they need. These systems use their own languages to allow developers to construct 'queries' to the database, to request information from it. The most common database management systems are MySQL and Microsoft's SQL Server, both of which use SQL (Structured Query Language).

In web development, more often than not, SQL queries are generated on the fly using a server-side scripting language.


Putting It All Together

This is a lot of information to take in, and it can be hard to visualize how all these languages work together to serve up a web page. Let's recap with an example. Think for a minute about the “My Topics” button under “My Account” on the DIC forums, and what processes make it work.

When you click My Account, a Javascript script runs on your computer, which displays a box with number of options in it. If you view the page source, you can see that the function controlling this feature is loginToggle();

If, after that, you click My Topics, you execute a .php file on the server and request a new page. The most important thing this PHP code needs to do is retrieve a list of all your threads. To do that, it generates an SQL query which searches the database for all posts with you as the owner. Since PHP can generate this SQL query on the fly, each user gets a different list of threads. If the script is successful, you're served an .html file containing the information you asked for, along with a .css file to tell your browser how to display the page with all the pretty orange and gray boxes.


Summary

And that's it. These are the common web languages, and what they're used for. As a web developer, you'll eventually need to have at least a working knowledge of every one of the languages I've covered. If you're not familiar with any of them, I suggest starting from the top and working your way down. I promise it will come with time. Thanks for reading, and good luck!

0 Comments On This Entry

 

Trackbacks for this entry [ Trackback URL ]

There are no Trackbacks for this entry

November 2014

S M T W T F S
      1
2345678
9101112131415
161718192021 22
23242526272829
30      

Tags

    Recent Entries

    Search My Blog

    0 user(s) viewing

    0 Guests
    0 member(s)
    0 anonymous member(s)

    Categories