HTML Basics

As a part of my journey for milestone DevOps, I decided to dive into the world of web development!Let’s break it down in a fun and easy way!
1. The Must-Know Tags: Basics First!
HTML uses tags to structure content.

• <br> – Adds a line break.
• <hr> – Insert a horizontal line.
• <pre> – Preserves formatting and spaces.
• <a> – Creates a hyperlink (e.g., <a href=’https://www.w3schools.com’>Visit W3Schools</a>).
• <p> – Defines a paragraph, and it can have inline styling like <p style=’color:red;’>This is red text</p>.

2. Formatting Text
Here are some handy HTML formatting tags:

• <b> – Bold text.
• <strong> – Important text (same as bold, but with meaning!).
• <i> – Italic text.
• <em> – Emphasized text (similar to italic but with importance).
• <mark> – Highlights text.
• <small> – Makes text smaller.
• <del> – Strikes through text (like this: deleted).
• <ins> – Underlines inserted text.
• <sub> & <sup> – Creates subscript (H₂O) and superscript (x²).

3. Quotations and Citations
Ever wanted to quote something properly? HTML has got you covered:

• <blockquote> – Indents a block of text as a quote.
• <q> – Puts quotation marks around inline text.
• <cite> – Defines the title of a work.
• <bdo> – Reverses text direction (e.g., <bdo dir=’rtl’>This is reversed!</bdo>).

4. Adding Links: The Magic of <a>
Hyperlinks connect the web! Here’s how to use them:

• <a href=’URL’>Click here</a> – The basic link.
• target=’_blank’ – Opens the link in a new tab.
• mailto: – Creates an email link (<a href=’mailto:someone@example.com’>Email Me</a>).

You can even turn a button into a link:
<button onclick=”document.location=’default.asp'”>HTML Tutorial</button>

5. Styling Links with CSS
Links don’t have to be boring! Add some style:
a:link { color: green; }
a:visited { color: pink; }
a:hover { color: red; }
a:active { color: yellow; }
<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}

a:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}

a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}

a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
</style>

6. Images: Because Visuals Matter
You can add images using:
<img src=’image.jpg’ alt=’Description’ width=’500′ height=’300′>
Want to make an image a link? To use an image as a link, put the <img> tag inside the <a> tag
<a href=’index.html’><img src=’button.jpg’ alt=’Go Home’></a>
Want an interactive image map? Use the <map> and <area> tags!
The HTML <map> tag defines an image map. An image map is an image with clickable areas. The areas are defined with one or more <area> tags.
<img src=”workplace.jpg” alt=”Workplace” usemap=”#workmap”>
<map name=”workmap”>
<area shape=”rect” coords=”34,44,270,350″ alt=”Computer” href=”computer.htm”>
<area shape=”rect” coords=”290,172,333,250″ alt=”Phone” href=”phone.htm”>
<area shape=”circle” coords=”337,300,44″ alt=”Coffee” href=”coffee.htm”>
</map>

7. Lists: Ordered, Unordered & Descriptions
HTML makes organizing content easy:

8. Forms & Inputs: Getting User Data
Want to collect user input? HTML forms are the way to go:
<form>
<label for=’name’>Name:</label>
<input type=’text’ id=’name’ name=’name’>
<button type=’submit’>Submit</button>
</form>

9. Sections & Navigation
Use <section> to organize content and <nav> to create navigation menus:
<nav>
<a href=’#home’>Home</a>
<a href=’#about’>About</a>
</nav>

Wrapping Up!
This is not everything about the basics of HTML, but this is enough to get me started on CSS, and I will return to HTML i.e HTML Advanced, throughout my journey.
./See you soon…
Source: hashnode.com