I had decided to create a HTML tutorial for absolute beginners. This post is for those who are just starting in Web-development. After this article, you can take the code in this tutorial and treat as as your little cheatsheet for HTML.
HTML stands for Hyper Text Markup Language. It is actually not a programming language, but a markup language for creating webpages. It doesn’t have any logic like a programming language.
You can create a complete presentation site, also known as brochure site using HTML and CSS and there are many sites like this on the internet.
To start will HTML, you need a web browser. I prefer firefox, but you can use Chrome also. You can code the HTML code in notepad also, but it’s advisable to have a light code editor. Visual Studio code is the go to editor nowadays, which is completely free. So, we will use that in this course. So, go ahead and download it from the microsoft site here.
Visual Studio Code
Once installed, open Visual Studio Code and click on the Explorer.
Once it is opened the below screen will be shown. So, first create an empty folder anywhere in your computer with name HTML_Basics.
After that click on Open Folder button and select the folder HTML_Basics. And then click on Open button.
Now, it will show like below in the VS Code.
Now, hover your mouse over HTML_BASICS folder and click on the New file button, which is shown in the screenshot. It will open a text box to enter file name. Enter the name index.html and press enter.
With VS Code, we get a very good plugin auto installed and it is Emmet. Press the ! inside the index.html file and then press tab.
The whole html basic structure will be done. Will explain more on each tag later.
After that just changed the title and then inside the body tag, given a h1 tag and then a p(paragraph) tag. We will soon learn more about them.
Now, let’s open the index.html file in any browser by clicking on it in explorer. It will open in your default browser and for me it’s Safari.
Now, everytime we make some changes in the HTML file we have to go to the explorer and open the file. In VS code we can make this process smooth by installing a plugin called Live Server. For this you have to go to Extensions and then search for it in Search bar. After that Install it, which is showing as Disable for me as i had already installed it.
After that go back to your index.html file and click on the Go Live button on the bottom right of the screen.
It will show in VS Code that the file is running on Port 5500.
It will then start the index.html file in http://127.0.0.1:5500/index.html in the default browser. You can open it in any browser of your choice.
Now our setup is done and will work on this only for the rest of the tutorial.