Σύγχρονα μαθήματα HTML για αρχάριους. Βασικά στοιχεία HTML για αρχάριους Μαθήματα προγραμματισμού HTML από το μηδέν

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

Δροσερός

Τραύλισμα

Για να μελετήσετε το μάθημα, κατεβάστε το αρχείο με τα απαραίτητα αρχεία.

Η HTML είναι μια γλώσσα σήμανσης εγγράφων. Η σωστή προφορά είναι HTT.

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

Γιατί, θα ρωτήσετε, να γράψετε για επεξεργαστές κειμένου σε ένα άρθρο για την HTML; Μα γιατί. Αν το καταλάβετε, τι είναι ένας συντάκτης γραφείου; Αυτή είναι μια εφαρμογή για επεξεργασία και εμφάνιση εγγράφων.

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

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

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

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

Ένα είδος Word για HTML. Αυτοί οι οπτικοί επεξεργαστές ονομάζονται:

WYSIWYGσυντάκτες - W hat Y ou S ee I s W hat Y ou G et. Δηλαδή, αν το μεταφράσουμε στα ρωσικά: αυτό που βλέπουμε είναι αυτό που παίρνουμε.

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

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

• Ο ικανός κώδικας HTML έχει θετική επίδραση στη βελτιστοποίηση μηχανών αναζήτησης και στην ταχύτητα με την οποία ένα ρομπότ αναζήτησης ανιχνεύει έναν ιστότοπο. Τα κιλομπάιτ κώδικα που δημιουργούνται από το vuzivuga δεν είναι αποδεκτά, ακόμη και επιβλαβή.
• Ο κώδικας HTML που δημιουργείται από τον επεξεργαστή WYSIWYG έχει πολλά σημασιολογικά σφάλματα. Δηλαδή, οι ετικέτες που δημιουργούνται από έναν τέτοιο επεξεργαστή χρησιμοποιούνται για άλλους σκοπούς, όπου πρέπει να χρησιμοποιηθούν, για παράδειγμα, λίστες
  , ο επεξεργαστής θα δημιουργήσει μια άλλη ετικέτα που δεν χρειαζόμαστε. Εξαρτάται, φυσικά, από τον επεξεργαστή, αλλά εδώ εννοούμε πολύπλοκες λύσεις για τη δημιουργία ιστοσελίδων και όχι απλώς την επεξεργασία κειμένου σε μια περιοχή κειμένου χρησιμοποιώντας εργαλεία WYSIWYG.
  • Δημιουργούνται πολλές περιττές ετικέτες και η δομή του εγγράφου γίνεται φουσκωμένη. Ας υποθέσουμε ότι μετακινείτε ένα στοιχείο σε ένα τέτοιο πρόγραμμα, πρώτα προς τα δεξιά, μετά προς τα αριστερά και μετά στο κέντρο - κάθε ενέργεια αφήνει ένα ίχνος στον πηγαίο κώδικα HTML. Το πρόγραμμα επεξεργασίας είναι ένα πρόγραμμα και δεν μπορεί να ξέρει τι ακριβώς θέλετε να λάβετε ως αποτέλεσμα, παράγει τόνους κώδικα, λαμβάνοντας υπόψη όλες τις πιθανές επιλογές για τη συμπεριφορά του εγγράφου στο πρόγραμμα περιήγησης.
  • Κατά κανόνα, οι συντάκτες για την οπτική σχεδίαση κώδικα HTML γίνονται γρήγορα ξεπερασμένοι. Και λόγω της έλλειψης ενδιαφέροντος από την πλευρά των επαγγελματιών, γενικά στερούνται υποστήριξης και σταματούν να αναπτύσσονται. Και η HTML εξελίσσεται. Όλα αναπτύσσονται εκτός από το wuzivoogi. Συνεπώς, δεν μπορούν να δημιουργήσουν σωστό και σύγχρονο κώδικα που θα χρησιμοποιούσε νέες δυνατότητες και λύσεις.
  • Η υποστήριξη και η ανάπτυξη τέτοιων έργων είναι ουράνια τιμωρία. Δεν μπορεί να γίνει καθόλου λόγος για χρήση μοτίβων και επαναχρησιμοποίηση κώδικα.

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

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

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

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

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

  Ας δημιουργήσουμε ένα αρχικό πρότυπο στον υπολογιστή - το αρχείο index.html, ανοίξτε το χρησιμοποιώντας ένα πρόγραμμα επεξεργασίας και επικολλήστε τον ακόλουθο κώδικα σε αυτό:

  Κύριο σώμα εγγράφου Σημειώστε ότι τα έγγραφα HTML έχουν επέκταση .html.

  Έτσι, με τη σειρά από το παράδειγμα.

  - τύπος εγγράφου (doctype)

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

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

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

  - αρχή του εγγράφου

  Η πρώτη ετικέτα που βλέπουμε μετά το doctype είναι .

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

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

  Έτσι, η σήμανση εγγράφου ξεκινά με μια ετικέτα και τελειώνει με μια ετικέτα κλεισίματος. Κάθε ετικέτα που περιέχει άλλες ετικέτες ή στοιχεία πρέπει να κλείνει με μια ετικέτα κλεισίματος. Για παράδειγμα, , , , κ.λπ.

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

  Ετικέτα

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

  περιεχόμενο ή άλλες ετικέτες

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

  Ετικέτα - τίτλος εγγράφου Τίτλος

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

  Μετα-ετικέτα

  Η μετα-ετικέτα είναι μια εξειδικευμένη ετικέτα που έχει σχεδιαστεί για να παρέχει δομημένα δεδομένα για μια σελίδα. Οι μετα-ετικέτες χρησιμοποιούνται συχνότερα στο . Δεν απαιτούνται μετα-ετικέτες στη δομή ενός εγγράφου HTML.

  Favicon

  Επισυνάπτει ένα αρχείο με μια εικόνα favicon στο έγγραφο. Το Favicon είναι ένα μικροσκοπικό εικονίδιο που εμφανίζεται δίπλα στον τίτλο του εγγράφου σε μια καρτέλα προγράμματος περιήγησης. Το favicon είναι ένα αρχείο γραφικών διαστάσεων 16 x 16 (ή 32 x 32) pixel, το οποίο μπορεί να έχει διάφορες μορφές, όπως png, jpg, ico, gif. Η μορφή ico χρησιμοποιείται παραδοσιακά. Τα κινούμενα favicon είναι αρχεία gif που περιέχουν κινούμενα σχέδια. Μπορείτε να δείτε ένα κινούμενο favicon, για παράδειγμα, στο VKontakte, όταν έρχεται ένα νέο μήνυμα.

  Στυλ εγγράφων CSS

  Περιλαμβάνει ένα αρχείο CSS με στυλ HTML στο έγγραφο.

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

  Σημείωση: Η ιδιότητα href μιας κατασκευής καθορίζει τη θέση του εξωτερικού αρχείου. Στο παράδειγμά μας, το αρχείο στυλ.cssΚαι favicon.ico, βρίσκονται στον ίδιο φάκελο με το αρχείο index.html. δεν έχει ετικέτα κλεισίματος.

  Ετικέτα

  Η ετικέτα περιέχει κώδικα ή έναν σύνδεσμο προς ένα αρχείο javaScript και χρησιμοποιείται συχνότερα μέσα σε μια ετικέτα, αν και το εργαλείο Page Speed ​​Optimization της Google συνιστά τη χρήση αυτής της ετικέτας στο τέλος ενός εγγράφου, πριν από την ετικέτα κλεισίματος.

  Στο παράδειγμά μας, είναι συνδεδεμένο ένα εξωτερικό αρχείο script.js, το οποίο βρίσκεται στον ίδιο φάκελο με το κύριο αρχείο index.html.

  Λοιπόν, φίλοι, εξετάσαμε τα κύρια στοιχεία που χρησιμοποιούνται πιο συχνά στην ετικέτα. Εκτός από αυτά τα στοιχεία, υπάρχει μια σειρά από άλλα που είναι πιο συγκεκριμένα και προαιρετικά.

  Σώμα γνωστό και ως σώμα

  Εδώ ξεκινούν όλα τα διασκεδαστικά και οπτικά απτά πράγματα στη διάταξη HTML ενός εγγράφου.

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

  Η ετικέτα μπορεί να περιέχει οποιεσδήποτε ετικέτες HTML είναι απαραίτητες για το σχεδιασμό του εγγράφου και την παροχή της λειτουργικότητάς του (φόρμα). Θα παράσχω έναν πίνακα με τις πιο χρησιμοποιούμενες ετικέτες και θα περιγράψω εν συντομία την καθεμία. Μπορείτε να εκτελέσετε αμέσως τα παραδείγματα που δίνονται στο πρόγραμμα επεξεργασίας.

  Ετικέτα	Περιγραφή
  	Μια ετικέτα για τη δημιουργία συνδέσμων σε ένα έγγραφο. Παράδειγμα: κείμενο συνδέσμου Το χαρακτηριστικό href καθορίζει το έγγραφο στο οποίο θα οδηγεί ο σύνδεσμος.
  ,	Φτιάχνει κείμενο πλάγια γραφήή τολμηρή (τονισμένη). Παράδειγμα: πλάγιο κείμενο με έντονη γραφή (με έμφαση).
  , , , , ,	Επικεφαλίδες εγγράφων. Υπάρχουν συνολικά 6 επίπεδα επικεφαλίδων, αλλά στην πράξη χρησιμοποιούνται μόνο h1 έως h4. Θα πρέπει να υπάρχει μόνο μία επικεφαλίδα στο έγγραφο, η οποία επισημαίνεται με την ετικέτα h1, ως την κύρια επικεφαλίδα του εγγράφου. Παραδείγματα: Επικεφαλίδα πρώτου επιπέδου Επικεφαλίδα δεύτερου επιπέδου Επικεφαλίδα τρίτου επιπέδου... κ.λπ.
  ,	Λίστες εγγράφων. Είναι μια αριθμημένη ή με κουκκίδες λίστα. Το στοιχείο μιας τέτοιας λίστας είναι η ετικέτα Παραδείγματα: Στοιχείο κουκκίδας 1 Στοιχείο κουκκίδας 2 Αριθμημένο στοιχείο λίστας 1 Αριθμημένο στοιχείο λίστας 2
  	Παράγραφος. Αυτή η ετικέτα ορίζει μια παράγραφο κειμένου χωρισμένη από άλλες παραγράφους. Συνιστάται ιδιαίτερα να κλείσετε αυτήν την ετικέτα. Παράδειγμα: Η εμφάνιση της σήμανσης HTML καθορίζεται σε μεγάλο βαθμό από τα στυλ CSS. Ωστόσο, ορισμένοι webmasters επιλέγουν να μην χρησιμοποιούν στυλ στα αρχικά στάδια ενός έργου.
  	Εικόνα. Χρησιμοποιώντας αυτήν την ετικέτα, μπορείτε να εισαγάγετε μια εικόνα στη σήμανση HTML. Φροντίστε να συμπεριλάβετε εναλλακτικό κείμενο για όλες τις εικόνες - το χαρακτηριστικό "alt". Αυτή η ετικέτα κλείνει αυτόματα. Παράδειγμα:
  + +	Φόρμες και στοιχεία εισαγωγής. Οι φόρμες έχουν σχεδιαστεί για να εισάγουν πληροφορίες στο σύστημα στον διακομιστή. Ένα είδος ανατροφοδότησης μεταξύ του χρήστη και του ιστότοπου. Για παράδειγμα, οι φόρμες χρησιμοποιούνται όταν πρέπει να στείλετε κάποιο μήνυμα στον διακομιστή. Επιπλέον, οι φόρμες μπορούν να εκτελέσουν άλλες λειτουργίες, αλλά το κύριο καθήκον είναι η αποστολή δεδομένων στον διακομιστή. Ένα παράδειγμα είναι μια απλή φόρμα για την αποστολή ενός μηνύματος, στην οποία ο χρήστης του ιστότοπου δηλώνει το όνομά του, το ηλεκτρονικό ταχυδρομείο και κάποιο κείμενο: Κείμενο μηνύματος
  	Ορίζει μια υποσυμβολοσειρά μέσα σε μια συμβολοσειρά. Χρησιμοποιείται για το στυλ τμήματος μιας γραμμής χρησιμοποιώντας CSS. Μία από τις πιο συχνά χρησιμοποιούμενες ετικέτες. Χωρίς σχεδιασμό, δεν εκδηλώνεται με κανέναν τρόπο στο πρόγραμμα περιήγησης. Παράδειγμα: Η εκμάθηση HTML, στις περισσότερες περιπτώσεις, δεν προκαλεί δυσκολίες για αρχάριους.
  ,	Οι ετικέτες έχουν σχεδιαστεί για να εισάγουν βίντεο και ήχο σε ένα έγγραφο. Απαιτείται η ετικέτα κλεισίματος. Παραδείγματα: Η παράμετρος ελέγχου μάς λέει ότι η σελίδα πρέπει να εμφανίζει στοιχεία ελέγχου περιεχομένου πολυμέσων, ακριβώς όπως μια κανονική συσκευή αναπαραγωγής ήχου/βίντεο.
  	Πραγματικά μια βασιλική ετικέτα. Η πιο χρησιμοποιούμενη και δημοφιλής ετικέτα στη σήμανση σελίδας HTML. Αυτό είναι ένα στοιχείο μπλοκ σχεδιασμένο για τη διαχείριση μπλοκ στον ιστότοπο. Η έννοια της "υπέροχης" διάταξης χρησιμοποιείται συχνά - αυτό σημαίνει ότι όλα τα μπλοκ στον ιστότοπο τοποθετούνται χρησιμοποιώντας αυτές τις ετικέτες. Μπορεί να περιέχει άλλες ετικέτες. Παράδειγμα: Κείμενο σε ένθετο μπλοκ Όλα τα στοιχεία, στις περισσότερες περιπτώσεις, έχουν στυλ με ιδιότητες στυλ CSS. Απαιτείται η ετικέτα κλεισίματος.
  	Αυτή η ετικέτα φορτώνει μια εξωτερική σελίδα στο έγγραφο. Παράδειγμα:

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

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

  Για παράδειγμα, μην:

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

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

  Πρακτική εργασία σε διάταξη HTML

  Εάν δεν έχετε ακόμη κατεβάσει το αρχείο με παραδείγματα, κάντε το. Για παράδειγμα, μπορείτε να δείτε το αρχείο example.html, το οποίο ήταν επίσης στο αρχείο.

• Αποσυσκευάστε το αρχείο και δημιουργήστε ένα αρχείο index.html στο φάκελο με τα μη συσκευασμένα αρχεία. Ανοίξτε το αρχείο που δημιουργήθηκε χρησιμοποιώντας το πρόγραμμα επεξεργασίας κειμένου Sublime Text.
• Δημιουργήστε μια αρχική δομή εγγράφου με έναν τύπο doctype, ετικέτα που περιέχει και και προχωρήστε στην επεξεργασία των περιεχομένων της ετικέτας.
• Ανοίξτε το αρχείο readme.txt και ολοκληρώστε τις κατάλληλες εργασίες στο αρχείο index.html που δημιουργήσατε. Για να ελέγξετε το αποτέλεσμα, ανοίξτε το index.html στο αγαπημένο σας πρόγραμμα περιήγησης.

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

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

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

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

Κατεβάστε δωρεάν πρότυπα ιστοτόπων HTML και δημιουργήστε τα έργα σας σε χρόνο μηδέν.

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

Ποια είναι η δομή ενός εγγράφου HTML;

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

Τώρα να εξηγήσω λίγο. Όλες οι ετικέτες ( ετικέτα - στοιχείο γλώσσας σήμανσης υπερκειμένου) χωρίζονται σε δύο τύπους: «μονό» και «κλείσιμο». Επιπλέον, οι ετικέτες περικλείονται στους ακόλουθους χαρακτήρες< и >, είναι αυτά που διακρίνουν την ετικέτα από το συνηθισμένο κείμενο html. Ας δούμε μερικές από τις πιο απλές «μονές» ετικέτες:


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

Η πρώτη μου ιστοσελίδα Γεια σε όλους!
Και αυτό είναι το πρώτο μου site.

Το αποτέλεσμα μπορεί να προβληθεί.

— μια ετικέτα που τραβάει μια οριζόντια γραμμή. Αυτή η ετικέτα ισχύει για στοιχεία μπλοκ, η γραμμή ξεκινά πάντα από μια νέα γραμμή. Έχει 5 χαρακτηριστικά:

• align — Καθορίζει τη στοίχιση της γραμμής. Μπορεί να πάρει την τιμή αριστερά, κέντρο, δεξιά.
• χρώμα — Ορίζει το χρώμα της γραμμής.
• noshade - Σχεδιάζει μια γραμμή χωρίς εφέ 3D.
• μέγεθος — Ορίζει το πάχος της γραμμής.
• πλάτος — Ορίζει το πλάτος της γραμμής.

Κωδικός χρησιμοποιώντας την ετικέτα:

Ο πρώτος μου ιστότοπος Γεια σε όλους Αυτό είναι το πρώτο μου site.

Ένα οπτικό παράδειγμα μπορείτε να βρείτε εδώ.

Μια άλλη "ενιαία" ετικέτα είναι . Αυτή η ετικέτα χρησιμοποιείται για την αποθήκευση πληροφοριών που προορίζονται για προγράμματα περιήγησης και μηχανές αναζήτησης. Οι μηχανές αναζήτησης αναζητούν μετα-ετικέτες για να λάβουν περιγραφές ιστότοπων, λέξεις-κλειδιά και άλλα δεδομένα. Επιτρέπεται να χρησιμοποιείτε απεριόριστο αριθμό μετα-ετικέτες, όλες πρέπει να είναι μεταξύ και . Οι παράμετροι οποιασδήποτε μετα-ετικέτας είναι της μορφής «όνομα=τιμή», η οποία καθορίζεται από τις λέξεις-κλειδιά περιεχόμενο , όνομα ή http-equiv . Επειδή Οι μετα-ετικέτες προορίζονται για μηχανές, δεν κάνουν οπτικές αλλαγές, επομένως θα παράσχω μόνο τον πηγαίο κώδικα:

Αυτή η γραμμή υποδεικνύει ότι ο δημιουργός της σελίδας πιστεύει ότι η σελίδα χρησιμοποιεί κωδικοποίηση UTF-8. Στην HTML5 όλα έχουν γίνει πιο απλά για να καθορίσετε την κωδικοποίηση, το μόνο που χρειάζεστε είναι η ακόλουθη γραμμή:

Υπάρχουν και άλλες μεμονωμένες ετικέτες (, ,
, , , , , , , , , , , , , ), αλλά θα σας παρουσιάσω λίγο αργότερα.

Τώρα ας μιλήσουμε για το «κλείσιμο» των ετικετών. Το ίδιο το όνομα "ετικέτα κλεισίματος" υποδηλώνει ότι η ετικέτα απαιτεί υποχρεωτικό κλείσιμο. Αυτό γίνεται για να περιοριστεί σαφώς το τμήμα του κειμένου που επηρεάζει η ετικέτα.

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

Η πρώτη μου ιστοσελίδα Γεια σε όλους! Και αυτό είναι το πρώτο μου site.
Γεια σε όλους! Και αυτό είναι το πρώτο μου site.

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

Ετικέτες για την επισήμανση κειμένου

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

— ορίζει τη γραμματοσειρά σε έντονη γραφή.

— ορίζει το στυλ πλάγιας γραμματοσειράς.

— προσθέτει μια υπογράμμιση στο κείμενο.

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

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

— εμφανίζει κείμενο ως μονοδιάστατο κείμενο. Καταργήθηκε από την HTML5.

— εμφανίζει τη γραμματοσειρά ως εκθέτη. Η γραμματοσειρά εμφανίζεται πάνω από τη γραμμή βάσης του κειμένου και σε μειωμένο μέγεθος.

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

— προορίζεται να δώσει έμφαση στο κείμενο. Τα προγράμματα περιήγησης εμφανίζουν αυτό το κείμενο με έντονη γραφή.

— μειώνει το μέγεθος της γραμματοσειράς κατά ένα σε σύγκριση με το κανονικό κείμενο. Σε HTML, το μέγεθος της γραμματοσειράς μετριέται σε συμβατικές μονάδες από το 1 έως το 7, το μέσο προεπιλεγμένο μέγεθος κειμένου είναι 3. Η ετικέτα μειώνει το κείμενο κατά μία συμβατική μονάδα. Οι ένθετες ετικέτες επιτρέπονται και το μέγεθος της γραμματοσειράς θα είναι μικρότερο κατά 1 με κάθε ένθετο επίπεδο, αλλά δεν μπορεί να είναι μικρότερο από 1.

— αυξάνει το μέγεθος της γραμματοσειράς κατά ένα σε σύγκριση με το κανονικό κείμενο. Σε HTML, το μέγεθος της γραμματοσειράς μετριέται σε μονάδες από το 1 έως το 7, το μέσο προεπιλεγμένο μέγεθος κειμένου είναι 3. Έτσι, η προσθήκη μιας ετικέτας αυξάνει το κείμενο κατά μία μονάδα. Οι ένθετες ετικέτες επιτρέπονται και το μέγεθος της γραμματοσειράς θα είναι μεγαλύτερο σε κάθε επίπεδο.

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

— έχει σχεδιαστεί για να επισημαίνει μεγάλα εισαγωγικά σε ένα έγγραφο. Το κείμενο που επισημαίνεται με αυτήν την ετικέτα εμφανίζεται παραδοσιακά ως ευθυγραμμισμένο μπλοκ με γέμιση αριστερά και δεξιά (περίπου 40 εικονοστοιχεία), καθώς και με επένδυση στο επάνω και στο κάτω μέρος.

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

— ορίζει μια παράγραφο κειμένου. Ετικέτα

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

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

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

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

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

Από προεπιλογή, το κείμενο που περικλείεται στο κοντέινερ είναι υπογραμμισμένο με μια διακεκομμένη γραμμή.

Παρακάτω είναι ο κώδικας στον οποίο χρησιμοποίησα όλες αυτές τις ετικέτες:

Το πρώτο μου site

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

Τι είναι η HTML;
Η HTML είναι η γλώσσα για την περιγραφή της δομής των ιστοσελίδων. Η HTML δίνει στους συγγραφείς τα μέσα να:
Δημοσιεύστε ηλεκτρονικά έγγραφα με επικεφαλίδες, κείμενο, πίνακες, λίστες, φωτογραφίες κ.λπ.
Ανάκτηση πληροφοριών στο διαδίκτυο μέσω συνδέσμων υπερκειμένου, με το πάτημα ενός κουμπιού.
Σχεδιασμός φορμών για τη διενέργεια συναλλαγών με απομακρυσμένες υπηρεσίες, για χρήση στην αναζήτηση πληροφοριών, την πραγματοποίηση κρατήσεων, την παραγγελία προϊόντων κ.λπ.
Συμπεριλάβετε υπολογιστικά φύλλα, βίντεο κλιπ, κλιπ ήχου και άλλες εφαρμογές απευθείας στα έγγραφά τους.
Με την HTML, οι συγγραφείς περιγράφουν τη δομή των σελίδων χρησιμοποιώντας σήμανση. Τα στοιχεία της γλώσσας χαρακτηρίζουν κομμάτια περιεχομένου όπως «παράγραφος», «λίστα», «πίνακας» και ούτω καθεξής. Τι είναι το XHTML;

Το XHTML είναι ένα παραλλαγή της HTMLπου χρησιμοποιεί τη σύνταξη της XML, της επεκτάσιμης γλώσσας σήμανσης. Το XHTML έχει όλα τα ίδια στοιχεία (για παραγράφους, κ.λπ.) με την παραλλαγή HTML, αλλά η σύνταξη είναι ελαφρώς διαφορετική. Επειδή η XHTML είναι μια εφαρμογή XML, μπορείτε να χρησιμοποιήσετε άλλα εργαλεία XML μαζί της (όπως η XSLT, μια γλώσσα για τη μετατροπή περιεχομένου XML).

Τι είναι το CSS;

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

Τι είναι το WebFonts; Το WebFonts είναι μια τεχνολογία που επιτρέπει στους χρήστες να χρησιμοποιούν γραμματοσειρές κατά παραγγελία μέσω του Web χωρίς να απαιτείται εγκατάσταση στο λειτουργικό σύστημα. Το W3C έχει εμπειρία σε γραμματοσειρές με δυνατότητα λήψης μέσω HTML, CSS2 και SVG. Μέχρι πρόσφατα, οι γραμματοσειρές με δυνατότητα λήψης δεν ήταν συνηθισμένες στον Ιστό λόγω της έλλειψης διαλειτουργικής μορφής γραμματοσειράς. Η προσπάθεια WebFonts σχεδιάζει να το αντιμετωπίσει μέσω της δημιουργίας μιας ανοιχτής μορφής γραμματοσειράς για τον Ιστό που υποστηρίζεται από τη βιομηχανία (που ονομάζεται "WOFF").

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

Κατά τη σύνταξη αυτού του άρθρου, η περιγραφή ορισμένων ετικετών ελήφθη από εδώ

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

Ας αρχίσουμε! Πρώτα, ας μάθουμε
HTML – (από τα αγγλικά. H ypert ext M arkup L γλώσσα) είναι μια γλώσσα σήμανσης υπερκειμένου. Αναπτύχθηκε για πρώτη φορά από τον Βρετανό επιστήμονα Tim Berners-Lee το 1991-1992. Η HTML προοριζόταν μόνο για τη σήμανση κειμένου, εικόνων και πινάκων σε ιστοσελίδες. Τώρα μπορούν επίσης να εισαχθούν γλώσσες προγραμματισμού όπως JavaScript και VBScript σε ένα έγγραφο HTML.

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

Για να μάθετε HTML, χρειάζεται απλώς να έχετε ένα πρόγραμμα περιήγησης και ένα τυπικό σημειωματάριο ή .
Για να ανοίξετε το Standard Notepad, κάντε τα εξής στον υπολογιστή σας: "Έναρξη" => "Προγράμματα" => "Αξεσουάρ" => "Σημειωματάριο" .

Εάν έχετε ακούσει για προγράμματα που απλοποιούν τη δουλειά της σύνταξης κώδικα HTML (Microsoft FrontPage, Adobe Dreamweaver), τότε δεν συνιστώ τη χρήση τους σε αυτό το στάδιο της εκπαίδευσης. Εκπαιδεύστε τις δεξιότητές σας σε ένα τυπικό σημειωματάριο ή στον επεξεργαστή κειμένου Notepad++ και όταν ολοκληρώσετε αυτό το μάθημα, θα μπορείτε να χρησιμοποιείτε προγράμματα για να επιταχύνετε τα πράγματα. Εγγραφείτε στις ενημερώσεις του ιστολογίου μου και διαβάστε πώς να χρησιμοποιείτε το Microsoft FrontPage και το Adobe Dreamweaver.

Για καλύτερη κατανόηση, έχω ετοιμάσει ένα παράδειγμα. Δείτε προσεκτικά την εικόνα:



Εξήγηση.

1). Οποιοδήποτε έγγραφο HTML ξεκινά με αυτήν τη γραμμή:

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

2). και είναι η αρχή και το τέλος του εγγράφου.

3). και - ο επικεφαλής του εγγράφου. Πρόσθετες ετικέτες υπηρεσίας εισάγονται συχνά εδώ. Θα μάθετε για άλλες ετικέτες υπηρεσιών σε περαιτέρω μαθήματα σε αυτό το στάδιο της εκπαίδευσης, αυτές οι πληροφορίες είναι αρκετές.

4). και - τίτλος εγγράφου.
Αυτή η κεφαλίδα θα εμφανιστεί στο πρόγραμμα περιήγησης:



στην αναζήτηση είμαι ευρετήριο ή στο Google.



5). και - το σώμα του εγγράφου.
Εδώ είναι το περιεχόμενο του εγγράφου, για παράδειγμα, κείμενο, εικόνες, πίνακες, μουσική, ταινίες κ.λπ. Θα μάθετε περισσότερα σχετικά με τον τρόπο εισαγωγής μουσικής, κειμένου, εικόνων στο σώμα του εγγράφου στα ακόλουθα μαθήματα.

Σημείωση:

Θα διαβάζετε και θα ακούτε συχνά τη λέξη «ετικέτα».
Μια ετικέτα είναι οτιδήποτε βρίσκεται ανάμεσα στις αγκύλες< >. Για παράδειγμα: , , , ,
,

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

Υπάρχουν πολλές ετικέτες και έχουν διαφορετικούς σκοπούς.

Υπάρχουν ετικέτες που πρέπει να κλείσουν. Για παράδειγμα,
ανοίξτε την ετικέτα


και φροντίστε να κλείσετε την ετικέτα

Και υπάρχουν μεμονωμένες ετικέτες, για παράδειγμα, αυτή
.

Η ετικέτα είναι ένα είδος κοντέινερ που μπορεί να περιέχει κείμενο, εικόνες και άλλες ετικέτες...

○ Προσέξτε τη σωστή σειρά ανοίγματος και κλεισίματος ετικετών:

...

