‎‎اديتور هاHTML Editors -‎

Previous >    <Next  

‎براي آموزشHTML نيازمند يك اديتور ساده ميباشيد .با يك اديتور ميتوانيد در فايلي انتخابي ‎كدهاي زبانhtml را وارد كنيد .اديتورهاي مختلفي براي اين كار وجود دارد، مثلnotepad,Textedit ‎وغيره .ولي اينجانب با‎ notepad++‎ ‎كه در دسترس ميباشد، شناخت وتجربه كاري دارم .درآن ميتوانيد ‎دستورات يك اسكريپت وب را وارد نموده وآنر با خودش تحت شرايطي اجرا نمائيد. ‎اين اديتور نسبت به كلمات كليدي زبان هايphp,html وjavascript حساس بوده وبا رنگ متفاوت ‎نشان ميدهد .درصورتيكه بااديتور فوق در محيط وب سرور يا سرور مجازي اسكريپتي را اديت نمائيد ‎ميتوانيدبا انتخاب مرورگر از طريق اديتور آنرا اجرا كنيد .مرورگرها در ناحيهRUN اديتور ‎ notepad++‎‎قرار دارند.

‎براي اينكه فايهاي اسكريپتhtml ياphp را با‎notepad++‎ اجرا نمائيم دو فايل redirect.php‎و shortcuts.xmlبايد در دسترس اديتور باشد.

‎فايلredirect.php كه مطابق زيراست بايد درشاخه root وب سرور يا سرور مجازي باشد .شاخه ‎سرور مجازي‎\xampp\htdocs‎ ميباشد.

‎

‎‎فايلshortcuts.xml بايد در شاخه اي كه‎notepad++‎ قرار دارد، باشد .فايل فوق مطابق

‎زيراست.

‎ 
<NotepadPlus>
    <internalCommands />
    <Macros>
        <Macro name="Trim Trailing and save" Ctrl="no" Alt="yes" Shift="yes" Key="83">
            <Action type="2" message="0" wParam="42024" lParam="0" sParam="" />
            <Action type="2" message="0" wParam="41006" lParam="0" sParam="" />
        <Macro>
    <Macros>
    <UserDefinedCommands>
        <Command name="Launch in Firefox" Ctrl="yes" Alt="yes" Shift="yes" Key="88">firefox "$(FULL_CURRENT_PATH)"
        <Command name="Launch in IE" Ctrl="yes" Alt="yes" Shift="yes" Key="73">iexplore "$(FULL_CURRENT_PATH)"
        <Command name="Launch in Chrome" Ctrl="yes" Alt="yes" Shift="yes" Key="82">chrome "$(FULL_CURRENT_PATH)"
        <Command name="Launch in Safari" Ctrl="yes" Alt="yes" Shift="yes" Key="70">safari "$(FULL_CURRENT_PATH)"
        <Command name="Get php help" Ctrl="no" Alt="yes" Shift="no" Key="112">http://www.php.net/%20$(CURRENT_WORD)
        <Command name="Google Search" Ctrl="no" Alt="yes" Shift="no" Key="113">http://www.google.com/search?q=$(CURRENT_WORD)
        <Command name="Wikipedia Search" Ctrl="no" Alt="yes" Shift="no" Key="114">http://en.wikipedia.org/wiki/Special:Search?search=$(CURRENT_WORD)
        <Command name="Open file" Ctrl="no" Alt="yes" Shift="no" Key="116">$(NPP_DIRECTORY)\notepad++.exe $(CURRENT_WORD)
        <Command name="Open in another instance" Ctrl="no" Alt="yes" Shift="no" Key="117">$(NPP_DIRECTORY)\notepad++.exe $(CURRENT_WORD) -nosession -multiInst
        <Command name="Send via Outlook" Ctrl="yes" Alt="yes" Shift="yes" Key="79">outlook /a "$(FULL_CURRENT_PATH)"
    </UserDefinedCommands>
    <PluginCommands />
    <ScintillaKeys />
</NotepadPlus>
‎

‎‎تذكر ـ بهتراست فقط يك نسخه‎ notepad++‎ در سيتم نصب باشد.

‎فايلهاي اسكريپتي با اديتور فوق اجرا ميشوند ،كه در شاخه هاي سرور مجازي باشند، درغير حالت ‎نميتوانند با‎notepad++‎ اجرا گردند .

‎از طريق مرورگر ها فايلهائي درنواحيloclhost/xampp قابل اجراي كامل ميباشند .اما اگر// ‎فايل اسكريپتي خارج اين نواحي باشد بايدفرم ديگري اقدام نمود .بعنوان مثال اگرفايلindex.php ‎درشاخهc:\html قرار داشته باشد، در مرورگربفرم زير وارد كنيد تا اجرا شود.

‎file///c:/html/index.php‎

‎توجه كنيد كه عناصرhtml ومتن ها درست توسط مرورگر نمايش داده ميشوند، اما بقيه موارد مثل php‎و javascript ناديده گرفته ميشود، وآنچه ميخواهيد نخواهد شد .

‎‎اديتور برخطOnline Editor -‎

‎همانطوركه در بخش هاي قبلي يادآوري ‎‎گرديد، هدف آموزش مطالب حتي الامكان در قالب صفحات پوياي وب ‎ميباشد .بهمين دليل گنجاندن اديتوري ساده براي اصلاح واجراي مثالها را مناسب وضروري دانستم. ‎اين اديتور برخط نسبت به كلمات كليدي زبانها حساس نبوده و همه اسكريپت با يگ رنگ ظاهر ميشود. ‎البته ايجاد اين امكان در صفحات ساده نبود، ولي بدليل اهميت آن باتلاش زياد محقق شد.

‎اما مزيت اين محيط اديت برنامه واجراي آن، براي تمام اسكريپت هايphp , javascript وHTML ‎وتركيبي آنها ميباشد.

‎‎روال استفاده از اين اديتور در بخش قبلي بيان گرديد ،خودتان آنرا براي مثال زير بكار ببريد.

‎‎مثال نمونهhtml

‎ 
 <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<?php  echo "<h1>test</h1>"; ?>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

--(go to editor for change code and run)

Previous >    <Next