ΕΘΝΙΚΟ ΚΑΙ ΚΑΠΟΔΙΣΡΙΑΚΟ ΠΑΝΕΠΙΣΗΜΙΟ ΑΘΗΝΩΝ ΣΜΗΜΑ ΠΛΗΡΟΦΟΡΙΚΗ ΚΑΙ ΣΗΛΕΠΙΚΟΙΝΩΝΙΩΝ Στεδίαζη Εκπαιδεσηικού Λογιζμικού 2 η Άσκηση Φύλλο Μαθήμαηος Εργαζίας για ζσγγραθή ιζηοζελίδας με τρήζη ηης HTML Μπεκαηώρος Μάριος - M1187 Παναγιώηοσ Εσάγγελος - Μ1169 Παποσηζής Βαζίλειος - Μ1185 Αθήνα 02/02/2012
Ενότθτα : Συγγραφι μιασ ιςτοςελίδασ με HTML (HyperText Markup Language) Εκπαιδευτικό περιβάλλον : Inspire http://hermes.di.uoa.gr/inspire2/ Μειονεκτιματα του υπάρχοντοσ εγχειριδίου τθσ HTML Οι ςελίδεσ που ζχουν χρθςιμοποιθκεί για τθν εκμάκθςθ τθσ HTML είναι ελλιπείσ και δεν ειςζρχονται ςε μεγάλο βάκοσ ςτθν ανάλυςθ τθσ γλϊςςασ. Tα παραδείγματα που χρθςιμοποιοφνται δεν επιτρζπουν ςτον εκπαιδευόμενο να τα αντιγράψει απευκείασ ςτον επεξεργαςτι κειμζνου του και να το δοκιμάςει ςτον Web Browser. Tα Tags τθσ HTML που χρθςιμοποιοφνται δεν επεξθγοφνται επαρκϊσ κατά τθν επίδειξι τουσ. Επίςθσ λείπουν βαςικά δομικά ςτοιχεία τθσ HTML. Γίνεται αναφορά ςτο τι μπορεί να υπάρχει ςε μια ιςτοςελίδα, αλλά δεν αναφζρεται ςτο πωσ μποροφν να ειςαχκοφν αυτά τα ςτοιχεία που δθμιουργεί ο εκπαιδευόμενοσ Πώσ καταςκευάηεται μια απλι Web ςελίδα Μία Web Σελίδα είναι ζνα text αρχείο (.txt). Για τον λόγο αυτό μποροφμε να χρθςιμοποιιςουμε οποιοδιποτε πρόγραμμα μασ δίνει τθν δυνατότθτα να παράγουμε text αρχεία. Αρχικά προτείνουμε τθ χρθςιμοποίθςθ του notepad (ςθμειωματάριο) των Windows ι κάποιο άλλο text editor ςε άλλα λειτουργικά ςυςτιματα. Δε ςυνιςτάται θ χριςθ εφαρμογϊν γραφείου (Office). Υπάρχουν αρκετά εμπορικά λογιςμικά για τθν καταςκευι ιςτοςελίδων όπωσ το Frontpage, το Expression, το Dreamweaver ι το Composer. Πρόκειται για πολφ χριςιμα εργαλεία, αλλά με αυτά δε μακαίνει κανείσ HTML. Προτείνουμε κάποιοσ που μακαίνει HTML να μθν τα χρθςιμοποιιςετε ακόμθ. Καλό είναι να χρθςιμοποιθκοφν μόνο όταν ζχει μάκει κάποιοσ τι είναι και πωσ λειτουργεί θ HTML. 2 Σ σ γ γ ρ α θ ή ι ζ η ο ζ ε λ ί δ α ς μ ε H T M L
Τι είναι tag Tag ονομάηεται μια ςειρά χαρακτιρων τθσ μορφισ <title> και κακϊσ ο web browser διαβάηει το αρχείο αντιλαμβάνεται τι πρζπει να παρουςιάςει ςτο χριςτθ. Τα tags ςυνικωσ χρθςιμοποιοφνται ςε ηευγάρια π.χ. <form> περιεχόμενο </form>. Αρκετά tags μποροφν να χρθςιμοποιθκοφν και μόνα τουσ. Συςτινεται να χρθςιμοποιοφνται ςε ηευγάρια για ομοιόγενεια. Πωσ φτιάχνεται μια ςελίδα Για να φτιάξουμε μια ιςτοςελίδα ανοίγουμε το text editor μασ ειςάγουμε το παρακάτω περιεχόμενο. <title>sample Web page</title> <p>hello!</p> Όπωσ βλζπεται δθμιουργείται μια δενδρικι δομι. Στθν ςυνζχεια αποκθκεφουμε τθν ςελίδα μασ ωσ selida.html. Αφοφ τθν αποκθκεφςουμε τθν ανοίγουμε με τον web browser μασ. Και μασ εμφανίηεται θ εξισ οκόνθ. Το 3 Σ σ γ γ ρ α θ ή ι ζ η ο ζ ε λ ί δ α ς μ ε H T M L
περιεχόμενο που βρίςκεται μζςα ςτο tag περιζχει πλθροφορίεσ χριςιμεσ για το web browser. Τα ςτοιχεία που βρίςκονται μζςα ςτο body είναι αυτά που τελικϊσ εμφανίηονται ςτο χριςτθ. Θα πρζπει να τονίςουμε ότι πάντα κα πρζπει να κάνουμε copy-paste τθν παρακάτω διλωςθ ςτθν αρχι του κϊδικα μιασ ςελίδασ: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> Αυτι θ διλωςθ είναι απαραίτθτθ γιατί δθλϊνει τθν ζκδοςθ τθσ HTML ενϊ παράλλθλα βοθκάει τον φυλλομετρθτι (browser) να ςυμπεριφζρεται ςωςτά. Οριςμόσ Παραγράφων Αν κζλουμε να ζχουμε ςε ζνα κείμενο πολλζσ παραγράφουσ χρθςιμοποιοφμε το tag <p>, ςτο τζλοσ τθσ παραγράφου βάηουμε το tag </p>. <title>υπόδειγμα Ιςτοςελίδασ</title> <p>η πρϊτθ παράγραφοσ</p> <p>η δεφτερθ παράγραφοσ</p> Αυτό είναι το αποτζλεςμα του παραπάνω κϊδικα: 4 Σ σ γ γ ρ α θ ή ι ζ η ο ζ ε λ ί δ α ς μ ε H T M L
Αλλαγζσ Γραμμών Η <br> λειτουργεί όπωσ το πάτθμα ενόσ Enter ςε ζναν επεξεργαςτι κειμζνου. Μποροφμε να αφιςουμε τθν υπόλοιπθ γραμμι κενι και να ξεκινιςει θ εμφάνιςθ του επόμενου κειμζνου από μια νζα. Όμωσ θ <br> δεν αφινει μια κενι γραμμι. Απλϊσ μεταφζρει το υπόλοιπο κομμάτι τθσ τρζχουςασ γραμμισ ςτθν από κάτω. Για να αφιςετε κενι γραμμι πρζπει ι να αλλάξετε παράγραφο ι να βάλετε 2 <br> (<br><br>). <title>υπόδειγμα Ιςτοςελίδασ</title> <p>and then, we could all see<br> at once the brilliant purpose<br> of the paragraph tag.</p> </p>moving on...<br> the more tags you write,<br> the better you will feel? </p> Ο παραπάνω κϊδικασ εμφανίηει: 5 Σ σ γ γ ρ α θ ή ι ζ η ο ζ ε λ ί δ α ς μ ε H T M L
Έμφαςθ Για να δϊςουμε ζμφαςθ ςε κάποια λζξθ ι ακόμα και πρόταςθ ςε μια ιςτοςελίδα μποροφμε να χρθςιμοποιιςουμε τισ εντολζσ <em> και <strong>. Η 1 θ διλωςθ δίνει ζμφαςθ ςε ζνα τμιμα κειμζνου (emphasis) ενϊ θ 2 θ διλωςθ δίνει ιδιαίτερθ ζμφαςθ ςε ζνα τμιμα κειμζνου (strong emphasis). Συνθκίηεται το <em> να μορφοποιείται με πλάγια και το <strong> με ζντονα γράμματα. Δεν χρθςιμοποιοφμε αυτζσ τισ εντολζσ για μορφοποίθςθ. Οι ςυγκεκριμζνεσ ετικζτεσ κακορίηουν μόνο τθν ζμφαςθ ςτο περιεχόμενο. Ζςτω ότι ζχουμε τον παρακάτω κϊδικα: <title>υπόδειγμα Ιςτοςελίδασ</title> <p>and then, we could all see<br> at once the brilliant purpose<br> of the paragraph tag.</p> </p><strong>moving on...</strong><br> the more tags you write,<br> <em>the better you will feel? </em></p> Ο παραπάνω κϊδικασ εμφανίηει: 6 Σ σ γ γ ρ α θ ή ι ζ η ο ζ ε λ ί δ α ς μ ε H T M L
Όπωσ χαρακτθριςτικά παρατθροφμε από το αποτζλεςμα, οι λζξεισ «Moving on» εμφανίηονται με ζντονα γράμματα ενϊ οι λζξεισ «the better you will feel?» με πλάγια γράμματα. Και πάλι κα πρζπει να τονιςτεί ότι οι ςυγκεκριμζνεσ ετικζτεσ κακορίηουν τθν ζμφαςθ ςτο περιεχόμενο και δεν αφοροφν κακόλου τθν μορφοποίθςθ τθσ ιςτοςελίδασ. Επικεφαλίδεσ (headlines) Στθν HTML μποροφμε να ορίηουμε και επικεφαλίδεσ (headlines) για να δϊςουμε ζμφαςθ ςε κάποιο τίτλο ενόσ κειμζνου. Υπάρχουν ςυνολικά 6 επικεφαλίδεσ. Δεν υπάρχει 7 θ. Κάκε φορά, θ επόμενθ κα πρζπει να βρίςκεται μετά τθν προθγοφμενθ. <h1>.</h1> : Επικεφαλίδα 1 ου επιπζδου <h2>.</h2> : Επικεφαλίδα 2 ου επιπζδου <h3>.</h3> : Επικεφαλίδα 3 ου επιπζδου <h4>.</h4> : Επικεφαλίδα 4 ου επιπζδου <h5>.</h5> : Επικεφαλίδα 5 ου επιπζδου <h6>.</h6> : Επικεφαλίδα 6 ου επιπζδου 7 Σ σ γ γ ρ α θ ή ι ζ η ο ζ ε λ ί δ α ς μ ε H T M L
Παραπομπζσ (Links) Οι παραπομπζσ είναι θ ψυχι του Web. Με αυτζσ μποροφμε να ςυνδζςουμε δφο ςελίδεσ ζτςι ϊςτε κάνοντασ κλικ ςε κείμενο (ι εικόνα) τθσ μιασ να μεταφερόμαςτε ςτθν άλλθ. Η γενικι ςφνταξθ μια παραπομπισ είναι: <a href="url">το κείμενο τθσ παραπομπισ</a> όπου URL είναι θ κζςθ κάποιασ Web ςελίδασ. π.χ. <a href="http://www.google.com">google!</a> <a href="mailto:vpapoutsis@di.uoa.gr">στείλε email</a> <title>υπόδειγμα Ιςτοςελίδασ</title> <p>and then, we could all see<br> at once the brilliant purpose<br> of the paragraph tag. <p> Moving on... <br> the more tags you write,<br> the better you will feel? </p> <a href="http://www.google.com">google!</a> <br> <a href="mailto:vpapoutsis@di.uoa.gr">στείλε email</a> 8 Σ σ γ γ ρ α θ ή ι ζ η ο ζ ε λ ί δ α ς μ ε H T M L
To αποτζλεςμα είναι: Πώσ δθμιουργοφμε απλοφσ πίνακεσ Το tag <table> χρθςιμοποιείται για να δθμιουργοφμε πίνακεσ αλλά και για να ζχουμε μεγαλφτερθ ζλεγχο ςτο ςτιςιμο μιασ ςελίδασ. Μερικοί όροι που πρζπει να γνωρίηετε πριν αςχολθκείτε με τουσ πίνακεσ είναι οι: Caption: Το κζμα του πίνακα Table headings: Επικεφαλίδεσ ςτθλϊν ι γραμμϊν (τα περιεχόμενά τουσ παρουςιάηονται με bold γράμματα) Table data: Τα δεδομζνα των κελιϊν του πίνακα Border: Το περικϊριο του πίνακα και των κελιϊν του Για να καταςκευάςουμε ζνα πίνακα, ορίηουμε τθν κάκε γραμμι ξεχωριςτά (μποροφμε να ζχουμε όςεσ γραμμζσ κζλουμε) και μζςα ςε κάκε γραμμι ορίηουμε τα κελιά τθσ. Οι ςτιλεσ ορίηονται αυτόματα με βάςθ το πόςα κελιά υπάρχουν ςε κάκε γραμμι. Ζνα απλό παράδειγμα πίνακα χωρίσ ορατά περικϊρια που περιλαμβάνει τρεισ ςειρζσ, και 2 κελιά είναι το παρακάτω: 9 Σ σ γ γ ρ α θ ή ι ζ η ο ζ ε λ ί δ α ς μ ε H T M L
<title>υπόδειγμα Ιςτοςελίδασ</title> <table border="1"> <tr> <th>1st Column</th> <th>2nd Column</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> Τα βιματα που κάναμε για να δθμιουργιςουμε τον πίνακα ιταν: 1. Κακορίςαμε το ςχιμα του πίνακα 2. Ορίςαμε τον πίνακα <table>...</table> 3. Ορίςαμε τθν γραμμι <tr>...</tr> 4. Ορίςαμε (ζνα ζνα) τα κελιά τθσ γραμμισ <th>...</th> (για κελί επικεφαλίδασ) και <td>...</td> (για κελί δεδομζνων) 5. ορίςαμε το περίγραμμα το πάχοσ του περιγράμματοσ border="1", αν δε το ορίςουμε εμφανίηεται ζνασ πίνακασ χωρίσ περίγραμμα. 10 Σ σ γ γ ρ α θ ή ι ζ η ο ζ ε λ ί δ α ς μ ε H T M L
Και το αποτζλεςμα φαίνεται παρακάτω: Λίςτεσ (αρικμθμζνεσ και μθ) Υπάρχουν οι αρικμθμζνεσ και οι μθ αρικμθμζνεσ λίςτεσ. Αν κζλουμε να δθμιουργιςουμε μια αρικμθμζνθ λίςτα του τφπου: 1. Άνδροσ 2. Μφκονοσ 3. Τινοσ 4. Σίφνοσ κα πρζπει να χρθςιμοποιιςουμε τισ εντολζσ <ol>...</ol> και <li>. Η εντολι <ol> (ordered list) τοποκετείται ςτθν αρχι τθσ λίςτασ ενϊ θ εντολι </ol> ςτο τζλοσ τθσ. Κάκε νζα εγγραφι ςτθν λίςτα πρζπει να ςθμειϊνεται με το tag <li>. 11 Σ σ γ γ ρ α θ ή ι ζ η ο ζ ε λ ί δ α ς μ ε H T M L
Ζτςι θ παραπάνω αρικμθμζνθ λίςτα κα πρζπει να γραφτεί ωσ εξισ: <title>υπόδειγμα Ιςτοςελίδασ</title> <p>νθςιά</p> <ol> <li>άνδροσ</li> <li>μφκονοσ</li> <li>τινοσ</li> <li>σίφνοσ</li> </ol> 12 Σ σ γ γ ρ α θ ή ι ζ η ο ζ ε λ ί δ α ς μ ε H T M L
Για να δθμιουργιςουμε μια λίςτα με κουκκίδεσ (μθ αρικμθμζνθ), όπωσ θ παρακάτω, κα ακολουκιςουμε τθν ίδια ακριβϊσ μεκοδολογία όπωσ και με τισ αρικμθμζνεσ με τθ διαφορά πωσ αντί για τθν εντολι <ol> κα χρθςιμοποιιςουμε τθν <ul> (unordered list). Ζτςι θ παραπάνω μθ αρικμθμζνθ λίςτα κα πρζπει να γραφτεί ωσ εξισ: <title>υπόδειγμα Ιςτοςελίδασ</title> <p>νθςιά</p> <ul> <li>άνδροσ</li> <li>μφκονοσ</li> <li>τινοσ</li> <li>σίφνοσ</li> </ul> 13 Σ σ γ γ ρ α θ ή ι ζ η ο ζ ε λ ί δ α ς μ ε H T M L
Ειςαγωγι Εικόνων και Γραφικών Υπάρχουν πολλοί τρόποι με τουσ οποίουσ μπορεί να αποκθκευτεί μια εικόνα ι ζνα γραφικό ςτον Η/Υ. Κάκε ζνασ από αυτοφσ, βαςίηεται ςε ζνα ξεχωριςτό πρότυπο και αναγνωρίηεται από τθν επζκταςθ του ονόματοσ του αρχείου που περιζχει τθν εικόνα. Οι Web browsers αναγνωρίηουν μόνο δφο τζτοια πρότυπα. Το.gif και το.jpg (δθλαδι το jpeg). Αν ζχετε μια εικόνα που κζλετε να ςυμπεριλάβετε ςε μια ςελίδα και δεν είναι αποκθκευμζνθ ςε μια από τισ δφο αυτζσ μορφζσ, τότε πρζπει να τθν μετατρζψετε ςε gif ι jpg χρθςιμοποιϊντασ ζνα από τα ειδικά προγράμματα μετατροπισ που παρζχουν αυτι τθν δυνατότθτα (π.χ. photoshop). Για να προςκζςουμε μια εικόνα ςε μια ιςτοςελίδα χρθςιμοποιοφμε τθν εντολι <img src= όνομα ι/και path αρχείου > π.χ. <img src="image1.gif">. Με τθν οδθγία αυτι θ εικόνα κα μπει ςτθν ςελίδα ςτο ςθμείο που υπάρχει θ οδθγία αλλά ςτθν αριςτερι πλευρά τθσ οκόνθσ. Ο δεξιά τθσ χϊροσ κα παραμείνει κενόσ. Το κείμενο που υπάρχει πριν από αυτιν κα βρίςκεται από πάνω τθσ και το κείμενο που υπάρχει μετά από αυτιν κα βρίςκεται από κάτω τθσ. Παρακάτω δίνονται ςυνοπτικά πωσ ορίηεται μια εικόνα: <img>: Περιγράφει μια εικόνα src: το αρχείο τθσ εικόνασ ωσ διεφκυνςθ (υποχρεωτικό) alt: περιγραφι τθσ εικόνασ (υποχρεωτικό) width: μικοσ τθσ εικόνασ ςε pixels (προαιρετικό) height: μικοσ τθσ εικόνασ ςε pixels (προαιρετικό) Η ετικζτα <img> δεν περιλαμβάνει περιηχομενο <title>υπόδειγμα Ιζηοζελίδας</title> <p>κουηάβια</p> <img src="image1.jpg" alt="κουηάβια" width="200" height="200"> 14 Σ σ γ γ ρ α θ ή ι ζ η ο ζ ε λ ί δ α ς μ ε H T M L
Και το αποτζλεςμα φαίνεται παρακάτω: 15 Σ σ γ γ ρ α θ ή ι ζ η ο ζ ε λ ί δ α ς μ ε H T M L