ورود

**montenegro**

به نام خداوند برنامه نویس عالم !

آموزش تگ های HTML (مقدمه)

سلام به تمامی دوستان عشق کدنویسی!

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

در این آموزشات در هر بخش سه قسمت وجود دارد که حداقل یکی از آنها موجود می باشد :

تگ های منسوخ شده : اشاره به تگ های منسوخ شده برای اطلاع رسانی و البته معرفی جایگزین آنها.
تگ های قدیمی اما کم کاربرد : تگ هایی که منسوخ نشده اند اما قدیمی و کم کاربرد ترند.
تگ های جدید در HTML5 : این بخش جذاب ترین بخش می باشد که به آموزش تگ های جدید که به وسیله HTML5 معرفی شده اند می پردازیم.

نکته : تمامی تگ ها به وسیله صفت های آنها آموزش داده می شود.
نکته : این تگ ها به صورت Category مرتب شده اند.

**M.Wilson** · 93-7-21، 05:34 عصر

قوانین تاپیک :

1- هر گونه اسپم یا خلل در بین آموزش ها اخطار در پی داره.
2- سوالات، پیشنهادات و انتقادات فقط از طریق پ.خ با استارتر تاپیک در میون گذاشته بشه.
3- برای تشکر فقط از دکمه های تشکر و اعتبار استفاده کنید.
4- در صورتی که تخلفی در کار استارتر مشاهده شد (کپی ، قرار دادن لینک سایت خود یا ...) به بنده پ.خ دهید.

یا حق.

**montenegro** · 93-7-21، 11:07 عصر

آموزش تگ های HTML – بخش دوم (Formating 1)

سلام دوستان
خب اولین بخش از آموزشات تگ های HTML (اولین بخش آموزشی ، در واقع این بخش دوم است چون ما مقدمه رو هم یک بخش حساب کردیم ) هم اکنون شروع می شود دقت کنید که قبل از Formating یک Category به نام Basic Tags وجود دارد که در آموزشات اصلی و مقدماتی باید فراگرفته باشید.
در این قسمت چند تگ منسوخ شده (acronym | big | center) را معرفی و سپس به آموزش تگ های (address | bdo | mark) می پردازیم.

تگ های منسوخ شده :
تگ acronym :
این تگ تگی منسوخ شده می باشد و دیگر در HTML5 پشتیبانی نخواهد شد و به جای آن می توان از تگ abbr استفاده نمود.

کد: 

Can I get this <acronym title="as soon as possible">ASAP</acronym>?

امتحان کنید

تگ big :
این تگ تگی منسوخ شده می باشد و دیگر در HTML5 پشتیبانی نخواهد شد و از این به بعد به وسیله CSS تنظیم می شود.

کد: 

<p><big>Bigger text</big></p>

امتحان کنید

تگ center :
این تگ نیز تگی منسوخ شده است و می توان به وسیله CSS تنظیم نمود.

کد: 

<center>This text will be center-aligned.</center>

امتحان کنید
نکته : البته که بسیاری از مدیران وبلاگ ها و وبسایت ها با CSS آشنایی کامل ندارند و مرورگرها هم این گونه تگ ها را پشتیبانی می کنند اما در آینده نزدیگ کارشان ساخته است! [تصویر: icon_smile.gif]

تگ های قدیمی اما کم کاربردتر :

تگ address :
این تگ تگی برای نمایش اطلاعات نویسنده (مالک) یک سند یا مقاله می باشد که به صورت جفت به کار می رود یعنی این که یک تک باز و یک تگ بسته دارد.
اگر تگ address در تگ body باشد نشان دهنده ی اطلاعات تماس برای یک document است.
و اگر تگ address در تگ article باشد نشان دهنده ی اطلاعات تماس برای یک article است.
متن داخل تگ address معمولا به صورت کج (ایتالیک) نمایش داده می شوند و این تگ مانند تگ p یک بلاک را اشغال می کند.

کد: 

<address>

Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>

Visit us at:<br>

Example.com<br>

Box 564, Disneyland<br>

USA

</address>

امتحان کنید
نکته : این تگ در همه ی مرورگر ها به نمایش در می آید.
نکته : تگ address برای یک آدرس پستی استفاده نمی شود مگر اینکه شامل اطلاعات تماس باشد.
تگ bdo :
من هنوز متوجه نشده ام که چرا همچین تگی به وجود آمده است!؟ [تصویر: icon_biggrin.gif]

