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

دورة مطوري الويب

[email protected] أنيس حكمت أبوحميد

1


بسم هللا الرحمن الرحيم

أنعم�ت , الله�م ل�ك الفض�ل كل�ه, الحم�د ل رب الع�المين, الحمد ل ال�ذي بحم�ده ت�تم ال�نعم الحم��د ل رب , فالحم��د ل��ك رب��ي حت��ى ترض��ى, علين��ا وتفض��لت علين��ا بفض��ل كثي��ر

.العالمين

لض�م مجموع�ة أو , ف�ي مش�روع جدي�د, أع�ود ال�يكم الي�وم, بفضل من هللا تعالى, إخواني لتك�ون سلس�لة , عدة دروس في مواض�يع مختلف�ة وعل�ى ع�دة مس�تويات بش�كل متسلس�ل

htmlابتدائا م�ن ال , تعليمية متكاملة بإذن هللا تعالى للبدء ببرمجة المواقع االلكترونية Ajax inث��م ال jQueryث��م Html5ث��م ال cssث��م ال JavaScriptث��م ال

jQuery ثمphp ثمphp adv 101 ثمJSON , ثمSASS ثمjQuery UI.سائال هللا تعالى أن يوفقنا وإياكم الى خير العمل


الذين أبدو أسمى آيات الثبات والتضحية , أهدي هذا العمل المتواضيع الى أخواننا في غزةونس��ير عل��ى , نعت��ز به��م, وأنه��م فخ��ر لن��ا, وأثبت��وا للع��الم أنه��م رج��ال بح��ق, واالخ��الص

.خطاهم بإذن هللا تعالى

ف�نحن , وعلى الحق بإذن هللا تعالى س�ائرون, بما أنكم مرابطون, إخواني في غزة العظيمةال تفرقنا , تحت راية واحدة, وبين صفوفكم, نكون معكم, ولنا يوم بإذن هللا تعالى, معكم

ونس�ير , ن�تعلم, ف�نحن نع�د الع�دة للق�اء, وال�ى أن يح�ين ه�ذا الوق�ت, حدود رس�مها كلب�ان, ف�العلم ه�و س�يارة الش�عوب, ونرتقي في سبل العلم حتى نكون لكم عونا بإذن هللا تعالى

.ورفع الجهل عن أمتنا سيكون بإذن هللا تعالى دور شبابنا, وجهادنا بعلمنا

ونحن بإذن هللا تعالى س�نأتيكم م�ن جمي�ع ال�دول إم�ا مجاه�دين أو مب�اركين .. أنتم أملنا اآلن..فإما نصر وإما جهاد ...فانتظروا قدومنا ألحد األمرين ... لكم بالنصر

.سائال هللا تعالى أن ينفع بنا وبكم, كما أقدم هذا العمل المتواضع الى اخواني في كل مكان[email protected] أنيس حكمت أبوحميد

عليك أن تعلم صديقي أن جميع ما سيتم ذكره من أمثل�ة ومواض�يع ل�ن تغط�ي ع�الم وتأك�د أن�و دور , ولن تغط�ي جمي�ع الخص�ائص لك�ل عنص�ر, الويب بشكل كامل

واجع�ل , كتاب هو أن يضعك على الطريق وأنت عليك أن تكمل/دورة/أي شرحواجع�ل ص�ديقك الث�اني , وال تبتعد عنه نهائي�ا..هو صديقك األول Googleمن

, إذا فعل�ت ذل�ك..وتتج�اوز , إياك أن تقول س�هل, التطبيق العملي لكل أمر تتعلمه... !!تأكد أنك لن تستطيع كتابة شيفرة برمجية صغيرة

الموق��ع االلكترون��ي ال��ذي ت��راه أمام��ك ه��و عب��ارة ع��ن *: _*معلوم��ة عل��ى الط��اير ل��ذلك عن��دما تق��وم .. مجموع��ة م��ن الص��فحات ال��ذتي جمع��ت داخ��ل مجل��د واح��د

, فه�ذا موق�ع الكترون�ي..ومن ثم تقوم بربطها مع�ا .. htmlببرمجة صفحات ال ... الموقع dynamicومقدار ال , ولكن يختلف مستوى التعقيد


...أيضا مالحظة مهمة قبل أن تبدأ

لت�رى طريق�ة تنس�يق ... ستجد هن�اك العدي�د م�ن األمثل�ة المكتوب�ة لك��ن ب��ذات ..الش��يفرة البرمجي��ة وت��رى النت��ائج أمام��ك مباش��رة

ه��ذه األس��ئلة عن��دما ت��أتي لتق��وم بحله��ا ... الوق��ت هن��اك أس��ئلة ال تق��م بأخ��ذ أي ج��زء م��ن الش��يفرة البرمجي��ة نس��خ وم��ن ث��م ...

ق�م بكتاب�ة الش�يفرة ..ان�ت ل�م ت�تعلم ش�يئا ..إن فعل�ت ه�ذا .. لصقوه��ذه م��ن أه��م ... وانظ��ر أي��ن تخط��ئ تص��بح ل��ك خب��رة برمجي��ة

...النقاط قبل البدء


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

...يخالف الشريعة االسالمية في عمله


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


؟ HTMLما هي ال ..أول ما يدور بذهننا هو ويقصد بالوصف هي , صفحات الويب لوصفهي لغة صممت HTMLال

والتي تظهر لنا البيانات الخاصة بهذه , التصاميم أو األشكال أو طريقة عرض.الصفحات

Hyperهي اختصار ل HTMLال Text Markup Language.

