| |
|
| | -------- 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 المحارف والرموز الخاصة
|
| |
|
| | : مثال -
|
| |
|
| | <html lang="en">
|
| | <head>
|
| | <title> Special Characters </title>
|
| | <meta charset='utf-8'>
|
| | </head>
|
| | <body>
|
| | <p>
|
| | 3 < 5 and 10 > 2 and also 3 ≠ 4 ....
|
| | all rights reserved for © Mukhtar ™
|
| | </p>
|
| | </body>
|
| | </html>
|
| |
|
| | 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
|
| |
|
| | <html lang="en">
|
| | <head>
|
| | <title> Special Characters </title>
|
| | <meta charset='utf-8'>
|
| | </head>
|
| | <body>
|
| | <p>
|
| | 3 < 5 and 10 > 2 and also 3 ≠ 4 ….
|
| | all rights reserved for © Mukhtar ™
|
| | </p>
|
| | </body>
|
| | </html>
|
| |
|
| | 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> ، والـ a هذه إختصار لـ Anchor.
|
| | - يتم تزويد عنصر الرابط بنص يعرض كمحتوى له أما الموقع الهدف ( الذي سيتم الإنتقال إليه عند النقر على الرابط) فيتم تزويده بالخاصية href والتي هي إختصار لـ Hyper Reference.
|
| |
|
| | <a href="URL الرابط"> النص </a>
|
| |
|
| | -------- Page 8 (Lecture #6-08.jpg) ---------
|
| | عناصر الروابط Hyper Links
|
| |
|
| | سمات/خصائص Attributes لعناصر الروابط Hyper Links :
|
| |
|
| | - خاصية target : تحدد مكان عرض الصفحة ، ويحدد مكان عرض الصفحة حسب قيمة هذه الخاصية إلى :
|
| |
|
| | ▪ القيمة _self : عرض الصفحة الهدف في نفس الصفحة الحالية.
|
| |
|
| | ▪ القيمة _blank : عرض الصفحة الهدف في نافذة مستعرض جديدة.
|
| |
|
| | 6
|
| |
|
| | -------- Page 9 (Lecture #6-09.jpg) ---------
|
| | Hyper Links عناصر الروابط
|
| |
|
| | : مثال -
|
| |
|
| | <html lang="en">
|
| | <head>
|
| | <title> Hyper Links </title>
|
| | <meta charset='utf-8'>
|
| | </head>
|
| | <body>
|
| | <a href=“http://www.Microsoft.com” > Microsoft </a>
|
| | <br/>
|
| | <a href=“http://www.google.com” target=“_blank”> Google </a>
|
| | <br/>
|
| | <a href=“program#1.html” target=“_self”> program#1 </a>
|
| | </body>
|
| | </html>
|
| |
|
| | 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
|
| |
|
| | <html lang="en">
|
| | <head>
|
| | <title> Hyper Links </title>
|
| | <meta charset='utf-8'>
|
| | </head>
|
| | <body>
|
| | <a href="http://www.Microsoft.com" > Microsoft </a>
|
| | <br/>
|
| | <a href="http://www.google.com" target="_blank"> Google
|
| | <br/>
|
| | <a href="program#1.html" target="_self"> program#1 </a>
|
| | </body>
|
| | </html>
|
| |
|
| | 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 بالشكل التالي:
|
| |
|
| | </a> إنتقل إلى العنصر ذو المعرف id <a href="#id">
|
| |
|
| | حيث id هو معرف العنصر المراد الإنتقال إليه ضمن الصفحة.
|
| |
|
| | 10
|
| |
|
| | -------- Page 13 (Lecture #6-13.jpg) ---------
|
| | Internal Linking الروابط الداخلية
|
| |
|
| | مثال :
|
| |
|
| | <html lang="en">
|
| | <head>
|
| | <title> HTML Paragraphs </title>
|
| | <meta charset='utf-8'>
|
| | </head>
|
| | <body>
|
| | <a href="#para4"> WEB BROWSER </a>
|
| | <h1> WEB PAGE: </h1>
|
| | <p> 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. </p>
|
| | <h1> HOME PAGE: </h1>
|
| | <p> The entry page for a website, which can link to additional pages
|
| | on the same website or pages on other sites. </p>
|
| | <h1> WEBSITE: </h1>
|
| | <p> a collection of one or more web pages linked together. </p>
|
| | <h1 id="#para4"> WEB BROWSER: </h1>
|
| | <p> is an application which is used to view pages and navigate
|
| | the World Wide Web. Popular examples: Firefox, Internet Explorer, Safari,
|
| | Chrome, and Opera. </p>
|
| | </body>
|
| | </html>
|
| |
|
| | 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 <html lang="en">
|
| | 2 <head>
|
| | 3 <title> HTML Paragraphs </title>
|
| | 4 <meta charset='utf-8'>
|
| | 5 </head>
|
| | 6 <body>
|
| | 7 <a href="#para4" > WEB BROWSER </a>
|
| | 8 <h1> WEB PAGE: </h1>
|
| | 9 <p> a single document on a website, usually consisting of
|
| | 10 document and any items that are displayed within that
|
| | 11 images or style sheets. </p>
|
| | 12 <h1> HOME PAGE: </h1>
|
| | 13 <p> The entry page for a website, which can link to additi
|
| | 14 on the same website or pages on other sites. </p>
|
| | 15 <h1> WEBSITE: </h1>
|
| | 16 <p> a collection of one or more web pages linked together.
|
| | 17 <h1 id="#para4" > WEB BROWSER: </h1>
|
| | 18 <p> 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. </p>
|
| |
|
| | 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 عناصر الصور
|
| |
|
| | • وسم <img> أو <img/> : يستخدم لعرض الصور ضمن الصفحة اعتمادا على مسارها الذي يمرر للعنصر عبر الخاصية src ( اختصارا لـ Source )، الشكل العام:
|
| |
|
| | <img src="path"/>
|
| |
|
| | – هو 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) :
|
| |
|
| | <html lang="en">
|
| | <head>
|
| | <title> Images </title>
|
| | <meta charset='utf-8'>
|
| | </head>
|
| | <body>
|
| | <img src="myPic.jpg"/>
|
| | </body>
|
| | </html>
|
| |
|
| | 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
|
| |
|
| | <html lang="en">
|
| | <head>
|
| | <title> Images </title>
|
| | <meta charset='utf-8'>
|
| | </head>
|
| | <body>
|
| | <img src="myPic.jpg"/>
|
| | </body>
|
| | </html>
|
| |
|
| | 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)
|
| |
|
| | <html lang="en">
|
| | <head>
|
| | <title> Images </title>
|
| | <meta charset='utf-8'>
|
| | </head>
|
| | <body>
|
| | <img src="myPic2.jpg" alt="Picture 2" title="my picture" />
|
| | <img src="myPic2.jpg" alt="Picture 2" width="100px" height="50px" border="5" />
|
| | <img src="myPic.jpg" alt="Picture 3" width="100px" height="50px"/>
|
| | <img src="صورة المسار الخاطى" alt="مسار خاطى"/>
|
| | </body>
|
| | </html>
|
| |
|
| | 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 <html lang="en">
|
| | 2 <head>
|
| | 3 <title> Images </title>
|
| | 4 <meta charset='utf-8'>
|
| | 5 </head>
|
| | 6 <body>
|
| | 7 <img src="myPic2.jpg" alt="Picture 2" title="my picture"/>
|
| | 8 <img src="myPic2.jpg" alt="Picture 2"
|
| | 9 width="100px" height="50px" border="5"/>
|
| | 10 <img src="myPic.jpg" alt="Picture 3" width="100px" height=
|
| | 11 <img src= alt=" صورة المسار الخاطئ "/>
|
| | 12 </body>
|
| | 13 </html>
|
| |
|
| | 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) : الصورة بدلا من نصوص الروابط : ويتم ذلك بتضمين العنصر <img/> كمحتوى للعنصر <a> :
|
| |
|
| | <html lang="en">
|
| | <head>
|
| | <title> Images </title>
|
| | <meta charset='utf-8'>
|
| | </head>
|
| | <body>
|
| | <a href="http://www.google.com"> <img src="myPic3.png" alt="Picture 3"
|
| | width="100px" height="50px"/> </a>
|
| | </body>
|
| | </html>
|
| |
|
| | 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 >
|
| |
|
| | <!html lang="en">
|
| | <head>
|
| | <title> Images </title>
|
| | <meta charset='utf-8'>
|
| | </head>
|
| | <body>
|
| | <a href="http://www.google.com"> <img src="myPic3.png" alt=""
|
| | width="100px" height="50px"/> </a>
|
| | </body>
|
| | </html>
|
| |
|
| | 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 نستخدم الوسم <ul> :
|
| |
|
| | <html lang="en">
|
| | <head>
|
| | <title> Lists </title>
|
| | <meta charset='utf-8'>
|
| | </head>
|
| | <body>
|
| | <ul>
|
| | <li>HTML</li>
|
| | <li>HTML5</li>
|
| | <li>XHTML</li>
|
| | <li>CSS</li>
|
| | <li>CSS3</li>
|
| | </ul>
|
| | </body>
|
| | </html>
|
| |
|
| | 26
|
| |
|
| | -------- Page 29 (Lecture #6-29.jpg) ---------
|
| | عملي ( program#24.html )
|
| |
|
| | EXPLORER
|
| | HTML LANGUAGE
|
| | 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
|
| | program#23.html
|
| | program#24.html
|
| |
|
| | program#24.html x
|
| |
|
| | program#24.html > html > head > meta
|
| |
|
| | 1 <html lang="en">
|
| | 2 <head>
|
| | 3 <title> Lists </title>
|
| | 4 <meta charset='utf-8'>
|
| | 5 </head>
|
| | 6 <body>
|
| | 7 <ul>
|
| | 8 <li>HTML</li>
|
| | 9 <li>HTML5</li>
|
| | 10 <li>XHTML</li>
|
| | 11 <li>CSS</li>
|
| | 12 <li>CSS3</li>
|
| | 13 </ul>
|
| | 14 </body>
|
| | 15 </html>
|
| |
|
| | OUTLINE
|
| | TIMELINE
|
| |
|
| | 0 0 0
|
| |
|
| | Ln 4, Col 31 Spaces: 4 UTF-8 CRLF HTML
|
| |
|
| | -------- Page 30 (Lecture #6-30.jpg) ---------
|
| | ( program#24.html ) عملي
|
| |
|
| | Lists
|
| |
|
| | file:///C:/Users/Z10/Desktop/HTML%20language/program%2324.h
|
| |
|
| | • HTML
|
| | • HTML5
|
| | • XHTML
|
| | • CSS
|
| | • CSS3
|
| |
|
| | 28
|
| |
|
| | -------- Page 31 (Lecture #6-31.jpg) ---------
|
| | القوائم Lists
|
| |
|
| | مثال: (2) القوائم المرتبة ordered List نستخدم الوسم: <ol>
|
| |
|
| | <html lang="en">
|
| | <head>
|
| | <title> Lists </title>
|
| | <meta charset='utf-8'>
|
| | </head>
|
| | <body>
|
| | <ol>
|
| | <li>HTML</li>
|
| | <li>HTML5</li>
|
| | <li>XHTML</li>
|
| | <li>CSS</li>
|
| | <li>CSS3</li>
|
| | </ol>
|
| | </body>
|
| | </html>
|
| |
|
| | 29
|
| |
|
| | -------- Page 32 (Lecture #6-32.jpg) ---------
|
| | ( program#25.html ) عملي
|
| |
|
| | EXPLORER
|
| |
|
| | HTML LANGUAGE
|
| | 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
|
| | program#23.html
|
| | program#24.html
|
| | program#25.html
|
| |
|
| | program#25.html
|
| |
|
| | program#25.html > html > body > ol
|
| |
|
| | HTML language
|
| |
|
| | <html lang="en">
|
| | <head>
|
| | <title> Lists </title>
|
| | <meta charset='utf-8'>
|
| | </head>
|
| | <body>
|
| | <ol>
|
| | <li>HTML</li>
|
| | <li>HTML5</li>
|
| | <li>XHTML</li>
|
| | <li>CSS</li>
|
| | <li>CSS3</li>
|
| | </ol>
|
| | </body>
|
| | </html>
|
| |
|
| | OUTLINE
|
| | TIMELINE
|
| |
|
| | Ln 11, Col 16 Spaces: 4 UTF-8 CRLF HTML
|
| | 0 ⚠️ 0 ⓘ 0
|
| |
|
| | -------- Page 33 (Lecture #6-33.jpg) ---------
|
| | عملي ( program#25.html )
|
| |
|
| | Lists
|
| | file:///C:/Users/Z10/Desktop/HTML%20language/program%2325.h
|
| |
|
| | 1. HTML
|
| | 2. HTML5
|
| | 3. XHTML
|
| | 4. CSS
|
| | 5. CSS3
|
| |
|
| | 31
|
| |
|
| | -------- Page 34 (Lecture #6-34.jpg) ---------
|
| | القوائم Lists
|
| |
|
| | سمات/خصائص Attributes للقوائم Lists :
|
| |
|
| | - خاصية type : لتغيير شكل القائمة :
|
| |
|
| | 1. في حالة القوائم غير المرتبة يمكن إسناد إحدى القيم التالية إليها: square أو disc أو circle لوضع رمز المربع أو القرص أو الدائرة أمام كل عنصر على الترتيب.
|
| |
|
| | 2. في حالة القائمة المرتبة يمكن إسناد إحدى القيم التالية إليها: 1 أو A أو a أو I أو i لتحويل الترقيم إلى ترقيم بأرقام عربية أو أحرف إنجليزية كبيرة أو أحرف إنجليزية صغيرة أو ترقيم بأرقام لاتينية كبيرة أو صغيرة.
|
| |
|
| | - خاصية reversed : لعكس الترتيب من الكبير إلى الصغير.
|
| |
|
| | - خاصية start : لتحديد البداية.
|
| |
|
| | 32
|
| |
|
| | -------- Page 35 (Lecture #6-35.jpg) ---------
|
| | Lists القوائم
|
| |
|
| | مثال (3):
|
| |
|
| | <html lang="en">
|
| | <head>
|
| | <title> Lists </title>
|
| | <meta charset='utf-8'>
|
| | </head>
|
| | <body>
|
| | <ol type=“A”>
|
| | <li>HTML</li>
|
| | <li>HTML5</li>
|
| | <li>XHTML</li>
|
| | <li>CSS</li>
|
| | <li>CSS3</li>
|
| | </ol>
|
| | </body>
|
| | </html>
|
| |
|
| | 33
|
| |
|
| | -------- Page 36 (Lecture #6-36.jpg) ---------
|
| | عملي ( program#26.html )
|
| |
|
| | EXPLORER
|
| | HTML LANGUAGE
|
| | 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
|
| | program#23.html
|
| | program#24.html
|
| | program#25.html
|
| | program#26.html
|
| |
|
| | program#26.html
|
| |
|
| | HTML language
|
| |
|
| | <html lang="en">
|
| | <head>
|
| | <title> Lists </title>
|
| | <meta charset='utf-8'>
|
| | </head>
|
| | <body>
|
| | <ol type="A">
|
| | <li>HTML</li>
|
| | <li>HTML5</li>
|
| | <li>XHTML</li>
|
| | <li>CSS</li>
|
| | <li>CSS3</li>
|
| | </ol>
|
| | </body>
|
| | </html>
|
| |
|
| | OUTLINE
|
| | TIMELINE
|
| |
|
| | Ln 16, Col 1 Spaces: 4 UTF-8 CRLF HTML
|
| |
|
| | 34
|
| |
|
| | -------- Page 37 (Lecture #6-37.jpg) ---------
|
| | [ERROR: Failed to upload image]
|
| |
|
| | -------- Page 38 (Lecture #6-38.jpg) ---------
|
| | Lists القوائم
|
| |
|
| | مثال (4) :
|
| |
|
| | <html lang="en">
|
| | <head>
|
| | <title> Lists </title>
|
| | <meta charset='utf-8'>
|
| | </head>
|
| | <body>
|
| |
|
| | <ol reversed>
|
| | <li>HTML</li>
|
| | <li>HTML5</li>
|
| | <li>XHTML</li>
|
| | <li>CSS</li>
|
| | <li>CSS3</li>
|
| | </ol>
|
| |
|
| | </body>
|
| | </html>
|
| |
|
| | 36
|
| |
|
| | -------- Page 39 (Lecture #6-39.jpg) ---------
|
| | ( program#29.html ) عملي
|
| |
|
| | EXPLORER
|
| |
|
| | HTML LANGUAGE
|
| | 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
|
| | program#29.html
|
| |
|
| | OUTLINE
|
| | TIMELINE
|
| |
|
| | program#29.html ×
|
| | program#29.html > html > body > ol > li
|
| |
|
| | 1 <!html lang="en">
|
| | 2 <head>
|
| | 3 <title> Lists </title>
|
| | 4 <meta charset='utf-8'>
|
| | 5 </head>
|
| | 6 <body>
|
| | 7 <ol reversed>
|
| | 8 <li>HTML</li>
|
| | 9 <li>HTML5</li>
|
| | 10 <li>XHTML</li>
|
| | 11 <li>CSS</li>
|
| | 12 <li>CSS3</li>
|
| | 13 </ol>
|
| | 14 </body>
|
| | 15 </html>
|
| |
|
| | Ln 9, Col 23 Spaces: 4 UTF-8 CRLF HTML
|
| |
|
| | 37
|
| |
|
| | -------- Page 40 (Lecture #6-40.jpg) ---------
|
| | ( program#29.html ) عملي
|
| |
|
| | ◦ Lists
|
| |
|
| | 5. HTML
|
| | 4. HTML5
|
| | 3. XHTML
|
| | 2. CSS
|
| | 1. CSS3
|
| |
|
| | 38
|
| |
|
| | -------- Page 41 (Lecture #6-41.jpg) ---------
|
| | القوائم Lists
|
| |
|
| | مثال (5):
|
| |
|
| | <html lang="en">
|
| | <head>
|
| | <title> Lists </title>
|
| | <meta charset='utf-8'>
|
| | </head>
|
| | <body>
|
| |
|
| | <ol start="40">
|
| | <li>HTML</li>
|
| | <li>HTML5</li>
|
| | <li>XHTML</li>
|
| | <li>CSS</li>
|
| | <li>CSS3</li>
|
| | </ol>
|
| |
|
| | </body>
|
| | </html>
|
| |
|
| | 39
|
| |
|
| | -------- Page 42 (Lecture #6-42.jpg) ---------
|
| | عملي ( program#30.html )
|
| |
|
| | EXPLORER
|
| | HTML LANGUAGE
|
| | 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
|
| | program#29.html
|
| | program#30.html
|
| |
|
| | program#30.html x
|
| | program#30.html >
|
| |
|
| | <html lang="en">
|
| | <head>
|
| | <title> Lists </title>
|
| | <meta charset='utf-8'>
|
| | </head>
|
| | <body>
|
| | <ol start="40">
|
| | <li>HTML</li>
|
| | <li>HTML5</li>
|
| | <li>XHTML</li>
|
| | <li>CSS</li>
|
| | <li>CSS3</li>
|
| | </ol>
|
| | </body>
|
| | </html>
|
| |
|
| | OUTLINE
|
| | TIMELINE
|
| |
|
| | Ln 16, Col 1 Spaces: 4 UTF-8 CRLF HTML
|
| |
|
| | 40
|
| |
|
| | -------- Page 43 (Lecture #6-43.jpg) ---------
|
| | ( program#30.html ) عملي
|
| |
|
| | Lists
|
| |
|
| | file:///C:/Users/Z10/Desktop/HTML%20language/program%2330.h
|
| |
|
| | 40. HTML
|
| | 41. HTML5
|
| | 42. XHTML
|
| | 43. CSS
|
| | 44. CSS3
|
| |
|
| | 41
|
| |
|
| | -------- Page 44 (Lecture #6-44.jpg) ---------
|
| | القوائم Lists
|
| |
|
| | مثال (6):
|
| |
|
| | <html lang="en">
|
| | <head>
|
| | <title> Lists </title>
|
| | <meta charset='utf-8'>
|
| | </head>
|
| | <body>
|
| |
|
| | <ul type="circle">
|
| | <li>HTML</li>
|
| | <li>HTML5</li>
|
| | <li>XHTML</li>
|
| | <li>CSS</li>
|
| | <li>CSS3</li>
|
| | </ul>
|
| |
|
| | </body>
|
| | </html>
|
| |
|
| | 42
|
| |
|
| | -------- Page 45 (Lecture #6-45.jpg) ---------
|
| | ( program#27.html ) عملي
|
| |
|
| | EXPLORER
|
| | HTML LANGUAGE
|
| | 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
|
| | program#23.html
|
| | program#24.html
|
| | program#25.html
|
| | program#26.html
|
| | program#27.html
|
| |
|
| | OUTLINE
|
| | TIMELINE
|
| |
|
| | program#27.html
|
| |
|
| | program#27.html ×
|
| |
|
| | <html lang="en">
|
| | <head>
|
| | <title> Lists </title>
|
| | <meta charset='utf-8'>
|
| | </head>
|
| | <body>
|
| | <ul type="circle">
|
| | <li>HTML</li>
|
| | <li>HTML5</li>
|
| | <li>XHTML</li>
|
| | <li>CSS</li>
|
| | <li>CSS3</li>
|
| | </ul>
|
| | </body>
|
| | </html>
|
| |
|
| | Ln 16, Col 1 Spaces: 4 UTF-8 CRLF HTML
|
| |
|
| | -------- Page 46 (Lecture #6-46.jpg) ---------
|
| | ( program#27.html ) عملي
|
| |
|
| | Lists
|
| | file:///C:/Users/Z10/Desktop/HTML%20language/program%2327.h
|
| |
|
| | • HTML
|
| | • HTML5
|
| | • XHTML
|
| | • CSS
|
| | • CSS3
|
| |
|
| | 44
|
| |
|
| | -------- Page 47 (Lecture #6-47.jpg) ---------
|
| | [ERROR: Failed to upload image]
|
| |
|
| | -------- Page 48 (Lecture #6-48.jpg) ---------
|
| | Lists القوائم
|
| |
|
| | : مثال
|
| |
|
| | <html lang="en">
|
| | <head>
|
| | <title> Lists </title>
|
| | <meta charset='utf-8'>
|
| | </head>
|
| | <body>
|
| | <dl>
|
| | <dt>HTML</dt>
|
| | <dd>Hyper Text Markup Language</dd>
|
| | <dt>XHTML</dt>
|
| | <dd>extensible Hyper Text Markup Language</dd>
|
| | <dt>CSS</dt>
|
| | <dd>Cascading Style Sheet</dd>
|
| | </dl>
|
| | </body>
|
| | </html>
|
| |
|
| | 46
|
| |
|
| | -------- Page 49 (Lecture #6-49.jpg) ---------
|
| | عملي ( program#28.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
|
| |
|
| | program#28.html
|
| |
|
| | 1 <html lang="en">
|
| | 2 <head>
|
| | 3 <title> Lists </title>
|
| | 4 <meta charset='utf-8'>
|
| | 5 </head>
|
| | 6 <body>
|
| | 7 <dl>
|
| | 8 <dt>HTML</dt>
|
| | 9 <dd>Hyper Text Markup Language</dd>
|
| | 10 <dt>XHTML</dt>
|
| | 11 <dd>extensible Hyper Text Markup Language</dd>
|
| | 12 <dt>CSS</dt>
|
| | 13 <dd>Cascading Style Sheet</dd>
|
| | 14
|
| | 15 </dl>
|
| | 16 </body>
|
| | 17 </html>
|
| | 18
|
| |
|
| | OUTLINE
|
| | TIMELINE
|
| |
|
| | Ln 18, Col 1 Spaces: 4 UTF-8 CRLF HTML
|
| |
|
| | -------- Page 50 (Lecture #6-50.jpg) ---------
|
| | ( program#28.html ) عملي
|
| |
|
| | Lists
|
| | file:///C:/Users/Z10/Desktop/HTML%20language/program%2328.h
|
| |
|
| | HTML
|
| | Hyper Text Markup Language
|
| | XHTML
|
| | extensible Hyper Text Markup Language
|
| | CSS
|
| | Cascading Style Sheet
|
| |
|
| | 48
|
| |
|
| | -------- Page 51 (Lecture #6-51.jpg) ---------
|
| | Thank you
|
| |
|
