تجميع العناصر بإستخدام span و div في لغة html الدرس |15| - Programmer Tech

Programmer Tech

موقع تعليم مجاني يهتم بتعلم البرمجة و علوم الكمبيوتر, أمن المعلومات, القرصنة الأخلاقية, سكربتات

إعلان اعلى المقالة

الجمعة، 6 مارس 2020

تجميع العناصر بإستخدام span و div في لغة html الدرس |15|


الوسم div و الوسم span

في هذا الدرس سنلقي نظرة عن قريب على استخدام span and div لأنهما العنصران الأكثر اهمية عندما تتعامل مع css, الوسومان يستخدمان لجمع العناصر و إنشاء هيكلية الوثائق وهما يستخدمان معاً مع الخاصيتين class و id وتم شرحهم مسبقاً, رابط درس class and id من هنا.

التجميع بالعنصر span

هو ما يمكن ان تسميه العنصر المحايد والذي لا يضيف شيئاً للوثيقة نفسها لكن مع span css يمكن استخدامه لإنشاء مؤثرات على اجزاء محدده من النص في الوثائق الموجودة في html و الآن نأخذ مجموعة من الأمثلة و نشاهد كيف يعمل ذلك العنصر وكيف سنقوم بتنسيق وثائق html من خلال هذا العنصر.

في ملف index.html
<html>
     <head>        
           <title> span </title>              
     </head>        
  <body>  
          <p>programmer tech web sit </p>             
  </body>  
</html>

لنقل اننا نريد ان نؤكد على اسم الموقع الخاص بنا او نص موجود داخل تلك الكلمة وفي ذلك المثال سنؤكد على tech الموجودة في اسم الموقع بإستخدام العنصر span , يمكن ان نقوم بعمل تنسيق معين علي تلك الكلمة كمثال سنقوم بإعطاء الكلمة اللون الأحمر لهذا الغرض يمكن وضع الكلمة التي تريد التنسيق عليها بين span.

بالإضافة الى ذلك نستخدم العنصر class التي تمكننا بعد ذلك من اضافة خصائص معينة لها من خلال ملف css وسيكون شكل الكود او السورس كود كالتالي في ملف index.html .

في ملف index.html
<html>
       <head>
               <title> span </title>     
       </head>  
  <body>   
         <p>programmer<span class="tech"> tech </span>websit </p>      
  </body>   
</html>

في ملف style.css

.tech{
       color = red;
}

و يكون الناتج في المتصفح بالشكل
programmer tech websit

يمكنك بالطبع استخدام المعرف id لإضافة الألوان او التنسيق على span, لمن تذكر ان استخدام المعرف id يجب ان يكون لمرة واحدة في الصفحة الواحدة وبذلك الشكل لا يمكنك عمل تنسيق على مجموعة من العناصر, تخيل معي اذا كان هناك نص طويل و تريد ان تقوم بإعطاء اللون الأحمر لجملة في النص يجب عليك استخدام class وليس id .

التجميع بالعنصر div

العنصر span يستخدم في العناصر نفسها كما رأيت في المثال السابق أما العنصر div يستخدم لتجميع العناصر, هذا هو الإختلاف الوحيد, تجميع العناصر بإستخدام div يعمل بنفس الطريقة لنلقي نظرة على مثال لقائمتين تحويان اسماء رؤساء هذا الموقع مقسمة حسب الأقسام الموجودة في الموقع .

يكون في ملف index.html
<html>
       <head>
             <title> div </title>
       </head>
<body>

<div id= "web">
        <ul> 
        <li> Kaissar </li>   
        <li> Html </li>   
        <li> Css </li>    
        <li>Php</li>    
        <li> Java Script </li>    
        <li> MySql </li>    
        </ul>  
</div>

<div id="black">
        <ul>  
        <li>Data</li>       
        <li>Networks</li>       
        <li> Information security</li>       
        <li>Kali linux</li>       
        <li>Programs</li>       
        <li>Python</li>       
        </ul>  
</div>

</body>
</html>

و في ملف style.css
#web{
background-color: blue; } #black{ background-color: red;


الناتج في المتصفح

تجميع العناصر باستخدام div و span

ليست هناك تعليقات:

إرسال تعليق

facebook

تسميات

تواصل معنا

Translate

أخر الافكار

من انا

authorمبرمجين ويب و محبين للتقنية و الشبكات و امن المعلومات و سوف نقدم لكم الافضل إن شاء الله
أعرف المزيد ←

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *

اقسام