5 βήματα για την κατανόηση του βασικού κώδικα HTML
Διαφήμιση
Το HTML είναι ένα ζωτικό μέρος του ιστού, όπως το γνωρίζουμε. Και ενώ λίγοι σχεδιαστές ιστοσελίδων δημιουργούν σελίδες με χειροκίνητη πληκτρολόγηση HTML, είναι ακόμα χρήσιμο να γνωρίζουμε λίγο.
Θα εξετάσουμε ορισμένα βασικά στοιχεία της γλώσσας, συμπεριλαμβανομένου του τι είναι πραγματικά το HTML, κάποιες θεμελιώδεις έννοιες και πώς αλληλεπιδρά με άλλες γλώσσες. Σκεφτείτε αυτό ως ένα μάθημα συντριβής "HTML για ανδρείκελα".
Βασικά HTML: Τι είναι το HTML;
Το HTML σημαίνει Hypertext Markup Language . Και ενώ μερικές φορές είναι συγκεντρωμένες σε γλώσσες προγραμματισμού, αυτό δεν είναι ακριβές.
Ως γλώσσα σήμανσης, η HTML μόνο σας επιτρέπει να δημιουργήσετε τη διάταξη εμφάνισης των σελίδων. Μια πραγματική γλώσσα προγραμματισμού, όπως η Java ή η C ++, περιέχει λογική και εντολές που εκτελούνται.
Ενώ είναι απλό, το HTML βρίσκεται στη ραχοκοκαλιά κάθε σελίδας στον ιστό. Είναι υπεύθυνο για το τι κείμενο εμφανίζεται με έντονους χαρακτήρες, προσθέτοντας εικόνες και συνδέοντας με άλλες σελίδες. Έχουμε μια Συχνή Συχνότητα HTML Οι Βασικές Συχνές Ερωτήσεις HTML θα πρέπει να δώσετε σελιδοδείκτη Οι Βασικές Συχνές Ερωτήσεις HTML θα πρέπει να κάνετε Bookmark Η HTML υπήρξε για λίγο, έτσι είναι καιρός να μάθετε τα βασικά. Εδώ είναι τι είναι, πώς λειτουργεί και πώς μπορείτε να γράψετε κάποια κοινά στοιχεία σε HTML σήμερα! Διαβάστε περισσότερα που εξηγούν περισσότερα.
Μπορείτε να κάνετε δεξί κλικ στις περισσότερες ιστοσελίδες του προγράμματος περιήγησής σας και να επιλέξετε Προβολή προέλευσης σελίδας ή παρόμοια για να δείτε το HTML πίσω από αυτές. Αυτό πιθανότατα θα περιέχει επίσης πολλούς κώδικες που δεν είναι HTML, αλλά μπορείτε να τα διαπεράσετε.
Ακόμα κι αν έχετε μηδενική εμπειρία με γλώσσες σήμανσης ή προγραμματισμού, η εκμάθηση ενός κώδικα HTML θα σας κάνει πιο ενημερωμένο χρήστη του διαδικτύου. Ας περάσουμε από πέντε βασικά βήματα για να σας βοηθήσουμε να καταλάβετε πώς λειτουργεί το HTML. Θα παράσχουμε παραδείγματα στην πορεία.
Βήμα 1: Κατανόηση της έννοιας των ετικετών
Το HTML χρησιμοποιεί ένα σύστημα ετικετών για την κατηγοριοποίηση διαφόρων στοιχείων του εγγράφου.
Οι περισσότερες ετικέτες έρχονται σε ζεύγη για να τυλίξουν το επηρεαζόμενο κείμενο μέσα τους. Εδώ είναι ένα απλό παράδειγμα (η ετικέτα κάνει το κείμενο τολμηρό, θα το συζητήσουμε περισσότερο σε μια στιγμή.)
This is some bold text . Παρατηρήστε πώς ξεκινάει η ετικέτα κλεισίματος με μια προς τα εμπρός κάθετο (/). Αυτό σημαίνει μια ετικέτα κλεισίματος, η οποία είναι σημαντική. Εάν δεν κλείσετε μια ετικέτα, τα πάντα από την αρχή μέχρι τώρα θα έχουν αυτό το χαρακτηριστικό.
Ωστόσο, δεν έχουν όλες οι ετικέτες ένα ζευγάρι. Ορισμένα στοιχεία HTML, που ονομάζονται κενά στοιχεία, δεν έχουν περιεχόμενο και υπάρχουν μόνοι τους. Ένα παράδειγμα είναι το
Βήμα 2: Η διάταξη HTML του σκελετού
Ένα σωστό έγγραφο HTML πρέπει να έχει καθοριστεί ορισμένες ετικέτες, ώστε να είναι σωστά τοποθετημένες. Αυτά είναι τα βασικά μέρη:
- Κάθε έγγραφο HTML πρέπει να ξεκινά με
να δηλωθεί ως τέτοια. Έτσι, η ετικέτα κλεισίματος,, είναι το τελευταίο στοιχείο σε ένα αρχείο HTML. - Στη συνέχεια, το
περιλαμβάνει πληροφορίες όπως τον τίτλο της σελίδας, διάφορα σενάρια που εκτελούνται στη σελίδα και παρόμοια. Όπως υποδηλώνει το όνομα, αυτό συνήθως έρχεται αμέσως μετά την αρχικήετικέτα. Ο τελικός χρήστης δεν βλέπει μεγάλο μέρος του περιεχομένου αυτών των ετικετών. - Τέλος, το
ετικέτα περιέχει το κείμενο της σελίδας που βλέπει ο αναγνώστης (συν πολύ περισσότερα). Εδώ θα βρείτε εικόνες, συνδέσμους και πολλά άλλα.
Δεδομένου ότι το αποτελεί το μεγαλύτερο μέρος ενός εγγράφου HTML, το υπόλοιπο του walkthrough μας εξετάζει τα στοιχεία που σχετίζονται με αυτό.
Βήμα 3: Βασικές ετικέτες HTML για μορφοποίηση
Στη συνέχεια, ας δούμε κάποιες κοινές ετικέτες που συνθέτουν έγγραφα HTML. Φυσικά, δεν είναι δυνατόν να καλύψουμε κάθε στοιχείο, επομένως θα αναθεωρήσουμε μερικά από τα πιο σημαντικά. Έχουμε καλύψει πολλά ακόμα παραδείγματα HTML 17 Απλά παραδείγματα κώδικα HTML μπορείτε να μάθετε σε 10 λεπτά 17 Απλά παραδείγματα HTML κώδικα μπορείτε να μάθετε σε 10 λεπτά Θέλετε να δημιουργήσετε μια βασική ιστοσελίδα; Μάθετε αυτά τα παραδείγματα HTML και δοκιμάστε τα σε ένα πρόγραμμα επεξεργασίας κειμένου για να δείτε πώς φαίνονται στο πρόγραμμα περιήγησής σας. Διαβάστε περισσότερα αν αυτά δεν σας ικανοποιούν.
Αν αυτές οι ετικέτες φαίνονται αρκετά βασικές, θυμηθείτε ότι το HTML δημιουργήθηκε μέχρι το 1993. Ο ιστός ήταν πολύ κείμενο βασισμένος τότε στα πρώτα του στάδια.
Απλή μορφοποίηση κειμένου
Το HTML υποστηρίζει βασικά στυλ κειμένου, όπως θα βρείτε στο Microsoft Word:
- οι ετικέτες κάνουν το κείμενο έντονα .
- ετικέτες (που σημαίνει "έμφαση") θα κάνει πλινθόρισμα κειμένου.
Το HTML υποστηρίζει επίσης την παλαιότερη ετικέτα για έντονα και για πλάγια γραφή. Ωστόσο, είναι προτιμότερο να χρησιμοποιήσετε τα παραπάνω.
Εν ολίγοις, και δείξτε πώς πρέπει να γίνει κατανοητό κάτι, ενώ οι τελευταίες ετικέτες σας λένε μόνο πώς θα πρέπει να φαίνονται. Αυτές οι προηγούμενες ετικέτες είναι πιο προσιτές για αναγνώστες οθόνης που χρησιμοποιούνται από άτομα με προβλήματα όρασης.
Παράγραφο και άλλες διαιρέσεις
HTML του ετικέτα σας επιτρέπει να ορίσετε μια ενότητα του εγγράφου. Συνήθως, αυτό συνδυάζεται με το CSS (δείτε παρακάτω) για να μορφοποιήσετε μια ενότητα με έναν συγκεκριμένο τρόπο.
ο
ετικέτα σας επιτρέπει να διαιρέσετε το κείμενο σε παραγράφους. Τα προγράμματα περιήγησης θα τοποθετήσουν αυτόματα χώρο πριν και μετά από αυτά, επιτρέποντάς σας φυσικά να σπάσετε το κείμενο.
Μπορείτε να προσθέσετε κεφαλίδες στο έγγραφό σας και να διευκολύνετε την παρακολούθηση χρησιμοποιώντας το
διά μέσου ετικέτες. H1 είναι η πιο σημαντική κεφαλίδα, ενώ η H6 είναι η λιγότερο σημαντική. Σχεδόν κάθε άρθρο του MakeUseOf χρησιμοποιεί κεφαλίδες H2 και H3 για την οργάνωση πληροφοριών.
Το πλήκτρο Enter για να προσθέσετε διαχωριστικά γραμμής στο έγγραφο HTML δεν θα τα εμφανίσει. Αντ 'αυτού, μπορείτε να χρησιμοποιήσετε
Ακολουθεί ένα παράδειγμα που χρησιμοποιεί όλα αυτά:
Παράδειγμα Επικεφαλίδα
Αυτή είναι μια παράγραφος.
Αυτό είναι ένα δεύτερο
που χωρίζεται μεταξύ δύο γραμμών.
Βήμα 4: Εισαγωγή εικόνων
Οι εικόνες αποτελούν ζωτικό μέρος των περισσότερων ιστοσελίδων. Μπορείτε να τα προσθέσετε εύκολα με HTML, ακόμα και να ορίσετε διαφορετικές ιδιότητες για αυτούς.
Εισάγετε μια εικόνα χρησιμοποιώντας το src μπορείτε να καθορίσετε από πού θέλετε να φορτωθεί η εικόνα.
Ένα άλλο σημαντικό χαρακτηριστικό του alt . Το κείμενο Alt σάς επιτρέπει να περιγράψετε την εικόνα για τους αναγνώστες οθόνης ή σε περίπτωση που η εικόνα δεν φορτωθεί σωστά. Μπορείτε να πατήσετε το ποντίκι πάνω από μια εικόνα για να δείτε το αλλιώδες κείμενο.
Χρησιμοποιήστε τα στοιχεία width και height για να καθορίσετε τον αριθμό των pixel στην οποία εμφανίζεται η εικόνα.
Τοποθετήστε τα όλα μαζί και μια ετικέτα εικόνας μοιάζει με αυτή:
Βήμα 5: Προσθήκη συνδέσμων
Ο Παγκόσμιος Ιστός δεν θα ήταν πολύ ένας ιστός χωρίς συνδέσμους προς άλλες σελίδες. Χρησιμοποιώντας την ετικέτα, μπορείτε να συνδέσετε άλλες σελίδες σε οποιοδήποτε κείμενο.
μεσα στην tag, το χαρακτηριστικό href λέει πού συνδέετε. Η απλή επικόλληση της διεύθυνσης URL θα λειτουργήσει σωστά. Μπορείτε να χρησιμοποιήσετε το στοιχείο title για να προσθέσετε ένα κομμάτι κειμένου που εμφανίζεται όταν κάποιος κινείται πάνω από το σύνδεσμο.
Ένας βασικός σύνδεσμος μοιάζει με αυτό:
Visit Google ο ετικέτα έχει πολλά άλλα πιθανά στοιχεία, αλλά δεν θα τα βγάλουμε εδώ.
Πώς συνδέεται το HTML με το CSS και τη JavaScript
Έχουμε εξετάσει τα βασικά της HTML και πώς δημιουργεί μια ιστοσελίδα. Αλλά όπως μπορείτε να φανταστείτε, το HTML μόνο δεν το κόβει για τον σύγχρονο ιστό. Απλές ιστοσελίδες HTML ήταν κοινές στις "Web 1.0" ημέρες, όταν οι περισσότεροι ιστότοποι δεν ήταν τίποτα περισσότερο από ένα στατικό κείμενο.
Αλλά τώρα, έχουμε πολλά περισσότερα. CSS (Cascading Style Sheets) Τα Βασικά CSS3 Properties Cheat Sheet Τα Βασικά CSS3 Properties Cheat Sheet Μάστερ βασική σύνταξη CSS με τα αρχεία CSS3 cheat. Το Read More είναι μια γλώσσα που χρησιμοποιείται για να περιγράψει την εμφάνιση του κειμένου που ετοιμάσατε σε HTML. Θυμηθείτε το ετικέτα που συζητήσαμε; Μέσα σε αυτό (και σε άλλες ετικέτες), μπορείτε να ορίσετε ένα χαρακτηριστικό class . Στη συνέχεια, στο συνοδευτικό έγγραφο CSS, μπορείτε να γράψετε οδηγίες σχετικά με τον τρόπο εμφάνισης αυτής της class .
Μπορείτε να ορίσετε αυτά τα στοιχεία στυλ μέσα στον κώδικα HTML, αλλά αυτό θεωρείται κακή πρακτική, καθώς είναι πολύ πιο δύσκολο να διατηρηθεί. Μάθετε περισσότερα με αυτά τα απλά παραδείγματα CSS 10 Απλά παραδείγματα κώδικα CSS μπορείτε να μάθετε σε 10 λεπτά 10 απλά παραδείγματα κώδικα CSS μπορείτε να μάθετε σε 10 λεπτά Θα εξετάσουμε τον τρόπο δημιουργίας ενός inline φύλλου στυλ ώστε να μπορείτε να εξασκήσετε τις δεξιότητές σας CSS. Στη συνέχεια, θα προχωρήσουμε σε 10 βασικά παραδείγματα CSS. Από εκεί, η φαντασία σας είναι το όριο! Διαβάστε περισσότερα .
JavaScript
Έχουμε δει ότι το HTML ορίζει το περιεχόμενο και το CSS καθορίζει την εμφάνιση. Το JavaScript, το τελευταίο μέλος του τρίτου που είναι ζωτικής σημασίας για τον ιστό, επιτρέπει στις ιστοσελίδες να ανταποκρίνονται στις ενέργειες των ανθρώπων χωρίς να φορτώνουν νέα σελίδα κάθε φορά.
Για παράδειγμα, το JavaScript επιτρέπει σε έναν ιστότοπο να σας προειδοποιεί ότι ο κωδικός πρόσβασης που εισαγάγατε δεν πληροί τις απαιτήσεις του πριν προσπαθήσετε να τον υποβάλετε. Ένας σχεδιαστής ιστοσελίδων μπορεί να χρησιμοποιήσει το JavaScript για να μετακινήσει τις εικόνες σε μια παρουσίαση διαφανειών ή να προτρέψει τον χρήστη για είσοδο.
Αυτά είναι μερικά μόνο στοιχειώδη παραδείγματα. Το JavaScript είναι μια γλώσσα scripting που είναι ικανή να κάνει πολλά και είναι σχετικά πολύ πιο περίπλοκη από το HTML και το CSS. Δείτε την επισκόπηση του JavaScript Τι είναι το JavaScript και πώς λειτουργεί; Τι είναι το JavaScript και πώς λειτουργεί; Τι είναι το Javascript; Είναι μια γλώσσα προγραμματισμού που χρησιμοποιείται για την ενίσχυση ιστοσελίδων. Περιλαμβάνει τη δυναμική ενημέρωση ιστοσελίδων, διεπαφών χρήστη και πολλά άλλα. Ας δούμε τι είναι το Javascript. Διαβάστε περισσότερα για πολλά άλλα.
Η εξέταση του πλήρους πεδίου του σχεδιασμού ιστοσελίδων είναι πέρα από το πεδίο εφαρμογής αυτού του άρθρου, αλλά αρκεί να πούμε ότι η αλληλεπίδραση HTML με άλλες γλώσσες δημιουργεί τις ιστοσελίδες που γνωρίζουμε σήμερα.
Η εξέλιξη του HTML
Είναι σημαντικό να σημειωθεί ότι η HTML δεν είναι στατική. Η HTML έχει περάσει από αρκετές αναθεωρήσεις, με την πιο πρόσφατη να είναι HTML 5. Ειδικότερα, αυτό το πρότυπο υποστηρίζει εγγενή ενσωμάτωση βίντεο αντί να στηρίζεται σε ιδιόκτητες μορφές όπως το Adobe Flash.
Οι νέες επαναλήψεις της HTML δηλώνουν επίσης ορισμένες αρχαϊκές ετικέτες που καταργούνται από καιρό σε καιρό. Αυτές περιλαμβάνουν απαίσια ετικέτες όπως και (που κύλιση και το φλας κείμενο αντίστοιχα) που συνήθως εμφανίζονται στο σχεδιασμό ιστοσελίδων της δεκαετίας του 1990. Συνεπώς, λάβετε υπόψη ότι τα πρότυπα αλλάζουν με την πάροδο του χρόνου.
Μια μικρή γνώση HTML πηγαίνει πολύ δρόμο
Πραγματοποιήσαμε μια σύντομη περιήγηση στο πώς λειτουργεί ένα έγγραφο HTML. Τώρα γνωρίζετε τις βασικές αρχές της δομής των ιστοσελίδων. Ακόμη και αν δεν συνεχίζετε να δημιουργείτε ιστοσελίδες, γνωρίζετε λίγο περισσότερο το web που χρησιμοποιείτε κάθε μέρα.
Για να μάθετε περισσότερα, αναβαθμίστε τις δεξιότητες ανάπτυξης ιστού σας με βασικά εργαλεία Αναβαθμίστε τις ικανότητές σας για την ανάπτυξη ιστού με αυτά τα 10 βασικά εργαλεία Αναβάθμιση των δεξιοτήτων ανάπτυξης ιστού με αυτά τα 10 βασικά εργαλεία Έτοιμοι να αρχίσετε να αναπτύσσετε ιστότοπους; Αυτά τα ηλεκτρονικά εργαλεία για νέους και εξειδικευμένους προγραμματιστές ιστού εγγυώνται την ενίσχυση των δεξιοτήτων σας! Διαβάστε περισσότερα και στη συνέχεια δείτε τον οδηγό μας για το πώς να σχεδιάσετε τον πρώτο ιστοχώρο σας Πώς να φτιάξετε μια ιστοσελίδα: Για αρχάριους Πώς να φτιάξετε μια ιστοσελίδα: Για αρχάριους Σήμερα θα σας καθοδηγήσω μέσα από τη διαδικασία κατασκευής ενός πλήρους ιστοτόπου από την αρχή. Μην ανησυχείτε αν αυτό ακούγεται δύσκολο. Θα σας καθοδηγήσω σε κάθε βήμα του δρόμου. Διαβάστε περισσότερα .
Πιστωτική εικόνα: Belyaevskiy / Depositphotos
Εξερευνήστε περισσότερα σχετικά με: HTML, HTML5, JavaScript, Προγραμματισμός, Ανάπτυξη Ιστού, Εργαλεία για Webmasters.
