استثمر للحياة

برمجة و تصميم و تطوير المواقع

الصور و الرسم و الميديا HTML5

حجم الخط

استثمر للحياةالصور images  و الرسم و الميديا

 

تتميز HTML5 ببيئات عمل تساعدنا على ادراج الصور و الرسوم و الميديا ... بطريقة سهلة و جميلة


أولاً : وسوم الصور Images

الوسم

الوصف

<img>

وسم لتعريف الصور و له 3 سمات المصدر  scr النص البديل alt و الشكل style  و استخدام الخرائط  usemap 

  <img src="pic_1.jpg" alt="Mountain " style="width:304px ; height:228px

<map>

لتعريف مناطق على الصورة يمكن أن نضع روابط فيها . و له السمة name

<area>

لتحديد المناطق التي يمكن وضع روابط بها يستخدم مع <map>و له السمات shape| coords  | href

<figcaption>

لكتابة وصف توضيحي أسفل الصورة

<figure>

وسم يحتوي الوسم  <figcaption>

 

عند عمل map لصورة ما

  1. نقوم بكتابة الوسم map و تحديد اسماً له  ... <map name="planetmap">

  2. نذكر هذا الاسم في الوسم  <img>  مع السمة usemap  و هو الذي يحتوي على الصورة هكذا   usemap="#planetmap"

  3. نستخدم الوسم   <area> لتحديد المناطق التي يمكن وضع روابط بها

     

السمة shape  لرسم شكل مستطيل rect/ دائرة circle

السمة coords  لتحديد موضع " إحداثيات " الرابط

السمة  hrefلتحديد الرابط نفسه

 

مثال

<img src="planets.gif" alt="Planets" usemap="#planetmap" style="width:145px ; height:126px">

<map name="planetmap">

  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">

  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">

  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">

</map>

الصورة توضح كيفية تحديد نقطة على صورة بعرض width  200 و طول height  200px

ابعاد الشاشة html5

 

ثانياً الرسم   

<canvas>

لرسم الاشكال و الصور مباشرة و له سمتين height| width  |style و يستخدم مع Javascript

<svg>

لرسم الاشكال و الصور مباشرة مثل الخطوط، و المربعات  ، والدوائر ، والنص ، و الرسوم البيانية والصور .

لرسم مستطيل باستخدام canvas   بطول 200 و عرض 100 px

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>

لرسم دائرة حمراء بحرف اسود باستخدام  svg

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="4" fill="Red" />
</svg>

 

لرسم مستطيل أزرق  بحرف اسود باستخدام  svg

<svg width="400" height="100">
  <rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>

أمثلة على svg    من هنا

 

نلاحظ أن :  

Canvasليست أداة رسم و لكنها وعاء يُرسم فيه عن طريق  برنامج أخر مثل Javascript. بينما svgهي وعاء للرسم متتطابق مع HTML5

أي ملف نصي مكتوب بين الوسمين <  <canvas></canvas   أو الوسمين < <svg></svg  لن يظهر الا إذا كان المتصفح لا يدعم خاصية الرسم   canvas أو svg.

 

 

Audio / Video ثالثاً التعامل مع  

<audio>          لتعريف محتوي صوتي

مثال

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

 

نلاحظ أن :  أي ملف نصي مكتوب بين الوسمين  <audio></audio>   لن يظهر الا إذا كان المتصفح لا يدعم خاصية الصوت  audio.

 

<source>     لتحديد مصدر و نوع الملف الصوتي يتدرج تحت  <audio> و له سمات هي mediasrc |  | type

<source src="movie.ogg" type="video/ogg"media="screen and (min-idth:320px)">

<track>       لتعريف ملفات التراك النصية لكل من      <video>  و  <audio>

<video>       لتعريف محتوى فيديو

 

امثلة على HTML5


 

الموضوع  :  *الصور images  و الرسم و الميديا* المرجع : استثمر للحياة  investolife 

اعلان تجاري
اعلان 468