Table of contents
No headings in the article.
Hi everyone !
In this article, we are going to have a quick guide to get started with HTML. HTML is Hyper Text Markup Language which consists of tags. It is a case-sensitive language that is used to write the skeleton of a webpage. Extension used for HTML files is .html
Visual studio code text editor is the one which you could use to get started with HTML.
Below is the boilerplate code of HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
This code can also be generated in VS Code by typing the exclamatory sign (!) and hitting the enter key.
- <!DOCTYPE html> tells the type of document and tells the browser that is an HTML file.
- HTML tag: It is the root tag of HTML which contains all the HTML tags.
- HEAD tag: It consists of the title of the document and consists of meta tags which consists of webpage author name, the character set used in the document, and other information which helps in Search Engine Optimization (SEO).
- BODY tag: It consists of all the tags and details to form the basic structure of a webpage.
Let's discuss most commonly used tags in HTML:
Heading tag : HTML provides six different heading sizes varying from 1-6. 1 is the largest heading and has the highest priority in SEO whereas 6 has the least priority.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
paragraph tag : It allows to write the content in a paragraph. break tag : It is used to give new line in the content in HTML. By default HTML do not consider any of the spaces. horizontal rule : It is used to give a horizontal line on the webpage. div tag : It is used to provide block level container in the webpage. It is also used to define separate containers for header, footer , main section. span tag : It is used to target individual element and is iniline tag. It helps in styling of the webpage.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- Paragraph tag -->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam numquam animi perspiciatis in impedit quidem fuga voluptatem expedita accusamus facilis, veritatis atque odit laudantium distinctio maiores recusandae, sed deleniti saepe ipsa eveniet, similique enim ipsum. At iusto repudiandae, eveniet doloribus et fugiat eaque porro iste? Blanditiis ea alias sunt placeat.</p>
<!-- horizontal rule -->
<hr>
<!-- div and span -->
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.<br> Quaerat quia, facere <span>voluptatem ipsum</span> voluptates deleniti atque praesentium sunt amet quidem omnis veniam vel blanditiis neque reiciendis officia nam enim. Libero.</p>
</div>
</body>
</html>
strong tag: It helps in text bold. emphasis tag : It emphasis(italic the content) the content around it. mark tag: It highlights the text in between the tag. del tag: It strikes off the text in between the tag. subscript tag : It gives a subscript to the text that is it provides the text on the foot of the main text. superscript tag: It provides the text on the head of the main text. It is used in raise to the power.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- strong tag -->
<h2>strong tag</h2>
<p>Lorem, ipsum dolor sit <strong>amet consectetur</strong> adipisicing elit. Soluta, similique.</p>
<hr>
<!-- emphasis tag -->
<h2>emphasis tag</h2>
<p>Lorem, ipsum dolor sit <em>amet consectetur</em> adipisicing elit. Soluta, similique.</p>
<hr>
<!-- mark tag -->
<h2>mark tag</h2>
<p>Lorem, ipsum dolor sit <mark>amet consectetur</mark> adipisicing elit. Soluta, similique.</p>
<hr>
<!-- superscript tag -->
<h2>superscript tag</h2>
<p>5<sup>2</sup>=25</p>
<hr>
<!-- subscript tag -->
<h2>subscript tag</h2>
<p>H<sub>2</sub>O</p>
<hr>
</body>
</html>
Now We will learn hyperlink tag some media tags where we will learn how to add images, videos and audio.
hyperlink tag : Also, known as anchor tag. It helps in connecting different html files.
- href contains path of the link.
<a href = " " > link name </a>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hyperlinking</title>
</head>
<body>
<h2>We will provide a link to google</h2>
<a href="https://www.google.com">Google</a>
<hr>
<h2>We will link to another html file</h2>
<a href="./index.html">Going to index.html</a>
</body>
</html>
image tag: image tag allows us to to add image in the webpage.
src contains path of the image.
- alt* contains a text in in case URL of image is not correct than this text displays instead of an image.
<img src=" " alt=" " />
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Adding Image</title>
</head>
<body>
<h2>Adding image from direct URL.</h2>
<img src="https://images.pexels.com/photos/2900315/pexels-photo-2900315.jpeg?auto=compress&cs=tinysrgb&w=600" alt="ganeha image" width="300px">
<hr>
<h2>Adding image from the same folder</h2>
<img src="./nature.jpg" alt="nature image" width="300px">
</body>
</html>
video tag: HTML 5 consists of video tag to add an image in the webpage.
<video src = " " controls autoplay/>
or
<video controls width='500px'>
<source src=" " type="video/mp4">
</video>
src consists of video path
controls is an attribute to get video control options
autoplay is an attribute for video to get start automatically
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video</title>
</head>
<body>
<h2>Adding video with controls</h2>
<video src="./sushi.mp4" controls width="500px"></video>
<video controls width="500px">
<source src="./sushi.mp4" type="video/mp4">
</video>
</body>
</html>
iframe tag: It helps us to add anyother website contnet in our webpage. We basically use it to embed youtube videos, code sandboxes in our website. To add youtube video you need to search for embed button which you could find by clicking on share button of any youtube video.
Copy the all the content alongwith iframe tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Iframe</title>
</head>
<body>
<iframe width="560" height="315" src="https://www.youtube.com/embed/FyI97ULTgh0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</body>
</html>
audio tag : HTML 5 consists of audio tag to add an image in the webpage.
<audio src = " " controls />
src consists of audio path
controls is an attribute to get audio control options
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>audio</title>
</head>
<body>
<audio src="./audio_clip.mp3" controls></audio>
</body>
</html>
table tag : It allows us to add tables in webpage. Earlier, tables were also used for aligning the content.
<table>
<caption> </caption>
<tr>
<th> </th>
</tr>
<tr>
<td> </td>
</tr>
</table>
table tag is used to create a table
caption tag is used to provide a caption to the table
- table row tag
is used to create a row in table
is used to provide column heading is used to provide column data
- border is an attribute to provide borders to the table
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tables</title>
</head>
<body>
<h2>HTML Tables</h2>
<table border>
<caption>Student Data</caption>
<tr>
<th>Roll No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>Rahul</td>
<td>12</td>
</tr>
<tr>
<td>2</td>
<td>John</td>
<td>12</td>
</tr>
<tr>
<td>3</td>
<td>Sam</td>
<td>11</td>
</tr>
</table>
</body>
</html>
list tag : We have two types of list ordered list (in which numbering is provided) and another is unordered list (it uses symbols ) .
<ol>
<li> </li>
</ol>
<ul>
<li> </li>
</ul>
- tag is used for ordered list
- tag is used for unordered list
- tag is used for each list item within the list
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>list</title>
</head>
<body>
<h2>ordered list</h2>
<ol>
<li>apple</li>
<li>banana</li>
<li>mango</li>
</ol>
<h2>unordered list</h2>
<ul>
<li>Bread</li>
<li>Milk</li>
<li>Vegetables</li>
</ul>
</body>
</html>
Forms : Forms are important while creating webpages. We will see different input in the form using following mini project:
We create user and card details form in which we will learn how to add different kinds of input , radio buttons and to create a dropdown.
tag is used to create a form
tag is used to take different types of input(text, email, password, radio button, checkbox, number and many more)
- tag is used to create a dropdown and tag is used to add elements in the dropdown.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Forms</title>
</head>
<body>
<form action="">
<h2>User Details</h2>
<!-- label is used to give input box a name -->
<label for="fname">first name:</label>
<!-- input field for adding text -->
<input type="text" name="" id="fname"><br><br>
<label for="">last name:</label>
<input type="text" name="" id=""><br><br>
<!-- fieldset is used to provide a border against the radio buttons -->
<fieldset>
<!-- Legend is used to provide name within the box -->
<legend>
<label for="gender">Gender</label>
</legend>
<!-- radio buttons -->
<input type="radio" name="gen" value="Male" id="gender">Male
<input type="radio" name="gen" value="female" id="gender">Female
</fieldset><br><br>
<label for="email">email:</label>
<!-- input of type email -->
<input type="email" name="" id="email"><br><br>
<label for="pass">password</label>
<!-- input of type password -->
<input type="password" name="" id="pass"><br><br>
<label for="contact">Contact</label>
<!-- input of type number -->
<input type="number" name="" id="contact"><br><br>
<label for="address">address</label>
<!-- text area to add large content -->
<textarea name="" id="address" cols="30" rows="10"></textarea>
<hr>
<h2>Card Details</h2>
<label for="card-type">card type</label>
<!-- using select for dropdown -->
<select name="" id="card-type">
<option value="select">--select--</option>
<option value="visa">Visa</option>
<option value="rupay">Rupay</option>
<option value="master">Master</option>
</select><br><br>
<label for="card-number">card number</label>
<input type="number" name="" id="card-number"><br><br>
<label for="cvv">CVV</label>
<input type="password" name="" id="cvv"><br><br>
<!-- submit button -->
<button type="submit">Pay</button>
</form>
</body>
</html>
Thanks ! for reading
Do follow for more