HTML Tutorial
A lil' bit of history
It's important, before we dive into the wonderful world of HTML tags, to have a lil' bit of history and to discover where the HTML comes from.
Tim Berners-Lee, a scientist and academic, was the primary author of HTML.
HTML —which is short for HyperText Markup Language— is the official language of the World Wide Web and was first conceived in 1990. HTML is a product of SGML (Standard Generalized Markup Language) which is a complex, technical specification describing markup languages (1), especially those used in electronic document exchange, document management, and document publishing. HTML was originally created to allow those who were not specialized in SGML to publish and exchange scientific and other technical documents. HTML especially facilitated this exchange by incorporating the ability to link documents electronically using hyperlinks (2). Thus the name Hypertext Markup Language.
(1) A markup language combines text as well as coded instructions on how to format that text and the term "markup" originates from the traditional practice of 'marking up' the margins of a paper manuscript with printer's instructions. Nowadays, however, if you mention the term 'markup' to any knowledgeable web author, the first thing they are likely to think of is 'HTML'.
(2) A link from a hypertext document to another location, activated by clicking on a highlighted word or image.
Fun fact : the first web page ever made was only in HTML... and it is still online ! Click here to see it :)
AND SO IT BEGINS !
The first thing to have in mind : HTML is used to structure and organize your web page.
To understand it better, let me use an analogy. Imagine you want to build a house. Where do you start ? The walls of course !
HTML is like the walls of your website.
It uses what we call tags. Tags are usually written in pairs, like this : <opening tag> content goes here </closing tag>. It defines where the wall that encapsulate your content begins and where it ends.
Here is an exemple of a classical house... Hum I mean web page structure :
What is this sorcery and what does it mean ?
<!DOCTYPE html> is a declaration that defines the document to be HTML5.
<html> is an element is the root element of an HTML page.
<head> is an element that contains meta information about the document.
<title> is an element that specifies a title for the document.
<body> is an element that contains the visible page content.
<h1> is an element that element defines a large heading.
<p> is an element that defines a paragraph.
What does it looks like in my web browser ?
You dreamt it, HTML did it : here is you're first web page !
Where do I write my html code ?
No magic there, you need a text editor... and that's it !
Wanna try ? You can use the simple notepad of your computer. If you really want to create some more complex web pages than what I described above, I advise you to use a dedicated code editor. There are plenty of them, I personnaly uses Sublime Text.
Here is what my editor looks like while I'm coding this page (#codingception) :
There are a lot of different code editors, check them out and find your favorite ! Here is a quick list of some of the most populars :
| Name | Link to download it |
|---|---|
| Atom | https://atom.io/ |
| Brackets | http://brackets.io/ |
| Vim | https://www.vim.org/ |
| Visual Studio Code | https://code.visualstudio.com/ |
YOUR TIME TO SHINE !
How about you try to do some HTML page of your own ? :)
- Step 1 : open your computer text editor or download one of the text editors mentionned earlier.
- Step 2 : create a new document and save it on your desktop as "index.html"
- Step 3 : inside that document, write the classical web structure page.
- Step 4 : inside the
<body>tags, and using<h1>and<p>tags, write down your name and a short presentation of yourself. - Step 5 : save your changes, and open your document in your web browser.
Congratulations, you created your first web page !
Wanna go further ?
Here are some tutorials :
| Name of the website | Link |
|---|---|
| W3Schools online tutorials | https://www.w3schools.com/ |
| Codecademy | https://www.codecademy.com/learn/learn-html |
| MDN Web Docs | https://developer.mozilla.org/en-US/docs/Learn/HTML |
| Learn HTML | https://www.learn-html.org/ |