-------- 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 العناوين يتم تعريفها عن طريق إستخدام الوسوم :

،

،

،

،

،
. هذه الوسوم تجعل العنوان عريضاً مع إضافة سطر فارغ تحت العنوان، حرف h هو إختصار لكلمة heading . -

يحدد العنوان الأكثر أهمية، ويستخدم للعناوين الرئيسية لأنه الأكبر حجماً. -

أقل حجماً بقليل من

، ثم

وهكذا...، إلى

ويحدد العنوان الأقل حجماً وأهمية. - هي عنصر block : تحتل السطر كاملاً بما فيه الفراغ الموجود أمامها، ولا تسمح لعناصر أخرى أن تحتل ذلك الفراغ، حتى وإن كانت عناصر من نفس العلامة فكل واحدة تأخذ حيزها كاملاً. ملاحظات: - محركات البحث تستخدم العناوين لفهرسة البنية الأساسية ومحتوى صفحات الويب. - يعمل المستخدمون على التنقل بين صفحات الويب حسب العناوين، لذا لابد من استخدام العناوين المناسبة. - وسوم العناوين تستخدم لتنسيق العناوين فقط، ولا يجب استخدامها لتنسيق أي نص آخر. -------- Page 4 (Lecture #4-04.jpg) --------- HTML Headings العناوين : (1) مثال - 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
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 2 3 page to heading elements 4 5 6 7

heading to level 1

8

heading to level 2

9

heading to level 3

10

heading to level 4

11
heading to level 5
12
heading to level 6
13 14 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) ✓ قمنا بتزويد الوسم بالصفة dir والتي تحدد إتجاه قراءة المستند وقمنا بإسناد القيمة rtl لها وذلك لجعل إتجاه القراءة من اليمين إلى اليسار right to left وهو ما يتناسب مع اللغة العربية. ✓ في حال أنه لم يتم كتابة هذه الصفة فإن القيمة الإفتراضية لها ltr أي إتجاه القراءة الإفتراضي من اليسار إلى اليمين. صفحة لعناصر العنوان

عنوان لمستوى 1

عنوان لمستوى 2

عنوان لمستوى 3

عنوان لمستوى 4

عنوان لمستوى 5
عنوان لمستوى 6
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 2 3 صفحة لعناصر العنوان 4 5 6 7

١ عنوان لمستوى

8

٢ عنوان لمستوى

9

٣ عنوان لمستوى

10

٤ عنوان لمستوى

11
٥ عنوان لمستوى
12
٦ عنوان لمستوى
13 14 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 - تعرف الفقرات بالوسم

...

ضع فقرتك داخل هذا الوسم، سيميز الفقرة ويضيف سطرا فارغا بعدها. - هو عنصر block: تحتل السطر كاملا بما فيه الفراغ الموجود أمامها، ولا تسمح لعناصر أخرى أن تحتل ذلك الفراغ، حتى وإن كانت عناصر من نفس العلامة فكل واحدة تأخذ حيزها كاملا. 8 -------- Page 11 (Lecture #4-11.jpg) --------- HTML Paragraphs الفقرات : (1) مثال - 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.

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 2 3 HTML Paragraphs 4 5 6 7

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.

10 11 12 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 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.

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 Paragraphs

WEB PAGE:

a single document on a website, usually consisting of document and any items that are displayed within that images or style sheets.

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

مثال (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 2 3 HTML Paragraphs 4 5 6 7

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.

10

HOME PAGE: The entry page for a website, which can lin 11 on the same website or pages on other sites.

12

WEBSITE: a collection of one or more web pages linked 13

WEB BROWSER: is an application which is used to view 14 the World Wide Web. Popular examples: Firefox, Interne 15 Chrome, and Opera.

16 17 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 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.

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 Paragraphs

WEB PAGE:

a single document on a website, usually consisting of document and any items that are displayed within that images or style sheets.

HOME PAGE:

The entry page for a website, which can link to additi 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 navi the World Wide Web. Popular examples: Firefox, Interne Chrome, and Opera.

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 :

نص الفقرة

- تستخدم الخاصية align لتحديد مكان النص ( نص الفقرة ) ، وقد تم تحديده في المنتصف باستخدام القيمة center وقد تكون ( left , right , center ) . - عند إضافة الخاصية title ستعرض قيمة الخاصية كتلميح عند تمرير المؤشر فوق الفقرة. - الخاصية title تعمل مع عناصر أخرى كالروابط، والصور، وغيرها. 21 -------- Page 24 (Lecture #4-24.jpg) --------- HTML Paragraphs الفقرات : مثال - Align & Title

WEB PAGE: a single document on a website.

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 Align & Title

WEB PAGE: a single doc 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 الفقرات - لكي تظهر المسافات في الفقرة يتم إستخدام الوسم 

 ...
بدلا من إستخدام الوسم

...

حيث أن المسافات في الفقرة بإستخدام الوسم

يعتبرها المتصفح مسافة واحدة فقط 25 -------- Page 28 (Lecture #4-28.jpg) --------- HTML Paragraphs الفقرات مثال : يوضح كيف يتعامل الوسم

مع المسافات. Paragraphs

WEB PAGE: a single document on a website.

WEB PAGE: a single document on a website.

مسافات 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 Paragraphs

WEB PAGE: a single document on a website.

WEB PAGE: a single document on a website.

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 الفقرات مثال: يوضح كيف يتعامل الوسم 
 مع المسافات.



 Paragraphs 




 WEB PAGE:     a single        document on a website. 


 WEB PAGE:
    a single
    document on
    a website. 




مسافات

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  
2    
3        Paragraphs  
4      
5    
6    
7      
  WEB PAGE:    a single    document on a website.  

8      
  WEB PAGE:
9                a single
10               document on
11               a website.  

12   
13 

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 الفقرات

- تعرف الفقرات بإستخدام الوسم 
 ... 
 مثل الوسم  ...  .
- الإختلاف بين وسم  ووسم 
 هو أن الوسم 
 هو عنصر block كل 
 تكتب في سطر، بينما الوسم  هو عنصر line .

32

-------- Page 35 (Lecture #4-35.jpg) ---------
HTML Paragraphs الفقرات

مثال: يوضح كيف يعمل الوسم 
.


  
     HTML Paragraphs 
    
  
  
    
 WEB PAGE: a single document on a website.

    
 HOME PAGE: The entry page for a website. 

  


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




     HTML Paragraphs 
    


    
 WEB PAGE: a single document on a website.

    
 HOME PAGE: The entry page for a website. 




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 الفقرات

مثال: يوضح كيف يعمل الوسم .


  
     HTML Paragraphs 
    
  
  
     WEB PAGE: a single document on a website.
     HOME PAGE: The entry page for a website. 
  


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 Paragraphs  
    
  
  
      WEB PAGE: a single document on a website.
      HOME PAGE: The entry page for a website. 
  


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