What is HTML? HTML is a....aah wait! Why should I tell you what HTML is and what are its components like the usual thousand of blogs available on the internet. We will know about HTML in some different way.
So let's ride on the time machine we will go to the past to know about the history of HTML. The first version of HTML was written by Tim Berners-Lee in 1993. Here I am saying "first version" because after 1993 there have been many different versions of HTML invented. When I am writing this blog HTML5 is being used by many developers. Now come to the present, we will learn What is HTML? For god's sake don't call it a programming language. No, it is not a programming language, it is a markup language.
But the main question arises Why do we use HTML?
And the answer is, we use HTML to build static websites it is the base of any website. It provides a basic structure of the website and ensures the proper formatting of text and images for your Internet browser, mainly it helps to display the data in a formatted manner.
Now we know What is HTML let's deep dive into it.
How website works?
If you host your website on a server and register a domain, then a user can access your website! They type your domain into the browser, which sends a request to your server. Then they can access the HTML code on the server and translate it into a web page that they can interact with.
Anatomy of HTML Tags.
Let's understand these one by one
Opening Tag - The opening tag is made up of the element’s symbol wrapped in angle brackets.
Closing Tag - The closing tag is made up of the element’s symbol preceded by a forward slash and wrapped in angle brackets.
Content- The text inside the tags.
Element- Combination of Opening tag, closing tag and content known as element.
Attribute
Attribute is used to set the behaviour of an HTML element.
Multimedia
Adding Images Want to insert Images in your website with the help of HTML?
Follow these steps Soldiers !
Adding images through local directory.
Let's take an example you want to add an image name "sample.jpg" and the image is in images subdirectory, which was inside the same directory as the HTML page, then you'd embed it like this:
<img src="images/sample.jpg">
(Here "src" means the source of the image)
Adding online Images
To add any online image in your site write this:
<img src="Your URL of Image">
Adding Videos
The <video> element helps to show video in website.
Let's take an example , the video which you want to add in your website named "video1.mp4". So you will embed like this:
<video>
<src="video1.mp4">
</video>
Adding audio
The process of embedding audio in website is same as embedding video:
<audio>
<src="audio1.mp3">
</audio>
HTML Tables
The HTML tables allow author to arrange their data inside cells of rows and columns.
<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<th>Name</th>
<th>Class</th>
<th>Roll number</th>
</tr>
<tr>
<td>Raju</td>
<td>9</td>
<td>01</td>
</tr>
<tr>
<td>Shyam</td>
<td>9</td>
<td>02</td>
</tr>
<tr>
<td>Baburao</td>
<td>9</td>
<td>03</td>
</tr>
</table>
</body>
</html>
Result:
Meaning of tags are:
<tr>: Table row
<th>: Table head
<td>: Table data
HTML List
HTML List help us to create list in website. We can create list in ordered way or in unordered way in HTML.
<!DOCTYPE html>
<html>
<body>
<h2>An Unordered HTML List</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ul>
<h2>An Ordered HTML List</h2>
<ol>
<li>Node</li>
<li>SQL</li>
<li>Django</li>
</ol>
</body>
</html>
Output:
Meaning of tags are:
<ol>: Ordered List
<ul>:Unordered List
<li>:List items
HTML Forms
HTML forms are used to create form inside website. It is mostly used to collect data from the user.
<!DOCTYPE html>
<html>
<body>
<h2>HTML Forms</h2>
<form>
Name<input type="text"><br>
Class<input type="text">
<input type="submit" value="Submit">
</form>
</body>
</html>
Output:
Some other input types:
Type Description
<input type="text"> Displays a single-line text input field
<input type="radio"> Displays a radio button (for selecting one of many choices)
<input type="checkbox"> Displays a checkbox (for selecting zero or more of many choices)
<input type="submit"> Displays a submit button (for submitting the form)
<input type="button"> Displays a clickable button
Refrences:
MDN DOCS, https://developer.mozilla.org/en-US/docs/Web/HTML
w3schools,https://www.w3schools.com/html/