Η Γλώςςα κωδικοποίηςησ HTML Φύλλο Εργαςίασ 9

Transcript

1 Θέκα: Εμθάνιζη και απόκπςτη ζηοισείυν ηηρ ιζηοζελίδαρ μέζυ μοπθοποίηζηρ CSS Όλνκα καζεηή/ηξηαο:... Τκήκα:... Σηόρνη : Σην ηέινο ηνπ θύιινπ εξγαζίαο ζα πξέπεη λα κπνξείηε λα: Ηκεξνκελία:... /... / Εκθαλίδνπλ θαη λα απνθξύπηνπλ ηκήκαηνο ηνπ πεξηερνκέλνπ κηαο ηζηνζειίδαο κε ηε ρξήζε ελνηήησλ ηεο HTML θαη ηεο γιώζζαο CSS 1. Δημιοςπγία απσείος HTML. Σηνλ θάθειν ζαο λα δεκηνπξγήζεηε έλα λέν αξρείν κε όλνκα ex10a.html. Να επεμεξγαζηείηε ην αξρείν ώζηε λα πεξηιακβάλεη ηνλ θώδηθα HTML όπσο αθξηβώο θαίλεηαη ζηε ζειίδα 4 (Τκήκαηα ηνπ θεηκέλνπ βξίζθνληαη ζην ηέινο απηώλ ησλ ζειίδσλ θαη κπνξνύλ λα αληηγξαθνύλ). 2. Εμθανίζηε ηο απσείο με ηον θςλλομεηπηηή ζαρ. Θα πξέπεη λα κνηάδεη κε ηελ εηθόλα: 3. Να απνζεθεύζεηε ην αξρείν ex10a.html σο ex10b.html θαη λα δηνξζώζεηε ηνλ θώδηθα ώζηε λα εκθαλίδεη ηελ πην θάησ εηθόλα. Άριςτοσ Παςιάσ Σελίδα 1

2 4. Να απνζεθεύζεηε ην αξρείν ex10b.html ζε δύν δηαθνξεηηθά αξρεία κε όλνκα ex10bgr.html θαη ex10busa.html αληίζηνηρα. Nα δηνξζώζεηε ηνλ θώδηθα ζηα δύν αξρεία ώζηε ε ίδηα ηζηνζειίδα λα εκθαλίδεηαη ζηα ειιεληθά ή ζηα αγγιηθά αλάινγα κε ηελ επηινγή ηνπ ρξήζηε. 5. Επεξηγημαηικέρ ζημειώζειρ: Ο κεραληζκόο ησλ ζπλδέζκσλ ή ππεξζπλδέζκσλ πινπνηεί ηε δνκή ηνπ ππεξθεηκέλνπ, παξέρνληαο ηελ ειεπζεξία πινήγεζεο ζε δηαθνξεηηθέο ελόηεηεο πεξηερνκέλνπ, ζηελ ίδηα ή ζε δηαθνξεηηθέο ηζηνζειίδεο, νη νπνίεο κπνξεί λα βξίζθνληαη νπνπδήπνηε ζηνλ παγθόζκην ηζηό, απιά επηιέγνληαο κε ην δείθηε ηνπ πνληηθηνύ πάλσ ζε κηα ιέμε ή θξάζε. Η HTML δηαζέηεη ην ζηνηρείν a γηα ηελ πινπνίεζε ηνπ κεραληζκνύ ησλ ππεξζπλδέζκσλ. Σηνλ θώδηθα ησλ γξακκώλ (θαη επόκελσλ), ην θείκελν πνπ βξίζθεηαη κεηαμύ ησλ εηηθεηώλ <a href= > </a> απνθηά ηελ ηδηόηεηα ηεο «ζεξκήο πεξηνρήο» (hot spot). Όηαλ αλνίμνπκε ηελ ηζηνζειίδα κε ην θπιινκεηξεηή καο, ε ζεξκή πεξηνρή ηππηθά επηζεκαίλεηαη κε δηαθνξεηηθό ρξώκα ραξαθηήξσλ θαη ππνγξάκκηζε. Όηαλ ν δείθηεο ηνπ πνληηθνύ βξεζεί πάλσ από κηα ζεξκή πεξηνρή ηόηε παίξλεη δηαθνξεηηθή κνξθή (γίλεηαη ζαλ «ρεξάθη»), δείρλνληαο όηη αλ παηήζνπκε ζην ζεκείν εθείλν ζα κεηαθεξζνύκε ζε έλαλ άιιν πξννξηζκό ηνπ παγθόζκηνπ ηζηνύ. Η παξάκεηξνο target θαζνξίδεη όηη ν πόξνο πξννξηζκνύ ζα αλνίμεη ζε κηα λέα θαξηέια ή έλα λέν παξάζπξν ηνπ θπιινκεηξεηή καο, αθήλνληαο έηζη ηελ ηζηνζειίδα εθθίλεζεο αλνηρηή, ζηε δηάζεζε ηνπ ρξήζηε. Κάζε πόξνο ηνπ παγθόζκηνπ ηζηνύ, όπσο εηθόλεο, γξαθηθά, αξρεία, βίληεν, θ.ιπ. είλαη πξνζπειάζηκνο κέζσ ηεο δηεύζπλζήο ηνπ ε νπνία νλνκάδεηαη URL (Uniform Resource Locator, Οκνηόκνξθνο Εληνπηζηήο Πόξνπ). Γξάθνληαο ην URL ελόο πόξνπ σο ηηκή ζηελ παξάκεηξν href ηνπ ζηνηρείνπ a θάλεη ην ζύλδεζκό καο ηθαλό λα καο κεηαθέξεη ζε νπνηαδήπνηε ππνζηεξηδόκελε από ην θπιινκεηξεηή πεγή πεξηερνκέλνπ. Από ηελ άιιε, πεξηθιείνληαο νπνηνδήπνηε (ζρεδόλ) πεξηερόκελν κέζα ζε εηηθέηεο <a href= URL > </a> ζα ην κεηαηξέςεη ζε ζεξκή πεξηνρή, αξθεί ην πεξηερόκελν απηό λα θαίλεηαη ζην παξάζπξν ηνπ θπιινκεηξεηή, γηαηί όπσο ζα δνύκε παξαθάησ κπνξνύκε Άριςτοσ Παςιάσ Σελίδα 2

3 λα θξύςνπκε ηκήκαηα ηνπ πεξηερνκέλνπ κηαο ηζηνζειίδαο. Έηζη κπνξνύκε λα δεκηνπξγήζνπκε ππεξζπλδέζεηο όπνπ παηώληαο πάλσ ζε θείκελν, εηθόλα, γξαθηθό, πίλαθα ή άιιν πεξηερόκελν, κπνξνύκε λα θνξηώζνπκε ζην θπιινκεηξεηή καο νπνηνδήπνηε ππνζηεξηδόκελν πεξηερόκελν, όπσο θείκελα, εηθόλεο, θηλνύκελα ζρέδηα, έγγξαθα, εθαξκνγέο πνιπκέζσλ, θ.α. Μηα κηθξή παπαηήπηζη: όηαλ ην ζεκείν εθθίλεζεο ελόο ππεξζπλδέζκνπ είλαη θείκελν, ηόηε νλνκάδεηαη «ζεξκή ιέμε», ελώ όηαλ είλαη εηθόλα ή γξαθηθό, νλνκάδεηαη «ζεξκή πεξηνρή». Ελδηαθέξνλ παξνπζηάδνπλ θαη νη θαλόλεο CSS πνπ ζπλαληνύκε ζε απηό ην παξάδεηγκα, θαζώο κεηακνξθώλνπλ κηα θσιηαζκέλε ιίζηα ζε έλα ζύλνιν από πιαίζηα. Κανόναρ display: inline-block; height: 1.2em; margin: 2px; padding: 10px; border: 4px double coral; background-color: lightgreen; outline-style: dotted; outline-color: orange; Επιλογέαρ a:active li:hover ol li:hover a:hover a:visited Πεπιγπαθή Τν θάζε ζηνηρείν ηεο ιίζηαο ζα εκθαληζηεί σο έλα κπινθ ην νπνίν ζα επηηξέπεη ζηα ππόινηπα ζηνηρεία ηεο ιίζηαο λα ζηαζνύλ δίπια ηνπ. Τν ύςνο ηνπ ζηνηρείνπ ηεο ιίζηαο ζα είλαη ζην 120% ηνπ ηππηθνύ ύςνπο ηνπ θεηκέλνπ. Πεξηζώξην 2px. Γέκηζκα κεηαμύ πεξηερνκέλνπ θαη νξίνπ πεξηγξάκκαηνο ζηα 10px. Πεξίγξακκα δηπιήο γξακκήο, πάρνπο 4px, ρξώκαηνο θνξαιιί. Χξώκα θόληνπ αλνηρηό πξάζηλν. Σηπι πεξηγξάκκαηνο κε ζηηγκέο. Χξώκα πεξηγξάκκαηνο πνξηνθαιί. Πεπιγπαθή Έλαο ελεξγόο ζύλδεζκνο (ηε ζηηγκή πνπ ηνλ παηνύκε). Όηαλ ν δείθηεο ηνπ πνληηθηνύ βξίζθεηαη πάλσ από έλα νπνηνδήπνηε ζηνηρείν li. Όηαλ ν δείθηεο ηνπ πνληηθηνύ βξίζθεηαη πάλσ από έλα ζηνηρείν li ην νπνίν «αλήθεη» ζε έλα ζηνηρείν ol. Όηαλ ν δείθηεο ηνπ πνληηθηνύ βξίζθεηαη πάλσ από έλα νπνηνδήπνηε ζηνηρείν a. Όηαλ έρνπκε ήδε επηζθεθζεί ην ζπγθεθξηκέλν ζύλδεζκν. Άριςτοσ Παςιάσ Σελίδα 3

4 Άριςτοσ Παςιάσ Σελίδα 4

5 Άριςτοσ Παςιάσ Σελίδα 5

6 Άριςτοσ Παςιάσ Σελίδα 6

7 Η JavaScript, γνωστή και ως ECMAScript, είναι μία δυναμική γλώσσα προγραμματισμού. Χρησιμοποιείται συχνότερα σε φυλλομετρητές επιτρέποντας την εκτέλεση σεναρίων για την αλληλεπίδραση με το χρήστη, τον έλεγχο του φυλλομετρητή, την ασύγχρονη επικοινωνία και τη μεταβολή του εγγράφου που προβάλλεται εκείνη τη στιγμή. Χρησιμοποιείται επίσης για την ανάπτυξη σεναρίων που εκτελούνται στην πλευρά του εξυπηρετητή, για τη δημιουργία παιχνιδιών, αλλά και για τη δημιουργία desktop και mobile εφαρμογών. Wikipedia: href=" Οι γλώσσες Perl είναι υψηλού επιπέδου, γενικού σκοπού, διερμηνευόμενες, δυναμικές γλώσσες προγραμματισμού. Η οικογένεια των γλωσσών Perl περιλαμβάνει της γλώσσες Perl 5 και Perl 6. Ο όρος Perl δεν είναι ακρωνύμιο, αλλά συχνά του αποδίδεται το "Practical Extraction and Reporting Language". Η Perl αναπτύχθηκε από τον Larry Wall ως μία γενικού σκοπού γλώσσα σεναρίων για την παραγωγή αναφορών στο λειτουργικό σύστημα Unix. Η Perl 6, η οποία αποτελεί ανασχεδιασμό της Perl 5, εξελίχθηκε σε μία χωριστή γλώσσα. Έτσι οι δύο γλώσσες συνεχίζουν να εξελίσσονται χωριστά. Οι γλώσσες Perl δανείζονται λειτουργίες από άλλες γλώσσες, όπως η C, η γλώσσα σεναρίων κελύφους (sh), η AWK και η sed. Η Perl 5 έγινε γνωστή στα τέλη της δεκαετίας του 1990, ως γλώσσα σεναρίων CGI λόγω των εξαιρετικών δυνατοτήτων της στην επεξεργασία κανονικών εκφράσεων και συμβολοσειρών. <a href=" Η Rexx (REstructured extended executor) είναι μια διερμηνευόμενη γλώσσα προγραμματισμού η οποία αναπτύχθηκε στην IBM από τον Mike Cowlishaw. Είναι μία δομημένη, υψηλού επιπέδου γλώσσα προγραμματισμού που σχεδιάστηκε ώστε να βοηθά την ανάγνωση και μάθηση του κώδικά της. Η Rexx χρησιμοποιείται ευρέως ως γλώσσα σεναρίων και μακροεντολών, ενώ συχνά χρησιμοποιείται και για επεξεργασία δεδομένων και δημιουργία αναφορών. Αυτές οι ομοιότητες με την Perl σημαίνουν ότι η Rexx λειτουργεί καλά και σε εφαρμογές CGI <a href=" Η PHP είναι μία γλώσσα σεναρίων στην πλευρά του εξυπηρετητή. Σχεδιάστηκε για την ανάπτυξη ιστοσελίδων, αλλά χρησιμοποιείται και ως γλώσσα προγραμματισμού γενικού σκοπού. Εμπνευστής της είναι ο Rasmus Lerdorf, ενώ πλέον αναπτύσσεται από το <em>the PHP Group</em>. Αρχικά το ακρωνύμιο PHP σήμαινε <em>personal Home Page</em>, ενώ πλέον σημαίνει <em>php: Hypertext Preprocessor</em>, το οποίο αποτελεί και ένα αναδρομικό ακρωνύμιο. Ο κώδικας PHP μπορεί να αναμιχθεί με κώδικα HTML ή άλλα πλαίσια και μηχανές ανάπτυξης ιστοσελίδων. Τον κώδικα PHP επεξεργάζεται ένας διερμηνέας PHP, ο οποίος συνήθως υλοποιείται με τη μορφή ενός αρθρώματος (module) του εξυπηρετητή ή ως ένα πρόγραμμα CGI. Μετά την εκτέλεση του κώδικα Άριςτοσ Παςιάσ Σελίδα 7

8 PHP, ο εξυπηρετητής ιστοσελίδων στέλνει το αποτέλεσμα στον πελάτη, συνήθως με τη μορφή μίας ιστοσελίδας ή τμήματός της. Για παράδειγμα, ο κώδικας PHP μπορεί να παράγει τον κώδικα HTML μιας ιστοσελίδας, μια εικόνα ή άλλο περιεχόμενο. <a href=" Η τεχνολογία JSP βοηθά τους προγραμματιστές να δημιουργούν δυναμικές ιστοσελίδες βασισμένες σε έγγραφα τύπου HTML, XML, κ.α. Κυκλοφόρησε το 1999 από τη Sun Microsystems. Είναι παρόμοια με την PHP, με τη διαφορά ότι βασίζεται στη γλώσσα προγραμματισμού Java. <a href=" Άριςτοσ Παςιάσ Σελίδα 8