Hi there, as I promised, I will be sharing my knowledge of the field with you all. Usually I find less time but I try my best to give some time to blogging each day. If one of you became successful due to my sharings I will be glad to know. Do let me know if you find my tutorials helpful.
Today we will talk about how you can build your very first HTML page with help of your computer (I mean your brain 😉 ), PC and a software installed on your PC. Software (that we will use in this tutorial) comes by default with Windows installation. Though I will share tutorial on how you can use a professional software.
To prepare for this tutorial we will need Personal Computer (laptop or desktop as you may find easy), Windows Simple Notepad, a chair and a desk if you like. Yes this is all that you need to build your first HTML page. Ah, but one more important thing that you need is the “passion to learn HTML”. Without this passion you might not accomplish that you want to.
- Turn on your computer. It can be laptop or desktop if your choice.. Nothing extra ordinary required here. Normal system will work.
- Next step is to open Notepad application. It comes by default in every flavor of Windows operating system. To open, you can search for this application in Start Menu.
- Once opened, we need to start typing some code below and later save it as a HTML file. Don’t worry much about the code at this point in time. I will explain each part of it later in this tutorial.
<html> <head> <title>My first HTML page</title> </head> <body> <p>Ahmed Habib</p> </body> </html>
- Now we need to save this file with .html extension. .html is the extension that makes this page work as an HTML page. Without this the page will be a text file and will show the source code above instead. Select File > “Save as” in the Notepad menu. Name the file “index.html” and set the encoding to UTF-8 (which is the preferred encoding for HTML files).
- Now you can simply open the HTML page you just built by double clicking the file from where you saved it. If prompted you should select your favorite browser that you use to access websites.
- You will notice that the page displays my name “Ahmed Habib” on the screen. Here you can play with the file change name where my name is and refresh the browser page to update the content. No need to close browser page to update you may update directly.
I’d explain the above code a bit here. The first line starts the HTML page. The second line starts the head in an HTML page. Yes that’s right HTML page also has a head and it works almost same as human brain. 3rd line sets the title of the page. You may play with this text too. Next line simply ends the head. Body is also part of HTML page and our most of the code reside in this block. later lines end the body and html page that we started above. Please comment if you required my to elaborate more.
There are many different tags that we can use to style our HTML page. There comes CSS to color our HTML page as well. For this tutorial we only wanted to create our very first page that only printed our name. We will do wonders in the future tutorials.