درس ۲۷ از ۴۵ · صفحه‌های وب

پیوند، تصویر و رسانه

صفحه فقط متن نیست: به صفحه‌های دیگر پیوند می‌دهد، تصویر نشان می‌دهد، صدا و ویدیو پخش می‌کند و شکل می‌کشد. این درس عنصرهای همه‌ی این کارها را می‌گوید، و ویژگی‌هایی که آن‌ها را سریع، در دسترس و امن می‌کنند.

در این درس

پیوندها
تصویرها
یک عکس، چند اندازه
نقشه‌ی تصویر
صدا و ویدیو
قاب و شیء جاسازی‌شده
بوم، اس‌وی‌جی و ریاضی
مرجع: پیوند، تصویر و رسانه
خودتان امتحان کنید

پیوندها

پیوند خواننده را به جایی می‌برد. نشانیاش الزامی است و محتوایش متنی است که خواننده روی آن کلیک می‌کند. نشانی می‌تواند به سایتی دیگر برود، به پرونده‌ای کنار صفحه‌ی شما، یا به جایی در همین صفحه: نشانیای که با # شروع شود به عنصری می‌رود که شناسهاش بقیه‌ی همان نشانی است. دو نوع دیگر هم دانستنی است. mailto: برنامه‌ی ایمیل را با یک پیام تازه باز می‌کند و tel: در گوشی پیشنهاد تماس با آن شماره را می‌دهد.

web-media-links.salam

صفحه:
    عنوان = "پیوندها"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" ارتفاع خط = 2 پایان
    پاراگراف:
        محتوا = "نخست "
        پیوند: نشانی = "#rules" محتوا = "قوانین خانه" پایان
        تکه: محتوا = " را بخوانید، بعد به " پایان
        پیوند: نشانی = "mailto:[email protected]" محتوا = "باشگاه" پایان
        تکه: محتوا = " بنویسید یا با " پایان
        پیوند: نشانی = "tel:+15550100" محتوا = "۰۵۵۵ ۰۱۰۰" پایان
        تکه: محتوا = " تماس بگیرید." پایان
    پایان
    پاراگراف:
        پیوند: نشانی = "https://example.com/guide" هدف = "پنجره جدید" رابطه = "noopener" محتوا = "راهنمای کامل (زبانه‌ی تازه)" پایان
    پایان
    پاراگراف:
        پیوند:
            نشانی = "maps/garden.pdf"
            دانلود = "garden-map.pdf"
            نوع = "application/pdf"
            زبان مقصد = "fa"
            محتوا = "دانلود نقشه‌ی باغ"
        پایان
    پایان
    سرتیتر: شناسه = "rules" اندازه = ۲ محتوا = "قوانین خانه" پایان
    پاراگراف: محتوا = "در را بسته نگه دارید. باغچه‌ها را صبح آب بدهید." پایان
پایان

هر ویژگی در نمونه یک کار می‌کند. هدف می‌گوید صفحه کجا باز شود: پنجره جدید زبانه‌ی تازه است (کلمه‌ی HTML آن _blank است و هر دو کار می‌کنند)، همین پنجره زبانه‌ی فعلی است، و پنجره والد و پنجره اصلی فقط درون قاب‌ها اهمیت دارند. رابطه نسبت پیوند با مقصد را می‌گوید. با noopener زبانه‌ی تازه نمی‌تواند به صفحه‌ی شما دست ببرد، که برای پیوند به سایتی که در اختیار شما نیست مهم است، و nofollow از موتورهای جستجو می‌خواهد پیوند را به حساب نیاورند. دانلود مرورگر را وامی‌دارد پرونده را ذخیره کند، نه نشان دهد، و مقدارش نام پیشنهادی پرونده است. نوع گونه‌ی پرونده‌ای است که انتظار دارید و زبان مقصد زبان صفحه‌ی مقصد. هر دو فقط راهنمایی‌اند. پینگ نشانی‌هایی را فهرست می‌کند که با دنبال شدن پیوند خبردار می‌شوند، و سیاست ارجاع تعیین می‌کند چقدر از نشانی شما به سایت مقصد داده شود.

متن پیوند را طوری بنویسید که به‌تنهایی معنا بدهد، مثل «قوانین خانه» و نه «اینجا کلیک کنید»: صفحه‌خوان‌ها می‌توانند فهرست همه‌ی پیوندهای صفحه را بخوانند. پیوند نمی‌تواند پیوند یا دکمه‌ی دیگری را در خود داشته باشد و مترجم در این حالت خطا می‌دهد (E116). نشانی‌هایی مثل javascript: را هم که کد اجرا می‌کنند نمی‌پذیرد (E018).

تصویرها

تصویر یک عکس نشان می‌دهد. نشانی الزامی است. توصیف متنی ویژگی جایگزین است و محتوا همان ویژگی را تنظیم می‌کند، پس هر کدام بهتر خوانده شد بنویسید. توصیف همان چیزی است که صفحه‌خوان می‌گوید و مرورگر وقتی پرونده بار نشود نشان می‌دهد. آنچه عکس می‌گوید را توصیف کنید، نه آنچه هست: «بادبادک قرمزی بالای تپه‌های سبز»، نه «تصویر». اگر عکس فقط تزیین است، توصیف خالی بدهید، جایگزین = ""، تا صفحه‌خوان‌ها از آن بگذرند. اگر هیچ‌کدام را ندهید مترجم خودش توصیف خالی را می‌نویسد.

web-media-image.salam

صفحه:
    عنوان = "تصویرها"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    پاراگراف: محتوا = "یک عکس با توصیف:" پایان
    تصویر:
        محتوا = "بادبادک قرمزی بالای تپه‌های سبز"
        عرض = ۱۶۰
        ارتفاع = ۱۰۰
        بارگذاری = با تاخیر
        رمزگشایی = ناهمگام
        نشانی = "data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%20160%20100%27%20width=%27160%27%20height=%27100%27%3E%3Crect%20width=%27160%27%20height=%27100%27%20fill=%27%23bae6fd%27/%3E%3Cpath%20d=%27M0%20100%20Q50%2055%20100%2085%20T160%2075%20V100Z%27%20fill=%27%2316a34a%27/%3E%3Cpath%20d=%27M110%2012%20L130%2032%20L110%2052%20L90%2032Z%27%20fill=%27%23dc2626%27/%3E%3Cpath%20d=%27M110%2052%20Q100%2070%20112%2082%27%20stroke=%27%23475569%27%20fill=%27none%27/%3E%3Ctext%20x=%276%27%20y=%2714%27%20font-size=%2711%27%20font-family=%27sans-serif%27%20fill=%27%230c4a6e%27%3E%3C/text%3E%3C/svg%3E"
    پایان
    پاراگراف: محتوا = "تصویر تزیینی توصیف خالی دارد:" پایان
    تصویر: جایگزین = "" عرض = ۸۰ ارتفاع = ۵۰ نشانی = "data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%20160%20100%27%20width=%27160%27%20height=%27100%27%3E%3Crect%20width=%27160%27%20height=%27100%27%20fill=%27%23bae6fd%27/%3E%3Cpath%20d=%27M0%20100%20Q50%2055%20100%2085%20T160%2075%20V100Z%27%20fill=%27%2316a34a%27/%3E%3Cpath%20d=%27M110%2012%20L130%2032%20L110%2052%20L90%2032Z%27%20fill=%27%23dc2626%27/%3E%3Cpath%20d=%27M110%2052%20Q100%2070%20112%2082%27%20stroke=%27%23475569%27%20fill=%27none%27/%3E%3Ctext%20x=%276%27%20y=%2714%27%20font-size=%2711%27%20font-family=%27sans-serif%27%20fill=%27%230c4a6e%27%3E%3C/text%3E%3C/svg%3E" پایان
    پاراگراف: محتوا = "تصویری که بار نشود، توصیفش را نشان می‌دهد:" پایان
    تصویر: محتوا = "عکس دروازه‌ی باغ" عرض = ۲۰۰ ارتفاع = ۴۰ نشانی = "missing/gate.jpg" پایان
پایان

همیشه عرض و ارتفاع را برابر اندازه‌ی واقعی پرونده بگذارید. مرورگر پیش از رسیدن عکس جایش را نگه می‌دارد و متن زیر آن با آمدنش نمی‌پرد. بارگذاری = با تاخیر به مرورگر می‌گوید عکس را فقط وقتی بگیرد که خواننده نزدیکش اسکرول کرد، که برای عکس‌های ته صفحه داده صرفه‌جویی می‌کند. عکس اول صفحه را روی پیش‌فرض، یعنی فوری، بگذارید. رمزگشایی تعیین می‌کند رمزگشایی عکس می‌تواند کنار کار اصلی انجام شود (ناهمگام) یا نه، و اولویت دریافت به شما اجازه می‌دهد مهم‌ترین عکس را زیاد علامت بزنید.

متن بلند درون نشانی یک نشانی داده است: کل عکس به شکل متن، تا نمونه به پرونده‌ی دیگری نیاز نداشته باشد. مترجم نشانی داده را برای تصویر، صدا، ویدیو و قلم می‌پذیرد و بقیه را رد می‌کند. در صفحه‌های خودتان معمولاً نام پرونده یا یک نشانی می‌نویسید.

یک عکس، چند اندازه

گوشی و نمایشگر بزرگ به یک پرونده نیاز ندارند. مجموعه منبع چند نسخه از عکس را فهرست می‌کند و مرورگر یکی را برمی‌دارد. دو راه برای توصیف آن‌ها هست. با توصیف‌گر چگالی، مثل نمونه، هر پرونده 1x، 2x و مانند آن علامت می‌خورد و مرورگر بر اساس تراکم پیکسل‌های صفحه‌نمایش انتخاب می‌کند. با توصیف‌گر عرض، photo-480.jpg 480w, photo-960.jpg 960w، هر پرونده با عرض واقعی‌اش علامت می‌خورد و اندازه‌ها به مرورگر می‌گوید عکس چقدر پهن کشیده می‌شود، مثلاً اندازه‌ها = "(max-width: 600px) 100vw, 600px". نشانی برای مرورگرهایی که مجموعه منبع را نمی‌شناسند، همچنان جایگزین است.

