2 ο Μζροσ. Δημιουργία ιςτοςελίδων με HTML CSS JavaScript

Transcript

1 2 ο Μζροσ Δημιουργία ιςτοςελίδων με HTML CSS JavaScript 1

2 Φ.Ε. 7 Δημιουργία ιςτοςελίδων με HTML 7. Εξωτερικό αρχείο CSS Φωλιαςμζνεσ Λίςτεσ {<ol>, <ul>, <li>, <link rel="stylesheet" type="text/css" href="p07.css">} 2

3 Εξωτερικό αρχείο CSS Ζχουμε δει ςτο προθγοφμενο φφλλο εργαςίασ τθν μζκοδο μορφοποίθςθσ CSS με εςωτερικό φφλο ςτυλ. το ςθμερινό φφλλο εργαςίασ κα μορφοποιιςουμε το περιεχόμενο τθσ ιςτοςελίδασ μασ χρθςιμοποιϊντασ CSS ςε εξωτερικό αρχείο το οποίο κα ςυνδζςουμε ςτθν ιςτοςελίδα μασ. Η ςφνδεςθ του εξωτερικοφ αρχείου επιτυγχάνεται με τθν πιο κάτω ςφνταξθ: <link rel="stylesheet" type="text/css" href=«ex07a.css"> Να κυμάςτε ότι ςτουσ κανόνεσ CSS υπεριςχφει θ τοπικότθτα. Όταν δθλαδι υπάρχει ζνα εξωτερικό φφλλο ςτυλ που επιλζγει ζνα τμιμα του περιεχομζνου, τότε εφαρμόηονται οι δικοί του κανόνεσ μορφοποίθςθσ. Αν παράλλθλα υπάρχει και ζνα εςωτερικό φφλλο ςτυλ, τότε για το ίδιο τμιμα περιεχομζνου ιςχφουν οι κανόνεσ του εςωτερικοφ και όχι του εξωτερικοφ φφλλου ςτυλ. τθν περίπτωςθ δε που υπάρχει ςτθν ετικζτα ζναρξθσ του τμιματοσ αυτοφ και παράμετροσ style θ οποία ορίηει κάποια μορφοποίθςθ, τότε εφαρμόηεται κατά προτεραιότθτα θ μορφοποίθςθ που ορίηει θ τοπικι παράμετροσ, μετά το ςτοιχείο style του αρχείου και τελευταία θ μορφοποίθςθ του εξωτερικοφ φφλλου ςτυλ. Αυτό ςθμαίνει ότι μποροφμε να χρθςιμοποιοφμε κοινι μορφοποίθςθ για πολλζσ ιςτοςελίδεσ, θ οποία όμωσ να διαφοροποιείται κατά περίπτωςθ, ςφμφωνα με τισ ανάγκεσ μασ. 3

4 Εξωτερικό αρχείο CSS Οι νζοι κανόνεσ CSS που ςυναντοφμε ςτο ςθμερινό φφλλο εργαςίασ αφοροφν λίςτεσ και κείμενο.: <link rel="stylesheet" type="text/css" href=«ex07a.css"> Κανόνασ list-style:circle; list-style:lower-greek; font-weight:bolder; text-transform: uppercase; word-spacing:10px; Περιγραφή Οι κουκκίδεσ κα ζχουν τθ μορφι μικρϊν κφκλων. Άλλεσ μορφζσ είναι οι disc, square, none Η αρίκμθςθ κα γίνεται με πεηά ελλθνικά γράμματα. Άλλεσ μορφζσ είναι οι lowerroman, upper-roman, κ.λπ. Η γραφι κα είναι εντονότερθ από bold Σο κείμενο γράφεται με κεφαλαία. Απόςταςθ λζξεων 10px. 4

5 <h1>a Nested List</h1> <ul> <li>coffee <ul> <li>capputccino</li> <li>esspresso</li> </ul> </li> <li>tea <ul> <li>black tea</li> <li>green tea</li> </ul> </li> <li>milk</li> </ul> </body> </html> Φωλιαςμζνεσ λίςτεσ υχνά ζχουμε μία λίςτα μζςα ςτθν οποία κζλουμε να φωλιάςουμε επιμζρουσ λίςτεσ. Γενικά μζςα ςτα ςτοιχεία μιασ λίςτασ μποροφμε να ςυμπεριλάβουμε οποιοδιποτε περιεχόμενο, αρκεί να προςζχουμε να μθν μπερδζψουμε τισ ετικζτεσ ζναρξθσ και λιξθσ κάκε ςτοιχείου. Αυτό ιςχφει άλλωςτε και για όλεσ τισ ετικζτεσ μιασ ιςτοςελίδασ. 5

