# Πώς να χρησιμοποιήσετε την ετικέτα HTML base για να ορίσετε μια βασική διεύθυνση URL

Το HTML `<base>` χρησιμοποιείται για τον ορισμό της βασικής διεύθυνσης URL όλων των σχετικών διευθύνσεων URL. Αυτό γίνεται μέσω του χαρακτηριστικού `href`. Το δεύτερο χαρακτηριστικό `target` ορίζει πού θα ανοίξουν οι αντίστοιχοι στόχοι αναφοράς. Η ετικέτα HTML `<base>` αποθηκεύεται πάντα μέσα στο στοιχείο `<head>`.

## Τι είναι η ετικέτα HTML `<base>`;

Η ετικέτα HTML `<base>` ορίζει τη βασική διεύθυνση URL για όλες τις σχετικές διευθύνσεις URL σε έναν ιστότοπο. Περιλαμβάνει τα δύο χαρακτηριστικά HTML href και target.

Το χαρακτηριστικό href καθορίζει τη διεύθυνση URL που θα χρησιμεύσει ως **αναφορά για όλες τις σχετικές διευθύνσεις URL, εικόνες, φύλλα στυλ και σενάρια σε ένα έγγραφο HTML**. Αυτή η βασική διεύθυνση URL μπορεί να είναι και η ίδια σχετική. Το χαρακτηριστικό target καθορίζει το όνομα του παραθύρου στο οποίο **θα ανοίγουν** όλοι **οι συνδεδεμένοι προορισμοί**. Επιπλέον, η ετικέτα HTML `<base>` μπορεί να καθορίσει τον τρόπο με τον οποίο θα ανοίγουν οι σύνδεσμοι στο τρέχον έγγραφο.

Η ετικέτα HTML `<base>` αποθηκεύεται πάντα μέσα στο στοιχείο `<head>` και πρέπει να χρησιμοποιείται όσο το δυνατόν νωρίτερα στον κώδικα. Εάν υπάρχουν πολλές ετικέτες `<base>`, λαμβάνεται υπόψη μόνο η πρώτη, ενώ όλες οι άλλες αγνοούνται.

## Ποια είναι η σύνταξη του HTML `<base>`;

Η βασική σύνταξη του HTML `<base>` έχει ως εξής:

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

## Παραδείγματα για το πώς λειτουργεί `<base>`

### Αποθήκευση της βασικής διεύθυνσης URL

Στο πρώτο παράδειγμα, αποθηκεύουμε τη βασική διεύθυνση URL `https://www.example-website.com` στην περιοχή κεφαλίδας ενός εγγράφου χρησιμοποιώντας την ετικέτα HTML `<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_0fbafc7a237311e59f9e728df26ec2340986ddc5</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>
```

### Ορισμός προεπιλεγμένου προορισμού για όλες τις διευθύνσεις URL

Στο επόμενο παράδειγμα, θα χρησιμοποιήσουμε το χαρακτηριστικό `target` για να καθορίσουμε πού πρέπει να ανοίγουν οι διευθύνσεις URL όταν πατιούνται:

```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_0fbafc7a237311e59f9e728df26ec2340986ddc5</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>
```

### Πρόσβαση σε μια βασική διεύθυνση URL με πολλαπλούς σχετικούς συνδέσμους

Στο τρίτο παράδειγμα, χρησιμοποιούμε HTML `<base>` για να δημιουργήσουμε μια βασική διεύθυνση URL που χρησιμοποιείται ως αρχική σελίδα από όλους τους σχετικούς συνδέσμους. Ο κώδικας έχει την εξής μορφή:

```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_0fbafc7a237311e59f9e728df26ec2340986ddc5</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>
```

## Ποια χαρακτηριστικά υποστηρίζει η ετικέτα HTML `<base>`;

Η ετικέτα `<base>` υποστηρίζει μόνο τα χαρακτηριστικά `href` και `target`.

- **`href`**: Η βασική διεύθυνση URL για όλες τις σχετικές διευθύνσεις URL στη σελίδα καθορίζεται μέσω `href`. Η τιμή αυτού του χαρακτηριστικού καθορίζεται πάντα με τη μορφή διεύθυνσης URL. Στα παραπάνω παραδείγματα, αυτή η τιμή είναι `https://www.example-website.com`.
- **`target`**: Το `target` χαρακτηριστικό καθορίζει σε ποιο παράθυρο πρέπει να ανοίξει μια διεύθυνση URL. Μπορεί να έχει τις τιμές `_blank`, `_parent`, `_self` και `_top`. `_blank` ανοίγει τον σύνδεσμο σε ένα νέο παράθυρο, `_parent` ανοίγει τον σύνδεσμο σε ένα πλαίσιο υψηλότερου επιπέδου, `_self` ανοίγει τον σύνδεσμο στο ίδιο παράθυρο και `_top` ανοίγει τον σύνδεσμο στο παράθυρο του προγράμματος περιήγησης, αντικαθιστώντας τη σελίδα σύνδεσης αντί να την παρουσιάζει ως πλαίσιο μέσα στη σελίδα.

Tip Στον Ψηφιακό Οδηγό μας, μπορείτε να βρείτε περισσότερα ενημερωτικά άρθρα σχετικά με την HTML. Μεταξύ άλλων, θα βρείτε ένα ολοκληρωμένο σεμινάριο για αρχάριους, καθώς και μια επισκόπηση των καλύτερων επεξεργαστών HTML.


This is a markdown version of: [https://www.ionos.com/el-gr/digitalguide/istoselides/anaptyxi-istoselidon/basi-html/](https://www.ionos.com/el-gr/digitalguide/istoselides/anaptyxi-istoselidon/basi-html/) for AI/LLM consumption.