Δημιουργία Ιστοσελίδων
Κεφάλαιο 5 - Σύνδεσμοι και εικόνες
Στο προηγούμενο κεφάλαιο αναφέραμε τον τρόπο με τον οποίο μπορούμε να δημιουργήσουμε λίστες αντικειμένων (αριθμητικές, αλφαβητικές κλπ). Σε αυτό το tutorial θα δείξουμε τρόπους με τους οποίους μπορούμε να προσθέσουμε συνδέσμους όπου να μας οδηγούν σε άλλες ιστοσελίδες και θα δούμε επίσης τον τρόπο με τον οποίο μπορούμε να προσθέσουμε εικόνες είτε απο έξωτερικούς συνδέσμους είτε τοπικά απο φάκελο.
Με τον όρο σύνδεσμος (link) αναφερόμαστε σε ένα αντικείμενο το οποίο μόλις ενεργοποιηθεί (απο τον χρήστη) μας ανακατευθύνει σε κάποια άλλη ιστοσελίδα. Με το HTML tag <a> </a> μπορούμε να προσθέσουμε έναν εξωτερικό σύνδεσμο, παρακάτω ακολουθεί η δομή αυτού του HTML tag.
- Με μόβ χρώμα είναι το HTML tag <a>
- Με κίτρινο χρώμα είναι ο τύπος href=””
- Με πράσινο χρώμα μπαίνει ο σύνδεσμος που θέλουμε να γίνει η ανακατεύθυνση (π.χ. https://codebrakes.gr/)
- Με άσπρο χρώμα μπαίνει το κείμενο που θα εμφανιστεί στην οθόνη του χρήστη.
Είδαμε λοιπόν τον τρόπο με τον οποίο συντάσεται το HTML tag <a>. Ας υποθέσουμε ότι θέλουμε να δημιουργήσουμε μια ιστοσελίδα και θέλουμε να βάλουμε τρείς εξωτερικούς συνδέσμους. Ο πρώτος σύνδεσμος κάνει ανακατεύθυνση στο google.com, ο δεύτερος στο yahoo.com, και ο τρίτος στο bing.com. Στον text editor μας θα γραψουμε τα εξής.
<html>
<head>
<title> Σύνδεσμοι </title>
</head>
<body>
<p> Εξωτερικοί σύνδεσμοι </p>
<br><br>
<a href="https://www.google.com/"> Κλίκ στο google.com </a>
<br><br>
<a href="https://gr.yahoo.com/?p=us"> Κλίκ στο yahoo.com </a>
<br><br>
<a href="https://www.bing.com/?cc=gr"> Κλίκ στο bing.com </a>
</body>
</html>
Όταν ανοίξουμε αυτό το HTML αρχείο θα μας εμφανήσει τα εξής.

Παρατειρούμε ότι όταν κάνουμε hover τον κέρσορα μας βλέπουμε ότι βγάζει την έδειξη “χέρι” που σημαίνει ότι πρόκειται για σύνδεσμο. Αν πατήσουμε σε κάποιον απο αυτούς τους συνδέσμους θα μας ανακατευθύνει στο url που του δώσαμε ως όρισμα μέσα στο <a> tag και συγκεκριμένα μέσα στο όρισμα href.
Σε αυτό το σημείο ας δούμε πως μπορούμε να προσθέσουμε εικόνες σε μια ιστοσελίδα. Για να προσθέσουμε εικόνες χρησιμοποιούμε το HTML tag <img>. Ας δούμε λοιπόν πως αυτό το HTML tag συντάσσεται.
<img src=”#θέση ή σύνδεσμο εικόνας“ alt=”#περιγραφή εικόνα“>
Έστω ότι έχουμε την παρακάτω εικόνα και θέλουμε να την παρουσιάσουμε σε μια ιστοσελίδα.

Η εικόνα αυτή έχει όνομα image1.jpg και βρίσκεται σε έναν φάκελο με όνομα images. Για να την εμφανίσουμε στο HTML αρχείο μας γράφουμε τα εξής.
<html>
<head>
<title> Εικόνες </title>
</head>
<body>
<p> Εικόνες </p>
<br><br>
<img src="./images/image1.jpg" alt="Εικόνα 1">
</body>
</html>
Προσοχή: Το HTML αρχείο που θα φτιάξετε αποθηκεύστε το έναν φάκελο πρίν τον φάκελο images όπου βρίσκεται η εικόνα. Προσέξτε επίσης το όνομα της εικόνας να είναι ακριβώς το ίδιο, δηλαδή αν το όνομα αρχείου εικόνας είναι image1.jpg πρέπει να δώστε στο μονοπάτι ακριβώς το ίδιο όνομα. Σε διαφορετική περίπτωση απλά η εικόνα δεν θα εμφανιστεί στην ιστοσελίδα διότι είτε το μονοπάτι που του λέτε να διαβάσει είναι λάθος είτε το όνομα δεν είναι το ίδιο με αυτό που έχει το όνομα αρχείου εικόνας !!
Αν όλα γίνουν σωστά θα μας εμφανίσει το παρακάτω περιεχόμενο στον browser μας μόλις ανοίξουμε αυτό το HTML αρχείο.

Σε αυτό το σημείο ας δούμε ένα άλλο παράδειγμα. Έστω μια εικόνα όπου βρίσκεται στο διαδίκτυο και θέλουμε να την παρουσιάσουμε στην ιστοσελίδα μας. Για να το κάνουμε αυτό θα επεξεργασούμε το HTML αρχείο μας ως εξής.
<html>
<head>
<title> Προσθήκη εικόνων </title>
</head>
<body>
<p> Εικόνες </p>
<br><br>
<img src="https://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg" alt="Εικόνα 1">
</body>
</html>
Στην παράμετρο src εισάγουμε το link της εικόνας που βρίκαμε στο διαδίκτυο. Αφού το κάνουμε αυτό όταν τρέξουμε την ιστοσελίδα μας θα μας εμφανήσει τα εξής.

Είδαμε πως μπορούμε να προσθέσουμε μια εικόνα είτε τοπικά απο κάποιον φάκελο είτε απο url σε ένα HTML αρχείο. Σε αυτό το σημείο ας δούμε πως μπορούμε να τροποιήσουμε το μέγεθος μιας εικόνας και να αλλάξουμε το πλάτος (width) και το ύψος (height). Ας πάρουμε το προηγούμενο παράδειγμα, έστω ότι θέλουμε να τροποιήσουμε το πλάτος και το ύψος της εικόνας αυτής. Για να το κάνουμε αυτό θα τροποποιήσουμε το HTML αρχείο μας ως εξής.
<html>
<head>
<title> Εικόνες </title>
</head>
<body>
<p> Εικόνες </p>
<br><br>
<img src="https://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg" alt="Εικόνα 1" width="400" height="500">
</body>
</html>
Παρατηρούμε ότι έχουμε προσθέσει δύο επιπλέον παραμέτρους. Η πρώτη παράμετρος είναι το width όπου ορίζει το πλάτος της εικόνας και το height ορίζει το ύψος της εικόνας. Θέτοντας σε αυτές τις παραμέτρους εναν αριθμό ορίζουμε το πλάτος ή το ύψος της εικόνας. Στο παράδειγμα μας ορίζουμε πλάτος (width) 400px και ύψος (height) 500px. Το αποτέλεσμα που θα εμφανιστεί στον browser μας είναι το εξής.

Αφού είδαμε τον τρόπο με τον οποίο μπορούμε να προσθέσουμε εικόνες σε μια ιστοσελίδα και τον τρόπο με τον οποίο μπορούμε να τροποποιήσουμε το μέγεθος μιας εικόνας ας δούμε σε αυτό το σημείο πως μπορούμε να ρυθμίσουμε την θέση μια εικόνα (αριστερά, στο κέντρο και δεξιά) στο HTML αρχείο μας. Ας πάρουμε το προηγούμενο παράδειγμα, έστω ότι θέλουμε να μετακινήσουμε την εικόνα δεξιά για να το κάνουμε αυτό θα τροποποιήσουμε το HTML αρχείο μας ως εξής.
<html>
<head>
<title> Εικόνες </title>
</head>
<body>
<p> Εικόνες </p>
<br><br>
<img src="https://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg" alt="Εικόνα 1" width="400" height="500" align="right">
</body>
</html>
Παρατηρούμε ότι έχουμε προσθέσει την παράμετρο align. Η παράμετρος align παίρνει δύο ορίσματα right όπου μετακινεί την εικόνα δεξιά και left οπου μετακινεί την εικόνα αριστερά. Υπάρχουν βέβαια κι άλλες επιλογές όπως middle, top, bottom αλλά δεν υποστήρίζονται πλέον στους σύγχρονους browsers. Αν ανοίξουμε το HTML αρχείο μας θα μας εμφανήσει τα εξής αποτελέσματα.

Με παρόμοιο τρόπο μπορούμε να μετακινήσουμε την εικόνα στα αριστερά θέτοντας την παράμετρο align με την τιμή left. Για να μετακινήσουμε την εικόνα στο κέντρο χρησιμοποιούμε ξεχωριστό HTML tag το οποίο είναι το <center> </center>. Ας το δούμε πάνω στο προηγούμενο παράδειγμα μας και τι θα μας εμφανήσει στον browser μας όταν ανοίξουμε αυτό το HTML αρχείο.
<html>
<head>
<title> Εικόνες </title>
</head>
<body>
<p> Εικόνες </p>
<br><br>
<center> <!-- Έναρξη μετακίνησης αντικειμένων στο κέντρο -->
<img src="https://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg " alt=" Εικόνα 1" width=" 400" height="500">
</center> <!-- Τερματισμός μετακίνησης αντικειμένων στο κέντρο -->
</body>
</html>
Το αποτέλεσμα που θα εμφανιστεί στον browser μας όταν θα ανοίξουμε το HTML αρχείο μας είναι το εξής.

Τελευταία ενημέρωση: 18/08/2018