| -------- Page 1 (Lecture #5-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 #5-02.jpg) --------- | |
| المحاضرة التي سيتم دراستها في مقرر : مقدمة في برمجة الإنترنت | |
| Introduction to Internet Programming | |
| المحاضرة الخامسة | |
| تابع | |
| 1. الفقرات HTML Paragraphs. | |
| 2. عنصر الخط الأفقي Horizontal Line. | |
| 3. التعليقات Comments. | |
| 4. عناصر تنسيق النصوص Text Formatting. | |
| -------- Page 3 (Lecture #5-03.jpg) --------- | |
| HTML Paragraphs الفقرات | |
| • وسم <br> أو <br/> : يستخدم لعمل سطر جديد line break. | |
| - هو Single Tag. | |
| - هو عنصر فاضي Empty element. | |
| -------- Page 4 (Lecture #5-04.jpg) --------- | |
| HTML Paragraphs الفقرات | |
| مثال: يوضح كيف يعمل وسم <br> وسم <span>. | |
| <html lang="en"> | |
| <head> | |
| <title> Line break </title> | |
| <meta charset='utf-8'> | |
| </head> | |
| <body> | |
| <span> WEB PAGE: a single document on a website.</span> | |
| <br> | |
| <span> HOME PAGE: The entry page for a website. </span> | |
| </body> | |
| </html> | |
| 2 | |
| -------- Page 5 (Lecture #5-05.jpg) --------- | |
| عملي ( program#15.html ) | |
| File Edit Selection | |
| EXPLORER | |
| HTML LANGUAGE | |
| 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#15.html | |
| program#16.html | |
| OUTLINE | |
| TIMELINE | |
| program#15.html | |
| html | |
| <html lang="en"> | |
| <head> | |
| <title> Line break </title> | |
| <meta charset='utf-8'> | |
| </head> | |
| <body> | |
| <span> WEB PAGE: a single document on a website. </span> | |
| <br> | |
| <span> HOME PAGE: The entry page for a website. </span> | |
| </body> | |
| </html> | |
| Ln 11, Col 8 Spaces: 4 UTF-8 CRLF HTML | |
| 3 | |
| -------- Page 6 (Lecture #5-06.jpg) --------- | |
| ( program#15.html ) عملي | |
| Line break | |
| WEB PAGE: a single document on a website. | |
| HOME PAGE: The entry page for a website. | |
| 4 | |
| -------- Page 7 (Lecture #5-07.jpg) --------- | |
| عنصر الخط الأفقي Horizontal Line | |
| - وسم <hr> أو <hr/> : يستخدم لإنشاء الخطوط الأفقية في الصفحة. | |
| - هو Single Tag. | |
| - هو عنصر فاضي Empty element . | |
| 5 | |
| -------- Page 8 (Lecture #5-08.jpg) --------- | |
| Horizontal Line عنصر الخط الأفقي | |
| مثال : يوضح كيف يعمل وسم <hr> . | |
| <html lang="en"> | |
| <head> | |
| <title> Horizontal Line </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> | |
| <hr> | |
| <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> | |
| <hr> | |
| <h1> WEBSITE: </h1> | |
| <p> a collection of one or more web pages linked together. </p> | |
| </body> | |
| </html> | |
| 6 | |
| -------- Page 9 (Lecture #5-09.jpg) --------- | |
| عملي ( program#16.html ) | |
| EXPLORER | |
| HTML LANGUAGE | |
| 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#15.html | |
| program#16.html | |
| program#16.html html body | |
| <html lang="en"> | |
| <head> | |
| <title> Horizontal Line </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> | |
| <hr> | |
| <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> | |
| <hr> | |
| <h1> WEBSITE: </h1> | |
| <p> a collection of one or more web pages linked together. | |
| </body> | |
| </html> | |
| OUTLINE | |
| TIMELINE | |
| Ln 6, Col 11 Spaces: 4 UTF-8 CRLF HTML | |
| -------- Page 10 (Lecture #5-10.jpg) --------- | |
| ( program#16.html ) عملي | |
| Horizontal Line | |
| 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. | |
| -------- Page 11 (Lecture #5-11.jpg) --------- | |
| التعليقات Comments | |
| - اعتاد المبرمجون في لغات البرمجة التقليدية على كتابة أسطر توضيحية لا تعالج إذ أنها لا تعتبر جزءاً من الشيفرة، وإنما تستخدم فقط لتذكير المبرمج بأجزاء الشيفرة عندما يعود لتعديلها بعد فترة من الزمن، وهذه الأسطر تعرف بالتعليقات Comments ، ومع أن HTML لغة وصفية إلا أنها توفر آلية لكتابة التعليقات ضمن المستندات، فتقدم الصيغة العامة التالية لكتابة التعليق : | |
| <!-- comment --> | |
| -------- Page 12 (Lecture #5-12.jpg) --------- | |
| Comments التعليقات | |
| : مثال - | |
| <html lang="en"> | |
| <head> | |
| <title> Comment </title> | |
| <meta charset='utf-8'> | |
| </head> | |
| <body> | |
| <!-- paragraph --> | |
| <br/> | |
| <h3> WEB PAGE: </h3> | |
| <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> | |
| 10 | |
| -------- Page 13 (Lecture #5-13.jpg) --------- | |
| ( program#17.html ) عملي | |
| EXPLORER | |
| HTML LANGUAGE | |
| 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#15.html | |
| program#16.html | |
| program#17.html | |
| program#17.html | |
| program#17.html > html > body > p | |
| <html lang="en"> | |
| <head> | |
| <title> Comment </title> | |
| <meta charset='utf-8'> | |
| </head> | |
| <body> | |
| <!-- paragraph --> | |
| <br/> | |
| <h3> WEB PAGE: </h3> | |
| <p> a single document on a website, usually consisting o | |
| document and any items that are displayed within th | |
| images or style sheets. </p> | |
| </body> | |
| </html> | |
| OUTLINE | |
| TIMELINE | |
| Ln 11, Col 14 Spaces: 4 UTF-8 CRLF HTML | |
| -------- Page 14 (Lecture #5-14.jpg) --------- | |
| ( program#17.html ) عملي | |
| 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. | |
| -------- Page 15 (Lecture #5-15.jpg) --------- | |
| عناصر تنسيق النصوص Text Formatting | |
| - توفر لغة HTML مجموعة من العناصر لتنسيق النصوص: | |
| Tag Effect | |
| <strong> أو <b> bold لجعل النص عريضاً | |
| <small> لجعل النص أصغر حجماً | |
| <i> أو <em> لجعل النص مائلاً italic | |
| <mark> تظليل النص باللون الأصفر | |
| <u> أو <ins> لوضع خط أسفل النص | |
| <s> أو <del> شطب النص Delete | |
| <sup> لكتابة الكلمة أعلى السطر superscript | |
| <sub> لكتابة الكلمة أسفل السطر subscript | |
| - كل عناصر formatting هي عناصر inline. | |
| 13 | |
| -------- Page 16 (Lecture #5-16.jpg) --------- | |
| عناصر تنسيق النصوص Text Formatting | |
| - مثال : يوضح عمل عناصر تنسيق النصوص Text Formatting. | |
| <html lang="en"> | |
| <head> | |
| <title> Text Formatting </title> | |
| <meta charset='utf-8'> | |
| </head> | |
| <body> | |
| <!-- Text formatting --> | |
| <br/> | |
| <h3> WEB PAGE: </h3> | |
| <p> a single document on <b>a website</b>. </p> | |
| <p> a single document on <small>a website</small>. </p> | |
| <p> a single document on <mark>a website</mark>. </p> | |
| <p> a single document on <i>a website</i>. </p> | |
| <p> a single document on <u>a website</u>. </p> | |
| <p> a single document on <s>a website</s>. </p> | |
| <p> a single document on <sup>a website</sup>. </p> | |
| <p> a single document on <sub>a website</sub>. </p> | |
| </body> | |
| </html> | |
| 14 | |
| -------- Page 17 (Lecture #5-17.jpg) --------- | |
| عملي ( program#18.html ) | |
| EXPLORER | |
| HTML LANGUAGE | |
| 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#15.html | |
| program#16.html | |
| program#17.html | |
| program#18.html | |
| OUTLINE | |
| TIMELINE | |
| program#18.html | |
| HTML language | |
| <html lang="en"> | |
| <head> | |
| <title> Text Formatting </title> | |
| <meta charset='utf-8'> | |
| </head> | |
| <body> | |
| <!-- Text formatting --> | |
| <br/> | |
| <h3> WEB PAGE: </h3> | |
| <p> a single document on <b>a website</b>. </p> | |
| <p> a single document on <small>a website</small>. </p> | |
| <p> a single document on <mark>a website</mark>. </p> | |
| <p> a single document on <i>a website</i>. </p> | |
| <p> a single document on <u>a website</u>. </p> | |
| <p> a single document on <s>a website</s>. </p> | |
| <p> a single document on <sup>a website</sup>. </p> | |
| <p> a single document on <sub>a website</sub>. </p> | |
| </body> | |
| </html> | |
| Ln 16, Col 17 Spaces: 4 UTF-8 CRLF HTML | |
| 15 | |
| -------- Page 18 (Lecture #5-18.jpg) --------- | |
| ( program#18.html ) عملي | |
| WEB PAGE: | |
| a single document on a website. | |
| a single document on a website. | |
| a single document on a website. | |
| a single document on a website. | |
| a single document on a website. | |
| a single document on a website. | |
| a single document on a website. | |
| a single document on a website. | |
| -------- Page 19 (Lecture #5-19.jpg) --------- | |
| Text Formatting عناصر تنسيق النصوص | |
| الإختلاف بين tags : | |
| <i> | |
| Italic text | |
| لمجرد الشكل | |
| <em> | |
| Emphasize text | |
| – حكمة | |
| – الجمل المقتبسة | |
| – عبارة من لغة مختلفة | |
| <b> | |
| Bold text | |
| لمجرد الشكل | |
| <strong> | |
| Important text | |
| للعِبارات المهمة | |
| <sub> | |
| Subscript text | |
| تستخدم في الرموز الكيميائية | |
| <sup> | |
| Superscript text | |
| تستخدم في المعادلات الرياضية لتمثيل الأُس | |
| <u> | |
| Misspelled word | |
| لمجرد الشكل | |
| أو لتحديد أن الكلمة بها خطأ | |
| <ins> | |
| inserted text | |
| لإدخال نص جديد | |
| (كلام مضاف) | |
| 17 | |
| -------- Page 20 (Lecture #5-20.jpg) --------- | |
| Thank you | |