‫الجمهىرية العربية السىرية‬

‫وزارة التعليم العالي‬

‫جامعة تشرين‬

‫الكلية التطبيقية‬

‫قسم الكهرباء‬

‫المحاضرة الثانية ‪HTML‬‬

‫عناصر الروابط ‪Hyper Links‬‬

‫توفر لغة ‪ HTML‬آلية لالنتقاؿ بيف الصفحات المختمفة عبر عناصر الروابط ‪ ,Hyper Links‬و‬
‫الروابط عبارة عف نصوص أو صور تنقمؾ عند النقر عمييا مف الصفحة الحالية إلى إلى صفحة‬
‫ويب أخرى‪ ,‬تقوـ مستعرضات الويب بتمييز الروابط بعرض "يد صغيرة" كمؤشر لمفأرة عند اإلشارة‬
‫إلى أحد الروابط‪ ,‬و يتـ إنشاء الروابط بواسطة الوسـ >‪ ,<a‬و الػ ‪ a‬ىذه اختصار لػ ‪ , Anchor‬يتـ‬
‫تزويد عنصر الرابط بنص ُيعرض كمحتوى لو َّأما الموقع اليدؼ (الذي سيتـ اّلنتقاؿ إليو عند النقر‬
‫عمى الرابط) فيتـ تزويده لمواصفة ‪ href‬و التي ىي اختصار لػ ‪ ,Hyper Reference‬فممنظر‬
‫لممثاؿ التالي‪:‬‬

‫>‪<html‬‬

‫>‪<head‬‬

‫>‪<title‬‬

‫طفحخ اخزجبس ٌؼٕبطش اٌش‪ٚ‬اثؾ‬

‫>‪</title‬‬

‫>‪</head‬‬

‫ٖٗ‬
 ‫>‪<body‬‬

‫>‪</a><br /‬مايكروصىفد>"‪<a href="http://www.microsoft.com‬‬

‫>‪</a><br /‬جىجم>"‪<a href="http://www.google.com‬‬

‫>‪<a href="http://www.msn.com" target="_blank" >MSN</a‬‬

‫>‪<br /‬‬

‫>‪</a‬أول مثال>"‪<a href="firstPage.html" target="_self‬‬

‫>‪</body‬‬

‫>‪</html‬‬

‫الذي يبدو عند استعراضو بمستعرض الويب كمايمي‪:‬‬

‫الشكل ‪ : 9‬صفحة اختبار عنصر الروابط‬

‫لقد قمنا بتزويد صفحتنا بمجموعة مف عناصر الروابط التي تشير إلى بعض المواقع الشييرة و قد‬
‫األوؿ الذي قمنا بإنشائو معاً في بداية ىذا الفصؿ و‬
‫تعمدت في الرابط األخير ذكر اسـ ممؼ المثاؿ ّ‬
‫ذلؾ لتوضيح أف الروابط يمكف أف تكوف مطمقة ‪( Absolute‬كالثالثة األولى) أو نسبية ‪Relative‬‬
‫(كالرابط األخير) و يقصد بالنسبية أف الرابط المذكور يكوف عبارة عف مسار ‪ Path‬ممؼ الصفحة‬
‫اليدؼ بالنسبة لمصفحة الحالية و في حالتنا فقد كانت الصفحة اليدؼ ‪ firstPage.html‬في نفس‬
‫مجمد الصفحة الحالية ٗ‪.‬‬

‫عند النقر عمى أحد ىذه الروابط سيتـ اّلنتقاؿ إلى ال اربط ‪ URL‬المذكور في الواصفة ‪ href‬المرافقة‬
‫لعنصر الرابط الذي تـ النقر عميو‪ ,‬مف الجدير بالذكر أَّننا قمنا بتزويد بعض الروابط بالواصفة‬
‫‪ target‬و التي تحدد مكاف عرض الصفحة اليدؼ في المستعرض بمعنى ّأنيا تجيب عمى األسئمة‬
‫التالية‪:‬‬

