1 ο Μζροσ Φ.Ε. 1. Δημιουργία ιςτοςελίδων με HTML CSS JavaScript 1. Δομή και επικφρωςη ιςτοςελίδασ {<html>,<head>,<body>,<title>,<meta>,<br>,<p>,<h1>}

Transcript

1 1 ο Μζροσ Φ.Ε. 1 Δημιουργία ιςτοςελίδων με HTML CSS JavaScript 1. Δομή και επικφρωςη ιςτοςελίδασ {<html>,<head>,<body>,<title>,<meta>,<br>,<p>,<h1>} 1

2 Aπαραίτθτα Eργαλεία Τα απαραίτθτα εργαλεία για τθν ανάπτυξθ ιςτοςελίδων είναι ζνασ ςυντάκτθσ κειμζνου (editor) με τον οποίο ςυντάςςουμε τον κϊδικα και ζνασ φυλλομετρθτισ (web browser) με τον οποίο βλζπουμε το αποτζλεςμα. Θα χρθςιμοποιιςουμε ζνα απλό ςυντάκτθ κειμζνου, όπωσ το Σθμειωματάριο (Notepad) των Microsoft Windows. Υπάρχουν και πιο εξελιγμζνοι ςυντάκτεσ όπωσ το Notepad++ που κα χρθςιμοποιιςουμε αργότερα. Ωσ φυλλομετρθτι κα χρθςιμοποιιςουμε οποιονδιποτε ζχουμε διακζςιμο ςτον Θ/Υ. 2

3 Ανοίγουμε το αρχείο του κϊδικα με το φυλλομετρθτι για να δοφμε το αποτζλεςμα. Τρόποσ εργαςίασ Συντάςςουμε τον κϊδικα τθσ ιςτοςελίδασ με το ςυντάκτθ κειμζνου αποκθκεφουμε το αρχείο του κϊδικα με κατάλθξθ.html 3

4 Ανάλυςθ Σχεδίαςθ - Ανάπτυξθ Το ςθμαντικότερο βιμα για τθ δθμιουργία ενόσ ιςτότοπου, δθλαδι ενόσ ςυνόλου ομοιόμορφων ιςτοςελίδων προβολισ ενόσ κζματοσ ι μιασ οντότθτασ γενικότερα, είναι θ ςχεδίαςθ. Ζνασ ιςτότοποσ αποτελεί μια εφαρμογι του παγκόςμιου ιςτοφ και ωσ τζτοια πρζπει πρϊτα να αναλφεται αυτό που κζλουμε να πετφχουμε και κατόπιν να ςυντίκεται θ επικυμθτι λφςθ ξεκινϊντασ από τθ ςχεδίαςθ κάκε ςυςτατικοφ τθσ, όπωσ θ διεπαφι με το χριςτθ, θ λειτουργικότθτα και θ δομι του περιεχομζνου. Θ ανάπτυξθ του κϊδικα ακολουκεί ςε επόμενο ςτάδιο και υλοποιείται ςφμφωνα με τισ επιταγζσ τθσ ςχεδίαςθσ. 1.Ανάλυςθ 2.Σχεδίαςθ 3.Ανάπτυξθ 4

5 Στατικι & Δυναμικι Ιςτοςελίδα τατικζσ είναι οι ιςτοςελίδεσ των οποίων το περιεχόμενο μεταφζρεται όπωσ είναι αποκθκευμζνο ςτον εξυπθρετθτι ιςτοςελίδων, άρα δεν αλλάηει, αν δεν το αλλάξει εκοφςια ο δθμιουργόσ τουσ. Αντίκετα ςτισ δυναμικζσ ιςτοςελίδεσ (οι οποίεσ δθμιουργοφνται με κϊδικα π.χ. PHP, ASP, JSP, κ.λπ.) το περιεχόμενο δθμιουργείται από μια εφαρμογι που εκτελείται ςτον εξυπθρετθτι ιςτοςελίδων και άρα μπορεί να αλλάξει, μεταξφ δφο ανανεϊςεων τθσ ιςτοςελίδασ ςτο παράκυρο του φυλλομετρθτι. Μια ςτατικι ιςτοςελίδα HTML δεν είναι ζνα πρόγραμμα που εκτελείται, αλλά οδθγίεσ για τθ διαμόρφωςθ ενόσ εγγράφου, ενϊ μια δυναμικι ιςτοςελίδα είναι ζνα πρόγραμμα που εκτελείται ςτο διακομιςτι ιςτοςελίδων και μπορεί να δθμιουργιςει διαφορετικό περιεχόμενο ςε κάκε κλιςθ τθσ. 5

6 Δομι αρχείου ςε Γλϊςςα ςιμανςθσ υπερκειμζνου HTML Το ζγγραφο που εμφανίηεται ςτο πιο κάτω πλαίςιο είναι γραμμζνο ςε HTML5, δθλαδι ςτθν ζκδοςθ 5 τθσ γλϊςςασ ςιμανςθσ υπερκειμζνου HTML. Θ HTML είναι θ γλϊςςα ςτθν οποία είναι γραμμζνεσ οι περιςςότερεσ ςτατικζσ ιςτοςελίδεσ του παγκόςμιου ιςτοφ. <!DOCTYPE html>  <html> <head> <title>τίηλος ιζηοζελίδας</title> <meta charset="utf-8"> </head> <body> Περιετόμενο ιζηοζελίδας </body> </html> Διλωςθ τφπου του κειμζνου Σχόλια (προαιρετικά) Ρεριγραφι ςτοιχείων αρχείου Ρεριεχόμενο προσ εμφάνιςθ 6

7 Θ πρϊτθ μου Ιςτοςελίδα <!DOCTYPE html>  <html> <head> <title>τίηλος ιζηοζελίδας</title> <meta charset="utf-8"> </head> <body> Περιετόμενο ιζηοζελίδας </body> Σθμαντικό: Για να αποκθκεφςετε το αρχείο ςασ πρζπει πρϊτα να επιλζξετε encoding UTF-8 και το όνομα του αρχείου να ζχει προζκταςθ.html </html> Σκελετόσ Ιςτοςελίδασ 7

8 Θ πρϊτθ μου Ιςτοςελίδα Αφοφ πλθκτρολογιςετε ολόκλθρο τον κϊδικα, να επιλζξετε encoding UTF-8 και να αποκθκεφςετε το αρχείο με όνομα ex01a.html ςτο φάκελλο ςασ. Στθ ςυνζχεια πατιςτε διπλό κλίκ ςτο αρχείο για να το δείτε με τον φυλλομετρθτι ςασ. Ρρζπει να φαίνεται κάπωσ ζτςι. Τίτλοσ Ιςτοςελίδασ Ρεριεχόμενο Ιςτοςελίδασ 8

9 <!DOCTYPE html>  <html> </html> <head> <title>τίηλος ιζηοζελίδας</title> <meta charset="utf-8"> </head> <body> Περιετόμενο ιζηοζελίδας </body> Είδοσ και ζκδοςθ εγγράφου Σχόλιο. Ξεκινά με <!- - Τελειϊνει με - -> <Ετικζττα (Tag)> Αρχι και τζλοσ ςτοιχείου Html <ετικζτα>περιεχόμενο</ετικζτα> Mεταδεδομζνα τίτλοσ, charset, ςυγγραφζασ, λζξεισ κλειδιά Μονι ετικζττα με παράμετρουσ <Ετικζττα (Tag)> Αρχι και τζλοσ ςτοιχείου Body <ετικζτα>περιεχόμενο</ετικζτα> <εηικέηα παράμεηρος1="ηιμή1" παράμεηρος2="ηιμή2"...>περιετόμενο</εηικέηα> 9

