HTML Coding | Basics Of HTML | Learn In One Hour

Hello guys, welcome back to my blog. In this article, I will discuss HTML Coding Basics Of HTML, introduction to HTML, applications of HTML, how to make a table in HTML, types of tags used in HTML. Each and everything I will try to explain in a simple way.
 
You can also catch me @ Instagram – Chetan Shidling. If you want an article on some other topics then comment us below in the comment section.
 

HTML

HTML Coding | Basics Of HTML | Learn In One Hour
 
The HTML stands for a hypertext markup language. The HTML is a standard markup language that is used for creating web applications. The websites which you daily see in google are made with HTML and CSS. In this article, I will discuss both HTML and CSS, how to use it practically I will show you.
 
The HTML is all about tags, there are n numbers of tags for a particular purpose. If you want to add title then there is a title tag, if you want to add an image then there is an image tag, if you want to add an audio then there is an audio tag. Everything is on tags. You should only know which tag to use.
 
The tags will specify the categories of content that are identified by the browser. The tag name is surrounded by angle brackets. The tag used as an opening tag and closing tag. The opening tag uses the tag name in angle brackets.
 
For example:   <tag name>
 
The basic tags of HTML are:
 
01. <body> Inside body tag, you can add anything like a paragraph, image, audio.
02. <img> to add image
03. <head> Inside head tag, the title tag is used to add title.
04. <link> to add any link of website this tag is used.
05. <title> to add a title this tag is used.
 
Now, I will show you how to add title and head using tags.

HTML Code

<!doctype html>  #decleration for html
<html>
<head><title> Chetan Shidling </title></head>

# The title of this code is Chetan shidling as you can see in the below image.

<body> #Under body tag we will write everything

<h1> Like </h1>
<h2> share </h2>
<h3> Comment </h3>
<h4> And </h4>
<h5> Subscribe to </h5>
<h6> My YouTube Channel </h6>

</body> #Close body tag
</html> #Close html tag

This code is executed in Notepad ++ 

HTML Coding | Basics Of HTML | Learn In One Hour

Save code: Example – name.html



Output:

HTML Coding | Basics Of HTML | Learn In One Hour

Now, I will show you how to add a paragraph in HTML using a paragraph tag.

How to add a Paragraph

<!doctype html>
<html>
<head><title> Chetan Shidling </title></head>
<body>

<h1> Like </h1>
<h2> share </h2>
<h3> Comment </h3>
<h4> And </h4>
<h5> Subscribe to </h5>
<h6> My YouTube Channel </h6>

<p> If you want an article on some other topics then comment us below in the comment section </p>
<p> You should follow me on other social media’s like YouTube, Instagram, Facebook to gain more knowledge </p>
<p> Please share this article with your friends </p>

# <p> is the paragraph tag i.e., opening tag.
# </p> is the closing tag for paragraph.

</body>

</html>

This code is executed in Notepad ++

HTML Coding | Basics Of HTML | Learn In One Hour



Output:

HTML Coding | Basics Of HTML | Learn In One Hour



Now I will show you how to add the image in HTML using an image tag.

How to add an Image


<!doctype html>
<html>
<head><title> Chetan Shidling </title></head>
<body>

<h1> Like </h1>
<h2> share </h2>
<h3> Comment </h3>
<h4> And </h4>
<h5> Subscribe to </h5>
<h6> My YouTube Channel </h6>

<p> If you want an article on some other topics then comment us below in the comment section </p>
<p> You should follow us in other social media’s like YouTube, Instagram, Facebook to gain more knowledge </p>
<p> Please share this article with your friends </p>

<img src=”chetanshidling.png” height=”400″ width=”600″>

</body>

</html>

<img tag is used to add an image. If you want to adjust the height and width then include the height and width of the image.

This code is executed in Notepad++

HTML Coding | Basics Of HTML | Learn In One Hour

The src(source code file) is the attribute where you should add the location or address of the image. If you don’t add proper address then the image i will not get displayed.

How to copy the address of the image.

HTML Coding | Basics Of HTML | Learn In One Hour

Copy the file name and paste in HTML code.

Output:

HTML Coding | Basics Of HTML | Learn In One Hour



