السمات في لغة (html)

ماهي السمات (Attributes) ؟هي عبارة عن معلومات إضافية تضاف للعناصر في (html) لتغير سلوك العنصر او لتخصيصه او لتوفير معلومات توضيحية للعنصر وغير ذلك، تكون السمات داخل وسم البداية للعنصر، وتنقسم السمات الي قسمين القسم الأول سمات عامة يمكن إستخدامها في معظم العناصر، واما القسم الثاني سمات خاصة بعناصر محددة لاتعمل الا في العنصر المحدد لها.
لكل سمة وظيفة محددة تقوم بها تختلف من الأخري لذلك يمكن إستخدام أكثر من سمة داخل العنصر الواحد لاغراض مختلفة في العنصر نفسه.
تساعد السمات علي تحسين تجربة المستخدم، فيمكن من خلال السمات تغيير مظهر العناصر الظاهرة للمستخدم من حيث اللون والشكل العام.
ليس هذا فحسب بل تساعد السمات علي تحسين إمكانية الوصول، حيث توفر معالجة لبعض العناصر التي تحتاج لمعلومات إضافية لبرامج قارئات الشاشة التي يستخدمها الاشخاص ذوي الاعاقة.

الصورة العامة للسمات في (html)

<element attribute="value">...</element>

شرح الصورة العامة للسمات:-
element: يمثل إسم العنصر.
attribute: يمثل سمة العنصر.
value: تمثل قيمة السمة
</element>: يمثل وسم النهاية للعنصر

مثال للتوضيح أكثر :-

<html lang="ar">...</html>

إرشادات هامة
☆يجب أن تكون السمات داخل وسم البداية للعنصر
☆يجب وضع فراق بين اسم العنصر والسمة لتجنب الإلتصاق.
☆يجب ان تكون العلامة = بعد السمة مباشرة.
☆يجب ان تكون قيمة السمة بين علامتي التنصيص "....."او '.....'.
لايمكن إضافة سمات لعنصر الرأس<head> لأسباب سوف تتعرف عليها لاحقا.

أنواع السمات

السمات العامة

وهي سمات تستخدم في معظم عناصر لغة(html)، وهي مجموعة كبيرة من السمات ومن امثلة هذه السمات:
السمةclass وهي سمة تستخدم لتخصيص عناصر (html) وتكون قيمة السمة هي فئة توجد فيها خصائص من لغة (css) وهذه الخصائص قد تحدد لون محدد للعنصر او خلفية محددة او مكان واتجاه العنصر بإختصارالسمة classدورها هو تخصيص العناصر في لغة (html) .
من السمات ايضا السمة id والسمة dir والسمة style وغيرها من السمات العامة

السمة الخاصة

السمات الخاصة هي سمات تعمل غالبا في عناصر محددة وبعضعها يعمل في عنصر بعينه مثال :
السمة href فهي سمة خاصة بعنصر الرابط تحدد وظيفة الرابط في الصفحة وكذلك السمة src وهي سمة خاصة تستخدم عنصر الصورة وتحدد مسار الصورة، وكذلك السمة type وهي سمة خاصة تستخدم لتحديد نوع الادخال ،وهناك سمات اخري .

المزيد »

العناصر في لغة (html)

ماهي العناصر (Elements) ؟ هي المكونات الاساسية لبناء صفحة ويب، لكل عنصر وظيفة محددة في الصفحة، بعض العناصر وصفية والبعض الاخر عناصر مرئية تظهر للمستخدم، تتكون معظم عناصر (html) من وسمين وسم البداية ووسم النهاية للعنصر نفسه ،وبعض العناصر لاتحتوي علي وسمين في لغة(html) تكتفي بوسم واحد فقط ويطلق عليها أحيانا اسم العناصر الفارغة لاتحتوي علي محتوي ولكنها تقوم بوظيفة محددة في الصفحة، بعض عناصر في لغة (html) تكون علي شكل كتلة وتسمي بعناصر الكتلة اي أن العنصر منفصل عن العنصر الاخر في سطر جديد ينشئه العنصر تلقائيا ،وبعض العناصر تكون مضمنة وتسمي بالعناصر المضمنة وهذه يمكن إضافتها في نفس السطر الموجود فيه العنصر الاخر ولا تنشئ سطر جديد تلقائيا ، بعض العناصر لها دلالت لمحركات البحث لمساعدتها في فهم محتوي الصفحة، بعض العناصر لاتعمل الا اذا أضفنا لها سمة تحدد وظيفة العنصر في وسم البداية للعنصر ،تتميز عناصر (html) بالتداخل حيث يمكن للعنصر الواحد أن يحتوي بداخله عدة عناصر أخري.

أنواع العناصر

العناصر الوصفية

هي عناصر تحتوي علي معلومات وصفية تصف شيئا في الصفحة للمتصفحات او لمحركات البحث العالمية، وهذه العناصر لها قسم مخصص وهو عنصر الرأس <head>حيث تكون معظم هذه العناصر داخل هذا العنصر وهي عناصر كثيرة صحيح ان بعض العناصر الوصفية القليلة جدا يمكن أن تكون احيانا خارج عنصر الرأس مثل العنصر <style> وغيره ،لكن يظل عنصر الرأس هو المكان المخصص للعناصر الوصفية

العناصر المرئية

وهي عناصر تحتوي علي معلومات مرئية ظاهرة للمستخدم ، وهي كل مايراه المستخدم ويتفاعل معه في الصفحة، وهي عناصر كثيرة ويتم إختيارها علي حسب البيانات المطلوبة في صفحة ويب ، وهذه لها قسم مخصص أيضا في لغة (html)وهو عنصر الجسم <body>معظم هذه العناصر تكون داخل هذا العنصر.

عناصر الكتلة

وهي عناصر تكون علي شكل كتلة منفصلة عن العناصر المتواجدة بالقرب منها، وهي عناصر تبدأ بسطر جديد تلقائي عند إضافتها واذا كانت داخل عنصر نصي عند كتابتها تفصل النص وتنشئ سطر جديد وقد تقسم العنصر النصي لقسمين بسبب الفاصل الذي تنشئه، وهي عناصر عديدة منها عنصر الفقرة <p>وهذا العنصر يستخدم لإضافة فقرة نصية وهذه الفقرة تبدأ في سطر جديد دائما وكذلك عناصر العناوين <h2> وغيرها الكثير من عناصر الكتلة.

العناصر المضمنة

فهي عناصر يمكن كتابتها في سطر واحد داخل عنصر أخر او مع عنصر أخر ولاتنشئ سطرا جديدا مثال العنصر <span>او العنصر <strong>وغيرها العناصر.

العناصر الدلالية

من اسمها هي عناصر تحمل دلالات محددة لمحركات البحث العالمية ، تقوم هذه العناصر بمساعدة محركات علي فهم المحتوي الموجود في الصفحة وهي عناصر عديدة منها :
<article> و <aside> و <code> و <nav>وغيرها من العناصر.

العناصر الفارغة

وهي عناصر تحتوي علي وسم وأحد للعنصر ولايوجد فيها محتوي ، فهذه العناصر لديها وظائف محددة في الصفحة مثل:
العنصر <hr>فهو عنصر يرسم خط ولا يضيف شئ أخر
وكذلك العنصر <br>وهذا عنصر ينشئ سطر جديدا فقط لاغير وهناك عناصر أخري قليلة أيضا تحت مسمي العناصر فارغة

عناصر لا تعمل إلا بوجود سمة تحدد وظيفة العنصر

بالفعل هنالك عناصر في لغة (html)لا تعمل إلا بإضافة سمات تحدد وظيفة العنصر في الصفحة وهي عناصر كثيرة أمثلة:

عنصر الرابط <a>

<a>رابط</a>

اذا نظرنا الي المثال اعلاه سنجد ان العنصر لايعمل لماذا لانه يحتاج للسمةhrefليعمل وهذه السمة تحدد وظيفة الرابط، مرتبطة ارتباط وثيق بعنصر الرأبط انظر للمثال ادناه :

<a href="www.facebook.com"> رابط موقع فيس بوك </a>

بهذه الطريقة عند الضغط عليه الرابط سيعمل مباشرة ويقودك الي صفحة فيس بوك.
عنصر ميتا <meta> وهذا العنصر يحتاج لسمة تحدد وظيفة العنصر وهذا العنصر له سمات عديدة تفرق بين وظائفه في الصفحة فهو عنصر وصفي وكل سمة بداخله تحدد نوع البيانات الوصفية التي يحتويها وهذه أمثلة لسمات يمكن استخدامها في العنصر <meta>

السمة charset هي سمة تحدد وصفا للمتصفح يحدد ترميز الأحرف وتستخدم أكثر قيمة لهذه (UTF-8) ، نعم هناك قيم أخري مثل (UTF-16) وغيرها ولكن لا تستخدم كثيرا في صفحات الانترنت مثال :

<meta charset="UTF-8"/>

السمة viewport-fit وهذه السمة تعطي إشارة للمتصفح أن الصفحة متجاوبة مع الشاشات المختلف، وهناك الكثير من السمات الاخري مثل :content وname جميعا تعمل في العنصر<meta>

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

المزيد »

عنصر الجذر في لغة (html)

