Παράγραφοι HTML
Μια παράγραφος ξεκινά πάντα σε μια νέα γραμμή και συνήθως αποτελείται από ένα μπλοκ κειμένου.
Παράγραφοι HTML
Η ετικέτα <p> ορίζει μια παράγραφο.
Μια παράγραφος ξεκινά πάντα σε μια νέα γραμμή και οι περιηγητές αυτόματα προσθέτουν κάποιο κενό χώρο (ένα περιθώριο) πριν και μετά από μια παράγραφο.
Παράδειγμα:
<!DOCTYPE html>
<html>
<head>
<title>Το πρώτο μου έγγραφο HTML</title>
</head>
<body>
<p>Αυτή είναι μια παράγραφος.</p>
<p>Αυτή είναι μια άλλη παράγραφος.</p>
</body>
</html>
Στο παραπάνω παράδειγμα, δύο παράγραφοι ορίζονται χρησιμοποιώντας την ετικέτα <p>. Κάθε παράγραφος ξεκινά σε μια νέα γραμμή και οι περιηγητές αυτόματα προσθέτουν ένα περιθώριο πριν και μετά από κάθε παράγραφο.
Εμφάνιση HTML Δεν μπορείτε να είστε βέβαιοι για το πως θα εμφανιστεί το HTML.
Μεγάλες ή μικρές οθόνες και αλλαγές μεγέθους παραθύρου θα δημιουργήσουν διαφορετικά αποτελέσματα.
Με το HTML, δεν μπορείτε να αλλάξετε την εμφάνιση προσθέτοντας επιπλέον κενά ή επιπλέον γραμμές στον κώδικα HTML σας.
Ο περιηγητής θα αφαιρέσει αυτόματα οποιοδήποτε επιπλέον κενό και γραμμή όταν η σελίδα εμφανιστεί:
[adinserter block=”2″]
Παράδειγμα:
<!DOCTYPE html>
<html>
<head>
<title>Το πρώτο μου έγγραφο HTML</title>
</head>
<body>
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
<p>
The number of lines in a paragraph depends on the size of the browser window. If you resize the browser window, the number of lines in this paragraph will change.
</p>
</body>
</html>
Στο παραπάνω παράδειγμα, οι επιπλέον γραμμές και τα πολλαπλά κενά στη μέση της παραγράφου θα αφαιρεθούν από τον περιηγητή και η παράγραφος θα εμφανιστεί χωρίς αυτά.
Οριζόντιες γραμμές HTML
Η ετικέτα <hr> ορίζει ένα θεματικό διάλειμμα σε μια σελίδα HTML και συνήθως εμφανίζεται ως οριζόντια γραμμή.
Το στοιχείο <hr> χρησιμοποιείται για να χωρίσει το περιεχόμενο (ή να ορίσει μια αλλαγή) σε μια σελίδα HTML:
Παράδειγμα:
<!DOCTYPE html>
<html>
<head>
<title>Το πρώτο μου έγγραφο HTML</title>
</head>
<body>
<p>Αυτή είναι μια παράγραφος.</p>
<hr />
<p>
Αυτή είναι μια διαφορετική παράγραφος που ακολουθεί την οριζόντια γραμμή.
</p>
</body>
</html>
Στο παραπάνω παράδειγμα, χρησιμοποιούμε την ετικέτα <hr> για να δημιουργήσουμε μια οριζόντια γραμμή που χωρίζει τις δύο παραγράφους.
[adinserter block=”3″]
Αλλαγές γραμμής HTML
Το στοιχείο HTML <br> ορίζει μια αλλαγή γραμμής.
Χρησιμοποιήστε το <br> αν θέλετε μια αλλαγή γραμμής (μια νέα γραμμή) χωρίς να ξεκινάτε μια νέα παράγραφο:
Παράδειγμα:
<!DOCTYPE html>
<html>
<head>
<title>Το πρώτο μου έγγραφο HTML</title>
</head>
<body>
<p>
Αυτή είναι η πρώτη γραμμή.<br />
Αυτή είναι η δεύτερη γραμμή.<br />
Και αυτή είναι η τρίτη γραμμή.
</p>
</body>
</html>
Στο παραπάνω παράδειγμα, χρησιμοποιούμε το στοιχείο <br> για να δημιουργήσουμε αλλαγές γραμμής χωρίς να ξεκινάμε μια νέα παράγραφο.
Το πρόβλημα με τα ποιήματα
Αυτό το ποίημα θα εμφανιστεί σε μια μόνο γραμμή:
Αν θέλετε να εμφανίσετε ένα ποίημα σε HTML και θέλετε να διατηρήσετε τη δομή του, χρειάζεται να χρησιμοποιήσετε το στοιχείο <br> για να προσθέσετε αλλαγές γραμμής στα σημεία όπου θα έπρεπε να υπάρχει παύλα ή στίξη. Μπορείτε επίσης να χρησιμοποιήσετε την ετικέτα <p> για κάθε στροφή του ποιήματος:
Παράδειγμα:
<!DOCTYPE html>
<html>
<head>
<title>Το πρώτο μου έγγραφο HTML</title>
</head>
<body>
<p>
Από το βουνό ως τη θάλασσα<br />
η φύση κρύβει την ομορφιά της<br />
πεύκα, βράχοι, κύματα, άμμος<br />
σκηνικά ενός ατελείωτου θεάτρου
</p>
</body>
</html>
Στο παραπάνω παράδειγμα, χρησιμοποιούμε το στοιχείο <br> για να δημιουργήσουμε αλλαγές γραμμής σε κατάλληλα σημεία στο ποίημα. Μπορείτε να προσαρμόσετε αυτό το παράδειγμα ανάλογα με το ποίημα που θέλετε να εμφανίσετε.
[adinserter block=”4″]
Λύση – Το στοιχείο <pre> στο HTML
Το στοιχείο HTML <pre> ορίζει προ-μορφοποιημένο κείμενο.
Το κείμενο μέσα σε ένα στοιχείο <pre> εμφανίζεται σε ένα πλαίσιο σταθερού πλάτους γραμματοσειράς (συνήθως Courier), και διατηρεί τόσο τα κενά όσο και τις αλλαγές γραμμής:
Παράδειγμα:
<!DOCTYPE html>
<html>
<head>
<title>Το πρώτο μου έγγραφο HTML</title>
</head>
<body>
<pre>
Από το βουνό ως τη θάλασσα
η φύση κρύβει την ομορφιά της
πεύκα, βράχοι, κύματα, άμμος
σκηνικά ενός ατελείωτου θεάτρου
</pre
>
</body>
</html>
Στο παραπάνω παράδειγμα, χρησιμοποιούμε το στοιχείο <pre> για να προ-μορφοποιήσουμε το κείμενο του ποιήματος και να διατηρήσουμε τη δομή του. Με αυτόν τον τρόπο, δεν χρειάζεται να προσθέτετε πολλαπλά στοιχεία <br> σε κάθε γραμμή του ποιήματος.
