Εκμάθηση HTML/Μορφοποίηση κειμένου

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

Το μάθημα αυτό θα περιοριστεί στο πως μπορείτε να φτιάξετε το κείμενό σας όπως εσείς θέλετε σε μια ιστοσελίδα.

Κεφαλίδες

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

<html>
<body>

<h1>Κεφαλίδα μεγέθους 1</h1>
<h2>Κεφαλίδα μεγέθους 2</h2>
<h3>Κεφαλίδα μεγέθους 3</h3>
<h4>Κεφαλίδα μεγέθους 4</h4>
<h5>Κεφαλίδα μεγέθους 5</h5>
<h6>Κεφαλίδα μεγέθους 6</h6>

</body>
</html>

Όπως θα προσέξατε αυτά είναι τα μεγέθη κεφαλίδων που σας δίνει η html, τα οποία μπορούν να μπουν ως τίτλοι κειμένων σας.

Παράγραφοι

Με τον ίδιο τρόπο δοκιμάστε τον παρακάτω κώδικα, για να δείτε πως θα εμφανίζονται οι διάφοροι παράγραφοι που θα έχετε.

<html>
<body>

<p>Πρώτη παράγραφος.</p>
<p>Δεύτερη παράγραφος.</p>
<p>Τρίτη παράγραφος</p>

</body>
</html>

Πρέπει να έχετε υπόψη σας πως άσχετα αν στον κώδικά σας εσείς τα γράφετε σε διαφορετικές γραμμές ή αφήνετε περισσότερο κενό ανάμεσα στις λέξεις, ο φυλλομετρητής δεν θα τα μεταφράσει σε ιστοσελίδα με αυτό τον τρόπο. Για να διατηρήσει την μορφοποίηση που του έχετε δώσει θα πρέπει να το εσωκλείσετε στο tag <pre>.

<html>
<body>
<pre>Αυτό το κείμενο

διατηρεί      την

μορφοποίησή    του.</pre>
</body>
</html>

Σχόλια

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

Το κείμενο αυτό θα εμφανιστεί. <!-- Το κείμενο αυτό δεν θα εμφανιστεί. -->

Τα σχόλια αγνοούνται από τον φυλλομετρητή και δεν εμφανίζονται στην σελίδα.

Στυλ γραμματοσειράς

Φυσικά υπάρχει η δυνατότητα να αλλάξετε την γραμματοσειρά που χρησιμοποιείτε, το χρώμα και το μέγεθός της. Η παράμετρος που προσφέρει αυτές τις δυνατότητες είναι η style. Παρ' όλο που χρησιμοποιείται ακόμα, η παράμετρος αυτή θεωρείται παρωχημένη λόγω της γλώσσας css (Cascading Style Sheets), η οποία δίνει πολύ περισσότερες δυνατότητες στην html.

Ακολουθούν παραδείγματα χρήσης της style.

<html>
<body style="background-color:yellow">
<p style="font-family:courier new; color:red; font-size:20px; text-align:center">Μια παράγραφος</p>
</body>
</html>

Τέλος γραμμής & Οριζόντια γραμμή

Το tag <br /> (break), θα πει στον φυλλομετρητή σας να κατέβει μία γραμμή. Το συγκεκριμένο tag είναι από μόνο του close tag. Προσέξτε την κάθετο / που βρίσκεται στο τέλος αντί της αρχής.

<p>Αυτή είναι<br />μια παρά<br />γραφος με αλλαγή γραμμής</p>

Το tag <hr /> (horizontal line) προσθέτει μια οριζόντια γραμμή στην σελίδα μας. Δοκιμάστε τον ακόλουθο κώδικα.

<html>
<body>
<p>Μια παράγραφος</p>
<hr />
<p>Άλλη μια παράγραφος</p>
<hr />
<p>Άλλη μια παράγραφος</p>
</body>
</html>

Ιδιότητες γραμμάτων

Φυσικά δεν θα μπορούσαν να λείπουν και διάφορες ιδιότητες όπως τα έντονα, πλάγια, υπογραμμισμένα κτλ. γράμματα.

<html>
<body>

<p><b>Έντονο κείμενο</b></p>
<p><i>Πλάγιο κείμενο</i></p>
<p><u>Υπογραμμισμένο κείμενο</u></p>
<p><del>Διεγραμμένο κείμενο</del></p>
<p><big>Μεγάλο κείμενο</big></p>
<p><small>Μικρό κείμενο</small></p>
<p>Αυτή είναι μια <sub>υπόστιξη</sub> και μια <sup>επιγραφή</sup></p>

<p><code>Αυτή η μορφοποίηση χρησιμοποιείτε για να δείξουμε κώδικα</code></p>
<p><var>Για να δείξουμε μεταβλητές ενός κώδικα</var></p>
<p><kbd>Αυτή για να δείξουμε απλό κείμενο</kbd></p>
<p><tt>Κείμενο τηλέτυπου</tt></p>

<p><address>
Κάποιος<br />
Ταχυδρομικός Κώδικας 01234<br />
Σε ένα νησί στο Αιγαίο<br />
Ελλάδα
</address></p>

<p><acronym title="Ευρωπαϊκή Ένωση">ΕΕ</acronym> 
<!-- Όταν περάσετε το ποντίκι πάνω από αυτό το 
κείμενο θα εμφανιστεί επεξήγηση. --></p>

<p><bdo dir="rtl">
Το κείμενο αυτό θα εμφανιστεί δεξιόστροφα. Καλό διάβασμα!
</bdo></p>

<p><blockquote>
Μεγάλη παράθεση
</blockquote></p>
<p><q>Μικρή παράθεση</q>

</body>
</html>

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