HTML Basics

HTML basics a part of — Web Development Journey

As a part of my journey for milestone DevOps, I decided to dive into the world of web development first!

Let’s see what I learned so far and 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>html

6. Images:

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>

This is the area that becomes clickable and will send the user to the page “computer.htm”. Same for the coffee and phone.

7. Lists: Ordered, Unordered & Descriptions

• Ordered List (Numbered)
• <ol>
• <li>First Item</li>
• <li>Second Item</li>
• </ol>
• Unordered List (Bullets)
• <ul>
• <li>Item One</li>
• <li>Item Two</li>
• </ul>
• Description List (Definitions)
• <dl>
• <dt>HTML</dt>
• <dd>The standard markup language for web pages.</dd>
• </dl>

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.

Ref —

• https://www.w3schools.com/
• Dave Gray- HTML Full Course for Beginners https://www.youtube.com/watch?v=mJgBOIoGihA

./See you soon…