به وسیله این تگ می توانید جهت متن را عوض کنید مثلا متن انگلیسی که از چپ به راست است را می توانید از راست به چپ کنید!

کد: 

<bdo dir="rtl">

This text will go right-to-left.

</bdo>

امتحان کنید
نکته : این تگ در همه ی مرورگرها نمایش داده می شود.
نکته : تنها صفت (attribute) این تگ صفت dir می باشد.

تگ جدید در HTML5 :

تگ mark :
این تگ در HTML5 آمده است تا برنامه نویسان و… بتوانند یک قسمت از متن خود را های لایت کنند.

کد: 

<p>Do not forget to buy <mark>milk</mark> today.</p>

امتحان کنید
نکته : این تگ نیز در تمامی مرورگرها نمایش و پشتیبانی می شود.
خب به همین بخش کوتاه از HTML5 بسنده می کنیم اما در مطالب بعدی شما را عاشق HTML5 خواهیم کرد! [تصویر: icon_razz.gif]

**montenegro** · 93-7-22، 04:22 عصر

آموزش تگ های HTML – بخش سوم (Formating 2)

سلام دوستان
خب در قسمت قبل 6 تگ HTML را معرفی و آموزش دادیم که امیدوارم مورد استفاده قرار گرفته باشند، البته تگ هایی که منسوخ نشده باشند. [تصویر: icon_smile.gif]

در این قسمت چند تگ منسوخ شده (font | strike | tt) را معرفی و به آموزش تگ های (dfn | samp | var | sub | sup | kbd) می پردازیم.

تگ های منسوخ شده :
تگ font :
خب همان طور که از اسم این تگ معلوم است تگی برای تعیین فونت و تنظیمات آن در HTML است که دیگر در HTML5 پذیرفته نخواهد شد و از این به بعد فونت ها را با CSS تنظیم می کنند.
این تگ شامل سه صفت : color , face , size می باشد که این صفات نیز در HTML5 پشتیبانی نمی شوند.
اما در تمامی مرورگرها نمایش داده می شوند.

کد: 

<font size="3" color="red">This is some text!</font>

<font size="2" color="blue">This is some text!</font>

<font face="verdana" color="green">This is some text!</font>

تگ strike :
strike مخفف کلمه strikethrough می باشد که به معنای خط خورده می باشد.
به جای این تگ می توانید از تگ del استفاده کنید.
این تگ نیز در تمامی مرورگرها نمایش داده می شود.

کد: 

<p>Version 2.0 is <strike>not yet available!</strike> now available!</p>

تگ tt :

این تگ تگی برای نمایش یک نوشته به صرت یک متن تحریر مانند (teletype text) نمایش در می آید.

کد: 

<p><tt>Teletype text</tt></p>

به جای این تگ می توان از CSS استفاده نمود. مانند مثال زیر :

کد: 

<p style="font-family:'Lucida Console', monospace">

تگ های قدیمی اما کم کاربردتر :
نکته : این تگ هایی که می خواهم معرفی کنم تگ هایی هستند که به نوع نوشته مربوطند و فقط با دیدن اینگونه تگ ها در یک ادیتور متوجه ساختار آنها خواهید شد.
تگ kbd :
این تگ مخفف کلمه keyboard می باشد و برای تعریف کردن یک دکمه کیبورد استفاده می شود.

کد: 

<kbd>Keyboard input</kbd>

تگ dfn :

این تگ مخفف کلمه definition می باشد و برای تعریف لغتی یک کلمه و… استفاده می شود.

کد: 

<dfn>Definition term</dfn>

این تگ در CSS هم می تواند اعمال شود.

کد: 

dfn {

    font-style: italic;

}

تگ var :

این تگ مخفف کلمه variable می باشد و برای نوشتن یک متنی که ممکن است تغییر پیدا کند استفاده می شود.

کد: 

<var>Variable</var>

تگ samp :

این تگ برای نمایش یک خروجی نمونه از یک برنامه ی کامپیوتری می باشد.

کد: 

<samp>Sample output from a computer program</samp>

