Η ιστοσελίδα html είναι. Δημιουργία ιστοσελίδων. Εκμάθηση της γλώσσας HTML. Στοιχεία ιστοσελίδας: Κεφαλίδα

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

Τι είναι το HTML και το CSS;

Η HTML (HyperText Markup Language) ορίζει τη δομή του περιεχομένου και τη σημασία του, ορίζοντας περιεχόμενο όπως επικεφαλίδες, παραγράφους ή εικόνες. Η CSS (Cascading Style Sheets) είναι μια γλώσσα παρουσίασης που δημιουργήθηκε για το στυλ της εμφάνισης του περιεχομένου, χρησιμοποιώντας, για παράδειγμα, γραμματοσειρές ή χρώματα.

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

Με αυτήν την κατανόηση της διαφοράς μεταξύ HTML και CSS, ας βουτήξουμε στην HTML με περισσότερες λεπτομέρειες.

Βασικοί όροι HTML

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

Στοιχεία

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

πριν

) και παραγράφους (ορίζονται ως

) Μπορείτε να συμπεριλάβετε στοιχεία στη λίστα ,

, , Και και πολλοί άλλοι.

Τα στοιχεία αναγνωρίζονται χρησιμοποιώντας γωνιακές αγκύλες<>, που περιβάλλει το όνομα του στοιχείου. Έτσι το στοιχείο θα μοιάζει με αυτό:

Ετικέτες

Προσθήκη γωνιακών βραχιόνων< и >δημιουργεί αυτό που είναι γνωστό ως ετικέτα γύρω από το στοιχείο. Οι ετικέτες εμφανίζονται συχνότερα σε ζεύγη ετικετών ανοίγματος και κλεισίματος.

Η ετικέτα ανοίγματος σηματοδοτεί την αρχή του στοιχείου. Αποτελείται από ένα σύμβολο<, затем идёт имя элемента и завершается символом >; Για παράδειγμα,

.

Η ετικέτα κλεισίματος σηματοδοτεί το τέλος του στοιχείου. Αποτελείται από ένα σύμβολο< с последующей косой чертой и именем элемента и завершается символом >; Για παράδειγμα,

.

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

Έτσι, οι ετικέτες συνδέσμων θα μοιάζουν κάπως έτσι:

...

Γνωρίσματα

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

Τα χαρακτηριστικά ορίζονται στην αρχική ετικέτα μετά το όνομα του στοιχείου. Γενικά, τα χαρακτηριστικά περιλαμβάνουν ένα όνομα και μια τιμή. Η μορφή για αυτά τα χαρακτηριστικά αποτελείται από το όνομα του χαρακτηριστικού ακολουθούμενο από ένα σύμβολο ίσου, ακολουθούμενο από την τιμή του χαρακτηριστικού σε εισαγωγικά. Για παράδειγμα, στοιχείο με το χαρακτηριστικό href θα μοιάζει με αυτό:

Shay Howe

Επίδειξη βασικών όρων HTML

Αυτός ο κώδικας θα εμφανίσει το κείμενο "Shay Howe" σε μια ιστοσελίδα και όταν κάνετε κλικ σε αυτό το κείμενο θα μεταφέρει τον χρήστη στο http://shayhowe.com. Το στοιχείο σύνδεσης δηλώνεται χρησιμοποιώντας μια ετικέτα ανοίγματος και ετικέτα κλεισίματοςκαλύπτοντας το κείμενο, καθώς και το χαρακτηριστικό και την τιμή της διεύθυνσης συνδέσμου που δηλώνεται μέσω του href="http://shayhowe.com" στην ετικέτα ανοίγματος.

Ρύζι. 1.01. Η σύνταξη HTML σε μορφή περιγράμματος περιλαμβάνει στοιχείο, χαρακτηριστικό και ετικέτα

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

Προσαρμογή της δομής εγγράφου HTML

Τα έγγραφα HTML είναι απλά έγγραφα κειμένου που αποθηκεύονται με την επέκταση .html αντί για .txt. Για να ξεκινήσετε να γράφετε HTML, χρειάζεστε πρώτα ένα πρόγραμμα επεξεργασίας κειμένου που να χρησιμοποιείτε άνετα. Δυστυχώς, αυτό δεν περιλαμβάνει Microsoft Wordή Σελίδες, καθώς πρόκειται για σύνθετους επεξεργαστές. Οι δύο πιο δημοφιλείς επεξεργαστές κειμένου για τη σύνταξη HTML και CSS είναι το Dreamweaver και το Sublime Text. Δωρεάν εναλλακτικές λύσειςεπίσης Notepad++ για Windows και TextWrangler για Mac.

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

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

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

Όλο το ορατό περιεχόμενο της ιστοσελίδας θα περιέχεται στο στοιχείο . Η δομή ενός τυπικού εγγράφου HTML μοιάζει με αυτό:

Γειά σου Κόσμε!

Αυτή είναι μια ιστοσελίδα.

Επίδειξη δομής εγγράφων HTML

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

Ώρα να ελέγξουμε τη δουλειά μας και να δούμε πώς συνεργάζονται το HTML και το CSS. Το άνοιγμα του αρχείου index.html (ή η ανανέωση της σελίδας εάν είναι ήδη ανοιχτή) στο πρόγραμμα περιήγησης θα πρέπει να εμφανίζει ένα ελαφρώς διαφορετικό αποτέλεσμα από πριν.

Ρύζι. 1.04. Ο ιστότοπος του συνεδρίου Styles με επαναφορά CSS

Επίδειξη και πηγαίος κώδικας

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

Περίληψη

Όλα καλά λοιπόν! Κάναμε μερικά μεγάλα βήματα σε αυτό το σεμινάριο.

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

Ανακεφαλαιώνοντας, καλύψαμε τα εξής:

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

Τώρα ας ρίξουμε μια πιο προσεκτική ματιά στο HTML και ας εξοικειωθούμε λίγο με τη σημασιολογία.

Πόροι και σύνδεσμοι

• Κοινοί όροι HTML μέσω Scripting Master
• Όροι & Ορισμοί CSS μέσω εντυπωσιακών ιστών
• Εργαλεία CSS: Επαναφέρετε το CSS μέσω του Eric Meyer

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

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

«Καταγράψτε τα κύρια στοιχεία μιας ιστοσελίδας», μας λέει ο εξεταστής σε ένα μάθημα πληροφορικής. Τι να του απαντήσουμε; Πρώτα απ 'όλα, θα μιλήσουμε για το τι είναι καταρχήν μια ιστοσελίδα.

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

Η θέση και ο ρόλος των ιστοσελίδων στη δομή των τοποθεσιών

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

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

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

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

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

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

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

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

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

Γνωρίσματα

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

Περιεχόμενο

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

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

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

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

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

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

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

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

Κύριο μέρος της ιστοσελίδας

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

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

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

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

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

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

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

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

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

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

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

Ιδιαιτερότητες εργαλείων ανάπτυξης Ιστού

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

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

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

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

Θεωρητικές πληροφορίες

ΒΑΣΙΚΕΣ ΕΝΝΟΙΕΣ

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

Έγγραφο HTML.

Έγγραφο Ιστού.

Ιστοσελίδα.

Τέτοιες σελίδες είναι συνήθως σε μορφή NTM ή HTML.

Μια ομάδα ιστοσελίδων που ανήκουν σε έναν συγγραφέα ή ένα σώμα IEDV και διασυνδέονται με κοινούς υπερσυνδέσμους σχηματίζει μια δομή που ονομάζεται κόμβος Ιστού ή τοποθεσία Web. Κάθε σελίδα HTML έχει τη δική της μοναδική διεύθυνση URL - έναρεΠμιντοστο Ιντερνετ.

πλαίσιο (Πλαίσιο) - ένας όρος που έχει δύο έννοιες. Η πρώτη τιμή είναι η περιοχή του εγγράφου με τις δικές της γραμμές κύλισης. Το δεύτερο είναι μια εικόνα 0DNN0H σε ένα κινούμενο αρχείο γραφικών (πλαίσιο).

Applet (Applet) - ένα πρόγραμμα που μεταφέρεται στον υπολογιστή-πελάτη ως ξεχωριστό αρχείο και εκκινείται κατά την προβολή μιας ιστοσελίδας.

Σενάριο (Γραφή) , ή script, είναι ένα πρόγραμμα που περιλαμβάνεται σε μια ιστοσελίδα για να επεκτείνει τις δυνατότητές της. Σε ορισμένες περιπτώσεις, το πρόγραμμα περιήγησης Internet Explorer εμφανίζει το μήνυμα: "Να επιτρέπεται η εκτέλεση σεναρίου στη σελίδα;" Σε αυτή την περίπτωση εννοούμε σενάρια.

