تعلم التعامل مع الصور و الفيديو و الصوت و الخلفيات في لغة html - ( الدرس الثاللث )

السلام عليكم ورحمة الله وبركاته

الصور في HTML

مع لغة الـ HTML تَستطيع عرض الصور في صفحات الويب .

وسم الصور و ملمح ناشر الخبر Src Attribute
تَستطيع تحديد أسلوب عرض الصور في ملفات الـ HTML عن طريق الوسم .

الوسم بذلك الشكل " فارغ " ، هذا يقصد أن محتوى الخاصية لاغير و خاتمة الوسم . و لعرض الصورة داخل صفحتك يلزم عليك إستعمال ملمح المصرح بالخبر " src attribute " حيث أن src هي إختصار لـ "source" .

و المقدار التي تعطى لخاصية الـ src هي عبارة عن مجرى " URL " الصورة التي ترغب في عرضها في صفحة الويب .

و الصيغة العامة لكود عرض الصور تأخذ الشكل الأتي :

<img src="/ss/tibanet/url">

و الغرض من URL هو تحديد أين موقع تخزين الصورة ... على سبيل المثال الصورة " tiba,gif " الموجودة في المجلد " images " على موقع " www.tibanet.org " يكون الـ URL لها هو:

http://www.tibanet.org/images/tiba.gif

المتصفح يقوم بعرض الصورة في المقر المتواجد به وسم الصورة في ملف HTML ، فإذا قمت بوضع وسم الصورة بين فقرتين ، فإن المتصفح يعرض البند الأولي ثم الصورة ثم البند الثانية ... و بالمثل إذا قمت بوضع الصورة داخل خلية جدول مواعيد سيقوم المتصفح بعرض الصورة استناداً لمقر الخلية في جدول المواعيد .

السمة Alt

تستخدم الخاصية alt لتحديد النص البديل "alternate text" للصورة . و تكون الصيغة العامة للكود كما يلي :

<img src="/ss/tibanet/tiba.gif" alt="الدفتر">

الخاصية alt تخبر القارئ بالمعنى المرغوب من الصورة في وضعية عجز المتصفح عن تحميل الصورة . حيث أن المتصفح سوف يعرض المقال البديل بدلاً من الصورة ، طبعا هذه أفضلية جيدة لتضمين خاصية alt لكل صورة في الصفحة ، و هذا لتطوير عرض صفحتك و جعلها نافعة للاشخاص التي لديها أو تقوم بإعداد المتصفحات لعرض الكتابة لاغير .

وسوم الصور

Tag	Description
<img>	تحديد صورة.
<map>	تحديد خريطة صورة.
<area>	تحديد منطقة داخل خريطة صورة.

الفيديو في html

أنماط ملفات الفيديو

والان وبعد ان تعرفنا على أنماط الصوت وطريقة إضافته في صفحة ويب، سنتعرف الأن على الأنماط التي يمكن أن يشكل عليها ملف مقطع مرئي ( فيديو ) وهي كما يلي:

النمط المضمن conteneur وهو يمكن إستعماله لتضمينه النمطين التاليين ويعرف ذلك النمط بإمتداده الذي يكون AVI أو MP4 أو MKV...

كوديك الصوت وهو نمط صوت المقطع المرئي ( الفيديو ) وامتداده يكون MP3 أو AAC أو OGG ...

كوديك اللفيديو وهو النمط الذي يقوم بظغط صور المقطع المرئي ( الفيديو ) وتلك الانماط تكون معقدة كما لا تكون بلا مقابل باستمرار ومن أهمها الأنماط الآتية:

H.264: والأكتر إستعمالا لأنه قوي للغاية إلا أن للأسف ليس مجانيا بالكامل.

Ogg Theora: ذلك بدون مقابل وحر ولكن ليس قويا كالأول ولقراءته من الويندوز يلزم اولا تثبيت بعض البرامج اما على اللينكس فهو يقرأه دون الاحتياج لبرامج.

WebM: ذلك ايضا حر ومجاني وقد طرحته جوجل وهو غريم لH.264.

وكما هو الوضع فيما يتعلق للملفات الصوتية فملفات المقطع المرئي ( الفيديو )  كذالك لا يمكنها أكثرية المتصفحات قرأتهاا كلها فإنترنت إكسبلورر متلا يقرأ H.264 وWebM وذلك الأخير يقرأه لاغير إذا كان الكوديك مثبتا على الحاسب الآلي وجوجل كروم وفيرفوكس يقرأون Ogg Theora وWebM. أما سفاري فيقرأ لاغير النمط H.264. وأوبيرا يمكنه قرأءة ألأنماط التلاتة كلها.

ولحل المشكل يلزم إدراج المقطع المرئي ( الفيديو )  بأنماط متنوعة وللحصو على تلك الانماط لفيديو محدد يمكن إستخدام برنامج ما مثل برنامج Miro Video Converter.

إدراج المقطع المرئي ( الفيديو ) في صفحة ويبلإدراج المقطع المرئي ( الفيديو )  في صفحة ويب نستعمل الوسم  ويكون الكود التام على النحو التالي:

<video src="nom_de_ficier.webm" controls poster="image.jpg" width="400"></video>

هناك بعض المواصفات التي تفتقر للشرح:

هناك الخاصية poster وهي لإضافة صورة لتبدو على المقطع المرئي ( الفيديو ) قبل إشتغاله وإن لم تضيفها فإن المتصفح يتضح الصورة الأولى على المقطع المرئي ( الفيديو )  وغالبا ماتكون صورة سمراء.

تم الخاصية controls وهي لإضافة ألأزرار متل زر التشغيل وزر الإيقاف.

والخاصية width فهي لتحديد عرض المقطع المرئي ( الفيديو ) 

وهناك بعض المواصفات الاخرى التي لا تبقى في الكود الأول وهي :

الخاصية height لتحويل طول المقطع المرئي ( الفيديو ) .

والخاصية loop ليبدأ المقطع المرئي  ( الفيديو ) مرة ثانية بعدما ينتهي.

الخاصية autoplay حيت نستعملها لتشغيل المقطع المرئي ( الفيديو )  بمجرد الدخول إلى الصفحة، وأنصحكم بعدم الإفراط في إستخدام تلك الخاصية لانها من الممكن أن تكون مزعجة.

وخاصية preload وبها نحدد إن كنا نرغب في تحميل المقطع المرئي ( الفيديو )  بمجرد الدخول على الصفحة أو لا وتقبل القيم الآتية:

Preload="auto" وبها ندع المتصفح يتخذ قرار لو كان من الضروري تحميل المقطع المرئي ( الفيديو )  أو لاغير بيانات عن المقطع المرئي ( الفيديو )  أو لا شيء.

Preload="metadata" بها يقوم بتحميل بيانات عن المقطع المرئي ( الفيديو )  لاغير مثل مدته وأبعاده إلى غير دلك.

Preload="none" وهنا لايقوم المتصفح بتحميل أي شيء.نستطيع ايضاً هنا توضيح برقية كما فعلنا مع وسم إضافة ملف صوتي إذا كان المتصفح لا يدعم ذلك الوسم  ويكون الكود على النحو التالي:

<video src="nom_de_ficier.webm" controls poster="image.jpg" width="400">

المرجو ترقية متصفحكم إلى أخر إصدار</video>
وكذالك بما أن أغلب المتصفحات لا تقرأ جميع الأنماط فيجب علينا أن نقوم بإدراج أكتر من نوع ليأخدا المتصفح النمط الذي يقرأه ويكون الكود كالتالي حيت ندرج الوسم <source/> داخل الوسم <video> :

<video controls poster="image.jpg" width="400">

<source src=" nom_de_ficier.webm"/>

<source src=" nom_de_ficier.mp4"/>

<source src=" nom_de_ficier.ogv"/>

</video>

كما قرأ حطون فإستعمال تلك الوسوم  <video> و<audio> معقد شيئا ما إلا أن ذلك لا يمنع من إستخدامه في إنتظار تحديثها لتكون سهلة. كما أنه بإمكانكم طول الوقت إستخدام إضافة أو plugin مثل flash عوضها.

الصوت في html

الملفات الصوتية

أنماط الصوت

 هناك أنماط متنوعة وهي على النحو التالي:

هناك النمط MP3: ومعلوم بشكل كبير كما أنه من أقدم الأنماط يمتاز بأنه يتسق مع جميع الأجهزة ولذا فمازال هو الأكثر إستعمالا.

وهناك نمط أخر وهوالنمط ACC ويستخدم كثيرا ما من طرف Apple وهو دو جودة عالية.

هناك ايضا نمط ثالت وهوالنمط OGG وذلك يستخدم بكثرة في البرامج الحرة ناشر الخبر وميزته هو أنه حر أي أنه غير محفوظ بأية براءة إبتكار.

وهناك ايضاً النمط WAV وهونمط غير مظغوط وأنصحكم ألا تستعملوه كثيرا لأن الصوت في ذلك النمط يكون دو كمية عظيم.

يلزم أن تعلموا كذلك انه ليس هناك نمط تعرفه جميع المتصفحات حيت أن كل نمط يسعى متصفح دون غيره، فمثلا النمط MP3 يحاول أن كل من انترنت اكسبلورر وجوجل كروم و سفاري إلا أن لا يحاول أن كل من فيرفوكس وأوبيرا ونفس الشيء فيما يتعلق للنمط OGG الذي يحاول أن جوجل كروم وفيرفوكس وأوبيرا ولا يحاول أن انترنت اكسبلورر وسفاري. إلا أن رغم هذا نستطيع أن نتجاوز ذلك المشكل من خلال عرض أنماط غير مشابهة ليختار منها المتصفح النمط الذي يدعمه.

إدراج ملف صوتي في صفحة ويب

