- HubPages Tutorials and Community
Easy HTML Code for Creative Pages
Keep Eyes on Your Site with Creative HTML and CSS Code
I'm not one to go crazy adding color and "splash" to a page, but learning a little CSS and HTML code to spice up your content makes it unique and appealing to readers. Here I'll share some of the code tidbits that help me to make professional and appealing pages, here at Squidoo and on my own sites, without blinding my visitors or obscuring what I've written. I'll also point you to more resources for such code.
To start with, I've simply justified the text in this introduction (forced it to line up to straight edges on both sides) by adding < p style = "text-align:justify" > to the beginning--without those spaces, of course--and a < /p > to the end.
Start with Some Basics: Changing Text Color and Size
Once You Know How, It's Easy to Add Anywhere
I purposely chose a very colorful theme for this lens so that I could show you how using contrasting color can really make your text "pop" for your readers. The HTML code for changing your text fits into the code in my introduction for alighing the text on both sides. The "p" part simply tells the browser that you're starting a new paragraph and the "style" requirements allow you to change all sorts of properties for your text and to keep those changes going until you add the "/p" ending.
You simply add your HTML requirements for text-align, color, font-size, font-weight, and line-height (I'll show you how to do that in a minute). If you use those exact phrases (with the hyphens) and a colon you can vary almost every aspect of how your words appear on-screen. Separate the requirements with a semicolon and a space and make sure they're all included between quotation marks.
For this text, I've set the color as #266806 and the font size as 120% of the normal letters.
For this, the color is #732c7a, the font is set at 150% of normal with a weight of bold, and I've added a line height of 1.2em (rather than the default 1.0) to separate the normal line spacing enough so that they are spaced a little wider apart for easier reading.But, you may say, how does the code for that look? Like so:
< p style=" color: #732C7A; font-size: 150%; line-height: 1.2em; font-weight: bold;" >
HTML doesn't care in what order you place the various criteria so you can add one change, say font size, and see whether you need to add a line height change to make it legible or you can add the line height and then the font size, if you know that you'll need to do both.Go Back to the Top
Take the spaces before and after the < and the > out of the HTML and CSS codes posted here, if you want them to work!
Changing Small Portions of Your Text
HTML Code for Bold, Italics, and Highlights
But what if you only want to emphasize a particular portion of your text, as I did with my sneaky highlight earlier? In that case, you'll need to use the < strong > or < em > tags to make your text bold or in italics respectively. You can sneak HTML attributes into these tags with the same "style" language as in paragraph formatting. Just be sure that you remember to "close" your tags with < /strong > or < /em > when you're done or you'll change the text on the entire rest of the page! For the highlight above, I've used the background-color code instead of the font-color HTML. I'll address finding colors to use a little later, but in this instance I simply used "yellow". I wrote:
< strong style="background-color: yellow;" >
and then closed the tag after the text I wished to highlight.
Be careful playing with the size of a small part of your font. If you make it too large on any line other than the first of your paragraph, like this, you'll either overlap your text and make it unreadable or push your lines apart and make the page look uneven and unprofessional. This paragraph is an exaggerated example for effect, but repeatedly using HTML for emphasis in that way will make you look hysterical or simply like someone playing with a new toy.
Remember: if you emphasize everything, nothing stands out. These are all meant for drawing attention to key points and adding a splash of color.Go Back to the Top
Making Text Links Better
Anchor Text and Titles and NoFollow, Oh My!
Making a few of the words in a sentence into a link that takes your reader to a different (but still relevant) page is one of the basics of HTML. It's often the first thing that people learn to do. In its most simple form, a text link is coded as follows:
< a href="URL-HERE">words that link here< /a>
As always, take the spaces out of the example and replace my words with your own. Rather than typing the URL by hand, which opens the door to typos, right click on the address bar at the top of your browser and copy it then paste it where you need it. The words that show up as the link in your finished product are called anchor text and the best use of that space is to describe to your readers where it will take them, in a brief way. If I were linking to my writing blog, for instance, I could simply use a link like One Step Forward to take you there instead of using the words "click here" which doesn't tell Google that my link is relevant.You'll notice that, if you hover over that link, some words pop up to tell you more about it. That's called a TITLE and it's a big feature in web accessibility. You add it to a link as follows:
< a href="URL-HERE" title="Link Description" >words that link here< /a>
You add the title tag just after the URL to which you are pointing your link. When someone hovers over your link or a reader bumps into it that text will tell them what to expect if they follow the link. Simple, right?
Now, in theory Google and other search engines wander over your page and follow each of your links to see that they're relevant and not spam. If your site ranks well a little of your "juice" is passed along to the sites you find worthy of including. (Isn't that a lovely theory?) But sometimes you want to include a link that takes people to a place where they can buy products. That can look spammy to Google so you want a way to tell its little bots not to follow that link. Perhaps unsurprisingly, you use the "nofollow" attribute for that.
< a href="URL-HERE" title="Link Description" rel="nofollow" >words that link here< /a>
Now I can include an affiliate link for someplace like eMusic and tell Google not to follow that link because, even though it's a great product, they have plenty of Google juice and I don't. Wait...no, it's because the link benefits me financially and, even though I'm only using it here for explanation purposes, it might look spammy and is unrelated to my topic. Nofollow essentially says, "Please don't hold this one against me, search engines!"There's one more attribute that changes a link from something that takes someone away from your page to something that opens a new page for them to browse while keeping yours open as well. That is the target attribute, as I've used above. If you click on either of the working links it will open a new browser window instead of redirecting this one. It's used like so:
< a href="URL-HERE" title="Link Description" rel="nofollow" target="_blank" >words that link here< /a>
As you can see, adding attributes to your links is easy and exceedingly useful. This works for images, too, if you insert them just after the URL, so I won't repeat this whole section below.
Where Do You Get CSS and HTML Tips?
There are many places to find the HTML and CSS tips for creating attractive and useful web pages, whether here on Squidoo on on the Internet at large. Please share you favorite resources with other readers.
Where do you find code?
Making Fancy Boxes with HTML
Set Off the Good Stuff with Color!
Let's say you wanted to add a flashy box like this to your text to draw extra attention to something or set it off from the rest of your content.
That's easy enough to do, still using the HTML < p > tag with style elements. In this case, you'll want to add border and padding attributes. The border takes size, color, and solid/dotted/dashed settings and the padding controls how much appears between the border and the lines of text. You can set the padding on each side individually but using one amount means that your text is essentially centered in that border. The HTML code looks like this:
< p style="border: solid 10px #ff6600; padding: 10px" >
That's nice, but what if you wanted to get extra-fancy and have a two-toned border? There's an HTML code for that, too. < p style="padding: 5px; border: ridge 12px red; margin: 0 auto; width: 28em;" > You can change the background color, text alignment, font size, and anything else you like with the same attributes you've already learned to use above and control the width of the box with the cleverly-titled width attribute.
This more-complicated code gets you a pretty red box around the words that you're emphasizing.
The text, border, width, and background color codes allow for an infinite variety of looks. Keep in mind, however, that some color combinations are very difficult to read and a higher contrast between the font and the background will make it easier for people with vision difficulties to see. You want people to be able to read the very words to which you're trying to draw their attention! For instance, this box is terrible and should never be used.
Can you even read the results of this HTML disaster?
While Squidoo automatically places a picture for you in many modules, sometimes you just need to put one of the size and in the location you desire to make your lens more attractive. Naturally, you can use CSS code to achieve that end. For instance, let's say that I wanted to put that picture of Bob Ross on the left instead of the right side, where the default image appears. I've already hosted it at Photobucket and have the URL for the photo. I could simply use the HTML code
to add the picture but that would start the text at the bottom of the photo.Since I want the text to flow around it, I add the following code: < img src=http://img.photobucket.com/albums/v394/legbamel/bob-ross.jpg style="float: left; margin-right: 5px;" />
Bob's a little big, though, and I think I'd rather have him on the right with a bigger space between him and the words. Let's try something a little different. I've added width="100" height="125" to my HTML code just after the URL and before the style attributes to bring him down to size. Then I changed the float to the right and increased the margin to ten pixels instead of 5 (and switched it to the left side of the image). He's a little less overpowering, now, and right where I want him. But what if I wanted you to click on him to go to a different site?
If you click on the imeem logo here, (right click and open it in a new tab or window, so you don't lose your place here and have to re-load) it'll take you to my lens on finding free music on-line, where you can find great new music to enjoy. All I had to do was put the image HTML in the code for my link in place of anchor text, thus: < a href="https://hubpages.com/entertainment/free-legal-music-resources" >
< /a >
What About Those Colors?
How to Find HTML Codes for Colors
There you are, trying to create a classy box for your text or a border for your photograph and you want to get just the right color. What to do? Pick one of these options and get the HTML code for the color you want. It takes some trial and error to get used to how the hexadecimal system works, but you can find plenty of resources for those handy codes on-line.
For a quick overview of HTML and color, try the w3 Schools site. In short, black is six zeroes, white is six f's, and grey can be anything from all 3s to all b's to a nice, light #d0d0d0 or the fours I've used for the section head, here.
For colors between, each two-digit subset assigns a value to the amount of either the red, green, or blue used to make a particular color (in that order). The values run from zero to nine and then from a to f. Think of that f as "full", as in the result is "full" of that particular value. Thus, if you want a very green green, you'd choose 00ff00, as you want no red, all of the green you can get, and no blue. That's too green, though. To tone it down, let's back off toward black a bit from the "full full" designation. Perhaps some nines would work. Ah, that's better.
More Complicated HTML Colors
As you can see, the closer to zero your value for any one digit, the darker that aspect of the color will be. That's great, and you can fiddle around for a hundred years trying to find just the right shade to go with your content. That's fun but time-consuming. Instead, try some tools for getting the color you need quickly. If you use Firefox, you can install Colorzilla, which puts a little eyedropper on the bottom of your browser window. Clicking on that will give you the hex code for any color on your screen when you hover over it, allowing you to match the color of your cousin's eyes or your kitten's tail exactly. If you're loyal to Internet Explorer, try Instant Eyedropper, instead.
Hundreds of designers have dedicated their sites to helping people find colors that work together. I find ColorSchemer one of the easiest to use. Take a look and enter an HTML hex code for the color you found with your eyedropper (or just picked for your page). The software will give you a range of compatible emphasis colors and a table of more subtle options. I chose the #009900 from above, for instance, and it returned some attractive options including this nice raspberry, a color I'd not have thought to use.
For the more advanced color designer, try Color Scheme Designer 3, which lets you specify what types of matches you'd like depending on how varied you'd like your color to be. I again put in the #009900 from above and got a slightly more-red raspberry color and a nice teal accent color to go with it.
I'm always looking for new and uncomplicated ways to make my content look just the way I like it. I'm not a fan of the fancy or flashy, but it you've spotted a mistake or know of an easier or more effective way of doing things, please add it here. I've disabled the HTML in comments so you can code away and others can see what you've written without resorting to my "spaces" technique. Thank you!