Παραδόσεις & εργαστηριακές ασκήσεις στην HTML Βαρβάκειο Πρότυπο Γυμνάσιο Σχολ. Χρονιά 2017-2018 Θ. Οτζάκογλου
Εργαστήρι Πληροφορικής Σχολ. Έτος 2016 2017 Αν και δεν είναι μία ακόμη «γλώσσα προγραμματισμού», αποτελεί «γλώσσα» (με την έννοια των ειδικών «λέξεων», συμβόλων & συντακτικών κανόνων που χρησιμοποιούνται) απαραίτητη για την «ανάγνωση» των ιστοσελίδων και την εμφάνισή τους από έναν φυλλομετρητή (browser - πρόγραμμα εμφάνισης ιστοσελίδων). Δηλαδή με άλλα λόγια κάθε ιστοσελίδα για να μπορεί να εμφανιστεί μέσω ενός φυλλομετρητή πρέπει να έχει «γραφτεί» σε html. Στην html βασικός είναι ο ρόλος και η χρήση των ετικετών (tags), δηλαδή η παρουσία λέξεων ή συμβόλων μεταξύ των συμβόλων < > οι οποίες σηματοδοτούν συγκεκριμένη λειτουργία για την σωστή «ανάγνωση» και εμφάνιση της ιστοσελίδας. Συνήθως εμφανίζονται ως ζεύγη (αρχή & τέλος) και όπου μεταξύ των δύο εμφανίσεων περιέχονται συγκεκριμένα στοιχεία μιας ιστοσελίδας πχ ο τίτλος-όνομα που εμφανίζεται στο αντίστοιχο παράθυρο του φυλλομετρητή κλπ. Μια βασική δομή ιστοσελίδας περιλαμβάνει τις παρακάτω ετικέτες, που για τη περίπτωσή μας εμφανίζονται με το συγκεκριμένο περιεχόμενο. Φύλλο Πληροφοριών HyperText Markup Language (HTML)*: μια σύντομη αναφορά * σε ελεύθερη απόδοση: γλώσσα σήμανσης υπερκειμένου <head> <title>varvakio School </title> </head> <h1>βαρβακειο ΠΠΓ</h1> <p> Εδώ καταχωρίζεται και εμφανίζεται η πρώτη παράγραφος του κειμένου μου. </p> <p> Ακόμη ίσως μία παράγραφος κλπ </p> Στη συνεχεία απεικονίζεται η «εκτέλεση» του συγκεκριμένου αρχείου που περιέχει τον προηγηθέντα κώδικα σε html και η εμφάνιση του σε δύο φυλλομετρητές (iexplorer, chrome)
Εργαστήρι Πληροφορικής Σχολ. Έτος 2016 17 Φύλλο Εργασίας 1 Άσκηση:HTML Η χρήση των tags <div>,<h1 h4>, <hr>, <a>, <p>, <br>, <pre>, <b>, <i>, <sup>, <sub> <head> <title>varvakio School</title> </head> <div style="text-align:center"> <h1>βαρβακειο ΠΠΓ</h1> <h2>βαρβακειο ΠΠΓ</h2> <h3>βαρβακειο ΠΠΓ</h3> <h4>βαρβακειο ΠΠΓ</h4> </div> <hr width=100px color=red/> <hr width=80px color=blue/> <hr width=60px color=yellow/> <hr width=40px color=gray/> <a href="http://gym-peir-athin.att.sch.gr"> Σύνδεση στην ιστοσελίδα του σχολείου <p></p> <div style="border:2px solid red;color:#000000;"> <p>εδώ καταχωρίζεται και εμφανίζεται η πρώτη παράγραφος του κειμένου μου. Το κείμενο διαμορφώνεται ανεξάρτητα από τον τρόπο που το μορφοποιώ στον editor (αλλαγή γραμμών ή κενά διαστήματα), ως συνεχές κείμενο και το οποίο αλλάζει ανάλογα με τον αν αλλάζω το το μέγεθος του παραθύρου του φυλλομετρητή</p> </div> <div style="border:4px solid blue;color:#0f0f0f;"> <p>το κείμενο που καταχωρίστηκε εδώ αλλάζει γραμμή σύμφωνα με τον αν υπάρχει η ετικέτα <br> η οποία και καθορίζει <br> την αλλαγή γραμμής</p> <pre> Αυτό όμως είναι ένα διαμορφωμένο κείμενο στο οποίο διατηρούνται ως έχουν τα κενά διαστήματα και η αλλαγή γραμμής. </pre> <p>ενώ η παρουσία του <b> ορίζει με έντονη γραφή </b> τις λέξεις που περικλείονται από αυτά, <br> ενώ όσα περιλαμβάνονται μεταξύ των <i> είναι με πλάγια γραφή </i> και όσα, <br> για παράδειγμα, εμφανίζονται μεταξύ των <sup>ως εκθέτες</sup> ή και ως <sub>δείκτες</sub> </div> <div style="background:blue; font-family:arial; font-size:150%; color:#ffffff; text-align:right"> <p>ακόμη ίσως μία παράγραφος κλπ </p> </div> Προσοχή: Η έγχρωμη ή έντονη γραφή ετικετών (tags) ή και τμημάτων του κώδικα χρησιμοποιήθηκε μόνο για λόγους διευκόλυνσης στην «ανάγνωσή» του.
Η εκτέλεση του προηγούμενου κώδικα θα δημιουργήσει την παρακάτω εικονιζόμενη ιστοσελίδα Άσκηση στον ΗΥ Προσπαθήστε να δημιουργήσετε μια ιστοσελίδα αξιοποιώντας τα προαναφερθέντα tags και στην οποία να εντάξετε στοιχεία από πρόσφατη δραστηριότητά σας. Όπως δείξαμε στο εργαστήριο, αρχικά θα «γράψετε» τον κώδικα σε html στο «Σημειωματάριο» των Windows (Notepad), θα το αποθηκεύσετε ως αρχείο html (επέκταση.htm) και στη συνέχεια θα το «τρέξετε» με έναν φυλλομετρητή (browser).
Εργαστήρι Πληροφορικής Σχολ. Έτος 2016 17 Φύλλο Πληροφοριών HTML: Διαχείριση χρώματος σε ιστοσελίδα Για διάφορους λόγους στην HTML χρησιμοποιείται το δεκαεξαδικό σύστημα αρίθμησης για να προσδιορισθεί το χρώμα. Με τον όρο δεκαεξαδικό, όπως γνωρίζεται, εννοούμε το σύστημα αρίθμησης στο οποίο χρησιμοποιούνται 16 ψηφία για να παραστήσουν αριθμητικές ποσότητες μεγεθών. Τα ψηφία που χρησιμοποιούνται είναι τα : 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Δηλαδή οι αριθμοί από το 10 έως το 15 έχουν αντικατασταθεί από γράμματα του λατινικού αλφαβήτου. Οπότε ένας τυπικός αριθμός στο 16-δικό μπορεί να είναι ο A53C8D. Στη συνέχεια βλέπετε την αντιστοιχία των πρώτων 16 αριθμών στο 10-δικό & στο 16- δικό σύστημα αρίθμησης DEC 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 HEX 0 1 2 3 4 5 6 7 8 9 A B C D E F Για να αποφύγουμε τη σύγχυση με αριθμούς μεγαλύτερους του 9, στην HTML, προτάσσουμε το σύμβολο #. Στην HTML οι χρωματικοί κώδικες (δηλαδή η αντιστοιχία χρωμάτων με αριθμούς του 16δικού) έχουν 6 ψηφία δηλαδή για παράδειγμα #FF3C96. Σημειώνουμε ότι στους ΗΥ χρησιμοποιείται το χρωματικό μοντέλο RGB για την αναπαραγωγή των διαφόρων χρωμάτων δηλ. ο συνδυασμός (ανάμιξη) των τριών βασικών χρωμάτων (Red, Green, Blue). <body bgcolor="#ff8c67"> Συνεπώς στο προηγούμενο παράδειγμα τα 2 πρώτα ψηφία χρησιμοποιούνται για την ποσότητα του κόκκινου (FF), τα δύο επόμενα (8C) για την ποσότητα του πράσινου και τα δύο επόμενα (67) για την ποσότητα του μπλε. FF + 8C + 67 = FF8C67
Εργαστήρι Πληροφορικής Σχολ. Έτος 2016 2017 Φύλλο Εργασίας 2 HTML: <!DOCTYPE>, <iframe>, <frameset >, <frame>, <font> Η δήλωση <!DOCTYPE> πρέπει να προηγείται της ετικέτας. Δεν είναι ετικέτα της HTML αλλά οδηγία προς τον φυλλομετρητή για την έκδοση της HTML με την οποία έχει γραφτεί η Ιστοσελίδα. <head> <title>ο τίτλος της Ιστοσελίδας</title> </head> Το κυρίως περιεχόμενο της Ιστοσελίδας... Ενσωμάτωση μιας Ιστοσελίδας σε μια άλλη Ιστοσελίδα <iframe src="http://gym-peir-athin.att.sch.gr" width="500" height="500"> </iframe> Διαχωρισμός Ιστοσελίδας σε τμήματα (στήλες-πλαίσια) Η ετικέτα <frame> ορίζει ένα συγκεκριμένο παράθυρο (τμήμα πλαίσιο) μέσω της ετικέτας <frameset>. Κάθε πλαίσιο-παράθυρο μπορεί να έχει διαφορετικά χαρακτηριστικά (περίγραμμα, μπάρα κύλισης κλπ) <frameset cols="50%,50%"> <frame src="http://gym-peir-athin.att.sch.gr"> <frame src="http://www.sch.gr"> </frameset> Πρόταση: Δοκιμάστε να αντικαταστήσετε την cols με την rows <frameset cols="50%,25%,25%"> <frame src="http://gym-peir-athin.att.sch.gr"> <frame src="http://www.sch.gr"> <frame src="http://meteo.gr"> </frameset> Χρήση γραμματοσειράς Η ετικέτα <font> ορίζει μέγεθος, μορφή (οικογένεια) καθώς και χρώμα της γραμματοσειράς <p><font size="3" color="red">this is some text!</font></p> <p><font size="2" color="blue">this is some text!</font></p> <p><font face="verdana" color="green">this is some text!</font></p>
Εργαστήρι Πληροφορικής Σχολ. Έτος 2016 2017 Φύλλο Εργασίας 3 HTML: <img>, <span>, <body bgcolor=. background=. >, <table> Με την ετικέτα <img> «εισάγουμε» μια εικόνα σε μια ιστοσελίδα. Μπορούμε να ορίσουμε τη θέση της σε σχέση με μία παράγραφο κειμένου ή ακόμη να δημιουργήσουμε έναν σύνδεσμο προς μια άλλη ιστοσελίδα (Δοκιμάστε τις δύο παρακάτω εκδοχές) <p><strong>στοίχιση Εικόνας ΔΕΞΙΑ του κειμένου</strong></p> <p><img src="0_1.jpg" alt="mr 01" style="float:right;width:42px;height:42px;"> Βαρβάκειο Πρότυπο Γυμνάσιο</p> <p></p> <p><strong>στοίχιση Εικόνας ΑΡΙΣΤΕΡΑ του κειμένου</strong></p> <p><img src="0_1.jpg" alt="mr 01" style="float:left;width:42px;height:42px;"> Βαρβάκειο Πρότυπο Γυμνάσιο</p> <p>χρήση εικόνας ως συνδέσμου (link)</p> <a href="http://gym-peir-athin.att.sch.gr/"> <img src="saintvarvakis.jpg" alt="ιστοσελίδα ΒΠΓ" style="width:42px;height:42px;border:0;"> Με την ετικέτα <span> αλλάζουμε το χρώμα σε τμήμα ενός κειμένου (χαρακτήρα, λέξη, φράση) <p>έχω <span style="color:blue">μπλε</span> μάτια</p> Με την προσθήκη στην των ιδιοτήτων bgcolor & background προσθέτουμε απόχρωση στο υπόβαθρο της ιστοσελίδας, καθώς και εικόνα. Στην HTML5, χρησιμοποιούμε τα CSS για τα οποία θα μιλήσουμε στη συνέχεια. <body bgcolor="#00ffff"> (εναλλακτικά δοκιμάστε: <body background="varvakis.jpg">) <p><a href="http://gym-peir-athin.att.sch.gr"><h1>βαρβακειο ΠΡΟΤΥΠΟ ΓΥΜΝΑΣΙΟ</h1></p> Με την ετικέτα <table> ορίζουμε έναν πίνακα μέσα σε μια ιστοσελίδα. Στοιχεία του είναι: <th> ορίζονται οι επικεφαλίδες στον πίνακα, ορίζονται οι γραμμές, <td>ορίζονται τα περιεχόμενα (data) των κελιών του πίνακα. Δεξιά εμφανίζεται ο πίνακας που θα δημιουργηθεί μέσα στην ιστοσελίδα από τον παρακάτω κώδικα
<head> <style> table, th, td { border: 1px solid black; } </style> </head> <table> <th>όνομα</th> <th>επώνυμο</th> <th>βαθμός</th> <td>κώστας <td>γεωργίου <td>17 <td>ελένη <td>ουράνη <td>19 </table> Με τη χρήση της ετικέτας <colgroup> ομαδοποιούμε στήλες ενός πίνακα ώστε να μορφοποιήσουμε την εμφάνισή τους και με την <col> ορίζουμε τις στήλες στις οποίες θα κάνουμε την αλλαγή. Για παράδειγμα στον προηγούμενο πίνακα ορίζουμε αρχικά μέσω της <cogroup> τις στήλες που θα παρέμβουμε και με την <col> για τις δύο πρώτες αλλάζουμε το χρώμα υποβάθρου σε μπλε και για την τρίτη σε γκρι. Δοκιμάστε να προσθέσετε μετά την <body,> το παρακάτω τμήμα κώδικα, δηλ. την προσθήκη μιας παραγράφου σαν επικεφαλίδα του πίνακα και στη συνέχεια την <colgroup>.</colgroup>, μέχρι την πρώτη πού ήδη έχετε από τον προηγούμενο κώδικα. <p>παράδειγμα εισαγωγής πίνακα με τιμές</p> <p></p> <table> <colgroup> <col span="2" style="background-color:blue"> <col style="background-color:grey"> </colgroup> <th>όνομα</th> <th>επώνυμο</th> <th>βαθμός</th>
Εργαστήρι Πληροφορικής Σχολ. Έτος 2016 2017 Φύλλο Εργασίας 4 HTML: συνέχεια <table> (χρήση πίνακα, με τιμές κελιών συνδέσμους) <head><title>πίνακας Συνδέσμων</title></head> <p style="margin-top:100; margin-bottom: 0; text-align:center;">παράδειγμα Πίνακα με τιμές στα κελιά, συνδέσμους ιστοσελίδων (link) </p> <table border="0" width="900" cellspacing="10" style="border-color: #CFCFD7" height="10"> <td width="400" bgcolor="#cc3300" height="1" align="center"> <a href="http://www.sch.gr"> <font color="#ffffff">1ος ΣΥΝΔΕΣΜΟΣ (ΠΣΔ)</font> <td width="400" bgcolor="#ff1111" height="1" align="right"> <a style="text-decoration:none"; href="http://dschool.edu.gr"> <font color="#000000">2ος ΣΥΝΔΕΣΜΟΣ (Ψηφιακό Σχολείο)</font> <td width="400" bgcolor="#cfcfd7" height="100" align="center"> <a href="http://photodentro.edu.gr/aggregator/"> <img src="fotodendro.png" alt="φωτόδενδρο"> <br>3ος ΣΥΝΔΕΣΜΟΣ (Φωτόδενδρο) <td bgcolor="#cfcf00" width="600" height="1"> <a href="https://auth.e-me.edu.gr/"> <img src="e-me.png" alt="πλατφόρμα e-me" width="100" height="100"> <td width="430" bgcolor="#ffffff" height="9" align="center"> <p> <a style="text-decoration: none; font-style: italic" href="http://gym-peir-athin.att.sch.gr"> <img src="0_1by.png" alt="mr 01" width="100" height="100"><br> <font color="#f08080" face="verdana">1ος ΥΠΕΡΣΥΝΔΕΣΜΟΣ<br>(ιστοσελίδα σχολείου)</font> <td bgcolor="#ffffff" width="683" height="9" align="center"> <a style="text-decoration: none;" href="http://ebooks.edu.gr"> <font color="#cc0000" face="arial">2ος ΥΠΕΡΣΥΝΔΕΣΜΟΣ (Ψηφιακά Βιβλία)</font> </table>