This blog post will walk you through programming (or coding) a website using HTML tags. It is also specifically designed to be perfect for kids who know how to type and read at at least a fourth grade level.
Okay, so, you’ve heard what HTML is (if not, go read this post) So, now, how do you actually write HTML? The answer is tags.
What are HTML tags?
Computers aren’t very smart. Because of that, you have to be very specific with what you tell them to do. Say I told you I would give you three. You would probably ask, “Three…? Three what?” Now, if I told you I would give you three apples, you would know what I was talking about. If I told you I would give you three green apples, you would know even more specifically what I was talking about. Tags are HTML’s way of telling the computer what it’s talking about. You’ll remember from “What is HTML” that the last two letters stand for “Markdown Language”. This means that the computer is expecting some sort of text that you are telling it how to format. You use tags to specify the format of the text.
What tags look like
Tags start with a less-than sign “<”, end with a greater than sign “>”, and come in pairs. For example, one set of tags is <p> </p>. These tags tell the computer you want to put a paragraph on your website.
You can use tags to make a website look very specific. For example, you might have red test in the font Arial. Or you could have a website as generic as basic text on a screen with no formatting- you just have to tell the computer what you want. While you are doing this, go to codepen.io and follow along with this example yourself!
A basic example
<body> <h4> Want to hear an animal joke? </h4> <h3> NO. </h3> <h1> WELL THEN. </h1> <h5> nevermind… </h5> <p> It was irr-elephant anyway</p> </body>
Copy an paste the code above into a new “codepen” at codepen.io/pen/ into the HTML section. (You may need to ask your parent’s permission before getting on that new website.) What shows up in the screen below?
You just created a webpage!
Next, let’s go through the code. All of the code is surrounded by the <body> tag. This tag is the main stuff of the webpage. Within the body, we see <h4>, <h3>, <h1>, <h5>, and<p> tags. Remember from before that the <p> means paragraph. What about all the tags that start with h? Those are heading tags. They surround text that is displayed as a heading. Question- what do the numbers mean? See if you can figure it out. Try to change one of the numbers (make sure to change it in both the opening and closing tags). What happens with you change it? What’s the largest number that works? Comment your answer below right now!
Here are some more tags and their meanings.
<body> : contains everything the visitor can see (text, hyperlinks, images, etc.)
<h#> : heading (replace # sign with a number)
<p> : paragraph
<a> : anchor; used for links
<a href=”https://www.google.com/”>click here</a>
<img> : links an image (don’t actually use the link in the code below, you can find an image link by going to google, finding an image, right clicking and choosing “copy image address”) (Image tags are also different because you don’t need a closing tag)
Now that you understand more about HTML tags, add your own tags and content into the code. What type of website can you create? If you have questions, comment them down below or email them to email@example.com and I will do my best to answer them in less than 24 hours.
For more information about HTML tags and to see a complete list visit https://www.w3schools.com/tags/default.asp