Δημιουργία Υπερσυνδέσμου με Button στο Startup Growth Lite

Μαθησιακός Στόχος: 
Όταν ολοκληρώσετε αυτό το μάθημα, θα γνωρίζετε πώς να δημιουργείτε υπερσυνδέσμους, με button ή χωρίς.
Εισαγωγή: 
Η σύνδεση των ιστοσελίδων μας μεταξύ τους γίνεται με υπερσυνδέσμους. Με σημεία δηλαδή, όπου το ποντίκι γίνεται χεράκι και κάνοντας κλικ μεταφερόμαστε σε μία άλλη ιστοσελίδα.
Προαπαιτούμενες γνώσεις: 
Ελάχιστες γνώσεις περί του τι είναι η HTML
Εκπαιδευτικό Περιεχόμενο: 

Υπερσύνδεσμος είναι ένα σημείο της ιστοσελίδας μας, όπου το ποντίκι γίνεται χεράκι και κάνοντας κλικ οδηγούμαστε σε μία άλλη ιστοσελίδα.
Για να δημιουργήσουμε έναν υπερσύνδεσμο, δύο πράγματα πρέπει να προσδιορίσουμε:
1. Πού θα εισαχθεί. Για παράδειγμα σε μία λέξη, ή σε μία εικόνα.
2. Πού θα οδηγεί. Για παράδειγμα σε μία άλλη σελίδα στο δικό μας site ή σε ένα άλλο website.

Έστω ότι σε ένα άρθρο μας, έχουμε γράψει το κείμενο: Για να δείτε το χάρτη όπου θα μας βρείτε, κάντε κλικ εδώ.
Θέλουμε, όταν ο χρήστης κάνει κλικ στη λέξη εδώ, να μεταφέρεται στο άρθρο μας που βρίσκεται στη σελίδα: http://myonlinebusiness.eu.pn/node/3

Χρειαζόμαστε τη γλώσσα HTML και την ετικέτα υπερσυνδέσμων a. Για να εισάγουμε τον υπερσύνδεσμό μας, θα πρέπει να προσθέσουμε την ετικέτα όπως παρακάτω:

Για να δείτε το χάρτη όπου θα μας βρείτε, κάντε κλικ <a href="http://myonlinebusiness.eu.pn/node/3">εδώ </a>

Όπως βλέπετε, κλείσαμε τη λέξη εδώ, σε δύο ετικέτες.
Αριστερά στην <a href="http://myonlinebusiness.eu.pn/node/3">, που καθορίζει πού θα οδηγεί ο υπερσύνδεσμος.
Δεξιά στην </a> που απλά κλείνει την ετικέτα a.

Αν θέλαμε, θα μπορούσαμε να δημιουργήσουμε ένα κουμπί, που να γράφει: Δείτε το χάρτη. Με κλικ στο κουμπί, θα πηγαίναμε πάλι στη σελίδα του χάρτη.
Για το κουμπί αυτό θα έπρεπε να γράψουμε:

<a href="http://myonlinebusiness.eu.pn/node/3" class="more">Δείτε το χάρτη</a>

Δηλαδή, για να γίνει ο υπερσύνεσμός μας κουμπί, απλά προσθέσαμε το class="more"

Αξιολόγηση (πρέπει να έχετε συνδεθεί): 
5
Average: 5 (2 votes)