Γράφοντας HTML | Σχετικά | Παραπομπές | Ετικέτες |Μαθήματα | Προηγούμενο | Επόμενο |

23.Περισσότερα Για Εικόνες & Λίστες

Σημείωση: Αν δεν έχετε τα αρχεία των προηγούμενων μαθημάτων, μπορείτε να τα κατεβάσετε τώρα.

• Εικόνες-Υπερσύνδεσμοι χωρίς περιθώρια
• Βάζοντας Περιθώρια Στις Εικόνες
• Κουκίδες για Μη Αριθμημένες Λίστες
• Στυλ και Τιμές για Αριθμημένες Λίστες

Εικόνες-Υπερσύνδεσμοι χωρίς περιθώρια

Στο μάθημα 8 είδαμε πως μπορούμε να κάνουμε κάποιο αρχείο γραφικών να λειτουργεί σαν υπεσύνδεσμος σε κάποια άλλη σελίδα ή σε κάποια μεγαλύτερου μεγέθους εικόνα. Θα παρατηρήσατε οτι ο web browser βάζει περιθώρια γύρω απο την εικόνα, για να καταλαβαίνει οτι είναι υπερσύνδεσμος, όπως και οι κανονικοί υπεσύνδεσμοι:

λειτουργεί σαν κάθε άλλο κείμενο υπερσυνδέσμου.

Ωστόσο το περιθώριο μπορεί να είναι σε κάποιες περιπτώσεις ενοχλητικό. Άλλωστε ο χρήστης μπορεί εύκολα να καταλάβει πότε κάποια εικόνα είναι υπερσύνδεσμος παρατηρώντας απλά την αλλαγή του δείκτη του ποντικιού, όταν περνάει απο πάνω (συνήθως μετατρέπεται σε χέρι).

Έτσι μπορείτε να εξαλείψετε το περιθώριο προσθέτοντας στην ετικέτα <img...> το χαρακτηριστικό:

<a href="bigpict.gif"><img src="lilpict.gif" border=0>

Σε αυτό το παράδειγμα η εικόνα lilpict.gif λειτουργεί σαν υπεσύνδεσμος σε μια πιο μεγάλη εικόνα, την bigpict.gif. Το χαρακτηριστικό border=0 δεν παίζει κανένα ρόλο εκτός και αν η ετικέτα <img..> περιλαμβάνεται στην ετικέτα <a href=...</a>.

Στο site Volcano Web έχουμε δύο τέτοιους υπερσυνδέσμους. Ο πρώτος είναι στο αρχείο usa.html, όπου η μικρή εικόνα μας οδηγεί σε μια ίδια μεγαλύτερη. Ο δεύτερος είναι η εικόμα με το βέλος στο αρχείο msh.html, που μας οδηγεί πίσω στο μάθημα.

1. Ανοίξτε διαδοχίκα τα αρχεία usa.html και msh.html στον κειμενογράφο.
2. Εντοπίστε το τμήμα που έχουμε μια εικόνα που οδηγεί σε κάτι άλλο.
3. Αλλάξτε κάθε ετικέτα <img src=....> που είναι υπερσύνδεσμος έτσι ώστε να περιλαμβάνει το χαρακτηριστικό border=0 attribute. Για παράδειγμα, στο αρχείο msh.html file it should look like:

     <a href="usa.html">
     <img src="../pictures/left.gif" alt="** " border=0>
     Return to <i>Volcano Web</i></a>

4. Σώστε τις αλλαγές και  ανοίξτε τα αρχεία usa.html και msh.html στο web browser.

Βάζοντας Περιθώρια Στις Εικόνες

Και τώρα θα σας δείξουμε πως να κάνετε ακριβώς το αντίθετο με τα παραπάνω, δηλαδή πως να βάζετε περιθώρια! Χρησιμοποιώντας το χαρακτηριστικό border=X μπορείτε να προσθέσετε περιθώριο στην εικόνα. Ο αριθμός Χ που βάζετε, καθορίζει το πάχος του περιθωρίου σε pixels:

Περιθώριο πάχους 8 pixel σε εικόνα

<IMG SRC="pictures/disk.gif" WIDTH=48 HEIGHT=40 border=8>

Σημειώστε οτι το χρώμα του περιθωρίου είναι το χρώμα του κειμένου που έχουμε καθορίσει στην ετικέτα BODY.(δες Μάθημα 17)

Το ίδιο μπορείτε να κάνετε σε μια εικόνα-υπερσύνδεσμο:

Περιθώριο πάχους 8 pixel σε εικόνα, που οδηγεί σε μια άλλη σελίδα

<A HREF="page.html">
<IMG SRC="pictures/disk.gif" WIDTH=48 HEIGHT=40 border=8></a>

Σημειώστε οτι το χρώμα του περιθωρίου είναι το χρώμα των υπερσυνδέσμων που έχουμε καθορίσει στην ετικέτα BODY.(δες Μάθημα 17).

Κουκίδες για Μη-Αριθμημένες Λίστες

