1 of 10

Picture This!

<HTML> Decoded!

2 of 10

<

Vocabulary Preview

>

HTML stands for hypertext markup language. HTML code is one language used to create web pages and certain mobile app screens.

3 of 10

<

Activator

>

Consider how you visualize language when you are reading. Do you make a picture in your mind? Let’s try it!

​

Listen while the text below is read aloud. Then, draw a picture to represent what you “saw” in your mind.

​

Penny had copper hair to match her name. One day, while reading a thick book in a lush, green meadow, she spotted a fluffy rabbit with a tail as white as snow and fur the color of hot cocoa.

​

​

4 of 10

<

Activator

>

Share what you drew!

​

​

Computer code works the same way. HTML, for example, is a computer language written so that words and thoughts display a certain way on a computer, phone or tablet screen.

​

​

5 of 10

<

Activator

>

6 of 10

<

Your Challenge

  • Read and analyze the HTML code set on the next screen.

​

  • Draw what you think the screen will look like on a phone when the code is run.

​

  • Be sure to account for ALL of the tags, as well as their relationships to elements of the screen’s content!

>

7 of 10

HINT: The <hr> tag in HTML stands for horizontal rule

<p>

<span style="font-family: comic sans ms, sans-serif; font-size: 14pt;">

<strong>Welcome!</strong> Why should you be interested in <span style="color: blue;">app development</span>? App developers need people on their team who write well, make visual designs and promote their products. It’s a fast-growing field with lots of job opportunities, and it pays well. Apps can help you make money and make a difference in the world.</span>

</p>

​

<p>&nbsp;</p>

<hr />

<p>&nbsp;</p>

​

<p><span style="font-family: comic sans ms, sans-serif; font-size: 14pt;">To learn more

about how MAD-learn makes building apps both fun and easy, click the logo, below:</span>

</p>

​

<p><a href="https://mad-learn.com"><img style="display: block; margin-left: auto; margin-

right: auto;" src="https://mad-learn.com/images/logo.svg" alt="" width="300" height="89" /></a></p>

8 of 10

9 of 10

<

Predict:

>

  • What will happen when the end user taps the words “app development”?
  • What separates the two paragraphs?
  • Where was the MAD-learn logo imported from?
  • <!DOCTYPE html> is often used at the start of an HTML code set. Will the code still run without it?
  • What would happen to the MAD-learn logo if the dimensions were doubled?

10 of 10

Now, compare your drawing to the actual screen (including an active link from the logo to the MAD-learn website):

How did you do?