For any business, regional searches are certainly far more useful. It has been established that folks who do local searches online are closer to creating a choice on getting certain items or services. They are looking for the final elements that will make them choose one way or yet another. When you lead these searchers to your site, you have that very beneficial opportunity to make them choose on picking your merchandise or services. Given that regional searches suggest that the searcher is in your vicinity, instant revenue are really probable. So are searches converting to net visits, phone calls or physical stroll in visits to your store or workplace.
According to statistics, 74% of internet users do neighborhood searches. In truth, of all searches carried out online, 35% are nearby. Of all these local searches, 82% are followed by phone calls or physical visits to retailers and actual buy. Among Americans, a substantial 66% use neighborhood search to uncover neighborhood corporations. It is also intriguing to note that folks commit 80% of their budgets inside of 50 miles of their households. Should not you be taking benefit of this trend as soon as achievable?
It is evident that acquiring your website listed in local searches has become a very crucial requirement for enterprise. Even if other innovations crop up, as they certainly will, local world wide web searches are right here to stay and will stay a really influential issue in marketing.
It is free to have your enterprise listed in a lot of regional listings like Google Maps. Make certain you claim your listing and that the information related with your listing is full and accurate. If you fail to do this, many search engines still list you using third celebration details that they get elsewhere on the web. The danger is that the info could be inaccurate and misleading. Even worse, somebody else may intentionally sabotage your listing.
Don’t forget that your enterprise handle ought to be listed the two in your nearby organization listing and your web site. They should be identical. This is crucial and will facilitate your high ranking.
Other business listings need a fee for an upgrade, giving you the capacity to gain much more manage above your listing. The price is typically really worth it, especially since you want every advantage you can get over your competitors.
Home Loans Online home loan lender www.emoney.net.au/
Japanese Akoya Pearls Japanese Akoya Pearls are the original cultured pearls from Japan. www.pearldistributors.com
Wine Making Supplies Wine Making Supplies - Everything you need to simply & easily make home made wine howtomakewinehub.com
Network Marketing A real network marketing opportunity for passive income. See how WorldVentures can help you. mlmsingapore.org
flat rate movers Moving Out of State?
Get Your Free Instant Estimate Now www.flatratemovers.com
Jasa SEO Jasa SEO Indonesia Terpercaya dan Murah www.jasa-seo-indonesia.co
Numerous business listings contain client testimonials. Make positive your items and companies are of optimum good quality in order to garner positive evaluations. Encourage your satisfied clientele to display their appreciation and help by posting constructive evaluations. You should also monitor these testimonials for any negative comments. You have to immediately examine their validity so that you can respond accordingly.
Having your enterprise listed is not all there is to it, although. Just staying listed is useless if your enterprise does not appear on the initial page of nearby searches, preferably high up there if not on the first location. Attaining that objective is not effortless, though. You will be in a position to obtain it sooner with the support of search engine marketing and advertising professionals.
Investing in the solutions of specialists in search engine optimization and search engine marketing and advertising may possibly be the ideal factor you can do for your business. Do it to maximize your use of nearby business listings for greater sales. It can a lot more than double your earnings.
How do you know whom to employ? One particular of the very best approaches is to go by the final results they display. Find who among your competitors rank highest in nearby organization searches. Then examine the service they use. Organization Neighborhood Listings, for instance, is indicated in all the listings of its clientele. And you will discover these customers at the top of their respective neighborhood niches.
Use Google Maps to investigate businesses in Kenya and get their speak to data, evaluations and more.
Have you been looking for a comfortable, flattering cami lace bra? CamiBra.org has several at This Website for you.
Elk Grove Dentist Dr Tom Tinney and his amazing staff will get your smile eye-opening white, healthy AND easy on the pocketbook! We hate pain, too!
JT Foxx on LinkenIn: You can connect with the top Wealth Management Coach by finding JT Foxx on LinkedIn
The results on the search results page consists of pieces of information of the chapter pages that are related to the phrase typed in the Search Box. Each piece of information is made up of the title from the title tag of the page found and the description from the META description tag of the page found. This description is the description of the content of the page found. The title for each piece of information is also a hyperlink to the page found.
The file name of the result page is searchResults.htm . It was opened in the content frame by the HTML Form element of the banner when the Search Submit button was clicked. It has code, which we shall see in this part of the series. If there are any search results, this code will display them; if there is no search result, the code will display, No result found.” on the page.
You will have a link to download the complete code for the project toward the end of this last part of the series.
Note: For the code samples to work, you should change the dot just before the reserved word, innerHTML, to a full-stop.
Note: If you cannot see the code or if you think anything is missing in this article (broken link, image absent), just contact me at email@example.com. That is, contact me for the slightest problem you have about what you are reading.
For simplicity we assume that the phrase the user types in the Search Box consists of key words. This means that prepositions and conjunctions typed are keywords. In you commercial project you can decide to add the code so that prepositions and conjunctions are removed before the search is done. For the purpose of this series, let us allow things to be that simple; Keywords and Searching need a whole series of articles, which I will not go into now.
The Search Algorithm
In this project, you have a very simple search algorithm. The phrase typed in by the user is broken down into individual words. If any of these words is found in a chapter page, the title and description of that page is copied to the search results page, which should already be displayed on screen. In the results page, the title is a link. For this pedagogic article, it is that simple. In your commercial project you can make the search algorithm as complex and as useful as you want. For example, you may make the search algorithm throw away the prepositions and the conjunctions typed in by the user; you will need extra code for this. As another example, you may make the title and description of the pages that have most of the keywords display first in the result page and the ones with fewer keywords display last (in a descending order); you may also take the frequency of occurrence of a keyword in a page into consideration; all that need extra code. As yet another example, instead of displaying the description of the Meta tag in the results page, you can have phrases and sentences that contain the keywords in the chapter page displayed in the results page; again this needs extra code.
If the customer is willing to pay more and if you can do the extra coding, then go ahead and do the extra code for the commercial project. As a minimum, you should remove the prepositions and conjunctions in any commercial project; I have not addressed that in this series.
Use of Ajax
The chapter pages are actually loaded by Ajax. You might not know this: if the resource called by the HTTP GET or POST method of Ajax is an HTML file, the HTML file arrives at the browser as a string, to be used by Ajax. The resource does not arrive as a web page to be displayed; it arrives as a string and is not seen by the user. As indicated in part 1 of this series, you need to understand Ajax basics in order to fully understand this series. If you do not understand the basics of Ajax, then read my series titled, Ajax Web Technology Explained, in this blog. To arrive at the series, just type the title and my name, Chrys in the Search Box of this page or in the Google Search box of this page, and click Search.
The Links href Array for the Chapters Files
The Array of Ajax Objects
In order to download anything using Ajax, you need an object. The above array shows 12 pages that have to be downloaded as strings. This means you need 12 Ajax objects. There is an Ajax function, which is called the number of times the above array is long. In this project the above array has a length of 12. Your own project may have some other length. So in this project, the Ajax function creates 12 Ajax objects. These 12 objects created become elements of a new array. This new array is declared as follows:
var ajaxObjArr = new Array(); //an array of Ajax objects
So the name of the first Ajax object is ajaxObjArr, the name of the second is ajaxObjArr, name of third is ajaxObjArr, and so on.
The Ajax Function
This is the Ajax function:
// Firefox, Opera 8.0+, Safari
ajaxObjArr[j] = new XMLHttpRequest();
// Internet Explorer
ajaxObjArr[j] = new XDomainRequest();
ajaxObjArr[j] = new ActiveXObject(“Msxml2.XMLHTTP”);
ajaxObjArr[j] = new ActiveXObject(“Microsoft.XMLHTTP”);
alert(“Your browser does not support AJAX!”);
if (ajaxObjArr[j].readyState == 4)
//all the searching in each file string is done here for each of
//the Ajax objects corresponding to the chapter pages.
The number of times the function is called is equal to the number of files to be searched, which is equal to the length of the pagesArr array. The function is called with the number in the sequence sent as argument. The parameter for this in the function is j and it is also used to identify an Ajax object in the function. When an Ajax object is created it is made an element of the ajaxObjArr array.
All the searching in each file string is done when the readyState of the property of a particular Ajax object (ajaxObjArr[j]) is 4. The Searching code portion has not been shown in the above code.
The HTTP POST method was used. In the open method of the Ajax object, a particular file, pagesArr[j] is requested for the particular object, ajaxObjArr[j]. No query string is sent, so the argument of the Ajax object sent method is null. The last but one statement in the Ajax function is always used with the Ajax HTTP POST method.
The above Ajax function is called the number of times by the following for-loop:
As you can see from the for-loop, the number of times the Ajax function is called is equal to the length of the pagesArr array.
The Ajax readyState Block
As mentioned above, all the searching in each file string is done when the readyState of the property of a particular object (ajaxObjArr[j]) is 4. When this happens the block code for this event is executed. This block has 4 code segments. This is the first segment:
//assign the responseText to the variable, subject
subject = ajaxObjArr[j].responseText;
In this segment, the response text of the Ajax object is assigned to a new variable, subject. The variable, subject now holds the downloaded file as a string. When the Ajax object downloads the file, it comes as a string and is held by the responseText property of the Ajax object. The above statement makes a copy of this string to the variable, subject.
The second code segment is:
//get the title content
titleIndex = subject.search(/<title>.+<\/title>/i);
title = “”;
while (subject.charAt(titleIndex) != “<”)
The second statement in the segment increases the variable, titleIndex by 7. This new value will be used to obtain the content of the title tag. When the content of the title tag is gotten, it is held by the new variable, title, of the statement that follows in the segment. The while-loop in the segment, uses the new titleIndex value for the title content left delimiter and the ‘<’ character as the right delimiter to obtain the title content, character by character (without the <title> and </title> tags). Inside the loop, titleIndex is incremented to obtain the content character by character into the variable, title.
Here is the third segment of our Ajax readyState block:
//get the page description value
descriptionIndex = subject.search(/<meta name=\”Description\” content=\”.+\”>/i);
description = “”;
while (subject.charAt(descriptionIndex) != “\”")
The aim of this segment is to obtain the actual typed description from the META description tag, which is now part of the whole page string, assigned to the variable, subject. An example of the META description tag is:
<meta name=”Description” content=”Summary of Chapter 1 page goes here.”>
In this example, the content is “Summary of Chapter 1 page goes here.” The process of obtaining the description is similar to that of obtaining the title content. From the META tag above we see that the left delimiter is indicated by an index, increased by 34 (‘<meta name=”Description” content=”‘ – has 34 characters) and the right delimiter is ‘”‘.
For the above two segments, actual title or content typed in the file should not have a newline character, otherwise the particular regular expression technique would not work.
The last segment for the block is:
//check if any keyword is in the file (subject)
//first collect the keywords into an array
keywordArr = parent.searchVar.split(/\ +|,|\?|\./);
//form regular expression
regexStr = keywordArr;
for (k=1; k<keywordArr.length;++k)
regexStr = “|” + keywordArr[k];
//form the regular expression
re = new RegExp(regexStr, “i”);
//if keyword is found on a page, display the page title and description
titleDescriptionStr = “”;
if (subject.search(re) != -1)
titleDescriptionStr = “<a href=’” + pagesArr[k] + “‘ >” + title + “</a><br ” + description +”<br <br “;
//if no keyword was found in any page, indicate so
if ((titleDescriptionStr == “”)&&(j == (pagesArr.length – 1)))
document.getElementById(‘B0′)⋅innerHTML = “No result found.”;
Remember that in our simple search algorithm, the phrase typed by the user is broken down into its words; these words are the keywords. Each file string is searched if it has any of the keywords. Once any of the keywords is seen, the search in the string ends. Also remember that the phrase is now in the variable, searchVar in the frameset. To access this variable, from the content frame you have to precede it with, “parent”.
The first statement in this segment splits the phrase into individual words using regular expressions technique. The right operand of the statement returns an array of the words. This array is assigned to the new variable, keywordArr.
The keywords from the keywordArr array are used to form a regular expression. This regular expression will be used to search for any of the keywords in the file string of the variable, subject. The word “any” here means that the keywords in the regular expression will be joined by the regular expressions OR which is | . So the regular expression of keywords to search the file string, will be something like,
The regular expression also has to be case insensitive, because the user can type the right spelling but in a case that is not found in the file.
The next three statements (the for-loop is one statement) create the regular expression and the regular expression object, re.
The rest of the code checks in any of the keywords is found in the file string. If any is found, it displays the title and the description of the file in the BODY element of the searchResults.htm page, which is now in the content frame. Remember, all the code described in this part of the series is in the searchResults.htm page now in the content frame. The Form element in the banner frame simply opens this file in the content frame, then code in this file does all the search and display in its BODY element.
Before displaying the title, the title is made into a link to the file found that has any of the keywords. Let us now look at the rest of the code in the segment. You have the new variable, titleDescriptionStr, which is declared and an empty string assigned to it. This variable would hold the title as a hyperlink and the description of the page found.
The next statement is a large if-statement. The condition of this if-statement checks if the regular expression-any of the keywords- is found in the file string held by the variable, subject. There are two statements in the if-block. The if-block is executed when a keyword is found. The right operand of the first statement uses the title value from the variable, title to form a hyperlink to the page found, in string form, concatenating it with the value of the variable, description. This right operand actually forms a set of HTML tags, but in string form. It assigns the string to the variable, titleDescriptionStr. The next statement displays the value of the variable, titleDescriptionStr in the BODY element of the current searchResults.htm page. The ID of the BODY element is, ‘B0′.
The last statement in the segment is a one-line block if-statement. The block displays, “No result found.” if none of the keywords is found in the file strings. If a keyword is found, the previous if-statement would see it and assign the display result to the variable, titleDescriptionStr. This last if-statement checks if the variable, titleDescriptionStr is empty and if all the chapter files have been searched. If all the chapter files have been searched, the if condition (j == (pagesArr.length – 1)) would return true, meaning the pagesArr array having the href values for all the files has just been completely scanned. And so the last if-condition is,
If the complete condition returns true, then no keyword was found in any of the files (strings) and the block to display “No result found.” Is executed.
Code executed repeatedly
The readyState block and the entire Ajax function, ajaxFn(j), is repeated the number of times equal to the length of the pagesArr array, which has the hyperlink href values of each of the files that is to be searched. The iteration (repetition) number in the sequence is the value of the j parameter. The following code, typed somewhere above, causes the repetition:
Let me end the explanation of the coding, here.
I gave the name, head-directory to the head directory. To use the ebook when you have the head-directory and its sub directories in your computer, all you have to do is to open the directory, head-directory and double-click the file, mainPage.htm. This frameset file will open in your browser. You can then go to any page by clicking a hyperlink or using the search feature.
I used the zip program 7-zip to zip the directory, head-directory and its sub directories into a zip file called, HTML-Ebook.zip. The complete code of the project is in the head-directory and its sub directories. This zip file is an ebook. It can be copied into any computer that has a browser, and unzipped in any directory of the computer. It unzips into the directory, head-directory, which has files and sub directories. Just open the directory, head-directory, double-click the file, mainPage.htm, and you can use the ebook.
The HTML-Ebook.zip file can be downloaded, free, from,
Download the file and unzip it into any directory of your computer, using the 7-zip program. You can get the 7-zip program, free, from http://www.7-zip.org/ .
There you are; HTML ebook.
Question by icedan: what is algorithmic search and how does it work?
Answer by Answ3r3r
It is a search based in an algorithm as opposed to just a random search. Most of those algorithm include a first step of sorting.
Let’s face it, most individuals in Information Technologies really like manage. Control above systems, management more than data, and most importantly handle over YOU. I am not suggesting these are lousy characteristics to possess when you are attempting to protect your company’s most essential asset, such as your information. Let us face it, I would be a tiny nervous if the thing that kept me gainfully employed was taken away from me simply because it was less costly and simpler than having it in-property. This usually creates a dilemma when a individual on the company side of the company demands to make a determination primarily based on the restricted amount of info he or she is obtaining from IT.
This write-up is written to outline the anticipated fees concerned in getting your FTP remedy in spot, hence giving you the facts when it comes to making an crucial enterprise selection. There are numerous methods to go about configuring an FTP server, below is the most typical:
one.Hardware (00)Value ranges on processor speed and how significantly difficult drive room you want. Here are the specs of a slimmed down server:A Dell PowerEdge serverDual Xeon one.83Ghz ProcessorsWindows Server Web Edition 1 Terabyte of storage Raid 5 (For hard drive redundancy)4 Gigs of Memory3 Year ProSupport
two.Software program ()There are many FTP server software program programs to decide on from. They variety in price based mostly on merchandise capabilities and how a lot of users can access the account. There are numerous providers supplying this kind of product, but I have selected three well-known applications:Serv-U (9-9)GlobalScape (6 – ,995)FileZilla – (Free of charge)
three.Bandwidth (Soft Expense)Hosting an FTP server in-residence will definitely consume into your bandwidth when customers start uploading and downloading files. This can lead to a hazardous ripple impact on other personnel trying to carry out important functions such as emailing, web browsing, video conferencing and in some instances, cellphone calls.
4.Setup Time (1 Day)Configure WindowsPurchase SSL (If safety is a concern)Configure Network IP addressesHostnamesFirewall ProvisioningConfigure BackupsConfigure FTP softwareCreate user accountsCreate directoriesCreate file technique permissionsFTP server permissions
five.Assistance (Ongoing)Need to have tech-savvy particular person on employees to do the following:ManageBackupTroubleshoot troubles Apply patches to serverUpgradeMonitor
It’s easy to say that you can spend 00 in creating an FTP server that individuals can use, not to mention ongoing expenses. Cost aside, it will nevertheless not have attributes like custom branding, a net interface that allows everyone to upload/download a file, and a way for any non-IT man or woman to administer.
Before producing the selection to bring FTP in-home, I would very recommend giving SmartFile a consider (for as small as a 8.00 a year). Who knows, you may well even make your IT individual happy.
This video will display you how to set up an FTP server from behind a router making use of CrossFTP server (www.crossftp.com). If you need to have to locate your major IP address, check out www.whatsmyip.org.
Question by Shannon S: FTP Servers????
I have my complete site developed in microsoft frontpage edition 2003 and my site is at angelfire.com but when i go to upload it wont work. I went by way of my computer and network places, the folder is there but when i try out to sign in it says “could not login to the FTP Server with the username and password specified. Can any person aid me?
I attempted two other free of charge internet sites also and it’s still not functioning. I had carried out a website in frontpage a couple of many years ago and it worked just fine. It says the same point everytime i try out.
Answer by Mictlan_KISS
I have had equivalent problems: The dilemma was I used FP for another FTP upload and the ID and PW in which getting read from the other website.
Know greater? Leave your own answer in the comments!
You might have noticed that some web pages display well in one resolution and poorly in
another resolution. For the same web page, in one resolution the distance between some
HTML elements may be satisfactory; in another, the distance might be too long or too
short. You might also have noticed that in one resolution, there is no horizontal scroll bar,
but in another, there is a horizontal scroll bar. These are some of the problems with
displaying a web page in different resolutions. Would it not be nice, if your HTML
elements had the same size and the same inter-distance in all resolutions? There is a
solution for this: the secret is to use Percentages for the dimensions of the XHTML
You need basic knowledge in HTML and CSS to understand this article.
Note: If you cannot see the code or if you think anything is missing (broken link, image absent), just contact me at firstname.lastname@example.org. That is, contact me for the slightest problem you have about what you are reading.
Resolution is the maximum number of pixels that can be displayed on the computer
screen. The pixel is the smallest dot that can be displayed on the screen. You have the
following common resolutions: 800 X 600, 1024 X 768, and 1152 X 864. Other
Different computer screens have different resolutions. As a user moves from one
computer to another to see the same web page, the problem of resolution sets in.
Element Dimension Units
By Element Dimensions, I am referring to the widths and heights of HTML elements.
Before we continue, know that it is better to give the dimensions of your HTML elements
using Cascaded Style Sheet. You can measure dimensions in percentages or pixels. You
can also measure dimensions in inches, centimeters, millimeters, points or picas. So far as
resolution is concerned, these four units have the same effects, as the pixel. So, for the
rest of the article, we shall be talking about the percentage, in contrast to the pixel. In
CSS, pixel is typed as px, and percentage is typed as %.
A containing element is an element that can contain another element. Examples of
containing elements are the BODY, DIV, PARAGRAPH and FORM elements.
The Percentage Unit
When the width or height of an element (e.g. img element) is given as a percentage, it is
usually measured relative to the dimensions of its containing element.
The Client Area
When a browser is displaying a web page, there is what is called the Client Area. The
client area is that area below the horizontal bars (top) of your browser and above the
taskbar. The total width of the client area is taken as 100%. The total height of the client
area is taken as 100%.
Under normal circumstances, the dimensions in percentage of any element in the BODY
element are measured relative to the dimensions (width and height) of the client area. So
a DIV element with a width of 50% will take half the width of the client area. An image
element in the BODY having a height of 50% will take half the height of the client area.
Even if the image is found lower down in the web page and you have to scroll down to
see it, if the height was given as 50%, when you see it, it will be 50% of the client area
Talking about containing element, if the image is in a DIV element, which is in the
BODY element, then the image in the DIV element with a 50% width should occupy a
50% width of the DIV element; that is effectually 25% width of the client area.
The BODY Element
The default width of the BODY element is that of the client area. The height of the
BODY element can always extent down below the client area, and you will have to scroll
down to see the elements in the BODY lower down. Know that whenever you give
dimensions (width and height) in percentage to any element in the BODY, the percentage
is relative to the dimensions (width and height) of the client area, and not the width and
height of the BODY element. In this light, the BODY element is an exceptional
containing element. With other containing elements, the width and height of an element
in percentage that it has, is relative to the width and height of the containing element.
Fonts and Height of Containing Elements
Assume that you do not give the pixel unit to the dimensions of a containing element,
when the resolution changes, the actual size of the containing element will change. Text
in the containing element normally wraps to fit the new width of the containing element.
So the font does not normally pose a problem with resolution change. The font size of
character may change slightly as the resolution changes, but this is not usually a big deal.
So far as fonts (text) or other inline elements are concerned, the problem is usually with
the height of the containing element. Imagine that you have two containing elements, one
above the other, vertically. Assume that you give these elements definite heights and
widths in percentage, text fills both elements, and everything is fine in one resolution.
You now move to another resolution where the actual width and height of the containing
elements have increased. What will happen in this new resolution is that the text (with
other inline elements) in each of these containing elements will adjust itself to fill the
element, beginning from the top. So for each of these two elements with definite width
and height in percentage, the bottom part will be empty, since each has expanded, but the
amount of text inside has not changed.
Heights of Containing Elements
Because of the above problem, you should avoid giving heights (values) to containing
elements. Avoid giving heights to containing elements either in percentages or pixels.
You can give containing elements widths in percentage, but not heights. If you do not
give containing elements heights, the browser will always give you the height for which
text (and other inline elements) will fit into the containing element (with no spaces at the
Common resolutions today are, 800 X 600, 1024 X 768, and 1152 X 864. The bigger the
resolution, the bigger the computer screen. Assume that you have an image, in the
smallest resolution screen, and you have given the image dimensions in percentage. Also
assume that if you had to give the image dimensions of pixel, the image would still have
the same actual size as it had with percentage. So, you now have an image with
dimensions in percentage and you know the equivalent dimensions in pixels. When the
web page with the image is displayed in a higher resolution screen, the image will appear
bigger. Know that under this condition, in the higher resolution the image details will be
lost. If you had given the dimensions of the image in pixels, in the higher resolution (with
a bigger screen), the size of the image would not have changed (significantly) and the
image details would have been maintained. So, giving the image dimensions in
percentage, results in an increase in size as expected but with lost of details. On the other
hand, giving the dimensions in pixels maintains the details as expected, but with no size
increase. That is one of the problems, change of resolution brings.
The solution is to design your web page with the highest resolution you think your users
have and still give the percentage unit to the image dimensions; now as you go down in
resolution, the screen size and the image size (and the entire web page) reduces; so,
image details are not lost. Just accept the principle of this paragraph; I will not explain
how it really works.
The problem of lost of details is seen only with images and videos (moving pictures
consists of images) when the percentage is used. It is not seen with other HTML
elements. I have told you how to solve this problem. There is some good news
concerning images and their dimensions in percentages: If you give an image only the
width value in percentage, the browser will display your image with the corresponding
height, according to the dimensions of the image at the server. So you do not have to give
both the width and height values for your images. Only the width value (in percentage)
Cells of HTML table elements behave like containing elements but they are not really
containing elements. What you should worry about should be the width of the whole
table in percentage. Avoid giving the table any height value either in percentage or in
pixels; giving your table a height value will constrain your design and the way the
browser would format the contents of the table.
Let the elements in the table cells be inline elements. Give only the width dimension to
an image in a table cell in percentage. The browser will give the corresponding height of
the image. The image width value is relative to the width of the cell. You can use line
break elements to do some formatting in a table cell.
For the widths of the table columns (vertical group of cells), use the percentage unit. Here
a percentage is relative to the width of the table excluding the margins of the table.
Width and Height of HTML Elements
As we have seen from the above discussions, you should avoid giving heights to HTML
elements. Avoid giving height to the BODY element; avoid giving height to DIV
elements; avoid giving height to TABLE elements; avoid giving height to Table Cell
elements; avoid giving height to images. You can give the width of these elements, a
value in percentage.
If you really want to position elements relative to some point in the containing element
you can still use percentages. However you do not really need the CSS position property
for static web pages. You should use the position property for dynamic web pages where
you want the position of an element to change when the user takes an action.
With static web pages you do not really need the position property. For your static web
page layout, use DIV elements to partition your page; use the Table element when you
have information in a grid form; use the line break element and the CSS float property for
positioning (small elements); use the right HTML element for the right purpose (for
example, use bulleted list when you have a list information). You can improve the looks
of your design by using things like colors and element background images; not by
making the layout complicated. If you follow this advice, you will be fine with static web
pages. A good (looking) web site is not necessarilly the one that is complicated in design.
A Weakness with some Browsers
Assume that you have two DIV elements in your web page design, next to one another
horizontally, and you have given them width values in percentage. Also assume that
when you add the two percentage width values you would have 100%. This means that
the two DIV elements should fill the width of the client area (if their containing element
is the BODY element). The problem here is that some browsers will display the DIV
elements as you want (horizontally), while others will display them vertically, “thinking”
that the values sum up to more than 100%. The solution with this kind of problem is to
reduce the percentage width value of one or all DIV elements, slightly. Try your result
with different browsers to obtain the best reduction.
At this point, you may be eager to see an example. Well, the web page of
http://www.cool-mathematics.com/ is a good example (where dimensions of the main
containing elements are in percentage).
Do I have to give percentages for all HTML elements?
No. If you want a button for example, you do not have to give its dimensions the
percentage unit or any other unit (pixels). The change in resolution with different
computer screens, for the button, is not a big deal. You generally do not have to worry
about the dimensions of the button and some other HTML elements. The problem with
resolution normally comes with large containing elements and the image. The Paragraph
element for example does not normally pose a problem with resolutions, as paragraphs
are not usually large compared to the dimensions of the client area. Do not give any
dimensions (in any units) to any paragraph element unless you think it is very necessary;
if it is necessary, then the percentage unit is preferable.
If you want a rule here, then I would say, give only the width dimension in percentage to
large containing elements, Tables, Table Columns and images; do not give dimensions to
anything else unless it is very necessary.
Always remember that when you do not give an element dimensions, the browser gives
you appropriate dimensions.
This is very important. In the CSS specification, it is said that the pixel is a relative unit.
This is correct, but you have to know the relationship between the pixel and the output
device to appreciate the relative-ness of the pixel. Now, very few web site designers want
to worry about that relationship. So, for the ordinary web site designer, the pixel behaves
more like an absolute unit than a relative unit.
Despite all what I have said, some browsers may show small weaknesses. Test your
design with different browsers and correct the weaknesses. You probably have this
question, “How do I master the design of web pages by percentage?” From what I have
explained, it is not a big deal. However, if you are a newby to web site design, you can
gain confidence quickly by doing one of the following:
a) Give yourself web page design projects and use the percentage as the dimension unit,
following all the advice I have given you in this article.
b)Go back to some of your previously design web pages and convert the units from pixels
to percentages, following all the advice I have given you in this article.
Summary and Guidelines
- Design you web page at the highest computer screen resolution that you think
your users have.
- Apart from images, do not give dimensions to any HTML element unless you
- If you have to give dimensions to elements, give only the width dimensions to
large containing elements, Tables, Table Columns and images; do not give the
width dimension to anything else unless it is very necessary.
- Give your width dimensions in percentage and know the property the percentage
is relative to.
- Test your design with different browsers and make any design adjustment
necessary, for browser compatibility.
In this video we will start with a folder of images and in about 30 minutes construct a very simple 2 column layout using CSS to style our page! We will learn all about using divs, creating CSS rules, targeting divs, creating a background, and so much more! Start learning to harness the raw power of Cascading Style Sheets to create, layout, and style your web pages today!