Here’s an interactive tutorial that won’t make your child’s eyes glaze over
A student uses Exercise #2 to “mess up” the New York Times
There are plenty of ways to help your kids learn the basics of HTML. (I’m a fan of the no-nonsense videos at Khan Academy.) But when it came to teach my own daughters, they wanted something that seemed a little more… fun. Sitting down for a long lecture about angle brackets wasn’t going to cut it.
To fill the gap, I wrote Messing Up the Web, a micro-introduction that lets kids start playing and experimenting at the same time that they’re learning how the web works. Here’s what you need to know to use this tutorial with your own kids or students:
I’ve provided the complete lesson, with step-by-step instructions, two exercises, screen captures, and a link to a sample page. There is also a unicorn. And a few ninjas.
Ready? It’s time to hand the laptop over to your kid. The learning goodness kicks off in the next section.
The easiest way to use this tutorial is to read this article from top to bottom. But if you get lost, here’s a mini table of contents to put you right:
How Your Web Browser WorksUnderstanding Tags and ElementsPutting On Your X-Ray GogglesExercise #1: Be an HTML DetectiveExercise #2: Vandalize the New York TimesWhat You Learned
If you’d prefer to work from paper, you can also grab a PDF version to print at home. (But then you’ll need to type the links instead of clicking them.)
Let’s start with something you already know. When you want to visit a web page, you use a web browser. Maybe that’s Chrome, or maybe that’s Safari, or maybe it’s something else — it really doesn’t matter.
Your web browser has two jobs. When you type in a web address or click a link, the browser politely asks a far-away computer to send the web page back to your computer. (Technically, that far-away computer is called a web server.) This is job #1 for your web browser.
Your web browser also has another responsibility. Job #2 is to take the web page and show it to you. Here’s where the magic happens. Your web browser needs to transform the ordinary text in the web page into something that looks a lot fancier.
How does this happen? The secret ingredient is a language called HTML (that’s HyperText Markup Language for you nerds).
Behind the scenes, every web page is just a bunch of ordinary text, written in HTML. The HTML tells the browser what to do, as in “make these words bold” and “start a list right here” and “put this awesome picture of my nose hair over here.” (OK, maybe not that last one.) All these special instructions to the browser are called markup — that’s the M part of HTML.
If you want to make your own web pages, you need to learn to write pages in this language. The good news is that it’s pretty easy! Complicated pages can be complicated, but simple pages aren’t hard to write or to understand.
Now, I’m not going to hit you with a full HTML document just yet. Instead, let’s spend a minute to learn the single most important idea in all of HTML. It’s called tags.
Tags are the most important ingredient in an HTML document. You can always recognize them because there are funny pointed brackets involved, like < and >. Take a look:
<p>The time has come to learn.</p>
Can you spot the tags here? No sweat, right? There are two — the weird <p> code at the beginning and the </p> at the end. These two tags look so similar because they’re partners. The <p> tag marks the starting of a paragraph. The </p> tag marks the end of the paragraph. HTML whizzes say that these two tags make up a paragraph element.
You can think of an element as a kind of container. It has a start, an end, and a bunch of text crammed in between. In this example, the paragraph element tells the browser that this sentence (“The time has come to learn”) belongs in its own paragraph. You can imagine it like this:
Why does this matter? Because in an ordinary web page there are piles of elements holding different things. Some elements hold the text that goes in paragraphs, other elements hold text for lists, and other elements hold random bits of text you want to decorate with funky colors, borders, and other effects. You’ll learn to do all that later. But for now, you’re just going to go looking for the containers.
It’s time to meet a tool that can help you take a look at the elements in a web page. This tool is called X-Ray Goggles. It’s a free, easy way to peek behind the curtain. You don’t even need to install anything on your computer. (If you’re curious, X-Ray Goggles was created by the Mozilla Foundation, which is a non-profit organization that develops the Firefox web browser. The Mozilla Foundation spends most of its time telling people why web standards are awesome, to help make sure that web pages look the same in every different browser.)
To get started with X-Ray Goggles, you need to get to your computer and start your browser. You can use almost any browser with X-Ray Goggles, including Chrome (our favorite), Firefox, Safari, and Internet Explorer. You should be able to use Microsoft’s newer Edge browser, but that wasn’t working at the time this was written.
To use X-Ray Goggles, you need to add a special bookmark to your browser toolbar. But there’s a trick. This bookmark doesn’t take you to a web page. Instead, it runs a tiny bit of JavaScript, which is the coding language built into every web browser. This bit of JavaScript lets you explore the current web page.
Setting up X-Ray Goggles
The easiest way to understand X-Ray Goggles is to try it out. Here’s what you need to do in your browser to set it up:
1. Go to http://prosetech.com/html4kids/goggles.
2. Make sure you can see your browser’s bookmark bar. If it’s not visible in Google Chrome, pop open the browser menu, then choose Bookmarks, and then check the Show bookmarks bar setting.
3. Now it’s time to add the magic X-Ray Goggles bookmark. On the X-Ray Goggles page, look for the pink button that says Drag and drop me in your bookmark bar.
4. Click the pink button, drag it up, and drop it onto the bookmark bar. Now you’ll see a new shortcut appear, named X-Ray Goggles.
Once you’ve added the X-Ray Goggles bookmark, you’re ready to learn some HTML (and vandalize some websites). As you’ll see, it’s easy.
Using X-Ray Goggles to peek at a page
Ordinarily, when you look at a page, you see the final, formatted result. For example, check out the Unicorns vs. Ninjas page here:
When you visit this page, your browser gets some HTML that has the content (the words about unicorns and ninjas) and the markup (the instructions that tell the browser how to make that content look nice). The browser follows all the instructions in the markup and shows you the final product.
It’s like you’re looking at a perfectly baked cupcake. But what if you could take a closer look and see the cupcake’s ingredient list?
Here’s how to run this next experiment:
1. Visit the Unicorns vs. Ninjas page.
2. Click the X-Ray Goggles bookmark in the toolbar. This activates X-Ray Goggles.
3. Now you can explore the page just by moving your mouse around. Wherever you go, X-Ray Goggles finds the HTML element under your mouse and highlights it with a pink box. For example, if you hover over the “Unicorns vs. Ninjas” title at the top of the page, you’ll see the element name <h1> in the top-left corner of the pink box.
4. When you’re finished, turn off X-Ray Goggles by pressing the Esc key.
With your brand-new X-Ray Goggles, you are now a HTML detective trainee. Let’s see how you do.
Using X-Ray Goggles, snoop around the Unicorns vs. Ninjas page. How many different HTML elements can you find? Write down the name of each one, with your theory about what it does. For example, you already saw <h1>, which stands for “number 1 heading” — in other words, this is the element that holds the most important title on your web page.
Take a moment to list the elements you find. For each one, write down the element’s name, and make a guess about what it’s used for. Crafty detectives should be able to find seven altogether.
Are you sure you found them all? Double-check your list to see if you found <b> and <i>, which are buried a bit deeper in the page. These two elements are used to put small bits of text in bold letters or italics.
The trick is that <b> and <i> show up inside other elements. HTML is sneaky that way. It lets you put one element inside another element, and that element inside another element, and so on, like you have a gift box with way too many layers of wrapping paper.
In the Unicorns vs. Ninjas page, the <i> element is used several times for the names of ancient Japanese ninja weapons. These words are part of a paragraph, so the <i> element is used inside the <p> element. The shading in X-Ray Goggles makes this setup pretty clear. When you hover over the <i> element, you see just a word in italics.
When you hover over the <p> element you see the entire paragraph shaded in, including the normal part and the italicized bits.
How about the mysterious <html> and <body> elements — did you find them? It’s easy to breeze right pass these two ingredients. The <body> element is a special kind of container that holds the entire page. To find it, move your mouse toward the edge of the page, to the margin area that surrounds the facts about unicorns and ninjas.
Keep moving it even closer to the edge, and you’ll go past the <body> element and into the <html> element.
You might wonder what’s the point of having the <body> and <html> containers that hold everything. The reason is that web pages can have a few extra details in them, like a title that shows up at the top of the browser tab, information about the language the web page is written in (English, French, Japanese, whatever), links to stylesheet files that give you fancy fonts, and even links to code files that make things happen.
The <body> section holds the markup for the page, but it doesn’t include any of these extra details. The <html> container, on the other hand, is the Big Boss. It holds everything, including the <body> section and every other extra detail about your page. There’s nothing outside of the <html> element, because the <html> element is your page.
So did you find them all the elements in this exercise? Here’s a list that reviews every element X-Ray Goggles can find in the Unicorns vs. Ninjas page, and explains what the element does:
As you just saw, X-Ray Goggles is a great tool for hunting down HTML elements in the wild. But the real fun happens when you change the content of an element — the text that goes inside the container. Ever had the secret urge to rewrite the front page of your favorite site? X-Ray Goggles can make it happen. (The changes are temporary, of course. They show up on your computer, thanks to X-Ray Goggles, but no one else will be the wiser.)
To try this out, start with the same Unicorns vs. Ninjas page you’ve been exploring. Hover over one of the elements — say, the <h1> element for the main title — and click it. You’ll see a panel pop open at the bottom of your browser window, with the HTML for that element.
Now change the title to something else. Be careful not to disturb the start tag <h1> at the beginning and the end tag </h1> at the end, or there goes your title! Instead, change the text inside (“Unicorns vs. Ninjas”) to say something different.
When you’re finished, click the Update button and X-Ray Goggles will show you what you really want to see. Your changed title replaces what was there before on the web page.
Now try changing one of the paragraphs. Depending on which paragraph you choose, you may see something a little messier in the panel. If your paragraph has bits of italicized or bold text, you’ll see the <i> or <b> tags show up alongside your text. Here’s an example of what you’ll see if you click the first paragraph under the “Weaponry” heading:
<p>Ninjas are experts in hand-to-hand combat and masters of many exotic weapons, including the <i>ninjato</i> and <i>katana</i> (ninja swords), <i>shuriken</i> (throwing stars), and <i>yumi<i> (bow). But unicorns are tough competitors, with an unbreakable horn that never gets misplaced.</p>
At first glance, this looks like a tag soup. But it’s actually pretty logical if you follow things through one tag at a time. The first line, with the <p> start tag, obviously tells the browser that a new paragraph is starting. After that, the <i> start tag switches on italic formatting, and the </i> end tag turns if off. So if you have a line like this:
<i>ninjato</i> and <i>katana</i> (ninja swords), <i>shuriken</i> ...
The markup is telling the browser to turn italics on then switch it back off three separate times. Bold formatting with the <b> and </b> tags works the same.
NOTE: Not clear on the difference between tags and elements? Tags are the codes with the pointy brackets. So <i> is a tag and </i> is another tag. If you put tags together in the right way, you get an element. So <i>ninjato</i> is an example of the <i> element for italics, with a start tag, end tag, and a word in between. Or, to put it another way, an element is like a hamburger. The tags are the bun, and the content is the juicy meat inside.
A note about spaces
You may notice that when you peek at the markup for an element, sometimes it shows up with extra spaces in it.
For example, you might expect to see this when you click on the first paragraph:
<p>One is a rare creature with magical powers. The other is a stealthy assassin of the night. But in a showdown, who would take the crown?</p>
But what you actually see is something like this:
<p>One is a rare creature with magical powers. The other is astealthy assassin of the night. But in a showdown, who wouldtake the crown?</p>
Something happened. There are extra spaces here that don’t appear on the page!
Well, it’s time to tell you one more important fact about the way HTML works. If your markup has more than one space in a row, your browser just treats it like there’s a singe space. In fact, it does the same thing for all the types of blank spacing you can put in a web page. For example, if you press the Enter key to make extra line breaks, that’s just like an ordinary space to HTML. The same is true if you use the Tab key to indent a line. In they eyes of HTML, all of this blank space isn’t important. In nerd-speak, this is called collapsing whitespace.
At this point, you’re probably wondering why HTML messes with your spaces. After all, if you organize some text just perfectly and HTML comes in and ignores all your spaces, squashing your words back together — rude!
But there’s actually a good reason that things work this way, as you’ll see as you get into HTML a bit deeper. When you’re writing markup, you’ll often use spaces, tabs, and line breaks to organize your elements and make your markup easier to read and edit. (Those are the spaces that you’re seeing sometimes in X-Ray Goggles.) If you really do want to add more spaces, blank lines, and indents that will show up on your web page, HTML has its own tools for that. But that’s a subject for the future.
Bonus challenge: Italicize a new word
You don’t need to limit yourself to editing words. You can also use X-Ray Goggles to add small bits of markup.
For example, you’ve seen that some paragraphs have <i> and <b> elements inside them. One good challenge is to try to add your own bold or italic formatting.
To do this, click a paragraph to start editing it with X-Ray Goggles. Then, find a word in the paragraph that you want to format. Add the <i> start tag before the word and the </i> end tag after the word. Then look at the page and see if your change took effect.
If you’re having trouble spotting the keys on your keyboard that make the pointy brackets, they’re easy to find. On most keyboards, you hold down Shift key and use the comma and period keys. And the forward slash (which you use for an end tag) shares the key with the question mark.
Eating the whole enchilada with View Source
X-Ray Goggles lets you focus on one element at a time. But here’s something you might not know — most browsers already have a feature that lets you see the full HTML markup for any web page. You can try it out with just a couple of clicks.
In Google Chrome, for example, start by right-clicking on an empty space somewhere on your web page. This action pops open a small menu. In the menu, choose View page source. Then Chrome will open a new tab that proudly shows all the HTML.
Try this trick out on the Unicorns vs. Ninjas page. You’ll see something like this:
The Unicorns vs. Ninjas page is pretty simple, by HTML standards. Even though there are some details in the markup that we haven’t talked about yet, it doesn’t look that confusing. But most web pages are not like Unicorns vs. Ninjas. They have a lot more details. They have tiny bits of formatting that are stuck to different words, paragraph, and sections. They have floating pictures, columns, and fancy design details. They often have code to track visitors, show ads, and make animations. Sometimes they have junk for supporting old browsers from the dinosaur ages. And they’re really long.
When you’re looking at a simple page like Unicorns vs. Ninjas, you can use the View Source feature. You can manage to eat the whole enchilada of your web page markup. But when you’ve got a more realistic web page, View Source doesn’t work as well X-Ray Goggles. It’s hard to scroll through all the markup and find the details you want. It’s hard to make sense of all the mess. Don’t believe us? Try the View Source feature on one of your favorite websites and see what you get.
Here’s your mission, should you choose to accept it. Sneak into the office of the world’s most famous newspaper, the New York Times. And deface the front page of their newspaper.
The only weapon you’ll need for this sabotage mission is the X-Ray Goggles bookmark. If you accept, tell no one and travel to http://nytimes.com
The first task is to change at least one (or maybe more) of the headlines on the front page. For example, when you see “U.S. Politicians Support Tax Relief,” you could change it to “U.S. Politicians Support Poopy Pants.” Not that you would do that.
But if you did do that — well, just remember that every change you make only shows up on your computer and it’s temporary. The next time you visit the New York Times front page, everything will be back to normal.
NOTE: You’ll find that some New York Times headings use the <h2> element that means level-2 heading, which is what you’d expect. But others use the <span> element. If you look closely, you’ll see that the <span> element is actually inside the <h2> element. The people who made the New York Times website use this design to create the visual layout of the page, which is pretty crowded and pretty complicated.
Advanced trick: Changing a picture
Tampering with headlines is a good start. But your fun doesn’t need to stop there. X-Ray Goggles also lets you replace pictures. But first you need to take a closer look at the HTML that’s involved.
The element that handles pictures in the <img> element. To see how it works, activate X-Ray Goggles and click on one of the pictures on the New York Times front page. You’ll see something like this:
<img alt="" src="https://static01.nyt.com/images/climate/06CLI-AUTOS1/06CLI-AUTOS1-threeByTwoMediumAt2X.jpg?quality=75&auto=webp&disable=upscale">
Clearly, there’s no actual picture here, just a bunch of markup. And this markup looks a little different than what you’ve seen before. That’s because the <img> element has a trick.
When you use the <img> element, you need to tell it where to find the picture file you want to use. The web browser gets that picture, and then sticks it into the page. In the example above, this really long messy part:
https://static01.nyt.com/images/climate/06CLI-AUTOS1/06CLI-AUTOS1-threeByTwoMediumAt2X.jpg?quality=75&auto=webp&disable=upscale
is the web address that tells the browser where to find the picture. This information is actually stuffed inside the <img> start tag, which looks a bit weird, but don’t worry about that for now.
So how do you change it?
First you need to have a replacement picture at the ready. But you can’t just use one on your computer. You need to use one that’s already on the web, so your browser can find it. And one way to get that, is with a Google image search.
Here’s what to do:
1. Open a new tab to do your image search. Go to http://images.google.com, which is the Google search engine for images
2. Type in some words about the picture you want to find, and then click the search button. We went with “ugly chipmunk.”
3. Find the picture you like in the search results, and click it once to pop open a slightly larger preview.
4. Now for the fun part. Right-click the picture. When the menu pops up, choose Copy image address. (Don’t get distracted by some of the other, similarly named options.)
5. Go back to the tab that has the New York Times. If X-Ray Goggles isn’t activated, click the magic bookmark and then click on one of the images.
6. It’s time to make your edit in the X-Ray Goggles panel. Delete the entire web address for the picture. That’s everything that comes in between the quotation marks after the src=" part. When you’re finished, you will have this:
<img alt="" src="">
7. Now make sure your cursor is in between the quotation marks in the src="" part. Then, press Ctrl+V (or Command+V if you’re using a Mac) to paste the image link you copied. Now you’ll have something like this:
<img alt="" src="http://geekchiro.com/wp-content/uploads/st/stock-illus-cartoon-ugly-chipmunk-running-illustration-image.jpg">
8. Presto! A new picture appears on the New York Times homepage.
NOTE: If you didn’t get a picture, the problem is almost certainly a tiny typo. When it comes to web addresses, tiny errors break everything. If you accidentally deleted part of the address, put a space or line break inside, or remove one of the quotation marks, this example won’t work. Remove what you’ve done and give these steps another run-through.)
In this tutorial you played with HTML. You didn’t write a page of your own, but you met some important concepts for the first time:
If you’re clear on all those concepts, you’re ready to plunge ahead to the next step: learning to create a new HTML page of your own. Hopefully I’ll catch you doing exactly that in the next tutorial
Reviewed by Hacking
on
April 17, 2020
Rating:
No comments: