# Πώς να προσαρμόσετε τα φόντα HTML με χρώματα ή εικόνες Τα φόντα HTML μπορούν να δημιουργηθούν με τιμές χρωμάτων ή με ένα αρχείο εικόνας. Η επιλογή του σωστού φόντου μπορεί να βελτιώσει το σχεδιασμό του ιστότοπού σας, διασφαλίζοντας παράλληλα ότι το περιεχόμενό σας παραμένει σαφές και ευανάγνωστο. ## Τι είναι τα φόντα HTML; Η **περιοχή πίσω από το περιεχόμενο** μιας ιστοσελίδας αναφέρεται ως φόντο HTML. Αυτά τα φόντα μπορούν να οριστούν κατά τη δημιουργία μιας σελίδας σε HTML. Μπορούν επίσης να τροποποιηθούν αργότερα, ανάλογα με τις ανάγκες. Από προεπιλογή, τα φόντα HTML είναι λευκά. Η αλλαγή αυτή συνιστάται όχι μόνο ως τρόπος βελτίωσης του σχεδιασμού ενός ιστότοπου, αλλά και για τη βελτίωση της ορατότητας του περιεχομένου. ## Πώς μπορεί να αλλάξει το φόντο HTML; Υπάρχουν δύο βασικοί τρόποι για να σχεδιάσετε φόντα HTML: - **εφαρμόζοντας μια τιμή χρώματος** - **χρησιμοποιώντας μια εικόνα ή μια διαβάθμιση** Αυτές οι τιμές ορίζονται μέσω του χαρακτηριστικού HTML `style`. Στις επόμενες ενότητες, θα σας καθοδηγήσουμε και στις δύο μεθόδους. Tip Μπορείτε να μάθετε περισσότερα σχετικά με τις δυνατότητες της ετικέτας στυλ HTML στο άρθρο μας για το θέμα αυτό. ### Ορισμός φόντων HTML με βάση την τιμή χρώματος Για να αλλάξετε το χρώμα ενός φόντου HTML, χρησιμοποιήστε το `style` χαρακτηριστικό και την `background-color` ή `bgcolor` ιδιότητα. Υπάρχουν τρεις διαφορετικές επιλογές για τον καθορισμό της **τιμής χρώματος**: - **Όνομα χρώματος**: Έχετε τη δυνατότητα να ορίσετε το επιθυμητό χρώμα χρησιμοποιώντας απλά το όνομά του. Εκτός από τα τυπικά χρώματα όπως `red`, `yellow` ή `green`, είναι επίσης δυνατή η χρήση ειδικών χρωμάτων όπως `lightblue` ή `deepskyblue`. Η διάκριση μεταξύ κεφαλαίων και μικρών γραμμάτων δεν έχει σημασία κατά τον καθορισμό του χρώματος. - **Εξαγωνικός κωδικός χρώματος**: Μπορείτε επίσης να καθορίσετε χρώματα χρησιμοποιώντας τον εξαψήφιο δεκαεξαδικό αριθμό τους. Αυτός αποτελείται από τρία ζεύγη που αποτελούνται από τους αριθμούς `0` έως `9` και τα γράμματα `a` έως `f`. Το πρώτο ζεύγος αντιπροσωπεύει την τιμή του κόκκινου, το δεύτερο αντιπροσωπεύει το πράσινο και το τρίτο αντιπροσωπεύει το μπλε, με το 00 να είναι η χαμηλότερη τιμή και το ff η υψηλότερη. Για παράδειγμα, το μπλε θα ήταν `0000ff`. - **Τιμή RGB**: Εναλλακτικά, μπορείτε να χρησιμοποιήσετε την τιμή RGB, η οποία αποτελεί επίσης τη βάση για τον δεκαεξαδικό κωδικό χρώματος. Οι τιμές κυμαίνονται από `0` έως `255` και αντιστοιχούν στα χρώματα κόκκινο, πράσινο και μπλε. Για παράδειγμα, το μπλε θα είναι RGB (0, 0, 255). Η σύνταξη που χρησιμοποιείτε για να ορίσετε το επιθυμητό χρώμα για τα φόντα HTML σας έχει την εξής μορφή: ```html ``` Στο παρακάτω παράδειγμα, χρησιμοποιούμε έναν δεκαεξαδικό κωδικό χρώματος για να ορίσουμε το ανοιχτό μπλε ως χρώμα φόντου: ```html background-example

Here’s your heading

Here’s your website content.

``` Έτσι φαίνεται: [![Image: HMTL background: Colour example](https://www.ionos.com/el-gr/digitalguide/fileadmin/_processed_/1/5/csm_html-color-background-example_fa19e51324.webp "HMTL background: Colour example")](https://www.ionos.com/el-gr/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/html-color-background-example.png) Sample HTML background with the hex code ‘#BFEFFF’. Εάν χρειάζεται, μπορείτε επίσης να ορίσετε χρώματα για φόντα HTML ξεχωριστά για μεμονωμένα τμήματα των ιστοσελίδων σας. Αυτό γίνεται χρησιμοποιώντας το χαρακτηριστικό `style` και την ιδιότητα `background-color`. Μπορείτε να δείτε πώς λειτουργεί αυτό στο παρακάτω παράδειγμα, όπου έχουν οριστεί διαφορετικά χρώματα για το συνολικό φόντο, καθώς και για τα φόντα των `

` επικεφαλίδων και `

` τμημάτων κειμένου: ```html background-example

The background of this headline is set to DodgerBlue.

This background is set to DarkTurquoise.

``` [![Image: Example: Three different coloured HTML backgrounds](https://www.ionos.com/el-gr/digitalguide/fileadmin/_processed_/b/1/csm_html-background-example-2_a5a13bd28c.webp "Example: Three different coloured HTML backgrounds")](https://www.ionos.com/el-gr/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/html-background-example-2.png) Example of an HTML background with three different colours. ### Ρύθμιση εικόνων ως φόντο HTML Για να μπορείτε να χρησιμοποιήσετε εικόνες ή γραφικά ως φόντο HTML, πρέπει να αποθηκευτούν σε μορφές εικόνας *JPG*, *PNG*, *SVG*, *WebP* ή *GIF*. Το παρακάτω παράδειγμα δείχνει τον κατάλληλο κώδικα για την ενσωμάτωση μιας εικόνας ως φόντου. Η διαδρομή προς την εικόνα πρέπει να προσαρμοστεί ξεχωριστά: ```html background-example

Here’s your heading

Here’s your website content.

``` Όταν χρησιμοποιείτε μια εικόνα, πρέπει πάντα να έχετε κατά νου την αναγνωσιμότητα του περιεχομένου. Καθορίζοντας πρόσθετες παραμέτρους, μπορείτε να προσαρμόσετε τη **θέση** της εικόνας ή του γραφικού, ώστε να διασφαλίσετε ότι το κείμενο διακρίνεται από το φόντο. This is a markdown version of: [https://www.ionos.com/el-gr/digitalguide/istoselides/anaptyxi-istoselidon/fonta-html/](https://www.ionos.com/el-gr/digitalguide/istoselides/anaptyxi-istoselidon/fonta-html/) for AI/LLM consumption.