‫‪#4‬‬

‫كورس تصميم الويب – لغة الترميز ‪html‬‬

‫‪Web Design – html Course‬‬

‫الدرس ‪ – 4‬الفقرات والعنوانين والتعليقات‬

‫شرح وإعداد ‪ /‬محمد ماهر عبد السالم‬

 ‫الفقرات النصية بلغة ‪html‬‬
‫• هدفنا في الدرس دا هو معرفة كيفية عرض النصوص في صفحة الويب الخاصة بنا وهذا ما‬
‫سنقوم به باستخدام أحد هذين الوسمين (‪ )2 tags‬إما وسم الفقرة أو ‪ paragraph‬ويكتب‬
‫هكذا >‪ <p> </p‬ويكتب بينهما النص المراد عرضه على صفحات الويب ويكتب النص‬
‫ا‬
‫كامال مع حذف أي مسافات زائدة تلقائياا ووضعه في صف واحد حتى نهاية الشاشة‬ ‫فيه‬
‫وبعدها ينزل لصف آخر وهكذا‬

‫• ويمكن استخدام الوسم اآلتي لكتابة الفقرات بالشكل الذي يكتبه المبرمج في الكود بنفس عدد‬
‫األسطر ونفس الفراغات وغيره وهو الوسم >‪ <pre> </pre‬وهو اختصار‬
‫‪ preformatted text‬يعني نص سبق وأن تم تنسيقه فبيعرضه كما هو على صفحة الويب‬

‫• يمكن أن ننزل لسطر جديد وننهي السطر الحالي بوضع وسم أو ‪ tag‬اسمه ‪ break‬أو‬
‫اختصار يكتب >‪<br‬‬
‫‪1‬‬
 ‫• كما يمكنك أن ترسم خ ا‬
‫طا أفقياا بعرض الشاشة باستخدام الوسم >‪ <hr‬وهو اختصار كلمة‬
‫‪ horizontal rule‬أي مسطر أفقية‬

‫• لو بتستخدم الوسم >‪ <p> </p‬لكتابة فقرة نصية وعايز تحط أكتر من مسافة فاصلة من‬
‫غير ما يتحذفوا تقدر تكتب الكلمة دي واللي معناها مسافة فاصلة واحدة ‪&nbsp‬‬

‫• في األمثلة القادمة سترى تطبيقات لكل ما قولناه والزم تطبق أنت كمان بايدك كويس وكتير‬

‫‪2‬‬
 ‫العنواين والتعليقات بلغة ‪html‬‬
‫• يمكن أن تضع عنواناا أو أكثر ويكون خطه أكبر وواضح إنه عنوان للفقرة اللي وراه ا‬
‫مثال‬
‫باستخدام الوسم >‪ <h‬ولكن عندنا ست أحجام من العنواين متدرجة من األكبر لألصغر وهي‬
‫كاآلتي >‪ <h1> </h1‬لحد >‪ <h6> </h6‬وتقدر تستخدم أي واحد فيهم أو تستخدم‬
‫واحد معين أكتر من مرة عادي ولما تيجي تصمم موقع الزم تركز أوي في الكالم المكتوب‬
‫باستخدام هذا الوسم إلنه بيؤثر على ظهور صفحتك في محركات البحث‬
‫• لوضع كالم جانبي أثناء كتابة الكود بدون أن يتم تنفيذه نستخدم الوسم >‪ <!-- --‬ونكتب‬
‫الكالم بداخله وهذه التعليقات غالباا تكون بهدف إيضاح بعض األجزاء في الكود كما سبق‬
‫كثيرا في كورس ال ‪C++‬‬ ‫ا‬ ‫ورأينا‬

‫• كما يمكنك توسيط الكالم في نصف السطر باستخدام الوسم >‪<center> </center‬‬
‫‪3‬‬
 ‫المثال ‪1 -‬‬
‫• تأمل جيداا في السؤال المقابل فقد قمنا بكتابة‬
‫ثالث فقرات بثالثة عناوين ويفصل بين كل‬
‫فقرة والثانية سطور فارغة ومسطرة أفقية‬

‫‪4‬‬
‫الناتج ‪1 -‬‬

‫‪5‬‬
 ‫المثال ‪2 -‬‬
‫• في الكود المقابل قمنا بكتابة‬
‫بيانات شخصية مختصرة‬
‫وعرضها في صفحة الويب‬

