Basic HTML
Computing Resources >> Tutorials >> Web Development >> Basic HTML 

What is HTML?

Basic Tags

Text Formatting Tags

Links & Images

Additional Resources

Evaluate this Tutorial

 

Links & Images

Links

Making hyperlinks is very easy. To do so, you will use anchor tags (<a>) and hypertext (href) reference elements. So let's say you want to make a hyperlink to the iSchool homepage. We would add the following code:

<a href="http://www.ischool.utexas.edu">iSchool Homepage</a>
   <p><font color="#FF0000">Type your text here</font></p>
</body>

So what did we do here? Well, you just type in the complete URL of the web page to which you want to link. Make sure you include the "http://" or it will not work. The text "iSchool Homepage" will be the text that your users will actually click on to follow the link. To close the tag, simply add </a> after the text that you would like linked.

Images

Including images on your webpage can be a little tricky. It is very similar to linking, which is why these two techniques are paired together. So, to embed an image in your webpage, you will use the <img> tag along with the src element (src stands for source). What this does is tell the web browser where to find the image file (because HTML is just text, it doesn't actually contain an image file). It acts as a pointer to an image file that you may have stored in your web directory. So, let's say you have an image file stored in a subfolder called "images" within your public_html directory (which is also where your HTML pages must be). That image file is called test.jpg (that's the filename of the image file you want to display). We would write the following code.

<body>
   <p>Here's an illustration of how to
   put an image on your web page.
   </p>
<img src="images/test.jpg">  
</body>

In this case, the image would appear directly below the text in the paragraphs tags. Actually, it would look something like this:

Here's an illustration of how to put an image on your webpage.


Now, it is very important that you give the correct filename, and note that it is case sensitive. "Test.jpg" is not the same as "test.jpg." If you make a typo like that, your image will not show up. Another common mistake is forgetting to put the image into the appropriate directory. In this case the image shoud be in the "images" folder, which is a subfolder (or sub-directory) of your public_html directory. We could just have easily put it just in our public_html directory without the subfolder. In that case, you would just write <img src="test.jpg"> and it would work fine.

next section >

Watch the video
screenshot
choose format/speed
real media dial-up | broadband

Tutorial Transcript

© 2004 Chad Hutchens & Libby Peterek | iSchool | UT Austin | webmaster