Κουμπί με ένα κλικ σε html. Πότε να χρησιμοποιήσετε το στοιχείο Κουμπί

Απενεργοποίηση κουμπιού

απενεργοποιημένο χαρακτηριστικό ( Ετικέτα HTML ) είναι ένα boolean χαρακτηριστικό και προσδιορίζει ότι το κουμπί πρέπει να είναι απενεργοποιημένο (δεν είναι διαθέσιμο για αλληλεπίδραση με τον χρήστη). Το χαρακτηριστικό χρησιμοποιείται σε συνδυασμό με σενάρια, για παράδειγμα, μέχρι να ικανοποιηθεί κάποια συνθήκη το στοιχείο είναι ανενεργό.

Το στοιχείο είναι ενεργό Το στοιχείο απενεργοποιήθηκε

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

Αυτόματη εστίαση στο κουμπί

Στην HTML 5, προστέθηκε ένα λογικό χαρακτηριστικό όπως (HTML tag

) καθορίζει ότι το κουμπί θα πρέπει να λαμβάνει αυτόματα εστίαση κατά τη φόρτωση της σελίδας.

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

Ας δούμε ένα παράδειγμα χρήσης:

Κουμπί Κάντε κλικ!!!

Σε αυτό το παράδειγμα, δημιουργήσαμε δύο κουμπιά (ετικέτα HTML

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

Κουμπί HTML στο μενού ιστότοπου σε στυλ σχεδίασης

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

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

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

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

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

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

Κουμπί χρησιμοποιώντας μια εικόνα

Απλός κουμπί htmlέχει και δημιουργείται με την εισαγωγή μιας ετικέτας "a" (σύνδεσμος) στην (εικόνα).

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

Προκειμένου το κουμπί να έχει μια μη τυπική εμφάνιση και να μπορεί να αλλάξει ανάλογα με την κατάσταση, θα πρέπει να αλλάξετε την αρχική του εμφάνιση και να προσθέσετε CSS.

Κουμπιά για έναν ιστότοπο που χρησιμοποιεί CSS

Η CSS είναι μια άλλη γλώσσα προγραμματισμού που είναι υπεύθυνη μόνο για στυλ και ονομάζεται Cascading Style Sheet.

Ο κώδικας του κουμπιού για τον ιστότοπο html θα μοιάζει με αυτό:

• <"a" h"r"e"f="Тут следует указать адрес страницы в интернете" class="">

Προσοχή! Όταν χρησιμοποιείτε τα παραδείγματα, αφαιρέστε το εικονίδιο " για να δημιουργήσετε ένα και href.

• .topbutton ( /*button class*/
• πλάτος: 111 px; /*- πλάτος κουμπιού 111 pixels*/
• περίγραμμα: 1px στερεό #000; /*- πλαίσιο για το κουμπί, 1 pixel, συμπαγές και μαύρο*/
• φόντο:#κόκκινο; /*- γέμισμα κουμπιού - κόκκινο*/
• text-align:left; /*- στοίχιση κειμένου στο κουμπί προς τα αριστερά*/
• padding:10px; /*- εσοχές από εξωτερικά στοιχεία στη σελίδα*/
• color:#fff; /*- χρώμα κειμένου, σε αυτήν την περίπτωση λευκό*/
• γραμματοσειρά-οικογένεια:verdana; /*- γραμματοσειρά κειμένου (μπορεί να ανοίξει και να επιλεγεί στο Word)*/
• μέγεθος γραμματοσειράς: 8 px; /*- μέγεθος κειμένου στο κουμπί*/
• περίγραμμα-ακτίνα: 3px; /*- στρογγυλεμένες γωνίες κουμπιού*/

Σημείωση. /*comment*/ - με αυτόν τον τρόπο μπορείτε να αφήσετε σχόλια στον κώδικα CSS.

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

Πιο περίπλοκο κουμπί για τον ιστότοπο

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

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

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

Ο κώδικας του κουμπιού html σε αυτήν την περίπτωση μοιάζει με:

• <"input" type=”botton” name=”имя кнопки для php” value=”текст, который отображается на кнопке”>

Προσοχή! Όταν χρησιμοποιείτε παραδείγματα, αφαιρέστε το " για να κάνετε είσοδο.

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

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

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

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

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

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

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

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

Ας εξετάσουμε πρώτα την προσθήκη ενός κουμπιού μέσω και η σύνταξή του.

Τα χαρακτηριστικά του κουμπιού παρατίθενται στον πίνακα. 1.

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

Παράδειγμα 1: Προσθήκη κουμπιού

HTML5 IE Cr Op Sa Fx

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

Ρύζι. 1. Προβολή κουμπιού

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

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

Ρύζι. 2. Κουμπιά που δημιουργούνται με χρήση

Η σύνταξη για τη δημιουργία ενός τέτοιου κουμπιού είναι η εξής.

Ετικέτα στο κουμπί

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

Παράδειγμα 2. Σχέδιο σε κουμπί

HTML5 IE Cr Op Sa Fx

Κουμπί με κείμενο Κουμπί με μια εικόνα

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

Κουμπί υποβολής

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

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

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

.

Ετικέτα στο κουμπί

Τα χαρακτηριστικά είναι τα ίδια με τα συνηθισμένα κουμπιά (παράδειγμα 3).

Παράδειγμα 3: Αποστολή δεδομένων στον διακομιστή

HTML5 IE Cr Op Sa Fx

Το χαρακτηριστικό name για αυτόν τον τύπο κουμπιού μπορεί να παραλειφθεί. Εάν δεν καθορίσετε μια τιμή , το πρόγραμμα περιήγησης θα προσθέσει αυτόματα κείμενο, το οποίο ποικίλλει ανάλογα με το πρόγραμμα περιήγησης. Έτσι, ο Firefox γράφει "Υποβολή αιτήματος", IE - "Υποβολή αιτήματος", Opera και Chrome - "Υποβολή". Το ίδιο το κείμενο της επιγραφής δεν επηρεάζει τη λειτουργικότητα του κουμπιού με κανέναν τρόπο.

Κουμπί επαναφοράς

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

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

Ετικέτα στο κουμπί

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

Παράδειγμα 4. Κουμπί για εκκαθάριση της φόρμας

HTML5 IE Cr Op Sa Fx

Η τιμή του κουμπιού Επαναφορά δεν αποστέλλεται ποτέ στον διακομιστή. Εάν παραλείψετε την ετικέτα στο κουμπί, με άλλα λόγια, δεν ορίσετε το χαρακτηριστικό τιμής, το προεπιλεγμένο κείμενο "Clear" θα προστεθεί στο κουμπί.

Έννοια και Εφαρμογή

Ετικέτα HTML χρησιμοποιείται για την τοποθέτηση ενός κουμπιού. Μέσα σε μια ετικέτα μπορείτε να δημοσιεύσετε και μορφοποιημένο κείμενο και μια εικόνα. Αυτή είναι η κύρια διαφορά μεταξύ αυτού του στοιχείου και των κουμπιών που δημιουργούνται χρησιμοποιώντας την ετικέτα (με τον τύπο χαρακτηριστικού = "κουμπί" ).

Να προσδιορίζετε πάντα για ετικέτα

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

Υποστήριξη προγράμματος περιήγησης

Ετικέτα			ΛΥΡΙΚΗ ΣΚΗΝΗ		IExplorer	Ακρη
	Ναί	Ναί	Ναί	Ναί	Ναί	Ναί

Γνωρίσματα

Χαρακτηριστικό	Εννοια	Περιγραφή
	αυτόματη εστίαση	Ένα χαρακτηριστικό Boolean που καθορίζει ότι το κουμπί πρέπει να λαμβάνει αυτόματα εστίαση κατά τη φόρτωση της σελίδας.
άτομα με ειδικές ανάγκες	άτομα με ειδικές ανάγκες	Είναι ένα χαρακτηριστικό Boolean και προσδιορίζει ότι το κουμπί πρέπει να είναι απενεργοποιημένο (μη διαθέσιμο για αλληλεπίδραση με τον χρήστη).
	form_id	Καθορίζει τη μορφή (στοιχείο ) στο οποίο ανήκει το κουμπί. Η τιμή πρέπει να είναι το αναγνωριστικό φόρμας () στο ίδιο έγγραφο.
	URL	Καθορίζει τη διεύθυνση URL του αρχείου που θα επεξεργάζεται (ελέγχει) πληροφορίες εισόδου μετά την υποβολή της φόρμας (μόνο για type = "υποβολή" >).
	application/x-www-form-urlencoded πολυμερών/μορφών-δεδομένων κείμενο/απλό	Καθορίζει τον τρόπο με τον οποίο θα πρέπει να κωδικοποιούνται τα δεδομένα φόρμας όταν αποστέλλονται στον διακομιστή (για type = "υποβολή" >).
	παίρνω Θέση	Καθορίζει ποια μέθοδο HTTP θα χρησιμοποιηθεί κατά την υποβολή δεδομένων φόρμας (μόνο για type = "υποβολή" >).
	formnovalidate	Υποδεικνύει ότι τα δεδομένα που εισάγονται στη φόρμα από τον χρήστη δεν ελέγχονται για ορθότητα (μόνο για type = "υποβολή" >).
	_κενό _εαυτός _μητρική εταιρεία _μπλουζα όνομα πλαισίου	Λέει στο πρόγραμμα περιήγησης πού να εμφανίσει την απάντηση που ελήφθη μετά την υποβολή μιας φόρμας (καρτέλα, τρέχον παράθυρο ή πλαίσιο). Η προεπιλεγμένη τιμή είναι _self - εμφανίζει την απόκριση στο τρέχον παράθυρο. Χρησιμοποιείται μόνο για type = "υποβολή" >.
όνομα	όνομα	Ορίζει το όνομα για το κουμπί, το οποίο μεταβιβάζεται κατά την υποβολή της φόρμας.
τύπος	κουμπί επαναφορά υποβάλλουν	Υποδεικνύει τον τύπο του κουμπιού. Προεπιλεγμένη τιμή υποβάλλουν.
αξία	κείμενο	Καθορίζει την αρχική τιμή για το κουμπί.

Παράδειγμα χρήσης

Κουμπί 1



Κουμπί 3

Σε αυτό το παράδειγμα τοποθετήσαμε 3 κουμπιά, στα οποία δόθηκαν μοναδικά ονόματα με το χαρακτηριστικό name και, χρησιμοποιώντας εσωτερικά στυλ CSS, καθόρισαν το πλάτος ( πλάτος) μέγεθος 80 pixel και ύψος ( ύψος) μέγεθος 50 pixel:

• Κείμενο μέσα πρώτο κουμπίτο μορφοποιήσαμε με έντονη γραφή (ετικ ). Σημειώστε ότι το κείμενο που τοποθετήσαμε μέσα στην ετικέτα εμφανίζεται στο ίδιο το κουμπί.
• Μέσα δεύτερο κουμπίστοιχείο δημοσιεύσαμε *.pngεικόνα (με διάφανο φόντο). Με το χαρακτηριστικό alt ορίζουμε εναλλακτικό κείμενο για την εικόνα, σε περίπτωση που δεν φορτωθεί για κάποιο λόγο (απαιτείται χαρακτηριστικό), ορίζουμε τη σχετική διαδρομή προς την εικόνα με το χαρακτηριστικό src (απαιτούμενο χαρακτηριστικό), πλάτος (πλάτος) και ύψος ( ύψος) ορίστε τις διαστάσεις της εικόνας σε 40 επί 40 pixel. Λάβετε υπόψη ότι στα χαρακτηριστικά που καθορίζουν το μέγεθος, δεν είναι απαραίτητο να προσδιορίσετε μονάδες μέτρησης, σε αντίθεση με τα στυλ CSS, για το λόγο ότι τα χαρακτηριστικά μπορούν να καθορίσουν τιμές μόνο σε pixel.
• Κείμενο μέσα τρίτο κουμπίμορφοποιήσαμε το πλάγιο στυλ (ετικ ).

Το αποτέλεσμα του παραδείγματός μας: