ما هي علامة div في HTML وكيفية استخدامها؟

التعريف بعلامة div في HTML : ما هي علامة div في HTML وكيفية استخدامها؟

تعد علامة <div> في HTML ، حاوية للعناصر. وهي تشكل جميع العناصر الموجودة داخل علامات HTML والمحدودة بين <div> و </div> . وهي بذلك تشكل قسماً يُمَكِّنُنا من تطبيق تنسيق محدد عليه . لكن لا يتم هذا التنسيق إلا باستخدام رموز وأكواد CSS.

div ستسهل عليك الطريق لكتابة مقدمة مقالاتك داخل مثل هذا الإطار . وهناك أشياء جميلة ومثيرة يمكنك إنشاؤها في المحتوى الذي تنشره على الويب بفضل لغة HTML مستخدماً علامة <DIV>

باستخدام CSS مع علامة HTML التي هي div سنتمكن من تنسيق المحتوى المحصور بين علامتي div بشكل منهجي جميل ومنظم. وبالتالي ، فإن عناصر المحتوى ستسهل علينا تنظيم صفحة الويب بكاملها .

فائدة: خلال هذا المقال سأركز على طرح أمثلة بشكل سهل ومبسط لكي لا نضيع في تفاصيل قد لا تزيد من رصيدك إلا الملل .

تحديد علامة div في HTML

ربما أنك لم تستوعب التعريف ! لا تيأس ! سأشرح لك بالتفصيل استخدامات علامة <div> في HTML وحتماً ستحبها .. بل وتستعملها كثيراً أثناء تحريرك لأي محتوى. سواء في محرر html بووردبريس أو في صفحات ويب مبرمجة بشكل شخصي .
سأدرج عدة أمثلة خلال هذا الدرس حتى نصل إلى الفهم الجيد للاستخدامات الجيدة للعلامة div .

ما هي علامة div في HTML وكيفية استخدامها؟

هذا مثال لإدراج علامة <div> و </div> :

<div>
<p>هنا يمكنك إدراج أي نوع من المحتوى ليكون مؤطراً بعلامة div  ويمكنك أن تجعل لها حدوداً بأشكال مختلفة 
.بل يمكنك أن تجعل لها خلفيات مختلفة بالألوان أو بالصور  .</p>
</div>

<div>

<p>هنا يمكنك إدراج أي نوع من المحتوى ليكون مؤطراً بعلامة div ويمكنك أن تجعل لها حدوداً بأشكال مختلفة

.بل يمكنك أن تجعل لها خلفيات مختلفة بالألوان أو بالصور .</p>

</div>

إذا كتبنا هذه الفقرة محددة ب علامتين <div> و </div> ، فإننا لن نلاحط أي جديد على مستوى تنسيق هذه الفقرة .. لاحظ أدنا النتيجة لنفس الفقرة والمبينة باللون الأحمر :

هنا يمكنك إدراج أي نوع من المحتوى ليكون مؤطراً بعلامة div ويمكنك أن تجعل لها حدوداً بأشكال مختلفة .بل يمكنك أن تجعل لها خلفيات مختلفة بالألوان أو بالصور .

حقيقةً أن علامة div ليس له “معنى” يجعله عنصراً يتعارض مع دور HTML الذي يهدف تحديداً إلى إعطاء معنى للمحتوى.

إدخال سمة style إلى div

كيف سيصبح المثال بعد أن أضفنا إليه بعضاً من أكواد CSS . وهي :

<div style="border: solid 1px #00FF00;">
<p>هنا يمكنك إدراج أي نوع من المحتوى ليكون مؤطراً بعلامة div ويمكنك أن تجعل لها حدوداً بأشكال مختلفة .بل يمكنك أن تجعل لها خلفيات مختلفة بالألوان أو بالصور</p>
</div>

<p>هنا يمكنك إدراج أي نوع من المحتوى ليكون مؤطراً بعلامة div ويمكنك أن تجعل لها حدوداً بأشكال مختلفة .بل يمكنك أن تجعل لها خلفيات مختلفة بالألوان أو بالصور</p>

</div>