10 Στοιχεία Ιςτοςελίδασ Θ γλϊςςα HTML είναι λοιπόν μια γλϊςςα με τθν οποία επιςθμαίνουμε (μαρκάρουμε) το περιεχόμενο, τα ςυςτατικά ενόσ εγγράφου, όπωσ κείμενα, εικόνεσ, πίνακεσ, κ.λπ. Ζτςι κακορίηουμε τθ ςθμαςία του περιεχομζνου και επθρεάηουμε τθ μορφοποίθςι του. Κάκε ζγγραφο HTML αποτελείται από ζνα ςφνολο ςτοιχείων. Κάκε ςτοιχείο χαρακτθρίηεται από μία ετικζτα ζναρξθσ και μία ετικζτα λιξθσ του. <εηικέηα>περιετόμενο</εηικέηα> Σηοιτείο <εηικέηα1><εηικέηα2>περιετόμενο</εηικέηα2></εηικέηα1> θωλιαζμένα ζηοιτεία <εηικέηα1> <εηικέηα2> Περιετόμενο θωλιαζμένα ζηοιτεία </εηικέηα2> </εηικέηα1> <εηικέηα1> <εηικέηα2> Περιετόμενο θωλιαζμένα ζηοιτεία </εηικέηα1> </εηικέηα2> 10

11 Άςκθςθ 1: Να δημιοσργήζεηε μια νέα ζελίδα η οποία όηαν διαβαζηεί από ηον θσλλομεηρηηή ζας να δίνει ηο πιο κάηω αποηέλεζμα: Enter Space Tab 11

12 Λφςθ 1 Άςκθςθσ 1: <!DOCTYPE html>  <html> <head> <title> Άζκηζη 1</title> <meta charset="utf-8"> </head> <body> Άριζηος Παζιάς</br> Καλημέρα!</br> Ασηή είναι η πρώηη μοσ άζκηζη ζε HTML</br> Δίμαι πολύ ταρούμενος ποσ ηο καηάθερα. </body> </html> 12

13 Λφςθ 2 Άςκθςθσ 1: <!DOCTYPE html>  <html> <head> <title> Άζκηζη 1</title> <meta charset="utf-8"> </head> <body> <p>άριζηος Παζιάς</p> <p>καλημέρα!</p> <p>ασηή είναι η πρώηη μοσ άζκηζη ζε HTML</p> <p>δίμαι πολύ ταρούμενος ποσ ηο καηάθερα</p> </body> </html> 13

14 Βελτίωςθ λφςθσ Άςκθςθσ 1: <!DOCTYPE html>  <html> <head> <title> Άζκηζη 1</title> <meta charset="utf-8"> </head> <body> <h1>άριζηος Παζιάς</h1> <h2>καλημέρα!</h2> <h3>ασηή είναι η πρώηη μοσ άζκηζη ζε HTML</h3> <p>δίμαι πολύ ταρούμενος ποσ ηο καηάθερα.</p> </body> </html> 14

15 Ζλεγχοσ και επικφρωςθ Ιςτοςελίδασ Κακϊσ πλθκτρολογοφμε τον κϊδικα κάποιασ ςελίδασ, ςυχνά τυγχάνει να παραλείψουμε κάτι ι να ζχουμε κάποιο ςυντακτικό ι ορκογραφικά λάκοσ. Κάποιεσ φορζσ δεν είναι εφκολο να το εντοπίςουμε γιατί ςτον δικό μασ φυλλομετρθτι τυγχάνει να εμφανίηεται ςωςτά. Είναι όμωσ ςωςτό, πριν δθμοςιοποιιςουμε μια ςελίδα να τθν ελζγξουμε για τζτοια λάκθ. Ο ζλεγχοσ μπορεί να είναι οπτικόσ ι να χρθςιμοποιιςουμε τθν ειδικι online εφαρμογι του w3c ςτθ ςελίδα 15

16 16

17 Άςκθςθ 1f: 17

18 Άςκθςθ 1f: 18

