Are you interested in making Web pages? If so you should learn HTML. HTML is the standard language for websites, it’s easy to learn and very powerful.
As you surf the Net, you visit hundreds of sites every day and all of them are linked together by one powerful programming language: HTML.
Almost every Web page is written in HTML: when you connect to one of them, your browser downloads its code and it shows it to you.
HTML is easy to learn, probably the easiest programming language, but it’s still very powerful and in the next weeks I’m going to teach it to you.
Step-by-step you’ll master it.
What is HTML?
HTML stands for Hyper Link Markup Language:
- Hyper Link means that it allows to go from one web page to another. Everything on the Internet is linked to something else and this is made possible by hyper links in HTML pages. Surfing the Net isn’t a linear experience, like a book is. You can jump to a different topic without reading the whole page.
- Markup means that HTML is based on specific tags and keywords that change the behaviour or the appearance of the text.
- Language means… well, you know, it’s a language.
Tags are an important feature of HTML: actually, they are the essential building blocks of this language.
What is a Tag?
Tags are special words put between angle brackets ( ) and they allow to beautify plain text, add images, tables and all sorts of things, but they don’t appear on the web page.
Lets see an example:
is used to bold some text. But how do you exactly do that?
Each tag has an opening and an ending version. Put the text you want to change between them and Boom! you’ve created an HTML element.
<b>This part is bold</b></code>, but this isn't
That in a browser becomes: This part is bold, but this isn’t
- b is the name of the tag: each tag has its own name.
- is the opening version of the tag.
- is its ending version.
- This part is bold is the tag’s content.
See? The tag disappeared and the text changed.
Which programs do I need?
One of the amazing things about HTML is that you just need a simple text editor, such as Notepad, and a web browser – even without Internet connection – to start programming.
So open up Notepad, write the code that I’ll show you later and save it using the .html or .htm extension.
→What is an extension? Have a look at this article by How-to-Geek.
Otherwise you can use online editors, such as the one that W3Schools offers – which furthermore is also a great website to learn all sort of things about Web design.
Your first HTML page
To start we’re going to make a page with some text in bold and, most importantly, I’m going to introduce you to the fundamental tags of HTML.
Here’s the code and its result:
How do we turn it in a working web page?
1. Open a text editor and type the code.
2. Save the file as .html, selecting Hyper Text Markup Language file in the “Save as type” drop-down list.
3. Open it with a browser – a simple double-click should work.
The fundamental tags
What are all those tags I’ve used in the example?
You already know what
is, but the others are way more important.
This is the only one of all the keywords I’ve used that isn’t a tag.
is, in fact, an instruction which indicates the HTML version used.
In HTML5 there’s only one possible version of Doctype – while in HTML4.01 there are multiple.
It’s a good habit to write this line at the beginning of every Web page.
This is the container of all html elements – all tags, sentences, images, scripts, everything.
Some tags, such as
, in particular the one that contains general information about the page, can be only written inside the
The text inside this tag will become page’s title.
The title is very important, so much so that it will appear, for example:
- in the browser toolbar;
- in search-engine results;
- when you add the page to the favourites.
All the content of your page will go here.
holds the page’s information,
contains all the document’s content.
HTML is very easy to learn, but remember that it has too many features to cover in a guide like this.
In fact, my mission with these post is teaching you how the language works, so that when you look a new tag up in an online “dictionary” – such as W3Schools – you’ll understand it more easily and you’ll use it better.
If you’ve got any questions, ask them in a comment: I will be happy to help you!
If you think this post could be helpful to a friend of yours, share it!
Anyway, the post is finished, have a good day and we will see next week!
From Zephyro it’s all, Bye!