<!-->
<!DOCTYPE>
<a>
<abbr>
<acronym>
<address>
<applet>
<area>
<article> (HTML5)
<aside>(HTML5)
<audio> (HTML5)
<b>
<base>
<basefont>
<bdo>
<big>
<blockquote>
<body>
<br>
<button>
<canvas> (HTML5)
<caption>
<center>
<cite>
<code>
<col>
<colgroup>
<command> (HTML5)
<datalist> (HTML5)
<dd>
<del>
<details> (HTML5)
<dfn>
<dir>
<div>
<dl>
<dt>
<em>
<embed> (HTML5)
<fieldset>
<figcaption> (HTML5)
<figure> (HTML5)
<font>
<footer> (HTML5)
<form>
<frame>
<frameset>
<h1> - <h6>
<head>
<header> (HTML5)
<hgroup> (HTML5)
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<keygen> (HTML5)
<kbd>
<label>
<legend>
<li>
<link>
<map>
<mark> (HTML5)
<menu>
<meta>
<meter> (HTML5)
<nav> (HTML5)
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output> (HTML5)
<p>
<param>
<pre>
<progress> (HTML5)
<q>
<rp> (HTML5)
<rt> (HTML5)
<ruby> (HTML5)
<s>
<samp>
<script>
<section> (HTML5)
<select>
<small>
<source> (HTML5)
<span>
<strike>
<strong>
<style>
<sub>
<summary> (HTML5)
<sup>
<table>
<tbody>
<td>
<textarea>
<tfoot>
<th>
<thead>
<time> (HTML5)
<title>
<tr>
<tt>
<u>
<ul>
<var>
<video> (HTML5)
<wbr> (HTML5)
<!DOCTYPE>
<a>
<abbr>
<acronym>
<address>
<applet>
<area>
<article> (HTML5)
<aside>(HTML5)
<audio> (HTML5)
<b>
<base>
<basefont>
<bdo>
<big>
<blockquote>
<body>
<br>
<button>
<canvas> (HTML5)
<caption>
<center>
<cite>
<code>
<col>
<colgroup>
<command> (HTML5)
<datalist> (HTML5)
<dd>
<del>
<details> (HTML5)
<dfn>
<dir>
<div>
<dl>
<dt>
<em>
<embed> (HTML5)
<fieldset>
<figcaption> (HTML5)
<figure> (HTML5)
<font>
<footer> (HTML5)
<form>
<frame>
<frameset>
<h1> - <h6>
<head>
<header> (HTML5)
<hgroup> (HTML5)
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<keygen> (HTML5)
<kbd>
<label>
<legend>
<li>
<link>
<map>
<mark> (HTML5)
<menu>
<meta>
<meter> (HTML5)
<nav> (HTML5)
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output> (HTML5)
<p>
<param>
<pre>
<progress> (HTML5)
<q>
<rp> (HTML5)
<rt> (HTML5)
<ruby> (HTML5)
<s>
<samp>
<script>
<section> (HTML5)
<select>
<small>
<source> (HTML5)
<span>
<strike>
<strong>
<style>
<sub>
<summary> (HTML5)
<sup>
<table>
<tbody>
<td>
<textarea>
<tfoot>
<th>
<thead>
<time> (HTML5)
<title>
<tr>
<tt>
<u>
<ul>
<var>
<video> (HTML5)
<wbr> (HTML5)
Η ετικέτα <area>
Ορισμός και χρήση
Η ετικέτα <area> ορίζει μια περιοχή μέσα σε μια εικόνα ως link.
Η ετικέτα <area> τοποθετείται πάντα μέσα στις ετικέτες <map>
και </map>:
<map ....>
<area ....>
</map>
Για να ορίσουμε μια περιοχή μέσα σε μια εικόνα ως link, χρησιμοποιούμε την ιδιότητα usemap της ετικέτας <img>, η οποία αναφέρεται στην ιδιότητα name της ετικέτας <map>
Ετικέτα τέλους: καμία
<map ....>
<area ....>
</map>
Για να ορίσουμε μια περιοχή μέσα σε μια εικόνα ως link, χρησιμοποιούμε την ιδιότητα usemap της ετικέτας <img>, η οποία αναφέρεται στην ιδιότητα name της ετικέτας <map>
Ετικέτα τέλους: καμία
Παράδειγμα
| Πηγαίος Κώδικας | Αποτέλεσμα στον browser |
|---|---|
| <img src="shapes.gif" width="152" height="152" border="0" usemap="#shapesMap" / > <map name="shapesMap"> <area shape="rect" coords="62,20,103,59" href="clickOnTriangle.html" / > <area shape="rect" coords="27,76,58,103" href="clickOnSquare.html" / > <area shape="rect" coords="93,84,141,120" href="clickonCircle" / > </map> |
|
Διαφορές στην χρήση μεταξύ της HTML4.01 και την HTML5
Στην HTML5 έχουν προστεθεί μερικές νέες ιδιότητες, ενώ μερικές άλλες έχουν αφαιρεθεί
Ιδιότητες
| Ιδιότητα | Τιμή | Περιγραφή |
|---|---|---|
| alt | Κείμενο | Ορίζει το κείμενο που θα εμφανιστεί αν ο browser δεν υποστηρίζει την δυνατότητα των περιοχών-links μέσα σε μια εικόνα. Χρησιμοποιείται μόνο όταν υπάρχει η ιδιότητα href |
| coords | - Αν shape="rect" τότε cords="αριστερά,πάνω,δεξιά,κάτω" - Αν shape="circ" τότε cords="κέντρο κύκλου Χ, κέντρο κύκλου Υ,ακτίνα κύκλου" - Αν shape="poly" τότε cords="σημείοΧ,σημείοΥ, σημείοΧ1,σημείοΥ1,..., σημείοN,σημείοN" |
Ορίζει το μέγεθος του σχήματος, ανάλογα την τιμή της ιδιότητας shape, χρησιμοποιώντας pixels |
| href | URL | Ορίζει το URL του συνδέσμου |
| hreflang (HTML5) | κωδικός γλώσσας (GR για τα ελληνικά, EN για τα αγγλικά, κτλ) | Ορίζει την γλώσσα που χρησιμοποιείται στην σελίδα που δείχνει η ιδιότητα href. Χρησιμοποιείται μόνο όταν υπάρχει η ιδιότητα href |
| media (HTML5) | τύπος media | Ορίζει τον τύπο του media που δείχνει το URL. Χρησιμοποιείται μόνο όταν υπάρχει η ιδιότητα href |
| nohref | true false |
ΔΕΝ ΣΥΜΠΕΡΙΛΑΜΒΑΝΕΤΑΙ ΣΤΗΝ HTML5 Ορίζει την συγκεκριμένη περιοχή της εικόνας μη ενεργή |
| ping (HTML5) | URL (μπορεί να πάρει περισσότερα από ένα url, χωρισμένα με κόμμα) | Ορίζει το ή τα URL το οποίο ή τα οποία θα ενημερωθούν με ping όταν ο χρήστης ακολουθήσει το link που ορίζει η ιδιότητα href. Χρησιμοποιείται μόνο όταν υπάρχει η ιδιότητα href |
| rel (HTML5) | alternate archives author bookmark contact external first help icon index last license next nofollow noreferrer pingback prefetch prev search stylesheet sidebar tag up |
Ορίζει την σχέση μεταξύ της τρέχουσας σελίδας και της σελίδας που δείχνει το URL της ιδιότητας href. Χρησιμοποιείται μόνο όταν δεν υπάρχει η ιδιότητα href |
| shape | rect rectangle circ circle poly polygon |
Ορίζει το σχήμα της περιοχής |
| target | _blank _parent _self _top |
Ορίζει το παράθυρο που θα ανοίξει ο σύνδεσμος
|
| type (HTML5) | τύπος αρχείου | Ορίζει τον τύπο του περιεχομένου του εγγράφου που δείχνει το URL της ιδιότητας href |
Κοινές (standard) ιδιότητες που μπορεί να πάρει η ετικέτα:
Η ετικέτα <area> υποστηρίζει τις standard ιδιότητες της HTML5
HTML Γεγονότα που μπορεί να πάρει η ετικέτα:
Η ετικέτα <area> υποστηρίζει τις ιδιότητες events της HTML5
