Telecommunications με τη χρήση του. "Κατασκευή ιστοσελίδας. προγράμματος Adobe Dreamweaver" Τ.Ε.Ι. ΠΕΙΡΑΙΑ ΤΙΤ ΛΟΣ ΠΤΥΧΙΑΚΗΣ ..._

Μέγεθος: px
Εμφάνιση ξεκινά από τη σελίδα:

Download "Telecommunications με τη χρήση του. "Κατασκευή ιστοσελίδας. προγράμματος Adobe Dreamweaver" Τ.Ε.Ι. ΠΕΙΡΑΙΑ ΤΙΤ ΛΟΣ ΠΤΥΧΙΑΚΗΣ ..._"

Transcript

1 .. Τ.Ε.Ι. ΠΕΙΡΑΙΑ ΤΜΗΜΑ ΗΛΕΚΤΡΟΝΙΚΩΝ ΥΠΟΛΟΓΙΣΤΙΚΩΝ ΣΥΣΤΗΜΑΤΩΝ...._ ΤΙΤ ΛΟΣ ΠΤΥΧΙΑΚΗΣ "Κατασκευή ιστοσελίδας Telecommunications με τη χρήση του προγράμματος Adobe Dreamweaver" ΣΠΟΥΔΑΣΤΗΣ: ΤΣΙΓΚΡΙΜΑΝΗΣ ΒΑΣΙΛΕΙΟΣ (ΑΜ : 32644) ΕΙΠΒΛΕΠΩΝ: ΓΙΑΝΝΑΚΟΠΟΥ ΛΟΣ ΠΑΝΑΓΙΩΤΗΣ ΒΙΒΛΙΟΘΗΚΗ ΤΕΙ ΠΕΙΡΑΙΑ

2 Περιεχόμενα 1 το ΔΙΑΔΙΚΤΥΟ ΚΑΙ ο ΠΑΓΚΟΣΜΙΟΣ ΙΣΤΟΣ ΤΟ ΔΙΑΔΙΚΤΥΟ Η ιστορία του διαδικτύου Το ΠΡΩΤΟΚΟΛΛΟ ΤCΡ/ΙΡ ΔΙΑΔΙΚΤΥΑΚΑ ΠΡΩΤΟΚΟΛΛΑ ΚΑΙ ΥΠΗΡΕΣΙΕΣ ΠΑΓΚΟΣΜΙΟΣ IΣTOΣ(WORLD WΙDE WEB (WWW)) ΠΗΓΕΣ ΚΕΦΑΛΑΙΟΥ ΟΙ ΙΣΤΟΣΕΛΙΔΕΣ Η IΣΤΟΣΕΛΙΔΑ οι ΚΑΤΗΓΟΡΙΕΣ ΤΩΝ ΙΣΤΟΣΕΛΙΔΩΝ Στατικές Ιστοσελίδες Δυναμικές Ιστοσελίδες Βασικές Διαφορές μεταξύ Στατικών και Δυναμικών Ιστοσελίδων... 1 Ο 2.3 ΠΗΓΕΣ ΚΕΦΑΛΑΙΟΥ ΤΕΧΝΟΛΟΓΙΕΣ ΑΝΑΠΤΥΞΗΣ ΙΣΤΟΣΕΛΙΔΩΝ HTML Δημιουργία και δομή ενός εγγράφου HTML Ετικέτες HTML και ιδιότητες CSS (CASCADING STYLE SHEETS) Χρήση CSS Σύνταξη CSS Οι επιλογείς CSS Εισαγωγή CSS στη σελίδα μας Ιδιότητες CSS JAVASCRIPT Εισαγωγή Jaνascrίpt στη σελίδα Jaνascrίpt και Jaνa AJAX ΠΗΓΕΣ ΚΕΦΑΛΑΙΟΥ ΤΡΟΠΟΙ ΚΑ ΤΑΣΚΕΥΗΣ ΙΣΤΟΣΕΛΙΔΩΝ MΙCROSOFT FRONTPAGE JOOMLA DRUPAL ADOBE DREAMWEAVER ΠΗΓΕΣ ΚΕΦΑΛΑΙΟΥ ΕΠΙΛΟΓΗ ΤΩΝ ΕΡΓΑΛΕΙΩΝ ΓΙΑ ΤΗ ΚΑΤΑΣΚΕΥΗ ΤΗΣ ΙΣΤΟΣΕΛΙΔΑΣ ΕΠΙΛΟΓΗ ΕΡΓΑΛΕΙΟΥ ΑΝΑΠΤΥΞΗΣ ΙΣΤΟΣΕΛΙΔΩΝ ΕΠΙΛΟΓΗ ΠΡΟΓΡΑΜΜΑΤΩΝ ΕΠΕΞΕΡΓΑΣΙΑΣ ΕΙΚΟΝΩΝ ΔΗΜΙΟΥΡΓΙΑ ΙΣΤΟΣΕΛΙΔΑΣ ΙΑΤΡΕΙΟΥ ΜΙΚΡΩΝ ΖΩΩΝ ΡΙΣΜΟΣ ΕΝΟΣ S ΙΤΕ ΣΤΟ DREAMWEAVER CS

3 6.2 ΔΗΜΙΟΥΡΓΙΑ ΣΕΛΙΔΑΣ, ΒΑΣΙΣΜΕΝΗ ΣΤΟ ΠΡΟΤΥΠΟ-ΤΕΜΡLΑΤΕ ΑΡΧΙΚΗ ΣΕΛΙΔΑ ΠΗΓΕΣ ΚΕΦΑΜΙΟΥ

4 1 Το Διαδίκτυο και ο Παγκόσμιος ιστός 1.1 Το Δ ι αδ ίκτ υο Το Διαδίκτυο (Intemet) είναι ένα παγκόσμιο σύστημα διασυνδεδεμένων δικτύων υπολογιστών, οι οποίοι χρησιμοποιούν καθιερωμένη ομάδα πρωτοκόλλων, η οποία συχνά αποκαλείται TCP/IP, για να επικοινωνούν και να ανταλλάσσουν πακέτα. Εξυπηρετεί εκατομμύρια χρήστες καθημερινά σε ολόκληρο τον κόσμο.είναι ένα τεράστιο μέσο μαζικής επικοινωνίας και διαφήμισης. Η υπόσταση του ως μέσο είναι διπλή και χωρίζεται στην υλική, τον συνδυασμό δηλαδή δικτύων βασισμένων σε λογισμικό και υλικό, και την άυλη, την προσφορά του Διαδικτύου στην κοινωνία ως μέσο. Το Διαδίκτυο αποτελεί πλέον μέρος της καθημερινής μας πραγματικότητα, μιας και η διείσδυση του στη ζω1ί μας είναι συνεχής και εμφανής. Δεν υπάρχει πλέον μέσ ο, έντυπης ή ηλεκτρονικής μορφής, που να μην αναφέρεται στο διαδίκτυο. Μέσα από το διαδίκτυο, διακινούνται καθημερινά όλες ο ι ειδήσεις, διενεργούνται συναλλαγές και ολόκληρα βιβλία, βρίσκονται αρχειοθετημένα στους ανά τον κόσμο διασυνδεδεμένους υπολογιστές που το αποτελούν. Θα ήταν καλύτερα να δούμε πως ξεκίνησε το Intemet και έφτασε στην σημερινή του μορφή Η ιστορία του διαδικτύου Η ιδέα για τη δημιουργία του ξεκίνησε καθαρά για στρατιωτικό όφελος. Ήταν μια ιδέα απλή αλλά άκρως ευφυέστατη: ηλεκτρονικοί υπολογιστές, που να μπορούν να συνεννοηθούν με άλλους ηλεκτρονικούς υπολογιστές. Φυσικά την εποχή εκείνη τον όρο "υπολογιστές" τον αποτελούσαν μηχανήματα που ο όγκος τους καταλάμβανε ένα ολόκληρο δωμάτιο, ζύγιζαν τόνους και ο αποθηκευτικός τους χώρος, ήταν το άκρως αντίθετο του όγκου τους. Εικόνα l. l - Μέγεθος υπολογ ιστή στη δεκαετία του '60.

5 Το σημερινό Internet αποτελεί εξέλιξη του ARPANET, ενός δικτύου που άρχισε να αναπτύσσεται πειραματικά στα τέλη της δεκαετίας του 60 στις ΗΠΑ. ο Δεκαετία '60: ένα ενδιαφέρον πείραμα ξεκινά Στα πανεπιστήμια των ΗΠΑ οι ερευνητές ξεκινούν να πειραματίζονται με τη διασύνδεση απομακρυσμένων υπολογιστών μεταξύ τους. Το δίκτυο ARP ΑΝΕΤ γεννιέται το 1969 με σκοπό να συνδέσει το Υπουργείου Άμυνας με στρατιωτικούς ερευνητικούς οργανισμούς και να πειραματιστεί για τη μελέτη της αξιόπιστης λειτουργίας των δικτύων. Στην αρχική του μορφή, το πρόγραμμα πειραματιζόταν με μια νέα τεχνολογία γνωστή ως μεταγωγή πακέτων (packet switching), σύμφωνα με την οποία τα προς μετάδοση δεδομένα κόβονται σε πακέτα και πολλοί χρήστες μπορούν να μοιραστούν την ίδια επικοινωνιακή γραμμή. Στόχος ήταν η δημιουργία ενός διαδικτύου που θα εξασφάλιζε την επικοινωνία μεταξύ απομακρυσμένων δικτύων, έστω και αν κάποια από τα ενδιάμεσα συστήματα βρίσκονταν προσωρινά εκτός λειτουργίας. Κάθε πακέτο θα είχε την πληροφορία που χρειάζονταν για να φτάσει στον προορισμό του, όπου και θα γινόταν η επανασύνθεσή του σε δεδομένα τα οποία μπορούσε να χρησιμοποιήσει ο τελικός χρήστης. Το παραπάνω σύστημα θα επέτρεπε σε υπολογιστές να μοιράζονται δεδομένα και σε ερευνητές να υλοποιήσουν το ηλεκτρονικό ταχυδρομείο. ο Δεκαετία '70: οι πρώτ ες συνδέ σ εις Το 1973, ξεκινά ένα νέο ερευνητικό πρόγραμμα που ονομάζεται Internetting Project (Πρόγραμμα Διαδικτύωσης) με στόχο να ξεπεραστούν οι διαφορετικοί τρόποι που χρησιμοποιεί κάθε δίκτυο για να διακινεί τα δεδομένα του. Η διασύνδεση ανόμοιων δικτύων δηλαδή και η ομοιόμορφη διακίνηση δεδομένων από το ένα δίκτυο στο άλλο. Από την έρευνα προέκυψε μια νέα τεχνική, το Internet Protocol (ΙΡ) (Πρωτόκολλο Διαδικτύωσης), από την οποία θα πάρει αργότερα το όνομά του το Internet. Διαφορετικά δίκτυα που χρησιμοποιούν όμως το κοινό πρωτόκολλο ΙΡ μπορούν να συνδέονται και να αποτελούν ένα διαδίκτυο. Σε ένα δίκτυο ΙΡ όλοι οι υπολογιστές είναι ισοδύναμοι, οπότε τελικά οποιοσδήποτε υπολογιστής του διαδικτύου μπορεί να επικοινωνεί με οποιονδήποτε άλλον. Επίσης, σχεδιάζεται μια άλλη τεχνική για τον έλεγχο της μετάδοσης των δεδομένων, το Transmission Control Protocol (TCP) (Πρωτόκολλο Ελέγχου Μετάδοσης). Ορίζονται προδιαγραφές για τη μεταφορά αρχείων μεταξύ υπολογιστών (FTP) και για το ηλεκτρονικό ταχυδρομείο ( ). Σταδιακά συνδέονται με το ARPANET, ιδρύματα από άλλες χώρες, όπως το Uniνersity College of London (Αγγλία) και το Royal Radar Establishment (Νορβηγία). ο Δεκαετία '80: ένα παγκόσμιο δίκτυο για την ακαδημαϊκή κοινότητα Το 1983, το πρωτόκολλο TCP/IP (συνδυασμός των TCP και ΙΡ προωτοκόλλων) αναγνωρίζεται ως πρότυπο από το Υπουργείο Άμυνας των ΗΠΑ. Η έκδοση του λειτουργικού συστήματος Berkeley UNIX το οποίο περιλαμβάνει το TCP/IP συντελεί στη γρήγορη εξάπλωση της διαδικτύωσης των υπολογιστών. Εκατοντάδες Πανεπιστήμια συνδέονται με το ARP ΑΝΕΤ, το οποίο επιβαρύνεται πολύ και το 1983, χωρίζεται σε δύο τμήματα: στο MILNET (για στρατιωτικές επικοινωνίες) και στο νέο ARPANET (για χρήση αποκλειστικά από την πανεπιστημιακή κοινότητα και συνέχιση της έρευνας στη δικτύωση). Το 1985, το National Science Foundation (NSF) δημιουργεί ένα δικό του γρήγορο δίκτυο, το NSFNET χρησιμοποιώντας το πρωτόκολλο TCP/IP, προκειμένου να συνδέσει πέντε

6 κέντρα υπερ-υπολογ ιστών μεταξύ τους και με την υπόλοιπη επιστημονική κοινότητα. Στα τέλη της δεκαετίας του ' 80, ό λο και περισσότερες χώρες συνδέονται στο NSFNET (Καναδάς, Γαλλία, Σουηδία, Αυστραλία, Γερμανία, Ιταλία, κ.α.). Χιλιάδες πανεπιστήμια και οργανισμοί δημιουργούν τα δικά τους δίκτυα και τα συνδέουν πάνω στο παγκόσμιο αυτό δίκτυο το οποίο αρχίζει να γίνεται γνωστό σαν INTERNET και να εξαπλώνεται με τρομερούς ρυθμούς σε ολόκληρο τον κόσμο. Το 1990, το ARP ΑΝΕΤ πλέον καταργείται. ο Δεκαετία '90: ένα παγκόσμιο δίκτυο για όλους Όλο και περισσότερες χώρες συνδέονται στο NSFNET, μεταξύ των οποίων και η Ελλάδα το Το 1993, το εργαστήριο CERN στην Ελβετία παρουσιάζει το World Wίde Web (WWW) (Παγκόσμιο Ιστό). Παράλληλα, εμφανίζονται στο Internet διάφορα εμπορικά δίκτυα που ανήκουν σε εταιρίες παροχής υπηρεσιών Internet (Internet Servίce Proνίders - ISP) και προσφέρουν πρόσβαση στο Internet για όλους. Οποιοσδήποτε διαθέτει PC και mοdemμπορεί να συνδεθεί με το Internet σε τιμές που μειώνονται διαρκώς Το 1995, το NSFNET καταργείται πλέον επίσημα και το φορτίο του μεταφέρεται σε εμπορικά δίκτυα. Έτος Γεγονός 1957 Δημιουργία ARPA 1969 Δημιουργία ARPAnet 1982 Υιοθέτηση του TCP/IP 1983 Ενσωμάτωση του TCP/IP στο UΝα 1986 Δημιουργία του NSFnet 1990 Δημιουργία του ΗΤΤΡ στο CERN 1992 Κυκλοφορία του Mosaίc 1993 Κυκλοφορία του NETSCAPE ΝΑ VIGATOR 1995 Κυκλοφορία του INTERNET EXPLORER Εικόνα Η ιστορία του Internet στον χρόνο. Έτος Αριθμός Υπολογ ιστών , , , , ,000, ,ΟΟΟ, ΟΟΟ-175,000, >200,000, % του πλανήτη θα είναι στο διαδίκτυο Εικόνα Η εξάπλωση του Internet στον χρόνο. Page6