Η ετικέτα που ανοίξαμε πρώτα κλείνει τελευταία, η δεύτερη είναι προτελευταία κ.λπ.

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

...

Το σφάλμα ήταν στο και.
Να είστε προσεκτικοί όταν γράφετε κώδικα.



Έτοιμος κωδικός.
Αυτός είναι ο τελικός τυπικός υποχρεωτικός κώδικας HTML για μια ιστοσελίδα.

Τίτλος σελίδας Κείμενο σελίδας, πίνακες, εικόνες, μουσική και βίντεο.

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

Συνεχίστε στο επόμενο μάθημα

Το πλήρες όνομα είναι HyperText Markup Language. Είναι μια γλώσσα σήμανσης υπερκειμένου που χρησιμοποιείται ευρέως κατά την κατασκευή ιστοσελίδων και εγγράφων. Η πορεία της HTML ξεκίνησε στο πρώτο ημίχρονο δεκαετία του '90. Εκείνη την εποχή ήταν εξαιρετικά πρωτόγονο, αλλά ήδη βοήθησε στη δημιουργία απλών σελίδων για τον Ιστό. Από τότε, η γλώσσα αναπτύσσεται συνεχώς, και σήμερα έχει ήδη μάθει πολλά. Χωρίς HTML, με τη μορφή που έχουμε συνηθίσει, οι ιστότοποι απλά δεν θα υπήρχαν. Σχεδόν όλοι οι ιστότοποι χρησιμοποιούν HTML σε κάποιο βαθμό.

Το τρέχον πρότυπο σήμερα είναι το HTML5, το οποίο κυκλοφόρησε επίσημα το 2014. Αυτό είναι ένα επαναστατικό πρότυπο που επέτρεψε στη γλώσσα να φτάσει σε ένα νέο επίπεδο.

Νέο σε HTML5:

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

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

Όλα έχουν φτάσει στο σημείο που η HTML5 άρχισε να χρησιμοποιείται σε δύο βασικές κατευθύνσεις:

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

Ποιος αναβαθμίζει την HTML5; Η γλώσσα αναπτύσσεται από το W3C ή το πλήρες όνομά του - World Wide Web Consortium - αυτός είναι ένας διεθνής οργανισμός που παραμένει ανεξάρτητος από συγκεκριμένους προγραμματιστές. Παράγει επίσης προδιαγραφές, ορισμούς και πρότυπα για HTML5. Η αρχική και πλήρης προδιαγραφή είναι διαθέσιμη στον επίσημο ιστότοπο μέσω του συνδέσμου ( διαθέσιμο στα αγγλικά). Ο οργανισμός δεν έχει ολοκληρώσει τις εργασίες για τη γλώσσα, αντίθετα, συνεχίζει να την αναπτύσσει.

Υποστήριξη προγράμματος περιήγησης

Είναι σημαντικό να κατανοήσουμε ότι οι προδιαγραφές HTML5 και η εφαρμογή αυτής της τεχνολογίας σε συγκεκριμένα προγράμματα περιήγησης είναι διαφορετικές έννοιες. Πολλά προγράμματα περιήγησης ιστού που αναπτύσσονταν ενεργά άρχισαν να εφαρμόζουν σταδιακά χαρακτηριστικά HTML5 ακόμη και πριν από την κυκλοφορία αυτής της έκδοσης. Σήμερα, τα πιο πρόσφατα προγράμματα περιήγησης υποστηρίζουν όλες τις δυνατότητες HTML5. Η πλήρης υποστήριξη παρέχεται από: Chrome, IE 11, Firefox, Edge, Opera. Οι σχετικά παλιές εκδόσεις δεν υποστηρίζουν νέα πρότυπα, για παράδειγμα, IE 8 και παλαιότερες εκδόσεις. Οι IE 9 και 10 εφαρμόζουν ήδη τα πρότυπα, αλλά μόνο εν μέρει.



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

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

Τι χρειάζεσαι για δουλειά;

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



Επίσης ένας καλός επεξεργαστής που υποστηρίζει τα περισσότερα λειτουργικά συστήματα είναι το Visual Studio Code. Μπορεί να τρέχει σε MacOS, Windows και Linux. Όσον αφορά τις δυνατότητες, αυτό το προϊόν λογισμικού είναι ελαφρώς ανώτερο από το Notepad++.

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