According to the most recent research, it is estimated that there are now over ONE TRILLION web pages on the Internet today. Both Google and Microsoft confirm this with Google stating that it already has those trillion+ web pages indexed (that’s gotta eat up a lot of storage space.)

Putting this into perspective: it means that there are more web pages than there are humans living on this planet (world population is estimated to be approximately 6.7 billion). Taking it even further with a little bit of elementary arithmetic, it’s the same as saying that each one of us bipedal, opposable-thumbed, conscious individuals has about 150 web pages of content online.

If you spent only one minute to read each web page in existence today, it would take you about 31,000 years of non-stop reading to get to each one; no sleeping and no bathroom breaks (unless you’re using wireless laptop, netbook, or iPhone )

Is it worth it?

After stumbling across these statistics today only one thought bounces around the gray matter of my mind: just how much of those trillion+ web pages are worth reading? Honestly, if I could live to be 31,040 years old (my 40th birthday is next month) would it be worth my time to try to read it all?

The answer is, not surprisingly, no (which is all well and good, since I have no desire to live to be 31,040 years old.)

The Internet junkyard

The World Wide Web is filled with junk. There are countless websites overflowing with outdated and irrelevant information, abandoned websites and blogs litter the once neat and tidy Internet landscape, and websites build by people who truly believe that they can make ‘easy money’ online are troublesome obstacles to getting at the really helpful information.

Don’t get me wrong. There are a lot of great products on the Internet. But there are many, many more so-called “review websites” whose only goal is to encourage you to buy the product it is promoting (so the website owner can earn a commission.) This is why I prefer review websites where the product’s quality rating is determined by visitors who vote on the product.

What do you think?

Do you ever ponder, as I sometimes do, just how many websites on the Internet are nothing but junk? A few? Some of them? All of them?

To help get a feel for what NWD readers think, I’ve created a little poll. You can find it here to cast your vote:

In this post we’ll take a look at line breaks, what is the HTML tag for one, and when to and not to use them.

(By the way, if this is your first time visiting Newbie Website Design, then I encourage you to check out the My First Website series to learn how to build websites the right way.)

Let’s get learn more about HTML line breaks, shall we?

What is a line break?

A line break is a special HTML tag that will force the very next the next character (or sentence or paragraph) to appear on a new line right below the one above. It is similar to pressing the “return” key when using a word processor.

It isn’t gonna work

If you’re using a text editing program like Notepad (Windows) or TextEdit (Mac) to write the HTML for your website, then pressing the return key in order to create line breaks isn’t going to work. You could press the return key a hundred times and you still won’t see those line breaks when you view your website with a browser. To get the desired line-breaking space that you want you either have to use the special HTML line break code or use CSS to do it for you.

The HTML for a line break

Here’s the HTML tag you need in order to make a line break:

Pretty simple, huh? Just plop this where you want a line break and you’re done!

Or are you…

The wrong way to do line breaks

Now, before you go adding the HTML line break code all over your layout, just remember this: if you ever decide to change the design of your website, then you may have to go through all of your pages and do some nasty hunt and replace.

For example:

Let’s say that you added two line breaks after all of the <h1> heading tags on your website. Later, if you decide that you only want one line break after the heading tags, then you have to erase all of the extra HTML line break code from every page. And if you have added line breaks after subheadings, paragraphs, and other layout elements, then let the editing nightmare begin!

The better way to do line breaks

Instead of relying on HTML for your line breaks, let an external CSS file handle the task. You won’t be using the <br /> tag. In its place you’ll be using a padding-bottom to get the job done right. By using CSS in an external file, you can control the height of this “padding” all throughout your website from one location.

