Web Design
Ahmad F. Al Musawi
Department of Information Technology
College of Computer Science and Mathematics
University of Thi Qar
Agenda
● Block and inline elements
● DIV
● span
● Class
● id
‫المضمنة‬ ‫العناصر‬


●
.‫جديد‬ ‫سطر‬ ‫في‬ ‫المضمن‬ ‫العنصر‬ ‫يبدأ‬ ‫لا‬


●
.‫فقط‬ ‫الضرورة‬ ‫بقدر‬ ‫ًا‬‫ض‬‫عر‬ ‫المضمن‬ ‫العنصر‬ ‫يأخذ‬


●
<span> ‫العنصر‬ ‫م‬


HTML Block and Inline Elements
●
‫ًا‬‫د‬‫اعتما‬ ، ‫اضية‬ ‫اف‬ ‫عرض‬ ‫قيمة‬ HTML ‫عنصر‬
.‫العنصر‬ ‫نوع‬ ‫ع‬


●
:‫العرض‬ ‫قيم‬ ‫من‬ ‫نوعان‬ ‫هناك‬


○
Block ‫لة‬


○
.inline ‫مضمن‬


‫الكتلة‬ ‫عناصر‬


●
، ‫جديد‬ ‫سطر‬ ‫في‬ ‫ا‬ً ‫دائم‬ ‫الكتلة‬ ‫مستوى‬ ‫عنصر‬ ‫يبدأ‬
(‫)هامش‬ ‫المساحة‬ ‫بعض‬ ‫ا‬ً‫تلقائي‬ ‫المستعرضات‬ ‫وتضيف‬
.‫وبعده‬ ‫العنصر‬ ‫قبل‬


●
‫المتاح‬ ‫الكامل‬ ‫العرض‬ ‫ا‬ً ‫دائم‬ ‫الكتلة‬ ‫مستوى‬ ‫عنصر‬ ‫يشغل‬
.(‫الإمكان‬ ‫بقدر‬ ‫واليمين‬ ‫اليسار‬ ‫إلى‬ ‫)يمتد‬


●
.<div> ‫و‬ <p> :‫ا‬ ‫الكتلة‬ ‫ر‬ ‫عنا‬ ‫من‬ ‫ائعان‬ ‫عنصران‬


○
.HTML ‫ند‬ ‫مس‬ ‫في‬ ‫فقرة‬ <p> ‫العنصر‬ ‫دد‬


○
‫ند‬ ‫مس‬ ‫في‬ ‫ًا‬‫م‬‫قس‬ ‫أو‬ ‫قسمة‬ <div> ‫العنصر‬ ‫دد‬
.HTML


HTML Links - Hyperlinks
The DIV element
●
.‫رى‬ ‫ال‬ HTML ‫ر‬ ‫لعنا‬ ‫ية‬‫او‬ <div> ‫عنصر‬ ‫دم‬ ‫ت‬ ُ ‫ي‬ ‫ما‬ ‫ا‬ً ‫الب‬


●
style, class and ‫ناء‬ ‫بأس‬ ‫بة‬ ‫مط‬ ‫ات‬ ‫ع‬ <div> ‫عنصر‬ ‫توي‬ ‫لا‬
.id


●
‫ل‬ ‫ميم‬ ‫لت‬ <div> ‫عنصر‬ ‫دام‬ ‫است‬ ‫ن‬ ‫يم‬ ، CSS ‫م‬ ‫دام‬ ‫است‬ ‫عند‬
.‫توى‬ ‫ا‬


Span element
●
‫من‬ ‫ء‬ ‫م‬ ‫ل‬ ‫دم‬ ‫ت‬ ُ ‫مضمنة‬ ‫ية‬‫حاو‬ ‫عن‬ ‫عبارة‬ <span> ‫العنصر‬
.‫ند‬ ‫مس‬ ‫من‬ ‫ء‬ ‫أو‬ ‫ن‬


●
style, class and ‫ناء‬ ‫بأس‬ ‫بة‬ ‫مط‬ ‫ات‬ ‫ع‬ <div> ‫عنصر‬ ‫توي‬ ‫لا‬
.id


●
‫ميم‬ ‫لت‬ <span> ‫العنصر‬ ‫دام‬ ‫است‬ ‫ن‬ ‫يم‬ ، CSS ‫م‬ ‫دام‬ ‫است‬ ‫عند‬
‫الن‬ ‫من‬ ‫اء‬ ‫أ‬


HTML class Attribute
●
‫ديد‬ ‫لت‬ HTML ‫ة‬ ‫ف‬ ‫ة‬ ‫دم‬ ‫ت‬ ُ
.HTML ‫لعنصر‬ ‫ة‬ ‫ف‬


●
‫المتعددة‬ HTML ‫ر‬ ‫لعنا‬ ‫ن‬ ‫يم‬
.‫ة‬ ‫ال‬ ‫ن‬ ‫في‬ ‫ك‬ ‫ش‬ ‫أن‬


