3. Add Visual Appeal to Your Message

Playback Speed:

In this video, you will make the alert you created look more exciting.

You will use a website to create HTML.

Then, you will add it to the code in your “Research Notes” document.

An alert like the one you created in the last video is useful, but it can only show lines of text.

It can’t include visual elements like color, images, hyperlinks, or interesting fonts.

To add visual interest, you will use another coding language called Hypertext Markup Language, or HTML.

HTML is used to make the content in popup messages more exciting – after all, the point of the window is to catch people’s attention.

For example, a website might show an alert that asks users to enter a contest, enter their email address for special offers, or request a service or appointment.

HTML uses instructions called tags to tell a computer how to structure a Webpage.

For example, a website with different headings, text, images, and links uses HTML tags to tell the computer which colors, fonts, positions, images, and functions to show onscreen.

To start, go to www.w3schools.com in a new tab in your browser.

Click Try it yourself.

The coding window contains HTML.

The HTML tags, or the instructions that tell the computer how to structure and format the online text, are inside angle brackets.

In the coding window, delete the "H1" and “P” tags and the text between the tags.

Then, type in the message from your project’s alert.

Click Run.

The results show up in the window.

The text is there, but it looks plain.

To change that, place an H1 tag at the beginning of your message in the coding window.

The H1 tag refers to a heading or bigger, bolder text that is used in headlines.

Type a left angle bracket, then H1, then a right angle bracket.

This tells the computer to start formatting the text.

Place the same tag at the end of the line, but with a forward slash before the H1.

In HTML, a forward slash tells the computer to end this formatting.

Click Run again.

The line of text is still there, but it’s larger and darker.

Next, add color.

After the H1 in the tag, add a space, then the word “style”...

an equals sign, the word “color”, a colon, the word “red.”

Do not put spaces between the words and punctuation marks.

Click Run.

The text stays big and bold, and it’s red! Nice work.

The tag that changed the color is called a style tag, and it changes the way HTML elements look in a browser.

Using a free tool like this one is a great way to explore how HTML works without affecting your document.

But to apply these changes to your “Research Notes” add the code to your project.

To do that, return to the script editor.

From the file menu, choose HTML.

Name it “Opening Message HTML.”

A new window opens in your script editor.

The window already contains tags that look a lot like the code on the HTML site.

Add your message after the first body tag.

Save what you’ve done so far.


  1. Go to http://www.w3schools.com. Click “Try it yourself.”
  2. Add your alert message to the HTML code.
  3. Add tags to make the alert message bigger and bolder and to change the color to red.
  4. In your document, create a new HTML file in the script editor. Name it “Opening Message HTML.”
  5. Add your message after the first <body> tag.
  6. *NOTICE -- THERE IS A KNOWN ISSUE WITH THIS LESSON: The onOpen popup message, when you first open the Google Doc, is currently not opening. When you manually run the script, if the popup message appears, then the code is correct.*