How to make a simple webpage with HTML featuring different colors.
Computational Thinking Lab HTML Lesson in Colors: For Grades 4 and up. At the bottom of this post is a PDF of this lesson.
- Go to www.w3schools.com
- Type the following code and click Run.
- Print out the Worksheet for the students as required. This is recommended for beginning level students.
- You do NOT have to type the numbers in the number column. They are there to help you keep track of your lines. There are also empty spaces for you to checkmark your work as you complete it.
|14||<h1> Hi, there! I’m heading 1 and I’m red! </h1>|
Great job! Here is the result. If you haven’t gotten this result, go back and double check that your work on screen looks exactly like your worksheet. Don’t worry! It’s common to forget to type all of the punctuation which is why we have the check-mark boxes for you to check and recheck each line.
Challenge B. Let’s try these hex values now. What are hex values and why should we use them? How many shades are at Make sure you write the name in the heading 1 <h1> in the body after you change the hex value!
Hex value for ROY G. BIV
Red hex value is #FF0000
Orange hex value is #FFA500
Yellow hex value is #FFFF00
Green hex value is #008000
Blue hex value is #0000FF
Indigo hex value is #4B0082
Violet hex value is #EE82EE
Challenge A. Your code for Orange looks like this:
|14||<h1> Hello, World! I’m orange! </h1>|
After Challenge A, change the heading colors to the following ROY G. BIV colors:
Challenge B: Change the h1 style color to Red and h1 text to “Hello, World! I’m red!” in the body.
|14||<h1> Hello, World! I’m red! </h1>|
There are 140 names we can use in the color tag. Try different names in the color.
Challenge C. Can you make a color combination using red and it’s tones?
Go to https://htmlcolorcodes.com/color-picker/ and choose Red. Go to the Tones drop down box and choose Complementary.
What tones are complementary to red? Light blue is our complementary color. Let’s make a webpage with a red background and light blue font since the colors are complementary.
Use the following code to make a red background with light blue font.
|color: light blue;}|
|14||<h1> Hello, World! My webpage has a red background and a light blue heading! </h1>|
What do you think of a red background with light blue font? Hard to read? Even if some colors work well together on paper, they may not work well on screens.
Challenge D: Choose different combinations for your classmates, parents, friends, or siblings to review. Which do you like better? Why? For instance, what does triadic mean? Try the triadic colors of red on your webpage. Do you like them?
Why does one of the most successful and powerful websites in the world choose triadic colors for their website? What do these look like when we set them out in our transparencies? Do these colors remind you of anything? Can you mock up your webpage using transparencies?
Using transparencies and white paper between them, red, green, and blue look like this:
Each one of these colors is a bold choice of color and may not look good layered but instead using them in a combination of fonts might be fun on a white background. For instance, let’s look at Google!
Simple, effective, bright, energic, fun!
|11||<h1> Hello, World! My webpage has a red background, blue heading, and a green paragraph! </h1>|
|12||<p> Hi, I’m a paragraph in green. How do I look? </p>|
Challenge E: Try a different combination of the triadic colors. What do you think looks best? Worst?
Challenge F: Make a Survey on Google and ask the following questions:
What colors are hard to read on screen?
What colors are easy to read on screen?
What colors go well together making it easy to read the font?
What colors blend in with each other making it hard to read the font?
What colors do you like online? Examples may include Google white background with RGB font colors?
Extension Activity: Look at the most famous brands in the United States like Coca Cola and GE and Ford. What are their colors? Do you like them? Research what colors mean and make a short Google Slideshow of the examples.
Connections to Earlier Levels:
- Using transparencies to understand colors, opacity, transparency, color associations and color meanings.
Summary for Parents
In this lesson, the students are not just learning about HTML, backgrounds, and fonts, but understanding the importance of the technology they are creating. You may create the most beautifully colored website, but if no one can read your font, people won’t understand your message on the webpage. Second, it’s not enough to create a webpage, the webpage must have an aesthetic that makes people want to see more of your work. Finally, webpages are just webpages. The content inside of them is what makes them valuable. In this lesson we are asking the students to give peer reviews on different items within each other’s web pages and create data from those reviews with a Google Survey and Google Slideshow.
Students leverage technology to take an active role in choosing, achieving and demonstrating competency in their learning goals, informed by the learning sciences.
Students use technology to seek feedback that informs and improves their practice and to demonstrate their learning in a variety of ways.
Students understand the fundamental concepts of technology operations, demonstrate the ability to choose, use and troubleshoot current technologies and are able to transfer their knowledge to explore emerging technologies.
Unplugged activity: Use transparencies to build a mockup of different website color combinations and possibilities. Discuss color combinations.
Technical activity: Use HTML to build different color combinations in a webpage with headings and paragraphs. Discuss RGB, ROY G. BIV, Hex color values, what can we read online versus what is blurry in certain colors, complementary colors, triadic colors, finally, create a Google Survey to poll peers about color choices.
STEAM Connection: Color transparencies, layered colors on white paper, transparent color sheets, opacity, ROY G. BIV, 16 million shades of color online, RGB Colors, Hex Colors, arranging colors using crayons, color meanings.
Extension for Home: Go to the grocery store and look at the packaging the brands on the shelves. Millions of dollars a year is spent on the color combinations of the products you see and how they are presented to you to buy. Why? Can you pick out the following color combinations on a box or bag:
Complementary and Triadic. What colors are your favorite cereal box? Can you name a product for each color of ROY G. BIV?