6 Να δθμιουργιςετε το αρχείο ex07a.html ϊςτε να εμφανίηει τθν ιςτοςελίδα τθσ εικόνασ. Η μορφοποίθςθ τθσ ςελίδασ να γίνει εξολοκλιρου με το εξωτερικό αρχείο ex07a.css 6

7 Να αποκθκεφςετε τα αρχεία ex07a.html και ex07a.css ωσ ex07b.html ναι ex07b1.css αντίςτοιχα ϊςτε όταν ςυνδεκοφν να ζχουμε τθν ιςτοςελίδα τθσ πιο κάτω εικόνασ. 7

8 Να δθμιουργιςετε ζνα νζο αρχείο το οποίο να αποκθκεφςετε με όνομα ex07b2.html ϊςτε όταν ςυνδεκεί με το αρχείο ex07b.css να εμφανίηει τθν πιο κάτω ιςτοςελίδα. 8

9 HTML και CSS Σωστός διαχωρισμός από την αρχή HTML Περιγράφει το περιεχόμενο CSS Περιγράφει τθ μορφοποίθςθ Σίτλοσ Κείμενο Λίςτα Πίνακασ Εικόνα φνδεςμοσ Χρϊματα Θζςθ Μζγεκοσ ςτοίχιςθ Πλαίςια Γραμμζσ Φόντο 9

10 10

11 11

12 12

13 Περιεχόμενο ή μορφοποίηςη; Σα γράμματα μιασ παραγράφου ζχουν γραμματοςειρά Calibri. Ο τίτλοσ του βιβλίου είναι: Σα ταξίδια του Γκιοφλιβερ. Ο τίτλοσ του βιβλίου είναι γραμμζνοσ με μπλε γράμματα. Σο βιβλίο ζχει 30 κεφάλαια. Τπάρχει μια κενι ςελίδα μετά από κάκε κεφάλαιο. τθν πρϊτθ παράγραφο, ςτο όνομα του ιρωα ζχει δοκεί ζμφαςθ. ε κάκε παράγραφο, το πρϊτο γράμμα εμφανίηεται ωσ αρχίγραμμα. 13

14 Φ.Ε. 8 Δημιουργία ιςτοςελίδων με HTML 8. Ειςαγωγή Πίνακα {<Table>, <tr>, <td>, <th>} 14

15 Πίνακεσ Οι πίνακεσ αποτελοφν ζνα ςθμαντικό εργαλείο ςτθν προςπάκεια μασ να δϊςουμε ςωςτά οργανωμζνο το περιεχόμενο μιασ ιςτοςελίδασ. Πζρα από τθ φυςικι ζννοια του πίνακα όπωσ τον γνωρίηουμε, μποροφμε να χρθςιμοποιιςουμε πίνακεσ για να δθμιουργιςουμε ςτιλεσ, να χωρίςουμε τθν ςελίδα μασ ςε τμιματα κλπ. Όνομα Βαθμόσ Χαρακτ. Πζτροσ 16 Καλόσ Αντϊνθσ 20 Άριςτοσ τζλιοσ 14 Μζτριοσ Επικεφαλίδα Μενοφ 15

16 Πίνακεσ 16

17 <Table> </Table> <tr> </tr> <th> </th> <td> </td> Πίνακεσ Ζνασ πίνακασ ςτθν HTML αποτελείται από κυψζλεσ (cell) οι οποίεσ οργανϊνονται ςε γραμμζσ (row). Οι ετικζτεσ <table> </table> ςθματοδοτοφν τθν ζναρξθ και λιξθ του περιεχομζνου του πίνακα. Κάκε γραμμι ξεκινά με <tr> και τελειϊνει με </tr>, ενϊ κάκε κυψζλθ οριοκετείται με <td> </td>. Η ετικζτεσ <th> </th> χρθςιμοποιοφνται ςυχνά για τον προςδιοριςμό των κυψελϊν τθσ πρϊτθσ γραμμισ, ϊςτε τα περιεχόμενά τθσ να γράφονται με εντονότερουσ χαρακτιρεσ Νζοσ πίνακασ Νζα γραμμι Νζο κελί ςτθν πρϊτθ γραμμι Νζο κελί ςτθ γραμμι <table width="200" height="200" border="1" align="center" cellpadding="2" cellspacing="2" bordercolor="# background="images/square.jpg" bgcolor="#666666"> <td width="80" height="120" align="center" valign="top" bordercolor="#990000«background="images/square.jpg" bgcolor="#cccccc"> 17

