DAY 1 OF HTML

Today marks the beginning of my journey into web development, and I started with the foundation: HTML (HyperText Markup Language). Here's a recap of what I learned today:

---

🧱 HTML Structure and Elements

An HTML element is composed of:

• An opening tag
• Content
• A closing tag

Example:

<p>This is a paragraph.</p>
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Section Title</h3>
<h4>Sub-section</h4>
<h5>Minor Heading</h5>
<h6>Smallest Heading</h6>

✍️ Formatting Text

I explored basic formatting tags:

• <strong> — bold and important text
• <i> — italicized text
• <br> — line break
• <mark> — highlighted text
• <del> — strikethrough (deleted) text

Example:

<p>This is <strong>bold</strong>, <i>italic</i>, and <mark>highlighted</mark> text.<br>
This word is <del>deleted</del>.</p>

🔗 Hyperlinks and Attributes

The <a> tag is used for hyperlinks. It includes attributes like:

• href — specifies the destination URL or file
• target — specifies where the link opens

Target values:

• _blank → open in new tab
• _self → open in same tab
• _parent / _top → used in framesets

Example:

<a href="https://example.com" target="_blank">Visit Example</a>

📁 File Paths

I learned the difference between absolute and relative file paths:

Absolute Path

Gives the full URL or location of a file:

<a href="https://example.com/images/photo.jpg">View Image</a>

Relative Path

Specifies a file's location relative to the current document:

<!-- Same directory -->
<img src="photo.jpg">

<!-- Subdirectory -->
<img src="images/photo.jpg">

<!-- Parent directory -->
<img src="../photo.jpg">

🖼️ Images in HTML

The <img> tag embeds images and includes:

• src — path to the image
• alt — alternative text (for accessibility and fallback)
• width and height — controls image size (px or %)

Example:

<img src="cat.jpg" alt="Cute Cat" width="300" height="200">

Image as a Link

Wrap the image in an <a> tag to make it clickable:

<a href="https://example.com">
  <img src="logo.png" alt="Clickable Logo">
</a>