Παραδείγματα HTML
- Προηγούμενη Σελίδα HTML5 SSE
- Επόμενη Σελίδα Περιήγηση HTML
Παράδειγμα βασικών σημάτων HTML
- Απλό αρχείο HTML
- Αυτό το παράδειγμα είναι ένα πολύ απλό αρχείο HTML, που χρησιμοποιεί το ελάχιστο δυνατό αριθμό σημάτων HTML. Εμφανίζει πώς το περιεχόμενο στο στοιχείο body εμφανίζεται από τον περιηγητή.
- Απλή παράγραφος
- Αυτό το παράδειγμα δείχνει πώς το κείμενο στο στοιχείο παραγράφου εμφανίζεται από τον περιηγητή.
- Περισσότερες παραγράφους
- Αυτή η παράδειγμα δείχνει ορισμένα προεπιλεγμένα συμπεριφορές του στοιχείου παραγράφου.
- Πρόβλημα ποίησης
- Αυτή η παράδειγμα δείχνει ορισμένα προβλήματα格式ting HTML.
- Διαίρεση γραμμής
- Αυτή η παράδειγμα δείχνει τη χρήση της διαίρεσης γραμμής σε έγγραφα HTML.
- 标题
- 本例演示在 HTML 文档中显示标题的标签。
- 居中排列的标题
- 本例演示一个居中排列的标题。
- 水平线
- 本例演示如何插入水平线。
- 隐藏的注释
- 本例演示如何在 HTML 源代码中插入隐藏的注释。
- 背景颜色
- 本例演示如何为 HTML 页面添加背景颜色。
HTML 文本格式化实例
HTML 链接实例
- 创建超级链接
- 本例演示如何在 HTML 文档中创建链接。
- 将图像作为链接
- 本例演示如何使用图像作为链接。
- 在新的浏览器窗口打开链接
- 本例演示如何在新窗口打开一个页面，这样的话访问者就无需离开你的站点了。
- 链接到同一个页面的不同位置
- 本例演示如何使用链接跳转至文档的另一个部分
- 跳出框架
- 本例演示如何跳出框架，假如你的页面被固定在框架之内。
- 创建电子邮件链接
- 本例演示如何如何链接到一个邮件。（本例在安装邮件客户端程序后才能工作。）
- 创建电子邮件链接 2
- 本例演示更加复杂的邮件链接。
HTML 框架实例
- 垂直框架
- 本例演示：如何使用三份不同的文档制作一个垂直框架。
- 水平框架
- 本例演示：如何使用三份不同的文档制作一个水平框架。
- Συνδυασμένη δομή πλάνκου
- Αυτό το παράδειγμα δείχνει πώς να δημιουργήσετε μια δομή πλάνκου με τρία έγγραφα, τα οποία συνδυάζονται σε γραμμές και στήλες.
- Δομή πλάνκου με την ιδιότητα 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. Ο χρήστης μπορεί να επιλέξει ή να ακυρώσει την επιλογή.
- Επιλογές
- Αυτό το παράδειγμα δείχνει πώς να δημιουργήσουμε επιλογές με κουμπιά σε HTML.
- Απλός πίνακας ανακάλυψης
- Αυτό το παράδειγμα δείχνει πώς να δημιουργήσουμε έναν απλό πίνακα ανακάλυψης σε μια σελίδα HTML. Ο πίνακας ανακάλυψης είναι μια επιλογή.
- Άλλος πίνακας ανακάλυψης
- Ένας άλλος πίνακας ανακάλυψης με προεπιλεγμένη τιμή.
- Επιφάνεια κειμένου (Textarea)
- Επιφάνεια κειμένου (Textarea). Ο χρήστης μπορεί να γράψει κείμενο στο πεδίο. Το μέγεθος των χαρακτήρων που μπορούν να γραφτούν δεν είναι περιορισμένο.
- Δημιουργία κουμπιών
- Δημιουργία κουμπιών. Μπορείτε να προσαρμόσετε το κείμενο που εμφανίζεται στο κουμπί.
- Θυρίδα γύρω από δεδομένα
- Αυτό το παράδειγμα δείχνει πώς να σχεδιάσουμε μια θυρίδα με τίτλο γύρω από δεδομένα.
Παράδειγμα φόρμας
- Φόρμα με πεδία εισαγωγής και κουμπί επιβεβαίωσης
- Αυτό το παράδειγμα δείχνει πώς να προσθέσουμε ένα φόρμα στην σελίδα. Το φόρμα περιέχει δύο πεδία εισαγωγής και ένα κουμπί επιβεβαίωσης.
- Φόρμα με κουτιά επιλογής
- Αυτό το φόρμα περιέχει δύο κουτιά επιλογής και ένα κουμπί επιβεβαίωσης.
- Φόρμα με επιλογές
- Αυτό το φόρμα περιέχει δύο επιλογές και ένα κουμπί επιβεβαίωσης.
- Αποστολή email από φόρμα
- Αυτό το παράδειγμα δείχνει πώς να στείλουμε email μέσω ενός φόρματος.
Παράδειγμα HTML εικόνας
- Εισαγωγή εικόνας
- Αυτό το παράδειγμα δείχνει πώς να εμφανίσουμε μια εικόνα σε μια ιστοσελίδα.
- Εισαγωγή εικόνας από διαφορετικές τοποθεσίες
- Αυτό το παράδειγμα δείχνει πώς να εμφανίσουμε εικόνες από διαφορετικές τοποθεσίες ή διακομιστές.
- Φόντο εικόνας
- Αυτό το παράδειγμα δείχνει πώς να προσθέσουμε φόντο εικόνας σε μια σελίδα HTML.
- Τοποθέτηση εικόνας
- Αυτό το παράδειγμα δείχνει πώς να τοποθετήσουμε μια εικόνα μέσα στο κείμενο.
- Κολυμπήσιμη εικόνα
- Αυτό το παράδειγμα δείχνει πώς να κάνουμε μια εικόνα να κολυμπήσει στα δεξιά ή στα αριστερά ενός παραγράφου.
- Προσαρμογή μεγέθους εικόνας
- Αυτό το παράδειγμα δείχνει πώς να προσαρμόσουμε το μέγεθος μιας εικόνας.
- Εμφάνιση αντικειμενικού κειμένου για εικόνα
- Αυτό το παράδειγμα δείχνει πώς να εμφανίσουμε αντικειμενικό κείμενο για μια εικόνα. Όταν η εικόνα δεν μπορεί να φορτωθεί από τον περιηγητή, η ιδιότητα αντικατάστασης κειμένου ενημερώνει τους αναγνώστες για την απωλειά πληροφοριών. Είναι καλή πρακτική να προσθέσουμε ιδιότητες αντικατάστασης κειμένου σε όλες τις εικόνες της σελίδας.
- Δημιουργία σύνδεσμου εικόνας
- Αυτό το παράδειγμα δείχνει πώς να χρησιμοποιήσουμε μια εικόνα ως σύνδεσμο.
- Δημιουργία χάρτη εικόνας
- Αυτό το παράδειγμα δείχνει πώς να δημιουργήσουμε μια εικόνα χάρτη με περιοχές που μπορούν να κάνουν κλικ. Κάθε περιοχή είναι ένας σύνδεσμος.
- Μετατροπή εικόνας σε χάρτη εικόνας
- Αυτό το παράδειγμα δείχνει πώς να χρησιμοποιήσουμε μια απλή εικόνα ως χάρτη εικόνας.
Παράδειγμα HTML φόντου
- Καλά συνδυασμένα χρώματα και φόντο
- Ένας παράδειγμα καλά συνδυασμένων χρωμάτων φόντου και κειμένου που καθιστά το κείμενο της σελίδας εύκολα αναγνώσιμο.
- Μη καλά συνδυασμένοι χρώματα και φόντο
- Παράδειγμα που δείχνει πώς η συνδυασμός χρωμάτων φόντου και κειμένου κάνει το κείμενο της ιστοσελίδας δύσκολο να διαβαστεί.
- Φανολέπτης Φόντος Εικόνας
- Παράδειγμα που δείχνει πώς οι εικόνες φόντου και τα χρώματα κειμένου κάνουν το κείμενο της ιστοσελίδας εύκολα αναγνωρίσιμο.
- Φανολέπτης Φόντος Εικόνας 2
- Άλλο παράδειγμα με εικόνες φόντου και χρώματα κειμένου που κάνουν το κείμενο της ιστοσελίδας εύκολα αναγνωρίσιμο.
- Μη Αναγνωρίσιμος Φόντος Εικόνας
- Παράδειγμα που δείχνει πώς οι εικόνες φόντου και τα χρώματα κειμένου κάνουν το κείμενο της ιστοσελίδας δύσκολο να διαβαστεί.
Παράδειγμα Στυλ (style) του HTML
- Στυλ στο HTML
- Αυτό το παράδειγμα δείχνει πώς να χρησιμοποιήσετε τις πληροφορίες στυλ που προστίθενται στη ενότητα head για να μορφοποιήσετε το HTML.
- Σύνδεσμοι χωρίς Υπογράμμιση
- Αυτό το παράδειγμα δείχνει πώς να χρησιμοποιήσετε την ιδιότητα style για να δημιουργήσετε έναν σύνδεσμο χωρίς υπογράμμιση.
- Σύνδεση σε Εξωτερικό Στυλταbla
- Αυτό το παράδειγμα δείχνει πώς να συνδέσετε μια εξωτερική στυλταbla using the <link> tag.
Παράδειγμα Κεφαλίδας (head) του HTML
- Τίτλος Έγγραφου
- Οι πληροφορίες του τίτλου εντός του στοιχείου head δεν εμφανίζονται στο παράθυρο περιηγητή.
- Μια target, όλες οι σύνδεσμοι
- Αυτό το παράδειγμα δείχνει πώς να χρησιμοποιήσετε την ετικέτα base για να ανοίξετε όλες τις ετικέτες στην ιστοσελίδα σε νέο παράθυρο.
Παράδειγμα Μεταδεδομένων (meta) του HTML
- Περιγραφή Έγγραφου
- Οι πληροφορίες στο στοιχείο Meta μπορούν να περιγράψουν το έγγραφο HTML.
- Κύριες Λέξεις του Έγγραφου
- Οι πληροφορίες στο στοιχείο Meta μπορούν να περιγράψουν τις κύριες λέξεις του έγγραφου.
- Μεταφορά
- Αυτό το παράδειγμα δείχνει πώς να οδηγήσετε τον χρήστη σε μια άλλη διεύθυνση URL όταν η διεύθυνση URL έχει αλλάξει.
Παράδειγμα Σκριπτ (Script) του HTML
- Εισαγωγή ενός Σκριπτ
- Αυτό το παράδειγμα δείχνει πώς να εισάγετε σκριπτ στο έγγραφο HTML.
- Εκτέλεση σε περιηγητές που δεν υποστηρίζουν τα σκριπτ
- Αυτό το παράδειγμα δείχνει πώς να αντιμετωπίσετε τους περιηγητές που δεν υποστηρίζουν τα σκριπτ.
- Προηγούμενη Σελίδα HTML5 SSE
- Επόμενη Σελίδα Περιήγηση HTML
