** - Στην τελευταία γραμμή του JCE Editor, πατάμε στο εικονίδιο **Insert/Edit Image** (Εισαγωγή/Επεξεργασία Εικόνας) - Στον **Image Manager** που ανοίξαμε, στο κάτω μέρος στο κεντρικό πλαίσιο, μπαίνουμε στον φάκελο **''kerkyra''** και πατάμε πάνω στην εικόνα **''kerkyra3-small''**. - Παρατηρούμε ότι συμπληρώθηκε στο πάνω πλαίσιο, στην καρτέλα **image**, το πεδίο **URL**, με **''images/kerkyra/kerkyra3-small.jpg''**, αυτό δηλαδή που θα μπει στο **''''**. Επίσης το **Alternate text**, με **''kerkyra3-small.jpg''** που θα μπει στο **''''**. Αλλάζουμε το **''kerkyra3-small.jpg''** σε **''Κερκυρα - εικόνα 3''**. - Αντιγράφουμε το **''Κερκυρα - εικόνα 3''** και πατάμε στο πάνω πλαίσιο, πάνω στην καρτέλα **Advanced** και το κάνουμε επικόλληση στο πεδίο **Title**, αυτό θα μπει στο **''''**. - Είμαστε έτοιμοι, οπότε κάνουμε κλικ στο **Insert**. Η εικόνα μας εμφανίστηκε. Πάμε να δούμε την html που δημιουργήθηκε (εικονίδιο <>). - Βλέπουμε ότι η 3η ετικέτα **''''** έχει επιπλέον **''title="Κέρκυρα - εικόνα 3" alt="Κέρκυρα - εικόνα 3"''**. Ομοίως αντιγράφουμε και εισάγουμε και τις 2 ιδιότητες αυτές σε κάθε μία από τις 2 παραπάνω εικόνες ως **''Κέρκυρα - εικόνα 1''** στην 1η εικόνα και ως **''Κέρκυρα - εικόνα 2''** στην 2η εικόνα, αντίστοιχα. - Πατάμε στο εικονίδιο **Toggle Full Screen Mode** για να φύγουμε από την πλήρη οθόνη, αποθηκεύουμε με **✔ Αποθήκευση** και βλέπουμε στον **ΙΣΤΟΤΟΠΟ** την αλλαγή. - Στον **ΙΣΤΟΤΟΠΟ** περνάμε με το ποντίκι πάνω από την 1η εικόνα. Θα πρέπει να μας εμφανιστεί μια **περιγραφή-βοήθεια (tooltip)** με το κείμενο **Κέρκυρα - εικόνα 1**. Ομοίως αντίστοιχα το βλέπουμε και στις άλλες 2 εικόνες. * Η ιδιότητα **''title''** εμφανίζει μια **περιγραφή-βοήθεια (tooltip)** όταν περνάμε με το ποντίκι πάνω από την εικόνα και η ιδιότητα **''alt''** εμφανίζει το **εναλλακτικό κείμενο** εάν δεν εμφανιστεί η εικόνα (σε σπάνιες περιπτώσεις σε περιηγητές). Και οι δύο ιδιότητες είναι απαραίτητες για της μηχανές αναζήτησης για να καταχωρήσουν την εικόνα μας. - **ΕΙΚΟΝΕΣ ΣΕ ΑΡΘΡΑ - html - JCE - Παρίσι** * Θα εισάγουμε τις εικόνες και για το Παρίσι. Επειδή η διαδικασία μοιάζει με την προηγούμενη, μπορούμε να κρατάμε 2 καρτέλες για την ΔΙΑΧΕΙΡΙΣΗ, μία για την **''Κέρκυρα''** και μια για το **''Παρίσι''**, ώστε να μπορούμε να κάνουμε αντιγραφή επικόλληση αν χρειαστεί. - Ανοίγουμε 2η καρτέλα ΔΙΑΧΕΙΡΙΣΗΣ πατώντας με το **μεσαίο** πλήκτρο του ποντικιού στον σύνδεσμο πάνω δεξιά **ΔΙΑΧΕΙΡΙΣΗ**. Σε αυτήν την 2η καρτέλα μπαίνουμε στην επεξεργασία για το άρθρο **''Κέρκυρα''**. - Στην 1η καρτέλα, μπαίνουμε στην επεξεργασία για το άρθρο **''Παρίσι''**. - Αλλάζουμε την εμφάνιση σε **html** και κάτω από το κείμενο **''Η πόλη του Παρισιού''** εισάγουμε την εικόνα **''paris1-small.jpg''** με την ετικέτα της html που γνωρίζουμε. Στις ιδιότητες **''alt''** και **''title''** βάζουμε την περιγραφή **''Παρίσι - εικόνα 1''**. (Υπόδειξη: Στην 2η καρτέλα που ανοίξαμε, θα βλέπουμε σε πλήρη οθόνη την html στο άρθρο **Κέρκυρα** και θα αντιγράψουμε - τροποποιήσουμε τον κώδικα από εκεί. Για την τροποποίηση υπάρχει και **Εύρεση (Find) - Αντικατάσταση (Replace)**, π.χ. **''Κέρκυρα -> Παρίσι''** και **''kerkyra -> paris''**) - Με όμοιο τρόπο, πάντα σε html, εισάγουμε την εικόνα **''paris2-small.jpg''** με την περιγραφή **''Παρίσι - εικόνα 2''**. - Δεν χρειαζόμαστε άλλο την 2η καρτέλα με το άρθρο **Κέρκυρα**, αλλά **ΠΡΟΣΟΧΗ! ΔΕΝ** την κλείνουμε κατευθείαν από τον περιηγητή. Στην 2η καρτέλα, φεύγουμε από την πλήρη Οθόνη και πατάμε **Κλείσιμο** για να φύγουμε και από το άρθρο **Κέρκυρα**. Τώρα μπορούμε να κλείσουμε την καρτέλα αυτή, από τον περιηγητή μας με ασφάλεια. - Στην 1η καρτέλα στο άρθρο **Παρίσι**, την 3η εικόνα **''paris3-small.jpg''**, με την περιγραφή **''Παρίσι - εικόνα 3''**, θα την εισάγουμε από τον JCE, όπως κάναμε και για την 3η εικόνα της **Κέρκυρας**. - Αποθηκεύουμε με **✔ Αποθήκευση** και βλέπουμε στον **ΙΣΤΟΤΟΠΟ** τις αλλαγές. Θα πρέπει να έχουν εμφανιστεί και οι 3 εικόνες για το Παρίσι και όταν θα περνάμε με το ποντίκι πάνω από αυτές να μας εμφανίζονται οι βοηθητικές περιγραφές (**''Παρίσι - εικόνα 1''** κτλ..) |{{:el:school:lessons:html:joomla_html_fullscreen_kerkyra.jpg?280|Κέρκυρα - html}}|{{:el:school:lessons:html:joomla_jce_image_manager_kerkyra.jpg?280|JCE Image Manager}}|{{:el:school:lessons:html:joomla_images_paris.jpg?280|Παρίσι - Εικόνες}}|