الدرس 13

‫‪#13‬‬
‫كورس تصميم الويب – لغة الترميز ‪html‬‬
‫‪Web Design – html Course‬‬
‫الدرس ‪ – 13‬أنواع مسارات الملفات‬
‫شرح وإعداد ‪ /‬محمد ماهر عبد السالم‬

‫موضوعات الدرس‬
‫• هندرس دلوقتي حاجة مهمة جدا وهتحتاجه بشكل‬

‫سندرس اآلتي‪:‬‬ ‫شبه أساسي في كل المشاريع اللي هتعملها تبع‬
‫• فهم المسارات النسبية‬ ‫الويب وهي إنك تعرف ازاي تنسب أي ملف‬
‫• فهم المسارات الكاملة‬ ‫للمكان الخاص بيه على الجهاز أو ازاي تعرف‬
‫• التفضيل بينهما‬ ‫المتصفح بمكان الملف دا أو الصورة أو الفيديو إلى‬
‫آخره ودا اللي هنعرفه دلوقتي‬
‫تحديد مسار الملف‬
‫• عشان تقدر تستخدم أو تعرض صورة من جهازك على صفحة الويب الزم تفهم المتصفح‬
‫ازاي يوصل لعنوان الصورة دي على جهازك عشان يقدر يستخدمها بشكل دائم واحنا نقدر‬
‫نعرفه مكان الصورة أو الملف بشكل عام بطريقة من اتنين‪ :‬إلما نقوله مكان الصورة أو‬
‫الملف بالنسبة لمكان صفحة الويب نفسها على الجهاز (الفولدر بتاعها) ودا بنسميه المسار‬
‫النسبي إلنه منسوب لشيء معين وهو مكان أو عنوان صفحة الويب‪...‬أو إننا نعرفه مكان‬
‫الصورة أو الملف على الجهاز بشكل عام بعنوان تفصيلي مش منسوب لمكان معين‪.‬‬
‫• في الصفحات الجاية هتتعلم ازاي تشتغل بكل نوع فيهم كويس بإذن هللا‬
‫تحديد مسار الملف‬
‫• يفضل تسمع الشرح في الفيديو أفضل‬
‫• عشان تكتب عنوان ملف أو صورة أو غيرها بشكل نسبي لملف المشروع‬
‫البد من اتباع االحتماالت اآلتية بشكل منطقي جدًا كاآلتي‪ :‬لو كان الملف أو‬
‫الصورة في نفس ملف المشروع نكتب مجرد اسمه واالمتداد الخاص بيه‬
‫زي ‪ – logo.jpg‬ولو كان موجود في فولدر بداخل ملف المشروع نقوم‬
‫بكتابة اسم هذا الفولدر ثم عالمة ‪ /‬ثم اسم الصورة وامتدادها وإذا كان الملف‬
‫في فولدر خارج ملف المشروع نكتب الرمز ‪ ../‬والذي يعني أن نرجع‬
‫خطوة للوراء ثم نكتب اسم المجلد الموضوعة فيه الصورة ثم نكتب اسمها‬
‫مثال – الصورة في نفس فولدر الصفحة‬
‫مثال – الصورة في فولدر داخل فولدر الصفحة‬
‫مثال – الصورة في فولدر خارج فولدر الصفحة‬
‫عرض مسار كامل‬
‫لتعريف المتصفح بأنه كود ‪html‬‬ ‫‪<!DOCTYPE html> -1‬‬
‫لكتابة جميع الكود الخاص ب ‪ html‬بداخله‬ ‫‪<html> </html> -2‬‬
‫يكتب كل ما ال يراه المستخدم في هذا القسم‬ ‫‪<head> </head> -3‬‬
‫يكتب كل ما يراه المستخدم في هذا القسم‬ ‫‪<body> </body> -4‬‬
‫لكتابة عنوان صفحة الويب باألعلى‬ ‫‪<title> </title> -5‬‬
‫لوضع ‪ icon‬لصفحة الويب‬