18 Ο πίνακασ του παραδείγματοσ ζχει 5 γραμμζσ και 4 ςτιλεσ. Βλζπουμε ότι μία κυψζλθ ςτθ τελευταία γραμμι καταλαμβάνει 3 ςτιλεσ, ενϊ μια άλλθ ςτθ ςτιλθ Γ, 2 γραμμζσ. Αυτι θ τεχνικι λζγεται ςυγχϊνευςθ κυψελϊν και επιτυγχάνεται χάρθ ςτισ παραμζτρουσ colspan για οριηόντια ςυγχϊνευςθ και rowspan για κατακόρυφθ ςυγχϊνευςθ. Ζτςι ςε κάκε μία από τισ 5 γραμμζσ του πίνακα χρειάηεται να ορίηονται κάκε φορά μόνο όςεσ κυψζλεσ λείπουν ϊςτε να ςυμπλθρωκεί ο αρικμόσ των 4 κυψελϊν. Οι κενζσ κζςεισ κυψελϊν καταλαμβάνονται από τισ ςυγχωνευμζνεσ κυψζλεσ. 18

19 Άςκθςθ: Να δθμιουργιςετε ζνα πίνακα με το πρόγραμμα του τμιματοσ ςασ ςε HTML. Αποκθκεφςτε το αρχείο ςτο φάκελο ςασ με όνομα px08b.html 19

20 Λφςθ Άςκθςθσ: 20

21 Να εργαςτείτε ςτο φφλλο εργαςίασ 8α 21

22 Κανόνεσ CSS για τουσ πίνακεσ Οι νζοι κανόνεσ CSS που ςυναντοφμε ςε αυτό το παράδειγμα αφοροφν κατά κφριο λόγο τουσ πίνακεσ. Παρατθροφμε πάντωσ ότι οριςμζνοι κανόνεσ, όπωσ αυτοί που αφοροφν χρϊματα, εφαρμόηονται και ςε άλλεσ κατθγορίεσ περιεχομζνου εκτόσ από το κείμενο. Κανόνασ border-collapse: collapse; Περιγραφή Δεν κα υπάρχει κενό μεταξφ του περιγράμματοσ πίνακα και του περιγράμματοσ κυψελϊν. Για κάκε ςτοιχείο του πίνακα ιςχφει το μοντζλο πλαιςίου(box model) όπωσ ζχει ιδθ περιγραφεί. Αν δεν οριςτεί διαφορετικά κάκε κυψζλθ του πίνακα ζχει το δικό τθσ όριο και μπορεί να ζχει το δικό τθσ περίγραμμα. Αυτό ζχει ωσ αποτζλεςμα να εμφανίηεται ζνα κενό μεταξφ των περιγραμμάτων. Με τθ διλωςθ αυτι καταργοφμε το κενό αυτό ζτςι ϊςτε τα περιγράμματα πίνακα και κυψελϊν να ςυμπίπτουν. vertical-align: middle; padding: 10px; td, th.eb τοίχιςθ κειμζνου ςτο μζςο του φψουσ τθσ γραμμισ. Οριςμόσ του γεμίςματοσ ςτα 10px. Επιλογι κάκε ςτοιχείου td και κάκε ςτοιχείου th. Επιλογι όλων των ςτοιχείων που ανικουν ςτθν κλάςθ eb. 22

23 Κλάςεισ Η παράμετροσ class μπορεί να χρθςιμοποιθκεί ςε κάκε ςτοιχείο τθσ HTML που αφορά περιεχόμενο για να ορίςει κατθγορίεσ (κλάςεισ) περιεχομζνου. το φφλλο εργαςίασ 8 χρθςιμοποιείται για να ορίςει τθν κατθγορία eb που αφορά τισ διοργανϊςεισ Eurobasket ϊςτε εκμεταλλευόμενοι τισ δυνατότθτεσ των κανόνων CSS να μορφοποιιςουμε με διαφορετικό τρόπο τισ τελευταίεσ 6 γραμμζσ του πίνακα. 23

24 Κλάςεισ παράδειγμα 24

25 Άςκθςθ: Να δθμιουργιςετε το μενοφ ενόσ εςτιατορίου όπωσ φαίνεται ςτθν εικόνα. Αποκθκεφςτε το αρχείο ςτο φάκελο ςασ με όνομα ex08b.html 25

26 Φ.Ε. 9 Δημιουργία ιςτοςελίδων με HTML 8. HyberLinks <a href= "url"> link text </a> 26