7 1.2 Το πρωτό κολλο TCP/IP Το "'TCPIIP" (Transmίssίon Control Protocolllnternet Protocol- Πρωτόκολλο Ελέγχου Μετάδοσης και πρωτόκο)λο του Internet)' είναι μια συλλογή πρωτοκόλλων επικοινωνίας στα οποία βασίζεται το Διαδίκτυο. Χρησιμοποιείται για την επικοινωνία των κόμβων που συνδέονται σε ένα δίκτυο. Η ονομασία TCP/IP προέρχεται από τις συντομογραφίες των δυο κυριότερων πρωτοκόλλων το TCP και το ΙΡ. Τα πρωτόκολλα TCP και ΙΡ παρέχουν τους απαραίτητους συντακτικούς και σημασιολογικούς κανόνες για την επικοινωνία. Περιέχουν λεπτομέρειες για την μορφή που θα έχουν τα μηνύματα, περιγράφουν πώς ανταποκρίνεται ένας υπολογιστής σε ένα μήνυμα που λαμβάνει και προσδιορίζουν τον τρόπο χειρισμού των σφαλμάτων από τον υπολογιστή. Το πρωτόκολλο ΙΡ είναι υπεύθυνο για το πέρασμα του πακέτου από υπολογιστή σε υπολογιστή. Καθώς το ΙΡ δρομολογεί το κάθε πακέτο μέσα στο δίκτυο, προσπαθεί να το παραδώσει. Δεν υπάρχει όμως εγγύηση ότι το πακέτο θα φτάσει στον προορισμό του, ούτε ότι τα διάφορα πακέτα θα φτάσουν με τη σειρά με την οποία στάλθηκαν, ούτε ότι το περιεχόμενο των πακέτων θα φτάσει αναλλοίωτο. Το TCP εγγυάται ότι τα πακέτα θα παραδοθούν στον προορισμό τους, ότι θα φτάσουν με τη σειρά με την οποία στάλθηκαν και ότι τα περιεχόμενα των πακέτων θα φτάσουν αναλλοίωτα (δηλ. όπως στάλθηκαν). Η λειτουργία του έχει ως εξής: γίνεται αρίθμηση στο κάθε πακέτο δεδομένων. Ο υπολογιστής οποίος κάνει την αποστολή μα και αυτός που περιμένει για λήψη, παρακολουθούν τους αριθμούς των πακέτων και ανταλλάσσουν μεταξύ τους πληροφορίες. Ο παραλήπτης λαμβάνει το πρώτο πακέτο, το δεύτερο, κλπ. Σε περίπτωση που παρουσιαστεί κάποιο πρόβλημα στο δίκτυο είτε χαθεί κάποιο πακέτο κατά τη διάρκεια της μετάδοσης, το ξαναζητάει και ο αποστολέας είναι υπεύθυνος για την αναμετάδοση του. Ο παραλήπτης ελέγχει επίσης αν το περιεχόμενο των πακέτων φτάνει σωστά. 1.3 Διαδ ι κτυακά πρω τόκολλα και υπηρεσίες Μερικά από τα πιο γνωστά διαδικτυακά πρωτόκολλα είναι τα TCP, ΙΡ, UDP, FTP, ΙΜΑΡ, ΡΟΡ3, SMTP, DNS, SMTP, ΗΤΤΡ, HTTPS, SSL, SSH ενώ.οι πιο δημοφιλείς και διαδεδομένες υπηρεσίες εφαρμογών του διαδικτύου είναι οι εξής: Παγκόσμιος Ιστός ή Ιστός (World Wide Web). Ο Ιστός δίνει τη δυνατότητα στους χρήστες να εμφανίζουν έγγραφα που περιέχουν κείμενο και γραφικά, καθώς και να ακολουθούν υπέρ συνδέσμους για να κινηθούν μεταξύ των εγγράφων. Ο 1 στός αναπτύχθηκε σ ε τέτοιο βαθμό που έγ ινε η μεγαλύτερη πηγή διακίνησης πληροφοριών στο παγκόσμιο Internet, και εξακολουθεί να κατέχει κυρίαρχη θέση. Σύμφωνα με ορ ισμένους παροχείς υπηρεσιών, στον Ιστό οφείλεται το 80% της κυκλοφορίας πληροφοριών στο Internet. Ηλεκτρονικό ταχυδρομείο (Electronic mail, ). Το ηλεκτρονικό ταχυδρομείο δίνει τη δυνατότητα στο χρήστη να συνθέσει ένα μήνυμα και να στείλει αντίγραφό του σε μεμονωμένα άτομα ή σε ομάδες ατόμων. Ένα άλλο τμήμα δίνει τη δυνατότητα στους χρή στες να διαβάσουν τα μηνύματα που έχουν λάβει. Το ηλεκτρονικό ταχυδρομείο έχει γνωρίσει τό σο μεγάλη επιτυχία, ώστε πολλοί χρή στες του Internet βασίζονται σε αυτό για τη διεκπεραίωση του μεγαλύτερου μέρους της αλληλογραφίας τους. Ένας βασικός λόγος της επιτυχίας του είναι ο προσεκτικός τρόπος σχεδίασής του, το πρωτόκολλο καθιστά αξιόπιστη τη διαδικασία παράδοσης του μηνύματος. Δεν είναι μόνο το σύστημα ηλεκτρονικού ταχυδρομείου του αποστολέα το οποίο έρχεται σε άμεση επαφή με το αντίστοιχο σύστημα του παραλήπτη, αλλά και το πρωτόκολλο ορίζει ότι το μήνυμα δε θα μπορεί να διαγραφεί από τον αποστολέα μέχρι να αποθηκεύσει μόνιμα ο παραλήπτης το αντίγραφό του. Μεταφορά αρχείων (File transfer). Η εφαρμογή μεταφοράς αρχείων δίνει τη δυνατότητα στο χρήστη να στέλνει και να λαμβάνει αντίγραφα αρχείων δεδομένων. Η μεταφορά αρχείων είναι μια

8 από τις πιο ευρέως χρησιμοποιούμενες, υπηρεσίες εφαρμογών στο Internet. Παρά το ότι τα μικρά αρχεία μπορούν πλέον να επισυνάπτονται σε ένα μήνυμα ηλεκτρονικού ταχυδρομείου, η υπηρεσία μεταφοράς αρχείων εξακολουθεί να είναι απαραίτητη για τη διαχείριση των μεγάλων αρχείων. Το σύστημα προβλέπει ένα τρόπο για έλεγχο των εξουσιοδοτημένων χρηστών, ή ακόμα και για ολικό αποκλεισμό της πρόσβασης. Όπως το ηλεκτρονικό ταχυδρομείο, έτσι και η μεταφορά αρχείων μέσω ενός διαδικτύου TCP/IP είναι αξιόπιστη, καθώς οι δυο μηχανές που συμμετέχουν στη διαδικασία έχουν άμεση επικοινωνία χωρίς να βασίζονται σε ενδιάμεση αντιγραφή του αρχείου από άλλες μηχανές. Τηλεσύνδεση (Remote login). Η τηλεσύνδεση δίνει τη δυνατότητα σε ένα χρήστη να συνδεθεί με μια απομακρυσμένη μηχανή και να δημιουργή σ ει αλληλεπιδραστική περίοδο συνδεδεμένης λειτουργίας (login session). Μέσω της τηλεσύνδεσης, η οθόνη του χρήστη συνδέεται κατευθείαν με την απομακρυσμένη μηχανή: κάθε πληκτρολόγηση του χρήστη μεταφέρεται στην απομακρυσμένη μηχανή και, αντιστοίχως, κάθε χαρακτήρας που στέλνει η απομακρυ σ μένη μηχανή εμφανίζε ται στην οθόνη του χρήστη. Μόλις τερματίσει η περίοδος τηλεσύνδεσης, η εφαρμογή επαναφέρει το χρήστη στο τοπικό σύστημα. 1.4 Παγκόσμιος ι στός (World Wide Web (WWW)) Το World Wide Web (WWW) - Παγκόσμιος Ι σ τός, είναι το δίκτυο των συνδεδεμένων υπολογιστών και δικτύων σε παγκόσμ ια κλίμακα, το οποίο χρησιμοποιεί συγκεκριμένη ομάδα πρωτοκόλλων επικοινωνίας, γνω στή ως 'ΉΠΡ (Hypertext Transfer Protocol)". Κάθε δίκτυο-δομική μονάδα του διαδικτύου αποτελείται από συνδεδεμένους υπολογιστές σε τοπικό επίπεδο. Αυτά τα δίκτυα με τη σειρά τους συνδέονται σε ευρύτερα δίκτυα, όπως εθνικά και υπερεθνικά. Το ευρύτερο δίκτυο στον κόσμο λέγεται παγκόσμιος ιστός το οποίο είναι μοναδικό (δηλαδή δεν υπάρχουν παραπάνω από ένα δίκτυα υπολογιστών παγκόσμιας κλίμακας), και περιλαμβάνει τόσο τα γήινα δίκτυα, όσο και τα δίκτυα των δορυφόρων της και άλλων διαστημικών συσκευών που είναι συνδεδεμένα σε αυτό. Η τεχνολογία του ιστού καθιστά δυνατή την δημιουργία "υπερκειμένων", μία διασύνδεση δηλαδή πάρα πολλών μη ιεραρχημένων στοιχείων που παλαιότερα 11ταν απομονωμένα. Τα στοιχεία αυτά μπορούν να πάρουν και άλλες μορφές πέραν της μορφής του γραπτού κειμένου, όπως εικόνας και ήχου. Η τεχνολογία του ιστού δημιουργήθηκε το 1989 από τον Βρετανό Τιμ Μπέρνερς Λη, που εκείνη την εποχή εργαζόταν στον Ευρωπαϊκό Οργανισμό Πυρηνικών Ερευνών (CERN) στην Γενεύη της Ελβετίας. Το όνομα που έδωσε στην εφεύρεσή του ο ίδιος ο Lee είναι World Wίde Web, όρος γνωστό ς στους περισσότερους από το "WWW". Αυτό που οδήγησε τον Lee στην εφεύρεση του Παγκόσμιου ιστού ήταν το όραμά του για ένα κό σ μο ό που ο καθένας θα μπορούσε να ανταλλάσσει πληροφορίες και ιδέες άμε σ α προ σ βάσιμες από τους υπολοίπους. Το σημείο στο οποίο έδωσε ιδιαίτερο βάρος ήταν η μη ιεράρχηση των διασυνδεδεμένων στοιχείων. Οραματίστηκε κάθε στοιχείο, κάθε κόμβο του ιστού ίσο ως προς την προσβασιμότητα με τα υπόλοιπα. Αν σκεφτεί, όμως, κανείς τον βαθμό ιεράρχησης με τον οποίο λειτουργούν οι μηχανές αναζήτησης του ιστού, όπως για παράδειγμα το google, γίνεται εύκολα κατανοητό ότι στην πράξη κάτι τέτοιο δεν συμβαίνει, τουλάχιστον στον βαθμό που το είχε οραματιστεί ο Lee.

9 1.5 Πηγές Κεφαλαίου 1 Διαδίκτυο httρ: //el. \νikiρedia.oι g/wiki/tcp/ip l1ttp ://www 2. u tlι. gr/ ma inlhel p/he lp-desk/in tern et/i nternet 1. htιn l uth. gr/1nain/hel p/hel p-desk/i 11te111et/internet2.11tm1 l1ttp: //www2.uth. gr/main/help/help-desk/internet/internet3.lιtml 11ttp :/! ww w 2. ιι th. gr/111a ί n/l1e lp/he lp-desk/in ten1et/i nte111et 4.htιη1 http: //11ennes.ιli.ιιoa.gr/exe activities/diadiktio/ 11.lιtml l1ttp://el. \Vikipedia.org /wiki /Παvκόσuιoς f στός 2 Οι Ιστοσελίδες 2.1 Η Ιστοσελίδα Μια ιστοσελίδα είναι ένα είδος εγγράφου του παγκόσμιου ιστού (WWW) που περιλαμβάνει πληροφορίες με την μορφή κειμένου, υπερκειμένου, εικόνας, βίντεο και ήχου. Οι πληρο φ ορίες της είναι συνήθως γραμμένες με τη χρήση της γλώσσας HTML(HyperText Markup Language) ή XHTML (Extensible HyperText Markup Language). Περιέχε ι ένα σύνολο από ετικέτες (HTML tags) οι οποίες είναι απλές εντολές που λένε στον φυλλομετρητή πώς πρέπει να φαίνεται η σελίδα όταν την παρουσιάσει ο φυλλομετρητής (Web browser). Ο φυλλομετρητής διερμηνεύει αυτές τις ετικέτες για να αποφασίσει πώς θα φορμάρει το κείμενο στην οθόνη. 2.2 Οι κατηγορίες των ιστοσελίδων Οι ιστοσελίδες, κατηγοριοποιούνται κυρίως σε δύο μεγάλες κατηγορίες. Στις στατικές (static) και τις δυναμικές (dynamic) Δεν έχουν μεγάλες διαφορές όσο αφορά το οπτικό αποτέλεσμα, όμως οι διαφορές που αφορούν στη λειτουργία και τις δυνατότητές τους είναι πολλές σημαντικές Στατικές Ιστοσελίδες Οι στατικές ιστοσελίδες είναι απλά ηλεκτρονικά "έγγραφα". Μπορούν να περιέχουν απλά κείμενα, διάφορες φωτογραφίες και συνδέσ μους (links), αρχεία για download, κινούμενα σχέδια (animated graphics). Είναι κατάλληλες κυρίως για την δημιουργία "μόνιμων/στατικών παρουσιάσεων", όπου δεν υπάρχει συχνά η ανάγκη τροποποίησης του περιεχομένου τους. Ο χαρακτηρισ μός " στατική", δεν σημαίνει ότι στην σελίδα δεν υπάρχει κίνηση, σημαίνει ότι το περιεχόμενο της κάθε σελίδας είναι σταθερό και συγκεκ ρ ιμένο. Το μειονέκτημα τους είναι ότι είναι πολύπλοκη η αλλαγή του περιεχομένου της ιστοσελίδας. Αυτό συμβαίνει γιατί για να τροποποιηθεί μια στατική ιστοσελίδα, πρέπει να γίνουν επεμβάσεις απευθείας πάνω στην ιστοσελίδα, με κάποιο σχετικό πρόγραμμα (html editor είτε απλό είτε WYSIWYG). Μία στατική ιστοσελίδα, είναι κατάλληλη κυρίως για μικρές παρουσιάσεις στις οποίες σπάνια θα χρειαστεί κάποια αλλαγή ή προσθήκη επιπλέον περιεχομένου στο μέλλον.

10 2.2.2 Δυναμικές Ιστοσελίδες Οι δυναμικές ιστοσελίδες, έχουν πολύ περισσότερες δυνατότητές με τις στατικές, καθώς στην ουσία δεν πρόκειται για ένα απλό ηλεκτρονικό έγγραφο, αλλά για μία εφαρμογή (πρόγραμμα). Συνήθως, χρησιμοποιούν κάποια βάση δεδομένων (database), όπου αποθηκεύουν πληροφορίες και απ' όπου αντλούν το περιεχόμενό τους, ανάλογα με το τι ζητάει ο χρήστης/επισκέπτης σε κάθε του "κλικ". Η χρήση αυτών των βάσεων, είνα ι αυτή που επιτρέπει την εύκολη προσθαφαίρεση περιεχομένου στις δυναμικές ιστοσελίδες, καθώς δεν απαιτείται να επεξεργάζεται κανείς κάθε φορά την ίδια την ιστοσελίδα, αλλά το περιεχόμενο στην βάση δεδομένων και οι υπόλοιπες διαδικασίες γίνονται αυτοματοποιημένα από τον "μηχανισμό" της ιστοσελίδας. Για την εύκολη διαχείριση του περιεχομένου σε μία δυναμική ιστοσελίδα, υπάρχει πρόσθετα στην ιστοσελίδα ένας μηχανισμός "CMS" (Content Management System) μέσω του οποίου η προσθαφαίρεση περιεχομένου μπορεί να γίνει ακόμη και από κάποιον αρχάριο. Φυσικά, η "περιοχή διαχείρισης" της ιστοσελίδας, προστατεύεται με κωδικό πρόσβασης (password), για να αποτρέπεται να εισέλθουν σε αυτή απλοί επισκέπτες της ιστοσελίδας Βασικές Διαφορές μεταξύ Στατικών και Δυναμικών Ιστοσελίδων Πίνακας 1: Διαφορές μεταξύ Στατικών και Δυναμικών Ιστοσελίδων Στατικέ ένου Υψηλή επεκτασιμότητα και εύκολη μελλοντική ανα άθμισ Δυνατότητα σύνδεσης με συστήματα διαχείρησης (για παράδειγμα μπορεί να ενωθεί με σύστημα δια εί σ στόλου ενοικια ό ενων αυτοκιν των Θα επιλέξετε μια στατική ιστοσελίδα εάν : Θέλετε να παρουσιάσετε ή να διαφημίσετε κάτι με πολύ απλό τρόπο. Θα επιλέξετε μια δυναμική ιστοσελίδα εάν: Θέλετε να έχετε καλύτερη οργάνωση του περιεχομένου σας και να το αναβαθμίζεται συχνά προσθέτοντας νέο. Εάν υπάρχει ανάγκη διαχείρισης μελών, ηλεκτρονικής ενημέρωσης των χρηστών σας (newsletters), online κρατήσεις, online πωλήσεις προϊόντων, αλλαγή σε τιμές δωματίων κ.τ.λ 2.3 Πηγές Κεφαλαίου 2 11ttp: //el.wikipedίa.org /\νiki /Iστoσελίδα http: //el.\vikipedia.org/wiki/κατασnυή ιστοσελίδων llttp ://\νww. bloggertips. gr/2011 /03/blog-post 05. htιnl

