Τι είναι μια ιστοσελίδα; Είναι ένα έγγραφο γραμμένο σε Hypertext Markup Language (HTML) που μπορεί να προβληθεί χρησιμοποιώντας ένα πρόγραμμα περιήγησης. Η πρόσβαση στην ιστοσελίδα γίνεται εισάγοντας τη διεύθυνση URL.

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

Πώς να ανοίξετε μια ιστοσελίδα

Για να δείτε μια ιστοσελίδα, απαιτείται πρόγραμμα περιήγησης (για παράδειγμα, Internet Explorer, Edge, Safari, Firefox ή Chrome). Στο πρόγραμμα περιήγησής σας, μπορείτε να ανοίξετε μια ιστοσελίδα πληκτρολογώντας γραμμή διεύθυνσης URL. Για παράδειγμα, πληκτρολογώντας "https://www.computerhope.com/esd.htm" θα εμφανιστεί η σελίδα ESD Computer Hope.

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

Πότε δημιουργήθηκε η πρώτη ιστοσελίδα;

Η πρώτη ιστοσελίδα δημιουργήθηκε στο CERN από τον Tim Berners-Lee στις 6 Αυγούστου 1991. Πριν από αυτό, μπορείτε να επισκεφτείτε και να προβάλετε τον πρώτο ιστότοπο και την πρώτη ιστοσελίδα στη διεύθυνση http://info.cern.ch/.

Ποια είναι η διαφορά μεταξύ ενός ιστότοπου και μιας ιστοσελίδας;

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

Στο παραπάνω παράδειγμα URL, το "url.htm" είναι η ιστοσελίδα, είναι πάντα το τελευταίο μέρος της διεύθυνσης URL. Για διευθύνσεις URL που δεν τελειώνουν σε .htm, .html, .php, .cgi, .pl ή άλλη επέκταση αρχείου, ο διακομιστής φορτώνει την ιστοσελίδα index.htm από προεπιλογή. Για παράδειγμα, δεν υπάρχει ιστοσελίδα για τη διεύθυνση URL της σελίδας επαφής. Σε αυτήν την περίπτωση, το προεπιλεγμένο αρχείο ευρετηρίου φορτώνεται από τον κατάλογο /contact.

Παραδείγματα ιστοσελίδων

Έχουμε ήδη αναφέρει ότι τα προγράμματα περιήγησης χρησιμοποιούνται για την προβολή ιστοσελίδων. Μια ιστοσελίδα αποτελείται από πολλά στοιχεία, όπως CSS, εικόνες και JavaScript. Το σώμα της ιστοσελίδας δημιουργείται με χρησιμοποιώντας HTML. Αυτός ο κώδικας μπορεί να δημιουργηθεί χρησιμοποιώντας ένα πρόγραμμα επεξεργασίας HTML, γραμμένο από άνθρωπο ή να δημιουργηθεί χρησιμοποιώντας σενάρια από την πλευρά του διακομιστή. Συνήθως, μια ιστοσελίδα που δημιουργείται από άνθρωπο τελειώνει με επέκταση .htm ή .html. Για παράδειγμα, αυτή η σελίδα έχει όνομα αρχείου "webpage.htm". Οι σελίδες που δημιουργούνται από το σενάριο μπορεί να τελειώνουν σε .cgi, .php, .pl, κ.λπ.

Ποια στοιχεία περιέχει μια ιστοσελίδα;

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

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

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

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

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

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

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

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

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

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

Είναι καλή ιδέα να παρέχετε στους επισκέπτες έναν σύνδεσμο ή ένα κουμπί που ανακατευθύνει στη φόρμα. ανατροφοδότησηώστε να μπορούν να σας πουν αν τους ήταν χρήσιμο αυτή την ιστοσελίδαή όχι;

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

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

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

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

Τι μπορούν να κάνουν οι χρήστες σε μια ιστοσελίδα;

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

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

Τι είναι το HTML και το CSS;

Η HTML (HyperText Markup Language) ορίζει τη δομή του περιεχομένου και τη σημασία του, ορίζοντας περιεχόμενο όπως επικεφαλίδες, παραγράφους ή εικόνες. CSS (Cascading Style Sheets) ή cascading style sheets είναι μια γλώσσα παρουσίασης που δημιουργήθηκε για σχεδιασμό εμφάνισηπεριεχόμενο χρησιμοποιώντας, για παράδειγμα, γραμματοσειρές ή χρώματα.

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

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

Βασικοί όροι HTML

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

Στοιχεία

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

) Μπορείτε να συμπεριλάβετε στοιχεία στη λίστα . . . και πολλοί άλλοι.

Τα στοιχεία αναγνωρίζονται από αγκύλες που περιβάλλουν το όνομα του στοιχείου. Έτσι το στοιχείο θα μοιάζει με αυτό:

Ετικέτες

Προσθήκη γωνιακών βραχιόνων< и >δημιουργεί αυτό που είναι γνωστό ως ετικέτα γύρω από το στοιχείο. Οι ετικέτες εμφανίζονται συχνότερα σε ζεύγη ετικετών ανοίγματος και κλεισίματος.

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

Η ετικέτα κλεισίματος σηματοδοτεί το τέλος του στοιχείου. Αποτελείται από ένα σύμβολο< с последующей косой чертой и именем элемента и завершается символом >; Για παράδειγμα, .

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

Έτσι, οι ετικέτες συνδέσμων θα μοιάζουν κάπως έτσι:

...

Γνωρίσματα

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

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

Shay Howe

Επίδειξη βασικών όρων HTML

Αυτός ο κώδικας θα εμφανίσει το κείμενο "Shay Howe" σε μια ιστοσελίδα και όταν κάνετε κλικ σε αυτό το κείμενο θα μεταφέρει τον χρήστη στο http://shayhowe.com. Το στοιχείο σύνδεσης δηλώνεται χρησιμοποιώντας μια ετικέτα ανοίγματος και ετικέτα κλεισίματοςκαλύπτοντας το κείμενο, καθώς και το χαρακτηριστικό και την τιμή της διεύθυνσης συνδέσμου που δηλώνεται μέσω του href="http://shayhowe.com" στην ετικέτα ανοίγματος.

Ρύζι. 1.01. Η σύνταξη HTML σε μορφή περιγράμματος περιλαμβάνει στοιχείο, χαρακτηριστικό και ετικέτα

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

Προσαρμογή της δομής εγγράφου HTML

Τα έγγραφα HTML είναι απλά έγγραφα κειμένου που αποθηκεύονται με την επέκταση .html αντί για .txt. Για να ξεκινήσετε να γράφετε HTML, χρειάζεστε πρώτα ένα πρόγραμμα επεξεργασίας κειμένου που να χρησιμοποιείτε άνετα. Δυστυχώς, αυτό δεν περιλαμβάνει Microsoft Wordή Σελίδες, καθώς πρόκειται για σύνθετους επεξεργαστές. Οι δύο πιο δημοφιλείς επεξεργαστές κειμένου για τη σύνταξη HTML και CSS είναι το Dreamweaver και Υψηλό Κείμενο. Οι δωρεάν εναλλακτικές περιλαμβάνουν επίσης το Notepad++ για Windows και το TextWrangler για Mac.

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

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

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

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

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

Αυτή είναι μια ιστοσελίδα.

Επίδειξη δομής εγγράφων HTML

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

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

Στοιχεία αυτοκλεισίματος

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

• 
  

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

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

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

Στην πράξη

Ως σχεδιαστές ιστοσελίδων και προγραμματιστές front-end, έχουμε την πολυτέλεια να παρακολουθήσουμε μια σειρά από σπουδαία συνέδρια αφιερωμένα στην τέχνη μας. Θα οργανώσουμε το δικό μας Συνέδριο Styles και θα δημιουργήσουμε έναν ιστότοπο για αυτό κατά τη διάρκεια των επόμενων μαθημάτων. Σαν αυτό!

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

Βασικοί όροι CSS

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

Επιλογείς

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

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

Στο CSS, οι επιλογείς συνδυάζονται με σγουρά άγκιστρα (), τα οποία περικλείουν τα στυλ που εφαρμόζονται στο επιλεγμένο στοιχείο. Αυτός ο επιλογέας στοχεύει όλα τα στοιχεία

Π(...)

Ιδιότητες

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

P (χρώμα: ...; μέγεθος γραμματοσειράς: ...; )

Αξίες

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

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

P (χρώμα: πορτοκαλί, μέγεθος γραμματοσειράς: 16 εικονοστοιχεία; )

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

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

Ρύζι. 1.03. Η δομή σύνταξης CSS περιλαμβάνει επιλογέα, ιδιότητες και τιμές

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

Εργασία με επιλογείς

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

Επιλογείς τύπου

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

Div (...)

... ...

Τάξεις

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

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

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

Φοβερός(...)

...

Αναγνωριστικά

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

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

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

#shayhowe (...)

...

Πρόσθετοι επιλογείς

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

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

Σύνδεση CSS

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

Άλλες επιλογές για την προσθήκη CSS

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

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

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

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

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

Εάν το αρχείο CSS βρίσκεται σε έναν υποφάκελο, τότε η τιμή του χαρακτηριστικού href πρέπει να αντιστοιχεί αντίστοιχα σε αυτήν τη διαδρομή. Για παράδειγμα, εάν το αρχείο main.css είχε αποθηκευτεί σε έναν υποφάκελο με το όνομα stylesheets, τότε η τιμή του χαρακτηριστικού href θα ήταν stylesheets/main.css. Αυτό χρησιμοποιεί μια κάθετο προς τα εμπρός (ή κάθετο) για να υποδείξει τη μετακίνηση σε έναν υποφάκελο.

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

Χρήση επαναφοράς CSS

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

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

Υπάρχει ένα σωρό διαφορετικές επαναφορές CSS διαθέσιμες για εφαρμογή, όλες έχουν τις δικές τους δυνάμεις. Ένα από τα πιο δημοφιλή από τον Eric Meyer, η επαναφορά του CSS έχει προσαρμοστεί ώστε να περιλαμβάνει νέα στοιχεία HTML5.

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

Συμβατότητα και δοκιμή μεταξύ προγραμμάτων περιήγησης

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

Υπάρχουν πολλά πράγματα που πρέπει να προσέξετε όταν γράφετε CSS. Τα καλά νέα είναι ότι μπορείτε να τα κάνετε όλα και χρειάζεται λίγη υπομονή για να τα καταφέρετε.

Στην πράξη

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

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

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

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

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

