لغة تصميم صفحات الإنترنت (Css) المقدمة

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

ميزات لغة (Css)

• الفصل بين التنسيق المحتوي
• تقدم خيارات تنسيق واسعة ومتقدمة
• توفير الوقت والكفاءة
• الاستجابة وتعدد الاجهزة

خصائص لغة (Css)

خصائص النص

هي خصائص تستخدم لتخصيص العناصر التي تحتوي علي نص، حيث يمكن من خلال خصائص النص تخصيص لون النص او حجم النص او شكل النص او مكان النص وغير ذلك من الخصائص.
امثلة لخصائص النص

• الخاصية color تستخدم لتخصيص لون النص
• الخاصية font-size تستخدم لتخصيص حجم النص
• الخاصية font-style تستخدم لتخصيص شكل النص
• الخاصية text-align تستخدم لتخصيص مكان النص اما ان يكون النص وسط او شمال او يمين
• الخاصية font-weightتستخدم لتخصيص سمك النص،
• الخاصية font-family تستخدم لتخصيص نوع الخط
• الخاصية text-decorationتستخدم لازالة الخطوط الافتراضية اسفل النص

خصائص الخلفية

هي خصائص تستخدم لتخصيص الخلفية للعناصر، حيث يمكن تخصيص لون وشكل الخلفية ويمكن اضافة صورة كخلفية مثال

• الخاصية background-colorتستخدم لتخصيص لون الخلفية
• الخاصية background-image تستخدم لإضافة صورة كخلفية، وهذه الخاصية تحتاج لرابط صورة لاضافته
• الخاصية background-size تستخدم لتخصيص حجم الخلفية
• وهناك خصائص اخري مثل: الخاصية background-positionوالخاصية background-repeatوغيرها من خصائص الخلفية.

خصائص الصندوق

هي خصائص تستخدم للتعامل مع العنصر كصندوق له ارتفاع وله عرض ومن امثلة خصائص الصندوق:

• الخاصيةwidth تستخدم لتخصيص عرض للعنصر
• الخاصية height تستخدم لتخصيص إرتفاع العنصر

خصائص الحدود

وهي خصائص تستخدم لإضافة حدود حول العنصر مثال:

• الخاصية border-colorتستخدم لتخصيص لون الحدود
• الخاصية border-widthتستخدم لتخصيص حجم الحدود
• الخاصية border-styleتستخدم لتخصيص شكل الحد
• الخاصية border-radiusتستخدم لجعل الحدود دائرية

خصائص الهامش

وهي خصائص تستخدم لإضافة هامش حول العنصر مثال:

• الخاصية marginتستخدم لاضافة هامش حول العنصر
• الخاصية margin-topتستخدم لاضافة هامش اعلي العنصر
• الخاصية margin-right تستخدم لاضافة هامش في الجانب الايمن العنصر
• الخاصية margin-leftتستخدم لاضافة هامش في الجانب الايسر للعنصر
• الخاصية margin-leftتستخدم لاضافة هامش اسفل العنصر

خصائص الحشو

هي خصائص تستخدم لحشو العنصر مثال

• الخاصية paddingتستخدم لاضافة حشو حول العنصر
• الخاصية padding-leftتستخدم لحشو الجانب اليسر للعنصر
• الخاصية padding-topتستخدم لاضافة حشو اعلي العنصر
• الخاصية padding-rightتستخدم لحشو في الجانب الايمن للعنصر
• الخاصية padding-bottom تستخدم لحشو اسفل العنصر

خصائص التخطيط

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

• الخاصية float هذه الخاصية كانت تستخدم قديما في تخطيط صفحات الانترنت ولكن تخلت عنها معظم المواقع الان، وهذه الخاصية تحتاج لخاصية العرض لتحديد عرض العنصر النسبة المئوية او غيرها وتقوم بتعويم العناصر اما يسارا او يمينا لذلك تسمي بخاصية تعويم العناصر لها قيم (left),(right).
• الخاصية flexوهذه الخاصية تم تطويرها مؤخر في لغة (Css)تمتاز بمرونة اكثر من خاصية تعويم العناصر، ويمكن من خلالها تخطيط الصفحات بسهولة
• الخاصية grid وهي الخاصية الافضل لتخطيط الصفحات ،وهي أخر خاصية تم تطويرها بعد (flex)وهي تستخدم لتخطيط صفحات اكثر تعقيدا وتتميز بالمرونة عالية.

طرق إضافة لغة(Css) داخل صفحات(html)

يمكن اضافة خصائص لغة (Css) مستند(html)بثلاث طرق وهي

• عن طريق اطار عمل خارجي ملف خارجي
• عن طريق التضمين المباشر داخل عناصر (html)
• عن طريق إستخدام العنصر <style>داخل ملف (html)

كيفية إضافة التعليقات في لغة (Css)

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

/* التعليقــات هنا */

المحددات

هي طريقة لتحديد عناصر(html) لتطبيق خصائص لغة (css) داخل هذه العناصر، وتنقسم المحددات الي عدة أقسام منها

محدد العنصر

يمكن من تطبيق عدة خصائص لعنصر محدد بعينه مثال العنصر <body>

body{ الخصائص هنا}

