Είτε πειραματίζεστε με τη δημιουργία του δικού σας ιστότοπου είτε έχετε αναρωτηθεί πώς μπορείτε να αλλάξετε κάτι στο θέμα του Tumblr, είναι σημαντικό να γνωρίζετε μερικά πράγματα για τη ραχοκοκαλιά του Διαδικτύου. Η γνώση του «αρκετά για να είναι επικίνδυνο» σας επιτρέπει να κατανοήσετε τι συμβαίνει πίσω από τα παρασκήνια χωρίς να χρειάζεται να ξοδέψετε 10.000+ ώρες για να μάθετε μια γλώσσα κωδικοποίησης. Μετά από σχεδόν 20 χρόνια δημιουργίας ιστοσελίδων, εδώ είναι τα 10 πράγματα που νομίζω ότι όλοι πρέπει να γνωρίζουν για τον περίεργο και υπέροχο κώδικα που αποτελεί τον ιστό.
Ο κώδικας της ιστοσελίδας αποτελείται από HTML, CSS και σενάρια
Όταν επισκέπτεστε το όνομα τομέα ενός ιστότοπου, είναι πιθανό να δείτε όμορφες εικόνες, καθαρή διάταξη και κείμενο πέρα από το περιεχόμενο της καρδιάς σας. Ομότιμος, όμως, πίσω από την κουρτίνα αυτού του οπτικού πίνακα smorgasboard, και θα βρείτε τα δομικά στοιχεία του ιστού: κώδικας.
Προσφορές VPN: Άδεια δια βίου για $ 16, μηνιαία προγράμματα $ 1 και άνω
Ο κώδικας της ιστοσελίδας αποτελείται από τρία πράγματα: HTML (Γλώσσα σήμανσης υπερκειμένου), CSS (Cascading Style Sheets) και σενάρια. Κάθε κομμάτι κώδικα συνεισφέρει ένα πολύτιμο μέρος στο να φαίνεται και να λειτουργεί ένας ιστότοπος με τον ίδιο τρόπο.
HTML είναι ο πιο ορατός κώδικας που κρύβεται πίσω από έναν ιστότοπο και μπορεί να προβληθεί με την προβολή του πηγαίου κώδικα μιας σελίδας. Τα στοιχεία αποτελούνται από λέξεις κλεισμένες σε chevrons που ονομάζονται ''. Ένα στοιχείο HTML έρχεται συνήθως σε ένα ζεύγος: μια ετικέτα ανοίγματος και μια ετικέτα κλεισίματος. Για παράδειγμα:
This is part of the body of the website Ορισμένα στοιχεία HTML δεν απαιτούν μια ετικέτα κλεισίματος επειδή όλα συμβαίνουν μέσα στην ίδια την ετικέτα. Δύο παραδείγματα είναι | _+_ | (το οποίο εισάγει μια εικόνα στη σελίδα) και | _++_ | (διάλειμμα γραμμής). Αντί για ξεχωριστή ετικέτα κλεισίματος, αυτά τα στοιχεία HTML έχουν απλώς μια καμπύλη μετά από το κλείσιμο του chevron.
CSS κρύβεται μέσα σε ένα εξωτερικό φύλλο στυλ ή μέσα στο HTML _ _+_ | στοιχείο. Το CSS χρησιμοποιεί επιλογείς για να τροποποιήσει το ύφος και το σχεδιασμό των στοιχείων HTML.
Ο τυπικός σας επιλογέας CSS μπορεί είτε να στοχεύσει ένα στοιχείο HTML απευθείας (εάν θέλετε να διαμορφώσετε ολόκληρο το στοιχείο) είτε την κλάση ενός στοιχείου (εάν θέλετε να στυλ μόνο μία παρουσία του στοιχείου). Σε ένα φύλλο στυλ, το στυλ ενός στοιχείου HTML μοιάζει με αυτό:
![]()
Η διαμόρφωση τάξης ενός στοιχείου μοιάζει με αυτό:
Σενάρια περιλαμβάνουν μορφές όπως Javascript, PHP, Ruby και άλλα. Τα σενάρια επιτρέπουν στον ιστότοπό σας να εμφανίζει πιο πολύπλοκο περιεχόμενο, όπως κινούμενα σχέδια. Τα σύνθετα σενάρια και οι βάσεις δεδομένων είναι τα συστήματα διαχείρισης περιεχομένου ισχύος (CMS). αφήνουν τον ιδιοκτήτη του ιστότοπου να επεξεργαστεί το κείμενο της σελίδας του και να προσθέσει αναρτήσεις ιστολογίου χωρίς να δει ποτέ ένα γλείψιμο HTML ή CSS. (Εάν χρησιμοποιείτε κάτι όπως το Tumblr ή το Wordpress, αυτά τα CMS τροφοδοτούνται από γλώσσα σεναρίου και βάσεις δεδομένων.)
Ο απλός κώδικας Javascript μπορεί να βρεθεί μέσα στο HTML | _+_ | ετικέτα ή σε εξωτερικό φύλλο σεναρίου. Τα πιο περίπλοκα σενάρια και οι κλήσεις βάσεων δεδομένων είναι ουσιαστικά κρυμμένα κατά την προβολή του HTML ενός ιστότοπου.
Το HTML αφορά τη δομή. Το CSS αφορά τον σχεδιασμό
Εάν σκέφτεστε να επεξεργαστείτε τον κώδικα του ιστότοπού σας, πρέπει να ξέρετε πού να επεξεργαστείτε πριν βουτήξετε. HTML και CSS έχουν το καθένα τους δικούς του σκοπούς στην ιστοσελίδα σας - δεν μπορείτε να απαιτήσετε από μια γλώσσα να εκτελέσει κάτι που δεν μπορεί.
Ο κώδικας HTML είναι όταν θέλετε να επεξεργαστείτε τοδομήμιας σελίδας: Εάν θέλετε να προσθέσετε μια εικόνα στην κεφαλίδα του ιστότοπού σας, θέλετε να επεξεργαστείτε το HTML σας.
Ο κώδικας CSS είναι όταν θέλετε να προσθέσετεσχέδιοστη σελίδα σας: Αν θέλετε να αλλάξετε τον τρόπο μιας εικόναςεμφανίζεταιστον ιστότοπό σας - αλλάξτε το μέγεθός του, προσθέστε ένα περίγραμμα, μετακινήστε το στη σελίδα - θέλετε να επεξεργαστείτε το CSS.
το καλύτερο mousepad για μαγικό ποντίκι
Το HTML και το CSS είναι γραμμικά
Ένα πρόγραμμα περιήγησης ιστού μεταφράζει τον κώδικα ενός ιστότοπου σε αυτό που βλέπετε όταν επισκέπτεστε μια σελίδα. Το πρόγραμμα περιήγησής σας εκτελεί αυτόν τον κώδικα από πάνω προς τα κάτω: Από προεπιλογή, τα στοιχεία HTML και το περιεχόμενό τους εμφανίζονται σε μια γραμμική λίστα.
Το CSS σας πρέπει να φύγειπριντον κώδικα HTML που θέλετε να στυλ: Λέτε ουσιαστικά στο πρόγραμμα περιήγησης ιστούπωςγια να στυλ ένα στοιχείο πριν φτάσει στο συγκεκριμένο στοιχείο.
Ομοίως, το CSS εκτελείται από πάνω προς τα κάτω και μπορεί να αντικατασταθεί: Εάν καθορίσετε στη γραμμή 5 του φύλλου στυλ ότι θέλετε οι παράγραφοί σας να έχουν μαύρο κείμενο, αλλά γράψτε ξανά στη γραμμή 20 ότι θέλετε οι παράγραφοι σας με πράσινο χρώμα, θα δείτε πράσινο κείμενο, όχι μαύρο στην τελική έκδοση.
Πώς να προσδιορίσετε ένα κομμάτι κώδικα που θέλετε να αλλάξετε
Για να αλλάξετε το περιεχόμενο ή το στυλ ενός στοιχείου HTML στον ιστότοπό σας, θα θέλετε να μάθετε δύο πράγματα: πώς ονομάζεται αυτό το στοιχείο και εάν έχει μια συγκεκριμένη κλάση CSS, μπορείτε να στοχεύσετε.
Μπορείτε να το κάνετε αυτό πολύ εύκολα με τον Επιθεωρητή του προγράμματος περιήγησής σας: Αυτό είναι ένα παράθυρο που εμφανίζεται παράλληλα με την οπτική έκδοση του ιστότοπού σας που περιέχει όλο τον κώδικα HTML και CSS.
Για να δείτε τον Επιθεωρητή στο Safari:
- μεταβείτε στο Σαφάρι μενού και επιλέξτε Προτιμήσεις .
- Κάνε κλικ στο Προχωρημένος καρτέλα και ελέγξτε το Εμφάνιση εργαλείων προγραμματιστή κουτί.
- Κλείσε το παράθυρο Προτιμήσεις.
- Κάντε δεξί κλικ (ή κλικ-κλικ) σε οποιοδήποτε μέρος του ιστότοπου θέλετε να προβάλετε και επιλέξτε Επιθεωρήστε το στοιχείο . Ο επιθεωρητής θα εμφανιστεί σε ένα επόμενο πλαίσιο.
Για να δείτε το Inspector στο Chrome:
φροντίδα μήλου για ρολόι μήλου
- Κάντε δεξί κλικ (ή κλικ-κλικ) σε οποιοδήποτε μέρος του ιστότοπου θέλετε να προβάλετε και επιλέξτε Επιθεωρώ . Ο επιθεωρητής θα εμφανιστεί σε ένα επόμενο πλαίσιο.
Μόλις ανοίξει ο Επιθεωρητής, μπορείτε να κάνετε ποντίκι σε οποιοδήποτε κομμάτι κώδικα και το αντίστοιχο στοιχείο στην ιστοσελίδα σας θα επισημανθεί ως πλαίσιο.
Μπορείτε να επεκτείνετε αυτά τα αναπτυσσόμενα βέλη για να δείτε ένθετα στοιχεία HTML (κομμάτια που κρύβονται μέσα σε μεγαλύτερα στοιχεία HTML) και να προσδιορίσετε το κομμάτι κώδικα που θέλετε να αλλάξετε. Εάν θέλετε να στοχεύσετε μια συγκεκριμένη παρουσία ενός στοιχείου, θέλετε να αναζητήσετε την ιδιότητα 'κλάσης' αυτού του στοιχείου.
Πού πηγαίνετε για να επεξεργαστείτε τον κώδικά σας
Αφού προσδιορίσετε τι θέλετε να διορθώσετε σε έναν ιστότοπο, πρέπει να ξέρετε πού να πάτε.
Σε πολλούς αρχάριους κατασκευαστές ιστοσελίδων WYSIWYG (αυτό που βλέπετε είναι αυτό που λαμβάνετε) Squarespace δεν θα σας αφήσει να βουτήξετε απευθείας στο HTML, αλλά προσφέρετε μια περιοχή 'προσαρμοσμένου CSS' σε περίπτωση που θέλετε να κάνετε προσαρμοσμένες τροποποιήσεις πέρα από αυτό που προσφέρει ο οπτικός επεξεργαστής της υπηρεσίας. Θα μπορείτε να αλλάξετε τον σχεδιασμό των υφιστάμενων στοιχείων HTML, αλλά δεν θα μπορείτε να προσθέσετε εντελώς νέες ενότητες.
Αντίθετα, σε ορισμένες υπηρεσίες ιστολογίου αρέσει Tumblr θα σας επιτρέψει να προσθέσετε προσαρμοσμένο CSSκαιβουτήξτε απευθείας στην πηγή HTML και CSS. Εάν μια υπηρεσία προσφέρει αυτήν τη δυνατότητα, ενδέχεται να δείτε μια επιλογή που λέει Επεξεργασία σε HTML ή Συντάκτης , το οποίο σας επιτρέπει να επεξεργαστείτε και να αλλάξετε απευθείας τον κώδικα HTML και CSS.
Πώς να σημειώσετε τον κώδικα
Όταν πειραματίζεστε για πρώτη φορά με τον κώδικά σας, χρησιμοποιήστε σημειώσεις (ή «σχόλια», όπως λέγονται στην ομιλία προγραμματιστών ιστού). Χρησιμοποιήστε τα νωρίς και συχνά.Ειδικάεάν πειραματίζεστε με τον κωδικό μία ώρα τη φορά. Η προσθήκη τεκμηρίωσης στον κωδικό σας μπορεί να σας βοηθήσει όταν επιστρέψετε σε αυτήν μια εβδομάδα αργότερα και ξεχάσετε εντελώς τι κάνατε ή τι υποτίθεται ότι θα κάνει αυτό το μπλοκ κώδικα.
Μια σημείωση HTML μοιάζει με αυτήν:
Μια σημείωση μέσα σε ένα φύλλο στυλ CSS μοιάζει με αυτό:
body { background: #000; } Αυτά δεν θα εμφανιστούν πουθενά στην τελική ιστοσελίδα σας, αλλά ζωντανά μέσα στον κώδικα HTML και CSS για αναφορά (και σε οποιονδήποτε άλλον βλέπει τον πηγαίο κώδικα).
Το καλύτερο φύλλο εξαπάτησης HTML/CSS
Θέλετε να κάνετε κάτι σε HTML ή CSS αλλά δεν είστε σίγουροι πώς; Χρειάζεστε μια αναφορά για το πώς λειτουργεί ένα συγκεκριμένο στοιχείο HTML ή ιδιότητα CSS; W3Schools προσφέρει λεπτομερείς σημειώσεις και επεξηγήσεις για κάθε υπάρχον κώδικα HTML και CSS εκεί έξω - και επίσης Javascript.
Αν θέλετε πραγματικάμαθαίνωπώς να κωδικοποιήσετε από την αρχή, ελέγξτε έξω Codecademy είναι φανταστικά μαθήματα.
ορισμός παλιά ψυχή
Πού θα βρείτε παραδείγματα έργων
Αν ψάχνετε για έμπνευση για τον ιστότοπό σας ή απλά θέλετε να δείτε πώς έγινε κάτι, μη διστάσετε να χρησιμοποιήσετε το Inspector του προγράμματος περιήγησής σας σε οποιαδήποτε σελίδα. Μπορείτε να πάρετε κομμάτια κώδικα απευθείας από τον επιθεωρητή χρησιμοποιώντας αντιγραφή και επικόλληση.
Αν θέλετε να βρείτε κάτι συγκεκριμένο, ρίξτε μια ματιά Codepen , ένα μηδέν για το έργο για χιλιάδες προγραμματιστές ιστού. Μπορείτε να αναζητήσετε κάθε είδους ειδικό κώδικα: ένα μενού απόκρισης, κινούμενα κουμπιά, μια οθόνη iPhone ενσωματωμένη σε CSS - ό, τι σας εντυπωσιάζει.
Πώς να αντιμετωπίσετε μια κακή ιστοσελίδα
Δεν είστε σίγουροι πώς να διορθώσετε ένα πρόβλημα ή γιατί υπάρχει πρόβλημα; Μου αρέσει να αναφέρομαι στη λίστα 'Έχετε δοκιμάσει; ...':
- ... Αποθήκευση της δουλειάς σας;
- ... Βεβαιωθείτε ότι οι ετικέτες σας (ή οι επιλογείς) είναι κλειστές;
- ... Έλεγχος για τυχόν ελλιπή εισαγωγικά ή εξωτερικά κενά στον κωδικό σας;
- ... Βεβαιωθείτε ότι η κλάση CSS έχει οριστεί στο στοιχείο HTML που αλλάζετε;
- ... Διαβάζετε στο W3Schools για να βεβαιωθείτε ότι το στυλ CSS σας μπορεί να κάνει αυτό που θέλετε;
- ... Επιστροφή στην τελευταία αποθηκευμένη έκδοση κώδικα και εκκίνηση από την αρχή;
- ... Αναζήτηση για το πρόβλημά σας στο Google ή Υπερχείλιση στοίβας ;
Μάθετε πότε να φύγετε
Μερικές φορές ένα πρόβλημα είναι πολύ μεγάλο για να το διορθώσετε και αυτό είναι εντάξει, ειδικά αν ξεκινάτε με HTML και CSS.
Αν είναι ένα μικρό πρόβλημα που ξέρω εγώπρέπειμπορώ να διορθώσω, αφαιρώ λίγο χρόνο από το έργο και κάνω κάτι εντελώς διαφορετικό. Ο χώρος είναι καλός για τον εγκέφαλό σας και καλό για τη λογική σας. χωρίς αυτό, μπορεί να αντιμετωπίσετε τόσο πολύ ένα πρόβλημα που η λύση μπορεί να σας κοιτάζει κατάματα, αλλά είστε πολύ θυμωμένοι ή απογοητευμένοι για να το αναγνωρίσετε.
Επίσης, δεν υπάρχει τίποτα κακό με την αναζήτηση βοήθειας από έμπειρους προγραμματιστές σε ιστότοπους όπως Υπερχείλιση στοίβας ? μπορούν συχνά να σας βοηθήσουν να εντοπίσετε προβλήματα και να επιστρέψετε στο δρόμο σας.
Αν είναι κάτι που δεν μπορείτε να λύσετε και δεν θέλετε να μάθετε, σκεφτείτε να προσλάβετε προγραμματιστή ή σχεδιαστή Ιστού. Υπάρχουν χιλιάδες απίστευτα ταλαντούχοι κωδικοποιητές εκεί έξω και αν το έργο σας απαιτεί λίγο περισσότερη προσπάθεια ή επαγγελματισμό από ό, τι είστε διατεθειμένοι να αφιερώσετε χρόνο, οι ικανότητές τους μπορεί να είναι ανεκτίμητες.
Οι αγαπημένες σας συμβουλές; Ερωτήσεις;
Έχετε κάποιες συμβουλές που πρέπει να έχετε για να ξεκινήσετε με τον κώδικα της ιστοσελίδας; Έχετε ερωτήσεις σχετικά με τις προτάσεις μου; Ενημερώστε μας παρακάτω.
