Search on Google for the term “learn to code”, and the chances are good that you’ll find a lot of information on 3 programming languages. HTML, CSS, and JavaScript. Why is that? Well, it’s simple. Because they’re used in programming websites and with so many websites out there, they’re the most common programming languages there are.
Why do you need three languages to create web pages?
You see, each one of these (HTML, CSS & Javascript) has a different and very specific purpose when it comes to web design and development. In essence, they form the frontend of a website, or, in other words, the part that you see, while other languages provide the backend.
But what’s the difference between HTML, CSS and JavaScript and how do they work to form the basis of the beautiful websites you look at every day? Here, we’ll answer these questions in more detail.
What Is HTML?
A simple way to think of how these languages interact is to picture a website as a combination of a skeleton, style, and functionality. Here, HTML or HyperText Markup Language, provides the skeleton. It is the most basic building block of your website and provides the structure of a webpage.
HTML uses markup to annotate text, images, and other content for display on web pages and uses tags to separate the elements from each other. Examples of elements would, for instance, be <p> for a paragraph, or <img> for an image. Between these tags you’ll add your content or images, depending on what tag it is. Keep in mind, though, that there are many more that specify anything from headers, to footers, and section.
To explain how these tags work, it’s easier to use an example. Let’s say you want a list on your website of your favourite sports cars. You further decide that you’ll use bullet points in your list.
In this instance, the HTML code will look like this:
Note that the <ul> tag specifies that you want to create an unordered list, and each <li> tag specifies a list item. Also note that each tag has a closing tag, in this case </ul> and </li>. These tags are generally needed although you get some tags that don’t need them.
The above example will display the following content on the webpage:
- Lamborghini
- Porsche
- Ferrari
How Does HTML Work In Web Design?
Although HTML may seem like the most basic part of your website, without it there wouldn’t be a site. Like we said earlier, it gives your website it’s skeleton where everything else is built from.
But it goes further than that. As it contains all your website’s content, it allows you to use keywords in your content so that people can find your site in search engines. Also, with semantic HTML you can specify the elements on your page very clearly.
These two facts combined, let’s search engines know what your site is about and makes it easier for users to find your site and your content.
What Is CSS?
After the skeleton is laid out, you must style it and that’s where CSS comes in. It is a stylesheet language used to describe the presentation of a document in HTML format. In simple terms, it makes your HTML code look good and if you want your website to look good, you’ll have to use CSS.
To style your HTML elements, you’ll use CSS properties that you set a value for. You then attach these properties to an HTML tag or class. Sounds complicated, doesn’t it? It really isn’t that hard.
Let’s look at an example.
If we look at our favourite sports car list again, suppose we want to make the first Lamborghini item yellow, the second Porsche item blue, and the third Ferrari item red. We’ll do that like this:
Here we give each item a class attribute. For sake of the example, we name the classes the colours we want them to be, but keep in mind that you can name them anything as long as they correspond to your selectors in your CSS file. Yes, that’s right, we’ll set out CSS in a different file that is linked to our HTML file.
In the CSS file, we’ll add colour to our list items like this:
Here you can see that you specify the selector by name. Because it’s a class we add a full-stop before the name and then we add the colour we want the text to be inside the brackets by specifying the value for the colour property.
When done, our list will display on the web page like this:
- Lamborghini
- Porsche
- Ferrari
How CSS Works With HTML
You want your website to stand out from all your competitors so it’s important to create a beautifully designed website. Although we’ve just looked at a very basic example of CSS is action, you could basically do anything with CSS.
You can change text size, colour, and font. You can also work with images, set backgrounds, and overlays. You could even create animations to use on your site. Basically, the options are endless, and with CSS you can create a website to wow your visitors.
What Is JavaScript?
It’s nice to have a beautiful website, but you’ll also want some functionality, right? That’s where JavaScript will help you. Javascript is often described as a lightweight, interpreted language. Essentially, JavScript is an internet language that scripts a web page’s look and feel.
With scripting you can add functionality to your website like submit buttons that send users to another page and record their information in your database, form validation, simple calculators, and even animations.
A simple example of how JavaScript works will be the simple “Hello World” example , but with a twist. Let’s look at our sportscar example again. At this stage, it’s only a list of three cars on the page without any indication of what the list means. So, let’s tell the user.
Like CSS, we’ll also add out JavaScript code in a separate file that we will link to our HTML file. In this file we’ll enter the following code:
With this code, once the page is opened, an alert will pop up displaying the message above to the user. Clever, right?
How JavaScript Works With HTML and CSS?
Now, you don’t only want to display pop-up messages on your site, so we’ll take you through an example of how JavaScript works with HTML and CSS on a real-world website.
Let’s say you have an online store that sells laptops. Every time the website is shown, your JavaScript code will fetch all the details of the laptops that are in stock from your database. It will get the price, the specifications, and the picture of the laptop.
This information will then be displayed on screen by using HTML where each laptop will, for instance, be an element on the webpage. You’ll use CSS to style these elements by specifying the font, the colours, and the picture size and borders.
If a user registers on the site, the process will basically be reversed by taking the details the user enters from the HTML form and sending it to the database.
Final Thoughts
There you go, now you know the basic difference between HTML, CSS, and JavaScript and how they’re used to create websites. In their basic form, you can create a fully working website but there are also various frameworks, tips, and tricks available that can take your website to the next level.