CGI (Κοινός πύλη Διεπαφή) - ένα γενικό όνομα για προγράμματα που, λειτουργώντας σε διακομιστή, σας επιτρέπουν να επεκτείνετε τις δυνατότητες των ιστοσελίδων. Χωρίς τέτοια προγράμματα είναι αδύνατο να δημιουργηθούν διαδραστικές ιστοσελίδες.

Πρόγραμμα περιήγησης (Πρόγραμμα περιήγησης) - ένα πρόγραμμα για την προβολή ιστοσελίδων.

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

<Начало элемента>Το περιεχόμενο του στοιχείου, τα δεδομένα που μορφοποιεί το στοιχείο

Ετικέτα(στα αγγλικά tag - label, descriptor, label) - ο δείκτης έναρξης ή λήξης ενός στοιχείου. Οι ετικέτες ορίζουν τα όρια της δράσης των στοιχείων και διαχωρίζουν τα στοιχεία μεταξύ τους. Στο κείμενο μιας ιστοσελίδας, οι ετικέτες περικλείονται σε γωνιακές αγκύλες< >, και η ετικέτα τέλους ακολουθείται πάντα από κάθετο. Κείμενο όχι ανάμεσα σε αυτές τις αγκύλες (< >), είναι πλήρως ορατή όταν προβάλλεται σε πρόγραμμα περιήγησης. Για παράδειγμα:

<Начальный тег>Το περιεχόμενο του στοιχείου, τα δεδομένα που

μορφοποιεί ένα στοιχείο

<Р>Αυτό το κείμενο θα βρίσκεται σε ξεχωριστή παράγραφο

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

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

<Р align="center">Αυτό το κείμενο θα ευθυγραμμιστεί στο κέντρο της οθόνης

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

Σημείωση:

Οποιεσδήποτε χρήσιμες πληροφορίες πρέπει να εμφανίζονται μεταξύ των ετικετών έναρξης και τέλους, υποδεικνύοντας τη μορφή τους.

Όλα τα χαρακτηριστικά βρίσκονται στην ετικέτα έναρξης.

Για ευκολία στη χρήση, μπορείτε να γράψετε την ετικέτα έναρξης με ένα κεφαλαίο (κεφαλαίο) γράμμα (P) και την ετικέτα τέλους με ένα πεζό (μικρό) γράμμα (/p), αν και αυτό δεν είναι απαραίτητο.

Δεν απαιτούν όλα τα στοιχεία μια ετικέτα τέλους (κλείσιμο).

Ξεκινήστε να γράφετε κάθε νέο στοιχείο σε μια νέα γραμμή. Εσοχή ένθετα στοιχεία (καρτέλα). Αυτό πάλι δεν είναι απαραίτητο, αλλά θα κάνει τη δουλειά σας πολύ πιο εύκολη.

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

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

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

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

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

Το πρόγραμμα που εμφανίζει μια ιστοσελίδα ονομάζεται web browser.

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

Η HTML σάς επιτρέπει:

· Μορφοποίηση κειμένου.

· Συμπεριλάβετε εικόνες και πολυμέσα στο έγγραφο.

· Χρησιμοποιώντας αυτή τη γλώσσα, δημιουργούνται σύνδεσμοι υπερκειμένου προς άλλες ιστοσελίδες.

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

Για τη δημιουργία ιστοσελίδων, χρησιμοποιούνται απλοί επεξεργαστές κειμένου που δεν περιλαμβάνουν χαρακτήρες ελέγχου μορφοποίησης κειμένου στο δημιουργημένο έγγραφο. Ως τέτοιο πρόγραμμα επεξεργασίας στα Windows μπορείτε να χρησιμοποιήσετε τυπική εφαρμογή"Σημειωματάριο".

Συνήθως, ένα αρχείο ιστοσελίδας έχει επέκταση .html ή .htm.

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

