# HTML-base-tagin käyttö perus-URL-osoitteen määrittämiseen

HTML `<base>` käytetään määrittelemään kaikkien suhteellisten URL-osoitteiden perus-URL. Tämä tehdään attribuutin `href` avulla. Toinen attribuutti `target` määrittelee, missä vastaavat viitteet avataan. HTML `<base>` -tagi tallennetaan aina `<head>` elementtiin.

## Mikä on HTML `<base>` -tagi?

HTML-tagi `<base>` määrittää kaikkien verkkosivuston suhteellisten URL-osoitteiden perus-URL-osoitteen. Se sisältää kaksi HTML-attribuuttia: href ja target.

Href-attribuutti määrittää URL-osoitteen, jota käytetään **viitteenä kaikille suhteellisille URL-osoitteille, kuville, tyylitiedostoille ja skripteille HTML-dokumentissa**. Tämä perus-URL-osoite voi itsekin olla suhteellinen. Target-attribuutti määrittää ikkunan nimen, jossa kaikki **linkitetyt kohteet avataan**. Lisäksi HTML `<base>` -tagilla voidaan määrittää, miten nykyisen dokumentin linkit avataan.

HTML `<base>` -tagi tallennetaan aina `<head>` -elementtiin, ja sitä tulisi käyttää mahdollisimman varhaisessa vaiheessa koodissa. Jos `<base>` -tageja on useita, vain ensimmäinen otetaan huomioon, ja kaikki muut jätetään huomiotta.

## Mikä on HTML `<base>`:n syntaksi?

HTML `<base>`:n perusrakenteet ovat seuraavat:

```html
<base href="URL" target="TARGET">
```

## Esimerkkejä siitä, miten `<base>` toimii

### Perus-URL:n tallentaminen

Ensimmäisessä esimerkissä tallennamme perus-URL-osoitteen `https://www.example-website.com` asiakirjan otsikkoalueelle HTML-tagilla `<base>`:

```html
<html>
<head>
<title>HTML: base Tag example</title>
<base href="https://www.example-website.com" />
</head>
<body>
<p>
Here’s your website content.
</p>
<div class="hash d-none" hidden>hash_910abe6ebfce3e1376dc83cbf7e73acfdd955011</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
</html>
```

### Oletuskohteen määrittäminen kaikille URL-osoitteille

Seuraavassa esimerkissä käytämme `target` -attribuuttia määrittämään, missä URL-osoitteet avautuvat, kun niitä napsautetaan:

```html
<html>
<head>
<title>HTML: base Tag example</title>
<base href="https://www.example-website.com" target="_self">
</head>
<body>
<p>
Here’s your website content.
</p>
<div class="hash d-none" hidden>hash_910abe6ebfce3e1376dc83cbf7e73acfdd955011</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
</html>
```

### Useita suhteellisia linkkejä sisältävän perus-URL-osoitteen avaaminen

Kolmannessa esimerkissä käytämme HTML `<base>` luodaksemme perus-URL-osoitteen, jota kaikki suhteelliset linkit käyttävät aloitussivuna. Koodi näyttää tältä:

```html
<html>
<head>
<title>HTML: base Tag example</title>
<base href="https://www.example-website.com/">
</head>
<body >
<h2>Various subpages</h2>
<ul>
<li><a href="/first_subpage/index.htm">First Subpage</a></li>
<li><a href="/second_subpage/index.htm">Second Subpage</a></li>
</ul>
<div class="hash d-none" hidden>hash_910abe6ebfce3e1376dc83cbf7e73acfdd955011</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
</html>
```

## Mitä attribuutteja HTML `<base>` -tagi tukee?

Tunniste `<base>` tukee vain attribuutteja `href` ja `target`.

- **`href`**: Sivulla olevien kaikkien suhteellisten URL-osoitteiden perus-URL määritetään `href`. Tämän attribuutin arvo määritetään aina URL-osoitteen muodossa. Yllä olevissa esimerkeissä tämä arvo on `https://www.example-website.com`.
- **`target`**: `target` määrittää, missä ikkunassa URL-osoite avataan. Sen arvot voivat olla `_blank`, `_parent`, `_self` ja `_top`. `_blank` avaa linkin uudessa ikkunassa, `_parent` avaa linkin ylemmän tason kehyksessä, `_self` avaa linkin samassa ikkunassa ja `_top` avaa linkin selainikkunassa korvaamalla linkittävän sivun sen sijaan, että se esitetään kehyksenä sivulla.

Vinkki Digitaalisesta oppaastamme löydät lisää informatiivisia artikkeleita HTML:stä. Löydät muun muassa kattavan aloittelijan oppaan sekä katsauksen parhaista HTML-editorista.


This is a markdown version of: [https://www.ionos.com/fi-fi/digitalguide/verkkosivustot/verkkosivujen-kehittaeminen/html-pohja/](https://www.ionos.com/fi-fi/digitalguide/verkkosivustot/verkkosivujen-kehittaeminen/html-pohja/) for AI/LLM consumption.