Σπίτι › Εκπαίδευση › Ποια είναι τα κύρια στοιχεία μιας ιστοσελίδας; Βασικά στοιχεία ιστοσελίδων. Δομή γλώσσας HTML: ετικέτες

Ποια είναι τα κύρια στοιχεία μιας ιστοσελίδας; Βασικά στοιχεία ιστοσελίδων. Δομή γλώσσας HTML: ετικέτες

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

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

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

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

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

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

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

Είναι σύνηθες να δημοσιεύεται στο κάτω μέρος του εγγράφου πληροφορίες σχετικά με τους προγραμματιστές και τη διεύθυνση του ιστότοπου ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ , μέσω του οποίου οι επισκέπτες του πόρου μπορούν να στείλουν τις απαντήσεις, τις προτάσεις και τις επιθυμίες τους στους κατόχους της σελίδας.

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

Οι ιστότοποι διαφέρουν μεταξύ τους:

Μεγέθη (από πολλές σελίδες έως διακομιστές Web με gigabyte πληροφοριών).

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

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

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

Παθητικά (παραστατικά) στοιχεία

κινουμένων σχεδίων

Ενεργά στοιχεία

πεδία εισαγωγής
διακόπτες

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

Θέμα 9. Ηλεκτρονική επικοινωνία. Διευθύνσεις ηλεκτρονικού ταχυδρομείου

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

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

Μια διεύθυνση email αποτελείται από δύο μέρη, που χωρίζονται με το σύμβολο @ (αυτό το σύμβολο συνήθως ονομάζεται "σκύλος"):

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

Ονομα τομέα διακομιστή αλληλογραφίας(στο παράδειγμά μας - ταχυδρομείο. ru) .

Για παράδειγμα, ιρίνα@ ταχυδρομείο. ru

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

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

Με βάση αυτή την εγγραφή, ο διακομιστής αναγνωρίζει τον χρήστη.

Σχεδιασμός Ασφάλειας Διαδικτύου για Προστασία

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

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

Γραμμές άμυνας:

Αποκλεισμός πιθανών επιθέσεων:

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

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

Μείωση των πηγών κινδύνου:

Χρησιμοποιήστε μόνο εκείνες τις υπηρεσίες Διαδικτύου που χρειάζεστε πραγματικά.

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

Διαμορφώστε σωστά το λογισμικό (τόσο λιγότερο επιτρέπεται, τόσο υψηλότερη είναι η ασφάλεια).

Μην διαφημίζετε πληροφορίες σχετικά με τον εαυτό σας στο διαδίκτυο.

Περιορίστε την πρόσβαση στους πόρους του υπολογιστή σας.

Προετοιμασία για ανάκαμψη από μια επίθεση:

Δημιουργήστε και ενημερώστε τακτικά αντίγραφα ασφαλείαςδεδομένα εργασίας.

Έχετε πάντα στη διάθεσή σας κιτ διανομής λογισμικού.

Έλεγχος ταυτότητας (απόrpοικολογικόςαυθεντικός- αυθεντικότητα) - Επιβεβαίωση της αυθεντικότητας.

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

Γνωρίζοντας πού και πώς να τοποθετήσετε λέξεις -κλειδιά σε μια ιστοσελίδα μπορεί να κάνει ή να σπάσει την εταιρεία SEO.

Υπάρχουν 5 στοιχεία σε κάθε ιστοσελίδα όπου πρέπει να τοποθετήσετε τις λέξεις -κλειδιά σας:

Τίτλος σελίδας (ετικέτα τίτλου)
Λέξεις-κλειδιά σελίδας (λέξεις-κλειδιά μετα-ετικέτας)
Περιγραφή σελίδας (μετα-ετικέτα περιγραφής)
Εναλλακτικό κείμενο για εικόνες (ετικέτα Alt)
Περιεχόμενο ιστοσελίδας (σώμα ετικέτας)

Από όλα τα παραπάνω στοιχεία μιας ιστοσελίδας, το πιο σημαντικό από όλα είναι το περιεχόμενο της σελίδας (σημείο 5). Περισσότερα για αυτό παρακάτω.

Προς το παρόν, ας δούμε αυτή τη λίστα με τη σειρά.

Στοιχείο #1. Τίτλος σελίδας (ετικέτα τίτλου)

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

Μπορείτε να δείτε τον τίτλο της ιστοσελίδας στην επάνω γραμμή του προγράμματος περιήγησης στο Διαδίκτυο. Για να το επαληθεύσετε αυτό, ξεκινήστε οποιοδήποτε πρόγραμμα περιήγησης, για παράδειγμα, Internet Explorer, Όπερα ή Mozilla Firefox, μεταβείτε σε οποιονδήποτε ιστότοπο και συγκρίνετε το περιεχόμενο της ετικέτας τίτλου με την κορυφαία γραμμή σε αυτά τα προγράμματα περιήγησης. Οι μηχανές αναζήτησης χρησιμοποιούν αυτήν την ετικέτα για δικούς τους σκοπούς - για να συλλέξουν πληροφορίες σχετικά με τον ιστότοπο και να καθορίσουν το θέμα του, καθώς και να το χρησιμοποιήσουν στα αποτελέσματα των μηχανών αναζήτησης (SERP) ως όνομα της ιστοσελίδας.

Θυμάμαι!Ο τίτλος μιας ιστοσελίδας είναι δικός του Σύντομη περιγραφή.

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

Στοιχείο Νο 2. Λέξεις-κλειδιά σελίδας (λέξεις-κλειδιά μετα-ετικέτας)

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

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

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

Στοιχείο Νο. 3. Περιγραφή σελίδας (μετα-ετικέτα περιγραφής)

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

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

Στοιχείο Νο. 4. Εναλλακτικό κείμενο για εικόνες (ετικέτα Alt)

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

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

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

Στοιχείο Νο. 5. Περιεχόμενο ιστοσελίδας (σώμα ετικέτας)

Έτσι, επιτέλους φτάσαμε στο πιο βασικό στοιχείο του ιστότοπου - το body tag, το στοιχείο του οποίου το περιεχόμενο είναι πιο ενδιαφέρον για τους χρήστες του Διαδικτύου. Οι μεγάλες μηχανές αναζήτησης δεν θα σας δίνουν πλέον την 1η θέση στα SERP μόνο και μόνο επειδή υπάρχουν πολλές επαναλήψεις μιας λέξης-κλειδιού στη σελίδα του ιστότοπού σας. Μόνο το πιο σχετικό με ένα συγκεκριμένο ερώτημα αναζήτησηςιστοσελίδα.

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

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

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

Γλώσσα HTML

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

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

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

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

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

Αρχές δημιουργίας ιστοσελίδας, βασικά στοιχεία ιστοσελίδας

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

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

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

Υπάρχουν εργαλεία επεξεργασίας που έχουν σχεδιαστεί ειδικά για γράφοντας HTML. Εξοικονομούν χρόνο γιατί περιέχουν κλειδιά γρήγορη πρόσβασηγια την εκτέλεση επαναλαμβανόμενων λειτουργιών, όπως ο ορισμός αρχικών ρυθμίσεων για έγγραφα, πίνακες ή απλή εφαρμογή στυλ σε κείμενο. Οι επεξεργαστές HTML διαφέρουν από τα εργαλεία σύνταξης WYSIWYG στο ότι απαιτούν γνώση των κανόνων για τη μη αυτόματη μεταγλώττιση HTML· οι συντάκτες απλώς απλοποιούν και επιταχύνουν αυτήν τη διαδικασία. Εκτός από τις τυποποιημένες από το WWWC ετικέτες HTML (τυποποιημένες ετικέτες), τα προγράμματα περιήγησης Ιστού υποστηρίζουν πολλές μη τυπικές ετικέτες. Αυτές οι ετικέτες εισήχθησαν από τους προγραμματιστές ενός συγκεκριμένου προγράμματος περιήγησης Ιστού για να αποκτήσουν πλεονέκτημα έναντι των ανταγωνιστών. Ήλπιζαν ότι αυτές οι ιδιόκτητες επεκτάσεις θα γίνονταν αργότερα μέρος του προτύπου HTML, αλλά αυτές οι ελπίδες δεν πραγματοποιήθηκαν ποτέ. Ωστόσο, οι ετικέτες παραμένουν και εξακολουθούν να υποστηρίζονται.

Για να δημιουργήσετε ιστοσελίδες θα χρειαστείτε οποιοδήποτε πρόγραμμα περιήγησης - Internet Explorer ή Google Chrome Mozilla Firefox, ή καλύτερα και τα δύο, αφού πολλά στοιχεία HTMLεμφανίζονται διαφορετικά σε διαφορετικά προγράμματα προβολής και είναι πολύ επιθυμητό να ελέγχεται αυτή η διαφορά.

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

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

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

Υπάρχουν αρκετοί απλοί κανόνες που επιτρέπουν τη διεπαφή του ιστότοπου να είναι κατανοητή από τον επισκέπτη [Αρ. 10].

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

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

3. Ένας επισκέπτης του ιστότοπου θα πρέπει να βρίσκει εύκολα τις πληροφορίες που τον ενδιαφέρουν και να μπορεί να λάβει ολοκληρωμένες πληροφορίες (περιγραφή σε κείμενο συν πολλές φωτογραφίες).

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

5. Ο ιστότοπος πρέπει να διαθέτει ενότητες πληροφοριών:

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

Βασικά στοιχεία των ιστοσελίδων:

1. Κεφαλίδα / Λογότυπο (Κεφαλίδα)

3. Περιεχόμενο/Περιεχόμενα (Πεδίο κειμένου)

4. Στοιχεία πλοήγησης

5. Πληροφορίες για τους προγραμματιστές του ιστότοπου

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

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

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

Εικόνα 1. Παράδειγμα περιεχομένου ιστότοπου

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

Εικόνα 2. Στοιχεία επικοινωνίας

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

Ως αποτέλεσμα, η ακολουθία ενεργειών για την ανάπτυξη μιας τοποθεσίας Web καταλήγει στον ακόλουθο απλό αλγόριθμο:

1. Ορισμός στόχων και καθορισμός κύριων εργασιών.

2. Δημιουργία λίστας μελλοντικών θεματικών ενοτήτων.

3. Ανάπτυξη της λογικής και φυσικής δομής του πόρου.

4. Προετοιμασία σχεδίου σκίτσου, διάταξη τοποθεσίας, αόρατος πίνακας διάταξης.

5. Προετοιμασία υλικού κειμένου.

6. Προετοιμασία γραφικών υλικών σε διανυσματική μορφή.

7. Εξαγωγή διανυσματικών σχεδίων σε μορφή ράστερ.

8. Βελτιστοποίηση όλων των εικόνων.

9. Δημιουργία προτύπων ιστοσελίδων.

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

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

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

Το πρώτο στοιχείο μιας ιστοσελίδας που πρέπει να δούμε είναι ο τίτλος της. Μπορεί να γίνει είτε σε μορφή κειμένου είτε σε γραφική μορφή, αλλά και στις δύο περιπτώσεις θα πρέπει να βρίσκεται στο επάνω μέρος του εγγράφου. Μερικές φορές η κεφαλίδα συνδυάζεται με ένα μενού για την επιλογή της κυριλλικής κωδικοποίησης και κουμπιά για εναλλαγή από τη ρωσική στην αγγλική έκδοση του ιστότοπου, εάν αυτός ο πόρος Ιστού παρουσιάζεται σε δύο γλώσσες. Ακριβώς κάτω από τον υπότιτλο του εγγράφου, κατά κανόνα, βρίσκεται ο χώρος που διατίθεται για την τοποθέτηση διαφημιστικού banner. Η συμπερίληψη ενός banner στην κορυφή της ιστοσελίδας στις περισσότερες περιπτώσεις αποτελεί προϋπόθεση για την εγγραφή ενός ιστότοπου σε υπηρεσίες ανταλλαγής banner - συστήματα που διαφημίζουν τον πόρο που δημιουργήσατε με αντάλλαγμα την εμφάνιση διαφημίσεων άλλων συμμετεχόντων στο δίκτυο ανταλλαγής banner στις σελίδες του τον ιστότοπό σας. Το τυπικό μέγεθος των banner που δημοσιεύονται κάτω από τον τίτλο του εγγράφου είναι συνήθως 468x60 pixel. Εάν χρησιμοποιείτε μια στατική διάταξη σελίδας, το πλάτος της κεφαλίδας του εγγράφου σας θα είναι περίπου 640 pixel, κυρίως για να διασφαλιστεί ότι το έγγραφό σας εμφανίζεται σωστά σε οθόνες 640x480 pixel και για να αποφευχθεί η ύπαρξη οριζόντιας γραμμής κύλισης που καθιστά δύσκολη την προβολή. Προφανώς, το πλάτος του banner σε αυτή την περίπτωση θα είναι σημαντικά μικρότερο από το πλάτος της κεφαλίδας, λόγω του οποίου στο τμήμα της σελίδας όπου σκοπεύετε να διαθέσετε χώρο για διαφήμιση, θα εμφανιστεί ακατάληπτος χώρος, ο οποίος μπορεί να γεμίσει με λογότυπο της εταιρείας που κατέχει αυτόν τον ιστότοπο ή έναν σύνδεσμο προς τον διακομιστή που υλοποιεί τη φιλοξενία ιστού. Φυσικά, ένα λογότυπο δεν είναι πάντα απαραίτητο: κατά κανόνα, περιλαμβάνεται σε μια ιστοσελίδα μόνο εάν ο ιστότοπος έχει εμπορική εστίαση.

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

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

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

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

Ρύζι. 3.6. Ένα παράδειγμα διάταξης ιστοσελίδας με αριστερή τοποθέτηση στοιχείων πλοήγησης

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

Ρύζι. 3.7. Ένα παράδειγμα διάταξης ιστοσελίδας με τοποθέτηση στοιχείων πλοήγησης στα δεξιά

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

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

Ρύζι. 3.8. Παράδειγμα διάταξης ιστοσελίδας με κορυφαία τοποθέτηση στοιχείων πλοήγησης

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

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

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