Using the <BASE> tag when editing

Editing html5 & css3 Webpages
- using the <base> element url -

When answering a FreeHelp query, I am often presented with a problem that necessitates looking at and altering the HTML/CSS in the questioner's webpage.

Assuming that page has been published to http://freepages.genealogy.rootsweb.com/~username/, then the easiest way of dealing with it is to open the page, right click - "view source", copy the code and save to my local webpages folder.  If the source is being viewed in Firefox, then any linked stylesheet files can be opened directly and likewise copied and saved.

Most webpages also have a lot of image content and often those images have relative urls which creates a difficulty when opening the locally saved  problem.html  file in the default browser.  The simple response is to add a <base> tag in the head section of the  problem.html  file, e.g.

<base href="http://freepages.genealogy.rootsweb.com/~username/">

which then prepends the absolute path to any relative urls in the HTML and the CSS files.  This <base> tag is a not a new HTML5 element, as it first appeared in HMTL2 and had full support in Internet Explorer 5.5, but is generally little used and not well known.  The current <base> attribute support in HTML5 is marginally changed to that in HTML4.

So the  problem.html  page is being displayed locally in all its colorful glory, but there is one remaining difficulty, i.e. how to make changes to the CSS in the stylesheet  problem.css  file that was copied and saved.  The stylesheet link in the head section of the  problem.html  file is pointing to a relative link, e.g. <link rel="stylesheet" href="mystyles.css"> which the <base> tag is prepending with an absolute path, and those styles are being used by the browser when rendering the page content.  Well the answer is to comment out the existing link, <!--link rel="stylesheet" href="mystyles.css"--> and add a new absolute link, i.e.

<link rel="stylesheet" href="file:///C:/Users/User/Documents/Webpages/problem.css">

The <base> url will now not interfere with relative links within  problem.css  and it's now possible to modify that file and view the changes locally, with one proviso; any relative background urls will need to have their original absolute http://freepages.genealogy.rootsweb.com/~username/ path prepended to them.

If, as I have recently done, some <img src="filenames.jpg"> in the HTML file are to be transferred to the CSS as backgrounds, then grab those relative urls and paste them into the embedded styles in the head section -

<style>
#x-fade div:nth-of-type(1) {background: url('filename-1.jpg') no-repeat}
#x-fade div:nth-of-type(2) {background: url('filename-2.jpg') no-repeat}
</style>
- and this is a good place to keep them while sorting out the rest of the  problem.css  file, as they will inherit the absolute path from the <base> tag.  Once everything is working to expectations, use your text editors' "Find & Replace" utility to remove the absolute paths you added to the urls in the  problem.css  file.  Also remove your embedded styles and paste them into  problem.css .  Rename that file to  mystyles.css , uncomment the appropriate link in the HTML page, and remove the link to  problem.css .  Finally, don't forget to remove all the code related to the Rootsweb Banners, then save the HTML file with an appropriate name.  For instance, if the original file was  index.html , then save it as  username-index.html .

Both files can be sent back to the owner, and all that is required by them (after checking locally) is to rename the HTML file, then load both to the server.

Barry Carlson - 9 December 2014