‫ىؿ سيتـ عرض الصفحة اليدؼ في نفس الصفحة الحالية؟ (في ىذه الحالة فإف قيمة الواصفة ىي‬
‫القيمة ‪ ,)_self‬ىؿ سيتـ عرض الصفحة اليدؼ في نافذة مستعرض جديدة؟ ( في ىذه الحالة فإف‬
‫قيمة الواصفة ‪ ,)_blank‬ىؿ سيتـ عرض الصفحة اليدؼ في إطار محدد؟ (في ىذه الحالة فإف‬
‫مفصؿ ّلحقاً)‪.‬‬
‫قيمة الواصفة ىي اسـ اإلطار و سيتـ تناوؿ اإلطارات بشكؿ ّ‬

‫آخر ما يجب ذكره عف الروابط حالياً أَّنو يمكف لمرابط أف يشير إلى أي مورد ‪ Resource‬متوفر‬
‫عمى الويب و ليس فقط الصفحات‪ ,‬كما يمكف أف يشير الرابط إلى بريد إلكتروني ‪ E-Mail‬و ذلؾ‬
‫بأف نضع القيمة ‪ mailto:‬قبؿ البريد اإللكتروني الذي نريد أف نضع رابطاً لو‪ ,‬انظر المثاؿ التالي‪:‬‬

‫>‪<html‬‬

‫>‪<head‬‬

‫>‪<title‬‬

‫س‪ٚ‬اثؾ خبطخ‬

‫>‪</title‬‬

‫ٗ‬
‫يار‬ ‫يد عف المسارات‬
 ‫>‪</head‬‬

‫>‪<body‬‬

‫أمش ٕ٘ب >"‪<a href="http://www.somesite.com/files/file1.zip‬‬

‫>‪ٌ</a‬زحّ‪ ً١‬اٌٍّف‬

‫>‪<br /‬‬

‫>‪</a‬ساسٍٕ‪<a href ="mailto:maisam@gmail.com">ٟ‬‬

‫>‪</body‬‬

‫>‪</html‬‬

‫األوؿ ىو ظيور مرّبع تحميؿ الممؼ ‪ Save File Dialog‬و ما‬

‫ما سيحدث عند النقر عمى الرابط َّ‬
‫سيحدث عند النقر عمى الممؼ الثاني ىو ظيور برنامج مدير البريد اإللكتروني (مثؿ ‪Outlook‬‬
‫‪ )Express‬في وضع إرساؿ رسالة جديدة إلى البريد اإللكتروني المذكور في الرابط‪.‬‬

‫عناصر الصور ‪Images‬‬

‫توفر لغة ‪ HTML‬عنص اًر خاصاً لعرض الصور ضمف الصفحة ىذا العنصر ىو العنصر‬
‫>‪( <img/‬اختصا اًر لػ ‪ )Image‬الذي يقوـ بعرض الصورة ضمف الصفحة اعتماداً عمى مسارىا‬
‫الذي يمرر لمعنصر عبر الواصفة ‪( src‬اختصا اًر لػ ‪ ,)Source‬و كما ىو الحاؿ بالنسبة لمعنصر‬
‫فإف شكمو العاـ في الغالب‬
‫فإف العنصر >‪ّ <img/‬ل يمتمؾ أي وسـ نياية و لذلؾ ّ‬
‫الخاص >‪ّ <br/‬‬
‫يكوف >‪ ,<img src="path" /‬لنشاىد المثاؿ التالي‪:‬‬

‫>‪<html‬‬

‫>‪<head‬‬

‫>‪<title‬‬

‫طفحخ ٌؼشع ػٕبطش اٌظ‪ٛ‬س‬

‫>‪</title‬‬

‫>‪</head‬‬
 ‫>‪<body‬‬

‫>‪<img src="1.jpg" /‬‬

‫>‪" /‬انصىرج انثاويح"=‪<img src="2.jpg" alt‬‬

‫"‪" width="100px‬اٌظ‪ٛ‬سح اٌثبٌثخ"=‪<img src="1.jpg" alt‬‬

