‫الوحدة التعلمية ‪:1‬‬ ‫المجال المفاهيمي ‪:3‬‬

‫التاريخ‪.............................‬‬
‫المتصفح‬ ‫تقنيات الويب‬

‫الوضعية االنطالقية‪:‬‬
‫في كثير من األحيان يتم تكليفك من طرف اساتذتك وفي كل المواد بإنجاز بحوث مدرسية خاصة بمواضيع معينة‪.‬‬

‫ما هي المصادر التي ستستعملها في انجاز هذا البحث؟ وما هي البرنامج الذي يسمح لك بالولوج في االنترنت؟‬

‫‪ .1‬تعريف المتصفح‪:‬‬

‫هو برنامج يسمح للمستخدم‪..............................‬الموجودة في‪ ...............................‬بسهولة وسرعة علي‬

‫شكل‪.............................‬وبواسطته نستطيع اإلبحار في فضاء االنترنيت‪.‬‬

‫هناك العديد من المتصفحات نذكر منها‪:‬‬

‫‪..........................................1‬‬
‫‪...........................................2‬‬
‫‪........................................3‬‬

‫‪ .2‬خواص ومميزات المتصفح ‪: Navigateur‬‬

‫ال يوجد متصفح كامل من جميع النواحي فمثال يتصف متصفح جوجل كروم‪.......................‬و‪،..................................‬‬
‫ويتسم متصفح موزيال فايرفوكس‪ ،....................................‬ويمتاز متصفح انترنت اكسبلورر‪...............................‬‬

‫تحتوي واجهة معظم المتصفحات علي هذه العناصر‪:‬‬

‫‪........................................................1‬‬

‫‪........................................................2‬‬

‫‪........................................................3‬‬

‫‪........................................................4‬‬

‫‪........................................................5‬‬

‫‪ .3‬حفظ الصفحة المفضلة ‪:Favorite‬‬

‫اذا قمت بزيارة موقع وتود زيارته مرة اخري‪ ،‬من المستحسن ان تقوم بحفظ‪............................‬في ‪..........................‬‬
‫وذلك بالضغط علي قائمة ‪...............................‬بالزر االيسر للفارة‪.‬‬

‫‪1‬‬
 ‫‪ .4‬اثار التصفح ‪: Historique‬‬

‫عند تصفح األنترنت يقوم المتصفح بحفظ ‪......................‬مثل ‪.............................. ،...................‬و‪....................‬‬

‫يسمح هذا االمر بفتح الصفحات التي تزورها كثيرا بصورة سريعة‪.‬‬

‫‪ .5‬محرك البحث‪:‬‬

‫هو ‪.................‬حاسوبي صمم للمساعدة في العثور علي‪ ..........................‬ضمن مصادر األنترنت المختلفة‪ ،‬من اشهرها‪:‬‬
‫‪.........................................................‬‬

‫ما هو الفرق بين محرك البحث والمتصفح؟‬ ‫تقويم تحصيلي‬

‫‪2‬‬
 ‫الوحدة التعلمية ‪:2‬‬ ‫المجال المفاهيمي ‪:3‬‬
‫التاريخ‪.............................‬‬
‫انشاء صفحة ويب‬ ‫تقنيات الويب‬

‫الوضعية االنطالقية‪:‬‬
‫الويب هو تقنية نشأت عن الروابط التشعبية بين صفحات الويب ومجموع الصفحات‬
‫المرتبطة تشكل موقع فاذا اردنا انشاء موقع علينا انشاء كل صفحة مكونة له ولكتابة‬
‫الصفحة نحتاج الي اختيار اللغة المناسبة التي يستطيع المتصفح ترجمتها الي محتوي‪،‬‬
‫فما هي هذه اللغة؟ ‪.......................................‬‬

‫‪ .1‬تعريف لغة ‪:HTML‬‬

‫هي اللغة التي تستخدم في ‪.......................‬و ‪.........................‬صفحات الويب كلمة ‪ HTML‬هي اختصار ل‪:‬‬
‫‪ Hyper Text Mark up Language‬وتعني لغة ترميز النصوص التشعبية‪.‬‬
‫التعليمات الخاصة بلغة ‪html‬تسمي‪Tag=balise ........................‬‬

‫‪ .2‬تعريف الوسم ‪:Tag‬‬

‫الوسم هو كلمة توضع بين عالمتي <> لتصف المحتوي المراد عرضه علي الصفحة (صورة‪ ،‬فيديو فقرة‪)...‬‬
‫شكل الوسم هو كالتالي‪:‬‬

‫‪ .3‬بنية ملف ‪( HTML‬الشكل العام)‪:‬‬

