base href attribute
The href attribute on the base element:
Examples
| < | attribute | = | "value(s)" | > | Examples | ||
|---|---|---|---|---|---|---|---|
| 1. | href | = | URL | < href="http://www.example.com/folder1/"> < href="http://www.example.com/folder1/index.php"> |
Video demonstration base href attribute
HTML5 base href attribute, Tutorial
| min | video details |
|---|---|
| 00:01 | launching Firefox |
| 00:05 | accessing the html demo file |
| 00:07 | base tag allows you to set a base url for all relative urls in page taht don't precede it |
| 00:14 | one of the 2 attribute (href, target) or both, are required on base element |
| 00:20 | in this video we will demonstrate the <base> tag together with the href attribute |
| 00:24 | the file called "index_no_base_element.php" has no <base> tag inside it |
| 00:33 | inside head section, there's only 3 elements: meta, title and link; no base element |
| 00:38 | adding the <base> tag before link element inside the head section |
| 00:46 | adding also the href attribute to it |
| 00:52 | adding the value of the href attribute = a valid absolute url which will represent the base url; url which will resolve all relative urls in page |
| 00:54 | since we will upload this test file on w3v-test.com, we will specify the base(absolute) url as: http://www.w3v-test.com/ |
| 01:06 | note: all our resources are located inside the "basetest" folder: the main.css file, the images... |
| 01:24 | we can extend our base url to include this basetest directory too |
| 01:32 | thus, we no longer have to specify it on each resource → it can be removed → shorter relative urls |
| 01:43 | http://google.com is an absolute url; our fresh set base url has no impact on it; the base url impactes only relative urls AND only those which don't precede it |
| 01:53 | accessing on server an html page which does not contain the base url |
| 01:54 | in browser's first tab: the html page contains base element in browser's fsecond tab: the same html page but this one does not contain the base element |
| 02:11 | comparing the source code of the 2 html pages: - left side: base url present, includes basetest folder → the relative urls no longer contain basetest folder - right side: base url absent → basetest folder specified on all relative urls |
| 02:28 | TEST: - opening Location1 hyperlink, from the html page which includes a base url - opening Location1 hyperlink, from the html page which does not contain the base element |
| 02:43 | the resulting url is the same, opens the same page, no difference |