27 HTML Links HyberLinks (Υπερςφνδεςμοι) χεδόν όλεσ οι ιςτοςελίδεσ χρθςιμοποιοφν ςυνδζςμουσ. Οι ςφνδεςμοι επιτρζπουν ςτουσ χριςτεσ με ζνα κλικ να μεταβαίνουν από τθ ςελίδα ςε ςελίδα. Όταν μετακινείτε το ποντίκι πάνω από ζνα ςφνδεςμο, το βζλοσ του ποντικιοφ κα μετατραπεί ςε ζνα μικρό χζρι. Σημείωςη: Ο ςφνδεςμοσ δεν είναι απαραίτθτα κείμενο. Μπορεί να είναι μια εικόνα ι οποιοδιποτε άλλο ςτοιχείο HTML Γενικι ςφνταξθ ετικζτασ ςυνδζςμου: <a href= " > Visit our Page </a> <a href= "html_images.asp" > HTML Images </a> 27

28 HTML Links Colors (Χρώματα ςυνδζςμων) Σα προεπιλεγμζνα χρϊματα του κειμζνου ενόσ ςυνδζςμου είναι: Οι ςφνδεςμοι που δεν ζχουμε επιςκεφκεί ακόμα εμφανίηονται Τπογραμμιςμζνοι και με μπλε χρϊμα. Οι ςφνδεςμοι που ζχουμε επιςκεφκεί εμφανίηονται Τπογραμμιςμζνοι και με Μωβ χρϊμα. Ο ενεργόσ ςφνδεςμοσ εμφανίηεται υπογραμμιςμζνοσ και με κόκκινο χρϊμα ΑΡΧΙΚΗ ΘΗΨ1 ΘΗΨ2 ΘΗΤ1 28

29 HTML Links Colors (Χρώματα ςυνδζςμων) Σα προεπιλεγμζνα χρϊματα του κειμζνου ενόσ ςυνδζςμου είναι: Οι ςφνδεςμοι που δεν ζχουμε επιςκεφκεί ακόμα εμφανίηονται Τπογραμμιςμζνοι και με μπλε χρϊμα. Οι ςφνδεςμοι που ζχουμε επιςκεφκεί εμφανίηονται Τπογραμμιςμζνοι και με Μωβ χρϊμα. Ο ενεργόσ ςφνδεςμοσ εμφανίηεται υπογραμμιςμζνοσ και με κόκκινο χρϊμα ΑΡΧΙΚΗ ΘΗΨ1 ΘΗΨ2 ΘΗΤ1 29

30 HTML Links Colors (Χρώματα ςυνδζςμων) Μποροφμε να διαφοροποιιςουμε τθν προεπιλεγμζμθ μορφοποίθςθ με τθν χριςθ των κανόνων του CSS: <style> a:link { color: green; background-color: transparent; text-decoration: none; } a:visited { color: pink; background-color: transparent; text-decoration: none; } a:hover { a:active { </style> color: red; background-color: transparent; text-decoration: underline; } color: yellow; background-color: transparent; text-decoration: underline; } 30

31 HTML Links The target Attribute Κακορίηει το ςθμείο ανοίγματοσ του ςυνδεδεμζνου εγγράφου. Μπορεί να ζχει μία από τισ ακόλουκεσ τιμζσ: _blank - Ανοίγει το ςυνδεδεμζνο ζγγραφο ςε νζο παράκυρο ι καρτζλα _self - Ανοίγει το ςυνδεδεμζνο ζγγραφο ςτο ίδιο παράκυρο / καρτζλα με το κλικ του (αυτό είναι προεπιλεγμζνο) _parent - Ανοίγει το ςυνδεδεμζνο ζγγραφο ςτο γονικό πλαίςιο _top - Ανοίγει το ςυνδεδεμζνο ζγγραφο ςτο πλιρεσ ςϊμα του παρακφρου framename - Ανοίγει το ςυνδεδεμζνο ζγγραφο ςε ζνα όνομα πλαίςιο <a href=" target="_blank">my Page!</a> 31

32 HTML Links Image as Link <a href= index.html"> <img src= pigture.gif" alt="htmllessons" style="width:42px;height:42px;border:0;"> </a> 32

33 HTML Links Create a Bookmark... <a href="#lim">jump to Limassol</a>... <h2 id= lim">limassol</h2>... <a href= products.html#toys">jump to toys</a>... <a href=" ml">html tutorial</a> 33

34 Περιοχζσ εγγράφου id: Ονομάηει μια ιδιότθτα. Μπορεί να περιζχεται ςε οποιαδιποτε ετικζτα. <a href= > </a> <h2 id= > </h2> 34

35 Άςκηςη Να δθμιουργιςετε τισ δφο ςελίδεσ (ex09a.html και ex09b.html) του Φφλλου εργαςίασ 9. 35