ويقصد بذلك أنها لغة صممت Markup Languageهي HTMLال عرض النصوص بنائا على ما تم تحريره بشكل نصي , تعريف, لمعالجة

)text ( , وهي ذات قواعد معينة ومحددة لتصميم الlayout والتنسيق. 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هذا يسمى <h1/>وال start tagهذا يسمى <h1>ال


يسمى tagمحصور داخل HTMLيكون جميع ما يكتب داخل صفحة ال html --< <html></html> المرئي وغير المرئي.

:ويكتب بالشكل التالي bodyيكون جميع المحتوى المرئي متواجد داخل ال <body></body> .

وأمور cssوال jsو ملفات ال metaوتحتوي على جميع ال head tagال الخ..باإلضافة الى عنوان الصفحة , تنفذ قبل تحميل الصفحةأخرى يجب أن


: بالشكل التالي HTMLيصبح الشكل البرمجي لصفحة ال

للدالل�ة htmlوهذا التعريف يوض�ع ف�ي أعل�ى ص�فحة ال <DOCTYPE!>هناك وبه��ذا يس��تطيع متص��فح االنترن��ت ع��رض , HTMLعل��ى أن ن��وع ه��ذا المل��ف ه��و

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

.ولكل اصدار تعريفه الخاص html5التعريف الخاص ب


وصوال اآلن html 1991ابتدائا من Htmlتتنوع االصدارات الخاصة بال .. HTML5الى ال

فإننا نقصد ال HTMLونذكر ال , أننا عندما نتكلم اآلن, يجب عليك أن تعلمHTML 4 ...

html3ثم html2ثم +htmlثم html: االصدارات من األقدم لألحدث هي. html5ثم ظهر ) xhtmlظهر مفهوم والعمل على (ثم html4ثم


Webفإننا نقوم أي مستعرض لصفحات الويب htmlلعرض صفحات ال Browser وأشهرهاchrome, Firefox, Internet Explorer, safari ..

:مبدأ عمل المتصفح

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

<p>فهنا لن يقوم بطباعة <p>لذلك اذا كتبت ... 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ال tag , ويرادف هذا المصلطلحEmpty html elements وهي العناصر

مثل end tagباإلضافة الى ذلك ال يوجد لها , التي ال تحتوي على محتوى<br> ) .. وظيفة هذا الtag هي سطر جديد.(

br>مالحظة حسب المقاييس المعتمدة فإنه يمكن كتابة *) وهكذا كفتح </). xhtmlيعتبر standredهذا ال .. ( tagواغالق لنفس ال

.start & end tagهو أي محتوى موجود داخل element contentال

) attribute( يمكنها أن تحتوي مجموعة من السمات html elementsال


مثل ) nested(بشكل متداخل htmlيمكن كتابة عناصر ال <html><body></body></html> والحظ أن أول عنصر أقول

.بانشائه هو آخر عنصر أقوم باغالقه

أن ال ننسى اغالقه مثل html elementمن المهم أثناء التعامل مع أي <p> ... هنا اذا لم أضع</p> ألن المتصفح .. سيعمل الكود وستعمل الصفحة

لكن في بعض األحيان األخرى أو لبعض .. tagهو الذي سيقوم بإغالق ال فإنه ممكن أن يعطيك خطأ بالنتائج أو طريقة ..االخرى بشكل أحرى tagال

.layoutعرضها أو تنظيمها على ال ثم قم بوضع المحتوى , جديد قم بإغالقه مباشرة tagعندما تقوم بانشاء : نصيحة

.بداخل


أنها ليست حساسة لحالة األحرف HTMLمن خصائص لغة ال )not case sensitive ( ولهذا يمكنك كتابة الtag كما تريدuppercase

وهي المنظمة W3Cلكن الطريقة المعتمدة من ال , lowercaseأو , المسؤولة عن وضع المعايير العالمية لتصميم وبرمجة مواقع االنترنت

.htmlللغة ال 4منذ االصدار lowercaseاعتمدت ال


.htmlتقدم سمات اضافية لعناصر ال htmlبال attributesإن ال

. <p style=“”></p>مثل start tagتكتب السمات دائما داخل ال

”name=“valueمثل , تكتب السمات على شكل اسم برمجي وقيمة

”name=“value. ‘أو “ يجب أن توضع قيمة السمة داخل

attributeوال tagسيتم شرح ال : (شاهد المثال والنتائج بالصفحة التالية).ولكننا نتدرج اآلن إليصال فكرة معينة, بإذن هللا تعالى



النتائج


HTML Headingsالمهمة داخل الموقع والتي قد يغفل عن htmlهي أحدى عناصر ال

تعود أهمية هذا العنصر الى استخدامه من , استخدامها أو أهميتها الكثيرينللموقع من خالل تعيين indexingقبل محركات البحث لتحسين عملية ال

. العناوين المهمة

:طريقة استخدام الوسم

end tagو start tagفهذا الوسم له , وكما تالحظ من طريقة كتابة الوسم

النتائج


: مالحظات مهمةوال , الى للعناوين المهمة أو الترويسات فقط headingال تستخدم ال 1)

...مثال BOLDتستخدمها لغير ذلك كأن تجعل الخط زادت ..كلما قل الرقم .. h6الى h1يأتي مرقما من headingال 2)

ألهم عنوان h1لذلك يستخدم دائما , األهمية وزاد حجم الخط والتمثيل له...ألقل العناوين أهمية h6و, بالصفحة

هو التسلسل باستخدام ال headingمن القواعد الموجودة لكتابة ال 3)heading فيبدأ أوال بh1 ثم العناوين األقل مستوىh2 ثم األقلh3

لكن لمزيد من ..طبعا يمكنك العمل بهذا األسلوب أو ال .. (وهكذا ^_____________________^) االحترافية

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

حجم؟ هل يمكنك طباعة هذا الشكل من خالل تعلمك للheading فقط ؟

.قم بكتابة الشبفرة البرمجية الخاصة بهذا الشكل..اذا نعم





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

.. ومن ثم فصول ومن ثم صفحات ومن فقرات ومن ثم كلمات ومن ثم أحرف...htmlال يختلف عن صفحات ال , هذا التقسيم والتعامل معه

وذلك .. يمكنك تقسيم المحتوى الموجود داخل صفحات الويب على شكل فقرات يسمح بوضع أي محتوى وتصنيفه tagهذا ال ... p> tag>باستخدام ال

...على شكل فقرة

يقوم بشكل تلقائي على وضع سطر جديد قبل وبعد الفقرة tagهذا ال


:مالحظات

br>يمكننا أن نستخدم ال ويمكننا استخدام ال, لكي نقوم بانشاء سطر جديد </ النشاء مسافات بين الكلمات أو العناصر..

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

br>ولذلك نقوم باستخدام كل من .. والمسافات الى مسافة واحدة فقط أو </ ... فيمكنك االكتفاء بال ..أما اذا كان المطلوب مسافة واحدةspace

.


هو كتابة توثيق أو شرح أو مالحظات للشيفرة , من األمور المهمة في أي لغة برمجةوللقيام بذلك علينا جل ما علينا معرفته هو كيف يمكننا كتابة ال , البرمجية المكتوبة

Comments ... وبما أننا نتحدث عنhtml .. اذن سنتكلم عن طريقة كتابة الComments داخل الhtml..

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

(1Comments لسطر واحد :

(2Comments ألكثر من سطر :


: مالحظات, فهي مفيدة جدا أثناء كتابتك للشيفرة البرمجية Commentsبالنسبة لل 1)

عن , تساعدك في عملية فحص الشيفرة البرمجة والنتائج/ حتى تستطيع ..ثم تفعيله وهكذا , طريق تعليق كود معين

وبدي أشوف اذا راحت .. htmlلو كان عندي صورتين بال : كمثالهون أنا يا بمحي الصورة .. صورة وضلت صورة كيف بطلع شكل الموقع

اذا ما عجبني أو حبيت أرجعها بس ... األولى أو اني بحطها داخل تعليق .^___^وانتهت القصة commentsبشيل ال

<--ال تكتب في التعليق اال عند البداية أما النهاية فنكتفي ب ! عالمة 2)

ما وظيفة هذه السمة<p></p> ؟ ما هي وظيفة ؟ لماذا قد نطر الى استخدام ؟ ما وظيفة هذه السمة<br ؟ </ كيف يمكننا كتابةComments )داخل ملف ال ) توثيقhtml ؟




عندما نمحي من عقولنا الحدود التي رسمناها بيننا , سننتصر معا... وبين إخواننا في كل مكان

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

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



لذلك ستجد العديد , تنسيق النصوص من األمور المهمة لعرض محتوى الموقع:المسؤولة تسنيق النصوص ونذكر منها tagمن ال

1 (<b> or <strong> : وهيtag تجعل النص أخمل من الحجم الطبيعي)Bold.(

وكالهما , strongوال boldاآلن جميع المتصفحات الرئيسية التفرق بين ال أو التي نريد أن ندل على أن هذه الكلمة مهمة , يستخدم لألمور المهمة

ومع هذا فإنه يمكننا تمييز النصوص بعض األحيان عن طريق , للمستخدمالستخدامها مع boldبدال من ال strongاستخدام ال

highlighted ستجد الكلمات المتابطة لعملية البحث بلون , مثل عملية البحثمختلف هنا نكون قد قمنا بوضع الكلمات المشابه لما يراد البحث عنه داخل

strong ومن ثم اعطاء خصائص للstrong.


2 (<i> or <em> : تستخدم هذه الtags لجعل النص بشكل مائلitalic

. tagsأيضا تتشابه جميع المتصفحات الرئيسية بقرائة هذه ال

3 (<small> :ويمكن . وتستخدم لتجعل نص معين بحجم أصغر من الحجم الطبيعيالخ..تاريخ , copyrightمثل ال ...استخدامها لذكر تعليق خارجي

4 (<sub> and <sup> : الsub هي اختصار لsubscript وهي خاصيةيعني على فرض انو األحرف تطبع , تجعل األحرف تبدأ بعد نصف البداية الطبيعية

1.5سيطع الخط من النقطة tagفإنه باستخدام هذا ال , 1على الخط من النقطة وهي تبدأ بطباعة األحرف قبل superscriptفهي اختصار ل supأما ال ....

1وهذا يعني اذا كانت البداية الطبيعية لطباعة األحرف هي , نصف البداية الطبيعية 0.5سيتم البدأ من النقطة supال tagفإنه باستخدام ال


<del> & <ins> :الحذف ال يكون , إليضاح لعملية حذف نصف من المحتوى <del>يستخدم ال

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

وال , وتستخدم لظهار عملية اضافة لنص, delفهي عكس ال <ins>أما ال وإنما تمييز النص بإنه , يقصد باإلضافة هنا هو امكانية كتابة واضافة محتوى.تم اضافته ويكون ذلك عن طريق وضع خط تحت الن

: مالحظات... معا tagsغالبا ما تستخدم هذه ال 1).. deleteهي اختصار delو insertهي اختصار insال 2)


<mark> : هذا الtag أو تسليط الضوء , يستخدم للداللة على عالمة معينةاذا رغبت بإضافة .. وهذا للفت االنتباه لهذه الجزء من النص, على نص معين

highlight فقم باستخدام هذا ال ..الى جزء من النص الخاص بكtag.

<abbr> : ويستخدم هذا الtag مثل , في حال وجود اختصاراتWWW ,سبب ظهور معنى : مالحظة. (هي داللية لوجود اختصار tagوظيفة هذا ال

).titleاالختصار هو وضع الخاصية .مفيد جدا لتحسين عمليات البحث في حال وجود اختصارات tagهذا ال


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

وهي خاصية تقوم على تحدد اتجاه عرض العنصر dirاستخدام خاصية ال ..rtlأو ltrويمكن استخدام

Ltr :من اليسار الى اليمينRlt :من اليمين الى اليسار

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





ألنها هي , تعد الروابط من أهم مكونات صفحة الويب): links(الروابط مما يتيح للمستخدم , المسؤولة عن ربط مجموعة الصفحات المختلفة معا

.التنقل بالموقع بسهولة

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

1 (unvisited link : وهي الروابط التي لم تقم بزيارتها وتكون باللون.األزرق وتحتها خط


(32 (visited link :وتكون هذه باللون , وهي الروابط التي قمنا بزيارتها

البنفسجي

لكن االختالف هو ..الحظ أن كال الرابطين السابق وهذا هم نفس الرابط ...لذلك أصبح لونه مختلفا .. أنني قمت بالضغط على الرابط

3 (active Link :ويظهر , يصبح لون الرابط أحمر مع وجود خط تحته..هذا أثناء عملية النقر على الرابط


يوجد العديد من الخصائص المهمة للرابط أذكر منها 4)), title, target, rel (1 (rel : نستخدم هذه الخاصية لنحدد نوع االرتباط بين الرابط وبين والملف الذي

nofollowهي relولعل من أكثر القيم التي تستخدم مع ال , يحتوي هذا الرابط.. لكي نمنع تتبع الرابط من محركات البحث ..

2 (target : تستخدم هذه الخاصية لتحديد مكان أو طريقة فتح الصفحة وله عدة). blank ,_parent ,_self ,_top_(قيم وهي

.new tabتقوم بعرض الصفحة في : blank_ال .parent freamتقوم على عرض الصفحة الجديدة داخل ال : parent_ال الموجود في (الحالي freamتقوم على عرض الصفحة داخل ال : self_ال

)الرابط_top : يقوم بعرض الصفحة على حجم الwindow كاملة..

out

http://www.tagindex.net/html/frame/a_target.html�


داخل الرابط ليصبح 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واآلن سنقوم بشرح كل


(1style : في هذا الtag يمكننا وضع مجموعة من الشيفرات البرمجيةالخ...و أشكال النصوص , وخلفيات, المخصصة لتنسيق الصفحة من الوان

(2Title :باإلضافة الى ذلك , وهي السمة المستخدة لوضع عنوان للصفحةلمحركات البحث indexingلها دور كبير في عملية ال

سيتم شرحه في األمام .. styleال تقلق بالنسبة لما كتب داخل ال : مالحظةان شاء هللا تعالى


(3Meta :هي سمة تقدم معلومات حول البيانات الموجودة داخل الصفحة ,وما هي الكلمات األساسية أو المفتاحية لهذه , وتصنف على أي تصنيف

والتي ستزيد من فرص ظهور الصفحة على موقع البحث بشكل , الصفحة, أيضا فهي تقدم معلومات حول صاحب أو ناشر الصفحة, أفضل وأكبر

دائما tagهذا ال . ال يتم طباعتها للمستخدم..وهذه المعلومات جميعها .headيجب أن يأتي داخل ال

*^_..للصفحة refreshلعمل metaيمكن استخدام ال *)

...meta tagأمثلة على استخدام ال


وهي خاصية ( metadataللصفحة عن طريق ال refreshولنقوم بعمل : نقوم بكتابة التالي) noscriptمفيدة في حال وجود

وهناك خصائص أخرى ..ثانية 2كل refreshالصيغة السابقة ستقوم بعمل ...يمكنك البحث عنها واستخدامها


(4Script : يمكننا هذا الtag من كتابةscript بداخله مثل الjavascript أوjQuery ..

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

يمكنك استخدام هذه الشيفرة ..لذلك


(6<link> : يستخدم هذا الtag شيفرات برمجية /تضمين معلومات/لبناءمن مصدر خارجي الى داخل الملف وكثيرا ما نستخدمها لتضمين ملفات

.الخ..cssال

(7<base> : يقوم هذا الtag على تحديدurl سيكون هو المرجع الرئيسيأي الروابط التي ترتبط بمسار أو عنوان ( relativesلكل الروابط ال

) الموقع

: شاهد هذا المثال

http://www.w3schools.com/tags/tag_base.asp�


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

..ولذلك هذا جانب مهم جدا , المحتوى

هو tagهذا النوع من ال , <img>طريقة تضمين صورة معينة هي باستخدام السمة empty )تذكر( , وبهذا فإنه الستخدام هذا الtag نكتفي بattribute )الخصائص (

.. لهذه السمة

: خصائص مهمة(1src : هذه الخاصية هي التي مثل موقع الصورة على السيرفر وهي أهم خاصية..(2Alt : وهي اختصار لalternate text وهو مهم في حال حدوث أي خطأ ولم يتم

ال تعمل هذه الخاصية بسبب , في بعض األحيان..(فيظهر هذا النص, جلب الصورةwebkitداخل ال bugوجود browser مثلopera وال تدعم , الخ ..أو كروم

titleوأضف أيضا ال , لذلك أنت قم بوضع هذه الخاصية... وأقل ie 7اصدارات ال ..ومدعوم ..فهو مهم


(3Width & height : يمكن أيضا التحكم بحجم الصورة عن طريق استخدام الwidth والheight مثال

: مالجظاتوتذكر أن عدد الصور الكبير سيؤثر على , كن ذكيا باستخدامك للصور) 1

ومن ثم نقوم نحن , ألن الصور يتم حفظا داخل السيرفر, سرعة الموقع...باستدعائها

ألنه , وذلك مفيد جدا عند حدوث أي خطأ, للصور alt & titleاستخدم ال ) 2فإنه سيقوم altواذا كان المتصفح ال يدعم ال , سيقوم بإظهار نصمكان الصورة

)... في الشرائح السابقة titleشرحنا عن ال ( tipبإظهار ما تريد على شكل تذكر أنه بامكاننا أن نجعل الصور قالبة ( aفي حال كانت الصورة داخل ) 3

فإنه يحبذ كتابة الرابط الذي ).. <a>راجع الشرائح السابقة تحت موضوع , للنقر..ستقود اليه هذه الصورة


عن طريق استخدام السمة , من بناء الجداول htmlيمكننا باستخدام ال <table> ...

<tr>الصفوف يرمز لها ب , يقسم الى صفوف وأعمدة, كل جدول يمكننا بنائه... <td>واألعمدة ب

لتقسيم الصف <th>يمكننا استخدام ال , ولكل عامود هناك عنوان..للجدول .)وهي فعليا أعمدة ولكن لخصائص مختلفة فقط(مجموعة من العناوين

بامكانها أن تحتوي على tdوال , هي التي يتواجد بها بيانات الجدول tdال الخ..قوائم , نص, صورة.. آخر tableمثل ..جميع أنواع البيانات


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


سيتم ..للجدول cssتم وضع مجموعة من ال (مالحظة على المثال السابق ...)شرحها الحقا بإذن هللا تعالى

border :وال , هو الذي يقوم بطباعة االطار حول الجدولdirection ..تعطي هامش للعناصر paddingوال , هي التي تحدد االتجاه للعنصر

:مثال.. <caption>إلضافة عنوان خاص بالجدول نقوم باستخدام ال


موجودة tagsاذا رأيت هذه ال <thead>, <tbody>, <tfoot> : 2مالحظةهذه تستخدم كوسيلة تنظيمه تقوم ... -_-... P:فال تخف , داخل أحد الجداول

headerسيحتوي على ال theadفمثال ال , على تقسيم الجدول الى مجموعات tfootوال , سيحتوي على محتوى الجدول tbodyوال , الخاص بالجدول

مع األخذ بعين االعتبار أنه لل , الخاص بالجدول footerسيحتوي على ال thead يجب أن يأتيtr لماذا هذه الخيارات, والسؤال اآلن,,واحدة على األقل ,

في بعض األحيان يكون كمية البيانات , ببساطة..tagsأو لماذا وجدت هذه ال هذا ) ... صفحات(للجدول pagerوهذا يحتاج عمل , الموجودة بالجدول كبيرة

الخاص بالجدول والتحكم فقط footerبال pagerاألمر يمكننا من وضع ال في بعض األحيان .. وغير ذلك وهي خاصية مهمة يمكننا استخدامها.. bodyبال

بهذا األسلوب أحافظ على .. الخاص بالجدول bodyلل scrollنحتاج الى عمل للجدول footerوال headerمع االحتفاظ ب bodyلل scrollنسق ال

الخ...

اذكر ما هي وظيفة كلtag من هذه)script, style, title, link, 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التالعب بهذا الشكل عن طريق خاصي تسمى واألفضل من ذلك هو التعامل معها عن ... html5تعد مدعومة في ال

CSSطريق ال


فهي inline elemntوال block elementمن المهم جدا معرفة ماذا يعني ال ...معلومتان مهمتان جدا في تصميم صفحات الويب

1 (Inline : يأتي هنا عنصر الhtml بدون أن يأخذ فوقه سطر جديد وأسفل منهالخ.. <img - <aسطر جديد مثال عليه

2 (block : مثل ..وهي الخصائص التي تأخذ سطر جديدا قبلها وبعدهاh1, p

هذا الكالم مهم جدا لمعرفة طريقة ترتيب ... لماذا تطرقنا الى هذا الكالم؟؟؟ .. واآلن وأيضا معرفة ما هي , وكيف يمكن التحكم بها layoutالعناصر داخل ال

cssبال inlineوال تطبق على blockالخصائص التي يمكن ان تطبق على ال blockولكن لنتطرق اآلن الى أهم مكونان يتضح بهما أهمية ال .. أمور كثيرة ..

...inlineوال


...spanوال divال

ولماذا !! فماذا تعني.. بالصفحات االلكترونية tagsكثيرا ما نرى هذان ال !وما هي أهميتها ! تستخدم بكثرة

سوى أنها divأوال عليك أن تعرف أنه ال يوجد معنى محدد من تسمية : div) أblock فلذلك هي ال تطبع بذاتها ...سينزل سطر بعدها وينشئ سطر قبلها

معا htmlوهي وسيلة إلحتواء مجموعة من خصائص أو عناصر ال ..

ومن أهم ما قام به هذا العنصر هو االستغناء عن األسلوب القديم في تصميم ..واآلن ستجد أن الموقع ... tableعن طريق استخدام ال htmlصفحات ال

والسبب في ذلك هو ظهور األجهزة الذكية ... divعبارة عن مجموعة من ال الخ ..responsive websiteوال


.. ر ال قبلها وال بعدها \أي ال تقوم ببدء س, inlineوهي خاصية : SPAN) بوإعطائه خصائص , هذه الخاصية تستخدم كوسيلة رائعة الحتواء نص معين

...دون أن ينزل سطرا , معينه أو غيرها من االمور

-: divوال spanلنشاهد مثال على طبعا من الممكن أن يحتوي كل منهما

لكن عملية وضع ال, اآلخر دون أخطاءdiv داخلspan عملية غير مبررة

هو divوال inlineهو spanألن ال block وبهذا قد تختلف النتائج عما تريد

...أما العكس فصحيح ..


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

display ....

ما الفرق بين الol والul ؟ ما فائدة الخاصيةtype داخل ال<ol> ؟ ما الفرق بين الinline والblock؟ ماذا يمثل الdiv وماذا يمثل الspanاالجابة اما (؟block وإماinline

) لكل خيار منهمااكتب شيفرة لطباعة الشكل التالي:





وهي ارسال واستقبال البيانات , إن تعاملنا مع االنترنت يقوم على فكرة جوهريةفإن جميع الخصائص التي تكلمنا ..واآلن اذا كنت الحظت , من والى السيرفر

!واآلن ماذا نحتاج ؟..عنها هي وسيلة لعرض المعلومات المخزنة بالسيرفر

وهذا يمكن تطبيقه من , إن ما نحتاجه هو وسيلة إلرسال المعلومات الى السيرفر... 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بخصوص ما تم اظهاره بالجداول فهي تتنوع بين وسائل : مالحظةhtml4 وأخرى للhtml5 , وخذ بعين اإلعتبار أنه الhtml5 غير

..مدعومة من جميع المتصفحات بعد

وسنكتفي بالخاصة .. html5الخاصة بال inputأيضا لن نتطرق اآلن لل ستجد دورة متخصصة بال .. وحين انتهائك من هذا المستوى, html4بال

html5 لكن اآلن لنبقى خطوة ..يمكنك قرائة وتعلم ما تريد .. إن شاء هللا... معا ..بخطوة

يصــدق _____ يغطي عيوب المـرء كثرة مـاله فيما قاله وهو كـذوب

يحمـقـه _____ ويزرى بعقـل المـرء قلة مـاله األقـوام وهـو لـبيب

من أقوال اإلمام علي رضي هللا عنه



وهي input Elementسأتلكم عن ال 1 (text :الصيغة العامة لهذا العنصر هي

input fieldالحظ أننا حين نتعامل مع هو typeوهنا كان ال typeثم نقوم بتحديد ال inputفإننا نقوم بكتابة

text , سطر واحد غالبا ما يستخدم هذا الحقل إلدخال نصي يأتي على شكلاال اذا _^, *جميع ما يمكن طباعته من لوحة المفاتيح (ويقصد بنصي هنا

)الخ..قمت أنت بمنع ذلك عن طريق استخدام سكربت معين أو وسيلة اخرى

2 (password :الصيغة العامة لهذا العنصر هي

بحيث تخفي ما يتم كتابته , ويستخدم هذا النوع من الحقول لكلمات المرور... *على شكل


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

...ذكر أم أنثى

: الصيغة العامة هي


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

الخ..فرنسي

: الصيغة العامة هي


4 (hidden :يمكنك , ال يظهر شاشة المستخدم, هناك نوع من الحقولاستخدامه لحفظ بعض المعلومات التي ال تريد للمستخدم العادي أن يقوم

وتريد بذات الوقت ارسال ما بها من محتوى الى السيرفر , بالتعديل عليهاولكن انتبه أنا قلت .. inputكل هذا يمكنه فعله باستخدام هذا النوع من ال ..

client sideهي htmlوال .. htmlألن هذا يعتبر (أن المستخدم العادي script (لذلك ان كنت , أي يتم تنفيذ الشيفرة البرمجية على متصفح المستخدم

ذكرنا طريقة استعراض الشيفرة ..تذكر في أول هذه الدورة المتواضعة *^_واآلن لنرى الصيغة العامة لها ... ^_^... htmlالبرمجية الخاصة بال


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

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

pager باستخدام الجافا سكربت وليس ال ..للصفحات الخاصة بكphp ..

وتأكد أنك ما قد تقول عنه غير مهم ..تأكد من ذلك .. فال يوجد أمر وجد لعبث*^_________قد يكون في غاية األهمية غدا ..اليوم لك


5 (file : هذا النوع من الinput مهم جدا وهو يستخدم لرفع ملفات الىيلزمك أخذ الحذر منه والتحقق من *... _*وبذات الوقت هو خطير , السيرفر

وسيتم ذكره هناك phpهذا موضوع يتعلق بال (صيغة الملفات قبل رفعها ) ...بإذن هللا تعالى

: الصيغة العامة

عليك االنتباه واستخدام inputعند استخدامك لهذا النوع من ال : مالحظة "enctype="multipart/form-dataالخاصية formداخل ال

ستحدد نوع البيانات التي سيتم enctypeوهو أمر مهم جدا ويقصد ب *^_... binary dataتحميلها ورفعها وهنا قلنا أنها


6 (button : أيضا من العناصر التي يمكن أن نستخدمها معtype هو الbutton .. وتقوم هذه الخاصية على اضفة زر قابل للنقر ليستخدم غالبا مع

*^_الجافا سكربت لنتفيذ أوامر معينة

: الصيغة العامة مع مثال بسيط

اآلن .. onclickفإن هناك خاصية جديدة ظهرت وهي ..كما الحظت ..اآلن >-.....أريدك أن تعرف أن كل أمر يمكن أن يقوم به المستخدم هو حدث


) click(فمثال عملية النقر .. له اسم برمجي يدل عليه , وكل حدث تقوم به ألنها ..^_^ هذه األحداث ستتعامل معها بكثرة ... onclickفهي كما رأيت

^_^مفيدة وتعطي جانب من التفاعل الرائع بين المستخدمين والمواقع

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

...ومن األمثله على هذه األحداث ... القواعدية لكل لغة عن األخرى Onmouseover أوonmouseout .. الخ..

JavaScriptما رأيك أن تجرب البحث تحت عنوان Eventsوبعد ذلك ... وانظر الى مسميات األحداث وكيف تدل على عملها ..جرب ..

سنتكلم عنها أيضا بإذن هللا تعالى في جزء الجافا ... أكمل الدورة وال تقلق سكربت


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

^_^... clearوتراها كثيرا تحت مسمى ..

:الصيغة العامة

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

^_^ ..بالخطأ


8 (Submit : هذا النوع من الinput .. يمثل أحد أهم عناصر الform ووظيفتها تتلخص بإرسال البيانات التي تم ادخالها بالحقول الى السيرفر

... وهذا مهم جدا..

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

أيضا جيب .. formالى ال actionوهذا يمكن عن طريق اضافة ..^^ولكن اآلن لن .. getأم postعلينا تحديد طريقة ارسال البيانات هل هي

احدى المواضيع المهمة methodألن هذه ال getوال postنتكلم عن ال ^_^) phpداخل ال

-----<


:هي submitالصيغة العامة لزر ال

:فيصبح شكله كالتالي formأما بخصوص ال

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

fromستستقبل البيانات من ال


9 (select : هذا الtag يستخدم إلنشار قائمة منسدلةdropdown list .. هذهالقائمة تتميز بأنك تستطيع من خاللها حصر مجموعة اإلحتيارات الممكنة والتي

...سيقوم بادخالها المسخدم ضمن مساحة محددة

: الصيغة العامة

والقيمة التي سترسل الى .. number-listفاإلسم البرمجي هو .. كما تالحظالقيمة التي ترسل هي التي بداخل ال ..السيرفر هي القيمة التي يختارها المستخدم

value ... أما الكلماتone, tow, three فهذه نصوص لتظهر للمستخدم ...ابحث ) وليس خيار واحد..ابحث اآلن كيف يمكنك أن تقوم باختيار أكثر من خيار (

وابحث أيضا عن فائدة الخاصية html multiple select optionعن selected عن طريقselected in select html tag


10(textarea : تكلمنا في الشرائح السابقة عن طريقة ادخال نص بسطرواآلن سنتكلم عن عنصر يمكننا من اضافة ) textوهو عن طريق ال (واحد

عدد األسطر التي يمكن ... textareaهذا العنصر هو ال , أكثر من سطرويمكن أيضا التحكم بحجم ... كتابتها داخل هذا النوع هو عدد ال نهائي لكن األفضل طبعا عن طريق ال ..العنصر عن طريق الألعمدة والصفوف

css ...: الصيغة العامة

وهاتان الخاصيتان .. colsو rowsفإنه تم تعريف الخاصيتين ..اذا الحظت وبعد ذلك سيظهر لك ... صفوف 10عامود و 30تحدد عرض العنصر ب .

scrolling ... وانظر النتائج..طبق المثال...


: خصائص

قمثال يمكن اسخدام , هناك بعض الخصائص التي يمكن استخدامها مع الحقولالخ ..urlهناك أيضا ( txtوال passwordلكل من ال sizeالخاصية

)..html5وسأكتفي اآلن بما تم ذكره حتى نصل ال Size : هذه الخاصية تقوم على تحديد عرض الحقل بنائا على عدد األحرف

ويضاف (حرف ظاهر 20فمثال الحالة االفتراضية للمتصفح هو , المرئيةمثال 4يمكن تغييره الى ) ..بكسل تقريبا كهامش قبل نهاية النص 35اليها

: الحظ المثال التالي..


:خصائص

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

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


:خصائص

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

^_^...هللا تعالى

html input Attributesقم بتجربة البحث عن

الم يخطر ببالك أثناء تنفيذ , checkboxوال radioلل checkedخاصية ! ..؟..كيف يمكنني اختيار أحد االختيارات مباشرة , المثال

وال radioهذه الخاصية خاصة ب checkedلتستطيع عمل ذلك عليك استخدام checkbox ...الحظ المثال :


..اآلن لنأخذ مثاال على ما سبق من خصائص عناصر تم ذكرها

الشيفرة البرمجية الخاصة المثال كتبت بشكل سهل بحيث يسهل : مالحظةوعندما تتقدم .. عليك قرائته واكتشاف االختالفات بين العناصر مع بعضها

اعلم أنه يجب عليك أو يفضل ..وتتطور معرفتك , الى األمام بإذن هللا تعالىواذا ..بشكل رئيسي .. لكل مجموعة wrapperك divأن تستخدم ال

..يرجى أخذ هذه المالحظة بعين االعتبار..احتوت مجموعات فرعية كذلك ^_^بعد مقارنتك ودراستك للمثال ..الحظ ما أقصد بالصورة

نموذج اتصل بنا(قم بكتابة شيفرة برمجية لبناء هذا الشكل:(ال يهمني اآلن هنا: مالحظةلكن ما يهمني هو..التصميم

قدرتك على كتابة شيفرة برمجية تنشئ مثل هذه الحقولأيضا قم باضافة اللغة والجنس

...^^للمتقدم لهذا الطلب تمنع عمليات النسخ واللصق

..لحل هذا السؤال خصوصا والكل عموما




بل السالمة فيها أعجب العجب ليس البلية في أيامنا عجبا ليس الجمال بأثواب تزيننا إن الجمال جمال العلم واألدب

ليس اليتيم الذي قد مات والده إن اليتيم يتيم العلم واألدب

من أقوال اإلمام علي رضي هللا عنه[email protected] أنيس حكمت أبوحميد


يقوم على عرض صفحة ويب داخل صفحة الويب tagهو ... iframeال ..الخاصة بي

:الصيغة العامة هي

: الخصائص الموجودة في المثال هيوتحتوي هذه الخاصية على الرابط للصفحة المراد تضمينها داخل : scr) أ

.صفحة الويب الخاصة بيوتستخدم هذه لحذف االطار االفتراضي اذا اسندت : frameborder) ب

.اليه القيمة صفر..عرضا وارتفاعا ... iframeلتحديد حجم ال : width & height) ج


ifreamأيضا من الخصائص الجميلة هي امكانية انشاء رابط وربطه بهذا ال لم أذكره targetهناك ... <a>التي تكلمنا عنها بال targetهل تذكر ال ..

ifreamوقمت بتأجيله الى هما وهو target , هذا األسلوب يتيح تغير الsrc الخاص بالiframe عند النقر على الرابط...^_^

: شاهد الصيغة والمثال


خصوصا البرتقالي ..منذ أيام الصغر وأنا أعشق األلوان ... ^_^األلوان .... صحيح شو دخلو ؟!! شو دخل هذا بالموضوع ؟!... _..!واألبيض والبيج

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

..^_^عنها اآلن بإذن هللا تعالى

:أشكال وهي 3طريقة كتابة األلوان تكون على الخ.. blueأو red وفيها يتم ذكر اسم اللون مثل: االسم1)


fالقيم .. ff22ff#وكتب بالشكل التالي ... وهو النظام الست عشري : hexال ) 2 وبما انه نظام ست عشري فهذا يعني .. هذه جميعها قيم متغيرة حسب اللون 2و

fالى aواألحرف من 9الى 0امكانية كتابة اي رقم من واآلن , هذا النظام الست عشري15يمثل fوحرف ال 10يمثل القيمة aحرف ال

وتمثل rgbبال 255هي ffوالقيمة ) األسود( 0كلون 00باأللوان تم اعتماد يمكن كتابة األلوان : مالحظة(^^ أزواج 3وهي تكتب على شكل , اللون األبيض

..)^^فهذا أمر مسموح به fff#على شكل لو أخذنا FFFF00, #FF00FF, #FF0000#أمثلة على النظام الست عشري

مالحظة مهمة , 0 0 255وهو يساوي ..هذا يمثل اللون األحمر FF0000#اللون _^ * hexهي عالمة مهمة والزامية قبل استخدام األلوان بنظام ال #أيضا ال

, الثالثة الضوئيةاأللوان .. red green blueوهو اتصار ل : rgbال ) 3أكبر قيمة .. هذا اللون األحمر.. rgb(255,0,0): وطريقة استخدامه تكون كاتالي

rgb(19,192,12)أمثلة أخرى .... 0وأصغر قيمة هي 255هي


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

واآلن لنرى ذلك ...الخ بنائا على البنية التركيبية ..تسنيق األشكال واأللوان ^_^..بشكل عملي


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

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

!ماذا سيحدث؟! ..على المتصفح ؟

أذا انتبهت في هذا المثال كيف قمت ... في مثال سابق ..لذلك

.. خاصه به entityكل رمز له .. html entitiesبطباعة ال ...إما اسم وإما رقم entitiesويمك أن تكون هذه ال


إن ..الجواب طبعا ال !! ..هل هذا يختلف ..اسم ورقم ... entitiesاذا كانت ال لكن هناك ميزة ..أو الرقم لن يختلف Entitiesاستخدمت االسم الخاص بال

...وهما ..وسيئة لكل من هذان االستخدامان

فهو أسهل للقرائة والتذكر لوظيفة هذه ال ..اذا قمت باستخدام االسم ) 1entites فسيصعب عليك ذلك ..اما اذا استخدمت الرقم...

ليست كل المتصفحات داعمة لل ..فهناك مشكلة ..اذا استخدمت االسم ) 2entities name ).وحقيقة هذا الكالم ال ) المتصفحات القديمة في الغالب

فكل المتصفحات داعمة له باإلضافة الى ..أما الرقم .. يوجد اجابة دقيقة عليه^_^...^^ لها أسماء entitiesليست كل ال ..ذلك


هل تتذكر لماذا ... ;nbsp&استخدام ال entitiesأيضا من األمثلة على ال فكما قلنا أن ..لقد قمنا باستخدامها لصنع مسافات ..نعم ! ...استخدمناها ؟

المتصفحات تقوم على حذف الفراغات مهما كثرت وتحتفظ بفراغ واحد ^_^فستحل المشكلة ان شاء هللا entitiesولكن إن استخدمنا هذه ال ..

160#&والرقم الي الها هو entities nameهي ;nbsp&على فكرة ال حساسة لحالة html entitiesوهي أن ال ..أيضا مالحظة أخرى مهمة

^^لذلك تقيد بطريقة كتابتها .... case sensitiveاألحرف

أو ..شاهد هنا.. html entitiesاآلن هل تريد أن تعرف ماذا يوجد هناك من html entities tableقم بالبحث عن

http://www.ascii.cl/htmlcodes.htm�

سبحان هللا وبحمده سبحان هللا العظيم سبحان هللا ..سبحان من يسبح البرق والرعد باسمه .وبحمده سبحان هللا العظيم

الحمد ل الذي بحمده تتم النعم الحمد ل رب العالمينوأشهد أن محمد رسول هللا, أشهد أن ال اله اال هللا



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نظام الفهرسة هذا يعنون

(-![0-9][a-z]األحرف المدعومة في هذا النظام هي ...على االنترنت ...األحرف االنجليزية واألرقام والرموز الخاصة

ما المشكلة في هذا الترميز؟!...لكن بوجهة نظرك


, حرف ورقم ورمز خاص 256هذا الترميز يحتوي على عنونة ل : ANSI: ثانياوهو اختصار ل

American National Standards Institute , هذا النظام هو النظام... 95االفتراضي لترميز ألنظمة التشغيل وصوال لنظام

ويحتوي ASCIIوهذا النظام يعد امتداد لما تم العمل عليه بال : ISO-8859-1: ثالثا.حرف 256أيضا على

UTF-8 :8-bit Unicode Transformation Format: رابعا

نظرا للمشاكل التي تقدمها أنظمة الترميز السابقة من حيث التوافقية وعد تمثيل بايت 4الى 1وهو نظام يمكن أن يحجز من .. utf-8ظهرت ال ... جميع األحرف

فهو يحجز بايت 127فإذا كان أقل من ..بحيث يفحص النص ... وهنا تكمن قوته .. بايت لبعض األحرف أو الرموز الصينية 4وصوال الى حجز ... وهكذا .. واحد ........^^مثال


بسبب قصور html5أصبح هو االفتراضي للغة ال utf-8نظام الترميز بال html4مع ال utf-8ومع ذلك يمكنك استخدام ال ...األنظمة اآلخرى

مثل metaباستخدام ال

meta>يمكنك أن تكتفي ب html5داخل ال charset="UTF-8">

...159الى 128ال يستخدم الترميز من رقم utf-8ال ... ANSI & ISOغير متطابقة مع 255الى 160من utf-8قيم ال

..رمز مختلف 10000الى أكثرمن 256يحتوى على قيم من utf-8ال


.... ^_^ هذا العنوان مهم جدا

وهناك أرقام , إن الرسائل التي تظهر أثناء تجوالك بين مواقع االنترنت المختلفةأو رسائل كنت تشاهدها وتصلك رسالة معينة منها إما بنجاح الوصول للموقع

ما هي هذه الرسائل ..واآلن هل تسائلت يوما ... أو بعدم القدرة على الوصولماذا سيخطر ببالك؟ 404لو ذكرت لك الرقم ... الخ ..وهل هي عالمية أم ال

هذا , هناك العديد من الرسائل المهمة والتي تبين حالة الطلب الخاصة بك.. w3cالنظام معتمد من قبل ال

أقسام وهي 5الى httpتقسم رسائل ال


1 (Informational 1xx2(Successful 2xx3 (Redirection 3xx 4 (Client Error 4xx 5(Server Error 5xx

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

..ستمثل رقم الخطأ xxوال .. informationalفهو 1سيبدأ ب

ماذا تعني لك ؟ 404اآلن


وسأذكر بإذن هللا تعالى ..هناك العديد من الرسائل داخل التصنيفات التي ذكرنها :بعض أهم الرسائل

. page not foundالصفحة غير موجودة : 1404)(2500 :Internal Server Error خطأ يخص السيرفر) يحدث هذا

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

...سبب(3403 :Forbidden مع أن السيرفر فهم المطلوب , ممنوع من الوصول..(4200 :OK .. ويدل على نجاح العملية ..هذا من أجمل األرقام ^^

C3Wلعرض الرسائل والتصنيفات ووصف عنهم

http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html�


؟؟؟... XHTMLال وهو اختصار ل html 4.01في XHTMLظهر مفهوم ال EXtensible HyperText Markup Language , ويتميز ال

XHTML عن الhtml بقوانينه الصارمة نوعا ما وبإسلوبه ..التقليدييقصد بالنظيف وجود قواعد واضحة (النظيف بكتابة الشيفرة البرمجية

وبذات الوقت دون وجود شوائب قد تفسد المظهر العام , تنظم عمل الشيفرة.)للكتلة الواحدة

وينظم الشيفرة البرمجية الخاصة ..بل هو سهل .. ال تظن أن األمر صعبوإن الحظت في أمثلتنا , ليس بالشيء الصعب الجديد XHTMLال , بك

...^_^.. XHTMLالسابقة فقد استخدمنا ال

اذن ما هي قوانينها وشوروطها واالختالفات بينها وبين الكتابة باسلوب ال html التقليدي ؟


):document(الشروط التي تخص المستند : أوال....الزامي DOCTYPEاستخدام ال ) 1<html>خاصية الزامية يجب وضعها داخل ال xmlnsالخاصية ) 2

يكون االسم الخاص بهذا ال .. xml namespaceووظيفتها نحديد ال namespace هو الURI .. الURI هو الرابط الذي تم وضعه داخل

فهو يعني عنوان الكتروني يستخدم لتحديد URIأما ال .. xmlnsقيمة ال ويعد جزء أو فرع من ال ...مكان ووصف محتوى من خالل الرابط

URL لكن أحببت أن تأخذ رؤوس ... ال أريد أن أشعبك أكثر... (التقليدي).أقالم عن الموضوع

.الصفحةجميعهم الزامي وضعهم داخل html, body, title, headال ) 3


: Elementsالشروط التي تخص العناصر: ثانيا.. tagsدائما يجب اغالق ال ) 1... lowercaseيجب أن تكون الحروف ) 2هو آخر ..بفتحو tagأول ..يجب أن يكون التداخل لجميع العناصر بشكل صحيح ) 3

tag بغلقو ...ويقصد به يكفي أن تستخدم ال .. one page rootيجب أن يكون له مسار واحد ) 4

namespace واحد فقط.

) :attrtibutes( الشروط التي تخص الخصائص : ثالثا.. lowercaseيجب أن تكون الحروف ) 1Quotedيعني “ ” يجب أن تكون القيم الخاصة بهه الخصائص ضمن ) 23 (minimization is forbidden وهذا يعني الخصائص التي يمكن اختصارها

XHTMLلوحدها خطأ بالنسبة لل .. checkedيجب أن ال تختصر مثل .. ”checked=“checkedوالصحيح


ألننا قلنا أن هناك اصدارات ..اختلفت األمور أيضا .. html5بالنسبة لل **) .. XHTMLهو االصدار الخاص ب 4.01واصدار ال

بدون html5ألنك ال ..ولكنها ليست قيد التطبيق XHTML5لكن هناك تشديد القواعد لم تعمل بعدعلى جميع المتصفحات الرئيسية بكامل

لوقمت باستخدام القواعد .. 2014-8-12خصائصها حتى تاريخ اليوم ...فليست مشكلة html5مع ال XHTMLالسابقة لل

...لنشاهد اآلن أمثلة ونقارن على ما ذكرنا

كيف يمكنك تضمين صفحة من موقع خارحي داخل صفحةhtml ؟اذا ) طرق 3(ما هي الطريق التي يمكنك من خاللها طباعة اللون األصفر ؟

.^_^ابحث عن طريق جوجل ..لم تعرف درجة اللون هل الentities هيcase sensitive )؟ تأكد ) حساسة لحالة األحرف

.من اجابتكفما هو , برأيك لو أردت طباعة األحرف اللغة العربية داخل صفحات موقعي

ضع اجابتك واذكر السبب وابحث عن طريق ...الترميز المناسب لذلك ؟ ^_^ جوجل ما هو الترميز المناسب

قم بكتابة شيقرة برمجية تكون بشكلXHTML ) الصفحة يجب أن تحتوي)الخ...على صورة و فقرة وعنوان




: صح عن رسول هللا صلى هللا عليه وسلم أنه قال إن هللا ال يقبض العلم انتزاعا ينتزعه من صدور ((

الرجال ولكن يقبض العلم بموت العلماء حتى إذا لم يبق عالم اتخذ الناس رءوسا جهاال فسئلوا فأفتوا

خرجه البخاري ومسلم )) بغير علم فضلوا وأضلوافي صحيحيهما من حديث عبد هللا بن عمرو بن

.العاص رضي هللا عنهما[email protected] أنيس حكمت أبوحميد

...الحمد ل الذي بحمده تتم النعم الحمد ل رب العالمين

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

ملكة البحث ..وإنما تركت لك كلمات داللية وأسئلة حتى تحبث وتكتسب المزيد يجب عليك أن تصادق السيد ..وأنت كمبرمج رائع وقوي ..مهمة جدا للمبرمجين

..فهذه نصيحتي لك ..وإياك وخذالنه..جوجل

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

...اللهم اغفر لي ولوالدي وللمسلمين أحيائهم وأمواتهم انك على كل شيء قدير


وآخر دعوانا أن الحمد ل رب العالمين


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

Education

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