HTML Visuals & Media
Web development sirf text likhne tak limited nahi hoti, aapko apne web page ko attractive aur interactive bhi banana hota hai. Iske liye HTML mein kaafi saare tags available hain jo colours, images, videos aur links add karne ke liye use hote hain.
Chaliye step-by-step in important HTML visuals & media concepts ko samjhte hain.
1. HTML Colours
HTML mein colours use karke aap apne page ka look and feel improve kar sakte ho. Colours ko define karne ke kai tareeke hain:
Colours Set Karne Ke Tareeke
- By Name
- Example:
red,blue,green - By HEX Code
- Example:
#ff0000(red) - By RGB Values
- Example:
rgb(255, 0, 0)(red)
Example:
<p style="color: red;">This is red text.</p>
<p style="color: #00ff00;">This is green text.</p>
<p style="color: rgb(0, 0, 255);">This is blue Text.</p>
2. HTML Links (Hyperlinks)
Hyperlink ek aisa element hai jo user ko ek page se dusre page par le jaata hai. HTML mein link banane ke liye <a> tag use hota hai.
Syntax:
<a href="https://beyondman.dev" target="_blank" title="Beyond Man">Visit Beyond Man</a>
📌 Attributes:
href→ Link ka URLtarget="_blank"→ Link new tab mein open hogatitle→ Title tab show hoga, jab link par hover hoga.
📌 Example:
<a href="https://google.com" target="_blank" title="Go to Google">
Visit Google
</a>
3. HTML Images
Web pages mein images dikhane ke liye <img> tag use hota hai. Ye ek self-closing tag hota hai.
Syntax:
<img src="image.jpg" alt="Description of image">
📌 Attributes:
src→ Image ka file path ya URLalt→ Image ka alternate text (SEO aur accessibility ke liye important)width&height→ Size define karne ke liye
Example:
<img src="mountains.jpg" alt="Beautiful mountains" width="300" height="200">
4. HTML Favicon
Favicon ek small icon hota hai jo browser tab ke title ke side mein dikhai deta hai. Iska use branding ke liye hota hai.
Example:
<head>
<title>My Website</title>
<link rel="icon" type="image/png" href="favicon.png">
</head>
Note: Favicon ka size usually 16x16 pixels ya 32x32 pixels hota hai.
5. HTML Video
Web page par video embed karne ke liye <video> tag use hota hai.
Syntax:
<video width="400" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support HTML video.
</video>
Attributes:
controls→ Play, pause, volume buttons show karta haiautoplay→ Video automatically start hoti hailoop→ Video repeat hoti haimuted→ Video start hote hi muted rahega
Example:
<video width="500" controls autoplay muted loop>
<source src="nature.mp4" type="video/mp4">
</video>
Conclusion
HTML Visuals & Media elements aapke web pages ko attractive, interactive, aur user-friendly banate hain.
- Colours se design improve hota hai
- Links navigation provide karte hain
- Images aur videos visual appeal badhate hain
- Favicon branding ke liye important hai.
Comments