Getting Colour Values from Web Site Templates

Posted on Nov 28, 2007 in Web Site - Design | 1 Comment

Many of us aren’t the greatest Web site designers, or just don’t have time to design one, and because of this we rely on templates that others have created. The only problem with this is we may not understand how the entire Web site is designed with regards to files used and the layout of the site.

One issue that I have recently read about is getting the values for the site colours to use with Google Adsense. The template user wanted to know how to get the colours from the template to blend in the Adsense ads with the site. The problem a user may have is reading the cascading stylesheets that come with a template to find the correct colours. In this post I will show how to retreive a colour from a Web site without look at the cascading stylesheets.


Using an Image Editor

This method may seem long when you read it, but it basically involves taking a screenshot of the Web site, pasting it into an image editor and then retrieving the colour.

In this example I will use Windows Paint and Windows calculator to get the colour. You can use any image editor that allows you to retrieve colours, such as Photoshop or Paint Shop Pro.

To get the colours use the following steps:

  1. Open up your Web browser and navigate to the Web site.
  2. Press ALT+Print Screen to make a copy of the screen. The screen copy will be in memory, so you won’t see anything change.
  3. Click Start->Run and then enter mspaint.exe in the Run dialog. This will open up Windows Paint.
  4. In Paint, press CTRL+V to paste the screen copy from memory into the document. You should now see the screen in Windows Paint.
  5. From the toolbar on the left, click the eyedropper icon, also called Pick Color and then click the colour you want to find the value for.
  6. Once you have clicked the colour, click Colors and then Edit Colors from the menu at the top. You should now see the Edit Colors dialog box on the screen.
  7. Click the Define Custom Colors button to expand that dialog box.
  8. The colour you clicked with the eyedropper will be the selected colour in the dialog. Write down the three numbers beside Red, Green, and Blue labels. For the Web, we will be converting those three numbers to hexadecimal.
  9. Click Start->Run and then type calc.exe in the Run dialog box.
  10. With Windows calculator open, click View and then Scientific to get more advanced calculator functions.
  11. Near the upper-left corner of the calculator you will see four option buttons: Hex, Dec, Oct, Bin. These are the differernt number systems. We will focus on Hex (hexadecimal) and Dec (decimal) for now. Ensure that Dec is selected.
  12. Typein the Red value that you retrieved from Windows Paint in the calculator, and then click the Hex option. The value should now be converted to hexadecimal, which you should now record somewhere. If the number is not two characters in length, then append a leading zero to the value.
  13. Click the Dec option and then enter the Green value, and then select the Hex option. Write down that value beside the red value.
  14. Repeat the previous step for the Blue value and write that value down next to the green value.

    15. For example, if you had a value of Red=155, Green=98, and Blue = 201, then your new number should be 9B62C9.

  15. The number you should end up with will be 6 characters in length. This is the hexadecimal number that represents the colour you selected on your Web site. You can now use this number in Google Adsense, or any other place and the colour will match your Web site.

Summary

This post explained how to retrieve a colour value from a Web site without reading the cascading stylesheets. Windows Paint was used to retrieve the Red, Green, and Blue values of the colour, and Windows Calculator was then used to convert the three numbers to hexadecimal. Using this method, you can easily find out colour values of an colour on any Web site.

Introduction to HTML

Posted on Oct 12, 2007 in Web Site, Web Site - Design | No Comments

I recently wrote two posts regarding designing Web sites: Designing Web Pages: Tables or CSS and Introduction to Cascading Stylesheets (CSS). The information presented in both of those articles may be advanced for those just starting out with creating Web pages.

I decided to create this post to provide an introduction to HTML and create a Web page. This post will create a very simple Web page that you can then display in a Web browser.


What is HTML?

Everyone who is online has heard of HTML, but may not know exactly what it is or how it is used on the Internet. HTML is an acronym for HyperText Markup Language. It is the primary language of Web pages. It is not a programming language, such as C or Visual Basic, as it is not compiled into a program. It is simply a markup language.

A markup language is used to display text and other information about the text. The other information about the text can include anything from size, font to weight and position. For examples of the different ways the text can be changed simply look at this blog and you’ll notice how the text can be changed.

