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:
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:
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-weight (how bold the font can appear)
- Text-alignment (both vertical and horizontal)
- Height & Width of sections of the page
- 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:
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:
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.
- 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.
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.