Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας

Πανεπιστήμιο Αιγαίου Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας ικτυακά Πολυμέσα Ι (Β Έτος, 3ο εξ) ιάλεξη #6η: HTML: ετικέτες ΜΕΤΑ, Cascading Style Sheet (CSS) Γαβαλάς Δαμιανός dgavalas@aegean.gr Χειμερινό εξάμηνο Ετικέτες META 1

Ετικέτες METΑ Οι ετικέτες <META> της HTML δημιουργήθηκαν για να επιτρέπει την ενσωμάτωση επιπλέον πληροφοριών σε μια ιστοσελίδα που δεν εμφανίζουν οι web browsers. Οι ετικέτες αυτές περιέχονται στο τμήμα <HEAD>... </HEAD> του HTML αρχείου. Επιτρέπουν να: Προσθέσουμε επιπλέον πληροφορίες που θα κάνουν εφικτό τον εντοπισμό της σελίδας σας από τις μηχανές αναζήτησης. Σεπερίπτωσηπουησελίδαμαςέχειμετακινηθεί, ο επισκέπτης της να ανακατευθυνθεί αυτόματα στη νέα της τοποθεσία (διεύθυνση) Ετικέτες Περιγραφής (META Descriptor tags) Περιγράφουν το περιεχόμενο της σελίδας Σύνταξη μιας ετικέτας περιγραφής: <META name="description" content="this tutorial explains."> Η περιγραφή της σελίδας επιστρέφεται από τις μηχανές αναζήτησης Περιγραφή της σελίδας Αυτό το έγγραφο δεν περιλαμβάνει ετικέτα περιγραφής. Αυτό που ακολουθεί το link είναι οι πρώτες γραμμές του HTML αρχείου 2

Ετικέτες ΜΕΤΑ για ορισμό λέξεων-κλειδιών Άλλη μια χρήση της ετικέτας META είναι η η εισαγωγή λέξεων-κλειδιών που πιθανά να χρησιμοποιήσει κάποιος που αναζητά μια σελίδα παρόμοια με τη δική μας. Για παράδειγμα: <META name="keywords" content="html, tutorial, learn, make, create, design, web page, εγχειρίδιο, ιστοσελίδες, writing, form, tables, frames"> Ετικέτες ΜΕΤΑ για ανακατεύθυνση σε άλλη διεύθυνση Συχνά σελίδες μεταφέρονται (αναδιοργάνωση web site, π.χ. μεταφορά σε άλλο φάκελο, μεταφορά web site σε άλλο domain) Καλή πρακτική να αφήνουμε στην «παλιά διεύθυνση» μια σελίδα που να ανακατευθύνει τον επισκέπτη στη νέα διεύθυνση, μέχρι να ενημερώσει τα bookmarks του) <meta http-equiv="refresh" content="5;url=http://www.w3schools.com"> Αυτόματη μεταφορά στη νέα διεύθυνση μετά από 5 sec Εκτέλεση 3

Συζήτηση Σας ζητούν να υλοποιήσετε μια ιστοσελίδα που να ανανεώνεται (refresh) αυτόματα κάθε 1 min, χωρίς δηλαδή ο χρήστης να χρειαστεί να πατάει το πλήκτρο Refresh π.χ. μια σελίδα που ενημερώνει το χρήστη σε real-time για το σκορ ενός αγώνα ποδοσφαίρου που βρίσκεται σε εξέλιξη Λύση: Αν η διεύθυνση της σελίδας που πρέπει να ανανεώνεται αυτόματα είναι: http://www.mydomain.gr/pages/reload.htm, της προσθέτουμε τον κώδικα: <meta http-equiv="refresh" content="60;url=http://www.mydomain.gr/ pages/reload.htm"> Επικαλυπτόμενα Φύλλα Στυλ (Cascading Style Sheets) 4

Μορφοποίηση κειμένου με απλή HTML (Ι) Ορισμός μεγέθους γραμματοσειράς <font size=n>σώμα Κειμένου</font> Ορισμός σχετικού μεγέθους <font size=+1>σώμα Κειμένου</font> <font size=-2>σώμα Κειμένου</font> Αλλαγή προκαθορισμένου μεγέθους <basefont size=5> Μορφοποίηση κειμένου με απλή HTML (ΙΙ) <HTML><HEAD><TITLE>Fonts</TITLE> </HEAD> <BODY> <p><b><font size=+5>v</font><font size=+3>olcano WEB</font></b></p> <font size=12>info about volcanos...</font> </BODY></HTML> 5

Χρώμα γραμματοσειράς με απλή HTML <HTML><HEAD><TITLE>Font Colors</TITLE> </HEAD> <BODY> <B><font size=+4 color=#ff66ff>v</font> <font size=+3 color=#dd0055>olcano WEB</font></B> <p><font size=12>info about volcanos...</font> </BODY></HTML> Μορφοποίηση κάθε κεφαλίδας και παραγράφου ξεχωριστάμεαπλήhtml Η μορφοποίηση κάθε κεφαλίδας ή παραγράφου ξεχωριστά είναι δύσκολη και χρονοβόρα διαδικασία (η HTML δεν είναι σχεδιασμένη γι αυτό το σκοπό) <html> <head> <title>standard formatting is not easy...</title> </head> <body> <h1>αυτή είναι μια επικεφαλίδα. Ποιο είναι το χρώμα της;</h1> <font color="blue"> <h1>αυτή είναι μια χρωματισμένη επικεφαλίδα...</h1> </font> <font color="blue"> <h1>αυτή </font> </body> </html> η επικεφαλίδα έχει το ίδιο χρώμα...</h1> Παράδειγμα 6

Επικαλυπτόμενα φύλλα στυλ (CSS) Επικαλυπτόμενα φύλλα στυλ (Cascading Style Sheets): μια νέα τεχνολογία που τυποποιήθηκε από το W3C για να επιτρέψει στους web authors να ασκήσουν αποτελεσματικό έλεγχο στη σχεδίαση / μορφοποίηση των εγγράφων, πέρα από την περιγραφή του τρόπου εμφάνισής τους Ένας κανόνας CSS αποτελείται από δύο μέρη: Επιλογέα (selector): ένα tag της HTML, π.χ. h1 ή p ήλωση (declaration): ορίζει την ιδιότητα και την τιμή του επιλογέα h1 {color: blue; font-size: 15pt; } Επιλογέας Ιδιότητα Τιμή Που τοποθετούνται οι κανόνες στυλ: Ενσωματωμένο φύλλο στυλ Εξωτερικό φύλλο στυλ Ένθετο στυλ Υποστηρίζονται από ΙΕ4 και Netscape4 και μεταγενέστερους Μορφοποίηση με ενσωματωμένα στυλ (I) <html> <head> <title>styles formatting is easier!...</title> <style type="text/css"> h1 {color: red} h2 {color: yellow} p {color: green; } </style> </head> Ομοιόμορφη μορφοποίηση όλων των κεφαλίδων επιπέδου 1 του HTML εγγράφου με κόκκινο χρώμα font-size: 15pt; font-family: "Times New Roman"; 7

Μορφοποίηση με ενσωματωμένα στυλ (ΙI) <body> <h1>επικεφαλίδα επιπέδου 1</h1> <font color="blue"> <h2>επικεφαλίδα επιπέδου 2...</h2> </font> <p>αυτό είναι κείμενο παραγράφου...</p> <font size="12" color="blue"> <p>αυτή είναι μια δεύτερη παράγραφος...</p> </font> </body> </html> Μορφοποίηση με ενσωματωμένα στυλ (IIΙ) Μειονέκτημα χρήσης styles: ακόμα κι αν θέλω να αλλάξω τη μορφοποίηση κάποιας δομής που έχω συμπεριλάβει στο style, αυτό δεν είναι εφικτό! 8

