Monday, February 12, 2007

Linda's How-Do-I Series? How Do I Create A Simple Name Banner Out Of HTML Code?

Crafters starting out don't always have all the wonderful banners and buttons that they need for promoting themselves on the web. They not sure whether they should spend the money to buy banners and, if they did, which graphics website to use.

Well, the good news is that you can easily create a simple business or website name banner out of html coding to use in the introduction of your booth or your EZ-Shoppe. The problem is that you can't create a .jpeg file out of it.

But, if you just want something that is quick and easy to use that looks like a banner while your dipping your toes into the water and trying an online craft show booth or EZ-Shoppe you can create one out of HTML code. How do you do that?

Here's how (minus the ***'s which are there so you can view the HTML in this article):

Let's say I want my banner to say "Linda Walsh Originals."

Linda Walsh Originals

Now we want to BOLD it so we would code it as follows (minus the ***'s which are there so you can view the HTML in this article):

<***strong>Linda Walsh Originals<***/strong>

That produces this:

Linda Walsh Originals

Now, we want to add a border to it so we would code it as follows (minus the ***'s which are there so you can view the HTML in this article):

<***span style="BORDER: 3px solid;"><***strong>Linda Walsh Originals<***/strong><***/span>

That produces this:

Linda Walsh Originals


Now, we want to add some blue rgb(0, 0, 102)color to the border and to the font so we would code it as follows (minus the ***'s which are there so you can view the HTML in this article):

<***span style="border: 3px solid ; color: rgb(0, 0, 102);"><***strong>Linda Walsh Originals<***/strong><***/span>

That produces this:


Linda Walsh Originals

Now, let's say I want my border to be thicker so I might increase the px # to 6 so we would code it as follows (minus the ***'s which are there so you can view the HTML in this article):


<***span style="border: 6px solid ; color: rgb(0, 0, 102);"><***strong>Linda Walsh Originals<***/strong><***/span>

That produces this:

Linda Walsh Originals

Now, let's say I want my border to be thicker but I want some padding around the text so we would code it as follows (minus the ***'s which are there so you can view the HTML in this article):

<***span style="border: 6px solid ; color: rgb(0, 0, 102); padding:15px;"><***strong>Linda Walsh Originals<***/strong><***/span>

That produces this:


Linda Walsh Originals


Now, let's say I want to add some background color, say yellow so we would code it as follows (minus the ***'s which are there so you can view the HTML in this article):

<***span style="border: 6px solid ; color: rgb(0, 0, 102); padding:15px; background-color: yellow;"><***strong>Linda Walsh Originals<***/strong><***/span>

That produces this:


Linda Walsh Originals


Now, let's say I want to change the size of the text to make it much larger so we would code it as follows (minus the ***'s which are there so you can view the HTML in this article):

<***span style="border: 6px solid ; color: rgb(0, 0, 102); padding:15px; background-color: yellow; font-size:180%;"><***strong>Linda Walsh Originals<***/strong><***/span>


That produces this:


Linda Walsh Originals



Now, let's say we want to change the background color from yellow to say a FREE wallpaper that we like and have stored in a picture hosting website. For these purposes our wallpaper URL is http://i24.photobucket.com/albums/c47/LWOriginals/background11.jpg . We would code that as follows (minus the ***'s which are there so you can view the HTML in this article):

<***span style="border: 6px solid ; color: rgb(0, 0, 102); padding:15px; font-size:180%; background:url(http://i24.photobucket.com/albums/c47/LWOriginals/background11.jpg)"><***strong>Linda Walsh Originals<***/strong><***/span>

And, that produces this:


Linda Walsh Originals


You can't save it as a .jpeg file and it can only be used where you can add html code, but it's simple, easy and didn't cost you anything.


Posted by Linda Walsh Originals - "Doll Patterns for Grown-up Girls!"

2 comments:

Diane said...

YOU ARE SO AMAZING LINDA I JUST LOVE ALL OF THESE HOW DO I TIPS AND TRICKS. OMG NEVER BEFORE HAS
ANYONE DONE THIS. KEEP EM COMING
MAYBE SOMEDAY WE WILL ALL BE AS
COMPUTER SAAVY AS YOU ARE....XOXO

Linda said...

Diane, I'm so glad you liked the post. When I was first starting out on the web everyone was so helpful to me that I thought I should pass along whatever I've learned. If it helps someone else then it makes my day. Have a great night.

Linda

Post a Comment