Print bookPrint book

Υποενότητα 2.1: Σχόλια και λίστες κειμένου

Site: ΕΛ/ΛΑΚ Moodle
Course: Σχεδιασμός WEB και Παραγωγή Ψηφιακού Περιεχομένου
Book: Υποενότητα 2.1: Σχόλια και λίστες κειμένου
Printed by: Guest user
Date: Sunday, 24 November 2024, 2:17 AM

Description

  • Σχόλια
  • Μη αριθμημένη λίστα κειμένου
  • Αριθμημένη λίστα κειμένου
  • Εμφωλευμένες κειμένου

Table of contents

Σχόλια

Τα σχόλια (comments) χρησιμοποιούνται σε HTML όταν θέλουμε να θυμηθούμε κάτι ή θέλουμε να εξηγήσουμε στους άλλους τι κάναμε.
Τα σχόλια δεν εμφανίζονται στη σελίδα.
Η ετικέτα σχολίου αρχίζει με <!-- και τελειώνει -->.

Image for comments

Λίστες κειμένου

Στο HTML υπάρχουν δύο τύποι λιστών κειμένου (lists) <ul> και <ol.

<ul> σημαίνει μη αριθμημένη λίστα κειμένου (unordered list), η οποία είναι η κλασική λίστα με κουκκίδες.

<ol> αντιπροσωπεύει την αριθμημένη λίστα κειμένου (ordered list)  στην οποία τα στοιχεία της σημειώνονται με αριθμούς.

Κάθε στοιχείο και των δύο ξεκινά με την ετικέτα <li>, η οποία σημαίνει στοιχείο λίστας (list item) και τελειώνει με </li>.

Από προεπιλογή, η <ol> θα αρχίσει να μετρά από το 1.

Ωστόσο, μπορούμε να αλλάξουμε το σημείο εκκίνησης, να αντιστρέψουμε την καταμέτρηση ή ακόμα και να χρησιμοποιήσουμε αλφαβητικούς χαρακτήρες.

Παραδείγματα

Μη αριθμημένη λίστα κειμένου - Unordered list

  • The first item
  • The second item...
  • The third item!

Προβολή κώδικα:

Αριθμημένη λίστα κειμένου - Ordered list

  1. The 1st item
  2. The 2nd item...
  3. The 3rd item!
  4. The 4th item!

Προβολή κώδικα:

Αυτή η αριθμημένη  λίστα κειμένου αρχίζει από το 2000

  1. the 1st year of the 21st century
  2. the 2nd year of the 21st century
  3. the 3rd year of the 21st century
  4. the 4th year of the 21st century

Προβολή κώδικα:

Αυτή η αριθμημένη  λίστα κειμένου έχει αντιστραφεί (reversed)

  1. the last year of 21st century
  2. two years until the end of the 21st century
  3. three years until the end of the 21st century
  4. four years until the end of the 21st century

Προβολή κώδικα:

Εμφωλευμένες (nested) λίστες κειμένου 

  1. Coffee
  2. Tea
    • Black tea
    • Green tea
  3. Milk

Προβολή κώδικα:


Μπορείτε να βρείτε περισσότερα παραδείγματα: w3schools 

Άσκηση

  1. Ανοίξτε τον επεξεργαστή κώδικα, δημιουργήστε ένα νέο αρχείο και αποθηκεύστε το ως exersice02.1.02.html στον φάκελο "Exercises"
  2. Επεξεργαστείτε το αρχείο. Στον browser θα πρέπει να εμφανίζεται η επόμενη εικόνα:

Λύση: