آموزش مقدماتي و پيشترفته Html

صدا و تصوير در وب

پيشرفت تکنولوژي در وب و نسخه هاي جديد مرورگرها که توانايي استفاده از مولتي مديا را در اختيار ما مي گذاشتن، انگيزه اي ايجاد شد تا صوت و تصوير هم در صفحات وب گنجانده شوند و سايتها را جذاب تر کنند. در اين صفحه راههاي اضافه کردن فايل صوتي به يک صفحه را مي آموزيد و در صفحه بعد افزودن فايلهاي تصويري را ياد خواهيد گرفت.

اهميت حجم فايل صوتي

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

MIME

هنگاميکه يک فايل صوتي به صفحه اضافه شود، مرورگر به تنهايي قادر به پخش آن نمي باشد و بايد به کمک يک برنامه کاربردي ديگر اينکار را انجام دهد. مرورگرها توسط اطلاعاتي که از فايل دريافت مي کنند مي توانند تشخيص دهند که چه برنامه اي را بايد براي پخش آن فايل صدا بزنند که اين اطلاعات را MIME مي گويند.

MIME مخفف Multipurpose Internet Mail Extensions است.

زمانيکه مرورگر با يک MIME ناشناخته مواجه شود، پيغام خطاي “File Not Found” را در صفحه نمايش مي دهد.

فرمتهاي فايلهاي صوتي

WAV يکي از فرمتهاي صوتي که کيفيت بالايي هم دارد و البته حجم زيادي هم اشغال مي کند و در سيستم عامل ويندوز بکار مي رود. نوع MIME اين فرمت برابر است با audio/wav .

AU اين فرمت متعلق به سيستمهاي عامل UNIX, Linux است و خاصيت آن داشتن حجم کم و البته با کيفيت پايين تر، که نوع MIME اين فرمت برابر است با audio/basic .

AIFF اين فرمت هم متعلق به کامپيوترهاي Macintosh است با کيفيت بالا و حجم بسيار بالا. نوع MIME آن برابر است با audio/aiff .

MIDI اين فرمت با فرمتهاي ديگر صوتي تفاوتهايي دارد. در اين فرمت بجاي ذخيره شدن فرکانس صدا، آهنگ صدا يا همان نت هاي موسيقي را ذخيره و پخش مي کند. بزرگترين مزيت آن حجم بسيار پايين و عيب آن، پخش آهنگ بدون گفتار است. نوع MIME اين فرمت audio/midi است.

افزودن فايل صوتي به زمينه صفحه

با اضافه کردن تگ <bgsound> به سورس کد صفحه وب، مي توانيد آهنگ يا صدايي را در زمينه صفحه وارد کنيد تا هنگاميکه بيننده صفحه را باز مي کند آن فايل بدون نياز به برنامه کاربردي ديگري پخش شود. اين تگ در حال حاضر کاربردي ندارد چون فقط مرورگراينترنت اکسپلورر نسخه هاي 5.5 به پايين آنرا پشتيباني مي کنند. اين تگ داراي دو خصوصيت ، src براي آدرس دهي فايل صوتي و loop براي کنترل تکرار دفعات پخش مي باشد.

<bgsound src=”mymusic.mid” loop=”2”>

افزودن فايل صوتي بصورت لينک

يکي ديگر از راههاي اضافه کردن فايل صوتي به صفحه از طريق قرار دادن لينک و تگ <a> است که بيننده با کليک کردن بر روي آن لينک مي تواند هم آن فايل را بر روي هارد ديسک خود ذخيره کند و يا آنرا از همانجا باز کند. البته در مرورگراينترنت اکسپلورر نسخه 6.0 ابتدا پيغامي ظاهر مي شود که اگر دکمه Yes را بزنيد آن فايل توسط خود مرورگر پخش خواهد شد. در تگ لينک بايد از خصوصيت href براي آدرس دهي استفاده کنيد، فقط دقت کنيد که پسوندها را درست بنويسيد.

<a href=”musics/mysong.wav”> music file </a>

افزودن فايل صوتي از طريق object

يکي از بهترين راههايي که مي توان فايل صوتي را به صفحه اضافه کرد، از طريق تگ <object> است. يکي از مزايايي که اين تگ دارد اينست که، شما مي توانيد يک متني را بين تگ آغازين و پايان دهنده اضافه کنيد که اگر مرورگر نتوانست آن فايل را بشناسد، نوشته مذکور در صفحه نمايان شود. در اين تگ براي آدرس دهي از خصوصيت data و براي تعيين MIME آن فايل از خصوصيت type استفاده مي شود، همچنين از خصوصيت height, width براي کنترل طول و عرض لوگوي برنامه پخش کننده فايل استفاده کنيد که در صورت لزوم آنها را برابر با عدد صفر قرار دهيد تا لوگو در صفحه ظاهر نشود.

<

کد:

---

object data=”musics/sound.wav” MIME=”audio/wav”> 
Your browser doesn’t support this audio format.
</object>

