LinuxFanClub Wiki

Υπηρεσίες, Προγραμματισμός, Εκπαίδευση ..

User Tools

Site Tools


el:school:lessons:html:ergastirio:askisi8

HTML - Άσκηση 8 - Συνδέσμοι

  • Νέα :
    • Ετικέτες <A href=“”>
    • π.χ. <a href=“http://www.google.gr” target=“_blank”>Google</a>
    • <a name=“test1”> <a href=“#test1”>
    • <a href=“mailto:username@mail.com?subject=Δοκιμή”>



  1. Ανοίξτε την ιστοσελίδα askisi7c.html (Μαλδίβες).
  2. Αποθηκεύστε στο mathimata/html με όνομα askisi8a.html
  3. Εύρεση διευθύνσεων με πληροφορίες για τις Μαλδίβες
    1. Φτιάξτε στους Σελιδοδείκτες/Αγαπημένα έναν νέο φάκελο html. Μέσα στο html, νέο φάκελο maldives.
    2. Ψάξτε στο google για 3 ενδιαφέρουσες διευθύνσεις στο Internet που να περιέχουν πληροφορίες για τις Μαλδίβες. Χρησιμοποιήστε την λέξη Μαλδίβες στα ελληνικά για αποτελέσματα με ελληνικό κείμενο, αν θέλετε βάλτε και 1-2 άλλες λέξεις μαζί για να αναζητήσετε κάτι συγκεκριμένο για τις Μαλδίβες..
    3. Ανοίξτε τους συνδέσμους από τα αποτελέσματα του google πατώντας με το μεσαίο πλήκτρο του ποντικιού για να εμφανιστούν σε νέες καρτέλες που θα τις κρατάτε ανοιχτές.
    4. Προσθέστε έναν σελιδοδείκτη για κάθε χρήσιμη διεύθυνση που βρήκατε στον φάκελο maldives που φτιάξατε πριν στους σελιδοδείκτες.
  4. Στο τέλος της σελίδας εισάγετε έναν κεντραρισμένο κείμενο “Χρήσιμοι σύνδεσμοι” μεγέθους H3 κάτω από μια γραμμή.
  5. Από κάτω εισάγετε 3 συνδέσμους χωρίς την ιδιότητα target=“_blank”. Θα μας πηγαίνουν στην κάθε μια από τις 3 διευθύνσεις που βρήκατε προηγουμένως. Το κείμενο που θα είναι σύνδεσμος να είναι ένας περιγραφικός τίτλος για το περιεχόμενο της κάθε διεύθυνσης. Π.χ. Διακοπές στις Μαλδίβες
  6. Προσθέστε την ιδιότητα target=“_blank” στην ετικέτα <Α>
  7. Στην ιστοσελίδα σας έχετε ήδη 2-3 επεξεργασμένες εικόνες στις οποίες έχετε μειώσει διαστάσεις π.χ. maldives320x240.jpg. Θέλουμε κάποιος όταν κάνει κλικ πάνω στην μικρή εικόνα, να μας εμφανίζεται σε νέο παράθυρο/καρτέλα η εικόνα στο πλήρες μέγεθος π.χ maldives.jpg.
    • (Υπόδειξη :) Ο τρόπος είναι παρόμοιος με τους συνδέσμους πάνω σε κείμενο που μας στέλνουν σε μια άλλη ιστοσελίδα προορισμού. Εδώ αντί για το κείμενο του συνδέσμου θα βάλετε την μικρή εικόνα και αντί για ιστοσελίδα προορισμού θα βάλετε την διαδρομή της μεγάλης εικόνας
  8. Στο τέλος της σελίδας βάλτε μια επικεφαλίδα Συγγραφέας και από κάτω να εμφανίζεται το όνομά σας
    • Κάντε υπερσύνδεσμο το όνομά σας ώστε πατώντας σε αυτό να σας στέλνει κάποιος ένα e-mail.
    • Βρείτε ένα εικονίδιο (μικρή εικόνα έως 48×48) με ένα ταχυδρομικό κουτί (ψάξτε εικόνα για mail) και βάλτε και την εικόνα μαζί με το όνομά σας ως υπερσύνδεσμο.
  9. Στην αρχή της σελίδας προσθέστε ένα εσωτερικό συμβολικό όνομα top και στο τέλος της σελίδας έναν εσωτερικό υπερσύνδεσμο που να μας πηγαίνει εσωτερικά στην αρχή της σελίδας (με το κείμενο Πάνω)
    • Βρείτε ένα εικονίδιο (μικρή εικόνα έως 48×48) με ένα βελάκι προς τα πάνω και αντικαταστήστε το κείμενο Πάνω με το βελάκι




  • Εξάσκηση : Κάντε τα βήματα 1-7 για συνδέσμους και εικόνες από την Χαβάη (ανοίξτε το αρχείο askisi7d.html) που θα εμφανίζονται στο αρχείο askisi8b.html




  • Κάθε 1-2 γραμμές που πληκτρολογείτε, αποθηκεύετε με CTRL-S
  • Για να δείτε το αποτέλεσμα ανοίξτε το αρχείο html από έναν περιηγητή (Firefox,IE) ή εάν το έχετε ήδη ανοίξει πατήστε F5 για επαναφόρτωση
  • Εναλλαχθείτε στον περιηγητή και στον επεξεργαστή html με ALT-TAB
el/school/lessons/html/ergastirio/askisi8.txt · Last modified: Y/m/d H:i by vagk