Σχεδίαση και Ανάπτυξη Ιστότοπων

Σχεδίαση και Ανάπτυξη Ιστότοπων HTML Καθορισμός Χρωμάτων και Γραμματοσειρών σε μια ιστοσελίδα Παρουσίαση 7 η Βελώνης Γεώργιος Καθηγητής 1

Σημασία συμβόλων HTML5 tags. Obsolete tags: Μην αφήνετε αυτές τις ετικέτες στον κώδικά σας. Deprecated tags: Αντικαταστήστε αυτές τις ετικέτες πριν καταστούν παρωχημένες. Αυτό γίνεται για να εξασφαλιστεί η μελλοντική συμβατότητα. Restored/ Redefined tags in HTML5: Αναθεωρήστε αυτές τις ετικέτες στον κώδικά σας, όπως καθορίστηκαν στην HTML5 και ως εκ τούτου έχουν νέες έννοιες. 2

Σημασία συμβόλων HTML5 tags: Obsolete tags:<basefont> Deprecated tags: ιδιότητες bgcolor, text (<body>), color, size, family (). Restored/ Redefined tags in HTML5: 3

Χρήσιμοι Ορισμοί Deprecated και Obsolete Deprecated καλείται ένα στοιχείο ή παράμετρος που θεωρείται ξεπερασμένο. Τα deprecated στοιχεία μπορεί να καταστούν άνευ αντικειμένου στο μέλλον, αλλά οι browsers θα πρέπει να συνεχίσουν να τα υποστηρίζουν για λόγους συμβατότητας με παλαιότερες εκδόσεις. Obsolete καλείται ένα στοιχείο ή χαρακτηριστικό που δεν έχει καμία εγγύηση για τη μελλοντική του browserυποστήριξη και πλέον δεν ορίζεται στην προδιαγραφή W3C. 4

Βελώνης Γεώργιος - Καθηγητής Browsers δοκιμών Οι δοκιμές έγιναν στους παρακάτω browsers και εκδόσεις τους: Google Chrome 52.0 Mozilla FireFox 48.0 Yandex 16.7 Internet Explorer 11.0 Safari 5.1.7 Opera 39.0 Σημείωση: Με εξαίρεση τη <basefont>, όλες οι ετικέτες και οι ιδιότητες που θα παρουσιαστούν είτε obsolete είτε deprecated, συνεχίζουν να ερμηνεύονται κανονικά, τουλάχιστον μέχρι τις παραπάνω εκδόσεις των browsers που γίνανε οι δοκιμές. 5

Περιεχόμενα Χρώματα Καθορισμός χρώματος υπόβαθρου ιστοσελίδας Καθορισμός χρώματος κειμένου ιστοσελίδας Καθορισμός χρώματος, μεγέθους και γραμματοσειράς κειμένου 6

Χρώματα Η χρήση των χρωμάτων στις ιστοσελίδες τις κάνει πιο όμορφες και πιο ελκυστικές. Μπορεί να μπει χρώμα σε πολλά στοιχεία μιας ιστοσελίδας, όπως σε συνδέσμους, σε κείμενο, σε ολόκληρο πίνακα ή μόνο σε ορισμένα κελιά του, στο φόντο (background) της κ.λπ. Το σύστημα χρωμάτων RGB (Red, Green, Blue), κατασκευάζει όλα τα χρώματα από το συνδυασμό των χρωμάτων κόκκινο, πράσινο και μπλε. Τα τρία αυτά βασικά χρώματα κάνουν χρήση 8 bits το καθένα, τα οποία έχουν ακέραιες τιμές από 0 έως 255. Αυτό σημαίνει 256 * 256 * 256 = 16.777.216 δυνατούς συνδυασμούς χρωμάτων. 7

Χρώματα Υπάρχουν τρεις τρόποι για να καθοριστούν τα χρώματα σε μια ιστοσελίδα: 1. Χρησιμοποιώντας ένα όνομα του χρώματος από ένα σύνολο 140 (αρχικά ήταν 16) προκαθορισμένων ονομάτων (π.χ. red, blue, κ.λπ.). 2. Χρησιμοποιώντας το σύμβολο «#» ακολουθούμενο από τους διψήφιους 16δικούς κωδικούς, που αντιστοιχούν σε κάθε ένα από τα τρία βασικά χρώματα, με τιμές από 00 έως ff (π.χ. #dc143c). 3. Χρησιμοποιώντας τη δήλωση rgb και παραμέτρους της τους 10δικούς κωδικούς, που αντιστοιχούν σε κάθε ένα από τα τρία βασικά χρώματα, με τιμές από 0 μέχρι 255 (π.χ. rgb(255,235,205)). 8