19 Φ.Ε. 2 Δημιουργία ιςτοςελίδων με HTML 2. Οντότητεσ {&#ΧΧΧ;, <strong>,<small>,<b>,<i>,<u>} 19

20 <!DOCTYPE html> Εφαρμογή 2: Μορφοποίηςη κείμενου - υμβολικό κείμενο  <html> <head> <title> Κείμενο με ςφμβολα</title> <meta charset="utf-8"> </head> <body> <p><strong><u> Κανόνεσ δθμιουργίασ ομάδων εργαςίασ</u></strong><br> (Για κάκε) ομάδα μακθτϊν πρζπει να υπάρχει ζνασ διακζςιμοσ υπολογιςτισ. Μία ομάδα δεν μπορεί να είναι (κενι), πρζπει να ςυμμετζχουν ςε αυτι <u> τουλάχιςτο δφο </u> μακθτζσ.<br> Ζτςι κάκε μακθτισ κα πρζπει να (ανικει) ςε μία ομάδα, ενϊ <i> κανζνασ</i> μακθτισ (δεν ανικει) ςε δφο ι περιςςότερεσ ομάδεσ.<br> <small> Άρα, ςε μία ομάδα τθσ τάξθσ κα (ανικουν) τρεισ μακθτζσ μόνο αν το πλικοσ των μακθτϊν τθσ τάξθσ είναι περιττό.</small> </p> <p> </p> <p><b><u>εκδρομι ςτον Ρρωταρά</u></b></p> <p>εγϊ πολφ τθ κάλαςςα και το κολφμπι. Σιμερα λοιπόν που ζχει κα πάρω το που ξεκινά από το τθσ Λεμεςοφ, για να πάω ςε κάποια από τισ όμορφεσ του Ρρωταρά. Δεν κα πάρω αυτοκίνθτο για να μθν βάλω. <br> Θα πάρω μαηί μου και μία, μιπωσ και. Δεν κα πάρω το μου, για να ζχω τθν θςυχία μου. Το βράδυ κα επιςτρζψω με το τελευταίο,για να δω τον αγϊνα για το <i>champions League</i>ςτθ τθλεόραςθ.</p> </body> </html> 20

21 Λφςη Εφαρμογήσ 2: Μορφοποίηςη κείμενου - υμβολικό κείμενο Ραρατιρθςθ: Το κείμενο αλλάηει αυτόματα γραμμι ανάλογα με το πλάτοσ τθσ ςελίδασ ϊςτε να γεμίηει όλθ τθ ςελίδα ανεξάρτθτα από το μζγεκοσ τθσ οκόνθσ. 21

22 Ραράγραφοσ (Ετικζττα) <!DOCTYPE html> Εφαρμογή 2: Μορφοποίηςη κείμενου - υμβολικό κείμενο  <html> <head> <title> Κείμενο με ςφμβολα</title> </head> <body> Μικρότερα γράμματα τθλεόραςθ.</p> </body> </html> <meta charset="utf-8"> Ζντονθ και υπογραμμιςμζνθ γραφι (Ετικζττα) <p><strong><u> Κανόνεσ δθμιουργίασ ομάδων εργαςίασ</u></strong><br> (Για κάκε) ομάδα μακθτϊν πρζπει να υπάρχει ζνασ διακζςιμοσ υπολογιςτισ. Μία ομάδα δεν μπορεί να είναι (κενι), πρζπει να ςυμμετζχουν ςε αυτι <u> τουλάχιςτο δφο </u> μακθτζσ.<br> Οντότθτα (entity) (&...;) Ζτςι κάκε μακθτισ κα πρζπει να (ανικει) ςε μία ομάδα, ενϊ <i> κανζνασ</i> μακθτισ (δεν ανικει) ςε δφο ι περιςςότερεσ ομάδεσ.<br> <small> Άρα, ςε μία ομάδα τθσ τάξθσ κα (ανικουν) τρεισ μακθτζσ μόνο αν το πλικοσ των μακθτϊν τθσ τάξθσ είναι περιττό.</small> </p> <p> </p> Μθ εκτυπϊςιμθ αλλαγι γραμμισ (LF- Ascii 10) <p><b><u>εκδρομι ςτον Ρρωταρά</u></b></p> Αλλαγι Γραμμισ <p>εγϊ πολφ τθ κάλαςςα και το κολφμπι. Σιμερα λοιπόν που ζχει κα πάρω το που ξεκινά από το τθσ Λεμεςοφ, για να πάω ςε κάποια από τισ όμορφεσ του Ρρωταρά. Δεν κα πάρω αυτοκίνθτο για να μθν βάλω. <br> Θα πάρω μαηί μου και μία, μιπωσ και. Δεν κα πάρω το μου, για να ζχω τθν θςυχία μου. Το βράδυ κα επιςτρζψω με το τελευταίο,για να δω τον αγϊνα για το <i>champions League</i>ςτθ Ρλάγια γραφι 22

23 Παράγραφοι και οντότητεσ Ζνα κείμενο οργανϊνεται ςυνικωσ ςε παραγράφουσ που ςτθ γλϊςςα HTML ορίηονται απο τισ ετικζττεσ <p>.. </p>. Στο παράδειγμά μασ γραμμζσ 11-23, 25, 27, Στον κϊδικα παρατθροφμε επίςθσ τθν φπαρξθ κωδικϊν που ξεκινοφν με το χαρακτιρα ampersand (& ) και τελειϊνουν με το χαρακτιρα colon ( ; ) (ερωτθματικό). Οι κωδικοί αυτοί ονομάηονται οντότητεσ (entities) και κατά τθν απόδοςθ του κϊδικα ςτο φυλλομετρθτι μετατρζπονται ςτα αντίςτοιχα ςφμβολα. ( 23

24 Μη-εκτυπώςιμοι χαρακτήρεσ ελζγχου Ανοίγοντασ το αρχείο του παραδείγματοσ με το φυλλομετρθτι παρατθροφμε ότι τα κενά διαςτιματα που υπάρχουν ςτο κϊδικα μασ δεν εμφανίηονται. Αυτό ςυμβαίνει διότι οι χαρακτιρεσ αλλαγισ γραμμισ (Line Feed, LF, με κωδικό ASCII 10), οριηόντιου διαςτιματοσ (Horizontal Tab, HT, με κωδικό ASCII 9), επιςτροφισ του δρομζα ςτθν αρχι τθσ γραμμισ (Carriage Return, CR, με κωδικό ASCII 13), είναι μθ-εκτυπϊςιμοι χαρακτιρεσ ελζγχου. Θ φπαρξθ ςυνεχόμενων μθ εκτυπϊςιμων χαρακτιρων, όπωσ οι ςτθλοκζτεσ (tab), οι αλλαγζσ παραγράφου (enter/return) και τα διαςτιματα (space) αντικακίςτανται από ζνα απλό διάςτθμα. Θ αλλαγι γραμμισ γίνεται αυτόματα Ραράγραφοσ κεωρείται ότι περικλείεται ςτισ ετικζτεσ <p> </p> Αλλαγι γραμμισ, αλλά όχι παραγράφου με τθν ετικζτα <br> 24

25 Δίνοντασ ζμφαςη ςτο κείμενο Στο παράδειγμα μασ ςυναντάμε ακόμα μερικζσ ετικζτεσ που αφοροφν ςτθν ζμφαςθ του κειμζνου. Ρρόκειται για τισ ετικζτεσ: <strong> </strong> Ζντονθ γραφι <small> </small> Μικρότεροι χαρακτιρεσ <b> </b> ζντονθ γραφι (Bold) <u> </u> Υπογραμμιςμζνθ γραφι (Underline) <i> </i> Ρλάγια γραφι (Italics) <mark> </mark> Μαρκάριςμα κειμζνου Ρολυπλοκότερεσ μορφοποιιςεισ κα ςυναντιςουμε ςε επόμενα φφλλα εργαςίασ όμωσ γενικά αυτζσ προτείνεται να γίνονται με τθ χριςθ τθσ γλϊςςασ των Διαδοχικϊν Φφλλων Στυλ (Cascading Style Sheet, CSS), κακϊσ θ μορφοποίθςθ με ετικζτεσ τθσ γλϊςςασ HTML ζχει περιοριςμοφσ, ενϊ πολλζσ από τισ παλαιότερεσ ετικζτεσ μορφοποίθςθσ ζχουν πλζον αποχαρακτθριςτεί, οπότε υπάρχει πικανότθτα να μθν υποςτθρίηονται από μελλοντικζσ εκδόςεισ των φυλλομετρθτϊν. 25

26 Διαφοροποίηςη ςυςκευών Κλείνοντασ πρζπει να εςτιάςουμε τθν προςοχι μασ ςτο γεγονόσ ότι αλλάηοντασ το μζγεκοσ του παρακφρου του φυλλομετρθτι, αλλάηουν όπωσ είναι λογικό και τα ςθμεία αλλαγισ γραμμϊν. Αυτό είναι το ηθτοφμενο. Θ κάκε ιςτοςελίδα να "γεμίηει" το κενό παράκυρο του φυλλομετρθτι με περιεχόμενο. Θ ςφγχρονθ τάςθ είναι το περιεχόμενο μιασ ιςτοςελίδασ να προςαρμόηεται αρμονικά ςε κάκε μζγεκοσ οκόνθσ. Λόγω τθσ πλθκϊρασ των τερματικϊν ςυςκευϊν που χρθςιμοποιοφμε ςτισ μζρεσ μασ για τθν πρόςβαςι μασ ςτο περιεχόμενο του παγκόςμιου ιςτοφ. 26

27 Φ.Ε. 3 HTML 3. Πληροφορίεσ κεφαλήσ ιςτοςελίδασ <head> {<title>,<meta>,<author> } 27

28 Πληροφορίεσ κεφαλήσ ιςτοςελίδασ <title> </title> Τίτλοσ: Ρρζπει να είναι ςφντομοσ (10 χαρακτιρεσ) και περιεκτικόσ Χρθςιμοποιείται από τον φυλλομετρθτι για να εμφανίηεται ςτθ κορυφι τθσ ιςτοςελίδασ Για να φυλάει το ιςτορικό περιιγθςθσ ϊςτε να μπορεί κάποιοσ να εντοπίςει εφκολα τθν ςελίδα ξανά Για να αποκθκεφει τθν ςελίδα ςτισ προτιμιςεισ του χριςτθ Οι μθχανζσ αναηιτθςθσ εμφανίηουν τον τίτλο τθσ ςελίδασ όταν ταιριάηει ςτισ αναηθτιςεισ του χριςτθ. <html lang="el-gr"> και <meta charset="utf-8"> Οριςμόσ γλϊςςασ και ςετ χαρακτιρων. <meta http-equiv= refresh content= 5 > Ανανζωςθ τθσ ιςτοςελίδασ ανά 5 δευτερόλεπτα. <meta http-equiv= refresh content= 5; url= new-page.html > Ανακατεφκυνςθ τθσ ιςτοςελίδασ μετά από 5 δευτερόλεπτα. <meta name="author" content="σο όνομα ςασ"> <meta name= description content = Shop for beautiful flowers, Roses, Anemone"> <meta name= keywords content = Roses, Anemone, Begonias, Calendula "> <meta name="generator" content="notepad++"> <link rel= stylesheet href= newstyle.css <script src= external.js > </script> <style> <h1 {color:red; backgrount:yellow}> Κείμενο... </h1> 28 Να εργαςτείτε ςτο φφλλο εργαςίασ 3

29 Μαρκάριςμα ςυντομογραφία Γλϊςςα Χϊρα (Μθχ. Αναηιτθςθσ) Εφαρμογή 3. Ανακατεφκυνςθ Μινυμα φόρτωςθσ Επικεφαλίδα ιςτοςελίδασ Ταπελλάκι Επεξιγθςθσ όρου (Roll Over) 29

30 Λφςη εφαρμογήσ 3 30

31 Εργαςία για το ςπίτι. Να δθμιουργιςετε ζνα αρχείο ςτο οποίο κα καταχωρείτε όλεσ τισ νζεσ ετικζτεσ html που ςυναντάμε ϊςτε να τισ ζχουμε ωσ πρόχειρο βοικθμα. Εντολή Περιγραφή Ετικζτεσ επικεφαλίδασ <!... --> Σχόλιο <html>... </html> Αντικείμενο HTML <head>... </head> Κεφαλι Ιςτοςελίδασ <title>... </title> Τίτλοσ Ιςτοςελίδασ Ετικζτεσ Διαμόρφωςησ <body>... </body> Κυρίωσ ςϊμα ιςτοςελίδασ <p>... </p> Ραράγραφοσ &...; Οντότθτα <br> Αλλαγι Γραμμισ <strong>... </strong> Ζντονθ γραφι <small>... </small> Μικρά γράμματα <abbr> </abbr> Ταπελάκι <mark> </mark> Μαρκάριςμα κειμζνου <u> </u> Υπογράμμιςθ κειμζνου <hr> Οριηόντια γραμμι <em>... </em> Ζμφαςθ ςτο κείμενο <i>... </i> Italics <sub>... </sub> Subscript - Δείκτθσ <sup>... </sup> Superscript - Εκκζτθσ <cite>... </cite> Αναφορά ςε πθγι <q>... </q> Απόςπαςμα <del> </del> Διαγραμζνο κείμενο <pre> </pre> Διατιρθςθ μορφοποίθςθσ 31

32 Φ.Ε. 4 Δημιουργία ιςτοςελίδων με HTML 4. Δουλεφοντασ με το κυρίωσ ςώμα τησ Ιςτοςελίδασ {<body>... </body>} 32

33 4.1 Το κυρίωσ ςώμα τησ ιςτοςελίδασ Η ετικζτα <body> Κάκε ιςτοςελίδα πρζπει να περιζχει μια μοναδικι ετικζτα <body> και μια μόνο ετικζτα </body>. Αυτζσ οι δφο ετικζτεσ ορίηουν τθν αρχι και το τζλοσ του κυρίωσ ςϊματοσ τθσ ιςτοςελίδασ ςτο οποίο ειςάγουμε όλεσ τισ πλθροφορίεσ που κζλουμε να εμφανίηονται ςτο παράκυρο του φυλλομετρθτι. Θ ετικζτα <body> δζχεται τθν παράμετρο onload θ οποία ενεργοποιείται μόλισ φορτωκεί ολόκλθρθ θ ςελίδα. Ζτςι θ πιο κάτω ετικζτα εμφανίηει ζνα παράκυρο με το μινυμα «Καλωςορίςατε ςτθν ιςτοςελίδα μασ!» μόλισ θ ςελίδα φορτωκεί. <Body onload= alert( Καλωςορίςατε ςτη ιςτοςελίδα μασ! ) > 33

34 Το κυρίωσ ςώμα τησ ιςτοςελίδασ Παράγραφοι Ππωσ ςτθ ςυγγραφι ενόσ βιβλίου ζτςι και ςε μια ιςτοςελίδα, το κείμενο μασ είκιςται να χωρίηεται ςε προτάςεισ και παραγράφουσ για να είναι εφκολα κατανοθτό. Στθν html5 κάκε παράγραφοσ ορίηεται από τισ ετικζτεσ <p> </p> και χωρίηεται αυτόματα από τθν προθγοφμενθ παράγραφο με δφο κενζσ γραμμζσ. Το κείμενο μζςα ςτθν ίδια παράγραφο καταλαμβάνει όςεσ γραμμζσ είναι απαραίτθτεσ ϊςτε το κείμενο να γεμίηει το παράκυρο. Αν κζλουμε ςε κάποιο ςθμείο εντόσ τθσ παραγράφου να αλλάηει το κείμενο γραμμι, χρθςιμοποιοφμε τθν μονι ετικζτα <br>. Συχνά κζλοντασ να κάνουμε πιο εμφανι τον διαχωριςμό δφο παραγράφων ειςάγουμε ανάμεςα τουσ μια οριηόντια γραμμι με τθν μονι ετικζτα <hr>. 34

35 Παράδειγμα Να ανοίξετε με τον κειμενογράφο ςασ το αρχείο ex03a.html τθσ προθγοφμενθσ άςκθςθσ. 1. Να το αποκθκεφςετε με όνομα ex03b.html. 2. Να εντοπίςετε τθν χριςθ των ετικετϊν <p>, <h1>, <h2>, <br>, <hr>, <article>, και <fooder>. 3. Nα προςκζςετε τισ απαραίτθτεσ ετικζτεσ ϊςτε να εμφανίηεται ςτο παράκυρο του φυλλομετρθτι όπωσ φαίνεται ςτθν πιο κάτω εικόνα. 35

36 Αναφορζσ και Παραπομπζσ <!DOCTYPE html> <html> <body> <p>αυτι είναι μια αναφορά από τθν ιςτοςελίδα του ΥΡΡ: </p> <blockquote cite=" Πραμα τθσ Διεφκυνςθσ <mark> ΜΤΕΕ </mark> είναι θ <q> εξαςφάλιςθ ενόσ ολοκλθρωμζνου, ελκυςτικοφ, ευζλικτου και υψθλισ ποιότθτασ Συςτιματοσ Τεχνικισ και Επαγγελματικισ Εκπαίδευςθσ και Κατάρτιςθσ </q> που να ανταποκρίνεται ςτισ ςθμερινζσ και μελλοντικζσ ανάγκεσ τθσ Κυπριακισ οικονομίασ και κοινωνίασ, όπωσ προκφπτουν μζςα από το ςυνεχϊσ μεταβαλλόμενο τοπικό και διεκνζσ οικονομικό και τεχνολογικό περιβάλλον. </blockquote> </body> </html> Πταν κζλουμε θ αναφορά και το κείμενο του αποςπάςματοσ να αποτελοφν μία ενότθτα που ξεχωρίηει, λόγω τθσ αφξθςθσ τθσ αριςτερισ εςοχισ τθσ παραγράφου, εκμεταλλευόμαςτε τθν ετικζτα <blockquote>. Το ςτοιχείο <cite> </cite> χρθςιμοποιείται για να κάνουμε μια αναφορά ςε κάποια πθγι, ενϊ το ςτοιχείο <q> </q>, για να παρακζςουμε ζνα ςφντομο απόςπαςμα από τθ ςυγκεκριμζνθ πθγι. 36

37 ΦΕ 4 - Αναφορζσ και Παραπομπζσ 37

38 Φ.Ε. 5 Δημιουργία ιςτοςελίδων με HTML 5. Ασ δώςουμε μορφή ςτην Ιςτοςελίδα μασ Παράμετροσ Style {<body style = font-family:courier; >... </body>} 38

39 Η χρήςη τησ παραμζτρου Style Θ παράμετροσ style μασ επιτρζπει να εφαρμόςουμε ςτα περιεχόμενα των αντίςτοιχων ετικετϊν μορφοποίθςθ. Ραρόλο που θ ςφγχρονθ τάςθ, ςτθ ςυντριπτικι πλειοψθφία των ιςτοτόπων, όςον αφορά τθ μορφοποίθςθ είναι θ μζκοδοσ των διαδοχικϊν φφλλων ςτυλ (CSS - cascading style sheets), εντοφτοισ ςυχνά είναι πολφ χριςιμθ θ χριςθ τθσ παραμζτρου Style. Ππωσ είδαμε ςε προθγοφμενα μακιματα κάκε παράμετροσ χαρακτθρίηεται από μία τουλάχιςτον ιδιότθτα θ οποία παίρνει κάποια ςυγκεκριμζνθ τιμι. Ωσ τιμι ςτθν παράμετρο style δίνουμε ζναν ι περιςςότερουσ κανόνεσ (rule) μορφοποίθςθσ τθσ γλϊςςασ CSS. Κάκε κανόνασ ςυντάςςεται ωσ εξισ: Style = ιδιότητα: τιμή; Κανόνασ Μποροφμε όμωσ να δϊςουμε ςτθ παράμετρο style περιςςότερουσ από ζνα κανόνεσ κάκε φορά. Ζτςι θ κάκε style κα ζχει τθ μορφι: style = ιδιότητα1: τιμή1; ιδιότητα2: τιμή2;... ςφνολο κανόνων Τυπικό παράδειγμα χριςθσ τθσ παραμζτρου Style: <h1 style="text-align:center;color:white;background- color:blue;"> 39

40 Η χρήςη τησ παραμζτρου Style Θ ςειρά των κανόνων μζςα ςτθ style δεν ζχει ςθμαςία. Είναι όμωσ ςημαντικό κάθε κανόνασ να τελειώνει με ζνα ερωτηματικό (;) (χαρακτιρασ colon). Εξαιρείται ο τελευταίοσ κανόνασ, κακϊσ εκεί τελειϊνει και θ παράμετροσ style. Τονίηεται ότι θ κάκε ετικζτα style επθρεάηει τθ μορφοποίθςθ του ςτοιχείου ςτο οποίο γράφεται. Ζτςι ςε διαφορετικζσ ετικζτεσ ζναρξθσ μποροφμε να ζχουμε διαφορετικζσ μορφοποιιςεισ. Βζβαια οι μορφοποιιςεισ CSS χωρίηονται ςε κατθγορίεσ, κακϊσ κάκε είδοσ περιεχομζνου ζχει τισ δικζσ του ιδιότθτεσ. Κάποιεσ ιδιότθτεσ αφοροφν τουσ χαρακτιρεσ του κειμζνου, άλλεσ τισ ενότθτεσ κειμζνου, όπωσ οι επικεφαλίδεσ και οι παράγραφοι, διαφορετικζσ ιδιότθτεσ τισ εικόνεσ, τουσ πίνακεσ, κ.ο.κ. Στθ ςυνζχεια παρουςιάηονται ενδεικτικά κάποιοι κανόνεσ CSS που εμφανίηονται ςτο ςθμερινό ΦΕ, μαηί με μια ςφντομθ εξιγθςθ και κάποια ςχόλια. (Να προςθζςετε τουσ κανόνεσ ςτο αρχείο ςασ) Εκτενι αναφορά ςτθ γλϊςςα μορφοποίθςθσ CSS κα κάνουμε ςε επόμενα μακιματα. Μποροφμε επίςθσ να βροφμε περιςςότερεσ πλθροφορίεσ ςτον ιςτότοπο του World Wide Web Consortium (W3C) ( 40

41 Κανόνασ Style text-align:center; background-color:blue; font-family:courier; font-size:120%; Περιγραφή Στοίχιςθ του κειμζνου ςτο κζντρο. Άλλεσ επιλογζσ: αριςτερά (left), δεξιά (right) και πλιρωσ (justified). Μπλε χρϊμα του υποβάκρου (φόντου) των χαρακτιρων. Επιλογι γραμματοςειράσ τθσ οικογζνειασ Courier. Οι γραμματοςειρζσ μποροφν εκτόσ από ονομαςτικά, να επιλεγοφν και κατά οικογζνεια ι κατθγορία (π.χ. serif, sansserif, monospace). Μζγεκοσ χαρακτιρων ςτο 120% του τυπικοφ μεγζκουσ χαρακτιρων. Το τυπικό μζγεκοσ ενόσ χαρακτιρα ςε μια παράγραφο είναι 16px, δθλαδι 16 pixel (εικονοςτοιχεία). Το 120% αφορά το αντίςτοιχο ποςοςτό των 16 pixel και αντιςτοιχεί ςε 19px. Υπάρχει και θ μονάδα μζτρθςθσ em με 1em να αντιςτοιχεί ςτο τυπικό μζγεκοσ ενόσ χαρακτιρα. Ζτςι 1em = 16px = 100%. Στο παράδειγμά μασ 1.2em = 19px = %.

42 border:1px solid black; display:inline-block; color:white; Θ ενότθτα κειμζνου κα ζχει περίγραμμα ςυμπαγοφσ μαφρθσ γραμμισ, πάχουσ 1px. Άλλεσ μορφζσ περιγράμματοσ είναι οι dashed, ridge, dotted, κ.λπ. Θ ενότθτα κειμζνου κα εμφανιςτεί ωσ ζνα μπλοκ το οποίο κα περιοριςτεί ςτο πλάτοσ του περιεχομζνου του, επιτρζποντασ ςε άλλεσ ενότθτεσ να ςτακοφν δίπλα τθσ. Λευκό χρϊμα των χαρακτιρων. Οι τιμζσ των χρωμάτων μποροφν να αποδοκοφν με τρεισ τρόπουσ: α) Ονομαςτικά (π.χ. green, red, lightgreen, coral, κ.λπ.). β) Με τθ δεκαδικι τιμι τουσ ωσ rgb(x,y,z), όπου x μια δεκαδικι τιμι από 0 ζωσ 255 που αντιςτοιχεί ςτο κόκκινο χρϊμα, όπου y μια δεκαδικι τιμι από 0 ζωσ 255 που αντιςτοιχεί ςτο πράςινο χρϊμα και z μια δεκαδικι τιμι από 0 ζωσ 255 που αντιςτοιχεί ςτο μπλε χρϊμα (π.χ. rgb(255,0,0) για το ζντονο κόκκινο, rgb(0,255,0) για το ζντονο πράςινο, rgb(255,255,0) για ζντονο κίτρινο, rgb(255,127,80) για το κοραλλί, κ.λπ.). γ) Με τθ δεκαεξαδικι τιμι τουσ ωσ #ΧΧΥΥΗΗ, όπου ΧΧ μια δεκαεξαδικι τιμι από 00 ζωσ FF που αντιςτοιχεί ςτο κόκκινο χρϊμα, όπου ΥΥ μια δεκαεξαδικι τιμι από 00 ζωσ FF που αντιςτοιχεί ςτο πράςινο χρϊμα και ΗΗ μια δεκαεξαδικι τιμι από 00 ζωσ FF που αντιςτοιχεί ςτο μπλε χρϊμα (π.χ. #FF0000 για το ζντονο κόκκινο, #0000FF για το ζντονο μπλε, #FF7F50 για το κοραλλί, κ.λπ.). Οι πικανοί ςυνδυαςμοί χρωμάτων είναι ,7 εκατομμφρια 42 χρϊματα.