11 3 Τεχνολογίες ανάπτυξης ιστοσελίδων 3.1 HTML Η HTML είναι η βασική γλώσσα δόμησης των ιστοσελίδων. Αποτελεί την συνένωση των αρχικών HyperText Markup Language (Γλώσσα σήμανσης υπερκειμένου). Αποτελεί εξέλιξη της γλώσσας SGML(Standard Generalized Markup Language), που επινο1ίθηκε από την ΙΒΜ για να λυθεί το πρόβλημα της μη τυποποιημένης εμφάνισης κειμένων στα διάφορα υπολογιστικά συστήματα. Η δημιουργία της HTML, συμπίπτει χρονικά με την ανάπτυξη του world wide web στις αρχές της δεκαετίας του '90. Η τελευταία αναθεώρηση του HTML προτύπου τη στιγμή που δημιουργείται αυτή η εργασία, είναι η HTML5. Η HTML είναι ένα σύνολο κανόνων για την διαμόρφωση της εμφάνισης και του περιεχομένου μιας ιστοσελίδας. Δεν είναι γλώσσα προγραμματισμού, αλλά γλώσσα περιγραφής ιδιοτήτων των στοιχείων που αποτελούν μία ιστοσελίδα. Στον κόσμο των υπολογιστών διακρίνουμε δύο είδη γλω σσών υψηλού επιπέδου: l. Τις γλώσσες προγραμματισμού με τον αυστηρό ορισμό του όρου, όπως για παράδειγμα οι γλώσσες Basic και Java. 2. Οι γλώσσες σήμανσης, οι οποίες αντιμετωπίζονται με διαφορετικό τρόπο από τον υπολογιστή και γενικά αυτό που κάνουν είναι να περιγράφουν το πώς θα γίνει μια εργασία, παρά να εκτελούν την εργασία αυτή καθ ' αυτή. Η HTML σχετίζεται με την έννοια του υπερκειμένου (hypertext), του κειμένου εκείνου δηλαδή, το οποίο, όταν τοποθετείται μέσα σε ένα έγγραφο μπορεί να γίνει ενεργό. Με ένα κλικ του ποντικιού πάνω σε αυτό δηλαδή, μπορεί να πραγματοποιηθεί μετάβαση σε κάποιο άλλο αντικείμενο ενός συστήματος, όπως είναι μια σελίδα στο Internet. Έχει γνωρίσει τα τελευταία χρόνια εκρηκτική ανάπτυξη λόγω του γεγονότος ότι η ύπαρξή της είναι άμεσα συνδεδεμένη με τη λειτουργία της υπηρεσίας του Internet που λέγεται WWW (World Wide Web). Αποτελείται από κείμενο και ετικέτες (tags), οι οποίες περικλείονται μεταξύ των συμβόλων<>. Οι ετικέτες, δίνουν εντολές, για το πως να διαχειριστεί ένα έγγραφο HTML το περιεχόμ ενό του και πως να το εμφανίσει στον χρήστη ένας web browser. Οι Web browsers, επιπρόσθετα με τη δυνατότητά τους να ανακτούν σελίδες από το Web, λειτουργούν επίσης και σαν "μορφοποιητές" για την HTML. Όταν διαβάζεται μια σελίδα γραμμένη με την HTML σε ένα φυλλομετρητή, αυτός, αναλύει τα tags της HTML και μορφοποιεί το κείμενο και τις εικόνες στην οθόνη. Ο φυλλομετρητής χρησιμοποιεί συγκεκριμένες αντιστοιχήσεις μεταξύ των ονομάτων των στοιχείων της σελίδας και των πραγματικών στυλ που εμφανίζει στην οθόνη. Για παράδειγμα οι επικεφαλίδες μπορεί να εμφανίζονται με μεγαλύτερη γραμματοσειρά από το κυρίως κείμενο της σελίδας. Ο φυλλομετρητής φροντίζει επίσης για την αναδίπλωση του κειμένου σε επόμενες γραμμές, έτσι ώστε να χωρά πάντα στο τρέχον πλάτος του παραθύρου. Οι σελίδες γραμμένες σε HTML μπορεί να δείχνουν εντελώς διαφορετικές από σύστημα σε σύστημα και από φυλλομετρητή σε φυλλομετρητή. Οι πραγματικές πληροφορίες και οι σύνδεσμοι που περιέχουν οι σελίδες θα είναι πάντα εκεί, αλλά η εμφάνιση στην οθόνη θα αλλάζει. Μια σελίδα Web μπορεί στο σύστημα που σχεδιάστηκε να δείχνει τέλεια, αλλά όταν τη διαβάσει κάποιος άλλος σε ένα διαφορετικό σύστημα να δείχνει εντελώς διαφορετική. Ενδεικτικά, οι εντολές/tags της HTML, μπορούν: Να εισάγουν σε μία ιστοσελίδα links (συνδέσμους) Να εισάγουν σε μία ιστοσελίδα εικόνες

12 Να διαμορφώσουν το κείμενο με έντονα ή πλάγια γράμματα κ.λ.π. Η HTML ορίζει επίσης, ένα σετ κοινών στυλ για τις Web σελίδες: επικεφαλίδες (headings), παράγραφοι κειμένου (paragraphs), λίστες (lists) και πίνακες (tables). Ορίζει επίσης στυλ χαρακτήρων, όπως η έντονη γραφή (boldface) κ.α Δημιουργία και δομή ενός εγγράφου HTML Το έγγραφο HTML μπορεί να δημιουργηθεί με τη χρήση οποιουδήποτε συντάκτη κειμένου, όπως το Notepad (Σημειωματάριο) ή το WordPad των Windows. Όταν αποθηκευτεί το έγγραφο, αυτό θα πρέπει να έχει την επέκταση.htm ή.html. Η εντολή για την έναρξη ενός εγγράφου HTML είναι η <ΗΤΜΙ>. Ένα τμήμα κειμένου που χαρακτηρίζεται από κάποια ετικέτα ολοκληρώνεται με την ίδια ετικέτα, με τη διαφορά ότι πριν την εντολή χρησιμοποιείται και μια κάθετος(/). Η ετικέτα κλεισίματος της <ΗΤΜΙ> είναι η </ΗΤΜΙ>. Οι ετικέτες HTML μπορούν να ενσωματωθούν μέσα σε άλλες. Υπάρχουν τρεις ετικέτες που ορίζουν τη δομή ενός εγγράφου HTML. Η ετικέτα <HTML> είναι υποχρεωτική και καθορίζει την αρχή και το τέλος του εγγράφου. Οι ετικέτες <HEAD> και <BODY> είναι προαιρετικές, αλλά είναι καλό να χρησιμοποιούνται καθώς βοηθάνε στον ορισμό της ροής. <HTML> Η ετικέτα αυτή ορίζει την αρχή ενός εγγράφου HTML και βρίσκεται πάντα στην πρώτη γραμμή. Το τέλος του εγγράφου προσδιορίζεται από την ετικέτα </HTML>. Βασικά Tags: <HTML> Το αρχικό (<HTML> και τελικό(</ητμl>) tag κάθε ιστοσελίδας HTML. Ορίζουν την αρχή και το τέλος του κώδικα HTML σε μία ιστοσελfδα. Παράδειγμα <HTML>... κώδικας και περιεχόμενο ιστοσελίδας... </HTML> <HEAD> Εικόνα 3.1 Η σύνταξη της ετικέτας <HTML> Η ετικέτα <HEAD> χρησιμοποιείται για να οριστεί το τμήμα της επικεφαλίδας του εγγράφου HTML. Σε αυτό το τμήμα μπορούν να οριστούν στοιχεία όπως η επικεφαλίδα της σελίδας και το στυλ του εγγράφου. Πέρα από τον τίτλο, στην ιστοσελίδα δεν εμφανίζεται τίποτα άλλο από όσα περιλαμβάνονται σε αυτό το τμήμα. Το τμήμα αυτό πρέπει να βρίσκεται στην αρχή του εγγράφου και πρέπει να ολοκληρώνεται με μια ετικέτα </HEAD>.

13 Βασικά Tags: <HEAD> Περιέχει πληροφορίες σχετικές με το αρχεlο HTML, για παράδειγμα τον τίτλο ή την κωδικοποίηση. Οι πληροφορίες αυτές είναι χρήσιμες μόνο στον browser και δεν είναι εμφανείς στον τελικό χρήστη. i. Παράδειγμα. ~:.~ <head> ~ <title> lesson 1 <ltίtle>! <meta http-equliγ- ''C""όntent=fYPe'r~iθxtifιtmΓclia rse~uff:::s">] Γ<me name="keywords'"' corifet1f="e:feamίng, web dθsign"t>=:j <ιhea<:t> Λt~ις.Κλίιδιι!ί Εικόνα 3.2 Η σύνταξη της ετικέτας <HEAD> <TITLE> Η πιο συνηθισμένη ετικέτα που εισάγεται μέσα στην περιοχή του <HEAD> είναι το <TITLE> και παρέχει στην ιστοσελίδα ένα τίτλο ο οποίος θα εμφανίζεται στη γραμμή τίτλου στην εφαρμογή πλοήγησης. Βασικά Tags: <TITLE>... Υποδεικνύει τον ορατό τίτλο 1ΌU αρχεiοu. Περιέχει μόνο απλό κείμενο. Ο τiτλος κάθε αρχείου πρέπει να είναι σύντομος και περιγραφικός τοv περιεχομένου της ιστοσελίδας. Παράδειγμα Είσοδος:<ΤΙΤLΕ>Μάθημα 1 </TJTLE> Αποτέλεσμα: Εικόνα 3.3 Η σύνταξη της ετικέτας <TITLE> Page 13

14 <BODY> Οι ετικέτες <BODY> και </BODY> περιέχουν τον κώδικα που παρουσιάζει το ορατό μέρος της ιστοσελίδας. Οι επιλογές που υπάρχουν στο τμήμα αυτό, μπορούν να χρησιμοποιηθούν για να περιγράψουν τα χαρακτηριστικά της ιστοσελίδας, όπως το χρώμα του φόντου, το χρώμα του κειμένου τον ορισμός μιας εικόνας κ.λ.π. Βασικά Tags: <BODY>... Περιέχει το πραγματικό περιεχόμενο της ιστοσελfδας(κεfμενο. εικόνες, σύνδεσμοι. κ. τ.λ.) Μπορεi να περιέχει εμφωλευμένα tags. Παράδειγμα <BODY>... ορατό περιεχόμενο σελ ίδας.. </BODY> Εικόνα 3.4 Η σύνταξη της ετικέτας <BODY> Χρησιμοποιώντας όλα τα παραπάνω βασικά tags μπορούμε να δούμε τη διάταξη μίας HTML σελίδας. Παρατηρούμε ότι το tag HTML περιέχει εμφωλευμένα όλα τα υπόλοιπα βασικά tags. Τελική δομή HTML εγγράφου Η διάταξη των βασικών tags σε ένα αρχείο HTML είναι η εξης: <HTML> D<HEAD> <mt.e> [ Oocument T!t1e <ΠΠLΕ> <IHEAO> r< B ~.~Y> L <IBOOY> <IHTML>... Εικόνα 3.5 Τελική δομή ενός εγγράφου HTML

15 3.1.2 Ετικέτες HTML και ιδιότητες Ακολουθ ε ί, σε αλφαβητική σειρά, πίνακας με τις ετικ έτε ς HTML τη ς προδ ιαγραφή ς 5 (HTMLS). Πίνακα 1 : πίνακα ΕΤΙΚΕΤΑ <! > <!DOCTYPE> <a> <abbr> <address> <area> <article> <aside> <audio> <b> <base> bdo> <blockquote> <body> <button> π ΣΥΝΤΟΜΗ ΠΕΡΙΓΡΑΦΗ σελίδα < canνas> <caption> <cite> <code> <col> <command> <datalist> <dd> <del> <details> <dfu> <dίν> <dt> <em> <embed> <eνentsource> Καθορί ζ ει έναν στόχο γ ια τα γεγ ονότα που αποστέλλονται από ένα διακομιστή <fieldset> <figcaption> <fi re> <footer> <form> <hl> <h2> αλίδα επιπέ δου 2 <h3>

16 <h4> <h5> <h6> <head> <header> <hgroup> <hr> <html> < ί> <iframe> <img> <ίnput> <ins> <kbd> <keygen> <\abel> <legend> <li> <link> <mark> <map> <menu> <meta> <meter> < ηaν> < noscήpt> <obiect> <ol> <optgroup> <option> <output> <p> <param> <pre> <progress> <q> <ruby> <rp> <rt> <samp> <section> <select> <small> <source> <span> Καθορίζει μια επικεφαλίδα επιπέδου 4 Καθορίζει μια επικεφαλίδα επιπέδου 5 Καθορίζε ι μια επικεφαλίδα επιπέδου 6 Καθορίζει τις πληροφορίες σχετικά με το έγγραφο Καθορίζει μια ομάδα εισαγωγών ή βοηθήματα πλοήγησης Καθορίζει μια κεφαλίδα για μια ενότητα ή τη σελίδα Καθορίζει μια οριζόντια γραμμή (χάρακας) Καθορίζει ένα έγγραφο HTML Καθορίζει πλάγια γραφή Καθορίζει ένα ενσωματωμένο παράθυρο (καρέ) Καθορίζει μια εικόνα Καθορίζ ει ένα πεδίο εισαγωγής Καθορίζει το κείμενο που προστέθηκε Καθορίζει το κείμενο πληκτρολογίου Δημιουργεί ένα ζεύγ ος κλειδιών Καθορίζει την ετικέτα για μια φόρμα ελέγχου Καθορίζει έναν τίτλο σε ένα σύνολο πεδίων Ορίζει ένα στοιχείο λίστας Καθορίζει μια αναφορά συνδέσμου Καθορίζει κείμενο που έχει επισημανθεί Καθορίζει μια εικόνα χάρτη Καθορίζει το μενού μι ας λίσταc; Καθορίζει τιc; πληροφοpίεc; των μεταδεδομένων Καθορίζει τη μέτρηση εντός προκαθορισμένου εύρους Καθορίζει συνδέσμους πλοήγησης Καθορίζει ένα τμήμα noscript Οpίζει ένα ενσωματωμένο αντικείμενο Καθορίζει μια διατεταγμένη λίστα Καθορίζει επιλογή για μια ομάδα Καθορίζ ει μια επιλογή σε μια αναπτυσσόμενη λίστα Καθορίζει ορισμένους τύπους εξόδων Καθορίζ ει μια παράγ ραφο Καθορίζει μια παράμετρο για ένα αντικείμενο Καθορίζει προδιαμορφωμένο κείμενο Καθορίζ ει την πρόοδο μιας εργασίας Καθορίζει ένα σύντομο απόσπασμα Καθορίζει έναν σχολιασμό (Ασία) Χρησιμοπ ο ιούνται προς όφ ελ ο ς τω ν browsers που δε ν υποστηρ ίζουν ruby σχολιασμούς Καθορίζει το ruby τμήμα του κειμένου Ορίζει δείγμα κώδικα Καθορίζει ένα τμήμα Καθορίζει λίστα επιλογής Καθορίζει μικρό κείμενο Καθορίζει πόρους media Καθορίζει ένα τμήμα σε ένα έγγραφο ΒιΒΛΙΟΘ Η ΚΗ ΤΕΙ ΠΕ Ρ ιj

17 <strong> <style> <summary> <sup> <table> <tbod > <td> <tfoot> <th> <thead> <time> <title> <tr> <ul> <νar> <video> <wbr> Αναφορά στης ιδιότητες της HTML Παρακάτω ακολουθούν μερικές από τις ετικέτες που είναι τυπικές για τις περισσότερες ετικέτες της HTML. Class: Ορίζει το όνομα ή τα ονόματα των κλάσεων για ένα στοιχείο. ld: Ορίζει ένα μοναδικό κωδικό για ένα στοιχε ίο Style: Ορίζει ένα ενσωματωμένο στιλ για το στοιχείο Title: Ορίζει περισσότερες πληροφορίες για το στοιχείο και τις εμφανίζει ως συμβουλή 3.2 CSS (Cascading Style Sheets) Η CSS (Cascading Style Sheets-Διαδοχικά Φύλλα Στυλ/αλληλουχία φύλλων στύλ) είναι μια γλώσσα υπολογιστή που ανήκει στην κατηγορία των γλωσσών φύλλων στυλ. Χρησιμοποιείται για τον έλεγχο της εμφάνισης ενός εγγράφου που έχει γραφτεί με μια γλώσσα σήμανσης όπως οι γλώσσες HTML και XHTML. Χρησιμοποιείται δηλαδή για τον έλεγχο της εμφάνισης του αποτελέσματος μιας ιστοσελίδας και γενικότερα ενός ιστοτόπου. Η CSS είναι προορισμένη να αναπτύσσει στυλιστικά μια ιστοσελίδα δη λαδή να διαμορφώνει περισσότερα χαρακτηριστικά, χρώματα, στοίχιση και δίνει περισσότερες δυνατότητες σε σχέση με την HTML. Για μια όμορφη και καλοσχεδιασμένη ιστοσελίδα, η χρήση της CSS κρίνεται απαραίτητη Χρήση CSS Πριν από την CSS, σχεδόν όλα τα χαρακτηριστικά παρουσίασης, έπρεπε να περιγράφονταν ρητά, συχνά κατ' επανάληψη, στο πλαίσιο της HTML. Η μεγάλη ευκολία που προσφέρει η χρήση CSS, είναι ότι οι ενδεχόμενες αλλαγές, γίνονται μόνο σε ένα έγγραφο, το css δηλαδή και αυτόματα εφαρμόζονται σε όλες τις σελίδες html που το χρησιμοποιούν. Έτσι μία ιστοσελίδα που χρησιμοποιεί CSS, μπορεί πολύ εύκολα να αλλάξε ι όψη. Για την δημιουργία και επεξεργασία εγγράφων CSS, μπορεί να χρησιμοποιηθεί ένας επεξεργαστής ( editor) απλού κειμένου ή κάποιο πρόγραμμα ειδικό για CSS που προσφέρει αρκετές ευκολίες στην διαμόρφωση του κώδικα CSS.

18 3.2.2 Σύνταξη CSS Η CSS έχει μια απλή σύνταξη και χρησιμοποιεί μια σειρά από αγγλικές λέξεις -κλειδιά για να καθορίσει τα ονόματα των διαφόρων ιδιοτήτων style. Ένα φύλλο style αποτελείται από μια λίστα με τους κανόνες στύλ. Οι κανόνες στυλ αποτελούνται από δύο μέρη: έναν επιλογέα (selector) και μια δήλωση ( declaration). Ο επιλογέας, καθορίζει το στοιχείο στο οποίο εφαρμόζεται ο κανόνας. Η δήλωση καθορίζει την ιδιότητα (property) που μορφοποιείται και την ακριβή της τιμή (νalue). Η ιδιότητα είναι ένα χαρακτηριστικό του στοιχείου. Η σύνταξη είναι η εξής: επιλογέας { ιδιότητα l: τιμή l; ιδιότητα2: τιμή2; ιδιότητα3: τιμή3 ; } Οι επιλογείς CSS Οι επιλογείς (CSS selectors) αποτελούν κάποιους «κανόνες» ώστε να καταλάβει ο browser, που θέλουμε να εφαρμοστούν τα όσα γράφουμε κάθε φορά. Επιλέγουμε ποια στοιχεία θα μορφοποιήσουμε μέσω των επιλογέων (CSS selectors), Υπάρχουν αρκετά περίπλοκοι CSS selectors, οι οποίοι προσφέρουν τεράστια ευελιξία, ωστόσο εδώ θα εξετάσουμε τους πιο βασικούς, και για λόγους απλούστευσης, και επειδή αρκετοί από τους πιο περίπλοκους δεν υποστηρίζονται από όλους τους browsers. Απλοί επιλογείς CSS (CSS selectors) * Όταν ο επιλογέας είναι ένας χαρακτήρας αστερίσκου, τότε οι ιδιότητες που θα γράψουμε σε αυτόν τον κανόνα CSS εφαρμόζονται σε κάθε στοιχείο της σελίδας μας. Όπως είναι κατανοητό, συνήθως δεν είναι και πολύ χρήσιμος επιλογέας από μόνος του, και χρησιμοποιείται κυρίως σε συνδυασμό με άλλους. Στοιχείο Όταν ο επιλογέας αποτελείται απλά από το όνομα ενός html tag, τότε οι ιδιότητες που θα γράψουμε σε αυτόν τον κανόνα CSS εφαρμόζονται σε κάθε τ έτοιο στοιχείο html. Για παράδειγμα, ο επιλογέας p θα εφαρμοστεί σε οτιδήποτε στη σελίδα μας περιλαμβάνεται εντός των tags <p>... </p>, ο επιλογέας table θα εφαρμοστεί σε όλους τους πίνακες στη σελίδα μας, ο επιλογέας ίιηg θα αφορά όλες τις εικόνες στη σελίδα κοκ. Προφανώς όταν θέλουμε να εφαρμόσουμε κάποιες ιδιότητες CSS σε ολόκληρη τη σελ ίδα, χρησιμοποιούμε ως επιλογέα both μιας και όλο το ορατό τμήμα της σελίδας περιέχεται εντός των tags <both>... </αy>..όνομα_κλάσης Όταν ο επιλογέας μας περιλαμβάνει μια τελεία(.) στην αρχή του, τότε ο browser ψάχνει όσα στοιχεία στη σελίδα μας περιλαμβάνουν την ιδιότητα class και εφαρμόζε ι τις ιδιότητες που θα γράψουμε στον κανόνα CSS αυτό σε οποιοδήποτε στοιχείο περιλαμβάνει την κλάση «όνομα_κλάσης» στην ιδιότητα class του. Φυσικά ως όνομα_κλάσης μπορούμε να γράψουμε

19 οτιδήποτε αποτελείται από γράμματα, αριθμούς, παύλες και χαρακτήρες underscoreu και να ξεκινάει με γράμμα. Αξίζει να σημειωθεί ότι μπορεί το ίδιο στοιχείο να ανήκει σε περισσότερες από μια κλάσεις, διαχωρισμένες με κενά μέσα στην class html attήbute του. Πχ :<p class="emphasis bodytext">... </p>. Για παράδειγμα, ο παρακάτω κανόνας CSS:.emphasis { color: red; } θα κάνει κόκκινα τα γράμματα και στο στοιχείο <p class="emphasis> blah blah </p>, και στο στοιχείο <diν class="emphasis otherclass">blah bοth< /dίν>αλλά όχι στο στοιχείο <h 1 class=" otherclass">blahblah</h 1 >. Οι κλάσεις γενικά χρησιμοποιούνται όταν θέλουμε να ομαδοποιήσουμε κάποια στοιχεία html για τα οποία δεν μπορούμε να βρούμε κάποιον άλλο επιλογέα που να αφορά όλα αυτά και μόνον αυτά, οπότε τους προσδίδουμε μια συγκεκριμένη κλάση, ώστε να μπορούμε στο CSS μας να αναφερθούμε μόνο σε αυτά και να τα μορφοποιήσουμε. στοιχείο.όνομα_κλάσης Αποτελεί ουσιαστικά συνδυασμό των δύο παραπάνω επιλογέων. Εφαρμόζεται σε όσα στοιχεία αποτελούνται από το html tag <στοιχείο> και ανήκουν στην κλάση όνομα_κλάσης. Πχ ο επιλογέας p.emphasis εφαρμόζεται σε ο,τι περιέχεται σε tags της μορφής <p class="emphasis">... </p>. Ο επιλογέας αυτός είναι χρήσιμος όταν έχουμε πολλά διαφορετικού τύπου στοιχεία με την ίδια κλάση και επιθυμούμε να εφαρμόσουμε διαφορετική μορφοποίηση ανάλογα με τον τύπο του στοιχείου. #όνομα_ίd Όταν ο επιλογέας μας περιλαμβάνει ένα χαρακτήρα δίεσης(#) στην αρχή του, τότε ο browser εφαρμόζει τις ιδιότητες που θα γράψουμε στο στοιχείο το οποίο περιλαμβάνει την ιδιότητα id="όνομα_id". Δεν πρέπει να υπάρχουν δύο (ή περισσότερα) στοιχεία στη σελίδα μας με το ίδιο ίd. Τα ids διέπονται από τους ίδιους κανόνες ονοματολογίας με τις κλάσεις. Ουσιαστικά, ό,τι μπορούμε να κάνουμε με τα ids μπορούμε να το κάνουμε και με τη χρήση κλάσεων, απλά όταν το στοιχείο που θέλουμε να μορφοποιήσουμε είναι μοναδικό, είναι γενικά καλύτερο να χρησιμοποιούμε ids. στοιχείο[ attribute="νalue"] Αποτελεί ουσιαστικά μια «επέκταση» του επιλογέα στοιχείο που αναλύθηκε πρώτος. Ο εν λόγω επιλογέας, κάνει τον browser να εφαρμόζει τις ιδιότητες που θα γράψουμε σε αυτόν σε κάθε στοιχείο με tag <στοιχείο> το οποίο επιπροσθέτως έχει την τιμή νalue στην html ιδιότητα attήbute. Παραδείγματος χάριν, ο επιλογέας input(type="submit"] αφορά όλα τα κουμπιά υποβολής φόρμας που υπάρχουν στη σελίδα μας, χωρίς ωστόσο να εφαρμόζεται σε άλλα στοιχεία φορμών όπως τα πεδία κειμένου (στα οποία η ιδιότητα type είναι text). Άλλο ένα παράδειγμα: Έστω ότι θέλουμε να μορφοποιήσουμε μόνο όσους πίνακες στη σελίδα μας είναι κεντραρισμένοι. Αν χρησιμοποιούσαμε ως επιλογέα table, τότε οι ιδιότητες που θα γράφαμε σε αυτόν τον επιλογέα θα εφαρμόζονταν σε όλους τους πίνακες ανεξαιρέτως. Ενώ αν χρησιμοποιήσουμε τον επιλογέα table[align="center"] τότε ο κανόνας CSS που θα γράψουμε θα εφαρμοστεί μόνο σε όσους πίνακες έχουν την ιδιότητα align=" center". Ψευδό-κλάσεις και ψευδό-στοιχεία Ορισμένες φορές χρησιμοποιούμε τις λεγόμενες ψευδό-κλάσεις (pseudo-classes) ή ψευδό-στοιχεία (pseudo-elements),τα οποία μας επιτρέπουν να επιλέγουμε στοιχεία τα οποία δεν αποτελούν html

20 elements, αλλά κομμάτια τους ή συγκεκριμένες καταστάσεις τους. Ουσιαστικά αποτελούν κάποιες λέξε ις κλειδιά που γράφουμε μετά από έναν επιλογέα του τύπου στοιχείο και ξεκινούν με:. a:link Χρησιμοποιείται αποκλειστικά για στοιχεία a (Δηλαδή ως εξής :a:link) και αφορά τους συνδέσμους που ο χρήστης δεν έχει ακόμη επισκεφθεί. a:visited Επίσης χρησιμοποιείται αποκλειστικά για στοιχεία a (Δηλαδή ως εξής: a:νisited) και αφορά τους συνδέσμους που ο χρήστης έχει επισκεφθεί. στοιχείο:actίνe Αφορά τα στοιχεία τύπου <στοιχείο> τη στιγμή που ο χρήστης έχει πατημένο το ποντίκι πάνω σε αυτά. Πχ ο επιλογέας a:actiνe εφαρμόζεται σε συνδέσμους την ώρα που ο χρήστης έχει πατημένο το ποντίκι πάνω τους. στοιχείο:hονer Από τις πιο συχνά χρησιμοποιούμενες ψευδό-κλάσεις. Αφορά τα στο ιχεία τύπου <στοιχείο> τη στιγμή που ο χρήστης έχει το δείκτη του ποντικιού πάνω σε κάποιο από αυτά (χωρίς να πατάει κάποιο πλήκτρο). Μπορεί να μας βοηθ1)σει να δημιουργήσουμε διάφορα όμορφα εφέ, τα οποία παλιότερα ήταν εφικτά μόνο με javascήpt. στοιχείο:fοcus Χρησιμοποιείται κυρίως για στοιχεία φορμών και εφαρμόζεται στα στοιχεία τύπου <στοιχείο> που εκείνη τη στιγ μή έχουν «focus», παραδείγματος χάριν, ένα πεδίο κειμένου στο οποίο ο χρήστης έκανε κλικ για να εισάγει κείμενο. στoιχείo:first-ietter Αφορά το πρώτο γράμμα του κειμένου εντός κάποιου στοιχείου τύπου <στοιχείο>. Το ψευδό-στοιχείο αυτό μπορεί να μας βοηθήσει να δημιουργήσουμε αρχιγράμματα. Πχ ο επιλογέας p:first-letter αφορά το πρώτο γράμμα κάθε παραγράφου. στoιχείo:first-line Ψευδό-στοιχείο παρόμοιο με το παραπάνω, μόνο που αντί να αφορά μόνο το πρώτο γράμμα του κειμένου μέσα στο στοιχείο τύπου <στοιχείο>, αφορά ολόκληρη την πρώτη γραμμή. Αν και δεν έχει ιδιαίτερη πρακτική χρησιμότητα, αξίζει να σημειωθεί ότι τα 5 πρώτα θεωρούνται ψευδό-κλάσεις (pseudo-c\asses) ενώ τα 2 τελευταία ψευδό-στοιχεία (pseudo-elements). Σύνθετοι επιλογείς CSS (CSS selectors) Πολλές φορές μπορούμε να συνδυάσουμε σε έναν επιλογέα περισσότερους από έναν υπό-επιλογείς, βάσει συγκεκριμένων κανόνων σύνταξης, κάτι που μας προσφέρει μεγαλύτερη ευελιξία και εξοικονόμηση χρόνου. επιλογέας!, επιλογέας2, επιλογέας3,... Οι ιδιότητες που θα γράψουμε σε αυτόν τον κανόνα CSS, θα εφαρμοστούν σε κάθε στοιχείο που πληροί τις προϋποθέσεις επιλογής είτε για τον επιλογέα 1, είτε για τον επιλογέα2, είτε για τον επιλογέα3 κοκ. Παραδείγματος χάριν, ο επιλογέας input[type="text"], textarea θα εφαρμοστεί σε κάθε πεδίο κειμένου που υπάρχει στη σελίδα μας, είτε είναι για εισαγωγή κειμένου μιας γραμμής ( <input type="text" />) είτε είναι πολλών γραμμών ( <textarea></textarea> ).

21 επιλογέας! επιλογέας2 επιλογέας3... επιλογέαςη Οι ιδιότητες που θα γράψουμε σε αυτόν τον κανόνα CSS θα εφαρμοστούν σε στοιχεία που πληρούν τις προϋποθέσεις του επιλογέαη και επιπροσθέτως περιέχονται μέσα σε κάποιο στοιχείο που πληροί τις προϋποθέσεις του επιλογέαη-1 το οποίο βρίσκεται μέσα σε κάποιο στοιχείο που πληροί τις προϋποθέσεις του επιλογέα η - 2 κοκ. Παραδείγματος χάριν ο επιλογέας p img θα εφαρμοστεί σε όσες εικόνες περιέχονται μέσα σε tags <p>... </p> Εισαγωγή CSS στη σελίδα μας Μπορούμε να εισάγουμε CSS στη σελίδα μας με τρεις διαφορετικούς τρόπους, αναλόγως την περίπτωση. Οι τρόποι αυτοί, κατά σειρά φθίνουσα προτεραιότητας, είναι: Inline CSS: Αν επιθυμούμε να μορφοποιήσουμε ένα στοιχείο μόνο, και δεν πρόκειται να χρειαστούμε αυτό το είδος μορφοποίησης για τίποτε άλλο στο site, μπορούμε να γράψουμε CSS properties μέσα στο attribute style, το οποίο το διαθέτει σχεδόν κάθε στοιχείο html. Παρα δείγματος χάριν, για να κάνουμε μια συγκεκριμένη παράγραφο κόκκινη, μπορούμε να προσθέσουμε style="color:red;" στο <p>tag.ολοκληρωμένα: <p style="color:red;">. Αξίζει να σημειωθεί, ότι αν κάποιες από τις ιδιότητες που θα γράψουμε εντός της attήbute style ενός στοιχείου «συγ κρούονται» με κανόνες CSS που έχουν οριστεί για αυτό αλλού και το αφορούν, τότε ο browser θα επιλέξει να εφαρμόσει αυτά που γράψαμε εντός του attήbute style, ως πιο συγκεκριμένα για το στοιχείο αυτό. CSS για μια συγκεκριμένη σελίδα: Πολλές φορές, μπορεί να θέλουμε να εφαρμόσουμε κάποιους κανόνες CSS μόνο για τη συγκεκριμένη σελίδα και όχι για όλο το site (ή να διαφοροποιήσουμε σε κάποιες ιδιότητες τους υπάρχοντες). Ένας τρόπος να το κάνουμε αυτό, για να μην δημιουργήσουμε ξεχωριστό αρχείο CSS είναι να εισάγουμε εντός των tags <head>... </head> της σελίδας τους κανόνες CSS μας μέσα σε <style> tags (με την html attήbute type τους σε text/css). Παραδείγματος χάριν, για να κάνουμε το χρώμα γραμμάτων μιας συγκεκριμένης σελίδας γκρ ι, θα γράφαμε στο head της: <head> <style type="text/css"> body { color:gray; } </style> </head> Αξίζει να σημειωθεί ότι συvl)θως όταν ξεκινάμε την ανάπτυξη ενός site, είναι πιο βολικό να χρησιμοποιήσουμε αυτό τον τρόπο αρχικά, μιας και πρέπει να επεξεργαζόμαστε μόνο ένα αρχείο αντί για δύο. Όταν τελειώνουμε την πρώτη σελίδα, συνήθως μεταφέρουμε το CSS που έχουμε γράψει σε εξωτερικό αρχείο (βλ. παρακάτω ) ώστε να μπορούμε να χρησιμοποιήσουμε τους ίδιους κανόνες CSS και στις άλλες σελίδες του site μας, χωρίς να πρέπει φυσικά να τους κάνουμε copy-paste σε κάθε σελίδα

22 Εξωτερικό αρχείο CSS: Ο πιο συνήθης τρόπος για να ορίσουμε στυλ σε μια σελίδα είναι ο εξής: Δημιουργούμε ένα εξωτερικό αρχείο στυλ με επέκταση.css (πχ style.css), στο οποίο γράφουμε τα στυλ που θέλουμε το ένα κάτω από το άλλο. Η σύνδεση του εξωτερικού αρχείου στυλ και της σελίδας HTML γίνεται με την χρήση της HTML ετικέτας <Liηk>.Για παράδειγμα: <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>ptixiaki</title> <link rel="stylesheet" href="style.css" type="text/css" /> </head> Με αυτόν τον τρόπο μπορούμε να εισάγουμε τα στυλ, που περιέχονται σε ένα αρχείο.css, μέσα σε όσες σελίδες html επιθυμούμε, δημιουργώντας έτσι ένα ενιαίο στυλ για τις σελίδες αυτές. Αξίζει να σημειωθεί ότι μπορούμε να έχουμε πολλά αρχεία css στην ίδια σελίδα, και μεγαλύτερη προτεραιότητα έχει πάντα αυτό που έχει γραφτεί τελευταίο Ιδιότητες CSS Ιδιότητες που αφορούν μορφοποίηση κειμένου Color: ο Αφορά το χρώμα του κειμένου. Τα χρώματα μπορούν να εισαχθούν: Ο Είτε σε μορφή RGB (πχ color: rgb(255,128,30);), Ο Είτε σε μορφή hex (πχ color: #ff801e;) Ο Είτε με τη μορφή κάποιου keyword (πχ color:orange;). font-size: ο Αφορά το μέγεθος της γραμματοσειράς. Οι τιμές που δέχεται μπορούν να είναι εκφρασμένες σε ένα μεγάλο πλήθος μονάδων μεγέθους, από τις οποίες οι πιο ευρέως διαδεδομένες είναι τα pixels (πχ font-size: 12px;) και οι στιγμές (πχ font-size: 1 Opt). font-family: ο Η ιδιότητα αυτή μας επιτρέπει να ορίσουμε ένα πλήθος γραμματοσειρών που θα χρησιμοποιηθούν για το κείμενο, κατά σειρά προτίμησης. Παράδειγμα: font-family: Calibή, Trebuchet MS, Verdana, sansseήf; font-style: ο Αφορά μόνο την περίπτωση όπου το κείμενο είναι πλάγιο. Οι πιθανές τιμές της είναι normal, italic και oblique. Οι δύο τελευταίες συνήθως κάνουν το ίδιο πράγμα. font-weίght:

23 ο Αφορά το «βάρος» της γραμματοσειράς και στην πράξη χρησιμοποιείται για να ορίσει αν το κείμενο μας θα είναι έντονο ή όχι. Οπότε οι τιμές που συνήθως χρησιμοποιούνται σε αυτή την ιδιότητα είναι οι nonnal και bold, η λειτουργία των οποίων είναι προφανής. text-decoration: ο Μας επιτρέπει να εφαρμόσουμε στο κείμενο μας διάφορα εφέ, συμπεριλαμβανόμενης και της υπογράμμισης. Οι τιμές που δέχεται είναι οι εξής: U none: Καμία διακόσμηση C underline: Υπογράμμιση Ο oνerline: Γραμμή πάνω από το κείμενο (ουσιαστικά το αντίθετο της υπογράμμισης) Π line-through: Διαγράμμιση Ο blink: Κάνει το κείμενο να αναβοσβήνει. text-align ο Μας επιτρέπει να καθορίσουμε τη στοίχιση του κειμένου μας. Όπως θα περίμενε κανείς, οι πιθανές τιμές είναι left, center, ήght και justify. Font ο Μας επιτρέπει να καθορίσουμε αρκετές ιδιότητες κειμένου με μια μόνο ιδιότητα (συγκεκρ ιμένα τις font-size, font-family, font-weight και font-style από όσες αναφέρθηκαν παραπάνω, καθώς και κάποιες άλλες που δεν αναφέρθηκαν). Αν κάποια ιδιότητα δεν συμπεριληφθεί, ο browser θα «υποθέσει» την προεπιλεγμένη τιμή της. Παραδείγματα: font: 12px Calibή, Trebuchet MS, Verdana, sans-serif; font: italic bold 12px Calibή, Trebuchet MS, Verdana, sans-serif;.:+ Ιδιότητες που αφορούν το φόντο background-color ο Χρησιμοποιείται για να ορίσει χρώμα φόντου στα στοιχεία που αφορά ο επιλογέας. Το χρώμαμπορεί να γραφεί σε οποιαδήποτε από τις μορφές που περιγράφηκαν για την ιδιότητα color. background-image ο Χρησιμοποιείται για να ορίσει μια εικόνα φόντου. Η τιμή που δέχεται είνα ι της μορφής url (διεύθυνση_ εικόνας), παραδείγματος χάριν : Background-image:url(images/back.jpg);. Γενικά όταν εισάγουμε μια διεύθυνση URL ως τιμή (ή τμήμα τιμής) κάποιας ιδιότητας CSS, πάντα τη γράφουμε εντός των παρενθέσεων του url(). Φυσικά μπορούμε να εισάγουμε και σχετικά URLs, πχ background-image:url(logo.gif);. background-repeat ο Αφορά τον τρόπο που θα επαναλαμβάνεται η εικόνα που ορίσαμε στην παραπάνω ιδιότητα. Οι τιμές που δέχεται είναι:

24 Ο no-repeat: Καμία επανάληψη repeat-x: Η εικόνα επαναλαμβάνεται στον οριζόνnο άξονα Ο repeat-y: Η εικόνα επαναλαμβ άνεται στον κάθετο άξονα Ο repeat: Η εικόνα επαναλαμβάνεται και οριζόντια και κάθετα (η τιμή repeat είναι και η προεπιλεγμένη τιμή της ιδιότητας background-repeat). background-position ο Η ιδιότητα αυτή μας επιτρέπει να ορίσουμε τη θέση που θα τοποθετηθεί η εικόνα φόντου που ορίσαμε με την ιδιότητα background image τόσο κάθετα, όσο και οριζόντια. Συνήθως ως τιμές της χρησιμοποιούμε κάποια keywords, τα οποία είναι τα εξής: Ο left, center, ήght όσον αφορά την οριζόντια θέση της εικόνας.. D top, center, bottom όσον αφορά την κάθετη θέση της εικόνας. background ο Η ιδιότητα αυτή αποτελεί ουσιαστικά συντόμευση για να ορίσουμε με μία μόνο ιδιότητα όλεςτις παραπάνω (όπως είναι η ιδιότητα font για τα χαρακτηριστικά κειμένου). Παραδείγματα χρήσης: background: #CCCCCC url(background.gif) no-repeat top center; background: #CCCCCC url(background.gif); : Ιδιότητες που αφορούν το περίγραμμα border-color ο Ρυθμίζει το χρό)μα περιγράμματος. Το χρώμα μπορεί να γραφεί σε οποιαδήποτε από τις μορφές που περιγράφηκαν για την ιδιότητα color. Αν δεν οριστεί αυτή η ιδιότητα, χρησιμοποιείται το χρώμα που ορίστηκε στην ιδιότητα color. border-width ο Ρυθμίζει το πάχος του περιγράμματος σε κάποια από τις μονάδες μέτρησης που μπορούν να χρησιμοποιηθούν στο CSS, συνηθέστερα σε pixels. Παράδειγμα: border-width: 1 Opx; border-style ο Ορίζει το στυλ του περιγράμματος. Οι τιμές που χρησιμοποιούνται συνήθως για την ιδιότητα αυτή είναι οι εξής: C sοlίd:«συμπαγές» περίγραμμα, δηλαδή χωρίς κάποια διακόσμηση, μια ενιαία γραμμή. Ο dashed: Περίγραμμα που αποτελείται από παύλες. U dotted: Περίγραμμα που αποτελείται από τελείες. Ο double: Σαν την τιμή solid, μόνο που δημιουργεί δύο περιγράμματα, η απόσταση και το πάχος των οποίων δεν μπορούν να ρυθμιστούν χωριστά αλλά ρυθμίζονται αυτόματα ώστε το πάχος τους να είναι συνολικά όσο η τιμή που ορίσαμε στην ιδιότητα borderwidth. Συνήθως χρησιμοποιείται σε συνδυασμό με πάχος περιγράμματος 3px, για το οποίο δίνει ένα αρκετά καλαίσθητο αποτέλεσμα.

25 ο Υπάρχουν και οι τιμές groove, ήdge, inset, outset οι οποίες δημιουργούν διαφόρων ειδών «ψευδό-3d» περιγράμματα, οι οποίες καλύτερα να αποφεύγονται για λόγους αισθητικής. border ο Η ιδιότητα αυτή αποτελεί ουσιαστικά συντόμευση για να ορίσουμε με μία μόνο ιδιότητα όλες τις παραπάνω. Παραδείγματα χρήσης: border: 1 Opx solid #999999; border: 2px dashed; : Διάφορες χρήσιμες ιδιότητες padding ο Ορίζει το κενό που θα υπάρχει μεταξύ των ορίων ενός στοιχείου και των περιεχομένων του. Είναι πολύ σημαντικό να ορίζουμε padding σε στοιχεία στα οποία έχουμε ορίσει κάποιο περίγραμμα, ώστε να μην «κολλάνε» τα περιεχόμενα τους με το περίγραμμα, κάτι που φαίνεται ιδιαίτερα άσχημο και ερασιτεχνικό. Επίσης, καλό είνα ι να μην είστε ιδιαίτερα φειδωλοί με το padding. Περισσότερο padding δίνει πιο επαγγελματική εμφάνιση (μέχρι κάποιων ορίων φυσικά). Για να ορίσουμε διαφορετικό padding ανά πλευ ρά, μπορούμε ομοίως με το border, είτε να χρησιμοποιήσουμε τις ιδιότητες padding-top, padding-ήght, padding-bottom, padding-left, είτε να εισάγουμε και τις τέσσερις τιμές στην ιδιότητα padding με τη σειρά [top] [ήght][bottom] [left], είτε [top,bottom] [ήght,left]. Παραδείγματα: padding: 8px; padding: 2px 6px; padding: Opx 6px 6px 6px; margin ο Το αντίθετο ουσιαστικά του padding. Ορίζει τον χώρο μεταξύ των ορίων ενός στοιχείου και όσων το περιβάλλουν. Είναι ιδιαίτερα σημαντικό να ορίζουμε margin σε εικόνες, ώστε να έχουν απόσταση από τα περιεχόμενα τους, μιας και είναι ιδιαίτερα αντιαισθητικό να «κολλάνε» με το κείμενο. Φυσικά και εδώ μπορούμε να χρησιμοποιήσουμε είτε τις ιδιότητες margin-top, margin-ήght, margin-bottom, margin-left για να ορίσουμε διαφορετικές τιμές margin ανά πλευρά, είτε να εισάγουμε τις τέσσερις διαφορετικές τιμές margin με τη σειρά [top] [ήght] [bottom] [left], ή [top,bottom] [ήght,left]. Παραδείγματα: margin: 4px; margin: 2px 4px; margin: Opx 8px 2px 2px; width, height ο Όπως είναι προφανές, οι δύο αυτές ιδιότητες ορίζουν το πλάτος και το ύψος ενός στοιχείου, είτε σε ποσοστό (το οποίο υπολογίζεται βάσει του στοιχείου που το περιέχει), είτε σε κάποια μονάδα μήκους. Παραδείγματα: width: 1 OOpx; width: 90%; height: 300px; height: 100%;

ΓΕΩΠΟΝΙΚΗ ΣΧΟΛΗ ΑΠΘ Εργαστήριο Πληροφορικής στη Γεωργία

ΓΕΩΠΟΝΙΚΗ ΣΧΟΛΗ ΑΠΘ Εργαστήριο Πληροφορικής στη Γεωργία ΓΕΩΠΟΝΙΚΗ ΣΧΟΛΗ ΑΠΘ Εργαστήριο Πληροφορικής στη Γεωργία Δίκτυα ηλεκτρονικών υπολογιστών είναι υπολογιστές της ίδιας ή και διαφορετικής μάρκας συνδεδεμένοι μεταξύ τους σε τοπικό (local) ή ευρύ (wide) επίπεδο

Διαβάστε περισσότερα

Παρ όλο που στη χώρα μας το Internet έκανε αισθητή την παρουσία του τα τελευταία χρόνια, εντούτοις η ιστορία του είναι ήδη αρκετά μεγάλη.

Παρ όλο που στη χώρα μας το Internet έκανε αισθητή την παρουσία του τα τελευταία χρόνια, εντούτοις η ιστορία του είναι ήδη αρκετά μεγάλη. Παρ όλο που στη χώρα μας το Internet έκανε αισθητή την παρουσία του τα τελευταία χρόνια, εντούτοις η ιστορία του είναι ήδη αρκετά μεγάλη. Το 1957 η τότε Σοβιετική Ένωση θέτει σε τροχιά γύρω από τη Γη τον

Διαβάστε περισσότερα

<a href="http://www.somepage.com/somepage.html">μετάβαση στο κείμενο</a>.

<a href=http://www.somepage.com/somepage.html>μετάβαση στο κείμενο</a>. HTML Τα αρχεία της HTML έχουν ετικέτες (tags) που ορίζουν τη δομή και τη μορφοποίηση των ιστοσελίδων. Οι περισσότερες HTML ετικέτες τις συναντούμε ως ζεύγη τα οποία ενεργούν στα περιεχόμενα μεταξύ των

Διαβάστε περισσότερα

Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου. Μάθημα 5 ο Τεχνολογίες Διαδικτύου: HTML I

Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου. Μάθημα 5 ο Τεχνολογίες Διαδικτύου: HTML I Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου Μάθημα 5 ο Τεχνολογίες Διαδικτύου: HTML I Διαδικτυακή Εφαρμογή (1/2) Ως διαδικτυακή εφαρμογή μπορούμε

Διαβάστε περισσότερα

Κεφάλαιο 11: Εισαγωγή στην HTML. Εφαρμογές Πληροφορικής Κεφ. 11 Καραμαούνας Πολύκαρπος

Κεφάλαιο 11: Εισαγωγή στην HTML. Εφαρμογές Πληροφορικής Κεφ. 11 Καραμαούνας Πολύκαρπος Κεφάλαιο 11: Εισαγωγή στην HTML 1 11.1 Γενική εισαγωγή στην HTML Τι είναι η HTML HyperText Markup Language - Γλώσσα Χαρακτηρισμού Υπερ-Κειμένου είναι η βασική γλώσσα με την οποία πραγματοποιείται η δόμηση

Διαβάστε περισσότερα

Εισαγωγη στην html. Η δομή μιας ιστοσελίδας (αρχείο html) Η βασική δομή ενός αρχείου html είναι η εξής: <html> <head>

Εισαγωγη στην html. Η δομή μιας ιστοσελίδας (αρχείο html) Η βασική δομή ενός αρχείου html είναι η εξής: <html> <head> Εισαγωγη στην html Ο παγκόσμιος ιστός (αγγ.: World Wide Web ή www) είναι η πιο δημοφιλής υπηρεσία που μας παρέχει το Διαδίκτυο (Internet) και είναι ένα σύστημα διασυνδεδεμένων πληροφοριών (κειμένου, εικόνας,

Διαβάστε περισσότερα

Άσκηση 6 Επαναληπτική Άσκηση HTML

Άσκηση 6 Επαναληπτική Άσκηση HTML Άσκηση 6 Επαναληπτική Άσκηση HTML ΕΤΙΚΕΤΕΣ HTML ΕΤΙΚΕΤΑ ΠΕΡΙΓΡΑΦΗ ΙΔΙΟΤΗΤΕΣ ΙΔΙΟΤΗΤΑ ΤΙΜΗ ΠΕΡΙΓΡΑΦΗ Βασικές Ορίζει τον τύπο του αρχείου Ορίζει ένα αρχείο HTML Ορίζει ένα τίτλο

Διαβάστε περισσότερα

Η ΙΣΤΟΡΙΑ ΤΟΥ ΔΙΑΔΙΚΤΥΟ ΟΥ ΝΙΩΡΑ ΠΑΝΑΓΙΩΤΑ ΜΠΑΤΖΙΟΥ ΕΥΓΕΝΙΑ/ΕΛΕΝΗ Γ2 38o Γυμνάσιο Αθηνών ΕΤΟΣ 2011

Η ΙΣΤΟΡΙΑ ΤΟΥ ΔΙΑΔΙΚΤΥΟ ΟΥ ΝΙΩΡΑ ΠΑΝΑΓΙΩΤΑ ΜΠΑΤΖΙΟΥ ΕΥΓΕΝΙΑ/ΕΛΕΝΗ Γ2 38o Γυμνάσιο Αθηνών ΕΤΟΣ 2011 Η ΙΣΤΟΡΙΑ ΤΟΥ ΔΙΑΔΙΚ ΚΤΥΟΥ ΝΙΩΡΑ ΠΑΝΑΓΙΩΤΑ ΜΠΑΤΖΙΟΥ ΕΥΓΕΝΙΑ/ΕΛΕΝΗ Γ2 38o Γυμνάσιο Αθηνών ν ΕΤΟΣ 20111 ΠΕΡΙΕΧΟΜΕΝΑ: ΣΕΛΙΔΑ 2: ΠΕΡΙΕΧΟΜΕΝΑ ΣΕΛΙΔΑ 3: ΟΡΙΣΜΟΣ ΚΑΙ ΠΛΗΡΟΦΟΡΙΕΣ ΓΙΑ ΤΟ INTERNET ΣΕΛΙΔΑ 4: Η ΙΣΤΟΡΙΑ

Διαβάστε περισσότερα

Ποιες είναι οι κύριες ετικέτες που χρησιμοποιεί η HTML για την περιγραφή της συνολικής δομής μιας ιστοσελίδας;

Ποιες είναι οι κύριες ετικέτες που χρησιμοποιεί η HTML για την περιγραφή της συνολικής δομής μιας ιστοσελίδας; Τι είναι η HTML; Η HTML είναι το ακρωνύμιο των λέξεων HyperText Markup Language, δηλαδή Γλώσσα Χαρακτηρισμού Υπερ Κειμένου και βασίζεται στη γλώσσα SGML, Standard Generalized Markup Language, που είναι

Διαβάστε περισσότερα

Η γλώσσα HTML. Επιμέλεια: Δέγγλερη Σοφία

Η γλώσσα HTML. Επιμέλεια: Δέγγλερη Σοφία Η γλώσσα HTML Επιμέλεια: Δέγγλερη Σοφία Υπερκείμενο Το δομικό χαρακτηριστικό του Παγκόσμιου Ιστού Ένα αρχείο Απλό κείμενο και υπερσύνδεσμοι Υπερσύνδεσμος Μετάβαση σε διάφορα άλλα έγγραφα Αποτελείται από

Διαβάστε περισσότερα

Μαρία Αναγνώστου Β 1 1. Η ΙΣΤΟΡΙΑ ΤΟΥ INTERNET

Μαρία Αναγνώστου Β 1 1. Η ΙΣΤΟΡΙΑ ΤΟΥ INTERNET Μαρία Αναγνώστου Β 1 1. Η ΙΣΤΟΡΙΑ ΤΟΥ INTERNET Το σημερινό Internet αποτελεί εξέλιξη του ARPANET, ενός δικτύου που άρχισε να αναπτύσσεται πειραματικά στα τέλη της δεκαετίας του 60 στις ΗΠΑ. Δεκαετία 60:

Διαβάστε περισσότερα

Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) Cascading Style Sheets (CSS) Τα Cascading Style Sheets προσφέρουν έναν εύκολο τρόπο για να ορίσουμε τη μορφοποίηση που επιθυμούμε να έχουν οι σελίδες μία τοποθεσίας του Παγκόσμιου Ιστού που δημιουργούμε.

Διαβάστε περισσότερα

Εισαγωγή στο CSS Από: Λία Βέρου

Εισαγωγή στο CSS Από: Λία Βέρου Εισαγωγή στο CSS Από: Λία Βέρου Τι είναι το CSS (Cascading Style Sheets); To CSS είναι μια απλή γλώσσα που μας βοηθάει να ορίσουμε με σαφήνεια και ιδιαίτερη ευελιξία τον τρόπο με τον οποίο θα εμφανίζονται

Διαβάστε περισσότερα

Εισαγωγή στο CSS Από: Μιχαήλια Κομβούτη Βέρου

Εισαγωγή στο CSS Από: Μιχαήλια Κομβούτη Βέρου Εισαγωγή στο CSS Από: Μιχαήλια Κομβούτη Βέρου Τι είναι το CSS (Cascading Style Sheets); To CSS είναι μια απλή γλώσσα που μας βοηθάει να ορίσουμε με σαφήνεια και ιδιαίτερη ευελιξία τον τρόπο με τον οποίο

Διαβάστε περισσότερα

3. ΕΙΣΑΓΩΓΗ ΣΤΟ CSS ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ

3. ΕΙΣΑΓΩΓΗ ΣΤΟ CSS ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ 2014 3. ΕΙΣΑΓΩΓΗ ΣΤΟ CSS ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ Εισαγωγή Το CSS (Cascading Style Sheets) είναι αρχεία με κατάληξη.css τα οποία καθορίζουν την μορφοποίηση των ιστοσελίδων. Μέσω αυτών επιτυγχάνεται

Διαβάστε περισσότερα

Εισαγωγή στον Παγκόσμιο ιστό και στη γλώσσα Html. Χρ. Ηλιούδης

Εισαγωγή στον Παγκόσμιο ιστό και στη γλώσσα Html. Χρ. Ηλιούδης Εισαγωγή στον Παγκόσμιο ιστό και στη γλώσσα Html Χρ. Ηλιούδης Παγκόσμιος Ιστός (WWW) Ο Παγκόσμιος Ιστός (World Wide Web WWW), ή απλώς Ιστός, βασίζεται στην ιδέα των κατανεμημένων πληροφοριών. Αντί όλες

Διαβάστε περισσότερα

Βασίλειος Κοντογιάννης ΠΕ19

Βασίλειος Κοντογιάννης ΠΕ19 Ενότητα3 Επικοινωνία και Διαδίκτυο 11.1 Γενική Εισαγωγή στην HTML Τι είναι η HTML (HyperText Markup Language); Είναι μια γλώσσα σήμανσης (Markup) με την οποία πραγματοποιείται η δόμηση σελίδων του Παγκόσμιου

Διαβάστε περισσότερα

Εργαλεία Ανάπτυξης Εφαρμογών Internet. Δ.Ι.Ε.Κ. Γλυφάδας Τεχνικός Εφαρμογών Πληροφορικής

Εργαλεία Ανάπτυξης Εφαρμογών Internet. Δ.Ι.Ε.Κ. Γλυφάδας Τεχνικός Εφαρμογών Πληροφορικής Εργαλεία Ανάπτυξης Εφαρμογών Internet Δ.Ι.Ε.Κ. Γλυφάδας Τεχνικός Εφαρμογών Πληροφορικής Το πρότυπο CSS Α Μέρος 2 CSS (Cascading Style Sheets)(1) Ορίζουν την εμφάνιση των στοιχείων σε ένα έγγραφο HTML.

Διαβάστε περισσότερα

Γαβαλάς Δαμιανός dgavalas@aegean.gr

Γαβαλάς Δαμιανός dgavalas@aegean.gr Πανεπιστήμιο Αιγαίου Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας Δικτυακά Πολυμέσα IΙ (Β Έτος, 4ο εξ) Εργαστήριο #3ο: Ορισμός επιλογέων, μορφοποίηση με CSS Γαβαλάς Δαμιανός

Διαβάστε περισσότερα

Europe Code Week 7-22 Οκτωβρίου Μία γιορτή δημιουργίας με κώδικα

Europe Code Week 7-22 Οκτωβρίου Μία γιορτή δημιουργίας με κώδικα Europe Code Week 7-22 Οκτωβρίου 2017 7-22 October 2017 Μία γιορτή δημιουργίας με κώδικα @CodeWeekEU #codeeu codeeu Εισαγωγή στο Web Development CSS Λίγα λόγια... Η γλώσσα CSS χρησιμοποιείται για τη μορφοποίηση

Διαβάστε περισσότερα

Σε αυτό το µάθηµα θα ασχοληθούµε µε τη βελτίωση της εµφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισµό όλων των αλλαγών στην εµφάνιση της σελίδας

Σε αυτό το µάθηµα θα ασχοληθούµε µε τη βελτίωση της εµφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισµό όλων των αλλαγών στην εµφάνιση της σελίδας Σε αυτό το µάθηµα θα ασχοληθούµε µε τη βελτίωση της εµφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισµό όλων των αλλαγών στην εµφάνιση της σελίδας µέσω της τεχνολογίας των ιαδοχικών Φύλλων Στυλ (cascading

Διαβάστε περισσότερα

Αλεξιάδης Γεώργιος (ΠΕ86) -

Αλεξιάδης Γεώργιος (ΠΕ86) - 11.1 Γενική Εισαγωγή στην HTML Τι είναι η HTML; HyperText Markup Language (Γλώσσα Χαρακτηρισμού Υπερ-Κειμένου) Βασίζεται στην SGML (Standard Generalized Markup Language) που είναι ένα πολύ μεγαλύτερο σύστημα

Διαβάστε περισσότερα

CSS. Εισαγωγή & Βασικές έννοιες. Cascading Style Sheets. Επικαλυπτόμενα φύλλα στυλ

CSS. Εισαγωγή & Βασικές έννοιες. Cascading Style Sheets. Επικαλυπτόμενα φύλλα στυλ CSS Εισαγωγή & Βασικές έννοιες Cascading Style Sheets Επικαλυπτόμενα φύλλα στυλ Περιεχόμενα Τι είναι CSS Πλεονεκτήματα CSS μορφοποίησης Συντακτικό του CSS Ιδιότητες CSS Εφαρμογή CSS κανόνων Επικάλυψη CSS

Διαβάστε περισσότερα

Ετικέτες HTML. <!-->: Τα σχόλια χρησιμοποιούνται για να γράφουμε σημειώσεις μέσα στον

Ετικέτες HTML. <!-->: Τα σχόλια χρησιμοποιούνται για να γράφουμε σημειώσεις μέσα στον Ετικέτες HTML : Τα σχόλια χρησιμοποιούνται για να γράφουμε σημειώσεις μέσα στον πηγαίο κώδικα για να διευκολύνουμε την επεξεργασία και την συντήρηση του αρχείου. Τα σχόλια δεν εμφανίζονται στην οθόνη

Διαβάστε περισσότερα

Εισαγωγή σε HTML και CSS. Παναγιώτης Τσαρχόπουλος

Εισαγωγή σε HTML και CSS. Παναγιώτης Τσαρχόπουλος Εισαγωγή σε HTML και CSS Παναγιώτης Τσαρχόπουλος Περιεχόμενα Εισαγωγικές έννοιες Ορολογία και σύνταξη Κείμενο σε HTML έγγραφα Σύνδεσμοι Ψηφιακές - Ευφυείς Πόλεις - Εισαγωγή σε HTML και CSS 2 Εισαγωγικές

Διαβάστε περισσότερα

Ref.: SLWS 1 5Copyright 2005 The European Computer Driving Licence Foundation Ltd Σελίδα 1 από 7

Ref.: SLWS 1 5Copyright 2005 The European Computer Driving Licence Foundation Ltd Σελίδα 1 από 7 The European Computer Driving Licence Foundation Ltd Σελίδα 1 από 7 ΣΤΟΧΟΙ ΕΞΕΤΑΣΗΣ Η ενότητα ECDL WebStarter απαιτεί από τον Υποψήφιο να κατανοεί τις κύριες έννοιες της σχεδίασης και δημοσίευσης δικτυακών

Διαβάστε περισσότερα

Στην τεχνολογία των CSS, οι κανόνες στυλ (style

Στην τεχνολογία των CSS, οι κανόνες στυλ (style Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #4 0 : CSS: Βασικές και προχωρημένες τεχνικές επιλογής, τα στοιχεία και , ψευδο κλάσεις και ψευδο επιλογείς Γαβαλάς Δαμιανός dgavalas@aegean.gr CSS κανόνες στυλ

Διαβάστε περισσότερα

Βασικά στοιχεία του CSS

Βασικά στοιχεία του CSS Βασικά στοιχεία του CSS Περιεχόμενα Τι είναι CSS Πλεονεκτήματα CSS μορφοποίησης Συντακτικό του CSS Ιδιότητες CSS Εφαρμογή CSS κανόνων Επικάλυψη CSS κανόνων 2 Μορφοποίηση με HTML Η HTML είναι σχεδιασμένη

Διαβάστε περισσότερα

Οδηγίες Στο σημερινό εργαστήριο θα αρχίσετε να χρησιμοποιείτε βασικές οδηγίες μορφοποίησης της ιστοσελίδας σας (κάτι που έχουμε αποφύγει έως τώρα!).

Οδηγίες Στο σημερινό εργαστήριο θα αρχίσετε να χρησιμοποιείτε βασικές οδηγίες μορφοποίησης της ιστοσελίδας σας (κάτι που έχουμε αποφύγει έως τώρα!). Εργαστήριο #8 Τι πρέπει να έχετε ολοκληρώσει από το προηγούμενο εργαστήριο. Το σημερινό εργαστήριο είναι ανεξάρτητο από τα προηγούμενα, επειδή όμως θα ζητηθεί να ανακυκλώσετε υλικό από εκείνα, βεβαιωθείτε

Διαβάστε περισσότερα

CSS Εργαστήριο 1. Εισαγωγή - Σύνταξη - Εφαρμογή στην HTML

CSS Εργαστήριο 1. Εισαγωγή - Σύνταξη - Εφαρμογή στην HTML CSS Εργαστήριο 1. Εισαγωγή - Σύνταξη - Εφαρμογή στην HTML Εισαγωγή Το CSS (Cascading Style Sheets ή Επικαλυπτόμενα Φύλλα Στυλ) μας επιτρέπει να αλλάξουμε τον τρόπο με τον οποίο παρουσιάζονται τα στοιχεία

Διαβάστε περισσότερα

Α ΛΥΚΕΙΟΥ - ΕΦΑΡΜΟΓΕΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΜΑΪΟΣ 2019 ΕΝΔΕΙΚΤΙΚΕΣ ΕΡΩΤΗΣΕΙΣ ΚΑΤΑΝΟΗΣΗΣ

Α ΛΥΚΕΙΟΥ - ΕΦΑΡΜΟΓΕΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΜΑΪΟΣ 2019 ΕΝΔΕΙΚΤΙΚΕΣ ΕΡΩΤΗΣΕΙΣ ΚΑΤΑΝΟΗΣΗΣ Το υλικό αυτό δίνεται στους μαθητές για τη σωστή μελέτη της διδαχθείσας ύλης του μέρους Β. Πρόκειται για ένα συμπαγή κορμό ερωτήσεων και ασκήσεων οι οποίες καλύφθηκαν κατά τη διάρκεια της έως τώρα σχολικής

Διαβάστε περισσότερα

Σπουδές CAD, Πληροφορικής, Οικονομίας, Διοίκησης και D.T.P. με Σύστημα διδασκαλίας facetoface

Σπουδές CAD, Πληροφορικής, Οικονομίας, Διοίκησης και D.T.P. με Σύστημα διδασκαλίας facetoface Copyright 2009-2012 -SYSTEM- All rights reserved 2/159 ΠΕΡΙΕΧΟΜΕΝΑ Μάθημα 1: New - Save Μάθημα 2: Εισαγωγή στη CSS Μάθημα 3: Τρόπος Σύνταξης Μάθημα 4: Σχόλια Μάθημα 5: ID Μάθημα 6: Class Μάθημα 7: Background

Διαβάστε περισσότερα

Η γλώσσα CSS χρησιμοποιείται για τη μορφοποίηση ιστοσελίδων και η σύνταξη της είναι αρκετά απλή.

Η γλώσσα CSS χρησιμοποιείται για τη μορφοποίηση ιστοσελίδων και η σύνταξη της είναι αρκετά απλή. Εισαγωγή στο CSS Η γλώσσα CSS χρησιμοποιείται για τη μορφοποίηση ιστοσελίδων και η σύνταξη της είναι αρκετά απλή. Πλεονεκτήματα CSS έναντι χρήσης μόνο HTML Μεγαλύτερη ευελιξία μορφοποιήσεων. Το CSS κατέστησε

Διαβάστε περισσότερα

Νέες Τεχνολογίες στην Εκπαίδευση

Νέες Τεχνολογίες στην Εκπαίδευση Σχολή Εφαρμοσμένων Μαθηματικών και Φυσικών Επιστημών Εθνικό Μετσόβιο Πολυτεχνείο Νέες Τεχνολογίες στην Εκπαίδευση Επάλληλα φύλλα στυλ (CSS): Μια εισαγωγή Στεφανέας Πέτρος Ζαμαρίας Βασίλης Άδεια Χρήσης

Διαβάστε περισσότερα

Το απεικονιστικό μοντέλο μορφοποίησης των CSS

Το απεικονιστικό μοντέλο μορφοποίησης των CSS Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #6 0 : CSS: Χρήση των ιδιοτήτων του κουτιού (box properties). Διάταξη σελίδων Γαβαλάς Δαμιανός dgavalas@aegean.gr Το απεικονιστικό μοντέλο μορφοποίησης των CSS Περιγράφει

Διαβάστε περισσότερα

Διάλεξη 2η Εισαγωγή στο CSS

Διάλεξη 2η Εισαγωγή στο CSS Διάλεξη 2η Εισαγωγή στο CSS Στέλιος Μόσχογλου Θεοδόσης Σουργκούνης Αντώνης Χρυσόπουλος I S S E L D e c o d e (Intelligent Systems & Software Engineering Lab) Στόχος της ώρας Τι είναι το CSS? Γιατί να χρησιμοποιήσω

Διαβάστε περισσότερα

ΤΕΙ ΚΑΒΑΛΑΣ. Πτυχιακή εργασία ΕΙΣΑΓΩΓΗ. Μιλτιάδης Κακλαμάνης

ΤΕΙ ΚΑΒΑΛΑΣ. Πτυχιακή εργασία ΕΙΣΑΓΩΓΗ. Μιλτιάδης Κακλαμάνης Σελίδα 1από ΤΕΙ ΚΑΒΑΛΑΣ Πτυχιακή εργασία Δικτυακή Εφαρμογή διαχείρισης ηλεκτρονικών εγγράφων υπηρεσίας. ΕΙΣΑΓΩΓΗ Μιλτιάδης Κακλαμάνης Σελίδα 2από Κατάλογος περιεχομένων ΕΙΣΑΓΩΓΗ...1 Σχετιζόμενα πρόσωπα...3

Διαβάστε περισσότερα

Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας

Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας Πανεπιστήμιο Αιγαίου Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας ικτυακά Πολυμέσα Ι (Β Έτος, 3ο εξ) ιάλεξη #6η: HTML: ετικέτες ΜΕΤΑ, Cascading Style Sheet (CSS) Γαβαλάς Δαμιανός

Διαβάστε περισσότερα

Σε αυτό το μάθημα θα ασχοληθούμε με τη βελτίωση της εμφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισμό όλων των αλλαγών τις οποίες επιθυμούμε να

Σε αυτό το μάθημα θα ασχοληθούμε με τη βελτίωση της εμφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισμό όλων των αλλαγών τις οποίες επιθυμούμε να Σε αυτό το μάθημα θα ασχοληθούμε με τη βελτίωση της εμφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισμό όλων των αλλαγών τις οποίες επιθυμούμε να κάνουμε μέσω ενός εξωτερικού αρχείου.το αρχείο αυτό

Διαβάστε περισσότερα

Περιεχόμενα. Γαβαλάς Δαμιανός

Περιεχόμενα. Γαβαλάς Δαμιανός Δικτυακά Πολυμέσα ΙΙ Διάλεξη #5 η : Τυπογραφία στο web Γαβαλάς Δαμιανός dgavalas@aegean.gr Περιεχόμενα Κατανόηση αρχών σχεδιασμού με γραμματοσειρές Κατανόηση των μονάδων μέτρησης που χρησιμοποιούνται στα

Διαβάστε περισσότερα

Σχεδιασμός και Ανάπτυξη Ιστοτόπων. ΕΠΑ.Λ. ΑΛΙΜΟΥ Τομέας Πληροφορικής Κ. Φλώρος

Σχεδιασμός και Ανάπτυξη Ιστοτόπων. ΕΠΑ.Λ. ΑΛΙΜΟΥ Τομέας Πληροφορικής Κ. Φλώρος Σχεδιασμός και Ανάπτυξη Ιστοτόπων ΕΠΑ.Λ. ΑΛΙΜΟΥ Τομέας Πληροφορικής Κ. Φλώρος H γλώσσα HTML Άλλες Βιβλιογραφικές πηγές για HTML http://www.w3schools.com/html/ http://www.it.uom.gr/project/html2/lessons.html

Διαβάστε περισσότερα

ΕΠΛ 012 Εισαγωγή στο Παγκόσμιο Πλέγμα Πληροφοριών

ΕΠΛ 012 Εισαγωγή στο Παγκόσμιο Πλέγμα Πληροφοριών ΕΠΛ 012 Εισαγωγή στο Παγκόσμιο Πλέγμα Πληροφοριών World Wide Web (WWW) Θέματα Επεξεργασία δεδομένων στο Web Δημιουργία απλών σελίδων HTML Περιγραφή κάποιων XHTML στοιχείων (tags) Εξέλιξης του WWW Το WWW

Διαβάστε περισσότερα

Η Βίβλος των CSS. Εισαγωγή στα CSS

Η Βίβλος των CSS. Εισαγωγή στα CSS Η Βίβλος των CSS Εισαγωγή στα CSS Τα Διαδοχικά Φύλλα Στυλ (CSS, Cascading Style Sheets) αποτελούν ένα πολύ καλό εργαλείο για να μπορούμε να αλλάζουμε την εμφάνιση και τη διάταξη (layout) των ιστοσελίδων

Διαβάστε περισσότερα

Εργαστήριο #9 Τι πρέπει να έχετε ολοκληρώσει από το προηγούμενο εργαστήριο. βεβαιωθείτε ότι έχετε ολοκληρώσει τις προηγούμενες ασκήσεις Οδηγίες

Εργαστήριο #9 Τι πρέπει να έχετε ολοκληρώσει από το προηγούμενο εργαστήριο. βεβαιωθείτε ότι έχετε ολοκληρώσει τις προηγούμενες ασκήσεις Οδηγίες Εργαστήριο #9 Τι πρέπει να έχετε ολοκληρώσει από το προηγούμενο εργαστήριο. Το σημερινό εργαστήριο είναι ανεξάρτητο από τα προηγούμενα, επειδή όμως θα ζητηθεί να ανακυκλώσετε υλικό από εκείνα, βεβαιωθείτε

Διαβάστε περισσότερα

Βαρβάκειο Πρότυπο Γυμνάσιο

Βαρβάκειο Πρότυπο Γυμνάσιο Παραδόσεις & εργαστηριακές ασκήσεις στην HTML Βαρβάκειο Πρότυπο Γυμνάσιο Σχολ. Χρονιά 2016-2017 Θ. Οτζάκογλου Εργαστήρι Πληροφορικής Σχολ. Έτος 2016 2017 Αν και δεν είναι μία ακόμη «γλώσσα προγραμματισμού»,

Διαβάστε περισσότερα

ΗTML και XHTML Βασικές. Βασική σύνταξη HTML και HTML Ηδομή μιας HTML σελίδας

ΗTML και XHTML Βασικές. Βασική σύνταξη HTML και HTML Ηδομή μιας HTML σελίδας ΗTML και XHTML Βασικές έννοιες Βασική σύνταξη HTML και HTML Ηδομή μιας HTML σελίδας Η γραμματική της ΗΤML Όπως κάθε γλώσσα έχει μια γραμματική

Διαβάστε περισσότερα

Πρωτόκολλα Επικοινωνίας και Τείχος Προστασίας

Πρωτόκολλα Επικοινωνίας και Τείχος Προστασίας Β5.1.2 Πρωτόκολλα Επικοινωνίας και Τείχος Προστασίας Τι θα μάθουμε σήμερα: Να ορίζουμε τι είναι πρωτόκολλο επικοινωνίας Να εξηγούμε τη χρησιμότητα των πρωτοκόλλων επικοινωνίας Να ονομάζουμε τα σημαντικότερα

Διαβάστε περισσότερα

Περιεχόμενα. Λίγα λόγια από το συγγραφέα... 7

Περιεχόμενα. Λίγα λόγια από το συγγραφέα... 7 Περιεχόμενα Λίγα λόγια από το συγγραφέα... 7 Μέρος 1 1 Βασικοί όροι... 11 2 Βασική δομή κώδικα HTML... 25 3 Μορφοποίηση κειμένου... 39 4 Μορφοποίηση παραγράφων... 51 5 Εισαγωγή εικόνας... 63 6 Λίστες με

Διαβάστε περισσότερα

Δυναμικές Ιστοσελίδες στο Πανελλήνιο Σχολικό Δίκτυο

Δυναμικές Ιστοσελίδες στο Πανελλήνιο Σχολικό Δίκτυο Δυναμικές Ιστοσελίδες στο Πανελλήνιο Σχολικό Δίκτυο Δρ. Χρήστος Όροβας Τεχνικός Υπεύθυνος 1 Διαδικασία «Φόρτωσης» μιας Ιστοσελίδας Internet Explorer, Mozilla, Chrome, κτλ HTTP Server ΠΣΔ Αίτημα για επικοινωνία

Διαβάστε περισσότερα

Διαδίκτυο: Ιστορία, Δομή, Υπηρεσίες

Διαδίκτυο: Ιστορία, Δομή, Υπηρεσίες Διαδίκτυο: Ιστορία, Δομή, Υπηρεσίες 1 η Ερώτηση (Ορισμός): Τι είναι το Διαδίκτυο; Διαδίκτυο είναι το παγκόσμιο δίκτυο όλων των επιμέρους δικτύων που έχουν συμφωνήσει σε κοινούς κανόνες επικοινωνίας και

Διαβάστε περισσότερα

Επαναληπτική Άσκηση ΕΤΙΚΕΤΕΣ HTML

Επαναληπτική Άσκηση ΕΤΙΚΕΤΕΣ HTML Επαναληπτική Άσκηση ΕΤΙΚΕΤΕΣ HTML ΕΤΙΚΕΤΑ ΠΕΡΙΓΡΑΦΗ ΙΔΙΟΤΗΤΕΣ ΙΔΙΟΤΗΤΑ ΤΙΜΗ ΠΕΡΙΓΡΑΦΗ Βασικές Ορίζει ένα αρχείο HTML Ορίζει ένα τίτλο για το αρχείο Ορίζει το σώµα της background URL

Διαβάστε περισσότερα

ΒΑΣΙΚΕΣ ΥΠΗΡΕΣΙΕΣ Βελώνης Γεώργιος ΤΟΥ ΔΙΑΔΙΚΤΥΟΥ. Μάθημα 2ο. Βελώνης Γεώργιος - 1ο Τ.Ε.Ε. Κατερίνης. Καθηγητής Πληροφορικής ΠΕ20 2-1

ΒΑΣΙΚΕΣ ΥΠΗΡΕΣΙΕΣ Βελώνης Γεώργιος ΤΟΥ ΔΙΑΔΙΚΤΥΟΥ. Μάθημα 2ο. Βελώνης Γεώργιος - 1ο Τ.Ε.Ε. Κατερίνης. Καθηγητής Πληροφορικής ΠΕ20 2-1 ΒΑΣΙΚΕΣ ΥΠΗΡΕΣΙΕΣ Βελών ΤΟΥ ΔΙΑΔΙΚΤΥΟΥ Μάθημα 2ο Βελών - 1ο Τ.Ε.Ε. Κατερίν Καθηγητής Πληροφορικής ΠΕ20 2-1 Τεχνολογίες Μεταγωγής Δεδομένων Δίκτυα Μεταγωγής Βελών Βελών Δίκτυα Μεταγωγής Δίκτυα Μεταγωγής

Διαβάστε περισσότερα

CSS 1. Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Δ. Ζήνδρος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών

CSS 1. Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Δ. Ζήνδρος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών CSS 1 Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Δ. Ζήνδρος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών Άδεια Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες χρήσης Creative

Διαβάστε περισσότερα

Γαβαλάς Δαμιανός dgavalas@aegean.gr. Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #3 0 : Εισαγωγή στacascading Style Sheets (CSS)

Γαβαλάς Δαμιανός dgavalas@aegean.gr. Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #3 0 : Εισαγωγή στacascading Style Sheets (CSS) Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #3 0 : Εισαγωγή στacascading Style Sheets (CSS) Γαβαλάς Δαμιανός dgavalas@aegean.gr Επικαλυπτόμενα Φύλλα Στυλ (Cascading Style Sheets, CSS) Η (X)HTML προσδιορίζει τη βασική

Διαβάστε περισσότερα

Τεχνολογίες & Εφαρμογές Πληροφορικής Ενότητα 8: Διαδίκτυο Βασικές Έννοιες

Τεχνολογίες & Εφαρμογές Πληροφορικής Ενότητα 8: Διαδίκτυο Βασικές Έννοιες ΑΡΙΣΤΟΤΕΛΕΙΟ ΠΑΝΕΠΙΣΤΗΜΙΟ ΘΕΣΣΑΛΟΝΙΚΗΣ ΑΝΟΙΚΤΑ ΑΚΑΔΗΜΑΙΚΑ ΜΑΘΗΜΑΤΑ Τεχνολογίες & Εφαρμογές Πληροφορικής Ενότητα 8: Διαδίκτυο Βασικές Έννοιες Ανδρέας Βέγλης, Αναπληρωτής Καθηγητής Άδειες Χρήσης Το παρόν

Διαβάστε περισσότερα

Hyper Text Markup Language (HTML) που σημαίνει γλώσσα σήμανσης υπερκειμένου.

Hyper Text Markup Language (HTML) που σημαίνει γλώσσα σήμανσης υπερκειμένου. Hyper Text Markup Language (HTML) που σημαίνει γλώσσα σήμανσης υπερκειμένου. 1 η ΑΣΚΗΣΗ Οι HTML σελίδες είναι απλές σελίδες κειμένου και μπορούν να δημιουργηθούν από οποιοδήποτε πρόγραμμα επεξεργασίας

Διαβάστε περισσότερα

TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)

TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα Εαρινό εξάμηνο Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί

Διαβάστε περισσότερα

Η ΓΛΩΣΣΑ ΕΠΙΚΑΛΥΠΤΩΜΕΝΩΝ ΜΟΡΦΟΠΟΙΗΣΕΩΝ CSS

Η ΓΛΩΣΣΑ ΕΠΙΚΑΛΥΠΤΩΜΕΝΩΝ ΜΟΡΦΟΠΟΙΗΣΕΩΝ CSS Η ΓΛΩΣΣΑ ΕΠΙΚΑΛΥΠΤΩΜΕΝΩΝ ΜΟΡΦΟΠΟΙΗΣΕΩΝ CSS Πίνακες Ιδιοτήτων Μορφοποίησης CSS Ιδιότητες Διαστασιολόγησης Στοιχείων height Ορίζει το ύψος ενός στοιχείου auto lenght (px) line-height Ορίζει το ύφος μιας

Διαβάστε περισσότερα

7-22 Οκτωβρίου Μία γιορτή δημιουργίας με κώδικα. Europe Code Week

7-22 Οκτωβρίου Μία γιορτή δημιουργίας με κώδικα. Europe Code Week 7-22 Οκτωβρίου 2017 Μία γιορτή δημιουργίας με κώδικα @ #codeeu codeeu 7-22 October 2017 Europe Code Week Εισαγωγή στο Web Development HTML Λίγα λόγια... Η HTML είναι η βασική γλώσσα γραφής των ιστοσελίδων!

Διαβάστε περισσότερα

Γλώσσες Σήµανσης (Markup Languages) Τεχνολογία ιαδικτύου και Ηλεκτρονικό Εµπόριο

Γλώσσες Σήµανσης (Markup Languages) Τεχνολογία ιαδικτύου και Ηλεκτρονικό Εµπόριο Γλώσσες Σήµανσης (Markup Languages) Τεχνολογία ιαδικτύου και Ηλεκτρονικό Εµπόριο 1 Γλώσσες Σήµανσης Γλώσσες σήµανσης: Αρχικά για τον καθορισµό εµφάνισης σελίδων, γραµµατοσειρών. Στη συνέχεια επεκτάθηκαν

Διαβάστε περισσότερα

Βασίλειος Κοντογιάννης ΠΕ19

Βασίλειος Κοντογιάννης ΠΕ19 Ενότητα3 Επικοινωνία και Διαδίκτυο 11.1 Γενική Εισαγωγή στην HTML Τι είναι η HTML (HyperText Markup Language); Είναι μια γλώσσα σήμανσης (Markup) με την οποία πραγματοποιείται η δόμηση σελίδων του Παγκόσμιου

Διαβάστε περισσότερα

1. <body> 2. <header> 3. <h1> My Page </h1> 4. </header> 5. <section>

1. <body> 2. <header> 3. <h1> My Page </h1> 4. </header> 5. <section> Ενδεικτικές ερωτήσεις 1. Τι σημαίνουν τα αρχικά CSS 2. Τι σημαίνουν τα αρχικά HTML 3. Ποια η διαφορά μεταξύ Internet και Web; a. Είναι το ίδιο b. Το Web είναι μια υπηρεσία του διαδικτύου 4. Ποια η διαφορά

Διαβάστε περισσότερα

Εισαγωγή στην HTML. Κεφ. HTML + CSS

Εισαγωγή στην HTML. Κεφ. HTML + CSS Εισαγωγή στην HTML Κεφ. HTML + CSS Συστατικά καλής Ιστοσελίδας α) HTML για το Περιεχόμενο β) CSS για τη μορφοποίηση γ) Javascript για διαδραστικότητα Παράδειγμα Ολυμπιακός Πανιώνιος ΠΑΟΚ Παναθηναϊκός Ξάνθη

