| -------- Page 1 (Lecture #9-01.jpg) --------- | |
| Faculty of Information Technology – Tripoli University | |
| مقدمة في برمجة الإنترنت | |
| Introduction to Internet Programming | |
| [ ITGS226 ] | |
| المحاضرة التاسعة | |
| أ. وفاء حسين المصباحي | |
| أستاذة المادة | |
| HTML5 | |
| CSS3 | |
| XML | |
| JS | |
| Cloud | |
| flat | |
| header | |
| .com | |
| footer | |
| .net | |
| PHP | |
| 2025 ربيع | |
| -------- Page 2 (Lecture #9-02.jpg) --------- | |
| المواضيع التي سيتم دراستها في مقرر: مقدمة في برمجة الإنترنت | |
| Introduction to Internet Programming | |
| المحاضرة التاسعة | |
| الحاوية Container. | |
| 1 العناصر الدلالية SEMANTIC ELEMENTS. | |
| العناصر الغير دلالية NON-SEMANTIC ELEMENTS. | |
| -------- Page 3 (Lecture #9-03.jpg) --------- | |
| المواضيع التي سيتم دراستها في مقرر : مقدمة في برمجة الإنترنت | |
| Introduction to Internet Programming | |
| المحاضرة التاسعة | |
| XHTML | |
| 1 | |
| قواعد XHTML. | |
| تعريف نوع المستند <!DOCTYPE> . | |
| -------- Page 4 (Lecture #9-04.jpg) --------- | |
| Container الحاوية | |
| - لكي لا يحدث تداخل تعمل container لكل جزء في code. | |
| - لا تستطيع العمل بـ container إلا بإستخدام css. | |
| Container | |
| HTML - CSS | |
| ملابس مواد غذائية هواتف الميناء | |
| -------- Page 5 (Lecture #9-05.jpg) --------- | |
| Container الحاوية | |
| <h1> | |
| <p> | |
| <img> | |
| <video> | |
| . | |
| . | |
| . | |
| container | |
| 2 | |
| -------- Page 6 (Lecture #9-06.jpg) --------- | |
| Container الحاوية | |
| Container | |
| SEMANTIC ELEMENTS | |
| • <header> | |
| • <nav> | |
| • <section> | |
| • <article> | |
| • <aside> | |
| • <footer> | |
| NON-SEMANTIC ELEMENTS | |
| • <div> | |
| • <span> | |
| 3 | |
| -------- Page 7 (Lecture #9-07.jpg) --------- | |
| SEMANTIC ELEMENTS العناصر الدلالية | |
| ▪ <header> | |
| ▪ <nav> | |
| ▪ <section> | |
| ▪ <article> | |
| ▪ <aside> | |
| ▪ <footer> | |
| <header> | |
| <nav> | |
| <section> | |
| <article> | |
| <aside> | |
| <footer> | |
| -------- Page 8 (Lecture #9-08.jpg) --------- | |
| SEMANTIC ELEMENTS العناصر الدلالية | |
| <HEADER> | |
| ► The <header> element represents a container for introductory content or a set of navigational links. | |
| ► A <header> element typically contains: | |
| ▪ one or more heading elements (<h1> - <h6>). | |
| ▪ logo or icon. | |
| ▪ Authorship information. | |
| ► It is a Block element that may contain block or inline or text content. | |
| ► No <footer> or another <header> element as ancestors or descendants. | |
| <header> | |
| <h1>Tutorial Republic</h1> | |
| <nav> | |
| <p><a href="#">Home</a> | | |
| <a href="#">About</a> | | |
| <a href="#">Contact</a> </p> | |
| </nav> | |
| </header> | |
| 5 | |
| -------- Page 9 (Lecture #9-09.jpg) --------- | |
| SEMANTIC ELEMENTS العناصر الدلالية | |
| <NAV> | |
| • The <nav> element defines a section of navigation links (i.e. links to other pages or to parts within the page itself) in a document. | |
| • It is a Block element that may contain block or inline or text content. | |
| <nav> | |
| <ul> | |
| <li><a href="#">Home</a></li> | |
| <li><a href="#">About</a></li> | |
| <li><a href="#">Contact</a></li> | |
| </ul> | |
| </nav> | |
| 6 | |
| -------- Page 10 (Lecture #9-10.jpg) --------- | |
| SEMANTIC ELEMENTS العناصر الدلالية | |
| <SECTION> | |
| ► The <section> element defines a section in a document. | |
| ► Examples of where a <section> element can be used: | |
| • Chapters. | |
| • Introduction. | |
| • News items. | |
| • Contact information. | |
| ► A web page could normally be split into sections for introduction, content, and contact information. | |
| ► It is a Block element that may contain block or inline or text content. | |
| <section> | |
| <h1>Welcome to Our Website</h1> | |
| <p>Welcome and thank you. </p> | |
| </section> | |
| 7 | |
| -------- Page 11 (Lecture #9-11.jpg) --------- | |
| SEMANTIC ELEMENTS العناصر الدلالية | |
| <ARTICLE> | |
| ► The <article> element specifies independent, self-contained content. | |
| ► An article should make sense on its own, and it should be possible to distribute it independently from the rest of the web site. | |
| ► Examples of where the <article> element can be used: | |
| ▪ Forum posts. | |
| ▪ Blog posts. | |
| ▪ User comments. | |
| ▪ Newspaper articles. | |
| ► It is a Block element that may contain block or inline or text content. | |
| <article> | |
| <h1>Introduction to HTML</h1> | |
| <p>HTML is a markup language.</p> | |
| </article> | |
| 8 | |
| -------- Page 12 (Lecture #9-12.jpg) --------- | |
| SEMANTIC ELEMENTS العناصر الدلالية | |
| <ASIDE> | |
| • The <aside> element defines some content aside from the content it is placed in (like a sidebar). | |
| • The <aside> content should be indirectly related to the surrounding content. | |
| • It is a Block element that may contain block or inline or text content. | |
| <aside> | |
| <h1>Apollo 13 Facts</h1> | |
| <p>Apollo 13 was the seventh manned mission in the American Apollo | |
| space program and the third intended to land on the Moon.</p> | |
| </aside> | |
| 9 | |
| -------- Page 13 (Lecture #9-13.jpg) --------- | |
| SEMANTIC ELEMENTS العناصر الدلالية | |
| <ASIDE> | |
| ► The <aside> element defines some content aside from the content it is placed in (like a sidebar). | |
| ► The <aside> content should be indirectly related to the surrounding content. | |
| ► It is a Block element that may contain block or inline or text content. | |
| <aside> | |
| <h1>Apollo 13 Facts</h1> | |
| <p>Apollo 13 was the seventh manned mission in the American Apollo | |
| space program and the third intended to land on the Moon.</p> | |
| </aside> | |
| 10 | |
| -------- Page 14 (Lecture #9-14.jpg) --------- | |
| SEMANTIC ELEMENTS العناصر الدلالية | |
| <FOOTER> | |
| ► The <footer> element defines a footer for a document or section. | |
| ► A <footer> element typically contains: | |
| ▪ copyright information. | |
| ▪ contact information. | |
| ▪ back to top links. | |
| ▪ related documents. | |
| ► You can have several <footer> elements in one document. | |
| ► It is a Block element that may contain block or inline or text content, but no <footer> or <header>. | |
| <footer> | |
| <nav> | |
| <p><a href="#">Terms of Use</a> | | |
| <a href="#">Privacy Policy</a> | |
| </p> | |
| </nav> | |
| <p>Copyright © 2014 Tutorial Republic</p> | |
| </footer> | |
| 11 | |
| -------- Page 15 (Lecture #9-15.jpg) --------- | |
| NON-SEMANTIC ELEMENTS العناصر الغير دلالية | |
| ▪ <div> | |
| ▪ <span> | |
| 12 | |
| -------- Page 16 (Lecture #9-16.jpg) --------- | |
| NON-SEMANTIC ELEMENTS العناصر غير دلالية | |
| <DIV> | |
| ► The <div> (short for division) tag is generic container for flow content, which has no default rendering or meaning. | |
| ► The <div> tag is extensively used to define the structural sections of a document and to layout a web page using CSS. | |
| ► It is a Block element that may contain block or inline or text content. | |
| <div class="welcome-box"> | |
| <h1>Welcome</h1> | |
| <p>Hi, welcome to our website.</p> | |
| </div> | |
| 13 | |
| -------- Page 17 (Lecture #9-17.jpg) --------- | |
| NON-SEMANTIC ELEMENTS العناصر الغير دلالية | |
| <SPAN> | |
| ► The <span> tag is generic inline container for phrasing content, which has no default rendering or meaning. | |
| ► The <span> tag is extensively used to define the structural sections of a document and to layout a web page using CSS. | |
| ► It is a Inline element that may contain inline or text content. | |
| <p>Here is some | |
| <span style="color:red;"> different </span> | |
| text.</p> | |
| <p>Read the | |
| <span class="important"> Notes </span> | |
| carefully.</p> | |
| 14 | |
| -------- Page 18 (Lecture #9-18.jpg) --------- | |
| XHTML | |
| - XHTML هي إختصار لـ Extensible HTML والتي تعني HTML القابلة للتوسع ( البعض يدعوها HTML الموسعة ). | |
| - لا تختلف عن HTML التقليدية من ناحية الوسوم tags ولا من ناحية الخصائص attributes ، ولكن يمكن إعتبارها معايير أكثر صرامة لكتابة مستندات html . | |
| - تعطي صفحات الويب توافق أكبر مع مستعرضات الويب، كما يدل الإلتزام بمعايير XHTML على إحترافية أكبر في العمل. | |
| - شبكة الإنترنت تحوي مليارات صفحات الويب نسبة كبيرة منها مكتوبة بشكل رديء؛ يشبه المثال التالي: | |
| <hTml> | |
| <heaD> | |
| <title> صفحة HTML رديئة </title> | |
| <BODY> | |
| <h1>Bad HTML | |
| <p>This is a paragraph | |
| </boDy> | |
| 15 | |
| -------- Page 19 (Lecture #9-19.jpg) --------- | |
| قواعد XHTML | |
| تلخص XHTML في مجموعة من القواعد البسيطة التي ما إن يتم تطبيقها حين كتابة أي مستند HTML فسيعد المستند مستند XHTML ، والقواعد هي: | |
| ▪ لا تنس وسوم الإغلاق. | |
| ▪ اكتب وسوم وخصائص صفحتك بأحرف صغيرة Lower Case. | |
| ▪ راع أن يكون ترتيب وسوم الإغلاق متناظرًا مع وسوم الفتح. | |
| ▪ ضع القيم المستندة للخصائص بين علامات إقتباس. | |
| ▪ لا تستغني عن أي من وسوم <html> و <body> و <head>. | |
| ▪ ضع تعريف نوع المستند DOCTYPE في بداية صفحتك. | |
| 16 | |
| -------- Page 20 (Lecture #9-20.jpg) --------- | |
| تعريف نوع المستند <!DOCTYPE> | |
| تنص معايير XHTML على أن كل صفحات الويب يجب أن تحوي في أول سطر منها على سطر التعريف <!DOCTYPE> والذي يعني تعريف نوع المستند Document Type Definition أو DTD إختصاراً، وذلك أن مستعرضات الويب تستخدم هذا السطر كمرجعية قواعدية لصيغة الكتابة ولأنواع الوسوم في الصفحة. | |
| ملاحظة: <!DOCTYPE> ليس وسماً من وسوم اللغة وإنما هو سطر تعريف المستند. | |
| 17 | |
| -------- Page 21 (Lecture #9-21.jpg) --------- | |
| Thank you | |