how to split python file into python and html file

I am trying to make a python file into a python and html files. The code i have is basically from the python guestbook example but i want to have a html file serve the uses browser. the code i have works right now but when i add the javascript at the bottom i get an error This code is at ceemee11111.appspot.com

import cgi
import datetime
import urllib
import webapp2

from google.appengine.ext import db
from google.appengine.api import users


class Greeting(db.Model):
  """Models an individual Guestbook entry with an author, content, and date."""
  author = db.StringProperty()
  content = db.StringProperty(multiline=True)
  content2 = db.StringProperty(multiline=True)
  date = db.DateTimeProperty(auto_now_add=True)


def guestbook_key(guestbook_name=None):
  """Constructs a Datastore key for a Guestbook entity with guestbook_name."""
  return db.Key.from_path('Guestbook', guestbook_name or 'default_guestbook')


class MainPage(webapp2.RequestHandler):
  def get(self):
    self.response.out.write('<html><body>')
    guestbook_name=self.request.get('guestbook_name')


    greetings = db.GqlQuery("SELECT * "
                        "FROM Greeting "
                        "WHERE ANCESTOR IS :1 "
                        "ORDER BY date DESC LIMIT 3",
                        guestbook_key(guestbook_name))


    self.response.out.write("""
      <form action="/sign?%s" method="post">
        <div id="container" style="width:800px">

        <div id="header" style="background-color:#FFA500;">
        <h1 style="margin-bttom:0;">Main Title</h1></div>

        <div id="Con0" style="background-color:#FFD700;
   height:200px;width:200px;float:left;">
         <b>Menu</b><br>
         HTML<br>
         CSS<br>
         <p id="demo1"></p><br>
         JavaScript</div>

       <div id="content" style="background-color:#EEEEEE;height:200px;width:600px;float:left;">
Content goes here</div>
      </div>
      <button onclick="myFunction()">Try it</button>
      </form>
    </body>
  </html>""") 


self.response.out.write("""
      <form action="/sign?%s" method="post">
       <div id="dataImput"
        <div><textarea name="content" rows="1" cols="10"></textarea></div>
        <div><textarea name="content2" rows="1" cols="10"></textarea></div>
        <div><input type="submit" value="Sign Guestbook"></div>
      </div>
      </form>
      <hr>
      <form>Guestbook name: <input value="%s" name="guestbook_name">
      <input type="submit" value="switch"></form>
    </body>
  </html>""" % (urllib.urlencode({'guestbook_name': guestbook_name}),
                      cgi.escape(guestbook_name)))


class Guestbook(webapp2.RequestHandler):
  def post(self):
    # We set the same parent key on the 'Greeting' to ensure each greeting is in
    # the same entity group. Queries across the single entity group will be
    # consistent. However, the write rate to a single entity group should
    # be limited to ~1/second.
    guestbook_name = self.request.get('guestbook_name')
    greeting = Greeting(parent=guestbook_key(guestbook_name))

    if users.get_current_user():
      greeting.author = users.get_current_user().nickname()

greeting.content = self.request.get('content')
greeting.content2 = self.request.get('content2')
greeting.put()
self.redirect('/?' + urllib.urlencode({'guestbook_name': guestbook_name}))


app = webapp2.WSGIApplication([('/', MainPage),
                           ('/sign', Guestbook)],
                          debug=True)

#<script>
#function myFunction()
#{
#document.getElementById("demo1").innerHTML="test";
#}

Thankyou for your time. Dan

Solution

Given that you're clearly using GAE, what you are looking to do is outlined here.

First, move your html to separate files. We'll start with the html from the oddly freefloating self.response.out.write:

"""
      <form action="/sign?%s" method="post">
       <div id="dataImput"
        <div><textarea name="content" rows="1" cols="10"></textarea></div>
        <div><textarea name="content2" rows="1" cols="10"></textarea></div>
        <div><input type="submit" value="Sign Guestbook"></div>
      </div>
      </form>
      <hr>
      <form>Guestbook name: <input value="%s" name="guestbook_name">
      <input type="submit" value="switch"></form>
    </body>
  </html>""" % (urllib.urlencode({'guestbook_name': guestbook_name}),
                      cgi.escape(guestbook_name))

This belongs in a separate file we'll call myhtml.html. Second, we then are going to go through and using the Django templating system instead of %s and Python string formatting. So first, we're going to replace the %s with template-friendly fields surrounded by {{ }}, giving us:

"""
      <form action="/sign?{{ guestbook_name }}" method="post">
       <div id="dataImput"
        <div><textarea name="content" rows="1" cols="10"></textarea></div>
        <div><textarea name="content2" rows="1" cols="10"></textarea></div>
        <div><input type="submit" value="Sign Guestbook"></div>
      </div>
      </form>
      <hr>
      <form>Guestbook name: <input value="{{ guestbook_name|escape }}" name="guestbook_name">
      <input type="submit" value="switch"></form>
    </body>
  </html>"""

Note that we were able to use the escape template filter, which is what comes after the |, to escape the value we're getting from guestbook_name.

Finally, we load the html and pass it the arguments we need:

self.response.out.write(template.render('myhtml.html', {'guestbook_name': guestbook_name}))