Chat-ipad

Sleeping

File size: 23,276 Bytes

b5d0134


-------- 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