DEV Community

Ranjith srt
Ranjith srt

Posted on • Edited on

MERN - Html (Day 4) 

1. List Tags in HTML
Enter fullscreen mode Exit fullscreen mode

provides three types of lists:

 ✅ Unordered List (<ul>)
Enter fullscreen mode Exit fullscreen mode

- Items are displayed with bullets().
- Types: disc (default), circle, square, none.


<ul style="list-style-type: square;">
    <li>Item 1</li>
    <li>Item 2</li>
</ul>
Enter fullscreen mode Exit fullscreen mode 
✅ **Ordered List (`<ol>`)**
Enter fullscreen mode Exit fullscreen mode 
- Items are displayed in **numbers or letters**.
- Types: `1`, `A`, `a`, `I`, `i`.
Enter fullscreen mode Exit fullscreen mode 

<ol type="I">
    <li>Item 1</li>
    <li>Item 2</li>
</ol>
Enter fullscreen mode Exit fullscreen mode 
 ✅ **Description List (`<dl>`)**
Enter fullscreen mode Exit fullscreen mode

- Used for **terms and their descriptions**.


<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
</dl>
Enter fullscreen mode Exit fullscreen mode 
 ✅ **Nested List**
Enter fullscreen mode Exit fullscreen mode

Lists inside another list.

 <ul>
    <li>Tea
        <ul>
            <li>Black Tea</li>
            <li>Green Tea</li>
        </ul>
    </li>
</ul>
Enter fullscreen mode Exit fullscreen mode

Image description

🎨 **2. Colors in HTML**
Enter fullscreen mode Exit fullscreen mode

HTML provides different ways to define **colors**:

✅ **Named Colors**
Enter fullscreen mode Exit fullscreen mode 

<p style="color: red;">This is Red</p>
Enter fullscreen mode Exit fullscreen mode 
 ✅ **Hex Colors (`#RRGGBB`)**
Enter fullscreen mode Exit fullscreen mode 

<p style="color: #ff0000;">This is Red</p>
Enter fullscreen mode Exit fullscreen mode 
 ✅ **RGB Colors (`rgb(r, g, b)`)**
Enter fullscreen mode Exit fullscreen mode 

<p style="color: rgb(255, 0, 0);">This is Red</p>
Enter fullscreen mode Exit fullscreen mode 
 ✅ **RGBA Colors (`rgba(r, g, b, alpha)`)**
Enter fullscreen mode Exit fullscreen mode 

<p style="color: rgba(255, 0, 0, 0.5);">This is Semi-Transparent Red</p>
Enter fullscreen mode Exit fullscreen mode 
 **HSL Colors (`hsl(hue, saturation, lightness)`)**
Enter fullscreen mode Exit fullscreen mode 
<p style="color: hsl(0, 100%, 50%);">This is Red</p>
Enter fullscreen mode Exit fullscreen mode 
✅ **HSLA Colors (`hsla(h, s, l, a)`)**
Enter fullscreen mode Exit fullscreen mode 

<p style="color: hsla(0, 100%, 50%, 0.5);">This is Semi-Transparent Red</p>
Enter fullscreen mode Exit fullscreen mode

Image description

🔗 **3. Anchor (`<a>`) Tag in HTML**
Enter fullscreen mode Exit fullscreen mode 
✅ **Basic Link**
Enter fullscreen mode Exit fullscreen mode 
 <a href="https://www.google.com">Visit Google</a>
Enter fullscreen mode Exit fullscreen mode 
 ✅ **Open Link in a New Tab (`target="_blank"`)**
Enter fullscreen mode Exit fullscreen mode 
 <a href="https://www.google.com" target="_blank">Open Google in New Tab</a>
Enter fullscreen mode Exit fullscreen mode 
✅ **Internal Link (Same Website Page)**
Enter fullscreen mode Exit fullscreen mode 
 <a href="about.html">Go to About Page</a>
Enter fullscreen mode Exit fullscreen mode 
✅ **Email Link (`mailto:`)**
Enter fullscreen mode Exit fullscreen mode 
 <a href="mailto:example@gmail.com">Send Email</a>
Enter fullscreen mode Exit fullscreen mode 
✅ **Call Phone Number (`tel:`)**
Enter fullscreen mode Exit fullscreen mode 