43 Στοιχεία Inline και ςτοιχεία Block Στθ γλϊςςα HTML τα ςτοιχεία του περιεχομζνου χωρίηονται ςε δφο μεγάλεσ κατθγορίεσ, ωσ προσ τον τρόπο με τον οποίο «γεμίηουν» το παράκυρο του φυλλομετρθτι. Η πρϊτθ κατθγορία είναι τα ςτοιχεία που τοποκετοφνται ςτθ ςειρά του κειμζνου (inline). Αυτά ακολουκοφν τθ ροι του κειμζνου, δίχωσ να προκαλοφν τθν αλλαγι παραγράφου. Ζχουμε ςυναντιςει αρκετά ςτοιχεία αυτοφ του τφπου ςτα παραδείγματά μασ. Ραραδείγματα αποτελοφν οι χαρακτιρεσ του κειμζνου, οι οντότθτεσ (π.χ. ), οι ετικζτεσ small, br, mark, em, strong, small, b, i, u, code, small, samp, cite, q, sub, sup, κ.α. Η δεφτερθ κατθγορία είναι τα ςτοιχεία που τοποκετοφνται ςε μια νζα παράγραφο και αποτελοφν μια ενιαία ενότθτα, ζνα μπλοκ περιεχομζνου. Τα ςτοιχεία τφπου μπλοκ τείνουν να καταλαμβάνουν όλο το πλάτοσ τθσ ιςτοςελίδασ για τθν περιοχι που καλφπτει το φψοσ τουσ. Με άλλα λόγια «προςπακοφν» ϊςτε να μθν υπάρχει άλλο περιεχόμενο αριςτερά ι δεξιά τουσ. Ραραδείγματα αποτελοφν οι ετικζτεσ p, h1, h2, h3,, hr, pre, article, header, footer, form, blockquote, κ.α. Επιςθμαίνουμε ότι θ ετικζτα br ανικει ςτθν πρϊτθ κατθγορία, κακϊσ απλά προκαλεί τθν αλλαγι γραμμισ ςτθν τρζχουςα ενότθτα δίχωσ να ειςάγει νζα ενότθτα. 43

