Τι είναι η HTML;

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

Τη ραχοκοκαλιά του Διαδικτύου

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

Κάθε φορά που πηγαίνετε σε μια σελίδα στο Internet, ζητάει ουσιαστικά ένα αρχείο HTML που είναι αποθηκευμένο στο διακομιστή. Στη συνέχεια, το πρόγραμμα περιήγησης που χρησιμοποιείτε, όπως το Chrome ή το Firefox, θα αναλύσει το HTML και θα σας εμφανίσει με τον τρόπο που προορίζεται.

Η καθολικότητα και η ευελιξία της HTML το καθιστούν το πιο δημοφιλές γλώσσα σήμανσης στον κόσμο. Οι περισσότεροι προγραμματιστές Web του Front-End ξεκινούν από Μάθηση πώς να κωδικοποιήσετε σε HTML. Τα εργαλεία μεταφοράς και πτώσης και οι συντάκτες WYSIWYG μεταφράζονται τελικά σε HTML, έτσι ώστε τα προγράμματα περιήγησης να μπορούν να τα αναλύσουν.

ΣΧΕΤΙΖΕΤΑΙ ΜΕ: Τι είναι μια γλώσσα σήμανσης;

Πώς λειτουργεί το HTML

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

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

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

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

ΣΧΕΤΙΖΕΤΑΙ ΜΕ: Πώς να απενεργοποιήσετε (και να ενεργοποιήσετε) Javascript στο Google Chrome

Βασικά στοιχεία HTML

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

 & lt; a href = "https://www.howtogeek.com" & gt; to geek & lt; / a & gt; 

Πώς-να geek

Χρησιμοποιείτε το & lt; a & gt; εντολή για τη δημιουργία ενός συνδέσμου. Η διεύθυνση URL είναι όπου ο σύνδεσμος θα επισημάνει και το κείμενο που διαβάζει "How-geek" είναι το πώς θα εμφανιστεί σε έναν τελικό χρήστη.

 & lt; bold & lt; / b & gt; & lt; i & gt; iTalic & lt; / I & GT; & lt; u & gt; underline & lt; / u & gt; 

τολμηρός ιταλικός υπογραμμίζω

Μπορείτε να χρησιμοποιήσετε το & lt; b & gt; , & lt; i & gt; , και & lt; u & gt; Για να εφαρμόσετε τις τυποποιημένες επιλογές μορφοποίησης κειμένου: BOLD, πλάγια γραφή και υπογραμμισμένο κείμενο.

 & lt; img src = "picture.jpg" & gt; 

ο & lt; img & gt; Η ετικέτα χρησιμοποιείται για να ενσωματώσει μια εικόνα σε μια σελίδα. Θα τραβήξει είτε την εικόνα από τον ίδιο τομέα, είτε μπορείτε να το επισημάνετε σε έναν εξωτερικό τομέα. Μπορείτε επίσης να το προσαρμόσετε με ορισμένα πρόσθετα χαρακτηριστικά, όπως το μέγεθος και το κείμενο alt.

 & lt; h1 & gt; κλάση 1 & lt; / h1 & gt; & lt; p & gt; / p & gt; 

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

 & lt; p style = "Χρώμα: EDR;" & GT; κόκκινη παράγραφο & lt; / p & gt; 

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

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

ΣΧΕΤΙΖΕΤΑΙ ΜΕ: Τι είναι το "Responsive Design" και πώς το χρησιμοποιείτε;