Cascading Style Sheets Φόρμες (Forms)

Μέγεθος: px
Εμφάνιση ξεκινά από τη σελίδα:

Download "Cascading Style Sheets Φόρμες (Forms)"

Transcript

1 Cascading Style Sheets Φόρμες (Forms) Πανεπιστήμιο Πελοποννήσου Τμήμα Επιστήμης & Τεχνολογίας Τηλεπικοινωνιών Ευάγγελος Α. Κοσμάτος

2 Cascading Style Sheets Τα Cascading Style Sheets (CSS) είναι οδηγίες που περιγράφουν πώς θα εμφανίζεται μία σελίδα web στον browser Διαχωρισμός του Περιεχομένου (Content) από τον Τρόπο Παρουσίασης του (Content Presentation) <h3>cd Store</h3> Περιεχόμενο: το κείμενο «CD Store» είναι επικεφαλίδα Τρόπος Παρουσίασης: πως θα εμφανίζονται οι επικεφαλίδες h3 Οι αλλαγές στο περιεχόμενο και στην εμφάνιση γίνονται ανεξάρτητα μεταξύ τους Η HTML ασχολείται με την αλλαγή του περιεχομένου ή την αλλαγή της δομής του περιεχομένου Η CSS ασχολείται με τον τρόπο εμφάνισης του περιεχομένου Προγραμματισμός ιστοσελίδων 2

3 Cascading Style Sheets Mε τα CSS μπορεί να ελεγχθεί η εμφάνιση εκατοντάδων σελίδων από μία κεντρική πηγή π.χ. για να θέσω σε κάθε σελίδα το ίδιο χρώμα φόντου βάζω την ιδιότητα BGCOLOR σε κάθε σελίδα ή χρησιμοποιώ ένα style sheet που καθορίζει το χρώμα φόντου Πλεονέκτημα: Με το style sheet μπορώ να αλλάξω το χρώμα φόντου σε όλες τις σελίδες με μία απλή εντολή Χωρίς το style sheet θα έπρεπε να ανοίξω κάθε σελίδα και να αλλάξω την ιδιότητα BGCOLOR Προγραμματισμός ιστοσελίδων 3

4 Σύνταξη της CSS Οι εντολές CSS γράφονται σε ξεχωριστές γραμμές που καλούνται κανόνες Κάθε κανόνας έχει τρία μέρη: SELECTOR {property:value} selector: η ετικέτα που θέλουμε να ελέγξουμε property: η ιδιότητα της ετικέτα που θέλουμε να ελέγξουμε value: η τιμή της ιδιότητας (πως θα συμπεριφέρεται η ιδιότητα) O συνδυασμός property/value καλείται δήλωση. Παράδειγμα: Ένας κανόνας CSS που θέτει εξ ορισμού το χρώμα του κειμένου σε κόκκινο σε όλες τις σελίδες BODΥ {color:red} Προγραμματισμός ιστοσελίδων 4

5 Σύνταξη της CSS Σε κάθε επιλογέα (selector) μπορούμε να έχουμε πολλές δηλώσεις (συνδυασμούς property/value) Τις διαχωρίζουμε με (;) Όλες οι δηλώσεις περιστοιχίζονται με { } BODY {color:red; background-color:blue; margin-left: 30px; margin-right: 30px} Σωστός προγραμματισμός: κάθε δήλωση χρησιμοποιεί μια ξεχωριστή γραμμή Προγραμματισμός ιστοσελίδων 5

6 Ομαδοποίηση επιλογέων Μπορούμε να ομαδοποιήσουμε επιλογείς (selectors) σε έναν κανόνα Παράδειγμα: Ένας κανόνας CSS που καθορίζει τις ετικέτες H1,H2 και Η3 Καθορίζουμε διάφορα χαρακτηριστικά εκτός από το μέγεθος h1,h2,h3 {color:red; background-color:blue; text-align:center; font-style:italic} Προγραμματισμός ιστοσελίδων 6

7 Ένθετοι επιλογείς Μπορούμε να ορίσουμε επιλογείς που εφαρμόζονται μόνο μέσα σε άλλους επιλογής SELECTOR1 SELECTOR2 {property:value} Παράδειγμα: Ορισμός CSS: p b {color:red; background-color:blue} Εφαρμογή: <b>rock, pop and jazz music</b> <p><b>rock, pop and jazz music</b></p> Προγραμματισμός ιστοσελίδων 7

8 Χρήση της CSS Τρόποι χρήσης της CSS Ενσωματωμένος ορισμός του κώδικα CSS Inline Styles Εσωτερικός ορισμός του κώδικα CSS Embedded Styles Εξωτερικός ορισμός του κώδικα CSS Linked Styles Καθορίζουν το σημείο δήλωσης του κώδικα CSS Μπορούν να χρησιμοποιηθούν ένα από τα τρία ή συνδυασμούς τους «Cascading» style sheets Προγραμματισμός ιστοσελίδων 8

9 Ενσωματωμένος ορισμός του κώδικα CSS Εφαρμογή του στυλ (style sheet) απευθείας στην ετικέτα Η εφαρμογή αναφέρεται μόνο στην συγκεκριμένη ετικέτα Για την εφαρμογή του στυλ στην ίδια ή σε άλλες σελίδες απαιτείται αντιγραφή του style sheet Δεν είναι αποδοτικός τρόπος γιατί καταργεί το πλεονέκτημα του CSS για ανεξαρτητοποίηση εμφάνισης και περιεχομένου <p style="color:red;text-align:center;">the most popular albums</p> Προγραμματισμός ιστοσελίδων 9

10 Εσωτερικός ορισμός του κώδικα CSS Τα στυλ (style sheets) δηλώνονται στην ετικέτα <head> της σελίδας Για εφαρμογή σε πολλές σελίδες πρέπει να αντιγραφεί το κομμάτι δηλώσεων του στυλ στα αντίστοιχα <head> των άλλων σελίδων Στην ετικέτα <head> δηλώνεται ο τρόπος παρουσίασης του περιεχομένου που βρίσκεται μέσα στην ετικέτα <body> Για την αποφυγή της εμφάνισης του κειμένου των style sheets σε παλιούς browsers (που δεν υποστηρίζουν CSS) το κείμενο αυτό τοποθετείται υπό τη μορφή σχολίων της HTML <head> <style type="text/css"> <!-- h1,h2,h3 {color:red; background-color:blue; text-align:center; font-style:italic} --> </style> </head> <body> <h1>cd Store</h1> <h2>cd Store</h2> <h3>cd Store</h3> </body> Προγραμματισμός ιστοσελίδων 10

11 Εξωτερικός ορισμός του κώδικα CSS Τα στυλ (style sheets) αποθηκεύονται σε εξωτερικό ή εξωτερικά αρχεία με επέκταση.css Στη ετικέτα <head> δηλώνεται το όνομα του αρχείου που τα περιέχει Πλεονέκτημα: Κάθε αλλαγή στο εξωτερικό αρχείο.css εφαρμόζεται απευθείας σε όλες τις σελίδες που συνδέονται με αυτό Εύκολη διαχείριση όλων των σελίδων που ανήκουν στο ίδιο site <head> <link rel="stylesheet" type="text/css" href= "template.css" /> </head> Προγραμματισμός ιστοσελίδων 11

12 Προτεραιότητα εφαρμογής style sheets Όταν δηλώνονται πολλαπλά στυλ (cascading style sheets) σε μία σελίδα, ισχύει η παρακάτω σειρά προτεραιότητας: Ενσωματωμένο style sheet Εσωτερικό style sheet Εξωτερικό style sheet Εξ ορισμού (default) μορφοποίηση του browser Προγραμματισμός ιστοσελίδων 12

13 Αναγνωριστικά και κλάσεις στα CSS Τα CSS επιτρέπουν εκτός από τον καθορισμό στυλ για ετικέτες HTML, την δημιουργία των δικών μας επιλογέων Αναγνωριστικό (id) Κλάση (class) Προγραμματισμός ιστοσελίδων 13

14 Επιλογέας αναγνωριστικού Ο επιλογέας αναγνωριστικού (id selector) χρησιμοποιείται για να καθορίσει ένα στυλ για ένα μοναδικό, συγκεκριμένο στοιχείο της σελίδας Κάθε επιλογέας id δηλώνεται με #στοιχείο_σελίδας Εξωτερικό αρχείο CSS: #myid {color:green} Σελίδα HTML: <h3>cd Store</h3> <h3 id="myid">cd Store</h3> <p>the most popular albums</p> <p id="myid">the most popular albums</p> Προγραμματισμός ιστοσελίδων 14

15 Επιλογέας κλάσης Ο επιλογέας κλάσης (class selector) χρησιμοποιείται για τον καθορισμό ενός στυλ για μια ομάδα από στοιχεία. Σε αντίθεση με τον επιλογέα αναγνωριστικού συχνά χρησιμοποιείται για περισσότερα στοιχεία Κάθε επιλογέας κλάσης δηλώνεται με (.) Εξωτερικό αρχείο CSS: p.myclass {color:green} Σελίδα HTML: <h3>cd Store</h3> <h3 class="myclass">cd Store</h3> <p>the most popular albums</p> <p class="myclass">the most popular albums</p> Προγραμματισμός ιστοσελίδων 15

16 Σύνδεσμοι Στα CSS μπορούμε να καθορίσουμε πως θα φαίνονται οι σύνδεσμοι (links) ανάλογα με την κατάστασή τους a:link σύνδεσμος a:visited σύνδεσμος που τον έχουμε επισκεφθεί a:hover όταν το ποντίκι βρίσκεται πάνω από τον σύνδεσμο a:active όταν έχουμε κάνει κλικ πάνω στον σύνδεσμο A:link {color:red} A:active {color:blue} A:visited {color:green} A:hover {color:purple} Προγραμματισμός ιστοσελίδων 16

17 Παραδείγματα Εξωτερικό αρχείο CSS: h1,h2,h3 {color:red; background-color:blue; text-align:center; font-style:italic} h4,h5 {color:blue} Σελίδα HTML: <h1>cd Store</h1> <h2>cd Store</h2> <h4>cd Store</h4> Προγραμματισμός ιστοσελίδων 17

18 Παραδείγματα Εξωτερικό αρχείο CSS: ul li {color:blue} ul li li {color:green} ol li {color:red} ol li li {color:black} Σελίδα HTML: <ul> <li>ρέμος</li> <li>χατζηγιάννης <ul><li>cd1</li><li>cd2</li></ul> </li> </ul> <ol> <li>ρέμος</li> <li>χατζηγιάννης <ul><li>cd1</li><li>cd2</li></ul> </li> </ol> Προγραμματισμός ιστοσελίδων 18

19 Φόρμες (Forms) Οι Φόρμες χρησιμοποιούνται για τη δημιουργία (σχετικά απλών) GUIs (Graphical User Interfaces) σε διαδικτυακές σελίδες Συνήθως ο σκοπός τους είναι η συλλογή στοιχείων από το χρήστη Τα στοιχεία που συλλέγονται αποστέλλονται στον Server π.χ. εταιρίες τις χρησιμοποιούν για παραγγελίες, δημοσκοπήσεις, ταυτοποίηση χρηστών και για παροχή σχολίων από τους χρήστες Για την επεξεργασία χρειάζεται κάποια δυναμική σελίδα/στοιχείο (php, asp, jsp, cgi) Προγραμματισμός ιστοσελίδων 19

20 Φόρμες (Forms) Μια φόρμα δηλώνεται στην HMTL με μια ετικέτα <form></form> Μια φόρμα αποτελείται από χαρακτηριστικά και στοιχεία φόρμας (form elements) Δήλωση φόρμας: <form χαρακτηριστικά>...στοιχεία φόρμας... </form> Παράδειγμα <form method="post" action="process.php"> <input type="text" name="last" size="20" /> </form> Προγραμματισμός ιστοσελίδων 20

21 Φόρμες (Forms) Τα στοιχεία μιας φόρμας περιλαμβάνουν: κουμπιά (buttons), πεδία κειμένου (text fields), μενού επιλογών (checkboxes), radio buttons, drop-down menus κ.α. Μια φόρμα μπορεί να περιέχει και άλλες ετικέτες εκτός από τα στοιχεία φόρμας Κάθε φόρμα συνήθως περιέχει ένα κουμπί υποβολής στοιχείων (submit) αποστολή στον Server των πληροφοριών που έχουν συμπληρωθεί από το χρήστη Τα χαρακτηριστικά μιας φόρμας καθορίζουν με πιο τρόπο τα στοιχεία θα αποσταλούν στον Server Προγραμματισμός ιστοσελίδων 21

22 Χαρακτηριστικά ετικέτας form Χαρακτηριστικά της ετικέτας form name="όνομα_φόρμας" Το όνομα της φόρμας action="url" (απαιτείται) Καθορίζει που θα σταλούν τα συμπληρωμένα δεδομένα όταν πατηθεί το κουμπί αποστολής (submit) method="get" (default) Τα δεδομένα στέλνονται μέσω URL της μορφής όνομα_σελίδας_παραλήπτη?δεδομένα_φόρμας Χρησιμοποιείται μόνο όταν τα δεδομένα είναι μορφής ASCII και δεν ξεπερνούν τους 100 χαρακτήρες Προγραμματισμός ιστοσελίδων 22

23 Χαρακτηριστικά ετικέτας form method="post" Τα δεδομένα της φόρμας στέλνονται στο σώμα της αίτησης URL Το πλήρες URL δεν μπορεί να αποθηκευτεί από τους περισσότερους browsers target="target" Δηλώνει σε πιο παράθυρο θα εμφανιστεί η σελίδα που θα αποσταλούν τα δεδομένα target= _blank θα εμφανιστεί σε νέο παράθυρο target= _top θα εμφανιστεί στο ίδιο παράθυρο Προγραμματισμός ιστοσελίδων 23

24 Ετικέτα input Tα πιο συνήθη στοιχεία φόρμας (form elements) χρησιμοποιούν την ετικέτα <input> και το χαρακτηριστικό της type για να καθορίσουν τον τύπο του στοιχείου μπορεί να πάρει τις τιμές:,,,,,,,,, Άλλα χαρακτηριστικά της ετικέτας <input> είναι : το όνομα του στοιχείου : το αναγνωριστικό (μοναδικό) του στοιχείου : η τιμή του στοιχείου (οι τιμές που μπορεί να πάρει καθορίζονται από τον τύπο του στοιχείου) : η τιμή δεν μπορεί να μεταβληθεί : απενεργοποίηση του στοιχείου δεν μπορεί να χρησιμοποιηθεί από το χρήστη ανάλογα με τον τύπο του στοιχείου υπάρχουν και άλλα συγκεκριμένα χαρακτηριστικά Προγραμματισμός ιστοσελίδων 24

25 Πλαίσια κειμένου Απλά πλαίσια κειμένου Ετικέτα <input/> και χαρακτηριστικό type="text" Άλλα χαρακτηριστικά size value το μέγεθος του πλαισίου το κείμενο που θα εμφανίζεται μέσα στο πλαίσιο maxlength ο μέγιστος αριθμός χαρακτήρων που μπορούν να εισαχθούν στο πλαίσιο Πλαίσιο κειμένου για κωδικούς (passwords) Ετικέτα <input/> και χαρακτηριστικό type= password Ίδια χαρακτηριστικά με το απλό πλαίσιο κειμένου Στο πλαίσιο που θα εισαχθεί ο κωδικός εμφανίζονται αστερίσκοι (*) για ασφάλεια Προγραμματισμός ιστοσελίδων 25

26 Πλαίσια κειμένου Πλαίσια κειμένου πολλαπλών γραμμών Ετικέτα <textarea></textarea> Ίδια χαρακτηριστικά με το απλό πλαίσιο κειμένου και επιπλέον cols μέγεθος του πλαισίου σε στήλες rows μέγεθος του πλαισίου σε γραμμές Προγραμματισμός ιστοσελίδων 26

27 Πλαίσια κειμένου <form method="post" action="process.php" enctype="text/plain"> Username: <input type="text" name="username" size="15" maxlength="50" /> <br /><br /> Password: <input type="password" name="pass" size="20" /> <br /><br /> <textarea cols="30" rows="5">συμπληρώστε τα σχόλιά σας</textarea> <br /><br /> <input type="submit" value="αποστολή" /> <input type="reset" value="καθαρισμός" /> </form> Προγραμματισμός ιστοσελίδων 27

28 Κουμπιά (buttons) Κουμπί υποβολής στοιχείων Ετικέτα <input/> και χαρακτηριστικό type="submit Κουμπί καθαρισμού της φόρμας Ετικέτα <input/> και χαρακτηριστικό type="reset" Κοινό κουμπί Ετικέτα <input/> και χαρακτηριστικό type="button" Άλλα χαρακτηριστικά των κουμπιών name το όνομα του κουμπιού value το κείμενο που θα εμφανίζεται πάνω στο κουμπί Προγραμματισμός ιστοσελίδων 28

29 Κουμπιά (buttons) <form name="myform" method="post" action="process.php" enctype="text/plain">. <br /><br /> <input type="button" name="commonbutton" value="έλεγχος ορθότητας στοιχείων" onclick="checkvalues();" /> <br /><br /> <input type="submit" name="sendbutton" value="αποστολή" /> <input type="reset" name="resetbutton" value="καθαρισμός" /> </form> Προγραμματισμός ιστοσελίδων 29

30 Radio buttons Ετικέτα <input/> και χαρακτηριστικό type="radio Άλλα χαρακτηριστικά name το όνομα του radio button value η τιμή του radio button checked αν είναι επιλεγμένο Όταν δύο ή περισσότερα radio buttons έχουν το ίδιο όνομα name, ο χρήστης μπορεί να επιλέξει μόνο το ένα από αυτά Δημιουργία ομάδας από radio buttons Η τιμή της ομάδας είναι η τιμή του επιλεγμένου κάθε στιγμή radio button Προγραμματισμός ιστοσελίδων 30

31 Checkboxes Ετικέτα <input/> και χαρακτηριστικό type= checkbox Άλλα χαρακτηριστικά name το όνομα του radio button value η τιμή του radio button checked αν είναι επιλεγμένο Κάθε checkbox δεν ανήκει σε ομάδα όπως τα radio buttons Μπορεί να είναι επιλεγμένο ή μη επιλεγμένο Προγραμματισμός ιστοσελίδων 31

32 Radio buttons Checkboxes <form name="myform" method="post" action="process.php" enctype="text/plain"> Φύλο: <input type="radio" name="gender" value="m" checked="checked"/>άνδρας <input type="radio" name="gender" value="f"/>γυναίκα <br /><br /> <input type="checkbox" value="stu"/> Φοιτητής <br /><br /> <input type="checkbox" value="empl"/> Εργαζόμενος <br /><br /> <input type="submit" name="sendbutton" value="αποστολή" /> <input type="reset" name="resetbutton" value="καθαρισμός" /> </form> Προγραμματισμός ιστοσελίδων 32

33 Ετικέτες (Labels) Σε πολλές περιπτώσεις οι ετικέτες δεν σχετίζονται με τα στοιχεία ελέγχου Πατώντας πάνω στη λέξη «άνδρας» δεν γίνεται τίποτε Η ετικέτα <label> σχετίζει τo κείμενο με το στοιχείο ελέγχου <label><input type="radio" name="gender" value="m" /> άνδρας </label> Πατώντας πάνω στη λέξη «άνδρας» επιλέγεται το radio button Προγραμματισμός ιστοσελίδων 33

34 Μενού drop-down Ετικέτα <select></select> Κάθε στοιχείο του μενού δηλώνεται με την ετικέτα <option>τιμή_στοιχείου</option> Χαρακτηριστικά name size όνομα του μενού αριθμός ορατών στοιχείων μη χρήση: μπορεί να επιλεγεί μόνο ένα στοιχείο true: μπορούν να επιλεγούν περισσότερα από ένα στοιχεία false: η συμπεριφορά εξαρτάται από τον browser Προγραμματισμός ιστοσελίδων 34

