| -------- Page 1 (Lecture #4-01.jpg) --------- | |
| Faculty of Information Technology – Tripoli University | |
| مقدمة في برمجة الإنترنت | |
| Introduction to Internet | |
| Programming | |
| [ ITGS226 ] | |
| المحاضرة الرابعة | |
| أ. وفاء حسين المصباحي | |
| أستاذة المادة | |
| HTML5 | |
| CSS3 | |
| JS | |
| Cloud | |
| XML | |
| flat | |
| PHP | |
| header | |
| .com | |
| footer | |
| .net | |
| 2025 ربيع | |
| -------- Page 2 (Lecture #4-02.jpg) --------- | |
| المواضيع التي سيتم دراستها في مقرر: مقدمة في برمجة الإنترنت | |
| Introduction to Internet Programming | |
| المحاضرة الرابعة | |
| . HTML Headings العناوين | |
| . HTML Paragraphs الفقرات | |
| -------- Page 3 (Lecture #4-03.jpg) --------- | |
| العناوين HTML Headings | |
| العناوين يتم تعريفها عن طريق إستخدام الوسوم : <h1> ، <h2> ، <h3> ، <h4> ، <h5> ، <h6> . هذه الوسوم | |
| تجعل العنوان عريضاً مع إضافة سطر فارغ تحت العنوان، حرف h هو إختصار لكلمة heading . | |
| - <h1> يحدد العنوان الأكثر أهمية، ويستخدم للعناوين الرئيسية لأنه الأكبر حجماً. | |
| - <h2> أقل حجماً بقليل من <h1> ، ثم <h3> وهكذا...، إلى <h6> ويحدد العنوان الأقل حجماً وأهمية. | |
| - هي عنصر block : تحتل السطر كاملاً بما فيه الفراغ الموجود أمامها، ولا تسمح لعناصر أخرى أن تحتل ذلك | |
| الفراغ، حتى وإن كانت عناصر من نفس العلامة فكل واحدة تأخذ حيزها كاملاً. | |
| ملاحظات: | |
| - محركات البحث تستخدم العناوين لفهرسة البنية الأساسية ومحتوى صفحات الويب. | |
| - يعمل المستخدمون على التنقل بين صفحات الويب حسب العناوين، لذا لابد من استخدام العناوين المناسبة. | |
| - وسوم العناوين تستخدم لتنسيق العناوين فقط، ولا يجب استخدامها لتنسيق أي نص آخر. | |
| -------- Page 4 (Lecture #4-04.jpg) --------- | |
| HTML Headings العناوين | |
| : (1) مثال - | |
| <html lang=“en”> | |
| <head> | |
| <title> page to heading elements </title> | |
| <meta charset=‘utf-8’> | |
| </head> | |
| <body> | |
| <h1> heading to level 1 </h1> | |
| <h2> heading to level 2 </h2> | |
| <h3> heading to level 3 </h3> | |
| <h4> heading to level 4 </h4> | |
| <h5> heading to level 5 </h5> | |
| <h6> heading to level 6 </h6> | |
| </body> | |
| </html> | |
| 2 | |
| -------- Page 5 (Lecture #4-05.jpg) --------- | |
| ( program#4.html ) عملي | |
| EXPLORER | |
| HTML LANGUAGE | |
| program#1.html | |
| program#2.html | |
| program#3.html | |
| program#4.html | |
| program#5.html | |
| program#6.html | |
| program#7.html | |
| program#8.html | |
| program#9.html | |
| OUTLINE | |
| TIMELINE | |
| program#4.html | |
| program#4.html › html › body › h4 | |
| 1 <html lang="en"> | |
| 2 <head> | |
| 3 <title> page to heading elements </title> | |
| 4 <meta charset='utf-8'> | |
| 5 </head> | |
| 6 <body> | |
| 7 <h1> heading to level 1 </h1> | |
| 8 <h2> heading to level 2 </h2> | |
| 9 <h3> heading to level 3 </h3> | |
| 10 <h4> heading to level 4 </h4> | |
| 11 <h5> heading to level 5 </h5> | |
| 12 <h6> heading to level 6 </h6> | |
| 13 </body> | |
| 14 </html> | |
| Ln 10, Col 34 Spaces: 4 UTF-8 CRLF HTML | |
| -------- Page 6 (Lecture #4-06.jpg) --------- | |
| ( program#4.html ) عملي | |
| page to heading elements | |
| heading to level 1 | |
| heading to level 2 | |
| heading to level 3 | |
| heading to level 4 | |
| heading to level 5 | |
| heading to level 6 | |
| -------- Page 7 (Lecture #4-07.jpg) --------- | |
| HTML Headings العناوين | |
| : مثال (1) | |
| ✓ قمنا بتزويد الوسم <body> بالصفة dir والتي تحدد إتجاه قراءة المستند وقمنا بإسناد القيمة rtl لها وذلك لجعل إتجاه القراءة من اليمين إلى اليسار right to left وهو ما يتناسب مع اللغة العربية. | |
| ✓ في حال أنه لم يتم كتابة هذه الصفة فإن القيمة الإفتراضية لها ltr أي إتجاه القراءة الإفتراضي من اليسار إلى اليمين. | |
| <html lang=“ar”> | |
| <head> | |
| <title> صفحة لعناصر العنوان </title> | |
| <meta charset=‘utf-8’> | |
| </head> | |
| <body dir=‘rtl’> | |
| <h1> عنوان لمستوى 1 </h1> | |
| <h2> عنوان لمستوى 2 </h2> | |
| <h3> عنوان لمستوى 3 </h3> | |
| <h4> عنوان لمستوى 4 </h4> | |
| <h5> عنوان لمستوى 5 </h5> | |
| <h6> عنوان لمستوى 6 </h6> | |
| </body> | |
| </html> | |
| 5 | |
| -------- Page 8 (Lecture #4-08.jpg) --------- | |
| ( program#5.html ) عملي | |
| EXPLORER | |
| HTML LANGUAGE | |
| program#1.html | |
| program#2.html | |
| program#3.html | |
| program#4.html | |
| program#5.html | |
| program#6.html | |
| program#7.html | |
| program#8.html | |
| program#9.html | |
| OUTLINE | |
| TIMELINE | |
| program#5.html x | |
| program#5.html ... | |
| 1 <html lang="ar"> | |
| 2 <head> | |
| 3 <title> صفحة لعناصر العنوان </title> | |
| 4 <meta charset='utf-8'> | |
| 5 </head> | |
| 6 <body dir='rtl'> | |
| 7 <h1> ١ عنوان لمستوى </h1> | |
| 8 <h2> ٢ عنوان لمستوى </h2> | |
| 9 <h3> ٣ عنوان لمستوى </h3> | |
| 10 <h4> ٤ عنوان لمستوى </h4> | |
| 11 <h5> ٥ عنوان لمستوى </h5> | |
| 12 <h6> ٦ عنوان لمستوى </h6> | |
| 13 </body> | |
| 14 </html> | |
| 15 | |
| Ln 15, Col 1 Spaces: 4 UTF-8 CRLF HTML | |
| 6 | |
| -------- Page 9 (Lecture #4-09.jpg) --------- | |
| عملي ( program#5.html ) | |
| صفحة لتعامل العناصر | |
| file:///C:/Users/Z10/Deskt | |
| عنوان لمستوى 1 | |
| عنوان لمستوى 2 | |
| عنوان لمستوى 3 | |
| عنوان لمستوى 4 | |
| عنوان لمستوى 5 | |
| عنوان لمستوى 6 | |
| -------- Page 10 (Lecture #4-10.jpg) --------- | |
| الفقرات HTML Paragraphs | |
| - تعرف الفقرات بالوسم <p> ... </p> ضع فقرتك داخل هذا الوسم، سيميز الفقرة ويضيف سطرا فارغا بعدها. | |
| - هو عنصر block: تحتل السطر كاملا بما فيه الفراغ الموجود أمامها، ولا تسمح لعناصر أخرى أن تحتل ذلك الفراغ، حتى وإن كانت عناصر من نفس العلامة فكل واحدة تأخذ حيزها كاملا. | |
| 8 | |
| -------- Page 11 (Lecture #4-11.jpg) --------- | |
| HTML Paragraphs الفقرات | |
| : (1) مثال - | |
| <html lang="en"> | |
| <head> | |
| <title> HTML Paragraphs </title> | |
| <meta charset='utf-8'> | |
| </head> | |
| <body> | |
| <p> 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. </p> | |
| </body> | |
| </html> | |
| 9 | |
| -------- Page 12 (Lecture #4-12.jpg) --------- | |
| ( program#6.html ) عملي | |
| EXPLORER | |
| HTML LANGUAGE | |
| program#1.html | |
| program#2.html | |
| program#3.html | |
| program#4.html | |
| program#5.html | |
| program#6.html | |
| program#7.html | |
| program#8.html | |
| program#9.html | |
| program#6.html x | |
| program#6.html | |
| 1 <html lang="en"> | |
| 2 <head> | |
| 3 <title> HTML Paragraphs </title> | |
| 4 <meta charset='utf-8'> | |
| 5 </head> | |
| 6 <body> | |
| 7 <p> WEB PAGE: a single document on a website, usually cons | |
| 8 document and any items that are displayed within that | |
| 9 images or style sheets. </p> | |
| 10 | |
| 11 </body> | |
| 12 </html> | |
| 13 | |
| OUTLINE | |
| TIMELINE | |
| Ln 13, Col 1 Spaces: 4 UTF-8 CRLF HTML | |
| -------- Page 13 (Lecture #4-13.jpg) --------- | |
| ( program#6.html ) عملي | |
| HTML Paragraphs | |
| 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. | |
| 11 | |
| -------- Page 14 (Lecture #4-14.jpg) --------- | |
| HTML Paragraphs الفقرات | |
| : (2) مثال - | |
| <html lang="en"> | |
| <head> | |
| <title> HTML Paragraphs </title> | |
| <meta charset='utf-8'> | |
| </head> | |
| <body> | |
| <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> | |
| </body> | |
| </html> | |
| 12 | |
| -------- Page 15 (Lecture #4-15.jpg) --------- | |
| ( program#7.html ) عملي | |
| EXPLORER | |
| HTML LANGUAGE | |
| program#1.html | |
| program#2.html | |
| program#3.html | |
| program#4.html | |
| program#5.html | |
| program#6.html | |
| program#7.html | |
| program#8.html | |
| program#9.html | |
| OUTLINE | |
| TIMELINE | |
| program#7.html | |
| <html lang="en"> | |
| <head> | |
| <title> HTML Paragraphs </title> | |
| <meta charset='utf-8'> | |
| </head> | |
| <body> | |
| <h1> WEB PAGE: </h1> | |
| <p> a single document on a website, usually consisting of | |
| document and any items that are displayed within that | |
| images or style sheets. </p> | |
| </body> | |
| </html> | |
| Ln 12, Col 5 Spaces: 4 UTF-8 CRLF HTML | |
| -------- Page 16 (Lecture #4-16.jpg) --------- | |
| ( program#7.html ) عملي | |
| HTML Paragraphs | |
| 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. | |
| 14 | |
| -------- Page 17 (Lecture #4-17.jpg) --------- | |
| HTML Paragraphs الفقرات | |
| <html lang="en"> | |
| <head> | |
| <title> HTML Paragraphs </title> | |
| <meta charset='utf-8'> | |
| </head> | |
| <body> | |
| <p> 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. </p> | |
| <p> HOME PAGE: The entry page for a website, which can link to additional pages | |
| on the same website or pages on other sites. </p> | |
| <p> WEBSITE: a collection of one or more web pages linked together. </p> | |
| <p> 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. </p> | |
| </body> | |
| </html> | |
| مثال (3) : | |
| 15 | |
| -------- Page 18 (Lecture #4-18.jpg) --------- | |
| ( program#8.html ) عملي | |
| EXPLORER | |
| HTML LANGUAGE | |
| program#1.html | |
| program#2.html | |
| program#3.html | |
| program#4.html | |
| program#5.html | |
| program#6.html | |
| program#7.html | |
| program#8.html | |
| program#9.html | |
| OUTLINE | |
| TIMELINE | |
| program#8.html html body p | |
| program#8.html x | |
| 1 <html lang="en"> | |
| 2 <head> | |
| 3 <title> HTML Paragraphs </title> | |
| 4 <meta charset='utf-8'> | |
| 5 </head> | |
| 6 <body> | |
| 7 <p> WEB PAGE: a single document on a website, usually con | |
| 8 document and any items that are displayed within that | |
| 9 images or style sheets. </p> | |
| 10 <p> HOME PAGE: The entry page for a website, which can lin | |
| 11 on the same website or pages on other sites. </p> | |
| 12 <p> WEBSITE: a collection of one or more web pages linked | |
| 13 <p> WEB BROWSER: is an application which is used to view | |
| 14 the World Wide Web. Popular examples: Firefox, Interne | |
| 15 Chrome, and Opera. </p> | |
| 16 </body> | |
| 17 </html> | |
| HTML language | |
| Ln 15, Col 20 Spaces: 4 UTF-8 CRLF HTML | |
| 16 | |
| 0 0 0 | |
| -------- Page 19 (Lecture #4-19.jpg) --------- | |
| ( program#8.html ) عملي | |
| HTML Paragraphs | |
| 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. | |
| 17 | |
| -------- Page 20 (Lecture #4-20.jpg) --------- | |
| HTML Paragraphs الفقرات | |
| مثال (4): | |
| <html lang="en"> | |
| <head> | |
| <title> HTML Paragraphs </title> | |
| <meta charset='utf-8'> | |
| </head> | |
| <body> | |
| <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> 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> | |
| 18 | |
| -------- Page 21 (Lecture #4-21.jpg) --------- | |
| ( program#9.html ) عملي | |
| EXPLORER | |
| HTML LANGUAGE | |
| program#1.html | |
| program#2.html | |
| program#3.html | |
| program#4.html | |
| program#5.html | |
| program#6.html | |
| program#7.html | |
| program#8.html | |
| program#9.html | |
| Welcome program#9.html html body p | |
| <html lang="en"> | |
| <head> | |
| <title> HTML Paragraphs </title> | |
| <meta charset='utf-8'> | |
| </head> | |
| <body> | |
| <h1> WEB PAGE: </h1> | |
| <p> a single document on a website, usually consisting of | |
| document and any items that are displayed within that | |
| images or style sheets. </p> | |
| <h1> HOME PAGE: </h1> | |
| <p> The entry page for a website, which can link to additi | |
| 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> WEB BROWSER: </h1> | |
| <p> is an application which is used to view pages and navi | |
| the World Wide Web. Popular examples: Firefox, Interne | |
| Chrome, and Opera. </p> | |
| </body> | |
| OUTLINE | |
| TIMELINE | |
| Ln 18, Col 29 Spaces: 4 UTF-8 CRLF HTML | |
| 19 | |
| -------- Page 22 (Lecture #4-22.jpg) --------- | |
| ( program#9.html ) عملي | |
| HTML Paragraphs | |
| 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. | |
| 20 | |
| -------- Page 23 (Lecture #4-23.jpg) --------- | |
| HTML Paragraphs الفقرات | |
| سمات/خصائص Attributes لتنسيق الفقرات : paragraphs | |
| - خاصية المحاذاة Align ، خاصية العنوان Title : | |
| <p align="center" title="هنا لمحة سريعة"> | |
| نص الفقرة | |
| </p> | |
| - تستخدم الخاصية align لتحديد مكان النص ( نص الفقرة ) ، وقد تم تحديده في المنتصف باستخدام القيمة center وقد تكون ( left , right , center ) . | |
| - عند إضافة الخاصية title ستعرض قيمة الخاصية كتلميح عند تمرير المؤشر فوق الفقرة. | |
| - الخاصية title تعمل مع عناصر أخرى كالروابط، والصور، وغيرها. | |
| 21 | |
| -------- Page 24 (Lecture #4-24.jpg) --------- | |
| HTML Paragraphs الفقرات | |
| : مثال - | |
| <html lang="en"> | |
| <head> | |
| <title> Align & Title </title> | |
| <meta charset='utf-8'> | |
| </head> | |
| <body> | |
| <p align="center" title="WEB PAGE"> WEB PAGE: a single document on a website. </p> | |
| </body> | |
| </html> | |
| 22 | |
| -------- Page 25 (Lecture #4-25.jpg) --------- | |
| ( program#10.html ) عملي | |
| EXPLORER | |
| HTML LANGUAGE | |
| program#1.html | |
| program#2.html | |
| program#3.html | |
| program#4.html | |
| program#5.html | |
| program#6.html | |
| program#7.html | |
| program#8.html | |
| program#9.html | |
| program#10.html | |
| OUTLINE | |
| TIMELINE | |
| program#10.html | |
| program#10.html x | |
| HTML language | |
| <html lang="en"> | |
| <head> | |
| <title> Align & Title </title> | |
| <meta charset='utf-8'> | |
| </head> | |
| <body> | |
| <p align="center" title="WEB PAGE"> WEB PAGE: a single doc | |
| </body> | |
| </html> | |
| Ln 10, Col 1 Spaces: 4 UTF-8 CRLF HTML | |
| 23 | |
| -------- Page 26 (Lecture #4-26.jpg) --------- | |
| عملي ( program#10.html ) | |
| Align & Title | |
| file:///C:/Users/Z10/Desktop/HTML%20language/program%2310.html | |
| WEB PAGE: a single document on a website. | |
| Align & Title | |
| file:///C:/Users/Z10/Desktop/HTML%20language/program%2310.html | |
| WEB PAGE: a single document on a website. | |
| WEB PAGE | |
| عند وضع الماوس | |
| على الفقرة | |
| 24 | |
| -------- Page 27 (Lecture #4-27.jpg) --------- | |
| HTML Paragraphs الفقرات | |
| - لكي تظهر المسافات في الفقرة يتم إستخدام الوسم <pre> ... </pre> بدلا من إستخدام الوسم <p> ... </p> | |
| حيث أن المسافات في الفقرة بإستخدام الوسم <p> يعتبرها المتصفح مسافة واحدة فقط | |
| 25 | |
| -------- Page 28 (Lecture #4-28.jpg) --------- | |
| HTML Paragraphs الفقرات | |
| مثال : يوضح كيف يتعامل الوسم <p> مع المسافات. | |
| <html lang="en"> | |
| <head> | |
| <title> Paragraphs </title> | |
| <meta charset="utf-8"> | |
| </head> | |
| <body> | |
| <p> WEB PAGE: a single document on a website. </p> | |
| <p> WEB PAGE: | |
| a single | |
| document on | |
| a website. </p> | |
| </body> | |
| </html> | |
| مسافات | |
| 26 | |
| -------- Page 29 (Lecture #4-29.jpg) --------- | |
| ( program#11.html ) عملي | |
| EXPLORER | |
| HTML LANGUAGE | |
| program#1.html | |
| program#2.html | |
| program#3.html | |
| program#4.html | |
| program#5.html | |
| program#6.html | |
| program#7.html | |
| program#8.html | |
| program#9.html | |
| program#10.html | |
| program#11.html | |
| OUTLINE | |
| TIMELINE | |
| program#11.html | |
| program#11.html x | |
| <html lang="en"> | |
| <head> | |
| <title> Paragraphs </title> | |
| <meta charset='utf-8'> | |
| </head> | |
| <body> | |
| <p > WEB PAGE: a single document on a website. </p> | |
| <p > WEB PAGE: | |
| a single | |
| document on | |
| a website. </p> | |
| </body> | |
| </html> | |
| Ln 14, Col 1 Spaces: 4 UTF-8 CRLF HTML | |
| -------- Page 30 (Lecture #4-30.jpg) --------- | |
| ( program#11.html ) عملي | |
| WEB PAGE: a single document on a website. | |
| WEB PAGE: a single document on a website. | |
| 28 | |
| -------- Page 31 (Lecture #4-31.jpg) --------- | |
| HTML Paragraphs الفقرات | |
| مثال: يوضح كيف يتعامل الوسم <pre> مع المسافات. | |
| <html lang="en"> | |
| <head> | |
| <title> Paragraphs </title> | |
| <meta charset='utf-8'> | |
| </head> | |
| <body> | |
| <pre> WEB PAGE: a single document on a website. </pre> | |
| <pre> WEB PAGE: | |
| a single | |
| document on | |
| a website. </pre> | |
| </body> | |
| </html> | |
| مسافات | |
| 29 | |
| -------- Page 32 (Lecture #4-32.jpg) --------- | |
| ( program#12.html ) عملي | |
| EXPLORER | |
| HTML LANGUAGE | |
| program#1.html | |
| program#2.html | |
| program#3.html | |
| program#4.html | |
| 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#12.html | |
| html > head > meta | |
| 1 <html lang="en"> | |
| 2 <head> | |
| 3 <title> Paragraphs </title> | |
| 4 <meta charset='utf-8'> | |
| 5 </head> | |
| 6 <body> | |
| 7 <pre> WEB PAGE: a single document on a website. </pre> | |
| 8 <pre> WEB PAGE: | |
| 9 a single | |
| 10 document on | |
| 11 a website. </pre> | |
| 12 </body> | |
| 13 </html> | |
| OUTLINE | |
| TIMELINE | |
| Ln 4, Col 30 Spaces: 4 UTF-8 CRLF HTML | |
| 30 | |
| -------- Page 33 (Lecture #4-33.jpg) --------- | |
| ( program#12.html ) عملي | |
| WEB PAGE: a single document on a website. | |
| WEB PAGE: | |
| a single | |
| document on | |
| a website. | |
| -------- Page 34 (Lecture #4-34.jpg) --------- | |
| HTML Paragraphs الفقرات | |
| - تعرف الفقرات بإستخدام الوسم <p> ... </p> مثل الوسم <span> ... </span> . | |
| - الإختلاف بين وسم <span> ووسم <p> هو أن الوسم <p> هو عنصر block كل <p> تكتب في سطر، بينما الوسم <span> هو عنصر line . | |
| 32 | |
| -------- Page 35 (Lecture #4-35.jpg) --------- | |
| HTML Paragraphs الفقرات | |
| مثال: يوضح كيف يعمل الوسم <p>. | |
| <html lang="en"> | |
| <head> | |
| <title> HTML Paragraphs </title> | |
| <meta charset='utf-8'> | |
| </head> | |
| <body> | |
| <p> WEB PAGE: a single document on a website.</p> | |
| <p> HOME PAGE: The entry page for a website. </p> | |
| </body> | |
| </html> | |
| 33 | |
| -------- Page 36 (Lecture #4-36.jpg) --------- | |
| ( program#13.html ) عملي | |
| EXPLORER | |
| HTML LANGUAGE | |
| program#1.html | |
| program#2.html | |
| program#3.html | |
| program#4.html | |
| 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#13.html | |
| program#13.html | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <title> HTML Paragraphs </title> | |
| <meta charset='utf-8'> | |
| </head> | |
| <body> | |
| <p> WEB PAGE: a single document on a website.</p> | |
| <p> HOME PAGE: The entry page for a website. </p> | |
| </body> | |
| </html> | |
| OUTLINE | |
| TIMELINE | |
| Ln 11, Col 1 Spaces: 4 UTF-8 CRLF HTML | |
| -------- Page 37 (Lecture #4-37.jpg) --------- | |
| ( program#13.html ) عملي | |
| HTML Paragraphs | |
| WEB PAGE: a single document on a website. | |
| HOME PAGE: The entry page for a website. | |
| 35 | |
| -------- Page 38 (Lecture #4-38.jpg) --------- | |
| HTML Paragraphs الفقرات | |
| مثال: يوضح كيف يعمل الوسم <span>. | |
| <html lang="en"> | |
| <head> | |
| <title> HTML Paragraphs </title> | |
| <meta charset='utf-8'> | |
| </head> | |
| <body> | |
| <span> WEB PAGE: a single document on a website.</span> | |
| <span> HOME PAGE: The entry page for a website. </span> | |
| </body> | |
| </html> | |
| 36 | |
| -------- Page 39 (Lecture #4-39.jpg) --------- | |
| ( program#14.html ) عملي | |
| EXPLORER | |
| HTML LANGUAGE | |
| program#1.html | |
| program#2.html | |
| program#3.html | |
| program#4.html | |
| 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#14.html | |
| <html lang="en"> | |
| <head> | |
| <title> HTML Paragraphs </title> | |
| <meta charset='utf-8'> | |
| </head> | |
| <body> | |
| <span> WEB PAGE: a single document on a website.</span> | |
| <span> HOME PAGE: The entry page for a website. </span> | |
| </body> | |
| </html> | |
| OUTLINE | |
| TIMELINE | |
| 37 | |
| -------- Page 40 (Lecture #4-40.jpg) --------- | |
| ( program#14.html ) عملي | |
| HTML Paragraphs | |
| WEB PAGE: a single document on a website. HOME PAGE: The entry page for a website. | |
| 38 | |
| -------- Page 41 (Lecture #4-41.jpg) --------- | |
| Thank you | |