Beginner’s Tutorial: Starting out by learning HTML
Programming is one of the most popular industries today, and many people want to get started – but don’t know what language to learn first. With so many languages out there, it can be a bit overwhelming for beginners. This article will explain why HTML is a great language for programming beginners to start out with, and it will also explain the very basics of how to code HTML.
Although some people might not consider it a programming language, HTML (and CSS) is definitely a great language to get started with. This tutorial will cover the advantages of learning HTML as well as provide some basic knowledge about HTML and also what to learn after HTML.
What is HTML
First of all, what is HTML? It stands for Hyper Text Markup Language and is one of the most commonly used languages used today, and the most popular programming language for creating websites – it is almost absolutely necessary! However, some might not consider it a real programming language, as the “ML” stands for Markup Language. Regardless of the fact, it is a great tool to learn because of its simplicity and the fact that you can easily get started and build something with it.
Above, I have also mentioned something called CSS. CSS stands for Cascading Style Sheets. What is CSS though? HTML lays out a structure of a webpage – while CSS makes it look pretty. You can achieve all sorts of fancy effects with CSS. Here’s an example – HTML is the frame or the table, while CSS is the paint, the carvings, and the decorations of the table.
With a button as our other example, we would first use HTML to add a link in. With CSS, you could add borders around the text, change the text color, change the background color of the text, add a “border radius”, add shadow or gradient effects, and more. Using CSS you can create visually appeasing effects, such as a change of color when the mouse hovers over the button.
Why HTML should be the first language you learn
HTML was my first language, and I definitely didn’t regret the decision. I’ve seen many people chose a more difficult programming language as their first, such as C++ or Java and they lost interest in it quickly. HTML is easy to type and can generate beautiful results, and it is often taught in computer lessons in schools for that reason. Although HTML can get more difficult as you get into more complex ideas, it’s fairly easy to start with.
Another great reason to learn HTML is the relative ease of learning and typing it. There are many great tools and code editors for HTML. Some of the best include Sublime Text 2/Sublime Text 3, Notepad++, Atom, and more. One of the best features of some of these code editors is Auto Complete. Basically, when you start typing a line of code it suggests what you should type next (which is usually correct) and it enters it for you. This can increase your coding speed and makes it easier for beginners who are not familiar with the Syntax.
With millions of tutorials about HTML and CSS across the web, coders rarely get stuck for a long time. You can find help at websites such as W3schools or question and answers sites such as Stack Overflow. Obviously, the website that you are now on – Codementor.io is also a great way to connect to experts to solve your problem.
HTML basics
Lets get started with some basics of HTML! You can use <p> for “paragraphs”, which is basically a block of text. So to print a line of text, you open a new file with your code editor of choice (even Microsoft Notepad would do, though its not recommended), and type:
<p>Hello World!</p>As you can see here, there is both an opening tag and an ending tag. The ending tag is helpful in many ways. For example, links require you to use the <a> tag.
<a href=“http://example.com”>LinkText</a>This line of code creates a link for you. In a freelancer’s website, there might be a line of text saying
<p>Please visit my facebook page <a href= “http://fb.com”>here</a>, thank you.</p>Without the closing </a> tag, the “thank you” text would be part of the link. So would all other text that is written on the page! This is part of the HTML language, by the way.
Save it as index.html, and show it in your browser.
This is what you should see:
<img>
<img src=“images/Star.png”>src means source, and you can either enter an absolute link or a relative link – an example of an absolute link would be http://example.com/files/images/star.png, while a relative link would look like “images/star.png”. Relative links are in connection to the website file (the index.html file).
Other Languages
However, there are some things HTML and CSS cannot do. As a result, you often have to learn some other languages – let me explain them to you here. For example, many websites have beautiful sliders in their homepage. The best way to make them is out of Javascript and jQuery – although you could make them out of only HTML and CSS (see example here).
All of the popular websites on the web nowadays, including Google, Yahoo, Youtube, Facebook, and Wikipedia use JavaScript in their front-end (although there aren’t many choices anyways). You can achieve spectacular effects with JavaScript too, as shown here. Another example would be a contact form or an eCommerce system – that, on the other hand, must be made through PHP. Facebook, WordPress, and Digg uses PHP as their backend, as PHP allows you to easily work with databases. Of course, there are others you could create a contact form or an eCommerce system, although PHP is one of the more commonly used.
Summary
HTML is one of the most common languages in the world, and despite some saying that it’s not really a programming language, it is a great language to learn. It is also quite simple, making it a great language to start with. We’ve also covered a few basic tags and made our first (super-simple) website in html. Lastly, we looked over other languages that will be useful or even crucial while developing later on.
About the Author
Ryan Chang is a blogger, writer, developer, and designer. He blogs at Nukeblogger and you can contact him by email here. He enjoys all sorts of development and also general tech-related subjects.