Other elements can also be included in a HTML document such as images, sounds, and videos. For the purpose of this post, we’ll keep it simple and focus on the text of a Web page.

How can you control the look of the text on a Web page? Through the use of what are known as tags.

HTML Tags

HTML uses tags to define areas of a Web page. Tags usually come in pairs: an opening and closing tag. The tags change anything that is placed between them. There are many standard tags that make up the HTML language, and as you make Web pages you will begin to known and understand each tag.

As mentioned, a tag pairing contains both an opening and closing tag. For example, to apply bold to text you will use the tag pair: <b> </b>. You will notice that the closing tag contains a / (slash) character. This is standard for all closing tags. Any text placed between those two bold tags will appear bold within a Web browser.

The bold tag is just one of many standard tags used to create a HTML Web page. It is beyond the scope of this post to list them all, but you will see other tags in the example below.

Create a Simple Web Page

Now that you have a basic understanding of what HTML is, it is time now for an example. For this example you will need a simple text editor, such as Windows Notepad. The editor doesn’t matter, so use whatever you are comfortable with.

  1. Create new directory somewhere on your hard drive called htmlex. We will save the HTML file in this directory.
  2. Open up your text editor.
  3. Copy (or type) the following into the editor:
    <html>
    <head>
    </head>
    <body>
    <p>Hello world!</p>
    </body>
    </html>
  4. Save the file to the directory created in step 1. Name the new file test1.htm.
  5. Open up Windows Explorer and navigate to the directory contain your HTML file.
  6. Double-click the test1.htm file to open it up in your preferred Web browser.

    7. You should now see the message Hello world! in your browser. Congratulations! You just created a Web page.

What exactly are the tags in your HTML document? Lets take a look at what comprises the Web page.

Elements of the Web Page

In the example above you will notice a series of tags. The first tag in the Web page is the html tag. This tells the browser that the markup language is HTML and your entire Web page will be located within this tag.

The next tag is the head tag. In our example, the head tag is empty (nothing between the opening and closing tag), but for most of Web pages such things as stylesheets, the title and meta tags are located here.

The body tag is next and contains the actual body of your Web page. What you see displayed in your Web browser is located within this tag.

The final tag in our example is the p tag, or paragraph tag. This identifies a paragraph of text. If you wish to bold the text in our example, then include the b tag pair between the p tag pair as such:

<p> <b>Hello world! </b></p>

If you do the above, save your file and refresh your Web browser window, you will now notice that the text is now bold. If you were to move the closing b tag between Hello and world you will now only see the word Hello in bold. Remember that the tags change anything that are between its opening and closing tags.

Summary

Creating Web pages using HTML is very easy too do and requires nothing more than a text editor. The HTML markup language may seem complex at first, but the more you create Web pages, the more your will learn. HTML is meant to be easy to learn and use and it can be used to apply any look to your Web site. There are many more tags you can use to create great looking Web pages than those shown in this post.

Web Site Design Tips

Posted on Oct 1, 2007 in Web Site, Web Site - Design | No Comments

Like many of you, I have been surfing the Web for many years and have visited hundreds of Web sites. I have found Web sites through search engines, e-mails, and other Web sites. Many of these Web sites have a great layout and provide very valuable, useful information. Others are more complex to navigate and don’t really help with anything.

In this post I will provide several points that I think makes a Web site great. Many of these points are common sense, and can easily be implemented.


