تستعرض الوثيقة عناصر التصميم على الويب مثل العناصر الكتلية والمضمنة، إلى جانب استخدام عناصر <div> و<span> والعناصر المرتبطة بها في HTML. كما تناقش الوثيقة الخصائص مثل class وid لتنسيق وتصنيف العناصر. تشمل المعلومات أيضًا كيفية ارتباط تلك العناصر باستخدام CSS وجافا سكريبت لتحقيق تنسيق فعال.

1. Web Design
Ahmad F. Al Musawi
Department of Information Technology
College of Computer Science and Mathematics
University of Thi Qar

2. Agenda
● Block and inline elements
● DIV
● span
● Class
● id

3. ‫المضمنة‬ ‫العناصر‬
●
.‫جديد‬ ‫سطر‬ ‫في‬ ‫المضمن‬ ‫العنصر‬ ‫يبدأ‬ ‫لا‬
●
.‫فقط‬ ‫الضرورة‬ ‫بقدر‬ ‫ًا‬‫ض‬‫عر‬ ‫المضمن‬ ‫العنصر‬ ‫يأخذ‬
●
<span> ‫العنصر‬ ‫م‬
HTML Block and Inline Elements
●
‫ًا‬‫د‬‫اعتما‬ ، ‫اضية‬ ‫اف‬ ‫عرض‬ ‫قيمة‬ HTML ‫عنصر‬
.‫العنصر‬ ‫نوع‬ ‫ع‬
●
:‫العرض‬ ‫قيم‬ ‫من‬ ‫نوعان‬ ‫هناك‬
○
Block ‫لة‬
○
.inline ‫مضمن‬
‫الكتلة‬ ‫عناصر‬
●
، ‫جديد‬ ‫سطر‬ ‫في‬ ‫ا‬ً ‫دائم‬ ‫الكتلة‬ ‫مستوى‬ ‫عنصر‬ ‫يبدأ‬
(‫)هامش‬ ‫المساحة‬ ‫بعض‬ ‫ا‬ً‫تلقائي‬ ‫المستعرضات‬ ‫وتضيف‬
.‫وبعده‬ ‫العنصر‬ ‫قبل‬
●
‫المتاح‬ ‫الكامل‬ ‫العرض‬ ‫ا‬ً ‫دائم‬ ‫الكتلة‬ ‫مستوى‬ ‫عنصر‬ ‫يشغل‬
.(‫الإمكان‬ ‫بقدر‬ ‫واليمين‬ ‫اليسار‬ ‫إلى‬ ‫)يمتد‬
●
.<div> ‫و‬ <p> :‫ا‬ ‫الكتلة‬ ‫ر‬ ‫عنا‬ ‫من‬ ‫ائعان‬ ‫عنصران‬
○
.HTML ‫ند‬ ‫مس‬ ‫في‬ ‫فقرة‬ <p> ‫العنصر‬ ‫دد‬
○
‫ند‬ ‫مس‬ ‫في‬ ‫ًا‬‫م‬‫قس‬ ‫أو‬ ‫قسمة‬ <div> ‫العنصر‬ ‫دد‬
.HTML

4. HTML Links - Hyperlinks

5. The DIV element
●
.‫رى‬ ‫ال‬ HTML ‫ر‬ ‫لعنا‬ ‫ية‬‫او‬ <div> ‫عنصر‬ ‫دم‬ ‫ت‬ ُ ‫ي‬ ‫ما‬ ‫ا‬ً ‫الب‬
●
style, class and ‫ناء‬ ‫بأس‬ ‫بة‬ ‫مط‬ ‫ات‬ ‫ع‬ <div> ‫عنصر‬ ‫توي‬ ‫لا‬
.id
●
‫ل‬ ‫ميم‬ ‫لت‬ <div> ‫عنصر‬ ‫دام‬ ‫است‬ ‫ن‬ ‫يم‬ ، CSS ‫م‬ ‫دام‬ ‫است‬ ‫عند‬
.‫توى‬ ‫ا‬

