Επανάληψη HTML 2
Λίστες
Μη Αριθμημένες Λίστες (Unordered)
Αυτές οι λίστες εμφανίζουν αντικείμενα με "βούλες" ή με άλλες μάρκες στην αρχή του κειμένου. Λέγονται ετικέτες στον κώδικα της HTML.
Δείτε το παρακάτω παράδειγμα:
Αυτός είναι ο κώδικας της:
<b> Mi arithmimeni lista </b>
<ul>
<li>Stoixeio 1
<li>Stoixeio 2
<li>Stoixeio 3
</ul>
Η ετικέτα <ul> ... </ul> μαρκάρει την αρχή και το τέλος της λίστας, και η ετικέτα <li> δείχνει κάθε αντικείμενο.
Αριθμημένες λίστες (Ordered)
Οι τακτοποιημένες λίστες είναι αυτές που τα αντικείμενα ξεκινούν με το "1.". Η μόνη διαφορά στην ετικέτα είναι οτι αλλάζει μόνο το ul σε ol.
Δείτε το παρακάτω παράδειγμα:
Ο κώδικας αυτής της λίστας είναι ο εξής:
<b> Arithmimeni lista </b>
<ol>
<li>Stoixeio 1
<li>Stoixeio 2
<li>Stoixeio 3
</ol>
Ένθετες λίστες
Οι αριθμημένες και οι μη αριθμημένες λίστες, μπορούν να έχουν διαφορετικά επίπεδα. Η κάθε μία, μπορεί να κάνει υποεπίπεδα μέσα στη λίστα, με άλλες λίστες (βλέπε παράδειγμα). Το μείζων θέμα είναι η επαλήθευση της κάθε λίστας ώστε να τελειώνει σωστά και να είναι σωστή η ένωση.
Μπορείτε να ξεκινήσετε με μια πολύπλοκη ματιά με αυτές τις ετικέτες <ol> <li> </ul> <li>, αλλά θυμηθείτε τη βασική δομή:
<ul> <ol>
<li> <li>
<li> <li>
</ul> </ol>
Ακολουθεί ένα παράδειγμα ατακτοποίητης λίστας, με υποεπίπεδα άλλες λίστες:
Παρατηρήστε ότι η βούλα αλλάζει σε κάθε επίπεδο.
Αυτός είναι ο κώδικας του παραδείγματος:
<b>Sintheti mi arithmimeni lista</b>
<ul>
<li>This is the first item
<li>This is the second item
<ul>
<li> This is the first subitem of the second item
<ul>
<li> And this is a subitem of a subitem
<li> Getting lost yet?
</ul>
<li> This is the second subitem of the second item
<li> This is the third subitem of the second item
</ul>
<li>This is the third item
</ul>
Εικόνες και Αρχεία Γραφικών
Με τις ετικέτες αυτές θα μπορείτε να εμφανίζεται μία εικόνα μέσα στο κείμενο μιας ιστοσελίδας.
Ο κώδικας για αυτό τον σκοπό, είναι ο εξής:
<img src="filename.gif">
όπου filename.gif είναι το όνομα της εικόνας, η οποία βρίσκεται μέσα στον υποκατάλογο του HTML αρχείου.
Προσέξτε πως το κείμενο ακολουθεί αμέσως μετα την εικόνα.
Δεσμοί Υπερκειμένου (hypertext links)
Τι είναι ένα URL;
Η πραγματική δύναμη του δικτύου είναι η δυνατότητα να δημιουργεί υπερκείμενους δεσμούς (hypertext links) που αναφέρονται σε πληροφορίες. Αυτές οι πληροφορίες μπορεί να είναι και σε: ιστοσελίδες, γραφικά, ήχους, video, προγράμματα, κ.α.
Το παγκόσμιο δίκτυο (World Wide Web) χρησιμοποιεί ένα πλάνο απο διευθύνσεις γνωστό και ως URL, ή Uniform Resource Locators (και μερικές φορές ως Universal Resource Locator), για να δείχνει τις τοποθεσίες απο διάφορα αντικείμενα. Αυτοί οι υπερκείμενοι δεσμοί (hypertext links), είναι σχεδόν πάντα μπλέ και υπογραμμισμένοι, γνωστοί και ως anchors.
Δεσμοί σε τοπικά αρχεία
Ο απλούστερος δεσμός είναι αυτός που ανοίγει ένα άλλο HTML αρχείο, μέσα στον ίδιο υποκατάλογο ως ιστοσελίδα. Ο κώδικας για αυτή την δυνατότητα είναι ο εξής:
<a href="filename.html">text that responds to link</a>
Το "a" από τον κώδικα είναι από το anchor και το "href" από το "hypertext reference".
Το όνομα του αρχείου θα πρέπει να είναι ένα άλλο HTML αρχείο. Οτιδήποτε κείμενο βρίσκεται μεταξύ απο τους συμβολισμούς < > και πριν το <a> θα είναι το "υπερκείμενο" (hypertext) το οποίο θα εμφανίζεται υπογραμμισμένο και "hyper."
Δεσμοί σε γραφικά
Με την anchor ετικέτα , μπορείτε επίσης να δημιουργήσετε δεσμό με αρχείο γραφικών. Όταν ο δεσμός θα επιλεχθεί, θα κατεβάσει το αρχείο με το γραφικό και θα εμφανιστεί ότι περιέχει το αρχείο, απο μόνο του σε άδεια σελίδα.
Ο απλούστερος anchor δεσμός είναι αυτός που καλεί το αρχείο, στον ίδιο υποκατάλογο που βρίσκεται και η ιστοσελίδα. Ο κώδικας είναι ο εξής:
<a href="filename.gif">text that responds to link</a>
όπου filename.gif είναι το όνομα της GIF εικόνας.
Δεσμοί με άλλους υποκαταλόγους
Η anchor ετικέτα επίσης μπορεί να δημιουργήσει δεσμό μεταξύ αρχείων που βρίσκονται σε διαφορετικούς υποκαταλόγους. Για παράδειγμα, θα βάλουμε όλα τα αρχεία γραφικών σε ξεχωριστό υποκατάλογο, με όνομα pictures. Αυτή η ενέργεια είναι βολική για την οργάνωση του site σας. Ο κώδικας είναι ο εξής:
<a href="pictures/msh.gif">toppled over like toys</a>
HTML για υπερσυνδέσμους στο Internet
Η HTML για το σύνδεσμο προς κάποιο στοιχείο στο Internet είναι:
<a href="URL">Keimeno Ypersindesmou</a>
όπου URL είναι η πλήρης Uniform Resource Locator, σε εισαγωγικά, δηλαδή η διεύθυνση του Internet site στο οποίο θέλετε να στείλετε το χρήστη. Το κείμενο Κείμενο Υπερσυνδέσμου είναι τι θα εμφανιστεί ως υπερκείμενο στον browser (συνήθως, αλλά όχι πάντα, με μπλε υπογραμμισμένα γράμματα). Όταν ο χρήστης κάνει κλικ στο σύνδεσμο, ο browser θα τους συνδέσει με το Internet site που υποδεικνύει η URL. Να θυμάστε οτι μια URL μπορεί να είναι ο σύνδεσμος προς έναν άλλο World Wide Web (WWW) server, Gopher server, FTP site, ή οποιοδήποτε αρχείο κείμενου, εικόνας, ήχου ή βίντεο, που βρίσκεται σε κάποιον server.
Πηγή : http://www.it.uom.gr/project/html2/main.html
Μη Αριθμημένες Λίστες (Unordered)
Αυτές οι λίστες εμφανίζουν αντικείμενα με "βούλες" ή με άλλες μάρκες στην αρχή του κειμένου. Λέγονται ετικέτες στον κώδικα της HTML.
Δείτε το παρακάτω παράδειγμα:
Αυτός είναι ο κώδικας της:
<b> Mi arithmimeni lista </b>
<ul>
<li>Stoixeio 1
<li>Stoixeio 2
<li>Stoixeio 3
</ul>
Η ετικέτα <ul> ... </ul> μαρκάρει την αρχή και το τέλος της λίστας, και η ετικέτα <li> δείχνει κάθε αντικείμενο.
Αριθμημένες λίστες (Ordered)
Οι τακτοποιημένες λίστες είναι αυτές που τα αντικείμενα ξεκινούν με το "1.". Η μόνη διαφορά στην ετικέτα είναι οτι αλλάζει μόνο το ul σε ol.
Δείτε το παρακάτω παράδειγμα:
Ο κώδικας αυτής της λίστας είναι ο εξής:
<b> Arithmimeni lista </b>
<ol>
<li>Stoixeio 1
<li>Stoixeio 2
<li>Stoixeio 3
</ol>
Ένθετες λίστες
Οι αριθμημένες και οι μη αριθμημένες λίστες, μπορούν να έχουν διαφορετικά επίπεδα. Η κάθε μία, μπορεί να κάνει υποεπίπεδα μέσα στη λίστα, με άλλες λίστες (βλέπε παράδειγμα). Το μείζων θέμα είναι η επαλήθευση της κάθε λίστας ώστε να τελειώνει σωστά και να είναι σωστή η ένωση.
Μπορείτε να ξεκινήσετε με μια πολύπλοκη ματιά με αυτές τις ετικέτες <ol> <li> </ul> <li>, αλλά θυμηθείτε τη βασική δομή:
<ul> <ol>
<li> <li>
<li> <li>
</ul> </ol>
Ακολουθεί ένα παράδειγμα ατακτοποίητης λίστας, με υποεπίπεδα άλλες λίστες:
Παρατηρήστε ότι η βούλα αλλάζει σε κάθε επίπεδο.
Αυτός είναι ο κώδικας του παραδείγματος:
<b>Sintheti mi arithmimeni lista</b>
<ul>
<li>This is the first item
<li>This is the second item
<ul>
<li> This is the first subitem of the second item
<ul>
<li> And this is a subitem of a subitem
<li> Getting lost yet?
</ul>
<li> This is the second subitem of the second item
<li> This is the third subitem of the second item
</ul>
<li>This is the third item
</ul>
Εικόνες και Αρχεία Γραφικών
Με τις ετικέτες αυτές θα μπορείτε να εμφανίζεται μία εικόνα μέσα στο κείμενο μιας ιστοσελίδας.
Ο κώδικας για αυτό τον σκοπό, είναι ο εξής:
<img src="filename.gif">
όπου filename.gif είναι το όνομα της εικόνας, η οποία βρίσκεται μέσα στον υποκατάλογο του HTML αρχείου.
Προσέξτε πως το κείμενο ακολουθεί αμέσως μετα την εικόνα.
Δεσμοί Υπερκειμένου (hypertext links)
Τι είναι ένα URL;
Η πραγματική δύναμη του δικτύου είναι η δυνατότητα να δημιουργεί υπερκείμενους δεσμούς (hypertext links) που αναφέρονται σε πληροφορίες. Αυτές οι πληροφορίες μπορεί να είναι και σε: ιστοσελίδες, γραφικά, ήχους, video, προγράμματα, κ.α.
Το παγκόσμιο δίκτυο (World Wide Web) χρησιμοποιεί ένα πλάνο απο διευθύνσεις γνωστό και ως URL, ή Uniform Resource Locators (και μερικές φορές ως Universal Resource Locator), για να δείχνει τις τοποθεσίες απο διάφορα αντικείμενα. Αυτοί οι υπερκείμενοι δεσμοί (hypertext links), είναι σχεδόν πάντα μπλέ και υπογραμμισμένοι, γνωστοί και ως anchors.
Δεσμοί σε τοπικά αρχεία
Ο απλούστερος δεσμός είναι αυτός που ανοίγει ένα άλλο HTML αρχείο, μέσα στον ίδιο υποκατάλογο ως ιστοσελίδα. Ο κώδικας για αυτή την δυνατότητα είναι ο εξής:
<a href="filename.html">text that responds to link</a>
Το "a" από τον κώδικα είναι από το anchor και το "href" από το "hypertext reference".
Το όνομα του αρχείου θα πρέπει να είναι ένα άλλο HTML αρχείο. Οτιδήποτε κείμενο βρίσκεται μεταξύ απο τους συμβολισμούς < > και πριν το <a> θα είναι το "υπερκείμενο" (hypertext) το οποίο θα εμφανίζεται υπογραμμισμένο και "hyper."
Δεσμοί σε γραφικά
Με την anchor ετικέτα , μπορείτε επίσης να δημιουργήσετε δεσμό με αρχείο γραφικών. Όταν ο δεσμός θα επιλεχθεί, θα κατεβάσει το αρχείο με το γραφικό και θα εμφανιστεί ότι περιέχει το αρχείο, απο μόνο του σε άδεια σελίδα.
Ο απλούστερος anchor δεσμός είναι αυτός που καλεί το αρχείο, στον ίδιο υποκατάλογο που βρίσκεται και η ιστοσελίδα. Ο κώδικας είναι ο εξής:
<a href="filename.gif">text that responds to link</a>
όπου filename.gif είναι το όνομα της GIF εικόνας.
Δεσμοί με άλλους υποκαταλόγους
Η anchor ετικέτα επίσης μπορεί να δημιουργήσει δεσμό μεταξύ αρχείων που βρίσκονται σε διαφορετικούς υποκαταλόγους. Για παράδειγμα, θα βάλουμε όλα τα αρχεία γραφικών σε ξεχωριστό υποκατάλογο, με όνομα pictures. Αυτή η ενέργεια είναι βολική για την οργάνωση του site σας. Ο κώδικας είναι ο εξής:
<a href="pictures/msh.gif">toppled over like toys</a>
HTML για υπερσυνδέσμους στο Internet
Η HTML για το σύνδεσμο προς κάποιο στοιχείο στο Internet είναι:
<a href="URL">Keimeno Ypersindesmou</a>
όπου URL είναι η πλήρης Uniform Resource Locator, σε εισαγωγικά, δηλαδή η διεύθυνση του Internet site στο οποίο θέλετε να στείλετε το χρήστη. Το κείμενο Κείμενο Υπερσυνδέσμου είναι τι θα εμφανιστεί ως υπερκείμενο στον browser (συνήθως, αλλά όχι πάντα, με μπλε υπογραμμισμένα γράμματα). Όταν ο χρήστης κάνει κλικ στο σύνδεσμο, ο browser θα τους συνδέσει με το Internet site που υποδεικνύει η URL. Να θυμάστε οτι μια URL μπορεί να είναι ο σύνδεσμος προς έναν άλλο World Wide Web (WWW) server, Gopher server, FTP site, ή οποιοδήποτε αρχείο κείμενου, εικόνας, ήχου ή βίντεο, που βρίσκεται σε κάποιον server.
Πηγή : http://www.it.uom.gr/project/html2/main.html
Σχόλια
Δημοσίευση σχολίου