بعد أن أضفنا أكواد CSS المتمثلة في الحدود (border ) ولون الحدود ( #00FF00 ) ومقاسه ( 1px ) ، أصبحت النتيجة كما هذه :

هنا يمكنك إدراج أي نوع من المحتوى ليكون مؤطراً بعلامة div ويمكنك أن تجعل لها حدوداً بأشكال مختلفة .بل يمكنك أن تجعل لها خلفيات مختلفة بالألوان أو بالصور

من الناحية العملية ، نستخدم في الغالب علامة div لأغراض التنسيق بواسطة CSS.
يجب أن تعلم أن عنصر div لا يحتوي على أي سمة معينة يختص بها. بل يعمل على دعم السمات العامة مثل جميع عناصر HTML.
للتذكير : السمات العامة هي سمات يمكن إضافتها إلى جميع عناصر HTML. بعض الأمثلة على السمات العامة الشائعة: class ، id ، lang ، style ، title … هذه السمات ستكتشف بعضها أو جلها خلال اطلاعك على مقالات قسم دروس CSS
حتى وإن لم تهتم بما سبق فالأمثلة ستوضح لك الأمر بجلاء..
≡ أمثلة على استخدام div
إفتح أي محرر النصـوص البرمجية مثل برنـامج ++Notepad ، ثم قم باستخدام عنصر div لتصميم مجموعة من العناصر التي تعمل كإطار مقدمة للصفحة كما في المثال أدناه :

<!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>

<!DOCTYPE html>

<head>

<title>استخدام عنصر div في html</title>

</head>

<body>

<h1>استخدام عنصر div في html</h1>

<p>عنصرdiv في HTML يتم استخدامه في الغالب لأغراض تنسيق CSS ، وذلك لتصميم مجموعة من العناصر..</p>

<p><strong>وعنصر div نستخدمه فقط عندما لا يكون هناك أي عنصر HTML دلالي آخر منطقي</strong> لأن دور HTML هو إعطاء المعنى بدقة ..</p>

</div>

<p>يمكن أن تكتب هنا الكثير من الكلام الذي يصب في محتوى الصفجة : جمل و فقرات </p>

<h2>استخدام علامة div</h2>

<p>يمكن أن تكتب هنا الكثير من الكلام الذي يصب في محتوى الصفجة : جمل و فقرات</p>

</body>

</html>

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

استخدام عنصر div في html

عنصرdiv في HTML يتم استخدامه في الغالب لأغراض تنسيق CSS ، وذلك لتصميم مجموعة من العناصر..
وعنصر div نستخدمه فقط عندما لا يكون هناك أي عنصر HTML دلالي آخر منطقي لأن دور HTML هو إعطاء المعنى بدقة ..

بناء جملة داخل عنصر div

يمكن أن تكتب هنا الكثير من الكلام الذي يصب في محتوى الصفجة : جمل و فقرات

استخدام علامة div

يمكن أن تكتب هنا الكثير من الكلام الذي يصب في محتوى الصفجة : جمل و فقرات

استعمالات div في HTML

لاحظ كيف ستصبح الكتابة الحمراء المؤطرة بين <div> و </div> حين نسلط عليها أكواد CSS .. تابع معي :
أمثلة:
كود CSS في div سيغير شكل تنسيق القسم الذي ظهر بالأحمر أعلاه .. بحيث أضفت إليه خلفية بلون ( #2C3338 ) مع قيمة padding وكذا قيمة border-radius .

<div class="intro" style="background-color: #2c3338; padding: 10px; border-radius: 20px;">

1	<div class="intro" style="background-color: #2c3338; padding: 10px; border-radius: 20px;">

النتيجة :⇓

عنصر div في HTML يتم استخدامه في الغالب لأغراض التنسيق باستخدام أكواد CSS ، وذلك لتصميم مجموعة من العناصر.
وعنصر div نستخدمه فقط عندما لا يكون هناك أي عنصر HTML دلالي آخر منطقي لأن دور HTML هو إعطاء المعنى بدقة

ما هي علامة div في HTML وكيفية استخدامها؟

كود CSS في div سيغير شكل تنسيق القسم الذي ظهر بالأحمر أعلاه .. بحيث أضفت إليه خلفية بألوان التدرج مع قيمة padding وكذا قيمة border-radius .

<div class="intro" style="background: linear-gradient(to right,#ffbe02a1 0px,#fd606aba 100%); padding: 10px; border-radius: 10px;">

1	<div class="intro" style="background: linear-gradient(to right,#ffbe02a1 0px,#fd606aba 100%); padding: 10px; border-radius: 10px;">

النتيجة : ↓

عنصرdiv في HTML يتم استخدامه في الغالب لأغراض تنسيق CSS ، وذلك لتصميم مجموعة من العناصر.
وعنصر div نستخدمه فقط عندما لا يكون هناك أي عنصر HTML دلالي آخر منطقي لأن دور HTML هو إعطاء المعنى بدقة

في هذا المثال تم فقط تغيير اللألوان ونسبة التدرج:

<div class="intro" style="background: linear-gradient(to right,#0000FF 0px,#80FF80 50%); padding: 10px; border-radius: 10px;">

1	<div class="intro" style="background: linear-gradient(to right,#0000FF 0px,#80FF80 50%); padding: 10px; border-radius: 10px;">

النتيجة : ↓

هنا قمت بتغيير قيم الحدود الدائرية border-radius كما يمكنك تغيير قيم خاصية padding لاكتشاف الفرق بين نتائج عناصر DIV .

<div class="intro" style="background: linear-gradient(to right,#0000FF 0px,#80FF80 50%); padding: 10px; border-radius: 50px 0px 50px 50px;">

1	<div class="intro" style="background: linear-gradient(to right,#0000FF 0px,#80FF80 50%); padding: 10px; border-radius: 50px 0px 50px 50px;">

النتيجة : ↓

عنصرdiv في HTML يتم استخدامه في الغالب لأغراض تنسيق CSS ، وذلك لتصميم مجموعة من العناصر.
وعنصر div نستخدمه فقط عندما لا يكون هناك أي عنصر HTML دلالي آخر منطقي لأن دور HTML هو إعطاء المعنى بدقة .

إقرأ أيضاً:

الحدود الدائرية border-radius في مقالات ووردبريس

استعمال الصور في خلفية الاطار داخل النص

تغيير خلفية الاطار بصورة بدل الألوان مع إضافة حدود بقيمة 1px :

<div class="intro" style="background-image: url('https://www.your-site.com/image.jpg'); border: solid 1px #4796B3; padding: 10px; border-radius: 10px; ">

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 يتم استخدامه في الغالب لأغراض تنسيق CSS ، وذلك لتصميم مجموعة من العناصر.
وعنصر 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.

في أمان الله

قناتي على اليوتوب

أرى أن هذه المواضيع قد تهمك:

شَـاركِ الْمَوْضُوع:
إذا أعجبك هذا المحتوى، فلا تَقْرَأْ وتَرْحَل … تَـعْلِيقَـاتُكَ تَـشْجِيعٌ لَـنَـا لِنَسْتَمِرَّ فِــي الْبَحْثِ وَالْعَطَـاء. وإِذَا كنت تعتقد أنه قد يكون مفيداً لأشخاص آخرين، فشَارِكْهَ على الشبكات الاجتماعية.