Τι είναι μια ιστοσελίδα; Κατάλογος των κύριων στοιχείων της ιστοσελίδας

Το μεγαλύτερο μέρος του περιεχομένου που παρουσιάζεται στοΤο Διαδίκτυο είναι μια ιστοσελίδα. Αυτός είναι ο ιστορικός πρώτος τύπος εγγράφων που προορίζονται για τοποθέτηση σε εικονικό δικτυακό χώρο, αλλά εξακολουθεί να διατηρεί τη συνάφεια του και πρακτικά να μην έχει ανταγωνιστικές μορφές. Ποια είναι η δομή των ιστοσελίδων; Τι εργαλεία ανάπτυξης ιστού δημιουργούν;

Τι είναι μια ιστοσελίδα;

"Λίστα των κύριων στοιχείων μιας ιστοσελίδας" -μας λέει ο εξεταστής στην επιστήμη υπολογιστών στην τάξη. Τι μπορούμε να του πούμε σε αντάλλαγμα; Πρώτα απ 'όλα, πρόκειται να πούμε για την ιστοσελίδα κατ' αρχήν.

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

Τόπος και ρόλος των ιστοσελίδων στη δομή του ιστοτόπου

Μπορείτε να πείτε ότι η ιστοσελίδα είναι η κύριασυστατικό ιστότοπου; Αυτό ισχύει εν μέρει. Ωστόσο, όπως σημειώσαμε παραπάνω, μια ιστοσελίδα είναι απλά ένα έγγραφο κειμένου. Ο ιστότοπος περιλαμβάνει κατά κανόνα εικόνες, βίντεο και άλλα στοιχεία πολυμέσων. Μια ιστοσελίδα δεν μπορεί να τα περιέχει, αλλά στη δομή της μπορεί να περιέχει συνδέσμους προς αυτά. Έτσι, η ιστοσελίδα μπορεί να ονομαστεί το κύριο συστατικό του ιστότοπου στην πλευρά του ηγετικού ρόλου στην απεικόνιση του εικονικού περιεχομένου στους χρήστες.

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

Η αρχή του υπερκειμένου

Έτσι μια ιστοσελίδα είναι ένα έγγραφοπου έχει συνταχθεί σε HTML, με την οποία πραγματοποιείται σήμανση υπερκειμένου. Αλλά τι είναι αυτό το φαινόμενο; Τι είναι το hypertext; Χωρίς να μπαίνουμε βαθιά στη θεωρία, διαπιστώνουμε ότι αυτό είναι ένα κείμενο που με τον ένα ή τον άλλο τρόπο σας επιτρέπει να έχετε γρήγορη πρόσβαση σε μια άλλη - μέσω συνδέσμων. Σε ένα κανονικό βιβλίο, αυτό είναι αδύνατο - υπάρχει "απλό κείμενο". Για να αποκτήσετε πρόσβαση στην επιθυμητή σελίδα, ο αναγνώστης πρέπει να κάνει μερικές ανατροπές, προτού διαβάσετε το περιεχόμενο ή τις υποσημειώσεις. Στη λειτουργία "υπερκειμένου", το κύριο μέρος της εργασίας γίνεται από τον υπολογιστή - λόγω των πληροφοριών που αντανακλώνται στα στοιχεία HTML της σελίδας.

Αν ένας δάσκαλος πληροφορικής μας λέει: "Λίστα των κύριων στοιχείων της ιστοσελίδας", τότε μπορούμε να ξεκινήσουμε σωστά την ιστορία για τα στοιχεία του αντίστοιχου εγγράφου, τα οποία δημιουργούνται χρησιμοποιώντας τη γλώσσα σήμανσης HTML. Επομένως, αρχικά, θα εξετάσουμε ορισμένα θεωρητικά σημεία σχετικά με το HTML.

Δομή γλώσσας HTML: ετικέτες

Πώς διαβάζει το πρόγραμμα περιήγησης τα απαραίτητα δεδομένα σχετικά με μια ιστοσελίδα από ένα έγγραφο γραμμένο σε HTML; Πολύ απλό.

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

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

