Chat-ipad

Sleeping

File size: 26,707 Bytes

b5d0134


-------- 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: شيفرة
    الرمز
&lt;      <
&gt;      >
&ne;     ≠
&trade;  ™
&copy;   ©
&nbsp;   محرف الفراغ

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 &lt; 5 and 10 &gt; 2 and also 3 &ne; 4 ....
      all rights reserved for &copy; Mukhtar &trade;
    </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 &lt; 5 and 10 &gt; 2 and also 3 &ne; 4 ….
      all rights reserved for &copy; Mukhtar &trade;
    </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