| -------- Page 1 (Lecture #7-01.jpg) --------- | |
| Faculty of Information Technology – Tripoli University | |
| مقدمة في برمجة الإنترنت | |
| Introduction to Internet Programming | |
| [ ITGS226 ] | |
| المحاضرة السابعة | |
| أ. وفاء حسين المصباحي | |
| أستاذة المادة | |
| HTML5 | |
| CSS3 | |
| JS | |
| Cloud | |
| XML | |
| flat | |
| header | |
| .com | |
| footer | |
| .net | |
| PHP | |
| ربيع 2025 | |
| -------- Page 2 (Lecture #7-02.jpg) --------- | |
| المواضيع التي سنبحثها في مقرر: مقدمة في برمجة الإنترنت | |
| Introduction to Internet Programming | |
| المحاضرة السابعة | |
| . الصوتيات Audio | |
| 1 | |
| . الفيديوهات Video | |
| . الجداول Tables | |
| -------- Page 3 (Lecture #7-03.jpg) --------- | |
| Audio الصوتيات | |
| - لدينا ملف صوتي mp3.music موجود بجانب ملف html. | |
| - لإضافة الصوتيات يتم استخدام وسم tag: | |
| <audio src=" "></audio> | |
| مثال: | |
| <audio src="music.mp3"></audio> | |
| - توجد مشكلة: يمكن أن يكون المتصفح لا يدعم إمتدادات معينة للصوت. | |
| - لحل المشكلة: نعمل نفس الملف بإمتدادات مختلفة (.ogg - .mp3 - .wav)، ونستخدم الوسم: | |
| <source src=" "> | |
| مثال: | |
| <audio> | |
| <source src="music.mp3"> | |
| <source src="music.wav"> | |
| <source src="music.ogg"> | |
| </audio> | |
| لينفذ المتصفح الجملة التي يدعم إمتدادها. | |
| -------- Page 4 (Lecture #7-04.jpg) --------- | |
| الصوتيات Audio | |
| - لكي يتعرف المتصفح على نوع الملف الصوتي: | |
| file type | |
| mp3 audio/mpeg | |
| wav audio/wav | |
| ogg audio/ogg | |
| مثال : | |
| <audio> | |
| <source src="music.mp3" type="audio/mpeg"> | |
| <source src="music.wav" type="audio/wav"> | |
| <source src="music.ogg" type="audio/ogg"> | |
| Your Browser does not support the audio element. | |
| </audio> | |
| كتابة هذه الجملة إذا المتصفح لا يدعم أي إمتداد من الأصوات. | |
| 2 | |
| -------- Page 5 (Lecture #7-05.jpg) --------- | |
| الصوتيات Audio | |
| سمات/خصائص Attributes لعناصر الصوت Audio : | |
| - خاصية controls : لإظهار أزرار التحكم. | |
| - خاصية loop : لتكرار الصوت. | |
| - خاصية muted : لعمل صامت. | |
| - خاصية autoplay : هذه الخاصية تجعل الصوت يعمل أوتوماتيك بمجرد فتح الملف وهذا سيء لأن المستخدم لا يعرف لماذا الصوت يشتغل، هذه الخاصية أصبحت غير مدعومة من قبل المتصفحات. | |
| الشكل العام: | |
| <audio controls loop muted autoplay> | |
| </audio> | |
| 3 | |
| -------- Page 6 (Lecture #7-06.jpg) --------- | |
| الصوتيات Audio | |
| مثال : | |
| <html lang="en"> | |
| <head> | |
| <title> Audio </title> | |
| <meta charset='utf-8'> | |
| </head> | |
| <body> | |
| <audio controls loop muted> | |
| <source src="aud.mp3" type="audio/mpeg"> | |
| <source src="aud.wav" type="audio/wav"> | |
| <source src="aud.ogg" type="audio/ogg"> | |
| Your Browser does not support the audio element. | |
| </audio> | |
| </body> | |
| </html> | |
| 4 | |
| -------- Page 7 (Lecture #7-07.jpg) --------- | |
| ( program#32.html ) عملي | |
| 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#32.html | |
| OUTLINE | |
| TIMELINE | |
| program#32.html × | |
| 1 <html lang="en"> | |
| 2 <head> | |
| 3 <title> Audio </title> | |
| 4 <meta charset='utf-8'> | |
| 5 </head> | |
| 6 <body> | |
| 7 <audio controls loop muted > | |
| 8 <source src="aud.mp3" type="audio/mpeg"> | |
| 9 <source src="aud.wav" type="audio/wav"> | |
| 10 <source src="aud.ogg" type="audio/ogg"> | |
| 11 Your Browser does not support the audio element. | |
| 12 </audio> | |
| 13 </body> | |
| 14 </html> | |
| 15 | |
| Ln 15, Col 1 Spaces: 4 UTF-8 CRLF HTML | |
| 5 | |
| -------- Page 8 (Lecture #7-08.jpg) --------- | |
| عملي ( program#32.html ) | |
| Audio | |
| 0:00 / 5:10 | |
| 6 | |
| -------- Page 9 (Lecture #7-09.jpg) --------- | |
| الفيديوهات Video | |
| - لدينا ملف فيديو nature.mp4 موجود بجانب ملف html أو في مجلد folder اسمه video. | |
| - لإضافة الفيديوهات يتم استخدام وسـم tag: | |
| < video src=“ ” > </video> | |
| مثال: | |
| < video src= “video/ nature.mp4” > </video> | |
| - توجد مشكلة: يمكن أن يكون المتصفح لا يدعم امتدادات معينة للفيديو. | |
| - لحل المشكلة: نعمل نفس الملف بإمتدادات مختلفة ( .mp4 - .ogg - .webm )، ونستخدم الوسم: | |
| <source src=“ ” > | |
| مثال: | |
| <video> | |
| <source src=“video/nature.mp4” > | |
| <source src=“video/nature.webm” > | |
| <source src=“video/nature.ogg” > | |
| </video> | |
| لينفذ المتصفح الجملة التي يدعم امتدادها. | |
| 7 | |
| -------- Page 10 (Lecture #7-10.jpg) --------- | |
| الفيديوهات Video | |
| - لكي يتعرف المتصفح على نوع ملف الفيديو: | |
| file type | |
| mp4 video/mp4 | |
| webm video/webm | |
| ogg video/ogg | |
| مثال : | |
| <video> | |
| <source src="video/nature.mp3" type=" video/mp4"> | |
| <source src="video/nature.wav" type=" video/webm "> | |
| <source src=video/"nature.ogg" type=" video/ogg "> | |
| Your Browser does not support the video element. | |
| </video> | |
| كتابة هذه الجملة إذا المتصفح لا يدعم أي إمتداد من الفيديوهات. | |
| 8 | |
| -------- Page 11 (Lecture #7-11.jpg) --------- | |
| الفيديوهات Video | |
| سمات/خصائص Attributes لعناصر الفيديو Video: | |
| - خاصية controls: لإظهار أزرار التحكم. | |
| - خاصية loop: لتكرار الفيديو. | |
| - خاصية muted: لعمل صامت للصوت. | |
| - خاصية autoplay: هذه الخاصية تجعل الفيديو يعمل أوتوماتيك بمجرد فتح الملف ولا تشتغل هذه الخاصية إلا بوجود خاصية muted. | |
| - خاصية width وخاصية height: عرض الفيديو بمقاس محدد ومن الأفضل إستخدام واحدة منهم، وتسند لهما القيمة بالبكسل مثل: width="400" و height="400" ، أو تسند لها قيمة % مثل: width="100%" . | |
| - خاصية poster: لعمل خلفية(صورة) للفيديو، الصورة تكون بجانب ملف html، مثل: poster="myPic.jpg" . | |
| الشكل العام: | |
| <video controls loop width="400" height="400" muted autoplay> | |
| </video> | |
| 9 | |
| -------- Page 12 (Lecture #7-12.jpg) --------- | |
| الفيديوهات Video | |
| : مثال - | |
| <html lang="en"> | |
| <head> | |
| <title> Video </title> | |
| <meta charset='utf-8'> | |
| </head> | |
| <body> | |
| <video controls width="500" poster="myPic.jpg"> | |
| <source src="video/nature.mp4" type="video/mp4"> | |
| <source src="video/nature.webm" type="video/webm"> | |
| <source src="video/nature.ogg" type="video/ogg"> | |
| Your Browser does not support the video element. | |
| </video> | |
| </body> | |
| </html> | |
| 10 | |
| -------- Page 13 (Lecture #7-13.jpg) --------- | |
| ( program#33.html ) عملي | |
| EXPLORER | |
| HTML LANGUAGE | |
| 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#32.html | |
| program#33.html | |
| OUTLINE | |
| TIMELINE | |
| program#33.html x | |
| program#33.html > | |
| <html lang="en"> | |
| <head> | |
| <title> Video </title> | |
| <meta charset='utf-8'> | |
| </head> | |
| <body> | |
| <video controls width="500" poster="myPic.jpg" > | |
| <source src="video/nature.mp4" type="video/mp4"> | |
| <source src="video/nature.webm" type="video/webm"> | |
| <source src="video/nature.ogg" type="video/ogg"> | |
| Your Browser does not support the video element. | |
| </video> | |
| </body> | |
| </html> | |
| Ln 15, Col 1 Spaces: 4 UTF-8 CRLF HTML | |
| 11 | |
| -------- Page 14 (Lecture #7-14.jpg) --------- | |
| عملي ( program#33.html ) | |
| صورة | |
| فيديو | |
| 12 | |
| -------- Page 15 (Lecture #7-15.jpg) --------- | |
| Tables | |
| الجداول | |
| - توفر لغة HTML آلية لإنشاء الجداول عبر العنصر <table> ، ثم يتم إنشاء محتويات الجدول حيث إنشاء الصفوف باستخدام الوسم <tr> ، ثم يتم ذكر محتويات خلايا table data كل سطر من أسطر الجدول على حدى وذلك عبر الوسم <td> . | |
| : الشكل العام | |
| <table> | |
| <tr> | |
| <td> ... </td> | |
| <td> ... </td> | |
| <td> ... </td> | |
| </tr> | |
| </table> | |
| 13 | |
| -------- Page 16 (Lecture #7-16.jpg) --------- | |
| الجداول Tables | |
| سمات/خصائص Attributes لعناصر الجدول Table : | |
| - خاصية border : لعمل إطار للجدول. | |
| - خاصية width : تحدد عرض الجدول تسند لها قيمة % مثل : "width="50%". | |
| - خاصية colspan : تستخدم مع الوسم <td> لدمج الأعمدة في عمود واحد، مثل : "colspan="2" لدمج عمودين. | |
| - خاصية rowspan : تستخدم مع الوسم <td> لدمج الصفوف في صف واحد، مثل : "rowspan="3" لدمج ثلاث صفوف. | |
| <tr> </tr> | |
| <td></td> <td></td> <td></td> | |
| <td></td> <td></td> <td></td> | |
| <td></td> <td></td> <td></td> | |
| <td></td> <td></td> <td></td> | |
| 14 | |
| -------- Page 17 (Lecture #7-17.jpg) --------- | |
| Tables الجداول | |
| <html lang="en"> | |
| <head> | |
| <title> Create Table </title> | |
| <meta charset='utf-8'> | |
| </head> | |
| <body> | |
| <table border="1" width="50%"> | |
| <tr> | |
| <td> name </td> | |
| <td> age </td> | |
| <td> salary </td> | |
| </tr> | |
| <tr> | |
| <td> Ahmed </td> | |
| <td> 25 </td> | |
| <td> 2400 </td> | |
| </tr> | |
| <tr> | |
| <td> Ali </td> | |
| </tr> | |
| </table> | |
| </body> | |
| </html> | |
| مثال (1) - | |
| 15 | |
| -------- Page 18 (Lecture #7-18.jpg) --------- | |
| ( program#34.html ) عملي | |
| File Edit Selection | |
| EXPLORER | |
| HTML LANGUAGE | |
| 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#32.html | |
| program#33.html | |
| program#34.html | |
| OUTLINE | |
| TIMELINE | |
| program#34.html x | |
| program#34.html … | |
| <html lang="en"> | |
| <body> | |
| <table border="1" width="50%"> | |
| <tr> | |
| <td> name </td> | |
| <td> age </td> | |
| <td> salary </td> | |
| </tr> | |
| <tr> | |
| <td> Ahmed </td> | |
| <td> 25 </td> | |
| <td> 2400 </td> | |
| </tr> | |
| <tr> | |
| <td> Ali </td> | |
| </tr> | |
| </table> | |
| </body> | |
| </html> | |
| Ln 24, Col 1 Spaces: 4 UTF-8 CRLF HTML | |
| 16 | |
| 0 0 ⚠ 0 | |
| -------- Page 19 (Lecture #7-19.jpg) --------- | |
| ( program#34.html ) عملي | |
| Create Table | |
| file:///C:/Users/Z10/Desktop/HTML%20langu… | |
| name age salary | |
| Ahmed 25 2400 | |
| Ali | |
| 17 | |
| -------- Page 20 (Lecture #7-20.jpg) --------- | |
| Tables الجداول | |
| مثال (2): | |
| <html lang="en"> | |
| <head> | |
| <title> Create Table </title> | |
| <meta charset='utf-8'> | |
| </head> | |
| <body> | |
| <table border="2" width="50%"> | |
| <tr> | |
| <td> name </td> | |
| <td> age </td> | |
| <td> salary </td> | |
| </tr> | |
| <tr> | |
| <td> Ahmed </td> | |
| <td> 25 </td> | |
| <td> 2400 </td> | |
| </tr> | |
| <tr> | |
| <td> Ali </td> | |
| <td> 26 </td> | |
| <td> 3000 </td> | |
| </tr> | |
| </table> | |
| </body> | |
| </html> | |
| 18 | |
| -------- Page 21 (Lecture #7-21.jpg) --------- | |
| الجدوال Tables | |
| تابع - | |
| <tr> | |
| <td> Total </td> | |
| <td colspan="2" > 5400 </td> | |
| </tr> | |
| </table> | |
| </body> | |
| </html> | |
| 19 | |
| -------- Page 22 (Lecture #7-22.jpg) --------- | |
| عملي ( program#35.html ) | |
| File Edit Selection | |
| EXPLORER | |
| HTML LANGUAGE | |
| program#2.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#32.html | |
| program#33.html | |
| program#34.html | |
| program#35.html | |
| OUTLINE | |
| TIMELINE | |
| 0 0 0 | |
| program#35.html | |
| program#35.html … | |
| <html lang="en"> | |
| <body> | |
| <table border="2" width="50%"> | |
| <tr> | |
| <td> Ahmed </td> | |
| <td> 25 </td> | |
| <td> 2400 </td> | |
| </tr> | |
| <tr> | |
| <td> Ali </td> | |
| <td> 26 </td> | |
| <td> 3000 </td> | |
| </tr> | |
| <tr> | |
| <td> Total </td> | |
| <td colspan="2"> 5400 </td> | |
| </tr> | |
| </table> | |
| </body> | |
| </html> | |
| Ln 30, Col 1 Spaces: 4 UTF-8 CRLF HTML | |
| 20 | |
| -------- Page 23 (Lecture #7-23.jpg) --------- | |
| ( program#35.html ) عملي | |
| Create Table | |
| file:///C:/Users/Z10/Desktop/HTML%20langu... | |
| name age salary | |
| Ahmed 25 2400 | |
| Ali 26 3000 | |
| Total 5400 | |
| 21 | |
| -------- Page 24 (Lecture #7-24.jpg) --------- | |
| الجداول Tables | |
| مثال (3) : | |
| <html lang=“ar”> | |
| <head> | |
| <title> تكوين جدول </title> | |
| <meta charset=‘utf-8’> | |
| </head> | |
| <body dir="rtl"> | |
| <table border=“1“ width=“50%“> | |
| <tr> | |
| <td> إسم الكتاب </td> | |
| <td> السعر </td> | |
| <td> الكمية </td> | |
| </tr> | |
| <tr> | |
| <td> برمجة الويب </td> | |
| <td> 150 </td> | |
| <td> 3 </td> | |
| </tr> | |
| <tr> | |
| <td> نظام التشغيل </td> | |
| <td> 105 </td> | |
| <td> 6 </td> | |
| </tr> | |
| </table> | |
| </body> | |
| </html> | |
| 22 | |
| -------- Page 25 (Lecture #7-25.jpg) --------- | |
| Tables الجداول | |
| - تابع | |
| <tr> | |
| <td> برمجة الألعاب </td> | |
| <td> 100 </td> | |
| <td> 10 </td> | |
| </tr> | |
| <tr> | |
| <td> تعلم الطبخ </td> | |
| <td> 50 </td> | |
| <td> 15 </td> | |
| </tr> | |
| <tr> | |
| <td> المجموع </td> | |
| <td colspan="2"> 2830 </td> | |
| </tr> | |
| </table> | |
| </body> | |
| </html> | |
| 23 | |
| -------- Page 26 (Lecture #7-26.jpg) --------- | |
| ( program#36.html ) عملي | |
| EXPLORER | |
| HTML LANGUAGE | |
| 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#32.html | |
| program#33.html | |
| program#34.html | |
| program#35.html | |
| program#36.html | |
| program#36.html | |
| program#36.html > html > head > meta | |
| <html lang="ar"> | |
| <head> | |
| <title> تكوين جدول </title> | |
| <meta charset='utf-8'> | |
| </head> | |
| <body dir="rtl"> | |
| <table border="1" width="50%"> | |
| <tr> | |
| <td> إسم الكتاب </td> | |
| <td> السعر </td> | |
| <td> الكمية </td> | |
| </tr> | |
| <tr> | |
| <td> برمجة الويب </td> | |
| <td> 150 </td> | |
| <td> 3 </td> | |
| </tr> | |
| <tr> | |
| <td> نظام التشغيل </td> | |
| <td> 105 </td> | |
| </tr> | |
| Ln 4, Col 21 Spaces: 4 UTF-8 CRLF HTML | |
| -------- Page 27 (Lecture #7-27.jpg) --------- | |
| عملي ( program#36.html ) | |
| تكوين جدول | |
| اسم الكتاب السعر الكمية | |
| برمجة الويب 150 3 | |
| نظام التشغيل 105 6 | |
| برمجة الألعاب 100 10 | |
| تعلم الطبخ 50 15 | |
| المجموع 2830 | |
| -------- Page 28 (Lecture #7-28.jpg) --------- | |
| Tables الجداول | |
| مثال (4) : | |
| <html lang="ar"> | |
| <head> | |
| <title> تكوين جدول </title> | |
| <meta charset="utf-8"> | |
| </head> | |
| <body dir="rtl"> | |
| <table border="2" width="50%"> | |
| <tr> | |
| <td> إسم الكتاب </td> | |
| <td> تعلم لغة السي </td> | |
| <td rowspan="3"> <img src="myPic2.jpg" width="200px" height="100px"> </td> | |
| </tr> | |
| <tr> | |
| <td> المؤلف </td> | |
| <td> د. بشير الفائد </td> | |
| </tr> | |
| <tr> | |
| <td> سنة الإصدار </td> | |
| <td> 2001 </td> | |
| </tr> | |
| </table> | |
| </body> | |
| </html> | |
| 26 | |
| -------- Page 29 (Lecture #7-29.jpg) --------- | |
| الجداول Tables | |
| - تابع | |
| <tr> | |
| <td colspan="3">يقدم هذا الكتاب معلومات عن لغة الـــي</td> | |
| </tr> | |
| </table> | |
| </body> | |
| </html> | |
| 27 | |
| -------- Page 30 (Lecture #7-30.jpg) --------- | |
| عملي ( program#39.html ) | |
| EXPLORER | |
| HTML LANGUAGE | |
| program#25.html | |
| program#26.html | |
| program#27.html | |
| program#28.html | |
| program#29.html | |
| program#30.html | |
| program#31.html | |
| program#32.html | |
| program#33.html | |
| program#34.html | |
| program#35.html | |
| program#36.html | |
| program#37.html | |
| program#38.html | |
| program#39.html | |
| OUTLINE | |
| TIMELINE | |
| program#39.html x | |
| program#39.html > html > body > table > tr | |
| HTML language | |
| <html lang="ar"> | |
| <head> | |
| <title> تكوين جدول </title> | |
| <meta charset="utf-8"> | |
| </head> | |
| <body dir="rtl"> | |
| <table border="2" width="50%"> | |
| <tr> | |
| <td> إسم الكتاب </td> | |
| <td> تعلم لغة الــي </td> | |
| <td rowspan="3"> <img src="myPic2.jpg" width="200p | |
| </tr> | |
| <tr> | |
| <td> المؤلف </td> | |
| <td> د . بشير الفايد </td> | |
| </tr> | |
| <tr> | |
| <td> سنة الاصدار </td> | |
| <td> 2001 </td> | |
| </tr> | |
| -------- Page 31 (Lecture #7-31.jpg) --------- | |
| عملي ( program#39.html ) | |
| تكوين جدول | |
| اسم الكتاب تعلم لغة السي | |
| المؤلف د. بشير الشاذلي | |
| سنة الإصدار 2001 | |
| يقدم هذا الكتاب معلومات عن لغة السي | |
| -------- Page 32 (Lecture #7-32.jpg) --------- | |
| Tables | |
| الجداول | |
| لو نريد أن نميز الصف الأول في الجدول يتم إستبدال الوسم <td> بالوسم <th> حيث يجعل الكتابة سميكة bold، كما في المثال التالي: | |
| <html lang="en"> | |
| <head> | |
| <title> Create Table </title> | |
| <meta charset='utf-8'> | |
| </head> | |
| <body> | |
| <table border="1" width="50%"> | |
| <tr> | |
| <th> name </th> | |
| <th> age </th> | |
| <th> salary </th> | |
| </tr> | |
| <tr> | |
| <td> Ahmed </td> | |
| <td> 25 </td> | |
| <td> 2400 </td> | |
| </tr> | |
| <tr> | |
| <td> Ali </td> | |
| <td> 23 </td> | |
| <td> 3200 </td> | |
| </tr> | |
| </table> | |
| </body> | |
| </html> | |
| إستبدال الوسم <td> بالوسم <th> | |
| 30 | |
| -------- Page 33 (Lecture #7-33.jpg) --------- | |
| ( program#37.html ) عملي | |
| EXPLORER | |
| HTML LANGUAGE | |
| 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#32.html | |
| program#33.html | |
| program#34.html | |
| program#35.html | |
| program#36.html | |
| program#37.html | |
| OUTLINE | |
| TIMELINE | |
| program#37.html × | |
| program#37.html > html > body > table > tr > td | |
| <html lang="en"> | |
| <body> | |
| <table border="1" width="50%"> | |
| <tr> | |
| <th> name </th> | |
| <th> age </th> | |
| <th> salary </th> | |
| </tr> | |
| <tr> | |
| <td> Ahmed </td> | |
| <td> 25 </td> | |
| <td> 2400 </td> | |
| </tr> | |
| <tr> | |
| <td> Ali </td> | |
| <td> 23 </td> | |
| <td> 3200 </td> | |
| </tr> | |
| </table> | |
| </body> | |
| </html> | |
| Ln 14, Col 24 Spaces: 4 UTF-8 CRLF HTML | |
| 31 | |
| 0 0 0 | |
| -------- Page 34 (Lecture #7-34.jpg) --------- | |
| ( program#37.html ) عملي | |
| Create Table | |
| name age salary | |
| Ahmed 25 2400 | |
| Ali 23 3200 | |
| 32 | |
| -------- Page 35 (Lecture #7-35.jpg) --------- | |
| الجداول Tables | |
| • لتنظيم الجدول ولمساعدة محركات البحث نستخدم الوسوم <thead> ، <tbody> ، <tfoot> كما في الشكل التالي: | |
| <thead> | |
| <tbody> | |
| <tfoot> | |
| 33 | |
| -------- Page 36 (Lecture #7-36.jpg) --------- | |
| Tables الجداول | |
| لتنظيم الجدول ولمساعدة محركات البحث نستخدم الوسوم thead ، tbody ، tfoot ، ونستخدم الوسم caption لوصف الجدول. | |
| :الشكل العام | |
| <table> | |
| <thead> | |
| <caption> ... </caption> | |
| <tr> | |
| <td> ... </td> | |
| <td> ... </td> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td> ... </td> | |
| <td> ... </td> | |
| </tr> | |
| </tbody> | |
| <tfoot> | |
| <tr> | |
| <td> ... </td> | |
| <td> ... </td> | |
| </tr> | |
| </tfoot> | |
| </table> | |
| 34 | |
| -------- Page 37 (Lecture #7-37.jpg) --------- | |
| Tables الجداول | |
| كما في المثال التالي: | |
| <html lang="en"> | |
| <head> | |
| <title> Create Table </title> | |
| <meta charset='utf-8'> | |
| </head> | |
| <body> | |
| <table border="2" width="100%"> | |
| <caption> Table (1) : </caption> | |
| <thead> | |
| <tr> | |
| <th> name </th> | |
| <th> age </th> | |
| <th> salary </th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td> Ahmed </td> | |
| <td> 25 </td> | |
| <td> 2400 </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </body> | |
| </html> | |
| 35 | |
| -------- Page 38 (Lecture #7-38.jpg) --------- | |
| Tables الجداول | |
| تابع | |
| <tr> | |
| <td> Ali </td> | |
| <td> 23 </td> | |
| <td> 3200 </td> | |
| </tr> | |
| </tbody> | |
| <tfoot> | |
| <tr> | |
| <td> total </td> | |
| <td colspan="2"> 5600 </td> | |
| </tr> | |
| </tfoot> | |
| </table> | |
| </body> | |
| </html> | |
| 36 | |
| -------- Page 39 (Lecture #7-39.jpg) --------- | |
| عملي (program#38.html) | |
| EXPLORER | |
| HTML LANGUAGE | |
| 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#32.html | |
| program#33.html | |
| program#34.html | |
| program#35.html | |
| program#36.html | |
| program#37.html | |
| program#38.html | |
| OUTLINE | |
| TIMELINE | |
| program#38.html x | |
| program#38.html > html > body > table | |
| 1 <html lang="en"> | |
| 2 <head> | |
| 3 <title> Create Table </title> | |
| 4 <meta charset='utf-8'> | |
| 5 </head> | |
| 6 <body> | |
| 7 <table border="2" width="100%"> | |
| 8 <caption> Table (1) : </caption> | |
| 9 <thead> | |
| 10 <tr> | |
| 11 <th> name </th> | |
| 12 <th> age </th> | |
| 13 <th> salary </th> | |
| 14 </tr> | |
| 15 </thead> | |
| 16 <tbody> | |
| 17 <tr> | |
| 18 <td> Ahmed </td> | |
| 19 <td> 25 </td> | |
| 20 <td> 2400 </td> | |
| ... | |
| 37 | |
| Ln 7, Col 25 Spaces: 4 UTF-8 CRLF HTML | |
| -------- Page 40 (Lecture #7-40.jpg) --------- | |
| عملي ( program#38.html ) | |
| Create Table | |
| file:///C:/Users/Z10/Desktop/HTML%20language/F | |
| Table (1) : | |
| name age salary | |
| Ahmed 25 2400 | |
| Ali 23 3200 | |
| total 5600 | |
| -------- Page 41 (Lecture #7-41.jpg) --------- | |
| Thank you | |