Ιστότοποι, ιστολόγια, ιστοσελίδες - ήδη γνωστές έννοιες στην εποχή μας. Με την ανάπτυξη του Διαδικτύου, οι ιστότοποι για τη φιλοξενία ιστοσελίδων έχουν γίνει απίστευτα δημοφιλείς, και αυτό δεν προκαλεί έκπληξη: για μερικούς ανθρώπους, το να έχουν τη δική τους ιστοσελίδα είναι αναγκαιότητα, για άλλους είναι μια ευχάριστη ψυχαγωγία. Στην πρώτη περίπτωση, συνήθως μιλάμε για εταιρείες, εταιρείες, ιδιώτες επιχειρηματίες, όταν διαφημίζουν οποιοδήποτε προϊόν ή υπηρεσία σε ζήτηση. Το δεύτερο αφορά τους bloggers.
Εκτός αυτού, υπάρχουν χρήστες του Διαδικτύου που απλώς αναζητούν πληροφορίες, διαβάζουν ιστολόγια, παρακολουθούν βίντεο και ούτω καθεξής.
Για να δημιουργήσετε έναν ποιοτικό ιστότοπο, υπάρχουν πολλές επιλογές. Θα επικεντρωθούμε στον προγραμματισμό Ιστού μέσω HTML.
Τι είναι η HTML
Το HTML σημαίνει γλώσσα σήμανσης υπερκειμένου. Μετάφραση από τα αγγλικά, σημαίνει "Γλώσσα σήμανσης υπερκειμένου".
Με άλλα λόγια, η HTML είναι ένα σύνολο κωδικών με τους οποίους μπορείτε να δημιουργήσετε τα κύρια στοιχεία του ιστότοπου, το πλαίσιο του, όπωςπώς οι λέξεις αποτελούνται από προτάσεις.
Οι Οι κώδικες HTML γράφονται αποκλειστικά με λατινικά γράμματα και ονομάζονται ετικέτες και κάθε κώδικας περικλείεται σε αγκύλες. Ορισμένες ετικέτες είναι ζευγαρωμένες, κάποιες είναι μη συζευγμένες.
Paired σημαίνει ότι πρέπει να χρησιμοποιούνται σε ζευγάρια χωρίς αποτυχία. Για παράδειγμα, η ετικέτα ανοίγματος υποδεικνύει πού ξεκινάει σε μια ιστοσελίδα και η ετικέτα κλεισίματος υποδεικνύει πού σταματά. Το τελευταίο διαφέρει από το πρώτο λόγω της παρουσίας ενός χαρακτήρα κάθετου μετά το γωνιακό βραχίονα ανοίγματος. Για παράδειγμα, είναι η ετικέτα ανοίγματος,είναι η ετικέτα κλεισίματος.
Οι μη ζευγαρωμένες ετικέτες δεν χρειάζονται συνεργάτη.
Πολλές ετικέτες μπορεί να έχουν χαρακτηριστικά - πρόσθετα στοιχεία που τους δίνουν κάποιο πιο συγκεκριμένο νόημα. Για παράδειγμα, η ετικέτα.
Πού χρησιμοποιείται HTML
Η κλασική κατανόηση του πού χρειάζεται HTML είναι η δημιουργία ιστοτόπων.
Στην πράξη, αυτό μπορεί να είναι αρκετό, καθώς η HTML σάς επιτρέπει να δημιουργήσετε τα κύρια στοιχεία του ιστότοπου, μενού (συμπεριλαμβανομένων των πολυεπίπεδων), να ορίσετε το φόντο, να εισαγάγετε κείμενο, εικόνες, ήχο, βίντεο, να επεξεργαστείτε γραμματοσειρές και πολλά άλλα.
Ωστόσο, υπάρχουν άλλες γλώσσες που σας επιτρέπουν να προσθέσετε πιο ενδιαφέροντα και συχνά απαραίτητα στοιχεία σε μια ιστοσελίδα:
- CSS ορίζει στυλ για ολόκληρο τον ιστότοπο χωρίς την ανάγκη να συνταγογραφούνται συνεχώς χαρακτηριστικά στυλ μεμονωμένων στοιχείων χρησιμοποιώντας ετικέτες - για παράδειγμα το χρώμα και τη γραμματοσειρά του κειμένου.
- Η γλώσσα σεναρίου σάς επιτρέπει να αναπτύσσετε και να ενσωματώνετε μίνι-προγράμματα (σενάρια) στον ιστότοπο, που κυμαίνονται απόμπανάλ αισθητικά πράγματα (αλλαγή του χρώματος του συνδέσμου όταν τοποθετείτε το δείκτη του ποντικιού πάνω από το ποντίκι) και τελειώνει με λειτουργικά (συλλογή διευθύνσεων email πελατών, αριθμών τηλεφώνου).
- Με την PHP μπορείτε να αναπτύξετε το δικό σας βιβλίο επισκεπτών ή σύστημα σχολίων.
Επίσης η HTML χρησιμοποιείται στη δημιουργία email για διανομή.
Τι είναι ένας σύνδεσμος
Σας επιτρέπουν να πλοηγηθείτε σε άλλη ιστοσελίδα, τόσο εντός όσο και σε εξωτερική.
Οι σύνδεσμοι HTML χρησιμοποιούνται συνήθως:
- Για να μεταβείτε σε έναν εξωτερικό πόρο ιστού.
- Για να μετακινηθείτε στις σελίδες εντός του ιστότοπου.
- Για να μεταβείτε στις φόρμες google.
Συχνά υποδεικνύεται επίσης ένας σύνδεσμος προς την πηγή σε HTML, ειδικά επειδή κατά την αντιγραφή υλικού από άλλο ιστότοπο, πρέπει να προσδιορίσετε τον συγγραφέα. Διαφορετικά, η αντιγραφή χωρίς αναφορά μπορεί να εμπίπτει στους ορισμούς της παραβίασης πνευματικών δικαιωμάτων, της κλοπής περιεχομένου και των αντίστροφων πυρκαγιών. Επιπλέον, η χρήση δανεισμένων, μη μοναδικών υλικών μειώνει την απόδοση SEO και η ένδειξη ενός συνδέσμου προς την πηγή μειώνει τους κινδύνους.
Τύποι συνδέσμων
Με την κλασική έννοια, ένας σύνδεσμος είναι η διεύθυνση ενός πόρου Ιστού στον οποίο μπορείτε να μεταβείτε κάνοντας κλικ σε αυτόν.
Εκτός αυτού, υπάρχουν υπερσύνδεσμοι: κείμενο και εικόνες. Σε αυτές τις περιπτώσεις, ο σύνδεσμος HTML είναι "κρυμμένος" κάτω από κάποια πρόταση (λέξη) ή εικόνα και για να την ακολουθήσετε, πρέπει να κάνετε κλικ στο κείμενο ή την εικόνα.
Άλλοι τύποι συνδέσμων:
- Χωρίς επίσκεψη - ένας σύνδεσμος στον οποίο δεν έχει γίνει ακόμη κλικ κατά τη διάρκεια μιας συγκεκριμένης συνεδρίας. Για παράδειγμα, αν ακολουθήσατε αυτόν τον σύνδεσμο χθες, μετά απενεργοποιήσατε τον υπολογιστή σας και τον ενεργοποιήσατε ξανά σήμερα, τώρα ο σύνδεσμος δεν επισκέφτηκε ξανά, καθώς ξεκίνησε μια νέα περίοδος σύνδεσης.
- Ενεργός - σε αυτήν την κατάσταση, ο σύνδεσμος αποθηκεύεται για πολύ σύντομο χρονικό διάστημα: το διάστημα μεταξύ του κλικ στον σύνδεσμο και της μετάβασής του.
- Visited - ένας σύνδεσμος που έχει ήδη επισκεφτεί τουλάχιστον μία φορά κατά τη διάρκεια μιας περιόδου σύνδεσης.
Για κανονικούς συνδέσμους κειμένου, οι επισκέψιμοι σύνδεσμοι τείνουν να αλλάζουν χρώμα εκτός εάν ορίζεται διαφορετικά.
Μια εικόνα με υπερσύνδεση δεν αλλάζει την εμφάνισή της, είτε την επισκέπτονται είτε όχι.
Πώς να εισαγάγετε έναν κανονικό σύνδεσμο
Πολλοί πόροι Ιστού αντιλαμβάνονται τη διεύθυνση του ιστότοπου ως σύνδεσμο, τον κάνουν αμέσως κλικ και τον τονίζουν με χρώμα. Για παράδειγμα, εάν η διεύθυνση αποσταλεί σε messenger ή μέσω e-mail, κάνοντας κλικ σε αυτήν, μπορείτε να μεταβείτε στον ιστότοπο.
Σε περίπτωση που δημιουργείτε μόνοι σας έναν ιστότοπο χρησιμοποιώντας HTML, πρέπει να εισαγάγετε έναν σύνδεσμο χρησιμοποιώντας μια ειδική ετικέτα. Θα μοιάζει με αυτό: διεύθυνση ιστότοπου. Το κείμενο του συνδέσμου σε HTML πρέπει να καθοριστεί πλήρως, με πρωτόκολλο.
Πώς να εισαγάγετε έναν υπερσύνδεσμο κειμένου
Ειπώθηκε νωρίτερα ότι ένας υπερσύνδεσμος κειμένου εκτελεί την ίδια λειτουργία με έναν κανονικό σύνδεσμο, αλλά φαίνεται πιο όμορφος αισθητικά: αντί για μια διεύθυνση τοποθεσίας, η οποία συχνά είναι άσκοπα μεγάλη, υποδεικνύεται μια λέξη ή φράση. Για παράδειγμα, στην πρόταση "Αναζητήστε πληροφορίες εδώ", μπορείτε να αποκρύψετε τον σύνδεσμοτη λέξη «εδώ». Θα τονιστεί και κάνοντας κλικ σε αυτό θα μεταφερθεί ο χρήστης στον επιθυμητό ιστότοπο.
Το πώς να δημιουργήσετε έναν σύνδεσμο HTML έχει ήδη συζητηθεί νωρίτερα. Μπορείτε να εισαγάγετε έναν υπερσύνδεσμο κειμένου χρησιμοποιώντας την ίδια ετικέτα. Η μόνη διαφορά είναι ότι πρέπει να καθορίσετε μεταξύ των ετικετών το κείμενο κάτω από το οποίο θα κρυφτεί ο σύνδεσμος: ορατό κείμενο.
Πώς να εισαγάγετε έναν υπερσύνδεσμο εικόνας
Είναι λίγο πιο περίπλοκο εδώ. Χρησιμοποιούμε την ίδια ετικέτα, αλλά αντί για κείμενο, πρέπει να καθορίσετε τη διαδρομή προς την εικόνα.
Η διαδρομή είναι η θέση της εικόνας. Εάν η εικόνα (φωτογραφία) βρίσκεται σε μια υπηρεσία κοινής χρήσης αρχείων, τότε πρέπει να καθορίσετε όλους τους φακέλους κατά μήκος της διαδρομής προς την εικόνα μέσω κάθετου. Μπορείτε επίσης να συμπεριλάβετε έναν σύνδεσμο προς μια εικόνα εάν είναι δυνατόν.
Για επισήμανση
εκτός από το src, ισχύουν και άλλα χαρακτηριστικά, τα οποία σας επιτρέπουν να προσαρμόσετε το ύψος, το πλάτος και τη θέση της εικόνας και πολλά άλλα. Μερικά από αυτά:
- Src - καθορίζει τη διαδρομή προς την εικόνα.
- Lowsrc - πανομοιότυπο με το προηγούμενο χαρακτηριστικό, αλλά καθορίζεται για εικόνες χαμηλής ποιότητας.
- Ύψος - ύψος εικόνας.
- Πλάτος - το πλάτος του.
- Alt - περιγραφή εικόνας. Όταν τοποθετείτε το δείκτη του ποντικιού πάνω από μια φωτογραφία ή μια εικόνα, το κείμενο που καθορίζεται σε αυτό το χαρακτηριστικό θα εμφανιστεί.
- Border - καθορίζει το πάχος του περιγράμματος γύρω από την εικόνα.
Τα χαρακτηριστικά καθορίζονται μετά την ετικέτα και περιλαμβάνονται σετη σύνθεσή του. Το χαρακτηριστικό πρέπει να ακολουθείται από την τιμή του. Για παράδειγμα, για τα χαρακτηριστικά "ύψος" ή "πλάτος" (ύψος, πλάτος) καθορίζει το ύψος της εικόνας στην ιστοσελίδα. Η μονάδα μέτρησης είναι τα εικονοστοιχεία, εκτός εάν ορίζεται διαφορετικά.
Θα μοιάζει με αυτό: <a href="διεύθυνση ιστοσελίδας"
. Αυτά τα χαρακτηριστικά θα σας βοηθήσουν να ορίσετε το κατάλληλο μέγεθος για την εικόνα. Το περίγραμμα βοηθά στη δημιουργία ενός αόρατου περιγράμματος γύρω από την εικόνα.
Τα παραπάνω χαρακτηριστικά ισχύουν ξεχωριστά για την ετικέτα εισαγωγής εικόνας. Για παράδειγμα:.
Τι είναι οι σύνδεσμοι αγκύρωσης
Η δημιουργία συνδέσμων αγκύρωσης είναι μια πολύ χρήσιμη δεξιότητα. Συχνά υπάρχει ανάγκη να διαμορφωθεί μια ιστοσελίδα με ένα μεγάλο μπλοκ κειμένου ή με πολλές υποενότητες σε μια σελίδα. Σε αυτήν την περίπτωση, μπορείτε να ξεκινήσετε αμέσως με μια λίστα με συνδέσμους προς υποενότητες του κειμένου ή της ιστοσελίδας και όταν κάνετε κλικ σε αυτές, ο χρήστης θα μεταβεί απευθείας στην ενότητα που ζητήσατε.
Η δημιουργία συνδέσμων αγκύρωσης θα απαιτεί περισσότερη χρήση ετικετών χαρακτηριστικών από άλλους τύπους συνδέσμων.
Πρώτα, πρέπει να ορίσετε τη συνολική τιμή για κάθε μπλοκ πληροφοριών ή υποενότητα κειμένου χρησιμοποιώντας το χαρακτηριστικό top και, στη συνέχεια, να το συσχετίσετε με τον αντίστοιχο σύνδεσμο.
Τα χαρακτηριστικά τους είναι πιο εκτεταμένα, επομένως είναι σκόπιμο να κατακτήσετε πρώτα τη δημιουργία απλούστερων συνδέσμων και μετά να προχωρήσετε στον σχηματισμό συνδέσμων αγκύρωσης.
Συμβουλές
Βοήθεια από έμπειρουςπρογραμματιστές:
- Μπορείτε να το κάνετε έτσι ώστε οι πληροφορίες σχετικά με έναν σύνδεσμο να εμφανίζονται στο δείκτη του ποντικιού σε HTML. Για αυτό, το χαρακτηριστικό alt, το οποίο χρησιμοποιούμε επίσης για γραφικά στοιχεία, μπορεί να είναι χρήσιμο.
- Μπορείτε να δημιουργήσετε μια λίστα με συνδέσμους χρησιμοποιώντας HTML. Ειδικότερα, αυτό μπορεί να είναι χρήσιμο για συνδέσμους αγκύρωσης, καθώς και όταν πρέπει να δημιουργήσετε μια λίστα πόρων ιστού που μπορεί να ακολουθηθεί από έναν σύνδεσμο απευθείας από την τρέχουσα ιστοσελίδα.
- Με τη βοήθεια CSS και JavaScript, καθώς και με ορισμένες λειτουργίες HTML, μπορείτε να δημιουργήσετε διαφορετικό σχεδιασμό συνδέσμων κειμένου και υπερσυνδέσμων από το συνηθισμένο. Για παράδειγμα, όταν τοποθετείτε το δείκτη του ποντικιού πάνω από έναν σύνδεσμο, μπορεί να αλλάξει το χρώμα του και να επιστρέψει στο προηγούμενο όταν ο δρομέας είναι μακριά του. Αυτό μπορεί να γίνει με ένα προσαρμοσμένο σενάριο JavaScript. Επιπλέον, το χρώμα του συνδέσμου μπορεί να οριστεί σε κάτι διαφορετικό από το μπλε για το μη επισκέψιμο ή το μωβ για επίσκεψη. Αυτή είναι η δουλειά του CSS.
- Μην κάνετε κατάχρηση συνδέσμων. Μια ιστοσελίδα με πολλούς ακατάλληλους συνδέσμους φαίνεται ατημέλητη και ατημέλητη.
- Βεβαιωθείτε ότι ο χρήστης κατανοεί ότι ο υπερσύνδεσμος με την εικόνα είναι πραγματικά μια εικόνα και όχι απλώς μια εικόνα.
Συμπέρασμα
Είναι πολύ εύκολο να συνδέσετε μια σελίδα σε HTML. Είναι σημαντικό να ακολουθείτε όλα τα κύρια σημεία αυτής της γλώσσας, καθώς ακόμη και ένα μικρό λάθος μπορεί να οδηγήσει στο γεγονός ότι δεν θα υπάρξει αποτέλεσμα και ο κωδικός δεν θα λειτουργήσει.
