HTML Iframes

Αν θέλετε μέσα στη σελίδα σας να προβάλετε μία άλλη σελίδα από το Web Site σας ή ακόμα και από ένα άλλο web site μπορείτε να το κάνετε εύκολα με την ετικέτα <iframe>. Η ετικέτα iframe ουσιαστικά είναι ένα παράθυρο που προβάλει μια σελίδα μέσα στη δική σας σελίδα και μπορείτε να την ορίσετε χρησιμοποιώντας την ετικέτα όπως στο παράδειγμα που ακολουθεί:

<iframe src=”web_page_url”></iframe>

Η ιδιότητα src είναι αυτή που δέχεται το URL της σελίδας που θα εμφανιστεί μέσα στο iframe.

Ορισμός πλάτους και ύψους για το iframe

Οι ιδιότητες Width και Height είναι αυτές που ορίζουν το πλάτος και το ύψος του iframe. Οι τιμές που συχνά χρησιμοποιούνται στις ιδιότητες πλάτους και ύψους είναι συχνά σε κουκκίδες (pixels) αλλά μπορείτε αν θέλετε να χρησιμοποιήσετε και τιμές σε ποσοστό (όπως για παράδειγμα 75%).

Στο παράδειγμα που ακολουθεί χρησιμοποιούμε τις ιδιότητες πλάτους και ύψους για να αλλάξουμε το πλάτος της ετικέτας iframe ώστε να προβάλει καλά την αρχική σελίδα του ιστολογίου μου.

<iframe src=”http://www.web-resources.eu” width=”950” height=”650”></iframe>

Δείτε το παράδειγμα ζωντανά

Αφαιρέστε το περίγραμμα στα iframe

Αν θέλετε να αφαιρέσετε το περίγραμμα στα iframes που χρησιμοποιείτε τότε θα πρέπει να ορίσετε την ιδιότητα frameborder σε μηδέν όπως στο παράδειγμα που ακολουθεί:

<iframe src=”http://www.web-resources.eu” width=”950” height=”650” frameborder=”0”></iframe>

Δείτε το παράδειγμα ζωντανά

Ένα iframe ως στόχος για ένα σύνδεσμο

Αν θέλετε μπορείτε σε ένα έγγραφο HTML να ορίσετε ένα iframe ως στόχο για συνδέσμους. Αυτό μπορεί να συμβεί αν ορίσετε την ιδιότητα name στο στοιχείο iframe και αν ορίσετε και την ιδιότητα target ενός συνδέσμου έτσι ώστε να έχουν την ίδια τιμή όπως συμβαίνει στο παράδειγμα που ακολουθεί:

<iframe src=”http://www.web-resources.eu” width=”950” height=”650” frameborder=”0” name=”frame_target”></iframe>
<br />
<a href=”http://www.nasa.gov” target=”frame_target”>NASA</a>

Δείτε τι παράδειγμα ζωντανά

[COL size=”one_half”]« HTML Frames[/COL] [COL size=’one_half’ last=’last’]

[/COL]

Leave a Reply