-------- 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 مع إدراج المحتوى بينهما كالتالي:
هنا يكتب محتوى العنصر
وسم البداية وسم النهاية ويتميز بالعلامة /
- وسم النهاية End Tag هو نفسه وسم البداية Start Tag ، ولكن مع إدراج شرطة مائلة للأمام ( / : Slash ) قبل الوسم.
- عنصر HTML - HTML Element : يبدأ من وسم البداية حتى وسم النهاية مرورا بالمحتوى بينهما.
مثال :
الفقرة الأولى
5
-------- Page 9 (Lecture #3-09.jpg) ---------
HTML Elements - عناصر HTML
أنواع العناصر / الوسوم في HTML:
يوجد نوعين من الوسوم Tags:
1. وسوم فردية Single Tags: ويتكون من وسم البداية وهو نفسه وسم النهاية ولا يمكن وضع وسوم أخرى بداخله،
مثل:
عند استخدام وسم فردي يمكنك عدم وضع الرمز / في آخره، ولكن من الأفضل وضع الرمز / وذلك للإشارة على أنه وسم فردي،
مثل:
2. وسوم زوجية Paired Tags: ويتكون من وسم البداية و وسم النهاية ويمكن وضع وسوم أخرى بداخله، مثل:
...
6
-------- Page 10 (Lecture #3-10.jpg) ---------
HTML Elements - عناصر HTML
أنواع العناصر / الوسوم في HTML بين Block و Inline:
يوجد نوعين من الوسوم Tags :
1. وسوم من نوع Block: تحتل السطر كاملاً بما فيه الفراغ الموجود أمامها، ولا تسمح لعناصر أخرى أن تحتل ذلك الفراغ، حتى وإن كانت عناصر من نفس العلامة فكل واحدة تأخذ حيزها كاملاً، مثل:
...
...
2. وسوم من نوع Inline: يحتل السطر الذي يظهر فيه، ويترك الفراغ الباقي لأي عنصر آخر من نفس النوع أو نوع آخر، مثل:
...
ملاحظة:
- العنصر من النوع block قد يحتوي على عناصر من نفس النوع أو من النوع inline أو كلا النوعين.
- العنصر من النوع inline لا يحتوي سوى على عناصر من نفس نوعه، بمعنى لا تضع أبداً عنصر block داخل inline.
7
-------- Page 11 (Lecture #3-11.jpg) ---------
HTML Basic - HTML أساسيات
البنية الرئيسية لصفحة HTML : تتكون صفحة HTML من ثلاث مناطق :
عنوان الصفحة
معلومات عن الصفحة مثل:
العنوان / روابط لملفات خارجية / اللغة / ..
هنا محتويات الصفحة:
نصوص / صور / روابط / جداول / ..
المحتوى غير الظاهر
المحتوى الظاهر
8
-------- Page 12 (Lecture #3-12.jpg) ---------
HTML Basic - أساسيات HTML
1. المنطقة الرئيسية : Main Section
- وهي المنطقة المحصورة بين الوسمين : …
- العنصر هو الوسم الأساسي لصفحة html.
- هذه المنطقة تحدد بداية و نهاية الصفحة، وتضم منطقتي رأس head وجسم body الصفحة، فهي تضم كامل المستند.
2. منطقة رأس الصفحة : Head Section
- وهي المنطقة المحصورة بين الوسمين : …
- العنصر تحتوي على معلومات تصف المستند.
- هذه المنطقة تحتوي على مجموعة من عناصر HTML مثل : ، <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
HTML Language
عملي: فتح برنامج 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
2
3
4 Learn HTML language
5
6
7
8 HTML Language
9
10
11
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
- عنصر : وسم
HTML Attributes : السمات/الخصائص
تطلق كلمة خاصية Attribute على التعابير التي تضاف إلى الوسوم، من أجل تحديد الشكل أو الكيفية التي تعمل بها هذه الوسوم.
الوسم يقوم بإخبار المتصفح عن العمل الذي يجب القيام به، أما الخاصية فتحدد الكيفية التي سيتم بها أداء هذا العمل.
ملاحظة:
- السمات/الصفات توفر معلومات إضافية لعناصر HTML.
- جميع أو أغلب عناصر HTML يمكن أن تحتوي على سمات/صفات.
- السمات/الصفات تكون دائماً في وسم البداية.
- السمات/الصفات عادة ما تأتي على شكل أزواج (الاسم = القيمة) :
Name = “value“
14
-------- Page 18 (Lecture #3-18.jpg) ---------
HTML Elements : HTML عناصر
HTML Tags : HTML وسوم
- عنصر : وسم
Learn HTML language
HTML Language
15
-------- Page 19 (Lecture #3-19.jpg) ---------
HTML Elements : عناصر HTML
HTML Tags : وسوم HTML
- عنصر : وسم
en ar
Learn HTML language
HTML Language
يدعم اللغة العربية
يظهر الوصف عند البحث عبر 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
2
3 Learn HTML language
4
5
6
7
8
9
10
11 HTML Language
12
13
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 وسوم
عنصر : وسم
Learn HTML language
HTML Language
18
-------- Page 22 (Lecture #3-22.jpg) ---------
HTML Elements : HTML عناصر
HTML Tags : HTML وسوم
وسـم : عنصر -
Learn HTML language
HTML Language
CSS ملف
موقع ملف CSS
ملف CSS
19
-------- Page 23 (Lecture #3-23.jpg) ---------
HTML Elements : HTML عناصر
HTML Tags : HTML وسوم
HTML Language