html img tag

<img />

Img هي اختصار ل image ومعناها صورة.
ويُستخدم هذا الوسم عندما نُريد ادراج صورة في الموقع؛ هذه الصورة اما تكون لدينا او ادراجها من موقع اخر في موقعنا.
وهذا العنصر لا يوجد لديه نهاية وسم (closing tag).
يُمكن كتابه هذا الوسم <img > او <img />
وهذا العنصر لديه اثنان attributes أساسيين هما:

• src : وتكون قيمته عبارة عن اسم ومسار الصورة في ملفات الموقع او لينك الصورة لو كانت من موقع اخر.
• alt : وتكون قيمته عبارة عن وصف للصورة؛ وتظهر أهميته عندما تكون الصورة غير متاحة لزائر الموقع وذلك بسبب مثلا بطئ سرعة النت عند الزائر ؛ فيظهر القيمة بداخل هذا ال attribute بدلا من الصورة.

 
<img
  src="https://courses4arab.com/static/html-tags-vs-html-attributes-b8b3a0f9f3b034bce32b67fc4ec181cc.png"
  alt="html element و html tag و html Attribute"
/> 

html picture tag

<picture> </picture>
<Source media="( )" srcset="" />
<img src="" >

Picture ترجمتها صورة.
ويُستخدم هذا العنصر إذا كان لدينا صورتان او أكثر؛ مثلا إذا كان لدينا صورتان وأردنا ظهور الصورة الأولى في حالة الشاشات الصغيرة مثل الموبايل ولكن في حالة الشاشات الكبيرة لا نريد اظهار الصورة الأولى ولكن اظهار الصورة الثانية بدلا منها؛ فهذا هو العنصر المناسب لذلك.
وهذا العُنصر يكون بداخله عنصرين اساسيين هما:

• Source هذا العنصر:
  • لا يوجد لديه نهاية وسم (closing tag).
  • وله اثنان attributes أساسيين هما:
    • Media : وتكون قيمته عبارة عن عرض الشاشة التي سوف يتم فيها عرض الصورة وفى المثال الذى لدينا يتم عرض الصورة الاولى فى حالة الشاشات التى عرضها اقل من 500px
    • Srcset : وتكون قيمته عبارة عن مسار واسم الصورة او لينك الصورة.
• img : كما شرحنا هذا العنصر في الأعلى؛ وتظهر الصورة التي بداخله في حالة عدم ظهور الصور الموجودة داخل عنصر ال source

 
<picture>
  <source media="(max-width: 500px)" srcset="https://bit.ly/2xRKZv8">
  <img src="https://bit.ly/2yDF3Xf" alt="ali hassan">
</picture> 

HTML figure, figcaption, img tags

<figure> </figure>
<figcaption> </figcaption>
<img src="example.jpg">

عندما تريد وضع صورة في الموقع وتريد ان تَكتب جُملة توضيحية أسفل هذه الصورة ف الطريقة الصحيحة هي استخدام هؤلاء العناصر الثلاثة معاَ.
تم شرح هؤلاء العناصر الثلاثة معاً من هنا

html map, area tags

<map> </map>
<area />
<img src="" />

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

أولا نكتب عنصر ال <img> كما شرحناه في الأعلى ويحتوي على attribute أساسي في هذه الحالة يُسمى usemap وتكون قيمته مسبوقة ب علامة ال #

ثانيا نكتب عنصر ال <map> ويكون لديه attribute يُسمى name وتكون قيمته نفس قيمة ال attribute الخاص بعنصر ال <img> ولكن بدون علامة ال #؛ وهذا العنصر يكون بداخة عنصر ال <area>

ثالثا عنصر ال area في هذه الحالة يكون داخل عنصر ال <map> وهو من العناصر التي لا تحتوى على نهاية وسم (Closing tag)
يحتوي على أربع attributes أساسيين هما:

• shape : وترجمتها شكل وتُعبر عن الشكل الذى سوف نضغط عليه داخل الصورة مثل rect , circle, poly
• coords : هي اختصار ل coordinates وتكون قيمتها عبارة عن احداثيات المنطقة التي سوف يضغط عليها الزائر.
• href : وهنا نكتب اللينك الذى سوف يذهب اليه الزائر عند الضغط على مكان الصورة.
• alt : وهى اختصار ل alternative وتعنى البديل وتكون قيمتها عبارة عن نص يظهر للزائر في حالة عدم توقر الصورة .

html canvas tag

<canvas> </canvas>

تستخدم لرسم الرسومات على صفحة الويب وغالبا ما يستخدم معها لغة ال JavaScript لعمل هذه الرسومات.

وهذا كورس كامل للمهندس اسامة صاحب قناة elzero web school لشرح هذا العنصر بالتفصيل كورس اليوتيوب

html svg tag

<svg> </svg>

Svg هي اختصار ل Scalable Vector Graphics والتي تُمكننا من عمل الرسومات داخل الموقع. والموضوع صعب انه يتشرح في بضعه سطور؛ لازم مجموعة من الفيديوهات التوضيحية لهذا العنصر.