آموزش مقدماتی HTML و CSS (جلسه ۱۷: افزودن رسانه – بخش ۱)
1398/03/21 12:24 , میلاد صاحب نظر

آموزش مقدماتی HTML و CSS (جلسه ۱۷: افزودن رسانه – بخش ۱)

همه ما در اینترنت در جستجوی محتوای جالب و آموزنده هستیم، که معمولاً آن‌ اطلاعات را به شکل متن ساده می‌یابیم.

برای بهبود بخشیدن و جالب‌تر کردن این متون ساده، HTML روش‌هایی برای ادغام رسانه‌های پر محتوا به شکل تصاویر، ترک‌های صوتی و ویدئوها، و همچنین امکان ادغام محتوا از یک صفحه وب دیگر به شکل قالب inline فراهم کرده است. با ما همراه باشید!

۱- ساختن اولین صفحه وب قسمت اول ۷-باز کردن Box Model قسمت اول ۱۳-تنظیمات پشت زمینه قسمت اول ۱۹-ایجاد فرم‌ها قسمت اول
۲-ساختن اولین صفحه وب قسمت دوم ۸-باز کردن Box Model قسمت دوم ۱۴-تنظیمات پشت زمینه قسمت دوم ۲۰-ایجاد فرم‌ها قسمت دوم
۳-آشنایی با HTML  قسمت اول ۹-تنظیم موقعیت محتوا قسمت اول ۱۵-ایجاد لیست‌ها قسمت اول ۲۱-سازماندهی اطلاعات با جداول قسمت اول
۴-آشنایی با HTML قسمت دوم ۱۰-تنظیم موقعیت محتوا قسمت دوم ۱۶-ایجاد لیست‌ها قسمت دوم ۲۲-سازماندهی اطلاعات با جداول قسمت دوم
۵-آشنایی با CSS قسمت اول ۱۱-کار با Typography قسمت اول ۱۷-افزودن رسانه قسمت اول ۲۳-نوشتن بهترین کد
۶-آشنایی با CSS قسمت دوم ۱۲-کار با Typography قسمت دوم ۱۸-افزودن رسانه قسمت دوم  

قابلیت درج تصاویر، ترک‌های صوتی، ویدئوها و قالب‌های inline در کل خیلی خوب است و اگرچه قابلیت اضافه کردن ترک‌های صوتی و ویدئوها به وبسایت چندین سال است که در دسترس توسعه‌دهندگان وب است اما فرآیند درج آن‌ها بسیار خسته‌کننده و سخت است.

خوشبختانه، این فرآیند بهبود یافته و با پشتیبانی مستقیم HTML، کار با آن‌ها آسان‌تر شده است.

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

اضافه کردن تصاویر

برای اضافه کردن تصاویر به یک صفحه، از عنصر inline به نام <img> استفاده می‌کنیم.

عنصر <img> یک عنصر مستقل یا خالی است، یعنی اینکه هیچ محتوای دیگری درون آن قرار نمی‌گیرد و یک تگ تن‌ها و کاملاً مستقل است. برای اینکه عنصر <img> عمل کند، باید از یک اتریبیوت و مقدار src استفاده شود تا منبع تصویر مشخص شود.

مقدار اتریبیوت Src یک URL است که معمولاً مرتبط با سروری است که وبسایت در آن قرار دارد.

در کنار اتریبیوت src، از اتریبیوت alt (متن جایگزین) که محتوای یک تصویر را توصیف می‌کند نیز باید استفاده شود. مقدار اتریبیوت alt توسط موتورهای جستجو و تکنولوژی‌های کمکی، برای کمک به رساندن منظور و هدف یک تصویر مورد استفاده قرار می‌گیرد.

اگر یک تصویر به هر دلیلی برای کاربر نمایش داده نشود، متن alt به جای تصویر نمایش داده می‌شود.

<img src="dog.jpg" alt="A black, brown, and white dog wearing a kerchief">

متن جایگزین

تصویر ۱۷.۱. متن جایگزین “A blackU brown and white dog wearing a kerchief,” به جای تصویر نمایش داده نشده، نمایش داده می‌شود.

فرمت‌های تصویری مجاز و پشتیبانی شده

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

معمول و معروف‌ترین فرمت‌های مجاز و پشتیبانی شده در فضای آنلاین عبارت‌اند از jpg، gif و ong. از بین این‌ها، فرمت‌هایی که امروزه خیلی زیاد استفاده می‌شوند فرمت‌های jpg و png هستند.

