منوی برگه ها
TwitterRssFacebook
منوی دسته ها

ارسال شده توسط در تاریخ ۱۴ آذر ۱۳۹۳ در طراحی وب | ۰ دیدگاه

قسمت آخر آموزش جامع HTML : نحوه استفاده از عناصر چند رسانه ای در صفحات وب

 

سلام به همه دوستداران وب:

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

 

نحوه استفاده از عناصر چند رسانه ای در صفحات وب:

 

تگ <object>

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

از این تگ برای به کار بردن فایل های چند رسانه ای استفاده می گردد که دارای صفات زیر است:

 

With , height , border, hspace , vspace , align , name  که با مقادیرشان هم آشنایی دارید.

Data » مسیر کامل نگهداری فایل را مشخص می کند.

Archive » لیستی از آدرس های نگهدارنده فایل های مربوط به همین تگ را در بردارد.

Classid  » برای مشخص کردن classid در برنامه های اجرا کننده فایل است.

Type » نوع mime type یا همان نوع فرمت فایل مورد استفاده را تعیین می کند.

Codebase » آدرس جایی که کاربر می تواند برای اجرای عناصر چند رسانه ای پلاگین مورد نظر خود را دریافت کند.

Standby » یک متن را به عنوان مقدار می پذیرد و هنگام بارگذاری فایل آن را نمایش می دهد.

 

تگ <param >

به طور معمول این تگ به همراه تگ <object> به کار برده می شود و تنظیمات زمان اجرای برنامه را کنترل می کند.

این تگ دارای صفاتی است که در ادامه به آن می پردازیم:

Name » یک نام را برای پارامتر مورد نظر تعیین می کند.

Value » مقداری را برای این پارامتر تعیین می کند.

 

اما راه های بهتری هم برای استفاده از عناصر چند رسانه ای در صفحات وب وجود دارد که بررسی می کنیم:

 

تگ <embed >

تا قبل از اینکه تگ فوق معرفی گردد برای استفاده از عناصر چند رسانه ای در صفحات وب می بایست که از تگ <object> استفاده می کردیم ولی تگ <embed>  بسیار پرکاربردتر و راحت تر از تگ قبلی است که دارای صفات زیر می باشد:

Align , alt , border , width , height , hspace , vspace , name که با مقادیر این صفات به خوبی آشنایی دارید.

علاوه بر صفات فوق این تگ دارای صفات زیر می باشد:

Src » آدس منبع را تعیین می کند.

Autostart » این صفت تعیین می کند که آیا عناصر چند رسانه ای می توانند به صورت خودکار اجرا شوند یا خیر که برای مقدار هم دو مقدار true یا  false را به خود اختصاص می دهند.

Hidden » برای نمایش دادن و یا مخفی کردن عناصر چند رسانه ای است که دو مقدار true و false را می پذیرند.

Loop » تعیین می کند که آیا عنصر چند رسانه ای شما پس از اتمام دوباره ادامه یابد یا خیر که دارای دو مقدار true یا false می  باشد.

Type » نوع mime type یا همان نوع فرمت فایل را تعیین می کند.

 

به طور کلی بعضی از مرورگر ها مانند اپرا و فایرفاکس قادر به پشتیبانی تگ <object>  برای استفاده عناصر چند رسانه ای نیستند و فقط از <embed> برای درج عناصر چند رسانه ای پشتیبانی می کنند .

اما یکی از ویژگی های مهم تگ  <object>  این است که هنگام بکار بردن این تگ می توان تگ <embed> را در داخلش به کار برد با این کار مرورگر هایی که از <object> پشتیبانی می کنند تگ <embed> را نادیده گرفته و ادامه می دهند وآن هایی هم که از تگ < embed> پشتیبانی می کنند فقط به سراغ همین تگ رفته و محتویاتش را اجرا می کنند.

 

ویژگی های HTML5 برای نمایش صدا و تصویر:

به تازگی با آمدن HTML5 تگ هایی ایجاد شد که به راحتی می توان عناصر مورد نظر را در صفحات وب به کار برد مثلا با آمدن تگ <video> و یا <audio> می توان فایل های صوتی و تصویری را در صفحات به کار برد اما مزیت استفاده از این روش نسبت به تگ های قبلی این است که مرورگر هایی که از این تگهای جدید پشتیبانی می کنند قادرند تا فایل ها را بدون نیاز به پلاگین خاصی نمایش دهند.

تگ <video>

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

Audio » این صفت وضعیت پیش فرض برای اجرای صدای فایل ویدئویی را تعیین می کند که در صورت muted بودن صدا از همان ابتدا قطع می گردد.

Autoplay » این صفت همانگونه که از نامش بر می آید به محض اجرا و بارگذاری فایل ویدئویی آن را اجرا می کند.

Controls » اگر این صفت تعیین گردد کلیدهای کنترلی مروگر ها برای اجرا و یا متوقف کردن و … فایل نمایش داده می شوند.

Loop » این صفت هم پس از به پایان رسیدن فایل دوباره آن را برای کاربران به نمایش می گذارد.

Poster » این صفت هم برای نمایش یک تصویر را تا زمان بارگذاری فایل را به ما نشان می دهد ( دقیقا کاری که در سایت آپارات اتفاق می افتد)

Preload » این صفت هم تعیین می کند که ایا فایل ویدئویی مورد نظر باید همزمان با بارگذاری صفحه دانلود گردد یا خیر؟

که دارای سه مقدار زیر می باشد:

Auto» این مقداردر صورت تعیین باعث می گردد تا همزمان با بارگذاری صفحه فایل مورد نظر بارگذاری گردد.

Metadata » این مقدار فقط برای دریافت اطلاعات اضافی فایل تعیین می گردد.

None » از بارگذاری فایل همزمان با بارگذاری صفحه جلوگیری می نماید.

Src » این صفت هم برای تعیین کردن آدرس فایلی که باید پخش گردد را تعیین می کند.

یک نمونه کد برای استفاده از موارد فوق را ببینید:

<“video src=”movie.mp4″ controls=”controls” preload=”auto” width=”500>

<height=”۴۰۰” poster=”img.jpg” autoplay=”autoplay” audio=”muted”>

</video>

 

تگ <audio>

از این تگ هم برای استفاده کردن از فایل های صوتی استفاده می شود که از صفات زیر با توضیحات بیان شده در قبل پشتیبانی می کند.

Autoplay , controls,loop, preload,src,

ممکن است همه مرورگرها فرمت هایی را که ما در دو تگ <video> و <audio> بیان کردیم پشتیبانی نکنند که در این صورت باید تعیین کنیم که اگر یک فرمت را پشتیبانی نمی کنی به سراغ بعدی برو و آن را چک کن و اگر توانستی فرمت را بخوانی اجرا کن که این کار را به صورت زیر با تگ <source> انجام می دهیم.

صفت src » برای تعیین آدرس فایل مورد نظر

صفت type » برای تعیین نوع mime type فایل

 

11

 

استفاده از خاصیت صفحات چند گانه در وب:

با استفاده از این خاصیت می توان صفحات وب را به چند قسمت مجزا تقسیم بندی کرد و در واقع هر قسمت را در یک صفحه نمایش دهیم.

همانگونه که در قسمت اول این دوره آموزشی مطرح کرده بودیم و با یکدیگر یاد گرفته بودیم ساختار کلی صفحات وب با تگ <html> شروع می شود و با نوشتن تگ  <head> و بعد <body> ساختار کلی کامل می شد. اما برای ایجاد ساختار دوم به صورت زیر عمل می کنیم:

 

22

 

در بالا به جای تگ <head> از تگ <frameset>  استفاده می کنیم

حال در ادامه به بررسی تگ های مربوط به استفاده در صفحات چند گانه می پردازیم.

تگ <frameset>

از این تگ برای ایجاد صفحات چندگانه استفاده می کنیم و با قراردادن این تگ به مرورگر نشان می دهیم که با یک صفحه چند گانه روبه رو هست. این تگ دارای صفات زیر است:

Rows » برای ایجاد فریم های افقی استفاده می کنیم (برای تعیین تعداد و اندازه هر یک از فریم ها بر حسب px)

Cols » برای ایجاد فریم های عمودی به کار می رود (برای تعیین تعداد و اندازه هر یک از فریم ها بر حسب px )

Border » اندازه ضخامت بین هر یک از فریم ها را تعیین می کند که بر حسب px می باشد.

Bordercolor » برای تعیین رنگ border بین فریم ها استفاده می شود که به روش های قبلی رنگ را تعیین می کنیم.

Frameborder » برای نمایش و یا عدم نمایش border های اطراف فریم مشخص می گردد.(یا مقدار ۰ یا ۱ به خود می گیرد)

Framespacing » مانندborder عمل می کند.

 

تگ <frame/>

برای تعیین صفحه ای که در فریم ها نمایش داده می شود از این تگ استفاده می شود.این تگ از جمله تگ های تهی بوده و حتما باید در داخل تگ <frameset> استفاده می شود. به این نکته هم دقت کنید که تعداد فریم های به کار رفته در داخل <frameset> ها باید با تعداد اندازه هایی که در صفت cols و rows تگ frameset آمده است برابر باشد.

صفت هایی را که این تگ پشتیبانی می کند در زیر بررسی می کنیم:

Name » تعیین نام برای فریم که باید یکتا باشد.

Longdesc » آدرس دارنده توضیح مفصلی در مورد فریم .

Src » آدرس صفحه ای که باید در فریم نمایش داده شود.

Noresize » اگر از این صفت که بولین است برای فریمی به کار برده شود از امکان تغییر اندازه فریم توسط کاربر جلوگیری می کند.

Scrolling » برای نمایش یا عدم نمایش اسکرول زمانی که محتویات از مقدار خود بیشتر می شود که دارای سه مقدار yes و no و auto است .

 

تگ <noframes/>

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

 

تگ <iframe/>

برای اینکه بتوانیم تا یک یک صفحه را در داخل یک صفحه معمولی قرار دهیم از این تگ استفاده می کنیم مثلا در کنار عکس و متن ها و لینک ها و…

این تگ از تمامی صفت های تگ <frame> که قبلا در مورد آن صحبت شد به جز noresize پشتیبانی می کند.

 

 

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

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

در آخر هم باید منابع این دوره را معرفی کنم :

با تشکر از جزوات آموزشی استاد احمد بادپی

با تشکر از سایت w3schools

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Time limit is exhausted. Please reload CAPTCHA.

Pin It on Pinterest

Share This

Share This

Share this post with your friends!