35 Κρυφά στοιχεία Ετικέτα <input/> και χαρακτηριστικό type= hidden Άλλα χαρακτηριστικά name το όνομα του κρυφού στοιχείου value η τιμή του κρυφού στοιχείου Πλεονεκτήματα Όλα τα δεδομένα συμπεριλαμβανομένων και των κρυφών στοιχείων στέλνονται στον Server Αποτελεί ένα τρόπο να συμπεριληφθεί πληροφορία που δεν χρειάζεται (ή δεν πρέπει) να δει ο χρήστης Η τιμή του κρυφού στοιχείο μπορεί να τεθεί δυναμικά χωρίς την παρέμβαση του χρήστη (με javascript) Προγραμματισμός ιστοσελίδων 35

36 Κρυφά στοιχεία Drop-down box <form name="myform" method="post" action="process.php" enctype="text/plain"> Εκπαιδευτικό Ίδρυμα: <select name="selectuni"> <option value="teiath">τει Αθήνας</option> <option value="teipir" selected="true">τει Πειραιά</option> <option value="uop">πανεπ. Πελοποννήσου</option> </select> <br /><br /> <input type="hidden" name="pagenum" value="2"/> <input type="submit" name="sendbutton" value="αποστολή" /> <input type="reset" name="resetbutton" value="καθαρισμός" /> </form> Προγραμματισμός ιστοσελίδων 36

37 Ολοκληρωμένο παράδειγμα <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>cd Store</title> </head> <body bgcolor="#99ffcc"> <h2>αποστολή σχολίων</h2> <form name="myform" method="post" action="process.php" enctype="text/plain"> Όνομα χρήστη: <input type="text" name="username" size="20" maxlength="50" /> <br /><br /> Κωδικός χρήστη: <input type="password" name="pass" size="20" /> <br /><br /> Φύλο: <input type="radio" name="gender" value="m" checked="checked"/>άνδρας <input type="radio" name="gender" value="f"/>γυναίκα <br /><br /> <input type="checkbox" value="stu"/> Φοιτητής <br /><br /> <input type="checkbox" value="empl"/> Εργαζόμενος <br /><br /> Προγραμματισμός ιστοσελίδων 37

38 Ολοκληρωμένο παράδειγμα Εκπαιδευτικό Ίδρυμα: <select name="selectuni"> <option value="teiath">τει Αθήνας</option> <option value="teipir" selected="true">τει Πειραιά</option> <option value="uop">πανεπ. Πελοποννήσου</option> </select> <input type="hidden" name="pagenum" value="2"/> <br /><br /> <textarea name="textarea" cols="30" rows="5">συμπληρώστε τα σχόλιά σας</textarea> <br /><br /> <input type="button" name="commonbutton" value="έλεγχος ορθότητας στοιχείων" onclick="checkvalues();" /> <br /><br /> <input type="submit" name="sendbutton" value="αποστολή" /> <input type="reset" name="resetbutton" value="καθαρισμός" /> </form> </body> </html> Προγραμματισμός ιστοσελίδων 38

39 Ολοκληρωμένο παράδειγμα Προγραμματισμός ιστοσελίδων 39

Εισαγωγή στην Επιστήμη Υπολογιστών. Εισαγωγή στην HTML. Άννα Κεφάλα Παναγιώτα Μιχόλια

Εισαγωγή στην Επιστήμη Υπολογιστών. Εισαγωγή στην HTML. Άννα Κεφάλα Παναγιώτα Μιχόλια Εισαγωγή στην Επιστήμη Υπολογιστών Εισαγωγή στην HTML Άννα Κεφάλα Παναγιώτα Μιχόλια Εργαστηριακές Σημειώσεις ΕΙΣΑΓΩΓΗ ΣΤΗ ΓΛΩΣΣΑ HTML ΜΕΡΟΣ Β': CSS ΚΑΙ FORMS 2 Cascading Style Sheets (CSS) Cascading Style

Διαβάστε περισσότερα

Φόρμες. Γενικοί κανόνες. Η ετικέτα <form>

Φόρμες. Γενικοί κανόνες. Η ετικέτα <form> Φόρμες Οι φόρμες περιέχουν τα στοιχεία φόρμας στο οποία ένας χρήστης μπορεί να εισαγάγει δεδομένα τα οποία στη συνέχεια αποστέλλονται σε έναν εξυπηρετητή για παραπέρα επεξεργασία. Γενικοί κανόνες Για τις

Διαβάστε περισσότερα

Συλλογή και Επεξεργασία Δεδομένων με Φόρμες

Συλλογή και Επεξεργασία Δεδομένων με Φόρμες Συλλογή και Επεξεργασία Δεδομένων με Φόρμες Οι φόρμες αποτελούν τον πιο δημοφιλή τρόπο για τη συλλογή δεδομένων μέσω του World Wide Web (WWW). Επιτρέπουν στους χρήστες να επικοινωνούν με τη βοήθεια του

Διαβάστε περισσότερα

Άσκηση 5 -Δηµιουργία ιστοσελίδων µε HTML µέρος 5 ο

Άσκηση 5 -Δηµιουργία ιστοσελίδων µε HTML µέρος 5 ο Άσκηση 5 -Δηµιουργία ιστοσελίδων µε HTML µέρος 5 ο HTML Φόρµες Για να δηµιουργήσουµε µια φόρµα στην οποία θα γράφουν σχόλια ή παρατηρήσεις οι επισκέπτες των σελίδων µας, χρειαζόµαστε την ετικέτα .

Διαβάστε περισσότερα

Ετικέτες HTML. <!-->: Τα σχόλια χρησιμοποιούνται για να γράφουμε σημειώσεις μέσα στον

Ετικέτες HTML. <!-->: Τα σχόλια χρησιμοποιούνται για να γράφουμε σημειώσεις μέσα στον Ετικέτες HTML : Τα σχόλια χρησιμοποιούνται για να γράφουμε σημειώσεις μέσα στον πηγαίο κώδικα για να διευκολύνουμε την επεξεργασία και την συντήρηση του αρχείου. Τα σχόλια δεν εμφανίζονται στην οθόνη

Διαβάστε περισσότερα

Άσκηση 6 Επαναληπτική Άσκηση HTML

Άσκηση 6 Επαναληπτική Άσκηση HTML Άσκηση 6 Επαναληπτική Άσκηση HTML ΕΤΙΚΕΤΕΣ HTML ΕΤΙΚΕΤΑ ΠΕΡΙΓΡΑΦΗ ΙΔΙΟΤΗΤΕΣ ΙΔΙΟΤΗΤΑ ΤΙΜΗ ΠΕΡΙΓΡΑΦΗ Βασικές Ορίζει τον τύπο του αρχείου Ορίζει ένα αρχείο HTML Ορίζει ένα τίτλο

Διαβάστε περισσότερα

Προγραμματισμός Ιστοσελίδων: Javascript II

Προγραμματισμός Ιστοσελίδων: Javascript II Προγραμματισμός Ιστοσελίδων: Javascript II Πανεπιστήμιο Πελοποννήσου Τμήμα Επιστήμης & Τεχνολογίας Τηλεπικοινωνιών Ευάγγελος Α. Κοσμάτος Αντικείμενα (Objects) Αντικείμενο στη Javascript είναι οτιδήποτε

Διαβάστε περισσότερα

Προγραμματιστικές Εφαρμογές στο Διαδίκτυο Εργαστήριο 5

Προγραμματιστικές Εφαρμογές στο Διαδίκτυο Εργαστήριο 5 Προγραμματιστικές Εφαρμογές στο Διαδίκτυο Εργαστήριο 5 Τεχνολογικό Εκπαιδευτικό Ίδρυμα Κεντρικής Μακεδονίας Σχολή Τεχνολογικών Εφαρμογών Τμήμα Μηχανικών Πληροφορικής 1. Στόχος Στόχος του εργαστηρίου είναι

Διαβάστε περισσότερα

TEC510 Ανάπτυξη Δικτυακών Τόπων (Ε εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Γιώργος Μηλιώτης

TEC510 Ανάπτυξη Δικτυακών Τόπων (Ε εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Γιώργος Μηλιώτης TEC510 Ανάπτυξη Δικτυακών Τόπων (Ε εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Γιώργος Μηλιώτης Χειμερινό εξάμηνο 2011-2012 Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό

Διαβάστε περισσότερα

TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)

TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα Εαρινό εξάμηνο Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί

Διαβάστε περισσότερα

ιαχείριση Πληροφοριών στο ιαδίκτυο

ιαχείριση Πληροφοριών στο ιαδίκτυο ιαχείριση Πληροφοριών στο ιαδίκτυο Εργαστήριο (Φυλλάδιο 7) ΤΕΙ Καβάλας - Σχολή ιοίκησης & Οικονοµίας Τµήµα ιαχείρισης Πληροφοριών ιδάσκων: Μαρδύρης Βασίλειος, ιπλ. Ηλ. Μηχανικός & Μηχ. Υπολογιστών, MSc

Διαβάστε περισσότερα

Προγραμματισμός Διαδικτύου ΕΡΓΑΣΤΗΡΙΟ. Τμ. ΔΕ- Χειμ

Προγραμματισμός Διαδικτύου ΕΡΓΑΣΤΗΡΙΟ. Τμ. ΔΕ- Χειμ Προγραμματισμός Διαδικτύου ΕΡΓΑΣΤΗΡΙΟ Τμ. ΔΕ- Χειμ. 2014-15 Ετικέτες meta 2 Δε περιέχουν περιεχόμενο Έχουν 2 ιδιότητες. content: (υποχρεωτικό): Τα ίδια τα μετα-δεδομένα name: Συνήθως author, keywords και

Διαβάστε περισσότερα

Παράρτημα A: PHP, HTML φόρμες και το πρωτόκολλο HTTP.

Παράρτημα A: PHP, HTML φόρμες και το πρωτόκολλο HTTP. Εργαστήριο #5 Τι πρέπει να έχετε ολοκληρώσει από το προηγούμενο εργαστήριο. Θα πρέπει να ξέρετε να εισάγετε ένα βασικό πρόγραμμα PHP μέσα σε μια ιστοσελίδα, τη χρήση της echo και τον χειρισμό απλών μεταβλητών

Διαβάστε περισσότερα

Εισαγωγή στην HTML. Κεφ. HTML + CSS

Εισαγωγή στην HTML. Κεφ. HTML + CSS Εισαγωγή στην HTML Κεφ. HTML + CSS Συστατικά καλής Ιστοσελίδας α) HTML για το Περιεχόμενο β) CSS για τη μορφοποίηση γ) Javascript για διαδραστικότητα Παράδειγμα Ολυμπιακός Πανιώνιος ΠΑΟΚ Παναθηναϊκός Ξάνθη