Χαρακτηριστικά

Άλλα βασικά στοιχεία μιας γλώσσας HTML είναι χαρακτηριστικά. Με τη βοήθειά τους, ο δημιουργός της ιστοσελίδας μπορεί να ορίσει τις ιδιότητες του περιεχομένου - για παράδειγμα, το ύψος της γραμματοσειράς, το χρώμα του, τη θέση σε σχέση με τη σελίδα. Το ίδιο ισχύει για εικόνες, βίντεο και άλλα στοιχεία πολυμέσων. Τα χαρακτηριστικά είναι γραμμένα μέσα στην ετικέτα ανοίγματος.

Περιεχόμενο

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

Στοιχεία ιστοσελίδας

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

Στοιχεία ιστοσελίδας: Κεφαλίδα

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

Ποια είναι η ιδιαιτερότητα του τίτλου; Βρίσκεται στην κορυφή της ιστοσελίδας. Στον κώδικα HTML που σχηματίζει τον τίτλο, κατά κανόνα, μόνο το κείμενο είναι "κρυπτογραφημένο", αλλά εάν είναι απαραίτητο, μικρά ένθετα γραφικών μπορούν επίσης να τοποθετηθούν στο αντίστοιχο στοιχείο. Και αυτό, στην πραγματικότητα, είναι το μόνο που μπορεί να λεχθεί για τον τίτλο. Φαίνεται ότι ο ρόλος της στη δομή του σχετικού εγγράφου είναι αμελητέος. Αλλά δεν είναι. Οι επικεφαλίδες των ιστοσελίδων είναι πολύ σημαντικές όσον αφορά την ευρετηρίαση τοποθεσιών στις μηχανές αναζήτησης - Yandex, Google. Αυτό το στοιχείο θα πρέπει να είναι απολύτως συναφές με το περιεχόμενο της ιστοσελίδας, καθώς και με τη θεματική ιδιαιτερότητα του ιστοτόπου.

Πώς καθορίζεται ο τίτλος της ιστοσελίδαςχρησιμοποιώντας γλώσσα HTML; Πολύ απλό. Πρώτον, γράφεται μια ετικέτα ανοίγματος, η οποία πάντα μοιάζει με HEAD με γωνιακούς βραχίονες, τότε - τα περιεχόμενα του τίτλου μετά από - την ετικέτα κλεισίματος. Είναι γραμμένα, φυσικά, στην κορυφή του εγγράφου ιστού.

Η κεφαλίδα του εγγράφου ιστού μπορεί να περιλαμβάνει έναν αριθμόπρόσθετα στοιχεία. Μερικές φορές η μορφή μιας ιστοσελίδας μπορεί να απαιτεί την εμφάνιση κειμένου σε μια συγκεκριμένη κωδικοποίηση. Πώς να διασφαλίσετε ότι το έγγραφο web πληροί αυτό το κριτήριο; Πολύ απλό. Στη δομή της κεφαλίδας του εγγράφου πρέπει να τοποθετηθούν αλγόριθμοι HTML που καθοδηγούν το πρόγραμμα περιήγησης να χρησιμοποιεί μια συγκεκριμένη κωδικοποίηση γλώσσας - για παράδειγμα, κυριλλικά. Οι αντίστοιχες εντολές τοποθετούνται μέσα στην ετικέτα META, η οποία, όπως και οι άλλες, ανοίγει και κλείνει.

Κύρια ιστοσελίδα

Το κύριο μέρος ενός εγγράφου web ανοίγει με μια ετικέτα.BODY, κλείνεται με το αντίστοιχο στοιχείο, συμπεριλαμβανομένης μιας κάθετης. Ταυτόχρονα, μεταξύ των ετικετών ανοίγματος και κλεισίματος μπορεί να υπάρχει ένας τεράστιος αριθμός πρόσθετων εντολών γλώσσας σήμανσης υπερκειμένου. Αυτό οφείλεται στο γεγονός ότι το κύριο μέρος της ιστοσελίδας περιέχει το χρήσιμο περιεχόμενό της - κείμενα, συνδέσμους, γραφικά, βίντεο, διάφορες φόρμες που συμπληρώνουν.