فرمت jpg تصاویر با کیفیت و با تعداد رنگ بالا و در عین حال با سایز فایل مناسب و به صرفه فراهم می‌کند که برای سریع‌تر بارگذاری شدن صفحات وب ایده آل هستند. فرمت png برای تصاویر با وضوح یا تعداد رنگ کم مناسب است.

در اکثر مواقع مشاهده می‌کنیم که تصاویر jpg برای عکس‌ها و تصاویر png برای آیکن‌ها یا الگوهای پس‌زمینه مورد استفاده قرار می‌گیرند.

سایز‌بندی تصاویر

شناسایی سایز یک تصویر بسیار مهم است، چون می‌توانیم قبل از بارگذاری تصویر به مرورگر بگوییم بزرگی یک تصویر باید چقدر باشد.

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

یک آپشن، استفاده از اتریبیوت‌های width و height به صورت مستقیم در تگ <img> در HTML است.

علاوه بر این، می‌توان تصاویر را با استفاده از ویژگی‌های width و height در CSS سایزبندی کرد. وقتی هم از اتریبیوت‌های HTML و هم از اتریبیوت‌های CSS استفاده کنیم، اتریبیوت‌های CSS نسبت به اتریبیوت‌های HTML اولویت می‌یابند.

مشخص کردن یک عرض یا ارتفاع باعث می‌شود بقیه ابعاد به صورت خودکار تنظیم شوند تا نسبت (aspect ratio) تصویر حفظ شود.

به عنوان مثال، اگر بخواهیم یک تصویر ۲۰۰ پیکسل ارتفاع داشته باشد، اما نسبت به عرض زیاد حساس نباشیم، می‌توانیم ارتفاع را روی ۲۰۰ پیکسل تنظیم کنیم و به این صورت عرض تصویر به صورت خودکار متناسب با ارتفاع تنظیم خواهد شد.

همچنین می‌توانید هر دو مقادیر width و height را نیز مشخص کنید.

به هر حال، انجام این کار ممکن است نسبت تناسب یک تصویر را به هم بزند و باعث شود که تصویر ظاهر نامتناسبی داشته باشد.

img {
  height: 200px;
  width: 200px;
}

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

در چنین شرایطی، معمولاً برای تغییر سایز تصاویر از CSS استفاده می‌شود.

تعیین موقعیت تصاویر

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

به هر حال، می‌توان موقعیت‌های آن‌ها را با استفاده از CSS (با ویژگی‌های float و display و همچنین ویژگی‌های box model از جمله border، padding و margin) تغییر داد.

تعیین موقعیت inline تصاویر

عنصر <img> به صورت پیش‌فرض یک عنصر سطح inline است. اضافه کردن یک تصویر بدون هیچ استایلی به یک صفحه، باعث می‌شود آن تصویر درون همان خطی که محتوا در آن قرار دارند، قرار بگیرد و محتوا آن را احاطه کنند.

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

<p>Gatsby is a black, brown, and white hound mix puppy who loves howling at fire trucks and collecting belly rubs. <img src="dog.jpg" alt="A black, brown, and white dog wearing a kerchief"> Although he spends most of his time sleeping he is also quick to chase any birds who enter his vision.</p>

بدون تغییر رها کردن تصاویر در موقعیت پیش‌فرضشان چندان عمل مرسومی نیست. اکثر مواقع، تصاویر به عنوان عنصرهای block-level نمایش داده می‌شوند یا به یک سمت float می‌شوند.

تعیین موقعیت block تصاویر

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

img {
  display: block;
}

تعیین موقعیت تصاویر به صورت کامل در سمت چپ یا راست

گاهی نمایش یک تصویر به عنوان یک عنصر سطح inline یا block یا شاید حتی inline-block روش ایده آلی نیست.

ممکن است بخواهیم تصویر در سمت چپ یا راست عنصری که تصویر درون آن واقع است، قرار گیرد در حالی که بقیه محتوا باید در صورت لزوم در اطراف تصویر قرار بگیرند. برای این منظور، از ویژگی float با مقدار left یا right استفاده می‌کنیم.

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

Float کردن تصویر فقط شروع کار است. به هر حال، بقیه محتوا دقیقاً در مقابل آن قرار می‌گیرند. برای ایجاد فضا در اطراف یک تصویر، از ویژگی margin استفاده می‌کنیم.

علاوه بر این، می‌توانیم در صورت نیاز از ویژگی‌های border، padding و background برای ایجاد یک قالب برای تصویر استفاده ‌کنیم.

 

img {
  background: #eaeaed;
  border: 1px solid #9799a7;
  float: right;
  margin: 8px 0 0 20px;
  padding: 4px;
}

چه موقع باید از یک عنصر تصویر و چه موقع از یک عنصر پشت زمینه استفاده کرد؟

دو روش اصلی برای اضافه کردن تصاویر به یک صفحه وب وجود دارند. یک روش، که در این جلسه پوشش داده شد، استفاده از عنصر <img> درون HTML است.

روش دیگر استفاده از ویژگی background یا background-image درون CSS برای قرار دادن یک تصویر پشت زمینه در یک عنصر است. هر دوی این روش‌ها عملی هستند. به هر حال، هر کدام استفاده‌های خاص خودشان را دارند.

عنصر <img> درون HTML زمانی که تصویر مورد استفاده ارزش و بار معنایی دارد و محتوای آن مرتبط با محتوای کل صفحه است، مطلوب و مناسب است.

ویژگی background یا background-image درون CSS زمانی مورد استفاده قرار می‌گیرد که تصویر استفاده شده بخشی از طراحی یا واسط کاربری صفحه باشد. در این صورت، تصویر مستقیماً به محتوای صفحه مرتبط نیست.

عنصر <img> بسیار معروف است و از زمانی که به مشخصات HTML اضافه شد، روش ساخت وبسایت‌ها را برای همیشه تغییر داد.

تمرین

