HTML 101 for Beginners – Part 2 – Links and Images
HTML 101 – Links and Images
Welcome back to lesson 2 in the continuing series of HTML 101 for Beginners. This lesson will be on inserting links and images into your web page. In HTML 101 for Beginners Part 1, we talked about the basic HTML tags so now it is time to move on to links and images. Make sure to download the project files used in this lesson if you want to follow along.
Insert Links Into Your Website
Links are used in a variety of ways for web design. They can link to another page on your website, they can link to a specific spot on your website, or they can link to an entirely different website altogether. These are just a few ways links can be used.
Links are defined by the <a> tag. There are those darn HTML tags again. They are everywhere in web design. To define a link you must specify where you want the link to take the user to.
Let’s look at an example.
<a href=”http://www.redefinedwebdesign.com/”></a>
This example specifies a link that takes you to Redefined Web Design. Notice the href=. This is an integral part of all links. Also notice the closing </a> tag. All HTML tags must be closed in order for the page to function properly.
If we were to insert the above example into our web page and view it in a browser, you would be cursing me and saying this guy is crazy because nothing happened and there is no link there. This is where I would step in and say settle down grasshopper as there is more to it.
In between the …com”> and </a> is where you place the anchor text.
The anchor text is what appears on your web page. In our example we have no anchor text so that is why there is nothing on the page. Now you owe me an apology and make sure to put a Mr. in front of all those curse words just out of respect.
Let’s try this example again with some anchor text.
<a href=”http://www.redefinedwebdesign.com/”>Web Design Denton TX</a>
Now the example would have the words “Web Design Denton TX” in a link that would take you to Redefined Web Design.
Links also should use titles which we will cover later in this lesson.
Insert Images Into Your Website
Now that we know had to add a link to a website, let’s add an image. Images pretty much work the same way as links in that we must define a location of where the images are. To do that, we must define the HTML tag for images which is <img>
Example:
<img src=”some_picture.jpg” />
This says to go to the root folder and pull up an image named some_picture.jpg and display it. If the images were kept in an images folder, the code would look like this:
Example:
<img src=”images/some_picture.jpg />
Like link tags, images have title or alternative text that can and should be used. They also need their height and width defined. We will cover these later in the lesson.
Let’s Put it to Practice
Let’s add the header image to our website. To capitalize on the use of links, we will link the image to our home page. Two for the price of one!
We left off with the following code on our site.
<html> <body> <h1>Welcome to My Very First Web Design</h1> <h2>What to Expect?</h2> <p>Don’t expect a lot since this is my very first web design. But rest assured my friend that this is the beginning of something big. Rome wasn’t built in a day and this website won’t be either. Why bring that up? I’m not really sure but it sounds cool.</p> </body> </html>
First, let’s add the image above the <h1> tag. If you downloaded the project files, you will notice all of the images are in a folder called images. So here is how the code would look.
<img src=”/images/header.gif”> <h1>Welcome to My Very First Web Design</h1>
This says go to the “images” folder and grab the header.gif file so we can show the world. Now let’s link that image to the home page. To do that, we need to use the <a> tags that we learned about above. The linked image would look like this:
<a href=”/”><img src=”/images/header.gif”></a> <h1>Welcome to My Very First Web Design</h1>
This says that if someone clicks on the image, it will take them to “/” which is the root directory otherwise known as the location where the home page is. We could have put “index.html” and it would have accomplished the same thing.
Alt, Height and Width Attributes
Let’s go ahead and add the alt, height, and width attributes to our image. I highly recommend doing this for all images as it serves for SEO purposes but also helps those with disabilities be able to access your site as well. The image is 900 pixels wide by 115 pixels tall. The alternate text we will use is My Very First Web Design Logo. Now let’s see it in action.
<a href=”/”><img src=”/images/header.gif” width=”900″ height=”115″ alt=”My Very First Web Design Logo”></a> <h1>Welcome to My Very First Web Design</h1>
Final Product 
If everything went smoothly as planned, you should have something similar to this if viewed in a browser. Click on the image to view a bigger size.
Conclusions
Inserting Links or Images into your site is a simple process by utilizing the <a> and <img> HTML tags.
In the next lesson we will go over lists and use them to build our navigation for our site. Navigation means we will need additional pages. We will also add a few more pages to our site.
Download the Files
Comments or Suggestions
Did you find this informational useful? If so, tell your friends, leave us a comment and let us know how we are doing. If you have questions please ask here.
Lesson 1 – HTML Codes
Lesson 3 – HTML Navigation List
Lesson 4 – HTML Div Tags
Josh
Most people these days think that you don’t need to know HTML because of all the CMS’s that basically take that all away. As a web designer, believe me, it’s nice working with people who have a little bit of background knowledge in HTML once in a while. Everything goes just a little bit smoother.
Ken
I agree. Even if you use a CMS it is still best to know some HTML plus PHP if you plan on modifying the basic template at all. Too many people these days think they can go out an get a WYSIWYG editor and start cranking out websites. These people hurt the web design industry as a whole because they start producing low quality sites and charge market prices for them. It gives the rest of the industry a bad name.
john white
you given best tips.i agree with you.you give best tips for HTML.this is useful for me.you provide best service with example is so much useful for all.thanks
Dana Krzal
Keep up the good work