التعرف على وسوم details summary button في لغة html الدرس |17| - Programmer Tech

Programmer Tech

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

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

الاثنين، 11 مايو 2020

التعرف على وسوم details summary button في لغة html الدرس |17|


الوسم details و summary

سنتحدث عن عنصرين مهمين في لغة  html و هما details و يملك ضمنه عنصر summary و يكون عبارة عن مثلث صغير و بداخله نضع فقرات.
يكتب بالشكل
<details>
    <summary>نكتب اسم العرض</summary>
</details>

مثال 

أنشئ قائمة من نوع details تعرض أسم Programmer Tech و بداخلها وسم summary يعرض لنا تعلم لغات html,css,javascript,python.
 
<html>
     <head>
         <title>Coderer Arabs</title>
    </head> 
    <body>
         <details>
               <summary>Programmer Tech</summary>
               <p>learn html</p> 
               <p>learn css</p> 
               <p>learn python</p>  
               <p>learn javascript</p>
        </details>
     </body>
</html>


وعند الضغط على السهم يظهر


يمكن تنسيق هذا عن طريق الـ css ليكون مظهره اجمل.

الوسم button

هو وسم إنشاء زر للضغط عليه و يكون بداخل الزر أوامر مثل ( رابط يؤدي لصفحة ما, ارسال بيانات يتم ملؤها و ارسالها لسيرفر, تشغيل امر ما....الخ.

يكتب بالشكل
<button>هنا نكتب ما يظهر على الزر</button>

مثال 1

<body>
         <button type="button"> انقر لتسجيل الدخول</button>
</body>


مثال 2

قم بإنشاء حقل ايميل و حقل باسورد مع زر button من نوع submit و ارسال البيانات إلى السيرفر و حقل reset مسح البيانات من الحقول.

<body>
    <form>
         Email : <input type="text" name="email"><br><br>
         Password : <input type="password" name="pass"><br>
          <button type="reset">reset</button>
          <button type="submit">login</button>
    </form>
</body>



قناتنا التلغرام
https://t.me/Programmer_Tech
المدونة
https://www.programmer-tech.com
صفحة الفيسبوك
https://www.facebook.com/ProgrammerTech.net
قناة اليوتيوب 1:
https://www.youtube.com/ahmadkaissar
قناة اليوتيوب 2:
https://www.youtube.com/MuhammadAlush0997

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

إرسال تعليق

facebook

تسميات

تواصل معنا

Translate

أخر الافكار

من انا

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

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

الاسم

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

رسالة *

اقسام