About "Tables and Table Data"

Yesterday I wrote up the tutorial teaching how to format a blog post using html coding to format a table and the data to go in that table. One thing I didn't explain is why you might want to use this process.

Learning to format within existing code (the existing code makes your blog look how it does, usually by using existing templates that you choose) expands your horizons. It is simply learning how to work within the bounderies you have been given.

A while ago, I wanted to create a post which had pictures on one side with words to describe those pictures in a somewhat poetic way on the other side. I had a definate way I wanted the post to look, but I needed to use html code to get it to look that certain way.

Another time I just wanted to change the background color of my post along with the text, just to get it to stand out a bit and look a little different.

By creating columns, inserting breaks, and adding a different background color I could position the pics and the words any way I wanted and give the post the exact look and feel I was going for.

Existing templates are wonderful tools, but when you want a custom look, oft times handcoding with html is exactly what is needed.

Tables and Table Data

Sorry I've let so much time go by before adding any more info. I was surprised to come back and find some new followers! Welcome!

Okay, what I'd like to do today is show you how to change the color of the background area you are working in, like I did in this post, and then add pics and words in two separate columns. We will use <br> to start a new line. Add more breaks <br> if you want more space in between. Okay, so let's learn about tables.

You learned about website body's here. Remember how we could change the background color to any color that we liked, using hexidecimal codes that start with the # sign and have 6 letter/number combinations? We are going to do that again, but instead of putting it in the body tag, we are going to put it in the table tag. It will be basically the same principle though.

So first of all, let's choose a color. I'm going to choose Spring Green for the background color, and violet for the text color.

So I start by typing:
<table bgcolor=#4AA02C>
<tr>
<td>
Then You can add pictures on this side (if you've forgotten how to add pics, review this post)

<img src="http://1.bp.blogspot.com/_W-3mdqA0N_s/SWojXXYXYjI/AAAAAAAABIA/jRLJIzm2VFI/s400/conversation2.jpg"> <br>
<img src="http://3.bp.blogspot.com/_W-3mdqA0N_s/SWojXW3xwCI/AAAAAAAABII/NUZ8jOThd1c/s400/eating_cereal2.jpg" >
</td>

<td>
Then add words to this side in a new table data:
<font color="#8D38C9">Weekends <br>
Sleeping late >/font<

</td>
</tr>
</table>

So it looks like this:

Then You can add pictures on this side

Then add words to this side in a new table data: Weekends Sleeping late

So the table is the big area that I've colored green. We did nothing with the table row (tr) this time, but you still have to put it in your code between the table and table data. And the table data (td) has the info and pics in it in columns. Get it?

Go have fun!
(because I didn't explain the *why* behind wanting to use tables, I wrote this new blog post today that you might be interested in reading.)

Frame Around the Pic

Ok, I have been sad to have "frameless" pictures on my blog. See when I upload pics into blogger, they automatically make it clickable, but sometimes I don't want clickable...so I just do <img src="http://the name of my pic.jpg"> (see this How-to if you are confused. The problem is, that cute little frame goes away.

BUT I have found that if I do a CSS code instead of an HTML code, it works with minimul changes.

This is the code for the picture above:
<img style="margin: 0px auto 10px;" src="http://2.bp.blogspot.com/_W-3mdqA0N_s/SXz1lisJGuI/AAAAAAAABP8/SjDUj4tpBoA/s400/waterbuffalo.jpg" />

It is the "margin: 0px auto 10px;" after the img style (instead of img src).

Have I totally confused you? Drop me a line and let me know if this is as clear as mud and I'll try to verbalize better, okay?

Linking Revisited

I was asked the following question by noexcuses today: "I'm a newby. Can you tell me how to turn a word into a link back to Coffee Bean, or another location?
I've never done it, and it would be great to reference another's blog when I write something, enabling the reader to click on that blog, rather than just trying to remember the blog name, or writing down on one's arm...."

Good question!

There are two ways on blogger to add links.

The first way is for you to do the code by hand. The code for a link is <a href=http://noexcuses318.blogspot.com/ target="new"> No Excuses - Musings of a Procrastinator</a>

The "<" and ">" tags start and end each phrase of HTML. The "a href=" is where the link will go. You put that around the words you want your readers to read. Then you end the code with a "/" sign.

The target="new" means that a new window will open with the other person's blog, but your blog will still be open on their screen too. This helps them to not lose where they came from, and to let them go back to reading the rest of your blog when they are done looking at the other person's blog.

So you will do the <a href="where_ever_you_want_to_link_to" target="new">What Ever Word You Want Linkable</a>

If this is completely unclear, take a look at this post that I did awhile ago. You won't be trying to make a button, which is mostly what this post is about, but it does explain the "a href" thing in detail.

The other way is this: when you are writing your blog post, highlight the word you want to have be a clickable link like this:


then click on the link button (kind of a greenish icon) between the i and the " up on the toolbar:
"

Add the link address, making sure that it looks like this:

Make sure that there is only one http:// and that the address that you want to have linked to is cut and pasted so that there are no mistakes in the addy. (Cutting and pasting addresses is done by highlighting the address in the address bar and clicking "copy" and then pasting into the address box, like above.)

That is it! It is a lot easier than it sounds! So just play around with which ever method you like best, and it will soon be second nature!

If you have any questions, be sure and ask it in the comments and I'll clear it up, okay?

Lessons Learned Over the Holidays

There are a couple new things with my blog that I have worked on lately that I am excited to share with you.

The first was learning how to change the background, the "outer wrapper", and the header to change the look and feel. I wanted a new look for Christmas, but have been disappointed with the loading time of some of the cute backgrounds I've seen on other's blogs. Not to mention, when I visited the site to choose the cute look, my computer crashed. So, I took matters into my own hands, using free backgrounds I've found on the 'net. Below are the three for the holidays, and you can see my current look by visiting MerrieMelody.blogspot.com. Also, I have posted the links to the backgrounds I used on the sidebar.





The second was to create a table within a blog post (shown below). This made me sooo excited because it gave me extreme control over posting pics and words together in a way that I wanted without having to make it an image that would take forever to load for viewers. It allowed me to have my pics and words on a separate background color, too, enhancing the visual effect of it all.

Weekends. Sleeping late. Enjoying friendships. Eating junk food. Working on projects. Playing games. Reading books. Worshipping. Fellowshipping. Relaxing. Early to bed. Monday.

So, over the next week or two, I will be discussing each of these sections separately: Creating a header, finding and changing the background and "outer wrapper" of a blogspot blog (I'll have to look separately at my wordpress blog and see if I can do the same thing there), and creating a table within a blog post.

Stay tuned!

Adding Images

We are going to now learn how to add images. We will be creating a new .html page. You can look back at previous explanations of how to do something if you have forgotten.

First of all, I want you to create a folder for your webpage info. Do this by going to "My Documents" and right click somewhere on the white screen. Choose "New" and then "Folder". Name it "My Webpage" when the folder is first displayed, then hit enter. Double click on the newly created file, "My Webpage" to open the file.

Now open "Notepad" (remember how to do it? click on start, all programs, accessories, and open notepad). Let's save it now. Where it says, "Save in" up at the top, navigate to "My Documents" and find "My Webpage" and click on it. Let's call the file webpage1.html and be sure to save it as an "all files". If you need a refresher course, look at "Basic HTML 1"

Let's put a title our webpage. Let's simply call it "My Webpage", by opening the title tag, entering the title, and closing the tag, like this: <title> My Webpage </title>

Then we'll open our body tag, hit enter several times, and put a close body tag, like this: <body>




</body>

We will then put our information in between those two tags, within the body itself. Let's keep the background white, for now, and have the text be navy blue. Let's look up the color code by visiting: http://www.computerhope.com/htmcolor.htm

Scroll down until you see "Dodger Blue 4", and let's copy and paste the color code, starting with the # and including the six numbers and letters that follow it. Please visit the site yourself and find the color code.

On "webpage1.html", right below the open body tag, enter the font tag by writing <font color="#153E7E"> and then right above the close body tag, close the font tag by entering: </font>

Now, we are going to go to Merrie Melody and save an image from there. Let's copy my "Merrie Melody/Pimp My Site" logo located in the upper left hand corner of my blog page. Move your mouse over the logo and right click on it. Click on "save picture as". Again, navigate to "My Documents" and find "My Webpage" and click save. The picture name is "avatar.jpg". Since we now have our .html document and our picture together in the same file, we can now attach our picture on our webpage.

Between the open and close font tags, put the text "Merrie Melody Avatar:" <br> and then we will add the image code to display the picture on our webpage. The image code is: <img src="avatar.jpg"> So you will see: Merrie Melody Avatar:<br><img src="avatar.jpg"> That <br> will create a break so that the avatar pic and the text are on separate lines. You could also write a <p> instead of the <br> to create a double space.

Let's see what it looks like now. Let's save our work. Now go to "My Documents". Click on "My Webpage". Within that file you will see your webpage1.html and avatar.jpg. Click on webpage1.html

You can add other pictures to your webpage that you have on your own computer by finding the picture, pull it up in internet explorer, right click on it, click "save picture as" and direct it to My Documents\my webpage and saving it by a name. Add the picture name between the parenthesis in the tag: <img src=" "> img src stands for image source.

That is all there is to it! As long as the picture is located in the same file as your webpage, that will always be the code.

Now, if you want to link to someone elses picture that is already on the 'net, you will put in a URL address.

To find the address, let's go back to my avatar on http://merriemelody.blogspot.com/
Again, move your cursor over my avatar in the top left hand corner of the page. Right click on your mouse, but this time you're going to choose "Properties". You will see Address (URL). Copy and paste the entire URL starting with http:// and ending with .jpg.

If we enter that info in between the image source tag it will bring up the avatar to look the same as the avatar in our file. Let's try it:
<img src="http://3.bp.blogspot.com/_W-
3mdqA0N_s/SOqirhPk_tI/AAAAAAAAAqY/0lzYPNlQgYY/S220/avatar.jpg">

Now save your work and take a look at the webpage. No matter where your image is, if you have the full URL address you can see the image.

See you next time!

Font faces, sizes, & colors

Last time I said that next we'd "learn how to put content onto your pages: writing code to change fonts and text sizes and text color and adding images to your pages, just by using html.", but I think I'll do images next time, okay? It is just a lot of material to cover. So let's get started!

First, go back into your .html file that you worked on last time. Remember that to get back to your notepad page so that you can make changes to your code, you first click on the internet explorer looking icon that is labeled as WhateverYouSavedItAs.html. When it is opened and you see your black page, right click anywhere on the black screen and click on "View Source". Voila! There is your notepad page again!

Ok, lets add content in between the <body> </body>. Add spaces between the opening and closing body tags simply by hitting the "enter" key a few times.

Great! Now we're going to play with font colors and text. The first thing that you should be aware of, is that not everyone has the cool fonts that you do on your computer. Your computer might be able to pull up "chiller" or "Bradley Hand ITC", but other people might not. The standard fonts that people have are: Arial, Times New Roman, Comic Sans MS, and most likely Verdana. You can add an alternative code if there is a text that you really want to use, but be sure to make allowances for others. For instance, if you really want Bradley Hand ITC, but arial will do in a pinch, write: <font face="Bradley Hand ITC, Arial">. Go ahead and try it, but let's make sure to specify a font size and color while we're at it. Let's put in <font face="Bradley Hand ITC, Arial size="9" color="#ffffff"> PUT SOME WRITING </font>

You listed the font that you wanted by telling it the "face" you wanted it to have, the "size" you wanted (I often don't write this one, except for a title), and the "color" that you wanted. With black as a background it forces us to choose a font color since default is black, and the default text simply will not show up on a black background.

You can play around with the text by going into microsoft word and picking out a text that you want to try out. Just remember that most of the fancy scripts will not show up, so always add an alternate like Arial, Times New Roman, Comic Sans MS.

If there is time when you need a specific font, say for a logo for your web business, or a header for your blog, you will need to make an image specifically using that font. I'll show you how to do that later, but I just wanted you to know.


One great thing about being able to change the code as you are working in a sentence is that you can <font color="#f70909"> call attention to some words</font> while leaving the rest alone.

You can <font size=+4> really make them stand out</font>

or <font size=-1> downplay them a bit</font> (this one didn't work well here, but it will on your .html page. Try it there, ok?)

You can also <b>bold a word</b>

<i>Use Italics</i>

<center>Center something (this works for images, too!)</center>

<strike>strike something out</strike>

<u>underline</u>

If you have a question about how to do a certain something with the fonts, just submit a question in the comments section & I'll find out and let you know, ok?

Steve, my dh, just commented and added that: <span style="background-color:yellow;">will highlight words</span>

That is all we'll do for today, but be sure to play around with it just a bit. It is one of the most basic codes you'll use.

Have a great day!