عناصر البيانات المرئية في لغة (html)

ماهي العناصر المرئية (Visual Elements) ؟ هي العناصر التي تنشئ محتوي مرئي للمستخدم ويتفاعل معها، مثل: الصور والنصوص والروابط والقوائم والعناوين والجداول وغيرها من البيانات المرئية للمستخدم، جميع العناصر المرئية تكون داخل عنصر الجسم<body>في مستند (html).

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

عنصر الفقرة<p>

عنصر يستخدم لإضافة فقرة نصية مثال :

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

عناصر العناوين<h1> الي<h6>

وهو عناصر تستخدم لإضافة عناوين داخل صفحات الانترنت، ويمكن من خلالها كتابة عناوين داخل المقالات او المشاركات لتنظيم الصفحة وهذه العناوين عددها ستة عنوان مثال :

<h1>عنوان اول </h1>

<h2>عنوان ثاني </h2>

<h3>عنوان ثالث </h3>

<h4>عنوان رابع </h4>

<h5>عنوان خامس </h5>

<h6>عنوان سادس </h6>

ملاحظة

• تستخدم عناصر العناوين لاضافة عناوين فرعية داخل صفحات الانترنت.
• عنصر العنوان الاول <h1>له اهمية كبيرة لمحركات البحث فهو يمثل العنوان الاساسي للمحتوي ويجب الا يتكرر في الصفحة أكثر من مرة.
• عنصر العنوان <h2> ثاني اكثر اهمية ويليه عنصر العنوان <h3> ويكون ترتيب بقية العناوين هكذا الي العنصر <h6>وهو يمثل اقل أهمية .

عنصر الصورة <img>

وهو عنصر يستخدم لاظهار صورة للمستخدم، وهو من العناصر التي تحتاج الي سمة تحدد مسار او رابط الصورة مثل السمة srcمثال:

<img src="مسار او رابط الصورة هنا"/>

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

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

<a href="مسار الرابط">...</a>

عناصر القائمة <ol>و <ul>و<dl>

وهي عناصر تستخدم لعمل قوائم لغرض محدد مثل قائمة اصناف محددة او قائمة نصوص محددة، وهي ثلاث عناصر، ويتم إضافة العنصر <li>داخل هذه القوائم لتنظيم القائمة، هناك ثلاث انواع للقوائم منها قائمة مرتبة<ol> وهي قائمة تضع ترقيم تلقائي للبيانات واخري وقائمة غير مرتبة<ul> وهذه قائمة نقطية تضيف نقاط تلقائيا للبيانات مثال لذلك

قائمة مرتبة
<ol>
<il>طماطم</li>
<il>تفاح </li>
<il>عنب </li>
</ol>

النتيجة

1. طماطم
2. تفاح
3. عنب

قائمة غير مرتبة نقطية
<ul>
<il>طماطم</li>
<il>تفاح </li>
<il>عنب </li>
</ul>

النتيجة

• طماطم
• تفاح
• عنب

عناصر الجدول<table>

وهو عنصر يستخدم لعمل جدول للبيانات هناك عناصر مصاحبة لعنصر الجدول تستخدم لاضافة صفوف واعمدة مثل العناصر الاتية
<td>و<tr>و<th>و<tbody> وتكون هذه العناصر داخل عنصر الجدول.

كيفية كتابة العناصر المرئية داخل صفحة

يجب ان تكون داخل العنصر <body>هكذا

<body> هنا </body>

مثال:-
اذا كانت لدينا هذه العناصر

عنوان جانبي
<h3>العناصر المرئية</h3>

عنصر فقرة نصية <p>هي عناصر تظهر للمستخدم. </p>

سيكون الامر هكذا داخل صفحة الويب

<!DOCTYPE html>
<html>
<head></head>

<body>
<h3>العناصر المرئية</h3>
<p> .هي عناصر تظهر للمستخدم</p>
</body>

</html>

ستظهر هكذا في الصفحة

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

هي عناصر تظهر للمستخدم.