‫يبدا الملف بالوسم <‪ >html‬وينتهي بالوسم <‪ >/html‬وبينهما نجد الجزئين الرئيسيين‪:‬‬
‫‪ .1‬الراس‪ :‬يحتوي علي معلومات الصفحة مثل العنوان <‪ >title‬عنوان الصفحة >‪</title‬‬
‫يبدا جزء الراس بالوسم <‪ >Head‬وينتهي بالوسم < ‪>/Head‬‬
‫‪ .2‬المحتوي(الجسم)‪ :‬يحتوي علي مضمون الصفحة من نصوص وصور ومقاطع فيديو يبدا هذا الجزء بالوسم‬
‫وينتهي بالوسم وكل الوسوم التابعة لمحتوي الصفحة تأتي داخل هذين الوسمين‪.‬‬

‫>‪ <HTML‬بداية الملف‬

‫>‪<Head‬‬

‫راس الصفحة‬ ‫>‪</Title‬عنوان الصفحة >‪<Title‬‬

‫>‪</Head‬‬
‫ملف ‪HTML‬‬
‫>‪<Body‬‬
‫جسد الصفحة‬ ‫المحتوي الذي يشاهده الجمهور بصفحتك علي الويب‬

‫>‪</Body‬‬
‫نهاية الملف‬ ‫>‪</HTML‬‬

‫‪3‬‬
 ‫مالحظة‪ :‬تكتب ملفات ‪ HTML‬في أي برنامج للنصوص البسيطة مثل‪ bloc note, Notepad++‬وتأخذ‬
‫االمتداد ‪html‬ولتنفيذ الملف نستعمل احد المتصفحات‪.‬‬

‫‪ .4‬وسم الخطوط‪:‬‬

‫ا‪ .‬الوسم <‪:>font‬‬

‫يحتوي علي مجموعة من الخصائص هي اللون ‪color‬و حجم الخط ‪size‬من ‪ 1‬الي ‪ 7‬ونوع الخط ‪face‬‬
‫>‪<Body‬‬
‫>"‪<Font color="Red" face"Arial " size="4‬‬
‫>‪</font‬كيفية انشاء صفحة ويب‬
‫>‪</body‬‬

‫ب‪ .‬وسم العناوين ‪:>h< Heading‬‬

‫يستخدم لتمييز العناوين في صفحات الويب ويكون من العنوان ‪ 1‬الي العنوان ‪ 6‬حيث كلما كبر الرقم صار حجم‬
‫العنوان اصغر‪.‬‬
‫مثال‪:‬‬
‫>‪<Body‬‬
‫>‪</h1‬العنوان‪<h1>1‬‬
‫>‪</h2‬العنوان‪<h2>2‬‬
‫>‪</h3‬العنوان‪<h3>3‬‬
‫>‪</h4‬العنوان‪<h4>4‬‬
‫>‪</h5‬العنوان‪<h5>5‬‬
‫>‪</h6‬العنوان‪<h6>6‬‬
‫>‪</body‬‬

‫مالحظة‪ :‬تحتوي هذه الوسوم علي بعض الخصائص من أهمها المحاذاة "‪ "Align‬تأخذ القيم يمين"‪,"Right‬‬
‫يسار"‪ ,"left‬وسط"‪."center‬‬

‫‪ .4‬وسم الفقرة ‪: Paragraphe‬‬

‫يتم احاطة الفقرة بالوسم ‪ P‬كالتالي‪:‬‬

‫>‪<Body‬‬
‫>‪ </P‬نكتب الفقرة هنا >‪<P‬‬
‫>‪</body‬‬

‫‪4‬‬
 ‫‪ .6‬وسم الصور ‪:Image‬‬
‫‪ Img‬هو وسم يسمح بادراج الصور في صفحة ‪Html‬يحتاج الي خاصية مهمة هي (‪src‬اختصار لكلمة ‪ )source‬نضع‬
‫بها عنوان الصورة المطلوبة‪.‬‬
‫>‪<Html‬‬
‫>‪<Body‬‬
‫>"‪<img src="C:/Users/PMS/Pictures/download-1.jpg‬‬
‫>‪</body‬‬
‫>‪</html‬‬

‫‪ .7‬وسم االرتباطات التشعبية‪:‬‬

‫تعد االرتباطات التشعبية من اهم مكونات صفحة الويب ألنها مسؤولة عن ربط مجموعة من الصفحات‪،‬‬
‫مما يتيح للمستخدم التنقل عبرها بسهولة‪.‬‬
‫نستخدم الوسم ‪a‬الذي يحتاج الي الخاصية ‪href‬‬
‫لتحديد الوجهة ولدينا ‪ 3‬وجهات‪:‬‬
‫ا‪ .‬الوجهة قد تكون صفحة من موقع خارجي وعندها يبدا العنوان ب مثال‪:‬‬
‫>‪<A href="https://www.facebook.com/">Facebook </a‬‬
‫ب‪ .‬الوجهة قد تكون ملف موجود في نفس الموقع (صفحة او صورة) مثال‪:‬‬
‫>‪</a‬صفحتي االولي>"‪<a href="Monsite .html‬‬
‫ج‪ .‬الوجهة قد تكون مكان داخل نفس الصفحة مثال‪:‬‬
‫>‪</h1‬العنوان ‪<h1 id="heading1"> 1‬‬
‫>‪</a></p‬انتقل الي العنوان ‪<p><a href="#heading1">1‬‬

‫‪ .8‬وسم القوائم ‪:Listes‬‬

‫‪ 8.1‬القوائم المرتبة (التعداد الرقمي)‪:‬‬

‫لكتابة القوائم المتسلسلة نستخدم الوسم <‪ >ol‬ونكتب كل سطر من القائمة بين >‪<li> ….. </li‬‬
‫>‪<ol‬‬
‫>‪<li> Google Chrome </li‬‬
‫>‪<li> Firefox </li‬‬
‫>‪<li> Opera </li‬‬
‫>‪<li> Microsoft Edge </li‬‬
‫>‪</ol‬‬

‫‪5‬‬
 ‫‪ 8.2‬القوائم الغير مرتبة (التعداد النقطي)‪:‬‬

‫القوائم غير متسلسلة نستخدم الوسم <‪ >ul‬ونكتب كل سطر من القائمة بين>‪<li> ……… </li‬‬

‫>‪<ul‬‬
‫>‪<li> Mathematique </li‬‬
‫>‪<li> Science </li‬‬
‫>‪<li> Physique </li‬‬
‫>‪<li> Informatique </li‬‬
‫>‪</ul‬‬

‫‪ .9‬الجداول ‪:Les tableaux‬‬

‫ألدراج جدول نستخدم الوسم >‪<Table‬يقسم الجدول الي اسطر باستخدام الوسم <‪>tr‬وكل سطر يقسم الي أعمدة‬
‫باستخدام الوسم<‪ >td‬ويمكن التحكم في سمك اطار الجدول عن طريق الخاصية ‪. border‬‬
‫>"‪<Table border="1‬‬
‫>‪<tr‬‬
‫>‪</td‬العمود‪ 1‬السطر‪<td>1‬‬
‫>‪</td‬العمود ‪ 2‬السطر ‪<td>1‬‬
‫>‪</tr‬‬
‫>‪<tr‬‬
‫>‪</td‬العمود‪ 1‬السطر‪<td> 2‬‬
‫>‪ </td‬العمود ‪ 2‬السطر‪<td>2‬‬
‫>‪</tr‬‬
‫>‪</table‬‬

‫‪6‬‬
 ‫الوحدة التعلمية ‪:3‬‬ ‫المجال المفاهيمي ‪:3‬‬
‫التاريخ‪.............................‬‬
‫البريد االلكتروني‬ ‫تقنيات الويب‬

‫الوضعية االنطالقية‪:‬‬
‫يعد البريد االلكتروني وسيلة اصال مهمة في العصر الحديث‪ ،‬حيث يتيح لألفراد والمؤسسات التواصل مع بعضهم البعض بسرعة‬
‫وفعالية‪ .‬ماذا يقصد بالبريد االلكتروني؟ وكيف يمكن انشاء بريد الكتروني؟‬

‫‪ .1‬تعريف البريد االلكتروني‪:‬‬

‫هو وسيلة‪................................‬تتيح إمكانية‪....................‬و‪ ...........................‬الرسائل النصية والملفات الرقمية‬

‫عبر االنترنت‪ ،‬ويشمل العديد من المكونات مثل‬
‫‪.....................‬و‪........................‬و‪.......................‬و‪ ......................‬ويعتبر وسيلة تواصل مهمة في العصر‬
‫الحديث‪.‬‬

‫الفرق بين البريد العادي والبريد االلكتروني‬

‫يمكن القول ان الفرق بين البريد العادي والبريد اإللكتروني هو ان األول ‪........................................‬‬
‫ويتطلب ‪ ................................‬في حين يتم ارسال الثاني عبر‪ ..........................‬بشكل فوري أي‪..........................‬‬

‫‪ .2‬مكونات عنوان البريد االلكتروني‪:‬‬

