Βαρβάκειο Πρότυπο Γυμνάσιο Εργαστήρι Πληροφορικής Σχολ. Έτος Φύλλο Εργασίας 5
|
|
- Νάρκισσος Ελευθεριάδης
- 6 χρόνια πριν
- Προβολές:
Transcript
1 Φύλλο Εργασίας 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) που δίνεται σε κάθε μία. Άσκηση: Δοκιμάστε να «τρέξετε» τον κώδικα των παρακάτω παραδειγμάτων
2 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;
3 Κάθε στοιχείο της 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>
4 #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>
5 Φύλλο Εργασίας 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=" <area shape="circle" coords="180,198,10" alt="2" href=" <area shape="poly" coords="0,0,0,66,66,0" alt="3" href=" </map>
6 Φύλλο Εργασίας 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=' ΒΠΓ</button>
7 Φύλλο Εργασίας 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 κλπ
8 Φύλλο Εργασίας 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>
9 Δίνουμε ένα απόσπασμα από το υπόδειγμα και την περιοχή που ορίστηκε με την <section> #section { width:550px; float:left; padding:10px; Η διαφορά εμφάνισης των παραγράφων κειμένου στο τμήμα της <section> οφείλεται στη χρήση της class. Δείτε αναλυτικά στον κώδικα html που θα σας δοθεί. Δοκιμάστε να κάνετε αλλαγές, ώστε να επιλέξετε τη μορφή της ιστοσελίδας που εσείς θέλετε.
Εργαλεία Ανάπτυξης Εφαρμογών Internet. Δ.Ι.Ε.Κ. Γλυφάδας Τεχνικός Εφαρμογών Πληροφορικής
Εργαλεία Ανάπτυξης Εφαρμογών Internet Δ.Ι.Ε.Κ. Γλυφάδας Τεχνικός Εφαρμογών Πληροφορικής Το πρότυπο CSS Α Μέρος 2 CSS (Cascading Style Sheets)(1) Ορίζουν την εμφάνιση των στοιχείων σε ένα έγγραφο HTML.
Διαβάστε περισσότεραΑ ΛΥΚΕΙΟΥ - ΕΦΑΡΜΟΓΕΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΜΑΪΟΣ 2019 ΕΝΔΕΙΚΤΙΚΕΣ ΕΡΩΤΗΣΕΙΣ ΚΑΤΑΝΟΗΣΗΣ
Το υλικό αυτό δίνεται στους μαθητές για τη σωστή μελέτη της διδαχθείσας ύλης του μέρους Β. Πρόκειται για ένα συμπαγή κορμό ερωτήσεων και ασκήσεων οι οποίες καλύφθηκαν κατά τη διάρκεια της έως τώρα σχολικής
Διαβάστε περισσότερα<a href="http://www.somepage.com/somepage.html">μετάβαση στο κείμενο</a>.
HTML Τα αρχεία της HTML έχουν ετικέτες (tags) που ορίζουν τη δομή και τη μορφοποίηση των ιστοσελίδων. Οι περισσότερες HTML ετικέτες τις συναντούμε ως ζεύγη τα οποία ενεργούν στα περιεχόμενα μεταξύ των
Διαβάστε περισσότεραΠοιες είναι οι κύριες ετικέτες που χρησιμοποιεί η HTML για την περιγραφή της συνολικής δομής μιας ιστοσελίδας;
Τι είναι η HTML; Η HTML είναι το ακρωνύμιο των λέξεων HyperText Markup Language, δηλαδή Γλώσσα Χαρακτηρισμού Υπερ Κειμένου και βασίζεται στη γλώσσα SGML, Standard Generalized Markup Language, που είναι
Διαβάστε περισσότεραΗ Βίβλος των CSS - Μέρος 3 Το Box Model, τα Περιθώρια και τα Περιγράμματα
Η Βίβλος των CSS - Μέρος 3 Το Box Model, τα Περιθώρια και τα Περιγράμματα Το Box Model Το box model στα CSS περιγράφει τα πλαίσια (boxes) που δημιουργούνται για τα στοιχεία (elements) της HTML. Το box
Διαβάστε περισσότεραΔιάλεξη 2η Εισαγωγή στο CSS
Διάλεξη 2η Εισαγωγή στο CSS Στέλιος Μόσχογλου Θεοδόσης Σουργκούνης Αντώνης Χρυσόπουλος I S S E L D e c o d e (Intelligent Systems & Software Engineering Lab) Στόχος της ώρας Τι είναι το CSS? Γιατί να χρησιμοποιήσω
Διαβάστε περισσότεραCascading Style Sheets (CSS)
Cascading Style Sheets (CSS) Τα Cascading Style Sheets προσφέρουν έναν εύκολο τρόπο για να ορίσουμε τη μορφοποίηση που επιθυμούμε να έχουν οι σελίδες μία τοποθεσίας του Παγκόσμιου Ιστού που δημιουργούμε.
Διαβάστε περισσότεραΕισαγωγή στην HTML. Κεφ. HTML + CSS
Εισαγωγή στην HTML Κεφ. HTML + CSS Συστατικά καλής Ιστοσελίδας α) HTML για το Περιεχόμενο β) CSS για τη μορφοποίηση γ) Javascript για διαδραστικότητα Παράδειγμα Ολυμπιακός Πανιώνιος ΠΑΟΚ Παναθηναϊκός Ξάνθη
Διαβάστε περισσότεραΕργαστήριο #9 Τι πρέπει να έχετε ολοκληρώσει από το προηγούμενο εργαστήριο. βεβαιωθείτε ότι έχετε ολοκληρώσει τις προηγούμενες ασκήσεις Οδηγίες
Εργαστήριο #9 Τι πρέπει να έχετε ολοκληρώσει από το προηγούμενο εργαστήριο. Το σημερινό εργαστήριο είναι ανεξάρτητο από τα προηγούμενα, επειδή όμως θα ζητηθεί να ανακυκλώσετε υλικό από εκείνα, βεβαιωθείτε
Διαβάστε περισσότεραΤο απεικονιστικό μοντέλο μορφοποίησης των CSS
Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #6 0 : CSS: Χρήση των ιδιοτήτων του κουτιού (box properties). Διάταξη σελίδων Γαβαλάς Δαμιανός dgavalas@aegean.gr Το απεικονιστικό μοντέλο μορφοποίησης των CSS Περιγράφει
Διαβάστε περισσότεραΒαρβάκειο Πρότυπο Γυμνάσιο
Παραδόσεις & εργαστηριακές ασκήσεις στην HTML Βαρβάκειο Πρότυπο Γυμνάσιο Σχολ. Χρονιά 2016-2017 Θ. Οτζάκογλου Εργαστήρι Πληροφορικής Σχολ. Έτος 2016 2017 Αν και δεν είναι μία ακόμη «γλώσσα προγραμματισμού»,
Διαβάστε περισσότεραΓαβαλάς Δαμιανός dgavalas@aegean.gr. Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #3 0 : Εισαγωγή στacascading Style Sheets (CSS)
Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #3 0 : Εισαγωγή στacascading Style Sheets (CSS) Γαβαλάς Δαμιανός dgavalas@aegean.gr Επικαλυπτόμενα Φύλλα Στυλ (Cascading Style Sheets, CSS) Η (X)HTML προσδιορίζει τη βασική
Διαβάστε περισσότεραΕισαγωγή εικόνων. ετικέτα <img>
Εισαγωγή εικόνων ετικέτα σύνταξη η ιδιότητα src καθορίζει ποια εικόνα θα εισαχθεί στη σελίδα η τιμή url είναι η πλήρης ή σχετική διαδρομή της εικόνας Παράδειγμα 1
Διαβάστε περισσότεραCSS Εργαστήριο 1. Εισαγωγή - Σύνταξη - Εφαρμογή στην HTML
CSS Εργαστήριο 1. Εισαγωγή - Σύνταξη - Εφαρμογή στην HTML Εισαγωγή Το CSS (Cascading Style Sheets ή Επικαλυπτόμενα Φύλλα Στυλ) μας επιτρέπει να αλλάξουμε τον τρόπο με τον οποίο παρουσιάζονται τα στοιχεία
Διαβάστε περισσότεραΝέες Τεχνολογίες στην Εκπαίδευση
Σχολή Εφαρμοσμένων Μαθηματικών και Φυσικών Επιστημών Εθνικό Μετσόβιο Πολυτεχνείο Νέες Τεχνολογίες στην Εκπαίδευση Χάρτες Στεφανέας Πέτρος Ζαμαρίας Βασίλης Άδεια Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται
Διαβάστε περισσότεραΒαρβάκειο Πρότυπο Γυμνάσιο
Παραδόσεις & εργαστηριακές ασκήσεις στην HTML Βαρβάκειο Πρότυπο Γυμνάσιο Σχολ. Χρονιά 2017-2018 Θ. Οτζάκογλου Εργαστήρι Πληροφορικής Σχολ. Έτος 2016 2017 Αν και δεν είναι μία ακόμη «γλώσσα προγραμματισμού»,
Διαβάστε περισσότεραTEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)
TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα Εαρινό εξάμηνο Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί
Διαβάστε περισσότεραΕΠΛ 012. ιαδοχικά Φύλλα Στυλ
ΕΠΛ 012 ιαδοχικά Φύλλα Στυλ Cascading Style Sheets (CSS) Φύλλα Στυλ Μηχανισµός καθορισµού και τροποποίησης µορφοποίησης εγγράφων από τους συγγράφεις Πιο γενικός τρόπος από το καθορισµό όλων των χαρακτηριστικών
Διαβάστε περισσότεραCSS. Εισαγωγή & Βασικές έννοιες. Cascading Style Sheets. Επικαλυπτόμενα φύλλα στυλ
CSS Εισαγωγή & Βασικές έννοιες Cascading Style Sheets Επικαλυπτόμενα φύλλα στυλ Περιεχόμενα Τι είναι CSS Πλεονεκτήματα CSS μορφοποίησης Συντακτικό του CSS Ιδιότητες CSS Εφαρμογή CSS κανόνων Επικάλυψη CSS
Διαβάστε περισσότεραΣτην τεχνολογία των CSS, οι κανόνες στυλ (style
Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #4 0 : CSS: Βασικές και προχωρημένες τεχνικές επιλογής, τα στοιχεία και , ψευδο κλάσεις και ψευδο επιλογείς Γαβαλάς Δαμιανός dgavalas@aegean.gr CSS κανόνες στυλ
Διαβάστε περισσότεραΚεφάλαιο 11: Εισαγωγή στην HTML. Εφαρμογές Πληροφορικής Κεφ. 11 Καραμαούνας Πολύκαρπος
Κεφάλαιο 11: Εισαγωγή στην HTML 1 11.1 Γενική εισαγωγή στην HTML Τι είναι η HTML HyperText Markup Language - Γλώσσα Χαρακτηρισμού Υπερ-Κειμένου είναι η βασική γλώσσα με την οποία πραγματοποιείται η δόμηση
Διαβάστε περισσότεραEurope Code Week 7-22 Οκτωβρίου Μία γιορτή δημιουργίας με κώδικα
Europe Code Week 7-22 Οκτωβρίου 2017 7-22 October 2017 Μία γιορτή δημιουργίας με κώδικα @CodeWeekEU #codeeu codeeu Εισαγωγή στο Web Development CSS Λίγα λόγια... Η γλώσσα CSS χρησιμοποιείται για τη μορφοποίηση
Διαβάστε περισσότεραΠληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου. Μάθημα 6 ο Τεχνολογίες Διαδικτύου: HTML II
Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου Μάθημα 6 ο Τεχνολογίες Διαδικτύου: HTML II Εισαγωγή Εικόνων Οι φυλλομετρητές μπορούν να εμφανίσουν ένθετες
Διαβάστε περισσότεραΗ γλώσσα HTML. Επιμέλεια: Δέγγλερη Σοφία
Η γλώσσα HTML Επιμέλεια: Δέγγλερη Σοφία Υπερκείμενο Το δομικό χαρακτηριστικό του Παγκόσμιου Ιστού Ένα αρχείο Απλό κείμενο και υπερσύνδεσμοι Υπερσύνδεσμος Μετάβαση σε διάφορα άλλα έγγραφα Αποτελείται από
Διαβάστε περισσότεραΗ γλώσσα CSS χρησιμοποιείται για τη μορφοποίηση ιστοσελίδων και η σύνταξη της είναι αρκετά απλή.
Εισαγωγή στο CSS Η γλώσσα CSS χρησιμοποιείται για τη μορφοποίηση ιστοσελίδων και η σύνταξη της είναι αρκετά απλή. Πλεονεκτήματα CSS έναντι χρήσης μόνο HTML Μεγαλύτερη ευελιξία μορφοποιήσεων. Το CSS κατέστησε
Διαβάστε περισσότεραΒασίλειος Κοντογιάννης ΠΕ19
Ενότητα3 Επικοινωνία και Διαδίκτυο 11.1 Γενική Εισαγωγή στην HTML Τι είναι η HTML (HyperText Markup Language); Είναι μια γλώσσα σήμανσης (Markup) με την οποία πραγματοποιείται η δόμηση σελίδων του Παγκόσμιου
Διαβάστε περισσότεραΕτικέτες HTML. <!-->: Τα σχόλια χρησιμοποιούνται για να γράφουμε σημειώσεις μέσα στον
Ετικέτες HTML : Τα σχόλια χρησιμοποιούνται για να γράφουμε σημειώσεις μέσα στον πηγαίο κώδικα για να διευκολύνουμε την επεξεργασία και την συντήρηση του αρχείου. Τα σχόλια δεν εμφανίζονται στην οθόνη
Διαβάστε περισσότεραCSS 1. Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Δ. Ζήνδρος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών
CSS 1 Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Δ. Ζήνδρος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών Άδεια Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες χρήσης Creative
Διαβάστε περισσότερα3. ΕΙΣΑΓΩΓΗ ΣΤΟ CSS ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ
2014 3. ΕΙΣΑΓΩΓΗ ΣΤΟ CSS ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ Εισαγωγή Το CSS (Cascading Style Sheets) είναι αρχεία με κατάληξη.css τα οποία καθορίζουν την μορφοποίηση των ιστοσελίδων. Μέσω αυτών επιτυγχάνεται
Διαβάστε περισσότεραΣπουδές CAD, Πληροφορικής, Οικονομίας, Διοίκησης και D.T.P. με Σύστημα διδασκαλίας facetoface
Copyright 2009-2012 -SYSTEM- All rights reserved 2/159 ΠΕΡΙΕΧΟΜΕΝΑ Μάθημα 1: New - Save Μάθημα 2: Εισαγωγή στη CSS Μάθημα 3: Τρόπος Σύνταξης Μάθημα 4: Σχόλια Μάθημα 5: ID Μάθημα 6: Class Μάθημα 7: Background
Διαβάστε περισσότεραCSS. Cascading Style Sheets. Γλώσσες και Τεχνολογίες Ιστού Τμήμα Πληροφορικής - ΑΤΕΙ Θεσσαλονίκης
CSS Cascading Style Sheets CSS Τα Cascading Style Sheets ορίζουν τις ιδιότητες παρουσίασης των στοιχεία της HTML. Αρχικά η HTML δεν περιελάμβανε στοιχεία για την εμφάνιση / παρουσίαση της πληροφορίας αλλά
Διαβάστε περισσότεραCSS Εργαστήριο 5. Θέση και διάταξη
Display - Επίδειξη CSS Εργαστήριο 5. Θέση και διάταξη Η ιδιότητα display καθορίζει πως και εάν ένα στοιχείο εμφανίζεται στην οθόνη. Τα περισσότερα στοιχεία, εξορισμού είναι είτε block είτε inline. Ένα
Διαβάστε περισσότεραΒασικά στοιχεία του CSS
Βασικά στοιχεία του CSS Περιεχόμενα Τι είναι CSS Πλεονεκτήματα CSS μορφοποίησης Συντακτικό του CSS Ιδιότητες CSS Εφαρμογή CSS κανόνων Επικάλυψη CSS κανόνων 2 Μορφοποίηση με HTML Η HTML είναι σχεδιασμένη
Διαβάστε περισσότεραΣτοιχεία ορισμού θέσης (Positioning Elements)
Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #7 0 : Ορισμός θέσης σε διατάξεις (positioned layouts). Γαβαλάς Δαμιανός dgavalas@aegean.gr Στοιχεία ορισμού θέσης (Positioning Elements) Οι ιδιότητες τοποθέτησης των CSS
Διαβάστε περισσότεραΠρογραμματισμός Διαδικτύου Ασκήσεις Εργαστηρίου
Προγραμματισμός Διαδικτύου Ασκήσεις Εργαστηρίου Ενότητα: ΕΡΓΑΣΤΗΡΙΑΚΗ ΑΣΚΗΣΗ Νο 03 Δρ. Μηνάς Δασυγένης mdasyg@ieee.org Τμήμα Μηχανικών Πληροφορικής και Τηλεπικοινωνιών Εργαστήριο Ψηφιακών Συστημάτων και
Διαβάστε περισσότεραΣχεδίαση και Ανάπτυξη Ιστότοπων. HTML Στοιχεία - Βασικές Ετικέτες Ειδικοί Χαρακτήρες Παρουσίαση 5 η. Βελώνης Γεώργιος Καθηγητής Πληροφορικής ΠΕ20
Σχεδίαση και Ανάπτυξη Ιστότοπων HTML Στοιχεία - Βασικές Ετικέτες Ειδικοί Χαρακτήρες Παρουσίαση 5 η 1 Βελώνης Γεώργιος Καθηγητής Σημασία συμβόλων HTML5 tags Obsolete tags: Μην αφήνετε αυτές τις ετικέτες
Διαβάστε περισσότεραΝέες Τεχνολογίες στην Εκπαίδευση
Σχολή Εφαρμοσμένων Μαθηματικών και Φυσικών Επιστημών Εθνικό Μετσόβιο Πολυτεχνείο Νέες Τεχνολογίες στην Εκπαίδευση Επάλληλα φύλλα στυλ (CSS): Μια εισαγωγή Στεφανέας Πέτρος Ζαμαρίας Βασίλης Άδεια Χρήσης
Διαβάστε περισσότεραΕισαγωγη στην html. Η δομή μιας ιστοσελίδας (αρχείο html) Η βασική δομή ενός αρχείου html είναι η εξής: <html> <head>
Εισαγωγη στην html Ο παγκόσμιος ιστός (αγγ.: World Wide Web ή www) είναι η πιο δημοφιλής υπηρεσία που μας παρέχει το Διαδίκτυο (Internet) και είναι ένα σύστημα διασυνδεδεμένων πληροφοριών (κειμένου, εικόνας,
Διαβάστε περισσότεραΕμφάνιση και κρύψιμο στοιχείων
Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #8 0 : Δυναμικά εφέ με χρήση CSS Γαβαλάς Δαμιανός dgavalas@aegean.gr Εμφάνιση και κρύψιμο στοιχείων Χρήση της ιδιότητας display με επιτρεπτές τιμές: none: κρύψιμο του στοιχείου
Διαβάστε περισσότεραγενικό ΛΥΚειο Νέων ΜΟΥΔανιών ΕΦΑΡΜΟΓΕΣ ΠΛΗΡΟΦΟΡΙΚΗΣ Α ΛΥΚΕΙΟΥ Διδάσκων Καθηγητής: Γιώργος Μαλακούδης
Διδάσκων Καθηγητής: Γιώργος Μαλακούδης email: gmalakoudi@sch.gr Περιεχόμενα ΔΡΑΣΤΗΡΙΟΤΗΤΑ 1: Δημιουργία της 1 ης μας σελίδας!... 2 ΔΡΑΣΤΗΡΙΟΤΗΤΑ 2: Επικεφαλίδες και παράγραφοι... 3 ΔΡΑΣΤΗΡΙΟΤΗΤΑ 3: Κείμενο,
Διαβάστε περισσότεραCSS 3. Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Π. Αγγελάτος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών
CSS 3 Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Π. Αγγελάτος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών Άδεια Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες χρήσης
Διαβάστε περισσότερα1. <body> 2. <header> 3. <h1> My Page </h1> 4. </header> 5. <section>
Ενδεικτικές ερωτήσεις 1. Τι σημαίνουν τα αρχικά CSS 2. Τι σημαίνουν τα αρχικά HTML 3. Ποια η διαφορά μεταξύ Internet και Web; a. Είναι το ίδιο b. Το Web είναι μια υπηρεσία του διαδικτύου 4. Ποια η διαφορά
Διαβάστε περισσότεραΆσκηση 6 Επαναληπτική Άσκηση HTML
Άσκηση 6 Επαναληπτική Άσκηση HTML ΕΤΙΚΕΤΕΣ HTML ΕΤΙΚΕΤΑ ΠΕΡΙΓΡΑΦΗ ΙΔΙΟΤΗΤΕΣ ΙΔΙΟΤΗΤΑ ΤΙΜΗ ΠΕΡΙΓΡΑΦΗ Βασικές Ορίζει τον τύπο του αρχείου Ορίζει ένα αρχείο HTML Ορίζει ένα τίτλο
Διαβάστε περισσότεραΒασίλειος Κοντογιάννης ΠΕ19
Ενότητα3 Επικοινωνία και Διαδίκτυο 11.1 Γενική Εισαγωγή στην HTML Τι είναι η HTML (HyperText Markup Language); Είναι μια γλώσσα σήμανσης (Markup) με την οποία πραγματοποιείται η δόμηση σελίδων του Παγκόσμιου
Διαβάστε περισσότεραΕισαγωγή στην Επιστήμη Υπολογιστών. Εισαγωγή στην HTML. Άννα Κεφάλα Παναγιώτα Μιχόλια
Εισαγωγή στην Επιστήμη Υπολογιστών Εισαγωγή στην HTML Άννα Κεφάλα Παναγιώτα Μιχόλια Εργαστηριακές Σημειώσεις ΕΙΣΑΓΩΓΗ ΣΤΗ ΓΛΩΣΣΑ HTML ΜΕΡΟΣ Β': CSS ΚΑΙ FORMS 2 Cascading Style Sheets (CSS) Cascading Style
Διαβάστε περισσότεραΠεριεχόμενα. Γαβαλάς Δαμιανός
Δικτυακά Πολυμέσα ΙΙ Διάλεξη #5 η : Τυπογραφία στο web Γαβαλάς Δαμιανός dgavalas@aegean.gr Περιεχόμενα Κατανόηση αρχών σχεδιασμού με γραμματοσειρές Κατανόηση των μονάδων μέτρησης που χρησιμοποιούνται στα
Διαβάστε περισσότεραΣε αυτό το µάθηµα θα ασχοληθούµε µε τη βελτίωση της εµφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισµό όλων των αλλαγών στην εµφάνιση της σελίδας
Σε αυτό το µάθηµα θα ασχοληθούµε µε τη βελτίωση της εµφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισµό όλων των αλλαγών στην εµφάνιση της σελίδας µέσω της τεχνολογίας των ιαδοχικών Φύλλων Στυλ (cascading
Διαβάστε περισσότεραΠίνακες. ετικέτα <table>
Πίνακες ετικέτα σύνταξη κελί 1 κελί 2 κελί 3 κελί 4 : πίνακας : γραμμή : κελί Ιδιότητα border border : ορίζει
Διαβάστε περισσότεραΣχεδιασμός και Ανάπτυξη Ιστότοπων
Βελώνης Γεώργιος Καθηγητής Σχεδιασμός και Ανάπτυξη Ιστότοπων Εισαγωγή στα CSS (Cascading Style Sheets) Παρουσίαση 13 η 1 Βελώνης Γεώργιος Καθηγητής Περιεχόμενα Εισαγωγή Πλεονεκτήματα χρήσης των CSS Βασικοί
Διαβάστε περισσότεραCascading Style Sheets
Cascading Style Sheets CSS είναι το ακρωνύµιο του Cascading Style Sheets (Επικαλυπτόµενα φύλλα στυλ). CSS είναι µια γλώσσα style δηλ. µια γλώσσα η οποία καθορίζει τη εµφάνιση HTML εγγράφων. Για παράδειγµα,
Διαβάστε περισσότεραΣχεδιασμός και Ανάπτυξη Ιστότοπων
Σχεδιασμός και Ανάπτυξη Ιστότοπων CSS: Φόντο (background) και Περίγραμμα (border) στοιχείου ιστοσελίδας Παρουσίαση 16 η 1 Βελώνης Γεώργιος Καθηγητής Browsers δοκιμών Οι δοκιμές έγιναν στους παρακάτω browsers
Διαβάστε περισσότεραΗ Βίβλος των CSS. Εισαγωγή στα CSS
Η Βίβλος των CSS Εισαγωγή στα CSS Τα Διαδοχικά Φύλλα Στυλ (CSS, Cascading Style Sheets) αποτελούν ένα πολύ καλό εργαλείο για να μπορούμε να αλλάζουμε την εμφάνιση και τη διάταξη (layout) των ιστοσελίδων
Διαβάστε περισσότεραΓαβαλάς Δαμιανός dgavalas@aegean.gr
Πανεπιστήμιο Αιγαίου Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας Δικτυακά Πολυμέσα IΙ (Β Έτος, 4ο εξ) Εργαστήριο #3ο: Ορισμός επιλογέων, μορφοποίηση με CSS Γαβαλάς Δαμιανός
Διαβάστε περισσότεραΕΠΕΞΕΡΓΑΣΙΑ ΚΕΙΜΕΝΟΥ. Κειμενογράφος WORD
ΕΠΕΞΕΡΓΑΣΙΑ ΚΕΙΜΕΝΟΥ Κειμενογράφος WORD ΣΚΟΠΟΣ Η ανάπτυξη δεξιοτήτων επεξεργασίας κειμένου ΠΡΟΤΑΣΕΙΣ ΚΑΙ ΡΥΘΜΙΣΕΙΣ Άνω περιθώριο (top margin) : 2.49cm Κάτω περιθώριο (bottom margin) :5.99cm Αριστερό περιθώριο
Διαβάστε περισσότεραΠρογραμματισμός Παγκόσμιου Ιστού
Πανεπιστήμιο Πειραιώς Τμήμα Ψηφιακών Συστημάτων Προγραμματισμός Παγκόσμιου Ιστού 6 η Διάλεξη Δημοσθένης Κυριαζής Δευτέρα 3 Απριλίου 2017 Σημερινή διάλεξη Σύνοψη προηγούμενης διάλεξης CSS Positioning Responsive
Διαβάστε περισσότεραΠίνακες. ιδιότητες ετικέτας <tr>
Πίνακες ιδιότητες ετικέτας Ιδιότητα align στοιχίζει κατά την οριζόντια διεύθυνση τα περιεχόμενα μιας γραμμής του πίνακα αριστερά (left), δεξιά (right), στο κέντρο (center), ή με πλήρη στοίχιση (justify)
Διαβάστε περισσότεραΣχεδίαση και Ανάπτυξη Ιστότοπων
Σχεδίαση και Ανάπτυξη Ιστότοπων HTML Καθορισμός Χρωμάτων και Γραμματοσειρών σε μια ιστοσελίδα Παρουσίαση 7 η Βελώνης Γεώργιος Καθηγητής 1 Σημασία συμβόλων HTML5 tags. Obsolete tags: Μην αφήνετε αυτές τις
Διαβάστε περισσότεραΤεχνολογίες Διαδικτύου - Εργαστήριο 1 ο
Τεχνολογίες Διαδικτύου - Εργαστήριο 1 ο 1. Δημιουργία μιας απλής σελίδας HTML Στον προσωπικό σας κατάλογο δημιουργήστε ένα φάκελο με όνομα HTML. Ανοίξτε το Notepad ακολουθώντας τη διαδρομή (Start All Programs
Διαβάστε περισσότεραΗ ΓΛΩΣΣΑ ΕΠΙΚΑΛΥΠΤΩΜΕΝΩΝ ΜΟΡΦΟΠΟΙΗΣΕΩΝ CSS
Η ΓΛΩΣΣΑ ΕΠΙΚΑΛΥΠΤΩΜΕΝΩΝ ΜΟΡΦΟΠΟΙΗΣΕΩΝ CSS Πίνακες Ιδιοτήτων Μορφοποίησης CSS Ιδιότητες Διαστασιολόγησης Στοιχείων height Ορίζει το ύψος ενός στοιχείου auto lenght (px) line-height Ορίζει το ύφος μιας
Διαβάστε περισσότερα12. HTML και CSS. Προαπαιτούμενες Γνώσεις: Απλή γνώση της σύνταξης HTML. Αρκεί η άσκηση «Η γλώσσα HTML Εισαγωγή».
12. HTML και CSS Σκοπός του Εργαστηρίου: Σκοπός της παρούσας εργαστηριακής άσκησης είναι η εισαγωγή στην τεχνολογία Cascading Style Sheets (CSS), η εξοικείωση με τις βασικές αρχές και χρήσεις της και τη
Διαβάστε περισσότεραΓραπτή εξέταση. Γαβαλάς Δαμιανός dgavalas@aegean.gr. Δικτυακά Πολυμέσα ΙΙ Διάλεξη #12 η : Επανάληψη, προετοιμασία για τις γραπτές εξετάσεις
Δικτυακά Πολυμέσα ΙΙ Διάλεξη #12 η : Επανάληψη, προετοιμασία για τις γραπτές εξετάσεις Γαβαλάς Δαμιανός dgavalas@aegean.gr Γραπτή εξέταση H διάρκεια της εξέτασης θα είναι 2 ώρες και 15 Θα απαντήσετε σε
Διαβάστε περισσότεραΠληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου. Μάθημα 5 ο Τεχνολογίες Διαδικτύου: HTML I
Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου Μάθημα 5 ο Τεχνολογίες Διαδικτύου: HTML I Διαδικτυακή Εφαρμογή (1/2) Ως διαδικτυακή εφαρμογή μπορούμε
Διαβάστε περισσότεραΘέματα Προγραμματισμού Διαδικτύου ~ CSS ~
Θέματα Προγραμματισμού Διαδικτύου ~ CSS ~ Στελιος Σφακιανάκης Εαρινό 2019 Αυτή η εργασία χορηγείται με άδεια Creative Commons Αναφορά Δημιουργού - Μη Εμπορική Χρήση - Παρόμοια Διανομή 1 Εισαγωγή στο CSS
Διαβάστε περισσότεραΓλώσσα περιγραφής οδηγιών εµφάνισης-στοιχειοθέτησης
CASCADING STYLE-SHEETS CASCADING STYLE-SHEETS Γλώσσα περιγραφής οδηγιών εµφάνισης-στοιχειοθέτησης εφαρµογών HTML. Τα CSS ορίζονται σε δύο συστάσεις του W3C: CSS1, εκ. 1996 περιλαµβάνει περίπου 50 ιδιότητες
Διαβάστε περισσότεραCSS για προχωρημένους: Πλαϊνή στήλη πλοήγησης ιστοσελίδας. Ανδρέας Αθανασόπουλος
CSS για προχωρημένους: Πλαϊνή στήλη πλοήγησης ιστοσελίδας Ανδρέας Αθανασόπουλος Πλαϊνή στήλη πλοήγησης Αντικείμενο: Πρόβλημα: Λογισμικό: Ρύθμιση χρώματος και μήκους Πώς δίνουμε χρώμα φόντου και παράλληλα
Διαβάστε περισσότεραΚΕΦΑΛΑΙΟ 11. Εισαγωγή στην HTML. ΚΕΦΑΛΑΙΟ 11 Εισαγωγή στην HTML. Α Γενικού Λυκείου
Α Γενικού Λυκείου 93 Διδακτικές ενότητες 11.1 Γενική εισαγωγή στην HTML 11.2 Η HTML5 11.3 Ενσωμάτωση (Embedding) 11.4 Καθορίζοντας την εμφάνιση CSS Διδακτικοί στόχοι Σκοπός του κεφαλαίου είναι οι μαθητές
Διαβάστε περισσότεραCSS 2. Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Π. Αγγελάτος. Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών
CSS 2 Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Π. Αγγελάτος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών Άδεια Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες χρήσης
Διαβάστε περισσότεραTEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)
TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα Εαρινό εξάμηνο Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί
Διαβάστε περισσότεραΕισαγωγή σε HTML και CSS. Παναγιώτης Τσαρχόπουλος
Εισαγωγή σε HTML και CSS Παναγιώτης Τσαρχόπουλος Περιεχόμενα Εισαγωγικές έννοιες Ορολογία και σύνταξη Κείμενο σε HTML έγγραφα Σύνδεσμοι Ψηφιακές - Ευφυείς Πόλεις - Εισαγωγή σε HTML και CSS 2 Εισαγωγικές
Διαβάστε περισσότεραΕισαγωγή στον Παγκόσμιο ιστό και στη γλώσσα Html. Χρ. Ηλιούδης
Εισαγωγή στον Παγκόσμιο ιστό και στη γλώσσα Html Χρ. Ηλιούδης Παγκόσμιος Ιστός (WWW) Ο Παγκόσμιος Ιστός (World Wide Web WWW), ή απλώς Ιστός, βασίζεται στην ιδέα των κατανεμημένων πληροφοριών. Αντί όλες
Διαβάστε περισσότεραΗTML και XHTML Βασικές. Βασική σύνταξη HTML και HTML Ηδομή μιας HTML σελίδας
ΗTML και XHTML Βασικές έννοιες Βασική σύνταξη HTML και HTML Ηδομή μιας HTML σελίδας Η γραμματική της ΗΤML Όπως κάθε γλώσσα έχει μια γραμματική
Διαβάστε περισσότεραΑλεξιάδης Γεώργιος (ΠΕ86) -
11.1 Γενική Εισαγωγή στην HTML Τι είναι η HTML; HyperText Markup Language (Γλώσσα Χαρακτηρισμού Υπερ-Κειμένου) Βασίζεται στην SGML (Standard Generalized Markup Language) που είναι ένα πολύ μεγαλύτερο σύστημα
Διαβάστε περισσότεραΕκπαιδευτικά Περιβάλλοντα Διαδικτύου
ΑΡΙΣΤΟΤΕΛΕΙΟ ΠΑΝΕΠΙΣΤΗΜΙΟ ΘΕΣΣΑΛΟΝΙΚΗΣ ΑΝΟΙΚΤΑ ΑΚΑΔΗΜΑΪΚΑ ΜΑΘΗΜΑΤΑ Εκπαιδευτικά Περιβάλλοντα Διαδικτύου Ενότητα 6: CSS Θρασύβουλος-Κωνσταντίνος Τσιάτσος Άδειες Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται
Διαβάστε περισσότεραΣε αυτό το μάθημα θα ασχοληθούμε με τη βελτίωση της εμφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισμό όλων των αλλαγών τις οποίες επιθυμούμε να
Σε αυτό το μάθημα θα ασχοληθούμε με τη βελτίωση της εμφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισμό όλων των αλλαγών τις οποίες επιθυμούμε να κάνουμε μέσω ενός εξωτερικού αρχείου.το αρχείο αυτό
Διαβάστε περισσότεραΕΙΔΙΚΟΙ ΧΑΡΑΚΤΗΡΕΣ ΧΑΡΑΚΤΗΡΕΣ ΜΕ ΕΙΔΙΚΕΣ ΛΕΙΤΟΥΡΓΙΕΣ. ΠΙΝΑΚΑΣ ΚΩΔΙΚΩΝ ΔΙΑΦΥΓΗΣ Χαρακτήρας Κωδικός διαφυγής Ερμηνεία Συμβόλου & nbsp;
ΕΙΔΙΚΟΙ ΧΑΡΑΚΤΗΡΕΣ Υπάρχουν ειδικοί χαρακτήρες που δεν μπορούν να απεικονισθούν με απλές πληκτρολογήσεις (πατώντας ένα πλήκτρο ή ένα πλήκτρο και το Shift) αλλά μόνο με πιο περίπλοκους τρόπους (π.χ. πατώντας
Διαβάστε περισσότεραΣχεδιασμός και Ανάπτυξη Ιστότοπων
Σχεδιασμός και Ανάπτυξη Ιστότοπων CSS: Ιδιότητες μορφοποίησης κειμένου Παρουσίαση 14 η 1 Βελώνης Γεώργιος Καθηγητής Browsers δοκιμών Οι δοκιμές έγιναν στους παρακάτω browsers και εκδόσεις τους: Google
Διαβάστε περισσότεραΥπερσυνδέσεις (hyperlinks)
Υπερσυνδέσεις (hyperlinks) Οι υπερσυνδέσεις αποτελούν το δυναμικό στοιχείο σε ένα έγγραφο html. Με τις υπερσυνδέσεις είναι δυνατή, εύκολη και γρήγορη η μετάβαση ή η παραπομπή από ένα αρχείο html (πηγή)
Διαβάστε περισσότεραSVG Εργαστήριο 1. Εισαγωγή στα διανυσματικά γραφικά SVG
SVG Εργαστήριο 1. Εισαγωγή στα διανυσματικά γραφικά SVG Χρήση SVG Τα SVG γραφικά, Scalable Vector Graphics, αναφέρονται σε διανυσματικά γραφικά που μένουν αναλοίωτα σε οποιαδήποτε αλλαγή των διαστάσεών
Διαβάστε περισσότεραΠΡΟΣΟΧΗ: Οι απαντήσεις πολλαπλής επιλογής µόνο πάνω στο ΦΥΛΛΟ ΑΠΑΝΤΗΣΕΩΝ
ΤΕΙ Σερρών Σχολή Τεχνολογικών Εφαρμογών, Τμήμα Πληροφορικής και Επικοινωνιών Προγραμματιστικές Εφαρμογές στο Διαδίκτυο (Θ) Τελική Εξέταση Διδάσκων: Δ. Κοτζίνος Όνοµα: Α.Μ. : Εξάµηνο : Αίθουσα Έδωσα Project
Διαβάστε περισσότεραΕΠΛ 003: ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΑΙ ΠΛΗΡΟΦΟΡΙΑΚΑ ΣΥΣΤΗΜΑΤΑ HTML
ΕΠΛ 003: ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΑΙ ΠΛΗΡΟΦΟΡΙΑΚΑ ΣΥΣΤΗΜΑΤΑ HTML Στόχοι 1 Να δημιουργήσουμε υπερκείμενα με την Γλώσσα Επισημείωσης Υπερκειμένων (hypertext markup language, HTML). Υπολογιστικά συστήματα:
Διαβάστε περισσότερα1 ο Εργαστήριο Συντεταγμένες, Χρώματα, Σχήματα
1 ο Εργαστήριο Συντεταγμένες, Χρώματα, Σχήματα 1. Σύστημα Συντεταγμένων Το σύστημα συντεταγμένων που έχουμε συνηθίσει από το σχολείο τοποθετούσε το σημείο (0,0) στο σημείο τομής των δυο αξόνων Χ και Υ.
Διαβάστε περισσότεραΤεχνολογίες Διαδικτύου (Εξασκηθείτε στην HTML)
Τεχνολογίες Διαδικτύου (Εξασκηθείτε στην HTML) 1. Δημιουργία μιας απλής σελίδας HTML Ανοίξτε το Notepad ακολουθώντας τη διαδρομή Start All Programs Accessories Notepad Πληκτρολογήστε το ακόλουθο κείμενο:
Διαβάστε περισσότεραΣχεδιασμός και Ανάπτυξη Ιστοσελίδων ΙΙ ΙΕΚ ΤΡΙΑΝΔΡΙΑΣ ΓΡΑΦΙΣΤΑΣ ΕΝΤΥΠΟΥ ΚΑΙ ΗΛΕΚΤΡΟΝΙΚΩΝ ΜΕΣΩΝ. CSS - Cascading Style Sheets
Σχεδιασμός και Ανάπτυξη Ιστοσελίδων ΙΙ ΙΕΚ ΤΡΙΑΝΔΡΙΑΣ ΓΡΑΦΙΣΤΑΣ ΕΝΤΥΠΟΥ ΚΑΙ ΗΛΕΚΤΡΟΝΙΚΩΝ ΜΕΣΩΝ CSS - Cascading Style Sheets Τι είναι τα CSS; Τα CSS (Διαδοχικά Φύλλα Στυλ) αποτελούν ένα πολύ καλό εργαλείο
Διαβάστε περισσότεραΦόρμες. Γενικοί κανόνες. Η ετικέτα <form>
Φόρμες Οι φόρμες περιέχουν τα στοιχεία φόρμας στο οποία ένας χρήστης μπορεί να εισαγάγει δεδομένα τα οποία στη συνέχεια αποστέλλονται σε έναν εξυπηρετητή για παραπέρα επεξεργασία. Γενικοί κανόνες Για τις
Διαβάστε περισσότεραΜΑΘΗΜΑ Στοίχιση Παραγράφων. 2. Εσοχές Παραγράφων ΣΤΟΧΟΙ:
ΜΑΘΗΜΑ 4 ΣΤΟΧΟΙ: 1. Στοίχιση Παραγράφων 2. Εσοχές Παραγράφων 3. Διάστημα Μεταξύ Γραμμών (Διάστιχο) 4. Απόσταση Μεταξύ Παραγράφων 5. Καθορισμός Στηλοθετών (Tabs) 6. Μετακίνηση Στηλοθετών 7. Διαγραφή Στηλοθετών
Διαβάστε περισσότεραΆσκηση 8 - Δημιουργία ιστοσελίδας μουσείο και προβολή εκθεμάτων.
Άσκηση 8 - Δημιουργία ιστοσελίδας μουσείο και προβολή εκθεμάτων. Στην παρούσα άσκηση πρόκειται να δημιουργήσετε έναν ιστότοπο, ο οποίος θα αποτελείται από πολλές ιστοσελίδες που θα προβάλουν τα εκθέματα
Διαβάστε περισσότεραΣχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας
Πανεπιστήμιο Αιγαίου Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας Δικτυακά Πολυμέσα Ι (Β Έτος, 3ο εξ) Διάλεξη #5η: HTML: πίνακες (tables), πλαίσια (frames) Γαβαλάς Δαμιανός
Διαβάστε περισσότεραRef.: SLWS 1 5Copyright 2005 The European Computer Driving Licence Foundation Ltd Σελίδα 1 από 7
The European Computer Driving Licence Foundation Ltd Σελίδα 1 από 7 ΣΤΟΧΟΙ ΕΞΕΤΑΣΗΣ Η ενότητα ECDL WebStarter απαιτεί από τον Υποψήφιο να κατανοεί τις κύριες έννοιες της σχεδίασης και δημοσίευσης δικτυακών
Διαβάστε περισσότεραΟδηγίες Στο σημερινό εργαστήριο θα αρχίσετε να χρησιμοποιείτε βασικές οδηγίες μορφοποίησης της ιστοσελίδας σας (κάτι που έχουμε αποφύγει έως τώρα!).
Εργαστήριο #8 Τι πρέπει να έχετε ολοκληρώσει από το προηγούμενο εργαστήριο. Το σημερινό εργαστήριο είναι ανεξάρτητο από τα προηγούμενα, επειδή όμως θα ζητηθεί να ανακυκλώσετε υλικό από εκείνα, βεβαιωθείτε
Διαβάστε περισσότεραΣχεδίαση ιστοσελίδων
Τ.Ε.Ι. Δυτικής Ελλάδας Σχολή Διοίκησης και Οικονομίας Τμήμα Διοίκησης Επιχειρήσεων - Πάτρα Σχεδίαση ιστοσελίδων Θεώνη Πιτουρά, Γιάννης Κουτσονίκος Σημειώσεις για το Εργαστήριο «Επιχειρηματικές δικτυακές
Διαβάστε περισσότεραHTML Εργαστήριο 5. Δομή εγγράφου
Ετικέτα HTML 5 HTML Εργαστήριο 5. Δομή εγγράφου 1. Αρχικά, θα πρέπει να ορίσετε ότι η σελίδα που ακολουθεί είναι τύπου html 5. Αυτό μπορεί να επιτευχθεί προσθέτοντας στην δομή που ήδη γνωρίζετε και πριν
Διαβάστε περισσότεραΣταύρος Καουκάκης Ευτύχιος Βαβουράκης
ΠΑΝΕΠΙΣΤΗΜΙΟ ΚΡΗΤΗΣ 1 ο ΣΧΟΛΕΙΟ ΚΩΔΙΚΑ «Βασικά Θέματα Προγραμματισμού στην Ανάπτυξη Δυναμικών Διαδικτυακών Εφαρμογών» (Part 1) Σταύρος Καουκάκης Ευτύχιος Βαβουράκης 1 Λίγα Λόγια για το Σχολείο Μονάδες
Διαβάστε περισσότεραΣχεδόν όλες οι ιστοσελίδες βασίζονται σε μεγάλο βαθμό σε πίνακες. Για να εισάγουμε έναν πίνακα επιλέγουμε από το μενού Insert->Table.
DreamWeaver - Άσκηση 4η Πίνακες Παρακάτω θα δούμε πως μπορούμε να δημιουργούμε και να επεξεργαζόμαστε πίνακες, μια πολύ βασική δομή. Θα δούμε πως γίνεται εισαγωγή πίνακα, ένωση κελιών του πίνακα, προσθήκη
Διαβάστε περισσότεραΠρακτικές οδηγίες για την Επεξεργασία Κειμένου
11 Εργαλεία έκφρασης και δημιουργίας Επεξεργασία Κειμένου Α Γυμνασίου Πρακτικές οδηγίες για την Επεξεργασία Κειμένου Ένα πρόγραμμα επεξεργασίας κειμένου μας προσφέρει τη δυνατότητα να: προσθέτουμε, να
Διαβάστε περισσότεραΣχεδιασμός και Ανάπτυξη Ιστοτόπων. ΕΠΑ.Λ. ΑΛΙΜΟΥ Τομέας Πληροφορικής Κ. Φλώρος
Σχεδιασμός και Ανάπτυξη Ιστοτόπων ΕΠΑ.Λ. ΑΛΙΜΟΥ Τομέας Πληροφορικής Κ. Φλώρος H γλώσσα HTML Άλλες Βιβλιογραφικές πηγές για HTML http://www.w3schools.com/html/ http://www.it.uom.gr/project/html2/lessons.html
Διαβάστε περισσότεραMicrosoft PowerPoint 2007
Information Technology Services and Solutions Σύμβουλοι Μηχανογράφησης και Εκπαίδευσης Στεφ. Σκουλούδη 27, Καλλίπολη, Πειραιάς 210 45 38 177 http://www.itss.gr/ Microsoft PowerPoint 2007 Κωνσταντίνος Κωβαίος
Διαβάστε περισσότεραΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΣΧΟΛΙΚΟ ΒΙΒΛΙΟ ΚΕΦΑΛΑΙΟ 11 Ευάγγελος Χ. Ζιούλας (Καθηγητής Πληροφορικής)
http://www.zioulas.gr ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΣΧΟΛΙΚΟ ΒΙΒΛΙΟ ΚΕΦΑΛΑΙΟ 11 Ευάγγελος Χ. Ζιούλας (Καθηγητής Πληροφορικής) WEB SERVER Είναι μια εφαρμογή software που αναλαμβάνει την αποστολή μιας ιστοσελίδας σε
Διαβάστε περισσότερα1. Κλικ στην καρτέλα Insert 2. Tables 3. Κλικ Table 4. Σύρουμε το δείκτη του ποντικιού και επιλέγουμε τον επιθυμητό αριθμό γραμμών και στηλών
ΜΑΘΗΜΑ 4 ΣΤΟΧΟΙ: 1. Προσθήκη Πίνακα (Table) 2. Εισαγωγή Και Μετακίνηση Κειμένου Σε Πίνακα 3. Εισαγωγή Στηλών Και Γραμμών Σε Πίνακα 4. Διαγραφή Στηλών Και Γραμμών Σε Πίνακα 5. Αλλαγή Πλάτους Στηλών Και
Διαβάστε περισσότεραΕργαστήριο #12. Βήμα 1 ο. Βήμα 2 ο. Βήμα 3 ο. Βήμα 4 ο.
Εργαστήριο #12 Από τα προηγούμενα εργαστήρια: Το εργαστήριο αυτό είναι ανεξάρτητο από τα προηγούμενα επειδή όμως ασχολείται με τη γλώσσα JavaScript, βεβαιωθείτε ότι έχετε διαβάσει το εισαγωγικό Παράρτημα
Διαβάστε περισσότεραΕργασία 11 η Πίνακες (βασικές ετικέτες, βασικές ιδιότητες) 1. Στο Σημειωματάριο πληκτρολογήστε τον παρακάτω κώδικα:
Εργασία 11 η Πίνακες (βασικές ετικέτες, βασικές ιδιότητες) 1. Στο Σημειωματάριο πληκτρολογήστε τον παρακάτω κώδικα: εισαγωγή εικόνων
Διαβάστε περισσότερα