आपले स्वतःचे एचटीएमएल कोड एडिटर तयार करा.
प्रिय विद्यार्थ्यांनो आपण एक HTML कोड एडिटर तयार करू शकता आणि त्यामध्ये आपला एचटीएमएल कोड चालवू शकता.
पायर्‍या
1.हा कोड कॉपी करा किंवा नोटपॅडमध्ये कोड लिहा.
2.ही फाईल एडिटर या नावाने आणि एचटीएमएल या एक्स्टेंशन ने सेव्ह करा.
3.आणि नंतर कोणत्याही ब्राउजर ही फाईल उघडा.
4.एडिटर तयार झाल्यावर आपला एचटीएमएल प्रोग्रॅम बॉडी टॅग मध्ये टाईप करा अथवा पेस्ट करावा.आपणास आपल्या प्रोग्रॅम चे आउटपुट दिसेल.
Create your own Online HTML Code Editor
Dear Students you can create a HTML Code editor and run your html code in it.
Steps
1.copy this code or write code into notepad and save this file by editor.html.
2.And then open this file in any browser.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js"></script>
<style>
html,body { margin:0; padding:0; height:100%; width:100%; overflow: hidden;}
#editor {
height: 100%;
width:50%;
display:inline-block;
}
#iframe {
height:100%;
display:inline-block;
width:50%;
}
#container {
height:100%;
width:auto;
white-space : nowrap;
overflow : hidden;
position:relative;
}
</style>
</head>
<body onload="ready()">
<div id="container">
<div id="editor">
</div>
<iframe frameborder="0" id="iframe">
</iframe>
</div>
<script>
function update()
{
var idoc = document.getElementById('iframe').contentWindow.document;
idoc.open();
idoc.write(editor.getValue());
idoc.close();
}
function setupEditor()
{
window.editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/html");
editor.setValue(`<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>`,1); //1 = moves cursor to end
editor.getSession().on('change', function() {
update();
});
editor.focus();
editor.setOptions({
fontSize: "16pt",
showLineNumbers: false,
showGutter: false,
vScrollBarAlwaysVisible:true,
enableBasicAutocompletion: false, enableLiveAutocompletion: false
});
editor.setShowPrintMargin(false);
editor.setBehavioursEnabled(false);
}
setupEditor();
update();
function ready()
{
}
</script>
</body>
</html>
Visit here and learn new trends and technologies everything.
Please Comment and Share. ConversionConversion EmoticonEmoticon