إنشاء نموذج بلغة HTML - التقنية الرقمية 1 - أول ثانوي
القسم الأول
الوحدة الأولى: أساسيات علم الحاسب
الوحدة الثانية: العمل عبر الإنترنت
الوحدة الثالثة: البرمجة باستخدام لغة ترميز النص التشعبي
القسم الثاني
الوحدة الأولى: معالجة الصور المتقدمة
الوحدة الثانية: التقنية والحياة
الوحدة الثالثة: البرمجة باستخدام لغة ترميز النص التشعبي (HTML)
القسم الثالث
الوحدة الأولى: مستندات ونماذج وتقارير الأعمال
الوحدة الثانية: شبكات الحاسب
الوحدة الثالثة: البرمجة بواسطة المايكروبت
وزارة التعليم Ministry of Education 2024-1446 الوحدة الثالثة: البرمجة باستخدام لغة ترميز النص التشعبي أهداف التعلم ستتعلم في هذه الوحدة: مفهوم النموذج بلغة HTML. > طريقة عمل نموذج جهة الاتصال. > استخدام لغة ترميز النص التشعبي (HTML) لإنشاء نموذج جهة اتصال في موقع إلكتروني. > استخدام الأنواع المختلفة لعنصر <input> في HTML. الأدوات محرر فيجوال ستوديو كود (Visual Studio Code) 256
أهداف تعلم الوحدة الثالثة
أدوات تعلم الوحدة الثالثة
الدرس الأول: إنشاء نموذج بلغة HTML رابط الدرس الرقمي www.ien.edu.sa تعلمت في الفصل الدراسي السابق كيفية إنشاء صفحة بلغة HTML باستخدام الوسوم الأساسية. <!DOCTYPE html> <html dir="rtl" lang="ar"> تحدد أن هذا المستند هو مستند HTML. <head> <title> Page title</title> تحدد النص الذي سيظهر في شريط العنوان نافذة متصفح المواقع الإلكترونية. د/ "8-meta charset="UTF> </head> <body> <h1/> ! هذا عنوان <h1> <p/>.هذه فقرة <p> تحدد الأوامر البرمجية الموجودة بين الوسمين <head> </head> كيفية تفسير المستند بوساطة المتصفح وكيفية عرض المستند. اكتب المقطع البرمجي السابق في فيجوال ستوديو كود ثم شاهد النتيجة. 1 2 <> Examples.html X Examples Pages > <> Examples.html> html> <head> meta <!DOCTYPE html> <html dir="rtl"lang="ar"> 3 <head> 4 <title>Page title</title> 5 <meta charset="UTF-8"> 6 </head> 7 <body> 8 9 <h1/> !هذا عنوان <h1> <p/>. هذه فقرة <p> 10 </body> 11 </html> </body> </html> File Edit Selection EXPLORER OPEN EDITORS X <> Examples.html Pages EXAMPLES > images Pages <> Examples.html يتم هنا برمجة الموضوع الرئيس للصفحة الإلكترونية الخاصة بك. تقع جميع النصوص والرسومات والصوت والفيديو والروابط المؤدية إلى صفحات أخرى بين الوسمين <body> و<body/>. 257 وزارة التعليم Ministry of Education 2024-1446
إنشاء نموذج بلغة MTML
وزارة التعليم Ministry of Education 2024-1446 وأثناء العمل على تصميم موقعك الإلكتروني، قد تحتاج إلى نموذج لإدخال البيانات. في هذا الدرس ستتعرف على كيفية إنشاء نموذج بلغة HTML. مفهوم النموذج بلغة HTML النموذج (Form) مستند يحتوي على حقول لإدخال البيانات. يتضمن كل حقل في النموذج على اسم محدد يُمَكِّن المستخدم الذي يتصفح النموذج من معرفة عناصره المختلفة. النماذج الأكثر استخدامًا هي نموذج مربع بحث جوجل (Google) ونموذج التسجيل على جوجل ↑ ☑ T Google x + e https://www.google.com Google Google Search I'm Feeling Lucky G Create your Google Account X + C .(Google) Gmail Images Sign in https://accounts.google.com/signup/v2/webcrea... 16 Google Create your Google Account First name Last name Username You can use letters, numbers & periods Use my current email address instead @gmail.com Password Confirm Use 8 or more characters with a mix of letters, numbers & symbols ☐ Show password Sign in instead Next 鱼 258
مفهوم النموذج بلغة HTML
كيفية عمل النموذج عندما ترى نموذجًا في موقع إلكتروني، ستلاحظ وجود مربعات الإدخال والخيارات وجميعها يُنَفّذ بلغة HTML. عندما يملأ المستخدم النموذج ويضغط على زر الإرسال يجري إرسال المعلومات إلى الخادم للمعالجة أو للحفظ. 1 تُرسل البيانات من النموذج إلى الخادم. به يستقبل الخادم البيانات من النموذج ويقوم بمعالجتها. بنية النموذج وسم سمة يحتوي النموذج على عناصر تحكم متعددة، ويجمع كل منها معلومات مختلفة. توجد عناصر التحكم بالنماذج داخل وسم <form> ويتطلب كل مميزة تستقبل السمة قيمة هي عنوان الارتباط التشعبي (URL) للصفحة الموجودة على الخادم التي تستقبل معلومات من النموذج عند إرسالها. على سبيل المثال: <form action="http://www.myhttpserver.eu/comments.php"> .3 ينشئ الخادم صفحة استجابة جديدة تُرسل إلى المستخدم. هذا هو عنوان النموذج الذي سنستخدمه في الكتاب. لكي يعمل النموذج الخاص بك بشكل صحيح، تحتاج إلى استبدال هذا العنوان بآخر في الخادم المحلي الخاص بك. 259 وزارة التعليم Ministry of Education 2024-1446
كيفية عمل النموذج
بنية النموذج
وسم input> لا يحتوي على وسم إغلاق. <input type="text"> المسار <input type="password"> <input type="email"> <input type="submit"> <input type="radio"> وسم <input> يُستخدم وسم input> للتحكم بعناصر النموذج، والتي يمكن عرضها بطرق مختلفة اعتمادًا على نوع السمة . يستعرض الجدول التالي بعضها: وسوم input> للتحكم بعناصر الإدخال للنموذج الوصف ينشئ سطرًا واحدًا مخصصًا من النص. ينشئ سطرًا واحدًا من النص مع إمكانية إخفاء النص واستخدامه مع كلمة المرور ينشئ سطرًا واحدًا مخصصا للبريد الإلكتروني مع ميزة التحقق من كتابة البريد الإلكتروني بشكل صحيح. ينشئ زر الموافقة على الإرسال إلى الخادم. يحدد زر الاختيار من متعدد ويمكن للمستخدم تحديد خيار واحد فقط. ******** لتلق نظرة على مثال لكل نوع: <input type="text"> <body> <form action="http://www.myhttpserver.eu/comments.php"> اسم المستخدم <p> <input type="text" name="username"> </p> </form> </body> Examples C O X + File | C:/Users/binar/Doc... وزارة التعليم Ministry of Education 2024-1446 X ... اسم المستخدم 260
وسم <input>
261 <body> <form action="http://www.myhttpserver.eu/comments.php"> اسم المستخدم <p> <input type="text" name="username"> </p> <input type="password"> كلمة المرور <p> <input type="password" name="password"> </p> </form> </body> Examples C Examples x + C ①File C:/Users/binar/Doc... X x + File C:/Users/binar/Doc... اسم المسا ستخدم كلمة المرور <form action="http://www.myhttpserver.eu/comments.php"> <label for="username"> primall pul:</label><br> <input type="text" name="username"><br> <label for="email">:</label><br> <input type="email" name="email"><br> <label for="gender">:</label><br> <input type="radio" name= "male"> <label for="male">S</label> <input type="radio" name="female"> <label for="female">i</label><br> <input type="submit" value="lw!"> </form> وزارة التعليم Ministry of Education 2024-1446 اسم المستخدم كلمة المرور <input type="radio"> x + File C:/Users/binar/De... Sign in اسم المستخدم البريد الإلكتروني ذكر 0 إرسال
أمثلة على وسم <input>
<form action="http://www.myhttpserver.eu/comments.php"> <input type="text" name="username"> <label/>: اسم المستخدم <"label for="username> <label/>: البريد الإلكتروني <"label for="email> <"إرسال"=input type="submit" value> <input type="email" name="email"> </form> إرسال Examples C + O File | C:/Users/bina... البريد الإلكتروني: البريد الإلكتروني: hammadsa.bl_outlook.com إرسال Please include an '@' in the email address. 'mohammadsa.bl_outlook.com' is missing an '@'. - X ... اسم المستخدم اسم المستخدم <input type="email"> تُستخدم سمة القيمة لتحديد النص الذي سيظهر على زر الأمر. وسم <fieldset> يُستخدم وسم fieldset لتجميع العناصر ذات الصلة في النموذج. <form action="http://www.myhttpserver.eu/comments.php"> <fieldset> يُستخدم وسم <legend> لتسمية مجموعة حقول الإدخال. legend اتصل بنا<legend> <label/>: اسم المستخدم <"label for="username> <input type="text" name="username"> <input type="email" name="email"> <label/>: البريد الإلكتروني <"label for="email> <"إرسال"=input type="submit" value> </fieldset> </form> وزارة التعليم Ministry of Education 2024-1446 Examples x + C File C:/Users/bina... X : اتصل بنا اسم المسن البريد الإلكتروني: إرسال 262
تستخدم سمة القيمة لتحديد النص الذي سيظهر على زر الأمر
وسم <fieldset>
263 وزارة التعليم Ministry of Education 2024-1446 جرب بنفسك لتكتب المقطع البرمجي التالي بإضافة وسم textarea> لإنشاء حقل نصي متعدد الأسطر ثم شاهد النتيجة. <form action="http://www.myhttpserver.eu/comments.php"> <fieldset> <legend> Jui</legend> <label for="name">:</label><br> <input type="text" name="name"><br> <label for="email">:</label><br> <input type="email" name="email"><br> <label for="message">w</label><br> <textarea placeholder="..."> </textarea><br> <input type="submit" value="Jly!"> </fieldset> </form>
لإنشاء حقل نصي متعدد الأسطر
صفحة مشجعي كرة القدم حان الوقت لتطبيق ما تعلمته عن النماذج على الموقع الإلكتروني الخاص بك الذي أنشأته بلغة HTML في الفصل الدراسي الأول. في المجلد الرئيس أنشأت صفحة باسم "contact-form.html". File Edit Selection View D EXPLORER OPEN EDITORS Go Run Terminal Help contact form.html Football Fan page - Visual Studio ... <>footballFanPage.html <> contact-form.html X pages> <> contact-form.html> <html> <head> <title 1 <!DOCTYPE html> <>footballFanPage.ht.. 2 X <> contact-form.html... 3 FOOTBALL... ECS <html dir="rtl" lang="ar"> до 4 <head> › Images 5 <title>Contact Us</title> pages 6 <meta charset="UTF-8" /> <>contact-form.html 7 </head> <>footballFanPage.html 8 <body> 9 10 11 12 13 <form action="http://www.myserver.gr/comments.php"> <fieldset> <legend> </legend> <label for="name">p</label><br> <input type="text" placeholder="..."><br> <!DOCTYPE html> <html> <head> <title>Contact Us</title> </head> <body> <form action="http://www.myhttpserver.eu/comments.php"> <fieldset> <legend> </legend> <label for="name">:</label><br> <input type="text" placeholder="Elaw ..."><br> <label for="Last name">äill pul:</label><br> <input type="text" placeholder="" pull..."> <br> <label for="email">:</label><br> أنشئ نموذجا يحتوي على أربعة حقول إدخال وأضف المعلومات التالية: > الاسم. > اسم العائلة. > البريد الإلكتروني. <input type="email" placeholder="y Ulgic ..."> <br> <label for="message">LwJl:</label><br> <textarea placeholder="..." ></textarea><br> <input type="submit" value="Jlwy!"> </fieldset> </form> </body> </html> العنصر النائب placeholder) هو سمة تكون قيمتها النص المعروض للمستخدم في مربع النص ليتم الضغط عليه. > الرسالة. وزارة التعليم Ministry of Education 2024-1446 264
صفحة مشجعي كرة القدم
Football Fan Page 265 x + File D:/UserData/Docs/footballFanPagefinal.html وزارة التعليم Ministry of Education 2024-1446 صفحة الرئيسة التاريخ 4 تعمل كرة القدم على جمع الناس معا الهدف من حضور الجمهور في هذه اللعبة هو تشجيع اللاعبين في أثناء المباراة التاريخ تحد كرة القدم رياضة ذات تاريخ طويل نشأت بشكلها الحالي في إنجلترا في منتصف القرن التاسع عشر وجدت أندية كرة القدم منذ القرن الخامس عشر لكنها كانت غير منظمة ودون صفة رسمية، ثم تم إنشاء الكثير من هذه الأندية في أواخر القرن التاسع عشر، ولكن القليل منها فقط استمر بعد ذلك. يعتقد معظم المؤرخين أن الأندية التي استمرت بنشاطها كانت تقع في مناطق أكثر ثراء قليلا. حيث كان الناس لا يعملون بعد ظهر يوم السبت وكانوا قادرين على تحمل نفقات حضور المباريات. WORLD FOO L MUSEUM MOKED LD FOOT EUM Football Fan Page X Contact Us X + →> C ①localhost:52330/p... FIFA WO D FOOTBALL MI المعرض FIFA WO FOOTBALL M X : اتصل بنا الاسم: اكتب اسمك العائلة اسم اكتب اسم العائلة.. البريد الإلكتروني اكتب عنوان بريدك الإلكتروني.... الرسالة: رسالتك Submit
تعمل كرة القدم على جمع الناس معا
وزارة التعليم Ministry of Education 2024-1446 <!DOCTYPE> <html dir="rtl" lang="ar"> <title>Examples</title> <meta charset="UTF-8" /> </head> لنطبق معًا تدريب 1 حدد الأخطاء وصححها في المقطع البرمجي التالي؟ <form ="http://www.myhttpserver.eu/comments.php"> <fieldset> <legend> <legend> <label type="name">:</label><br> <input type="text" name="name"><br> <label for="email">:</label><br> <input type="email" name="email"><br> <label for="message">LwJl</label><br> <textarea placeholder="..."><br> <input type="button" value="Jlwy!"> </fieldset> </form> <body> <html> 266
حدد الأخطاء وصححها في البرنامج التالي؟
267 € Examples x + C File N:/ICT/Projects/... Q B تدريب 2 أنشئ النموذج التالي: ... رياضتي المفضلة هي: كرة القدم الفروسية كرة اليد إرسال تدريب 3 أنشئ نموذجًا يتضمن حقول الإدخال التالية: الصف ويكتب فيها المستخدم عن المرحلة الدراسية التي ينتمي لها. > الجنس ويختار فيها المستخدم بين ذكر أو أنثى. الرسالة ويكتب فيها المستخدم عن تأثير التقنية على التعليم. > إرسال. تدريب 4 استمر بتحديث الموقع الإلكتروني الذي أنشأته في الفصل الدراسي الأول الخاص بالمعلومات السياحية للمسافرين. افتح مجلد Adventure_website" في فيجوال ستوديو كود ونفذ ما يلي: > أنشئ ملف HTML جديد لبناء نموذج بحيث يمكن للمستخدمين ترك رسالة. يحتوي هذا النموذج على أربعة حقول إدخال: الاسم واسم العائلة والبريد الإلكتروني، والتعليق ثم أضف حقل إرسال. > أنشئ عنصرًا جديدًا في شريط التنقل باسم " اتصل بنا " واربطه بالصفحة التي تحتوي على النموذج. احفظ عملك. وزارة التعليم Ministry of Education 2024-1446
أنشئ النموذج التالي
أنشئ نموذجا يتضمن حقول الإدخال التالية
استمر بتحديث الموقع الإلكتروني الذي أنشأته في الفصل الدراسي الأول الخاص بالمعلومات السياحية للمسافرين