44 Block Elements Block Level Element Creates a large block of content New lines before and after element Consumes the whole width available Examples <p> - Paragraph <h1> - <h6> Headings <form> - Forms <div> - div tags 44

45 Inline Elements Inline Level Element No new lines Can be placed aside other elements Can not define width Examples <a> - Links <strong> and <b> - Bold <input /> - Input <span> - Span tags 45

46 Box Model Τα ςτοιχεία τθσ HTML εμφανίηονται μζςα ςε ζνα νοθτό πλαίςιο, ζνα κουτί που ζχει τισ δικζσ του ιδιότθτεσ. Οι ιδιότθτεσ κακορίηονται από το αντίςτοιχο μοντζλο πλαιςίου (box model). Το πλεονζκτθμα τθσ χριςθσ CSS είναι ότι μποροφμε να αλλάξουμε τθ μορφοποίθςθ αυτοφ του πλαιςίου για κάκε ςτοιχείο του περιεχομζνου. Επίςθσ μποροφμε να εμφανίςουμε τα ςτοιχεία τφπου ςειράσ (inline) ωσ ςτοιχεία τφπου μπλοκ (block) και αντίςτροφα. 46

47 Φφλλο εργαςίασ 5 1. Να εξαςκθκείτε ςτθ χριςθ τθσ παραμζτρου Style και των άλλων ςτοιχείων που μάκαμε μζχρι ςιμερα εκτελϊντασ τισ οδθγίεσ του ΦΕ5 47

48 Φφλλο εργαςίασ 5 2. Να αποκθκεφςετε το αρχείο ex05a.html με το όνομα ex05b.html και να τροποποιιςετε τα περιεχόμενα του νζου αρχείου ϊςτε να εμφανίηει ςτο παράκυρο του φυλομετρθτι τθν εικόνα που κα βρείτε ςτο αρχείο ex05bsample.pdf 48

49 Φφλλο εργαςίασ 5 2. Να αποκθκεφςετε το αρχείο ex05b.html με το όνομα ex05c.html και να τροποποιιςετε τα περιεχόμενα του νζου αρχείου ϊςτε να εμφανίηει ςτο παράκυρο του φυλομετρθτι τθν εικόνα που εμφανίηεται πιο κάτω. 49

50 Φ.Ε. 5β Δημιουργία ιςτοςελίδων με HTML 6.1 Μορφοποίηςη με CSS Style {<body style = font-family:courier; >... </body>} 50

51 Παράμετροσ Style <h2 style="color:blue; font-size: 200%;background-color: yellow; textalign:left; > Διαδικαςία </h2>. 51

52 Μορφοποίηςη με Διαδοχικά Φφλλα Στυλ Cascading Style Sheets CSS Ρχ. Αντί <h1 style="font-family:courier; font-size:90%; background-color:lightgreen; border:1px solid black;"> Ρρϊτοσ Τίτλοσ</h1> <h2 style="font-family:courier; font-size:75%; background-color:yellow; border:1px solid red; display: inline-block">ρρϊτοσ Υπότιτλοσ </h2>... <h1 style="font-family:courier; font-size:90%; background-color:lightgreen; border:1px solid black;"> Δεφτεροσ Τίτλοσ</h1> <h2 style="font-family:courier; font-size:75%; background-color:yellow; border:1px solid red; display: inline-block">δεφτεροσ Υπότιτλοσ </h2>.... <h1 style="font-family:courier; font-size:90%; background-color:lightgreen; border:1px solid black;"> Τρίτοσ Τίτλοσ</h1> <h2 style="font-family:courier; font-size:75%; background-color:yellow; border:1px solid red; display: inline-block">τρίτοσ Υπότιτλοσ </h2> 52

53 Μορφοποίηςη με Διαδοχικά Φφλλα Στυλ Cascading Style Sheets CSS Στο προθγοφμενο ΦΕ χρθςιμοποιιςαμε τθν παράμετρο Style για να μορφοποιιςουμε ςυγκεκριμζνα ςτοιχεία τθσ ιςτοςελίδασ μασ. Τισ περιςςότερεσ φορζσ όμωσ κζλουμε να επαναλάβουμε τθν ίδια ακριβϊσ μορφοποίθςθ ςε περιςςότερα από ζνα διαφορετικά ςτοιχεία τθσ ίδιασ ςελίδασ. Συχνά δε ίςωσ να κζλουμε τθν ίδια μορφοποίθςθ να επαναλάβουμε ςε περιςςότερεσ από μια ιςτοςελίδεσ. Σε τζτοιεσ περιπτϊςεισ κα ζπρεπε με βάςθ τθν προθγοφμενθ μζκοδο να επαναλάβουμε τθν ίδια παράμετρο style πολλζσ φορζσ. Σε αυτό το πρόβλθμα ζδωςε λφςθ θ μζκοδοσ CSS. Χρθςιμοποιϊντασ τθν ετικζτα style αντί τθν παράμετρο Style μποροφμε να περιγράψουμε κάποιουσ ςυγκεκριμζνουσ τρόπουσ εμφάνιςθσ των διαφόρων ςτοιχείων τθσ ιςτοςελίδασ και να καλοφμε αυτι τθν περιγραφι κάκε φορά που χρειαηόμαςτε τθν ίδια μορφοποίθςθ, ζςτω και αν είναι διαφορετικό το περιεχόμενο των ςτοιχείων. 53

54 Μορφοποίηςη με Εςωτερικά Φφλλα Στυλ Μποροφμε να ζχουμε: <head>... <style> body { font-size: 14px; background-color:rgb(180,200,255); } h1 { text-align:center; color:#44479c; font-size:150% } h2 { color:green; background-color:7d81e8; font-size:125% } </style> </head> <body> <h1> Ρρϊτοσ Τίτλοσ</h1> <h2 >Ρρϊτοσ Υπότιτλοσ </h2>... <h1 > Δεφτεροσ Τίτλοσ</h1> <h2 > Δεφτεροσ Υπότιτλοσ </h2>... 54

55 Άςκηςη: Να δθμιουργιςετε ζνα νζο αρχείο HTML και να ειςάγετε ςε αυτό τον κϊδικα τθσ διπλανισ εικόνασ. Ακολοφκωσ να εμφανίςετε τθν ςελίδα ςτον Φυλλομετρθτι ςασ και να παρατθριςετε τθν μορφοποίθςθ τθσ ςελίδασ. Διαφοροποιιςτε τισ παραμζτρουσ τθσ ετικζτασ style για να δθμιουργιςετε τθ δικι ςασ εκδοχι Ρϊσ μπορϊ να διαφοροποιιςω ζνα μόνο ςτοιχείο; 55

56 Μορφοποίηςη με Διαδοχικά Φφλλα Στυλ από εξωτερικό αρχείο Με τθν χριςθ των εςωτερικϊν φφλλων ςτυλ, του προθγοφμενου παραδείγματοσ, αποφεφγουμε τθν επανάλθψθ των ίδιων εντολϊν μορφοποίθςθσ ςτθν ίδια ιςτοςελίδα και επίςθσ πετυχαίνουμε Ρροςοχι: μεγαλφτερθ Αν ςε ομοιομορφία. μια ςελίδα Τι γίνεται όμωσ αν ο ιςτότοποσ μου, αποτελείται από πολλζσ ιςτοςελίδεσ οι οποίεσ κζλω να είναι ομοιόμορφεσ; χρθςιμοποιθκοφν Ή κα πρζπει να αντιγράψω περιςςότεροι τθν ετικζτα Style από από ςελίδα ζναν ςε ςελίδα ι καλφτερα, να πλθκτρολογιςω τθν εντολι Style ςε ζνα εξωτερικό αρχείο και καλζςω αυτό το τρόποι μορφοποίθςθσ για το ίδιο αρχείο μζςα από κάκε ςελίδα που κζλω να τθν χρθςιμοποιιςω. Η εντολι κλιςθσ ςτοιχείο, του αντίςτοιχου τότε εξωτερικοφ Ιςχυρότερθ αρχείου φαίνεται κεωρείται ςτο επϊμενο θ παράδειγμα. <head> <title>ρεριφεριακά</title> μορφοποίθςθ τθσ τοπικισ παραμζτρου <meta charset="utf-8"> <link rel="stylesheet" Style, ακολουκεί type="text/css" href= test.css"> θ μορφοποίθςθ που </head> επιβάλλει το εςωτερικό <style> φφλλο (Αρχείο ςτυλ test.css) και <body> body { font-size: 14px; background-color:#ccb297; } <h1> Ρρϊτοσ Τίτλοσ</h1> h1 { τζλοσ θ μορφοποίθςθ από το εξωτερικό <h2 >Ρρϊτοσ Υπότιτλοσ </h2> text-align:center; color:#44479c;... διαδοχικό φφλλο ςτυλ. font-size:150% <h1 > Δεφτεροσ Τίτλοσ</h1> } <h2 > Δεφτεροσ Μπορείτε Υπότιτλοσ </h2> να εξθγιςετε h2 { τον λόγο που... ςυμβαίνει αυτό; color:green; background-color:7d81e8; font-size:125% } </style> 56

57 Άςκηςη: Να αντιγράψετε τον κϊδικα του αρχείου ex05b.html ςε ζνα νζο αρχείο με όνομα ex051b.html και να αλλάξετε τθν μορφοποίθςθ του ϊςτε να μοιάηει με τθν πιο κάτω εικόνα. Να χρθςιμοποιιςετε τθν μζκοδο με εςωτερικό φφλλο ςτυλ. 57

58 58

59 Άςκηςη: Να αντιγράψετε τον κϊδικα του αρχείου ex051b.html ςε ζνα νζο αρχείο με όνομα ex052a.html και να αλλάξετε τθν μορφοποίθςθ του ϊςτε να μοιάηει με τθν πιο κάτω εικόνα. Να χρθςιμοποιιςετε τθν μζκοδο με εξωτερικό αρχείο διαδοχικϊν φφλλων ςτυλ. (ex05d.css) 59

60 Ασ θυμηθοφμε... Μορφοποίηςη με Διαδοχικά Φφλλα Στυλ Cascading Style Sheets CSS 60

61 Ασ θυμηθοφμε... Μορφοποίηςη με Διαδοχικά Φφλλα Στυλ Cascading Style Sheets CSS Παράμετροσ Style <h1 style= color:rgb(255,180,100);. > </h1> Ετικζτα Style - Εςωτερικά Διαδοχικά Φφλλα Στυλ <head> <style> h1 { color:rgb(255,180,100); background-color:rgb(255,0,0); } </style> </head> Διαδοχικά Φφλλα Στυλ από εξωτερικό αρχείο <link rel="stylesheet" type="text/css" href="ex05d.css"> 61

62 Φ.Ε. 6 Δημιουργία ιςτοςελίδων με HTML 6. Διαχείριςη Λίςτασ Ειςαγωγή εικόνασ {<ol>, <ul>, <li>, <img src="nicosia.jpg" alt="η Λευκωςία ςτο χάρτη"> } 62

63 63

64 Διαχείριςη Λίςτασ Λίςτεσ που περιλαμβάνουν διάφορεσ πλθροφορίεσ μπορεί να κζλουμε να εμφανίηονται ςτθν ιςτοςελίδα μασ με διαφορετικό τρόπο κάκε φορά. Ριο κάτω βλζπουμε κάποια παραδείγματα. Unordered List Ordered List ΒΑΘΜΟΛΟΓΙΑ 1. Απόλλων 2. Αζλ 3. Άρθσ 4. Αποζλ 5. Ομόνοια 6. Ανόρκωςθ ΟΡΓΑΝΑ ΧΕΔΙΟΤ Μολφβια Γομολάςτιχα Τρίγωνα Χάρακασ Διαβιτθσ Ξφςτρα Α ΕΣΟ a) ΘΗΨ1 b) ΘΗΥ1 c) ΘΗΜ1 d) ΗΕ1 e) ΗΥ1α f) ΗΥ1β ΜΑΘΗΜΑΣΑ Ηλεκτρολογία Ηλεκτρονικά Ιςτοςελίδα C++ Μακθματικά Ελλθνικά Οι ετικζτεσ τθσ HTML5 και ο τρόποσ που τισ χρθςιμοποιοφμε για να το πετφχουμε φαίνεται πιο κάτω: <h2>βαθμολογια</h2> <ol type="1"> <li>απόλλων</li> <li>αζλ</li> <li>άρθσ</li> <li>αποζλ</li> <li>ομόνοια</li> <li>ανόρκωςθ</li> </ol> <h2>ογανα ΣΧΕΔΙΟΥ</h2> <ul style="list-style-type:disc"> <li>μολφβια</li> <li>γομολάςτιχα</li> <li>τρίγωνα</li> <li>χάρακασ</li> <li>διαβιτθσ</li> <li>ξφςτρα</li> </ul> (1, A, a, I,i lower-greek) (disc, circle, square, none) list-style-image: url('sqpurple.gif'); 64

