IMPORTANT: If you haven’t looked at the other HTML posts, do that now. Click here for the first one.
In the last lesson, we learned a few content tags, mainly the header tag (<h1>) and the <p> tag. Here’s what our website should look like:
It’s got the <head> tag, the <body> tag, and <p>, header, and <title>.
Our site looks kind of bland, though.
You know what would make it more lively? A picture for sure, maybe a link.
A picture is relatively easy. To insert an image, you’ll need the <img> tag.
The <img> tag is a special tag, since it doesn’t need a closing tag (like the <br>, or break tag).
How it works? I’ll show you an example.
Looks confusing, doesn’t it? Let’s break it down a bit.
The first “img” part is the actual tag. It tells the computer that an image goes here. What follows are like add-ons, or in computer language, “attributes”. “src” is an attribute, and it stands for source. What goes into the quotes is the link to the file. I’ve linked to a picture from an old post, but you can link to any picture, so long as you can find the link for it.
An easy way to find good pictures is to search up your topic with your search engine, right-click whatever image you would like, and click “Copy Image URL”.
Then paste it in the quotes.
Try running it.
But a website can’t all be just text and pictures. You’ll need some links to other websites, or other parts of your website.
How to do this? Simple, the <a> tag (the anchor tag).
The <a> tag needs to be closed, so make sure you do that.
Here’s an example of an anchor tag at work:
The <a is the tag in this case, telling the computer to “anchor” a link to the text. “href” is the attribute. href means HyperText Reference, and the computer refers it for the link it needs to anchor.
The link in the quotes (as you may have guessed) is the link that you go to when you click. And the text in between the tag (not nested with <>) is what shows up on the page.
Take a look at the example.
It should turn into a clickable link. Nifty, huh?
Try it out for yourself. Make a webpage with your own title, header, paragraph, image, and link. Here’s what I got:
Make sure to run it and fix the bugs.
Have a good one!
HTML Coding #4: Attributes is out now! Click here to check it out.