parlez vous code?

the language of coding

Today, September 26th 2014, is European Day of Languages, so we thought it was a good opportunity to talk about a different type of language. Here at Team Uprise we have a few multi-lingual members of staff, but the languages that I work with every day on my website design and website development projects are a bit different. Let’s talk coding!

You can probably break down the general levels of people’s understanding when it comes to code into three groups; those with none at all, those with a vague awareness of its existence, and those who are exceptionally passionate about it. I’m in a slightly less nerdy sub-section of the last group. However, the majority of people are probably in the first group! My intention is not to bamboozle you with technicalities, here at Uprise we like to keep things simple, so I wanted to give a brief introduction to a couple of languages that we use to develop the websites that we create, and possibly give you a few simple skills that you could use to practice a bit of code for yourself. We call these ‘Markup Languages’, they allow you to adapt the structure of a document that won’t change the actual content. It came from the way that paper manuscripts would have been ‘marked up’ with revisions by editors. In a digital sense these revisions are replaced by tags.


 
HTML

HTML or ‘HyperText Markup Language’ is one of the most popular Markup Languages worldwide. If you’ve ever had a go at making your own website or blog, chances are you’ve probably used it or at least come across it in your technical travels. Although some developers still use standard HTML, further revisions have since been released, the most recent revision being HTML5. HTML5 contains syntax (the rules that define what It can do and how it can do it) created specifically to handle graphical and multimedia content without the use of external frameworks (meaning that both the user and the developer have an easier time!). HTML5 has since been deemed best practice and has received a CR (candidate recommendation) by W3C. Without getting into too much detail, W3C is The World Wide Web Consortium. As the main international standards organization for the World Wide Web, it’s made up of organizations which work together to develop standards for the World Wide Web. Any credible developer will work to their standards whenever they are coding. Using HTML will take the content that you want on your site and put it into a specific structure on the page. Here’s an example of a basic HTML document that displays a heading, a paragraph and an image:

 



CSS

Now that you’ve got what you want on the page, let’s make it look pretty. CSS, or ‘Cascading Style Sheets’ is a Style Sheet Language used for formatting the display of a document written in a markup language. It’s important to differentiate between the content and the presentation, which is why they have been split into two distinct languages. HTML gives you the basic structure of the content, while CSS allows you to present it in a way that’s pleasing to the eye. The formatting or designing of the ‘front end’ of a website generally consists of layout, colours and fonts; all elements of which are achievable using either CSS or ‘inline styles’. Our above example is not at all formatted, so let’s make it look a bit more structured and pretty. Firstly, we’ll want to add our CSS styles to the top of our original html document:

Next, we’ll want to reference our elements in the form of ‘div’ tags. These are used to specifically define what is presentation rather than content:

 



MEDIA QUERIES

If the above was a generic document that we were going to ‘release into the wild’, we would want to make sure that all of our elements were responsive and scalable to be viewed properly on different devices. This can be achieved in a number of different ways (you can read more about responsive design in our previous article here), the recommended way of doing this, approved by W3C, is through ‘Media Queries’. Media Queries limit the scope of the stylesheet depending on the dimension given. So basically, you give it a dimension and tell it how it needs to behave when the web application is being viewed in that specific screen size. So, first off we need to tell it to change to something when the screen size is below 600 pixels, and then we need to tell it what elements to change. Let’s put one of the div elements we added earlier inside of the media query tag and change the background colour:

 



RECAP, FULL CODE & EXAMPLE

… and there you have it! A styled and somewhat responsive HTML template:  

Hopefully you haven’t been blinded by the science of coding. There are any number of different languages that can be used in website design and website development. Ultimately though, coding is just a process of cause and effect. You code a page or document to do something within it and you get the satisfying feeling of seeing it happen. Thankfully, you don’t have to be fluent in code because there are plenty of people like me out there who can speak it for you. Written, coded and translated by Cheralyn Nadal, Web Developer.

Categories: Technology

Feel free to get in touch

Top