Customize Consent Preferences

We use cookies to help you navigate efficiently and perform certain functions. You will find detailed information about all cookies under each consent category below.

The cookies that are categorized as "Necessary" are stored on your browser as they are essential for enabling the basic functionalities of the site. ... 

Always Active

Necessary cookies are required to enable the basic features of this site, such as providing secure log-in or adjusting your consent preferences. These cookies do not store any personally identifiable data.

No cookies to display.

Functional cookies help perform certain functionalities like sharing the content of the website on social media platforms, collecting feedback, and other third-party features.

No cookies to display.

Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics such as the number of visitors, bounce rate, traffic source, etc.

No cookies to display.

Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.

No cookies to display.

Advertisement cookies are used to provide visitors with customized advertisements based on the pages you visited previously and to analyze the effectiveness of the ad campaigns.

No cookies to display.

2.3 Παράθεση και Στοιχεία Αναφοράς στην HTML

Σε αυτό το κεφάλαιο θα προχωρήσουμε στα στοιχεία HTML <blockquote>, <q>, <abbr>, <address>, <cite> και <bdo>.

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

Το στοιχείο `<blockquote>` χρησιμοποιείται για να καθορίσει μια παράθεση από έναν άλλο συγγραφέα ή πηγή. Το κείμενο που περικλείεται στο στοιχείο `<blockquote>` συνήθως παρουσιάζεται σε ένα διαφορετικό στυλ, όπως περιθώρια στο αριστερό και δεξιό άκρο.

Το στοιχείο `<q>` χρησιμοποιείται για να καθορίσει ένα περιττό κείμενο. Το κείμενο που περικλείεται στο στοιχείο `<q>` συνήθως εμφανίζεται με εισαγωγικά.

Το στοιχείο `<abbr>` χρησιμοποιείται για να καθορίσει μια συντόμευση. Όταν ο χρήστης τοποθετεί τον κέρσορα του ποντικιού πάνω από τη συντόμευση, εμφανίζεται η πλήρης έκδοση της συντόμευσης σε ένα επισημασμένο πλαίσιο.

Το στοιχείο `<address>` χρησιμοποιείται για να καθορίσει πληροφορίες επικοινωνίας για τον συγγραφέα της σελίδας, όπως το όνομα, η διεύθυνση, ο αριθμός τηλεφώνου και η διεύθυνση email. Το κείμενο που περικλείεται στο στοιχείο `<address>` συνήθως εμφανίζεται σε ένα διαφορετικό στυλ, όπως περιθώρια στο αριστερό και δεξιό άκρο.

Το στοιχείο `<cite>` χρησιμοποιείται για να καθορίσει μια πηγή ή ένα βιβλιογραφικό αναφορά. Το κείμενο που περικλείεται στο στοιχείο `<cite>` συνήθως εμφανίζεται σε ένα διαφορετικό στυλ, όπως περιθώρια στο αριστερό και δεξιό άκρο.

Το στοιχείο `<bdo>` χρησιμοποιείται για να αλλάξει την κατεύθυνση κειμένου σε δεξιά προς αριστερά. Αυτό είναι χρήσιμο για τα κείμενα σε διαφορετικές γλώσσες που γράφονται από δεξιά προς αριστερά, όπως η Εβραϊκή ή η Αραβική.

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

[adinserter block=”2″]

Το στοιχείο HTML <blockquote> ορίζει ένα τμήμα κειμένου που προέρχεται από άλλη πηγή και είναι παραθέματος. Τα περιεχόμενα που περικλείονται στο στοιχείο <blockquote> είναι συνήθως εσοχομένα (παρεμβλημένα) από τον πλαϊνό περιθώριο του περιεχομένου, για να δείξει ότι πρόκειται για παράθεση.

Το στοιχείο <blockquote> μπορεί να χρησιμοποιηθεί επίσης για τη δημιουργία ενός ενός τμήματος κειμένου που απαιτεί σημαντική παραθετική επεξήγηση ή επισήμανση.

