Editorial Workflow — HTML Editor 1.0a

Document Text ?

Folded Text

Include
Replace with:

Show HTML ?

HTML

Input

Title

Html

Base URL

None

Copy this into editor ?

Variable Name

html

Value

<!DOCTYPE html> <html>  <head> <style> .textArea{} .form{} body{} h1{color:blue} p{color:green} </style> <script> function myFunction() { document.getElementById("demo").innerHTML = "Paragraph changed."; } </script> </head> <body> <h1>Header</h1> <br/> <h2>Horizontal Rule</h2> <hr/> <h3>Sub-Header</h3> <h2>Paragrah</h2> <p> Et voluptates voluptatibus consequatur ad delectus vel amet illum. Nulla eum molestiae autem <>perferendis et.- </p> <p>It's good to be <b>bold.</b></p> <p>This text is <i>fancy</i><p> <br/> <p> Culpa consequatur repellat quo. Error totam porro rem et qui et facilis nostrum. </p> <h2>Code</h2> <code> name = "Joe" age = 27 </code> <br/> <h2>Form</h2> <form action="demo_form.asp" method="get"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="Submit"> </form> <br/> <h2>Pre</h2> <pre> Text in a pre element is displayed in a fixed-width font, and it preserves both spaces and line breaks </pre> <h2>Text Area</h2> <textarea rows="4" cols="50"> At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies. </textarea> <br/> <h2>Options</h2> <select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select> <br/><br/> <h2>Button</h2> <button type="button">Click Me!</button> <br/><br> <h2>Label</h2> <form action="demo_form.asp"> <label for="male">Male</label> <input type="radio" name="sex" id="male" value="male"> <br> <label for="female">Female</label> <input type="radio" name="sex" id="female" value="female"> <br> <input type="submit" value="Submit"> </form> <br/> <h2>Progress bar</h2> <progress value="22" max="100"></progress> <h2>Un-ordered List</h2> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> <br/> <h2>Ordered List</h2> <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> <ol start="50"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> <br/> <h2>Mark</h2> <p>Do not forget to buy <mark>milk</mark> today.</p> <br/> <h2>Text Direction(Bi-directional Overide)</h2> <bdo dir="rtl"> This text will go right-to-left. </bdo> <br/> <h2>Function</h2> <p id="demo">A Paragraph.</p> <button type="button" onclick="myFunction()">Try it</button> <br/> <h2>Canvas</h2> <canvas id="myCanvas"></canvas> <script> var canvas=document.getElementById('myCanvas'); var ctx=canvas.getContext('2d'); ctx.fillStyle='#FF0000'; ctx.fillRect(0,0,80,100); </script> <center><h2>Center</h2>This text will be center-aligned.</center> <br/> <h2>Column</h2> <table> <colgroup> <col span="2" style="background-color:red"> <col style="background-color:yellow"> </colgroup> <tr> <th>ISBN</th> <th>Title</th> <th>Price</th> </tr> <tr> <td>3476896</td> <td>My first HTML</td> <td>$53</td> </tr> </table> <br/> <h2>Meter</h2> <meter value="2" min="0" max="10">2 out of 10</meter><br> <meter value="0.6">60% </meter> <br/> <h2>Option Group</h2> <select> <optgroup label="Swedish Cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> </optgroup> <optgroup label="German Cars"> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </optgroup> </select> <br/> <h2>Bi-directional Isolation</h2> <ul> <li>User <bdi>hrefs</bdi>: 60 points</li> <li>User <bdi>jdoe</bdi>: 80 points</li> <li>User <bdi>إيان</bdi>: 90 points</li> </ul> <br/> <h2>Footer</h2> <footer> <p>Posted by: Hege Refsnes*</p> <p>Contact information: <a href="mailto:someone@example.com"> someone@example.com</a>. </p> </footer> <h2>Table</h2> <table border="1" style="width:300px; color:blue"> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table> <h2></h2> </body> </html>

Editorial Workflows