این تگ در CSS هم می تواند تنظیم شود.
تگ های sub و sup :
sub مخفف subscript می باشد که برای زیرنویس کردن یک متن استفاده می شود که در پایین تر از خط اصلی یا نرمال و کوچکتر نمایش داده می شود که در ترکیبات شیمیایی می تواند مورد استفاده قرار بگیرد.
sup مخفف superscript می باشد که برای بالانویس کردن یک متن مورد استفاده قرار می گیرد که در بالا تر از خط اصلی یا نرمال و کوچکتر نمایش داده می شود که در ریاضیات برای نمایش توان استفاده می شود.

کد: 

<p>This text contains <sub>subscript</sub> text.</p>

<p>This text contains <sup>superscript</sup> text.</p>

خب به این چند تگ بسنده می کنیم در این بخش تگی که در HTML5 اضافه شده باشد معرفی نشد اما در بخش بعدی فقط تگ های جدید را معرفی خواهم کرد به همین منظور از شما عذر می خواهم. [تصویر: icon_wink.gif]

**montenegro** · 93-7-25، 04:09 عصر

سلام دوستان
خب رسیدیم به بخش آخر از آموزش Formating ها در این بخش تگ های جدیدی که به وسیله HTML5 اضافه شده اند را آموزش می دهیم.
تگ های (meter | progress | time | wbr) را به وضوح و کامل توصیف و آموزش خواهیم داد و البته به تگ های (ruby | rt | rp) اشاره خواهیم کرد.

تگ meter :
خب این تگ برای اندازه گیری کمیت های عددی (اسکالر) می باشد که با یک مقدار کسری متغییر تعریف می شود. و به عنوان یک درجه یا اندازه گیر استفاده می شود. مانند : مقدار استفاده شده از دیسک (Disk usage).
تگ meter نباید برای نشان دادن پیشرفت استفاده شود برای نشان دادن پیشرفت از تگ progress استفاده می شود که توضیح خواهم داد.
فقط توجه داشته باشید که این تگ در مرورگر IE پشتیبانی نمی شود.

کد: 

<meter value="2" min="0" max="10">2 out of 10</meter><br>

<meter value="0.6">60%</meter>

خب این تگ 7 صفت دارد :
صفت form :
value = form_id : مشخص می کند که این تگ متعلق به چیست
صفت high :
value = number : نشان دهنده ارزش بالای این عنصر است.
صفت low :
value = number : نشان دهنده ارزش پایین این عنصر است.
صفت max :
value = number : حداکثر ارزش این عنصر را مشخص می کند.
صفت min :
value = number : حداقل ارزش این عنصر را مشخص می کند.
صفت optimum :
value=number : ارزش بهینه یا قابل قبول برای یک عنصر را مشخص می کند.
صفت value :
value=number : که یک صفت آشناست و مقدار فعلی این عنصر را مشخص می کند.
تگ progress :
این تگ برای نشان دادن پیشرفت یک کار و… است.
بر خلاف تگ meter این تگ توسط همه ی مرورگرها پشتیبانی می شود اما وسوسه نشوید که از این تگ به جای تگ meter استفاده کنید. [تصویر: icon_wink.gif]

نکته : این تگ با جاوا اسکریپت معنی دارد مگر اینکه این یک کار دستی باشد و روزانه تغییر کند.

کد: 

<progress value="22" max="100"></progress>

این تگ دارای 2 صفت است :
صفت value و صفت max که همان کاربردی که در تگ meter دارند را دارند. [تصویر: icon_smile.gif]

سه تگ ruby | rt | rp را توضیح نمی دهم چرا که به دردمان و به دردتان نخواهد خورد فقط این را بگم که برای تایپوگرافی های آسیای شرقی استفاده می شود.
تگ time :
این تگ زمان یا تاریخ را معرفی می کند.
خب شما یک تاریخ یا زمان را به وسیله این تگ می توانید مشخص کنید که هم انسان ها می توانند ببینند و هم سیستم ها که می تواند به کاربران اجازه دهد تا تاریخ تولد ، برنامه های طول روز و… خود را تعریف کنند و این به نفع موتور های جستجوگر می باشد تا نتیجه بهتری ارائه دهند.

کد: 

<p>We open at <time>10:00</time> every morning.</p>

<p>I have a date on <time datetime="2008-02-14 20:00">Valentines day</time>.</p>

تنها صفت این تگ صفت datetime می باشد که یک زمان یا تاریخ را برای سیستم ها و ماشین ها تعریف می کند.
تگ wbr :
وقتی که یک کلمه ی شما بسیار طولانی است و شما می ترسید که مرورگر ادامه آن کلمه را در خط بعد نمایش دهد شما می توانید از این تگ استفاده کنید.
این تگ اگر کلمه طولانی را مشاهده کند که ممکن است ادامه اش در خط بعد نمایش داده شود کل کلمه را در خط بعد نمایش می دهد تا اشتباهی رخ ندهد.

کد: 

<p>

To learn AJAX, you must be familiar with the XML<wbr>Http<wbr>Request Object.

</p>

خب این بخش از آموزشات تگ های HTML تمام شد در بخش بعد به کتگوری Forms and Input خواهیم پرداخت. بخش فرم ها بسیار بخش جذابی است که من هم با یادگیری آن عاشق HTML شدم. [تصویر: icon_biggrin.gif]

**montenegro** · 93-8-1، 11:55 عصر

آموزش تگ های HTML – بخش پنجم (Forms and Input)

سلام دوستان
بدون هیچ وقفه ای شروع به آموزش Category بعدی یعنی Forms and Input می کنم. من عادت ندارم که کاربران را منتظر بگذارم. [تصویر: icon_wink.gif]

خب در این آموزش نیز فقط تگ های HTML5 را آموزش می دهم چرا که تگ منسوخ شده ای برای معرفی وجود ندارد و همچینین تگ های دیگر هم در آموزشات مبتدی و متوسطه آموزش داده شده اند و شاید هم خواهند شد. [تصویر: icon_biggrin.gif]

در این پست به آموزش تگ های (keygen | datalist | output) می پردازیم.

تگ datalist :
این تگ گزینه های از پیش تعریف شده را برای یک عنصر input تعریف می کند.
برای اینکه کاربران به صورت خودکار گزینه ی مورد نظر را انتخاب کنند استفاده می شود و به صورت یک لیست کشویی می توانید آنها را در یک عنصر input استفاده کنید.
فقط توجه داشته باشید که این تگ در مرورگر Safari پشتیبانی نمی شود.
شما باید با استفاده از صفات list و id که صفت list در تگ input و صفت id در تگ datalist باید مچ و یکی شوند.

کد: 

<input list="browsers">

<datalist id="browsers">

  <option value="Internet Explorer">

  <option value="Firefox">

  <option value="Chrome">

  <option value="Opera">

  <option value="Safari">

</datalist>

تگ keygen :
این تگ یک راه برای شناسایی هویت کاربران می باشد. هنگامی که کاربر فیلد را پر می کند و ارسال می کند دو کلید ایجاد می شود کلید خصوصی و کلید عمومی.
کلید خصوصی بصورت محرمانه بر روی کامپیوتر کاربر ذخیره شده و کلید عمومی به سرور ارسال می شود . کلید عمومی می تواند به عنوان یک شناسه یا مدرک برای شناسایی کاربر در آینده استفاده می شود .
سیستم در آینده دو کلید را با هم مقایسه کرده و هویت آن را شناسایی می کند.
این تگ در مرورگر IE پشتیبانی نمی شود.

کد: 

<form action="demo_keygen.asp" method="get">

  Username: <input type="text" name="usr_name">

  Encryption: <keygen name="security">

  <input type="submit">

</form>

فقط باید توجه داشته باشید که استفاده از این تگ برای افرادی مناسب است که یک زبان سمت سرور مانند PHP را بلد باشند تا بتوانند به خوبی از آن استفاده کنند.
این تگ دارای شش صفت می باشد :
صفت autofocus :
value=autofocus
این تگ باعث می شود که صفحه بعد از لود شدن بر روی آن فید فوکوس و تمرکز کند.
دقت کنید که این تگ توسط مرورگر Firefox و IE پشتیبانی نمی شود.

کد: 

<form action="demo_keygen.asp" method="get">

  Username: <input type="text" name="usr_name">

  Encryption: <keygen name="security" autofocus>

  <input type="submit">

</form>

صفت disable :
value=disable
این صفت باعث می شود که این input غیر فعال شود تا input های دیگر تکمیل شوند (مانند یک چک باکس) و حذف شدن این صفت به وسبله جاوا اسکریپت انجام می شود.

کد: 

<form action="demo_keygen.asp" method="get">

  Username: <input type="text" name="usr_name">

  Encryption: <keygen name="security" disabled>

  <input type="submit">

</form>

صفت form :
value=form_id
اسن صفت معلوم می کند که این input مربوط به کدام فرم است.

