Γλώσσα HTML για αρχάριους - από πού να ξεκινήσετε και πού να πάτε. Τα πρώτα βήματα στην κωδικοποίηση. Ή από πού να ξεκινήσετε την εκμάθηση HTML

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

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

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

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

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

Ένα έγγραφο Html είναι το απλούστερο έγγραφο κειμένου, μια γλώσσα προσθήκης ετικετών που συναντάτε καθημερινά στο Διαδίκτυο. Οι ετικέτες περιγράφουν τη δομή ενός εγγράφου. Οι ετικέτες μορφοποιούνται ως γωνιακές< >αγκύλες, μέσα στις οποίες αναγράφεται το όνομα της ετικέτας. Το πρόγραμμα περιήγησης εξετάζει τη δομή του εγγράφου, το δημιουργεί και το εμφανίζει σύμφωνα με τις οδηγίες του στην οθόνη σας, αν, φυσικά, τα κάνατε όλα σωστά.

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

Βασικά για αρχάριους

Τι είναι η html - αν κοιτάξετε τι γράφει η Wikipedia - (HyperText Markup Language) γλώσσα σήμανσης υπερκειμένου για έγγραφα. Οι περισσότερες σελίδες στο Διαδίκτυο περιέχουν σήμανση σελίδας σε αυτήν τη γλώσσα. Αυτή η γλώσσα ερμηνεύεται από προγράμματα περιήγησης και το μορφοποιημένο κείμενο που προκύπτει εμφανίζεται στην οθόνη του υπολογιστή ή στην κινητή συσκευή σας.

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

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

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

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

Blog του Evgeny Nesmelov! ιστοσελίδα Βασικά στοιχεία html και css για αρχάριους

Από ποιες ετικέτες αποτελείται ένα έγγραφο html, τι περιλαμβάνει και πού πρέπει να καταγράφονται όλα;

< html >

< body >

< h2 >< / h2 >

< p >Καλώς ήρθατε στο ιστολόγιό μου, τώρα ακολουθήστε το σεμινάριο για τα Βασικά HTML. Εάν σας άρεσε αυτό το άρθρο, μπορείτε να εγγραφείτε σε αυτό το ιστολόγιο για να λαμβάνετε νέα άρθρα στα εισερχόμενα του email σας.< / p >

< h2 >Blog της Evgenia Nesmelov! Ο Νεσμελόφ. ru Βασικά στοιχεία HTML και CSS για αρχάριους< / h2 >

< / body >

< / html >

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

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

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

Κείμενο

< strong > < i >Κείμενο< / strong > < / i >

Δομή εγγράφου HTML

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

Μια ετικέτα είναι ένα στοιχείο που λέει στο πρόγραμμα περιήγησης Ιστού να εκτελέσει μια συγκεκριμένη εργασία. Για παράδειγμα, η παρουσία μιας παραγράφου, πίνακα, φόρμας ή εικόνας.

Χαρακτηριστικό - τροποποιεί την ετικέτα. Για παράδειγμα, μπορείτε να στοιχίσετε μια παράγραφο στο κέντρο ή δεξιά, να ορίσετε επίσης τη θέση της εικόνας στη σελίδα και ούτω καθεξής.

ΠΑΝΤΑ να κλείνετε ετικέτες, αν το ανοίξετε, φροντίστε να το κλείσετε. Διαφορετικά, θα προκύψει σφάλμα και το έγγραφό σας δεν θα εμφανίζεται σωστά στη σελίδα. Υπάρχουν και εξαιρέσεις, που δεν πρέπει να ξεχνάμε.

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

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

Ολόκληρη η ενότητα αυτής της ετικέτας περιέχει όλες τις τεχνικές πληροφορίες του εγγράφου. Όπως και η προηγούμενη ετικέτα, το κεφάλι πρέπει επίσης να ανοίγει και να κλείνει στο τέλος. Αυτές οι πληροφορίες περιλαμβάνουν τον τίτλο της σελίδας, την περιγραφή, τις λέξεις-κλειδιά της μηχανής αναζήτησης και την κωδικοποίηση. Σχετικά με την κωδικοποίηση λίγο παρακάτω.

Περιεχόμενο

< head >Περιεχόμενο< / head >

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

Εάν γράψατε "Hello World" στην κεφαλίδα, αυτές είναι οι πληροφορίες που πρέπει να εμφανίζονται στη σελίδα και καμία άλλη. Δεν πρέπει να εξαπατάτε τους ανθρώπους και τις μηχανές αναζήτησης, δεν τους αρέσει και έτσι κάνετε τα πράγματα χειρότερα για τον εαυτό σας. Οι πληροφορίες που περιέχονται σε αυτήν την ετικέτα πρέπει να είναι σχετικές με το περιεχόμενο της σελίδας σας.