/* http://meyerweb.com/eric/tools/css/reset/ 2. v2.0 | 20110126 Άδεια χρήσης: καμία (δημόσιος τομέας) */ html, body, div, span, applet, αντικείμενο, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, ακρωνύμιο, διεύθυνση, μεγάλο, παραπομπή, κωδικός, del, dfn, em, img, ins, kbd, q, s, samp, μικρό, χτυπητό, ισχυρό, sub, sup, tt, var, b, u, i, κέντρο, dl, dt, dd, ol, ul, li, σύνολο πεδίων, φόρμα, ετικέτα, υπόμνημα, πίνακας, λεζάντα, tbody, tfoot, thead, tr, th, td, άρθρο, κατά μέρος, καμβάς, λεπτομέρειες, ενσωμάτωση, εικόνα, figcaption, υποσέλιδο, κεφαλίδα, hgroup, μενού, πλοήγηση, έξοδος, ρουμπίνι, ενότητα, σύνοψη, ώρα, σήμα, ήχος, βίντεο ( περιθώριο: 0, συμπλήρωση: 0, περίγραμμα: 0, μέγεθος γραμματοσειράς: 100%, γραμματοσειρά: κληρονομιά, κατακόρυφη στοίχιση: γραμμή βάσης . ol, ul (list-style: κανένα; ) blockquote, q ( εισαγωγικά: κανένα; ) blockquote:before, blockquote:after, q:before, q:after ( περιεχόμενο: ""; περιεχόμενο: κανένα; ) πίνακας ( border- κατάρρευση: κατάρρευση; διάστιχο: 0; )

Το αρχείο main.css αρχίζει να διαμορφώνεται, οπότε ας το συνδέσουμε με το αρχείο index.html. Ανοίξτε το index.html σε επεξεργαστής κειμένουκαι προσθέστε το στοιχείο στο , αμέσως μετά το στοιχείο.

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

Θα συμπεριλάβουμε επίσης έναν σύνδεσμο προς το αρχείο main.css χρησιμοποιώντας το χαρακτηριστικό href. Θυμηθείτε ότι το αρχείο main.css αποθηκεύεται στο φάκελο stylesheets, ο οποίος βρίσκεται μέσα στο φάκελο assets. Επομένως, η τιμή του χαρακτηριστικού href, που είναι η διαδρομή προς το αρχείο main.css, θα πρέπει να είναι assets/stylesheets/main.css.

Συνέδριο Styles

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

Ρύζι. 1.04. Ο ιστότοπος του συνεδρίου Styles με επαναφορά CSS

Επίδειξη και πηγαίος κώδικας

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

Περίληψη

Όλα καλά λοιπόν! Κάναμε μερικά μεγάλα βήματα σε αυτό το σεμινάριο.

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

Ανακεφαλαιώνοντας, καλύψαμε τα εξής:

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

Τώρα ας ρίξουμε μια πιο προσεκτική ματιά στο HTML και ας εξοικειωθούμε λίγο με τη σημασιολογία.

Πόροι και σύνδεσμοι

• Κοινοί όροι HTML μέσω Scripting Master
• Όροι & Ορισμοί CSS μέσω εντυπωσιακών ιστών
• Εργαλεία CSS: Επαναφέρετε το CSS μέσω του Eric Meyer

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

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

Θεωρητικές πληροφορίες

ΒΑΣΙΚΕΣ ΕΝΝΟΙΕΣ

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

Έγγραφο HTML.

Έγγραφο Ιστού.

Ιστοσελίδα.

Τέτοιες σελίδες είναι συνήθως σε μορφή NTM ή HTML.

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

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

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

Σενάριο (Γραφή) , ή script, είναι ένα πρόγραμμα που περιλαμβάνεται σε μια ιστοσελίδα για να επεκτείνει τις δυνατότητές της. Σε ορισμένες περιπτώσεις, το πρόγραμμα περιήγησης Internet Explorer εμφανίζει το μήνυμα: "Να επιτρέπεται η εκτέλεση σεναρίου στη σελίδα;" Σε αυτή την περίπτωση εννοούμε σενάρια.

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

Πρόγραμμα περιήγησης (Πρόγραμμα περιήγησης) - ένα πρόγραμμα για την προβολή ιστοσελίδων.

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

Το περιεχόμενο του στοιχείου, τα δεδομένα που μορφοποιεί το στοιχείο

Ετικέτα(στα αγγλικά tag - label, descriptor, label) - ο δείκτης έναρξης ή λήξης ενός στοιχείου. Οι ετικέτες ορίζουν τα όρια της δράσης των στοιχείων και διαχωρίζουν τα στοιχεία μεταξύ τους. Στο κείμενο μιας ιστοσελίδας, οι ετικέτες περικλείονται σε γωνιακές αγκύλες< >, και η ετικέτα τέλους ακολουθείται πάντα από κάθετο. Κείμενο όχι ανάμεσα σε αυτές τις αγκύλες (< >), είναι πλήρως ορατή όταν προβάλλεται σε πρόγραμμα περιήγησης. Για παράδειγμα:

Το περιεχόμενο του στοιχείου, τα δεδομένα που

μορφοποιεί ένα στοιχείο

Αυτό το κείμενο θα βρίσκεται σε ξεχωριστή παράγραφο

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

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

Αυτό το κείμενο θα ευθυγραμμιστεί στο κέντρο της οθόνης

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

Σημείωση:

Οποιος χρήσιμες πληροφορίεςπρέπει να βρίσκεται μεταξύ των ετικετών έναρξης και τέλους που υποδεικνύουν τη μορφή του.

Όλα τα χαρακτηριστικά βρίσκονται στην ετικέτα έναρξης.

Για ευκολία στη χρήση, μπορείτε να γράψετε την ετικέτα έναρξης με ένα κεφαλαίο (κεφαλαίο) γράμμα (P) και την ετικέτα τέλους με ένα πεζό (μικρό) γράμμα (/p), αν και αυτό δεν είναι απαραίτητο.

Δεν απαιτούν όλα τα στοιχεία μια ετικέτα τέλους (κλείσιμο).

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

Όταν κάνετε λήψη οποιουδήποτε εγγράφου από το WWW, το κείμενό του στο παράθυρο του προγράμματος περιήγησής σας εμφανίζεται σε μια τέλεια μορφοποιημένη, εύκολη στην προβολή μορφή. Αυτό σημαίνει ότι οι ιστοσελίδες δεν είναι συνηθισμένο κείμενο, αλλά περιέχουν επίσης ορισμένες βοηθητικές πληροφορίες για τον έλεγχο της παρουσίασης του εγγράφου στο παράθυρο του προγράμματος περιήγησής σας. Δεδομένου ότι κατά την ανάπτυξη ενός εγγράφου δεν είναι σαφές σε ποιον τύπο υπολογιστή θα το δει ο χρήστης, οι ιστοσελίδες δεν μπορούν να προετοιμαστούν και να αποθηκευτούν σε μορφή που έχει αναπτυχθεί για μια συγκεκριμένη πλατφόρμα υπολογιστή, για παράδειγμα, σε μορφή Microsoft Word για Windows XP. Προκειμένου ένας χρήστης που εργάζεται σε οποιονδήποτε τύπο υπολογιστή να δει ένα έγγραφο μορφοποιημένο ανάλογα, χρησιμοποιείται η γλώσσα HTML που έχει αναπτυχθεί ειδικά για αυτόν τον σκοπό.

Τι ακριβώς είναι η HTML;

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

Είτε πατήστε CTRL+U

Η εμφάνιση των ιστοσελίδων στο Διαδίκτυο αλλάζει συχνά. Αλλά για εμάς αυτή τη στιγμή αυτό δεν είναι σημαντικό.

HTML - Γλώσσα σήμανσης υπερκειμένου

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

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

Γλώσσα HTML

Η γλώσσα HTML υπάρχει σε διάφορες παραλλαγές ή προδιαγραφές. Όπως και οι εκδόσεις προϊόντων λογισμικού, οι προδιαγραφές αριθμούνται: 2.0, 3.0, 3.2, 4.0. Οποιαδήποτε επόμενη προδιαγραφή αντιπροσωπεύει μια επέκταση και προσθήκη στην προηγούμενη. Θα χρησιμοποιήσουμε τις κατασκευές του τελευταίου Προδιαγραφές HTML 4.0 που υποστηρίζονται πιο πρόσφατες εκδόσειςτα πιο κοινά προγράμματα περιήγησης.

Το έγγραφο στο παράθυρο κώδικα HTML είναι ένα έγγραφο κειμένου σε ειδική μορφή. Όλα τα αρχεία σε αυτή τη μορφή έχουν Επέκταση HTML(.html) ή HTM (.htm). Ένα έγγραφο HTML αναμιγνύει απλό κείμενο με στοιχεία σήμανσης που περικλείονται σε γωνιακές αγκύλες< и >, Για παράδειγμα, , , , . Αυτά τα στοιχεία σήμανσης ονομάζονται ετικέτες. Οι ετικέτες μπορούν να είναι μεμονωμένες, να ανοίγουν και να κλείνουν και να αποτελούνται από επόμενα μέρη με συγκεκριμένη σειρά:

• αριστερό στήριγμα γωνίας.

Έτσι, η ετικέτα ανοίγματος, που εμφανίζεται στην αρχή του εγγράφου HTML και σηματοδοτεί την αρχή του, αποτελείται από το όνομα HTML και δύο αγκύλες< >, και η ετικέτα που βρίσκεται στο τέλος του εγγράφου WEB, εκτός από τα καθορισμένα μέρη, περιέχει επίσης μια κάθετο / σύμβολο, που σημαίνει μια ετικέτα κλεισίματος και υποδεικνύει το τέλος του εγγράφου. Η ετικέτα σημαίνει την αρχή του κώδικα του προγράμματος σεναρίου που είναι ενσωματωμένο στο έγγραφο. Αυτή η ετικέτα περιέχει, εκτός από το όνομα του σεναρίου, ένα χαρακτηριστικό γλώσσας με την τιμή "vbscript", που σημαίνει ότι το σενάριο είναι γραμμένο στη γλώσσα vbscript.

Μόνο λατινικοί χαρακτήρες μπορούν να χρησιμοποιηθούν σε ετικέτες και οποιοιδήποτε χαρακτήρες μπορούν να χρησιμοποιηθούν σε τιμές χαρακτηριστικών. Εάν, για παράδειγμα, χρησιμοποιούνται κυριλλικοί χαρακτήρες ως τιμές χαρακτηριστικών, πρέπει να περικλείονται σε εισαγωγικά, για παράδειγμα, name="Section 1".

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

Ετικέτες ως βάση html

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

Ηλεκτρονικό κατάστημα βιβλίων Three Steps

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

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

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

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

…

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

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

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

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

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

Η HTML δεν καθορίζει συγκεκριμένα και ακριβή χαρακτηριστικά μορφοποίησης εγγράφων όπως το Microsoft Word, για παράδειγμα. Ο συγκεκριμένος τύπος εγγράφου καθορίζεται τελικά μόνο από το πρόγραμμα - πρόγραμμα περιήγησηςστον υπολογιστή σου. Η ανάγκη ακριβώς για μια τέτοια προσέγγιση συνδέεται με την ετερογένεια του υλικού και λογισμικόυπολογιστές που είναι συνδεδεμένοι στο Διαδίκτυο. Η HTML δεν είναι επίσης γλώσσα προγραμματισμού, αλλά οι ιστοσελίδες μπορούν να περιλαμβάνουν ενσωματωμένα προγράμματα - σενάριαεπί Γλώσσες JavascriptΚαι Visual BasicΣενάριο και προγράμματα- μικροεφαρμογέςσε γλώσσα Java.

Από άποψη χρήστης των Windows, Μια ιστοσελίδα είναι απλώς ένα αρχείο *.htm ή *.html που βρίσκεται σε έναν διακομιστή Διαδικτύου, στο τοπικό δίκτυοή στον σκληρό δίσκο του μηχανήματός σας.

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

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