Παραδείγματα του HTML
- Προηγούμενη Σελίδα HTML5 SSE
- Επόμενη Σελίδα Ερωτήσεις του HTML
Παράδειγμα βασικών σημάτων HTML
- Ένα απλό αρχείο HTML
- Αυτό το παράδειγμα είναι ένα πολύ απλό αρχείο HTML που χρησιμοποιεί το ελάχιστο δυνατό αριθμό σημάτων HTML. Εμφανίζει πώς το περιηγητής εμφανίζει το περιεχόμενο του στοιχείου body.
- Απλή παράγραφος
- Αυτό το παράδειγμα δείχνει πώς τα κείμενα των στοιχείων παραγράφου εμφανίζονται από τον περιηγητή.
- Περισσότερες παραγράφους
- Αυτό το παράδειγμα δείχνει ορισμένα προεπιλεγμένα συμπεριφορές των στοιχείων παραγράφου.
- Πρόβλημα ποίησης
- Αυτό το παράδειγμα δείχνει ορισμένα προβλήματα μορφοποίησης του HTML.
- Διάβρωση γραμμάτων
- Αυτή η παράδειγμα δείχνει τη χρήση της διάβρωσης γραμμάτων σε έγγραφα HTML.
- Τίτλος
- Αυτό το παράδειγμα δείχνει πώς να εμφανίζονται τα σήματα τίτλου σε ένα έγγραφο HTML.
- Κεντρικά τοποθετημένος τίτλος
- Αυτό το παράδειγμα δείχνει έναν τίτλο που είναι κεντρικά τοποθετημένος.
- Οριζόντια γραμμή
- Αυτό το παράδειγμα δείχνει πώς να εισάγετε μια οριζόντια γραμμή.
- Κρυφές σημειώσεις
- Αυτό το παράδειγμα δείχνει πώς να εισάγετε κρυφές σημειώσεις στον κώδικα HTML.
- Χρώμα φόντου
- Αυτό το παράδειγμα δείχνει πώς να προσθέσετε χρώμα φόντου σε μια σελίδα HTML.
Παράδειγμα μορφοποίησης κειμένου HTML
- Μορφοποίηση κειμένου
- Αυτό το παράδειγμα δείχνει πώς να μορφοποιήσετε κείμενο σε ένα αρχείο HTML.
- Προεπιλεγμένο κείμενο
- Αυτό το παράδειγμα δείχνει πώς να ελέγξετε τις κενές γραμμές και τους κενάς με το σήμα pre.
- Σήματα "κυβερνητική έξοδος"
- Αυτό το παράδειγμα δείχνει πώς να εμφανίζονται τα σήματα "κυβερνητική έξοδος".
- Διεύθυνση
- Αυτό το παράδειγμα δείχνει πώς να γράψετε διευθύνσεις σε αρχεία HTML.
- Συντομεύσεις και αρκείες
- Αυτό το παράδειγμα δείχνει πώς να επιτύχετε συντομεύσεις ή αρκείες.
- Κατεύθυνση κειμένου
- Αυτό το παράδειγμα δείχνει πώς να αλλάξετε την κατεύθυνση του κειμένου.
- Παράδειγμα αναφοράς
- Αυτό το παράδειγμα δείχνει πώς να επιτύχετε αναφορές διαφορετικής μήκους.
- Εφέ διαγραφής κειμένου και εισαγωγής κειμένου
- Αυτό το παράδειγμα δείχνει πώς να σημειώσετε κείμενο που θα διαγραφεί και κείμενο που θα εισαχθεί.
Παράδειγμα HTML συνδέσμου
- Δημιουργία υπερσυνδέσμου
- Αυτό το παράδειγμα δείχνει πώς να δημιουργήσετε συνδέσμους σε έγγραφα HTML.
- Χρήση εικόνας ως σύνδεσμος
- Αυτό το παράδειγμα δείχνει πώς να χρησιμοποιήσετε εικόνες ως συνδέσμους.
- Ανοίξτε συνδέσμους σε νέο παράθυρο του προγράμματος περιήγησης
- Ανοίξτε μια σελίδα σε νέο παράθυρο του προγράμματος περιήγησης, ώστε οι επισκέπτες να μην εγκαταλείψουν τον ιστότοπό σας.
- Σύνδεση σε διαφορετικές θέσεις της ίδιας σελίδας
- Αυτό το παράδειγμα δείχνει πώς να χρησιμοποιήσετε συνδέσμους για να μεταβείτε σε άλλη περιοχή του εγγράφου.
- Εξοδος από το πλαίσιο
- Αυτό το παράδειγμα δείχνει πώς να βγείτε από το πλαίσιο, αν η σελίδα σας είναι固定 σε πλαίσιο.
- Δημιουργία συνδέσμου email
- Αυτό το παράδειγμα δείχνει πώς να συνδέσετε σε ένα email. (Αυτό το παράδειγμα λειτουργεί μόνο μετά την εγκατάσταση του προγράμματος πελάτη email.)
- Δημιουργία συνδέσμου email 2
- Αυτό το παράδειγμα δείχνει πιο σύνθετους συνδέσμους email.
Παράδειγμα HTML πλαίσιο
- Κάθετο πλαίσιο
- Αυτό το παράδειγμα δείχνει πώς να δημιουργήσετε ένα κάθετο πλαίσιο με τρία διαφορετικά έγγραφα.
- Οριζόντιο πλαίσιο
- Αυτό το παράδειγμα δείχνει πώς να δημιουργήσετε ένα οριζόντιο πλαίσιο με τρία διαφορετικά έγγραφα.
- Πώς να χρησιμοποιήσετε το σήμα <noframes>
- Αυτό το παράδειγμα δείχνει πώς να χρησιμοποιήσετε το σήμα <noframes>.
- Συνδυασμένη δομή πλαίσιο
- Αυτό το παράδειγμα δείχνει πώς να δημιουργήσετε μια δομή πλαίσιο που περιέχει τρία έγγραφα και τα συνδυάζει σε γραμμές και στήλες.
- Δομή πλαίσιο με την ιδιότητα noresize="noresize"
- Αυτό το παράδειγμα δείχνει την ιδιότητα noresize. Σε αυτό το παράδειγμα, το πλαίσιο δεν μπορεί να προσαρμοστεί σε μέγεθος. Στην κορυφή του πλαίσιο μετακινήστε το ποντίκι σας, θα δείτε ότι η κορυφή δεν μπορεί να μετακινηθεί.
- Πλαίσιο導航
- Αυτό το παράδειγμα δείχνει πώς να δημιουργήσετε ένα πλαίσιο導航. Το πλαίσιο導航 περιέχει μια λίστα συνδέσμων που στέκονται σαν στόχος στον δεύτερο πλαίσιο. Ο φάκελος "contents.htm" περιέχει τρεις συνδέσμους.
- Ενσωματωμένο πλαίσιο
- Δημιουργία ενσωματωμένου πλαισίου (πλαίσιο μέσα στην σελίδα HTML)
- Μεταφορά σε ένα συγκεκριμένο κεφάλαιο μέσα στο πλαίσιο
- Μεταφορά σε ένα συγκεκριμένο κεφάλαιο μέσα στο πλαίσιο
- Μεταφορά στο συγκεκριμένο κεφάλαιο χρησιμοποιώντας την πλοήγηση πλαίσια
- Αυτό το παράδειγμα δείχνει δύο πλαίσια. Το αριστερό πλαίσιο περιέχει μια λίστα συνδέσμων, οι οποίοι στέκονται ως στόχος στον δεύτερο πίνακα. Ο δεύτερος πίνακας εμφανίζει το έγγραφο που συνδέεται.
Παράδειγμα πίνακα HTML
- Πίνακας
- Αυτό το παράδειγμα δείχνει πώς να δημιουργήσουμε έναν πίνακα στον πίνακα HTML.
- Σύνορα πίνακα
- Αυτό το παράδειγμα δείχνει διάφορους τύπους συνόρων πίνακα.
- Πίνακας χωρίς σύνορα
- Αυτό το παράδειγμα δείχνει έναν πίνακα χωρίς σύνορα.
- Κελιά του πίνακα (Heading)
- Αυτό το παράδειγμα δείχνει πώς να εμφανίζονται τα κελιά του πίνακα.
- Κενά κελιά
- Αυτό το παράδειγμα δείχνει πώς να χειριστούμε τα κελιά χωρίς περιεχόμενο χρησιμοποιώντας το " ".
- Πίνακας με τίτλο
- Αυτό το παράδειγμα δείχνει έναν πίνακα με τίτλο (caption).
- Κελιά που διατρέχουν γραμμές ή στήλες
- Αυτό το παράδειγμα δείχνει πώς να ορίσουμε κελιά που διατρέχουν γραμμές ή στήλες.
- Ετικέτες μέσα στο πίνακα
- Αυτό το παράδειγμα δείχνει πώς να εμφανίζονται τα στοιχεία μέσα σε διαφορετικά στοιχεία.
- Περιθώριο κελιών (Cell padding)
- Αυτό το παράδειγμα δείχνει πώς να χρησιμοποιήσουμε το Cell padding για να δημιουργήσουμε κενό μεταξύ του περιεχομένου του κελιού και των συνόρων του.
- Διαστητικότητα κελιών (Cell spacing)
- Χρήση του Cell spacing για να αυξήσουμε την απόσταση μεταξύ των κελιών.
- Προσθήκη χρώματος φόντου ή εικόνας φόντου σε πίνακα
- Προσθήκη φόντου σε πίνακα
- Προσθήκη χρώματος φόντου ή εικόνας φόντου σε κελί πίνακα
- Προσθήκη φόντου σε κελί πίνακα
- Περιήγηση στο περιεχόμενο των κελιών του πίνακα
- Αυτό το παράδειγμα δείχνει πώς να χρησιμοποιήσουμε την ιδιότητα "align" για να οργανώσουμε το περιεχόμενο των κελιών, ώστε να δημιουργήσουμε έναν όμορφο πίνακα.
- Ιδιότητα πλαισίου (frame)
- Αυτό το παράδειγμα δείχνει πώς να χρησιμοποιήσουμε την ιδιότητα "frame" για να ελέγξουμε τα σύνορα γύρω από το πίνακα.
Παράδειγμα λίστας HTML
- Μη αριθμημένη λίστα
- Αυτό το παράδειγμα δείχνει μη αριθμημένες λίστας.
- Αριθμημένη λίστα
- Αυτό το παράδειγμα δείχνει αριθμημένες λίστας.
- Διαφορετικοί τύποι μη αριθμημένων λιστών
- Αυτό το παράδειγμα δείχνει μια μη αριθμημένη λίστα.
- Διαφορετικοί τύποι αριθμημένων λιστών
- Αυτό το παράδειγμα δείχνει διαφορετικούς τύπους αριθμημένων λιστών.
- Ενσωματωμένη λίστα
- Αυτό το παράδειγμα δείχνει πώς να ενσωματώσουμε λίστας.
- Ενσωματωμένη λίστα 2
- Αυτό το παράδειγμα δείχνει πιο σύνθετες ενσωματωμένες λίστας.
- Λίστα ορισμών
- Αυτό το παράδειγμα δείχνει μια λίστα ορισμών.
Η HTML φόρμα και παράδειγμα εισόδου
- Πεδία κειμένου (Text fields)
- Αυτό το παράδειγμα δείχνει πώς να δημιουργήσουμε πεδία κειμένου στην ιστοσελίδα HTML. Ο χρήστης μπορεί να γράψει κείμενο στο πεδίο κειμένου.
- Πεδίο κωδικού
- Δημιουργία πεδίου κωδικού
- Κουτιά επιλογής
- Αυτό το παράδειγμα δείχνει πώς να δημιουργήσουμε κουτιά επιλογής στην ιστοσελίδα HTML. Ο χρήστης μπορεί να επιλέξει ή να απενεργοποιήσει την επιλογή του κουτιού.
- Επιλογές
- Δημιουργία επιλογών με επιλογές
- Απλός πίνακας με προεπιλεγμένες τιμές
- Αυτό το παράδειγμα δείχνει πώς να δημιουργήσουμε έναν απλό πίνακα με προεπιλεγμένες τιμές στην ιστοσελίδα HTML. Ο πίνακας με προεπιλεγμένες τιμές είναι μια επιλογή.
- Ένας άλλος πίνακας με προεπιλεγμένες τιμές
- Ένας άλλος πίνακας με προεπιλεγμένες τιμές. (Μεταφραστής σημειώνει: οι προεπιλεγμένες τιμές είναι οι προκαθορισμένες προτιμήσεις.)
- Πλαίσιο κειμένου (Textarea)
- Πλαίσιο κειμένου (Textarea). Ο χρήστης μπορεί να γράψει κείμενο στο πλαίσιο κειμένου. Στο πλαίσιο κειμένου, δεν υπάρχει περιορισμός στον αριθμό των χαρακτήρων που μπορούν να γραφτούν.
- Δημιουργία κουμπιών
- Δημιουργία κουμπιών. Μπορείτε να προσαρμόσετε το κείμενο του κουμπιού.
- Πλαίσιο γύρω από δεδομένα
- Αυτό το παράδειγμα δείχνει πώς να σχεδιάσουμε ένα πλαίσιο με τίτλο γύρω από δεδομένα.
Παράδειγμα φόρμας
- Φόρμα με πεδία εισαγωγής και κουμπί επιβεβαίωσης
- Αυτό το παράδειγμα δείχνει πώς να προσθέσουμε φόρμα στη σελίδα. Αυτή η φόρμα περιέχει δύο πεδία εισαγωγής και ένα κουμπί επιβεβαίωσης.
- Φόρμα με κουτιά επιλογής
- Αυτή η φόρμα περιέχει δύο κουτιά επιλογής και ένα κουμπί επιβεβαίωσης.
- Φόρμα με επιλογές
- Αυτή η φόρμα περιέχει δύο επιλογές και ένα κουμπί επιβεβαίωσης.
- Αποστολή email από φόρμα
- Αυτό το παράδειγμα δείχνει πώς να στείλουμε email μέσω φόρμας.
Παράδειγμα HTML εικόνας
- Εισαγωγή εικόνας
- Αυτό το παράδειγμα δείχνει πώς να εμφανίσουμε εικόνα στον ιστότοπο.
- Εισαγωγή εικόνας από διαφορετικές τοποθεσίες
- Αυτό το παράδειγμα δείχνει πώς να εμφανίσουμε εικόνες από διαφορετικές τοποθεσίες ή διακομιστές στον ιστότοπο.
- Παράδειγμα παρασκήνιου εικόνας
- Αυτό το παράδειγμα δείχνει πώς να προσθέσουμε εικόνα ως παρασκήνιο σε σελίδα HTML.
- Τοποθέτηση εικόνας
- Αυτό το παράδειγμα δείχνει πώς να τοποθετήσουμε την εικόνα μέσα στο κείμενο.
- Κολυμπήσιμο εικόνας
- Αυτό το παράδειγμα δείχνει πώς να κάνουμε την εικόνα να κολυμπήσει στα αριστερά ή δεξιά του κειμένου.
- Προσαρμογή διαστάσεων εικόνας
- Αυτό το παράδειγμα δείχνει πώς να προσαρμόσουμε την εικόνα σε διαφορετικές διαστάσεις.
- Εμφάνιση αντικειμενικού κειμένου για εικόνα
- Αυτό το παράδειγμα δείχνει πώς να εμφανίσουμε αντικειμενικό κείμενο για μια εικόνα. Όταν ο περιηγητής δεν μπορεί να φορτώσει την εικόνα, η ιδιότητα αντικατάστασης κειμένου ενημερώνει τους αναγνώστες για την απωλειά πληροφοριών. Είναι καλή πρακτική να προσθέσουμε ιδιότητα αντικατάστασης κειμένου σε όλες τις εικόνες της σελίδας.
- Δημιουργία σύνδεσμου εικόνας
- Αυτό το παράδειγμα δείχνει πώς να χρησιμοποιήσουμε μια εικόνα ως σύνδεσμο.
- Δημιουργία χάρτη εικόνας
- Αυτό το παράδειγμα δείχνει πώς να δημιουργήσουμε έναν χάρτη εικόνας με περιοχές που μπορούν να κάνουν κλικ. Κάθε περιοχή είναι ένας σύνδεσμος.
- Μετατροπή εικόνας σε χάρτη εικόνας
- Αυτό το παράδειγμα δείχνει πώς να χρησιμοποιήσουμε μια κανονική εικόνα ως χάρτη εικόνας.
Παράδειγμα HTML παρασκήνιου
- Καλά συνδυασμένα παρασκήνια και χρώματα
- Ένας παράδειγμα καλά συνδυασμένων χρωμάτων παρασκήνιου και κειμένου που καθιστά το κείμενο στη σελίδα εύκολα διαβάσιμο.
- Μη καλά συνδυασμένα παρασκήνια και χρώματα
- Παράδειγμα με κακή συνδυασμό χρωμάτων φόντου και γραμμάτων που καθιστούν το κείμενο της σελίδας δύσκολο να διαβαστεί.
- Εικόνες φόντου υψηλής προσβασιμότητας
- Παράδειγμα που δείχνει πώς οι εικόνες φόντου και τα χρώματα γραμμάτων κάνουν το κείμενο της σελίδας εύκολα διαβαστέο.
- Εικόνες φόντου υψηλής προσβασιμότητας 2
- Άλλο παράδειγμα με εικόνες φόντου και χρώματα γραμμάτων που καθιστούν το κείμενο της σελίδας εύκολα διαβαστέο.
- Εικόνες φόντου χαμηλής προσβασιμότητας
- Παράδειγμα που δείχνει πώς οι εικόνες φόντου και τα χρώματα γραμμάτων κάνουν το κείμενο της σελίδας δύσκολο να διαβαστεί.
Παράδειγμα Στυλ του HTML
- Στυλ στο HTML
- Αυτό το παράδειγμα δείχνει πώς να χρησιμοποιήσετε τις πληροφορίες στυλ που προστίθενται στη ενότητα <head> για τη διαμόρφωση του HTML.
- Σύνδεσμοι χωρίς Υπογράμμιση
- Αυτό το παράδειγμα δείχνει πώς να χρησιμοποιήσετε την ιδιότητα style για να δημιουργήσετε έναν σύνδεσμο χωρίς υπογράμμιση.
- Σύνδεση σε Εξωτερικό Αρχείο Στυλ
- Αυτό το παράδειγμα δείχνει πώς να συνδέσετε ένα εξωτερικό αρχείο στυλ με το στοιχείο <link>.
Παράδειγμα Κεφαλίδας του HTML
- Τίτλος του Έγγραφου
- Οι πληροφορίες του τίτλου μέσα στην κεφαλίδα δεν εμφανίζονται στο παράθυρο περιήγησης.
- Ένας target, όλα τα σύνδεσμοι
- Αυτό το παράδειγμα δείχνει πώς να χρησιμοποιήσετε το στοιχείο base για να ανοίξουν όλα τα σύνδεσμοι σε νέα παράθυρα.
Παράδειγμα Meta του HTML
- Περιγραφή Έγγραφου
- Οι πληροφορίες στο στοιχείο Meta μπορούν να περιγράψουν το HTML έγγραφο.
- Κλειδιά Κείμενά του Έγγραφου
- Οι πληροφορίες στο στοιχείο Meta μπορούν να περιγράψουν τα κλειδιά κείμενά του έγγραφου.
- Μεταφορά
- Αυτό το παράδειγμα δείχνει πώς να μεταφέρει τον χρήστη σε μια άλλη διεύθυνση URL όταν η διεύθυνση έχει αλλάξει.
Παράδειγμα Script του HTML
- Εισαγωγή ενός σκευαστικού κειμένου
- Αυτό το παράδειγμα δείχνει πώς να εισάγετε το script στο έγγραφο HTML.
- Διαβίβαση σε περιηγητές που δεν υποστηρίζουν το script
- Αυτό το παράδειγμα δείχνει πώς να αντιμετωπίσετε τους περιηγητές που δεν υποστηρίζουν το script.
- Προηγούμενη Σελίδα HTML5 SSE
- Επόμενη Σελίδα Ερωτήσεις του HTML
