Have you ever wanted to build your own website? Today we’re going to show you some fun HTML activities for beginners to help you get a better understanding of HTML coding and get you started building a site of your very own!
These days, there are lots of cool apps out there that make building a simple website quick and easy. But if you want to build something really cool and unique, knowing how to code in HTML is super important!
Learning HTML is important because the internet was created on and continues to rely heavily on HTML code. Automated WYSIWIG (What you See is What You Get) website editors are helpful but they have their limitations. Fortunately, many automated website editors also have the ability to also use custom HTML code. So, if you want more control of your website, learning how to code HTML for yourself is key!
Find out how to build web pages with HTML and CSS in our award-winning online class, Build Your Web, designed by Google, Stanford, and MIT professionals, and led live by an expert.
Discover HTML activities for beginners with this tutorial for kids
Learning HTML sometimes involves a lot of trial and error. Today’s activities will give you a chance to:
- experiment and make mistakes in a safe environment
- explore some key HTML concepts
Here are a few fun activities you can try to get your feet wet in the world of HTML coding!
1. Make your first webpage using HTML!
The first thing you need to know is that websites are built using a coding language called HTML. HTML is a coding language that uses tags. Tags are kind of like boxes. There are lots of kinds of boxes that have different “attributes” like color or size and different boxes can be used to hold different things. Some boxes are even used to hold other boxes. When using boxes to hold things in the real world, it’s important to have a bottom and a cover for the box so it works properly and so that things inside the boxes don’t spill out. HTML tags are the same way.
In this first activity we will customize a pre-built web page to make your first web page! To customize this web page and make it your own, we will be customizing an <h1> tag and a <p> tag. An <h1> tag is for making a large heading or title section on your page and the <p> tag is for making paragraphs.
Before experimenting with the tags, keep in mind that every tag needs an opening tag and a closing tag. The opening tag is like the top of a box and the closing tag is like the bottom. The opening and closing tags keep everything contained just like the lid and bottom of a box.
For example, the large heading tag starts like this <h> and ends like this </h>.
Do you see the “/”? This tells the computer that we are closing the heading tag.
Now that you have the basics, click over to this page and start customizing.
- Start by changing the words inside the <h1> tag. You can put something like, “Welcome to my first web page!”
- Then, try changing the text in the <p> tag right below your heading. Write a paragraph sharing your favorite outdoor activity. :)
- When you’re ready to test your web page, hit the big green button that says “Run”.
- Be very careful with the opening and closing tags. If you accidentally erase a “<” or the “/” it may make the page render funny. You have to be very precise with your typing.
- HTML doesn’t work the same as a typical text editor like Microsoft Word or Apple Pages or Google Docs. If you press the “Return” button on your keyboard to get a new line, the web browser won’t do as you expect. If you’d like to add a new line after a sentence, you will need to use a line break tag. <br>
So for example if you type this:
The page will render like this:
Hello, I’m Ray. I like to play lacrosse.
To render properly, you’ll want to use the line break tag <br> like this:
This will work correctly, too.
2. Dress Up Your Text
In this activity you’ll learn how to make your words in your paragraph stand out by making words bold, or italic, or underlined.
To do this, you will use use the following tags:
<b> for bold text
<i> for italic text
<u> for underlined text
Will render like this:
Hello! My name is Ray and I like to play lacrosse.
For this activity, you can continue customizing your webpage from the previous activity or click here to start a new webpage:
- Remember, whenever you use an HTML tag, don’t forget to use a closing tag to let the computer know when you want the text effect to stop.
- You can also NEST tags. For example, what if you wanted some text to be both bold AND italic? You can insert a tag, followed by another tag, followed by the text you want to decorate, followed by the closing tags like this:
The above code will render like this:
The following text will be both bold and italic.
3. Adding links to your page.
No webpage would be complete without links to other pages, right?! So let’s explore creating links.
To create a tag, we will need to use the anchor tag <a>.
Until now, we have only been using simple container tags. A box is a type of container. The tags we have been using so far have contained text. The anchor tag <a> is also a container tag but it is special because it is the first tag that we have encountered so far that has attributes. Attributes can change the personality or actions that can be applied to and by a tag.
The attributes we will be playing with for the anchor tag are href and target.
href stands for “Hypertext REFerence”. We can use the href attribute to reference another location in the webpage or another webpage.
target is used to specify where the href will be displayed.
Attributes are similar to variables and you can set their value using an equal sign “=”.
As an example:
This code will create a link to the USA Lacrosse website that looks like this:
The target value "_blank" tells the web browser to open this link in a new browser window.
For this activity, you can continue customizing your webpage from the previous activity or click here to start a new webpage. Copy the code example above, paste it into your HTML code and change the href attribute to your favorite website. Then change the text inside the <a> tags the same way you changed the text in the <h1> and <p> tags.
- Be careful with the " symbols. Each attribute should have two. If you forget one, the web browser will get confused.
- Also remember to make sure you have matching < and > brackets for all your tags.
4. Exploring RGB Hex Colors
In this activity you’ll learn how to change colors in HTML using RGB Hexadecimal numbers.
Normally, we count from 0-10 and then move on to 11, 12, 13, 14, etc. In hexadecimal, the numbers go from 0 to 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F.
So for example, A in hex is the same as 10 in decimal. F in hex is the same as 15 in decimal.
Hexadecimal is useful because it allows us to express the same numerical value with fewer digits or characters. 15 in decimal requires 2 digits while saying the same number with “F” uses only one digit.
HTML uses hex numbers to give you very specific control of your colors. Lots of other programs like Adobe Photoshop and other graphics and video programs use hex numbers for colors as well, so learning hex colors is a very useful skill.
You may be wondering, “What is ‘RGB’? What does that mean?”
RGB stands for Red Green Blue. The first two characters in a six character RGB code give the amount of red. The second two give the amount of green. The last two characters give the amount of blue. So if you have the color code FF0000, that is true red. 00FF00 is all green. 0000FF is all blue.
FFFFFF means all the reds, all the greens, and all the blues, which makes white.
000000 means no reds, no greens, and no blues, which makes black.
You can create all kinds of combinations with the numbers to get a very specific color.
Ready to try playing around with RGB hexadecimal colors? Try it here.
- Be careful not to get confused with the color attribute code and the label. The numbers you want to change are the numbers connected to this code: “background-color:#ff0000;”
- Hit the green “Run” button to run your code
- You can reload the page if you mess up and want to start over
5. Adding color to your text
Now that you know how colors are handled in HTML, let's add some more fun and personality to your plain text. Before, we started off by playing around with HEX color codes. These are great if you want complete control over your color choices. But for your convenience, you can ALSO use CSS (Cascading Style Sheet) color keywords to use “pre-mixed” colors. For a complete list of CSS Color Keywords, check out this link.
For most HTML tags, you can use the style attribute to control different tag properties such as color, size, font, font decoration, etc. In fact, this is the PREFERRED way to style your HTML code because it gives you much more flexibility when you decide you want to give your website a new look. In this activity, we will focus on the style attribute to control the color of the text in a heading and a couple paragraphs.
The style attribute can take several “key/value pair” values. The key is the property you want to change and the value tells the browser how to change that property.
This bit of code will render a small heading like this:
Do you see how the key/value pair is entered inside the " " marks? The key is color and the value is red.They are separated by a “:”. If you wanted to add another property to change, you can separate the key/values with a semi-colon “;” like this:
This bit of code will render like this:
Ready to give it a try? Click this link and try changing the colors on the <h3> heading and the two <p> paragraphs.
If you’d like to play around with more text-decoration properties, you can see more options here.
And here are some other ways you can make your text bold or italic.
Get started with HTML activities for beginners
We hope you enjoyed creating your first webpage with HTML! You now know how tags work, how to create headings and paragraphs, how to make your text fancy, and how to change colors. Want to learn more? Check out our tutorial for learning HTML. And join our award-winning live online, small group Build Your Web class, designed by professionals from Google, Stanford, and MIT.
Written by Ray Regno, who earned his B.S. in Computer Science at the University of California San Diego in 2003. Only two years after graduation, Ray left his career as a software engineer to pursue his true passion: inspiring and educating others. For almost two decades Ray has taught students of all ages a wide variety of topics and disciplines including coding, fitness, music, automotive repair, and leadership development.