Added another image.

HTML Coding | Basics Of HTML | Learn In One Hour

Similarly, you can add video and audio by using video and audio tags.

<img src=”chetanshidling.png” height=”400″ width=”600″>

<video
<audio

Guys, remember one thing that the HTML is all about the tags. The only thing is that we should know which tag to use, Bala Bala.

Now, I will show you how to create a table in HTML using table tags.

How to create Table

<!doctype html>
<html>
<head><title> Chetan Shidling </title></head>
<body>

<h1> Mark Sheet </h1>
<table border =”1″>
<tr>
<th> Analog </th>
<th> Digital </th>
<th> Power </th>
</tr>

//Chetan Shidling<br>

<tr>
<td> 34 </td>
<td> 55 </td>
<td> 78 </td>
</tr>

<tr>
<td> 78 </td>
<td> 34 </td>
<td> 87 </td>
</tr>

<br>//CS Electrical and Electronics<br>

<tr>
<td> 12 </td>
<td> 87 </td>
<td> 23 </td>
</tr>

</body>
</html>

01. To give the header name as Mark Sheet i am using <h1> tag.
02. To give border to the table i am use table border tag – <table border =”1″>
03. <tr> tag is used to add a name or number in a row.

04. <th> tag is used to add a head name in the table.
05. <td> tag is used to add a decimal number in the table.

This code is executed in Notepad ++

HTML Coding | Basics Of HTML | Learn In One Hour


Output:

HTML Coding | Basics Of HTML | Learn In One Hour

Also, read top programming languages to learn for engineers.

And then continue reading HTML Coding Basics Of HTML. Now I will show you how to use CSS in HTML

CSS stands for Cascading Style Sheets. The CSS is used to add style like color in HTML code.

The CSS is classified as:

01. Inline CSS
02. Internal CSS
03. External CSS

01. Inline CSS

<!doctype html>
<html>
<head><title> Chetan Shidling </title></head>
<body>

<h1> CSS </h1>

<p style=”Color:red;”>Chetan Shidling</p>

</body>
</html>

 
I am adding a red color to Chetan Shidling.
 
HTML Coding | Basics Of HTML | Learn In One Hour
 
 
Output: 
 
 
HTML Coding | Basics Of HTML | Learn In One Hour
 
 
 
02. Internal CSS
 
<!doctype html>
<html>
<head><title> Chetan Shidling </title></head>
<style>
p{color:red;}  #p means i am are giving color to paragraph
</style>
<body>
 
<h1> CSS </h1>
 
<p> Chetan Shidling</p>
<p> Red color is added </p>
<p> Guys subsrcibe to my YouTube Channel </p>
</body>
</html>
 
In internal CSS the color code is declared above body tag using style tag as you can see in the above code.
 
Code execution in Notepad++
 
HTML Coding | Basics Of HTML | Learn In One Hour
 
 
Output:
 
HTML Coding | Basics Of HTML | Learn In One Hour
 
 
03. External CSS

<!doctype html>
<html>
<head><title> Chetan Shidling </title></head>
<link rel=”stylesheet” href=”css01.css”>
 
<body>
 
<h1> CSS </h1>
 
<p> Chetan Shidling</p>
<p> Red color is added </p>
<p> Guys subsrcibe to my YouTube Channel </p>
</body>
</html>
 
First, create separate file for CSS,
 
p{color:green;}
 
Type this in Notepad++ and save it as name.css then add this file name in main code which i mentioned above
 
<link rel=”stylesheet” href=”css01.css”>
 
css01 is a filename.
 
How to create a CSS file
 
HTML Coding | Basics Of HTML | Learn In One Hour
 
 
Main code 
 
HTML Coding | Basics Of HTML | Learn In One Hour
 
 
Output:
 
HTML Coding | Basics Of HTML | Learn In One Hour
 
 
Guys, this how HTML coding is done. HTML coding is very easy, the only thing is that you should use proper tags.
 
Guys, for more updates you can follow me on Instagram and YouTube.
 
I hope this article may help you all a lot. Thank you for reading. I think now you are clear with HTML Coding Basics Of HTML.

Read more

Leave a Reply

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