Preview of html code without running the html file.

Ankit

February 27, 2018

In this post we will see how can we see the preview of our html code without running the file.
Sometimes you may want to see online preview of your HTML code.
So that you can evaluate your HTML code for correctness and take corrective action if needed.
In this tutorial we use basic tags of html5 , bootstrap and also used some Javascript functions.

For using bootstrap i would recommend the use of maxcdn files
A maxcdn bootstrap file allows you to directly call all bootstrap functions without downloading the bootstrap package.
Bootstrap uses jQuery for JavaScript plugins (like modals, tooltips, etc). However, if you just use the CSS part of Bootstrap, you don’t need jQuery.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Use these files inside your <head> section of your html code.
Now we will write some javascript function which is used to show the preview of html code.

<script type="text/javascript">
function showHTML () {
    // ref textarea
    textarea1 = document.getElementById('txt1');
    // where to view HTML code
    viewHtml = document.getElementById('div1');
    // Finally get HTML output in div
    viewHtml.innerHTML = textarea1.value ;
}
</script>
<textarea id="txt1" name="txt1" cols="71" rows="20"
 onkeyup="showHTML()">Enter Your Html Code Here..!!!</textarea>
<!-- <input type="button" onclick="showHTML()" value="Ok" /> -->

Complete Code which is used for showing the preview of your html code

<!DOCTYPE html>
<html>
<head>
    <title>preview of html code using javascript</title>
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div>
    <div>
        <div>
 <div>
                <div>
                    <h3>HTML Preview</h3>
                    <span>
                        <!-- Tabs -->
                        <ul>
                            <li><a href="#tab1" data-toggle="tab">HTML CODE</a></li>
                            <li><a href="#tab2" data-toggle="tab">PREVIEW</a></li>
                        </ul>
                    </span>
                </div>
                <div>
                    <div>
                        <div id="tab1">
                            <script type="text/javascript">
function showHTML () {
    // ref textarea
    textarea1 = document.getElementById('txt1');
    // where to view HTML code
    viewHtml = document.getElementById('div1');
    // Finally get HTML output in div
    viewHtml.innerHTML = textarea1.value ;
}
</script>
<textarea id="txt1" name="txt1" cols="71" rows="20"
 onkeyup="showHTML()">Enter Your Html Code Here..!!!</textarea>
<!-- <input type="button" onclick="showHTML()" value="Ok" /> -->
                        </div>
                        <div id="tab2">
                            <div id="div1" name="div1"
 style="position:relative;width:520px;height:550px;border:1px solid
 red;overflow:auto"></div>
                        </div>
                    </div>
                </div>
            </div>
</div>
</div>
</div>
            </body>
</html>

New to our community ?

One of Our Valued Members