html Marquee tag, html css, html css tutorial for beginners, html css full course

on

HTML mein `<marquee>` tag ka use text ya images ko scrolling effect dene ke liye kiya jata tha. Yeh tag ab obsolete (purana aur discourage) mana jata hai aur modern web development practices mein use nahi kiya jata. Instead, CSS aur JavaScript ka use karke similar effects achieve kiye jate hain.

Phir bhi, educational purpose ke liye `<marquee>` tag ka syntax aur example diya ja raha hai:

```html
<!DOCTYPE html>
<html>
<head>
    <title>HTML Marquee Tag Example</title>
</head>
<body>
    <h1>HTML Marquee Example</h1>
    <marquee behavior="scroll" direction="left" scrollamount="5">
        This is a scrolling text!
    </marquee>
</body>
</html>
```

Attributes:
- `behavior`: Scrolling behavior specify karta hai (e.g., `scroll`, `slide`, `alternate`).
- `direction`: Scrolling direction specify karta hai (e.g., `left`, `right`, `up`, `down`).
- `scrollamount`: Scrolling speed specify karta hai.

Example with attributes:

```html
<!DOCTYPE html>
<html>
<head>
    <title>HTML Marquee Tag Example</title>
</head>
<body>
    <h1>HTML Marquee with Attributes</h1>
    <marquee behavior="alternate" direction="up" scrollamount="3">
        This text moves up and down!
    </marquee>
</body>
</html>
```

However, since `<marquee>` tag is obsolete, a CSS alternative is recommended. For example, using CSS animations:

```html
<!DOCTYPE html>
<html>
<head>
    <title>CSS Marquee Alternative</title>
    <style>
        .marquee {
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            box-sizing: border-box;
            animation: marquee 10s linear infinite;
        }
        @keyframes marquee {
            from { transform: translateX(100%); }
            to { transform: translateX(-100%); }
        }
    </style>
</head>
<body>
    <h1>CSS Marquee Alternative</h1>
    <div class="marquee">This is a scrolling text achieved with CSS!</div>
</body>
</html>
```

Is example mein CSS animations ka use karke marquee effect achieve kiya gaya hai, jo modern aur accessible web practices ko follow karta hai.

Comments

Post a Comment