HTML : Let’s Learn A Static Webpage Language
Introduction
We will be learning and creating a webpage through this series of articles. This is the first article on this series. Throughout the series we will learn HTML, CSS & Javascript. Also not that we will be finished a project with this series of articles by learning it from scratch. If you are a beginner than also this course will suit you. We will see html in this article.
What is HTML exactly?
HTML is a static webpage markup language and it is not a programming language. The full form of html is hypertext markup language. HTML is used in web development and custom web development also. Tags are the building blocks of HTML. It’s tags are written in between <tag>. HTML is used to create websites and static web pages. In this article we will under HTML and also create some static webpages.
History of HTML
HTML was invented by Tim Berners Lee in 1991 and was known as “HTML Tags”. He gave 18 simple tags of html. All these tags where influenced by Standard Generalized Markup Language(SGML) except for hyperlink tag.
What You Can Do In HTML?
You can create a simple for form in which you can add button, label, textbox(or a multiline textbox) and many more. You can also embed audio and video file from now in html5. Although you can enhance the look and feel of an HTML page with using css which we will understand in next article. So what we are waiting for let start learning HTML.
Simple Example of HTML
We can use different editors but in this example we will use notepad for learning purpose. First of a notepad and type the following code in it:
Then after save it as .html file. Now open it with any web browser. You will find following output:
Now Let’s Understand This Example
The document of html is divided with two main tag <head> and <body>. They both are written in <html> tag. Links should be putted in <head> tag i.e. link for css file or javascript file. We will see them in next articles. <body> is main tag which contains other tags. Every tag ends which </tagname>. Spaces written in between opening of a tag to ending of tag will ignored automatically. You can check it on your own. You can see this in our example.
Heading Tags
All tag from h1 to h6 are heading tags. The text written in these tags will be bold automatically will have some pre-defined size. And also not that these tag will contain automatically line break as well. The heading tag with highest size is h1 and with lowest is h6. No more than these heading tags are available.
P and Strong tag
<p> tag is specially used to write paragraph. This tag will take automatic line breaks. Another tag is <strong>. This tag will make any text to bold. Mark that the text written in <strong> tag is bold automatically.
Let’s Create Project
As I have already said as a part of exercise we will be creating and working on a same project throughout this series of articles. Now open a new file in notepad name is whatever you like and save it as an html file. After doing this open this file with notepad and type following code in it:
Output:
Now open this file with browser and you will see the following output:
Now Let’s Understand This Code:
This code file is a little bit complex for new html learner but simple who know how to create a static webpage. Here we have used some new tag comparing to previous example. So let’s understand each and every tag step by step:
<img> Tag
img tage is fairly a simple tag to include images in any website and webpage. Here src is an attribute where no need to provide the path of your image file. My image is in the same folder so I have just provided the name. Then after if your browser does not support your image tag or any error occurs in such situations alternative text will be displayed. In this case text is defined in alt attribute is MyPhoto. Finally with the help of height and width attribute you can set the height and width of an image.
<strong> And <br/> tags
<strong> tag is used to print a text bold as explained earlier. I think you might have found something interesting in this line. Have you marked that <br/> tag is different and even doesn’t have any end </br> tag? I guess you have. Let see this now. Firstly <br/> tag is used to do a line break. The full form of br is break. It is a self-ending tag and does not require any specific end tag. So <br/> itself is ending tag.
<input> tag
Different type of input forms are available in html. They are textbox, textarea, radio button, checkbox and simple button. Here we have used a simple button. <input> is tag and type, name and value are its attributes. Here type is given as button so simple button has been displayed and name attribute is set to commentButton. So name of button is commentButton. Setting name attribute is not necessary you may set or not. But for css and javascript purpose, one must set this attribute. Now whatever text you provide to value attribute, will be displayed when button will show up.
Conclusion
So I hope you have enjoyed this article. This article was just a small representation of whole html. HTML5 is latest version of html. I recommend you to visit w3school by clicking here and go in depth of html which will really help you a lot. In next article we will understand the css and add it in our project. The next articles will be published by tomorrow, 20th November, 2015. Check it for your further reading.
A website will really increase your profit. And in today’s modern era it is needed now. We are software development firm and you can contact us here.
skype : aswani.nilesh
Email : aswani.nilesh37@gmail.com
Cell : 8128869470