Welcome to day 5 guys, today we will be finishing with HTML and we will be revising the tags we have learnt in the past few days.
Today we will discuss about div tags and span tags in HTML along with forms elements and comments. Okay let’s start.
Div tags and Span tags:
<div></div> tags are used to layout the websites. Each div is pretty much like a box. You can nest the div tags to create an awesome layout. Div’s are block level elements. Block level means each div takes one full row and if you write any tag after div tag all those elements comes below the div. For example let’s take this code.
<!Doctype html>
<html>
<head></head>
<body>
<div>I am a first div</div>
<div>I am a Second div</div>
<a href=””>I am a link</a>
</body>
</html>
Copy the above code and paste in your code editor and test it in the browser. You will see all the contents in between div elements comes one after the other but, link appears after the second div in the same line. Here, <div></div> tags are called the block level elements and <a></a> tags are called inline elements in HTML.
<span></span> tags are pretty much do same as div’s but span’s are used to layout smaller parts of the webpage and div’s are used for larger partitions. Another difference is Span tags are inline elements. Let me show you with some code snippet then you will get a clarity.
<!Doctype html>
<html>
<head></head>
<body>
<div>I am a first div</div>
<div>I am a Second div</div>
<span>I am a first span</span>
<span>I am a second span</span>
</body>
</html>
If you run the above code in the browser you will find the output like this.
After the first and the second div the span tags are aligned in the same line. When we move to CSS then I will show you the difference between them perfectly.
Comments:
Comments are generally used to remember something when we refer later. For example you have written some 1000 lines of code and after some days you thought of changing a particular part of the code in this kind of situations you can write a small comment for you for your later reference to the code. In HTML comments are written like this <!--Your comment goes here --> . When you build a real time application then you will clearly understand about the importance of comments.
Forms:
To interact with the user and to get the inputs from them forms are like interfaces between the user and the server. By using form we will take the inputs from the user and process the functionalities of the website accordingly using PHP and other languages. Let’s have glimpse on the form elements we have in HTML.
We write the forms in the following way in HTML.
<!Doctype html>
<html>
<head></head>
<body>
<form>
<div>TextBox:</div>
<input type=”text” />
<div>Password Field</div>
<input type=”password” />
<div>Check Box</div>
<input type=”checkbox” />
<div>Radio Buttons</div>
<input type=”radio” />
<div>I am Button</div>
<input type=”button” value=”button” />
<div>I am Button of type submit</div>
<input type=”submit” />
</form>
</body>
</html>
Copy and paste the code in the code editor and save it and preview in your browser.
Let’s explain about each type of input elements inside form. <input type=”text” /> is a text field which allow you to enter simple plain text. <input type=”password” /> it hides the text and make it into password dots you can type and see in your browser. You pretty much know about radio and checkboxes. Buttons and submit types are similar in terms of HTML but when we try to add PHP they make a difference I will explain you at that time.
This is it we have almost finished with HTML part when we start with CSS we will be covering more. Here I suggest you to look back once and remember the tags we have learnt from the past 4 days.
Okay, guys thanks for following this series. Stay tuned to learn more. See you tomorrow.
No comments:
Post a Comment