How to make a ♥
05-Feb-03
So, here’s a short little beginner’s tutorial for making a ♥ symbol. It’s aimed at novices, so if you already know how to do this (), then you probably don’t need to read on.
First, you need to understand something about HTML. HTML is a mark-up language that basically says “display this thing so that it looks this way” or it means “this thing is a heading– make it look like a heading” (which is actually more “correct,” but most people just experience HTML as the first one– a display formatting language). HTML gives this information to your web browser, and your web browser displays headings the way its been set to display headings. At its most basic, though, HTML is just text.
As with any language that tries to talk to a computer, HTML has to use certain indicators to show the web browser that “yes, this is for you– read this and do what it says.” You are probably already familiar with tags. A tag (like <b>) tells the web browser that the stuff inside the tag is information that the browser needs to look at and do something with (like, display something in bold).
But wait. If a tag always tells the web browser to do something, then why didn’t my <b> tag make everything bold? How did I get it to show up like that?
< and > are considered “special characters” in HTML. If you use them in a web page, you need to use a special code so they will show up as the less-than or greater-than signs. Otherwise, your web browser might interpret the things inside them as HTML code.
Other special characters include all the international symbols and letters, like €.
A special character typically uses this format: &<character_code>; where “<character_code>” is the code for the special character (without brackets). As you can guess, an ampersand (&) in HTML is itself a special character (because it says “this is a special character”). It’s code is “amp.” So to show an ampersand, I have to use: &
When you use a special character, it always starts with a & and it always ends with a ;– there are no spaces in a special character, and there are no < or > symbols either (I just used those in the example to show that it was a placeholder).
So what does all this have to do with ♥s?
Well, ♥ is a special character symbol that was made up for use in web pages. It’s not supported by all web browsers, but it’s a funny little thing you can add to your online valentines if you want to. The character code is “hearts.”* To make a heart in your journal or web page, put the following in: ♥
So, you might be asking yourself right now “But wait– how did she get it to be all red and big like that?”
I used a special tag in HTML to format the color and size of my ♥ symbol. No, it’s not the <FONT> tag– you really should just forget that ever existed. It was a bad idea to begin with.
No. The tag in question is called <span> and it’s a general-purpose tag that you can use for fomatting any in-line element (any element that doesn’t require a line break after it). In this case, my code was: <span style=”color:#FF0033; font-size:large;”>♥</span> The color:#FF0033; part tells the web browser to use red, and the font-size:large; says to make it big. You can take out either one of these if you want to change how the ♥ looks:
<span style=”color:#FF0033; font-size:large;”>♥</span> ♥
<span style=”color:#FF0033;”>♥</span> ♥
<span style=”color:#660099;”>♥</span> ♥
<span style=”font-size:large;”>♥</span> ♥
Further Resources
How did you know what number/letters to use for the color?
What else can I do with the <span> tag?
What are the other special characters in HTML? (different link now)
* Yes, I know. All of the special character codes are either numeric or singular, or at least make sense, except for ♥. Why, you ask? I have no idea– blame Microsoft.