Μορφοποίηση με ενσωματωμένα στυλ (IV) <HEAD> <STYLE TYPE="text/css"> body {background-color: #CCFFCC; font-family: Arial, Helvetica, sans-serif; color: #330066} a:link {color: #CC9900} a:visited {color: #660000} a:hover {color: #FFCC00} a:active {color: #FF0000} </STYLE> </HEAD> Σύνδεσμος που δεν έχει επιλεγεί Σύνδεσμος που έχει επιλεγεί Ο δείκτης του ποντικιού βρίσκεται από πάνω του Ενεργός σύνδεσμος (έχει επιλεγεί τελευταία) Παράδειγμα Μορφοποίηση με στυλ που ορίζεται σε εξωτερικό αρχείο <style type="text/css"> body { background-color: #CCFFFF; font-family: Arial, Helvetica, sans-serif; color: #330066} a:link { color: #CC9900} a:visited { color: #660000} a:hover { color: #FFCC00} </style> <html> <head> <link rel="stylesheet" href="mystyle.css"> </head> <body>... </body> </html> mystyle.css Οι κανόνες μορφοποίησης αυτού του εγγράφου έχουν οριστεί στο αρχείο mystyle.css Ποιο το πλεονέκτημα χρήσης εξωτερικών αρχείων στυλ; Το ίδιο CSS αρχείο μπορεί να ορίσει τη μορφοποίηση περισσότερων εγγράφων (σε αντίθεση με τους ενσωματωμένους κανόνες στυλ) 9

Συνηθισμένες ιδιότητες/τιμές για φύλλα στυλ: έλεγχος διάταξης σελίδων (Ι) Ιδιότητα margin-top margin-right margin-bottom margin-left margin Περιγραφή Πάνω περιθώριο ενός στοιχείου εξί περιθώριο ενός στοιχείου Κάτω περιθώριο ενός στοιχείου Αριστερό περιθώριο ενός στοιχείου Ορίζει όλα τα περιθώρια ενός στοιχείου (ισοδυναμεί με τη χρήση των 4 παραπάνω ιδιοτήτων) Τιμές Μέγεθος, ποσοστό ή auto Μέγεθος, ποσοστό ή auto Μέγεθος, ποσοστό ή auto Μέγεθος, ποσοστό ή auto έχεται μία ως 4 τιμές Τιμές: μονάδες μέτρησης όπως px (pixels), in (ίντσες), mm (χιλιοστά), cm (εκατοστά), και άλλες Συνηθισμένες ιδιότητες/τιμές για φύλλα στυλ: έλεγχος διάταξης σελίδων (ΙΙ) Ιδιότητα padding-top padding-right padding-bottom padding-left padding Περιγραφή Κενό μεταξύ του πάνω περιθωρίου και του περιεχομένου ενός στοιχείου Κενό μεταξύ του δεξιού περιθωρίου και του περιεχομένου ενός στοιχείου Κενό μεταξύ του κάτω περιθωρίου και του περιεχομένου ενός στοιχείου Κενό μεταξύ του αριστερού περιθωρίου και του περιεχομένου ενός στοιχείου Ορίζει όλα τα κενά από όλα τα περιθώρια ενός στοιχείου (ισοδυναμεί με τη χρήση των 4 παραπάνω ιδιοτήτων) Τιμές Μέγεθος, ποσοστό ή auto Μέγεθος, ποσοστό ή auto Μέγεθος, ποσοστό ή auto Μέγεθος, ποσοστό ή auto έχεται μία ως 4 τιμές 10

Συνηθισμένες ιδιότητες/τιμές για φύλλα στυλ: έλεγχος διάταξης σελίδων (ΙΙΙ) <STYLE TYPE="text/css">  </STYLE> Παράδειγμα Συνηθισμένες ιδιότητες/τιμές για φύλλα στυλ: φόντο (υπόβαθρο) εγγράφων (I) Ιδιότητα color background -color background -image background Περιγραφή Χρώμα προσκηνίου για ένα στοιχείο (ισχύει κυρίως για το κείμενο ενός στοιχείου) Χρώμα φόντου (παρασκηνίου) για ένα στοιχείο Καθορίζει αν η εικόνα φόντου επαναλαμβάνεται σε πλευρική παράθεση και, αν ναι, πως Ισοδυναμεί με χρήση όλων των προηγούμενων ιδιοτήτων χρώμα Τιμές χρώμα ή transparent repeat (επανάληψη οριζόντια/κάθετα), repeatx (επανάληψη κάθετα), repeat-y (επανάληψη κάθετα), no-repeat 11

Συνηθισμένες ιδιότητες/τιμές για φύλλα στυλ: φόντο (υπόβαθρο) εγγράφων (ΙI) <STYLE TYPE="text/css">  </STYLE> Παράδειγμα Συνηθισμένες ιδιότητες/τιμές για φύλλα στυλ: περιγράμματα (borders) (I) Ιδιότητα bordercolor borderstyle borderwidth border Περιγραφή Ορίζει το στυλ για τα 4 περιγράμματα ενός στοιχείου Το χρώμα για τα 4 περιγράμματα ενός στοιχείου Το πάχος για τα 4 περιγράμματα ενός στοιχείου Ισοδυναμεί με χρήση όλων των προηγούμενων ιδιοτήτων (ορίζει το πάχος, χρώμα και στυλ των 4 περιγραμμάτων) Τιμές none, dotted, dashed, solid, double,. χρώμα ή transparent thin, medium, thick έχεται μία ως 3 τιμές 12

Συνηθισμένες ιδιότητες/τιμές για φύλλα στυλ: περιγράμματα (borders) (ΙI) <STYLE TYPE="text/css">  </STYLE> Παράδειγμα Συνηθισμένες ιδιότητες/τιμές για φύλλα στυλ: στυλ γραμματοσειράς Ιδιότητα font-family font-size font-style font-weight font-variant font Περιγραφή H οικογένεια χαρακτήρων Μέγεθος γραμματοσειράς Στυλ γραμματοσειράς Πάχος γραμματοσειράς Γραμματοσειρά με μικρά κεφαλαία ή κανονικά Ισοδυναμεί με χρήση όλων των προηγούμενων ιδιοτήτων Τιμές Arial, Times, serif, sansserif, fantasy,. Απόλυτο, σχετικό ή ποσοστιαίο μέγεθος oblique (με κλίση), italic (πλάγια), normal (κανονικό) bold (έντονο), bolder (εντονότερο), lighter (λεπτό), normal (κανονικό) small-caps (μικρά κεφαλαία), normal (κανονικό) 13

Συνηθισμένες ιδιότητες/τιμές για φύλλα στυλ: στοίχιση κειμένου Ιδιότητα verticalalign lineheight text-align textdecoration letterspacing textindent Περιγραφή Απόσταση μεταξύ γραμμών (διάστιχο) Κατακόρυφη στοίχιση ενός στοιχείου ή σε σχέση με το πατρικό του ή σε σχέση με το ύψος της γραμμής του Στοίχιση κειμένου «ιακόσμηση» γραμματοσειράς Εσοχή της πρώτης γραμμής ιάστημα μεταξύ χαρακτήρων Τιμές π.χ. =2 (διπλάσιο από το μέγεθος γραμματοσειράς) ή =15px (15 pixels) baseline, middle, sub, super, text-top, textbottom ή top, bottom left, center, right, justify underline, overline, linethrough, blink Απόλυτο μέγεθος ή ποσοστό επί το πλάτος του στοιχείου Απόλυτο μέγεθος ή normal Συνηθισμένες ιδιότητες/τιμές για φύλλα στυλ: στυλ γραμματοσειράς & στοίχιση κειμένου <STYLE TYPE="text/css">  </STYLE> Παράδειγμα 14

Μορφοποίηση με ένθετα στυλ (inline styles) Ένθετα στυλ: Ο τρίτος τρόπος εφαρμογής κανόνων στυλ Επιτρέπουν την εφαρμογή στυλ σε ένα μόνο στοιχείο ενός εγγράφου και όχι σε ολόκληρο το έγγραφο, π.χ. διαφορετικό χρώμα σε μια επικεφαλίδα σε σχέση με όλες τις υπόλοιπες επικεφαλίδες <p style= color: red; font-weight: bold This paragraph will be bold and red.</p> Τι σημαίνει όρος «επικαλυπτόμενα» ( cascading ) (Ι); Ο όρος επικαλυπτόμενα σημαίνει ότι μπορούμε να συνδυάσουμε πληροφορίες για τα στυλ ενός εγγράφου από περισσότερες από μία πηγές Τα εξωτερικά φύλλα στυλ μπορούν να «διασυνδέονται» με πολλές σελίδες, εφαρμόζοντας σε όλες τους ίδιους κανόνες στυλ Τα ενσωματωμένα φύλλα στυλ εφαρμόζουν κανόνες σε μια μεμονωμένη ιστοσελίδα Τα ένθετα (inline) στυλ εφαρμόζουν κανόνες σε συγκεκριμένα σημεία μιας ιστοσελίδας Σε ένα έγγραφο μπορούμε να συνδυάσουμε και τις τρεις παραπάνω μεθόδους για την εφαρμογή κανόνων στυλ 15

Τι σημαίνει όρος «επικαλυπτόμενα» ( cascading ) (ΙΙ); Η έννοια της επικάλυψης έγκειται στο γεγονός ότι μια αυστηρή ιεραρχία στην εφαρμογή κανόνων στυλ, όταν χρησιμοποιούνται και οι τρεις δυνατοί τρόποι εφαρμογής τους, δηλαδή κάποιοι κανόνες έχουν προτεραιότητα έναντι άλλων: Τα στυλ που ορίζονται σε εξωτερικό στυλ εφαρμόζονται πρώτα στη σελίδα Τα στυλ που ορίζει το ενσωματωμένο φύλλο στυλ εφαρμόζονται μετά και υπερισχύουν έναντι των στυλ που εφαρμόστηκαν προηγουμένως Τα ένθετα στυλ υπερισχύουν έναντι των εξωτερικών και ενσωματωμένων στυλ και εφαρμόζονται τελευταία Παράδειγμα επικάλυψης κανόνων στυλ (Ι) <style type="text/css">  </style> mystyle.css 16

Παράδειγμα επικάλυψης κανόνων στυλ (ΙΙ) <HTML> <HEAD> <TITLE>The Bookworm Bookshop</TITLE> <LINK REL="stylesheet" HREF="mystyle.css"> <style type="text/css"> h1 {text-decoration: underline} p {text-align: right} </style></head> Εξωτερικό αρχείο στυλ (mystyle.css) για τη μορφοποίηση του εγγράφου Ενσωματωμένο στυλ για μορφοποίηση επικεφαλίδων και παραγράφων Χρήση ένθετων στυλ για τη μορφοποίηση της πρώτης επικεφαλίδας και παραγράφου <BODY> <h1 style="text-decoration: line-through">πρώτη επικεφαλίδα</h1> <p style="text-align: left; font-weight: bold">πρώτη παράγραφος. Πρώτη παράγραφος. Πρώτη παράγραφος. Πρώτη παράγραφος. Πρώτη...</p> <h1> εύτερη επικεφαλίδα</h1> <p> < εύτερη παράγραφος. εύτερη παράγραφος. εύτερη παράγραφος. εύτερη παράγραφος. εύτερη παράγραφος. εύτερη... </p> </BODY></HTML> Παράδειγμα επικάλυψης κανόνων στυλ (ΙΙΙ) Παράδειγμα 17