A Introduction to HTML -- Beginners Guide
#iwritecode #learncodeonline #hiteshisawesome #fullstackjavascript #inueron
Table of contents
HTML 101 GUIDE
Hey guys welcome to my blog on HTML. You guys can go through this tutorial and get a sneak peak on HTML if you are a complete beginner. We all know that HTML and CSS are two main building block of any website that you see in todays world. Without learning HTML and CSS no-one can say that they are a website developer. Where HTML serves as the skeleton of a website, CSS on the other hand helps you to give your website the look and feel that you want to give. In this blog we will look at HTML code and how it works. We will not touch CSS in this blog how-ever if you interested in learning CSS , please Click Here
Every HTML file should be named as index.html as per convention. This is because index.html file is most easily detected by every server. However it is not necessary to do so, as you can configure you server accordingly as per the names you are giving
I would highly recommend you to use VSCODE editor to follow along with me. At the end of this article I would also introduce an extension to you which will help you to speed up your development process.
Now let's start learning the HTML tags one by one
Every HTML file has two parts
- Head Part
- Body Part
The head part is used for including the information about the Seo, Language of the website, Including fonts, Including some icons hosted on CDNs, For mobile views and most important linking your custom CSS and JS files
The body part contains the elements that are visible inside the browser body.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>This is title</title>
</head>
<body>
<!-- I am a comment -->
<!-- Heading tags -->
<h1>Heading One</h1>
<h2>Heading Two</h2>
<h3>Heading Three</h3>
<h4>Heading Four</h4>
<h5>Heading Five</h5>
<!-- Paragraph -->
<p>I am a paragraph</p>
<!-- Font formatting -->
<span><b>I am bold tag</b></span> <br />
<span><strong>Strong tag</strong></span> <br />
<span><i>Italics</i></span> <br />
<span><strike>999rs</strike>500</span> <br />
<!-- Including images videos and audio-->
<img
src="https://i.ytimg.com/vi/2md4HQNRqJA/hqdefault.jpg?sqp=-oaymwEXCOADEI4CSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLDLQOnqyHstaIfeMz3U44jtzIFGsw"
alt="this appears when link is broken"
/>
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/Kr-2KprTbc0"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
<br />
<audio src=""></audio><br />
<!-- Lists -->
<!-- Ordered Lists ol -->
<h1>Ordered Lists</h1>
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ol>
<!-- Ordered Lists ul -->
<h1>UnOrdered Lists</h1>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
<!-- Tables -->
<table border="2px">
<tr>
<td>S.No</td>
<td>Language</td>
<td>Rating</td>
</tr>
<tr>
<td>1</td>
<td>HTML</td>
<td>10</td>
</tr>
<tr>
<td>2</td>
<td>CSS</td>
<td>9.8</td>
</tr>
<tr>
<td>3</td>
<td>JS</td>
<td>10</td>
</tr>
</table>
<br />
<!-- Forms -->
<h5>Input Form</h5>
<br />
<form action="" method="get">
Enter name
<input type="text" name="" id="" /> <br />
Enter email
<input type="email" name="" id="" /><br />
Enter password
<input type="password" name="" id="" /><br />
Male <input type="radio" name="" id="" /> Female
<input type="radio" name="" id="" /> <br />
<button type="submit">Submit</button>
</form>
</body>
</html>
A few topics to explore on your own and learn the differences between them
- Inline Tags
- Block Tags
- Inline Block Tags
Here is one cool extension name which you might like to use . The name of the extension is Emmet. It will help you both in HTML and CSS.