Διαβάστε περισσότερα

<a href="http://www.somepage.com/somepage.html">μετάβαση στο κείμενο</a>.

<a href=http://www.somepage.com/somepage.html>μετάβαση στο κείμενο</a>. HTML Τα αρχεία της HTML έχουν ετικέτες (tags) που ορίζουν τη δομή και τη μορφοποίηση των ιστοσελίδων. Οι περισσότερες HTML ετικέτες τις συναντούμε ως ζεύγη τα οποία ενεργούν στα περιεχόμενα μεταξύ των

Διαβάστε περισσότερα

Επαναληπτική Άσκηση ΕΤΙΚΕΤΕΣ HTML

Επαναληπτική Άσκηση ΕΤΙΚΕΤΕΣ HTML Επαναληπτική Άσκηση ΕΤΙΚΕΤΕΣ HTML ΕΤΙΚΕΤΑ ΠΕΡΙΓΡΑΦΗ ΙΔΙΟΤΗΤΕΣ ΙΔΙΟΤΗΤΑ ΤΙΜΗ ΠΕΡΙΓΡΑΦΗ Βασικές Ορίζει ένα αρχείο HTML Ορίζει ένα τίτλο για το αρχείο Ορίζει το σώµα της background URL

Διαβάστε περισσότερα

Στην τεχνολογία των CSS, οι κανόνες στυλ (style

Στην τεχνολογία των CSS, οι κανόνες στυλ (style Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #4 0 : CSS: Βασικές και προχωρημένες τεχνικές επιλογής, τα στοιχεία και , ψευδο κλάσεις και ψευδο επιλογείς Γαβαλάς Δαμιανός dgavalas@aegean.gr CSS κανόνες στυλ

Διαβάστε περισσότερα

ΠΡΟΓΡΑΜΜΑΤΙΣΤΙΚΑ ΕΡΓΑΛΕΙΑ ΓΙΑ ΤΟ ΔΙΑΔΙΚΤΥΟ. Κεφάλαιο 5. Αλληλεπιδραστικές ιστοσελίδες (χρήση ετικέτας <FORM> και η τεχνική CGI)

ΠΡΟΓΡΑΜΜΑΤΙΣΤΙΚΑ ΕΡΓΑΛΕΙΑ ΓΙΑ ΤΟ ΔΙΑΔΙΚΤΥΟ. Κεφάλαιο 5. Αλληλεπιδραστικές ιστοσελίδες (χρήση ετικέτας <FORM> και η τεχνική CGI) ΠΡΟΓΡΑΜΜΑΤΙΣΤΙΚΑ ΕΡΓΑΛΕΙΑ ΓΙΑ ΤΟ ΔΙΑΔΙΚΤΥΟ Κεφάλαιο 5. Αλληλεπιδραστικές ιστοσελίδες (χρήση ετικέτας και η τεχνική CGI) Επιμέλεια: Καραγιάννης Σπύρος Καθηγητής ΠΕ19 ΦΟΡΜΕΣ (FORM) Είναι ο κύριος

Διαβάστε περισσότερα

Εργαστήριο 8. Προγραμματιστικές Εφαρμογές στο Διαδίκτυο

Εργαστήριο 8. Προγραμματιστικές Εφαρμογές στο Διαδίκτυο Εργαστήριο 8 Προγραμματιστικές Εφαρμογές στο Διαδίκτυο Στόχος Στόχος του εργαστηρίου είναι η εκμάθηση των βασικών προγραμματιστικών δομών της γλώσσας PHP και η δημιουργία φορμών για την επεξεργασία υποβαλλόμενων

Διαβάστε περισσότερα

ΕΠΛ 012. ιαδοχικά Φύλλα Στυλ

ΕΠΛ 012. ιαδοχικά Φύλλα Στυλ ΕΠΛ 012 ιαδοχικά Φύλλα Στυλ Cascading Style Sheets (CSS) Φύλλα Στυλ Μηχανισµός καθορισµού και τροποποίησης µορφοποίησης εγγράφων από τους συγγράφεις Πιο γενικός τρόπος από το καθορισµό όλων των χαρακτηριστικών

Διαβάστε περισσότερα

2. ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ

2. ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ 2014 2. ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ H HTML είναι μία γλώσσα σήμανσης και αποτελεί την κύρια γλώσσα δημιουργίας ιστοσελίδων του διαδικτύου. Είναι το ακρωνύμιο των λέξεων HyperText

Διαβάστε περισσότερα

CSS Εργαστήριο 1. Εισαγωγή - Σύνταξη - Εφαρμογή στην HTML

CSS Εργαστήριο 1. Εισαγωγή - Σύνταξη - Εφαρμογή στην HTML CSS Εργαστήριο 1. Εισαγωγή - Σύνταξη - Εφαρμογή στην HTML Εισαγωγή Το CSS (Cascading Style Sheets ή Επικαλυπτόμενα Φύλλα Στυλ) μας επιτρέπει να αλλάξουμε τον τρόπο με τον οποίο παρουσιάζονται τα στοιχεία

Διαβάστε περισσότερα

Προγραμματισμός Παγκόσμιου Ιστού

Προγραμματισμός Παγκόσμιου Ιστού Πανεπιστήμιο Πειραιώς Τμήμα Ψηφιακών Συστημάτων Προγραμματισμός Παγκόσμιου Ιστού 2 η Διάλεξη Δημοσθένης Κυριαζής Δευτέρα 6 Μαρτίου 2017 Σημερινή διάλεξη Σύνοψη προηγούμενης διάλεξης HTML / HTML5 Λίστες,

Διαβάστε περισσότερα

Προγραμματισμός Διαδικτύου

Προγραμματισμός Διαδικτύου Πανεπιστήμιο Δυτικής Μακεδονίας Τμήμα Μηχανικών Πληροφορικής & Τηλεπικοινωνιών Προγραμματισμός Διαδικτύου Δρ. Μηνάς Δασυγένης mdasygenis@uowm.gr Τμήμα της παρουσίασης δημιουργήθηκε από τον κ. Παναγιώτη

Διαβάστε περισσότερα

CSS. Εισαγωγή & Βασικές έννοιες. Cascading Style Sheets. Επικαλυπτόμενα φύλλα στυλ

CSS. Εισαγωγή & Βασικές έννοιες. Cascading Style Sheets. Επικαλυπτόμενα φύλλα στυλ CSS Εισαγωγή & Βασικές έννοιες Cascading Style Sheets Επικαλυπτόμενα φύλλα στυλ Περιεχόμενα Τι είναι CSS Πλεονεκτήματα CSS μορφοποίησης Συντακτικό του CSS Ιδιότητες CSS Εφαρμογή CSS κανόνων Επικάλυψη CSS

Διαβάστε περισσότερα

3. ΕΙΣΑΓΩΓΗ ΣΤΟ CSS ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ

3. ΕΙΣΑΓΩΓΗ ΣΤΟ CSS ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ 2014 3. ΕΙΣΑΓΩΓΗ ΣΤΟ CSS ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ Εισαγωγή Το CSS (Cascading Style Sheets) είναι αρχεία με κατάληξη.css τα οποία καθορίζουν την μορφοποίηση των ιστοσελίδων. Μέσω αυτών επιτυγχάνεται

Διαβάστε περισσότερα

Εργαστήριο 9. Προγραμματιστικές Εφαρμογές στο Διαδίκτυο. Στόχος. Προετοιμασία περιβάλλοντος εργασίας

Εργαστήριο 9. Προγραμματιστικές Εφαρμογές στο Διαδίκτυο. Στόχος. Προετοιμασία περιβάλλοντος εργασίας Εργαστήριο 9 Προγραμματιστικές Εφαρμογές στο Διαδίκτυο Στόχος Στόχος του εργαστηρίου είναι η εκμάθηση των βασικών εργασιών στην MySQL και η εξοικείωση με το περιβάλλον του εργαλείου διαχείρισης phpmyadmin.

Διαβάστε περισσότερα

Γαβαλάς Δαμιανός dgavalas@aegean.gr. Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #3 0 : Εισαγωγή στacascading Style Sheets (CSS)

Γαβαλάς Δαμιανός dgavalas@aegean.gr. Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #3 0 : Εισαγωγή στacascading Style Sheets (CSS) Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #3 0 : Εισαγωγή στacascading Style Sheets (CSS) Γαβαλάς Δαμιανός dgavalas@aegean.gr Επικαλυπτόμενα Φύλλα Στυλ (Cascading Style Sheets, CSS) Η (X)HTML προσδιορίζει τη βασική

Διαβάστε περισσότερα

Σπουδές CAD, Πληροφορικής, Οικονομίας, Διοίκησης και D.T.P. με Σύστημα διδασκαλίας facetoface

Σπουδές 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 Τι είναι τα CSS; Τα CSS (Διαδοχικά Φύλλα Στυλ) αποτελούν ένα πολύ καλό εργαλείο

Διαβάστε περισσότερα

Τεχνολογίες Διαδικτύου. Server Side Scripting I PHP

Τεχνολογίες Διαδικτύου. Server Side Scripting I PHP Τεχνολογίες Διαδικτύου Server Side Scripting I PHP Εισαγωγή PHP PHP:Hypertext Preprocessor Mηχανή που συνοδεύει web servers όπως ο IIS και ο Apache Η PHP είναι γλώσσα προγραμματισμού για web εφαρμογές

Διαβάστε περισσότερα

Σε αυτό το µάθηµα θα ασχοληθούµε µε τη βελτίωση της εµφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισµό όλων των αλλαγών στην εµφάνιση της σελίδας

Σε αυτό το µάθηµα θα ασχοληθούµε µε τη βελτίωση της εµφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισµό όλων των αλλαγών στην εµφάνιση της σελίδας Σε αυτό το µάθηµα θα ασχοληθούµε µε τη βελτίωση της εµφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισµό όλων των αλλαγών στην εµφάνιση της σελίδας µέσω της τεχνολογίας των ιαδοχικών Φύλλων Στυλ (cascading

Διαβάστε περισσότερα

Διάλεξη 3η HTML intermediate

Διάλεξη 3η HTML intermediate Διάλεξη 3η HTML intermediate Στέλιος Μόσχογλου Θεοδόσης Σουργκούνης Αντώνης Χρυσόπουλος I S S E L D e. c o. d e (Intelligent Systems & Software Engineering Lab) Στόχος της ώρας Επέκταση γνώσεων στην html

Διαβάστε περισσότερα

HTML... 1. Εισαγωγή στην HTML και τα CSS

HTML... 1. Εισαγωγή στην HTML και τα CSS HTML...... 1 Εισαγωγή στην HTML και τα CSS HTML...... 2 HTML. H HTML (HYPERTEXT MARKUP LANGUAGE), είναι µία γλώσσα η οποία «λέει» στον υπολογιστή πως θα πρέπει να εµφανίσει µία ιστοσελίδα. Τα αρχεία στα

Διαβάστε περισσότερα

Εισαγωγή στον Παγκόσμιο ιστό και στη γλώσσα Html. Χρ. Ηλιούδης

Εισαγωγή στον Παγκόσμιο ιστό και στη γλώσσα Html. Χρ. Ηλιούδης Εισαγωγή στον Παγκόσμιο ιστό και στη γλώσσα Html Χρ. Ηλιούδης Παγκόσμιος Ιστός (WWW) Ο Παγκόσμιος Ιστός (World Wide Web WWW), ή απλώς Ιστός, βασίζεται στην ιδέα των κατανεμημένων πληροφοριών. Αντί όλες

Διαβάστε περισσότερα

2. Επιλέξτε την σωστή ετικέτα HTML που προσφέρει το μεγαλύτερο φόντο κειμένου. <head> <heading> <h6> <h1>

2. Επιλέξτε την σωστή ετικέτα HTML που προσφέρει το μεγαλύτερο φόντο κειμένου. <head> <heading> <h6> <h1> ΤΜΗΜΑ ΗΛΕΚΤΡΟΝΙΚΗΣ Τομέας Υπολογιστικών Συστημάτων και Ελέγχου Τεχνολογίες Πολυμέσων - Εφαρμογές Δρ. Β. ΒΑΛΑΜΟΝΤΕΣ Ε-mail: vala@teiath.gr Να απαντήσετε στις παρακάτω ερωτήσεις. 1. Τι σημαίνουν τα αρχικά

Διαβάστε περισσότερα

Εισαγωγή στην γλώσσα υπερκειμένου HTML

Εισαγωγή στην γλώσσα υπερκειμένου HTML Εισαγωγή στην γλώσσα υπερκειμένου HTML 1 Βασικές έννοιες 2 3 Yπερκείμενο - Υπερσύνδεσμος - HTML Το δομικό χαρακτηριστικό του WWW είναι το υπερκείμενο (hypertext), δηλαδή ένα αρχείο που εκτός από απλό κείμενο

Διαβάστε περισσότερα

Οδηγίες Στο σημερινό εργαστήριο θα αρχίσετε να χρησιμοποιείτε βασικές οδηγίες μορφοποίησης της ιστοσελίδας σας (κάτι που έχουμε αποφύγει έως τώρα!).

Οδηγίες Στο σημερινό εργαστήριο θα αρχίσετε να χρησιμοποιείτε βασικές οδηγίες μορφοποίησης της ιστοσελίδας σας (κάτι που έχουμε αποφύγει έως τώρα!). Εργαστήριο #8 Τι πρέπει να έχετε ολοκληρώσει από το προηγούμενο εργαστήριο. Το σημερινό εργαστήριο είναι ανεξάρτητο από τα προηγούμενα, επειδή όμως θα ζητηθεί να ανακυκλώσετε υλικό από εκείνα, βεβαιωθείτε

Διαβάστε περισσότερα

11. Η γλώσσα HTML Πίνακες, Λίστες, Φόρμες

11. Η γλώσσα HTML Πίνακες, Λίστες, Φόρμες 11. Η γλώσσα HTML Πίνακες, Λίστες, Φόρμες Σκοπός του Εργαστηρίου: Σκοπός της παρούσας εργαστηριακής άσκησης είναι η εμβάθυνση σε συχνά χρησιμοποιούμενες ετικέτες HTML, όπως οι πίνακες και οι λίστες, καθώς

Διαβάστε περισσότερα

Γλώσσα περιγραφής οδηγιών εµφάνισης-στοιχειοθέτησης

Γλώσσα περιγραφής οδηγιών εµφάνισης-στοιχειοθέτησης CASCADING STYLE-SHEETS CASCADING STYLE-SHEETS Γλώσσα περιγραφής οδηγιών εµφάνισης-στοιχειοθέτησης εφαρµογών HTML. Τα CSS ορίζονται σε δύο συστάσεις του W3C: CSS1, εκ. 1996 περιλαµβάνει περίπου 50 ιδιότητες

Διαβάστε περισσότερα

Ποιες είναι οι κύριες ετικέτες που χρησιμοποιεί η HTML για την περιγραφή της συνολικής δομής μιας ιστοσελίδας;

Ποιες είναι οι κύριες ετικέτες που χρησιμοποιεί η HTML για την περιγραφή της συνολικής δομής μιας ιστοσελίδας; Τι είναι η HTML; Η HTML είναι το ακρωνύμιο των λέξεων HyperText Markup Language, δηλαδή Γλώσσα Χαρακτηρισμού Υπερ Κειμένου και βασίζεται στη γλώσσα SGML, Standard Generalized Markup Language, που είναι

Διαβάστε περισσότερα

Σχεδιασμός και Ανάπτυξη Ιστότοπων

Σχεδιασμός και Ανάπτυξη Ιστότοπων Βελώνης Γεώργιος Καθηγητής Σχεδιασμός και Ανάπτυξη Ιστότοπων Εισαγωγή στα CSS (Cascading Style Sheets) Παρουσίαση 13 η 1 Βελώνης Γεώργιος Καθηγητής Περιεχόμενα Εισαγωγή Πλεονεκτήματα χρήσης των CSS Βασικοί

Διαβάστε περισσότερα

Δημοσίευση στο Διαδίκτυο

Δημοσίευση στο Διαδίκτυο ΕΣΔ200 Δημιουργία Περιεχομένου ΙI Δημοσίευση στο Διαδίκτυο Περιεχόμενα - Βιβλιογραφία Ενότητας Περιεχόμενα Εισαγωγή Δημοσίευση μιας ταινίας στο παγκόσμιο ιστό Βασικά στοιχεία HTML Τεχνικές δημιουργίας

Διαβάστε περισσότερα

Ref.: SLWS 1 5Copyright 2005 The European Computer Driving Licence Foundation Ltd Σελίδα 1 από 7

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 απαιτεί από τον Υποψήφιο να κατανοεί τις κύριες έννοιες της σχεδίασης και δημοσίευσης δικτυακών

Διαβάστε περισσότερα

ΠΛΗΡΟΦΟΡΙΑΚΑ & ΤΗΛΕΠΙΚΟΙΝΩΝΙΑΚΑ ΣΥΣΤΗΜΑΤΑ

ΠΛΗΡΟΦΟΡΙΑΚΑ & ΤΗΛΕΠΙΚΟΙΝΩΝΙΑΚΑ ΣΥΣΤΗΜΑΤΑ Οικονοµικό Πανεπιστήµιο Αθηνών Τµήµα ιοικητικής Επιστήµης & Τεχνολογίας ΠΛΗΡΟΦΟΡΙΑΚΑ & ΤΗΛΕΠΙΚΟΙΝΩΝΙΑΚΑ ΣΥΣΤΗΜΑΤΑ Κεφάλαιο 11 Eισαγωγή στην ανάπτυξη ιστοσελίδων µε HMTL Γιώργος Γιαγλής Περίληψη Κεφαλαίου

Διαβάστε περισσότερα

Εργαλεία Ανάπτυξης Εφαρμογών Internet. Δ.Ι.Ε.Κ. Γλυφάδας Τεχνικός Εφαρμογών Πληροφορικής

Εργαλεία Ανάπτυξης Εφαρμογών Internet. Δ.Ι.Ε.Κ. Γλυφάδας Τεχνικός Εφαρμογών Πληροφορικής Εργαλεία Ανάπτυξης Εφαρμογών Internet Δ.Ι.Ε.Κ. Γλυφάδας Τεχνικός Εφαρμογών Πληροφορικής Το πρότυπο CSS Α Μέρος 2 CSS (Cascading Style Sheets)(1) Ορίζουν την εμφάνιση των στοιχείων σε ένα έγγραφο HTML.

Διαβάστε περισσότερα

Επιβλέπων Καθηγητής : Τσιαντής Λεωνίδας Φοιτητής : Μακρής Γεώργιος

Επιβλέπων Καθηγητής : Τσιαντής Λεωνίδας Φοιτητής : Μακρής Γεώργιος Επιβλέπων Καθηγητής : Τσιαντής Λεωνίδας Φοιτητής : Μακρής Γεώργιος Δημιουργία Web Site Λογισμικό Ανάπτυξης Dreamweaver MX (Oρισμός του Site(Τα αρχεία του Site να είναι τοποθετημένα σε μια θέση την οποία

Διαβάστε περισσότερα

Βασικά στοιχεία του CSS

Βασικά στοιχεία του CSS Βασικά στοιχεία του CSS Περιεχόμενα Τι είναι CSS Πλεονεκτήματα CSS μορφοποίησης Συντακτικό του CSS Ιδιότητες CSS Εφαρμογή CSS κανόνων Επικάλυψη CSS κανόνων 2 Μορφοποίηση με HTML Η HTML είναι σχεδιασμένη

Διαβάστε περισσότερα

Α ΛΥΚΕΙΟΥ - ΕΦΑΡΜΟΓΕΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΜΑΪΟΣ 2019 ΕΝΔΕΙΚΤΙΚΕΣ ΕΡΩΤΗΣΕΙΣ ΚΑΤΑΝΟΗΣΗΣ

Α ΛΥΚΕΙΟΥ - ΕΦΑΡΜΟΓΕΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΜΑΪΟΣ 2019 ΕΝΔΕΙΚΤΙΚΕΣ ΕΡΩΤΗΣΕΙΣ ΚΑΤΑΝΟΗΣΗΣ Το υλικό αυτό δίνεται στους μαθητές για τη σωστή μελέτη της διδαχθείσας ύλης του μέρους Β. Πρόκειται για ένα συμπαγή κορμό ερωτήσεων και ασκήσεων οι οποίες καλύφθηκαν κατά τη διάρκεια της έως τώρα σχολικής

Διαβάστε περισσότερα

Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου. Μάθημα 6 ο Τεχνολογίες Διαδικτύου: HTML II

Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου. Μάθημα 6 ο Τεχνολογίες Διαδικτύου: HTML II Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου Μάθημα 6 ο Τεχνολογίες Διαδικτύου: HTML II Εισαγωγή Εικόνων Οι φυλλομετρητές μπορούν να εμφανίσουν ένθετες

Διαβάστε περισσότερα

1. <body> 2. <header> 3. <h1> My Page </h1> 4. </header> 5. <section>

1. <body> 2. <header> 3. <h1> My Page </h1> 4. </header> 5. <section> Ενδεικτικές ερωτήσεις 1. Τι σημαίνουν τα αρχικά CSS 2. Τι σημαίνουν τα αρχικά HTML 3. Ποια η διαφορά μεταξύ Internet και Web; a. Είναι το ίδιο b. Το Web είναι μια υπηρεσία του διαδικτύου 4. Ποια η διαφορά

Διαβάστε περισσότερα

Η γλώσσα CSS χρησιμοποιείται για τη μορφοποίηση ιστοσελίδων και η σύνταξη της είναι αρκετά απλή.

Η γλώσσα CSS χρησιμοποιείται για τη μορφοποίηση ιστοσελίδων και η σύνταξη της είναι αρκετά απλή. Εισαγωγή στο CSS Η γλώσσα CSS χρησιμοποιείται για τη μορφοποίηση ιστοσελίδων και η σύνταξη της είναι αρκετά απλή. Πλεονεκτήματα CSS έναντι χρήσης μόνο HTML Μεγαλύτερη ευελιξία μορφοποιήσεων. Το CSS κατέστησε

Διαβάστε περισσότερα

Τα προγράμματα σε ASP που χρησιμοποιήθηκαν για την υλοποίηση της διαχείρισης των μαθημάτων.

Τα προγράμματα σε ASP που χρησιμοποιήθηκαν για την υλοποίηση της διαχείρισης των μαθημάτων. ΠΑΡΑΡΤΗΜΑ Α Τα προγράμματα σε ASP που χρησιμοποιήθηκαν για την υλοποίηση της διαχείρισης των μαθημάτων. Αρχική σελίδα (home.asp)

Διαβάστε περισσότερα

Προγραμματισμός Παγκόσμιου Ιστού

Προγραμματισμός Παγκόσμιου Ιστού Πανεπιστήμιο Πειραιώς Τμήμα Ψηφιακών Συστημάτων Προγραμματισμός Παγκόσμιου Ιστού 1 η Διάλεξη Δημοσθένης Κυριαζής Δευτέρα 20 Φεβρουαρίου 2017 Σημερινή διάλεξη Εισαγωγή Στοιχεία μαθήματος Τυπικά θέματα Διαδικτυακή

Διαβάστε περισσότερα

Java & Java EE 1o Μέρος: Servlets και Java Server Pages. Κακαρόντζας Γεώργιος

Java & Java EE 1o Μέρος: Servlets και Java Server Pages. Κακαρόντζας Γεώργιος Java & Java EE 1o Μέρος: Servlets και Java Server Pages Κακαρόντζας Γεώργιος Διάκριση μεταξύ Web και πλήρους προφίλ Στη Java EE υπάρχει η διάκριση μεταξύ web προφίλ και πλήρους προφίλ. Το Web προφίλ περιλαμβάνει

Διαβάστε περισσότερα

Περιγράφει τα δεδοµένα της ιστοσελίδας και τη δοµή τους στο ίδιο αρχείο

Περιγράφει τα δεδοµένα της ιστοσελίδας και τη δοµή τους στο ίδιο αρχείο Γλώσσα για τη δηµιουργία ιστοσελίδων Μεταφορά µέσω του πρωτοκόλλου HTTP (HyperText Transfer Protocol) Ο πελάτης (client) στέλνει αίτηµα για ιστοσελίδα Ο server στέλνει τη σελίδα Περιγράφει τα δεδοµένα

Διαβάστε περισσότερα

Νέες Τεχνολογίες στην Εκπαίδευση

Νέες Τεχνολογίες στην Εκπαίδευση Σχολή Εφαρμοσμένων Μαθηματικών και Φυσικών Επιστημών Εθνικό Μετσόβιο Πολυτεχνείο Νέες Τεχνολογίες στην Εκπαίδευση Επάλληλα φύλλα στυλ (CSS): Μια εισαγωγή Στεφανέας Πέτρος Ζαμαρίας Βασίλης Άδεια Χρήσης

Διαβάστε περισσότερα

Εξεταστέα Ύλη (Syllabus) Έκδοση 1.5

Εξεταστέα Ύλη (Syllabus) Έκδοση 1.5 Εξεταστέα Ύλη (Syllabus) Έκδοση 1.5 Πνευματικά Δικαιώματα 2005 Ίδρυμα ECDL (ECDL Foundation www.ecdl.com) Όλα τα δικαιώματα είναι κατοχυρωμένα. Κανένα μέρος αυτού του εγγράφου δεν μπορεί να αναπαραχθεί

Διαβάστε περισσότερα

Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου. Μάθημα 5 ο Τεχνολογίες Διαδικτύου: HTML I

Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου. Μάθημα 5 ο Τεχνολογίες Διαδικτύου: HTML I Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου Μάθημα 5 ο Τεχνολογίες Διαδικτύου: HTML I Διαδικτυακή Εφαρμογή (1/2) Ως διαδικτυακή εφαρμογή μπορούμε

Διαβάστε περισσότερα

Προγραμματισμός Παγκόσμιου Ιστού

Προγραμματισμός Παγκόσμιου Ιστού Πανεπιστήμιο Πειραιώς Τμήμα Ψηφιακών Συστημάτων Προγραμματισμός Παγκόσμιου Ιστού 2 η Διάλεξη Δημοσθένης Κυριαζής Δευτέρα 21 Μαρτίου 2016 Αρχιτεκτονική 2 επιπέδων Φυσική αρχιτεκτονική Τεχνική αρχιτεκτονική

Διαβάστε περισσότερα

Θέματα Προγραμματισμού Διαδικτύου ~ CSS ~

Θέματα Προγραμματισμού Διαδικτύου ~ CSS ~ Θέματα Προγραμματισμού Διαδικτύου ~ CSS ~ Στελιος Σφακιανάκης Εαρινό 2019 Αυτή η εργασία χορηγείται με άδεια Creative Commons Αναφορά Δημιουργού - Μη Εμπορική Χρήση - Παρόμοια Διανομή 1 Εισαγωγή στο CSS

Διαβάστε περισσότερα

Europe Code Week 7-22 Οκτωβρίου Μία γιορτή δημιουργίας με κώδικα

Europe Code Week 7-22 Οκτωβρίου Μία γιορτή δημιουργίας με κώδικα Europe Code Week 7-22 Οκτωβρίου 2017 7-22 October 2017 Μία γιορτή δημιουργίας με κώδικα @CodeWeekEU #codeeu codeeu Εισαγωγή στο Web Development CSS Λίγα λόγια... Η γλώσσα CSS χρησιμοποιείται για τη μορφοποίηση

Διαβάστε περισσότερα

Η γλώσσα HTML. Επιμέλεια: Δέγγλερη Σοφία

Η γλώσσα HTML. Επιμέλεια: Δέγγλερη Σοφία Η γλώσσα HTML Επιμέλεια: Δέγγλερη Σοφία Υπερκείμενο Το δομικό χαρακτηριστικό του Παγκόσμιου Ιστού Ένα αρχείο Απλό κείμενο και υπερσύνδεσμοι Υπερσύνδεσμος Μετάβαση σε διάφορα άλλα έγγραφα Αποτελείται από

Διαβάστε περισσότερα

Σε αυτό το μάθημα θα ασχοληθούμε με τη βελτίωση της εμφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισμό όλων των αλλαγών τις οποίες επιθυμούμε να

Σε αυτό το μάθημα θα ασχοληθούμε με τη βελτίωση της εμφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισμό όλων των αλλαγών τις οποίες επιθυμούμε να Σε αυτό το μάθημα θα ασχοληθούμε με τη βελτίωση της εμφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισμό όλων των αλλαγών τις οποίες επιθυμούμε να κάνουμε μέσω ενός εξωτερικού αρχείου.το αρχείο αυτό

Διαβάστε περισσότερα

Εισαγωγή στην HTML Τα tags της HTML και τα γνωρίσματά τους

Εισαγωγή στην HTML Τα tags της HTML και τα γνωρίσματά τους Εισαγωγή στην HTML Τα tags της HTML και τα γνωρίσματά τους Με την γλώσσα περιγραφής υπερ-κειμένου (HTML) μπορούμε να σχεδιάζουμε ιστοσελίδες. Η HyperText Markup Language βασίζεται στην SGML (Standard Generalized

Διαβάστε περισσότερα

Εισαγωγή στην HTML (1)

Εισαγωγή στην HTML (1) Εισαγωγή στην HTML (1) Πανεπιστήμιο Πελοποννήσου Τμήμα Επιστήμης & Τεχνολογίας Τηλεπικοινωνιών Ευάγγελος Α. Κοσμάτος HTML HyperText Mark-up Language Καθορίζει τον τρόπο που ο browser εμφανίζει τα διάφορα

Διαβάστε περισσότερα

Κεφάλαιο 11: Εισαγωγή στην HTML. Εφαρμογές Πληροφορικής Κεφ. 11 Καραμαούνας Πολύκαρπος

Κεφάλαιο 11: Εισαγωγή στην HTML. Εφαρμογές Πληροφορικής Κεφ. 11 Καραμαούνας Πολύκαρπος Κεφάλαιο 11: Εισαγωγή στην HTML 1 11.1 Γενική εισαγωγή στην HTML Τι είναι η HTML HyperText Markup Language - Γλώσσα Χαρακτηρισμού Υπερ-Κειμένου είναι η βασική γλώσσα με την οποία πραγματοποιείται η δόμηση

Διαβάστε περισσότερα

DREAMWEAVER MX. 7. Με ποιον τρόπο μορφοποιούμε κάποιους χαρακτήρες της σελίδας μας; Στο παράθυρο Properties υπάρχει η πιο κάτω γραμμή εργαλείων:

DREAMWEAVER MX. 7. Με ποιον τρόπο μορφοποιούμε κάποιους χαρακτήρες της σελίδας μας; Στο παράθυρο Properties υπάρχει η πιο κάτω γραμμή εργαλείων: 1 Πώς δημιουργούμε ένα νέο Site; Πατάμε Site/ Manage Sites και μετά στο παράθυρο που εμφανίζεται πατάμε το κουμπάκι New και επιλέγουμε Site Στη συνέχεια θα πρέπει να δώσουμε: Α το όνομα που θέλουμε να

Διαβάστε περισσότερα

Σταύρος Καουκάκης Ευτύχιος Βαβουράκης

Σταύρος Καουκάκης Ευτύχιος Βαβουράκης ΠΑΝΕΠΙΣΤΗΜΙΟ ΚΡΗΤΗΣ 1 ο ΣΧΟΛΕΙΟ ΚΩΔΙΚΑ «Βασικά Θέματα Προγραμματισμού στην Ανάπτυξη Δυναμικών Διαδικτυακών Εφαρμογών» (Part 1) Σταύρος Καουκάκης Ευτύχιος Βαβουράκης 1 Λίγα Λόγια για το Σχολείο Μονάδες

Διαβάστε περισσότερα

Εργαστήριο #12. Βήμα 1 ο. Βήμα 2 ο. Βήμα 3 ο. Βήμα 4 ο.

Εργαστήριο #12. Βήμα 1 ο. Βήμα 2 ο. Βήμα 3 ο. Βήμα 4 ο. Εργαστήριο #12 Από τα προηγούμενα εργαστήρια: Το εργαστήριο αυτό είναι ανεξάρτητο από τα προηγούμενα επειδή όμως ασχολείται με τη γλώσσα JavaScript, βεβαιωθείτε ότι έχετε διαβάσει το εισαγωγικό Παράρτημα

Διαβάστε περισσότερα

TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)

TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα Εαρινό εξάμηνο Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί

Διαβάστε περισσότερα

Εισαγωγή στην ASP.NET. Σημειώσεις Σεμιναρίου Επιμέλεια: Βασίλης Κόλιας 4.0

Εισαγωγή στην ASP.NET. Σημειώσεις Σεμιναρίου Επιμέλεια: Βασίλης Κόλιας 4.0 Εισαγωγή στην ASP.NET Σημειώσεις Σεμιναρίου Επιμέλεια: Βασίλης Κόλιας 4.0 2 Π ί ν α κ α ς Π ε ρ ι ε χ ο μ έ ν ω ν Πίνακας Περιεχομένων... 1 1. Εισαγωγή... 10 1.1. Τι είναι το Web... 10 1.2. Λίγη ιστορία...

Διαβάστε περισσότερα

TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)

TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα Εαρινό εξάμηνο Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί

Διαβάστε περισσότερα

Πνευματικά Δικαιώματα 2013 Ίδρυμα ECDL (ECDL Foundation - www.ecdl.org)

Πνευματικά Δικαιώματα 2013 Ίδρυμα ECDL (ECDL Foundation - www.ecdl.org) PEOPLECERT Hellas A.E - Φορέας Πιστοποίησης Ανθρώπινου Δυναμικού Κοραή 3, 105 64 Αθήνα, Τηλ.: 210 372 9100, Fax: 210 372 9101, e-mail: info@peoplecert.org, www.peoplecert.org Πνευματικά Δικαιώματα 2013

Διαβάστε περισσότερα

ΠΡΟΣΟΧΗ: Οι απαντήσεις πολλαπλής επιλογής µόνο πάνω στο ΦΥΛΛΟ ΑΠΑΝΤΗΣΕΩΝ

ΠΡΟΣΟΧΗ: Οι απαντήσεις πολλαπλής επιλογής µόνο πάνω στο ΦΥΛΛΟ ΑΠΑΝΤΗΣΕΩΝ ΤΕΙ Σερρών Σχολή Τεχνολογικών Εφαρμογών, Τμήμα Πληροφορικής και Επικοινωνιών Προγραμματιστικές Εφαρμογές στο Διαδίκτυο (Θ) Τελική Εξέταση Διδάσκων: Δ. Κοτζίνος Όνοµα: Α.Μ. : Εξάµηνο : Αίθουσα Έδωσα Project

Διαβάστε περισσότερα

Βαρβάκειο Πρότυπο Γυμνάσιο Εργαστήρι Πληροφορικής Σχολ. Έτος Φύλλο Εργασίας 5

Βαρβάκειο Πρότυπο Γυμνάσιο Εργαστήρι Πληροφορικής Σχολ. Έτος Φύλλο Εργασίας 5 Φύλλο Εργασίας 5 HTML: Χρήση των Cascading Style Sheets (CSS) για τον έλεγχο της εμφάνισης των στοιχείων της html Με τη χρήση CSS πετυχαίνουμε να ελέγξουμε περισσότερο αποτελεσματικά και κυρίως ταχύτερα

Διαβάστε περισσότερα

1. Απαιτήσεις εργασίας

1. Απαιτήσεις εργασίας ΠΑΝΕΠΙΣΤΗΜΙΟ ΑΙΓΑΙΟΥ Τμήμα Πολιτισμικής Τεχνολογίας & Επικοινωνίας 2 η Εργασία στο μάθημα «Δικτυακά Πολυμέσα Ι»: «Δημιουργία φόρμας για καταχώρηση στοιχείων με HTML - Javascript» Ημερομηνία παράδοσης:

Διαβάστε περισσότερα

CSS. Cascading Style Sheets. Γλώσσες και Τεχνολογίες Ιστού Τμήμα Πληροφορικής - ΑΤΕΙ Θεσσαλονίκης

CSS. Cascading Style Sheets. Γλώσσες και Τεχνολογίες Ιστού Τμήμα Πληροφορικής - ΑΤΕΙ Θεσσαλονίκης CSS Cascading Style Sheets CSS Τα Cascading Style Sheets ορίζουν τις ιδιότητες παρουσίασης των στοιχεία της HTML. Αρχικά η HTML δεν περιελάμβανε στοιχεία για την εμφάνιση / παρουσίαση της πληροφορίας αλλά

Διαβάστε περισσότερα

HTML 2. Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Π. Αγγελάτος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών

HTML 2. Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Π. Αγγελάτος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών HTML 2 Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Π. Αγγελάτος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών Άδεια Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες χρήσης

Διαβάστε περισσότερα

Σχεδίαση ιστοσελίδων με τη γλώσσα HTML

Σχεδίαση ιστοσελίδων με τη γλώσσα HTML Τ.Ε.Ι. Δυτικής Ελλάδας Σχολή Διοίκησης και Οικονομίας Τμήμα Διοίκησης Επιχειρήσεων - Πάτρα Σχεδίαση ιστοσελίδων με τη γλώσσα HTML Γιάννης Κουτσονίκος Σημειώσεις για το Εργαστήριο «Επιχειρηματικές δικτυακές

Διαβάστε περισσότερα

Εμφάνιση και κρύψιμο στοιχείων

Εμφάνιση και κρύψιμο στοιχείων Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #8 0 : Δυναμικά εφέ με χρήση CSS Γαβαλάς Δαμιανός dgavalas@aegean.gr Εμφάνιση και κρύψιμο στοιχείων Χρήση της ιδιότητας display με επιτρεπτές τιμές: none: κρύψιμο του στοιχείου

Διαβάστε περισσότερα

Macromedia DreamWeaver 8.0.2. Παρουσίαση εργαλείου σχεδίασης διεπαφής χρήστη

Macromedia DreamWeaver 8.0.2. Παρουσίαση εργαλείου σχεδίασης διεπαφής χρήστη Macromedia DreamWeaver 8.0.2 Παρουσίαση εργαλείου σχεδίασης διεπαφής χρήστη ο Μέρος 1 : Βασικές Έννοιες Εισαγωγή στην επιφάνεια εργασίας Insert Bar Property Bar Panels 10' Building a Web Page Παράδειγμα

Διαβάστε περισσότερα

1. Απαιτήσεις εργασίας

1. Απαιτήσεις εργασίας ctxxxxx.html 1 η ΕΡΓΑΣΙΑ: ΑΝΑΠΤΥΞΗ ΔΙΑΔΙΚΤΥΑΚΟΥ ΤΟΠΟΥ (WEB SITE) Ημερομηνία Παράδοσης: Τρίτη 1 Δεκέμβρη 2009 (Η εργασία είναι ατομική!!) 1. Απαιτήσεις εργασίας Θα πρέπει να δημιουργήσετε το web site μιας

Διαβάστε περισσότερα

Τι είναι η HTML; Τί είναι οι ετικέτες (tags); Πώς είναι μια ετικέτα (tag);

Τι είναι η HTML; Τί είναι οι ετικέτες (tags); Πώς είναι μια ετικέτα (tag); Τι είναι η HTML; Η HTML είναι το ακρώνυμο από το Hyper Text Markup Language που σημαίνει γλώσσα χαρακτηρισμού υπερκειμένου. Η χρήση μιας γλώσσας χαρακτηρισμού σημαίνει ότι γράφεται πρώτα το κείμενο και

Διαβάστε περισσότερα

Γλώσσες Σήµανσης (Markup Languages) Τεχνολογία ιαδικτύου και Ηλεκτρονικό Εµπόριο

Γλώσσες Σήµανσης (Markup Languages) Τεχνολογία ιαδικτύου και Ηλεκτρονικό Εµπόριο Γλώσσες Σήµανσης (Markup Languages) Τεχνολογία ιαδικτύου και Ηλεκτρονικό Εµπόριο 1 Γλώσσες Σήµανσης Γλώσσες σήµανσης: Αρχικά για τον καθορισµό εµφάνισης σελίδων, γραµµατοσειρών. Στη συνέχεια επεκτάθηκαν

Διαβάστε περισσότερα

Εισαγωγή σε HTML και CSS. Παναγιώτης Τσαρχόπουλος

Εισαγωγή σε HTML και CSS. Παναγιώτης Τσαρχόπουλος Εισαγωγή σε HTML και CSS Παναγιώτης Τσαρχόπουλος Περιεχόμενα Εισαγωγικές έννοιες Ορολογία και σύνταξη Κείμενο σε HTML έγγραφα Σύνδεσμοι Ψηφιακές - Ευφυείς Πόλεις - Εισαγωγή σε HTML και CSS 2 Εισαγωγικές

Διαβάστε περισσότερα

Η Βίβλος των CSS. Εισαγωγή στα CSS

Η Βίβλος των CSS. Εισαγωγή στα CSS Η Βίβλος των CSS Εισαγωγή στα CSS Τα Διαδοχικά Φύλλα Στυλ (CSS, Cascading Style Sheets) αποτελούν ένα πολύ καλό εργαλείο για να μπορούμε να αλλάζουμε την εμφάνιση και τη διάταξη (layout) των ιστοσελίδων

Διαβάστε περισσότερα

Cascading Style Sheets

Cascading Style Sheets Cascading Style Sheets CSS είναι το ακρωνύµιο του Cascading Style Sheets (Επικαλυπτόµενα φύλλα στυλ). CSS είναι µια γλώσσα style δηλ. µια γλώσσα η οποία καθορίζει τη εµφάνιση HTML εγγράφων. Για παράδειγµα,

Διαβάστε περισσότερα

Τεχνολογίες Διαδικτύου - Εργαστήριο 1 ο

Τεχνολογίες Διαδικτύου - Εργαστήριο 1 ο Τεχνολογίες Διαδικτύου - Εργαστήριο 1 ο 1. Δημιουργία μιας απλής σελίδας HTML Στον προσωπικό σας κατάλογο δημιουργήστε ένα φάκελο με όνομα HTML. Ανοίξτε το Notepad ακολουθώντας τη διαδρομή (Start All Programs

Διαβάστε περισσότερα

Εφαρμοσμένη Πληροφορική ΙΙ (Ε) To Ολοκληρωμένο Περιβάλλον Ανάπτυξης (Integrated Development Environment-IDE) Netbeans 8

Εφαρμοσμένη Πληροφορική ΙΙ (Ε) To Ολοκληρωμένο Περιβάλλον Ανάπτυξης (Integrated Development Environment-IDE) Netbeans 8 Εφαρμοσμένη Πληροφορική ΙΙ (Ε) To Ολοκληρωμένο Περιβάλλον Ανάπτυξης (Integrated Development Environment-IDE) Netbeans 8 Περιεχόμενα Κατέβασμα και εγκατάσταση Netbeans 8 Δημιουργία project εφαρμογής HTML(5)/CSS/Javascript

Διαβάστε περισσότερα

Διάλεξη 2η Εισαγωγή στο CSS

Διάλεξη 2η Εισαγωγή στο CSS Διάλεξη 2η Εισαγωγή στο CSS Στέλιος Μόσχογλου Θεοδόσης Σουργκούνης Αντώνης Χρυσόπουλος I S S E L D e c o d e (Intelligent Systems & Software Engineering Lab) Στόχος της ώρας Τι είναι το CSS? Γιατί να χρησιμοποιήσω

Διαβάστε περισσότερα

Εργαστήριο 6. Προγραμματιστικές Εφαρμογές στο Διαδίκτυο. Στόχος. Προετοιμασία περιβάλλοντος εργασίας. a) Εκκίνηση XAMPP

Εργαστήριο 6. Προγραμματιστικές Εφαρμογές στο Διαδίκτυο. Στόχος. Προετοιμασία περιβάλλοντος εργασίας. a) Εκκίνηση XAMPP Εργαστήριο 6 Προγραμματιστικές Εφαρμογές στο Διαδίκτυο Στόχος Στόχος του εργαστηρίου είναι η εισαγωγή στην γλώσσα PHP και η εξοικείωση των φοιτητών στην χρήση του Web Server για την εξυπηρέτηση σελίδων

Διαβάστε περισσότερα

ΕΛΛΗΝΙΚΗ ΔΗΜΟΚΡΑΤΙΑ Ανώτατο Εκπαιδευτικό Ίδρυμα Πειραιά Τεχνολογικού Τομέα. Προγραμματισμός Η/Υ

ΕΛΛΗΝΙΚΗ ΔΗΜΟΚΡΑΤΙΑ Ανώτατο Εκπαιδευτικό Ίδρυμα Πειραιά Τεχνολογικού Τομέα. Προγραμματισμός Η/Υ ΕΛΛΗΝΙΚΗ ΔΗΜΟΚΡΑΤΙΑ Ανώτατο Εκπαιδευτικό Ίδρυμα Πειραιά Τεχνολογικού Τομέα Προγραμματισμός Η/Υ Ενότητα 9 η : Αντικείμενα για επιλογή τιμής (CheckBox, RadioButton) & το αντικείμενο ομαδοποίησης GroupBox

Διαβάστε περισσότερα

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

Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας Πανεπιστήμιο Αιγαίου Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας Δικτυακά Πολυμέσα Ι (Β Έτος, 3ο εξ) Διάλεξη #5η: HTML: πίνακες (tables), πλαίσια (frames) Γαβαλάς Δαμιανός

Διαβάστε περισσότερα

ΤΕΙ ΚΑΒΑΛΑΣ. Πτυχιακή εργασία ΕΙΣΑΓΩΓΗ. Μιλτιάδης Κακλαμάνης

ΤΕΙ ΚΑΒΑΛΑΣ. Πτυχιακή εργασία ΕΙΣΑΓΩΓΗ. Μιλτιάδης Κακλαμάνης Σελίδα 1από ΤΕΙ ΚΑΒΑΛΑΣ Πτυχιακή εργασία Δικτυακή Εφαρμογή διαχείρισης ηλεκτρονικών εγγράφων υπηρεσίας. ΕΙΣΑΓΩΓΗ Μιλτιάδης Κακλαμάνης Σελίδα 2από Κατάλογος περιεχομένων ΕΙΣΑΓΩΓΗ...1 Σχετιζόμενα πρόσωπα...3

Διαβάστε περισσότερα

Δυναμικές Ιστοσελίδες Εισαγωγή στην Javascript για προγραμματισμό στην πλευρά του client

Δυναμικές Ιστοσελίδες Εισαγωγή στην Javascript για προγραμματισμό στην πλευρά του client ΕΣΔ 516 Τεχνολογίες Διαδικτύου Δυναμικές Ιστοσελίδες Εισαγωγή στην Javascript για προγραμματισμό στην πλευρά του client Περιεχόμενα Περιεχόμενα Javascript και HTML Βασική σύνταξη Μεταβλητές Τελεστές Συναρτήσεις

Διαβάστε περισσότερα

Java & Java EE 3o Μέρος: Διασφάλιση ασφάλειας σε εφαρμογές Java Enterprise Edition. Κακαρόντζας Γεώργιος

Java & Java EE 3o Μέρος: Διασφάλιση ασφάλειας σε εφαρμογές Java Enterprise Edition. Κακαρόντζας Γεώργιος Java & Java EE 3o Μέρος: Διασφάλιση ασφάλειας σε εφαρμογές Java Enterprise Edition Κακαρόντζας Γεώργιος Μεθοδολογία Θα υλοποιήσουμε την λεγόμενη πιστοποίηση μέσω φόρμας στοιχείων εισόδου (form-based authentication)

Διαβάστε περισσότερα

XAMPP Apache MySQL PHP javascript xampp

XAMPP Apache MySQL PHP javascript xampp XAMPP Το xampp είναι ένα δωρεάν πρόγραμμα με το οποίο μπορούμε να κάνουμε εγκατάσταση τον Apache, τη MySQL και την PHP. Apache. Ο Apache είναι ένας Web Server. Είναι δηλαδή πρόγραμμα το οποίο τρέχει μόνιμα

Διαβάστε περισσότερα

ΔΕ10: Πληροφοριακά Συστήματα Διοίκησης IΙ Εργαστήριο # 2

ΔΕ10: Πληροφοριακά Συστήματα Διοίκησης IΙ Εργαστήριο # 2 ΔΕ10: Πληροφοριακά Συστήματα Διοίκησης IΙ Εργαστήριο # 2 Dreamweaver 1/7 Εισαγωγή Το Dreamweaver είναι ένας HTML editor που αναπτύχθηκε από την Macromedia. Είναι WYSIWYG (What You See Is What You Get),

Διαβάστε περισσότερα