Select Page

Background

The interwebs. How did we ever live in a world without email, blogs, YouTube, Skype, Amazon, Facebook and Netflix? It is astonishing to think that all of these types of services have come into existence in less than a handful of decades. So, how old exactly is the internet? Well, there is not a simple answer, though one could say that it started with electronic computers in the 1950s as several computer science lab in the US, UK and France began with initial concepts of packet networking. In the late 1980s, commercial Internet service providers (ISPs) emerged and spread very quickly. Since the mid-1990s, the Internet has been nothing short of revolutionary, and and the rest is (very recent) history.

The Internet is a global system of interconnected computer networks that use the standard Internet protocol suite to link several billion devices worldwide. This miracle of the modern age is made up of a series of programming languages that work in concert to create the world wide web. We will look at several of the main languages (HTML, CSS, JavaScript, PHP and SQL), though there are certainly more that are commonly used.  These languages, or code, are what make web pages look a certain way, and give them certain functionality. Your then browser translates this code (referred to as rendering) into something we can see and interact with on our screens.

HTML – HyperText Markup Language

HTML

While technically not a programming language, HTML provides the basic structure of sites, which is enhanced and modified by other languages (primarily CSS and JavaScript). HTML is at the core of every web page and is an essential skill for any aspiring web development professional.

HTML stands for HyperText Markup Language. A markup language is a set of markup tags that are used to identify content. Each HTML tag describes different document content.

Example of HTML Code
<!DOCTYPE html>
 <html>
 <body>
 <h1>This is a Heading</h1>
 <p>This is a paragraph.</p>
 </body>
 </html>

CSS – Cascading Style Sheets

CSS

First unleashed in 1998, CSS was the answer to a lot of the design problems of the early web. Historically, basic styling was achieved with HTML, but making and any changes were very labor intensive, and as websites became increasingly complex, a new method of applying styles was born. Enter CSS (Cascading Style Sheets). By separating the way a site looked from the site’s content, designers finally had a way to make websites look how they wanted. CSS defines and displays HTML elements. It is used to control presentation, formatting, and layout, including colors, fonts and background images.

HTML is basic structure (bones) while CSS is what gives your entire website its style (skin).  Because CSS is what gives each website a look and feel, it is extremely powerful. This is illustrated very effectively at http://www.csszengarden.com/, where all HTML content remains the same, but different CSS styles are applied for dramatically different results.

CSS can be applied inline (within HTML documents) though it is much more common to have an external stylesheet.  This file is called in by HTML documents  A sepearately editable stylesheet is a huge time saver when making site-wide cosmetic changes. CSS is also what allows websites to adapt to different screen sizes and device types, which has become increasingly vital in the last few years.

Example of CSS Code
body {
    background-color: #004477;
}
h1 {
    color: #00263E;
    margin-left: 20px;
}

JavaScript

JavaScript

JavaScript is a newer programming language, released in beta in 1995, and is much more complicated than HTML or CSS. Since then, it has become the world’s most popular programming language, and is used on not only on the web, but also individual computers, servers, laptops, tablets and smart phones. JavaScript is supported by all modern web browsers.

JavaScript is basically used to control the behavior of different elements, allowing web developers to design more interactive sites. It essentially augments a browser’s default controls and behaviors. JavaScript can be used to make animations, create games, APIs, and scrolling abilities among other things. Its use is quite varied, and some great examples can be seen at Creative Bloq.

Example of JavaScript Code (Animates a document background color)
<script language= "javascript">
setTimeout("document.bgColor='white'", 1000) 
setTimeout("document.bgColor='lightpink'", 1500) 
setTimeout("document.bgColor = 'pink'", 2000) 
setTimeout("document.bgColor = 'deeppink'", 2500) 
setTimeout("document.bgColor = 'red'", 3000) 
setTimeout("document.bgColor = 'tomato'", 3500) 
setTimeout("document.bgColor = 'darkred'", 4000)
</script>

PHP

PHP

PHP is a recursive acronym which stands for Hypertext Preprocessor) and is a widely-used open source general-purpose scripting language that is especially suited for web development as it can be embedded into HTML.

PHP is different from client-side JavaScript in that the code is executed on the server, generating HTML which is then sent to the client. The results of said script would be received, but the underlying code would not be known. This is helpful for security reasons, or if you just want to be sneaky. While it looks very daunting, PHP is actually fairly simple for newcomers, but offers many advanced features. Like any language, practice is crucial.

Example of PHP Code (Generates a PDF document)
<?
$fontsize = 72;     // 1 inch high letters
$page_height = 612// 8.5 inch high page
$page_width = 792;  // 11 inch wide page

if (strlen(trim($_GET['message']))) {
    $message = trim($_GET['message']);
else {
    $message = 'Generate a PDF!';
}

$pdf = pdf_new();
pdf_open_file($pdf, '');

pdf_begin_page($pdf, $page_width, $page_height);

$font = pdf_findfont($pdf, "Helvetica""winansi"0);
pdf_setfont($pdf, $font, $fontsize);

pdf_show_boxed($pdf, $message, 0($page_height-$fontsize)/2,$page_width, $fontsize, 'center');

pdf_end_page($pdf);
pdf_close($pdf);

$pdf_doc = pdf_get_buffer($pdf);
pdf_delete($pdf);

header('Content-Type: application/pdf');
header('Content-Length: ' . strlen($pdf_doc));
print $pdf_doc;
?>

SQL

SQL

SQL (Structured Query Language) or sometimes called mySQL was also born out of a need to have more complex functions online. SQL is a special-purpose language for managing data in relational database management systems. It is most commonly used for its “Query” function. In other words, it allows an individual to access and manipulate databases. This includes but is not limited to:

  • Executing queries against a database
  • Retrieving data from a database
  • Inserting records in a database
  • Updating records in a database
  • Deleting records from a database
Example of SQL Code (Creating a Database)
/*
mysql> CREATE DATABASE MyDatabase;
Query OK, 1 row affected (0.06 sec)

mysql> Show Databases;
+------------+
| Database   |
+------------+
| info       |
| java2s     |
| mydatabase |
| mysql      |
| t          |
| test       |
| ttt        |
+------------+
7 rows in set (0.00 sec)

*/  
CREATE DATABASE MyDatabase;

Show Databases;

Conclusion

While it is not mandatory, or realistic for that matter, for designers to work online to be fully fluent in all these languages, it certainly is very helpful to at least be conversant in some of them. There will always be room for programming specialists as a very few rare individuals might have the capacity to be fully fluent in more than a few programming languages. As the web continues to grow and evolve, no doubt that there may be some consolidation and splintering of these languages, with new ones to emerge and some to disappear. Most designers, web and graphic alike, would rather do what they are described as doing—Design.

Pin It on Pinterest

Share This