6. Span element
●
‫من‬ ‫ء‬ ‫م‬ ‫ل‬ ‫دم‬ ‫ت‬ ُ ‫مضمنة‬ ‫ية‬‫حاو‬ ‫عن‬ ‫عبارة‬ <span> ‫العنصر‬
.‫ند‬ ‫مس‬ ‫من‬ ‫ء‬ ‫أو‬ ‫ن‬
●
style, class and ‫ناء‬ ‫بأس‬ ‫بة‬ ‫مط‬ ‫ات‬ ‫ع‬ <div> ‫عنصر‬ ‫توي‬ ‫لا‬
.id
●
‫ميم‬ ‫لت‬ <span> ‫العنصر‬ ‫دام‬ ‫است‬ ‫ن‬ ‫يم‬ ، CSS ‫م‬ ‫دام‬ ‫است‬ ‫عند‬
‫الن‬ ‫من‬ ‫اء‬ ‫أ‬

7. HTML class Attribute
●
‫ديد‬ ‫لت‬ HTML ‫ة‬ ‫ف‬ ‫ة‬ ‫دم‬ ‫ت‬ ُ
.HTML ‫لعنصر‬ ‫ة‬ ‫ف‬
●
‫المتعددة‬ HTML ‫ر‬ ‫لعنا‬ ‫ن‬ ‫يم‬
.‫ة‬ ‫ال‬ ‫ن‬ ‫في‬ ‫ك‬ ‫ش‬ ‫أن‬
●
‫ارة‬ ‫ة‬ ‫ال‬ ‫ة‬ ‫دم‬ ‫ت‬ ُ ‫ما‬ ‫ا‬ً ‫الب‬
‫ن‬ ‫يم‬ .‫ماط‬ ‫أ‬ ‫ورقة‬ ‫في‬ ‫ة‬ ‫ف‬ ‫اسم‬ ‫إلى‬
‫بواسطة‬ ‫دام‬ ‫است‬ ‫ًا‬‫ض‬‫أي‬
‫ر‬ ‫العنا‬ ‫إلى‬ ‫ول‬ ‫ل‬ JavaScript
‫ة‬ ‫ال‬ ‫اسم‬ ‫دام‬ ‫باست‬ ‫ا‬ ‫ومعا‬
.‫دد‬ ‫ا‬
●
‫ر‬ ‫عنا‬ ‫ة‬ ‫ا‬ ‫ي‬ ‫التالي‬ ‫ال‬ ‫الم‬ ‫في‬
‫بقيمة‬ class ‫ة‬ ‫م‬ <div>
‫ر‬ ‫عنا‬ ‫ي‬ ‫ميم‬ ‫ت‬ ‫م‬ ‫سي‬ ."city"
‫ًا‬‫ق‬‫وف‬ ‫ساوي‬ ‫بال‬ ‫ة‬ ‫ال‬ <div>
‫م‬ ‫ق‬ ‫في‬ ‫ة‬ ‫المدي‬ ‫مط‬ ‫يف‬‫لتعر‬
‫أس‬ ‫ا‬

8. HTML class Attribute
‫عنصر‬ ‫أي‬ ‫في‬ class ‫ة‬ ‫دام‬ ‫است‬ ‫ن‬ ‫يم‬ :‫ة‬ ‫ي‬ ‫ن‬
‫ة‬‫ا‬ ‫ساس‬ ‫ة‬ ‫ال‬ ‫اسم‬ :‫ة‬ ‫م‬ .HTML
!‫حرف‬ ‫ال‬
●
‫باسم‬ ‫ا‬ً‫متبوع‬ ، (.) ‫نقطة‬ ‫حرف‬ ‫اكتب‬ ‫؛‬class ‫شاء‬ ‫لإ‬
.‫ة‬ ‫ف‬
●
‫قواس‬ ‫ال‬ ‫داخل‬ CSS ‫ائ‬ ‫حدد‬ ، ‫ذ‬ ‫بعد‬
{} ‫المتعرجة‬
●
‫اﻟﻔﺋﺔ‬ ‫ﻧﻔس‬ ‫ﻓﻲ‬ ‫اﻟﻣﺧﺗﻠﻔﺔ‬ ‫اﻟﻌﻧﺎﺻر‬ ‫ﺗﺷﺗرك‬ ‫أن‬ ‫ﯾﻣﻛن‬
○
<p> ‫و‬ <h2> ‫ﻣن‬ ‫ﻛل‬ ‫ﯾﺷﯾر‬ ، ‫اﻟﺗﺎﻟﻲ‬ ‫اﻟﻣﺛﺎل‬ ‫ﻓﻲ‬
‫اﻟﻧﻣط‬ ‫ﻧﻔس‬ ‫ﻓﻲ‬ ‫وﺳﯾﺷﺗرﻛﺎن‬ "‫"اﻟﻣدﯾﻧﺔ‬ ‫ﻓﺋﺔ‬ ‫إﻟﻰ‬

