Στη γλώσσα HTML, και στην κατασκευή ιστοσελίδων γενικότερα, ένα χρώμα μπορεί να προσδιοριστεί χρησιμοποιώντας είτε το όνομα του χρώματος, είτε μια τιμή RGB, ή δεκαεξαδικές τιμές HEX.
Ονόματα χρωμάτων στην html
Στη γλώσσα HTML μπορούμε να χρησιμοποιήσουμε το όνομα του χρώματος για να προσδιορίσουμε το χρώμα που θα εμφανιστεί. Στο ακόλουθο παράδειγμα χρησιμοποιούμε τα ονόματα των χρωμάτων για να καθορίσουμε το χρώμα φόντου κάποιων επικεφαλίδων html:
——————————-
<!DOCTYPE html>
<html>
<body>
<h2 style=”background-color:red”>
Background-color set by using red
</h2>
<h2 style=”background-color:orange”>
Background-color set by using orange
</h2>
<h2 style=”background-color:yellow”>
Background-color set by using yellow
</h2>
<h2 style=”background-color:blue;color:white”>
Background-color set by using blue
</h2>
<h2 style=”background-color:cyan”>
Background-color set by using cyan
</h2>
</body>
</html>
——————————-
Το αποτέλεσμα φαίνεται στην παρακάτω εικόνα:
Η γλώσσα html υποστηρίζει 140 ονόματα χρωμάτων τα οποία μπορείτε να τα δείτε στην ακόλουθη σελίδα:
http://www.w3schools.com/colors/colors_names.asp
Τιμές χρωμάτων RGB
Στη γλώσσα HTML ένα χρώμα μπορεί να προσδοριστεί από μια τιμή RGB, χρησιμοποιώντας τη σύνταξη: rgb(red, green, blue)
Κάθε παράμετρος (red, green, and blue) καθορίζιε το ποσοστό συνεισφοράς κάθε χρώματος και κυμαίνεται από το 0 έως το 255.
Για παράδειγμα η τιμή rgb(255,0,0) αναπαριστά το κόκκινο χρώμα. Διότι στο κόκκινο χρώμα έχουμε δώσιε τη μέγιστη τιμή (255) ενώ τα υπόλοιπα χρώματα δεν συνεισφέρουν καθόλου διότι τους δώσαμε την τιμή 0.
Για να εμφανίσουμε το μαύρο χρώμα θα πρέπει όλες οι τιμές να μηδενιστούν. Δηλαδή το μαύρο αναπαρίσταται ως εξής: rgb(0,0,0).
Για να εμφανίσουμε το λευκό χρώμα θα πρέπει σε όλες οι τιμές να βάλουμε 255. Δηλαδή το λευκό αναπαρίσταται ως εξής: rgb(255,255,255).
Τα υπόλοιπα χρώματα πορκύπτουν από ανάμειξη χρωμάτων όπως στα παραδείγματα που ακολουθούν. Στο ακόλουθο παράδειγμα χρησιμοποιούμε τις τιμές RGB για να καθορίσουμε το χρώμα φόντου επικεφαλίδων:
——————————-
<!DOCTYPE html>
<html>
<body>
<h2 style=”background-color:rgb(255,0,0)”>
Background-color set by using rgb(255,0,0)
</h2>
<h2 style=”background-color:rgb(0,255,0)”>
Background-color set by using rgb(0,255,0)
</h2>
<h2 style=”background-color:rgb(0,0,255)”>
Background-color set by using rgb(0,0,255)
</h2>
<h2 style=”background-color:rgb(255,255,0)”>
Background-color set by using rgb(255,255,0)
</h2>
<h2 style=”background-color:rgb(255,0,255)”>
Background-color set by using rgb(255,0,255)
</h2>
<h2 style=”background-color:rgb(0,255,255)”>
Background-color set by using rgb(0,255,255)
</h2>
</body>
</html>
——————————-
Το αποτέλεσμα φαίνεται στην ακόλουθη εικόνα:
Οι αποχρώσεις του γκρι αναπαρίστανται χρησιμοποιώντας την ίδια τιμή σε όλες τις συνιστώσες του RGB, όπως τσο παράδειγμα που ακολουθεί:
——————————-
<!DOCTYPE html>
<html>
<body>
<h2 style=”background-color:rgb(0,0,0);color:white”>
Background-color set by using rgb(0,0,0)
</h2>
<h2 style=”background-color:rgb(90,90,90);color:white”>
Background-color set by using rgb(90,90,90)
</h2>
<h2 style=”background-color:rgb(128,128,128);color:white”>
Background-color set by using rgb(128,128,128)
</h2>
<h2 style=”background-color:rgb(200,200,200);color:white”>
Background-color set by using rgb(200,200,200)
</h2>
<h2 style=”background-color:rgb(255,255,255);”>
Background-color set by using rgb(255,255,255)
</h2>
</body>
</html>
——————————-
Το αποτέλεσμα φαίνεται στην εικόνα:
Δεκαεξαδικές τιμές χρωμάτων στην HTML
Στην HTML ένα χρώμα μπορεί να προσδιοριστεί χρησιμοποιώντας δεκαεηαδικές τιμές με τον εξής τρόπο: #RRGGBB, όπου RR (red: κόκινο), GG (green: πράσινο) και BB (blue: μπλε) είναι δεκαεξαδικές τιμές ανάμεσα στο 00 και στο FF (το δεκαδικό ισοδύναμο αυτών των τιμών είναι 0-255).
Για παράδειγμα, η τιμή #FF0000 αναπαιστά το κόκκινο, διότι στο κόκκινο έχουμε δώσει τη μέγιστη τιμή (FF) ενώ στα υπόλοιπα δυο χρώματα έχουμε δώσει την ελκάχιστη τιμή (00).
Στο ακόλουθο παράδειγμα έχουμε χρησιμοποιήσει τις δεκαεξαδικές τιμές χρωμάτων της HTML για να καθορίσουμε το χρώμα φόντου επικεφαλίδων:
——————————-
<!DOCTYPE html>
<html>
<body>
<h2 style=”background-color:#FF0000″>
Background-color set by using #FF0000
</h2>
<h2 style=”background-color:#00FF00″>
Background-color set by using #00FF00
</h2>
<h2 style=”background-color:#0000FF”>
Background-color set by using #0000FF
</h2>
<h2 style=”background-color:#FFFF00″>
Background-color set by using #FFFF00
</h2>
<h2 style=”background-color:#FF00FF”>
Background-color set by using #FF00FF
</h2>
<h2 style=”background-color:#00FFFF”>
Background-color set by using #00FFFF
</h2>
</body>
</html>
——————————-
Το αποτέλεσμα φαίνεται στην παρακάτω εικόνα:
Τιμές χρωμάτων στην κατασκευή ιστοσελίδων
Όταν ξεκινάμε να κατασκευάσουμε μια ιστοσελίδα οι τρόποι που μπορούμε να αναπαραστήσουμε τα χρώματα είναι οι παραπάνω. Είναι πολύ σημαντικό να γνωρίζουμε αυτούς τους τρόπους και να χρησιμοποιούμε κάθε φορά τον καλύτερο. Για παράδειγμα αν θέλουμε να βγάλουμε την τιμή ενός λογοτύπου από το photoshop θα χρησιμοποιήσουμε το δεκαεξαδικό μοντέλο που μας το δίνει έτοιμο το photoshop. Αντίθετα αν θέλουμε με γρήγορο τρόπο να βάλουμε καθαρό κόκκινο, πράσινο ή μπλε, τότε είναι καλύτερο να χρησιμοποιήσουμε τα ονόματα χρωμάτων, π.χ. red, green ή blue.
Μορφοποίηση στην html
Το χρώμα χρησιμοποιείται με πολλούς τρόπους στη μορφοποίηση html. Χρησιμοποιείται ως χρώμα γραμματοσειράς, ως χρώμα φόντου, ως χρώμα συνδέσμου. Ειδικότερα στο σύνδεσμο υπάρχουν πολλές επιλογές στις οποίες μπορεί να χρησιμοποιηθεί. Καλό θα είναι να διαβάσετε το άρθρο μας με θέμα τη μορφοποίηση στην html.
