Σχεδίαση και Ανάπτυξη Ιστότοπων HTML Στοιχεία - Βασικές Ετικέτες Ειδικοί Χαρακτήρες Παρουσίαση 5 η 1 Βελώνης Γεώργιος Καθηγητής
Σημασία συμβόλων HTML5 tags Obsolete tags: Μην αφήνετε αυτές τις ετικέτες στον κώδικά σας. Deprecated tags: Αντικαταστήστε αυτές τις ετικέτες πριν καταστούν παρωχημένες. Αυτό γίνεται για να εξασφαλιστεί η μελλοντική συμβατότητα. Restored/ Redefined tags in HTML5: Αναθεωρήστε αυτές τις ετικέτες στον κώδικά σας, όπως καθορίστηκαν στην HTML5 και ως εκ τούτου έχουν νέες έννοιες. 2
Σημασία συμβόλων HTML5 tags: <wbr> Obsolete tags: <nobr> Deprecated attributes: align (<p>,<hi>,<div>, <hr/>), color, noshade, size, width (<hr/>) Deprecated tags: <center> Restored/ Redefined tags in HTML5: <hr/> 3
Χρήσιμοι Ορισμοί Deprecated και Obsolete Deprecated καλείται ένα στοιχείο ή παράμετρος που θεωρείται ξεπερασμένο. Τα deprecated στοιχεία μπορεί να καταστούν άνευ αντικειμένου στο μέλλον, αλλά οι browsers θα πρέπει να συνεχίσουν να τα υποστηρίζουν για λόγους συμβατότητας με παλαιότερες εκδόσεις. Obsolete καλείται ένα στοιχείο ή παράμετρος που δεν έχει καμία εγγύηση για τη μελλοντική του από τους browsers υποστήριξη και πλέον δεν ορίζεται στην προδιαγραφή 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 Σημείωση: Όλες οι ετικέτες και οι ιδιότητες που θα παρουσιαστούν είτε obsolete είτε deprecated, συνεχίζουν να ερμηνεύονται κανονικά, τουλάχιστον μέχρι τις παραπάνω εκδόσεις των browsers που έγιναν οι δοκιμές. 5
Περιεχόμενα Στοιχεία ιστοσελίδας Εισαγωγή Ιδιότητες CSS box model Block στοιχεία Inline στοιχεία Inline-block στοιχεία Κανόνες σύνταξης της HTML για κενά και αλλαγή γραμμής Αλλαγή γραμμής Καθορισμός σημείου χωρισμού μεγάλων λέξεων Καθορισμός κενών 6
Περιεχόμενα (συνέχεια) Καθορισμός και στοίχιση επικεφαλίδων Καθορισμός και στοίχιση παραγράφων Στοίχιση κειμένου στο κέντρο Ομαδοποίηση στοιχείων εγγράφου Ομαδοποίηση για απόδοση διαφορετικών στυλ μέσα σε μια ετικέτα Εισαγωγή οριζόντιας γραμμής Εισαγωγή σχολίων Ειδικοί χαρακτήρες 7
Στοιχεία Ιστοσελίδας Εισαγωγή Ως στοιχείο μιας ιστοσελίδας ορίζεται κάθε μέρος που την αποτελεί, όπως ένα κομμάτι κειμένου που μορφοποιείται, μια εικόνα, ένας πίνακας, ένα κελί ενός πίνακα κ.λπ. Στην HTML τα στοιχεία του περιεχομένου χωρίζονται σε δύο μεγάλες κατηγορίες, ως προς τον τρόπο εμφάνισής τους, τον τρόπο δηλαδή που «γεμίζουν» το παράθυρο του browser και είναι οι εξής: Block στοιχεία Inline στοιχεία Η προεπιλεγμένη τιμή ένδειξης για τα περισσότερα στοιχεία είναι block ή inline, ενώ μπορεί να δημιουργηθεί και ένας συνδυασμός inline-block στοιχείων. 8
Στοιχεία Ιστοσελίδας Ιδιότητες CSS box model Κάθε στοιχείο μιας ιστοσελίδας εμφανίζεται μέσα σε ένα νοητό πλαίσιο, ένα κουτί που έχει τρεις ιδιότητες που αφορούν τη σχέση τους με τα υπόλοιπα γειτονικά στοιχεία, αλλά και την εμφάνισή τους. Οι ιδιότητες αυτές είναι οι: margin: ο κενός χώρος μεταξύ του πλαισίου και των γειτονικών στοιχείων border: το πλαίσιο padding: ο κενός χώρος μεταξύ του περιεχομένου του στοιχείου και του πλαισίου του Ο w3.org, ο οποίος ανέπτυξε και διαχειρίζεται τα πρότυπα των CSS και της HTML, ομαδοποίησε αυτές τις ιδιότητες χρησιμοποιώντας τον ορισμό Box model, ο οποίος απεικονίζεται παρακάτω: 9
Στοιχεία Ιστοσελίδας Ιδιότητες CSS box model 10
Στοιχεία Ιστοσελίδας Block στοιχεία Block στοιχεία λέγονται αυτά που τείνουν να καταλαμβάνουν όλο το διαθέσιμο πλάτος της ιστοσελίδας για την περιοχή που καλύπτει το ύψος τους. Με άλλα λόγια «προσπαθούν» ώστε να μην υπάρχει άλλο περιεχόμενο αριστερά ή δεξιά τους. Προκαλούν επίσης την δημιουργία μιας νέας γραμμής πριν και μετά από τη θέση που έχουν τοποθετηθεί και «σέβονται» όλα τα περιθώρια (top-bottomright-left), καθώς και το padding. Τέτοια στοιχεία είναι ετικέτες, όπως οι p, h(1-6), hr, div, pre, form, article, header, footer, blockquote, κ.ά. 11
Στοιχεία Ιστοσελίδας Inline στοιχεία Inline στοιχεία είναι αυτά που καταλαμβάνουν μόνο τόσο πλάτος, όσο απαιτείται από το περιεχόμενό τους. Επίσης, δεν προκαλούν την αλλαγή γραμμής πριν ή μετά και «σέβονται» τα left και right margins, καθώς και το padding. Τέτοια στοιχεία είναι ετικέτες, όπως οι span, a, img, strong, b, em, i, u, small, mark, code, sub, sup, samp, κ.ά. Στην κατηγορία αυτή εντάσσεται και η ετικέτα br, καθώς απλά προκαλεί την αλλαγή γραμμής στην τρέχουσα ενότητα, δίχως να εισάγει μία νέα (ενότητα). 12
Στοιχεία Ιστοσελίδας Inline-block στοιχεία Τα inline-block στοιχεία είναι σαν τα inline στοιχεία, δηλαδή επιτρέπουν άλλα στοιχεία να «κάτσουν» αριστερά και δεξιά τους και «σέβονται» τα left και right margins, καθώς και το padding. Επιπλέον μπορούν να έχουν πλάτος και ύψος και «σέβονται» τα top και bottom margins, όπως κάνουν και τα block στοιχεία της ιστοσελίδας. 13
Κανόνες σύνταξης της HTML για κενά και αλλαγή γραμμής Όπως αναφέρεται κι από τους κανόνες σύνταξης της HTML, κενές γραμμές και περισσότερα από ένα κενά μεταξύ των χαρακτήρων μιας ιστοσελίδας, δε λαμβάνονται υπόψη από το browser. Παράδειγμα: <body> Η πρώτη μου σελίδα στην H T M L </body> 14
Αλλαγή γραμμής Μπορεί να γίνει χρήση της απλής ετικέτας <br/>, για να εισαχθεί μία αλλαγή γραμμής στο σημείο που είναι επιθυμητό, ή η ετικέτα <p> για τη δημιουργία παραγράφων. Παράδειγμα: <body> Η πρώτη μου<br/>σελίδα<br/> στην <br/>html </body> 15
Καθορισμός σημείου χωρισμού μεγάλων λέξεων Η ετικέτα <wbr /> (Word Break Opportunity) χρησιμοποιείται για να δείξει στο browser, όταν μια πρόταση δεν χωράει σε μια γραμμή, πού μπορεί να χωρίσει μια μεγάλη λέξη. Παλιότερα, αν κάποιος ήθελε να «υποχρεώσει» ένα κείμενο να μείνει ολόκληρο σε μια γραμμή χρησιμοποιούσε την ετικέτα <nobr>, η οποία δεν υποστηρίζεται πλέον από κανέναν browser. <nobr> 16
Καθορισμός σημείου χωρισμού μεγάλων λέξεων Παράδειγμα: <body> πάστοπεταλίδο<wbr/>γαλεοσάλαχο<wbr/>τούρσοπιπεράτο <wbr/>μυαλοκόμματα</wbr>μελοπερεχύτο</wbr>μυτζηθρότυ ρο<wbr/>τρύγονοκοτσύφο<wbr/>τσιχλοπίτσουνα<wbr/>ψήτοσ ουσουράδο<wbr/>κοτοκέφαλα<wbr/>άγριοπεριστέρο<wbr/>λ αγοκούνελα<wbr/>στράγαλοπετμέζο<wbr/>φτερουγόδιπλες. </body> 17
Καθορισμός κενών Αν μεταξύ των λέξεων είναι επιθυμητή η τοποθέτηση περισσοτέρων του ενός κενών χαρακτήρων, τότε μπορεί να γίνει χρήση της σειράς ειδικών χαρακτήρων, η οποία αντιστοιχεί στον κενό χαρακτήρα. Παράδειγμα: <body> Hi George! </body> 18 3 κενά διαστήματα
Καθορισμός και στοίχιση επικεφαλίδων Οι HTML επικεφαλίδες είναι κείμενο που εμφανίζεται με μεγάλα και έντονα γράμματα. Οι επικεφαλίδες ορίζονται από την ετικέτα <hi>. Στη θέση του «i» μπαίνει μία τιμή από 1 έως 6, με τη δήλωση <h1> να ορίζει τη μεγαλύτερη επικεφαλίδα, ενώ η <h6> τη μικρότερη. Πριν και μετά από κάθε επικεφαλίδα, προβάλλεται αυτόματα από το browser, μια κενή γραμμή. Παράδειγμα: <body> <h1>επικεφαλίδα 1</h1> <h6>επικεφαλίδα 6</h6> </body> 19
Καθορισμός και στοίχιση επικεφαλίδων Οι ετικέτες <h1> έως <h6> έχουν μόνο μία ιδιότητα την align, η οποία ορίζει την στοίχιση του κειμένου μέσα στην παράγραφο. Η ιδιότητα αυτή δεν υποστηρίζεται από την HTML5 και στη θέση της χρησιμοποιούνται CSS. Σύνταξη: <hi align="left right center justify"></hi> CSS σύνταξη: hi{text-align:left right center justify} Παράδειγμα: <body> <h1 align="left">επικεφαλίδα 1</h1> <h3 align="center">επικεφαλίδα 3</h3> <h5 align="right">επικεφαλίδα 5</h5> </body> 20
Καθορισμός και στοίχιση παραγράφων Το άνοιγμα νέας (<p>) ή το κλείσιμο μιας παραγράφου (</p>), συνεπάγεται και την αυτόματη αλλαγή γραμμής. Η χρήση της ετικέτας <p>, αφήνει επίσης ένα κενό διάστημα πριν και μετά από την παράγραφο. Το κείμενο το οποίο ακολουθεί μετά την παράγραφο, έχει ένα προκαθορισμένο διάστημα 0,5 εκατοστών (20 pixels). Παράδειγμα: <body> Εισαγωγή<br/> <p>η πρώτη μου σελίδα</p> στην HTML </body> Κενό διάστημα 0,5 εκ. 21
Καθορισμός και στοίχιση παραγράφων Η ετικέτα <p> έχει επίσης μόνο μία ιδιότητα την align, η οποία ορίζει τη στοίχιση του κειμένου μέσα στην παράγραφο. Η ιδιότητα δεν υποστηρίζεται από την HTML5 και στη θέση της χρησιμοποιούνται CSS. Σύνταξη: <p align="left right center justify"> CSS σύνταξη: p{text-align:left right center justify initial inherit;} Η στοίχιση γίνεται αριστερά (default), δεξιά, κέντρο και πλήρη (justify). Η τιμή justify τεντώνει τις γραμμές έτσι ώστε να έχουν όλες το ίδιο πλάτος (όπως σε εφημερίδες και περιοδικά). Σημείωση: Τα CSS θα παρουσιαστούν αναλυτικά σε επόμενα μαθήματα 22
Καθορισμός και στοίχιση παραγράφων Παράδειγμα: <body> <p align="left">html είναι το ακρώνυμο από το Hyper Text Markup Language που σημαίνει γλώσσα χαρακτηρισμού υπερκειμένου.</p> <p align="center">html είναι το ακρώνυμο από το Hyper Text Markup Language που σημαίνει γλώσσα χαρακτηρισμού υπερκειμένου.</p> <p align="right">html είναι το ακρώνυμο από το Hyper Text Markup Language που σημαίνει γλώσσα χαρακτηρισμού υπερκειμένου.</p> </body> 23
Καθορισμός και στοίχιση παραγράφων Παράδειγμα: <body> <p align="justify">html είναι το ακρώνυμο από το Hyper Text Markup Language που σημαίνει γλώσσα χαρακτηρισμού υπερκειμένου.</p> <p align="justify">η χρήση μιας γλώσσας χαρακτηρισμού σημαίνει ότι γράφεται πρώτα το κείμενο και έπειτα προσθέτονται ειδικά σύμβολα γύρω από τις λέξεις ή από ολόκληρες προτάσεις ώστε να καθοριστεί η εμφάνιση τους στην οθόνη.</p> </body> 24
Ετικέτες διαμόρφωσης κειμένου Στοίχιση κειμένου στο κέντρο Η ετικέτα <center> εμφανίζει το κείμενο με στοίχιση στο κέντρο της οθόνης. Η ετικέτα αυτή δεν υποστηρίζεται από την HTML5 και στη θέση της χρησιμοποιούνται CSS. Σύνταξη CSS: επιλογέας{text-align:center;} Παράδειγμα: <body> <p>κείμενο στοιχισμένο αριστερά</p> <p><center>κείμενο στοιχισμένο στο κέντρο</center></p> </body> 25
Ομαδοποίηση στοιχείων εγγράφου Το στοιχείο div, όπως και τα προαναφερόμενα στοιχεία p και h, είναι στοιχεία τύπου μπλοκ. Η ετικέτα <div> ορίζει ένα τμήμα στο HTML έγγραφο. Ένα τμήμα ομαδοποιεί τα περιεχόμενα που είναι μέσα στις ετικέτες <div></div> ώστε να μπορεί να ορίζεται ένα ενιαίο στυλ (χρώμα, γραμματοσειρά, στοίχιση) με την ιδιότητα style. Το <div> στοιχείο χρησιμοποιείται πολύ συχνά σε συνδυασμό με CSS, για να ορίσει τη διάταξη μιας ιστοσελίδας. Σύνταξη: <div align="left right center justify"> Η ιδιότητα align δεν υποστηρίζεται από την HTML5 και στη θέση της χρησιμοποιούνται CSS. 26
Ομαδοποίηση στοιχείων εγγράφου Σύνταξη CSS: div{text-align:left right center justify;} Παράδειγμα: <body> <div style="color:red">μπλοκ κειμένου 1</div> <div align="center">μπλοκ κειμένου 2</div> <div align="right">μπλοκ κειμένου 3</div> </body> 27
Ομαδοποίηση για απόδοση διαφορετικών στυλ μέσα σε μια ετικέτα Το span στοιχείο ανήκει στην κατηγορία inline. Αυτό σημαίνει ότι εάν τοποθετηθούν το ένα στοιχείο μετά το άλλο, αυτά θα εμφανίζονται δίπλα - δίπλα. Με την ετικέτα <span> μπορεί να ομαδοποιηθεί κείμενο, για να οριστεί ένα στυλ με την ιδιότητα style. Παράδειγμα:.. <p>το <span style="color:red">υλικό</span> αναφέρεται στα μηχανικά και ηλεκτρονικά μέρη του <span style="font-weight: bold">η/υ</span> </p> 28
Εισαγωγή οριζόντιας γραμμής Η οριζόντια γραμμή είναι ένα απλό γραφικό, που μπορεί να χρησιμοποιηθεί σε μία ιστοσελίδα, κυρίως ως διαχωριστικό. Τη δυνατότητα εισαγωγής οριζόντιων γραμμών τη δίνει η ετικέτα <hr/>, η οποία στην HTML5 ορίζει μια θεματική αλλαγή, ενώ στην HTML 4.01 αντιπροσωπεύει ένα οριζόντιο κανόνα. Παράδειγμα: <body> <p>κείμενο πριν τη γραμμή</p> <hr/> <p>κείμενο μετά τη γραμμή</p> </body> 29
Εισαγωγή οριζόντιας γραμμής Όλες οι ιδιότητες της ετικέτας <hr/> που ακολουθούν, δεν υποστηρίζονται από την HTML5 και στη θέση τους χρησιμοποιούνται CSS. align: Ορίζει τη στοίχιση της γραμμής. Σύνταξη: <hr align="left center right"/> Σύνταξη CSS: hr{margin: 0 auto 0 0;} <!-- Στοίχιση αριστερά --> hr{margin: 0 0 0 auto;} <!-- Στοίχιση δεξιά --> hr{margin: 0 auto;} <!-- Στοίχιση κέντρο --> 30
Εισαγωγή οριζόντιας γραμμής color: Ορίζει το χρώμα της γραμμής. Σύνταξη HTML: <hr color="όνομα_χρώματος #κωδικός_χρώματος rgb(x,x,x)"/> Σύνταξη CSS: hr{color:όνομα_χρώματος #κωδικός_χρώματος rgb(x,x,x);} noshade: Αφαιρεί τη σκιά από την οριζόντια γραμμή. Σύνταξη HTML: <hr noshade="noshade"/> Σύνταξη CSS: hr{border: 1px 0 0 0 solid rgb(128, 128,128);} size: Ορίζει το πάχος της οριζόντιας γραμμής. Σύνταξη HTML: <hr size="τιμήpx"/> (το px μη απαραίτητο) Σύνταξη CSS: hr{height:τιμήpx;} (το px απαραίτητο) 31
Εισαγωγή οριζόντιας γραμμής width: Ορίζει το μέγεθος της οριζόντιας γραμμής. Σύνταξη HTML: <hr width="τιμήpx τιμή%"/> (το px μη απαραίτητο) Σύνταξη CSS: hr{width:τιμήpx τιμή%} (το px απαραίτητο) Παράδειγμα: <body> Κείμενο πριν τη γραμμή<br/> <hr noshade="noshade" size="20" width="50%" align="center" color="red"/> Κείμενο μετά τη γραμμή<br/> </body> 32
Εισαγωγή σχολίων Η ετικέτα σχόλιο (<!--.. -->), η οποία έχει προαναφερθεί, χρησιμοποιείται για την εισαγωγή σχολίων στον πηγαίο κώδικα μιας ιστοσελίδας, τα οποία όμως αγνοούνται από τους browsers. Η χρήση σχολίων μπορεί να γίνει για την επεξήγηση του κώδικα της σελίδας, ώστε να είναι κατανοητός σε οποιονδήποτε χρειαστεί να τον επεξεργαστεί σε μεταγενέστερη ημερομηνία. Αυτό είναι ιδιαίτερα χρήσιμο στους web developers, ιδιαίτερα εάν υπάρχουν πολλές γραμμές κώδικα μέσα στο HTML αρχείο. 33
Εισαγωγή σχολίων Παράδειγμα: <body> <!-- Αυτό είναι ένα σχόλιο και δεν εμφανίζεται στο browser --> <p>αυτό είναι μια παράγραφος.</p> </body> 34
Ειδικοί χαρακτήρες Ορισμένοι χαρακτήρες της HTML (όπως <, >, &) είναι δεσμευμένοι από την ίδια τη γλώσσα και δε μπορούν να χρησιμοποιηθούν αυτούσιοι μέσα σε ένα HTML έγγραφο. Για να προστεθούν τέτοιοι χαρακτήρες σε μία ιστοσελίδα, πρέπει να γίνει χρήση κωδικών διαφυγής (escape codes ή special entities). Αυτό ισχύει για κάθε έναν δεσμευμένο χαρακτήρα, καθώς και για άλλους που δεν είναι διαθέσιμοι από το πληκτρολόγιο, όπως μαθηματικά σύμβολα (,, ), σύμβολα νομίσματος (,, ), κ.λπ. Σύνταξη: &όνομα_οντότητας; ή &#κωδικός_οντότητας; (10δικός ή 16δικός) Παράδειγμα: ή ή ★ ή ★ 35
Ειδικοί χαρακτήρες Περισσότερους ειδικούς χαρακτήρες μπορείτε να βρείτε στο παρακάτω site, αλλά και σε πολλούς άλλους ιστότοπους του Διαδικτύου: http://www.quackit.com/html/html_special_characters.cfm 36
Πηγές Προγραμματιστικά Εργαλεία για το Διαδίκτυο: Σχολικό βιβλίο W3schools (http://www.w3schools.com) WLearn (http://www.wlearn.gr) W3C (https://www.w3.org/tr/html5/obsolete.html) Academy Of Code (http://www.academy-ofcode.com/el/getstarted/html/lesson/1/step/5) ARCLAB (https://www.arclab.com/en/kb/htmlcss/how-tocross-browser-style-hr-horizontal-rule-line-using-css.html) Obsolete and Deprecated Tags in HTML5: Shadi NamroutiShadi Namrouti (https://www.linkedin.com/pulse/obsolete-deprecated-tagshtml5-shadi-namrouti) 37
Πηγές Σχεδίαση και ανάπτυξη ιστότοπων: Σχολικό βιβλίο Stackoverflow (http://stackoverflow.com/questions/9189810/css-displayinline-vs-inline-block) 38