HTML iframe: παράδειγμα και χαρακτηριστικά εφαρμογής. Πώς να εισαγάγετε ένα iframe σε HTML: παράδειγμα χρήσης Ποια προγράμματα περιήγησης υποστηρίζουν την ετικέτα iframe

Οδηγίες

Γλώσσα HTML(Γλώσσα σήμανσης υπερκειμένου - «γλώσσα σήμανσης υπερκειμένου») παρέχει δύο τύπους πλαισίων. Το "Floating" είναι πιο ευέλικτο και πιο εύκολο να εισαχθεί σε ένα υπάρχον. Σε γενικές γραμμές, η κατασκευή που περιγράφει την εισαγωγή ενός παραθύρου χρησιμοποιώντας ένα πλωτό πλαίσιο μοιάζει με αυτό: Εδώ, η πηγή δεδομένων για αυτό το πλαίσιο είναι η υπάρχουσα τοποθεσία (χαρακτηριστικό src). Θα ανοίξει σε ένα πλαίσιο διαστάσεων 400 επί 300, όπως υποδεικνύεται στις ιδιότητες πλάτους και ύψους. Μπορείτε επίσης να καθορίσετε τη σελίδα του ιστότοπού σας στο χαρακτηριστικό src. Σε αυτήν την περίπτωση, αρκεί να καθορίσετε μια σχετική διεύθυνση (δηλαδή μια διεύθυνση σε σχέση με τη σελίδα στην οποία έχει εισαχθεί το πλαίσιο): Σε αυτό το παράδειγμα, το ύψος του πλαισίου δεν καθορίζεται, αλλά υπάρχει ένα χαρακτηριστικό id. Χρησιμοποιώντας το μπορείτε χρησιμοποιώντας CSS() ορίστε τις απαιτούμενες διαστάσεις για αυτό το πλαίσιο:

Ένας άλλος τύπος πλαισίων - "κλασικό" - απαιτεί μια ξεχωριστή σελίδα που θα περιέχει μια περιγραφή της δομής των πλαισίων. Τα ίδια τα πλαίσια θα βρίσκονται σε ξεχωριστές σελίδες, ίσως ακόμη και σε ξεχωριστούς ιστότοπους. Ο κώδικας HTML για μια τέτοια σελίδα κοντέινερ για πλαίσια μπορεί να μοιάζει με αυτό:




Χωρίς μπλοκ ... Και ... , που απαιτούνται για κανονικές σελίδες, δεν πρέπει να βρίσκονται εδώ. Σε αυτό το παράδειγμα, η ετικέτα ανοίγματος κοντέινερ περιέχει το χαρακτηριστικό rows - αυτό σημαίνει ότι ο χώρος της σελίδας πρέπει να διαιρεθεί κατακόρυφα και θα δοθεί το πρώτο πλαίσιο πάνω μέρος. Εάν αντικαταστήσετε τις σειρές με στήλες, η διαίρεση θα είναι οριζόντια. Η τιμή αυτού του χαρακτηριστικού "*,*" υποδεικνύει ότι οι αναλογίες διαχωρισμού είναι ίσες - 50% η καθεμία. Εάν καθορίσετε, για παράδειγμα, "20%,*", τότε μόνο το 20% θα δοθεί στο πρώτο πλαίσιο και ο υπόλοιπος χώρος θα δοθεί στο δεύτερο. Ο χρήστης μπορεί να αλλάξει αυτές τις αναλογίες σύροντας τα όρια του τα καρέ με το ποντίκι, αλλά είναι δυνατό να απαγορευτεί αυτή η ενέργεια. Για να το κάνετε αυτό, πρέπει να προσθέσετε το χαρακτηριστικό noresize στην ετικέτα ενός συγκεκριμένου πλαισίου. Μπορείτε επίσης να καθορίσετε το μέγεθος των κατακόρυφων και οριζόντιων περιθωρίων από το διπλανό πλαίσιο (χαρακτηριστικά πλάτος περιθωρίου και ύψος περιθωρίου): Είναι δυνατό να ορίσετε κανόνες συμπεριφοράς για τις γραμμές κύλισης κάθε καρέ ξεχωριστά. Αυτό γίνεται χρησιμοποιώντας το χαρακτηριστικό scrolling, το οποίο μπορεί να περιέχει μία από τις τρεις προκαθορισμένες τιμές. Εάν καθορίσετε scrolling="auto", τότε θα εμφανιστούν γραμμές κύλισης όταν τα περιεχόμενα του πλαισίου δεν χωρούν στα όριά του. Εάν "ναι" - οι ρίγες θα υπάρχουν συνεχώς, ανεξάρτητα από το αν χρειάζονται. Εάν "όχι" - αυτό θα σημαίνει ότι οι γραμμές κύλισης είναι απενεργοποιημένες για αυτό το πλαίσιο.