ماهو عنصر الجذر (Root) ؟ هو العنصر الأساسي في مستند (html)، فهو يمثل الحاوية التي تجمع كافة العناصر الاخري، فهو عنصر يحيط بجميع المحتوي الموجود في الصفحة، وهو العنصر الذي يساعد المتصفحات علي فهم هيكل الصفحة، (html) يتكون من أهم عنصرين يتبعانه كالابناء هما:
عنصر الرأس <head>وهو عنصر يهتم بالعناصر التي تحتوي علي بيانات الوصفية.
وعنصر الجسم <body>وهو عنصر يهتم بالعناصر التي تحتوي علي بيانات المرئية في الصفحة ظاهرة للمستخدم مثل الفقرات والروابط والصور والجداول والعناوين وغيرها من العناصر، يمثل عنصر الجذر بداية ونهاية مستند (html)،يستخدم سمة تحدد لغة الصفحة مثل lang وسمة أخري تحدد اتجاه النص في الصفحة مثل :dir وبعض السمات الاخري انظر مثال ادناه:

<html lang="ar" dir="ltr">

الاقسام الرئيسيه لعنصر الجذر

القسم الاول عنصر الرأس <head>

هو عنصر هام ومن العناصر الرئيسية، يحتوي علي عناصر تحتوي علي معلومات وصفية مثل:

<title> عنوان الصفحة الذي يظهر اعلي المتصفحات مثال :

<title>عنوان الصفحة</title>

او العنصر <style> :وهو عنصر يستخدم لكتابة خصائص لغة (Css)مثال :

<style>
body{color:#111;}
h2 {padding:5px;}</style>

اوعناصر ميتا <meta>الوصفية وهي مجموعة كبيرة تتحكم فيها سمات محددة تحدد نوع المعلومات الوصفية التي تحملها مثال :

<meta charset="UTF-8"/>

أو عناصر الروابط<link>: وهي عناصر تتحكم فيها سمات ايضا لتحديد نوع عنصر الرابط، مثل رابط لايقونة الصفحة التي تكون بجوار عنوان الصفحة وغيرها مثال :

<link href="...."/>

<script>....</script>

القسم الثاني عنصر الجسم <body>

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

■ عنصر الفقرة<p> عنصر يستخدم لإضافة فقرة نصية مثال

<p> هذه فقرة </p>

■ عنصر العناوين وهي ستة عناوين هي :
<h1> و <h2> و <h3> و <h4> و <h5> و <h6>
تستخدم العناوين داخل الصفحة مثال

<h2> هذا عنوان </h2>

■ عنصر الرابط <a>وهو عنصر يستخدم لإضافة رابط اي كان نوعه ولكن هذا العنصر يحتاج لسمة تحدد نوع الرابط مثال

<a href="...."> هذا رابط</a>

■ عنصر الصورة <img> ايضا يحتاج لسمة تحدد نوع رابط الصورة مثال

<img src="...."/> هذه فقرة </p>

المزيد »

نوع المستند في لغة (html)

ماهو نوع المستند(Document type)؟
هو الوسم الذي يكتب في بداية صفحة ويب أعلي المستند لتحديد إصدار لغة الترميز المستخدمة في الصفحة، يعد بمثابة إعلان للمتصفحات، حيث يساعد المتصفحات في تفسير محتوي الصفحة بالطريقة الصحيحة المتوافقة مع للمعايير الخاصة بالاصدار المحدد.

في تسعينيات القرن الماضي شهد تطوير الويب إصدارات متعددة من (HTML) ابرزها الاصدار:HTML 4.01وكان هذا الاصدار يوفر عدد من المستندات اشهرها (transitional) و (Strict) انظر ادناه

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

كان لابد من تعريف نوع المستند كما في المثال السابق، ذلك لان (html) انذاك كانت تتبع للغة (Sgml) وهي لغة الترميذ المعممة فكان لابد من ذكر قواعد (Sgml) لتحديد نوع المستند لذلك كان نص نوع المستند طويلا فكانت بعض قواعد لغة (sgml) تتميز بالصرامة ،ومع تطور الويب كانت هناك حاجة للغة تكون مرنة وأقل تعقيد حتي ظهرت html5
بعض تطوير النسخة الخامسة من (html)أنفصلت (html) من قواعد لغة (sgml)المعقدة واصبحت لغة قائمة بذاتها لذلك : تم إختصار نوع المستند ليصبح هكذا

<!DOCTYPE html>

اهمية وسم نوع المستند

هو وسم هام جدا في مستند(html) بدونه يدخل المتصفح في وضع التوافق وهو الذي بدوره قد يؤدي الي تفسير مستند (html)بطريقة غير صحيحة

نوع المستند دائما يكون في بداية الملف انظر ادناه

<!DOCTYPE html> 👈 
   <html>

      <head>
        </head>

        <body>
      </body>

   </html>

المزيد »