Kick off the new school year with lessons from our Back to School 2021 collection to help students express themselves, build relationships, and stay organized.

5. Show an HTML Formatted Message

Playback Speed:

In the last video, you learned how to use HTML to change how text looks in a browser window.

In this video, you will write new code to make the text appear in your pop-up message.

First, make a variable to store the HTML tagging and coding.

In computer science, a “variable” holds information for a program to use later.

For example, if you created a program that kept track of how many people responded “yes” to a party invitation, the number of responses would be stored in a variable.

If you are still in the HTML window of your script editor, return to the “Code (dot)

gs” tab.

After the left curly brace and before the code you wrote earlier, type “v-a-r,” space, “ html,” space, and an equals sign.

“v-a-r” makes any word that comes after it into a variable that holds information to use later.

After the equal sign, type a space then “HtmlService” with a capital H and a capital S.

Then, type a period.

This brings up the autocomplete menu, which shows different HTML settings and functions to choose from.

Choose “create HTML Output From File” from the list.

Next, tell the “Create HTML Output from File” function which HTML file it should use to format the alert message.

Type in “Opening Message HTML - dot- HTML,” and place double quotation marks around it.

Take a look at the code.

You can read it like a sentence: “In the variable HTML, create the text found in the file “Opening Message HTML.”

Delete the word “alert” and the period in front of it from your original code.

Then, after the parentheses, type a period to show the autocomplete menu.

Scroll down, and choose “show modal dialog.”

Inside the parentheses, replace the words “user interface” with “html”.

Then, replace the word “title” with a single space to remove the title text from the alert message.

Save the code, then click the “play” button to see if it works.

Click the “Research Notes” tab to view the message.

There it is in big, bold, red type.

That’s the HTML formatting at work!

Nicely done.

If you get an error message when you run your code, it means something is missing or incorrect.

Carefully check the code for open and closed quotes and parentheses, capitalization, and spacing.

If it doesn’t work the first few times you test it, don’t worry.

Keep tinkering until you get it right.

Ask your neighbor for help if you get stuck.

Now, it’s your turn: Create a variable called html.

Tell the function to use "Opening Message HTML" in the alert.

Run your code and check your document.


  1. Create a variable called html.
  2. Tell the function to use "Opening Message HTML" in the alert.
  3. Run your code and check your document.