Skip to content

4. Add Visual Appeal to Your Popup

Playback Speed:
Transcript

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 H-T-M-L.

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 H-1, 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 “new” and “html file.”

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.

Next, type the h1 and style tags you experimented with in the free HTML editor to make the text bigger, bolder, and red.

Save what you’ve done so far.

In the next video, you’ll view the text with the formatting in place.

Now, it’s your turn: Go to www.w3schools.com, and click “try it yourself”.

In your document, create a new HTML file in the script editor.

Name it “Opening Message HTML” Add your alert message to the HTML code.

Add tags to make the alert message bigger and bolder and to change the color to red.

Then, move on to the next video to write code that makes the text appear in the pop-up window.

Next arrow_forward
Instructions
  1. Go to http://www.w3schools.com. Click “Try it yourself.”
  2. In your document, create a new HTML file in the script editor. Name it “Opening Message HTML.”
  3. Add your alert message to the HTML code.
  4. Add tags to make the alert message bigger and bolder and to change the color to red.