Μετά απο 15 χρόνια γνωριμίας με το διαδύκτιο και άλλα τόσα με τους υπολογιστές, προσφέρω βοήθεια σε γνωστούςκαι φίλους σε μια ευρεία γκάμα θεμάτων όπως τεχνικά θέματα, δημιουργίας ιστοσελίδων, CSS, Microsoft Windows, προγραμματισμού και γενικά ότι περνάει απ' το χέρι μου.

Πως Μπορώ να Παραθέσω Κώδικα Στην Ιστοσελίδα Μου;

Αντιμετωπίζω το εξής πρόβλημα και χρειάζομαι τη βοήθεια σου. Διατηρώ μια ιστοσελίδα και θα ήθελα να παραθέσω κώδικα html στους αναγνώστες μου, ως παράδειγμα. Πώς όμως θα γίνει αυτό αφού ο κώδικας μετατρέπεται απο τον browser;

Η απάντηση του Michel:

Αυτό είναι ένα αρκετά καλό ερώτημα και χαίρομαι που μου δίνεις την ευκαιρία να το απαντήσω.

Όντως ο προβληματισμός σου είναι ορθός, αφού αν σκεφτούμε πως ο browser του επισκέπτη της ιστοσελίδας μας αυτομάτως θα «μετατρέψει» τον html κώδικα στο οπτικό του αποτέλεσμα, πως μπορούμε τότε εμείς να παραθέσουμε κώδικα για τον επισκέπτη μας;

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

Ας υποθέσουμε για παράδειγμα, πως θέλεις να παραθέσεις κάπου στην ιστοσελίδα σου τον εξής κώδικα..

<a href="http://www.daskalemata.com">Δωρεάν Βοηθήματα</a>

Ο πιο πάνω κώδικας, εμφανίζει ένα σύνδεσμο προς την αρχική ιστοσελίδα αυτού του website (www.daskalemata.com) με κείμενο "Δωρεάν Βοηθήματα". Πώς όμως τα κατάφερα και ο browser σου δεν έχει μετατρέψει τον κώδικα στο οπτικό του αποτέλεσμα δηλαδή στον σύνδεσμο;

Η απάντηση είναι αρκετά απλή και είναι η εξής.

Αφού αρχικά έφτιαξα τον κώδικα που ήθελα να σου παραθέσω, στη συνέχεια το μόνο που έκανα ήταν να αντικαταστήσω όλα τα '<' που υπήρχαν στον κώδικα με '<'. Με αυτό τον τρόπο, όταν φτάσει η στιγμή που ο browser του επισκέπτη θα διαβάσει τον κώδικα, αυτό που θα κάνει είναι να μετατρέψει τα '<' στο αντίστοιχο τους, δηλαδή σε '<' και στη συνέχεια θα προχωρήσει παρακάτω, αφήνοντας έτσι τα υπόλοιπα κομμάτια του κώδικα ανέπαφα αφού θα αγνοήσει πως πρόκειται για ενιαία html εντολή!

Δηλαδή, στο πιο πάνω παράδειγμα για να σου παραθέσω το συγκεκριμένο απόσπασμα του κώδικα, ο html κώδικας που έγραψα ήταν κάπως έτσι..

<a href="http://www.daskalemata.com">Δωρεάν Βοηθήματα</a>

Μέχρις εδώ όλα ωραία! Υπάρχει όμως ακόμη ένα ζήτημα..

Επειδή αρκετά συχνά, ο κώδικας που θα θέλεις να παραθέσεις θα είναι αρκετά μεγάλος και περίπλοκος (στο πιο πάνω παράδειγμα χρησιμοποίησα σκόπιμα μικρό κομμάτι κώδικα), η αντικατάσταση μπορεί να γίνει μαζικά είτε στο Notepad, είτε στο αγαπημένο σου πρόγραμμα επεξεργασίας html μέσω του «Replace» ή ακόμη καλύτερα μέσω του «Replace All».

Σε περίπτωση που δουλεύεις στο Notepad, αυτό που έχεις να κάνεις είναι να πας απ' το μενού στο 'Edit' -> 'Replace..'. Στη συνέχεια να πληκτρολογήσεις στο 'Find what:' το '<' και στο 'Replace with:' το '<'. Μετά να κάνεις κλίκ στο 'Replace All' και τότε ο κώδικας θα είναι έτοιμος για χρήση!

Πρίν το τέλος, κάτι σημαντικό! Πρόσεξε μη τυχών ξεχαστείς και αντικαταστήσεις τα '<' σε όλο τον κώδικα της ιστοσελίδας σου! Καλύτερα απομόνωσε σε ένα νέο αρχείο τον κώδικα που θέλεις να παραθέσεις, κάνε τις πιο πάνω τροποποιήσεις με ασφάλεια, και όταν τελειώσεις μπορείς να τον βάλεις και αυτόν μαζί με τον υπόλοιπο μέρος της ιστοσελίδας σου.

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

Αυτό ήταν όλο. Τώρα ξέρεις τον τρόπο. Τα λέμε σύντομα για ότι άλλο χρειαστείς!

Μοιράσου τώρα αυτό το βοήθημα με φίλους σου στο: