تعلم لغة html من الصفر للاحتراف ( الجزء الثالث)

تعلم لغة html من الصفر للاحتراف ( الجزء الثالث)

0

تعلم لغة html من الصفر للاحتراف ( الجزء الثالث)

تعلم لغة html من الصفر

السلام عليكم متابعينا في الجزء الثالث من دورة تعلم لغة html من الصفر  في البداية نعتذر عن التأخير في صدور هذا المقال ومعظم المقالات سنقوم بنشرها يوميا باذن الله كما اعتدنا علي ذلك .

في درس السابق (الجزء الثاني ) من تعلم لغة html من الصفر قمنا بشرح التعليقات في لغة HTML وشرحنا الألوان الموجودة في اللغة وطريقة اضافتها وشرحنا الجداول وشرحنا انشاء نماذج في HTML اليوم سنشرح بتعمق أنواع المدخلات في لغة HTML لندخل في الشرح سريعا في ثالث مقال من دورة  تعلم لغة html من الصفر

تعلم لغة html من الصفر ( الجزء الثالث )

تعلم لغة html من الصفر

أنواع المدخلات في HTML – Types Input

<input <هو حقل ادخال و type : هو نوع الحقل
Text : يعني  النص
<“text=”type input <حقل الادخال نص

<“password=”type input <وفيها يظهر الكلام علي شكل نجوم لأنها كلمة سر مثل هذه الصورة تماما :-

باسورد

وهذه الأكواد الخاصة بأنواع المدخلات كلها

  • <input type=”button”>
  • <input type=”checkbox”>
  • <input type=”color”>
  • <input type=”date”>
  • <input type=”datetime-local”>
  • <input type=”email”>
  • <input type=”file”>
  • <input type=”hidden”>
  • <input type=”image”>
  • <input type=”month”>
  • <input type=”number”>
  • <input type=”password”>
  • <input type=”radio”>
  • <input type=”range”>
  • <input type=”reset”>
  • <input type=”search”>
  • <input type=”submit”>
  • <input type=”tel”>
  • <input type=”text”>
  • <input type=”time”>
  • <input type=”url”>
  • <input type=”week”>

تعلم لغة html من الصفر

كل كود له خاصيته واستعماله وللتوضيح كود Reset أ، يعيد كل الحقول للوضع الاصلي أو الافتراضي وزر Submit هو زر ارسال بيانات النموذج الذي قمت بانشائه و Checkbox هي خاصية تذكر الموقع باسم المستخدم والرقم السري الخاص به وكود file هو زر لرفع ملف مخصص للنموذج مثل المواقع الخاصة بالتوظيف التي تتطلب منك رفع CV مثلا وهكذا . وباقي الأكواد تستطيع معاينتها من خلال موقع w3schools .

أكواد iframe

يتم استخدام إطار HTML iframe لعرض صفحة ويب داخل صفحة ويب. بمعني انه ممكن في موقعك أن تضعك صفحة لموقع اخر داخل موقعك  ويتم بواسطة هذا الكود <Ifarme><Ifarme>

ويمكنك أن تضيف له عرض وارتفاع ايضا ، للمزيد من المعلومات حول Iframe

<mark>

<p>يستعمل العنصر &lt;mark&gt;
  <mark>لتعليم</mark> النصوص</p>

ومعناها علامة لتحديد كلمة أو عبارة
تحدد العلامة <mark >النص المحدد.
استخدم العلامة <mark >إذا كنت تريد تمييز أجزاء من النصوص الخاصة بك.

العنصر <progress>

مصدر الصورة : wikitechy

ومعناها تقدم وهو لقياس مستوى التقدم
ويعمل عداد تقدم لك
تمثل علامة <progress > تقدم مهمة ما.
هو ما وصل إليه فعلاً progress ال value ال
وال max هو الحد الأقصى لعداد التقدم ومثال علي ذلك هذا الكود

 

<progress value="70" max="100">70%</progress>

 

العنصر <select>

يستخدم هذا العنصر <لإنشاء قائمة منسدلة.
تحدد علامات <option <داخل العنصر <select> الخيارات المتاحة وخير مثال علي ذلك للتبسيط هذا الكود :-

 

<select name="select">
  <option value="value1">الخيار رقم 1</option> 
  <option value="value2" selected>الخيار رقم2</option>
  <option value="value3">الخيار رقم3</option>
</select>

 

ايضا يمكنك أن تستخدم كود option لتنسيق وتوصف مجموعة groub داخل ال select
ويجمع الخيارات المتعددة تحت عنوان واحد <optgroup>مثل:-

 

<select name="select" size="5" multiple>
  <optgroup label="المجموعة 1">
    <option>الخيار 1.1</option>
  </optgroup> 
  <optgroup label="المجموعة 2">
    <option>الخيار 2.1</option>
    <option>الخيار 2.2</option>
  </optgroup>
  <optgroup label="المجموعة 3">
    <option>الخيار 3.1</option>
    <option>الخيار 3.2</option>
    <option>الخيار 3.3</option>
  </optgroup>
</select>

 

رموز تعبيرية في HTML

إذا كنت تريد عرض أي من هذه الرموز التعبيرية بتنسيق HTML يمكنك اضافة هذه الرموز ببساطة عن طريق اضافة أكوادهم بمعني أنه اذا قمت باضافة هذا الكود داخل الصفحة الخاصة بك فسيقوم بادراج رمز تعبيري لوجه يضحك :-

😀

<p>&#128512;</p>

 

ويمكنك معرفة جميع أكواد الرموز التعبيرية الخاصة بلغة HTML من هنا .

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

لمتابعي موقع ويب تايمز فقط
سنرسل لك كلمات رئيسية عالية الزيارة وعالية الربح CPC مجانا !
يمكنك إلغاء الاشتراك في أي وقت

اترك رد

لن يتم نشر عنوان بريدك الإلكتروني.

أربعة × 1 =