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