<a href="tel:+1234567890">Call Us</a>
Enter fullscreen mode Exit fullscreen mode 
 ✅ **Download File (`download`)**
Enter fullscreen mode Exit fullscreen mode 

<a href="file.pdf" download>Download File</a>
Enter fullscreen mode Exit fullscreen mode

Image description

### 🏹 **4. `target` Attribute in `<a>` Tag**
Enter fullscreen mode Exit fullscreen mode
target Value Description
_self Opens in same tab (default).
_blank Opens in new tab.
_parent Opens in parent frame (if inside an iframe).
_top Opens in full browser window, removing frames.
framename Opens inside a specific iframe. 
### ✅ **Example: Open Link in a New Tab**
Enter fullscreen mode Exit fullscreen mode 

<a href="https://www.google.com" target="_blank">Open in New Tab</a>
Enter fullscreen mode Exit fullscreen mode 
### 🎵 **5. Audio & Video in HTML**
Enter fullscreen mode Exit fullscreen mode 
### ✅ **Audio Tag**
Enter fullscreen mode Exit fullscreen mode 
 <audio controls>
    <source src="audio-file.mp3" type="audio/mpeg">
    Your browser does not support the audio tag.
</audio>
Enter fullscreen mode Exit fullscreen mode 
✅ **Video Tag**
Enter fullscreen mode Exit fullscreen mode 
 <video width="560" height="315" controls>
    <source src="video-file.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>
Enter fullscreen mode Exit fullscreen mode 
### **HTML Images**
Enter fullscreen mode Exit fullscreen mode

The <img> tag is used to display images.

### ****✅ **Basic Image**
Enter fullscreen mode Exit fullscreen mode 

<img src="image.jpg" alt="A beautiful scenery">
Enter fullscreen mode Exit fullscreen mode 
🔹 **`src`** → Specifies the image file location.

🔹 **`alt`** → Alternative text (shown if the image fails to load).
Enter fullscreen mode Exit fullscreen mode 
### ✅ **Displaying an Online Image:**
Enter fullscreen mode Exit fullscreen mode 

<img src="https://example.com/image.jpg" alt="Example Image">
Enter fullscreen mode Exit fullscreen mode 
### ✅ **Image with Width & Height**
Enter fullscreen mode Exit fullscreen mode 
 <img src="image.jpg" width="300" height="200" alt="Image">
Enter fullscreen mode Exit fullscreen mode 
### ✅ **Image with Title (Hover Text)**
Enter fullscreen mode Exit fullscreen mode 
 <img src="image.jpg" title="This is an image" alt="Image">
Enter fullscreen mode Exit fullscreen mode 

### ✅ **Responsive Image (`max-width`)**
Enter fullscreen mode Exit fullscreen mode 
 <img src="image.jpg" style="max-width: 100%; height: auto;" alt="Responsive Image">
Enter fullscreen mode Exit fullscreen mode 
### ✅ **Clickable Image (Wrapped in `<a>`)**
Enter fullscreen mode Exit fullscreen mode 

<a href="https://www.google.com">
    <img src="google-logo.png" width="200" alt="Google Logo">
</a>
Enter fullscreen mode Exit fullscreen mode 
### ✅ **Lazy Loading Image (`loading="lazy"`)**
Enter fullscreen mode Exit fullscreen mode 
 <img src="image.jpg" loading="lazy" alt="Lazy Load Image">
Enter fullscreen mode Exit fullscreen mode
Enter fullscreen mode Exit fullscreen mode

📌 Image Attributes in HTML
Enter fullscreen mode Exit fullscreen mode
Attribute Description
src Specifies the image file path.
alt Alternative text (shown if image fails to load).
width Sets the image width.
height Sets the image height.
title Adds a tooltip when hovered.
loading lazy (loads when visible) or eager (loads immediately).

Image description

🎯 **Final Notes**
Enter fullscreen mode Exit fullscreen mode 
- Lists: `<ul>`, `<ol>`, `<dl>` for different types of lists.
- Colors: `named`, `hex`, `RGB`, `RGBA`, `HSL`, `HSLA`.
- `<a>` tag: Used for **links, email, phone, downloads**.
- `target` attribute: `_self`, `_blank`, `_parent`, `_top`.++
- `<audio>` & `<video>` for **media elements**.
Enter fullscreen mode Exit fullscreen mode

Top comments (0)