Most blog templates pull the Blog name from your Blog settings and pop it onto your blog web page. It becomes the Blog Title, the very top of your blog page.

For my blog title, I used an image. Here is the code used (currently) on CodeScripter for the title:

< h1>
< center>
< a href="http://codescripter.blogspot.com"
img style="border: 5px solid #F2CE82;"
alt="Chaim made this picture!" title="Chaim made this picture!"
src="http://photos1.blogger.com/blogger/2904/
755/1600/codescripttop.jpg"/>
</a>
</center>
</h1>

You probably recognize the familiar "href=" which sets up a reference. In this case, the reference is to the blog itself. That way, clicking on the image takes the reader to the main page of the blog. This behavior will be consistent, no matter what page of the blog you are on. The image thus serves as a link to the blog.

The image you see is one that Chaim made and I uploaded to a CodeScripter post. I saved the post as a draft. That gave me access to the image without having to borrow anyone's bandwidth. (Well, I'm using Blogger bandwidth, but -- for some reason -- that's free!) The location of the image is http://photos1.blogger.com/blogger/2904/755/1600/codescripttop.jpg. That's what I refer to in the template.

The "center" tags make sure the image stays centered on the page, no matter how the page is resized. Or, at least I hope it does.

The < h1> tags are like the bread that forms a sandwich. The kind of sandwich you'll eat depends on what you put in between the bread. The kind of title you'll get here depends on what you put in between the h1 tags. Instead of text, I filled my h1 tags with a picture. I made an image sandwich. Not as tasty as pastrami, but eye-catching.

The title and alt settings create the little message that pops up when you move the mouse over the picture. (I'm not sure which one does that -- title or alt. Hmmm.)

But there's more! The image has a border, there is a background behind the image, and that background (box) has a border too.

So, what's all that about?

You can see in the code that I set a border for the image using the "img style=" tag. The border is 5 pixels wide, color F2C382, which is a kind of tan color. It's solid, not dashed or double or dotted. Thus the code is

"img style="border: 5px solid #F2CE82;"

Finally, I also set up a style for h1 - the header. I did this in the Style section of the template, between the two < style> < /style> tags.

That setting is:

h1 {padding:25px;background-color:#405F80;
margin:10px;border:4px double #663300;}

This code establishes that there will be "padding" -- space between the image and the edge of the element, the border. I then set a background-color to fill that space with the color 405F80 (blue). I added a margin so the header element wouldn't bump against the side of the browser window (ouch!). And just for kicks, I gave it a brownish (663300) double-lined border.

And that, folks, is the picture in a frame in a box with a frame that you see above!