Για να προβάλετε μια σελίδα HTML, απλώς εισαγάγετε τη διεύθυνση URL στη γραμμή διευθύνσεων του προγράμματος περιήγησής σας στο Web και, στη συνέχεια, ακολουθήστε τους υπερσυνδέσμους. Αλλά αυτό είναι ακριβώς το κύριο πρόβλημα - πώς να μάθετε τη διεύθυνση της σελίδας; Τις περισσότερες φορές συμβαίνει να γνωρίζετε τι πρέπει να βρείτε, αλλά δεν ξέρετε πού ακριβώς να ψάξετε. Για την επίλυση αυτού του προβλήματος, υπάρχουν ειδικές μηχανές αναζήτησης. Από την πλευρά του χρήστη, σύστημα αναζήτησης- αυτός είναι ένας κανονικός ιστότοπος αρχική σελίδαπου περιέχει συνδέσμους προς άλλους ιστότοπους, χωρισμένους σε κατηγορίες («Αθλητισμός», «Επιχείρηση», «Υπολογιστές» κ.λπ.). Επιπλέον, η μηχανή αναζήτησης επιτρέπει στον χρήστη να εισάγει πολλές λέξεις-κλειδιά και επιστρέφει συνδέσμους σε σελίδες που περιέχουν αυτές τις λέξεις-κλειδιά.

Ιστοσελίδα

Ένας ιστότοπος (Αγγλικός Ιστότοπος, από τον ιστό - web και ιστότοπος - «τόπος») είναι μια συλλογή εγγράφων ενός ιδιώτη ή οργανισμού ενωμένα κάτω από μια διεύθυνση σε ένα δίκτυο υπολογιστών. Από προεπιλογή, θεωρείται ότι ο ιστότοπος βρίσκεται στο Διαδίκτυο. Όλοι οι ιστότοποι του Διαδικτύου αποτελούν συλλογικά τον Παγκόσμιο Ιστό. Το πρωτόκολλο HTTP αναπτύχθηκε ειδικά για τους πελάτες να έχουν άμεση πρόσβαση σε ιστότοπους σε διακομιστές. Οι ιστότοποι ονομάζονται αλλιώς η εκπροσώπηση στο Διαδίκτυο ενός ατόμου ή οργανισμού. Όταν λένε "η δική σας σελίδα στο Διαδίκτυο", σημαίνει έναν ολόκληρο ιστότοπο ή μια προσωπική σελίδα ως μέρος του ιστότοπου κάποιου άλλου. Εκτός από τοποθεσίες Web στο Διαδίκτυο, διατίθενται και ιστότοποι WAP για κινητά τηλέφωνα.

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

Στις περισσότερες περιπτώσεις στο Διαδίκτυο, ένας ιστότοπος αντιστοιχεί σε ένα όνομα τομέα. Ακριβώς σύμφωνα με ονόματα τομέαοι τοποθεσίες προσδιορίζονται σε παγκόσμιο δίκτυο. Είναι δυνατές και άλλες επιλογές: ένας ιστότοπος σε πολλούς τομείς ή πολλοί ιστότοποι σε έναν τομέα. Συνήθως, αρκετοί τομείς χρησιμοποιούνται από μεγάλους ιστότοπους (δικτυακές πύλες) για να διαχωρίσουν λογικά διαφορετικούς τύπους παρεχόμενων υπηρεσιών (mail.yandex.ru, news.yandex.ru, auto.yandex.ru). Υπάρχουν επίσης περιπτώσεις όπου εκχωρούνται ξεχωριστοί τομείς για διαφορετικές χώρεςή γλώσσες. Για παράδειγμα, το google.ru και το google.fr είναι λογικά ιστότοποι της Google σε διαφορετικές γλώσσες, αλλά τεχνικά είναι διαφορετικοί ιστότοποι. Ο συνδυασμός πολλών τοποθεσιών σε έναν τομέα είναι χαρακτηριστικός για δωρεάν φιλοξενία. Για να προσδιορίσετε τοποθεσίες, η διεύθυνση περιέχει μια περισπωμένη και το όνομα της τοποθεσίας μετά τον κεντρικό υπολογιστή: example.com/~my-site-name/.

Δημοφιλή στην κατηγορία:

Πώς να δημιουργήσετε ένα κλιπ καραόκε σε έναν υπολογιστή;

ανάγνωση

Η εφαρμογή Origin απαιτείται για αναπαραγωγή, αλλά δεν είναι εγκατεστημένη FIFA...

ανάγνωση

Εγγραφή προσωπικής σελίδας στο κοινωνικό δίκτυο Facebook

ανάγνωση

Πώς να εκτελέσετε μια απλή σάρωση Nmap Nmap

ανάγνωση