●
‫ارة‬ ‫ة‬ ‫ال‬ ‫ة‬ ‫دم‬ ‫ت‬ ُ ‫ما‬ ‫ا‬ً ‫الب‬
‫ن‬ ‫يم‬ .‫ماط‬ ‫أ‬ ‫ورقة‬ ‫في‬ ‫ة‬ ‫ف‬ ‫اسم‬ ‫إلى‬
‫بواسطة‬ ‫دام‬ ‫است‬ ‫ًا‬‫ض‬‫أي‬
‫ر‬ ‫العنا‬ ‫إلى‬ ‫ول‬ ‫ل‬ JavaScript
‫ة‬ ‫ال‬ ‫اسم‬ ‫دام‬ ‫باست‬ ‫ا‬ ‫ومعا‬
.‫دد‬ ‫ا‬


●
‫ر‬ ‫عنا‬ ‫ة‬ ‫ا‬ ‫ي‬ ‫التالي‬ ‫ال‬ ‫الم‬ ‫في‬
‫بقيمة‬ class ‫ة‬ ‫م‬ <div>
‫ر‬ ‫عنا‬ ‫ي‬ ‫ميم‬ ‫ت‬ ‫م‬ ‫سي‬ ."city"
‫ًا‬‫ق‬‫وف‬ ‫ساوي‬ ‫بال‬ ‫ة‬ ‫ال‬ <div>
‫م‬ ‫ق‬ ‫في‬ ‫ة‬ ‫المدي‬ ‫مط‬ ‫يف‬‫لتعر‬
‫أس‬ ‫ا‬


HTML class Attribute
‫عنصر‬ ‫أي‬ ‫في‬ class ‫ة‬ ‫دام‬ ‫است‬ ‫ن‬ ‫يم‬ :‫ة‬ ‫ي‬ ‫ن‬
‫ة‬‫ا‬ ‫ساس‬ ‫ة‬ ‫ال‬ ‫اسم‬ :‫ة‬ ‫م‬ .HTML
!‫حرف‬ ‫ال‬




●
‫باسم‬ ‫ا‬ً‫متبوع‬ ، (.) ‫نقطة‬ ‫حرف‬ ‫اكتب‬ ‫؛‬class ‫شاء‬ ‫لإ‬
.‫ة‬ ‫ف‬


●
‫قواس‬ ‫ال‬ ‫داخل‬ CSS ‫ائ‬ ‫حدد‬ ، ‫ذ‬ ‫بعد‬
{} ‫المتعرجة‬


●
‫اﻟﻔﺋﺔ‬ ‫ﻧﻔس‬ ‫ﻓﻲ‬ ‫اﻟﻣﺧﺗﻠﻔﺔ‬ ‫اﻟﻌﻧﺎﺻر‬ ‫ﺗﺷﺗرك‬ ‫أن‬ ‫ﯾﻣﻛن‬
○
<p> ‫و‬ <h2> ‫ﻣن‬ ‫ﻛل‬ ‫ﯾﺷﯾر‬ ، ‫اﻟﺗﺎﻟﻲ‬ ‫اﻟﻣﺛﺎل‬ ‫ﻓﻲ‬
‫اﻟﻧﻣط‬ ‫ﻧﻔس‬ ‫ﻓﻲ‬ ‫وﺳﯾﺷﺗرﻛﺎن‬ "‫"اﻟﻣدﯾﻧﺔ‬ ‫ﻓﺋﺔ‬ ‫إﻟﻰ‬
HTML class Attribute
HTML id Attribute
●
‫لعنصر‬ ‫فريد‬ ‫معرف‬ ‫ديد‬ ‫لت‬ HTML ‫معرف‬ ‫ة‬ ‫دام‬ ‫است‬ ‫م‬ ‫ي‬
‫واحد‬ ‫عنصر‬ ‫من‬ ‫أك‬ ‫ي‬ ‫ون‬ ‫ي‬ ‫أن‬ ‫ن‬ ‫يم‬ ‫لا‬ .HTML
.HTML ‫ند‬ ‫مس‬ ‫في‬ ‫المعرف‬


●
‫أن‬ ‫جب‬ .HTML ‫لعنصر‬ ‫ًا‬‫د‬‫فري‬ ‫ا‬ً ‫معرف‬ ‫المعرف‬ ‫ة‬ ‫تدد‬
.HTML ‫ند‬ ‫مس‬ ‫داخل‬ ‫فريدة‬ ‫المعرف‬ ‫ة‬ ‫قيمة‬ ‫ون‬ ‫ت‬


●
.‫ماط‬ ‫أ‬ ‫ورقة‬ ‫في‬ ‫معين‬ ‫مط‬ ‫ن‬ ‫إع‬ ‫إلى‬ ‫ارة‬ id ‫ة‬ ‫دم‬ ‫ت‬ ُ
‫العنصر‬ ‫إلى‬ ‫ول‬ ‫ل‬ JavaScript ‫بواسطة‬ ‫ًا‬‫ض‬‫أي‬ ‫دام‬ ‫است‬ ‫م‬ ‫ي‬
.‫دد‬ ‫ا‬ ‫بالمعرف‬ ‫ت‬ ‫ومعا‬


●
:ID ‫المعرف‬ ‫اء‬ ‫يقة‬‫ر‬


