For those new to web development, the idea of creating your own web page can be daunting. But if you break down your require- ments to the bare minimum, it’s easy to see that to create a bare bones static webpage with minimum styling, all you need to know is HTML and CSS. As you start building up on your website and decide to incorporate a few frills, starting with forms and pop-ups and ending with complex web application-like behaviour, you’ll most likely use Javascript and its dependent frameworks. In addition, if your website would be handling large amounts of data and will need to store, update/modify and delete said data, you’ll need to incorporate custom functionality for your database. This is where server-side languages such as PHP and MySQL and frameworks such as ASP.NET come in.

HTML:

HTML, an abbreviation for Hypertext Markup Language, forms the back- bone of any webpage. If you open any website, right click on any point and hit “View Source”, you’re going to see a complex jumble of HTML code, which is responsible for defining the use and designation of each element on the page, and quite often, their positioning as well. This “designation” of sorts is done with the help of commands, or tags, that tell your browser how you want your document displayed. This is pretty much what marking up your document means. It’s also a basic reminder for beginners that HTML- formatted documents aren’t that far removed from documents created by a word processing program, which are also basically text. So instead of man- ually typesetting certain parts of text in paragraphs, and dictating to your processor which elements you’d like in bold and which in italics, you’re telling your browser to do the same using a markup language called HTML. Since the early days of web design, HTML has been the standard for pro- fessional websites. It stands for Hypertext Markup Language. HTML is the language, or code, used to edit and position the text, images, frames and other web page elements. If you go to your web browser and select View and then Source – the code used to design that website is available for anyone to see.

You can see there isn’t much to the code. HTML  syntax  is nested, i.e, your content must be enclosed in a tag that indicates what its function is. Headings are enclosed in <hx></hx> tags, where the x can range from 1 to 6, depending on the size of the text, with 1 being the largest. The head and body of the document are enclosed within corresponding brackets, as you can see. And this is just the beginning. A few more tags, and a designer can create an extremely simple webpage. The more complex the HTML, the more you can do with a site. As we’ll see in the next article, there are a ton of online engines that allow people with no prior knowledge of HTML to create their own website. They allow you to create a webpage without using code and the editor assumes what HTML you need and does the work for you.

 

CSS:

If HTML is in charge of layout and positioning, CSS is what gives elements their styling and look. Seeing as how a lot of computer languages aim to bring modularity and clear demarcation in functioning, the main aim of CSS was to separate the positioning from the presentation, including colours, fonts and layout. This separation improves content accessibility, provides more flexibility and control in the specification of presentation characteristics and most importantly, enables multiple HTML pages to share formatting by specifying the relevant CSS in a separate .css file. This allows developers to specify rules in one place, and makes modification in larger codebases even easier. The CSS specification describes a priority scheme to determine which style rules apply if more than one rule matches against a particular element. In this so-called cascade, priorities (or weights) are calculated and assigned to rules, so that the results are predictable.

In the example provided above, the earlier rule that was followed was the usage of inline CSS – all the presentational attributes of the HTML were specified within the HTML markup. More often than not, it lead to repeated description of font colours, backgrounds, borders, sizes and ele- ment alignments for similar elements. CSS allows authors to move much of that information to another file, the stylesheet, resulting in considerably simpler HTML. We can see that, though the end effect is similar, it’s much easier to apply a constant effect across multiple tags, rather than doing the same in inline CSS, which leads to a tremendous amount of repetition and extreme inconvenience with a larger codebase.

Javascript:

Though in the last several years, JavaScript is been increasingly used in server side scripting and software applications, going as far as iOS and Android apps, its primary use is that of a client-side scripting language designed for use in web browsers. Initially, its uses were mostly limited to interacting with forms, giving feedback to the user and detecting when they do certain things. alert() was used to notify the user of something, confirm() to ask if something is OK to do or not and either prompt() or a form field to get user input. But it was only after browsers started supporting the Document Object Model (DOM) that Javascript began to take shape into its present form.

