”;
AppML application allows to include an HTML page in a HTML page easily using appml-include-html tag.
Syntax
<div appml-include-html="footer.htm"></div>
Step 1: Create Footer HTML
footer.htm
<hr style="margin-top:5px;"> <p style="font-size:12px">2021© tutorialspoint.com. All rights reserved.</p> <hr>
Step 2: Include footer in Application HTML
student_application.html
<!DOCTYPE html> <html lang="en-US"> <title>Students</title> <style> table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 8px; } tr:nth-child(even) {background-color: #f2f2f2;} </style> <script src="https://www.w3schools.com/appml/2.0.3/appml.js"></script> <body> <h1>Students</h1> <table appml-data="students"> <tr> <th>Student</th> <th>Class</th> <th>Section</th> </tr> <tr appml-repeat="records"> <td>{{studentName}}</td> <td>{{class}}</td> <td>{{section}}</td> </tr> </table> <div appml-include-html="footer.htm"></div> <script> var students = { "records":[ {"studentName":"Ramesh","class":"12","section":"White"}, {"studentName":"Suresh","class":"12","section":"Red"}, {"studentName":"Mohan","class":"12","section":"Red"}, {"studentName":"Robert","class":"12","section":"Red"}, {"studentName":"Julie","class":"12","section":"White"}, {"studentName":"Ali","class":"12","section":"White"}, {"studentName":"Harjeet","class":"12","section":"White"} ]}; </script> </body> </html>
Output
Deploy the application on Web Server and access the html page. Verify the output.
Advertisements
”;