Chat-ai

Sleeping

File size: 18,387 Bytes

b5d0134


-------- Page 1 (Lecture #3-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 #3-02.jpg) ---------
المواضيع التي سنمُر عليها في مقرر : مقدمة في برمجة الإنترنت
Introduction to Internet Programming
المحاضرة الثالثة

1
مقدمة . Introduction

2
لغة الترميز HTML .

3
محرات HTML .

4
إصدارات HTML - HTML History .

5
عناصر HTML - HTML Elements .

6
أساسيات HTML - HTML Basic .

-------- Page 3 (Lecture #3-03.jpg) ---------
٧  :  عملي
. إنشاء مستند HTML

٨  :

HTML  :  عناصر HTML Elements
HTML  :  وسوم HTML Tags

-------- Page 4 (Lecture #3-04.jpg) ---------
Introduction  مقدمة

سنتعلم أحدث إصدار للغة الترميز القياسية HTML ، والتي تعد الخطوة الأولى لأي مطور Web ، إذ سنقوم بشرح لغة HTML5 بعد التمهيد لذلك من خلال شرح HTML التقليدية ، ثم يليها التعرف على معايير XHTML .

-------- Page 5 (Lecture #3-05.jpg) ---------
لغة الترميز HTML

: ما هي HTML

- HTML ترمز للعبارة ( Hyper Text Markup Language ) : لغة ترميز النص التشعبي.
- HTML هي لغة الترميز القياسية المستخدمة لإنشاء صفحات الويب Web pages.
- HTML تصف بنية صفحة الويب Web page.
- HTML تقوم بتسمية أجزاء من محتوى الصفحة من عناوين وفقرات وروابط وغيرها.
- HTML تتكون من سلسلة من العناصر Elements، هذه العناصر تخبر المتصفح Browser بكيفية عرض المحتوى.

2

-------- Page 6 (Lecture #3-06.jpg) ---------
HTML محررات

. لكتابة مستند HTML كل ما تحتاجه هو محرر نصوص بسيط مثل : Notepad أو TextEdit لمستخدمي Mac .

. كما يمكنك استخدام محرر نصوص متقدم مثل : Notepad++ ، Dreamweaver ، Visual Studio Code .
3

-------- Page 7 (Lecture #3-07.jpg) ---------
HTML History   -   HTML إصدارات

منذ الأيام الأولى لشبكة الويب العالمية كان هناك العديد من إصدارات HTML :

تاريخ الإصدار              الإصدار
1991                        HTML
1995                        HTML 2.0
1997                        HTML 3.2
1999                        HTML 4.01
2000                        XHTML
2014                        HTML5
2016                        HTML 5.1
2017                        HTML 5.2

4

-------- Page 8 (Lecture #3-08.jpg) ---------
HTML Elements  -  عناصر HTML

تتكون HTML من شفرات تسمى ( وسوم - Tags ) فتأتي هذه الوسوم بشكل طبيعي بزوجين اثنين : وسوم البداية start tag، ووسم النهاية end tag مع إدراج المحتوى بينهما كالتالي:

<Tag name> هنا يكتب محتوى العنصر </Tag name>

وسم البداية                          وسم النهاية ويتميز بالعلامة /

- وسم النهاية End Tag هو نفسه وسم البداية Start Tag ، ولكن مع إدراج شرطة مائلة للأمام ( / : Slash ) قبل الوسم.

- عنصر HTML - HTML Element : يبدأ من وسم البداية حتى وسم النهاية مرورا بالمحتوى بينهما.

مثال :

<p> الفقرة الأولى </p>

5

-------- Page 9 (Lecture #3-09.jpg) ---------
HTML Elements - عناصر HTML

أنواع العناصر / الوسوم في HTML:
يوجد نوعين من الوسوم Tags:

1. وسوم فردية Single Tags: ويتكون من وسم البداية وهو نفسه وسم النهاية ولا يمكن وضع وسوم أخرى بداخله،
مثل:
<br/>

عند استخدام وسم فردي يمكنك عدم وضع الرمز / في آخره، ولكن من الأفضل وضع الرمز / وذلك للإشارة على أنه وسم فردي،
مثل:
<br/>

2. وسوم زوجية Paired Tags: ويتكون من وسم البداية و وسم النهاية ويمكن وضع وسوم أخرى بداخله، مثل:
<p> ... </p>

6

-------- Page 10 (Lecture #3-10.jpg) ---------
HTML Elements - عناصر HTML

أنواع العناصر / الوسوم في HTML بين Block و Inline:

يوجد نوعين من الوسوم Tags :

1. وسوم من نوع Block: تحتل السطر كاملاً بما فيه الفراغ الموجود أمامها، ولا تسمح لعناصر أخرى أن تحتل ذلك الفراغ، حتى وإن كانت عناصر من نفس العلامة فكل واحدة تأخذ حيزها كاملاً، مثل:

<p> ... </p>

<h1> ... </h1>

2. وسوم من نوع Inline: يحتل السطر الذي يظهر فيه، ويترك الفراغ الباقي لأي عنصر آخر من نفس النوع أو نوع آخر، مثل:

<a> ... </a>

ملاحظة:

- العنصر من النوع block قد يحتوي على عناصر من نفس النوع أو من النوع inline أو كلا النوعين.
- العنصر من النوع inline لا يحتوي سوى على عناصر من نفس نوعه، بمعنى لا تضع أبداً عنصر block داخل inline.

7

-------- Page 11 (Lecture #3-11.jpg) ---------
HTML Basic  -  HTML أساسيات

البنية الرئيسية لصفحة HTML : تتكون صفحة HTML من ثلاث مناطق :

<html>

<head>
<title> عنوان الصفحة </title>

معلومات عن الصفحة مثل:
العنوان / روابط لملفات خارجية / اللغة / ..

</head>

<body>

هنا محتويات الصفحة:
نصوص / صور / روابط / جداول / ..

</body>

</html>

المحتوى غير الظاهر
المحتوى الظاهر

8

-------- Page 12 (Lecture #3-12.jpg) ---------
HTML Basic  -  أساسيات HTML

1. المنطقة الرئيسية : Main Section
- وهي المنطقة المحصورة بين الوسمين :  <html> … </html>
- العنصر  <html> هو الوسم الأساسي لصفحة html.
- هذه المنطقة تحدد بداية و نهاية الصفحة، وتضم منطقتي رأس head وجسم body الصفحة، فهي تضم كامل المستند.

2. منطقة رأس الصفحة : Head Section
- وهي المنطقة المحصورة بين الوسمين :  <head> … </head>
- العنصر  <head>  تحتوي على معلومات تصف المستند.
- هذه المنطقة تحتوي على مجموعة من عناصر HTML مثل :  <title>  ،  <meta>  ،  <style>  ،  <link>  ، أغلبها لا يظهر في مستعرض الويب web browser. هذه العناصر Elements تحدد البيانات الوصفية ومجموعة الأحرف والأنماط والروابط للموارد الخارجية مثل ملفات CSS ، وكذلك إضافة المعلومات التي تستخدمها محركات البحث من أجل الأرشفة والبحث.
- المهمة الرئيسية لهذه المنطقة هي إعطاء معلومات عن محتوى الصفحة.

9

-------- Page 13 (Lecture #3-13.jpg) ---------
HTML Basic - أساسيات HTML

- العنصر <title> يدرج داخل <head> ، ويحتوي عنوان الملف، ويجب أن يكون العنوان نصيا فقط ( لا تكتب أي عناصر داخله )، ويظهر هذا العنوان في ( شريط عنوان المتصفح ، في علامة تبويب الصفحة ) ، العنصر <title> مطلوب في مستندات <html> لأنه: (يعرض في نتائج محركات البحث - يوفر عنوانا للصفحة عند إضافتها إلى المفضلة ) .. لذا حاول أن تجعل العنوان دقيقا ومعبرا عن المحتوى.

3. منطقة جسم الصفحة : Body Section :

- وهي المنطقة المحصورة بين الوسمين :  <body> ... </body>

- العنصر <body> يحتوي على محتوى الصفحة المرئي.

- هذه المنطقة هي التي تنتج الشكل النهائي للصفحة، وفيها جميع العناصر التي سيتم عرضها.

<html> , <head> , <title> , <body>
هذه الوسوم هي الوسوم الرئيسية في مستند html

10

-------- Page 14 (Lecture #3-14.jpg) ---------
عملي : إنشاء مستند HTML

إنشاء مستند  : HTML

- برنامج Visual Studio code لكتابة مستند HTML. يتم تنزيل البرنامج من الإنترنت.

Visual Studio Code

- إنشاء مجلد على سطح المكتب.

- عرض مستند HTML على أحد المستعرضات : Browsers

Firefox   -   Google Chrome   -   Opera

11

-------- Page 15 (Lecture #3-15.jpg) ---------
HTML Elements    :     HTML    عناصر
HTML Tags    :     HTML وسوم

<script>   ،   <style>   ،   <link>   ،   <meta>   ،   <title>    :   العناصر/الوسوم داخل وسم head
<title>   :   وسم
<title>   عنصر   -

<html>

  <head>
    <title> Learn HTML language </title>
  </head>

  <body>
    HTML Language
  </body>

</html>

عملي: فتح برنامج Visual Studio Code ثم فتح مجلد باسم HTML Language على سطح المكتب، ثم فتح ملف باسم
Program#1.html بامتداد .html.

12

-------- Page 16 (Lecture #3-16.jpg) ---------
( program#1.html ) عملي

Visual Studio Code

program#1.html x
Welcome
HTML LANGUAGE
program#1.html …
1  <html>
2
3      <head>
4          <title>    Learn HTML language            </title>
5      </head>
6
7      <body>
8          HTML  Language
9      </body>
10
11 </html>
12

OUTLINE
TIMELINE

Opera Internet Explorer

Learn HTML language
file:///C:/Users/Z10/Desktop/HTML%20language/…
HTML Language

13

-------- Page 17 (Lecture #3-17.jpg) ---------
HTML Elements : عناصر HTML
HTML Tags : وسوم HTML

- عنصر <meta> : وسم <meta>

HTML Attributes : السمات/الخصائص

تطلق كلمة خاصية Attribute على التعابير التي تضاف إلى الوسوم، من أجل تحديد الشكل أو الكيفية التي تعمل بها هذه الوسوم.

الوسم يقوم بإخبار المتصفح عن العمل الذي يجب القيام به، أما الخاصية فتحدد الكيفية التي سيتم بها أداء هذا العمل.

ملاحظة:
- السمات/الصفات توفر معلومات إضافية لعناصر HTML.
- جميع أو أغلب عناصر HTML يمكن أن تحتوي على سمات/صفات.
- السمات/الصفات تكون دائماً في وسم البداية.
- السمات/الصفات عادة ما تأتي على شكل أزواج (الاسم = القيمة) :
Name = “value“

14

-------- Page 18 (Lecture #3-18.jpg) ---------
HTML Elements     :     HTML    عناصر
HTML Tags         :     HTML    وسوم

- عنصر  <meta>  :  وسم <meta>

<html lang=“en”>
    <head>
        <title>  Learn HTML language  </title>
        <meta charset=‘utf-8’>
        <meta name=“description” content=“study“>
        <meta name=“keywords” content=“html,css,javascript”>
        <meta name=“author” content=“Wafa Elmisbahi”>
    </head>

    <body>
        HTML Language
    </body>
</html>

15

-------- Page 19 (Lecture #3-19.jpg) ---------
HTML Elements      :      عناصر HTML
HTML Tags          :      وسوم HTML

- عنصر <meta>  :   وسم <meta>

en                  ar

<html lang=“en”>
  <head>
    <title> Learn HTML language </title>
    <meta charset=“utf-8”>
    <meta name=“description” content=“study“>
    <meta name=“keywords” content=“html,css,javascript”>
    <meta name=“author” content=“Wafa Elmisbahi”>
  </head>

  <body>
    HTML Language
  </body>
</html>

يدعم اللغة العربية
يظهر الوصف عند البحث عبر google
الكلمات التي يتم البحث بها في google
مؤلف الموقع

16

-------- Page 20 (Lecture #3-20.jpg) ---------
( program#2.html )  عملي

EXPLORER
HTML LANGUAGE
program#1.html
program#2.html

Welcome
program#1.html
program#2.html

HTML language

program#2.html  html
1  <html lang="en">
2    <head>
3      <title>       Learn HTML language       </title>
4      <meta charset="utf-8">
5      <meta name="description" content="study">
6      <meta name="keywords" content="html,css,javascript">
7      <meta name="author" content="Wafa Elmisbahi">
8    </head>
9
10   <body>
11                   HTML Language
12   </body>
13 </html>

OUTLINE
TIMELINE

Learn HTML language
file:///C:/Users/Z10/Desktop/HTML%20language/
HTML Language

17

-------- Page 21 (Lecture #3-21.jpg) ---------
HTML Elements    :    HTML عناصر
HTML Tags        :    HTML وسوم

<link> عنصر : <link> وسم

<html lang=“en”>
    <head>
        <title>   Learn HTML language   </title>
        <meta charset=‘utf-8’>
        <meta name=“description” content=“study“>
        <meta name=“keywords” content=“html,css,javascript”>
        <meta name=“author” content=“Wafa Elmisbahi”>
        <link rel=“stylesheet” href=“ ….”>
    </head>
    <body>
        HTML Language
    </body>
</html>

18

-------- Page 22 (Lecture #3-22.jpg) ---------
HTML Elements      :      HTML عناصر
HTML Tags          :      HTML وسوم

<link> وسـم :   <link> عنصر -

<html lang=“en”>

     <head>

           <title>   Learn HTML language   </title>

           <meta charset=‘utf-8’>

           <meta name=“description” content=“study“>

           <meta name=“keywords” content=“html,css,javascript”>

           <meta name=“author” content=“Wafa Elmisbahi”>

           <link rel=“stylesheet” href=“ ….”>

     </head>

     <body>

           HTML Language

     </body>

</html>

CSS ملف
موقع ملف CSS
ملف CSS

19

-------- Page 23 (Lecture #3-23.jpg) ---------
HTML Elements : HTML عناصر
HTML Tags : HTML وسوم

<style> عنصر : <style> وسم -

<html lang=“en”>
  <head>
    <title> Learn HTML language </title>
    <meta charset=‘utf-8’>
    <meta name=“description” content=“study“>
    <meta name=“keywords” content=“html,css,javascript”>
    <meta name=“author” content=“Wafa Elmisbahi”>

    <style>
      body{
        background: blue;
      }
    </style>
  </head>

  <body>
    HTML Language
  </body>
</html>

20

-------- Page 24 (Lecture #3-24.jpg) ---------
HTML Elements    :    HTML    عناصر HTML
HTML Tags        :    HTML وسوم

- عنصر : <style>   
  وسوم :  <style>

<html lang=“en”>
   <head>
      <title>  Learn HTML language  </title>
      <meta charset=‘utf-8’>
      <meta name=“description” content=“study“>
      <meta name=“keywords” content=“html,css,javascript”>
      <meta name=“author” content=“Wafa Elmisbahi”>
      <style>
         body{
            background:  blue;
         }
      </style>
   </head>
   <body>
      HTML Language
   </body>
</html>

هذا الكود يحول خلفية ملف html إلى اللون الأزرق
Code CSS

21

-------- Page 25 (Lecture #3-25.jpg) ---------
عملي  ( program#3.html )

EXPLORER
HTML LANGUAGE
  program#1.html
  program#2.html
  program#3.html

Welcome         program#1.html        program#2.html        program#3.html

<html lang="en">
  <head>
    <title>      Learn HTML language      </title>
    <meta charset='utf-8'>
    <meta name="description" content="study">
    <meta name="keywords" content="html,css,javascript">
    <meta name="author" content="Wafa Elmisbahi">
    <style>
         body{
               background:  blue;
              }
    </style>
  </head>
  <body>
        HTML Language
  </body>
</html>

OUTLINE
TIMELINE

Learn HTML language
file:///C:/Users/Z10/Desktop/HTML%20language/prog...
HTML Language

-------- Page 26 (Lecture #3-26.jpg) ---------
HTML Elements    :    HTML    عناصر
HTML Tags        :    HTML وسوم

<script> وسـم    :    <script> عنصر    -

<html lang="en">
    <head>
        <title>  Learn HTML language   </title>
        <meta charset="utf-8">
        <meta name="description" content="study">
        <meta name="keywords" content="html,css,javascript">
        <meta name="author" content="Wafa Elmisbahi">
        <style>
            body{
                background:  blue;
            }
        </style>
        <script>

        </script>
    </head>
    <body>
        HTML Language
    </body>
</html>

23

-------- Page 27 (Lecture #3-27.jpg) ---------
HTML Elements    :    HTML   عناصر
HTML Tags        :    HTML وسوم

عنصر <script>   :   <script> وسم

<html lang=“en”>
    <head>
        <title>  Learn HTML language  </title>
        <meta charset=‘utf-8’>
        <meta name=“description” content=“study“>
        <meta name=“keywords” content=“html,css,javascript”>
        <meta name=“author” content=“Wafa Elmisbahi”>
        <style>
            body{
                background:   blue;
            }
        </style>

        <script>
            {         Code JavaScript
        </script>

    </head>
    <body>
        HTML Language
    </body>
</html>

24

-------- Page 28 (Lecture #3-28.jpg) ---------
Thank you