○
.‫معرف‬ ‫باسم‬ ‫ا‬ً‫متبوع‬ ، (#) ‫جزئة‬‫ت‬ ‫حرف‬ ‫اكتب‬


○
‫قواس‬ ‫ال‬ ‫داخل‬ CSS ‫ائ‬ ‫حدد‬ ، ‫ذ‬ ‫بعد‬
.{} ‫المتعرجة‬


●
‫المعرف‬ ‫اسم‬ ‫إلى‬ ‫يش‬ <h1> ‫عنصر‬ ‫ا‬ ‫ي‬ ‫التالي‬ ‫ال‬ ‫الم‬ ‫في‬
‫يف‬‫لتعر‬ ‫ًا‬‫ق‬‫وف‬ ‫هذا‬ <h1> ‫عنصر‬ ‫ميم‬ ‫ت‬ ‫م‬ ‫سي‬ ."myHeader"
‫أس‬ ‫ا‬ ‫م‬ ‫ق‬ ‫في‬ myHeader# ‫مط‬


●
‫ينما‬ ، HTML ‫ر‬ ‫عنا‬ ‫عدة‬ ‫بواسطة‬ class ‫دام‬ ‫است‬ ‫ن‬ ‫يم‬
‫واحد‬ HTML ‫عنصر‬ ‫بواسطة‬ ID ‫معرف‬ ‫اسم‬ ‫دام‬ ‫است‬ ‫جب‬
‫ة‬ ‫ال‬ ‫داخل‬ ‫فقط‬


Questions?

Web Design, lecture 4.pdf

  • 1.
    Web Design Ahmad F.Al Musawi Department of Information Technology College of Computer Science and Mathematics University of Thi Qar
  • 2.
    Agenda ● Block andinline 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.
  • 10.
    HTML id Attribute ● ‫لعنصر‬‫فريد‬ ‫معرف‬ ‫ديد‬ ‫لت‬ HTML ‫معرف‬ ‫ة‬ ‫دام‬ ‫است‬ ‫م‬ ‫ي‬ ‫واحد‬ ‫عنصر‬ ‫من‬ ‫أك‬ ‫ي‬ ‫ون‬ ‫ي‬ ‫أن‬ ‫ن‬ ‫يم‬ ‫لا‬ .HTML .HTML ‫ند‬ ‫مس‬ ‫في‬ ‫المعرف‬ 
 ● ‫أن‬ ‫جب‬ .HTML ‫لعنصر‬ ‫ًا‬‫د‬‫فري‬ ‫ا‬ً ‫معرف‬ ‫المعرف‬ ‫ة‬ ‫تدد‬ .HTML ‫ند‬ ‫مس‬ ‫داخل‬ ‫فريدة‬ ‫المعرف‬ ‫ة‬ ‫قيمة‬ ‫ون‬ ‫ت‬ 
 ● .‫ماط‬ ‫أ‬ ‫ورقة‬ ‫في‬ ‫معين‬ ‫مط‬ ‫ن‬ ‫إع‬ ‫إلى‬ ‫ارة‬ id ‫ة‬ ‫دم‬ ‫ت‬ ُ ‫العنصر‬ ‫إلى‬ ‫ول‬ ‫ل‬ JavaScript ‫بواسطة‬ ‫ًا‬‫ض‬‫أي‬ ‫دام‬ ‫است‬ ‫م‬ ‫ي‬ .‫دد‬ ‫ا‬ ‫بالمعرف‬ ‫ت‬ ‫ومعا‬ 
 ● :ID ‫المعرف‬ ‫اء‬ ‫يقة‬‫ر‬ 
 ○ .‫معرف‬ ‫باسم‬ ‫ا‬ً‫متبوع‬ ، (#) ‫جزئة‬‫ت‬ ‫حرف‬ ‫اكتب‬ 
 ○ ‫قواس‬ ‫ال‬ ‫داخل‬ CSS ‫ائ‬ ‫حدد‬ ، ‫ذ‬ ‫بعد‬ .{} ‫المتعرجة‬ 
 ● ‫المعرف‬ ‫اسم‬ ‫إلى‬ ‫يش‬ <h1> ‫عنصر‬ ‫ا‬ ‫ي‬ ‫التالي‬ ‫ال‬ ‫الم‬ ‫في‬ ‫يف‬‫لتعر‬ ‫ًا‬‫ق‬‫وف‬ ‫هذا‬ <h1> ‫عنصر‬ ‫ميم‬ ‫ت‬ ‫م‬ ‫سي‬ ."myHeader" ‫أس‬ ‫ا‬ ‫م‬ ‫ق‬ ‫في‬ myHeader# ‫مط‬ 
 ● ‫ينما‬ ، HTML ‫ر‬ ‫عنا‬ ‫عدة‬ ‫بواسطة‬ class ‫دام‬ ‫است‬ ‫ن‬ ‫يم‬ ‫واحد‬ HTML ‫عنصر‬ ‫بواسطة‬ ID ‫معرف‬ ‫اسم‬ ‫دام‬ ‫است‬ ‫جب‬ ‫ة‬ ‫ال‬ ‫داخل‬ ‫فقط‬ 

  • 11.