الدرس 15

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

‫مو وعات الدرس‬
‫سندرس اآلت ‪:‬‬

‫• فييي اليييدرس النهيييارد هنيييت م ازاي ن يييرض‬
‫• إ افة صفحة ويب خارجية‬
‫صفحة وييب خارجيية بيداخل إ يار مو يو‬
‫بداخل إ ار‬
‫ف صفحة الويب الخاصة بنيا وكيكلس سينت م‬
‫ريقة عرض فيديو من اليوتيوب أي ا‬
‫• عرض فيديو من اليوتيوب‬
‫عرض صفحات ويب خارجية‬
‫• يمكنس عرض صفحات ويب خارجية بداخل صفحة الويب الخاصة بس وبداخل إ يار مخصيص‬
‫ل ييرض وكلييس ميين خييالل ااميير المباشيير المسييم ب ‪ inline frame‬أي إ ييار ل ت ييمين أي‬
‫لت ييمين صييفحة ويييب بييا ويكتييب اختصييارا بهييكا الشييكل >‪ <iframe> </iframe‬وي ي‬
‫الخاصييية ‪ src‬الت ي يو ييا بهييا راب ي الصييفحة المييراد عر ييها ويمكنييس أي ييا أن تحييدد ييول‬
‫وعرض اإل ار باستخدام الخاصيتين ‪ width and height‬ويمكنس و ا عنوان لإل ار لييتم‬
‫ن قا بواس ة قارئ الشاشة الكي يسيت م ا المكفوفيون (ال يظهير ال نيوان بصيور مر يية) وكليس‬
‫عن ريق الخاصية ‪ title‬وإع ا ها قيمة النص المراد ن قا‬
‫• ف الغالب يتم تحديد ول وعيرض و ريقية عيرض اإل يار باسيتخدام لغية ‪ CSS‬لبراعتهيا في‬
‫كلس ولكننا سنكتف فق بشرح أوامر ‪ HTML‬ونرجئ الباق لحين دراسة لغة ‪CSS‬‬
‫مثال ع عرض‬
‫صفحة بداخل إ ار‬
‫إ افة ك مة تش بية تفتح صفحة خارجية‬
‫• يمكنس عرض صفحات ويب خارجية بداخل صفحة الويب الخاصية‬
‫بس وج ها تظهر عند ال غ ع ي لينيس مو يو بيداخل الصيفحة‬
‫وكلس عن ريق إ افة ال ينيس إلي الينص أو هييرا بواسي ة الوسيم‬
‫>‪ <a‬وو يييا الخاصيييية ‪ target‬بداخ يييا وإع ا هيييا القيمييية التييي‬
‫سيييتكون أع يتهيييا ل خاصيييية ‪ name‬بيييداخل الوسيييم ‪ iframe‬اليييكي‬
‫يفترض أن تكون قد جهزتا لت رض الصفحة بداخ ا‬
‫إ افة فيديو من اليوتيوب‬
‫• يمكنييس عييرض أي فيييديو تريييدا ميين اليوتيييوب عيين ريييق‬
‫ال ييغ ع ي ك ميية ‪ share‬أو مشيياركة ثييم ال ييغ ع ي‬
‫ك مييية ت يييمين أو ‪ Embed‬وعنيييدها سيييي يس اليوتييييوب‬
‫نفسييا الكييود الخيياص ب ييرض الفيييديو بييداخل إ ييار ع يي‬
‫صفحة الويب الت تريدها بشكل جاهز ومباشر‬
‫• عند ال غ ع ي ك مية ت يمين أو ‪ Embed‬يظهير ليس الكيود الخياص ب يرض الفييديو‬
‫ع صفحة الوييب بيداخل إ يار ويمكنيس نسيخا مين الك مية ‪ Copy‬وو ي ا في الكيود‬
‫الخاص بصفحتس‬
‫لت ريف المتصفح بأنا كود ‪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‬‬
‫‪12‬‬
‫إلدراج نص بالشكل المناسب‬ ‫‪<p> </p> -7‬‬
‫إلدراج نص كما تم إدخالا‬ ‫‪<pre> </pre> -8‬‬
‫ل نزول لس ر جديد‬ ‫‪<br> -9‬‬
‫إل افة مس ر أفقية‬ ‫‪<hr> -10‬‬
‫لتوسي ما يو ا بداخ ها‬ ‫‪<center> </center> -11‬‬
‫إل افة ت يق‬ ‫‪ -12‬‬
‫‪<h1> <h1> -13‬‬

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

‫لو ا خ تحت النص‬
‫‪14‬‬
‫لو ا خ تحت الك مة الصحيحة بدل الك مة المحكوفة‬ ‫‪<ins> </ins> -21‬‬
‫لج ل خ فية النص مميز بال ون ااصفر‬ ‫‪<mark> </mark> -22‬‬
‫لج ل النص مرتفا ق يال (ل ريا يات هالبا)‬ ‫‪<sup> </sup> -23‬‬
‫لج ل النص منخفض ق يال (ل ريا يات هالبا)‬ ‫‪<sub> </sub> -24‬‬
‫لو ا نص مقتبس من موقا ويب آخر (بداخل الخاصية ‪)cite‬‬ ‫‪<blockquote> </blockquote> -25‬‬
‫لو ا نص بين عالمت تنصيص‬ ‫‪<q> </q> -26‬‬
‫لو ا تو يح لنص مختصر‬ ‫‪<abbr> </abbr> -27‬‬

