باللغة العربية HTML دورة

دورة مطوري الويب
aneeshikmat@gmail.com أنيس حكمت أبوحميد

1

بسم لله الرحمن الرحيم
ت ﻠ ﻠ ѧ ه, أنعم ѧ ل كل ѧ ك الفض ѧ م ل ѧ المين, الله ѧﻤﺪﺤہ ل رب الع� , نعم ѧ تم ال ѧ ده ت ѧ ذي بحم ѧﻤﺪﺤہ ل ال
� ﺪہ ل رب ﻠѧﻤﺤ, ىѧѧѧ ى ترض ѧѧ ي حت ѧѧѧ ك رب ѧѧѧ د ل ѧѧ ر, فالحم ѧѧѧ ل كثي ѧѧѧ ا بفض ѧѧ لت علين ѧѧѧ ا وتفض ѧѧ علين
العالمين.
ة أو ѧ م مجموع ѧ د, لض ѧ روع جدي ѧ ي مش ѧ وم, ف ѧ يكم الي ѧ ود ال ѧ إخواني, بفضل من لله تعالى, أع
لة ѧ ون سلس ѧ ل, لتك ѧ كل متسلس ѧ تويات بش ѧ دة مس ѧ ى ع ѧ ة وعل ѧ يع مختلف ѧ عدة دروس في مواض
html ن ال ѧ تعليمية متكاملة بإذن لله تعالى للبدء ببرمجة المواقع الالكترونية, ابتدائا م
Ajax in م ال ѧѧѧ ث jQuery مѧѧѧ ث Html م ال 5 ѧѧѧ ث css م ال ѧѧѧ ث JavaScript م ال ѧѧѧ ث
.jQuery UI ثم SASS ثم ,JSON ثم php adv ثم 101 php ثم jQuery
سائلا لله تعالى أن يوفقنا وإياكم الى خير العمل

أهدي هذا العمل المتواضيع الى أخواننا في غزة, الذين أبدو أسمى آيات الثبات والتضحية
ى ѧѧ ير عل ѧѧ م, ونس ѧ ز به ѧѧ ا, نعت ѧѧ ر لن ѧѧ م فخ ѧѧ ق, وأنه ѧѧ ال بح ѧѧ م رج ѧѧ الم أنه ѧѧ وا للع ѧѧ لاص, وأثبت ѧѧ والاخ
خطاهم بإذن لله تعالى.
نحن ѧ ائرون, ف ѧ إخواني في غزة العظيمة, بما أنكم مرابطون, وعلى الحق بإذن لله تعالى س
معكم, ولنا يوم بإذن لله تعالى, نكون معكم, وبين صفوفكم, تحت راية واحدة, لا تفرقنا
ير ѧ تعلم, ونس ѧ اء, ن ѧ دة للق ѧ د الع ѧ نحن نع ѧ ت, ف ѧ ذا الوق ѧ ين ه ѧ ى أن يح ѧ ان, وال ѧ مها كلب ѧ حدود رس
عوب, ѧ يارة الش ѧ و س ѧ العلم ه ѧ ونرتقي في سبل العلم حتى نكون لكم عونا بإذن لله تعالى, ف
وجهادنا بعلمنا, ورفع الجهل عن أمتنا سيكون بإذن لله تعالى دور شبابنا.
اركين ѧ دين أو مب ѧ ا مجاه ѧ دول إم ѧ ع ال ѧ ن جمي ѧ نأتيكم م ѧ أنتم أملنا الآن.. ونحن بإذن لله تعالى س
لكم بالنصر ... فانتظروا قدومنا لأحد الأمرين ...فإما نصر وإما جهاد ..
كما أقدم هذا العمل المتواضع الى اخواني في كل مكان, سائلا لله تعالى أن ينفع بنا وبكم.

الم ѧ ي ع ѧ ن تغط ѧ يع ل ѧ ة ومواض ѧ عليك أن تعلم صديقي أن جميع ما سيتم ذكره من أمثل
و دور ѧ د أن ѧ ر, وتأك ѧ ل عنص ѧ ائص لك ѧ ع الخص ѧ ي جمي ѧ الويب بشكل كامل, ولن تغط
ل ѧ أي شرح/دورة/كتاب هو أن يضعك على الطريق وأنت عليك أن تكمل, واجع
اني ѧ ديقك الث ѧ ل ص ѧ ا, واجع ѧ هو صديقك الأول ..ولا تبتعد عنه نهائي Google من
ك, ѧ ت ذل ѧ اوز ..إذا فعل ѧ هل, وتتج ѧ التطبيق العملي لكل أمر تتعلمه, إياك أن تقول س
تأكد أنك لن تستطيع كتابة شيفرة برمجية صغيرة ... !!
ن ѧѧ ارة ع ѧѧ و عب ѧѧ ك ه ѧѧ راه أمام ѧѧ ذي ت ѧѧ ي ال ѧѧ ع الالكترون ѧѧ اير *_*: الموق ѧѧ ى الط ѧѧ ة عل ѧѧ معلوم
وم ѧѧ دما تق ѧѧ ذلك عن ѧѧ د .. ل ѧѧ د واح ѧѧ ل مجل ѧѧ ت داخ ѧѧ ذتي جمع ѧѧ فحات ال ѧѧ ن الص ѧѧ ة م ѧѧ مجموع
ي, ѧ ع الكترون ѧ ذا موق ѧ ا ..فه ѧ ومن ثم تقوم بربطها مع .. html ببرمجة صفحات ال
الموقع ... dynamic ولكن يختلف مستوى التعقيد, ومقدار ال

أيضا ملاحظة مهمة قبل أن تبدأ ...
يق ѧ ة تنس ѧ رى طريق ѧ ة ... لت ѧ ة المكتوب ѧ ن الأمثل ѧ د م ѧ اك العدي ѧ ستجد هن
ذات ѧѧ ن ب ѧѧ رة ..لك ѧѧ ك مباش ѧѧ ائج أمام ѧѧ رى النت ѧѧ ة وت ѧѧ يفرة البرمجي ѧѧ الش
ا ѧѧ وم بحله ѧѧ أتي لتق ѧѧ دما ت ѧѧ ئلة عن ѧѧ ذه الأس ѧѧ ئلة ... ه ѧѧ اك أس ѧѧ ت هن ѧѧ الوق
م ѧѧ ن ث ѧѧ خ وم ѧѧ ة نس ѧѧ يفرة البرمجي ѧѧ ن الش ѧѧ زء م ѧѧ ذ أي ج ѧѧ م بأخ ѧѧ ...لا تق
يفرة ѧ ة الش ѧ م بكتاب ѧ يئا ..ق ѧ تعلم ش ѧ م ت ѧ ت ل ѧ ذا ..ان ѧ ت ه ѧ لصق.. إن فعل
م ѧѧ ن أه ѧѧ ذه م ѧѧ ة ... وه ѧѧ رة برمجي ѧѧ ك خب ѧѧ بح ل ѧѧ ئ تص ѧѧ ن تخط ѧѧ ر أي ѧѧ وانظ
النقاط قبل البدء ...

**) أي عمل يخالف الشريعة الاسلامية بأي وسيلة كانت فأنت
مسؤول عن ذلك أمام لله تعالى, وهذه الدورة مجانية لكل من لن
يخالف الشريعة الاسلامية في عمله ...

"قل يا عبادي الذين أسرفوا على أنفسهم...لا تقنطوا من
رحمة لله"

؟HTML أول ما يدور بذهننا هو ..ما هي ال
هي لغة صممت لوصف صفحات الويب, ويقصد بالوصف هي HTML ال
التصاميم أو الأشكال أو طريقة عرض, والتي تظهر لنا البيانات الخاصة بهذه
الصفحات.
.Hyper TextMarkup Language هي اختصار ل HTML ال
ويقصد بذلك أنها لغة صممت Markup Language هي HTML ال
لمعالجة , تعريف, عرض النصوص بنائا على ما تم تحريره بشكل نصي
والتنسيق layout وهي ذات قواعد معينة ومحددة لتصميم ال , (text)
.tag للصفحة, والكود الذي يكتب داخل هذه اللغة يسمى ب

هي التي تقوم على وصف المحتوى للمستند. html داخل ال tag ال
.plain text أو tags يمكن أن تحتوي على html ال
هو النص الذي يعتبر متسلسلة عادية من الحروف (plain text (يقصد بال
والأرقام والرموز الخاصة والتي لا تحتاج معالجة, وقابلة للقرائة.
.Web pages تسمى أيضا ب Html صفحات ال

وكيف أنه هو الذي يعتبر الكود ,tag لقد ذكرنا بالشرائح السابقة عن تعريف ال
والآن لنتحدث عن ,html مثل ال markup language الخاص بال
.html داخل ال tag بعض خصائص ال
. (<>) angle brackets يجب أن يوضع داخل tag ال
مثل tag عادة تأتي على شكل أزواج أي تأتي عملية فتح واغلاق لل tag ال
. (<h1></h1>)
.end tag هذا يسمى </h وال < 1 start tag هذا يسمى <h ال < 1

يسمى tag محصور داخل HTML يكون جميع ما يكتب داخل صفحة ال
المرئي وغير المرئي. <html></html> < -- html
ويكتب بالشكل التالي: body يكون جميع المحتوى المرئي متواجد داخل ال
.<body></body>
وأمور css وال js و ملفات ال meta وتحتوي على جميع ال head tag ال
أخرى يجب أن تنفذ قبل تحميل الصفحة, بالإضافة الى عنوان الصفحة ..الخ

بالشكل التالي: HTML يصبح الشكل البرمجي لصفحة ال
ة ѧ للدلال html فحة ال ѧ ى ص ѧ ي أعل ѧ ع ف ѧ وهذا التعريف يوض <!DOCTYPE> هناك
رض ѧѧ ت ع ѧѧ فح الانترن ѧѧ تطيع متص ѧѧ ذا يس ѧѧ وبه ,HTML وѧѧ ف ه ѧѧ ذا المل ѧѧ وع ه ѧѧ ى أن ن ѧѧ عل
ذا ѧѧ تخدام ه ѧѧ ح باس ѧѧ ذلك ينص ѧѧ ى 100 % , ل ѧѧ ل ال ѧѧ حيح يص ѧѧ كل ص ѧѧ فحة بش ѧѧ ف أو الص ѧѧ المل
ذا ѧ لوحده يعتبر ه <!DOCTYPE> التعريف لكل صفحة تريد انشائها .. أيضا فإن
ولكل اصدار تعريفه الخاص. html التعريف الخاص ب 5

وصولا الآن html ابتدائا من 1991 Html تتنوع الاصدارات الخاصة بال
.. HTML الى ال 5
فإننا نقصد ال HTML يجب عليك أن تعلم, أننا عندما نتكلم الآن, ونذكر ال
... HTML 4
html ثم 3 html ثم 2 html+ ثم html : الاصدارات من الأقدم للأحدث هي
. html ثم ظهر 5 (xhtml ثم (ظهر مفهوم والعمل على html ثم 4

Web فإننا نقوم أي مستعرض لصفحات الويب html لعرض صفحات ال
.. chrome, Firefox, Internet Explorer, safari وأشهرها Browser
مبدأ عمل المتصفح:
ومن ثم عرض المحتوى لهذا html يقوم مبدأ عمل المتصفح على قرائة ملف ال
وإنما يقوم بقرائة ال tag الملف, وعليك أن تعلم أنه لا يقوم بطباعة أو عرض ال
ثم يقوم بعرض المحتوى المتواجد بداخله tag بعدها سيعرف وظيفة هذا ال ,tag
 فهنا لن يقوم بطباعة لذلك اذا كتبت ... tag مناسبة بما قرأئه عن ال
على الصفحة وإنما سيقوم بتحديد أن ما سيأتي بداخلها هو فقرة ...

يلزمك فقط محرر نصوص ..مهما كان HTML لكتابة الشيفرة البرمجية لل
نوعه ^_^,
.. DREAM WAVER أو NETBEANS أو NOTE PAD مثل
والسبب NOTEPAD++ وكمبتدئ ومتعلم جديد للغة أنصحك بالبدأ أولا ب
في هذا هو يجب أن تعتاد على كتابة الأوامر البرمجية, فالمحررات الأخرى
تلقائيا TAG وغيرها من الخيارات وفتح واغلاق أي TAG تقوم باكمال ال
..وهذا أمر لا أحبذه نهائيا لمن يريد أن يتعلم أي لغة برمجة جديدة, لذلك قم
يتميز بتوفير خصائص الألوان والسرعة ..NOTEPAD++ بتحميل
وسهولة الاستخدام.

قم بانشاء صفحة واحفظها باسم notepad++ الآن بعد تحميل ال
كما تلاحظ فإن امتداد صفحات المواقع للغة ال .. pageName.html
... .html هو html
شاهد المثال التالي: (ملاحظة مهمة: اذا اكتفيت بالقرائة دون تطبيق فأنت لم
تتعلم أبدا طبق بشكل عملي...)

ثم
هذه الخطوات تتشابه
لجميع المتصفحات
الرئيسية باختلاف
المسمى
Inspect elements
الى
View source
أو
View Page source
Chrome Browser

. html قم بإنشاء صفحة ويب ذات امتداد 
.html قم بكتابة البنية التركيبية لصفحة ال 
إذا لم تستطع حل أحد الأسئلة ..يرجى
العودة وقرائة الموضوع بتمعن ..الأمر
سهل ..ولكن يحتاج الى تطبيق وتركيز
في القرائة

لا تجعل ثيابك أغلى شيءٍ فيك ، حتى لا تجد نفسك
يوما أرخص ممّا ترتدي..
أحمد الشقيري

end وصولا الى start tag هي كل شيء يبدأ ب HTML elements ال
وهي العناصر Empty html elements ويرادف هذا المصلطلح ,tag
مثل end tag التي لا تحتوي على محتوى, بالإضافة الى ذلك لا يوجد لها
هي سطر جديد). tag وظيفة هذا ال ) .. 
وهكذا كفتح *) ملاحظة حسب المقاييس المعتمدة فإنه يمكن كتابة
.( xhtml يعتبر standred هذا ال ) .. tag واغلاق لنفس ال
.start & end tag هو أي محتوى موجود داخل element content ال
( attribute ) يمكنها أن تحتوي مجموعة من السمات html elements ال

مثل (nested) بشكل متداخل html يمكن كتابة عناصر ال
ولاحظ أن أول عنصر أقول <html><body></body></html>
بانشائه هو آخر عنصر أقوم باغلاقه.
أن لا ننسى اغلاقه مثل html element من المهم أثناء التعامل مع أي
سيعمل الكود وستعمل الصفحة .. لأن المتصفح هنا اذا لم أضع ... 
لكن في بعض الأحيان الأخرى أو لبعض .. tag هو الذي سيقوم بإغلاق ال
الاخرى بشكل أحرى ..فإنه ممكن أن يعطيك خطأ بالنتائج أو طريقة tag ال
.layout عرضها أو تنظيمها على ال
جديد قم بإغلاقه مباشرة, ثم قم بوضع المحتوى tag نصيحة: عندما تقوم بانشاء
بداخل.

أنها ليست حساسة لحالة الأحرف HTML من خصائص لغة ال
uppercase كما تريد tag ولهذا يمكنك كتابة ال (not case sensitive)
وهي المنظمة W3C لكن الطريقة المعتمدة من ال ,lowercase أو
المسؤولة عن وضع المعايير العالمية لتصميم وبرمجة مواقع الانترنت,
.html منذ الاصدار 4 للغة ال lowercase اعتمدت ال

.html تقدم سمات اضافية لعناصر ال html بال attributes إن ال
. مثل start tag تكتب السمات دائما داخل ال
name=“value” تكتب السمات على شكل اسم برمجي وقيمة, مثل
name=“value” .‘ يجب أن توضع قيمة السمة داخل “ أو
attribute وال tag شاهد المثال والنتائج بالصفحة التالية: (سيتم شرح ال
بإذن لله تعالى, ولكننا نتدرج الآن لإيصال فكرة معينة).

النتائج

HTMLHeadings
المهمة داخل الموقع والتي قد يغفل عن html هي أحدى عناصر ال
استخدامها أو أهميتها الكثيرين, تعود أهمية هذا العنصر الى استخدامه من
للموقع من خلال تعيين indexing قبل محركات البحث لتحسين عملية ال
العناوين المهمة .
طريقة استخدام الوسم:
end tag و start tag وكما تلاحظ من طريقة كتابة الوسم, فهذا الوسم له
النتائج

ملاحظات مهمة:
الى للعناوين المهمة أو الترويسات فقط, ولا heading 1) لا تستخدم ال
مثلا ... BOLD تستخدمها لغير ذلك كأن تجعل الخط
كلما قل الرقم ..زادت .. h الى 6 h يأتي مرقما من 1 heading 2) ال
لأهم عنوان h الأهمية وزاد حجم الخط والتمثيل له, لذلك يستخدم دائما 1
لأقل العناوين أهمية... h بالصفحة, و 6
هو التسلسل باستخدام ال heading 3) من القواعد الموجودة لكتابة ال
h ثم الأقل 3 h ثم العناوين الأقل مستوى 2 h فيبدأ أولا ب 1 heading
وهكذا .. (طبعا يمكنك العمل بهذا الأسلوب أو لا ..لكن لمزيد من
الاحترافية) ^_____________________^

؟html element وال Empty Html element اذكر الفرق بين ال 
؟ w3c ما هي وظيفة منظمة ال 
وكيف يتم كتابة وسمها البرمجي ؟ ؟Html heading ما هي وظيفة ال 
الذي يعطيك أكبر heading وما هو رقم ال ؟ heading كم مستوى لل 
حجم؟
فقط ؟ heading هل يمكنك طباعة هذا الشكل من خلال تعلمك لل 
اذا نعم ..قم بكتابة الشبفرة البرمجية الخاصة بهذا الشكل.
في القرائة

أي محتوى يوجد على هذه الأرض, ملف أو وثيقة أو مستند ..الخ, يجزء الى
أجزاء تصغر تدريجا ... والكتب خصوصا يستم تقسيمها على شكل وحدات
ومن ثم فصول ومن ثم صفحات ومن فقرات ومن ثم كلمات ومن ثم أحرف..
...html هذا التقسيم والتعامل معه, لا يختلف عن صفحات ال
يمكنك تقسيم المحتوى الموجود داخل صفحات الويب على شكل فقرات .. وذلك
يسمح بوضع أي محتوى وتصنيفه tag هذا ال ... tag باستخدام ال
على شكل فقرة ...
يقوم بشكل تلقائي على وضع سطر جديد قبل وبعد الفقرة tag هذا ال

