Cool HTML Tricks

We will look at some cool HTML tricks that are needed to be known when you design a website. When you create a new Web site, you will have to move the Web content (that is, the HTML documents, graphics, animation, sound, and other support files) from your development computer to the Web server. If your Web pages contain links to pages stored in the same or related folders (such as a subfolder or parent folder), you can save yourself considerable time and work by using relative pathnames when referencing files in the Web page HTML tags. When a site visitor clicks on a hypertext link, the Web browser uses the pathname given by the hyperlink's "href" attribute to locate the file the browser is to retrieve. When specifying the location of a file, you can use either an absolute or a relative pathname. Suppose, for example, that you have a graphics file named clock.jpg located in the folder named Folder_B, and that Folder_B, in turn, is located within a folder named Folder_A. A relative path consists of the folder names the browser needs to navigate to get to the file starting at the location of the Web page with the hyperlink that references the external file. For example, if clock.jpg is located in the Folder_B, and the Web page that references clock.jpg is located in Folder_A, the relative pathname for clock.jpg in the current Web page is Folder_B/clock.jpg. In other words, the current folder contains Folder_B, which in turn, contains the file clock.jpg. The following <> tag uses a src attribute with a relative pathname.

< p >< img src="Folder_A/clock.jpg" mce_src="Folder_A/clock.jpg" >< /p >

A relative pathname instructs the Web browser to start looking for the file within the folder that contains the current HTML document. Say for example that the HTML document that contains the image in the <> tag in the preceding example is located in a folder named idx_folder. The relative pathname in the src attribute then implies the folder named Folder_A is located within the idx_folder. Absolute paths, on the other hand, locate a file by starting at the top level of the folder hierarchy and moving downward through all the intervening folders to reach the file-without regard to the location of the current Web document. Absolute paths always begin with a slash (/) to differentiate them from relative paths. Suppose, for example, that clock.jpg is located on the D drive in the folder named Folder_B, which is located within the folder named Folder_A. To specify an absolute pathname, you must tell the browser where to look for the file starting with the drive on which the folder with the file is located. The following code shows the absolute pathname for clock.jpg in the current example:

< p >< img src="/D:Folder_A/Folder_B/clock.jpg" mce_src="../D:Folder_A/Folder_B/clock.jpg" >< /p >

Using absolute pathnames makes moving Web site files from a local drive to a Web server or from one Web server to another difficult. For example, to use relative pathnames successfully, you need only to create on the Web server a main folder for the site and then place all the documents and support files into subfolders within the main folder-as they are on your development machine. The relative pathnames will be as valid on the Web server as they are on your system-even if the remainder of the Web server's folder hierarchy is nothing like yours. Conversely, if you use absolute addresses, the Web server must have exactly the same folder hierarchy as that found on your development system in order for the Web server to be able to find the files referenced in hyperlinks within your Web pages.

You can display within your Web browser the Web pages you create and save to a local or network drive-without first connecting to the Internet or a Web server. Simply enter the pathname of the .html (Web page) file as File://<.html file pathname> into the Web browser's Address field. Thus, if you save a Web page name TestPage.htm in the MyWebs folder at the root (that is, top) folder on your C drive, you can display the page in your Web browser by entering File://C:/MyWebs/TestPage.htm. To make your Web pages available to others across the Internet, you must have a Web server. A Web server is also required if you want to execute server-side scripts (programs that the server runs on the behalf of your Web page). If you are using one of the Windows operating systems (Windows 95, 98, Me, NT, or XP) you can install the Personal Web Server (PWS) on your personal PC or network workstation free of charge. After you install the PWS and establish an Internet connection, other users on the Web can view the Web pages you publish on your system. In addition, you can use the PWS to test Web pages that submit form results and pages with server-side scripts, such as those embedded in PHP and Active Server Pages.

There are some software applications which can help you a lot in creating your own. Free web software is available online and when you pay for the applications, the quality might be much better. You can try the Personal Web Manager for creating and managing your pages. After successfully installing the Personal Web Server (PWS), you have to work out on how to stop and start the Web server and determine the location of the server's home directory. The tool you will use for this purpose is Personal Web Manager, which you can open in different ways depending on your particular operating system.

The easiest way to start the Personal Web Manager is to double-click the program's icon in the Windows system tray (on the right-hand end of the Windows status bar). Or, on a Windows 98 system, select Start | Programs | Microsoft Personal Web Server and then choose Personal Web Manager. After you start the application, the Personal Web Manager will display the program's Main screen, which contains the name of your Web server and the server's home directory. The Web manager displays the name of your Web server in blue text near the top of the page. Anyone working at your computer or using another workstation on your local area network can use the Web server name to view Web pages on your PWS. (You can change the name of your Web server simply by changing the name of your PC on the Identification tab of the Control Panel, Network Properties dialog box.) The Main screen of the Personal Web Manager also shows you the PWS's root folder in blue text just beneath the name of your Web server. Knowing the name of the Web server and the home directory, you are ready to publish your Web pages. Suppose, for example, that your computer's name (and hence your PWS's name) is alex, and the server's home directory is C:\WebShare\wwwroot. If you place a Web page such as TestPage .htm, for example, into the C:\WebShare\wwwroot folder on your computer, you (and anyone using a workstation connected to your local area network) can display the Web page by typing http://alex/TestPage.htm into the Web browser's Address field and then pressing ENTER.

I hope that these cool HTML tricks will help you learn more about HTML and web design.