Points to Keep in Mind

  1. Easy Navigation – This is a very important point, and one that will determine whether I stay and visit more pages. It is important to ensure that your visitors can easily find their way around your site. This can be a simple menu list on the left or right side of the Web page, with the content right next to it. You can even have a menubar at the top of the Web page for more important categories.
  2. Readable Text – Many sites now try to use a very small font size. The author of the Web site may be able to easily read the text, but many of the visitors may have trouble reading small fonts. I try not to go below a 10pt font equivalent on my Web pages. I also try to find a common font that is easy to read such as an Arial or Verdana font. If you use CSS, then you can set the font family and size in one file that can be easily changed if you choose.
  3. Appealing Colours – I am not to keen on Web sites that have a bright pink or yellow background. I find it hard to view the Web page, let alone read the content. If I want a bright background, then I usually choose white and have black text. This is what most people are probably used to. I then add colours to my Web pages through the use of images and borders.
  4. Small Image Sizes – I hate Web sites that have large images that take some time to download. I have a broadband Internet connection, but there are still sites that make take some time to download because of a large image. You should try to compress your images as much as possible to reduce the size of the images.

  5. Reduce Page Size – This point goes hand-in-hand with the previous point. I like to write long posts in this blog, but if you can try to keep your page sizes to a minimum. Including the previous point you should try to break large articles into several pages, reduce the Javascript, CSS and HTML sizes. Create separate Javascript and CSS files that are included in your HTML pages, and remove excessive spaces, tabs and comments from your HTML.
  6. Flash Introduction – This is a worthless and pointless page. I have seen sites that display some flash animation when you visit the Web site. If the there is a skip intro button, I usually just click that to avoid seeing the introduction.
  7. Too Much Advertising – I don’t mind if people place ads on their Web sites, but sometimes they can go overboard. I have visited Web sites that have ads on what seems like every inch of a Web page. Sometimes there is so many ads, that I have trouble finding the actual page content.
  8. Write Unique Content – This is probably the most important point when creating a Web site, especially for generating traffic. Spend the time to write you own unique content instead of copying someone else’s content. There are sites out there have the same content as many other Web sites. I like to read unique content that provides more and different information than other sites.
  9. Ask for Opinions – Join Web sites that have the same niche as yours and then ask others to visit your Web site and provide an opinion. This can help you determine what you need to change.

Summary

This post provided many points that you can apply to your Web site to make your visitors enjoy their visit. As always, your Web site will probably change over a period of time since no Web site keeps the same look over many years.

Introduction to Cascading Stylesheets (CSS)

Posted on Sep 26, 2007 in Web Site, Web Site - Design | 2 Comments

In a previous post title Designing Web Pages: Tables or CSS, I briefly talked about using CSS to layout the content of a Web page. I didn’t go into detail about how CSS files are used in conjunction with Web pages or even how they are created.

In this post I will provide a simple introduction to cascading stylesheets and how you can link them to an HTML file.


Overview of a CSS file

Before discussing how to create a CSS file, it is important to provide a quick overview on stylesheets. Cascading stylesheets (CSS) are nothing more than simple text files that define the look of a Web page. Before CSS files, you would define fonts and colours within your HTML file. When you use CSS files, those definitions would be stored in a CSS file and removed from the HTML file. You can then link a CSS file, or even multiple CSS files to a single HTML file.

Using CSS files to define the look of your Web site has a few benefits. The first is that you can now change the look of your entire Web site by simply changing one CSS file as opposed to multiple HTML files. The second advantage to using CSS files is download speed. When you have all your definitions within your HTML files, it makes the files much larger, which takes more time to download. By moving the definitions to a CSS file, visitors would request a HTML file, which would also download the linked CSS file. Now any subsequent pages that use that CSS file would now read it from the visitor’s cache instead of re-downloading the CSS file again. Your HTML files will also be much smaller as they no longer contain the definitions.

Creating a CSS File – An Example

Let’s use a quick example to show how easy it is to create and link a CSS file to a HTML file. To follow this example you will need only a text editor such as Windows Notepad.

  1. Create a directory on your local computer that will contain the CSS and HTML files.
  2. Open your text editor and type the following (include the semicolons):
    3. p
    {
    font-family: Arial;
    font-size: 20pt;
    }

    This will define any paragraph (the p tag) as using the Arial font with a font size of 20pt.

  3. Now save the file as site-style.css into the directory created in step 1.
  4. Create a new text file and type in the following:
    5. <html>
    <head>
    <link href=”site-style.css” type=”text/css” rel=”stylesheet”>
    </head>
    <body>
    <p>This is a test Web page for CSS files.</p>
    </body>
    </html>

    All this text file does is display a message on the Web page. The important part in the HTML is the link definition in the head section. This tells the browser to use the file defined in the href tag. That file is of type text/css and it is a stylesheet. This entire line is how a CSS file is linked to a HTML file.

  5. Save the new file as csstest.htm in the same directory as the CSS file.
  6. Open the csstest.htm into your Web browser.

    7. What you should now notice is that the message on the Web page is now displayed in the Arial font and has a size of 20pt. You should try changing the font family and size in the site-style.css file and refresh your Web page. You will notice that the message text changes.

    You can also try using other HTML tags such as the heading tags (H1-H6), or create a second Web page that links to your CSS. You will then notice that as you change your CSS file both Web pages change.

