ΕΝΟΤΗΤΑ 4 HTML & CSS Για Αρχάριους – Text Formatting

Michail Kassapoglou February 02, 2023

 

Δωρεάν μαθήματα HTML & CSS για αρχάριους

ΕΙΣΑΓΩΓΗ

Στο σημερινό δωρεάν μάθημα HTML & CSS για αρχάριους θα δούμε τους πιο συνηθισμένους τρόπους να δώσουμε έμφαση στο κείμενο μας όπως θα κάναμε μέσα από ένα Word Editor χρησιμοποιώντας επιλογές όπως bold, italic, κτλ.

 <strong> tag

Ας υποθέσουμε λοιπόν ότι στην απλή σελίδα στην οποία πειραματιζόμαστε μέχρι τώρα θέλουμε να δώσουμε έμφαση στις λέξεις JavaScript και Python και να εμφανίζονται bold (έντονη γραφή). Για να το καταφέρουμε αυτό δεν έχουμε παρά να περικλείσουμε τις λέξεις JavaScript και Python ανάμεσα στην ετικέτα <strong>. Το στοιχείο <strong> υποδεικνύει ότι το περιεχόμενο του έχει μεγάλη σημασία και σοβαρότητα στην πληροφορία που μεταφέρει στον αναγνώστη.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ground of Code</title>
</head>
<body>
<h1>Ground of Code - #1 Site in free programming lessons</h1>
<p>Learn for free all the programming courses such as <strong>JavaScript</strong>
    and <strong>Python</strong>.</p>
</body>
</html>

<em> tag

Επίσης έχουμε και το <em> tag το οποίο μας δίνει το αποτέλεσμα της πλάγιας γραφής (italic). Η λογική είναι ακριβώς η ίδια δηλαδή ανάμεσα στο στοιχείο <em> γράφουμε το κείμενο στο οποίο θέλουμε να δώσουμε περισσότερη έμφαση.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ground of Code</title>
</head>
<body>
<h1>Ground of Code - #1 Site in free programming lessons</h1>
<p>Learn for <em>free</em> all the programming courses such as <strong>JavaScript</strong>
    and <strong>Python</strong>.</p>
</body>
</html>

<hr/> tag

Το <hr/> tag είναι από τα λίγα tags που υπάρχουν στην HTML που μπορεί να χρησιμοποιηθεί μόνο του χωρίς να χρειαστεί να γράψουμε το αντίστοιχο του κλείσιμο. Ήδη στο προηγούμενο μάθημα είχαμε αναφερθεί στο <br> για να αλλάζουμε γραμμή στο κείμενο μας. Με το <hr/> έχουμε την δυνατότητα να τραβήξουμε μια γραμμή από την μια άκρη της σελίδας μέχρι το τέλος της. Συνήθως κάτι τέτοιο είναι επιθυμητό όταν θέλουμε να δείξουμε κάποιο κείμενο στο τέλος της σελίδας μας όπως τα πνευματικά δικαιώματα (copyrights).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ground of Code</title>
</head>
<body>
<h1>Ground of Code - #1 Site in free programming lessons</h1>
<p>Learn for <em>free</em> all the programming courses such as <strong>JavaScript</strong>
    and <strong>Python</strong>.</p>
<hr/>
<p>The content is licensed under a Creative Commons Attribute-ShareAlike 2.5
    Generic License.
</p>
</body>
</html>


<small> tag

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ground of Code</title>
</head>
<body>
<h1>Ground of Code - #1 Site in free programming lessons</h1>
<p>Learn for <em>free</em> all the programming courses such as <strong>JavaScript</strong>
    and <strong>Python</strong>.</p>
<hr/>
<p><small>The content is licensed under a Creative Commons Attribute-ShareAlike 2.5
    Generic License.</small>
</p>
</body>
</html>

<del> tag

