9 κώδικες HTML που πρέπει να ξέρεις ως blogger

9 κώδικες HTML που πρέπει να ξέρεις ως blogger

Δεν έχει σημασία αν έχεις δωρεάν ή 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. Στοιχείο λίστας 1
  2. Στοιχείο λίστας 2
  3. Στοιχείο λίστας 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>

Κουμπιά

Το να βάλεις ένα κουμπί κάπου είναι υπερβολικά χρήσιμο. Στο self-hosted WordPress για παράδειγμα πολλά θέματα το έχουν ήδη σαν επιλογή να το προσθέσεις, αλλά εννοείται πως στον blogger δεν υπάρχει αυτό. Γιατί είναι χρήσιμο; Από το να στείλεις τους αναγνώστες σου σε κάποιο άλλο άρθρο με όμορφο τρόπο είτε ακόμη στο Newsletter σου ή οτιδήποτε.

<a href="Εδώ μπαίνει ο σύνδεσμος" class="button">Όνομα Κουμπιού</a>

Πίνακας με κεφαλίδες

Μπορεί να θες να οργανώσεις πληροφορίες. Για παράδειγμα να φτιάξεις έναν πίνακα με όσους κάνουν συχνά σχόλια στο 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>

Εξελιγμένο στυλ κειμένου 

Μπορείς να θες να κάνεις κάτι πιο πολύπλοκο για το κείμενο σου. Όπως το να αλλάξεις χρώμα σε κάποιες λέξεις. Να αλλάξεις τη γραμματοσειρά ή ακόμη και το μέγεθος των λέξεων σου. Μπορεί να γίνει αυτό…ναι μόλις είδες ότι γίνεται.

  • Αλλαγή χρώματος
<span style="color: #674ea7">Αλλαγή χρώματος</span>
  • Αλλαγή γραμματοσειράς
<span style="font-family: Fira Code"><strong>Αλλαγή γραμματοσειράς</strong></span>
  • Αλλαγή μεγέθους γραμματοσειράς
<font size="5">Αλλαγή μεγέθους γραμματοσειράς </font>

2 Σχόλια

Αφήστε μια απάντηση

Η ηλ. διεύθυνση σας δεν δημοσιεύεται. Τα υποχρεωτικά πεδία σημειώνονται με *