Δεύτερο άρθρο σχετικά με Blogging απανωτά. Μάλιστα για τα αγαπημένο μου θέμα, το coding. Δεν έχει σημασία αν έχεις δωρεάν ή self-hosted blog, ούτε αν στο έχει στήσει κάποιος προγραμματιστής. Μιλάμε για πολύ απλούς κώδικες από HTML που μπορείς να χρησιμοποιείς μέσα στα άρθρα σου, από το συγκεκριμένο section του κάθε συστήματος, ώστε να τα κάνεις πιο λειτουργικά και όμορφα. Πάμε να τα δούμε μαζί.
Επικεφαλίδες
Τα βλέπεις αυτά που έγραψα παραπάνω με τα μεγάλα γράμματα; Αυτά λοιπόν ονομάζονται επικεφαλίδες. Οι οποίες βοηθάνε στο να χωρίσεις το κείμενο σου σε ξεχωριστά μέρη, κατηγορίες και υποκατηγορίες ώστε να υπάρχει μια καλή συνοχή και κυρίως να είναι βολικό στην αναγνώστη και να ξέρει αυτός που το διαβάζει που θα βρει τι. Οι επικεφαλίδες έχουν ως χαρακτηριστικό την ετικέτα <h> και συνοδεύεται συνήθως σε
από έναν αριθμό, ανάλογα το μέγεθος που θες να έχει η κεφαλίδα σου, από το 1 έως το 6. Παρακάτω σου έχω τα παραδείγματα και τον κώδικα για το πώς θα τα επιτυχείς.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Σύνδεσμοι
Tο να μπορείς να χρησιμοποιείς τους συνδέσμους και να καταλαβαίνεις πως δουλεύουν είναι πολύ σημαντικό. Μιας και είναι πολύ χρήσιμοι για όλα σου άρθρα. Κάτι που ίσως δεν ήξερες είναι πως στο SEO μέσα σε ένα άρθρο αν υπάρχουν τουλάχιστον 2 σύνδεσμοι, ένας εσωτερικός (δηλαδή για κάποια άλλη σελίδα του blog σου) και έναν εξωτερικό (για οποιαδήποτε άλλη σελίδα στο ίντερνετ) . Παρακάτω σου έχω ένα πολύ απλό παράδειγμα συνδέσμου.
<a href="Σύνδεσμος">Τίτλος συνδέσμου</a>
Εικόνα με σύνδεσμο
Το να κάνεις μια εικόνα να έχει σύνδεσμο όχι μόνο είναι πανεύκολο αλλά και πολύ χρήσιμο. Μια εικόνα με κάποια ωραία γραφιστική πινελιά είναι πολύ ελκυστική για τον αναγνώστη, και αν τον προτρέπεις πως θα κερδίσει κάτι κλικάροντας την, θα το κάνει. Αν το σκεφτείς, όλες οι διαφημίσεις σε μια ιστοσελίδα, λειτουργούν ακριβώς έτσι. Δες πως γίνεται.
<a href="Σύνδεσμος"><img src="Σύνδεσμος της εικόνας"></a>
Σύνδεσμος για email
Όταν κάποιος θέλει να σου στείλει email πρέπει να κάτσει να βρει που το έχεις γράψει, να μπει στη σελίδα contact ή να βρει το εικονίδιο, φέξε μου και γλίστρησα. Θα κάνεις πολύ πιο εύκολη τη ζωή κάπου αν του δώσεις έναν σύνδεσμο που θα του λες, εδώ μπορείς να μου στείλεις email για όποιο θέμα θέλεις.
<a href="mailto:YOU@yourinbox.com">εδώ μπορείς να μου στείλεις email για όποιο θέμα θέλεις. </a>
Λίστες
Θεωρώ πως όλοι οι blogger συχνά πυκνά χρησιμοπούν λίστες, είναι πολύ βοηθητικές γιατί πολλές φορές προτείνουμε πράγματα ή δίνουμε ιδέες ή οτιδήποτε τέλος πάντων. Υπάρχουν δύο ήδη λιστών, οι αριθμημένες και αυτές με τις κουκίδες. Ας τις δούμε.
- Στοιχείο λίστας 1
- Στοιχείο λίστας 2
- Στοιχείο λίστας 3
<ol><li>Στοιχείο Λίστας 1</li><li>Στοιχείο Λίστας 2</li><li>Στοιχείο Λίστας 3</li></ol>
- Στοιχείο λίστας 1
- Στοιχείο λίστας 2
- Στοιχεία λίστας 3
<ul><li>Στοιχείο Λίστας 1</li><li>Στοιχείο Λίστας 2</li><li>Στοιχείο Λίστας 3</li></ul>
Βασικά στυλ κειμένου
Μπορεί να δώσεις λίγη έμφαση σε αυτά που γράφεις με πλάγια γράμματα. Ίσως πάλι να χρειάζεται να επισημάνεις κάτι κάνοντας το πιο έντονο. Η απλά να διαγράψεις για λέξη για να δείξεις πως κάτι δεν ισχύει. Αυτές είναι πολύ βασικές λειτουργίες μορφοποίησης για το κείμενο σου και μπορούν να το κάνουν ενδιαφέρον και να ξεχωρίζει. Πρέπει λοιπόν να τις γνωρίζεις.
Σκούρο Έμφαση Διεγραμμένο
<strong>Σκούρο</strong><em>Έμφαση</em><strike>Διεγραμμένο</strike>
Εξελιγμένο στυλ κειμένου
Μπορείς να θες να κάνεις κάτι πιο πολύπλοκο για το κείμενο σου. Όπως το να αλλάξεις χρώμα σε κάποιες λέξεις. Να αλλάξεις τη γραμματοσειρά ή ακόμη και το μέγεθος των λέξεων σου. Μπορεί να γίνει αυτό...ναι μόλις είδες ότι γίνεται.
• Αλλαγή χρώματος
<span style="color: #674ea7">αλλάξεις χρώμα σε κάποιες λέξεις</span>
• Αλλαγή γραμματοσειράς
<span style="font-family: Fira Code"><strong>γραμματοσειρά</strong></span>
• Αλλαγή μεγέθους γραμματοσειράς
<font size="5">μέγεθος</font>
Πίνακας με κεφαλίδες
Μπορεί να θες να οργανώσεις πληροφορίες. Για παράδειγμα να φτιάξεις έναν πίνακα με όσους κάνουν συχνά σχόλια στο blog σου ή αυτούς που έχουν στηρίξει κάποιο έργο σου. Ή να είσαι web designer και να θες να φτιάξεις ένα πίνακα με τα blog που έχεις φταίξει και σε πλατφόρμα ανήκουν,διάφορα ένα πίνακας μοιάζει κάπως έτσι:
Κεφαλίδα 1 |
Κεφαλίδα 2 |
|---|---|
| Γραμμή 1 , Κελί 1 | Γραμμή 1 , Κελί 2 |
| Γραμμή 2, Κελί 1 | Γραμμή 2, Κελί 2 |
Το να φτιάξεις όμως αυτόν το πίνακα θέλει λίγο προσοχή γιατί μπορεί να μπερδευτείς με τις ετικέτες <td> , <th> ή <tr> . Με λίγη εξάσκηση όμως θα το μάθεις και απ' έξω μπορώ να σου πω.
<table><thead><tr><th><h5>Κεφαλίδα 1</h5></th><th><h5>Κεφαλίδα 2</h5></th></tr></thead><tbody><tr><td>Γραμμή 1 , Κελί 1</td><td>Γραμμή 1 , Κελί 2</td></tr><tr><td>Γραμμή 2, Κελί 1</td><td>Γραμμή 2, Κελί 2<br /><br /></td></tr></tbody></table>
Κουμπιά
Το να βάλεις ένα κουμπί κάπου είναι υπερβολικά χρήσιμο. Στο self-hosted Wordpress για παράδειγμα πολλά θέματα το έχουν ήδη σαν επιλογή να το προσθέσεις, αλλά εννοείται πως στον blogger δεν υπάρχει αυτό. Γιατί είναι χρήσιμο; Από το να στείλεις τους αναγνώστες σου σε κάποιο άλλο άρθρο με όμορφο τρόπο είτε ακόμη στο Newsletter σου ή οτιδήποτε.
Χρήσιμα Links<a href="Εδώ μπαίνει ο σύνδεσμος" class="button">Όνομα Κουμπιού</a>
Ελπίζω να βρήκες το σημερινό άρθρο χρήσιμο. Σε περίπτωση που εσύ σαν blogger χρησιμοποιείς κάποιον HTML κώδικας που δεν ανέφερα, γράψε τον μας στα σχόλια. 💜
Pin This 📌
.png "9 κώδικες HTML που πρέπει να ξέρεις ως blogger")
Πριν φύγεις
💜 Μην ξεχάσεις να κάνεις ένα share το συγκεκριμένο άρθρο αν το βρήκες ενδιαφέρον ή να το στείλεις σε έναν φίλο/η.
💜 Ρίξε μια ματιά στο Buy Me A Coffee, θα βρεις πολύ όμορφα πραγματάκια ή μπορείς απλά να με στηρίξεις.
💜 Τέλος μπορείς να κάνεις παρακάτω εγγραφή στο Newsletter για να ενημερώνεσαι αμέσως μόλις ανέβει νέο άρθρο.