بعدما تعرفنا على الأنماط التي يمكن أن تشكل عليها المكونات الصوتية سنرى هذه اللّحظة كيف سنضيفها إلى صفحة ويب. وذلك لين للغاية فيكفي لاغير أن نستعمل الوسم <audio> وهو وسم يمكن إستخدامه على جميع المتصفحات لأنه يعمل عليها كلها إضافة إلى المتصفح إنترنت إكسبلورر ابتداء من الإنتاج التاسع.

والكود التام الذي نستطيع من إدراج الصوت داخل صفحة الويب فهو ذلك:

<audio src="nom_de_fichier.mp3" controls></audio>

كما ترون فهذا جد يسير فيكفي كتابة الوسم audio وأمام src نكتب عنوان الملف الصوتي متبوعا بصيغته وهنا فهو بصيغة mp3 كما يلزم ألا ننسى الكلمة الأخيرة controls لأننا إذا لم نضيفها فلن يتضح إي شيء على المتصفح.

من الممكن أن يكون هناك بعض المتصفحات القديمة التي ليست داعمة ذلك الوسم لهذا يمكن توضيح برقية على تلك المتصفحات التي ليست داعمة ذلك الوسم ودلك لإقترااح حل أخر على المستعمل حيث تبدو تلك الرسالة على المتصفحات التي تدعم ذلك الوسم لاغير ولا تبدو على المتصفحات الاخرى والكود الذي نستطيع من هذا فهو على النحو التالي:

<audio src="nom_de_fichier.mp3" controls>هذا المتصفح قديم المرجو تحديته</audio>

هناك كذلك أمر أخر يلزم الإنتباه إليه فكما قلنا فأغلبية المتصفحات إذا لم نقل كلها ليست داعمة جميع الصيغ التي يمكن ان تكون عليها الملفات الصوتية، والحل هو أن نقوم بإدراج ملفين صوتيين يختلفان لاغير في صيغتهما حيت سوف يقوم المتصفح بتشغيل الملف ذو الصيغة التي يدعمها ويكون الكود كما في المتال الأتي:

<audio controls>

<source src="nom_de_fichier.mp3"></source>

<source src="nom_de_fichier.ogg"></source>

</audio>

الخلفية في html

الخلفيات الجذابة تستطيع أن تصنع مواقع ويب رائعة الشكل.

الخلفيات

الوسم  <body> لديه خاصيتين لتعيين الخلفيات ، حيث يمكن تحديد الخلفية سواء على هيئة لون أو على هيئة صورة.

الملمح Bgcolor

تستخدم الملمح bgcolor لإعداد لون الخلفية ، حيث تَستطيع استعمال واحد من القيم المتعارف عليها للألوان ، سواء كانت أرقام hex ، أو قيم RGB ، أو أسماء الألوان ، كما يظهر عن طريق الكود الأتي:

<body bgcolor="#000000">

<body bgcolor="rgb(0,0,0)">

<body bgcolor="black">

حيث تشير الأكواد الثلاثة السابقة إلى تعيين اللون الأسود كخلفية بالصيغ الثلاث المتعارف عليها.

السمة Background

تستخدم السمة background لإعداد صورة للخلفية ، حيث يتم تعيين الصورة المستخدمة كخلفية من خلال URL ، و في حال كون الصورة أصغر من نافذة المتصفح سوف يتم تكرارها ذاتياً رأسياً و أفقياً حتى يتم ملء نافذة المتصفح. و يتم ذلك من خلال الكود التالي:

<body background="tibanet.gif">

<body background="http://www.tibanet.org/tibanet.gif">

حيث يمكنك استخدام URL نسبي كما هو موضح بالسطر الأول أو يمكنك استخدام URL مطلق كما هو موضح بالسطر الثاني.

لاحظ أن:

إذا أردت أن تستخدم صورة كخلفية يلزم أن تضع في اعتبارك النقاط الآتية:

* أن الصور تأخذ وقت أطول في التحميل لهذا يلزم أن لا يكون أكثر كمية الصورة عن 5 كيلو بايت.

* أن صورة الخليفة يلزم أن تكون متوافقة مع بقية الصور في الصفحة.

* أن صورة الخلفية يلزم أن تكون متوافقة مع ألوان الكتابة في الصفحة.

* أن صورة الخلفية سيتم عرضها بأسلوب جيدة نحو تكراراها.

* أن التركيز سوف يكون على الخلفية زيادة عن المقال ذاته.

لاحظ أن " معلومات مفيدة "

تم استبعاد سمات " bgcolor " و " background " و " text " من الوسم < body> في الإصدارات الأحدث من HTML مثل ( HTML 4 و XHTML ) ... و جمعية (W3C) أو " World Wide Web Consortium " استبعدت هذه السمات من توصياتها.
في الإصدارات المستقبلية من إصدارات الـ HTML ، سيتم استخدام الأنماط الانسيابية (CSS) لتحديد التخطيط العام و عرض خصائص عناصر الـ HTML.
المواقع الأكثر زيارة و الأكثر شهرة طفيف منها يستعمل الصور كخلفيات ... أما أكثريتها يستعمل الألوان كخلفيات و هي ألوان الأبيض و الأسود و الرمادي.