HTML Coding #3: Images and Links

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:

03_so_far

It’s got the <head> tag, the <body> tag, and <p>, header, and <title>.

Our site looks kind of bland, though.

03_so_far_webpage

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.

<img src=”https://howfastisasnail.files.wordpress.com/2015/05/img_0073-0.png?w=640″&gt;

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.

03_img_example

Ta-da!

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:

<a href=”https://howfastisasnail.wordpress.com/>Link</a&gt;

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.

WP_03_anchorTag

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:

WP_03_fullExample

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.

Advertisements

One thought on “HTML Coding #3: Images and Links

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s