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

δείγμα σελίδας html

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

Γενική περιγραφή

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

Το αρχείο HTML ξεκινά με την κεφαλίδα DOCTYPE, στοπου δείχνει ότι ο τύπος αυτού του αρχείου είναι HTML. Όλα τα στοιχεία της σελίδας (ετικέτες) υποδεικνύονται σε γωνιακές αγκύλες. Κάθε ζεύγος ("<" και ">") περιλαμβάνει μία ετικέτα HTML. Συνήθως, οι ετικέτες HTML συνδυάζονται, δηλαδή, υπάρχει "/ tag" για κάθε "ετικέτα". Και τα δύο περικλείονται σε γωνιακούς βραχίονες. Υπάρχουν ξεχωριστές ετικέτες, εκ των οποίων το πιο δημοφιλές "br /" είναι η μετάβαση στην επόμενη γραμμή.

Η μεγαλύτερη ετικέτα στο αρχείο είναι η ίδια η HTML, στοπου περιλαμβάνει μόνο δύο ετικέτες: HEAD και BODY. Στην πρώτη, γίνονται διάφορες περιγραφές, καθορίζονται σύνδεσμοι προς άλλες σελίδες, μπορεί να υπάρχουν δέσμες ενεργειών PHP και JavaScript. Στο δεύτερο, καταγράφεται το περιεχόμενο της σελίδας. Επίσης με τη μορφή ετικετών και σεναρίων.

Απλή σελίδα HTML

Ένα παράδειγμα δημιουργίας μιας τέτοιας σελίδας παρατίθεται παρακάτω στο άρθρο. Σκεφτείτε προσεκτικά.

Το παράδειγμα του συγγραφέα δεν είναι μια εικόνα

Τμήμα HEAD

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

  • λέξεις-κλειδιά και περιγραφή της σελίδας.
  • συνδέσεις σε άλλα αρχεία (* .css και * .js).

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

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

html παράδειγμα ιστοσελίδας

META-ετικέτες είναι σημαντική στον προγραμματισμό web σε γενικές γραμμές, αλλά όταν αυτό απαιτείται η δημιουργία των HTML σελίδων σε ένα σημειωματάριο, ένα παράδειγμα των ανεπιθύμητων σωρό περιττές δομές.

Σύνδεσμοι LINK και SCRIPTπροσοχή. Το πρώτο δείχνει τη θέση όπου βρίσκεται το φύλλο στυλ CSS, το δεύτερο στη θέση του αρχείου κώδικα JavaScript. Μπορούν να υπάρχουν πολλές τέτοιες αναφορές.

Εάν τα σενάρια πρέπει να προσεγγιστούν, όταν η γνώσηΤο HTML θα ενισχυθεί και στη συνέχεια θα πρέπει να δοθεί προσοχή αμέσως στα cascading style sheets. Στα αρχεία CSS υπάρχουν, ειδικότερα, οι κανόνες για το σχεδιασμό ετικετών HTML.

Τμήμα ΣΩΜΑΤΟΣ

Στην πραγματικότητα, ένα παράδειγμα μιας σελίδας HTML είναι αυτότμήμα BODY. Είναι εδώ που περιέχει όλες τις πληροφορίες, όλο το περιεχόμενο της σελίδας του ιστότοπου. Όλες οι πληροφορίες παρουσιάζονται με τη μορφή ετικετών και σεναρίων, όπως για παράδειγμα η εισαγωγή κώδικα JavaScript ή κομμάτια προγραμμάτων PHP.

Είναι σημαντικό να κατανοήσουμε ότι το παράδειγμα μιας ιστοσελίδας HTML στοbrowser και το ίδιο παράδειγμα σε ένα πρόγραμμα επεξεργασίας κειμένου, ειδικότερα σημειωματάριο, αυτό δεν είναι το ίδιο πράγμα. Στην πρώτη περίπτωση, έχουμε το τελικό κείμενο HTML, στο οποίο εκτελούνται όλα τα σενάρια. Για παράδειγμα, η PHP έχει δουλέψει και έχει δημιουργήσει τις απαραίτητες ετικέτες αντί του κώδικα της στις σωστές θέσεις. Το JavaScript εκπλήρωσε επίσης την αποστολή του, παρόλο που υπάρχει ακόμα μια ξεχωριστή συζήτηση γι 'αυτό.

απλή σελίδα παραδείγματος html

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

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

Ένα απλό παράδειγμα του κώδικα HTML σελίδας (μόνο το τμήμα BODY) παρατίθεται παρακάτω.

Το παράδειγμα του συγγραφέα δεν είναι μια εικόνα

Και στο πρόγραμμα περιήγησης του επισκέπτη, μοιάζει με αυτό που φαίνεται παρακάτω.

Το παράδειγμα του συγγραφέα δεν είναι μια εικόνα

Ο κώδικας δεν διευκρινίζει πώς να μοιάζειστοιχεία που εμφανίζει το πρόγραμμα περιήγησης. Όλος ο ορατός σχεδιασμός είναι στους κανόνες CSS. Σε αυτή την περίπτωση, στο αρχείο Mcss / scPhpWordRW.css, το οποίο αναφέρθηκε (δείτε το πρώτο παράδειγμα μιας σελίδας HTML).

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

Το παράδειγμα του συγγραφέα δεν είναι μια εικόνα

Αυτό δείχνει πώς περιγράφεται μια ετικέταscLogo_vDoc και αυτή η περιγραφή είναι τέτοια ώστε σε κανονική κατάσταση η ετικέτα εμφανίζει την εικόνα vDoc-logo.png και όταν το ποντίκι είναι πάνω από αυτήν, εμφανίζεται το vDoc-logo-h.png.

HTML Περιγραφή Δομή

Η γλώσσα δεν σημαίνει καμία δομή καιη έννοια της σύνταξης είναι πολύ σχετική. Δεν υπάρχουν μεταβλητές, αλλά υπάρχουν πολλές δυνατότητες. Η βασική βάση του υπερκειμένου είναι ότι υπάρχει ένα στοιχείο (ετικέτα) που έχει κατ 'ανάγκη ένα όνομα.

Το όνομα της υπόθεσης, το ζεύγος ετικέτα, που αποτελείται από κύρια ονόματα (το όνομα της ετικέτας) και γωνιακές αγκύλες ( «<» + όνομα της ετικέτας + «>»), αν μιλάμε για την αρχή της ετικέτας, και «</» + όνομα της ετικέτας + «>», εάν καταγράφονται το τέλος της.

Ένα παράδειγμα μιας σελίδας HTML που περιγράφει τα χαρακτηριστικά βρίσκεται παρακάτω στο κείμενο.

Το παράδειγμα του συγγραφέα δεν είναι μια εικόνα

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

Το γενικό περιεχόμενο των περιγραφών HTML

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

ένα παράδειγμα δημιουργίας μιας σελίδας html

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

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

Περιγραφή του πίνακα: ετικέτες ΠΙΝΑΚΑΣ, TR, TD

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

δείγμα HTML html σελίδα

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

Ένα παράδειγμα μιας σελίδας HTML που περιγράφει έναν απλό πίνακα εμφανίζεται σαφώς στο άρθρο.

Το παράδειγμα του συγγραφέα δεν είναι μια εικόνα

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

Περιγραφή της φόρμας: FORM, ετικέτες INPUT

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

Παράδειγμα σελίδας HTML με απλή περιγραφή μορφής:

Το παράδειγμα του συγγραφέα δεν είναι μια εικόνα

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

Χρήση HTML

Γνωρίζετε ότι η γλώσσα του υπερκειμένου είναι απαραίτητη προϋπόθεσηεργάζονται σε οποιαδήποτε εξειδίκευση στον τομέα του προγραμματισμού του Διαδικτύου, αλλά αν χρειαστεί να γράψετε προγράμματα σε PHP ή JavaScript, τότε πρέπει να γνωρίζετε τέλεια το HTML + CSS.

Η γλώσσα PHP υποδηλώθηκε στο προηγούμενο παράδειγμα. Η PHP τρέχει στο διακομιστή, επειδή η σελίδα με αυτή τη φόρμα έχει πετάξει από το διακομιστή στο πρόγραμμα περιήγησης με τα γεμάτα πεδία. Ειδικότερα, η λειτουργία TestOnBlur, που αναφέρεται στην ετικέτα INPUT (χειριστής συμβάντος onblur), έλαβε όλες τις παραμέτρους με τη μορφή πεδίων κειμένου.

δημιουργώντας μια σελίδα html στο φορητό δείγμα

Το πρόγραμμα περιήγησης εκτελεί το JavaScript και τολειτούργησε σωστά για την αποστολή δεδομένων πίσω στο διακομιστή κλειδιών, που είναι ο σχεδιασμός :. onclick = jQuery ( «# για να») val ( «καλάθι»), θα πρέπει να έχετε μια ιδέα, όχι μόνο για το τι του jQuery, αλλά τι # Για, val , καλάθι. Πιο συγκεκριμένα, πρέπει να γνωρίζετε τις βασικές ετικέτες HTML και τους γενικούς κανόνες για την εφαρμογή στυλ CSS σε αυτά.

Αυτό είναι αρκετό για να αυξηθεί γρήγορα τα προσόντα κάθε ειδικότητας στον τομέα του προγραμματισμού του Διαδικτύου.

</ p>