Χρώματα Στην HTML5 έχουν καταργηθεί όλες οι ιδιότητες που ορίζουν χρώμα στα στοιχεία μιας σελίδας και χρησιμοποιούνται για το σκοπό αυτό μόνο CSS. Τα περισσότερα προγράμματα επεξεργασίας HTML σελίδων, αλλά και όλα τα προγράμματα επεξεργασίας γραφικών, διαθέτουν έναν επιλογέα χρωμάτων. Με τη χρήση αυτού του επιλογέα, μπορείτε να επιλέξετε (από μια παλέτα) ή να δημιουργήσετε το χρώμα που επιθυμείτε να χρησιμοποιήσετε, για κάποιο στοιχείο της ιστοσελίδας σας. Πολλές φορές, όταν ένας web developer χρειάζεται ένα εύκολο ευρετήριο χρωμάτων και των κωδικών τους, το βρίσκει και στο Web. Στην παρακάτω τοποθεσία, μπορείτε να βρείτε ή να κατασκευάσετε τον κωδικό του χρώματος που επιθυμείτε: http://www.w3schools.com/colors/colors_picker.asp 9

Χρώματα Επιλογή ιδιότητας και χρώματος για ένα στοιχείο HTML μέσω της εφαρμογής επεξεργασίας HTML σελίδων, HTML Kit 10

Χρώματα Δυνατότητες επιλογής ή δημιουργίας του επιθυμητού χρώματος μέσω του επιλογέα Pick Color της εφαρμογής HTML Kit 11

Χρώματα Εύρεση του κωδικού χρώματος με την εφαρμογή Ζωγραφική των Windows Εύρεση του κωδικού χρώματος με την εφαρμογή Gimp 12

Χρώματα Online εύρεση του κωδικού χρώματος μέσω της ιστοσελίδας ColorPicker 13

Χρώματα Χρώμα HTML/CSS όνομα 16δικός κωδικός #RRGGBB Δεκαδικός κωδικός(r,g,b) Black #000000 (0,0,0) White #FFFFFF (255,255,255) Red #FF0000 (255,0,0) Lime #00FF00 (0,255,0) Blue #0000FF (0,0,255) Yellow #FFFF00 (255,255,0) Cyan/Aqua #00FFFF (0,255,255) Magenta/Fuchsia #FF00FF (255,0,255) Silver #C0C0C0 (192,192,192) Gray #808080 (128,128,128) Maroon #800000 (128,0,0) Olive #808000 (128,128,0) Green #008000 (0,128,0) Purple #800080 (128,0,128) Teal #008080 (0,128,128) Navy #000080 (0,0,128) Τα 16 αρχικά προκαθορισμένα ονόματα χρωμάτων και οι κωδικοί τους 14

Καθορισμός χρώματος υπόβαθρου ιστοσελίδας Το βασικό χρώμα του υπόβαθρου μας ιστοσελίδας είναι λευκό, ενώ το χρώμα του κειμένου της μαύρο. Αυτό συμβαίνει γιατί αυτές είναι οι προκαθορισμένες (default) επιλογές, αν δε δηλωθεί από τον web developer κάτι το διαφορετικό. Η δήλωση του χρώματος του υποβάθρου, καθώς και του χρώματος του κειμένου, γίνεται με τη χρήση ειδικών παραμέτρων, οι οποίες μπορούν να ενσωματωθούν στο άνοιγμα της ετικέτας <body>. Η παράμετρος που ορίζει το χρώμα του υπόβαθρου μιας ιστοσελίδας είναι η bgcolor. 15

Καθορισμός χρώματος υπόβαθρου ιστοσελίδας Σύνταξη: bgcolor ="όνομα_χρώματος #xxxxxx rgb(x,x,x)" όνομα_χρώματος: Ορίζει το χρώμα φόντου με το όνομα του χρώματος (π.χ. "yellow") #xxxxxx: Ορίζει το χρώμα φόντου με τον 16δικό του κωδικό (π.χ. "#ffff00") rgb(x,x,x): Ορίζει το χρώμα φόντου με τον 10δικό του κωδικό rgb (π.χ. "rgb (255,255,0)"), δηλαδή Red-Green-Blue Σύνταξη CSS: body { background-color: όνομα_χρώματος #xxxxxx rgb(x,x,x);} Σημείωση: Τα CSS θα παρουσιαστούν αναλυτικά σε επόμενα μαθήματα 16

Καθορισμός χρώματος υπόβαθρου ιστοσελίδας Παραδείγματα για κίτρινο υπόβαθρο σελίδας: <body bgcolor="yellow"> <body bgcolor="#ffff00"> <body bgcolor="rgb(255,255,0)"> 17

Καθορισμός χρώματος κειμένου ιστοσελίδας Η ιδιότητα text ορίζει το χρώμα του απλού κειμένου για ολόκληρη την ιστοσελίδα. Σύνταξη: text="όνομα_χρώματος #xxxxxx rgb(x,x,x)" Σύνταξη CSS: body {color: όνομα_χρώματος #xxxxxx rgb(x,x,x);} Παραδείγματα για κόκκινο χρώμα κειμένου: <body text="red"> <body text="#ff0000"> <body text="rgb(255,0,0) "> 18

Καθορισμός χρώματος κειμένου ιστοσελίδας Παράδειγμα:.. <body bgcolor="yellow" text="red"> κόκκινο χρώμα κειμένου σε κίτρινο φόντο </body>.. 19

Βελώνης Γεώργιος - Καθηγητής Καθορισμός χρώματος, μεγέθους και γραμματοσειράς κειμένου Στο web θα συναντήσετε δύο οικογένειες γραμματοσειρών, την generic family και την font family. Με τον όρο «οικογένεια γραμματοσειρών» αναφερόμαστε σε μια ομάδα από γραμματοσειρές με κοινά χαρακτηριστικά. Generic family: είναι μια οικογένεια (ομάδα) γραμματοσειρών με παρόμοια εμφάνιση, όπως Serif, Sans-serif, Cursive, Monospace και Fantasy. Font family: είναι ένα συγκεκριμένο μέλος μιας οικογένειας γραμματοσειρών, όπως Times New Roman (generic family serif), Arial (generic family sans-serif), Courier New, Lucida Console (generic family monospace) κ.λπ. 20

Βελώνης Γεώργιος - Καθηγητής Καθορισμός χρώματος, μεγέθους και γραμματοσειράς κειμένου Οι γενικές (generic) γραμματοσειρές έχουν τα παρακάτω χαρακτηριστικά: Serif: Είναι απλά σχήματα χωρίς κοφτές άκρες (με πατούρες). Είναι πιο ευανάγνωστες στο web. Τέτοιες γραμματοσειρές είναι η Times New Roman και η Georgia. Sans-Serif: Είναι πολύπλοκα σχήματα με κοφτές άκρες (χωρίς πατούρες). Τέτοιες γραμματοσειρές είναι η Arial και η Verdana. Monospace: Γραμματοσειρές καθορισμένου πλάτους. Cursive: Γραμματοσειρές χειρόγραφης μορφής. Fantasy: Διακοσμητικές γραμματοσειρές, για τίτλους κ.λπ. 21

Βελώνης Γεώργιος - Καθηγητής Καθορισμός χρώματος, μεγέθους και γραμματοσειράς κειμένου Δεδομένου ότι δεν είναι όλες οι γραμματοσειρές διαθέσιμες σε όλους τους υπολογιστές (υπάρχουν χιλιάδες γραμματοσειρές, δωρεάν ή μη), η HTML δίνει τη δυνατότητα να οριστούν σε σειρά περισσότερες από μία. Πρώτη μπαίνει η επιθυμητή γραμματοσειρά και κατόπιν οποιεσδήποτε άλλες πρόκειται να γεμίσουν τη σελίδα. Καλό θα είναι να τελειώνει ο κατάλογος με μια συνηθισμένη γραμματοσειρά, που ανήκει σε μία από τις πέντε γενικές κατηγορίες, έτσι ώστε να αποφευχθούν προβλήματα στην περίπτωση που η πρώτη ή αυτές που την ακολουθούν δεν αναγνωριστούν.. 22 Διαφορές μεταξύ των δύο οικογενειών γραμματοσειρών

Καθορισμός χρώματος, μεγέθους και γραμματοσειράς κειμένου Η ετικέτα <basefont> χρησιμοποιούνταν για να καθορίσει την προκαθορισμένη γραμματοσειρά (ιδιότητα face), το μέγεθος (ιδιότητα size) και το χρώμα (ιδιότητα color) των χαρακτήρων μιας σελίδας. Η ετικέτα αυτή έχει καταργηθεί και δεν υποστηρίζεται σε καμία από τις τελευταίες εκδόσεις των γνωστότερων browsers. Στη θέση της χρησιμοποιούνται CSS. Παράδειγμα:. <body> <basefont face="serif" color="red" size="5"/> η ετικέτα έχει καταργηθεί </body>. Καμία μεταβολή 23

Καθορισμός χρώματος, μεγέθους και γραμματοσειράς κειμένου Η μεταβολή του χρώματος, του μεγέθους και της γραμματοσειράς που χρησιμοποιείται σε διάφορες παραγράφους του κειμένου μιας ιστοσελίδας, γίνεται με τη χρήση της διπλής ετικέτας και των υποστηριζόμενων ιδιοτήτων της. Σύνταξη: Κείμενο Σύνταξη CSS: επιλογέας{ font-family: όνομα_γραμματοσειράς; color: χρώμα_κειμένου; font-size: μέγεθος_κειμένου; // (px, em, %, ) } 24

Καθορισμός χρώματος, μεγέθους και γραμματοσειράς κειμένου Ιδιότητες της ετικέτας : face: Ορίζει τη γραμματοσειρά του κειμένου μέσα σε ένα στοιχείο . Για να ορίσετε μια λίστα προτεραιότητας σε περίπτωση πολλών γραμματοσειρών, διαχωρίστε τα ονόματα με κόμμα (π.χ. , κ.λπ.) Προσοχή: Όταν σε μια σειρά γραμματοσειρών υπάρχουν σύνθετα ονόματα, όπως Times New Roman, τότε αυτά μπαίνουν μέσα σε αποστρόφους, όπως βλέπετε και στο παραπάνω παράδειγμα. color: Ισχύει ότι και για την ιδιότητα text της ετικέτας <body>. 25

Καθορισμός χρώματος, μεγέθους και γραμματοσειράς κειμένου Ιδιότητες της ετικέτας συνέχεια: size : Ένας αριθμός από 1 έως 7, o οποίoς καθορίζει το μέγεθος του κειμένου. Η προεπιλεγμένη τιμή από τους browsers είναι το 3. Ένας άλλος τρόπος ορισμού του μεγέθους του κειμένου στην ιστοσελίδα, είναι η εισαγωγή ενός αριθμού από το 1 έως 4, έχοντας μπροστά του έναν από τους τελεστές «+» ή «-». Το «+» αυξάνει το μέγεθος του κειμένου βάσει της προεπιλεγμένης τιμής του (3), ενώ το «-» το μειώνει. Για παράδειγμα η δήλωση size="+2" δίνει μέγεθος κειμένου 5 (3+2), ενώ η δήλωση size="-2" δίνει μέγεθος κειμένου 1 (3-2). 26

Καθορισμός χρώματος, μεγέθους και γραμματοσειράς κειμένου Παράδειγμα: <body> κείμενο με γραμματοσειρά Arial, μπλε χρώμα, μέγεθος 5 κείμενο με γραμματοσειρά Times New Roman, κόκκινο χρώμα, μέγεθος 2 </body>. 27

Πηγές Προγραμματιστικά Εργαλεία για το Διαδίκτυο: Σχολικό βιβλίο W3schools (http://www.w3schools.com/tags/) WLearn (http://www.wlearn.gr/index.php/html-49) W3C (https://www.w3.org/tr/html5/obsolete.html) RapidTables (http://www.rapidtables.com/web/color/rgb_color.htm) W3schools.com (http://www.w3schools.com/css/css_font.asp) W3C Translation to Greek (http://www.greekcom.org/style/examples/007/fonts.htm) 28