شرح طريقة إظهار كود HTML أو java في تدوينتك

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




HTML أو
 java

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


الخطوة الثانية : اذهب إلى قالبك من خلال تخطيط ثم تحرير HTML ثم قم بالتعليم على خانة توسيع قالب المدونة ، بعد التوسيع اضغط على CTRL+F من أجل البحث عن الكود التالي :

<pre></pre>

الخطوة الثالثة : بعد الوصول إلى الكود السابق قم بإضافة هذا الكود فوقه ، مهم قم بإضافته فوق الكود السابق .
pre
{
background:#efefef;
border:1px solid #A6B0BF;
font-size:120%;
line-height:100%;
overflow:auto;
padding:10px;
color:#000000 }
pre:hover {
border:1px solid #efefef;
}
code {
font-size:120%;
text-align:left;
margin:0;padding:0;
color: #000000;}
.clear { clear:both;
overflow:hidden;
}

الخطوة الرابعة : تأكد من أنك حصلت على نتيجة تشبهة الصورة التالية :
pre
{
background:#efefef;
border:1px solid #A6B0BF;
font-size:120%;
line-height:100%;
overflow:auto;
padding:10px;
color:#000000 }
pre:hover {
border:1px solid #efefef;
}
code {
font-size:120%;
text-align:left;
margin:0;padding:0;
color: #000000;}
.clear { clear:both;
overflow:hidden;
}


إن حصلت على نتيجة مشابهة ، قم بمعاينة القالب إن لم يظهر أي خطأ فهنيئا لك لقد نجحت في إضافة الكود ، ماعليك الآن سوى حفظ القالب ، والإستعداد إلى الخطوة النهائية .
لكن قبل ذلك لنتوقف قليلا مع الكود الذي أضفناه قبل قليل ، هذا الكود هو عبارة عن أمر يقوم بتأطير الكتابة التي نريدها بواسطة إطار مميز لتلك الكتابة ، وأن تعمدت قول الكتابة وليس كود html لأنه يقوم بتأطير أي شيء يوجد بداخله سواء كتابة أو كود html أو كود java أو حتى صورة .
تستطيع من خلال هذا الكود أيضا أن تتحكم في شكل الإطار ولونه وأبعاده وسمكه ، والصورة التي أمامكم توضح تلك الخواص القابلة للتعديل وهي سهلة للغاية .
لكن السؤال الأهم والضروري وهو كيف أتحكم في الكتابة داخل الإطار وخارجها وقت ما أريد ؟ ، أو بمعنى أصح هو كيف أعلم أنني أكتب داخل الإطار وليس خارجه ؟ .
الإجابة سهلة وهي أن هناك كود آخر يقوم بمناداة الكود السابق لكي يقوم بتأطير الكتابة التي نريدها ، والكود كالتالي :

<pre></pre>

ولكي تظهر الكتابة يجب أن نضيفها داخل  <pre></pre>
وأي كتابة خارج هاذين الكودين ستظهر بشكلها الطبيعي .
وهذه صورة مثال عما أتحدث عليه :



وهذه النتيجة :



الخطوة الخامسة والأخيرة : ما قلته في الخطوة الرابعة ينطبق على الكتابة بالحروف فقط ، أما الكتابة بأكواد html أو java فإليكم الطريقة .
سنحتاج بشكل مستمر إلى أداة postable وهي أداة لا غنى عنها في الوقت الحالي ، وهي تقوم بتحويل الأكواد إلى ما يسمى بالأكواد الصديقة للـ html .
ولكي تستوعب ما أتحدث عنه قم بالتالي : قم بنسخ أي كود يقع تحت عينيك حاليا ، توجه إلى أداة
postable قم بلصق الكود داخل المستطيل واضغط على MAKE IT FREINDLY ، ستجد أن الكود قد تحول إلى كتابة غير مفهومة وهذا ما نريد بالضبط أن نصل إليه .

تلخيص لخطوات العمل بكاملها :
بعد أن تصيف الكود إلى قالبك في الخطوات الأولى والثانية والثالثة ، قم بحفظ القالب .
الآن إذا أردت أن تكتب موضوع في مدونتك والموضوع يحتوي بداخله على أكواد فيجب أن تقوم بالتالي :
حول الكود الذي تريد أن تكتبه في موضوعك إلى كود صديق من خلال أداة
postable .
الكود الذي حصلت عليه ضعه داخل الكودين التاليين <pre></pre>

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


هناك 8 تعليقات:

  1. شكرا لك اخى الكريم

    مدونة اضافية لتحويل الكود

    http://google-adsense-converter.blogspot.com/

    ردحذف
  2. مدونتك جميله ومفيده
    صراحه تستحق اكثر من الشكر يا استاذ
    وانا كنت محتاج لدرسك
    شرح طريقة إظهار كود HTML أو java في تدوينتك
    بس حاول اطبق فشلت من الخطوه الثانيه حيث اني بحثت في قالبي عن !pre!!/pre! ولم يكن موجود
    ياترى هل في حل

    ردحذف
  3. اخي الهدهد اشكرك علي كلامك الجميل
    انا ايضا لم يظهر الكود عندي ولذلك انا اتبع الجزء الاخير من الشرح و هو
    حول الكود الذي تريد أن تكتبه في موضوعك إلى كود صديق من خلال أداةpostable .
    الكود الذي حصلت عليه ضعه داخل الكودين التاليين !pre!!/pre!
    و من خلال وضع تحرير HTML وليس وضع تأليف .
    وهكذا سيظهر الكود جرب ورد عليا

    ردحذف
  4. السلام عليكم

    لك الشكر والاحترام على هذه المدونه الممتازه

    والمعلومات القيمه

    افدتنا كثير الله يجزاك خير

    ردحذف
  5. مدونة اكسب
    الشكر لك لتشريفك مدونتي واتمني الاسنفادة للجميع

    ردحذف
  6. اشكرك على الموضوع الجميل وتسلم ايديك

    ردحذف
  7. فنون الشات العربى
    شكرا لتعليقك و لمرورك الكريم

    ردحذف
  8. Mido
    شكرا لتعليقك و شكرا لاضافتك

    ردحذف

 

دروس Copyright © 2011 | Template design by O Pregador | Powered by Blogger Templates