Η γλώσσα HTML συνήθως χρησιμοποιεί μεταβλητό μέγεθος γραμμάτων ή απόστασης μεταξύ των γραμμάτων και των γραμμών.
Αυτό όμως δεν το θέλουμε όταν παρουσιάζουμε κείμενο ως κώδικα υπολογιστή (computer code). Στην κατασκευή ιστοσελίδων είναι συχνή η ανάγκη να παρουσιάσουμε κώδικα υπολογιστή σε μια ιστοσελίδα. Ας υποθέσουμε για παράδειγμα οτι έχουμε αναλάβει να κατασκευάσουμε μια ιστοσελίδα με βοηθήματα για μια γλώσσα προγραμματισμού.
Οι ετικέτες <kbd>, <samp>, και <code> χρησιμοποιούνται για να παρουσιάσουμε κείμενο με σταθερό μέγεθος γραμμάτων και σταθερή απόσταση μεταξύ των γραμμάτων και των γραμμών.
Η ετικέτα <kbd>
Η ετικέτα <kbd> εκφράζει είσοδο από το πληκτρολόγιο.
Ακολουθεί παράδειγμα που δείχνει τη χρήση της ετικέτας <kbd>:
<!DOCTYPE html>
<html>
<body>
<p>The kbd element represents keyboard input:</p>
<p><kbd>File | Open…</kbd></p>
</body>
</html>
Και εδώ φαίνεται το αποτέλεσμα στο browser:
Η ετικέτα <samp>
Η html ετικέτα <samp> εκφράζει την έξοδο ενός προγράμματος υπολογιστή.
Το ακόλουθο παράδειγμα παρουσιάζει τον τρόπο με τον οποίο χρησιμοποιούμε την ετικέτα <samp>:
<!DOCTYPE html>
<html>
<body>
<p>The samp element represents sample output from a computer program:</p>
<samp>
demo.example.com login: Apr 12 09:10:17
Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189
</samp>
</body>
</html>
Δείτε εδώ το αποτέλεσμα:
Η ετικέτα <code>
Η html ετικέτα <code> χρησιμοποιείται για να παρουσιάζουμε τον πηγαίο κώδικα μιας οποιασδήποτε γλώσσας προγραμματισμού.
Στη συνέχεια παρουσιάζουμε ένα παράδειγμα στο οποίο φαίνεται ξεκάθαρα πως να χρησιμοποιήσετε την ετικέτα <code>:
<!DOCTYPE html>
<html>
<body>
<p>Programming code example:</p>
<code>
var x = 5;
var y = 6;
document.getElementById(“demo”).innerHTML = x + y;
</code>
</body>
</html>
Εδώ αξίζει τον κόπο να παρατηρήσουμε οτι η ετικέτα <code> αγνοεί τόσο την αλλαγή γραμμής όσο και τις κενές σειρές.
Για να αποφύγουμε αυτό το πρόβλημα μπορούμε να χρησιμοποιήσουμε την ετικέτα <code> μέσα σε μια ετικέτα <pre> όπως φαίνεται στο παρακάτω παράδειγμα:
<!DOCTYPE html>
<html>
<body>
<p>The code element does not preserve whitespace and line-breaks.</p>
<p>To fix this, you can put the code element inside a pre element:</p>
<pre>
<code>
var x = 5;
var y = 6;
document.getElementById(“demo”).innerHTML = x + y;
</code>
</pre>
</body>
</html>
Η ετικέτα <var>
Η html ετικέτα <var> χρησιμοποιείται για να παρουσιάζουμε μεταβλητές.
Στη συνέχεια έχουμε ένα παράδειγμα που θα σας βοηθήσει να κατανοήσετε την ετικέτα <var>:
<!DOCTYPE html>
<html>
<body>
<p>Einstein wrote: <var>E</var> = <var>m</var><var>c</var><sup>2</sup>.</p>
</body>
</html>
Κατασκευή ιστοσελίδων
Η Παρουσίαση κώδικα υπολογιστή στην HTML είναι μια από τις πολλές ιδιαιτερότητες της κατασκευής ιστοσελίδων. Κάθε ενέργεια στην κατασκευή ιστοσελίδων μπορεί να γίνει με πολλούς τρόπους. Για παράδειγμα η παρουσίαση κώδικα μπορεί να γίνει μέσω html με τους τρόπους που περιγράφουμε παραπάνω. Μπορεί όμως να γίνει και με χρήση css. Καλό είναι όποιος ασχολείται με κατασκευή ιστοσελίδων να γνωρίζει όλες τις τεχνολογίες ώστε να επιλέγει την καλύτερη κάθε φορά.
Εάν θέλετε το καλύτερο αποτέλεσμα για μια επαγγελματική ιστοσελίδα τότε δεν έχετε παρά να επικοινωνήσετε με την εταιρεία dreamweaver.gr που εξειδικεύεται στην κατασκευή ιστοσελίδων και έχει τεράστια εμεπιρία και τεχνογνωσία.
