2/14/2011

Technology Tutorial- Learning HTML: Inserting a Background

Free Backgrounds

This tutorial is Part 2 of Learning HTML. Click here to review Part 1.
In this tutorial you will learn:
  • How to insert a background color.
  • How to insert a background image that repeats.
  • How to insert a background image that repeats horizontally.
I created the above backgrounds and they are free for you to use. Let's begin.
  1. Open up your previously saved work from tutorial Part 1 called example.txt. You need to open the Notepad program first, and then open your file. Note: If you cannot find your text file, that's okay. Just open your example.html. It should open as a "Web page." If you are using IE, click page --> View Source. If you use Firefox, in the menu click View --> Page Source. Copy and paste that into a new Notepad file. ****You can view the code to every Web site out there by taking those 2 steps. *** Test it out- try it while you're here and check out the code for my blog!
  2. Next find the <BODY> tag. Directly after the word <BODY add BGCOLOR="#CC00FF" or go to Color Picker and chose your own background color. (BGCOLOR means just that, Back Ground Color- it looks like this: <BODY BGCOLOR="#CC00FF">) If you went with the color I selected, you should see a purple background once your example.html is reloaded! Easy?!? I thought so!
  3. Steps 3 & 4
  4. Now we are going to take a moment to talk about something techies like to call "relevant to path." If you are scratching your dome right now and wondering "what in the world am I talking about?" Please, give me a moment to explain. The term "relevant to path" goes like this: every time you add code to create your Web page you are giving your computer a set commands. Kind of like when you tell your dog to sit or your children to stop doing something. When you add code to upload a photo to your Web page you are telling your computer exactly where to look for it. Once you change the location of this file, the computer then scratches its dome and is lost. Just as when you call your dog or child by the wrong name, the computer doesn't understand what you are referencing to. Get it? So, for the remainder of the HTML tutorials, we are now going to create a proper folder. Well, two folders. So go on and right click (either on your desktop or wherever you originally saved your file) and go to New --> Folder. Save your folder as Website. Drag and drop both your Notepad file and HTML file into this folder.
  5. Now, open the "Website folder." See the files that you dropped and dragged there? Ok? Good, go ahead and right click inside the "Website" folder and go to New --> Folder again. This time name it images (all lower case). This folder is going to serve two purposes- #1 it is going to keep us organized and #2 this is where you are going to keep all of your images from this point forward that are in relation to this tutorial.
  6. The first background lesson is going to be how to add an image for a background and then repeat it. Right click and save any of the checkered or "ball" backgrounds provided above. REMEMBER to save this image in your image folder inside your Website folder!!!!!
  7. The code we will be using now is going to call for two things #1 it is going to tell the computer that you are changing the "background" and that it needs to look for an image on your computer. Example of this <BODY BACKGROUND="location where you need to find the image(in our case we will call upon the folder "images")/the name of your image and extension">
  8. Now we simply change the code from <BODY BGCOLOR="#CC00FF"> to <BODY BACKGROUND="images/world.jpg"> (Note: your image may have a different name depending on what you chose.)
  9. Refresh or resave your file as example.html and see how it looks. See how the image automatically repeats itself. If you are new to this, you may have wondered how such a small image was going to make an entire background. There is a reason for this- the larger the image the longer it takes a page to load. Did you ever wait a long time for a particular page to load? Well, I don't. I say forget it and move on!
  10. Now it is time to learn how to take an image and only repeat it horizontally using very basic CSS. This is very popular amongst backgrounds that have gradients such as mine in my blog. The gradients above are all made with two colors (except for 1rainbowlove#182381.jpg). They were given cute little names followed by a number. This number indicates the bottom color. For the gradient to look "correct" when you scroll down the page, you first have to set the background to that color. (Note: if a color was not listed it is white #FFFFFF). For this, I am going to select the 1rainbowlove#182381.jpg image. Time to learn a little CSS (Cascading Style Sheets). You can add CSS to an html page, or as a standalone set of instructions. Click here to learn what CSS is. We will get more involved with CSS at a later date, I thought it was important to discuss now while we are learning about backgrounds.
  11. Okay, back to the code. Erase the background code after the <BODY> tag.
  12. Click and point to the <HEAD> </HEAD> tags. Just before the </HEAD> tag we are going to add the following: <STYLE TYPE="text/css">
    BODY
    {
    background-color:#182381;
    background-image:url('images/1rainbowlove#182381.jpg');
    background-repeat:repeat-x;
    }
    </STYLE>
  13. Now, let me explain. You are telling the computer that you are calling up a CSS in your html document when you type the <STYLE> </STYLE> tags and that it is going to be in the "BODY" of your page. Background-color:- is the color of your background. Background-image:URL is where your image is located. Type it just as you did before- the location and name of your image. Background-repeat is the fun part! Well, to me. "repeat-x;" is telling your computer that the image is to repeat horizontally only. 
  14. Save your file as .txt and .html. 
  15. Great Work! Next lesson we are going to create another page and link between the two!
  Any questions? Feel free to ask!

    3 comments:

    1. What a great tutorial. I love this sorts of stuff and have been debating getting more into it myself.

      Your header is adorable too! I am going to look below and see if I can find who designed it. ; )


      Found you over on Fun Follow Friday, new follower here! Hop on over and check out my blog, won't you?
      http://marnisorganizedmess.blogspot.com

      ReplyDelete
    2. Thank you! I designed it! I will gladly follow you back and thanks for the visit!

      ReplyDelete
    3. You're quick! I like that in a gal! Thanks! : )

      ReplyDelete

    I love to hear from you! Thank you for your thoughts!

    Want to keep the conversation going? Make sure you select "Email follow-up comments to:" and continue the fun!

    Aimee ~Classified: Mom

    Related Posts Plugin for WordPress, Blogger...

    Share the Love! Thanks