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

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

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

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

αρχείο HTML - ένα site μια σελίδα, αν και αυτό είναι συζητήσιμο, αλλά αυτό είναι ένα αρχείο ανά σελίδα, για αρχή είναι σαφές.

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

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

Απλή HTML σελίδα

Παράδειγμα δημιουργίας τέτοια σελίδα υποδεικνύεται στο παρακάτω άρθρο. Εξετάστε προσεκτικά.

ενότητα HEAD

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

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

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

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

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

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

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

ενότητα BODY

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

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

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

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

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

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

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

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

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

Η δομή των περιγραφών HTML

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

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

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

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

Σύνολο περιγραφές περιεχομένου HTML

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

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

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

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

Όταν ετικέτα ΠΙΝΑΚΑΣ μπορεί να χρησιμοποιηθεί για να δημιουργήσει έναν πίνακα, καθορίστε ένα αριθμό σειρών και TR στη σειρά για τον αριθμό των κυττάρων TD. Σε αντίθεση με τη συνήθη πίνακα του οργανισμού, λόγω της HTML-σήμανση οργάνωση πίνακα φύση περιορίζεται σε αυτή τη δήλωση, διότι αν ο κύριος του έργου θέλει να έχει ένα ορθογώνιο τραπέζι στο οποίο ο αριθμός των στηλών σε όλες τις γραμμές του ίδιου, τότε θα πρέπει να ακολουθήσετε αυτό για τον εαυτό σας.

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

Παράδειγμα σελίδας HTML με μια περιγραφή ενός απλού πίνακα φαίνονται γραφικά στο άρθρο.

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

Περιγραφή μορφή: tag FORM, ΕΙΣΟΔΟΣ

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

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

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

χρησιμοποιώντας HTML

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

γλώσσα PHP έχει εντοπιστεί στο προηγούμενο παράδειγμα. PHP τρέχει στον server, επειδή μια σελίδα με αυτή τη μορφή πέταξε από τον server στον browser με τα χωράφια γεμίζουν. Ειδικότερα, οι λειτουργίες TestOnBlur αναφέρεται στην ΕΙΣΟΔΟΣ ετικέτα (onblur χειρισμού συμβάντων), έλαβε όλες τις παραμέτρους, με τη μορφή των πεδίων κειμένου.

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

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