Summary

This post provided a quick overview on CSS files and a very simple example of using CSS files but you can see how they can be very useful. There are entire Web sites on the Internet dedicated to learning CSS including all the various definitions you can use. If you want to make your Web site easier to manage and maintain, I suggest you learn more about CSS files.

Designing Web Pages: Tables or CSS

Posted on Sep 21, 2007 in Blogging, Web Site, Web Site - Design | No Comments

There is some debate recently about the best method to design and layout a Web page. Traditionally, HMTL tables have been used to handle the layout of a Web page. Today, however, a new layout method is gaining more popularity which uses CSS (Cascading Stylesheets).

Which method is the best way of designing a Web page? I will explain both methods in this post and provide my own opinion. This post, however, won’t explain how to create the HTML files as I’ll save that for a future post.


Using HTML Tables

If you view the source of many Web pages on the Internet, you will probably see the entire layout of the page constructed using tables. Tables have been the main method of providing the layout of a Web page since they were first introduced. They make it easy to provide a header, footer, and content sections to a page.

Recently, however, many Web designers have been declaring that tables should only be used to display tabular data. This makes sense as many applications, such as Excel and database GUIs have a structured table look. The Web designers also state that the look and feel of a Web page should be separated from the HTML Web page.

The advantage to using tables is that they are easy to use. You define a table (<tabl>), then a row (<tr>) and finally a cell (<td>). You can span rows across columns and columns across rows to make cells larger. Formatting a table can be accomplished in the HTML code itself, or a CSS file.

Another advantage to tables is that all browsers in use today support tables. This means that a visitor won’t get a mangled Web page when it is viewed in their browser.

A disadvantage of using tables is they need to download the entire HTML first before they are rendered. This is because the browser can’t be sure how the table will look until the entire HTML can be rendered. As more people switch to broadband Internet, this will probably be a moot point.

I have designed many Web pages using tables, and have had no problems. I have, however, started to design Web pages using the new method: straight CSS with no tables.

Using CSS

The second method of laying out a Web page is using pure CSS and not tables. This method has been gaining popularity, especially among the processional Web designers.

So how exactly is CSS used to layout a Web page? The answer: through the use of division tags (<div>). These tags are used to divide your Web page into various sections. One large section will contain all the sub-sections, which is usually called the container. Within the container you may have header, footer, navigation and content sections. The look and positioning of these sections is defined by the CSS.

The CSS as I mentioned earlier is an acronym for Cascading Stylesheets. These are text files placed on a Web server that are downloaded along with the HTML file. A CSS file contains definitions, known as styles, which provide the look and feel of your Web site. The best part about using CSS files is that you only need to change one file when you want to change the look of your entire site. For those that manage thousands of Web pages, this can be a huge time saver.

One disadvantage to using CSS to layout your Web pages is that not all Web browsers support all the CSS style tags. Your Web pages may not display nicely to visitors on older Web browser. With each new version of a browser, this becomes more of a moot point.

I currently use the CSS method for Technically Easy, which is also my first site designed in this manner.

The Verdict

I usually call the last section in my posts "Summary" but this time I think I’ll provide my verdict, or opinion. I have used both methods to design Web pages, and have seen the advantages and disadvantages to both.

I decided to go with CSS for my new sites since that looks like the future of Web pages. I have accepted the risk that for many visitors on older browsers, the Web pages may not display correctly. I have also examined my Web site statistics and realized that for the most part my visitors are using newer browsers. I have tested my CSS site on IE 6.0+, Firefox 2.0+ and Opera 9.0+, and haven’t had any problems.

If you are a beginner to Web page designing, I suggest you use tables since they are easier to work with. Once you become familiar with HTML and CSS, you can then try using CSS for the layout, if you choose. I do recommend, however, that you learn CSS quickly and apply that to your Web pages as it can make changing the look of your entire site easier.

In the end, I don’t think it really matters which method you choose, as no one cares what your Web page source looks like. All that matters is that you Web pages display correctly.

Page 2 of 212