Home < Tips <
Welcome To Our Web Design Tips Page
This page contains tips on designing Web Pages. Click on top to come back here from the tips.

For tips on browsing web pages visit the Web Browsing section of our PC Tips page.

Web Site Building
If you're just getting started building Web pages, you may like to look at a good tutorial. We ran across one we like recently at the Cleveland State University Library site. This tutorial, located at the link below this tip, takes you through all the basic steps of building a Web page.
Click here for this Web page tutorial!

Return to Top.

What's In A Name?
Most Web servers have what is called a default filename. This is the file that is displayed when a visitor types just a site's domain name as its URL, for example, www.geocities.com/daleandernie. In this situation, the Web browser will display the default page, probably index.html or default.html, if it exists. So, typing www.geocities.com/daleandernie will have the same result as typing www.geocities.com/daleandernie/index.html. As you can see, it's quicker and easier for a visitor to type just the domain name and omit the filename.
Why is it important to have your home page named using this default name and to also include a file with this name in any folder you don't want your visitor to have access to?
If you don't have a file named with this default name and if a visitor types your domain name and no filename (or the domain name and folder name and no filename), shey'll see a selectable index of all of the files stored in the current folder. Apart from looking unprofessional, this also gives her direct access to many files you may not want her to see. If a file with the default filename exists in the folder, she won't be able to access this file list.

Return to Top.

Coloring A Scroll Bar
We dragged today's tip from out of our cool tricks collection -- here's a technique for coloring the scroll bars on the IE browser window (it doesn't work in Netscape but it doesn't break the page either). You can do this in a single color or a kaleidoscope of colors. Today we'll look at the single color method that uses a style sheet. To begin, determine which color to use. You can use a hexadecimal number representing the RGB color number or one of the colors that are referable by name, for example, salmon. Add this code between a set of style tags in the head of your document:
  body {scrollbar-base-color:salmon;}
View the page and, provided the browser is required to display scrollbars, you'll see salmon-colored ones in the IE browser window.

Return to Top.

Kaleidoscope Scrollbars
In a previous tip I showed you how to create a single color scroll bar for your Internet Explorer browser window. Today I'll show you a cut-and-paste technique for adding multicolor effects. The cut-and-paste code is on the Microsoft Web site (link below). Here you'll find a series of colors you can choose from to set a range of scroll bar elements. Make your selection then copy and paste the resulting code from the right of the page into your own page. The code works only in Internet Explorer so you'll have to use this browser to work from. Click here to link to the Microsoft Web site.
Return to Top.

Restricting Access To A Website
How can I password-protect a Web site that resides on a Unix server?
You'll need to create two Unix-specific files, .htaccess and .htpasswd. When a visitor's browser accesses the default entry page in the directory where the .htaccess file is located, an authorization dialog opens. The user name and password are checked against the .htpasswd file associated with that particular .htaccess file. If the user name and password combination matches a combination stored in .htpasswd, the visitor gains access to the Web pages in that directory and its subdirectories� at least until another .htaccess file is encountered.
The .htaccess file is a text file. You can add it by telneting in to your Unix account and using a text editor such as PICO, or you can create the file locally with, say, Notepad, and FTP it into the appropriate directory of your account. If you're used to working with Notepad, however, bear in mind that the filename begins with a dot (.). Notepad will automatically add the .txt extension to the text. You can remove the extension either on your local system or by renaming the file once it's on the Unix machine.
If you want to protect your entire site, place .htaccess in your site's root directory. If you want to protect only a portion of the site, place the file in the topmost subdirectory where you want the protection to occur and provide a hyperlink to that directory from the public area of your Web.
You should create .htpassword before .htaccess, because you'll need to insert .htpassword's location into .htaccess. To create the .htpassword file, telnet into your Unix account, go into the directory where you wish to place the file, and type the following command:
htpasswd -c .htpasswd username
This command will simultaneously build the .htpasswd file and populate it with its first user name. You'll be asked for a password for that user name and then asked to retype the password for confirmation. You can add additional users by reentering the same directory and typing the command with a new user name but without the �c switch.
To password-protect your site, create an .htaccess file consisting of the lines
AuthUserFile /users/username/
webdirectory/public/.htpasswd
AuthGroupFile /dev/null
AuthName "Username and password required"
AuthType Basic
 
<Limit GET POST>
require valid-user
</Limit>
The first line contains the full path to the directory containing the .htpasswd file. The second line refers to a file you can make if you wish to create user groups, which you will want to do if you frequently add usernames. In this case, however, the /dev/null value is standard Unix for "does not exist." The text shown in the quotes on the AuthName line is the text that will appear in the authentication dialog box the visitor will see. The fourth line establishes basic HTTP authentication.
With the .htaccess and .htpasswd files created, load your browser and type in the URL for the directory in which the .htaccess file resides. Type one of your newly created user name/password combinations in the authentication dialog, and you'll be allowed into the site.
There's a great deal more you can do with the .htaccess file. For more on its capabilities, see http://hoohoo.ncsa.uiuc.edu/
docs/tutorials/user.html
.

Return to Top.

When Dingbats Are The Answer
Dingbats are infinitely sizeable so they don't get the "jaggies" if you use them at a large size. Webdings is a dingbat font distributed with Windows and is available on the Mac so it's a font you can use on your Web pages with the reasonable expectation that your visitors will be able to view the images.
Return to Top.

More On Dingbats #2
In a previous tip we talked about Dingbat fonts and, in particular, Webdings. However, while this font contains some handy Web symbols, it is far from all that is available. On your computer, you may find Wingdings 1, 2, and 3 and Zapf Dingbats.
Return to Top.

Dingbats: Viewing Fonts
In previous tips we've discussed Dingbat fonts and how to obtain them, but we haven't talked too much about how to see what the font files actually contain. If you're using Windows, choose Start, Programs, Accessories, System Tools, Character map. Choose the font to view and you can see the characters that make up the font. On the Mac, click the Apple menu and choose Key Caps. From the Fonts menu, choose the font to view then press combinations of the Shift, Control, Option, Function and Apple keys to see the font's characters on the keyboard display.
Return to Top.

Dingbats: The Final Word
In previous tips we've been discussing Dingbat fonts -- both those that are in wide use (like Webdings) that you can freely use on your pages and other specialty Dingbat fonts. Today we'll discuss using these specialty fonts that you cannot assume that your visitors have access to. Because of this you shouldn't use these characters as text and, instead, you should create them as images. To do this, use your graphics software to insert a text object and type the character to use. Now save the resulting image as a GIF or JPEG image so you can use it on your Web site. An alternative way to use the Dingbat font is to embed the font on your page using a specialty font-embedding tool.
Return to Top.

Learn About Cascading Style Sheets
The reason why there is consistency in the design of the pages on this website is extensive use of Cascading Style Sheets (CSS). Use of CSS allows for easy maintenance of styles across a website and provides a means of setting properties not available in HTML.
If you're interested in learning more about CSS1 (Cascading Style Sheets, Level 1) then you'll find plenty of good resources online.
One great reference site is Miloslav Nic's CSS1 reference page. This site displays a list of Style properties down the left of the screen that, when selected, opens a description and plenty of examples to copy on the right. It's well laid out and very easy to use.
Click here to link to the CSS1 reference page -- it's definitely worth book-marking!

Unlike Cascading Style Sheets, Level 1, Cascading Style Sheets, Level 2 are still not widely supported by version 6 browsers. So what do we mean by well supported when we're talking about CSS1 and CSS2? To see a detailed list of style sheet properties and the level of support offered by the major browsers, visit the Web site below. This is a page worth book-marking and is a handy reference for checking support levels when something works fine in one browser but fails miserably in another.
Click here to link to the browser support info page!

Return to Top.

What Exactly Is Copyright?
In a previous tip I suggested adding a copyright symbol to protect your original work. This prompted questions from readers about the legality of using the symbol and whether or not one needs to register the copyright to use the symbol.
Answer: You don't have to register anything before copyright begins -- it exists the minute you create an original image or text for your site. The U.S. Copyright Office (link follows) is a great resource for everything related to copyright and it has a good FAQ section with short answers to most questions you're likely to ask.
Click here to link to the U.S. Copyright Office Web site!

