<!-->
<!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)
Η ετικέτα <img>
Ορισμός και χρήση
Με την ετικέτα <img> εισάγουμε μια εικόνα στην σελίδα μας
Ετικέτες τέλους: </img>
Περισσότερα για τις εικόνες
Ετικέτες τέλους: </img>
Περισσότερα για τις εικόνες
Παράδειγμα
| Πηγαίος Κώδικας | Αποτέλεσμα στον browser |
|---|---|
| <img src="images/bird.jpg"> |  |
Διαφορές στην χρήση μεταξύ της HTML4.01 και την HTML5
Στην HTML5 κάποιες ιδιότητες της HTML 4.01 έχουν αφαιρεθεί
Ιδιότητες
| Ιδιότητα | Τιμή | Περιγραφή |
|---|---|---|
| align | baseline, top, middle, bottom, absmiddle, absbottom, left, right |
ΔΕΝ ΣΥΜΠΕΡΙΛΑΜΒΑΝΕΤΑΙ ΣΤΗΝ HTML5 Ορίζει την στοίχιση της εικόνας με το κείμενο που βρίσκετε δίπλα της |
| alt | Κείμενο | Ορίζει εναλλακτικό κείμενο (χρησιμοποιείται για τους browsers που δεν υποστηρίζουν την εμφάνιση γραφικών) |
| border | αριθμός pixels | ΔΕΝ ΣΥΜΠΕΡΙΛΑΜΒΑΝΕΤΑΙ ΣΤΗΝ HTML5 Ορίζει το πάχος του περιγράμματος της εικόνας |
| height | αριθμός pixels % |
Ορίζει το ύψος της εικόνας |
| hspase | αριθμός pixels | ΔΕΝ ΣΥΜΠΕΡΙΛΑΜΒΑΝΕΤΑΙ ΣΤΗΝ HTML5 Ορίζει τον κενό χώρο μεταξύ της εικόνας και των υπόλοιπων περιεχομένων της σελίδας που βρίσκονται αριστερά και δεξιά του |
| ismap | URL | Ορίζει την εικόνα σαν "χάρτη" |
| src | URL | Ορίζει το URL του αρχείου της εικόνας |
| usemap | URL | Ορίζει έναν χάρτη επάνω στην εικόνα με τον οποίον μπορούμε να έχουμε links σε διάφορα σημεία μέσα στην εικόνα Δείτε επίσης: <map> <area> |
| vspase | αριθμός pixels | ΔΕΝ ΣΥΜΠΕΡΙΛΑΜΒΑΝΕΤΑΙ ΣΤΗΝ HTML5 Ορίζει τον κενό χώρο μεταξύ της εικόνας και των υπόλοιπων περιεχομένων της σελίδας που βρίσκονται επάνω και κάτω του |
| width | αριθμός pixels % |
Ορίζει το μήκος της εικόνας |
Κοινές (standard) ιδιότητες που μπορεί να πάρει η ετικέτα:
Η ετικέτα <img> υποστηρίζει τις standard ιδιότητες της HTML5
HTML Γεγονότα που μπορεί να πάρει η ετικέτα:
Η ετικέτα <img> υποστηρίζει τις ιδιότητες events της HTML5
Δοκίμασε το
Στοίχιση εικόνας
Πώς μπορώ να στοιχίσω μια εικόνα με το γειτονικό της κείμενο;
Πώς μπορώ να στοιχίσω μια εικόνα με το γειτονικό της κείμενο;
Σελίδα με φόντο μια εικόνα
Πώς μπορώ να βάλω μια εικόνα σαν φόντο στην σελίδα μου;
Πώς μπορώ να βάλω μια εικόνα σαν φόντο στην σελίδα μου;
Εικόνα σαν φόντο σε έναν πίνακα
Πώς μπορώ να βάλω μια εικόνα σαν φόντο σε ολόκληρο πίνακα ή σε ορισμένα κελιά αυτού;
Πώς μπορώ να βάλω μια εικόνα σαν φόντο σε ολόκληρο πίνακα ή σε ορισμένα κελιά αυτού;
Link σε μια εικόνα
Πώς μπορώ να βάλω link σε μια εικόνα;
Πώς μπορώ να βάλω link σε μια εικόνα;
