Σχολή Εφαρμοσμένων Μαθηματικών και Φυσικών Επιστημών Εθνικό Μετσόβιο Πολυτεχνείο Νέες Τεχνολογίες στην Εκπαίδευση Λίστες Στεφανέας Πέτρος Ζαμαρίας Βασίλης
Άδεια Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες χρήσης Creative Commons. Για εκπαιδευτικό υλικό, όπως εικόνες, που υπόκειται σε Άδεια χρήσης άλλου τύπου, αυτή πρέπει να αναγράφεται ρητώς.
Βασικά στοιχεία της HTML > Λίστες Η χρήση λίστας, διατεταγμένης ή μη, σίγουρα προσφέρει στο κείμενο στις περιπτώσεις που εισάγουμε οδηγίες, πίνακες περιεχομένων και γενικά στοιχεία που πρέπει να μπουν σε μια σειρά. 1
Διατεταγμένη λίστα (1/4) Στην διατεταγμένη λίστα χρησιμοποιούμε τους κωδικούς <OL> και </OL> στην αρχή και το τέλος της λίστας ενώ κάθε στοιχείο της λίστας καθορίζεται από τους κωδικούς <LI> και </LI>. Εξ' ορισμού, η διατεταγμένη λίστα χρησιμοποιεί αρίθμηση με αραβικούς αριθμούς (1,2,3,...). 2
Διατεταγμένη λίστα (2/4) Ο κωδικός <OL> δέχεται δύο ορίσματα ενώ ο κωδικός <LI> δέχεται ένα, που μας επιτρέπουν πλήρη έλεγχο της διάταξης. Στον <ΟL>, με το όρισμα TYPE=" " μπορούμε να διαλέξουμε μεταξύ των Α (Α,B,C,...), a (a,b,c,...), I (I,II,III,...), i (i,ii,iii,...) και βέβαια 1 (1,2,3,...), ενώ με το όρισμα START=" " μπορούμε να επιλέξουμε την αρχική τιμή της λίστας. 3
Διατεταγμένη λίστα (3/4) Με το όρισμα VALUE=" " στον κωδικό <LI> μπορούμε να αντιστοιχίσουμε όποιον αριθμό θέλουμε (προσοχή, η τιμή του ορίσματος VALUE θα είναι πάντα 1 ή 2 ή 3,..., ανεξάρτητα από τον τύπο αρίθμησης που επιλέξαμε). 4
Διατεταγμένη λίστα (4/4) Να λοιπόν ένα παράδειγμα: Κώδικας <OL type="i" start="2"> <LI>Σχετικιστική Κβαντομηχανική</LI> <LI>Εξίσωση Klein-Gordonv</LI> <LI>Εξίσωση Dirac</LI> <LI value="6">κβαντική Ηλεκτροδυναμική</LI> <LI>Ανακανονικοποίηση</LI></OL> Εμφάνιση ii. Σχετικιστική Κβαντομηχανική iii. Εξίσωση Klein-Gordon vi. Εξίσωση Dirac vii. Κβαντική Ηλεκτροδυναμική viii. Ανακανονικοποίηση 5
Μη διατεταγμένη λίστα (1/5) Οι κωδικοί για τη μη διατεταγμένη λίστα είναι οι <UL> και </UL>, στην αρχή και το τέλος της λίστας και οι <LI> </LI> στην αρχή και το τέλος κάθε στοιχείου της λίστας. Εξ ορισμού, εμφανίζεται μια μαύρη κουκίδα στην αριστερή πλευρά κάθε νέου στοιχείου. 6
Μη διατεταγμένη λίστα (2/5) Με το όρισμα TYPE=" " στον κωδικό <UL> μπορείτε να επιλέξετε μεταξύ CIRCLE (άσπρη κουκίδα), SQUARE (μαύρο τετραγωνάκι) και βέβαια DISC που αντιστοιχεί στη μαύρη κουκίδα. Με αυτό τον τρόπο αλλάζετε για όλη τη λίστα το σύμβολο. Αν επιθυμείτε να έχετε διαφορετικά σύμβολα στην ίδια λίστα, το όρισμα TYPE=" " μπορεί να χρησιμοποιηθεί και στον κωδικό <LI>. 7
Μη διατεταγμένη λίστα (3/5) Έτσι, το προηγούμενο παράδειγμα μπορεί να γραφτεί ως: Κώδικας <UL TYPE="CIRCLE"> <LI>Σχετικιστική Κβαντομηχανική</LI> <LI>Εξίσωση Klein-Gordonv</LI> <LI TYPE="SQUARE">Εξίσωση Dirac</LI> <LI>Κβαντική Ηλεκτροδυναμική</LI> <LI TYPE="DISC">Ανακανονικοποίηση</LI> </UL> o Εμφάνιση Σχετικιστική Κβαντομηχανική o Εξίσωση Klein-Gordonv Εξίσωση Dirac Κβαντική Ηλεκτροδυναμική Ανακανονικοποίηση 8
Μη διατεταγμένη λίστα (4/5) Μπορείτε να χρησιμοποιήσετε λίστα μέσα σε μια άλλη λίστα (ένθετη λίστα). Ο αναγνώστης ιστοσελίδων θα δώσει στην ένθετη λίστα μεγαλύτερο αριστερό περιθώριο για να ξεχωρίζει. Όλοι οι κανόνες για τις λίστες ισχύουν και για την ένθετη λίστα. Για παράδειγμα: 9
Μη διατεταγμένη λίστα (5/5) Κώδικας <OL type="a"> <LI>Σχετικιστική Κβαντομηχανική <UL TYPE="CIRCLE"> <LI>Έιδική Θεωρία Σχετικότητας</LI> <LI>Χρήσιμες Σχέσεις</LI> </UL></LI> <LI>Εξίσωση Klein-Gordonv</LI> <LI>Εξίσωση Dirac <UL TYPE="SQUARE"> <LI>Οι Πίνακες γ</li> <LI>Το αντι-ηλεκτρόνιο</li> </UL></LI> <LI>Κβαντική Ηλεκτροδυναμική</LI> <LI>Ανακανονικοποίηση</LI></OL> Εμφάνιση A. Σχετικιστική Κβαντομηχανική o Έιδική Θεωρία Σχετικότητας o Χρήσιμες Σχέσεις B. Εξίσωση Klein-Gordonv C. Εξίσωση Dirac Οι Πίνακες γ Το αντι-ηλεκτρόνιο D. Κβαντική Ηλεκτροδυναμική E. Ανακανονικοποίηση 10
Λίστα ορισμών (1/4) Τέλος, με τη λίστα ορισμών μπορούμε να εμφανίζουμε ορισμένους όρους και τους αντίστοιχους ορισμούς τους. Ο κωδικός <DL> αρχίζει τη λίστα, ο <DΤ> αρχίζει τον όρο (και ο </DΤ> τον κλίνει) και ο <DD> αρχίζει τον ορισμό (και ο </DD> τον κλίνει), και βέβαια η λίστα κλίνει με τον </DL>. Ας κλείσουμε το κεφάλαιο αυτό με ένα σχετικό παράδειγμα: 11
Λίστα ορισμών (2/4) <DL> <DT><Ampere</DT> <DT>(Αμπέρ)</DT> <DD>Σύμβολο: <B>Α</B>. Μονάδα μέτρησης ηλεκτρικού ρεύματος. Ορίζεται ως το σταθερό ρεύμα που διαρρέει δύο παράλληλους αγωγούς απείρου μήκους, αμελητέας διατομής, σε απόσταση 1 μέτρου και προκαλεί δύναμη ίση με 2 10<sup>-7</sup> N/m. </DD> <DT>Tesla</DT> <DT>(Τέσλα)<DT> <DD>Σύμβολο: <B>T</B>. Μονάδα μέτρησης πυκνότητας μαγνητικής ροής. Ορίζεται ως 1 Weber ανά τετραγωνικό μέτρο </DD> </DL> 12
Λίστα ορισμών (3/4) Ο παραπάνω κώδικας θα δώσει: Ampere (Αμπέρ) Σύμβολο: Α. Μονάδα μέτρησης ηλεκτρικού ρεύματος. Ορίζεται ως το σταθερό ρεύμα που διαρρέει δύο παράλληλους αγωγούς απείρου μήκους, αμελητέας διατομής, σε απόσταση 1m και προκαλεί δύναμη ίση με 2 10-7 N/m. Tesla (Τέσλα) Σύμβολο: T. Μονάδα μέτρησης πυκνότητας μαγνητικής ροής. Ορίζεται ως 1 Weber ανά τετραγωνικό μέτρο (1W/m 2 ) 13
Λίστα ορισμών (4/4) Προσέξτε τη πολλαπλή χρήση του <DT>. Το ίδιο μπορεί να γίνει για πάνω από ένα ορισμό στον ίδιο όρο. 14
Άσκηση 2: Πληκτρολογήστε τον κώδικα HTML ώστε να εμφανίζεται στον αναγνώστη ιστοσελίδων το παρακάτω κείμενο: 15
Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί στα πλαίσια του εκπαιδευτικού έργου του διδάσκοντα. Το έργο «Ανοικτά Ακαδημαϊκά Μαθήματα Ε.Μ.Π.» έχει χρηματοδοτήσει μόνο την αναδιαμόρφωση του εκπαιδευτικού υλικού. Το έργο υλοποιείται στο πλαίσιο του Επιχειρησιακού Προγράμματος «Εκπαίδευση και Δια Βίου Μάθηση» και συγχρηματοδοτείται από την Ευρωπαϊκή Ένωση (Ευρωπαϊκό Κοινωνικό Ταμείο) και από εθνικού πόρους.