کد: 

<form action="demo_keygen.asp" method="get" id="secureform">

  Username: <input type="text" name="usr_name">

  <input type="submit">

</form>

Encryption: <keygen name="security" form="secureform">

صفت keytype :
value=rsa or dsa or ec
نوع کلید را مشخص می کند که سه نوع دارد و آموزش آن بر عهده جاوا اسکریپت است.

کد: 

<form action="demo_keygen.asp" method="get">

  Username: <input type="text" name="usr_name">

  Encryption: <keygen name="security" keytype="rsa">

  <input type="submit">

</form>

صفت challange :
value=challenge
رشته ای از حروف که به همراه کلید عمومی استفاده می شود.

کد: 

<form action="demo_keygen.asp" method="get">

  Username: <input type="text" name="usr_name">

  Encryption: <keygen name="security" challenge">

  <input type="submit">

</form>

صفت name :
value=name
یک نام خاصی در آن قرار می گیرد.

کد: 

<form action="demo_keygen.asp" method="get">

  Username: <input type="text" name="usr_name">

  Encryption: <keygen name="security" ">

  <input type="submit">

</form>

تگ output :
این تگ نشان دهنده ی نتیجه ی یک محاسبه که توسط یک اسکریپت تعریف شده است می باشد.
توجه داشته باشید که این تگ در مرورگرهای IE و Safary پشتیبانی نمی شود.

کد: 

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0

  <input type="range" id="a" value="50">100

  +<input type="number" id="b" value="50">

  =<output name="x" for="a b"></output>

</form>

که دارای سه صفت می باشد :
صفت for :
value=element_id
که آیدی عنصر مورد نظر را باید داد.
صفت form :
value=form_id
که آیدی فرم مورد نظر را باید داد.
صفت name :
value=name
که یک نام خاص می توان به آن داد.
خب این پست هم به اتمام رسید بابت طولانی بودن نوشته از شما عذر می خواهم.
در نوشته بعدی به کتگوری Images خواهیم پرداخت.

**montenegro** · 93-8-2، 04:47 عصر

آموزش تگ های HTML – بخش ششم (Images)

سلام دوستان
عکس ها اجزای مهم یک سایت هستند که باید آن ها را به خوبی یاد بگیرید. در آموزشات مقدماتی و متوسطه شما باید سه تگ (img | map |area) را فرامی گرفتید در این بخش به سه تگ (canvas | figure | figcaption) که توسط HTML5 ارائه شده اند اشاره کرده و تک تک آن ها را توضیح خواهیم داد.

تگ canvas :
این تگ برای ایجاد اشکال هندسی (مانند دایره مربع و…) و گرافیکی در صفحات وب استفاده می شود که باید به وسیله جاوا اسکریپت تعیین شود.
این تگ دارای سه صفت می باشد.
صفت id که شناسه این تگ می باشد و برای شناسانی جاوا اسکریپت مورد نظر می باشد و دو صفت width و height که برای تعیین عرض و ارتفاع شکل هندسی یا گرافیکی مورد نظر استفاده می شود.
این تگ یک تگ جفت می باشد که به صورت زیر استفاده می شود:

کد: 

<canvas id="myCanvas">

Your Browser can not show this.

</canvas>

<script>

var canvas=document.getElementById('myCanvas');

var ctx=canvas.getContext('2d');

ctx.fillStyle='#FF0000';

ctx.fillRect(0,0,80,80);

</script>

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

کد: 

<figure>

  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">

</figure>

مرورگرها به صورت پیشفرض کد CSS زیر را برای آن اعمال می کنند:

کد: 

figure {

    display: block;

    margin-top: 1em;

    margin-bottom: 1em;

    margin-left: 40px;

    margin-right: 40px;

}

تگ figcaption :

این تگ برای مشخص کردن یک عنوان برای تگ figure استفاده می شود که می تواند در ابتدا یا انتهای عنصر مادر خود قرار بگیرد.

کد: 

<figure>

  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">

  <figcaption>Fig1. - A view of the pulpit rock in Norway.</figcaption>

</figure>

و البته بیشتر مرورگرها کد CSS زیر را به عنوان پیشفرض برای آن قرار می دهند:

کد: 

figcaption {

    display: block;

}

