Έχουν εφευρεθεί πολλές γλώσσες, αλλά HTMLανήκει στα πιο ειδικά και πιο περιζήτητα. Πολλές άλλες βασικές αρχές στον προγραμματισμό συνδέονται με αυτό. Πολλά διατίθενται όταν ο προγραμματιστής έχει γνώση της γλώσσας σήμανσης - HyperText Markup Language (HTML).
Βασικά, δεν υπάρχει τίποτα περίπλοκο σε HTML και μέχρισε λίγα λεπτά, όποιος είναι μακρινός από τον προγραμματισμό και το Διαδίκτυο θα δημιουργήσει μια σελίδα HTML σε ένα σημειωματάριο. Ένα παράδειγμα που αξίζει προσοχή, απλότητα, πράγματι, διαθέσιμο σε όλους.
Ένα αρχείο HTML είναι μία σελίδα σε έναν ιστότοπο, αν και μπορείτε να το υποστηρίξετε, είναι ξεκάθαρο να ξεκινήσετε με το ότι ένα αρχείο είναι μία σελίδα.
Το αρχείο HTML ξεκινά με μια κεφαλίδα DOCTYPE, σεπου δείχνει ότι ο τύπος του δεδομένου αρχείου είναι HTML. Όλα τα στοιχεία σελίδας (ετικέτες) υποδεικνύονται σε αγκύλες. Κάθε ζεύγος ("<" και ">") περιλαμβάνει μία ετικέτα HTML. Συνήθως οι ετικέτες HTML είναι ζευγαρωμένες, δηλαδή, για κάθε "ετικέτα" υπάρχει "/ ετικέτα". Και οι δύο περικλείονται σε αγκύλες. Υπάρχουν μεμονωμένες ετικέτες, από τις οποίες η πιο δημοφιλής είναι "br /" - μια μετάβαση στην επόμενη γραμμή.
Η μεγαλύτερη ετικέτα στο αρχείο είναι το ίδιο το HTML, σεπου περιλαμβάνει μόνο δύο ετικέτες: HEAD και BODY. Στην πρώτη, γίνονται διάφορες περιγραφές, αναφέρονται σύνδεσμοι προς άλλα αρχεία που είναι απαραίτητα για τη σελίδα, ενδέχεται να υπάρχουν σενάρια PHP και JavaScript. Το δεύτερο καταγράφει το περιεχόμενο της σελίδας. Επίσης με τη μορφή ετικετών και σεναρίων.
Ένα παράδειγμα δημιουργίας μιας τέτοιας σελίδας δίνεται παρακάτω στο άρθρο. Ας το εξετάσουμε προσεκτικά.
Ο κύριος σκοπός της ετικέτας HEAD είναι να περιγράψει γενικά τη σελίδα και τα κοινά σενάρια, αν και το τελευταίο είναι μια σχετικά σχετική έννοια. Συνήθως, μόνο δύο πράγματα είναι σημαντικά εδώ:
Για την εμφάνιση περιεχομένου σελίδας, το περιεχόμενο αυτής της ενότητας έχει μόνο μια έμμεση έννοια, καθώς δείχνει ότι κάπου σε άλλα αρχεία υπάρχουν κανόνες CSS για ετικέτες και σενάρια άλλων γλωσσών.
Η σελίδα HTML έχει έναν τίτλο (TITLE) πουεμφανίζεται όταν ο επισκέπτης μετακινεί το ποντίκι πάνω από την καρτέλα όπου είναι ανοιχτή η σελίδα. Αυτό είναι ένα σημαντικό σημείο, γιατί καθιστά τη σελίδα πολύ πιο ευπαρουσίαστη, πιο εύκολο να πούμε, υπογεγραμμένη με αναγνώσιμο κείμενο.
Οι ετικέτες META είναι σημαντικές στον προγραμματισμό Διαδικτύου γενικά, αλλά όταν πρέπει να δημιουργήσετε μια σελίδα HTML σε ένα σημειωματάριο, είναι ανεπιθύμητο να γεμίσετε το παράδειγμα με περιττές κατασκευές.
Οι σύνδεσμοι LINK και SCRIPT πρέπει να είναι ειδικάΠροσοχή. Το πρώτο δείχνει τη θέση του φύλλου στυλ CSS, το δεύτερο στη θέση του αρχείου κώδικα JavaScript. Μπορεί να υπάρχουν πολλοί τέτοιοι σύνδεσμοι.
Εάν τα σενάρια πρέπει να προσεγγιστούν όταν η γνώσηΕάν το HTML είναι σταθεροποιημένο, τότε τα επικαλυπτόμενα φύλλα στυλ θα πρέπει να αντιμετωπιστούν αμέσως. Τα αρχεία CSS παρέχουν, συγκεκριμένα, τους κανόνες για τη μορφοποίηση ετικετών HTML.
Στην πραγματικότητα, το παράδειγμα της σελίδας HTML είναιενότητα ΣΩΜΑ. Εδώ περιέχονται όλες οι πληροφορίες, όλο το περιεχόμενο της σελίδας του ιστότοπου. Όλες οι πληροφορίες παρουσιάζονται με τη μορφή ετικετών και σεναρίων, όπως εισαγωγή κώδικα JavaScript ή κομμάτια προγραμμάτων PHP.
Είναι σημαντικό να κατανοήσετε ότι το παράδειγμα της ιστοσελίδας HTML στοπρόγραμμα περιήγησης και το ίδιο παράδειγμα σε ένα πρόγραμμα επεξεργασίας κειμένου, ιδίως στο σημειωματάριο, απέχει πολύ από το ίδιο πράγμα. Στην πρώτη περίπτωση, έχουμε ένα έτοιμο κείμενο HTML στο οποίο εκτελούνται όλα τα σενάρια. Για παράδειγμα, η PHP δούλεψε το μέρος της και δημιούργησε τις απαραίτητες ετικέτες στα σωστά μέρη αντί για τον κωδικό της. Η JavaScript έχει επίσης εκπληρώσει την αποστολή της, αν και υπάρχει ακόμα μια ξεχωριστή συζήτηση για αυτό.
Το HTML είναι ετικέτες, όχι σενάρια. Τελικά, το πρόγραμμα περιήγησης εμφανίζει μόνο το περιεχόμενο της σελίδας, μόνο τις ετικέτες του. Δεν υπάρχει κωδικός PHP εκεί.
Η JavaScript είναι σε ειδική θέση, το μέλημά της είναι να εξυπηρετεί τη σελίδα όχι μόνο τη στιγμή της φόρτωσης (επαναφόρτωση), αλλά και τις στιγμές που η σελίδα βρίσκεται στο πρόγραμμα περιήγησης του επισκέπτη και τη μελετά.
Ένα απλό παράδειγμα κώδικα σελίδας HTML (μόνο ενότητα BODY) εμφανίζεται παρακάτω.
Και στο πρόγραμμα περιήγησης του επισκέπτη, μοιάζει με το ακόλουθο.
Ο κώδικας δεν καθορίζει πώς θα έπρεπε να είναιστοιχεία που αποδίδονται από το πρόγραμμα περιήγησης. Όλα τα ορατά στυλ είναι στους κανόνες CSS. Σε αυτήν την περίπτωση, το αρχείο Mcss / scPhpWordRW.css που αναφέρθηκε (δείτε το πρώτο παράδειγμα HTML σελίδα).
Σε αντίθεση με το HTML, το θέμα CSS είναι πιο απλό, εκείπολύ προσιτοί κανόνες και ο αριθμός τους είναι μικρός, όταν το παράδειγμα δημιουργίας μιας σελίδας HTML δεν απαιτεί τίποτα άλλο από ένα σημειωματάριο. Όλα είναι πολύ προσιτά για άμεση διαχείριση:
Δείτε πόσο εύκολο είναι να περιγράψετε την ετικέταscLogo_vDoc και αυτή η περιγραφή είναι τέτοια ώστε στην κανονική του κατάσταση η ετικέτα εμφανίζει την εικόνα vDoc-logo.png και όταν το ποντίκι είναι πάνω της, εμφανίζεται το vDoc-logo-h.png.
Η γλώσσα δεν συνεπάγεται καμία δομή καιη έννοια της σύνταξης είναι πολύ σχετική εδώ. Δεν υπάρχουν μεταβλητές εδώ, αλλά υπάρχουν πολλές δυνατότητες. Η θεμελιώδης βάση του υπερκειμένου είναι ότι υπάρχει ένα στοιχείο (ετικέτα) που έχει απαραίτητα ένα όνομα.
Το όνομα, στην περίπτωση μιας συζευγμένης ετικέτας, αποτελείται από το πραγματικό όνομα (tagName) και τις αγκύλες γωνίας ("<" + tagName + ">"), εάν είναι η αρχή μιας ετικέτας και "</" + tagName + ">", εάν είναι γραμμένο το τέλος του.
Ένα παράδειγμα σελίδας HTML που περιγράφει τα χαρακτηριστικά βρίσκεται παρακάτω στο κείμενο.
Η ετικέτα μπορεί να έχει χαρακτηριστικά και στη συνέχεια τοποθετούνταιένα κενό διάστημα μετά το όνομα της ετικέτας πριν από την αγκύλη γωνίας κλεισίματος ">". Τα χαρακτηριστικά, εάν τα έχει η ετικέτα, γράφονται μόνο στην αρχή της ετικέτας. Το περιεχόμενο της ετικέτας είναι αυτό που βρίσκεται ανάμεσα στην αρχή της ετικέτας και στο τέλος της.
Το HTML σας επιτρέπει να περιγράψετε μπλοκ και ενσωματωμένοστοιχεία. Τα πρώτα καταλαμβάνουν μια συγκεκριμένη περιοχή στο παράθυρο του προγράμματος περιήγησης, μπορούν να τοποθετηθούν απολύτως, δηλαδή, στη σωστή θέση στην περιοχή εμφάνισης μιας σελίδας HTML, και έχουν ένα συγκεκριμένο μέγεθος.
Τα ενσωματωμένα στοιχεία εμφανίζονται γενικάμία ροή, δηλαδή, όπως ορίστηκαν οι σελίδες στο αρχείο και εμφανίζονται στην οθόνη. Η εμφάνιση της συνολικής ροής μπορεί να επηρεαστεί κατά τη φόρτωση της σελίδας. Η τοποθέτηση, η ορατότητα και άλλες ιδιότητες των στοιχείων μπλοκ μπορούν να επηρεαστούν ανά πάσα στιγμή μέσω κώδικα JavaScript.
Εκτός από απλά στοιχεία, η HTML προσφέρει περιγραφές πινάκων και φορμών. Αυτά τα στοιχεία έχουν μεγάλη ζήτηση στο "καθημερινό κτίριο ιστότοπων".
Χρησιμοποιώντας την ετικέτα TABLE, μπορείτε να δημιουργήσετε έναν πίνακα,υποδείξτε έναν ορισμένο αριθμό σειρών TR και σε κάθε σειρά έναν συγκεκριμένο αριθμό κυττάρων TD. Σε αντίθεση με τον συνηθισμένο οργανισμό πίνακα, λόγω των ιδιαιτεροτήτων της σήμανσης HTML, ο οργανισμός πίνακα περιορίζεται σε αυτήν τη δήλωση, επομένως εάν ο προγραμματιστής θέλει να έχει έναν ορθογώνιο πίνακα στον οποίο ο αριθμός των στηλών σε όλες τις σειρές είναι ο ίδιος, τότε πρέπει να παρακολουθεί αυτό ανεξάρτητα.
Αρχή θέση HTML:κάντε ό, τι έχει υποδειχθεί, αλλά τίποτα που δεν είναι κατανοητό. Σε ορισμένες περιπτώσεις, ο αριθμός στηλών σε κάθε σειρά του πίνακα δεν είναι τόσο σημαντικός, αλλά εάν πρέπει να συγχωνεύσετε κελιά κάθετα ή οριζόντια, θα πρέπει να μετρήσετε τα πάντα πολύ προσεκτικά.
Ένα παράδειγμα σελίδας HTML που περιγράφει έναν απλό πίνακα εμφανίζεται σαφώς στο άρθρο.
Εμφανίζεται εδώ ένας πίνακας με τρεις σειρές από τρειςστηλών και στην πρώτη σειρά, αντί για την ετικέτα TD, χρησιμοποιήθηκε η ετικέτα TH - η επικεφαλίδα της στήλης. Αυτές οι δύο ετικέτες δεν έχουν μεγάλη διαφορά, αλλά μπορείτε να χρησιμοποιήσετε την πρώτη για να ξεχωρίσετε την πρώτη σειρά του πίνακα, και στο CSS μπορείτε να επισυνάψετε το δικό σας στυλ στο TH, το οποίο το διακρίνει ευνοϊκά από άλλα TD.
Οι φόρμες είναι το πιο απαιτούμενο μέρος των ετικετών HTML. Με τη βοήθεια των εντύπων μπορείτε να μεταφέρετε πληροφορίες. Στην πραγματικότητα, η ίδια η σελίδα είναι η έξοδος πληροφοριών, αλλά η φόρμα είναι η εισαγωγή της.
Ένα παράδειγμα σελίδας HTML που περιγράφει μια απλή φόρμα:
Υπάρχουν πολλοί περισσότεροι τρόποι για να χρησιμοποιήσετε φόρμες, αλλάοι κύριες δυνατότητες είναι οι εξής. Μπορείτε να καθορίσετε πεδία εισαγωγής, να τους αντιστοιχίσετε την εμφάνιση και τους χειριστές για την ανάλυση της εισαγωγής χρήστη. Μπορείτε να καθορίσετε κρυμμένα πεδία και να περάσετε πληροφορίες φόντου από τη σελίδα. Μπορείτε να ορίσετε τα κουμπιά για τη μεταφορά πληροφοριών, κάνοντας κλικ στο οποίο ξεκινά η διαδικασία μεταφοράς πληροφοριών.
Η γνώση της γλώσσας του υπερκειμένου είναι απαραίτητη προϋπόθεσηΕργαστείτε σε οποιαδήποτε εξειδίκευση στον τομέα του προγραμματισμού Διαδικτύου, αλλά εάν πρέπει να γράψετε προγράμματα σε PHP ή JavaScript, τότε πρέπει να γνωρίζετε τέλεια το HTML + CSS.
Η γλώσσα PHP σημειώθηκε στο προηγούμενο παράδειγμα.Η PHP εκτελείται στον διακομιστή, οπότε η σελίδα με αυτήν τη φόρμα πέταξε από το διακομιστή στο πρόγραμμα περιήγησης με γεμάτα πεδία. Συγκεκριμένα, η συνάρτηση TestOnBlur που αναφέρεται στην ετικέτα INPUT (χειριστής συμβάντων onblur) έλαβε όλες τις παραμέτρους ως πεδία κειμένου.
Το JavaScript εκτελείται στο πρόγραμμα περιήγησης και στοτο κουμπί για την αποστολή δεδομένων πίσω στο διακομιστή λειτούργησε σωστά, δηλαδή, η κατασκευή: onclick = jQuery ("# to"). val ("cart"), πρέπει να έχετε μια ιδέα όχι μόνο του jQuery είναι, αλλά και τι είναι #to, val, cart. Πιο συγκεκριμένα, πρέπει να γνωρίζετε βασικές ετικέτες HTML και τους γενικούς κανόνες για την εφαρμογή στυλ CSS σε αυτές.
Αυτό αρκεί για να αυξήσετε γρήγορα τα προσόντα σας σε οποιαδήποτε εξειδίκευση στον τομέα του διαδικτυακού προγραμματισμού.
