الجمعة، يوليو 17، 2009

اظهار اكواد html فى تدوينتك بشكل ملائم

. الجمعة، يوليو 17، 2009

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

هناك العديد من الطرق لعمل ذلك، و لكنى سوف اعرض كل طريقة فى مقالة منفصلة، وذلك نظرا لكثرة التفاصيل لكل طريقة، و لنبدأ بأول طريقة وهى :- استخدام الوسم <blockquote>

من اسهل الطرق لعرض الاكواد داخل مدونتك بشكل جيد، و لكنها ليست الطريقة المثلى اذا كنت تريد كتابة اكواد طويلة قد تاخذ اكثر من صفحة، كذلك يمكنك استخدام الاستايلات مع هذا الوسم فمثلا يمكن القيام بادراج تنسيقات مختلفة مثل لون خلفية معين، سمك معين للحدود وذلك بالطبع باستخدام اكواد css، و الشكل العام للكود كالتالى :-

<blockquote>
جميع الاكواد بين الوسمين
</blockquote>

و بطبيعة الحال فان الشكل السابق لايوجد معه اى شكل من اشكال التنسيق، و بصفة عامة فان اوامر التنسيق الخاصة به تقوم بتحديد نمط الحدود ، نوع الخطوط و الوانها، بالاضافة الى لون الخلفية، ففى المثال التالى اذا قمت بلصق الكود التالى فى تدوينتك :
<blockquote STYLE="background:#efefef;border:1px solid #A6B0BF;font-size:100%;line-height:100%; overflow:auto;
padding:10px;margine:15px;color:#000000">

&lt;head&gt;
&lt;title&gt; مدونة الويب العربى&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;a&gt; href=&quot;http://arabwebblog.blogspot.com&quot;&lt;/a&gt;
&lt;/body&gt;
&lt;/blockquote&gt;

</blockquote>

فسوف ينتج عنه التنسيق التالى للكود :

<head>
<title> مدونة الويب العربى </title>
</head>
<body>
<a> href="http://arabwebblog.blogspot.com"</a>
</body>
لكن بالطبع كما ذكرت من قبل ان تلك الطريقة ليست مثالية و مرهقة، فتخيل انك تحتاج الى ادراج المزيد من الاكواد فى تدوينتك، بالطبع سيكون التطبيق مملا، لذا سوف نتناول العديد من الطرق الاخرى فى تدوينات مقبلة.



0 تعليق:

 
room darkening shades