Ετικέτα κλεισίματος:

Το περιεχόμενο μεταξύ των ετικετών ανοίγματος και κλεισίματος είναι το περιεχόμενο του στοιχείου.

Οι ετικέτες μπορούν να χρησιμοποιηθούν με δύο τρόπους:

Χρήση ετικετών σε ζευγάρια

Οι ζευγαρωμένες ετικέτες περιέχουν μια ετικέτα ανοίγματος και κλεισίματος. Δείτε πώς μοιάζουν:

Εδώ είναι ένα κείμενο

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

Μονές ετικέτες

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

Αυτά τα στοιχεία γράφονται ως εξής:

Το κλείσιμο / (κάθετο) είναι επίσης προαιρετικό. Αυτό είναι το ίδιο με την εγγραφή . Ωστόσο, για να αποφύγετε τη σύγχυση με την ετικέτα ανοίγματος, είναι καλή ιδέα να προσθέσετε ένα / (κάθετο) στο τέλος.

Γνωρίσματα

Τα χαρακτηριστικά είναι στοιχεία που επεκτείνουν τις ετικέτες Επιπλέον πληροφορίες. Το χαρακτηριστικό τοποθετείται στην αρχική ετικέτα και περιλαμβάνει ένα όνομα και μια τιμή.

Η ετικέτα χαρακτηριστικών θα μοιάζει με αυτό:

Η παραπάνω ετικέτα "HTML" έχει ένα χαρακτηριστικό "lang" με τιμή "en-US".

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

Κάθε έγγραφο HTML έχει μια βασική δομή που ορίζεται με τα ακόλουθα στοιχεία:

DOCTYPE ήDTD:Η δήλωση τύπου εγγράφου καθορίζει την έκδοση του HTML που χρησιμοποιείται. Αυτή η ετικέτα τοποθετείται στην αρχή του εγγράφου.

HTML:Ζεύγος Ετικέτες HTMLορίζει την αρχή και το τέλος ενός εγγράφου HTML.

ΚεφάλαιοΕΠΙ ΚΕΦΑΛΗΣ< κεφάλι>:αυτή η ενότητα ορίζει γενικές πληροφορίεςγια τη σελίδα, και συνήθως σύντομο. Το περιεχόμενο αυτού του στοιχείου δεν εμφανίζεται στη σελίδα. Ο τίτλος περιέχει την ετικέτα TITLE, η οποία ορίζει τον τίτλο του εγγράφου που εμφανίζεται στη γραμμή τίτλου του προγράμματος περιήγησης. Το HEADER μπορεί επίσης να περιέχει μεταδεδομένα ή συνδέσμους προς εξωτερικά αρχεία.

ΚεφάλαιοΣΩΜΑ: Αυτή η ενότητα περιέχει το κύριο σώμα της σελίδας. Το περιεχόμενό του εμφανίζεται στο πρόγραμμα περιήγησης. Το μεγαλύτερο μέρος του κώδικα σελίδας HTML βρίσκεται μέσα στο στοιχείο του σώματος.

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

απλή σελίδαHTML

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

Βήμα 1:Η πρώτη γραμμή του κώδικα HTML που πρέπει να προστεθεί προσδιορίζει το στοιχείο DOCTYPE ως "html". Αυτό σημαίνει ότι χρησιμοποιείται η πιο πρόσφατη έκδοση του HTML.

Βήμα 3:Στη συνέχεια προσθέτουμε μια ετικέτα τίτλου με μια ετικέτα τίτλου και πληροφορίες συνόλου χαρακτήρων.

Βήμα 4:Μετά από αυτό, γράφεται η ετικέτα BODY.

Βήμα 5:Τώρα το κενό έγγραφο HTML είναι έτοιμο. Ας αρχίσουμε να προσθέτουμε κείμενο για εμφάνιση. Προσθέτουμε μια ετικέτα τίτλου

και ετικέτα

Ορίζουν την επικεφαλίδα πρώτου επιπέδου και την παράγραφο κάτω από αυτήν.

Γειά σου Κόσμε

Απλή σελίδα HTML

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

Προβολή σελίδαςHTML

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

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

Τίτλος σαν "Hello World"

Επικεφαλίδα πρώτου επιπέδου ως "Hello World"

Παράγραφος με κείμενο "Απλή σελίδα HTML"

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

Προηγμένη μορφοποίηση κειμένου

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

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

-

. Υπάρχουν 6 επίπεδα επικεφαλίδων συνολικά. Και

