مشروع ياسمين - تدريب البرمجة

‫ماهو الويب وإلى‬
‫ماذا يقسم؟!‬
‫ماهو الويب وإلى‬
‫ماذا يقسم؟!‬
‫الويب هو عالم رائع يتيح لنا التواصل والمشاركة‬
‫عبر اإلنترنت‪ .‬عندما نتصفح اإلنترنت ونزور‬
‫صفحات الويب‪ ،‬نكّون اتصااًل مع العالم ونشارك‬
‫المعلومات واألفكار مع اآلخرين من جميع أنحاء‬
‫العالم‪.‬‬
‫تدريب الويب‬
‫للـيافعيـن‬
‫يقسم الويب إلى جزئين مهمين‬
‫لبناء صفحات الويب‪:‬‬
‫الفرونت إند(‪)Front End‬‬ ‫‪1‬‬
‫الباك إيند(‪)Back End‬‬ ‫‪2‬‬

‫الفرونت إند(‪)Front End‬‬ ‫‪1‬‬
‫عندما نتحدث عن الفرونت إند‪ ،‬نتحدث عن المظهر والشكل الجميل‬

‫لصفحات الويب‪ .‬هذا هو المكان الذي نستخدم فيه لغات مثل ‪ HTML‬و‪.CSS‬‬
‫يسمح لنا ‪ HTML‬ببناء هيكل الصفحة‪ ،‬بينما يسمح لنا ‪ CSS‬بتزيينها وجعلها‬
‫تبدو رائعة! فكر في ‪ HTML‬مثل الهيكل العظمي لجسم الصفحة‪ ،‬وفي ‪CSS‬‬
‫مثل المالبس واأللوان التي تجعل الصفحة مميزة وجميلة‪.‬‬
‫الباك إند(‪)Back End‬‬ ‫‪2‬‬
‫عندما نناقش الباك إند‪ ،‬فإننا نتحدث عن العمليات الخفية وراء الكواليس‪.‬‬
‫هناك أشياء كثيرة تحدث عندما ننقر على رابط أو نمأل نموذج على الويب‪ ،‬مثل‬
‫حفظ المعلومات في قاعدة بيانات أو إرسال رسائل‪ .‬هذا هو المكان الذي تأتي‬
‫فيه لغات البرمجة مثل ‪ PHP‬أو ‪ Python‬أو ‪ . Ruby‬هؤالء اللغات تساعد في‬
‫جعل الويب تفاعلًيا وقادًرا على القيام بأشياء رائعة!‬
‫عناصر ال ‪ head , body‬وداللة وجودهم!‬
‫عنصر <‪:>head‬‬
‫عندما نتحدث عن <‪ ،>head‬فإننا نتحدث عن "الدماغ" الخفي لصفحة الويب‪ .‬هذا المكان‬
‫السحري حيث نضع جميع المعلومات الخاصة بالصفحة والتي ال نريد أن يروها الزوار‬
‫مباشرة‪ .‬هنا نضع أشياء مثل اسم الصفحة ووصف قصير عنها‪.‬‬
‫عنصر <‪:>body‬‬
‫عندما ننظر إلى <‪ ،>body‬نرى الشيء الذي يظهر للزوار عند فتح الصفحة‪ .‬هذا هو المكان‬
‫الذي نضع فيه جميع المحتويات التي يمكن للناس أن يروها ويتفاعلوا معها‪ .‬افتراضًيا‪،‬‬
‫<‪ >body‬هو المكان الذي نضع فيه العناوين والفقرات والصور والروابط واألشياء التي‬
‫يمكن للزوار أن ينقروا عليها ويتجولوا حولها‪.‬‬
‫لذلك‪ ،‬في النهاية‪ >head< ،‬هو مكان األشياء السرية والهامة التي ال تظهر للزوار مباشرة‪،‬‬
‫بينما <‪ >body‬هو المكان الذي نضع فيه كل محتويات صفحة الويب التي يمكن للناس‬
‫رؤيتها والتفاعل معها‪.‬‬
‫الكود الرئيسي لصفحة الويب‬
<!DOCTYPE html>
>"html lang="en<
>head<
>head/<
>body<
>body/<
>html/<
‫تاغات النصوص‬
‫تاغ الفقرة‬
‫عناصر تنسيق النصوص في ‪:Html‬‬
‫العناصر تعرف باسم "عناصر التنسيق" (‪ .)Formatting Elements‬هذه العناصر تستخدم‬

‫لتطبيق تنسيق معين على النص في الصفحة‪ .‬نذكر من هذه العناصر‪:‬‬
‫‪( >b<.2‬تمثيل النص بخط عريض)‪:‬‬ ‫‪( >i<.1‬تمثيل النص بخط مائل)‪:‬‬
‫تستخدم لجعل النص يظهر بخط‬
‫تستخدم لجعل النص يظهر بخط‬
‫مائل‪ ،‬وتستخدم أحياًنا لإلشارة إلى‬
‫عريض‪ ،‬وتستخدم أحياًنا لتسليط الضوء‬
‫كلمة مهمة أو تأكيد معنى‬
‫على كلمة أو عبارة معينة‪.‬‬ ‫معين‪.‬‬
‫‪.3‬العنصر <‪(>u‬تسطير النص)‪:‬‬
‫يستخدم إلظهار نص مسّطر أو مخطوط تحته خط أفقي‪ .‬في السابق‪ ،‬كان يستخدم‬
‫عادة لتحقيق التأكيد على النص أو إلظهاره بشكل مميز‪.‬‬
‫‪( >del<.4‬تمثيل النص المحذوف)‪:‬‬
‫تستخدم لعرض نص محذوف‪ ،‬وهذا ُيظهر عادًة كخط تمت خطفه عبر النص‪ُ .‬يستخدم‬
‫عادًة في النصوص التي تم تحديثها أو تعديلها‪.‬‬
‫‪( >sup<.5‬النص الفوقي)‪:‬‬
‫تستخدم لعرض نص بشكل فوقي (مثل األرقام العلوية في األسس أو المؤشرات‬
‫العلوية)‪.‬‬
‫‪( >sub<.6‬النص السفلي)‪:‬‬
‫تستخدم لعرض نص بشكل سفلي (مثل األرقام السفلية في األسس أو المؤشرات‬
‫السفلية)‪.‬‬
‫النتيجة التي ستظهر لدينا‬
‫تاغ العنوان‬
‫تاغ العناوين‬
‫تاغات الميديا‬
‫وسم الصورة‬
‫وله عدة خصائص‪:‬‬

‫العنوان ‪src‬‬ ‫ليس له تاغ إغالق‬
‫العرض ‪width‬‬
‫االرتفاع ‪height‬‬

مشروع ياسمين - تدريب البرمجة

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

مشروع ياسمين - تدريب البرمجة

Uploaded by

Copyright:

Available Formats

‫ماهو الويب وإلى‬

‫الفرونت إند(‪)Front End‬‬ ‫‪1‬‬

‫الباك إيند(‪)Back End‬‬ ‫‪2‬‬

‫عندما نتحدث عن الفرونت إند‪ ،‬نتحدث عن المظهر والشكل الجميل‬

‫العناصر تعرف باسم "عناصر التنسيق" (‪ .)Formatting Elements‬هذه العناصر تستخدم‬

‫وله عدة خصائص‪:‬‬

You might also like