Με βάση τις πληροφορίες που παρουσιάστηκαν στα δύο προηγούμενα βήματα, πρέπει να δημιουργήσετε κώδικα html που είναι πιο κατάλληλος για την επίλυση του προβλήματός σας. Μετά από αυτό, το μόνο που μένει είναι να το εισαγάγετε στον πηγαίο κώδικα της σελίδας. Για να το κάνετε αυτό, μπορείτε να χρησιμοποιήσετε το πρόγραμμα επεξεργασίας σελίδων του συστήματος διαχείρισης του ιστότοπού σας - ανοίξτε σε αυτό επιθυμητή σελίδα, μεταβείτε στη λειτουργία επεξεργασίας κώδικα html και επικολλήστε τον κώδικα στο επιθυμητό μέρος της σελίδας. Μπορείτε να κατεβάσετε το αρχείο; πηγαίος κώδικαςΦιλοξενία διαχείρισης διαχείρισης αρχείων σελίδας ή σύστημα διαχείρισης περιεχομένου, ανοίξτε το επεξεργαστής κειμένουκαι επικολλήστε τον κωδικό σε αυτό. Στη συνέχεια, χρησιμοποιήστε την ίδια μέθοδο για να ανεβάσετε τον αλλαγμένο κώδικα πίσω στον διακομιστή.

Στην αρχή της δημιουργίας ιστοτόπων, οι πόροι Ιστού χρησιμοποιούσαν ευρέως πλαίσια για την εμφάνιση μεμονωμένων τμημάτων σελίδων. Αλλά με την άφιξη νέα έκδοσηΗ HTML 5 έχει αλλάξει τα πάντα. Στοιχεία σήμανσης<πλαίσιο>, <σύνολο πλαισίων> και<noframes> θεωρούνται απαρχαιωμένα. Αντικαταστάθηκαν από μία μόνο ετικέτα -<iframe>. Πώς να προσθέσετε σε html

Στην παραπάνω σήμανση, αρκεί να αντικαταστήσετε τη διεύθυνση του ιστότοπου με οποιαδήποτε άλλη και, εάν χρειάζεται, να προσαρμόσετε το μέγεθος του πλαισίου.

Στοιχείο .

Συμβουλή:Για να προσαρμόσετε το στυλ ενός στοιχείου

Ετικέτα κλεισίματος

Απαιτείται.

Γνωρίσματα

ευθυγραμμίζω Deprecated Καθορίζει τον τρόπο με τον οποίο το πλαίσιο είναι στοιχισμένο στις άκρες και πώς το κείμενο αναδιπλώνεται γύρω του. επιτρεπόμενη οθόνηΕπιτρέπει στο πλαίσιο να μεταβεί σε λειτουργία πλήρους οθόνης. επιτρέπουν τη διαφάνειαΠροσαρμοσμένες Εγκαταστάσεις διάφανο φόντοπλαίσιο μέσα από το οποίο είναι ορατό το φόντο της σελίδας. πλαίσιο πλαισίουΜόνο HTML4 Ορίζει εάν θα εμφανίζεται ένα περίγραμμα γύρω από το πλαίσιο ή όχι. ύψοςΎψος πλαισίου HTML5 σε εικονοστοιχεία CSS, HTML4 σε εικονοστοιχεία ή ποσοστό. hspaceΚαταργήθηκε το οριζόντιο περιθώριο από το πλαίσιο στο περιβάλλον περιεχόμενο. ύψος περιθωρίουΜόνο HTML4 Επένδυση στο επάνω και στο κάτω μέρος από το περιεχόμενο έως το περίγραμμα του πλαισίου. πλάτος περιθωρίουΜόνο HTML4 Γέμισμα αριστερά και δεξιά από το περιεχόμενο μέχρι το περίγραμμα του πλαισίου. όνομαΌνομα πλαισίου. sandbox HTML5 Σας επιτρέπει να ορίσετε έναν αριθμό περιορισμών στο περιεχόμενο που έχει φορτωθεί στο πλαίσιο. κύλισηΟ τρόπος με τον οποίο εμφανίζεται η γραμμή κύλισης σε ένα πλαίσιο. αδιάλειπτη HTML5 Καθορίζει ότι τα περιεχόμενα του πλαισίου θα πρέπει να αποδίδονται σαν να ήταν μέρος του εγγράφου. srcΔιαδρομή προς το αρχείο του οποίου τα περιεχόμενα θα φορτωθούν στο πλαίσιο. srcdoc HTML5 Αποθηκεύει τα περιεχόμενα ενός πλαισίου απευθείας σε ένα χαρακτηριστικό. vspaceΚαταργήθηκε η κατακόρυφη μετατόπιση από το πλαίσιο στο περιβάλλον περιεχόμενο. πλάτοςΠλάτος πλαισίου HTML5 σε εικονοστοιχεία CSS, HTML4 σε εικονοστοιχεία ή ποσοστά.

Προεπιλεγμένο στυλ

Τα περισσότερα προγράμματα περιήγησης θα εμφανίσουν το στοιχείο

Οποιος Στυλ CSSτα στυλ που εφαρμόζονται σε ένα γονικό στοιχείο δεν θα εφαρμοστούν στο περιεχόμενο της ενσωματωμένης περιοχής, ούτε τα στυλ που εφαρμόζονται σε ενσωματωμένο περιεχόμενο γονικό στοιχείο.

Μπορείτε να καθορίσετε το μέγεθος για την ενσωματωμένη περιοχή χρησιμοποιώντας τα προαιρετικά χαρακτηριστικά πλάτους και ύψους ή χρησιμοποιώντας CSS. Συνήθως το προεπιλεγμένο μέγεθος είναι πλάτος 300 εικονοστοιχεία επί ύψος 150 εικονοστοιχεία, αλλά ανάλογα με το πρόγραμμα περιήγησης, το μέγεθος μπορεί να είναι διαφορετικό. Τα περισσότερα προγράμματα περιήγησης εμφανίζουν το περιεχόμενο του στοιχείου από προεπιλογή