حالا که می‌دانیم چطور تصاویر را به یک صفحه اضافه و موقعیت آن‌ها را مشخص کنیم، اجازه دهید به سراغ وبسایت Styles Conference برویم و ببینیم در کجاها می‌توانیم چند تصویر اضافه کنیم.

  1. اجازه دهید با اضافه کردن چند تصویر به صفحه اصلی شروع کنیم. به طور دقیق، قصد داریم یک تصویر درون هر بخش تیزر قرار بدیم و برخی از صفحاتمان را تبلیغ کنیم.

    قبل از اینکه به سراغ کد برویم، اجازه دهید یک فولدر جدید به نام “images” ایجاد کنیم که مخصوص تصاویر صفحه اصلی ما است.

    درون فولدر “home” سه تصویر اضافه می‌کنیم: jpg، speakers.jpg و venue.jpg. (می‌توانید این تصاویر را با کلیک روی این لینک در یک فایل زیپ دانلود کنید).

    سپس درون فایل index.html، هر بخش تیزر دارای یک عنصر <a> است که هر دو عنصرهای <h3> و <h5> را در بر گرفته است. حالا اجازه دهید عنصر <h5> را به بالای عنصر <a> جابه‌جا کنیم و آن را با یک عنصر <img> جایگزین کنیم.

    مقدار اتریبیوت src برای هر عنصر <img> باید مشابه با ساختار فولدر و نام فایلی که معین کردیم باشد و مقدار اتریبیوت alt محتوای هر تصویر را توضیح می‌دهد.

    کد HTML برای اولین تیزر، برای صفحه Speakers، شبیه به کد زیر است:
    <section class="teaser col-1-3">
      <h5>Speakers</h5>
      <a href="speakers.html">
        <img src="assets/images/home/speakers.jpg" alt="Professional Speaker">
        <h3>World-Class Speakers</h3>
      </a>
      <p>Joining us from all around the world are over twenty fantastic speakers, here to share their stories.</p>
    </section>
    ​

    اجازه دهید این الگو را برای تیزر صفحات Schedule و Venue نیز ادامه دهیم.

  2. حالا که چند تصویر به صفحه اصلی اضافه کردیم، باید استایل‌های آن‌ها را کمی مرتب و تمیز کنیم و اطمینان حاصل کنیم که آن استایل‌ها به صورت مناسب درون طراحی صفحه جای می‌گیرند.

    چون تصاویر به صورت پیش‌فرض عنصرهای سطح inline هستند، پس اجازه دهید تصاویر داخل بخش‌های تیزر را به عنصرهای سطح block تبدیل کنیم. همچنین اجازه دهید حداکثر width آن‌ها را روی 100% قرار دهیم تا مطمئن شویم که از عرض ستون‌های مرتبطشان بیشتر نشوند.

    تغییر این مقدار width بسیار مهم است، چون به تصاویر ما اجازه می‌دهد تا در صورت نیاز متناسب با عرض ستون‌ها تنظیم شوند.

    در آخر، اجازه دهید گوشه‌های تصاویر را کمی گرد کنیم و یک margin پایین با مقدار ۲۲ پیکسل برای تصاویر ایجاد کنیم تا کمی فضا برای آن‌ها فراهم شود.

    وقتی این استایل‌های جدید را به استایل‌های فعلی صفحه اصلی اضافه کردیم (با استفاده از کلاس تیزر به عنوان یک selector مناسب برای عنصرهای <img>)، کد CSS ما به این شکل خواهد بود:
    .teaser img {
      border-radius: 5px;
      display: block;
      margin-bottom: 22px;
      max-width: 100%
    }
    ​
  3. حالا، اجازه دهید تصاویر تمام سخنگویان را به صفحه Speakers اضافه کنیم. کار را با ایجاد یک فولدر “Speakers” درون فولدر “images” و قرار دادن تصاویر تمام سخنگویان در آن، شروع می‌کنیم.

    درون فایل html، اجازه دهید یک عنصر <img> درون هر کدام از عنصرهای <aside> (که محل قرار گرفتن اطلاعات سخنگو هستند) اضافه کنیم.

    اجازه دهید هر عنصر <img> را درون عنصر <div> با مقدار اتریبیوت کلاس speaker-info و درست در بالای عنصر <ul> قرار دهیم.

    مقدار اتریبیوت Src در هر تصویر مشابه با فولدر “speakers” که ساختیم و نام سخنگو خواهد بود. مقدار اتریبیوت alt همان نام سخنگو خواهد بود.

    عنصر <aside> برای نام shay howe به عنوان سخنگو به این شکل است:
    <aside class="col-1-3">
      <div class="speaker-info">
    
        <img src="assets/images/speakers/shay-howe.jpg" alt="Shay Howe">
        
        <ul>
          <li><a href="https://twitter.com/shayhowe">@shayhowe</a></li>
          <li><a href="http://learn.shayhowe.com/">learn.shayhowe.com</a></li>
        </ul>
    
      </div>
    </aside>
    ​

    همین الگو باید برای بقیه سخنگویان نیز استفاده شود.

  4. حالا که چند تصویر به صفحه اصلی اضافه کردیم، قصد داریم چند استایل به تصاویر صفحه Speakers اضافه کنیم.

    اجازه دهید با اعمال ویژگی border-radius با مقدار 50% شروع کنیم تا تصاویرمان به دایره تبدیل شوند. از اینجا به بعد، یک ارتفاع ۱۳۰ پیکسلی ثابت به هر تصویر اضافه می‌کنیم و آن‌ها را به صورت عمودی هم راستای top یا بالای خطی که درون آن قرار دارند، تنظیم می‌کنیم.

    حالا که ارتفاع و موقعیت عمودی مشخص شدند، اجازه دهید حاشیه‌های عمودی به تصاویر اضافه کنیم.

    با استفاده از یک margin منفی ۶۶ پیکسلی در بالای تصاویر، آن‌ها را کمی از عنصر <aside> دور می‌کنیم و کاری می‌کنیم تا در محور عمودی هم مرکز با border بالایی عنصر <div> با مقدار اتریبیوت کلاس speaker-info قرار گیرند.

    سپس، یک margin منفی ۲۲ پیکسلی به پایین تصویر اضافه می‌کنیم تا بین تصویر و عنصر <ul> موجود در زیر آن فضا فراهم شود.

    وقتی این استایل‌های جدید را به استایل‌های فعلی صفحه Speakers اضافه می‌کنیم (با استفاده از کلاس speaker-info به عنوان یک Selector مناسب برای عنصرهای <img>)، کد CSS ما به این شکل خواهد بود:
    .speaker-info img {
      border-radius: 50%;
      height: 130px;
      margin: -66px 0 22px 0;
      vertical-align: top;
    }
    ​

چون از یک margin منفی شدید در عنصر <img> موجود در عنصر <div> که دارای مقدار اتریبیوت کلاس speaker-info است استفاده کردیم، باید padding را از بالای آن عنصر <div> حذف کنیم.

قبلاً از ویژگی padding با مقدار 22px 0 استفاده کردیم، بنابراین ۲۲ پیکسل padding در بالا و زیر و 0 پیکسل padding در چپ و راست عنصر <div> ایجاد می‌شوند.

اجازه دهید این ویژگی و مقدار را به خارج از ویژگی padding-bottom جابه‌جا کنیم، چون این تنها padding است که باید مشخص کنیم و از مقدار ۲۲ پیکسل برای آن استفاده می‌کنیم.

مجموعه قوانین کلاس speaker-info جدید ما به این شکل خواهد بود:

.speaker-info {
  border: 1px solid #dfe2e5;
  border-radius: 5px;
  margin-top: 88px;
  padding-bottom: 22px;
  text-align: center;
}
​

حالا هر دو صفحات اصلی و speaker خیلی زیباتر شدند.

صفحه خانه یا اصلی وبسایت Styles Conference پس از اضافه کردن تصاویر به هر بخش که یک صفحه دیگر را تبلیغ می‌کنند

تصویر ۱۷.۲. صفحه خانه یا اصلی وبسایت Styles Conference پس از اضافه کردن تصاویر به هر بخش که یک صفحه دیگر را تبلیغ می‌کنند.

صفحه Speakers از وبسایت Styles Conference پس از اضافه کردن تصاویر برای هر سخنگو

تصویر ۱۷.۳. صفحه Speakers از وبسایت Styles Conference پس از اضافه کردن تصاویر برای هر سخنگو

افزودن صوت

HTML5 یک روش سریع و آسان برای اضافه کردن فایل‌های صوتی به یک وبسایت فراهم کرده است که در آن از عنصر <audio> استفاده می‌شود. همانند عنصر <img>، عنصر <audio> یک URL منبع که با اتریبیوت Src مشخص می‌شود را می‌پذیرد.

بر خلاف عنصر <img>، عنصر <audio> به هر دو تگ‌های باز و بسته نیاز دارد که به زودی راجع به آن صحبت خواهیم کرد

<audio src="jazz.ogg"></audio>
اتریبیوت‌های صوت

چند اتریبیوت دیگر نیز می‌توانند همراه با اتریبیوت src در عنصر <audio> به کار روند. معروف‌ترین آن‌ها عبارت‌اند از loop، controls، autoplay و preload.

اتریبیوت‌های controls، autoplay و loop همه اتریبیوت‌های Boolean هستند. اتریبیوت‌های Boolean به یک مقدار خاص و از قبل مشخص شده نیاز ندارند.

در عوض، وقتی هر کدام در عنصر <audio> قرار بگیرند، مقدار آن روی true تنظیم می‌شود و عنصر <audio> نیز متناسب با آن رفتار می‌کند.

به صورت پیش‌فرض، عنصر <audio> در یک صفحه نمایش داده نمی‌شود. اگر اتریبیوت autoplay که Boolean است در عنصر <audio> موجود باشد، هیچ چیز در صفحه ظاهر نمی‌شود، اما فایل صوت به صورت خودکار در هنگام بارگذاری صفحه اجرا خواهد شد.

<audio src="jazz.ogg" autoplay></audio>

برای نمایش عنصر <audio> در صفحه، باید اتریبیوت controls که Boolean است استفاده کنیم. وقتی این اتریبیوت برای عنصر <audio> اعمال می‌شود، آنگاه کنترل‌های صوتی پیش‌فرض مرورگر نمایش داده خواهند شد، از جمله کنترل‌های play و pause و همچنین seek و volume.

<audio src="jazz.ogg" controls></audio>

اگر اتریبیوت loop که Boolean است در عنصر <audio> موجود باشد، آنگاه به صورت مداوم فایل صوتی از ابتدا تا انتهایش تکرار خواهد شد.

در آخر، اتریبیوت preload برای عنصر <audio> به شناسایی اطلاعاتی راجع به فاصل صوتی (اگر چنین اطلاعاتی وجود داشته باشد) کمک می‌کند و این اطلاعات باید قبل از اینکه کلیپ اجرا شود بارگذاری شوند. این اتریبیوت سه مقدار می‌پذیرد: auto، none و metadata.

مقدار none هیچ اطلاعاتی راجع به فایل صوتی بارگذاری نمی‌کند، در حالی که مقدار auto همه اطلاعات در مورد فایل صوتی را بارگذاری می‌کند.

مقدار metadata چیزی بین عملکرد مقادیر none و auto است، چون همه اطلاعات متا داده موجود در مورد فایل صوتی (مانند طول کلیپ) را بارگذاری می‌کند، اما هیچ اطلاعاتی راجع به فایل نمی‌دهد.

وقتی اتریبیوت preload در عنصر <audio> موجود نباشد، همه اطلاعات در مورد یک فایل صوتی بارگذاری می‌شوند، درستی مثل وقتی که از اتریبیوت auto استفاده می‌شود.

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

Fallback‌ها و چندین منبع صوتی

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