web-media-srcset.salam

واردسازی دام

صفحه:
    عنوان = "مجموعه‌ی تصویرها"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" ارتفاع خط = 2 پایان
    تصویر:
        شناسه = "swatch"
        محتوا = "نمونه‌ی رنگ (پرونده‌ها اینجا نیستند)"
        عرض = ۱۶۰
        ارتفاع = ۱۰۰
        مجموعه منبع = "swatch.png 1x, swatch-2x.png 2x"
        نشانی = "swatch.png"
        خطا = (): دام.تنظیم متن(دام.با شناسه("chosen")، "مرورگر این را برگزید: " + دام.دریافت خاصیت رشته ای(دام.با شناسه("swatch")، "currentSrc")) پایان
    پایان
    پاراگراف: شناسه = "chosen" محتوا = "منتظر مرورگر..." پایان
پایان

پرونده‌های این نمونه وجود ندارند، پس مرورگر چیزی نمی‌کشد. با این حال تصمیم می‌گیرد کدام را بگیرد، و تابعی که جلوی خطا = نوشته‌ایم وقتی عکس بار نشود اجرا می‌شود و این انتخاب را از ویژگی currentSrc عکس می‌خواند. روی صفحه‌ای با دو برابر پیکسل، نام دومی را می‌خوانید.

وقتی نسخه‌ها یک عکس نیستند، مثلاً برش پهن برای رایانه و برش بلند برای گوشی، عکس را به کار ببرید. درونش هر منبع یک شرط رسانه و یک مجموعه منبع دارد و مرورگر نخستین منبعی را برمی‌دارد که شرطش درست است. آخرین فرزند همیشه یک تصویر معمولی است: جایگزین است و توصیف را هم همان می‌دارد. منبع می‌تواند نوع هم داشته باشد، مثل image/webp، تا مرورگرهایی که قالب را نمی‌شناسند از آن بگذرند.

web-media-picture.salam

صفحه:
    عنوان = "عکس"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    عکس:
        منبع: رسانه = "(min-width: 500px)" مجموعه منبع = "data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%20320%20120%27%20width=%27320%27%20height=%27120%27%3E%3Crect%20width=%27320%27%20height=%27120%27%20fill=%27%23bae6fd%27/%3E%3Ccircle%20cx=%27260%27%20cy=%2736%27%20r=%2720%27%20fill=%27%23facc15%27/%3E%3Cpath%20d=%27M0%20120%20Q90%2060%20170%20100%20T320%2085%20V120Z%27%20fill=%27%2316a34a%27/%3E%3Ctext%20x=%278%27%20y=%2716%27%20font-size=%2712%27%20font-family=%27sans-serif%27%20fill=%27%230c4a6e%27%3Ewide%3C/text%3E%3C/svg%3E" پایان
        تصویر:
            محتوا = "تپه‌های سبز زیر خورشید زرد"
            نشانی = "data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%20120%20160%27%20width=%27120%27%20height=%27160%27%3E%3Crect%20width=%27120%27%20height=%27160%27%20fill=%27%23bae6fd%27/%3E%3Ccircle%20cx=%2790%27%20cy=%2730%27%20r=%2716%27%20fill=%27%23facc15%27/%3E%3Cpath%20d=%27M0%20160%20Q40%2090%2080%20140%20T120%20120%20V160Z%27%20fill=%27%2316a34a%27/%3E%3Ctext%20x=%278%27%20y=%2716%27%20font-size=%2712%27%20font-family=%27sans-serif%27%20fill=%27%230c4a6e%27%3Enarrow%3C/text%3E%3C/svg%3E"
        پایان
    پایان
    پاراگراف: محتوا = "در پنجره‌ای باریک‌تر از ۵۰۰ پیکسل عکس بلند را می‌بینید. در پنجره‌ی پهن‌تر مرورگر عکس پهن را می‌گذارد." پایان
پایان

نقشه‌ی تصویر

نقشه‌ی تصویر تکه‌هایی از یک عکس را پیوندهای جدا می‌کند. تصویر نقشه را با نقشه = "#shapes" نام می‌برد و یک نقشه تصویر با نام = "shapes" برای هر نقطه‌ی داغ یک ناحیه دارد. ناحیه یک قالب ناحیه دارد: مستطیل با مختصات چپ,بالا,راست,پایین، دایره با مرکز-x,مرکز-y,شعاع، چندضلعی با گوشه‌ها به شکل x1,y1,x2,y2 و همین‌طور ادامه، یا پیش‌فرض برای هر جایی که پوشیده نشده است. مختصات به پیکسل‌های عکس همان‌طور که کشیده می‌شود هستند. ناحیه یک پیوند است، پس نشانی، هدف، رابطه، دانلود، پینگ و سیاست ارجاع هم می‌گیرد، و جایگزین لازم دارد، متنی برای کسانی که نمی‌توانند روی عکس کلیک کنند.

web-media-map.salam

واردسازی دام

صفحه:
    عنوان = "نقشه‌ی تصویر"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    تصویر:
        محتوا = "یک مربع قرمز کنار یک دایره‌ی آبی"
        نقشه = "#shapes"
        عرض = ۲۰۰
        ارتفاع = ۱۰۰
        نشانی = "data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%20200%20100%27%3E%3Crect%20x=%2710%27%20y=%2710%27%20width=%2780%27%20height=%2780%27%20fill=%27%23dc2626%27/%3E%3Ccircle%20cx=%27150%27%20cy=%2750%27%20r=%2740%27%20fill=%27%232563eb%27/%3E%3C/svg%3E"
    پایان
    نقشه تصویر: نام = "shapes"
        ناحیه: قالب ناحیه = مستطیل مختصات = "10,10,90,90" جایگزین = "مربع قرمز" نشانی = "#" کلیک = (): دام.تنظیم متن(دام.با شناسه("said")، "شما مربع را برگزیدید.") پایان پایان
        ناحیه: قالب ناحیه = دایره مختصات = "150,50,40" جایگزین = "دایره‌ی آبی" نشانی = "#" کلیک = (): دام.تنظیم متن(دام.با شناسه("said")، "شما دایره را برگزیدید.") پایان پایان
    پایان
    پاراگراف: شناسه = "said" محتوا = "روی یکی از شکل‌ها کلیک کنید." پایان
پایان

در نمونه هر ناحیه یک رویداد کلیک هم دارد که در پاراگراف می‌نویسد. ویژگی قدیمی‌تر نقشه سمت سرور فرق دارد: روی عکسی که درون یک پیوند است، مرورگر را وامی‌دارد مختصات کلیک را به سرور بفرستد و سرور تصمیم بگیرد چه کند.

صدا و ویدیو

صدا و ویدیو بدون هیچ افزونه‌ای صدا و تصویر متحرک پخش می‌کنند. کنترل‌ها را بگذارید، وگرنه خواننده راهی برای شروع ندارد. پرونده را با نشانی بدهید، یا بهتر، با یک یا چند فرزند منبع که هر کدام نوع خودش را دارند. مرورگر نخستین منبعی را که بتواند پخش می‌کند، پس بهترین قالب را اول بنویسید. متن محتوا را فقط مرورگری نشان می‌دهد که اصلاً نتواند عنصر را پخش کند.

web-media-audio.salam

صفحه:
    عنوان = "صدا"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    پاراگراف: محتوا = "یک بوق کوتاه. پخش را بزنید:" پایان
    صدا:
        کنترل‌ها = درست
        پیش‌بارگذاری = خودکار
        محتوا = "مرورگر شما نمی‌تواند صدا پخش کند."
        منبع: نشانی = "data:audio/wav;base64,UklGRnwCAABXQVZFZm10IBAAAAABAAEAoA8AAKAPAAABAAgAZGF0YVgCAACAgYSGg3xzbnJ+jpqbjXdhWGF6ma+wmnVRQU1zocPHqXVDKzlpp9Xeunk7HCthpNfiv39AHShbntTjxIZFHyVVmNDjyIxKICNPks3kzZJPIyBKjMjj0JhVJR9FhsTj1J5bKB1AgL/i16RhKxw7ebrg2qpnLxw3c7Xf3LBtMhwybbDc37VzNxwvZ6ra4Lp5OxwrYaTX4r+AQB0oW57U48SGRR8lVZjQ48iMSiAjT5LN5M2STyMgSozI49CYVSUfRYbE49SeWygdQIC/4tekYSscO3m64NqqZy8cN3O139ywbTIcMm2w3N+1czccL2eq2uC6eTscK2Gk1+K/f0AdKFue1OPEhkUfJVWY0OPIjEogI0+SzeTNkk8jIEqMyOPQmFUlH0WGxOPUnlsoHUB/v+LXpGErHDt5uuDaqmcvHDdztd/csG0yHDJtsNzftXM3HC9nqtrgunk7HCthpNfiv39AHShbntTjxIZFHyVVmNDjyIxKICNPks3kzZJPIyBKjMjj0JhVJR9FhsTj1J5bKB1AgL/i16RhKxw7ebrg2qpnLxw3c7Xf3LBtMhwybbDc37VzNxwvZ6ra4Lp5OxwrYaTX4r9/QB0oW57U48SGRR8lVZjQ48iMSiAjT5LN5M2STyMgSozI49CYVSUfRYbE49SeWygdQIC/4NWjYjAjQXq01s+lajssQ3WrzMmlcUU1RnKiwsKkd08+S3CauLujfFhHUG+TrrOgf2BQVm+NpaqcgmhaXXCInKGYhG9jZXKFlJmShHVsbHWCjI+Mg3p1dXqAhYaFgX59fn8=" نوع = "audio/wav" پایان
        منبع: نشانی = "beep.mp3" نوع = "audio/mpeg" پایان
    پایان
    پاراگراف: محتوا = "مرورگر نخستین منبعی را که بشناسد پخش می‌کند." پایان
پایان

پیش‌بارگذاری می‌گوید پیش از زدن پخش چقدر گرفته شود: هیچ، فراداده (فقط مدت و اندازه) یا خودکار. حلقه در پایان از اول شروع می‌کند و بی‌صدا بی‌صدا شروع می‌کند. پخش خودکار فوراً شروع می‌کند، ولی مرورگرها معمولاً آن را برای صدادار رد می‌کنند، پس مطمئن فقط همراه بی‌صدا کار می‌کند. ویدیو عرض و ارتفاع هم دارد، یک پوستر که تا پخش نشدن دیده می‌شود، و پخش درجا که گوشی‌ها را از تمام‌صفحه کردن اجباری باز می‌دارد.

web-media-video.salam

صفحه:
    عنوان = "ویدیو"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    ویدیو:
        عرض = ۲۸۸
        کنترل‌ها = درست
        پخش خودکار = درست
        بی‌صدا = درست
        حلقه = درست
        پخش درجا = درست
        پیش‌بارگذاری = خودکار
        پوستر = "data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2096%2054%27%3E%3Crect%20width=%2796%27%20height=%2754%27%20fill=%27%23134e4a%27/%3E%3Cpath%20d=%27M40%2018%20L40%2036%20L56%2027Z%27%20fill=%27%23ccfbf1%27/%3E%3C/svg%3E"
        محتوا = "مرورگر شما نمی‌تواند ویدیو پخش کند."
        منبع: نشانی = "data:video/webm;base64,GkXfo59ChoEBQveBAULygQRC84EIQoKEd2VibUKHgQJChYECGFOAZwEAAAAAAAKAEU2bdLpNu4tTq4QVSalmU6yBoU27i1OrhBZUrmtTrIHWTbuMU6uEElTDZ1OsggEjTbuMU6uEHFO7a1OsggJq7AEAAAAAAABZAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAVSalmsCrXsYMPQkBNgIxMYXZmNjIuMy4xMDBXQYxMYXZmNjIuMy4xMDBEiYhAp3AAAAAAABZUrmvIrgEAAAAAAAA/14EBc8WIcy20VtKTuA+cgQAitZyDdW5kiIEAhoVWX1ZQOIOBASPjg4QdzWUA4JCwgWC6gTaagQJVsIRVuYEBElTDZ/tzc59jwIBnyJlFo4dFTkNPREVSRIeMTGF2ZjYyLjMuMTAwc3PWY8CLY8WIcy20VtKTuA9nyKFFo4dFTkNPREVSRIeUTGF2YzYyLjExLjEwMCBsaWJ2cHhnyKFFo4hEVVJBVElPTkSHkzAwOjAwOjAzLjAwMDAwMDAwMAAfQ7Z1QMHngQCjxIEAAIDwAwCdASpgADYAAEcIhYWIhYSIAgICdaoD+AIGwSzT6hw4cOHDhw4ZAP78KdH/iGej1Ml3/6Jr+ia/omv/obgAo5aBAfQA0QEAARAQABgAGFgv9AAIhSgAo5aBA+gA0QEAARAQABgAGFgv9AAIhSgAo5aBBdwA0QEAARAQABgAGFgv9AAIhSgAo5aBB9AA0QEAARAQABgAGFgv9AAIhSgAo5aBCcQA0QEAARAQABgAGFgv9AAIhSgAHFO7a5G7j7OBALeK94EB8YIBo/CBAw==" نوع = "video/webm" پایان
        شیار: نشانی = "captions/fa.vtt" نوع شیار = زیرنویس زبان شیار = "fa" برچسب = "فارسی" پیش‌فرض = درست پایان
    پایان
پایان

عنصر شیار از یک پرونده‌ی WebVTT به ویدیو یا صدا متن اضافه می‌کند. نوع شیار می‌تواند زیرنویس (ترجمه)، شرح (گفتار و صداها، برای ناشنوایان)، توصیف، فصل‌ها یا فراداده باشد. زبان شیار زبان متن است، برچسب نامش در فهرست، و پیش‌فرض آن را از آغاز روشن می‌کند. پرونده‌ی نمونه وجود ندارد. در صفحه‌های واقعی هر چیز گفتاری زیرنویس لازم دارد.

قاب و شیء جاسازی‌شده

قاب درونی صفحه‌ای دیگر را درون صفحه‌ی شما نشان می‌دهد. صفحه می‌تواند نشانی در نشانی باشد یا سندی کوتاه که در محتوای سند نوشته‌اید. به آن عنوان بدهید تا صفحه‌خوان‌ها بتوانند اعلامش کنند، و عرض و ارتفاع. برای قاب‌های ته صفحه بارگذاری = با تاخیر بگذارید.

web-media-iframe.salam

صفحه:
    عنوان = "قاب‌ها"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    پاراگراف: محتوا = "یک صفحه‌ی کوچک جدا، در قرنطینه و بدون اسکریپت:" پایان
    قاب درونی:
        عنوان = "خوش‌آمدگویی"
        عرض = ۳۲۰
        ارتفاع = ۹۰
        قرنطینه = ""
        بارگذاری = با تاخیر
        محتوای سند = "<body style='font-family:Tahoma,sans-serif;direction:rtl'><h3>درون قاب</h3><p>این صفحه نمی‌تواند اسکریپت اجرا کند.</p></body>"
        کادر = "2px solid #0f766e"
    پایان
پایان

قاب می‌تواند کد غریبه را به صفحه‌ی شما بیاورد، پس با قرنطینه قفلش کنید. قرنطینه = "" همه‌ی اجازه‌ها را برمی‌دارد: نه اسکریپت، نه فرم، نه پنجره‌ی بازشو. بعد فقط آنچه قاب لازم دارد را با فهرست کردن واژه‌هایی مثل allow-scripts یا allow-forms با فاصله پس می‌دهید. برای صفحه‌ای که به آن اعتماد ندارید هرگز allow-scripts را با allow-same-origin یک‌جا ندهید. اجازه فهرستی جداست برای قابلیت‌های مرورگر، مثل "fullscreen; camera"، و اجازه تمام‌صفحه دکمه‌ی تمام‌صفحه را مجاز می‌کند. نام به قاب برای اسکریپت‌ها نامی می‌دهد، و سیاست ارجاع مثل پیوندهاست.

جاسازی و شیء یک منبع بیرونی، مثل پی‌دی‌اف، را در صفحه می‌گذارند. هر دو نشانی، نوع و اندازه می‌گیرند. جاسازی محتوا ندارد. شیء وقتی مرورگر نتواند پرونده را نشان دهد محتوایش را نشان می‌دهد، که جای مناسبی برای پیوند دانلود است، و ویژگی‌های فرم و نام آن را به فرم وصل می‌کنند. برای پی‌دی‌اف اغلب یک پیوند ساده انتخاب بهتری است.

بوم، اس‌وی‌جی و ریاضی

بوم مستطیلی خالی است که با کد رویش نقاشی می‌کنید. اندازه‌اش را با ویژگی‌های عرض و ارتفاع بدهید، که تعداد پیکسل‌های سطح نقاشی‌اند. اندازه‌ای که با CSS بدهید همان پیکسل‌ها را فقط کش می‌دهد و نقاشی تار می‌شود. خود نقاشی با بسته‌ی دام انجام می‌شود. دام.دریافت زمینه(بوم، "2d") ابزار نقاشی را می‌دهد، دام.تنظیم خاصیت رشته ای یکی از خاصیت‌هایش مثل fillStyle را می‌گذارد و دام.فراخوان چهار یکی از روش‌هایش را با چهار عدد صدا می‌زند. نمونه هر جا کلیک کنید یک مربع می‌زند: دام.دریافت خاصیت عددی(رویداد، "offsetX") جای کلیک را درون بوم از رویداد می‌خواند. دو تابع بالای صفحه، مهر و پاکسازی، با کلیک = مهر و کلیک = پاکسازی به بوم و دکمه وصل شده‌اند.

web-media-canvas.salam

واردسازی دام

تابع مهر(رویداد: صحیح۶۴):
    بافت := دام.دریافت زمینه(دام.با شناسه("pad")، "2d")
    دام.تنظیم خاصیت رشته ای(بافت، "fillStyle"، "#0f766e")
    _ := دام.فراخوان چهار(بافت، "fillRect"، دام.دریافت خاصیت عددی(رویداد، "offsetX") - 10، دام.دریافت خاصیت عددی(رویداد، "offsetY") - 10، 20، 20)
پایان

تابع پاکسازی:
    بافت := دام.دریافت زمینه(دام.با شناسه("pad")، "2d")
    _ := دام.فراخوان چهار(بافت، "clearRect"، 0، 0، 320، 160)
پایان

صفحه:
    عنوان = "بوم"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    پاراگراف: محتوا = "روی بوم کلیک کنید تا یک مربع بزند." پایان
    بوم: شناسه = "pad" عرض = ۳۲۰ ارتفاع = ۱۶۰ پس زمینه = "#f1f5f9" کادر = "1px solid #94a3b8" کلیک = مهر پایان
    جعبه: فضا بالا = ۸
        دکمه: محتوا = "پاک کن" کلیک = پاکسازی پایان
    پایان
پایان

متنی که درون عنصر بوم بگذارید فقط وقتی دیده می‌شود که مرورگر نتواند بکشد، و صفحه‌خوان‌ها درون نقاشی را نمی‌بینند. هر اطلاعاتی که نقاشی دارد را به‌صورت متن هم در صفحه بگذارید.