‫‪6‬‬
‫الناتج ‪2 -‬‬

‫‪7‬‬
 ‫المثال ‪3 -‬‬
‫• في الكود المقابل قمنا بكتابة بيانات‬
‫شخصية مختصرة وعرضها في‬
‫صفحة الويب ولكن بطريقة ال‬
‫‪preformatted‬‬

‫‪8‬‬
‫الناتج ‪3 -‬‬

‫‪9‬‬
 ‫المثال ‪4 -‬‬
‫• في الكود المقابل قمنا بعرض‬
‫قائمة بسيطة من الطالب ولكن‬
‫بطريقة يدوية ‪...‬فيما بعد‬
‫سندرس طريقة إدراج القوائم‬
‫بشكل مباشر‬

‫‪10‬‬
‫الناتج ‪4 -‬‬

‫‪11‬‬
 ‫المثال ‪5 -‬‬
‫• تدريب فقط على استخدام عالمة‬
‫المسافة الفارغة‬

‫‪12‬‬
‫الناتج ‪5 -‬‬

‫‪13‬‬
 ‫ مكتوب‬- ‫تدريب شامل‬
• Write a code using only html to show your personal CV in a web
page, it must contain a heading with your name and a smaller one
with your job title and another smaller one with your mobile phone,
after that put a horizontal rule and below it, write your information
in 3 separated lines, put a horizontal rule and write a new heading
with the name (achievements) and put 3 of your achievements in
separated lines, put a horizontal rule and then write 3 paragraphs
about some trainings you got (put random words)

• Use suitable comments

• Make the code ordered and optimized as possible

14
 ‫كود التدريب الشامل‬
‫‪1‬‬ ‫‪2‬‬
3
‫ناتج تنفيذ التدريب الشامل‬

‫‪17‬‬
18
 ‫إلدراج نص بالشكل المناسب‬ ‫‪<p> </p> -7‬‬

‫إلدراج نص كما تم إدخاله‬ ‫‪<pre> </pre> -8‬‬

‫للنزول لسطر جديد‬ ‫‪<br> -9‬‬

‫إلضافة مسطرة أفقية‬ ‫‪<hr> -10‬‬

‫لتوسيط ما يوضع بداخلها‬ ‫‪<center> </center> -11‬‬

‫إلضافة تعليق‬ ‫‪<!-- --> -12‬‬

‫‪<h1> <h1> -13‬‬

‫لجعل النص له حجم أكبر (عنوان) ويوجد ست أحجام من ‪6 - 1‬‬
‫‪19‬‬
 ‫‪2022 / 7 / 12‬‬
‫اء‬
‫الرج ِّ‬ ‫ف على َّ‬ ‫ب الخ َْو َ‬ ‫وغ َِّل ِّ‬
‫موالك بال ت َ ِّ‬
‫ناء‬ ‫َ‬ ‫و ِّس ْر ِّل‬
‫لألوزار‬
‫ِّ‬ ‫و َج ِّد ِّد الت َّ ْوبَةَ‬
‫س ْن ِّم ْن َرحم ِّة الغَفَّ ِّ‬
‫ار‬ ‫ال تَيْأ َ َ‬
‫ش ُكورا‬ ‫و ُك ْن على آالئِّ ِّه َ‬ ‫اقتباس‬
‫صبُورا‬ ‫و ُك ْن على بَال ِّئ ِّه َ‬
‫ضاء والق َد ْر‬ ‫َىء بالقَ ِّ‬ ‫و ُك ُّل ش ٍ‬ ‫لإلمام الكبير أحمد الدردير المالكي األزهري‬
‫ع ْنهُ َمفَ ْر‬ ‫قدور فَما َ‬ ‫و ُك ُّل َم ٍ‬
‫س ِّلما ا َكي ت َ ْسلَما‬ ‫ف ُك ْن لَهُ ُم َ‬
‫سبي َل النَّا ِّسكي َن العُلَما‬ ‫واتْبَ ْع َ‬
‫ب ِّم َن األ ْغ ِّ‬
‫يار‬ ‫ص القَ ْل َ‬ ‫وخ َِّل ِّ‬
‫ار‬‫يام باأل ْس َح ِّ‬ ‫بالج ِّد وال ِّق ِّ‬ ‫ِّ‬