Σάββατο, 3 Ιουνίου, 2023
spot_img
ΑρχικήhtmlΧρώματα στη γλώσσα html

Χρώματα στη γλώσσα html

Στη γλώσσα 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

Η γλώσσα 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

Οι αποχρώσεις του γκρι αναπαρίστανται χρησιμοποιώντας την ίδια τιμή σε όλες τις συνιστώσες του 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>
——————————-
Το αποτέλεσμα φαίνεται στην εικόνα:
rgb αποχρώσεις του γκρι στην 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>
——————————-
Το αποτέλεσμα φαίνεται στην παρακάτω εικόνα:

δεκαεξαδικές τιμές χρωμάτων στην html
δεκαεξαδικές τιμές χρωμάτων στην html

Τιμές χρωμάτων στην κατασκευή ιστοσελίδων

Όταν ξεκινάμε να κατασκευάσουμε μια ιστοσελίδα οι τρόποι που μπορούμε να αναπαραστήσουμε τα χρώματα είναι οι παραπάνω. Είναι πολύ σημαντικό να γνωρίζουμε αυτούς τους τρόπους και να χρησιμοποιούμε κάθε φορά τον καλύτερο. Για παράδειγμα αν θέλουμε να βγάλουμε την τιμή ενός λογοτύπου από το photoshop θα χρησιμοποιήσουμε το δεκαεξαδικό μοντέλο που μας το δίνει έτοιμο το photoshop. Αντίθετα αν θέλουμε με γρήγορο τρόπο να βάλουμε καθαρό κόκκινο, πράσινο ή μπλε, τότε είναι καλύτερο να χρησιμοποιήσουμε τα ονόματα χρωμάτων, π.χ. red, green ή blue.

Μορφοποίηση στην html

Το χρώμα χρησιμοποιείται με πολλούς τρόπους στη μορφοποίηση html. Χρησιμοποιείται ως χρώμα γραμματοσειράς, ως χρώμα φόντου, ως χρώμα συνδέσμου. Ειδικότερα στο σύνδεσμο υπάρχουν πολλές επιλογές στις οποίες μπορεί να χρησιμοποιηθεί. Καλό θα είναι να διαβάσετε το άρθρο μας με θέμα τη μορφοποίηση στην html.

Rate this post
Προηγούμενο άρθροΣχόλια στη γλώσσα html
Επόμενο άρθροΜορφοποίηση html μέσω css

ΑΦΗΣΤΕ ΜΙΑ ΑΠΑΝΤΗΣΗ

εισάγετε το σχόλιό σας!
παρακαλώ εισάγετε το όνομά σας εδώ

Must Read

spot_img