Εδώ είναι ένα παράδειγμα χρήσης του στοιχείου <blockquote>:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE html>
<html>
<head>
<title>Παράδειγμα</title>
</head>
<body>
<blockquote>
<p>Το μόνο πράγμα που πρέπει να φοβάστε είναι ο ίδιος ο φόβος.</p>
<cite>Franklin D. Roosevelt</cite>
</blockquote>
</body>
</html>
<!DOCTYPE html> <html> <head> <title>Παράδειγμα</title> </head> <body> <blockquote> <p>Το μόνο πράγμα που πρέπει να φοβάστε είναι ο ίδιος ο φόβος.</p> <cite>Franklin D. Roosevelt</cite> </blockquote> </body> </html>
<!DOCTYPE html>
<html>
  <head>
    <title>Παράδειγμα</title>
  </head>
  <body>
    <blockquote>
      <p>Το μόνο πράγμα που πρέπει να φοβάστε είναι ο ίδιος ο φόβος.</p>
      <cite>Franklin D. Roosevelt</cite>
    </blockquote>
  </body>
</html>

Στο παραπάνω παράδειγμα, ένα κομμάτι κειμένου παραθέτεται ως παράθεση και εσοχομένο. Το στοιχείο <cite> χρησιμοποιείται για να δείξει τον συγγραφέα της παράθεσης.

Το στοιχείο HTML <q> ορίζει μια σύντομη παράθεση. Οι περιηγητές συνήθως εισάγουν εισαγωγικά γύρω από την παράθεση για να δείξουν ότι πρόκειται για παράθεση.

Εδώ είναι ένα παράδειγμα χρήσης του στοιχείου <q>:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE html>
<html>
<head>
<title>Παράδειγμα</title>
</head>
<body>
<blockquote>
<p>Ο ποιητής είπε: <q>Το σιωπηλό βλέμμα είναι η πιο έντονη φωνή.</q></p>
</blockquote>
</body>
</html>
<!DOCTYPE html> <html> <head> <title>Παράδειγμα</title> </head> <body> <blockquote> <p>Ο ποιητής είπε: <q>Το σιωπηλό βλέμμα είναι η πιο έντονη φωνή.</q></p> </blockquote> </body> </html>
<!DOCTYPE html>
<html>
  <head>
    <title>Παράδειγμα</title>
  </head>
  <body>
    <blockquote>
      <p>Ο ποιητής είπε: <q>Το σιωπηλό βλέμμα είναι η πιο έντονη φωνή.</q></p>
    </blockquote>
  </body>
</html>

Στο παραπάνω παράδειγμα, οι λέξεις “Το σιωπηλό βλέμμα είναι η πιο έντονη φωνή.” είναι παραθέσεις και είναι περικλεισμένες στο στοιχείο <q>.

Το στοιχείο HTML <abbr> ορίζει μια συντόμευση ή ακρωνύμιο, όπως “HTML”, “CSS”, “κ.κ.”, “δρ.” (στον τόπο γεννήσεώς μου).

Η σήμανση των συντομεύσεων μπορεί να παρέχει χρήσιμες πληροφορίες σε περιηγητές, συστήματα μετάφρασης και μηχανές αναζήτησης.

Χρησιμοποιήστε το γενικό χαρακτηριστικό “title” για να εμφανίσετε την περιγραφή για τη συντόμευση / ακρωνύμιο όταν περνάτε το ποντίκι πάνω από το στοιχείο.

Εδώ είναι ένα παράδειγμα χρήσης του στοιχείου <abbr>:

[adinserter block=”3″]

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE html>
<html>
<head>
<title>Παράδειγμα</title>
</head>
<body>
<blockquote>
<p>
Το <abbr title="Cascading Style Sheets">CSS</abbr> είναι μια γλώσσα στυλ
που χρησιμοποιείται για να περιγράψει τη μορφή των ιστοσελίδων.
</p>
</blockquote>
</body>
</html>
<!DOCTYPE html> <html> <head> <title>Παράδειγμα</title> </head> <body> <blockquote> <p> Το <abbr title="Cascading Style Sheets">CSS</abbr> είναι μια γλώσσα στυλ που χρησιμοποιείται για να περιγράψει τη μορφή των ιστοσελίδων. </p> </blockquote> </body> </html>
<!DOCTYPE html>
<html>
  <head>
    <title>Παράδειγμα</title>
  </head>
  <body>
    <blockquote>
      <p>
        Το <abbr title="Cascading Style Sheets">CSS</abbr> είναι μια γλώσσα στυλ
        που χρησιμοποιείται για να περιγράψει τη μορφή των ιστοσελίδων.
      </p>
    </blockquote>
  </body>
</html>

Στο παραπάνω παράδειγμα, το “CSS” είναι συντομογραφία για τη λέξη “Cascading Style Sheets”. Το χαρακτηριστικό “title” χρησιμοποιείται για να εμφανίσει την περιγραφή της συντόμευσης όταν περνάτε το ποντίκι σας πάνω από το στοιχείο.

Το στοιχείο HTML <address> ορίζει τις πληροφορίες επικοινωνίας για τον συντάκτη / ιδιοκτήτη ενός έγγραφου ή ενός άρθρου.

Οι πληροφορίες επικοινωνίας μπορεί να είναι μια διεύθυνση email, URL, φυσική διεύθυνση, αριθμός τηλεφώνου, λογαριασμός κοινωνικής δικτύωσης, κ.λπ.

Ο κείμενος εντός του στοιχείου <address> συνήθως απεικονίζεται σε πλάγια γραφή, και οι περιηγητές θα προσθέσουν πάντα έναν αλλαγή γραμμής πριν και μετά από το στοιχείο <address>.

Εδώ είναι ένα παράδειγμα χρήσης του στοιχείου <address>:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE html>
<html>
<head>
<title>Παράδειγμα</title>
</head>
<body>
<address>
Επικοινωνία με τη συντακτική ομάδα:<br />
<a href="mailto:editor@example.com">editor@example.com</a><br />
Διεύθυνση: Παράδεισος 123, Ταχυδρομικός Κώδικας 12345<br />
Τηλέφωνο: 123-4567890<br />
</address>
</body>
</html>
<!DOCTYPE html> <html> <head> <title>Παράδειγμα</title> </head> <body> <address> Επικοινωνία με τη συντακτική ομάδα:<br /> <a href="mailto:editor@example.com">editor@example.com</a><br /> Διεύθυνση: Παράδεισος 123, Ταχυδρομικός Κώδικας 12345<br /> Τηλέφωνο: 123-4567890<br /> </address> </body> </html>
<!DOCTYPE html>
<html>
  <head>
    <title>Παράδειγμα</title>
  </head>
  <body>
    <address>
      Επικοινωνία με τη συντακτική ομάδα:<br />
      <a href="mailto:editor@example.com">editor@example.com</a><br />
      Διεύθυνση: Παράδεισος 123, Ταχυδρομικός Κώδικας 12345<br />
      Τηλέφωνο: 123-4567890<br />
    </address>
  </body>
</html>

Στο παραπάνω παράδειγμα, οι πληροφορίες επικοινωνίας περιλαμβάνουν μια διεύθυνση email, μια φυσική διεύθυνση, έναν αριθμό τηλεφώνου και μια αλλαγή γραμμής. Η διεύθυνση email είναι συνδεδεμένη με έναν σύνδεσμο “mailto” για να επιτρέπει στους χρήστες να στείλουν email απευθείας.

Το στοιχείο HTML <cite> ορίζει τον τίτλο ενός δημιουργικού έργου (π.χ. ένα βιβλίο, ένα ποίημα, ένα τραγούδι, μια ταινία, μια ζωγραφική, μια γλυπτική, κ.λπ.).

Σημείωση: Το όνομα ενός ατόμου δεν είναι ο τίτλος ενός έργου.

Ο κείμενος εντός του στοιχείου <cite> συνήθως απεικονίζεται σε πλάγια γραφή.

