Html Tricks of The Masters

When browsing the Internet if you see a web site doing something you like or are curious on how they did you can view the source code. See document CH000746 for additional information about how to do this.
Your main page should, in one way or another, link to ALL main sub pages. Or links to sub pages, which then links to sub pages.
When making your web page, always create links and image file names in lower case. Most people will be searching for text in lower case and because a file name is going to be case sensitive it will help prevent problems down the road with linking.
If you’re making a smaller web page it’s ok to place all files: web page, pictures, sounds, etc. in one directory. However, if you plan on making hundreds of different pages with sounds or images, we would recommend that you place these files in different directories or if thousands of pictures think about another server.
See the promoting a web page section for a full listing of free secrets and tips in advertising your web site and getting it higher in search engines.
When creating links to your sub pages or images, do not put your full URL. Instead type the path location. This makes any future transition easier and for pages with a lot of different links can slightly help load times. To move forward in a folder type: a href=”folder/file”, where folder is a sub folder of the directory you’re currently in. If you need to move back a folder you’d time a href=”../file”, where the ../ moves back one directory.
When creating your web page, make it about one topic and extend only upon that one topic. When people are looking up information they’re usually only interested about the thing they’re looking up, e.g. music, computers, etc. If your page has information about golf, dogs, books, computers, etc. some people may become distracted or think it’s about something they’re not interested in and leave.
Check the web page for errors.

Quickly edit or view the properties of any web page by using the Firefox browser plug-in Firebug or the bookmarklet version of Firebug for other browsers. This free tool is an absolute must for anyone who develops websites or blogs. Below is a quick overview of this plug-in and an example of just a few of the many powerful features it provides.

Quickly view the HTML and CSS source of any element

When Firebug is open, clicking the element preview button, as shown in the picture to the right, will allow you to see the properties of any element on the web page you are looking at. This makes finding and looking at the HTML and CSS of anything on a web page as easy as two or three clicks.

Tip: In addition to the above suggestion after Firebug has been installed you can also right-click on any element on a web page and choose the “Inspect Element” option.

Modify HTML or CSS elements within Firebug and see immediate results

When viewing the HTML or CSS source code within Firebug you can click any element and change or add to that element and immediately see those changes. For example, if you were wanting to adjust the color of your links you could modify the HTML or CSS code through Firebug and see what it looks like on the page without uploading or reloading.

Analyze the page speed load time

In addition to the above mentioned features, Google has released Page Speed, a Firebug plug-in that has the capability of testing how fast a web page loads and gives you a easy to read overview of things that can be fixed or may be slowing down the web page.

View overview of all elements on a page

In Firebug, under the Net tab and under All, you can quickly view all elements on a web page and additional details about each of those elements. For example, you can quickly identify the size of each of the files loaded, domain loaded from, header information, and much more.

Facebook
Twitter
Pinterest