Διαβάστε περισσότερα

Εξεταστέα Ύλη (Syllabus) Έκδοση 1.5

Εξεταστέα Ύλη (Syllabus) Έκδοση 1.5 Εξεταστέα Ύλη (Syllabus) Έκδοση 1.5 Πνευματικά Δικαιώματα 2005 Ίδρυμα ECDL (ECDL Foundation www.ecdl.com) Όλα τα δικαιώματα είναι κατοχυρωμένα. Κανένα μέρος αυτού του εγγράφου δεν μπορεί να αναπαραχθεί

Διαβάστε περισσότερα

Εισαγωγή στις ΤΠΕ ΙΙ Γιάννης Βρέλλης ΠΤΔΕ-Πανεπιστήμιο Ιωαννίνων. World Wide Web. Παγκόσμιος Ιστός

Εισαγωγή στις ΤΠΕ ΙΙ Γιάννης Βρέλλης ΠΤΔΕ-Πανεπιστήμιο Ιωαννίνων. World Wide Web. Παγκόσμιος Ιστός Εισαγωγή στις ΤΠΕ ΙΙ Γιάννης Βρέλλης ΠΤΔΕ-Πανεπιστήμιο Ιωαννίνων World Wide Web Παγκόσμιος Ιστός Internet - WWW Internet: παγκόσμιο δίκτυο υπολογιστών που βασίζεται στο πρωτόκολο επικοινωνίας TCP/IP και

Διαβάστε περισσότερα

Θέματα Προγραμματισμού Διαδικτύου ~ CSS ~

Θέματα Προγραμματισμού Διαδικτύου ~ CSS ~ Θέματα Προγραμματισμού Διαδικτύου ~ CSS ~ Στελιος Σφακιανάκης Εαρινό 2019 Αυτή η εργασία χορηγείται με άδεια Creative Commons Αναφορά Δημιουργού - Μη Εμπορική Χρήση - Παρόμοια Διανομή 1 Εισαγωγή στο CSS

Διαβάστε περισσότερα

Διαδίκτυο είναι ένα σύστημα διασυνδεδεμένων δικτύων και υπολογιστών που απλώνεται σε όλο τον κόσμο και έχουν πρόσβαση σε αυτό εκατομμύρια χρήστες.

Διαδίκτυο είναι ένα σύστημα διασυνδεδεμένων δικτύων και υπολογιστών που απλώνεται σε όλο τον κόσμο και έχουν πρόσβαση σε αυτό εκατομμύρια χρήστες. Διαδίκτυο είναι ένα σύστημα διασυνδεδεμένων δικτύων και υπολογιστών που απλώνεται σε όλο τον κόσμο και έχουν πρόσβαση σε αυτό εκατομμύρια χρήστες. Για να επιτευχθεί αυτό όλοι οι υπολογιστές και τα επιμέρους

Διαβάστε περισσότερα

Σχεδιασμός και Ανάπτυξη Ιστοσελίδων ΙΙ ΙΕΚ ΤΡΙΑΝΔΡΙΑΣ ΓΡΑΦΙΣΤΑΣ ΕΝΤΥΠΟΥ ΚΑΙ ΗΛΕΚΤΡΟΝΙΚΩΝ ΜΕΣΩΝ. CSS - Cascading Style Sheets

Σχεδιασμός και Ανάπτυξη Ιστοσελίδων ΙΙ ΙΕΚ ΤΡΙΑΝΔΡΙΑΣ ΓΡΑΦΙΣΤΑΣ ΕΝΤΥΠΟΥ ΚΑΙ ΗΛΕΚΤΡΟΝΙΚΩΝ ΜΕΣΩΝ. CSS - Cascading Style Sheets Σχεδιασμός και Ανάπτυξη Ιστοσελίδων ΙΙ ΙΕΚ ΤΡΙΑΝΔΡΙΑΣ ΓΡΑΦΙΣΤΑΣ ΕΝΤΥΠΟΥ ΚΑΙ ΗΛΕΚΤΡΟΝΙΚΩΝ ΜΕΣΩΝ CSS - Cascading Style Sheets Τι είναι τα CSS; Τα CSS (Διαδοχικά Φύλλα Στυλ) αποτελούν ένα πολύ καλό εργαλείο

Διαβάστε περισσότερα

Η Βίβλος των CSS - Μέρος 3 Το Box Model, τα Περιθώρια και τα Περιγράμματα

Η Βίβλος των CSS - Μέρος 3 Το Box Model, τα Περιθώρια και τα Περιγράμματα Η Βίβλος των CSS - Μέρος 3 Το Box Model, τα Περιθώρια και τα Περιγράμματα Το Box Model Το box model στα CSS περιγράφει τα πλαίσια (boxes) που δημιουργούνται για τα στοιχεία (elements) της HTML. Το box

Διαβάστε περισσότερα

Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου. Μάθημα 6 ο Τεχνολογίες Διαδικτύου: HTML II

Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου. Μάθημα 6 ο Τεχνολογίες Διαδικτύου: HTML II Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου Μάθημα 6 ο Τεχνολογίες Διαδικτύου: HTML II Εισαγωγή Εικόνων Οι φυλλομετρητές μπορούν να εμφανίσουν ένθετες

Διαβάστε περισσότερα

Εισαγωγή στην Επιστήμη Υπολογιστών. Εισαγωγή στην HTML. Άννα Κεφάλα Παναγιώτα Μιχόλια

Εισαγωγή στην Επιστήμη Υπολογιστών. Εισαγωγή στην HTML. Άννα Κεφάλα Παναγιώτα Μιχόλια Εισαγωγή στην Επιστήμη Υπολογιστών Εισαγωγή στην HTML Άννα Κεφάλα Παναγιώτα Μιχόλια Εργαστηριακές Σημειώσεις ΕΙΣΑΓΩΓΗ ΣΤΗ ΓΛΩΣΣΑ HTML ΜΕΡΟΣ Β': CSS ΚΑΙ FORMS 2 Cascading Style Sheets (CSS) Cascading Style

Διαβάστε περισσότερα

HTML... 1. Εισαγωγή στην HTML και τα CSS

HTML... 1. Εισαγωγή στην HTML και τα CSS HTML...... 1 Εισαγωγή στην HTML και τα CSS HTML...... 2 HTML. H HTML (HYPERTEXT MARKUP LANGUAGE), είναι µία γλώσσα η οποία «λέει» στον υπολογιστή πως θα πρέπει να εµφανίσει µία ιστοσελίδα. Τα αρχεία στα

Διαβάστε περισσότερα

Σχεδίαση και Ανάπτυξη Ιστότοπων

Σχεδίαση και Ανάπτυξη Ιστότοπων Σχεδίαση και Ανάπτυξη Ιστότοπων Ιστορική Εξέλιξη του Παγκόσμιου Ιστού Παρουσίαση 1 η 1 Βελώνης Γεώργιος Καθηγητής Περιεχόμενα Τι είναι το Διαδίκτυο Βασικές Υπηρεσίες Διαδικτύου Προηγμένες Υπηρεσίες Διαδικτύου

Διαβάστε περισσότερα

Γλώσσα περιγραφής οδηγιών εµφάνισης-στοιχειοθέτησης

Γλώσσα περιγραφής οδηγιών εµφάνισης-στοιχειοθέτησης CASCADING STYLE-SHEETS CASCADING STYLE-SHEETS Γλώσσα περιγραφής οδηγιών εµφάνισης-στοιχειοθέτησης εφαρµογών HTML. Τα CSS ορίζονται σε δύο συστάσεις του W3C: CSS1, εκ. 1996 περιλαµβάνει περίπου 50 ιδιότητες

Διαβάστε περισσότερα

Blog στο Wordpress. Επιμέλεια: Δέγγλερη Σοφία

Blog στο Wordpress. Επιμέλεια: Δέγγλερη Σοφία Blog στο Wordpress Επιμέλεια: Δέγγλερη Σοφία Περιεχόμενα Μετάβαση στο blog Σύνδεση ως διαχειριστής Πίνακας ελέγχου Εμφάνιση Ρυθμίσεις Άρθρα Σελίδες Πολυμέσα Σύνδεσμοι Widgets Μετάβαση στο blog Πληκτρολογούμε

Διαβάστε περισσότερα

ΒΑΣΙΚΕΣ ΑΡΧΕΣ ΣΧΕΔΙΑΣΜΟΥ ΕΦΑΡΜΟΓΩΝ

ΒΑΣΙΚΕΣ ΑΡΧΕΣ ΣΧΕΔΙΑΣΜΟΥ ΕΦΑΡΜΟΓΩΝ ΒΑΣΙΚΕΣ ΑΡΧΕΣ ΣΧΕΔΙΑΣΜΟΥ ΕΦΑΡΜΟΓΩΝ Βαγγελιώ Καβακλή Τμήμα Πολιτισμικής Τεχνολογίας & Επικοινωνίας 8 Μαρτίου 2001 Hypertext Markup Language (HTML)! Σε μια ιστοσελίδα μπορούν να εμφανίζονται διαφορετικά

Διαβάστε περισσότερα

ΕΡΕΥΝΗΤΙΚΗ ΕΡΓΑΣΙΑ Α_ΤΕΤΡΑΜ_ ΕΣΠΕΡΙΝΟ ΛΥΚΕΙΟ ΛΑΡΙΣΑΣ. ΘΕΜΑ: E-LEARNING Αντζελα Πιετρη-Αριστελα Γκιονι ESPERINO LYKEIO LARISAS

ΕΡΕΥΝΗΤΙΚΗ ΕΡΓΑΣΙΑ Α_ΤΕΤΡΑΜ_ ΕΣΠΕΡΙΝΟ ΛΥΚΕΙΟ ΛΑΡΙΣΑΣ. ΘΕΜΑ: E-LEARNING Αντζελα Πιετρη-Αριστελα Γκιονι ESPERINO LYKEIO LARISAS ΕΡΕΥΝΗΤΙΚΗ ΕΡΓΑΣΙΑ Α_ΤΕΤΡΑΜ_2014-15 ΕΣΠΕΡΙΝΟ ΛΥΚΕΙΟ ΛΑΡΙΣΑΣ ΘΕΜΑ: E-LEARNING Αντζελα Πιετρη-Αριστελα Γκιονι ΜΑΘΗΣΗ Μάθηση είναι μια μόνιμη αλλαγή στη συμπεριφορά του ατόμου, η οποία είναι αποτέλεσμα εμπειρίας

Διαβάστε περισσότερα

Προγραμματισμός Διαδικτύου

Προγραμματισμός Διαδικτύου Πανεπιστήμιο Δυτικής Μακεδονίας Τμήμα Μηχανικών Πληροφορικής & Τηλεπικοινωνιών Προγραμματισμός Διαδικτύου Δρ. Μηνάς Δασυγένης mdasygenis@uowm.gr Τμήμα της παρουσίασης δημιουργήθηκε από τον κ. Παναγιώτη

Διαβάστε περισσότερα

TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)

TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα Εαρινό εξάμηνο Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί

Διαβάστε περισσότερα

ΕΠΛ 003: ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΑΙ ΠΛΗΡΟΦΟΡΙΑΚΑ ΣΥΣΤΗΜΑΤΑ HTML

ΕΠΛ 003: ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΑΙ ΠΛΗΡΟΦΟΡΙΑΚΑ ΣΥΣΤΗΜΑΤΑ HTML ΕΠΛ 003: ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΑΙ ΠΛΗΡΟΦΟΡΙΑΚΑ ΣΥΣΤΗΜΑΤΑ HTML Στόχοι 1 Να δημιουργήσουμε υπερκείμενα με την Γλώσσα Επισημείωσης Υπερκειμένων (hypertext markup language, HTML). Υπολογιστικά συστήματα:

Διαβάστε περισσότερα

Ανάπτυξη πλήρους διαδικτυακής e-commerce εφαρμογής με χρήση του CMS WordPress

Ανάπτυξη πλήρους διαδικτυακής e-commerce εφαρμογής με χρήση του CMS WordPress ΠΤΥΧΙΑΚΗ ΕΡΓΑΣΙΑ Ανάπτυξη πλήρους διαδικτυακής e-commerce εφαρμογής με χρήση του CMS WordPress ΚΟΤΣΟΓΙΑΝΝΙΔΗΣ ΛΑΖΑΡΟΣ Επιβλέπων καθηγητής Σφέτσος Παναγιώτης ΗΛΕΚΤΡΟΝΙΚΟ ΕΜΠΟΡΙΟ Ως Ηλεκτρονικό Εμπόριο ή

Διαβάστε περισσότερα

6.2 Υπηρεσίες Διαδικτύου

6.2 Υπηρεσίες Διαδικτύου 6.2 Υπηρεσίες Διαδικτύου 1 / 34 Όλες οι υπηρεσίες στο Διαδίκτυο, όπως και πολλές εφαρμογές λογισμικού, στηρίζονται στο μοντέλο Πελάτη Εξυπηρετητή. 2 / 34 Σύμφωνα με αυτό το μοντέλο ο Εξυπηρετητής οργανώνει,

Διαβάστε περισσότερα

<HTML> <HEAD> <TITLE> <BODY>

<HTML> <HEAD> <TITLE> <BODY> ΑΣΚΗΣΗ 1 1. Ανοίξτε τον επεξεργαστή ιστοσελίδων 2. Αποθηκεύστε στο X:/mathimata/html/askiseis/ με όνομα askisi1b.html 3. Θα φτιάξουμε μια νέα ιστοσελίδα, χρησιμοποιώντας τις βασικές ετικέτες

Διαβάστε περισσότερα

ΤΕΧΝΟΛΟΓΙΕΣ ΣΧΕΔΙΑΣΗΣ ΔΙΑΔΙΚΤΥΑΚΟΥ ΤΟΠΟΥ (Web Site Design Technologies)

ΤΕΧΝΟΛΟΓΙΕΣ ΣΧΕΔΙΑΣΗΣ ΔΙΑΔΙΚΤΥΑΚΟΥ ΤΟΠΟΥ (Web Site Design Technologies) ΕΠΛ 012 ΤΕΧΝΟΛΟΓΙΕΣ ΣΧΕΔΙΑΣΗΣ ΔΙΑΔΙΚΤΥΑΚΟΥ ΤΟΠΟΥ (Web Site Design Technologies) Διδάσκων Καθηγητής: Δημήτριος Τσουμάκος Εαρινό Εξάμηνο 2010 Βασικές Πληροφορίες Πότε: Δευτέρα & Πέμπτη 10:30-12μμ Πού: ΧΩΔ01

Διαβάστε περισσότερα

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

ΠΡΟΓΡΑΜΜΑΤΙΣΤΙΚΑ ΕΡΓΑΛΕΙΑ ΓΙΑ ΤΟ ΔΙΑΔΙΚΤΥΟ ΠΡΟΓΡΑΜΜΑΤΙΣΤΙΚΑ ΕΡΓΑΛΕΙΑ ΓΙΑ ΤΟ ΔΙΑΔΙΚΤΥΟ Κεφάλαιο 2. Το περιβάλλον του παγκόσμιου Ιστού Επιμέλεια: Καραγιάννης Σπύρος Καθηγητής ΠΕ19 Πλεονεκτήματα παγκόσμιου Ιστού Εξυπηρετητής Ιστού & Ιστοσελίδες Κύριες

Διαβάστε περισσότερα

Σταύρος Καουκάκης Ευτύχιος Βαβουράκης

Σταύρος Καουκάκης Ευτύχιος Βαβουράκης ΠΑΝΕΠΙΣΤΗΜΙΟ ΚΡΗΤΗΣ 1 ο ΣΧΟΛΕΙΟ ΚΩΔΙΚΑ «Βασικά Θέματα Προγραμματισμού στην Ανάπτυξη Δυναμικών Διαδικτυακών Εφαρμογών» (Part 1) Σταύρος Καουκάκης Ευτύχιος Βαβουράκης 1 Λίγα Λόγια για το Σχολείο Μονάδες

Διαβάστε περισσότερα

Βασίλειος Κοντογιάννης ΠΕ19

Βασίλειος Κοντογιάννης ΠΕ19 Ενότητα3 Επικοινωνία και Διαδίκτυο Κεφ9: Διαδίκτυο, Web2.0, WebX.0 9.1 Ιστορικά στοιχεία Από πού, πότε με ποια μορφή και με ποια αφορμή ξεκίνησε η λειτουργία του Διαδικτύου; Ξεκίνησε στην Αμερική, το 1969,

Διαβάστε περισσότερα

Ο Οδηγός γρήγορης εκκίνησης

Ο Οδηγός γρήγορης εκκίνησης Ο Οδηγός γρήγορης εκκίνησης του Microsoft PowerPoint 2013 έχει διαφορετική εμφάνιση από προηγούμενες εκδόσεις. Γι αυτό το λόγο, δημιουργήσαμε αυτόν τον οδηγό για να ελαχιστοποιήσουμε την καμπύλη εκμάθησης.

Διαβάστε περισσότερα

Σχεδόν όλες οι ιστοσελίδες βασίζονται σε μεγάλο βαθμό σε πίνακες. Για να εισάγουμε έναν πίνακα επιλέγουμε από το μενού Insert->Table.

Σχεδόν όλες οι ιστοσελίδες βασίζονται σε μεγάλο βαθμό σε πίνακες. Για να εισάγουμε έναν πίνακα επιλέγουμε από το μενού Insert->Table. DreamWeaver - Άσκηση 4η Πίνακες Παρακάτω θα δούμε πως μπορούμε να δημιουργούμε και να επεξεργαζόμαστε πίνακες, μια πολύ βασική δομή. Θα δούμε πως γίνεται εισαγωγή πίνακα, ένωση κελιών του πίνακα, προσθήκη

Διαβάστε περισσότερα

Πρωτόκολλα Διαδικτύου

Πρωτόκολλα Διαδικτύου Πρωτόκολλα Διαδικτύου Μέρος 1ο Επικοινωνίες Δεδομένων Μάθημα 3 ο Εισαγωγή στην Τεχνολογία TCP/IP To TCP/IP σημαίνει Transmission Control Protocol / Internet Protocol και θα μπορούσε να θεωρηθεί ότι πρόκειται

Διαβάστε περισσότερα

2. ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ

2. ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ 2014 2. ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ H HTML είναι μία γλώσσα σήμανσης και αποτελεί την κύρια γλώσσα δημιουργίας ιστοσελίδων του διαδικτύου. Είναι το ακρωνύμιο των λέξεων HyperText

Διαβάστε περισσότερα

TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)

TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα Εαρινό εξάμηνο Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί

Διαβάστε περισσότερα

Εισαγωγή στην πληροφορική

Εισαγωγή στην πληροφορική Τμήμα Μηχανικών Πληροφορικής & Τηλεπικοινωνιών Εισαγωγή στην πληροφορική Ενότητα 5: Εισαγωγή στην HTML (Μέρος Α) Αγγελίδης Παντελής Τμήμα Μηχανικών Πληροφορικής και Τηλεπικοινωνιών Άδειες Χρήσης Το παρόν

Διαβάστε περισσότερα

Σχεδιασμός και Ανάπτυξη Ιστότοπων

Σχεδιασμός και Ανάπτυξη Ιστότοπων Σχεδιασμός και Ανάπτυξη Ιστότοπων CSS: Ιδιότητες μορφοποίησης κειμένου Παρουσίαση 14 η 1 Βελώνης Γεώργιος Καθηγητής Browsers δοκιμών Οι δοκιμές έγιναν στους παρακάτω browsers και εκδόσεις τους: Google

Διαβάστε περισσότερα

ΑΣΠΑΙΤΕ. ΠΡΑΚΤΙΚΗ ΑΣΚΗΣΗ 4α. Υπερκείμενο και HTML. Ημερομηνία :... Τμήμα :... Ονοματεπώνυμο :...

ΑΣΠΑΙΤΕ. ΠΡΑΚΤΙΚΗ ΑΣΚΗΣΗ 4α. Υπερκείμενο και HTML. Ημερομηνία :... Τμήμα :... Ονοματεπώνυμο :... ΠΡΑΚΤΙΚΗ ΑΣΚΗΣΗ 4α Υπερκείμενο και HTML ΑΣΠΑΙΤΕ Ημερομηνία :... Τμήμα :... Ονοματεπώνυμο :... Η HTML (HyperText Markup Language) είναι η γλώσσα που χρησιμοποιείται για να περιγράψει τη δομή και τη διαμόρφωση

Διαβάστε περισσότερα

Συνοπτικός Οδηγός Χρήσης του Moodle για τον Καθηγητή

Συνοπτικός Οδηγός Χρήσης του Moodle για τον Καθηγητή Συνοπτικός Οδηγός Χρήσης του Moodle για τον Καθηγητή 1 Πίνακας Περιεχομένων 1. Εισαγωγή... 4 1.1 Περιβάλλον Moodle...4 1.2 Χρήση ονόματος χρήστη και κωδικού...4 1.3 Δημιουργία νέου μαθήματος...4 1.3.1

Διαβάστε περισσότερα

ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΣΧΟΛΙΚΟ ΒΙΒΛΙΟ ΚΕΦΑΛΑΙΟ 11 Ευάγγελος Χ. Ζιούλας (Καθηγητής Πληροφορικής)

ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΣΧΟΛΙΚΟ ΒΙΒΛΙΟ ΚΕΦΑΛΑΙΟ 11 Ευάγγελος Χ. Ζιούλας (Καθηγητής Πληροφορικής) http://www.zioulas.gr ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΣΧΟΛΙΚΟ ΒΙΒΛΙΟ ΚΕΦΑΛΑΙΟ 11 Ευάγγελος Χ. Ζιούλας (Καθηγητής Πληροφορικής) WEB SERVER Είναι μια εφαρμογή software που αναλαμβάνει την αποστολή μιας ιστοσελίδας σε

Διαβάστε περισσότερα

Σχεδιάζοντας Εφαρμογές για το Διαδίκτυο

Σχεδιάζοντας Εφαρμογές για το Διαδίκτυο FrontPage 2003 Πρακτικός Οδηγός Χρήσης Το FrontPage είναι ένα πρόγραμμα δημιουργίας ιστοσελίδων και δικτυακών τόπων που επιτρέπει το σχεδιασμό ιστοσελίδων μέσα από γραφικό περιβάλλον αλλά και την ταυτόχρονη

Διαβάστε περισσότερα

Εισαγωγή στην επιστήμη των υπολογιστών. Υλικό Υπολογιστών Κεφάλαιο 6ο ίκτυα υπολογιστών

Εισαγωγή στην επιστήμη των υπολογιστών. Υλικό Υπολογιστών Κεφάλαιο 6ο ίκτυα υπολογιστών Εισαγωγή στην επιστήμη των υπολογιστών Υλικό Υπολογιστών Κεφάλαιο 6ο ίκτυα υπολογιστών 1 ίκτυα μικρά και μεγάλα Ένα δίκτυο υπολογιστών (computer network) είναι ένας συνδυασμός συστημάτων (δηλαδή, υπολογιστών),

Διαβάστε περισσότερα

ΕΓΧΕΙΡΙΔΙΟ ΜΑΘΗΤΗ. της Πλατφόρμας Τηλεκατάρτισης

ΕΓΧΕΙΡΙΔΙΟ ΜΑΘΗΤΗ. της Πλατφόρμας Τηλεκατάρτισης ΕΓΧΕΙΡΙΔΙΟ ΜΑΘΗΤΗ της Πλατφόρμας Τηλεκατάρτισης ΠΕΡΙΕΧΟΜΕΝΑ 1. Εισαγωγή...2 2. Αρχική σελίδα, Εισαγωγή & Περιβάλλον Συστήματος...3 2.1. Αρχική σελίδα εισαγωγής...3 2.2. Εισαγωγή στην Πλατφόρμα Τηλε-κατάρτισης...4

Διαβάστε περισσότερα