Κάθε ένα από τα σχετικά είδη περιεχομένου έχειετικέτες. Η δομή του κύριου μέρους ενός εγγράφου ιστού μπορεί να περιέχει εντολές HTML που επίσης βοηθούν στη διαμόρφωση κειμένου - για παράδειγμα, δίνοντας σε μια γραμματοσειρά ένα ορισμένο χρώμα, μέγεθος και άλλες ιδιότητες.

Εξετάστε ποιες είναι οι ιδιαιτερότητες κάποιων κοινά χρησιμοποιούμενων ετικετών HTML. Στην πραγματικότητα, αποτελούν επίσης τα κύρια στοιχεία μιας ιστοσελίδας.

Βασικές ετικέτες HTML

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

Η ετικέτα P. είναι αρκετά συνηθισμένη. Αυτός, όπως και άλλα παρόμοια στοιχεία της γλώσσας σήμανσης υπερκειμένου, μπορεί να ανοίγει και να κλείνει. Αυτή η ετικέτα σας επιτρέπει να διαμορφώσετε μια μόνο παράγραφο του εγγράφου. Μπορείτε, για παράδειγμα, να ορίσετε για αυτό ένα συγκεκριμένο τύπο γραμματοσειράς ή το χρώμα του. Ωστόσο, αυτό γίνεται χρησιμοποιώντας την προαιρετική ετικέτα - FONT. Ταυτόχρονα θα τοποθετηθεί μέσα σε εκείνο που υποδεικνύει τα όρια των παραγράφων - αυτό θα επιτρέψει να μην διανέμεται η εντολή HTML, που αντανακλά τον τύπο της προτιμώμενης γραμματοσειράς, σε άλλα στοιχεία της ιστοσελίδας.

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

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

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

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

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

Ειδικά εργαλεία ανάπτυξης ιστού

Εκτός από τα παραπάνω, μπορούμε να το διευκρινίσουμεετικετών και χαρακτηριστικών που παρέχονται από τα πρότυπα της HTML - ένα τεράστιο ποσό. Εκτός από το HTML, οι προγραμματιστές ιστού μπορούν να χρησιμοποιήσουν πρόσθετα εργαλεία για τη μορφοποίηση εγγράφων υπερκειμένου. Για παράδειγμα, χρησιμοποιώντας τη γλώσσα δέσμης ενεργειών JavaScript, μπορείτε να δημιουργήσετε δυναμικές ιστοσελίδες - δηλαδή εκείνες στις οποίες το περιεχόμενο ενημερώνεται συνεχώς (τόσο λόγω των ενεργειών του ίδιου του χρήστη όσο και σύμφωνα με τους αλγορίθμους που έχουν γραφτεί προηγουμένως στα σενάρια).

Θα είναι χρήσιμο να προσθέσετε ότι ένας προγραμματιστής ιστού μπορείχρησιμοποιήστε πλήρεις γλώσσες προγραμματισμού στο έργο τους, όπως για παράδειγμα Perl, PHP, Java, Python, με τις οποίες οι δυνατότητες εργασίας με έγγραφα hypertext γίνονται ακόμη ευρύτερες. Η ανάγκη για αυτό μπορεί να οφείλεται στο γεγονός ότι τα πεδία εφαρμογής των τεχνολογιών του Διαδικτύου σήμερα είναι πολύ διαφορετικά. Τα καθήκοντα που αντιμετωπίζουν οι σύγχρονοι προγραμματιστές μπορεί να είναι πολύ περίπλοκες. Για παράδειγμα, είναι μερικές φορές απαραίτητο να μεταφράσουμε ιστοσελίδες γραμμένα στα ρωσικά στα αγγλικά. Σε αυτή την περίπτωση, η εργαλειοθήκη του προγραμματιστή θα είναι η πιο ποικιλόμορφη.