Developing Webs logo
Google
Web DW-Main DW-Photoshop
Visit the message board for solutions or post a question Check out the Classes offered for free at Developing Webs Voice Chat submit a tutorial, resources, article, font for publication consideration and earn a one way link back to your site Get more specifics about the Developing Webs Voice chat room and its room members View the current news at Developing Webs alternative sites which are resources for your d3evelopment needs Join Developing Webs Chat Link to us on your web page to help support this resource! Check out Developing Webs At yahoo groups! Developing Webs Home Adobe Photoshop Tutorials Macromedia Flash Tutorials Jasc Paint Shop Pro Tutorials Adobe Illustrator Animation basics Some Basic PHP tutorials Perl Tutorials HTML Tutorials Cascading Style Sheets javascript Front Page Tutorials Macromedia Dream Weaver Tutorials dreamweaver Publishing your site, FTP, ChMod, Promotions Tools to help you create your site Free and shareware fonts to download Photographs to use in your projects Shop for your site needs Free Online classes REcommend this site to others Developingwebs Log Out Change My Account details and preferences
RSS Newsfeed
for your site
DW News
Calendar
DW Forum
Right click on button and copy shortcut

Add to My Yahoo!

Reminder
Remember to book mark this site!



Request a Tutorial

HTML stands for HyperText Markup Language

Part 4: Images and Backgrounds

  1. RECAP
    While working with text is important, and color adds some character to a page, what makes a page exciting is images. Here we will learn how to put images into our page.

    From Part 3. Your code so far from Part 3 should look like the following:
  2. IMAGES
    Let's talk about images. When you use an image, basically you are linking to it. It is wise to upload the image to your site. If an image is uploaded to your web site, you do not have to link the entire web address, only the picture name. For our purposes, we will use some images on this site.

    The tag to add an image is the IMAGE tag, <img>. We have to tell them where the image is, so we use the src attribute to specify the image. We do that like this:

    <img src="../waterimage.jpg">

    This link specifies the image on our server by using the exact url of the image.

    Let's put this in our page

    Save your notepad as your HTML and Open your page in your browser to see your picture.
     

  3. BACKGROUNDS
    We Can also use images as backgrounds. This is an attribute of the BODY tag. The good thing about background images is that they automatically tile.

    To use an image as a background image, we put it in our body tag. Change your current body tag to this:

    <body background="../waterimage.jpg">

    Your html code should now look like this


    Save as HTML and view your page!

    When you are done we can go on to lesson 5
    Image attributes

 



"Building The Web Into a Nicer Place -- One Site At A Time"
Developing Webs Group Copyright © 2001-2014 All Rights Reserved
Privacy and Legal




iSECURE Network Security