اس‌وی‌جی با شکل‌هایی می‌کشد که در هر اندازه تیز می‌مانند. محتوای اس‌وی‌جی نشانه‌گذاری شکل‌هایش است، همان‌طور که نوشته‌اید، و بدون فرار دادن نویسه‌ها درج می‌شود، پس فقط برای نشانه‌گذاری‌ای که خودتان نوشته‌اید به کار ببریدش. جعبه دید دستگاه مختصات درونی است، چهار عدد min-x min-y width height، و عرض و ارتفاع اندازه‌ی روی صفحه‌اند. نقاشی خودش را با آن‌ها جور می‌کند. فضای نام فقط وقتی لازم است که اس‌وی‌جی پرونده‌ای مستقل باشد. ریاضی برای ریاضیات همین‌طور کار می‌کند، با MathML در محتوایش: mi برای یک نام، mo برای عملگر، mn برای عدد، mfrac برای کسر و msup برای توان.

web-media-svg.salam

صفحه:
    عنوان = "اس‌وی‌جی و ریاضی"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    اس‌وی‌جی:
        جعبه دید = "0 0 120 60"
        عرض = ۲۴۰
        ارتفاع = ۱۲۰
        محتوا = "<rect width='120' height='60' rx='8' fill='#ccfbf1'/><circle cx='30' cy='30' r='18' fill='#0f766e'/><text x='78' y='36' font-size='16' fill='#134e4a' text-anchor='middle'>سلام</text>"
    پایان
    پاراگراف:
        محتوا = "مساحت دایره "
        ریاضی: محتوا = "<mi>A</mi><mo>=</mo><mi>&#960;</mi><msup><mi>r</mi><mn>2</mn></msup>" پایان
        تکه: محتوا = " است." پایان
    پایان
پایان

مرجع: پیوند، تصویر و رسانه

همه‌ی عنصرهای این درس با ویژگی‌هایشان و یک نمونه‌ی کوتاه در زیر آمده‌اند. نمونه‌ها را مترجم بررسی کرده است، پس هر کدام را می‌توانید درون یک بلوک صفحه: بگذارید. پرونده‌هایی مثل photo.jpg در نمونه‌ها فقط نام‌اند و برای دیدنشان پرونده‌ی خودتان را لازم دارید. ویژگی‌هایی که همه‌ی عنصرها دارند، مثل شناسه و عنوان، در درس سرصفحه و ویژگی‌های همگانی هستند.

پیوندها

`پیوند` (English: `link`; HTML: `<a>`)

پیوند (a در HTML). نشانی الزامی است و مقصد را می‌گوید، و محتوا متنی است که روی آن کلیک می‌شود. می‌تواند متن، تصویر یا محتوای درون‌خطی دیگر داشته باشد، ولی نه پیوند یا دکمه‌ی دیگر.

پیوند: نشانی = "/guide" محتوا = "راهنما را بخوانید" پایان

الزامی: url

ویژگی	کار آن	نمونه
`نوع` type	راهنمایی درباره‌ی گونه‌ی پرونده‌ی آن نشانی، به شکل نوع MIME مثل `application/pdf`. مرورگر ممکن است پیش از گرفتن پرونده از آن استفاده کند. چیزی را درباره‌ی خود پرونده عوض نمی‌کند. [mime]	`پیوند: نشانی = "notes.pdf" نوع = "application/pdf" محتوا = "یادداشت‌ها (پی‌دی‌اف)" پایان`
`دانلود` download	مرورگر را وامی‌دارد مقصد را ذخیره کند، نه باز. مقدار نام پیشنهادی پرونده است؛ مقدار خالی نام اصلی را نگه می‌دارد. برای پرونده‌های همین سایت کار می‌کند. [string]	`پیوند: نشانی = "report.pdf" دانلود = "report-2026.pdf" محتوا = "ذخیره‌ی گزارش" پایان`
`رابطه` rel	فهرستی از واژه‌ها با فاصله که می‌گویند مقصد چه نسبتی با این صفحه دارد، مثل `noopener` (صفحه‌ی تازه نمی‌تواند این صفحه را کنترل کند)، `noreferrer`، `nofollow` (موتورهای جستجو پیوند را به حساب نیاورند) یا `external`. [token (list)]	`پیوند: نشانی = "https://example.org" هدف = "پنجره جدید" رابطه = "noopener nofollow" محتوا = "سایتی که ضامنش نیستیم" پایان`
`سیاست ارجاع` referrer policy	چه مقدار از نشانی این صفحه به مقصد فرستاده شود: `no-referrer` (هیچ)، `same-origin`، `origin` (فقط نشانی سایت)، `strict-origin-when-cross-origin` و جز این‌ها. اگر نشانی صفحه‌ی شما خصوصی است `no-referrer` بگذارید. [enum: referrer_policy]	`پیوند: نشانی = "https://example.com" سیاست ارجاع = "no-referrer" محتوا = "بی‌صدا برو" پایان`
`پینگ` ping	فهرستی از نشانی‌ها با فاصله که مرورگر هنگام دنبال شدن پیوند به آن‌ها خبر می‌دهد. برای شمردن کلیک به کار می‌رود. برخی مرورگرها نادیده‌اش می‌گیرند. [url (list)]	`پیوند: نشانی = "/offer" پینگ = "https://example.com/count" محتوا = "پیشنهاد را ببینید" پایان`
`زبان مقصد` hreflang	زبان صفحه‌ی مقصد، به شکل کد زبان مثل `fa` یا `en`. راهنمایی برای مرورگرها و موتورهای جستجوست. [lang]	`پیوند: نشانی = "/en/" زبان مقصد = "en" محتوا = "نسخه‌ی انگلیسی" پایان`
`نشانی` url	نشانی‌ای که پیوند به آن می‌رود، الزامی. می‌تواند نشانی کامل (`https://...`)، نام پرونده‌ای کنار صفحه، جایی در همین صفحه (`#شناسه`)، `mailto:` یا `tel:` باشد. نشانی‌هایی که کد اجرا می‌کنند، مثل `javascript:`، پذیرفته نمی‌شوند. [url]	`پیوند: نشانی = "#prices" محتوا = "برو به قیمت‌ها" پایان`
`هدف` target	جایی که صفحه باز می‌شود: `پنجره جدید` (یا `_blank`) برای زبانه‌ی تازه، `همین پنجره` (`_self`) برای زبانه‌ی فعلی، و `پنجره والد` و `پنجره اصلی` برای قاب بیرونی یا کل پنجره. [enum: target]	`پیوند: نشانی = "https://example.com" هدف = "پنجره جدید" محتوا = "در زبانه‌ی تازه باز کن" پایان`

تصویر و نقشه

`تصویر` (English: `image`; HTML: `<img>`)

یک عکس (img در HTML). نشانی الزامی است. فرزند ندارد. توصیفش را در جایگزین یا محتوا بدهید، و عرض و ارتفاع را.

تصویر: نشانی = "photo.jpg" محتوا = "دروازه‌ی باغ در بهار" عرض = ۳۲۰ ارتفاع = ۲۰۰ پایان

الزامی: url · عنصر تهی است و فرزند نمی‌پذیرد

ویژگی	کار آن	نمونه
`عرض` width	پهنای عکس. عدد تنها یعنی پیکسل. همراه با `ارتفاع` آن را برابر اندازه‌ی واقعی پرونده بگذارید تا مرورگر پیش از بار شدن عکس جایش را نگه دارد. [ulength]	`تصویر: نشانی = "photo.jpg" جایگزین = "دروازه" عرض = ۲۴۰ ارتفاع = ۱۵۰ پایان`
`ارتفاع` height	ارتفاع عکس، به پیکسل اگر عدد تنها باشد. همراه با `عرض` به مرورگر اجازه می‌دهد شکل عکس را هنگام بار شدن نگه دارد. [ulength]	`تصویر: نشانی = "photo.jpg" جایگزین = "دروازه" عرض = ۲۴۰ ارتفاع = ۱۵۰ پایان`
`مجموعه منبع` srcset	فهرستی از پرونده‌های عکس برای انتخاب مرورگر، جدا شده با ویرگول. هر مورد یک نشانی است و بعد از آن `1x`، `2x` (تراکم صفحه‌نمایش) یا `480w`، `960w` (عرض پرونده به پیکسل). [srcset]	`تصویر: نشانی = "photo-480.jpg" جایگزین = "دروازه" مجموعه منبع = "photo-480.jpg 480w, photo-960.jpg 960w" اندازه‌ها = "480px" پایان`
`اندازه‌ها` sizes	پیکسل‌های عکس چقدر پهن کشیده می‌شود، تا مرورگر بتواند از `مجموعه منبع`ای که توصیف‌گر `w` دارد انتخاب کند. فهرستی از شرط‌ها با عرض، که با یک پیش‌فرض تمام می‌شود، مثل `(max-width: 600px) 100vw, 600px`. [string]	`تصویر: نشانی = "photo-480.jpg" جایگزین = "دروازه" مجموعه منبع = "photo-480.jpg 480w, photo-960.jpg 960w" اندازه‌ها = "(max-width: 600px) 100vw, 600px" پایان`
`میان‌مبدا` crossorigin	آیا درخواست عکسی از سایت دیگر اعتبارنامه می‌فرستد: `ناشناس` (نه) یا `با اعتبارنامه`. وقتی اسکریپتی پیکسل‌های عکسی از سایت دیگر را می‌خواند لازم است. [enum: crossorigin]	`تصویر: نشانی = "https://cdn.example.com/map.png" جایگزین = "نقشه" میان‌مبدا = ناشناس پایان`
`سیاست ارجاع` referrer policy	چه مقدار از نشانی این صفحه هنگام درخواست عکس فرستاده شود. واژه‌ها مثل پیوندند: `no-referrer`، `origin`، `same-origin` و مانند آن. [enum: referrer_policy]	`تصویر: نشانی = "https://img.example.com/a.png" جایگزین = "آگهی" سیاست ارجاع = "no-referrer" پایان`
`بارگذاری` loading	چه وقت عکس گرفته شود: `فوری` بلافاصله (پیش‌فرض) یا `با تاخیر` فقط وقتی خواننده نزدیک آن اسکرول کند. برای عکس‌های پایین‌تر از صفحه‌ی اول `با تاخیر` بگذارید. [enum: loading]	`تصویر: نشانی = "footer-photo.jpg" جایگزین = "تیم" عرض = ۳۲۰ ارتفاع = ۱۸۰ بارگذاری = با تاخیر پایان`
`رمزگشایی` decoding	آیا مرورگر می‌تواند رمزگشایی عکس را کنار کار اصلی انجام دهد: `ناهمگام` (بله، تا صفحه معطل نماند)، `همگام` (همراه با بقیه) یا `خودکار` (مرورگر تصمیم می‌گیرد، پیش‌فرض). [enum: decoding]	`تصویر: نشانی = "big.jpg" جایگزین = "یک پانورامای بزرگ" عرض = ۶۴۰ ارتفاع = ۲۰۰ رمزگشایی = ناهمگام پایان`
`اولویت دریافت` fetch priority	راهنمایی درباره‌ی فوریت عکس: `زیاد`، `کم` یا `خودکار`. عکس اصلی صفحه را `زیاد` علامت بزنید. [enum: fetch_priority]	`تصویر: نشانی = "hero.jpg" جایگزین = "بندر در سپیده‌دم" عرض = ۶۴۰ ارتفاع = ۲۶۰ اولویت دریافت = زیاد پایان`
`نقشه` use map	عکس را به یک `نقشه تصویر` وصل می‌کند. مقدار یک `#` است و بعد `نام` نقشه. [string]	`تصویر: نشانی = "plan.png" جایگزین = "نقشه‌ی طبقه" نقشه = "#rooms" پایان نقشه تصویر: نام = "rooms" ناحیه: قالب ناحیه = مستطیل مختصات = "0,0,50,50" جایگزین = "آشپزخانه" نشانی = "#kitchen" پایان پایان`
`نقشه سمت سرور` ismap	یک مقدار درست یا نادرست. روی عکسی درون یک `پیوند`، مرورگر را وامی‌دارد جای کلیک را به نشانی اضافه کند تا سرور بفهمد کلیک چه معنایی داشت. امروز کم لازم می‌شود. [bool]	`پیوند: نشانی = "/where" تصویر: نشانی = "map.png" جایگزین = "نقشه" نقشه سمت سرور = درست پایان پایان`
`نشانی` url	نشانی پرونده‌ی عکس، الزامی. می‌تواند نام پرونده، نشانی کامل یا نشانی داده برای عکس‌های کوچک باشد. [url]	`تصویر: نشانی = "images/kite.png" جایگزین = "یک بادبادک قرمز" پایان`
`جایگزین` alt	توصیف متنی عکس. صفحه‌خوان‌ها آن را می‌خوانند و اگر پرونده بار نشود مرورگر آن را نشان می‌دهد. برای عکسی که فقط تزیین است مقدار خالی (`جایگزین = ""`) بدهید. [string]	`تصویر: نشانی = "chart.png" جایگزین = "بارندگی در هر ماه، بیشترین در اسفند" پایان`
`محتوا` content	راه دیگر نوشتن `جایگزین`: متنی که به‌عنوان `محتوا` می‌دهید توصیف عکس می‌شود. هر کدام بهتر خوانده شد؛ هر دو را ندهید. [string]	`تصویر: نشانی = "logo.png" محتوا = "نشان سلام" پایان`

`عکس` (English: `picture`; HTML: `<picture>`)

ظرفی که به مرورگر اجازه می‌دهد از میان چند نسخه‌ی یک عکس انتخاب کند. چند منبع دارد و با تصویر معمولی تمام می‌شود، که جایگزین است و توصیف را هم دارد.

عکس:
    منبع: رسانه = "(min-width: 700px)" مجموعه منبع = "wide.jpg" پایان
    تصویر: نشانی = "narrow.jpg" جایگزین = "بندر" پایان
پایان

`منبع` (English: `source`; HTML: `<source>`)

یک پرونده‌ی نامزد برای عکس، صدا یا ویدیو. مرورگر نخستینی را برمی‌دارد که شرط‌هایش برقرار است و نوعش را می‌شناسد. محتوا ندارد.

ویدیو: کنترل‌ها = درست
    منبع: نشانی = "intro.webm" نوع = "video/webm" پایان
    منبع: نشانی = "intro.mp4" نوع = "video/mp4" پایان
پایان

فقط درون: picture, video, audio · عنصر تهی است و فرزند نمی‌پذیرد

ویژگی	کار آن	نمونه
`عرض` width	عرض پرونده‌ی عکس این نامزد، به پیکسل. به مرورگر کمک می‌کند پیش از رسیدن پرونده شکل درست را نگه دارد. [ulength]	`عکس: منبع: مجموعه منبع = "wide.jpg" رسانه = "(min-width: 700px)" عرض = ۱۲۰۰ ارتفاع = ۶۰۰ پایان تصویر: نشانی = "narrow.jpg" جایگزین = "بندر" پایان پایان`
`ارتفاع` height	ارتفاع پرونده‌ی عکس این نامزد، به پیکسل. همراه با `عرض` بدهید. [ulength]	`عکس: منبع: مجموعه منبع = "square.jpg" رسانه = "(max-width: 400px)" عرض = ۴۰۰ ارتفاع = ۴۰۰ پایان تصویر: نشانی = "wide.jpg" جایگزین = "بندر" پایان پایان`
`نشانی` url	نشانی پرونده‌ی صدا یا ویدیو. درون `عکس` به‌جای آن `مجموعه منبع` بنویسید. [url]	`صدا: کنترل‌ها = درست منبع: نشانی = "song.mp3" نوع = "audio/mpeg" پایان پایان`
`مجموعه منبع` srcset	پرونده‌های عکس این نامزد درون یک `عکس`، با همان قالب `مجموعه منبع` یک تصویر. [srcset]	`عکس: منبع: مجموعه منبع = "photo.avif 1x, photo-2x.avif 2x" نوع = "image/avif" پایان تصویر: نشانی = "photo.jpg" جایگزین = "دروازه" پایان پایان`
`اندازه‌ها` sizes	عکس چقدر پهن کشیده می‌شود، مثل یک تصویر، همراه با توصیف‌گرهای `w` در `مجموعه منبع`. [string]	`عکس: منبع: مجموعه منبع = "s-480.jpg 480w, s-960.jpg 960w" اندازه‌ها = "(max-width: 600px) 100vw, 600px" پایان تصویر: نشانی = "s-480.jpg" جایگزین = "دروازه" پایان پایان`
`نوع` type	گونه‌ی پرونده‌ی این نامزد، به شکل نوع MIME مثل `image/webp` یا `video/mp4`. مرورگری که آن را نشناسد بی‌آن‌که چیزی بگیرد از نامزد می‌گذرد. [mime]	`عکس: منبع: مجموعه منبع = "photo.webp" نوع = "image/webp" پایان تصویر: نشانی = "photo.jpg" جایگزین = "دروازه" پایان پایان`
`رسانه` media	یک شرط رسانه، همان‌طور که در CSS نوشته می‌شود. نامزد فقط تا وقتی شرط برقرار است به کار می‌رود، مثل `(min-width: 700px)` یا `(orientation: portrait)`. [media_query]	`عکس: منبع: رسانه = "(orientation: portrait)" مجموعه منبع = "tall.jpg" پایان تصویر: نشانی = "wide.jpg" جایگزین = "بندر" پایان پایان`

`نقشه تصویر` (English: `image map`; HTML: `<map>`)

مجموعه‌ای از ناحیه‌های کلیک‌پذیر برای یک تصویر (map در HTML). نام الزامی است و یک تصویر با نقشه به آن اشاره می‌کند. فرزندانش عنصرهای ناحیه هستند.

نقشه تصویر: نام = "rooms"
    ناحیه: قالب ناحیه = دایره مختصات = "40,40,30" جایگزین = "آشپزخانه" نشانی = "#kitchen" پایان
پایان

الزامی: name

ویژگی	کار آن	نمونه
`نام` name	نام نقشه، الزامی. یک `تصویر` با `نقشه = "#نام"` به آن اشاره می‌کند. [string]	`نقشه تصویر: نام = "shapes" ناحیه: قالب ناحیه = مستطیل مختصات = "0,0,40,40" جایگزین = "جعبه" نشانی = "#box" پایان پایان`

`ناحیه` (English: `area`; HTML: `<area>`)

یک ناحیه‌ی کلیک‌پذیر از نقشه تصویر. یک پیوند است: نشانی، هدف و ویژگی‌های دیگر پیوند را می‌گیرد، و قالب ناحیه و مختصات می‌گویند کجاست. محتوا ندارد.

نقشه تصویر: نام = "m"
    ناحیه: قالب ناحیه = مستطیل مختصات = "10,10,90,60" جایگزین = "خانه" نشانی = "/" پایان
پایان

عنصر تهی است و فرزند نمی‌پذیرد