65 Παράδειγμα: Να δθμιουργιςετε μια ιςτοςελίδα θ οποία να εμφανίηει τισ δυο λίςτεσ όπωσ ςτο παράδειγμα πιο κάτω. Πνομα αρχείου: (ex06a1.html) 65

66 Κώδικασ HTML παραδείγματοσ 66

67 Παράδειγμα: Να μορφοποιιςετε τθν ςελίδα τθσ προθγοφμενθσ άςκθςθσ ϊςτε να εμφανίηεται όπωσ ςτο παράδειγμα πιο κάτω. Πνομα αρχείου: (ex06a2.html) 67

68 Κώδικασ HTML παραδείγματοσ ex06a2.html - <head>... </head> 68

69 Κώδικασ HTML παραδείγματοσ ex06a2.html - <body>... </body> 69

70 Φωλιαςμζνεσ Λίςτεσ Διάφορεσ λίςτεσ μπορεί να είναι φωλιαςμζνεσ ςε άλλθ λίςτα: <h2>a Nested List</h2> <p>list can be nested (lists inside lists):</p> <ul> <li>coffee</li> <li>tea <ul> <li>black tea</li> <li>green tea</li> </ul> <li>milk</li> </ul> </body> </html> 70

71 Description Lists Μια περιγραφικι λίςτα είναι μια λίςτα όρων, με περιγραφι κάκε όρου. Η ετικζτα <dl> ορίηει τθ λίςτα περιγραφισ, θ ετικζτα <dt> ορίηει τον όρο (όνομα) και θ ετικζτα <dd> περιγράφει κάκε όρο: <h2>a Description List</h2> <dl> <dt>coffee</dt> <dd>- black hot drink</dd> <dt>milk</dt> <dd>- white cold drink</dd> </dl> 71

72 Ειςαγωγή Φωτογραφίασ Γενικά μποροφμε να ειςάγουμε μια φωτογραφία ςτθν ιςτοςελίδα απλά χρθςιμοποιϊντασ τθν πιο κάτω ςφνταξθ: <img src="nicosia.jpg" alt="θ Λευκωςία ςτο χάρτθ"> Σε αυτι τθν περίπτωςθ ο φυλλομετρθτισ αναηθτά το αρχείο φωτογραφίασ ςτθν ίδια περιοχι (Folder) που είναι αποκθκευμζνθ θ ιςτοςελίδα. Αν αυτό δεν ιςχφει, κα πρζπει να δϊςουμε είτε ολόκλθρθ τθν απόλυτθ διαδρομι του αρχείου φωτογραφίασ (μπορεί να είναι ζνα url) είτε τθ ςχετικι διαδρομι. Καλι πρακτικι είναι να ζχουμε τισ φωτογραφίεσ ςε κάποιο υποφάκελο του φακζλου τθσ ιςτοςελίδασ ϊςτε εφκολα να μπορεί να εντοπιςτεί αλλά και θ ςχετικι διαδρομι να ορίηεται απλά: <img src= images\nicosia.jpg" alt="θ Λευκωςία ςτο χάρτθ"> Γενικά οι φωτογραφίεσ ςυμβάλλουν ςτθν κακυςτζρθςθ εμφάνιςθσ τθσ ιςτοςελίδασ. Πςο περιςςότερεσ φωτογραφίεσ περιλαμβάνονται ςε μια ςελίδα, και όςο μεγαλφτερθ είναι θ ανάλυςθ τουσ τόςο αργεί ο φυλλομετρθτισ να φορτϊςει μια ςελίδα. Για τον ςκοπό αυτό υπάρχουν ειδικά προγράμματα που χαμθλϊνουν τθν ανάλυςθ μιασ φωτογραφίασ χωρίσ να χακεί ςθμαντικι πλθροφορία. Θα μιλιςουμε γι αυτά ςε κάποιο από τα επόμενα μακιματα. 72

73 Εικόνεσ και Κείμενο <img src="όνομα_αρχείου" align="τφποσ_ςτοίχιςησ hspace= x vspace= y border= x > align= bottom align= middle align= top align= left align= right hspace=80 vspace=30 73

74 Διαμόρφωςη Φωτογραφίασ <img src="nicosia.jpg" alt="θ Λευκωςία ςτο χάρτθ" width="500" height="600"> <img src="nicosia.jpg" alt="θ Λευκωςία ςτο χάρτθ" style="width:500px;height:600px;"> <head> <style> img{width: ="128px"; height="128px" } </style> </head> <body> <img src="nicosia.jpg" alt=" θ Λευκωςία ςτο χάρτθ" </body> 74

75 Διαμόρφωςη Φωτογραφίασ <head> <style> img { display: block; width:80%; margin-left: auto; margin-right: auto; } </style> </head> <body> <img src=" nicosia.jpg " alt="θ Λευκωςία ςτο χάρτθ width="128" height="128"> <img src=" limassol.jpg " alt=" θ Λεμεςόσ ςτο χάρτθ " style="width:128px;height:128px;"> </body> </html> 75

76 Να εργαςτείτε ςτο φφλλο εργαςίασ 6 76

77 77