4. Format Your Message in HTML

Playback Speed:
Language:
Transcript

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.

Return to the Code.gs tab.

Remove the alert message.

After the left curly brace and before the code you wrote earlier, type “var,” 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.

Type open and closed parentheses.

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 .html...

andplace double quotation marks around it.

Check your capitalization.

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”.

Type open and closed parentheses.

Inside the parentheses, type “html".

Then, double quotation marks with a single space.

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

Save and run the code.

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.

If you want to experiment more with HTML to update the styling of your alert, return to W3 Schools, or search the internet for “html style tags.”

Instructions

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