(NOTE: to learn more about what an external CSS file is and how to make one, I strongly suggest going through the My First Website series here on Newbie Website Design. Post #5 talks specifically about how to add an external CSS file. )

The “non line break” line break

Okay. Okay. So we’re not technically going to be adjusting the line breaks. But what we are going to do is control how much white space occurs after an element such as a heading or a paragraph. We do this by using padding-bottom in our CSS. It’s easy. Take a look:

This CSS simply tells the browser that all <h1> headings will have an extra 20 pixels of padding below it — right after the closing </h1> tag. Any text that follows the heading will be pushed down by 20 pixels. You can do this after paragraphs, too:

The p represents the paragraph tags in your HTML. After a closing paragraph tag (</p>) the very next element — be it a subheading or another paragraph — is pushed down 15 pixels.

When to use an HTML line break

Personally, there are only two times when I use an actual HTML line break in my designs…

#1: One-shot deals

If I need a little extra space in a design and I know 100% for certain that it won’t be repeated on other web pages I’ll use the <br /> tag. Before you add an HTML line break, be certain that it will never become a repeated part of every page of your layout.

#2: Proper text layout

There are times when you just have to make sure that the text of your layout flows correctly. Since all browsers won’t display your text exactly the same way, you can use HTML line breaks to ensure a clean look. A good example of this is when you have a centered heading that contains a lot of text. For example, this looks just horrible:

The word “system” hangs like deadweight at the bottom — stranded and all alone. But with a few line breaks we can make it look much, much better:

Here’s the code (keep your eyes peeled for the HTML line break code):

Conclusion

Line breaks aren’t that hard to create with HTML. Because of that, they are extremely easy to add to a design. The downside is that by using them too much you might make updating or altering your website’s design and layout a major pain down the road. Start off right by adjusting the padding-bottom in an external CSS file and all future headaches will never cross your furrowed brow.

In this post, I’ll clear up exactly what web safe and HTML colors are and what exactly are “hex colors” (a.k.a. hexadecimal colors).

So put down your voodoo dolls and let’s get into it!

What are web safe html colors?

Back in the day when not everyone had monitors that could display millions of colors, a consensus was made as to which colors should be supported in browsers. In total, they came to 216 colors. By using these colors (called web safe colors) designers could be sure that there websites would look the same on all computers, all browsers, and all operating systems.

Nowadays, there really isn’t much of a need for web safe colors, but it still doesn’t hurt to use them for background color and text color. Although, you will need to understand the hex (hexadecimal) numbering system when you create your CSS file since CSS uses hexadecimal numbers for color.

What are hex (hexadecimal) numbers?

First, let me relieve your boggled mind by saying that you really don’t need to know how to count in hex (hexadecimal) in order to get different colors on your web pages. There are many ways to get the code (more on that in a bit.) But for the inquisitive mind, here is the answer to the above question:

Hexadecimal numbers are made from 10 digits (0 1 2 3 4 5 6 7 8 9) and these six letters: A B C D E F. They are combined together to make a 6-digit code that represents a color. (Hence the name “hex” or “hexadecimal”… which means “6″.) Here are some examples:

#000000 (black color)
#FF0000 (red)
#00FF00 (green)
#0000FF (blue)
#FFFFFF (white)

Getting those nasty-looking hex color codes

If you use Photoshop, then you can find the hex color codes by looking on the lower right-hand corner of the color picker window (NOTE: your color picker in Photoshop may look different depending on your settings):

If you’d like to lock Photoshop into using only the web safe html colors, then check the box in the lower left-hand corner. Like this:

If you don’t have Photoshop (or don’t need to use it when you’re just hand-coding a website) then there are many free software programs for both Mac and Windows that you can download from the Internet.

Web safe html color chart

No post on web safe colors would be complete without a chart of HTML color codes. So, here it is:

In this post, I’d like to clear up the confusion and offer some solid “web font” advice to help make choosing your website fonts easier (and to prevent premature balding as well.)

Let’s begin with a little background information:

Text vs. images

The first thing you need to know is that you can safely use any font on a website provided that it is part of an image. How can you tell the difference? Easy: if you can use your mouse to select individual words or even letters of the text your see on a website, then what you have is pure text. Below is an example:

You can easily select this text.

But below is an image that contains text. You can’t select individual words or letters because they are part of an image:





The font used in the image above is called “Moderna” — and you probably don’t have it on your computer. But since it’s used in an image, you can see it just as I do.

Which brings me to the next point:

If they ain’t got it, they won’t see it

So, you just downloaded the coolest grunge font from your favorite free site. You then decided to make all of the main headings (<h1> </h1> tags) on your website this font. Awesome! But when showing your masterpiece of website creativity to your friend at his house, your eyes widen in shock. “Where is my font?!”

If you read the post titled You actually DON’T visit websites then you’d know that, in truth, websites come to you. And if you don’t have a font installed on your computer that a designer used for pure text on his website, then you won’t see that font. Instead, your browser will replace it with some other font that is on your computer.

Common fonts for websites

Since not everyone is using the same operating system, it’s actually a little challenging to prepare a list of web safe fonts that you can use as pure text on your websites. Some people use Windows Vista or Mac OS X. Others use Linux. And others are still using older versions like Windows 98 or Mac OS 8! So to keep things safe, here is a list of the most common, standard fonts for websites that even people using ancient operating systems can see:

• Arial
• Courier New
• Georgia
• Helvetica
• Times New Roman
• Trebuchet MS
• Verdana
• Webdings

Here’s an image of what they look like:

I realize that this is a pretty short list, but remember that these fonts are to be used as pure text and not as logos or other fancy website design elements.

If you’re sure that most of your website visitors are using more recent operating systems, then you can also add these common website fonts to the list:

• Andale Mono
• Arial Black
• Century Gothic
• Comic Sans MS
• Impact
• Tahoma
• Zapf Dingbats

Here’s an image of what they look like:

(There are a few more, but I’m the kind of website designer who prefers to use fonts that everyone can see.)

Final thoughts

In answer to the question “What are the best fonts for web design?” I would recommend for pure text that you stick with the most common fonts in the first list above. This will ensure that everyone visiting your site can see it the way you intend it to be seen. For your website logo, navigation, and other website design elements, you can use any font you want as long as it’s part of an image.

Under normal conditions, one usually cannot tell the difference between a vector and a bitmap image. It’s only upon closer inspection that you can actually see those differences. But more importantly, it’s what vector images and bitmap (rasterized) images are that will allow you to use them correctly in graphic design.

Bitmap (rasterized) images

The data of a bitmap image (a.k.a. rasterized image) is saved using a “grid system”. Each and every pixel in a bitmap image has a location on an X/Y coordinate system:

In addition, the color value at each pixel location is also saved. Because of this, bitmap files can be extremely large. Bitmap images are perfect for photographs since all of the color data is accurately saved.

Here are some common bitmap file extensions:

• BMP
• GIF
• JPG, JPEG
• PNG
• PICT (Macintosh)
• PCX
• TIFF
• PSD (Adobe Photoshop)

Vector images

The data of a vector image is saved using geometrical primitives such as points, lines, curves, and shapes or polygons, which are all based on mathematical equations. Because of this, vector image files are much smaller than bitmap image files.

The downside to vector images is that they are horrible for photographs, since much of the detail is lost. Vector images are best for clipart and logos. (Sorry for not having an example of a vector image, but it’s hard to display an image of a bunch of mathematical equations! )

Here are some common vector image file extensions:

• AI (Adobe Illustrator)
• EPS (Encapsulated PostScript)
• CDR (CorelDRAW)
• CGM (Computer Graphics Metafile)
• WMF (Windows Metafile)
• SWF (Shockwave Flash)

Resizing bitmap images

Take a look at the following bitmap image:

Now, if we try to enlarge this bitmap image, we’ll get this result (it’s only a partial image):

When you enlarge a bitmap image all you’ll get are jagged lines — making bitmap images a minor headache to resize (see the post In Photoshop, go from big to small for some tips on how to decrease the head-throbbing.)

Resizing vector images

On the other hand, vector images — being based solely on mathematical equations — can be resized as much or as little as you like without losing any detail:

Final thoughts

If you are designing for the web, then you will have to use some form of bitmap image (JPG, GIF, or PNG) in your final draft. But during the design process, you are free to use vector images until they are ready for the web. Photoshop has the ability to “rasterize” a vector image (changing a vector image to a bitmap image) by right clicking on a vector layer and choosing “Rasterize Layer” from the menu.

Instead of making you search the Internet to find out how to write Wordpress smilies (emoticons), you can now find them right here:

Of course, if you are not following along in the series you’ll still need to know what an HTML attribute, an HTML element, and an HTML tag are. Without this knowledge, trying to understand the other lessons and tutorials here on NWD will just make your head spin in a very unpleasant and slightly nauseating way.

Let’s begin:

What is an HTML Tag?

HTML tags are used to tell a browser how to display text, images, forms, and other things that you see on a website. All HTML tags have an opening and a closing tag. These two tell the browser when to begin and end the desired effect. For example: links (which is what you see in the image below), bold, italics, header text, paragraph text, and so on.

What is an HTML Attribute?

HTML attribute gives a little extra information to the tag. In the image below, the HTML attribute supplies the anchor tag (the tag used to make a link on a website) with the URL where you want the link to go to. Some tags don’t get any attributes. The <strong> tag (makes text bold) and the <em> tag (makes text italic) are two examples.

What is an HTML Element?

An HTML element is simply the whole block of text from the opening tag to the closing tag.

Your homework

Go to any website and right click anywhere on the page (but not on an image.) In the context menu that appears choose “View Page Source”. This will allow you to see the source code for that web page. Then, scan through the code and try to spot the different opening tags and closing tags, any attributes, and look for the larger blocks that make up the full HTML element.

(You can read more about HTML here.)

In this post, you’ll learn exactly how to classify each type of font into the 7 common font categories. Without this knowledge you’ll not only have difficulty mixing and matching the different types of fonts into your website or other design projects, but also will create designs that are almost painful to the eyes (and we don’t want that!)

Here are the 7 common font categories:

• Oldstyle
• Modern
• Slab Serif
• Sans Serif
• Script
• Decorative
• Dingbats

Let’s look at some detailed examples of each so you can learn how to quickly and easily classify the different types of fonts.

Oldstyle

Oldstyle fonts are actually the oldest kind of typeface (font style). Their main feature is their use of sarifs — those little “flags” that you can see on the lowercase letters. You often see this font used in printed material such as novels, magazines, and newspapers.

Modern

Popular font styles change with the times just like hairdos, fashion, and Starbuck’s coffee flavors. The Modern typeface was meant to replace the out-dated look of the Oldstyle typeface with a newer, younger, and more “hip” image — well… hip for the 1700s.

Slab Serif

As time progressed a new concept emerged: advertising! Yep, advertising. But not the TV or Internet type. The kind of advertising I’m talking about is large posters, billboards, and the like. The typeface on these needed to be easily read from far away. And so, enter the slab serif typeface:

Sans Serif

The word “sans” means “without” (it’s French) and as the name implies, sans serif fonts have no serifs. Even though this typeface was created before the computer age, it is one of the best fonts to use for the content (the main text) on a website. Its value comes from the fact that it is very easy to read on a computer monitor.

Script

“Script” or “handwritten” fonts are easy to spot and come in many different varieties. The dangerous part of script fonts is that they can dominate a design. That being so, use them sparingly in your designs.

Decorative

Decorative fonts are very distinctive. They are great for expressing different moods in your designs: excitement, fun, pleasure, darkness, gloom, and many others. Just like Script fonts, they should be used sparingly in a design (logos are the best place to use these.)

Dingbats

Dingbats (a.k.a. ornaments or wingdings) are fonts that contain no letters, only pictures. These little guys are great for making logos, adding decorations next to headings and sub-headings, or to spice up a design. A word of caution: while most Dingbat designers don’t care too much if you use their creation as a logo for your website, the DO mind if you try to copyright your logo.

Final thoughts:

In the computer age fonts have advanced to a whole new level. The different types of fonts available is staggering. Some you can get at a price, but many are free to download. By simply typing in “free fonts” into your favorite search engine you can literally spend hours and hours grabbing more fonts than you could store on your computer.

In future posts, I’ll show you exactly how to mix and match the different types of fonts to create stunning, eye-catching designs.