Βασικά στοιχεία της HTML >Επιπλέον δυνατότητες

Κείμενο σε εικόνα, Μαρκίζα, Προσθήκη ημερομηνίας και ώρας, Μεταβαλλόμενη εικόνα, Αναδυόμενο παράθυρο

Θα παρουσιάσουμε εδώ μερικές χρήσιμες επιπλέον δυνατότητες, που δεν αποτελούν παρά ένα ελάχιστο τμήμα των πραγματικών τεράστιων δυνατοτήτων που έχει η HTML.

Κείμενο σε εικόνα
Ξεκινάμε με τη δυνατότητα τοποθέτησης κειμένου πάνω σεμια εικόνα. Φυσικά μπορούμε να επέμβουμε,μέ κάποιο σχεδιαστικό λογισμικό και να βάλουμε το κείμενο πάνω στη εικόνα, αλλά δεν αναφερόμαστε σε αυτή την περίπτωση. Η ιδέα λοιπόν είναι να φτιάξουμε ένα πίνακα με ένα μόνο κελλί,όπου η εικόνα μας θα άποτελεί εικόνα φόντου. Βέβαια, θα πρέπει να προσέξουμε το μέγεθος του κελιού να είναι όσο ακριβώς το αντίστοιχο της εκόνας και να μηδενίσουμε τις τιμές των παραμέτρων CELLPADDING, BORDER και CELLSPACING.

Οπότε, ο παρακάτω κώδικας:

<TABLE border="0" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD WIDTH="580" HEIGHT="350" BACKGROUND="WORLDMAP.JPG" ALIGN="center">
<FONT SIZE="+2" COLOR="red">ΠΑΓΚΟΣΜΙΟΣ ΧΑΡΤΗΣ</font>
</TD>
</TR>
</TABLE>

θα δώσει:

ΠΑΓΚΟΣΜΙΟΣ ΧΑΡΤΗΣ


ΠΡΟΣΘΕΤΕΣ ΔΥΝΑΤΟΤΗΤΕΣ ΤΗΣ HTML

Μαρκίζα
Ο κωδικός <MARQUEE> προκαλεί την κύλιση κειμένου κατά μήκος της οθόνης. Τα ορίσματα και οι τιμές που παίρνει ο κωδικός αυτός είναι:



Η παραπάνω μαρκίζα αντιστοιχεί στον κώδικα:

<MARQUEE BEHAVIOR="scroll" DIRECTION="left" LOOP="infinite"
SCROLLAMOUNT="6" SCROLLDELAY="150" BGCOLOR="blue">
<FONT SIZE="+1" COLOR="red">ΠΡΟΣΘΕΤΕΣ ΔΥΝΑΤΟΤΗΤΕΣ ΤΗΣ HTML</FONT>
</MARQUEE>

Προσθήκη ημερομηνίας και ώρας
Οι τρεις τελευταίες δυνατότητες που θα αναφέρουμε χρησιμοποιούν τα λεγόμενα java scripts. Αποτελούν μικρά προγράμματα γραμμένα στην ομόνυμη γλώσσα. Η ενσωμάτωση αυτών των προγραμμάτων γίνεται με τον κωδικό <SCRIPT>. Για παράδειγμα, για την προσθήκη ημερομηνίας και ώρας γράφουμε τον παρακάτω κώδικα στο σημείο που θέλουμε να εμφανίζεται:

<SCRIPT type="text/javascript">
document.write(Date())
</SCRIPT>

οπότε και εμφανίζεται:



Μεταβαλλόμενη εικόνα
Μπορούμε να αλλάξουμε μιά εικόνα όταν ο χρήστης περνά το ποντίκι από πάνω της (rollover). Αυτό πολλές φορές βοηθά για τον προσδιορισμό του στοιχείου που επιλέγεται. Για παράδειγμα, ας υποθέσουμε ότι έχουμε την εικόνα του παγκόσμιου χάρτη που χρησιμοποιήσαμε στην προηγούμενη ενότητα και θέλουμε, όταν το ποντίκι πενάει από πάνω της, να φαίνονται οι περιοχές που ορίστηκαν για τη δημιουργία του "χάρτη". Φυσικά πρέπει να φτιάξουμε μια δεύτερη εικόνα, παρόμοια με την πρώτη όπου φαίνονται οι περιοχές αυτές. Γράφουμε τον κώδικα:

<a href="maps.html" onmouseover="document.rollover.src='MAP_MAPED.jpg'"
onmouseout="document.rollover.src='WORLDMAP.JPG'">
<img src="WORLDMAP.JPG" name="rollover"></a>

όπου WORLDMAP.JPG είναι η βασική εικόνα (img src="WORLDMAP.JPG"), MAP_MAPED.jpg είναι η εικόνα όπου έχουμε σχεδιάσει τις περιοχές και ενεργοποιείται ακριβώς όταν το ποντίκι είναι πάνω της (onmouseover="document.rollover.src='MAP_MAPED.jpg'" ). Η δεύτερη φορά που εμφανίζεται η αρχική εικόνα δηλώνει ότι μόλις το ποντίκι φύγει από την περιοχή ξαναεμφανίζεται η αρχική (onmouseout="document.rollover.src='WORLDMAP.JPG'"). Το name="rollover" δηλώνει το όνομα της εικόνας και είναι ακριβώς η λέξη που εμφανίζεται στο document.rollover. Τέλος, βλέπετε ότι με το πάτημα του κουμπιού του ποντικιού οδηγούμαστε στο αρχειο maps.html (a href="maps.html"). Μεγάλη προσοχή δώστε στα διπλά και μονά εισαγωγικά.


Αναδυόμενο παράθυρο
Στην περίπτωση αυτή, μόλις ο χρήστης ενεργοποιήσει την ιστοσελίδα εμφανίζεται ένα παράθυρο (του οποίου ορίζουμε τις διαστάσεις), όπου μπορούμε να έχουμε χρήσιμες πληροφορίες. Ο κώδικας αποτελεί συμπλήρωμα (όρισμα) στον κωδικό <BODY>:



<BODY ONLOAD="javascript:window.open('roll_win.html','win','height=250,width=250')">
όπου roll_win.html είναι το αρχείο που θα εμφανίζεται στο νέο παράθυρο, win το όνομα του παραθύρου, ενώ στα height και width δηλώνουμε το πλάτος και το ύψος του παραθύρου σε pixels. Κάνοντας κλικ εδώ θα μεταφερθείτε σε μια ιστοσελίδα όπου ανοίγει ένα ένθετο παράθυρο πάνω αριστερά.

Επόμενη ενότητα                           Προηγούμενη ενότητα