‫‪15‬‬
‫لو ا ال ناوين و رق التواصل والوصول‬ ‫‪<address> </address> -28‬‬
‫لو ا أي نص مميز وج ا يبدو مخت فا‬ ‫‪<cite> </cite> -29‬‬
‫لتمييز النص الم بر عن أزرار الكيبورد‬ ‫‪<kbd> </kbd> -30‬‬
‫لتمييز النص الم بر عن نواتج تنفيك البرامج‬ ‫‪<samp> </samp> -31‬‬
‫لتمييز النص الم بر عن أسماء المتغيرات‬ ‫‪<var> </var> -32‬‬
‫لتمييز النص الم بر عن أجزاء الكود والم ادالت الريا ية‬ ‫‪<code> </code> -33‬‬
‫‪16‬‬
<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‬‬

‫‪18‬‬
‫لدمج خ يتين بشكل أفق‬ ‫‪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‬‬

‫‪19‬‬
‫إل افة قا مة من ال ناصر الغير مرتبة‬ ‫‪<ul> </ul> -51‬‬
‫لتحديد شكل الرمز ف القوا م الغير مرتبة‬ ‫‪type = “ ” -52‬‬
‫إل افة قا مة وصفية من ال ناصر‬ ‫‪<dl> </dl> -53‬‬
‫إل افة عنصر أساس موصوف ف قا مة وصفية‬ ‫‪<dt> </dt> -54‬‬
‫إل افة عناصر ل وصف ف القا مة الوصفية‬ ‫‪<dd> </dd> -55‬‬
‫‪20‬‬
‫إل افة فيديو لصفحة الويب‬ ‫‪<video> </video> -56‬‬
‫إل افة مق ا صوت لصفحة الويب‬ ‫‪<audio> </audio> -57‬‬
‫إل افة صور لصفحة الويب‬ ‫‪<img src= “ ”> -58‬‬
‫إل افة المصدر الخاص بالصوت والفيديو الم اف‬ ‫‪<source src= “ ”> -59‬‬
‫خاصية إل افة أزرار التحكم الخاصة بالفيديو والمق ا الصوت‬ ‫‪controls -60‬‬
‫‪21‬‬
‫إل افة إ ار بداخل صفحة الويب‬ ‫‪<iframe> </iframe> -61‬‬
‫لتحديد راب بداخل الصفحة ليفتح الصفحة الخارجية‬ ‫‪name - target -62‬‬
‫لتحديد أب اد اإل ار‬ ‫‪width and height -63‬‬
‫لو ا عنوان لإل ار يقرأ بواس ة قارئ الشاشة فق‬ ‫‪(title) in iframe -64‬‬
‫صفحتس‬ ‫الكود الخاص ب رض فيديو يوتيوب ع‬ ‫زر الحصول ع‬ ‫‪Embed -65‬‬
‫‪22‬‬
‫‪2022 / 7 / 28‬‬
‫جاء‬
‫ف ع الر ِّ‬ ‫ب الخ َْو َ‬ ‫و َ‬
‫ه ِّ ِّ‬
‫موالس بال ت َ ِّ‬
‫ناء‬ ‫َ‬ ‫و ِّس ْر ِّل‬
‫لألوزار‬
‫ِّ‬ ‫و َج ِّد ِّد الت ْوبَةَ‬
‫س ْن ِّم ْن َرحم ِّة الغَف ِّ‬
‫ار‬ ‫ال تَيْأ َ َ‬ ‫اقتباس‬
‫ش ُكورا‬ ‫و ُك ْن ع آال ِّ ِّا َ‬
‫صبُورا‬ ‫و ُك ْن ع بَال ِّ ِّا َ‬ ‫لإلمام الكبير أحمد الدردير المالكي األزهري‬
‫اء والق َد ْر‬ ‫ش ٍء بالقَ ِّ‬ ‫و ُك ُّل َ‬
‫ع ْناُ َمفَ ْر‬‫قدور فَما َ‬ ‫و ُك ُّل َم ٍ‬
‫س ِّما َك ت َ ْس َما‬ ‫ف ُك ْن لَاُ ُم َ‬
‫ين ال ُ َما‬ ‫سبي َل النا ِّسك َ‬ ‫واتْبَ ْا َ‬

الدرس 15

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

الدرس 15

Uploaded by

Copyright:

Available Formats

‫‪#15‬‬

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

‫‪Web Design – html Course‬‬

‫الدرس ‪ – 15‬عرض الصفحات الخارجية بداخل صفحة الويب‬

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

‫سندرس اآلت ‪:‬‬

‫لكتابة جميا الكود الخاص ب ‪ 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‬‬

‫لج ل النص ما ال‬ ‫‪<i> </i> -16‬‬

‫لج ل النص ما ال ما تغيير نبر الصوت (ل مكفوفين)‬ ‫‪<em> </em> -17‬‬

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

‫لج ل النص يبدو محكوفا بو ا خ أفق ف وس ا‬ ‫‪<s> </s> -19‬‬

‫‪<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‬‬

‫إل افة مق ا صوت لصفحة الويب‬ ‫‪<audio> </audio> -57‬‬

‫إل افة صور لصفحة الويب‬ ‫‪<img src= “ ”> -58‬‬

‫لتحديد أب اد اإل ار‬ ‫‪width and height -63‬‬

‫صفحتس‬ ‫الكود الخاص ب رض فيديو يوتيوب ع‬ ‫زر الحصول ع‬ ‫‪Embed -65‬‬

You might also like