HTML الإعتماد على الذات وتطوير المهارات ...

السلام عليكم ،

تحدثتُ في تدوينتي السابقة البداية مع HTML  عن أساسيات لغة HTML ، وهي أساسيات بسيطة لمن أراد أن يدخل في جو HTML،  الآن يجب عليك أن تبحث وتتعلم أكثر :

أدوات الإعتماد على الذات :

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

أولاً محرك البحث جوجل : 

بكل بساطة واجهني فرضاً وسم جديد لا أعرف ما هو أو كيفية استخدامه وخياراته ، بامكانك ببساطة أن تستخدم جوجل ضع اسم الوسم مع كلمة استخدام ، افضل البحث بالانجليزية لكثرة المصادر مثلاً : ul Html tag usage 

ستجد كيفية استخدام وسم ul في HTML ...

ثانياً موقع مدارس دابليو 3 (www.w3schools.com/ ) :

غالباً ، ستكون نتائج بحث جوجل في خيارك الأول من هذا الموقع ، الذي فيه أساليب تعليمية جميلة لتقنيات الويب " مع امكانية التجريب مباشرة على الموقع " للأمثلة التدريبية . الوصلة المباشرة لتعلم HTML  هي من هنا : http://www.w3schools.com/html/default.asp  

ويمكن تصفحه باعتباره مرجع لكافة الوسوم ... 

ثالثاً : مواقع عربية :

سأقوم بالعودة لهذه التدوينة وإضافة أي مواقع أخرى بإمكانكم إقتراح مواقع في تعليق ﻷُضيفها هنا : 

هذا الموقع يقدم دروس منهجية ل HTML و CSS  و PHP   عرفنا به الأستاذ حسين الوادي : 

http://ar.html.net/tutorials

 نصائح عامة :

 بعد أن تعرفت على بنية HTML ، تاملها :) ،
كل صفحات انترنت أمامك هي HTML بغض النظر إن تم توليدها من خلال لغات برمجة أخرى ، ولكن الناتج النهائي أمامك هو HTML  ، اطلع على الصفحات ، انظر للميزات ، اطلع على الأكواد كيف تم عملها ،
كل صفحة أمامك بإمكانك أن تطلع على كودها من خلال النقر " في متصفح فايرفوكس مثلاً" زر يمين على أي مكان بالصفحة ، ومن ثم أختر "View Page Source " أعرض مصدر الصفحة ، حسب لغة فايرفوكس لديك ، وبذلك تستطيع أن تطلع على مصدر الصفحة التي امامك أياً كانت .
أستخدم أدوات لتعرف الكود الخاص بعنصر بعينه ، في فاير فوكس أيضاً يمكنك ذلك من خلال زر يمين على العنصر ، واختر : Inspect element ( آخر خيار ) لا أعرف في فايرفوكس العربي كيف تم تسميته ربما فحص عنصر أو تفقد عنصر ...
بالنهاية ننصح دائماً بإستخدام متصفح فايرفوكس لميزاته الرائعة ، لمن لا يمتلكه يمكنكم تحميله من الموقع الرسمي هنا :
النسخة العربية : http://download.mozilla.org/?product=firefox-20.0&os=win&lang=ar
النسخة الإنجليزية :
http://download.mozilla.org/?product=firefox-20.0&os=win&lang=en-US

مهم جداً : لتطور من مهاراتك أن تطلع على اساليب استعراض المصدر ، واستعراض عنصر بعينه ، هذا الشيء سيمنحك القدرة على تعلم معظم ما تراه من نتائج HTML  امامك على صفحات ويب المختلفة .

والسلام عليكم ورحمة الله وبركاته ...
كرم قبسي .

مشكلة المحارف العربية وحلها باستخدام ترميز UTF-8 ، في صفحات HTML

ربما تكون قد أتيت إلى هذه التدوينة من تدوينة البداية مع HTML ، أهلاً وسهلاً بك بكل حال ...
طبعاً سنأتي بالمستقبل على طرق متقدمة أكثر ، ولكن نتحدث الآن عن مستخدم يتعلم HTML على جهازه المحلي ، وبدون أن يجهز سيرفر محلي حتى ، " المعالجة عن طريق المتصفح فقط " .

إذا بإختصار وسرعة  كيف لي أن أتأكد أن النصوص العربية ستُعرض بشكل سليم ؟
عليك أن تسعى أن يقوم المتصفح بمعالجتها على أنها بترميز UTF-8  ،
إذا كنتَ تستخدم محرر النصوص " المفكرة " المدمج مع ويندوز : بكل بساطة عند حفظ كود HTML  ، قم بالاختيارات الملونة التالية كما في الصورة :

إذا كنتَ كما ننصح تستخدم Notpad ++  ، فأثناء العمل أو بعد الحفظ أو قبل الحفظ لا مشكلة ، اتبع ما هو موضح بالصورة :



أي اختر Convert to UTF-8


أحفظ عملك ، واستعرضه من خلال متصفح ويب لديك :)

كرم قبسي . 

البداية مع HTML ...

السلام عليكم ...
أخصائي المكتبات العزيز ^_^ ، أهلاً وسهلاً بك ، في سلسلة دروس مبسطة لتعلم 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 .

كرم قبسي . 

من نحن

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