HTML NOTES

 HTML NOTES


VS CODE ME ! (ALIGATION) LAGANE PAR NECCESARY CODES AA JATE HAI 

CSS LINK KARNE KA CODE - <LINK REL ="STYLESHEET" HREF = "STYLE.CSS">
 AUR YAH HEAD TAG ME HOTA HAI 

SEO CODES : by ai - not to memorise

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Shopzy - India's No.1 Online Shopping Site for Shoes, Clothing & More</title>

  <meta name="description" content="Shop online at Shopzy for the latest shoes, clothing, electronics & more. Best deals, fast delivery & easy returns. Trusted by millions of customers in India.">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Canonical Tag -->
  <link rel="canonical" href="https://www.shopzy.in/" />

  <!-- Open Graph Tags -->
  <meta property="og:title" content="Shopzy - India's Favorite Shopping Destination">
  <meta property="og:description" content="Top-quality shoes, clothing, electronics, and more with fast delivery across India.">
  <meta property="og:url" content="https://www.shopzy.in/">
  <meta property="og:image" content="https://www.shopzy.in/images/banner.jpg">
  <meta property="og:type" content="website">

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Shopzy - Online Shopping Site for Fashion & More">
  <meta name="twitter:description" content="Great offers on fashion, gadgets & more. Fast delivery. Easy returns.">
  <meta name="twitter:image" content="https://www.shopzy.in/images/banner.jpg">

  <!-- Structured Data (Organization Schema) -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Organization",
    "name": "Shopzy",
    "url": "https://www.shopzy.in",
    "logo": "https://www.shopzy.in/images/logo.png",
    "sameAs": [
      "https://www.facebook.com/shopzy",
      "https://www.instagram.com/shopzy",
      "https://twitter.com/shopzy"
    ]
  }
  </script>

</head>


<body>
  <h1>Welcome to Shopzy - Your One-Stop Online Shopping Destination</h1>

  <p>Discover the best deals on shoes, clothing, electronics, and more. Shop from top brands with lightning-fast delivery and easy returns.</p>

  <h2>Popular Categories</h2>
  <ul>
    <li><a href="/shoes">Shoes</a></li>
    <li><a href="/clothing">Clothing</a></li>
    <li><a href="/electronics">Electronics</a></li>
    <li><a href="/accessories">Accessories</a></li>
  </ul>
</body>
</html>

HEADER , FOOTER ,DIV , NAV , SECTION ... YH SAB COMMENLY USE HOTE HAI 


text tag - h1 , h2.. , <p> , span , del

LINKER TAG :  <a href =" " target = "_blank " REL = "NOOPENER NOREFERE" > TEXT NAME </A>
where        _blank - open in new tab  , rel - security ( prevent  hijacking )
 

BUTTON - <button type = " button or submit or reset" there can be more attributes > yaha image ya text jo pasand ho </button>

button ke attributes - type ( neccessary) , name ( action (save , delete , update), submit type ......) , value , id , class  , autofocus , form ( form id likh sakte ho ) , formaction ( button press hone par kis url me submit hoga only for submit type) , formmethod ( get or psot ) , formovalidate , formtarget ( form kis window / tab me submit ho) , aria - label , data-* (custom data store karne ke liye) , disable , formenctype)


List - order list , unorder list 

<ol> THist is my list
<li> list name 2 </li>
<li> list name 3 </li>
<li> list name 3 </li>
</ol>  same for ul

image tag - <img src= " " alt="image-discription"  loading="lazy or eager" >  

highlisht : class aur id attributes ham sabme use kar sakte hai 



video tag - <video 
  src="demo-shoe.mp4" 
  poster="shoe-thumbnail.jpg" 
  controls 
  autoplay 
  muted 
  loop 
  width="600"
>
  Your browser does not support the video tag.
</video>
AttributeKaam / Use
srcVideo file ka path
controlsPlay, pause, volume etc. buttons show karta hai
autoplayPage load hote hi video chal jata hai (⚠️ mute hona chahiye)
mutedVideo ko mute karta hai — autoplay ke sath zaroori hota hai
loopVideo end hone ke baad phir se start ho jata hai
posterVideo load hone se pehle ek image thumbnail dikhata hai
preloadBrowser video ka kitna data pehle se load kare (none, metadata, auto)
width / heightVideo size fix karta hai
playsinlineMobile devices pe fullscreen na le jaye (inline hi play kare)
  

FORM TAG - SEARCH BOX EK FORM TAG HAI    
<FORM ATTRIBUTES> 
<LABLE> TEXT </LABLE>
<INPUT ATTRIBUTES - TYPE , NAME , VALUE , REQUIRED , PLACEHOLDER>
</FORM>
| Attribute      | Use                                         |
| -------------- | ------------------------------------------- |
| `name`         | Server pe data identify karne ke liye       |
| `placeholder`  | Field me hint text                          |
| `required`     | Field empty chhoda to form submit nahi hoga |
| `value`        | Pre-filled value                            |
| `readonly`     | Change nahi kar sakte                       |
| `disabled`     | Field disable hoti hai                      |
| `autocomplete` | Browser autofill enable/disable karta hai   |
TYPE - TEXT , EMAIL , PASSWORD , RADIO, SUBMIT

TEXT INPUT - <input type="text" name="username" placeholder="Enter your name">
EMAIL INPUT - <input type="email" name="email">
PASSWORD - <input type="password" name="pass">
RADIO - <input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
CHECK BOX - <input type="checkbox" name="agree" value="yes"> I agree
DROP DOWN - <select name="country">
  <option value="in">India</option>
  <option value="us">USA</option>
</select>
TEXAREA - <textarea name="message" rows="4" cols="30"></textarea>
SUBMIT BUTTON - <input type="submit" value="Submit">
MOBILE NUMBER - <input type="text" name="mobile" pattern="\d{10}" required>
FILE UPLOAD - <input type="file" name="profile-pic">
HIGHLIGHT  - <form action="/upload" method="post" enctype="multipart/form-data">
⚠️ Form tag me enctype="multipart/form-data" lagana padta hai file upload ke liye.
HIDDEN INPUT - <input type="hidden" name="userid" value="12345">


 





Comments

Post a Comment