ویژگی	کار آن	نمونه
`نشانی` url	کلیک روی ناحیه به کجا می‌رود. همان انواع نشانی‌ای که برای پیوند هست. [url]	`نقشه تصویر: نام = "m" ناحیه: قالب ناحیه = مستطیل مختصات = "0,0,50,50" جایگزین = "تماس" نشانی = "mailto:[email protected]" پایان پایان`
`مختصات` coords	نقطه‌های ناحیه به شکل عددهایی که با ویرگول جدا شده‌اند، به پیکسل‌های عکس. برای `مستطیل`: `چپ,بالا,راست,پایین`. برای `دایره`: `x,y,شعاع`. برای `چندضلعی`: `x1,y1,x2,y2,...`. [string]	`نقشه تصویر: نام = "m" ناحیه: قالب ناحیه = چندضلعی مختصات = "10,60,50,10,90,60" جایگزین = "سقف" نشانی = "#roof" پایان پایان`
`قالب ناحیه` shape	شکل ناحیه: `مستطیل`، `دایره`، `چندضلعی`، یا `پیش‌فرض` برای هر جایی که ناحیه‌ی دیگری نپوشانده است. [enum: area_shape]	`نقشه تصویر: نام = "m" ناحیه: قالب ناحیه = دایره مختصات = "50,50,30" جایگزین = "خورشید" نشانی = "#sun" پایان پایان`
`هدف` target	صفحه کجا باز شود، با همان واژه‌های پیوند: `پنجره جدید`، `همین پنجره`، `پنجره والد`، `پنجره اصلی`. [enum: target]	`نقشه تصویر: نام = "m" ناحیه: قالب ناحیه = مستطیل مختصات = "0,0,50,50" جایگزین = "مستندات" نشانی = "https://example.com" هدف = "پنجره جدید" پایان پایان`
`دانلود` download	مقصد را به‌جای باز کردن، مثل پیوند، به شکل پرونده ذخیره می‌کند. مقدار نام پیشنهادی پرونده است. [string]	`نقشه تصویر: نام = "m" ناحیه: قالب ناحیه = مستطیل مختصات = "0,0,50,50" جایگزین = "منو" نشانی = "menu.pdf" دانلود = "menu.pdf" پایان پایان`
`رابطه` rel	نسبت مقصد با صفحه، با همان واژه‌های پیوند، مثل `noopener` یا `nofollow`. [token (list)]	`نقشه تصویر: نام = "m" ناحیه: قالب ناحیه = مستطیل مختصات = "0,0,50,50" جایگزین = "همکار" نشانی = "https://example.org" هدف = "پنجره جدید" رابطه = "noopener" پایان پایان`
`سیاست ارجاع` referrer policy	چه مقدار از نشانی این صفحه به مقصد فرستاده شود، مثل پیوند. [enum: referrer_policy]	`نقشه تصویر: نام = "m" ناحیه: قالب ناحیه = مستطیل مختصات = "0,0,50,50" جایگزین = "بیرون" نشانی = "https://example.com" سیاست ارجاع = "no-referrer" پایان پایان`
`پینگ` ping	نشانی‌هایی که با دنبال شدن ناحیه خبردار می‌شوند، مثل پیوند. [url (list)]	`نقشه تصویر: نام = "m" ناحیه: قالب ناحیه = مستطیل مختصات = "0,0,50,50" جایگزین = "پیشنهاد" نشانی = "/offer" پینگ = "https://example.com/count" پایان پایان`
`جایگزین` alt	متن ناحیه، برای کسانی که نمی‌توانند روی عکس کلیک کنند. صفحه‌خوان‌ها آن را به‌عنوان نام پیوند می‌خوانند. همیشه بدهیدش. [string]	`نقشه تصویر: نام = "m" ناحیه: قالب ناحیه = مستطیل مختصات = "0,0,50,50" جایگزین = "صفحه‌ی آشپزخانه را باز کن" نشانی = "/kitchen" پایان پایان`

صدا و ویدیو

`صدا` (English: `audio`; HTML: `<audio>`)

پخش‌کننده‌ی صدا. کنترل‌ها را بگذارید تا خواننده بتواند شروعش کند. پرونده را با نشانی یا با فرزندهای منبع بدهید. محتوا فقط در مرورگری دیده می‌شود که نتواند صدا پخش کند.

صدا: کنترل‌ها = درست نشانی = "song.mp3" محتوا = "مرورگر شما نمی‌تواند صدا پخش کند." پایان

ویژگی	کار آن	نمونه
`نشانی` url	نشانی پرونده‌ی صدا. اگر چند قالب عرضه می‌کنید به‌جای آن از فرزندهای `منبع` استفاده کنید. [url]	`صدا: نشانی = "rain.ogg" کنترل‌ها = درست پایان`
`میان‌مبدا` crossorigin	آیا درخواست پرونده‌ای از سایت دیگر اعتبارنامه می‌فرستد: `ناشناس` یا `با اعتبارنامه`. وقتی اسکریپتی صدا را تحلیل می‌کند لازم است. [enum: crossorigin]	`صدا: نشانی = "https://cdn.example.com/a.mp3" کنترل‌ها = درست میان‌مبدا = ناشناس پایان`
`پیش‌بارگذاری` preload	پیش از زدن پخش چقدر گرفته شود: `هیچ` (هیچ)، `فراداده` (فقط مدت) یا `خودکار` (هر قدر مرورگر بخواهد). [enum: preload]	`صدا: نشانی = "long-talk.mp3" کنترل‌ها = درست پیش‌بارگذاری = فراداده پایان`
`پخش خودکار` autoplay	یک مقدار درست یا نادرست. هر چه زودتر پخش شروع شود. مرورگرها آن را برای صدا نادیده می‌گیرند مگر اینکه عنصر `بی‌صدا` هم باشد یا خواننده پیش‌تر با صفحه کار کرده باشد. [bool]	`صدا: نشانی = "ambient.mp3" پخش خودکار = درست بی‌صدا = درست حلقه = درست پایان`
`حلقه` loop	یک مقدار درست یا نادرست. وقتی صدا تمام شد، از اول شروع کن. [bool]	`صدا: نشانی = "rain.ogg" کنترل‌ها = درست حلقه = درست پایان`
`بی‌صدا` muted	یک مقدار درست یا نادرست. با صدای خاموش شروع کن. خواننده می‌تواند در کنترل‌ها روشنش کند. [bool]	`صدا: نشانی = "rain.ogg" کنترل‌ها = درست بی‌صدا = درست پایان`
`کنترل‌ها` controls	یک مقدار درست یا نادرست. با `درست` مرورگر کنترل‌های پخش، توقف، بلندی صدا و جایگاه خودش را نشان می‌دهد. بدون آن پخش‌کننده دیده نمی‌شود. [bool]	`صدا: نشانی = "song.mp3" کنترل‌ها = درست پایان`

`ویدیو` (English: `video`; HTML: `<video>`)

پخش‌کننده‌ی ویدیو. کنترل‌ها را بگذارید تا خواننده بتواند شروعش کند، و عرض و ارتفاع بدهید. پرونده از نشانی یا فرزندهای منبع می‌آید و زیرنویس از فرزندهای شیار.

ویدیو: عرض = ۳۲۰ کنترل‌ها = درست پوستر = "cover.jpg"
    منبع: نشانی = "clip.mp4" نوع = "video/mp4" پایان
پایان

ویژگی	کار آن	نمونه
`عرض` width	پهنای پخش‌کننده به پیکسل. همراه با `ارتفاع` آن را بگذارید تا هنگام بار شدن ویدیو صفحه نپرد. [ulength]	`ویدیو: نشانی = "clip.mp4" کنترل‌ها = درست عرض = ۴۸۰ ارتفاع = ۲۷۰ پایان`
`ارتفاع` height	ارتفاع پخش‌کننده به پیکسل. [ulength]	`ویدیو: نشانی = "clip.mp4" کنترل‌ها = درست عرض = ۴۸۰ ارتفاع = ۲۷۰ پایان`
`نشانی` url	نشانی پرونده‌ی ویدیو. اگر چند قالب عرضه می‌کنید به‌جای آن از فرزندهای `منبع` استفاده کنید. [url]	`ویدیو: نشانی = "clip.mp4" کنترل‌ها = درست عرض = ۳۲۰ پایان`
`میان‌مبدا` crossorigin	آیا درخواست پرونده‌ای از سایت دیگر اعتبارنامه می‌فرستد: `ناشناس` یا `با اعتبارنامه`. وقتی اسکریپتی فریم‌ها را می‌خواند یا زیرنویس از سایت دیگری می‌آید لازم است. [enum: crossorigin]	`ویدیو: نشانی = "https://cdn.example.com/v.mp4" کنترل‌ها = درست میان‌مبدا = ناشناس عرض = ۳۲۰ پایان`
`پیش‌بارگذاری` preload	پیش از زدن پخش چقدر گرفته شود: `هیچ`، `فراداده` یا `خودکار`. برای صفحه‌ای با ویدیوهای زیاد `فراداده` انتخاب خوبی است. [enum: preload]	`ویدیو: نشانی = "clip.mp4" کنترل‌ها = درست پیش‌بارگذاری = فراداده عرض = ۳۲۰ پایان`
`پخش خودکار` autoplay	یک مقدار درست یا نادرست. بلافاصله شروع کن. مرورگرها فقط برای ویدیویی که `بی‌صدا` هم باشد اجازه می‌دهند. [bool]	`ویدیو: نشانی = "loop.mp4" پخش خودکار = درست بی‌صدا = درست حلقه = درست پخش درجا = درست عرض = ۳۲۰ پایان`
`حلقه` loop	یک مقدار درست یا نادرست. وقتی ویدیو تمام شد، از اول شروع کن. [bool]	`ویدیو: نشانی = "loop.mp4" کنترل‌ها = درست حلقه = درست عرض = ۳۲۰ پایان`
`بی‌صدا` muted	یک مقدار درست یا نادرست. با صدای خاموش شروع کن. [bool]	`ویدیو: نشانی = "clip.mp4" کنترل‌ها = درست بی‌صدا = درست عرض = ۳۲۰ پایان`
`کنترل‌ها` controls	یک مقدار درست یا نادرست. با `درست` مرورگر کنترل‌های پخش، توقف، بلندی صدا، جایگاه و تمام‌صفحه را نشان می‌دهد. [bool]	`ویدیو: نشانی = "clip.mp4" کنترل‌ها = درست عرض = ۳۲۰ پایان`
`پوستر` poster	تصویری که تا پخش نشدن ویدیو جای آن نشان داده می‌شود. نام پرونده یا نشانی بدهید. [url]	`ویدیو: نشانی = "clip.mp4" کنترل‌ها = درست پوستر = "cover.jpg" عرض = ۳۲۰ پایان`
`پخش درجا` plays inline	یک مقدار درست یا نادرست. در گوشی‌هایی که وگرنه هر ویدیو را تمام‌صفحه باز می‌کنند، پخش را درون صفحه نگه می‌دارد. [bool]	`ویدیو: نشانی = "clip.mp4" کنترل‌ها = درست پخش درجا = درست عرض = ۳۲۰ پایان`

