Οδηγός για αρχάριους για την οικοδόμηση ιστοσελίδων HTML5 / CSS3

Αυτό το άρθρο είναι μέρος του μας "Σειρά HTML5 / CSS3 Tutorials" - αφιερωμένο να σας βοηθήσει να κάνετε έναν καλύτερο σχεδιαστή και / ή προγραμματιστή. Κάντε κλικ ΕΔΩ για να δείτε περισσότερα άρθρα από την ίδια σειρά.

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

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

Αλλαγές μεταξύ HTML4 και HTML5

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

(Πηγή εικόνας: W3C)

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

Τι περισσότερο από το HTML5 είναι η μετατροπή του σύγχρονου web browser μας. Με αυτές τις νέες προδιαγραφές, το διαδίκτυο ως σύνολο θεωρείται τώρα ως ένα πλατφόρμα εφαρμογών για HTML (ειδικά HTML5), CSS και JavaScript για να χτιστεί. Επίσης, αυτό το σύστημα κομψά δημιουργεί αρμονία μεταξύ σχεδιαστών ιστοσελίδων και προγραμματιστών καθορίζοντας κοινά πρότυπα τα οποία πρέπει να ακολουθούν όλα τα προγράμματα περιήγησης.

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

Bare HTML5 Skeleton

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

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

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

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

Αυτός ο κανόνας εξακολουθεί να ισχύει σε HTML5. Αλλά τώρα εσύ δεν χρειάζεται καν την επιπλέον πλάγια κάθετο! είναι εντελώς έγκυρος, αν και σας επιτρέπεται να συνεχίσετε να χρησιμοποιείτε το πρότυπο XHTML / XML. Για όλα τα προγράμματα περιήγησης που είναι συμβατά με τα πρότυπα, και τα δύο στοιχεία θα αποδίδουν τον ίδιο τρόπο.

Ορισμός των περιοχών σελίδας

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

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

, ένας πυρήνας

, και ένα σύντομο

Οδηγός για αρχάριους στο Flock, τον Social Media Browser

Οδηγός για αρχάριους για την ανάπτυξη του iOS Η διασύνδεση - Μέρος Ι

Οδηγός για αρχάριους για τη ρύθμιση του Windows Media Center