9. HTML class Attribute

10. HTML id Attribute
●
‫لعنصر‬ ‫فريد‬ ‫معرف‬ ‫ديد‬ ‫لت‬ HTML ‫معرف‬ ‫ة‬ ‫دام‬ ‫است‬ ‫م‬ ‫ي‬
‫واحد‬ ‫عنصر‬ ‫من‬ ‫أك‬ ‫ي‬ ‫ون‬ ‫ي‬ ‫أن‬ ‫ن‬ ‫يم‬ ‫لا‬ .HTML
.HTML ‫ند‬ ‫مس‬ ‫في‬ ‫المعرف‬
●
‫أن‬ ‫جب‬ .HTML ‫لعنصر‬ ‫ًا‬‫د‬‫فري‬ ‫ا‬ً ‫معرف‬ ‫المعرف‬ ‫ة‬ ‫تدد‬
.HTML ‫ند‬ ‫مس‬ ‫داخل‬ ‫فريدة‬ ‫المعرف‬ ‫ة‬ ‫قيمة‬ ‫ون‬ ‫ت‬
●
.‫ماط‬ ‫أ‬ ‫ورقة‬ ‫في‬ ‫معين‬ ‫مط‬ ‫ن‬ ‫إع‬ ‫إلى‬ ‫ارة‬ id ‫ة‬ ‫دم‬ ‫ت‬ ُ
‫العنصر‬ ‫إلى‬ ‫ول‬ ‫ل‬ JavaScript ‫بواسطة‬ ‫ًا‬‫ض‬‫أي‬ ‫دام‬ ‫است‬ ‫م‬ ‫ي‬
.‫دد‬ ‫ا‬ ‫بالمعرف‬ ‫ت‬ ‫ومعا‬
●
:ID ‫المعرف‬ ‫اء‬ ‫يقة‬‫ر‬
○
.‫معرف‬ ‫باسم‬ ‫ا‬ً‫متبوع‬ ، (#) ‫جزئة‬‫ت‬ ‫حرف‬ ‫اكتب‬
○
‫قواس‬ ‫ال‬ ‫داخل‬ CSS ‫ائ‬ ‫حدد‬ ، ‫ذ‬ ‫بعد‬
.{} ‫المتعرجة‬
●
‫المعرف‬ ‫اسم‬ ‫إلى‬ ‫يش‬ <h1> ‫عنصر‬ ‫ا‬ ‫ي‬ ‫التالي‬ ‫ال‬ ‫الم‬ ‫في‬
‫يف‬‫لتعر‬ ‫ًا‬‫ق‬‫وف‬ ‫هذا‬ <h1> ‫عنصر‬ ‫ميم‬ ‫ت‬ ‫م‬ ‫سي‬ ."myHeader"
‫أس‬ ‫ا‬ ‫م‬ ‫ق‬ ‫في‬ myHeader# ‫مط‬
●
‫ينما‬ ، HTML ‫ر‬ ‫عنا‬ ‫عدة‬ ‫بواسطة‬ class ‫دام‬ ‫است‬ ‫ن‬ ‫يم‬
‫واحد‬ HTML ‫عنصر‬ ‫بواسطة‬ ID ‫معرف‬ ‫اسم‬ ‫دام‬ ‫است‬ ‫جب‬
‫ة‬ ‫ال‬ ‫داخل‬ ‫فقط‬

11. Questions?