HTML για αρχάριους: Μάθετε να κωδικοποιείτε HTML σήμερα

Αποκάλυψη: Η υποστήριξή σας βοηθά στη διατήρηση της λειτουργίας του ιστότοπου! Κερδίζουμε ένα τέλος παραπομπής για ορισμένες από τις υπηρεσίες που προτείνουμε σε αυτήν τη σελίδα.


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

Σε αυτόν τον οδηγό καλύπτουμε τα βασικά με έναν (ελπίζουμε) εύκολο στην κατανόηση τρόπο, ιδανικό για τον απόλυτο αρχάριο. Ωστόσο, δεν σταματάμε στα βασικά – ακόμη και οι έμπειροι webmaster θα βρουν χρήσιμες συμβουλές για να επεκτείνουν τις γνώσεις σας σχετικά με το HTML. Θα βουτήξουμε ακόμη και σε XHTML, DHTML και τα νεότερα πράγματα στο HTML5.

HTML για αρχάριους

Contents

Μια σύντομη ιστορία του HTML 1-4

Η HTML εφευρέθηκε από τον Tim Berners-Lee στα τέλη της δεκαετίας του 1980 και στις αρχές της δεκαετίας του 1990. Η πρώτη “δημόσια” κυκλοφορία έγινε το 1991. Βασίστηκε σε μια παλαιότερη γλώσσα σήμανσης, SGML (Τυποποιημένη γενική γλώσσα σήμανσης).

Η σημαντική καινοτομία του HTML ήταν η χρήση του υπερσύνδεσμου. Είμαστε τόσο συνηθισμένοι σε αυτό τώρα που είναι δύσκολο να καταλάβουμε πόσο επαναστατική ήταν αυτή η ιδέα εκείνη την εποχή.

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

Το IETF υιοθέτησε HTML ως πρότυπο και δημοσίευσε την πρώτη πρόταση HTML το 1993. Το HTML 2.0, η πρώτη πλήρης επίσημη προδιαγραφή κυκλοφόρησε το 1995. Μέχρι το 1997, το W3C είχε αναλάβει τη διαχείριση του προτύπου και το HTML 3.2 κυκλοφόρησε.

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

Ήταν η έκδοση που ίσχυε κατά την άνοδο των πιο εικονικών ιδιοτήτων του διαδικτύου: Wikipedia, Google, Facebook, WordPress, Myspace, AOL. Εάν μάθατε πώς να δημιουργείτε ιστοσελίδες πριν από το 2008, σχεδόν σίγουρα έχετε μάθει αυτήν την έκδοση.

Παράλληλα με το HTML 4.0 υπήρχε ένα σχετικό έργο που ονομάζεται XHTML. Αυτό κυκλοφόρησε για πρώτη φορά το 2000 και το 2001, ως υλοποίηση HTML 4.0 που βασίζεται σε XML. Δεδομένου ότι η XML είχε μια πιο αυστηρή σύνταξη από την HTML και θα μπορούσε εύκολα να επικυρωθεί από έναν αναλυτή XML, πιστεύεται ότι η εισαγωγή του XHTML θα αναγκάσει τους δημιουργούς περιεχομένου ιστού να δημιουργήσουν πιο ακριβή έγγραφα.

Ως επί το πλείστον, αυτό δεν συνέβη. Στην πράξη, το XHTML – μαζί με τις τρεις ποικιλίες του HTML4 και την άγρια ​​παραλλαγή στην απόδοση του προγράμματος περιήγησης – συνέβαλε στη γενική σύγχυση σχετικά με το τι ήταν και δεν ήταν “τυπικό” HTML.

Ένα αξιοσημείωτο αποτέλεσμα του XHTML είναι η ιδέα ότι πρέπει να “κλείσετε” κενές ετικέτες με μια τελική κάθετο. Εάν έχετε τη συνήθεια να πληκτρολογείτε
αντί για απλά
, μπορείτε να ευχαριστήσετε το XHTML – ήταν απαίτηση σύνταξης XML ότι όλες οι ετικέτες πρέπει να κλείσουν.

Γενικά HTML

Γενικά HTML

Ξεκινήστε να διαβάζετε παρακάτω ή χρησιμοποιήστε την πλοήγηση στα δεξιά για να μεταβείτε σε ένα συγκεκριμένο θέμα.

Βασικά στοιχεία HTML

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

Τι είναι το HTML?

Το HTML είναι Hypertext Markup Language, μια μορφή για τη δημιουργία εγγράφων και ιστοσελίδων. Αρχικά εφευρέθηκε στις αρχές της δεκαετίας του 1990 από τον Tim Berners-Lee και βασίστηκε σε μια παλαιότερη γλώσσα σήμανσης που ονομάζεται SGML (Standard Generalized Markup Language), η οποία βασίστηκε σε μια παλαιότερη μορφή που ονομάζεται GML (Generalized Markup Language) που αναπτύχθηκε στην IBM το τη δεκαετία του 1960.

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

Τι είναι μια γλώσσα σήμανσης?

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

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

Έτσι, για παράδειγμα, αν θέλετε να κάνετε έντονο ή πλάγιο κείμενο, μπορείτε να κάνετε κάτι τέτοιο:

Θέλω να κάνω [αρχίστε με έντονη γραφή] αυτές τις λέξεις με έντονη γραφή [τέλος με έντονη γραφή] και [ξεκινήστε με πλάγια γραφή] αυτές τις άλλες λέξεις με πλάγια γραφή [τελική πλάγια γραφή].

Το οποίο, θεωρητικά, θα πρέπει να παράγει κάτι σαν:

Θέλω να φτιάξω αυτές οι λέξεις τολμηρές και αυτές οι άλλες λέξεις πλάγια.

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

Το παραπάνω παράδειγμα έχει πολλά προβλήματα με αυτό και οι εφευρέτες HTML (και SGML και GML) βρήκαν κάτι παρόμοιο, αλλά πολύ καλύτερο:

  • Τα τετράγωνα αγκύλη χρησιμοποιούνται συχνά σε κείμενο, επομένως η κράτηση τους για χρήση σε ετικέτες μπορεί να προκαλέσει προβλήματα. Αντίθετα, η HTML χρησιμοποιεί αγκύλες γωνίας: < και >.
  • Το γράψιμο της έναρξης και του τέλους ξανά και ξανά είναι πολύ κουραστικό. Το HTML το απλοποιεί χρησιμοποιώντας το ίδιο το όνομα της ετικέτας ως δήλωση «έναρξης». Το όνομα της ετικέτας με κάθετο μπροστά (/) χρησιμοποιείται ως τελική ετικέτα.
  • Αντί για ολόκληρες τις λέξεις “έντονη” και “πλάγια”, η HTML χρησιμοποιεί συντομογραφίες για να κάνει πιο γρήγορη την πληκτρολόγηση και λιγότερο ενοχλητική στην ανάγνωση.

Έτσι, λαμβάνοντας υπόψη αυτά τα πράγματα, το παραπάνω παράδειγμα θα μοιάζει με:

Θέλω να φτιάξω αυτές οι λέξεις τολμηρές και αυτές οι άλλες λέξεις πλάγια.

Θέλω να φτιάξω αυτές οι λέξεις τολμηρές και αυτές οι άλλες λέξεις πλάγια.

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

Θέλω να φτιάξω αυτές οι λέξεις ξεχωρίζουν και να τονίσουμε αυτές τις λέξεις.

Θέλω να φτιάξω αυτές οι λέξεις ξεχωρίζουν και να τονίσουμε αυτές τις λέξεις.

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

Τι είναι το υπερ-κείμενο?

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

Η «υπερ» έννοια της εσωτερικής και εξωτερικής σύνδεσης ήταν τόσο επαναστατική στον τρόπο οργάνωσης του περιεχομένου στο Διαδίκτυο που η λέξη εμφανίζεται σε πολλά σημεία:

  • Το HTML είναι η “γλώσσα σήμανσης HyperText”
  • http: // σημαίνει “HyperText Transfer Protocol
  • Ένας σύνδεσμος από τη μία σελίδα στην άλλη ονομάζεται “υπερσύνδεσμος” και το χαρακτηριστικό δεδομένων που καθορίζει πού οδηγεί ένας σύνδεσμος ονομάζεται “υπερ-αναφορά”.

Πού και πώς χρησιμοποιείται το HTML?

Το HTML χρησιμοποιείται για σχεδόν όλες τις ιστοσελίδες. Η ιστοσελίδα που διαβάζετε τώρα χρησιμοποιεί HTML. Είναι η προεπιλεγμένη γλώσσα των ιστότοπων.

Μπορεί επίσης να χρησιμοποιηθεί για άλλους τύπους εγγράφων, όπως ebook.

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

Χρειάζεται να μάθω HTML για να εκτελέσω τον ιστότοπό μου?

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

Εάν χρησιμοποιείτε απλώς μια πλατφόρμα blogging, έναν δημιουργό ιστότοπων ή ένα Σύστημα Διαχείρισης Περιεχομένου (CMS) που έχει ρυθμιστεί από κάποιον άλλο, ενδέχεται να μπορείτε να το αποκτήσετε χωρίς να γνωρίζετε κανένα HTML – υπάρχουν διαθέσιμοι “γραφικοί” συντάκτες που καθιστούν την προσθήκη περιεχομένου σε ένα ιστολόγιο παρόμοιο με το γράψιμο στο Microsoft Word ή email.

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

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

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

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

Κατώτατη γραμμή σε HTML

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

Στοιχεία και ετικέτες HTML

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

Δομή ετικετών

Γενικά, ταιριαστά ζεύγη ετικετών περιβάλλουν την ενότητα κειμένου που επηρεάζουν. Δύο αντίστοιχα ζεύγη ετικετών, μαζί με το περιεχόμενο που περικλείουν, ονομάζονται “στοιχείο”.

Αυτό το στοιχείο ξεκινά και τελειώνει με το "ισχυρός" ετικέτα.

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

href ="http://example.com">Αυτός είναι ένας σύνδεσμος. Η ετικέτα είναι ένα "ένα" Για "άγκυρα," και το χαρακτηριστικό href (hyper reference) καθορίζει πού δείχνει ο σύνδεσμος.

Μερικές ετικέτες δεν εμφανίζονται σε ζευγάρια που ταιριάζουν, επειδή χρησιμοποιούνται για να εισάγουν κάτι, αντί να περιγράφουν κείμενο. Αυτές ονομάζονται “κενές” ή “άκυρες” ετικέτες και η πιο συνηθισμένη είναι αυτή που χρησιμοποιείται για την εισαγωγή μιας εικόνας. Το χαρακτηριστικό src χρησιμοποιείται για τον καθορισμό της διεύθυνσης URL της εικόνας.

src ="images / html-for-beginners-learn-to-code-html-σήμερα.png" />

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

Υπάρχουν πολλές άλλες κενές ετικέτες. Δύο είναι αρκετά ευθεία προς τα εμπρός και κοινά.

  • εισάγει ένα διάλειμμα γραμμής.
  • εισάγει ένα διαχωριστικό οριζόντιου κανόνα (γραμμή).

Άλλοι δεν εισάγουν κάτι οπτικό, αλλά χρησιμοποιούνται για την παροχή πληροφοριών σχετικά με την ίδια τη σελίδα.

rel ="φύλλο στυλ" τύπος ="κείμενο / css" href ="theme.css" />

όνομα ="περιγραφή" περιεχόμενο ="Τίτλος αυτής της σελίδας." />

Επιπλέον, η ετικέτα (η οποία χρησιμοποιείται για την προσθήκη Javascript σε μια σελίδα) μπορεί να είναι κενή, αλλά δεν πρέπει να είναι.

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

Επίπεδο μπλοκ έναντι εν σειρά

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

Αποκλεισμός στοιχείων

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

), διαιρέσεις () και επικεφαλίδες (

,

, και τα λοιπά).

Είναι συνήθης πρακτική να πληκτρολογείτε τις περισσότερες ετικέτες επιπέδου μπλοκ σε μεμονωμένες γραμμές πάνω και κάτω από το περιεχόμενό τους:

Αυτό είναι ένα div.

Ωστόσο, αυτό δεν γίνεται πάντα, ειδικά με τίτλους:

Αυτός είναι ο τίτλος μιας σελίδας

Αυτό είναι ένα σημαντικό τμήμα

Κάποιο περιεχόμενο σε μια παράγραφο.

Τα στοιχεία επιπέδου μπλοκ μπορούν να τοποθετηθούν ένθετα, αλλά ορισμένα στοιχεία επιπέδου μπλοκ δεν μπορούν να περιέχουν άλλα στοιχεία επιπέδου μπλοκ:

Τίτλος άρθρου

Πρώτη παράγραφος του άρθρου.

Οι παράγραφοι και οι επικεφαλίδες δεν μπορούν να περιέχουν άλλα στοιχεία επιπέδου μπλοκ.

Ενσωματωμένα στοιχεία

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

Τα ενσωματωμένα στοιχεία ονομάζονται μερικές φορές στοιχεία “span-level”. Υπάρχει επίσης ένα γενικό στοιχείο span-level, που ονομάζεται απλά span (). Αυτό δεν κάνει μόνο του, αλλά μπορεί να χρησιμοποιηθεί για τη δημιουργία προσαρμοσμένων τύπων εμφάνισης κειμένου, μέσω της χρήσης στοιχείων.

τάξη ="ειδικό κείμενο">Αυτό το κείμενο είναι ειδικό.

(Δείτε την ενότητα στο CSS για πληροφορίες σχετικά με τον τρόπο δημιουργίας κλάσης ="ειδικό κείμενο" εμφάνιση σε ειδική μορφή.)

Κάποια στιγμή δεν έχει νόημα

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

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

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

Περισσότερα σχετικά με τα χαρακτηριστικά

Σχεδόν κάθε ετικέτα στοιχείου μπορεί να περιλαμβάνει χαρακτηριστικά. Πολλά στοιχεία έχουν ένα συγκεκριμένο σύνολο χαρακτηριστικών που υποστηρίζουν (όπως και το χαρακτηριστικό src =), αλλά υπάρχουν πολλά στοιχεία που υποστηρίζονται παγκοσμίως από όλους τους τύπους στοιχείων.

Δύο σημαντικοί τύποι χαρακτηριστικών είναι κλάση και αναγνωριστικό.

href ="http://example.com" τάξη ="παράδειγμα-σύνδεσμος" id ="σύνδεσμος27">Αυτή η ετικέτα αγκύρωσης έχει τρία χαρακτηριστικά.

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

Τα χαρακτηριστικά της κατηγορίας χρησιμοποιούνται για να επισημάνουν ένα ή περισσότερα στοιχεία ότι ανήκουν σε μια συγκεκριμένη “κλάση” ή ομάδα – αυτό μπορεί να χρησιμοποιηθεί για την προβολή τους με τον ίδιο τρόπο.

Για παράδειγμα, είναι κοινό να χρησιμοποιείτε μια λίστα χωρίς ταξινόμηση (

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

    τάξη ="μενού">
    τάξη ="μενού-στοιχείο">
    href ="/Σπίτι">Σπίτι

  • τάξη ="τρέχον στοιχείο">
    href ="/σχετικά με">Σχετικά με

    τάξη ="μενού-στοιχείο">
    href ="/Επικοινωνία">Επικοινωνία

Ένα στοιχείο μπορεί να έχει περισσότερες από μία τάξεις. Πολλαπλές τάξεις διαχωρίζονται με κενά μέσα στο στοιχείο κλάσης.

τάξη ="πρώτο καπάκι">
Αυτή είναι η πρώτη παράγραφος και είναι επίσης μέρος της κατηγορίας drop-cap.

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

Σε CSS, JavaScript και άλλες γλώσσες, η κλάση ενός στοιχείου σημειώνεται με τελεία πριν από το όνομα.

/ * CSS * /

.πρώτο {
χρώμα: πράσινο;
}

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

Χαρακτηριστικό ID

Το χαρακτηριστικό ID λειτουργεί παρόμοια με το χαρακτηριστικό Class, αλλά είναι εννοιολογικά διαφορετικό. Αντί να υποδηλώνει την ιδιότητα μέλους σε μια ομάδα, αναγνωρίζει μοναδικά αυτό το στοιχείο. Για αυτόν τον λόγο, μπορεί να υπάρχει μόνο ένα στοιχείο με οποιοδήποτε συγκεκριμένο αναγνωριστικό σε οποιαδήποτε δεδομένη σελίδα.

id ="τίτλος σελίδας">Αυτός είναι ο τίτλος της σελίδας

Τα αναγνωριστικά χρησιμοποιούνται λιγότερο συχνά για να επηρεάσουν την εμφάνιση και πιο συχνά χρησιμοποιούνται για λειτουργικούς σκοπούς.

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

  1. href ="# εισαγωγή">Εισαγωγή
  2. href ="# ιστορία_of_topic">Ιστορία του θέματος

id ="εισαγωγή" τάξη ="κεφαλίδα ενότητας">Εισαγωγή

Κείμενο εισαγωγικής ενότητας.

id ="history_of_topic" τάξη ="κεφαλίδα ενότητας">

Κάποια ιστορία σχετικά με αυτό το θέμα.

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

/ * CSS * /

# εισαγωγή {
μέγεθος γραμματοσειράς: 14px;
}

Άλλα χαρακτηριστικά

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

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

Υπάρχει επίσης ένας αριθμός “παγκόσμιων” χαρακτηριστικών – χαρακτηριστικών που μπορεί να έχει οποιοδήποτε στοιχείο. Αυτά θα καλυφθούν επίσης λεπτομερέστερα αργότερα, καθώς οι χρήσεις τους καθίστανται πιο σχετικές.

Ετικέτες σχολίων

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

Τα σχόλια μπορεί να είναι πολλαπλών γραμμών.

Πότε να το χρησιμοποιήσετε

και

ο

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

στοιχείο σε οποιαδήποτε σελίδα.

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

ετικέτα, και τους τίτλους των άρθρων σε ένα ευρετήριο ιστολογίου μέσα

ετικέτες.

Ωστόσο, σε μια σελίδα ενός άρθρου, ο τίτλος της ανάρτησης ή του ίδιου του άρθρου πρέπει να βρίσκεται μέσα στο

ετικέτα, με τον τίτλο του ιστότοπου σε

ή ακόμη και

ετικέτα.

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

ετικέτα.
Ιεραρχική οργάνωση

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

ακολουθεί ένα

ετικέτα, θα πρέπει να είναι η κεφαλίδα για μια δευτερεύουσα ενότητα.

Υπότιτλοι

Ένας τίτλος με υπότιτλο πρέπει δεν χρησιμοποίησε δύο διαφορετικές ετικέτες κεφαλίδας:

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

Ο κύριος τίτλος αυτού του άρθρου:
Ο υπότιτλος του ίδιου άρθρου

Ο κύριος τίτλος αυτού του άρθρου: τάξη ="υπότιτλος">Ο υπότιτλος του ίδιου άρθρου

Επικεφαλίδες για Widgets

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

ετικέτες για το σκοπό αυτό, κράτηση

,

, και

για περιεχόμενο σχετικό με λέξεις-κλειδιά.
 

Πρόσφατες δημοσιεύσεις

  • href ="#">Τίτλος ανάρτησης
  • href ="#">Τίτλος ανάρτησης
  • href ="#">Τίτλος ανάρτησης

Αρχείο

  • href ="#">Ιούνιος 2015
  • href ="#">Μάιος 2015
  • href ="#">Απρίλιος 2015

Ωστόσο, εάν έχετε τακτικά τόσες πολλές υποενότητες στο περιεχόμενο της σελίδας σας που πρέπει να χρησιμοποιήσετε

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

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

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

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

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




 id ="κάποια επικεφαλίδα">Κάποια επικεφαλίδα στη μέση της σελίδας
href ="http://example.com/page#some-headline">Κάντε κλικ εδώ για να πάτε εκεί.
  • Είναι κακό.
  • Είναι λάθος.
  • Δεν υποστηρίζεται.
  • Τακτοποιημένη λίστα

    Οι παραγγελθείσες λίστες είναι λίστες που είναι αριθμημένες ή γραμμένες. Το εξωτερικό στοιχείο είναι

      , και το
    1. Η ετικέτα χρησιμοποιείται ξανά για κάθε στοιχείο.

      1. Συλλέξτε εσώρουχα.
      2. ???
      3. Κέρδος.
      1. Συλλέξτε εσώρουχα.
      2. ???
      3. Κέρδος.

      ο

        Το στοιχείο υποστηρίζει πολλά χαρακτηριστικά που αλλάζουν τον τρόπο αρίθμησης της λίστας.

        Το χαρακτηριστικό type μπορεί να χρησιμοποιηθεί για να αλλάξετε τους προεπιλεγμένους αραβικούς αριθμούς (1, 2, 3) σε γράμματα ή λατινικούς αριθμούς (κεφαλαία ή πεζά).

        τύπος ="Εγώ">
      1. Πεζά ρωμαϊκά ψηφία 1.
      2. Πεζά ρωμαϊκά ψηφία 2.
      3. Πεζά ρωμαϊκά ψηφία 3.
      1. Πεζά ρωμαϊκά ψηφία 1.
      2. Πεζά ρωμαϊκά ψηφία 2.
      3. Πεζά ρωμαϊκά ψηφία 3.

      Οι επιλογές για τον τύπο είναι:

      • 1 - Αραβικοί αριθμοί (1, 2, 3) - Αυτή είναι η προεπιλογή.
      • A - Κεφαλαία γράμματα (A, B, C)
      • α - Πεζά γράμματα (a, b, c)
      • I - Λατινικοί αριθμοί κεφαλαίων (I, II, III)
      • i - Ρωμαϊκοί αριθμοί πεζών (i, ii, iii)

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

      έναρξη ="10">
    2. Σοκολάτα
    3. Βανίλια
    4. Λάδι μηχανής
    τύπος ="Εγώ" έναρξη ="8">
  • Τηλεσφόρος
  • Hyginus
  • Πίος
  • Ανίκετος
    1. Σοκολάτα
    2. Βανίλια
    3. Λάδι μηχανής
    1. Τηλεσφόρος
    2. Hyginus
    3. Πίος
    4. Ανίκετος

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

    Από την πύλη εκκίνησης!

    έναρξη ="-3">
  • Περιμένετε.
  • Περιμένετε.
  • Περιμένετε.
  • ΠΗΓΑΙΝΩ!
  • Κορυφαίοι δέκα λόγοι

    έναρξη ="10" αντιστράφηκε>
  • Επειδή.
  • Και έτσι λοιπόν.
  • QED
  • και τα λοιπά.
  • Από την πύλη εκκίνησης!

    1. Περιμένετε.
    2. Περιμένετε.
    3. Περιμένετε.
    4. ΠΗΓΑΙΝΩ!

    Κορυφαίοι δέκα λόγοι

    1. Επειδή.
    2. Και έτσι λοιπόν.
    3. QED
    4. και τα λοιπά.

    Πράγματα που πρέπει να προσέξετε για αυτά τα δύο παραδείγματα:

    1. Το χαρακτηριστικό έναρξης μπορεί να είναι αρνητικό.
    2. Ακόμα κι αν η λίστα αντιστραφεί, η τιμή έναρξης είναι η πρώτα αριθμός για τη λίστα.
    3. Το αντίστροφο χαρακτηριστικό δεν χρειάζεται να καθορίσει μια τιμή. Αυτό συμβαίνει επειδή έχει μόνο δύο πιθανές τιμές: true (present) ή false (absent).
    4. Μια λίστα με τα κορυφαία δέκα (ή παρόμοια αντίστροφη μέτρηση) δεν χρειάζεται να καθορίσει ένα χαρακτηριστικό έναρξης εάν τελειώνει με 1, το οποίο θα είναι πάντα ο τελευταίος αριθμός σε μια αντίστροφη λίστα, εκτός εάν ορίζεται διαφορετικά. Το παραπάνω παράδειγμα δεν περιείχε πραγματικά δέκα στοιχεία, επομένως ήταν απαραίτητο να καθοριστεί.
    5. Η προεπιλεγμένη συμπεριφορά είναι η αύξηση του αριθμού για κάθε επόμενο στοιχείο λίστας. Επομένως, εάν θέλετε να "αντίστροφη μέτρηση" από έναν αρνητικό αριθμό, θα πρέπει δεν συμπεριλάβετε το αντίστροφο χαρακτηριστικό.
    Λίστες περιγραφής / ορισμού

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

    Ολόκληρη η λίστα είναι τυλιγμένη στην ετικέτα. Κάθε όρος στη λίστα επισημαίνεται με ετικέτα ("όρος ορισμού") και κάθε όρος ακολουθείται από ένα ή περισσότερα στοιχεία ("περιγραφή ορισμού").

    Τύποι λιστών

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

    Τύποι λιστών

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

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

    Λίστα ονομάτων: με στοιχεία επικοινωνίας στην περιγραφή. Λίστα τίτλων κομματιών ήχου: με λεπτομερείς πληροφορίες κομματιού στην περιγραφή. Λίστα προσφορών προϊόντων: με πληροφορίες σχετικά με τα προϊόντα στην περιγραφή. Λίστα στατιστικών: με το όνομα stat ως τον όρο και την τιμή stat στην περιγραφή

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

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

    Υπάρχει επίσης μια απλή χρήση για λίστες περιγραφής, η οποία είναι κάπως αμφιλεγόμενη. Περιλήφθηκε ως παράδειγμα στην προδιαγραφή HTML4, αλλά καταργήθηκε για HTML5: διάλογος τύπου σεναρίου.

    Αναγνώστης Ποια είναι η αγαπημένη σας οντότητα HTML? Συντάκτης Αστείο πρέπει να ρωτήσετε! Είναι η λίστα περιγραφών. Αναγνώστης Πραγματικά? Τι είναι τόσο υπέροχο γι 'αυτό? Συντάκτης Είναι τόσο παράξενα ευέλικτο.

    Αυτό θα φαίνεται κακό

    1. Στοιχείο ένα
    2. Θέμα 2
      1. Υπο-στοιχείο Α.
      2. Υπο-στοιχείο Β.
        1. Υπο-υπο-στοιχείο i.
        2. Υπο-υπο-στοιχείο ii.
        3. Υποτμήμα iii.
      3. Υπο-στοιχείο Γ.
    3. Θέμα Τρίτο

    Εδώ πώς πρέπει να το κάνετε

    1. Στοιχείο ένα
    2. Θέμα 2
      1. Υπο-στοιχείο Α.
      2. Υπο-στοιχείο Β.
        1. Υπο-υπο-στοιχείο i.
        2. Υπο-υπο-στοιχείο ii.
          1. Κάτω από την ιεραρχία.
          2. Χρειάζεται κάποιος σε πολλά επίπεδα λίστας?
            1. Αυτό γίνεται γελοίο.
        3. Υποτμήμα iii.
      3. Υπο-στοιχείο Γ.
    3. Θέμα Τρίτο

    Οι ένθετες λίστες μπορούν να συνδυάσουν τύπους λιστών.

    Αυτή είναι μια λίστα με παραγγελίες:
    1. Κέικ.
    2. Πίτες.
    3. Η τούρτα είναι ένα ψέμα.
    Αυτή είναι μια μη ταξινομημένη λίστα, που περιλαμβάνει τύπους λιστών:
    • Τακτοποιημένες λίστες
    • Μη ταξινομημένες λίστες
    • Λίστες περιγραφής
    Αυτή είναι μια μη ταξινομημένη λίστα που βρίσκεται μέσα σε μια λίστα με παραγγελίες, η οποία βρίσκεται μέσα σε αυτήν τη λίστα περιγραφών:
    1. Το πρώτο αντικείμενο.
    2. Το δεύτερο στοιχείο.
    3. Το τρίτο στοιχείο, που είναι η ένθετη λίστα.
      • Μαχαίρι
      • Πιρούνι
      • Κουτάλι
      • Spork
      • Ξυλάκια
    4. Αυτό το τέταρτο στοιχείο είναι εδώ μόνο για να πλαισιώσει καλύτερα την ένθετη λίστα.
    Αυτή είναι μια λίστα με παραγγελίες:
    1. Κέικ.
    2. Πίτες.
    3. Η τούρτα είναι ένα ψέμα.
    Αυτή είναι μια μη ταξινομημένη λίστα, που περιλαμβάνει τύπους λιστών:
    • Τακτοποιημένες λίστες
    • Μη ταξινομημένες λίστες
    • Λίστες περιγραφής
    Αυτή είναι μια μη ταξινομημένη λίστα που βρίσκεται μέσα σε μια λίστα με παραγγελίες, η οποία βρίσκεται μέσα σε αυτήν τη λίστα περιγραφών:
    1. Το πρώτο αντικείμενο.
    2. Το δεύτερο στοιχείο.
    3. Το τρίτο στοιχείο, που είναι η ένθετη λίστα.
      • Μαχαίρι
      • Πιρούνι
      • Κουτάλι
      • Spork
      • Ξυλάκια
    4. Αυτό το τέταρτο στοιχείο είναι εδώ μόνο για να πλαισιώσει καλύτερα την ένθετη λίστα.

    Πρέπει να σημειωθεί ότι οι λίστες δεν μπορούν να τοποθετηθούν μέσα από στοιχεία παραγράφου (

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

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

    Αποκλεισμός εισαγωγικών και ενσωματωμένων εισαγωγικών

    Εάν αναφέρετε κάποιον ή κάτι τέτοιο, χρησιμοποιήστε ένα από τα δύο στοιχεία προσφοράς HTML.

    Blockquotes

    Το blockquote είναι πολύ πιο κοινό. Αυτό οφείλεται στη συνήθη τυπογραφική σύμβαση:

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

    Για να είσαι ή όχι, αυτή είναι η ερώτηση.

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

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

    αναφέρω ="http://www.gutenberg.org/ebooks/2265"> Για να είσαι ή όχι, αυτή είναι η ερώτηση.
    - Άμλετ, Γουίλιαμ Σαίξπηρ

    Για να είσαι ή όχι, αυτή είναι η ερώτηση.
    - Άμλετ, Γουίλιαμ Σαίξπηρ

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

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

    αναφέρω ="http://www.gutenberg.org/ebooks/2265">

    Για να είσαι ή όχι, αυτή είναι η ερώτηση.

    href ="http://www.gutenberg.org/ebooks/2265">Άμλετ, Γουίλιαμ Σαίξπηρ

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

    Ενσωματωμένο απόσπασμα

    Το λιγότερο συχνά χρησιμοποιούμενο στοιχείο αναφοράς είναι το ενσωματωμένο απόσπασμα, .

    Η αγαπημένη μου γραμμή στο Άμλετ είναι όταν λέει, cite ="http://www.gutenberg.org/ebooks/2265"> Για να είσαι ή όχι, αυτή είναι η ερώτηση.

    Η αγαπημένη μου γραμμή στο Άμλετ είναι όταν λέει, «Να είμαι ή όχι», αυτή είναι η ερώτηση.

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

    Ωστόσο, η χρήση της ετικέτας αντί των απλών εισαγωγικών έχει μερικά πλεονεκτήματα.

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

    Υπερσύνδεσμοι

    Μία από τις πιο σημαντικές ετικέτες σε HTML είναι η ετικέτα αγκύρωσης (), η οποία ορίζει έναν υπερσύνδεσμο. Η δυνατότητα σύνδεσης εγγράφων σε ένα δίκτυο συνδέσεων είναι η ουσία του ιστού και ο ορισμός του «υπερκειμένου».

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

    Το κείμενο μέσα στο στοιχείο ονομάζεται "κείμενο αγκύρωσης" και η συνδεδεμένη διεύθυνση URL καθορίζεται στο χαρακτηριστικό href.

    href ="http://example.com">Αυτός είναι ένας σύνδεσμος προς το example.com Αυτός είναι ένας σύνδεσμος προς το example.com

    Μαζί με το href, η ετικέτα έχει πολλά σημαντικά χαρακτηριστικά.

    • Ο στόχος καθορίζει σε ποιο παράθυρο (ή καρτέλα του προγράμματος περιήγησης) θα ανοίξει ο σύνδεσμος. Η προεπιλογή είναι το ίδιο παράθυρο. Εάν θέλετε να ανοίξετε ένα νέο σύνολο καρτελών target ="_κενό".
    • Ο τίτλος ορίζει την επεξήγηση εργαλείου ή το κείμενο του συνδέσμου. Αυτό εμφανίζεται σε ένα μικρό αναδυόμενο παράθυρο όταν ο χρήστης θέτει σε λειτουργία το κείμενο αγκύρωσης. Είναι χρήσιμο για την παροχή ορισμένων πρόσθετων πληροφοριών σχετικά με το τι πρόκειται να κάνει κλικ ο χρήστης.
    • rel αναφέρει μια σχέση μεταξύ του συνδεδεμένου εγγράφου και του τρέχοντος εγγράφου. Έχει πολλές πιθανές τιμές:
      • alternate - Το συνδεδεμένο έγγραφο έχει το ίδιο περιεχόμενο με το τρέχον έγγραφο, αλλά σε εναλλακτική μορφή. Χρησιμοποιείται συχνότερα για σύνδεση με τροφοδοσίες RSS.
      • author - Το συνδεδεμένο έγγραφο είναι η αρχική σελίδα του προφίλ του συγγραφέα του τρέχοντος εγγράφου ή άρθρου.
      • σελιδοδείκτης - Ένας σύνδεσμος προς ένα συγκεκριμένο σημείο του εγγράφου (όπως κατά τη δημιουργία ενός πίνακα περιεχομένων στη σελίδα).
      • help - Το συνδεδεμένο έγγραφο παρέχει τεκμηρίωση βοήθειας στο τρέχον έγγραφο.
      • license - Το συνδεδεμένο έγγραφο είναι το κείμενο άδειας για το τρέχον έγγραφο.
      • next - Το συνδεδεμένο έγγραφο είναι το επόμενο μέρος σε μια σειρά σελιδοποίησης. Ορισμένα προγράμματα περιήγησης προ-ανακτούν τα περιεχόμενα του συνδεδεμένου εγγράφου προκειμένου να επιταχύνουν την απόδοση όταν ο χρήστης κάνει κλικ σε αυτό.
      • nofollow - Το συνδεδεμένο έγγραφο είναι δεν εγκρίθηκε από τον συντάκτη του τρέχοντος εγγράφου. Χρησιμοποιείται για την αποφυγή παροχής πλεονεκτήματος SEO στη συνδεδεμένη σελίδα. Τα συστήματα σχολίων συχνά το προσθέτουν στους συνδέσμους που εισάγονται από τον χρήστη από προεπιλογή.
      • noreferrer - Χρησιμοποιείται για την αποφυγή αποστολής πληροφοριών παραπομπής στην κεφαλίδα αιτήματος HTTP όταν ο χρήστης κάνει κλικ στον σύνδεσμο. Συνήθως, το αίτημα HTTP θα καθορίσει από πού προέρχεται ο χρήστης (η τρέχουσα σελίδα). Αυτό ζητά ο πελάτης του προγράμματος περιήγησης να παραλείψει αυτές τις πληροφορίες.
      • prefetch - Παρόμοιο με το επόμενο, αλλά χωρίς να υπονοεί μια πραγματική διαδοχική σχέση. Αυτό ζητά από το πρόγραμμα περιήγησης να πάρει τα περιεχόμενα της συνδεδεμένης σελίδας πριν ο χρήστης κάνει κλικ σε αυτήν, έτσι ώστε η πλοήγηση στην επόμενη σελίδα να φαίνεται στιγμιαία.
      • prev - Το αντίστροφο του επόμενου, αυτή η τιμή καθορίζει ότι το συνδεδεμένο έγγραφο είναι η προηγούμενη σελίδα σε μια σελιδοποιημένη σειρά. Ορισμένα προγράμματα περιήγησης ενδέχεται να προαναπαράγουν τα περιεχόμενα.
      • αναζήτηση - Η συνδεδεμένη σελίδα παρέχει μια διεπαφή ειδικά για την αναζήτηση του τρέχοντος εγγράφου και των σχετικών εγγράφων.
      • ετικέτα - Το συνδεδεμένο έγγραφο παρέχει πλαίσιο σχετικά με το θέμα της τρέχουσας σελίδας.

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

    Για παράδειγμα: Η Google χρησιμοποιεί το rel ="συντάκτης" σύνδεσμος (εάν συνδέεται με προφίλ Google+) για την εμφάνιση συνδέσμων σε άλλο περιεχόμενο από τον ίδιο συντάκτη στα αποτελέσματα αναζήτησης. - Η αναζήτηση εικόνων Google περιλαμβάνει τη δυνατότητα αναζήτησης βάσει άδειας, εύρεσης περιεχομένου με άδεια Creative Commons για επαναχρησιμοποίηση. Αυτό το χαρακτηριστικό εξαρτάται, εν μέρει, από το rel ="άδεια" χαρακτηριστικό που χρησιμοποιείται σε συνδέσμους προς Creative Commons και άλλες ανοιχτές άδειες. Αρκετές μηχανές αναζήτησης και ιστότοποι συγκέντρωσης ειδήσεων χρησιμοποιούν το κείμενο αγκύρωσης και τη σελίδα αναφοράς ενός rel ="ετικέτα" σύνδεσμος για τον προσδιορισμό του θέματος μιας δεδομένης σελίδας.

    Η ετικέτα rel μπορεί επίσης να χρησιμοποιηθεί σε Microformats, οι οποίοι είναι απλοί τρόποι συμπερίληψης πρόσθετων σημασιολογικών πληροφοριών σε υπάρχοντα χαρακτηριστικά HTML (συνήθως rel και class).

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

    Τον επόμενο μήνα θα περάσω ένα ολόκληρο Σαββατοκύριακο σε ένα συνέδριο με το href ="http://example.com/kami-profile" rel ="συνεργάτης">Κάμι. Το συνέδριο είναι κοντά στην πόλη μου, οπότε ελπίζω να μπορώ να γευματίσω με το href ="http://example.com/dave-profile" rel ="μητρική εταιρεία">ο μπαμπάς μου.

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

    Διακόσμηση κειμένου

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

    Τολμηρός

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

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

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

    • υποδηλώνει ότι το τυλιγμένο κείμενο «τονίζεται» κάπως.
    • είναι απλά πλάγια γραφή, χωρίς να συνδέεται συγκεκριμένη σημασιολογική έννοια.
    Υπογραμμίζω

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

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

    Η παράσταση θα ξεκινήσει στις 7:00 μ.μ. 8:00 μ.μ..

    Η παράσταση θα ξεκινήσει στις 7:00 μ.μ. 8:00 μ.μ.

    Line-Through

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

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

    Υπάρχει επίσης μια ετικέτα που ήταν διαθέσιμη σε HTML4.

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

    Πηγαίος κώδικας και μη επεξεργασμένο κείμενο

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

    • - Χρησιμοποιείται για μπλοκ κώδικα ή μη επεξεργασμένου κειμένου.
    • - Χρησιμοποιείται όταν πρέπει να συμπεριλάβετε μια σύντομη λέξη ή φράση κώδικα με το κείμενο.

    Και οι δύο εμφανίζονται σε γραμματοσειρά monospace (συνήθως Courier) από προεπιλογή, διατηρούν κενό διάστημα και δεν αποδίδουν ετικέτες.

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

    Μέγεθος κειμένου

    Μπορείτε να κάνετε το κείμενο αυθαίρετα μεγαλύτερο ή μικρότερο με δύο στοιχεία που διαφορετικά δεν έχουν συγκεκριμένη σημασία:

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

    Το γενικό στοιχείο

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

    Δεν είμαι σίγουρος γιατί δεν υπάρχει ετικέτα σαρκασμού. Ίσως απλά δεν είναι απαραίτητο γιατί class ="σαρκασμός">ο τόνος είναι τόσο εύκολο να διαβαστεί στο Διαδίκτυο.

    / * CSS * / .σαρκασμός { χρώμα: μωβ; στυλ γραμματοσειράς: πλάγια; }

    .σαρκασμός {
    χρώμα: μωβ;
    στυλ γραμματοσειράς: πλάγια;
    }

    Δεν είμαι σίγουρος γιατί δεν υπάρχει ετικέτα σαρκασμού. Ίσως δεν χρειάζεται γιατί ο τόνος είναι τόσο εύκολο να διαβαστεί στο Διαδίκτυο.

    Διαχωριστές

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


    • εισάγει μια αλλαγή γραμμής
    • εισάγει μια οριζόντια γραμμή

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

    Οι αλλαγές γραμμής είναι ιδιαίτερα χρήσιμες όταν πρέπει να έχετε σκληρές γραμμές αλλά άλλες λύσεις - όπως πολλαπλές

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

    Τα τριαντάφυλλα είναι κόκκινα
    Οι βιολέτες είναι μπλέ
    Το Rhyming είναι δύσκολο
    Το HTML5 είναι καταπληκτικό.

    123 Main St.
    Φορτ Γουόρθ, TX 76148

    Τα τριαντάφυλλα είναι κόκκινα
    Οι βιολέτες είναι μπλέ
    Το Rhyming είναι δύσκολο
    Το HTML5 είναι καταπληκτικό.

    123 Main St.
    Φορτ Γουόρθ, TX 76148

    Αυτό είναι πιο εύκολο από ό, τι φαίνεται

    Όλα αυτά μπορεί να φαίνονται περίπλοκα, αλλά πραγματικά δεν είναι. Οι περισσότερες από τις ετικέτες που χρειάζεστε σε τακτική βάση είναι εύκολο να θυμάστε: τίτλοι, παράγραφοι, λίστα χωρίς ταξινόμηση. Δεν χρειάζεται να απομνημονεύσετε όλες τις διαφορετικές επιλογές ή έννοιες πίσω από κάθε μία. Απλώς προσπαθήστε να έχετε κατά νου ότι οποιοδήποτε κανονικό τυπογραφικό στοιχείο (όπως μια επικεφαλίδα, μια λίστα, μια παράγραφος ή ένας σύνδεσμος) έχει πιθανώς μια υπάρχουσα ετικέτα HTML για να το επιτύχει. Εάν το έχετε υπόψη σας, μπορείτε απλώς να γράψετε χωρίς να εστιάσετε σε αυτά τα πράγματα και στη συνέχεια να αναζητήσετε τα συγκεκριμένα στοιχεία που δεν θυμάστε.

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

    Δομικό HTML

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

    Βασική δομή εγγράφων HTML

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

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

    Κυρίως, σήμερα, το σωστό DOCTYPE είναι απλά html. Έτσι, ένα έγγραφο HTML πρέπει να ξεκινά με:

    html>

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

    Μετά τη δήλωση DOCTYPE, η ετικέτα ανοίγματος είναι η ετικέτα. Το κλείσιμο της ετικέτας θα είναι η τελευταία γραμμή του εγγράφου.

    Μέσα στην ετικέτα HTML, μπορείτε να καθορίσετε τη γλώσσα του εγγράφου (σε αυτήν την περίπτωση, Αγγλικά).

    html> lang ="en"> . . . . .

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

    html> lang ="en"> . . . . . .

    Αυτή είναι η βασική δομή κάθε εγγράφου HTML. Όλα είναι βασικά επιπλέον.

    Περιεχόμενα του

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

    Μεταδεδομένα

    Η ετικέτα χρησιμοποιείται πολλές φορές στο για να καθορίσει διάφορα μεταδεδομένα (δεδομένα σχετικά με το έγγραφο).

    Οι μετα-ετικέτες είναι κενές ετικέτες, χωρίς να απαιτείται ετικέτα κλεισίματος. Μπορείτε να τα τερματίσετε με την αυτοκόλλητη κάθετο (/>, αλλά αυτό δεν απαιτείται (και ορισμένοι άνθρωποι το αποθαρρύνουν ακόμη και ειδικά).

    Κωδικοποίηση χαρακτήρων

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

    Τις περισσότερες φορές, αυτές τις μέρες, θέλετε να καθορίσετε το σύνολο χαρακτήρων UTF-8.

    (Η άλλη κοινή κωδικοποίηση - ASCII - δεν έχει όλους τους εκτεταμένους χαρακτήρες όπως em-dash και σγουρά εισαγωγικά. Εάν έχετε δει ποτέ περίεργες δυσλειτουργίες τύπου όπου τα εισαγωγικά ή οι απόστολοι έχουν αντικατασταθεί με φαινομενικά τυχαίους χαρακτήρες, επειδή το έγγραφο γράφτηκε UTF-8 αλλά εμφανίζεται χρησιμοποιώντας το ASCII - που σημαίνει ότι κάποιος δεν καθορίζει το σωστό σύνολο χαρακτήρων στο έγγραφο.)

    charset ="utf-8">
    Περιγραφή, συγγραφέας και λέξεις-κλειδιά

    Βασικές πληροφορίες σχετικά με το έγγραφο - ποιος το έγραψε και τι αφορά - μεταφέρονται επίσης μέσω ετικετών. Αυτά έχουν δύο χαρακτηριστικά: το όνομα της ετικέτας και το περιεχόμενο της ετικέτας.

    όνομα ="περιγραφή" περιεχόμενο ="Μια σελίδα για HTML."> όνομα ="λέξεις-κλειδιά" περιεχόμενο ="HTML, ετικέτες, μεταδεδομένα"> όνομα ="συντάκτης" περιεχόμενο ="Αδάμ Μάικλ Γουντ">

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

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

    Τίτλος

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

    Αυτός είναι ο τίτλος της σελίδας.

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

    ή

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

    είναι δεν μια καλή ιδέα να τοποθετήσετε άλλες ετικέτες στον τίτλο (όπως ή ) επειδή συνήθως δεν εμφανίζονται σωστά.

    Ένα έγγραφο HTML μπορεί να καθορίσει μόνο έναν τίτλο.

    Σύνδεσμοι CSS

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

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

    href ="/css/style.css" rel ="φύλλο στυλ">
    Πληροφορίες RSS

    Το RSS - Σύνοψη εμπλουτισμένων ιστότοπων ή Really Simple Syndication - είναι ένας τρόπος παροχής μιας ενημέρωσης ιστοτόπων (όπως νέες αναρτήσεις ιστολογίου) σε συνδρομητές, έτσι ώστε να ενημερώνονται για νέο περιεχόμενο καθώς δημοσιεύεται και να διαβάζουν αυτό το περιεχόμενο από ένα RSS αναγνώστη χωρίς να χρειάζεται να επισκεφθείτε τον ιστότοπό σας.

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

    rel ="εναλλακτικό" τύπος ="εφαρμογή / rss + xml" τίτλος ="RSS" href ="/feed.xml" />

    Το rel ="εναλλακτικό" χαρακτηριστικό σημαίνει ότι η συνδεδεμένη διεύθυνση URL περιέχει το ίδιο περιεχόμενο (μια λίστα αναρτήσεων ιστολογίου), αλλά σε μια εναλλακτική μορφή. Το χαρακτηριστικό type καθορίζει τον τύπο της μορφής (RSS).

    Άλλες πληροφορίες

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

    Σύνδεσμοι Javascript

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

    Παράδειγμα εγγράφου HTML με ολοκληρωμένο στοιχείο

    html> lang ="en"> charset ="utf-8"> όνομα ="περιγραφή" περιεχόμενο ="Μια σελίδα για HTML."> όνομα ="λέξεις-κλειδιά" περιεχόμενο ="HTML, ετικέτες, μεταδεδομένα"> όνομα ="συντάκτης" περιεχόμενο ="Αδάμ Μάικλ Γουντ"> href ="/css/style.css" rel ="φύλλο στυλ"> Οδηγός για HTML rel ="εναλλακτικό" τύπος ="εφαρμογή / rss + xml" τίτλος ="RSS" href ="/feed.xml" /> . . . .

    Περιεχόμενα του

    Η ετικέτα είναι το κύριο τμήμα του εγγράφου HML και μπορεί να περιέχει κάθε είδους πράγματα.

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

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

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

    Το στοιχείο

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

    Αυτό είχε ως αποτέλεσμα πολλές ένθετες ετικέτες.

    τάξη ="επί κεφαλής"> τάξη ="λογότυπο"> τάξη ="main-nav"> τάξη ="μπαρα αναζήτησης"> τάξη ="περιεχόμενο σελίδας"> τάξη ="κύριος"> τάξη ="άρθρο"> τάξη ="κεφαλίδα άρθρου">

    Τίτλος άρθρου

    τάξη ="άρθρο-μετα"> τάξη ="περιεχόμενο-άρθρο">

    Αρθρο.

    Περιεχόμενο.

    τάξη ="άρθρο-υποσέλιδο"> τάξη ="σχόλια"> τάξη ="πλευρική γραμμή"> τάξη ="υποσέλιδο"> τάξη ="άδεια"> τάξη ="πληροφορίες επαφής">

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

    Πίνακες HTML

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

    Τι είναι οι πίνακες?

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

    Ονομα Επίθετο Ηλικία
    Γιάννης Σιδηρουργός 31
    Ιωάννα λευκό 32
    Είδος υφάσματος Τζόουνς 41

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

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

    Σύνταξη πίνακα

    Βασική σύνταξη

    Όλοι οι πίνακες χρησιμοποιούν το

    στοιχείο, η σειρά πίνακα ( ) στοιχείο και το κελί πίνακα ( ) κάθε φορά.

    ) στοιχείο.

    Αυτά τα τρία στοιχεία από μόνα τους αρκούν για έναν απλό πίνακα. Ένας πίνακας είναι χτισμένος σε μία σειρά (

    Γιάννης Σιδηρουργός 31
    Ιωάννα λευκό 32
    Είδος υφάσματος Τζόουνς 41
    Γιάννης Σιδηρουργός 31
    Ιωάννα λευκό 32
    Είδος υφάσματος Τζόουνς 41
    Επιγραφές πίνακα: Επιλογή 1

    Συχνά είναι επιθυμητό να τοποθετήσετε κεφαλίδες στην κορυφή ενός τραπεζιού. Ένας τρόπος για να γίνει αυτό είναι να αντικαταστήσετε τα κανονικά κελιά πίνακα ( ) με κελιά κεφαλίδας πίνακα ().

    Ονομα Επίθετο Ηλικία
    Γιάννης Σιδηρουργός 31
    Ιωάννα λευκό 32
    Είδος υφάσματος Τζόουνς 41
    Ονομα Επίθετο Ηλικία
    Γιάννης Σιδηρουργός 31
    Ιωάννα λευκό 32
    Είδος υφάσματος Τζόουνς 41

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

    Επιγραφές πίνακα (και σώμα): Επιλογή 2

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

    Όταν γίνει αυτό, το υπόλοιπο περιεχόμενο συνήθως τυλίγεται σε ένα στοιχείο πίνακα-σώματος ().

    Ονομα Επίθετο Ηλικία
    Γιάννης Σιδηρουργός 31
    Ιωάννα λευκό 32
    Είδος υφάσματος Τζόουνς 41

    Κάνοντας αυτό, μπορείτε να ορίσετε ολόκληρη τη σειρά κεφαλίδας.

    θεάδ { χρώμα φόντου: μαύρο; άσπρο χρώμα; γραμματοσειρά: έντονο; }

    # thead-παράδειγμα thead {
    χρώμα φόντου: μαύρο;
    άσπρο χρώμα;
    γραμματοσειρά: έντονο;
    }

    Ονομα Επίθετο Ηλικία
    Γιάννης Σιδηρουργός 31
    Ιωάννα λευκό 32
    Είδος υφάσματος Τζόουνς 41

    Ίσως πιο ενδιαφέρον, αυτό επιτρέπει επίσης το στυλ του τραπεζιού χωρίς να επηρεάζεται το κεφάλι.

    tbody tr: nth-child (περίεργο) { χρώμα φόντου: #eee; } tbody tr: nth-child (ζυγό) { χρώμα φόντου: #fff; }

    # tbody-example thead {
    χρώμα φόντου: μαύρο;
    άσπρο χρώμα;
    γραμματοσειρά: έντονο;
    }
    # tbody-example tbody tr: nth-child (μονό) {
    χρώμα φόντου: #eee;
    }
    # tbody-example tbody tr: nth-child (ζυγό) {
    χρώμα φόντου: #fff;
    }

    Ονομα Επίθετο Ηλικία
    Γιάννης Σιδηρουργός 31
    Ιωάννα λευκό 32
    Είδος υφάσματος Τζόουνς 41
    Υποσέλιδο πίνακα

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

    θεάδ { χρώμα φόντου: μαύρο; άσπρο χρώμα; γραμματοσειρά: έντονο; } tbody tr: nth-child (περίεργο) { χρώμα φόντου: #eee; } tbody tr: nth-child (ζυγό) { χρώμα φόντου: #fff; } ποδόσφαιρο { χρώμα φόντου: # 222222; άσπρο χρώμα; στυλ γραμματοσειράς: πλάγια; } Ονομα Επίθετο Ηλικία
    Γιάννης Σιδηρουργός 31
    Ιωάννα λευκό 32
    Είδος υφάσματος Τζόουνς 41
    ΜΕΣΟΣ ΟΡΟΣ ΗΛΙΚΙΑΣ 34.67

    # tfoot-example thead {
    χρώμα φόντου: μαύρο;
    άσπρο χρώμα;
    γραμματοσειρά: έντονο;
    }
    # tfoot-example tbody tr: nth-child (μονό) {
    χρώμα φόντου: #eee;
    }
    # tfoot-example tbody tr: nth-child (ζυγό) {
    χρώμα φόντου: #fff;
    }

    # tfoot-παράδειγμα tfoot {
    χρώμα φόντου: # 222222;
    άσπρο χρώμα;
    στυλ γραμματοσειράς: πλάγια;
    }

    Ονομα Επίθετο Ηλικία
    Γιάννης Σιδηρουργός 31
    Ιωάννα λευκό 32
    Είδος υφάσματος Τζόουνς 41
    ΜΕΣΟΣ ΟΡΟΣ ΗΛΙΚΙΑΣ 34.67
    Στήλες πίνακα

    Μερικές φορές πρέπει να σχεδιάσετε μια στήλη πίνακα. Αυτό μπορεί να επιτευχθεί (σε κάποιο βαθμό) χρησιμοποιώντας σήμανση στήλης.

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

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

    στυλ ="χρώμα φόντου: κυανό;"> στυλ ="χρώμα φόντου: κίτρινο;"> στυλ ="χρώμα φόντου: κόκκινο;"> Ονομα Επίθετο Ηλικία
    Γιάννης Σιδηρουργός 31
    Ιωάννα λευκό 32
    Είδος υφάσματος Τζόουνς 41
    ΜΕΣΟΣ ΟΡΟΣ ΗΛΙΚΙΑΣ 34.67
    Ονομα Επίθετο Ηλικία
    Γιάννης Σιδηρουργός 31
    Ιωάννα λευκό 32
    Είδος υφάσματος Τζόουνς 41
    ΜΕΣΟΣ ΟΡΟΣ ΗΛΙΚΙΑΣ 34.67

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

    εύρος ="2" στυλ ="χρώμα φόντου: κυανό;"> στυλ ="χρώμα φόντου: κίτρινο;"> Ονομα Επίθετο Ηλικία
    Γιάννης Σιδηρουργός 31
    Ιωάννα λευκό 32
    Είδος υφάσματος Τζόουνς 41
    ΜΕΣΟΣ ΟΡΟΣ ΗΛΙΚΙΑΣ 34.67
    Ονομα Επίθετο Ηλικία
    Γιάννης Σιδηρουργός 31
    Ιωάννα λευκό 32
    Είδος υφάσματος Τζόουνς 41
    ΜΕΣΟΣ ΟΡΟΣ ΗΛΙΚΙΑΣ 34.67

    Υπάρχουν προβλήματα με τη χρήση της σήμανσης, δυστυχώς:

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

    Λόγω αυτών των ζητημάτων, έχει περιορισμένη χρησιμότητα για το στυλ του τραπεζιού.

    Υπάρχουν δύο κοινές λύσεις σε αυτό: χαρακτηριστικά κατηγορίας και επιλογείς nth-child.

    Για να χρησιμοποιήσετε τα χαρακτηριστικά κλάσης, απλώς εφαρμόστε την κατηγορία για κάθε στήλη (και / ή) στοιχείο.

    τάξη ="στήλη 1">Ονομα τάξη ="στήλη 2">Επίθετο τάξη ="στήλη 3">Ηλικία τάξη ="στήλη 1">Γιάννης τάξη ="στήλη 2">Σιδηρουργός τάξη ="στήλη 3">31 τάξη ="στήλη 1">Ιωάννα τάξη ="στήλη 2">λευκό τάξη ="στήλη 3">32 τάξη ="στήλη 1">Είδος υφάσματος τάξη ="στήλη 2">Τζόουνς τάξη ="στήλη 3">41 τάξη ="στήλη 1"> τάξη ="στήλη 2">ΜΕΣΟΣ ΟΡΟΣ ΗΛΙΚΙΑΣ τάξη ="στήλη 3">34.67

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

    Για παράδειγμα, τι γίνεται αν θέλουμε η στήλη Όνομα να είναι τολμηρή και οι ηλικίες να εμφανίζονται με κόκκινη γραμματοσειρά monospace - μαζί με τα άλλα στυλ κεφαλίδας και υποσέλιδου που ορίστηκαν προηγουμένως?

    θεάδ { χρώμα φόντου: μαύρο; άσπρο χρώμα; γραμματοσειρά: έντονο; } tbody tr: nth-child (περίεργο) { χρώμα φόντου: #eee; } tbody tr: nth-child (ζυγό) { χρώμα φόντου: #fff; } ποδόσφαιρο { χρώμα φόντου: # 222222; άσπρο χρώμα; στυλ γραμματοσειράς: πλάγια; } td: πρώτο παιδί { γραμματοσειρά: έντονο; } td: τελευταίο παιδί { font-family: monospace; χρώμα: κόκκινο; Ονομα Επίθετο Ηλικία
    Γιάννης Σιδηρουργός 31
    Ιωάννα λευκό 32
    Είδος υφάσματος Τζόουνς 41
    ΜΕΣΟΣ ΟΡΟΣ ΗΛΙΚΙΑΣ 34.67

    # pseudocolumns-παράδειγμα thead {
    χρώμα φόντου: μαύρο;
    άσπρο χρώμα;
    γραμματοσειρά: έντονο;
    }
    # pseudocolumns-example tbody tr: nth-child (μονό) {
    χρώμα φόντου: #eee;
    }
    # pseudocolumns-example tbody tr: nth-child (ζυγό) {
    χρώμα φόντου: #fff;
    }

    # pseudocolumns-παράδειγμα tfoot {
    χρώμα φόντου: # 222222;
    άσπρο χρώμα;
    στυλ γραμματοσειράς: πλάγια;
    }

    # pseudocolumns-παράδειγμα td: πρώτο παιδί {
    γραμματοσειρά: έντονο;
    }

    # pseudocolumns-example td: τελευταίο παιδί {
    font-family: monospace;
    χρώμα: # a20000;
    }

    # pseudocolumns-παράδειγμα tfoot td: last-child {
    χρώμα: # ff3e3e;
    }

    Ονομα Επίθετο Ηλικία
    Γιάννης Σιδηρουργός 31
    Ιωάννα λευκό 32
    Είδος υφάσματος Τζόουνς 41
    ΜΕΣΟΣ ΟΡΟΣ ΗΛΙΚΙΑΣ 34.67
    Breaking the Grid: rowspan και colspan

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

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

    colspan ="2"> ΜΕΣΟΣ ΟΡΟΣ ΗΛΙΚΙΑΣ: 34.67

    # colspan-example thead {
    χρώμα φόντου: μαύρο;
    άσπρο χρώμα;
    γραμματοσειρά: έντονο;
    }
    # colspan-example tbody tr: nth-child (μονό) {
    χρώμα φόντου: #eee;
    }
    # colspan-example tbody tr: nth-child (ζυγό) {
    χρώμα φόντου: #fff;
    }

    # colspan-παράδειγμα tfoot {
    χρώμα φόντου: # 222222;
    άσπρο χρώμα;
    στυλ γραμματοσειράς: πλάγια;
    }

    Ονομα Επίθετο Ηλικία
    Γιάννης Σιδηρουργός 31
    Ιωάννα λευκό 32
    Είδος υφάσματος Τζόουνς 41
    ΜΕΣΟΣ ΟΡΟΣ ΗΛΙΚΙΑΣ 34.67

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

    Ονομα Επίθετο Ηλικία Σώμα στρατού γραμμή γραμμών ="2">Παραγωγή ίχνους του Όρεγκον colspan ="2">ΜΕΣΟΣ ΟΡΟΣ ΗΛΙΚΙΑΣ
    Γιάννης Σιδηρουργός 31
    Ιωάννα λευκό 32
    Είδος υφάσματος Τζόουνς 41 Γενιά X
    34.67

    # rowspan-example thead {
    χρώμα φόντου: μαύρο;
    άσπρο χρώμα;
    γραμματοσειρά: έντονο;
    }
    # rowspan-example tbody tr: nth-child (μονό) {
    χρώμα φόντου: #eee;
    }
    # rowspan-example tbody tr: nth-child (ζυγό) {
    χρώμα φόντου: #fff;
    }

    # rowspan-example tfoot {
    χρώμα φόντου: # 222222;
    άσπρο χρώμα;
    στυλ γραμματοσειράς: πλάγια;
    }

    Ονομα Επίθετο Ηλικία Σώμα στρατού
    Γιάννης Σιδηρουργός 31 Παραγωγή ίχνους του Όρεγκον
    Ιωάννα λευκό 32
    Είδος υφάσματος Τζόουνς 41 Γενιά X
    ΜΕΣΟΣ ΟΡΟΣ ΗΛΙΚΙΑΣ 34.67

    Τι δεν είναι οι πίνακες?

    Δεν πρέπει να ειπωθεί, αλλά:

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

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

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

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

    Εκτός από όλα αυτά - σε σύγκριση με τον σωστό τρόπο εκτέλεσης πραγμάτων, η διάταξη βάσει πίνακα είναι πολύ πιο δύσκολη. Απλά μην το κάνεις.

    Table Edge Case - μεταφράσεις δίπλα-δίπλα

    Μία χρήση μη δεδομένων για πίνακες που είναι αρκετά κοινή είναι η μετάφραση δίπλα-δίπλα. Εξετάστε το ακόλουθο απόσπασμα από το Dantes The Divine Comedy.

    # άνοιγμα inferno {
    περίγραμμα: κανένα;
    απόσταση ορίου: 10 εικονοστοιχεία;
    }

    Nel mezzo del cammin di nostra vita
    mi ritrovai ανά una selva oscura,
    chà © la diritta μέσω της εποχής smarrita.
    Στα μέσα του ταξιδιού της ζωής μας
    Βρέθηκα μέσα σε ένα σκοτεινό δάσος,
    Γιατί το απλό μονοπάτι είχε χαθεί.
    Ahi quanto a dir qual era è cosa dura
    esta selva selvaggia e aspra e forte
    che nel pensier rinova la paura!
    Αχ! πόσο δύσκολο είναι να πεις
    Τι ήταν αυτό το άγριο δάσος, τραχύ και αυστηρό,
    Το οποίο στην ίδια τη σκέψη ανανεώνει τον φόβο.
    Tant è amara che poco è più morte;
    ma per trattar del ben chi vi trovai,
    dirò de laltre cose chi vho scorte.
    Τόσο πικρό είναι, ο θάνατος είναι λίγο περισσότερο.
    Αλλά από το καλό για θεραπεία, το οποίο βρήκα εκεί,
    Θα μιλήσω για τα άλλα πράγματα που είδα εκεί.

    Φυσικά, αυτό είναι απλώς ένα τραπέζι με λίγο στυλ:

    # άνοιγμα inferno { περίγραμμα: κανένα; απόσταση ορίου: 10 εικονοστοιχεία; } id ="άνοιγμα κόλασης"> Nel mezzo del cammin di nostra vita
    mi ritrovai ανά una selva oscura,
    chà © la diritta μέσω της εποχής smarrita.
    Στα μέσα του ταξιδιού της ζωής μας
    Βρέθηκα μέσα σε ένα σκοτεινό δάσος,
    Γιατί το απλό μονοπάτι είχε χαθεί.
    Ahi quanto a dir qual era è cosa dura
    esta selva selvaggia e aspra e forte
    che nel pensier rinova la paura!
    Αχ! πόσο δύσκολο είναι να πεις
    Τι ήταν αυτό το άγριο δάσος, τραχύ και αυστηρό,
    Το οποίο στην ίδια τη σκέψη ανανεώνει τον φόβο.
    Tant è amara che poco è più morte;
    ma per trattar del ben chi vi trovai,
    dirò de laltre cose chi vho scorte.
    Τόσο πικρό είναι, ο θάνατος είναι λίγο περισσότερο.
    Αλλά από το καλό για θεραπεία, το οποίο βρήκα εκεί,
    Θα μιλήσω για τα άλλα πράγματα που είδα εκεί.

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

    Πολλοί προγραμματιστές χρησιμοποιούν αυτό το μοτίβο για μεταφρασμένο κείμενο και είναι εντάξει. Ωστόσο, μπορεί να υπάρχει καλύτερος τρόπος.

    Εξετάστε το ακόλουθο HTML:

    id ="canto-1"> τάξη ="ιταλικός"> id ="αυτό-1" τάξη ="σελ. 1"> Nel mezzo del cammin di nostra vita
    mi ritrovai ανά una selva oscura,
    chà © la diritta μέσω της εποχής smarrita.
    id ="αυτό-2" τάξη ="σελ. 2"> Ahi quanto a dir qual era è cosa dura
    esta selva selvaggia e aspra e forte
    che nel pensier rinova la paura!
    id ="αυτό-3" τάξη ="σελ. 3"> Tant è amara che poco è più morte;
    ma per trattar del ben chi vi trovai,
    dirò de laltre cose chi vho scorte.
    τάξη ="Αγγλικά"> id ="en-1" τάξη ="σελ. 1"> Στα μέσα του ταξιδιού της ζωής μας
    Βρέθηκα μέσα σε ένα σκοτεινό δάσος,
    Γιατί το απλό μονοπάτι είχε χαθεί.
    id ="en-2" τάξη ="σελ. 2"> Αχ! πόσο δύσκολο είναι να πεις
    Τι ήταν αυτό το άγριο δάσος, τραχύ και αυστηρό,
    Το οποίο στην ίδια τη σκέψη ανανεώνει τον φόβο.
    id ="en-3" τάξη ="σελ. 3"> Τόσο πικρό είναι, ο θάνατος είναι λίγο περισσότερο.
    Αλλά από το καλό για θεραπεία, το οποίο βρήκα εκεί,
    Θα μιλήσω για τα άλλα πράγματα που είδα εκεί.

    Χρησιμοποιώντας το CSS για να επιπλέουν οι δύο γλώσσες το ένα δίπλα στο άλλο, και το JS για να διασφαλίσει ότι κάθε ζεύγος παραγράφων (en-1 και it-2, κ.λπ.) έχει το ίδιο ύψος, το ίδιο εφέ μπορεί να δημιουργηθεί χωρίς προσφυγή στον πίνακα- βασισμένη διάταξη.

    Πλεονεκτήματα:

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

    Μειονεκτήματα:

    • Απαιτείται JavaScript
    • Κάθε παράγραφος πρέπει να είναι αναγνωρισμένη στη σήμανση.

    Πίνακες στον πραγματικό κόσμο

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

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

    Οι πίνακες είναι ισχυροί

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

    Φόρμες HTML

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

    Βασικά έντυπα

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

    Ένα πολύ βασικό παράδειγμα μπορεί να μοιάζει με:

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

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

    Πώς λειτουργεί μια φόρμα

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

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

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

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

    Αιτήσεις HTTP και μέθοδοι φόρμας

    Οι φόρμες μπορούν να στείλουν δύο διαφορετικούς τύπους αιτημάτων:

    • ΘΕΣΗ
    • ΠΑΙΡΝΩ

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

    __Η σημασιολογική διαφορά μεταξύ POST και GET

    Το GET είναι το προεπιλεγμένο αίτημα HTTP και είναι ο ίδιος τύπος αιτήματος που χρησιμοποιείται από το πρόγραμμα περιήγησής σας όταν πληκτρολογείτε μια διεύθυνση στη γραμμή διευθύνσεων. Είναι ένα αίτημα για «λήψη» κάτι.

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

    Η τεχνική διαφορά

    Όταν χρησιμοποιείτε μια αίτηση GET, οι παράμετροι εισαγωγής περιλαμβάνονται στη διεύθυνση URL.

    http://example.com/search?term=thing+i+am+searaching+for

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

    Η διαφορά εδώ έχει νόημα με βάση την έννοια κάθε τύπου αιτήματος:

    • Ένα αίτημα GET ζητά έναν συγκεκριμένο πόρο, οριζόμενος από τη διεύθυνση URL. Επομένως, οι λεπτομέρειες αυτού του αιτήματος πρέπει να περιλαμβάνονται στη διεύθυνση URL, επειδή αυτές οι λεπτομέρειες καθορίζουν τον πόρο που ζητά πραγματικά το αίτημα.
    • Ένα αίτημα POST στέλνει ένα μήνυμα σε μια συγκεκριμένη διεύθυνση. Η διεύθυνση ορίζεται στη διεύθυνση URL και το μήνυμα ορίζεται στο κύριο μέρος του αιτήματος.
    Πότε να χρησιμοποιήσετε το POST και το GET σε Φόρμες

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

    Άλλες ενδείξεις Το GET είναι η σωστή επιλογή:

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

    Εάν μια φόρμα χρησιμοποιείται για την υποβολή πληροφοριών, το POST είναι πιθανότατα η σωστή επιλογή.

    Άλλες ενδείξεις ότι το POST είναι η σωστή επιλογή:

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

    Επιπλέον, υπάρχουν δύο λόγοι για τους οποίους πρέπει να χρησιμοποιείται ένα POST, ακόμη και αν ένα αίτημα GET έχει πιο νόημα για άλλους λόγους:

    • Για λόγους ασφαλείας, είναι προτιμότερο να μην τοποθετείτε τις παραμέτρους εισαγωγής στη διεύθυνση URL.
    • Το μήκος της διεύθυνσης URL που χρησιμοποιεί αίτημα GET θα υπερβαίνει τους 2000 χαρακτήρες.
    Πού να ορίσετε POST ή GET

    Κάθε φόρμα υποβάλλει πληροφορίες στο διακομιστή χρησιμοποιώντας τον τύπο αίτησης GET ή POST. Αυτό ορίζεται με το χαρακτηριστικό της μεθόδου στο στοιχείο.

    μέθοδος ="ΠΑΙΡΝΩ"> μέθοδος ="ΘΕΣΗ">

    Η προεπιλεγμένη μέθοδος είναι το GET, το οποίο οδήγησε σε πολλή ατυχής χρήση του GET όταν το POST θα ήταν η σωστή επιλογή. Μην βασίζεστε στην προεπιλογή - χρησιμοποιήστε τη σωστή μέθοδο για την περίπτωσή σας.

    Ενέργεια φόρμας - Η ζητούμενη διεύθυνση URL

    Μια φόρμα λαμβάνει έναν πόρο (ορίζεται από μια διεύθυνση URL) ή δημοσιεύει πληροφορίες σε έναν πόρο (ορίζεται από μια διεύθυνση URL).

    Η διεύθυνση URL του πόρου ορίζεται από το χαρακτηριστικό ενέργειας σε μια φόρμα.

    δράση ="search.php" μέθοδος ="ΠΑΙΡΝΩ"> δράση ="edit-post.php" μέθοδος ="ΘΕΣΗ">

    Όπως με τα χαρακτηριστικά href και src, η διεύθυνση URL μπορεί να είναι σχετική (action ="search.php") ή απόλυτη (ενέργεια ="http://example.com/search.php").

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

    Άλλα χαρακτηριστικά του

    Τα ακόλουθα χαρακτηριστικά ισχύουν για το στοιχείο:

    • accept-charset - Ορίζει το σύνολο χαρακτήρων που χρησιμοποιείται για την υποβολή δεδομένων φόρμας. Η προεπιλογή είναι ίδια με το σύνολο χαρακτήρων εγγράφων, επομένως αυτό συνήθως δεν απαιτείται.
    • action - Η διεύθυνση URL στόχου για υποβολή φόρμας. Εξηγείται παραπάνω.
    • autocomplete - Ενεργοποιεί την αυτόματη συμπλήρωση σε υποστηριζόμενα προγράμματα περιήγησης. Οι τιμές είναι ενεργοποιημένες ή απενεργοποιημένες. Η προεπιλεγμένη τιμή είναι ενεργοποιημένη. Είναι δυνατή η παράκαμψη αυτής της ρύθμισης σε μεμονωμένα στοιχεία φόρμας.
    • enctype - Καθορίζει τον τρόπο κωδικοποίησης των δεδομένων φόρμας. Αυτό ισχύει μόνο για φόρμες POST. Οι τιμές είναι:
      • application / x-www-form-urlencoded - Όλοι οι χαρακτήρες κωδικοποιούνται πριν από την αποστολή. Τα διαστήματα μετατρέπονται σε σύμβολα + και οι ειδικοί χαρακτήρες μετατρέπονται σε τιμές ASCII HEX. Αυτή είναι η προεπιλογή.
      • multipart / form-data - Οι χαρακτήρες δεν κωδικοποιούνται. Αυτό απαιτείται εάν χρησιμοποιείτε ένα πρόγραμμα μεταφόρτωσης αρχείων στη φόρμα σας.
      • text / plain - Τα Spaces μετατρέπονται σε + σύμβολα, αλλά οι ειδικοί χαρακτήρες δεν κωδικοποιούνται.
    • μέθοδος - GET ή POST
    • name - Το όνομα της φόρμας. Συνήθως είναι καλή ιδέα να συμπεριληφθεί ένα και δεν υπάρχει λόγος να μην είναι το ίδιο με το αναγνωριστικό.
    • novalidate - Καθορίζει ότι τα δεδομένα της φόρμας δεν πρέπει να επικυρώνονται αυτόματα κατά την υποβολή τους. Αυτό το χαρακτηριστικό δεν δέχεται καμία τιμή. (Προσέξτε με αυτό.)
    • target - Ισοδύναμο με το χαρακτηριστικό target στους συνδέσμους αγκύρωσης (), αυτό το χαρακτηριστικό καθορίζει πού πρέπει να εμφανίζεται η απόκριση από τη φόρμα.
      • _self - Ανοίγει την απόκριση στο ίδιο παράθυρο. Αυτή είναι η προεπιλογή.
      • _blank - Ανοίγει την απόκριση σε νέο παράθυρο ή καρτέλα.
      • _parent - Ανοίγει την απόκριση στο γονικό παράθυρο ή το πλαίσιο των φορμών.
      • _top - Ανοίγει την απόκριση σε ολόκληρο το παράθυρο.
      • framename - Μπορείτε επίσης να καθορίσετε το όνομα ενός πλαισίου για να ανοίξετε την απόκριση, εάν είχατε ανοίξει προηγουμένως και ονομάσει πλαίσια στη σελίδα.

    Χρήση στοιχείων φόρμας

    Ονόματα στοιχείων

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

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

    δράση ="" μέθοδος ="Θέση"> για ="όνομα">Ονομα τύπος ="κείμενο" όνομα ="όνομα" id ="όνομα"> για ="όνομα">Επίθετο τύπος ="κείμενο" όνομα ="επίθετο" id ="επίθετο"> τύπος ="υποβάλλουν">
    Ετικέτες στοιχείου

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

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

    δράση ="" μέθοδος ="Θέση"> τύπος ="κείμενο" όνομα ="όνομα" placeholder ="Ονομα"> τύπος ="κείμενο" όνομα ="επίθετο" placeholder ="Επίθετο"> τύπος ="υποβάλλουν">

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

    • Οι ετικέτες χρησιμοποιούνται από τους αναγνώστες οθόνης για να πουν στους τυφλούς χρήστες ποια είναι τα πεδία.
    • Δεν υποστηρίζουν όλα τα προγράμματα περιήγησης το χαρακτηριστικό “placeholder”.

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

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

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

     για ="όνομα">Ονομα
     τύπος ="κείμενο" όνομα ="όνομα" id ="όνομα">

    Αυτό εξυπηρετεί δύο σκοπούς:

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

    Εκτός από τη χρήση του Για χαρακτηριστικό, μια ετικέτα μπορεί να δεσμευτεί σε μια είσοδο συμπεριλαμβάνοντας την είσοδο μέσα στο στοιχείο.

    
    
    Χρώμα

    το κόκκινο

    Μπλε

    Πράσινος

    Ορισμός προεπιλεγμένων τιμών

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

     δράση ="" μέθοδος ="Θέση">
     για ="όνομα">Ονομα
     τύπος ="κείμενο" όνομα ="όνομα" id ="όνομα"αξία="Γιάννης">
     για ="επίθετο">Επίθετο
     τύπος ="κείμενο" όνομα ="επίθετο" id ="επίθετο" τιμή ="Σιδηρουργός">
     τύπος ="υποβάλλουν">
    

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

    Στο παραπάνω παράδειγμα (ένα όνομα προσώπου), θα ήταν κακή ιδέα να χρησιμοποιήσετε τις τιμές “John Smith” ακριβώς ως σύμβολο κράτησης θέσης ή υπόδειξη στον χρήστη – ο χρήστης μπορεί να το υποβάλει στον διακομιστή. Ωστόσο, εάν αυτή ήταν (για παράδειγμα) μια σελίδα προφίλ, όπου οι χρήστες μπορούν να ενημερώσουν τις δικές τους πληροφορίες ή αφήστε το το ίδιο, τότε η χρήση αξίας με αυτόν τον τρόπο έχει νόημα.

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

    Απενεργοποίηση στοιχείων

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

     δράση ="" μέθοδος ="Θέση">
     για ="όνομα">Ονομα
     τύπος ="κείμενο" όνομα ="όνομα" τιμή ="Γιάννης" id ="όνομα">
     για ="επίθετο">Επίθετο
     τύπος ="κείμενο" όνομα ="επίθετο" τιμή ="Σιδηρουργός" id ="επίθετο" άτομα με ειδικές ανάγκες>
     τύπος ="υποβάλλουν">
    

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

    ο στοιχείο

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

    Οι διαφορετικοί τύποι στοιχείων ελέγχου εισόδου καθορίζονται από το τύπος χαρακτηριστικό στο στοιχείο.

    Τύπος: Κείμενο

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

    τύπος ="κείμενο">

    ο λίστα Το χαρακτηριστικό μπορεί να χρησιμοποιηθεί για τον καθορισμό μιας λίστας προκαθορισμένων τιμών για μια είσοδο.

    τύπος ="κείμενο" λίστα ="επιλογές"> id ="επιλογές"> τιμή ="το κόκκινο"> τιμή ="πράσινος"> τιμή ="μπλε">
    Τύπος: Υποβολή

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

     τύπος ="υποβάλλουν">

    Το προεπιλεγμένο κείμενο στο κουμπί υποβολής είναι “Υποβολή”. Αυτό μπορεί να αλλάξει με το αξία Χαρακτηριστικό.

    όνομα ="Αναζήτηση"> τύπος ="υποβάλλουν" τιμή ="Αναζήτηση">

    Ένας άλλος τύπος εισόδου δημιουργεί ένα παρόμοιο GUI με το υποβάλλουν πληκτρολογήστε – το κουμπί τύπος. Ωστόσο, μην χρησιμοποιείτε το κουμπί για υποβολή γενικής φόρμας. (Δεν θα λειτουργήσει.) Και μην χρησιμοποιήσετε το υποβάλλουν κουμπί για γενικά κουμπιά σε μια φόρμα – θα λειτουργήσει με λάθος τρόπο.

    Τύπος: Κωδικός πρόσβασης

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

    για ="όνομα χρήστη">Ονομα χρήστη
    όνομα ="όνομα χρήστη" τύπος ="κείμενο" id ="όνομα χρήστη">

    για ="Κωδικός πρόσβασης">Κωδικός πρόσβασης
    τύπος ="Κωδικός πρόσβασης" όνομα ="Κωδικός πρόσβασης" id ="Κωδικός πρόσβασης">

    τύπος ="υποβάλλουν" τιμή ="Σύνδεση">
    Τύποι εισαγωγής κειμένου με επικύρωση

    Πολλοί τύποι εισόδου δημιουργούν το ίδιο GUI – ένα πλαίσιο για την πληκτρολόγηση κειμένου – αλλά δημιουργούν διαφορετικές συνθήκες για την επικύρωση της εισαγωγής.

    Για παράδειγμα, το ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ πληκτρολογήστε ελέγχους για να βεβαιωθείτε ότι τα δεδομένα που εισάγονται συμμορφώνονται με την τυπική μορφή διεύθυνσης email (κάποιο κείμενο, ακολουθούμενο από το @ σύμβολο, ακολουθούμενο από κείμενο που περιλαμβάνει τουλάχιστον μία κουκκίδα).

    Αυτοί οι τύποι είναι:

    • ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ
    • αριθμός – Το πεδίο δέχεται μόνο αριθμούς.
    • τηλ – Τηλέφωνο. (Η επικύρωση για αριθμούς τηλεφώνου δεν υποστηρίζεται ευρέως στα προγράμματα περιήγησης.)
    • url – Δέχεται μόνο καλά διαμορφωμένες διευθύνσεις URL.

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

    Τύποι με επιλογείς ημερομηνίας ή ώρας

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

    Αυτοί οι τύποι είναι:

    • ημερομηνία
    • ημερομηνία ώρα
    • ώρα-τοπική
    • μήνας
    • χρόνος
    • εβδομάδα
    για ="ημερομηνία">Παράδειγμα εισαγωγής ημερομηνίας
    τύπος ="ημερομηνία" όνομα ="ημερομηνία" id ="ημερομηνία">

    για ="ημερομηνία ώρα">Παράδειγμα εισαγωγής δεδομένων χρόνου
    τύπος ="ημερομηνία ώρα" όνομα ="ημερομηνία ώρα" id ="ημερομηνία ώρα">

    για ="datetime-local"> Παράδειγμα τοπικού χρόνου ώρας
    τύπος ="datetime-local" όνομα ="datetime-local" id ="datetime-local">

    για ="μήνας">Παράδειγμα εισαγωγής μήνα
    τύπος ="μήνας" όνομα ="μήνας" id ="μήνας">

    για ="χρόνος">Παράδειγμα εισαγωγής χρόνου
    τύπος ="χρόνος" όνομα ="χρόνος" id ="χρόνος">

    για ="εβδομάδα">Παράδειγμα εισαγωγής εβδομάδας
    τύπος ="εβδομάδα" όνομα ="εβδομάδα" id ="εβδομάδα">

    Τύπος: Ραδιόφωνο

    Τα κουμπιά επιλογής είναι ένας τύπος εισαγωγής φόρμας όπου μπορεί να επιλεγεί μόνο ένα στοιχείο σε ένα σετ.

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

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

    τύπος ="ραδιόφωνο" όνομα ="σχήμα" τιμή ="τετράγωνο"> τετράγωνο
    τύπος ="ραδιόφωνο" όνομα ="σχήμα" τιμή ="κύκλος"> Κύκλος
    τύπος ="ραδιόφωνο" όνομα ="σχήμα" τιμή ="τρίγωνο"> Τρίγωνο
    τύπος ="ραδιόφωνο" όνομα ="χρώμα" τιμή ="το κόκκινο"> το κόκκινο
    τύπος ="ραδιόφωνο" όνομα ="χρώμα" τιμή ="μπλε"> Μπλε
    τύπος ="ραδιόφωνο" όνομα ="χρώμα" τιμή ="Πράσινος"> Πράσινος
    Σχήμα



    Χρώμα



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

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

    
    
    τύπος ="ραδιόφωνο" όνομα ="σχήμα" τιμή ="τετράγωνο"> τετράγωνο
    τύπος ="ραδιόφωνο" όνομα ="σχήμα" τιμή ="κύκλος"> Κύκλος
    τύπος ="ραδιόφωνο" όνομα ="σχήμα" τιμή ="τρίγωνο"> Τρίγωνο
    τύπος ="ραδιόφωνο" όνομα ="χρώμα" τιμή ="το κόκκινο"> το κόκκινο
    τύπος ="ραδιόφωνο" όνομα ="χρώμα" τιμή ="μπλε"> Μπλε
    τύπος ="ραδιόφωνο" όνομα ="χρώμα" τιμή ="Πράσινος"> Πράσινος
    Σχήμα

    τετράγωνο

    Κύκλος

    Τρίγωνο

    Χρώμα

    το κόκκινο

    Μπλε

    Πράσινος

    Παρατηρήστε ότι από το το στοιχείο τυλίγει το στοιχείο, το Για και ταυτότητα δεν απαιτούνται χαρακτηριστικά.

    Τύπος: Πλαίσιο ελέγχου

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

    Ο πρώτος τύπος είναι ένα μόνο κλειδί που μπορεί να έχει αρκετές τιμές (μερικές φορές ονομάζεται πολλαπλή επιλογή). Ο δεύτερος τύπος είναι ένα κλειδί boolean (TRUE / FALSE).

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

    Χρώματα που μου αρέσουν
    τύπος ="πλαίσιο ελέγχου" όνομα ="χρώμα" τιμή ="μπλε"> Μπλε
    τύπος ="πλαίσιο ελέγχου" όνομα ="χρώμα" τιμή ="πράσινος"> Πράσινος
    τύπος ="πλαίσιο ελέγχου" όνομα ="χρώμα" τιμή ="κίτρινος"> Κίτρινος
    τύπος ="πλαίσιο ελέγχου" όνομα ="χρώμα" τιμή ="το κόκκινο"> το κόκκινο
    Χρώματα που μου αρέσουν

    Χρωματιστά

    Μπλε

    Πράσινος

    Κίτρινος

    το κόκκινο

    Σε αυτό το παράδειγμα, πολλαπλάσιο χρώμα μπορούν να γίνουν επιλογές. Καθένας θα σταλεί στο διακομιστή ως μεμονωμένες παράμετροι στο αίτημα. Για παράδειγμα, εάν όλα είχαν επιλεγεί σε ένα ΠΑΙΡΝΩ μορφή, το ζητούμενο URL θα μοιάζει με:

    http://example.com?color=blue&color=green&color=yellow&color=red

    Μπορείτε επίσης να χρησιμοποιήσετε ξεχωριστά πλαίσια ελέγχου για να αντιπροσωπεύσετε δυαδικές τιμές (TRUE / FALSE).

    τύπος ="πλαίσιο ελέγχου" όνομα ="για" τιμή ="ΑΛΗΘΗΣ"> Κάνοντας κλικ εδώ πιστοποιείτε ότι αποδέχεστε τους Όρους Παροχής Υπηρεσιών.

    Κάνοντας κλικ εδώ πιστοποιείτε ότι αποδέχεστε τους Όρους Παροχής Υπηρεσιών.

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

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

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

    Τύπος: Κουμπί

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

     τύπος ="κουμπί" τιμή ="Ετικέτα κουμπιού" onclick ="ειδοποίηση ('είμαι κουμπί!')">
    Τύπος: Χρώμα

    Νέο σε HTML5 – και υποστηρίζεται μόνο σε ορισμένα προγράμματα περιήγησης – είναι ένας τύπος εισαγωγής χρωμάτων.

    Σε προγράμματα περιήγησης που το υποστηρίζουν, κάνοντας κλικ σε αυτό το στοιχείο εμφανίζεται ένα GUI για την επιλογή ενός χρώματος. Η τιμή που υποβάλλεται στο διακομιστή είναι μια τιμή δεκαεξαδικού χρώματος HTML / CSS (πρώην. λευκό = #ffffff).

    για ="αγαπημένο χρώμα">Ποιο είναι το αγαπημένο σας χρώμα?
    τύπος ="χρώμα" όνομα ="αγαπημένο χρώμα" id ="αγαπημένο χρώμα">

    Τύπος: Εύρος

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

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

    
    
    για ="κατανόηση μορφής">Πόσο καλά καταλαβαίνετε τις φόρμες?

    Καθόλου.
    τύπος ="εύρος" όνομα ="κατανόηση μορφής" id ="κατανόηση μορφής" ελάχιστο ="0" μέγιστο ="100"> Πολύ καλά.

    Καθόλου.

    Πολύ καλά.

    Τύπος: Εικόνα

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

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

    τύπος ="εικόνα" src ="παράδειγμα.jpg">
    Τύπος: Αρχείο

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

    τύπος ="αρχείο" όνομα ="ανέβασμα αρχείου">

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

    
    
    
    τύπος ="αρχείο" όνομα ="επέκταση περιορισμένης μεταφόρτωσης" αποδοχή =".png, .gif, .jpg, .jpeg">
    τύπος ="αρχείο" όνομα ="mime-limited-uploader" αποδοχή ="εικόνα, εικόνα / png, εικόνα / gif, εικόνα / jpg, εικόνα / jpeg">

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

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

    • Ένας κακόβουλος (ή απρόσεκτος) χρήστης μπορεί να ονομάσει εσφαλμένα ένα αρχείο με λάθος επέκταση. ο αποδέχομαι Ο περιορισμός ενός μεταφορτωτή αρχείων εξετάζει μόνο την επέκταση, όχι την πραγματική μορφή αρχείου, επομένως δεν υπάρχει εγγύηση ότι ένα αρχείο είναι του σωστού τύπου.
    • Είναι δυνατή η παράκαμψη της φόρμας και η υποβολή αιτήματος απευθείας στον διακομιστή. (Αυτός είναι ο λόγος ΟΛΕΣ οι είσοδοι πρέπει να επικυρωθούν στον διακομιστή.)
    Τύπος: Κρυφό

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

     τύπος ="κρυμμένος" όνομα ="κρυφή τιμή" τιμή ="">

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

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

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

    • αποδέχομαι – Καθορίζει μια λίστα τύπων αρχείων, είτε κατά επέκταση είτε κατά τύπο MIME. Χρησιμοποιείται μόνο με type = "αρχείο".
    • υψ – Ορίζει ένα κείμενο alt. Χρησιμοποιείται μόνο με type = "εικόνα".
    • αυτόματη συμπλήρωση – Καθορίζει εάν το πεδίο εισαγωγής θα πρέπει να συμπληρωθεί αυτόματα. Οι τιμές είναι επί ή μακριά από. Αντικαθιστά το επίπεδο φόρμας αυτόματη συμπλήρωση Χαρακτηριστικό. Ισχύει μόνο για εισόδους που βασίζονται σε κείμενο.
    • αυτόματη εστίαση – Καθορίζει ότι το θα πρέπει να είναι στο επίκεντρο κατά τη φόρτωση της σελίδας. Δεν απαιτείται τιμή. Πρέπει να χρησιμοποιείται μόνο μία φορά σε ένα έγγραφο.
    • τετραγωνισμένος – Σετ α ραδιόφωνο ή πλαίσιο ελέγχου εισαγωγή στην επιλεγμένη κατάσταση.
    • άτομα με ειδικές ανάγκες – Απενεργοποιεί ένα στοιχείο. Τα απενεργοποιημένα στοιχεία δεν στέλνουν την αξία τους κατά την υποβολή της φόρμας. Δεν απαιτείται τιμή.
    • μορφή – Καθορίζει a
      στο οποίο το ανήκει, για χρήση όταν το το στοιχείο είναι έξω από το στοιχείο. Η τιμή είναι το ταυτότητα της φόρμας στόχου. Αυτό το χαρακτηριστικό δεν υποστηρίζεται καθολικά.
    • σχηματισμός – Καθορίζει μια διεύθυνση URL για την υποβολή της φόρμας. Παρακάμπτει το δράση χαρακτηριστικό του
      το ίδιο, ή το αντικαθιστά. Αυτό χρησιμοποιείται μόνο στο υποβάλλουν ή εικόνα τύποι. Ο μόνος λόγος για να το χρησιμοποιήσετε αντί για τις φόρμες δράση Το χαρακτηριστικό είναι εάν μια φόρμα απαιτεί πολλαπλά κουμπιά υποβολής με διαφορετικές ενέργειες.
    • τύπος τύπου – Καθορίζει την κωδικοποίηση χαρακτήρων των υποβληθέντων δεδομένων. Παρακάμπτει το enctype χαρακτηριστικό του
      στοιχείο. Αυτό χρησιμοποιείται μόνο στο υποβάλλουν και εικόνα τύποι. Αξίες:
      • εφαρμογή / x-www-form-urlencoded
      • πολλαπλά στοιχεία / μορφή-δεδομένα
      • κείμενο / απλό
    • μέθοδος φόρμας – Καθορίζει τη μέθοδο (παίρνω ή Θέση) της υποβολής της φόρμας. Παρακάμπτει το μέθοδος χαρακτηριστικό του
      στοιχείο. Αυτό χρησιμοποιείται μόνο στο υποβάλλουν και εικόνα τύποι.
    • φορμανοβαλιδάτη – Καθορίζει ότι τα δεδομένα της φόρμας δεν πρέπει να επικυρωθούν πριν από την υποβολή. Παρακάμπτει το ναβαλιδάτη χαρακτηριστικό του
      στοιχείο. Αυτό χρησιμοποιείται μόνο στο υποβάλλουν και εικόνα τύποι. Αυτό το χαρακτηριστικό δεν απαιτεί καμία τιμή.
    • φορμάρτζ – Καθορίζει το περιβάλλον του προγράμματος περιήγησης στο οποίο θα εμφανίζεται η απόκριση. Παρακάμπτει το στόχος χαρακτηριστικό του
      στοιχείο. Αυτό χρησιμοποιείται μόνο στο υποβάλλουν και εικόνα τύποι. Αξίες:
      • _κενό
      • _εαυτός
      • _μητρική εταιρεία
      • _μπλουζα
      • όνομα πλαισίου
    • ύψος – Καθορίζει το ύψος, σε pixel, ενός εικόνα εισαγωγή. Θα ήταν καλύτερα να χρησιμοποιήσετε το CSS για να το προσδιορίσετε αυτό.
    • λίστα – Καθορίζει το ταυτότητα του α στοιχείο που περιέχει προκαθορισμένες επιλογές. Χρησιμοποιείται μόνο με εισαγωγή κειμένου.
    • Μέγιστη – Καθορίζει τη μέγιστη τιμή για έναν αριθμό ή εισαγωγή βάσει ημερομηνίας.
    • μέγιστο μήκος – Καθορίζει τον μέγιστο αριθμό χαρακτήρων σε μια εισαγωγή που βασίζεται σε κείμενο.
    • ελάχ – Καθορίζει την ελάχιστη τιμή για έναν αριθμό ή μια εισαγωγή βάσει ημερομηνίας.
    • πολλαπλούς – Καθορίζει ότι ο χρήστης μπορεί να εισαγάγει περισσότερες από μία τιμές. Χρησιμοποιείται με ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ και αρχείο τύποι εισόδου. Αυτό το χαρακτηριστικό δεν απαιτεί καμία τιμή.
    • όνομα – Καθορίζει το όνομα της εισόδου. Χρησιμοποιείται ως κλειδί σε ένα ζεύγος κλειδιού-τιμής που αντιπροσωπεύει την εισαγωγή κατά την υποβολή της φόρμας. Μοναδικό όνομα θα πρέπει να παρέχονται για όλα τα στοιχεία φόρμας.
    • πρότυπο – Καθορίζει μια κανονική έκφραση που θα χρησιμοποιείται για την επικύρωση της τιμής μιας εισαγωγής βάσει κειμένου.
    • placeholder – Καθορίζει κείμενο κράτησης θέσης ή “βοηθός” για μια εισαγωγή που βασίζεται σε κείμενο.
    • μόνο για ανάγνωση – Καθορίζει ότι δεν είναι δυνατή η επεξεργασία μιας εισόδου από τον χρήστη. Παρόμοια συμπεριφορά με το άτομα με ειδικές ανάγκες χαρακτηριστικό, εκτός από τις αναγνωστικές εισόδους κάνω στείλουν την αξία τους στο διακομιστή κατά την υποβολή της φόρμας. Συχνά χρησιμοποιείται με JavaScript για να διασφαλιστεί ότι ένας χρήστης δεν μπορεί να επεξεργαστεί μια τιμή έως ότου πληρούνται ορισμένες προϋποθέσεις ή δεν μπορεί να γίνει τιμή μετά την ικανοποίηση συγκεκριμένων συνθηκών. Αυτό το χαρακτηριστικό δεν απαιτεί καμία τιμή.
    • απαιτείται – Καθορίζει ότι το πρέπει να έχει τιμή, διαφορετικά η φόρμα δεν θα υποβληθεί. Αυτό το χαρακτηριστικό δεν απαιτεί καμία τιμή.
    • Μέγεθος – Καθορίζει το πλάτος, σε χαρακτήρες, ενός στοιχείου εισαγωγής βάσει κειμένου. Η χρήση του CSS είναι συνήθως ένας καλύτερος τρόπος για να το επιτύχετε.
    • src – Καθορίζει τη διεύθυνση URL μιας εικόνας για ένα εικόνα εισαγωγή.
    • βήμα – Καθορίζει το διάστημα μεταξύ έγκυρων εισόδων σε μια είσοδο βάσει αριθμού.
    • τύπος – Καθορίζει τον τύπο του στοιχείο. Η προεπιλογή είναι κείμενο. Δεν υποστηρίζονται όλες οι πιθανές τιμές σε όλα τα προγράμματα περιήγησης. Αξίες:
      • κουμπί
      • πλαίσιο ελέγχου
      • χρώμα
      • ημερομηνία
      • ημερομηνία ώρα
      • ώρα-τοπική
      • ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ
      • αρχείο
      • κρυμμένος
      • εικόνα
      • μήνας
      • αριθμός
      • Κωδικός πρόσβασης
      • ραδιόφωνο
      • εύρος
      • επαναφορά
      • Αναζήτηση
      • υποβάλλουν
      • τηλ
      • κείμενο
      • χρόνος
      • url
      • εβδομάδα
    • αξία – Καθορίζει την αρχική τιμή μιας εισόδου.
    • πλάτος – Καθορίζει το πλάτος, σε εικονοστοιχεία, ενός εικόνα εισαγωγή. Η χρήση του CSS είναι συνήθως ένας καλύτερος τρόπος για να το επιτύχετε.

    Περιοχή κειμένου

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

    # textarea-παράδειγμα textarea {
    ύψος: 6em;
    πλάτος: 30em;
    }

    Οποιοδήποτε κείμενο μέσα στο στοιχείο θα εμφανίζεται στην περιοχή κειμένου.


    για ="msg">Το μήνυμά σου:

    όνομα ="msg" id ="msg">Αυτό το κείμενο βρίσκεται μέσα στο στοιχείο textarea. Θα το δει ο χρήστης. Εάν ο χρήστης δεν το αλλάξει, θα υποβληθεί με τη φόρμα.

    # textarea-text-παράδειγμα textarea {
    ύψος: 6em;
    πλάτος: 30em;
    }

    Το μήνυμά σου:

    Τα χαρακτηριστικά για είναι:

    • αυτόματη εστίαση - Καθορίζει ότι πρέπει να βρίσκεται σε εστίαση κατά τη φόρτωση της σελίδας. Πρέπει να χρησιμοποιείται μόνο μία φορά σε ένα έγγραφο. Αυτό το χαρακτηριστικό δεν απαιτεί καμία τιμή.
    • cols - Καθορίζει το πλάτος, σε χαρακτήρες, της περιοχής κειμένου. Αυτό επιτυγχάνεται καλύτερα με CSS.
    • απενεργοποιημένο - Απενεργοποιεί το. Τα απενεργοποιημένα στοιχεία φόρμας δεν στέλνουν την αξία τους στο διακομιστή κατά την υποβολή της φόρμας. Αυτό το χαρακτηριστικό δεν απαιτεί καμία τιμή.
    • form - Καθορίζει το αναγνωριστικό ενός στο οποίο ανήκει, για χρήση το δεν περιλαμβάνεται στο στοιχείο. Δεν υποστηρίζεται σε όλα τα προγράμματα περιήγησης.
    • maxlength - Καθορίζει τον μέγιστο επιτρεπόμενο αριθμό χαρακτήρων στο .
    • name - Ορίζει το όνομα του και χρησιμεύει ως κλειδί για το ζεύγος κλειδιού-τιμής που αντιπροσωπεύει το αίτημα υποβολής της φόρμας. Όλα τα στοιχεία φόρμας πρέπει να περιλαμβάνουν ένα μοναδικό όνομα.
    • placeholder - Ορίζει το κείμενο κράτησης θέσης ή βοηθητικού κειμένου που θα εμφανίζεται στο εσωτερικό πριν ο χρήστης πληκτρολογήσει σε αυτό.
    • readonly - Καθορίζει ότι δεν είναι δυνατή η επεξεργασία μιας εισαγωγής από τον χρήστη. Παρόμοια συμπεριφορά με το χαρακτηριστικό με ειδικές ανάγκες, εκτός από τα στοιχεία για ανάγνωση αποστέλλουν την αξία τους στον διακομιστή κατά την υποβολή της φόρμας. Συχνά χρησιμοποιείται με JavaScript για να διασφαλίσει ότι ένας χρήστης δεν μπορεί να επεξεργαστεί μια τιμή έως ότου πληρούνται ορισμένες προϋποθέσεις ή δεν μπορεί να γίνει τιμή μετά την τήρηση ορισμένων συνθηκών. Αυτό το χαρακτηριστικό δεν απαιτεί καμία τιμή.
    • απαιτείται - Καθορίζει ότι το must πρέπει να έχει τιμή, διαφορετικά η φόρμα δεν θα υποβληθεί. Αυτό το χαρακτηριστικό δεν απαιτεί καμία τιμή.
    • σειρές - Καθορίζει το ύψος, σε γραμμές κειμένου, του. Σε ορισμένες περιπτώσεις αυτό είναι προτιμότερο από τη χρήση CSS (όπως όταν ο πραγματικός αριθμός γραμμών είναι σχετικός), αλλά για τον απλό ορισμό του ύψους, το CSS είναι συνήθως μια καλύτερη επιλογή.
    • wrap - Καθορίζει εάν η είσοδος θα πρέπει να περικλείει σκληρά (εισαγάγετε έναν χαρακτήρα αλλαγής γραμμής σε κάθε αλλαγή γραμμής) ή μαλακή αναδίπλωση (εισαγάγετε έναν χαρακτήρα αλλαγής γραμμής μόνο όπου ο χρήστης ορίζει μια αλλαγή γραμμής). Οι τιμές είναι μαλακές ή σκληρές.

    Επιλέξτε (Πτώση)

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

    για ="αγαπημένο χρώμα">Ποιο είναι το αγαπημένο σας χρώμα?
    όνομα ="αγαπημένο χρώμα" id ="αγαπημένο χρώμα">
    τιμή ="το κόκκινο">το κόκκινο
    τιμή ="μπλε">Μπλε
    τιμή ="πράσινος">Πράσινος
    τιμή ="κίτρινος">Κίτρινος

    Ποιο είναι το αγαπημένο σας χρώμα?
    το κόκκινο
    Μπλε
    Πράσινος
    Κίτρινος

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

    για ="αγαπημένο χρώμα">Ποιο είναι το αγαπημένο σας χρώμα?
    όνομα ="αγαπημένο χρώμα" id ="αγαπημένο χρώμα">
    ετικέτα ="Πρωτεύοντα χρώματα">
    τιμή ="το κόκκινο">το κόκκινο
    τιμή ="μπλε">Μπλε
    τιμή ="κίτρινος">Κίτρινος

    ετικέτα ="Δευτερεύοντα χρώματα">
    τιμή ="πράσινος">Πράσινος
    τιμή ="πορτοκάλι">Πορτοκάλι
    τιμή ="μωβ">Μωβ

    ετικέτα ="Όχι στην πραγματικότητα Χρώματα">
    τιμή ="μαύρος">Μαύρος
    τιμή ="λευκό">λευκό
    τιμή ="γκρί">Γκρί

    Ποιο είναι το αγαπημένο σας χρώμα?
    το κόκκινο
    Μπλε
    Κίτρινος

    Πράσινος
    Πορτοκάλι
    Μωβ

    Μαύρος
    λευκό
    Γκρί

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

    Χαρακτηριστικά του στοιχείου:

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

    Το χαρακτηριστικό για τα στοιχεία είναι:

    • απενεργοποιημένο - Καθορίζει ότι δεν μπορεί να επιλεγεί.
    • label - Καθορίζει την ετικέτα για το, το οποίο αντικαθιστά τα περιεχόμενα του στοιχείου στην αναπτυσσόμενη οθόνη.
    • επιλεγμένο - Καθορίζει ότι πρέπει να είναι προεπιλεγμένο κατά τη φόρτωση της σελίδας.
    • value - Ορίζει την τιμή που αποστέλλεται στο διακομιστή.

    Οργάνωση μιας φόρμας

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

    Προσωπικές πληροφορίες
    για ="όνομα">Ονομα
    όνομα ="όνομα" id ="όνομα">

    για ="επίθετο">Επίθετο
    όνομα ="επίθετο" id ="επίθετο">

    για ="ημερομηνία γέννησης">Ημερομηνία γέννησης
    όνομα ="ημερομηνία γέννησης" id ="ημερομηνία γέννησης">

    Αγαπημένα πράγματα
    για ="αγαπημένο χρώμα">Αγαπημένο χρώμα
    όνομα ="αγαπημένο χρώμα" id ="αγαπημένο χρώμα">
    ετικέτα ="Πρωτεύοντα χρώματα">
    τιμή ="το κόκκινο">το κόκκινο
    τιμή ="μπλε">Μπλε
    τιμή ="κίτρινος">Κίτρινος

    ετικέτα ="Δευτερεύοντα χρώματα">
    τιμή ="πράσινος">Πράσινος
    τιμή ="πορτοκάλι">Πορτοκάλι
    τιμή ="μωβ">Μωβ

    ετικέτα ="Όχι στην πραγματικότητα Χρώματα">
    τιμή ="μαύρος">Μαύρος
    τιμή ="λευκό">λευκό
    τιμή ="γκρί">Γκρί

    για ="αγαπημένο σχήμα">Αγαπημένο σχήμα
    όνομα ="αγαπημένο σχήμα">
    τιμή ="τρίγωνο">Τρίγωνο
    τιμή ="τετράγωνο">τετράγωνο
    τιμή ="κύκλος">Κύκλος

    τύπος ="υποβάλλουν">

    Φόρμες στυλ

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

    Αυτό προκαλεί δύο προβλήματα:

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

    Αυτό μπορεί να είναι πολύ απογοητευτικό.

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

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

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

    HTML και CSS - Μια σύντομη εισαγωγή

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

    Τι είναι το CSS?

    Το CSS σημαίνει Cascading Style Sheets. Είναι μια γλώσσα που χρησιμοποιείται για τον καθορισμό του τρόπου εμφάνισης ενός εγγράφου HTML σε μια σελίδα.

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

    Ονομάζεται "cascading" επειδή τα στυλ που σχετίζονται με το κείμενο εμφανίζουν "cascade" από στοιχεία γονέα σε παιδί. Για παράδειγμα, εάν το CSS για μια παράγραφο (

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

    Πώς λειτουργεί το CSS - Βασική επισκόπηση

    Πώς να συμπεριλάβετε CSS σε ένα έγγραφο

    Το CSS μπορεί να συμπεριληφθεί μέσα σε ένα στοιχείο σε ένα έγγραφο ή σε ξεχωριστά αρχεία .css (που ονομάζονται "φύλλα στυλ"), τα οποία συνδέονται με το έγγραφο HTML, μέσα στην κεφαλή.

    rel ="φύλλο στυλ" τύπος ="κείμενο / css" href ="theme.css">

    Π {
    font-family: Γεωργία, "Times New Roman", ελαφρή γραμμή;
    }

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

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

    Δηλώσεις στυλ

    Ένα φύλλο στυλ λαμβάνει τη μορφή μιας σειράς δηλώσεων στυλ. Αυτά σημειώνονται ως εξής:

    [επιλογέας] {
    [χαρακτηριστικό]: [τιμή];
    [χαρακτηριστικό]: [τιμή];
    }

    / * σχόλια εδώ * /

    Αυτό είναι:

    • Ένας επιλογέας, ή ένα αναγνωριστικό στοιχείου, που καθορίζει τι έχει στυλ. Αυτά περιλαμβάνουν τα ακόλουθα (υπάρχουν περισσότερα):
      • Το όνομα ενός τύπου στοιχείου: a, p, dl, κ.λπ. Αυτό ισχύει για όλα τα στοιχεία αυτού του τύπου.
      • Αναγνωριστικό τάξης - το όνομα μιας κλάσης, με πρόθεμα με τελεία (.).
      • Αναγνωριστικό ταυτότητας - το όνομα ενός αναγνωριστικού, προθεματισμένο με το σύμβολο κατακερματισμού (#).
      • Ένα από τα παραπάνω, καθώς και κάποιον άλλο ειδικό επιλογέα, όπως ένα ψευδοκλάσμα όπως: αιωρηθείτε.
    • Ένα άνοιγμα σγουρό στήριγμα, που σημαίνει την αρχή των κανόνων στυλ σχετικά με το δεδομένο στοιχείο.
    • Οι κανόνες στυλ εκφράζονται ως ζεύγη χαρακτηριστικών-τιμών που συνδέονται με άνω και κάτω τελεία.
    • Ένα κλείσιμο με σγουρά στηρίγματα που δηλώνει το τέλος των κανόνων στυλ για αυτό το στοιχείο.

    Για παράδειγμα:

    html {
    χρώμα: # 222222; / * χρώμα κειμένου - πολύ σκούρο γκρι * /
    font-family: Γεωργία, "Times New Roman", Garamond, serif;
    μέγεθος γραμματοσειράς: 14px;
    ύψος γραμμής: 22 εικονοστοιχεία;
    }

    / * Αυτό είναι ένα σχόλιο. * /

    #logo {/ * Στυλ ανά αναγνωριστικό στοιχείου * /
    χρώμα: # B20000;
    οικογένεια γραμματοσειρών: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

    .widget {/ * Στυλ ανά κατηγορία στοιχείων. * /
    πλάτος: 100%;
    περίγραμμα: στερεό 2px μαύρο;
    επένδυση: 22px 11px;
    }

    ένα {
    χρώμα: # 008AE6;
    }

    α: αιωρηθείτε {
    χρώμα: # 006EB8;
    κείμενο-διακόσμηση: υπογράμμιση?
    }

    Το δέντρο εγγράφων

    Πολλοί άνθρωποι σκέφτονται απλώς ένα έγγραφο HTML ως γραμμική δομή: πρώτα το, μετά το, μετά το, μετά το .

    Ωστόσο, ένα έγγραφο HTML είναι πραγματικά δέντρο:

    • HTML
      • Κεφάλι
      • Τίτλος
      • Μέτα
      • Σώμα
      • Επί κεφαλής
        • Η1
        • ΝΑΒ
      • Κύριος
        • Π
          • ένα
          • ένα
          • ισχυρός
        • ολ
          • λι
          • λι
          • λι
            • ένα
      • Κατά μέρος
        • Ενότητα
        • Ενότητα
        • Ενότητα
      • Υποσέλιδο

    Κάθε στοιχείο βρίσκεται μέσα σε ένα άλλο στοιχείο.

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

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

    Εξετάστε το ακόλουθο παράδειγμα:

    href ="">Άγκυρα μέσα σε έναν τίτλο

    href ="">

    «Επικεφαλίδα μέσα σε μια άγκυρα

    ένα {
    χρώμα: μπλε;
    }

    ω1 {
    χρώμα: πράσινο;
    }

    Ποιο θα είναι μπλε και ποιο θα είναι πράσινο?

    Σε αυτήν την περίπτωση, η πρώτη γραμμή (άγκυρα μέσα σε έναν τίτλο) θα είναι μπλε, ενώ η άλλη θα είναι πράσινη.

    Γιατί?

    Στο πρώτο παράδειγμα, το

    το στυλ είναι πράσινο, οπότε όλα μέσα σε αυτό πρέπει να είναι πράσινο. Αλλά στη συνέχεια, είναι μια άγκυρα που μορφοποιεί το κείμενο μπλε. Η άγκυρα είναι πιο συγκεκριμένη - πιο κοντά στο κείμενο που έχει στυλ - έτσι κυριαρχεί το μπλε στυλ.

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

    Επιλογείς CSS

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

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

    Επιλογές επιλογής μπορούν επίσης να συνδυαστούν. Για παράδειγμα:

    # κοντέινερ div {
    }

    Αυτό επιλέγει όλα τα στοιχεία που βρίσκονται μέσα στο στοιχείο #container.

    Ακολουθούν μερικές από τις πιο σημαντικές μορφές επιλογών και επιλογών.

    • * - Επιλέγει όλα τα στοιχεία.
    • element-name - Επιλέγει όλα τα στοιχεία ενός συγκεκριμένου τύπου.
    • .class-name - Επιλέγει στοιχεία κατά όνομα κλάσης.
    • #id - Επιλέγει στοιχεία ανά αναγνωριστικό.
    • element-name.class-name - Επιλέγει στοιχεία ενός συγκεκριμένου τύπου που ταιριάζουν με το όνομα της τάξης.
    • selector1, selector2 - Οι επιλογείς που διαχωρίζονται με κόμματα ταιριάζουν με όλα τα στοιχεία που υποδεικνύονται είτε από τον επιλογέα1 είτε από τον επιλογέα2.
    • selector1 selector2 - Ένας επιλογέας που ακολουθεί έναν άλλο επιλογέα, με μόνο ένα κενό διάστημα, επιλέγει όλα τα στοιχεία που ταιριάζουν με τον επιλογέα2, τα οποία βρίσκονται στο εσωτερικό ενός στοιχείου που ταιριάζει με τον επιλογέα1.
    • επιλογέας1>selector2 - Επιλέγει όλα τα στοιχεία που ταιριάζουν με τον επιλογέα2 που είναι άμεσα παιδιά του επιλογέα1.
    • [χαρακτηριστικό] - Ένα όνομα χαρακτηριστικού μέσα σε αγκύλες επιλέγει όλα τα στοιχεία που έχουν αυτό το χαρακτηριστικό, ανεξάρτητα από την αξία του.
    • [χαρακτηριστικό = τιμή] - Επιλέγει στοιχεία που έχουν το συγκεκριμένο ζεύγος χαρακτηριστικών-τιμών.
    • [χαρακτηριστικό ~ = string] - Επιλέγει στοιχεία στα οποία η καθορισμένη τιμή χαρακτηριστικών περιέχει την υποδεικνυόμενη συμβολοσειρά.
    • selector: first-child - Επιλέγει στοιχεία που είναι το πρώτο παιδί των γονικών τους στοιχείων. Αυτό μπορεί να χρησιμοποιηθεί ως κύριο p: first-child (για παράδειγμα) για το στυλ της αρχικής παραγράφου σε μια σελίδα.
    • selector :: first-letter - Επιλέγει το πρώτο γράμμα του στοιχείου που ταιριάζει. Μπορεί να χρησιμοποιηθεί για τη δημιουργία εφέ drop-cap.
    • selector :: first-line - Επιλέγει την πρώτη γραμμή κειμένου στο αντίστοιχο στοιχείο.
    • είσοδος: εστίαση - Στυλ μια εισαγωγή φόρμας όταν είχε εστίαση.
    • a: hover, a: active, a: visit - Styles αγκύρωση συνδέσμων σε διάφορα σημεία του κύκλου αλληλεπίδρασης.

    Υπάρχουν πολλά περισσότερα εκτός από αυτά.

    CSS και δομή σελίδας - Το μοντέλο κουτιού

    Το μοντέλο CSS Box είναι μια εξήγηση του τρόπου με τον οποίο το CSS εμφανίζει και τοποθετεί στοιχεία σε επίπεδο μπλοκ.

    Τι είναι τα στοιχεία Block?

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

    Υπάρχουν ορισμένα στοιχεία που είναι από προεπιλογή επίπεδο μπλοκ:

    • - Στοιχεία επικοινωνίας.
    • - Περιεχόμενο άρθρου.
    • - Εκτός περιεχομένου.
    • - Συσκευή αναπαραγωγής ήχου.
    • - Μεγάλη ("μπλοκ") προσφορά.
    • - Σχέδιο καμβά.
    • - Περιγραφή ορισμού.
    • - Διαίρεση εγγράφων.
    • - Λίστα ορισμών.
    • - Ετικέτα σετ πεδίου.
    • - Λεζάντα εικόνας.
    • - Πολυμέσα (συνήθως μια εικόνα) με λεζάντα.
    • - Υποσέλιδο ενότητας ή σελίδας.
    • - Φόρμα εισαγωγής.
    • ,

      ,

      ,

      ,

      ,
      - Τίτλοι.

    • - Κεφαλίδα ενότητας ή σελίδας.
    • - Οριζόντιος κανόνας (διαχωριστική γραμμή).
    • - Περιέχει το κεντρικό περιεχόμενο που είναι μοναδικό σε αυτό το έγγραφο.
    • - Περιέχει συνδέσμους πλοήγησης.
    • - Περιεχόμενο για χρήση εάν η δέσμη ενεργειών δεν υποστηρίζεται ή απενεργοποιείται.
      1. - Λίστα παραγγελιών.
      2. - Έξοδος φόρμας.
      3. - Παράγραφος.

      4. - Προσχηματισμένο κείμενο.
      5. - Τμήμα μιας ιστοσελίδας.
      6. - Πίνακας.
      7. - Υποσέλιδο πίνακα.
        • - Απεριόριστη λίστα.
        • - Αναπαραγωγή βίντεο.

        Μπορείτε επίσης να προκαλέσετε οποιοδήποτε στοιχείο να συμπεριφέρεται σαν στοιχείο επιπέδου μπλοκ εκχωρώντας το στυλ εμφάνισης: block;.

        Πλάτος και ύψος

        Από προεπιλογή, το πλάτος ενός στοιχείου επιπέδου μπλοκ είναι 100% του περιεχόμενου στοιχείου επιπέδου μπλοκ, συμπεριλαμβανομένων τυχόν περιθωρίων, περιθωρίων ή γεμισμάτων. (Δηλαδή, ολόκληρα τα στοιχεία, συμπεριλαμβανομένου του περιθωρίου, του περιγράμματος και της επένδυσης, θα χωρέσουν μέσα στο δοχείο του.)

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

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

        Το περίεργο πράγμα για τον καθορισμό του πλάτους (και του ύψους, αλλά δεν το κάνετε τόσο συχνά) είναι ότι το πλάτος που καθορίζετε δεν θα είναι το συνολικό πλάτος του στοιχείου.

        Περιθώρια, περίγραμμα και επένδυση

        Εκτός από το περιεχόμενο ενός στοιχείου, το συνολικό πλάτος και το συνολικό ύψος καθορίζονται από τρία άλλα χαρακτηριστικά:

        • margin - Η περιοχή γύρω από ένα στοιχείο.
        • περίγραμμα - Μια γραμμή γύρω από την περίμετρο του στοιχείου.
        • padding - Διάστημα ακριβώς μέσα στην περίμετρο του στοιχείου.

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

        .πεδίο {
        πλάτος: 100%;
        χρώμα φόντου: # 66FF33; / * Πράσινο ασβέστη * /
        }
        .μέσα {
        πλάτος: 100px;
        περιθώριο: 25 εικονοστοιχεία;
        περίγραμμα: διακεκομμένη 15px μαύρο;
        επένδυση: 25px;
        χρώμα φόντου: # 90acff;
        χρώμα: # 002346;
        γραμματοσειρά: έντονο;
        }

        τάξη ="πεδίο">
        τάξη ="μέσα">
        Αυτό είναι ένα κείμενο μέσα στο εσωτερικό. Παρατηρήστε ότι βρίσκεται μακριά από την εσωτερική άκρη. Αυτό προκαλείται από την επένδυση.

        # margin-padding-border .field {
        πλάτος: 100%;
        χρώμα φόντου: # 66FF33; / * Πράσινο ασβέστη * /
        }
        # margin-padding-border .inside {
        πλάτος: 100px;
        περιθώριο: 25 εικονοστοιχεία;
        περίγραμμα: διακεκομμένη 15px μαύρο;
        επένδυση: 25px;
        χρώμα φόντου: # 90acff;
        χρώμα: # 002346;
        γραμματοσειρά: έντονο;
        }

        Αυτό είναι ένα κείμενο μέσα στο εσωτερικό. Παρατηρήστε ότι βρίσκεται μακριά από την εσωτερική άκρη. Αυτό προκαλείται από την επένδυση.

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

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

        div {
        πλάτος: 100%;
        περιθώριο: 5px;
        επένδυση: 15px;
        }

        Αν κάνετε κάτι τέτοιο, θα διαπιστώσετε ότι επεκτείνεται πέρα ​​από τη δεξιά πλευρά του στοιχείου που περιέχει κατά 40 εικονοστοιχεία.

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

        div {
        περιθώριο: 5px;
        επένδυση: 15px;
        }

        Ωστόσο, εάν θέλετε να έχετε ένα στοιχείο που καταλαμβάνει μόνο το μισό του διαθέσιμου πλάτους, προκειμένου να έχετε στήλες δίπλα-δίπλα, θα πρέπει να κάνετε κάτι διαφορετικό.

        Κυμαινόμενα Στοιχεία

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

        # κοντέινερ {
        πλάτος: 400px;
        χρώμα φόντου: #eeeeee;
        επένδυση: 20px;
        }
        #container div {/ * Στοχεύει όλα τα div που είναι θυγατρικά στοιχεία του #container. * /
        ύψος: 50px;
        }
        #το κόκκινο {
        χρώμα φόντου: κόκκινο;
        }
        # μπλε {
        χρώμα φόντου: μπλε;
        }
        # πράσινο {
        χρώμα φόντου: πράσινο;
        }

        id ="δοχείο">
        id ="το κόκκινο">
        id ="μπλε">
        id ="πράσινος">

        # div-stack .container {
        πλάτος: 400px;
        χρώμα φόντου: #eeeeee;
        επένδυση: 20px;
        }
        # div-stack .container div {
        ύψος: 50px;
        }
        # div-stack .red {
        χρώμα φόντου: κόκκινο;
        }
        # div-stack .blue {
        χρώμα φόντου: μπλε;
        }
        # div-stack .green {
        χρώμα φόντου: πράσινο;
        }

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

        # κοντέινερ {
        πλάτος: 400px;
        χρώμα φόντου: #eeeeee;
        επένδυση: 20px;
        }
        # κοντέινερ div {
        ύψος: 50px;
        πλάτος: 50px;
        }
        #το κόκκινο {
        χρώμα φόντου: κόκκινο;
        }
        # μπλε {
        χρώμα φόντου: μπλε;
        }
        # πράσινο {
        χρώμα φόντου: πράσινο;
        }

        id ="δοχείο">
        id ="το κόκκινο">
        id ="μπλε">
        id ="πράσινος">

        # div-stack-skinny .container {
        πλάτος: 400px;
        χρώμα φόντου: #eeeeee;
        επένδυση: 20px;
        }
        # div-stack-skinny .container div {/ * Στοχεύει όλα τα div που είναι θυγατρικά στοιχεία του #container. * /
        ύψος: 50px;
        }
        # div-stack-skinny .red {
        χρώμα φόντου: κόκκινο;
        }
        # div-stack-skinny .blue {
        χρώμα φόντου: μπλε;
        }
        # div-stack-skinny .green {
        χρώμα φόντου: πράσινο;
        }

        Για να τους επιτρέψουν να καθίσουν δίπλα στο καθένα, πρέπει να τους επιτραπεί να «επιπλέουν». Στο CSS, «float» σημαίνει να επιτρέπεται η ροή άλλων στοιχείων του εγγράφου γύρω από το κινούμενο στοιχείο. Ένα στοιχείο μπλοκ μπορεί να μετακινηθεί προς τα αριστερά, δεξιά ή κέντρο (το κέντρο είναι ασυνήθιστο). Εάν πολλά στοιχεία αδελφών έχουν ρυθμιστεί να επιπλέουν, θα ευθυγραμμιστούν το ένα δίπλα στο άλλο, διαχωρισμένα από τα περιθώρια τους.

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

        # κοντέινερ {
        πλάτος: 400px;
        χρώμα φόντου: #eeeeee;
        επένδυση: 20px;
        }
        # κοντέινερ div {
        ύψος: 50px;
        πλάτος: 50px;
        float: αριστερά
        }
        #το κόκκινο {
        χρώμα φόντου: κόκκινο;
        }
        # μπλε {
        χρώμα φόντου: μπλε;
        }
        # πράσινο {
        χρώμα φόντου: πράσινο;
        }

        id ="δοχείο">
        id ="το κόκκινο">
        id ="μπλε">
        id ="πράσινος">

        # div-float .container {
        πλάτος: 400px;
        χρώμα φόντου: #eeeeee;
        επένδυση: 20px;
        }
        # div-float .container div {/ * Στοχεύει όλα τα div που είναι θυγατρικά στοιχεία του #container. * /
        ύψος: 50px;
        }
        # div-float .red {
        χρώμα φόντου: κόκκινο;
        }
        # div-float .blue {
        χρώμα φόντου: μπλε;
        }
        # div-float .green {
        χρώμα φόντου: πράσινο;
        }

        Ειδοποίηση:

        • Το πρώτο χρωματιστό μπλοκ (#red) βρίσκεται στην αριστερή πλευρά του δοχείου, ακολουθούμενο από #blue και #green.
        • Δεν έχουν περιθώριο, οπότε είναι ακριβώς το ένα δίπλα στο άλλο.
        • Η επένδυση στο εσωτερικό του #container ωθεί τα μπλοκ προς τα κάτω και μακριά από την επάνω αριστερή γωνία.

        Όμως - ω όχι - τι συμβαίνει με το στοιχείο #container; Γιατί κρέμονται τα χρωματιστά μπλοκ?

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

        • τη δήλωση ύψους του εάν έχει ένα (αυτό δεν το κάνει) Ή το μη αιωρούμενο περιεχόμενό του εάν δεν έχει δηλωμένο ύψος (στην περίπτωση αυτή, δεν έχει επίσης)
        • κατακόρυφη επένδυση (πάνω και κάτω)
        • κατακόρυφα όρια (πάνω και κάτω)
        • κατακόρυφο περιθώριο (πάνω και κάτω)

        Το εσωτερικό ύψος του στοιχείου #container σε αυτήν την περίπτωση είναι μηδέν και το συνολικό ύψος είναι μόνο 2 φορές το μέγεθος της επένδυσης.

        Αυτό είναι ένα πολύ ενοχλητικό και πολύ κοινό πρόβλημα. Η λύση (λίγο hack) ονομάζεται λύση clearfix. Υπάρχουν πολλές επιλογές για το πώς να το υλοποιήσετε, αλλά για τα παραδείγματα μας θα χρησιμοποιήσουμε το πιο απλό, προσθέτοντας υπερχείλιση: αυτόματη στο #container. Αυτό δεν δουλεύει σε όλα τα προγράμματα περιήγησης ή σε όλα τα περιβάλλοντα, αλλά θα λειτουργήσει αρκετά καλά στα περισσότερα προγράμματα περιήγησης ότι είναι εντάξει για τα παραδείγματα μας εδώ.

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

        # κοντέινερ {
        πλάτος: 400px;
        χρώμα φόντου: #eeeeee;
        επένδυση: 20px;
        υπερχείλιση: αυτόματη;
        }
        # κοντέινερ div {
        ύψος: 50px;
        πλάτος: 50px;
        float: αριστερά
        }
        #το κόκκινο {
        χρώμα φόντου: κόκκινο;
        }
        # μπλε {
        χρώμα φόντου: μπλε;
        }
        # πράσινο {
        χρώμα φόντου: πράσινο;
        }

        id ="δοχείο">
        id ="το κόκκινο">
        id ="μπλε">
        id ="πράσινος">

        # div-float-fix .container {
        πλάτος: 400px;
        χρώμα φόντου: #eeeeee;
        επένδυση: 20px;
        }
        # div-float-fix .container div {/ * Στοχεύει όλα τα div που είναι θυγατρικά στοιχεία του #container. * /
        ύψος: 50px;
        }
        # div-float-fix .red {
        χρώμα φόντου: κόκκινο;
        }
        # div-float-fix .blue {
        χρώμα φόντου: μπλε;
        }
        # div-float-fix .green {
        χρώμα φόντου: πράσινο;
        }

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

        # κοντέινερ {
        χρώμα φόντου: #eeeeee;
        υπερχείλιση: αυτόματη;
        επένδυση: 20px;
        πλάτος: 600 εικονοστοιχεία;
        }

        κύρια {
        float: αριστερά
        χρώμα φόντου: #efefef;
        πλάτος: 300 εικονοστοιχεία;
        επένδυση: 15px;
        margin-right: 20 εικονοστοιχεία;
        }

        κατά μέρος {
        float: αριστερά
        χρώμα φόντου: #dedede;
        επένδυση: 15px;
        πλάτος: 220px;
        }

        id ="δοχείο">

        Λόρεμ Ίψουμ

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pretium, mi eu elementum ullamcorper, dui justo egestas turpis, sed auctor turpis Tellus eget augue. Quisque vel malesuada erat. Vestibulum non felis et turpis iaculis iaculis.

        Στο arcu metus, finibus id dolor a, interdum lacinia lectus. Vestibulum vulputate neque eget ante tincidunt sodales. Quisque efficitur a turpis nec scelerisque. Donec komodo, διαμέτρου id επακόλουθα sodales, justo quam posuere libero, non fringilla ante dui id tortor. Sed efficitur στο ipsum nec pellentesque.

        Αρχεία

        • Μάιος 2015
        • Απρίλιος 2015
        • Μάρτιος 2015
        • Φεβρουάριος 2015
        • Ιανουάριος 2015

        # simple-sidebar .container {
        χρώμα φόντου: #eeeeee;
        υπερχείλιση: αυτόματη;
        επένδυση: 20px;
        πλάτος: 600 εικονοστοιχεία;
        }

        # main-sidebar main {
        float: αριστερά
        χρώμα φόντου: #efefef;
        πλάτος: 300 εικονοστοιχεία;
        επένδυση: 15px;
        margin-right: 20 εικονοστοιχεία;
        }

        # simple-sidebar στην άκρη {
        float: αριστερά
        χρώμα φόντου: #dedede;
        επένδυση: 15px;
        πλάτος: 220px;
        }

        Λόρεμ Ίψουμ

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pretium, mi eu elementum ullamcorper, dui justo egestas turpis, sed auctor turpis Tellus eget augue. Quisque vel malesuada erat. Vestibulum non felis et turpis iaculis iaculis.

        Στο arcu metus, finibus id dolor a, interdum lacinia lectus. Vestibulum vulputate neque eget ante tincidunt sodales. Quisque efficitur a turpis nec scelerisque. Donec komodo, διαμέτρου id επακόλουθα sodales, justo quam posuere libero, non fringilla ante dui id tortor. Sed efficitur στο ipsum nec pellentesque.

        Αρχεία

        • Μάιος 2015
        • Απρίλιος 2015
        • Μάρτιος 2015
        • Φεβρουάριος 2015
        • Ιανουάριος 2015

        #### __Εξτρα

        μικρό__

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

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

        Τα περισσότερα ιστολόγια - πιθανώς οι περισσότεροι ιστότοποι - ακολουθούν ένα τυπικό μοτίβο:

        • Ενότητα κεφαλίδας που εκτείνεται στο πλάτος της σελίδας
        • Κεντρική περιοχή περιεχομένου χωρισμένη σε δύο στήλες:
          • 2/3 του πλάτους για το κύριο περιεχόμενο
          • 1/3 του πλάτους για μια πλευρική γραμμή widget
        • Τμήμα υποσέλιδου που εκτείνεται στο πλάτος της σελίδας.

        Η ιδανική σήμανση για αυτήν τη δομή εγγράφων θα ήταν:

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

        Επομένως, η πιο κοινή δομή σήμανσης για μια τυπική διάταξη ιστολογίου μοιάζει πραγματικά με αυτήν:

        id ="δοχείο">

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

        CSS για στυλ κειμένου

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

        Ο καταρράκτης

        Όταν σκέφτεστε το στυλ κειμένου σε CSS, είναι ιδιαίτερα σημαντικό να θυμάστε το καταρράκτη μέρος του Cascading Style Sheets.

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

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

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

        Τα Στυλ

        Οι δηλώσεις στυλ που σχετίζονται περισσότερο με το στυλ κειμένου και την τυπογραφία είναι:

        font-family: Καθορίζει τις γραμματοσειρές που θα χρησιμοποιηθούν. : Η βέλτιστη πρακτική είναι να δηλώσετε μια λίστα γραμματοσειρών, ξεκινώντας από την προτιμώμενη γραμματοσειρά και μια σειρά εναλλακτικών, που τελειώνει με μια γενική οικογένεια γραμματοσειρών. : Τα ονόματα γραμματοσειρών που περιλαμβάνουν κενά πρέπει να είναι τυλιγμένα σε εισαγωγικά. : font-family: Garamond, Γεωργία, "Times New Roman", ελαφρή γραμμή;

        font-size: Καθορίζει το μέγεθος του κειμένου. : Μπορεί να είναι μέγεθος σε εικονοστοιχεία (14 εικονοστοιχεία), τυπογραφικά ems με βάση το μέγεθος κειμένου γονέων (1em), ποσοστό βάσει του μεγέθους κειμένου γονέων (115%), όνομα περιγραφικού μεγέθους (μικρό, μεσαίο, μεγάλο) ή συγκριτική περιγραφή με βάση το μέγεθος κειμένου των γονέων (μικρότερο, μεγαλύτερο). : μέγεθος γραμματοσειράς: 14 εικονοστοιχεία;

        line-height: Καθορίζει το ύψος μιας γραμμής κειμένου. : Αυτό πρέπει συνήθως να είναι μεγαλύτερο από το μέγεθος της γραμματοσειράς. Μια γραμμή κειμένου είναι συνήθως κεντραρισμένη στο ύψος της γραμμής. : Το ύψος γραμμής μπορεί να καθοριστεί σε pixel, ems ή ποσοστά. Μπορεί επίσης να οριστεί ως πολλαπλασιαστής του μεγέθους της γραμματοσειράς. Αυτό γίνεται παραλείποντας ένα επίθημα μονάδων. : ύψος γραμμής: 1.4;

        margin-bottom: Το περιθώριο κάτω από παραγράφους, τίτλους, λίστες και άλλα τυπογραφικά στοιχεία συμβάλλει στη συνολική αναγνωσιμότητα. : Αυτό το χαρακτηριστικό πρέπει να οριστεί σε κάθε επηρεαζόμενο στοιχείο, όχι στο έγγραφο ή στην ενότητα. : Συνήθως, ο καθορισμός του περιθωρίου-κάτω ίσου με το ύψος γραμμής δημιούργησε τα καλύτερα αποτελέσματα. : margin-bottom: 1.4em;

        χρώμα: Το προεπιλεγμένο χρώμα του κειμένου είναι μαύρο. Μπορεί να θέλετε να το αλλάξετε σε κάτι λιγότερο έντονο. : χρώμα: # 111111; : Επίσης, οι σύνδεσμοι έχουν ένα σύνολο προεπιλεγμένων χρωμάτων για να δηλώσουν εάν έχουν επισκεφθεί ή όχι και ένα χρώμα που δηλώνει την ενεργή τους κατάσταση. : Συνήθως, το προεπιλεγμένο χρώμα συνδέσμου δεν είναι ιδιαίτερα επιθυμητό. Για να αλλάξετε χρώμα για διάφορες καταστάσεις της ετικέτας αγκύρωσης χρησιμοποιήστε: a: link (προεπιλογή), a: hover, a: visit, και a: ενεργό. : a: αιωρηθείτε {color: # 3399FF; }

        font-weight: Font-weight είναι η ιδιότητα που ελέγχει εάν το κείμενο είναι έντονο ή κανονικό. : Σύμφωνα με τις προδιαγραφές, μπορείτε να χρησιμοποιήσετε μια αριθμητική τιμή για να ρυθμίσετε το βάρος με μεγάλη ακρίβεια. Ωστόσο, αυτό δεν υποστηρίζεται καλά από τις περισσότερες γραμματοσειρές ή προγράμματα περιήγησης και δεν αποτελεί κοινή πρακτική. : Η πιο συνηθισμένη χρήση του γραμματοσειράς είναι απλώς να ορίσετε έντονη γραφή. : ισχυρό {font-weight: bold; }

        font-style: Το στυλ γραμματοσειράς χρησιμοποιείται για να υποδείξει τον πλάγιο τύπο. : Οι σχετικές τιμές είναι φυσιολογικές και πλάγιες. (Μια τρίτη επιλογή, πλάγια, σπάνια χρησιμοποιείται.: Em {font-style: italic;}

        text-decoration: Αυτό χρησιμοποιείται για την προσθήκη μιας γραμμής σε ένα εύρος κειμένου: over (overline - σπάνια χρησιμοποιείται), έως (line-through - χρησιμοποιείται για διαγραμμένο κείμενο) ή under (υπογράμμιση - χρησιμοποιείται για συνδέσμους και μερικές φορές για επικεφαλίδες) . : ένα {text-decoration: underline; }

        text-transform: Αυτή η ιδιότητα σάς επιτρέπει να ελέγχετε την κεφαλαιοποίηση του κειμένου. : Οι σχετικές τιμές είναι: κεφαλαία (Περίπτωση τίτλου), κεφαλαία (ΟΛΑ ΤΑ ΚΕΦΑΛΑΙΑ) και πεζά (όλα τα πεζά). : h3 {text-transform: κεφαλαία; }

        font-variant: Χρησιμοποιείται για τον καθορισμό μικρών κεφαλαίων. Ορίζει όλα τα πεζά γράμματα του περιεχομένου σε κεφαλαία γράμματα σε μικρότερο μέγεθος γραμματοσειράς. : h1 {font-variant: small-caps; }

        @ font-face: Αυτή δεν είναι μια ιδιότητα που έχει εκχωρηθεί σε ένα στοιχείο, αλλά λειτουργεί ως επιλογέας σε ένα έγγραφο CSS. Χρησιμοποιείται για τον ορισμό μιας νέας οικογένειας γραμματοσειρών. Αυτό επιτρέπει στους σχεδιαστές να καθορίσουν οποιαδήποτε γραμματοσειρά επιθυμούν, αντί να βασίζονται μόνο στις γραμματοσειρές συστήματος των υπολογιστών-πελατών. : Η ιδιότητα font-family ορίζει το όνομα της νέας γραμματοσειράς (για χρήση στην ιδιότητα font-family άλλων στοιχείων) και η ιδιότητα src καθορίζει ένα αρχείο γραμματοσειράς. : Δεν υποστηρίζονται όλες οι μορφές αρχείων γραμματοσειράς σε όλα τα προγράμματα περιήγησης. Οι πιο ευρέως υποστηριζόμενες μορφές είναι TTF, OTF και WOFF (αλλά όχι WOFF2). : Εάν οι παραλλαγές μιας γραμματοσειράς (έντονη, πλάγια) απαιτούν ξεχωριστά αρχεία γραμματοσειρών, μπορούν να οριστούν πολλαπλές δηλώσεις @ font-face, καθεμία με διαφορετική ιδιότητα src και με πρόσθετες ιδιότητες που καθορίζουν το περιβάλλον τους (για παράδειγμα - font-weight: bold ;): @ font-face {font-family: myNewFont; src: url (myNewFont.woff;}

        Συμβουλές τυπογραφίας

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

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

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

          (

          ,

          ,
          ) και άλλα σπάνια χρησιμοποιούμενα στυλ. Ωστόσο, παρόλο που σπάνια χρησιμοποιούνται, συνηθίζονται. Φροντίστε να συμπεριλάβετε ένθετες λίστες, εικόνες με και χωρίς λεζάντες, καθώς και δείγματα κώδικα επίσης (εάν γράφετε για την τεχνολογία).
        • Παρατηρήστε πώς αλληλεπιδρούν τα περιθώρια στοιχείων μεταξύ τους και με το περιβάλλον τους. Για παράδειγμα, είναι συνηθισμένο να βάζετε ένα top-margin στους τίτλους. Αυτό μπορεί να έχει νόημα σε ορισμένα περιβάλλοντα, αλλά αν είναι το πρώτο στοιχείο σε ένα, αυτό μπορεί να μην φαίνεται σωστό. Παρομοίως, μια επικεφαλίδα τμηματική μετά από μια παράγραφο μπορεί να καταλήξει να αντιγράφει ένα διάστημα γραμμής, δημιουργώντας περισσότερο οπτικό διάλειμμα από το επιθυμητό.
        • Χρησιμοποιήστε την τιμή του ύψους γραμμής ως κανόνας κλίμακας για να διατηρήσετε το κείμενο των σελίδων σε σταθερό ρυθμό. Οι γραμματοσειρές μεγαλύτερες από το καθολικό ύψος γραμμής (για παράδειγμα, οι τίτλοι) πρέπει να έχουν ρυθμιστεί το ύψος γραμμής τους σε πολλαπλάσιο της καθολικής τιμής. Χρησιμοποιήστε επίσης την τιμή ύψους γραμμής για περιθώρια κάτω από τα στοιχεία και για ενότητες (εσοχή).
        • Είναι σύνηθες να αναγνωρίζετε παραγράφους με διπλό διάλειμμα γραμμής (επιτυγχάνεται με ένα περιθώριο κάτω από την ίδια τιμή με το ύψος γραμμής). Είναι επίσης κοινό να μην εσοχή παραγράφων.
        • Οι λίστες τείνουν να φαίνονται καλύτερα σε (περιθώριο αριστερά) περίπου την ίδια απόσταση με το ύψος γραμμής (ή ένα πολλαπλό).
        • Οι λίστες περιγραφής έχουν πολύ κακό προεπιλεγμένο στυλ. Γενικά φαίνονται καλύτερα με ολόκληρη τη λίστα να είναι έτοιμη, με έντονη γραφή και το σετ ακόμη πιο μακριά.
        • Είναι πολύ συνηθισμένο να ρυθμίζετε το μέγεθος της αρχικής γραμματοσειράς για μια σελίδα σε 12 εικονοστοιχεία, αλλά αυτό δεν είναι πολύ ευανάγνωστο. Θεωρήστε 14px ή ακόμη και 16px ως παγκόσμιο μέγεθος γραμματοσειράς βάσης (ανάλογα με την οικογένεια γραμματοσειρών).
        • Είναι πολύ κοινό να αφήσετε το χρώμα γραμματοσειράς μαύρο (η προεπιλογή), αλλά συνήθως ένα πολύ σκούρο γκρι είναι πιο ελκυστικό και ευανάγνωστο.
        • Οι σύνδεσμοι () είναι μπλε από προεπιλογή σχεδόν σε κάθε πρόγραμμα περιήγησης από την αρχή του Διαδικτύου. Ακόμα κι αν θέλετε να αλλάξετε το χρώμα των συνδέσμων για να ταιριάζει με την επωνυμία σας (και πρέπει), πιθανότατα θα πρέπει να είναι μια απόχρωση του μπλε. Επίσης, να είστε προσεκτικοί σχετικά με τη χρήση μπλε κειμένου σε άλλα μέρη, καθώς μπορεί να σηματοδοτήσει στους χρήστες ότι θα πρέπει να μπορούν να κάνουν κλικ στο κείμενο.
        • Ομοίως, το υπογραμμισμένο κείμενο είναι ένα σχεδόν καθολικό σήμα ότι κάτι μπορεί να κάνει κλικ. Αλλάξτε αυτή τη σύμβαση με τον δικό σας κίνδυνο.
        • Ήταν συνηθισμένη συμβουλή για την αποφυγή των γραμματοσειρών serif στον Ιστό και για τη χρήση μόνο γραμματοσειρών sans serif. Αυτή ήταν καλή συμβουλή, επειδή οι γραμματοσειρές serif δεν αποδίδονται επίσης σε οθόνες χαμηλής ανάλυσης. Ωστόσο, αυτό δεν αποτελεί πλέον ανησυχία για τους περισσότερους ανθρώπους. Η χρήση μιας γραμματοσειράς serif (όπως η Γεωργία, οι Times ή Garamond) μπορεί να κάνει το κείμενο πιο ευανάγνωστο.
        • Γενικά, δεν θέλετε περισσότερες από τρεις γραμματοσειρές σε μια σελίδα:
          • Μια γραμματοσειρά περιεχομένου, η οποία μπορεί να είναι serif ή sans.
          • Μια γραμματοσειρά μενού και πλοήγησης, η οποία συνήθως πρέπει να είναι sans serif και μπορεί επίσης να είναι ίδια με τη γραμματοσειρά περιεχομένου σας.
          • Μια γραμματοσειρά για δείγματα κώδικα (αν κάνετε κάτι τέτοιο), η οποία θα πρέπει να είναι μια μονοφωνική γραμματοσειρά, όπως Courier ή Console.
        • Το «μέτρο» ενός κειμένου είναι ο αριθμός χαρακτήρων ανά γραμμή. Ένα μέτρο που ξεπερνά τους 80 χαρακτήρες γίνεται δυσανάγνωστο. Οι περισσότεροι ειδικοί θα ορίσουν το ιδανικό μέτρο σε περίπου 65 χαρακτήρες ανά γραμμή. Αυτή είναι μια συνάρτηση του πλάτους της περιοχής περιεχομένου σας και του μεγέθους της γραμματοσειράς σας.
        • Εάν χρησιμοποιείτε το @ font-face για να εισαγάγετε τη δική σας γραμματοσειρά σε μια σελίδα, βεβαιωθείτε ότι έχετε δοκιμάσει πώς φαίνεται σε πολλά προγράμματα περιήγησης. Ορισμένα προγράμματα περιήγησης αποδίδουν άσχημα ορισμένες γραμματοσειρές. Επίσης, φροντίστε να συμπεριλάβετε εναλλακτικές γραμματοσειρές στις δηλώσεις της οικογένειας γραμματοσειρών - δεν μπορείτε πάντα να βασίζεστε στο @ font-face για εργασία σε κάθε περίπτωση.

        Κινούμενα σχέδια CSS

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

        Βασικά καρέ

        Ένα κινούμενο σχέδιο ορίζεται με έναν επιλογέα CSS που ονομάζεται @keyframes. Μια δήλωση @keyframes έχει ένα όνομα και ένα σύνολο κανόνων στυλ για διάφορα σημεία (βασικά καρέ) στην κίνηση.

        @keyframes colorChange {
        από {
        χρώμα φόντου: κόκκινο;
        }
        προς την {
        χρώμα φόντου: μπλε;
        }
        }

        Στο παραπάνω παράδειγμα, η κινούμενη εικόνα "colorChange" προκαλεί ένα στοιχείο να αλλάξει το χρώμα του φόντου από κόκκινο σε μπλε.

        Περισσότερα από το χρώμα μπορούν να είναι κινούμενα. Η χρήση των κανόνων @keyframes για τον καθορισμό θέσεων θα προκαλέσει τη μετακίνηση ενός επηρεαζόμενου στοιχείου από το ένα μέρος στο άλλο.

        @keyframes moveLeft {
        από {
        θέση: σχετική
        αριστερά: 100 εικονοστοιχεία;
        προς την {
        θέση: σχετική
        αριστερά: 0px;
        }
        }

        Μπορεί επίσης να καθοριστεί μια κινούμενη εικόνα πολλαπλών σημείων, χρησιμοποιώντας ποσοστά.

        @keyframes moveAround {
        0% {
        κορυφή: 0px;
        αριστερά: 0px;
        }
        25% {
        κορυφή: 0px;
        αριστερά: 50 εικονοστοιχεία;
        }
        50% {
        κορυφή: 50 εικονοστοιχεία;
        αριστερά: 50 εικονοστοιχεία;
        }
        75% {
        κορυφή: 50 εικονοστοιχεία;
        αριστερά: 0px;
        }
        100% {
        κορυφή: 0px;
        αριστερά: 0px;
        }
        }

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

        Αντιστοίχιση κινούμενων σχεδίων σε στοιχεία

        Τα κινούμενα σχέδια ορίζονται ξεχωριστά από τα στοιχεία που θα επηρεάσουν. Τα κινούμενα σχέδια ορίζονται στις δηλώσεις @keyframes όπως φαίνεται παραπάνω και στη συνέχεια εφαρμόζονται σε στοιχεία.

        Τα κινούμενα σχέδια εφαρμόζονται σε στοιχεία που χρησιμοποιούν το όνομα @keyframe και το χρονικό διάστημα που θα πρέπει να διαρκεί η κινούμενη εικόνα. Άλλα χαρακτηριστικά μπορούν επίσης να επηρεάσουν την κινούμενη εικόνα.

        @keyframes colorChange {
        από {
        χρώμα φόντου: κόκκινο;
        }
        προς την {
        χρώμα φόντου: μπλε;
        }
        }

        .αλλαγή χρώματος {
        πλάτος: 100px;
        ύψος: 100px;
        animation-name: colorChange;
        διάρκεια ζωής: 5 δευτερόλεπτα;
        }

        @keyframes colorChange {
        από {
        χρώμα φόντου: κόκκινο;
        }
        προς την {
        χρώμα φόντου: μπλε;
        }
        }

        @ -webkit-keyframes colorChange {
        από {
        χρώμα φόντου: κόκκινο;
        }
        προς την {
        χρώμα φόντου: μπλε;
        }
        }

        # χρώμα-αλλαγή-επίδειξη .χρώμα-αλλαγή {
        πλάτος: 100px;
        ύψος: 100px;
        animation-name: colorChange;
        διάρκεια ζωής: 5 δευτερόλεπτα;
        -webkit-animation-name: colorChange;
        -webkit-animation-διάρκεια: 5 δευτερόλεπτα;
        }

        Εάν δεν ορίσετε τη διάρκεια της κινούμενης εικόνας, η κινούμενη εικόνα δεν θα εκτελεστεί, επειδή η προεπιλεγμένη τιμή είναι 0.

        Μπορούν επίσης να οριστούν πολλές άλλες ιδιότητες κινούμενης εικόνας:

        • animation-delay - Καθορίζει μια καθυστέρηση για την έναρξη μιας κινούμενης εικόνας. Η προεπιλογή είναι 0, που σημαίνει ότι η κινούμενη εικόνα θα αναπαράγεται αμέσως. Συνήθως σημειώνεται σε δευτερόλεπτα, αλλά μπορεί επίσης να σημειωθεί σε χιλιοστά του δευτερολέπτου (ms).
        • animation-direction - Καθορίζει εάν ένα κινούμενο σχέδιο θα πρέπει να εκτελείται κανονικά (η προεπιλογή), αντίστροφα ή εναλλακτικά μεταξύ εμπρός προς τα πίσω. Η εναλλακτική τιμή λειτουργεί μόνο εάν ο αριθμός κινούμενων σχεδίων-επαναλήψεων είναι υψηλότερος από 1.
        • animation-fill-mode - Καθορίζει εάν και πώς, τα στυλ από την κινούμενη εικόνα πρέπει να επηρεάζουν το στοιχείο όταν η κινούμενη εικόνα δεν εκτελείται (όταν τελειώσει ή όταν υπάρχει καθυστέρηση).
          • normal - Η προεπιλογή. Τα στυλ κινούμενης εικόνας δεν επηρεάζουν το στοιχείο όταν το στοιχείο δεν παίζει.
          • προς τα εμπρός - Το τελευταίο στυλ βασικού καρέ (έως ή 100% εάν το κινούμενο σχέδιο δεν εκτελέστηκε αντίστροφα) εφαρμόζεται στο στοιχείο.
          • προς τα πίσω - Το πρώτο στυλ βασικού καρέ (από ή 0% εάν το κινούμενο σχέδιο δεν εκτελέστηκε αντίστροφα) εφαρμόζεται στο στοιχείο.
        • animation-iteration-count - Καθορίζει τον αριθμό των φορών που πρέπει να παίζεται μια κινούμενη εικόνα.
        • animation-timing-function - Καθορίζει την καμπύλη ταχύτητας του animation:
          • ευκολία - Η κίνηση ξεκινά αργά, επιταχύνεται και τελειώνει αργά.
          • easy-in - Η κίνηση ξεκινά αργά, επιταχύνεται και τελειώνει με πλήρη ταχύτητα.
          • easy-out - Η κίνηση ξεκινά με πλήρη ταχύτητα, αλλά επιβραδύνεται καθώς τελειώνει.
          • γραμμική - Η κίνηση κινείται με πλήρη ταχύτητα από την αρχή έως το τέλος.
        Υποστήριξη προγράμματος περιήγησης για κινούμενα σχέδια

        Τα περισσότερα μεγάλα προγράμματα περιήγησης υποστηρίζουν κινούμενες εικόνες CSS, αλλά υπάρχει ένα περίεργο quirk με προγράμματα περιήγησης που χρησιμοποιούν το enegine rendering WebKit (Safari, Chrome, Opera).

        Για να βεβαιωθείτε ότι τα κινούμενα σχέδια θα λειτουργούν σε αυτά τα προγράμματα περιήγησης, πρέπει να αντιγράψετε τη δήλωση @keyframes και τα χαρακτηριστικά εκχώρησης κινούμενων σχεδίων με μια ειδική σύνταξη webkit.

        / * Αυτό είναι για προγράμματα περιήγησης που δεν ανήκουν στο webkit. * /
        @keyframes moveLeft {
        από {
        θέση: σχετική
        αριστερά: 100 εικονοστοιχεία;
        προς την {
        θέση: σχετική
        αριστερά: 0px;
        }
        }

        / * Αυτό είναι για προγράμματα περιήγησης webkit: Chrome, Safari και Opera. * /
        @ -webkit-keyframes moveLeft {
        από {
        θέση: σχετική
        αριστερά: 100 εικονοστοιχεία;
        προς την {
        θέση: σχετική
        αριστερά: 0px;
        }
        }

        #animationSupportDemo {
        animation-name: moveLeft;
        διάρκεια ζωής: 4 δευτερόλεπτα;
        -webkit-animation-name: moveLeft; / * Chrome, Safari και Opera. * /
        -webkit-animation-διάρκεια: 4 δευτερόλεπτα; / * Chrome, Safari και Opera. * /
        }

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

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

        Πότε να χρησιμοποιείτε CSS Animations

        Εάν χρειάζεστε πολύ δυναμικά στοιχεία που πετούν γύρω από την οθόνη, όπως ένα παιχνίδι arcade, τα κινούμενα σχέδια CSS δεν είναι πραγματικά ο τρόπος να πάτε - αυτό είναι πιο κατάλληλο για τη Javascript.

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

        Συνδυασμός CSS Animation με Javascript

        Οι κινούμενες εικόνες CSS ξεκινούν αμέσως ή μετά από καθορισμένη καθυστέρηση. Ωστόσο, εάν θέλετε να ενεργοποιήσετε μια κινούμενη εικόνα CSS όταν συμβαίνει κάποιο συμβάν, μπορείτε να ορίσετε την κινούμενη εικόνα σε "παύση" στο CSS και, στη συνέχεια, να την παύσετε με τη Javascript σε μεταγενέστερο σημείο. Η παύση μιας κινούμενης εικόνας γίνεται με το χαρακτηριστικό animation-play-state.

        .σε παύση
        animation-name: παράδειγμα;
        διάρκεια ζωής: 5 δευτερόλεπτα;
        animation-play-state: σε παύση;
        -webkit-animation-name: παράδειγμα;
        -webkit-animation-διάρκεια: 5 δευτερόλεπτα;
        -webkit-animation-play-state: σε παύση;
        }

        Η τιμή για την κατάσταση animation-play όταν δεν είναι σε παύση εκτελείται. Αυτό μπορεί να χρησιμοποιηθεί σε Javascript:

        [στοιχείο] .style.animationPlayState = "τρέξιμο"

        CSS στον πραγματικό κόσμο

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

        Υπάρχουν ορισμένες τυπικές «βέλτιστες πρακτικές» που ακολουθούν συνήθως οι σχεδιαστές CSS για να κάνουν τη δουλειά τους ευκολότερη και πιο συνεπή.

        Επαναφορά CSS

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

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

        Οι επαναφορές CSS χρησιμοποιούνται επίσης για τον ορισμό προεπιλεγμένων στυλ εμφάνισης για στοιχεία HTML5 που ενδέχεται να μην έχουν προεπιλεγμένες οθόνες σε παλαιότερα προγράμματα περιήγησης - στοιχεία όπως και .

        Υπάρχουν πολλά κοινά πρότυπα επαναφοράς CSS. Το πιο γνωστό είναι αυτό που δημιουργήθηκε από τον Eric Meyer.

        / * http://meyerweb.com/eric/tools/css/reset/
        v2.0 | 20110126
        Άδεια: κανένα (δημόσιος τομέας)
        * /

        html, body, div, span, applet, αντικείμενο, iframe,
        h1, h2, h3, h4, h5, h6, p, blockquote, προ,
        a, abbr, αρκτικόλεξο, διεύθυνση, big, cite, code,
        del, dfn, em, img, ins, kbd, q, s, samp,
        small, strike, strong, sub, sup, tt, var,
        b, u, i, κέντρο,
        dl, dt, dd, ol, ul, li,
        πεδίο, φόρμα, ετικέτα, θρύλος,
        πίνακας, λεζάντα, tbody, tfoot, thead, tr, th, td,
        άρθρο, εκτός από, καμβάς, λεπτομέρειες, ενσωμάτωση,
        σχήμα, figcaption, υποσέλιδο, κεφαλίδα, hgroup,
        μενού, nav, έξοδος, ρουμπίνι, ενότητα, περίληψη,
        ώρα, σήμα, ήχος, βίντεο {
        περιθώριο: 0;
        επένδυση: 0;
        περίγραμμα: 0;
        μέγεθος γραμματοσειράς: 100%;
        γραμματοσειρά: κληρονομεί;
        κάθετη-ευθυγράμμιση: βασική γραμμή;
        }
        / * Επαναφορά ρόλου εμφάνισης HTML5 για παλαιότερα προγράμματα περιήγησης * /
        άρθρο, κατά μέρος, λεπτομέρειες, figcaption, σχήμα,
        υποσέλιδο, κεφαλίδα, ομάδα, μενού, πλοήγηση, ενότητα {
        οθόνη: μπλοκ;
        }
        σώμα {
        ύψος γραμμής: 1;
        }
        ου, ολ {
        στυλ λίστας: κανένα;
        }
        blockquote, q {
        αποσπάσματα: κανένα;
        }
        blockquote: πριν, blockquote: μετά,
        q: πριν, q: μετά {
        περιεχόμενο: '';
        περιεχόμενο: κανένα;
        }
        πίνακας {
        σύνορα-κατάρρευση: κατάρρευση;
        απόσταση ορίου: 0;
        }

        Προεπεξεργαστές CSS

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

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

        Τι συμβαίνει όταν θέλετε να το αλλάξετε?

        Τι γίνεται με μια κλίμακα μεγέθους κειμένου; Έχετε ορίσει το προεπιλεγμένο μέγεθος κειμένου σε 12px και κάθε μέγεθος επικεφαλίδας είναι ένα συγκεκριμένο πολλαπλάσιο αυτού του μεγέθους για να δημιουργήσετε ένα ενοποιημένο σύνολο μεγεθών. Τι συμβαίνει όταν αλλάζετε το προεπιλεγμένο μέγεθος?

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

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

        Αυτό καθιστά ευκολότερο τον καθορισμό συνδυασμών χρωμάτων, αναλογιών μεγεθών και άλλων τύπων επαναλαμβανόμενων δηλώσεων.

        Οι δύο πιο δημοφιλείς προεπεξεργαστές CSS είναι: Λιγότερο - Χρησιμοποιείται από το Twitter Bootstrap - Sass - Χρησιμοποιείται από τον Ruby on Rails, Jekyll και πολλά άλλα εργαλεία ανάπτυξης που βασίζονται σε Ruby.

        Γενικά, οι προγραμματιστές γράφουν τα φύλλα στυλ τους στο Less ή Sass και στη συνέχεια τα συνθέτουν σε CSS πριν ξεκινήσουν έναν ιστότοπο. Υπάρχουν επίσης μεταγλωττιστές από την πλευρά του πελάτη (στο πρόγραμμα περιήγησης) γραμμένοι σε Javascript, αλλά αυτοί χρησιμοποιούν πολλούς πόρους και συνήθως χρησιμοποιούνται μόνο στην ανάπτυξη.

        Είναι εξαιρετικά ασυνήθιστο σε αυτό το σημείο για έναν επαγγελματία προγραμματιστή ιστού να μην χρησιμοποιεί το Less ή το Sass.

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

        Ανταποκρίσιμος σχεδιασμός

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

        Αυτές οι μέρες έχουν περάσει πολύ.

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

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

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

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

        Η λύση σε αυτό το πρόβλημα είναι το Responsive Design.

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

        Οι τρεις πυλώνες του ανταποκριτικού σχεδιασμού ιστοσελίδων είναι:

        Πλέγματα ρευστών: Τα πλέγματα ρευστών συνεπάγονται διαχωρισμό πλεγμάτων σελίδων με βάση ποσοστά και όχι απόλυτα εικονοστοιχεία. Για παράδειγμα, μπορεί να έχετε μια κύρια στήλη περιεχομένου που εκτείνεται στο 70% της οθόνης και μια στήλη πλευρικής γραμμής που εκτείνεται στο 30%. Καθώς η οθόνη αυξάνεται ή μειώνεται σε μέγεθος, το πλέγμα επεκτείνεται ή συρρικνώνεται.

        Fluid Images: Οι εικόνες δεν πρέπει ποτέ να είναι ευρύτερες από την οθόνη στην οποία εμφανίζονται, πράγμα που σημαίνει ότι δεν πρέπει ποτέ να είναι ευρύτερες από το στοιχείο πλέγματος που τις περιέχει. Η ευκολότερη λύση σε αυτό είναι να ορίσετε το μέγιστο πλάτος στις εικόνες να είναι 100%. img {max-width: 100%; }

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

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

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

        Πλαίσια διεπαφής

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

        • Αποκτήστε μια δομή πλέγματος που ανταποκρίνεται σε κάθε πρόγραμμα περιήγησης και συσκευή.
        • Σχεδιασμός κατάλληλων ερωτημάτων μέσων και καθορισμός βέλτιστων σημείων διακοπής πλάτους οθόνης.
        • Τυπογραφία που είναι όμορφη και ευανάγνωστη.
        • Η δημιουργία εντύπων φαίνεται ακόμη μέτρια αξιοπρεπής, πόσο μάλλον όμορφη και φιλική προς τον χρήστη.
        • Τραπέζι στυλ για να μοιάζουν με αυτά που προήλθαν από το 1997.
        • Χαριτωμένη υποβάθμιση για παλαιότερα προγράμματα περιήγησης.
        • Θυμάμαι να χρησιμοποιείς διπλούς κανόνες στυλ για συγκεκριμένες λειτουργίες -webkit (και να βεβαιώνεις ότι πληκτρολογείς τον ίδιο κανόνα με τον ίδιο τρόπο κάθε φορά).
        • Να κάνετε CSS και Javascript να αλληλεπιδρούν με τον σωστό τρόπο.

        Πολλά από αυτά τα ζητήματα είναι απλές εργασίες κωδικοποίησης «boilerplate» που αφαιρούν χρόνο από την κωδικοποίηση νέων σχεδίων και λειτουργιών και πολλά είναι πολύ περίπλοκα για να διακινδυνεύσουν την «χειροκωδικοποίηση» σε κάθε έργο. Κανείς δεν θέλει να ξοδέψει 50% ή περισσότερο χρόνο ανάπτυξης, εντοπίζοντας τον θεμελιώδη κώδικα - οι προγραμματιστές θέλουν να αναπτύξουν.

        Για αυτούς τους λόγους και ακολουθώντας την παρόμοια τάση στην ανάπτυξη κώδικα εφαρμογών, όλο και περισσότεροι προγραμματιστές στρέφονται σε πλαίσια front-end.

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

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

        Μερικά από τα πιο δημοφιλή πλαίσια σχεδιασμού front-end που χρησιμοποιούνται σήμερα είναι:

        • Bootstrap - Από την ομάδα ανάπτυξης στο Twitter, το Bootstrap σχεδιάστηκε για να επιταχύνει το πρωτότυπο και την ανάπτυξη εφαρμογών ιστού. Παρέχει εξαιρετική φόρμα και διαδραστικότητα UI και ένα τολμηρό, διακριτικό σχεδιασμό. Πολλοί άνθρωποι διαμαρτύρονται ότι δημιουργεί φουσκωμένη σήμανση (συμβαίνει), επειδή οι άπειροι χρήστες ενθαρρύνονται να προσθέσουν τάξεις στυλ στο HTML. Παρόλα αυτά, παρέχει ένα εξαιρετικό εργαλείο για γρήγορο πρωτότυπο οποιασδήποτε εφαρμογής ιστού που βασίζεται σε φόρμα.
        • Pure.css - Ένα αρθρωτό κιτ εργαλείων από κομμάτια πλαισίου CSS που μπορούν να χρησιμοποιηθούν μεμονωμένα ή ως σύνολο.
        • Ίδρυμα - Το ίδιο το τιμολόγιο ως «το πιο προηγμένο αποκρινόμενο πλαίσιο front-end στον κόσμο», το Ίδρυμα θεωρείται από πολλούς σαν το Bootstrap για άτομα που ενδιαφέρονται για καλή σήμανση.
        • Skeleton - Το Skeleton είναι ένα "απλό" CSS frameowrk που παρέχει ένα ανταποκρίσιμο πλέγμα, καθαρή τυπογραφία και γενικά ελάχιστο σχεδιασμό. Προορίζεται να είναι «σημείο εκκίνησης, όχι πλαίσιο».

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

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

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

        Το CSS είναι ένα ουσιαστικό μέρος του HTML

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

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

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

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

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

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

        JavaScript και HTML

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

        Τι είναι το JavaScript

        Το JavaScript είναι μια γλώσσα δέσμης ενεργειών ενσωματωμένη (σχεδόν) σε κάθε πρόγραμμα περιήγησης ιστού. Χρησιμοποιείται για την προσθήκη δυναμικής αλληλεπίδρασης και scripting σε ιστοσελίδες. (Μπορεί επίσης να χρησιμοποιηθεί από την πλευρά του διακομιστή, μαζί με εργαλεία όπως το Node.js, αλλά αυτό δεν είναι το επίκεντρο εδώ.)

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

        ECMAScript

        Εάν εργάζεστε καθόλου με JavaScript, θα εμφανιστεί το πολύ περίεργο όνομα "ECMAScript". Αυτό είναι το «επίσημο» όνομα του JavaScriipt.

        Η τυπική προδιαγραφή για τη γλώσσα διατηρείται από έναν οργανισμό που ονομάζεται Ecma, ο οποίος ήταν η Ευρωπαϊκή Ένωση Κατασκευαστών Υπολογιστών. Έκτοτε άλλαξαν το όνομά τους σε «Ecma», το οποίο δεν είναι πλέον αρκτικόλεξο για τίποτα.

        Κάθε πρόγραμμα περιήγησης ιστού εφαρμόζει το πρότυπο ECMAScript λίγο διαφορετικά (και η Microsoft φτάνει στο σημείο να καλεί την εφαρμογή τους JScript αντί για Javascript). Ορισμένα άτομα, λοιπόν, θα χρησιμοποιήσουν το "ECMAscript" για να αναφερθούν συγκεκριμένα στην τυπική μορφή της γλώσσας, και όχι σε διαλέκτους ή παράγωγα ενσωματωμένα σε προγράμματα περιήγησης ιστού.

        JavaScript και Java

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

        Μοντέλο αντικειμένου εγγράφου

        Ένα από τα βασικά πράγματα που πρέπει να καταλάβετε εάν θέλετε να έχετε καλή διαχείριση στο Javascript είναι το μοντέλο αντικειμένου εγγράφου.

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

        Το DOM είναι το API (Application Programming Interface) μέσω του οποίου ο κώδικας Javascript αλληλεπιδρά με το έγγραφο HTML. Όταν ένα έγγραφο αποδίδεται από ένα πρόγραμμα περιήγησης, το πρόγραμμα περιήγησης δεν σας δείχνει απλώς τον πηγαίο κώδικα με μερικούς πρόσθετους κανόνες στυλ. Το πρόγραμμα περιήγησης έχει διαβάσει τον πηγαίο κώδικα και έχει δημιουργήσει μια προβολή βάσει του. Κάθε στοιχείο στο έγγραφο έχει μετατραπεί σε αντικείμενο (με την έννοια προγραμματισμού) με χαρακτηριστικά και μεθόδους προσβάσιμες από το Javascript.

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

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

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

        Χρησιμοποιώντας Javascript

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

        Συμπερίληψη JavaScript σε μια σελίδα

        Όπως το CSS, το JavaScript μπορεί να συμπεριληφθεί σε μια ιστοσελίδα με δύο τρόπους - ενσωματωμένα σενάρια και συνδεδεμένους πόρους.

        Για να ενσωματώσετε ένα σενάριο, απλώς συμπεριλάβετε κώδικα JavaScript μεταξύ ετικετών.

        function changeColor (toChange, newColor) {
        document.getElementbyId (toChange) .style.backgroundColor = newColor;
        }
        </γραφή>

        Για να συμπεριλάβετε ένα ξεχωριστό αρχείο JavaScript σε ένα έγγραφο HTML, συνδέστε το με το στοιχείο.

        τύπος ="κείμενο / javascript" src ="app.js">

        Η διεύθυνση URL (σχετική ή πλήρως καθορισμένη) του αρχείου JavaScript τοποθετείται στο χαρακτηριστικό src. Το χαρακτηριστικό type δεν απαιτείται αυστηρά στο HTML5, αλλά είναι καλό να συμπεριλάβετε τόσο συμβατότητα προς τα πίσω όσο και (ενδεχομένως) προς τα εμπρός. Επιπλέον, εάν υπάρχουν πολλά στοιχεία σε μια σελίδα, δεν είναι κακή ιδέα να τους δώσετε κάθε μοναδικό χαρακτηριστικό ταυτότητας.

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

        Πού να βάλετε JavaScript

        Υπάρχουν δύο κοινά μέρη για τη συμπερίληψη JavaScript σε μια σελίδα, στο και κάτω από το .

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

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

        Αυτή εξακολουθεί να είναι καλή συμβουλή. Ωστόσο, υπάρχει τώρα μια συστροφή στην παράξενη συμβουλή: υπάρχει τώρα ένας τρόπος να τοποθετήσετε στοιχεία στο έγγραφο χωρίς να προκαλέσετε επιβράδυνση της απόδοσης της σελίδας. Από το HTML5, η ετικέτα περιλαμβάνει ένα χαρακτηριστικό που ονομάζεται async. Εάν προσθέσετε το χαρακτηριστικό async στην ετικέτα σεναρίου σας, η σελίδα δεν θα σταματήσει την απόδοση και το JS θα αναλυθεί και θα εκτελεστεί ασύγχρονα (δηλαδή, σε ξεχωριστό νήμα).

        τύπος ="κείμενο / javascript" src ="app.js" ασύγχρονος>

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

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

        JSON

        Ένα υποσύνολο JavaScript, το οποίο αγγίχθηκε στις ενότητες του Σημασιολογικού HTML, είναι το JSON - Σημείωση αντικειμένου JavaScript.

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

        {
        "τίτλος" : "Lorem Ipsum και All That Jazz",
        "συντάκτης" : "Άνταμ Γουντ",
        "περιεχόμενο" :
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mauris metus, euismod non sodales eu, molestie congue nibh. Nunc eu honissim est. Donec non est a sapien rutrum imperdiet. Nunc vitae libero nec velit porta pulvinar vitae ut sapien. Aliquam συνέπειες orci eget libero blandit semper. Aenean malesuada risus nec volutpat dapibus. Το Aliquam sit amet bibendum enim. Αναστολή σε faucibus erat. Proin quis simplisis nisl. Το Vivamus sit amet enim elit. Aliquam nisl sapien, sagittis vitae nisi nec, vulputate efficitur urna. »,
        }

        Όπως είδαμε με το Semantic Markup, το JSON μπορεί να χρησιμοποιηθεί για την κωδικοποίηση δεδομένων σχετικά με το περιεχόμενο μιας σελίδας, για κατανάλωση ως Semantic Markup API. Αυτό είναι χρήσιμο για την ευρετηρίαση της Google.

        Υπάρχει επίσης μια άλλη σημαντική χρήση για το JSON - AJAX.

        ΑΪΑΣ

        Το AJAX είναι ένα μοτίβο σχεδίασης (όχι μια συγκεκριμένη τεχνολογία) στο οποίο υποβάλλονται ασύγχρονα αιτήματα HTTP μέσω JavaScript, επιτρέποντας τη συμπλήρωση νέων δεδομένων σε μια ιστοσελίδα χωρίς να χρειάζεται επαναφόρτωση της σελίδας.

        Το AJAX ήταν αρχικά το "Asynchronous JavaScript and XML", επειδή αρχικά η πιο κοινή γλώσσα μεταφοράς δεδομένων για αυτόν τον τύπο σχεδίασης ήταν η XML. Ωστόσο, το JSON έχει γίνει η πιο κοινή γλώσσα, επειδή είναι ελαφρύτερη, ευέλικτη, εγγενής στη JavaScript και ευκολότερη στην ανάγνωση. (Δυστυχώς, το "AJAJ" δεν είναι πολύ πιασάρικο, έτσι το παλιό όνομα έχει κολλήσει.)

        Το μοτίβο AJAX δεν έχει νόημα στις περισσότερες σελίδες, αλλά σε εφαρμογές ιστού (για παράδειγμα, email), μπορεί να κάνει όλη τη διαφορά στον κόσμο.

        Το AJAX ονομάζεται «ασύγχρονη JavaScript» επειδή ο κώδικας JS πραγματοποιεί κλήσεις προς το διακομιστή σε άλλες ώρες εκτός από τη φόρτωση σελίδας (δηλαδή όταν ένα πρόγραμμα περιήγησης πραγματοποιεί συνήθως κλήσεις στον διακομιστή). Με βάση τις ενέργειες των χρηστών ή το χρόνο που έχει παρέλθει, μια εφαρμογή ιστού τύπου AJAX θα στείλει ένα αίτημα στον διακομιστή χωρίς να φορτώσει ξανά τη σελίδα. Στη συνέχεια, τα δεδομένα από αυτήν την απόκριση χρησιμοποιούνται για την ενημέρωση του DOM (και, επομένως, της προβολής στον χρήστη) χωρίς επαναφόρτωση.

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

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

        Επιπλέον, επειδή το JSON μπορεί να είναι το μοναδικό περιεχόμενο ενός αρχείου JavaScript (το οποίο μπορεί να έχει οποιονδήποτε τομέα έχει τη διεύθυνση URL src), το JSON μπορεί να χρησιμοποιηθεί για να αποφευχθούν οι δυσκολίες του κλειδώματος πολλαπλής προέλευσης. Συνήθως, τα προγράμματα περιήγησης ιστού εμποδίζουν τους ιστότοπους να υποβάλλουν αιτήματα και να λαμβάνουν δεδομένα από τομείς διαφορετικούς από τον τομέα του πρωτεύοντος εγγράφου. Ωστόσο, το JavaScript (όπως CSS και εικόνες) αντιμετωπίζεται ως ξεχωριστός πόρος, ο οποίος μπορεί να προέρχεται από οπουδήποτε. Με την εφαρμογή JSON του μοτίβου AJAX, το αίτημα πολλαπλής προέλευσης μπορεί να "μεταμφιέζεται" ως συμπερίληψη πόρου.

        JavaScript στον πραγματικό κόσμο

        JQuery

        Η σύνταξη του JavaScript μπορεί να είναι λίγο ριζική (και αόριστη) κατά καιρούς, και μια σειρά από πολύ συνηθισμένες λειτουργίες απαιτούν αφθονία κώδικα "boilerplate".

        Για αυτόν τον λόγο, σχεδόν όλοι οι προγραμματιστές JS χρησιμοποιούν μια βιβλιοθήκη JavaScript που ονομάζεται JQuery. Το JQuery παρέχει συνοπτικά API για ορισμένες κοινές περιπτώσεις χρήσης, όπως διασταύρωση εγγράφων, χειρισμός DOM και AJAX.

        Οι περισσότερες γλώσσες προγραμματισμού έχουν μια «τυπική βιβλιοθήκη», ένα βασικό σύνολο επεκτάσεων γλώσσας που αυτοματοποιούν ή αφαιρούν τα πιο συνηθισμένα πράγματα που πρέπει να κάνουν οι προγραμματιστές στη γλώσσα. Το JavaScript δεν διαθέτει επίσημη τυπική βιβλιοθήκη. Αν και υπάρχουν άλλα ανταγωνιστικά έργα, με αφοσιωμένες βάσεις προγραμματιστών (όπως το κλείσιμο και το πρωτότυπο), το JQuery είναι - για πολλούς ανθρώπους - η τυπική βιβλιοθήκη JavaScript.

        Εδώ είναι ένα πολύ σύντομο παράδειγμα για το πώς το JQuery επιταχύνει την ανάπτυξη. Ας υποθέσουμε ότι θέλετε να αλλάξετε ένα χαρακτηριστικό ενός στοιχείου.

        // Ο "ΚΑΘΑΡΟΣ" Τρόπος JavaScript.

        document.getElementById ("να αλλάξει") .setAttribute ("τίτλος","Νέο κείμενο τίτλου")

        // Ο τρόπος JQuery.

        $. ("#να αλλάξει") .attr ("τίτλος","Νέο κείμενο τίτλου")

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

        Βιβλιοθήκες διεπαφής JavaScript

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

        Αυτό είναι εφικτό επειδή υπάρχουν αρκετές βιβλιοθήκες UI JavaScript (όπως JQuery UI) και πλαίσια διεπαφής (όπως Bootstrap) που παρέχουν ένα σχετικά εύκολο API HTML.

        Ένα API (όπως αναφέρεται παραπάνω) σε μια διεπαφή προγραμματισμού εφαρμογών. Δηλαδή, ένας τρόπος πρόσβασης στη λειτουργικότητα ενός λογισμικού εκτός του λογισμικού. Στο πλαίσιο και των δυνατοτήτων HTML API to JavaScript, αυτό σημαίνει έναν εύκολο τρόπο για να συμπεριλάβετε λειτουργίες JavaScript σε HTML απλά προσθέτοντας πράγματα στη σήμανση (συνήθως ειδικές τάξεις).

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

        Πλαίσια εφαρμογής Front-End JavaScript

        Χωριστά από τα πλαίσια σχεδιασμού front-end (όπως το Bootstrap) που συζητήθηκε στην προηγούμενη ενότητα για το CSS, ένα πλαίσιο εφαρμογής front-end είναι μια εφαρμογή λογισμικού σκελετού, η οποία χρησιμεύει ως σημείο εκκίνησης όχι για τον οπτικό σχεδιασμό αλλά για την πραγματική λειτουργικότητα του εφαρμογή ιστού.

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

        Τα περισσότερα πλαίσια εφαρμογών JS εφαρμόζουν το σχέδιο σχεδίασης MVC ή Model View Controller. Αυτό το μοτίβο λειτουργεί ως εξής:

        • Το Μοντέλο χειρίζεται τα δεδομένα
        • Η προβολή εμφανίζει τα δεδομένα
        • Ο ελεγκτής συνδέει τα δεδομένα στο μοντέλο με την προβολή και χειρίζεται τη λογική της εφαρμογής

        Κάθε πλαίσιο JS εφαρμόζει αυτό το δίπλωμα με διαφορετικό τρόπο, αλλά σχεδόν όλοι κάνουν κάποια έκδοση αυτού.

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

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

        Το JavaScript είναι πιο ισχυρό και χρήσιμο από ποτέ

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

        HTML εναντίον όλων

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

        Η HTML ως εναλλακτική λύση

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

        Ηλεκτρονικά βιβλία

        Το πιο δημοφιλές πρότυπο ανοιχτού κώδικα για ηλεκτρονικά βιβλία, η μορφή .epub - η οποία μπορεί να χρησιμοποιηθεί σε σχεδόν όλους τους ηλεκτρονικούς αναγνώστες εκτός από το Amazon Kindle - είναι στην πραγματικότητα απλώς μια μορφή βασισμένη σε HTML. Μεμονωμένες ενότητες και ενότητες όπως Πίνακες περιεχομένων και ευρετήρια, είναι μεμονωμένα αρχεία HTML. Όλα τα αρχεία περιεχομένου, μαζί με στοιχεία όπως εικόνες και αρχεία CSS, απλώς συμπιέζονται σε ένα αρχείο και δίνεται επέκταση αρχείου .epub. Με πολλούς τρόπους, ένα βιβλίο .epub είναι ανάλογο με έναν ιστότοπο με πολλές σελίδες σε αυτό.

        Το Amazon Kindle πάντα προτιμούσε μια ιδιόκτητη μορφή αρχείου. Η πρώτη γενιά των Kindles χρησιμοποίησε το .mobi και μετά από αυτό μια σχετική μορφή που ονομάζεται .azw. Αυτά ήταν πιο περίπλοκα από τη μορφή .epub και δεν βασίζονταν σε HTML.

        Ωστόσο, η τελευταία γενιά των Kindles χρησιμοποιεί τη νέα μορφή .azw3, η οποία βασίζεται σε HTML5. Παρόλο που ήταν πάντα δυνατή η δημιουργία ηλεκτρονικών βιβλίων Kindle από HTML μέσω λογισμικού μετατροπής, η HTML είναι πλέον η κύρια γλώσσα συγγραφής για το περιεχόμενο των ηλεκτρονικών βιβλίων.

        Εφαρμογές για κινητά

        Οι δύο πιο δημοφιλείς πλατφόρμες για κινητά - Android και iPhone - χρησιμοποιούν εντελώς διαφορετικές γλώσσες προγραμματισμού για την ανάπτυξη εφαρμογών. Η ανάπτυξη εφαρμογών Android γίνεται συνήθως σε Java, ενώ το iOS χρησιμοποιεί το Objective C και τη νέα γλώσσα Swift.

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

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

        Εργαλεία όπως το PhoneGap επιτρέπουν στους προγραμματιστές να δημιουργήσουν μια εφαρμογή σε γλώσσες που βασίζονται στο πρόγραμμα περιήγησης (HTML, JS, CSS) και στη συνέχεια να τις συσκευάσουν σε εφαρμογές για διαφορετικά λειτουργικά συστήματα. Το λογισμικό PhoneGap αναδιπλώνει την εφαρμογή που βασίζεται στο πρόγραμμα περιήγησης σε ένα «πρόγραμμα περιήγησης χωρίς χρώμα» - ένα πλαίσιο απόδοσης τύπου προγράμματος περιήγησης που προβάλλει μόνο αρχεία στον κατάλογο εφαρμογών και δεν παρέχει πλοήγηση που βλέπει ο χρήστης. Αυτό μπορεί να γίνει για οποιοδήποτε υποστηριζόμενο λειτουργικό σύστημα, επιτρέποντας στις εφαρμογές να δημιουργούνται μία φορά και να αναπτύσσονται παντού.

        Η HTML έχει γίνει η καθολική γλώσσα.

        Εναλλακτικές λύσεις σε HTML

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

        Λάμψη

        Το Flash είναι μια πλατφόρμα λογισμικού πολυμέσων που μπορεί να εκτελεστεί στα περισσότερα προγράμματα περιήγησης ιστού με μια προσθήκη.

        Στα τέλη της δεκαετίας του 1990, δεν υπήρχε τίποτα πιο δροσερό από έναν ιστότοπο που βασίζεται σε Flash. Ήταν εξαιρετικά διαδραστικοί, κινούμενοι και υπερηφανεύονταν για καλύτερα γραφικά από απλούς ιστότοπους που βασίζονται σε HTML. Θα μπορούσατε ακόμη και να τους παίξετε μουσική και βίντεο.

        Αυτοί οι ιστότοποι γρήγορα έγιναν κουραστικοί και ενοχλητικοί, αλλά η τεχνολογία κρέμεται από συνήθεια (οι άνθρωποι γράφουν ό, τι συνηθίζουν να γράφουν) και από φόβο ότι ιστότοποι και εφαρμογές που γράφονται σε HTML5 και JavaScript δεν θα υποστηρίζονται σε όλα τα προγράμματα περιήγησης. Ο Internet Explorer 6 παρέμεινε σε μεγάλη χρήση για χρόνια μετά την εμφάνιση καλύτερων, συμβατών με τα πρότυπα προγραμμάτων περιήγησης, οπότε οι άνθρωποι εξακολούθησαν να εξάγουν ιστότοπους που βασίζονται σε Flash.

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

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

        • Η πιο συνηθισμένη χρήση του Flash σε μη διαδραστικούς ιστότοπους είναι η "Εισαγωγή Flash", η οποία είναι εξαιρετικά ενοχλητική για τους χρήστες. Κανείς δεν θέλει να περιμένει και να παρακολουθήσει τη διασκεδαστική σας εκπομπή πριν βρει τα πράγματα που έψαχνε στον ιστότοπό σας. Ποτέ, μην το κάνετε ποτέ.
        • Μερικοί άνθρωποι πιστεύουν ότι είναι καλή ιδέα να τοποθετήσετε περιεχόμενο και μενού σε μια εφαρμογή Flash, έτσι ώστε να μπορούν να δημιουργήσουν δροσερά εφέ όπως στοιχεία μενού φωτισμού ή κυλιόμενες καρτέλες. Αυτή είναι μια κακή ιδέα:
          • Οι άνθρωποι ενδιαφέρονται για το περιεχόμενό σας και όχι για τα ειδικά εφέ σας. Κάντε το περιεχόμενό σας ευανάγνωστο και εύκολο στην πλοήγηση. Κανείς δεν πρόκειται να παραμείνει στον ιστότοπό σας περισσότερο ή να το προτείνει στους φίλους του επειδή τους άρεσε ο τρόπος με τον οποίο το περιεχόμενό σας ξετυλίγεται σαν κύλιση όταν έκαναν κλικ στο κουμπί του μενού πτήσης.
          • Η τοποθέτηση περιεχομένου σε Flash, αντί για HTML, το αποκρύπτει από τις μηχανές αναζήτησης, καθιστώντας τον ιστότοπό σας αποτελεσματικά αόρατο στο Google.
          • Η τοποθέτηση περιεχομένου στο Flash σημαίνει ότι οποιαδήποτε συγκεκριμένη προβολή του περιεχομένου σας είναι στην πραγματικότητα μια συγκεκριμένη κατάσταση σε μια εφαρμογή που εκτελείται, όχι σε μια κοινή χρήση URL. Αυτό καθιστά πολύ δύσκολο για τους χρήστες να κάνουν σελιδοδείκτη ή να μοιράζονται το περιεχόμενό σας.
          • Το περιεχόμενο και η πλοήγηση σε μια εφαρμογή Flash δεν είναι προσβάσιμα από αναγνώστες οθόνης, καθιστώντας τον ιστότοπό σας μη διαθέσιμο σε άτομα με προβλήματα όρασης.
          • Τα περισσότερα από τα εφέ που ίσως θέλετε να δημιουργήσετε στο Flash μπορούν να δημιουργηθούν πιο εύκολα σε JavaScript και CSS, χωρίς να δημιουργηθεί κανένα από αυτά τα προβλήματα.
        PDF

        PDF - Portable Document Format - είναι μια εξαιρετική μορφή πολλαπλών πλατφορμών για έγγραφα που εστιάζουν στην εκτύπωση.

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

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

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

        Όποιος θέλει να δει τις πληροφορίες στο φυλλάδιο σας δεν θέλει να δει ένα PDF. Θέλουν το περιεχόμενό σας και θα πρέπει να παρέχετε με τη μορφή που είναι κατάλληλη για το μέσο - στην περίπτωση των προγραμμάτων περιήγησης, αυτό το μέσο είναι HTML.

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

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

        Η HTML κερδίζει

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

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

        XHTML και XHTML5

        XHTML

        Το XHTML σημαίνει eXtensible Hypertext Markup Language. Είναι βασικά μια εφαρμογή XML του HTML. Όταν αναπτύχθηκε για πρώτη φορά, η HTML (έκδοση 4) δομήθηκε χαλαρά. Το XHTML έκανε HTML εξαιρετικά δομημένο. Ήταν από καιρό ως το μέλλον της σήμανσης για τον Ιστό. Αλλά το HTML5 το έχει παρακάμψει σε μεγάλο βαθμό. Ωστόσο, χρησιμοποιείται ευρέως.

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

        Ιστορία

        Το 1998, το W3C δημοσίευσε ένα Προσχέδιο Εργασίας με τίτλο Αναδιαμόρφωση HTML σε XML. Αυτή η νέα γλώσσα βασίστηκε σε HTML 4, αλλά συμμορφώθηκε με τους αυστηρότερους κανόνες σύνταξης του XML. Τον Φεβρουάριο του 1999 το όνομα της προδιαγραφής άλλαξε σε XHTML 1.0: The eXtensible HyperText Markup Language. Τέλος, τον Ιανουάριο του 2000, το XHTML έγινε η επίσημη πρόταση W3C.

        Η επόμενη έκδοση του XHTML, XHTML 1.1 δημοσιεύθηκε τον Μάιο του 2001, η οποία εξακολουθούσε να βασίζεται σε αυστηρούς κανόνες, αλλά επιτρέπεται για προσαρμογές και μικρές αλλαγές. Το XHTML 2.0 ξεκίνησε ως προσχέδιο εργασίας, αλλά εγκαταλείφθηκε το 2009 υπέρ των HTML5 και XHTML5.

        Βασικές αρχές XHTML

        Ενώ το XHTML είναι σχεδόν πανομοιότυπο με το HTML, εισήγαγε ένα νέο σύνολο κανόνων που έπρεπε να διασφαλίζουν ότι όλοι οι κώδικες είναι έγκυροι και σωστοί. Αυτοί οι κανόνες ήταν:

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

        Μαζί με τους κανόνες που αναφέρονται παραπάνω, το XHTML εισήγαγε αρχικά τρεις επίσημους ορισμούς τύπων εγγράφων (DTDs) που αντιστοιχούσαν στις τρεις διαφορετικές εκδόσεις του HTML 4.01:

        • XHTML 1.0 Αυστηρή είναι το XML ισοδύναμο με αυστηρό HTML 4.01 και περιλαμβάνει στοιχεία και χαρακτηριστικά που δεν έχουν σημειωθεί κατάργηση στην προδιαγραφή HTML 4.01. Από τον Νοέμβριο του 2015, το XHTML 1.0 Strict είναι ο τύπος εγγράφου που χρησιμοποιείται για την αρχική σελίδα του ιστότοπου της Κοινοπραξίας World Wide Web.
        • XHTML 1.0 Μεταβατική είναι το ισοδύναμο XML του HTML 4.01 Transitional και περιλαμβάνει τα στοιχεία παρουσίασης (όπως κέντρο, γραμματοσειρά και προειδοποίηση) που εξαιρούνται από την αυστηρή έκδοση.
        • Πλαίσιο XHTML 1.0 είναι το αντίστοιχο XML του HTML 4.01 Frameset και επιτρέπει τον ορισμό των εγγράφων frameset - μια κοινή δυνατότητα ιστού στα τέλη της δεκαετίας του 1990.

        Παράδειγμα

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

        Η πρώτη μου ιστοσελίδα

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

        Είμαι μια πολύ απλή αλλά πλήρως λειτουργική ιστοσελίδα με έγκυρο κώδικα XHTML!

        Διαδικτυακοί πόροι

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

        Αναφορά

        • Επίσημη προδιαγραφή XHTML: επίσημος ιστότοπος που εξηγεί την απόφαση για ανάπτυξη του XHTML και παρέχει περαιτέρω πόρους για την ανάπτυξή του.
        • XHTML 1.0: η δεύτερη αναθεωρημένη έκδοση του προσχεδίου εργασίας για την αναδιαμόρφωση του HTML 4 σε XML 1.0
        • Βασική προδιαγραφή XHTML: παρέχει έναν τύπο εγγράφου XHTML που μπορεί να κοινοποιηθεί σε συσκευές όπως επιτραπέζιοι υπολογιστές, τηλεόραση και κινητά τηλέφωνα.
        • XHTML: The Clean Code Solution: παρέχει μια λεπτομερή επισκόπηση XHTML που εστιάζει σε διαφορές μεταξύ HTML και νέων προτύπων.
        • Γιατί να μεταβείτε σε XHTML: παρέχει ένα συναρπαστικό επιχείρημα για μετάβαση σε XHTML προκειμένου να προσαρμόσετε τη ροή εργασίας και να παράγετε καθαρότερο κώδικα.

        Εργαλεία

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

        • Υπηρεσία επικύρωσης HTML / XHTML: Ο επικυρωτής του W3C ελέγχει τόσο τα έγγραφα HTML όσο και τα έγγραφα XHTML για συμμόρφωση με τις επίσημες προδιαγραφές.
        • HTML Tidy: σας βοηθά να καθαρίζετε αυτόματα τα αρχεία HTML και να τα προσαρμόζετε στις τυπικές προδιαγραφές. Αρχικά αναπτύχθηκε από τον Dave Ragget του W3C και τώρα είναι ένα έργο ανοιχτού κώδικα στο SourceForge.

        Σεμινάρια

        Αν θέλετε πραγματικά να εξερευνήσετε την ανάπτυξη XHTML, αυτά τα μαθήματα θα σας κάνουν να ξεκινήσετε.

        • Επεξήγηση XHTML: δίνει μια επισκόπηση του πώς δημιουργήθηκε το XHTML και εξηγεί όλες τις αλλαγές που συνέβησαν, ακολουθούμενα από παραδείγματα κώδικα, επισκόπηση DTD και βέλτιστες πρακτικές κωδικοποίησης.
        • XHTML Web Design for Beginners: εξερευνά τα προηγμένα δομικά στοιχεία του XHTML, συμπεριλαμβανομένων σχολίων, κειμένου και άλλων.
        • XHTML Tutorial: ένα πολύ σύντομο σεμινάριο που καλύπτει τις βασικές έννοιες του XHTML με συνοπτικό τρόπο.
        • Προσβάσιμες φόρμες HTML / XHTML: ένα σεμινάριο επιπέδου για αρχάριους που καλύπτει ακριβώς όσα πρέπει να γνωρίζετε.
        • Έναρξη HTML (XHTML): ένα βίντεο φροντιστήριο κατάλληλο για αρχάριους να μάθουν τα βασικά του XHTML.
        • Μεθοδολογίες δοκιμής λογισμικού: μια εισαγωγή στις μεθόδους και τα εργαλεία δοκιμών λογισμικού που ενδιαφέρουν γενικά τους προγραμματιστές HTML.

        Βιβλία

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

        • HTML, XHTML και CSS: Visual QuickStart Guide (2006) από την Elizabeth Castro: εξηγεί όλα τα βασικά στοιχεία HTML και XHTML σε μια γλώσσα κατάλληλη για αρχάριους. Το βιβλίο έχει πολλά οπτικά παραδείγματα και περιλαμβάνει έναν συνοδευτικό ιστότοπο με επιπλέον υλικό, παραδείγματα, ενημερώσεις και άλλα.
        • HTML, XHTML και CSS For Dummies (2011) από τους Tittel and Noble: μια εισαγωγική αναφορά σε HTML, XHTML και CSS που σας διδάσκει πώς να δημιουργήσετε έγγραφα XHTML, εφαρμόστε αυτές τις αρχές σε δημοφιλή CMS όπως το WordPress και το Drupal και ο σχεδιασμός για κινητά συσκευές.
        • Ξεκινώντας τον Προγραμματισμό Ιστού με HTML, XHTML και CSS (2011) από τον Jon Duckett: σας διδάσκει πώς να γράφετε ιστοσελίδες χρησιμοποιώντας HTML, XHTML και CSS. Ακολουθεί τις αρχές που βασίζονται σε πρότυπα, αλλά επίσης διδάσκει στους αναγνώστες τρόπους αντιμετώπισης προβλημάτων που είναι πιθανό να αντιμετωπίσουν με τη χρήση (X) HTML.

        XHTML Σήμερα

        Το XHTML όπως δημιουργήθηκε για πρώτη φορά δεν αναπτύσσεται και συντηρείται πλέον ενεργά. Ο κύριος λόγος για την πτώση του από τη χάρη ήταν ο πολύ αυστηρός χειρισμός σφαλμάτων που έκανε τις ιστοσελίδες να σταματήσουν την απόδοση όταν παρουσιάστηκε ένα σφάλμα. Αυτό οδήγησε στη δημιουργία του Web Hypertext Application Technology Group (WHATWG) που άρχισε να εργάζεται σε HTML5. Συνέβαλαν στην τελική διάλυση της ομάδας εργασίας XHTML 2.0.

        Σήμερα, όλη η εργασία του W3C επικεντρώνεται στο HTML5 και σε μια σύνταξη XHTML, γνωστή ως XHTML5.1, η οποία ορίζεται παράλληλα με το HTML5 στο πρόχειρο HTML5.

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

        HTML5

        HTML5

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

        Ιστορία και εισαγωγή

        Εξετάσαμε το ιστορικό του HTML καθώς περνούσε από τις εκδόσεις 1 έως 4. Ωστόσο, το ιστορικό του HTML5 είναι ακόμη πιο ενδιαφέρον και σημαντικό.

        Ο δρόμος προς το HTML 5

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

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

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

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

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

        Το δεύτερο ήταν μια αυξανόμενη επιθυμία για πλούσιο, διαδραστικό περιεχόμενο που δεν υποστηρίζεται σε HTML. Αυτό οδήγησε σε ευρεία χρήση του Flash.

        Το 2004, οι Mozilla και Opera παρουσίασαν στο W3C ένα έγγραφο θέσεων που υποστηρίζει αυτό που αργότερα θα γίνει HTML5. Η νέα επανάληψη της γλώσσας θα υποστηρίξει νέες διαδραστικές λειτουργίες και εμπλουτισμένα μέσα, ενώ θα είναι συμβατή με τα προγράμματα περιήγησης ιστού που συμμορφώνονται με τα πρότυπα.

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

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

        Μια σταθερή "Σύσταση υποψηφίων" κυκλοφόρησε το 2012 και η πλήρως σταθερή σύσταση του W3C κυκλοφόρησε το 2014. Μέχρι τότε, όλα τα μεγάλα προγράμματα περιήγησης υποστήριζαν τα πιο κρίσιμα μέρη του προτύπου.

        Το πρότυπο HTML5 έχει τώρα δύο παράλληλα κομμάτια ανάπτυξης. Το W3C έχει έναν σταθερό κύκλο κυκλοφορίας με αυξητικούς αριθμούς έκδοσης - μια σειρά "στιγμιότυπων". Το WHATWG διατηρεί ένα εξελισσόμενο «βιοτικό επίπεδο» με νέες δυνατότητες που προστίθενται συνεχώς.

        Τι νέο υπάρχει στο HTML5?

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

        Σήμανση

        Οι αλλαγές στη σήμανση για HTML5 εμπίπτουν γενικά σε μερικές κατηγορίες.

        Σημασιολογία

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

        • .

        Άλλα σημασιολογικά στοιχεία που προστίθενται στο HTML5 περιλαμβάνουν:

        • και, που χρησιμοποιούνται για εικόνες και διαγράμματα.
        • που ορίζει κείμενο που επισημαίνεται ή επισημαίνεται ·
        • που ορίζει μια ώρα.

        Το HTML5 το καθιστά επίσης σαφές και θα πρέπει να προτιμάται έναντι και .

        ΠΟΛΥΜΕΣΑ

        Νέα στοιχεία προστέθηκαν στο HTML5 για υποστήριξη μέσων:

        • .

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

        Το HTML5 έχει επίσης ρητή υποστήριξη για Scalable Vector Graphics (SVG).

        Διαδραστικότητα

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

        • .

        Οι τύποι εισαγωγής περιλαμβάνουν τώρα: χρώμα, ημερομηνία, ώρα, τοπικό χρόνο, email, μήνα, αριθμό, εύρος, αναζήτηση, τηλ, ώρα, διεύθυνση URL και εβδομάδα.

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

        • ικανοποιημένος
        • κατάλογος συμφραζόμενων
        • δεδομένα-*
        • συρόμενη
        • σταγόνα
        • ορθογραφικός έλεγχος.
        Κανόνες Lexing και Parsing

        Εκτός από τις αλλαγές στον κατάλογο των διαθέσιμων στοιχείων, η σήμανση HTML5 υπόκειται σε ένα πολύ πιο αυστηρό και καλύτερα καθορισμένο σύνολο κανόνων lexing και ανάλυσης. Δεν είναι πλέον μια έκδοση XML ή SGML, αλλά μια πλήρως καθορισμένη γλώσσα σήμανσης από μόνη της.

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

        API προγράμματος περιήγησης και DOM

        Το HTML5 καθορίζει έναν αριθμό API JavaScript για αλληλεπίδραση με το DOM (Document Object Model - το περιεχόμενο της σελίδας) και με το πρόγραμμα περιήγησης. Αυτά περιλαμβάνουν:

        • Καμβάς, που αναφέρεται παραπάνω, για απόδοση γραφικών στη σελίδα.
        • Χρονική αναπαραγωγή πολυμέσων, για χρήση με και .
        • Έλεγχοι κατάστασης στο διαδίκτυο / εκτός σύνδεσης.
        • Εγγραφή χειριστή τύπου MIME και πρωτοκόλλου, η οποία επιτρέπει σε ένα πρόγραμμα περιήγησης να επιλέγει έναν ιστότοπο ως τον προεπιλεγμένο τρόπο χειρισμού ενός συγκεκριμένου τύπου αρχείου ή πρωτοκόλλου επικοινωνίας. Για παράδειγμα, επιτρέποντας σε μια εφαρμογή webmail να χειρίζεται mailto: συνδέσμους.
        • Μικροδεδομένα, τα οποία επιτρέπουν την ένθεση σημασιολογικών μεταδεδομένων ως χαρακτηριστικά.
        • Μηνύματα μεταξύ εγγράφων, που επιτρέπει σε δύο σελίδες από δύο διαφορετικές πηγές τομέα, να ανοίγουν σε δύο διαφορετικά περιβάλλοντα προγράμματος περιήγησης, να επικοινωνούν μεταξύ τους.
        • Web Storage, μια μόνιμη αποθήκευση δεδομένων ζευγών κλειδιών-τιμών παρόμοια με τα cookie, αλλά ευκολότερη στη χρήση και με μεγαλύτερη χωρητικότητα αποθήκευσης.

        Η επιτυχία του HTML5

        Η επιτυχία του HTML5 μπορεί να κριθεί σε δύο κατηγορίες:

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

        Και στις δύο περιπτώσεις, το HTML5 ήταν εξαιρετικά επιτυχημένο.

        Οι στόχοι του HTML5 ήταν:

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

        Αυτά έχουν επιτευχθεί σε μεγάλο βαθμό. Οι μηχανές απόδοσης και οι εφαρμογές JavaScript στα μεγάλα προγράμματα περιήγησης έχουν συγκλίνει στο σημείο ότι η επίσκεψη σε μια ιστοσελίδα θα παράγει μια συνεπή εμπειρία σε όλα τα προγράμματα περιήγησης.

        Η υποστήριξη για πολυμέσα, αποθήκευση προγράμματος περιήγησης και άλλες λειτουργίες που εστιάζουν στην εφαρμογή έχει εξαλείψει την ανάγκη για Flash και έχει προκαλέσει έκρηξη σε εγγενείς εφαρμογές ιστού HTML5.

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

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

        Ακόμη πιο συναρπαστική ήταν η χρήση του HTML5 εκτός του προγράμματος περιήγησης. Πλατφόρμες όπως το Electron για επιτραπέζιους υπολογιστές και το Phonegap για κινητά έχουν μετατρέψει το HTML5 (με CSS3 και JavaScript) σε μητρική γλώσσα εφαρμογής.

        Γενικοί πόροι HTML5

        • Η σύσταση HTML5 W3C και το πρότυπο διαβίωσης HTML WHATWG είναι οι δύο επίσημες πηγές που ορίζουν το HTML5.
        • Το W3C προσφέρει μια σειρά μαθημάτων κατάρτισης σε HTML5:
          • Εισαγωγή HTML5
          • HTML5 Μέρος 1: Βασικά και βέλτιστες πρακτικές κωδικοποίησης HTML5
          • HTML5 Μέρος 2: Προηγμένες τεχνικές για το σχεδιασμό εφαρμογών HTML5
        • Το Mozilla Developer Network προσφέρει μια ολοκληρωμένη αναφορά HTML5.

        Το HTML5 είναι το μέλλον

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

        Πόρος ήχου και βίντεο

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

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

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

        Για να ενσωματώσετε ήχο ή βίντεο, μπορείτε να χρησιμοποιήσετε το νέο και τα στοιχεία στο HTML5. Ακολουθεί ένα παράδειγμα:

        Αναβαθμίστε το πρόγραμμα περιήγησής σας.

        Παρακάτω, αναλύουμε κάθε στοιχείο με τα χαρακτηριστικά του.

        Ενσωμάτωση βίντεο

        Το HTML5 εισάγει ένα νέο στοιχείο, το οποίο καταργεί την ανάγκη για προσθήκες προγράμματος περιήγησης.

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

        Τα Στοιχεία Στοιχείου

        Μέσα στο στοιχείο, μπορείτε να καθορίσετε διάφορα χαρακτηριστικά:

        πλάτος ύψος

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

        Το πλάτος και το ύψος ενός βίντεο πρέπει να καθορίζονται σε pixel.

        έλεγχοι

        Το χαρακτηριστικό ελέγχου λέει στο πρόγραμμα περιήγησης να εμφανίζει ένα κουμπί αναπαραγωγής / παύσης και ένα ρυθμιστικό έντασης. Για να εμφανίσετε το βίντεο χωρίς χειριστήρια, παραλείψτε το χαρακτηριστικό.

        αυτόματη αναπαραγωγή

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

        Σε κινητές συσκευές, το χαρακτηριστικό αυτόματης αναπαραγωγής αγνοείται.

        Ενσωμάτωση ήχου

        Για να ενσωματώσετε ήχο, χρησιμοποιήστε το στοιχείο. Είναι πολύ παρόμοιο με το στοιχείο.

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

        Τα Στοιχεία Στοιχείου

        Μέσα στο στοιχείο, μπορείτε να καθορίσετε διάφορα χαρακτηριστικά:

        βρόχος

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

        έλεγχοι

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

        αυτόματη αναπαραγωγή

        Το χαρακτηριστικό αυτόματης αναπαραγωγής θα αναγκάσει τον ήχο να αρχίσει να παίζει αυτόματα. Για να ενσωματώσετε τον ήχο χωρίς αυτόματη αναπαραγωγή, απλώς παραλείψτε το χαρακτηριστικό.

        σε σίγαση

        Το χαρακτηριστικό σίγασης θα θέσει σε σίγαση την ένταση όταν φορτώνεται ο ήχος.

        προφόρτιση

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

        Το στοιχείο

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

        Για παράδειγμα:

        Το πρόγραμμα περιήγησής σας δεν υποστηρίζει την ετικέτα βίντεο.

        Τα Στοιχεία Στοιχείου

        Έχει τα ακόλουθα χαρακτηριστικά:

        src

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

        τύπος

        Ο τύπος MIME του αρχείου.

        Για βίντεο, αποδεκτές τιμές είναι βίντεο / mp4, βίντεο / webm και βίντεο / ogg. Για ήχο, αποδεκτές τιμές είναι ήχος / mpeg, ήχος / wav και ήχος / ogg.

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

        Για την καλύτερη πιθανότητα συμβατότητας μεταξύ προγραμμάτων περιήγησης, συνιστάται ο τύπος βίντεο / mp4 MIME για βίντεο και ο τύπος ήχου / mpeg Ο τύπος MIME είναι ο καλύτερος για τον ήχο. Για παράδειγμα, μπορείτε να καθορίσετε πολλά στοιχεία εάν θέλετε να παρέχετε μια έκδοση ogg και mp4 του ίδιου βίντεο.

        Το στοιχείο

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

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

        Τα Στοιχεία Στοιχείου

        Το στοιχείο έχει τα ακόλουθα χαρακτηριστικά:

        src

        Η διαδρομή προέλευσης και το όνομα αρχείου για το αρχείο κειμένου.

        είδος

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

        srclang

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

        Προκαθορισμένο

        Χρησιμοποιήστε το προεπιλεγμένο χαρακτηριστικό για να καθορίσετε ποια θα πρέπει να είναι η προεπιλεγμένη επιλογή.

        επιγραφή

        Δίνει ένα όνομα στο κομμάτι κειμένου.

        Πόροι ήχου και βίντεο

        • Η Mozilla έχει αναπτύξει αυτόν τον εξαιρετικό οδηγό, χρησιμοποιώντας ήχο και βίντεο HTML5. Θα σας μεταφέρει από απλή έως προχωρημένη χρήση.
        • Η Apple δημοσίευσε συγκεκριμένες οδηγίες για προγραμματιστές. Αξίζει να διαβάσετε αν αναπτύσσεστε για iOS ή Safari.
        • Η Microsoft έχει τη δική της καθοδήγηση για ήχο και βίντεο HTML5 στον Internet Explorer.

        Cache εφαρμογής

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

        Η εφαρμογή Cache (ή "AppCache") είναι μια δυνατότητα που επιτρέπει στους προγραμματιστές να καθορίζουν πόρους που πρέπει να προ-ληφθούν και να αποθηκευτούν τοπικά.

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

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

        Τούτου λεχθέντος, το AppCache εξακολουθεί να είναι χρησιμοποιήσιμο και ο μόνος τρόπος για να επιτύχετε ορισμένα εφέ.

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

        Εκπαιδευτικά προγράμματα Cache εφαρμογής

        • Ένας οδηγός για αρχάριους για τη χρήση της εφαρμογής Cache είναι ένας από τους καλύτερους εισαγωγικούς οδηγούς για το θέμα.
        • Η χρήση της εφαρμογής Cache είναι ένας τεχνικός οδηγός που εστιάζει στον προγραμματιστή από το Mozilla Developer Network.
        • Ας πάρουμε αυτό εκτός σύνδεσης είναι μια λεπτομερής, αφηγηματική εξήγηση του τρόπου χρήσης του AppCache.
        • Η χρήση της προσωρινής μνήμης εφαρμογών HTML5 σε εφαρμογές Web για κινητές συσκευές καλύπτει τη γενική χρήση του AppCache και διερευνά ειδικά θέματα κατά τη χρήση της κατά την ανάπτυξη εφαρμογών ιστού HTML5 για προγράμματα περιήγησης για κινητά.
        • Η χρήση της HTML Cache εφαρμογών για εφαρμογές μίας σελίδας περιγράφει λεπτομερώς τη χρήση του AppCache στο πλαίσιο μιας εφαρμογής Ember.js.
        • Tutorial: Πώς να δημιουργήσετε μια διαδικτυακή εφαρμογή HTML5 εκτός σύνδεσης χρησιμοποιεί το παράδειγμα ενός προγράμματος ανάγνωσης RSS για να εξηγήσει πώς να δημιουργήσετε μια εφαρμογή ιστού που λειτουργεί εκτός σύνδεσης. Ιδιαίτερο ενδιαφέρον εδώ είναι ο τρόπος με τον οποίο το AppCache χρησιμοποιείται σε συνεννόηση με πολλά άλλα καταστήματα δεδομένων HTML, όπως cookie, Local Storage και WebSQL.
        • Δημιουργία μιας απλής λίστας εκκρεμών εργασιών εκτός σύνδεσης με το IndexedDB και το WebSQL διερευνά τη δημιουργία μιας εφαρμογής λίστας πρώτων υποχρεώσεων εκτός σύνδεσης που λειτουργεί σε πολλά προγράμματα περιήγησης με διαφορετική υποστήριξη για δυνατότητες αποθήκευσης δεδομένων εκτός σύνδεσης. Η εφαρμογή Cache χρησιμοποιείται μαζί με το IndexedDB και το WebSQL.
        • Δημιουργία εφαρμογής εκτός σύνδεσης με HTML5 App Cache περιγράφει λεπτομερώς τη χρήση του AppCache, συμπεριλαμβανομένων αναλυτικών οδηγιών σχετικά με τον τρόπο δημιουργίας μιας δήλωσης και λεπτομερειών σχετικά με τη χρήση του .htaccess για την σωστή προβολή του αρχείου δήλωσης στο Apache.
        • Η δημιουργία HTML5 Offline Web Applications διερευνά τα σκαμπανεβάσματα πολλών τοπικών μεθόδων αποθήκευσης δεδομένων, συμπεριλαμβανομένου του AppCache.
        • Η προσθήκη της προσωρινής μνήμης εφαρμογών HTML5 για την επιτάχυνση της εφαρμογής Web σε 5 λεπτά είναι ένας σύντομος οδηγός που θα σας οδηγήσει γρήγορα στη χρήση του AppCache. Η εστίαση σε αυτό το σεμινάριο είναι η χρήση της προσωρινής αποθήκευσης για την επιτάχυνση της εμπειρίας του διαδικτυακού ιστότοπου και όχι η παροχή εμπειρίας εκτός σύνδεσης.
        • Εκτέλεση των διαδικτυακών εφαρμογών σας εκτός σύνδεσης με HTML5 Το AppCache καλύπτει τη δήλωση προσωρινής μνήμης και επίσης το API JavaScript, όπου περιγράφονται λεπτομερώς τα συμβάντα και οι ενέργειες που σχετίζονται με την προσωρινή μνήμη.
        • Τι είναι η προσωρινή μνήμη εφαρμογής; παρέχει μια επισκόπηση υψηλού επιπέδου του AppCache.
        • Δημιουργήστε μια εφαρμογή HTML5 εκτός σύνδεσης με την προσωρινή μνήμη εφαρμογών, το Web Storage και το ASP.NET Το MVC παρέχει μια λεπτομερή ματιά στον τρόπο λειτουργίας του AppCache, με πλήρη κάλυψη για τη σωστή δομή ενός αρχείου δήλωσης. Μετά από αυτήν τη γενική εξήγηση, το σεμινάριο συνεχίζει να δείχνει πώς να διαχειριστείτε αυτήν τη διαδικασία σε μια εφαρμογή ASP.NET.

        Πρόσθετο υλικό εκμάθησης προσωρινής μνήμης εφαρμογών

        • Βέλτιστες πρακτικές για μια ταχύτερη εφαρμογή Ιστού Με HTML5 αγγίζει μόνο την εφαρμογή Cache σε μία ενότητα, αλλά είναι πολύ χρήσιμο να κατανοήσουμε πώς χρησιμοποιείται η εφαρμογή Cache ως μέρος μιας μεγαλύτερης στρατηγικής απόδοσης.
        • Συμβουλές κατά τη χρήση της εφαρμογής Cache είναι μια λίστα βέλτιστων πρακτικών για την αντιμετώπιση ορισμένων από τα κοινά προβλήματα του AppCache.
        • Η διαγραφή μιας προσωρινής μνήμης εφαρμογών HTML εξηγεί πώς να διαγράψετε τον τοπικό χώρο αποθήκευσης προσωρινής μνήμης εφαρμογών σε πολλά προγράμματα περιήγησης. Αυτό είναι ιδιαίτερα χρήσιμο κατά τη διάρκεια της τοπικής ανάπτυξης και των δοκιμών, όταν τα αρχεία του έργου σας αλλάζουν γρηγορότερα από ότι το AppCache τα ανανεώνει.
        • Κοινές παγίδες που πρέπει να αποφεύγετε κατά τη χρήση της εφαρμογής HTML5 Η προσωρινή μνήμη καλύπτει ορισμένα από τα πιο κοινά προβλήματα του AppCache και εξηγεί πώς να τα ξεπεράσετε.
        • Το Application Cache is a Douchebag είναι ένα αστείο, αλλά πάρα πολύ ακριβές, φταίει για τις δυσκολίες εργασίας με το Application Cache. Αυτό το δοκίμιο ήταν ένα στιγμιότυπο κλασικό μεταξύ προγραμματιστών front-end και απαιτείται σίγουρα ανάγνωση για όσους ενδιαφέρονται για το AppCache.

        Αναφορά προσωρινής μνήμης εφαρμογής

        • Μπορώ να χρησιμοποιήσω την εφαρμογή Cache; σας δίνει μια γρήγορη επισκόπηση των προγραμμάτων περιήγησης που υποστηρίζουν AppCache.

        Εργαλεία για εργασία με την προσωρινή μνήμη εφαρμογών

        • Το Cache Manifest Validator είναι ένα διαδικτυακό εργαλείο για την επικύρωση των αρχείων AppCache Manifest.
        • Η βιβλιοθήκη υποστήριξης GWT AppCache είναι μια ενότητα για το Google Web Toolkit που αυτοματοποιεί τη δημιουργία αρχείων δήλωσης Appcache.
        • Το Appcache-Manifest είναι ένα εργαλείο Node.js για τη δημιουργία αρχείων Manifest εφαρμογής Cache από τη γραμμή εντολών. Το εργαλείο περιλαμβάνει τον κατακερματισμό MD5 των αρχείων δήλωσης, διασφαλίζοντας ότι τα ενημερωμένα αρχεία αλλάζουν αυτόματα το μανιφέστο, προκαλώντας σωστή ακύρωση προσωρινής μνήμης στον υπολογιστή-πελάτη.
        • Το CacheMan είναι μια εφαρμογή για επιτραπέζιους υπολογιστές που χειρίζεται τη δημιουργία Manifest Cache.

        Μετακίνηση προς τα εμπρός με την εφαρμογή Cache

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

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

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

        Προς το παρόν, χρησιμοποιήστε το AppCache, αλλά προετοιμαστείτε για το Service Workers.

        Παιχνίδια, γραφικά και κινούμενα σχέδια

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

        • Ένα στοιχείο καμβά είναι ένας χώρος bitmap όπου μπορείτε να σχεδιάσετε και να χειριστείτε ραστεροποιημένες εικόνες με βάση pixel-by-pixel.
        • Ένα SVG είναι κωδικός που περιγράφει ένα διανυσματικό γραφικό ανεξάρτητο από την ανάλυση.

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

        SVG εναντίον καμβά

        Πρώτα απ 'όλα, το SVG δεν αποτελεί μέρος της προδιαγραφής HTML5, ενώ ο καμβάς είναι. Το SVG είναι μια γλώσσα που χρησιμοποιείται για την περιγραφή δισδιάστατων γραφικών. Είναι ένα αυτόνομο διαδικτυακό πρότυπο που μπορεί να ενσωματωθεί σε έγγραφα HTML και XML.

        Όταν ενσωματώνεται σε ένα έγγραφο HTML, το SVG χρησιμοποιεί μια σύνταξη που ταιριάζει με τη σύνταξη HTML5, οδηγώντας έτσι ορισμένους να υποθέσουν λανθασμένα ότι το SVG είναι ένα στοιχείο HTML.

        Τα στοιχεία καμβά SVG και HTML5 αποδίδονται πολύ διαφορετικά από τα προγράμματα περιήγησης:

        • Τα στοιχεία του καμβά αποδίδονται «εν κινήσει». Αυτό σημαίνει ότι τα στοιχεία καμβά σχεδιάζονται σε πραγματικό χρόνο καθώς υποβάλλονται σε επεξεργασία από το πρόγραμμα περιήγησης.
        • Το SVG δεν σχεδιάζεται αμέσως. Όταν ένα πρόγραμμα περιήγησης συναντά ένα SVG δημιουργεί πρώτα ένα DOM για το SVG και στη συνέχεια αποδίδει το DOM.

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

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

        Από την άλλη πλευρά, εάν θέλετε να κάνετε μια μικρή αλλαγή σε ένα SVG, μπορείτε να διασχίσετε το DOM και να κάνετε την αλλαγή, ενώ ένα ολόκληρο στοιχείο καμβά πρέπει να επανασχεδιαστεί για να κάνετε οποιαδήποτε αλλαγή.

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

        Πότε να χρησιμοποιείτε SVG και καμβά

        Όλα αυτά προκαλούν την ερώτηση: πότε πρέπει να χρησιμοποιούνται τα SVG και τα στοιχεία καμβά; Ενώ υπάρχει κάποιο crossover στην εφαρμογή αυτών των εργαλείων, γενικά, ακολουθήστε αυτές τις οδηγίες:

        • Χρησιμοποιήστε SVG για κινούμενες εικόνες και γραφικά τέλεια pixel που πρέπει να φαίνονται ευκρινείς σε συσκευές οποιουδήποτε μεγέθους.
        • Χρησιμοποιήστε SVGs εάν πρέπει να αποφύγετε τη χρήση JavaScript ή εάν η προσβασιμότητα του περιεχομένου κινουμένων σχεδίων είναι κρίσιμη.
        • Χρησιμοποιήστε τον καμβά HTML5 για να δημιουργήσετε σύνθετα κινούμενα σχέδια και παιχνίδια που ενσωματώνουν μεγάλη εισροή χρηστών.

        Αν θέλετε να μάθετε περισσότερα σχετικά με τη χρήση SVG, ρίξτε μια ματιά στο άρθρο μας που συγκρίνει SVG και SWF που περιλαμβάνει μια λίστα πόρων SVG. Για να μάθετε περισσότερα σχετικά με το στοιχείο καμβά HTML5, διαβάστε παρακάτω.

        Πόροι καμβά

        Ας ξεκινήσουμε με τα βασικά:

        • Mozilla Developer Network Canvas Tutorial: αυτό το σεμινάριο ξεκινά με βασική χρήση και προχωρά για να καλύψει σχέδια σχήματος, κείμενο, χρησιμοποιώντας εικόνες, δημιουργώντας μετασχηματισμούς και κινούμενα σχέδια, χειρισμό pixel και πολλά άλλα. Μέχρι το τέλος αυτού του σεμιναρίου θα έχετε δημιουργήσει προηγμένες κινούμενες εικόνες, ένα πανόραμα συνεχούς μετακίνησης και μια εφαρμογή επιλογής χρωμάτων.
        • Dev.Opera HTML5 Canvas - τα βασικά: αυτή η λεπτομερής εισαγωγή στον καμβά καλύπτει τεχνικές σχεδίασης, εργασία με εικόνες, χειρισμό με βάση pixel, καθώς και κείμενο, σκιές και ντεγκραντέ.
        • W3Schools Canvas Tutorial: Μάθετε τα βασικά της σχεδίασης, εργασίας με συντεταγμένες, κλίσεις, κείμενο σχεδίασης και εργασία με εικόνες. Στη συνέχεια, εφαρμόστε ό, τι έχετε μάθει δημιουργώντας ένα ρολόι καμβά. Τέλος, βάλτε τα όλα μαζί και δημιουργήστε μερικά διαφορετικά βασικά παιχνίδια HTML5.
        • Eloquent JavaScript, Κεφάλαιο 16: Σχέδιο σε καμβά: αυτό το κείμενο έχει σχεδιαστεί για να εκπαιδεύσει προγραμματιστές JavaScript, όχι μόνο για να διδάξει στους προγραμματιστές ιστού απλά κόλπα. Αυτό το ολόκληρο διαδραστικό ebook είναι ένα χρυσωρυχείο, αλλά αν η εστίασή σας είναι ακριβώς στην εκμάθηση του τρόπου εργασίας με το στοιχείο καμβά, το κεφάλαιο 16 θα παρέχει μια σταθερή βάση για τον τρόπο με τον οποίο αλληλεπιδρούν το JavaScript και το στοιχείο καμβά HTML.

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

        • Creative JS 31 Days of Canvas Tutorials: κυριαρχήστε το στοιχείο καμβά σε ένα μήνα (περισσότερο ή λιγότερο). Ολοκληρώστε αυτήν τη σειρά και θα έχετε μάθει πολλές προηγμένες τεχνικές κινούμενης εικόνας σε καμβά.
        • HTML5 Rocks Case Studie: Building Racer: ρίξτε μια ματιά σε αυτή τη μελέτη περίπτωσης και θα δείτε πώς λειτουργούν οι επαγγελματίες μηχανικοί στο Google με JavaScript και καμβά.

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

        • CSS-Tricks Learning Canvas: Making a Snake Game: Το CSS-Tricks είναι γνωστό ότι παρέχει τεχνικά άριστα σεμινάρια και άρθρα. Ακολουθήστε αυτό το σεμινάριο και δημιουργήστε ένα διασκεδαστικό παιχνίδι με φίδι, ενώ ταυτόχρονα μαθαίνετε πώς να εργάζεστε με καμβά από έναν μηχανικό front-end στο Twitter.
        • Οδηγός HTML5 Rocks No Tears για παιχνίδια HTML5: αυτό το σεμινάριο θα σας καθοδηγήσει βήμα προς βήμα στη διαδικασία δημιουργίας ενός απλού παιχνιδιού εισβολέα χώρου.
        • Envato Tuts + Δημιουργήστε ένα παζλ ανταλλαγής πλακιδίων καμβά HTML5: μάθετε πώς να χρησιμοποιείτε καμβά και JavaScript για να δημιουργήσετε ένα παζλ ανταλλαγής πλακιδίων σε αυτό το σεμινάριο. Το αποτέλεσμα θα είναι μια απλή εφαρμογή με ρυθμιζόμενη δυσκολία που μπορείτε να χρησιμοποιήσετε με οποιαδήποτε εικόνα.
        • Dev.Opera Δημιουργία Ψευδών 3D Παιχνιδιών με HTML 5 Canvas and Raycasting: αυτό το σεμινάριο θα σας δείξει πώς να δημιουργήσετε έναν ψευδο 3D χάρτη παιχνιδιών με HTML5 και καμβά στο στυλ του θρυλικού παιχνιδιού Wolfenstein 3D στις αρχές της δεκαετίας του '90. Ενώ αυτό το σεμινάριο δεν θα παράγει ένα λειτουργικό παιχνίδι 3D shooter πρώτου προσώπου, θα μάθετε πώς να παράγετε έναν απαιτητικό χάρτη 3D με στηρίγματα και φρουρούς.

        Δεν υπάρχει καλύτερος τρόπος για να αναπτύξετε την κυριότητα ενός θέματος από το να επεξεργαστείτε ένα ή δύο σε βάθος κείμενα. Εδώ είναι τρία από τα καλύτερα κείμενα καμβά HTML5 που διατίθενται σήμερα:

        • HTML5 Canvas (2013) των Fulton και Fulton: μάθετε να δημιουργείτε διαδραστικές εφαρμογές πολυμέσων στο διαδίκτυο με καμβά και JavaScript. Αυτό το κείμενο καλύπτει απλά σχέδια 2D, τη χρήση αλγορίθμων για την ανάπτυξη κίνησης που βασίζεται σε μαθηματικά, τη χρήση βίντεο και εικόνων, καθιστώντας τις εφαρμογές καμβά ανταποκρινόμενες και πολλά άλλα.
        • Υπερφορτισμένα γραφικά JavaScript: με καμβά HTML5, jQuery και περισσότερα (2011) από τον Raffaele Cecco: αυτό το προηγμένο κείμενο θα σας βοηθήσει να κυριαρχήσετε τον καμβά HTML5 και να ενσωματώσετε προηγμένες τεχνικές όπως ανίχνευση σύγκρουσης, χειρισμός αντικειμένων, ομαλή κύλιση και εργαλεία οπτικοποίησης δεδομένων Google.
        • Core HTML5 Canvas: Graphics, Animation and Game Development (2011) του David Geary: αυτό δεν είναι κείμενο για αρχάριους. Έχει σχεδιαστεί για να διαβάζεται από έμπειρους προγραμματιστές που έχουν κατανόηση JavaScript σε ενδιάμεσο επίπεδο. Ενώ αυτό το κείμενο καλύπτει τα βασικά στοιχεία του καμβά, επικεντρώνεται σε προηγμένα θέματα, όπως ανάπτυξη παιχνιδιών, προσαρμοσμένα στοιχεία ελέγχου εφαρμογών, εφαρμογή φυσικής σε παιχνίδια HTML5 και ανάπτυξη εφαρμογών για κινητά.

        Διαδραστικά στοιχεία

        Το HTML5 έχει προσθέσει μερικά χαρακτηριστικά για να διευκολύνει τη δημιουργία διαδραστικών ιστοσελίδων.

        Λεπτομέρειες και ετικέτες περίληψης

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

          και
        • ετικέτες, αυτές είναι στατικές και δεν μπορούν να συμπτυχθούν.
          Στοιχείο

          Για να παρέχουν ένα σημείο εκκίνησης για τη λίστα, οι προγραμματιστές πρέπει να ξεκινήσουν με το στοιχείο. Αυτό το στοιχείο λειτουργεί παρόμοια με το

            ετικέτα. Το παρακάτω παράδειγμα δείχνει έναν τρόπο για να ξεκινήσετε ένα τμήμα κώδικα με αυτήν την ετικέτα:

            ...

            Η προσθήκη των ετικετών λεπτομερειών δεν αρκεί για την ολοκλήρωση της λίστας. Περίληψη ετικετών έπρεπε επίσης να προστεθούν.

            Στοιχείο

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

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

            ή

              . Το παρακάτω είναι ένα απλό παράδειγμα της χρήσης των ετικετών και:

              Λίστα ετικετών

              Λεπτομέρειες πληροφορίες πηγαίνουν εδώ...

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

              Ακολουθεί ένα παράδειγμα μιας λίστας σε μια άλλη λίστα που χρησιμοποιεί τις ετικέτες και:

              Λίστα αντικειμένων

              Θέμα 1

              Θέμα 2

              Θέμα 3

              Στοιχείο α

              Στοιχείο β

              Θέμα 4

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

              Η συνοπτική ετικέτα θα περιέχει την ερώτηση ενώ το πτυσσόμενο περιεχόμενο θα συμπληρώνεται με την απάντηση.

              Ετικέτες μενού και μενού

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

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

              Οι ετικέτες που το καθιστούν δυνατό είναι οι ετικέτες και. Δεδομένου ότι πρόκειται για πειραματικές ετικέτες, δεν υποστηρίζονται ευρέως. Ο Firefox είναι το μόνο σημαντικό πρόγραμμα περιήγησης που τα υποστηρίζει αυτήν τη στιγμή.

              Στοιχείο

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

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

              ...

              Σε αυτήν την περίπτωση, στοιχεία του προσαρμοσμένου μενού θα εμφανιστούν όταν ο χρήστης κάνει δεξί κλικ στο κουμπί του ποντικιού στο "tmpDiv." Όπως οι περισσότερες ετικέτες HTML5, η ετικέτα μενού έχει επίσης χαρακτηριστικά που ονομάζονται ετικέτα και τύπος.

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

              Στοιχείο

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

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

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

              Οι ενέργειες που κάνει το χαρακτηριστικό onclick θα μπορούσαν να εκτελέσουν κώδικα javascript. Για παράδειγμα, οι χρήστες θα μπορούσαν να δουν ένα πλαίσιο ειδοποίησης. Ακολουθεί ένα παράδειγμα για το πώς να ρυθμίσετε μια ετικέτα μενού που θα εμφανίζει ένα αναδυόμενο παράθυρο που λέει "γεια":

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

              Εγγενής μεταφορά και απόθεση

              Πριν από το HTLM5, οι προγραμματιστές έπρεπε να χρησιμοποιήσουν βιβλιοθήκες JavaScript όπως το jQuery UI ή το Dojo για να προσθέσουν κινούμενα σχέδια μεταφοράς και απόθεσης σε ιστότοπους και εφαρμογές.

              Ωστόσο, το HTML5 προσθέτει υποστήριξη εγγενών προγραμμάτων περιήγησης για συμβάντα μεταφοράς και απόθεσης, API JavaScript και ειδική σήμανση για την υποστήριξη αυτών των αλληλεπιδράσεων. Σε αυτήν την ενότητα, θα ρίξουμε μια ματιά στο drag and drop στο HTML5 και θα κωδικοποιήσουμε μια βασική εφαρμογή αυτής της δυνατότητας.

              Δομικά στοιχεία

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

              • Ένα στοιχείο προέλευσης: το στοιχείο που πρέπει να σύρετε, ορίζεται ως τέτοιο από το χαρακτηριστικό HTML5 draggable ="αληθής".
              • Στοιχείο στόχος: το στοιχείο στο οποίο θα πέσει το συρόμενο στοιχείο, το οποίο θα ορίζεται ως τέτοιο από το χαρακτηριστικό HTML5 droppable ="αληθής".
              • Ωφέλιμο φορτίο: τα δεδομένα που θα μεταφερθούν όταν πέσει ένα συρόμενο στοιχείο.

              Μεταφορά και απόθεση API συμβάντα

              Το JavaScript API περιλαμβάνει έξι συμβάντα και ένα αντικείμενο που θα πρέπει να χρησιμοποιήσετε για να δημιουργήσετε μια αλληλεπίδραση μεταφοράς και απόθεσης.

              • Το συμβάν dragstart ενεργοποιείται όταν επιλέγεται ένα draggable αντικείμενο.
              • Το συμβάν dragenter ενεργοποιείται όταν ο δείκτης του ποντικιού εισέρχεται σε ένα droppable αντικείμενο ενώ επιλέγεται ένα draggable αντικείμενο.
              • Το συμβάν dragover ενεργοποιείται κάθε φορά που το ποντίκι κινείται ενώ επιλέγεται ένα draggable αντικείμενο και ο δείκτης του ποντικιού βρίσκεται πάνω από ένα droppable αντικείμενο.
              • Το συμβάν dragleave ενεργοποιείται όταν έχει επιλεγεί ένα draggable αντικείμενο και ο δείκτης του ποντικιού αφήνει ένα droppable αντικείμενο.
              • Το συμβάν dragend ενεργοποιείται όταν αποσύρεται ένα draggable αντικείμενο απελευθερώνοντας το κουμπί του ποντικιού ή αφήνοντας το παράθυρο του προγράμματος περιήγησης.
              • Το συμβάν πτώσης ενεργοποιείται όταν ένα draggable αντικείμενο πέσει πάνω σε ένα droppable αντικείμενο.
              • Το αντικείμενο dataTransfer χρησιμοποιείται για τη συγκράτηση των συρόμενων δεδομένων.

              Παράδειγμα μεταφοράς και απόθεσης

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

              Το άρθρο που χρησίμευσε ως έμπνευση για αυτό το παράδειγμα είναι το HTML5 Rocks: Native HTML5 Drag and Drop.

              Ας ξεκινήσουμε με το HTML

              Αγαπημένη εφαρμογή DnD
              HTML51
              jQuery UI2
              Ντότζο

              Έχουμε δημιουργήσει τρία div, το καθένα περιέχει λίγο κείμενο που σχετίζεται με μια διαφορετική μεταφορά και απόθεση. Έχουμε επίσης προχωρήσει και τακτοποιήσαμε και τα τρία με προεπιλεγμένη σειρά με εκχωρημένη προτίμηση 1, 2 και 3.

              Σε κάθε div έχει δοθεί ένα χαρακτηριστικό droppable ="αληθής" και draggable ="αληθής" για να αντικατοπτρίσουμε το γεγονός ότι θα κάνουμε και τα τρία να ανταλλάσσονται μεταξύ τους.

              Ας προσθέσουμε κάποια βασικά στυλ.

              # κουτιά {
              text-align: center;
              πλάτος: 100%;
              μέγιστο πλάτος: 658 εικονοστοιχεία;
              περιθώριο: 0 αυτόματη;
              περιθώριο: 0 αυτόματη;
              font-family: 'Source Sans Pro', FreeSans, Arimo,"Droid Sans",Helvetica, Arial, sans-serif;
              υπερχείλιση: αυτόματη;
              }
              .τίτλος {
              οθόνη: μπλοκ;
              μέγεθος γραμματοσειράς: 1,25em;
              επένδυση: 10px;
              }
              .κουτί {
              χρώμα φόντου: # bcd5e0;
              περίγραμμα: 2px στερεό #aaa;
              περιθώριο: 10px;
              δρομέας: μετακίνηση;
              υπερχείλιση: αυτόματη;
              }
              .πλαίσιο .dnd-tech {
              μέγεθος γραμματοσειράς: 1em;
              οθόνη: inline-block;
              επένδυση: 10px 0;
              }
              .πλαίσιο. θέση {
              μέγεθος γραμματοσειράς: 1em;
              float: αριστερά
              επένδυση: 10px;
              περίγραμμα-δεξιά: 2px στερεό #aaa;
              χρώμα: #fff;
              χρώμα φόντου: # 0a5194;
              }

              Παρόλο που δεν θα ξεπεράσουμε αυτά τα στιλ κατά γραμμή, στην ουσία, αυτό που κάναμε είναι να τακτοποιήσουμε τα κουτιά δίπλα-δίπλα και να εφαρμόσουμε κάποιο στυλ σε όλη τη διάρκεια. Δείτε πώς φαίνονται τα κουτιά μας αυτήν τη στιγμή:

              Μεταφορά και απόθεση

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

              .box.dragged {
              αδιαφάνεια: .5;
              }
              .box.over {
              περίγραμμα: 2px διακεκομμένη # 222;
              αδιαφάνεια: .5;
              }

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

              συνάρτηση dragStartHandler (e) {
              this.classList.add («dragged»);
              }

              συνάρτηση dragEnterHandler (e) {
              this.classList.add ('πάνω');
              }

              συνάρτηση dragLeaveHandler (e) {
              this.classList.remove ('πάνω');
              }

              συνάρτηση dragEndHandler (e) {
              [] .forEach.call (κουτιά, λειτουργία (κουτί) {
              box.classList.remove ('over', 'dragged');
              });
              }
              var kotak = document.querySelectorAll ('# box .box');

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

              Η πρώτη συνάρτηση, dragStartHandler, θα προσθέσει την συρμένη κλάση στο συρμένο στοιχείο.

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

              Η τελική συνάρτηση επαναλαμβάνει όλα τα πλαίσια και αφαιρεί τις τάξεις over και drag.

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

              συνάρτηση dragOverHandler (e) {
              εάν (e.preventDefault) {
              e.preventDefault ();
              }
              επιστροφή ψευδής?
              }

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

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

              συνάρτηση dragStartHandler (e) {
              this.classList.add («dragged»);

              dragData = αυτό;
              e.dataTransfer.setData ('text / html', this.firstElementChild.innerHTML);
              }

              συνάρτηση dropHandler (ε) {
              εάν (e.stopPropagation) {
              e.stopPropagation ();
              }
              αν (dragData! = αυτό) {
              dragData.firstElementChild.innerHTML = this.firstElementChild.innerHTML;
              this.firstElementChild.innerHTML = e.dataTransfer.getData ('κείμενο / html');
              }
              επιστροφή ψευδής?
              }

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

              Το δεύτερο χρησιμοποιεί τη μέθοδο setData του αντικειμένου dataTransfer για να αντιστοιχίσει το εσωτερικό HTML του πρώτου θυγατρικού στοιχείου του επιλεγμένου πλαισίου (το στοιχείο Όνομα) στο αντικείμενο dataTransfer.

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

              Έτσι, τώρα έχουμε όλες τις λειτουργίες μας σε θέση, και πρέπει να τις συνδέσουμε με τα έξι γεγονότα drag and drop DOM. Μπορούμε να το κάνουμε με μία μόνο λειτουργία για κάθε.

              [] .forEach.call (κουτιά, λειτουργία (κουτί) {
              box.addEventListener («dragstart», dragStartHandler, false);
              box.addEventListener («dragenter», dragEnterHandler, false);
              box.addEventListener («dragover», dragOverHandler, false);
              box.addEventListener («dragleave», dragLeaveHandler, false);
              box.addEventListener ('drop', dropHandler, false);
              box.addEventListener («dragend», dragEndHandler, false);
              });

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

              # κουτιά {
              text-align: center;
              πλάτος: 100%;
              μέγιστο πλάτος: 658 εικονοστοιχεία;
              περιθώριο: 0 αυτόματη;
              font-family: «Source Sans Pro», FreeSans, Arimo, «Droid Sans», Helvetica, Arial, sans-serif;
              υπερχείλιση: αυτόματη;
              }
              .τίτλος {
              οθόνη: μπλοκ;
              μέγεθος γραμματοσειράς: 1,25em;
              επένδυση: 10px;
              }
              .κουτί {
              χρώμα φόντου: # bcd5e0;
              περίγραμμα: 2px στερεό #aaa;
              περιθώριο: 10px;
              δρομέας: μετακίνηση;
              υπερχείλιση: αυτόματη;
              }
              .πλαίσιο .dnd-tech {
              μέγεθος γραμματοσειράς: 1em;
              οθόνη: inline-block;
              επένδυση: 10px 0;
              }
              .πλαίσιο. θέση {
              μέγεθος γραμματοσειράς: 1em;
              float: αριστερά
              επένδυση: 10px;
              περίγραμμα-δεξιά: 2px στερεό #aaa;
              χρώμα: #fff;
              χρώμα φόντου: # 0a5194;
              }
              .box.dragged {
              αδιαφάνεια: .5;
              }
              .box.over {
              περίγραμμα: 2px διακεκομμένη # 222;
              αδιαφάνεια: .5;
              }

              Αγαπημένη εφαρμογή DnD

              HTML51
              jQuery UI2
              Ντότζο

              συνάρτηση dragStartHandler (e) {
              this.classList.add («dragged»);

              dragData = αυτό;
              e.dataTransfer.setData («κείμενο / html», this.firstElementChild.innerHTML);

              }

              συνάρτηση dragEnterHandler (e) {
              this.classList.add («πάνω»);
              }

              συνάρτηση dragLeaveHandler (e) {
              this.classList.remove («πάνω»);
              }

              συνάρτηση dragOverHandler (e) {
              εάν (e.preventDefault) {
              e.preventDefault ();
              }
              επιστροφή ψευδής?
              }

              συνάρτηση dropHandler (ε) {
              εάν (e.stopPropagation) {
              e.stopPropagation ();
              }
              αν (dragData! = αυτό) {
              dragData.firstElementChild.innerHTML = this.firstElementChild.innerHTML;
              this.firstElementChild.innerHTML = e.dataTransfer.getData («κείμενο / html»);
              }
              επιστροφή ψευδής?
              }

              συνάρτηση dragEndHandler (e) {
              [] .forEach.call (κουτιά, λειτουργία (κουτί) {
              box.classList.remove ("over", "dragged");
              });
              }

              var kotak = document.querySelectorAll («# boxes .box»);
              [] .forEach.call (κουτιά, λειτουργία (κουτί) {
              box.addEventListener («dragstart», dragStartHandler, false);
              box.addEventListener («dragenter», dragEnterHandler, false);
              box.addEventListener («dragover», dragOverHandler, false);
              box.addEventListener («dragleave», dragLeaveHandler, false);
              box.addEventListener («drop», dropHandler, false);
              box.addEventListener («dragend», dragEndHandler, false);
              });

              Τι περιμένεις?

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

              Iframe

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

              Σε ποιες περιπτώσεις χρησιμοποιούνται τα Iframe?

              Μία από τις πιο κοινές χρήσεις για iframe στον σύγχρονο ιστό είναι η ενσωμάτωση ροής πολυμέσων σε μια ιστοσελίδα. Ιστότοποι ροής πολυμέσων όπως Spotify, Vimeo και YouTube χρησιμοποιούν iframes για να επιτρέψουν την ενσωμάτωση του περιεχομένου τους σε άλλους ιστότοπους.

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

              Προσθέστε αυτό το κομμάτι κώδικα σε μια ιστοσελίδα και ένα iframe θα χρησιμοποιηθεί για τη φόρτωση του βίντεο YouTube που φιλοξενείται στη διεύθυνση URL που αναφέρεται από το χαρακτηριστικό src.

              Η ροή πολυμέσων δεν είναι το μόνο πράγμα που τα iframe είναι καλά. Ένας άλλος τρόπος με τον οποίο χρησιμοποιούνται τα iframe είναι η απομόνωση περιεχομένου από την υπόλοιπη ιστοσελίδα. Ακολουθούν δύο παραδείγματα:

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

              Το HTML 4.01 Iframe

              Το στοιχείο iframe εισήχθη στο HTML 4.01 και περιλαμβάνει τέσσερα κύρια χαρακτηριστικά:

              • src: καθορίζει τη διεύθυνση URL του εγγράφου HTML που θα αποδίδεται στο iframe.
              • πλάτος και ύψος: υποδεικνύει το μέγεθος του iframe σε pixel.
              • name: επιτρέπει στο iframe να μπορεί να στοχευτεί με στοιχεία a, form, button ή input.

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

              Τα χαρακτηριστικά Iframe καταργήθηκαν από HTML5

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

              • Το χαρακτηριστικό align καταργήθηκε υπέρ της χρήσης των ιδιοτήτων float, display και margin CSS για τον έλεγχο της διάταξης iframe.
              • Το χαρακτηριστικό frameborder καταργήθηκε υπέρ των συνόρων CSS.
              • Τα χαρακτηριστικά marginheight και marginwidth καταργήθηκαν υπέρ του CSS padding.
              • Το χαρακτηριστικό κύλισης καταργήθηκε υπέρ της εφαρμογής υπερχείλισης: κρυφό; για να αποκρύψετε γραμμές κύλισης iframe.

              Ένα επιπλέον χαρακτηριστικό, το longdesc, υπέστη εκτεταμένη κατάχρηση. Ως αποτέλεσμα, είναι πλέον ξεπερασμένο.

              Ιδιότητες Iframe Προστέθηκε από HTML5

              Το HTML5 πρόσθεσε δύο νέα χαρακτηριστικά στο στοιχείο iframe: sandbox και srcdoc.

              Το χαρακτηριστικό sandbox χρησιμοποιείται για τον περιορισμό των δυνατοτήτων του περιεχομένου iframe.

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

              Για παράδειγμα, sandbox ="επιτρεπόμενα έντυπα" θα επιτρέψει την υποβολή εντύπων σε ένα iframe. Οι πρόσθετες τιμές για αυτό το χαρακτηριστικό περιλαμβάνουν, αλλά δεν περιορίζονται σε, allow-popups, allow-same-origin, allow-scripts και allow-top-navigation.

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

              Πόροι Iframe

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

              Μικροδεδομένα

              Όταν επισκέπτεστε τις κριτικές φιλοξενίας μας, μπορεί να δείτε κάτι σαν "752 κριτικές" και "4 out 5 stars". Ενστικτωδώς, καταλαβαίνετε ότι 752 κριτικές χρηστών συνδυάστηκαν για να δημιουργήσουν μια συνολική βαθμολογία φιλοξενίας 4 στα 5 αστέρια.

              Ωστόσο, οι μηχανές αναζήτησης δεν είναι τόσο έξυπνες όσο εσείς, και εκεί έρχονται τα μικροδεδομένα.

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

              Βασικά στοιχεία μικροδεδομένων

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

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

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

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

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

              Σήμανση μικροδεδομένων

              Υπάρχουν τέσσερα χαρακτηριστικά μικροδεδομένων που αποτελούν μέρος της προδιαγραφής HTML5:

              • itemscope είναι το χαρακτηριστικό που δημιουργεί ένα νέο στοιχείο.
              • itemtype προστίθεται παράλληλα με το itemcope για να καθορίσει τον τύπο του αντικειμένου που δημιουργείται. Στις περισσότερες περιπτώσεις, χρησιμοποιείται ένας τύπος είδους schema.org.
              • Το itemprop προστίθεται σε κάθε στοιχείο που περιέχει μια ιδιότητα του τύπου.
              • Το itemref προστίθεται στο στοιχείο itemcope και συσχετίζει στοιχεία που δεν είναι απευθείας απόγονοι του στοιχείου itemcope με το στοιχείο.

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

              Super Linux Hosting

              Βαθμολογήθηκε:
              4 στα 5 αστέρια από
              423 πραγματικές κριτικές χρηστών.

              Επιλεγμένη κριτική χρήστη

              Αυτός είναι ένας υπέροχος οικοδεσπότης! τους αγαπώ!
              5 στα 5 αστέρια!

              Ο παραπάνω κώδικας δημιουργεί ένα στοιχείο που περιέχει έναν αριθμό ζευγών ονομάτων-τιμών:

              • Αρχικά, δημιουργήσαμε ένα εταιρικό στοιχείο.
              • Το όνομα του στοιχείου έχει οριστεί σε Super Linux Hosting.
              • Η διεύθυνση URL του στοιχείου έχει οριστεί σε http://superlinuxhosting.com
              • Η κριτική συγκεντρωτικού στοιχείου είναι ένα ένθετο στοιχείο που περιέχει δύο ζεύγη τιμών-τιμών: μια βαθμολογία 4 από 5 αστέρια και έναν αριθμό κριτικών 423.
              • Τέλος, μέσω του χαρακτηριστικού itemref που προστέθηκε στο πρώτο στοιχείο, το ζεύγος τελευταίου ονόματος-τιμής είναι μια κριτική που η τιμή περιλαμβάνει δύο ζεύγη ονομάτων-τιμών: μια περιγραφή και μια βαθμολογία 5 από 5 αστέρια.

              Με την παρουσία των μικροδεδομένων, το Google και άλλες μηχανές αναζήτησης θα ευρετηριάσουν τις πληροφορίες και θα αναγνωρίσουν την εταιρεία Super Linux Hosting και τη σχετική συνολική βαθμολογία και ατομική κριτική.

              Πόροι μικροδεδομένων

              Αν θέλετε να μάθετε περισσότερα για τα μικροδεδομένα, υπάρχουν δύο μέρη που πρέπει να πάτε:

              • Ξεκινώντας με το Schema.org Η χρήση μικροδεδομένων είναι μια εύκολη στην παρακολούθηση εισαγωγή αυτού του θέματος. Επιπλέον, θα θέλετε να διατηρήσετε αυτή τη λίστα όλων των τύπων στοιχείων schema.org εύχρηστη.
              • HTML: Το βιοτικό επίπεδο, Τμήμα 5 Τα μικροδεδομένα είναι μια τεχνική ματιά στα μικροδεδομένα. Εάν θέλετε να μάθετε να χρησιμοποιείτε μικροδεδομένα για προσαρμοσμένες εφαρμογές πέρα ​​από το schema.org, αυτοί είναι οι πόροι που αναζητάτε.

              Παγκόσμια χαρακτηριστικά

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

              Περιεχόμενο

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

              • accesskey: εκχωρεί μια συντόμευση πληκτρολογίου σε ένα στοιχείο.
              • class: προσθέτει ένα όνομα κλάσης για να επιτρέπει τη στόχευση ενός στοιχείου με Cascading Style Sheets (CSS) για στυλ ή πρόγραμμα JavaScript.
              • contenteditable: κάνει ένα στοιχείο επεξεργάσιμο από έναν επισκέπτη ιστότοπου.
              • konteksmenu: συσχετίζει μια προσαρμοσμένη επιλογή μενού περιβάλλοντος με ένα στοιχείο.
              • data- *: ένα προσαρμοσμένο χαρακτηριστικό δεδομένων που μπορεί να χρησιμοποιηθεί για τη διατήρηση πληροφοριών για συγκεκριμένη σελίδα για επιλογή χρήσης εντός φύλλων φύλλων CSS ή προγραμμάτων JavaScript.
              • dir: εκχωρεί κατευθυντικότητα στο περιεχόμενο κειμένου ενός στοιχείου.
              • draggable: επιτρέπει τη μεταφορά ενός στοιχείου χρησιμοποιώντας εγγενή υποστήριξη HTML5 για συμβάντα μεταφοράς και απόθεσης.
              • dropzone: καθορίζει την ενέργεια που πρέπει να πραγματοποιηθεί όταν ένα dragged item πέσει. Οι επιλογές περιλαμβάνουν αντιγραφή, σύνδεση και μετακίνηση.
              • κρυφό: χρησιμοποιείται για την απόκρυψη ενός στοιχείου μέχρι να εμφανιστεί. Το χαρακτηριστικό καταργείται με JavaScript όταν είναι κατάλληλο για να το κάνει.
              • id: εκχωρεί ένα μοναδικό αναγνωριστικό σε ένα στοιχείο.
              • lang: καθορίζει τη γλώσσα του περιεχομένου στο σχετικό στοιχείο.
              • ορθογραφικός έλεγχος: καθορίζει εάν θα πρέπει να ελεγχθεί μια εισαγωγή χρήστη για ορθογραφία.
              • style: επιτρέπει τη σύνδεση των στυλ CSS απευθείας σε ένα στοιχείο HTML.
              • tabindex: καθορίζει τη θέση στο ευρετήριο καρτελών στην οποία θα πρέπει να εμφανίζεται το στοιχείο.
              • title: προσθέτει κείμενο που εμφανίζεται ως συμβουλή εργαλείου όταν ένας επισκέπτης αιωρεί το ποντίκι πάνω από το στοιχείο.
              • translate: χρησιμοποιείται για την αποτροπή της μετάφρασης του προγράμματος περιήγησης του κειμένου συγκεκριμένων στοιχείων HTML.

              Διαχειριστές εκδηλώσεων

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

              Η παρακάτω λίστα περιλαμβάνει όλα τα χαρακτηριστικά του χειριστή συμβάντων και ακολουθεί μια περιγραφή του συμβάντος που ενεργοποιεί τον χειριστή.

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

              • onabort: η φόρτωση ενός στοιχείου έχει ακυρωθεί.
              • onfocus και onblur: ένα στοιχείο έχει λάβει ή έχει χάσει την εστίαση.
              • oncancel: οι χρήστες έχουν απορρίψει ένα στοιχείο διαλόγου.
              • oncanplay και oncanplaythrough: ένα στοιχείο πολυμέσων έχει κατεβάσει αρκετά δεδομένα για να ξεκινήσει η αναπαραγωγή ή για να ολοκληρωθεί η αναπαραγωγή χωρίς αποθήκευση.
              • onchange: η τιμή ενός στοιχείου φόρμας, όπως ένα στοιχείο εισαγωγής ή textarea, έχει αλλάξει.
              • onclick και ondblclick: έχει γίνει κλικ ή διπλό κλικ σε ένα στοιχείο.
              • onclose: έχει συμβεί ένα από τα πολλά διαφορετικά κοντινά γεγονότα.
              • oncontextmenu: το μενού περιβάλλοντος έχει ανοίξει κάνοντας δεξί κλικ στο στοιχείο.
              • oncopy, oncut και onpaste: το στοχευμένο στοιχείο έχει κοπεί, αντιγραφεί ή επικολληθεί.
              • oncuechange: ένα κομμάτι κειμένου που σχετίζεται με έναν πόρο πολυμέσων έχει αλλάξει τα στοιχεία που εμφανίζονται αυτήν τη στιγμή.
              • ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop: ένα draggable στοιχείο χειρίζεται χρησιμοποιώντας το HTML5 drag and drop API.
              • ondurationchange: το χαρακτηριστικό διάρκειας ενός στοιχείου πολυμέσων έχει αλλάξει.
              • onemptied: ένα στοιχείο μέσων έχει αδειάσει.
              • onended: έχει φτάσει το τέλος ενός στοιχείου πολυμέσων.
              • onerror: ο πόρος απέτυχε να φορτωθεί.
              • oninput: η τιμή ενός στοιχείου εισαγωγής ή περιεχομένου έχει αλλάξει.
              • oninvalid: ένα στοιχείο που υποβλήθηκε απέτυχε επικύρωση.
              • onkeydown, onkeypress και onkeyup: έχει συμβεί ένα πάτημα πλήκτρου πληκτρολογίου.
              • onload, onloadeddata, onloadedmetadata, onloadstart: είτε ένας ολόκληρος πόρος είτε το καθορισμένο τμήμα του πόρου έχει ολοκληρώσει τη φόρτωση.
              • onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover και onmouseup: προέκυψε αλληλεπίδραση με βάση το ποντίκι μεταξύ του χρήστη και του στοιχείου.
              • onwheel: το κουμπί τροχού ενός ποντικιού έχει περιστραφεί.
              • onplay και onplaying: ένα στοιχείο πολυμέσων έχει ξεκινήσει την αναπαραγωγή ή έχει τεθεί σε παύση (είτε σκόπιμα είτε περιμένοντας επιπλέον δεδομένα) και είναι έτοιμο να συνεχίσει την αναπαραγωγή.
              • onpause: η αναπαραγωγή πολυμέσων έχει τεθεί σε παύση.
              • onprogress: μια επιχείρηση έχει ξεκινήσει και βρίσκεται σε εξέλιξη.
              • onratechange: ο ρυθμός αναπαραγωγής πολυμέσων έχει αλλάξει.
              • onreset: έχει γίνει επαναφορά ενός στοιχείου φόρμας.
              • onresize: το μέγεθος της θύρας προβολής εγγράφου έχει αλλάξει.
              • onscroll: έχει μετακινηθεί η θύρα προβολής ή ένα στοιχείο.
              • onseeked and onseeking: η δυνατότητα αναζήτησης ενός στοιχείου πολυμέσων έχει χρησιμοποιηθεί ή χρησιμοποιείται.
              • onselect: έχει επιλεγεί μέρος του περιεχομένου ενός στοιχείου.
              • onshow: το μενού περιβάλλοντος έχει ξεκινήσει ενώ το στοιχείο στο επίκεντρο έχει ένα χαρακτηριστικό konteksmenu.
              • onstalled: η ανάκτηση πολυμέσων έχει καθυστερήσει ή απενεργοποιηθεί απροσδόκητα.
              • onsubmit: έχει υποβληθεί ένα στοιχείο φόρμας.
              • onsuspend: η φόρτωση ενός στοιχείου πολυμέσων έχει ανασταλεί.
              • ontimeupdate: το χαρακτηριστικό currenttime ενός στοιχείου πολυμέσων έχει ενημερωθεί.
              • ontoggle: ένα στοιχείο λεπτομερειών έχει ανοίξει ή κλείσει.
              • onvolumechange: η ένταση αναπαραγωγής ενός στοιχείου πολυμέσων έχει αλλάξει.
              • onwaiting: η αναπαραγωγή έχει σταματήσει, περιμένοντας τη λήψη περισσότερων δεδομένων.

              Στοιχεία DOM

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

              Αυτό το μοντέλο, που δημιουργήθηκε και διατηρήθηκε τοπικά στη μνήμη του προγράμματος περιήγησης, ονομάζεται Document Object Model (DOM). Μέσα στο DOM, κάθε στοιχείο HTML υπάρχει ως ένας μοναδικός κόμβος και το άθροισμα των κόμβων αποτελεί το DOM.

              Πρόσβαση στο DOM

              Για να αλληλεπιδράσουν γλώσσες όπως το JavaScript για να αλληλεπιδράσουν με το DOM, κάθε κόμβος πρέπει να καλείται χρησιμοποιώντας τυποποιημένα χαρακτηριστικά και μεθόδους ανεξάρτητα από τη γλώσσα.

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

              Το αποτέλεσμα είναι ένα σύστημα που παίρνει ένα στοιχείο HTML (για παράδειγμα:

              Κάποιο κείμενο

              ) και δημιουργεί έναν κόμβο DOM που περιέχει όλες αυτές τις πληροφορίες (για παράδειγμα: έναν κόμβο p με τιμή ορισμένου κειμένου και τα χαρακτηριστικά IDL className ="σώμα κειμένου" και τίτλος ="παράδειγμα").

              Οι γλώσσες δέσμης ενεργειών μπορούν στη συνέχεια να χρησιμοποιηθούν για τον χειρισμό κόμβων DOM με αναφορά στα χαρακτηριστικά IDL του κόμβου.

              Θεμελιώδεις ιδιότητες και μέθοδοι IDL

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

              Κάθε μεμονωμένος κόμβος DOM κληρονομεί όλα αυτά τα χαρακτηριστικά και τις μεθόδους IDL και μπορεί προαιρετικά να επεκταθεί στη διεπαφή HTMLElement προσθέτοντας πρόσθετα χαρακτηριστικά και μεθόδους.

              Η διασύνδεση HTMLElement

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

              Τα χαρακτηριστικά μεταδεδομένων περιλαμβάνουν:

              • Το χαρακτηριστικό τίτλου IDL ορίζεται από το χαρακτηριστικό HTML τίτλου.
              • Το χαρακτηριστικό lang IDL ορίζεται από το χαρακτηριστικό lang HTML και χρησιμοποιείται για τον προσδιορισμό της γλώσσας του περιεχομένου που βρίσκεται μέσα σε έναν κόμβο DOM. Εάν δεν παρέχεται χαρακτηριστικό lang, υπονοείται η γλώσσα που αντιστοιχεί στον πλησιέστερο γονικό κόμβο.
              • Το χαρακτηριστικό μετάφραση χρησιμοποιείται για την αποτροπή μετάφρασης του περιεχομένου ιστοσελίδας από τον πελάτη. Το χαρακτηριστικό είναι από προεπιλογή για μετάφραση = ναι σε επίπεδο εγγράφου και πρέπει να ρυθμιστεί χειροκίνητα για μετάφραση = όχι για κόμβους που δεν πρέπει να μεταφραστούν.
              • Το χαρακτηριστικό dir καθορίζει την κατεύθυνση του περιεχομένου κειμένου. Το χαρακτηριστικό δεν έχει προεπιλεγμένη τιμή.
              • το χαρακτηριστικό IDL του συνόλου δεδομένων είναι η απλή αναπαράσταση DOM των δεδομένων χαρακτηριστικών προσαρμοσμένων δεδομένων- *. Όταν προστίθενται προσαρμοσμένα χαρακτηριστικά δεδομένων σε ένα στοιχείο HTML, για παράδειγμα data-postId ="6057", αυτά τα χαρακτηριστικά δεδομένων συγκεντρώνονται σε ένα χαρακτηριστικό IDL ενός συνόλου δεδομένων και εκχωρούνται στον προκύπτον κόμβο DOM.

              Οι αλληλεπιδράσεις χρηστών περιλαμβάνουν:

              • Το κρυφό χαρακτηριστικό είναι ένα boolean που καθορίζει εάν ένας κόμβος DOM είναι ορατός ή όχι.
              • Το συμβάν κλικ () προσομοιώνει την αλληλεπίδραση χρήστη κλικ ποντικιού.
              • Το χαρακτηριστικό tabIndex καθορίζει τη σειρά που θα εμφανιστεί ένας κόμβος DOM στο ευρετήριο καρτελών.
              • Το συμβάν εστίασης () προσομοιώνει μια αλληλεπίδραση χρήστη στην οποία ο στοχευμένος κόμβος DOM έρχεται στο επίκεντρο.
              • Η μέθοδος blur () χρησιμοποιείται για την αποπροσανατολισμό του στοχευμένου κόμβου DOM.
              • Το χαρακτηριστικό accessKey IDL ορίζεται από το χαρακτηριστικό στοιχείο HTML κλειδιού πρόσβασης και εκχωρεί μια συντόμευση πληκτρολογίου στον στοχευόμενο κόμβο.
              • Το χαρακτηριστικό accessKeyLabel IDL είναι μια απλή αναπαράσταση του εκχωρημένου κλειδιού πρόσβασης.
              • Το χαρακτηριστικό contentEditable IDL ορίζεται από το χαρακτηριστικό contenteditable HTML element και καθορίζει εάν οι χρήστες μπορούν να επεξεργαστούν τον κόμβο στόχου.
              • Το χαρακτηριστικό isContentEditable IDL είναι μια τιμή ανάγνωσης boolean που δείχνει εάν ο κόμβος στόχος είναι επεξεργάσιμος.
              • Το χαρακτηριστικό ορθογραφικού ελέγχου IDL είναι μια δυαδική τιμή που καθορίζει εάν το περιεχόμενο ενός κόμβου DOM, συνήθως ένας κόμβος εισόδου, πρέπει να ελεγχθεί για σωστή ορθογραφία.

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

              • στο κλικ
              • έμφαση
              • onkeypress
              • φόρτωση
              • στο σπίτι
              • onmouseleave
              • στο σπίτι
              • onscroll
              • επιλέξτε
              • υποβολή.

              Έντυπα

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

              Βασικά έντυπα HTML

              Κατά τη δημιουργία μιας φόρμας HTML, θα πρέπει γενικά να ξεκινήσετε με την ετικέτα φόρμας:

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

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

              Βελτιώσεις φόρμας HTML5

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

              Νέοι τύποι στοιχείων εισαγωγής:

              • Ο τύπος εισαγωγής χρώματος προσδιορίζει ένα πεδίο που πρέπει να δέχεται ένα χρώμα και ορισμένα προγράμματα περιήγησης θα δημιουργήσουν ένα εργαλείο επιλογής χρώματος όταν το πεδίο είναι στο επίκεντρο.
              • Το HTML5 εισήγαγε έξι νέους τύπους εισαγωγής ώρας και ημερομηνίας, καθένας από τους οποίους θα δημιουργήσει ένα πρόγραμμα επιλογής δεδομένων σε υποστηριζόμενα προγράμματα περιήγησης:
                • ημερομηνία: επιλέξτε μια ημερομηνία που περιλαμβάνει την ημέρα, τον μήνα και το έτος.
                • ώρα ώρας: επιλέξτε ημερομηνία και ώρα μαζί με πληροφορίες ζώνης ώρας.
                • datetime-local: επιλέξτε μια ημερομηνία και ώρα, αλλά παραλείψτε τις πληροφορίες ζώνης ώρας.
                • ώρα: επιλέξτε ώρα.
                • εβδομάδα: επιλέξτε μια εβδομάδα και έτος.
                • μήνας: επιλέξτε μήνα και έτος.
              • Ο τύπος εισαγωγής email χρησιμοποιείται για τον προσδιορισμό ενός πεδίου που πρέπει να δέχεται μια διεύθυνση email. Τα υποστηριζόμενα προγράμματα περιήγησης θα πραγματοποιήσουν επίσης βασική επικύρωση εισόδου για να βεβαιωθούν ότι έχει πληκτρολογηθεί μια διεύθυνση email.
              • Η HTML5 εισήγαγε δύο νέους τύπους εισαγωγής προσανατολισμένων σε αριθμούς: αριθμό και εύρος. Ο αριθμός επιτρέπει την εισαγωγή οποιουδήποτε αριθμού, με την επιφύλαξη προαιρετικών περιορισμών ελάχιστης και μέγιστης τιμής. Το Range δημιουργεί μια ράβδο ολίσθησης, που περιορίζεται από τις ελάχιστες και τις μέγιστες τιμές, που επιτρέπουν στον χρήστη να επιλέξει μια τιμή εντός του καθορισμένου εύρους αποδεκτών τιμών.
              • Ο τύπος εισαγωγής αναζήτησης χρησιμοποιείται για τον προσδιορισμό μιας προτροπής αναζήτησης.
              • Ο τύπος εισαγωγής tel χρησιμοποιείται για την αναγνώριση ενός πεδίου που πρέπει να δέχεται έναν αριθμό τηλεφώνου. Τα υποστηριζόμενα προγράμματα περιήγησης θα πραγματοποιήσουν βασική επικύρωση εισόδου για να επιβεβαιώσουν ότι έχει εισαχθεί ένας αριθμός τηλεφώνου.
              • Ο τύπος εισαγωγής url προσδιορίζει ένα πεδίο που πρέπει να δέχεται ένα url. Τα υποστηριζόμενα προγράμματα περιήγησης θα εκτελέσουν βασική επικύρωση και οι υποστηριζόμενες κινητές συσκευές ενδέχεται να εμφανίζουν ένα κουμπί πληκτρολογίου .com.

              Νέα χαρακτηριστικά στοιχείων εισαγωγής:

              • autocomplete: ενεργοποιεί ή απενεργοποιεί την αυτόματη συμπλήρωση για ένα στοιχείο εισαγωγής. Εάν είναι ενεργοποιημένο, οι τιμές αυτόματης συμπλήρωσης θα τραβηχτούν από τις αποθηκευμένες καταχωρήσεις φόρμας.
              • αυτόματη εστίαση: καθορίζει ένα στοιχείο εισαγωγής που θα εστιάζεται αυτόματα όταν φορτώνεται η σελίδα.
              • φόρμα: χρησιμοποιεί ένα αναγνωριστικό που έχει εκχωρηθεί σε μια φόρμα για να συνδέσει ένα στοιχείο εισόδου που δεν είναι ένθετο μέσα σε μια φόρμα με τη φόρμα.
              • formaction: εκχωρείται σε ένα πεδίο υποβολής για παράκαμψη της προεπιλεγμένης συμπεριφοράς της φόρμας παρέχοντας μια εναλλακτική διεύθυνση URL για επεξεργασία φόρμας.
              • formenctype: προστέθηκε σε ένα πεδίο υποβολής για να καθορίσει τον τύπο κωδικοποίησης που θα εφαρμοστεί σε δεδομένα που υποβάλλονται χρησιμοποιώντας τη μέθοδο δημοσίευσης.
              • formmethod: προστέθηκε σε ένα πεδίο υποβολής για να καθορίσει τη μέθοδο HTTP, ανάρτηση ή λήψη, που θα πρέπει να χρησιμοποιείται για την υποβολή φόρμας.
              • formnovalidate: χρησιμοποιείται με το πεδίο υποβολής για να αποφευχθεί η επικύρωση των δεδομένων φόρμας από το πρόγραμμα περιήγησης.
              • formtarget: προστέθηκε σε ένα πεδίο υποβολής για να πει στο πρόγραμμα περιήγησης να εμφανίζει την απόκριση φόρμας είτε στο τρέχον παράθυρο είτε σε ένα νέο παράθυρο.
              • ύψος και πλάτος: χρησιμοποιείται για τον καθορισμό του μεγέθους ενός τύπου ="εικόνα" κουμπί υποβολής φόρμας.
              • ελάχιστο και μέγιστο: χρησιμοποιείται μαζί με έναν αριθμό, εύρος ή τύπο εισόδου με βάση την ώρα για να ορίσετε μια ελάχιστη και μέγιστη τιμή στην οποία πρέπει να πέσει η επιλεγμένη τιμή.
              • πολλαπλάσιο: χρησιμοποιείται μαζί με τον τύπο εισαγωγής αρχείου ή email για να επιτρέπει σε έναν χρήστη να προσθέτει πολλές τιμές.
              • μοτίβο: χρησιμοποιείται για τον ορισμό μιας κανονικής έκφρασης που θα χρησιμοποιείται για την επικύρωση των δεδομένων που έχουν εισαχθεί σε ένα email, κωδικό πρόσβασης, αναζήτηση, τηλέφωνο, κείμενο ή πεδίο url.
              • placeholder: εκχωρεί κείμενο placeholder σε ένα στοιχείο εισαγωγής που θα αφαιρεθεί όταν το στοιχείο εστιάσει.
              • απαιτείται: προσδιορίζει ένα στοιχείο που πρέπει να συμπληρωθεί πριν από την υποβολή της φόρμας.
              • βήμα: χρησιμοποιείται μαζί με τον αριθμό, το εύρος ή έναν τύπο εισαγωγής με βάση την ώρα για τον προσδιορισμό των βημάτων στα οποία μπορούν να επιλεγούν τιμές. Για παράδειγμα, η προσθήκη του βήματος ="10" σε έναν αριθμό εισαγωγής που περιορίζεται σε τιμές μεταξύ του ελάχιστου 0 και του μέγιστου 30 θα επιτρέψει την υποβολή 0, 10, 20 ή 30.

              Νέα χαρακτηριστικά στοιχείων φόρμας:

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

              Νέα στοιχεία φόρμας:

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

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

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

              Τύπος: y = mx + b

              Κλίση (m):

              Τιμή x:

              Υ τομή (b):

              Τιμή Y:

              Εάν στη συνέχεια γράψουμε το lineformula () σε JavaScript για να επεξεργαστούμε τον υπολογισμό και να ρίξουμε ένα άγγιγμα του CSS, μπορούμε να παράγουμε τον ακόλουθο απλό αλλά λειτουργικό αριθμομηχανή JavaScript:

              τύπος γραμμής συνάρτησης () {
              var y = 0;
              var m = document.getElementById ("m") τιμή;
              var x = document.getElementById ("x") τιμή;
              var b = document.getElementById ("b") τιμή;
              y = + m * + x + + b;
              document.getElementById ("y"). τιμή = y;
              }

              # παράδειγμα-μορφή {
              πλάτος: 100%;
              μέγιστο πλάτος: 400px;
              περιθώριο: 0 αυτόματη;
              περίγραμμα: 1px στερεό #bbb;
              χρώμα φόντου: #eee;
              }
              # είσοδος παραδείγματος-μορφής, έξοδος # παραδείγματος-μορφής {
              επιπλέουν: δεξιά;
              πλάτος: 100px;
              }
              # παράδειγμα-μορφή p {
              υπερχείλιση: αυτόματη;
              επένδυση: 10px;
              περιθώριο: 0;
              }
              # example-form p: not (: τελευταίο παιδί) {
              περίγραμμα-κάτω: 1px στερεό #bbb;
              }

              Τύπος: y = mx + b

              Κλίση (m):

              Τιμή x:

              Υ τομή (b):

              Τιμή Y:

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

              Σημασιολογικά στοιχεία

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

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

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

              Γιατί έχει σημασία η Σημασιολογία

              Η σημασιολογία είναι σημαντική για τουλάχιστον τέσσερις βασικούς λόγους:

              • Η σημασιολογία βελτιώνει την προσβασιμότητα. Οι υποβοηθούμενες τεχνολογίες είναι σε θέση να μεταφέρουν καλύτερα την έννοια μιας ιστοσελίδας όταν η επιλογή των στοιχείων HTML παρέχει ενδείξεις ως προς το νόημα του περιεχομένου της σελίδας.
              • Η σημασιολογία καθιστά το περιεχόμενο πιο ανιχνεύσιμο. Οι μηχανές αναζήτησης είναι καλύτερα σε θέση να κατανοήσουν και να ευρετηριάσουν το περιεχόμενο μιας ιστοσελίδας όταν τα στοιχεία HTML χρησιμοποιούνται σύμφωνα με τον κατάλληλο σημασιολογικό σκοπό τους.
              • Τα σημασιολογικά στοιχεία αποτελούν όφελος για τη διεθνοποίηση. Νέα σημασιολογικά στοιχεία ruby ​​και bdi εισήχθησαν στο HTML5 για να αναγνωρίσουν καλύτερα το γεγονός ότι λιγότερο από το 15% του κόσμου αποτελείται από μητρική αγγλικά ομιλητές.
              • Η σημασιολογία βελτιώνει τη διαλειτουργικότητα διευκολύνοντας τους προγραμματιστές και τις εφαρμογές να κατανοήσουν και να αλληλεπιδράσουν με το περιεχόμενο μιας ιστοσελίδας.

              Καθώς η πορεία προς το Διαδίκτυο των πάντων (IOE) συνεχίζεται αμείωτη, η σημασιολογία γίνεται όλο και πιο σημαντική.

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

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

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

              Σημασιολογία σε HTML Πριν από HTML5

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

              Οι λίστες έχουν αναγνωρίσει ότι το πρόγραμμα περιήγησης είναι είτε ταξινομημένο είτε μη ταξινομημένο από τη χρήση των ετικετών ol και ul. Ομοίως, υπάρχει μια εκτεταμένη λίστα στοιχείων πριν από το HTML5 που μπορούν να χρησιμοποιηθούν μέσα στο κείμενο για να προσθέσουν σημασιολογική σημασία:

              • Οι ετικέτες em και οι ισχυρές σημαίνουν έμφαση και έντονη έμφαση.
              • Οι ετικέτες s, del και ins χρησιμοποιούνται για την αναγνώριση πληροφοριών που δεν ισχύουν πλέον ή έχουν αντικατασταθεί με ενημερωμένες πληροφορίες.
              • Οι ετικέτες προσφοράς και παραπομπής χρησιμοποιούνται για τον εντοπισμό εισαγωγικών και δημιουργικών έργων.
              • Οι ετικέτες abbr και dfn χρησιμοποιούνται για τη σύνδεση επεξηγηματικών σχολίων με έναν όρο που χρειάζεται ορισμό.
              • Τα στοιχεία κώδικα, samp, kbd και var χρησιμοποιούνται για τον προσδιορισμό συγκεκριμένων τύπων κειμένου: κωδικός προγραμματισμού, δείγμα εξόδου προγράμματος υπολογιστή, εισαγωγή πληκτρολογίου και μεταβλητές τύπων αντίστοιχα.
              • Τα στοιχεία sup και sub υποδηλώνουν περιεχόμενο που θα πρέπει να εμφανίζεται είτε ως κείμενο συνδρομητή είτε ως υπερκείμενο.

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

              Δομή εγγράφου HTML Πριν από το HTML5

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

              Αυτή η προσέγγιση στη δημιουργία δομής σελίδας με το στοιχείο div - μια πρακτική που αναφέρεται ως divitis - δεν χρησιμοποιεί τα ίδια τα στοιχεία HTML για να υπονοήσει οποιαδήποτε σημασία στη δομή της σελίδας. Πριν από το HTML5, οι προγραμματιστές θα μπορούσαν να συγχωρεθούν για αυτό το είδος πρακτικής.

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

              Διαρθρωτικά Σημασιολογικά Στοιχεία σε HTML5

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

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

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

              Εάν επανεξετάσουμε τη διάταξη div-soup και την αναθεωρήσουμε για να εφαρμόσουμε αυτές τις νέες ετικέτες, έχουμε κάτι που μοιάζει με αυτό:

              Σημασιολογικά στοιχεία κειμένου σε HTML5

              Εκτός από τα δομικά στοιχεία που έχουμε καλύψει, το HTML5 εισήγαγε επίσης ορισμένα στοιχεία για να υπονοήσει συγκεκριμένους τύπους νοήματος σε κομμάτια κειμένου. Ας ρίξουμε μια ματιά σε αυτά:

              • Το στοιχείο διεύθυνσης χρησιμοποιείται για τον προσδιορισμό των πληροφοριών διεύθυνσης που αφορούν τον συντάκτη ή τον κάτοχο μιας ιστοσελίδας ή ενός άρθρου.
              • Τα στοιχεία σχήματος και εικονιδίων χρησιμοποιούνται για τον προσδιορισμό και τη λεζάντα οπτικού περιεχομένου που σχετίζεται με το περιεχόμενο μιας ιστοσελίδας - όπως γράφημα, διάγραμμα ή εικόνα - αλλά αυτό δεν χρειάζεται να εμφανίζεται ευθυγραμμισμένο με το περιεχόμενο του εγγράφου.
              • Η ετικέτα σήμανσης χρησιμοποιείται για την αναγνώριση κειμένου που έχει συγκεκριμένη σημασία στο τρέχον πλαίσιο. Για παράδειγμα, θα μπορούσε να χρησιμοποιηθεί για τον εντοπισμό κάθε εμφάνισης ενός όρου αναζήτησης σε μια σελίδα που εμφανίζει αποτελέσματα αναζήτησης.
              • Το στοιχείο χρόνου προσδιορίζει ένα κομμάτι κειμένου που αντιπροσωπεύει ένα συγκεκριμένο χρονικό σημείο. Το χαρακτηριστικό datetime μπορεί να χρησιμοποιηθεί για να προσθέσετε μια μηχαναγνώσιμη έκδοση του συγκεκριμένου χρονικού σημείου στην ετικέτα χρόνου.
              • Το στοιχείο bdi χρησιμοποιείται για να αντιστρέψει την κατεύθυνση ενός κομματιού περιεχομένου για γλώσσες που ακολουθούν ένα μοτίβο από τα δεξιά προς τα αριστερά.
              • Τα στοιχεία ruby, rp και rt χρησιμοποιούνται για την παροχή βοηθημάτων προφοράς ή ρουμπίνων, για ορισμένους χαρακτήρες της ασιατικής γλώσσας.

              Δυναμική HTML

              Δυναμική HTML

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

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

              Το όνομα "DHTML" είναι λίγο λάθος. Σε αντίθεση με τη γλώσσα σήμανσης HTML από την οποία αντλεί το όνομά της, το Dynamic Hypertext Markup Language είναι στην πραγματικότητα ένας όρος που περιγράφει έναν αριθμό τεχνολογιών και γλωσσών που χρησιμοποιούνται σε συνδυασμό για τη δημιουργία δυναμικών ιστότοπων.

              Αυτά είναι τα τέσσερα βασικά στοιχεία του DHTML:

              • HTML: η γλώσσα σήμανσης που χρησιμοποιείται για τη δημιουργία στατικών σελίδων και εφαρμογών.
              • CSS: η γλώσσα που χρησιμοποιείται για να υπαγορεύσει μέσω φύλλου στυλ την παρουσίαση μιας σελίδας.
              • JavaScript: η γλώσσα προγραμματισμού που χρησιμοποιείται για την ανάπτυξη διαδραστικών στοιχείων σε μια σελίδα.
              • ΝΟΜ: η διεπαφή προγραμματισμού μέσω της οποίας μπορεί να αλλάξει ο κωδικός μιας σελίδας.

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

              Βιβλία

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

              • JavaScript: Ο οριστικός οδηγός (2006) του David Flanagan: αυτός είναι ο οδηγός για την εκμάθηση της JavaScript καθώς και ένα εξαιρετικό υλικό αναφοράς για όλα τα θέματα που σχετίζονται με το DHTML.
              • Διαδραστική οπτικοποίηση δεδομένων για τον Ιστό: Μια εισαγωγή στο σχεδιασμό με το D3 (2013) από τον Scott Murray: μόλις αποκτήσετε μια λαβή σχετικά με τα βασικά στοιχεία του DHTML, χρησιμοποιήστε αυτόν τον αναλυτικό οδηγό για να μάθετε τα βασικά του σχεδιασμού δυναμικού περιεχομένου.
              • Σενάριο DOM: Σχεδίαση Ιστού με JavaScript και το μοντέλο αντικειμένου εγγράφου (2010) από τους Keith και Sambells: ο τέλειος πόρος για όταν θέλετε καλύτερη κατανόηση του DOM και πρακτική με εφαρμογές πραγματικού κόσμου.
              • Web Animation χρησιμοποιώντας JavaScript: Ανάπτυξη & Σχέδιο (2015) από τον Julian Shapiro: αν θέλετε να μάθετε τα κινούμενα σχέδια μέσω DHTML, ρίξτε μια ματιά.

              Εργαλεία

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

              • Dynamic Drive: αυτός ο ιστότοπος είναι αφιερωμένος στην παροχή στους προγραμματιστές δωρεάν σεναρίων JavaScript (και άλλων DHTML).
              • DHTML Goodies: ένας άλλος διαδικτυακός πόρος που παρέχει δωρεάν σενάρια DHTML (και Ajax).
              • Σενάρια σεναρίου JavaScript: ένας άλλος δωρεάν πόρος για την εύρεση σεναρίων JavaScript που βοηθούν στη δημιουργία μιας ποικιλίας εφέ σχεδίασης και κίνησης.

              Ηλεκτρονικοί οδηγοί και σεμινάρια

              Θέλετε έναν βήμα προς βήμα οδηγό για να μάθετε σχετικά με HTML, CSS, JavaScript και DOM; Ή μήπως προτιμάτε κάποια πρακτική πρακτική; Οι παρακάτω οδηγοί θα καλύψουν όλες τις βάσεις σας.

              • Ένας χάρτης πορείας για την ανάπτυξη Ιστού για αρχάριους: αυτός ο οδηγός «Μάθετε να κωδικοποιείτε» είναι το ιδανικό μέρος για να ξεκινήσετε να εργάζεστε με το DHTML, καθώς θα σας μεταφέρει από τα βασικά του HTML (Κεφάλαιο 1) μέχρι τη JavaScript και το jQuery (Κεφάλαιο 5).
              • W3Schools DHTML Tutorials: Το W3Schools προσφέρει μια ποικιλία σεμιναρίων στο DHTML, χωρισμένα από τις τρεις διαφορετικές γλώσσες προγραμματισμού.
              • Tutorials Mozilla Web Technologies: το Mozilla Developer Network διαθέτει έναν από τους πιο περιεκτικούς (και καλά οργανωμένους) οδηγούς που διατίθενται στις διάφορες γλώσσες προγραμματισμού που εμπλέκονται στο DHTML.
              • QcTutorials DHTML Tutorial: Ψάχνετε για μια απλή και απλή προσέγγιση στην εκμάθηση DHTML; Περιηγηθείτε σε αυτό το σεμινάριο και στη συνέχεια διατηρήστε τα παραδείγματα DHTML και HTML DOM για μελλοντική αναφορά.
              • Οδηγός για αρχάριους για το DHTML Tutorial: μια εισαγωγή στο DHTML που περιλαμβάνει έναν αριθμό μαθημάτων για να ξεκινήσετε.
              • Tutorials για προγραμματιστές ιστού και CSS: υπάρχουν πολλά που μπορείτε να μάθετε να κάνετε με το CSS, οπότε μην περιορίσετε τον εαυτό σας μόνο στα βασικά. Αυτός ο πόρος περιλαμβάνει μια ποικιλία σεμιναρίων CSS με βάση τις ανάγκες του συγκεκριμένου ιστότοπού σας.
              • Tutorials JavaScript: ένας άλλος οδηγός από το JavaScript Kit, μόνο αυτός εστιάζει ειδικά σε εργασίες που σχετίζονται με JavaScript.
              • Αναφορά CSS: χρησιμοποιήστε αυτόν τον απλό πόρο ως έναν γρήγορο οδηγό αναφοράς κατά τη σύνταξη CSS.
              • Αναφορά DOM: μάθετε περισσότερα για τα διάφορα αντικείμενα DOM εδώ.

              Φτάνω στη δουλειά!

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

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

              Σύνθεση καλής HTML και χρήση επικυρωτών

              .sourceCode span.kw
              .sourceCode span.dt
              .sourceCode span.dv
              .sourceCode span.bn
              .sourceCode span.fl
              .sourceCode span.ch
              .sourceCode span.st
              .sourceCode span.co
              .sourceCode span.ot
              .sourceCode span.al
              .sourceCode span.fu
              .sourceCode span.re
              .sourceCode span.er

              Σύνθεση καλής HTML και χρήση επικυρωτών

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

              Μέρος 1 - Σύνθεση καλής HTML

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

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

              Γιατί να ασχοληθείτε με το καλό HTML?

              Επειδή το HTML δεν προορίζεται για προβολή από τους τελικούς χρήστες και το κοινό σας στο διαδίκτυο, μπορείτε να ρωτήσετε:

              • Τι διαφορά έχει?
              • Γιατί να ανησυχείτε για τη σήμανση?

              Η απάντηση σε αυτήν την ερώτηση είναι το πρώτο βήμα προς ένα καλό στυλ HTML: να σκεφτείτε για ποιον γράφετε HTML.

              Υπάρχουν λίγα "είδη κοινού" για το HTML σας:

              • Ο τρέχων σχεδιαστής / προγραμματιστής που πρέπει να γράψει CSS
              • Μελλοντικοί προγραμματιστές και σχεδιαστές που ίσως χρειαστεί να επανασχεδιάσουν τον ιστότοπό σας
              • Google και άλλες μηχανές αναζήτησης
              • Facebook και άλλοι ιστότοποι κοινωνικών μέσων που δημοσιεύουν αποσπάσματα σελίδων
              • Αναγνώστες RSS
              • Αναγνώστες οθόνης για άτομα με προβλήματα όρασης
              • Οι κανονικοί σας χρήστες, τελικά.

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

              Καλή δομή εγγράφου

              Η πιο σημαντική πτυχή του στυλ HTML είναι η σωστή δομή του συνολικού εγγράφου.

              Η συνολική δομή πρέπει να έχει την εξής μορφή:

              html>

              Ο τίτλος του εγγράφου




              Τίτλος ιστότοπου

              Τίτλος εγγράφου

              Τίτλος εγγράφου

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

              ή

              ετικέτα, στο ίδιο "επίπεδο" με το περιεχόμενο του άρθρου θα ήταν μια χαρά.

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

              Παραγγελία των κύριων στοιχείων σας

              Το περιεχόμενο και το περιεχόμενο πρέπει να είναι νωρίς στο δικό σας. Όταν ο σύμβουλός σας SEO προσπαθεί να καταλάβει τι συμβαίνει με τον τρόπο με τον οποίο η Google ή το Facebook εμφανίζει τις σελίδες σας, μην τις κάνετε να ταξινομήσετε μέσω δώδεκα συνδέσμων CSS και τυχαίου κώδικα JavaScript.

              Ακόμα κι αν το navbar σας είναι κολλημένο στην κορυφή του παραθύρου σας και ο κύριος τίτλος του ιστότοπου είναι κάτω από αυτόν, τοποθετήστε τον κύριο τίτλο του ιστότοπού σας σε ένα

              ή

              ετικέτα και τοποθετήστε το πρώτο μέσα. Τοποθετήστε το μενού πλοήγησης μετά τον τίτλο.

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

              Η σελίδα πρέπει να είναι το τελευταίο στοιχείο περιεχομένου στο. Δεν θα πρέπει να υπάρχουν ορατά στοιχεία HTML μετά .

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

              Διευκολύνοντας την ανάγνωση της δομικής σήμανσης

              Κάποια στιγμή πρέπει απλώς να συμπεριλάβετε πολλές ετικέτες ή να έχετε πολλές πλευρικές γραμμές σε διαφορετικά επίπεδα. Ή ίσως έχετε πολλές ένθετες λίστες.

              Ένα από τα πιο χρήσιμα πράγματα που μπορείτε να κάνετε είναι εσοχή του κωδικού σας. Εξετάστε τα ακόλουθα δύο παραδείγματα:

              τάξη ="κορυφή ιστού">

              Τίτλος εγγράφου

              τάξη ="nav-bar">
              τάξη ="main-nav">

              • Στοιχείο μενού
              • Στοιχείο μενού
              • Στοιχείο μενού
                • Στοιχείο μενού
                • Στοιχείο μενού
                • Στοιχείο μενού
              • Στοιχείο μενού

              τάξη ="κορυφή ιστού">

              Τίτλος εγγράφου

              τάξη ="nav-bar">
              τάξη ="main-nav">

              • Στοιχείο μενού
              • Στοιχείο μενού
              • Στοιχείο μενού
                • Στοιχείο μενού
                • Στοιχείο μενού
                • Στοιχείο μενού
              • Στοιχείο μενού

              Το δεύτερο είναι πολύ πιο εύκολο να διαβαστεί, έτσι δεν είναι; Αυτό είναι πολύ χρήσιμο για σχεδιαστές και προγραμματιστές που προσπαθούν να κατανοήσουν το έγγραφό σας.

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

              Αλλά τι γίνεται με το δημιουργημένο HTML?

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

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

              τάξη ="κορυφή ιστού">

              Τίτλος εγγράφου

              τάξη ="nav-bar">
              τάξη ="main-nav">

              • Στοιχείο μενού
              • Στοιχείο μενού
              • Στοιχείο μενού
                • Στοιχείο μενού
                • Στοιχείο μενού
                • Στοιχείο μενού
              • Στοιχείο μενού



              τάξη ="σχόλια">
              τάξη ="σχόλιο" id ="σχόλιο-39874693029">


              τάξη ="πλευρική γραμμή" id ="εγγραφή-φόρμα">


              τάξη ="πλευρική γραμμή" id ="αρχεία">

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

              Σημαντικές τάξεις και αναγνωριστικά

              Πρώτα απ 'όλα - κάντε τα χαρακτηριστικά της τάξης και του αναγνωριστικού σας συνεπή και ευανάγνωστα:

              • χρησιμοποιώντας μόνο πεζά γράμματα
              • διαχωρισμός λέξης με παύλες.

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

              Καλές ονομασίες τάξης και ταυτότητας:

              • nav-μενού
              • ανάρτηση
              • πλαϊνή μπάρα-widget
              • σχόλιο-μετα.

              Κακά ονόματα τάξης και ταυτότητας:

              • πράσινο κουτί
              • αριστερή πλευρική γραμμή
              • ξεθωριάζει σε πανό.

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

              Αυτό είναι εντάξει αν δεν μπορείτε να το βοηθήσετε. Απλά βεβαιωθείτε ότι διατηρείτε τα πράγματα γενικά. Δεν υπάρχει τίποτα χειρότερο από έναν επανασχεδιασμό που δημιουργεί CSS που μοιάζει με:

              .πράσινο κουτί
              χρώμα φόντου: μπλε;
              }

              Χρησιμοποιήστε τα στοιχεία περιεχομένου με σύνεση

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

              Τίτλοι και ενότητες

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

              • Χρήση ετικετών επικεφαλίδας (

                ,

                ,

                ,

                ) στις ενότητες τίτλων και στις ενότητες.

              • Βεβαιωθείτε ότι η ιεραρχία των πρωτοσέλιδων αποτελεί λογικό περίγραμμα. Μην βάλετε ένα
                μετά από ένα

                χωρίς

                και

                παρέμβασης. Βεβαιωθείτε ότι το περιεχόμενό σας έχει ορθολογική και κατανοητή δομή.

              • Εάν χρησιμοποιείτε για να επισημάνετε τις κεφαλίδες ενότητας, κάτι δεν πάει καλά.

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

              id ="τίτλος-ενότητας">Τίτλος Ενότητας

              ...

              href ="# τίτλος-ενότητας">Αυτό συνδέεται με αυτήν την τοποθεσία.

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

              Συνδέσεις

              Το μόνο απαιτούμενο χαρακτηριστικό για μια ετικέτα αγκύρωσης είναι η διεύθυνση URL του συνδεδεμένου εγγράφου.

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

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

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

              Μάθετε περισσότερα για το HTML από href ="">κάνοντας κλικ εδώ.

              Παρέχουμε πολύ href ="">πληροφορίες σχετικά με το HTML.

              Εικόνες

              Απαιτείται μόνο μια εικόνα για να έχει ένα στοιχείο src - τη διεύθυνση URL της εικόνας. Ωστόσο, η συμπερίληψη τίτλου και κειμένου alt μπορεί να βοηθήσει.

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

              Υπάρχουν πολλά πολύ χρήσιμα στοιχεία σήμανσης σε επίπεδο εύρους που δεν χρησιμοποιούνται ποτέ.

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

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

              Μάθετε περισσότερα και φροντίστε περισσότερα

              Το να γράφεις καλό HTML είναι θέμα:

              • μαθαίνοντας μια χούφτα βασικών αρχών
              • νοιάζεται αρκετά για το περιεχόμενό σας και τον ιστότοπό σας για να τα παρακολουθείτε.

              Μπορούμε να σας βοηθήσουμε μόνο με το τμήμα μάθησης. Πρέπει να λάβετε την απόφαση να φροντίσετε.

              Οι περισσότερες από τις συμβουλές μας μπορούν να συνοψιστούν σε μία πρόταση:

              Βεβαιωθείτε ότι ο HTML σας γνωστοποιεί σαφώς αυτό που θέλετε να επικοινωνήσετε.

              Μέρος 2: Επικυρωτές HTML

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

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

              Εδώ πρέπει να γνωρίζετε.

              Τι είναι η επικύρωση HTML?

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

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

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

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

              Τι δεν είναι επικύρωση HTML?

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

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

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

              Γιατί να ασχοληθείτε με την επικύρωση?

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

              Απλά τυπογραφικά λάθη

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

              Αναντιστοιχία έκδοσης

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

              Για παράδειγμα, η ετικέτα HTML είναι νέα στο HTML5 - δεν υπήρχε στην προδιαγραφή HTML 4.0. Αυτό σημαίνει ότι αν επικυρώνατε με αυτήν την προδιαγραφή και συμπεριλάβατε, δεν θα ήταν έγκυρη. Θα λάβετε ένα σφάλμα.

              Ένα άλλο παράδειγμα για κάτι που έχει αλλάξει είναι ο τρόπος με τον οποίο κλείνουν τα μηδενικά στοιχεία.

              Η ετικέτα εικόνας ( ) είναι μηδενικό στοιχείο - δεν έχει περιεχόμενο, μόνο χαρακτηριστικά (η ίδια η εικόνα είναι ένα χαρακτηριστικό που δείχνει το αρχείο εικόνας, όχι το περιεχόμενο ενός στοιχείου). Στο παρελθόν, τα μηδενικά στοιχεία έπρεπε να κλείσουν, οπότε θα το δείτε:

              src ="http://example.com/some_image" alt ="Κάποια εικόνα" />

              Τώρα, στην προδιαγραφή HTML5, αυτό δεν προτιμάται και η ίδια εικόνα θα μοιάζει με αυτήν:

              src ="http://example.com/some_image" alt ="Κάποια εικόνα" >

              Η επικύρωση είναι σημαντική για διάφορους λόγους:

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

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

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

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

              Περιλαμβάνεται κακός κώδικας

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

              Απλά δεν γνωρίζω τις προδιαγραφές HTML

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

              Γνωρίζατε ότι δεν μπορείτε να βάλετε μια λίστα (