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

Περίληψη Κεφαλαίου 11 Eισαγωγή στην ανάπτυξη ιστοσελίδων με HMTL – Βασικές έννοιες και ετικέτες της HTML – Εισαγωγή λίστας, πίνακα, γραφικών, υπερσυνδέσμου, φόρμας – Εισαγωγή στα Επικαλυπτόμενα Φύλλα Στυλ (CSS) 2

Γλώσσες Σήμανσης & HTML Προσδιορίζουν το τρόπο δόμησης ή εκτέλεσης μιας διαδικασίας ή εργασίας – Η HTML (HyperText Markup Language) είναι μία από τις γλώσσες σήμανσης, η οποία χρησιμοποιείται για την κατασκευή ιστοσελίδων Υπερκείμενο (HyperText): Δίνει τη δυνατότητα στο χρήστη να περιγιηθεί σε κείμενο και άλλες μορφές με μη γραμμικό τρόπο, αλλά ακολουθώντας μια σειρά από συνδέσμους (links) H HTML είναι περιγραφική γλώσσα και υποδηλώνει στον περιηγητή ιστού(browser) με ποιον τρόπο θα εμφανίσει μια ιστοσελίδα 3

Ετικέτες HTML Η HTML χρησιμοποιεί ετικέτες για να δώσει οδηγίες στον περιηγητή ιστού. Ετικέτες: – Ειδικές εντολές – Συνήθως ορίζουν την αρχή ή το τέλος μιας λειτουργίας – Βρίσκονται πάντα μεταξύ των συμβόλων. Κάθε εντολή τερματίζει όταν ο browser διαβάζει την ίδια ετικέτα με το πρόθεμα / (πχ. Εφαρμογή έντονης γραφής σε κείμενο: Text ) H HTML έχει κανονές στη συγγραφή της, οι οποίοι θα πρέπει να τηρούνται προκειμένου να η ιστοσελίδα να αναγνωρίζεται από όλους τους περιηγητές 4

Γράφοντας τον πρώτο HTML κώδικα Δομή ενός HTML κειμένου: … Δηλώνει ότι ακολουθεί κείμενο τύπου HTML Περιλαμβάνει τις ετικέτες HEAD και BODY Διακρίνει μεταξύ των διαφορετικών εκδόσεων της HTML … Περιλαμβάνει πληροφορίες που δεν εμφανίζονται ως μέρος του κειμένου, όπως τίτλος σελίδας, κωδικοποίηση κλπ. … Δηλώνει το τίτλος της σελίδας που θα εμφανιστεί στο πάνω μέρος του browser … Περιλαμβάνει το περιεχόμενο της ιστοσελίδας Αποτελείται από άλλες επιπλέον ετικέτες που περιέχουν κείμενο 5

Παράδειγμα 6 Hello World! This is my first HTML website!

H ετικέτα BODY 7  Αποτελεί μία από τις μεγάλες ενότητες που ενσωματώνονται ανάμεσα στις ετικέτες (η άλλη είναι η )  Οτιδήποτε πληροφορία βρίσκεται ανάμεσα στις ετικέτες θα εμφανιστεί στην οθόνη του επισκέπτη. Τα περιεχόμενα της ετικέτας μπορεί να είναι:  Κείμενο  Άλλες ετικέτες μαζί με ιδιότητες και γνωρίσματα ΓνωρισμαΠεριγραφη BGCOLORΥποδηλώνει το χρώμα φόντου της ιστοσελίδας ΤΕΧΤΥποδηλώνει το χρώμα όλου του κειμένου LINKΥποδηλώνει το χρώμα κάθε υπερσυνδέσμου που δεν έχουμε επισκεφτεί VLINKΥποδηλώνει το χρώμα κάθε υπερσυνδέσμου που έχουμε επισκεφτεί τουλάχιστον μια φορά ALINKΥποδηλώνει το χρώμα κάθε υπερσυνδέσμου που είναι ενεργός τη στιγμή της σύνδεσης BACKGROUNDΤοποθέτηση μια εικόνας ως φόντο της ιστοσελίδας TOPMARGINΥποδηλώνει το μέγεθος των άνω και κάτω περιθωρίων (σε pixels) LEFTMARGINΥποδηλώνει το μέγεθος των δεξιά και αριστερά περιθωρίων (σε pixels)

Παράδειγμα 8 Hello World! This is my first HTML website!

Βασικές Ετικέτες Κειμένου 9 ΕτικεταΠεριγραφη... Δηλώνει την αρχή και το τέλος μιας παραγράφου (μπορεί να έχει γνωρίσματα, όπως ALIGN δηλαδή στοίχιση) … Κείμενο με έντονη γραφή … Κείμενο σε πλάγια γραφή … Υπογραμμισμένο κείμενο Δηλώνει ένα τερματισμό γραμμής (break line) Τοποθέτηση μια οριζόντιας γραμμής (Γνωρίσματα: WIDTH, SIZE, ALIGN) Εμφανίζει το κείμενο όπως ακριβώς το έχουμε γράψει ανάμεσα στις ετικέτες … Ορισμός επικεφαλίδας σε ένα κείμενο HTML. Οι επικεφαλίδες υποδηλώνουν την ιεραρχία που υπάρχει μεταξύ των διαφορετικών «περιοχών» ενός κειμένου.

Βασικές Ετικέτες Κειμένου 10 ΕΤΙΚΕΤΑΠΕΡΙΓΡΑΦΗ … Εφαρμογή τύπου, μεγέθους και χρώματος γραμματοσειράς. ΓΝΩΡΙΣΜΑΤΑ ΠΕΡΙΓΡΑΦΗ FACEΟρίζει το τύπο της γραμματοσειράς (πχ. Arial, Tahoma κλπ) SIZEΟρίζει το μέγεθος της γραμματοσειράς από 1-7 COLORΟρίζει το χρώμα της γραμματοσειράς, με το ίδιο τρόπο που ορίζουμε χρώμα στο BGCOLOR

Παράδειγμα 11 Hello World! This is my first HTML website Hello World!!! MyNameIsChris Headline Style 1 How are you?

Στην πράξη... 12

Λίστες 13  Για τη δημιουργία μη αριθμημένων λιστών χρησιμοποιούμε την ετικέτα, η οποία προσδιορίζει την έναρξη της λίστας.  Για τη δημιουργία αριθμημένης λίστας χρησιμοποιούμε την ετικέτα.  Κάθε στοιχείο της λίστας προσδιορίζεται με την ετικέτα, η οποία δεν απαιτείται να ‘κλείσει’. ΠΑΡΑΔΕΙΓΜΑ Πρώτο στοιχείο Δεύτερο στοιχείο Πρώτο μη-αριθμημένης λίστας

Πίνακες 14  Η χρήση πινάκων στην HTML είναι διαδεδομένος τρόπος δόμησης του κειμένου. Για τη δημιουργία ενός πίνακα χρησιμοποιούμε τις εξής 4 ετικέτες. ΕΤΙΚΕΤΑΠΕΡΙΓΡΑΦΗ TABLEΗ βασική ετικέτα δημιουργίας πίνακα. Η πλειοψηφία των ιδιοτήτων του κάθε πίνακα προσδιορίζονται στη συγκεκριμένη ετικέτα. TRΠροσδιορίζει κάθε γραμμή του πίνακα TDΠροσδιορίζει τα περιεχόμενα κάθε κελιού του πίνακα THΑποτελεί ειδικό τύπο ετικέτας, ο οποίος αποδίδει στα περιεχόμενα ενός κελιού την έννοια της επικεφαλίδας, εμφανίζοντας το κείμενο με έντονο χρώμα.

