The marketers' guide to HTML, CSS & JavaScript

marketing-guide-html-css-javascript.jpg

We recently discussed whether digital marketers should learn to code.

In it, we discussed the importance of understanding the basics of HTML, CSS and JavaScript at the very least.

Today, we will be breaking down these terms and defining them in the simplest way possible.

But before we talk about that, let’s explain how browsers interact with web content.

When someone opens a web page, browsers such as Chrome or Safari examine the HTML, CSS and programming languages, and translate them into the views (web pages) that end users see and can interact with.

Now that we understand how web browsers interpret different computer-based languages, we can explore the three main languages in use today.

Once you grasp the basics of HTML, CSS and JavaScript - basic web pages will no longer intimidate you.

Now, let’s break down the code.

HTML

HTML is the foundational language of the web.

Think of it like a skeleton. Without a skeleton, you and I would be boneless and flopped on the floor, unable to function.

Similarly, without HTML a web page wouldn’t have a structure, layout or any basic content.

This is what basic HTML looks like:

Screen Shot 2017-10-18 at 9.53.42 AM.png

‘<h1>’ stands for the main or primary header. In this way, h2 is the second, h3 is the third, h4 is the fourth header etc.

‘<p>’ stands for the beginning of a paragraph and ‘<body>’ means the beginning of the body text. Similarly, ‘</p>’ means the end of a paragraph and the same rule applies for every HTML tag.

Simple, right?

Here is an example of HTML images:

Screen Shot 2017-10-18 at 10.24.31 AM.png

The image file name comes after ‘src=’ (short for source or where the file lives on server, logical huh?) and‘alt=’ is the image alt text. These terms help search engines to understand your image content and the alt text is also what is indexed in search results.

If you want to learn basic HTML, check out Lrn a mobile app that teaches HTML using interactive quizzes.  

CSS

If HTML is the skeleton and bones of a web page, then CSS is the skin and clothes of a web page. In other words, CSS determines the look and feel of a web page.

While HTML determines the structure of individual pages, CSS determines the design elements across a website. This is where the term cascading comes from... cascading elements across a website.

CSS controls design elements such as fonts, colours, images and menus without altering content that is unique to individual pages.

This is what basic CSS looks like:

Screen Shot 2017-10-18 at 10.05.13 AM.png

As you can see, the CSS code is inline with the HTML tags. Within the h1 tag, style=”color:<insert color>" ; is the CSS code that determines the colour of the h1 header. In this example it's blue.

Here is an example using CSS fonts:

Screen Shot 2017-10-18 at 10.12.51 AM.png

Changes are made to the main header and paragraph HTML tags using the ‘<style>’ tag. Pretty straight forward, the font-family determines the font type and you can adjust the font size using the font-size: tag.

If you want to learn more about CSS, Codecademy has free and paid courses available.

JavaScript

If HTML is the skeleton and CSS is the clothes, then JavaScript are the accessories. It’s the extra layer that adds greater flexibility and functionality to a website. Giving it some pizaaazzz...

JavaScript is a versatile programming language enabling anything from image galleries to animated 3D graphics. The key here is interactivity.

JavaScript allows developers to build-in interactive functionalities to HTML-based websites.

It is also more difficult to learn than the basics of HTML or CSS. But don’t let that stop you; JavaScript increases the interactivity of almost every website on the net.

You can insert JavaScript into an HTML file by including scripts or bits of JavaScript code into the header or body tags of HTML.

Below is an example of basic JavaScript:

Screen Shot 2017-10-25 at 11.03.48 AM.png

 

This is an example of JavaScript code changing HTML attributes. The JavaScript code is changing the src or source attribute of the HTML. It’s still using the same image (‘myImage’), but each button is using JavaScript to activate a different gif file over the top of the image.  

This results in the light bulb being able to be on or off depending on which button you click.   

If you want to learn more about JavaScript, here’s a resource to get you started.
 

NEXT STEPS

Learning the basics of HTML, CSS and JavaScript will open up new opportunities and possibilities for you as a digital marketer.

If nothing else, it will help you have better conversations with developers and enable you to be able to make basic changes to code, without calling for help.

With EDMs, landing pages, CTAs and practically every other form of digital marketing utilising one or more of the above languages... it makes sense that you learn how to use HTML and CSS at the very least.

If you want to progress as a marketer, it’s all about up-skilling and increasing your abilities.

Luckily, there are countless resources and training modules available online - many of which are free.

Do yourself a favour and up-skill in HTML and CSS.

Images were sourced from: W3school