HTML – Let’s Create A Project & Understand It

Last updated on Aug 02, 2016

Alphanso Tech

Web Design

0

Introduction

In first article we understood some basics of html. Now in this article we will create one project and will work on it.

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:

html

html

Output:

Now open this file with browser and you will see the following output:

html

html

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 of HTML

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 soon.

Post by Alphanso Tech

Created in 2009, Alphanso Tech is a leading IT Consulting company with a presence in the USA, Canada, and India.We are a trusted and leading service provider to many top-tier companies in the area of Custom WordPress Development , Web Application Development , iOS App Development , Outsourcing Services, Online Marketing and many other related activities.

Leave a Reply

Your email address will not be published. Required fields are marked *