el:school:lessons:html:ergastirio:askisi7b

HTML - Άσκηση 7c - Εικόνες - επεξεργασία με gimp

  • Επανάληψη :
    • Ετικέτες <IMG src=“”>
  • Νέα :
    • Ετικέτες <IMG align=“..”>
    • Μείωση μεγέθους εικόνας με gimp




  1. Ανοίξτε την ιστοσελίδα askisi7b.html (ή αν δεν την έχετε, ανοίξτε την askisi5.html)
  2. Αποθηκεύστε στο X:/mathimata/html/ με όνομα askisi7c.html
  3. Αν δεν έχετε ήδη, δημιουργήστε έναν φάκελο eikones μέσα στον φάκελο που έχετε αποθηκεύσει την askisi7c.html.
    • Μέσα στον φάκελο eikones δημιουργήστε νέο υποφάκελο maldives.
  4. Ψάξτε στο google (από τον σύνδεσμο εικόνες) για 2 εικόνες μεγάλου μεγέθους ( διαστάσεις πάνω από 640×480) από τις Μαλδίβες (συμβουλή χρησιμοποιήστε την λέξη στα αγγλικά δηλαδή maldives για περισσότερα αποτελέσματα) και αποθηκεύστε τις μέσα στον φάκελο maldives.
  5. Εμφανίζουμε τις εικόνες γράφοντας τον κώδικα που πρέπει στο αρχείο askisi7c.html (χωρίς την χρήση των παραμέτρων width και height)
  6. Ανοίξτε το πρόγραμμα επεξεργασίας εικόνας gimp
  7. Ανοίξτε την 1η εικόνα από τις Μαλδιβες μέσα από το gimp (συμβουλή : σύρετε τον φάκελο eikones από την πάνω μπάρα στο αριστερό πλαίσιο Τοποθεσίες για να κάνετε μια συντόμευση για τις επόμενες φορές)
  8. Gimp : Από το μενού Εικόνα/Μέγεθος εικόνας, αλλάζουμε το ύψος σε 240px και προσέχουμε το πλάτος (που θα αλλάξει αυτόματα αφού είναι κλειδωμένες οι αναλογίες) να είναι κάτω από 400px. Αλλιώς δοκιμάζουμε ύψος 200px.
    • Σημειώνουμε το ύψος θα το χρειαστούμε στο όνομα αρχείου. ύψος : _ _ _ _ _ px, πλάτος _ _ _ _ _ px
    • Τέλος πατάμε Κλίμακα για να γίνει η αλλαγή.
  9. Gimp : Από το μενού Αρχείο/Αποθήκευση ως αποθηκεύουμε προσθέτοντας στο τέλος του ονόματος _ (κάτω παύλα) και το ύψος x το πλάτος.
    • Π.χ. εάν το όνομα της εικόνας ήταν maldives1.jpg και αλλάξαμε ύψος σε 240px και πλάτος σε 320px απόθηκεύουμε ως maldives1_240x320.jpg.
  10. Επαναλαμβάνουμε τα βήματα 6 έως 9 για την 2η εικόνα
  11. Εμφανίζουμε τις νέες εικόνες που δημιουργήσαμε, γράφοντας τον κώδικα που πρέπει στο αρχείο askisi7c.html (χωρίς την χρήση των παραμέτρων width και height)
  12. Από τον περιηγητή αρχείων πηγαίνουμε στον φάκελο που έχει τις εικόνες.
    • (Συμπληρώνουμε δίπλα τα μεγέθη)
    • Κάνουμε δεξί κλικ πάνω στις αρχικές εικόνες (πριν την επεξεργασία) και από τις ιδιότητες βρίσκουμε τα μεγέθη αρχείων. Αρχικό μέγεθος _ _ _ _ _ _ _ KB
    • Ομοίως βρίσκουμε τα μεγέθη των εικόνων με τις μικρότερες διαστάσεις που δημιουργήσαμε : Τελικό μέγεθος _ _ _ _ _ _ _ KB
  13. ΣΤΟΙΧΙΣΗ ΕΙΚΟΝΑΣ
    • Μεταφέρουμε την εικόνα σε ένα σημείο όπου να έχει αμέσως μετά κείμενο.
    • Στοιχίζουμε την εικόνα αριστερά σε σχέση με το κείμενο
    • Στοιχίζουμε την εικόνα δεξιά σε σχέση με το κείμενο


  • Εξάσκηση : Κάντε τα βήματα 1-12 για εικόνες από την Χαβάη.
    • Ανοίξτε την ιστοσελίδα askisi7a.html (ή αν δεν την έχετε την askisi6.html)
    • Αποθηκεύστε στο X:/mathimata/html/ με όνομα askisi7d.html
    • Συνεχίστε τα βήματα 3-13 όπως στην Άσκηση με τις Μαλδίβες




  • Κάθε 1-2 γραμμές που πληκτρολογείτε, αποθηκεύετε με CTRL-S
  • Για να δείτε το αποτέλεσμα ανοίξτε το αρχείο html από έναν περιηγητή (Firefox,IE) ή εάν το έχετε ήδη ανοίξει πατήστε F5 για επαναφόρτωση
  • Εναλλαχθείτε στον περιηγητή και στον επεξεργαστή html με ALT-TAB
  • Επαναλάβετε συχνά τα παραπάνω βήματα μέχρι το αποτέλεσμα στον περιηγητή να είναι όμοιο με την παρακάτω Εικόνα











el/school/lessons/html/ergastirio/askisi7b.txt · Last modified: Y/m/d H:i by vagk