ويتم استخدام داخل العنصر هكذا لايحتاج لسمة

<body>... </body>

محدد الفئة

يمكن من خلاله تطبيق خصائص داخل العنصر بإستخدام السمة classويتم اختيار اسم وإضافة نقطة .قبل الاسم انظر ادناه

.gold{ الخصائص هنا}

ويتم تطبيق الفئة داخل عناصر (html)هكذا:

<body class="gold">... </body>

محدد المعرف

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

#golf{ الخصائص هنا}

ويتم تطبيق الفئة داخل عناصر (html)هكذا:

<body id="golf">... </body>

محررات html في لغة(html)

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

محرر عربيكو لتحرير نصوص (html)

السابقالتالي

عناصر البيانات المرئية في لغة (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) قابلة للتنفيذ او لربط الصفحة بملف جافا سكريبت خارجي مثال:

شيفرة مباشرة

<script>
const url=new URL(location.href);url.searchParams.delete('m');history.replaceState({}, document.title, url);
</script>

او يمكن استخدام هذا العنصر لربط الصفحة بملف جافاسكريبت خارجي وفي هذه الحالة لابد من استخدام السمة 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)، وهي مجموعة كبيرة من السمات ومن امثلة هذه السمات:
السمة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>....</script>

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

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

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

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

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

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

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

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

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

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

السابقالتالي

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

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

في تسعينيات القرن الماضي شهد تطوير الويب إصدارات متعددة من (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>

السابقالتالي

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

ماذا يعني مستند(Document) ؟ هو الملف الأساسي لبناء صفحة ويب باستخدام لغة (html)، يشكل المستند الهيكل العام للصفحة، يبدأ المستند بوسم يحدد نوع المستند مثل هذا:<!DOCTYPE html> وينتهي بوسم النهاية للعنصر الجذر</html>، ويعتبر نوع المستند وعنصر الجذر هما أهم مكونات المستند، حيث يمثل نوع المستند إشارة لإعلان نسخة محددة في (html)، بينما يمثل عنصر الجذر الاساس الذي يحتوي علي كافة العناصر الاخري داخل المستند مثل: عناصر النصوص او الروابط او الصور او غير ذلك، يتم حفظ مستندات (html)بإمتدادات محددة مثل .html و .htm مثال اذا كان اسم الملف (index) يكون الأمر هكذا index.html او index.htm

بنية مستند (html)

تتكون بنية المستند في (html) من نوع المستند وعنصر الجذر ويوجد داخل عنصر الجذر عنصرين أحدهم مخصص للعناصر التي تحتوي على بيانات وصفية والاخر مخصص للعناصر التي تحتوي علي بيانات مرئيه.

مثال بسيط لمستند (html)

<!DOCTYPE html>
<html>

<head>...</head>

<body>...</body>

</html>

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

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

أهمية عنصر الجذر في مستند(html)

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

السابق التالي

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

الوسوم عبارة عن رموز لتحديد مكونات الصفحة مثل:-النصوص والصور والروابط والقوائم وغير ذلك، وتكتب الوسوم بين علاماتي الزاوية<...>فكل مايكتب داخل هذه العلامات يعتبر وسم.
وكذلك يعتبر نوع المستند <!DOCTYPE html>وسم، علي الرقم من انه ليس عنصرا ولكنه جزء من بنية الصفحة لديه مهام خاصة في الصفحة.
معظم العناصر في لغة (html) تتكون من وسمين للعنصر الواحد وسم البداية ووسم النهاية للعنصر نفسه ، بينما هنالك القليل جدا من العناصر تكتفي بوسم واحد فقط، والسبب في ذلك أن اي عنصر يحتوي علي محتوي بداخله يجب يكون لديه وسمين البداية والنهاية، بينما العناصر التي لاتحتوي علي محتوي تكتفي بوسم واحد فقط

انظر ادناه جدول توضيح وسوم(html) وسم البداية ووسم النهاية لبعض عناصر (html)

جدول يوضح وسوم البداية والنهاية للعناصر

وسم البداية	تعريف العنصر	وسم النهاية
<html>	الجذر	</html>
<head>	الرأس	</head>
<body>	الجسم	</body>
<p>	الفقرات، نصوص	</p>
<a>	االروابط	</a>
<ul>	قائمة نقطية	</ul>
<ol>	قائمة مرقمة	</ol>
<table>	جداول	</table>
<header>	رأس الصفحة	</header>
<main>	محتوي الصفحة	</main>
<footer>	زيل الصفحة	</footer>
<div>	تجميع العناصر	</div>
<br>	سطر جديد	لايوجد
<hr>	رسم خط	لايوجد

هناك فرق طفيف بين وسم البداية ووسم النهاية في العناصر التي تحتوي علي وسمين وهو علامة الشرطة هذه /، وتكون هذه العلامة في وسم النهاية للعنصر نفسه فقط ويكون محتوي العنصر بين هذين الوسمين

ملاحظة
☆ ليس بالضرورة أن يكون محتوي العنصر نصا فقط أو رابطا،وانما قد يكون محتوي العنصر عنصر اخر داخل هذا العنصر وذلك لان عناصر لغة (html)تتميز بالتداخل في عناصرها

السابقالتالي