این سه تگی که معرفی شد همگی در مرورگرهای مطرح پشتیبانی می شوند.
خب این بخش از آموزشات تگ های HTML تمام شد امیدوارم که با تمرین آن ها به خاطر خود سپرده و از آنها به نحو احسن استفاده کنید.
ان شا الله در بخش بعدی به آموزش کتگوری Audio / Video که کاملا جدید هستند اشاره می کنیم به همراه توضیحات مفید

**montenegro** · 93-8-16، 01:05 صبح

آموزش تگ های HTML – بخش هفتم (Audio/Video 1)

[تصویر: audio-video1.jpg]

سلام دوستان
خب از چندین مبحث یا کتگوری گذشتیم تا این که به کتگوری Audio/Video رسیدیم این کتگوری به کلی توسط HTML5 معرفی شده است و تمامی تگ های آن جدید اند.
ما در این بخش از آموزشات به آموزش تگ های (audio | source) می پردازیم و آموزشی جامع و کامل در این باره می دهیم.

تگ audio :
خب یکی از امکانات جدیدی که در نسخه جدید HTML اضافه شده است امکان قرار دادن صدا و تصویر در صفحات وب می باشد البته که در قدیم هم می توانستید این کار را با تگ object انجام دهید اما حال HTML5 این تگ های جدید با امکانات بیشتر را در اختیارتان گذاشته است.

کد: 

<audio controls>

  <source src="horse.ogg" type="audio/ogg">

  <source src="horse.mp3" type="audio/mpeg">

  Your browser does not support the audio tag.

</audio>

این تگ صداهای شما را در صفحات وب بارگذاری می کند که سه فرمت mp3 , ogg , wav را فقط قبول می کند.

( توجه : من اطلاعات زیر { و اطلاعات زیر تر Smile

} و بصورت جدول آماده کردم که چون تو ادیتور بلاگرز نمیشه جدول گذاشت نمیزارمشون )

مرورگر - Ogg - Wav - MP3

IE - بله - خیر - خیر
FireFox - خیر ( بله در صورتی که آپدیت 21 باشد ) - بله - بله
Chrome - بله - بله - بله
Opera - خیر - بله - بله
Safari - بله - بله - خیر

به MIME-Type های این سه فرمت نیز توجه کنید.

MP3 : audio/mpeg
Wav : audio/wav
Ogg : audio/ogg

نکته : اگر دو فایل همسان را با دو فرمت متفاوت در کد هایتان تعریف کنید ابتدا مرورگر آن فایلی را که پشتیبانی می کند نمایش می دهد و در غیر این صورت به فایل بعدی می رود.
نکته : متنی که بین تگ باز و بسته audio قرار می گیرد در صورت پشتیبانی نشدن فایل توسط مرورگر نمایش داده می شود.
این تگ دارای 6 صفت است که در پاینن آموزش خواهم داد :
صفت src :
value=URL
در صورتی که فقط یک فرمت از یک فایل برای نمایش دارید می توانید از این صفت استفاده کنید در غیر این صورت باید از تگ source که در پایین آموزش خواهم داد استفاده کنید.
صفت controls :
value=controls
این صفت یک audio bat ایجاد می کند که به وسیله آن می توانید صدا را عقب و جلو و البته کم و زیاد و یا خاموش کنید.
اما بدون این صفت نیز می توان یک صوت را پخش کرد.
صفت loop :
value=loop
توسط این تگ می توان صدا را پشت سر هم پخش کرد یعنی وقتی که صدا به اتمام می رسد دوباره از سر گرفته می شود.
صفت muted :
value=muted
به صورت پیشفرض صدا قطع می باشد و شما این صفت را به وسیله صفت کنترل می توانید غیر فعال کنید.
صفت autoplay :
value=autoplay
با لود شدن صفحه به صورت اتوماتیک صدای مورد نظر شما پخش می شود.
صفت preload :
value=none/metadata/auto
این صفت برای ویژگی پیش بارگذاری می باشد برای زمانی استفاده می شود که نویسنده فکر می کند که صوت مورد نظر به همراه صفحه لود شود.
در برخی موارد ممکن است عمل نکند مثلا وقتی که صفت autoplay وجود داشته باشد.
این صفت شامل سه مقدار می باشد.
مقدار auto برای زمانی است که نویسنده فکر می کند که هنگامی که صفحه بارگزاری شود صوت نیز بارگزاری شود یعنی در حافظه سیستم کاربران ذخیره می شود به هنگام لود صفحه.
مقدار noun اگر فعال باشد فایل زمانی بارگذاری می شود که صوت را به وسیله کنترلر پخش کنید.
مقدار metadata زمانی که صفحه لود می شود فایل بارگزاری نشده ولی یک سری اطلاعات اضافه دریافت می شود مانند مدت زمان صوت و… .
تگ source :