Ας υποθέσουμε τώρα ότι γράφετε ένα τεχνικό άρθρο για μια γλώσσα προγραμματισμού και θέλετε να τραβήξετε την προσοχή του αναγνώστη σε κάποιες εντολές που δεν υφίστανται πια και έχουν αντικατασταθεί με κάποιες άλλες. Ένας συνηθισμένος  τρόπος να δώσουμε έμφαση στις εντολές που πρέπει να αποφεύγουμε είναι να χρησιμοποιούμε διακριτή γραφή (strikethrough) . Στην HTML5 μπορούμε να το καταφέρουμε αυτό αν περικλύσουμε την λέξη ή τις λέξεις ανάμεσα στο <del> tag.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ground of Code</title>
</head>
<body>
<h1>Ground of Code - #1 Site in free programming lessons</h1>
<p>Learn for <em>free</em> all the programming courses such as <strong>JavaScript</strong>
    and <strong>Python</strong>.</p>
<p><del>HTML4</del> has been replaced with HTML5</p>
<hr/>
<p><small>The content is licensed under a Creative Commons Attribute-ShareAlike 2.5
    Generic License.</small>
</p>
</body>
</html>


<mark> tag

Είμαι σίγουρος ότι σε πολλά τεχνικά άρθρα έχετε δει μερικές λέξεις ή ορισμοί να εμφανίζονται σαν να έχουν σημανθεί με μαρκαδόρο επισήμανσης (highlighting). Αυτό το εφέ είναι εύκολο να το πετύχουμε αν χρησιμοποιήσουμε το <mark> tag.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ground of Code</title>
</head>
<body>
<h1>Ground of Code - #1 Site in free programming lessons</h1>
<p><mark>Learn</mark> for <em>free</em> all the programming courses such as <strong>JavaScript</strong>
    and <strong>Python</strong>.</p>
<p><del>HTML4</del> has been replaced with HTML5</p>
<hr/>
<p><small>The content is licensed under a Creative Commons Attribute-ShareAlike 2.5
    Generic License.</small>
</p>
</body>
</html>


Μέχρι τώρα καλύψαμε τα πιο βασικά HTML tags που θα χρειαστούμε στην δημιουργία σχεδόν όλων των κειμένων HTML που θα δημιουργήσουμε. Όμως το HTML5 περιέχει πολλά περισσότερα αλλά που χρησιμοποιούνται περισσότερο, άλλα λιγότερο και άλλα σχεδόν καθόλου. Που μπορούμε όμως να βρούμε μια οργανωμένη λίστα όλων των tags με παραδείγματα και σύντομες επεξηγήσεις? Ο Mozilla οργανισμός ( ο ίδιος που μας προσφέρει το Mozilla browser και πολλά άλλα δωρεάν προγράμματα όπως thunderbird για email) έχει οργανώσει όλα τα tags σε ένα υπέροχο online documentation που μπορείτε να βρείτε εδώ:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element


Ο λόγος όμως που πρέπει να δημιουργήσουμε μερικά μαθήματα σε HTML και αργότερα για CSS είναι γιατί αν και τα HTML tags είναι διαθέσιμα στη λίστα του Mozilla κάποιος που ξεκινάει από το μηδέν δεν γνωρίζει ποια είναι εκείνα τα tags που είναι απολύτως απαραίτητα για να δημιουργηθεί σωστά μια ιστοσελίδα. Όταν εξοικειωθείτε με την σύνταξη του HTML μετά από ένα μικρό χρονικό διάστημα, τότε θα σας είναι πολύ πιο εύκολο να ανατρέχετε πίσω στο online documentation του Mozilla και να βρίσκετε μόνοι σας την πληροφορία που χρειάζεστε.

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

Μην ξεχάσετε να κάνετε ένα μικρό donation έτσι ώστε αυτό το blog να μεγαλώσει ακόμα πιο πολύ και να έχει περισσότερες δυνατότητες στην online παράδοση δωρεάν μαθημάτων.

full-width

Tags
Michail Kassapoglou

Posted by Michail Kassapoglou

Post a Comment

0 Comments

Η γνώμη σας είναι σημαντική.