HTML Basic Tags for Beginner Developers
If you want to start your career in Web Development than you are on the right place Just Read our Blog which might be great help for you.
HTML
HTML ~ Hypertext Markup Language.
Why We Use HTML ?
HTML is the foundation of the Website.
Like i think you know while building a house at first the digging is done and pillars are made then walls and this is HTML which work as the foundation of the website.
Extension in HTML
We use .html or .htm extension to save our file ex: index.html
Rules in HTML
- Tags are always surrounded by angle brackets (less-than/greater-than characters), as in
<HEAD>. - Most tags come in pairs and surround the material they affect. They work like a light switch: the first tag turns the action on, and the second turns it off. (There are some exceptions. For instance, the
<BR>tag creates a blank line and doesn’t have an “off switch.” Once you’ve made a line break, you can’t unmake it.) - The second tag–the “off switch”–always starts with a forward slash. For example, you turn on bold with
<B>, shout your piece, and then go back to regular text with</B>. - First tag on, last tag off. Tags are embedded, so when you start a tag within another tag, you have to close that inner tag before closing the outer tag.
For instance, the page will not display properly with the tags in this order:
<HEAD><TITLE>Your text</HEAD></TITLE>
The correct order is:
<HEAD><TITLE>Your text</TITLE></HEAD>
Boiler Plate in HTML
- If you are in School then Code like this
<html> <head> <title>This is Your Title</title> </head> <body> Everything You Write Here Will Be Displayed in the Screen. </body> </html>
If you are a Developer download Vs Code Right Now
Download Visual Studio Code
Visual Studio Code Provides you the best environment to Code you don't even have to remember each codes just type the first letter choose the Option which is called Emmet. So Download Visual Studio Code and Code like a Developer and Save Your Time
In the Vs Code for Boiler Plate Just Type ! Boiler plate will appear itself.
Tags in HTML
<h1>This is Heading</h1>
<h2>This is Heading</h2>
<h3>This is Heading</h3>
<h4>This is Heading</h4>
<h5>This is Heading</h5>
<h6>This is Heading </h6>
These are the heading tag in which the font-size of h1 is larger and gradually from h1 till h6 the font size is decreased so, the heading tag having smallest font-size is h6.
<p></p> tag
It is the tag which allows us to add paragraph in the page.
<p>This is a Paragraph</p>
<b></b> tag
It is the tag which is used to make the text bold. just add the text between the <b></b> tag to make it bold.
<I></I> tag
It is the tag which is used to make the text bold. just add the text between the <b></b> tag to make it bold.
<span></span> tag
span is the tag which is used to specify a certain element inside the tag.
example: <p>This is a Paragraph,<span>Right</span></p>
<br> tag
<br> is the tag which is used to break the line it doesn't have closing tag so you can just write
from were you want to new line.
<a href=""></a> tag
<a href="">This is your link</a> is used to add links in your HTML page.
<link rel="" href=""> tag
<link rel="" href=""> is a tag which allows you to add stylesheets, favicons [Favicon is the icon which appear with the title in the browser navbar] etc. & It is written inside <head></head> tag below the <title></title> tag.
Example:
<head>
//to add stylesheet
<link rel="stylesheet" href="styles.css">
//to add favicon
<link rel="icon" type="image/x-icon" href="imageaddress/imagename.png/jpg/jpeg">
</head>
<video><source src="" type=""></video> tag
Video tag is used to add video in the HTML Page Example:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<img src="">tag
This tag is used to add image in the HTML page Example:
<img src="xyz.jpg" alt="This is Cover" width="1920px" height="1080px">
<div></div> tag
this tag is used to group the elements and divide and also allows to add class and id. Example:
<div class="group-1">
<h1>This is Heading Group</h1>
<h2>This is heading Group</h2>
<h3>This is heading Group</h3>
<h4>This is heading Group</h4>
<h5>This is heading Group</h5>
<h6>This is heading Group</h6>
</div>
<!-- The Elements are Grouped -->
<div class="group-2">
<p>This is a Paragraph</p>
<a href="#">This is a link</a>
</div>
<ul><li></li></ul> tag & <ol> <li></li></ol> tag
These are the tag which is Used to List elements like
ul ~ Unordered List
<ul type="disc">
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ul>
- List 1
- List 2
- List 3
ol ~ Ordered List
<ol type="1">
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ol>
- List 1
- List 2
- List 3
<form action=""></form> tag
This is a tag which is used to create a form
- to create a field in a form again add
<input type="">tag it's type you can add anything if you want Password than addtype="password", if text then addtype="text"
<style></style tag
This is a tag in which you can add an stylesheet in the current page you are coding
<style>
body {
background-color:blue;
}
</style>
<script src=""><script> tag
This tag is used to link script like javascript
<script src="script.js"></script>
<script></script> tag
<script>
console.log('Hello World');
</script>
This tag can be used to add embedded Javascript in the page
Now Do this Projects
- Make a HTML Page in which add header "Code to Learn" and add paragraph "anything you like" then make a unordered list and add the list of languages like HTML, CSS, javascript then add beautiful photo and add video and last in the page Make a form with Name and age field.
NoteYou have to do all these things in the same page.