برای بهره‌مندی از پشتیبانی بهتر مرورگرها، باید از چند fallback صوتی استفاده کنیم که داخل تگ‌های باز و بسته یک عنصر <audio> قرار می‌گیرند.

برای شروع، اتریبیوت Src را از عنصر <audio> حذف می‌کنیم. در عوض، از عنصر <source> با اتریبیوت Src  استفاده می‌کنیم که به صورت تو در تو داخل عنصر <audio> قرار گرفته و یک منبع جدید را تعریف می‌کند.

با استفاده از یک عنصر <source> و اتریبیوت Src برای هر فرمت فایل، می‌توانیم فرمت‌های فایل صوتی را یکی پس از دیگری قرار دهیم. همچنین از اتریبیوت type استفاده می‌کنیم تا به مرورگر کمک کنیم تا سریعاً تشخیص دهد کدام نوع‌های صوتی موجود هستند.

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

چون روش در HTML5 معرفی شد، برخی مرورگرها ممکن است از عنصر <audio> پشتیبانی نکنند. در این مورد، می‌توانید یک لینک برای دانلود فایل صوتی پس از عنصرهای <source> در داخل عنصر <audio> ایجاد کنیم.

<audio controls>
  <source src="jazz.ogg" type="audio/ogg">
  <source src="jazz.mp3" type="audio/mpeg">
  <source src="jazz.wav" type="audio/wav">
  Please <a href="jazz.mp3" download>download</a> the audio file.
</audio>

اجازه دهید کد بالا را بررسی کنیم، عنصر <audio> شامل اتریبیوت controls است که boolean بوده و اطمینان می‌دهد که پخش‌کننده یا player صوتی  در مرورگرهایی که از این عنصر پشتیبانی می‌کنند، نمایش داده شود.

عنصر <audio> شامل اتریبیوت Src نیست و در عوض سه عنصر <source> مختلف را شامل می‌شود. هر عنصر <source> شامل یک اتریبیوت src است که به یک فرمت فایل صوتی متفاوت اشاره می‌کند و دارای یک اتریبیوت type است که فرمت فایل صوتی را شناسایی می‌کند.

به عنوان آخرین Fallback، اگر یک مرورگر هیچ کدام از فرمت‌های فایل صوتی را تشخیص ندهد، لینک anchor برای دانلود فایل صوتی نمایش داده می‌شود.

خلاصه

در این جلسه موضوع اضافه کردن رسانه به وبسایت مورد بررسی قرار گرفت و آموختید که چگونه می‌توانید تصاویر و فایل‌های صوتی به وبسایتتان اضافه کنید.

علاوه بر عنصر <audio>، همچنین در HTML5 عنصر <video> نیز قرار گرفته است که شباهات‌های زیادی با عنصر <audio> دارد و در جلسه بعدی به صورت دقیق مورد بررسی قرار خواهد گرفت.

با MUG همراه باشید!

منبع: learn.shayhowe

جلسه بعد                                                         جلسه قبل

 مطالب مرتبط

تعامل با فایل‌ها در HTML5
ایجاد یک فرم HTML و قابلیت تکمیل خودکار فرم‌ها
۵ قالب رایگان HTML برای ایجاد سریع و آسان‌ وبسایت‌ها!
۹ چیز که باید در مورد HTML5 بدانید
آموزش گام به گام #C
برنامه نویسی شیءگرا چیست؟

از آخرین دوره های آموزشی و تخفیف ها مطلع شوید

با تکمیل فرم زیر ، از اخبار و اطلاعات به روز برنامه نویسی و تکنولوژی عقب نمانید

آخرین مطالب

آموزش جامع SQL Server (جلسه ۱۲)
آموزش جامع SQL Server (جلسه ۱۲)

دستور UPDATE در SQL Server برای تغییر داده‌های موجود در یک جدول، از دستور UPDATE به شکل زیر استفاده ...

آموزش جامع SQL Server (جلسه ۱۵)
آموزش جامع SQL Server (جلسه ۱۵)

دستور DROP TABLE در SQL Server گاهی، لازم است یک جدول که دیگر استفاده‌ای ندارد را حذف کنید. برای ...

آموزش جامع SQL Server (جلسه ۳۵: Window Functionها – بخش ۲)
آموزش جامع SQL Server (جلسه ۳۵: Window Functionها – بخش ۲)

بخش اول از آخرین مبحث دوره جامع آموزش SQL Server در جلسه قبلی بررسی شد. این مبحث که ...

آخرین دیدگاه ها

دیدگاه خود را درباره این پست بنویسید

فرم ارسال نظرات