Μετά την υποχρεωτική ετικέτα τίτλου, υπάρχει μια προαιρετική, αλλά εξίσου σημαντική μετα-ετικέτα. Αυτή η ετικέτα είναι απλή. Χρησιμοποιώντας αυτήν την ετικέτα, ορίζετε μια περιγραφή για τη σελίδα (περιγραφή) και τις λέξεις-κλειδιά της (λέξεις-κλειδιά).

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

< meta name = "robots" content = "index, follow" >

< meta http - equiv = "refresh" content = "20" >

< meta http - equiv = "refresh" content = "5; url=http://сайт/" >

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

Η ετικέτα στυλ μπορεί επίσης να χρησιμοποιηθεί για να ορίσετε στυλ στη σελίδα. Εάν χρησιμοποιείτε πολλά διαφορετικά στυλ css, τότε καλό είναι να τα ορίσετε σε ξεχωριστό αρχείο. Εάν πρέπει να καθορίσετε πολλά από αυτά, όλα αυτά μπορούν να καθοριστούν απευθείας στο έγγραφο html.

.βάση (πλάτος: 100 εικονοστοιχεία; χρώμα φόντου: #000; ύψος: 150 εικονοστοιχεία; χρώμα: #fff; )

< style type = "text/css" >

Βάση(

πλάτος: 100 px;

φόντο - χρώμα : #000;

ύψος: 150 px;

χρώμα : #fff;

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

Λίγο παρόμοια με την προηγούμενη ετικέτα, η ετικέτα συνδέσμου σάς επιτρέπει να ορίσετε στυλ για ένα έγγραφο που βρίσκονται σε άλλο αρχείο. Με άλλα λόγια, μπορείτε να επισυνάψετε ένα πλήρες φύλλο στυλ css, το οποίο αποτελείται από πολλές ιδιότητες, σε ένα υπάρχον έγγραφο. Έτσι, μειώνετε το μέγεθος του εγγράφου, το οποίο τελικά θα φορτώνει και θα ανοίγει πιο γρήγορα σε υπολογιστή ή φορητή συσκευή με χαμηλές ταχύτητες Διαδικτύου.

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

< link href = "css/style-lg.css" rel = "stylesheet" >

< link href = "css/style-md.css" rel = "stylesheet" >

< link href = "css/style-sm.css" rel = "stylesheet" >

Χρησιμοποιώντας την ετικέτα σεναρίου, μπορείτε να συνδέσετε διαφορετικά σενάρια (σενάρια) σε ένα έγγραφο. Απαιτείται η παρουσία της ετικέτας κλεισίματος. Το ίδιο το σενάριο μπορεί να βρίσκεται στην αρχή του εγγράφου, μέσα ή στο τέλος.

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

Επικεφαλίδες σελίδων h1 h2 h3

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

Η παρουσία τέτοιων επικεφαλίδων στο άρθρο θα παίξει σημαντικό ρόλο στην προώθηση της σελίδας. Επιπλέον, η χρήση τους σάς δίνει μια σαφή δομή σελίδας, τον τίτλο, τους υποτίτλους, τις επισημάνσεις, τις υποπαραγράφους και ούτω καθεξής. Να τα χρησιμοποιείτε πάντα και να τα εφαρμόζετε στην πράξη. Σε πολλά CMS, όπως το WordPress, όταν γράφετε κείμενο, μπορείτε να δείτε "επικεφαλίδα 1", "κεφαλίδα 2", "κεφαλίδα 3" και ούτω καθεξής. Αυτοί είναι υπεύθυνοι για τα h1, h2 και h3.

Εάν γράψετε κείμενο σώματος από μια νέα παράγραφο, γράφετε μια ετικέτα

Στην αρχή και κλείστε το στο τέλος

. Η σήμανση μιας παραγράφου σε html ισοδυναμεί με τη δημιουργία μιας νέας παραγράφου σε ένα έγγραφο MS Word. Δεν πρόσθεσα κάτι νέο στο έγγραφο. Αλλά αυτό δεν είναι το μόνο που πρέπει να υπάρχει σε ένα έγγραφο html. Ας δούμε ένα άλλο παράδειγμα, η περιγραφή θα έρθει λίγο αργότερα.

έγγραφο HTML

Αυτό το κείμενο θα είναι τολμηρό, και αυτό είναι επίσης με πλάγιους χαρακτήρες

< ! DOCTYPE html >

< html >

< head >

< meta http - equiv = "Content-Type" content = "text/html; charset=utf-8" / >

< title >έγγραφο HTML< / title >

< / head >

< body >

< p >

< b >

< / b >

< / p >

< / body >

< / html >

Βασικά στοιχεία Κεφαλή και τίτλος

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

Επικεφαλίδα & Περιεχόμενα σελίδας

< / html >

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

Πρόγραμμα επεξεργασίας Notepad++

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

Το Σημειωματάριο είναι ανώτερο από κάθε άποψη από ένα κανονικό σημειωματάριο. Για μέγιστη ευκολία, απλότητα και εκμάθηση, αυτό το πρόγραμμα επεξεργασίας πρέπει αρχικά να εγκατασταθεί στον υπολογιστή σας. Το πιο σημαντικό πλεονέκτημα και ευκολία είναι ότι το πρόγραμμα επεξεργασίας Notepad++ εμφανίζει υποδείξεις κατά τη σύνταξη κώδικα, κάτι που κάνει την εργασία σας πολύ πιο γρήγορη και καλύτερη.

Στοιχείο DOCTYPE

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

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

Εν συντομία σε σαφή γλώσσα σχετικά με τα βασικά της html: Αυτή η γραμμή λέει στο πρόγραμμα περιήγησης ότι αυτό το έγγραφο είναι XHTML έκδοση 1.0, χρησιμοποιούνται αγγλικά και όλο αυτό το χάος βρίσκεται σε αυτήν τη διεύθυνση. Στη συνέχεια, στη μετα-ετικέτα υποδεικνύουμε την κωδικοποίηση που χρησιμοποιείται. Το πιο συχνά χρησιμοποιούμενο είναι τα Windows 1251.

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

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

Τι πρέπει να θυμάστε από αυτό το μάθημα σχετικά με τα βασικά της html:

  • Σχεδόν όλες οι ετικέτες ανοίγουν και κλείνουν.
  • Το έγγραφο ξεκινά με την ετικέτα ;
  • Παρουσία ετικέτας;
  • Παρουσία ετικέτας;
  • Σαφής δομή του εγγράφου html.
  • Όλες οι κύριες σελίδες πρέπει πάντα να ονομάζονται ευρετήριο. Έτσι είναι αποδεκτό και το έχουν συνηθίσει όλοι, όποια και αν είναι η επέκταση του αρχείου μπορεί να είναι είτε html είτε php. Πάντα έτσι λέγεται.

    Παρακολουθήστε ένα βίντεο σχετικά με τις βασικές αρχές HTML από το Webformyself.

    Γλώσσα σήμανσης υπερκειμένου, βασικά στοιχεία και δομή. Όλα αυτά και πολλά άλλα θα προσπαθήσω να τα περιγράψω στο blog μου. Πρώτα απ 'όλα, θα γραφτούν χρήσιμες πληροφορίες για αρχάριους, θα δοθεί ένα παράδειγμα κώδικα και θα δοθεί η ευκαιρία λήψης του ίδιου του παραδείγματος μαζί με την τελική σελίδα.

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

    Η γλώσσα είναι σημαντική

    Μιλάς; Φανταστείτε και το δικό σας!

    Έχετε συναντήσει συχνά το γεγονός ότι ο σχεδιασμός μιας ιστοσελίδας είναι μελετημένος μέχρι την παραμικρή λεπτομέρεια, αλλά τελικά το αποτέλεσμα αφήνει πολλά να είναι επιθυμητά; Αυτό σημαίνει ότι εσείς και το πρόγραμμα περιήγησής σας μιλάτε διαφορετικές γλώσσες. Όταν ένας σχεδιαστής συναντά κάτι τέτοιο, αρχίζει να συνειδητοποιεί ξεκάθαρα: ένας ιστότοπος δεν είναι μια συλλογή από όμορφα πλακίδια και εικόνες.

    Ένας ποιοτικός πόρος είναι, πρώτα απ 'όλα, ικανός κώδικας. Και για να το καταλάβετε, πρέπει να το μελετήσετε. Υπάρχουν πολλά καλά εγχειρίδια που θα βοηθήσουν έναν αρχάριο να κατανοήσει την html από την αρχή.

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


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

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

    Το κύριο πράγμα είναι η εξάσκηση

    Το καλύτερο μέρος είναι ότι για να δημιουργήσετε έναν ιστότοπο, δεν χρειάζεστε τίποτα περίπλοκο. Μπορείτε απλά να τα βγάλετε πέρα. Ανοίξτε το σημειωματάριο και γράψτε σε αυτό:

    Η πρώτη μου σελίδα Hello World!

    Η πρώτη μου σελίδα Hello World!
    Το όνομά μου είναι (όνομα), αυτή είναι η πρώτη μου σελίδα!

    Στη συνέχεια, αποθηκεύστε ό,τι είναι γραμμένο ως έγγραφο html, είναι σημαντικό η επέκταση να είναι html. Πως να το κάνεις; Στο έγγραφο, κάντε κλικ στο «αρχείο», μετά στο «αποθήκευση ως», στο σύνολο πεδίων «όνομα αρχείου»: index.html. Μετά από όλες αυτές τις επεμβάσεις, μένει να γίνει το πιο ενδιαφέρον! Κάντε δεξί κλικ στο έγγραφό μας και ανοίξτε το σε οποιοδήποτε πρόγραμμα περιήγησης.

    Voila! Έχετε γράψει μια σελίδα και αυτή είναι μόνο η αρχή!

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

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

    Πώς και πού να σπουδάσετε

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

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

    Η Natalya Vyacheslavovna Allenova έγραψε ένα έξυπνο, λεπτομερές βιβλίο για την html (βλ.). Η δομή της δημοσίευσης σάς επιτρέπει να κινηθείτε σταδιακά, κατακτώντας πιο σύνθετους αλγόριθμους που βασίζονται σε απλά στοιχεία. Θεωρία και πράξη συνδυάζονται όμορφα και αλληλοσυμπληρώνονται.

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

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

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

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

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

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



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

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

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

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

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

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

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

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

    Το CSS επεκτείνει σημαντικά τις δυνατότητες εργασίας με οποιαδήποτε αντικείμενα html σε αυτό το μάθημα θα ήθελα να σας πω λεπτομερώς για τις παραμέτρους που μπορούν να εφαρμοστούν σε εικόνες.

    Η HTML είναι η γλώσσα σήμανσης υπερκειμένου που έκανε το Διαδίκτυο αυτό που γνωρίζουμε και αγαπάμε. Χάρη σε αυτό το θαυμάσιο εργαλείο, οι ιστότοποι φαίνονται όμορφοι και μοντέρνοι και εξασφαλίζουν επίσης ευκολία στη χρήση. Η HTML απλώς τακτοποιεί τα στοιχεία μιας ιστοσελίδας σε μια φιλική προς το χρήστη μορφή. Το έργο του είναι συγκρίσιμο με αυτό που κάνουν άνθρωποι όπως το MS Word ή το OpenOffice. Μετατρέπουν μια άχαρη μάζα γραμμάτων σε έγγραφο που περιέχει παραγράφους, έντονους χαρακτήρες, πλάγιους χαρακτήρες, πίνακες, ακόμη και εικόνες. Η γλώσσα HTML κάνει περίπου το ίδιο πράγμα, με τη μόνη διαφορά ότι τα έγγραφά της εμφανίζονται στο πρόγραμμα περιήγησης και οι δυνατότητες αυτού του εργαλείου είναι πολύ ευρύτερες από αυτές ενός επεξεργαστή κειμένου. Οι ετικέτες χρησιμοποιούνται για τη σήμανση - ειδικές εντολές που περιγράφουν τη δομή μιας ιστοσελίδας. Περικλείονται σε αγκύλες - έτσι ώστε το πρόγραμμα περιήγησης να μπορεί να τις διακρίνει από το μεγαλύτερο μέρος του κειμένου. Στη συνέχεια, θα καλύψουμε τα βασικά της HTML για αρχάριους.

    Visual editors

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

    Όλα αυτά τα προγράμματα δημιουργούν πολλές περιττές ετικέτες που κάνουν την τελική σελίδα δυσκίνητη και μη βέλτιστη. Φυσικά, στην εποχή μας του Internet υψηλής ταχύτητας, αυτό είναι λιγότερο σημαντικό από πριν, αλλά υπάρχουν αρκετοί λόγοι για τους οποίους ένας συνοπτικός και καλογραμμένος ιστότοπος αποδεικνύεται πιο πρακτικός από τον αντίστοιχο που δημιουργήθηκε σε ένα οπτικό πρόγραμμα επεξεργασίας. Μια ιστοσελίδα που δημιουργείται σε ένα τέτοιο πρόγραμμα θα υποστεί κακή επεξεργασία από τα ρομπότ αναζήτησης, καθώς κάθε kilobyte κώδικα είναι σημαντικό γι 'αυτούς και ο ογκώδης και παράλογος κώδικας με μια δέσμη είναι απίθανο να ταιριάζει με το γούστο τους. Επιπλέον, οι συντάκτες συχνά υστερούν από την εποχή, γίνονται άσχετοι και η δαπάνη πόρων για την ανάπτυξή τους δεν είναι πρακτική, καθώς κανένας επαγγελματίας δεν χρησιμοποιεί αυτά τα προϊόντα. Επομένως, όποιος θέλει να εργαστεί στον κλάδο ανάπτυξης ιστοσελίδων πρέπει να γνωρίζει τα βασικά της HTML.

    Ετικέτες

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

    Υπάρχουν επίσης μεμονωμένες ετικέτες που δεν χρειάζεται να κλείσουν. Σε αυτά, το περιεχόμενο βρίσκεται μέσα, όπως ακριβώς μπορεί να γραφτεί για τις περισσότερες ετικέτες HTML, και ορίζει τις ιδιότητες του στοιχείου. Υποδεικνύεται στην αρχική ετικέτα και μοιάζει κάπως έτσι: χαρακτηριστικό="...", όπου αντί για τελείες υπάρχει η τιμή του χαρακτηριστικού. Η γνώση των ετικετών είναι το πρώτο και πιο σημαντικό βήμα για την κατανόηση της HTML. Τα βασικά αυτής της τέχνης περιλαμβάνουν επίσης την κατανόηση της δομής μιας ιστοσελίδας.

    Δομή εγγράφου

    Κάθε έγγραφο HTML έχει μια αντίστοιχη επέκταση, για παράδειγμα Index.html. Με αυτόν τον τρόπο το πρόγραμμα περιήγησης μπορεί να καταλάβει τι έχει να κάνει και να εμφανίσει σωστά τη σελίδα. Συνιστάται να αποθηκεύετε όλα τα αρχεία που χρησιμοποιούνται για τη δημιουργία ενός ιστότοπου σε έναν κατάλογο, κάτι που θα κάνει τη ζωή σας πολύ πιο εύκολη στο μέλλον. Τα βασικά της γλώσσας σήμανσης υπερκειμένου HTML απαιτούν σαφή κατανόηση της δομής του εγγράφου. Ξεκινά με μια ετικέτα που λέει στο πρόγραμμα περιήγησης την έκδοση του HTML που χρησιμοποιείται σε αυτό το έγγραφο. Προς το παρόν, η πέμπτη έκδοση της γλώσσας είναι σχετική, επομένως δεν χρειάζεται να επινοήσετε τίποτα, μπορείτε να εισαγάγετε με ασφάλεια την παραπάνω ετικέτα στην αρχή οποιασδήποτε σελίδας.

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

    Κεφάλι

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

    Σύνδεσμος

    Η γνώση των βασικών στοιχείων της HTML περιλαμβάνει επίσης τη χρήση cascading styling ή css. Ορίζουν τις ιδιότητες των στοιχείων που θα εμφανίζονται στη σελίδα. Μια σύγχρονη προσέγγιση σε αυτήν την εργασία περιλαμβάνει τη μεταφορά χαρακτηριστικών όπως το χρώμα, το ύψος και η θέση του στοιχείου σε ένα εξωτερικό αρχείο για μεγαλύτερη ευκολία. Για να συμπεριλάβετε ένα αρχείο css, χρησιμοποιήστε την ετικέτα. Στην τελική του μορφή, μοιάζει κάπως έτσι: όπου href υποδεικνύει τη θέση του αρχείου και ο τύπος υποδεικνύει τον τύπο του.

    Σώμα

    Σε αυτό το τμήμα του εγγράφου HTML δημιουργείται το ορατό τμήμα της σελίδας. Όλα όσα γίνονται μέσα στο "σώμα" θα εμφανίζονται από το πρόγραμμα περιήγησης. Χρησιμοποιεί έναν τεράστιο αριθμό ετικετών HTML. Τα βασικά είναι η μορφοποίηση κειμένου, η εργασία με συνδέσμους και τα βασικά εργαλεία για τη δόμηση μιας ιστοσελίδας. Για να ξεκινήσετε να εργάζεστε σε HTML, πρέπει απλώς να γνωρίζετε τις βασικές ετικέτες και να μπορείτε να τις χρησιμοποιήσετε. Παρακάτω είναι τα πιο δημοφιλή: