-------- Page 1 (Lecture #6-01.jpg) --------- Faculty of Information Technology – Tripoli University مقدمة في برمجة الإنترنت Introduction to Internet Programming [ ITGS226 ] المحاضرة السادسة أستاذة المادة أ. وفاء حسين المصباحي HTML5 JS Cloud CSS3 XML flat PHP header .com footer .net 2025 ربيع -------- Page 2 (Lecture #6-02.jpg) --------- المواضيع التي سيتم دراستها في مقرر : مقدمة في برمجة الإنترنت Introduction to Internet Programming المحاضرة السادسة . المحارف والرموز الخاصة Special Characters 1 . عناصر الروابط Hyper Links . الروابط الداخلية Internal Linking . عناصر الصور Images . القوائم Lists -------- Page 3 (Lecture #6-03.jpg) --------- Special Characters المحارف والرموز الخاصة - هناك بعض المحارف والرموز التي لا يمكن عرضها في الصفحة عن طريق كتابتها بشكل مباشر مثل: الرموز المستخدمة في الرياضيات ومحارف الغرّافات وغيرها. - توفر لغة HTML آلية خاصة لعرض هذه الرموز وذلك باتباع الصيغة التالية: &value; باستبدال القيمة value بقيمة المحرف المطلوب أن يتم عرضه في مستعرض الويب وفي الجدول التالي نماذج من هذه المحارف: HTML: شيفرة الرمز < < > > ≠ ≠ ™ ™ © ©   محرف الفراغ 1 -------- Page 4 (Lecture #6-04.jpg) --------- Special Characters المحارف والرموز الخاصة : مثال - Special Characters

3 < 5 and 10 > 2 and also 3 ≠ 4 .... all rights reserved for © Mukhtar ™

2 -------- Page 5 (Lecture #6-05.jpg) --------- ( program#19.html ) عملي EXPLORER HTML LANGUAGE program#5.html program#6.html program#7.html program#8.html program#9.html program#10.html program#11.html program#12.html program#13.html program#14.html program#15.html program#16.html program#17.html program#18.html program#19.html program#19.html Special Characters

3 < 5 and 10 > 2 and also 3 ≠ 4 …. all rights reserved for © Mukhtar ™

HTML language Ln 13, Col 1 Spaces: 4 UTF-8 CRLF HTML OUTLINE TIMELINE -------- Page 6 (Lecture #6-06.jpg) --------- ( program#19.html ) عملي Special Characters 3 < 5 and 10 > 2 and also 3 ≠ 4 …. all rights reserved for © Mukhtar ™ -------- Page 7 (Lecture #6-07.jpg) --------- عناصر الروابط Hyper Links - توفر لغة HTML آلية للإنتقال بين الصفحات المختلفة عبر عناصر الروابط Hyper Links. - الروابط عبارة عن نصوص أو صور تنتقل عند النقر عليها من الصفحة الحالية إلى صفحة ويب أخرى. - تقوم مستعرضات الويب بتمييز الروابط بعرض "يد صغيرة" كمؤشر للفأرة عند الإشارة إلى أحد الروابط. - يتم إنشاء الروابط بواسطة الوسم ، والـ a هذه إختصار لـ Anchor. - يتم تزويد عنصر الرابط بنص يعرض كمحتوى له أما الموقع الهدف ( الذي سيتم الإنتقال إليه عند النقر على الرابط) فيتم تزويده بالخاصية href والتي هي إختصار لـ Hyper Reference. النص -------- Page 8 (Lecture #6-08.jpg) --------- عناصر الروابط Hyper Links سمات/خصائص Attributes لعناصر الروابط Hyper Links : - خاصية target : تحدد مكان عرض الصفحة ، ويحدد مكان عرض الصفحة حسب قيمة هذه الخاصية إلى : ▪ القيمة _self : عرض الصفحة الهدف في نفس الصفحة الحالية. ▪ القيمة _blank : عرض الصفحة الهدف في نافذة مستعرض جديدة. 6 -------- Page 9 (Lecture #6-09.jpg) --------- Hyper Links عناصر الروابط : مثال - Hyper Links Microsoft
Google
program#1 7 -------- Page 10 (Lecture #6-10.jpg) --------- ( program#20.html ) عملي EXPLORER HTML LANGUAGE program#6.html program#7.html program#8.html program#9.html program#10.html program#11.html program#12.html program#13.html program#14.html program#15.html program#16.html program#17.html program#18.html program#19.html program#20.html OUTLINE TIMELINE program#20.html program#20.html Hyper Links Microsoft
Google
program#1 Ln 14, Col 1 Spaces: 4 UTF-8 CRLF HTML 8 -------- Page 11 (Lecture #6-11.jpg) --------- ( program#20.html ) عملي Hyper Links file:///C:/Users/Z10/Desktop/HTML%20language/program%2320.html Microsoft Google program# Microsoft - التطبيقات الكل Microsoft Hyper Links Google www.google.com تسجيل الدخول صور Gmail Google بحث ضربة حظ English Italiano Google متوفر باللغة: محرك بحث Google ليبيا حول الإعلانات الأعمال الخصوصية الأحكام آلية عمل "Google بحث" كيف تعمل إعدادات 9 -------- Page 12 (Lecture #6-12.jpg) --------- Internal Linking الروابط الداخلية - أحياناً يكون المحتوى الموجود ضمن صفحة معينة كبيراً إلى حد ما وفي حالة مثل هذه يصبح الإنتقال إلى فقرة محددة ضمن الصفحة عملية تستغرق بعض الجهد والوقت. - توفر لغة HTML آلية للإنتقال إلى جزء محدد من الصفحة مباشرة عبر ما يعرف بالروابط الداخلية Internal Links والتي يتم تحقيقها عبر استخدام وسم الرابط a> وتمرير معرف العنصر identifier المراد الإنتقال إليه كقيمة لخاصية href بالشكل التالي: إنتقل إلى العنصر ذو المعرف id حيث id هو معرف العنصر المراد الإنتقال إليه ضمن الصفحة. 10 -------- Page 13 (Lecture #6-13.jpg) --------- Internal Linking الروابط الداخلية مثال : HTML Paragraphs WEB BROWSER

WEB PAGE:

a single document on a website, usually consisting of HTML document and any items that are displayed within that document, such as inline images or style sheets.

HOME PAGE:

The entry page for a website, which can link to additional pages on the same website or pages on other sites.

WEBSITE:

a collection of one or more web pages linked together.

WEB BROWSER:

is an application which is used to view pages and navigate the World Wide Web. Popular examples: Firefox, Internet Explorer, Safari, Chrome, and Opera.

11 -------- Page 14 (Lecture #6-14.jpg) --------- ( program#31.html ) عملي EXPLORER HTML LANGUAGE program#17.html program#18.html program#19.html program#20.html program#21.html program#22.html program#23.html program#24.html program#25.html program#26.html program#27.html program#28.html program#29.html program#30.html program#31.html program#31.html x program#31.html > html > body > p 1 2 3 HTML Paragraphs 4 5 6 7 WEB BROWSER 8

WEB PAGE:

9

a single document on a website, usually consisting of 10 document and any items that are displayed within that 11 images or style sheets.

12

HOME PAGE:

13

The entry page for a website, which can link to additi 14 on the same website or pages on other sites.

15

WEBSITE:

16

a collection of one or more web pages linked together. 17

WEB BROWSER:

18

is an application which is used to view pages and navi 19 in the World Wide Web. Popular examples: Firefox, Inter 20 Chrome, and Opera.

OUTLINE TIMELINE Ln 20, Col 24 Spaces: 4 UTF-8 CRLF HTML -------- Page 15 (Lecture #6-15.jpg) --------- ( program#31.html ) عملي WEB BROWSER WEB PAGE: a single document on a website, usually consisting of HTML document and any items that are displayed within that document, such as inline images or style sheets. HOME PAGE: The entry page for a website, which can link to additional pages on the same website or pages on other sites. WEBSITE: a collection of one or more web pages linked together. WEB BROWSER: is an application which is used to view pages and navigate the World Wide Web. Popular examples: Firefox, Internet Explorer, Safari, Chrome, and Opera. 13 -------- Page 16 (Lecture #6-16.jpg) --------- Images عناصر الصور • وسم أو : يستخدم لعرض الصور ضمن الصفحة اعتمادا على مسارها الذي يمرر للعنصر عبر الخاصية src ( اختصارا لـ Source )، الشكل العام: – هو Single Tag. – هو عنصر inline. – هو عنصر فاض Empty element. -------- Page 17 (Lecture #6-17.jpg) --------- عناصر الصور Images سمات/خصائص Attributes لعناصر الصور Images : - خاصية alt : تحدد مكان عرض الصفحة ، ويحدد مكان عرض الصفحة حسب قيمة هذه الخاصية، الإستنداد إليها قيمة نصية يتم عرضها في حال تعذر الوصول إلى الصورة المذكورة في الواصفة src. - خاصية width وخاصية height : عرض الصورة بمقياس محدد. - خاصية border : لإضافة إطار للصورة. - خاصية title : وهي خاصية عامة global attribute يمكن وضعها مع العديد من الوسوم tags ، وهي تظهر نص عندما نضع مؤشر الماوس على الصورة. 15 -------- Page 18 (Lecture #6-18.jpg) --------- Images عناصر الصور مثال (1) : Images 16 -------- Page 19 (Lecture #6-19.jpg) --------- ( program#21.html ) عملي EXPLORER HTML LANGUAGE program#9.html program#10.html program#11.html program#12.html program#13.html program#14.html program#15.html program#16.html program#17.html program#18.html program#19.html program#20.html program#21.html program#22.html Unconfirmed 78443.crdownload program#21.html program#21.html Images OUTLINE TIMELINE Ln 10, Col 1 Spaces: 4 UTF-8 CRLF HTML -------- Page 20 (Lecture #6-20.jpg) --------- ( program#21.html ) عملي Images file:///C:/Users/Z10/Desktop/HTML%20language/program%2321.html Widgets 18 -------- Page 21 (Lecture #6-21.jpg) --------- عناصر الصور Images مثال: (2) Images Picture 2 Picture 2 Picture 3 مسار خاطى 19 -------- Page 22 (Lecture #6-22.jpg) --------- ( program#22.html ) عملي EXPLORER HTML LANGUAGE program#14.html program#15.html program#16.html program#17.html program#18.html program#19.html program#20.html program#21.html program#22.html program#23.html program#24.html program#25.html program#26.html program#27.html program#28.html OUTLINE TIMELINE program#22.html program#22.html > 1 2 3 Images 4 5 6 7 Picture 2 8 Picture 2 10 Picture 3 12 13 Ln 14, Col 1 Spaces: 4 UTF-8 CRLF HTML 20 -------- Page 23 (Lecture #6-23.jpg) --------- عملي ( program#22.html ) Images file:///C:/Users/Z10/Desktop/HTML%20language/program%2322.html my picture © Amine Mouelhi صور لمسلسل الخلافلي؟ 21 -------- Page 24 (Lecture #6-24.jpg) --------- Images عناصر الصور مثال (3) : الصورة بدلا من نصوص الروابط : ويتم ذلك بتضمين العنصر كمحتوى للعنصر : Images Picture 3 22 -------- Page 25 (Lecture #6-25.jpg) --------- ( program#23.html ) عملي EXPLORER HTML LANGUAGE program#9.html program#10.html program#11.html program#12.html program#13.html program#14.html program#15.html program#16.html program#17.html program#18.html program#19.html program#20.html program#21.html program#23.html OUTLINE TIMELINE program#23.html x program#23.html > Images HTML language Ln 11, Col 1 Spaces: 4 UTF-8 CRLF HTML 23 0 Δ 0 -------- Page 26 (Lecture #6-26.jpg) --------- [ERROR: Failed to upload image] -------- Page 27 (Lecture #6-27.jpg) --------- [ERROR: Failed to upload image] -------- Page 28 (Lecture #6-28.jpg) --------- القوائم Lists مثال (1): القوائم الغير مرتبة Unordered List نستخدم الوسم