Εδώ είναι ένα παράδειγμα χρήσης του στοιχείου <cite>:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE html>
<html>
<head>
<title>Παράδειγμα</title>
</head>
<body>
<p>
Στον κλασικό ταινιοθάλαμο, οι αποκριές αποτελούσαν μια σημαντική κοινωνική
εκδήλωση. Στην ταινία <cite>Το Καμαρότσι</cite>, ο σκηνοθέτης Φραντσέσκο
Ρόσι αναπαριστά μια νύχτα από τις αποκριές του 1938 στη Νάπολη.
</p>
</body>
</html>
<!DOCTYPE html> <html> <head> <title>Παράδειγμα</title> </head> <body> <p> Στον κλασικό ταινιοθάλαμο, οι αποκριές αποτελούσαν μια σημαντική κοινωνική εκδήλωση. Στην ταινία <cite>Το Καμαρότσι</cite>, ο σκηνοθέτης Φραντσέσκο Ρόσι αναπαριστά μια νύχτα από τις αποκριές του 1938 στη Νάπολη. </p> </body> </html>
<!DOCTYPE html>
<html>
  <head>
    <title>Παράδειγμα</title>
  </head>
  <body>
    <p>
      Στον κλασικό ταινιοθάλαμο, οι αποκριές αποτελούσαν μια σημαντική κοινωνική
      εκδήλωση. Στην ταινία <cite>Το Καμαρότσι</cite>, ο σκηνοθέτης Φραντσέσκο
      Ρόσι αναπαριστά μια νύχτα από τις αποκριές του 1938 στη Νάπολη.
    </p>
  </body>
</html>

[adinserter block=”4″]

Στο παραπάνω παράδειγμα, ο τίτλος της ταινίας “Το Καμαρότσι” περικλείεται στο στοιχείο <cite> και απεικονίζεται σε πλάγια γραφή.

Το BDO σημαίνει Bi-Directional Override.

Το στοιχείο HTML <bdo> χρησιμοποιείται για να αντικαταστήσει την τρέχουσα κατεύθυνση κειμένου:

Αν η γλώσσα γραφής είναι από αριστερά προς τα δεξιά (όπως η αγγλική), το κείμενο εμφανίζεται από αριστερά προς τα δεξιά χωρίς τη χρήση του <bdo>.
Αν η γλώσσα γραφής είναι από δεξιά προς τα αριστερά (όπως η αραβική), το κείμενο εμφανίζεται από δεξιά προς τα αριστερά χωρίς τη χρήση του <bdo>.
Εδώ είναι ένα παράδειγμα:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE html>
<html>
<head>
<title>Παράδειγμα</title>
</head>
<body>
<p>Αυτό είναι ένα παράδειγμα κειμένου στα αγγλικά.</p>
<p><bdo dir="rtl">זוהי דוגמה לטקסט בעברית.</bdo></p>
</body>
</html>
<!DOCTYPE html> <html> <head> <title>Παράδειγμα</title> </head> <body> <p>Αυτό είναι ένα παράδειγμα κειμένου στα αγγλικά.</p> <p><bdo dir="rtl">זוהי דוגמה לטקסט בעברית.</bdo></p> </body> </html>
<!DOCTYPE html>
<html>
  <head>
    <title>Παράδειγμα</title>
  </head>
  <body>
    <p>Αυτό είναι ένα παράδειγμα κειμένου στα αγγλικά.</p>
    <p><bdo dir="rtl">זוהי דוגמה לטקסט בעברית.</bdo></p>
  </body>
</html>

Στο παραπάνω παράδειγμα, το κείμενο στην πρώτη παράγραφο εμφανίζεται από αριστερά προς τα δεξιά, ενώ το κείμενο στη δεύτερη παράγραφο εμφανίζεται από δεξιά προς τα αριστερά, χάρη στη χρήση του στοιχείου <bdo>.

21 Αυγούστου, 2023
top
error: Content is protected !!
Μετάβαση σε γραμμή εργαλείων