Mark-up and Coding Languages You Must Know About
Making a website is fun a way to test your knowledge of design and layout purposes while using your chosen Content Management System (CMS). But even though your CMS (e.g. WordPress) may be able to help you with the layout, it doesn’t make everything look 100% right. That is why knowing some markup and coding languages can give your website a little boost in the design and the way the website can be used.
Markup and coding languages, like HTML, CSS, JavaScript, and PHP, can help you make your website look better and allows you to put in cool features that will put your website to the next level. In this blog, we will be showing you what each of these languages looks like and what they can do for your website.
Markup Languages:
Markup languages are designed for the processing, definition, and presentation of text. The language specifies the code for formatting, both the layout and style, within a text file. The code used to specify the formatting is called tags. Here are two different Markup Languages that you can use on your website.
HTML (HyperText Markup Language)
HTML is one of the most popular markup languages that is currently being used on websites. The use of HTML is to create web pages that are on your website. The contents of each webpage are defined by HTML tags.
Visualise HTML as being the skeleton of the page. Let’s compare to our body: our bones would be HTML; our skin and muscles would be CSS.
A good comparison would be the following:
Imagine you are building a house.
You lay the foundations, and raise 4 walls and a roof (HTML)
Then you go on to decorate your new house with nice decor, painting, carpets, and linens (CSS)
And finally, you add something special, and when you clap your hands, the lights turn on (JavaScript)
Basic page tags, such as <head>, <body>, and <div> define sections of the page. While tags such as <table>, <form>, <image>, and <a> define elements within the page. Most elements require a beginning and end tag, with the content placed between the tags.
Example of HTML:
<head>
<title>The Adventures of Hunky the Monkey</title>
<meta HTTP-equiv=”Content-Type” content=”test/html; charset=utf-8″
<meta name”keywords” content=”Hunky,Monkey,Adventures,animal”>
<link rel=”stylesheet” type=”text/css” href=”/style.css”>
<link rel=”shortcut icon” href=”/favicon.ico”>
</head>
To view your HTML on your website, you can view it by going on ‘inspect’ when you right-click on your mouse. You can also access it through the inspect element (Ctrl + Shift + I) and then click on the “Elements” tab, which will show you what HTML and CSS are being used.
If you just want to look at the HTML or the source code, you can use Ctrl + U would be the best way to view them.
CSS (Cascading Style Sheet)
CSS is a style sheet language used for describing the presentation of a document written in HTML. Unlike HTML, CSS only has 1 tag. The only CSS “tag” that exists is <styles>. But when writing CSS on a separate sheet, these are no longer used.
Instead, CSS is able to use the HTML tags and style them using properties unique to CSS, such as “background-image”, “color”, “width”, “position”. The properties are written in “Key = Value” pairs. (e.g color: red;). CSS is written like this:
<style>
body {background-color:lightblue; text-align:center;}
h1 {color:blue; font-size:40px;}
p {font-family:verdana; font-size:20px;}
</style>
Within HTML, there are different ways CSS can be presented. The ways CSS can be presented can be within the HTML code (Inline Style) or in a separate style sheet.
Example of CSS within HTML: Inline Style
<!DOCTYPE html>
<html>
<body>
<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>
<p style=”font-size:25px”>This is a paragraph.</p>
<p style=”font-size:30px”>This is a paragraph.</p>
</body>
</html>
Example of CSS as an External Sheet:
<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” href=”mystyle.css”>
</head>
<body>
<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>
</body>
</html>
**In this case HTML and CSS are written in different places, the same way when you have a notebook open, HTML would be on the left page and any CSS will be on the right page. This makes it much easier to understand and fix code, and also allows the code to run faster. Inline styles are considered bad practice and can heavily slow down your website’s performance**
Coding Languages:
Where markup languages affect the presentation of text, layout and the style of the text file, coding languages usually handle everything else that the user cannot see. With the exception of Javascript and Jquery that can also be used on the front-end and create effects on the website to make it seem more alive and fluid, adding animation and movement and reacting to the user’s input or movement. There are a lot of different coding languages to know. From Python, C#, C++, and Java. We will be focusing on two coding languages, and they will be JavaScript and PHP.
JS (JavaScript)
JavaScript is considered to be one of the most useful languages developers to learn and use within their career. Even though it has the word ‘Java’ in the same, JavaScript has nothing to do with the Java language. Java and Javascript are similar like “car” and “carpet” are similar. These languages have different applications and Syntax, so be careful not to confuse them.
Out of the different coding languages that are currently being used, JavaScript is THE most used language. JavaScript is a multi-platform language which means it can run on most operating systems and browsers and is essential for anyone looking to build a website that is fully functional interactive or animated.
Example of JavaScript:
<script>
alert(‘Hello, World!’)
</script>
PHP (HyperText Preprocessor PHP)
If you are looking to create a powerful website, PHP is the perfect coding language you can do this in. PHP is known as a server-side language. As PHP is a server language this means that everything you create on a server will be written in PHP but viewed as plain HTML to the viewer. Here are the three main ways PHP can be used:
- server-side scripting
- command line scripting
- writing desktop applications
PHP is currently being used highly by a website you have used before. Facebook, WordPress, and Wikipedia all use PHP.
PHP is one of the most commonly found server-side languages throughout the web, but that doesn’t make it the most popular. Created in 1994 by Rasmus Lerdorf it quickly became the base scripting language found on most server-side applications, but as times move on, new candidates are constantly showing up in the horizon.
Example of PHP:
<?php Print “Hello, World!”; ?>
<?php Echo “Hello, World!”; ?>
Where You Can Learn Each Language
With the help of the internet, there are websites that are here to help if you want to get a better understanding of how to write the markup languages or any of the coding languages. Here are some examples of where you can learn each of these languages and more:
Need help?
If you require further help or enquiries regarding any of our services, don’t hesitate to contact Snob Monkey. We will be happy to answer any questions you may have.
Email: contactus@snobmonkey.com
Telephone: 0800 368 9336