‫>” ‪<link rel = “icon” type = “image / x-icon” href = “ ref‬‬ ‫‪<link> -6‬‬
‫‪8‬‬
‫إلدراج نص بالشكل المناسب‬ ‫‪<p> </p> -7‬‬
‫إلدراج نص كما تم إدخاله‬ ‫‪<pre> </pre> -8‬‬
‫للنزول لسطر جديد‬ ‫‪<br> -9‬‬
‫إلضافة مسطرة أفقية‬ ‫‪<hr> -10‬‬
‫لتوسيط ما يوضع بداخلها‬ ‫‪<center> </center> -11‬‬
‫إلضافة تعليق‬ ‫‪ -12‬‬
‫‪<h1> <h1> -13‬‬

‫لجعل النص له حجم أكبر (عنوان) ويوجد ست أحجام من ‪6 - 1‬‬
‫‪9‬‬
‫لجعل النص سمي ًكا‬ ‫‪<b> </b> -14‬‬
‫لجعل النص سمي ًكا‬ ‫‪<strong> </ strong> -15‬‬
‫لجعل النص ً‬
‫مائال‬ ‫‪<i> </i> -16‬‬
‫لجعل النص ً‬
‫مائال مع تغيير نبرة الصوت (للمكفوفين)‬ ‫‪<em> </em> -17‬‬
‫لجعل النص يبدو محذوفًا‬ ‫‪<del> </del> -18‬‬
‫لجعل النص يبدو محذوفًا بوضع خط أفقي في وسطه‬ ‫‪<s> </s> -19‬‬
‫‪<u> <u> -20‬‬

‫لوضع خط تحت النص‬
‫‪10‬‬
‫لوضع خط تحت الكلمة الصحيحة بدل الكلمة المحذوفة‬ ‫‪<ins> </ins> -21‬‬
‫لجعل خلفية النص مميزة باللون األصفر‬ ‫‪<mark> </mark> -22‬‬
‫لجعل النص مرتفع ً‬

‫قليال (للرياضيات غالبًا)‬ ‫‪<sup> </sup> -23‬‬
‫لجعل النص منخفض ً‬

‫قليال (للرياضيات غالبًا)‬ ‫‪<sub> </sub> -24‬‬
‫لوضع نص مقتبس من موقع ويب آخر (بداخل الخاصية ‪)cite‬‬ ‫‪<blockquote> </blockquote> -25‬‬
‫لوضع نص بين عالمتي تنصيص‬ ‫‪<q> </q> -26‬‬
‫لوضع توضيح لنص مختصر‬ ‫‪<abbr> </abbr> -27‬‬

‫‪11‬‬
‫لوضع العناوين وطرق التواصل والوصول‬ ‫‪<address> </address> -28‬‬
‫لوضع أي نص مميز وجعله يبدو مختلفًا‬ ‫‪<cite> </cite> -29‬‬
‫لتمييز النص المعبر عن أزرار الكيبورد‬ ‫‪<kbd> </kbd> -30‬‬
‫لتمييز النص المعبر عن نواتج تنفيذ البرامج‬ ‫‪<samp> </samp> -31‬‬
‫لتمييز النص المعبر عن أسماء المتغيرات‬ ‫‪<var> </var> -32‬‬
‫لتمييز النص المعبر عن أجزاء الكود والمعادالت الرياضية‬ ‫‪<code> </code> -33‬‬
‫‪12‬‬
‫‪<a href = “url or #Reference or # ” target = “ _blank or _self ” title = “-----”> </a> -34‬‬
‫إلضافة رابط على شكل نص وإعطائه كالم يظهر عند الوقوف بالمؤشر عليه وكذلك تحديد مكان فتح الرابط‬
‫‪<button onclick = “document.location = ‘ url ’ ”> Text </button> -35‬‬
‫إلضافة رابط على شكل زر‬
‫‪<a> <img src = “image url” > </a> -36‬‬
‫إلضافة رابط على شكل صورة‬