---

نکته: هنگاميکه صفحه داراي اين تگ را باز کنيد يک پيغام هشدار در مورد ActiveX ظاهر خواهد شد که براي اجراي فايل بايد دکمه Yes را بزنيد.

Embed file

تکنيک ديگر براي افزودن يک فايل مولتي مديا به صفحه از طريق تگ embed است. اين تگ استاندارد W3C نيست و در بيشتر مرورگرها اجرا نمي شود. از خصوصيت src براي آدرس دهي فايل و براي کنترل طول و عرض لوگوي برنامه کمکي از خصوصيت height, width مي توانيد استفاده کنيد. اين تگ داراي خصوصيات autostart و loop مي باشد که با کلمات false يا true مقدار دهي مي شوند.

کد:

---

<embed src="godfather.mid" autostart="false"
loop="false"  height="40" width="150">

---

Streaming Audio

احتمالاً متوجه شديد که راههاي ذکر شده در بالا به درستي جواب نمي دهند و به خاطر مشکلات امنيتي ، مرورگرها فايلها را پخش نمي کنند. اما تکنيک ديگري هم هست که کليه مرورگرها از آن پشتيباني کرده و حتي با استفاده از آن مي توانيد فايلهاي سنگين را هم در صفحات بکار بريد بدون آنکه بيننده زمان زيادي را براي دانلود آنها صرف کند. اين تکنيک استفاده از روش Streaming Audio and Video است که در صفحه بعد به آن مي پردازيم.

اگرچه حجم فايلهاي صوتي زياد است، اما در مقايسه با حجم فايلهاي تصويري چندان قابل عرض نيستند چون فايلهاي تصويري بطور معمول مخلوطي از صدا و تصوير مي باشند، داراي حجم بسيار بالايي نيز هستند که بکار بردن آنها در وب سايت ها زياد معقولانه نيست مگر اينکه يک فيلم بسيار کوتاه چند ثانيه اي را بخواهيد در صفحه جاي دهيد که قرار دادن اين فايلها دقيقاً مانند فايلهاي صوتي است که در صفحه قبل توضيح آن آمده است.

اما در اين صفحه مي پردازيم به فرمتهاي فايلهاي تصويري و معرفي تکنولوژي که توسط آن بتوانيد فايلهاي صوتي و تصويري با حجم بالا را در وب سايت قرار دهيد.

فرمتهاي فايلهاي تصويري

MPEG اين فرمت مخفف کلمات Motion Picture Experts Group است که در بيشتر سيستمها قابل اجرا مي باشد. نوع MIME اين فرمت video/mpeg است.

AVI اين فرمت متعلق به سيستم عامل ويندوز مي باشد و نوع MIME آن برابر است با video/avi .

QuickTime (MOV) اين فرمت مخصوص سيستم هاي Macintosh مي باشد که اگر مرورگري در سيستمهاي ديگر Plug-in اين فرمت را داشته باشد آنرا پخش خواهد کرد و نوع MIME آن video/quicktime مي باشد.

Advanced Streaming Format (ASF) اين فرمت متعلق به شرکت مايکروسافت است که MIME آن video/asf مي باشد.

Streaming Audio and Video

اين يک تکنولوژي است که فايلها در هنگام دانلود شدن هم قابل پخش هستند، يعني هنگاميکه فايلهاي صوتي يا تصويري در حال دانلود شدن در سيستم هستند، در همان لحظه هم مي توانيد آنها را مشاهده کنيد يا به آنها گوش دهيد قبل از اينکه بطور کامل در سيستم ذخيره شوند.

همانطور که مي دانيد يک فايل صوتي يا تصويري سنگين ممکن است چندين ساعت طول بکشد تا دانلود شود، اما براي غلبه بر اين مشکل تکنولوژي streaming audio and video بوجود آمد و در پي آن برنامه هايي نظير RealAudio, QuickTime, Microsoft’s streaming format عرضه شد. اين فرمتها قادر به پخش فايل در هنگام دانلود شدن هستند، بدين ترتيب که مقداري از اينگونه فايلها ابتدا در محلي از حافظه بنام بافر Buffer ذخيره شده و از آنجا پخش مي شود. هنگاميکه آن مقدار در حال اجرا است، مقدار ديگري از فايل در بافر ذخيره و پخش مي شود که به همين ترتيب ادامه پيدا مي کند تا کل فايل بطور کامل دانلود شود. البته اين نوع فرمتها، برنامه کاربردي مخصوص خود را مي خواهند و معروفترين برنامه ها RealOne.Player است که اين محصول فرمت RealAudio يعني ra براي فايل صوتي و RealVideo براي پخش فايلهاي تصويري را پشتيباني مي کند. فرمتهاي ديگر هم مانند ASF متعلق به شرکت مايکروسافت و QuickTime براي سيستمهاي Macintosh از اين تکنولوژي استفاده مي کنند.