The Mozilla Foundation documents define the DOM as “a programming interface for HTML and XML documents. It provides a representation of the document as a structured group of nodes and objects that have properties and method”. In a very abstract definition, this model was created to provide a convenient structure for programs to change document structure, style and content, with the program being a script in most cases.

Javascript is slightly tougher to master, compared to HTML and CSS. While using frameworks like JQuery allows you to hide behind a layer of abstraction and achieve certain effects in just a few lines of code, you’ll most likely end up with a very limited knowledge of Javascript. You’ll be able to perform simple rollovers and slideshows, but run into big problems once real DOM manipula- tion comes into play. But if your primary aim is not to get into webpage/webapp development, but to simply get your page up and running with minimal external effects, you can understands the basics of JQuery and get away with it. But it is best to understand what tool you’re using, so as to avoid getting entangled in a massive mess of callbacks and slow page load speed.

Javascript libraries and frameworks:

Though most people start off with understanding JQuery and similar libraries/frameworks and then try to master Javascript, it’s always recom- mended to get a tight grasp on JS concepts before moving on to these frame- works. To start off, you’ll have to get the basic difference between these two. Current Javascript libraries like JQuery, MooTools and YUI, are basically entire toolkits which abstract different layers, like browsers / DOM models / etc. On the other hand, frameworks such as Angular JS, BackboneJS, describe a given structure of “how” you should present your code, generally keeping in line with patterns such as MVC, MVP and MVVM.

 

PHP:

PHP is a general-purpose scripting language which is most commonly used in server-side web development, in which case PHP generally runs on a web server. Its role is to facilitate the transfer of data from an input, which is generally a file or stream or PHP instructions, to an output, which is mostly HTML, though it could be JSON, XML or binary data. Any PHP code in a requested file is executed by the PHP runtime, usually to create dynamic web page content or dynamic images used on websites or else- where. PHP is used in conjunction with a relational database management system (RDBMS). This has led to a LAMP architecture or its variants. PHP is commonly used as the ‘P’ in LAMP alongside Linux, Apache and MySQL.

Most web hosting providers sup- port PHP for use by their clients. You can get a basic idea of PHP’s popularity by noting that, as of February 2014, almost 82% of the world’s websites used PHP as their server side language. With companies such as Yahoo! On its side, PHP is a pretty strong winner. But due to security, scalability and open-source development concerns, people have started turning to alternatives like Django and Ruby on Rails.

 

Django (Python):

Django is a high-level Python Web framework, that according to its website, “encourages rapid development and clean, pragmatic design”. So if you think your website will need to handle large amounts of data, Django would be an ideal choice, considering it’s meant for complex, database-driven websites. Considering the point of a web framework is to avoid having to reinvent the wheel, Django takes care of that by providing user authen- tication, content administration, site-maps, RSS feeds, and other features right out of the box. And the framework has been created in such a way that updating or replacing provided code with your own custom codebase is pretty simple. If you’re still unsure of how scalable or popular Django is, it would be helpful to know Google uses a variation of Django (closer to Python than Django) for its search engine. Other websites like Pinterest, Instagram ,Mozilla and The Washington Times make use of it as well.

Ruby on Rails:

Ruby on Rails (RoR) is a framework for building websites. As such, Rails establishes conventions for easier collaboration and maintenance. Considering that one of key princi- ples of RoR development is conven- tion over configuration (which basi- cally means that the programmer does not have to spend a lot of time configuring files in order to get setup since Rails comes with a set of conventions which help speed up development), it’s a pretty great framework to get started with when you have lesser time to chalk out decisions methodically and need a prototype up and running in a short span of time. And while there have been concerns regarding the scalability and speed of RoR applications, there are plenty of high profile websites such as AirBnB, Channel 5 and Groupon which use RoR to power their websites, proving that Rails is a pretty good option for anyone looking for a beginning application.