ملاحظات:
لكي نقوم بانشاء سطر جديد, ويمكننا استخدام ال يمكننا أن نستخدم ال
لانشاء مسافات بين الكلمات أو العناصر ..  
أو space طبعا اذا قمت بكتابة أي عدد من المسافات أو الأسطر باستخدام ال
فإن المتصفح سيقوم بتحويلها جميعا الى سطر واحد .. .. enter ال
أو والمسافات الى مسافة واحدة فقط .. ولذلك نقوم باستخدام كل من
space أما اذا كان المطلوب مسافة واحدة ..فيمكنك الاكتفاء بال ...  
.

من الأمور المهمة في أي لغة برمجة, هو كتابة توثيق أو شرح أو ملاحظات للشيفرة
البرمجية المكتوبة, وللقيام بذلك علينا جل ما علينا معرفته هو كيف يمكننا كتابة ال
اذن سنتكلم عن طريقة كتابة ال .. html وبما أننا نتحدث عن ... Comments
..html داخل ال Comments
طبعا هذه الملاحظات لا يتم تنفيذها ولا طباعتها .. وإنما هي فقط كملاحظة لك أو لمن
سيقرأ الشيفرة البرمجية الخاصة بك ...
لسطر واحد: Comments (1
لأكثر من سطر: Comments (2

ملاحظات:
فهي مفيدة جدا أثناء كتابتك للشيفرة البرمجية, Comments 1) بالنسبة لل
حتى تستطيع / تساعدك في عملية فحص الشيفرة البرمجة والنتائج, عن
طريق تعليق كود معين, ثم تفعيله وهكذا ..
وبدي أشوف اذا راحت .. html كمثال: لو كان عندي صورتين بال
صورة وضلت صورة كيف بطلع شكل الموقع.. هون أنا يا بمحي الصورة
الأولى أو اني بحطها داخل تعليق ... اذا ما عجبني أو حبيت أرجعها بس
وانتهت القصة ^___^. comments بشيل ال
2) علامة ! لا تكتب في التعليق الا عند البداية أما النهاية فنكتفي ب <--

؟ ما وظيفة هذه السمة 
؟   ما هي وظيفة 
؟  لماذا قد نطر الى استخدام 
؟ ما وظيفة هذه السمة 
؟html توثيق) داخل ملف ال ) Comments كيف يمكننا كتابة 
في القرائة

عندما نمحي من عقولنا الحدود التي رسمناها بيننا
وبين إخواننا في كل مكان ... سننتصر معا,
ونعيش حياة سعيدة معا .. فلا تدع سايكس و بيكو
بأن يجعلو الخطوط التي رسموها على الورق
..هي خطوط مرسومة بعقلك !! وتأكد أن ما
يجمعنا أكثر بكثير مما يفرقنا !!

تنسيق النصوص من الأمور المهمة لعرض محتوى الموقع, لذلك ستجد العديد
المسؤولة تسنيق النصوص ونذكر منها: tag من ال
تجعل النص أخمل من الحجم الطبيعي tag وهي : or (1
.(Bold)
وكلاهما , strong وال bold الآن جميع المتصفحات الرئيسية لاتفرق بين ال
يستخدم للأمور المهمة, أو التي نريد أن ندل على أن هذه الكلمة مهمة
للمستخدم, ومع هذا فإنه يمكننا تمييز النصوص بعض الأحيان عن طريق
لاستخدامها مع bold بدلا من ال strong استخدام ال
مثل عملية البحث, ستجد الكلمات المتابطة لعملية البحث بلون highlighted
مختلف هنا نكون قد قمنا بوضع الكلمات المشابه لما يراد البحث عنه داخل
.strong ومن ثم اعطاء خصائص لل strong

italic لجعل النص بشكل مائل tags تستخدم هذه ال : or (2
. tags أيضا تتشابه جميع المتصفحات الرئيسية بقرائة هذه ال
وتستخدم لتجعل نص معين بحجم أصغر من الحجم الطبيعي. ويمكن : (3
تاريخ ..الخ , copyright استخدامها لذكر تعليق خارجي...مثل ال
وهي خاصية subscript هي اختصار ل sub ال : and (4
تجعل الأحرف تبدأ بعد نصف البداية الطبيعية, يعني على فرض انو الأحرف تطبع
سيطع الخط من النقطة 1.5 tag على الخط من النقطة 1, فإنه باستخدام هذا ال
وهي تبدأ بطباعة الأحرف قبل superscript فهي اختصار ل sup ....أما ال
نصف البداية الطبيعية, وهذا يعني اذا كانت البداية الطبيعية لطباعة الأحرف هي 1
سيتم البدأ من النقطة 0.5 sup ال tag فإنه باستخدام ال

:<del> & <ins>
لإيضاح لعملية حذف نصف من المحتوى, الحذف لا يكون <del> يستخدم ال
عن طريق مسح المحتوى وإنما اظهار أنه غير مستخدم أو غير مرغوب,
ويتم ذلك عم طريق وضع خط في منتصف النص.
وتستخدم لظهار عملية اضافة لنص, ولا ,del فهي عكس ال <ins> أما ال
يقصد بالإضافة هنا هو امكانية كتابة واضافة محتوى, وإنما تمييز النص بإنه
تم اضافته ويكون ذلك عن طريق وضع خط تحت الن.
ملاحظات:
معا ... tags 1) غالبا ما تستخدم هذه ال
.. delete هي اختصار del و insert هي اختصار ins 2) ال

يستخدم للدلالة على علامة معينة, أو تسليط الضوء tag هذا ال :
على نص معين, وهذا للفت الانتباه لهذه الجزء من النص.. اذا رغبت بإضافة
.tag الى جزء من النص الخاص بك ..فقم باستخدام هذا ال highlight
,WWW في حال وجود اختصارات, مثل tag ويستخدم هذا ال :<abbr>
هي دلالية لوجود اختصار. (ملاحظة: سبب ظهور معنى tag وظيفة هذا ال
.(title الاختصار هو وضع الخاصية
مفيد جدا لتحسين عمليات البحث في حال وجود اختصارات. tag هذا ال

لتغيير اتجاه العرض لنص معين على مستوى tag يستخدم هذا ال :<bdo>
tag النص كامل وعلى مستوى الأحرف ... ويجب عند استخدام هذا ال
وهي خاصية تقوم على تحدد اتجاه عرض العنصر dir استخدام خاصية ال
..rtl أو ltr ويمكن استخدام
من اليسار الى اليمين :Ltr
من اليمين الى اليسار :Rlt

 ناتمس ركذا)2 tags ( لمخأ لكشب صن قيسنتل اهمادختسا اننكمي )Bold ( ؟  ناتمس ركذا)2 tags ( لئام لكشب صن قيسنتل اهمادختسا اننكمي)Italic (؟
؟ ما هي وظيفة السمة 
؟ و ما الفرق بين ال 
؟ <abbr> ما هي وظيفة 
لطباعة الشكل التالي: html قم بكتابة شيفرة برمجية بلغة ال 
في القرائة

تعد الروابط من أهم مكونات صفحة الويب, لأنها هي :(links) الروابط
المسؤولة عن ربط مجموعة الصفحات المختلفة معا, مما يتيح للمستخدم
التنقل بالموقع بسهولة.
ملاحظات:
<a href=“url”></a> 1) لتعريف أو كتابة رابط نستخدم ال
2) الرابط ممكن أن يكون كلمة, أو أكثر من كلمة, أو صورة.
3) هناك مجموعة من الخصائص الرئيسية والافتراضية للرابط وهي:
وهي الروابط التي لم تقم بزيارتها وتكون باللون :unvisited link (1
الأزرق وتحتها خط.

(3
وهي الروابط التي قمنا بزيارتها, وتكون هذه باللون :visited link (2
البنفسجي
لاحظ أن كلا الرابطين السابق وهذا هم نفس الرابط ..لكن الاختلاف هو
أنني قمت بالضغط على الرابط .. لذلك أصبح لونه مختلفا ...
يصبح لون الرابط أحمر مع وجود خط تحته, ويظهر :active Link (3
هذا أثناء عملية النقر على الرابط ..

4) يوجد العديد من الخصائص المهمة للرابط أذكر منها
(, title, target, rel)
نستخدم هذه الخاصية لنحدد نوع الارتباط بين الرابط وبين والملف الذي :rel (1
nofollow هي rel يحتوي هذا الرابط, ولعل من أكثر القيم التي تستخدم مع ال
..لكي نمنع تتبع الرابط من محركات البحث ..
تستخدم هذه الخاصية لتحديد مكان أو طريقة فتح الصفحة وله عدة :target (2
.( _top , _self , _parent , _blank) قيم وهي
.new tab تقوم بعرض الصفحة في :_blank ال
.parent fream تقوم على عرض الصفحة الجديدة داخل ال :_parent ال
الحالي(الموجود في fream تقوم على عرض الصفحة داخل ال :_self ال
الرابط)
كاملة .. window يقوم بعرض الصفحة على حجم ال :_top
out

داخل الرابط ليصبح mailto 5) ليمثل الرابط مستخدم بريد الكتروني, نقوم بوضع
بالشكل التالي:
6) يمكن أن يكون الرابط صورة, وليس مجرد نص, وهذا أمر مهم ونستخدمه كثيرا
أيضا ...
7) اذا لاحظت أنني في بعض الأمثلة استخدمت ال # بدلا من كتابة رابط, وهذا
قابل للنقر) وبذات الوقت ) clickable يستخدم في حال أحببت أن أبقي الرابط
لا أريده أن يرسلني الى أي مكان, وبذات الاستخدام لو قمت بوضع
والفرق أن الجافا سكربت ..عند الضغط عليها تبقى javascript:void(0)
الصفحة بذات موقعها وتبفى دون أن تصعد للأعلى, بينما ال # فإنه عند النقر
عليها وكنت في أسفل الصفحة فمن الممكن أن تصعد الى أعلى الصفحة ...

مثال:

؟ html كيف يمكننا انشاء رابط بلغة ال 
اذكر ما هي القيمة التي يمكن .. target خاصية تضاف الى الروابط تسمى 
نافذة - tab حتى يقوم المتصفح بعرض الصفحة ب target أن نضعها بال
جديدة ؟
كيف يمكننا أن نكتب رابط لبريد الكتروني ؟ 
اذكر طريقتين يمكنني من خلالهما المحافظة على الرابط قابلا للنقر.. وبدون 
أن يأخذني الى أي رابط (أي يبقيني بنفس الصفحة)؟
لجعل الصورة هي الرابط بدلا من html قم بكتابة شيفرة برمجية بلغة ال 
النص ؟
في القرائة

رضى الناس غاية لا تدرك ، وليس إلى السلامة
منهم سبيل ، فعليك بما ينفعك فالزمه .
العلم ما نفع ليس العلم ما حفظ .
من أقوال الإمام الشافعي رحمه لله

بصورة سريعة, والآن سنتعمق head tag تكلمنا في أول هذه الدورة عن ال
قليلا ان شاء لله داخل هذه السمة المهمة والتي تعد من أهم مكونات صفحة
والتحكم بها يزيد من قدرة محركات البحث على التعامل معها, ,html ال
وتحسين أداء الصفحات وادارة التصميم والأحداث المختلفة ..
هو السمه التي يتم تنفيذ ما فيها قبل بناء الشكل الخاص بالصفحة, head ان ال
ويتم تحميل كل من
style, link, script, noscript, meta, title, base,
من هذه ..... ^______****______^ tag والآن سنقوم بشرح كل

يمكننا وضع مجموعة من الشيفرات البرمجية tag في هذا ال :style (1
المخصصة لتنسيق الصفحة من الوان, وخلفيات, و أشكال النصوص ...الخ
وهي السمة المستخدة لوضع عنوان للصفحة, بالإضافة الى ذلك :Title (2
لمحركات البحث indexing لها دور كبير في عملية ال
سيتم شرحه في الأمام .. style ملاحظة: لا تقلق بالنسبة لما كتب داخل ال
ان شاء لله تعالى

هي سمة تقدم معلومات حول البيانات الموجودة داخل الصفحة, :Meta (3
وتصنف على أي تصنيف, وما هي الكلمات الأساسية أو المفتاحية لهذه
الصفحة, والتي ستزيد من فرص ظهور الصفحة على موقع البحث بشكل
أفضل وأكبر, أيضا فهي تقدم معلومات حول صاحب أو ناشر الصفحة,
دائما tag وهذه المعلومات جميعها ..لا يتم طباعتها للمستخدم. هذا ال
.head يجب أن يأتي داخل ال
للصفحة ..^_* refresh لعمل meta *) يمكن استخدام ال
...meta tag أمثلة على استخدام ال

وهي خاصية ) metadata للصفحة عن طريق ال refresh ولنقوم بعمل
نقوم بكتابة التالي: (noscript مفيدة في حال وجود
كل 2 ثانية ..وهناك خصائص أخرى refresh الصيغة السابقة ستقوم بعمل
يمكنك البحث عنها واستخدامها ...

بداخله مثل ال script من كتابة tag يمكننا هذا ال :Script (4
.. jQuery أو javascript
من js المستخدم, يمكنه بأي لحظة أن يقوم باطفاء ال :Noscript (5
المتصفح, وبهذا قد تحتاج لإجبار المستخدم على استعراض الصفحات مع
أو أن تظهر له رسالة معينة ..اله js وجود ال
لذلك ..يمكنك استخدام هذه الشيفرة

(6<link> : لا اذه مدختسيtag ءانبل/تامولعم نيمضت/ ةيجمرب تارفيش تافلم نيمضتل اهمدختسن ام اريثكو فلملا لخاد ىلا يجراخ ردصم نم لاcss..خلا. (7<base> : لا اذه موقيtag ديدحت ىلعurl يسيئرلا عجرملا وه نوكيس لا طباورلا لكلrelatives ) ناونع وأ راسمب طبترت يتلا طباورلا يأعقوملا (
شاهد هذا المثال:

استخدام الصور في الصفحات الالكترونية هو أمر مهم جدا, لأنه يعطي نوعا من القرب
للمستخدمين ... بالإضافة الى ذلك فهي وسيلة لجذب انتباه المستخدمين, والدلالة على
المحتوى, ولذلك هذا جانب مهم جدا ..
ةمسلا مادختساب يه ةنيعم ةروص نيمضت ةقيرط<img> , لا نم عونلا اذهtag وهempty ) الخصائص) ) attribute نكتفي ب tag تذكر) , وبهذا فإنه لاستخدام هذا ال
لهذه السمة ..
خصائص مهمة:
هذه الخاصية هي التي مثل موقع الصورة على السيرفر وهي أهم خاصية .. :src (1
وهو مهم في حال حدوث أي خطأ ولم يتم alternate text وهي اختصار ل :Alt (2
جلب الصورة, فيظهر هذا النص..(في بعض الأحيان, لا تعمل هذه الخاصية بسبب
أو كروم ..الخ , ولا تدعم opera مثل webkit browser داخل ال bug وجود
title 7 وأقل... لذلك أنت قم بوضع هذه الخاصية, وأضف أيضا ال ie اصدارات ال
فهو مهم ..ومدعوم ..

يمكن أيضا التحكم بحجم الصورة عن طريق استخدام ال :Width & height (3
مثال height وال width
ملاجظات:
1) كن ذكيا باستخدامك للصور, وتذكر أن عدد الصور الكبير سيؤثر على
سرعة الموقع, لأن الصور يتم حفظا داخل السيرفر, ومن ثم نقوم نحن
باستدعائها ...
للصور, وذلك مفيد جدا عند حدوث أي خطأ, لأنه alt & title 2) استخدم ال
فإنه سيقوم alt سيقوم بإظهار نصمكان الصورة, واذا كان المتصفح لا يدعم ال
في الشرائح السابقة ).. . title شرحنا عن ال ) tip بإظهار ما تريد على شكل
تذكر أنه بامكاننا أن نجعل الصور قالبة ) a 3) في حال كانت الصورة داخل
فإنه يحبذ كتابة الرابط الذي ..( <a> للنقر, راجع الشرائح السابقة تحت موضوع
ستقود اليه هذه الصورة ..

من بناء الجداول, عن طريق استخدام السمة html يمكننا باستخدام ال
... <table>
<tr> كل جدول يمكننا بنائه, يقسم الى صفوف وأعمدة, الصفوف يرمز لها ب
... <td> والأعمدة ب
لتقسيم الصف <th> للجدول ..ولكل عامود هناك عنوان, يمكننا استخدام ال
مجموعة من العناوين (وهي فعليا أعمدة ولكن لخصائص مختلفة فقط).
بامكانها أن تحتوي على td هي التي يتواجد بها بيانات الجدول, وال td ال
آخر .. صورة, نص, قوائم ..الخ table جميع أنواع البيانات ..مثل

css ملاحظة: هناك خصائص لن أتطرق اليها لأنها غير مجدية, واستخدام ال
... border فيها أفضل, مثل ال
مثال على جدول:

للجدول ..سيتم css ملاحظة على المثال السابق (تم وضع مجموعة من ال
شرحها لاحقا بإذن لله تعالى...)
direction هو الذي يقوم بطباعة الاطار حول الجدول, وال :border
تعطي هامش للعناصر.. padding هي التي تحدد الاتجاه للعنصر, وال
مثال: .. <caption> لإضافة عنوان خاص بالجدول نقوم باستخدام ال

موجودة tags اذا رأيت هذه ال <thead>, <tbody>, <tfoot> : ملاحظة 2
هذه تستخدم كوسيلة تنظيمه تقوم ... -_-... P: داخل أحد الجداول, فلا تخف
header سيحتوي على ال thead على تقسيم الجدول الى مجموعات, فمثلا ال
tfoot سيحتوي على محتوى الجدول, وال tbody الخاص بالجدول, وال
الخاص بالجدول, مع الأخذ بعين الاعتبار أنه لل footer سيحتوي على ال
واحدة على الأقل,,والسؤال الآن, لماذا هذه الخيارات , tr يجب أن يأتي thead
ببساطة, في بعض الأحيان يكون كمية البيانات ..tags أو لماذا وجدت هذه ال
للجدول (صفحات) ... هذا pager الموجودة بالجدول كبيرة, وهذا يحتاج عمل
الخاص بالجدول والتحكم فقط footer بال pager الأمر يمكننا من وضع ال
وغير ذلك وهي خاصية مهمة يمكننا استخدامها.. في بعض الأحيان .. body بال
الخاص بالجدول .. بهذا الأسلوب أحافظ على body لل scroll نحتاج الى عمل
للجدول footer وال header مع الاحتفاظ ب body لل scroll نسق ال
...الخ

script, style, title, link, ) من هذه tag اذكر ما هي وظيفة كل 
؟ (meta, noscript
كيف يمكننا ادراج صورة الى صفحة الويب ؟ 
؟ html كيف يمكننا ادراج جدول باستخدام ال 
؟ <th>, <tr>,<td> الى ماذا يرمز كل من 
التي ذكرناها head tag قم ببناء صفحة ويب تحتوي على جميع ال 
واجعل هذه الصفحة تحت عنوان تأجير السيارات, .. base باستثناء ال
وكلمات البحث الدلالية تدل على السيارات وتأجيرها, والناشر هو اسمك
*_* .... وقم أيضا بإضافة جدول من 3 أسطر وأربعة أعمدة ..ومن ثم أدرج
صورة بالعامود الثاني من كل صف ...
في القرائة

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

القوائم, هي من الأمور المهمة لإيضاح التعدد أو التسلسل لنقاط مترابطة أو
لفكرة ذات علاقة بموضوع معين.
تقسم القوائم الى نوعين:
ويقصد بذلك القوائم التي سيكون ما في داخلها (ol) الأول: القوائم المرتبة
معدود بأي شكل كان وأشهرها الرقمي.
ويقصد بذلك القوائم التي تتعدد بها النقاط دون (ul ) الثاني: القوائم الغير مرتبة
ذكر العدد وإنما اظهار رمز معين مثل *.

هذا النوع من القوائم يكون مرتب إما :order List <ol> 1) القوائم المرتبة
عدديا وإما أبجديا ^__^ .. ويمكنك التحكم بنقطة البداية فمثلا يمكنك البدء
من الترقيم من النقطة 5
طريقة بناء القائمة المرتبة:
هو الذي يمثل القائمة tag وهذا ال <ol></ol> كما تلاحظ, لقد قمنا بوضع
فهي تمثل العناصر أو النقاط التي تتبع لهذه القائمة <li></li> المرتبة, أما
وهي تحدد مكان أو العدد الذي start شاهد المثال:
ل ه ذ ه ا ل ق ائ م ة خ ا ص ي ت ا ن: الأولى هي
سنبدأ الترقيم من عنده
( وهي خاصيةجميلة لتحديد نوع العد هل هو رقمي ( 1 type والثانية: هي
.(I) أو (i) أو هي أعداد اللاتينية (A) أو (a) أو أحرف

2) القائمة الغير مرتبة: وهي قائمة تستخدم كثيرا جدا في مجال الويب,
بشكل كبير, بالإضافة الى ذلك فهي مفيدة جدا menus وتستخدم لبناء ال
لإسلوب السرد الغير عددي ...
طريقة استخدام هذه القائمة:
طبعا ستلاحظ أن ناتج هذه القائمة
هو نقاط سوداء دائرية , يمكن
ولكن هذه الخاصية لم type التلاعب بهذا الشكل عن طريق خاصي تسمى
والأفضل من ذلك هو التعامل معها عن ... html تعد مدعومة في ال 5
CSS طريق ال

فهي inline elemnt وال block element من المهم جدا معرفة ماذا يعني ال
معلومتان مهمتان جدا في تصميم صفحات الويب ...
بدون أن يأخذ فوقه سطر جديد وأسفل منه html يأتي هنا عنصر ال :Inline (1
الخ .. <a> - img سطر جديد مثال عليه
h1, p وهي الخصائص التي تأخذ سطر جديدا قبلها وبعدها ..مثل :block (2
والآن .. لماذا تطرقنا الى هذا الكلام؟؟؟ ... هذا الكلام مهم جدا لمعرفة طريقة ترتيب
وكيف يمكن التحكم بها, وأيضا معرفة ما هي layout العناصر داخل ال
css بال inline ولا تطبق على block الخصائص التي يمكن ان تطبق على ال
block ..أمور كثيرة .. ولكن لنتطرق الآن الى أهم مكونان يتضح بهما أهمية ال
...inline وال

...span وال div ال
بالصفحات الالكترونية.. فماذا تعني!! ولماذا tags كثيرا ما نرى هذان ال
تستخدم بكثرة! وما هي أهميتها !
سوى أنها div أولا عليك أن تعرف أنه لا يوجد معنى محدد من تسمية :div ( أ
سينزل سطر بعدها وينشئ سطر قبلها ...فلذلك هي لا تطبع بذاتها block
معا html ..وهي وسيلة لإحتواء مجموعة من خصائص أو عناصر ال
..ومن أهم ما قام به هذا العنصر هو الاستغناء عن الأسلوب القديم في تصميم
والآن ستجد أن الموقع ... table عن طريق استخدام ال html صفحات ال
والسبب في ذلك هو ظهور الأجهزة الذكية ... div عبارة عن مجموعة من ال
الخ ..responsive website وال

أي لا تقوم ببدء سر لا قبلها ولا بعدها .. ,inline وهي خاصية :SPAN ( ب
هذه الخاصية تستخدم كوسيلة رائعة لاحتواء نص معين, وإعطائه خصائص
معينه أو غيرها من الامور, دون أن ينزل سطرا ...
-: div وال span لنشاهد مثال على
طبعا من الممكن أن يحتوي كل منهما
الآخر دون أخطاء, لكن عملية وضع ال
عملية غير مبررة span داخل div
هو div وال inline هو span لأن ال
وبهذا قد تختلف النتائج عما تريد block
..أما العكس فصحيح ...

بالإضافة الى ما ذكرناه .ضع باعتبارك أن ما تم ذكره, لم يربط بالتنسيق
عن موضوع ال css ..فهناك اختلافات أخرى ستظهر عند حديثنا في ال
.... display

؟ ul وال ol ما الفرق بين ال 
؟ <ol> داخل ال type ما فائدة الخاصية 
؟block وال inline ما الفرق بين ال 
inline وإما block الاجابة اما )؟span وماذا يمثل ال div ماذا يمثل ال 
لكل خيار منهما)
اكتب شيفرة لطباعة الشكل التالي: 
في القرائة

إن تعاملنا مع الانترنت يقوم على فكرة جوهرية, وهي ارسال واستقبال البيانات
من والى السيرفر, والآن اذا كنت لاحظت ..فإن جميع الخصائص التي تكلمنا
عنها هي وسيلة لعرض المعلومات المخزنة بالسيرفر..والآن ماذا نحتاج ؟!
إن ما نحتاجه هو وسيلة لإرسال المعلومات الى السيرفر, وهذا يمكن تطبيقه من
... forms خلال ال
هي form الصيغة العامة لل
فهي كثيرة ومتنوعة أهمها أو أكثرها input Element أما بخصوص ال
الخ .. text, textarea, password, list, radio استخدامها هي

input tag عناصر ادخال تستخدم ال
button
checkbox
color
date
datetime-local
file
email
datetime
hidden
image
month

input tag عناصر ادخال تستخدم ال
number
password
radio
range
reset
search
submit
tel
text
time
url
week

لل input ملاحظة: بخصوص ما تم اظهاره بالجداول فهي تتنوع بين وسائل
غير html وخذ بعين الإعتبار أنه ال 5 ,html وأخرى لل 5 html4
مدعومة من جميع المتصفحات بعد..
وسنكتفي بالخاصة .. html الخاصة بال 5 input أيضا لن نتطرق الآن لل
وحين انتهائك من هذا المستوى.. ستجد دورة متخصصة بال ,html بال 4
إن شاء لله .. يمكنك قرائة وتعلم ما تريد ..لكن الآن لنبقى خطوة html5
بخطوة ..معا ...

يغطي عيوبَ المـرء كثرة مـاله _____ يُصــدّقُ
فيما قاله وهو كـذوبُ
ويزرى بعقـل المـرء قلة مـاله _____ يحمّـقـه
الأقـوام وهـو لـبيب
من أقوال الإمام علي رضي لله عنه

وهي input Element سأتلكم عن ال
الصيغة العامة لهذا العنصر هي :text (1
input field لاحظ أننا حين نتعامل مع
هو type وهنا كان ال type ثم نقوم بتحديد ال input فإننا نقوم بكتابة
غالبا ما يستخدم هذا الحقل لإدخال نصي يأتي على شكل سطر واحد ,text
ويقصد بنصي هنا (جميع ما يمكن طباعته من لوحة المفاتيح *_^, الا اذا
قمت أنت بمنع ذلك عن طريق استخدام سكربت معين أو وسيلة اخرى ..الخ)
الصيغة العامة لهذا العنصر هي :password (2
ويستخدم هذا النوع من الحقول لكلمات المرور, بحيث تخفي ما يتم كتابته
على شكل *...

يستخدم هذا الخيار عنجما يكون هناك عدد اجابات محددة ويسمح : Radio (3
للمستخدم باختيار اجابة واحدة أو اختيار واحد فقط .. مثل الجنس هل هو
ذكر أم أنثى...
الصيغة العامة هي:

يستخدم هذا الخيار عنجما يكون هناك عدد اجابات محددة : checkbox (3
ويسمح للمسخدم من اختيار أكثر من اجابة معا مثل اللغة ..عربي,
فرنسي..الخ

هناك نوع من الحقول, لا يظهر شاشة المستخدم, يمكنك :hidden (4
استخدامه لحفظ بعض المعلومات التي لا تريد للمستخدم العادي أن يقوم
بالتعديل عليها, وتريد بذات الوقت ارسال ما بها من محتوى الى السيرفر
ولكن انتبه أنا قلت .. input ..كل هذا يمكنه فعله باستخدام هذا النوع من ال
client side هي html وال .. html أن المستخدم العادي (لأن هذا يعتبر
أي يتم تنفيذ الشيفرة البرمجية على متصفح المستخدم, لذلك ان كنت (script
تذكر في أول هذه الدورة المتواضعة ..ذكرنا طريقة استعراض الشيفرة
والآن لنرى الصيغة العامة لها ^_* ...^_^... html البرمجية الخاصة بال

مفيد جدا في كثير من الأحيان لحل بعض hidden ملاحظة: عنصر ال
المشكلات ..فقد نحتاج استخدامها لغير ارسال المعلومات الى السيرفر, فقد
تستعمل لحفظ قيم معينة أثناء تنفيذ السكربت, أو تنفيذ تصميم معين بنائا على
القيمة الموجودة بها ... الخ من هذه الأمور.. أيضا قد تستخدمها اذا قمت ببناء
.. php للصفحات الخاصة بك ..باستخدام الجافا سكربت وليس ال pager
فلا يوجد أمر وجد لعبث.. تأكد من ذلك ..وتأكد أنك ما قد تقول عنه غير مهم
اليوم لك..قد يكون في غاية الأهمية غدا ^_________*

مهم جدا وهو يستخدم لرفع ملفات الى input هذا النوع من ال :file (5
السيرفر, وبذات الوقت هو خطير *_*... يلزمك أخذ الحذر منه والتحقق من
وسيتم ذكره هناك php صيغة الملفات قبل رفعها (هذا موضوع يتعلق بال
بإذن لله تعالى) ...
الصيغة العامة:
عليك الانتباه واستخدام input ملاحظة: عند استخدامك لهذا النوع من ال
enctype="multipart/form-data" الخاصية form داخل ال
ستحدد نوع البيانات التي سيتم enctype وهو أمر مهم جدا ويقصد ب
*_^... binary data تحميلها ورفعها وهنا قلنا أنها

هو ال type أيضا من العناصر التي يمكن أن نستخدمها مع :button (6
وتقوم هذه الخاصية على اضفة زر قابل للنقر ليستخدم غالبا مع .. button
الجافا سكربت لنتفيذ أوامر معينة ^_*
الصيغة العامة مع مثال بسيط :
الآن .. onclick الآن ..كما لاحظت ..فإن هناك خاصية جديدة ظهرت وهي
أريدك أن تعرف أن كل أمر يمكن أن يقوم به المستخدم هو حدث .....->

(click) وكل حدث تقوم به, له اسم برمجي يدل عليه .. فمثلا عملية النقر
هذه الأحداث ستتعامل معها بكثرة ^_^ ..لأنها ... onclick فهي كما رأيت
مفيدة وتعطي جانب من التفاعل الرائع بين المستخدمين والمواقع ^_^
بل أي .. html وطبعا هذه الأحداث لا يقتصر استخدامها داخل عناصر ال
لغة برمجة يمكنها أن تحتوي على هذه الأحداث ..ولكن طبعا تختلف البنية
القواعدية لكل لغة عن الأخرى ... ومن الأمثله على هذه الأحداث ...
الخ .. .. onmouseout أو Onmouseover
JavaScript Events ما رأيك أن تجرب البحث تحت عنوان
..جرب ..وانظر الى مسميات الأحداث وكيف تدل على عملها ... وبعد ذلك
أكمل الدورة ولا تقلق ... سنتكلم عنها أيضا بإذن لله تعالى في جزء الجافا
سكربت

يقوم على عمل استرجاع لجميع القيم input هذا النوع من ال :reset (7
مثلا... اذا قمت بتعبئة الحقول ومن ثم قمت ... form الافتراضية لل
فسيقوم بحذف جميع المحتويات التي قمت بادخالها reset بالضغط على
^_^... clear ..وتراها كثيرا تحت مسمى
ملاحظة: هذا النوع من الأزرار لا تقم باستخدامه بكثره, واستخدمه
عندالحاجة فقط ...لأنه قد يكون مزعجا اذا قما مستخدم بالنقر على هذا الزر
بالخطأ ..^_^

form يمثل أحد أهم عناصر ال .. input هذا النوع من ال :Submit (8
ووظيفتها تتلخص بإرسال البيانات التي تم ادخالها بالحقول الى السيرفر
..وهذا مهم جدا...
وكما قلنا فإن هذا الزر هو المسؤول عن ارسال البيانات ولهذا يلزم وضع أيضا
خاصية مهمة جدا..وهو عنوان الصفحة التي سيتم ارسال البيانات لها
أيضا جيب ..form الى ال action ^^..وهذا يمكن عن طريق اضافة
ولكن الآن لن ..get أم post علينا تحديد طريقة ارسال البيانات هل هي
احدى المواضيع المهمة method لأن هذه ال get وال post نتكلم عن ال
^_^ (php داخل ال
-----<

هي : submit الصيغة العامة لزر ال
فيصبح شكله كالتالي: form أما بخصوص ال
الى آخر.. وليست form إنتبه أن الخصائص السابقة يمكن أن تختلف من
من input يمكن أن تحذف إن لم يأتي هناك enctype ثابتة ... حتى ال
ففيها الصفحة التي Action... وأهم خاصية الآن .. *_^ file نوع
from ستستقبل البيانات من ال

هذه ..dropdown list يستخدم لإنشار قائمة منسدلة tag هذا ال :select (9
القائمة تتميز بأنك تستطيع من خلالها حصر مجموعة الإحتيارات الممكنة والتي
سيقوم بادخالها المسخدم ضمن مساحة محددة ...
والقيمة التي سترسل الى .. number-list كما تلاحظ.. فالإسم البرمجي هو
السيرفر هي القيمة التي يختارها المستخدم ..القيمة التي ترسل هي التي بداخل ال
فهذه نصوص لتظهر للمستخدم ... one, tow, three أما الكلمات ... value
(ابحث الآن كيف يمكنك أن تقوم باختيار أكثر من خيار ..وليس خيار واحد) ابحث
وابحث أيضا عن فائدة الخاصية html multiple select option عن
selected in select html tag عن طريق selected

تكلمنا في الشرائح السابقة عن طريقة ادخال نص بسطر : textarea (10
والآن سنتكلم عن عنصر يمكننا من اضافة (text واحد (وهو عن طريق ال
عدد الأسطر التي يمكن ... textarea أكثر من سطر, هذا العنصر هو ال
كتابتها داخل هذا النوع هو عدد لا نهائي ... ويمكن أيضا التحكم بحجم
العنصر عن طريق اللأعمدة والصفوف..لكن الأفضل طبعا عن طريق ال
... css
وهاتان الخاصيتان .. cols و rows اذا لاحظت ..فإنه تم تعريف الخاصيتين
.تحدد عرض العنصر ب 30 عامود و 10 صفوف... وبعد ذلك سيظهر لك
طبق المثال ..وانظر النتائج... ... scrolling

خصائص:
هناك بعض الخصائص التي يمكن استخدامها مع الحقول, قمثلا يمكن اسخدام
الخ ..url هناك أيضا ) txt وال password لكل من ال size الخاصية
..(html وسأكتفي الآن بما تم ذكره حتى نصل ال 5
هذه الخاصية تقوم على تحديد عرض الحقل بنائا على عدد الأحرف :Size
المرئية, فمثلا الحالة الافتراضية للمتصفح هو 20 حرف ظاهر(ويضاف
اليها 35 بكسل تقريبا كهامش قبل نهاية النص) ..يمكن تغييره الى 4 مثلا
..لاحظ المثال التالي:

خصائص:
اذا قمت بتطبيق المثال السابق ستلاحظ أنه لا يمنع ادخال أكثر من أربعة
حروف لكن الذي اختلف هو حجم مربع النص .. اذن هل يمكنني تحدد حد
أعلى لعدد الحروف المستقبلة !! الجواب هو نعم .. كيف ؟ باستخدام الدالة
لاحظ المثال .. maxlength

خصائص:
هناك العديد من الخصائص ..ابحث عنها ..واقرأ لتزيد من مهاراتك, بالإضافة الى
بإذن html ذلك ستجد هناك الكثير من الخصائص والتي سيتم ذكرها في جزء ال 5
لله تعالى ...^_^
html input Attributes قم بتجربة البحث عن
الم يخطر ببالك أثناء تنفيذ ,checkbox وال radio لل checked خاصية
المثال , كيف يمكنني اختيار أحد الاختيارات مباشرة ..؟! ..
وال radio هذه الخاصية خاصة ب checked لتستطيع عمل ذلك عليك استخدام
لاحظ المثال: ... checkbox

الآن لنأخذ مثالا على ما سبق من خصائص عناصر تم ذكرها..
ملاحظة: الشيفرة البرمجية الخاصة المثال كتبت بشكل سهل بحيث يسهل
عليك قرائته واكتشاف الاختلافات بين العناصر مع بعضها .. وعندما تتقدم
الى الأمام بإذن لله تعالى, وتتطور معرفتك ..اعلم أنه يجب عليك أو يفضل
لكل مجموعة .. بشكل رئيسي ..واذا wrapper ك div أن تستخدم ال
احتوت مجموعات فرعية كذلك ..يرجى أخذ هذه الملاحظة بعين الاعتبار..
لاحظ ما أقصد بالصورة ..بعد مقارنتك ودراستك للمثال ^_^

قم بكتابة شيفرة برمجية لبناء هذا الشكل (نموذج اتصل بنا): 
ملاحظة: لا يهمني الآن هنا
التصميم ..لكن ما يهمني هو
قدرتك على كتابة شيفرة
برمجية تنشئ مثل هذه الحقول
أيضا قم باضافة اللغة والجنس
للمتقدم لهذا الطلب ^^...
تمنع عمليات النسخ واللصق
لحل هذا السؤال خصوصا والكل عموما ..
في القرائة

ليس البليةّ في أيامنا عجب ا بل السلامة فيها أعجب العجب
ليَْسَ الجَمَال بأثَْوابٍ تزَُينِّنُاَ إن الجمال جمال العلم والأدب
ليس اليتيم الذي قد مات والده إنَِّ اليتَيمَ يتَيمُ العِلْمِ والأدََب
من أقوال الإمام علي رضي لله عنه

يقوم على عرض صفحة ويب داخل صفحة الويب tag هو ...iframe ال
الخاصة بي ..
الخصائص الموجودة في المثال هي:
وتحتوي هذه الخاصية على الرابط للصفحة المراد تضمينها داخل :scr ( أ
صفحة الويب الخاصة بي.
وتستخدم هذه لحذف الاطار الافتراضي اذا اسندت :frameborder ( ب
اليه القيمة صفر.
عرضا وارتفاعا .. ... iframe لتحديد حجم ال :width & height ( ج

ifream أيضا من الخصائص الجميلة هي امكانية انشاء رابط وربطه بهذا ال
لم أذكره target هناك ... <a> التي تكلمنا عنها بال target ..هل تذكر ال
هذا الأسلوب يتيح تغير ال ,ifream target وقمت بتأجيله الى هما وهو
عند النقر على الرابط...^_^ iframe الخاص بال src
شاهد الصيغة والمثال:

الألوان ^_^... منذ أيام الصغر وأنا أعشق الألوان ..خصوصا البرتقالي
والأبيض والبيج ..!_!... شو دخل هذا بالموضوع ؟!! صحيح شو دخلو ؟....
أن تقوم بوضع الألوان التي تحب لأي من html يمكنك باستخدام ال
وهذا أمر أكثر من رائع, لما يعطي جانب من الانجذاب ,html عناصر ال
النفسي لها, وهو أمر بالأهمية بمكان .. وبما أن الألوان هي أمر مهم ..سنتكلم
عنها الآن بإذن لله تعالى ^_^..
طريقة كتابة الألوان تكون على 3 أشكال وهي:
الخ .. blue أو red 1) الاسم: وفيها يتم ذكر اسم اللون مثل

f القيم .. #ff22ff وهو النظام الست عشري ... وكتب بالشكل التالي :hex 2) ال
و 2 هذه جميعها قيم متغيرة حسب اللون .. وبما انه نظام ست عشري فهذا يعني
f الى a امكانية كتابة اي رقم من 0 الى 9 والأحرف من
يمثل 15 هذا النظام الست عشري, والآن f يمثل القيمة 10 وحرف ال a حرف ال
وتمثل rgb هي 255 بال ff بالألوان تم اعتماد 00 كلون 0 (الأسود) والقيمة
اللون الأبيض, وهي تكتب على شكل 3 أزواج ^^ (ملاحظة: يمكن كتابة الألوان
فهذا أمر مسموح به ^^..) #fff على شكل
لو أخذنا #FFFF00, #FF00FF, #FF أمثلة على النظام الست عشري 0000
255 , ملاحظة مهمة 0 هذا يمثل اللون الأحمر ..وهو يساوي 0 #FF اللون 0000
^_* hex أيضا ال # هي علامة مهمة والزامية قبل استخدام الألوان بنظام ال
الألوان الضوئية الثلاثة , .. red green blue وهو اتصار ل :rgb 3) ال
هذا اللون الأحمر.. أكبر قيمة ..rgb( وطريقة استخدامه تكون كاتالي: ( 255,0,0
rgb( هي 255 وأصغر قيمة هي 0.... أمثلة أخرى ( 19,192,12

لنشاهد مجموعة من الأمثلة معا ^_^...
فهي المسؤولة عن ,css ملاحظة: نحن نستخدم الألوان ونضيفها عن طريق ال
تسنيق الأشكال والألوان ..الخ بنائا على البنية التركيبية ...والآن لنرى ذلك
بشكل عملي ..^_^

هناك مجموعة محجوزة من الرموز الخاصة, والتي تستخدم داخل اللغة, وهذا
الأمر قد يسبب مشكلة في بعض الأحيان .. فلو افترضنا مثلا .,.أنا قمنا بكتابة
html 5 ... !!! بغض النظر عن المحتوى ...فإن ال < 13 > هذا الشكل 8
<a> وهذا قد يسبب خطأ .. أو اذا أردت طباعة هذا الشكل .. tag ستعتبرها
على المتصفح ؟! ..ماذا سيحدث؟!
لذلك ..في مثال سابق ... أذا انتبهت في هذا المثال كيف قمت
خاصه به .. entity كل رمز له .. html entities بطباعة ال
إما اسم وإما رقم ... entities ويمك أن تكون هذه ال

اسم ورقم ..هل هذا يختلف !! ..الجواب طبعا لا ..إن ... entities اذا كانت ال
أو الرقم لن يختلف ..لكن هناك ميزة Entities استخدمت الاسم الخاص بال
وسيئة لكل من هذان الاستخدامان ..وهما ...
1) اذا قمت باستخدام الاسم ..فهو أسهل للقرائة والتذكر لوظيفة هذه ال
اما اذا استخدمت الرقم ..فسيصعب عليك ذلك ... entites
2) اذا استخدمت الاسم ..فهناك مشكلة ..ليست كل المتصفحات داعمة لل
المتصفحات القديمة في الغالب) وحقيقة هذا الكلام لا ). entities name
يوجد اجابة دقيقة عليه.. أما الرقم ..فكل المتصفحات داعمة له بالإضافة الى
لها أسماء ^^ ...^_^ entities ذلك ..ليست كل ال

هل تتذكر لماذا ...   استخدام ال entities أيضا من الأمثلة على ال
استخدمناها ؟! ...نعم ..لقد قمنا باستخدامها لصنع مسافات ..فكما قلنا أن
المتصفحات تقوم على حذف الفراغات مهما كثرت وتحتفظ بفراغ واحد
فستحل المشكلة ان شاء لله ^_^ entities ..ولكن إن استخدمنا هذه ال
&# والرقم الي الها هو 160 entities name هي   على فكرة ال
حساسة لحالة html entities أيضا ملاحظة أخرى مهمة ..وهي أن ال
لذلك تقيد بطريقة كتابتها ^^ ....case sensitive الأحرف
نم كانه دجوي اذام فرعت نأ ديرت له نلآاhtml entities .. شاهد هنا..أو
html entities table قم بالبحث عن

سبحان لله وبحمده سبحان لله العظيم
سبحان من يسبح البرق والرعد باسمه ..سبحان لله
وبحمده سبحان لله العظيم .
ﻠﺪہ ﻱﻩﻨﻤﻢﻢﻟﻟﻌﺬﺪﺤﺘﺗﺑﺍﺍ ﻤﻟﺪﺤﺍہ ل رب العالمين ﻟ ﻠ
أشهد أن لا اله الا لله, وأشهد أن محمد رسول لله

Symbol والآن ال .. html entites لقد تكلمنا في الموضوع السابق عن ال
لكن الفرق أن هذه الرموز أو entites بنفس فكرة ال Symbol ..ال
الأسامي خصيصا للرياضيات أو المعادلات الرياضية ..مثل الأسهم أو اشارة
.. P: المجموع أو الفا وبيتا ..والقصص هاي
وهنا أيضا يمكنك أن تستخدمها بالإسم أو عن طريق الرقم ..
أمثلة عليها ..
HTML Symbol Entities قم بالبحث عن

كما تعلم, فإن صفحات الويب غير محصورة على أحرف معينة أو رموز معينة
للغة واحدة... وهذا يجعل من صفحات الويب أمر عالمي, ولكن كيف يتم
ذلك؟ هل تسائلت كيف يتم قرائة الأحرف المختلفة بين اللغات المختلفة ؟
فما هو ال .. character encoding اجابة هذا السؤال تكون
؟ character encoding
للإجابة على الأسئلة السابقة ..عليك أن تعلم صديقي... أن صفحة الويب
character لتعرض بشكل صحيح, يجب على المتصفح أن يعرف نوع ال
لهذه الصفحة وهو أمر مهم ...وليتضح لك الأمر أكثر ..سنذكر encoding
والتي تستخدم لهذه العملية.. character encoding standard ال

character encoding هي أول مدرسة ASCII ال :ASCII : أولا
وهي اختصار ل standard
American Standard Code for Information Interchange
نظام الفهرسة هذا يعنون 127 حرف أو رموز خاصة يمكن أن تستخدم
[a-z][0- على الانترنت ...الأحرف المدعومة في هذا النظام هي (-![ 9
الأحرف الانجليزية والأرقام والرموز الخاصة ...
لكن بوجهة نظرك !...ما المشكلة في هذا الترميز؟

هذا الترميز يحتوي على عنونة ل 256 حرف ورقم ورمز خاص, :ANSI : ثانيا
وهو اختصار ل
هذا النظام هو النظام ,American National Standards Institute
... الافتراضي لترميز لأنظمة التشغيل وصولا لنظام 95
ويحتوي ASCII وهذا النظام يعد امتداد لما تم العمل عليه بال :ISO-8859- ثالثا: 1
أيضا على 256 حرف.
8-bit Unicode Transformation Format :UTF- رابعا: 8
نظرا للمشاكل التي تقدمها أنظمة الترميز السابقة من حيث التوافقية وعد تمثيل
وهو نظام يمكن أن يحجز من 1 الى 4 بايت .. utf- جميع الأحرف... ظهرت ال 8
.. وهنا تكمن قوته ... بحيث يفحص النص ..فإذا كان أقل من 127 فهو يحجز بايت
واحد .. وهكذا ... وصولا الى حجز 4 بايت لبعض الأحرف أو الرموز الصينية
مثلا ^^........

بسبب قصور html أصبح هو الافتراضي للغة ال 5 utf- نظام الترميز بال 8
html مع ال 4 utf- الأنظمة الآخرى ...ومع ذلك يمكنك استخدام ال 8
مثل meta باستخدام ال
<meta charset="UTF- يمكنك أن تكتفي ب <" 8 html داخل ال 5
... لا يستخدم الترميز من رقم 128 الى 159 utf- ال 8
... ANSI & ISO من 160 الى 255 غير متطابقة مع utf- قيم ال 8
يحتوى على قيم من 256 الى أكثرمن 10000 رمز مختلف .. utf- ال 8

هذا العنوان مهم جدا ^_^ ....
إن الرسائل التي تظهر أثناء تجوالك بين مواقع الانترنت المختلفة, وهناك أرقام
أو رسائل كنت تشاهدها وتصلك رسالة معينة منها إما بنجاح الوصول للموقع
أو بعدم القدرة على الوصول... والآن هل تسائلت يوما ..ما هي هذه الرسائل
وهل هي عالمية أم لا ..الخ ... لو ذكرت لك الرقم 404 ماذا سيخطر ببالك؟
هناك العديد من الرسائل المهمة والتي تبين حالة الطلب الخاصة بك, هذا
.. w3c النظام معتمد من قبل ال
الى 5 أقسام وهي http تقسم رسائل ال

Informational 1xx (1
Successful 2xx(2
Redirection 3xx (3
Client Error 4xx (4
Server Error 5xx(5
هذه النقاط التي تم ذكرها تمثل التصنيفات الخاصة بالرسائل, اذا لاحظت
هذا يدل على أن أي خطأ ..xx فإنه بجانب كل تصنيف وجد رقم وبجانبه
ستمثل رقم الخطأ .. xx وال .. informational سيبدأ ب 1 فهو
الآن 404 ماذا تعني لك ؟

هناك العديد من الرسائل داخل التصنيفات التي ذكرنها ..وسأذكر بإذن لله تعالى
بعض أهم الرسائل:
. page not found 404 : الصفحة غير موجودة (1
خطأ يخص السيرفر(يحدث هذا Internal Server Error : 500 (2
الخطأ إن ظهر أي شرط أو أمر قد يعترض العمل الذي يقوم به السيرفر
باللحظة الحالية, والمشكلة في هذا أنه قد ينتج هذا الخطأ من لأكثر من
سبب...
ممنوع من الوصول, مع أن السيرفر فهم المطلوب .. Forbidden :403 (3
(4
200 :OK .. ماقرلأا لمجأ نم اذه.. ةيلمعلا حاجن ىلع لديو ^^ مهنع فصوو تافينصتلاو لئاسرلا ضرعلC3W

؟؟؟ ...XHTML ال
وهو اختصار ل html في 4.01 XHTML ظهر مفهوم ال
ويتميز ال , EXtensible HyperTextMarkup Language
التقليدي ..بقوانينه الصارمة نوعا ما وبإسلوبه html عن ال XHTML
النظيف بكتابة الشيفرة البرمجية (يقصد بالنظيف وجود قواعد واضحة
تنظم عمل الشيفرة, وبذات الوقت دون وجود شوائب قد تفسد المظهر العام
للكتلة الواحدة.)
لا تظن أن الأمر صعب.. بل هو سهل ..وينظم الشيفرة البرمجية الخاصة
ليس بالشيء الصعب الجديد, وإن لاحظت في أمثلتنا XHTML بك, ال
...^_^.. XHTML السابقة فقد استخدمنا ال
اذن ما هي قوانينها وشوروطها والاختلافات بينها وبين الكتابة باسلوب ال
التقليدي ؟ html

:(document) أولا: الشروط التي تخص المستند
الزامي .... DOCTYPE 1) استخدام ال
<html> خاصية الزامية يجب وضعها داخل ال xmlns 2) الخاصية
يكون الاسم الخاص بهذا ال .. xml namespace ووظيفتها نحديد ال
هو الرابط الذي تم وضعه داخل URI ال .. URI هو ال namespace
فهو يعني عنوان الكتروني يستخدم لتحديد URI أما ال .. xmlns قيمة ال
مكان ووصف محتوى من خلال الرابط ...ويعد جزء أو فرع من ال
التقليدي ... (لا أريد أن أشعبك أكثر... لكن أحببت أن تأخذ رؤوس URL
أقلام عن الموضوع).
جميعهم الزامي وضعهم داخل الصفحة. html, body, title, head 3) ال

: Elements ثانيا: الشروط التي تخص العناصر
.. tags 1) دائما يجب اغلاق ال
... lowercase 2) يجب أن تكون الحروف
بفتحو..هو آخر tag 3) يجب أن يكون التداخل لجميع العناصر بشكل صحيح ..أول
بغلقو... tag
ويقصد به يكفي أن تستخدم ال .. one page root 4) يجب أن يكون له مسار واحد
واحد فقط. namespace
: (attrtibutes ) ثالثا: الشروط التي تخص الخصائص
.. lowercase 1 ) يجب أن تكون الحروف
Quoted 2) يجب أن تكون القيم الخاصة بهه الخصائص ضمن “ ” يعني
وهذا يعني الخصائص التي يمكن اختصارها minimization is forbidden (3
XHTML لوحدها خطأ بالنسبة لل .. checked يجب أن لا تختصر مثل
.. checked=“checked” والصحيح

اختلفت الأمور أيضا ..لأننا قلنا أن هناك اصدارات .. html **) بالنسبة لل 5
.. XHTML واصدار ال 4.01 هو الاصدار الخاص ب
بدون html ولكنها ليست قيد التطبيق ..لأنك ال 5 XHTML لكن هناك 5
تشديد القواعد لم تعمل بعدعلى جميع المتصفحات الرئيسية بكامل
2014 .. لوقمت باستخدام القواعد -8- خصائصها حتى تاريخ اليوم 12
فليست مشكلة ... html مع ال 5 XHTML السابقة لل
لنشاهد الآن أمثلة ونقارن على ما ذكرنا ...

؟html كيف يمكنك تضمين صفحة من موقع خارحي داخل صفحة 
ما هي الطريق التي يمكنك من خلالها طباعة اللون الأصفر ؟( 3 طرق) اذا 
لم تعرف درجة اللون ..ابحث عن طريق جوجل ^_^.
حساسة لحالة الأحرف) ؟ تأكد ) case sensitive هي entities هل ال 
من اجابتك.
برأيك لو أردت طباعة الأحرف اللغة العربية داخل صفحات موقعي, فما هو
الترميز المناسب لذلك ؟ ...ضع اجابتك واذكر السبب وابحث عن طريق
جوجل ما هو الترميز المناسب ^_^
الصفحة يجب أن تحتوي )XHTML قم بكتابة شيقرة برمجية تكون بشكل 
على صورة و فقرة وعنوان...الخ)
في القرائة

صح عن رسول لله صلى لله عليه وسلم أنه قال :
((إن لله لا يقبض العلم انتزاعا ينتزعه من صدور
الرجال ولكن يقبض العلم بموت العلماء حتى إذا لم
يبق عالم اتخذ الناس رءوسا جهالا فسئلوا فأفتوا
بغير علم فضلوا وأضلوا)) خرجه البخاري ومسلم
في صحيحيهما من حديث عبد لله بن عمرو بن
العاص رضي لله عنهما.

ﻠﺪہ ﻱﻩﻨﻤﻤﻢﻢﻟﻟﻟﻌﺬﺪﺪﺤﺤﺘﺗﺑﺍﺍﺍہ ل رب العالمين ... ﻟ ﻠ
تم بحمد لله تعالى الانتهاء من الجزء الأول من دورة مطورين المواقع الالكترونية,
وبهذا ننتقل للجزء الثاني, في هذه الدورة بكل تأكيد لم يتم ذكر كل الخصائص,
وإنما تركت لك كلمات دلالية وأسئلة حتى تحبث وتكتسب المزيد ..ملكة البحث
مهمة جدا للمبرمجين ..وأنت كمبرمج رائع وقوي ..يجب عليك أن تصادق السيد
جوجل ..وإياك وخذلانه..فهذه نصيحتي لك ..
أيضا إني أشهدكم أمام لله ..أن هذه الدورة خالصة لوجهه العظيم , سائلا لله تعالى أن
يتقبل منا ومنكم خير العمل... وأسئله برحمته أن يتقبل منا ومنكم أعمالكم ...
اللهم اغفر لي ولوالدي وللمسلمين أحيائهم وأمواتهم انك على كل شيء قدير ...

ﻮﻧﻥﻤﻟﻋﺮﺪﺩﺧﺤﺎﺍﺍﺃہ ل رب العالمين ﻠ

باللغة العربية HTML دورة

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (15)

Similar to باللغة العربية HTML دورة

Similar to باللغة العربية HTML دورة (20)

More from anees abu-hmaid

More from anees abu-hmaid (20)

باللغة العربية HTML دورة