Unveiling the Power of HTML: Building the Foundation of the Web
The key to success is consistency
In the big world of making websites, there's an important thing that's been shaping the online world since it started: HTML, the Hypertext Markup Language. HTML provides a fundamental framework for a website's layout. In this journey, we will explore and understand HTML.
Tags?
HTML operates through a system of tags, each with a specific purpose and functionality. These tags are enclosed within angle brackets ("<" and ">") and there are two types of tags -> opening tags ("<tag>") and closing tags ("</tag>").
There are two different kinds of tags. Inline tags & block tags. The main difference is that a block tag takes the full width which means after a block tag if we write another tag, that tag will be in a new line. Where two inline tags can be in the same line together.
Let's see the basic structure of HTML
<!DOCTYPE html>
<html>
<head>
<title>Basic Structure</title>
</head>
<body>
</body>
</html>
HTML has various types of tags. You don't have to remember all of them. Focus on the basics, and with practice, you'll pick up the rest. Let's learn some of the tags!
Paragraph Tag → <p> </p> <!-- use to write paragraphs -->
Bold Tag → <b> </b> <!-- bold text -->
Strong Tag → <strong> </strong> <!-- also bold but important text -->
Italic Tag → <i> </i> <!-- italic text -->
Emphasis Tag → <em> </em> <!-- italic but emphasising -->
Heading Tag→ <h1> </h1> <!-- headings from big to small -->
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6>
Small Tag → <small> </small> <!-- small text -->
Title Tag → <title> </title> <!-- shows in the title bar -->
Anchor Tag → <a href="websitelink.com">Website</a>
Image Tag → <img src="image-path"> <!-- image has no end tag! -->
Button Tag → <button> Click here </button>
Break Tag → </br> <!-- takes to new line -->
List Tag →
→ Ordered List:
<ol type="1"> <!-- type can be 1/A/a/i -->
<li> first item </li>
</ol>
→ Unordered List:
<ul type="square"> <!-- type = disc/circle/square/none -->
<li> first item </li>
</ul>
<!-- There are many inbuilt input tags -->
Input Tags →
- Text → <input type="text">
- Password → <input type="password"> <!-- using this will show the password as * -->
- CheckBox → <input type="checkbox">
- DateTime →<input type="datetime">
- Email → <input type="email">
- File → <input type="file">
- Submit → <input type="submit">
Attributes
Other than tags there's also something called attributes which is used inside the tag element.
<input type="text">
<img src="image_path" alt="describe_img">
Here type & alt is an attribute. To know more about the attributes follow this website.
Anchor Tag
<a href=”your_website_link” target="_blank"> click here </a>
Anchoring will work in different ways for the value of the target.
_blank → Opens the linked document in a new window or tab
_self, → Opens the linked document in the same frame as it was clicked (this is the default)
_top → “breaks out of all frames” and opens the linked document in the entire browser window
_parent → refers to the frameset that is the parent of the current frame
Favicon
<link rel="shortcut icon" href="your_icon_path" type="image/x-icon">
this will add an icon on the left side of the tab.
Form
Let's see a basic form
<form>
<h1>Login Form</h1>
<input type="email" placeholder="Your Email">
<br>
<input type="password" placeholder="Your Password">
<br>
<input type="submit" value="Login">
</form>
Tables
Tables are also used more often to display data. Making a table in HTML is straightforward. To set up rows, you use <tr> </tr>, which stands for table row, and for the data within the rows, you use <td> </td>, representing table column. Tables also feature titles or headings that can be specified using <th> </th>.
<!DOCTYPE html>
<html>
<head>
<title> Our First Table </title>
<style> <!-- this is CSS, we'll learn about this later! -->
table,th,td {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>The table element</h1>
<table>
<tr> <!-- first row ~ contains all the headings -->
<th>Month</th>
<th>Savings</th>
</tr>
<tr> <!-- second row ~ Data sets -->
<td>January</td>
<td>$100</td>
</tr>
<tr> <!-- thirs row ~ Data sets -->
<td>February</td>
<td>$80</td>
</tr>
</table>
</body>
</html>
There are also some other tags that are used rarely.
To show Date & Time → <time datetime="15-08-2023">15 August, 2023</time>
To write in invert → <h1><bdo dir="rtl">bangladesh</bdo></h1>
Power & Base → <h1>Log<sup>2</sup>n</h1> <!-- used to write math equation -->
<h1>H<sub>2</sub>O</h1>
Abbreviation Tag → <h2> <abbr title="bangladesh">country</abbr></h2> <!-- title will show on mouse hover -->
Details Tag →
<details> <!-- this will make a drop down details section -->
<summary>Contact US</summary>
<p>Khilgaon, Dhaka</p>
<p>1219, Bangladesh</p>
</details>
Progress Bar
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<label for="disk">Progress</label>
<meter id="disk" value="0.8"></meter>
<br>
<label for="file">Downloading progress:</label>
<progress id="file" value="32" max="100"> 32% </progress>
</body>
</html>
Download
<a href="image_path.jpg" download="New_File_Name">Download the image!</a>
Clicking on the anchor text it will start downloading the image.
If you're interested in learning more about HTML, I'll provide some additional resources here.
HTML Tags: W3Schools, javaTpoint
HTML Attributes: W3Schools, MDN
Here are some excellent learning platforms:
MDN Web Docs - HTML Basics: MDN Web Docs
W3Schools - HTML Tutorial: W3Schools HTML Tutorial
freeCodeCamp - HTML and HTML5 Course: freeCodeCamp HTML Course
Codecademy - Learn HTML: Codecademy HTML Course
Coursera - HTML, CSS, and JavaScript for Web Developers: Coursera Course
