Οδηγός κωδικών HTML για αρχάριους

Έχω γράψει έναν χρήσιμο οδηγό για κώδικα HTML που μπορείς να χρησιμοποιήσεις για χρήση στο δικό σου blog ή στη δική σου ιστοσελίδα...

Πάντα χρειάζεται ένας μίνι οδηγός με τους βασικούς κώδικες HTML για να ρίχνεις μια ματιά αν τους χρειαστείς στο blog ή στην ιστοσελίδα σου.
Νομίζω θα σου φανεί χρήσιμος!

Τι είναι η HTML;

Η HTML (αρχικοποίηση του αγγλικού HyperText Markup Language, στα ελληνικά: Γλώσσα Σήμανσης Υπερκειμένου) είναι η κύρια γλώσσα σήμανσης για τις ιστοσελίδες, και τα στοιχεία της είναι τα βασικά δομικά στοιχεία των ιστοσελίδων.
Θα δούμε για: μορφοποίηση κειμένου, συνδέσμους, εικόνες, φόντο, λίστες, ειδικούς χαρακτήρες html.

Mορφοποίηση κειμένου

Επικεφαλίδες

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

<h1> Σημαντική επικεφαλίδα </h1>

Ευθυγραμμισμένη επικεφαλίδα

Ευθυγραμμίζει την επικεφαλίδα σας χρησιμοποιώντας CSS. Μπορείτε να χρησιμοποιήσετε "left", "right" ή "justify" αντί για "center" παρακάτω:

<h1 style = "text-align: center;"> Ο τίτλος σας ευθυγραμμισμένος </h1>

Παράγραφοι

Εισάγει ένα διάλειμμα παραγράφου. Ορίζει κάθε παράγραφο.

<p> Η παράγραφος σας εδώ </ p>

Ευθυγραμμισμένη παράγραφος

Ευθυγραμμίζει την παράγραφο σας χρησιμοποιώντας CSS. Μπορείτε να χρησιμοποιήσετε "left", "right" ή "justify" αντί για "center" :

<p style = "text-align: center"> Το κείμενο της παραγράφου είναι ευθυγραμμισμένο </p>

Νέα γραμμή

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

Στο τέλος της πρότασης. <br/>

Εντονο Κείμενο (bold)

Κάνει το βάρος της γραμματοσειράς σας έντονο

<b> Το έντονο κείμενο </b>

Ισχυρό κείμενο

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

<strong> Το ισχυρό κείμενο </strong>

Πλάγιο κείμενο

Κάνει το κείμενο με πλάγια γράμματα

<i> Το πλάγιό σου κείμενο </i>

Κείμενο με έμφαση

Ίδια εμφάνιση ως κείμενο με πλάγια γραφή σε HTML, αλλά είναι σημασιολογική. Καθορίζει ότι το κείμενο θα πρέπει να τονίζεται όταν διαβαστεί.

<em> Το κείμενο με έμφαση </em>

Υπογραμμισμένο κείμενο

Υπογραμμίζει το κείμενό σου

<u> Το υπογραμμισμένο κείμενο </u>

Κείμενο με γραμμή στη μέση
Τοποθετεί μια γραμμή μέσα από το κείμενό σου για να το διαγράψει.

<s> ~~Το κείμενό σου εδώ~~</s>

Οικογένεια γραμματοσειρών

Αλλάζει τη γραμματοσειρά του κειμένου χρησιμοποιώντας CSS. Μπορείς να αλλάξεις τη γραμματοσειρά σε οποιαδήποτε ασφαλή γραμματοσειρά για το διαδίκτυο ή τη γραμματοσειρά ιστού Google:

<span style = "font-family: Arial, Helvetica, sans-serif"> Η νέα σου γραμματοσειρά </span>

Μέγεθος γραμματοσειράς

Αλλάζει το μέγεθος της γραμματοσειράς χρησιμοποιώντας ένα μικρό CSS. Μπορείτε να χρησιμοποιήσετε px, em ή ένα ποσοστό. Ακολουθεί ένα παράδειγμα με px:

<span style = "font-size: 16px;"> Η γραμματοσειρά σας σε νέο μέγεθος </span>

Χρώμα γραμματοσειράς

Αλλάζει το χρώμα της γραμματοσειράς σε οποιοδήποτε Hex χρώμα της επιλογής σου:

<span style = "font-color: # 030303;"> Το νέο χρώμα γραμματοσειράς σου </span>

Επισημασμένο κείμενο

Επισημαίνει το κείμενο με χρώμα φόντου χρησιμοποιώντας CSS:

<span style = "background-color: #f4cccc"> Το κείμενο που έχετε επισημάνει </span>

Αποσπάσματα Block

Χρήσιμο όταν αναφέρεις κάποιον ή όταν χρειάζεσαι ένα συγκεκριμένο τμήμα του κειμένου σου να ξεχωρίσει.

<blockquote> Το κείμενό σου εδώ </blockquote>

Σύνδεσμοι

Βασικός σύνδεσμος κειμένου

Χρησιμοποιείται για να προσθέσεις έναν σύνδεσμο σε συγκεκριμένο κείμενο ή λέξη. Αντικαταστήστε το https://www.toxrisimo.gr με τον δικό σου σύνδεσμο:

<a href="https://www.toxrisimo.gr"> Το συνδεδεμένο κείμενο </a>

Ανοιγμα συνδέσμου σε νέα καρτέλα

Χρησιμοποιείται για να ανοίξει το σύνδεσμο σε νέο παράθυρο ή καρτέλα αντί για την ίδια ιστοσελίδα:

<a href="https://www.toxrisimo.gr" target="_blank"> Το κείμενο που έχετε συνδέσει </a>

Σύνδεσμος σε μια διεύθυνση ηλεκτρονικού ταχυδρομείου

Ανοίγει το πρόγραμμα ηλεκτρονικού ταχυδρομείου του χρήστη για να στείλει γρήγορα ένα μήνυμα ηλεκτρονικού ταχυδρομείου στη διεύθυνση που παρέχεται. Αντικατάστησε τη διεύθυνση ηλεκτρονικού ταχυδρομείου με τη δική σου:

<a href="mailto:[email protected]"> Διεύθυνση ηλεκτρονικού ταχυδρομείου ή σύνδεσμος </a>

Σύνδεσμος σε μια διεύθυνση ηλεκτρονικού ταχυδρομείου με θέμα

Χρήσιμο αν θέλεις το μήνυμα ηλεκτρονικού ταχυδρομείου να έχει ένα συγκεκριμένο θέμα όταν ένας χρήστης κάνει κλικ στον σύνδεσμο σου. Χρησιμοποιήστε το% 20 στη θέση του κενού και αντικατάστησε το κείμενο με το δικό σου θέμα:

<a href="mailto:[email protected]?subject=Your%20Email%20Subject"> Διεύθυνση ηλεκτρονικού ταχυδρομείου ή σύνδεσμος </a>

Αγκυροβολημένη σύνδεση ("άλμα")

Για να μεταβείς σε ένα συγκεκριμένο τμήμα μιας σελίδας με το πάτημα ενός συνδέσμου. Αυτό χρεάζεται δύο μέρη κώδικα. Ο πρώτος κώδικας πάει στο σημείο που βρίσκεται ο σύνδεσμος που θα πατήσεις, για παράδειγμα, στο επάνω μέρος της ανάρτησης.
Ονόμασέ το κάτι μοναδικό:

<a href="#backtotop"> Επιστροφή στην κορυφή </a>

Στη συνέχεια, πρόσθεσε την άγκυρα στο σύνδεσμο σου, αυτός ο κωδικός πάει στο σημείο που θα οδηγηθούμε μετά το πάτημα του συνδέσμου:

Δες το εδώ: Επιστροφή στην κορυφή του άρθρου.

Εικόνες

Βασική εικόνα

Συμπεριέλαβε μια εικόνα στην ανάρτησή σου. Αντικατάστησε τη διεύθυνση URL της εικόνας με τη δική σου URL διεύθυνση. Θα χρειαστεί να μεταφορτώσεις αυτήν την εικόνα κάπου online. Περιγράφοντας την εικόνα βοηθάει στο SEO:

<img src = "https://www.yoursite.com/yourimage.jpg" alt = "περιγραφή της εικόνας"/>

Σύνδεσμος εικόνας

Για να προσθέσετε έναν σύνδεσμο σε μια συγκεκριμένη εικόνα. Αντικαταστήστε τη διεύθυνση URL της εικόνας και συνδέστε τη με τη δική σας:

<a href="http://www.yourlink.com"> <img src = "https://www.yoursite.com/yourimage.jpg" alt = "περιγραφή της εικόνας" /> </a>

Ο σύνδεσμος εικόνας ανοίγει σε νέο παράθυρο

Πλάτος και Ύψος εικόνας

Μπορείς να αλλάξεις το πλάτος και το ύψος της εικόνας αν χρειάζεται, ωστόσο είναι συνήθως καλύτερο να αλλάξεις το μέγεθος της εικόνας σου πριν την προσθέσεις στον ιστότοπό σου. Μπορείς να ορίσεις το πλάτος και το ύψος παρακάτω για τη συμβατότητα του προγράμματος περιήγησης. Άλλαξε τις τιμές πλάτους και ύψους σε αυτές της πραγματικής εικόνας σας:

<img src = "https://www.yoursite.com/yourimage.jpg" alt = "περιγραφή της εικόνας" width = "450" height = "600"/>

Ευθυγράμμισε την εικόνα προς τα αριστερά ή τα δεξιά της παραγράφου

Εάν θέλεις να τοποθετήσεις την εικόνα στα αριστερά ή στα δεξιά μιας παραγράφου, χρησιμοποίησε τον ακόλουθο κώδικα, αντικαθιστώντας το "left" με το "right" αν θέλεις:

<img src = "https://www.yoursite.com/yourimage.jpg" alt = "περιγραφή της εικόνας" align = "left"/> height = "600"/>

Φόντα

Τα παρακάτω πρέπει να συμπληρωθούν στο κύριο αρχείο CSS του ιστότοπού σου ή σε μια ειδική ενότητα CSS του ιστοτόπου / του επεξεργαστή ιστολογίου. Εάν δεν έχει τμήμα ή αρχείο CSS, μπορείς να τοποθετήσεις αυτούς τους κωδικούς ανάμεσα στις ετικέτες <style> και </style> στην ενότητα <head> της HTML της ιστοσελίδας, αν και συνιστάται να έχεις ένα εξωτερικό αρχείο CSS.

Χρώμα φόντου σελίδας

Άλλαξε το γενικό φόντο του ιστοτόπου ή του ιστολογίου σου με αυτόν τον κώδικα. Αντικατάστησε τον κώδικα hex με το δικό σου.

body {
background-color: #d3d3d3;
}}

Επαναλαμβανόμενη εικόνα φόντου

Για μικρότερα φόντα που τα θέλεις tiled ή μεγαλύτερα φόντα που είναι για να επαναλαμβάνονται, χρησιμοποίησε αυτόν τον κώδικα και αντικατάστησε τη διεύθυνση URL της εικόνας με τη δική σου. Θα πρέπει πρώτα να μεταφορτώσεις την εικόνα online:

body {
background-image: url (https://www.yourwebsite.com/background-image.jpg);
background-repeat: repeat;
}

Άλλαξε την παραπάνω κόκκινη "repeat" αν θέλεις η εικόνα να επαναλαμβάνεται μόνο κατακόρυφα σε repeat-y
Άλλαξε την παραπάνω κόκκινη "repeat, εάν θέλεις η εικόνα να επαναλαμβάνεται μόνο οριζόντια σε repeat-x

Μη επαναλαμβανόμενη εικόνα φόντου

Για εικόνες φόντου που θέλεις να εμφανίζονται μόνο μία φορά (δεν επαναλαμβάνονται ή δεν είναι tiled). Αντικατάστησε τη διεύθυνση URL της εικόνας με τη δική σου.

body {
background-image: url (https://www.yourwebsite.com/background-image.jpg);
background-repeat: no repeat;
}

Κεντρική στη κορυφή μη επαναλαμβανόμενη εικόνα φόντου

Κέντραρε την εικόνα φόντου στη σελίδα, στην κορυφή. Αντικατάστησε τη διεύθυνση URL της εικόνας με τη δική σου.

body {
background-image:url(https://www.yourwebsite.com/background-image.jpg);
background-repeat: no repeat;
background-position: top center;
}

Κεντρική στη κορυφή μη επαναλαμβανόμενη εικόνα φόντου

Κέντραρε την εικόνα φόντου στη σελίδα, στην κορυφή. Θα επαναληφθεί κάθετα στη σελίδα Αντικατάστησε τη διεύθυνση URL της εικόνας με τη δική σου.

body {
background-image:url(https://www.yourwebsite.com/background-image.jpg);
background-repeat: repeat-y;
background-position: top center;
}

Λίστες

Λίστα με σειρά

Αυτό θα δημιουργήσει μια αριθμημένη λίστα. Αντικατάστησε τα στοιχεία λίστας με τα δικά σου:

<ol>
<li>list item 1</ li>
<li>list item 2</ li>
<li>list item 3</ li>
</ol>

Μη αριθμημένη λίστα με κουκκίδες

Αυτό θα δημιουργήσει μια λίστα με κουκκίδες αντί για αριθμούς. Αντικατάστησε τα στοιχεία λίστας με τα δικά σου:

<ul>
<li>List item 1</ li>
<li>List item 2</ li>
<li>List item 3</ li>
</ul>

Μη αριθμημένη λίστα με διαφορετικούς τύπους κουκκίδων

Μπορείς να αλλάξεις τον τύπο κουκκίδας οποιασδήποτε μη αριθμημένης λίστας σε κύκλο, τετράγωνο ή δίσκο (προεπιλογή):

<ul>
<li style = "list-style-type: square"> List item 1 </li>
</ul>

Μη αριθμημένη λίστα με προσαρμοσμένη κουκκίδα εικόνας

Εάν θέλεις να χρησιμοποιήσεις το δικό σου εικονίδιο αντί για τα προεπιλεγμένα, μπορείς να το κάνεις με CSS. Ίσως ένα αστέρι ή μια καρδιά ή και κάτι άλλο; Θα χρειαστεί να δημιουργήσεις μια αρκετά μικρή εικόνα και να την ανεβάσεις κάπου online:

<ul style = "list-style-image: url ('https://yourimageurl.com/yourbullet.jpg')">
<li> List item 1 </ li>
<li> List item 2 </ li>
<li> List item 3 </ li>
</ ul>

Ειδικοί χαρακτήρες HTML

Σύμβολο πνευματικών δικαιωμάτων ©

©

tο σύμβολο <

& lt;

το σύμβολο>

& gt;

Ampersand &

&

Σύμβολο εμπορικού σήματος ™

™

Non-braking space

& nbsp;

Εισαγωγικά "

"

Εγγεγραμμένο εμπορικό σήμα ®

& reg;

Καρδιά ♥

&hearts;

Σήμα του €

€

Αριστερό βέλος ←

←

Δεξί βέλος →

→

Up Arrow ↑

↑
Κάτω βέλος ↓

↓

Spade ♠

&spades;

Club ♣

&clubs;

Diamond ♦

&diams;

Θες να συνεισφέρεις στη λειτουργία της πιο χρήσιμης ιστοσελίδας;
Υπάρχουν πολλοί τρόποι να υποστηρίξεις την ιστοσελίδα μου!

Από ένα απλό Like στην σελίδα στο Facebook μέχρι να επιλέξεις τις φιλικές μας ιστοσελίδες για τις ηλεκτρονικές σου αγορές, από τους παρακάτω συνδέσμους:
Amazon, Booking, Ebay, Eshop
Electroholic, Lenovo, Media Markt, Public

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

Αν προτιμάς αγορές από την Κίνα, προτείνω τα παρακάτω eshops:
Aliexpress, Banggood, Gearbest

Για την πλήρη προστασία όλων των συσκευών σας με Windows, Android, iOS & MacOS, προτείνω τα προϊόντα ασφαλείας της Bitdefender

ΣΗΜΑΝΤΙΚΟ: Κάθε αναδημοσίευση άρθρου ολική ή μερική θα πρέπει να γίνεται υποχρεωτικά με αναφορά πηγής στην ιστοσελίδα μας toxrisimo.gr το οποίο θα πρέπει να είναι ενεργός σύνδεσμος (do-follow link) στην σελίδα του άρθρου. Σε αντίθετη περίπτωση το ιστολόγιο επιφυλάσσεται για χρήση κάθε νόμιμου δικαιώματός του.