`شیار` (English: `track`; HTML: `<track>`)

یک شیار متنی برای ویدیو یا صدا: زیرنویس، شرح، توصیف یا فصل‌ها، از یک پرونده‌ی WebVTT. نشانی الزامی است. محتوا ندارد.

ویدیو: نشانی = "talk.mp4" کنترل‌ها = درست عرض = ۳۲۰
    شیار: نشانی = "talk.fa.vtt" نوع شیار = زیرنویس زبان شیار = "fa" برچسب = "فارسی" پایان
پایان

الزامی: url · فقط درون: video, audio · عنصر تهی است و فرزند نمی‌پذیرد

ویژگی	کار آن	نمونه
`نشانی` url	نشانی پرونده‌ی WebVTT، الزامی. [url]	`ویدیو: نشانی = "talk.mp4" کنترل‌ها = درست عرض = ۳۲۰ شیار: نشانی = "captions/talk.vtt" نوع شیار = شرح زبان شیار = "fa" برچسب = "شرح" پایان پایان`
`نوع شیار` kind	متن چیست: `زیرنویس` (ترجمه‌ی گفتار)، `شرح` (گفتار و صداها، برای ناشنوایان)، `توصیف` (آنچه دیده می‌شود، برای نابینایان)، `فصل‌ها` (عنوان برای گشت‌وگذار) یا `فراداده` (برای اسکریپت، نشان داده نمی‌شود). [enum: track_kind]	`ویدیو: نشانی = "talk.mp4" کنترل‌ها = درست عرض = ۳۲۰ شیار: نشانی = "talk.vtt" نوع شیار = فصل‌ها زبان شیار = "fa" برچسب = "فصل‌ها" پایان پایان`
`زبان شیار` srclang	زبان متن، به شکل کد زبان مثل `en` یا `fa`. برای `زیرنویس` الزامی است. [lang]	`ویدیو: نشانی = "talk.mp4" کنترل‌ها = درست عرض = ۳۲۰ شیار: نشانی = "talk.en.vtt" نوع شیار = زیرنویس زبان شیار = "en" برچسب = "انگلیسی" پایان پایان`
`برچسب` label	نام شیار در فهرست پخش‌کننده، مثلاً `فارسی`. [string]	`ویدیو: نشانی = "talk.mp4" کنترل‌ها = درست عرض = ۳۲۰ شیار: نشانی = "talk.vtt" نوع شیار = زیرنویس زبان شیار = "fa" برچسب = "فارسی (ایران)" پایان پایان`
`پیش‌فرض` default	یک مقدار درست یا نادرست. این شیار را هنگام شروع ویدیو روشن کن، مگر اینکه خواننده شیار دیگری انتخاب کرده باشد. فقط روی یک شیار بگذارید. [bool]	`ویدیو: نشانی = "talk.mp4" کنترل‌ها = درست عرض = ۳۲۰ شیار: نشانی = "talk.vtt" نوع شیار = زیرنویس زبان شیار = "fa" برچسب = "فارسی" پیش‌فرض = درست پایان پایان`

قاب و شیء جاسازی‌شده

`قاب درونی` (English: `iframe`; HTML: `<iframe>`)

قابی که صفحه‌ای دیگر را درون این صفحه نشان می‌دهد. صفحه یک نشانی در نشانی است یا سندی کوتاه در محتوای سند. به آن عنوان و اندازه بدهید و با قرنطینه قفلش کنید.

قاب درونی: نشانی = "https://example.com/widget" عنوان = "ابزارک" عرض = ۴۰۰ ارتفاع = ۲۴۰ قرنطینه = "allow-scripts" پایان

ویژگی	کار آن	نمونه
`عرض` width	پهنای قاب. عدد تنها یعنی پیکسل. مرورگرها به قاب به‌طور پیش‌فرض ۳۰۰ پیکسل می‌دهند. [ulength]	`قاب درونی: نشانی = "https://example.com/embed" عنوان = "جاسازی" عرض = ۴۸۰ ارتفاع = ۲۷۰ پایان`
`ارتفاع` height	ارتفاع قاب. عدد تنها یعنی پیکسل. پیش‌فرض ۱۵۰ پیکسل است. [ulength]	`قاب درونی: نشانی = "https://example.com/embed" عنوان = "جاسازی" عرض = ۴۸۰ ارتفاع = ۲۷۰ پایان`
`نام` name	نامی برای قاب، تا اسکریپت‌ها آن را به‌عنوان پنجره‌ای نام‌دار پیدا کنند. زبان صفحه برای `هدف` پیوند فقط چهار واژه (`پنجره جدید`، `همین پنجره`، `پنجره والد`، `پنجره اصلی`) را می‌پذیرد. [string]	`قاب درونی: نام = "preview" عنوان = "پیش‌نمایش" عرض = ۳۰۰ ارتفاع = ۱۶۰ محتوای سند = "<p>خالی</p>" پایان`
`سیاست ارجاع` referrer policy	چه مقدار از نشانی این صفحه هنگام درخواست صفحه‌ی قاب فرستاده شود، با همان واژه‌های پیوند. [enum: referrer_policy]	`قاب درونی: نشانی = "https://example.com/embed" عنوان = "جاسازی" عرض = ۳۰۰ ارتفاع = ۱۶۰ سیاست ارجاع = "no-referrer" پایان`
`بارگذاری` loading	چه وقت قاب بار شود: `فوری` بلافاصله یا `با تاخیر` وقتی خواننده نزدیک آن اسکرول کند. برای قاب ته صفحه `با تاخیر` بگذارید. [enum: loading]	`قاب درونی: نشانی = "https://example.com/map" عنوان = "نقشه" عرض = ۴۰۰ ارتفاع = ۲۴۰ بارگذاری = با تاخیر پایان`
`محتوای سند` srcdoc	یک سند کوچک کامل، به شکل متن HTML، که به‌جای بار کردن نشانی در قاب نشان داده می‌شود. نویسه‌هایش برای شما فرار داده می‌شوند. [string]	`قاب درونی: عنوان = "یادداشت" عرض = ۳۰۰ ارتفاع = ۸۰ محتوای سند = "<p style='font-family:Tahoma,sans-serif'>سلام از درون قاب</p>" پایان`
`اجازه تمام‌صفحه` allow fullscreen	یک مقدار درست یا نادرست. با `درست` صفحه‌ی درون قاب می‌تواند تمام‌صفحه شود. [bool]	`قاب درونی: نشانی = "https://example.com/player" عنوان = "پخش‌کننده" عرض = ۴۰۰ ارتفاع = ۲۴۰ اجازه تمام‌صفحه = درست پایان`
`قرنطینه` sandbox	محدودیت‌های قاب. مقدار خالی همه‌ی اجازه‌ها را برمی‌دارد. واژه‌هایی با فاصله بعضی را پس می‌دهند: `allow-scripts`، `allow-forms`، `allow-popups`، `allow-same-origin` و جز این‌ها. `allow-scripts` و `allow-same-origin` را با هم به صفحه‌ای که به آن اعتماد ندارید ندهید. [string]	`قاب درونی: نشانی = "https://example.com/form" عنوان = "فرم" عرض = ۴۰۰ ارتفاع = ۲۴۰ قرنطینه = "allow-forms allow-scripts" پایان`
`اجازه` allow	فهرستی از قابلیت‌های مرورگر که قاب می‌تواند به کار ببرد، با نقطه‌ویرگول، مثل `fullscreen`، `camera`، `microphone` یا `geolocation`. پیش‌فرض برای صفحه‌های سایت دیگر ندادن هیچ‌کدام است. [string]	`قاب درونی: نشانی = "https://example.com/call" عنوان = "تماس تصویری" عرض = ۴۰۰ ارتفاع = ۳۰۰ اجازه = "camera; microphone" پایان`
`نشانی` url	نشانی صفحه‌ای که در قاب نشان داده می‌شود. برای سندی کوتاه که همین‌جا می‌نویسید به‌جای آن `محتوای سند` را به کار ببرید. [url]	`قاب درونی: نشانی = "https://example.com/embed" عنوان = "صفحه‌ی جاسازی‌شده" عرض = ۴۰۰ ارتفاع = ۲۰۰ پایان`

`جاسازی` (English: `embed`; HTML: `<embed>`)

یک منبع بیرونی، مثل پی‌دی‌اف، را در صفحه می‌گذارد (embed در HTML). نشانی الزامی است. محتوا ندارد، پس متن جایگزین هم ندارد.

جاسازی: نشانی = "report.pdf" نوع = "application/pdf" عرض = ۴۰۰ ارتفاع = ۳۰۰ پایان

الزامی: url · عنصر تهی است و فرزند نمی‌پذیرد

ویژگی	کار آن	نمونه
`عرض` width	پهنای ناحیه‌ی جاسازی‌شده، به پیکسل اگر عدد تنها باشد. [ulength]	`جاسازی: نشانی = "report.pdf" نوع = "application/pdf" عرض = ۵۰۰ ارتفاع = ۳۰۰ پایان`
`ارتفاع` height	ارتفاع ناحیه‌ی جاسازی‌شده، به پیکسل اگر عدد تنها باشد. [ulength]	`جاسازی: نشانی = "report.pdf" نوع = "application/pdf" عرض = ۵۰۰ ارتفاع = ۳۰۰ پایان`
`نشانی` url	نشانی منبع، الزامی. [url]	`جاسازی: نشانی = "slides.pdf" نوع = "application/pdf" عرض = ۴۰۰ ارتفاع = ۳۰۰ پایان`
`نوع` type	نوع MIME منبع، مثل `application/pdf`. به مرورگر کمک می‌کند شیوه‌ی نشان دادنش را برگزیند. [mime]	`جاسازی: نشانی = "report.pdf" نوع = "application/pdf" عرض = ۴۰۰ ارتفاع = ۳۰۰ پایان`