Γνωρίσματα ετικέτας TABLE 15 ΓΝΩΡΙΣΜΑΠΕΡΙΓΡΑΦΗ BORDERΥποδηλώνει το μέγεθος του περιγράμματος ενός πίνακα (σε pixels) CELLPADDINGΠροσδιορίζει το κενό χώρο ανάμεσα στα περιεχόμενα των κελιών και το περίγραμμα του κάθε κελιού CELLSPACINGΠροσδιορίζει το κενό διάστημα ανάμεσα στις εσωτερικές γραμμές που διαχωρίζουν τα κελιά BGCOLORΠροσδιορίζει το χρώμα φόντου που θα έχουν τα κελιά του πίνακα ΓΝΩΡΙΣΜΑΠΕΡΙΓΡΑΦΗ ALIGNΥποδηλώνει την οριζόντια στοίχιση του κειμένου (LEFT, CENTER, RIGHT) VALIGNΥποδηλώνει την κατακόρυφη στοίχιση του κειμένου (TOP, MIDDLE, BOTTOM) ROWSPANΠροσδιορίζει τον αριθμό των σειρών που θα καταλαμβάνει το κελί COLSPANΠροσδιορίζει τον αριθμό των στηλών που θα καταλαμβάνει το κελί Γνωρίσματα ετικετών TD και TH

Παράδειγμα 16 Grammi1-2 Stili1 Grammi1 Stiles2-3 Grammi2 Stili2 Grammi2 Stili3

Εισαγωγή Εικόνων 17  Μέσω της HTML μπορούμε να εισάγουμε εικόνες στις ιστοσελίδες μας.  Η ετικετά η οποία εισάγει εικόνες είναι η IMG  Τα γνωρίσματα της IMG είναι:  SRC: η πηγή, δηλαδή η διαδρομή της εικόνας στον υπολογιστή  ALT: Σε περίπτωση που ο browser δεν μπορεί να εμφανίσει την εικόνα θα δείχνει το μήνυμα που θα έχει το γνώρισμα ALT  ALIGN: Προσδιορίζει την ευθυγράμμιση της εικόνας σε σχέση με το κείμενο γύρω της (LEFT, RIGHT, TOP, TEXTTOP, MIDDLE, ABSMIDDLE, BOTTOM, ABSBOTTOM, BASELINE  BORDER: Προσδιορίζει το μέγεθος του περιγράμματος της εικόνας  HEIGHT: Προσδιορίζει το κάθετο μήκος της εικόνας σε pixels  WIDTH: Προσδιορίζει το οριζόντιο μήκος της εικόνας σε pixels ΠΑΡΑΔΕΙΓΜΑ

Εισαγωγή Υπερσυνδέσμων 18  Το σημαντικότερο χαρακτηριστικό της HTML είναι η λογική των υπερσυνδέσμων.  Οι υπερσύνδεσμοι αποτελούνται από δύο μέρη:  Αυτό που βλέπουν οι χρήστες (κείμενο, εικόνα κλπ)  Το URL, η διεύθυνση δηλαδή στην οποία θα κατευθυνθεί ο browser.  Η ετικέτα που μας επιτρέπει να εισάγουμε υπερσυνδέσμους είναι η  Γνωρίσματα της ετικέτας :  HREF: Προσδιορίζει τη διεύθυνση της ιστοσελίδας ή αρχείου που αναφερόμαστε (πλήρης αναφορά, σχετική αναφορά)  NAME: Δημιουργία ονόματος ενός συνδέσμου εντός της ιστοσελίδας  TARGET: Προσδιορίζει το τρόπο με τον οποίο θα χειριστεί ο browser το άνοιγμα του υπερσυνδέσμου (_blank για νέο παράθυρο, _self στο ίδιο παράθυρο, _parent στο προηγούμενο ιεραρχικά frame, _top σε νέο παράθυρο με άνοιγμα ξανά του browser. ΠΑΡΑΔΕΙΓΜΑ ΔΕΙΤΕ ΤΟ SITE ΜΟΥ “

Φόρμες 19  Μια φόρμα δεδομένων μας επιτρέπει τη συλλογή πληροφοριών από το χρήστη  Τα στοιχεία μιας φόρμας μπορεί να είναι:  Πεδία κειμένου (text fields)  Πεδία κωδικών (password fields)  Πεδία περιοχής κειμένου (text area fields)  Κουμπιά επιλογής (radio buttons)  Πλαίσια ελέγχου (checkboxes)  Λίστες επιλογή (drop-down lists)  Η ετικέτα για τη δημιουργία μιας φόρμας είναι η  Βασικά γνωρίσματα ετικέτας FORM:  ACTION: Καθορίζει τη διαδικτυακή διεύθυνση αποστολής των δεδομένων  METHOD: Καθορίζει το τρόπο αποστολής των δεδομένων  POST: Αποστέλλει τα δεδομένα ως ξεχωριστές μεταβλητές  GET: Αποστέλλει τα δεδομένα ως μία ενιαία συμβολοσειρά ΠΑΡΑΔΕΙΓΜΑ “

Πεδία Φόρμας 20  Η πιο ευέλικτη ετικέτα για την εισαγωγή δεδομένων είναι η, η οποία επιτρέπει τον ορισμό διαφόρων τρόπος εισαγωγής δεδομένων.  Ο τρόπος εισαγωγής ορίζεται μέσω του γνωρίσματος TYPE  Βασικά γνωρίσματα της ετικέτας : ΓΝΩΡΙΣΜΑΠΕΡΙΓΡΑΦΗ TYPEΠροσδιορίζει το τρόπο εισαγωγής δεδομένων και δέχεται τις παρακάτω τιμές: -TEXT (πεδίο κειμένου) -PASSWORD (πεδίο κωδικού) -HIDDEN (μη ορατό πεδίο με σκοπό να αποδώσουμε τιμές σε μεταβλητές που δεν επιθυμούμε να τις αλλάξουν οι χρήστες -CHECKBOX (πολλαπλές επιλογές) -RADIO (πεδίο μοναδικής επιλογής) -SUBMIT (Κουμπί αποστολής δεδομένων) -RESET (Κουμπί καθαρισμού των δεδομένων που έχουν πληκτρολογηθεί) NAMEΠροσδιορίζει το όνομα της μεταβλητής στην οποία θα αποδωθεί τιμή SIZEΠροσδιορίζει το πλάτος του πεδίου εισαγωγής δεδομένων VALUEΠροσδιορίζει ένα προεπιλεγμένο κείμενο το οποίο θα εμφανίζεται στο πεδίο MAXLENGTHΠροσδιορίζει το μέγιστο αριθμό χαρακτήρων που μπορεί να εισάγει ο χρήστης στο πεδίο

Πεδίο Εισαγωγής Κειμένου 21  Για την εισαγωγή δεδομένων τα οποία δεν μπορούν να τοποθετηθούν μόνο σε ένα πλαίσιο κειμένου της μιας γραμμής, χρησιμοποιούμε την ετικέτα η οποία επιλύει αυτό το πρόβλημα, καθώς επιτρέπει στους χρήστες να εισάγουν πολλές γραμμές κειμένου  Η δέχεται τα εξής γνωρίσματα:  NAME: Προσδιορίζει το όνομα της μεταβλητής που θα αποθηκευτούν τα δεδομένα  COLS: Προσδιορίζει το πλάτος του πλαισίου κειμένου  ROWS: Προσδιορίζει τον αριθμό των γραμμών που θα έχει το πλαίσιο κειμένου

Δημιουργία πτυσσόμενων λιστών 22  Για τη δημιουργία πτυσσόμενων λιστών (είτε μοναδικής επιλογής είτε πολλαπλής) χρησιμοποιούμε την ετικέτα  Η ετικέτα εμπεριέχει έναν αριθμό επιλογών καθένα των οποίων αποτελεί μία από τις διαθέσιμες επιλογές  Καθε επιλογή προσδιορίζεται μέσω της ετικέτας  Η ετικέτα έχει τα εξής γνωρίσματα: ΓΝΩΡΙΣΜΑΠΕΡΙΓΡΑΦΗ NAMEΠροσδιορίζει το όνομα της μεταβλητής στην οποία θα αποδωθεί τιμή SIZEΠροσδιορίζει τον αριθμό των γραμμών από τη λίστα που θα εμφανιστούν στο browser MULTIPLEΠροσδιορίζει εάν η λίστα είναι πολλαπλών επιλογών. Αρκεί να αναφέρουμε το γνώρισμα. Δεν απαιτείται να δώσουμε κάποια τιμή

Παράδειγμα 23 Name: Password: Male Female Favorite Color: Red Green Favorite Car: Honda Audi BMW

Στην Πράξη... 24

Πλαίσια 25  Τα πλαίσια (frames) παρέχουν τη δυνατότηταν πολλαπλών «οθονών» χωρίζοντας ουσιαστικά την HTML σελίδα σε πολλά ανεξάρτητα μέρη  Η δομή της ιστοσελίδας αναφέρεται σε μια κεντρική ιστοσελίδα που «καλεί» όλες τις υπόλοιπες  Στην κεντρική σελίδα αντί για την ετικέτα χρησιμοποιούμε την ετικέτα  H προσδιορίζει όλα τα χαρακτηριστικά του ιστοτόπου που αφορούν τον αριθμό και το σχετικό μέγεθος των πλαισίων.  Γνωρίσματα της ετικέτας : ΓΝΩΡΙΣΜΑΠΕΡΙΓΡΑΦΗ ROWSΟρίζει τις γραμμές για οριζόντια δόμηση της ιστοσελίδας (% ή σε pixels) COLSΟρίζει τις στήλες για κάθετη δόμηση της ιστοσελίδας (% ή σε pixels) FRAMEBORDERΟρίζει εάν ανάμεσα στα πλαίδια θα υπάρχει περιθώριο

Πλαίσια 26  Εντός της ετικέτας χρησιμοποιούμε την ετικέτα για να ορίσουμε το πλήθος των πλαισίων.  Βασικά γνωρίσματα ετικέτας : ΓΝΩΡΙΣΜΑΠΕΡΙΓΡΑΦΗ SRCΟρίζει τη διεύθυνση του αρχείου που αναφέρεται το πλαίσιο (καλούμε ένα ξεχωριστό αρχείο HTML) NAMEΟρίζει το όνομα του πλαισίου. Κάθε πλαίσιο πρέπει να έχει μοναδικό όνομα. BORDERΟρίζει εάν το πλαίσιο θα έχει περιθώριο SCROLLINGΡυθμίζει την εμφάνιση ή όχι της γραμμής ολίσθησης μέσα στο πλαίσιο. Λαμβάνει τιμές YES | NO | AUTO

Παράδειγμα 27 index.html This is what someone would see if they have a web browser that cannot display frames menu.html Audi BMW

Επικαλυπτόμενα Φύλλα Στυλ (CSS) 28  Τα επικαλυπτόμενα Φύλλα Στυλ (Cascading Style Sheets) αποτελούν μία απο τις σημαντικότερες βελτιώσεις που εισήγαγε η HTML  Τα CSS παρέχουν ένα σύνολο κανόνων για επιλεγμένα στοιχεία-ετικέτες, ελέγχοντας το τρόπο με τον οποίο θα εμφανίζεται κάθε στοιχείο της ιστοσελίδας  Τα CSS επιτρέπουν τη συγκεντρωτική μορφοποίηση μιας ιστοσελίδας  Οι κανόνες αυτοί εισάγονται στην ετικέτα  Τα CSS δεν αποτελούνται από ετικέτες και δεν συντάσσονται μέσα σε <>  Τα CSS ενσωματώνονται μέσα σε μια ιστοσελίδα ή αποτελούν εξωτερικό αρχείο το οποίο καλείται  Υπάρχουν 3 τρόποι ενσωμάτωσης των ιδιοτήτων CSS σε μια ιστοσελίδα:  Ενσωμάτωση της ετικέτας εντός της ενότητας του εγγράφου  Δημιουργία δεσμού με κάποιο εξωτερικό αρχείο μέσω της ετικέτας  Χρησιμοποίηση του γνωρίσματος STYLE= στις ετικέτες της HTML. Αναφέρεται σε μεμονωμένη μορφοποίηση κάθε ετικέτας.

Κανόνες CSS 29  Η λογική των CSS υλοποιείται μέσω κανόνων. Κάθε κανόνας αποτελείται από δύο διακριτά στοιχεία:  Τον ΕΠΙΛΟΓΕΑ (Selector): Η λογική διασύνδεση μεταξύ της ιστοσελίδας και της μορφοποίησης που επιθυμούμε να εφαρμόσουμε  Τη ΔΗΛΩΣΗ (Declaration): Αποτελεί τον ορισμό των τιμών για κάθε ετικέτα που θέλουμε να διαμορφώσουμε με συγκεκριμένο τρόπο. Κάθε δήλωση αποτελείται από δύο μέρη: μία ιδιότητα και μία τιμή ΣΥΝΤΑΞΗ Επιλογέας {Ιδιότητα: Τιμή; Ιδιότητα: Τιμή; Ιδιότητα: Τιμή;...} ΠΑΡΑΔΕΙΓΜΑ BODY{ COLOR: RED; BACKGROUND-COLOR: YELLOW; }

Γνωρίσματα μορφοποίησης γραμματοσειράς 30 ΓΝΩΡΙΣΜΑΠΕΡΙΓΡΑΦΗ Font-familyΟ τύπος της γραμματοσειράς (Times, Helvetica, Courier New, Arial Font-sizeΤο μέγεθος της γραμματοσειράς (σε στοιχεία pt ή σε ποσοστιαία απόκλιση από το τυπικό μέγεθος) Font-styleΤο στυλ της γραμματοσειράς (bold, italic, oblique) Font-weightΤο πάχος της γραμματοσειράς (normal, bold, blolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900)

Κλάσεις CSS 31  Οι κλάσεις χρησιμοποιούνται για να διαχωρίσουν το στυλ που εφαρμόζεται σε κάθε ετικέτα. Πρακτικά, σε κάθε κανόνα αντιστοιχίζεται ένα μοναδικό όνομα, το οποίο στη συνέχεια προσαρτάται στον επιλογέα με χρήση του χαρακτήρα της τελείας. CSS p.right {text-align: right} p.center {text-align: center} HTML This paragraph will be right-aligned. This paragraph will be center-aligned. *Μπορούμε να μην αναφέρουμε καθόλου το τύπο της ετικέτας στον επιλογέα, εφόσον θέλουμε να ορίσουμε ενα στυλ το οποίο θα χρησιμοποιηθεί από όλα τα HTML στοιχεία που ανήκουν σε μια συγκεκριμένη κλάση πχ.center {text-align: center}

Ετικέτα & Μορφοποίηση σε μεμονωμένη ετικέτα 32  Η ετικέτα μας επιτρέπει να συμπεριλάβουμε αρχεία CSS σε HTML κώδικα.  Με αυτό το τρόπο μπορούμε να κάνουμε συγκεντρωτικές αλλαγές στο CSS και όχι σε ένα-ένα HTML αρχείο ξεχωριστά.  Η ετικέτα ενσωματώνεται στην ετικέτα και έχει την παρακάτω σύνταξη:  Άλλος τρόπος αλλαγής της μορφοποίησης είναι το γνώρισμα STYLE σε μεμονωμένες ετικέτες. πχ. This is a paragraph

Βασικά & χρήσιμα γνωρίσματα 33 ΓΝΩΡΙΣΜΑΠΕΡΙΓΡΑΦΗΤιμές colorΧρώμα κειμένουχρώμα directionΠροσανατολισμός κειμένουLtr, rtl line-heightΑπόσταση μεταξύ γραμμώνNormal, Αριθμός, Μήκος, % letter-spacingΑπόσταση μεταξύ χαρακτήρωνNormal, μήκος text-alignΣτοίχιση κειμένουLeft, center, right, justify text-decorationΜορφοποίηση κειμένουNone, underline, overline, line- through, blink text-shadowΕπίπεδο σκίασης κειμένουNone, χρώμα, μήκος text-transformΕπίπεδο γραμματοσειράςNone, capitalize, uppercase, lowercase word-spacingΑπόσταση μεταξύ των λεξέων σε μια παράγραφο normal, μήκος