Lesson 1.2: Explaining the code #

Now that you have the code up and running (let us know if you don’t!), it’s time to work out some of the details.

Here is the full code again:

<html>
    <head>
      <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
    </head>

  <body>
    <h1>Getting Started with Learning PyScript</h1>
    <py-script>
        print("Hello from Python!")
    </py-script>
  </body>
</html>

Most of this code is not python - it’s HTML, which is the language of webpages. This site will cover enough HTML to get you going, but it isn’t a HTML tutorial site. That said, I assume you do not know any HTML. If you do, just quickly skim through most of the explanation.

Let’s now go by this line-by-line.

<html>

This bit starts a new HTML document. It basically says “the HTML starts here, and continues until you find </html> or the end of the document. That “closing tag” is the last line of the code.

<head>

This starts the “head” of the HTML document - where important information about the webpage, but not information in the webpage, lives. In this code, it will import pyscript, but in other sites it will including the title of the page, page styling information and other info.

<script defer src="https://pyscript.net/alpha/pyscript.js"></script>

This actually imports pyscript - without it, pyscript won’t be loaded as part of your webpage, and the python code won’t run. This line tells your browser to download the file pyscript.js from https://pyscript.net/alpha/pyscript.js and load it as a script document into the page.

</head>

This closes off the head element, as we are done with that information for this page.

<body>

This is the opening tag for the body of the page, where the content you will actually see on the webpage will be. Generally, anything in body will be shown to the user.

<h1>Getting Started with Learning PyScript</h1>

In HTML, the <h1> tag stands for a “level 1 heading”, i.e. the biggest one. This will create a heading on your page with the words “Getting Started with Learning PyScript”. The closing tag, </h1> is on the same line, which is perfectly valid to do (most of the other closing tags are on different lines, that’s ok too).

<py-script>

This creates a new block for our pyscript code to go in. Any code in this block (up until the relevant closing tag) will be interpreted, by pyscript.js, as python code.

PyScript blocks can contain many lines of python code. In this example there is just one line.

print("Hello from Python!")

Here is that python code. It simply prints the words “Hello from Python!” to the screen (without the quotes).

</py-script>

This is the closing tag for the pyscript block.

</body>

Here we close the body block as well.

</html>

Finally we reach the end of the HTML document.

Exercises #

Take your learning further with some exercises.

Print the “Hello from Python!” above the heading.
Create a second-level heading, “Written by YOURNAME”
Create a second block of pyscript code, under your second-level heading, printing out the date.

For question 3, see this StackOverflow answer for code on getting the current date.

Lesson 1.2: Explaining the code #

Exercises #

Sign up to get notified of updates to content!