Getting Subdomains to Display With the Desired URL (http://subdomain.mysite.com)

Typically, when a subdomain is created for a website, the website owners want the visitor to see the URL as http://subdomain.mysite.com. However, you can usually access the subdomain also via http://mysite.com/subdomain.

But as stated above, http://subdomain.mysite.com is by far the preferred URL.

As you know, most web hosting companies allow multiple subdomains free of charge because a subdomain does not require a registered domain name of its own. Its webpage files merely reside in a directory or folder off the root. (That is why you can view the subdomain at http://mysite.com/subdomain.)

Also, most web hosting companies provide some kind of user interface, such as cPanel, by which a subdomain is requested. And cPanel usually offers the option to specify a redirect for the subdomain.

I don't use cPanel much since it's better to use a file transfer program to upload and manage website files. But when I would, I could never access the subdomain the desired way: http://subdomain.mysite.com. I tried different redirects and I tried no redirects, but nothing worked. And it never mattered until today.

If you are having this problem, here is the solution. Add the following 3 lines of code to the .htaccess file residing inside the subdomain's directory. The lines following the # are comments:


#redirect directory to subdomain
RewriteCond %{HTTP_HOST} !^subdomain\.mysite\.com
RewriteRule (.*) http://subdomain.mysite.com/$1 [L,R=301]

If you don't have an .htaccess file in the directory, you can copy and paste the following code into a Notepad file and save the file in ASCII mode with the name .htaccess - with no extension. Then upload the .htaccess file to the subdomain's root.


# to prevent people viewing my htaccess file
<Files .htaccess>
order allow,deny
deny from all
</Files>
# disable directory browsing
Options All -Indexes
# prevent listing contents of directorys
Options -Indexes
#redirect directory to subdomain
RewriteCond %{HTTP_HOST} !^subdomain\.mysite\.com
RewriteRule (.*) http://subdomain.mysite.com/$1 [L,R=301]

If you are not familiar with the .htaccess file, tutorials and sample files abound on the internet - such as this overview on the javascriptkit.com website. Every website should have a .htaccess file; but proceed carefully because a poorly coded .htaccess file can make a website inaccessible.

►  Take a look at some of our other interesting posts, such as How to Open a New Window with rel="external nofollow"

How to Keep a Phrase From Wrapping on a Webpage or Blog

Even in a fixed-width webpage or blog, you cannot be certain where line breaks will occur on the visitor's computer. There may be phrases that you want to stay on one line at all times.

Notice that neither of the two phrases in green below stay on the same line. (Change your browser window width, if necessary, to see this). Don't worry about what the example below is saying ... we know most of you aren't programmers ... but the example shows some text that needs to stay together:

Programmers should review the line of code @template = hr(webmaster.org.us 222.333.222.00 localhost); and should also be sure to review the line of code @template = hr(webmaster.org.us 222.333.222.00 localhost);.

What do you do if you have a phrase that you do NOT want to be split on two different lines? Use the CSS white-space property.

The CSS white-space Property

This property has several values, but the value that fixes our problem is no-wrap. Using the SPAN tag, wrap the phrase like so: <span style="white-space:nowrap">Your Phrase Here</span>. (For CSS users, create a class to use in the span like so: .nobreak {white-space:nowrap;}

FIXING THE PROBLEM Using no-wrap

To fix the problem, wrap the two phrases with spans using "no-wrap" as shown above. Change your browser window width to see that both green phrases stay on the same line at all times:

Programmers should review the line of code @template = hr(webmaster.org.us 222.333.222.00 localhost); and also review the line of code @template = hr(webmaster.org.us 222.333.222.00 localhost);.

The Code for the no-wrap Example:

Programmers should review the line of code <span style="white-space:nowrap">@template = hr(webmaster.org.us 222.333.222.00 localhost);</span> and also review the line of code <span style="white-space:nowrap;">@template = hr(webmaster.org.us 222.333.222.00 localhost);</span>.

We hope this information has been clearly explained and helps you create a more effective webpage or blog. Cheers!

►  Take a look at some of our other posts, such as A Dozen Sample Math Formulas for Microsoft Excel

The Web-Safe Color Palette - Yes or No?

Modern computers and browsers can display 16.8 million different colors. Folks who create or manipulate images using programs like Adobe Photoshop choose a particular color by specifying its 6-digit hexadecimal code. However, some very old computer systems and/or browsers can only reliably display 216 colors.


These 216 "safe" colors make up the Web-Safe Color Palette. The 6-digit hexadecimal codes for these colors contain three adjacent pairs of the following digits: 0, 3, 6, 9, C, or F. For example, medium blue is #3366CC and medium green is #009900. Many websites show the 216 web-safe colors in a variety of designs. And when using Photoshop's Color Picker, you can view only web-safe colors by putting a checkmark in the box next to "Only Web Colors."

The decision website developers must make is whether or not they are going to limit their website colors to these 216 colors to satisfy an increasingly small number of visitors, or feel free to choose from the entire spectrum of 16.8 million colors. When a system that only supports 216 colors encounters a color code that is not web-safe, it displays the color it feels is the closest match.

As time passes, many developers are choosing to no longer constrain themselves to web-safe colors. However, of special consideration is the viewing of webpages on PDAs (personal data assistants) and cellphones. If it is known that a large percentage of a website's visitors will be viewing the site on these devices, the developer may want to strongly consider using mainly web-safe colors as these devices, at this time, only support the web-safe color palette.

As a side note, keep in mind that computer systems display colors slightly differently - depending on the browser, monitor, and video card. If you are developing a website and need to be very particular about a color, view your test website on a variety of systems before finalizing your color selection.

►  Take a look at some of our other interesting posts, such as How to Remove the Google Search Bar from Firefox

If this post has been helpful, please consider linking to our blog or sharing! 

  

Open a New Window with rel="external nofollow"

Do you use rel="external" on your webpages so links will open in a new browser window? Well, your external.js code isn't going to work for you if you ever decide to use rel="external nofollow."

In other words, the link no longer opens in a new window! What to do? Replace your current external.js file with the code below. Now your external links will, once again, open in a new browser window.

PS: The "nofollow" parameter tells Google and other search engines not to credit any PageRank to the external link. The "external" parameter tells the browser to open the link in a new window.

function externalLinks() {
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
for (var i=0; i<anchors.length; i++) {
var anchor = anchors[i];
if (anchor.getAttribute("href") &&
anchor.getAttribute("rel") == "external")
anchor.target = "_blank";
}
}
window.onload = externalLinks;
function externalLinks() {
if (!document.getElementsByTagName) {
return;
}
var anchors = document.getElementsByTagName("a");
for (var i = 0; i < anchors.length; i++) {
var anchor = anchors[i];
if (anchor.getAttribute("rel")) {
var rel = anchor.getAttribute("rel");
var external = false;
if (rel.indexOf(" ") > 0) {
while (rel.indexOf(" ") > 0 && external == false) {
if (rel.substr(0, rel.indexOf(" ")) == "external") {
external = true;
}
rel = rel.substr(rel.indexOf(" ") + 1, rel.length - rel.indexOf(" ") + 1);
}
}
if (rel == "external") {
external = true;
}
if (anchor.getAttribute("href") && external == true) {
anchor.target = "_blank";
}
}
}
return;
}

►  Take a look at some of our other interesting posts, such as Optimizing a Web Image in Adobe Photoshop

If this post has been helpful, please consider linking to our blog or sharing!