Heads up: this post is fairly technical. If that excites you about as much as watching paint dry, then there are other blogs to read. Have fun.
Yahoo! 360° Blog Layout
Including table borders and images with links
Do you want to impress your friends with a sleek layout for your blog entries? Do you want to link to images that you have uploaded to Flickr or some other image hosting service?
Well, hopefully, this post will help. Just follow the excruciating steps below to create a blog entry that will make your friends say, “Ooooo” and/or “ahhhh.”
What do you need? Besides a computer and online accounts, which I will assume you have already, a little — a tiny bit — of HTML awareness will come in handy, but really, you will be okay without it.
Of course, I must disclaim that I am not to be held responsible if you do what I say here, use any of this code, or follow my advice and your computer blows up, leaves home, causes an international crisis, or any other bad thing befalls you or yours.
First, to make things a little easier for you, I have posted the source file for this tutorial on my website, so you can download it and do with it as you please. (How often do you get an offer like that?) Feel free to use, modify, and/or distribute it as long as you (1) give me credit for what I did and (2) do not charge for it, since I didn’t charge you. What’s fairer than that, I ask you?
Here are the basic steps. I will expand on them below, but some of you might only need the high-level outline. And here it is:
Here is the simplified source code for the blog layout template. I find that, when venturing into unknown territory, if someone has given me a head start, I can learn as I go. I make a few changes, experiment, and all without having to first know every detail of the subject. Maybe that approach will serve you here.
Now, that HTML code looks either straight forward, like Egyptian hieroglyphics, or somewhere in between. Not to worry. You can just copy ‘n paste the code above (or use the file from my site.) But, if you want to dig deeper, I will explain each piece right now. Take your time with this, it gets pretty thick for the average Joe/Jane:
This is simply a comment, a little note inserted into the HTML for the human reader. The browser ignores all the text between
This is the start of the table that forms the basic container of our blog post. The table holds the bits in line and even let’s us put a border around it. But, just so you realize, nowadays, savvy Web Developers prefer to use tables for layout control very sparingly, in favor of positional CSS. Now let’s look at each attribute of the table tag to see what it does:
<... summary="Basic blog layout" ...>
summary attribute is optional, but nice to include. It is used by screen readers for the visually impaired to describe the contents of the upcoming table, which lets the user decide if they want to view it or not.
<... align="center" ...>
align attribute tells the browser to place the table in the horizontal center of either the screen or, as with Yahoo! 360°, the containing HTML element. Other options for this attribute are
<... bgcolor="#3399FF" ...>
We will use the
bgcolor (background color) attribute in an unusual way. Since we can’t use CSS borders in Y!360° (for some reason, however I haven’t tried it recently,) we will do three things to simulate a border.
First, we will set the background color of the table to the color we would like for our simulated border. Here, I chose
"#3399FF" for my background color. Do you know that color? Neither do I, that’s why I look it up. Second, we will add a bit of spacing between the table edge and the cells’ edges inside the table. This will let some of the table’s background color leak out to give the illusion of a border. Finally, we will specify a background color for each cell to mask out the table’s background, except for that little space all around the cell’s edge. All clear as a foggy night, right? Super. Let’s contnue.
<... border="0" ...>
Seems strange, doesn’t it, that we are going through all this trouble for the border, when here we have a
border attribute. Yes, well, the typical display of this attribute, if we were to use it, looks—I’m just going to say it—ugly. We won’t use it, so we’ve set it to 0 (zero.)
<... cellpadding="10" ...>
cellpadding attribute controls how much space there is between the cell edge and the content within the cell. I use
"10" here to give a bit of white space. Keep in mind that you can play with all these values and see the results for yourself. That will help you learn the effect of each attribute on the table’s appearence.
<... cellspacing="1" ...>
cellspacing attribute, as we are using it, will define the thickness of the table border. The value of
"1" give a clean, thin line. On your blog, make it thicker, if you’d prefer. Have fun.
Whew, we’re done describing the table’s attributes and that’s a big part of this. The next tag,
<thead align="left">, marks the start of the table header and specifies that the content will be left justified.
Then come the start of the row,
<td colspan="2" bgcolor="#CCFFFF">, which will span 2 columns, have a
"#CCFFFF"background color, and form the title bar.
The next two lines describe the content of the title bar. First, the title as a level 3 heading,
Yahoo!360° Blog Layout
and the subtitle as a paragraph,
Including table borders and images with links
To finish the title bar, we close the cell
, and head
Done with the table head, we move to the body,
<tbody align="left" valign="left">, with content tucked to the left and top of each cell.
Again we will start a row,
<td bgcolor="#ffffff">, will be on the left with a white background (I know that color) and will hold our image (or images in your version, if you choose.)
Inside the left cell, you might notice that the image tag is wrapped by an achor tag,
<a ...><img ...>. Flickr provides a convenient tool for copying all this HTML to paste right in here, which I will show you below.
We’ll come back to the anchor tag in a minute. For now, let’s examine the image tag. In a nutshell, the image tag tells the browser details about the image and where to place it on the page. Here are the attributes:
<... src="http://static.flickr.com/26/62488882_dc3d8bcd31_m.jpg" ...>
src (source) attribute tells the browser where the image is, it’s address or URL.
<... width="160" height="240" ...>
height attributes tell the browser the dimensions of the image.
<... alt="Paris Vacation, Day 4" ...>
alt (alternative) attribute specifies the text to display for nonvisual screen readers or in the event that the image is unavailable. All four of these attributes are required.
As promised, lets look at the anchor tag. This tag gets a lot of use on the Internet. It wraps around text or, as in our case, an image to make it a clickable link to another place on the Internet. By wrapping the image with the anchor tags, the user can click on the image and open, in this case, the picture’s Flickr page. There are two attributes.
<... title="Photo Sharing" ...>
title attribute should provide some information about the link. I like to say something like,
"Link to a larger version in my Flickr photostream" or something that tells the user where the link will take them, if they click on it. Usually, the browser will display this text to the user as a pop-up “tool tip”.
href (hypertext reference) attribute is the destination of the link. If the user does click on the link, the browser will load the page at this address or URL.
Now, I said that Flickr provides an easy way to grab all this HTML code for an image. It does. To get it do this:
- Open Flicker to the picture you want to insert
- At the top of the picture, find the “All Sizes” button and click it
- On the next page, find the “small” link and click it
- At the bottom of the page, there is the code for inserting this image and the link back to the Flickr page for this image.
- Select it and copy it
How sweet is that? But let me point out one little gotcha. In the Flickr code, the anchor’s href attribute appears first, followed by the title attribute. While this is perfectly valid HTML, Y!360° dosen’t like it. Here’s what to do, once you’ve pasted the code into your table template, just cut and past the title attribute to precede the href attribute, like I have shown above. Other than that, the code is good to go.
Do you feel like you just drank from a firehose? Well, then, my job here is done. Feel free to leave feedback, corrections, better ideas, questions… the lot.