`شیء` (English: `object`; HTML: `<object>`)

یک منبع بیرونی که در صفحه نشان داده می‌شود، با محتوای جایگزین (object در HTML). نشانی الزامی است. اگر مرورگر نتواند پرونده را نشان دهد، فرزندها را نشان می‌دهد، که جای پیوند دانلود است.

شیء: نشانی = "report.pdf" نوع = "application/pdf" عرض = ۴۰۰ ارتفاع = ۳۰۰
    پیوند: نشانی = "report.pdf" محتوا = "گزارش را دانلود کنید" پایان
پایان

الزامی: url

ویژگی	کار آن	نمونه
`عرض` width	پهنای شیء، به پیکسل اگر عدد تنها باشد. [ulength]	`شیء: نشانی = "chart.svg" نوع = "image/svg+xml" عرض = ۳۲۰ ارتفاع = ۲۰۰ محتوا = "یک نمودار" پایان`
`ارتفاع` height	ارتفاع شیء، به پیکسل اگر عدد تنها باشد. [ulength]	`شیء: نشانی = "chart.svg" نوع = "image/svg+xml" عرض = ۳۲۰ ارتفاع = ۲۰۰ محتوا = "یک نمودار" پایان`
`نوع` type	نوع MIME منبع، مثل `application/pdf` یا `image/svg+xml`. [mime]	`شیء: نشانی = "chart.svg" نوع = "image/svg+xml" عرض = ۳۰۰ ارتفاع = ۲۰۰ محتوا = "یک نمودار" پایان`
`نام` name	نامی برای شیء، برای اسکریپت‌ها و فرم‌ها. [string]	`شیء: نشانی = "chart.svg" نوع = "image/svg+xml" نام = "chart" عرض = ۳۰۰ ارتفاع = ۲۰۰ محتوا = "یک نمودار" پایان`
`نشانی` url	نشانی منبع، الزامی. در HTML به ویژگی `data` تبدیل می‌شود. [url]	`شیء: نشانی = "chart.svg" نوع = "image/svg+xml" عرض = ۳۰۰ ارتفاع = ۲۰۰ محتوا = "یک نمودار" پایان`
`فرم` form	`شناسه`ی فرمی که این شیء به آن تعلق دارد. مترجم بررسی می‌کند که عنصری با آن شناسه در صفحه باشد. [idref]	`جعبه: شناسه = "order" پایان شیء: فرم = "order" نشانی = "widget.svg" نوع = "image/svg+xml" عرض = ۲۰۰ ارتفاع = ۱۰۰ محتوا = "ابزارک" پایان`

نقاشی

`بوم` (English: `canvas`; HTML: `<canvas>`)

سطح نقاشی خالی (canvas در HTML). با کد و از راه دام.دریافت زمینه رویش می‌کشید. به آن شناسه بدهید تا کد پیدایش کند، و اندازه‌اش را با ویژگی‌ها بدهید، نه با CSS.

بوم: شناسه = "pad" عرض = ۳۰۰ ارتفاع = ۱۵۰ پس زمینه = "#f1f5f9" پایان

ویژگی	کار آن	نمونه
`عرض` width	پهنای سطح نقاشی به پیکسل. این تعداد پیکسل‌هایی است که رویشان می‌کشید. پهنایی که با CSS بدهید فقط آن‌ها را می‌کشد. [ulength]	`بوم: عرض = ۴۰۰ ارتفاع = ۲۰۰ کادر = "1px solid #94a3b8" پایان`
`ارتفاع` height	ارتفاع سطح نقاشی به پیکسل. پیش‌فرض ۱۵۰ است. [ulength]	`بوم: عرض = ۴۰۰ ارتفاع = ۲۰۰ کادر = "1px solid #94a3b8" پایان`

`اس‌وی‌جی` (English: `svg`; HTML: `<svg>`)

یک تصویر برداری که همان‌جا نوشته می‌شود (svg در HTML). محتوایش نشانه‌گذاری شکل‌هاست، همان‌طور که نوشته شده و بدون فرار دادن نویسه‌ها درج می‌شود، پس فقط نشانه‌گذاری‌ای را که خودتان نوشته‌اید به کار ببرید. تصویر در هر اندازه تیز می‌ماند.

اس‌وی‌جی: جعبه دید = "0 0 100 100" عرض = ۱۲۰ ارتفاع = ۱۲۰ محتوا = "<circle cx='50' cy='50' r='40' fill='tomato'/>" پایان

ویژگی	کار آن	نمونه
`جعبه دید` view box	دستگاه مختصات درون تصویر: چهار عدد، `min-x min-y width height`. شکل‌ها در همین واحدها کشیده می‌شوند و به `عرض` و `ارتفاع` روی صفحه بزرگ یا کوچک می‌شوند. [string]	`اس‌وی‌جی: جعبه دید = "0 0 200 100" عرض = ۲۰۰ ارتفاع = ۱۰۰ محتوا = "<rect width='200' height='100' fill='#ccfbf1'/>" پایان`
`عرض` width	پهنای تصویر روی صفحه، مثل `120` یا `50%`. [string]	`اس‌وی‌جی: جعبه دید = "0 0 100 100" عرض = "50%" ارتفاع = 100 محتوا = "<circle cx='50' cy='50' r='40' fill='gold'/>" پایان`
`ارتفاع` height	ارتفاع تصویر روی صفحه، مثل `120`. [string]	`اس‌وی‌جی: جعبه دید = "0 0 100 100" عرض = ۱۰۰ ارتفاع = ۱۰۰ محتوا = "<circle cx='50' cy='50' r='40' fill='gold'/>" پایان`
`فضای نام` xmlns	نشانی فضای نام XML، یعنی `http://www.w3.org/2000/svg`. فقط وقتی لازم است که اس‌وی‌جی پرونده‌ای مستقل ذخیره شود. درون صفحه می‌توانید ننویسیدش. [absolute_url]	`اس‌وی‌جی: فضای نام = "http://www.w3.org/2000/svg" جعبه دید = "0 0 100 100" عرض = ۱۰۰ ارتفاع = ۱۰۰ محتوا = "<circle cx='50' cy='50' r='40' fill='teal'/>" پایان`

`ریاضی` (English: `math`; HTML: `<math>`)

یک فرمول ریاضی که با MathML نوشته می‌شود (math در HTML). محتوایش نشانه‌گذاری است، همان‌طور که نوشته شده: mi برای یک نام، mn برای عدد، mo برای عملگر، mfrac برای کسر، msup برای توان، msqrt برای ریشه‌ی دوم.

ریاضی: محتوا = "<msqrt><mi>x</mi></msqrt><mo>=</mo><mfrac><mn>1</mn><mn>2</mn></mfrac>" پایان

خودتان امتحان کنید

صفحه‌ای با فهرست مطالب بنویسید: فهرستی از پیوندهایی که با # به سه سرتیتر پایین‌تر می‌روند. در پایین یک پیوند برای برگشتن به بالا بگذارید.
نقاشی خودتان را در یک اس‌وی‌جی بکشید: خانه‌ای از یک rect، یک polygon برای سقف و یک circle برای خورشید. بعد عرض و ارتفاع را عوض کنید ولی جعبه دید را نگه دارید و ببینید چطور بزرگ و کوچک می‌شود.
نقشه‌ی تصویر را طوری عوض کنید که مربع قرمز پیوند به یک سرتیتر همین صفحه باشد، و یک نقطه‌ی داغ سوم با چندضلعی اضافه کنید.
نمونه‌ی بوم را باز کنید، با دام.تصادفی() کاری کنید که مهر هر بار رنگ دیگری بگیرد، و دکمه‌ی دومی اضافه کنید که کل بوم را پر کند.

پیوند، تصویر و رسانه

پیوندها

تصویرها

یک عکس، چند اندازه

نقشه‌ی تصویر

صدا و ویدیو

قاب و شیء جاسازی‌شده

بوم، اس‌وی‌جی و ریاضی

مرجع: پیوند، تصویر و رسانه

پیوندها

پیوند (English: link; HTML: <a>)

تصویر و نقشه

تصویر (English: image; HTML: <img>)

عکس (English: picture; HTML: <picture>)

منبع (English: source; HTML: <source>)

نقشه تصویر (English: image map; HTML: <map>)

ناحیه (English: area; HTML: <area>)

صدا و ویدیو

صدا (English: audio; HTML: <audio>)

ویدیو (English: video; HTML: <video>)

شیار (English: track; HTML: <track>)

قاب و شیء جاسازی‌شده

قاب درونی (English: iframe; HTML: <iframe>)

جاسازی (English: embed; HTML: <embed>)

شیء (English: object; HTML: <object>)

نقاشی

بوم (English: canvas; HTML: <canvas>)

اس‌وی‌جی (English: svg; HTML: <svg>)

ریاضی (English: math; HTML: <math>)

خودتان امتحان کنید

`پیوند` (English: `link`; HTML: `<a>`)

`تصویر` (English: `image`; HTML: `<img>`)

`عکس` (English: `picture`; HTML: `<picture>`)

`منبع` (English: `source`; HTML: `<source>`)

`نقشه تصویر` (English: `image map`; HTML: `<map>`)

`ناحیه` (English: `area`; HTML: `<area>`)

`صدا` (English: `audio`; HTML: `<audio>`)

`ویدیو` (English: `video`; HTML: `<video>`)

`شیار` (English: `track`; HTML: `<track>`)

`قاب درونی` (English: `iframe`; HTML: `<iframe>`)

`جاسازی` (English: `embed`; HTML: `<embed>`)

`شیء` (English: `object`; HTML: `<object>`)

`بوم` (English: `canvas`; HTML: `<canvas>`)

`اس‌وی‌جی` (English: `svg`; HTML: `<svg>`)

`ریاضی` (English: `math`; HTML: `<math>`)