Το iframe αποτελεί μια δυνατότητα που μας δίνει η γλώσσα html ώστε να παρουσιάσουμε μια σελίδα μέσα σε μια άλλη ιστοσελίδα.
Σύνταξη του iframe
Το iframe δηλώνεται στη γλώσσα HTML μέσω της ετικέτας <iframe> ως εξής:
<iframe src=”URL”></iframe>
Το χαρακτηριστικό src καθορίζει τη διεύθυνση URL της ενσωματωμένης ιστοσελίδας.
Καθορισμός ύψους και πλάτους του iframe
Το ύψος και το πλάτος του iframe καθορίζονται από τα χαρακτηριστικά height και width. Οι τιμές των χαρακτηριστικών καθορίζονται σε pixels από προεπιλογή. Όμως υπάρχει η δυνατότητα να καθοριστούν και ως ποσοστά επί τοις εκατό, για παράδειγμα 80%.
Ακολουθεί παράδειγμα καθορισμού των διαστάσεων του iframe:
——————————-
<!DOCTYPE html>
<html>
<body>
<iframe src=”http://www.dreamweaver.gr” height=”600″ width=”600″></iframe>
</body>
</html>
——————————-
Το αποτέλεσμα του καθορισμού ύψους και πλάτους του iframe φαίνεται στην εικόνα:
Αφαίρεση του περιγράμματος του iframe
Η προεπιλογή της γλώσσας HTML είναι να υπάρχει περίγραμμα γύρω από τα iframes. Εάν θελήσουμε να αφαιρέσουμε το περίγραμμα τότε θα πρέπει να προσθέσουμε το χαρακτηριστικό style και να χρησιμοποιήσουμε την κατάλληλη ιδιότητα μέσω του CSS. Ακολουθεί παράδειγμα που δείχνει πως μπορούμε να αφαιρέσουμε το περίγραμμα από ένα iframe:
——————————-
<!DOCTYPE html>
<html>
<body>
<iframe src=”http://www.dreamweaver.gr” height=”600″ width=”600″ style=”border:none;”></iframe>
</body>
</html>
——————————-
Το αποτέλεσμα της εφαρμογής του css στο iframe φαίνεται στην εικόνα:
Μέσα από το CSS μπορούμε επίσης να αλλάξουμε το χρώμα, το στυλ και το μέγεθος του περιγράμματος του πλαισίου. Αυτό φαίνεται στο παράδειγμα:
——————————-
<!DOCTYPE html>
<html>
<body>
<iframe src=”demo_iframe.htm” style=”border:2px solid grey;”></iframe>
</body>
</html>
——————————-
Χρήση του iframe ως target ενός συνδέσμου
Ένα iframe μπορεί να χρησιμοποιηθεί ως target frame για ένα σύνδεσμο. Σε αυτή την περίπτωση στο χαρακτηριστικό target του συνδέσμου θα πρέπει να αναφέρεται το όνομα του iframe. Ακολουθεί παράδειγμα που δείχνει αυτή τη δυνατότητα:
——————————-
<!DOCTYPE html>
<html>
<body>
<iframe height=”300px” width=”100%” src=”demo_iframe.htm” name=”iframe_a”></iframe>
<p><a href=”https://www.w3schools.com” target=”iframe_a”>W3Schools.com</a></p>
<p>When the target of a link matches the name of an iframe, the link will open in the iframe.</p>
</body>
</html>
——————————-
Προώθηση ιστοσελίδων και iframes
Η χρήση των iframes έχει καταστροφικό αποτέλεσμα όσον αφορά την προώθηση της ιστοσελίδας. Μαζί με τη χρήση του flash, η παρουσίαση περιεχομένου μέσω iframes μπορεί να καταστρέψει ολόκληρη την προσπάθεια προώθησης μιας ιστοσελίδας. Εάν θέλετε να ενσωματώσετε το περιεχόμενο μιας ιστοσελίδας στη δική σας, το καλύτερο που έχετε να κάνετε είναι να κάνετε αντιγραφή των πρώτων παραγράφων, κάνοντας μικρές αλλαγές στο κείμενο. Και στο τέλος να τοποθετήσετε σύνδεσμο προς την ιστοσελίδα που θα βάζατε στο iframe. Εναλλακτικά μπορείτε να βάλετε μια μικρή περίληψη, μια αντιπροσωπευτική εικόνα και ένα σύνδεσμο. Αυτό θα είναι καλό και για την προώθηση της ιστοσελίδας που θα ενσωματώνατε στο iframe, διότι θα λειτουργήσει ως ένα πολύτιμο backlink.
Κατασκευή ιστοσελίδων και iframes
Δεν συνιστούμε να χρησιμοποιήσετε iframes εντός των ιστοσελίδων που κατασκευάζετε. Υπάρχουν καλύτεροι τρόποι σύνδεσης του περιεχομένου μιας ιστοσελίδας με το περιεχόμενο μιας άλλης ιστοσελίδας. Καλύτεροι όσον αφορά τόσο το νόημα όσο και το εικαστικό κομμάτι της σύνδεσης. Ένας σύνδεσμος και μια αντιπροσωπευτική εικόνα επιτρέπουν στον επισκέπτη της ιστοσελίδας σας να αναγνωρίσει αν τον ενδιαφέρει το περιεχόμενο που θα τοποθετούσατε στο iframe. Και αν τον ενδιαφέρει, τότε να πλοηγηθεί προς αυτό το περιεχόμενο πατώντας πάνω στο σύνδεσμο. Με αυτό τον τρόπο θα κατασκευάζετε πολύ καλύτερες ιστοσελίδες. Αποτελεί καλή συνήθεια να αποφεύγει κάποιος τη χρήση των iframes στην κατασκευή ιστοσελίδων.
