

BlueGriffon provides an efficient way to convert an absolute URL to a relative URL merely select the checkbox "Make URL relative to page location". In the example of the Tutorial site we are building, entering second_page.html without anything in front of it tells the browser that the URL is relative and it should look for the file second_page.html URL in the same directory as the file that contains index.html (this is the file that contains the link). Instead of starting with a protocol and an address, the path of a relative URL starts wherever the current page or document is located. Web pages can easily have tens to hundreds of links, so having to change all of them each time a directory is moved would make managing a web site very unpleasant and error-prone. If at a later time you decide to move the location of your site to a different web address or change the location of a directory within a site, you would have go back and change all the links in the site to point to the new location. There is a serious drawback to using an absolute URL here, however. ends with "/Tutorial_Site/second_page.html" if you followed the suggestions aboveīut the bits in the middle will vary depending upon the operating system in use and the organizational choices you made when you created this web folder.begins with "file:///" (since you are viewing content on your local system), and.When you selected your second_page.html file, BlueGriffon filled in an absolute URL which: The absolute URL format is necessary to properly locate information on external sites, such as "". "http:", "file:"), it is an absolute URL. If a URL starts with a / (the forward-slash character used to separate the names of folders or directories within a URL) or a protocol (e.g. When creating websites, it's a very good idea to understand how this works. The way that the the path of the link is written tells the browser if the link is relative or absolute. In the resulting dialogue, select the "Select a file" icon and navigate to the second_page.html file. To reduce the irritation of those who prefer to use their pointing device, we will not include more parenthetical clues such as this one.) (If you prefer keyboard shortcuts, you have probably already discovered Alt+i followed by Alt+l. Highlight (select) the word that will contain the link, then click on the "Insert or edit a link" icon near the top center of the BlueGriffon window. This example will just use one word as a link. (Text is selected by clicking and dragging the mouse, in much the same way you would in a word processor.) Links can be associated with words, sentences, paragraphs, individual letters or even spaces. Select the tab for the first page, edit it to add and then select some text that will serve as a link to the second page. Note that the first page is still displayed in its own tab. In the example, the file for the second page is called second_page.html (Note the underscore). Remember to avoid spaces in the file name. This time when it comes time to name the HTML file, you need to name it something other than index.html, as filenames must be unique within a directory. These are the same steps that were used to save the first page. For now just enter some new text in the page, select the "Save file to a local location" icon, give the page a title, and save the page in the Tutorial_Site directory. (Or use Alt+f then Alt+n to accomplish the same goal.) A new blank page will appear in a new tab. To make another page in your site, just select the "Create a new page" icon in the upper left corner of the BlueGriffon window. First, there needs to be another page to link to.
