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

Τι είναι τα φόντα HTML;

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

Πώς μπορεί να αλλάξει το φόντο HTML;

Υπάρχουν δύο βασικοί τρόποι για να σχεδιάσετε φόντα HTML:

  • εφαρμόζοντας μια τιμή χρώματος
  • χρησιμοποιώντας μια εικόνα ή μια διαβάθμιση

Αυτές οι τιμές ορίζονται μέσω του χαρακτηριστικού HTML style. Στις επόμενες ενότητες, θα σας καθοδηγήσουμε και στις δύο μεθόδους.

Ορισμός φόντων 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 σας έχει την εξής μορφή:

<body style="background-color: value;">
html

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

<html lang="en">
<head>
<title>background-example</title>
</head>
<body>
<div style="background-color: #BFEFFF;">
<h1>Here’s your heading</h1>
<p>
Here’s your website content.
</p>
</div>
</body>
</html>
html

Έτσι φαίνεται:

Image: HMTL background: Colour example
Sample HTML background with the hex code ‘#BFEFFF’.

Εάν χρειάζεται, μπορείτε επίσης να ορίσετε χρώματα για φόντα HTML ξεχωριστά για μεμονωμένα τμήματα των ιστοσελίδων σας. Αυτό γίνεται χρησιμοποιώντας το χαρακτηριστικό style και την ιδιότητα background-color. Μπορείτε να δείτε πώς λειτουργεί αυτό στο παρακάτω παράδειγμα, όπου έχουν οριστεί διαφορετικά χρώματα για το συνολικό φόντο, καθώς και για τα φόντα των <h2> επικεφαλίδων και <p> τμημάτων κειμένου:

<html lang="en">
<head>
<title>background-example</title>
<style>
body {background-color: #BFEFFF;}
h2 {background-color: #1E90FF;}
p {background-color: #00CED1;}
</style>
</head>
<body>
<h2>The background of this headline is set to DodgerBlue.</h2>
<p>This background is set to DarkTurquoise.</p>
</body>
</html>
html
Image: Example: Three different coloured HTML backgrounds
Example of an HTML background with three different colours.

Ρύθμιση εικόνων ως φόντο HTML

Για να μπορείτε να χρησιμοποιήσετε εικόνες ή γραφικά ως φόντο HTML, πρέπει να αποθηκευτούν σε μορφές εικόνας JPG, PNG, SVG, WebP ή GIF. Το παρακάτω παράδειγμα δείχνει τον κατάλληλο κώδικα για την ενσωμάτωση μιας εικόνας ως φόντου. Η διαδρομή προς την εικόνα πρέπει να προσαρμοστεί ξεχωριστά:

<html lang="en">
<head>
<title>background-example</title>
<style>
	body { background-image: url('/user/folder/assets/background/img/image.svg');	background-size: cover;}
</style>
</head>
<body>
<div style="background-color: rgba(255, 255, 255, 0.8);">
<h1>Here’s your heading</h1>
<p>
Here’s your website content.
</p>
</div>
</body>
</html>
html

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

Go to Main Menu