Φύλλο Εργασίας 5 HTML: Χρήση των Cascading Style Sheets (CSS) για τον έλεγχο της εμφάνισης των στοιχείων της html Με τη χρήση CSS πετυχαίνουμε να ελέγξουμε περισσότερο αποτελεσματικά και κυρίως ταχύτερα την εμφάνιση (layout) των στοιχείων html μιας σελίδας, είτε στην οθόνη μας, είτε στην εκτύπωσή τους. Πρόκειται για μια «γλώσσα» προγραμματισμού, ειδικού σκοπού. Η εισαγωγή τους σε κώδικα της html γίνεται με τρεις τρόπους: 1. όπως ήδη έχουμε δείξει με τη χρήση της ιδιότητας style μέσα σε κάθε στοιχείο (tag) της html. Για παράδειγμα: <p>έχω <span style="color:blue">μπλε</span> μάτια</p> 2. με τη χρήση του στοιχείου (tag) μέσα στο τμήμα της του κώδικα της html που θα δώσουμε. Στα παραδείγματα στη συνέχεια θα χρησιμοποιήσουμε αυτό τον τρόπο για διευκόλυνση στην παρουσίαση τους. div { background-color:#ceecf5; width: 800px; border: 25px solid blue; padding: 25px; margin: 20px; 3. με την κλήση <link> ενός εξωτερικού αρχείου CSS (αρχείο κειμένου) και στο οποίο έχουμε ορίσει τα διαφορετικά στυλ εμφάνισης που θέλουμε να έχουν τα στοιχεία μας. Είναι ο πλέον «επαγγελματικός» και συνηθισμένος τρόπος χρήσης των CSS. Για παράδειγμα: <link rel="stylesheet" type="text/css" href="2acss.css"> Και το εξωτερικό αρχείο (2aCSS.css) που καλείται, στο παράδειγμα, είναι το: body { background-color: lightblue; h1 { color: navy; margin-left: 50px; #p1 { text-align: center; color: red; #p2 { text-align: right; color: blue; #p3 { text-align: left; color: green; Οι ιδιότητες (attributes) που χρησιμοποιούνται για να ορίσουν την εμφάνιση των στοιχείων της html είναι: color: για το χρώμα κειμένου, font-family: για την οικογένεια της γραμματοσειράς κειμένου, font-size: για το μέγεθος γραμματοσειράς, border:για το περίγραμμα που περιβάλει ένα στοιχείο, padding:για την εσωτερική απόσταση ενός στοιχείου από το πλαίσιο, margin: για την εξωτερική απόσταση του πλαισίου, id: ορίζει μια κατηγοριοποίηση ενός στοιχείου της html, έτσι ώστε να μπορεί το ίδιο το στοιχείο να διαφοροποιήσει την εμφάνισή του ανάλογα με το id του Ακολουθούν παραδείγματα κώδικα html με τη χρήση CSS. Αρχικά με εσωτερική αναφορά στο τμήμα της και εν συνεχεία και με τη χρήση της id για τη διαφοροποίηση της εμφάνισης των παραγράφων κειμένου <p> (προσοχή στην χρήση του # πριν από το όνομα (id) που δίνεται σε κάθε μία. Άσκηση: Δοκιμάστε να «τρέξετε» τον κώδικα των παρακάτω παραδειγμάτων
body { color: blue; h1 { color: green; <h1>επικεφαλίδα h1</h1> <p>μια συνηθισμένη παράγραφος κειμένου, το χρώμα του κειμένου ορίστηκε σε μπλε στην αναφορά body του tag style</p> #p1 { text-align: center; color: red; #p2 { text-align: left; color: blue; <p id="p1">είμαι μαθητής της Γ Γυμνασίου στο Βαρβάκειο Πρότυπο Γυμνάσιο</p> <p>μια "κανονική" παράγραφος ανεπηρέαστη από τις ιδιότητες που έχουμε ορίσει στην ετικέτα style </p> <p id="p2">είμαι μαθητής της Γ Γυμνασίου στο Βαρβάκειο Πρότυπο Γυμνάσιο</p> </html Παράδειγμα με χρήση εξωτερικού αρχείου CSS (δεξιά στήλη), το οποίο καλείται με την <link> μέσα από την (αριστερή στήλη) <link rel="stylesheet" type="text/css" href="2acss.css"> <h1>βαρβάκειο Πρότυπο Γυμνάσιο</h1> <p id="p1">είμαι μαθητής της Γ Γυμνασίου στο Βαρβάκειο Πρότυπο Γυμνάσιο</p> <p>μια "κανονική" παράγραφος </p> <p id="p2">είμαι μαθητής της Γ Γυμνασίου στο Βαρβάκειο Πρότυπο Γυμνάσιο</p> <p id="p3">είμαι μαθητής της Γ Γυμνασίου στο Βαρβάκειο Πρότυπο Γυμνάσιο</p> body { background-color: lightblue; h1 { color: navy; margin-left: 50px; #p1 { text-align: center; color: red; #p2 { text-align: right; color: blue; #p3 { text-align: left; color: green;
Κάθε στοιχείο της HTML, όπως αναφέρθηκε στις ιδιότητες της CSS, περιλαμβάνει την απόσταση από τα άκρα της ιστοσελίδας (margins), τα περιγράμματα (borders), την κενή περιοχή μεταξύ περιγράμματος & κυρίως περιεχομένου (padding) και το κυρίως περιεχόμενο. Στην CSS ονομάζεται μοντέλο του "κουτιού". Ο παρακάτω εσωτερικός κώδικας CSS δείχνει τις αντίστοιχες ιδιότητες στον ορισμό μιας <div>. Άσκηση: Δοκιμάστε να «τρέξετε» τον παρακάτω κώδικα και στη συνέχεια αλλάξετε τιμές στις ιδιότητες της <div> div { background-color:#ceecf5; width: 800px; border: 25px solid blue; padding: 25px; margin: 20px; <h2>το μοντέλο του "κουτιού"</h2> <div><h3>μέτρα για την προστασία του απορρήτου κατά την πρόσβαση στο Διαδίκτυο</h3> Επιλέξτε και εγκαταστήστε στον υπολογιστή σας ένα πρόγραμμα προστασίας από κακόβουλο λογισμικό (antivirus) μίας γνωστής και αξιόπιστης εταιρείας. Ενεργοποιήστε τη δυνατότητα αυτόματης ενημέρωσης, ώστε να προστατεύεται ο υπολογιστής σας από τις πιο πρόσφατες περιπτώσεις κακόβουλου λογισμικού. Κάποια προγράμματα υποστηρίζουν και λειτουργίες anti-spyware...</div> Παραλλαγές του προηγούμενου κώδικα είναι και αυτές που δίνονται στη συνέχεια. Δοκιμάστε να «τρέξετε» τον κώδικα για κάθε μία από αυτές: #div1 { background-color:#ceecf5; width: 800px; border: 25px solid blue; padding: 25px; margin: 20px; #div2 { border: 5px solid black; margin: 50px 50px 1200px 180px; background-color: #BEF781; <h2>το μοντέλο του "κουτιού"</h2> <div id="div1"><h3>αααααααααααα</h3> αααααααααααααααααααααααααααααααααααααααααααααααααααααααααααααααα...</div> <div id="div2">...βββββββββββββββββββββββββββββββββββββββββββββββ...</div>
#div1 { background-color:#ceecf5; width: 800px; border: 25px solid blue; padding: 25px; margin: 20px; #div2 { border: 5px solid black; margin: 50px 50px 100px 180px; background-color: #BEF781; #p1 { border-style: solid; <!--άλλες τιμές για το border-style μπορεί να είναι: dotted, dashed, double, inset, outset ή και επιλογή του τύπου border-top-style. Δοκιμάστε αλλάζοντας τη τιμή κλπ -- > <h2>το μοντέλο του "κουτιού"</h2> <p>ααααααααααααααααααααααααααααααααααααααααααααααααααααααααα</p> <div id="div1"><h3>ααααααααααααααααααααααααααααααα</h3> αααααααααααααααααααααααααααααααααααααααααααααααααααααααααααααααααα...</div> <p id="div2">...βββββββββββββββββββββββββββββββββββββββββββββββββββ...</div> <p id="p1"> γγγγγγγ γγγγγγγ γγγγ γγγγγγγγγγγγγγ γγγγγγγγγγγγγ γγγγγ γγγ γγγγγ</p> Σημείωση: Για να προσθέσουμε κάποιο επεξηγηματικό σχόλιο στον κώδικα της html χρησιμοποιούμε τα σύμβολα <! --.. -- > περικλείοντάς το και ο διερμηνέας το προσπερνά. Είναι μόνο για τη διευκόλυνση-ενημέρωση τεκμηρίωση των προγραμματιστών. Μια παραλλαγή της χρήσης μπορεί για παράδειγμα να είναι μια «λεζάντα» σε μια εικόνα. Προσέξτε τον υπολογισμό των διαστάσεων της εικόνας και των ιδιοτήτων του περιγράμματος όπως αυτές ορίζονται στην div { width: 195px; padding: 5px; border: 5px solid gray; margin: 0; text-align: center; <h2>λεζάντα σε εικόνα</h2> <img src="varvakis.jpg" width="215" height="300" alt="ι.βαρβάκης"> <div><b>ιωάννης Βαρβάκης</b></div>
Φύλλο Εργασίας 6 HTML: Ορισμός τμημάτων εικόνας ως συνδέσμων με χρήση των tag <map> & <area> Στην παραπάνω εικόνα (άποψη της περιοχής κτήμα Παλιάγιαννη στη Κηφισσιά, όπου είναι τα κτήρια του Βαρβακείου -ανολοκλήρωτα-) έχουμε ορίσει τρεις περιοχές, μία ορθογώνια (rect), μία κυκλική (circle) και μία πολυγωνική (poly) και στην περίπτωση αυτή τριγωνική (βλέπε σημεία 1,2,3 αντίστοιχα). Ο ορισμός των περιοχών γίνεται στη βάση προσδιορισμού των συντεταγμένων (x, y) των αντίστοιχων σημείων ορισμού των σχημάτων. Δηλαδή για το ορθογώνιο αρκούν οι συντεταγμένες της άνω αριστερής & της κάτω δεξιά κορυφής του, για τον κύκλο οι συντεταγμένες του κέντρου και η ακτίνα του και για το πολύγωνο οι συντεταγμένες των κορυφών του και στο παράδειγμα μας, οι τρεις κορυφές του τριγώνου. Όλες οι συντεταγμένες είναι εκφρασμένες σε pixel και με δεδομένο ότι η συντεταγμένες της άνω αριστερής κορυφής της εικόνας είναι 0,0. Ένας εύκολος προσδιορισμός των περιοχών και των συντεταγμένων μιας εικόνας γίνεται με τη βοήθεια του προγράμματος της Ζωγραφικής. Η χρήση της <map> προϋποθέτει να έχει οριστεί ως ιδιότητα στην <img> το usemap= #όνομα και το οποίο χρησιμοποιείται στην <map> ως ιδιότητα αναφοράς με την name. Ορίζετε επίσης το μέγεθος της εικόνας (width, height) σε pixels και στη συνέχεια με τη χρήση της <area> ορίζετε με την shape το σχήμα της περιοχής που θα χρησιμοποιήσετε ως σύνδεσμο και με την coοrds τον ορισμό των συντεταγμένων για κάθε σχήμα. Οι σύνδεσμοι μπορεί να παραπέμπουν σε ιστοσελίδες στο Web ή και σε άλλες ιστοσελίδες της εφαρμογής σας. <p>κλικ στα σημεία της εικόνας 1, 2, 3</p> <img src="varvakiokifisia.png" width="515" height="326" alt="βαρβάκειο-κηφισιά" usemap="#varvakio"> <map name="varvakio"> <area shape="rect" coords="254,0,515,111" alt="1" href="http://gym-peir-athin.att.sch.gr"> <area shape="circle" coords="180,198,10" alt="2" href="http://www.sch.gr"> <area shape="poly" coords="0,0,0,66,66,0" alt="3" href="http://digitalschool.edu.gr"> </map>
Φύλλο Εργασίας 7 HTML: Εισαγωγή βίντεο σε ιστοσελίδα και χρήση «κουμπιών» (buttons) για πλοήγηση κλπ Θα ασχοληθούμε με τη χρήση της <video> που είναι πολύ πρόσφατη στην HTML και υποστηρίζεται σήμερα σχεδόν από όλους τους γνωστούς browsers, τουλάχιστον σε ότι αφορά την μορφή mp4 του βίντεο. Ιδιότητες είναι το width & height για τις διαστάσεις του μέσα στην ιστοσελίδα, η autoplay που ορίζει πως το βίντεο θα παίξει μόλις είναι έτοιμο (πρακτικά και εφόσον πρόκειται για μικρού σχετικά μεγέθους, αμέσως με το άνοιγμα της ιστοσελίδας), η controls με την οποία εμφανίζονται τα «χειριστήρια» εκκίνησης, τέλους κλπ για τον έλεγχο του, η loop για τη διαρκεί εκτέλεσή του αμέσως μόλις τελειώνει και φυσικά ο ορισμός της προέλευσης <source> και src του αρχείου.mp4. Είναι βέβαια δυνατόν με τη χρήση της <iframe> να ενσωματωθεί στην ιστοσελίδα μας και σχετική ιστοσελίδα προβολής βίντεο. Θα δοθεί σχετικό υπόδειγμα σε επόμενο ΦΕ και στο οποίο θα σας προτείνεται μια συγκεκριμένη διευθέτηση (layout) ιστοσελίδας για τις εφαρμογές σας. Ο παρακάτω κώδικας ενσωματώνει βίντεο στην ιστοσελίδα μας και το συγκεκριμένο όνομα του αρχείου mp4 είναι απλό υπόδειγμα σύνταξης της εντολής και θα χρησιμοποιηθεί για προβολή στην τάξη και μόνο. <video width="640" height="480" autoplay controls> <source src="theo.mp4" type="video/mp4"> </video> Ο παρακάτω κώδικας, ο οποίος ενσωματώνει στοιχεία javascript, αν και απαιτεί εκτενέστερη ενασχόληση καθώς αποτελεί προωθημένη τεχνική προγραμματισμού και είναι εκτός του πλαισίου και του χρόνου που είναι διαθέσιμος, μας δίνει τη δυνατότητα να εντάξουμε γνωστά στοιχεία διεπαφής πχ πλήκτρα ή κουμπιά (buttons) στην εφαρμογή μας ώστε να «αυξήσουμε» την διαδραστικότητά της. Εδώ σας δίνεται μόνο μία από τις πολλές εκδοχές (μορφής εμφάνισης) και για μεν τα τρία πρώτα buttons το κλικ σε αυτά τροποποιεί το μέγεθος και το χρώμα & τη γραμματοσειρά για την παράγραφο <p id= varvakio >, το δε 4 ο χρησιμοποιείται ως σύνδεσμος για την ιστοσελίδα του σχολείου ή όποια άλλη στο Web ή στην εφαρμογή σας θέλετε. <p id="varvakio">βαρβάκειο Πρότυπο Γυμνάσιο</p> <script> function Function1() { var x = document.getelementbyid("varvakio"); x.style.fontsize = "25px"; x.style.color = "red"; function Function2() { var x = document.getelementbyid("varvakio"); x.style.fontsize = "35px"; x.style.color = "green"; function Function3() { var x = document.getelementbyid("varvakio"); x.style.fontsize = "55px"; x.style.color = "blue"; x.style.fontfamily = "arial" </script> <button onclick="function1()">1!</button> <button onclick="function2()">2!</button> <button onclick="function3()">3!</button> <button onclick="window.location.href='http://gym-peir-athin.att.sch.gr/'">ιστοσελίδα ΒΠΓ</button>
Φύλλο Εργασίας 8 HTML: Χρήση ομαδοποίησης ιδιοτήτων με την class Μπορούμε να διαφοροποιήσουμε την εμφάνιση του ίδιου στοιχείου αν χρησιμοποιήσουμε την ιδιότητα class και ορίσουμε με αυτήν τις διαφορές. Για παράδειγμα στη συνέχεια την χρησιμοποιούμε για να αλλάξουμε την εμφάνιση της <h1> και της <p>, ορίζοντας εντός της πως θέλουμε να εμφανίζονται, χρησιμοποιώντας για κάθε περίπτωση διαφορετικό όνομα μαζί με το όνομα του στοιχείου που θέλουμε να αλλάξει. Στη συνέχεια με την class ως ιδιότητα εντός του στοιχείου, επιλέγουμε μία από τις περιπτώσεις που έχουμε ήδη ορίσει στην. h1.header1 { color:red h1.header2 { color:green p.par1 { background-color:red; color:black; border:3px solid black; padding:10px; margin:250px; font-size:50px; text-align:center; p.par2 { background-color:blue; color:white; border:5px solid red; padding:10px; margin:30px; font-size:150%; p.par3 { background-color:grey; color:blue; border:5px solid blue; padding:50px; margin:0px; font-size:150%; <h1 class="header1">άσκηση με τη χρήση ομαδοποίησης ιδιοτήτων τύπου class</h1> <h1 class="header2">άσκηση με τη χρήση ομαδοποίησης ιδιοτήτων τύπου class</h1> <p class="par1">βαρβάκειο ΠΓ</p> <p class="par2">βαρβάκειο ΠΓ</p> <p class="par3">βαρβάκειο ΠΓ</p> ΑΣΚΗΣΗ: Δοκιμάστε να «εκτελέσετε» τον κώδικα αλλάζοντας διαδοχικά πχ στην p.par1 το margin σε 10px, κατόπιν στην p.par3 το padding σε10px, στη συνέχεια το border ή το font-size κλπ
Φύλλο Εργασίας 9 HTML: Υπόδειγμα εμφάνισης κεντρικής ιστοσελίδας για την εργασία σας Έχετε παρατηρήσει πως είναι δυνατόν το περιεχόμενο μιας ιστοσελίδας να εμφανίζεται σε στήλες και έχουμε αναφέρει έναν παρόμοιο τρόπο διαχωρισμού για πολλαπλές ιστοσελίδες. Στην τελευταία έκδοση της HTML έχουν καθοριστεί ορισμένες περιοχές της ιστοσελίδας, οι οποίες με τη χρήση της κατάλληλης <tag> μας δίνουν τη δυνατότητα να δημιουργήσουμε ελκυστικές και λειτουργικές ιστοσελίδες. Στο σχήμα που ακολουθεί εμφανίζονται οι περιοχές αυτές, όπως έχουν οριστεί στο πρότυπο HTML5. Ορίζονται μέσα στην και από αυτές θα χρησιμοποιηθούν ορισμένες για το υπόδειγμα δημιουργίας αρχικής ιστοσελίδας για την εργασία μας. Υπενθυμίζω ότι έχουμε δείξει μέχρι τώρα και άλλους τρόπους για πολλαπλές στήλες πχ τη χρήση πίνακα (table) κλπ. Αρχικά δίνουμε ορισμένες επεξηγήσεις για τις περιοχές και στη συνέχεια θα δοθούν αποσπάσματα από την ιστοσελίδα «υπόδειγμα» και επίσης το σύνολο του κώδικα ώστε να κάνετε τις ανάλογες μετατροπές. Η <header> ορίζει μια επικεφαλίδα-τίτλο στην ιστοσελίδα μου. Με την <nav> ορίζεται ένας χώρος με συνδέσμους (hyperlinks), τον οποίον μπορούμε να τον έχουμε είτε όπως φαίνεται στο σχήμα, είτε όπως θα τον ορίσουμε στο υπόδειγμα στη συνέχεια. Με την <section> ορίζουμε ένα βασικό τμήμα της ιστοσελίδας μας, το οποίο θα χρησιμοποιήσουμε για το κυρίως περιεχόμενό της. Ακόμη ως υπόμνημα θα χρησιμοποιήσουμε το <footer> στο υπόδειγμά μας. Το <article> & <aside> συγκροτούν ακόμη δύο ενότητες για αυτόνομη εμφάνιση περιεχομένου (<article>) ή συμπληρωματικού (<aside>). Στο υπόδειγμα μας δεν θα τα χρησιμοποιήσουμε, αντίθετα θα κάνουμε χρήση επιπρόσθετα της class για να διαφοροποιήσουμε την εμφάνιση στοιχείων της. Στο υπόδειγμα που θα σας δοθεί χρησιμοποιείται η <header> με τις παρακάτω τιμές και το αποτέλεσμα δίνεται στη συνέχεια: #header { height:120px; backgroundcolor:red; color:white; text-align:center; padding:20px; Εν συνεχεία ορίζουμε την <nav> (δοκιμάστε να αλλάξετε τιμές σε line-height, height κ.α) #nav { font-size:16px; line-height:250px; background-color:#e1e1e1; height:1800px; width:200px; float:left; padding:5px; Και αποκτά περιεχόμενα μέσα στην <div id="nav"> <a href="#1">1.η πολεμική δράση του</a><br> <a href="#2">2.το κοινωφελές έργο του</a><br> <a href="#3">3.η επιστροφή στην πατρίδα</a><br> <a href="#4">4...</a><br><br><br> <img src="0_1bw.png" alt="mr01" style="height:200px;width:200px"> </div>
Δίνουμε ένα απόσπασμα από το υπόδειγμα και την περιοχή που ορίστηκε με την <section> #section { width:550px; float:left; padding:10px; Η διαφορά εμφάνισης των παραγράφων κειμένου στο τμήμα της <section> οφείλεται στη χρήση της class. Δείτε αναλυτικά στον κώδικα html που θα σας δοθεί. Δοκιμάστε να κάνετε αλλαγές, ώστε να επιλέξετε τη μορφή της ιστοσελίδας που εσείς θέλετε.