‫>‪height="50px" /‬‬

‫>‪" /‬ط‪ٛ‬سر‪ ٟ‬راد اٌّسبس اٌخبؿئ"=‪ِ" alt‬سبس خبؿئ"=‪<img src‬‬

‫>‪</body‬‬

‫>‪</html‬‬

‫و الذي يبدو عند عرضو في المستعرض كمايمي‪:‬‬

‫الشكل ‪ : 11‬صفحة اختبار لعنصر الصور‬

‫كما تالحظ فقد قاـ عنصر عرض الصور بعرض الصور ذات المسارات المذكورة في كؿ وسـ‬
‫نصية يتـ عرضيا في‬
‫>‪ ,<img/‬و مف واصفات ىذا العنصر الواصفة ‪ alt‬التي تسند إلييا قيمة ّ‬
‫حاؿ تعذر الوصوؿ إلى الصورة المذكورة في الواصفة ‪ src‬و ىذه الحالة حدثت معنا في الصورة‬
‫الرابعة و التي زودناىا بمسار خاطئ عف قصد لعرض ىذه الحالة‪ ,‬كما يمكف عرض الصورة‬
‫بمقاس محدد و ذلؾ عبر تزويد العنصر ‪ img‬بواصفتي اّلرتفاع ‪ height‬و العرض ‪ width‬و التي‬
‫تسند إلييما قيـ رقميَّة تحدد عرض و ارتفاع الصورة المعروضة بالبكسؿ(ىذا ما تعنيو ‪ px‬في القيـ‬
‫المسندة لياتيف الواصفتيف)‪.‬‬

‫ممحوظة‪ :‬عمى فرض أف صفحتنا تحتوي ٘ صور َّ‬

‫فإف عرض الصفحة بشكؿ تاـ و صحيح سيحتاج لتحميؿ ‪ٙ‬‬
‫ممفات ىي ممؼ الصفحة و ممفات الصور الخمسة و ىذا ما قد يسبب حمالً زائداً عمى موقعؾ مستقبالً في حاؿ‬
‫اإلفراط في استخداـ الصور‪.‬‬

‫الصور بدالً من نصوص الروابط‬

‫مف الشائع في مواقع الويب أف يتـ استبداؿ نصوص محتوى عناصر الروابط >‪ <a‬بالصور و ذلؾ‬
‫لتجميؿ محتوى الموقع بحيث يتـ اّلنتقاؿ لمصفحة اليدؼ لمرابط عند النقر عمى الصورة بدّلً مف‬
‫النقر عمى النص و يتـ ذلؾ بتضميف العنصر >‪ <img/‬كمحتوى لمعنصر >‪ <a‬و فيمايمي نعرض‬
‫مثاّلً بسيطاً لذلؾ‪:‬‬

‫>‪<html‬‬

‫>‪<head‬‬

‫>‪<title‬‬

‫ػشع ط‪ٛ‬سح وّحز‪ٌ ٜٛ‬شاثؾ‬

‫>‪</title‬‬

‫>‪</head‬‬

‫>‪<body‬‬

‫>"‪<a href = "mailto:maiam@gmail.com‬‬

‫>‪" /‬راصهىي"=‪<img src="myPic.jpg" alt‬‬

‫>‪</a‬‬

‫>‪</body‬‬

‫>‪</html‬‬
 ‫القوائم ‪Lists‬‬

‫توفر لغة ‪ HTML‬نوعيف مف عناصر القوائـ‪:‬‬

‫ٔ‪ -‬القوائـ غير المرتبة ‪ Unordered List‬عبر الوسـ >‪.<ul‬‬

‫ٕ‪ -‬القوائـ المرتبة ‪ Ordered List‬عبر الوسـ >‪.<ol‬‬

‫بعد أف نقوـ بتحديد نوع القائمة التي نرغب بإنشائيا نضيؼ محتواىا كمجموعة مف عناصر >‪ <li‬و‬
‫التي تعني ‪ ,List Item‬لنشاىد المثاؿ التالي و الذي يعرض َّ‬
‫كيفية إنشاء قائمة غير مرتبة بسيطة‪:‬‬

‫>‪<html‬‬

‫>‪<head‬‬

‫>‪ِ</title‬ثبي ػٍ‪ ٝ‬لبئّخ غ‪١‬ش ِشرجخ>‪<title‬‬

‫>‪</head‬‬

‫>"‪<body dir="rtl‬‬

‫>‪</p‬سٕزؼٍُ ف‪٘ ٟ‬زا اٌىزبة>‪<p‬‬

‫>‪<ul‬‬

‫>‪<li>HTML</li‬‬

‫>‪<li>HTML5</li‬‬

‫>‪<li>XHTML</li‬‬

‫>‪<li>CSS</li‬‬

‫>‪<li>CSS3</li‬‬

‫>‪</ul‬‬

‫>‪</body‬‬

‫>‪</html‬‬

‫و الذي يبدو عند عرضو في المستعرض كمايمي‪:‬‬

 ‫الشكل ‪ : 14‬مثال لقائمة غير مرتبة بسيطة‬

‫بتغيير وسمي البداية و النياية لعنصر القائمة مف >‪ <ul‬و >‪ </ul‬إلى >‪ <ol‬و >‪ </ol‬ستصبح‬
‫القائمة مرتبة بالشكؿ التالي‪:‬‬

‫الشكل ‪ : 15‬مثال عمى قائمة مرتبة بسيطة‬

‫بالطبع و كما ذكرت منذ بداية ىذا الفصؿ فإف أي عنصر مف عناصر ‪ HTML‬يمكف أف يحوي‬
‫بيف وسمي بدايتو و نيايتو أية مجموعة أخرى مف العناصر و ىذا يعني أننا نستطيع إنشاء قائمة‬
‫تحوي قوائـ فر َّ‬
‫عية كعناصر ليا‪ ,‬و المثاؿ التالي يوضح ىذه الفكرة‪:‬‬

‫>‪<html‬‬

‫>‪<head‬‬

‫>‪ِ</title‬ثبي ػٍ‪ ٝ‬لبئّخ ِؼمذح>‪<title‬‬

‫>‪</head‬‬

‫>"‪<body dir="rtl‬‬

‫>‪</p‬سٕزؼٍُ ف‪٘ ٟ‬زا اٌىزبة>‪<p‬‬

‫>‪<ol‬‬

‫>‪<li‬‬

‫‪HTML‬‬

‫>‪<ul‬‬

‫>‪</li‬انرواتط>‪<li‬‬

‫>‪</li‬انصىر>‪<li‬‬

‫انقىائم>‪<li‬‬

‫>‪<ul‬‬

‫>‪</li‬انمرذثح>‪<li‬‬

‫>‪</li‬غير انمرذثح>‪<li‬‬

‫>‪</ul‬‬

‫>‪</li‬‬

‫>‪</ul‬‬

‫>‪</li‬‬

‫>‪<li>HTML 5</li‬‬
 ‫>‪<li>XHTML</li‬‬

‫>‪<li>CSS</li‬‬

‫>‪<li>CSS 3</li‬‬

‫>‪</ol‬‬

‫>‪</body‬‬

‫>‪</html‬‬

‫يبدو المثاؿ أعاله في المستعرض كمايمي‪:‬‬

‫الشكل ‪ : 16‬مثال عمى قائمة معقدة‬

‫آخر ما يجب ذكره عف القوائـ ّأنو يمكف استخداـ الواصفة ‪ type‬لتغيير شكؿ القائمة ففي حالة‬
‫القوائـ غير المرتبة يمكف إسناد إحدى القيـ التالية إلييا‪ square :‬أو ‪ disc‬أو ‪ circle‬لوضع رمز‬
‫المربع أو القرص أو الدائرة أماـ كؿ عنصر عمى الترتيب‪ ,‬و في حالة القائمة المرتبة يمكف إسناد‬