ويمكن عمل ذلك تطبيق ذلك عمليا في محرر html <!DOCTYPE html> <html> <head></head> <body> <h3>العناصر المرئية</h3> <p>.هي عناصر تظهر للمستخدم</p> </body> </html>

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

ماهي عناصر البينات الوصفية(Metadata Elements) ؟ هي العناصر التي تُقدِّم وصفًا ومعلومات عن مستند HTML للمتصفحات، ومحركات البحث، وأنظمة أخرى. هذه البيانات لا يراها المستخدم ولا تظهر له ضمن محتوى الصفحة، بل هي معلومات هامة توضح لـ (المتصفحات أو محركات البحث) الطريقة التي يجب أن تتبعها للتعامل مع المستند، يجب وضع جميع هذه البيانات الوصفية داخل عنصر <head>، وهو القسم المخصص لهذا الغرض في مستند (HTML).
اهم هذه العناصر هو عنصر عنوان الصفحة <title> يصف عنوان المستند وعنصر ميتا <meta> الذي يستخدم لوصف بيانات عديدة تتحكم فيها سمات داخل هذ العنصر لتحديد البيانات الوصفية ومن العناصر الوصفية العنصر <link> وهو عنصر ربط يستخدم لربط بيانات خارجية بالصفحة فيما يلي شرح لجميع عناصر البيانات الوصفية في مستند(html):

أنواع عناصر البيانات الوصفية

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

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

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

يجب ان يكون هذا العنصر داخل عنصر الرأس بين وسم البداية ووسم النهاية للعنصر الرأس <head>انظر للمثال ادناه :

<!DOCTYPE html>
<html>

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

<body></body>

</html>

عنصر ميتا <meta>

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

استخدام السمة charsetلتحديد ترميز الاحرف

<meta charset="UTF-8"/>

استخدام السمة content لتحديد تجاوب الصفحة مع الشاشات المختلفة

<meta name='viewport' content='width=device-width, initial-scale=1.0' />

العنصر <link>

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

• رابط صورة ايقونة الصفحةfavicon
• ربط ملف (css) خارجي
• ربط canonical urlلاختيار عنوان الصفحة الاساسي الذي يجب تتم فهرسته من قبل محركات البحث.
• التحميل المسبق للموارد الخارجية rel="preload"
• وهناك استخدامات أخري لهذا العنصر ستتعرف عليها لاحقا

العنصر <style>

وهو عنصر يستخدم لكتابة خصائص لغة (css)هذه الخصائص هي بيانات وصفية تحدد طريقة عرض العناصر في الصفحة من حيث الشكل العام والمظهر مثال :

<style>
.main{background-color:#222;text-align:center;}
body{margin:0;padding:10px;}
</style>

العنصر <script>

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

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

<script src="رابط الملف الخارجي"/>

العنصر <base>

هو عنصر يستخدم العنوان الاساسي لجميع الروابط النسبية في الصفحة مثل روابط الصفحات الفرعية وروابط الصور والملفات وجافا سكريبت وغيرها، وهو عنصر يستخدم مرة واحدة فقط داخل مستند (html) مثال:

<base href="mydomin.net"/>

ملاحظة

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

تطبيق عملي لوضع عناصر البيانات الوصفية داخل ملف (html)

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

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

<link href="رابط صورة ايقونة الصفحة"/>

<meta charset="UTF-8"/>

<meta content="mon, tree, gomy" name="description"/>

<style>
body{
background-color:#115454;
color:red
}
</style>

<script src="مسار الملف الخارجي "/>

جميع العناصر اعلاه يجب ان تكون داخل عنصر الرأس

<head>هنا</head>

<!DOCTYPE html>
<html>

<head>
<title>عنوان لصفحة ويب </title>
<link href="رابط صورة ايقونة الصفحة"/>
<meta charset="UTF-8"/>
<meta content="mon, tree, gomy" name="description"/>
<style>
body{
background-color:#115454;
color:red;
}
</style>
<script src="مسار الملف الخارجي "/>
</head>



<body>...</body>

</html>

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

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

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

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

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

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

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

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

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

عنصر الجذر في لغة (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>....</script>

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

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

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

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

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

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

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

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

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

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