Στο  Μάθημα 7 πρωτοδημιουργήσαμε μη αριθμημένες λίστες με την ετικέτα <ul>...</ul>. Ο browser αυτόματα βάζει μια κουκίδα μπροστά απο κάθε στοιχείο της λίστας. Σε ορισμένους browsers μπορείτε να καθορίσετε 3 διαφορετικά είδη κουκίδων προσθέτοντας στην ετικέτα <ul>:

<ul type=xxxx>

όπου xxxx μπορεί να είναι:

• type=circle
• type=square
• type=disc [Προκαθορισμένη κουκίδα αν δεν οριστεί αλλιώς]

Και μπορείτε να κάνετε ακόμη περισσότερα. Μπορείτε να αλλάξετε το χαρακτηριστικό type μέσα στη λίστα, προσθέτοντας το στην ετικέτα <li>:

HTML	Αποτέλεσμα
<ul type=square> <li>Στοιχείο 1 <li>Στοιχείο 2 <li>Στοιχείο 3 <li type=circle>     Τι λέτε για αυτές τις κουκίδες; <li>Άλλο ένα στοιχείο <li>και άλλο ένα <li type=disc>     Τι λέτε για αυτές τις κουκίδες; </ul>	Στοιχείο 1 Στοιχείο 2 Στοιχείο 3 Τι λέτε για αυτές τις κουκίδες; Άλλο ένα στοιχείο και άλλο ένα Τι λέτε για αυτές τις κουκίδες;

Σημειώστε οτι ο τύπος κουκίδας που καθορίζετε απο την ετικέτα <li type=xxxx> χρησιμοποιείτε απο όλες τις ακόλουθες <li> ετικέτες εως να οριστεί ένας άλλος τύπος.

Στη συνέχει θα αλλάξουμε τις κουκίδες που χρησιμοποιούμε στη σελίδα Research Projects (αρχείο proj.html).

1. Ανοίξτε το αρχείο proj.html στον κειμενογράφο σας.
2. Η πρώτη λίστα στο αρχείο αυτό είναι μια αριθμημένη λίστα (<ol>...</ol>) αλλά θα την αλλάξουμε σε μη αριθμημένη με κουκίδες type=circle. Αλλάξτε την HTML για τη λίστα ώστε να μοιάζει:

   <ul type=circle>
   <li>Type of volcano
   <li>Geographic location
   <li>Name, distance, and population of nearest major city
   <li>Date of most recent eruption and date of most destructive
         eruption
   <li>Other events associated with the last eruption (earthquakes,
         floods, mudslides, etc)
   </ul>

3. Σώστε τις αλλαγές και φορτώστε ξανά τη σελίδα στον browser σας. Αν θέλετε συγκρίνετε τη δουλειά σας με ένα δείγμα για το πως θα πρέπει να μοιάζει.

Στυλ και Τιμές για Αριθμημένες Λίστες

Όταν πρωτοδημιουργήσαμε μια αριθμημένη λίστα <ol>...</ol> στο Μάθημα 7 είδαμε οτι ο browser αυτόματα αριθμίζει τα στοιχεία τις λίστας, βάζοντας έναν αριθμό για κάθε ετικέτα <li>. Τι γίνεται στην περίπτωση που δε θέλουμε να χρησιμοποιήσουμε αραβικούς αριθμούς (1,2,3...); Η απάντηση είναι η type=x ιδιότητα για τις ετικέτες <ol> και <li>:

Δείτε ένα παράδειγμα χρήσης αριθμημένης λίστας μέσα σε αριθμημένη λίστα - με την ιδιότητα type μπορούμε να έχουμε λίστες της μορφής:

1. Cheese in Pre-Historic time
   1. Africa
      1. Afar Triangle
      2. East Coast
   2. Asia
   3. Europe
      1. France
         1. Cave paintings depicting cheese harvesting
         2. Burial rituals inferred from dried cheese remnants
      2. British Isles
   4. North America
2. Cheese in the Middle Ages
   1. King Arthur's Longhorn
   2. Sharp Cheddar for the Crusades
3. Cheese in the Space Age

Ένα άλλο που μπορούμε να κάνουμε με τις λίστες είναι να τις κάνουμε να αρχίζουν απο κάποια άλλη τιμή, εκτός απο το 1. Για το σκοπό αυτό προσθέτουμε το χαρακτηριστικό start=y στην ετικέτα <ol>.

Και τέλος μπορείτε να αλλάξετε την αριθμητική ακολουθία μέσα σε μια λίστα προσθέτοντας την ιδιότητα value=z στην ετικέτα <li>. Δείτε το ακόλουθο παράδειγμα:

HTML	Αποτέλεσμα
<ol type=A start=5><i> Important Cheese Laws</i> <li>Cheese Curing Act of 1905 <li>Milk Content Ruling of 1923 <p> <li value=12>Cheese Import Tariff of 1942 <li>Cheese Freshness Codes of 1942 <p> <li value=1>Cheese Values Act of 1789	Important Cheese Laws Cheese Curing Act of 1905 Milk Content Ruling of 1923 Cheese Import Tarif of 1942 Cheese Freshness Codes of 1942 Cheese Values Act of 1789

Στην συνέχεια: 24. Χάρτες Γραφικών (Image Maps)

Γράφοντας HTML | Σχετικά | Παραπομπές | Ετικέτες |Μαθήματα | Προηγούμενο | Επόμενο |