السلام عليكم ...
أخصائي المكتبات العزيز ^_^ ، أهلاً وسهلاً بك ، في سلسلة دروس مبسطة لتعلم HTML .
قبل البدء ننصح بإستخدام برنامج Notepad ++ المجاني في عمليات التحرير ، او يمكنك استخدام محرر النصوص الإعتيادي "برنامج المفكرة" الذي يأتي مع أنظمة تشغيل ويندوز ، أو أي محرر نصوص معياري يناسبك .
رابط التحميل المباشر ل Notepad ++ من هنا :
http://download.tuxfamily.org/notepadplus/6.3.2/npp.6.3.2.Installer.exe
إذاً لنبدأ :
كما هو موضح ، ان هذه المدونة بدأت من نقاشات على صفحات الفيس بوك ، لذلك سأنسخ هذه النقاشات في عدة تدوينات ، أعذرونا على اللهجة العامية في بعض الحالات " سنسعى إلى تصويبها مع الزمن " ولكن لسرعة النشر سابقيها حالياً كما هي الآن :
HTML ، هي اختصار ل HyperText Markup Language
من الموقع الذي زودنا به الأستاذ حسين الوادي نجد الترجمة كالتالي :
- Hyper هي عكس "خطي" وهي تعني في هذه الحالة أن تنتقل من أي نقطة إلى أي نقطة بدون أن تسير في خط سير محدد، في الماضي - عندما كانت الفأرة شيء يلحقه القط - كانت الحواسيب تعمل بشكل خطي، تقوم بتنفيذ أمر ما ثم تذهب لما بعده، لكن HTML مختلفة، يمكنك أن تذهب إلى أي مكان في أي وقت، ليس بالضرورة مثلاً أن تزور موقع MSN.com قبل أن تزور HTML.net.
- Text تعني النص، وهذه تشرح نفسها.
- Mark-up هو ما تفعله بالنص، فهذه الكلمة تعني توصيف النص، فأنت تقوم بتوصيف النص تماماً كما تفعل مع معالجات الكلمات فتضيف العناوين والنقاط والنص السميك وغيرها.
- Language تعني اللغة، فتقنية HTML هي لغة توصيف وهي أيضاً تستخدم العديد من كلمات اللغة الإنجليزية.
مثال تطبيقي سريع :
أفتح محرر النصوص الخاص بك " Notpad++ في حالتنا :
ألصق الكود التالي بداخله :
<html>
<head>
<title> تعلم تطوير وبرمجة ويب لمختصي المكتبات </title>
</head>
<body>
<h1> العنوان من المستوى الأول </h1>
<p> هذا نص ما </p>
<h2> عنوان من مستوى ثاني تابع للعنوان الأول </h2>
<ul>
<li> الفكرة الأولى من القائمة </li>
<li> الفكرة الثانية من القائمة </li>
<li> الفكرة الثالثة من القائمة </li>
<li> الفكرة الرابعة من القائمة </li>
<li> الفكرة الخامسة من القائمة </li>
</ul>
<h1> عنوان من المستوى الأول ، مستقل عن العنواوين الأخرى </h1>
<p> النص الخاص بهذا المستوى </p>
<ul>
<li> الفكرة الأولى من القائمة </li>
<ul>
<li> الفكرة الفرعية الأولى من القائمة الفرعية </li>
<li> الفكرة الفرعية الثانية من القائمة الفرعية </li>
<li> الفكرة الفرعية الثالثة من القائمة الفرعية </li>
<li> الفكرة الفرعية الرابعة من القائمة الفرعية </li>
<li> الفكرة الفرعية الخامسة من القائمة الفرعية </li>
</ul>
<li> الفكرة الثانية من القائمة </li>
<li> الفكرة الثالثة من القائمة </li>
<li> الفكرة الرابعة من القائمة </li>
<li> الفكرة الخامسة من القائمة </li>
</ul>
</body>
</html>
أحفظ الملف بصيغة HTML ، وتكويد UTF-8 لمعرفة المزيد حول ذلك راجع هذه التدوينة
ستحصل على نتيجة تشبه ما يلي :
العنوان من المستوى الأول
هذا نص ما
عنوان من مستوى ثاني تابع للعنوان الأول
- الفكرة الأولى من القائمة
- الفكرة الثانية من القائمة
- الفكرة الثالثة من القائمة
- الفكرة الرابعة من القائمة
- الفكرة الخامسة من القائمة
عنوان من المستوى الأول ، مستقل عن العنواوين الأخرى
النص الخاص بهذا المستوى
- الفكرة الأولى من القائمة
- الفكرة الفرعية الأولى من القائمة الفرعية
- الفكرة الفرعية الثانية من القائمة الفرعية
- الفكرة الفرعية الثالثة من القائمة الفرعية
- الفكرة الفرعية الرابعة من القائمة الفرعية
- الفكرة الفرعية الخامسة من القائمة الفرعية
- الفكرة الثانية من القائمة
- الفكرة الثالثة من القائمة
- الفكرة الرابعة من القائمة
- الفكرة الخامسة من القائمة
ستحتاج الآن لقليل من التأمل بالكود والنتيجة ، ستكتشف اموراً ممتعة جداً :D ، دعونا نتأمل سوياً ، وهذا ما فعلته بالفقرة التالية ، وفيها تأمل بمثال لتقريب HTML من حياتنا اليومية .
لنقرِّب HTML من حياتنا اليومية
النص التالي بالعامية "نعتذر !" :
خلينا نبسط html اكتر :)
بحياتنا اليومية بشو فينا نشبه html ؟
كونه العنصر الأنثوي غالب على هذه المجموعة ( هذا كانَ الحال في مجموعة الفيس بوك ) خلينا نشوف شي مثال من المطبخ ، انشالله يكون مثال ناجح :) . طبختنا اليوم صفحة ويب :D ( عقولة ستي طباخنا اليوم جعيص ) ما بعرف شو يعني ^_^ ...
يعني مثلاً مثلاً .
أنا دخلت على المطبخ بدي اطبخ وحضر سفرة بطريقة جميلة :) . . . كيف فيني استعرض محتويات المطبخ ؟
الملاعق محطوطة بدرج .
السكاكين بدرج آخر ممكن
الأواني (الطناجر ) بخزانة معينة .
مكونات الطبخة واجزاءها بعدة مواقع أخرى
وطريقة عرض السفرة " كيف بدنا نتفنن بعرضها " اجت كتعليمات خارجية ...
طيب ربة المنزل [[مصمم الويب ]] رتبت محتويات المطبخ بطريقتها الخاصة .
اجيت انا " كرم [[المتصفح]] " فتت على هل المطبخ ، رح اقدر لاقي المعالق والسكاكين والأواني بسرعة بدون ما دور ؟ اكيد لأ ... على مستوى بريق شاي بدي ضيع :D " هون فكرة المعيارية "
بقدر اعرف بحالة وحدة ، انو يكون مكتوب على كل درج شو محتوياته ،
""""متصفح ويب بيحتاج ان يلاقي كل شي مسمى قدامه ، باسم واضح """"[[HTML]] بتسمي العناصر
طيب انا اخدت المكونات اللي بدي ياها ولقيتها بسرعة لأن كل درج وكل رف مكتوب عليه شو بيحتوي ، لهيك انا قدرت اتعامل مع محتويات هل المطبخ .
"""""مسميات الدروج الحقيقية :D ::: هاد عنوان ـ لصفحة النت ، هاد جسم الصفحة ، هي محتويات لنص بالصفحة ، بعدها عنوان من مستوى أول ، بعدين عنوان من مستوى ثاني تابع للمستوى الأول ، بعدين حطينا عنوان تاني .... ونص وجدول وصورة ... """"""
بعدين استخدمت المعدات واللوازم ، وتمت الطبخة بنجاح (هي اكبر مزحة) .
"""" متصفح الويب اخد هل المكونات المسماية ، وعرضها كصفحة ويب """""""
اجا هون دور اني زين هل السفرة ، واعطيها شكل حلو ، وأنيق ...
"""""" هون بتاخد صفحة html هل التعليمات من ملف css خارجي بيحتوي طريقة عرض الصفحة والألوان لكل عنصر وكيف ترتيبها وعرضها (( محطوط بالبلوكة التانية واللي هي head)) """""" [على فكرة ممكن يكون ملف خارجي أو ستايل مدمج بنفس الصفحة " )) .
وخلصت طبخة هل اليوم :
=======================
#######################
يعني بمثال تاني شو هي html ؟
هي انك تفتح بحياتك الماضية قبل ما تصير مطور ويب كنت تفتح مايكروسوفت وورد ، وتعين نص وتقول لورد يحطه خط عريض ، ونص آخر تخليه قائمة نقطية ، ونص آخر تخليه قائمة رقمية ، ونص آخر تخليه عنوان ، ونص آخر تخليه .....
يعني عملية التحديد بالماوس ، بعدين اختيار سمة معينة ،
هي نفسها هون
هون رح نحدد النص بأنو يكون داخل البلوكة <tag> النص </tag>
علماً انو <tag> مقصود فيها اي شيء :) ...
يعني اي نص داخل هل الوسم رح يطبق عليه صفة هل الوسم
بالتالي ، نحن شو لازم نعرف ؟ الاشياء الي منعرفهن على وورد ، كيف بدنا نعملهن هون ، خط عنوان قوائم صور ...
مو شرط نحفظهن بصم ، المهم نفهم البنية .
==========================
#########################
يعني فكرة مهمة ان نسكر التحديد لنسكر تطبيق الخاصية على هل النص فقط .
=========================
#########################
ونقطة كتير مهمة ببنية html ، انو أول شيء بيقراه المتصفح هو head ، لهيك اي شي بيحب المطور ان يطبق على كل النصوص ، بيحطها هنيك بالرأس ، " وعادةً بيحطو هون" الاستايلات ، وبيحطو الكلمات المفتاحية اللي بيحبو جوجل يستخدمها للبحث عن هل الصفحة على نت ....
#############################
=============================
بالتالي صار عنا الأفكار التالية إن شاء الله يكونو واضحين :
ب html نحن منسمي النصوص وhtml بيعرضها بالطريقة اللي سمينالو ياها .
ب html المسميات بيسموها عادة tags ولازم نفتح تاج ، ونسكره بان نسبق اسمه ب /
ب html اول شي بينقرئ هو الرأس التاج head
ب html ، ما في شي معقد ، أهم شي بس نحفظ المسميات ، وكل ما عرفنا مسميات اكتر " تيجان اكتر " فينا نفهم بنية اي صفحة html
بذلك أتمنى أن تكون بنية HTML ، قد أضحت واضحة ،
وصار بإمكانك فهم بنية أي صفحة HTML ...
سأتحدث بالتدوينة المقبلة ، عن بعض مهارات الإعتماد على الذات في HTML .
كرم قبسي .
الله يعطيك العافية يا كروووووووم , حلوة كتير وعلى قولة ستك طباخنا اليوم جعيص ههههههه , بحب قلك انو طبختك كانت زابطة وواضحة ...
ردحذفأحلى كرووووم
أحلى ملهم ولله :D
حذفالمهم عجبتك الطبخة ههه