Από τον συγγραφέα:Γεια σε όλους. Όλοι θέλουμε να κατανοήσουμε καλύτερα τη δημιουργία ιστοτόπων προκειμένου να συμμετάσχουμε σε ενδιαφέροντα έργα και να πραγματοποιήσουμε τις ιδέες μας. Τι γίνεται όμως αν είσαι εντελώς αρχάριος; Το σεμινάριο html για ανδρείκελα με πρακτικά μαθήματα θα σας βοηθήσει να κάνετε επιτέλους μια τόσο σημαντική ανακάλυψη στη δημιουργία ιστοτόπων από το μηδενικό επίπεδο σε τουλάχιστον μια βασική κατανόηση.

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

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

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

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

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

Έτσι, η καλύτερη πρακτική είναι να πάρετε μια έτοιμη διάταξη ιστότοπου και να την τοποθετήσετε. Η διάταξη είναι ακριβώς η διαδικασία δημιουργίας ιστοσελίδων από ένα σχέδιο πολλαπλών επιπέδων χρησιμοποιώντας γλώσσες html και css. Μπορούν επίσης να χρησιμοποιούν πλαίσια, javascript και βιβλιοθήκες εφαρμογών κατά τη διάταξη, αλλά αυτό είναι ένα θέμα για άλλη συζήτηση. Όλα αυτά είναι μια προσθήκη. Το Html είναι μια βασική τεχνολογία που πρέπει να κατανοηθεί πολύ καλά.

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

Πώς να μάθετε τη γλώσσα και πού να εξασκηθείτε;

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

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

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

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

Η τελευταία σας πρακτική

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

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

Visual editors

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

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

ετικέτες

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

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

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

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

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

κεφάλι

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

Σύνδεσμος

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

Σώμα

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

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

  ορίζονται σε css και άλλα μπλοκ μπορούν να τοποθετηθούν μέσα σε αυτήν την ετικέτα).

• Επιλέγει μια παράγραφο από το κείμενο. το περιεχόμενο της παραγράφου βρίσκεται μεταξύ των ετικετών ανοίγματος και κλεισίματος·

• - αριθμημένη λίστα, τα στοιχεία της οποίας περικλείονται σε μια ετικέτα ζεύγους
  1. - μια λίστα με κουκκίδες, στην οποία, όπως σε μια αριθμημένη λίστα, τα στοιχεία υποδεικνύονται με μια ετικέτα

     • -

       - επικεφαλίδες εγγράφων (ο αριθμός υποδεικνύει το επίπεδο της επικεφαλίδας, δηλαδή

       - η κύρια επικεφαλίδα και οι επόμενες επιλογές είναι οι υπότιτλοι της, παρεμπιπτόντως, οι επικεφαλίδες επιπέδου

       ,

       σχεδόν αδύνατο να βρεθεί στο Διαδίκτυο), είναι επίσης σημαντικό να θυμάστε ότι μπορεί να υπάρχει μόνο μία επικεφαλίδα ανά σελίδα

       ;

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

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

     css

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

     

     Εφαρμογή CSS

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

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

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

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

     Πίνακας 4. Χαρακτηριστικά ετικέτας

     Χαρακτηριστικό	Περιγραφή, αποδεκτή τιμή
     διασταυρούμενης καταγωγής	Καθορίζει εάν το CORS (μια τεχνολογία προγράμματος περιήγησης που επιτρέπει σε μια ιστοσελίδα να έχει πρόσβαση σε πόρους από διαφορετικό τομέα) θα πρέπει να χρησιμοποιείται κατά τη λήψη μιας εικόνας από έναν ιστότοπο. ανώνυμη - σε ένα αίτημα μεταξύ τομέων, το πρόγραμμα περιήγησης προσθέτει αυτόματα μια κεφαλίδα Origin που περιέχει το όνομα του τομέα από τον οποίο υποβλήθηκε το αίτημα. Εάν ο διακομιστής δεν ανταποκρίνεται με κεφαλίδα CORS Access-Control-Allow-Origin: * (ή όνομα τομέα αντί για αστερίσκο), τότε η φόρτωση της εικόνας θα αποκλειστεί. use-credentials - εάν ο διακομιστής δεν παρέχει διαπιστευτήρια με Access-Control-Allow-Credentials: true, τότε η φόρτωση της εικόνας θα αποκλειστεί.
     href	Το κύριο χαρακτηριστικό της ετικέτας, η τιμή είναι η διαδρομή προς το αρχείο με στυλ.
     hreflang	Καθορίζει τη γλώσσα του κειμένου στο συνδεδεμένο έγγραφο.
     μεσο ΜΑΖΙΚΗΣ ΕΝΗΜΕΡΩΣΗΣ	Καθορίζει τον τύπο της συσκευής στην οποία θα εφαρμοστεί ο πόρος σύνδεσης.
     καμία φορά	Μια μεταβλητή συμβολοσειράς που δημιουργείται τυχαία από διακομιστή που ορίζει τους κανόνες για τη χρήση ενσωματωμένων στυλ για την προστασία του περιεχομένου. Η τιμή του χαρακτηριστικού είναι μια συμβολοσειρά κειμένου.
     σχετ	Το χαρακτηριστικό ορίζει τη σχέση μεταξύ του τρέχοντος εγγράφου και του εγγράφου αναφοράς. εναλλακτικό - ένας σύνδεσμος προς το ίδιο έγγραφο αλλά σε διαφορετική μορφή (για παράδειγμα, εκτυπώσιμες σελίδες, μετάφραση, καθρέφτης, RSS ή ροή Atom), . Αρχεία δείχνει ότι το συνδεδεμένο έγγραφο παρουσιάζει ιστορικό ενδιαφέρον. Ο σύνδεσμος μπορεί να οδηγεί σε μια συλλογή αρχείων, εγγράφων και άλλου υλικού. σύνδεσμος συγγραφέα στη σελίδα σχετικά με τον συγγραφέα του εγγράφου ή στη σελίδα με τα στοιχεία επικοινωνίας του συγγραφέα. σελιδοδείκτης Μια αναφορά στον πλησιέστερο πρόγονο του άρθρου που είναι ο σύνδεσμος ή στην ενότητα του άρθρου που σχετίζεται στενότερα με το στοιχείο εάν δεν υπάρχει πρόγονος. εξωτερικό χρησιμοποιείται για να υποδείξει ότι η συνδεδεμένη σελίδα δεν αποτελεί μέρος αυτού του ιστότοπου. καθορίζει πρώτα έναν σύνδεσμο προς το πρώτο έγγραφο σε μια ακολουθία εγγράφων. σύνδεσμος βοήθειας σε ένα έγγραφο βοήθειας. Το εικονίδιο καθορίζει τη διαδρομή προς το εικονίδιο που θα χρησιμοποιηθεί για το τρέχον έγγραφο. Το τελευταίο καθορίζει έναν σύνδεσμο προς το τελευταίο έγγραφο σε μια ακολουθία εγγράφων. άδεια Ένας σύνδεσμος προς τις πληροφορίες πνευματικών δικαιωμάτων για το έγγραφο. Το επόμενο υποδεικνύει ότι αυτό το έγγραφο είναι μέρος μιας σειράς και ότι ο σύνδεσμος οδηγεί στο επόμενο έγγραφο της σειράς. Το nofollow υποδεικνύει ότι ο σύνδεσμος δεν έχει εγκριθεί από τον συγγραφέα της σελίδας ή ότι ο σύνδεσμος είναι εμπορικός. Το noreferrer καθορίζει ότι η κεφαλίδα αιτήματος πελάτη που περιέχει τη διεύθυνση url της πηγής αιτήματος δεν πρέπει να μεταβιβάζεται όταν ακολουθείτε τη σύνδεση. Το pingback καθορίζει τη διεύθυνση του διακομιστή pingback, ο οποίος επιτρέπει στο ιστολόγιο να ειδοποιεί αυτόματα τους ιστότοπους που συνδέονται με αυτόν. Το prefetch καθορίζει ότι το αρχείο αναφοράς θα πρέπει να αποθηκευτεί στην προσωρινή μνήμη εκ των προτέρων. Το prev υποδεικνύει ότι αυτό το έγγραφο είναι μέρος μιας σειράς και ότι ο σύνδεσμος οδηγεί στο προηγούμενο έγγραφο της σειράς. Η αναζήτηση υποδεικνύει ότι το έγγραφο αναφοράς περιέχει μια διεπαφή αναζήτησης και σχετικούς πόρους. Η πλαϊνή γραμμή υποδεικνύει ότι το συνδεδεμένο έγγραφο θα εμφανίζεται, εάν είναι δυνατόν, σε ένα πρόσθετο περιβάλλον προγράμματος περιήγησης και ορισμένα προγράμματα περιήγησης, όταν κάνετε κλικ στον υπερσύνδεσμο, θα ανοίξουν ένα παράθυρο για να προσθέσετε τον σύνδεσμο στη γραμμή σελιδοδεικτών. Το φύλλο στυλ είναι μια αναφορά σε ένα εξωτερικό αρχείο που θα χρησιμοποιηθεί ως φύλλο στυλ για αυτό το έγγραφο. Η ετικέτα υποδηλώνει ότι η ετικέτα στην οποία οδηγεί ο υπερσύνδεσμος ανήκει σε αυτό το έγγραφο. επάνω υποδηλώνει ότι η σελίδα είναι μέρος μιας ιεραρχικής δομής και ότι η υπερ-σύνδεση οδηγεί σε έναν πόρο υψηλότερου επιπέδου στη δομή.
     μεγέθη	Καθορίζει το μέγεθος των εικονιδίων για οπτική εμφάνιση. Το χαρακτηριστικό sizes χρησιμοποιείται μόνο σε συνδυασμό με το rel="icon" , και μπορεί να λάβει τις ακόλουθες τιμές: πλάτος ύψος - ορίζει μια λίστα μεγεθών που χωρίζονται με κενά, κάθε μέγεθος πρέπει να έχει τη μορφή - πλάτος ύψος (τα μεγέθη εικονιδίων καθορίζονται σε pixel), για παράδειγμα: ; οποιοδήποτε - το εικονίδιο μπορεί να κλιμακωθεί σε οποιοδήποτε μέγεθος.
     τίτλος	Καθορίζει τον τίτλο του συνδέσμου ή το όνομα του συνόλου εναλλακτικών φύλλων στυλ. Η τιμή του χαρακτηριστικού είναι κείμενο.
     τύπος	Καθορίζει τον τύπο MIME του εγγράφου με το οποίο συνδέεται. Σε αυτήν την περίπτωση, παίρνει την τιμή "text/css" .

     1.2.5. Στοιχείο

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

     Τίτλοι σελίδων h1 h2 h3

     Ας προχωρήσουμε, βλέπουμε την ετικέτα

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

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

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

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

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

     . Ο προσδιορισμός μιας παραγράφου σε html ισοδυναμεί με τη δημιουργία μιας νέας παραγράφου σε ένα έγγραφο MS Word. Δεν πρόσθεσα κάτι νέο στο έγγραφο. Όμως, αυτό δεν είναι το μόνο που πρέπει να υπάρχει στο έγγραφο 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 >

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

     

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

     < / html >

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

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

     

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

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

     Στοιχείο DOCTYPE

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

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

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

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

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

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

     1. Σχεδόν όλες οι ετικέτες ανοίγουν και κλείνουν.
     2. Το έγγραφο ξεκινά με μια ετικέτα ;
     3. Παρουσία ετικέτας ;
     4. Παρουσία ετικέτας ;
     5. Η σαφής δομή του εγγράφου html.

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

     Παρακολουθήστε το βίντεο βασικών html από το Webformyself.

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

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

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

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

     • Στοιχείο (στοιχείο) είναι μια κατασκευή γλώσσας HTML. Αυτό είναι ένα αντικείμενο που περιέχει δεδομένα και σας επιτρέπει να τα μορφοποιήσετε με συγκεκριμένο τρόπο. Οποιαδήποτε ιστοσελίδα είναι ένα σύνολο στοιχείων. Μία από τις κύριες ιδέες του υπερκειμένου είναι η ικανότητα ένθεσης στοιχείων.
     • Ετικέτα (ετικέτα) είναι οι δείκτες έναρξης ή τέλους του στοιχείου. Οι ετικέτες ορίζουν το εύρος των στοιχείων και διαχωρίζουν τα στοιχεία το ένα από το άλλο. Στο κείμενο μιας ιστοσελίδας, οι ετικέτες περικλείονται σε γωνιακές αγκύλες και η τελική ετικέτα ακολουθείται πάντα από κάθετο.
     • Χαρακτηριστικό(χαρακτηριστικό) - Παράμετρος ή ιδιότητα ενός στοιχείου. Με άλλα λόγια, αυτή είναι μια μεταβλητή που έχει ένα τυπικό όνομα και στην οποία μπορεί να εκχωρηθεί ένα συγκεκριμένο σύνολο τιμών: τυπική ή αυθαίρετη. Οι τιμές χαρακτήρων χαρακτηριστικών αναμένεται να περικλείονται σε ευθεία εισαγωγικά, αλλά ορισμένα προγράμματα περιήγησης επιτρέπουν τη μη χρήση εισαγωγικών. Αυτό συμβαίνει επειδή ο τύπος του χαρακτηριστικού είναι πάντα γνωστός εκ των προτέρων. Τα χαρακτηριστικά βρίσκονται μέσα στην ετικέτα έναρξης και χωρίζονται μεταξύ τους με κενά.
     • Υπερσύνδεσμος- ένα κομμάτι κειμένου που είναι δείκτης σε άλλο αρχείο ή αντικείμενο. Οι υπερσύνδεσμοι είναι απαραίτητοι για να παρέχουν τη δυνατότητα πλοήγησης από το ένα έγγραφο στο άλλο.
     • πλαίσιο (πλαίσιο) - αυτός ο όρος έχει δύο έννοιες. Το πρώτο είναι η περιοχή εγγράφων με τις δικές της γραμμές κύλισης. Η δεύτερη τιμή είναι μια εικόνα σε ένα σύμπλεγμα ( κινουμένων σχεδίων) αρχείο εικόνας (παρόμοιο με καρέ από ταινία). Είναι επίσης πιθανό ότι αντί για τον όρο "πλαίσιο" στην εξειδικευμένη βιβλιογραφία και τα τοπικά προϊόντα λογισμικού, μπορείτε να βρείτε τον όρο "πλαίσιο" ή "πλαίσιο".
     • αρχείο HTMLή σελίδα HTML - ένα έγγραφο που δημιουργήθηκε με τη μορφή υπερκειμένου που βασίζεται στη γλώσσα HTML. Τέτοια αρχεία έχουν τις επεκτάσεις htm ή html.
     • Applet (μικροεφαρμογή) είναι ένα πρόγραμμα που μεταφέρεται στον υπολογιστή του πελάτη ως ξεχωριστό αρχείο και εκκινείται κατά την προβολή μιας ιστοσελίδας.
     • Γραφήή σενάριο ( γραφή) είναι ένα πρόγραμμα που περιλαμβάνεται σε μια ιστοσελίδα για να βελτιώσει τις δυνατότητές της.
     • Επέκταση (επέκταση) είναι ένα στοιχείο που δεν αποτελεί μέρος της προδιαγραφής γλώσσας, αλλά χρησιμοποιείται, παρέχοντας τη δυνατότητα δημιουργίας ενός νέου ενδιαφέροντος εφέ μορφοποίησης.
     • CGI (Κοινή διεπαφή πύλης) είναι ένα γενικό όνομα για προγράμματα που, ενώ εκτελούνται σε διακομιστή, σας επιτρέπουν να επεκτείνετε τις δυνατότητες των ιστοσελίδων. Για παράδειγμα, χωρίς τέτοια προγράμματα είναι αδύνατο να δημιουργηθούν διαδραστικές σελίδες.
     • Κώδικας HTML -υπερπληθωρισμός Έγγραφο κειμένουστην αρχική του μορφή, όταν όλα τα στοιχεία και τα χαρακτηριστικά είναι ορατά.
     • ιστοσελίδα— ένα έγγραφο (αρχείο) που ετοιμάστηκε σε μορφή υπερκειμένου και δημοσιεύτηκε στον Παγκόσμιο Ιστό.
     • Δικτυακός τόπος (ιστοσελίδα) είναι ένα σύνολο ιστοσελίδων που βρίσκονται σε ένα μέρος και συνδέονται μεταξύ τους.
     • Πρόγραμμα περιήγησης (πρόγραμμα περιήγησης) είναι ένα πρόγραμμα περιήγησης ιστού.
     () - αντιγραφή αρχείων από τον διακομιστή στον υπολογιστή-πελάτη.
     • URL (Ενιαίος Εντοπιστής Πόρων) ή Uniform Resource Locator, η διεύθυνση κάποιου αντικειμένου στο Διαδίκτυο, π.χ. μια τυπική διεύθυνση URL του WWW μοιάζει με αυτό: http://www.name.domain/filename.

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

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

     Εκδόσεις HTML

     Η πρώτη έκδοση της γλώσσας HTML αναπτύχθηκε στις αρχές της δεκαετίας του '90 από τον Tim BenersLee για ένα από τα δημοφιλή προγράμματα περιήγησης Mosaic στο παρελθόν. Αλλά τότε, ούτε το πρόγραμμα περιήγησης ούτε η ίδια η HTML είχαν ακόμη καλή χρήση. Το 1993, εμφανίστηκε το HTML+ και αυτή η έκδοση πέρασε επίσης σε μεγάλο βαθμό απαρατήρητη. Αλλά η εξάπλωση της γλώσσας HTML οφείλεται στην έκδοση 2.0, η οποία εμφανίστηκε τον Ιούνιο του 1994. Και από τότε έχει αυξηθεί η δημοτικότητα του WWW σε όλο τον κόσμο. Τα πρότυπα που περιλαμβάνονται στην έκδοση 2 έχουν ριζώσει τόσο καλά που χρησιμοποιούνται ακόμα και σήμερα.

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

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

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

     Δομή ιστοσελίδας

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

     Η δομή του εγγράφου Ιστού Μετάβαση στο τέλος του εγγράφου<НR> <Н1>Επικεφαλίδα 1

     <Н2>Επικεφαλίδα 2 <НЗ>Κεφάλαιο 3 <Н4>Κεφάλαιο 4 <Н5>Κεφάλαιο 5 <Н6>Κεφάλαιο 6 <НR>Εδώ βρίσκεται πρώτος σύνδεσμος<а name ="list2"> <НR> <р>Θα πρέπει να βρίσκεται εδώ
     το κύριο κείμενο της ιστοσελίδας.
     Και εγώ, για παράδειγμα, θα εισάγω εδώ
     πολλές μεταγραφές,
     για να μπορέσεις
     παρατηρήστε οπτικά,
     πώς λειτουργεί για εσάς
     συνδέσμους μέσα στο έγγραφο
     αλλά αν έχετε μεγάλη ανάλυση,
     Απλώς δεν θα παρατηρήσετε τη μετάβαση στους συνδέσμους
     <НR> <а name="list1"

     Παω σε<а href ="#list">Αρχή εγγράφου

     Για να κατανοήσετε τη δομή μιας ιστοσελίδας, είναι απαραίτητο να λάβετε υπόψη όλα τα στοιχεία της που περιλαμβάνονται στον παραπάνω κώδικα.

     < html>

     Ονομασία εγγράφου σε HTML. Μία από τις αρχές της γλώσσας είναι η πολυεπίπεδη ένθεση στοιχείων. Αυτό το στοιχείο είναι το πιο εξωτερικό στοιχείο επειδή ολόκληρη η ιστοσελίδα πρέπει να βρίσκεται μεταξύ των ετικετών έναρξης και τέλους. Σύμφωνα με την ιδέα, αυτό το στοιχείο μπορεί να θεωρηθεί ως τυπικότητα. Έχει χαρακτηριστικά version, lang και dir, τα οποία χρησιμοποιούνται σπάνια σε αυτήν την περίπτωση, και επιτρέπει την ένθεση του HEAD, του BODY FRAMESET και άλλων στοιχείων που καθορίζουν τη συνολική δομή της ιστοσελίδας. Φυσικά, η ετικέτα τέλουςόλα αυτά τα έγγραφα τερματίζονται.

     < κεφάλι>

     Η περιοχή κεφαλίδας της ιστοσελίδας. Με άλλα λόγια, το πρώτο του μέρος. Όπως και το προηγούμενο στοιχείο, το HEAD χρησιμεύει μόνο για να σχηματίσει τη γενική δομή του εγγράφου. Αυτό το στοιχείο μπορεί να έχει χαρακτηριστικά lang και dir.

     < τίτλος>

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

     <МЕТА>

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

     < σώμα>

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

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

     background="διαδρομή στο αρχείο φόντου"

     Ένας απλούστερος σχεδιασμός φόντου βασίζεται στη ρύθμιση του χρώματός του

     bgcolor="#FFFFFF"

     Το χρώμα του φόντου καθορίζεται από τρεις διψήφιους δεκαεξαδικούς αριθμούς που ορίζουν την ένταση του κόκκινου, του πράσινου και του μπλε (rbg).

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

     text="#RRGGBB"

     Η ακόλουθη ιδιότητα χρησιμοποιείται για να ορίσετε το χρώμα κειμένου των υπερσυνδέσμων.

     link="#RRGGBB"

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

     <Н1>

     Στοιχείο κεφαλίδας. Υπάρχουν έξι επίπεδα επικεφαλίδων, τα οποία ορίζονται ως εξής.
     <Н1>επί κεφαλής
     <Н2>επί κεφαλής
     <Н3>επί κεφαλής
     <Н4>επί κεφαλής
     <Н5>επί κεφαλής
     <Н6>επί κεφαλής

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

     align="left" align="center" align="δεξιά"

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

     Και να μεταβείτε σε νέα γραμμή χωρίς να δημιουργήσετε παράγραφο - ετικέτα
     δηλαδή υπάρχει μεταβίβαση. Αυτές οι ετικέτες δεν χρειάζεται να κλείσουν. Φυσικά, αν δεν χρησιμοποιείτε στην ετικέτα

     Το στοιχείο ALIGN, το οποίο μπορεί να ορίσει τη στοίχιση παραγράφου:

     Αριστερά

     Κέντρο

     σωστά

     Το κείμενο μεταξύ αυτών των στοιχείων είναι δικαιολογημένο.

     <НR>

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

     • align = "αριστερά"
     • align = "κέντρο"
     • στοίχιση "δεξιά"
     • align = "δικαιολογώ"

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

     <а name=»метка»>Ελεύθερο κείμενο

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

     Για να εισαγάγετε εικόνες ( Εικόνες) σε ένα έγγραφο HTML, χρησιμοποιείται η ακόλουθη ετικέτα ( παρέχει μια πλήρη περιγραφή των χαρακτηριστικών αυτής της ετικέτας):
     

     Κονίστρα

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

     Το πιο συνηθισμένο είναι μια μη ταξινομημένη λίστα ( μη τακτοποιημένη λίστα). Παρουσιάζεται παρακάτω:

     • Στοιχείο 1 της λίστας
     • Στοιχείο 2 της λίστας
     • Στοιχείο 3 της λίστας

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

     τραπέζια

     Είναι ένα από τα πιο απαραίτητα μέσα μορφοποίησης δεδομένων σε μια ιστοσελίδα. Η κύρια ευκολία είναι ότι το πρόγραμμα περιήγησης αναλαμβάνει τη σχεδίαση ολόκληρου του πίνακα. Το μέγεθος του πλαισίου μπορεί να προσαρμοστεί αυτόματα στο μέγεθος της θύρας προβολής του προγράμματος περιήγησης και, φυσικά, στο μέγεθος των γραμμών κειμένου και ψηφίων στα κελιά του πίνακα. Μεταξύ άλλων, οι πίνακες σάς επιτρέπουν να επιλύετε πολλές εργασίες σχεδίασης: ευθυγράμμιση τμημάτων της σελίδας μεταξύ τους, τοποθέτηση εικόνων και κειμένου δίπλα-δίπλα, έλεγχος σχεδίασης χρώματος κ.λπ. Κατά τη δημιουργία πινάκων, εφαρμόζεται η αρχή της ένθεσης: μέσα στο κύριο στοιχείο του πίνακα (ΠΙΝΑΚΑΣ), δημιουργείται ένας αριθμός στοιχείων που ορίζουν σειρές (TR) και μέσα σε αυτά τα στοιχεία υπάρχουν στοιχεία που περιγράφουν κάθε κελί της σειράς (TD , TH).

     Για να κατανοήσετε τη δομή ενός υπάρχοντος πίνακα ή να αναπτύξετε έναν νέο πίνακα, υπάρχει ένας κανόνας ότι η ακολουθία των στοιχείων περιγράφει τον πίνακα από πάνω προς τα κάτω και από δεξιά προς τα αριστερά. Για παράδειγμα, εάν ένα στοιχείο TR καθορίζεται μετά το στοιχείο TABLE, αυτό σημαίνει ότι ξεκινά η περιγραφή μιας νέας σειράς πίνακα. Όλα μετά από αυτό το στοιχείο θα τοποθετηθούν σε μία γραμμή (από δεξιά προς τα αριστερά). Μπορεί να είναι μια ακολουθία στοιχείων TD ( κύτταρα), άλλος πίνακας και ούτω καθεξής. Αφού εμφανιστεί ένα νέο στοιχείο TR, θα ξεκινήσει η περιγραφή της επόμενης γραμμής και ούτω καθεξής μέχρι το τέλος του πίνακα (ετικέτα).
     Ένας πίνακας μπορεί να ευθυγραμμιστεί οριζόντια χρησιμοποιώντας το χαρακτηριστικό align:

     • align="αριστερά" - προς τα αριστερά.
     • align="center" - στο κέντρο;
     • align="δεξιά" - προς τα δεξιά.

     Το πλάτος του πίνακα μπορεί να οριστεί ακριβώς σε pixel ή ως ποσοστό του πλάτους της σελίδας στο παράθυρο του προγράμματος περιήγησης. Για παράδειγμα: πλάτος=400 ή πλάτος=50%

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

     Σενάρια

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

     Ένα σενάριο είναι ένας κώδικας προγράμματος που περιλαμβάνεται στο κείμενο μιας σελίδας στη φόρμα πηγαίος κώδικαςκαι εκτελείται από το πρόγραμμα περιήγησης κατά την προβολή της σελίδας. Το σενάριο μπορεί να γραφτεί JavaScript, που αναπτύχθηκε από το Netscape ή σε σενάριο Visual Basic ( VBScript) που αναπτύχθηκε από τη Microsoft.

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

     • javascript - κώδικας JavaScript.
     • vbscript - Κωδικός VBScript.

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

     type="text/javascript"

     Ένα από τα πιο όμορφα χαρακτηριστικά του σεναρίου είναι η δυνατότητα αλλαγής του περιεχομένου μιας σελίδας ως αποτέλεσμα της εκτέλεσης του προγράμματος. Αλλά αυτό είναι μόνο ένα χαρακτηριστικό, όχι ένας κανόνας. Το χαρακτηριστικό defer (το οποίο δεν έχει καμία τιμή) μπορεί να χρησιμοποιηθεί για να «πει» στο πρόγραμμα περιήγησης ότι δεν θα γίνουν τέτοιες αλλαγές. Σε ορισμένες περιπτώσεις, αυτό σας επιτρέπει να επιταχύνετε τη φόρτωση της σελίδας.

     Από τα τυπικά χαρακτηριστικά, μπορείτε να χρησιμοποιήσετε το χαρακτηριστικό σύνολο χαρακτήρων.

     Ετικέτα σεναρίου ( ή μια σειρά από τέτοια στοιχεία) μπορεί να τοποθετηθεί είτε μέσα σε ένα στοιχείο HEAD είτε μέσα σε ένα στοιχείο BODY. Εάν το σενάριο βρίσκεται μέσα στο στοιχείο BODY, είναι επίσης πιθανό κάποιο πρόγραμμα περιήγησης που δεν υποστηρίζει το στοιχείο SCRIPT να αντιληφθεί τον κώδικα του προγράμματος ως απλό κείμενο και να τον εμφανίσει στην οθόνη. Για να μην συμβεί αυτό, ο κωδικός σεναρίου εισάγεται ως σχόλιο:

     —
     —
     —

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

     —
     —
     —
     —
     —
     —
     —
     —

     Αυτή είναι μια απλή σελίδα, αλλά περιλαμβάνει ένα σενάριο μιας γραμμής. Η μέθοδος ειδοποίησης εμφανίζει ένα μήνυμα πριν από τη φόρτωση. Και θα κρεμάσει μέχρι ο χρήστης να κάνει κλικ στο κουμπί ΟΚ, η λήψη θα συνεχιστεί.
     Μπορεί να υπάρχει περίπτωση, για παράδειγμα, η σελίδα να προβληθεί σε πρόγραμμα περιήγησης που δεν υποστηρίζει δέσμες ενεργειών, για αυτό παρέχεται το στοιχείο NOSCRIPT. Οι σύγχρονοι θεατές αγνοούν το περιεχόμενό του. Αυτό το στοιχείο μπορεί να χρησιμοποιηθεί με διάφορους τρόπους. Για αρχή, μπορείτε να εμφανίσετε μια διαφήμιση όπως αυτή μέσα σε αυτήν: Το πρόγραμμα περιήγησής σας δεν μπορεί να εκτελέσει το σενάριο που απαιτείται για την προβολή αυτής της ιστοσελίδας!» Δεύτερον, μέσα στο στοιχείο, μπορείτε να αναπτύξετε μια απλοποιημένη έκδοση της σελίδας, χωρίς σενάρια. Τρίτον, μπορείτε να δημιουργήσετε έναν σύνδεσμο προς ένα άλλο έγγραφο HTML. Το στοιχείο NOSCRIPT πρέπει να έχει μια ετικέτα τέλους.

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