-------- 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: مثال: - توجد مشكلة: يمكن أن يكون المتصفح لا يدعم إمتدادات معينة للصوت. - لحل المشكلة: نعمل نفس الملف بإمتدادات مختلفة (.ogg - .mp3 - .wav)، ونستخدم الوسم: مثال: لينفذ المتصفح الجملة التي يدعم إمتدادها. -------- Page 4 (Lecture #7-04.jpg) --------- الصوتيات Audio - لكي يتعرف المتصفح على نوع الملف الصوتي: file type mp3 audio/mpeg wav audio/wav ogg audio/ogg مثال : كتابة هذه الجملة إذا المتصفح لا يدعم أي إمتداد من الأصوات. 2 -------- Page 5 (Lecture #7-05.jpg) --------- الصوتيات Audio سمات/خصائص Attributes لعناصر الصوت Audio : - خاصية controls : لإظهار أزرار التحكم. - خاصية loop : لتكرار الصوت. - خاصية muted : لعمل صامت. - خاصية autoplay : هذه الخاصية تجعل الصوت يعمل أوتوماتيك بمجرد فتح الملف وهذا سيء لأن المستخدم لا يعرف لماذا الصوت يشتغل، هذه الخاصية أصبحت غير مدعومة من قبل المتصفحات. الشكل العام: 3 -------- Page 6 (Lecture #7-06.jpg) --------- الصوتيات Audio مثال : Audio 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 2 3 Audio 4 5 6 7 13 14 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 src= “video/ nature.mp4” > - توجد مشكلة: يمكن أن يكون المتصفح لا يدعم امتدادات معينة للفيديو. - لحل المشكلة: نعمل نفس الملف بإمتدادات مختلفة ( .mp4 - .ogg - .webm )، ونستخدم الوسم: مثال: لينفذ المتصفح الجملة التي يدعم امتدادها. 7 -------- Page 10 (Lecture #7-10.jpg) --------- الفيديوهات Video - لكي يتعرف المتصفح على نوع ملف الفيديو: file type mp4 video/mp4 webm video/webm ogg video/ogg مثال : كتابة هذه الجملة إذا المتصفح لا يدعم أي إمتداد من الفيديوهات. 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" . الشكل العام: 9 -------- Page 12 (Lecture #7-12.jpg) --------- الفيديوهات Video : مثال - Video 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 > Video 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 data كل سطر من أسطر الجدول على حدى وذلك عبر الوسم 14 -------- Page 17 (Lecture #7-17.jpg) --------- Tables الجداول Create Table
. : الشكل العام
... ... ...
13 -------- Page 16 (Lecture #7-16.jpg) --------- الجداول Tables سمات/خصائص Attributes لعناصر الجدول Table : - خاصية border : لعمل إطار للجدول. - خاصية width : تحدد عرض الجدول تسند لها قيمة % مثل : "width="50%". - خاصية colspan : تستخدم مع الوسم 		لدمج الأعمدة في عمود واحد، مثل : "colspan="2" لدمج عمودين. - خاصية rowspan : تستخدم مع الوسم لدمج الصفوف في صف واحد، مثل : "rowspan="3" لدمج ثلاث صفوف.
name age salary
Ahmed 25 2400
Ali
مثال (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 …
name age salary
Ahmed 25 2400
Ali
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): Create Table
name age salary
Ahmed 25 2400
Ali 26 3000
18 -------- Page 21 (Lecture #7-21.jpg) --------- الجدوال Tables تابع - Total 5400 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 …
Ahmed 25 2400
Ali 26 3000
Total 5400
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) : تكوين جدول
إسم الكتاب السعر الكمية
برمجة الويب 150 3
نظام التشغيل 105 6
22 -------- Page 25 (Lecture #7-25.jpg) --------- Tables الجداول - تابع برمجة الألعاب 100 10 تعلم الطبخ 50 15 المجموع 2830 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 تكوين جدول 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) : تكوين جدول
إسم الكتاب السعر الكمية
برمجة الويب 150 3
نظام التشغيل 105
إسم الكتاب تعلم لغة السي
المؤلف د. بشير الفائد
سنة الإصدار 2001
26 -------- Page 29 (Lecture #7-29.jpg) --------- الجداول Tables - تابع يقدم هذا الكتاب معلومات عن لغة الـــي 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 تكوين جدول ، ، كما في الشكل التالي: 33 -------- Page 36 (Lecture #7-36.jpg) --------- Tables الجداول لتنظيم الجدول ولمساعدة محركات البحث نستخدم الوسوم thead ، tbody ، tfoot ، ونستخدم الوسم caption لوصف الجدول. :الشكل العام
إسم الكتاب تعلم لغة الــي Create Table
name age salary
Ahmed 25 2400
Ali 23 3200
إستبدال الوسم 		بالوسم 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
name age salary
Ahmed 25 2400
Ali 23 3200
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 • لتنظيم الجدول ولمساعدة محركات البحث نستخدم الوسوم
...
... ...
... ...
... ...
34 -------- Page 37 (Lecture #7-37.jpg) --------- Tables الجداول كما في المثال التالي: Create Table
Table (1) :
name age salary
Ahmed 25 2400
35 -------- Page 38 (Lecture #7-38.jpg) --------- Tables الجداول تابع Ali 23 3200 total 5600 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 2 3 Create Table 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ... 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
Table (1) :
name age salary
Ahmed 25 2400