- αυτό είναι το μεγαλύτερο από αυτά σε μέγεθος,

- το μικρότερο.

ετικέτες

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

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

Τολμηρός -

Πλάγια γραφή -

Υπογραμμισμένο -

Γραμματοσειρά -

Μια πλήρης λίστα με αυτές τις ετικέτες είναι διαθέσιμη εδώ.

Προσθήκη συνδέσμων

Αυτό είναι το κείμενο του συνδέσμου

Προσθήκη εικόνων

Ετικέτα είναι μια μεμονωμένη ετικέτα, χωρίς ετικέτα κλεισίματος. Μπορείτε να καθορίσετε χαρακτηριστικά εικόνας.

Το χαρακτηριστικό src καθορίζει τη θέση της εικόνας.

Το χαρακτηριστικό style έχει πολλές επιλογές, συμπεριλαμβανομένου του πλάτους και του ύψους της εικόνας σε pixel.

Το χαρακτηριστικό alt δίνει Σύντομη περιγραφήεικόνες. Χρησιμοποιείται εάν για κάποιο λόγο η εικόνα δεν φορτώνεται.

Προσθήκη τίτλου

Ετικέτα

είναι νέο στην HTML5 και καθορίζει το κορυφαίο στοιχείο μιας ιστοσελίδας. Οι τίτλοι συνήθως περιέχουν το λογότυπο της εταιρείας, στοιχεία επικοινωνίας, σύνδεσμοι πλοήγησης, κ.λπ. Μπορεί να υπάρχουν πολλά στοιχεία σε ένα έγγραφο<>.

Προηγμένες έννοιες σε HTML

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

Θα αναφέρουμε μερικές έννοιες που θα σας βοηθήσουν περαιτέρω. Μπορείτε να συνεχίσετε να μαθαίνετε περισσότερα και να χρησιμοποιείτε προηγμένο HTML και τις δυνατότητές του.

Επικύρωση κώδικα HTML

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

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

Προσθήκη πρόσθετων ετικετών

Υπάρχουν πολλές περισσότερες ετικέτες και χαρακτηριστικά HTML από όσα συζητήσαμε εδώ. Δύο καλοί πόροι εκμάθησης είναι το w3schools και το HTML Dog που έχουν περισσότερα μαθήματα και πλήρης λίσταετικέτες.

Μπορείτε επίσης να χρησιμοποιήσετε την "Προβολή σελίδας πηγής" στο πρόγραμμα περιήγησής σας για να εξετάσετε τον κώδικα των καλά σχεδιασμένων ιστότοπων και να δείτε νέες τεχνικές.

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

ΠροσθήκηCSS καιJavaScript

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

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

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

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

Είσαι έτοιμος? Τότε πάμε!

ΔΕΝ χρειαζόμαστε σύνδεση στο διαδίκτυο για να δημιουργήσουμε μια σελίδα σε html.

θα χρειαστούμε

1) Επιλέγω επεξεργαστής κειμένου . αρκετά για πρώτη φορά Μπλοκ ΣΗΜΕΙΩΣΕΩΝ(σε αυτό χρειαζόμαστε μόνο την εντολή Αποθήκευση ως)

Εάν θέλετε να ξεκινήσετε αμέσως τον προγραμματισμό σε εξειδικευμένους επεξεργαστές κειμένου, τότε δώστε προσοχή στα εξής: 1) για Windows NotePad++(κατεβάστε ή ) άτυπος(Κατεβάστε) 2) για Μακκαι linux συντάκτης bluefish(Κατεβάστε) Η διαφορά τους από τους απλούς επεξεργαστές κειμένου έγκειται κυρίως στο ότι κάνουν αυτόματη εσοχή, ! καθιστούν δυνατή την εκ νέου αποθήκευση του αρχείου σε διαφορετική κωδικοποίηση (σημειώστε ότι θα το συναντήσετε στο μέλλον), ζωγραφίστε ετικέτες σε διαφορετικά χρώματα, όπως ο κώδικας στο κάτω μέρος του μαθήματος. Σε ένα κανονικό πρόγραμμα επεξεργασίας, θα είναι μονόχρωμο.

2) Οποιοδήποτε πρόγραμμα περιήγησης στο Διαδίκτυο όπως Internet Explorer για Windows ή σαφάριγια Mac OS X και iOS. Ναι, μπορείτε επίσης Mozilla, Google Chrome , ΛΥΡΙΚΗ ΣΚΗΝΗ, Yandexκαι Ταχυδρομείοπρογράμματα περιήγησης, κ.λπ.

Ας ξεκινήσουμε τη δημιουργία μιας σελίδας HTML

1) δημιουργήστε ένα φάκελο στην επιφάνεια εργασίας html. Θα το κάνουμε έτσι ώστε τα μαθήματα να είναι δομημένα και να περιέχονται σε ένα μέρος.

2) Δημιουργώτο αρχείο μας σε ένα πρόγραμμα επεξεργασίας κειμένου όπως το Σημειωματάριο. Περαιτέρω Αποθήκευση ως.

Η κωδικοποίηση είναι καλύτερα να επιλέξετε UTF-8 και μετά επιλέξτε όλων των τύπων αρχείωνκαι επιλέξτε ένα όνομα αρχείου με .html στο τέλος, για παράδειγμα index.html

Επιλέγουμε ως κατάλογο (φάκελο) που θα αποθηκεύσουμε το δικό μας html
Κάντε κλικ αποθηκεύσετε. Ετοιμος!

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

Η δυνατότητα προβολής των επεκτάσεων αρχείων μπορεί να σας βοηθήσει να εντοπίσετε τον τύπο ενός αρχείου και σας επιτρέπει να το κάνετε χειροκίνητα (με την εντολή μετονομάζω) αλλάξτε όχι μόνο την επέκταση, αλλά και τον τύπο αρχείου (για παράδειγμα, από txt σε html)

ΔΕΝ πρέπει να μοιάζει με αυτό: φωτογραφία, έγγραφο κειμένου, παιχνίδι έτσι πρέπει να μοιάζει: photo.jpg; text document.txt; game.exe Αλλά εάν τα ονόματα των αρχείων σας εξακολουθούν να μοιάζουν με την πρώτη επιλογή (ΧΩΡΙΣ, για παράδειγμα, .txt ; jpg ; .exe στο τέλος του ονόματος αρχείου), κάντε τα εξής: Εξετάζουμε τις ρυθμίσεις των αρχείων και των φακέλων: Για Windows XPΆνοιγμα οποιουδήποτε φακέλου - Εργαλεία (επάνω πίνακα) - Επιλογές φακέλων - Προβολή - Απόκρυψη επεκτάσεων για εγγεγραμμένα αρχεία (απεπιλέξτε) - Εφαρμογή Για Windows 7Άνοιγμα οποιουδήποτε φακέλου - Οργάνωση - Επιλογές αρχείου και αναζήτησης - Προβολή - Απόκρυψη επεκτάσεων για καταχωρημένους τύπους αρχείων (απεπιλέξτε) - Εφαρμογή Για MacOSΚάνουμε κλικ στην επιφάνεια εργασίας - Finder - Προτιμήσεις (Ρυθμίσεις) - Για προχωρημένους (Για προχωρημένους) - επιλέξτε το πλαίσιο στο Εμφάνιση όλων των επεκτάσεων αρχείων (Εμφάνιση επεκτάσεων όλων των αρχείων) - Εφαρμογή

3) επικολλήστε σε αυτό ολόκληρο τον κώδικα (μαζί με τα σχόλια) παρακάτω:

Ο τίτλος της σελίδας μου

4) ανοίξτε το αρχείο. Μπορείτε να επιλέξετε άλλο πρόγραμμα περιήγησης για να ανοίξετε αυτό το αρχείο, για αυτό πατάμε το δεξί κουμπί του ποντικιού στο αρχείο μας index.html - Για άνοιγμα μεκαι επιλέξτε ένα πρόγραμμα περιήγησης από τη λίστα, για παράδειγμα, Internet Explorer, Google Chrome, Mozilla, Yandex Browser κ.λπ.

Ως αποτέλεσμα, ανοίγοντας το πρόγραμμα περιήγησης στο Διαδίκτυο, το αποτέλεσμα index.html, Θα πρέπει να δείτε μια σελίδα σαν αυτή:

Εικόνα 1.

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

Ο τίτλος της σελίδας μου

Αυτή είναι η πρώτη μου ιστοσελίδα!

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

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

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

Ετικέτα σώμασημαίνει το σώμα της σελίδας. Τι να γράψετε μετά τις ετικέτες ανοίγματος και κλεισίματος σώμακαι θα είναι το περιεχόμενο της σελίδας σας

Οποιοσδήποτε τίτλος

Μόνο μήνυμα

Κείμενο σε μια παράγραφο. Θα γραφτεί με νέα γραμμήκαι τελειώνει με μια ετικέτα κλεισίματος

Άλλο κείμενο

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

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

Θέλω να επισημάνω το κείμενο τολμηρή και αυτή στα ιταλικα

Ξεχάσαμε επίτηδες την ετικέτα κλεισίματος b μετά τη λέξη με έντονη γραφή. Ως αποτέλεσμα, το πρόγραμμα περιήγησης εμφάνισε τα ακόλουθα

Θέλω να επισημάνω το κείμενο τολμηρή και αυτή στα ιταλικα

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

5) Εάν θέλετε να επεξεργαστείτε κάτι στο αρχείο σας index.html(και τώρα ανοίγει από προεπιλογή μόνο από το πρόγραμμα περιήγησης), μετά πατάμε το δεξί κουμπί του ποντικιού στο αρχείο μας index.html- επιλέξτε Για άνοιγμα μεκαι από τη λίστα που επιλέγουμε ήδη ένα πρόγραμμα επεξεργασίας κειμένου, θα είναι είτε Μπλοκ ΣΗΜΕΙΩΣΕΩΝ, ή άλλο πρόγραμμα επεξεργασίας κειμένου που έχετε εγκαταστήσει.

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

Συγχαρητήρια!
Είναι εύκολο?)

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

Βασική δομή HTML
Ας δημιουργήσουμε το απόλυτο απλό htmlέγγραφο. Για να το κάνετε αυτό, δημιουργήστε έναν φάκελο στον υπολογιστή. Ονομάστε την όπως θέλετε. Μπαίνουμε σε αυτό, κάνουμε κλικ κάντε δεξί κλικποντίκια από κενό πεδίοκαι επιλέξτε Νέο > Έγγραφο κειμένου. Ανοίξτε το έγγραφο κειμένου που δημιουργήθηκε και επάνω μενούεπιλέξτε "Αρχείο" > "Αποθήκευση ως...". Στο παράθυρο διαλόγου που ανοίγει, στη γραμμή «Όνομα αρχείου» γράφουμε index.htm. Στη γραμμή "Κωδικοποίηση", επιλέξτε UTF-8 και κάντε κλικ στο "Αποθήκευση". Θα έχουμε ένα αρχείο ευρετηρίου στο οποίο θα εισάγουμε όλους τους κωδικούς HTML.

Τώρα αντιγράψτε τον παρακάτω κώδικα και επικολλήστε τον στο αρχείο δείκτης. Σπουδαίος! Πρέπει να ανοίξετε αυτό το αρχείο με ειδικό πρόγραμμα επεξεργασίας. Συνήθως χρησιμοποιώ το Σημειωματάριο. Για να το κάνετε αυτό, κάντε δεξί κλικ στο αρχείο δείκτηςκαι επιλέξτε "Άνοιγμα με..." > "Σημειωματάριο". Υπάρχουν άλλοι ειδικοί επεξεργαστές με επισήμανση σήμανσης. Ποιος είναι πιο άνετος. Μετά από αυτό, πατώντας τα πλήκτρα Ctrl + S, αποθηκεύουμε τις αλλαγές μας και μετά κάνουμε διπλό κλικ στο ευρετήριο. Η πρώτη μας ιστοσελίδα που δημιουργήθηκε θα ανοίξει στο πρόγραμμα περιήγησης.

Η πρώτη μου ιστοσελίδα

Αυτή είναι η πρώτη μου ιστοσελίδα

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

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

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

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

Η σελίδα μου XHTML Αυτή είναι η πρώτη μου σελίδα XHTML.

Η ετικέτα έχει τρεις γεύσεις: Strict, Transitional και Frameset. Στο επάνω μέρος του εγγράφου HTML, δηλώνετε ποιο θέλετε να χρησιμοποιήσετε.

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

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

Σύνολο πλαισίωνΧρησιμοποιήστε αυτή την ποικιλία όταν εργάζεστε με κουφώματα.

Δώστε προσοχή σε μια άλλη διαφορά μεταξύ των κωδικών XHTML και των κανονικών. Έγγραφα HTML: Η ετικέτα έχει τρία νέα χαρακτηριστικά: xmlns, xml:lang και lang. Πότε εφαρμογές HTMLέπρεπε μόνο να συμπεριλάβετε μια ετικέτα για να προσδιορίσετε το αρχείο ως έγγραφο HTML, αλλά σε αυτήν την περίπτωση θα πρέπει να προσθέσετε ένα χαρακτηριστικό xmlns που συνδέει το έγγραφο με τον ορισμό του W3C του XHTML, ο οποίος εξακολουθεί να εξελίσσεται. Προς το παρόν, θυμηθείτε να συμπεριλάβετε την ετικέτα και την πλήρη ετικέτα σε όλες τις ιστοσελίδες σας.

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

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

Χρησιμοποιήστε πεζούς χαρακτήρες για όλες τις ετικέτες. Για εγγραφή στο πρόγραμμα περιήγησης

Και είναι ισοδύναμα (αν και μπορεί να μην είναι απαραίτητα). Χρησιμοποιήστε πεζούς χαρακτήρες σε όλες τις εντολές σας, ώστε να μην χρειάζεται να κωδικοποιείτε τις ιστοσελίδες σας όταν αλλάζουν τα πρότυπα XHTML.

Μην χρησιμοποιείτε ποτέ κενά στα ονόματα αρχείων. παλαιός συστήματα υπολογιστώνδυσκολεύονται να διαβάσουν ονόματα αρχείων που περιέχουν κενά (όπως η πρώτη μου σελίδα .htm). Πληκτρολογήστε μια υπογράμμιση αντί για ένα κενό (για παράδειγμα, my_first_page.htm).

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

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

Υπάρχει μια συγκεκριμένη ιεραρχία ένθεσης ετικετών. Για παράδειγμα, tag

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

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

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

Το HTML σημαίνει HyperText Γλώσσα σήμανσης. Μεταφρασμένο σημαίνει "Γλώσσα σήμανσης υπερκειμένου". Είναι σημαντικό να κατανοήσουμε ότι η HTML δεν είναι μια γλώσσα προγραμματισμού, αλλά μια σήμανση τοποθεσίας.

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

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

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

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

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

<открывающий тег>περιεχόμενο

Όπως μπορείτε να δείτε, η μόνη διαφορά μεταξύ της ετικέτας ανοίγματος και κλεισίματος είναι "/".

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

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

Η HTML έχει δύο παιδί στοιχείο:

• ... ;
• .. .

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

Το πιο σημαντικό, δεν υπάρχει περιεχόμενο εδώ.

Η ενότητα BODY καθορίζει το περιεχόμενο του εγγράφου που θα εμφανίζεται στον χρήστη.

Μάθετε να δημιουργείτε αμέσως ανοιχτές και κλειστές ετικέτες, γιατί μπορεί να υπάρχουν 10 ένθετα στοιχεία. Επιπλέον, για ευκολία, οι ένθετες ετικέτες συνιστάται να έχουν εσοχές. Για παράδειγμα, όπως αυτό.

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

Πώς να δημιουργήσετε μια απλή σελίδα HTML

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

Έτσι φαίνεται το πρόγραμμα επεξεργασίας Notepad++.

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

Για να ταιριάζει η επισήμανση με τη γλώσσα, πρέπει να καθοριστεί στις ρυθμίσεις.

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

Πώς να δημιουργήσετε μια ιστοσελίδα στο Σημειωματάριο HTML

Αρχικά, ανοίξτε το σημειωματάριο.

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

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

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

World Consortium W3C

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

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

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

• Προαιρετική ετικέτα.
• Απαγορευμένος.
• Κενή ετικέτα.
• Απαρχαιωμένος
• Χαμένος.

Ετικέτες σε HTML

Πριν δημιουργήσετε μια σελίδα HTML, πρέπει να καταλάβετε τι πρέπει να υπάρχει στο τμήμα της υπηρεσίας HEAD.

Η περιοχή HEAD έχει τόσο απαιτούμενες όσο και προαιρετικές ετικέτες. Απαιτείται η ετικέτα τίτλου. Συμβολίζεται . Αντιστοιχίζεται σε ολόκληρο το έγγραφο. Και αυτό που βλέπετε στα αποτελέσματα μηχανή αναζήτησηςΤο Google είναι η ετικέτα τίτλου.

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

Ορίζονται ως

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

Ένα παράδειγμα τέτοιας φωλιάς:

συνέχεια του πρώτου σχολίου -->

Το αποτέλεσμα στο πρόγραμμα περιήγησης θα είναι το εξής

συνέχεια του πρώτου σχολίου -->

Και εδώ είναι ένα κομμάτι δεν θα είναι ορατό. Δεύτερη ετικέτα ανοίγματος