المقدمة
يصعب على العديد منا تنسيق مساهماته فى المنتدى بالشكل الذى يريده ربما لأنه لايعلم كيف يقوم بذلك وهذا هو الغرض من هذه المجموعة من الدروس التى سوف أقدمها هنا وهى المدخل الرئيسى لتتعلم كيف تنسق مساهمتك وتجعلها تبدو أفضل وبالشكل الذى تريده تماما.علما بأنك مع نهاية هذه السلسلة من الدروس سوف تكون قد تعلمت وبدون أن تشعر إحدى اللغات البرمجية الأساسية المستخدمة فى تصميم صفحات الإنترنت وهى لغة html وعندما أقول لغة برمجية لا أقصد التخويف أو إرعاب القارئ فهذه اللغة بالنسبة للمبرجمين الحقيقين أصبحت لا تعتبر لغة برمجية وذلك لسهولتها ولأن أى شخص كان بإمكانه تعلمها حتى ولو لم يكن له أى تعامل سابق مع اللغات البرمجية أو معرفة وهى لا تحتاج لتعلم لغة أخرى حتى تستطيع التعامل معها. وعند محاولة كتابة أى مساهمة ستجد كل الأدوات التى سوف تحتاجها فى رأس الصندوق الخاص بكتابة المساهمة وهو يشبه كثيرا الشريط الموجود فى رأس صفحات برامج الأوفيس مثل الوورد:
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
وخلف كل أداة توجد شفرات اللغة التى سوف نتعلمها وبذلك يكون من السهل التعامل مع الأداة عندما تتعلم أسراراها ويكون من السهل عليك تنسيق مساهمتك بما يتناسب مع ذوقك وتطلعاتك.ويجدر الإشارة هنا إلى أحد أهم وأسهل البرامج التى يمكن إستخدامها فى كتابة مساهماتك وهو برنامج Microsoft office Front Page وهو أحد برامج حزمة الأوفيس التى قد تعامل معها الكثير منا بصورة أو بأخرى مما يجعل التعامل مع هذا البرنامج غاية فى السهولة والبساطة حيث لا تحتاج لأن تكتب أى شفرات ولا تحتاج حتى لتعلم أى لغة برمجية إلا فيما ندر حيث تستطيع تصميم مساهمتك به وتنسيقها كما تشاء وسوف يقوم البرنامج بكتابة الشفرة لكل ماتصممه وبعد ذلك يمكنك نسخ الشفرة ولصقها فى مساهمتك وسوف تظهر تماما كما صممتها عند المعاينة مما يسهل عليك عناء التعامل مع الشفرات الموجودة فى رأس صندوق المساهمة ولن تحتاجة إلا فى حالات معينة مثل : إضافة صورة أو ملف فيديو أو ملف فلاش لمساهمتك.وأرجو من الذين يودون التعلم والإستفادة إضافة تعليقاتهم أو إستفساراتهم بعد كل درس حتى لا ننتقل إلى الدرس الجديد وقد تركنا شيئا غير مفهوم لمن يحب أن يتابع معنا.
ماهى html ؟ html اختصار ل (hyper text markup language)وهى عبارة عن مجموعة من الشفرات المنطقية (markup) موجودة بين علامتى (اكبر وأصغر من) تحدد مظهر الوثائق والمعلومات التى تحتويهاماهو الhypertext? هى عبارة عن الحصول على النص بمجرد الضغط ،فهناك طريقتان فى البحث عن المعلومة
linear
hyper
مثال على linear شريط التسجيل فلسماع أغنية يجب تقديم وتأخير الشريط حتى نحصل على الأغنية المطلوبةومثال على hyper أسطوانة الصوت فلاختيار أغنية معينة فبمجرد الضغط على أسم الاغنية ننتقل أليهافي الحال فعند تطبيق هذا الكلام على ال(hypertext)يمكننا أن نقول أنه بمجرد النقر على الوصلة ننتقل حالا ألى موقع جديد فى نفس الصفحة او فى صفحة جديدة وهذا هو مفهوم(hypertext) ففى (html) نبدأ بتعريف الصفحة ثم رأس الصفحة ثم عنوان الصفحة ثم جسم الصفحة
مثال:1
<html> <head ><title >تعلم هتمل
</title> </head> <body> السلام عليكم </body> </html>
فى هذا المثال قمنا بتعريف الصفحة بأنها من النوع هتملثم عرفنا رأس الصفحة ثم عنوان الصفحة وهو العنوان الذي يظهر فى محركات البحث أو عندما تضيف موقع ألى قائمتك المفضلة فان الاسم الذى تراه هوالعنوان الذي نكتبه فى ال titleلذا يجب أن يكون العنوان هنا دقيق في تعريف محتويات موقعك ليسهل أيجاده فى محركات البحث.ودائما يجب أن يكتب الأمر بين علامتى أكبر واصغر من <>وبعدما كتبنا العنوان ننهى الان الامرين head&title ثم نفتح الامر bodyوفيه نكتب كل مانريد فى الموقع وهنا كتبنا جملة السلام عليكم ثم نغلق الامر body ثم الامر html ولاحظ أننا نغلق الامر بكتابته هو ذاته مع وضع slash والان لنكتب البرنامج السابق لنفتح الnotepad الان أحفظ الملف بالامتداد html او htm اغلق الملف الان ثم أفتحه ولاحظ عند فتحه ظهور علامة الاكسبلور علي الملف مما يعنى أنه صفحة نتوالنتيجه هى ظهور كلمة السلام عليكم على خلفية بيضاءالان يمكنك القول انك انشات صفحة ويب ولكننا سنناقش كيفية ترتيب موقعنا وتقسيمه واختيار نوع الخط ولونه وحجمه ولون الخلفيه ...ألخ
(مثال 2:)
<head><title>مثال 2</title></head><body bgcolor="blue"><font="arial size="4">مرحبا بك في درسك الاول</font></body></html>
لاحظ اننا بعد الامر body كتبنا أوامر أخرى سنتعرض لها فى حينه ثم قفلنا أخر أمر كتبناه ثم الذى قبله حتى الامر body &html والآن أحفظ الملف بلامتداد html أو htm ان الشفرات الموجودة بين علامتى <> لاتفرق بين الحروف الكبيرة والصغيرة (UPPERCASE &lowercase)فسواء كتبت الاوامر بالحروف الصغيرة أو الكبيرةفان الامر سينفذ ولكن يجب ان يكون بين علامتى <>ويسمى tagوهذه العلامةتوضح للمتصفح أن هذا أمر يجب تنفيذه وليس نصولكتابة هذه العلامات فى المتصفح تكتب كلآتى & l t ; لعلامة < & g t ; لعلامة >وينقسم ال tag (وسم) الىتاك فتح <> وتاك نهاية الشفرة < / > والعناصر المكونة لشفرة html تسمى عناصر (element)ولكل عنصر مجموعة من الصفات له (attributes)
العنصر font له مجموعة من الصفات مثل السمك(bold) الميل (italic) الحجم (size) وغيره والصفة غالبا تأخذ قيما رقمية -كحجم الخط وغيره- أوقيما وصفية كدرجة اللون احمر او أصفر ألخ
مثال :3
< html >< head >< title >تعلم هتمل< /title >< /head >< body >< font color="blue" size="4" >السلام عليكممرحبا بك فى درسك الاول< /font >< /body >< /html >