HTML:
HTML stands for Hypertext Markup Language and is usually the first web development programming language anyone starting out in web development learns. HTML is the foundation that over 90% of websites are built on. In essence, HTML provides the structure for a webpage by breaking out the content into sections such as titles, headings, paragraphs, links, forms, lists, tables, images, and more.
When writing HTML you piece together the different elements of the website using HTML tags. Most of the elements you will use will contain both an opening and closing tag. The opening tags are before the text and contain the element name enclosed by brackets “<“ and “>”. The closing tags are the same but also have a backward slash before the element name. For example, if you were writing the title to a webpage, the wording that will display in the browser title bar or page tab, you would write it as follows:
<title>This is the page title</title>
If you were going to write a header for the webpage you would write it as:
<h1>Header</h1>
Or a paragraph:
<p>This is a Paragraph</p>
There are many more tags available for use on your HTML page. A great reference tool to use when learning HTML is W3 Schools and you can use the following link to view a more robust list of available HTML tags:
https://www.w3schools.com/TAGS/default.ASP
You could technically make an entire website using only HTML, however, it would not be the most appealing to the eye. That’s where the magic of CSS and Javascript come in.
CSS:
Cascading Style Sheets usually referred to as CSS is a language that allows the developer to apply additional styling to a basic HTML page. With your basic HTML page, you would just see plain black text on a white background without any of the styling
elements that allow items on the page to stand out to the user. Here are some examples of what can be styled using CSS:
- Font-type
- Font-size
- Font-weight (how bold the font can appear)
- Font-color
- Background-color
- Text-alignment (both vertical and horizontal)
- Height & Width of sections of the page
- Borders
- Margin & Padding (the spacing between elements)
This is just a short list of the many available styling options you have with CSS. You can find a more complete list here:
https://www.w3schools.com/cssref/
There are three ways to integrate the CSS into your webpage
- Inline CSS – By using inline CSS you are writing the style elements directly into the HTML elements on the same line of code. Writing CSS this way is not as efficient as the latter two methods as you will most likely have a lot of redundancy since you must style each unique element and would most likely be using similar style for many different parts of the website.
- Internal CSS – Internal CSS involves writing the CSS styling directly into the HTML file in between two style tags as such:
<style>
h1{
color:blue;
}
</style>
This would allow every h1(header) to have blue text without writing ‘color:blue’ on each individual element in the HTML file. As you can see, doing it this way will remove a lot of the redundancy you would have with inline CSS.
3. External CSS – External CSS is the most efficient way to set up your code. This is done by linking a separate CSS page to your HTML page and referring back to that .css page for all styling. Again, the redundancy of inline CSS is removed. This also allows you to keep your HTML page as simplified as possible as you don’t have the additional style code lumped in with the HTML.
JavaScript:
With over 1.6 billion websites in the world and JavaScript being used on around 95% of them, you can tell it’s a pretty crucial building block in web development. In addition to websites, nearly every computing device in use runs JavaScript as well. This includes iPhones, Android phones, Microsoft Windows, Mac OS, smart TVs, and many more.
Javascript takes your existing HTML & CSS and allows you to make your webpages more interactive and really come to life.
Just like CSS, JavaScript can be added to your HTML file in different ways.
- Internal JS – This adds the JS directly into the HTML file by adding the code inside the <script> tag. This <script> tag can be located in either the <head> or <body> tag of your HTML file.
- External JS – Just like External CSS, this is done by using a separate JS file and usingthe extension .js. This file is linked to the HTML file inside of the <head> tag.
Speaking from experience, learning JavaScript can be a challenge, but the key is to consistently practice and continue to hone your skills.
If your goal is to become a web developer, learning and mastering these three languages is essential. This was just a brief introduction to each of them, but there are endless blogs, videos, and tutorials to further develop your skills in each of these areas.