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

Transcript

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

2 Ετικέτες meta 2 Δε περιέχουν περιεχόμενο Έχουν 2 ιδιότητες. content: (υποχρεωτικό): Τα ίδια τα μετα-δεδομένα name: Συνήθως author, keywords και description.

3 Ετικέτες meta 3 <meta name= author content= Yannis /> Σημειώνουμε έτσι τον συγγραφέα της σελίδας

4 Ετικέτες meta 4 <meta name="description" content="facebook is a social utility that connects people with friends and others who work, [...] and learn more about the people they meet." /> Σημειώνουμε έτσι την περιγραφή της σελίδας Εμφανίζεται στα αποτελέσματα των αναζητήσεων

5 Ετικέτες meta 5 <meta name= keywords content= blog, technology, programming /> Λέξεις κλειδιά που αφορούν τη σελίδα Κάποτε χρησιμοποιούνταν εκτενώς Χρησιμοποιείται ελάχιστα ή καθόλου από της μηχανές αναζήτησης

6 Εργασία 4 6 Ορίστε την ετικέτα meta στη σελίδα σας για author. Η HTML χρησιμοποιείται για το περιεχόμενο ενώ η CSS για τη μορφοποίηση

7 Εργασία 4 7 Μορφοποιήστε το περιεχόμενο ώστε η λέξεις HTML και CSS να φαίνονται όπως παρακάτω Η γραμματοσειρά είναι Verdana και το μέγεθος 16pt Χρησιμοποιήστε class. Η HTML χρησιμοποιείται για το περιεχόμενο ενώ η CSS για τη μορφοποίηση

8 Εργασία 5 8 Χρησιμοποιώντας τα αρχεία 5.htm και style5.css Μορφοποιήστε το περιεχόμενο ώστε η λέξεις HTML και CSS να φαίνονται όπως παρακάτω Η γραμματοσειρά είναι Verdana και το μέγεθος 20pt Χρησιμοποιήστε id. Η HTML χρησιμοποιείται για το περιεχόμενο ενώ η CSS για τη μορφοποίηση

9 Εργασία 6 9 Χρησιμοποιώντας τα αρχεία 6.htm και style6.css Μορφοποιήστε το περιεχόμενο ώστε μόνο η 2 η παράγραφος να είναι στοιχισμένη στη μέση (text-align:center) Χρησιμοποιήστε συνδυασμό επιλογέα HTML και Class. Test Text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam interdum nibh a ipsum congue vitae ornare Praesent sem elit, pretium vitae pellentesque ac, venenatis

10 Εργασία 6 10 Ορίστε επικεφαλίδα (h1) που ανήκει στην ίδια κλάση με τη δεύτερη παράγραφο. Τι παρατηρείτε;. Test Text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam interdum nibh a ipsum congue vitae ornare Praesent sem elit, pretium vitae pellentesque ac, venenatis

11 Φόρμες 11 Τμήμα που ο χρήστης συμπληρώνει πληροφορίες Άχρηστες χωρίς server-side (PHP, ASP, JSP ) Κάποιο πρόγραμμα πρέπει να πάρει τα δεδομένα <form>: Μία φόρμα. action: Πού θα σταλούν τα δεδομένα (υποχρεωτικό) method: Με ποια μέθοδο θα σταλούν (υποχρεωτικό) Παίρνει την τιμή post ή get.

12 Φόρμες 12 <form action= processingscript.php method= post > </form>

13 Φόρμες: Input 13 <input>: Πεδίο όπου εισάγονται δεδομένα type: Τύπος πεδίου (υποχρεωτικό) value: Προεπιλεγμένη τιμή του πεδίου checked: Ορίζεται checked όταν το πεδίο είναι επιλεγμένο αν έχει νόημα στο αντίστοιχο type. Πρέπει να περιέχεται μέσα σε <form> Δεν έχει περιεχόμενο.

14 Τύποι <input> 14 Τύπος text : Απλό πλαίσιο κειμένου <input type= text value= lala /> Τύπος password : Πλαίσιο κωδικού <input type= password value= lala />

15 Τύποι <input> 15 text: Απλό πλαίσιο κειμένου password: Πλαίσιο κωδικού ********* checkbox: Κουτάκι για «tick»: Ναι ή Όχι radio: Πολλαπλής επιλογής file: Ανέβασμα αρχείου submit: Κουμπί που στέλνει δεδομένα φόρμας image: κουμπί submit σε μορφή εικόνας button: Απλό κουμπί. reset: Κουμπί που διαγράφει τα περιεχόμενα της φόρμας. hidden: Κρυφό πεδίο.

16 Φόρμες 16 <textarea>: Ένα μεγάλο πλαίσιο κειμένου. rows: Πλήθος γραμμών του πλαισίου (υποχρεωτικό) cols: Πλήθος στηλών του πλαισίου (υποχρεωτικό) Το περιεχόμενο είναι απλό κείμενο: Η προεπιλεγμένη τιμή του πλαισίου.

17 17 <textarea rows= 8 cols= 60 > Είμαι ένα textarea! Κοιτάξτε με! </textarea>

18 Φόρμες 18 <select>: Πτυσσόμενο πλαίσιο επιλογής <option>: Μία επιλογή πλαισίου επιλογής selected: Ορίζεται στην τιμή selected για την προεπιλεγμένη επιλογή. <option>: περιέχεται μόνο στο <select> <select>: περιέχει μόνο <option>

19 19 <select> <option selected= selected >Linear Algebra</option> <option>calculus</option> <option>logic</option> </select>

20 Φόρμες 20 name: Ονομάζει ένα <input>, <textarea>, ή <select>. Η τιμή του name χρησιμοποιείται από το πρόγραμμα επεξεργασίας των δεδομένων που τρέχει στον server. Δεδομένα σε πεδία χωρίς name δεν στέλνονται! <input type= text value= Γιάννης name= firstname />

21 Εργασία 7 21 Χρησιμοποιώντας τα αρχεία 7.htm δημιουργήστε τη παρακάτω φόρμα name= myform method= get action= show.php