‫يتكون عنوان البريد االلكتروني من جزئين رئيسين وهما‪:‬‬

‫‪ .A‬اسم المستخدم ‪:User Name‬‬

‫‪......................................................................‬‬
‫‪ .B‬اسم المجال ‪:Domain Name‬‬
‫‪.....................................................................‬‬

‫‪[email protected]‬‬ ‫مثال‪:‬‬

‫‪7‬‬
 ‫هناك العديد من المواقع التي تتيح خدمة البريد االلكتروني‪:‬‬

‫‪.................................................1‬‬
‫‪................................................2‬‬
‫‪................................................3‬‬

‫‪ .3‬خطوات انشاء حساب بريد الكتروني‪:‬‬

‫‪ .1‬اختر مزود البريد االلكتروني الذي تريده مثل‪............................................‬‬

‫‪ .2‬افتح صفحة‪....................‬في مزود خدمة البريد الذي اخترته‪.‬‬
‫‪ .3‬االستمارة المعلومات‪....................................................................‬‬

‫ألرسال الرسائل والمرفقات نقوم باتباع الخطوات التالية‪:‬‬

‫❖ تسجيل الدخول الي‪..................................................‬‬
‫❖ انشاء رسالة جديدة عن طريق النقر علي الزر‪....................‬‬
‫❖ ادخال البريد االلكتروني الخاص ب‪...............................‬‬
‫❖ كتابة ‪........................................‬في الحقل الخاص بها‪.‬‬
‫❖ اختيار‪..............................‬الذي تريد ارفاقه مع الرسالة‪.‬‬
‫❖ اضغط علي ‪................................................‬‬

‫‪ .4‬إيجابيات وسلبيات البريد االلكتروني‪:‬‬

‫سلبيات البريد االلكتروني‬ ‫إيجابيات البريد االلكتروني‬

‫✓ ‪...............................................‬‬ ‫✓ ‪...............................................‬‬
‫✓ ‪...............................................‬‬ ‫✓ ‪...............................................‬‬
‫✓ ‪...............................................‬‬ ‫✓ ‪...............................................‬‬
‫✓ ‪...............................................‬‬ ‫✓ ‪...............................................‬‬
‫✓ ‪...............................................‬‬ ‫✓ ‪...............................................‬‬
‫✓ ‪...............................................‬‬

‫‪8‬‬
 ‫الوحدة التعلمية ‪:4‬‬ ‫المجال المفاهيمي ‪:3‬‬
‫التاريخ‪.............................‬‬
‫استغالل أدوات التواصل االجتماعي‬ ‫تقنيات الويب‬

‫الوضعية االنطالقية‪:‬‬
‫في حياتك اليومية سواء في المدرسة او خارج المدرسة تكتسب أصدقاء تبقي في‬
‫تواصل معهم دائما‪.‬‬

‫ما هي الوسائل التي تستعملها للتواصل معهم؟‬

‫ما هي التسمية التي تطلق علي هذه المواقع ما تعريفها؟‬

‫‪ .1‬تعريف شبكات التواصل االجتماعي‪:‬‬

‫هي ‪................‬علي‪ ،................................‬تتيح التواصل والتفاعل بين االفراد والمجتمعات في بيئة مجتمع افتراضي‪،‬‬
‫وتعتبر مواقع التواصل االجتماعي أدوات تسويقية هامة للشركات والعالمات التجار و حتي االفراد‪.‬‬

‫من اشهر منصات التواصل االجتماعي هي‪:‬‬

‫‪ .2‬اهم فوائد شبكات التواصل االجتماعي‪:‬‬

‫تعتبر شبكات التواصل االجتماعي أداة مهمة في عصرنا الحالي حيث توفر لنا العديد من الفوائد أهمها‪:‬‬
‫❖ ‪..........................................................‬‬
‫❖ ‪..........................................................‬‬
‫❖ ‪..........................................................‬‬
‫❖ ‪..........................................................‬‬
‫❖ ‪..........................................................‬‬

‫‪ .3‬إيجابيات شبكات التواصل االجتماعي‪:‬‬

‫❖ ‪.......................................................................................‬‬
‫❖ ‪........................................................................................‬‬
‫❖ ‪........................................................................................‬‬
‫❖ ‪........................................................................................‬‬

‫‪9‬‬
 ‫‪ .4‬سلبيات شبكات التواصل االجتماعي‪:‬‬
‫‪.................................................‬‬
‫‪.................................................‬‬
‫‪.................................................‬‬
‫‪.................................................‬‬

‫ما هي اخالقيات استعمال مواقع التواصل االجتماعي؟‬ ‫تقويم تحصيلي‬

‫‪10‬‬