ΠΡΟΓΡΑΜΜΑΤΙΣΤΙΚΑ ΕΡΓΑΛΕΙΑ ΓΙΑ ΤΟ ΔΙΑΔΙΚΤΥΟ

ΠΡΟΓΡΑΜΜΑΤΙΣΤΙΚΑ ΕΡΓΑΛΕΙΑ ΓΙΑ ΤΟ ΔΙΑΔΙΚΤΥΟ Κεφάλαιο 4. Η γλώσσα HTML Επιμέλεια: Καραγιάννης Σπύρος Καθηγητής ΠΕ19 Βασικοί κανόνες σύνταξης HTML ομή σελίδας HTML Μορφοποίηση κειμένου Κατάλογοι Εισαγωγή γραφικών και εικόνων Ενσωμάτωση ψηφιακού ήχου Σύνδεσμοι (Links) Πίνακες (Tables) Πλαίσια (Frames) 2 1

Βασικοί κανόνες σύνταξης HTML (1/2) Κάθε λέξη ή φράση που βρίσκεται μέσα σε <> αποτελεί μία ετικέτα (tag) με τις παραμέτρους της. Ο κώδικας μιας ιστοσελίδας (webpage) έχει μορφή κειμένου και αποτελείται από ένα σύνολο ετικετών (tags) και το κείμενο που η σελίδα περιλαμβάνει. Κάθε τι που βρίσκεται μεταξύ των χαρακτήρων <! και >, αποτελεί σχόλιο και δεν εμφανίζεται από το φυλλομετρητή (web browser). ιακρίνουμε δύο ειδών ετικέτες: τις απλές ετικέτες της μορφής <ετικέτα> (π.χ. η ετικέτα , η οποία δηλώνει αλλαγή γραμμής στο κείμενο) τις διπλές ετικέτες της μορφής <ετικέτα> </ετικέτα> (π.χ. <TITLE> Ο τίτλος της σελίδας μου </TITLE>) Ο κώδικας κάθε σελίδας HTML αρχίζει με την ετικέτα <HTML> και τελειώνει με </HTML> Ο ρόλος της διπλής αυτής ετικέτας είναι να αναγνωρίσει ο φυλλομετρητής ότι το κείμενο που περιέχει είναι κώδικας HTML, ώστε να το ερμηνεύσει ανάλογα. 3 Βασικοί κανόνες σύνταξης HTML (2/2) Ορισμένες ετικέτες μπορεί να ακολουθούνται από παραμέτρους οι οποίες διευκρινίζουν τη λειτουργία της ετικέτας (π.χ. η ετικέτα <BODY> μπορεί να εμφανιστεί και με παραμέτρους: <BODY BGColor=#cccccc>). Οι ετικέτες μπορεί να γράφονται και με πεζά και με κεφαλαία γράμματα της λατινικής αλφαβήτου. Είναι καλό όμως να υπάρχει μία ομοιομορφία στον τρόπο γραφής, ώστε ο κώδικας να είναι ευανάγνωστος. Κενές γραμμές, καθώς και περισσότερα του ενός κενά μεταξύ των λέξεων, στο κείμενο που περιλαμβάνει μια ιστοσελίδα δε λαμβάνονται υπόψη. Για κενές γραμμές μπορούμε να χρησιμοποιήσουμε την απλή ετικέτα , η οποία χρησιμοποιείται για την αλλαγή γραμμής ή την επίσης απλή ετικέτα , η οποία χρησιμοποιείται για αλλαγή παραγράφου. Για να αφήσουμε περισσότερα του ενός κενού μεταξύ δύο λέξεων χρησιμοποιούμε την ειδική σειρά χαρακτήρων &nbsp. 4 2

Δομή σελίδας HTML (1/2) ΟκώδικαςHTML αποτελείται από δύο (2) βασικά τμήματα: την επικεφαλίδα (head), η οποία ορίζεται μέσα στη διπλή ετικέτα <HEAD> </HEAD> και το κυρίως σώμα (body), το οποίο ορίζεται μέσα στη διπλή ετικέτα <BODY> </BODY>. Η επικεφαλίδα συνήθως περιγράφει το περιεχόμενο της σελίδας. Ο τίτλος της σελίδας ο οποίος εμφανίζεται στο πάνω μέρος του φυλλομετρητή περιέχεται στην επικεφαλίδα και ορίζεται μέσα στη διπλή ετικέτα <TITLE> </TITLE 5 Δομή σελίδας HTML (2/2) HTML Κώδικας <HTML> <HEAD> <TITLE> Η πρώτη μου σελίδα </TITLE> </HEAD> Επικεφαλίδα <BODY> Η πρώτη μου σελίδα στο ιαδίκτυο </BODY> </HTML> Κυρίως Σώμα 6 3

Μορφοποίηση Κειμένου (1/4) Ετικέτα <Hi> </Hi> Έντονη γραφή (bold) Πλάγια γραφή (italic) Υπογράμμιση (underline) Λειτουργία Χρησιμοποιείται κυρίως για επικεφαλίδες ενός κειμένου Καθορίζει το μέγεθος της γραμματοσειράς του κειμένου που περιλαμβάνει Το i είναι μια παράμετρος η οποία παίρνει τιμές από 1 έως 6 (από το μεγαλύτερο 1 στο μικρότερο 6 ) Αφήνει μια κενή γραμμή πριν και μετά το κείμενο που επηρεάζει, οπότε δε χρειάζεται να χρησιμοποιηθούν οι ετικέτες αλλαγής γραμμής ή παραγράφου. Μορφοποίηση Κειμένου (2/4) Ετικέτα <BIG> </BIG> Λειτουργία Κείμενο με μικρού μεγέθους χαρακτήρες Κείμενο με μεγάλου μεγέθους χαρακτήρες Έντονη γραφή (ίδιο αποτέλεσμα με την ετικέτα ) Κείμενο με μικρού μεγέθους χαρακτήρες κάτω από την κανονική γραμμή του κειμένου. Χρησιμοποιείται για τη γραφή δεικτών. Κείμενο με μικρού μεγέθους χαρακτήρες πάνω από την κανονική γραμμή του κειμένου. Χρησιμοποιείται για τη γραφή εκθετών. 4

Μορφοποίηση Κειμένου (3/4) Ετικέτα <TT> </TT> <PRE> </PRE> <CENTER> </CENTER> <HR> Εμφανίζει το κείμενο ακριβώς όπως είναι γραμμένο στο συντάκτη HTML. Αφήνει αυτόματα κενή γραμμή πριν και μετά το κείμενο. Το κείμενο εμφανίζεται με γραμματοσειρά Courier Κεντρική στοίχιση του κειμένου Αλλαγή γραμμής Λειτουργία Κείμενο με γραμμένο με γραμματοσειρά γραφομηχανής Αλλαγή παραγράφου Τοποθετεί μια οριζόντια γραμμή, αλλάζοντας αυτόματα γραμμή. Μορφοποίηση Κειμένου (4/4) Χρώμα υποβάθρου (background color) και κειμένου (text color) <BODY BGColor= χρώμα υποβάθρου Text= χρώμα κειμένου > Οι προκαθορισμένες επιλογές (default values) είναι λευκό υπόβαθρο και μαύρο κείμενο. Οι τιμές χρώματος μπορεί να είναι: είτε ονόματα χρωμάτων στην αγγλική γλώσσα (π.χ. red, blue, yellow κλπ.), είτε 16-δικοί αριθμοί της μορφής #RRGGBB, όπου RR η 16-δική τιμή του κόκκινου (Red), GG η 16-δική τιμή του πράσινου (Green) και ΒΒ η 16-δική τιμή του μπλε (Blue) (π.χ. #ff0000 το κόκκινο, #00ff00 το πράσινο, #ffffff το άσπρο κλπ.) Γραμματοσειρά κειμένου 10 5

Κατάλογοι (1/3) Αριθμητικοί κατάλογοι <OL Type=τιμή Start=τιμή> <LI> Στοιχείο καταλόγου <LI> Στοιχείο καταλόγου <LI> Στοιχείο καταλόγου </OL> Type 1 Α a i Λίστα Αριθμοί Τιμές από Α έως Z Τιμές από a έως z Λατινικοί αριθμοί Η παράμετρος type δηλώνει το είδος της αριθμητικής λίστας και η παράμετρος start την τιμή έναρξης αρίθμησης. Σε περίπτωση που δεν ορισθεί κάποια παράμετρος, τότε οι προκαθορισμένες τιμές είναι type=1 και start=1. 11 Κατάλογοι (2/3) Μη αριθμητικοί κατάλογοι <UL Type=τιμή> <LI Type=τιμή > Στοιχείο καταλόγου <LI Type=τιμή > Στοιχείο καταλόγου <LI Type=τιμή > Στοιχείο καταλόγου </UL> Type Οι κατάλογοι αυτοί χρησιμοποιούνται για την παρουσίαση των στοιχείων τους, χωρίς αυτά να είναι ταξινομημένα σε κάποια ιδιαίτερη σειρά. Η παράμετρος type δηλώνει το είδος του συμβόλου που θα τοποθετηθεί μπροστά από τα στοιχεία της λίστας. Σε περίπτωση που δεν ορισθεί κάποια παράμετρος, τότε η προκαθορισμένη τιμή είναι type=disk. Disk Circle Square Λίστα Μαύρος ίσκος (bullet) Κύκλος Τετράγωνο 12 6

Κατάλογοι (3/3) Κατάλογοι ορισμών ή ερμηνευτικοί κατάλογοι <DL> <DT> Όρος που θα επεξηγηθεί <DD> Επεξήγηση όρου <DT> Όρος που θα επεξηγηθεί <DD> Επεξήγηση όρου <DT> Όρος που θα επεξηγηθεί <DD> Επεξήγηση όρου </DL> Οι κατάλογοι αυτοί χρησιμοποιούνται για την παρουσίαση σε ιστοσελίδες ορισμώνκαιτωνεπεξηγήσεώντους. 13 Εισαγωγή γραφικών και εικόνων <IMG SRC= μονοπάτι/αρχείο_εικόνας Alt= επεξηγηματικό κείμενο Align=τιμή> Παράμετρος Alt Align Λίστα Επεξηγεί το είδος της ψηφιακής εικόνας, ώστε σε περίπτωση προβλήματος ή απενεργοποίησης εικόνων από το χρήστη, να παρουσιαστεί το επεξηγηματικό κείμενο. Τοποθετεί την εικόνα σε σχέση με το κείμενο. Οι τιμές που παίρνει είναι: Left, Right, Top, Middle, Bottom Οι περισσότεροι φυλλομετρητές υποστηρίζουν τις κωδικοποιήσεις gif και jpg, και γι αυτό το λόγο όλα τα ψηφιακά γραφικά και εικόνες που θέλουμε να παρουσιαστούν σε μία ιστοσελίδα, θα πρέπει να είναι αποθηκευμένα με αυτές τις κωδικοποιήσεις. Οι παράμετροι alt και align μπορεί να παραληφθούν. 14 7

Ενσωμάτωση ψηφιακού ήχου <EMBED SRC= μονοπάτι/αρχείο_ήχου autostart= τιμή volume= τιμή loop= τιμή hidden= τιμή > Παράμετρος Τιμή Λειτουργία Autostart Volume Loop Hidden true/false 1 έως 100 true/false true/false Καθορίζει αν ο ήχος θα ξεκινά αυτόματα με την παρουσίαση της ιστοσελίδας ή όχι. Καθορίζει την ένταση του ήχου. Καθορίζει αν ο ήχος επαναλαμβάνεται μόλις τελειώσει ή όχι. Καθορίζει αν το πλαίσιο ελέγχου του ήχου (κουμπιά παύσης, έναρξης και τέλους) θα είναι ορατό ή όχι. Τα αρχεία ήχου που μπορούν να αναπαραχθούν με αυτόν τον τρόπο μπορεί να είναι μόνο τύπου MIDI. H ετικέτα αυτή τοποθετείται μέσα στο κυρίως σώμα του HTML κώδικα και κάτω από την ετικέτα αρχής <BODY>. 15 Σύνδεσμοι (Links) Υπερσύνδεσμος μπορεί να είναι μία λέξη, μία φράση ή ακόμα και μια εικόνα ή γραφικό μίας ιστοσελίδας. Κάποιες από τις σημαντικότερες λειτουργίες που επιτυγχάνουμε με τη χρήσηυπερσυνδέσμωνείναιοιεξής: Μεταφορά σε άλλη ιστοσελίδα (μέσα στο ίδιο site ή σεάλλοsite). <A HREF= αρχείο ιστοσελίδας ή διεύθυνση > Υπερσύνδεσμος </Α> Παρουσίαση πολυμεσικών στοιχείων (φωτογραφίες, ήχους ή βίντεο). Η αναπαραγωγή γίνεται από άλλες εφαρμογές του λειτουργικού (π.χ. media player) κι όχι από το φυλλομετρητή. <A HREF= μονοπάτι/όνομα_αρχείου > Υπερσύνδεσμος </Α> Μεταφορά σε άλλο σημείο της ίδιας ιστοσελίδας. <A HREF= #λέξη-όρος > Υπερσύνδεσμος </Α> Η θέση της λέξης-όρου μέσα στην ιστοσελίδα ορίζεται ως εξής: <Α ΝΑΜΕ= λέξη-όρος > </Α> Αποστολή e-mail <A HREF= mailto: διεύθυνση e-mail >Υπερσύνδεσμος </Α> 16 8

Πίνακες (Tables) Έναςπίνακαςορίζεταιμεβάσητιςγραμμέςκαιτιςστήλεςπου περιέχει. Τα δεδομένα τοποθετούνται σε κελιά που σχηματίζονται από αυτές τις γραμμές και τις στήλες. Τα δεδομένα μπορεί να είναι κείμενο, εικόνες, κατάλογοι, υπερσύνδεσμοι, μέχρι και υποπίνακες. Ο πίνακας ορίζεται με τη χρήση της ετικέτας: <TABLE> </TABLE>, μέσα στην οποία ορίζονται πρώτα οι γραμμές με την ετικέτα: <TR> </TR> και μέσα σε αυτή τοποθετείται η ετικέτα στήλης: <TD> </TD> ή <TH> </TH>. H ετικέτα <ΤΗ> χρησιμοποιείται όταν θέλουμε τα δεδομένα να είναι γραμμένα έντονα. Συνήθως μέσα στην ετικέτα <TR> δεν τοποθετούνται παράμετροι. Μπορούμε επίσης να χρησιμοποιήσουμε την ετικέτα <CAPTION> </CAPTION> αμέσως μετά την ετικέτα αρχής <TABLE> για να καθορίσουμε τον τίτλο του πίνακα. 17 Παράμετροι της ετικέτας <TABLE> Παράμετρος Align Τιμή Left / Right Σημασία Καθορίζει την οριζόντια στοίχιση του πίνακα. (default value = Left) BGcolor Χρώμα Καθορίζει το χρώμα του υποβάθρου. Border >=0 =0: χωρίς περιθώριο. >0: πάχος περιθωρίου σε pixel (default value = 2) BorderColor Χρώμα Καθορίζει το χρώμα του περιθωρίου. Cellpadding Cellspacing >=0 >=0 Καθορίζει την απόσταση σε pixel μεταξύ των περιθωρίων των κελιών του πίνακα από τα δεδομένα που υπάρχουν στα κελιά. Καθορίζει την απόσταση σε pixel μεταξύ των κελιών του πίνακα. Height >0 Καθορίζει το ύψος του πίνακα. (default value = autosize height) Width >0 ή % Καθορίζει το πλάτος του πίνακα. (default value = autosize width) 18 9

Παράμετροι της ετικέτας <TD> (και της <TH>) Παράμετρος Align Valign BGcolor Colspan Rowspan Height Width Τιμή Center, Left, Right Bottom, Middle, Top Χρώμα Ακέραια θετική τιμή Ακέραια θετική τιμή Ακέραια θετική τιμή Ακέραια θετική τιμή Σημασία Καθορίζει την οριζόντια στοίχιση των δεδομένων του κελιού. (default value=left) Καθορίζει την κάθετη στοίχιση των δεδομένων του κελιού. (default value=middle) Καθορίζει το χρώμα του υποβάθρου. Καθορίζει τον αριθμό των στηλών στις οποίες το κελί θα επεκταθεί. Καθορίζει τον αριθμό των γραμμών στις οποίες το κελί θα επεκταθεί. Καθορίζει το ύψος του κελιού σε pixel. (default value = autosize height) Καθορίζει το πλάτος του κελιού σε pixel. (default value = autosize width) 19 Πλαίσια (Frames) (1/2) Μια σημαντική δυνατότητα που μας δίνει η HTML, είναι να χωρίσουμε την οθόνη του φυλλομετρητήσεδύοήπερισσότερα παράθυρα στα οποία παρουσιάζονται διαφορετικές ιστοσελίδες. Ο διαχωρισμός της οθόνης του φυλλομετρητή σε παράθυρα γίνεται με την ετικέτα <FRAMESET> </FRAMESET>. Όταν χρησιμοποιείται αυτή η ετικέτα σε μία σελίδα δεν μπορεί να χρησιμοποιηθεί ταυτόχρονα και η ετικέτα <BODY>. 20 10

Πλαίσια (Frames) (2/2) O διαχωρισμός της οθόνης με τη χρήση της ετικέτας <FRAMESET> μπορεί να γίνει είτε σε γραμμές, είτε σε στήλες. Αν θέλουμε η οθόνη να διαχωριστεί και σε γραμμές και σε στήλες, τότε θα πρέπει να χρησιμοποιήσουμε εμφωλευμένες ετικέτες <FRAMESET> μέσα στην αρχική ετικέτα <FRAMESET> </FRAMESET>. 21 Παράμετροι ετικέτας <FRAMESET> Παράμετρος Τιμή Σημασία Rows Cols Border Σειρά τιμών χωριζόμενων από κόμμα (καθαρές τιμές ή ποσοστά) Σειρά τιμών χωριζόμενων από κόμμα (καθαρές τιμές ή ποσοστά) >=0 Καθορίζει σε πόσες γραμμές θα χωριστεί η οθόνη και ποιο θα είναι το μέγεθος αυτών των γραμμών. Καθορίζει σε πόσες στήλες θα χωριστεί η οθόνη και ποιο θα είναι το μέγεθος αυτών των στηλών. Καθορίζει το πλάτος των περιθωρίων των παραθύρων σε pixel. BorderColor FrameBorder Χρώμα Yes/No Καθορίζει το χρώμα των περιθωρίων των παραθύρων. Καθορίζει αν τα περιθώρια των περιθωρίων των παραθύρων θα έχουν τρισδιάστατη μορφή ή όχι. 22 11

Η ετικέτα <FRAME> H ετικέτα <FRAMESET> </FRAMESET> περιέχει ετικέτες <FRAME>, κάθε μία από τις οποίες αντιστοιχεί σε ένα από τα παράθυρα που έχουν δημιουργηθεί και καθορίζει τι θα εμφανίζεται στο παράθυρο αυτό. Η ετικέτα <FRAME> είναι απλή και δε συνοδεύεται από ετικέτα τέλους. 23 Παράμετροι ετικέτας <FRAME> Παράμετρος Τιμή Σημασία BorderColor FrameBorder MarginHeight MarginWidth Name Noresize Scrolling SRC Χρώμα Yes/No >=0 >=0 Όνομα εν παίρνει τιμή Yes/No/Auto ιεύθυνση ιστοσελίδας Καθορίζει το χρώμα του περιθωρίου του παραθύρου. Καθορίζει αν τα περιθώρια του περιθωρίου του παραθύρουθαέχειτρισδιάστατημορφήήόχι. Καθορίζει σε pixel την απόσταση των περιεχομένων του παραθύρου από την πάνω και κάτω πλευρά του πλαισίου. Καθορίζει σε pixel την απόσταση των περιεχομένων του παραθύρου από την αριστερή και δεξιά πλευρά του πλαισίου. Καθορίζει το όνομα του πλαισίου. Αν δηλωθεί σημαίνει ότι δεν μπορεί ο χρήστης να μεταβάλλει το μέγεθος του παραθύρου. Καθορίζει αν θα εμφανίζονται μπάρες ολίσθησης. Καθορίζει το ποια ιστοσελίδα θα εμφανίζεται στο πλαίσιο. 24 12

25 Επιπρόσθετη Μορφοποίηση <blink> </blink> Ετικέτα <body link= χρώμα vlink= χρώμα alink= χρώμα > <body background= φωτογραφία > <hr width= τιμή size= τιμή color= χρώμα > <marquee> </marquee> Λειτουργία Αριστερή/ εξιά στοίχιση κειμένου. link: χρώμα hyperlink vlink: χρώμα hyperlink που έχουμε ήδη επισκεφθεί alink: χρώμα hyperlink που είναι ενεργό Προσθέτει στο φόντο μία φωτογραφία. width: καθορίζει το μήκος της γραμμής size: καθορίζει το πάχος της γραμμής color: καθορίζει το χρώμα της γραμμής Αναβοσβήνει το κείμενο (μόνο στο Netscape Explorer) Προκαλεί κύλιση του κειμένου (μόνο στο Internet Explorer) 26 13

Ειδικοί χαρακτήρες Code Symbol Description &trade Trademark &amp & Ampersand &reg Registered trademark &copy Copyright &dagger Dagger &raquo» Right pointing double angle quotation mark &laquo «Left pointing double angle quotation mark &#151 Em-dash &deg Degree &frac14 ¼ Quarter &frac12 ½ Half &frac34 ¾ Three quarters &middot &iexcl Middle dot Inverted exclamation mark 27 14