طريقة اظهار كود html داخل الموضوع

طريقة اظهار كود html داخل الموضوع

    شرح عمل صندوق يحتوي html

    نتعرف في درس اليوم علي طريقة عمل صندوق داخل المدونة يحتوي علي كود html بدون أن يتم ترجمة هذا الكود إلي كلمات أو معطيات، ومثال علي ذلك الصندوق التالي:
    <?xml version="1.0" encoding="UTF-8" ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
    <head>
    <b:skin><![CDATA[/*
    -----------------------------------------------
    Name : Mr. YouTuber Cleaning Template
    Designer URL : http://mr-youtuber.blogspot.com
    year : 2017
    ----------------------------------------------- */
    ]]></b:skin>
    </head>
    <body>
    <b:section class='main' id='main' showaddelement='yes'>
    <b:widget id="Blog1" locked="true" type="Blog" />
    </b:section>
    </body>
    </html>

    طريقة العمل

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

    كود الصندوق

    <div style="font-family:georgia; font-size: 16px; height: 70px; overflow: scroll; width: 270px;border:2px solid red;">الكود</div> <div style="font-family: verdana,arial,sans-serif; font-size: 10px;"> <a href="http://mr-youtuber.blogspot.com">Mr. YouTuber</a></div>

    إلي هنا ينتهي درس اليوم، لا تنسي الإشتراك في المدونة ليصلك تنبيه بكل جديد نقوم بنشره، وأنصحك بتصفح محتوياتنا ففيها موضوعات قيمة ستفيدك بالتأكيد.

    Eslam Gamal
    @مرسلة بواسطة
    كاتب ومحرر اخبار اعمل في موقع Egyptian Reviewer .

    إرسال تعليق