شما مي توانيد از برنامه هاي ويرايشگر صوتي مانند Sound Forge و تصويري مانند Adobe Premiere براي تبديل به اين تکنولوژي استفاده کنيد.

اگر مايل هستيد از فرمتهاي Real Audio, Real Video در سايت خود استفاده کنيد بايد به چند نکته توجه کنيد، ابتدا مطمئن شويد که سرور ميزبان سايت شما از اين تکنيک پشتيباني مي کند و در آن يکسري تنظيمات بايد انجام شود، مثلاً براي فرمت Real Audio دو نوع MIME بايد در سرور تعريف شود:

audio/x-pn-realaudio (files with a .ra or .ram file extension)
audio/x-pn-realaudio-plugin (files with a .rpm file extension)

سپس بايد يک برنامه براي تبديل فرمتهاي مختلف به اين فرمت و يک برنامه براي پخش اين نوع فرمت در سيستم خود داشته باشيد که مي توانيد آنها را از وب سايت www.real.com فراهم کنيد و در آخر هم يک فايل بنام متا فايل Meta File بايد درست کنيد براي ذخيره واستفاده از بافر، بدين ترتيب که، ابتدا يک برنامه ويرايشگر متن مانند Notepad را باز کرده وداخل آن آدرس فايل بر روي سايت خود را مي نويسيد، بطور مثال اگر نام فايل realtest.ra است و در دايرکتوري realaudiofile قرار دارد بايد خط زير را وارد کنيد بدون هيچ چيز اضافه،

http://www.yourdomain.com/realaudiofile/realtest.ra

سپس اين فايل متني را با نام دلخواه و با پسوند .ram ذخيره کرده و همراه با فايل صوتي مورد نظر به سرور خود منتقل کنيد. فقط دقت کنيد که براي فراخواني آن فايل بايد يک لينک بسازيد که متا فايل مربوطه را صدا کند نه خود فايل صوتي يا تصويري.

نکته: بيننده سايت بايد برنامه مخصوص پخش اين گونه فرمت را در سيستم خود داشته باشد. اگر MIME به درستي تعريف نشده باشد، فقط متن داخل متا فايل نمايش داده خواهد شد و دقت کنيد تا هنگام منتقل کردن فايلهاي صوتي و تصويري توسط برنامه FTP اگر تنظيمات را به صورت دستي انجام ميدهيد حتماً از گزينه Binary استفاده کنيد.

تگهای قسمت Head

<!doctype>

در اين بخش ميخواهم در مورد تگهاي قسمت <head> برايتان توضيح دهم . همانطور که ميدانيد تگهاي Html را به دو بخش اصلي تقسيم کرديم ، يکي قسمت سر يا همان head ديگري قسمت بدنه يا body که هر دو مابين دو تگ اصلي<html></html> نوشته ميشوند، اما يک تگ هم وجود دارد که خارج از اين قانون عمل ميکند و در اولين خط شروع کدنويسي بايد آنرا بنويسيم يعني قبل از تگ آغاز کننده <html>و آن DTD يک صفحه وب ميباشد که مخفف Document Type Definition است و کار آن معرفي نوع تگها خصوصيات آنها و قوانيني که بايد در آن صفحه وب بکار برده شود که بطور خلاصه در تگ مربوط به آن توصيف ميشود. تگ مشخصه DTD ، <!doctype> ميباشد و مانند بقيه تگها داراي خصوصياتي هست، البته اين تگ اختياري است چون بعضي از مرورگرها بدون آن هم صفحه را نمايش ميدهند ولي بهتر است که نوشته شود.

هر نسخه از HTML يک DTD مخصوص به خود را دارد و نسخه هاي معتبر HTML عبارتند از: 2, 3.2, 4 و نسخه جديد آن Html 4.01 ميباشد و اگر از کدهاي XHTML هم استفاده ميکنيد ، آنرا هم بايد مشخص کنيد. همانطور که در بخشهاي قبل گفتم اعلام و به رسميت شناختن تگهاو نسخه هاي HTML , XHTML به عهده W3C ميباشد .

DTD براي HTML 4.0

<!DOCTYPE html public “-//w3c//DTD HTML 4.0//en”>

و براي XHTML 1.0

<!DOCTYPE xhtml public “-//w3c//DTD XHTML 1.0 strict//en”>

بعد از اين تگ روال معمول کدنويسي را انجام ميدهيم. حالا ميپردازيم به تگهاي مربوط به قسمت سر يا همان head .

<head></head>

مابين اين دو تگ اطلاعات مربوط به همان صفحه وارد ميشود که در مرورگر نشان داده نميشود و فقط اسم صفحه است که در نوار عنوان مرورگر نمايش داده ميشود. اين اطلاعات بيشتر براي سايتهاي جستجوگر مانند گوگل مفيد ميباشند که در بخش اين سايتها بيشتر توضيح خواهم داد.

تگهاي لازم براي اين قسمت به شرح زير ميباشند:

<title>, <base>, <meta>, <link>, <script>, <style>