5 βήματα για την κατανόηση του βασικού κώδικα HTML

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

Θα εξετάσουμε ορισμένα βασικά της γλώσσας, συμπεριλαμβανομένου του τι είναι πραγματικά το HTML, κάποιες θεμελιώδεις έννοιες και πώς αλληλεπιδρά με άλλες γλώσσες. Σκεφτείτε αυτό ως μια πορεία συντριβής «HTML για ανδρείκελα».

Βασικά στοιχεία HTML: Τι είναι το HTML;

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

Σαν γλώσσα σήμανσης , Η HTML σάς επιτρέπει μόνο να δημιουργήσετε τη διάταξη εμφάνισης των σελίδων. Μια αληθεια γλώσσα προγραμματισμού , όπως η Java ή η C ++, περιέχει λογική και εντολές που εκτελούνται.

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

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

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

Βήμα 1: Κατανόηση της έννοιας των ετικετών

Η HTML χρησιμοποιεί ένα σύστημα ετικέτες για την κατηγοριοποίηση διαφορετικών στοιχείων του εγγράφου.

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

η ετικέτα δημιουργεί κείμενο τολμηρός ? θα το συζητήσουμε περισσότερο σε λίγο.)

This is some bold text .
Παρατηρήστε πώς ξεκινά η ετικέτα κλεισίματος με κάθετο (/). Αυτό σημαίνει μια ετικέτα κλεισίματος, η οποία είναι σημαντική. Εάν δεν κλείσετε μια ετικέτα, όλα από την αρχή και μετά θα έχουν αυτό το χαρακτηριστικό.
πώς να συγχωνεύσετε φύλλα εργασίας στο excel

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

Βήμα 2: Το Skeleton HTML Layout

Ένα σωστό έγγραφο HTML πρέπει να έχει ορισμένες ετικέτες έτσι ώστε να έχει σχεδιαστεί σωστά. Αυτά είναι τα βασικά μέρη:

Κάθε έγγραφο HTML πρέπει να ξεκινά με | _+_ | να δηλωθεί ως τέτοια. Έτσι, η ετικέτα κλεισίματος, | _+_ | , είναι το τελευταίο στοιχείο σε ένα αρχείο HTML.

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

Τέλος, το | _+_ | Η ετικέτα περιέχει το κείμενο της σελίδας που βλέπει ο αναγνώστης (συν πολλά περισσότερα). Εδώ θα βρείτε εικόνες, συνδέσμους και πολλά άλλα.

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

Βήμα 3: Βασικές ετικέτες HTML για μορφοποίηση

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

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

Απλή μορφοποίηση κειμένου
Το HTML υποστηρίζει βασικά στυλ κειμένου όπως θα βρείτε στο Microsoft Word:

| _+_ | οι ετικέτες δημιουργούν κείμενο τολμηρός Το

| _+_ | ετικέτες (που σημαίνει «έμφαση») θα τυπώνω με κυρτά γράμματα κείμενο.

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

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

Παράγραφος και άλλα τμήματα
HTML's
Η ετικέτα σας επιτρέπει να ορίσετε μια ενότητα του εγγράφου. Συνήθως, αυτό συνδυάζεται με CSS (δείτε παρακάτω) για να μορφοποιήσετε μια ενότητα με έναν συγκεκριμένο τρόπο.

ο

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

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

διά μέσου

ετικέτες. Το H1 είναι η πιο σημαντική κεφαλίδα, ενώ το H6 είναι λιγότερο σημαντικό. Σχεδόν κάθε άρθρο του MakeUseOf χρησιμοποιεί κεφαλίδες H2 και H3 για την οργάνωση πληροφοριών.

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

για να προσθέσετε ένα διάλειμμα γραμμής.

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

Βήμα 4: Εισαγωγή εικόνων

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

Εισάγετε μια εικόνα χρησιμοποιώντας το

ετικέτα. Συνδυάζοντας αυτό με το

Το χαρακτηριστικό σάς επιτρέπει να καθορίσετε από πού θέλετε να φορτωθεί η εικόνα.

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

Χρησιμοποιήστε το
και

στοιχεία για τον καθορισμό του αριθμού των εικονοστοιχείων στα οποία εμφανίζεται η εικόνα.

Βάλτε τα όλα μαζί και μια ετικέτα εικόνας μοιάζει με αυτήν:

Example Heading This is one paragraph. This is a second paragraph split between two lines.
Βήμα 5: Προσθήκη συνδέσμων

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

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

μεσα στην
src
ετικέτα, το

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

Ένας βασικός σύνδεσμος μοιάζει με αυτόν:

width
ο
height
η ετικέτα έχει πολλά άλλα πιθανά στοιχεία, αλλά δεν θα τα καταφέρουμε εδώ.

Πώς συνδέεται η HTML με CSS και JavaScript

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

Τώρα όμως, έχουμε πολλά περισσότερα. Το CSS (Cascading Style Sheets) είναι μια γλώσσα που χρησιμοποιείται για να περιγράψει πώς πρέπει να φαίνεται το κείμενο που ετοιμάσατε σε HTML. Θυμηθείτε το

ετικέτα που συζητήσαμε; Μέσα σε αυτό (και άλλες ετικέτες), μπορείτε να ορίσετε ένα

Χαρακτηριστικό. Στη συνέχεια, στο συνοδευτικό έγγραφο CSS, μπορείτε να γράψετε οδηγίες για το πώς

πρέπει να κοιτάξει.

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

JavaScript

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

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

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

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

Η εξέλιξη της HTML

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

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

Λίγη γνώση HTML πηγαίνει πολύ

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

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

Πιστωτική εικόνα: Belyaevskiy/ Φωτογραφίες καταθέσεων
Μερίδιο Μερίδιο Τιτίβισμα ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ 5 Συμβουλές για την υπερφόρτιση των μηχανών σας VirtualBox Linux
Έχετε κουραστεί από τις κακές επιδόσεις που προσφέρουν οι εικονικές μηχανές; Δείτε τι πρέπει να κάνετε για να αυξήσετε την απόδοση του VirtualBox.
Διαβάστε Επόμενο Σχετικά θέματα

Προγραμματισμός

HTML

Ανάπτυξη διαδικτύου

JavaScript

Εργαλεία για Webmasters

Προγραμματισμός

HTML5

Σχετικά με τον Συγγραφέα Μπεν Στέγκνερ(1735 άρθρα που δημοσιεύτηκαν)
Ο Μπεν είναι Αναπληρωτής Συντάκτης και Διευθυντής Ενσωμάτωσης στο MakeUseOf. Άφησε τη δουλειά του για να γράψει πλήρη απασχόληση το 2016 και δεν έχει κοιτάξει ποτέ πίσω. Καλύπτει σεμινάρια τεχνολογίας, συστάσεις για βιντεοπαιχνίδια και πολλά άλλα ως επαγγελματίας συγγραφέας για πάνω από επτά χρόνια.
Περισσότερα από τον Ben Stegner
Εγγραφείτε στο newsletter μας

Εγγραφείτε στο ενημερωτικό μας δελτίο για τεχνικές συμβουλές, κριτικές, δωρεάν ebooks και αποκλειστικές προσφορές!
Κάντε κλικ εδώ για εγγραφή

Κατηγορία Προγραμματισμός