Links & εικόνες

Σε αυτήν την ενότητα θα δούμε πως μπορούμε να εισάγουμε links και εικόνες...

Για να εισάγουμε ένα link θα πρέπει να γράψουμε τον παρακάτω κώδικα:

<a href="εδώ γράφουμε το πλήρες url">εδώ γράφουμε το κείμενο</a>

Παράδειγμα:

Επισκεφθείτε το <a href="http://www.bookcrossing.com">site του BookCrossing</a>

Το αποτέλεσμα θα είναι:

Επισκεφθείτε το site του BookCrossing


Μπορούμε τώρα να προσθέσουμε μερικά ακόμα πραγματάκια σε αυτό το tag:

Μπορούμε να επιλέξουμε η σελίδα να ανοίγει σε νέο παράθυρο (και όχι στο ίδιο όπως είναι η default παράμετρος). Αυτό γίνεται προσθέτοντας την εντολή target="_blank" μέσα στο tag:

Επισκεφθείτε το <a target="_blank" href="http://www.bookcrossing.com">site του BookCrossing</a>

Επίσης μπορούμε να αφαιρέσουμε την υπογράμμιση:

Επισκεφθείτε το <a style='text-decoration:none;text-underline:none' href="http://www.bookcrossing.com">site του BookCrossing</a>

Επισκεφθείτε το site του BookCrossing

Για να εισάγουμε τώρα μια εικόνα θα χρειαστούμε την παρακάτω σύνταξη:

<img src="εδώ γράφουμε το πλήρες url">

Παράδειγμα:

<img src="http://bookcrossing.com/images/RunningBook33.gif">

Το αποτέλεσμα θα είναι:



Σημείωση: Για να εισάγουμε μια εικόνα θα πρέπει πρώτα να την ανεβάσουμε στο internet, είτε σε κάποιο χαρτοφύλακα (π.χ. briefcase.pathfinder.gr) είτε σε κάποιο online album (π.χ. www.photobucket.com).

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

<a href="http://www.bookcrossing.com"><img src="http://bookcrossing.com/images/RunningBook33.gif"></a>

Το αποτέλεσμα θα είναι:



Και για να αφαιρέσουμε αυτό το ενοχλητικό μπλε περίγραμμα μπορούμε μέσα στο tag της εικόνας να ορίσουμε border="0":

<a href="http://www.bookcrossing.com"><img border="0" src="http://bookcrossing.com/images/RunningBook33.gif"></a>

Το αποτέλεσμα θα είναι:

Πάμε παρακάτω;