کد: 

<audio controls autoplay>

<source src="horse.ogg" type="audio/ogg">

<source src="horse.mp3" type="audio/mpeg">

Your browser does not support the audio element.

</audio>

این تگ یک منبع برای فایل صوتی یا تصویری شما مشخص می کند.
این تگ مشخص می کند که بین دو یا چند فایل یکسان کدام یک را با توجه به نوع و کدکی که مرورگر مورد استفاده کاربر پشتیبانی می کند پخش کند.
این تگ دارای 3 صفت می باشد :
صفت src :
value=URL
آدرس مدیا مورد نظرتان را مشخص می کند.
صفت type :
value=media_type
نوع مدیا مورد نظرتان را مشخص می کند.
به جدول زیر توجه کنید :

مقدار - توضیح

medial_type - مدیا تایپ های معروف :
ویدئو :
video/ogg
video/mp4
video/webm

صوت :
audio/ogg
audio/mpeg

صفت media :
value=media_query
نوع منبع مدیا را مشخص می کند.
اپراتورهای ممکن :

مقدار - توضیح

and - با این اپراتور می توانید چندین ویژگی از فایل صوتی یا ویدئویی تان را جفت کنید.
not - مشخص می کند که با ویژگی هایی که به آن می دهید فایلی پخش نشود.
, - می توانید دو یا چند ویژگی را برای فایلتان مشخص کنید که که در صورت موجود نبودن دیگری ، دیگری کار کند.

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

دستگاه ها :

مقدار - توضیح

all - ویژگی ای برای تمامی دستگاه ها می باشد که پیشفرض است.
aural - سینت سایزر (Speech synthesizers)
braille - دستگاه هایی برای افراد نابینا
handheld - دستگاه های قایل حمل (صفحه نمایش کوچک با پهنای باند محدود)
projection - پروژکتور
print - حالت پیشنمایش چاپ/چاپ صفحه
screen - صفحه نمایش رایانه
tty - تله تایپ ها و رسانه های مشابه
tv - دستگاه های تلویزیون

مقادیر :

width - عرض فایل هدف را مشخص می کند که دارای دو پیشوند min و max می باشد. مثال : media="screen and (min-width:500px)"
height - ارتفاع فایل هدف را مشخص می کند که دارای دو پیشوند min و max می باشد. مثال : media="screen and (min-height:700px)"
device-width - عرض صفحه نمایشگر را مشخص می کند که دارای دو پیشوند min و max می باشد. مثال : media="screen and (device-width:500px)"
device-height - ارتفاع صفحه نمایشگر را مشخص می کند که دارای دو پیشوند min و max می باشد. مثال : media="screen and (device-height:500px)"
orientation - جهت صفحه نمایشگر را مشخص می کند که دو مقدار portrait یا landscape را می گیرد. مثال : media="all and (orientation: landscape)"
aspect-ratio - نسبت عرض به ارتفاع فایل را مشخص می کند که دارای دو پیشوند min و max می باشد. مثال : media="screen and (aspect-ratio:16/9)"
device-aspect-ratio - نسبت عرض به ارتفاع صفحه نمایشگر را مشخص می کند که دارای دو پیشوند min و max می باشد. مثال : media="screen and (device-aspect-ratio:16/9)"
color - مشخص می کند که در فایل چند رنگ وجود داشته باشد که دارای دو پیشوند min و max می باشد. مثال : media="screen and (color:3)"
color-index - مشخص می کند که صفحه نمایش چند رنگ را می تواند اداره کند که دارای دو پیشوند min و max می باشد. مثال : media="screen and (min-color-index:256)"
monochrome - مشخص می کند که در هر پیکسل چند تک رنگ وجود داشته باشد که دارای دو پیشوند min و max می باشد. مثال : media="screen and (monochrome:2)"

خب این بحث به اتمام رسید به خاطر طولانی شدن نوشته از شما عذر می خواهم.

ورود
نام کاربری:
گذرواژه‌:	گذرواژه‌تان را فراموش کرده‌اید؟
	مرا به خاطر بسپار

بک لینک