‫إلنشاء جدول في صفحة الويب‬ ‫‪<table> </table> -37‬‬
‫لوضع عنوان للجدول‬ ‫‪<caption> </caption> -38‬‬
‫إلضافة صف أفقي للجدول‬ ‫‪<tr> </tr> -39‬‬
‫إلضافة خلية في الجدول مع اعتبارها عنوانًا‬ ‫‪<th> </th> -40‬‬
‫إلضافة خلية عادية في الجدول‬ ‫‪<td> </td> -41‬‬
‫لوضع إطار للجدول‬ ‫‪Border = “ in Pixel ” -42‬‬
‫لتحديد عرض وارتفاع الجدول بشكل يدوي‬ ‫‪Width = “ ” height= “ ” -43‬‬

‫‪14‬‬
‫لدمج خليتين بشكل أفقي‬ ‫‪Colspan = “ ” -44‬‬
‫لدمج خليتين بشكل رأسي‬ ‫‪rowspan= “ ” -45‬‬
‫إلضافة قائمة من العناصر المرتبة‬ ‫‪<ol> </ol> -46‬‬
‫إلضافة عنصر في القائمة‬ ‫‪<li> </li> -47‬‬
‫لتحديد نوع الترتيب في القائمة‬ ‫‪type = “ 1 or A or a or I or i” -48‬‬
‫لتحديد مكان البداية في الترتيب في القوائم‬ ‫‪start = “ ” -49‬‬
‫لتغيير ترتيب القائمة بداية من مكان محدد‬ ‫‪value = “ ” -50‬‬

‫‪15‬‬
‫إلضافة قائمة من العناصر الغير مرتبة‬ ‫‪<ul> </ul> -51‬‬
‫لتحديد شكل الرمز في القوائم الغير مرتبة‬ ‫‪type = “ ” -52‬‬
‫إلضافة قائمة وصفية من العناصر‬ ‫‪<dl> </dl> -53‬‬
‫إلضافة عنصر أساسي موصوف في قائمة وصفية‬ ‫‪<dt> </dt> -54‬‬
‫إلضافة عناصر للوصف في القائمة الوصفية‬ ‫‪<dd> </dd> -55‬‬
‫‪16‬‬
‫‪2022 / 7 / 28‬‬
‫جاء‬
‫ف على الر ِّ‬ ‫ب الخ َْو َ‬ ‫وغ َِّل ِّ‬
‫موالك بال ت َ ِّ‬
‫ناء‬ ‫َ‬ ‫و ِّس ْر ِّل‬
‫لألوزار‬
‫ِّ‬ ‫و َج ِّد ِّد الت ْوبَةَ‬
‫س ْن ِّم ْن َرحم ِّة الغَف ِّ‬
‫ار‬ ‫ال تَيْأ َ َ‬ ‫اقتباس‬
‫ش ُكورا‬ ‫و ُك ْن على آال ِّئ ِّه َ‬
‫صبُورا‬ ‫و ُك ْن على بَالئِّ ِّه َ‬ ‫لإلمام الكبير أحمد الدردير المالكي األزهري‬
‫ضاء والق َد ْر‬ ‫َىء بالقَ ِّ‬ ‫و ُك ُّل ش ٍ‬
‫ع ْنهُ َمفَ ْر‬‫قدور فَما َ‬ ‫و ُك ُّل َم ٍ‬
‫س ِّلما ً َكي ت َ ْسلَما‬ ‫ف ُك ْن لَهُ ُم َ‬
‫ين العُلَما‬ ‫سبي َل النا ِّسك َ‬ ‫واتْبَ ْع َ‬

الدرس 13

Uploaded by

Copyright:

Available Formats

You might also like

الدرس 13

Uploaded by

Document Information

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

الدرس 13

Uploaded by

Copyright:

Available Formats

‫‪#13‬‬

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

‫‪Web Design – html Course‬‬

‫الدرس ‪ – 13‬أنواع مسارات الملفات‬

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

‫• هندرس دلوقتي حاجة مهمة جدا وهتحتاجه بشكل‬

‫لكتابة جميع الكود الخاص ب ‪ html‬بداخله‬ ‫‪<html> </html> -2‬‬

‫يكتب كل ما ال يراه المستخدم في هذا القسم‬ ‫‪<head> </head> -3‬‬

‫يكتب كل ما يراه المستخدم في هذا القسم‬ ‫‪<body> </body> -4‬‬

‫لكتابة عنوان صفحة الويب باألعلى‬ ‫‪<title> </title> -5‬‬

‫لوضع ‪ icon‬لصفحة الويب‬

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

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

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

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

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

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

‫لجعل النص سمي ًكا‬ ‫‪<strong> </ strong> -15‬‬

‫لجعل النص يبدو محذوفًا‬ ‫‪<del> </del> -18‬‬

‫‪<u> <u> -20‬‬

‫لجعل خلفية النص مميزة باللون األصفر‬ ‫‪<mark> </mark> -22‬‬

‫لجعل النص مرتفع ً‬

‫لجعل النص منخفض ً‬

‫لوضع نص بين عالمتي تنصيص‬ ‫‪<q> </q> -26‬‬

‫لوضع توضيح لنص مختصر‬ ‫‪<abbr> </abbr> -27‬‬

‫لوضع أي نص مميز وجعله يبدو مختلفًا‬ ‫‪<cite> </cite> -29‬‬

‫لتمييز النص المعبر عن أزرار الكيبورد‬ ‫‪<kbd> </kbd> -30‬‬

‫لتمييز النص المعبر عن نواتج تنفيذ البرامج‬ ‫‪<samp> </samp> -31‬‬

‫لتمييز النص المعبر عن أسماء المتغيرات‬ ‫‪<var> </var> -32‬‬

‫‪<button onclick = “document.location = ‘ url ’ ”> Text </button> -35‬‬

‫إلضافة رابط على شكل زر‬

‫‪<a> <img src = “image url” > </a> -36‬‬

‫إلضافة رابط على شكل صورة‬

‫لوضع عنوان للجدول‬ ‫‪<caption> </caption> -38‬‬

‫إلضافة صف أفقي للجدول‬ ‫‪<tr> </tr> -39‬‬

‫إلضافة خلية في الجدول مع اعتبارها عنوانًا‬ ‫‪<th> </th> -40‬‬

‫إلضافة خلية عادية في الجدول‬ ‫‪<td> </td> -41‬‬

‫لوضع إطار للجدول‬ ‫‪Border = “ in Pixel ” -42‬‬

‫لتحديد عرض وارتفاع الجدول بشكل يدوي‬ ‫‪Width = “ ” height= “ ” -43‬‬

‫لدمج خليتين بشكل رأسي‬ ‫‪rowspan= “ ” -45‬‬

‫إلضافة قائمة من العناصر المرتبة‬ ‫‪<ol> </ol> -46‬‬

‫إلضافة عنصر في القائمة‬ ‫‪<li> </li> -47‬‬

‫لتحديد نوع الترتيب في القائمة‬ ‫‪type = “ 1 or A or a or I or i” -48‬‬

‫لتحديد مكان البداية في الترتيب في القوائم‬ ‫‪start = “ ” -49‬‬

‫لتغيير ترتيب القائمة بداية من مكان محدد‬ ‫‪value = “ ” -50‬‬

‫لتحديد شكل الرمز في القوائم الغير مرتبة‬ ‫‪type = “ ” -52‬‬

‫إلضافة قائمة وصفية من العناصر‬ ‫‪<dl> </dl> -53‬‬

‫إلضافة عنصر أساسي موصوف في قائمة وصفية‬ ‫‪<dt> </dt> -54‬‬

‫إلضافة عناصر للوصف في القائمة الوصفية‬ ‫‪<dd> </dd> -55‬‬

You might also like