Return to Top.

Understanding XHTML
XHTML or Extensible Hypertext Markup Language was designed as a bridge between the older language HTML 4.0 and the new XML. It was planned to provide an intermediate step between the two languages and a means by which users could begin to move their code from one to the other. While it looks like there's not much new in XHTML that isn't already in HTML 4.0, there are some key changes you should be aware about and which you should consider implementing in your code. These are syntax issues and, in the next few tips, we'll look at some of these
Return to Top.

XHTML Syntax -- Case
Like it or not, the new XHTML syntax requires that all element and attribute names be typed in lowercase. This is similar to the HTML Document Object Model (DOM) that begins names in lowercase (however it uses LCC lower Camel Case so that the first letter of the second and subsequent words are capitalized). So, when you're writing XHTML compliant code you should use lowercase letters. You should also ensure your attributes are in lowercase, for example, use valign and not VALIGN. There are more new rules applicable to attributes and we'll consider these in other tips.
Return to Top.

XHTML Syntax -- Attributes
In the past few tips we've been looking at the requirements of the XHTML language as a bridge from HTML to XML and some their syntax rules. Today we'll consider the XHTML syntax requirement that attribute values must be placed inside quote symbols. This was not required in HTML and you could, for example, set a table up with a WIDTH=200 attribute. Now, applying the lowercase attribute and the quoted value rules, the correct attribute should appear as width="200".
Return to Top.

XHTML Syntax -- Tags Without End Tags
Today we'll continue our discussion of syntax requirements for XHTML and we'll look at tags like P that, in the past, did not require closing tags. If you, like me, learned to hand code Web sites in Notepad before GUI editors were so much as a gleam in their designers' eyes, you probably learned that a paragraph P element could be written with a single opening tag and omitting the closing tag. It was simply quicker and more efficient to leave it out. However, the new XHTML syntax requires that all non-empty elements thath previously had optional closing tags should be closed. This applies not only to the paragraph element (p) but also to elements like the List item (li).
Return to Top.

Password-Protect A Web Site
You'll need to create two Unix-specific files, .htaccess and .htpasswd. When a visitor's browser accesses the default entry page in the directory where the .htaccess file is located, an authorization dialog opens. The user name and password are checked against the .htpasswd file associated with that particular .htaccess file. If the user name and password combination matches a combination stored in .htpasswd, the visitor gains access to the Web pages in that directory and its subdirectories� at least until another .htaccess file is encountered.
The .htaccess file is a text file. You can add it by telneting in to your Unix account and using a text editor such as PICO, or you can create the file locally with, say, Notepad, and FTP it into the appropriate directory of your account. If you're used to working with Notepad, however, bear in mind that the filename begins with a dot (.). Notepad will automatically add the .txt extension to the text. You can remove the extension either on your local system or by renaming the file once it's on the Unix machine.
If you want to protect your entire site, place .htaccess in your site's root directory. If you want to protect only a portion of the site, place the file in the topmost subdirectory where you want the protection to occur and provide a hyperlink to that directory from the public area of your Web.
You should create .htpassword before .htaccess, because you'll need to insert .htpassword's location into .htaccess. To create the .htpassword file, telnet into your Unix account, go into the directory where you wish to place the file, and type the following command:
htpasswd -c .htpasswd username
This command will simultaneously build the .htpasswd file and populate it with its first user name. You'll be asked for a password for that user name and then asked to retype the password for confirmation. You can add additional users by reentering the same directory and typing the command with a new user name but without the �c switch.
To password-protect your site, create an .htaccess file consisting of the lines
AuthUserFile /users/username/
webdirectory/public/.htpasswd
AuthGroupFile /dev/null
AuthName "Username and password required"
AuthType Basic
<Limit GET POST>
require valid-user
</Limit>
The first line contains the full path to the directory containing the .htpasswd file. The second line refers to a file you can make if you wish to create user groups, which you will want to do if you frequently add usernames. In this case, however, the /dev/null value is standard Unix for "does not exist." The text shown in the quotes on the AuthName line is the text that will appear in the authentication dialog box the visitor will see. The fourth line establishes basic HTTP authentication.
With the .htaccess and .htpasswd files created, load your browser and type in the URL for the directory in which the .htaccess file resides. Type one of your newly created user name/password combinations in the authentication dialog, and you'll be allowed into the site.
There's a great deal more you can do with the .htaccess file. For more on its capabilities, see http://hoohoo.ncsa.uiuc.edu/docs/tutorials/user.html.


