التعريف بعلامة div في HTML : ما هي علامة div في HTML وكيفية استخدامها؟
تعد علامة <div> في HTML ، حاوية للعناصر. وهي تشكل جميع العناصر الموجودة داخل علامات HTML والمحدودة بين <div> و </div> . وهي بذلك تشكل قسماً يُمَكِّنُنا من تطبيق تنسيق محدد عليه . لكن لا يتم هذا التنسيق إلا باستخدام رموز وأكواد CSS.
باستخدام CSS مع علامة HTML التي هي div سنتمكن من تنسيق المحتوى المحصور بين علامتي div بشكل منهجي جميل ومنظم. وبالتالي ، فإن عناصر المحتوى ستسهل علينا تنظيم صفحة الويب بكاملها .
تحديد علامة div في HTML
ربما أنك لم تستوعب التعريف ! لا تيأس ! سأشرح لك بالتفصيل استخدامات علامة <div> في HTML وحتماً ستحبها .. بل وتستعملها كثيراً أثناء تحريرك لأي محتوى. سواء في محرر html بووردبريس أو في صفحات ويب مبرمجة بشكل شخصي .
سأدرج عدة أمثلة خلال هذا الدرس حتى نصل إلى الفهم الجيد للاستخدامات الجيدة للعلامة div .
ما هي علامة div في HTML وكيفية استخدامها؟
هذا مثال لإدراج علامة <div> و </div> : 
|
1 2 3 4 |
<div> <p>هنا يمكنك إدراج أي نوع من المحتوى ليكون مؤطراً بعلامة div ويمكنك أن تجعل لها حدوداً بأشكال مختلفة .بل يمكنك أن تجعل لها خلفيات مختلفة بالألوان أو بالصور .</p> </div> |
إذا كتبنا هذه الفقرة 
محددة ب علامتين <div> و </div> ، فإننا لن نلاحط أي جديد على مستوى تنسيق هذه الفقرة .. لاحظ أدنا النتيجة لنفس الفقرة والمبينة باللون الأحمر :
حقيقةً أن علامة div ليس له “معنى” يجعله عنصراً يتعارض مع دور HTML الذي يهدف تحديداً إلى إعطاء معنى للمحتوى.
إدخال سمة style إلى div
كيف سيصبح المثال بعد أن أضفنا إليه بعضاً من أكواد CSS . وهي :
|
1 2 3 |
<div style="border: solid 1px #00FF00;"> <p>هنا يمكنك إدراج أي نوع من المحتوى ليكون مؤطراً بعلامة div ويمكنك أن تجعل لها حدوداً بأشكال مختلفة .بل يمكنك أن تجعل لها خلفيات مختلفة بالألوان أو بالصور</p> </div> |
بعد أن أضفنا أكواد CSS المتمثلة في الحدود (border ) ولون الحدود ( #00FF00 ) ومقاسه ( 1px ) ، أصبحت النتيجة كما هذه :
من الناحية العملية ، نستخدم في الغالب علامة div لأغراض التنسيق بواسطة CSS.
يجب أن تعلم أن عنصر div لا يحتوي على أي سمة معينة يختص بها. بل يعمل على دعم السمات العامة مثل جميع عناصر HTML.
للتذكير : السمات العامة هي سمات يمكن إضافتها إلى جميع عناصر HTML. بعض الأمثلة على السمات العامة الشائعة: class ، id ، lang ، style ، title … هذه السمات ستكتشف بعضها أو جلها خلال اطلاعك على مقالات قسم دروس CSS
حتى وإن لم تهتم بما سبق فالأمثلة ستوضح لك الأمر بجلاء..
≡ أمثلة على استخدام div
إفتح أي محرر النصـوص البرمجية مثل برنـامج ++Notepad ، ثم قم باستخدام عنصر div لتصميم مجموعة من العناصر التي تعمل كإطار مقدمة للصفحة كما في المثال أدناه :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>استخدام عنصر div في html</title> </head> <body> <h1>استخدام عنصر div في html</h1> <div class="intro"> <p>عنصرdiv في HTML يتم استخدامه في الغالب لأغراض تنسيق CSS ، وذلك لتصميم مجموعة من العناصر..</p> <p><strong>وعنصر div نستخدمه فقط عندما لا يكون هناك أي عنصر HTML دلالي آخر منطقي</strong> لأن دور HTML هو إعطاء المعنى بدقة ..</p> </div> <h2>بناء جملة داخل عنصر div</h2> <p>يمكن أن تكتب هنا الكثير من الكلام الذي يصب في محتوى الصفجة : جمل و فقرات </p> <h2>استخدام علامة div</h2> <p>يمكن أن تكتب هنا الكثير من الكلام الذي يصب في محتوى الصفجة : جمل و فقرات</p> </body> </html> |
ستحصل بالضبط على هذه النتيجة المحصورة بين الخطين الفاصلين:
استخدام عنصر div في html
وعنصر div نستخدمه فقط عندما لا يكون هناك أي عنصر HTML دلالي آخر منطقي لأن دور HTML هو إعطاء المعنى بدقة ..
بناء جملة داخل عنصر div
يمكن أن تكتب هنا الكثير من الكلام الذي يصب في محتوى الصفجة : جمل و فقرات
استخدام علامة div
يمكن أن تكتب هنا الكثير من الكلام الذي يصب في محتوى الصفجة : جمل و فقرات
استعمالات div في HTML
لاحظ كيف ستصبح الكتابة الحمراء المؤطرة بين <div> و </div> حين نسلط عليها أكواد CSS .. تابع معي :
أمثلة:
كود CSS في div سيغير شكل تنسيق القسم الذي ظهر بالأحمر أعلاه .. بحيث أضفت إليه خلفية بلون ( #2C3338 ) مع قيمة padding وكذا قيمة border-radius .
|
1 |
<div class="intro" style="background-color: #2c3338; padding: 10px; border-radius: 20px;"> |
النتيجة :⇓
وعنصر div نستخدمه فقط عندما لا يكون هناك أي عنصر HTML دلالي آخر منطقي لأن دور HTML هو إعطاء المعنى بدقة
ما هي علامة div في HTML وكيفية استخدامها؟
كود CSS في div سيغير شكل تنسيق القسم الذي ظهر بالأحمر أعلاه .. بحيث أضفت إليه خلفية بألوان التدرج مع قيمة padding وكذا قيمة border-radius .
|
1 |
<div class="intro" style="background: linear-gradient(to right,#ffbe02a1 0px,#fd606aba 100%); padding: 10px; border-radius: 10px;"> |
النتيجة : ↓
وعنصر div نستخدمه فقط عندما لا يكون هناك أي عنصر HTML دلالي آخر منطقي لأن دور HTML هو إعطاء المعنى بدقة
في هذا المثال تم فقط تغيير اللألوان ونسبة التدرج:
|
1 |
<div class="intro" style="background: linear-gradient(to right,#0000FF 0px,#80FF80 50%); padding: 10px; border-radius: 10px;"> |
النتيجة : ↓
وعنصر div نستخدمه فقط عندما لا يكون هناك أي عنصر HTML دلالي آخر منطقي لأن دور HTML هو إعطاء المعنى بدقة
هنا قمت بتغيير قيم الحدود الدائرية border-radius كما يمكنك تغيير قيم خاصية padding لاكتشاف الفرق بين نتائج عناصر DIV .
|
1 |
<div class="intro" style="background: linear-gradient(to right,#0000FF 0px,#80FF80 50%); padding: 10px; border-radius: 50px 0px 50px 50px;"> |
النتيجة : ↓
وعنصر div نستخدمه فقط عندما لا يكون هناك أي عنصر HTML دلالي آخر منطقي لأن دور HTML هو إعطاء المعنى بدقة .
إقرأ أيضاً:
استعمال الصور في خلفية الاطار داخل النص
تغيير خلفية الاطار بصورة بدل الألوان مع إضافة حدود بقيمة 1px :
|
1 |
<div class="intro" style="background-image: url('https://www.your-site.com/image.jpg'); border: solid 1px #4796B3; padding: 10px; border-radius: 10px; "> |
النتيجة : ↓
وعنصر div نستخدمه فقط عندما لا يكون هناك أي عنصر HTML دلالي آخر منطقي لأن دور HTML هو إعطاء المعنى بدقة
ما هي علامة div في HTML وكيفية استخدامها؟
كما يمكننا إضافة عناصر أخرى من المحتوى داخل صفحات الويب باستخدام علامة div التي تستخدمها لغة html كحاوية لتنسيق عناصر المحتوى .
سأكتفي بالأمثلة السابقة التي ربما فتحت لكم الشهية للبحث أكثر فيما قد تستفيدونها من علامة div في HTML والتي تسمح لنا بإضافة سمات وأكود CSS لتنسيق المحتوى كالإطارات ولون الخلفية و معرض الصور و إنشاء الجداول وتسيقها بخلفياتها .
| فرح | هبة | هند | يس | آلاء | أنس | فجر |
| 17.03 | 17.01 | 16.96 | 15.75 | 13.20 | 11.33 | 11.15 |
إكتشف أشياء كثيرة في قسم HTML و CSS.
في أمان الله
قناتي على اليوتوب أرى أن هذه المواضيع قد تهمك: |
إذا أعجبك هذا المحتوى، فلا تَقْرَأْ وتَرْحَل … تَـعْلِيقَـاتُكَ تَـشْجِيعٌ لَـنَـا لِنَسْتَمِرَّ فِــي الْبَحْثِ وَالْعَطَـاء. وإِذَا كنت تعتقد أنه قد يكون مفيداً لأشخاص آخرين، فشَارِكْهَ على الشبكات الاجتماعية.