القائمة الرئيسية

الصفحات

أخبار البرمجة

الفرق بين  html && html5 

الكثير من الأصدقاء المبرمجين يسألون هل نقتصر على تعلم html او لابد من تعلم html5 ،  ما أريد ان أخبر به الجميع ان أي لغة برمجية يحدث فيها تغيير على الدوام ولا زم الاطلاع عليه ، لأن التغيير ما هو سوى تطوير في الية العمل على هذه اللغة ، فمثلا html5 هي تطوير عن html تحتوي على مزايا سهلة مقارنة بhtml كل هذه المزايا هدفها الأول أن تسهل عليك العمل ليس أكثر من ذلك ،  لكن هذا لايعني أن htmlقد ولى زمانها أو انتهت صلاحيتها أو لم تعد صالحة للعمل ، لكن ما يمكنك عمله في عدة سطور بواسطة html يمكنك عمله في سطر واحد ب html5  وبالحديث عن الاختلاف بين هذه التقنيتين ليس بالكثير لذا في هذا المقال جمعت لكم أبرز الاختلافات الموجودة بينهما ، 

 المفاهيم الجديدة التى ظهرت فى HTML5 

من أجل فهم  هذه الخاصية الجديدة نتعرف اولًا على المشكلة التى حلت بسببه , محركات البحث مثل جوجل تنشر ما يسمى بالعناكب Crawler فى كل مكان فى مواقع الويب , وظيفة هذه العناكب هى جمع المعلومات عن محتوي الصفحات التى تزورها حتى تظهر نتائج مناسبة لمن يبحث عن شئ موجود فى هذه الصفحات , كانت المشكلة ان هذه العناكب لا تفهم صفحات الويب بطريقة صحيحة بمعنى انها لا تعرف اين الهيدر الخاص بالصفحة واين المقال والفوتور واين اسم الكاتب وغيرها من المعلومات , وهذه المعلومات تفيد بالطبع فى ارشفة الصفحة واظهار النتائج بشكل صحيح لمستخدم محرك البحث .
 
HTML5 حلت هذه المشكلة انها اضافت وسوم ثابته لاجزء صفحة الويب لابراز دلالة كل جزء كمثال <header> </header> فحينما يدخل الزاحف إلى الصفحة ويحاول ان يأرشفها فانه سيفهم ان ما بين هاتين الوسمين هو محتوي الهيدر ومثال اخر <article></article> عندما يرى الزاحف هاتين الوسمين فسيعرف ان ما بينهم هو محتوي المقالة وبالتالى سيتهم بأرشفة محتوي المقالة لتظهر للمستخدمين فى نتائجه وهكذا .
 
 
 

الوسوم Tags الجديدة فى HTML5 التى تخدم فكرة Semantic

  • <article> : يدل على المقالة 
  • <aside> : يدل على الشريط الجانبى 
  • <details> : يدل على المزيد من المعلومات التى يمكن للمستخدم اظهارها او اخفاءها 
  • <figcaption> : وصف للرسوم والصورة التوضيحية 
  • <figure> : صور توضيحية 
  • <footer> : ذيل الصفحة او القطاع Section 
  • <header> : رأس الصفحة او القطاع Section 
  • <main> : يدل على المحتوي الرئيسي للصفحة 
  • <mark> : يدل على نص مميز فى الصفحة 
  • <nav> : يدل على شريط Navigation او التصفح فى الموقع 
  • <section> : يعرف قطاع فى الصفحة 
  • <summary> : يعرف الجزء الظاهر من <details> 
  • <time> : يعرف الوقت والتاريخ 
وكل واحد من اسمه يدل على وظيفته فى ابراز ماهية ما بدخله .

الرسم عن طريق Canvas

من المميزات الرائعة التى جاءت مع HTML5 وهى تتيح لك الرسم على المتصفح , وفى الحقيقة الوسم <canvas> يحتوي فقط الرسومات , ولكن يجب عليك استخدام Javascript لكى ترسم فعليًا على الشاشة .
 
مثال لما يمكن فعله بهذه الخاصية الرائعة .
 
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”rADvF” default_tab=”js,result” user=”natewiley”]See the Pen <a href=’https://codepen.io/natewiley/pen/rADvF/’>Color Cascade</a> by Nate Wiley (<a href=’https://codepen.io/natewiley’>@natewiley</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
 
وبهذه الخاصية يمكنك عمل الكثير حتى يمكنك تصميم العاب على المتصفح فهى تعتبر بديل لتقنتيات الفلاش Flash التى تمثل جزء كبير من المحتوي على الانترنت .

المدخلات او Inputs

جلبت HTML5 الكثير من المدخلات الجديدة فلم يعد الامر محصور فى نوع النص والباسورد فقط , إليك الانواع الجديدة : 
  • color 
  • date 
  • datetime 
  • datetime-local 
  • email 
  • month 
  • number 
  • range 
  • search 
  • tel 
  • time 
  • url 
  • week 
من اسم كل نوع جديد من الخاصية يمكنك تخمين فائدتها وقم بتجربتها بنفسك لتكتشف قوة هذه الانواع .

الفيديو والصوتيات جزء من HTML 5

قبل HTML5 كان تشغيل الفيديوهات يتطلب اضافة مثل Flash ولكن HTML5 تمكنا من ادراج الفيديو فى صفحات الويب بسهولة مع الوسم <video> ويمكنك التحكم فى الفيديو عن طريق الايقاف والتشغيل وغيرها من الخصائص , كما يمكنك تعريف ملف صوتى داخل الوسم <audio>.
 
يوجد المزيد من الاضافات الرائعة فى HTML ولعل هذه كانت ابرزها .
 
إلى هنا نتنهى من مقالة اليوم اسأل الله ان اكون قد وفقت فيها واعذرونى عن اي خطأ واتمنى مشاركتنا فى التعليقات عن ارائكم عن الموضوع وشكرًا لكم .
reaction:
في الإفادة استفادة
في الإفادة استفادة
السلام عليكم ورحمة الله تعالى وبركاته : مرحباً ترحيبه الصبح للشّمس ، يا مرحباً لحظة عناق الليل مع طلوع النور ، يا مرحباً في لحظة كلّ المعاني غدت همس والقلب غارق في بحر أنس وسرور ، يا مرحباً فالعين جافاها نومها تنتظر قدومكم ببهجة وسرور ، يا مرحباً عدد ما غرد على غصن حديقتنا من عصفور يا مرحباً عدد ما نزلت قطرات ماء من السماء بحبور ، يا مرحباً ضيفنا بعدد الدقائق والثواني التي انتظرتكم بها من قلب صبور. كل شيء يرحب بك ، كل شيء يتبسم ، ويتوهج فرحاً بقدومك ، هذا الفضاء مخصص لك لكي تستفيد منا و معنا ومما لدينا !!!!

تعليقات