Using MSIE features Not Supported By Other Browsers
This wouldn't be a problem if a visitor's browser simply didn't display anything it didn't understand, but sometimes the offending code makes a mess of the page for the visitor. Is there way to hide the code when the visitor doesn't have the specified browser or version?
The easiest way is to use the conditional comment tag introduced with Internet Explorer 5.0. The conditional comment is an extension of HTML's standard comment tag, which takes the form <!-- place comment here -->. The conditional comment tag works precisely the same way, except for the inclusion of an if-endif block placed within the tag. The purpose of the if-endif block is to provide the browser with the conditions under which to display the code within the tag. Specifically, it instructs the browser to render the HTML within the if-endif block only if the conditional statement is true.
Two terms you'll see in relation to conditional comments are uplevel browser and downlevel browser. Uplevel browsers include IE versions 5.0 and higher. Any other browser is considered downlevel. Uplevel browsers recognize conditional comments and process them logically. Downlevel browsers do not recognize them, and that lack of recognition results in their working as Microsoft intended them.
Here's an example of a conditional comment. In this case, a visitor using IE 5.0 or higher will see the text inside the paragraph tags. Visitors with other browsers will see neither the sentence nor any other part of the conditional statement.
<!-- [if IE 5]>
<p>Good to see you've upgraded to IE 5.</p>
<![endif]-->
Note that the sentence will appear in all sub-versions of IE 5: 5.0, 5.1, or 5.5. You may restrict the condition to the subversion by specifying it, which looks like this:
<!--[if IE 5.5]>
<p>Good to see you've upgraded to IE version 5.5.</p>
<![endif]--> 

It's also possible to indicate a relative browser version�such as a browser version higher or lower than the one specified�by including an operator in the conditional statement. For example, the following condition would display the text if the visitor has not upgraded at least to IE 5.5:
<!--[if lt IE 5.5]>
<p>You need to upgrade to Internet
Explorer 5.5 or 6 to read this.
<![endif]-->

The possible operators are: lt for less than (in other words, prior to); gt for greater than; lte for less than or equal to; and gte for greater than or equal to. In addition, you can use the not operator�in the form of !�to specify code to display if the browser is not a specific version. The following example uses the not operator to inform visitors that they will only be able to view the text if they have IE 5.5:
<![if !IE 5.5]>
<p>Only users of Internet Explorer
5.5 will be able to see this text.</p>
<![endif]>

Note the difference between this code and the preceding examples. Here, the double hyphens do not follow the <! tag or the [endif]comment. A conditional comment without the double hyphens is called a downlevel-revealed comment; these comments appear in downlevel browsers, whereas comments that include the hyphens do not. Downlevel-revealed comments let you make a comment to visitors who do not use Internet Explorer at all, or who use IE versions earlier than 5.0.
Conditional comments work because IE 5.x has been programmed to process comment tags differently from other browsers. The uplevel browsers recognize the if-endif block, but all other browsers do not. If the comment tag starts and ends with the double hyphen, downlevel browsers will recognize it as a normal HTML comment and not display any of it, including the if-endif block or any contents inside that block; uplevel browsers, however, will render the if-endif block as instructed. If the comment does not contain the double hyphens, then downlevel browsers will ignore the comment tags as invalid but will render the HTML inside those tags. Uplevel browsers, however, will ignore them completely.

Although we've used simple paragraph containers in these examples, you are by no means restricted to these. You can include anything you wish inside the if-endif block, including scripts, graphics, specific IE features (such as marquees), and so on.

Hosted by www.Geocities.ws

1