Today let’s Learn awesome HTML as Beginner. I am mostly going to use HTML5 version. I will include points as basic as you are here to learn it from scratch. So even if you are from commerce or Arts stream and heard a word somewhere about technology and HTML language you will get to understand stuffs like where to start and what you should go through.
So first let’s talk about what is HTML and why you need it and what you can do with it.
What is HTML?
When you open any browser and think that today I need to check out something on internet and you open for example Google. Now when you open Google you are looking at some content like images, text, links, buttons etc.
So, all these information and content are coming up in your browser because of HTML. Every web page on internet you open is written in HTML. You can think of HTML as the skeleton that gives every web page structure.
Why you need it?
Why I strongly recommend you to learn it even if you are from technical background or not is because on coming days technology will grow rapidly and websites, online content and information sharing will be used by every single person. So now even if you know or not you will find that at some point in life you will need it.
If you learn it then there is also possibility that you can show other people that you are capable of tech stuff even if you are not from tech background.
What you can do with it?
Guys answer for this question is so big that even if I cover multiple posts about it then also it cannot be answered fully. For now think about all the websites you check out. Now all of that are created in HTML as a front end tool there are other server side languages which handle database and stuff but for now we are only sticking with HTML which represent front end of your website.
So let’s start with HTML basics first. What tools you will need?
For starter everyone use notepad but I do not recommend it as it is very time consuming for you and also need expert level to use all syntax and learn it. In market there are hundreds of editor tool available for all programming languages.
You can use any of them which please you. Now let me say my choice and which will make your writing practice easy.
It’s not our purpose to go for other languages right now so we will not discuss it now. But for HTML I will say this is the best tool. First thing you will notice will be intellisense when you code and it’s so helpful that you will never look at any other editor after this.
Community edition is free but if you want then other paid versions are available. Before going with this tool I must tell you please understand that this will block multiple GB of your computer drive. So if it’s like some minor learning session and want to update small file somewhere on internet you find this tool will be too much to those stuff.
WebMatrix: if you are not going with visual studio then this tool will give you most of the features as editor I mentioned above. This is very small compared to visual studio but still will block about 400 to 500 MB space if you are wondering about space.
But I will still say if you don’t want to go with visual studio then please go with this tool as this can help you create project and whole linking of files and stuff are very easy here.
So you will be relived about more complex stuff when coding in frontend languages.
Notepad++: This tool is very handy and compact. You will find this tool so compact and handy then you will stop using default Notepad which comes with Win OS for normal text as well.
This is quick tool to go when you are in hurry and want to text out some code on local machine. But even if you use for language or not I highly recommend installing this as this will replace your default notepad and I am sure you will fall in love with this.
So now let’s start with learning. Create one folder with your project name in some drive. Now this folder will consider as root folder as it will going to contain all the HTML, CSS, JS, Image etc. files.
HTML full form is Hypertext Markup Language. Hypertext means “text with links in it.” Any time you click on a word that brings you to a new webpage, you’ve clicked on hypertext!
A markup language is a programming language used to make text does more than just normal text. It can turn text into images, links, tables, lists, and much more.
Now about styling a webpage that’s when CSS—Cascading Style Sheets comes into action. We’ll learn HTML first, and then will go for CSS in other posts.
Now create one file in the folder which you created before which we are calling root folder. Give that file name index.html and save it. Now open this file in editor which you are using. Right click on this HTML file and open in the editor you installed it will open it in that tool. If you will double click then it will open in browser as a result. So just in mind this point.
Now there are 4 things please keep in mind while writing HTML. These are very mandatory as it will help your browser to understand HTML you are writing. Though some points are not mandatory to insert in HTML but I am telling it’s mandatory because it will be on long term.
- Always put <!DOCTYPE html> on the first line. This indicates that you are going to write below HTML and it contains HTML 5 type. For other HTML version there are different styles to write doctype. For more info on it click here.
- After doctype put HTML start tag and at the end of file put HTML end tag.
- Between these HTML tag write HEAD start and end TAG.
- After HEAD tag but inside HTML tag put BODY start and end tag.
So your html should look something like below.
<!DOCTYPE html> <html> <head> </head> <body> </body> </html>
Now save this index file. So in html we say start tag and end tag. It means when we use <> and write tag name inside it then it considered start tag and if we put </> this after that start tag and write same tag name inside that after slash then it considered as end tag. So in above example <body> </body> this body is starting and ending and syntax is like that.
Remember HTML contains predefined tags and you can use those only. You cannot write your name and create it as tag. You can find complete list of HTML tags here.
Remember every time new version of HTML launch then new tags also comes and some old tags get depreciated. So as I mentioned earlier please write DOCTYPE accordingly if you are using some HTML 5 tags in your html and you have mentioned DOCTYPE as html 4 or older version then those tags will not work because browser will consider your page as HTML version you mentioned and that version doesn’t support those tags.
Let’s create one sample HTML now. After writing below example in index file save it and now double click on it so it will open in your local browser and will show you result.
Now here you will be able to see (welcome to allessentialtech.com) in page but as can check out that I have written title tag inside HEAD tag. This will add title of your page and it will be visible in your tab like below image.
<!DOCTYPE html> <html> <head> <title>this is my page title</title> </head> <body>welcome to allessentialtech.com</body> </html>
I hope you have understood the stuff I have mentioned here and liked it. We will continue with other parts of the series Learn awesome HTML and it will contain HTML and CSS from scratch to basic to advance. If you have any question and like to add something to the post then please mention in comment below or you can also contact us via Contact us page.
Learn awesome HTML as Beginner
– I will try my best to help you out. If I will add your content in post then will shout out to you as well. Keep checking out for updates with this post parts.
Always be happy and make the crazy effort for what you do in life.
Jay Ambe, Namaste (greeting we Hindu people follow same like “bye” in English)