Home-theater-designers
Όταν δημιουργείτε έναν νέο ιστότοπο, αυτές τις μέρες θα θέλετε να είναι συμβατός με HTML5. Αλλά επίσης δεν θέλετε να αφιερώνετε περιττό χρόνο στην εκμάθηση των περιπλοκών του HTML5 από την αρχή, έτσι δεν είναι;
Ευτυχώς, το Πρότυπο Boilerplate HTML5 μπορώ να βοηθήσω. Είναι ένα απλό πρότυπο που μπορείτε να χρησιμοποιήσετε για να δημιουργήσετε έναν ιστότοπο HTML5 σε λίγα μόνο λεπτά. Αλλά είναι επίσης αρκετά ισχυρό ώστε να μπορείτε να το χρησιμοποιήσετε ως θεμέλιο ενός πολύπλοκου, πλήρως εξοπλισμένου ιστότοπου.
μετακίνηση εφαρμογής στη ρίζα κάρτας sd
Αυτό το σεμινάριο HTML5 Boilerplate θα εξετάσει τι υπάρχει στο πρότυπο, τα βασικά που πρέπει να γνωρίζετε για τον τρόπο χρήσης του και ορισμένους πόρους για περαιτέρω εκμάθηση. Θα σας δείξω επίσης πώς χρησιμοποίησα το πρότυπο για να δημιουργήσω έναν πολύ βασικό ιστότοπο με λίγες μόνο γραμμές HTML.
Το πρότυπο Boilerplate HTML5
Όταν κατεβάζετε το πρότυπο από HTML5 Boilerplate, λαμβάνετε έναν αριθμό φακέλων και αρχείων. Ακολουθούν τα περιεχόμενα του αρχείου ZIP:
css
---main.css
---normalize.css
doc
img
js
---main.js
---plugins.js
---vendor
---jquery.min.js
---modernizr.min.js
.editorconfig
.htaccess
404.html
browserconfig.xml
favicon.ico
humans.txt
icon.png
index.html
robots.txt
site.webmanifest
tile.png
tile-wide.pngΔεν θα εξετάσουμε κάθε στοιχείο του προτύπου εδώ, μόνο τα βασικά. Ωστόσο, για να βεβαιωθείτε ότι έχετε τους πόρους για να χρησιμοποιήσετε όλα τα αρχεία, θα ξεκινήσουμε με τα έγγραφα βοήθειας.
Τεκμηρίωση βοήθειας Boilerplate HTML5
Το Boilerplate διαθέτει μια συλλογή από έγγραφα βοήθειας που φιλοξενούνται στο GitHub Το Αυτή είναι μια μεγάλη βοήθεια όταν έχετε τεχνικές ερωτήσεις ή αναρωτιέστε γιατί κάτι σχεδιάστηκε έτσι όπως ήταν.
Σχεδόν όλα στην τεκμηρίωση περιλαμβάνονται επίσης στο φάκελο doc του προτύπου. Θα δείτε έναν αριθμό αρχείων Markdown (.md) που είναι μια μεγάλη βοήθεια για να μάθετε πώς να δημιουργήσετε τον ιστότοπό σας Boilerplate.
Αν θέλετε να διαβάσετε τα πάντα, ξεκινήστε με το TOC.md και ακολουθήστε τους συνδέσμους από εκεί προς άλλα αρχεία Markdown. Αν ψάχνετε βοήθεια για ένα συγκεκριμένο ζήτημα, βρείτε το αρχείο που μοιάζει να σχετίζεται. Το use.md είναι ένα καλό μέρος για να ξεκινήσετε.
Ξεκινώντας με το CSS του HTML5 Boilerplate
Το πρότυπο HTML5 Boilerplate έρχεται με δύο αρχεία CSS: main.css και normalize.css.
Το δεύτερο αρχείο, normalize.css, βοηθά διαφορετικά προγράμματα περιήγησης να αποδώσουν στοιχεία με συνεπή τρόπο. Για να μάθετε περισσότερα για το πώς λειτουργεί, ανατρέξτε στο normalize.css έργο στο GitHub Το
Εν τω μεταξύ, το main.css είναι εκεί που θα βάλετε οποιονδήποτε κώδικα χρειάζεστε μορφοποιήστε τον ιστότοπό σας με CSS Το Το τυπικό CSS που περιλαμβάνεται στο πρότυπο είναι αποτέλεσμα έρευνας που πραγματοποιήθηκε από προγραμματιστές και την κοινότητα HTML5 Boilerplate. Είναι ευανάγνωστο και εμφανίζεται όμορφα σε διαφορετικά προγράμματα περιήγησης.
Εάν θέλετε να προσθέσετε το δικό σας CSS, μπορείτε να το προσθέσετε στην ενότητα Προσαρμοσμένα στυλ του Συγγραφέα. Θα προσθέσω λίγο στυλ σύνδεσης για τη σελίδα παραδείγματος:
Υπάρχουν επίσης μια σειρά χρήσιμων τάξεων βοηθού που περιλαμβάνονται στο βασικό CSS. Ορισμένα από αυτά κρύβουν στοιχεία από τυπικά προγράμματα περιήγησης και προγράμματα ανάγνωσης οθόνης (ή κάποιο συνδυασμό).
Επίσης στο main.css θα βρείτε υποστήριξη για ευέλικτο σχεδιασμό και χρήσιμες ρυθμίσεις εκτύπωσης.
Όλα αυτά τα στοιχεία εξηγούνται σαφώς με σχόλια στο CSS:
Σε γενικές γραμμές, μπορείτε να ξεκινήσετε με το βασικό CSS.
Προσθήκη του δικού σας HTML στο πρότυπο
Το Boilerplate περιλαμβάνει δύο αρχεία HTML: 404.html και index.html.
Η σελίδα ευρετηρίου είναι το σημείο όπου θα δημιουργήσετε την αρχική σας σελίδα (ή τη μοναδική σας σελίδα, εάν πρόκειται για απλή μονοσελίδα).
Εάν ανοίξετε τη σελίδα ευρετηρίου σε ένα πρόγραμμα περιήγησης, θα δείτε μια μόνο γραμμή κειμένου. Αλλά κοιτάζοντας το HTML αποκαλύπτεται πολύ περισσότερο κρυμμένο στον κώδικα. Το μόνο πράγμα που πραγματικά πρέπει να ανησυχείτε για την αλλαγή είναι ο κώδικας του Google Analytics (βρείτε το κείμενο 'UA-XXXXX-Y' και αντικαταστήστε το με τον δικό σας κώδικα παρακολούθησης).
Το υπόλοιπο HTML στη σελίδα ευρετηρίου περιλαμβάνει πληροφορίες για εφαρμογές ιστού, ειδοποιήσεις για παλιά προγράμματα περιήγησης και χρήσιμες JavaScript. Όταν ξεκινάτε, δεν πρέπει να μπλέξετε με τίποτα από όλα αυτά.
Ωστόσο, έχοντας τους ήδη προπληρωμένους, είναι ένας καλός τρόπος για να βεβαιωθείτε ότι ο ιστότοπός σας είναι έτοιμος να αξιοποιήσει στο έπακρο το HTML5.
Για να δημιουργήσετε τη σελίδα σας, εισαγάγετε το HTML σας μεταξύ των ετικετών στο αρχείο. Ακολουθούν ορισμένες βασικές πληροφορίες που θα προσθέσω για τον εαυτό μου:
Θέλετε να δημιουργήσετε περισσότερες σελίδες; Δημιουργήστε αντίγραφα αυτού του αρχείου και μετονομάστε τα, ώστε να μην χρειάζεται να αντιγράψετε και να επικολλήσετε όλο το HTML. Στη συνέχεια, προσθέστε το περιεχόμενό σας.
Εάν θέλετε να προσαρμόσετε τη σελίδα σας 404, απλώς τροποποιήστε το αρχείο HTML. Δεν είστε σίγουροι τι να τοποθετήσετε στη σελίδα 404; Δείτε αυτά τα υπέροχα παραδείγματα σχεδιασμού σελίδων 404.
Προσθήκη Favicon (και άλλων εικονιδίων)
Θέλετε να αντικαταστήσετε το φαβορί σας; Στη συνέχεια, το favicon.ico είναι το αρχείο που θα χρειαστεί να αντικαταστήσετε.
Εάν δεν έχετε ακόμη, θα πρέπει να δημιουργήσετε ένα. Μπορείτε να χρησιμοποιήσετε μια ηλεκτρονική γεννήτρια favicon ή να σχεδιάσετε τη δική σας. Απλά βεβαιωθείτε ότι είναι 16 x 16 pixel και έχει τον τύπο αρχείου .ico.
Windows 10 δεν εμφανίζει το εικονίδιο της μπαταρίας
Είναι καλή ιδέα να βάλετε λίγη σκέψη στο φαβορί σας. Χρησιμοποιήστε αυτά τα διάσημα favicons για να καθοδηγήσετε το brainstorming σας. Βεβαιωθείτε ότι όταν προσθέτετε το νέο favicon ονομάζεται favicon.ico.
Μπορεί να παρατηρήσετε ότι υπάρχουν τρεις άλλες εικόνες στον ριζικό κατάλογο του ιστότοπού σας: icon.png, tile.png και tile-wide.png. Σε τι χρησιμεύουν αυτά;
- Το icon.png χρησιμοποιείται για εικονίδια αφής της Apple. Εάν δημιουργείτε μια εφαρμογή ιστού, αυτό το εικονίδιο θα χρησιμοποιηθεί όταν ένας χρήστης iPhone ή iPad προσθέσει την εφαρμογή στην αρχική του οθόνη.
- Το tile.png και το tile-wide.png είναι για τη λειτουργία 'pin' των Windows και θα εμφανίζονται στα Windows 10.
Είναι καλή ιδέα να παρέχετε εικονίδια για όλες αυτές τις περιπτώσεις --- αλλά αν δεν δημιουργείτε μια εφαρμογή ιστού, μπορεί να είναι χαμηλότερης προτεραιότητας.
Προσθήκη περισσότερης λειτουργικότητας
Αφού προσθέσετε το HTML και το αγαπημένο σας (καθώς και οποιοδήποτε CSS θέλετε να συμπεριλάβετε), ο ιστότοπός σας είναι έτοιμος για δημοσίευση. Αυτό είναι το πόσο εύκολο είναι να χρησιμοποιήσετε HTML5 Boilerplate. Ανεβάστε το στον διακομιστή σας και τελειώσατε!
Δείτε πώς φαίνεται η σελίδα μας:
Όπως μπορείτε να δείτε, μερικές γραμμές κειμένου έχουν δημιουργήσει έναν πλήρως λειτουργικό (αν είναι λίγο ήπιο) ιστότοπο. Δεν είναι πολλά, αλλά χρειάστηκαν μόνο λίγα λεπτά. Και είναι εξαιρετικά επεκτάσιμο με το HTML5. Αυτή είναι η δύναμη του προτύπου Boilerplate.
Αλλά μπορείτε να κάνετε πολλά περισσότερα με το πρότυπο Boilerplate, αν θέλετε. Εάν αναζητάτε κάτι συγκεκριμένο, υπάρχει μεγάλη πιθανότητα να το βρείτε στην τεκμηρίωση βοήθειας.
Εάν δεν είστε σίγουροι τι μπορείτε να κάνετε με το HTML5, αλλά θέλετε να μάθετε, υπάρχουν πολλά σεμινάρια σχεδιασμού ιστοσελίδων εκεί έξω για να σας βοηθήσουν.
Μερίδιο Μερίδιο Τιτίβισμα ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ Είναι εντάξει η εγκατάσταση των Windows 11 σε μη συμβατό υπολογιστή;Μπορείτε τώρα να εγκαταστήσετε τα Windows 11 σε παλαιότερους υπολογιστές με το επίσημο αρχείο ISO ... αλλά είναι καλή ιδέα να το κάνετε;
Διαβάστε Επόμενο Σχετικά θέματα- Προγραμματισμός
- HTML5
- Φροντιστήρια κωδικοποίησης
Ο Dann είναι σύμβουλος στρατηγικής περιεχομένου και μάρκετινγκ που βοηθά τις εταιρείες να δημιουργήσουν ζήτηση και πελάτες. Επίσης, γράφει ιστολόγια σχετικά με τη στρατηγική και το μάρκετινγκ περιεχομένου στο dannalbright.com.
Περισσότερα από τον Dann AlbrightΕγγραφείτε στο newsletter μας
Εγγραφείτε στο ενημερωτικό μας δελτίο για τεχνικές συμβουλές, κριτικές, δωρεάν ebooks και αποκλειστικές προσφορές!
Κάντε κλικ εδώ για εγγραφή